diff --git a/.changeset/config.json b/.changeset/config.json
index 5e1305538ef..83d9bafc57b 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["www", "**-template"]
+  "ignore": ["www", "v4", "tests"]
 }
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 00000000000..3231e4090e3
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm test:*)",
+      "Bash(npm run typecheck:*)"
+    ],
+    "deny": []
+  }
+}
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000000..9e4646c61cb
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,8 @@
+node_modules/
+target/
+.next/
+build/
+dist/
+
+/templates/
+/fixtures/
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000000..acd2c4216a1
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [shadcn]
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000000..aff82a102da
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
diff --git a/.github/workflows/code-check.yml b/.github/workflows/code-check.yml
index 714b8dce73a..bfe6fc4525d 100644
--- a/.github/workflows/code-check.yml
+++ b/.github/workflows/code-check.yml
@@ -16,7 +16,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -52,7 +52,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -90,7 +90,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -113,4 +113,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build packages
+        run: pnpm --filter=shadcn build
+
       - run: pnpm typecheck
diff --git a/.github/workflows/issue-stale.yml b/.github/workflows/issue-stale.yml
index 500d781b08a..7e6b7dbc6c8 100644
--- a/.github/workflows/issue-stale.yml
+++ b/.github/workflows/issue-stale.yml
@@ -1,5 +1,5 @@
 # Adapted from vercel/next.js
-name: Issue Stale
+name: "Stale issue handler"
 on:
   workflow_dispatch:
   schedule:
@@ -11,17 +11,35 @@ jobs:
     runs-on: ubuntu-latest
     if: github.repository_owner == 'shadcn-ui'
     steps:
-      - uses: actions/stale@v4
-        id: stale-no-repro
-        name: "Close stale issues with no reproduction"
+      - uses: actions/stale@v9
+        id: issue-stale
+        name: "Mark stale issues, close stale issues"
         with:
           repo-token: ${{ secrets.STALE_TOKEN }}
-          close-issue-message: "This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please reopen or leave a comment. Thank you.\n(This is an automated message.)"
+          ascending: true
           days-before-issue-close: 7
-          days-before-issue-stale: 30
-          stale-pr-label: "stale?"
+          days-before-issue-stale: 365
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          remove-issue-stale-when-updated: true
+          stale-issue-label: "stale?"
+          exempt-issue-labels: "roadmap,next"
+          stale-issue-message: "This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
+          close-issue-message: "This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)"
+          operations-per-run: 300
+      - uses: actions/stale@v9
+        id: pr-state
+        name: "Mark stale PRs, close stale PRs"
+        with:
+          repo-token: ${{ secrets.STALE_TOKEN }}
+          ascending: true
+          days-before-issue-close: -1
+          days-before-issue-stale: -1
           days-before-pr-close: 7
-          days-before-pr-stale: 15
-          only-pr-labels: "postpone: more info or changes requested,please add a reproduction"
-          exempt-issue-labels: "roadmap,next,bug"
-          operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
+          days-before-pr-stale: 365
+          remove-pr-stale-when-updated: true
+          exempt-pr-labels: "roadmap,next,bug"
+          stale-pr-label: "stale?"
+          stale-pr-message: "This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
+          close-pr-message: "This PR has been automatically closed due to one year of inactivity. Thank you for your understanding! (This is an automated message)"
+          operations-per-run: 300
diff --git a/.github/workflows/prerelease-comment.yml b/.github/workflows/prerelease-comment.yml
index 7d4089ae1ac..41e7f693a25 100644
--- a/.github/workflows/prerelease-comment.yml
+++ b/.github/workflows/prerelease-comment.yml
@@ -49,7 +49,7 @@ jobs:
             A new prerelease is available for testing:
 
             ```sh
-            npx shadcn@${{ env.BETA_PACKAGE_VERSION }}
+            pnpm dlx shadcn@${{ env.BETA_PACKAGE_VERSION }}
             ```
 
       - name: "Remove the autorelease label once published"
diff --git a/.github/workflows/prerelease.yml b/.github/workflows/prerelease.yml
index 1f1932756aa..ad80e2f3086 100644
--- a/.github/workflows/prerelease.yml
+++ b/.github/workflows/prerelease.yml
@@ -54,7 +54,7 @@ jobs:
           path: packages/shadcn
 
       - name: Upload packaged artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
           path: packages/shadcn/dist/index.js
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index b3c17a17fbb..56cc0ea4597 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -41,7 +41,7 @@ jobs:
 
       - name: Create Version PR or Publish to NPM
         id: changesets
-        uses: changesets/action@v1.4.1
+        uses: changesets/action@v1
         with:
           commit: "chore(release): version packages"
           title: "chore(release): version packages"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 5cce791f415..fe4dd7902bb 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -8,6 +8,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     name: pnpm test
+    env:
+      NEXT_PUBLIC_APP_URL: http://localhost:4000
+      NEXT_PUBLIC_V0_URL: https://v0.dev
     steps:
       - uses: actions/checkout@v3
         with:
@@ -39,4 +42,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build packages
+        run: pnpm build --filter=shadcn
+
       - run: pnpm test
diff --git a/.github/workflows/validate-registries.yml b/.github/workflows/validate-registries.yml
new file mode 100644
index 00000000000..e5dbc743b88
--- /dev/null
+++ b/.github/workflows/validate-registries.yml
@@ -0,0 +1,54 @@
+name: Validate Registries
+
+on:
+  pull_request:
+    paths:
+      - "apps/v4/public/r/registries.json"
+  push:
+    branches:
+      - main
+    paths:
+      - "apps/v4/public/r/registries.json"
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    name: pnpm validate:registries
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 9.0.6
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build packages
+        run: pnpm build --filter=shadcn
+
+      - name: Validate registries
+        run: pnpm --filter=v4 validate:registries
diff --git a/.npmrc b/.npmrc
index 3e775efb0f4..6613b112ac8 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
 auto-install-peers=true
+link-workspace-packages=true
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 48a495a6a0d..86d709b11e2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,10 +3,7 @@
     { "pattern": "apps/*/" },
     { "pattern": "packages/*/" }
   ],
-  "tailwindCSS.experimental.classRegex": [
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
-  ],
+  "tailwindCSS.classFunctions": ["cva", "cn"],
   "vitest.debugExclude": [
     "<node_internals>/**",
     "**/node_modules/**",
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f45807d242e..0927b4b58f9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -91,6 +91,42 @@ 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 v4: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:
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 00000000000..366e5bd4982
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,9 @@
+# Security Policy
+
+If you believe you have found a security vulnerability, we encourage you to let us know right away.
+
+We will investigate all legitimate reports and do our best to quickly fix the problem.
+
+Our preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our Open Source Software. 
+
+To do this, please visit the security tab of the repository and click the "Report a vulnerability" button.
diff --git a/apps/v4/.env.example b/apps/v4/.env.example
new file mode 100644
index 00000000000..d2f09fb8818
--- /dev/null
+++ b/apps/v4/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_V0_URL=https://v0.dev
+NEXT_PUBLIC_APP_URL=http://localhost:4000
\ No newline at end of file
diff --git a/apps/v4/.gitignore b/apps/v4/.gitignore
new file mode 100644
index 00000000000..db9ea2f2569
--- /dev/null
+++ b/apps/v4/.gitignore
@@ -0,0 +1,48 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+
+# generated content
+.contentlayer
+.content-collections
+.source
diff --git a/apps/v4/.prettierignore b/apps/v4/.prettierignore
new file mode 100644
index 00000000000..1a1509ae77e
--- /dev/null
+++ b/apps/v4/.prettierignore
@@ -0,0 +1,7 @@
+dist
+node_modules
+.next
+build
+.contentlayer
+registry/__index__.tsx
+content/docs/components/calendar.mdx
diff --git a/apps/v4/README.md b/apps/v4/README.md
new file mode 100644
index 00000000000..cb8a74abedc
--- /dev/null
+++ b/apps/v4/README.md
@@ -0,0 +1 @@
+This is a wip registry for the `shadcn` canary version. It has React 19 and Tailwind v4 components.
diff --git a/apps/v4/app/(app)/(root)/page.tsx b/apps/v4/app/(app)/(root)/page.tsx
new file mode 100644
index 00000000000..a9ef59336a0
--- /dev/null
+++ b/apps/v4/app/(app)/(root)/page.tsx
@@ -0,0 +1,96 @@
+import { Metadata } from "next"
+import Image from "next/image"
+import Link from "next/link"
+
+import { Announcement } from "@/components/announcement"
+import { CardsDemo } from "@/components/cards"
+import { ExamplesNav } from "@/components/examples-nav"
+import {
+  PageActions,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+import { PageNav } from "@/components/page-nav"
+import { ThemeSelector } from "@/components/theme-selector"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+const title = "The Foundation for your Design System"
+const description =
+  "A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code."
+
+export const dynamic = "force-static"
+export const revalidate = false
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+}
+
+export default function IndexPage() {
+  return (
+    <div className="flex flex-1 flex-col">
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
+        <PageActions>
+          <Button asChild size="sm">
+            <Link href="/docs/installation">Get Started</Link>
+          </Button>
+          <Button asChild size="sm" variant="ghost">
+            <Link href="/docs/components">View Components</Link>
+          </Button>
+        </PageActions>
+      </PageHeader>
+      <PageNav className="hidden md:flex">
+        <ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
+        <ThemeSelector className="mr-4 hidden md:flex" />
+      </PageNav>
+      <div className="container-wrapper section-soft flex-1 pb-6">
+        <div className="container overflow-hidden">
+          <section className="border-border/50 -mx-4 w-[160vw] overflow-hidden rounded-lg border md:hidden md:w-[150vw]">
+            <Image
+              src="/r/styles/new-york-v4/dashboard-01-light.png"
+              width={1400}
+              height={875}
+              alt="Dashboard"
+              className="block dark:hidden"
+              priority
+            />
+            <Image
+              src="/r/styles/new-york-v4/dashboard-01-dark.png"
+              width={1400}
+              height={875}
+              alt="Dashboard"
+              className="hidden dark:block"
+              priority
+            />
+          </section>
+          <section className="theme-container hidden md:block">
+            <CardsDemo />
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/blocks/[...categories]/page.tsx b/apps/v4/app/(app)/blocks/[...categories]/page.tsx
new file mode 100644
index 00000000000..9c3b9f227cc
--- /dev/null
+++ b/apps/v4/app/(app)/blocks/[...categories]/page.tsx
@@ -0,0 +1,30 @@
+import { getAllBlockIds } from "@/lib/blocks"
+import { BlockDisplay } from "@/components/block-display"
+import { registryCategories } from "@/registry/registry-categories"
+
+export const revalidate = false
+export const dynamic = "force-static"
+export const dynamicParams = false
+
+export async function generateStaticParams() {
+  return registryCategories.map((category) => ({
+    categories: [category.slug],
+  }))
+}
+
+export default async function BlocksPage({
+  params,
+}: {
+  params: Promise<{ categories?: string[] }>
+}) {
+  const { categories = [] } = await params
+  const blocks = await getAllBlockIds(["registry:block"], categories)
+
+  return (
+    <div className="flex flex-col gap-12 md:gap-24">
+      {blocks.map((name) => (
+        <BlockDisplay name={name} key={name} />
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/blocks/layout.tsx b/apps/v4/app/(app)/blocks/layout.tsx
new file mode 100644
index 00000000000..7f1923be29e
--- /dev/null
+++ b/apps/v4/app/(app)/blocks/layout.tsx
@@ -0,0 +1,79 @@
+import { Metadata } from "next"
+import Link from "next/link"
+
+import { Announcement } from "@/components/announcement"
+import { BlocksNav } from "@/components/blocks-nav"
+import {
+  PageActions,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+import { PageNav } from "@/components/page-nav"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+const title = "Building Blocks for the Web"
+const description =
+  "Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever."
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+}
+
+export default function BlocksLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
+        <PageActions>
+          <Button asChild size="sm">
+            <a href="#blocks">Browse Blocks</a>
+          </Button>
+          <Button asChild variant="ghost" size="sm">
+            <Link href="/docs/blocks">Add a block</Link>
+          </Button>
+        </PageActions>
+      </PageHeader>
+      <PageNav id="blocks">
+        <BlocksNav />
+        <Button
+          asChild
+          variant="secondary"
+          size="sm"
+          className="mr-7 hidden shadow-none lg:flex"
+        >
+          <Link href="/blocks/sidebar">Browse all blocks</Link>
+        </Button>
+      </PageNav>
+      <div className="container-wrapper section-soft flex-1 md:py-12">
+        <div className="container">{children}</div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/app/(app)/blocks/page.tsx b/apps/v4/app/(app)/blocks/page.tsx
new file mode 100644
index 00000000000..e9687a962a5
--- /dev/null
+++ b/apps/v4/app/(app)/blocks/page.tsx
@@ -0,0 +1,32 @@
+import Link from "next/link"
+
+import { BlockDisplay } from "@/components/block-display"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export const dynamic = "force-static"
+export const revalidate = false
+
+const FEATURED_BLOCKS = [
+  "dashboard-01",
+  "sidebar-07",
+  "sidebar-03",
+  "login-03",
+  "login-04",
+]
+
+export default async function BlocksPage() {
+  return (
+    <div className="flex flex-col gap-12 md:gap-24">
+      {FEATURED_BLOCKS.map((name) => (
+        <BlockDisplay name={name} key={name} />
+      ))}
+      <div className="container-wrapper">
+        <div className="container flex justify-center py-6">
+          <Button asChild variant="outline">
+            <Link href="/blocks/sidebar">Browse more blocks</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/charts/[type]/page.tsx b/apps/v4/app/(app)/charts/[type]/page.tsx
new file mode 100644
index 00000000000..65cdac9ab3c
--- /dev/null
+++ b/apps/v4/app/(app)/charts/[type]/page.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { notFound } from "next/navigation"
+
+import { cn } from "@/lib/utils"
+import { ChartDisplay } from "@/components/chart-display"
+import { charts } from "@/app/(app)/charts/charts"
+
+export const revalidate = false
+export const dynamic = "force-static"
+export const dynamicParams = false
+
+interface ChartPageProps {
+  params: Promise<{
+    type: string
+  }>
+}
+
+const chartTypes = [
+  "area",
+  "bar",
+  "line",
+  "pie",
+  "radar",
+  "radial",
+  "tooltip",
+] as const
+type ChartType = (typeof chartTypes)[number]
+
+export async function generateStaticParams() {
+  return chartTypes.map((type) => ({
+    type,
+  }))
+}
+
+export default async function ChartPage({ params }: ChartPageProps) {
+  const { type } = await params
+
+  if (!chartTypes.includes(type as ChartType)) {
+    return notFound()
+  }
+
+  const chartType = type as ChartType
+  const chartList = charts[chartType]
+
+  return (
+    <div className="grid flex-1 gap-12 lg:gap-24">
+      <h2 className="sr-only">
+        {type.charAt(0).toUpperCase() + type.slice(1)} Charts
+      </h2>
+      <div className="grid flex-1 scroll-mt-20 items-stretch gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10">
+        {Array.from({ length: 12 }).map((_, index) => {
+          const chart = chartList[index]
+          return chart ? (
+            <ChartDisplay
+              key={chart.id}
+              name={chart.id}
+              className={cn(chart.fullWidth && "md:col-span-2 lg:col-span-3")}
+            >
+              <chart.component />
+            </ChartDisplay>
+          ) : (
+            <div
+              key={`empty-${index}`}
+              className="hidden aspect-square w-full rounded-lg border border-dashed xl:block"
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/charts/charts.tsx b/apps/v4/app/(app)/charts/charts.tsx
new file mode 100644
index 00000000000..036fc976dd4
--- /dev/null
+++ b/apps/v4/app/(app)/charts/charts.tsx
@@ -0,0 +1,275 @@
+import * as React from "react"
+
+import { ChartAreaAxes } from "@/registry/new-york-v4/charts/chart-area-axes"
+import { ChartAreaDefault } from "@/registry/new-york-v4/charts/chart-area-default"
+import { ChartAreaGradient } from "@/registry/new-york-v4/charts/chart-area-gradient"
+import { ChartAreaIcons } from "@/registry/new-york-v4/charts/chart-area-icons"
+import { ChartAreaInteractive } from "@/registry/new-york-v4/charts/chart-area-interactive"
+import { ChartAreaLegend } from "@/registry/new-york-v4/charts/chart-area-legend"
+import { ChartAreaLinear } from "@/registry/new-york-v4/charts/chart-area-linear"
+import { ChartAreaStacked } from "@/registry/new-york-v4/charts/chart-area-stacked"
+import { ChartAreaStackedExpand } from "@/registry/new-york-v4/charts/chart-area-stacked-expand"
+import { ChartAreaStep } from "@/registry/new-york-v4/charts/chart-area-step"
+import { ChartBarActive } from "@/registry/new-york-v4/charts/chart-bar-active"
+import { ChartBarDefault } from "@/registry/new-york-v4/charts/chart-bar-default"
+import { ChartBarHorizontal } from "@/registry/new-york-v4/charts/chart-bar-horizontal"
+import { ChartBarInteractive } from "@/registry/new-york-v4/charts/chart-bar-interactive"
+import { ChartBarLabel } from "@/registry/new-york-v4/charts/chart-bar-label"
+import { ChartBarLabelCustom } from "@/registry/new-york-v4/charts/chart-bar-label-custom"
+import { ChartBarMixed } from "@/registry/new-york-v4/charts/chart-bar-mixed"
+import { ChartBarMultiple } from "@/registry/new-york-v4/charts/chart-bar-multiple"
+import { ChartBarNegative } from "@/registry/new-york-v4/charts/chart-bar-negative"
+import { ChartBarStacked } from "@/registry/new-york-v4/charts/chart-bar-stacked"
+import { ChartLineDefault } from "@/registry/new-york-v4/charts/chart-line-default"
+import { ChartLineDots } from "@/registry/new-york-v4/charts/chart-line-dots"
+import { ChartLineDotsColors } from "@/registry/new-york-v4/charts/chart-line-dots-colors"
+import { ChartLineDotsCustom } from "@/registry/new-york-v4/charts/chart-line-dots-custom"
+import { ChartLineInteractive } from "@/registry/new-york-v4/charts/chart-line-interactive"
+import { ChartLineLabel } from "@/registry/new-york-v4/charts/chart-line-label"
+import { ChartLineLabelCustom } from "@/registry/new-york-v4/charts/chart-line-label-custom"
+import { ChartLineLinear } from "@/registry/new-york-v4/charts/chart-line-linear"
+import { ChartLineMultiple } from "@/registry/new-york-v4/charts/chart-line-multiple"
+import { ChartLineStep } from "@/registry/new-york-v4/charts/chart-line-step"
+import { ChartPieDonut } from "@/registry/new-york-v4/charts/chart-pie-donut"
+import { ChartPieDonutActive } from "@/registry/new-york-v4/charts/chart-pie-donut-active"
+import { ChartPieDonutText } from "@/registry/new-york-v4/charts/chart-pie-donut-text"
+import { ChartPieInteractive } from "@/registry/new-york-v4/charts/chart-pie-interactive"
+import { ChartPieLabel } from "@/registry/new-york-v4/charts/chart-pie-label"
+import { ChartPieLabelCustom } from "@/registry/new-york-v4/charts/chart-pie-label-custom"
+import { ChartPieLabelList } from "@/registry/new-york-v4/charts/chart-pie-label-list"
+import { ChartPieLegend } from "@/registry/new-york-v4/charts/chart-pie-legend"
+import { ChartPieSeparatorNone } from "@/registry/new-york-v4/charts/chart-pie-separator-none"
+import { ChartPieSimple } from "@/registry/new-york-v4/charts/chart-pie-simple"
+import { ChartPieStacked } from "@/registry/new-york-v4/charts/chart-pie-stacked"
+import { ChartRadarDefault } from "@/registry/new-york-v4/charts/chart-radar-default"
+import { ChartRadarDots } from "@/registry/new-york-v4/charts/chart-radar-dots"
+import { ChartRadarGridCircle } from "@/registry/new-york-v4/charts/chart-radar-grid-circle"
+import { ChartRadarGridCircleFill } from "@/registry/new-york-v4/charts/chart-radar-grid-circle-fill"
+import { ChartRadarGridCircleNoLines } from "@/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines"
+import { ChartRadarGridCustom } from "@/registry/new-york-v4/charts/chart-radar-grid-custom"
+import { ChartRadarGridFill } from "@/registry/new-york-v4/charts/chart-radar-grid-fill"
+import { ChartRadarGridNone } from "@/registry/new-york-v4/charts/chart-radar-grid-none"
+import { ChartRadarIcons } from "@/registry/new-york-v4/charts/chart-radar-icons"
+import { ChartRadarLabelCustom } from "@/registry/new-york-v4/charts/chart-radar-label-custom"
+import { ChartRadarLegend } from "@/registry/new-york-v4/charts/chart-radar-legend"
+import { ChartRadarLinesOnly } from "@/registry/new-york-v4/charts/chart-radar-lines-only"
+import { ChartRadarMultiple } from "@/registry/new-york-v4/charts/chart-radar-multiple"
+import { ChartRadarRadius } from "@/registry/new-york-v4/charts/chart-radar-radius"
+import { ChartRadialGrid } from "@/registry/new-york-v4/charts/chart-radial-grid"
+import { ChartRadialLabel } from "@/registry/new-york-v4/charts/chart-radial-label"
+import { ChartRadialShape } from "@/registry/new-york-v4/charts/chart-radial-shape"
+import { ChartRadialSimple } from "@/registry/new-york-v4/charts/chart-radial-simple"
+import { ChartRadialStacked } from "@/registry/new-york-v4/charts/chart-radial-stacked"
+import { ChartRadialText } from "@/registry/new-york-v4/charts/chart-radial-text"
+import { ChartTooltipAdvanced } from "@/registry/new-york-v4/charts/chart-tooltip-advanced"
+import { ChartTooltipDefault } from "@/registry/new-york-v4/charts/chart-tooltip-default"
+import { ChartTooltipFormatter } from "@/registry/new-york-v4/charts/chart-tooltip-formatter"
+import { ChartTooltipIcons } from "@/registry/new-york-v4/charts/chart-tooltip-icons"
+import { ChartTooltipIndicatorLine } from "@/registry/new-york-v4/charts/chart-tooltip-indicator-line"
+import { ChartTooltipIndicatorNone } from "@/registry/new-york-v4/charts/chart-tooltip-indicator-none"
+import { ChartTooltipLabelCustom } from "@/registry/new-york-v4/charts/chart-tooltip-label-custom"
+import { ChartTooltipLabelFormatter } from "@/registry/new-york-v4/charts/chart-tooltip-label-formatter"
+import { ChartTooltipLabelNone } from "@/registry/new-york-v4/charts/chart-tooltip-label-none"
+
+type ChartComponent = React.ComponentType
+
+interface ChartItem {
+  id: string
+  component: ChartComponent
+  fullWidth?: boolean
+}
+
+interface ChartGroups {
+  area: ChartItem[]
+  bar: ChartItem[]
+  line: ChartItem[]
+  pie: ChartItem[]
+  radar: ChartItem[]
+  radial: ChartItem[]
+  tooltip: ChartItem[]
+}
+
+export const charts: ChartGroups = {
+  area: [
+    {
+      id: "chart-area-interactive",
+      component: ChartAreaInteractive,
+      fullWidth: true,
+    },
+    { id: "chart-area-default", component: ChartAreaDefault },
+    { id: "chart-area-linear", component: ChartAreaLinear },
+    { id: "chart-area-step", component: ChartAreaStep },
+    { id: "chart-area-legend", component: ChartAreaLegend },
+    { id: "chart-area-stacked", component: ChartAreaStacked },
+    { id: "chart-area-stacked-expand", component: ChartAreaStackedExpand },
+    { id: "chart-area-icons", component: ChartAreaIcons },
+    { id: "chart-area-gradient", component: ChartAreaGradient },
+    { id: "chart-area-axes", component: ChartAreaAxes },
+  ],
+  bar: [
+    {
+      id: "chart-bar-interactive",
+      component: ChartBarInteractive,
+      fullWidth: true,
+    },
+    { id: "chart-bar-default", component: ChartBarDefault },
+    { id: "chart-bar-horizontal", component: ChartBarHorizontal },
+    { id: "chart-bar-multiple", component: ChartBarMultiple },
+    { id: "chart-bar-stacked", component: ChartBarStacked },
+    { id: "chart-bar-label", component: ChartBarLabel },
+    { id: "chart-bar-label-custom", component: ChartBarLabelCustom },
+    { id: "chart-bar-mixed", component: ChartBarMixed },
+    { id: "chart-bar-active", component: ChartBarActive },
+    { id: "chart-bar-negative", component: ChartBarNegative },
+  ],
+  line: [
+    {
+      id: "chart-line-interactive",
+      component: ChartLineInteractive,
+      fullWidth: true,
+    },
+    { id: "chart-line-default", component: ChartLineDefault },
+    { id: "chart-line-linear", component: ChartLineLinear },
+    { id: "chart-line-step", component: ChartLineStep },
+    { id: "chart-line-multiple", component: ChartLineMultiple },
+    { id: "chart-line-dots", component: ChartLineDots },
+    { id: "chart-line-dots-custom", component: ChartLineDotsCustom },
+    { id: "chart-line-dots-colors", component: ChartLineDotsColors },
+    { id: "chart-line-label", component: ChartLineLabel },
+    { id: "chart-line-label-custom", component: ChartLineLabelCustom },
+  ],
+  pie: [
+    { id: "chart-pie-simple", component: ChartPieSimple },
+    { id: "chart-pie-separator-none", component: ChartPieSeparatorNone },
+    { id: "chart-pie-label", component: ChartPieLabel },
+    { id: "chart-pie-label-custom", component: ChartPieLabelCustom },
+    { id: "chart-pie-label-list", component: ChartPieLabelList },
+    { id: "chart-pie-legend", component: ChartPieLegend },
+    { id: "chart-pie-donut", component: ChartPieDonut },
+    { id: "chart-pie-donut-active", component: ChartPieDonutActive },
+    { id: "chart-pie-donut-text", component: ChartPieDonutText },
+    { id: "chart-pie-stacked", component: ChartPieStacked },
+    { id: "chart-pie-interactive", component: ChartPieInteractive },
+  ],
+  radar: [
+    { id: "chart-radar-default", component: ChartRadarDefault },
+    { id: "chart-radar-dots", component: ChartRadarDots },
+    { id: "chart-radar-lines-only", component: ChartRadarLinesOnly },
+    { id: "chart-radar-label-custom", component: ChartRadarLabelCustom },
+    { id: "chart-radar-grid-custom", component: ChartRadarGridCustom },
+    { id: "chart-radar-grid-none", component: ChartRadarGridNone },
+    { id: "chart-radar-grid-circle", component: ChartRadarGridCircle },
+    {
+      id: "chart-radar-grid-circle-no-lines",
+      component: ChartRadarGridCircleNoLines,
+    },
+    { id: "chart-radar-grid-circle-fill", component: ChartRadarGridCircleFill },
+    { id: "chart-radar-grid-fill", component: ChartRadarGridFill },
+    { id: "chart-radar-multiple", component: ChartRadarMultiple },
+    { id: "chart-radar-legend", component: ChartRadarLegend },
+    { id: "chart-radar-icons", component: ChartRadarIcons },
+    { id: "chart-radar-radius", component: ChartRadarRadius },
+  ],
+  radial: [
+    { id: "chart-radial-simple", component: ChartRadialSimple },
+    { id: "chart-radial-label", component: ChartRadialLabel },
+    { id: "chart-radial-grid", component: ChartRadialGrid },
+    { id: "chart-radial-text", component: ChartRadialText },
+    { id: "chart-radial-shape", component: ChartRadialShape },
+    { id: "chart-radial-stacked", component: ChartRadialStacked },
+  ],
+  tooltip: [
+    { id: "chart-tooltip-default", component: ChartTooltipDefault },
+    {
+      id: "chart-tooltip-indicator-line",
+      component: ChartTooltipIndicatorLine,
+    },
+    {
+      id: "chart-tooltip-indicator-none",
+      component: ChartTooltipIndicatorNone,
+    },
+    { id: "chart-tooltip-label-custom", component: ChartTooltipLabelCustom },
+    {
+      id: "chart-tooltip-label-formatter",
+      component: ChartTooltipLabelFormatter,
+    },
+    { id: "chart-tooltip-label-none", component: ChartTooltipLabelNone },
+    { id: "chart-tooltip-formatter", component: ChartTooltipFormatter },
+    { id: "chart-tooltip-icons", component: ChartTooltipIcons },
+    { id: "chart-tooltip-advanced", component: ChartTooltipAdvanced },
+  ],
+}
+
+// Export individual components for backward compatibility
+export {
+  ChartAreaDefault,
+  ChartAreaLinear,
+  ChartAreaStep,
+  ChartAreaLegend,
+  ChartAreaStacked,
+  ChartAreaStackedExpand,
+  ChartAreaIcons,
+  ChartAreaGradient,
+  ChartAreaAxes,
+  ChartAreaInteractive,
+  ChartBarDefault,
+  ChartBarHorizontal,
+  ChartBarMultiple,
+  ChartBarStacked,
+  ChartBarLabel,
+  ChartBarLabelCustom,
+  ChartBarMixed,
+  ChartBarActive,
+  ChartBarNegative,
+  ChartBarInteractive,
+  ChartLineDefault,
+  ChartLineLinear,
+  ChartLineStep,
+  ChartLineMultiple,
+  ChartLineDots,
+  ChartLineDotsCustom,
+  ChartLineDotsColors,
+  ChartLineLabel,
+  ChartLineLabelCustom,
+  ChartLineInteractive,
+  ChartPieSimple,
+  ChartPieSeparatorNone,
+  ChartPieLabel,
+  ChartPieLabelCustom,
+  ChartPieLabelList,
+  ChartPieLegend,
+  ChartPieDonut,
+  ChartPieDonutActive,
+  ChartPieDonutText,
+  ChartPieStacked,
+  ChartPieInteractive,
+  ChartRadarDefault,
+  ChartRadarDots,
+  ChartRadarLinesOnly,
+  ChartRadarLabelCustom,
+  ChartRadarGridCustom,
+  ChartRadarGridNone,
+  ChartRadarGridCircle,
+  ChartRadarGridCircleNoLines,
+  ChartRadarGridCircleFill,
+  ChartRadarGridFill,
+  ChartRadarMultiple,
+  ChartRadarLegend,
+  ChartRadarIcons,
+  ChartRadarRadius,
+  ChartRadialSimple,
+  ChartRadialLabel,
+  ChartRadialGrid,
+  ChartRadialText,
+  ChartRadialShape,
+  ChartRadialStacked,
+  ChartTooltipDefault,
+  ChartTooltipIndicatorLine,
+  ChartTooltipIndicatorNone,
+  ChartTooltipLabelCustom,
+  ChartTooltipLabelFormatter,
+  ChartTooltipLabelNone,
+  ChartTooltipFormatter,
+  ChartTooltipIcons,
+  ChartTooltipAdvanced,
+}
diff --git a/apps/v4/app/(app)/charts/layout.tsx b/apps/v4/app/(app)/charts/layout.tsx
new file mode 100644
index 00000000000..608bb1e4e02
--- /dev/null
+++ b/apps/v4/app/(app)/charts/layout.tsx
@@ -0,0 +1,75 @@
+import { Metadata } from "next"
+import Link from "next/link"
+
+import { Announcement } from "@/components/announcement"
+import { ChartsNav } from "@/components/charts-nav"
+import {
+  PageActions,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+import { PageNav } from "@/components/page-nav"
+import { ThemeSelector } from "@/components/theme-selector"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+const title = "Beautiful Charts & Graphs"
+const description =
+  "A collection of ready-to-use chart components built with Recharts. From basic charts to rich data displays, copy and paste into your apps."
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+}
+
+export default function ChartsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
+        <PageActions>
+          <Button asChild size="sm">
+            <a href="#charts">Browse Charts</a>
+          </Button>
+          <Button asChild variant="ghost" size="sm">
+            <Link href="/docs/components/chart">Documentation</Link>
+          </Button>
+        </PageActions>
+      </PageHeader>
+      <PageNav id="charts">
+        <ChartsNav />
+        <ThemeSelector className="mr-4 hidden md:flex" />
+      </PageNav>
+      <div className="container-wrapper section-soft flex-1">
+        <div className="container pb-6">
+          <section className="theme-container">{children}</section>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/app/(app)/colors/layout.tsx b/apps/v4/app/(app)/colors/layout.tsx
new file mode 100644
index 00000000000..94dcd833553
--- /dev/null
+++ b/apps/v4/app/(app)/colors/layout.tsx
@@ -0,0 +1,78 @@
+import { Metadata } from "next"
+import Link from "next/link"
+
+import { Announcement } from "@/components/announcement"
+import { ColorsNav } from "@/components/colors-nav"
+import {
+  PageActions,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+const title = "Tailwind Colors in Every Format"
+const description =
+  "The complete Tailwind color palette in HEX, RGB, HSL, CSS variables, and classes. Ready to copy and paste into your project."
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+}
+
+export default function ColorsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div>
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
+        <PageActions>
+          <Button asChild size="sm">
+            <a href="#colors">Browse Colors</a>
+          </Button>
+          <Button asChild variant="ghost" size="sm">
+            <Link href="/docs/theming">Documentation</Link>
+          </Button>
+        </PageActions>
+      </PageHeader>
+      <div className="hidden">
+        <div className="container-wrapper">
+          <div className="container flex items-center justify-between gap-8 py-4">
+            <ColorsNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
+          </div>
+        </div>
+      </div>
+      <div className="container-wrapper">
+        <div className="container py-6">
+          <section id="colors" className="scroll-mt-20">
+            {children}
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/colors/page.tsx b/apps/v4/app/(app)/colors/page.tsx
new file mode 100644
index 00000000000..be716579301
--- /dev/null
+++ b/apps/v4/app/(app)/colors/page.tsx
@@ -0,0 +1,17 @@
+import { getColors } from "@/lib/colors"
+import { ColorPalette } from "@/components/color-palette"
+
+export const dynamic = "force-static"
+export const revalidate = false
+
+export default function ColorsPage() {
+  const colors = getColors()
+
+  return (
+    <div className="grid gap-8 lg:gap-16 xl:gap-20">
+      {colors.map((colorPalette) => (
+        <ColorPalette key={colorPalette.name} colorPalette={colorPalette} />
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
new file mode 100644
index 00000000000..5f545d54dc1
--- /dev/null
+++ b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
@@ -0,0 +1,207 @@
+import Link from "next/link"
+import { notFound } from "next/navigation"
+import { mdxComponents } from "@/mdx-components"
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  IconArrowUpRight,
+} from "@tabler/icons-react"
+import { findNeighbour } from "fumadocs-core/server"
+
+import { source } from "@/lib/source"
+import { absoluteUrl } from "@/lib/utils"
+import { DocsCopyPage } from "@/components/docs-copy-page"
+import { DocsTableOfContents } from "@/components/docs-toc"
+import { OpenInV0Cta } from "@/components/open-in-v0-cta"
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export const revalidate = false
+export const dynamic = "force-static"
+export const dynamicParams = false
+
+export function generateStaticParams() {
+  return source.generateParams()
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>
+}) {
+  const params = await props.params
+  const page = source.getPage(params.slug)
+
+  if (!page) {
+    notFound()
+  }
+
+  const doc = page.data
+
+  if (!doc.title || !doc.description) {
+    notFound()
+  }
+
+  return {
+    title: doc.title,
+    description: doc.description,
+    openGraph: {
+      title: doc.title,
+      description: doc.description,
+      type: "article",
+      url: absoluteUrl(page.url),
+      images: [
+        {
+          url: `/og?title=${encodeURIComponent(
+            doc.title
+          )}&description=${encodeURIComponent(doc.description)}`,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: doc.title,
+      description: doc.description,
+      images: [
+        {
+          url: `/og?title=${encodeURIComponent(
+            doc.title
+          )}&description=${encodeURIComponent(doc.description)}`,
+        },
+      ],
+      creator: "@shadcn",
+    },
+  }
+}
+
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>
+}) {
+  const params = await props.params
+  const page = source.getPage(params.slug)
+  if (!page) {
+    notFound()
+  }
+
+  const doc = page.data
+  const MDX = doc.body
+  const neighbours = await findNeighbour(source.pageTree, page.url)
+
+  const links = doc.links
+
+  return (
+    <div
+      data-slot="docs"
+      className="flex items-stretch text-[1.05rem] sm:text-[15px] xl:w-full"
+    >
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="h-(--top-spacing) shrink-0" />
+        <div className="mx-auto flex w-full max-w-2xl min-w-0 flex-1 flex-col gap-8 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
+          <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-2">
+              <div className="flex items-start justify-between">
+                <h1 className="scroll-m-20 text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
+                  {doc.title}
+                </h1>
+                <div className="docs-nav bg-background/80 border-border/50 fixed inset-x-0 bottom-0 isolate z-50 flex items-center gap-2 border-t px-6 py-4 backdrop-blur-sm sm:static sm:z-0 sm:border-t-0 sm:bg-transparent sm:px-0 sm:pt-1.5 sm:backdrop-blur-none">
+                  <DocsCopyPage
+                    page={doc.content}
+                    url={absoluteUrl(page.url)}
+                  />
+                  {neighbours.previous && (
+                    <Button
+                      variant="secondary"
+                      size="icon"
+                      className="extend-touch-target ml-auto size-8 shadow-none md:size-7"
+                      asChild
+                    >
+                      <Link href={neighbours.previous.url}>
+                        <IconArrowLeft />
+                        <span className="sr-only">Previous</span>
+                      </Link>
+                    </Button>
+                  )}
+                  {neighbours.next && (
+                    <Button
+                      variant="secondary"
+                      size="icon"
+                      className="extend-touch-target size-8 shadow-none md:size-7"
+                      asChild
+                    >
+                      <Link href={neighbours.next.url}>
+                        <span className="sr-only">Next</span>
+                        <IconArrowRight />
+                      </Link>
+                    </Button>
+                  )}
+                </div>
+              </div>
+              {doc.description && (
+                <p className="text-muted-foreground text-[1.05rem] text-balance sm:text-base">
+                  {doc.description}
+                </p>
+              )}
+            </div>
+            {links ? (
+              <div className="flex items-center space-x-2 pt-4">
+                {links?.doc && (
+                  <Badge asChild variant="secondary">
+                    <Link href={links.doc} target="_blank" rel="noreferrer">
+                      Docs <IconArrowUpRight />
+                    </Link>
+                  </Badge>
+                )}
+                {links?.api && (
+                  <Badge asChild variant="secondary">
+                    <Link href={links.api} target="_blank" rel="noreferrer">
+                      API Reference <IconArrowUpRight />
+                    </Link>
+                  </Badge>
+                )}
+              </div>
+            ) : null}
+          </div>
+          <div className="w-full flex-1 *:data-[slot=alert]:first:mt-0">
+            <MDX components={mdxComponents} />
+          </div>
+        </div>
+        <div className="mx-auto hidden h-16 w-full max-w-2xl items-center gap-2 px-4 sm:flex md:px-0">
+          {neighbours.previous && (
+            <Button
+              variant="secondary"
+              size="sm"
+              asChild
+              className="shadow-none"
+            >
+              <Link href={neighbours.previous.url}>
+                <IconArrowLeft /> {neighbours.previous.name}
+              </Link>
+            </Button>
+          )}
+          {neighbours.next && (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="ml-auto shadow-none"
+              asChild
+            >
+              <Link href={neighbours.next.url}>
+                {neighbours.next.name} <IconArrowRight />
+              </Link>
+            </Button>
+          )}
+        </div>
+      </div>
+      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[calc(100svh-var(--footer-height)+2rem)] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex">
+        <div className="h-(--top-spacing) shrink-0" />
+        {doc.toc?.length ? (
+          <div className="no-scrollbar overflow-y-auto px-8">
+            <DocsTableOfContents toc={doc.toc} />
+            <div className="h-12" />
+          </div>
+        ) : null}
+        <div className="flex flex-1 flex-col gap-12 px-6">
+          <OpenInV0Cta />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/docs/layout.tsx b/apps/v4/app/(app)/docs/layout.tsx
new file mode 100644
index 00000000000..65e202a9879
--- /dev/null
+++ b/apps/v4/app/(app)/docs/layout.tsx
@@ -0,0 +1,18 @@
+import { source } from "@/lib/source"
+import { DocsSidebar } from "@/components/docs-sidebar"
+import { SidebarProvider } from "@/registry/new-york-v4/ui/sidebar"
+
+export default function DocsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="container-wrapper flex flex-1 flex-col px-2">
+      <SidebarProvider className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--sidebar-width:220px] [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--sidebar-width:240px] lg:[--top-spacing:calc(var(--spacing)*4)]">
+        <DocsSidebar tree={source.pageTree} />
+        <div className="h-full w-full">{children}</div>
+      </SidebarProvider>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx b/apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx
new file mode 100644
index 00000000000..e1f9fed6f14
--- /dev/null
+++ b/apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx
@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export function UserAuthForm({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const [isLoading, setIsLoading] = React.useState<boolean>(false)
+
+  async function onSubmit(event: React.SyntheticEvent) {
+    event.preventDefault()
+    setIsLoading(true)
+
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 3000)
+  }
+
+  return (
+    <div className={cn("grid gap-6", className)} {...props}>
+      <form onSubmit={onSubmit}>
+        <div className="grid gap-2">
+          <div className="grid gap-1">
+            <Label className="sr-only" htmlFor="email">
+              Email
+            </Label>
+            <Input
+              id="email"
+              placeholder="name@example.com"
+              type="email"
+              autoCapitalize="none"
+              autoComplete="email"
+              autoCorrect="off"
+              disabled={isLoading}
+            />
+          </div>
+          <Button disabled={isLoading}>
+            {isLoading && (
+              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Sign In with Email
+          </Button>
+        </div>
+      </form>
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-background text-muted-foreground px-2">
+            Or continue with
+          </span>
+        </div>
+      </div>
+      <Button variant="outline" type="button" disabled={isLoading}>
+        {isLoading ? (
+          <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+        ) : (
+          <Icons.gitHub className="mr-2 h-4 w-4" />
+        )}{" "}
+        GitHub
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/authentication/page.tsx b/apps/v4/app/(app)/examples/authentication/page.tsx
new file mode 100644
index 00000000000..636faa6b538
--- /dev/null
+++ b/apps/v4/app/(app)/examples/authentication/page.tsx
@@ -0,0 +1,103 @@
+import { Metadata } from "next"
+import Image from "next/image"
+import Link from "next/link"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/registry/new-york-v4/ui/button"
+import { UserAuthForm } from "@/app/(app)/examples/authentication/components/user-auth-form"
+
+export const metadata: Metadata = {
+  title: "Authentication",
+  description: "Authentication forms built using the components.",
+}
+
+export default function AuthenticationPage() {
+  return (
+    <>
+      <div className="md:hidden">
+        <Image
+          src="/examples/authentication-light.png"
+          width={1280}
+          height={843}
+          alt="Authentication"
+          className="block dark:hidden"
+          priority
+        />
+        <Image
+          src="/examples/authentication-dark.png"
+          width={1280}
+          height={843}
+          alt="Authentication"
+          className="hidden dark:block"
+          priority
+        />
+      </div>
+      <div className="relative container hidden flex-1 shrink-0 items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
+        <Link
+          href="/examples/authentication"
+          className={cn(
+            buttonVariants({ variant: "ghost" }),
+            "absolute top-4 right-4 md:top-8 md:right-8"
+          )}
+        >
+          Login
+        </Link>
+        <div className="text-primary relative hidden h-full flex-col p-10 lg:flex dark:border-r">
+          <div className="bg-primary/5 absolute inset-0" />
+          <div className="relative z-20 flex items-center text-lg font-medium">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mr-2 h-6 w-6"
+            >
+              <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+            </svg>
+            Acme Inc
+          </div>
+          <div className="relative z-20 mt-auto">
+            <blockquote className="leading-normal text-balance">
+              &ldquo;This library has saved me countless hours of work and
+              helped me deliver stunning designs to my clients faster than ever
+              before.&rdquo; - Sofia Davis
+            </blockquote>
+          </div>
+        </div>
+        <div className="flex items-center justify-center lg:h-[1000px] lg:p-8">
+          <div className="mx-auto flex w-full flex-col justify-center gap-6 sm:w-[350px]">
+            <div className="flex flex-col gap-2 text-center">
+              <h1 className="text-2xl font-semibold tracking-tight">
+                Create an account
+              </h1>
+              <p className="text-muted-foreground text-sm">
+                Enter your email below to create your account
+              </p>
+            </div>
+            <UserAuthForm />
+            <p className="text-muted-foreground px-8 text-center text-sm">
+              By clicking continue, you agree to our{" "}
+              <Link
+                href="/terms"
+                className="hover:text-primary underline underline-offset-4"
+              >
+                Terms of Service
+              </Link>{" "}
+              and{" "}
+              <Link
+                href="/privacy"
+                className="hover:text-primary underline underline-offset-4"
+              >
+                Privacy Policy
+              </Link>
+              .
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx b/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
new file mode 100644
index 00000000000..c4de9119275
--- /dev/null
+++ b/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
@@ -0,0 +1,182 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import {
+  IconCamera,
+  IconChartBar,
+  IconDashboard,
+  IconDatabase,
+  IconFileAi,
+  IconFileDescription,
+  IconFileWord,
+  IconFolder,
+  IconHelp,
+  IconInnerShadowTop,
+  IconListDetails,
+  IconReport,
+  IconSearch,
+  IconSettings,
+  IconUsers,
+} from "@tabler/icons-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+import { NavDocuments } from "@/app/(app)/examples/dashboard/components/nav-documents"
+import { NavMain } from "@/app/(app)/examples/dashboard/components/nav-main"
+import { NavSecondary } from "@/app/(app)/examples/dashboard/components/nav-secondary"
+import { NavUser } from "@/app/(app)/examples/dashboard/components/nav-user"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Dashboard",
+      url: "#",
+      icon: IconDashboard,
+    },
+    {
+      title: "Lifecycle",
+      url: "#",
+      icon: IconListDetails,
+    },
+    {
+      title: "Analytics",
+      url: "#",
+      icon: IconChartBar,
+    },
+    {
+      title: "Projects",
+      url: "#",
+      icon: IconFolder,
+    },
+    {
+      title: "Team",
+      url: "#",
+      icon: IconUsers,
+    },
+  ],
+  navClouds: [
+    {
+      title: "Capture",
+      icon: IconCamera,
+      isActive: true,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Proposal",
+      icon: IconFileDescription,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Prompts",
+      icon: IconFileAi,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Settings",
+      url: "#",
+      icon: IconSettings,
+    },
+    {
+      title: "Get Help",
+      url: "#",
+      icon: IconHelp,
+    },
+    {
+      title: "Search",
+      url: "#",
+      icon: IconSearch,
+    },
+  ],
+  documents: [
+    {
+      name: "Data Library",
+      url: "#",
+      icon: IconDatabase,
+    },
+    {
+      name: "Reports",
+      url: "#",
+      icon: IconReport,
+    },
+    {
+      name: "Word Assistant",
+      url: "#",
+      icon: IconFileWord,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="none" className="h-auto border-r" {...props}>
+      <SidebarHeader className="border-b">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              className="data-[slot=sidebar-menu-button]:!p-1.5"
+            >
+              <Link href="#">
+                <IconInnerShadowTop className="!size-5" />
+                <span className="text-base font-semibold">Acme Inc.</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavDocuments items={data.documents} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx b/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
new file mode 100644
index 00000000000..dab596a8139
--- /dev/null
+++ b/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
@@ -0,0 +1,292 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--primary)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaInteractive() {
+  const isMobile = useIsMobile()
+  const [timeRange, setTimeRange] = React.useState("90d")
+
+  React.useEffect(() => {
+    if (isMobile) {
+      setTimeRange("7d")
+    }
+  }, [isMobile])
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card className="@container/card">
+      <CardHeader>
+        <CardTitle>Total Visitors</CardTitle>
+        <CardDescription>
+          <span className="hidden @[540px]/card:block">
+            Total for the last 3 months
+          </span>
+          <span className="@[540px]/card:hidden">Last 3 months</span>
+        </CardDescription>
+        <CardAction>
+          <ToggleGroup
+            type="single"
+            value={timeRange}
+            onValueChange={setTimeRange}
+            variant="outline"
+            className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
+          >
+            <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
+            <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
+            <ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
+          </ToggleGroup>
+          <Select value={timeRange} onValueChange={setTimeRange}>
+            <SelectTrigger
+              className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
+              size="sm"
+              aria-label="Select a value"
+            >
+              <SelectValue placeholder="Last 3 months" />
+            </SelectTrigger>
+            <SelectContent className="rounded-xl">
+              <SelectItem value="90d" className="rounded-lg">
+                Last 3 months
+              </SelectItem>
+              <SelectItem value="30d" className="rounded-lg">
+                Last 30 days
+              </SelectItem>
+              <SelectItem value="7d" className="rounded-lg">
+                Last 7 days
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={1.0}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              defaultIndex={isMobile ? -1 : 10}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
new file mode 100644
index 00000000000..1a34e73067d
--- /dev/null
+++ b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
@@ -0,0 +1,807 @@
+"use client"
+
+import * as React from "react"
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type UniqueIdentifier,
+} from "@dnd-kit/core"
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import {
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight,
+  IconCircleCheckFilled,
+  IconDotsVertical,
+  IconGripVertical,
+  IconLayoutColumns,
+  IconLoader,
+  IconPlus,
+  IconTrendingUp,
+} from "@tabler/icons-react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  Row,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york-v4/ui/table"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+
+export const schema = z.object({
+  id: z.number(),
+  header: z.string(),
+  type: z.string(),
+  status: z.string(),
+  target: z.string(),
+  limit: z.string(),
+  reviewer: z.string(),
+})
+
+// Create a separate component for the drag handle
+function DragHandle({ id }: { id: number }) {
+  const { attributes, listeners } = useSortable({
+    id,
+  })
+
+  return (
+    <Button
+      {...attributes}
+      {...listeners}
+      variant="ghost"
+      size="icon"
+      className="text-muted-foreground size-7 hover:bg-transparent"
+    >
+      <IconGripVertical className="text-muted-foreground size-3" />
+      <span className="sr-only">Drag to reorder</span>
+    </Button>
+  )
+}
+
+const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "drag",
+    header: () => null,
+    cell: ({ row }) => <DragHandle id={row.original.id} />,
+  },
+  {
+    id: "select",
+    header: ({ table }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "header",
+    header: "Header",
+    cell: ({ row }) => {
+      return <TableCellViewer item={row.original} />
+    },
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: "Section Type",
+    cell: ({ row }) => (
+      <div className="w-32">
+        <Badge variant="outline" className="text-muted-foreground px-1.5">
+          {row.original.type}
+        </Badge>
+      </div>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <Badge variant="outline" className="text-muted-foreground px-1.5">
+        {row.original.status === "Done" ? (
+          <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
+        ) : (
+          <IconLoader />
+        )}
+        {row.original.status}
+      </Badge>
+    ),
+  },
+  {
+    accessorKey: "target",
+    header: () => <div className="w-full text-right">Target</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: "Done",
+            error: "Error",
+          })
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-target`} className="sr-only">
+          Target
+        </Label>
+        <Input
+          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          defaultValue={row.original.target}
+          id={`${row.original.id}-target`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: "limit",
+    header: () => <div className="w-full text-right">Limit</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: "Done",
+            error: "Error",
+          })
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-limit`} className="sr-only">
+          Limit
+        </Label>
+        <Input
+          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          defaultValue={row.original.limit}
+          id={`${row.original.id}-limit`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: "reviewer",
+    header: "Reviewer",
+    cell: ({ row }) => {
+      const isAssigned = row.original.reviewer !== "Assign reviewer"
+
+      if (isAssigned) {
+        return row.original.reviewer
+      }
+
+      return (
+        <>
+          <Label htmlFor={`${row.original.id}-reviewer`} className="sr-only">
+            Reviewer
+          </Label>
+          <Select>
+            <SelectTrigger
+              className="w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate"
+              size="sm"
+              id={`${row.original.id}-reviewer`}
+            >
+              <SelectValue placeholder="Assign reviewer" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+              <SelectItem value="Jamik Tashpulatov">
+                Jamik Tashpulatov
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </>
+      )
+    },
+  },
+  {
+    id: "actions",
+    cell: () => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
+            size="icon"
+          >
+            <IconDotsVertical />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-32">
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+          <DropdownMenuItem>Make a copy</DropdownMenuItem>
+          <DropdownMenuItem>Favorite</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+  },
+]
+
+function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id: row.original.id,
+  })
+
+  return (
+    <TableRow
+      data-state={row.getIsSelected() && "selected"}
+      data-dragging={isDragging}
+      ref={setNodeRef}
+      className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition: transition,
+      }}
+    >
+      {row.getVisibleCells().map((cell) => (
+        <TableCell key={cell.id}>
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}
+
+export function DataTable({
+  data: initialData,
+}: {
+  data: z.infer<typeof schema>[]
+}) {
+  const [data, setData] = React.useState(() => initialData)
+  const [rowSelection, setRowSelection] = React.useState({})
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+  const sortableId = React.useId()
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  const dataIds = React.useMemo<UniqueIdentifier[]>(
+    () => data?.map(({ id }) => id) || [],
+    [data]
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination,
+    },
+    getRowId: (row) => row.id.toString(),
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  })
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (active && over && active.id !== over.id) {
+      setData((data) => {
+        const oldIndex = dataIds.indexOf(active.id)
+        const newIndex = dataIds.indexOf(over.id)
+        return arrayMove(data, oldIndex, newIndex)
+      })
+    }
+  }
+
+  return (
+    <Tabs
+      defaultValue="outline"
+      className="w-full flex-col justify-start gap-6"
+    >
+      <div className="flex items-center justify-between px-4 lg:px-6">
+        <Label htmlFor="view-selector" className="sr-only">
+          View
+        </Label>
+        <Select defaultValue="outline">
+          <SelectTrigger
+            className="flex w-fit @4xl/main:hidden"
+            size="sm"
+            id="view-selector"
+          >
+            <SelectValue placeholder="Select a view" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="outline">Outline</SelectItem>
+            <SelectItem value="past-performance">Past Performance</SelectItem>
+            <SelectItem value="key-personnel">Key Personnel</SelectItem>
+            <SelectItem value="focus-documents">Focus Documents</SelectItem>
+          </SelectContent>
+        </Select>
+        <TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
+          <TabsTrigger value="outline">Outline</TabsTrigger>
+          <TabsTrigger value="past-performance">
+            Past Performance <Badge variant="secondary">3</Badge>
+          </TabsTrigger>
+          <TabsTrigger value="key-personnel">
+            Key Personnel <Badge variant="secondary">2</Badge>
+          </TabsTrigger>
+          <TabsTrigger value="focus-documents">Focus Documents</TabsTrigger>
+        </TabsList>
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm">
+                <IconLayoutColumns />
+                <span className="hidden lg:inline">Customize Columns</span>
+                <span className="lg:hidden">Columns</span>
+                <IconChevronDown />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              {table
+                .getAllColumns()
+                .filter(
+                  (column) =>
+                    typeof column.accessorFn !== "undefined" &&
+                    column.getCanHide()
+                )
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) =>
+                        column.toggleVisibility(!!value)
+                      }
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Button variant="outline" size="sm">
+            <IconPlus />
+            <span className="hidden lg:inline">Add Section</span>
+          </Button>
+        </div>
+      </div>
+      <TabsContent
+        value="outline"
+        className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
+      >
+        <div className="overflow-hidden rounded-lg border">
+          <DndContext
+            collisionDetection={closestCenter}
+            modifiers={[restrictToVerticalAxis]}
+            onDragEnd={handleDragEnd}
+            sensors={sensors}
+            id={sortableId}
+          >
+            <Table>
+              <TableHeader className="bg-muted sticky top-0 z-10">
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} colSpan={header.colSpan}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      )
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody className="**:data-[slot=table-cell]:first:w-8">
+                {table.getRowModel().rows?.length ? (
+                  <SortableContext
+                    items={dataIds}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {table.getRowModel().rows.map((row) => (
+                      <DraggableRow key={row.id} row={row} />
+                    ))}
+                  </SortableContext>
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      No results.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </DndContext>
+        </div>
+        <div className="flex items-center justify-between px-4">
+          <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+          <div className="flex w-full items-center gap-8 lg:w-fit">
+            <div className="hidden items-center gap-2 lg:flex">
+              <Label htmlFor="rows-per-page" className="text-sm font-medium">
+                Rows per page
+              </Label>
+              <Select
+                value={`${table.getState().pagination.pageSize}`}
+                onValueChange={(value) => {
+                  table.setPageSize(Number(value))
+                }}
+              >
+                <SelectTrigger size="sm" className="w-20" id="rows-per-page">
+                  <SelectValue
+                    placeholder={table.getState().pagination.pageSize}
+                  />
+                </SelectTrigger>
+                <SelectContent side="top">
+                  {[10, 20, 30, 40, 50].map((pageSize) => (
+                    <SelectItem key={pageSize} value={`${pageSize}`}>
+                      {pageSize}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex w-fit items-center justify-center text-sm font-medium">
+              Page {table.getState().pagination.pageIndex + 1} of{" "}
+              {table.getPageCount()}
+            </div>
+            <div className="ml-auto flex items-center gap-2 lg:ml-0">
+              <Button
+                variant="outline"
+                className="hidden h-8 w-8 p-0 lg:flex"
+                onClick={() => table.setPageIndex(0)}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to first page</span>
+                <IconChevronsLeft />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8"
+                size="icon"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to previous page</span>
+                <IconChevronLeft />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8"
+                size="icon"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to next page</span>
+                <IconChevronRight />
+              </Button>
+              <Button
+                variant="outline"
+                className="hidden size-8 lg:flex"
+                size="icon"
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to last page</span>
+                <IconChevronsRight />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </TabsContent>
+      <TabsContent
+        value="past-performance"
+        className="flex flex-col px-4 lg:px-6"
+      >
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+      <TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+      <TabsContent
+        value="focus-documents"
+        className="flex flex-col px-4 lg:px-6"
+      >
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+    </Tabs>
+  )
+}
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--primary)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
+  const isMobile = useIsMobile()
+
+  return (
+    <Drawer direction={isMobile ? "bottom" : "right"}>
+      <DrawerTrigger asChild>
+        <Button variant="link" className="text-foreground w-fit px-0 text-left">
+          {item.header}
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="gap-1">
+          <DrawerTitle>{item.header}</DrawerTitle>
+          <DrawerDescription>
+            Showing total visitors for the last 6 months
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
+          {!isMobile && (
+            <>
+              <ChartContainer config={chartConfig}>
+                <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                    left: 0,
+                    right: 10,
+                  }}
+                >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                    dataKey="month"
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                    tickFormatter={(value) => value.slice(0, 3)}
+                    hide
+                  />
+                  <ChartTooltip
+                    cursor={false}
+                    content={<ChartTooltipContent indicator="dot" />}
+                  />
+                  <Area
+                    dataKey="mobile"
+                    type="natural"
+                    fill="var(--color-mobile)"
+                    fillOpacity={0.6}
+                    stroke="var(--color-mobile)"
+                    stackId="a"
+                  />
+                  <Area
+                    dataKey="desktop"
+                    type="natural"
+                    fill="var(--color-desktop)"
+                    fillOpacity={0.4}
+                    stroke="var(--color-desktop)"
+                    stackId="a"
+                  />
+                </AreaChart>
+              </ChartContainer>
+              <Separator />
+              <div className="grid gap-2">
+                <div className="flex gap-2 leading-none font-medium">
+                  Trending up by 5.2% this month{" "}
+                  <IconTrendingUp className="size-4" />
+                </div>
+                <div className="text-muted-foreground">
+                  Showing total visitors for the last 6 months. This is just
+                  some random text to test the layout. It spans multiple lines
+                  and should wrap around.
+                </div>
+              </div>
+              <Separator />
+            </>
+          )}
+          <form className="flex flex-col gap-4">
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="header">Header</Label>
+              <Input id="header" defaultValue={item.header} />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="type">Type</Label>
+                <Select defaultValue={item.type}>
+                  <SelectTrigger id="type" className="w-full">
+                    <SelectValue placeholder="Select a type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Table of Contents">
+                      Table of Contents
+                    </SelectItem>
+                    <SelectItem value="Executive Summary">
+                      Executive Summary
+                    </SelectItem>
+                    <SelectItem value="Technical Approach">
+                      Technical Approach
+                    </SelectItem>
+                    <SelectItem value="Design">Design</SelectItem>
+                    <SelectItem value="Capabilities">Capabilities</SelectItem>
+                    <SelectItem value="Focus Documents">
+                      Focus Documents
+                    </SelectItem>
+                    <SelectItem value="Narrative">Narrative</SelectItem>
+                    <SelectItem value="Cover Page">Cover Page</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="status">Status</Label>
+                <Select defaultValue={item.status}>
+                  <SelectTrigger id="status" className="w-full">
+                    <SelectValue placeholder="Select a status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Done">Done</SelectItem>
+                    <SelectItem value="In Progress">In Progress</SelectItem>
+                    <SelectItem value="Not Started">Not Started</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="target">Target</Label>
+                <Input id="target" defaultValue={item.target} />
+              </div>
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="limit">Limit</Label>
+                <Input id="limit" defaultValue={item.limit} />
+              </div>
+            </div>
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="reviewer">Reviewer</Label>
+              <Select defaultValue={item.reviewer}>
+                <SelectTrigger id="reviewer" className="w-full">
+                  <SelectValue placeholder="Select a reviewer" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+                  <SelectItem value="Jamik Tashpulatov">
+                    Jamik Tashpulatov
+                  </SelectItem>
+                  <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </form>
+        </div>
+        <DrawerFooter>
+          <Button>Submit</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Done</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx b/apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
new file mode 100644
index 00000000000..503c59938a7
--- /dev/null
+++ b/apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import {
+  IconDots,
+  IconFolder,
+  IconShare3,
+  IconTrash,
+  type Icon,
+} from "@tabler/icons-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavDocuments({
+  items,
+}: {
+  items: {
+    name: string
+    url: string
+    icon: Icon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Documents</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction
+                  showOnHover
+                  className="data-[state=open]:bg-accent rounded-sm"
+                >
+                  <IconDots />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-24 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <IconFolder />
+                  <span>Open</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <IconShare3 />
+                  <span>Share</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">
+                  <IconTrash />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <IconDots className="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/dashboard/components/nav-main.tsx b/apps/v4/app/(app)/examples/dashboard/components/nav-main.tsx
new file mode 100644
index 00000000000..fd044401f74
--- /dev/null
+++ b/apps/v4/app/(app)/examples/dashboard/components/nav-main.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import { type Icon } from "@tabler/icons-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: Icon
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupContent>
+        <SidebarGroupLabel>Home</SidebarGroupLabel>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton tooltip={item.title}>
+                {item.icon && <item.icon />}
+                <span>{item.title}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/dashboard/components/nav-secondary.tsx b/apps/v4/app/(app)/examples/dashboard/components/nav-secondary.tsx
new file mode 100644
index 00000000000..c4f2ea77e63
--- /dev/null
+++ b/apps/v4/app/(app)/examples/dashboard/components/nav-secondary.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { type Icon } from "@tabler/icons-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: Icon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx b/apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
new file mode 100644
index 00000000000..4d63e06cf80
--- /dev/null
+++ b/apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import {
+  IconCreditCard,
+  IconDotsVertical,
+  IconLogout,
+  IconNotification,
+  IconUserCircle,
+} from "@tabler/icons-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg grayscale">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="text-muted-foreground truncate text-xs">
+                  {user.email}
+                </span>
+              </div>
+              <IconDotsVertical className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="text-muted-foreground truncate text-xs">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <IconUserCircle />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <IconCreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <IconNotification />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <IconLogout />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/dashboard/components/section-cards.tsx b/apps/v4/app/(app)/examples/dashboard/components/section-cards.tsx
new file mode 100644
index 00000000000..39cf6ecafb5
--- /dev/null
+++ b/apps/v4/app/(app)/examples/dashboard/components/section-cards.tsx
@@ -0,0 +1,102 @@
+import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react"
+
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+
+export function SectionCards() {
+  return (
+    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>Total Revenue</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            $1,250.00
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingUp />
+              +12.5%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Trending up this month <IconTrendingUp className="size-4" />
+          </div>
+          <div className="text-muted-foreground">
+            Visitors for the last 6 months
+          </div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>New Customers</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            1,234
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingDown />
+              -20%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Down 20% this period <IconTrendingDown className="size-4" />
+          </div>
+          <div className="text-muted-foreground">
+            Acquisition needs attention
+          </div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>Active Accounts</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            45,678
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingUp />
+              +12.5%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Strong user retention <IconTrendingUp className="size-4" />
+          </div>
+          <div className="text-muted-foreground">Engagement exceed targets</div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>Growth Rate</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            4.5%
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingUp />
+              +4.5%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Steady performance increase <IconTrendingUp className="size-4" />
+          </div>
+          <div className="text-muted-foreground">Meets growth projections</div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/dashboard/components/site-header.tsx b/apps/v4/app/(app)/examples/dashboard/components/site-header.tsx
new file mode 100644
index 00000000000..f0d1612215d
--- /dev/null
+++ b/apps/v4/app/(app)/examples/dashboard/components/site-header.tsx
@@ -0,0 +1,19 @@
+import { IconCirclePlusFilled } from "@tabler/icons-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export function SiteHeader() {
+  return (
+    <header className="bg-background/90 sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <h1 className="text-base font-medium">Documents</h1>
+        <div className="ml-auto flex items-center gap-2">
+          <Button size="sm" className="hidden h-7 sm:flex">
+            <IconCirclePlusFilled />
+            <span>Quick Create</span>
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/dashboard/data.json b/apps/v4/app/(app)/examples/dashboard/data.json
new file mode 100644
index 00000000000..ec0873641b7
--- /dev/null
+++ b/apps/v4/app/(app)/examples/dashboard/data.json
@@ -0,0 +1,614 @@
+[
+  {
+    "id": 1,
+    "header": "Cover page",
+    "type": "Cover page",
+    "status": "In Process",
+    "target": "18",
+    "limit": "5",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 2,
+    "header": "Table of contents",
+    "type": "Table of contents",
+    "status": "Done",
+    "target": "29",
+    "limit": "24",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 3,
+    "header": "Executive summary",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "10",
+    "limit": "13",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 4,
+    "header": "Technical approach",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "27",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 5,
+    "header": "Design",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "2",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 6,
+    "header": "Capabilities",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "20",
+    "limit": "8",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 7,
+    "header": "Integration with existing systems",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "19",
+    "limit": "21",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 8,
+    "header": "Innovation and Advantages",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "25",
+    "limit": "26",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 9,
+    "header": "Overview of EMR's Innovative Solutions",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "7",
+    "limit": "23",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 10,
+    "header": "Advanced Algorithms and Machine Learning",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "30",
+    "limit": "28",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 11,
+    "header": "Adaptive Communication Protocols",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "9",
+    "limit": "31",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 12,
+    "header": "Advantages Over Current Technologies",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "12",
+    "limit": "0",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 13,
+    "header": "Past Performance",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "33",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 14,
+    "header": "Customer Feedback and Satisfaction Levels",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "34",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 15,
+    "header": "Implementation Challenges and Solutions",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "3",
+    "limit": "35",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 16,
+    "header": "Security Measures and Data Protection Policies",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "6",
+    "limit": "36",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 17,
+    "header": "Scalability and Future Proofing",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "4",
+    "limit": "37",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 18,
+    "header": "Cost-Benefit Analysis",
+    "type": "Plain language",
+    "status": "Done",
+    "target": "14",
+    "limit": "38",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 19,
+    "header": "User Training and Onboarding Experience",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "17",
+    "limit": "39",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 20,
+    "header": "Future Development Roadmap",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "11",
+    "limit": "40",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 21,
+    "header": "System Architecture Overview",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "24",
+    "limit": "18",
+    "reviewer": "Maya Johnson"
+  },
+  {
+    "id": 22,
+    "header": "Risk Management Plan",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "22",
+    "reviewer": "Carlos Rodriguez"
+  },
+  {
+    "id": 23,
+    "header": "Compliance Documentation",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "31",
+    "limit": "27",
+    "reviewer": "Sarah Chen"
+  },
+  {
+    "id": 24,
+    "header": "API Documentation",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "8",
+    "limit": "12",
+    "reviewer": "Raj Patel"
+  },
+  {
+    "id": 25,
+    "header": "User Interface Mockups",
+    "type": "Visual",
+    "status": "In Process",
+    "target": "19",
+    "limit": "25",
+    "reviewer": "Leila Ahmadi"
+  },
+  {
+    "id": 26,
+    "header": "Database Schema",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "22",
+    "limit": "20",
+    "reviewer": "Thomas Wilson"
+  },
+  {
+    "id": 27,
+    "header": "Testing Methodology",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "17",
+    "limit": "14",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 28,
+    "header": "Deployment Strategy",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "26",
+    "limit": "30",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 29,
+    "header": "Budget Breakdown",
+    "type": "Financial",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 30,
+    "header": "Market Analysis",
+    "type": "Research",
+    "status": "Done",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Sophia Martinez"
+  },
+  {
+    "id": 31,
+    "header": "Competitor Comparison",
+    "type": "Research",
+    "status": "In Process",
+    "target": "21",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 32,
+    "header": "Maintenance Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "23",
+    "reviewer": "Alex Thompson"
+  },
+  {
+    "id": 33,
+    "header": "User Personas",
+    "type": "Research",
+    "status": "In Process",
+    "target": "27",
+    "limit": "24",
+    "reviewer": "Nina Patel"
+  },
+  {
+    "id": 34,
+    "header": "Accessibility Compliance",
+    "type": "Legal",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 35,
+    "header": "Performance Metrics",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "David Kim"
+  },
+  {
+    "id": 36,
+    "header": "Disaster Recovery Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 37,
+    "header": "Third-party Integrations",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 38,
+    "header": "User Feedback Summary",
+    "type": "Research",
+    "status": "Done",
+    "target": "20",
+    "limit": "15",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 39,
+    "header": "Localization Strategy",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "12",
+    "limit": "19",
+    "reviewer": "Maria Garcia"
+  },
+  {
+    "id": 40,
+    "header": "Mobile Compatibility",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "James Wilson"
+  },
+  {
+    "id": 41,
+    "header": "Data Migration Plan",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 42,
+    "header": "Quality Assurance Protocols",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Priya Singh"
+  },
+  {
+    "id": 43,
+    "header": "Stakeholder Analysis",
+    "type": "Research",
+    "status": "In Process",
+    "target": "11",
+    "limit": "14",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 44,
+    "header": "Environmental Impact Assessment",
+    "type": "Research",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 45,
+    "header": "Intellectual Property Rights",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "17",
+    "limit": "20",
+    "reviewer": "Sarah Johnson"
+  },
+  {
+    "id": 46,
+    "header": "Customer Support Framework",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 47,
+    "header": "Version Control Strategy",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 48,
+    "header": "Continuous Integration Pipeline",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Michael Chen"
+  },
+  {
+    "id": 49,
+    "header": "Regulatory Compliance",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 50,
+    "header": "User Authentication System",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 51,
+    "header": "Data Analytics Framework",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 52,
+    "header": "Cloud Infrastructure",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 53,
+    "header": "Network Security Measures",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Lisa Wong"
+  },
+  {
+    "id": 54,
+    "header": "Project Timeline",
+    "type": "Planning",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 55,
+    "header": "Resource Allocation",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 56,
+    "header": "Team Structure and Roles",
+    "type": "Planning",
+    "status": "Done",
+    "target": "20",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 57,
+    "header": "Communication Protocols",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 58,
+    "header": "Success Metrics",
+    "type": "Planning",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 59,
+    "header": "Internationalization Support",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 60,
+    "header": "Backup and Recovery Procedures",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 61,
+    "header": "Monitoring and Alerting System",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Daniel Park"
+  },
+  {
+    "id": 62,
+    "header": "Code Review Guidelines",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "12",
+    "limit": "15",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 63,
+    "header": "Documentation Standards",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 64,
+    "header": "Release Management Process",
+    "type": "Planning",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 65,
+    "header": "Feature Prioritization Matrix",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Emma Davis"
+  },
+  {
+    "id": 66,
+    "header": "Technical Debt Assessment",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 67,
+    "header": "Capacity Planning",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 68,
+    "header": "Service Level Agreements",
+    "type": "Legal",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Assign reviewer"
+  }
+]
diff --git a/apps/v4/app/(app)/examples/dashboard/page.tsx b/apps/v4/app/(app)/examples/dashboard/page.tsx
new file mode 100644
index 00000000000..5e0ca2afb80
--- /dev/null
+++ b/apps/v4/app/(app)/examples/dashboard/page.tsx
@@ -0,0 +1,63 @@
+import Image from "next/image"
+
+import {
+  SidebarInset,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+import { AppSidebar } from "@/app/(app)/examples/dashboard/components/app-sidebar"
+import { ChartAreaInteractive } from "@/app/(app)/examples/dashboard/components/chart-area-interactive"
+import { DataTable } from "@/app/(app)/examples/dashboard/components/data-table"
+import { SectionCards } from "@/app/(app)/examples/dashboard/components/section-cards"
+import { SiteHeader } from "@/app/(app)/examples/dashboard/components/site-header"
+
+import data from "./data.json"
+
+export default function Page() {
+  return (
+    <>
+      <div className="md:hidden">
+        <Image
+          src="/examples/dashboard-light.png"
+          width={1280}
+          height={843}
+          alt="Authentication"
+          className="block dark:hidden"
+          priority
+        />
+        <Image
+          src="/examples/dashboard-dark.png"
+          width={1280}
+          height={843}
+          alt="Authentication"
+          className="hidden dark:block"
+          priority
+        />
+      </div>
+      <SidebarProvider
+        className="hidden md:flex"
+        style={
+          {
+            "--sidebar-width": "calc(var(--spacing) * 64)",
+            "--header-height": "calc(var(--spacing) * 12 + 1px)",
+          } as React.CSSProperties
+        }
+      >
+        <AppSidebar variant="sidebar" />
+        <SidebarInset>
+          <SiteHeader />
+          <div className="flex flex-1 flex-col">
+            <div className="@container/main flex flex-1 flex-col gap-2">
+              <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+                <SectionCards />
+                <div className="px-4 lg:px-6">
+                  <ChartAreaInteractive />
+                </div>
+                <DataTable data={data} />
+              </div>
+            </div>
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/layout.tsx b/apps/v4/app/(app)/examples/layout.tsx
new file mode 100644
index 00000000000..4798a95390d
--- /dev/null
+++ b/apps/v4/app/(app)/examples/layout.tsx
@@ -0,0 +1,83 @@
+import { Metadata } from "next"
+import Link from "next/link"
+
+import { Announcement } from "@/components/announcement"
+import { ExamplesNav } from "@/components/examples-nav"
+import {
+  PageActions,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+import { PageNav } from "@/components/page-nav"
+import { ThemeSelector } from "@/components/theme-selector"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export const dynamic = "force-static"
+export const revalidate = false
+
+const title = "Examples"
+const description = "Check out some examples app built using the components."
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+}
+
+export default function ExamplesLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading>Build your Component Library</PageHeaderHeading>
+        <PageHeaderDescription>
+          A set of beautifully-designed, accessible components and a code
+          distribution platform. Works with your favorite frameworks. Open
+          Source. Open Code.
+        </PageHeaderDescription>
+        <PageActions>
+          <Button asChild size="sm">
+            <Link href="/docs">Get Started</Link>
+          </Button>
+          <Button asChild size="sm" variant="ghost">
+            <Link href="/blocks">Browse Blocks</Link>
+          </Button>
+        </PageActions>
+      </PageHeader>
+      <PageNav id="examples">
+        <ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
+        <ThemeSelector className="mr-4 hidden md:block" />
+      </PageNav>
+      <div className="container-wrapper section-soft flex flex-1 flex-col pb-6">
+        <div className="theme-container container flex flex-1 scroll-mt-20 flex-col">
+          <div className="bg-background flex flex-col overflow-hidden rounded-lg border bg-clip-padding md:flex-1 xl:rounded-xl">
+            {children}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/playground/components/code-viewer.tsx b/apps/v4/app/(app)/examples/playground/components/code-viewer.tsx
new file mode 100644
index 00000000000..bc35a655441
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/components/code-viewer.tsx
@@ -0,0 +1,89 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york-v4/ui/dialog"
+
+export function CodeViewer() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="secondary">View code</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>View code</DialogTitle>
+          <DialogDescription>
+            You can use the following code to start integrating your current
+            prompt and settings into your application.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4">
+          <div className="rounded-md bg-black p-6">
+            <pre>
+              <code className="grid gap-1 text-sm text-white [&_span]:h-4">
+                <span>
+                  <span className="text-sky-300">import</span> os
+                </span>
+                <span>
+                  <span className="text-sky-300">import</span> openai
+                </span>
+                <span />
+                <span>
+                  openai.api_key = os.getenv(
+                  <span className="text-green-300">
+                    &quot;OPENAI_API_KEY&quot;
+                  </span>
+                  )
+                </span>
+                <span />
+                <span>response = openai.Completion.create(</span>
+                <span>
+                  {" "}
+                  model=
+                  <span className="text-green-300">&quot;davinci&quot;</span>,
+                </span>
+                <span>
+                  {" "}
+                  prompt=<span className="text-amber-300">&quot;&quot;</span>,
+                </span>
+                <span>
+                  {" "}
+                  temperature=<span className="text-amber-300">0.9</span>,
+                </span>
+                <span>
+                  {" "}
+                  max_tokens=<span className="text-amber-300">5</span>,
+                </span>
+                <span>
+                  {" "}
+                  top_p=<span className="text-amber-300">1</span>,
+                </span>
+                <span>
+                  {" "}
+                  frequency_penalty=<span className="text-amber-300">0</span>,
+                </span>
+                <span>
+                  {" "}
+                  presence_penalty=<span className="text-green-300">0</span>,
+                </span>
+                <span>)</span>
+              </code>
+            </pre>
+          </div>
+          <div>
+            <p className="text-muted-foreground text-sm">
+              Your API Key can be found here. You should use environment
+              variables or a secret management tool to expose your key to your
+              applications.
+            </p>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx b/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
new file mode 100644
index 00000000000..c2b0a277ddf
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { SliderProps } from "@radix-ui/react-slider"
+
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york-v4/ui/hover-card"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Slider } from "@/registry/new-york-v4/ui/slider"
+
+interface MaxLengthSelectorProps {
+  defaultValue: SliderProps["defaultValue"]
+}
+
+export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
+  const [value, setValue] = React.useState(defaultValue)
+
+  return (
+    <div className="grid gap-2 pt-2">
+      <HoverCard openDelay={200}>
+        <HoverCardTrigger asChild>
+          <div className="grid gap-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="maxlength">Maximum Length</Label>
+              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                {value}
+              </span>
+            </div>
+            <Slider
+              id="maxlength"
+              max={4000}
+              defaultValue={value}
+              step={10}
+              onValueChange={setValue}
+              aria-label="Maximum Length"
+            />
+          </div>
+        </HoverCardTrigger>
+        <HoverCardContent
+          align="start"
+          className="w-[260px] text-sm"
+          side="left"
+        >
+          The maximum number of tokens to generate. Requests can use up to 2,048
+          or 4,000 tokens, shared between prompt and completion. The exact limit
+          varies by model.
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/playground/components/model-selector.tsx b/apps/v4/app/(app)/examples/playground/components/model-selector.tsx
new file mode 100644
index 00000000000..a9c3bd6dc61
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/components/model-selector.tsx
@@ -0,0 +1,162 @@
+"use client"
+
+import * as React from "react"
+import { PopoverProps } from "@radix-ui/react-popover"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { useMutationObserver } from "@/hooks/use-mutation-observer"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york-v4/ui/hover-card"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+import { Model, ModelType } from "../data/models"
+
+interface ModelSelectorProps extends PopoverProps {
+  types: readonly ModelType[]
+  models: Model[]
+}
+
+export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
+  const [open, setOpen] = React.useState(false)
+  const [selectedModel, setSelectedModel] = React.useState<Model>(models[0])
+  const [peekedModel, setPeekedModel] = React.useState<Model>(models[0])
+
+  return (
+    <div className="grid gap-3">
+      <HoverCard openDelay={200}>
+        <HoverCardTrigger asChild>
+          <Label htmlFor="model">Model</Label>
+        </HoverCardTrigger>
+        <HoverCardContent
+          align="start"
+          className="w-[260px] text-sm"
+          side="left"
+        >
+          The model which will generate the completion. Some models are suitable
+          for natural language tasks, others specialize in code. Learn more.
+        </HoverCardContent>
+      </HoverCard>
+      <Popover open={open} onOpenChange={setOpen} {...props}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            aria-label="Select a model"
+            className="w-full justify-between"
+          >
+            {selectedModel ? selectedModel.name : "Select a model..."}
+            <ChevronsUpDown className="text-muted-foreground" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="w-[250px] p-0">
+          <HoverCard>
+            <HoverCardContent
+              side="left"
+              align="start"
+              forceMount
+              className="min-h-[280px]"
+            >
+              <div className="grid gap-2">
+                <h4 className="leading-none font-medium">{peekedModel.name}</h4>
+                <div className="text-muted-foreground text-sm">
+                  {peekedModel.description}
+                </div>
+                {peekedModel.strengths ? (
+                  <div className="mt-4 grid gap-2">
+                    <h5 className="text-sm leading-none font-medium">
+                      Strengths
+                    </h5>
+                    <ul className="text-muted-foreground text-sm">
+                      {peekedModel.strengths}
+                    </ul>
+                  </div>
+                ) : null}
+              </div>
+            </HoverCardContent>
+            <Command loop>
+              <CommandList className="h-(--cmdk-list-height) max-h-[400px]">
+                <CommandInput placeholder="Search Models..." />
+                <CommandEmpty>No Models found.</CommandEmpty>
+                <HoverCardTrigger />
+                {types.map((type) => (
+                  <CommandGroup key={type} heading={type}>
+                    {models
+                      .filter((model) => model.type === type)
+                      .map((model) => (
+                        <ModelItem
+                          key={model.id}
+                          model={model}
+                          isSelected={selectedModel?.id === model.id}
+                          onPeek={(model) => setPeekedModel(model)}
+                          onSelect={() => {
+                            setSelectedModel(model)
+                            setOpen(false)
+                          }}
+                        />
+                      ))}
+                  </CommandGroup>
+                ))}
+              </CommandList>
+            </Command>
+          </HoverCard>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+interface ModelItemProps {
+  model: Model
+  isSelected: boolean
+  onSelect: () => void
+  onPeek: (model: Model) => void
+}
+
+function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  useMutationObserver(ref, (mutations) => {
+    mutations.forEach((mutation) => {
+      if (
+        mutation.type === "attributes" &&
+        mutation.attributeName === "aria-selected" &&
+        ref.current?.getAttribute("aria-selected") === "true"
+      ) {
+        onPeek(model)
+      }
+    })
+  })
+
+  return (
+    <CommandItem
+      key={model.id}
+      onSelect={onSelect}
+      ref={ref}
+      className="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
+    >
+      {model.name}
+      <Check
+        className={cn("ml-auto", isSelected ? "opacity-100" : "opacity-0")}
+      />
+    </CommandItem>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/playground/components/preset-actions.tsx b/apps/v4/app/(app)/examples/playground/components/preset-actions.tsx
new file mode 100644
index 00000000000..3f0e80fc28a
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/components/preset-actions.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import { Dialog } from "@radix-ui/react-dialog"
+import { MoreHorizontal } from "lucide-react"
+import { toast } from "sonner"
+
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/registry/new-york-v4/ui/alert-dialog"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/registry/new-york-v4/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
+
+export function PresetActions() {
+  const [open, setIsOpen] = React.useState(false)
+  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false)
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="secondary" size="icon">
+            <span className="sr-only">Actions</span>
+            <MoreHorizontal />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onSelect={() => setIsOpen(true)}>
+            Content filter preferences
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onSelect={() => setShowDeleteDialog(true)}
+            className="text-red-600"
+          >
+            Delete preset
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Dialog open={open} onOpenChange={setIsOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Content filter preferences</DialogTitle>
+            <DialogDescription>
+              The content filter flags text that may violate our content policy.
+              It&apos;s powered by our moderation endpoint which is free to use
+              to moderate your OpenAI API traffic. Learn more.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-6">
+            <h4 className="text-muted-foreground text-sm">
+              Playground Warnings
+            </h4>
+            <div className="flex items-start justify-between gap-4 pt-3">
+              <Switch name="show" id="show" defaultChecked={true} />
+              <Label className="grid gap-1 font-normal" htmlFor="show">
+                <span className="font-semibold">
+                  Show a warning when content is flagged
+                </span>
+                <span className="text-muted-foreground text-sm">
+                  A warning will be shown when sexual, hateful, violent or
+                  self-harm content is detected.
+                </span>
+              </Label>
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="secondary">Close</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This preset will no longer be
+              accessible by you or others you&apos;ve shared it with.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                setShowDeleteDialog(false)
+                toast.success("This preset has been deleted.")
+              }}
+            >
+              Delete
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/playground/components/preset-save.tsx b/apps/v4/app/(app)/examples/playground/components/preset-save.tsx
new file mode 100644
index 00000000000..ea0785e94ad
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/components/preset-save.tsx
@@ -0,0 +1,45 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york-v4/ui/dialog"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+export function PresetSave() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="secondary">Save</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Save preset</DialogTitle>
+          <DialogDescription>
+            This will save the current playground state as a preset which you
+            can access later or share with others.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-6 py-4">
+          <div className="grid gap-3">
+            <Label htmlFor="name">Name</Label>
+            <Input id="name" autoFocus />
+          </div>
+          <div className="grid gap-3">
+            <Label htmlFor="description">Description</Label>
+            <Textarea id="description" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/playground/components/preset-selector.tsx b/apps/v4/app/(app)/examples/playground/components/preset-selector.tsx
new file mode 100644
index 00000000000..cb2a64c2f40
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/components/preset-selector.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { PopoverProps } from "@radix-ui/react-popover"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+import { Preset } from "../data/presets"
+
+interface PresetSelectorProps extends PopoverProps {
+  presets: Preset[]
+}
+
+export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
+  const [open, setOpen] = React.useState(false)
+  const [selectedPreset, setSelectedPreset] = React.useState<Preset>()
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} {...props}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-label="Load a preset..."
+          aria-expanded={open}
+          className="flex-1 justify-between md:max-w-[200px] lg:max-w-[300px]"
+        >
+          {selectedPreset ? selectedPreset.name : "Load a preset..."}
+          <ChevronsUpDown className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0">
+        <Command>
+          <CommandInput placeholder="Search presets..." />
+          <CommandList>
+            <CommandEmpty>No presets found.</CommandEmpty>
+            <CommandGroup heading="Examples">
+              {presets.map((preset) => (
+                <CommandItem
+                  key={preset.id}
+                  onSelect={() => {
+                    setSelectedPreset(preset)
+                    setOpen(false)
+                  }}
+                >
+                  {preset.name}
+                  <Check
+                    className={cn(
+                      "ml-auto",
+                      selectedPreset?.id === preset.id
+                        ? "opacity-100"
+                        : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup>
+              <CommandItem>More examples</CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/playground/components/preset-share.tsx b/apps/v4/app/(app)/examples/playground/components/preset-share.tsx
new file mode 100644
index 00000000000..60ad0d2d385
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/components/preset-share.tsx
@@ -0,0 +1,49 @@
+import { Copy } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export function PresetShare() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="secondary">Share</Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="flex w-[520px] flex-col gap-4">
+        <div className="flex flex-col gap-1 text-center sm:text-left">
+          <h3 className="text-lg font-semibold">Share preset</h3>
+          <p className="text-muted-foreground text-sm">
+            Anyone who has this link and an OpenAI account will be able to view
+            this.
+          </p>
+        </div>
+        <div className="relative flex-1">
+          <Label htmlFor="link" className="sr-only">
+            Link
+          </Label>
+          <Input
+            id="link"
+            defaultValue="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003"
+            readOnly
+            className="h-9 pr-10"
+          />
+          <Button
+            type="submit"
+            size="icon"
+            variant="ghost"
+            className="absolute top-1 right-1 size-7"
+          >
+            <span className="sr-only">Copy</span>
+            <Copy className="size-3.5" />
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx b/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
new file mode 100644
index 00000000000..70160988ef7
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { SliderProps } from "@radix-ui/react-slider"
+
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york-v4/ui/hover-card"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Slider } from "@/registry/new-york-v4/ui/slider"
+
+interface TemperatureSelectorProps {
+  defaultValue: SliderProps["defaultValue"]
+}
+
+export function TemperatureSelector({
+  defaultValue,
+}: TemperatureSelectorProps) {
+  const [value, setValue] = React.useState(defaultValue)
+
+  return (
+    <div className="grid gap-2 pt-2">
+      <HoverCard openDelay={200}>
+        <HoverCardTrigger asChild>
+          <div className="grid gap-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="temperature">Temperature</Label>
+              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                {value}
+              </span>
+            </div>
+            <Slider
+              id="temperature"
+              max={1}
+              defaultValue={value}
+              step={0.1}
+              onValueChange={setValue}
+              aria-label="Temperature"
+            />
+          </div>
+        </HoverCardTrigger>
+        <HoverCardContent
+          align="start"
+          className="w-[260px] text-sm"
+          side="left"
+        >
+          Controls randomness: lowering results in less random completions. As
+          the temperature approaches zero, the model will become deterministic
+          and repetitive.
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx b/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
new file mode 100644
index 00000000000..e1c743d2604
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import { SliderProps } from "@radix-ui/react-slider"
+
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york-v4/ui/hover-card"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Slider } from "@/registry/new-york-v4/ui/slider"
+
+interface TopPSelectorProps {
+  defaultValue: SliderProps["defaultValue"]
+}
+
+export function TopPSelector({ defaultValue }: TopPSelectorProps) {
+  const [value, setValue] = React.useState(defaultValue)
+
+  return (
+    <div className="grid gap-2 pt-2">
+      <HoverCard openDelay={200}>
+        <HoverCardTrigger asChild>
+          <div className="grid gap-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="top-p">Top P</Label>
+              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                {value}
+              </span>
+            </div>
+            <Slider
+              id="top-p"
+              max={1}
+              defaultValue={value}
+              step={0.1}
+              onValueChange={setValue}
+              aria-label="Top P"
+            />
+          </div>
+        </HoverCardTrigger>
+        <HoverCardContent
+          align="start"
+          className="w-[260px] text-sm"
+          side="left"
+        >
+          Control diversity via nucleus sampling: 0.5 means half of all
+          likelihood-weighted options are considered.
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/playground/data/models.ts b/apps/v4/app/(app)/examples/playground/data/models.ts
new file mode 100644
index 00000000000..1f21d967a4c
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/data/models.ts
@@ -0,0 +1,62 @@
+export const types = ["GPT-3", "Codex"] as const
+
+export type ModelType = (typeof types)[number]
+
+export interface Model<Type = string> {
+  id: string
+  name: string
+  description: string
+  strengths?: string
+  type: Type
+}
+
+export const models: Model<ModelType>[] = [
+  {
+    id: "c305f976-8e38-42b1-9fb7-d21b2e34f0da",
+    name: "text-davinci-003",
+    description:
+      "Most capable GPT-3 model. Can do any task the other models can do, often with higher quality, longer output and better instruction-following. Also supports inserting completions within text.",
+    type: "GPT-3",
+    strengths:
+      "Complex intent, cause and effect, creative generation, search, summarization for audience",
+  },
+  {
+    id: "464a47c3-7ab5-44d7-b669-f9cb5a9e8465",
+    name: "text-curie-001",
+    description: "Very capable, but faster and lower cost than Davinci.",
+    type: "GPT-3",
+    strengths:
+      "Language translation, complex classification, sentiment, summarization",
+  },
+  {
+    id: "ac0797b0-7e31-43b6-a494-da7e2ab43445",
+    name: "text-babbage-001",
+    description: "Capable of straightforward tasks, very fast, and lower cost.",
+    type: "GPT-3",
+    strengths: "Moderate classification, semantic search",
+  },
+  {
+    id: "be638fb1-973b-4471-a49c-290325085802",
+    name: "text-ada-001",
+    description:
+      "Capable of very simple tasks, usually the fastest model in the GPT-3 series, and lowest cost.",
+    type: "GPT-3",
+    strengths:
+      "Parsing text, simple classification, address correction, keywords",
+  },
+  {
+    id: "b43c0ea9-5ad4-456a-ae29-26cd77b6d0fb",
+    name: "code-davinci-002",
+    description:
+      "Most capable Codex model. Particularly good at translating natural language to code. In addition to completing code, also supports inserting completions within code.",
+    type: "Codex",
+  },
+  {
+    id: "bbd57291-4622-4a21-9eed-dd6bd786fdd1",
+    name: "code-cushman-001",
+    description:
+      "Almost as capable as Davinci Codex, but slightly faster. This speed advantage may make it preferable for real-time applications.",
+    type: "Codex",
+    strengths: "Real-time application where low-latency is preferable",
+  },
+]
diff --git a/apps/v4/app/(app)/examples/playground/data/presets.ts b/apps/v4/app/(app)/examples/playground/data/presets.ts
new file mode 100644
index 00000000000..cf115208bfa
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/data/presets.ts
@@ -0,0 +1,47 @@
+export interface Preset {
+  id: string
+  name: string
+}
+
+export const presets: Preset[] = [
+  {
+    id: "9cb0e66a-9937-465d-a188-2c4c4ae2401f",
+    name: "Grammatical Standard English",
+  },
+  {
+    id: "61eb0e32-2391-4cd3-adc3-66efe09bc0b7",
+    name: "Summarize for a 2nd grader",
+  },
+  {
+    id: "a4e1fa51-f4ce-4e45-892c-224030a00bdd",
+    name: "Text to command",
+  },
+  {
+    id: "cc198b13-4933-43aa-977e-dcd95fa30770",
+    name: "Q&A",
+  },
+  {
+    id: "adfa95be-a575-45fd-a9ef-ea45386c64de",
+    name: "English to other languages",
+  },
+  {
+    id: "c569a06a-0bd6-43a7-adf9-bf68c09e7a79",
+    name: "Parse unstructured data",
+  },
+  {
+    id: "15ccc0d7-f37a-4f0a-8163-a37e162877dc",
+    name: "Classification",
+  },
+  {
+    id: "4641ef41-1c0f-421d-b4b2-70fe431081f3",
+    name: "Natural language to Python",
+  },
+  {
+    id: "48d34082-72f3-4a1b-a14d-f15aca4f57a0",
+    name: "Explain code",
+  },
+  {
+    id: "dfd42fd5-0394-4810-92c6-cc907d3bfd1a",
+    name: "Chat",
+  },
+]
diff --git a/apps/v4/app/(app)/examples/playground/page.tsx b/apps/v4/app/(app)/examples/playground/page.tsx
new file mode 100644
index 00000000000..01e6481031a
--- /dev/null
+++ b/apps/v4/app/(app)/examples/playground/page.tsx
@@ -0,0 +1,332 @@
+import { Metadata } from "next"
+import Image from "next/image"
+import { RotateCcw } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york-v4/ui/hover-card"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+import { CodeViewer } from "./components/code-viewer"
+import { MaxLengthSelector } from "./components/maxlength-selector"
+import { ModelSelector } from "./components/model-selector"
+import { PresetActions } from "./components/preset-actions"
+import { PresetSave } from "./components/preset-save"
+import { PresetSelector } from "./components/preset-selector"
+import { PresetShare } from "./components/preset-share"
+import { TemperatureSelector } from "./components/temperature-selector"
+import { TopPSelector } from "./components/top-p-selector"
+import { models, types } from "./data/models"
+import { presets } from "./data/presets"
+
+export const metadata: Metadata = {
+  title: "Playground",
+  description: "The OpenAI Playground built using the components.",
+}
+
+export default function PlaygroundPage() {
+  return (
+    <>
+      <div className="md:hidden">
+        <Image
+          src="/examples/playground-light.png"
+          width={1280}
+          height={916}
+          alt="Playground"
+          className="block dark:hidden"
+        />
+        <Image
+          src="/examples/playground-dark.png"
+          width={1280}
+          height={916}
+          alt="Playground"
+          className="hidden dark:block"
+        />
+      </div>
+      <div className="hidden flex-1 flex-col md:flex">
+        <div className="container flex flex-col items-start justify-between gap-2 py-4 sm:flex-row sm:items-center sm:gap-0 md:h-16">
+          <h2 className="pl-0.5 text-lg font-semibold">Playground</h2>
+          <div className="ml-auto flex w-full gap-2 sm:justify-end">
+            <PresetSelector presets={presets} />
+            <PresetSave />
+            <div className="hidden gap-2 md:flex">
+              <CodeViewer />
+              <PresetShare />
+            </div>
+            <PresetActions />
+          </div>
+        </div>
+        <Separator />
+        <Tabs defaultValue="complete" className="flex flex-1 flex-col">
+          <div className="container flex flex-1 flex-col py-6">
+            <div className="grid flex-1 items-stretch gap-6 md:grid-cols-[1fr_200px]">
+              <div className="hidden flex-col gap-6 sm:flex md:order-2">
+                <div className="grid gap-3">
+                  <HoverCard openDelay={200}>
+                    <HoverCardTrigger asChild>
+                      <span className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                        Mode
+                      </span>
+                    </HoverCardTrigger>
+                    <HoverCardContent className="w-[320px] text-sm" side="left">
+                      Choose the interface that best suits your task. You can
+                      provide: a simple prompt to complete, starting and ending
+                      text to insert a completion within, or some text with
+                      instructions to edit it.
+                    </HoverCardContent>
+                  </HoverCard>
+                  <TabsList className="grid w-full grid-cols-3">
+                    <TabsTrigger value="complete">
+                      <span className="sr-only">Complete</span>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <rect
+                          x="4"
+                          y="3"
+                          width="12"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="4"
+                          y="7"
+                          width="12"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="4"
+                          y="11"
+                          width="3"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="4"
+                          y="15"
+                          width="3"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="8.5"
+                          y="11"
+                          width="3"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="8.5"
+                          y="15"
+                          width="3"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="13"
+                          y="11"
+                          width="3"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                      </svg>
+                    </TabsTrigger>
+                    <TabsTrigger value="insert">
+                      <span className="sr-only">Insert</span>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                        className="h-5 w-5"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          clipRule="evenodd"
+                          d="M14.491 7.769a.888.888 0 0 1 .287.648.888.888 0 0 1-.287.648l-3.916 3.667a1.013 1.013 0 0 1-.692.268c-.26 0-.509-.097-.692-.268L5.275 9.065A.886.886 0 0 1 5 8.42a.889.889 0 0 1 .287-.64c.181-.17.427-.267.683-.269.257-.002.504.09.69.258L8.903 9.87V3.917c0-.243.103-.477.287-.649.183-.171.432-.268.692-.268.26 0 .509.097.692.268a.888.888 0 0 1 .287.649V9.87l2.245-2.102c.183-.172.432-.269.692-.269.26 0 .508.097.692.269Z"
+                          fill="currentColor"
+                        ></path>
+                        <rect
+                          x="4"
+                          y="15"
+                          width="3"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="8.5"
+                          y="15"
+                          width="3"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="13"
+                          y="15"
+                          width="3"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                      </svg>
+                    </TabsTrigger>
+                    <TabsTrigger value="edit">
+                      <span className="sr-only">Edit</span>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                        className="h-5 w-5"
+                      >
+                        <rect
+                          x="4"
+                          y="3"
+                          width="12"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="4"
+                          y="7"
+                          width="12"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="4"
+                          y="11"
+                          width="3"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="4"
+                          y="15"
+                          width="4"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <rect
+                          x="8.5"
+                          y="11"
+                          width="3"
+                          height="2"
+                          rx="1"
+                          fill="currentColor"
+                        ></rect>
+                        <path
+                          d="M17.154 11.346a1.182 1.182 0 0 0-1.671 0L11 15.829V17.5h1.671l4.483-4.483a1.182 1.182 0 0 0 0-1.671Z"
+                          fill="currentColor"
+                        ></path>
+                      </svg>
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+                <ModelSelector types={types} models={models} />
+                <TemperatureSelector defaultValue={[0.56]} />
+                <MaxLengthSelector defaultValue={[256]} />
+                <TopPSelector defaultValue={[0.9]} />
+              </div>
+              <div className="flex flex-1 flex-col *:data-[slot=tab-content]:flex-1 md:order-1">
+                <TabsContent value="complete" className="mt-0 border-0 p-0">
+                  <div className="flex h-full flex-col gap-4">
+                    <Textarea
+                      placeholder="Write a tagline for an ice cream shop"
+                      className="min-h-[400px] flex-1 p-4 md:min-h-[700px] lg:min-h-[700px]"
+                    />
+                    <div className="flex items-center gap-2">
+                      <Button>Submit</Button>
+                      <Button variant="secondary">
+                        <span className="sr-only">Show history</span>
+                        <RotateCcw />
+                      </Button>
+                    </div>
+                  </div>
+                </TabsContent>
+                <TabsContent
+                  value="insert"
+                  className="mt-0 flex flex-col gap-4 border-0 p-0"
+                >
+                  <div className="grid h-full grid-rows-2 gap-6 lg:grid-cols-2 lg:grid-rows-1">
+                    <Textarea
+                      placeholder="We're writing to [inset]. Congrats from OpenAI!"
+                      className="h-full min-h-[300px] p-4 lg:min-h-[700px] xl:min-h-[700px]"
+                    />
+                    <div className="bg-muted rounded-md border"></div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button>Submit</Button>
+                    <Button variant="secondary">
+                      <span className="sr-only">Show history</span>
+                      <RotateCcw />
+                    </Button>
+                  </div>
+                </TabsContent>
+                <TabsContent
+                  value="edit"
+                  className="mt-0 flex flex-col gap-4 border-0 p-0"
+                >
+                  <div className="grid h-full gap-6 lg:grid-cols-2">
+                    <div className="flex flex-col gap-4">
+                      <div className="flex flex-1 flex-col gap-2">
+                        <Label htmlFor="input" className="sr-only">
+                          Input
+                        </Label>
+                        <Textarea
+                          id="input"
+                          placeholder="We is going to the market."
+                          className="flex-1 p-4 lg:min-h-[580px]"
+                        />
+                      </div>
+                      <div className="flex flex-col gap-2">
+                        <Label htmlFor="instructions">Instructions</Label>
+                        <Textarea
+                          id="instructions"
+                          placeholder="Fix the grammar."
+                        />
+                      </div>
+                    </div>
+                    <div className="bg-muted min-h-[400px] rounded-md border lg:min-h-[700px]" />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button>Submit</Button>
+                    <Button variant="secondary">
+                      <span className="sr-only">Show history</span>
+                      <RotateCcw />
+                    </Button>
+                  </div>
+                </TabsContent>
+              </div>
+            </div>
+          </div>
+        </Tabs>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/tasks/components/columns.tsx b/apps/v4/app/(app)/examples/tasks/components/columns.tsx
new file mode 100644
index 00000000000..91c2a3f35e1
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/components/columns.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+
+import { labels, priorities, statuses } from "../data/data"
+import { Task } from "../data/schema"
+import { DataTableColumnHeader } from "./data-table-column-header"
+import { DataTableRowActions } from "./data-table-row-actions"
+
+export const columns: ColumnDef<Task>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "id",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Task" />
+    ),
+    cell: ({ row }) => <div className="w-[80px]">{row.getValue("id")}</div>,
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "title",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Title" />
+    ),
+    cell: ({ row }) => {
+      const label = labels.find((label) => label.value === row.original.label)
+
+      return (
+        <div className="flex gap-2">
+          {label && <Badge variant="outline">{label.label}</Badge>}
+          <span className="max-w-[500px] truncate font-medium">
+            {row.getValue("title")}
+          </span>
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Status" />
+    ),
+    cell: ({ row }) => {
+      const status = statuses.find(
+        (status) => status.value === row.getValue("status")
+      )
+
+      if (!status) {
+        return null
+      }
+
+      return (
+        <div className="flex w-[100px] items-center gap-2">
+          {status.icon && (
+            <status.icon className="text-muted-foreground size-4" />
+          )}
+          <span>{status.label}</span>
+        </div>
+      )
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id))
+    },
+  },
+  {
+    accessorKey: "priority",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Priority" />
+    ),
+    cell: ({ row }) => {
+      const priority = priorities.find(
+        (priority) => priority.value === row.getValue("priority")
+      )
+
+      if (!priority) {
+        return null
+      }
+
+      return (
+        <div className="flex items-center gap-2">
+          {priority.icon && (
+            <priority.icon className="text-muted-foreground size-4" />
+          )}
+          <span>{priority.label}</span>
+        </div>
+      )
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id))
+    },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => <DataTableRowActions row={row} />,
+  },
+]
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
new file mode 100644
index 00000000000..3738cc60481
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
@@ -0,0 +1,66 @@
+import { Column } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  title: string
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>
+  }
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="data-[state=open]:bg-accent -ml-3 h-8"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowDown />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowUp />
+            ) : (
+              <ChevronsUpDown />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
new file mode 100644
index 00000000000..c44ea4d7fec
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
@@ -0,0 +1,147 @@
+import * as React from "react"
+import { Column } from "@tanstack/react-table"
+import { Check, PlusCircle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+interface DataTableFacetedFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>
+  title?: string
+  options: {
+    label: string
+    value: string
+    icon?: React.ComponentType<{ className?: string }>
+  }[]
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues()
+  const selectedValues = new Set(column?.getFilterValue() as string[])
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <PlusCircle />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden gap-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value)
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value)
+                      } else {
+                        selectedValues.add(option.value)
+                      }
+                      const filterValues = Array.from(selectedValues)
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      )
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "flex size-4 items-center justify-center rounded-[4px] border",
+                        isSelected
+                          ? "bg-primary border-primary text-primary-foreground"
+                          : "border-input [&_svg]:invisible"
+                      )}
+                    >
+                      <Check className="text-primary-foreground size-3.5" />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="text-muted-foreground size-4" />
+                    )}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="text-muted-foreground ml-auto flex size-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center"
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
new file mode 100644
index 00000000000..005d2b28ad7
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
@@ -0,0 +1,101 @@
+import { Table } from "@tanstack/react-table"
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTablePagination<TData>({
+  table,
+}: DataTablePaginationProps<TData>) {
+  return (
+    <div className="flex items-center justify-between px-2">
+      <div className="text-muted-foreground flex-1 text-sm">
+        {table.getFilteredSelectedRowModel().rows.length} of{" "}
+        {table.getFilteredRowModel().rows.length} row(s) selected.
+      </div>
+      <div className="flex items-center space-x-6 lg:space-x-8">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value))
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 25, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Page {table.getState().pagination.pageIndex + 1} of{" "}
+          {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="hidden size-8 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="hidden size-8 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
new file mode 100644
index 00000000000..59edafe1b95
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
@@ -0,0 +1,70 @@
+"use client"
+
+import { Row } from "@tanstack/react-table"
+import { MoreHorizontal } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+import { labels } from "../data/data"
+import { taskSchema } from "../data/schema"
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>
+}
+
+export function DataTableRowActions<TData>({
+  row,
+}: DataTableRowActionsProps<TData>) {
+  const task = taskSchema.parse(row.original)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="data-[state=open]:bg-muted size-8"
+        >
+          <MoreHorizontal />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[160px]">
+        <DropdownMenuItem>Edit</DropdownMenuItem>
+        <DropdownMenuItem>Make a copy</DropdownMenuItem>
+        <DropdownMenuItem>Favorite</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuRadioGroup value={task.label}>
+              {labels.map((label) => (
+                <DropdownMenuRadioItem key={label.value} value={label.value}>
+                  {label.label}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive">
+          Delete
+          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table-toolbar.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table-toolbar.tsx
new file mode 100644
index 00000000000..c1c2ecd0655
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-toolbar.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import { Table } from "@tanstack/react-table"
+import { X } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { DataTableViewOptions } from "@/app/(app)/examples/tasks/components/data-table-view-options"
+
+import { priorities, statuses } from "../data/data"
+import { DataTableFacetedFilter } from "./data-table-faceted-filter"
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTableToolbar<TData>({
+  table,
+}: DataTableToolbarProps<TData>) {
+  const isFiltered = table.getState().columnFilters.length > 0
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex flex-1 items-center gap-2">
+        <Input
+          placeholder="Filter tasks..."
+          value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("title")?.setFilterValue(event.target.value)
+          }
+          className="h-8 w-[150px] lg:w-[250px]"
+        />
+        {table.getColumn("status") && (
+          <DataTableFacetedFilter
+            column={table.getColumn("status")}
+            title="Status"
+            options={statuses}
+          />
+        )}
+        {table.getColumn("priority") && (
+          <DataTableFacetedFilter
+            column={table.getColumn("priority")}
+            title="Priority"
+            options={priorities}
+          />
+        )}
+        {isFiltered && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => table.resetColumnFilters()}
+          >
+            Reset
+            <X />
+          </Button>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <DataTableViewOptions table={table} />
+        <Button size="sm">Add Task</Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table-view-options.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table-view-options.tsx
new file mode 100644
index 00000000000..ba9c250966a
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-view-options.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
+import { Table } from "@tanstack/react-table"
+import { Settings2 } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+export function DataTableViewOptions<TData>({
+  table,
+}: {
+  table: Table<TData>
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 lg:flex"
+        >
+          <Settings2 />
+          View
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== "undefined" && column.getCanHide()
+          )
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            )
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table.tsx
new file mode 100644
index 00000000000..5f3e4c12d2f
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table.tsx
@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table"
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york-v4/ui/table"
+
+import { DataTablePagination } from "./data-table-pagination"
+import { DataTableToolbar } from "./data-table-toolbar"
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = React.useState({})
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [sorting, setSorting] = React.useState<SortingState>([])
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+    },
+    initialState: {
+      pagination: {
+        pageSize: 25,
+      },
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  })
+
+  return (
+    <div className="flex flex-col gap-4">
+      <DataTableToolbar table={table} />
+      <div className="overflow-hidden rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id} colSpan={header.colSpan}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} />
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/tasks/components/user-nav.tsx b/apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
new file mode 100644
index 00000000000..8b54a943a69
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
@@ -0,0 +1,62 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+export function UserNav() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+          <Avatar className="h-9 w-9">
+            <AvatarImage src="/avatars/03.png" alt="@shadcn" />
+            <AvatarFallback>SC</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="end" forceMount>
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm leading-none font-medium">shadcn</p>
+            <p className="text-muted-foreground text-xs leading-none">
+              m@example.com
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Billing
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Settings
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>New Team</DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          Log out
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/app/(app)/examples/tasks/data/data.tsx b/apps/v4/app/(app)/examples/tasks/data/data.tsx
new file mode 100644
index 00000000000..c4792ba82c2
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/data/data.tsx
@@ -0,0 +1,71 @@
+import {
+  ArrowDown,
+  ArrowRight,
+  ArrowUp,
+  CheckCircle,
+  Circle,
+  CircleOff,
+  HelpCircle,
+  Timer,
+} from "lucide-react"
+
+export const labels = [
+  {
+    value: "bug",
+    label: "Bug",
+  },
+  {
+    value: "feature",
+    label: "Feature",
+  },
+  {
+    value: "documentation",
+    label: "Documentation",
+  },
+]
+
+export const statuses = [
+  {
+    value: "backlog",
+    label: "Backlog",
+    icon: HelpCircle,
+  },
+  {
+    value: "todo",
+    label: "Todo",
+    icon: Circle,
+  },
+  {
+    value: "in progress",
+    label: "In Progress",
+    icon: Timer,
+  },
+  {
+    value: "done",
+    label: "Done",
+    icon: CheckCircle,
+  },
+  {
+    value: "canceled",
+    label: "Canceled",
+    icon: CircleOff,
+  },
+]
+
+export const priorities = [
+  {
+    label: "Low",
+    value: "low",
+    icon: ArrowDown,
+  },
+  {
+    label: "Medium",
+    value: "medium",
+    icon: ArrowRight,
+  },
+  {
+    label: "High",
+    value: "high",
+    icon: ArrowUp,
+  },
+]
diff --git a/apps/v4/app/(app)/examples/tasks/data/schema.ts b/apps/v4/app/(app)/examples/tasks/data/schema.ts
new file mode 100644
index 00000000000..72000c0ec9a
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/data/schema.ts
@@ -0,0 +1,13 @@
+import { z } from "zod"
+
+// We're keeping a simple non-relational schema here.
+// IRL, you will have a schema for your data models.
+export const taskSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  status: z.string(),
+  label: z.string(),
+  priority: z.string(),
+})
+
+export type Task = z.infer<typeof taskSchema>
diff --git a/apps/v4/app/(app)/examples/tasks/data/seed.ts b/apps/v4/app/(app)/examples/tasks/data/seed.ts
new file mode 100755
index 00000000000..f77630856ed
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/data/seed.ts
@@ -0,0 +1,20 @@
+import fs from "fs"
+import path from "path"
+import { faker } from "@faker-js/faker"
+
+import { labels, priorities, statuses } from "./data"
+
+const tasks = Array.from({ length: 100 }, () => ({
+  id: `TASK-${faker.number.int({ min: 1000, max: 9999 })}`,
+  title: faker.hacker.phrase().replace(/^./, (letter) => letter.toUpperCase()),
+  status: faker.helpers.arrayElement(statuses).value,
+  label: faker.helpers.arrayElement(labels).value,
+  priority: faker.helpers.arrayElement(priorities).value,
+}))
+
+fs.writeFileSync(
+  path.join(__dirname, "tasks.json"),
+  JSON.stringify(tasks, null, 2)
+)
+
+console.log("✅ Tasks data generated.")
diff --git a/apps/v4/app/(app)/examples/tasks/data/tasks.json b/apps/v4/app/(app)/examples/tasks/data/tasks.json
new file mode 100644
index 00000000000..433e35373ee
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/data/tasks.json
@@ -0,0 +1,702 @@
+[
+  {
+    "id": "TASK-8782",
+    "title": "You can't compress the program without quantifying the open-source SSD pixel!",
+    "status": "in progress",
+    "label": "documentation",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-7878",
+    "title": "Try to calculate the EXE feed, maybe it will index the multi-byte pixel!",
+    "status": "backlog",
+    "label": "documentation",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-7839",
+    "title": "We need to bypass the neural TCP card!",
+    "status": "todo",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-5562",
+    "title": "The SAS interface is down, bypass the open-source pixel so we can back up the PNG bandwidth!",
+    "status": "backlog",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-8686",
+    "title": "I'll parse the wireless SSL protocol, that should driver the API panel!",
+    "status": "canceled",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-1280",
+    "title": "Use the digital TLS panel, then you can transmit the haptic system!",
+    "status": "done",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-7262",
+    "title": "The UTF8 application is down, parse the neural bandwidth so we can back up the PNG firewall!",
+    "status": "done",
+    "label": "feature",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-1138",
+    "title": "Generating the driver won't do anything, we need to quantify the 1080p SMTP bandwidth!",
+    "status": "in progress",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-7184",
+    "title": "We need to program the back-end THX pixel!",
+    "status": "todo",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-5160",
+    "title": "Calculating the bus won't do anything, we need to navigate the back-end JSON protocol!",
+    "status": "in progress",
+    "label": "documentation",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-5618",
+    "title": "Generating the driver won't do anything, we need to index the online SSL application!",
+    "status": "done",
+    "label": "documentation",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-6699",
+    "title": "I'll transmit the wireless JBOD capacitor, that should hard drive the SSD feed!",
+    "status": "backlog",
+    "label": "documentation",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-2858",
+    "title": "We need to override the online UDP bus!",
+    "status": "backlog",
+    "label": "bug",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-9864",
+    "title": "I'll reboot the 1080p FTP panel, that should matrix the HEX hard drive!",
+    "status": "done",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-8404",
+    "title": "We need to generate the virtual HEX alarm!",
+    "status": "in progress",
+    "label": "bug",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-5365",
+    "title": "Backing up the pixel won't do anything, we need to transmit the primary IB array!",
+    "status": "in progress",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-1780",
+    "title": "The CSS feed is down, index the bluetooth transmitter so we can compress the CLI protocol!",
+    "status": "todo",
+    "label": "documentation",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-6938",
+    "title": "Use the redundant SCSI application, then you can hack the optical alarm!",
+    "status": "todo",
+    "label": "documentation",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-9885",
+    "title": "We need to compress the auxiliary VGA driver!",
+    "status": "backlog",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-3216",
+    "title": "Transmitting the transmitter won't do anything, we need to compress the virtual HDD sensor!",
+    "status": "backlog",
+    "label": "documentation",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-9285",
+    "title": "The IP monitor is down, copy the haptic alarm so we can generate the HTTP transmitter!",
+    "status": "todo",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-1024",
+    "title": "Overriding the microchip won't do anything, we need to transmit the digital OCR transmitter!",
+    "status": "in progress",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-7068",
+    "title": "You can't generate the capacitor without indexing the wireless HEX pixel!",
+    "status": "canceled",
+    "label": "bug",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-6502",
+    "title": "Navigating the microchip won't do anything, we need to bypass the back-end SQL bus!",
+    "status": "todo",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-5326",
+    "title": "We need to hack the redundant UTF8 transmitter!",
+    "status": "todo",
+    "label": "bug",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-6274",
+    "title": "Use the virtual PCI circuit, then you can parse the bluetooth alarm!",
+    "status": "canceled",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-1571",
+    "title": "I'll input the neural DRAM circuit, that should protocol the SMTP interface!",
+    "status": "in progress",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-9518",
+    "title": "Compressing the interface won't do anything, we need to compress the online SDD matrix!",
+    "status": "canceled",
+    "label": "documentation",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-5581",
+    "title": "I'll synthesize the digital COM pixel, that should transmitter the UTF8 protocol!",
+    "status": "backlog",
+    "label": "documentation",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-2197",
+    "title": "Parsing the feed won't do anything, we need to copy the bluetooth DRAM bus!",
+    "status": "todo",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-8484",
+    "title": "We need to parse the solid state UDP firewall!",
+    "status": "in progress",
+    "label": "bug",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-9892",
+    "title": "If we back up the application, we can get to the UDP application through the multi-byte THX capacitor!",
+    "status": "done",
+    "label": "documentation",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-9616",
+    "title": "We need to synthesize the cross-platform ASCII pixel!",
+    "status": "in progress",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-9744",
+    "title": "Use the back-end IP card, then you can input the solid state hard drive!",
+    "status": "done",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-1376",
+    "title": "Generating the alarm won't do anything, we need to generate the mobile IP capacitor!",
+    "status": "backlog",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-7382",
+    "title": "If we back up the firewall, we can get to the RAM alarm through the primary UTF8 pixel!",
+    "status": "todo",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-2290",
+    "title": "I'll compress the virtual JSON panel, that should application the UTF8 bus!",
+    "status": "canceled",
+    "label": "documentation",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-1533",
+    "title": "You can't input the firewall without overriding the wireless TCP firewall!",
+    "status": "done",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-4920",
+    "title": "Bypassing the hard drive won't do anything, we need to input the bluetooth JSON program!",
+    "status": "in progress",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-5168",
+    "title": "If we synthesize the bus, we can get to the IP panel through the virtual TLS array!",
+    "status": "in progress",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-7103",
+    "title": "We need to parse the multi-byte EXE bandwidth!",
+    "status": "canceled",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-4314",
+    "title": "If we compress the program, we can get to the XML alarm through the multi-byte COM matrix!",
+    "status": "in progress",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-3415",
+    "title": "Use the cross-platform XML application, then you can quantify the solid state feed!",
+    "status": "todo",
+    "label": "feature",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-8339",
+    "title": "Try to calculate the DNS interface, maybe it will input the bluetooth capacitor!",
+    "status": "in progress",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-6995",
+    "title": "Try to hack the XSS bandwidth, maybe it will override the bluetooth matrix!",
+    "status": "todo",
+    "label": "feature",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-8053",
+    "title": "If we connect the program, we can get to the UTF8 matrix through the digital UDP protocol!",
+    "status": "todo",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-4336",
+    "title": "If we synthesize the microchip, we can get to the SAS sensor through the optical UDP program!",
+    "status": "todo",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-8790",
+    "title": "I'll back up the optical COM alarm, that should alarm the RSS capacitor!",
+    "status": "done",
+    "label": "bug",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-8980",
+    "title": "Try to navigate the SQL transmitter, maybe it will back up the virtual firewall!",
+    "status": "canceled",
+    "label": "bug",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-7342",
+    "title": "Use the neural CLI card, then you can parse the online port!",
+    "status": "backlog",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-5608",
+    "title": "I'll hack the haptic SSL program, that should bus the UDP transmitter!",
+    "status": "canceled",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-1606",
+    "title": "I'll generate the bluetooth PNG firewall, that should pixel the SSL driver!",
+    "status": "done",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-7872",
+    "title": "Transmitting the circuit won't do anything, we need to reboot the 1080p RSS monitor!",
+    "status": "canceled",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-4167",
+    "title": "Use the cross-platform SMS circuit, then you can synthesize the optical feed!",
+    "status": "canceled",
+    "label": "bug",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-9581",
+    "title": "You can't index the port without hacking the cross-platform XSS monitor!",
+    "status": "backlog",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-8806",
+    "title": "We need to bypass the back-end SSL panel!",
+    "status": "done",
+    "label": "bug",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-6542",
+    "title": "Try to quantify the RSS firewall, maybe it will quantify the open-source system!",
+    "status": "done",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-6806",
+    "title": "The VGA protocol is down, reboot the back-end matrix so we can parse the CSS panel!",
+    "status": "canceled",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-9549",
+    "title": "You can't bypass the bus without connecting the neural JBOD bus!",
+    "status": "todo",
+    "label": "feature",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-1075",
+    "title": "Backing up the driver won't do anything, we need to parse the redundant RAM pixel!",
+    "status": "done",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-1427",
+    "title": "Use the auxiliary PCI circuit, then you can calculate the cross-platform interface!",
+    "status": "done",
+    "label": "documentation",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-1907",
+    "title": "Hacking the circuit won't do anything, we need to back up the online DRAM system!",
+    "status": "todo",
+    "label": "documentation",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-4309",
+    "title": "If we generate the system, we can get to the TCP sensor through the optical GB pixel!",
+    "status": "backlog",
+    "label": "bug",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-3973",
+    "title": "I'll parse the back-end ADP array, that should bandwidth the RSS bandwidth!",
+    "status": "todo",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-7962",
+    "title": "Use the wireless RAM program, then you can hack the cross-platform feed!",
+    "status": "canceled",
+    "label": "bug",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-3360",
+    "title": "You can't quantify the program without synthesizing the neural OCR interface!",
+    "status": "done",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-9887",
+    "title": "Use the auxiliary ASCII sensor, then you can connect the solid state port!",
+    "status": "backlog",
+    "label": "bug",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-3649",
+    "title": "I'll input the virtual USB system, that should circuit the DNS monitor!",
+    "status": "in progress",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-3586",
+    "title": "If we quantify the circuit, we can get to the CLI feed through the mobile SMS hard drive!",
+    "status": "in progress",
+    "label": "bug",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-5150",
+    "title": "I'll hack the wireless XSS port, that should transmitter the IP interface!",
+    "status": "canceled",
+    "label": "feature",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-3652",
+    "title": "The SQL interface is down, override the optical bus so we can program the ASCII interface!",
+    "status": "backlog",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-6884",
+    "title": "Use the digital PCI circuit, then you can synthesize the multi-byte microchip!",
+    "status": "canceled",
+    "label": "feature",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-1591",
+    "title": "We need to connect the mobile XSS driver!",
+    "status": "in progress",
+    "label": "feature",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-3802",
+    "title": "Try to override the ASCII protocol, maybe it will parse the virtual matrix!",
+    "status": "in progress",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-7253",
+    "title": "Programming the capacitor won't do anything, we need to bypass the neural IB hard drive!",
+    "status": "backlog",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-9739",
+    "title": "We need to hack the multi-byte HDD bus!",
+    "status": "done",
+    "label": "documentation",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-4424",
+    "title": "Try to hack the HEX alarm, maybe it will connect the optical pixel!",
+    "status": "in progress",
+    "label": "documentation",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-3922",
+    "title": "You can't back up the capacitor without generating the wireless PCI program!",
+    "status": "backlog",
+    "label": "bug",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-4921",
+    "title": "I'll index the open-source IP feed, that should system the GB application!",
+    "status": "canceled",
+    "label": "bug",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-5814",
+    "title": "We need to calculate the 1080p AGP feed!",
+    "status": "backlog",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-2645",
+    "title": "Synthesizing the system won't do anything, we need to navigate the multi-byte HDD firewall!",
+    "status": "todo",
+    "label": "documentation",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-4535",
+    "title": "Try to copy the JSON circuit, maybe it will connect the wireless feed!",
+    "status": "in progress",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-4463",
+    "title": "We need to copy the solid state AGP monitor!",
+    "status": "done",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-9745",
+    "title": "If we connect the protocol, we can get to the GB system through the bluetooth PCI microchip!",
+    "status": "canceled",
+    "label": "feature",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-2080",
+    "title": "If we input the bus, we can get to the RAM matrix through the auxiliary RAM card!",
+    "status": "todo",
+    "label": "bug",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-3838",
+    "title": "I'll bypass the online TCP application, that should panel the AGP system!",
+    "status": "backlog",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-1340",
+    "title": "We need to navigate the virtual PNG circuit!",
+    "status": "todo",
+    "label": "bug",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-6665",
+    "title": "If we parse the monitor, we can get to the SSD hard drive through the cross-platform AGP alarm!",
+    "status": "canceled",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-7585",
+    "title": "If we calculate the hard drive, we can get to the SSL program through the multi-byte CSS microchip!",
+    "status": "backlog",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-6319",
+    "title": "We need to copy the multi-byte SCSI program!",
+    "status": "backlog",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-4369",
+    "title": "Try to input the SCSI bus, maybe it will generate the 1080p pixel!",
+    "status": "backlog",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-9035",
+    "title": "We need to override the solid state PNG array!",
+    "status": "canceled",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-3970",
+    "title": "You can't index the transmitter without quantifying the haptic ASCII card!",
+    "status": "todo",
+    "label": "documentation",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-4473",
+    "title": "You can't bypass the protocol without overriding the neural RSS program!",
+    "status": "todo",
+    "label": "documentation",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-4136",
+    "title": "You can't hack the hard drive without hacking the primary JSON program!",
+    "status": "canceled",
+    "label": "bug",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-3939",
+    "title": "Use the back-end SQL firewall, then you can connect the neural hard drive!",
+    "status": "done",
+    "label": "feature",
+    "priority": "low"
+  },
+  {
+    "id": "TASK-2007",
+    "title": "I'll input the back-end USB protocol, that should bandwidth the PCI system!",
+    "status": "backlog",
+    "label": "bug",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-7516",
+    "title": "Use the primary SQL program, then you can generate the auxiliary transmitter!",
+    "status": "done",
+    "label": "documentation",
+    "priority": "medium"
+  },
+  {
+    "id": "TASK-6906",
+    "title": "Try to back up the DRAM system, maybe it will reboot the online transmitter!",
+    "status": "done",
+    "label": "feature",
+    "priority": "high"
+  },
+  {
+    "id": "TASK-5207",
+    "title": "The SMS interface is down, copy the bluetooth bus so we can quantify the VGA card!",
+    "status": "in progress",
+    "label": "bug",
+    "priority": "low"
+  }
+]
\ No newline at end of file
diff --git a/apps/v4/app/(app)/examples/tasks/page.tsx b/apps/v4/app/(app)/examples/tasks/page.tsx
new file mode 100644
index 00000000000..ebab8669c6a
--- /dev/null
+++ b/apps/v4/app/(app)/examples/tasks/page.tsx
@@ -0,0 +1,67 @@
+import { promises as fs } from "fs"
+import path from "path"
+import { Metadata } from "next"
+import Image from "next/image"
+import { z } from "zod"
+
+import { columns } from "./components/columns"
+import { DataTable } from "./components/data-table"
+import { UserNav } from "./components/user-nav"
+import { taskSchema } from "./data/schema"
+
+export const metadata: Metadata = {
+  title: "Tasks",
+  description: "A task and issue tracker build using Tanstack Table.",
+}
+
+// Simulate a database read for tasks.
+async function getTasks() {
+  const data = await fs.readFile(
+    path.join(process.cwd(), "app/(app)/examples/tasks/data/tasks.json")
+  )
+
+  const tasks = JSON.parse(data.toString())
+
+  return z.array(taskSchema).parse(tasks)
+}
+
+export default async function TaskPage() {
+  const tasks = await getTasks()
+
+  return (
+    <>
+      <div className="md:hidden">
+        <Image
+          src="/examples/tasks-light.png"
+          width={1280}
+          height={998}
+          alt="Playground"
+          className="block dark:hidden"
+        />
+        <Image
+          src="/examples/tasks-dark.png"
+          width={1280}
+          height={998}
+          alt="Playground"
+          className="hidden dark:block"
+        />
+      </div>
+      <div className="hidden h-full flex-1 flex-col gap-8 p-8 md:flex">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex flex-col gap-1">
+            <h2 className="text-2xl font-semibold tracking-tight">
+              Welcome back!
+            </h2>
+            <p className="text-muted-foreground">
+              Here&apos;s a list of your tasks for this month.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <UserNav />
+          </div>
+        </div>
+        <DataTable data={tasks} columns={columns} />
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/app/(app)/layout.tsx b/apps/v4/app/(app)/layout.tsx
new file mode 100644
index 00000000000..e7b67cf7b46
--- /dev/null
+++ b/apps/v4/app/(app)/layout.tsx
@@ -0,0 +1,12 @@
+import { SiteFooter } from "@/components/site-footer"
+import { SiteHeader } from "@/components/site-header"
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="bg-background relative z-10 flex min-h-svh flex-col">
+      <SiteHeader />
+      <main className="flex flex-1 flex-col">{children}</main>
+      <SiteFooter />
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/llm/[[...slug]]/route.ts b/apps/v4/app/(app)/llm/[[...slug]]/route.ts
new file mode 100644
index 00000000000..9c8893fc3a6
--- /dev/null
+++ b/apps/v4/app/(app)/llm/[[...slug]]/route.ts
@@ -0,0 +1,28 @@
+import { notFound } from "next/navigation"
+import { NextResponse, type NextRequest } from "next/server"
+
+import { source } from "@/lib/source"
+
+export const revalidate = false
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ slug: string[] }> }
+) {
+  const slug = (await params).slug
+  const page = source.getPage(slug)
+
+  if (!page) {
+    notFound()
+  }
+
+  return new NextResponse(page.data.content, {
+    headers: {
+      "Content-Type": "text/markdown; charset=utf-8",
+    },
+  })
+}
+
+export function generateStaticParams() {
+  return source.generateParams()
+}
diff --git a/apps/v4/app/(app)/themes/layout.tsx b/apps/v4/app/(app)/themes/layout.tsx
new file mode 100644
index 00000000000..15d1bf24679
--- /dev/null
+++ b/apps/v4/app/(app)/themes/layout.tsx
@@ -0,0 +1,64 @@
+import { Metadata } from "next"
+import Link from "next/link"
+
+import { Announcement } from "@/components/announcement"
+import {
+  PageActions,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+const title = "Pick a Color. Make it yours."
+const description =
+  "Try our hand-picked themes. Copy and paste them into your project. New theme editor coming soon."
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+}
+
+export default function ThemesLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div>
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
+        <PageActions>
+          <Button asChild size="sm">
+            <a href="#themes">Browse Themes</a>
+          </Button>
+          <Button asChild variant="ghost" size="sm">
+            <Link href="/docs/theming">Documentation</Link>
+          </Button>
+        </PageActions>
+      </PageHeader>
+      {children}
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/themes/page.tsx b/apps/v4/app/(app)/themes/page.tsx
new file mode 100644
index 00000000000..ed0548e614b
--- /dev/null
+++ b/apps/v4/app/(app)/themes/page.tsx
@@ -0,0 +1,22 @@
+import { CardsDemo } from "@/components/cards"
+import { ThemeCustomizer } from "@/components/theme-customizer"
+
+export const dynamic = "force-static"
+export const revalidate = false
+
+export default function ThemesPage() {
+  return (
+    <>
+      <div id="themes" className="container-wrapper scroll-mt-20">
+        <div className="container flex items-center justify-between gap-8 px-6 py-4 md:px-8">
+          <ThemeCustomizer />
+        </div>
+      </div>
+      <div className="container-wrapper section-soft flex flex-1 flex-col pb-6">
+        <div className="theme-container container flex flex-1 flex-col">
+          <CardsDemo />
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/analytics-date-picker.tsx b/apps/v4/app/(examples)/dashboard-03/components/analytics-date-picker.tsx
new file mode 100644
index 00000000000..ba982c2166c
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/components/analytics-date-picker.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export function AnalyticsDatePicker() {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 0, 20),
+    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),
+  })
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          id="date"
+          variant="outline"
+          className={cn(
+            "w-fit justify-start px-2 font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="text-muted-foreground" />
+          {date?.from ? (
+            date.to ? (
+              <>
+                {format(date.from, "LLL dd, y")} -{" "}
+                {format(date.to, "LLL dd, y")}
+              </>
+            ) : (
+              format(date.from, "LLL dd, y")
+            )
+          ) : (
+            <span>Pick a date</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="end">
+        <Calendar
+          initialFocus
+          mode="range"
+          defaultMonth={date?.from}
+          selected={date}
+          onSelect={setDate}
+          numberOfMonths={2}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/app-sidebar.tsx b/apps/v4/app/(examples)/dashboard-03/components/app-sidebar.tsx
new file mode 100644
index 00000000000..cbae5e4c6f3
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/components/app-sidebar.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChartLineIcon,
+  FileIcon,
+  HomeIcon,
+  LifeBuoy,
+  Send,
+  Settings2Icon,
+  ShoppingBagIcon,
+  ShoppingCartIcon,
+  UserIcon,
+} from "lucide-react"
+
+import { Sidebar, SidebarContent } from "@/registry/new-york-v4/ui/sidebar"
+import { NavMain } from "@/app/(examples)/dashboard-03/components/nav-main"
+import { NavSecondary } from "@/app/(examples)/dashboard-03/components/nav-secondary"
+
+const data = {
+  navMain: [
+    {
+      title: "Dashboard",
+      url: "/dashboard",
+      icon: HomeIcon,
+    },
+    {
+      title: "Analytics",
+      url: "/dashboard/analytics",
+      icon: ChartLineIcon,
+    },
+    {
+      title: "Orders",
+      url: "/dashboard/orders",
+      icon: ShoppingBagIcon,
+    },
+    {
+      title: "Products",
+      url: "/dashboard/products",
+      icon: ShoppingCartIcon,
+    },
+    {
+      title: "Invoices",
+      url: "/dashboard/invoices",
+      icon: FileIcon,
+    },
+    {
+      title: "Customers",
+      url: "/dashboard/customers",
+      icon: UserIcon,
+    },
+    {
+      title: "Settings",
+      url: "/dashboard/settings",
+      icon: Settings2Icon,
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar
+      className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
+      {...props}
+    >
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx b/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
new file mode 100644
index 00000000000..a1dce3cbed1
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 346, mobile: 140 },
+  { month: "July", desktop: 321, mobile: 275 },
+  { month: "August", desktop: 132, mobile: 95 },
+  { month: "September", desktop: 189, mobile: 225 },
+  { month: "October", desktop: 302, mobile: 248 },
+  { month: "November", desktop: 342, mobile: 285 },
+  { month: "December", desktop: 328, mobile: 290 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRevenue() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardDescription>January - June 2024</CardDescription>
+        <CardTitle className="text-3xl font-bold tracking-tight">
+          $45,231.89
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="aspect-[3/1]">
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: -16,
+              right: 0,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <YAxis
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.toLocaleString()}
+              domain={[0, "dataMax"]}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideIndicator />}
+            />
+            <Bar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              radius={[0, 0, 4, 4]}
+              stackId={1}
+            />
+            <Bar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              radius={[4, 4, 0, 0]}
+              stackId={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/chart-visitors.tsx b/apps/v4/app/(examples)/dashboard-03/components/chart-visitors.tsx
new file mode 100644
index 00000000000..2ae91cfee9a
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/components/chart-visitors.tsx
@@ -0,0 +1,189 @@
+"use client"
+
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+const desktopData = [
+  { month: "january", desktop: 186, fill: "var(--color-january)" },
+  { month: "february", desktop: 305, fill: "var(--color-february)" },
+  { month: "march", desktop: 237, fill: "var(--color-march)" },
+  { month: "april", desktop: 173, fill: "var(--color-april)" },
+  { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+  },
+  mobile: {
+    label: "Mobile",
+  },
+  january: {
+    label: "January",
+    color: "var(--chart-1)",
+  },
+  february: {
+    label: "February",
+    color: "var(--chart-2)",
+  },
+  march: {
+    label: "March",
+    color: "var(--chart-3)",
+  },
+  april: {
+    label: "April",
+    color: "var(--chart-4)",
+  },
+  may: {
+    label: "May",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartVisitors() {
+  const id = "pie-interactive"
+  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
+
+  const activeIndex = React.useMemo(
+    () => desktopData.findIndex((item) => item.month === activeMonth),
+    [activeMonth]
+  )
+  const months = React.useMemo(() => desktopData.map((item) => item.month), [])
+
+  return (
+    <Card data-chart={id}>
+      <ChartStyle id={id} config={chartConfig} />
+      <CardHeader>
+        <CardDescription>January - June 2024</CardDescription>
+        <CardTitle className="text-2xl font-bold">1,234 visitors</CardTitle>
+        <CardAction>
+          <Select value={activeMonth} onValueChange={setActiveMonth}>
+            <SelectTrigger
+              className="ml-auto h-8 w-[120px]"
+              aria-label="Select a value"
+            >
+              <SelectValue placeholder="Select month" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              {months.map((key) => {
+                const config = chartConfig[key as keyof typeof chartConfig]
+
+                if (!config) {
+                  return null
+                }
+
+                const color = "color" in config ? config.color : undefined
+
+                return (
+                  <SelectItem key={key} value={key}>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span
+                        className="flex h-3 w-3 shrink-0 rounded-sm"
+                        style={{
+                          backgroundColor: color,
+                        }}
+                      />
+                      {config?.label}
+                    </div>
+                  </SelectItem>
+                )
+              })}
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="flex flex-1 justify-center pb-0">
+        <ChartContainer
+          id={id}
+          config={chartConfig}
+          className="mx-auto aspect-square w-full max-w-[300px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={desktopData}
+              dataKey="desktop"
+              nameKey="month"
+              innerRadius={60}
+              strokeWidth={5}
+              activeIndex={activeIndex}
+              activeShape={({
+                outerRadius = 0,
+                ...props
+              }: PieSectorDataItem) => (
+                <g>
+                  <Sector {...props} outerRadius={outerRadius + 10} />
+                  <Sector
+                    {...props}
+                    outerRadius={outerRadius + 25}
+                    innerRadius={outerRadius + 12}
+                  />
+                </g>
+              )}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {desktopData[activeIndex].desktop.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/mode-toggle.tsx b/apps/v4/app/(examples)/dashboard-03/components/mode-toggle.tsx
new file mode 100644
index 00000000000..ca63bb877bb
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/components/mode-toggle.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { MoonIcon, SunIcon } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export function ModeToggle() {
+  const { setTheme, resolvedTheme } = useTheme()
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+  }, [resolvedTheme, setTheme])
+
+  return (
+    <Button
+      variant="secondary"
+      size="icon"
+      className="group/toggle size-8"
+      onClick={toggleTheme}
+    >
+      <SunIcon className="hidden [html.dark_&]:block" />
+      <MoonIcon className="hidden [html.light_&]:block" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/nav-main.tsx b/apps/v4/app/(examples)/dashboard-03/components/nav-main.tsx
new file mode 100644
index 00000000000..e445bb29fed
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/components/nav-main.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+    disabled?: boolean
+  }[]
+}) {
+  const pathname = usePathname()
+
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Dashboard</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                asChild
+                tooltip={item.title}
+                isActive={pathname === item.url}
+                disabled={item.disabled}
+              >
+                <a
+                  href={item.disabled ? "#" : item.url}
+                  data-disabled={item.disabled}
+                  className="data-[disabled=true]:opacity-50"
+                >
+                  <item.icon className="text-muted-foreground" />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.items?.length ? (
+                <>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuAction className="data-[state=open]:rotate-90">
+                      <ChevronRight />
+                      <span className="sr-only">Toggle</span>
+                    </SidebarMenuAction>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.items?.map((subItem) => (
+                        <SidebarMenuSubItem key={subItem.title}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </>
+              ) : null}
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/nav-secondary.tsx b/apps/v4/app/(examples)/dashboard-03/components/nav-secondary.tsx
new file mode 100644
index 00000000000..66924a12dc0
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/components/nav-secondary.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild size="sm">
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx b/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx
new file mode 100644
index 00000000000..e3004c59485
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { BadgeCheck, Bell, CreditCard, LogOut, Sparkles } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Avatar className="size-8 rounded-md">
+            <AvatarImage src={user.avatar} alt={user.name} />
+            <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+        side="bottom"
+        align="end"
+        sideOffset={4}
+      >
+        <DropdownMenuLabel className="p-0 font-normal">
+          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+            <Avatar className="h-8 w-8 rounded-lg">
+              <AvatarImage src={user.avatar} alt={user.name} />
+              <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-medium">{user.name}</span>
+              <span className="text-muted-foreground truncate text-xs">
+                {user.email}
+              </span>
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Sparkles />
+            Upgrade to Pro
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <BadgeCheck />
+            Account
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCard />
+            Billing
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Bell />
+            Notifications
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut />
+          Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx b/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx
new file mode 100644
index 00000000000..de20722e4df
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx
@@ -0,0 +1,217 @@
+import {
+  ArrowUpDownIcon,
+  EllipsisVerticalIcon,
+  ListFilterIcon,
+  PlusIcon,
+} from "lucide-react"
+
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/registry/new-york-v4/ui/card"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/registry/new-york-v4/ui/pagination"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york-v4/ui/table"
+import { Tabs, TabsList, TabsTrigger } from "@/registry/new-york-v4/ui/tabs"
+
+export function ProductsTable({
+  products,
+}: {
+  products: {
+    id: string
+    name: string
+    price: number
+    stock: number
+    dateAdded: string
+    status: string
+  }[]
+}) {
+  return (
+    <Card className="flex w-full flex-col gap-4">
+      <CardHeader className="flex flex-row items-center justify-between">
+        <Tabs defaultValue="all">
+          <TabsList className="w-full @3xl/page:w-fit">
+            <TabsTrigger value="all">All Products</TabsTrigger>
+            <TabsTrigger value="in-stock">In Stock</TabsTrigger>
+            <TabsTrigger value="low-stock">Low Stock</TabsTrigger>
+            <TabsTrigger value="add-product" asChild>
+              <button>
+                <PlusIcon />
+              </button>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <div className="hidden items-center gap-2 **:data-[slot=button]:size-8 **:data-[slot=select-trigger]:h-8 @3xl/page:flex">
+          <Select defaultValue="all">
+            <SelectTrigger>
+              <span className="text-muted-foreground text-sm">Category:</span>
+              <SelectValue placeholder="Select a product" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All</SelectItem>
+              <SelectItem value="in-stock">In Stock</SelectItem>
+              <SelectItem value="low-stock">Low Stock</SelectItem>
+              <SelectItem value="archived">Archived</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select defaultValue="all">
+            <SelectTrigger>
+              <span className="text-muted-foreground text-sm">Price:</span>
+              <SelectValue placeholder="Select a product" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">$100-$200</SelectItem>
+              <SelectItem value="in-stock">$200-$300</SelectItem>
+              <SelectItem value="low-stock">$300-$400</SelectItem>
+              <SelectItem value="archived">$400-$500</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select defaultValue="all">
+            <SelectTrigger>
+              <span className="text-muted-foreground text-sm">Status:</span>
+              <SelectValue placeholder="Select a product" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">In Stock</SelectItem>
+              <SelectItem value="in-stock">Low Stock</SelectItem>
+              <SelectItem value="low-stock">Archived</SelectItem>
+              <SelectItem value="archived">Archived</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon">
+            <ListFilterIcon />
+          </Button>
+          <Button variant="outline" size="icon">
+            <ArrowUpDownIcon />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-12 px-4">
+                <Checkbox />
+              </TableHead>
+              <TableHead>Product</TableHead>
+              <TableHead className="text-right">Price</TableHead>
+              <TableHead className="text-right">Stock</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Date Added</TableHead>
+              <TableHead />
+            </TableRow>
+          </TableHeader>
+          <TableBody className="**:data-[slot=table-cell]:py-2.5">
+            {products.map((product) => (
+              <TableRow key={product.id}>
+                <TableCell className="px-4">
+                  <Checkbox />
+                </TableCell>
+                <TableCell className="font-medium">{product.name}</TableCell>
+                <TableCell className="text-right">
+                  ${product.price.toFixed(2)}
+                </TableCell>
+                <TableCell className="text-right">{product.stock}</TableCell>
+                <TableCell>
+                  <Badge
+                    variant="secondary"
+                    className={
+                      product.status === "Low Stock"
+                        ? "border-orange-700 bg-transparent text-orange-700 dark:border-orange-700 dark:bg-transparent dark:text-orange-700"
+                        : "bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-100"
+                    }
+                  >
+                    {product.status}
+                  </Badge>
+                </TableCell>
+                <TableCell>
+                  {new Date(product.dateAdded).toLocaleDateString("en-US", {
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric",
+                  })}
+                </TableCell>
+                <TableCell>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" className="size-6">
+                        <EllipsisVerticalIcon />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem>Edit</DropdownMenuItem>
+                      <DropdownMenuItem variant="destructive">
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+      <CardFooter className="flex flex-col items-center justify-between border-t pt-6 @3xl/page:flex-row">
+        <div className="text-muted-foreground hidden text-sm @3xl/page:block">
+          Showing 1-10 of 100 products
+        </div>
+        <Pagination className="mx-0 w-fit">
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#" />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" isActive>
+                2
+              </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">3</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#" />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/search-form.tsx b/apps/v4/app/(examples)/dashboard-03/components/search-form.tsx
new file mode 100644
index 00000000000..0491880e4d2
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/components/search-form.tsx
@@ -0,0 +1,22 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { SidebarInput } from "@/registry/new-york-v4/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <div className="relative">
+        <Label htmlFor="search" className="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Type to search..."
+          className="h-8 pl-7"
+        />
+        <Search className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+      </div>
+    </form>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx b/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx
new file mode 100644
index 00000000000..306add90d72
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { Fragment, useMemo } from "react"
+import { usePathname } from "next/navigation"
+import { SidebarIcon } from "lucide-react"
+
+import { ThemeSelector } from "@/components/theme-selector"
+import { SearchForm } from "@/registry/new-york-v4/blocks/sidebar-16/components/search-form"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import { useSidebar } from "@/registry/new-york-v4/ui/sidebar"
+import { ModeToggle } from "@/app/(examples)/dashboard-03/components/mode-toggle"
+import { NavUser } from "@/app/(examples)/dashboard-03/components/nav-user"
+
+export function SiteHeader() {
+  const { toggleSidebar } = useSidebar()
+  const pathname = usePathname()
+
+  // Faux breadcrumbs for demo.
+  const breadcrumbs = useMemo(() => {
+    return pathname
+      .split("/")
+      .filter((path) => path !== "")
+      .map((path, index, array) => ({
+        label: path,
+        href: `/${array.slice(0, index + 1).join("/")}`,
+      }))
+  }, [pathname])
+
+  return (
+    <header
+      data-slot="site-header"
+      className="bg-background sticky top-0 z-50 flex w-full items-center border-b"
+    >
+      <div className="flex h-(--header-height) w-full items-center gap-2 px-2 pr-4">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={toggleSidebar}
+          className="gap-2.5 has-[>svg]:px-2"
+        >
+          <SidebarIcon />
+          <span className="truncate font-medium">Acme Inc</span>
+        </Button>
+        <Separator
+          orientation="vertical"
+          className="mr-2 data-[orientation=vertical]:h-4"
+        />
+        <Breadcrumb className="hidden sm:block">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/" className="capitalize">
+                Home
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            {breadcrumbs.map((breadcrumb, index) =>
+              index === breadcrumbs.length - 1 ? (
+                <BreadcrumbItem key={index}>
+                  <BreadcrumbPage className="capitalize">
+                    {breadcrumb.label}
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              ) : (
+                <Fragment key={index}>
+                  <BreadcrumbItem>
+                    <BreadcrumbLink
+                      href={breadcrumb.href}
+                      className="capitalize"
+                    >
+                      {breadcrumb.label}
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                </Fragment>
+              )
+            )}
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div className="ml-auto flex items-center gap-2">
+          <SearchForm className="w-fullsm:w-auto" />
+          <ThemeSelector />
+          <ModeToggle />
+          <NavUser
+            user={{
+              name: "shadcn",
+              email: "m@example.com",
+              avatar: "/avatars/shadcn.jpg",
+            }}
+          />
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/customers/page.tsx b/apps/v4/app/(examples)/dashboard-03/customers/page.tsx
new file mode 100644
index 00000000000..512a007ea2d
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/customers/page.tsx
@@ -0,0 +1,8 @@
+export default function CustomersPage() {
+  return (
+    <div className="p-6">
+      <div className="bg-input p-4">Input</div>
+      <div className="bg-input/30 p-4">Input 50</div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/layout.tsx b/apps/v4/app/(examples)/dashboard-03/layout.tsx
new file mode 100644
index 00000000000..6b4daad53c6
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/layout.tsx
@@ -0,0 +1,29 @@
+import { cookies } from "next/headers"
+
+import {
+  SidebarInset,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+import { AppSidebar } from "@/app/(examples)/dashboard-03/components/app-sidebar"
+import { SiteHeader } from "@/app/(examples)/dashboard-03/components/site-header"
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const cookieStore = await cookies()
+  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true"
+
+  return (
+    <main className="[--header-height:calc(theme(spacing.14))]">
+      <SidebarProvider defaultOpen={defaultOpen} className="flex flex-col">
+        <SiteHeader />
+        <div className="flex flex-1">
+          <AppSidebar />
+          <SidebarInset>{children}</SidebarInset>
+        </div>
+      </SidebarProvider>
+    </main>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/page.tsx b/apps/v4/app/(examples)/dashboard-03/page.tsx
new file mode 100644
index 00000000000..f42c3c293d0
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/page.tsx
@@ -0,0 +1,206 @@
+import { Metadata } from "next"
+import {
+  DownloadIcon,
+  FilterIcon,
+  TrendingDownIcon,
+  TrendingUpIcon,
+} from "lucide-react"
+
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+import { AnalyticsDatePicker } from "@/app/(examples)/dashboard-03/components/analytics-date-picker"
+import { ChartRevenue } from "@/app/(examples)/dashboard-03/components/chart-revenue"
+import { ChartVisitors } from "@/app/(examples)/dashboard-03/components/chart-visitors"
+import { ProductsTable } from "@/app/(examples)/dashboard-03/components/products-table"
+
+export const metadata: Metadata = {
+  title: "Dashboard",
+  description: "An example dashboard to test the new components.",
+}
+
+// Load from database.
+const products = [
+  {
+    id: "1",
+    name: "BJÖRKSNÄS Dining Table",
+    price: 599.99,
+    stock: 12,
+    dateAdded: "2023-06-15",
+    status: "In Stock",
+  },
+  {
+    id: "2",
+    name: "POÄNG Armchair",
+    price: 249.99,
+    stock: 28,
+    dateAdded: "2023-07-22",
+    status: "In Stock",
+  },
+  {
+    id: "3",
+    name: "MALM Bed Frame",
+    price: 399.99,
+    stock: 15,
+    dateAdded: "2023-08-05",
+    status: "In Stock",
+  },
+  {
+    id: "4",
+    name: "KALLAX Shelf Unit",
+    price: 179.99,
+    stock: 32,
+    dateAdded: "2023-09-12",
+    status: "In Stock",
+  },
+  {
+    id: "5",
+    name: "STOCKHOLM Rug",
+    price: 299.99,
+    stock: 8,
+    dateAdded: "2023-10-18",
+    status: "Low Stock",
+  },
+  {
+    id: "6",
+    name: "KIVIK Sofa",
+    price: 899.99,
+    stock: 6,
+    dateAdded: "2023-11-02",
+    status: "Low Stock",
+  },
+  {
+    id: "7",
+    name: "LISABO Coffee Table",
+    price: 149.99,
+    stock: 22,
+    dateAdded: "2023-11-29",
+    status: "In Stock",
+  },
+  {
+    id: "8",
+    name: "HEMNES Bookcase",
+    price: 249.99,
+    stock: 17,
+    dateAdded: "2023-12-10",
+    status: "In Stock",
+  },
+  {
+    id: "9",
+    name: "EKEDALEN Dining Chairs (Set of 2)",
+    price: 199.99,
+    stock: 14,
+    dateAdded: "2024-01-05",
+    status: "In Stock",
+  },
+  {
+    id: "10",
+    name: "FRIHETEN Sleeper Sofa",
+    price: 799.99,
+    stock: 9,
+    dateAdded: "2024-01-18",
+    status: "Low Stock",
+  },
+]
+
+export default function DashboardPage() {
+  return (
+    <div className="@container/page flex flex-1 flex-col gap-8 p-6">
+      <Tabs defaultValue="overview" className="gap-6">
+        <div
+          data-slot="dashboard-header"
+          className="flex items-center justify-between"
+        >
+          <TabsList className="w-full @3xl/page:w-fit">
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="analytics">Analytics</TabsTrigger>
+            <TabsTrigger value="reports">Reports</TabsTrigger>
+            <TabsTrigger value="exports" disabled>
+              Exports
+            </TabsTrigger>
+          </TabsList>
+          <div className="hidden items-center gap-2 @3xl/page:flex">
+            <AnalyticsDatePicker />
+            <Button variant="outline">
+              <FilterIcon />
+              Filter
+            </Button>
+            <Button variant="outline">
+              <DownloadIcon />
+              Export
+            </Button>
+          </div>
+        </div>
+        <TabsContent value="overview" className="flex flex-col gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>Total Revenue</CardTitle>
+                <CardDescription>$1,250.00 in the last 30 days</CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Badge variant="outline">
+                  <TrendingUpIcon />
+                  +12.5%
+                </Badge>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>New Customers</CardTitle>
+                <CardDescription>-12 customers from last month</CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Badge variant="outline">
+                  <TrendingDownIcon />
+                  -20%
+                </Badge>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>Active Accounts</CardTitle>
+                <CardDescription>+2,345 users from last month</CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Badge variant="outline">
+                  <TrendingUpIcon />
+                  +12.5%
+                </Badge>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>Growth Rate</CardTitle>
+                <CardDescription>+12.5% increase per month</CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Badge variant="outline">
+                  <TrendingUpIcon />
+                  +4.5%
+                </Badge>
+              </CardFooter>
+            </Card>
+          </div>
+          <div className="grid grid-cols-1 gap-4 @4xl/page:grid-cols-[2fr_1fr]">
+            <ChartRevenue />
+            <ChartVisitors />
+          </div>
+          <ProductsTable products={products} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard-03/settings/page.tsx b/apps/v4/app/(examples)/dashboard-03/settings/page.tsx
new file mode 100644
index 00000000000..d679a7cca85
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard-03/settings/page.tsx
@@ -0,0 +1,500 @@
+import { Metadata } from "next"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york-v4/ui/table"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+
+export const metadata: Metadata = {
+  title: "Settings",
+  description: "Manage your account settings",
+}
+
+const timezones = [
+  {
+    label: "Americas",
+    timezones: [
+      { value: "America/New_York", label: "(GMT-5) New York" },
+      { value: "America/Los_Angeles", label: "(GMT-8) Los Angeles" },
+      { value: "America/Chicago", label: "(GMT-6) Chicago" },
+      { value: "America/Toronto", label: "(GMT-5) Toronto" },
+      { value: "America/Vancouver", label: "(GMT-8) Vancouver" },
+      { value: "America/Sao_Paulo", label: "(GMT-3) São Paulo" },
+    ],
+  },
+  {
+    label: "Europe",
+    timezones: [
+      { value: "Europe/London", label: "(GMT+0) London" },
+      { value: "Europe/Paris", label: "(GMT+1) Paris" },
+      { value: "Europe/Berlin", label: "(GMT+1) Berlin" },
+      { value: "Europe/Rome", label: "(GMT+1) Rome" },
+      { value: "Europe/Madrid", label: "(GMT+1) Madrid" },
+      { value: "Europe/Amsterdam", label: "(GMT+1) Amsterdam" },
+    ],
+  },
+  {
+    label: "Asia/Pacific",
+    timezones: [
+      { value: "Asia/Tokyo", label: "(GMT+9) Tokyo" },
+      { value: "Asia/Shanghai", label: "(GMT+8) Shanghai" },
+      { value: "Asia/Singapore", label: "(GMT+8) Singapore" },
+      { value: "Asia/Dubai", label: "(GMT+4) Dubai" },
+      { value: "Australia/Sydney", label: "(GMT+11) Sydney" },
+      { value: "Asia/Seoul", label: "(GMT+9) Seoul" },
+    ],
+  },
+] as const
+
+const loginHistory = [
+  {
+    date: "2024-01-01",
+    ip: "192.168.1.1",
+    location: "New York, USA",
+  },
+  {
+    date: "2023-12-29",
+    ip: "172.16.0.100",
+    location: "London, UK",
+  },
+  {
+    date: "2023-12-28",
+    ip: "10.0.0.50",
+    location: "Toronto, Canada",
+  },
+  {
+    date: "2023-12-25",
+    ip: "192.168.2.15",
+    location: "Sydney, Australia",
+  },
+] as const
+
+const activeSessions = [
+  {
+    device: "MacBook Pro",
+    browser: "Chrome",
+    os: "macOS",
+  },
+  {
+    device: "iPhone",
+    browser: "Safari",
+    os: "iOS",
+  },
+  {
+    device: "iPad",
+    browser: "Safari",
+    os: "iOS",
+  },
+  {
+    device: "Android Phone",
+    browser: "Chrome",
+    os: "Android",
+  },
+] as const
+
+export default function SettingsPage() {
+  return (
+    <div className="@container/page flex flex-1 flex-col gap-8 p-6">
+      <Tabs defaultValue="account" className="gap-6">
+        <div
+          data-slot="dashboard-header"
+          className="flex items-center justify-between"
+        >
+          <TabsList>
+            <TabsTrigger value="account">Account</TabsTrigger>
+            <TabsTrigger value="security">Security</TabsTrigger>
+            <TabsTrigger value="notifications">Notifications</TabsTrigger>
+            <TabsTrigger value="privacy">Privacy</TabsTrigger>
+          </TabsList>
+        </div>
+        <TabsContent value="account" className="grid gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Account Settings</CardTitle>
+              <CardDescription>
+                Make changes to your account here.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form id="form-account" className="@container">
+                <FieldGroup>
+                  <Field>
+                    <Label htmlFor="name">Name</Label>
+                    <FieldControl>
+                      <Input
+                        id="name"
+                        placeholder="First and last name"
+                        required
+                      />
+                    </FieldControl>
+                    <FieldDescription>
+                      This is your public display name.
+                    </FieldDescription>
+                  </Field>
+                  <Field>
+                    <Label htmlFor="email">Email</Label>
+                    <FieldControl>
+                      <Input
+                        id="email"
+                        placeholder="you@example.com"
+                        required
+                      />
+                    </FieldControl>
+                  </Field>
+                  <Field>
+                    <Label htmlFor="timezone">Timezone</Label>
+                    <FieldControl>
+                      <Select>
+                        <SelectTrigger id="timezone">
+                          <SelectValue placeholder="Select a timezone" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {timezones.map((timezone) => (
+                            <SelectGroup key={timezone.label}>
+                              <SelectLabel>{timezone.label}</SelectLabel>
+                              {timezone.timezones.map((time) => (
+                                <SelectItem key={time.value} value={time.value}>
+                                  {time.label}
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FieldControl>
+                  </Field>
+                </FieldGroup>
+              </form>
+            </CardContent>
+            <CardFooter className="border-t">
+              <Button type="submit" form="form-account" variant="secondary">
+                Save changes
+              </Button>
+            </CardFooter>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Notifications</CardTitle>
+              <CardDescription>
+                Manage how you receive notifications.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form id="form-notifications" className="@container">
+                <FieldGroup>
+                  <Field>
+                    <Label htmlFor="channels">Notification Channels</Label>
+                    <FieldControl className="flex flex-col gap-2">
+                      <div className="flex items-center gap-2">
+                        <Checkbox id="notification-email" />
+                        <Label htmlFor="notification-email">Email</Label>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Checkbox id="notification-sms" />
+                        <Label htmlFor="notification-sms">SMS</Label>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Checkbox id="notification-push" />
+                        <Label htmlFor="notification-push">Push</Label>
+                      </div>
+                    </FieldControl>
+                    <FieldDescription>
+                      Choose how you want to receive notifications.
+                    </FieldDescription>
+                  </Field>
+                  <Field>
+                    <Label htmlFor="types">Notification Types</Label>
+                    <FieldControl className="flex flex-col gap-2">
+                      <div className="flex items-center gap-2">
+                        <Checkbox id="notification-account" />
+                        <Label htmlFor="notification-account">
+                          Account Activity
+                        </Label>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Checkbox
+                          id="notification-security"
+                          defaultChecked
+                          disabled
+                        />
+                        <Label htmlFor="notification-security">
+                          Security Alerts
+                        </Label>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Checkbox id="notification-marketing" />
+                        <Label htmlFor="notification-marketing">
+                          Marketing & Promotions
+                        </Label>
+                      </div>
+                    </FieldControl>
+                    <FieldDescription>
+                      Choose how you want to receive notifications.
+                    </FieldDescription>
+                  </Field>
+                </FieldGroup>
+              </form>
+            </CardContent>
+            <CardFooter className="border-t">
+              <Button
+                type="submit"
+                form="form-notifications"
+                variant="secondary"
+              >
+                Save changes
+              </Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+        <TabsContent
+          value="security"
+          className="grid gap-6 @3xl/page:grid-cols-2"
+        >
+          <Card className="@3xl/page:col-span-2">
+            <CardHeader>
+              <CardTitle>Security Settings</CardTitle>
+              <CardDescription>
+                Make changes to your security settings here.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="@container">
+              <form id="form-security">
+                <FieldGroup>
+                  <Field>
+                    <Label htmlFor="current-password">Current Password</Label>
+                    <FieldControl>
+                      <Input
+                        id="current-password"
+                        placeholder="Current password"
+                        required
+                      />
+                    </FieldControl>
+                    <FieldDescription>
+                      This is your current password.
+                    </FieldDescription>
+                  </Field>
+                  <Field>
+                    <Label htmlFor="new-password">New Password</Label>
+                    <FieldControl>
+                      <Input
+                        id="new-password"
+                        placeholder="New password"
+                        required
+                      />
+                    </FieldControl>
+                  </Field>
+                  <Field>
+                    <Label htmlFor="confirm-password">Confirm Password</Label>
+                    <FieldControl>
+                      <Input
+                        id="confirm-password"
+                        placeholder="Confirm password"
+                      />
+                    </FieldControl>
+                  </Field>
+                  <Field>
+                    <FieldControl>
+                      <Switch
+                        id="enable-two-factor-auth"
+                        className="self-start"
+                      />
+                    </FieldControl>
+                    <Label htmlFor="enable-two-factor-auth">
+                      Enable two-factor authentication
+                    </Label>
+                    <FieldDescription>
+                      This will add an extra layer of security to your account.
+                      Make this an extra long description to test the layout.
+                    </FieldDescription>
+                  </Field>
+                </FieldGroup>
+              </form>
+            </CardContent>
+            <CardFooter className="border-t">
+              <Button type="submit" form="form-security" variant="secondary">
+                Save changes
+              </Button>
+            </CardFooter>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Login History</CardTitle>
+              <CardDescription>
+                Recent login activities on your account.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Date</TableHead>
+                    <TableHead className="hidden @md/page:table-cell">
+                      IP
+                    </TableHead>
+                    <TableHead>Location</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {loginHistory.map((login) => (
+                    <TableRow key={login.date}>
+                      <TableCell>
+                        <div className="flex flex-col gap-1">
+                          {new Date(login.date).toLocaleDateString("en-US", {
+                            year: "numeric",
+                            month: "long",
+                            day: "numeric",
+                          })}
+                          <span className="flex @md/page:hidden">
+                            {login.ip}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell className="hidden @md/page:table-cell">
+                        {login.ip}
+                      </TableCell>
+                      <TableCell>{login.location}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Active Sessions</CardTitle>
+              <CardDescription>
+                Current active sessions on your account.
+              </CardDescription>
+              <CardAction>
+                <Button variant="outline" size="sm">
+                  <span className="hidden @md/card-header:block">
+                    Manage Sessions
+                  </span>
+                  <span className="block @md/card-header:hidden">Manage</span>
+                </Button>
+              </CardAction>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Device</TableHead>
+                    <TableHead>Browser</TableHead>
+                    <TableHead>OS</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {activeSessions.map((session) => (
+                    <TableRow key={session.device}>
+                      <TableCell>{session.device}</TableCell>
+                      <TableCell>{session.browser}</TableCell>
+                      <TableCell>{session.os}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+function FieldGroup({ children }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className="@container/field-group flex max-w-4xl min-w-0 flex-col gap-8 @3xl:gap-6"
+    >
+      {children}
+    </div>
+  )
+}
+
+function Field({ children, className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field"
+      className={cn(
+        "grid auto-rows-min items-start gap-3 *:data-[slot=label]:col-start-1 *:data-[slot=label]:row-start-1 @3xl/field-group:grid-cols-2 @3xl/field-group:gap-6",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+function FieldControl({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-control"
+      className={cn(
+        "@3xl/field-group:col-start-2 @3xl/field-group:row-span-2 @3xl/field-group:row-start-1 @3xl/field-group:self-start",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+function FieldDescription({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-sm @3xl/field-group:col-start-1 @3xl/field-group:row-start-1 @3xl/field-group:translate-y-6",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx b/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx
new file mode 100644
index 00000000000..f58ca308178
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import {
+  IconCamera,
+  IconChartBar,
+  IconDashboard,
+  IconDatabase,
+  IconFileAi,
+  IconFileDescription,
+  IconFileWord,
+  IconFolder,
+  IconHelp,
+  IconInnerShadowTop,
+  IconListDetails,
+  IconReport,
+  IconSearch,
+  IconSettings,
+  IconUsers,
+} from "@tabler/icons-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+import { NavDocuments } from "@/app/(examples)/dashboard/components/nav-documents"
+import { NavMain } from "@/app/(examples)/dashboard/components/nav-main"
+import { NavSecondary } from "@/app/(examples)/dashboard/components/nav-secondary"
+import { NavUser } from "@/app/(examples)/dashboard/components/nav-user"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Dashboard",
+      url: "#",
+      icon: IconDashboard,
+    },
+    {
+      title: "Lifecycle",
+      url: "#",
+      icon: IconListDetails,
+    },
+    {
+      title: "Analytics",
+      url: "#",
+      icon: IconChartBar,
+    },
+    {
+      title: "Projects",
+      url: "#",
+      icon: IconFolder,
+    },
+    {
+      title: "Team",
+      url: "#",
+      icon: IconUsers,
+    },
+  ],
+  navClouds: [
+    {
+      title: "Capture",
+      icon: IconCamera,
+      isActive: true,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Proposal",
+      icon: IconFileDescription,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Prompts",
+      icon: IconFileAi,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Settings",
+      url: "#",
+      icon: IconSettings,
+    },
+    {
+      title: "Get Help",
+      url: "#",
+      icon: IconHelp,
+    },
+    {
+      title: "Search",
+      url: "#",
+      icon: IconSearch,
+    },
+  ],
+  documents: [
+    {
+      name: "Data Library",
+      url: "#",
+      icon: IconDatabase,
+    },
+    {
+      name: "Reports",
+      url: "#",
+      icon: IconReport,
+    },
+    {
+      name: "Word Assistant",
+      url: "#",
+      icon: IconFileWord,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="offcanvas" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              className="data-[slot=sidebar-menu-button]:!p-1.5"
+            >
+              <a href="#">
+                <IconInnerShadowTop className="!size-5" />
+                <span className="text-base font-semibold">Acme Inc.</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavDocuments items={data.documents} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx b/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
new file mode 100644
index 00000000000..dab596a8139
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
@@ -0,0 +1,292 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--primary)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaInteractive() {
+  const isMobile = useIsMobile()
+  const [timeRange, setTimeRange] = React.useState("90d")
+
+  React.useEffect(() => {
+    if (isMobile) {
+      setTimeRange("7d")
+    }
+  }, [isMobile])
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card className="@container/card">
+      <CardHeader>
+        <CardTitle>Total Visitors</CardTitle>
+        <CardDescription>
+          <span className="hidden @[540px]/card:block">
+            Total for the last 3 months
+          </span>
+          <span className="@[540px]/card:hidden">Last 3 months</span>
+        </CardDescription>
+        <CardAction>
+          <ToggleGroup
+            type="single"
+            value={timeRange}
+            onValueChange={setTimeRange}
+            variant="outline"
+            className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
+          >
+            <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
+            <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
+            <ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
+          </ToggleGroup>
+          <Select value={timeRange} onValueChange={setTimeRange}>
+            <SelectTrigger
+              className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
+              size="sm"
+              aria-label="Select a value"
+            >
+              <SelectValue placeholder="Last 3 months" />
+            </SelectTrigger>
+            <SelectContent className="rounded-xl">
+              <SelectItem value="90d" className="rounded-lg">
+                Last 3 months
+              </SelectItem>
+              <SelectItem value="30d" className="rounded-lg">
+                Last 30 days
+              </SelectItem>
+              <SelectItem value="7d" className="rounded-lg">
+                Last 7 days
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={1.0}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              defaultIndex={isMobile ? -1 : 10}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/components/data-table.tsx b/apps/v4/app/(examples)/dashboard/components/data-table.tsx
new file mode 100644
index 00000000000..1a34e73067d
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/components/data-table.tsx
@@ -0,0 +1,807 @@
+"use client"
+
+import * as React from "react"
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type UniqueIdentifier,
+} from "@dnd-kit/core"
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import {
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight,
+  IconCircleCheckFilled,
+  IconDotsVertical,
+  IconGripVertical,
+  IconLayoutColumns,
+  IconLoader,
+  IconPlus,
+  IconTrendingUp,
+} from "@tabler/icons-react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  Row,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york-v4/ui/table"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+
+export const schema = z.object({
+  id: z.number(),
+  header: z.string(),
+  type: z.string(),
+  status: z.string(),
+  target: z.string(),
+  limit: z.string(),
+  reviewer: z.string(),
+})
+
+// Create a separate component for the drag handle
+function DragHandle({ id }: { id: number }) {
+  const { attributes, listeners } = useSortable({
+    id,
+  })
+
+  return (
+    <Button
+      {...attributes}
+      {...listeners}
+      variant="ghost"
+      size="icon"
+      className="text-muted-foreground size-7 hover:bg-transparent"
+    >
+      <IconGripVertical className="text-muted-foreground size-3" />
+      <span className="sr-only">Drag to reorder</span>
+    </Button>
+  )
+}
+
+const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "drag",
+    header: () => null,
+    cell: ({ row }) => <DragHandle id={row.original.id} />,
+  },
+  {
+    id: "select",
+    header: ({ table }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "header",
+    header: "Header",
+    cell: ({ row }) => {
+      return <TableCellViewer item={row.original} />
+    },
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: "Section Type",
+    cell: ({ row }) => (
+      <div className="w-32">
+        <Badge variant="outline" className="text-muted-foreground px-1.5">
+          {row.original.type}
+        </Badge>
+      </div>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <Badge variant="outline" className="text-muted-foreground px-1.5">
+        {row.original.status === "Done" ? (
+          <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
+        ) : (
+          <IconLoader />
+        )}
+        {row.original.status}
+      </Badge>
+    ),
+  },
+  {
+    accessorKey: "target",
+    header: () => <div className="w-full text-right">Target</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: "Done",
+            error: "Error",
+          })
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-target`} className="sr-only">
+          Target
+        </Label>
+        <Input
+          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          defaultValue={row.original.target}
+          id={`${row.original.id}-target`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: "limit",
+    header: () => <div className="w-full text-right">Limit</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: "Done",
+            error: "Error",
+          })
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-limit`} className="sr-only">
+          Limit
+        </Label>
+        <Input
+          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          defaultValue={row.original.limit}
+          id={`${row.original.id}-limit`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: "reviewer",
+    header: "Reviewer",
+    cell: ({ row }) => {
+      const isAssigned = row.original.reviewer !== "Assign reviewer"
+
+      if (isAssigned) {
+        return row.original.reviewer
+      }
+
+      return (
+        <>
+          <Label htmlFor={`${row.original.id}-reviewer`} className="sr-only">
+            Reviewer
+          </Label>
+          <Select>
+            <SelectTrigger
+              className="w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate"
+              size="sm"
+              id={`${row.original.id}-reviewer`}
+            >
+              <SelectValue placeholder="Assign reviewer" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+              <SelectItem value="Jamik Tashpulatov">
+                Jamik Tashpulatov
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </>
+      )
+    },
+  },
+  {
+    id: "actions",
+    cell: () => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
+            size="icon"
+          >
+            <IconDotsVertical />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-32">
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+          <DropdownMenuItem>Make a copy</DropdownMenuItem>
+          <DropdownMenuItem>Favorite</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+  },
+]
+
+function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id: row.original.id,
+  })
+
+  return (
+    <TableRow
+      data-state={row.getIsSelected() && "selected"}
+      data-dragging={isDragging}
+      ref={setNodeRef}
+      className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition: transition,
+      }}
+    >
+      {row.getVisibleCells().map((cell) => (
+        <TableCell key={cell.id}>
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}
+
+export function DataTable({
+  data: initialData,
+}: {
+  data: z.infer<typeof schema>[]
+}) {
+  const [data, setData] = React.useState(() => initialData)
+  const [rowSelection, setRowSelection] = React.useState({})
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+  const sortableId = React.useId()
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  const dataIds = React.useMemo<UniqueIdentifier[]>(
+    () => data?.map(({ id }) => id) || [],
+    [data]
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination,
+    },
+    getRowId: (row) => row.id.toString(),
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  })
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (active && over && active.id !== over.id) {
+      setData((data) => {
+        const oldIndex = dataIds.indexOf(active.id)
+        const newIndex = dataIds.indexOf(over.id)
+        return arrayMove(data, oldIndex, newIndex)
+      })
+    }
+  }
+
+  return (
+    <Tabs
+      defaultValue="outline"
+      className="w-full flex-col justify-start gap-6"
+    >
+      <div className="flex items-center justify-between px-4 lg:px-6">
+        <Label htmlFor="view-selector" className="sr-only">
+          View
+        </Label>
+        <Select defaultValue="outline">
+          <SelectTrigger
+            className="flex w-fit @4xl/main:hidden"
+            size="sm"
+            id="view-selector"
+          >
+            <SelectValue placeholder="Select a view" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="outline">Outline</SelectItem>
+            <SelectItem value="past-performance">Past Performance</SelectItem>
+            <SelectItem value="key-personnel">Key Personnel</SelectItem>
+            <SelectItem value="focus-documents">Focus Documents</SelectItem>
+          </SelectContent>
+        </Select>
+        <TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
+          <TabsTrigger value="outline">Outline</TabsTrigger>
+          <TabsTrigger value="past-performance">
+            Past Performance <Badge variant="secondary">3</Badge>
+          </TabsTrigger>
+          <TabsTrigger value="key-personnel">
+            Key Personnel <Badge variant="secondary">2</Badge>
+          </TabsTrigger>
+          <TabsTrigger value="focus-documents">Focus Documents</TabsTrigger>
+        </TabsList>
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm">
+                <IconLayoutColumns />
+                <span className="hidden lg:inline">Customize Columns</span>
+                <span className="lg:hidden">Columns</span>
+                <IconChevronDown />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              {table
+                .getAllColumns()
+                .filter(
+                  (column) =>
+                    typeof column.accessorFn !== "undefined" &&
+                    column.getCanHide()
+                )
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) =>
+                        column.toggleVisibility(!!value)
+                      }
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Button variant="outline" size="sm">
+            <IconPlus />
+            <span className="hidden lg:inline">Add Section</span>
+          </Button>
+        </div>
+      </div>
+      <TabsContent
+        value="outline"
+        className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
+      >
+        <div className="overflow-hidden rounded-lg border">
+          <DndContext
+            collisionDetection={closestCenter}
+            modifiers={[restrictToVerticalAxis]}
+            onDragEnd={handleDragEnd}
+            sensors={sensors}
+            id={sortableId}
+          >
+            <Table>
+              <TableHeader className="bg-muted sticky top-0 z-10">
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} colSpan={header.colSpan}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      )
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody className="**:data-[slot=table-cell]:first:w-8">
+                {table.getRowModel().rows?.length ? (
+                  <SortableContext
+                    items={dataIds}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {table.getRowModel().rows.map((row) => (
+                      <DraggableRow key={row.id} row={row} />
+                    ))}
+                  </SortableContext>
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      No results.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </DndContext>
+        </div>
+        <div className="flex items-center justify-between px-4">
+          <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+          <div className="flex w-full items-center gap-8 lg:w-fit">
+            <div className="hidden items-center gap-2 lg:flex">
+              <Label htmlFor="rows-per-page" className="text-sm font-medium">
+                Rows per page
+              </Label>
+              <Select
+                value={`${table.getState().pagination.pageSize}`}
+                onValueChange={(value) => {
+                  table.setPageSize(Number(value))
+                }}
+              >
+                <SelectTrigger size="sm" className="w-20" id="rows-per-page">
+                  <SelectValue
+                    placeholder={table.getState().pagination.pageSize}
+                  />
+                </SelectTrigger>
+                <SelectContent side="top">
+                  {[10, 20, 30, 40, 50].map((pageSize) => (
+                    <SelectItem key={pageSize} value={`${pageSize}`}>
+                      {pageSize}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex w-fit items-center justify-center text-sm font-medium">
+              Page {table.getState().pagination.pageIndex + 1} of{" "}
+              {table.getPageCount()}
+            </div>
+            <div className="ml-auto flex items-center gap-2 lg:ml-0">
+              <Button
+                variant="outline"
+                className="hidden h-8 w-8 p-0 lg:flex"
+                onClick={() => table.setPageIndex(0)}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to first page</span>
+                <IconChevronsLeft />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8"
+                size="icon"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to previous page</span>
+                <IconChevronLeft />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8"
+                size="icon"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to next page</span>
+                <IconChevronRight />
+              </Button>
+              <Button
+                variant="outline"
+                className="hidden size-8 lg:flex"
+                size="icon"
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to last page</span>
+                <IconChevronsRight />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </TabsContent>
+      <TabsContent
+        value="past-performance"
+        className="flex flex-col px-4 lg:px-6"
+      >
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+      <TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+      <TabsContent
+        value="focus-documents"
+        className="flex flex-col px-4 lg:px-6"
+      >
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+    </Tabs>
+  )
+}
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--primary)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
+  const isMobile = useIsMobile()
+
+  return (
+    <Drawer direction={isMobile ? "bottom" : "right"}>
+      <DrawerTrigger asChild>
+        <Button variant="link" className="text-foreground w-fit px-0 text-left">
+          {item.header}
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="gap-1">
+          <DrawerTitle>{item.header}</DrawerTitle>
+          <DrawerDescription>
+            Showing total visitors for the last 6 months
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
+          {!isMobile && (
+            <>
+              <ChartContainer config={chartConfig}>
+                <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                    left: 0,
+                    right: 10,
+                  }}
+                >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                    dataKey="month"
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                    tickFormatter={(value) => value.slice(0, 3)}
+                    hide
+                  />
+                  <ChartTooltip
+                    cursor={false}
+                    content={<ChartTooltipContent indicator="dot" />}
+                  />
+                  <Area
+                    dataKey="mobile"
+                    type="natural"
+                    fill="var(--color-mobile)"
+                    fillOpacity={0.6}
+                    stroke="var(--color-mobile)"
+                    stackId="a"
+                  />
+                  <Area
+                    dataKey="desktop"
+                    type="natural"
+                    fill="var(--color-desktop)"
+                    fillOpacity={0.4}
+                    stroke="var(--color-desktop)"
+                    stackId="a"
+                  />
+                </AreaChart>
+              </ChartContainer>
+              <Separator />
+              <div className="grid gap-2">
+                <div className="flex gap-2 leading-none font-medium">
+                  Trending up by 5.2% this month{" "}
+                  <IconTrendingUp className="size-4" />
+                </div>
+                <div className="text-muted-foreground">
+                  Showing total visitors for the last 6 months. This is just
+                  some random text to test the layout. It spans multiple lines
+                  and should wrap around.
+                </div>
+              </div>
+              <Separator />
+            </>
+          )}
+          <form className="flex flex-col gap-4">
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="header">Header</Label>
+              <Input id="header" defaultValue={item.header} />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="type">Type</Label>
+                <Select defaultValue={item.type}>
+                  <SelectTrigger id="type" className="w-full">
+                    <SelectValue placeholder="Select a type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Table of Contents">
+                      Table of Contents
+                    </SelectItem>
+                    <SelectItem value="Executive Summary">
+                      Executive Summary
+                    </SelectItem>
+                    <SelectItem value="Technical Approach">
+                      Technical Approach
+                    </SelectItem>
+                    <SelectItem value="Design">Design</SelectItem>
+                    <SelectItem value="Capabilities">Capabilities</SelectItem>
+                    <SelectItem value="Focus Documents">
+                      Focus Documents
+                    </SelectItem>
+                    <SelectItem value="Narrative">Narrative</SelectItem>
+                    <SelectItem value="Cover Page">Cover Page</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="status">Status</Label>
+                <Select defaultValue={item.status}>
+                  <SelectTrigger id="status" className="w-full">
+                    <SelectValue placeholder="Select a status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Done">Done</SelectItem>
+                    <SelectItem value="In Progress">In Progress</SelectItem>
+                    <SelectItem value="Not Started">Not Started</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="target">Target</Label>
+                <Input id="target" defaultValue={item.target} />
+              </div>
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="limit">Limit</Label>
+                <Input id="limit" defaultValue={item.limit} />
+              </div>
+            </div>
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="reviewer">Reviewer</Label>
+              <Select defaultValue={item.reviewer}>
+                <SelectTrigger id="reviewer" className="w-full">
+                  <SelectValue placeholder="Select a reviewer" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+                  <SelectItem value="Jamik Tashpulatov">
+                    Jamik Tashpulatov
+                  </SelectItem>
+                  <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </form>
+        </div>
+        <DrawerFooter>
+          <Button>Submit</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Done</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx b/apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx
new file mode 100644
index 00000000000..29c689878f4
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import { IconBrightness } from "@tabler/icons-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export function ModeToggle() {
+  const { setTheme, resolvedTheme } = useTheme()
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+  }, [resolvedTheme, setTheme])
+
+  return (
+    <Button
+      variant="secondary"
+      size="icon"
+      className="group/toggle size-8"
+      onClick={toggleTheme}
+    >
+      <IconBrightness />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx b/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx
new file mode 100644
index 00000000000..503c59938a7
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import {
+  IconDots,
+  IconFolder,
+  IconShare3,
+  IconTrash,
+  type Icon,
+} from "@tabler/icons-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavDocuments({
+  items,
+}: {
+  items: {
+    name: string
+    url: string
+    icon: Icon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Documents</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction
+                  showOnHover
+                  className="data-[state=open]:bg-accent rounded-sm"
+                >
+                  <IconDots />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-24 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <IconFolder />
+                  <span>Open</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <IconShare3 />
+                  <span>Share</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">
+                  <IconTrash />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <IconDots className="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/components/nav-main.tsx b/apps/v4/app/(examples)/dashboard/components/nav-main.tsx
new file mode 100644
index 00000000000..79ffb5cd6e7
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/components/nav-main.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import { IconCirclePlusFilled, IconMail, type Icon } from "@tabler/icons-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: Icon
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupContent className="flex flex-col gap-2">
+        <SidebarMenu>
+          <SidebarMenuItem className="flex items-center gap-2">
+            <SidebarMenuButton
+              tooltip="Quick Create"
+              className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
+            >
+              <IconCirclePlusFilled />
+              <span>Quick Create</span>
+            </SidebarMenuButton>
+            <Button
+              size="icon"
+              className="size-8 group-data-[collapsible=icon]:opacity-0"
+              variant="outline"
+            >
+              <IconMail />
+              <span className="sr-only">Inbox</span>
+            </Button>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton tooltip={item.title}>
+                {item.icon && <item.icon />}
+                <span>{item.title}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx b/apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx
new file mode 100644
index 00000000000..e5177a9693d
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { IconBrightness, type Icon } from "@tabler/icons-react"
+import { useTheme } from "next-themes"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: Icon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  const { resolvedTheme, setTheme } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+          <SidebarMenuItem className="group-data-[collapsible=icon]:hidden">
+            <SidebarMenuButton asChild>
+              <label>
+                <IconBrightness />
+                <span>Dark Mode</span>
+                {mounted ? (
+                  <Switch
+                    className="ml-auto"
+                    checked={resolvedTheme !== "light"}
+                    onCheckedChange={() =>
+                      setTheme(resolvedTheme === "dark" ? "light" : "dark")
+                    }
+                  />
+                ) : (
+                  <Skeleton className="ml-auto h-4 w-8 rounded-full" />
+                )}
+              </label>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/components/nav-user.tsx b/apps/v4/app/(examples)/dashboard/components/nav-user.tsx
new file mode 100644
index 00000000000..4d63e06cf80
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/components/nav-user.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import {
+  IconCreditCard,
+  IconDotsVertical,
+  IconLogout,
+  IconNotification,
+  IconUserCircle,
+} from "@tabler/icons-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg grayscale">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="text-muted-foreground truncate text-xs">
+                  {user.email}
+                </span>
+              </div>
+              <IconDotsVertical className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="text-muted-foreground truncate text-xs">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <IconUserCircle />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <IconCreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <IconNotification />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <IconLogout />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/components/section-cards.tsx b/apps/v4/app/(examples)/dashboard/components/section-cards.tsx
new file mode 100644
index 00000000000..4a69bf5ea8f
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/components/section-cards.tsx
@@ -0,0 +1,102 @@
+import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react"
+
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+
+export function SectionCards() {
+  return (
+    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>Total Revenue</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            $1,250.00
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingUp />
+              +12.5%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Trending up this month <IconTrendingUp className="size-4" />
+          </div>
+          <div className="text-muted-foreground">
+            Visitors for the last 6 months
+          </div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>New Customers</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            1,234
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingDown />
+              -20%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Down 20% this period <IconTrendingDown className="size-4" />
+          </div>
+          <div className="text-muted-foreground">
+            Acquisition needs attention
+          </div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>Active Accounts</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            45,678
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingUp />
+              +12.5%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Strong user retention <IconTrendingUp className="size-4" />
+          </div>
+          <div className="text-muted-foreground">Engagement exceed targets</div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>Growth Rate</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            4.5%
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingUp />
+              +4.5%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Steady performance increase <IconTrendingUp className="size-4" />
+          </div>
+          <div className="text-muted-foreground">Meets growth projections</div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/components/site-header.tsx b/apps/v4/app/(examples)/dashboard/components/site-header.tsx
new file mode 100644
index 00000000000..0796a0aa3ae
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/components/site-header.tsx
@@ -0,0 +1,34 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import { SidebarTrigger } from "@/registry/new-york-v4/ui/sidebar"
+import { ModeToggle } from "@/app/(examples)/dashboard/components/mode-toggle"
+import { ThemeSelector } from "@/app/(examples)/dashboard/components/theme-selector"
+
+export function SiteHeader() {
+  return (
+    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <SidebarTrigger className="-ml-1" />
+        <Separator
+          orientation="vertical"
+          className="mx-2 data-[orientation=vertical]:h-4"
+        />
+        <h1 className="text-base font-medium">Documents</h1>
+        <div className="ml-auto flex items-center gap-2">
+          <Button variant="ghost" asChild size="sm" className="hidden sm:flex">
+            <a
+              href="https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard"
+              rel="noopener noreferrer"
+              target="_blank"
+              className="dark:text-foreground"
+            >
+              GitHub
+            </a>
+          </Button>
+          <ThemeSelector />
+          <ModeToggle />
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx b/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx
new file mode 100644
index 00000000000..40bfd982d08
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { useThemeConfig } from "@/components/active-theme"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+const DEFAULT_THEMES = [
+  {
+    name: "Default",
+    value: "default",
+  },
+  {
+    name: "Blue",
+    value: "blue",
+  },
+  {
+    name: "Green",
+    value: "green",
+  },
+  {
+    name: "Amber",
+    value: "amber",
+  },
+]
+
+const SCALED_THEMES = [
+  {
+    name: "Default",
+    value: "default-scaled",
+  },
+  {
+    name: "Blue",
+    value: "blue-scaled",
+  },
+]
+
+const MONO_THEMES = [
+  {
+    name: "Mono",
+    value: "mono-scaled",
+  },
+]
+
+export function ThemeSelector() {
+  const { activeTheme, setActiveTheme } = useThemeConfig()
+
+  return (
+    <div className="flex items-center gap-2">
+      <Label htmlFor="theme-selector" className="sr-only">
+        Theme
+      </Label>
+      <Select value={activeTheme} onValueChange={setActiveTheme}>
+        <SelectTrigger
+          id="theme-selector"
+          size="sm"
+          className="justify-start *:data-[slot=select-value]:w-12"
+        >
+          <span className="text-muted-foreground hidden sm:block">
+            Select a theme:
+          </span>
+          <span className="text-muted-foreground block sm:hidden">Theme</span>
+          <SelectValue placeholder="Select a theme" />
+        </SelectTrigger>
+        <SelectContent align="end">
+          <SelectGroup>
+            <SelectLabel>Default</SelectLabel>
+            {DEFAULT_THEMES.map((theme) => (
+              <SelectItem key={theme.name} value={theme.value}>
+                {theme.name}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>Scaled</SelectLabel>
+            {SCALED_THEMES.map((theme) => (
+              <SelectItem key={theme.name} value={theme.value}>
+                {theme.name}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+          <SelectGroup>
+            <SelectLabel>Monospaced</SelectLabel>
+            {MONO_THEMES.map((theme) => (
+              <SelectItem key={theme.name} value={theme.value}>
+                {theme.name}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/data.json b/apps/v4/app/(examples)/dashboard/data.json
new file mode 100644
index 00000000000..ec0873641b7
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/data.json
@@ -0,0 +1,614 @@
+[
+  {
+    "id": 1,
+    "header": "Cover page",
+    "type": "Cover page",
+    "status": "In Process",
+    "target": "18",
+    "limit": "5",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 2,
+    "header": "Table of contents",
+    "type": "Table of contents",
+    "status": "Done",
+    "target": "29",
+    "limit": "24",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 3,
+    "header": "Executive summary",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "10",
+    "limit": "13",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 4,
+    "header": "Technical approach",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "27",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 5,
+    "header": "Design",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "2",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 6,
+    "header": "Capabilities",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "20",
+    "limit": "8",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 7,
+    "header": "Integration with existing systems",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "19",
+    "limit": "21",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 8,
+    "header": "Innovation and Advantages",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "25",
+    "limit": "26",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 9,
+    "header": "Overview of EMR's Innovative Solutions",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "7",
+    "limit": "23",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 10,
+    "header": "Advanced Algorithms and Machine Learning",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "30",
+    "limit": "28",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 11,
+    "header": "Adaptive Communication Protocols",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "9",
+    "limit": "31",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 12,
+    "header": "Advantages Over Current Technologies",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "12",
+    "limit": "0",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 13,
+    "header": "Past Performance",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "33",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 14,
+    "header": "Customer Feedback and Satisfaction Levels",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "34",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 15,
+    "header": "Implementation Challenges and Solutions",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "3",
+    "limit": "35",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 16,
+    "header": "Security Measures and Data Protection Policies",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "6",
+    "limit": "36",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 17,
+    "header": "Scalability and Future Proofing",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "4",
+    "limit": "37",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 18,
+    "header": "Cost-Benefit Analysis",
+    "type": "Plain language",
+    "status": "Done",
+    "target": "14",
+    "limit": "38",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 19,
+    "header": "User Training and Onboarding Experience",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "17",
+    "limit": "39",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 20,
+    "header": "Future Development Roadmap",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "11",
+    "limit": "40",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 21,
+    "header": "System Architecture Overview",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "24",
+    "limit": "18",
+    "reviewer": "Maya Johnson"
+  },
+  {
+    "id": 22,
+    "header": "Risk Management Plan",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "22",
+    "reviewer": "Carlos Rodriguez"
+  },
+  {
+    "id": 23,
+    "header": "Compliance Documentation",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "31",
+    "limit": "27",
+    "reviewer": "Sarah Chen"
+  },
+  {
+    "id": 24,
+    "header": "API Documentation",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "8",
+    "limit": "12",
+    "reviewer": "Raj Patel"
+  },
+  {
+    "id": 25,
+    "header": "User Interface Mockups",
+    "type": "Visual",
+    "status": "In Process",
+    "target": "19",
+    "limit": "25",
+    "reviewer": "Leila Ahmadi"
+  },
+  {
+    "id": 26,
+    "header": "Database Schema",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "22",
+    "limit": "20",
+    "reviewer": "Thomas Wilson"
+  },
+  {
+    "id": 27,
+    "header": "Testing Methodology",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "17",
+    "limit": "14",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 28,
+    "header": "Deployment Strategy",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "26",
+    "limit": "30",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 29,
+    "header": "Budget Breakdown",
+    "type": "Financial",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 30,
+    "header": "Market Analysis",
+    "type": "Research",
+    "status": "Done",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Sophia Martinez"
+  },
+  {
+    "id": 31,
+    "header": "Competitor Comparison",
+    "type": "Research",
+    "status": "In Process",
+    "target": "21",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 32,
+    "header": "Maintenance Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "23",
+    "reviewer": "Alex Thompson"
+  },
+  {
+    "id": 33,
+    "header": "User Personas",
+    "type": "Research",
+    "status": "In Process",
+    "target": "27",
+    "limit": "24",
+    "reviewer": "Nina Patel"
+  },
+  {
+    "id": 34,
+    "header": "Accessibility Compliance",
+    "type": "Legal",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 35,
+    "header": "Performance Metrics",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "David Kim"
+  },
+  {
+    "id": 36,
+    "header": "Disaster Recovery Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 37,
+    "header": "Third-party Integrations",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 38,
+    "header": "User Feedback Summary",
+    "type": "Research",
+    "status": "Done",
+    "target": "20",
+    "limit": "15",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 39,
+    "header": "Localization Strategy",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "12",
+    "limit": "19",
+    "reviewer": "Maria Garcia"
+  },
+  {
+    "id": 40,
+    "header": "Mobile Compatibility",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "James Wilson"
+  },
+  {
+    "id": 41,
+    "header": "Data Migration Plan",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 42,
+    "header": "Quality Assurance Protocols",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Priya Singh"
+  },
+  {
+    "id": 43,
+    "header": "Stakeholder Analysis",
+    "type": "Research",
+    "status": "In Process",
+    "target": "11",
+    "limit": "14",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 44,
+    "header": "Environmental Impact Assessment",
+    "type": "Research",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 45,
+    "header": "Intellectual Property Rights",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "17",
+    "limit": "20",
+    "reviewer": "Sarah Johnson"
+  },
+  {
+    "id": 46,
+    "header": "Customer Support Framework",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 47,
+    "header": "Version Control Strategy",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 48,
+    "header": "Continuous Integration Pipeline",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Michael Chen"
+  },
+  {
+    "id": 49,
+    "header": "Regulatory Compliance",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 50,
+    "header": "User Authentication System",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 51,
+    "header": "Data Analytics Framework",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 52,
+    "header": "Cloud Infrastructure",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 53,
+    "header": "Network Security Measures",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Lisa Wong"
+  },
+  {
+    "id": 54,
+    "header": "Project Timeline",
+    "type": "Planning",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 55,
+    "header": "Resource Allocation",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 56,
+    "header": "Team Structure and Roles",
+    "type": "Planning",
+    "status": "Done",
+    "target": "20",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 57,
+    "header": "Communication Protocols",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 58,
+    "header": "Success Metrics",
+    "type": "Planning",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 59,
+    "header": "Internationalization Support",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 60,
+    "header": "Backup and Recovery Procedures",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 61,
+    "header": "Monitoring and Alerting System",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Daniel Park"
+  },
+  {
+    "id": 62,
+    "header": "Code Review Guidelines",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "12",
+    "limit": "15",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 63,
+    "header": "Documentation Standards",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 64,
+    "header": "Release Management Process",
+    "type": "Planning",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 65,
+    "header": "Feature Prioritization Matrix",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Emma Davis"
+  },
+  {
+    "id": 66,
+    "header": "Technical Debt Assessment",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 67,
+    "header": "Capacity Planning",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 68,
+    "header": "Service Level Agreements",
+    "type": "Legal",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Assign reviewer"
+  }
+]
diff --git a/apps/v4/app/(examples)/dashboard/layout.tsx b/apps/v4/app/(examples)/dashboard/layout.tsx
new file mode 100644
index 00000000000..da69ec0595d
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/layout.tsx
@@ -0,0 +1,36 @@
+import { cookies } from "next/headers"
+
+import {
+  SidebarInset,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+import { AppSidebar } from "@/app/(examples)/dashboard/components/app-sidebar"
+import { SiteHeader } from "@/app/(examples)/dashboard/components/site-header"
+
+import "@/app/(examples)/dashboard/theme.css"
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const cookieStore = await cookies()
+  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true"
+
+  return (
+    <SidebarProvider
+      defaultOpen={defaultOpen}
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 72)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">{children}</div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/page.tsx b/apps/v4/app/(examples)/dashboard/page.tsx
new file mode 100644
index 00000000000..e6ea8689389
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/page.tsx
@@ -0,0 +1,18 @@
+import { ChartAreaInteractive } from "@/app/(examples)/dashboard/components/chart-area-interactive"
+import { DataTable } from "@/app/(examples)/dashboard/components/data-table"
+import { SectionCards } from "@/app/(examples)/dashboard/components/section-cards"
+import data from "@/app/(examples)/dashboard/data.json"
+
+export default function Page() {
+  return (
+    <div className="@container/main flex flex-1 flex-col gap-2">
+      <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+        <SectionCards />
+        <div className="px-4 lg:px-6">
+          <ChartAreaInteractive />
+        </div>
+        <DataTable data={data} />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(examples)/dashboard/theme.css b/apps/v4/app/(examples)/dashboard/theme.css
new file mode 100644
index 00000000000..fd549d66776
--- /dev/null
+++ b/apps/v4/app/(examples)/dashboard/theme.css
@@ -0,0 +1,105 @@
+body {
+  @apply overscroll-none bg-transparent;
+}
+
+:root {
+  --font-sans: var(--font-inter);
+  --header-height: calc(var(--spacing) * 12 + 1px);
+}
+
+.theme-scaled {
+  @media (min-width: 1024px) {
+    --radius: 0.6rem;
+    --text-lg: 1.05rem;
+    --text-base: 0.85rem;
+    --text-sm: 0.8rem;
+    --spacing: 0.222222rem;
+  }
+
+  [data-slot="card"] {
+    --spacing: 0.16rem;
+  }
+
+  [data-slot="select-trigger"],
+  [data-slot="toggle-group-item"] {
+    --spacing: 0.222222rem;
+  }
+}
+
+.theme-default,
+.theme-default-scaled {
+  --primary: var(--color-neutral-600);
+  --primary-foreground: var(--color-neutral-50);
+
+  @variant dark {
+    --primary: var(--color-neutral-500);
+    --primary-foreground: var(--color-neutral-50);
+  }
+}
+
+.theme-blue,
+.theme-blue-scaled {
+  --primary: var(--color-blue-600);
+  --primary-foreground: var(--color-blue-50);
+
+  @variant dark {
+    --primary: var(--color-blue-500);
+    --primary-foreground: var(--color-blue-50);
+  }
+}
+
+.theme-green,
+.theme-green-scaled {
+  --primary: var(--color-lime-600);
+  --primary-foreground: var(--color-lime-50);
+
+  @variant dark {
+    --primary: var(--color-lime-600);
+    --primary-foreground: var(--color-lime-50);
+  }
+}
+
+.theme-amber,
+.theme-amber-scaled {
+  --primary: var(--color-amber-600);
+  --primary-foreground: var(--color-amber-50);
+
+  @variant dark {
+    --primary: var(--color-amber-500);
+    --primary-foreground: var(--color-amber-50);
+  }
+}
+
+.theme-mono,
+.theme-mono-scaled {
+  --font-sans: var(--font-mono);
+  --primary: var(--color-neutral-600);
+  --primary-foreground: var(--color-neutral-50);
+
+  @variant dark {
+    --primary: var(--color-neutral-500);
+    --primary-foreground: var(--color-neutral-50);
+  }
+
+  .rounded-xs,
+  .rounded-sm,
+  .rounded-md,
+  .rounded-lg,
+  .rounded-xl {
+    @apply !rounded-none;
+    border-radius: 0;
+  }
+
+  .shadow-xs,
+  .shadow-sm,
+  .shadow-md,
+  .shadow-lg,
+  .shadow-xl {
+    @apply !shadow-none;
+  }
+
+  [data-slot="toggle-group"],
+  [data-slot="toggle-group-item"] {
+    @apply !rounded-none !shadow-none;
+  }
+}
diff --git a/apps/v4/app/(internal)/sink/components/accordion-demo.tsx b/apps/v4/app/(internal)/sink/components/accordion-demo.tsx
new file mode 100644
index 00000000000..1f616ac8588
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/accordion-demo.tsx
@@ -0,0 +1,72 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/registry/new-york-v4/ui/accordion"
+
+export function AccordionDemo() {
+  return (
+    <div className="grid w-full max-w-xl gap-4">
+      <Accordion type="single" collapsible className="w-full">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Is it accessible?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It adheres to the WAI-ARIA design pattern.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Is it styled?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It comes with default styles that matches the other
+            components&apos; aesthetic.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Is it animated?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It&apos;s animated by default, but you can disable it if you
+            prefer.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+      <Accordion type="single" collapsible className="w-full">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>
+            What are the key considerations when implementing a comprehensive
+            enterprise-level authentication system?
+          </AccordionTrigger>
+          <AccordionContent>
+            Implementing a robust enterprise authentication system requires
+            careful consideration of multiple factors. This includes secure
+            password hashing and storage, multi-factor authentication (MFA)
+            implementation, session management, OAuth2 and SSO integration,
+            regular security audits, rate limiting to prevent brute force
+            attacks, and maintaining detailed audit logs. Additionally,
+            you&apos;ll need to consider scalability, performance impact, and
+            compliance with relevant data protection regulations such as GDPR or
+            HIPAA.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>
+            How does modern distributed system architecture handle eventual
+            consistency and data synchronization across multiple regions?
+          </AccordionTrigger>
+          <AccordionContent>
+            Modern distributed systems employ various strategies to maintain
+            data consistency across regions. This often involves using
+            techniques like CRDT (Conflict-Free Replicated Data Types), vector
+            clocks, and gossip protocols. Systems might implement event sourcing
+            patterns, utilize message queues for asynchronous updates, and
+            employ sophisticated conflict resolution strategies. Popular
+            solutions like Amazon&apos;s DynamoDB and Google&apos;s Spanner
+            demonstrate different approaches to solving these challenges,
+            balancing between consistency, availability, and partition tolerance
+            as described in the CAP theorem.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/alert-demo.tsx b/apps/v4/app/(internal)/sink/components/alert-demo.tsx
new file mode 100644
index 00000000000..9c893efc22a
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/alert-demo.tsx
@@ -0,0 +1,115 @@
+import {
+  AlertCircleIcon,
+  BookmarkCheckIcon,
+  CheckCircle2Icon,
+  GiftIcon,
+  PopcornIcon,
+  ShieldAlertIcon,
+} from "lucide-react"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york-v4/ui/alert"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export function AlertDemo() {
+  return (
+    <div className="grid max-w-xl items-start gap-4">
+      <Alert>
+        <CheckCircle2Icon />
+        <AlertTitle>Success! Your changes have been saved</AlertTitle>
+        <AlertDescription>
+          This is an alert with icon, title and description.
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <BookmarkCheckIcon>Heads up!</BookmarkCheckIcon>
+        <AlertDescription>
+          This one has an icon and a description only. No title.
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <AlertDescription>
+          This one has a description only. No title. No icon.
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <PopcornIcon />
+        <AlertTitle>Let&apos;s try one with icon and title.</AlertTitle>
+      </Alert>
+      <Alert>
+        <ShieldAlertIcon />
+        <AlertTitle>
+          This is a very long alert title that demonstrates how the component
+          handles extended text content and potentially wraps across multiple
+          lines
+        </AlertTitle>
+      </Alert>
+      <Alert>
+        <GiftIcon />
+        <AlertDescription>
+          This is a very long alert description that demonstrates how the
+          component handles extended text content and potentially wraps across
+          multiple lines
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <AlertCircleIcon />
+        <AlertTitle>
+          This is an extremely long alert title that spans multiple lines to
+          demonstrate how the component handles very lengthy headings while
+          maintaining readability and proper text wrapping behavior
+        </AlertTitle>
+        <AlertDescription>
+          This is an equally long description that contains detailed information
+          about the alert. It shows how the component can accommodate extensive
+          content while preserving proper spacing, alignment, and readability
+          across different screen sizes and viewport widths. This helps ensure
+          the user experience remains consistent regardless of the content
+          length.
+        </AlertDescription>
+      </Alert>
+      <Alert variant="destructive">
+        <AlertCircleIcon />
+        <AlertTitle>Something went wrong!</AlertTitle>
+        <AlertDescription>
+          Your session has expired. Please log in again.
+        </AlertDescription>
+      </Alert>
+      <Alert variant="destructive">
+        <AlertCircleIcon />
+        <AlertTitle>Unable to process your payment.</AlertTitle>
+        <AlertDescription>
+          <p>Please verify your billing information and try again.</p>
+          <ul className="list-inside list-disc text-sm">
+            <li>Check your card details</li>
+            <li>Ensure sufficient funds</li>
+            <li>Verify billing address</li>
+          </ul>
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <CheckCircle2Icon />
+        <AlertTitle className="max-w-[calc(100%-4rem)] overflow-ellipsis">
+          The selected emails have been marked as spam.
+        </AlertTitle>
+        <Button
+          size="sm"
+          variant="outline"
+          className="absolute top-2.5 right-3 h-6 shadow-none"
+        >
+          Undo
+        </Button>
+      </Alert>
+      <Alert className="border-amber-50 bg-amber-50 text-amber-900 dark:border-amber-950 dark:bg-amber-950 dark:text-amber-100">
+        <CheckCircle2Icon />
+        <AlertTitle>Plot Twist: This Alert is Actually Amber!</AlertTitle>
+        <AlertDescription>
+          This one has custom colors for light and dark mode.
+        </AlertDescription>
+      </Alert>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx b/apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx
new file mode 100644
index 00000000000..a9fe2a35116
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/new-york-v4/ui/alert-dialog"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Show Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/app-sidebar.tsx b/apps/v4/app/(internal)/sink/components/app-sidebar.tsx
new file mode 100644
index 00000000000..5743355d92a
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/app-sidebar.tsx
@@ -0,0 +1,249 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  ChevronRightIcon,
+  Command,
+  GalleryVerticalEnd,
+  Search,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { Index } from "@/registry/__index__"
+import { NavUser } from "@/registry/new-york-v4/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "@/registry/new-york-v4/blocks/sidebar-07/components/team-switcher"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: GalleryVerticalEnd,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  components: Object.values(Index)
+    .filter((item) => item.type === "registry:ui")
+    .concat([
+      {
+        name: "combobox",
+      },
+    ])
+    .sort((a, b) => a.name.localeCompare(b.name)),
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+        <SidebarGroup className="py-0 group-data-[collapsible=icon]:hidden">
+          <SidebarGroupContent>
+            <form className="relative">
+              <Label htmlFor="search" className="sr-only">
+                Search
+              </Label>
+              <SidebarInput
+                id="search"
+                placeholder="Search the docs..."
+                className="pl-8"
+              />
+              <Search className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+            </form>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Platform</SidebarGroupLabel>
+          <SidebarMenu>
+            {data.navMain.map((item) => (
+              <Collapsible
+                key={item.title}
+                asChild
+                defaultOpen={item.isActive}
+                className="group/collapsible"
+              >
+                <SidebarMenuItem>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuButton tooltip={item.title}>
+                      {item.icon && <item.icon />}
+                      <span>{item.title}</span>
+                      <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.items?.map((subItem) => (
+                        <SidebarMenuSubItem key={subItem.title}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+        <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+          <SidebarGroupLabel>Components</SidebarGroupLabel>
+          <SidebarMenu>
+            {data.components.map((item) => (
+              <SidebarMenuItem key={item.name}>
+                <SidebarMenuButton asChild>
+                  <Link href={`/sink#${item.name}`}>
+                    <span>{getComponentName(item.name)}</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function getComponentName(name: string) {
+  // convert kebab-case to title case
+  return name.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase())
+}
diff --git a/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx b/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx
new file mode 100644
index 00000000000..b995debb827
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image"
+
+import { AspectRatio } from "@/registry/new-york-v4/ui/aspect-ratio"
+
+export function AspectRatioDemo() {
+  return (
+    <div className="grid w-full max-w-sm items-start gap-4">
+      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+        <Image
+          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+          alt="Photo by Drew Beamer"
+          fill
+          className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
+        />
+      </AspectRatio>
+      <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
+        <Image
+          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+          alt="Photo by Drew Beamer"
+          fill
+          className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
+        />
+      </AspectRatio>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/avatar-demo.tsx b/apps/v4/app/(internal)/sink/components/avatar-demo.tsx
new file mode 100644
index 00000000000..d183633aa5d
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/avatar-demo.tsx
@@ -0,0 +1,81 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+
+export function AvatarDemo() {
+  return (
+    <div className="flex flex-row flex-wrap items-center gap-4">
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <Avatar className="size-12">
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <Avatar className="rounded-lg">
+        <AvatarImage
+          src="https://github.com/evilrabbit.png"
+          alt="@evilrabbit"
+        />
+        <AvatarFallback>ER</AvatarFallback>
+      </Avatar>
+      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+      </div>
+      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+      </div>
+      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 hover:space-x-1 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale *:data-[slot=avatar]:transition-all *:data-[slot=avatar]:duration-300 *:data-[slot=avatar]:ease-in-out">
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/badge-demo.tsx b/apps/v4/app/(internal)/sink/components/badge-demo.tsx
new file mode 100644
index 00000000000..73acd07a3a8
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/badge-demo.tsx
@@ -0,0 +1,61 @@
+import { AlertCircleIcon, ArrowRightIcon, CheckIcon } from "lucide-react"
+
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+
+export function BadgeDemo() {
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div className="flex w-full flex-wrap gap-2">
+        <Badge>Badge</Badge>
+        <Badge variant="secondary">Secondary</Badge>
+        <Badge variant="destructive">Destructive</Badge>
+        <Badge variant="outline">Outline</Badge>
+        <Badge variant="outline">
+          <CheckIcon />
+          Badge
+        </Badge>
+        <Badge variant="destructive">
+          <AlertCircleIcon />
+          Alert
+        </Badge>
+        <Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
+          8
+        </Badge>
+        <Badge
+          className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
+          variant="destructive"
+        >
+          99
+        </Badge>
+        <Badge
+          className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
+          variant="outline"
+        >
+          20+
+        </Badge>
+      </div>
+      <div className="flex w-full flex-wrap gap-2">
+        <Badge asChild>
+          <a href="#">
+            Link <ArrowRightIcon />
+          </a>
+        </Badge>
+        <Badge asChild variant="secondary">
+          <a href="#">
+            Link <ArrowRightIcon />
+          </a>
+        </Badge>
+        <Badge asChild variant="destructive">
+          <a href="#">
+            Link <ArrowRightIcon />
+          </a>
+        </Badge>
+        <Badge asChild variant="outline">
+          <a href="#">
+            Link <ArrowRightIcon />
+          </a>
+        </Badge>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/breadcrumb-demo.tsx b/apps/v4/app/(internal)/sink/components/breadcrumb-demo.tsx
new file mode 100644
index 00000000000..058579162c9
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/breadcrumb-demo.tsx
@@ -0,0 +1,49 @@
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+export function BreadcrumbDemo() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1">
+              <BreadcrumbEllipsis className="h-4 w-4" />
+              <span className="sr-only">Toggle menu</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/button-demo.tsx b/apps/v4/app/(internal)/sink/components/button-demo.tsx
new file mode 100644
index 00000000000..78cb85a888f
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/button-demo.tsx
@@ -0,0 +1,84 @@
+import { ArrowRightIcon, Loader2Icon, SendIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export function ButtonDemo() {
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-wrap items-center gap-2 md:flex-row">
+        <Button>Button</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="destructive">Destructive</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="link">Link</Button>
+        <Button variant="outline">
+          <SendIcon /> Send
+        </Button>
+        <Button variant="outline">
+          Learn More <ArrowRightIcon />
+        </Button>
+        <Button disabled variant="outline">
+          <Loader2Icon className="animate-spin" />
+          Please wait
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2 md:flex-row">
+        <Button size="sm">Small</Button>
+        <Button variant="outline" size="sm">
+          Outline
+        </Button>
+        <Button variant="ghost" size="sm">
+          Ghost
+        </Button>
+        <Button variant="destructive" size="sm">
+          Destructive
+        </Button>
+        <Button variant="secondary" size="sm">
+          Secondary
+        </Button>
+        <Button variant="link" size="sm">
+          Link
+        </Button>
+        <Button variant="outline" size="sm">
+          <SendIcon /> Send
+        </Button>
+        <Button variant="outline" size="sm">
+          Learn More <ArrowRightIcon />
+        </Button>
+        <Button disabled size="sm" variant="outline">
+          <Loader2Icon className="animate-spin" />
+          Please wait
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2 md:flex-row">
+        <Button size="lg">Large</Button>
+        <Button variant="outline" size="lg">
+          Outline
+        </Button>
+        <Button variant="ghost" size="lg">
+          Ghost
+        </Button>
+        <Button variant="destructive" size="lg">
+          Destructive
+        </Button>
+        <Button variant="secondary" size="lg">
+          Secondary
+        </Button>
+        <Button variant="link" size="lg">
+          Link
+        </Button>
+        <Button variant="outline" size="lg">
+          <SendIcon /> Send
+        </Button>
+        <Button variant="outline" size="lg">
+          Learn More <ArrowRightIcon />
+        </Button>
+        <Button disabled size="lg" variant="outline">
+          <Loader2Icon className="animate-spin" />
+          Please wait
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/calendar-demo.tsx b/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
new file mode 100644
index 00000000000..2cb1b3346ce
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import { addDays } from "date-fns"
+import { Clock2Icon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+import { es } from "react-day-picker/locale"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar, CalendarDayButton } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export function CalendarDemo() {
+  return (
+    <div className="bg-muted flex flex-1 flex-col flex-wrap justify-center gap-8 p-10 lg:flex-row">
+      <CalendarSingle />
+      <CalendarMultiple />
+      <CalendarRange />
+      <CalendarBookedDates />
+      <CalendarRangeMultipleMonths />
+      <CalendarWithTime />
+      <CalendarWithPresets />
+      <CalendarCustomDays />
+    </div>
+  )
+}
+
+function CalendarSingle() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
+  )
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">Single Selection</div>
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+        className="rounded-lg border shadow-sm"
+        captionLayout="dropdown"
+      />
+    </div>
+  )
+}
+
+function CalendarMultiple() {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">Multiple Selection</div>
+      <Calendar mode="multiple" className="rounded-lg border shadow-sm" />
+    </div>
+  )
+}
+
+function CalendarRange() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 0, 12),
+    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">Range Selection</div>
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
+        className="rounded-lg border shadow-sm"
+      />
+    </div>
+  )
+}
+
+function CalendarRangeMultipleMonths() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 3, 12),
+    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">Range Selection + Locale</div>
+      <Calendar
+        mode="range"
+        defaultMonth={range?.from}
+        selected={range}
+        onSelect={setRange}
+        numberOfMonths={3}
+        locale={es}
+        fixedWeeks
+        className="rounded-lg border shadow-sm"
+      />
+    </div>
+  )
+}
+
+function CalendarBookedDates() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), 1, 3)
+  )
+  const bookedDates = Array.from(
+    { length: 15 },
+    (_, i) => new Date(new Date().getFullYear(), new Date().getMonth(), 12 + i)
+  )
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">With booked dates</div>
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        disabled={bookedDates}
+        modifiers={{
+          booked: bookedDates,
+        }}
+        modifiersClassNames={{
+          booked: "[&>button]:line-through opacity-100",
+        }}
+        className="rounded-lg border shadow-sm"
+      />
+    </div>
+  )
+}
+
+function CalendarWithTime() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">With Time Input</div>
+      <Card className="w-fit py-4">
+        <CardContent className="px-4">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            className="p-0"
+          />
+        </CardContent>
+        <CardFooter className="flex flex-col gap-3 border-t px-4 pt-4">
+          <div className="flex w-full flex-col gap-2">
+            <Label htmlFor="time-from">Start Time</Label>
+            <div className="relative flex w-full items-center gap-2">
+              <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+              <Input
+                id="time-from"
+                type="time"
+                step="1"
+                defaultValue="10:30:00"
+                className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+              />
+            </div>
+          </div>
+          <div className="flex w-full flex-col gap-2">
+            <Label htmlFor="time-to">End Time</Label>
+            <div className="relative flex w-full items-center gap-2">
+              <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+              <Input
+                id="time-to"
+                type="time"
+                step="1"
+                defaultValue="12:30:00"
+                className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+              />
+            </div>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
+
+function CalendarCustomDays() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 11, 8),
+    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-2 text-center text-sm">
+        With Custom Days and Formatters
+      </div>
+      <Calendar
+        mode="range"
+        defaultMonth={range?.from}
+        selected={range}
+        onSelect={setRange}
+        numberOfMonths={1}
+        captionLayout="dropdown"
+        className="rounded-lg border shadow-sm [--cell-size:--spacing(12)]"
+        formatters={{
+          formatMonthDropdown: (date) => {
+            return date.toLocaleString("default", { month: "long" })
+          },
+        }}
+        components={{
+          DayButton: ({ children, modifiers, day, ...props }) => {
+            const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+            return (
+              <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+                {children}
+                {!modifiers.outside && (
+                  <span>{isWeekend ? "$120" : "$100"}</span>
+                )}
+              </CalendarDayButton>
+            )
+          },
+        }}
+      />
+    </div>
+  )
+}
+
+function CalendarWithPresets() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), 1, 12)
+  )
+  const [currentMonth, setCurrentMonth] = React.useState<Date>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 1)
+  )
+
+  return (
+    <div className="flex max-w-[300px] flex-col gap-3">
+      <div className="px-2 text-center text-sm">With Presets</div>
+      <Card className="w-fit py-4">
+        <CardContent className="px-4">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            month={currentMonth}
+            onMonthChange={setCurrentMonth}
+            fixedWeeks
+            className="p-0 [--cell-size:--spacing(9.5)]"
+          />
+        </CardContent>
+        <CardFooter className="flex flex-wrap gap-2 border-t px-4 pt-4">
+          {[
+            { label: "Today", value: 0 },
+            { label: "Tomorrow", value: 1 },
+            { label: "In 3 days", value: 3 },
+            { label: "In a week", value: 7 },
+            { label: "In 2 weeks", value: 14 },
+          ].map((preset) => (
+            <Button
+              key={preset.value}
+              variant="outline"
+              size="sm"
+              className="flex-1"
+              onClick={() => {
+                const newDate = addDays(new Date(), preset.value)
+                setDate(newDate)
+                setCurrentMonth(
+                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)
+                )
+              }}
+            >
+              {preset.label}
+            </Button>
+          ))}
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/card-demo.tsx b/apps/v4/app/(internal)/sink/components/card-demo.tsx
new file mode 100644
index 00000000000..ff2f0063e7f
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/card-demo.tsx
@@ -0,0 +1,191 @@
+import Image from "next/image"
+import { BathIcon, BedIcon, LandPlotIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export function CardDemo() {
+  return (
+    <div className="flex flex-col items-start gap-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>Login to your account</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>
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter className="flex-col gap-2">
+          <Button type="submit" className="w-full">
+            Login
+          </Button>
+          <Button variant="outline" className="w-full">
+            Login with Google
+          </Button>
+          <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>
+        </CardFooter>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Meeting Notes</CardTitle>
+          <CardDescription>
+            Transcript from the meeting with the client.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="text-sm">
+          <p>
+            Client requested dashboard redesign with focus on mobile
+            responsiveness.
+          </p>
+          <ol className="mt-4 flex list-decimal flex-col gap-2 pl-6">
+            <li>New analytics widgets for daily/weekly metrics</li>
+            <li>Simplified navigation menu</li>
+            <li>Dark mode support</li>
+            <li>Timeline: 6 weeks</li>
+            <li>Follow-up meeting scheduled for next Tuesday</li>
+          </ol>
+        </CardContent>
+        <CardFooter>
+          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <Avatar>
+              <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
+              <AvatarFallback>LR</AvatarFallback>
+            </Avatar>
+            <Avatar>
+              <AvatarImage
+                src="https://github.com/evilrabbit.png"
+                alt="@evilrabbit"
+              />
+              <AvatarFallback>ER</AvatarFallback>
+            </Avatar>
+          </div>
+        </CardFooter>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Is this an image?</CardTitle>
+          <CardDescription>This is a card with an image.</CardDescription>
+        </CardHeader>
+        <CardContent className="px-0">
+          <Image
+            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+            alt="Photo by Drew Beamer"
+            className="aspect-video object-cover"
+            width={500}
+            height={500}
+          />
+        </CardContent>
+        <CardFooter className="flex items-center gap-2">
+          <Badge variant="outline">
+            <BedIcon /> 4
+          </Badge>
+          <Badge variant="outline">
+            <BathIcon /> 2
+          </Badge>
+          <Badge variant="outline">
+            <LandPlotIcon /> 350m²
+          </Badge>
+          <div className="ml-auto font-medium tabular-nums">$135,000</div>
+        </CardFooter>
+      </Card>
+      <div className="flex w-full flex-wrap items-start gap-8 md:*:data-[slot=card]:basis-1/4">
+        <Card>
+          <CardContent className="text-sm">Content Only</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Header Only</CardTitle>
+            <CardDescription>
+              This is a card with a header and a description.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Header and Content</CardTitle>
+            <CardDescription>
+              This is a card with a header and a content.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="text-sm">Content</CardContent>
+        </Card>
+        <Card>
+          <CardFooter className="text-sm">Footer Only</CardFooter>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Header + Footer</CardTitle>
+            <CardDescription>
+              This is a card with a header and a footer.
+            </CardDescription>
+          </CardHeader>
+          <CardFooter className="text-sm">Footer</CardFooter>
+        </Card>
+        <Card>
+          <CardContent className="text-sm">Content</CardContent>
+          <CardFooter className="text-sm">Footer</CardFooter>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Header + Footer</CardTitle>
+            <CardDescription>
+              This is a card with a header and a footer.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="text-sm">Content</CardContent>
+          <CardFooter className="text-sm">Footer</CardFooter>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/carousel-demo.tsx b/apps/v4/app/(internal)/sink/components/carousel-demo.tsx
new file mode 100644
index 00000000000..88568b08062
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/carousel-demo.tsx
@@ -0,0 +1,73 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york-v4/ui/carousel"
+
+export function CarouselDemo() {
+  return (
+    <div className="hidden w-full flex-col items-center gap-4 @4xl:flex">
+      <Carousel className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex">
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+      <Carousel
+        className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex"
+        opts={{
+          align: "start",
+        }}
+      >
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-3xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+      <Carousel className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex">
+        <CarouselContent className="-ml-1">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index} className="pl-1 md:basis-1/2">
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-2xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx b/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
new file mode 100644
index 00000000000..4cbb2896d2c
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A simple area chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaDemo() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx b/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
new file mode 100644
index 00000000000..3b53863b007
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A multiple bar chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarDemo() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dashed" />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx b/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
new file mode 100644
index 00000000000..1e622051c29
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A mixed bar chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarMixed() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Mixed</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            margin={{
+              left: 0,
+            }}
+          >
+            <YAxis
+              dataKey="browser"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) =>
+                chartConfig[value as keyof typeof chartConfig]?.label
+              }
+            />
+            <XAxis dataKey="visitors" type="number" hide />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="visitors" layout="vertical" radius={5} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/chart-demo.tsx b/apps/v4/app/(internal)/sink/components/chart-demo.tsx
new file mode 100644
index 00000000000..a17d80bcb1d
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/chart-demo.tsx
@@ -0,0 +1,17 @@
+import { ChartBarMixed } from "@/registry/new-york-v4/charts/chart-bar-mixed"
+import { ChartAreaDemo } from "@/app/(internal)/sink/components/chart-area-demo"
+import { ChartBarDemo } from "@/app/(internal)/sink/components/chart-bar-demo"
+import { ChartLineDemo } from "@/app/(internal)/sink/components/chart-line-demo"
+
+export function ChartDemo() {
+  return (
+    <div className="grid w-full max-w-screen-2xl gap-4 *:data-[slot=card]:flex-1 @2xl:grid-cols-2 @6xl:grid-cols-3">
+      <ChartAreaDemo />
+      <ChartBarDemo />
+      <ChartBarMixed />
+      <div className="@6xl:hidden">
+        <ChartLineDemo />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx b/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
new file mode 100644
index 00000000000..cc9f6872cf8
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A multiple line chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineDemo() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Line
+              dataKey="desktop"
+              type="monotone"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="mobile"
+              type="monotone"
+              stroke="var(--color-mobile)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx b/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx
new file mode 100644
index 00000000000..3de6a07bcb2
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export function CheckboxDemo() {
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-3">
+        <Checkbox id="terms" />
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+      <div className="flex items-start gap-3">
+        <Checkbox id="terms-2" defaultChecked />
+        <div className="grid gap-2">
+          <Label htmlFor="terms-2">Accept terms and conditions</Label>
+          <p className="text-muted-foreground text-sm">
+            By clicking this checkbox, you agree to the terms and conditions.
+          </p>
+        </div>
+      </div>
+      <div className="flex items-start gap-3">
+        <Checkbox id="toggle" disabled />
+        <Label htmlFor="toggle">Enable notifications</Label>
+      </div>
+      <Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
+        <Checkbox
+          id="toggle-2"
+          defaultChecked
+          className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+        />
+        <div className="grid gap-1.5 font-normal">
+          <p className="text-sm leading-none font-medium">
+            Enable notifications
+          </p>
+          <p className="text-muted-foreground text-sm">
+            You can enable or disable notifications at any time.
+          </p>
+        </div>
+      </Label>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/collapsible-demo.tsx b/apps/v4/app/(internal)/sink/components/collapsible-demo.tsx
new file mode 100644
index 00000000000..a2da7994ac0
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+
+export function CollapsibleDemo() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="flex w-full flex-col gap-2 md:w-[350px]"
+    >
+      <div className="flex items-center justify-between gap-4 px-4">
+        <h4 className="line-clamp-1 text-sm font-semibold">
+          @peduarte starred 3 repositories
+        </h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <ChevronsUpDown className="h-4 w-4" />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-xs">
+        @radix-ui/primitives
+      </div>
+      <CollapsibleContent className="flex flex-col gap-2">
+        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-xs">
+          @radix-ui/colors
+        </div>
+        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-xs">
+          @stitches/react
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/combobox-demo.tsx b/apps/v4/app/(internal)/sink/components/combobox-demo.tsx
new file mode 100644
index 00000000000..966b17ed5ec
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/combobox-demo.tsx
@@ -0,0 +1,405 @@
+"use client"
+
+import * as React from "react"
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronsUpDown,
+  PlusCircleIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+const frameworks = [
+  {
+    value: "next.js",
+    label: "Next.js",
+  },
+  {
+    value: "sveltekit",
+    label: "SvelteKit",
+  },
+  {
+    value: "nuxt.js",
+    label: "Nuxt.js",
+  },
+  {
+    value: "remix",
+    label: "Remix",
+  },
+  {
+    value: "astro",
+    label: "Astro",
+  },
+]
+
+type Framework = (typeof frameworks)[number]
+
+const users = [
+  {
+    id: "1",
+    username: "shadcn",
+  },
+  {
+    id: "2",
+    username: "leerob",
+  },
+  {
+    id: "3",
+    username: "evilrabbit",
+  },
+] as const
+
+type User = (typeof users)[number]
+
+const timezones = [
+  {
+    label: "Americas",
+    timezones: [
+      { value: "America/New_York", label: "(GMT-5) New York" },
+      { value: "America/Los_Angeles", label: "(GMT-8) Los Angeles" },
+      { value: "America/Chicago", label: "(GMT-6) Chicago" },
+      { value: "America/Toronto", label: "(GMT-5) Toronto" },
+      { value: "America/Vancouver", label: "(GMT-8) Vancouver" },
+      { value: "America/Sao_Paulo", label: "(GMT-3) São Paulo" },
+    ],
+  },
+  {
+    label: "Europe",
+    timezones: [
+      { value: "Europe/London", label: "(GMT+0) London" },
+      { value: "Europe/Paris", label: "(GMT+1) Paris" },
+      { value: "Europe/Berlin", label: "(GMT+1) Berlin" },
+      { value: "Europe/Rome", label: "(GMT+1) Rome" },
+      { value: "Europe/Madrid", label: "(GMT+1) Madrid" },
+      { value: "Europe/Amsterdam", label: "(GMT+1) Amsterdam" },
+    ],
+  },
+  {
+    label: "Asia/Pacific",
+    timezones: [
+      { value: "Asia/Tokyo", label: "(GMT+9) Tokyo" },
+      { value: "Asia/Shanghai", label: "(GMT+8) Shanghai" },
+      { value: "Asia/Singapore", label: "(GMT+8) Singapore" },
+      { value: "Asia/Dubai", label: "(GMT+4) Dubai" },
+      { value: "Australia/Sydney", label: "(GMT+11) Sydney" },
+      { value: "Asia/Seoul", label: "(GMT+9) Seoul" },
+    ],
+  },
+] as const
+
+type Timezone = (typeof timezones)[number]
+
+export function ComboboxDemo() {
+  return (
+    <div className="flex w-full flex-wrap items-start gap-4">
+      <FrameworkCombobox frameworks={[...frameworks]} />
+      <UserCombobox users={[...users]} selectedUserId={users[0].id} />
+      <TimezoneCombobox
+        timezones={[...timezones]}
+        selectedTimezone={timezones[0].timezones[0]}
+      />
+      <ComboboxWithCheckbox frameworks={[...frameworks]} />
+    </div>
+  )
+}
+
+function FrameworkCombobox({ frameworks }: { frameworks: Framework[] }) {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between md:max-w-[200px]"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
+          <ChevronsUpDown className="text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-(--radix-popover-trigger-width) p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  {framework.label}
+                  <CheckIcon
+                    className={cn(
+                      "ml-auto",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function UserCombobox({
+  users,
+  selectedUserId,
+}: {
+  users: User[]
+  selectedUserId: string
+}) {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState(selectedUserId)
+
+  const selectedUser = React.useMemo(
+    () => users.find((user) => user.id === value),
+    [value, users]
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between px-2 md:max-w-[200px]"
+        >
+          {selectedUser ? (
+            <div className="flex items-center gap-2">
+              <Avatar className="size-5">
+                <AvatarImage
+                  src={`https://github.com/${selectedUser.username}.png`}
+                />
+                <AvatarFallback>{selectedUser.username[0]}</AvatarFallback>
+              </Avatar>
+              {selectedUser.username}
+            </div>
+          ) : (
+            "Select user..."
+          )}
+          <ChevronsUpDown className="text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-(--radix-popover-trigger-width) p-0">
+        <Command>
+          <CommandInput placeholder="Search user..." />
+          <CommandList>
+            <CommandEmpty>No user found.</CommandEmpty>
+            <CommandGroup>
+              {users.map((user) => (
+                <CommandItem
+                  key={user.id}
+                  value={user.id}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  <Avatar className="size-5">
+                    <AvatarImage
+                      src={`https://github.com/${user.username}.png`}
+                    />
+                    <AvatarFallback>{user.username[0]}</AvatarFallback>
+                  </Avatar>
+                  {user.username}
+                  <CheckIcon
+                    className={cn(
+                      "ml-auto",
+                      value === user.id ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup>
+              <CommandItem>
+                <PlusCircleIcon />
+                Create user
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function TimezoneCombobox({
+  timezones,
+  selectedTimezone,
+}: {
+  timezones: Timezone[]
+  selectedTimezone: Timezone["timezones"][number]
+}) {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState(selectedTimezone.value)
+
+  const selectedGroup = React.useMemo(
+    () =>
+      timezones.find((group) =>
+        group.timezones.find((tz) => tz.value === value)
+      ),
+    [value, timezones]
+  )
+
+  const selectedTimezoneLabel = React.useMemo(
+    () => selectedGroup?.timezones.find((tz) => tz.value === value)?.label,
+    [value, selectedGroup]
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className="h-12 w-full justify-between px-2.5 md:max-w-[200px]"
+        >
+          {selectedTimezone ? (
+            <div className="flex flex-col items-start gap-0.5">
+              <span className="text-muted-foreground text-xs font-normal">
+                {selectedGroup?.label}
+              </span>
+              <span>{selectedTimezoneLabel}</span>
+            </div>
+          ) : (
+            "Select timezone"
+          )}
+          <ChevronDownIcon className="text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" align="start">
+        <Command>
+          <CommandInput placeholder="Search timezone..." />
+          <CommandList className="scroll-pb-12">
+            <CommandEmpty>No timezone found.</CommandEmpty>
+            {timezones.map((region) => (
+              <CommandGroup key={region.label} heading={region.label}>
+                {region.timezones.map((timezone) => (
+                  <CommandItem
+                    key={timezone.value}
+                    value={timezone.value}
+                    onSelect={(currentValue) => {
+                      setValue(
+                        currentValue as Timezone["timezones"][number]["value"]
+                      )
+                      setOpen(false)
+                    }}
+                  >
+                    {timezone.label}
+                    <CheckIcon
+                      className="ml-auto opacity-0 data-[selected=true]:opacity-100"
+                      data-selected={value === timezone.value}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ))}
+            <CommandSeparator className="sticky bottom-10" />
+            <CommandGroup className="bg-popover sticky bottom-0">
+              <CommandItem>
+                <PlusCircleIcon />
+                Create timezone
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function ComboboxWithCheckbox({ frameworks }: { frameworks: Framework[] }) {
+  const [open, setOpen] = React.useState(false)
+  const [selectedFrameworks, setSelectedFrameworks] = React.useState<
+    Framework[]
+  >([])
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-fit min-w-[280px] justify-between"
+        >
+          {selectedFrameworks.length > 0
+            ? selectedFrameworks.map((framework) => framework.label).join(", ")
+            : "Select frameworks (multi-select)..."}
+          <ChevronsUpDown className="text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setSelectedFrameworks(
+                      selectedFrameworks.some((f) => f.value === currentValue)
+                        ? selectedFrameworks.filter(
+                            (f) => f.value !== currentValue
+                          )
+                        : [...selectedFrameworks, framework]
+                    )
+                  }}
+                >
+                  <div
+                    className="border-input data-[selected=true]:border-primary data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground pointer-events-none size-4 shrink-0 rounded-[4px] border transition-all select-none *:[svg]:opacity-0 data-[selected=true]:*:[svg]:opacity-100"
+                    data-selected={selectedFrameworks.some(
+                      (f) => f.value === framework.value
+                    )}
+                  >
+                    <CheckIcon className="size-3.5 text-current" />
+                  </div>
+                  {framework.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/command-demo.tsx b/apps/v4/app/(internal)/sink/components/command-demo.tsx
new file mode 100644
index 00000000000..bff278d675a
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/command-demo.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react"
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/registry/new-york-v4/ui/command"
+
+export function CommandDemo() {
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  return (
+    <>
+      <p className="text-muted-foreground text-sm">
+        Press{" "}
+        <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
+          <span className="text-xs">⌘</span>J
+        </kbd>
+      </p>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
+              <Calendar />
+              <span>Calendar</span>
+            </CommandItem>
+            <CommandItem>
+              <Smile />
+              <span>Search Emoji</span>
+            </CommandItem>
+            <CommandItem>
+              <Calculator />
+              <span>Calculator</span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem>
+              <User />
+              <span>Profile</span>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <CreditCard />
+              <span>Billing</span>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <Settings />
+              <span>Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/component-wrapper.tsx b/apps/v4/app/(internal)/sink/components/component-wrapper.tsx
new file mode 100644
index 00000000000..46ed741cf53
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/component-wrapper.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/registry/new-york-v4/lib/utils"
+
+export function ComponentWrapper({
+  className,
+  name,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> & { name: string }) {
+  return (
+    <ComponentErrorBoundary name={name}>
+      <div
+        id={name}
+        data-name={name.toLowerCase()}
+        className={cn(
+          "flex w-full scroll-mt-16 flex-col rounded-lg border",
+          className
+        )}
+        {...props}
+      >
+        <div className="border-b px-4 py-3">
+          <div className="text-sm font-medium">{getComponentName(name)}</div>
+        </div>
+        <div className="flex flex-1 items-center gap-2 p-4">{children}</div>
+      </div>
+    </ComponentErrorBoundary>
+  )
+}
+
+class ComponentErrorBoundary extends React.Component<
+  { children: React.ReactNode; name: string },
+  { hasError: boolean }
+> {
+  constructor(props: { children: React.ReactNode; name: string }) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error(`Error in component ${this.props.name}:`, error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="p-4 text-red-500">
+          Something went wrong in component: {this.props.name}
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+function getComponentName(name: string) {
+  // convert kebab-case to title case
+  return name.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase())
+}
diff --git a/apps/v4/app/(internal)/sink/components/context-menu-demo.tsx b/apps/v4/app/(internal)/sink/components/context-menu-demo.tsx
new file mode 100644
index 00000000000..d16e9c9d5e6
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/context-menu-demo.tsx
@@ -0,0 +1,79 @@
+import { Code2Icon, PlusIcon, TrashIcon } from "lucide-react"
+
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/registry/new-york-v4/ui/context-menu"
+
+export function ContextMenuDemo() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-48">
+            <ContextMenuItem inset>
+              Save Page...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>
+              <PlusIcon />
+              Create Shortcut...
+            </ContextMenuItem>
+            <ContextMenuItem inset>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>
+              <Code2Icon />
+              Developer Tools
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem variant="destructive">
+              <TrashIcon />
+              Delete
+            </ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value="pedro">
+          <ContextMenuLabel inset>People</ContextMenuLabel>
+          <ContextMenuRadioItem value="pedro">
+            Pedro Duarte
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx b/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
new file mode 100644
index 00000000000..d0e55d60625
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export function DatePickerDemo() {
+  return (
+    <div className="flex flex-col items-start gap-4 md:flex-row">
+      <DatePickerSimple />
+      <DataPickerWithDropdowns />
+      <DatePickerWithRange />
+    </div>
+  )
+}
+
+function DatePickerSimple() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "min-w-[200px] justify-start px-2 font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="text-muted-foreground" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar mode="single" selected={date} onSelect={setDate} />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function DatePickerWithRange() {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 0, 20),
+    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),
+  })
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          id="date"
+          variant={"outline"}
+          className={cn(
+            "w-fit justify-start px-2 font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="text-muted-foreground" />
+          {date?.from ? (
+            date.to ? (
+              <>
+                {format(date.from, "LLL dd, y")} -{" "}
+                {format(date.to, "LLL dd, y")}
+              </>
+            ) : (
+              format(date.from, "LLL dd, y")
+            )
+          ) : (
+            <span>Pick a date</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="range"
+          defaultMonth={date?.from}
+          selected={date}
+          onSelect={setDate}
+          numberOfMonths={2}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function DataPickerWithDropdowns() {
+  const [date, setDate] = React.useState<Date>()
+  const [open, setOpen] = React.useState(false)
+  const isMobile = useIsMobile(450)
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            className={cn(
+              "min-w-[200px] justify-start px-2 font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            {date ? format(date, "PPP") : <span>Pick a date</span>}
+            <CalendarIcon className="text-muted-foreground ml-auto" />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select a date</DrawerTitle>
+            <DrawerDescription>
+              Pick a date for your appointment.
+            </DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={(day) => {
+              setDate(day)
+              setOpen(false)
+            }}
+          />
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "min-w-[200px] justify-start px-2 font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+          <CalendarIcon className="text-muted-foreground ml-auto" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          captionLayout="dropdown"
+        />
+        <div className="flex gap-2 border-t p-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={() => setOpen(false)}
+          >
+            Done
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/dialog-demo.tsx b/apps/v4/app/(internal)/sink/components/dialog-demo.tsx
new file mode 100644
index 00000000000..25d115a6238
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/dialog-demo.tsx
@@ -0,0 +1,129 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york-v4/ui/dialog"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export function DialogDemo() {
+  return (
+    <div className="flex flex-col items-start gap-4 md:flex-row">
+      <DialogWithForm />
+      <DialogScrollableContent />
+      <DialogWithStickyFooter />
+    </div>
+  )
+}
+
+function DialogWithForm() {
+  return (
+    <Dialog>
+      <form>
+        <DialogTrigger asChild>
+          <Button variant="outline">Edit Profile</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you&apos;re
+              done.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4">
+            <div className="grid gap-3">
+              <Label htmlFor="name-1">Name</Label>
+              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className="grid gap-3">
+              <Label htmlFor="username-1">Username</Label>
+              <Input id="username-1" name="username" defaultValue="@peduarte" />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Save changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </form>
+    </Dialog>
+  )
+}
+
+function DialogScrollableContent() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Scrollable Content</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Scrollable Content</DialogTitle>
+          <DialogDescription>
+            This is a dialog with scrollable content.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="-mx-6 max-h-[500px] overflow-y-auto px-6 text-sm">
+          <h4 className="mb-4 text-lg leading-none font-medium">Lorem Ipsum</h4>
+          {Array.from({ length: 10 }).map((_, index) => (
+            <p key={index} className="mb-4 leading-normal">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function DialogWithStickyFooter() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Sticky Footer</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Scrollable Content</DialogTitle>
+          <DialogDescription>
+            This is a dialog with scrollable content.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="-mx-6 max-h-[500px] overflow-y-auto px-6 text-sm">
+          <h4 className="mb-4 text-lg leading-none font-medium">Lorem Ipsum</h4>
+          {Array.from({ length: 10 }).map((_, index) => (
+            <p key={index} className="mb-4 leading-normal">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          ))}
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/drawer-demo.tsx b/apps/v4/app/(internal)/sink/components/drawer-demo.tsx
new file mode 100644
index 00000000000..73890f2c81f
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/drawer-demo.tsx
@@ -0,0 +1,228 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+
+const data = [
+  {
+    goal: 400,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 239,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 349,
+  },
+]
+
+export function DrawerDemo() {
+  return (
+    <div className="flex flex-wrap items-start gap-4">
+      <DrawerBottom />
+      <DrawerScrollableContent />
+      <DrawerDirections />
+    </div>
+  )
+}
+
+function DrawerBottom() {
+  const [goal, setGoal] = React.useState(350)
+
+  const onClick = React.useCallback((adjustment: number) => {
+    setGoal((prevGoal) => Math.max(200, Math.min(400, prevGoal + adjustment)))
+  }, [])
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Move Goal</DrawerTitle>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 pb-0">
+            <div className="flex items-center justify-center space-x-2">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(-10)}
+                disabled={goal <= 200}
+              >
+                <Minus />
+                <span className="sr-only">Decrease</span>
+              </Button>
+              <div className="flex-1 text-center">
+                <div className="text-7xl font-bold tracking-tighter">
+                  {goal}
+                </div>
+                <div className="text-muted-foreground text-[0.70rem] uppercase">
+                  Calories/day
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(10)}
+                disabled={goal >= 400}
+              >
+                <Plus />
+                <span className="sr-only">Increase</span>
+              </Button>
+            </div>
+            <div className="mt-3 h-[120px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={data}>
+                  <Bar
+                    dataKey="goal"
+                    style={
+                      {
+                        fill: "var(--primary)",
+                        opacity: 0.9,
+                      } as React.CSSProperties
+                    }
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function DrawerScrollableContent() {
+  return (
+    <Drawer direction="right">
+      <DrawerTrigger asChild>
+        <Button variant="outline">Scrollable Content</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Move Goal</DrawerTitle>
+          <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+        </DrawerHeader>
+        <div className="overflow-y-auto px-4 text-sm">
+          <h4 className="mb-4 text-lg leading-none font-medium">Lorem Ipsum</h4>
+          {Array.from({ length: 10 }).map((_, index) => (
+            <p key={index} className="mb-4 leading-normal">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          ))}
+        </div>
+        <DrawerFooter>
+          <Button>Submit</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+const directions = ["top", "right", "bottom", "left"] as const
+
+function DrawerDirections() {
+  return (
+    <>
+      {directions.map((direction) => (
+        <Drawer key={direction} direction={direction}>
+          <DrawerTrigger asChild>
+            <Button variant="outline" className="capitalize">
+              {direction}
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Move Goal</DrawerTitle>
+              <DrawerDescription>
+                Set your daily activity goal.
+              </DrawerDescription>
+            </DrawerHeader>
+            <div className="overflow-y-auto px-4 text-sm">
+              {Array.from({ length: 10 }).map((_, index) => (
+                <p key={index} className="mb-4 leading-normal">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum
+                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                  cupidatat non proident, sunt in culpa qui officia deserunt
+                  mollit anim id est laborum.
+                </p>
+              ))}
+            </div>
+            <DrawerFooter>
+              <Button>Submit</Button>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      ))}
+    </>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx b/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
new file mode 100644
index 00000000000..fe1c39ecc38
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
@@ -0,0 +1,360 @@
+"use client"
+
+import * as React from "react"
+import {
+  BadgeCheckIcon,
+  BellIcon,
+  ChevronsUpDownIcon,
+  CreditCardIcon,
+  LogOut,
+  LogOutIcon,
+  MoreHorizontalIcon,
+  PencilIcon,
+  Settings2Icon,
+  ShareIcon,
+  SparklesIcon,
+  TrashIcon,
+  UserIcon,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+export function DropdownMenuDemo() {
+  return (
+    <div className="flex flex-wrap items-start gap-4">
+      <DropdownMenuSimple />
+      <DropdownMenuCheckboxes />
+      <DropdownMenuRadioGroupDemo />
+      <DropdownMenuWithAvatar />
+      <DropdownMenuAvatarOnly />
+      <DropdownMenuIconColor />
+    </div>
+  )
+}
+
+function DropdownMenuSimple() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Billing
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Settings
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Keyboard shortcuts
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Team</DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>Email</DropdownMenuItem>
+                <DropdownMenuItem>Message</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>More...</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            New Team
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>GitHub</DropdownMenuItem>
+        <DropdownMenuItem>Support</DropdownMenuItem>
+        <DropdownMenuItem disabled>API</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          Log out
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function DropdownMenuCheckboxes() {
+  const [showStatusBar, setShowStatusBar] = React.useState(true)
+  const [showActivityBar, setShowActivityBar] = React.useState(false)
+  const [showPanel, setShowPanel] = React.useState(false)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Checkboxes</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Account</DropdownMenuLabel>
+          <DropdownMenuItem>
+            <UserIcon /> Profile
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCardIcon /> Billing
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings2Icon /> Settings
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+          <DropdownMenuCheckboxItem
+            checked={showStatusBar}
+            onCheckedChange={setShowStatusBar}
+          >
+            Status Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={showActivityBar}
+            onCheckedChange={setShowActivityBar}
+            disabled
+          >
+            Activity Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={showPanel}
+            onCheckedChange={setShowPanel}
+          >
+            Panel
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <LogOutIcon /> Sign Out
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function DropdownMenuRadioGroupDemo() {
+  const [position, setPosition] = React.useState("bottom")
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Radio Group</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuLabel inset>Panel Position</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="right" disabled>
+              Right
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function DropdownMenuWithAvatar() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          className="h-12 justify-start px-2 md:max-w-[200px]"
+        >
+          <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
+            <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+          </Avatar>
+          <div className="grid flex-1 text-left text-sm leading-tight">
+            <span className="truncate font-semibold">shadcn</span>
+            <span className="text-muted-foreground truncate text-xs">
+              shadcn@example.com
+            </span>
+          </div>
+          <ChevronsUpDownIcon className="text-muted-foreground ml-auto" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
+        align="start"
+      >
+        <DropdownMenuLabel className="p-0 font-normal">
+          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
+              <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-semibold">shadcn</span>
+              <span className="text-muted-foreground truncate text-xs">
+                shadcn@example.com
+              </span>
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <SparklesIcon />
+            Upgrade to Pro
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <BadgeCheckIcon />
+            Account
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCardIcon />
+            Billing
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <BellIcon />
+            Notifications
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut />
+          Sign Out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function DropdownMenuAvatarOnly() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          className="size-8 rounded-full border-none p-0"
+        >
+          <Avatar>
+            <AvatarImage src="https://github.com/leerob.png" alt="leerob" />
+            <AvatarFallback className="rounded-lg">LR</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
+        align="start"
+      >
+        <DropdownMenuLabel className="p-0 font-normal">
+          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+            <Avatar>
+              <AvatarImage src="https://github.com/leerob.png" alt="leerob" />
+              <AvatarFallback className="rounded-lg">LR</AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-semibold">leerob</span>
+              <span className="text-muted-foreground truncate text-xs">
+                leerob@example.com
+              </span>
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <SparklesIcon />
+            Upgrade to Pro
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <BadgeCheckIcon />
+            Account
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCardIcon />
+            Billing
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <BellIcon />
+            Notifications
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut />
+          Sign Out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function DropdownMenuIconColor() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <MoreHorizontalIcon />
+          <span className="sr-only">Toggle menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuGroup className="*:data-[slot=dropdown-menu-item]:[&>svg]:text-muted-foreground">
+          <DropdownMenuItem>
+            <PencilIcon />
+            Edit
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <ShareIcon />
+            Share
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">
+            <TrashIcon />
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/form-demo.tsx b/apps/v4/app/(internal)/sink/components/form-demo.tsx
new file mode 100644
index 00000000000..98b12029ae6
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/form-demo.tsx
@@ -0,0 +1,399 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york-v4/ui/form"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/new-york-v4/ui/radio-group"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+const items = [
+  {
+    id: "recents",
+    label: "Recents",
+  },
+  {
+    id: "home",
+    label: "Home",
+  },
+  {
+    id: "applications",
+    label: "Applications",
+  },
+  {
+    id: "desktop",
+    label: "Desktop",
+  },
+  {
+    id: "downloads",
+    label: "Downloads",
+  },
+  {
+    id: "documents",
+    label: "Documents",
+  },
+] as const
+
+const FormSchema = z.object({
+  username: z.string().min(2, {
+    message: "Username must be at least 2 characters.",
+  }),
+  bio: z
+    .string()
+    .min(10, {
+      message: "Bio must be at least 10 characters.",
+    })
+    .max(160, {
+      message: "Bio must not be longer than 30 characters.",
+    }),
+  email: z
+    .string({
+      required_error: "Please select an email to display.",
+    })
+    .email(),
+  type: z.enum(["all", "mentions", "none"], {
+    required_error: "You need to select a notification type.",
+  }),
+  mobile: z.boolean().default(false).optional(),
+  items: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "You have to select at least one item.",
+  }),
+  dob: z.date({
+    required_error: "A date of birth is required.",
+  }),
+  marketing_emails: z.boolean().default(false).optional(),
+  security_emails: z.boolean(),
+})
+
+export function FormDemo() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      username: "",
+      items: ["recents", "home"],
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values:", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="grid w-full max-w-sm gap-6"
+      >
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a verified email to display" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="m@example.com">m@example.com</SelectItem>
+                  <SelectItem value="m@google.com">m@google.com</SelectItem>
+                  <SelectItem value="m@support.com">m@support.com</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                You can manage email addresses in your email settings.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="bio"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Bio</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Tell us a little bit about yourself"
+                  className="resize-none"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>
+                You can <span>@mention</span> other users and organizations.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="type"
+          render={({ field }) => (
+            <FormItem className="flex flex-col gap-3">
+              <FormLabel>Notify me about...</FormLabel>
+              <FormControl>
+                <RadioGroup
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                  className="flex flex-col gap-3"
+                >
+                  <FormItem className="flex items-center gap-2">
+                    <FormControl>
+                      <RadioGroupItem value="all" />
+                    </FormControl>
+                    <FormLabel className="font-normal">
+                      All new messages
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem className="flex items-center gap-2">
+                    <FormControl>
+                      <RadioGroupItem value="mentions" />
+                    </FormControl>
+                    <FormLabel className="font-normal">
+                      Direct messages and mentions
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem className="flex items-center gap-2">
+                    <FormControl>
+                      <RadioGroupItem value="none" />
+                    </FormControl>
+                    <FormLabel className="font-normal">Nothing</FormLabel>
+                  </FormItem>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="mobile"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-start gap-3 rounded-md border p-4 shadow-xs">
+              <FormControl>
+                <Checkbox
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <div className="flex flex-col gap-1">
+                <FormLabel className="leading-snug">
+                  Use different settings for my mobile devices
+                </FormLabel>
+                <FormDescription className="leading-snug">
+                  You can manage your mobile notifications in the mobile
+                  settings page.
+                </FormDescription>
+              </div>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="items"
+          render={() => (
+            <FormItem className="flex flex-col gap-4">
+              <div>
+                <FormLabel className="text-base">Sidebar</FormLabel>
+                <FormDescription>
+                  Select the items you want to display in the sidebar.
+                </FormDescription>
+              </div>
+              <div className="flex flex-col gap-2">
+                {items.map((item) => (
+                  <FormField
+                    key={item.id}
+                    control={form.control}
+                    name="items"
+                    render={({ field }) => {
+                      return (
+                        <FormItem
+                          key={item.id}
+                          className="flex items-start gap-3"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value?.includes(item.id)}
+                              onCheckedChange={(checked) => {
+                                return checked
+                                  ? field.onChange([...field.value, item.id])
+                                  : field.onChange(
+                                      field.value?.filter(
+                                        (value) => value !== item.id
+                                      )
+                                    )
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="text-sm leading-tight font-normal">
+                            {item.label}
+                          </FormLabel>
+                        </FormItem>
+                      )
+                    }}
+                  />
+                ))}
+              </div>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="dob"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Date of birth</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant={"outline"}
+                      className={cn(
+                        "w-[240px] pl-3 text-left font-normal",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value ? (
+                        format(field.value, "PPP")
+                      ) : (
+                        <span>Pick a date</span>
+                      )}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    disabled={(date: Date) =>
+                      date > new Date() || date < new Date("1900-01-01")
+                    }
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                Your date of birth is used to calculate your age.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div>
+          <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
+          <div className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="marketing_emails"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
+                  <div className="flex flex-col gap-0.5">
+                    <FormLabel className="leading-normal">
+                      Marketing emails
+                    </FormLabel>
+                    <FormDescription className="leading-snug">
+                      Receive emails about new products, features, and more.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="security_emails"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
+                  <div className="flex flex-col gap-0.5 opacity-60">
+                    <FormLabel className="leading-normal">
+                      Security emails
+                    </FormLabel>
+                    <FormDescription className="leading-snug">
+                      Receive emails about your account security.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                      disabled
+                      aria-readonly
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </div>
+        </div>
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx b/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx
new file mode 100644
index 00000000000..a1b7d3daf04
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx
@@ -0,0 +1,43 @@
+import { CalendarIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york-v4/ui/hover-card"
+
+export function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="link">@nextjs</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80" side="right">
+        <div className="flex justify-between gap-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/vercel.png" />
+            <AvatarFallback>VC</AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col gap-1">
+            <h4 className="text-sm font-semibold">@nextjs</h4>
+            <p className="text-sm">
+              The React Framework – created and maintained by @vercel.
+            </p>
+            <div className="mt-1 flex items-center gap-2">
+              <CalendarIcon className="text-muted-foreground size-4" />{" "}
+              <span className="text-muted-foreground text-xs">
+                Joined December 2021
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/input-demo.tsx b/apps/v4/app/(internal)/sink/components/input-demo.tsx
new file mode 100644
index 00000000000..bcd50a62640
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/input-demo.tsx
@@ -0,0 +1,23 @@
+import { Input } from "@/registry/new-york-v4/ui/input"
+
+export function InputDemo() {
+  return (
+    <div className="flex flex-col flex-wrap gap-4 md:flex-row">
+      <Input type="email" placeholder="Email" />
+      <Input type="text" placeholder="Error" aria-invalid="true" />
+      <Input type="password" placeholder="Password" />
+      <Input type="number" placeholder="Number" />
+      <Input type="file" placeholder="File" />
+      <Input type="tel" placeholder="Tel" />
+      <Input type="text" placeholder="Text" />
+      <Input type="url" placeholder="URL" />
+      <Input type="search" placeholder="Search" />
+      <Input type="date" placeholder="Date" />
+      <Input type="datetime-local" placeholder="Datetime Local" />
+      <Input type="month" placeholder="Month" />
+      <Input type="time" placeholder="Time" />
+      <Input type="week" placeholder="Week" />
+      <Input disabled placeholder="Disabled" />
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/input-otp-demo.tsx b/apps/v4/app/(internal)/sink/components/input-otp-demo.tsx
new file mode 100644
index 00000000000..81da12719b9
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/input-otp-demo.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { REGEXP_ONLY_DIGITS } from "input-otp"
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/registry/new-york-v4/ui/input-otp"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export function InputOTPDemo() {
+  return (
+    <div className="flex flex-col flex-wrap gap-6 md:flex-row">
+      <InputOTPSimple />
+      <InputOTPPattern />
+      <InputOTPWithSeparator />
+      <InputOTPWithSpacing />
+    </div>
+  )
+}
+
+function InputOTPSimple() {
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="simple">Simple</Label>
+      <InputOTP id="simple" maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+}
+
+function InputOTPPattern() {
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="digits-only">Digits Only</Label>
+      <InputOTP id="digits-only" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+}
+
+function InputOTPWithSeparator() {
+  const [value, setValue] = React.useState("123456")
+
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="with-separator">With Separator</Label>
+      <InputOTP
+        id="with-separator"
+        maxLength={6}
+        value={value}
+        onChange={setValue}
+      >
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+}
+
+function InputOTPWithSpacing() {
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="with-spacing">With Spacing</Label>
+      <InputOTP id="with-spacing" maxLength={6}>
+        <InputOTPGroup className="gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
+          <InputOTPSlot index={0} aria-invalid="true" />
+          <InputOTPSlot index={1} aria-invalid="true" />
+          <InputOTPSlot index={2} aria-invalid="true" />
+          <InputOTPSlot index={3} aria-invalid="true" />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/label-demo.tsx b/apps/v4/app/(internal)/sink/components/label-demo.tsx
new file mode 100644
index 00000000000..d3ed8060fbc
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/label-demo.tsx
@@ -0,0 +1,27 @@
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+export function LabelDemo() {
+  return (
+    <div className="grid w-full max-w-sm gap-6">
+      <div className="flex items-center gap-3">
+        <Checkbox id="label-demo-terms" />
+        <Label htmlFor="label-demo-terms">Accept terms and conditions</Label>
+      </div>
+      <div className="grid gap-3">
+        <Label htmlFor="label-demo-username">Username</Label>
+        <Input id="label-demo-username" placeholder="Username" />
+      </div>
+      <div className="group grid gap-3" data-disabled={true}>
+        <Label htmlFor="label-demo-disabled">Disabled</Label>
+        <Input id="label-demo-disabled" placeholder="Disabled" disabled />
+      </div>
+      <div className="grid gap-3">
+        <Label htmlFor="label-demo-message">Message</Label>
+        <Textarea id="label-demo-message" placeholder="Message" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/menubar-demo.tsx b/apps/v4/app/(internal)/sink/components/menubar-demo.tsx
new file mode 100644
index 00000000000..1ece3f98ca6
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/menubar-demo.tsx
@@ -0,0 +1,130 @@
+import { HelpCircleIcon, SettingsIcon, Trash2Icon } from "lucide-react"
+
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/registry/new-york-v4/ui/menubar"
+
+export function MenubarDemo() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>More</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarItem>
+              <SettingsIcon />
+              Settings
+            </MenubarItem>
+            <MenubarItem>
+              <HelpCircleIcon />
+              Help
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem variant="destructive">
+              <Trash2Icon />
+              Delete
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx b/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx
new file mode 100644
index 00000000000..115cd5ef258
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx
@@ -0,0 +1,227 @@
+import * as React from "react"
+import Link from "next/link"
+import { CircleCheckIcon, CircleHelpIcon, CircleIcon } from "lucide-react"
+
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/registry/new-york-v4/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+export function NavigationMenuDemo() {
+  return (
+    <div className="hidden w-full flex-col items-center justify-center gap-6 @xl:flex">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                <li className="row-span-3">
+                  <NavigationMenuLink asChild>
+                    <a
+                      className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md"
+                      href="/"
+                    >
+                      <div className="mt-4 mb-2 text-lg font-medium">
+                        shadcn/ui
+                      </div>
+                      <p className="text-muted-foreground text-sm leading-tight">
+                        Beautifully designed components built with Tailwind CSS.
+                      </p>
+                    </a>
+                  </NavigationMenuLink>
+                </li>
+                <ListItem href="/docs" title="Introduction">
+                  Re-usable components built using Radix UI and Tailwind CSS.
+                </ListItem>
+                <ListItem href="/docs/installation" title="Installation">
+                  How to install dependencies and structure your app.
+                </ListItem>
+                <ListItem href="/docs/primitives/typography" title="Typography">
+                  Styles for headings, paragraphs, lists...etc
+                </ListItem>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+                {components.map((component) => (
+                  <ListItem
+                    key={component.title}
+                    title={component.title}
+                    href={component.href}
+                  >
+                    {component.description}
+                  </ListItem>
+                ))}
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuLink
+              asChild
+              className={navigationMenuTriggerStyle()}
+            >
+              <Link href="/docs">Documentation</Link>
+            </NavigationMenuLink>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+      <NavigationMenu viewport={false}>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuLink
+              asChild
+              className={navigationMenuTriggerStyle()}
+            >
+              <Link href="/docs">Documentation</Link>
+            </NavigationMenuLink>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>List</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[300px] gap-4">
+                <li>
+                  <NavigationMenuLink asChild>
+                    <Link href="#">
+                      <div className="font-medium">Components</div>
+                      <div className="text-muted-foreground">
+                        Browse all components in the library.
+                      </div>
+                    </Link>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <Link href="#">
+                      <div className="font-medium">Documentation</div>
+                      <div className="text-muted-foreground">
+                        Learn how to use the library.
+                      </div>
+                    </Link>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <Link href="#">
+                      <div className="font-medium">Blog</div>
+                      <div className="text-muted-foreground">
+                        Read our latest blog posts.
+                      </div>
+                    </Link>
+                  </NavigationMenuLink>
+                </li>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[200px] gap-4">
+                <li>
+                  <NavigationMenuLink asChild>
+                    <Link href="#">Components</Link>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <Link href="#">Documentation</Link>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <Link href="#">Blocks</Link>
+                  </NavigationMenuLink>
+                </li>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[200px] gap-4">
+                <li>
+                  <NavigationMenuLink asChild>
+                    <Link href="#" className="flex-row items-center gap-2">
+                      <CircleHelpIcon />
+                      Backlog
+                    </Link>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <Link href="#" className="flex-row items-center gap-2">
+                      <CircleIcon />
+                      To Do
+                    </Link>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <Link href="#" className="flex-row items-center gap-2">
+                      <CircleCheckIcon />
+                      Done
+                    </Link>
+                  </NavigationMenuLink>
+                </li>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  )
+}
+
+function ListItem({
+  title,
+  children,
+  href,
+  ...props
+}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
+  return (
+    <li {...props}>
+      <NavigationMenuLink asChild>
+        <Link href={href}>
+          <div className="text-sm leading-none font-medium">{title}</div>
+          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+            {children}
+          </p>
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/pagination-demo.tsx b/apps/v4/app/(internal)/sink/components/pagination-demo.tsx
new file mode 100644
index 00000000000..451eb8b2783
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/pagination-demo.tsx
@@ -0,0 +1,40 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/registry/new-york-v4/ui/pagination"
+
+export function PaginationDemo() {
+  return (
+    <div className="flex flex-col gap-6">
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">1</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#" isActive>
+              2
+            </PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">3</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/popover-demo.tsx b/apps/v4/app/(internal)/sink/components/popover-demo.tsx
new file mode 100644
index 00000000000..87329c1355c
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/popover-demo.tsx
@@ -0,0 +1,62 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export function PopoverDemo() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80" align="start">
+        <div className="grid gap-4">
+          <div className="grid gap-1.5">
+            <h4 className="leading-none font-medium">Dimensions</h4>
+            <p className="text-muted-foreground text-sm">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxWidth">Max. width</Label>
+              <Input
+                id="maxWidth"
+                defaultValue="300px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxHeight">Max. height</Label>
+              <Input
+                id="maxHeight"
+                defaultValue="none"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/progress-demo.tsx b/apps/v4/app/(internal)/sink/components/progress-demo.tsx
new file mode 100644
index 00000000000..ee94673b9b8
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/progress-demo.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import * as React from "react"
+
+import { Progress } from "@/registry/new-york-v4/ui/progress"
+
+export function ProgressDemo() {
+  const [progress, setProgress] = React.useState(13)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return <Progress value={progress} className="w-[60%]" />
+}
diff --git a/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx b/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx
new file mode 100644
index 00000000000..03533fb3eb5
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx
@@ -0,0 +1,62 @@
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/new-york-v4/ui/radio-group"
+
+const plans = [
+  {
+    id: "starter",
+    name: "Starter Plan",
+    description:
+      "Perfect for small businesses getting started with our platform",
+    price: "$10",
+  },
+  {
+    id: "pro",
+    name: "Pro Plan",
+    description: "Advanced features for growing businesses with higher demands",
+    price: "$20",
+  },
+] as const
+
+export function RadioGroupDemo() {
+  return (
+    <div className="flex flex-col gap-6">
+      <RadioGroup defaultValue="comfortable">
+        <div className="flex items-center gap-3">
+          <RadioGroupItem value="default" id="r1" />
+          <Label htmlFor="r1">Default</Label>
+        </div>
+        <div className="flex items-center gap-3">
+          <RadioGroupItem value="comfortable" id="r2" />
+          <Label htmlFor="r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center gap-3">
+          <RadioGroupItem value="compact" id="r3" />
+          <Label htmlFor="r3">Compact</Label>
+        </div>
+      </RadioGroup>
+      <RadioGroup defaultValue="starter" className="max-w-sm">
+        {plans.map((plan) => (
+          <Label
+            className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-4 has-[[data-state=checked]]:border-green-600 has-[[data-state=checked]]:bg-green-50 dark:has-[[data-state=checked]]:border-green-900 dark:has-[[data-state=checked]]:bg-green-950"
+            key={plan.id}
+          >
+            <RadioGroupItem
+              value={plan.id}
+              id={plan.name}
+              className="shadow-none data-[state=checked]:border-green-600 data-[state=checked]:bg-green-600 *:data-[slot=radio-group-indicator]:[&>svg]:fill-white *:data-[slot=radio-group-indicator]:[&>svg]:stroke-white"
+            />
+            <div className="grid gap-1 font-normal">
+              <div className="font-medium">{plan.name}</div>
+              <div className="text-muted-foreground leading-snug">
+                {plan.description}
+              </div>
+            </div>
+          </Label>
+        ))}
+      </RadioGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/resizable-demo.tsx b/apps/v4/app/(internal)/sink/components/resizable-demo.tsx
new file mode 100644
index 00000000000..8f6ed50f020
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/resizable-demo.tsx
@@ -0,0 +1,70 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york-v4/ui/resizable"
+
+export function ResizableDemo() {
+  return (
+    <div className="flex w-full flex-col gap-6">
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="max-w-md rounded-lg border md:min-w-[450px]"
+      >
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-[200px] items-center justify-center p-6">
+            <span className="font-semibold">One</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <ResizablePanelGroup direction="vertical">
+            <ResizablePanel defaultSize={25}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Two</span>
+              </div>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel defaultSize={75}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Three</span>
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+      >
+        <ResizablePanel defaultSize={25}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Sidebar</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel defaultSize={75}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Content</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+      <ResizablePanelGroup
+        direction="vertical"
+        className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+      >
+        <ResizablePanel defaultSize={25}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Header</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={75}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Content</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx b/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx
new file mode 100644
index 00000000000..f53bd951ae7
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx
@@ -0,0 +1,80 @@
+import * as React from "react"
+import Image from "next/image"
+
+import { ScrollArea, ScrollBar } from "@/registry/new-york-v4/ui/scroll-area"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+export function ScrollAreaDemo() {
+  return (
+    <div className="flex flex-col gap-6">
+      <ScrollAreaVertical />
+      <ScrollAreaHorizontalDemo />
+    </div>
+  )
+}
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+function ScrollAreaVertical() {
+  return (
+    <div className="flex flex-col gap-6">
+      <ScrollArea className="h-72 w-48 rounded-md border">
+        <div className="p-4">
+          <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
+          {tags.map((tag) => (
+            <React.Fragment key={tag}>
+              <div className="text-sm">{tag}</div>
+              <Separator className="my-2" />
+            </React.Fragment>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}
+
+export const works = [
+  {
+    artist: "Ornella Binni",
+    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Vladimir Malyav",
+    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+  },
+] as const
+
+function ScrollAreaHorizontalDemo() {
+  return (
+    <ScrollArea className="w-full max-w-96 rounded-md border p-4">
+      <div className="flex gap-4">
+        {works.map((artwork) => (
+          <figure key={artwork.artist} className="shrink-0">
+            <div className="overflow-hidden rounded-md">
+              <Image
+                src={artwork.art}
+                alt={`Photo by ${artwork.artist}`}
+                className="aspect-[3/4] h-fit w-fit object-cover"
+                width={300}
+                height={400}
+              />
+            </div>
+            <figcaption className="text-muted-foreground pt-2 text-xs">
+              Photo by{" "}
+              <span className="text-foreground font-semibold">
+                {artwork.artist}
+              </span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/select-demo.tsx b/apps/v4/app/(internal)/sink/components/select-demo.tsx
new file mode 100644
index 00000000000..eb4a6a195d7
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/select-demo.tsx
@@ -0,0 +1,93 @@
+import * as React from "react"
+import {
+  ChartBarIcon,
+  ChartLineIcon,
+  ChartPieIcon,
+  CircleDashed,
+} from "lucide-react"
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+export function SelectDemo() {
+  return (
+    <div className="flex flex-wrap items-start gap-4">
+      <Select>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Fruits</SelectLabel>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="blueberry">Blueberry</SelectItem>
+            <SelectItem value="grapes" disabled>
+              Grapes
+            </SelectItem>
+            <SelectItem value="pineapple">Pineapple</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Select>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Large List" />
+        </SelectTrigger>
+        <SelectContent>
+          {Array.from({ length: 100 }).map((_, i) => (
+            <SelectItem key={i} value={`item-${i}`}>
+              Item {i}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Select disabled>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Disabled" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes" disabled>
+            Grapes
+          </SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+        </SelectContent>
+      </Select>
+      <Select>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue
+            placeholder={
+              <>
+                <CircleDashed className="text-muted-foreground" />
+                With Icon
+              </>
+            }
+          />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="line">
+            <ChartLineIcon />
+            Line
+          </SelectItem>
+          <SelectItem value="bar">
+            <ChartBarIcon />
+            Bar
+          </SelectItem>
+          <SelectItem value="pie">
+            <ChartPieIcon />
+            Pie
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/separator-demo.tsx b/apps/v4/app/(internal)/sink/components/separator-demo.tsx
new file mode 100644
index 00000000000..5054ba2bcd9
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/separator-demo.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+export function SeparatorDemo() {
+  return (
+    <div>
+      <div className="flex flex-col gap-1">
+        <div className="text-sm leading-none font-medium">Tailwind CSS</div>
+        <div className="text-muted-foreground text-sm">
+          A utility-first CSS framework.
+        </div>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center gap-4 text-sm">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/sheet-demo.tsx b/apps/v4/app/(internal)/sink/components/sheet-demo.tsx
new file mode 100644
index 00000000000..694ce658357
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/sheet-demo.tsx
@@ -0,0 +1,95 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/new-york-v4/ui/sheet"
+
+const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
+
+export function SheetDemo() {
+  return (
+    <div className="flex flex-col gap-6 md:flex-row">
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline">Open</Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Edit profile</SheetTitle>
+            <SheetDescription>
+              Make changes to your profile here. Click save when you&apos;re
+              done.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="grid flex-1 auto-rows-min gap-6 px-4">
+            <div className="grid gap-3">
+              <Label htmlFor="sheet-demo-name">Name</Label>
+              <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className="grid gap-3">
+              <Label htmlFor="sheet-demo-username">Username</Label>
+              <Input id="sheet-demo-username" defaultValue="@peduarte" />
+            </div>
+          </div>
+          <SheetFooter>
+            <Button type="submit">Save changes</Button>
+            <SheetClose asChild>
+              <Button variant="outline">Close</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+      <div className="flex gap-2">
+        {SHEET_SIDES.map((side) => (
+          <Sheet key={side}>
+            <SheetTrigger asChild>
+              <Button variant="outline" className="capitalize">
+                {side}
+              </Button>
+            </SheetTrigger>
+            <SheetContent side={side}>
+              <SheetHeader>
+                <SheetTitle>Edit profile</SheetTitle>
+                <SheetDescription>
+                  Make changes to your profile here. Click save when you&apos;re
+                  done.
+                </SheetDescription>
+              </SheetHeader>
+              <div className="overflow-y-auto px-4 text-sm">
+                <h4 className="mb-4 text-lg leading-none font-medium">
+                  Lorem Ipsum
+                </h4>
+                {Array.from({ length: 10 }).map((_, index) => (
+                  <p key={index} className="mb-4 leading-normal">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit
+                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+                    occaecat cupidatat non proident, sunt in culpa qui officia
+                    deserunt mollit anim id est laborum.
+                  </p>
+                ))}
+              </div>
+              <SheetFooter>
+                <Button type="submit">Save changes</Button>
+                <SheetClose asChild>
+                  <Button variant="outline">Cancel</Button>
+                </SheetClose>
+              </SheetFooter>
+            </SheetContent>
+          </Sheet>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/skeleton-demo.tsx b/apps/v4/app/(internal)/sink/components/skeleton-demo.tsx
new file mode 100644
index 00000000000..66a6b619976
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/skeleton-demo.tsx
@@ -0,0 +1,29 @@
+import { Card, CardContent, CardHeader } from "@/registry/new-york-v4/ui/card"
+import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
+
+export function SkeletonDemo() {
+  return (
+    <div className="flex w-full flex-wrap items-start gap-4">
+      <div className="flex items-center gap-4">
+        <Skeleton className="size-10 shrink-0 rounded-full" />
+        <div className="grid gap-2">
+          <Skeleton className="h-4 w-[150px]" />
+          <Skeleton className="h-4 w-[100px]" />
+        </div>
+      </div>
+      <div className="flex w-full flex-wrap items-start gap-4">
+        {Array.from({ length: 3 }).map((_, index) => (
+          <Card key={index} className="w-full @md:w-auto @md:min-w-sm">
+            <CardHeader>
+              <Skeleton className="h-4 w-2/3" />
+              <Skeleton className="h-4 w-1/2" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="aspect-square w-full" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/slider-demo.tsx b/apps/v4/app/(internal)/sink/components/slider-demo.tsx
new file mode 100644
index 00000000000..e4c63ea361b
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/slider-demo.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Slider } from "@/registry/new-york-v4/ui/slider"
+
+export function SliderDemo() {
+  return (
+    <div className="flex w-full max-w-sm flex-col flex-wrap gap-6 md:flex-row">
+      <Slider defaultValue={[50]} max={100} step={1} />
+      <Slider defaultValue={[25, 50]} max={100} step={1} />
+      <Slider defaultValue={[10, 20]} max={100} step={10} />
+      <div className="flex w-full items-center gap-6">
+        <Slider defaultValue={[50]} max={100} step={1} orientation="vertical" />
+        <Slider defaultValue={[25]} max={100} step={1} orientation="vertical" />
+      </div>
+      <SliderControlled />
+    </div>
+  )
+}
+
+function SliderControlled() {
+  const [value, setValue] = React.useState([0.3, 0.7])
+
+  return (
+    <div className="grid w-full gap-3">
+      <div className="flex items-center justify-between gap-2">
+        <Label htmlFor="slider-demo-temperature">Temperature</Label>
+        <span className="text-muted-foreground text-sm">
+          {value.join(", ")}
+        </span>
+      </div>
+      <Slider
+        id="slider-demo-temperature"
+        value={value}
+        onValueChange={setValue}
+        min={0}
+        max={1}
+        step={0.1}
+      />
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/sonner-demo.tsx b/apps/v4/app/(internal)/sink/components/sonner-demo.tsx
new file mode 100644
index 00000000000..eb2656bb704
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/sonner-demo.tsx
@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import { toast } from "sonner"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+const promiseCode = "`${data.name} toast has been added`"
+
+const allTypes = [
+  {
+    name: "Default",
+    snippet: `toast('Event has been created')`,
+    action: () => toast("Event has been created"),
+  },
+  {
+    name: "Description",
+    snippet: `toast.message('Event has been created', {
+  description: 'Monday, January 3rd at 6:00pm',
+})`,
+    action: () =>
+      toast("Event has been created", {
+        description: "Monday, January 3rd at 6:00pm",
+      }),
+  },
+  {
+    name: "Success",
+    snippet: `toast.success('Event has been created')`,
+    action: () => toast.success("Event has been created"),
+  },
+  {
+    name: "Info",
+    snippet: `toast.info('Be at the area 10 minutes before the event time')`,
+    action: () => toast.info("Be at the area 10 minutes before the event time"),
+  },
+  {
+    name: "Warning",
+    snippet: `toast.warning('Event start time cannot be earlier than 8am')`,
+    action: () => toast.warning("Event start time cannot be earlier than 8am"),
+  },
+  {
+    name: "Error",
+    snippet: `toast.error('Event has not been created')`,
+    action: () => toast.error("Event has not been created"),
+  },
+  {
+    name: "Action",
+    action: () =>
+      toast.message("Event has been created", {
+        action: {
+          label: "Undo",
+          onClick: () => console.log("Undo"),
+        },
+      }),
+  },
+  {
+    name: "Cancel",
+    action: () =>
+      toast.message("Event has been created", {
+        cancel: {
+          label: "Cancel",
+          onClick: () => console.log("Cancel"),
+        },
+      }),
+  },
+  {
+    name: "Promise",
+    snippet: `const promise = () => new Promise((resolve) => setTimeout(() => resolve({ name: 'Sonner' }), 2000));
+
+toast.promise(promise, {
+  loading: 'Loading...',
+  success: (data) => {
+    return ${promiseCode};
+  },
+  error: 'Error',
+});`,
+    action: () =>
+      toast.promise<{ name: string }>(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({ name: "Sonner" })
+            }, 2000)
+          }),
+        {
+          loading: "Loading...",
+          success: (data) => {
+            return `${data.name} toast has been added`
+          },
+          error: "Error",
+        }
+      ),
+  },
+]
+
+export function SonnerDemo() {
+  const [activeType, setActiveType] = React.useState(allTypes[0])
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Button onClick={() => toast("My first toast")} variant="outline">
+        Give me a toast
+      </Button>
+      <Button
+        variant="outline"
+        onClick={() =>
+          toast("Event has been created", {
+            description: "Sunday, December 03, 2023 at 9:00 AM",
+            action: {
+              label: "Undo",
+              onClick: () => console.log("Undo"),
+            },
+          })
+        }
+      >
+        Show Toast
+      </Button>
+      {allTypes.map((type) => (
+        <Button
+          variant="ghost"
+          data-active={activeType.name === type.name}
+          onClick={() => {
+            type.action()
+            setActiveType(type)
+          }}
+          key={type.name}
+        >
+          {type.name}
+        </Button>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/switch-demo.tsx b/apps/v4/app/(internal)/sink/components/switch-demo.tsx
new file mode 100644
index 00000000000..bd4cf82cb44
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/switch-demo.tsx
@@ -0,0 +1,34 @@
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
+
+export function SwitchDemo() {
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-2">
+        <Switch id="switch-demo-airplane-mode" />
+        <Label htmlFor="switch-demo-airplane-mode">Airplane Mode</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Switch
+          id="switch-demo-bluetooth"
+          className="data-[state=checked]:bg-blue-500 dark:data-[state=checked]:bg-blue-600"
+          defaultChecked
+        />
+        <Label htmlFor="switch-demo-bluetooth">Bluetooth</Label>
+      </div>
+      <Label className="flex items-center gap-6 rounded-lg border p-4 has-[[data-state=checked]]:border-blue-600">
+        <div className="flex flex-col gap-1">
+          <div className="font-medium">Share across devices</div>
+          <div className="text-muted-foreground text-sm font-normal">
+            Focus is shared across devices, and turns off when you leave the
+            app.
+          </div>
+        </div>
+        <Switch
+          id="switch-demo-focus-mode"
+          className="data-[state=checked]:bg-blue-500 dark:data-[state=checked]:bg-blue-600"
+        />
+      </Label>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/table-demo.tsx b/apps/v4/app/(internal)/sink/components/table-demo.tsx
new file mode 100644
index 00000000000..c1269df1bab
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/table-demo.tsx
@@ -0,0 +1,87 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york-v4/ui/table"
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
+
+export function TableDemo() {
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/tabs-demo.tsx b/apps/v4/app/(internal)/sink/components/tabs-demo.tsx
new file mode 100644
index 00000000000..b54b5492b26
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/tabs-demo.tsx
@@ -0,0 +1,106 @@
+import { AppWindowIcon, CodeIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+
+export function TabsDemo() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-6">
+      <Tabs defaultValue="account">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+          <Card>
+            <CardHeader>
+              <CardTitle>Account</CardTitle>
+              <CardDescription>
+                Make changes to your account here. Click save when you&apos;re
+                done.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-6">
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-name">Name</Label>
+                <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-username">Username</Label>
+                <Input id="tabs-demo-username" defaultValue="@peduarte" />
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button>Save changes</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+        <TabsContent value="password">
+          <Card>
+            <CardHeader>
+              <CardTitle>Password</CardTitle>
+              <CardDescription>
+                Change your password here. After saving, you&apos;ll be logged
+                out.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-6">
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-current">Current password</Label>
+                <Input id="tabs-demo-current" type="password" />
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-new">New password</Label>
+                <Input id="tabs-demo-new" type="password" />
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button>Save password</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+      </Tabs>
+      <Tabs defaultValue="home">
+        <TabsList>
+          <TabsTrigger value="home">Home</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Tabs defaultValue="home">
+        <TabsList>
+          <TabsTrigger value="home">Home</TabsTrigger>
+          <TabsTrigger value="settings" disabled>
+            Disabled
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Tabs defaultValue="preview">
+        <TabsList>
+          <TabsTrigger value="preview">
+            <AppWindowIcon />
+            Preview
+          </TabsTrigger>
+          <TabsTrigger value="code">
+            <CodeIcon />
+            Code
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/textarea-demo.tsx b/apps/v4/app/(internal)/sink/components/textarea-demo.tsx
new file mode 100644
index 00000000000..b4ba5957c37
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/textarea-demo.tsx
@@ -0,0 +1,40 @@
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+export function TextareaDemo() {
+  return (
+    <div className="flex w-full flex-col gap-10">
+      <Textarea placeholder="Type your message here." />
+      <Textarea placeholder="Type your message here." aria-invalid="true" />
+      <div className="grid gap-3">
+        <Label htmlFor="textarea-demo-message">Label</Label>
+        <Textarea
+          id="textarea-demo-message"
+          placeholder="Type your message here."
+          rows={6}
+        />
+      </div>
+      <div className="grid gap-3">
+        <Label htmlFor="textarea-demo-message-2">
+          With label and description
+        </Label>
+        <Textarea
+          id="textarea-demo-message-2"
+          placeholder="Type your message here."
+          rows={6}
+        />
+        <div className="text-muted-foreground text-sm">
+          Type your message and press enter to send.
+        </div>
+      </div>
+      <div className="grid gap-3">
+        <Label htmlFor="textarea-demo-disabled">Disabled</Label>
+        <Textarea
+          id="textarea-demo-disabled"
+          placeholder="Type your message here."
+          disabled
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/toggle-demo.tsx b/apps/v4/app/(internal)/sink/components/toggle-demo.tsx
new file mode 100644
index 00000000000..466025c6461
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/toggle-demo.tsx
@@ -0,0 +1,35 @@
+import { BoldIcon, BookmarkIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york-v4/ui/toggle"
+
+export function ToggleDemo() {
+  return (
+    <div className="flex flex-wrap items-center gap-6">
+      <Toggle aria-label="Toggle italic">
+        <BoldIcon />
+      </Toggle>
+      <Toggle aria-label="Toggle italic" variant="default">
+        <UnderlineIcon />
+      </Toggle>
+      <Toggle aria-label="Toggle italic" variant="default" disabled>
+        Disabled
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle italic">
+        <ItalicIcon />
+        Italic
+      </Toggle>
+      <Toggle
+        aria-label="Toggle book"
+        className="data-[state=on]:[&_svg]:fill-accent-foreground"
+      >
+        <BookmarkIcon />
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle italic" size="sm">
+        Small
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle italic" size="lg">
+        Large
+      </Toggle>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx b/apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx
new file mode 100644
index 00000000000..ce8cad40217
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx
@@ -0,0 +1,75 @@
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+
+export function ToggleGroupDemo() {
+  return (
+    <div className="flex flex-wrap items-start gap-4">
+      <ToggleGroup type="multiple">
+        <ToggleGroupItem value="bold" aria-label="Toggle bold">
+          <BoldIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" aria-label="Toggle italic">
+          <ItalicIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="strikethrough"
+          aria-label="Toggle strikethrough"
+        >
+          <UnderlineIcon />
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <ToggleGroup
+        variant="outline"
+        type="single"
+        defaultValue="all"
+        className="*:data-[slot=toggle-group-item]:w-20"
+      >
+        <ToggleGroupItem value="all" aria-label="Toggle all">
+          All
+        </ToggleGroupItem>
+        <ToggleGroupItem value="missed" aria-label="Toggle missed">
+          Missed
+        </ToggleGroupItem>
+      </ToggleGroup>
+
+      <ToggleGroup
+        variant="outline"
+        type="single"
+        size="sm"
+        defaultValue="last-24-hours"
+        className="*:data-[slot=toggle-group-item]:px-3"
+      >
+        <ToggleGroupItem
+          value="last-24-hours"
+          aria-label="Toggle last 24 hours"
+        >
+          Last 24 hours
+        </ToggleGroupItem>
+        <ToggleGroupItem value="last-7-days" aria-label="Toggle last 7 days">
+          Last 7 days
+        </ToggleGroupItem>
+      </ToggleGroup>
+
+      <ToggleGroup
+        type="single"
+        size="sm"
+        defaultValue="last-24-hours"
+        className="*:data-[slot=toggle-group-item]:px-3"
+      >
+        <ToggleGroupItem
+          value="last-24-hours"
+          aria-label="Toggle last 24 hours"
+        >
+          Last 24 hours
+        </ToggleGroupItem>
+        <ToggleGroupItem value="last-7-days" aria-label="Toggle last 7 days">
+          Last 7 days
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/components/tooltip-demo.tsx b/apps/v4/app/(internal)/sink/components/tooltip-demo.tsx
new file mode 100644
index 00000000000..cdf55188d92
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/components/tooltip-demo.tsx
@@ -0,0 +1,49 @@
+import { InfoIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
+
+export function TooltipDemo() {
+  return (
+    <div className="flex flex-wrap items-start gap-4">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Hover</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Add to library</p>
+        </TooltipContent>
+      </Tooltip>
+      <div className="flex gap-2">
+        {["top", "right", "bottom", "left"].map((side) => (
+          <Tooltip key={side}>
+            <TooltipTrigger asChild>
+              <Button variant="outline" className="capitalize">
+                {side}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side={side as "top" | "right" | "bottom" | "left"}>
+              <p>Add to library</p>
+            </TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <InfoIcon />
+            <span className="sr-only">Info</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          To learn more about how this works, check out the docs. If you have
+          any questions, please reach out to us.
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(internal)/sink/page.tsx b/apps/v4/app/(internal)/sink/page.tsx
new file mode 100644
index 00000000000..8114e74c4bf
--- /dev/null
+++ b/apps/v4/app/(internal)/sink/page.tsx
@@ -0,0 +1,229 @@
+import { Metadata } from "next"
+import { cookies } from "next/headers"
+
+import { ThemeSelector } from "@/components/theme-selector"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+import { AccordionDemo } from "@/app/(internal)/sink/components/accordion-demo"
+import { AlertDemo } from "@/app/(internal)/sink/components/alert-demo"
+import { AlertDialogDemo } from "@/app/(internal)/sink/components/alert-dialog-demo"
+import { AppSidebar } from "@/app/(internal)/sink/components/app-sidebar"
+import { AspectRatioDemo } from "@/app/(internal)/sink/components/aspect-ratio-demo"
+import { AvatarDemo } from "@/app/(internal)/sink/components/avatar-demo"
+import { BadgeDemo } from "@/app/(internal)/sink/components/badge-demo"
+import { BreadcrumbDemo } from "@/app/(internal)/sink/components/breadcrumb-demo"
+import { ButtonDemo } from "@/app/(internal)/sink/components/button-demo"
+import { CalendarDemo } from "@/app/(internal)/sink/components/calendar-demo"
+import { CardDemo } from "@/app/(internal)/sink/components/card-demo"
+import { CarouselDemo } from "@/app/(internal)/sink/components/carousel-demo"
+import { ChartDemo } from "@/app/(internal)/sink/components/chart-demo"
+import { CheckboxDemo } from "@/app/(internal)/sink/components/checkbox-demo"
+import { CollapsibleDemo } from "@/app/(internal)/sink/components/collapsible-demo"
+import { ComboboxDemo } from "@/app/(internal)/sink/components/combobox-demo"
+import { CommandDemo } from "@/app/(internal)/sink/components/command-demo"
+import { ComponentWrapper } from "@/app/(internal)/sink/components/component-wrapper"
+import { ContextMenuDemo } from "@/app/(internal)/sink/components/context-menu-demo"
+import { DatePickerDemo } from "@/app/(internal)/sink/components/date-picker-demo"
+import { DialogDemo } from "@/app/(internal)/sink/components/dialog-demo"
+import { DrawerDemo } from "@/app/(internal)/sink/components/drawer-demo"
+import { DropdownMenuDemo } from "@/app/(internal)/sink/components/dropdown-menu-demo"
+import { FormDemo } from "@/app/(internal)/sink/components/form-demo"
+import { HoverCardDemo } from "@/app/(internal)/sink/components/hover-card-demo"
+import { InputDemo } from "@/app/(internal)/sink/components/input-demo"
+import { InputOTPDemo } from "@/app/(internal)/sink/components/input-otp-demo"
+import { LabelDemo } from "@/app/(internal)/sink/components/label-demo"
+import { MenubarDemo } from "@/app/(internal)/sink/components/menubar-demo"
+import { NavigationMenuDemo } from "@/app/(internal)/sink/components/navigation-menu-demo"
+import { PaginationDemo } from "@/app/(internal)/sink/components/pagination-demo"
+import { PopoverDemo } from "@/app/(internal)/sink/components/popover-demo"
+import { ProgressDemo } from "@/app/(internal)/sink/components/progress-demo"
+import { RadioGroupDemo } from "@/app/(internal)/sink/components/radio-group-demo"
+import { ResizableDemo } from "@/app/(internal)/sink/components/resizable-demo"
+import { ScrollAreaDemo } from "@/app/(internal)/sink/components/scroll-area-demo"
+import { SelectDemo } from "@/app/(internal)/sink/components/select-demo"
+import { SeparatorDemo } from "@/app/(internal)/sink/components/separator-demo"
+import { SheetDemo } from "@/app/(internal)/sink/components/sheet-demo"
+import { SkeletonDemo } from "@/app/(internal)/sink/components/skeleton-demo"
+import { SliderDemo } from "@/app/(internal)/sink/components/slider-demo"
+import { SonnerDemo } from "@/app/(internal)/sink/components/sonner-demo"
+import { SwitchDemo } from "@/app/(internal)/sink/components/switch-demo"
+import { TableDemo } from "@/app/(internal)/sink/components/table-demo"
+import { TabsDemo } from "@/app/(internal)/sink/components/tabs-demo"
+import { TextareaDemo } from "@/app/(internal)/sink/components/textarea-demo"
+import { ToggleDemo } from "@/app/(internal)/sink/components/toggle-demo"
+import { ToggleGroupDemo } from "@/app/(internal)/sink/components/toggle-group-demo"
+import { TooltipDemo } from "@/app/(internal)/sink/components/tooltip-demo"
+
+export const dynamic = "force-static"
+export const revalidate = false
+
+export const metadata: Metadata = {
+  title: "Kitchen Sink",
+  description: "A page with all components for testing purposes.",
+}
+
+export default async function SinkPage() {
+  const cookieStore = await cookies()
+  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true"
+
+  return (
+    <SidebarProvider defaultOpen={defaultOpen} className="theme-container">
+      <AppSidebar />
+      <SidebarInset>
+        <header className="bg-background sticky top-0 z-10 flex h-14 items-center border-b p-4">
+          <SidebarTrigger />
+          <Separator orientation="vertical" className="mr-4 ml-2 !h-4" />
+          <h1 className="text-base font-medium">Kitchen Sink</h1>
+          <ThemeSelector className="ml-auto" />
+        </header>
+        <div className="@container grid flex-1 gap-4 p-4">
+          <ComponentWrapper name="accordion">
+            <AccordionDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="alert">
+            <AlertDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="alert-dialog">
+            <AlertDialogDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="aspect-ratio">
+            <AspectRatioDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="avatar">
+            <AvatarDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="badge">
+            <BadgeDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="breadcrumb">
+            <BreadcrumbDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="button">
+            <ButtonDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="calendar">
+            <CalendarDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="card">
+            <CardDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="carousel">
+            <CarouselDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="chart" className="w-full">
+            <ChartDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="checkbox">
+            <CheckboxDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="collapsible">
+            <CollapsibleDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="combobox">
+            <ComboboxDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="command">
+            <CommandDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="context-menu">
+            <ContextMenuDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="date-picker">
+            <DatePickerDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="dialog">
+            <DialogDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="drawer">
+            <DrawerDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="dropdown-menu">
+            <DropdownMenuDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="form">
+            <FormDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="hover-card">
+            <HoverCardDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="input">
+            <InputDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="input-otp">
+            <InputOTPDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="label">
+            <LabelDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="menubar">
+            <MenubarDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="navigation-menu">
+            <NavigationMenuDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="pagination">
+            <PaginationDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="popover">
+            <PopoverDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="progress">
+            <ProgressDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="radio-group">
+            <RadioGroupDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="resizable">
+            <ResizableDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="scroll-area">
+            <ScrollAreaDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="select">
+            <SelectDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="separator">
+            <SeparatorDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="sheet">
+            <SheetDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="skeleton">
+            <SkeletonDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="slider">
+            <SliderDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="sonner">
+            <SonnerDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="switch">
+            <SwitchDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="table">
+            <TableDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="tabs">
+            <TabsDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="textarea">
+            <TextareaDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="toggle">
+            <ToggleDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="toggle-group">
+            <ToggleGroupDemo />
+          </ComponentWrapper>
+          <ComponentWrapper name="tooltip">
+            <TooltipDemo />
+          </ComponentWrapper>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/app/(view)/view/[name]/page.tsx b/apps/v4/app/(view)/view/[name]/page.tsx
new file mode 100644
index 00000000000..b96fc384009
--- /dev/null
+++ b/apps/v4/app/(view)/view/[name]/page.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { registryItemSchema } from "shadcn/schema"
+import { z } from "zod"
+
+import { siteConfig } from "@/lib/config"
+import { getRegistryComponent, getRegistryItem } from "@/lib/registry"
+import { absoluteUrl, cn } from "@/lib/utils"
+
+export const revalidate = false
+export const dynamic = "force-static"
+export const dynamicParams = false
+
+const getCachedRegistryItem = React.cache(async (name: string) => {
+  return await getRegistryItem(name)
+})
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{
+    name: string
+  }>
+}): Promise<Metadata> {
+  const { name } = await params
+  const item = await getCachedRegistryItem(name)
+
+  if (!item) {
+    return {}
+  }
+
+  const title = item.name
+  const description = item.description
+
+  return {
+    title: item.description,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: "article",
+      url: absoluteUrl(`/view/${item.name}`),
+      images: [
+        {
+          url: siteConfig.ogImage,
+          width: 1200,
+          height: 630,
+          alt: siteConfig.name,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [siteConfig.ogImage],
+      creator: "@shadcn",
+    },
+  }
+}
+
+export async function generateStaticParams() {
+  const { Index } = await import("@/registry/__index__")
+  const index = z.record(registryItemSchema).parse(Index)
+
+  return Object.values(index)
+    .filter((block) =>
+      [
+        "registry:block",
+        "registry:component",
+        "registry:example",
+        "registry:internal",
+      ].includes(block.type)
+    )
+    .map((block) => ({
+      name: block.name,
+    }))
+}
+
+export default async function BlockPage({
+  params,
+}: {
+  params: Promise<{
+    name: string
+  }>
+}) {
+  const { name } = await params
+  const item = await getCachedRegistryItem(name)
+  const Component = getRegistryComponent(name)
+
+  if (!item || !Component) {
+    return notFound()
+  }
+
+  return (
+    <>
+      <div className={cn("bg-background", item.meta?.container)}>
+        <Component />
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/app/layout.tsx b/apps/v4/app/layout.tsx
new file mode 100644
index 00000000000..04f1645db37
--- /dev/null
+++ b/apps/v4/app/layout.tsx
@@ -0,0 +1,104 @@
+import type { Metadata } from "next"
+
+import { META_THEME_COLORS, siteConfig } from "@/lib/config"
+import { fontVariables } from "@/lib/fonts"
+import { cn } from "@/lib/utils"
+import { LayoutProvider } from "@/hooks/use-layout"
+import { ActiveThemeProvider } from "@/components/active-theme"
+import { Analytics } from "@/components/analytics"
+import { TailwindIndicator } from "@/components/tailwind-indicator"
+import { ThemeProvider } from "@/components/theme-provider"
+import { Toaster } from "@/registry/new-york-v4/ui/sonner"
+
+import "@/styles/globals.css"
+
+export const metadata: Metadata = {
+  title: {
+    default: siteConfig.name,
+    template: `%s - ${siteConfig.name}`,
+  },
+  metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL!),
+  description: siteConfig.description,
+  keywords: ["Next.js", "React", "Tailwind CSS", "Components", "shadcn"],
+  authors: [
+    {
+      name: "shadcn",
+      url: "https://shadcn.com",
+    },
+  ],
+  creator: "shadcn",
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: process.env.NEXT_PUBLIC_APP_URL!,
+    title: siteConfig.name,
+    description: siteConfig.description,
+    siteName: siteConfig.name,
+    images: [
+      {
+        url: `${process.env.NEXT_PUBLIC_APP_URL}/opengraph-image.png`,
+        width: 1200,
+        height: 630,
+        alt: siteConfig.name,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: siteConfig.name,
+    description: siteConfig.description,
+    images: [`${process.env.NEXT_PUBLIC_APP_URL}/opengraph-image.png`],
+    creator: "@shadcn",
+  },
+  icons: {
+    icon: "/favicon.ico",
+    shortcut: "/favicon-16x16.png",
+    apple: "/apple-touch-icon.png",
+  },
+  manifest: `${siteConfig.url}/site.webmanifest`,
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              try {
+                if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                  document.querySelector('meta[name="theme-color"]').setAttribute('content', '${META_THEME_COLORS.dark}')
+                }
+                if (localStorage.layout) {
+                  document.documentElement.classList.add('layout-' + localStorage.layout)
+                }
+              } catch (_) {}
+            `,
+          }}
+        />
+        <meta name="theme-color" content={META_THEME_COLORS.light} />
+      </head>
+      <body
+        className={cn(
+          "text-foreground group/body overscroll-none font-sans antialiased [--footer-height:calc(var(--spacing)*14)] [--header-height:calc(var(--spacing)*14)] xl:[--footer-height:calc(var(--spacing)*24)]",
+          fontVariables
+        )}
+      >
+        <ThemeProvider>
+          <LayoutProvider>
+            <ActiveThemeProvider>
+              {children}
+              <TailwindIndicator />
+              <Toaster position="top-center" />
+              <Analytics />
+            </ActiveThemeProvider>
+          </LayoutProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/apps/v4/app/og/geist-regular-otf.json b/apps/v4/app/og/geist-regular-otf.json
new file mode 100644
index 00000000000..718fb521998
--- /dev/null
+++ b/apps/v4/app/og/geist-regular-otf.json
@@ -0,0 +1 @@
+{"base64Font":"T1RUTwAMAIAAAwBAQ0ZGIN9uOmAAABXMAACeZkdERUZBTj+sAAC0NAAAAT5HUE9Ttn3F0QAAtXQAABvSR1NVQpIcrgQAANFIAAASlE9TLzJPyiLTAAAL3AAAAGBjbWFwrm6KhgAADtQAAAbWaGVhZCrsuiMAAADUAAAANmhoZWEM9AjIAAALuAAAACRobXR487+RWAAAAQwAAAqqbWF4cAKrUAAAAADMAAAABm5hbWU8hhcjAAAMPAAAApdwb3N0/58AMgAAFawAAAAgAABQAAKrAAAAAQAAAAEAg2zs2StfDzz1AAMD6AAAAADhcDrwAAAAAOFwOvD/0/8kCSIDuAAAAAcAAgAAAAAAAAGuAFAA+gAAAqAAFQKgABUCoAAVAqAAFQKgABUCoAAVAqAAFQKgABUCwwAVAqAAFQKgABUD0QAVAqkAXAK+ADECvgAxAr4AMQK+ADECvgAxAr4AMQK/AFwDFwAxAr8AXAMXADECXABcAlwAXAJcAFwCXABcAlwAXAJcAFwCXABcAlwAXAJcAFwCXABcAtIAMQJZADICWQAyAk8AXALFADECxQAxAsUAMQLFADECxQAxAsUAMQLFADEC8wAxAsAAXANkAFwCwABcARAAXAMSAFwBEABcARD//QEQABABEABbARAADgEQAAgBEAAwARD/4AJWAEMCVgBDAlYAQwKNAFwCjQBcAo0AXAJFAFwCRQBcAh4AXAJFAFwCaAAWA24AXALjAFwC4wBcAuMAXALjAFwC4wBcAuMAXALsADEC7AAxAuwAMQLsADEC7AAxAuwAMQLsADEC8QAxAuwAMQQ+ADECiwBcAm0AXALmADECoQBcAqEAXAKhAFwCoQBcAokAOwKJADsAvAAxAokAOwKJADsCiQA7AokAOwK2AFwCQgAZAkIAGQJCABkCQgAZAkIAGQKyAE0CsgBNArIATQKyAE0CsgBNArIATQKyAE0CsgBNArIATQKyAE0CsgBNAp4AFQOQABUDkAAVA5AAFQOQABUDkAAVAnUAGwJ3ABUCdwAVAncAFQJ3ABUCdwAVAncAFQIfABsCHwAbAh8AGwIfABsCRQBcAuMAXAKnAFwCpwBcAqcAXAKnAFwBtgAxAbYAMQG2ADEBtgAxAbYAMQG2ADEBtgAxAbYAMQG2ADECvgAxAr4AMQK+ADECvgAxAr4AMQK+ADECoAAVAr4AMQJcAFwCXABcAsUAMQEQAAEBEABTAuwAMQKyAE0DkAAVAncAFQIfABsBtgAxAbYAMQK+ADEEVgAVBGgATQJAAC8CQAAvAkAALwJAAC8CQAAvAkAALwJAAC8CQAAvAkAALwJAAC8CQAAvA6QALwJXAFACKQAvAikALwIpAC8CKQAvAikALwIpAC8CVwAvAlMALwL4AC8CjAAvAjgALwI4AC8COAAvAjgALwI4AC8COAAvAjgALwI4AC8COAAvAjgALwI4AC8CWQAyAlkAMgGPADwCVgAvAlYALwJWAC8CVgAvAlYALwJWAC8CVgAvAnoALwJGAFACPAAZAkb/8AD2AE4A9gBQAPYAUAD2//AA9gADAPYATgD2AAEB8QBOAPb/+wD2ACIA9v/TAQX/+wEF//sBBf/7AQX/+wJPAFACT//tAk8AUAEcAFABHABQAZoAUAEcAEYBegBQA24AUAJGAFACRgBQAkYAUAJGAFACRgBQAkYAUAJEAC8CRAAvAkQALwJEAC8CRAAvAkQALwJEAC8CNgAMAkQALwPEAC8CVwBQAlcAUAJXAC8BfwBQAX8AUAF/ADcBfwAbAhMALwITAC8AvAAxAhMALwITAC8CEwAvAhMALwJPAFABjQA3AY0ANwHGADcBjQA3AY0ANwJAAFACQABQAkAAUAJAAFACQABQAkAAUAJAAFACQABQAkAAUAJAAFACQABQAhoAFgM0ABYDNAAWAzQAFgM0ABYDNAAWAksALwIaABYCGgAWAhoAFgIaABYCGgAWAhoAFgImADkCJgA5AiYAOQImADkBHABGAkYAUAIyACoCMgAqAjIAKgIyACoCMgAqAjIAKgIyACoCMgAqAjIAKgIyACoCMgAqAlcALwJXAC8CVwAvAlcALwJXAC8CVwAvAlcALwJXAC8CVwAvAlcALwJXAC8BDgBcAQ4AXAGeAFABDgAnAXoAUAJAAC8CKQAvAjgALwI4AC8CVgAvAPYARgD2//QA9gBGAfEARgD2ACIBBf/7AkQALwJAAFADNAAWAhoAFgImADkCMgAqAlcALwKwADwCvQA3AoUAPAKXADwCQAAvAkQALwKgABUC5AAxAj0AFQKUADcCZQAyAqAANgGBACgCawA8AmUAMgJ8ADICcgA8AnAAPAJJACgCXAAoAnAAPANAAC8DQAAvA0AALwNAAC8DQAAvA0AALwNAAC8DQAAvA0AALwNAAC8DQAAvA0AALwNAAC8DQAAvA0AALwNAAC8DQAAvA0AALwNAAC8DQAAvAqAANgGzABkCWAAUAlgAfgJYADsCWAAqAlgAMAJYADkCWAA4AlgAOwJYABoCWAA4AlgADQPQADEDwgAxA7oAMQO9ADEDzQAxA7cAMQPAADED0AAxA8sAMQSwAKYCWACVAlgAsgJYAKACWACgAlgAhAJYAKUCWAClAlgApgJYAJ8CWACoAlgAlQJYALICWACgAlgAoAJYAIQCWAClAlgApQJYAKYCWACfAlgAqAD6AAABYgAvCWAAPgcIAD4EsAA+AMsALwDLAC8BJQBcASUAXAI9AC8A2QA2ANkANgI3AC8CNwAvAMsALwEpAC8BtAAvAXgALwHe//YB4wAoAd4AMgKCACgBtAAvA44ALwHeADIAywAvAMsALwEUADYB3v/2AwIALwDLAC8CNwAvAWQALwC4AC8AywAvAeMAKADSAC8BLABcAS0AXAJFAC8A0gAvANIALwI3AC8CNwAvANIALwI0AC8A0gAvARQALwDSAC8CNwAvANMALwGqAC8BsAAvAlYALwOSAC8CNAAvA1sALwLQAC8BOQAvATkALwGoAC8BqAAvAVEALwFRAC8BZwAvAWcALwFxAC8BcQAvAagALwGoAC8BjQAvAY0ALwIOAC8CDgAvAY8ALwGPAC8BjQAvAY0ALwFnAC8BZwAvAVEALwFRAC8BOQAvATkALwDPADEBdgAxAXYAMQF2ADEAzwAxAM8AMQIaAC8CGgAvAVAALwFQAC8BaAAxALwAMQIDADwCgQBcBLAAPgcIAD4JYAA+BwcAPgNAAC8DQAAvA5IAMQJuACgCUQAjAi4AOwNEADECWgAxAloAMQN6AFwBjAAvAPwALwF3AC8BCABcAQgAXAI7AFwCOwBcBEQAXAJYAE8DWQAxAlgANAIpAC8CSwAxAokAOwLgADsCogA7AtEALgKoAFwDBwBcAmgAOwJ3ABUCOgAvAjoALwHnAC8COgAvApQAXAI6AC8CKQAxAiUALwI6AC8COgAvAjoALwIaAC8CGgAvAeUALwGSAC8DSQAvAXsAAAKMABUCaAAZAhIAGwJjABYCVQAvAlIAWgMCAC8ESAAvAtAAMQJ2ADEDKAAxAnYAMQLQADECdgAxAygAMQJ2ADEEFgAxAtAAMQKVADECqAAxAqgAMQKYADECmAAxAp8AMQKfADECnwAxAqQAMQKfADEDIgAVAaYAMQJeADEDBgAxAl4AMQGmADECXgAxAwYAMQJeADEDSgAxAaYAMQNUADEDVAAxA1QAMQIdADEDXQAVAzcAXANdABUDNwAVA10AFQM3AFwDXQAVAzcAFQAAAC8AAAAvAAAALwAAAC8AAAAvAAAALwAAAC8AAAAvAAAALwAAAC8AAAAvAAAALwAAAC8AAAAvAAAALwAAAC8AAADHAAAALwAAAC8AAAAvAUgALwC4AC8A/AAvAPwALwF2AC8BdAAvAXQALwF6AC8BGQAvAa4ALwFeAC8BNgAvAQUALwFnAC8AyAAvAM8AMQD8AC8AuAAvAlgAAANAAC8ALwAAAAEAAAOY/yQAZAlg/9P9mQkiAAEAAAAAAAAAAAAAAAAAAAKqAAQCTQGQAAUACAKKAlgAAABLAooCWAAAAV4AMgEJAAAAAAAAAAAAAAAAoQAA/wAB5fsAAAAQAAAAAFVLV04AwAAg/10DmP8kAGQDmADcIAAAkwAAAAACEgLGAAAAIAAEAAAAFgEOAAEAAAAAAAEABQAAAAEAAAAAAAIABwAFAAEAAAAAAAQADQAMAAEAAAAAAAUAIQAZAAEAAAAAAAYADQA6AAMAAQQJAAEACgBHAAMAAQQJAAIADgBRAAMAAQQJAAMAMABfAAMAAQQJAAQAGgCPAAMAAQQJAAUAQgCpAAMAAQQJAAYAGgDrAAMAAQQJABAACgBHAAMAAQQJABEADgBRAAMAAQQJAQAAEgEFAAMAAQQJAQEACgEXAAMAAQQJAQIACgEhAAMAAQQJAQMACgErAAMAAQQJAQQACgE1AAMAAQQJAQUACgE/AAMAAQQJAQYAFAFJAAMAAQQJAQcAFgFdAAMAAQQJAQgAFgFzR2Vpc3RSZWd1bGFyR2Vpc3QgUmVndWxhclZlcnNpb24gMS4wMDI7R2x5cGhzIDMuMS4yICgzMTUxKUdlaXN0LVJlZ3VsYXIARwBlAGkAcwB0AFIAZQBnAHUAbABhAHIAMQAuADAAMAAyADsAVQBLAFcATgA7AEcAZQBpAHMAdAAtAFIAZQBnAHUAbABhAHIARwBlAGkAcwB0ACAAUgBlAGcAdQBsAGEAcgBWAGUAcgBzAGkAbwBuACAAMQAuADAAMAAyADsARwBsAHkAcABoAHMAIAAzAC4AMQAuADIAIAAoADMAMQA1ADEAKQBHAGUAaQBzAHQALQBSAGUAZwB1AGwAYQByAE4AbwAgAHQAYQBpAGwAIABhAEEAbAB0ACAAYQBBAGwAdAAgAGwAQQBsAHQAIABSAEEAbAB0ACAASQBBAGwAdAAgAEcAQQBsAHQAIABhAHIAcgBvAHcAcwBSAG8AdQBuAGQAZQBkACAAZABvAHQAQQBsAHQAIABuAHUAbQBiAGUAcgBzAAAAAAIAAAADAAAAFAADAAEAAAAUAAQGwgAAANgAgAAGAFgALwA5AH4BEwErATcBPgFIAU0BfgGPAZIBtwHOAekB7wIbAjcCWQKSArkCvALIAt0DBAMIAwwDEgMoAzUDmwOpA7sDwA4/HiEehR6eHr0e8x75IBQgGiAeICIgJiAwIDMgOiBEIHAgeSCJIKogrCC0ILkgvSEHIRchIiFVIV4hmSGdIaohsSG1IeUh5yICIgYiDyISIhoiHiIrIkgiYCJlI84kDCRoJOok/yWzJbclvSXBJcwlzyY6J34wAzARMBcwHKeM/wP/Cv8P/xv/IP89/z//W/9d//8AAAAgADAAOgCgARYBLgE5AUEBSgFQAY8BkgG3Ac0B5AHuAhgCNwJZApICuQK8AsYC2AMAAwYDCgMSAyYDNQObA6kDuwPADj8eIB6AHp4evB7yHvggEyAYIBwgICAmIDAgMiA5IEQgcCB0IIAgqiCsILQguSC9IQchFiEiIVMhWyGQIZ0hqSGwIbMh5CHnIgIiBiIPIhEiGiIeIisiSCJgImQjziQLJGAk6iT/JbIltiW8JcAlyiXPJjkndjACMAgwFDAcp4v/Af8F/wz/Gv8f/zv/P/9b/13//wAAAUAAAAAAAAAAAAAAAAAAAAAA/pQAh/5tAAAAAAAAAAD+s/52/j7/7f/pAAAAAAAAAAAAAP98/2n/Xf3Q/cP9sv2u89sAAAAA4cgAAAAAAADh2wAAAAAAAOGc4ibh+OHc4VbhP+E/4SXhkeGL4YThgeF84GgAAOEGAADgRgAA4MTgu+C24LXgfuCE4FHgSeBBAADgOOAv4CPgAd/jAADeZAAA3SXcmtx7AAAAAAAAAAAAANyn2+baBQAAAAAAANHVAAAAAAAAAAAAAAAAAAACpwKiAqEAAQDYAAAA9AF8AmICjAKeAqgCtgK8AAAAAAAAAxIDFAMeAyAAAAAAAAAAAAAAAxwDIAMqAzIDNgAAAAAAAAAAAAAAAAAAAAADKgMsAAADNAM2AzgAAAM4AzwDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADKAAAAygAAAMqAAAAAAAAAAAAAAAAAAAAAAAAAyoAAAAAAAAAAAAAAyIAAAMiAAAAAAAAAx4DIAMiAyQDJgAAAAAAAAMkAyYDOAAAAzwDPgNCA0wDUgNUA1YAAAAAAAAAAAABAcMCFwHLAjYCVQIiAhgB8wH0AckCPgG/AewBvgHMAcABwQJFAkICRAHFAiEAAgAOAA8AFQAZACYAJwAvADIAPAA/AEIARwBIAE4AWABaAFsAXwBnAGwAdwB4AH0AfgCEAfcBzQH4AkwB8AKYAK4AugC7AMEAxQDSANMA2wDeAOkA7QDwAPUA9gD8AQYBCAEJAQ0BFQEaASUBJgErASwBMgH1AiwB9gJKAbkBxAI0AjwCNQI9Ai0CJAKWAiUBaQITAksB7QImAqACKQJIAbEBsgKZAlQCIwHHAqEBsAFqAhQBngGbAZ8BxgAIAAMABgAMAAcACwANABIAHwAaABwAHQA4ADQANQA2ABYATABSAE8AUABWAFECQABVAHEAbQBvAHAAfwBZARQAtACvALIAuACzALcAuQC+AMsAxgDIAMkA5ADgAOEA4gDCAPoBAAD9AP4BBAD/AkEBAwEfARsBHQEeAS0BBwEvAAkAtQAEALAACgC2ABAAvAATAL8AFADAABEAvQAXAMMAGADEACAAzAAeAMoAIQDNABsAxwAqANYAKADUACwA2AArANcAMQDdADAA3AA7AOgAOQDmADoA5wA3AN8AMwDlAD4A7ABBAO8AQwDxAEUA8wBEAPIARgD0AEkA9wBLAPkASgD4AE0A+wBUAQIAUwEBAFcBBQBcAQoAXgEMAF0BCwBgAQ4AZAESAGMBEQBiARAAagEYAGkBFwBoARYAdgEkAHMBIQBuARwAdQEjAHIBIAB0ASIAegEoAIABLgCBAIUBMwCHATUAhgE0AAUAsQAuANoAKQDVAEAA7gAlANEAZQETAGsBGQKbApwCpwKdApcCngKiAp8CmgKEAoUCiAKMAo0CigKDAoICiwKGAokALQDZAHwBKgB5AScAewEpACIAzgCCATAAgwExAhECEgINAg8CEAIOAi4CLwHIAjACJwGcAZ0BoAJdAlcCWQJbAl8CYAJeAlgCWgJcAlECPwJHAkYCMwIxAnoCfgJ7An8CfAKAAn0CgQJ5AncCeAG6AcoB+QH6AgECAgH/AgACBQIGAfsB/AIDAgQCBwIIAGEBDwHUAdkB1QHWAc4B2gILAgwBzwHTAfIB1wHcAdIB2wHYAdACCQHRAgoAAAADAAAAAAAA/5wAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAQAEAgABAQEOR2Vpc3QtUmVndWxhcgABAQEp+BEA+eMB+eQC+BgE+xEMA177cBwJIvpMBRwrGg8cLhIRqR0AAI1CEgHKAgABAAcADgAVABwAIgAoADMAPQBDAEkATwBZAGAAZwBuAHUAfACDAIkAjwCaAKEAqwCyALkAvQDIAMoA1ADbAOIA6ADzAP4BBQEMARIBGAEfASUBKwEyATUBQgFJAU8BVQFcAWIBaQFxAXwBgwGKAY4BlAGbAaIBqAG1AbwBwwHIAc4B1AHfAegB7gH5Af8CBgIMAhYCJQI0AjoCRQJQAlwCYgJtAn0CiwKaAqUCsQK9AsgCzgLZAukC9QMEAxADHgMtAzsDSgNZA2cDdgOEA5IDoAOuA70D0APkA/gEAAQIBA4EFQQcBCMEKQQvBDoERARKBFAEVgRgBGcEbgR1BHwEgwSKBJAElgShBKgEsgS5BMAExATPBNgE2gThBOgE7gT1BQAFCwUSBRkFHwUlBSwFMgU4BT8FQgVPBVYFXAViBWkFbwV2BX4FiQWQBZQFmgWhBagFrgW7BcIFyQXOBdQF2gXlBe4F9AX/BgUGDAYSBhwGKwY6BkAGSwZWBmIGcgaABosGlwajBq0GuAa+BskG1AbgBvAG/gcJBxUHIQcrBzYHPAdHB1IHXgdpB3cHhgeUB6MHsge4B8YH1AfbB+cH7Qf7CAkIFwglCDQIRwhaCGIIaghxCHgIfgiFCIsIjQiUCJsIogipCLAItwi+CMUIzAjTCNoI4QjoCO8I9gj9CQQJCwkSCRkJIAkpCTEJOAk+CUQJTAlTCVoJYAloCXAJdwl+CYUJjAmTCZoJoQmoCa8Jtgm9CcQJywnSCdkJ4AnnCe4J9Qn8CgMKCgoRChgKHwomCkcKYQp0CnsKggqJCpAKlwqeCqUKrAqzCroKwQrICs8K1grdCuQK7wr5CwcLFAsfCy4LOwtMC18LZgtyC34LiguWC6ILqQuwC7cLvgvFC8wL0wvaC+EL6AvvC/YL/QwEDAsMEgwZDCAMJwwuDDUMPAxDDEoMWgxxDI8MpwyuDLcMvgzEDMoM0QzYDN8M5gzqDPEM+Az/DQYNDg0aDSMNLg02DT4NRQ1MDVUNXA1nDW4NdQ18DYYNjQ2WDZ0Npg2tDbYNvw3GDc0N1A3bDeIN6Q3wDfcN/g4MDhMOHw4rDjoORg5UDmAObg56DogOlg6dDqMOqg6xDrgOvw7GDs0O1A7bDuIO6Q7wDvcPAA8JDxAPGw8iDykPMA83D0APRw9OD1UPXA9jD2oPeQ+FD5EPng+sD7MPug/BD8sP1w/pD/oQB0FicmV2ZXVuaTAxQ0RBbWFjcm9uQW9nb25la0NhY3V0ZUNjYXJvbkNjaXJjdW1mbGV4Q2RvdGFjY2VudERjYXJvbkRjcm9hdEVjYXJvbkVkb3RhY2NlbnRFbWFjcm9uRW9nb25la3VuaTFFQkN1bmkwMThGdW5pMDFCN3VuaTAxRUVHYnJldmVHY2Fyb25HY2lyY3VtZmxleHVuaTAxMjJHZG90YWNjZW50dW5pMUUyMHVuaTAxRTRIYmFySGNpcmN1bWZsZXhJSklkb3RhY2NlbnRJbWFjcm9uSW9nb25la0l0aWxkZXVuaTAwNEEwMzAxSmNpcmN1bWZsZXh1bmkwMUU4dW5pMDEzNkxhY3V0ZUxjYXJvbnVuaTAxM0JOYWN1dGVOY2Fyb251bmkwMTQ1RW5nT2h1bmdhcnVtbGF1dE9tYWNyb25SYWN1dGVSY2Fyb251bmkwMTU2U2FjdXRldW5pQTc4QlNjZWRpbGxhU2NpcmN1bWZsZXh1bmkwMjE4dW5pMUU5RVRiYXJUY2Fyb251bmkwMTYydW5pMDIxQVVicmV2ZVVodW5nYXJ1bWxhdXRVbWFjcm9uVW9nb25la1VyaW5nVXRpbGRlV2FjdXRlV2NpcmN1bWZsZXhXZGllcmVzaXNXZ3JhdmVZY2lyY3VtZmxleFlncmF2ZXVuaTFFRjhaYWN1dGVaZG90YWNjZW50dW5pMDEzQi5sb2NsTUFIdW5pMDE0NS5sb2NsTUFIUi5zczA0UmFjdXRlLnNzMDRSY2Fyb24uc3MwNHVuaTAxNTYuc3MwNEkuc3MwNUlhY3V0ZS5zczA1SWNpcmN1bWZsZXguc3MwNUlkaWVyZXNpcy5zczA1SWRvdGFjY2VudC5zczA1SWdyYXZlLnNzMDVJbWFjcm9uLnNzMDVJb2dvbmVrLnNzMDVJdGlsZGUuc3MwNUcuc3MwNkdicmV2ZS5zczA2R2NpcmN1bWZsZXguc3MwNnVuaTAxMjIuc3MwNkdkb3RhY2NlbnQuc3MwNnVuaTFFMjAuc3MwNkFkaWVyZXNpcy5zczA4Q2RvdGFjY2VudC5zczA4RWRpZXJlc2lzLnNzMDhFZG90YWNjZW50LnNzMDhHZG90YWNjZW50LnNzMDhJZGllcmVzaXMuc3MwOElkb3RhY2NlbnQuc3MwOE9kaWVyZXNpcy5zczA4VWRpZXJlc2lzLnNzMDhXZGllcmVzaXMuc3MwOFlkaWVyZXNpcy5zczA4WmRvdGFjY2VudC5zczA4SWRpZXJlc2lzLnNzMDUuc3MwOElkb3RhY2NlbnQuc3MwNS5zczA4R2RvdGFjY2VudC5zczA2LnNzMDhBX0kuZGxpZ1VfSS5kbGlnYWJyZXZldW5pMDFDRWFtYWNyb25hb2dvbmVrY2FjdXRlY2Nhcm9uY2NpcmN1bWZsZXhjZG90YWNjZW50ZGNhcm9uZGNyb2F0ZWNhcm9uZWRvdGFjY2VudGVtYWNyb25lb2dvbmVrdW5pMUVCRHVuaTAyNTl1bmkwMjkydW5pMDFFRmdicmV2ZWdjYXJvbmdjaXJjdW1mbGV4dW5pMDEyM2dkb3RhY2NlbnR1bmkxRTIxdW5pMDFFNWhiYXJoY2lyY3VtZmxleGkubG9jbFRSS2lqaW1hY3JvbmlvZ29uZWtpdGlsZGV1bmkwMjM3dW5pMDA2QTAzMDFqY2lyY3VtZmxleHVuaTAxRTl1bmkwMTM3bGFjdXRlbGNhcm9udW5pMDEzQ25hY3V0ZW5jYXJvbnVuaTAxNDZlbmdvaHVuZ2FydW1sYXV0b21hY3JvbnJhY3V0ZXJjYXJvbnVuaTAxNTdzYWN1dGV1bmlBNzhDc2NlZGlsbGFzY2lyY3VtZmxleHVuaTAyMTl0YmFydGNhcm9udW5pMDE2M3VuaTAyMUJ1YnJldmV1aHVuZ2FydW1sYXV0dW1hY3JvbnVvZ29uZWt1cmluZ3V0aWxkZXdhY3V0ZXdjaXJjdW1mbGV4d2RpZXJlc2lzd2dyYXZleWNpcmN1bWZsZXh5Z3JhdmV1bmkxRUY5emFjdXRlemRvdGFjY2VudHVuaTAxM0MubG9jbE1BSHVuaTAxNDYubG9jbE1BSGEuc3MwMWFhY3V0ZS5zczAxYWJyZXZlLnNzMDF1bmkwMUNFLnNzMDFhY2lyY3VtZmxleC5zczAxYWRpZXJlc2lzLnNzMDFhZ3JhdmUuc3MwMWFtYWNyb24uc3MwMWFvZ29uZWsuc3MwMWFyaW5nLnNzMDFhdGlsZGUuc3MwMWEuc3MwMmFhY3V0ZS5zczAyYWJyZXZlLnNzMDJ1bmkwMUNFLnNzMDJhY2lyY3VtZmxleC5zczAyYWRpZXJlc2lzLnNzMDJhZ3JhdmUuc3MwMmFtYWNyb24uc3MwMmFvZ29uZWsuc3MwMmFyaW5nLnNzMDJhdGlsZGUuc3MwMmwuc3MwM2xhY3V0ZS5zczAzbGNhcm9uLnNzMDN1bmkwMTNDLnNzMDNsc2xhc2guc3MwM2FkaWVyZXNpcy5zczA4Y2RvdGFjY2VudC5zczA4ZWRpZXJlc2lzLnNzMDhlZG90YWNjZW50LnNzMDhnZG90YWNjZW50LnNzMDhpLnNzMDhpZGllcmVzaXMuc3MwOGkubG9jbFRSSy5zczA4aWouc3MwOGlvZ29uZWsuc3MwOGouc3MwOG9kaWVyZXNpcy5zczA4dWRpZXJlc2lzLnNzMDh3ZGllcmVzaXMuc3MwOHlkaWVyZXNpcy5zczA4emRvdGFjY2VudC5zczA4YWRpZXJlc2lzLnNzMDEuc3MwOGFkaWVyZXNpcy5zczAyLnNzMDhmX2YubGlnYXRfdC5saWdhZmkubGlnYWZsLmxpZ2FMYW1iZGF1bmkwM0E5bGFtYmRhcGl1bmkyMTA3dW5pMjRGRnVuaTI3NzZ1bmkyNzc3dW5pMjc3OHVuaTI3Nzl1bmkyNzdBdW5pMjc3QnVuaTI3N0N1bmkyNzdEdW5pMjc3RXVuaTI0RUF1bmkyNDYwdW5pMjQ2MXVuaTI0NjJ1bmkyNDYzdW5pMjQ2NHVuaTI0NjV1bmkyNDY2dW5pMjQ2N3VuaTI0Njh6ZXJvLnNzMDlvbmUuc3MwOXplcm8udGZvbmUudGZ0d28udGZ0aHJlZS50ZmZvdXIudGZmaXZlLnRmc2l4LnRmc2V2ZW4udGZlaWdodC50Zm5pbmUudGZ1bmkyMTUzdW5pMjE1NHVuaTIxNTV1bmkyMDgwdW5pMjA4MXVuaTIwODJ1bmkyMDgzdW5pMjA4NHVuaTIwODV1bmkyMDg2dW5pMjA4N3VuaTIwODh1bmkyMDg5dW5pMjA3MHVuaTAwQjl1bmkwMEIydW5pMDBCM3VuaTIwNzR1bmkyMDc1dW5pMjA3NnVuaTIwNzd1bmkyMDc4dW5pMjA3OXVuaTAwQTB1bmkzMDAyaHlwaGVuX2h5cGhlbl9oeXBoZW5fZ3JlYXRlci5saWdhaHlwaGVuX2h5cGhlbl9ncmVhdGVyLmxpZ2FoeXBoZW5fZ3JlYXRlci5saWdhdW5pMzAwM3VuaUZGMDZ1bmlGRjBBdW5pRkYyMHVuaUZGM0N1bmlGRjFBdW5pRkYwQ3VuaUZGMDF1bmlGRjAzdW5pRkYwNXVuaUZGMEV1bmlGRjFGdW5pRkYwMnVuaUZGMDd1bmlGRjFCdW5pRkYwRnBlcmlvZC5zczA4Y29sb24uc3MwOHNlbWljb2xvbi5zczA4ZWxsaXBzaXMuc3MwOGV4Y2xhbS5zczA4ZXhjbGFtZG93bi5zczA4cXVlc3Rpb24uc3MwOHF1ZXN0aW9uZG93bi5zczA4cGVyaW9kY2VudGVyZWQuc3MwOHVuaUZGM0Z1bmlGRjFBLnNzMDh1bmlGRjAxLnNzMDh1bmlGRjBFLnNzMDh1bmlGRjFGLnNzMDh1bmlGRjFCLnNzMDh1bmkwMEFEdW5pMzAxQ3VuaUZGMER1bmkzMDA4dW5pMzAwOXVuaTMwMTB1bmkzMDExdW5pRkY1QnVuaUZGNUR1bmkzMDBDdW5pMzAwRHVuaTMwMEF1bmkzMDBCdW5pMzAxNHVuaTMwMTV1bmkzMDBFdW5pMzAwRnVuaTMwMTZ1bmkzMDE3dW5pRkYzQnVuaUZGM0R1bmlGRjA4dW5pRkYwOXVuaTBFM0ZsZXNzX2h5cGhlbi5saWdhbGVzc19oeXBoZW5faHlwaGVuLmxpZ2FsZXNzX2h5cGhlbl9oeXBoZW5faHlwaGVuLmxpZ2FsZXNzX2h5cGhlbl9ncmVhdGVyLmxpZ2F1bmkyNjM5c21pbGVmYWNldW5pMjExN21pbnV0ZXNlY29uZHVuaTIxMTZ1bmkyNDBDdW5pMjNDRXVuaTI0MEJFdXJvdW5pMjBCNHVuaTIwQkR1bmkyMEI5dW5pMjBBQW5vdGVxdWFsZ3JlYXRlcmVxdWFsbGVzc2VxdWFsYXBwcm94ZXF1YWxpbmZpbml0eWludGVncmFsdW5pMjIwNnByb2R1Y3RzdW1tYXRpb25yYWRpY2FscGFydGlhbGRpZmZ1bmkwMEI1YXJyb3d1cHVuaTIxOTdhcnJvd3JpZ2h0dW5pMjE5OGFycm93ZG93bnVuaTIxOTlhcnJvd2xlZnR1bmkyMTk2YXJyb3dib3RoYXJyb3d1cGRudW5pMjE5RHVuaTIxRTR1bmkyMUU1dW5pMjFBOXVuaTIxQUF1bmkyMUIwdW5pMjFCMXVuaTIxQjN1bmkyMUI0Y2FycmlhZ2VyZXR1cm51bmkyMUU3YXJyb3d1cC5zczA3dW5pMjE5Ny5zczA3YXJyb3dyaWdodC5zczA3dW5pMjE5OC5zczA3YXJyb3dkb3duLnNzMDd1bmkyMTk5LnNzMDdhcnJvd2xlZnQuc3MwN3VuaTIxOTYuc3MwN2Fycm93Ym90aC5zczA3YXJyb3d1cGRuLnNzMDd1bmkyNUNGY2lyY2xldW5pMjVDQ2xvemVuZ2V0cmlhZ3VwdW5pMjVCNnRyaWFnZG51bmkyNUMwdW5pMjVCM3VuaTI1Qjd1bmkyNUJEdW5pMjVDMXVuaTAzMDh1bmkwMzA3Z3JhdmVjb21iYWN1dGVjb21idW5pMDMwQnVuaTAzMEMuYWx0dW5pMDMwMnVuaTAzMEN1bmkwMzA2dW5pMDMwQXRpbGRlY29tYnVuaTAzMDR1bmkwMzEydW5pMDMyNnVuaTAzMjd1bmkwMzI4dW5pMDMzNXVuaTAzMjYubG9jbE1BSHVuaTAzMDguc3MwOHVuaTAzMDcuc3MwOGRpZXJlc2lzLnNzMDhkb3RhY2NlbnQuc3MwOHVuaTAyQkN1bmkwMkI5dW5pMDJDOE51ZXZvR2xpZm9ibGFja0NpcmNsZWRibGFja0NpcmNsZWRTdHJva2Vjb3B5cmlnaHQgbWlzc2luZ0dlaXN0IFJlZ3VsYXIBAQIAAQAFABAAFgAcACIAKAA2AD4ARABrAHUAfgCHAJ8AogCvALoAwQDJANEA1gDkAO8A+wECAVABZQF7AYUBjgGTAZoBpgGwAbMBwwHLAdUB3QHkAeoCBAIQAisCRAJWAmUCcAJ4AoECjwKWAp8CpwKtArICwwLOAtsC6wLwAwYDDwMbAyUDLAM0AzsDQwOCA84D0gQIBBQEGAQgBC0ESwRlBHYEewSGBI8ElwSfBKgErwS2BL0ExQTNBNUE4ATnBQQFSwWGBbYFvgXjBfYGFAYaBikGOAZRBmkGdAZ5BoUGiwaWBqAGqgazBsAGzQbZBt8G5wdJB6gH8ggfCHoIowkQCUcJpQoCCj4KhQrYCxwLKAtVC50LvQv/DDMMPwx5DLAM5g0DDRANJQ03DVgNhw2lDdEN7Q31DiEORQ5eDmcOjA6sDroO4Q8EDyoPPA9dD4APjg+hD8IP0g/xEBAQGRA5EEYQWhBfEHoQlxCaELYQyRDSEO0Q9xEQESoRRBFdEXQRjBGkEbwR0hHoEf8SFhIlEjwSUhJnEnsSjxKjErcSyRLTEuYS7hL/ExATIhMmEzcTQRNSE1YTZhN1E4UTlROlE7UTwxPSE+ET8BP+FAwUGhQoFDYUPhRHFFAUXRRqFHcUhBSRFJ4UphSrFLcUwRTJFNEU3BTnFPIU/RUIFRMVHhUpFTL5WhULFXwdPQZONk7gBQ4V5ewxBg5/3fga3Qt74fjO4QuL4fiu4QsVyga6mZ+mo5d6epweCxX3lMv7lAYO9wxorhILFW2idKqpo6KpqnOhbWx0dWwe9zEWbaJ0qqmjoqmqc6FtbHR1bB4O9wv37vcL++4FC3/d9zzX9ybdC/cHHesG9xQdC0cHv21Vpz0b+y5F+xj7Jfsl0fsY9y4fC+8dDvcQogVoBylHUjWHHgugdvdd4ffu2It3C93Dq8GoHwt/02R2+GDdC3/XS9f4FN0L0kT3OwvD+AoV5oQFx5u3rM0bC9i9YDOMH/subwUL9xj3IRXXy4rZmh4L+yrX+PB3C9YD+DR/Ffdg9zn3Ofdh91/7Ofc5+2D7YPs5+zn7X/th9zn7OfdgH/u6+AYV9zj3FfcV9zn3OfcV+xX7OPs5+xX7Fvs5+zn7FfcW9zkeC6+aoKWzGspWuUZHVV1MY6Bxr3weC573TBWpop6traJ4bWl0dWlpdKGtHg74hBb4pjX70AcL9x8d9/Ldf3cLd+4oHQtbeG9kWhoL4wODHfc58vH3Nh4LjTgF2ffUBuQdC+gdDjkHxXNPr0Mb+x0rIfsrHwvnIB39WuMHCxXOBub3FgUsBgv7cMGtdtK4Cy9SzvcAHwv3z9sByQu6950VVR3x5cnvqh5tHfsnK/sA+z0f6HAdC40d9z0r9wD7J74dC/hc+KYVLwb7EfxH+xH4RwUvBvc3/KYF9wAGC/cJ+CT3CfwkBfcABvc3+KYFLwb7EfxHBQs+h2i3tBoxFmEd3o3Lt6G8CAvnxEj7AIkf+wCKUkgyGwvb+KYV/Kbh+KYHC0LIXtuQHR4Lzgbm9xYFLAYOEtv/AE+AAP//sIAA4Qvp48HZqR8Li/cNJ3b5WncL+z3r+wD3JwvhNuA33wvjA34dC/mMXx37cvjQFeuMBfuOzwcL+PX3FgG69zKHHQ73WxV8HT0GTjZO4AUO/wAxgADjd6B3Evclz1m9CxX3AB0L95zH+1EGjKKmpbGlp54YxbKutsAaCxWUHWqkc6wfCyAdNgb8ff1aBeAGCwHn4wPnIB39Wgss4VP0iR4Ldvex4feR4QsoSntJTRoL+xp29y/3AgsVIgdOxuZl4hv3MPcA5fcT9wQ45PsKmB/3UvdXBe/8fTX4EAf7WPtfBTQHwYwF743RVDoaPkRVJkIvudNDHgsB5+P34OcD9/4gHfui/Vrj97H3QQbytXZLkR+d+1wF5AZ392WE1m2vRZYZyp3Eyt4a9xgu3vspHvtK++cV95H3SgfrwV06OlVeKx8LA38dC/Md97H3OwaWBvc2+7EF7Ab7Pfe+BeymwdLuGvcbLtv7Mx77O/vnFfeR9zsH8sRdOjpSXiQfC8wD+DR/FXUdiR0fCwO1HQtFHcb7FkUdDs1ZuUVBVVo+gh7nHQsvkgVUc1hrUxsxVcn1gx/4EwaKsgX3UoIi1vsIGwsD+JD5AhXj/GQ19/4H/A/8qQUw+H3h/BoHC/f3FfvK98sF+wUG96P7owULvPcKHQtTlkagvxq9uqjFC/fL+8sF9wUGC2qkc6yUHR4OErrl95xWHQv7YPs59zn3YQuae3eYZhsL+wb6OwG6C/UyrPsMogt/3Vp2+GTZC/sFOEokdh8Le8d0dvdFxAvh+wwF9Abi9wwFCwG65gNJHQv4B/f8FTX3Wwf7B4dGMvsStB33SvT3D/dkH7gHC/km934VLZEF+wF2Rk4kG/s1RvcZ9yv3LM/3Gvc27M9UKKIf6JEF9yBsKOn7Kxv7YvsI+zr7Yvth9wn7Ofdh9zjs8PcppR8Lf9dgdvimd+73FhLb4feI4TndE3w8HRO8KVRXOj9rv+0e99A1++kH+wTFMvcKHhO60Miqz6cfE3o0BwvhOd0TeQA8HRO5AClUVzo/a7/tHvfQNfvpB/sExTL3Ch4TuIDQyKrPpx8TdIA0BwtgHfhb9wEdC/j594wV+GMz/GMH+wZKS/sH+wdKy/cGHvhjM/xjB/s28iX3OQtycIBsbRpatGe9pKWTn6QezAcLtpiisbAaxVa5RkxUYVWDHsyHBaGOop2uG6ukc20L3Pt/4B0LA/dh+XcVLAZM+xYFzgYL+OcH9+f85wX3FPlaMwYL91/3Ofc592D3YPc5+zn7X/th+zn7OftgC9sgHfzyB021Yckex9ddBnWBlaEf+O4HC9+UFe/3GQX7GQcO9xXvHQv3tn8V9yfr9wD3PQslHdr3DAtxeXpvaXOtnX0eC9vIuNS8brFcnwvrjAX7js/4GAcLFTv4cNsH/HALKss+3NzL2OzsS9g6C6yko6yscqNqanJzagtFT2gx+wRJy+p4HgtfdKq7Hw4zHc73FpodC+E24DndE/aA962nFc7FrsOlHzQHQlNkLkpeqLx1HjGFBS6k3073BRv3H+vV9yAfE+6A+HIHE+4gOQYT9iBDHRP2gPsr7CH3HR77JPeVFfcAxM7nHhP2QE4dE/aARx0T94AL4TbgOd0T94D3racVzsWuw6UfNAdCU2QuSl6ovHUeMYUFLqTfTvcFG/cf69X3IB8T74D4cgcT7yA5BhP3IEMdE/eA+yvsIfcdHvsk95UV9wDEzuceE/dATh0T94BHHQt0HRO5NR0TvOC1YDOMH/subQX7CnQ5cPsCGizhU/QeE7rfxbi7oR8Teku7esEeE3mw13UGdYGVoR/3aAf3Ij7b+x0eE7l6HYYdC+E33zzaE7hANx0TuIAvHRO4QE0dE3hAQR0TuQA2HRO4QPsJdjhw+wQaE7YAC3/dRdH4Hs1J2c73FhK65fe84f//sIAA/wBPgAA92ROsgPib+KYVE64ANQYTngAtHROdADEdE1yAjkEF2QYTnID8EvedFfK16/cC9wG2KiUpYCr7AfsCYevuHgsSteX3nOE33zzaE7k3HRO6Lx0TuU0dE3lBHRO8Nh0TufsJdjhw+wQaC6B291jT9z/T91t3AYH4gQOvFtQGr/dYBfcZBmf7WAXUBq/3WAXcBpbTBTwGq/c/BdcGltMFQQaw91tBimf7WgX7GQaw91tBimf7WgUyBoBDBeEGbPs/BTcGgEMF3Qbh0xWr9z8F9xgGbPs/BQ6F9wb4qOESuufo9wj7Ad/05xPs94P3YBXfBsKeu72tHubJxh1bdlReHkxWdEtBGhP0hPstFXMd4fjK4QHV5/fg5wP3K/d9FS+FBfskl/cGLPcwG/cU9w3P9xj3ASPL+xSvHzSjIqLiGs7Gtdvsz1EzmB7nkQX3F3wm6vstG/scK0D7DPsH9VL3B24f9yFnyWBDGpUdC/huFfsm6iX3IdfKrsuyHvs4fUswIhtPXKa7dB8uhAUnruBV8hv3Yc/3XPdp9wNy5VjAH8BXTKFNG/snIyr7Lx/nFuzM0OceE/jqzUYqiR8sikZIKxsT9DNNzuofDov3Avim4RK65+D3ASvj8ucT7PeB92AV4wbQnK3BsB7ixsYdXHhYYB5EUXVaMxoT1H77YBX3AfcC+wEGDvtS9xbcdvhm1393Uh33juET1tv4phX8puH30QcT5uzCv9/aq1cqHvvR4ffpB/cEUeT7DR4T6kJNa0RwHxPaiOYFsP1kRR0O+wfb+VXbAfdV3LTJA/gN96cV4AdPiWDD3BreB/BB0iEeXDsG9Y+zckYaLwcxvkrSfR6KB0J9WkkwGi8HRmNyIY8eO7oH9dXS8B/eB9y2w8eJHg4VypEFyHlarFQbIGP7BfsKKrY06NfFweLfVcJGHxP09xodE+ypnn5wlR/7HftCFbuMqaqxG7eibFtacmtgYm+rvIwfDiMdAbrl98blA0odDvtr00P3axK6NB0TYPcoXhWquAUTUFEGZWEFE5CEHROg9yIdHxNgn5ujmZ8eDvgKexX3X/cO9yH3efd7+w73Iftf+1/7Dvsh+3v7efcO+yH3Xx/7ffgGFfdG4vcA9yb3JuL7APtG+0Q0+wD7JvsmNPcA90QeC/tS9xbH9wgdE65EHRO2iB0TzvzyB/vt+PIFxv4YRR0O+IYV54UF6p7FwOAb2sJbR1RUVUJcH/sLP/suPvtrGviH4fwaBo7S9x/rwKoI9s3d0fMa9wgr4fsW+yIuKvsXeB4ORh0S92PDE3DyWxWnZgW2lax7axoT8I8dE3BhZAUT8F6yqnW7G8K2tL/AY7BSH7a6BVYGDjgd7vcWAaH4gmodC/sbFfsg9wT7Bvcg9yD3BPcG9yD3H/sE9wX7IPsg+wT7BfsfHsQW9uPi9vXkNCD7ADIzISAz4/cAHgv4mcf3GXcBuvfqA/gZ+NUV+wsGx/JXqU8kT/JXbcckBfsLT/cLBk8kv23H8sckv6lP8gX3CwYO+N3D1sMBusPWwwP3IfjdFb61s8C/YbVYV2FhV1a1Y78fZekVnpydoJ+ceXh3enl3dnqdnx4Oi/cC+Ox3EsH3ASzjE9DP2h0l/VoV9wH3AvsBBg73AB0T+IUdcnJvZx8L+1L3FsfX+Q53AdvhA4odK/4YRR0OoHb4pnfs8hLR9Sv3Ax0rjB0O8B0soh/nkQX3IGwo6fsrG/ti+wj7Ovti+2H3Cfs592ELofimFfdV/JwFqAZ4WgVygXyBchtOP9EGx7GlxJ8f92r46QUwBvst/Er7MvhKBQvX+A7XAfcY4QP3GPkeFfsMPj/Y+8wHMMBY6x7sHQv7Atv5UNsSuveHOd0T0Pe2+YIVE+D7hzsGE9D3Nf1QBhPg+zU7BhPQ94cGDvfyXh0T6Fn78hW0BmT7LwW9BsT3LwX3AvsBBw4wHe73Fs0dC6B2+Vp37vcWAfek4wOgIB33j/w4Bfu24/e2B/eO+DgFIwb7Uvvb+1P32wULYB3j94EH5e/3jfvlBfYG+734Jveq98gF+wMG+9D78gX38gcLEufj+A/jE15EHRNuiB0TnvzyB/vt+PIFC4VeHVH4MhVzHfsnK/sA+z1VHR/7LfepFfcOw9Ts7MNC+w77DlNCKipT1PcOHgv3yfv/FZMdOks+Kh7YFsalsLW1pmZQUHBmYWFxsMYeC/tS9xbH7R33Ef4YRR0OTp29asIb5cTk9yLsYOIuP1FVNDfBVNAfE/SyqZumnx9AgmpgXBsLJR3a9xYB90PjA/gTIB373DX3DPyu+xI19+jh+xL4rvcMBgvhA/cX+McVakQ/0vxa4fha9xnX+xmsB7ejpq0e3dc5BiheUTIfC6B2+KZ38uwS2eUz9wMdM94iHSAdE7CP+5sFyQaj90sF2wf7mjsVo/tLBckGj/ebBTEGDrDC0Br3CSnd+yD7ECgq+xV/HueFBeGWw8fcG+HDXEmKH0kL+PX3FgG696yHHcIWUR0VtaqouLiqbmFlbHNeXmyjsR4LE+igIB33j/w4Bfu24/e2B/eO+DgFIwb7Uvvb+1P32wUL+JsgHTX7jOod1cuswKgfCyAdNfgpB/si+0kv+2n7ehrnBvd87/dp9yL3Sx7dBw4gY/sF+wof0GAVu4ypqrEbt6JsW1pya2Bib6u8jB8OEqD5ChPcLB0L4ffLB+zCv9/aq1cqHvvL4ffpB/cEUeT7DUtNcVNsHguF9wYBuvcIA/SFXh0O+PPyAbr1A+/48xX3Fh1sonapHw7VHRPwC/ladwG85QO8IB37HAeZ+1kFyQaZ91kF9xwHDgHq4QP3SYgV+Kk1/KkHYHRvaB5hP78G5LjF5B8L2R0O4RPo90mIFfipNfypB2B0b2geYT+/BuS4xeQfC/caHamefnCVH8qRBch5WqxUGwsVT/dcB+sdBw4D93r5yRX7S/xn90v8aAXdBvtL+Gj3S/hnBQsV91wG6x37qAcLIB37egcvljCQLx7DBpDnlubnGvd6BxPgC/gU+AIV5ZEF8no0ziEb+w45SyUj83DrdR8LSpHDXdQb28PD3dhXx0Jwd4N3dx+Y7QX3LAvPFft64/d6B+eA5obnHlMGhi+AMC8aE+AL+wL58AGz+A4Ds/sCFd0G97z58AU4Bg4VvwbkuMXkH/ipNfypB2B0b2geYQYT9gsV1cuP2Zke9xChBYYH+xBHTzU+aK20Hgv4cBUiBvc++1z7PvtcBfQG9x33NgXXBwsV9+jh+xL4rvcM4fvcNfcM/K77EgYO+1L3FgG69zID92FPFSwGTPsWBc4GDvcoNdX7FPsCNUgmdh7ohAXBmLqyyxsLFfcOxtjo6MY++w77DFBALi5Q1vcMHgugdvimd+73FgHb4QNPHQvMiAW5lKGitBuqo3Zsbn51ZnMfa3YFCxVCyVLb28nE1B5JBmZqbmBgaqiwHgvX90h3AfeK2wP3iiAd+0j7Lj/3LgsGvG5NqkQb+x41IPs++z7hIPceC0ErXfsD+w0azAb3E8D3CNnvHrgL2Nc+BmF2obcf98z3Itf7IvcMBwvh+QR3AefjA+cW+E7h+/b5BDMGC/kEywG695QDuvlEFUv3lMsHDhVsonap9xYdHgsb+zVG9xn3K/csz/ca9zbxy1ALdvlad/cJHQv3GAf3O94y+0n7Rzgy+zsfDgHn4/fb5wP37yAd+5P9WuML4Vp296bh96zhErzn+EHgR88L9wYdDkB/UmBJGypT1PcO9w7D1OwL9yYdu2i4XZkfC+H8A/d49+/f++/3dvf74QcL9wodDuET6Nv4phX8puH4pgcT8AsB94njA/i9IB38pDX3cAsHMMBY6x7Y1z4GYXahtx8LFfsC9wH3AmIHsvcvBVkGC6AW6wbR910F974G0ftdBQvzOHb45/cHi3cS5+P4D+MLAefhA+cgHf1a4flaBwsV55nAwd4bysZn+wKaHwvH97zHAfcpyfdGyQP3wAv7FXb58HcB59sD5/laFQt/2vfZ3RK75ffN7DjeC/cz6N33HvcbLtv7Mx8LEtv/AE2AAP//soAA4Qv3ZRXm+xYFzgZM9xYFC8f3McXRxwH4B8wD+C0LJB3KKB285wv3AgG69wEDugv7lPlaBfsKBgugdvladwH30t8D9/wLqaKgqql0oG1tdHZtC7Soa1qKH1uKbGxlGwu+9x33JLz7JOn3Lb0L9wIBvPcBxfcBA/fZC2Rue3F3H8qTpsHAGwtkHfeH9wIBC/cjHe4L+F/3AvcvdwG89wELBvug+6EF9wUGDvs23eh2r90L9wB643X3AAv47BVSQAYT8PcnC4J0dH96G3d+mp4Li/M4dvjn9weLdwuL+VoBoPnHA/c1C535OAH3Pd8D92cLTI/HWtgb18e/zQv3ids792H3G9sSC/j1FTD7pr/1tAYL9y3X+y33SAcOAQABAAAiAACrAAGHAQCsAgGJAQCvAQCKAAAjAQGLAQCxAAGNAQAlAACaAAGPAQAmAACyAAGRAACzAQGSAAC1AAGTBQAnAQGZBgApAAGgAQAqAAGiAAC2AgGjAAC5AAGkAgArAAGnAQAsAAGpAQAtAAGrAgCMAAAuAQGuAgC6AAGxAAAwAAC7AwGyAQCNAAC/AACOAAAxAACdAAAyAQG0AgA0AAG3AQDAAAG5AwA1AAG9AwA2AADBAAHBAADCAgHCBAA3AQHHAwA5AQDFAAHLAADGAAHMAQA7AAHOAADHAAHPJgBCAADIAAH2AQDJAgH4AQDMAQCQAABDAQH6AQDOAAH8AQBFAACnAAH+AQBGAADPAAIAAADQAQIBAADSAAICBQBHAQIIBgBJAAIPAQBKAACRAADTAgIRAADWAAISAwBLAAIWAgBMAAIZAQBNAAIbAgCSAABOAQIeAgDXAAIhAABQAADYAwIiAQCTAADcAACUAABRAACiAABSAQIkAgBUAAInAQDdAAIpAgCVAABVAAIsAwBWAADeAAIwAADfAgIxBABXAQI2AwBZAQDiAAI6AADjAAI7AQBbAAI9AADkAAI+MwCLAACPAAJyBAARCQJ3HwBjAACbAAKXAQCeAACjAAKZAAFAAwKaGAAPAAANAAAbAQB5AAACAABgAAAgAAB7AAByAAB0AAALAAKzAAAEAAAQAAA9AAK0HQAOAALSAABvAACJAABAAALTAQAJAQBcAABeAAA8AAA+AALVEwB1AQBpAAB3AABBAAAIAABqAAB4AABrAQADAABoAABlAALpBgAhAAAHAABzAABmAACqAAClAALwAACZAAChAALxAQBdAACgAABwAQLzAwBhAABnAAAFAAL3BABiAABkAAAMAACmAACoAACfAAAeAAL8AAAfAAAdAAL9AQCcAAL/AABfAACXAAA/AAMABwAGAAB6AAMIPgCDAACCAAB8AQCGAAB+AACIAACBAACEAAB/AQCFAACHAANHBwKrAgABAU4BUQFlAXYBkgGwAdUB+AIIAiwCXwJ+AqQC6QNAA0kDWgNrA9MD6wP6BCkELQRhBGUEawR0BIIEnQS8BNIE2wTxBSkFSwWvBbwF0AXqBgEGLAZSBocGpgbLBu8HSgdwB8AH9QgBCCYILghLCGYIfAiECJcIvgjgCOkI+gkaCR8JKwk2CTsJTgltCXAJngnaCfgKBQoQChMKRwqDCo4KlwruCwELCgsTCyYLogvDDCwMOwx0DN0M5AzwDP0NCg0PDUQNSA2FDc8OFg4hDn8OhA6nDrgPAg8ODxkPIg82D1gPbQ92D38PlA/GD90P/xArEDwQVBB1EI4QpRDdEPsRAxEdEUwRUhGPEZkRqxG5EcoRzRHQEdcR4xHwEf4SGRIkEkYScRKNEpcSuRLpExATIRM9E2UTfROYE7IT1RP6FBQUOBRdFHUUixSeFLIUyxTgFQcVIhU6FVUVchWQFZMVnBWyFb8V+BY1Fj0WcRbJFzIXeRf9GE4YWBhqGHwYuRjQGOQY/xlSGX8Z8xn5GgIaEBpHGlwabxp4Go8ayBr9G1cbZBt4G4cbsRvuHB8cXhxzHIUcmRziHPUdMR1THVcdah1yHY8dpx2rHbMd4R37Hi0eVh5nHm4efB6YHp0erB63HsEe0R7lHukfIh92H5Ufph+2H7kf8yAwIDMgPCBVIGsgcyB7IJMg/yFIIX4h3iI3IqEiuyLLItoi6yLxI0gjTCOjI+gkCCQVJHwkgiStJN4lLyU7JVclYCWDJbMl0yXcJeUmFyZjJo8m0yb+Jw8nKCdKJ2QnfSe1J78nxygQKCEoJyhDKEkoVyhkKHQoeCh7KJ4opyi6KMcpGClZKWEppCn+KjMqciqVKp4qsSrhKxwrTitWK4orzywDLEssUSxdLHgshSyuLNos7S0ELRctKS0tLUgtTC11LaYtty3PLfAuCS4dLkQubS6ALrYu8C8pL04vUS9UL3Yv3TAiMFIwwzDRMPcxCDEYMSoxPDFTMWExcjGIMbkx3zH5MhkyOTJMMm8yfTK6MvMzUzN9M58zyTP8NBY0QzRaNIs04zUeNTM1QTVWNWc1dzWJNZs1sjXANdE15zX1Nio2ZjauNvU3UjeCN8A4DDhTOJY4nji2OMo46zkdOSY5PzlQOZI5pDmuOcY52zoxOlg6Yjp8Oos6xTrZOtw7FzsuO0U7WDtiO2Y7fTuPO647sjvLO848JDwwPFI8Vjx5PH08gTyFPIg8jDyXPJs8rjyyPLY8ujy+PMg8yzzePP89ET0VPRk9Kz1BPW49cj2MPY896D35Pfw+DT4RPhU+GD4tPjE+NT5IPlw+Xz6oPrs+vz7DPsc+yz7PPtM+3D7oPws/Lj8yPzY/TT9lP4Q/pz/SP/pAKkBZQJVA0EDUQNhA3EDgQO9BAkEXQUZBUUFVQXtBo0GvQb5B0UHzQkZCvELLQt5C8UMbQ11Dr0O6Q71D6USERSRFT0VwRbVF8EX0RgRGEEYlRjRGVUbJRvBHNUdnR+pIYEkPSZZKD0pSSqlK9ktpS6RLyEvbTA9MMkxNTJ1MwEzmTQZNLk1gTf9OUU5pTpZPFU9TT4JPtU/hUA1QSFCOUJJQ+FEbUUpRYFGJUapR1VH5UiNSTFKPUuBTB1MuU3lTx1PqVA1UMVRTVHdUr1THVOhVB1UnVT5VXVV7VZtVxlXzViVWf1fkWCFYMVhHWFVYaliIWKlYx1jpWO1Y8Vj1WPlY/VkBWQVZCVkNWRFZFVkZWSlZLVkxWTVZS1lPWVNZV1lbWV9ZY1lnWWtZb1lzWXdZe1l/WYNZh1mLWY9Zk1mXWZtZvFm+WclZ1vtr+yrGqLOonqizp7+noLueqJ+oqnSiqKKoqqiip6unxRLby0v3DPsM90Y1p2/3SfsPp2/3D0jOE6orAvf1IB37pf3w96UG+2XGFRNAAQCoB8ezBU8GEyABAqj3IgcTQAACbnAHT2MF4gYTqgECbgf7IvcJFez3IioH+yL3KRXsBxMGACCnRgYTBAAI4bQGEwQABG93BhMGAIJtu+EGEwoBAioH+yL3CBUTAUEIqPcGxAcTAkACpzUGEwEBAPsivBUTAIEAqMOqUwcTACECqPciBxMAgAJuBxMAgAhTBhMBKQhPBzX3BBXkBxMACALhBhMAEAJPwwcTACkCbgf7IvcEFRMABQCnw6tTBxMAAwKn9yIHEwAEAm9Ta8MHEwAIAm8HExAAEPsG/JEVExAAQOGzBhMQABA1BhMAECD4FgQTABCAp6oGEwAQIG8GDvwfDqYwHRKg+QoT2CwdT/w7FRPoKh0OprkdT/w7FRPsKh37L/iKIAqmMB3uyxL3Vi4KE94sHTj3ZegdYP0MFRPuKh0OpjAd7vcMzR0491sVfB09Bk42TuAFVP0CFRPsKh0OpjAd7igdoPkKE9osHTvaFdkGE9bI4AUT6sg2BWUKSf0CFSodDqYwHfLsEvds5cHlE94sHU7eFeXsMQaM/O8VE+4qHSz4jiIdprkdTPcQHS/9DBUT7CodDqYwHfcGyxKg+Qr8T/eUE9wsHRPqRukV95TL+5QGlPzZFSodDsn7a9P3OHb3XeH37tiLdxL4mzQdE+r3Bx2xPAoT7CcKqrj7lPlaBfsKBk/8OxUT8iodDqYwHdbD1sMS94bD1sMT3ywdT/w7FRPvKh37afjPUgqmMB3sJgr3PCoKE9ssHRPX+wHaJh0T2yMKE9ckChPrvPyKFSodDvfgi+H3B+Gm3/d24TjeEviD4xO0+CUgHfwQ/VoF7gYT9PL3XQX3pPtd+D3h++UGE7TtCgcT7P0Z/DsV90X36AW+++gGDq/vCvfR503nE/TnFvexBvcv4tP3FedRyCuYHxP42Jm6wNoa9xg3zPs8HvuJBuP9BBX3fPdZBxP068FhQEFVYisf+1n30hX3cPcxBxP49sBmQUVSZCQfDsQkHQG852cdDsQkHcr3FgG852cd+9f4vyAKxCQdyvcMAbznZx38Qfk3IR3ERh2i30x2+SLhErzn957DE0/5Jvd+FS2RBRNX+wF2Rk4kG/s1RvcZ9yv3LM/3Gvc27M9UKKIf6JEF9yBsKOn7Kxv7YvsI+zr7YvtU8vsx90p4HxPvbGmoCp6gBRNP9zCR5+6k9yUIDsT3Eh0T6H8d/D74vxXZBhPYyOAFE+ghCsT3AAr3TeVnHfvg+MMiHcUlHQHn4/gS5wP3zCAd+3D9Wvd2Bvds9wz3E/d393j7D/cU+28f+xj9BBX4rvId9yaQCsWOHQHn4/gS5wP3zCAd+3D9Wvd2BtYK+xj9BBX4rvcYB/c73jL7SftHODL7Ox/7GPnLIR33JpAKYiwKgh0OYqsK+5bbFVEdYiwK2/cMgh38APdcIR1iLArbKB3n4xP0PQr7/dsV2QYT7MjgBRP0IQpiLArf7BLn45zlweUT+j0KE/776t8V5ewxBvckKiIdYiwK3+wB5+Pn5QM9Cvuf3xXl7DEGDmKrCvvs92YoCmIsCurLEufjlPeUE/g9ChP8+/LqJx1i+2vT9yOCChLn4/d/NB0uxRN5Ygr4IQcT+mVhVgoT/CcKE3mquAXh/AP3ePfv3/vv93b3++EHDmIsCtnLkMsS5+NsKgoT5D0KE+r8GtsVdwoT9SMKE+okCg7Ye+H3f+H3jeEB+NjoA/jY+BsV/KcGjFcF+5OX9x4n9y0b91D3GPct9273dvsS9yX7Vvsa+wI3+xliH+yCBemwz7neG/cL7SD7IpUf/Eg1FfhHBvsrdDo3+w4b+wdA3/creB8OX3vh+L7hZgr3UGUdDl974fi+4dr3DGYK91BlHfL5ZSEdVaB298Xf93/hYB3j98X36d/76fd/9/vhBw7Le/QdE3o4ChO8NAoTulMdE3qT+wgFDstKCsrLErzn4y4KxOBHzxN8QDgKE7yANAoTvEBTHRN/QJP7CAX7/vorQh3LSgrK9wwSvOf4QeBHzxN9OAoTvjQKE71THRN9k/sIBfv++iEhHctKCsooHbzn+EHgR88TeoA4ChO7ADQKE7qAUx0TeoCT+wgF+/v5qRXZBhO2gMjgBRO6gCEKyykKt/QdEz04ChNeNAoTXVMdE72T+wgF+9D7UhVRHctKCs7sErzn903l9y7gR88TfoA4ChO/ADQKE76Aegr7nfmtIh3LSgrZyxK85/H3lNLgR88TfIA4ChO9ADQKE7yAegr78Pm4Jx33Anvh19e/4fes4QG85/hB4wP4B/f8FTX3WweKeYl6h3oI+1Q/9zMGXGpVbkPwHTaiH+eRBfcWbCjp+ysb+2L7CPs6+2LqCvcR5MXzth/e104GkKiOqqwauAcOxqB2987h98p3Aefj9+zjA+cW4/fO9+z7zuP5WjP7yvvs98ozBg73c6B299Ph9w/hNfdKEvcv4/gS4xPc9y8gHRPsK0wHE9w1yvyk4/fT+BL70+P4pMoHE+zhTAcT3OszBxPsK/wSBxPc6wf7xQT3D/gS+w8HDsagdvfO4ffKPh3n4/fs4xP25xbj98737PvO4/laM/vK++z3yjMG9w3aFdkGE+7I4AUT9iEK/AmgIgpgHeP5WgcO9yF74VoiChLn49bl96jjE7znIB0TfP1a4/laB9b8dBUTvLMKDvwJyAo72iAK/AmgdvlaPh3n4xPoTQr7S9oV2QYT2MjgBRPoIQr8CaAiCvLsEpuACucgHf1a4/laBxP0+zjeJQr8CaAiCvLsEublMuMT6E0KE/Ay3iId/AnICvs6Vwr8CaAiCvcGywHn4wNNCvtA6Scd/An7a9P3OCIKErs0HfsP4xPkYgoHE+ipPAoT8CcKE+SquAX5WgcO/AmgIgrsJgprysjjyMoT5E0KE9z7aNomHRPmIwoT3CQKDlx74fkUd58KDlx74fkUd+73Fp8K97H4uyAKXHvh+RQ+Hc7l96jjE+ypCvdK+LsV2QYT3MjgBRPsIQqToKEKDpOgIgru9wy7HZFaHZMpCtyhCtP+GCAKS4vtHQ5Li+H5BHfu9xYB5+MD8QqT2iAKJIvh+J/wJvcWEufjE9DxCvdCJhXOBhOw5vcWBSwGDkvAHW6L4fkEdwH3E+MDofgIFbA9z6sF+9r4TuH79vetB/cv02bZ+wpUBfeMM/u1Bw73fYvrQHb4qfdFi3cS5+P4muMTXEQdE2z4qQf3XPypBfcKBvdc+KkF/Knj+Vr7DgcTnPt1/Pr7dfj6BQ7pi/cIHRNcRB0TbPjnB/fn/OcF9xT5WjMGE5zMCg7p9xwd9xa8HfcM2iAK6fccHfcMvB2ZWh3pqR3p9yMd7CYK5+OhKgqg4xNaQEQdE2pAiB0Tl0DMCn/aJh0TWsAjChNXQHYdE5dAT2RYOx8O6fsq4eB2+Of3B4t3Eufj+A/jE9xEHRPs+OcH+A/85wWEB2V2eGEeJDXyBujFw+Mf+WAz/LcH+/D4twUO8iQdAbzn+GZRCg7yagr3WfhHIAry9xId+GbnE+z4CtUK93v7Dvch+1/7X/sO+yH7e/t59w77IfdfH/t9+AYV90bi9wD3Jvcm4vsA+0b7RDT7APsm+yY09wD3RB7p+EcV2QYT3MjgBRPsIQry9wAK9wXlweX3C1EK9wX4SyUK8moK9wP4ySgK8moK9yP4R2sd8iQd2csBvOf095T0UQr0+FYnHfcAJB0Bwef4ZucD+A/VCvcLa+lQzB/R6QU3BmZZBatZTp1DG/tf+w77Ift7+wCmM71MHzn7AwXgBrnJBWO/znXbG/t9+AYV90bi9wD3Jr23fnOuHvvT/EIFb7p8yNQa4/t/FffX+EgFr1ueRjca+0Q0+wD7JlFanKtlHg7yJB3Iy5DLErznzCoKzOcT3agdzPhHJh0T7yMKE90kCg74TXvhRYIKReESvOf4YOYz4xO1+Ad7FfLZtM6/HxN1L/g94QcTdvvl7QoGE3X8NS8GE27OVz20JBv7YvsI+zr7Yh8TteoKHvt6+AYVE673L9b3F/cv9y/W+xf7L/suP/sW+y4eE7X3AQqRoHb3p+H3m+HzHfenrwpzoHb3KOH3m+H3E3cB5+P3vecD90gW9yj3HQf3Dh37HfcTM/1aBuP3fhX3m/cdB/bAYDUyVl4gHw7sJB0BvOf4YOcD+Ad7Fbi0k5mvH8VABecGNfcDBePNu/cH9xca92L7CPc6+2L7YvsI+zr7Yvth9wn7OfdhHvt6+AYV9y/W9xf3L/cv1vsX+y8majFKWB5B6wUvBu/7FQWFd3WIcxv3AQqnoGIdZh0Op18K9xZmHU74NiAKp18K9wxmHfs7+K4hHacpCtxiHWYdIPzFIAqPf6AdDo9/4fjK4cr3FgHV5/fg5wP3K/d9FS+FBfskl/cGLPcwG/cU9w3P9xiBCh9bCpUd9yT4wCAK/F3SHY9/4fjK4cr3DAHV5/fg5wP3K/d9FS+FBfskl/cGLPcwG/cU9w3P9xiBCh9bCkVPaDH7BEnL6ngesfk4IR2PRh1e9zBMdvke4RLV5/dew9XnE1eA9yv3fRUvhQUTT4CW+xfqMfcaewgT74BoZaIK9xGO9wfP9xUa9wEjy/sUrx5bChNXgJUdDo9/4fjK4cooHdXn9+DnE+z3K/d9FS+FBfskl/cGLPcwG/cU9w3P9xiBCh9bCkVPaDH7BEnL6ngetPjAFdkGE9zI4AUT7CEKjykKu6Ad4Pw7IAq8i+H3ntT3W+EB5+P3/uUD+BDhFfsaNfcaBvcv7OX3F/cQ+wDe+zKIH/du91MF6fu3B/sPPTr7FR/8iOP4iAfbtLfTHvdDBvto+04FNAfzjAX3BIzRWDYaO01YJx4OSKC9Cg5IoHb3ytf3guH3BB37gvsYP/cY+8rj98r3Gdf7GfeC93AGDkigdvkE4dr3DMUK/Cr3sSEdSEYdxXb5BOES94njg8MTfPi9IB38pDX3cP0EnwZfWwUT+qdmBbaVrHtrGnF5em9pc62dfR4TfGFkBRP6XQoTfK2wBZr5BPdwBg5IKQrcvQr7/P3CIAq4MwoB2OP3/EAdDrhtCvvE+LEgCrgzCu3LAdjjsS4KsUAd/C75M0IduDMK7fcMaK4S2OP3/OMT7GwK/Cv4sRXZBhPcyOAFE+whCrgzCvHsAdjjx+XB5c1AHfwY+LUlCrhtCvwa+TMoCrhtCvv6+LFrHbgzCvcFywHY47/3lL9AHfwg+MAnHbj7a9P3E+H5FXcS2OP3KDQduOMT9oMdlZSLjJQec3BWChP6JwqptgUT9vWsyuX3ExoOuDMK1cPWwwHY4+HD1sPiQB37/vj2Ugq4MwrrJgrY45cqCpfjE+lsChPd/Ej4sSYdE+sjChPdJAoOpIvtPnb5WncSoPkIE3CgIB33lP1aBfcIBveU+VoFKgYTsPtt/Pj7bvj4BQ73n1QdEqD5+hNwRgoTsEcKDvefVB3u9xYSoPn6E3hGChO4Rwr3w9ogCvefVB3uKB2g+foTdEYKE7RHCvdc2hXZBhNsyOAFE3QhCvefVB3y7BL35OXB5RN8RgoTvEcK92/eJQr3n1Qd7vcWEqD5+hN4RgoTuEcK921XCnugIgoBpvjTA/iIIB37TPuv+033rwUlBvd7+/X7ffv5Be8G90/3svdO+7IF8Qb7fff493v39gUOfaAiCgH3pOMDoCAd94/8OAX7tuP3tgf3jvg46woOfbod9y/aIAp9oHb5Wj4d96TjyR2/2hXZBhPYyOAFE+ghCn2gIgry7BL3WIAKoCAd94/8OAX7tuP3tgf3jvg4BSMG+1L72/tT99sFE/TS3iUKfbod0FcKfaAiCuwmCvcoysjjyMoT5KAgHfeP/DgF+7bj97YH9474OAUjBvtS+9v7U/fbBRPcotomHRPmIwoT3CQKDiUlHQGm+H1uHQ4lJR3a9xYBpvh9bh33CflTIAoljh0Bpvh9bh2W+cshHSUlHd7sAfd+5W4d9wD5VyIdS8Ad6akdraBiHWgdDq1fCvcWaB1Y+DYgCq1fCvcMaB37MfiuIR2tKQrcYh1oHfsD/MUgCvtjJR0B90PjA/gTIB373DX3DPyu+xI1YAoGDvtjwh37XPc5FVEd+2OOHWiuEvdD4xPoVAr7w/c5FdkGE9jI4AUT6Mg2BWUKDvtjJR3e7BLugAr4EyAd+9w19wz8rvsSNWAKBhP0+7D3PRXl7DEG9yQqIh37YyUd3uwS90LlMuMT6FQKE/D7Zfc9FeXsMQYO+2PCHfuy97soCvtjJR3pywH3Q+MD+BMgHfvcNfcM/K77EjVgCgb7uPdIJx37Y/tr0/cj4fiu4RL3Q+OFNB0TcN4KBhPk9648ChPoJwqquAXhBxNw+xL4rvcMBg77YyUd2MuQyxK+ylDGyOPIyhPGVAoT2vvg9zkVdwoT5yMKE9okCg7Ee+H3YOH3rOEBvOf4QVcdDsR74fdg4fes4crLAbzn4y4KxOMDfh38QfjDQh3Ee+H3YOH3rOHK9wxorhK85/hB4xP2fh38PvhBFdkGE+7I4AUT9iEKxCkKt+H3YOH3rOEBvOf4QVcd/BP8uiAKxHvh92Dh96zhzuwBvOf3TeX3Llcd++D4RSIdxHvh92Dh96zh2csBvOfx95TSVx38M/hQJx2mMB3q9RL3XSsKE94sHT/3FBU/Cpv8uxUT7iodKvi7FT8KDsQkHcjyAbzn90X1A38d++j48RVsonapqaKgqql0oG1tdHZtHg5iLArX9RLn4433ALz3ABPoPQoT9vv59xUpHWIsCtnyAefj3/UDPQr7p/cWFWyidqmpoqCqqXSgbW10dm0eDstKCsjyErzn90X19ybgR88TdIA4ChO1ADQKE7SAegr7pfnbLh38CaAiCur1Eoz3IB0T6E0KE/T7R/cUKR38CaAiCuzyEt71KuMT6E0KE/AqjB0O8iQdxvUBvOftKwryUQrt+HgpHbgzCun1AdjjuCsKvUAd/Cf44ikd959UHer1EvfVKwoTfEYKE7xHCvdg9xQpHX2gIgrq9RL3SfcgHckdE/TD9xQpHSUlHdjyAfd29QP4kPkCFeP8ZDX3/gf8D/ypBTD4feH8Ggfv+YUuHftjJR3W9RLf9wB643X3ABPIVAoT9Pu/92opHftjJR3Y8hL3OvUq4xPIVAoT8Ptt92suHcR74fdg4fes4cjyAbzn90X19yZXHfvo+HMuHfhli+H3B+H35eEB+ePjAywdT/w7FSod9577s+Id+Hd74UXh+K7hEtjj9/zj95DjE7xsChN89xL7jOIdRoYKRpcd9wH4aiAKRjMdzssSuuWOLgp0iAoTtgCO+OxCHUYzHc73DJodjvjiIR1GMx3O9wxornQdE7SANR0TtgA1ChO1ADoKE3UATAoTdIA+ChO0gEUKkfhqFdkGE6yAyOAFE7SAIQpGMx3S7BK65aTlweWQVh0TtEA1HRO9ADUKE7SAOgoTdIBLu3rBHhN0QD4KE7RAeh0TvECGHRO2AKT4biUKRpcdovjsKApGMx3dyxK65Zz3lIJWHRO4gDUdE7oANQoTuQA6ChN5AEwKE3iAPgoTuIBFChO8AJz4eScdRvto0/cU10vXVHahdvhf3XQdPdITRkA1HRNHADUKE0aAOgoTDoBUrne3hh4TliBnY1YKJwoTFkCotQWNBhMmQNd1B3WBlaEf92gH9yI+2/sdHhNGQEUKDkYzHbbD1sMSuuW+w9bDpVYdE74gNR0TvoA1ChO+QDoKE35ATAoTfiA+ChO+IEUKvvivFVa1Y78eE78gvrWzwL9htVgfE74gV2FhVx/DjBWenJ2gHhO/IJ+ceXh3enl3HxO+IHZ6nZ8fDkYzHcwmCrrldCoKWlYdE7QgNR0TtIA1ChO0QDoKE3RATAoTdCA+ChO0IHodE6ogxfd/Jh0TtQAjChOqICQKE7Qgovxq4B0O97N/00Pd9zzX9ybdErrl957/AB2AAP//4oAA7hN6w/gKFeEK2L1gM4wf+y5vBTkKYR0TfPWN0MCe6IyNGC2v2lP1G/Hlye+qHy+SBVRzWGtTGxN6rgo3R2dNYR/MaEisNhv7AjVIJnYfE7rc+30V18uK2ZoeLx0+h2i3tBr4A/dB9wIdXXkd9zx3EtvZPf8AT4AA//+wgADh97zlE7PbIB0Tc/1aBxN12QYTtY7VBVaoy2rVG/ce4fb3Pvc+Nfb7Hh8Ts0RNbFpuH/eMBxO5g/xR5R0OLyMdAbrlA0QKDi8jHc73FgG65QNECvs795UgCi8jHc73DAG65QNECvul+A0hHS9GHabbUHb4at0SuuX3UcMTT8YK+zDdI/cUfB8T72hlqAqipfSS4tSb9wUZMJEFE1f2HR8TT8rEY0eWHw4v5goT6EQK+6L3lRXZBhPYyOAFE+ghCi8jHdLsAbrl9wDlA0QK+0T3mSIdXXkd9zx3Errl97zhPdkTvModE3wtChO6vwoOWfcNHRPwvAr3AevD97X7FfdH0KQYdMssaVa6Q6wrlRl2PMOGvHu0chkgZaJKBRPo9yXAu1WlQ4w1GRPw0wrWhchfmD+C+xFBOSyTMpRTzZXvCA73B3kdzvAm9xYSuuX3vOE92RO2yh0Tdi0KE7W/Cvg29+wVzgYTrub3FgUsBg6SeR201z/3ExK65fdU91I14T3ZE60A+JsgHTUGE7UAWAcTtgAjBhOuAD8HE60A8/sN6h0fE6yA1cuswKgfE2yAjkEFE20A2fjbygYTtQDXTAf8EvweFfcOxtjoHhOsgOjGPvsO+wxQQC4fE7UALlDW9wwfDj4rHX0dDj6OCvtB97kgCj4rHcz3DH0d+6v4MSEdPisdzCgduuYT9Lr3nRVVHfHlye+qHi+SBVRzWGtTG64KTgof6HAd+6j3uRXZBhPsyOAFE/QhCj4rHdDsAbrmq+XB5QNJHfuV970lCj4rHdDsAbrm9uUDSR37Sve9Ih0+jgr7l/g7KAo+Kx3byxK65qP3lBP4SR0T/Pud98gnHT77a9P3F933PNf3Jt0Suubr0kT3OxP6ywoekgZwbQWEHRP8JwqquNCiwsCi1RltHRP6Tgof6HAdDj4rHcrLkMsSuuZ7yvdmyhPlywrx5cnvqh5tHU4KHxPr1vfqJh0T9SMKE+skChPjnfu59wIdPn/d9ybX9zzdAfhC5gP4nfedFfc9K/cA+yclMU0nbB7nhAXCo76rwxvlwU0hkx/8EwaMZAX7UpT0QPcIG/cn6/cA9z0f/BBaFfezBi99VlU4G0xQr/cCfB8OX/tY4fi+4WYKk2UdDl/7WOH4vuHa9wxmCpNlHfL5ZSEd+4qgdvha1/PXAfcXwx0OXD0dYwoT9gBQChPuAPhyBxPsgDkGE/SAQx0T9gBVChP1AE4dE/YARx0OXD0d7ssSuuWSLgqP4TbgOd0T9kBQChPuQPhyBxPuEDkGE/YQQx0T9kBVChP2IE4dE/ZARx0T9YCS+FpCHVw9He73DGMKE/cAUAoT7wD4cgcT7kA5BhP2QEMdE/cAVQoT9oBOHRP3AEcdkvhQIR1cPR3u9wxormMKE/WAUAoT7YD4cgcT7SA5BhP1IEMdE/WAVQoT9UBOHRP1gEcdlffYFdkGE/OAyOAFE/WAIQpcPR33BvcCErrl8fcB35kd8ffn0ApcPR3y7BK65fPl8Jkd8/fcIh1cPR33BssSuuWg95SdmB2g9+cnHYD3Hx33Ddf3Ld1/d2MKE/sAUAr3R8PXUwcT9wD3cwcT9kA5BhP6QEMdE/sAVQoT+oDhwlEskR/7Wz/3VQY/e1deQhsT+wBHHQ5MoHb4YN33PHcB2+H3juEDqgoOQqB2+GDdtNc/9xMS2+E191v3HeET2tsgHRPqWFQHE9o/wvzbzh33DwcT1vcFBhPm1wcT6vsFBhPavgcOTKB2+GDd9zw+Hdvh947hE/aqCvtK2hXZBhPuyOAFE/YhCvwjxB38I0MKAdvhA9v4phX8puH4pgcO/CPmHTzaIAr8I6B2+KY+HdvhE+hPHftK2hXZBhPYyOAFE+ghCvwjQwry7BKO5X7heOUT6E8dE/T7N94lCvwjxB38I+Yd+zlXCvso+yrX6nb4pnfy7BLZ5TPh9zflM+ET9U8dE/kz3hXl7DEG9y398N8d7flDIh38I0MK9wbLAdvhA9v4phX8puH4pgf7P+knHfwj+2vT9zh2+KZ38uwSrTQd+w/lM+ET8X8KBxP0pzwKE/gnChPxqrgF+KYHE/Iz3iId/CNDCuwmCl7KyeHJyhPk2/imFfym4fimBxPc+2faJh0T5iMKE9wkCg78FDgd8uwS6OUz0R0z+PwiHfwUOB3THQ78FDgd7vcW0x08+PggCvwU+yrX+PA+HerVHftK+PgV2QYT2MjgBRPoIQpVoJ4KDlVDCvdcd+73DKQK+01aHVUpCtyeCq/+GCAK+/2L1/kOd7oKDvv9i9f5Dnfu9xa6CjvaIAr7f4vX+KjxJfcWEtvhE9CKHbLkCvv9sh37n4vX+Q53Afcy4QP3MiAd+8IHPWerRrmgBftwB021Yckex9ddBnWBlaEf95QH6bZr0E1uBfebBw73faB2+GbXf3dSHfd64fd64ROuWQoTzui7w9zKsVMuHvvR4ffRB+q6wd3LsFUsHvvR4ffpB/cUTdQgOFRkRHQe0XRUsz4bE9ZCVWdLch8TtojjBQ5MoHb4Ztd/d1Id947hE6xZChPMcwoT1GgKE7SI5gUOTKB2+GbXf3fu9xaXCuzaIApMoHb4Ztd/d+73DJcKglodTKMdTKB2+GbXf3fsy5DLUh1gKgpg4ROyQFkKE9JAcwoT1EBoChO0QIjmBRPJQGjaJh0T0oAjChPJQCQKDkz7Ktfqdvhm1393Uh33juET1lkKE+biCvvYB2JzcWQeOD/cBujFw+Mf9+8H9wRR5PsNHhPqaAoT2ojmBQ5Kph1Kawr3CffsIApK5gr3xuUT7EodmffsFdkGE9zI4AUT7CEKSiMd0uwBuuWs5cHlsuUDSh2s9/AlCkprCqr4bigKSmsKyvfsax1KIx3dyxK65aT3lKTlE/RKHRP8pPf7Jx08Ix0BuuX3xuUDjR3TeshruR/d7QUyBmNcBalkWZxRG04KRJxOql0fOCgF5Aa0uwVssr56xRv7LfepFfcOw9TssKqAd6Me+3b7ogV+qIWvtBrG+zcV93j3owWXbZJnYRr7DlNCKmVslqByHg5KIx3MJgq65XwqCnzlE+mNHfc9K/cA+ydOClUdHxPV+zz5ASYdE+ojChPVJAoT6Zr77BX3DsPU7OzDQvsO+w5TQioqU9T3Dh4O99MrHQG65ffG5gP3tn8V4tCxzbUfSbXQZeIb8eXJ76ofbR00RmVJYR/NYUaxNBu+HfgjcB0OXe4K29c//wBPgAD//7CAAOH3uucT09v7KhXh93EGVKjCb9Qb9zPR9xj3JfclRfcY+zMfE9U+U2tSbh8T5YjYBRPjPQYT2df7nRXtt+z3APcBtisoKGAr+wH7AF/s7R4OXfsVdvce3fge2fc8dxLb2T3j97rlE/bbIB398OP3aAdcqsBw1xv3LtH3GPcl9yVF9xj7Lj9VcFltH/eJBxP6gfxRFfG27PcB9wK1KyQoYSv7AvsBYOztHg5d7gq65/e64f//sIAA/wBPgAA/1xPc+Jv7KhUT7Pk8BxPqPQYT2og+BcRuU6s+G/szRfsY+yX7JdH7GPczHxPc1MKnwqgf+3EH+7r4MxXutuv3AR4T2fcAtyopKV8q+wAfE9z7AWDr7h8O+5qgdvha1/cPHRPQzwoT4EZkbUp6H4jqBQ77mqB2+FrX2vcWbwqQ2iAK+5qgdvha19r3DG8KJlod+5opCtx2+FrXbwr7Ff1kIAr7Bn+NCg77BiMdzvcWAcfl94jlA/gU+AIV5ZEF8no0ziEb+w45SyUj83DrdR/HfdWFTBpVSHtZPFmzyoAeMYUF+wKT60b3Ehvv9rfyeB0fcR3FxmhQlx77L/eHIAr8XdId+wYjHc73DAHH5feI5QP4FPgCFeWRBfJ6NM4hG/sOOUslI/Nw63Ufx33VhUwaVUh7WTxZs8qAHjGFBfsCk+tG9xIb7/a38ngdH3EdxcZoUJce+5n3/yEd+wZGHV73LFF2+GndEsfl9y7DreUTT4DbHRNXgM4KE0+AkinXSvR+CBPvgGhkogrsjvC37xp4HR5xHR4TT4DFxmhQlx8O+wYjHc4oHcfl94jlE+yRCvuW94cV2QYT3MjgBRPsIQr7BikKu40K+2j8wCAKVd3/AP6AAN3/AN2AABL3Os5I2BPQ973dFd/Zs9/nO7QviR9figXeB7eKBd6JusTPGsFVuEYeE+BAVl0vH/yKNfiKB/cg59v3DvcQ4kP7AUNlTkZ0HuN0ykgrGvsY+wxI+xgeS90GDvuMi7YdDvuMi9f3PNf3GtcB9xjhA/YK+xo+P9gl9wUd8fci1/si9xr3Itf7IvcMBw77UzIK2bVh9xYS9xjhE+j3GPkeFfsMPj/Y+8wHMMBY6x7sHbRhFc4GE9jm9xYFLAYO+4xGHbDX+A7XEvcY4b/DE372CvvMB0apXcN5HldSp2YFtpWse2saE/6PHRN+YWQFE/5dCq2xBYqRkYuRG9jXPgZhdqG3H/fM9yLX+yL3DAcO+4wpCse2HTv93CAKRjsKEtvh94jhOd0TeDwdE7hTChO0WgoTdDQHDkaAHfs6+PUgCkY7Cu7LEtvhcy4Ke4Ed+6T5dxVCyVLbHhO2ANvJxNQf8AoORjsK7vcMaK4S2+H3iOE53RN2PB0TtlMKE7VaChN1NAf7ofj1FdkGE67I4AUTtiEKRjsK8uwS2+GJ5cHll4Ed+474+RXl7DEGE7sA9yQqIh1GgB37kPl3KApGgB37cPj1ax1GOwr3BssS2+GB95SJ4TndE3o8HRO6UwoTudDIqs+nHxN5NAcTtPuW+QQV95TL+5QGDkb7a9P3F9dgdvimdxLb4fdaNB37DeE53RPZADwdKVRXOj9rv+0e99A1++kH+wTFMvcKHhPYgFoKE7iANAcTugCjBmVhVgoT3AAnCg5GOwrWw9bDEtvho8PWw6zhOd0TfIA8HRO8gFMKE7xAWgoTf0A0B/t0+TpSCkY7CuwmCtvhWb1ZyvdmymHhOd0TdEA8HRO0QFMKE7QgWgoTaiA0B/u++PUVE6lAdwoTtIAjChOqQHYdE2ogT2RYOx8OIIvlRnb4pncSofiCE3D4mPimFS8GE7D7L/xM+y/4TAUvBvdV/KYF9wAGDvdDSwoSofmcE7BLHRPQTB0O90NLCu73FhKh+ZwTuEsdE9hMHfti+JYgCvdDSwruKB2h+ZwTtEsdE9RMHfvJ+JYV2QYTrMjgBRO0IQr3Q0sK8uwS97flweUTvEsdE9xMHfu2+JolCvdDSwru9xYSofmcE7hLHRPYTB37uPkYKApRQwoBuviBA/g9+KYV+xf7VPsY91QFIgb3TPuW+1b7pAX0Bvci92H3IfthBfQG+1T3o/dL95cFDiA4HQGh+IJqHQ4grB33C9ogCiD7Ktf48D4dofiCE+ih+KYV91X8nAWoBnhaBXKBfIFyG04/0QbHsaXEnx/3avjpBTAG+y38Svsy+EoFm9oV2QYT2MjgBRPoIQogOB3y7AH3KeXB5Wodrt4lCiCsHaxXCiA4HewmCvAqChPstR0T3H7aJh0T7CMKE9wkCg4sMgpyCg4sMgra9xZyCuX4qRVRHSwyCtr3DHIKe/khIR0sMgre7AH3e+XCCtz4rSId+/2yHUyjHTgyHRK15fecQgoTsjcdE7QvHROyTR0TckEdE7g2HROyOQoOOIcK91L4aCAKODIdzssSteWFLgp9mx3f+OpCHTgyHc73DJ0d3/jgIR04Mh3OKB215fecQgoTtIA3HRO1AC8dE7SAPodot7QaMRZhHd6Ny7ehvAgTdICNOAXZ99QG5B0TtgA2HRO0gDkK4vhoFdkGE6yAyOAFE7SAIQo4Mh3S7BK15ZvlweWZQgoTvIA3HS8dPodot7QaMRZhHRO0QN6Ny7ehvAgTdEBBHRO1ADYdE7yAOQoTtkD1+GwlCjiHCvP46igKODId3csSteWT95SLQgoTuIA3HRO5AC8dE7iAPodot7QaMRZhHd6Ny7ehvAgTeIBBHRO6ADYdE7iAOQoTvADt+HcnHTj7a9P3F9Nkdvhg3RK15fduNB37DUIKE1hANx0TWIAvHRNYQE0dEzhAjTgFE7oAnzwKE9wAJwoTWECquAX31Af3KDXV+xT7AjVIJnYe4QoTWQA2HRNYQDkKDjgyHbbD1sMSteW1w9bDrkIKE78gNx0Tv0AvHRO/IE0dE38gQR0Tv4A2HRO/IDkK9xj4rVIKODIdzCYKteVrKgpjQgoTtCA3HRO0QC8dE7QgTR0TdCBBHRO0gDYdE7QgOQoTqiDF+GgmHRO1ACMKE6ogJAoOXTAKErrl97wvChOpMQoTrDUGE5wtHROaMR0TWS0KE5k2Cg5dnB33CPfsIApdMArOyxK65ZUuCo2KCpX4bkIdXTAKzvcMErrl97wvChOsgDEKE64ANQYTngAtHROdADEdE1yALQoTnIA2CpX4ZCEdXTAKzigduuX3vC8KE6pAMQoTqwA1BhObAC0dE5qAMR0TWkAtChOaQDYKmPfsFdkGE5ZAyOAFE5pAIQpdMArS7BK65avlweWpLwoTryAxChOvgDUGE5+ALR0Tn0AxHRNfIC0KE58gNgqr9/AlCl2cHan4bigKXTAK3csSuuWj95SbLwoTrEAxChOtADUGE50ALR0TnIAxHRNcQC0KE5xANgoTnkCj9/snHV37a9P3F91advhkzUnZErrl947Sci8KE1RAMQoTVQA1BhNNAC0dE0yAMR0TLECOQQUTrgCfPAonChMsQKq4BRNMQDYKDl0wCrbD1sMSuuXFw9bDvi8KE6+QMQoTr8A1BhOfwC0dE5+gMR0TX5AtChOfkDYKxfgxUgpdMArMJgq65XsqCnMvChOqEDEKE6pANQYTmkAtHROaIDEdE1UQLQr8Ivj1Jh0TmoAjChOVEHYdE1UQT2RYOx8TmhCb++zHCg78C6DxHQ78C6DZCvcJHTzaIAr7e6B2+PTxJfcWEtvhE9DbIB39WuH5Wge25Ar8CykK3PEd+x/+GCAK+5+gIgoB9zHhA/cxIB37wwc+aKtGuKAF+9jh9/8H6rdr0ExuBfebBw5GMx3K9RK65ZUrCoCIChO+AJX4mxU/CvcxFm2idKqpo6KpqnOhbWx0dWweDi8jHczyAbrl7/UDRAr7TPfHLh0+Kx3I9RK65pwrChP6SR0T/vuk9+opHT4rHcryAbrm7vUDSR37UvfrLh1cPR3s8hK65ev16Jgd6/gKLh38I7Md/CNDCur1En/3AHvhdvcAE+hPHRP0+0b3FCkd/COzHfso+yrX6nb4pnfs8hLR9Svh9y/1K+ET9U8dE/nJCvc1/b3fHeX5cS4d/CP7a9P3OHb4pnfs8hKtNB37F/Ur4RPxfwoHE/SnPAoT+CcKE/GquAX4pgcT8skKDvwUOB3s8hLg9SvRHSv5Ki4dSiMdyvUSuuWdKwqi5RPySh0T/p34HSkdRjsK6vUS2+F69wC89wCHgR37nfkmFT8KE7oA9zEWPwoO90NLCur1EveoKwoTvEsdE9xMHfvF+McpHSA4Her1Afca9wC89wBqHZ/3FCkdLDIK2PIB93P1A/h5+EcV6vw2P/faB/vk+/0FLvhI1/vrB9T42y4dODIdyvUSteWMKwqJmx3m+JkVPwr3MRZtonSqqaOiqapzoW1sdHVsHg5dMArK9RK65ZwrCpmKCpz4HSkdtqB2+FrX89cB9xfh91/hA/cX+McVakQ/0vxa4fha91/ACmr7X6wHt6OmrR7d1zkGKF5RMh8OwzIKP/dYEvcY4fdu4RO49xj5HhUT2PsMPj/YzQr3bs0K9yLX+yIHE7j3DDUHE9j7DPtuBxO49wwHDougdvha197sP9cS9xfh95jlM+ET2vcX+McVakQ/0sAKE+z37r0V5QYT3OwxBxPajf1aFeH4pjUGDp0yCvPXAfcX4feGwx333PxfFU21Yckex9ddBnWBlaEf+O41Bw5GhgpKph2moHb5DdgBoPkKA/fk+Q0V92/9DQXrBvcUHfuU/VoF6wYO6ovh+L7hErznMfeh7/ehMecT5PgG+RQV9yfdJPtB+zA8+w4nHxPoNfeh4fsWBxPk3cS97fcPGvdv+xD3I/tZ+1n7EPsj+2/7D70p3VIeE9T7FjX3oeEGE+QnPPcO9zD3Qd3y9ycfDkOL1/jC1wGg+KcD+JoWrddoBmeAnq59H/tE+FIF6WZnszcbXD/BBq+WeGiZH6dD+1r8kAXlBvcs+CLz+5wFKrGqZt0bDpoyCgH3NuH3T+EDwvimFT/2/Frh+Fr3T/vHBzK4UfcBHqvXawZfc6a3H/fH8dcHDmt73f8BD4AA2/8A4oAA3RK95UnlE/D4x+MVVNMFU1s2ZUcbJUrC3N/MwfGJH8GKBdwHVYoFE+hJij6s5xrKwrPjyNRnW7UexNEFw1orszMb+x0rP/sBO7VX33IfE/AoblhHLxr7EPI09y7u9LbIvx4OpiQdAcHn+BDnA/fklgr7mKB2+KHW9wJ3EvdP40bQE+js9yEd/KHj+VoGE+hGBj5qaj8eDnGL4fi+4QHH9wH3uOcD1Koda+AKveb3xudI5hPo98GLCoKgdvcl4fhzdwH4NeMD+I2xCnh74ffT3/cr4QH4bucD+JqVCnZ74ffc4fcw4RLH5THr99DnE/T4aYwKT6B2+QThAfdn5wOzyx1ie+H3nOP3buESs/MK98KJCnZ74fcw4ffc4RLH5/fQ6zHlE/THoR33KMf3vMcB96DJ90bJA/g39ygV3wr7E8U76B/8CPdmFYkd+2D7Ofc592Ee96+IFaAK/wGagABpChL4Hs9ZvRPAXAr7Cvg6FZEdE6BZBlJra1IeE8ByBg73NMf3rccB96/W9w5pHfsZ90AVXR1sHWMdDvcox/cYxfbHEveqQQoT9FwK+x73pBWxHXJRBhP0NwoO94DHAfg8aR37RPeMFfdMQMzWt8df95FYBvta+5oFix33Jcf3McXRxwH4e2kd+xv3oG4K9yjH9zTH1scS963GUND3HMwT7FwK+xv37OMKE/TWHRPszB34fccB9/ppHfse+InUHfcox/cZxPTHEvenQAoT8vg0fxV1Hfdfewr3Ofs5+1/7Yfs5+zn7YB/7IfeqFVAdE+w6HRPyPx1IChPsOx33KMfWx/c0xxL3rX4K+DR/FXUd9197Cvc5+zn7X/th+zn7OftgH/sb95IVwR14Ch4T+PcXHRP0lh1/1uDH97zH4tYButb3I8n3Rsn3Izkd9yOIFfsTxTvo6MXb9xP3FFHcLi5ROvsUHskW66zAw56bhYCYHvsU+2EFhZ+IpKcatPsWFfcU92IFkXaOcW4aLWpWU3h7kZZ+Hg5/1v8BW4AAaQr3U9YSutb3pM9ZvfeM1hP6Twr3RL8VkR0T9kkKE/pyBg5/1uzH963H5dYButb3Ntb3Dsz3ODkd9zb7WhVdHWwdYx0Of9bgx/cYxfbH4dYSutb3MEEK9y/WE/7ATwr3MClcHRP/QHAKE/7ANwoOf9b3Qcf399YButb3wsz3cTkd9wr7DhX3TEDM1rfHX/eRWAb7WvuaBd+UFe/3GQX7GQcOf9bdx/cxxdHH8NYButb4Acz3Mjkd9zMlbgp/1uDH9zTH1sfj1hK61vczxlDQ9xzM9zPWE/3ATwr3M3HjChP+wNYdE/3AzB1/1vg+x/HWAbrW94DM97M5Hfcw9xfUHX/W4Mf3GcT0x+PWErrW9y1ACvct1hP+YE8K9y0vFVAdE/2gOh0T/mA/HUgKE/2gOx1/1uDH1sf3NMfj1hK61vczzPcdz1HF9zPWE/9ATwr3M/sIFU6dvWrCG+XE5Pci7GDiLj9RVTQ3wVTQHxP+wLKpm6afH0CCamBcG3gKHhP/QPcXHRP+wJYdpiQdAcHn+BDnA/fkowqvq4J5pR77jPxTBXS6fsrZGuL7jxX3jvhZBadbmkc1GvtKRyX7DmJplqFvHg77Zovh+EvW9wJ3EvdN40bQE+jqsgpeJB0Bn+f4EOcD98KWCl6L4fhL1vcCdxL3suNG0BPo91iyCl6L4fi+4QHG9wH3uOcD06odXuAKteb3xudI5hPo97mLCl6gdvcl4fhzdwH4M+MD+IuxCl574ffT3/cr4QH4a+cD+JeVCl574ffc4fcw4RLD5THr99DnE/T4ZYwKXqB2+QThAfd65wPGyx1ee+H3nOP3buESpfMK97SJCl574fcw4ffc4RLD5/fQ6zHlE/TDoR1eoCIKAZj40gP4318dDvffi8f3rcf/AKuAAFsd+FbW9w7ME/SAWB0T7ID4GAcT6oBJChPtgHIG+Pr9AhVdHWwdYx0O99F7x3R290TF9sf/AKuAAFsd+DtBChN9UFgdE7tQ+BgHE7rQSQoTu1ByBvjf/KJcHRO7YHAKE7tQNwoO98l7x3R290TF5sdfx/edx3t3ErzW9w7M99FBChNz0PmEXx37avfZFV0dE7XQbB0Tc9BjHRO10PjX+3lcHROt4HAKE7XQNwoO98yL9xtPx/8BtYAAWx343swTtVgdE634GAcTq0kKE21yBvjK/LcV90wGE61AzAcTbda3BxOtx1/3kVgHE237WvuaBROtix333Iv3G0/H90LH9xjaCvh9zBOrYPmcXx37gvg5XB0TraC2ChO1oHJyb2ceclEGE3VgNwr4mfvxFfdMBhOtYEDMBxNtYNa3BxOtYMdf95FYBxNtYPta+5oFE61gix33xnvHdHb3XcXRx/8At4AAWx35BMwTfUBYHRO7QPgYBxO6wEkKE7tAcgb42vyjbgr3z3sd9Mf/AK2AAFsd+DRAChN9SFgdE7tI+BgHE7rISQoTu0hyBvjY/JwVUB0TuzA6HRO7SD8dSAoTuzA7Hfffex3Wx23H8doK99NAChNy2fmcXx37gvg5XB0Ts2m2ChO1aXJyb2ceclEGE7VZNwr4p/vWFVAdE6tWOh0TtVk/HROzWUgKE6tWOx332nsd08dwx/cQxdHHEveTzPfUQAoTt5D5lyAdNgYTd5DyCvt9+DWbCvii+9IVE7eQUB0Tr2A6HRN3kD8dE7eQSAoTr2A7Hfi/ex30x/ePxxL3isz4UUAKE75A+gsgHTYGE35A8gr7fPke2R344vz0FRO+QFAdE72AOh0TfkA/HRO+QEgKE72AOx1efPcLHXyTCl6gdv8A+YAAaQoS96bPWb0T4Pdf97++Cl6Lx/etxwH3NNb3DswD9zn3p5kKXnvH9xjF9scS9zRBChP497z3fhVyUQYT9DcKSogFsR0OXov3G0/HEvfQzBOg+BH4GBVYBhNg+1r7mgVY90wHE6BAzAcTYNa3BxOgx18H+zkW5Qpee/cRHfgZmgpee8f3NMfWxxL3OcZQ0PcczBPs+Af3v6UdXp9299zHAfeKzAP3OvgX1x1ee8f3GcT0xxL3M8xdzPcGzF3ME/L3wHsVkB0fE+w6HRPyPx1CyF7bHj/3DhW1qqi4uKpuYWVsc15ebKOxHhPsOx1ee8fWx/c0xxL3PH4K93zfkgpe98r3Cx33ypMKXv8CPIAAaQrkdxL3ps9ZvRPg91/5Ar4KXvfZx/etxwH3NNb3DswD9zn47JkKXvfJx/cYxXJ39yzHEvc0QQoT3Pe8+MMVclEGE9o3CkqIBfcmHR8TurtouF2ZHhO8tpiisbAaxVa5RkxUYVWDHsyHBaGOop2uG6ukc20fE9xycm9nHg5e+CLH95F3AffQzAP4EflbFVgG+1r7mgVY90xAzNa3x18H+zkW5Qpe98b3ER35W5oKXvfLx/c0x9bHEvc5xlDQ9xzME+z4B/kGpR1e+R7HAfeKzAP3Ovla1x1e98vH9xmra8Ryd/cqxxL3M0AKE5yA98D3yxWQHR8TmwA6HROcgD8dQshe2x4TzIA/9w7IHROrADsdXvfLx9bH9zTHEvc8fgr3fPgvkgr8Hw77t/sD1PcG1AG61fcE1QP3RvsDFdLFxdLTUcZEQ1BQQ0TGUdMfUvcVFaqlpqqqo3BsbHNybGxxpKoeDhwG20gdHAjkAxwJIm8dHPe0OxwISmEKHASDSB0cBowDHAbKbx0c+gw7HAXyYQr4v0gd+sgDHARybx3+MDv6LmEK/E6L9wIBun0KDvxOtQr79Iv3AveH9wIB5/cBA+f3AnkK94dYCvv09xsd5/cBA+f4Y3kK/GNxCkOL9wIBuvcB1vcB2H0K1vsCFfcB9wL7AQb3TvsCWAr8QLAd/ED7IXb47PcCEsH3ASzjE9DP3R19+AZYCj2iHT37NuH4pvcCErrn6vcBJuPt5xPs9973/BUzBkZ6aVVmHjRQZlRGGvsJ7Tn3IPcQ7uz3FZceL5EFNYBTTzobNVO6zYwfzbqevrYe0sWhvOMaE/Ar6VgK/E73hvcTHff0ZAoO+/D3Q/dbAbr3XwP3KfdDFcS3tMXFX7VSUV9hUVG3YsUfDvtlrh37ofet91wBuveuA/dh+HUVLAZM+1wFzgbEFs4G5vdcBSwGDvs7nh37Nt4d+zu7CoiECvtlrh33negKut0K+NqDCvs7uwr8Tov3AveH9wIBun0K+wH3h1gK/E61CvwFsB37O54d9xGFCvxOh/cTHfVkCg49oh37tfhT95uLdxK64+HjE3D3b8Ud/GH4U/ebi3cSuuUTYLogHT8HE6CZ+08FyQaZ908F1wcO/E73Gx269wEDuvhjeQr8Y3EK+zbeHfxHzx377YX3BveH9wYB5/cIA/cqvR377GQd94T3BhLn9wj7APcBE/D3KrgdS4X3BgG69wjR9wjQ9wgD9IVeHfcUxHUK900WaqRzrKyko6yscqNqanJzah4O/EeYCvxH+yF2+O73BhK69wj7AeMT0MHdHYT4QZ0KPZ8dPfs24fio9wYSuufb9wgw3+/nE6z33Pf8FTcGVHhbWWkeME1mVEYa+wntOfcg9xDu7PcVlx4vkQU1gFNPOhs1U7rNjB/Nu6DCuB7KwKLL1RoT9PsB9y0Vcx38R/eE9wYBuvcIA/T3hF4dDjrUCvxHhfcG94f3BgG69wgD9L0d/AWYCvxHzx09nx38RmQd94T3BhK69wj7APcBE/D0uB37b9EK+2nRClz3kNsBuviMA7r34BU7+IzbBw73ofeQ2wG6+cgDuvfgFTv5yNsHDjrUCvdq93/3UAG6+ZED+Y74KhW9SQVFQkFoQBtceZHD+wMfolxVmmQbR1dwSlEfWtAF3+XDptsbtcV8drQfUPcHmoa5G8i2oMnPHw7W98vbAbr5BgO6+BsVO/kG2wcO++CmCvvgpQr7cY8K+3GkHfvIpwr7yLcd+7J3Hfed2B0O+7J3HfedA/cVygoO+6hM+gwBuvcgA/fW+c0V+6f+DPenBvtI97OL98/3SPeyCA77qEz6DAH3SvcgA/fW+c0V+6cG90j7sov7z/tI+7MI96cGDvtxjwr7caQd+4z5ftsBut0Duvd9Fd34lfdx2/vDBg77jCTbAfeg3QP38vh+FTn8lftxO/fDBg77C3cd+ETYHSn8ZxX3S/xoBd0G+0v4aPdL+GcFOQYO+wt3HfhEA/e8ygr8RPxoFd0G90v4aPtL+GcFOQb3S/xnBQ77ivsm+ngBut0D97355hX7jvtzBfy3B/eQ+3bAxftz910F+HUH93H3WgUO+4r7Jvp4Afei3QPx+eYVVlH3cftaBfx1B/tz+13AUfeQ93YF+LcHDvuM932z+B2z27MBurPbs/KzA7r3fRX3NPhF9yP3NPvDBrP8vRX4lfdzO/sj/EUHDvuMJLPbs/gdswG6s/Kz27MD9/L4fhX7NPxF+yP7NPfDBvubsxXb9yP4Rdv8lQcO+7JMs/m8swG6s72zA/fM+c0V+53+DPedBvtI97OL98/3SPeyCPt1/eQV+bz3Lgf7H/ugi/uj9x/7oQgO+7JMs/m8swH3SrO9swP3zPnNFfudBvdI+7KL+8/7SPuzCPedBvtWsxX3H/ehi/ej+x/3oAj3Lv28Bg77yKcK+8i3Hfvgpgr74KUK/EpkHQG89wED9zIWXgoO+6P7Gnb3L/cZHRZeCvtv9y9xCvuj9x0dxfcBA7z4zfcGHfcC+53QCvuj+Oz3GR347BX3AvsB+wK0B2T7LwW9Bvtv9y8VtAZk+y8FvQbE9y8F9wL7AQcO/Er3HR0DvPjN9R38SrcKINf4JAG6+FC4CmP7ghX3Hfs2BfQG+z73XPc+91wFIgb7Hfs2BQ4g1/gkAbr4UAP39uEd/FD7ghX0Bvcd9zYF1wf7Hfc2BSIG9z77XAUO+8nX+CQBuveGuAoO+8nX+CQBuveGA/cs4R0O+7H4U/ebi3cSvOPh4xNw93HFHfxd+FP3m4t3ErzlE2C8+VoVPwcToJn7TwXJBpn3TwXXBw77ForX+A/X89cB/wDogAD/AFKAAAPHFsSK5om9upXkGa/31QX3Pdf7NQaRvQWuj6Cerxvp1gY0jDCMWV2BMhmGXQU0P9oGZ/vZBWiHdnhnG0oGDofvCt7X9wrnTecT+ucW9z8w1+YG9yiM59n3DhrnUMkqlx4T/NeavcPWGvcHQND7G5Ye7D8s+z8H4/0EFfd83vt8Bzj30hX3cN77cAcT+tf70hX3fAfqisBhQRpFUl8wih4T/PfUBPdrB9eCtWVOGk9hZj+BHg74v0gd+sh0Cvou2/4wfAocBINIHRwGjHQKHAXy2xz6DHwKHAbbSB0cCOR0ChwIStsc97R8ChwEgkgdHAaLAxwGyW8dHPqlBvej96MF+wUG+8r7y3Id+6L3owUcBVdhCn/W94PQtu/3HdYButb3JfDy8PceOR3q+y8V1AbLo7muxhvGuWhLox/UBvJzPcwnGyc9SiRzH733mhV2CvdgFnYKDn/W7tD3S+/3HdYButb3JfDy8PceOR3cgxX7AJvlO/cCG/cC5dv3AJsfRAZGe1BZRRtFUL3Qex+E9wcVdgr3YBZvonSnpqKip6Z0oXBvdHVwHg73oegKvN0K+NyDCnSEClegdvkO1wH3qtfS1wP4iSAd+3MG+yktPfsQ+xDpPfcpH/vG1/kO0v0O1wcONPsB3fkG3RLX5TTl94HlNOUT1Pgu+I0V45EF9wF8+wXINRv7BC5UJFypaMdxHxPoSm9vXlQaP79j9yhoHul0r29jGl9db0RAU7LLgR4yhQUile5B9w0b8vO87cB7tkuqHxPUw6GmsL0a51m0+y+yHimlcJ20GrO4p8fZu2dRlR4T5PuI+2YVs7inx8Hfd01fXHFEHi2VbKy0Gg73U3/UQvcw9zn/AGaAAP8AnIAA9zJC1BK81UH3PviC1RNz+Dr4zBXz0VAslB9AhgXCg2KuUBs8WlcxMLxW2sm1sMmTH9aFBSeBRU0gG/sRPdz3GPcY2dr3ER8TjfwJ+2cV+2D3Ofs592D3YHsK+zn3Oftg+2D7Ofs5+2Ae1Rb3NvcZ9xr3Nvc19xr7Gvs2+zb7Gvsa+zX7NvsZ9xr3Nh4OYOkK6r/xvuXEA/e49ygdyyEFxgZE9wUFsZWhp7EawGCrRB77h60d9yfcCmDpCvcCv/G+1sQD98f3KB3Ts6nAv1+sRR/7lq0d9zbcCveJ9/vJ93zEAfdfx/c0x/eTxwPnIB1S9wP7usf3uvcDxAe8+/MVx/eDBuX7gwXXBuT3gQX7gcf38zoHIfu1Ife1BTkGDvuN+BjV9y7VAbrW9yzWA/da+BgV3s/P3t5Hzzg4R0c4OM9H3h8/9ysVta2utbWtaGFhaWhhYWmutR4O/B1ZHfui+PX3FgG6962HHcMWUR38EfcMHf3w2/nwBw78EfcMHfv32/f3Bzv98BXb9/c7Bg5BoHb4Wukd/Frb+Fr3KR1B+xV29zjX+ADpHfwA+y4/9y77ONv3OPct1/st+AD3KR34U4vbyNn3VNn19weLdxLn4/gP48rYTveWT9cT70BEHRP3QPjnB/fn/OcF9xT5WjP88gb77fjyBfiE/B8VIMNI5OTDzvb2U84yMlNIIB4T7oCb+88V95bb+5YGE+9AyPd/Fcmjrbe3pGlNTXJpX19zrckeDl73ZLzpva+86b0B2r73Xr4D9+D4JRX73vcYHQf8XSYV9xgd+2AGDvdo93z3INv3RgH4NuXb9yAD9+b3fBX4Gvgi+yD7lvuO9wMG+0n7SfdJ+0oF+7X3ShX4BfgFBftv5feW98D8wvwa+3EHDl73870B+Ca+A/i4+CUV+4VZ6vusvves6gb8hPerFfD73gXBBvD33gVVBkH7j0H3jwUOLzD3NU52qnb4s3cSuuXY/wBLgAD//+uAANcTOvg59/QV5ZF/60TLNJ4Zk+cFPwaDMwX7GX82IvszGvsfzCn1bR4TnIMyBdcGE1yS2vcDjOrVnPcLGTCRBROagERXYU2GrfgTGBM6t32uaJNXCPuwNBX3ALfQ2JoeavwKBVOma8rnGg5R7NX3kNW4dwHo1feQ1QP3uewVtbGYoasf2jzBwTzaBaCrmLG0GrR+snarHtraVcE8PAWga2SYYhtiZX52ax882lVV2jwFdWt+ZWEaYphkoGsePT3BVdnZBXarsn60G/sS91wV0MTE0M/FUkZGUVJHRlLE0B4OjzD3OjXhSnaidvkd4YV3EtXn9xXX9xPnExeA9yv3fRUvhZb7Fegx9xh6GROHgDnXBxMngNsH9wiV8s73Dhr0Ksv7Dq8e94EHyHe0WZVJ55EYfvcDQOH7CKIIExuA4D88B/sWhzBB+wka+wf1UvcHbh77jwcTF4A7nVvEe9oImve+FRMbgMvBtNaPHvt1BxMXgEefTqnNGhNHgPdh/FwV93wH42uyZFIaS1loPoYeDuZ74fc419nX90ThAfcj5wP5SPd0FS2RBS54TEg6Gy1M0OpwH/cyBpbXBftLBoqZipqaGpaLl4yWHvdVBpbXBftUBvCkytbuG9fIUDahH+eRBfcWbCzp+xEb+yMj+wL7LGofKz/gBoqAi3+AGnyMfIx9HjU/7Qb7Jq/yI/cfG/cd6fD3H6UfDqh/4fc019nX0Xf3EuEB4Of30OcDxvd+FbEGg3yHeXoa+wfwOvck9xPu0PcCqx4mkwVNcE1kQhs0TrjMnJGcl5sf+DjX/MAG2QT4wNdbBpaekqKgGvcOK9j7LfsGMEH7Cmwe7IIF1avBtMwb4MdcSXGEd3p6H/wuBg7Xi/dZP9fZ4feb4RL3NuMz91/3aOcTuvg1IB37k/yV+wgGE3o/9wgHE7r7DeMHE3r3DQcTdvcHBhO21wcTuvsH2a8KrqB296fh6Nfp4T/XEuf4ohP0+BwW9w8G+8L3pwXVBvcj5M33BZwf3dc6BhPshbR8rnOnCPcSBhP01/yiNfdXB+a/bEyZH/v0P/fzBk18V2wyG/tXNQYO9xaL4Piw4AHn49vj2uPb4wP4ASAd+6X9WuP5BfdPBrCidGYf/C7j+CkH51HFLx4i/VoV96UG58XF5x/4xDP8yQdmdHRmHvtP+GozBg5ui+T3d9f3jOES9xLmYOE194oT8Pfm+WoV+wotNvsEaZNlml0fkXgFKz8GE+j3BQaMfox+fxo3ZE9AXh4yB/iFjgXh/DgH6bWx5YLqCBPk9zTXBhPw+0UGe7+Bs6oa1Me/zMS9a1SdHvGSBd18Qt/7IxsOfaB29yLbzNv363cB96TjA6AgHfdh++sF+w479zxK+zw79zz7IuP3Ivcy2/syzPcy2/sEBvdg9+vrCg5A95Pb91p3AfeJ2wO69+MVO/da+1rb91r3Wtv7WvdaO/taBw5A95PbAbr4cAO69+MVO/hw2wcO+zL1+B4BuvgdA/L4iBVTUvcg+yD7IPsgw1L3IPcg9yD7IMTE+yD3IPcg9yBSxPsg+yAFDkDg9wbh2+j3BgH3ffcIA7r4ARU7+HDbB/u2+3N1CvgJBHMdmvcw2/cS2wHn+HAD5/hOkh37shX4cNv8cAYOQPcw2/cS2zv3PBK6+HATsPfc+KYVE9BwMwX7kgYTsDv3egdk+xIF+1M79zsGYfscBdoGtfccBfd62/tiBrL3EgX3OwYT0Nv7IwcTsKbjBQ4vq/iWAfhA1wO8+LYVMwf4D/s9/A/7PQUzB/hb918F9wAHDiur+JYButcD+Ir4thX8W/tfBfsAB/hb+18F4wf8D/c9+A/3PQUOQPUKutuSHdwV+HD3FwX3AAf8cPcXBTgH+Bol/BolBQ5A9Qr4n9sV/HA7+HAG/HD3uBX4cPsXBd4H/Brx+BrxBd4H/HD7FwUOQK7b92HbO/dmEveJ2xPQuvcHkh33YRX3WvsW2/cW91rb+1oGE7D3FjsHE9D7FvtaBw4g3dc/90j7PvdHP9ep1z/3R/s+90g/1xK62/ew2xOJwLr3yhUTgsDbBhOJwMqbtLGsnHJxnx5toqZrxhvbvtbzHxOEwDsGE4nATXtiZWd6qKd1Hqd1cKdUGztYQCIfEynA+24E2wYTmcDKm7OxqZx2cp4ebKOlZ8ob277X8x8TScA7BhOZwEx7YmVhe7Ksbh6hd3GeXRsTKcA7WEAjHw4g93/aPPdO+0T3TjzaErrb97DbE5y694kVEyzbBhOczJu1sbGbaWykHnCgp3K+G9u+2fcAHxNMOwYTnEp7YWVqeqWmdx6qdHCsUBs7WD37AB8O+zT3f9sB9/rbA7r3zxU798v7Pdv3jQcO+4f4E/e2OtwSuvfIE6D3o/gTFd8GE2An97YF+wAGE6An+7YF3wYTYNH3ZQUO91jq2fdX2j3ZErrl+MvlE7j4CvejFUtmWGlTG1dit8HBtLe/H8SKvWmwTAj72xYq2Tzq29q02bUeO7XcZNwb6Nfa7B8T2Ow/2i4eN4o+YmA9CBO412A/tzkbLD08Kh8T2Pg4FrHLv63Eigi9irNgVhpWY19Zih5RileuZssIDvue+yrY+VbYAYv4DwP7KQS6iuaJvbqV5BnN+OiPrqCgr4kZuomS2FyMMI1ZXIEyGUr86IdodndnjBlbjQUOkovb+MHUi3cSoPj2E7Cg2xU7+PbbB/uM+QoF+wYG+zf9ChUT0Pdw+MH3cPzBBQ5u+xV2+aDbEqT3Uzvb91DbO/dPE+T44yAd/Mo7BhPY9wP9oNv5oPdQ/aDb+aAGE9T2Bg77ByUdAab4cAOmIB02B/dJ+6L7SfuiBTb4cOH8Cwf3SPeh+0j3oQX4C+EGDmn7FXb5pNcBofjLA/jhIB37rQb7HP1XR/fhBTkG8Px6BfAG9yv5pAX3agYOW/cNHRPovAr3L/ccuvik/Ei4djwY90J89fsLjftC0woIE/DWhchfmD+C+xFBOSyTCBPoMpRTzZXvCA5Y+xV29x7XYHb4pncS5eH3iOE53RO8+I4W+KY1+9AHE9wvV1E3Q2e97x730DX9POH3XAdlnLVzvBsT2sjBscikHxO6NAcO9xGFCvhXwwqv2Pcd1xOr8PocFtzL2OzsS9g6Oks+KirLPtwf/e34rRUTGwCTHR4Tq/A6Sz4qHxNGAKz8uRXsBvia+XYFKgYTGwD8bvtRFcalsLW1pmZQUHBmYWFxsMYeE6Dwvx332tIKDtb3FR35WhX7y/vKBfsFB/eh96EF/MDf+L4H96H7oAX3BQcOfPkM2wH/AfSAAP8AUIAAA/jZ+VsV/EyMPDsF+BAG/B38HcZQ+Bz4HIz8ENvbBQ73N/fM3wG8+VoD+YvbCvzAN/i+9x4dfOcK+In/AE+AAAP42I0VjPhMO9oF/BAH/B34HVBQ+Bz8HPwQits7BQ7W9xUdFvfL98sF9wUH+6H7oAX4vjf8wAf7ofehBfsFBw585wr/ADGAAP8AT4AAA72NFfhLBtvb/BCM+Bz4HFDG/B38HQX4EAc7PAUO9zf3zN8BvPlaA7z39hVyHfug96EF+L7f/MAG96H3oQX7BQYOfPkM2wG8/wBQgAADvPlbFfxLB9s7jPgQ+Bz8HMbG/B34HQX4EAY82wUO+CX3zN8BvPpIA/p52wr9FAb3ofehBfsFBvvK+8tyHfug96EF+RD3Hh3W+yB2AffS3wP3/Ps1FffL98oF9wUH+6H7oQX5FAf3ofuhBfcFB/vL98r7y/vLBfsFB/eh96AF/RAH+6H3oAX7BQcOm/c82vcZ2QG8+McDvPfIFd8GnsSzp6x4rHiIZZFkkGmXaLdxz2Tcs8Hl4lgYdfeD+2so3VtrVWlwa54ZbpuJqoithrGEtVipO7n7CEB6IAgOrvfO2wG82wP3Off2FfdX+zYF9w73o9v7pPcOB/vK+/kV2/gaOwYOrvfO2wH4u9sD+Jf39hX7Vvc2BfsO+6Q796P7Dgf3e2oV2/gaOwYOnvcnHfir2xOw+B/3iRX3D+zn9wr3Cirn+w8f+7s797sG2clSQkJNUj0f+1sGE3D3EvcRBfsBBvs4+zn3Ovs6BfcABhOw+xH3EgUOnvcnHbzbE7D3ofeJFfdZBvsR+xIF9wAG9zr3OgUTcPs49zkF+wEGE7D3EvsRBftbBj1NxNTUycTZH/e72/u7BvsPKi/7CvsK7C/3Dx8OpaB2+CffAfiu3wO8+FEV91f7NgX3DPe6/Cff+Hv8D/cMBw6loHb4J98BvN8D+QL4URX7Vvc2BfsM/A/8e9/4J/e6+wwHDqX3c9/4J3cBvN8D+QL3nRX7V/c2BfsM+7r4Jzf8e/gP+wwHDqqgdvkK2wH4PdsD+GUW9zb3VgX7DviY/Fw7+Az8R/sOBg6l93Pf+Cd3Afiu3wO8950V91b7NgX3DPgP+Hs3/Cf7uvcMBw73Mdv3mgH3zPdIA/fM+DoV++r3SPfq8Af7U/dT+1T7UwX7UTsV+BH4D/gP/A8F+2X76vvo9+oGDvtz9yUd+UoV+zb7VgX3DPx23/h19wwGDmT5XXcBvPiQA/jB+V0V+5B04Db76fvpx1D36Pfp4DUFDvcV99XfAbz5OAP5aff/FftW9zYF+wz8djf4dfsMBw5kjviQAbz4kAP4wY4VdPeQNjb76ffpUE/36fvoNTYFDvtz9yUdnRX3NvdXBfsM+HU3/Hb7DAYOZI34kAG8+JADvI0V95GiNeD36ffoUMf76fvpNuAFDvcV99ffAbz5OAO8+AEV91f7NgX3DPh13/x29wwHDmT5XHcBvPiQA7z5XBWi+5Hg4ffo++nHxvvp9+ng4AUO91n3wN8BvPl8A7z36hX3Vvs2BfcM9/j7DAf3Vvc2+1f3NgX7DPv29wwHDvtzj3b5fHcB9z3fA/dnehX3NvdWBfsM9/j3DAb7NvdW+zb7VwX3DPv2+wwGDvdjlHb5dncBvPmGA/g+fxX3afc49y/3afdr+zj3L/tp+2n7OPsv+2v7afc4+y/3aR8O92N/0/jm0wG81fjy1QP4Pn8V92n3OPcv92n3a/s49y/7aftp+zj7L/tr+2n3OPsv92kf+8P4BBX3QfcY9xH3P/c/9xj7EftB+z/7GPsR+z/7P/sY9xH3Px4O92OQ1fjg1W93p3cSvNX48tUTnPkV9zoVv1ecnJuemaAZTbSAen99fXwZ/OT3XBVyjnKQdB7UmgWGnomeoBpI0xXUfo6ekZ6SnRlHp4F1hHOHchmj+20VlXWYdZl3x7cYgJqBnIOdCGf31xXJYpacl5mZmhlXv3p6e3h9dhnB/GwVnXqefKB+sskYepZ8l3yZCBMojPidFbROmpadlJ6TGW/PdIF1gHd9GdT9IRWigqOFpIaX1Bh3j3iQeZIIE8Sv+RQVmUMFjp+ejZ8b1Qdyc4iHcx/U/W0VpKOOj6MffdMFiHd4iXcbExS/+OEVn4eehp2EptAYdJRzkXKQCL/9FBWnR6KVoZafmRliyHyAeYJ4gxm6+KEVnICaf5p9vcEYeZx4mnaYCLr7JBWWfJV6k3nPqRiBoX6hfZ8Ib/vYFc9vlaGSo4+kGUKYiHiFeIR5GZr3QhWQeI14dhrVjAWkiKSGoh4OI4vQW3b409ASvPhPE3D3bvkYFfs9+9b3PfvWBfQG9z331vs999YF+0771hX3GveR9xn7kQUTsPsZ+5EFDvds9Ar5WhX4Lv1aBf3HBg73RmcK5/laA/m29/gV/Vr3+AX9XQcO92z0Chb8LflaBfnHBg73RmcKoPlaA6D3+BX5Wvv5BfldBw73bPckHdsV+LAG+6P4awX8Lfy7Ffgt+Vr4Lv1aBQ73RmcK59sD+bb3+BX9Wvf4Bf1dB9v3FRX4Wwf4V/t3BQ73bPckHfkKFfeh/Gv3o/hrBf082xX5xwb8Lv1aBQ73RmcK+R/bA6D3+BX5Wvv5BfldB/yn+/gV+Ff3dwX8WwcO/RnBCv0Z1wr9GcQK/RlZHf0Zxx39GVkd/RmtCv0ZtAr9GawK/RmvHf0ZlAr9Ge4d/Rn5BPcCAbr3AQO6+XL1Hf0Z4x39Gasd/RmnHf0Z94vXAfdb+DQD91v31xU/+DTXBw79GeMd/RmcCv0Z0B370cEK/GHXCvwdxAr8HVkd+6PHHfulrQr7pbQK+5+sCvwArx37a5QK+7vuHfvjqx38FKcd+7KcCvxR0B38SrcK/B1ZHfxh+Hv3c4t3ErrlE2C6IB0/BxOgmfsnBckGmfcnBdcHDl4Of/l2Abr5dgNcCg5/1vjg1gG61vjgOR0Of5f4ppf3PJsG+zaXBx6gN/8MCYsMC/nUFPkZFakTANkCAAEABAAKAA8AJwAvADkAPgBIAFQAWQBeAGQAaABuAHMAgQCLAJEAlwCdAKsAwwDKANsA5QDuAPUA/QEDAQsBHwEnATABNwE9AUMBWwFgAYABlQGaAaIBrQG2AbwBwwHLAhcCPwJEAmsCggKIApsCnwKjAqwCsgK5AuoC9AMEAxMDGAMiAywDMgM9A0YDTwNWA10DZANqA3cDhgOQA50DoAOzA74D0QPYA+gD9QP+BBAEHQQsBDEEOwREBE4EVwRgBGcEbwR3BH8FKwW6BegGBQYNBi4GlQa5BxcHdAeCB4oH2wgNCCkIQQhQCHQIuAjOCOUI/AkOCRgJHwk4CTsJRQlPCX4JgwmUCcMJ7woaCkQKbQp5CoQKjwqXCrIKzgrjCv0LCQsqC0QLZgt+C4sLjwugC74L3AvjC/4MGgwhDDMMOgxVDGkMgwydDKsMtwzKDOEM6wzvDQUNDA0VDR0NMQ1ADVINZA13DYoNmw2mDbgNxw3LDdEN3g3vDf4ODg4dDi0OPQ5HDlEOYA5tDnUOfQ6LDpkOpw6wDr0Oyg7XDuQO8A78DwgPEA8bDyYPMQ88D0cPUEUdDsg2BWUKDnb5WncLepugebYbx7LA2h9MBlx+dnBvf6Gedh4Ldh1PZFg7HwsV5ewxBvckKiIdy5DLEgv3Ih2fm6OZnx8LFeb7FgXOBkz3FgUO+1L3FgvK92bKC/cAvPcAC4uCCguOQQXZBgvN9yzNC+H//7CAAP8AT4AAPdkLf91F0fgezUnZC/ib+KYVC4vX+A7XC3vh+RV3C/dbBvsHhEYy+w+0HR8L4LVgM4wf+y5tBfsKdDlw+wIaLOFT9B4L/BL3nccKC6QGtqxsZGhscGNia6OqiB8L+SMW9/z7sDUHC/sJdjhw+wQaC9/FuLuhHwt/12B2+KZ3CwZlYVYKC2IK+Fv3AR0LsNd1BnWBlaEf92gH9yI+2/sdHgttonSq7AoeC8xdzPcGzF3MC8z3GMxZzAvhN9882gugdvimdwvGClUd9wTs1fcMnB8wkQX2HcrEY0eWHwt6HYYdC6D5WhX3Tv1aBfcCBvcf+Kf3H/ynBfcCBvdO+VoFKgYL+yP84fsm+OEFKAb7Jfzh+yT44QULzI/IHQtZBlJra1IeC3vhWnb3puH3rOELi+r3xfcWi3cLS7t6wR4LYgrj+VoHC/snK/sA+z0L+DR/Ffdg9zn3Ofdh91/7Ofc5+2D7YPs5+zn7X/th9zn7OfdgH/u6+AYV9zj3FfcV9zn3OfcV+xX7OPs5+xX7Fvs5+zn7FfcW9zkeC/etpxXOxa7DpR80B0JTZC5KXqi8dR4xhQUupN9O9wUb9x/r1fcgHwvnA6gdCxVWtWO/vrWzwL9htVhXYWFXHsOMFZ6cnaCfnHl4d3p5d3Z6nZ8eDilUVzo/a7/tHvfQNfvpB/sExTL3Ch4L3gpgCgYL+yvsIfcdHvsk95UV9wDEzuceCwWEHQv3EB0OFfcB9wL7AQYO2Ar30QcL0Miqz6cfCzSjIqLiGs7Gtdvsz1EzmB7nkQX3F3wm6vstG/scK0D7DPsH9VL3B24f9yFnyWBDGgv4NH8VdR2JHR8LXrKqdbsbwra0v8BjsFIfC/cC+wH7ArQHZPsvBb0GC6BiHdoL9+jh+xL4rvcMCwb7ovujBfcFBg7nIB39WgsSuuX3u+E24DndCxX7AvcB9wIHC9kGNPcMBSIGCwH4X+cDvQufdvlddwELQk1rRHAfC/8AMYAACyQdyvcWAbzn+GZRCgsjHc73FgG65ffG5QNKHQuDHfc58vH3Nh4LMwrt9xYB2OP3/EAdC5sKDvcPHRPozwoT8EZkbUp6H4jqBQuFHXJyb2cfclEGCxW0BmT7LwW9BsT3LwX3AvsBBw4BxPhIwgoL4gr70eH36Qf3BFHk+w0eCwPJ9/cVch37ovejBQsVaqRzrJQdHgtvonSnpqKip6Z0oXBvdHVwHgvKBrqZn6ajl3p6nB4LbXiYpoEfjPdCFbykq7YLZAr7AQtTHRN+gJP7CAUL9zn3Ofdg92ALBvej96MF+wUGDvcBA7r3AmQKC8z3Hc9RxRP4C9v4phX8pgvlfeN35RPoC/cBI8v7FK8L4fd43/d24Qv4fhWHVgWydluiThv7FUUn+wF/HxPewPsCfsMo9xUbz9CyvKIfE79Amvsb96GJlfe+CPdpkvs39zv7bBv7hPtY+0j7eoMff/vR96T7O/fb9xF60hj7syH7b/cTlfefCPdQkvc19yj3XBv3QvcY+yD7P4UfhvsoJ01kx3+cjrmNoQgT3sCd93oF++j7XBXZk7TT5xsT30DmqEI+hB9Bg2FBMBsT3sAvb9TWkh8Of/l3Afdc9y0D97X5ahXsgtsvaCR5V19WRmD3NvtiGKOrlMyHwuWDGDtxOWRcHuEkBSMGZ7cFZ2RNd0Yb+yol0fcW36+95MkfmJQFXch4xL0a9OHP5YMe+zT8rhVByl3vu7aapJ8e+z/3bgVfblBgSRrS+AYVbJlkrlsey6izubYauXGsYI4eW45mZIxdCA7DChNXwPjq+WoV/Jr9dgXsBvia+XYFE5vA/Rz7URWTHTpLPioe2NIKE7vAvx0OMx10HROyNR0TuDUKE7Q6ChN0TAoTcj4KE7JFCg4yHc73Fp0dC1YdE7hANR0TuQA1ChO4gDoKE3iATAoTeEA+ChO4QEUKC3sV9y33Adz3FuJYzzauHxPsy6exudMa9wQs3vsZ+xgrOPsEQ7BdzG8eE/I2aVhHMxr7FvcBOvctHvs+924V3M2+8/PNWDo6SVgjI0m+3B4T7K333RXOv7Xf379hSEhXYTc3V7XOHg4vChOsIDEKE6yANQYTnIAtHROcQDEdE1wgLQoTnCA2ChOfIAv4OBVVjAU0B8GMBRP03o3jYywaLDNmOEY4rOGDHjCFBfsJkfI59yIb9y73AOL3EOdUzyioHxPo4aS3wNoa9wEp1/sg+wstRCd+HueFBcOUv67UG+XDZU4vO21JjB8O+LsV55IF9wFrM8b7ABv7YUf7XPtp+wOkMb5XH1W/ynXJG/cn8+z3L/cmLPH7IT9MaEtkH/c4mcvm9BvNvGtSoB8T7PvN+88V6ozQzusb48lILCpKRi8sSdDsjR8O3fga3QHH5feI5QORCgsrHcz3Fn0dC/sH2/lV2wG6ybTcA7r3/BU2B8eNtlM6GjgHJtVE9R662wYhh2Ok0BrnB+ZazUKZHowH0pm+zOUa5wfQs6T1hx7bXAchQUQmHzgHOmBTT40eDovh93vX93vhAfdI4/gS5wO8+B0VP/cX+9H3dgfWCvtw+9EG4/vHFfd79yvX+yv3e/Id2x3OCvsCk+tG9xIb7/a38ngdH3EdxcZoUJceCxVLhQXBHRP4eAq0qGtaih5bimxsZRuWHRXfCvsTxTvoHzL3YxWgCvjzJgq6KgoTcPcr+TgVo5d6epwfE7AjChNwJArKBrqZn6YeDiAd/BsGVPwkBeoGvaHCqMwb8MtNKC5MSi43RLbXgB8vhQX7CZX1OfciG/cj9PD3I/ciKvL7HU5NdWRpH6j3aAX3zgYOowr3Ds8k+0v7Skcl+w77Dkfx90oeDlId947hE7ZZChPWcwoT2mgKE7qI5gULhfcG+O53Err3CPsB4xPQwdodLP0nnQoV5x1jHV0dzVm5RUFVWj6CHg4VuQpKiAXcHQYOFdwdx7kKC/jx9QG6KwoD8PjxFewKbaJ0qh/ywBU/Cg51Cg52+KZ391x3pAoLAc7l96jjA6kKC+uswMOem4WAmB77FPthBYWfiKSnGrT7FhX3FPdiBZF2jnFuGi1qVlN4e5GWfh4OIgq7HQuwChNPgGFkBRPvgF0KoqQFC3sV90H3Afcj93f3efsB9yP7QftB+wH7I/t5+3f3Afsj90Ef+1L4BhX3S8/y9w4LAdvhA9sgHf1a4fcbB/H3A/c++4oF9Qb7bffF92P3dQX7CQb7j/uvBfhjBwv7AvnwAfdD5wP3E/mCFTsG9z77s4v7svs++7MI2wb3Tveoi/fI+073qAgO+wL58AG65wP3nvmCFTsG+077qIv7yPdO+6gI2wb7Pvezi/ey9z73swgO+wLb+VDbErrdOfeHE+C6+YIV/fAHE9D3h9sGE+D7NflQBhPQ9zXbBg6wChNPYWQFE+9dCgv3MfeCFTGDBbMKC9sgHf1azh33jgcLLArb9xaCHQv49csBui4KA/cF+XcVSQZCyVLb28nE1B7wCg749SgduveqE6D3i/j1FWUKNfsMBdkGE2DI4AUOMVXJ9YMf+BMGirIF91KCItb7CBsL9zsG9w4d+zv78RX3m/c7B/bAYDUyVl4gHw6nZgW2lax7axqPHQsgHS0G+/38cwU1+AP7JeP3JdzhOgf77xb3l/fsBfvsBw73IR38S/s0NfgV4fsd+QQGE+hGBj5qaj8eDvskjOgl9xgb9yDj8fc2H/hiM/xiB/sGWUsxNVrH9wCKHgv49fcMAbr3qgP3i/ltFU42TuAFPQZ8HQ5kHQG69wED9zAWXgoOhR0fC/js9wIBvPcBA/cy+OwVXgoOA/dM+HAV+x37NgU/B/cd+zYF9Ab7Pvdc9z73XAUL+2IGbPt2BckGr6GjjaEbsqloX11ta2RobaCshB8LAdvhA4odC/sC+fABvfgOA/hA+wIV+7v58AU4Bve8/fAFDvfJ+G4V+yeYJjV++yx++yLoIPcmf8WFwZ6/tgt2+QThxQoLFXJZBpEdE9BZBhPgUmtrUh4O/BL3neUdC/xa4fha9xnX+xmsB7ejpq0e3dc5BiheUTIfC/j57AG65cHlA7ogHSrl7AfBKiIdA/h5+EcV6vw2P/faB/vk+/0FLvhI1/vrBwuL2UZ2967Zmtn3VNmadxK62Pcd1+vY9x3XC/j19xYBuvcyA7r5dygK9wQd/QTj+QT3cAYL+Dn39BXlkQX3Bn0o0fsAG04KCxXytev3AvcBtiolKWAq+wH7AmHr7h4LoNkKYB3j+VoHCyuMHQv5yRU5BvdL/Gf7S/xoBd0G90v4aAULuvedFVUdC/zyB/vt+PIFC/vM9wUd98wLx33VhUwaVUh7WTxZs8qAHjGFBQvYCvfQB+awutwev9dXBgsV9wH3AmIGsvcvBVkGUvsvBQ73kNsBuvfgA7r34BU79+DbBw4WxqWwtbWmZlBQcGZhYXGwxh4LbspUsUOSCPs/+3wVkuvPyeSDC/sQ2wG6+GoDul8VO/hq2wcOexX3X/cO9yH3eQv3bPcM9xP3d/d4+w/3FPtvHwv4+ewBuuUDuiAdKuXsBw5/CuELIgru9xYLxXJ39yzHe3cSvEEKC/f2FfvK98sF+wUG96H7oQULlhXaugeun35ycXd8aB8O1fcI2veSz1HO9yLVE77AC/gTIB373DX3DPyu+xI1C+jF2/cT9xRR3C4uUTr7FAt74f8BCIAA4f8A24AA4RIL6IQFwZi6sssbC+zCv9/aq1cqHgsVKrY06NfFweLfVcJGHgslFc4GE7Dm9xYFLAYO7/cZBfsZBw4jHc4oHbrlC43/AFCAAP8Bw4AAdwELJtf1yE/R97TG9x3VEgv3cMX3N7fauMbFAbzEC/th9wn7OfdhCwUjBvtS+9v7U/fbBQupo6KpqnOhbWx0dWwL93j30d/70fd2993hC/sVdvce3fga0UXdEguL4fd84fdw4RLn4wtJBmZqbmBgaqiwHgvnFvhO4fv2+QQzBgv8ff1aBeAGC+dR5/ek51HnE/ILi/laAaD5xwP4QguL2/hXdwG6+HADC/cY+R4V+ww+P9gLe+H4zuHO7AG85wv7Lj/3FvcuHw4AAAABAAIADgAAAAAAAAEmAAIALgACAAwAAQAPACIAAQAkACUAAQAnAC0AAQAvAC8AAQAxAEYAAQBIAEwAAQBOAFYAAQBaAGAAAQBiAGUAAQBnAHYAAQB4AHwAAQB+AKsAAQCsAK0AAgCuALkAAQC7AMAAAQDFANEAAQDTAQUAAQEJAQ4AAQEQARMAAQEVASQAAQEmASoAAQEsAWQAAQFlAWgAAgFpAWoAAQG6AboAAQG7Ab0AAgHAAcEAAQHDAcQAAQHHAcgAAQHSAdIAAQHUAdQAAQHbAdsAAQHeAeUAAQHnAegAAQHqAesAAQIRAhIAAQIbAh4AAgIoAikAAQIwAjAAAQI0AjYAAQI9Aj0AAQJBAkEAAQJUAlQAAQJ2AncAAQKCApUAAwABAAEAAAAIAAIAAgKCAo4AAAKUApUADQAAAAEAAAAKAOwB4AACREZMVAAObGF0bgAwAAoAAU1BSCAAFgAA//8AAwAAAAwAGAAA//8AAwABAA0AGQA6AAlBWkUgAEZDUlQgAFJLQVogAF5NQUggAGpNT0wgAHZOTEQgAIJST00gAI5UQVQgAJpUUksgAKYAAP//AAMAAgAOABoAAP//AAMAAwAPABsAAP//AAMABAAQABwAAP//AAMABQARAB0AAP//AAMABgASAB4AAP//AAMABwATAB8AAP//AAMACAAUACAAAP//AAMACQAVACEAAP//AAMACgAWACIAAP//AAMACwAXACMAJGtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7gAAAAIAAAABAAAABAACAAMABAAFAAAAAQAGAAcAEADIC3oNdg2aGBwZKgACAAgAAQAIAAIAOAAEAAAASABeAAQABQAA/+wAAAAAAAAAAAAA/9gAAAAAAAAAAAAA//YAAAAAAAAAAAAA//EAAQAGAXIBdwG+Ab8B3QIXAAIAAwFyAXIAAwF3AXcAAgIXAhcAAQACAA0ADwAPAAEAJwAnAAEATgBOAAEAWgBaAAEAXwBfAAEAZwBnAAQBcAFwAAEBdgF2AAEBdwF3AAQBeAF4AAMBjgGOAAEBvwG/AAICJQIlAAEAAgAIAAIACgB+AAEAFAAEAAAABQAiACwAMgBIAE4AAQAFAA4AGQAmAGcBCQACABn/7AEV/+wAAQBI//YABQDS//YA6f/sAV3/7AFl//YCGf/2AAEAAv+mAAkAu//YAMH/2ADF/9gA0//YAPz/2AEI/9gBDf/YATj/5wFD/9gAAgYuAAQAAAbMCFwAHQAbAAD/8f/d/+L/pv/x/7oACv/Y//H/2P/E/+L/7P/OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//b/7AAA/+wAAP/sAAAAAAAAAAD/8QAA//H/9gAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/9gAAAAD/8QAAAAAAAAAAAAAAAAAAAAAAAAAA/+cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/EAAAAAAAAAAAAAAAAAAAAAP/2AAAAAAAA/7AAAP/2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/9gAAAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/8QAAAAAAAAAAAAD/+wAA/+wAAAAAAAAAAAAA//YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+L/nAAA/7AAAAAA/9j/xP/iAAD/5//YABQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/9gAAAAD/7AAA/+IAAP/2AAAAAP/YAAAAAP/x/+L/7AAA/9j/5//s/+z/7AAAAAAAAAAAAAAAAP+wAAAAAAAAAAD/5wAA/+cAAAAAAAD/9gAA/7oAAAAAAAAAAAAA//YAAAAAAAAAAAAAAAD/8QAA//H/9gAA/+IAAAAA//EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP9+/+wAFAAAABn/2P/s/7oAAAAAAAD/0//2AAAAAP/sAAAAAP+c//b/nP/i/+IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/8f+w/+IAAAAAAAr/7AAA/84AAAAAAAAAAAAA/7oAAAAAAAAAAP+wAAD/sP/nAAAAAAAAAAD/7AAA/9gAAAAAAAD/9gAA/84AAAAAAAAAAP/iAAAAAAAAAAAAAAAA/+wAAAAAAAAAAAAAAAAAAAAA/+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAA//EAAAAAAAAAAAAAAAAAAP/YAAD/7AAAAAD/9gAAAAD/4gAA//EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/7AAA/+IAAAAAAAAAAAAA/9j/2AAAAAAAAAAAAAAAAAAAAAD/7AAAAAAAAAAAAAAAAAAAAAAAAAAA//b/7P/OAAD/9v/nAAAAAAAAAAAAAAAA//gAFAAAAAAAAAAAAAAAAAAAAAD/2AAA/+wAAP/x//EAAP/nAAD/8f/sAAAAAP/2//YAAAAA/+wAAAAAAAD/8QAAAAAAAAAAAAD/ugAA/84ABf/sAAD/2P/iAAD/9v/n//b/9v/OAAD/7AAA//sAAAAAAAAAAP/xAAAAAAAAAAAAAAAAAAD/7P/2/+IAAP/xAAAAAAAA/+L/7AAAAAAAAP/E/+L/xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/sAAAAAP/sAAAAAAAAAAAAAAAAAAD/8QAAAAAAAAAAAAAAAAAAAAAAAAAA//H/9gAAAAD/7AAA/+cAAAAAAAAAAAAA/84AAAAAAAAAAP/OAAD/xAAAAAAAAAAAAAAAAAAA//b/7AAAAAD/9v/T/84AAP/sAAD/7AAAAAD/9gAAAAAAAAAAAAAAAAAAAAD/5wAAAAAAAAAAAAAAAAAAAAAAAAAA//EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/ugAA/84AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEATQACAA4ADwAVABkAJAAmACcALwAyADwAPwBCAEcASABNAE4AWABaAFsAXwBnAGwAdwB4AH0AfgCEAIoArgC6ALsAwQDFANIA2wDeAOkA7QDwAPUA9gD7APwBBgEIAQkBDQEVARYBGgElASYBKwEsATIBOAFDAU4BWAFdAWUBZgFrAW0BbwFwAXEBcwF5AY4BzAHNAhkCIgIlAmsAAgBCAA4ADgABAA8ADwACABUAFQAIABkAGQADACQAJAAXACYAJgAEACcAJwAFAC8ALwAQADIAMgAQADwAPAAMAD8APwAOAEIAQgAHAEcASAAGAE0ATQAGAE4ATgAIAFgAWAAJAFoAWgAIAFsAWwAKAF8AXwAIAGcAZwALAGwAbAAMAHcAeAANAH0AfQAOAH4AfgANAIQAhAAPAIoAigAKAK4ArgASALoAuwAUAMEAwQAQAMUAxQAUANIA0gARANsA2wATAN4A3gAQAOkA6QAQAO0A7QAaAPAA8AASAPUA9gATAPsA+wATAPwA/AAUAQYBBgAUAQgBCAAQAQkBCQAVAQ0BDQAUARUBFgAWARoBGgAYASUBJgAZASsBKwAaASwBLAAZATIBMgAbATgBOAATAUMBQwATAU4BTgAQAVgBWAAQAV0BXQAQAWUBZQARAWYBZgAWAW8BbwAXAXABcAAIAXEBcQAGAXMBcwAXAXkBeQAIAY4BjgAIAcwBzAANAhkCGQARAiICIgAcAiUCJQAIAAIATgACAAIADwAOAA4AAQAPAA8AAwAVABUAAQAZABkAAQAkACQADAAmACYAEwAnACcAAwAvAC8AEwAyADIAEwA8ADwAAgA/AD8AAQBCAEIAAQBHAEgAAQBNAE0AAQBOAE4AAwBYAFgAAQBaAFoAAwBbAFsAAQBfAF8AAwBnAGcABABsAGwABQB3AHgABgB9AH0AEgB+AH4ABgCKAIoAAQCuAK4ABwC6ALoAEwC7ALsACQDBAMEACQDFAMUACQDSANIACADTANMACQDbANsAFQDeAN4AEwDpAOkAEADtAO0AFQDwAPAAGQD1APYAFQD7APsAFQD8APwACQEGAQYAFQEIAQgACQEJAQkAFQENAQ0ACQEVARYACwEaARoADQElASYADgErASsAEQEsASwADgEyATIAGgE4ATgABwFDAUMACQFOAU4AEwFYAVgAFQFdAV0AEAFlAWUACAFmAWYACwFrAWsADwFtAW0ADwFvAW8ADAFwAXAAAwFzAXMADAF0AXQAGAF2AXYAAwF3AXcABAGOAY4AAwG+Ab4AFgG/Ab8AFAHFAcUACgHMAcwADwHNAc0ABgHdAd0AFgHjAeMACgIZAhkACAIiAiIAFwIlAiUAAwJrAmsADwAEAAAAAQAIAAEMrgAMAAMAVACiAAEAIgHAAcEBwwHEAccByAHSAdQB2wHeAd8B4AHhAeIB4wHkAeUB5wHoAeoB6wIRAhICKAIpAjACNAI1AjYCPQJBAlQCdgJ3ABMAAA2+AAANxAAADcoAAA3QAAAN1gAADdwAAA3iAAAN6AAADegAAA3uAAAN9AAADfoAAA4AAAEMzgABDMIAAgzIAAEMzgAADgYAAA4MACIAzgAAAAAAzgAAAAAA4AAAAAAAAADUAAAA5gAAAAAA2gAAAAAA5gAAAAAA4AAAAAAA5gAAAAANoAAAAAAA7AAAAAAA8gAAAAABFgAAAAABFgD4AAABEAAAAAAA/gEEAAABFgAAAAABCgAAAAABFgAAAAABEAAAAAABFgAAAAABHAAAAAANyAAAAAABIgAAAAABKAAAAAABLgE0AAAL7AvyAAABOgAAAAAKHgpIAAAKigqQAAABQAAAAAAAAAAAAUYBTAAAAAABTAAAAAAAAQCMAhIAAQBqABIAAQCIAhIAAQBqAhIAAQBfAhIAAQCPAhIAAQEbAhIAAQBiABIAAQEYAhIAAQEmACIAAQBgAhIAAQERAhIAAQBiAhIAAQBKAhIAAQHHAhIAAQC4AhIAAQFcAsYAAQFbAAAAAQEXAhIAAQCCAhIAAQH6AAAAAQGqAhIABAAAAAEACAABC8IADAABC9gAEgABAAEBugABAAQAAQCOAB8ABAAAAAEACAABCo4ADAADCqgAmgACABcAAgAMAAAADwAiAAsAJAAlAB8AJwAtACEALwAvACgAMQBGACkASABMAD8ATgBWAEQAWgBgAE0AYgBlAFQAZwB2AFgAeAB8AGgAfgCrAG0ArgC5AJsAuwDAAKcAxQDRAK0A0wEFALoBCQEOAO0BEAETAPMBFQEkAPcBJgEqAQcBLAFkAQwBaQFqAUUBRwqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAAB6wHsgAAB7gHvgAAB6wHsgAAB7gHvgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgAAB8QAAAAAB8QAAAAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAAB8oAAAAAB8oAAAhICE4IVAhIB9AIVAhICE4IVAhICE4IVAhICE4IVAhICE4IVAhICE4IVAhICE4IVAhICE4IVAhICE4IVAAAB9YAAAAAB9YAAAAAB9YAAAAAB9wH6AAAB9wH6AAAB9wH6AAACE4IGAAACE4IGAAACE4IGAAACE4IGAAAB+IH6AAACB4IJAAACB4IJAAACB4IJAAACB4IJAAACB4IJAAACFoIYAAACFoIYAAACFoIYAAACFoIYAAACFoIYAAACFoIYAAACFoIYAAAB+4H9AAACFoIYAAACJwIogAAB/oIAAAAB/oIAAAAB/oIAAAAB/oIAAAACAYIMAAACAYIMAAACAYIMAAACAYIMAAACAYIMAAACAYIMAAACAwIEgAACAwIEgAACAwIEgAACAwIEgAACAwIEgqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAAACGYIbAAACGYIbAAACGYIbAAACGYIbAAACGYIbAAACHIIeAAACHIIeAAACHIIeAAACHIIeAAACHIIeAAACHIIeAAACH4IhAAACH4IhAAACH4IhAAACH4IhAAACE4IGAAACB4IJAAACCoIMAAACCoIMAAACCoIMAAACCoIMAiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogqECooAAAAACJwIogg2CDwIQgg2CDwIQgAACJwIoghICE4IVAhICE4IVAAACFoIYAqwCrYKvAAACGYIbAAACHIIeAAACH4IhAiKCJAIlgiKCJAIlgAACJwIognCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgioCK4ItAAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2gi6CMAIxgAACMwAAAAACMwAAAAACVAAAAAACVAAAAAACVAAAAAACVAAAAAACVAAAAAACVAAAAAACVAAAAAACVAAAAAACSAAAAAACSAAAAAACSAAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCVYAAAlcCWIAAAlcCWIAAAlcCWIAAAAACWgAAAAACWgAAAAACWgAAAAACWgAAAAACSAI0gAACSAI0gAACSAI0gAACQ4JXAAACQ4JXAAACQ4JXAAACQ4JXAAACTgI2AAACN4I5AAACRQJGgAACRQJGgAACRQJGgAACRQJGgAACRQJGgAACRQJGgAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gjqCPAI9gAACPwJJgAACPwJJgAACPwJJgAACPwJJgAACQIJCAAACQIJCAAACQIJCAAACQIJCAAACQIJCAAACQIJCAAAAAAK4gAAAAAK4gAAAAAK4gAAAAAK4gAAAAAK4gluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegAACYAJhgAACYAJhgAACYAJhgAACYAJhgAACYAJhgAACYwAAAAACYwAAAAACYwAAAAACYwAAAAACYwAAAAACYwAAAAACZIJmAAACZIJmAAACZIJmAAACZIJmAAACQ4JXAAACRQJGgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAAACSwJMgAACSwJMgAACSAJJgAACSwJMgAACTgJPgnCCcgJzgAACdQJ2glECUoJ2glECUoJ2gAACVAAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCVYAAAlcCWIAAAAACWgAAAAACdQJ2gluCXQJegAACYAJhgAACYwAAAAACZIJmAmeCaQJqgmwCbYJvAnCCcgJzgAACdQJ2gABAUICxgABAUgAAAABAZoCxgABAaAAAAABAScCxgABAWACxgABApoCxgABAd4CxgABAUgCxgABAKsCxgABAVwAAAABAXsCxgABAXsAAAABAVECxgABAV8AAAABAUsCxgABASECxgABASEAAAABATkAAAABAXICxgABAXEAAAABAUwCxgABAUwAAAABAiMAAAABAT0CxwABAT8AAAABALQAAAABAIgCxgABAIgAAAABAXYCxgABAXYAAAABAcgCxgABAcgAAAABATwCxgABATwAAAABARcCxgABARcAAAABAYUAAAABANsCxgABANsAAAABAXMCxgABAXMAAAABAtoAAAABAo4CEAABAo4AAAABAMoCEgABARYCEgABARYAAgABAScCEgABASoAAAABAPQAAAABAbcCEgABAbcAAAABAvoAAAABAq4CEAABAq4AAAABAMUCEgABAQkCEgABAQwAAAABAHoCxgABASMCEgABASMAAAABAHsCxgABAHsAAAABAIcCxgABAIcAAAABAMgCxgABAMgAAAABAW4AAAABASICEAABAR4CEgABAXYCEgABAKYAAAABAHsCEgABAIoCEgABAfAAAAABARwCEgABARwAAAABAZsCEgABAZsAAAABAQ0CEgABARQCEgABARQAAAABAeIAAAABAQwCEgABAQoAAAABAgcAAAABASECEgABAR4AAAABAh0AAwABARoCEgABARkAAAABASICEgABASIAAAAFAAAAAQAIAAEADAAcAAMAJgCGAAIAAgKCApEAAAKTApUAEAABAAMArACtAWYAEwABAUoAAQFQAAEBVgABAVwAAQFiAAEBaAABAW4AAQF0AAEBdAABAXoAAQGAAAEBhgABAYwAAgBaAAIATgAAAFQAAgBaAAEBkgABAZgAAQCrAAAAAQCzAAAAAQCPAAAAAwAIADQAZgACAA4AFAAAABoAIAAmAAECiwAAAAEBUALGAAEEJQAAAAEDewLGAAEDewAAAAIADgAUABoAIAAmACwAAQG9AAAAAQFZAsYAAQFZAAAAAQQ3AAAAAQONAsYAAQONAAAAAgAAAAAADgAAAAAAFAABAOoAAAABAhoAAAAGABAAAQAKAAAAAQAMABwAAQAiALQAAgACAoICjgAAApQClQANAAEAAQKlAA8AAAA+AAAARAAAAEoAAABQAAAAVgAAAFwAAABiAAAAaAAAAGgAAABuAAAAdAAAAHoAAACAAAAAhgAAAIwAAQCnAhIAAQBcAhIAAQCpAhIAAQBTAhIAAQCJAhIAAQBBAhIAAQC6AhIAAQC9AhIAAQCNAhIAAQDXAhIAAQCvAhIAAQBeAhIAAQC2AhIAAQBkAhIAAQAEAAEAbQISAAAAAQAAAAoCsAmaAAJERkxUAA5sYXRuAHoACgABTUFIIAA6AAD//wAVAAAADAAYACQAMAA8AFIAXgBqAHYAggCOAJoApgCyAL4AygDWAOIA7gD6AAD//wAWAAEADQAZACUAMQA9AEgAUwBfAGsAdwCDAI8AmwCnALMAvwDLANcA4wDvAPsAOgAJQVpFIABqQ1JUIACcS0FaIADOTUFIIAEATU9MIAEyTkxEIAFkUk9NIAGWVEFUIAHIVFJLIAH6AAD//wAVAAIADgAaACYAMgA+AFQAYABsAHgAhACQAJwAqAC0AMAAzADYAOQA8AD8AAD//wAWAAMADwAbACcAMwA/AEkAVQBhAG0AeQCFAJEAnQCpALUAwQDNANkA5QDxAP0AAP//ABYABAAQABwAKAA0AEAASgBWAGIAbgB6AIYAkgCeAKoAtgDCAM4A2gDmAPIA/gAA//8AFgAFABEAHQApADUAQQBLAFcAYwBvAHsAhwCTAJ8AqwC3AMMAzwDbAOcA8wD/AAD//wAWAAYAEgAeACoANgBCAEwAWABkAHAAfACIAJQAoACsALgAxADQANwA6AD0AQAAAP//ABYABwATAB8AKwA3AEMATQBZAGUAcQB9AIkAlQChAK0AuQDFANEA3QDpAPUBAQAA//8AFgAIABQAIAAsADgARABOAFoAZgByAH4AigCWAKIArgC6AMYA0gDeAOoA9gECAAD//wAWAAkAFQAhAC0AOQBFAE8AWwBnAHMAfwCLAJcAowCvALsAxwDTAN8A6wD3AQMAAP//ABYACgAWACIALgA6AEYAUABcAGgAdACAAIwAmACkALAAvADIANQA4ADsAPgBBAAA//8AFgALABcAIwAvADsARwBRAF0AaQB1AIEAjQCZAKUAsQC9AMkA1QDhAO0A+QEFAQZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZjY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5kbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsb2NsBkxsb2NsBmRsb2NsBmRsb2NsBmRsb2NsBlJsb2NsBl5sb2NsBlhsb2NsBl5sb2NsBmRsb2NsBmRvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt50bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuQAAAACAAAAAQAAAAEAAgAAAAEAEAAAAAEACwAAAAEAEgAAAAEAEQAAAAEAAwAAAAEABgAAAAEABwAAAAEABQAAAAEABAAAAAIADAANAAAAAQAOAAAAAQAJAAYAAQATAAABAAAGAAEAFAAAAQEABgABABUAAAECAAYAAQAWAAABAwAGAAEAFwAAAQQABgABABgAAAEFAAYAAQAZAAABBgAGAAEAGgAAAQcABgABABsAAAEIAAAAAQAIAAAAAQAKAAAAAQAPAB8AQAHiA5QD3gPyBAYEKARKBIAEgASOBJwFMAVuBZAFqAXABe4GfgbsBvoHEgcqB0IHcgecB7QIkgioCL4I2AABAAAAAQAIAAIAzgBkAWkAnQCeAJ8AoACXAJgAmQCaAJwAjgCPAJAAkwCUAJUAlgA9AIgAiQFqAKQAigCLAIwAjQBlAGsApQCmAKcAqACpAKoAqwFUAVUBVgFXAVkBWgFbAVwBTgFPAVABUgE3AWoBXgETARkBXwFgAWEBYgFjAWQB0wHgAeIB5AHlAc8B1QHcAdEB5wHoAekB6gHrAfIB5gILAgwB/QH+AgkCCgHZAdoB0AHOAdYCbAJtAm4CbwJwAnECcgJzAnQCdQKUApUCkwKjAqQAAQBkAAIABwAUAB0AHgAnACgAKgArAC0AMgA0ADUAOAA5ADoAOwA8AEUASwBOAFEAWwBcAF0AXgBjAGoAcAB7AIEAhwCRAJIAmwDAAMkAygDYAOIA4wDlAOcA8ADxAPIA9AD5APwA/wERARgBHgEpAS8BNQE9AUgBvwHCAcQBxgHHAckBywHMAc0B0gHUAdcB2AHbAewB8AHzAfQB9QH2AfcB+AIXAhgCIQIiAlUCVwJYAlkCWgJbAlwCXQJeAl8CYAKCAoMCjwKWApcAAwAAAAEACAABAV4AKgBaAGAAZgBsAHQAegCAAIYAjACUAJoAoACmAKwAsgC4AL4AxADOANgA4ADoAPAA+AEAAQgBEAEYARwBIAEkASgBLAEwATQBOAE8AUABRgFMAVIBWAACAJsAoQACAJEAogACAJIAowADAWkBOAFDAAIBOQFEAAIBOgFFAAIBOwFGAAIBPAFHAAMBPQFIAVMAAgE+AUkAAgE/AUoAAgFAAUsAAgFBAUwAAgFCAU0AAgDjAVgAAgDrAV0AAgE2AVEABAGlAa8BkAGOAAQBpgGwAZEBjwADAacBsQGSAAMBqAGyAZMAAwGpAbMBlAADAaoBtAGVAAMBqwG1AZYAAwGsAbYBlwADAa0BtwGYAAMBrgG4AZkAAQFwAAEBcQABAXIAAQFzAAEBdAABAXUAAQF2AAEBdwABAXgAAQF5AAIB1wHdAAIB0gHeAAIB2wHfAAIB1AHhAAIB2AHjAAIADAAsACwAAAA2ADcAAQCuALgAAwDeAN4ADgDpAOkADwDzAPMAEAFwAXkAEQGQAZkAGwG+Ab4AJQHAAcEAJgHDAcMAKAHFAcUAKQAGAAAAAgAKABwAAwAAAAEFGAABADAAAQAAABwAAwAAAAEFBgACABQAHgABAAAAHAABAAMCkAKRApIAAgACAoIChgAAAogCjgAFAAEAAAABAAgAAQAGAAQAAQABAo8AAQAAAAEACAABAAYABQABAAEA3gABAAAAAQAIAAIADgAEAGUAawETARkAAQAEAGMAagERARgAAQAAAAEACAACAA4ABACIAIkBNgE3AAEABABFAEsA8wD5AAYAAAABAAgAAQR+AAIACgAcAAEABAABADQAAQAAAAEAAAAdAAEABAABAOAAAQAAAAEAAAAdAAEAAAABAAgAAQEuADUAAQAAAAEACAABASAAPwAEAAAAAQAIAAEAfgAFABAARABQAGYAcgAFAAwAFAAcACQALAGbAAMBzAFyAZwAAwHMAXMBngADAcwBdAGgAAMBzAF1AaEAAwHMAXgAAQAEAZ0AAwHMAXMAAgAGAA4BnwADAcwBdAGiAAMBzAF4AAEABAGjAAMBzAF4AAEABAGkAAMBzAF4AAEABQFxAXIBcwF1AXcABgAAAAIACgAkAAMAAQB8AAEAEgAAAAEAAAAeAAEAAgACAK4AAwABAGIAAQASAAAAAQAAAB4AAQACAE4A/AAEAAAAAQAIAAEAFAABAAgAAQAEAjAAAwD8Ab4AAQABAEgAAQAAAAEACAABAAb/4AACAAEBkAGZAAAAAQAAAAEACAABAAYAIAACAAEBcAF5AAAABAAIAAEACAABAB4AAgAKABQAAQAEAKwAAgAyAAEABACtAAIAMgABAAIAAgBsAAQACAABAAgAAQB8AAQADgAoADIAUgADAAgADgAUAWUAAgDSAWcAAgDeAWgAAgDwAAEABAFmAAIBFQADAAgAEgAaAbsABAHsAewCRAG8AAMB7AJEAb0AAgJEAAQACgAUABwAJAIdAAQB7AHsAewCHAADAewB7AIeAAMB7AJEAhsAAgHsAAEABADSARUB7AJFAAEAAAABAAgAAgA0ABcB1wHTAdIB2wHUAdgBzwHVAdwB0QHyAeYCCwIMAf0B/gIJAgoB2QHaAdABzgHWAAEAFwG+Ab8BwAHBAcMBxQHJAcsBzAHNAewB8AHzAfQB9QH2AfcB+AIXAhgCIQIiAlUAAQAAAAEACAABABQAigABAAAAAQAIAAEABgCVAAIAAQCuALgAAAABAAAAAQAIAAEABgBeAAIAAQDwAPQAAAABAAAAAQAIAAEABgAvAAIAAQBbAF4AAAABAAAAAQAIAAIAGAAJAI4AjwCQAJEAkgCTAJQAlQCWAAIAAgAyADIAAAA0ADsAAQABAAAAAQAIAAIAEgAGAJcAmACZAJoAmwCcAAEABgAnACgAKgArACwALQABAAAAAQAIAAEABgAVAAIAAQJXAmAAAAABAAAAAQAIAAIAbAAzAJ0AngCfAKAAoQCiAKMApAClAKYApwCoAKkAqgCrAVMBVAFVAVYBVwFYAVkBWgFbAVwBXQFeAV8BYAFhAWIBYwFkAd0B3gHfAeAB4QHiAeMB5AHlAecB6AHpAeoB6wKUApUCowKkAAEAMwAHABQAHQAeACwANgA3AFEAcAB7AIEAhwCRAJIAmwCzAMAAyQDKANgA3gDiAOMA5QDnAOkA/wEeASkBLwE1AT0BSAG+AcABwQHCAcMBxAHFAcYBxwHSAdQB1wHYAdsCggKDApYClwABAAAAAQAIAAEABgAeAAEAAgFwAXEAAQAAAAEACAABAAYAAQABAAIA3gDpAAEAAAABAAgAAgAKAAIAPQDrAAEAAgA8AOkAAQAAAAEACAACAA4ABAFpAWoBaQFqAAEABAACAE4ArgD8"}
\ No newline at end of file
diff --git a/apps/v4/app/og/geist-semibold-otf.json b/apps/v4/app/og/geist-semibold-otf.json
new file mode 100644
index 00000000000..677ef4444db
--- /dev/null
+++ b/apps/v4/app/og/geist-semibold-otf.json
@@ -0,0 +1 @@
+{"base64Font":"T1RUTwAMAIAAAwBAQ0ZGIHIR/08AABlsAAC8I0dERUZznnHMAADVkAAAAdZHUE9TY4mY0QAA12gAACqMR1NVQsbFMjAAAQH0AAANHE9TLzI+rl/YAAANbAAAAGBjbWFwVC6iugAAEUQAAAgGaGVhZCxmteIAAADUAAAANmhoZWENAAmoAAANSAAAACRobXR4MmWPlAAAAQwAAAw8bWF4cAMPUAAAAADMAAAABm5hbWVgE49UAAANzAAAA3Zwb3N0/58AMgAAGUwAAAAgAABQAAMPAAAAAQAAAAEzMy4X/pdfDzz1AAMD6AAAAADiJx99AAAAAOInH33/3/8ZCSIDuAAAAAcAAgAAAAAAAAHbAFgA7AAAAs4AFwLOABcCzgAXAs4AFwLOABcCzgAXAs4AFwLOABcCzgAXAs4AFwLOABcEAAAXArcAUALVACsC1QArAtUAKwLVACsC1QArAtUAKwLJAFACyQBQAxkAKwMZACsCZwBQAmcAUAJnAFACZwBQAmcAUAJnAFACZwBQAmcAUAJnAFACZwBQAugAKwJYAFAC1gArAtYAKwLWACsC1gArAtYAKwLWACsC1gArAwEAKwLOAFADBwAeAs4AUAEiAFADiwBQASIAUAEi//MBIv/uASIATgEiAAwBIgAAASIAKgEi/+kCaQA3AmkANwJpADcCrwBQAq8AUAKvAFACSgBQAkoAUAJKAFACSgBQAmwABQOGAFAC7ABQAuwAUALsAFAC7ABQAuwAUALpAFAC/AArAvwAKwL8ACsC/AArAvwAKwL8ACsC/AArAv8ALQL8ACsEUAArApgAUAJ6AFAC9gArArEAUAKxAFACsQBQArEAUAKcADUCnAA1ApwANQKcADUCnAA1ApwANQLVAFACZgAbAmYAGwJmABsCZgAbAmYAGwK7AEECuwBBArsAQQK7AEECuwBBArsAQQK7AEECuwBBArsAQQK7AEECuwBBAs0AFwPEABcDxAAXA8QAFwPEABcDxAAXArIAHAKhABcCoQAXAqEAFwKhABcCoQAXAqEAFwJCABwCQwAcAkIAHAJCABwAwAArAkoAUALsAFACugBQAroAUAK6AFACugBQAcoAKwHKACsBygArAcoAKwHKACsBygArAcoAKwHKACsBygArAs4AKwLOACsCzgArAs4AKwLOACsCzgArAs4AFwLVACsCZwBQAmcAUALWACsBIv/xASIATgL8ACsCuwBBA8QAFwKhABcCQgAcAcoAKwHKACsCzgArBJcAFwSEAEECVgApAlYAKQJWACkCVgApAlYAKQJWACkCVgApAlYAKQJWACkCVgApAlYAKQO6ACkCbwBGAkkAKQJJACkCSQApAkkAKQJJACkCSQApAm8AKQKLACkCpgApAl8AKQJTACkCUwApAlMAKQJTACkCUwApAlMAKQJTACkCUwApAlMAKQJTACkCUwApAbAAMgJvACkCbwApAm8AKQJvACkCbwApAm8AKQJvACkCkQApAlkARgJ1ADICWf/oAQ0ARAENAEYBDQBGAQ3/6AEN/+MBDQBEAQ0AAgEN//YBDQAfAQ3/3wI3AEQBNP/9ATT//QE0//0BNP/9AnQARgJ0/+gCdABGAToARgE6AEYBQABGAToARgFAAAADfABGAlkARgJZAEYCWQBGAlkARgJZAEYCWQBGAl8AKQJfACkCXwApAl8AKQJfACkCXwApAl8AKQJQABoCXwApA+AAKQJvAEYCaABGAm8AKQGcAEYBnABGAZwAPQGcAEECMAApAjAAKQIwACkCMAApAjAAKQIwACkCewBGAa0ALQGtAC0BrQAtAa0ALQGtAC0CVQBGAlUARgJVAEYCVQBGAlUARgJVAEYCVQBGAlUARgJVAEYCVQBGAlUARgJJABYDRwAWA0cAFgNHABYDRwAWA0cAFgJ1AC8COgAWAjoAFgI6ABYCOgAWAjoAFgI6ABYCRAA5AkQAOQJEADkCRAA5AMEAKwE6AEYCWQBGAkoAJAJKACQCSgAkAkoAJAJKACQCSgAkAkoAJAJKACQCSgAkAkoAJAJKACQCbwApAm8AKQJvACkCbwApAm8AKQJvACkCbwApAm8AKQJvACkCbwApAm8AKQEgAFABIABQATcATgEgAEoBlQBGAlYAKQJJACkCUwApAlMAKQJvACkBDQBEAQ3/5wENAEQBDQAfAioARAE0//0CXwApAlUARgNHABYCOgAWAkQAOQJKACQCbwApAwAAMgK9ADIC2AAyAwoALQGuACsBrgArAs4AFwKiAFACtwBQAmUAUAJlAFACMwBQApoAPANHADICZwBQAmcAUAJnAFAEAAAcAqUALwLpAE0C6QBNAq0AUAKtAFADCAA3A4YAUALJAFAC/AArAskAUAKYAFACzwArAmYAGwJUABcCVAAXA1kAKwKxABwCmQAlAx0AUAO4AFAECgBQAskAUAKiAFADhwBQAu4APASIADcESQBQApwANQLyACwC8gArASIAUAEi/+8CaQA3AxoAGwQIAFACugA1Ax0AGwLrADIC8gAcAvwAKwL8ABcEHwAcAtYAUAMIAFACoQAXAqIAFwLgABwC2QAlApkAUAEiAFAC6AArAukATQL8ACsCVAAXAlwAKQJxACsCYgBGAfAARgHwAEYBxwBGAh8AMgLUACUCVAApAlQAKQJUACkDtAAvAioAHgJMAEYCTABGAkwARgJ4AEYCeABGAqcAMgLjAEYCUgBGAl8AKQJbAEYCbwBGAkkAKQJDACkCOgAWAjoAFgK8ACkCdQAvAnkARgK0AEYDRgBGA5gARgJbAEYCWgBGA00ARgKaADID9AAyA58ARgIwACkCVwApAlcAKQENAEQBDf/lATT//QJ1ADIDRwBGAmUARgKAADICswAyAuMALwJfACkCbwAWA8EALwKOAEYCqQBGAkkAFgJJABYCmwAvAr4ARgJZAEYBIABQAlMAKQJMAEYCXwApAjoAFgLIABcC9AArAnAAFwKbAC0CVQAlArAAMAGrACYCggA7An8ALwKZAC8CkAA5AogAOQJQACUChgAlAosAOQM1ACkDNQApAzUAKQM1ACkDNQApAzUAKQM1ACkDNQApAzUAKQM1ACkDSQApA0kAKQNJACkDSQApA0kAKQNJACkDSQApA0kAKQNJACkDSQApArAAMAHoABsCdQAWAnUAcQJ1AEACdQArAnUAKwJ1ADkCdQA7AnUAQAJ1ABMCdQA5AlgADANFACsDLQArA2gAKwMNACsDOgArA2AAKwM3ACsDagArA1kAKwM0ACsBkwAtAQ4AHgFqAC0BfAAtAX8AKwFtAC0BawAtAUsAHgF/AC0BcAAtAZMALQEOAB4BagAtAXwALQF/ACsBbQAtAWsALQFLAB4BfwAtAXAALQDsAAAJYAA+BwgAPgSwAD4A5QApAOUAKQEyAFABMgBQApIAKQDzADAA8wAwAkkAKQJJACkA5QApAUIAKQGtACkBhwApAij//wH8ACIB+gArAOMAKQEwAFABNwBQAn4AKQDnAC4A5wAuAkkAKQJJACkA4wApAaYAKQJWACkDkgApAjQAKQNgACkBQgAsAUIAHAGhACsBoQAcAYcAUAGHABwBfwApAX8AKgFrACoBawApAYQAKQGEACkCVgApAlYAKgGKACoBigApAYIAKQGCACoBcwApAXMAKQDnACoBsAArAbAAKwGvACsA6QArAOcAKgJoACoCaAApAXQAKgF0ACkBdwArAMIAKwIMADIClgBQBLAAPgcIAD4JYAA+BwcAPgNJACkDSQApAlgACAOxACsCqAAlAnkAIwJLADUDOQArAk8AKwJPACsDdgBQAZgAKQEBACkBtAAqARwAUAEcAFACQABQAkMAUAROAFACWABMA3YAKwJYADECSQApAkMAKwKcADUC4QA1Ar0ANQLWACoCuwBQA0YAUAJ8ADUCoQAXAi8AKQIvACkB8AAqAi8AKQJ8AFACLwApAiEAKwIdACkCLwApAi8AKgJAACkCDgApAg4AKQHaACkBnQApA1gAKQGrAAkCkwAXAqkAGwIkABwCmgAWAmQAKQJoAFMDMAApBHwAKQLFACsCeQArAx0AKwJ6ACwCxQArAnoAKwMdACwCeQAsBCwAKwLFACwCiQArApwAKwKcACsCkwArApMAKwKWACsClgArApYAKwKYACsClgArA14AFwHOACsCYQAsAvsAKwJhACwBzgArAmEAKwL7ACsCYQAsA1wAKwHOACwDSQArA0kAKwNJACsCPgArA2IAFwMuAFADYgAXAy4AFwNiABcDLgBQA2IAFwMuABcAAAApAAAAKQAAACkAAAApAAAAKQAAACkAAAA3AAAAKQAAACkAAAApAAAAKQAAACkAAAApAAAAKQAAACkAAAApAAAAKQAAACkAAABsAAAAKQAAACkBmQApANgAKQEQACkBEAApAbIAKQGOACkBjgApAYEAKQEZACkBoAApAXQAKQFJACkBHgApAY4AKQDXACkA5gA3AQEAKQC+ACkDNQApA0kAKQABAAADmP8kAGQJYP/f/hQJIgABAAAAAAAAAAAAAAAAAAADDwAEAmoCWAAFAAgCigJYAAAASwKKAlgAAAFeADIBCQAAAAAAAAAAAAAAAKEAAv9AAeX7AAAAAAAAAABWUkNMAMAAIPsCA5j/JABkA9ABBiAAAJcAAAAAAhYCxgAAACAABAAAABUBAgADAAEECQABABwAAAADAAEECQACAA4AHAADAAEECQADADIAKgADAAEECQAEABwAAAADAAEECQAFAD4AXAADAAEECQAGABwAmgADAAEECQAIAJAAtgADAAEECQAJAGABRgADAAEECQALADABpgADAAEECQAMADABpgADAAEECQAQAAoB1gADAAEECQARABAB4AADAAEECQEAABIB8AADAAEECQEBAAoCAgADAAEECQECAAoCDAADAAEECQEDAAoCFgADAAEECQEEAAoCIAADAAEECQEFAAoCKgADAAEECQEGABQCNAADAAEECQEHABYCSAADAAEECQEIABYCXgBHAGUAaQBzAHQAIABTAGUAbQBpAEIAbwBsAGQAUgBlAGcAdQBsAGEAcgAxAC4AMgAwADAAOwBWAFIAQwBMADsARwBlAGkAcwB0AC0AUwBlAG0AaQBCAG8AbABkAFYAZQByAHMAaQBvAG4AIAAxAC4AMgAwADAAOwBHAGwAeQBwAGgAcwAgADMALgAyACAAKAAzADIANAA5ACkARwBlAGkAcwB0AC0AUwBlAG0AaQBCAG8AbABkAEIAYQBzAGUAbQBlAG4AdAAuAHMAdAB1AGQAaQBvACwAIABWAGUAcgBjAGUAbAAsACAAQQBuAGQAcgDpAHMAIABCAHIAaQBnAGEAbgB0AGkALAAgAEcAdQBpAGQAbwAgAEYAZQByAHIAZQB5AHIAYQAsACAATQBhAHQAZQBvACAAWgBhAHIAYQBnAG8AegBhAEIAYQBzAGUAbQBlAG4AdAAuAHMAdAB1AGQAaQBvACwAIABBAG4AZAByAOkAcwAgAEIAcgBpAGcAYQBuAHQAaQAsACAATQBhAHQAZQBvACAAWgBhAHIAYQBnAG8AegBhAGgAdAB0AHAAcwA6AC8ALwBiAGEAcwBlAG0AZQBuAHQALgBzAHQAdQBkAGkAbwAvAEcAZQBpAHMAdABTAGUAbQBpAEIAbwBsAGQATgBvACAAdABhAGkAbAAgAGEAQQBsAHQAIABhAEEAbAB0ACAAbABBAGwAdAAgAFIAQQBsAHQAIABJAEEAbAB0ACAARwBBAGwAdAAgAGEAcgByAG8AdwBzAFIAbwB1AG4AZABlAGQAIABkAG8AdABBAGwAdAAgAG4AdQBtAGIAZQByAHMAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQH8gAAAPwAgAAGAHwALwA5AH4ArAETASsBNwE+AUgBTQF+AY8BkgHOAekCGwI3AlkCuQK8AsgC3QMEAwgDDAMSAyYDKAM1A5sDqQO7A8AEDAQaBCMELwQzBDUEOQQ6BEMEXwRjBGsEdQSTBJcEmwSjBLMEtwS7BMAEzwTZBOME6QTvDj8eIR6FHp4evR7zHvkgFCAaIB4gIiAmIDAgMyA6IEQgcCB5IIkgqiCsILQguSC9IQchFyEiIVUhXiGZIZ0hqiGxIbUh5SHnIgIiBiIPIhIiGiIeIisiSCJgImUjziQMJGgk6iT/JbMltyW9JcElzCXPJjonfjADMBEwFzAcp4z4//sC//8AAAAgADAAOgCgAK4BFgEuATkBQQFKAVABjwGSAc0B5AIYAjcCWQK5ArwCxgLYAwADBgMKAxIDJgMnAzUDmwOpA7sDwAQABA4EGwQkBDAENAQ2BDoEOwREBGIEagRyBJAElgSaBKIErgS2BLoEwATPBNgE4gToBO4OPx4gHoAenh68HvIe+CATIBggHCAgICYgMCAyIDkgRCBwIHQggCCqIKwgtCC5IL0hByEWISIhUyFbIZAhnSGpIbAhsyHkIeciAiIGIg8iESIaIh4iKyJIImAiZCPOJAskYCTqJP8lsiW2JbwlwCXKJc8mOSd2MAMwCDAUMByni/j/+wH//wAAAcEAAAAAAAAAAAAAAAAAAAAAAAD+lADqAAAAAAAA/q/+dABSAE4AAAAAAAAAAAAA/+H/zv/P/8P+Uf5E/jP+LwAAAAD9XQAA/XkAAP1+AAD9gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD85P0YAAAAAAAAAAD0PgAAAADhxQAAAAAAAOJFAAAAAAAA4hziiuJc4j/h1+HA4cDhpuH14e/h6OHl4eDg6QAA4WoAAODHAADhKOEf4RrhGeDi4OjgteCt4KUAAOCc4JPgh+Bl4EcAAN7IAADdpt0b3PwAAAAAAAAAAAAA3QvcSdqG0kcAAAAA0j8AAAmFBmEAAQD8AAABGAGgAbgCggKsAr4CyALWAtwAAAAAAzQDNgNAAAAAAAAAAAADPgNCA0wDVANYAAAAAAAAAAAAAAAAAAAAAANMA2QAAAN6AAADjgAAA44AAAOMA8IDxAPGA8wD0gPUA9YD2APiA+QAAAAAA+ID5APmA+gAAAPoA+oAAAPyA/QD9gAAA/YD+gP+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPmAAAD5gAAA+gAAAAAAAAAAAAAAAAAAAAAAAAD6AAAAAAAAAAAAAAD4AAAA+AAAAAAAAAD3APeA+AD4gPkAAAAAAAAAAAD4APyAAAD9gAAAAAAAAABAkMCegJLApoCuQKGAnsCXAJdAkkCogI/AlcCPgJMAkACQQKpAqYCqAJFAoUAAgAOAA8AFQAZACQAJQAtADAAOgA9AEAARQBGAEwAVgBYAFkAXQBkAGkAdAB1AHoAewCBAmACTQJhArACWgL9AKwAuAC5AL8AwwDOAM8A1wDaAOUA6QDsAPEA8gD4AQIBBAEFAQkBEAEVASABIQEmAScBLQJeApACXwKuAjoCRAKYAqACmQKhApECiAL7AokBZQJ2Aq8CigMFAo0CrAIyAjMC/gK4AocCRwMGAjEBZgJ3Ah8CHAIgAkYACAADAAYADAAHAAsADQASAB8AGgAcAB0ANgAyADMANAAYAEoAUABNAE4AVABPAqQAUwBuAGoAbABtAHwAVwEPALIArQCwALYAsQC1ALcAvADJAMQAxgDHAOAA3ADdAN4AwgD2APwA+QD6AQAA+wKlAP8BGgEWARgBGQEoAQMBKgAJALMABACuAAoAtAAQALoAEwC9ABQAvgARALsAFgDAABcAwQAgAMoAHgDIACEAywAbAMUAKADSACYA0AAqANQAKQDTAC8A2QAuANgAOQDjADcA4QA4AOIANQDbADEA5AA8AOgAPwDrAEEA7QBDAO8AQgDuAEQA8ABHAPMASQD1AEgA9ABLAPcAUgD+AFEA/QBVAQEAWgEGAFwBCABbAQcAXgEKAGEBDQBgAQwAXwELAGcBEwBmARIAZQERAHMBHwBwARwAawEXAHIBHgBvARsAcQEdAHcBIwB9ASkAfgCCAS4AhAEwAIMBLwAFAK8ALADWACcA0QA+AOoAYgEOAGgBFAMAAwEDDAMCAvwDAwMHAwQC/wLpAuoC7QLxAvIC7wLoAucC8ALrAu4BcAFxAZcBawGPAY4BkQGSAZMBjAGNAZQBdwGBAYgBZwFoAWkBagFuAW8BcgFzAXQBdQF2AYIBgwGFAYQBhgGHAYsBigGJAZABlQGWAbABsQG5AcUBxgHIAccByQHKAc4BzQHMAdMB2AHZAbIBswHaAa0B0gHRAdQB1QHWAc8B0AHXAboBuAHEAcsBmAHbAZkB3AGaAd0BmwHeAWwBrgFtAa8BnAHfAZ0B4AGeAeEBnwHiAaAB4wGhAeQBogHlAaMB5gGlAegBpgHpAacB6gGoAesAKwDVAHkBJQB2ASIAeAEkACIAzAB/ASsAgAEsAnQCdQJwAnICcwJxApICkwJIApQCiwIdAh4CIQLBArsCvQK/AsMCxALCArwCvgLAArUCowKrAqoClwKVAt4C4gLfAuMC4ALkAuEC5QLdAtsC3AJiAmMCaAJpAmYCZwJsAm0CZAJlAmoCawJuAm8AhQExAAAAAwAAAAAAAP+cADIAAAAAAAAAAAAAAAAAAAAAAAAAAAEABAIAAQEBD0dlaXN0LVNlbWlCb2xkAAEBASn6RQD6RgH6RwL6SAT7EQwDavt7HAki+kwFHC4oDxwxIxG+HQAArEESAi4CAAEABwAOABUAHAAiACgAMwA9AEMASQBPAFkAYABnAG4AdQB7AIEAjACTAJ0ApACrAK8AugC8AMYAzQDUANoA5QDwAPcA/gEEAQoBEQEXAR0BJAEnATQBOwFBAUcBTgFUAVwBZwFuAXUBeQF/AYYBjQGTAaABpwGuAbMBuQG/AcoB0wHZAeQB6gHxAfcCAQIIAhcCJgIsAjcCQgJOAlQCXwJvAn0CjAKXAqMCrwK6AsACywLbAucC9gMCAxADHwMtAzwDSwNZA2gDdgOEA5IDoAOvA8ID1gPqA/ID+gQABAcEDgQVBBsEIQQsBDYEPARCBEgEUgRZBGAEZwRuBHQEegSFBIwElgSdBKQEqASzBLwEwwTKBNAE0gTZBOQE7wT2BP0FAwUJBRAFFgUcBSMFJgUzBToFQAVGBU0FUwVbBWYFbQVxBXcFfgWFBYsFmAWfBaYFqwWxBbcFwgXLBdEF3AXiBekF7wX5BgAGDwYeBiQGLwY6BkYGVgZkBm8GewaHBpEGnAaiBq0GuAbEBtQG4gbtBvkHBQcPBxoHIAcrBzYHQgdNB1sHagd4B4cHlgecB6oHuAfEB8sH0QffB+0H+wgJCBgIKwg+CEYITghVCFwIYwhqCHEIeAh/CIYIjQiUCJsIogipCLAItwi+CMUIzAjTCNoI4QjoCO8I9gj9CQQJCwkSCRkJIAknCS4JNQk8CUMJSglRCVgJXwlmCW0JdAl7CYIJiQmQCZcJngmlCawJswm6CcEJyAnPCdYJ3QnkCesJ8gn5CgAKBwoOChUKHAojCioKMQo4Cj8KRgpNClQKWwpiCmkKcAp3Cn4KhQqMCpMKmgqhCqgKrwq2Cr0KxArLCtIK2QrgCucK7gr1CvwLAwsKCxELGAsfCyYLLQs0CzsLQgtJC1ALVwteC2ULbAtzC3oLgQuIC48LlgudC6QLqwuyC7kLwAvHC84L1QvcC+ML6gvxC/cL/gwEDAYMDQwUDBsMIgwpDDAMNww+DEUMTAxTDFoMYQxoDG8Mdgx9DIQMiwySDJkMogyqDLEMtwy9DMUMzAzTDNkM4QzpDPAM9wz+DQUNDA0TDRoNIQ0oDS8NNg09DUQNSw1SDVkNYA1nDW4NdQ18DYMNig2RDZgNuQ3TDeYN7Q34DgIOEA4dDigONw5EDlUOaA5vDnYOfQ6EDosOkg6ZDqAOpw6uDrUOvA7DDsoO0Q7YDugO/w8dDzUPPA9FD0wPUw9ZD18PZg9tD3QPew9/D4YPjQ+UD5sPow+vD7gPww/LD9MP2g/hD+oP8Q/8EAMQChAREBsQIhArEDIQOxBCEEsQVBBbEGIQaRBwEHcQfhCFEIwQkxChEKgQtBDAEM8Q2xDpEPURAxEPER0RKxEyETgRPxFGEU0RVBFbEWIRaRFwEXcRfhGIEY8RlhGfEagRrxG6EcERyBHPEdYR3xHmEe0R9BIDEgoSERIYEiQSMBI9EksSUhJZEmASbBJ+EoUSlhKkEqxBYnJldmV1bmkwMUNEQW1hY3JvbkFvZ29uZWtDYWN1dGVDY2Fyb25DY2lyY3VtZmxleENkb3RhY2NlbnREY2Fyb25EY3JvYXRFY2Fyb25FZG90YWNjZW50RW1hY3JvbkVvZ29uZWt1bmkxRUJDdW5pMDE4RkdicmV2ZUdjYXJvbkdjaXJjdW1mbGV4dW5pMDEyMkdkb3RhY2NlbnR1bmkxRTIwdW5pMDFFNEhiYXJIY2lyY3VtZmxleElKSWRvdGFjY2VudEltYWNyb25Jb2dvbmVrSXRpbGRldW5pMDA0QTAzMDFKY2lyY3VtZmxleHVuaTAxRTh1bmkwMTM2TGFjdXRlTGNhcm9udW5pMDEzQk5hY3V0ZU5jYXJvbnVuaTAxNDVFbmdPaHVuZ2FydW1sYXV0T21hY3JvblJhY3V0ZVJjYXJvbnVuaTAxNTZTYWN1dGVTY2VkaWxsYVNjaXJjdW1mbGV4dW5pMDIxOHVuaTFFOUVUYmFyVGNhcm9udW5pMDE2MnVuaTAyMUFVYnJldmVVaHVuZ2FydW1sYXV0VW1hY3JvblVvZ29uZWtVcmluZ1V0aWxkZVdhY3V0ZVdjaXJjdW1mbGV4V2RpZXJlc2lzV2dyYXZlWWNpcmN1bWZsZXhZZ3JhdmV1bmkxRUY4WmFjdXRlWmRvdGFjY2VudHVuaUE3OEJ1bmkwMTNCLmxvY2xNQUh1bmkwMTQ1LmxvY2xNQUhSLnNzMDRSYWN1dGUuc3MwNFJjYXJvbi5zczA0dW5pMDE1Ni5zczA0SS5zczA1SWFjdXRlLnNzMDVJY2lyY3VtZmxleC5zczA1SWRpZXJlc2lzLnNzMDVJZG90YWNjZW50LnNzMDVJZ3JhdmUuc3MwNUltYWNyb24uc3MwNUlvZ29uZWsuc3MwNUl0aWxkZS5zczA1Ry5zczA2R2JyZXZlLnNzMDZHY2lyY3VtZmxleC5zczA2dW5pMDEyMi5zczA2R2RvdGFjY2VudC5zczA2dW5pMUUyMC5zczA2QWRpZXJlc2lzLnNzMDhDZG90YWNjZW50LnNzMDhFZGllcmVzaXMuc3MwOEVkb3RhY2NlbnQuc3MwOEdkb3RhY2NlbnQuc3MwOElkaWVyZXNpcy5zczA4SWRvdGFjY2VudC5zczA4T2RpZXJlc2lzLnNzMDhVZGllcmVzaXMuc3MwOFdkaWVyZXNpcy5zczA4WWRpZXJlc2lzLnNzMDhaZG90YWNjZW50LnNzMDhJZGllcmVzaXMuc3MwNS5zczA4SWRvdGFjY2VudC5zczA1LnNzMDhHZG90YWNjZW50LnNzMDYuc3MwOEFfSS5kbGlnVV9JLmRsaWdhYnJldmV1bmkwMUNFYW1hY3JvbmFvZ29uZWtjYWN1dGVjY2Fyb25jY2lyY3VtZmxleGNkb3RhY2NlbnRkY2Fyb25kY3JvYXRlY2Fyb25lZG90YWNjZW50ZW1hY3JvbmVvZ29uZWt1bmkxRUJEdW5pMDI1OWdicmV2ZWdjYXJvbmdjaXJjdW1mbGV4dW5pMDEyM2dkb3RhY2NlbnR1bmkxRTIxdW5pMDFFNWhiYXJoY2lyY3VtZmxleGkubG9jbFRSS2ltYWNyb25pb2dvbmVraXRpbGRlaWp1bmkwMjM3dW5pMDA2QTAzMDFqY2lyY3VtZmxleHVuaTAxRTl1bmkwMTM3bGFjdXRlbGNhcm9udW5pMDEzQ25hY3V0ZW5jYXJvbnVuaTAxNDZlbmdvaHVuZ2FydW1sYXV0b21hY3JvbnJhY3V0ZXJjYXJvbnVuaTAxNTdzYWN1dGVzY2VkaWxsYXNjaXJjdW1mbGV4dW5pMDIxOXRiYXJ0Y2Fyb251bmkwMTYzdW5pMDIxQnVicmV2ZXVodW5nYXJ1bWxhdXR1bWFjcm9udW9nb25la3VyaW5ndXRpbGRld2FjdXRld2NpcmN1bWZsZXh3ZGllcmVzaXN3Z3JhdmV5Y2lyY3VtZmxleHlncmF2ZXVuaTFFRjl6YWN1dGV6ZG90YWNjZW50dW5pQTc4Q3VuaTAxM0MubG9jbE1BSHVuaTAxNDYubG9jbE1BSGEuc3MwMWFhY3V0ZS5zczAxYWJyZXZlLnNzMDF1bmkwMUNFLnNzMDFhY2lyY3VtZmxleC5zczAxYWRpZXJlc2lzLnNzMDFhZ3JhdmUuc3MwMWFtYWNyb24uc3MwMWFvZ29uZWsuc3MwMWFyaW5nLnNzMDFhdGlsZGUuc3MwMWEuc3MwMmFhY3V0ZS5zczAyYWJyZXZlLnNzMDJ1bmkwMUNFLnNzMDJhY2lyY3VtZmxleC5zczAyYWRpZXJlc2lzLnNzMDJhZ3JhdmUuc3MwMmFtYWNyb24uc3MwMmFvZ29uZWsuc3MwMmFyaW5nLnNzMDJhdGlsZGUuc3MwMmwuc3MwM2xhY3V0ZS5zczAzbGNhcm9uLnNzMDN1bmkwMTNDLnNzMDNsc2xhc2guc3MwM2FkaWVyZXNpcy5zczA4Y2RvdGFjY2VudC5zczA4ZWRpZXJlc2lzLnNzMDhlZG90YWNjZW50LnNzMDhnZG90YWNjZW50LnNzMDhpLnNzMDhpZGllcmVzaXMuc3MwOGkubG9jbFRSSy5zczA4aW9nb25lay5zczA4aWouc3MwOGouc3MwOG9kaWVyZXNpcy5zczA4dWRpZXJlc2lzLnNzMDh3ZGllcmVzaXMuc3MwOHlkaWVyZXNpcy5zczA4emRvdGFjY2VudC5zczA4YWRpZXJlc2lzLnNzMDEuc3MwOGFkaWVyZXNpcy5zczAyLnNzMDhmX2YubGlnYXRfdC5saWdhdW5pMDQxMHVuaTA0MTF1bmkwNDEydW5pMDQxM3VuaTA0MDN1bmkwNDkwdW5pMDQ5MnVuaTA0MTR1bmkwNDE1dW5pMDQwMHVuaTA0MDF1bmkwNDE2dW5pMDQxN3VuaTA0MTh1bmkwNDE5dW5pMDQxQXVuaTA0MEN1bmkwNDFCdW5pMDQxQ3VuaTA0MUR1bmkwNDFFdW5pMDQxRnVuaTA0MjB1bmkwNDIxdW5pMDQyMnVuaTA0MjN1bmkwNDBFdW5pMDQyNHVuaTA0MjV1bmkwNDI3dW5pMDQyNnVuaTA0Mjh1bmkwNDI5dW5pMDQwRnVuaTA0MkN1bmkwNDJCdW5pMDQyQXVuaTA0MDl1bmkwNDBBdW5pMDQwNXVuaTA0MDR1bmkwNDJEdW5pMDQwNnVuaTA0MDd1bmkwNDA4dW5pMDQwQnVuaTA0MkV1bmkwNDJGdW5pMDQwMnVuaTA0NjJ1bmkwNDZBdW5pMDQ3MnVuaTA0NzR1bmkwNDk2dW5pMDQ5QXVuaTA0QTJ1bmkwNEFFdW5pMDRCMHVuaTA0QjJ1bmkwNEI2dW5pMDRCQXVuaTA0QzB1bmkwNEQ4dW5pMDRFMnVuaTA0RTh1bmkwNEVFdW5pMDQzMHVuaTA0MzF1bmkwNDMydW5pMDQzM3VuaTA0NTN1bmkwNDkxdW5pMDQ5M3VuaTA0MzR1bmkwNDM1dW5pMDQ1MHVuaTA0NTF1bmkwNDM2dW5pMDQzN3VuaTA0Mzh1bmkwNDM5dW5pMDQ1RHVuaTA0M0F1bmkwNDVDdW5pMDQzQnVuaTA0M0N1bmkwNDNEdW5pMDQzRXVuaTA0M0Z1bmkwNDQwdW5pMDQ0MXVuaTA0NDJ1bmkwNDQzdW5pMDQ1RXVuaTA0NDR1bmkwNDQ1dW5pMDQ0N3VuaTA0NDZ1bmkwNDQ4dW5pMDQ0OXVuaTA0NUZ1bmkwNDRDdW5pMDQ0QnVuaTA0NEF1bmkwNDU5dW5pMDQ1QXVuaTA0NTV1bmkwNDU0dW5pMDQ0RHVuaTA0NTZ1bmkwNDU3dW5pMDQ1OHVuaTA0NUJ1bmkwNDRFdW5pMDQ0RnVuaTA0NTJ1bmkwNDYzdW5pMDQ2QnVuaTA0NzN1bmkwNDc1dW5pMDQ5N3VuaTA0OUJ1bmkwNEEzdW5pMDRBRnVuaTA0QjF1bmkwNEIzdW5pMDRCN3VuaTA0QkJ1bmkwNENGdW5pMDREOXVuaTA0RTN1bmkwNEU5dW5pMDRFRkxhbWJkYXVuaTAzQTlsYW1iZGFwaXVuaTIxMDd1bmkyNEZGdW5pMjc3NnVuaTI3Nzd1bmkyNzc4dW5pMjc3OXVuaTI3N0F1bmkyNzdCdW5pMjc3Q3VuaTI3N0R1bmkyNzdFdW5pMjRFQXVuaTI0NjB1bmkyNDYxdW5pMjQ2MnVuaTI0NjN1bmkyNDY0dW5pMjQ2NXVuaTI0NjZ1bmkyNDY3dW5pMjQ2OHplcm8uc3MwOW9uZS5zczA5emVyby50Zm9uZS50ZnR3by50ZnRocmVlLnRmZm91ci50ZmZpdmUudGZzaXgudGZzZXZlbi50ZmVpZ2h0LnRmbmluZS50ZnVuaTIxNTN1bmkyMTU0dW5pMjE1NXVuaTIwODB1bmkyMDgxdW5pMjA4MnVuaTIwODN1bmkyMDg0dW5pMjA4NXVuaTIwODZ1bmkyMDg3dW5pMjA4OHVuaTIwODl1bmkyMDcwdW5pMDBCOXVuaTAwQjJ1bmkwMEIzdW5pMjA3NHVuaTIwNzV1bmkyMDc2dW5pMjA3N3VuaTIwNzh1bmkyMDc5dW5pMDBBMGh5cGhlbl9oeXBoZW5faHlwaGVuX2dyZWF0ZXIubGlnYWh5cGhlbl9oeXBoZW5fZ3JlYXRlci5saWdhaHlwaGVuX2dyZWF0ZXIubGlnYXVuaTMwMDNwZXJpb2Quc3MwOGNvbG9uLnNzMDhzZW1pY29sb24uc3MwOGVsbGlwc2lzLnNzMDhleGNsYW0uc3MwOGV4Y2xhbWRvd24uc3MwOHF1ZXN0aW9uLnNzMDhxdWVzdGlvbmRvd24uc3MwOHBlcmlvZGNlbnRlcmVkLnNzMDh1bmkzMDFDdW5pMzAwOHVuaTMwMDl1bmkzMDEwdW5pMzAxMXVuaTMwMEN1bmkzMDBEdW5pMzAwQXVuaTMwMEJ1bmkzMDE0dW5pMzAxNXVuaTMwMEV1bmkzMDBGdW5pMzAxNnVuaTMwMTd1bmkwRTNGbGVzc19oeXBoZW4ubGlnYWxlc3NfaHlwaGVuX2h5cGhlbi5saWdhbGVzc19oeXBoZW5faHlwaGVuX2h5cGhlbi5saWdhbGVzc19oeXBoZW5fZ3JlYXRlci5saWdhdW5pMjYzOXNtaWxlZmFjZXVuaUY4RkZ1bmkyMTE3bWludXRlc2Vjb25kdW5pMjExNnVuaTI0MEN1bmkyM0NFdW5pMjQwQkV1cm91bmkyMEI0dW5pMjBCRHVuaTIwQjl1bmkyMEFBbm90ZXF1YWxncmVhdGVyZXF1YWxsZXNzZXF1YWxhcHByb3hlcXVhbGluZmluaXR5aW50ZWdyYWx1bmkyMjA2cHJvZHVjdHN1bW1hdGlvbnJhZGljYWxwYXJ0aWFsZGlmZnVuaTAwQjVhcnJvd3VwdW5pMjE5N2Fycm93cmlnaHR1bmkyMTk4YXJyb3dkb3dudW5pMjE5OWFycm93bGVmdHVuaTIxOTZhcnJvd2JvdGhhcnJvd3VwZG51bmkyMTlEdW5pMjFFNHVuaTIxRTV1bmkyMUE5dW5pMjFBQXVuaTIxQjB1bmkyMUIxdW5pMjFCM3VuaTIxQjRjYXJyaWFnZXJldHVybnVuaTIxRTdhcnJvd3VwLnNzMDd1bmkyMTk3LnNzMDdhcnJvd3JpZ2h0LnNzMDd1bmkyMTk4LnNzMDdhcnJvd2Rvd24uc3MwN3VuaTIxOTkuc3MwN2Fycm93bGVmdC5zczA3dW5pMjE5Ni5zczA3YXJyb3dib3RoLnNzMDdhcnJvd3VwZG4uc3MwN3VuaTI1Q0ZjaXJjbGV1bmkyNUNDbG96ZW5nZXRyaWFndXB1bmkyNUI2dHJpYWdkbnVuaTI1QzB1bmkyNUIzdW5pMjVCN3VuaTI1QkR1bmkyNUMxdW5pMDMwNi5jeXVuaTAzMDh1bmkwMzA3Z3JhdmVjb21iYWN1dGVjb21idW5pMDMwQnVuaTAzMEMuYWx0dW5pMDMwMnVuaTAzMEN1bmkwMzA2dW5pMDMwQXRpbGRlY29tYnVuaTAzMDR1bmkwMzEydW5pMDMyNnVuaTAzMjYubG9jbE1BSHVuaTAzMjd1bmkwMzI4dW5pMDMzNXVuaTAzMDguc3MwOHVuaTAzMDcuc3MwOGRpZXJlc2lzLnNzMDhkb3RhY2NlbnQuc3MwOHVuaTAyQkN1bmkwMkI5dW5pMDJDOGJsYWNrQ2lyY2xlZGJsYWNrQ2lyY2xlZFN0cm9rZTAwMS4yMDBjb3B5cmlnaHQgbWlzc2luZ0dlaXN0IFNlbWlCb2xkU2VtaUJvbGQA6QIAAQAMABEAFgAcADEAPABEAEgATgB1AH4AgQCHAIwAkQCUAJkAngC0ALgAwwEMARMBGwEgASgBMAFcAWABdQGCAYoBkQGYAaIBqwH2AhUCLwJFAk8CVAJbAmECkAKpAsAC0QLcAuYC7QL0AwADBgMlAysDLwNBA04DWgNoA3MDfQOGA48DlgOdA6QDrAQPBGUEaASCBL0E5QTtBQgFJgUpBTYFOQVEBU4FVgVdBWQFfgWGBcIFzgX2Bf0GCAZOBlkGewaaBqgGxQbOBucG7AcWBysHOgdKB2YHeAd/B4MHjAeTB5wHpweyB70HwwfMB9UH4QfpB/QH/whCCIEI2AlHCakKDQprCsYLIAt3C6wLtQvBC+8MNwx/DMgM8w0tDWANeg24DdAOEQ5NDokOlQ7LDuwPHg8jD0UPaw+AD6kPsw/JD/EQCxAzEFoQfxCTELcQwBDjEPYRGBE6EUIRYRGBEaARvhHZEdwR9BINEiYSPhJDElMSahKAEpYSmxKjErASuxLMEt8S8BMDExUTJRM2E0cTWBNpE3oThxOME5wTrBO8E8sT2hPpE/gUBxQVFCMUMRQ/FE0UWxRoFHUUghSPFJwUqRS0FMAUzBTYFOQU7BT3FQIV7wbl9yEF+xQGDhK09xkLAdv3FgugdvladwsV9xH3BvsRBvde+wYV9xD3BvsQBg4V7wZO9yEF+xUGDhX3tez7tQYOe/cFC/cmUsQSCxWxqKaysW6lZWVucWVkqHCxH/dJFrGoprKxbqVlZm1xZWSpcLAfDktjWTeJH88GC8kdDvcauvcaCxLR9xQLEtv3FgsVgh1/9w8dC8/3W84Lohb3HAbG9zwF960Gxvs8Bfcc9wAdC4uTHQv3d38V48+xxKUfC/g4dRX3Zvc99z33Z/dl+z33Pftm+2X7Pvs9+2X7Z/c++z33ZR/dBPs6+xf3GPc69zn3F/cY9zr3OvcY+xj7Ofs6+xj7GPs6Hwv7Ku743XcLf+hPdvhT7gug9w0dC3/zL+f4TncL9yf3IPsnBgv38XsV90P3AvP3Oh/4XfsW/F0HJlNTKClTw/Ae+F37FvxdB/s69wIj90IeC6axHQuymqKnshrKVbhCQlReTGSib7J8Hgv7NuzXdq/v99TjM+8L1lPW9NZT1gvZxa7FqR8L4c2zxqcfC8fwBez7DCCuBw4StPcZ9273FAv4D3sV9zz3GfL3gB+2+8Qk90AHK4NQRSMb+x1N9wb3I/ckyPcH9x7iwlc1oB/3G5IF9ypqIun7Mhv7ZfsT+zb7Zvtl9xT7NfdkHwtXeW5lWRpDyVzgHs8EYG6isLGop7a1qG9lZm50YR8L2xb4evcF+/j3T/fk9wT75PdN9/D3BfxyBgtxS6UGs6pvaGpucmZlbaCniR9AiAUL9wn4qvsU+8cGC3fbKB0L97n3DgHJC05raE8eC/fDfxX3D+bL86gf+xeTBVx8ZHBSGz9auumGH5kd+zEl+wP7PPs98fsC9zQejx0L+xX8pvsY+KYF+w0G+xb8pvsW+KYF+x4GCzgHxXFRsD4b+xgu+wD7Lfsv6SP3GR8LBfsmBvs7+8L7PPfCBfsmBguQIAXf+AL7wiYGC4v3SPszdvladwtETm1Bbx8L9xT7CvcKCwG09xn3i/cZA0wdCwZ1b3wdCzCj2k73IBuJ97QVP1vJ7e25ydnZvE4oih8nWk8+HgsiHQNGHQsVWR0LtKqptLRsp2Jja29iYqttsx8L98D7NhX3LO/T9x0fCxXayL/NvWe4WpcfCwX7Hwb7yvvL98v7ywULe/cF9zry94v3BQsB0fcUA9EW9xQL92j3E/ch93kL9wb3Bfv7+wUL+3jO2rxaC1yctWnNGw73BhK09xkLe/cE+Jr3BAsBz/cY96/3GAP38XsV9zT13PcW9UvR+1O0H/sSqGmhxRrCubHX5L5WPpQe9xeRBfcdfC3u+z0b+zQrNfsQ+wjNWfdEYx/3JWmnalQaTlpsOChVvud+HvsYgwX7KJf2KPdFGwshHfeP9xT//4WAAP8AeoAAE573m38VE51AHRNdjjoFE273Dfiq+xQGE54/B8JtU6w+G/snQfsQ+y/7Mdb7DvcnH7HzFTRj3ejrs9ri5a0/KCxqOzAfCxWzHQG09xkD98R/Ffce69z3FJof+xiRBYYdlh0L28jF3dlUx0RxdoN6eh+W3wX3L8/7bgZr+3gF0garnqGQohuvp2thYG9uZ2pvnqmGH0CIBUiRx1zUGw7WA/gufxX7YPs59zn3Yfdf9zn3Ofdg92D3Ofs5+1/7Yfs5+zn7YB8L0B1zdXNqHwsV1gb3ErX3BtnrHr/7qEf3VQdFLWH7BfsFGg7RFvcYBvdQ9+QF++T3FPiq+xIH+1b77QX37fsUBwtYHQ75qxXvBuX3IQX7FAYOiR0OoHb3ofcF92v3BQv7VPuSBU33SAcLtvcb9xr3GQufdvlddwEL9xf3gPcWC/e2fxX3HOjE8uRUufs8pR+0HSKT3kD3MhsLOR3g9yGuHQv4EnsVXx33efsT9yP7aPtn+xT7I/t5+3n3FPsh92cf9wUE+xQ/6vc29zbX7PcU9xTXKvs2+zY/LPsUHwsBzPcW98n3FgM7HQugdviqd+b3BhLP9xn7F/cUE+jRFvcU+Kr7FAYT8InSFfcZ9wb7GQYOIh333MwdC5cds7SXmZwe3x0L+Ah7FfdI9fH3O6cf+xySBSV7U04iG/sKPuz3NPcy1vD3De3EUi6cH/cckgX3NW0q6vtJG/tc+xf7JPt4+3z3HPse91UfC/fEfxXyHewd8wQLAaf4nwOnFvif9wX8BQb3+fh5BfcE/IT7BfflB/v0/HkFC1Cav2bGG5T3XxVkdai1tqKpsrCmbWCKH2GKb25oGw4V1tO0z2L3jEwGch2NHeTEwOOPHz4GXYZxeGEbYXCeuYYfPQYzj8VW5RsOs7SXmZwf3x0L97X39wX7Lwb7rvvuBffu+xb9WvcW9+8HC7YV3R0LQIFeZ00bOFzL9wP3ArrM3sm4Z0eVH/cYkgX3E3sq1fscG/szI/sD+zwL90oEa3afqaignauqoHlubXZ3bB8LIx3i9xr7E9c/9xw21xILFdIGzvdCBfcQ+yf7IMgHC/cW+JsG98L8mwX3MPla+xb8qgb7xviqBfssBgv4B/cF+wz4eGAd9wf8ePsNBgstHfdcUx0L9xAdDvQd9xH7FPsRC/cK993oHQvW9xHZRNIT+Av7KveANeH5BHcSC6B296D3Bvdr9wUL9wX3T/cE9033BQv3DR0SogvTQ9r3EdUT7Av7PfP7AvczHwsFcGt8bWUaVbJqzgv7MyP7Avs9C/gQqAb3SCb1+y0L+xb7vPu/97z7FgshHfeN9xX7FPcU+xH3ERPugFodE/aA+HsHE/ZA+xEGE+5ATh0T7wDQyK2/pB9HB0BfaTxGbqK0fh77GIIFE+6AVh0L9xX7FPcU+xH3ERPuQFodE/ZA+HsHE/Yg+xEGE+4gTh0T7oDQyK2/pB9HB0BfaTxGbqK0fh77GIIFE+5AVh0L9xT7BPcEE7iA93F/FUEdE3SAjzQFE3kA9wL32Ab3Ij3b+yz7GTVL+wR2HvcXhQXBl62oyhvOrmRAH/tFaAX7CXRSWi8aE7iALtVW9wMeE7kAPB0TtgALFfdm9z33Pfdn92X7Pfc9+2b7Zfs++z37Zftn9z77PfdlH90E+zr7F/cY9zr3OfcX9xj3Ovc69xj7GPs5+zr7GPsY+zofK/fxFaijo6ioc6FubnN1bm6jc6gf91oWqKOjqKhzoW5udHVubqJzqB8OErb3G/gK9xL//6mAAP8AVoAAE734BHsV7uG81a8fE31QHRO+90QGLIVLQiIb+x5O9wH3KPckyfcH9xvxu1Q4mx/3G5IF9yVtL+77SBv7ZPsP+zP7aR8Tvftt9w37LfdgHgt7FfdA9wbT9x7oVcwzqB8T7M6ltL7UGvcGLtz7M/szLzr7BkKzWM5xHhPyM29VSS4a+x73BkP3QB73BgQvULHW0r+67u+/XERAT2UvHxPs99wEQGCqysS0r9jYtWdSTF9sQB8O9xT//4WAAP8AeoAAE5xA95t/FUAdE1pAjjoFE2qA9w34qvsUBhOcgD8Hwm1TrD4b+ydB+xD7Lx8TnED7Mdb7DvcnHhOcgLHzFTRj3ejrs9ri5a0/KCxqOzAfE5sAC3/w9xTh9yHxAbT3GfeL9xkD97j4thX7DzBLI24f9xeDBbqasqbEG9e8XC2QH/wQbgb7SPAh9y33MfH3A/c89z0l9wL7NB77CvvdFfeLBjiBXF5GG0dctOKFHw579wb3pfH3EPcFAfhk9xoD99p7Ffc39wHu9yv3HS7x+yVLVHZnaB+h90kF99b3BfxHBlr8LgX3GAa2nrunxxviv1U4NVdZNT9arM6AH/sZhAX7EJbnOPc6Gw57Ffcw9wHn9zL3Iivp+yMfE/Q+Umpgax/3KZjF0ugbzqpuWpsf9w+VBfcCcD/R+xkbE+z7ZDX7SfuB+2Ho+wv3RB/3AQQ4VsXe3cfB3NfAVTkzVFY8Hw6gdvhO86vbO/cYEvcB9xT3YfcUE9y9+NYVxvzWyh33CPcFBxPs2/sFBxPcv/sUBxPsV1AHDvcZE/lMHRP2CwG29xv3GPcZA30dCxXnxub3IO9b3zE7T1Q1N8FU0h8T9K+nmqSdH0WDbmNhG3B5mKSDH0GEBRP4gB0W+KH3BfwFBo+3xMf3CsoI9x/Vvr73ARr3Ei/h+zEeE9j7Nikx+yh9H/cagwXhlru63BvXsmFQT2hvKlgfE+j7VyVLKPtAGg4V6cnb9xP3FE3cLSxNOvsU+xPJO+ofzwR6fJCVfx/3DPdUBZB4jnRxGjNsWFYetvedFfsL+1MFhZ2JoaQa5qm9wZuahoGXHg73GgPbFvcW96D3PgbVqHJSjx+a+04F9xgGefdhhdRms0iVGdChwMngGvcWKd77LR77vQb3tfvcFfsz92v3LQbfumVFRlxlPR8L+yD2rO7493cS0fcVQvcM+wz3LBPw91sWE+Ta7gYT8NsdMPt7FRPo2QZCHWEd5xL3adYTsPc6+3gVz8GvzR8T0L1tsUmQHhOwqLYFPAZpUq9oBcSXenNzeH1sa3qYpn8fTnEFYh2MHRO894p/FRO62sKtzqYfE3qNMgUTfEgdE7wzY1xGTW6z5R73zPsU++wH+xPOQPcBHgv7IPbBdvladyId9wP3DOzMHfdz/kEV2QZCHTYd4PchAaH4owP3APsqFeYG2bOnzaIf92X44gX7GQb7E/wd+xv4HQX7GAb3UvyVBbAGfWYFcoF9gWgbRwYL6BVYb6K1sKKjxJYf9x6nBW0HOlVVNh4L9xoD2xb3Fveh9x0GlAb3J/uhBfchBvs297cF5am71ega9yAq3fs8HvunBveh+9wV+x/3a/cfBuG+ZURFWGc1Hwv3pM/7TAaOoaWjrqKnnhjEsay1vhrOVbpEQlFZPoIe14cFtZOgoK4bqKB5b3B8dmp2H2t2BShKe0VNGg46mG+cthqyqqbIxq9pVZQe9xaRBfJ8Qdj7JBv7KD1GKDC+X/c4bx/uep17ZxphZ3lPQWirw4Ie+xeFBQszHc33IVcd91rNJR0jHQGn+Q4Dpxb3Kwb3OfeX9zv7lwX3Kwb7g/f694D39AX7Kwb7NvuT+zn3kwX7Kwb3gPv2BQ6gdviqd+T3FRLP9xn7F/cUE+jRFvcU+Kr7FAYT8MvQKx3yFvcDBtK3qMyhH/dy+PwF+xsG+x78IPsh+CAF+xwG91X8kAW4BnZTBXODeX9sGzsGCyMdwR0OoHb3wfcF97x3Ih33v/cWA9sW9xb3wfe/+8H3Fvlamh0GDl4d9ycG3+T3MPuABfckBvts98z3ZfdyBfsyBvtv+4UF+DX7FAcLi/cF+Hj3Bcz3IQH3OPcWA7YWix0LA9sW9xb3bgbb5vdw+8kF9ykG+6/4Ivee98wF+y4G+6r72AX32PsWBwvRFsod94z7FAcL90P4aPtD+GcF+xIG90L8Z/tC/GgFCxL19xn7FvcUE+iI+yoV1wb3C7i39wIf+Kb7FPyiB112fmUeVgYT8AsB96T3FgP3pBb3FvesBveM+EJPHfeN/EIFCwHR9xYD+D4W9zMG+4T3n/d4958F+zEG+2z7lQX3lfsW/Kr3FveWBwsV9yrt8/c5H/hd+xb8XQckYFZAQWG/84ke+xeEBfssjOj7AvcvGwsW9xb3IuD3BTb4W/srBvvj/GIFIff4B/tq9wUV92r3sgX7sgcO97AW9wbujh03KN/7rgchvFz1HgsjW/sA+w8nuzfmH43PFWVyqbaMH7WMpqiuG7OhbmFgc21kHw6JHfuP+zKJHQ4B93v3GQOnFvif9wX8BQb3+fh5BfcE/IT7BfflB/v0/HkFCxWxqKaxsG6mZWZucGZlqHCwHwv3FPfJBuK3udHJqGA0HvvM9xT36wf3C0zf+wpIUnBSbx4L+xb7dQY5S1UqN2C94B73dvsW+44H+xzfNfcn3tGvwq0eC/cWA9sWih0LoHb46fcFAfeG9xYD94YW9xb46fds9wX8xfsF92sGDgH3dvcZA8QW+Gfu+9QG98z33QX1/FQo970H+8j73QUL+S0W+Vr7LAf7xvyqBfiq+xb9WvcwB/fC+JsF/JsHC7eXpbCyGsZVuEJJU2BSgx7WhwWfjqCbqhupoXZwCwP3bPsGFfcSBvtC+Gj3QvhnBfsSBvtD/GcFC9QdDvladwG29QPF+AUV2QaY91wF9yEh+yEHDhX3JAb3JvdBBcEH+yb3QQX7JAb3PvtcBQv3TPebBfsiBvsL+0r7D/dKBfsfBvdO+5oLfxX3GQb4mvl2BfsZBvwp+/0V4tDW7R8L2u7bHQugdviqd+D3IV4d+Kr7FAYL94YG93P3EPcT93f3ePsT9xT7dh/7gAsVPlnP9vcBvM3Z27dO+wb7BV5NPB8LZAZxfZenH/jP+xQHivzcBTK9ZtoeCyMd8B0O7h33jvuOBQv49ewBtPe1A7T49SYd9wgdnZuToKGnHwsiHQPbFvcW+On4DfcF/I8GCwGi+ccDovlaFfgt/Vr4LvlaBQuL9wX3ePcF95R3Ih33qPcaC/sU/Ef7M/hH+w/8R/s0+Ef7FAvRFvcU98gG3bOt3R699wJaBgsV9wz3AGgGwOYFPQZPJgUO9yju+yj3SPsM+0j7KCj3KAuL6fcq6/dWdwHR9xT3e/cYCxX7iwbelbq40BvPumI0kR8L94wG9zLgxfcC9wU2xvsyHwvz9yLcAbTd9yj16PT3I9wDCycd+Jj3BbcoHbb3GwuYHZYdCxVEBkj7QgX7EPcn9yBOBwv3Hwb3y/fL+8r3ywX7HwYL9Qb3KNI8+zj7NkQ8+ygfCwHb9xQD2xb3FPla+xQGCwPbFvhn9wX75fjp+xYGC/cy8/cC9z33PSP3AvsyCxLR/wB5gAD//4aAAPcUC0AGXnabvR/3ovch7vshC/sqFfcWBhN694AHE3wLA9uKFfla9/n9Wvf4BQsG+5T5WgX7MwZ0/EMVC/dwzPcuu86+w8wBtssLz/cmy8bPAfeO1gP3TAv3i/cFyuwStvcbw/e1C/cw+y73GveT9xoT6Av3FfsV9xn3ovcXE+wLEq/3Gfdu9xT7BPcEC9u5vuyVH6n3swX3Rwtw0QWDgHuGeht8f5ML9yD3efcgAdv3JwPbCwbbs3NXWWNzOx8O+D33IPcydwG29ycL9wP3EfcFAfdl9xYLdvc89wP3wPcXi3cLe/cG93vs90/3BRIL8fch4fcU8AszzxXj9woF+woHC/sU+2/7Wfdv+xQLAQABAAAiAACrAAGHAQCsAgGJAQCvAQCKAAAjAQGLAQCxAAGNAQAlAAGPAQCaAAAmAACyAAGRAACzAQGSAAC1AAGTAwAnAQGXBgApAAGeAQAqAAGgAAC2AgGhAAC5AAGiAgArAAGlAQAsAAGnAQAtAAGpAgCMAAAuAQGsAgC6AAGvAAAwAAC7AwGwAQCNAAC/AACOAAAxAACdAAAyAQGyAgA0AAG1AADAAAG2AwA1AAG6AwA2AADBAAG+AADCAgG/BAA3AQHEAwA5AQDFAAHIAADGAAHJAQA7AAHLAADHAAHMJwBCAADIAAH0AQDJAgH2AQDMAQCQAABDAQH4AQDOAAH6AQBFAAH8AQCnAABGAADPAAH+AADQAQH/AADSAAIAAwBHAQIEBgBJAAILAQBKAACRAADTAgINAADWAAIOAwBLAAISAgBMAAIVAQBNAAIXAgCSAABOAQIaAgDXAAIdAABQAADYAwIeAQCTAADcAACUAABRAACiAABSAQIgAgBUAAIjAADdAAIkAgCVAABVAAInAwBWAADeAAIrAADfAgIsBABXAQIxAwBZAQDiAAI1AADjAAI2AQBbAAI4AADkAAI5MQBtAQJrAACLAACPAAJsiQARCQL2HwBjAACbAAMWAQCeAACjAAMYAAFAAwMZFwAPAAANAAAbAQB5AAACAABgAAAgAAB7AAByAAB0AAALAAMxAAAEAAAQAAA9AAMyCAAOAABvAACJAABAAAM7AAAJAQBcAABeAAA8AAA+AAM8DQB1AQBpAAB3AABBAAAIAABqAAB4AABrAQADAABoAABlAANKBwAhAAAHAABzAABmAACqAAClAANSAACZAAChAANTAQBdAACgAABwAQNVAwBhAABnAAAFAANZBABiAABkAAAMAACmAACoAACfAAAeAANeAAAfAAAdAANfAQCcAANhAABfAACXAAA/AANiBwAGAAB6AANqPwCDAACCAAB8AQCGAAB+AACIAACBAACEAAB/AQCFAACHAAOqBgMPAgABAPwA/wEOASYBPAFUAXUBjgGmAcMB/QIXAk0CoAKjAqkCtALCAzMDSgNXA4EDoAOkA6gDrgO7A8gD4wPmA/oD/QQXBEoEfQSABKQE+AUEBRIFRQV2BZsFxgY8Bj8GlAbIBswG6QbxBwwHIQdEB0wHXgeJB7wHvwfTB/AIFwgmCDoIRAhUCHcIegitCLEItwjCCNAI0wkICU4JWgltCYgJngmxCcUJ2gpbCpELFAsXC10LzAvSC98L7QwIDA4MGQwnDHMMlAy3DRcNGg1DDVsNlQ3FDcsN0Q3dDf4OGg4iDisORg6tDscO4A8NDzYPTg9vD4gPoA+jD6YPrg/dD/EP+RBgEGYQdBCCEJAQlBCXEJoQoBCtELsQ1hD0EP4RHBFXEYQRjhGnEeESGRIoElgSeRKgErQSzBLlEvITIRM/E2cTehOUE6kTxBPdE+8T/RQTFC8UQxR3FJkUqxTEFNwU9hUcFTwVVRWyFhoWQRaAFyMXiheQF50XqxfsGAMYEBhBGIEY3BlNGVMZXBlqGYsZnRmrGbQZzRokGoQahxqWGrwayBrWGxIbJxs4G04buBu7G74b3xvjG+8b9xwUHC8cMxw7HEwcYByVHMUcyRzZHPEdFB0dHS0dbB2THaodwx3HHhEebB6HHrce3x7iHzgflh+lH7sf1h/uIAQgGyA0ILAgySEqIS0hjiH1Ig8iICIyIlkiYiJyIoMiyiLuIw8jiSOWI88j/CREJGQkgSSJJJUkxiUhJSklMSVFJX8lsyYNJjomSyZjJoQmnSa1JrgmuybEJxMnJicvJ1onfCeKJ5cnpSepJ60nsCfZJ+Yn8igAKD8oVShiKJso3CkdKXEpkCmdKakptynwKgIqDyo/Knwq0isdKyErLCtNK3MrnSu+K8sr/iwdLDMsNyxSLFYsaiyaLKkswizVLO4tMi1ALVUtaC2TLcMt3C4ILokuwi7RLxUvGC8eLysvRy92L8sv0S/UL9cwAjCGMIwwmTCsMMQw9DD4MPsxBzEjMSYxLDEvMTkxSzG9McAx3TILMigyUzJ8MpIyrzLOMxMzSDNOM600BTQJNB40ITRiNNA1GDVgNZE19TZvNqs26TcSN0U3SDd7N8I37jgqOC44MThMOIc4ozi1OS05ljmoOcE54joNOmY6bDp6Oo461ztHO1Y7bDuLO5E7oTvKPAY8Kzw6PFs8XjxkPIE8hDyWPQQ9Bz0jPVs9cD2dPcw91D3tPg8+Vj65PsI/Cz9hP2U/kz+XP5o/9kBCQKdBBEFwQdBCCUJlQqNC4EL+QzVDXEOPQ5JDlkOZQ7BD4UP5RCREnETiRRhFjEWcRclF2UXtRflF/EYHRhRGH0YiRoNGrkbERt9G7kcCRxtHKkdRR2pHzkf/SB1IV0hxSI5Iw0jcSRRJU0mWSaxJvEnSSeJJ9koCSgVKEEodSihKK0o6SnBKwUsES05LwUv+TEVMoUzgTTBNOE1iTa1NwU3oTfFOBE4VTjVOR05RTntOjk6/TtJO3U7yTwJPSU92T3lPlk+uT8FP0E/jT/dQC1AtUGNQoVD+UV9RcVGTUdRR+FJuUolSp1K2Us9TAVMgU1JTl1P0VGNUdFSLVKFUuFTKVRpVSVV4VdpWO1ZtVqBWrVbAVtRW61cCVxpXP1doV5BXu1frWBtYSVh3WIpYoVjEWNhY5Vj1WTZZSllxWX9ZqFnDWhhal1qvWsta71sUW0VbeVu3XIFdJ11aXgler17fXwVfRV9+X4Jfl1+mX79fz1/zYFRgjGDTYQJhe2HuYpJjD2OVY/FkSGSaZQxlUGVxZYdlu2XgZgBmT2Z2ZpxmyWb2ZyZnpWfuaAZoKGinaOZpFWlEaXJpnWoIalVqomsla09rf2uqa9dsA2w0bFZsgmytbPBtQ21tbZtt5W4xblZue26ibsRu7W8ob0JvZG+Jb6pvwm/icAJwInBPcHxwrnEFco1yxnLPctly4HLqcwJzF3Mvc0dzVXNjc2VzdHN2c4RzhnOIc5ZzpHO1c7dzuXPHc9Rz4XPjc+Vz+nQJdBd0J3QrdDx0QHRQdFR0ZHR0dId0i3SPdJN0l3SodLh0vHTAdNt063T8+077Ks2quKqhqriqxKqiwKCsoaqucaWqpauuq6SqrqrLEuPSRNND9xn7GfdZLKps91z7HKps9xxB1RP/vxX4Gvm0FfvC/kr3wgZB98IVIPsx9gcTEAAg9xJsFRMQAAgsXgYTGgAh6gaq94QVIAcTDgEU+zH2qj/quAYTBgBCbHVqwAYTA2EF6vcIFSz7Maz3EskHqsQVEwGhBWxNSSyqya5NqgcTABBAyegVEwAQEGxoBhMAOEGqBqzOFUjJawcTAC8B+zHuBvcx9w4VbE1oyWz7MaoHE+AGgcmuTqoG9zD9XRVsbQdIXgXsbAYT4AEA+zGqBs24BUmqBg78PQ7EoJQd+TMT2DIdE+gvCg7EOB3g9yESovkzE9wyHRPsLwr7NPiEIB3EOB3g1xKi+TMT3DIdE+wvCiX4hC8dxDgd2/cmEqL5MxPcMh0T7C8K+5j5ESEKxDgd2ygdovkzE9oyHRPqLwr7mPh/FekGE9bM5AUT2iAKxDgd5vcGEvdYKQoT3jIdE+4vCvud+IokHcQ4HeD3IRKi+TMT3DIdE+wvCvsl+IQlHcQ4He7sEqL5M/x097UT3DIdE+wvChPa+4v4kiYdxPtr3vctlB35WPtg9RPsohb3HAbG9zwFE+r3rQbG+zwFrFUdq7QFigb7lPlaBfszBnT8QxUT9C8KDsQ4HczH2McS95fI2MgT3zIdE+8vCiX4cD4KxDgd4iwK900xHRPUwDIdE+TALwpY+I0VE9LAKwoT1MAlChPRwCgKE9jAKh0T0cAmChPkwCcK9/+L9wXK9wuQ9wT3TfcF+wP3AxL4mvcWE7SiFvcfBhPU5vdEBfed+0T4XfcF+9sGE7T3T/fH9wT7x/dN99P3BfzIBxPMM/wzFfcx98QFufvEBg6thArLIgpjCg7LIgq89yFjClVvHcsiCrf3JmMK+y76OCEKy2Ed90f7A/cDMXb5B/cFErb3G/eA1hOP+ANoChPPagqXnfc0l+rvpfcwGfsckgUTlyV7U04iG/sKPuz3NPcy1vD3De3EUi6cH/cckgX3NW0q6vtJG/tc+xf7JPt4+2r3CPsa9z53HxOnd2pJChOPYh3L6x0T6H0d+y75phXpBhPYzOQFE+ggCssiCsL3BqcdTfmxLQq/IwoB24AK2xb3hgb3c/cQ9xP3d/d4+xP3FPt2H/uABveA/OkVIfh4ywq/IwrH9yYB24AK2xbZHQb3gPzpFSH4eO8d+yr5tyEK9xiLCvcYiwpdMx1XHQ5dMx3N9yFXHfdKzSAdXTMdyPcmVx3d92MhCl0zHcgoHdv3FhP0Rh3dyBXpBhPszOQFE/QgCl2PCl0zHdP3Bq8K90HTFfcZ9wb7GQYOXbUdXTMd2+wuHWj3tRP4Rh0T9OrbFfe17Pu1Bg5d+2ve9xiTHS4d91D1Ifc8E/zbFvgSVR0T+qu0BfcF+/j3T/fk9wT75PdN9/D3BfxyBw5dMx3PLArb9xZSMR0T6QBGHfe+1hUT5UArChPpQCUKE+MAKAoT8IAqHRPigCYKE+kAJwrehgpOoHb3t/cE91b3BSIdA9sW9xb3t/fb9wT72/dW9+33BfxvBg7MTAoStvcb+ApKChO6SwoTepAgBd/4AvvCJgYTvPdEBiyFS0IiG/seTvcB9yj3JMn3B/cb8btUOJsf9xuSBfclbS/u+0gb+2T7D/sz+2kfE7pNCg7MTAq8158dlvmrLx3MTAq39yafHfsn+jghCsxMCrcoHbb3G/gKSgoTuoBLChN6gFAdE7sAUwoTuoBNCvsn+aYV6QYTtoDM5AUTuoAgCsz7IPac6AoStvcb9yj3DPVKChNegEsKEz6AUB0TXwBTChNegE0KT/trFdkGE96AQh3MTArC9wYScx32SgoTvoBLChN+gFAdE78AUwoTvoBNClP5sS0KzCcdP3b3nfD3Ax2oSgoTvIBLChN8gFAdE70AUwoTvIBNChO+gPsa+bkmHfcAJx3L1bng94v3BQG29xv4BvcYA/gPexX3D/PC9w66H9jVUgaQpo2oqxq2+8Q290AHe4l8iHwe+ztB9xwGY29dc04b+x1N9wb3I/ckyPcH9x7iwlc+oB/3G5MF9yBqIun7Mhv7ZfsT+zb7Zvtl9xT7NfdkHw7Euh33BqB296b3BfcF9wX7BfdmEuf3F/fd9xYT7Pi8FvcW+IjK9wVMBhPc7PsWBxPsKvvdBxPc7PsXBxPsKk37Bcn8iPcX96b33Qf73fcFFfcF9937BQcOxKB298H3Bfe8SR3b9xb3v/cWE/bbFvcW98H3v/vB9xb5WpodBvcNxxXpBhPuzOQFE/YgCvwHdwr3iicdP3b5WncuHfcbdR0TdNtDChO8+Jb9asMdDvwHvQqSzCAd/AegdvlaSR3b9xZfCi7HFekGE9jM5AUT6CAK/AdnCnn3EXD3FnH3EF8KE/Qp0iQd/AdnCtn3GPsW9xb7FvcXXwoT8InSFRPk9xn3BgYT8PsZBg78B70KocwlHfwHIx3u7AHb9xYD20MKO9omHfwH+2ve9y12+Vp3ErX1R89H9xYT5NsWE/Cl0QoT6IMdE+SrtAX5WvsWBw78B4gddM+u9xatzhPRANtDCvcO1RUTyYArChPRgCUKE8UAKAoT4wAqHRPHACYKE9EAJwpfngpfJx34+Xfg9yEBwnUdA3IK9xFvHV8nHfj5SR3CdR0T7HIKpPmmFekGE9zM5AUT7CAKpdcK924G2+b3cPvJBfcpBvuv+CL3nvfMBfsuBvuq+9gF99j7FgcOpSMd2/cmIh29HfH3YiEKpfsg9sF2+Vp3Ih3n9wy9HfdgdgpAi/cF+Ol3xQoOQIv3Bfjpd+D3IcUKkswgHUCL9wX34/eai3cuHROw2xb4Z/cF++X46fsWBhPQ9237mk8KQKEKYov3BfjpdwH3BvcWA7j3rBXQqwX7zPhn9wX75feYB/cjzWLgJVsF9377Fvu6B/sBWAUO94WWCuIjHXsdDuKgXAp7HfeJzCAd4iMd2/cmex33JfdiIQrirx3iiB3b9xaQMR2A9xYT0kDbFood9/zVFRPKgCsKE9KAJQoTxkAoChPhQCodE8VAJgoT0kAnCt/7M+/bdvlady4d99j3F/sV9xUT+NsW9xb4lQYT9Pfa/JUFhQdodnljHjIn9wgGE/jvysfpH/lf+xf8egf7xfh6BfspBg7yIgoBtvcb+Cw4Cg7yIgq89yEBtvcb+Cw4ClH5OiAd8usd+Cz3GxPseB37Mvk1FekGE9zM5AUT7CAK8iIKwvcGAbb3G7MpCrU4Cvs4+UAkHfIiCrz3IQG29xv4LDgKYPk6JR3yIgq89yEBtvcb+Cw4CvsW+TpHCvIiCsrsAbb3G8b3tcc4Cvsl+UgmHfUiCirsErj3G/gs9xsT2Lx7FfEGssAFaMDMedcbXx0fE7j3CGrpUMweE9jT7AUlBmldBalYTptEG/tn+xT7I/t5+wKpMcFMH/eTkRVbY5ikax/3svgVBaRhmFNHGvs2Pyz7FB77YPeVFfc21+z3FLawgHepHvuv/BEFd7SAvsgaDvIiCr4sCrb3G68xHbH3GxPSQHgdxPlDFRPKwCsKE9LAJQoTxkAoChPjQCodE8dAJgoT0kAnCvhPJx0qkx0q9wUStvcb+Cb3J/sW9xYTtfgPexXo1K3Evx8TdUD4XvcFBxN2+9z3T/fI9wT7yPdN99T3BQYTdfxWBhNtQAfEV0KtLhv7ZfsT+zb7Zh8Ttftl9xT7NfdkHhOu9wUE+x1L9wv3HvcfyvcM9x73Hsr7DPsf+x5L+wv7HR8OjpQKcKB29yn3Bfdj9wX3FHciHfeJ9xsD2xb3Fvcp9wwG9znq2/cf9xss2vs5H/sM9xT7Fgb3FvxUFfdj9wkH4LZpR0ZgZzYfDuwiCgG29xv4JvcaA/iNkhXDRAX3BgYv9wcF38269fcXGvdm+wr3Nvtt+2z7DPs2+2b7afcU+zH3ZL23lJmrHvsS5RX7HUv3C/ce9x/J9wz3H/ceyvsM+x8rcUlbYR9P2gX7Bgbv+xAFhX15iXYbDqeSHW0KDqeSHcz3IW0KNvgdIB2nkh3H9yZtCvtN+KohCqf7IPbBdveg9wb3a/cFIh3q9wzQqx05/PlOCpJkHWUdDpJkHbz3IWUdSW8dkmQdt/cmZR37Ovo4IQqSYR33RjR2+Qb3BBLP9xj3Rdaq9xgTn/feaAoT32oKl5wF9ymR7dv3ERr1S9H7U7QepAoTr78KE5+W+xjgL/ckeAgT33ZoSQoTn2IdkmQdtygdz/cY96/3GBPsgQr7OvmmFekGE9zM5AUT7CAKkvsg9pz3BPia9wQSz/cY5vcM0/cYE3yBCj/7axXZBhP8Qh3Li/cF923o90L3BSId9933GAPb+HMV/HP3FvhzB9iytNMe9ycG+0n7NAX7AAfvjAXqxGNGSVdhNh/7EfsF9xEG9z7u4Pcc9wUv1/sgmB/3Vfc/BfcI+8sH+y40N/snHw5czR1coHb3udz3c/cFAfeG9xYD94YW9xb3ufcT3PsT93PrCvtz+xM69xMGDlw7Csf3JgH3hvcWA/eGFvcW3Qou99MhClz7eM7avMF2+On3BRL3hvcWbdYT+PeGFqIGb1wFE/RJClyctWnNG8/Br829bbFJkB8T+KGsBajdCg5c+yD2wXb46fcFEveG9xb7FvcZ+wz3CRPw94YW9xb46fds9wX8xfsF92sGhv3QwwqxNgp5HQ6xcApRbx2xNgrf13kdjPmrLx2xNgraKB3M9xb3yfcWE+w7Hfsy+aYV6QYT3MzkBRPsIAqxNgrl9wYSzPcWgikKg/cWE/I7HRPs+zf5sSQdsXAKYfmrJR2xcAr7FvmrRwqxNgrt7BLM9xaV97WV9xYT9DsdE/z7JPm5Jh2x+23c9wz3Bfj6dxLM9xbX4TX3SMD3FhP2zPeSFfs49iT3PogeY3BraYxWCFm2ZsCuqZecnh7VBxP6fHd4hHobc32Zn7CtqOq5H+m0weH3CRr4XfsW/F0HJlNTKClTw/Ae+F37FgcOsTYKy8fYxwHM9xbCyNjIwvcWAzsdjPmXPgqxNgrhLArM9xZ+MR1/9xYT0kA7HcX5tJEKw4v3JfsQdvladxKi+TMTcPesFvcxBveV+VoF+xwGE7D7W/zJ+1v4yQX7HQYO98NRHRKi+ikTcPdqFvckBvcQ+Hr3EPx6BfclBvdR+VoF+x0GE7BNHQ73w1Ed4PchEqL6KRN4VwoTuE0d+CXMIB33w1Ed2ygdovopE3RXChO0TR33wccV6QYTbMzkBRN0IAr3w1Ed5vcGEvfSKQoTfFcKE7xNHfe70iQd98NRHeD3IRKi+ikTeFcKE7hNHfg0zCUdqLYdl7kdl6IKkviDIB2XoHb5Wkkd96T3FhPo96QW9xb3rAb3jPhCTx33jfxCBS74fhXpBhPYzOQFE+ggCpdnCvdC9xFw9xZx9xCrCin4iSQdl6IKofiDJR2XiB33Pc+u9xatzhPRAPekFvcW96wG94z4Qk8d9438QgX3DviMFRPJgM6yvuCOH0gGE9GAXYd+fXUbfYCQmnkfE8UAn3J1lmsbE+MAKh0TxwC3jZyZnxublYV8nR8T0QB3o5+BqRsOOCMKfx0OOSMKzPchfx33dfkrIB04IwrH9yZ/HfcE+bghCjgjCtL3Bsgd91/5MS0K/GnTHUChCuKvHbBxHW8KDrBxHcz3IW8KR/gdIB2wcR3H9yZvCvs8+KohCrD7IPbBdveh9wX3a/cFIh3Y9wzash07/PlOCvtfIwoB9zj3FgO2FvgH9wX7DPh4YB33B/x4+w0GDvtfvB33E/kqIB37XyMKxygd9zj3FhPoVQqm+SUV6QYT2MzkBRPoIAr7XyMK0vcGErz3IfsR9xFx9xZw9xD7EPchE+S2FvgH9wX7DPh4BhPxYB0GE+T3B/x4+w0GE+qh+TAkHftfIwrS9wYS9zb3GfsX9xYT6LYW+Af3BfsM+HhgHfcH/Hj7DQYT8PcL+TAtCvtfvB33I/kqJR37XyMK2uwS3/e1+2X3FhPoVQoT8LT5OCYd+1/7a973GPcF+Hj3BRL3OPcWXPUh9zsTcLYWE+j3oFUdE2SrtAWK9wUGE3D7DPh4YB33B/x4+w0GDvtfIwrOLAq820fPrvcWrc4T0oBVCveH+TMVE8rAKwoT0sAlChPGgCgKE+GAKh0TxYAmChPSgCcKxF0dAbb3G/gG9xgDRB0OxF0dvNcBtvcb+Ab3GANEHfmrBOTEwOOPHz4GXYZxeGEbYXCeuYYfPQYzj8VW5RsOxF0dtygdtvcb+Ab3GBP2RB37MvmmFekGE+7M5AUT9iAKxPsg9pz3Bfc68veL9wUStvcb9yn3DPD3GBN+RB1F+2sV2QYT/kIdxF0dwvcGAXMd8vcYA0QdSPmxLQrEJx33OvL3Ax2k9xgT+kQdE/77Jfm5Jh3EOB3k9xYS91ssHRPeMh0T7i8K+1f4iCkdyyIKwPcVpx2P+a8rHV0zHdH3Fi4dWiwdE+pGHRP29yjRFWYKZW5xZWSocLEf90kWZgpmbXFlZKlwsB8OXTMd0fcVrwr3g9EVsaimsbBupmVmbnBmZahwsB8OzEwKwPcVEnMd9koKE7SASwoTdIBQHRO1AFMKE7SATQoTvoCV+a8rHfwHIx3k9xYSfHoKXwoT9G/QKR38ByMd5PcVEtn3GfsX9xYT6NtDChPwy9ArHfIiCsD3FgG29xu3LB28OAou+T4pHbE2CuP3FhLM9xaGLB2K9xYT8jsdE+wv+a8pHffDUR3k9xYS99YsHRN8VwoTvE0d+ALQKR2XIx3k9xYS90V6CqsKb/iHKR04IwrQ9xXIHfeh+S8rHftfIwrQ9xYS0HoKE8hVChP06PkuKR37XyMK0PcVEvc29xn7F/cWE8hVChPw9035LisdxF0dwPcVAXMd8vcYA0QdivmvKx34lov3BcL3A/fS9wUB+gb3FgOiFvccBsb3PAX3rQbG+zwF9xz3AB3y98Dx+8AF98D7q7oK+IMnHSr3Bfh49wUSzPcW98n3Fvd59xYTvDsdE3z4HZu6CkwwCkMdE7g0HRN4MQoTuC4KDkwwCsD3IUMdE7w0HRN8MQoTvC4KePiaIB1MMArA10MdE7w0HRN8MQoTvC4Ks/iaLx1MMAq79yZDHRO8NB0TfDEKE7wuCvsL+SchCkwwCrv3JlLEQx0TtjQdE3YxChO2Lgr7C/iVFekGE67M5AUTtiAKTDAKxmMdXikKTPcUE7k0HRN5MQoTuS4KE7b7EPigJB1MMArA9yFDHRO8NB0TfDEKE7wuCoj4miUdTDAKzuwhHXH3tV73FBO6NB0TekmWtnbFG5ygjY2TH+h6B3eBk6gf91YH9yI92/ss+xk1S/sEdh73F4UFwZetqMobzq5kQB/7RWgF+wl0UlovGhO6LgoTtCL4qCYdTPtr3vcM6PgC7kMd+w31K/cDE/j3d38VE/Ljz7HEpR+SYKBzqYAIE/RxanwdE/irtAXoegd3gZOoH/dWB/ciPdv7LPsZNUv7BHYe9xeFBcGXrajKG86uZEAf+0VoBfsJdFJaLxouCg5MMAqsx9jHIR2eyNjIi/cUE76ANB0TfoAxChO+gC4KE7sAs/iGPgpMMArCLAq09xlaMR1I9xQTqSA0HRNpIDEKE6kgLgrs4AoTpSBIBhOpICUKE6MgKAoTsKAqHROioCYKE6kgJwr3uX/fN/cPHSjuIR33bfci+x/3H/eL9xkTdYD3gH8V74zVsa7SCEW312PsG3wKdAo+THFcXh68Y0qjORv7EjFM+wR2HxNugPcYhAW9lbGsxBvLs2Q+H/sybQX7CXRAaSUaE3WALORR9YoeE7WAq98VSIhws60ayr2R0Jge8J8FaAeKNVVaRIgI+JT3iRUTdoD7iwbelbq40BsTtYDPumI0kR8OZWsK9zh3EtH/AHuAAP//hIAA9xT3j/cZE7b3+X8V9x7i9wH3Pvc+NPcB+x5BUmNbbx/3kPsUBxN2/VoHE3r3DgYTuo7aBRO2UqnEadYbbvMVOVvN9wH3A7vL3tS6S/sD+wFbSUIfDj8kCmgdDj8kCsD3IWgdUfj3IB0/JAq79yZoHfsy+YQhCj9hHfdCO3b4V/MhHfc51hOe97hoChPeagqaofcOlt/ZmfcLGfsYkQUTroYdHxOe+yzfI/cYdx4T3nRlSQoTnmIdP9QKE+iVCvsy+PIV6QYT2MzkBRPoIAo/JArG9waSCkj4/S0KZWsK9zh3ErT3GfePNQoTvDwKE7rVya3EqR8Teo48BRN89w35WvsU+5DVCh8TvLQKDoFrCi33mod3o3chHfePNQoTpwA8ChOmgNXJrcSpHxNmgI48BRNrAPcN+Vr7FPuQ1QofE6cAtAoTkwD3uvf8Twqcawqr2zv3GBK09xn3jzUKE6730/jWFfX7DAbCblCsQRv7GzT7APs/+z/g+wD3HR8TrdXJrcSpHxNtjjwFE273DfjWywYTtttLBxOuv/sUBxO2VyEHefzK2h0OVX/x97zx9353AbT3GfeY9xgD94D4khX3Er2ocKBommEZn2Zhl18b+zsrLPsv+y/rLPc79zrr6vdF9xts9w1D3x/vs3HP+xpVWLBKojuTGWovtYiwg6p/GUBtBer8exU4XMPn57rD3t27UzUnW1U5Hw5JMB1UHQ5JiQr7Q/esIB1JMB259yZUHfun+DkhCkkwHbkoHbT3GfeL9xkT9kwd+6f3pxXpBhPuzOQFE/YgCkkwHcRjHWopCl2mHfus97IkHUkwHcT3BowK+0z3si0KSYkK+zT3rCUdSTAdzOwhHXz3tXD3GRP6TB0T9Pua97omHUn7a973DPH3IeH3FPABtPcZ8fWy9xkD98N/FaSMhIMFb2t6a2AaU7JqzrO0l5mcHvcIHZ+elKGipx/i9J+jm6iUrBl0CvsxJfsD+zz7PfH7Avc0Ho8dDkkwHcD3GvsT1z/3HDbXIR1lMR1a9xkT4UD3w38VfArPChPhIJkd+zEl+wP7PB4T4UD7PfH7Avc0HhPpII8dT/e1FRPlQCsKE+lAJQoT40AoChPwwCodE+LAJgoT6SAnCkmiHft5oHb4Oe7m7gH3EqYKDmU+HbYKE+0AWh0T9QD4ewcT9ID7EQYT7IBOHRPuAGQKE+0AVh0OZT4dwNebHZD4bS8dZT4du/cmmx37Lfj6IQplPh279yZSxLYKE+1AWh0T9UD4ewcT9SD7EQYT7SBOHRPtgGQKE+1AVh37LfhoFekGE+tAzOQFE+1AIAplPh289wAStPcZz/cMyIIKU/hp5R1lPh3GYx3J9xnBggpN+HMtCmU+Hc7sIR1797VznB0T7QD7IPh7Jh2H+zbs13av7/Hb9x7jM+8hHfeN9xX7EfcRE/cA95z3eBX3LgZKe2BmThs/W8nt7bnJ2dO6VzWRH/szBq/8ahX3LO/T9x0f90nB21UHE/sA93YHE/qA+xEGE/aATh0T9wBkCjCj2k73IBsOT5wKa6UdT6B2+E7z9zh32ygd0V4KE/a+HS3HFekGE+7M5AUT9iAK/Bx6HfwcKgpeHfiq+xQGDvwc2B2RzCAd/BygdviqSR3R9xQT6DoKLccV6QYT2MzkBRPoIAr8HCoK5vcGEm73EXH3FHL3EBPoOgoT9CjSJB38HHod/BzYHaHMJR38HCoK7uwB0fcUAzoKO9omHfwc+2ve9y12+Kp35vcGkAqJ0i0K/BwqCuIsCmrPrvcUr84T0QA6CvcO1RUTyYArChPRgCUKE8UAKAoT4wAqHRPHACYKE9EAJwot+yru03b4qnfm9wYSz38K9zv3GfsW9xQT9ToKE/mJ0t8K91D9+VkKE/b3AfkkLQr79ZgK+/U2HQH3AfcUA4j7KlkKDvv1Nh3g9yEB9wH3FAOI+ypZCvcK+R4gHfv1+yru+N1JHfcB9xQT6Ij7KlkKnfkZFekGE9jM5AUT6CAKaioK91h3ux0OaioK91h32/cmux0t92IhCmr7IPbBdviqd/dYdwHR9xTJ9wwD0Rb3FPcnBt/k9zD7gAX3JAb7bPfM92X3cgX7Mgb7b/uFBfg1+xQH90B2Cvvvi+7493cB0fcVA/dbFtruZAZxfZenH/jP+xQHivzcBTK9ZtoeDvvvi+7493fg9yEB0fcVA7kK+w/5myAd++mL7vfx95qLdxLR9xUTsLkKE9C1+FRPCvvvrB376Yvu+Pd3EtP3Ff//f4AA/wCAgAAT4Kn3wxW1mwX7VQcyvWbaHhPQ2u5kBnF9l6cf93oH6K9u1UtzBfeT+xQHivvEBRPgQ28FDvd7oHkK91D3C/dR9xQTrtEW9xT3xgbgsb7IzKNaNB77xvcL98YH4bC9yMmoXzMe+8r3FPfrB/cYR9L7AkFUZERzHtB0VbQ9GxO2SFVmSnEfE9aI5QUTzvsIBg5PoHkK92H3FBOsVgoTtFIdE9SI5wUTzPsIBg5PoHb4Tucv88D3IRLR/wB1gAD//4qAAF4KE7ZWChO6Uh0T2ojnBRPW+wgG90DMIB1PoHb4Tucv87v3JtYK92H3FBO2VgoTulIdE9qI5wUT1vsIBtP3YiEKT4cKT6B2+E7nL/PCLArR/wB1gAD//4qAAPcUSjEdS/cUE6iQVgoTqRBSHRPJEIjnBRPIkPsIBve01RUTpKArChOooCUKE6KQKAoTsFAqHROiUCYKE8iQJwpP+yrn2nb4Tucv8xLR/wB1gAD//4qAAF4KE9b3pvsqFekG7crF540f9+sH9wxL3vsKHhPaUh0T6ojnBRPm+wj8qvcU98IGE9bltr3Q0KNZMR77VYoiB2V0c2UeSAYOVSQKAbT3GfeY9xgDNAoOVSQKwPchAbT3GfeY9xgDNApR+I8gHVXUCveY9xgT7DQK+zL4ihXpBhPczOQFE+wgClUkCsZjHWopCmr3GBPyNAoT7Ps3+JUkHVUkCsD3IQG09xn3mPcYAzQKYPiPJR1VJArA9yEBtPcZ95j3GAM0CvsW+I9HClUkCs7sIR1897V99xgT9DQKE+j7JfidJh1GJAox4RK09xn3mPcYE9ilfxXtBqyzBXGzvX3EG/cy8/cC9z0fE7jYdcxluh7R4QUpBhPYbmgFpGNamVMbmB0/oEqxXB/3YJgVbXKTm3cf91X3gQWTc49uahr7A1tLOR77FvdDFfcCuszeqKSDfJ4e+1T7gAWEo4enqxoOVSQKwiwKtPcZZTEdZ/cYE9JANArE+JiRCvfff/El8/cf4fcR8ybwIR33mPcd94v3GRN398R/Fd7QqsC5H1a40GzfG3wKE7d0CjhIbFZeHsBdRqo4G5gdHxN3+z3z+wL3Mx7zBMgK3btK+wL7A1tLOR8Tb/iW93XoHQ5lhQpe+xV29x73Avfo9wD3OHcS0fcN+w33FveH9xgT9tH7KhX3FvdeBmOqu3PLG/ct2vcR9y73Ljz3EfstR1xzYm8f93n7Fgf3i/z4FRP6M2Xd4uWx3OPksDwvHxP2MmY7Mh4OZfsVdvce8/fy5y/zIR33j/cU+xD3EBPc+L37KhUT7PlABxPq+w8GE9qJPAXGbFCrRRv7LED7Efsu+y7X+xH3LB8T3M/GrL+oH/tzB/sS94YVPVzM9wL3ArrM2dm7UPsI+whcUDwfDvuNoMQKE9DkHRPgSmFsQ3YfiPIFE9D7DAYO+42gdvg89wLM9yGgCubMIB37jaB2+Dz3Asf3JqAKgvdiIQr7jfsg9sHECvsU9xn7DPcHrQqG/ZEVE+TZBsfwBewHE+L7DCCuBg4mf+33/u1iCg4mf+33/u289yFiCkr48yAdJn/t9/7tt/cmYgr7OfmAIQomYR33PEF2+F3tEsH3GfcZ1oL3GROe96VoChPeagqaoQUTrfcPkd3D7BrkVLn7PKUetB0TnpIuzUb3EHwIE950ZUkKE55iHSZ/7ff+7bcoHcH3Gfdb9xkT7HYd+zn47hXpBhPczOQFE+wgCib7IPag7ff+7RLB9xm69wyr9xkTfHYdQftvFdkGE/xCHXGL9wL/ANCAAPcA/wC5gAD3Ai0d93f3FjP3GBP00fhwFfxw9xT4cAfjvbvTHhP4xrllXFJiXkWMH2KMBfsBB7qMBRP03o3LaUAaRklqQR5L+wLLBvcY9yDB9yPpSs0qoR8T+NehtcbTGvcIKtX7Hh4T9PsrKDL7MR8O+3w9CgH3FfcUA8UdDvt8i+73Htv3Cu4B9xX3FAO494EV3zcGIbxc9R7JCtP3INv7IPcK9yHu+yH3EfsU+xE3KN/7CjcHDvt8PQqk7xL3FfcUE9D3sBb3Bu70HQcT8PcR+xQHE9D7ETco330KE/CO+MNPCvt8+3jO2rys7vfk7hL3FfcUqdYT+Lj4RxXf+64GO6ddxXkealMFE/xJClyctWnNG8/Br829bbFJkB+hrAX3Au4GE/iOHTcHDvt8+yD2rO735O4S9xX3FFP3DBPwxR0m+3sVE+jZBkIdSzkdjB0TuPeKfxUTtEIKE3SNMgUTeEgdE7hACg5Ldx2C+PcgHUs5HeDXrh29+PcvHUs5Hdv3JlLEjB0TtveKfxUTtUIKE3WNMgUTdkgdE7ZACvsB+PIV6QYTrszkBRO2IApLOR3m9wYtHUnNSfcR2PcQT8dPUx0TuED3in8VE7ggQgoTeCCNMgUTeEBIHRO4QEAKE7RA+wb4/RUTskD3EfcGBhO1APsRBvde+wYVE7iA9xD3BgYTuQD7EAYOS3cdkvj3JR1Ldx06+PdHCks5He7sLR1cuvdctWGTCiz5BSYdS/tr3vcM80R2+Kp3LR33NfVIUx0T2veKfxUT2UIKE7mNMgUTvJlVHRO6q7QFiviq+xT7xwYT2kAKDks5HczH2MctHYnI2MiOUx0TvID3in8VE7xAQgoTfECNMgUTfIBIHRO8gEAKE7sAvfjjPgpLOR3eLArR9xQ/z0fX91POUVMdE6kQ94p/FROpCEIKE2kIjTIFE2kQSB0TqRBACvD4/BUTpSArChOpICUKE6MQKAoTsFBLY1k3iR8TsJDPBhOikCYKE6kQJwo/i/cV+wB2+Kp3EqH4shNw920W9ysG91j4qgX7HAYTsPsb/Cn7HPgpBfsbBg73RlAKEqH5sBNwRQoTsEYKDvdGUArg9yESofmwE3hFChO4Rgr36MwgHfdGUArbKB2h+bATdEUKE7RGCveExxXpBhNszOQFE3QgCvdGUArm9wYS95UpChN8RQoTvEYK93/SJB33RlAK4PchEqH5sBN4RQoTuEYK9/jMJR1rnQowlwowsB33DPkeIB0w+yru+N1JHaH4oxPo9wD7KhXmBtmzp82iH/dl+OIF+xkG+xP8Hfsb+B0F+xgG91L8lQWwBn1mBXKBfYFoG0cGn/kZFekGE9jM5AUT6CAKMDYd5vcGAfcPKQoDVAqa+SQkHTCwHfcc+R4lHTA2HeIsCvcLMR0T01QK94D5JxUTyysKE9MlChPHKAoT4yodE8cmChPTJwo6PQoBxPhnA8QW+Gfu+9QG98z33QX1/FQo970H+8j73QUOOj0KzPchtQr3RviBIB06PQrH9ya1Ctn5DiEKOj0K0vcGzh33PfiHLQr8aNMd+++sHU+HCkA3HfcGHRO493F/FRO0QR0TdI80BRN49wL32AY3ChO4LtVW9wMePB0OQDcdwPchYQpz+JogHUA3HcDXYQqt+JovHUA3Hbv3JmEK+xD5JyEKQDcduygdr/cZ925gChO293F/FRO1QR0TdY80BRN29wL32AY3ChO2LtVW9wMePB37EPiVFekGE67M5AUTtiAKQDcdxvcGEq/3GVkpClGdHfsV+KAkHUA3HcD3IWEKgviaJR1ANx3O7BKv9xlr97VkYAoTuvdxfxUTuUEdE3mPNAUTevcC99gGNwoTui7VVvcDHjwdE7T7A/ioJh1A+2ve9wzoT3b4U+4Sr/cZ90f1SGAKE9r3cX8VE9lBHRO5jzQFkgYT3HVvfB0T2qu0BYr32AY3Ci7VVvcDHjwdDkA3HazH2McSr/cZmMjYyJFgChO8gPdxfxUTvEBBHRN8QI80BRN8gPcC99gGNwoTvIAu1Vb3Ax48HRO/AK34hj4KQDcdwiwKr/cZVDEdTmAKE6kg93F/FROpEEEdE2kQjzQFE2kg9wL32AY3ChOpIC7VVvcDHjwd5uAKSAYTqUAlChOjICgKE7CgKh0ToqAmChOpICcKZTIKIR33jzUKE5w8ChOaQB0TWo46BRNsWwoTnEQKDmUyCsD3IWYdUfiPIB1lMgrA12YdjPiPLx1lMgq79yZmHfsy+RwhCmUyCrsoHbT3GfePNQoTmwA8ChOagEAdE1qAjjoFE2sAWwoTmwBECvsy+IoV6QYTlwDM5AUTmwAgCmUyCsZjHWcpCmShHfs3+JUkHWUyCsD3IWYdYfiPJR1lMgrO7CEdeve1djUKE50APAoTnIBAHRNcgI46BRNtAFsKE50ARAoTmgD7JPidJh1l+2ve9wzzRHb4Tucv8yEd92f1STUKE80APAoTzIBAHROsgI46BROuAJxVHRO1AKu0Bfiq+xQHE80ARAoOZTIKrMfYxyEdp8jYyKM1ChOeQDwKE54gQB0TXiCOOgUTbkBbChOeQEQKE5/AjPh7FcO2tsPDYLVTU19hU1O3YMMfxwR0e5uioZuboqGbe3V0e3t1Hw5lMgrCLAq09xljMR1gNQoTlJA8ChOUiEAdE1SIjjoFE2SQWwoTlJBECsX4mBUTkqArChOUoCUKE5GQKAoTmFAqHRORUCYKE5SQJwr8Cdwd/AmgXArwHZHMIB378qB2+FT3mot3Etn3FBOw2Rb3FPla+xQGE9D3PvuaTwr8Cfsg9sF2+Vp3Etv3FPsU9xj7DPcIE/DbFvcU+Vr7FAaF/kHDCvuUIx0B9y/3FAPv98MVwqAF+9j3FPgJB+GsbdVTdgX3j/sU+8AHNmoFDkwwCsT3FiEdYiwdU/cUE7k0HRN5MQoTuS4KE7ZW+J4pHT8kCsT3FZIKivj7Kx1JMB3C9xYhHW0sHWX3GRPpTB0T9vtm97AVZgplbnFlZKhwsR/3SRZmCmZtcWVkqXCwHw5JMB3C9xWMCvsK97AVsaimsbBupmVmbnBmZahwsB8OZT4dxPcVIR3J9xnBnB0T70CP+HErHfwctx38HCoK5PcWEnL3GmT3FGH3GhPoOgoT9G/QKR38HLcd/Bz7a973LXb4qnfk9xWQCsvQKx0g+yru03b4qnfk9xUSz38K9y73GfsW9xQT9ToKE/nL0Mkd9wH9hVkKE/b3Q/kiKx379TYd5PcVwB33Q/kiKx1VJArE9xYhHW0sHXL3GBPyNAoT7C74kykdSzkd5PcWLR1NLB1Wkwpg+PspHfdGUArk9xYS95ksHRN8RQoTvEYK98bQKR0wNh3k9xYB9xMsHQP3APsqFeYG2bOnzaIf92X44gX7GQb7E/wd+xv4HQX7GAb3UvyVBbAGfWYFcoF9gWgbRwbh+SIpHTo9CtD3Fc4d93/4hSsdQDcdxPcWEq/3GVwsHVmdHVD4nikdZTIKxPcWIR1rLB1roR0v+JMpHfagdvg57ubuAfcS9xX3ZPcVA/cS+L8VaD8o1/w59xX4Ofdktwpo+2TKCg6zoHb4Oe6Zd+b3BvsA7hL3EvcV94l/ChPNrAr4DPy/FfcUBhOt+Kr7FAcTtonSLQrOi+731u7m7gH3EvcV93qmCvh8/L8V1x0O9wk9CgH3FfcU93D3FAP3sBbJCvei93B9CvcG7o4d+3D3EfsU+xE3KN99Cg77e/gFzUzS913RErbz9wTwON449wITuPc1+AUVE7THs6Kvmx8TdF+TrH+tGxNymZqNjZEfzoIHE3h/hZCfH/cBB+RXuyYyU2ZAfh7vhwWpkZ6brBusnnZkHyJ2BRO4RXxib04aUrtq0R6lzRVwfpegn5qYppEf0ZsFfAdcbXFhHg77e/gF1vdX1gG28vcd8wP3a/gFFfLQz/TyR9AjI0dHIyLQR/If1gRfcq/Jx6Swt7ejZ05Nc2dfHw7EoJQd+TMT2DIdE+gvCg6Yi/cF92/3Bvcr9wUB21IKA9sW96cG9zru3/ce9x8o4Ps6H/sl9yv4DvcF/JAG96H86RX7H/dv9x8G5bplQ0NcZjEfDq2ECls7CuAdDls7Csz3IeAd91fMIB0pOwoiHfdZ9xYD2xb3Fvjp99v3oPsW+y/72wYOkKB296T3Bfdo9wUB9xn3FgPH96QV1Puk9xb3pPd39wX7d/do+A33BfyP+9lCBg73RvsVdvcq9wX4ePcFEr33Fvga9xdg9xcT+L37KhX3FvcqBhP0+HL7KvcX95sGE/gz+On8bQZX/GUFM4FtX1cbaQb3bRagqJizkcCz9/4Y93P8eAYOXTMdVx0OXbUdXY8K9/8jHQH4U/cWA6cW9zoG95H32wX72/cW99wH95L73AX3OQb7qPf3sgoFDpsnHf8A5oAA7f8Ac4AAd+f3BRK69xn3t/ca+wL3GhP69+Z7FfdC9wng9xLqUM8gpR8T/OiivMHbGvcDINX7NPsp+wFA+wJ+HvcYgwW8kr+q2Rvev2pWQExvUYwfQowFKAfUjAUT+tSM02c7GkVPXSswTbXOhR77GYUF+xWS9wk09zsbDt8jHakKDt8jHeDXqQr7OPmbLx2jIx0iHQP4ihb3Lwb7v/f3hB0Oo6BcCiIdA/iKFvcvBvu/9/eEHdz4QCAd9wcjCgH4yvcWA8IW5wbrvMvvlB+y+EUF93b86fcW+Vr8cAZd/KAFXod3b2YbUQYO94WWCr+6HfIiCgG29xv4LDgKDr87CiId97j3FwPbFvcW+On3uPzp9xf5Wvy9Bg6OlArFIgpjCg5czR1Ki/cC+Ox3nwoOSov3Avjsd+DXnwr3V/ktFYId91gjHQG29xv3UfcP91H3GwP4Axb3D9cG91ee9xX3APcsGvcs+xX3APtXnh7X+w8/B/tXefsV+wD7LRr7LfcV+wD3V3ke+1H3qxXk0sj3Cpoe+94H+wqaRMjkGvfM+zkV994H9wp70k4zGjNETvsKex4Op7Ydj6B294L3A/f9dwGw9xb3tPcWA/hbFvcW+VrLHQ73HNkK97j3F3D3FxP42/laFf1aBxP0+KL7KvcX95sGE/gj+On7F/zp+7j46QYO97eL9wX46XciHfdd9xf3XPcWA9sW+az5WscKBg74CdkK9133F/dc9xZv9xcT+vng+yoV9xf3mwYT/CT46ccK/VoGE/r5kAYOv+wKIh3c9xbc9xcD97f7KhX3Fvcq92j5WvsX/On7uPjp+xb9WvdnBg6Y4h0D2/laFf1a96cHswoG9x/8BVoK94biHdT3FgP5SUMK/PkW/Vr3pwezCgb3H/wFWgrkaQr3I/cFAfc5UgoDx/jpFfT86XgK+38G+Ar8BVoK+IdpCvcj9wUB+MpSCgPCFucG67zL75QfsvhFBfd2/Ol4CvxwBl38oAVeh3dvZhtRBvmg93gV47xkP0FbZDIf+x/3eAYO+EhpCvsF9wb3k3cuHfe5UgoT3tsW9xb36fe5++l4CvsWBhO++5P7ufeT+xYHE975SPwFWgqSZB1lHQ7oJx33YPX3YvcFAbf5MAP4E3sV90b3CvD3O6wf+x4GKXFHUiob+wZC1/cUfB/3jvX7jgb3FprU1/cGG+zPUSmlH/ceBvc9avsK7/tGG/to+xP7Ift7+3n3E/sh92gfDugnHfdg9fdi9wUBtvkwA/gIexVfHfd7+xP3Ifto+0b7Cif7PWof9x4G7aXPxewb9wbUP/sWmh/7jiH3jgb7FHxCP/sGGypHxO1xH/seBvs7rPcKJvdGGw78B3cK/AdnCnr3EW/3FnL3EF8KE/Qq0iQdX54K9xmgdvf99wwd97T3FgOm+OkV90r86fcW93UG3cvB7N+2WTYe+3b3FveOB/ccN+H7JzhFZ1RpHvds92L3BfyaBw74BycdP3b3vvcG9133BXt3Lh35GPcbE3bbFvcW977zBhO2+1ie9xD7CvdVG18d93n7E/cj+2j7VfsP+wv7V3cfIwYTrve++xYH+M78+RX7FD/q9zYfE7b3Ntfs9xT3FNcq+zYeE677Nj8s+xQeDrBxHQHY9xr3qPcWA/j9Fvla+6cH+zwqOfsgLrtB5W0f+zb7twX3IQb3J/ehBZQG9x37oQb7H/gSFTVYr9HSvrHhH/cf+2sGDvcci/cF94z3DB33sfcZA/dlFvcW93EG4MrC7Ne8W0E+UVonHvsFB/dH9wTo9yj3Hi3o+x85RmhVaR/3avdi9wX8mvsF90oHDuFpCtfjM/dIEvctUgoT3L34phXy/KbGCtfzBhPs4yMHE9zn+xYHE+wvJAf4CPupWgroOwoB98/3EQP3EPegFSv7oAX3GgbV928Fupqdla0bl/uo9xH3qJYGrZ2BXJkf1vtvBfcaBiv3oHPTYbFSkxn3KvdnBfcF/MP7BQf3KvtnUoRgZXNCGfcC990V97MG+yP7XgUO8icd90L3BFT3BfdA9wUStvcd+Cj3HRO8jgr7CEHZ9xx/H52UnpCejqyPvoO7eggT3PBntYWzkZSMlY2VjggTvPsGdkRJIRv7WfflFfcFoNLN9Bv3CNQ8+xuYHxPce4J6hnqJY4ZrkSqvCBO8XJ5Qk2KFgYqAiH+ICA7yi/cm+xF2+On3BRKi+WITcPesFvcxBvdN+JMFy6KmocEbmvcFXAY0RlUxax8TsPsn/Dj7XPjIBfscBg74HpEd+FP3FvfZ9xYTuPoa+yoV9xYGE3j3gCQH+2X3obIK+6f79wX3Ogb3kffbBfvb9xb33Af3kvvcBdIGDsyRHdv3Fvf69xYTuPjM+yoV9xYGE3j3gPsFB/t396GEHfe4++8FzQYO9wf7KveANeH3a/cF97x3Lh33v/cWVvcWE7r43vUdPvkEmh39WvcW98H3v/vBBhN62AYOl7kdmKB291z3BfghdwH3pPcWA/cF91wV9zP7XPcW91z3M/cF+yAG93n4IU8d93r8IQX7IAYO1pEd+Nb3FhOw+Nb7KhX3FgYTcPeAJAf7Svek94D39AX7Kwb7NvuT+zn3kwX7Kwb3gPv2+4L7+AX3Kwb3OfeX9zv7lwXOBg7P+yr3gDXh9yz3A/f9dxKw9xb3tPcWXfcWE7r4r/UdN/kEyx373QcTet8GDo+gdvf99wP3gnciHfe09xYD92b5WhX7Fv1a9xb3dQbdy8Hs37ZZNh77dvcW944H9xw34fsnOEVnVGkeDvwHdwrehgrfIx3u7BLY9xaV97Wo9xYT9M8dE/z70vmpJh3yJx33XvcE9173BQG2+ToDjgr7BUPV9xR7H/gmBvsUe0NB+wUb+133zhX3E5zT1vcEG/cE00D7E5wfDkqL9wL47Hfu7BKi+Lr8N/e1E/C4HRPovvk7Jh1SMApDHRO4NB0TeDEKE7guCg5ne/P3vPMStvcK+wr3HfcW9wak9xgT1PfOexX3M/cA7fcw9ygn8fstHxPsQ1BsVmcflPcDw6besgjgs6nF4xr7BooFVHlzSW4eE9T7FlJWLvtVGiGkNbpXHkzB03PUG4zzFTpTyOSNH+KMxcbcG9fATzUyVE48Hw5Yi+v3Gbpc3/cR6xLR9xb3WPcY+wL3GBO60Rb3ngb3HdjD6h8T2tNXuTKSHhPc1pO3s8ka6jvA+yIe+4AGE7r3l/xKFfsV9xn3FQbCrXFgZGlyVB8TvHL3bRUj9xHzBsSuc2ZkaHJSHw77OaB2+EfuXh34R/ef7vwfBg77OaB2+EfuzPchXh34R/ef7vwfBvcfzCAd+2KgdvhH7gHR9xT19xYD0Rb3FPhH94D3k/sW+zD7fgYO+wqgdvdl7vcT7gH29xQDvfdlFcT7ZfcU92X3Ke77KfcT95/u/B/7dlIGDsr7KveNKO735O4SsPcU98f3FWD3FRN4sO4VE7j7jfcUBxN09yr4HQcTtPsq9xUHE3T3jQcTeDX4R/wlBlv75wVIgnRuYhv3OBaao5SokLCt94oY9zr75AYOSjAdVB0OSjAduvchVB37NPeoJR1KMB3A9wYhHWspClymHfur964kHfezKgoB+C/3FAO6Fvc1Bvdf944F+473FPeNB/df+40F9zMG+3P3n/dp958F+zMG+1X7jAX3jPsU+40H+1X3jQX7NQb3afufBQ4gf/D3KuH3GuISqfcY91P3GPsG9xcT9PegfxX3I+bH7M9avzigHxP41J21s78a6DfE+xn7EDZUMYEe9xiGBbOPqqK9G8Ctc2Nfa3BXjB9bNbsGE/TJjLNsWRpfYnFMTWOpuIge+xiHBSGQ50n3IRsOQioKAdH3FPdU9xQDbR0OQioK3NcB0fcU91T3FANtHfd0yBWCHUIqCtz3IQHR9xT3VPcUA20d90nIFe8GTvchBfsVBg5uKgrCHQ5uoHb4qnfg9yHCHbz36SAdnYv1993uAfh09xUDvRbgBvcHHfxH9xX4qvw9BmX7+AVchnhyaRtlBg7Zi/cMKHb4qnctHffq9xUTeNEW9xT31Qb3C/vVBfUG9wn31AX71PcV+Kr7MAcTuPsj/DL7I/gyBfsxBg5IoHb3be33b3cB0fcU91n3FAPRFvcU9233Wftt9xT4qvcRHQYOVSQKAbT3GfeY9xgDNAoOUaB2+EfuAdH3FPdi9xUD0Rb3FPhH92L8R/cV+Kr8YwYOZYUKPyQKaB0OOaB2+EfuAfd19xUD93UW9xX4R/dM7vyFKPdMBg4wlwowNh3c1wGh+KMDVAr3RfkaLx2y+xZ2+fF3AbT3F/cM9wr3CvcXA/e4+ysV9wr3Rgb3Lp7q5/cYGvcYLOf7Lp4e91n7CvtYB/sueSou+xka+xnsLvcueR77DPeIFdG4vNabHvuiB0CbXrzRGveC+xsV96IH1Xq3W0UaRV9bQXoeDmudCm+gdvcz9PeidwHR9xT3gPcUA/hGFvcU+KqwCg6q+xZ29yfuKPItHfdi9xVt9xQT1NH4phX8qvhF+yf3FAcTtPeOBxO4KfhD+xUGE9j8R/ti+EcHDvdFi+74R3cB5woD0Rb5Tviq4x0GDveX+xZ29yvu+Ed3EucKcPcUE/r5efsrFfcU944GE/wm+EfjHfyqBhP6+TMGDlH7Fnb3J+4B0fcUsvcUsvcVA/eB+ysV9xT3J/c8+Kr7FfxH+2L4R/sU/Kr3OwYOUOcdA9EWowr3TOcd4PcVA/kaFvcV+Kr7FQb81PyqFaMKkIvp9yrr6u4B9xr3FPd79xgDvfhHFd/8R8EK+2gG99fACvfzi+kt9fce6+ruEvh09xX3evcYE7z4dBbpHfsL91b8PQYTfGX7+AVchnhyaRtlBhO8IeAH9wcdBveD++kV+wL3KvcC9wod956L6fco7irr91Z3LR33WPcU93v3GBPe0Rb3FPeG91j7hveMBvcy4MX3Ah8TvvcFNsb7Mh77DPdW+xQGE977VftY91X7FAf4x/xMFfsDBhO+9yr3Awfbs3NXHxPeWWNzOx4OJn/t9/7tYgoOTX/z9xbl9xbzAbT3HAP3xH8V9xbp1fcUqB/7GwZMemFoUBtEXrregB/3J+X7Jwbelri60hvItGdJnB/3Gwb3FW8s2PsXG+wdDk1/8/cW5fcW8wH4OvccA/e7fxX3M/P3Avc99z0j9wL7M/sXLD77FW8f9xsGzZy0r8gb0rhcOJYf+ycx9ycGOIBeXEQbUGGuynof+xsG+xSo6UH3FhsO/Bx6HfwcKgri9wYScPcRb/cUdPcQE+g6ChP0Ks4V9xH3BvsRBvde+wYV9xD3BvsQBg779ZgKa6Ud90Z/80R2927t9xLzf3ctHfho9xgTdtEW9xT3btkGE7b7IZ3uMvcjG/Id+yMoMvsheR89BhOu9277FAf4ZvxOFThcy/cDHxO29wK6zN7du0r7Ah4TrvsDW0s5Hg5boHb3Wun3KOkB4vcX91n3FAP3WfduFfsT+24F9xwG9wX3WgXr+1r3FPiq+3cG+yk7UfsAR7NX0W0f9wvVFUxoprq6rqbKH+77KAYOdvsq79J2+Er3AK/cOvcZEvcBXgoT7vcBFvcU974G5bW90c2mWy8e+6wHYXRxaB5mJ8YG9wPAx/cAH/fZB/cORtz7AkpRdE5sHvcM9wUHE/bc+wUHE+6/+xQHE/ZXUAcT7jrGBw6pi+n3P+r3P+Mz90wS9zL3Ffd69xgT3PcyFveMBvcv48r3B/cJNMz7MB/7C/c/9gYT7OMgBxPc6/sVBxPsK/sABxPcM/cAB/eD/EkV+wL3P/cCBte3a1RVYG0+Hw7ZoHb3atL3LesB6/cU4PcO4fcUA/cY918VNvtfBfcWBsr3PgWslp2WrhuQ+2r3DvdqjwavnIBqlx/J+z4F9xcGNvdfd7tgp1iRGfcr9y0F6/y5Kwf3KvstV4ZgbnhbGef3fxX3uQb7JvspBQ5Vf/Pq7V/s8/MStPca95b3GRO8fh1AXcDngx+NkpGNkRunj6+FtHoIE9zPbamFpowIE7xOeGJpTxv7DveKFc2btrHKG9i6UiiQH4SKBRPcaod5jDmxCBO8ZJxikWyGCA5li/cW+wF2+EfuEqH42BNw920W9ysG9xn4AAW6nKqjthuV7mcGNUhbL2wfE7Ax+5z7HvgoBfsYBg73wHsK+C/3FPeM9xQTuPmn+ysV9xQGE3j3dT8H+zX3Vfdp958F+zMG+1X7jAX3jPsU+40H+1X3jQX7NQb3afuf+3P7nwX3NQb3X/eOBfuO9xT3jQf3X/uNBbgGDoR7CtH3Fver9xQTuPhz+ysV9xQGE3j3dTIH+0H3Vfd4958F+zEG+2z7lQX3lfsW/Kr3FveWB/d2+5YFwAYOn/sr93VB1fcj7fdvdy0d91n3FGL3FBO6+Hb7KxX3FAYTevd1BxN8NPhg9xEd/Kr3FPdt91n7bQYTeuIGDj/7FXb5QHcB93j3FAP3eBb7KvcU9yoH92T4qswKDj/7KvdbKe34eXcS93j3FBNw9wRaFfcIBhOwJvcUBxNw8PcJBxOw7SkH91H4ecwK90/8eQUqBg6Rewr4gfcUE7D4gfsrFfcUBhNw93UwB/se91nVHftU+6QF5Aq8Bg60+yr3dEHV4PT3onctHfeA9xRg9xQTuvib+yoV9xQGE3r3dAcTfDb4YLAK+4wHE3rgBg5PnAr8CdwdSaIdQioK7uwtHVu791T3FBP0bR0T7NvaJh1Vf/P3Eu33EvMBtPihA34dRV+43H4f95EGOn9eXkYb+xL3dBXbl7e50RvQuF07lx8OMDYd7uwSofij/Cz3tRPwVAoT6Kz5LCYdvqB2+Nf3F4t3EqL5LROwohb3GgYT0Pdb+Nf3W/zXBfcZBvuU+VoF+y0GDuqL/wBwgAD/AfSAAPcFErb3GvsY97Xj97b7GPcZE9S4Fve19wUGE+Qzj0b3AfceGvcu1er3E/cT1iz7LvseRvsBMoceE+j7Bfe29wUH+yKKBRPk4brE7PcTGvdc+xX3I/ti+2H7Fvsj+1z7E8Uq4VweE9T7IowFDmaL7viU7gGi+NYD+K4Wyu5oBmaBoLR5H/s3+C0F62VjtzYbPCi/BrKXdmKcH55c+2j8igX3GQb3Ivfs3ftgBSiyrmLfGw6Ri+734+8B9yn3BPc39wQD+OcWsu5pBmJ0pbUf95/u7/ziJ/P8RvcE+Eb3N/ufByHATvcKHg5Le+//APKAAOv/AMuAAO8SsPcHMPcHE/D3vHsV9PW4zL8fSeUFTVg+ZUsbMFG91NbFuuaJH7uKBewHW4oFE+hPikqt2BrEvLDXxM9mVrUe0uIFylEusy8b+yAsP/sDPLlV3XIfE/ApclVIMBr7EvQz9y4eDqYiCgG79xv31vcaA/fsmQr7fqB2+Hvu9xB3EvdS9xYk8hPw91IW9xb5WgYT6CQGLWptNh5OKAYT8PcsBg54i/cF+Ij3BRLG9wQdxqkddd4KuvcZ95P3GvsD9xsT/PfRiAqP6gr4J/cWA/gnxB2Gox1+6QrE9wUd99qkHUY7CgH3TvcYA/dOrgp89w4dsNMK99egHYGDCvc09yjP96zPAfeS1Pc80wP4L/coFenJ2/cT9xRN3C0sTTr7FPsTyTvqH88EenyQlX8f9wz3VAWQeI50cRozbFhWHrb3nRX7C/tTBYWdiaGkGuapvcGbmoaBlx5f/IE/Cg73NP8BkYAA/wAzgAAS+AXYUMYTwPgufz8KYvdBFdj4GAYToFAGSx0TwH4K9zT3NM/3nc8B96bj9mod+xz3QBWzHfc09yjP9w3L688S96A5ChP0+C5/PwqO9zSNCvc0933PAfg+ah2b90GBHfc09yXP9ybLxs8B+HBqHfcxBGkd9zT3KM/3JM/RzBL3o5Ud+C5/Pwr3NARuCvc0+HXPAff1ah1S90FsHfc09yjP9xLD7M8S95w/HRPy+C5/PwqM9zRBChPsPR0T8kUdE+xICvc09yjM0c/3JM8S96OQHfgufz8Kf/c0qB33SHXd48/3rM/m3AG03fch1Pc80/ch3AM1HYzjFenJ2/cT9xRN3C0sTTr7FPsTyTvqH88EenyQlX8f9wz3VAWQeI50cRozbFhWHrb3nRX7C/tTBYWdiaGkGuapvcGbmoaBlx4O90h13f8BVYAA/wAzgAD3XtwStN33othQxveM3BP6NR1w8BXY+BgGE/ZQBksdE/p+CvdIdd3vz/edz+ncAbTd9zXj9tb3ONwDNR37HO9nHfdIdd3jz/cNy+vP5dwStN33LzkK9y/cE/7ANR2O4xXayL/NvWe4WpcfE/9Aax0T/sBHHUuPyVnaGw73SHXd90HP9/bcAbTd98/W92HcAzUdnfCBHfdIdd3gz/cmy8bP9NwBtN33/9b3MdwDNR3gBGkd90h13ePP9yTP0czn3BK03fcy00Pa9xHV9zPcE/3ANR3jBNvGwuHfVcJEHxP+wLgKE/3Axh33SHXd+DnP9dwBtN33hNb3rNwDNR1S8Gwd90h13ePP9xLD7M/n3BK03fcrPx33K9wT/mA1HYzjFd/JutO8bbFYnh8T/aA9HRP+YEUdE/2gSAr3SHXd48zRz/ckz+fcErTd9zLW9xHZRNL3M9wT/0A1HX/jFefG5vcg71vfMTtPVDU3wVTSHxP+wKcKE/9AgB2mIgoBu/cb99b3GgP37KoKbHCTm3Qf92n4JgWeYZVSRRr7PFIyIx77NfeVFfc8xObzpqOFfqAe+2X8HwV7s4O/yhoO+0GL9fgR7vcQdxL3UPcWJPIT8KaxCmsiCgGh9xv31vcaA/fSmQpri/X4Ee73EHcS96b3FiTyE/D3BbEKa4v3BfiI9wUSy/cEHcupHWveCrb3GfeT9xr7A/cbE/z3zYgKa+oK+CP3FgP4I8Qda6Mda+kKxvcFHffcpB1rOwoB92n3GAP3aa4Ka/cOHZ7TCvfFoB1rgwpOIx0Bl/jTA5cW7AYzCg73RIvP953P/wCigABYCvfE4/bWE9j3KRbsBjMK/HpdChPUUAYT5EsdE+hzBhPbUQr4EfzIZx33LHvPbHb3Qcvrz/8AooAAWAr3nzkKE3YA7hbsBjMK/EhdChO1AFAGE7kATmtoTx4TugBzBhO2oFEK+H382FsdE7ZAax0TtqBHHUuPyVnaGw73Z3vPbHb3Qcvjz0/P95XPe3cStuP21vd6OQoTc9D3MhbsBjMKE7XQv/1qWx0TreBrHRO10EcdS4/JWdob/Rn36Wcd9wyL9yBHz/8Bp4AAWAr4PtYTmvcPFuwGMwr8YF0KE5ZQBhOmSx0TqnMGE5pRCviL/MgV1gYTWtO0BxOaz2L3jEwHE1pyHROajR33OYv3IEfP9z3P9w3Lb3f3JM97dxK2OQr3/dYTrCD3RRbsBhOqIDMKrf1aFdYGE2wg07QHE6wgz2L3jEwHE2wgch0TrWD3EB38ifc9FdrIv829Z7halx8TrKBzChO0oHN1c2oeE7VgRx0TrWBLj8lZ2hsO9197z2x291rLxs//AK6AAFgK+KTWE3aA9xMW7AYzCvxkXQoTtYBQBhO5gEsdE7qAcwYTtoBRCviv/NhxCvc2bArsz/8ApIAAWAr3oD8dE3aQ7BbsBjMK/EZdChO1kFAGE7mQSx0TupBzBhO2kFEK+ID82EEKE7ZgPR0TtpBFHRO2YEgK92lsCtbPXc/uy2939yTPe3cStjkK92U/HRNy2fcwFuwGMwr8UvwlWx0Ts2lzChO1aXN1c2oeE7VZRx0TctlLj8lZ2hsTs1n4hPvZQQoTq1Y9HROzWUUdE6tWSAr3WGwK089gz/cNy8bPEveM1vdaPx0Td5D3LRbsBjMKE7eQsP1qQQoTr2A9HRO3kEUdE69ghx0Tt5D8etMVaR33M2wK7M/3h88S9xDW97E/HRN+QPcDFuwGMwoTvkC1/WpBChO9gD0dE75ARR0TvYCHHfyP4xXWBvcStfcG2esev/uoR/dVB0UtYfsF+wUaDvuWfNwKfKod/Bugdv8A8IAA/wAzgAAS9xTYUMYT4PcUFtj4GAYT0FAGTmtoTx4T4H4K+7+Lz/edzwG44/bWA7gW96TP+0wGjqGlo66ip54YxLGstb4azlW6REJRWT6CHteHBbWToKCuG6igeW9wfHZqdh9rdgUoSntFTRoO+617z/cNy+vPErg5ChP091J7jQr7qov3IEfPEvdz1hOg93MW1gYTYNO0BxOgz2L3jEwHE2ByHROgjR37vHv3Ah17cQr7vnvP9yTP0cwSuJUd90x7FW4K+96fdvfUzwH3A9YD9wOKbB37qnvP9xLD7M8SuD8dE/L3VHtBChPsPR0T8kUdE+xICvu5e8zRz/ckzxK4kB33QHuoHfuW98rcCvfKqh38G/8CM4AAzgr3FNhQxhNg9xT31xXY+BgGE1BQBhOQSx0ToHMGE2BRCg77v/fZz/edzwG44/bWA7j32Wcd+633yc/3Dctvd/ckzxK4OQoTuvdS98lbHRO8cwoT3HN1c2oeE9pHHRO6S4/JWdobDvuq+B/P94x3Afdz1gP3c/fXgR37vPfG9wId98ZxCvu+98vP9yTP0cwSuJUd90z3yxVuCvve+RbPAfcD1gP3A/fWbB37qvfLz/cSw3J39yLPErg/HRO591T3y0EKE7Y9HRO5V3luZVkaQ8lc4B7PBGBuorAfE9mxqKe2tahvZR4TuWZudGEeE9ZICvu598vM0c/3JM8SuJAd90D3yxXnxub3IO9b3zE7T1Q1N8FU0h8T9KcKE/iAHfw9DhwGy0odHAjkA8n3uRUcCBsG+437jgXdHRz34wYOHARzSh0cBowDHAUIhR0c+jv7DhwFwwYO+K9KHfrIA/lEhR3+AfsO+f8GDvxEi/cgAbT3JwO0FjodDvxE+x129zL3IAG09ycDvfsycB3794v3CR0WOh33eQT3J/cg+ycGDvv3+x129zL3CR34BRU6HZT9L3AdiIv3IAG09yfP9yfO9ycDtBY6Hfdr+yAVOh33avsgFTodDvw2i/cg+M53Erv3J/se9xYT0Nr3cBXiBpPPmPcP2xr3b/sW+28HO5n7D5NHHhPgbPtwFTodDvw2+yF2+M73IBK79yf7HvcWE9D3OvfcFTQGg0d9+w87Gvtv9xb3bwfbfvcPg88eE+D7CvdwFfsg9yf3IAcOP4v3IPhw9wIStPcatPcn+x73FMX3GRPs93X3bRX3FAbMmqe+qR7kwK+z4hr3CjPj+yv7Mi0t+xh/HvcahQXblLa12RvOsmJUWH52QGMfRGRwWiQaE/SC+20VOh0OP/s29wL4cPcgIR279yf7HfcUvfcaE+z3/PfvFfsUBkp8b1htHjJWZ2M0GvsK4zP3K/cy6en3GJce+xqRBTuCYGE9G0hktMK+mKDWsx/Ssqa88hoT9JT3bRX7J/sg9ycGDvxE9333IAG09ycDtPd9FTodDvvn90j3gAG094YD9zb3SBXQv77Q0Fe6RkdWXEZGwFjPHw77fPiK/wBXgAD/AISAAHcBtPfuA/cy+AYVxOrELNC0TeYF9wDjBvsAisnmRrVSKlLsRmHHMPsAjAUz9wAHTzAFDvui9633XAG098kDtPetFdgG5/dcBSEG2ftcFdgG5vdcBSEGDvsBoHb3Q/H3KvL3SHcBivi7A/ejFvcHBqj3QwXdBprxBTsGpPcqBdkGmvIFPwap90gF+wgGbftIBfsCBqn3SAX7CAZu+0gFOgZ8JAXaBnL7KgU+BnwlBdcGbvtDBfcHBqj3QwX3AgYu8RWj9yoF9wIGc/sqBQ77LfsC+fABrfg6A637AhX3Egb3vPnwBfsSBg77L/sC+fABtvg6A/hl+wIV+7z58AX7Egb3vP3wBQ78RoP3IAG09yQD9wWDbh37+YP3IPdc9yAB2/ckA/csg1gd9+gEWR0O+/L7HXb3Mvcg91P3IBLb9yT7IPcnE/D3LPffWB1Q/H0VE+jSBs73QgX3EPsn+yDIBw50g/cgAbT3JMn3JMn3JAP3BYNYHfdiFlkd92IWWR0O/EKD9yD41ncSufcW+xb3JBPgz/dwFeEGkuSa5+Qa93D7FvtwBzKZL5MyHhPQvft4bh38QvshdvjW9yASufcW+xb3JBPg9y733BU1BoMyfS8yGvtw9xb3cAfkfOeE5B4T0Gf3eBVja21iYqtvs7Sqp7S0bKliHw4/g/cg+Hj3AhK09xq+9xL7EPcksvcZE/T3dvdwFfcSBsCgtr2rHuLDrb3QGvcLJN/7KPseJiz7F34e9xqFBdOVuL3OG9G4ZVSKH1Fde1tmHkhac045GhPs1ft4bh0/+zb3Avh49yAStPcZsvck+xD3Er73GhPs9/v37BX7EgZWdmBZax40U2lZRhr7C/I39yj3HvDq9xeYHvsakQVDgV5ZSBtFXrHCjB/FuZu7sB7OvKPI3RoT9EH3eBVibG1iYqpvtLOrp7S0a6ljHw78Rvdz9yABtPckA/cF93NuHfuD94L3AAG09+gDtPeCFffo9wD76AYOTPeC9wABtPiYA7T3ghX4mPcA/JgGDveR94L3AAG0+dQDtPeCFfnU9wD91AYOKiD2AbT4dgO0IBX4dvb8dgYO91/3cfcGffcGErT5ohOg+OT3cRXa2LDS1h9I4gVNR2V4URtfdpDCJR8TYKVdT5lfGzhPbzYwH8wxBcjCvafMG7C+fXK6HxOgUPcFoIm6Gw775/sC+fABt/cTA/dI+wIV9wYG+zj3s4v3svc497MI+wYG+0r7q4v7wvdK+6sIDvvn+wL58AH3K/cUA6f7AhX3Bgb3Sveri/fC+0r3qwj7Bgb3OPuzi/uy+zj7swgO+4j7DvcC+ST3BBK23Jn3DhPQ9+r7DhW69wIGMIhlpswa1AflVM06lR6PB9qVxMvlGtUHyrGl5oge9wRcB/sMNz/7AB84BzloZU+MHhPwIQcT0MeMrmQ6GjgH+wDfP/cMHg77iPsO9wL5JPcEEvcx9w6Z3BPg1vsOFfcM39f3AB/eB9yusseKHhPw9QcT4E+KaLHdGt4H9wA31/sMHlz7BAbmjrFxTBpBBzHES9qBHocHOoFUSTEaQgdKZXAwjh77AgcO+6L7AvcA+Rj3ABLb9w/7D/evE9D3//sCFfcABxPg+zT5GAYT0Pc09wAGE+D7r/3wBg77ovsC9wD5GPcAEqf3r/sP9w8T4Kf7AhUT0Pev+fAGE+D7r/sABhPQ9zT9GAYT4Ps0Bg77qvsG+jsBtPfB0R0O+6r7Bvo7AbX3wQP3PPsGFb8dDvu+TPoMAbX3KQP31tgK+6z+DAYO+75M+gwB90D3KQO0TBX3rPoM+6zbCg77pfl05QG06AO0938V6PiJ92nl+8YGDvulJOUB95LoA/fv+HwVLvyJ+2kx98YGDkz7Bvo7AbT4l9Ed+Bn8aBX3Egb7Qvho90L4ZwX7Egb7Q/xnBQ5M+wb6OwG1+JcD+BL7BhW/HTMW90P4aPtD+GcF+xIG90L8Z/tC/GgFDvuf+yb6eAG15wP3ufsmFcfN+2/3WQX4bQf3bfdWT837jftzBfy3Bw77n/sm+ngB95jnA/D7JhX3j/d2Bfi3B/uN93NPSfdt+1YF/G0H+2/7WQUO+6f3fbb4GrbVtgG0t9W18LUDtPd9Ffc0+EX3I/c0+8MGt/y6FfiP921B+yP8RQcO+6cottW2+Bq2AbW18LXVtwP37fiCFfs0/EX7I/s098MGX/i6FfyP+23V9yP4RQcO+7ZMvPmqvAG0v8G/A/fe2Ar7tf4MBvdevBX7Kvmq9yoG+xT7mov7nfcU+5sIDvu2TLz5qrwB90C/wb8DtEwV97X6DPu12wrivBX3FPebi/ed+xT3mgj3Kv2qBg78Qvsddvcy9yABtfcnA777MnAd+3n7HXb3MvcgAbb3J7/3JwP3j/syxx37efcLHb/3JwP3Sfln7R33j/cyFUQGSPtCBfsQ9yf3IE4HDvt6+NP3IAG29ye/9ycD94/4Nccd/ED3Cx0D90n5Z+0dDvxC+NT3IAG19ycDvvg2cB1e1/gkAbX4qQP34NcV+z73XPc+91wF+yQG+yb7QQVVB/cm+0EF+BcW+z73XPc+91wF+yQG+yb7QQVVB/cm+0EFDl7X+CQBtPiqA/ex19Qd/DL7XNId+7XX+CQBtfe2A/fg1xX7Pvdc9z73XAX7JAb7JvtBBVUH9yb7QQUO+7XX+CQBtPe2A7TX0h37svhL96MBtvXZ9APP+EsV2gaP96MF+wA5BvdO+1EV2wai91EF3SAHDvxn+Ev3owG29wADxfhLFdoGmfdSBdz7ADoHDvsdivX3y+7k9RK9+Er7p/cPE/C9Ft2K6InEv5XlGar3qQX3Oe4GE+j7LgaPrQWuj6Cfrxvk9Ab7BYwwjFFXgTIZhVQFLSjeBm/7lAVoh3d3aBtNBg6MzQrR2uf3Eyr3ExO92xb3XDDa5gb3M5Dl1vcNGhPd7E3H+wKUHhPe4ZTDxNsa9wc/zfsjmB7tPCz7XAf3FvzsFRO991zR+1wHRffCFfdQ0ftQB9r7whUT3fdcB9uHtWlNGhO9T19nPYceE773xgT3SAfIgaprWhpabGxOgh4O+K9KHfrIA/iUthX7jfeOBfn/9w7+AcIKHARzSh0cBowD+JS2FfuN944FHAXD9w4c+jvCChwGy0odHAjkAxwJIve5FfcOHPfjB/eO945cHfcfBvuN944FDhwEckodHAaLAxwFB4UdHPsDBveO945cHfcfBvuN944FHAT5Bg73SHXd93/Vs+od93b3ZRXbBsKftarCG8K1bFSeH9sG7XRAySkbKT9NKXQf91b7e54d90h13fTV9z7qHfg79zkV9wLl2vcBmx8/Bkh8UlxHG0dSus58H0AG+wGa5Tz3AhuI+0+eHU6L9xD4B+QBk9n4P9oD9Bb4GgbDtLTDH/gaB8NitFMe/BoGU2JiUx/8GgdTtGLDHnj3EBX3afgH92r8BwUO97Ai6+bbPtf3ltJE3/cF6RK29wXp9wP3aeI07Tza9xXvE89Q+S1OFXXnBXNRRntBG/tD+wPs90T3Yfcj9yf3ZvdO9fsG+zofE6+Q+w9YV2Jnf6qqnYyfjJYeE9dQnfduBRPXMDUGE88wh18FrnRfoVQb+xczIPsaJ8o79wnMx6++qB8TrzBVl7ptxhvu7+L3Rfdi+y73L/t9+5j7Z/tJ+6P7ffc6+xb3dR8Tz1Dc15qo1R/7ZfdzFUdwvsfZt8/VzqdaTUJkQjwfDp579wYp9wEzdvj59wUSsPcbTfcZ9xn3GpH3FhOa96x7FePTn6q1HxM6qGgFEzn3KwYTWS/3Aba8qNiP2Bn7FpcFV4FheHEe+xX3NQUTlvTLur/cGutGz/sW+xVDRyBMpV+5Vh4TmiFGZFIxGvsP4kf3MB6X9wYVOmStwbyirsSxH/cl+0gFeXhof1gbE5b37gRmtn+mrBqzpKW3tKJ0ZGFzb09mHg5voHb5DtcB95b3BdD3BQP3lvfIFfvI9wX5DtD9DvcF+Vr7pwf7KS09+xD7CuE/9x2FHw5B+wHt+ObsEtD3GfsY9xn3V/cZ+xj3GBPU98X7ARUT2PcR8MDxvni0TqgfE9TBoqWwvRrtRrf7LakeOp9znIquCK+JsaW/G8uzalaUH/cUkQX3BXsgy/sDG/sbLlEiXKZoxHAfE+hScHBiilmIOMZd9yJtCNV5xHZiGmZlclFMXKzDgh77FoUFE9T7AZXwQ/chG4n33xUT5EKTb6auGq6vor64zHlZHhPUZmR0Uh4O9zh/59Pd94rd0+cStujc7fdR7C3pLe3f5xP8wPgwfxX3YPc59zn3YPdg+zn3Oftg+2D7Ofs5+2D7YPc5+zn3YB/nBPsr+xH3Efcs9yz3EfcR9yv3LPcR+xH7LPss+xH7EfssH4/TFfLXzuuVHymQBVaEZ2pbG09ivNXWtLvHHxP+QLmua1uSHxP9QOyQBeeCQMwmG/sJOTj7Dh8T/MD7Dd039wkeDkX3AR3mxeDH3ZsKKsMVxe2tBsEpBcwGTfYFrpWep68avmCrRx4vBur7ChVmzrDlCkX3AR30xt/Hz5sKOMMVxu2uBtCzqcC+YatHHy4G6vsKFWfOr+UK93X5Fs8B90vX9yrX94jYA/jL9/sV3Abc92sF+2vY9/MnByn7nyn3nwUm+/PX924G+8L7bhXX96/yz/uuR/IGDvuR+Afn9yHnAbTo9x/oA/dg+AcV5NTU5ORC1TIyQUEyMtVC5B/nBGRsq7GyqquysqlrZGVta2QfDvwoZQr7dfjn9yEBtffzA7X453UK7vshIB38DeIK+yoV9xH58PsRBg78DeIK9/cV9xH39/sRBv3wBPcR9/f7EQYONqB2+EPjChb3DPhD5h0GDjn7FXb3O+/3zuMK+yoV9wz3O/cq7/sq987mHfvO+yUn9yUGDvhNi+XK2vdP2/dndy4d99z3FrvmQ/egReQT/oD5+fctFejHz/T0T88uL05HIiLIR+cf/an7LRWKHRP9APkj/VoV96Dl+6AGE/6A9xr3IhVkdK7Gx6KssrSiak9QdGhiHw5O92DC4sKrwuLCAdfH91XGA/fd0hXG9xn3H8L7H+L3KML7Ywb7kSYVx/cZ9x7C+x7i9yfC+2MGDvd19yHs9xTs9yvrAffq4+br9xXrA/hCNRX3d/gw+M371fuLMPd1B/wX/BYF97/7PhX7Pfc+9z33PQUi96f3jPcV/Az8KAcOTvfuwgH4I8QD9yr3wBXHBvD33gVQBkP7iUP3iQVQBvfy/MMVxPen58L7hVTnBg4/lHaodvi5dyEdwf8ATYAAdf8ATYAAE7j3dDAV2QaS2vcbjencmvcSGfsYkYJGZGdUhhmp9+qyfaZrklgZ9xiSBRN0ffcCQdH7AJyT4hg9BoQ3BfsmgC77APszGvsi1Cf3Cm4eUfejFemtyMmbHm773gVgpHPC2hoOOeXr93LrsncB3ur3cusD97XlFbazmKKsH9ZBw8E/1gWirJizthq2frN0rR7X1lPBQEAFompjmGAbYWN+dWofQNVTVddABXRpfmNgGmCYY6JqHj9Aw1XV1QV0rbJ+thvrBE9YvcjIvr3Hx75ZTk5YWU8fDpKRdqF2+Qf3BIh3oncSz/cY8trk9xf7C/cYE4qA98MwFdrXBvchlufZ9w0a8VDP+0K1HvdZBxNTAL95qV+SUfcXkRh+9wxB5/sZnwgTTgDePDsH+yeEMzf7Chr7BstY9z9kHvtnB0aZZbuA1/sYgxiW+xvlLfcpewgTZoAk+KsVvbGvzJEe+04HO6J0orsa90r8OxX3VAfeb51tXxpWZm1LhB4O1ycd9xzZ19n3KPcFAfcV9xID+EJ7Ffcj7fD3K6cf+xWSBTR7VVBDGz1VwtxyH/cYBpbZBfsyBom2jKwF9zwGltkF+zoG46LCx90bz8BWO54f9xOSBfckbCjq+xsb+yf7APsA+y1oHzQ91waKao1gBT495Qb7J7D2JfcjGw6zf/cF9xrZ09n3K/cEAdr3Gveh9xkDwPgVFfjm2V0Gk5yRn50a9xMk3Ps5+w8sQfsMah73Gn4FyKa4rcMb1b9iU4kfinWFenp8CPwpBve0/G8V9yD00vcGqx/7I5MFWnJYbE0bQlewwowfmZCZlZke+DfZ/OY9rwaFfod8fRr7DvU49zAeDsyL90892dD3Bfd49wUS9yL3Fveo9xoTfLX3ARXvBhO8+wH3FgcTfPcB7AcTvNkq0PclB/c67uH3IvchKOD7Oh/7p/yfJwb4BfdKFfsf93j3Hwbku2RBP1pkMx8OsaB295T22NrZ9wU92RLb+MkT7Pf+Fvc3Bvuv95QFxwb3J+vQ9weeH9zaPAaFuHmxcKkI9xbZ/MkGE/T7BfdtB9e2cVeZH/vyPPfxBld9X3JBG/ttIAYO90WL3vi03gHb9wXa9tj3A9n3BQP3pBb35QbnxMXnH/jE+wX8yQdldHNlHvth+GwgBvtU/L8V9wX5B/dfBrCic2Uf/C73A/gpB+dRxS8e++UGDnKL9wj3Wdn3cvcFEvcN9xU69xIT6MH0FSIH+KeOBfcF/CgH26+w2YjeCPco2QYT8Ps1Bnu+e6uwGse7tcC7s29ZmB73JJIF8nk53PsnG/sXKjj7BmuTYppeH5F3BSo9BhPo9wYGjH+Mf4AaQWVQPmMeDpeL92824Mbg9+93Evek9xYTePcP9xoV9ykGE7j7GvcWBxN49xr3KeD7Kcb3KeAmB/dc9+9PHfdd++8FJjb3KVD7KQYOJfeA9gH3dvYD93a+Ffb3TfdM9vtM90wg+0z7TSD3TQYOJfd/9wABtPhwA7T3fxX4cPcA/HAGDvs54fgxAbX4MAO19zYV1j/3F/cX9xb7FtfX+xb3FvcW9xY/1/sW+xb7F/cWQED3F/sXBQ4lyfcg1fbc9yAB92r3JAO096gV+HD2/HAG94n71Vgd+CYEWR0OcvcX9vcG9gHb+HAD2/f0Ffhw9vxwBvvcBPhw9vxwBg4l9xf29wb2IPdMErT4cBOw9yqfFfcBBq33AwX3dPb7VAat9wYF9zIGE9D2+xEHE7Ci2AX7AQYT0HQ+BfuGBhOwIPdlB2n7BgX7QyD3IwYO+wil+KYBtvhfA7alFfhf91oF9xsH/F/3WQX7CAf37fsp++37KAUO+wyl+KYBtPhfA/iIpRX3CQf77fco9+33KQX3CAf8X/tZBfsbBw4li/YBtPhwA7T3QBX4cPcSBfchB/xw9xIF+wIH9+w1++w1BfuvBPhw9vxwBg4li/YBtfhwA/ia90AV9wMH++zh9+zhBfcCB/xw+xIF+yEH+HD7vhX2/HAgBw42pfD3SvAB93j3CwO098kV90/7C/cL9wv3T/D7T/cM+wv7DPtPBvwUBPiB8PyBBg77G+DkkeOv45HkErTt94zsE6z38PfEFeC+0fQfKgZXfmhqb3yho3YeE5ymc2+hXBs3VkQiH+0GwJmtqqaZeHSfHhOsb6Soc7wb+28E4L7S9B8qBld+aGprfainch4TbKFzcJpiGzdWRSIf7QbAma2qo5t7dJ4eE6xupKZwwBsO+xv3gueR5xK07feM7BOw9/D3ghXgvtT3AR8qBlR+aGpxfJ+ieB4TcKpyb6NZGzdWQvsBH+0GwpmuqqmZcnCjHhOwcKKoeLcbDvtP93vlAffq5QP36s0V5feT/Bsx98EGDvuM+BP3tgG0994DtPgTFe8GzPdVzPtVBe8GJ/e2BfsWBg73V+Pu9zvvKO4hHfiR9xgTuPd24xXd2LLUtx9Bt9ll3hvx2tvyHxPY8jzbJR42ikBkXkEIE7jTXkC1OBskOTskJN078h+p7hVcaLC6uq6wuh+6irltqVYIVW5bbV0b9+4WXFypwW0fE9iqwbqpuYoIuYquZ10aE7hdaGZdih4O+377Kvb5GvYBlPgtA937KhXmicbAleTJ+MMYj66gobCJtIkYlvZBjDCNUFaBMhlN/MOHZ3Z3aowZXo2BIAUOiYvr+Jnsi3cSovj5E7CiFvj56wb7hfj6BfsVBvuH/PoF8hYT0Pdg+Jn3YPyZBQ6f+xV2+YP3AQH3HfcR9zX3EAP3HfsqFfcR+YP3Nf2D9xD5g/cA9wH9CPsB9wIGDvsFIwoBp/iAA6cW+ID3Bfv8Bvc394b7N/eGBff89wX8gPsFBvc2+4b7NvuGBQ6Q+xV2+Yb1AaH5AwP3D/sqFfc/Bvcm+YYF92H1+8YG+xj9RUr3zwX7DAYOWn/w967yErX3GfeT9x8h9RPo961/FdOHwZ7Bu/ct9x+4+KD8TrZoKRj3Pnr3AfsFjfsyccVSsUeS+yqYIDN++yp++yPw+wL3K4MIE/CN8BVDk17ElOOR3cPB04TJhr1jlEuF+wBORDuRCA5e+xV29yrnMeUS3vcV92H3FPsO9w4T2N77KhX3FQYTtPdkB2mZsHW1G7+5q72fHxPUNwcT2PcO+Kb7FPu/BjNiWERMbbnoHve/+xUHDvcvi9pFdveq257b90/amncStOr3D+n3Aun3D+oTV8Df1h0Tm8DtRtY0NUVAKR4TV8DhChObwMSisLGyomZSHhNXwFJ0Z2QeE7vApQoO+HuL2kV296rbPNqe2/dP2pp3ErTq9w/p9wLp9w/qpOb3EeUTldj6TRbizdbt7UnWNDRJQCkpzUDiHxNLgP351h0TBYDtRtY0NUVAKR4TS4DhChMFgMSisLGyomZSHhNLgFJ0Z2QeE6BgpQoTkBj34hZlc7DExKOwsbKjZlJSc2ZkHw67Ix0B97j3EQP5LfeYFfcfB/vL98v7y/vKBfsfB/eN940F/JL3EfiPBw5v+PrtAf8B6oAA/wBigAAD+H/3QRXt7gX4Swf8S4wpKQX39Ab7/fv94zP3+/f7BQ73HPe39xEBtvlaA/fDthX3Hwb3y/fL+8r3ywX7Hwb3jfuNBfyS+xH4jwYOcI3u+Et3AfiB/wBhgAADv/AV7igF+EsGjPhLKe4F+/UH+/33/TMz9/v7+wUOuyMdAfe49xED+S34VhX7jPuLBfiP+xH8kgf7jfeNBfsfB/fL+8r3y/fLBQ5wje74S3cB/wArgAD/AGGAAAP42vAV+/MG9/v3+zPj+/37/QX39QcpKIz8SwX4SwYO9xz3t/cRAbf5WgP4grYV+4v3jAX4j/cR/JIG9433jVwdDm/4+u0Bt/8AYoAAA/ci90EVjPfz9/v7++Pj+/33/QX39AYp7fxLigX8SwcO+Cv3t/cRAbb6aQP40rYV7h33jfuNBfzZBveN941cHfcfBvuL94wF+NMGDrv7S/poAfe49xEDt/efFfsfB/fL+8v3y/fKBfcfB/uN+40F+NgH9437jQX3Hwf7y/fK+8v7ywX7Hwf3jPeLBfzSBw5/9z/s5egBtvjHA/fO908V02LdtsLk3lsYdfeM+3Qj21xsWWx3cJsZc5mHpoenha2DrVynPrf7CUh2+wkI7gabvK6gp3ylfIpukmqTZpptsXUIDpL3w+73JXcBtuAD+AT3RxX3EPeV7vuW9xAH+2P7QgX7CftXFeD4GjYGDpL3w+73JXcB+LDgA/fA90cV92T3Qftj90IF+xD7lij3lQf32fsmFfgaNvwaBw6J94Dt94buAfiY7wP4F/eAFfcU8Or3EPcQJuv7FB/7uyj3ugbUxFZHSFJVQh/7PAb3C/cLBfsTBvs7+zz3Pfs8BfcSBvsK9wsFDon3gO33hu4Btu8D96T3gBX3Owb7CvsLBfcSBvc99zz7O/c8BfsTBvcL+wsF+zwGQlLBzs/EwNQf97ru+7sG+xQmK/sQ+xDwLPcUHw6MoHb4HvEB+JnxA/iZFvH4hPv79xYG+237Sfdu+0kF9xb3lAcOjKB2+B7xAbbxA/clFvge95T7Fgf3bvdJ+233SQX7Fvv7/IQHDoz3avH4HncBtvED9yX5WhUl/IT3+/sWBvdt90n7bvdJBfsW+5QHDo6gdvj37QH4Iu0D+FMW90H3ZAX7EPiJ/Fkp9/f8J/sQBg6M92rx+B53AfiZ8QP4mflaFfwe+5T3Fgf7bvtJ9237SQX3Fvf7+IQHDvddi+73dOIB94ft90rtA/eHFvgO99f3bQb8Kvgr/C38KwX3cAbt+3QV98snB/dT91L3UftSBSn7ywYO+1vmCvhoFftP93b7UPt1BfcS/Ff3EPhWBg5X+Vx3Abf4nQP4rvg4Fab3uPu4ceQx+9L70uIz99P30gUO8fe89xD3EncBtvk4A/iB9z8V93b3T/t191AF+xL8V/sQ+FYHDleN+J4Bt/ieA/emqRX3uG9x97gxMvvS99MzM/fS+9IFDvtb5gr3iBX7EfhW+xD8V/sSBvdQ+3UFDleN+J4BtvieA/fjqBUz4/fS99Mz4/vS+9Mx5HH7uAUO8fe+9xABtvk4A/eh90EV9xH4VvcQ/Ff3Egf7dftQBQ5X+Vt3Abf4nQPS+DcV4+P30/vS4uP70vfS5OX7uKUFDvdb96z3EQG2+ZoD96D3LxX3EffY+xEH93X3T/t291AF+xH71vcRB/t2+1AFDvtbaPmaAfc99xED+Df3UhX7EffY9xEG+0/3dftQ+3YF9xH71vsRBvdQ+3YFDvdIlHb5dncBtvmGA/g4fxX3afc49y/3afdr+zj3L/tp+2n7OPsv+2v7afc4+y/3aR8O90h/8vio8gG29fiz9AP4OH8V92n3OPcv92n3a/s49y/7aftp+zj7L/tr+2n3OPsv92kf8gT7LfsK9wP3Lvcw9wr3A/ct9y73CvsD+zD7LvsK+wP7Lh8O90iQ3fhYd/cg3W93p3cStt344t0TzvkK90AVxFGcnJuemaAZRrmBen99fn0Z/DD7BhW30HqWfZd9mBlST516nnygfhkg7xXOvIGZgZuEnRk+apV1mHWZdxn3ifstFZnceI95kHiRGW0/ooKjhaSGGfvF97QV3JwFhp6JnZ8aOYoFco5ykHQe+AX7YhU5B6Sjjo+jH3zbBYh3eYl3G/wG9/QV3HyOnpGek5wZPqqBdYRzh3IZ+Hf73hWqP6KVoZafmRlez3yAeoN4gxn8P/hmFdBdlpyXmZmZGVDFenp7eH12GfTyFblHBRMUmpack52UbNYYE850gXWAd30I+Hf8LxXWbJWhkqOPpBk7moh4hXmEeRkTIvvv+GcVmzsFjp+djZ4b3Qdyc4iHcx/4BPv3Fd2MBaSIpIaiHjt6BY94jXl3GhNK+1D3nhWo13SUc5FykBl+Op6HnoadhRn3OPsuFdasgaF+oX2fGUhaln2We5J5GUnnFcLHeZx4mnaYGWBGm4Caf5p+GQ40i+pBdvi56hK2+HwTcPdoFvcqBvc999b7PffWBfsqBvs9+9YF9xAW9wz3d/cM+3cFE7D7DPt3BQ73YaB2+VrQCg73LXQd2/la9h0O92EjHeEdDvctdB2i+VraCg73YYv3APju0Ar7ffzuFfd9+DL3f/wyBQ73LXQd2+v2Hev8whX4Jwf4I/tdBQ73YaB2+O73AOEd/Rf7ABX4aAb7f/wyBQ73LXQd+RHr2gr4+vteFfwj9174I/ddBQ7459cBtPfCA/dV+OcvHfjt9wYBtCkKA7T47SQdvgr45/chAbT3UgP3F/jnJR1lCvjn9yEBtPf0A7T450cKvAqoCvji9yYBtPfQA7T5dCEK+OfXAbT3wgP3VfjnLx3408fYxwG0yNjIA/ch+NM+CooK3h344/cAAbT3DAO0+OPlHfsg9gHG9wwDtPt7Tgr7IPYBxvcMA7T7e04KrR2aCve53AH3APgUA/cA97kV+BTc/BQGDvjr9xYBtCwdA/cA+OspHfjr9xUBtPcZA/b46ysd+5D47fcGAbQpCgO0+O0kHfxRvgr8Gfjn9yEBtPdSA/cX+OclHfwZZQr7d/jn9yEBtPf0A7T450cK+5uoCvub+OL3JgG099ADtPl0IQr7qPjn1wG098ID91X45y8d/BD408fYxwG0yNjIA/ch+NM+CvuJigr7td4d++CtHfwLmgr7m/jr9xYBtCwdA/cA+OspHfxS+Ov3FQG09xkD9vjrKx38Q7wK/ChlCvxr+FT3mgG09wADw/hUFdoGmfdJBdz7ADoHDvc0f/l2AbT5dgP4Ln8/Cg73SHXd+OfcAbTd+OfcAzUdDnub+KqX9zibBvs2lwd/l/iml/c8mwgeoDf/DAmLDAv3BQr3GgvwlwwM9xSRDA35KRW+EwDNAgABAA4AIgApADEANwBEAFEAWABfAGUAawB0AIAAgwCNAJUAnQC3AMEAyQDZAOYA7QEWARwBIwEtATQBOQE/AWUBiAGgAawBswG8AegCAQIYAh8CIgI3AkQCTwJTAl0CYgJsAnYCfAKDArYC6gLvAw4DKQMxA0oDWgNiA2oDcgN5A38DhgOsA7gDwAPXA+YD7wP5BAIECgQRBBkEIQQoBDkEQARIBEsEUQRVBFoEZQRpBHEEdgR/BIgEkwSbBKQEqwSyBLoE2AT7BWoFygY0BpgGvAcZByEHRwd2B4QHlQe4B8wH8wgSCB0IPwh9CJIIzwjZCOYI/gkZCVUJZQl7CYgJkAmVCakJrwm4CeQKDgoUCioKQgpOCnUKjQqZCq4KzwrYCvoLGQs6Cz8LTAtrC3ILgAucC6ILpguxC78LyQvXC+0L+QwADAgMGgwiDCcMLQxADEsMVgxoDGsMfAyLDJwMrQy+DMUM1QzkDO0M/A0LDRoNKQ0uDTwNSg1YDV4Naw10DYENjg2bDagNtQ3ADcwN2A3kDfAN+w4GDhHLMgXoBi33JgX7FAYOFen7JgX3FAbp9yYFLgZLMkrkBQ4nHfiY9wULi/cF+Hj3BQt/8/fy8wtdh359dRt9gJCaeR8Lt42cmZ8bm5WFfJ0fC3ejn4GpGw6fcnWWaxsL9xHY9xALoHb4qncLzrK+4I4fSAYL9xr7E9c/9xw21xIL3woOLtVW9wQepbEdC/L3wPH7wAULf+g27Pf27gtJlrZ2xRucoI2Nkx/oegd3gZOoH/dWBzcKC3/zL+f38ucv8wv4cvlaBSoGC34dyArdu0r7AvsDW0s5Hwv3FP//hYAA/wB6gAALe/cF+Pp3C/ciPdv7LPsZNUv7BHYe9xeFBcGXrajKG86uZEAf+0VoBfsJdFJaLxoL9xsDeB0L1vcM1lDVC9EW9xT4qvsUBgugdvjp9wUL95t/FQuL7vfk7gsVw7a2w8NgtVNTX2FTU7dgwx/HBHR7m6Khm5uioZt7dXR7e3UfDhX7YPs59zn3Yfdf9zn3Ofdg92D3Ofs5+1/7Yfs5+zn7YB8LM2NcRk1us+Ue98z7FPvsB/sTzkD3AR4LFd/JutO8bbFYnh8L2sKtzqYfCxb3Fvla+xYGCz8Hwm1TrD4b+ydB+xD7L/sx1vsO9ycfsfMVNGPd6Ouz2uLlrT8oLGo7MB8L90oW9xgG9Pf69fv6BfcYBvc1+KoF+xcGCyP8GfsA+BkF+wMG+wD8GST4GQX7FwYLdQrv+yEgHYcdDq9oBcSXenNzeH1sa3qYpn8fTnEFC/cS//+pgAD/AFaAAAv4BHsV7uG81a8fC3voCgv7bfcN+y33YB4LFdkGQh0V2gbC95oFIwYOi/cl+xB2+Kp3C1cH7YwFC/cW96j3Ggv3RAYshUtCIhv7Hk73Afco9yTJ9wf3G/G7VDibH/cbkgX3JW0v7vtIG/tk+w/7M/tpHwv3APsqFeYG2bOnzaIf92X44gX7GQb7E/wd+xv4HQX7GAb3UvyVBbAGfWYFcoF9gWgbRwYLthaLHQvRFvcU98IG5ba90NCjWTEe+8L3FPfrB/cMS977Ch4L92oW9yQG9xD4evcQ/HoF9yUG91H5WgX7HQYLzgr3IdhQxgsV1wb3C7i39wIf+Kb7FPyiB112fmUeVgYLFeO8ZD9BW2QyH/sf93gGDvcN+Kr7FAYLdvlad+D3IQv8FxXY+BgGC/cU92H3FAsT6NtDCgv3FPsE9wQL9wYdE7z3cX8VE7pBHRN6jzQFE3z3AvfYBjcKE7wu1Vb3Ax48HQsBwfcZ91v3GQN2HQsBtvcbA30dC9DIrb+kH0cHQF9pPEZuorR+HvsYggUL+Of3IQG091IDtPjndQoOsaimsrFupWULoHb5Wnfm9wYSC/t4Fc/Br80fC4v3Bfd49wULvW2xSZAeC3/zL+f38vMLe89sdvdGwwsiHfewqx0L28bC4d9VwkQfE/S4ChPsxh0iHfeosh0LNgrf9yF5HQsVaR33xHvDHQvQHR8LzwqZHQsV7wbl9yEF+xQGC/5BTgrXCvla+xYGDsYK95QLdvhO5y/z1goL9xpk9xZf9xoL+yv3dUHV+GB3Egv3D+bL86gfC/uuByG8XPUeC3NXBu2MBQ73GfsX9xQL9xb32fcaAwv38XsV9zT13PcW9UvR+1O0H6QKvwr7KJf2KPdFGwu7ChPvQFodE/dA+HsHE/cg+xEGE+8gTh0T74BkChPvQFYdC3v3BPcZ8fey9wESxPcY9573HvsW9xYT+PfGexX3YN73MfeI92sz9xL7UPsuISj7MPsl7Cr3IB8T9NXFp8GwH/ssgldMKxtQZ6K0fB/7E4MFE/giqdpM9xQbl/fvFT1YweLivcXd371QNDNTVzofDs0K96D3GST3GRO62xb3wgb3OujM9xYfE9rsTc37A5QeE9zmlL/E4Br3GS/G+0Ee+54GE7r3vPzsFfs691z3OgbdvWhJSlhpOh8TvGn3whX7GPdQ9xgG47ttS05YajYfDvsVdvce8/fy5y/zEtH3EPsQ9xT3j/cZE9bR+yoV9xT3cwZXqMZqzxv3LNf3Efcu9y5A9xH7LB8T2kVQa1BsHxPqidoFE+b7Dwb3kvxOFTxcxvcIHxPW9wi7xtnZukr7Ah4T5vsCXEo9Hg4nHfdR9wX3avcFAfjJ9xsD+AF7FfdQ9yf3Lfdu93b7Ivcl+1X7IvsKNfsdYB/3IIMF2avHs9Qb9t4x+xCTH/yeBoxWBfuGlfcj+wz3PBuN9wUVKUnR9wt4H/gNBvsLdkRFJRsO+yD2wXkKvvcMrfcUE9dWChPbUh0T64jnBRPn+wgG9zX9kU4KexUT+vc69wLb9xvlVcwuox8T/Nuktr/VGvcNMNf7NPssLz77CH0e9xmEBb+TsK7bG9qxZ09HV3FHH04kyAYT+uLDZT8/TGo9Plas14Qf+xmFBRP8+xeS6Db3PhsOMB2+9yFUHQv46SwKtDEdE0z3nvjwFRMsKwoTTCUKExwoChOMKh0THCYKE0wnCov3Bfde2/de9wUB9zSACrb3zxX3CfvP2R37z/sJBvf1+64VIfde9xXb+xX3XssKAbT3Gcr3Gb73GQNMHQtbHRP4ax0T9EcdS4/JWdobDvgSexVfHfd5+xP3I/to+2f7FPsj+3n7efcU+yH3Zx/3BQQLMx3T9wYuHVYpChP6Rh0T9tjTJB0SqvVG9xn7F85I9xQT8dEWE/ik0QoT8oMdE/GrtAWK+Kr7FAYT9AsVE8qAKwoT0oAlChPGQCgKE+FAKh0TxUAmChPSQCcKAbT3Gcr3GQOVCgtTHRO5APeKfxUTuIBCChN4gI0yBRN5AEgdE7kAQAoTtgALoHb3lPcF93j3BQHbUgoD2xb3FveU9yUG9zru4fci9yEo4Ps6H/unBveh++kV+x/3ePcfBuS7ZEE/WmQzHw73xH8V9x7r3PcUmh/7GJEFhh2WHQugdqF2+Vl3Lh34dvcWE7jbFvcW+H4GE3j3R/x9BfcQBvdH+H0FE7j8fvcW+Vr7Qwf7WPy6+1j4ugX7QwYONh0BofijA1QKDjYd5vcGwB33AfkkLQqqCiNS5Pc89zzE5vPzxDD7PPs8UjIjHw77a973LXYBtPUD9yf7axWDHau0LJZsZJcdHg7MA/e793AV9yD3BfcG9yD3H/sF9wX7IPsg+wT7Bfsf+yD3BPsG9yAfzAQlNeDz8uHf8fLgNyQjNjYkHwugdvhO8/c4dwHRXgoDvh0OKgoBuvirA7oW5Ar3Hgb7Uvej1R0FDicd+Pl3AcJ1HQNyCg4Bovi6A7gdC/MdrQoL+yD2rPcF+Ol3Ih2/9wzxHfc4dgqgXArBHQvBCvsUBveDwAr7EqhpocUawrmx1+S+Vj6UHvcXkQX3HXwt7vs9G/s0KzX7EPsIzVn3RGMfC/g6/FEV4dHW7e1F1jU0RkApKdBA4h/aBGR0sMTEoq+ysaJnUlJ0ZmUfC/cVA6wKC6+nmqSdH0WDbmNhG3B5mKSDH0GEBQv44igdtPfQE6C0+OIV6QYTYMzkBROgIAoB2PcW99z3FgPPHQt7FfdK9wX3Ivd493n7Bfcj+0r7SvsG+yP7eft49wb7IvdKH/cFBAsT6PekFvcW96wG94z4Qk8d9438QgUT9Av3Evi/FWg/KNe3CgsT6OQdE/BKYWxDdh+I8gUT6PsMBgsW9xgG94zY90T3NPdIHvX8mvsF+BMH+yP7PDD7ZftwGg4iHbb3GQNGHQv7FPsTBjJZVTlLY8HjHvcU+xT7LAf7HNs09xLRxa7BqR4LFvhH9fsk+PAGE+gkBi1qbTYeTigGE/D3LPwR+zUGDvee9/cF+zkG+4j72wX32/sW+9oH+4f32gX7Ogb3nfv3C9IK95QL+z/g+wD3HR6x89odCwHE+GcDxBb4Z+771Ab3zPfdBfX8VCj3vQf7yPvdBQshHfeNuwoL/Dn3Ffg59xnu+xnKCgtob3xzeR/IkqS7uRunnH5ykx/VkgXGfFewURsL91sW1x0LFYsdDvcV+xT3FPsR9xEL+FT3mgHC9xoDwvhUTwqgXAoiHQPbQwoL+O33BgG09xkDtPjtLQr3JWmnalQaTlpsOChVvud+HvsYgwUL/EwV+wP3KvcD9wod6R37DPdWCwb3jveOXB0OFRPo2QbH8AXsBxPk+wwgrgYOdvg89wLzHQsiHfEdC/enBtIKC/sW/On7XPjp+xf86ftd+On7Fgs4XMv3A/cCuszeC/cG7kAGXnabvR8Lpwe0naG1HtvuIwb7BVdQKx8L7x0OBfsaBvse/CD7HvggBfsYBguL9wL3XMRS8fdQ9wIuHQv/ADOAAP//zIAA/wCTgAASC/sXkwVcfGRwUhs/Wrrphh8LdwGi+ccDohb5xwb8LvlaBQsGdW+XHR4L9zru4Pch9yIo4fs6H/slC/cbJ/cZ94H3GSf3GhPyCyQKuygdtPcZCwbCblCsQRv7GzT7APs/CxLR/wB1gAD//4qAAPcUC6B2+Vp3Adv3FgPbFvcWC0wV+0P3s4v3z/dD97IIC+wKLh0LA/lxihX5XQf9Wvv4BQsG90P7sov7z/tD+7MIC8/3rM8BuNT3PNMD914L+OnrCgYLJx33c/L3Anfv9wUSCxX3GfcG+xkGC/ijFROlQM6yvuCOHwsp0UDhHtsEZXSvxB8L+xV2+fB3Adv3EQPbC+73SHcB93j3DAP3eAv3IQb3FPdU9xT7VAULBqmdgHZ0eX9tHw6d+TgB9z33EAP4NgvR9xT3NPcP9zP3FAv3BT92953w94v3BQt79wH3qe/3JPcEEgugdvci9wX4W3cBC/ds9wX8xfsF92sL+xV29yr3BfjpdwsAAAEAAgAOAAAAAAAAAbAAAgBFAAIADAABAA8AIgABACUAKwABAC0ALQABAC8ARAABAEYASgABAEwAVAABAFgAYgABAGQAcwABAHUAeQABAHsAhAABAIYAqQABAKoAqwACAKwAtwABALkAwQABAMMAzQABAM4AzgAEAM8BAQABAQUBDgABARABHwABASEBJQABAScBMAABATIBYAABAWEBZAACAWcBZwABAWoBawABAW0BbQABAW8BcQABAXQBdwABAXoBewABAX4BgQABAY4BjgABAZEBkwABAZUBlgABAZoBmgABAZ0BoAABAaQBpAABAaYBqQABAawBrQABAa8BrwABAbEBswABAbYBugABAb4BvgABAcEBwQABAcMBxAABAdEB0QABAdQB2gABAd0B3QABAeAB4AABAeYB6wABAfIB9gAEAfgB+QAEAhwCJQACAjsCPQACAj4CPgAEAkwCTAAEAk8CVgABAlcCVwAEAnQCdAABAn4CgQACAowCjQABApQClAABApgCmgABAqECoQABAqUCpQABAqgCqQAEArgCuAABAtoC3AABAuYC+gADAAEAAgAAAAwAAAAcAAIAAgLnAusAAALtAvMABQACAAEC9AL3AAAAAAABAAAACgBuALwAAkRGTFQADmxhdG4AEgBKAAAAOgAJQVpFIABGQ1JUIABGS0FaIABGTUFIIABGTU9MIABGTkxEIABGUk9NIABGVEFUIABGVFJLIABGAAD//wADAAEAAwAEAAD//wADAAAAAgAEAAVrZXJuACBrZXJuACBtYXJrAChtYXJrAChta21rAEgAAAACAAAAAQAAAA4AAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPAAAAAQAQABEAJAJUGLQZphnKG8Qb5hw4HFYkeCT6Ju4ncCioKOQpNil4AAIACAACAAoAKgABABAABAAAAAMAGgAaABoAAQADAj4CPwJOAAEB8wAGAAIAqgAEAAAAwADuAAcACwAA//cAAAAAAAAAAAAAAAAAAAAAAAAAAP/0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/4AAAAAAAAAAAAAAAAAAAAAAAA//kAAP/cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/0//P/6f/i/+oAAAAAAAAAAP/3AAD/8QAA/+IAAP/5//r//gAAAAAAAAAA/+wAAAAAAAAAAAAAAAAAAQAJAfMB9AH2AfgB+QI+Aj8CTgJcAAIABwHzAfMABAH0AfQAAwH2AfYAAQH4AfgAAgI+Aj8ABgJOAk4ABgJcAlwABQACAC4AAgANAAMADwAUAAQAFwAYAAQAIwAjAAQAJQAsAAQATABVAAQAWABYAAQAXQBiAAQAZABoAAUAlQCaAAQAmwCbAAMAnACcAAQAnwCfAAQAogCiAAQAqQCpAAQAqgCqAAMBZwFnAAMBbgFuAAMBcwFzAAgBewF7AAQBfgF+AAQBfwF/AAUBggGCAAQBjgGQAAQBlAGUAAUBlwGXAAUBmgGaAAQBpQGlAAQBpwGnAAQB7AHsAAMB7gHuAAMB8AHwAAIB8QHxAAQB8wHzAAkB9AH0AAgB9QH1AAYB9gH2AAoB9wH3AAQB+AH4AAUB+QH5AAICDwIPAAQCTAJMAAMCVwJXAAcCXQJdAAECiQKJAAQCzwLPAAMAAgAIAAIACgXUAAEAWgAEAAAAKAOsAK4DrAOsA6wDrAOsA6wDrAOsA6wDrAC4A6wA0gHQAdAB0AHQAdAB1gOsA6wDsgSwBbIFsgWyBbgFvgW+Bb4FvgW+BcQFxAXEBcQFxAXEAAEAKAANAA4AGQAaABsAHAAdAB4AHwAgACEAIgAkAFUAWQBkAGUAZgBnAGgAewCdAJ4A6QEFAQYBBwEIAYkBrAGtAa4BrwHCAcMBxAHeAeIB4wHrAAIAGf/zARD/7AAGAM7/9gDl/+wA5//sAOj/7AFh//YCfP/2AD8Auf/uALr/7gC7/+4AvP/uAL3/7gC+/+4Av//uAMD/7gDB/+4Awv/uAMP/7gDE/+4Axf/uAMb/7gDH/+4AyP/uAMn/7gDK/+4Ay//uAMz/7gDN/+4Az//uAND/7gDR/+4A0v/uANP/7gDU/+4A1f/uANb/7gD4/+4A+f/uAPr/7gD7/+4A/P/uAP3/7gD+/+4A///uAQD/7gEB/+4BBP/uAQn/7gEK/+4BC//uAQz/7gEN/+4BDv/uAT//7gFA/+4BQf/uAUL/7gFD/+4BRP/uAUX/7gFG/+4BR//uAUj/7gFJ/+4BUP/uAVH/7gFS/+4BU//uAVr/7gFg/+4AAQAC/6AAdQCs/7kArf+5AK7/uQCv/7kAsP+5ALH/uQCy/7kAs/+5ALT/uQC1/7kAtv+5ALf/uQC5/64Auv+uALv/rgC8/64Avf+uAL7/rgC//64AwP+uAMH/rgDC/64Aw/+uAMT/rgDF/64Axv+uAMf/rgDI/64Ayf+uAMr/rgDL/64AzP+uAM3/rgDP/64A0P+uANH/rgDS/64A0/+uANT/rgDV/64A1v+uAOn/6ADq/+gA6//oAPH/6ADy/+gA8//oAPT/6AD1/+gA9v/oAPf/6AD4/64A+f+uAPr/rgD7/64A/P+uAP3/rgD+/64A//+uAQD/rgEB/64BAv/oAQP/6AEE/64BBf/oAQb/6AEH/+gBCP/oAQn/rgEK/64BC/+uAQz/rgEN/64BDv+uARX/4gEW/+IBF//iARj/4gEZ/+IBGv/iARv/4gEc/+IBHf/iAR7/4gEf/+IBM//oATT/uQE1/7kBNv+5ATf/uQE4/7kBOf+5ATr/uQE7/7kBPP+5AT3/uQE+/7kBP/+uAUD/rgFB/64BQv+uAUP/rgFE/64BRf+uAUb/rgFH/64BSP+uAUn/rgFP/7kBUP+uAVH/rgFS/64BU/+uAVr/rgFb/+IBX/+5AWD/rgABAEb/+QA/ALn/wAC6/8AAu//AALz/wAC9/8AAvv/AAL//wADA/8AAwf/AAML/wADD/8AAxP/AAMX/wADG/8AAx//AAMj/wADJ/8AAyv/AAMv/wADM/8AAzf/AAM//wADQ/8AA0f/AANL/wADT/8AA1P/AANX/wADW/8AA+P/AAPn/wAD6/8AA+//AAPz/wAD9/8AA/v/AAP//wAEA/8ABAf/AAQT/wAEJ/8ABCv/AAQv/wAEM/8ABDf/AAQ7/wAE//8ABQP/AAUH/wAFC/8ABQ//AAUT/wAFF/8ABRv/AAUf/wAFI/8ABSf/AAVD/wAFR/8ABUv/AAVP/wAFa/8ABYP/AAEAAuf/eALr/3gC7/94AvP/eAL3/3gC+/94Av//eAMD/3gDB/94Awv/eAMP/3gDE/94Axf/eAMb/3gDH/94AyP/eAMn/3gDK/94Ay//eAMz/3gDN/94Az//eAND/3gDR/94A0v/eANP/3gDU/94A1f/eANb/3gD4/94A+f/eAPr/3gD7/94A/P/eAP3/3gD+/94A///eAQD/3gEB/94BBP/eAQn/3gEK/94BC//eAQz/3gEN/94BDv/eATT/5wE//94BQP/eAUH/3gFC/94BQ//eAUT/3gFF/94BRv/eAUf/3gFI/94BSf/eAVD/3gFR/94BUv/eAVP/3gFa/94BYP/eAAEBNP/nAAEBzAAAAAEBu/+wAAEBu/+4AAIHgAAEAAAIdAxiABwAIgAA/+//4P/Z/6D/8//z/6YACv+2/9X/8P/0//H/1f/A/9n/6v/OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//b/7AAAAAD/4//6AAD/7AAAAAAAAAAAAAAAAP/zAAD/5//2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/5AAAAAP/xAAAAAAAAAAAAAAAA//UAAAAAAAAAAAAAAAAAAP/kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//YAAAAAAAD/rQAA//YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/2AAAAAAAAAAAAAAAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAP/c/5wAAAAA/7AAAP+IAAAAAAAA/+D/xP/iAAD/6//YABEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/8wAAAAD/7AAAAAD/1QAA//b/9gAA/+8AAAAA/98AAAAA//H/2f/sAAD/+v/Y/+r/7v/s//QAAAAAAAAAAAAAAAAAAAAA/7AAAAAAAAAAAAAA/+8AAAAAAAD/+f/pAAAAAAAA//kAAP+xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//MAAP/x//gAAAAA/+IAAAAAAAAAAAAA//IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP9+/+wADQAAAAAAEf+6AAD/7AAA/+z/twAAAAAAAP/h/+v/ygAA/+wAAAAAAAAAAP+lAAD/6/+c/+X/rgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//H/sP/VAAAAAAAAAAf/yQAAAAAAAP/w/8IAAP/0AAD/6gAA/6YAAAAAAAAAAAAAAAD/tgAA/+8AAAAAAAAAAAAAAAD/7gAA/9gAAAAAAAAAAP/o//IAAAAA/+//xgAAAAAAAAAA/+IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/7AAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/1AAAAAAAAAAAAAAAAAAAAAP/z//0AAP/fAAD/7gAAAAD/9gAAAAAAAP/pAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/0AAAAAD/3gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+wAAAAA/+8AAP/iAAAAAAAAAAAAAP/W/9YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//v/oAAD/9v/8//j/6f/UAAD/+P/gAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/2AAAAAD/7P/0AAD/8f/1/+//8wAA/+IAAP/z/+wAAP/4/+gAAP/2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP+6AAAAAP/O//z/6P/s//v/+P/5/9j/5QAA//T/5P/2/+L/xQAAAAD/8AAAAAAAAAAA/+MAAAAA//UAAAAAAAAAAAAAAAAAAAAAAAD/6QAA//YAAP/p/+sAAP/0AAAAAAAA/+L/2AAAAAAAAP/xAAD/ygAAAAD/sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAX/9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdAAAAAAAAAAAAAAAA/+YAAAAAAAAAAAAAAAAAAAAAAAAAAP/zAAAAAP/zAAD/8wAAAAAAAAAA//z/6wAAAAD/9QAAAAAAAAAA//AAAAAA//sAAAAAAAAAAP/x//MAAAAAAAD/7AAAAAAAAAAA/+UAAAAAAAAAAAAA/87/2wAAAAAAAAAAAAD/ygAAAAD/yAAAAAAAAAAAAAAAAAAA//b/7AAAAAAAAP/ZAAD/0f/T/+3/xQAA/+AAAP/sAAAAAP/2AAAAAAAA/+UAAAAAAAAAAAAAAAAAAAAA/7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/zAAAAAAAAAAAAAAAA//wAAAAAAAD/9wAAAAAAAAAAAAAAAAAA//AAAAAA//MAAAAA//wAAAAAAAD/+wAAAAAAAAAA/+8AAAAAAAD/+gAA//kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAKAACABUAAAAZAFYAFABYAGIAUgBkAIQAXQCGAIsAfgCVAKYAhACpAKkAlgCsAL8AlwDCAOUAqwDnAO0AzwDvAQ4A1gEQATAA9gEyAUsBFwFNAWEBMQFkAWQBRgFnAWoBRwFsAXYBSwF4AYQBVgGGAYYBYwGJAZIBZAGVAZ0BbgGfAZ8BdwGhAaEBeAGkAacBeQGpAbkBfQG7AcoBjgHNAc0BngHRAdoBnwHcAekBqQHrAewBtwHuAe4BuQHwAfIBugH6AfoBvQIPAg8BvgJMAk0BvwJ8AnwBwQKGAoYBwgKJAokBwwKhAqEBxALPAs8BxQACAKcADQANAAMADgAOAAEADwAUAAIAFQAVAAcAGQAiAAMAIwAjAAcAJAAkAAQAJQAsAAUALQAwAA8AMQAxAAsAMgA5AA8AOgA8AAsAPQA/AA0AQABEAAYARQBLAA8ATABUAAcAVQBVAAMAVgBWAAgAWABYAAcAWQBcAAkAXQBiAAcAZABoAAoAaQBzAAsAdAB5AAwAegB6AA0AewCAAAwAgQCEAA4AhgCGAAYAhwCHAA8AiACLAAkAlQCaAAUAnACcAAIAnQCeAAMAnwCfAAUAoAChAA8AogCiAAcAowCjAAsApAClAAwApgCmAA4AqQCpAAUArAC2ABIAtwC+ABQAvwC/AA8AwgDNABQAzgDOABEAzwDWABcA1wDZABMA2gDlAA8A5wDoAA8A6QDrABkA7ADtABIA7wDwABIA8QD3ABMA+AEDABQBBAEEABcBBQEIABUBCQEOABQBEAEUABYBFQEfABcBIAElABgBJgEmABkBJwEsABgBLQEwABoBMgEyABIBMwE+ABMBPwFJABcBSgFLAA8BTQFOAA8BTwFPABIBUAFSABQBUwFTABcBVAFZAA8BWgFaABQBWwFbABcBXAFdABgBXgFeABoBXwFfABMBYAFgABcBYQFhABEBZAFkABYBaAFpAAEBagFqAAoBbAFtAAoBbwFxAAMBcgFyAA0BcwFzAAEBdAF1AA8BdgF2AA0BeAF6AA8BewF7AAcBfAF8AA8BfQF9AAgBfgF+AAIBfwF/AAoBgAGBAAwBggGCAAcBgwGDAA0BhAGEABsBhgGGAA8BiQGJAAEBigGKABsBiwGNAAEBjgGOAAcBjwGPAAIBkAGQAAcBkQGSABsBlQGVAAcBlgGWABsBlwGYAAEBmQGZAA0BmgGaAAcBmwGbAAwBnAGdAA0BnwGfAAwBoQGhAA0BpAGkABsBpQGlAAcBpgGmAA8BpwGnAAcBqQGpABIBqgGrABQBrAGvABUBsAGzABQBtAG0ABkBtQG1ABQBtgG4ABcBuQG5ABkBuwG9ABcBvgG+ABQBvwG/ABMBwAHBABQBwgHCABUBwwHEABgBxQHFABQBxgHGABkBxwHKABcBzQHNABcB0QHTABQB1AHVABcB1gHWAA8B1wHXABMB2AHYABQB2QHZABcB2gHaABMB3AHcABkB3QHdABQB3gHeABgB3wHgABkB4QHhAA8B4gHjABgB5AHkABkB5QHlABcB5gHmABMB5wHnAA8B6AHoABQB6QHpABcB6wHrABgB8AHwAAIB8QHxAAcB8gHyABsB+gH6AAcCDwIPAAcCTAJMAAwCfAJ8ABEChgKGABACiQKJAAcCoQKhABsAAgCxAAIADQATAA4ADgAYAA8AFAADABUAFgAYABcAGAADABkAIgAYACMAIwADACQAJAABACUALAADAC0AOQAYADoAPAACAD0AQgABAEMAQwAYAEQARAAWAEUASwAYAEwAVQADAFYAVwAYAFgAWAADAFkAXAAYAF0AYgADAGQAaAAEAGkAcwAFAHQAeQAHAHoAegAXAHsAgAAHAIYAiwAYAJUAmgADAJsAmwATAJwAnAADAJ0AngAYAJ8AnwADAKAAoQAYAKIAogADAKMAowAFAKQApQAHAKkAqQADAKoAqgATAKsAqwAFAKwAtwAIALgAuAAYALkAzQANAM4AzgAKAM8A1gANANcA5AAYAOUA5QAUAOcA6AAUAOkA6wAMAOwA8AALAPEA9wAMAPgBAQANAQIBAwAMAQQBBAANAQUBCAAMAQkBDgANARABFAAPARUBHwARASABJQASASYBJgAVAScBLAASAS0BMAAgATIBMgALATMBMwAMATQBPgAIAT8BSQANAUoBSwAYAU0BTgAYAU8BTwAIAVABUwANAVQBWQAYAVoBWgANAVsBWwARAVwBXQASAV4BXgAgAV8BXwAIAWABYAANAWEBYQAKAWQBZAAPAWUBZgAJAWcBZwATAWgBawAYAWwBbQABAW4BbgATAW8BcQAYAXIBcgAXAXMBcwAQAXQBdwAYAXgBeAAfAXkBegAYAXsBewADAXwBfQAYAX4BfgADAX8BfwAEAYABgQAGAYIBggADAYMBgwAXAYUBigAYAYwBjAACAY0BjQABAY4BkAADAZEBkgABAZQBlAAEAZUBlQABAZcBlwAEAZgBmAABAZkBmQAXAZoBmgADAZsBmwAHAZwBnAAXAZ0BngAYAZ8BnwAHAaEBoQAXAaMBpAAYAaUBpQADAacBpwADAakBqQAIAaoBqgANAasBrwAMAbABswANAbQBtAAVAbUBtQANAbYBuQAMAbsBuwAdAbwBvQAMAb4BvgANAb8BwAAMAcEBwQANAcIBwgAPAcMBxAASAcUBxQANAcYBxgAVAccBxwARAcgBygAMAcwBzQAMAc4BzgAPAc8BzwAdAdAB0AAMAdEB0wANAdQB1QAMAdYB1gAUAdcB1wAYAdgB2AAMAdsB2wAYAdwB3AAVAd0B3QANAd4B3gASAd8B3wAVAeAB4QAYAeIB4wASAeQB5AAVAeUB5QARAeYB5wAYAegB6AANAekB6QAMAesB6wASAewB7AATAe4B7gATAfEB8QADAfMB8wAbAfQB9AAQAfUB9QAeAfcB9wADAfgB+AAEAg8CDwADAj4CPwAaAkUCRQAOAkkCSQAJAkwCTAATAk0CTQAHAk4CTgAaAlQCVAAOAlcCVwAhAl0CXQAZAnwCfAAKAoYChgAcAokCiQADAqECoQABAs8CzwATAAQAAAABAAgAAQ7IAAwAAg7oADYAAQATAk8CUAJRAlICUwJUAlUCVgJ0AowCjQKUApgCmQKaAqECpQLaAtsAEwBOAAAAVAAAAFoAAABgAAAAZgBsAHIAAAB4AH4AhAAADxIAAACKAAAAkAAAAJYAnAs4Cz4AogAACYgJggoMChIAqAAAAK4AAACuAAAAAQCPAhIAAQCTAhIAAQEvAhIAAQBvAhIAAQBcAhIAAQBvABIAAQEcAhIAAQESAhIAAQEtACIAAQBrAhIAAQG7AhIAAQC+AhIAAQFkAsYAAQFjAAAAAQETAhIAAQB8AhIAAQGkAhIABAAAAAEACAABD0oADAABD1gAEgABAAECuAABAAQAAQIcAAAABAAAAAEACAABDbIADAACDdIAkAABAEABZwFqAWsBbQFvAXABcQF0AXUBdgF3AXoBewF+AX8BgAGBAY4BkQGSAZMBlQGWAZoBnQGeAZ8BoAGkAaYBpwGoAakBrAGtAa8BsQGyAbMBtgG3AbgBuQG6Ab4BwQHDAcQB0QHUAdUB1gHXAdgB2QHaAd0B4AHmAecB6AHpAeoB6wBADfAAAAECAAABAgAAAQgAAAhmCGwIZghsCGYIbAEgASYBIAEmDgwAAA4MAAAN8AAACIQIighgCMYIKggkASwAAAEsAAAIGAgSCHgIfgh4CH4HygAAAQ4BFA3wARoIhAiKDgwAAA3wAAAInAiiCJwIogh4CH4BIAEmCIQIigEsAAAJ7AmkATIAAAEyAAABOAAACaoJzgmqCc4JqgnOAVwAAAFcAAABXAAAAVYAAAFWAAAJyAnOCcgJzgnmAAAJ5gAACVAJSgm2AAAJtgAACcIAAAjwAAABPgFEAUoBUAjwAAAJyAnOAVYAAAkCAAAJjAl6COQI6gFcAAAJyAnOCeYAAAABAU0CxgABAYICxgABAooCxgABAooAAAABAWcAAAABAWoCxgABAXQAAAABASsCxgABAQsCFgABATECFgABAhgCFgABAhgAAAABAV8CFgABAUQAAAABATQCFgABAScCFgAEAAAAAQAIAAEM8AAMAAEM9gAUAAEAAgF/AecAAgj2CQgABAAAAAEACAABDQoADAABDRgALAABAA4BZwFvAXABcQGRAZIBpAGpAbEBsgGzAdQB1QHoAA4M/gqMCowKjAqSCpIKkgqwCrYKtgq2CrwKvAqkAAQAAAABAAgAAQ0KAAwAAQ0WABIAAQABAecAAQsSAAQAAAABAAgAAQsmAAwAAgtGAJQAAgAWAAIADAAAAA8AIgALACUAKwAfAC0ALQAmAC8ARAAnAEYASgA9AEwAVABCAFgAYgBLAGQAcwBWAHUAeQBmAHsAhABrAIYAqQB1AKwAtwCZALkAwQClAMMAzQCuAM8BAQC5AQUBDgDsARABHwD2ASEBJQEGAScBMAELATIBYAEVAtwC3AFEAUULYAAAC2AAAAtgAAALYAAAC2AAAAtgAAALYAAAC2AAAAtgAAALYAAAC2AAAAXQBjYF0AY2BdAGNgXQBjYF0AY2BdAGNgUWBRwFFgUcBSIFKAUiBSgF1gXcBdYF3AXWBdwF1gXcBdYF3AXWBdwF1gXcBdYF3AXWBdwF1gXcBjAF4gYwBeIGMAXiBjAF4gYwBS4GMAXiBjAF4gtgAAALYAAABegF7gU0Be4F6AXuBegF7gXoBe4F6AXuBegF7gXoBe4F6AXuBegF7gU6AAAFOgAABToAAAVGBUAFRgVABUYFTAXoBVIF6AVSBegFUgXoBaYFWAVeBawFZAWsBWQFrAVkBawFsgWsBWQF9AX6BfQF+gX0BfoF9AX6BfQF+gX0BfoF9AX6BWoFcAX0BfoGMAY2BYgFdgWIBXYFiAV2BYgFfAWIBYIFiAWCBYgFggWIBYIFiAWCBYgFjgWaBZQFmgWUBZoFlAWaBZQFmgWgC3wLggt8C4ILfAuCC3wLggt8C4ILfAuCC3wLggt8C4ILfAuCC3wLggt8C4IGAAYGBgAGBgYABgYGAAYGBgAGBgYMBhIGDAYSBgwGEgYMBhIGDAYSBgwGEgYYBh4GGAYeBhgGHgYYBh4F6AWmBawFsgW+BbgFvgW4Bb4FuAW+BcQGJAYqBiQGKgYkBioGJAYqBiQGKgYkBioGJAYqBiQGKgYkBioGMAY2BjAGNgYwBjYGMAXKBjAGNgYwBjYLYAAABdAGNgXWBdwF1gXcBjAF4gXoBe4F6AXuBfQF+gt8C4IGAAYGBgwGEgYYBh4GJAYqBiQGKgYwBjYHXAcUB1wHFAdcBxQHXAcUB1wHFAdcBxQHXAcUB1wHFAdcBxQHXAcUB1wHFAY8BkIHOAc+BzgHPgc4Bz4HOAc+BzgHPgc4Bz4GSAZOBkgGTgZIBk4HGgc+BxoHPgcaBz4HGgc+BxoHPgcaBz4HGgc+BxoHPgcaBz4HGgc+BlQGWgcgAAAHIAAAByAAAAcgAAAHIAAAByAAAAcgAAAHIAAABnIAAAZgAAAGcgAAByYAAAcmAAAHJgAAByYAAAcmAAAHJgAAByYAAAcmAAAHJgAAByYAAAZmAAAHMgAABzIAAAcyAAAHMgAABnIGbAZyBmwGcgZ4BtIMxgbSDMYG0gzGBtIG2AZ+BoQGigaQBt4GlgbeBpYG3gaWBt4G5AbeBpYG3gaWBzgHPgc4Bz4HOAc+BzgHPgc4Bz4HOAc+BzgHPgc4Bz4HOAc+BpwGogauBqgGrgaoBq4GqAauBrQGwAa6BsAGugbABroGwAa6BsAGugbABsYLngukC54LpAueC6QLngukC54GzAdEB0oHRAdKB0QHSgdEB0oHRAdKB0QHSgdEB0oHRAdKB0QHSgdEB0oHRAdKB1AHgAdQB4AHUAeAB1AHgAdQB4AHVgAAB1YAAAdWAAAHVgAAB1YAAAdWAAAHXAd0B1wHdAdcB3QHXAd0BtIG2AbeBuQHYgdoB2IHaAdiB2gHYgdoB2IHaAdiB2gHYgdoB2IHaAdiB2gHYgdoB2IHaAduB3QHbgd0B24HdAduB3QHbgd0B24HdAduB3QHbgd0B24HdAduB3QHbgd0BvwG6gb8BuoG8Ab2BvwHAgcIBw4HXAcUBzgHPgcaBz4HGgc+ByAAAAcmAAAHJgAAByYAAAcmAAAHLAAABzIAAAc4Bz4HRAdKB1AHgAdWAAAHXAd0B2IHaAduB3QHegeAAAEBRQLGAAEBSwAAAAEBlQLGAAEBmwAAAAEBev8ZAAEDCgLGAAEB6ALGAAEBYgAAAAEBVALGAAEBYv8ZAAEBOQAAAAEAswLGAAEBXAAAAAEBdQAAAAEBgALGAAEBgAAAAAEBZQAAAAEBZf8ZAAEBVgAAAAEBVgLGAAEBV/8ZAAEBMwAAAAEBMwLGAAEBM/8ZAAEBOv8ZAAEBfwLGAAEBdf8ZAAEBUwAAAAEBUwLGAAEBU/8ZAAEBe/8ZAAEBeALGAAEBQALHAAEBQQAAAAEBegAAAAEAkQLGAAEAkQAAAAEBfgLGAAEBfgAAAAEB4gLGAAEB4gAAAAEBUQLGAAEBUQAAAAEBKgLGAAEBKgAAAAEA5QLGAAEA5QAAAAEBewLGAAEBewAAAAEClwIUAAEClwAAAAEBOAIWAAEBOAAAAAEBIwIWAAEBIwACAAEArQLLAAEBsAIWAAEBNwAAAAEAhgLLAAEBOP8ZAAEAiQLGAAEAtAAAAAEBvgIWAAEBvgAAAAEBLQAAAAECvQIUAAECvQAAAAEAhgAAAAEA3AIWAAEAh/8ZAAEBHQAAAAEBGwISAAEBHv8ZAAEA/f8ZAAEAhgLGAAEAsv8ZAAEBLQIWAAEBLf8ZAAEAkAAAAAEAjgLGAAEAjgAAAAEAkALGAAEAkP8ZAAEA2wLGAAEA2wAAAAEBHgAAAAEBMAIUAAEBLwIWAAEAhgIWAAEBowIWAAEArQIWAAEBMAIWAAEBMAAAAAEBKAIWAAEBKAAAAAEBpAIWAAEBHgIWAAEBJQIWAAEBGgIWAAEBGQAAAAEBLgIWAAEBJQAAAAEBpALGAAEBpAAAAAQAAAABAAgAAQQ8AAwAAQRCAC4AAgAFAGQAaAAAAL8AwQAFARABFAAIAUoBTgANAtwC3AASABMAKAAoACgAKAAoAC4ALgAuBCoEKgQqBCoEKgA6ADoANAA6AEAARgABATMBTgABATgBCwABAI4BCQABAJABCQABANsBCQABAaQBdQAEAAAAAQAIAAED9gAMAAEEBACOAAIAFQACAAwAAAAZACIACwAwADkAFQBpAHMAHwCMAJQAKgCbAJsAMwCdAJ4ANACgAKEANgCjAKMAOACnAKgAOQCsALcAOwDDAM0ARwDaAOQAUgEBAQEAXQEVAR8AXgE0AUkAaQFPAU8AfwFRAVIAgAFUAVgAggFbAVsAhwFfAWAAiACKA4gDiAOIA4gDiAOIA4gDiAOIA4gDiAEWARYBFgEWARYBFgEWARYBFgEWARwBHAEcARwBHAEcARwBHAEcARwDmgOaA5oDmgOaA5oDmgOaA5oDmgOaASIBIgEiASIBIgEiASIBIgEiA4gBFgEWARwBHAOaASIBIgE6AToBOgE6AToBOgE6AToBOgE6AToBKAFAAUABQAFAAUABQAFAAUABQAFAAS4BRgFGAUYBRgFGAUYBRgFGAUYBRgFGATQBTAFMAUwBTAFMAUwBTAFMAUwBTAFMAVIBUgFSAVIBUgFSAVIBUgFSAVIBUgFYAVgBWAFYAVgBWAFYAVgBWAFYAVgBOgFAAUABRgFGAUYBRgFGAUwBUgFYAAECNgAAAAEA0gAAAAEBngAAAAEDMAAeAAEAiwH4AAEDVQAeAAECNwAAAAEByAAeAAEAxgAAAAECDgAAAAECAwAAAAECKQAAAAQAAAABAAgAAQJUAAwAAQJgAC4AAgAFAL8AwQAAAOwA8AADARABFAAIATIBMgANAUoBTgAOABMAKAAoACgANAA0ADQANAAuAkgCSAJIAkgCSAA0AEAAQAA6AEAARgABAj8CFgABAN8CEgABAN0CEgABAOQCEgABAOYCEgABATECEgAFAAAAAQAIAAEADAAiAAIALADIAAIAAwLmAusAAALtAvcABgL5AvoAEQABAAMAqgCrAWQAEwAAAE4AAABUAAAAlgAAAFoAAABgAAAAZgAAAGwAAABsAAAAcgAAAHgAAAB+AAAAhAAAAIoAAQIOAAECDgABAhQAAQIaAAAAkAAAAJYAAQDBAhYAAQDMAhIAAQCuAhIAAQBjAhIAAQCrAhIAAQDHAhIAAQDBAhIAAQCNAhIAAQDRAhIAAQC6AhIAAQBmAhIAAQDJAhIAAQBsAhIAAwAIACQARgACAAoAAAAQABYAAQFnAsYAAQOzAsYAAQOzAAAAAgAKABAAFgAcAAEBXQLGAAEBXQAAAAEDoALGAAEDoAAAAAIACgAQABYAHAABANcCFgABAPwAAAABAjQCFgABAlkAAAAFAAAAAQAIAAEADACgAAEAEgAeAAEAAQL4AAEAAAAGAAEBLQFOAAEABAACAAYADAABANcBCwABAjQBCwAFAAAAAQAIAAEADAASAAEAGgAgAAEAAQL3AAEAAgCqAKsAAQAAALgAAgAGABgAAgAGAAwAAQK2AAAAAQRsAAAAAgAGAAwAAQHEAAAAAQRZAAAABQAAAAEACAABAAwAEgABABgAJAABAAEC7AABAAEBZAABAAAABgABACMCEgABAAQAAgAGAAwAAQELAoEAAQJnAoEABgAQAAEACgABAAEADAAWAAEAHgBCAAIAAQL0AvcAAAABAAIC9AL1AAQAAAASAAAAEgAAABgAAAAeAAEAbwAAAAEAsgAAAAEA0QAAAAIABgAGAAEAb/8ZAAEAAAAKAmID0AACREZMVAAObGF0bgBAAAQAAAAA//8AFAAAAAEAAwAEAAUADwAQABEAEgATABQAFQAWABcAGAAZABoAGwAcAB0AOgAJQVpFIABoQ1JUIACYS0FaIADITUFIIAD4TU9MIAEoTkxEIAFYUk9NIAGIVEFUIAG4VFJLIAHoAAD//wAUAAAAAgADAAQABQAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUABgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUABwAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUACAAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUADQAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUADAAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUACwAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUACQAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUACgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeYWFsdAC2Y2NtcAC8Y2NtcAC8ZGxpZwDEZnJhYwDKbGlnYQDQbG9jbADWbG9jbADWbG9jbADWbG9jbADWbG9jbADWbG9jbADcbG9jbADcbG9jbADibG9jbADob3JkbgDucG51bQD2c2luZgD8c3MwMQECc3MwMgEMc3MwMwEWc3MwNAEgc3MwNQEqc3MwNgE0c3MwNwE+c3MwOAFIc3MwOQFSc3VicwFcc3VwcwFidG51bQFoAAAAAQAAAAAAAgABAAIAAAABAA8AAAABAAoAAAABABAAAAABAAMAAAABAAQAAAABAAUAAAABAAYAAAACAAsADAAAAAEADQAAAAEACAAGAAEAEQAAAQAABgABABIAAAEBAAYAAQATAAABAgAGAAEAFAAAAQMABgABABUAAAEEAAYAAQAWAAABBQAGAAEAFwAAAQYABgABABgAAAEHAAYAAQAZAAABCAAAAAEABwAAAAEACQAAAAEADgAdADwEVASaBMAE1AT2BRwFUgVSBWAFbgYCBkAGYgZ6BpIGwAdQB14HdgeOB6YH1ggACBgI4gj4CRAJKgADAAAAAQAIAAEDHgB3APQA+AD8AQABBAEIAQwBEAEUARgBHgEiASYBKgEuATQBOgE+AUIBRgFKAU4BUgIaAVYBWgFeAWIBZgFqAW4BcgF2AXoBfgGCAYYBigGOAZYBnAGiAagBrgG2AbwBwgHIAc4B1AHYAdwB4AHkAeoB7gHyAfYB+gIAAgQCCAIMAhICFgIaAh4CIgImAioCLgIyAjYCOgI+AkICTAJWAl4CZgJuAnYCfgKGAo4ClgKaAp4CogKmAqoCrgKyArYCugK+AsICxgLKAs4C0gLWAtoC3gLiAuYC6gLuAvIC9gL6Av4DAgMGAwoDDgMSAxYDGgABAWUAAQCbAAEAnAABAJ0AAQCeAAEAlQABAJYAAQCXAAEAmAACAJkAnwABAJoAAQCMAAEAjQABAI4AAgCPAKAAAgCQAKEAAQCRAAEAkgABAJMAAQCUAAEAOwABAIYAAQCHAAEAogABAIgAAQCJAAEAigABAIsAAQBiAAEAaAABAKMAAQCkAAEApQABAKYAAQCnAAEAqAABAKkAAwFlATQBPwACATUBQAACATYBQQACATcBQgACATgBQwADATkBRAFPAAIBOgFFAAIBOwFGAAIBPAFHAAIBPQFIAAIBPgFJAAEBUAABAVEAAQFSAAEBUwACAN8BVAABAVUAAQFWAAEBVwABAVgAAgDnAVkAAQFKAAEBSwABAUwAAgEyAU0AAQFOAAEBMwABAWYAAQFaAAEBDgABARQAAQFbAAEBXAABAV0AAQFeAAEBXwABAWAABAImAjACEQIPAAQCJwIxAhICEAADAigCMgITAAMCKQIzAhQAAwIqAjQCFQADAisCNQIWAAMCLAI2AhcAAwItAjcCGAADAi4COAIZAAMCLwI5AhoAAQHxAAEB8gABAfMAAQH0AAEB9QABAfYAAQH3AAEB+AABAfkAAQH6AAECTgABAk8AAQJQAAECUQABAlIAAQJTAAECVAABAlUAAQJWAAEC0AABAtEAAQLSAAEC0wABAtQAAQLVAAEC1gABAtcAAQLYAAEC2QABAvkAAQL6AAEC9QABAwgAAQMJAAEAdwACAAcAFAAdAB4AJQAmACgAKQAqACsAMAAyADMANAA1ADYANwA4ADkAOgBDAEkATABPAFkAWgBbAFwAYABnAG0AeAB+AIQAjwCQAJkArACtAK4ArwCwALEAsgCzALQAtQC2AL4AxwDIANQA2gDeAN8A4gDkAOUA7ADtAO4A7wDwAPUA+AD7AQwBEwEZASQBKgEwATkBRAHxAfIB8wH0AfUB9gH3AfgB+QH6AhECEgITAhQCFQIWAhcCGAIZAhoCPgJAAkECQgJDAkQCRQJGAkcCuwK8Ar0CvgK/AsACwQLCAsMCxALnAugC9AL7AvwABgAQAAIADAAeAAAAAwAAAAEAbgABACoAAQAAABoAAwAAAAEAEgABABgAAQAAABoAAQABAOUAAgACAucC6wAAAu0C8wAFAAIAAAABAAgAAQAKAAIAEgAYAAEAAgFiAWMAAgDOANoAAgDOAOwAAQAAAAEACAABAAYABQABAAEA2gABAAAAAQAIAAIADgAEAGIAaAEOARQAAQAEAGAAZwEMARMAAQAAAAEACAACABAABQCGAIcBMgEzAvUAAQAFAEMASQDvAPUC9AAGAAAAAQAIAAED/gACAAoAHAABAAQAAQAyAAEAAAABAAAAGwABAAQAAQDcAAEAAAABAAAAGwABAAAAAQAIAAEBLgA1AAEAAAABAAgAAQEgAD8ABAAAAAEACAABAH4ABQAQAEQAUABmAHIABQAMABQAHAAkACwCHAADAkwB8wIdAAMCTAH0Ah8AAwJMAfUCIQADAkwB9gIiAAMCTAH5AAEABAIeAAMCTAH0AAIABgAOAiAAAwJMAfUCIwADAkwB+QABAAQCJAADAkwB+QABAAQCJQADAkwB+QABAAUB8gHzAfQB9gH4AAYAAAACAAoAJAADAAEAfAABABIAAAABAAAAHAABAAIAAgCsAAMAAQBiAAEAEgAAAAEAAAAcAAEAAgBMAPgABAAAAAEACAABABQAAQAIAAEABAKUAAMA+AI+AAEAAQBGAAEAAAABAAgAAQAG/+AAAgABAhECGgAAAAEAAAABAAgAAQAGACAAAgABAfEB+gAAAAQACAABAAgAAQAeAAIACgAUAAEABACqAAIAMAABAAQAqwACADAAAQACAAIAaQAEAAgAAQAIAAEAfAAEAA4AKAAyAFIAAwAIAA4AFAFhAAIAzgFiAAIA2gFjAAIA7AABAAQBZAACARAAAwAIABIAGgI7AAQCVwJXAqgCPAADAlcCqAI9AAICqAAEAAoAFAAcACQCgAAEAlcCVwJXAn8AAwJXAlcCgQADAlcCqAJ+AAICVwABAAQAzgEQAlcCqQABAAAAAQAIAAEAFACIAAEAAAABAAgAAQAGAJMAAgABAKwAtgAAAAEAAAABAAgAAQAGAF4AAgABAOwA8AAAAAEAAAABAAgAAQAGAC8AAgABAFkAXAAAAAEAAAABAAgAAgAYAAkAjACNAI4AjwCQAJEAkgCTAJQAAgACADAAMAAAADIAOQABAAEAAAABAAgAAgASAAYAlQCWAJcAmACZAJoAAQAGACUAJgAoACkAKgArAAEAAAABAAgAAQAGABUAAgABArsCxAAAAAEAAAABAAgAAgBiAC4AmwCcAJ0AngCfAKAAoQCiAKMApAClAKYApwCoAKkBTwFQAVEBUgFTAVQBVQFWAVcBWAFZAVoBWwFcAV0BXgFfAWACTgJPAlACUQJSAlMCVAJVAlYC+QL6AwgDCQABAC4ABwAUAB0AHgAqADQANQBPAG0AeAB+AIQAjwCQAJkAsQC+AMcAyADUANoA3gDfAOIA5ADlAPsBGQEkASoBMAE5AUQCPgJAAkECQgJDAkQCRQJGAkcC5wLoAvsC/AABAAAAAQAIAAEABgAeAAEAAgHxAfIAAQAQAAEACgAAAAEABgABAAEAAgDaAOUAAQAAAAEACAACAAoAAgA7AOcAAQACADoA5QABAAAAAQAIAAIADgAEAWUBZgFlAWYAAQAEAAIATACsAPg="}
\ No newline at end of file
diff --git a/apps/v4/app/og/geistmono-regular-otf.json b/apps/v4/app/og/geistmono-regular-otf.json
new file mode 100644
index 00000000000..e5285e5fdea
--- /dev/null
+++ b/apps/v4/app/og/geistmono-regular-otf.json
@@ -0,0 +1 @@
+{"base64Font":"T1RUTwAMAIAAAwBAQ0ZGINMvNaQAABocAADLSkdERUaOgIu5AADlaAAAAgJHUE9TaW4+HAAA52wAABCMR1NVQtVEIxcAAPf4AAANhE9TLzIF4h4/AAAN8AAAAGBjbWFwOpoBDgAAEcAAAAg6aGVhZC6pukoAAADUAAAANmhoZWEPQwwPAAANzAAAACRobXR4VrH9cAAAAQwAAAy+bWF4cAM5UAAAAADMAAAABm5hbWVaa41VAAAOUAAAA3Bwb3N0/58AMgAAGfwAAAAgAABQAAM5AAAAAQAAAAEzM2trAy5fDzz1AAMD6AAAAADiJyGbAAAAAOInIZv/yv8JC3oD9AAAAAcAAgAAAAAAAAHbAFgCWAAAAlgAGgJYABoCWAAaAlgAGgJYABoCWAAaAlgAGgJYABoCWAAaAlgAGgJYABoCWAAKAlgAWgJYACYCWAAmAlgAJgJYACYCWAAmAlgAJgJYAFoCWABaAlj/9gJY//YCWABaAlgAWgJYAFoCWABaAlgAWgJYAFoCWABaAlgAWgJYAFoCWABaAlgAHAJYAGQCWAAmAlgAJgJYACYCWAAmAlgAJgJYACYCWAAmAlgAFAJYAEQCWAAYAlgARAJYAFACWABQAlgAUAJYAFACWABQAlgAUAJYAFACWABQAlgAUAJYACgCWAAoAlgAKAJYADwCWAA8AlgAPAJYAGQCWABkAlgAZAJYAGQCWP/mAlgAPAJYAEYCWABGAlgARgJYAEYCWABGAlgARgJYACYCWAAmAlgAJgJYACYCWAAmAlgAJgJYACYCWAAmAlgAJgJYAAcCWABaAlgAWgJYACYCWABGAlgARgJYAEYCWABGAlgALAJYACwCWAAsAlgALAJYACwCWAAsAlgAJAJYACgCWAAoAlgAKAJYACgCWAAoAlgAPAJYADwCWAA8AlgAPAJYADwCWAA8AlgAPAJYADwCWAA8AlgAPAJYADwCWAAYAlgAKAJYACgCWAAoAlgAKAJYACgCWAAyAlgALAJYACwCWAAsAlgALAJYACwCWAAsAlgAMgJYADICWAAyAlgAMgJYAQACWABkAlgARgJYAEcCWABHAlgARwJYAEcCWAAUAlgAFAJYABQCWAAUAlgAFAJYABQCWAAaAlgAJgJYAFoCWABaAlgAJgJYAFACWABQAlgAJgJYADwCWAAoAlgALAJYADICWAAUAlgANgJYADYCWAA2AlgANgJYADYCWAA2AlgANgJYADYCWAA2AlgANgJYADYCWAANAlgAUAJYAEYCWABGAlgARgJYAEYCWABGAlgARgJYADICWAAyAlgAMgJYADoCWABCAlgAQgJYAEICWABCAlgAQgJYAEICWABCAlgAQgJYAEICWABCAlgAPAJYAEYCWAA8AlgAPAJYADwCWAA8AlgAPAJYADwCWAA8AlgAPAJYAGQCWAAZAlgAAgJYAFACWABQAlgAUAJYAFACWABQAlgAUAJYAFACWABQAlgAUAJYAFACWABuAlgAbgJYAG4CWABuAlgAWgJY//kCWABaAlgAUAJYAFACWABQAlgAUAJYAGQCWAAoAlgAYAJYAGACWABgAlgAYAJYAGACWABgAlgAOgJYADoCWAA6AlgAOgJYADoCWAA6AlgAOgJYACMCWAA6AlgACgJYAFACWABQAlgAMgJYAFoCWABaAlgAWgJYAFoCWABQAlgAUAJYAFACWABQAlgAUAJYAFACWABMAlgAMgJYADICWAAyAlgAMgJYADICWABaAlgAWgJYAFoCWABaAlgAWgJYAFoCWABaAlgAWgJYAFoCWABaAlgAWgJYADYCWAAUAlgAFAJYABQCWAAUAlgAFAJYADYCWAA2AlgANgJYADYCWAA2AlgANgJYADYCWABSAlgAUgJYAFICWABSAlgBAAJYAFACWABgAlgATgJYAE4CWABOAlgATgJYAE4CWABOAlgATgJYAE4CWABOAlgATgJYAE4CWAA2AlgANgJYADYCWAA2AlgANgJYADYCWAA2AlgANgJYADYCWAA2AlgANgJYAFACWABQAlgAUAJYAFACWABPAlgANgJYAEYCWABCAlgAQgJYADwCWABQAlgAUAJYAFACWABQAlgAbgJYADoCWABaAlgAFAJYADYCWABSAlgATgJYADYCWACPAlgAkQJYABoCWABQAlgAWgJYAGQCWABkAlgAZAJYABMCWAAMAlgAWgJYAFoCWABaAlgABwJYACECWABGAlgARgJYADoCWAA6AlgAFAJYADwCWABEAlgAJgJYAEYCWABaAlgAJgJYACgCWAA0AlgANAJYABkCWAAyAlgAMgJYADwCWAA3AlgAIwJYAEYCWABaAlgAIwJYAB4CWAAFAlgAFAJYACwCWAAmAlgALQJYAFACWABQAlgAKAJYAAUCWAAUAlgALgJYAAUCWAAPAlgAAQJYACYCWAAOAlgABwJYADACWAA1AlgALAJYACsCWAAyAlgAIwJYAEYCWABQAlgAHAJYAEYCWAAmAlgANAJYADYCWAA6AlgAWgJYAJUCWACVAlgAlQJYACkCWAAUAlgAQgJYAEICWABCAlgACwJYAFACWABeAlgAXgJYAF4CWABbAlgAWwJYABkCWAAkAlgAWwJYADoCWABaAlgAUAJYAEYCWABDAlgANgJYADYCWAAXAlgANgJYAEUCWABaAlgAOAJYADgCWABaAlgAUQJYACMCWAAKAlgABQJYABQCWABQAlgAPQJYAD4CWABQAlgAUAJYAG4CWAAZAlgAFAJYAFECWAAZAlgACgJYAA4CWAA6AlgAJQJYAAsCWABaAlgAWwJYADYCWAA2AlgANgJYAEUCWABkAlgAUAJYADwCWABeAlgAOgJYADYCWAAaAlgACQJYADsCWAAQAlgAMwJYADICWAA8AlgAMgJYADICWAAoAlgAPAJYADICWAA8AlgAMgJYADICWAAPAlgADwJYAA8CWAAPAlgADwJYAA8CWAAPAlgADwJYAA8CWAAPAlgADwJYAA8CWAAPAlgADwJYAA8CWAAPAlgADwJYAA8CWAAPAlgADwJYADACWAANAlgAKAJYACgCWAAUAlgAKAJYABECWAAoAlgAKAJYABQCWAARAlgAKAJYAJUCWACzAlgAoAJYAKACWACEAlgApQJYAKUCWACmAlgAnwJYAKgCWACVAlgAswJYAKACWACgAlgAhAJYAKUCWAClAlgApgJYAJ8CWACoAlgAAASwAHwHCACHCWAAPgcIAD4EsAA+BwgAPgSwAD4HCAA+BLAAzQSwAIwHCAGLBwgBAgSwAKIEsADXBLABDgSwAD4HCAA+BLAAaAcIAHwHCADWBLAAKgcIATQEsABsBwgAbAJYAPACWADwAlgA8AJYAPACWAA3AlgA8AJYAPACWABDAlgAQwJYAPACWADDAlgAggJYAKECWAA2AlgAbAJYAGwCWADwAlgA8AJYAPACWAA3AlgA8AJYAPACWABAAlj//wJYAPACWACWAlgAZAJYACgCWABQAlgABgJYAL0CWACXAlgAXwJYAGoCWACpAlgAjgJYAKsCWACmAlgAuQJYAI0CWACqAlgAfwJYAFQCWABWAlgAsAJYAHkCWACqAlgAfwJYALkCWACWAlgA9gJYAJ4CWACcAlgAngJYAOkCWAD2AlgATwJYAE8CWADHAlgAoQJYAKsCWAEAAlgAMgJYAFoHCAAcBLABJQlgATcHCAGDBwgBNQSwATQEsACzBLAAoQcIAD4HCAA+BLAAPgcIAD4HCAA+BwgAPgSwAD4HCAAlBLABBAcIAD4HCAA+BwgAPgSwAD4HCAA+BwgAPgcIAB4JYAA+C7gAPgSwAKAHCADlCWAA5gcIADwEsAD7BwgAPglgAD4HCAA+BwgAPgSwAJEHCAA+BwgAPgSwAIYHCACvBwgAwQcIAOoEsADPBLAAhASwAH0EsACGBLAA2gcIAMEEsAAjAlgACAJYABYCWAAeAlgAKgJYAFACWAAEAlgAMAJYADACWAARAlgAlgJYAN4CWACOAlgBAwJYAQUCWABrAlgAawJYAAUCWAAmAlgATwJYAA4CWAAEAlgACAJYAAQCWAA0AlgARgJYADgCWAAvAlgACgJYABYCWAAhAlgAJQJYABQCWAAvAlgALAJYAD4CWAA+AlgAfgJYAD4CWABQAlgAUAJYAEkCWABIAlgAPgJYAD4CWAA+AlgATwJYAE4CWABaAlgAcwJYAAcCWABuAlgADwJYABECWABGAlgAEQJYACcCWABfAlgADQJYAAQCWAAdAlgAGAJYABECWAAlAlgAHQJYADkCWAAHAlgARgJYAAICWACAAlgAEgJYABQCWAAUAlgAEQJYABECWAASAlgAHgJYAB4CWAAOAlgAEgJYAAICWACLAlgAJgJYABECWAAlAlgAiwJYADkCWAAKAlgAOAJYAAgCWACLAlgAEAJYABACWAACAlgATwJYAAgCWP/KAlgACAJYAJUCWAAIAlgALAJYAAgCWAAzAlgBAQJY/9gCWAEBAlgBAQJYAQEAAACgAAAAoAAAAQAAAADcAAAA3AAAAJYAAAD0AAAAoAAAAKAAAACgAAAA0AAAAI4AAACmAAAA8AAAAPAAAADwAAAAwQAAANQAAABkAAAAnAAAAPYCWACgAQAA3ADcAJYAoACgAKAA0ACOAKYAwQDUAJwA9gDxANwBAAAPAA8AAAABAAADmP8kAGQLuP/K/gwLegABAAAAAAAAAAAAAAAAAAADJgAEArMBkAAFAAgCigJYAAAASwKKAlgAAAFeADIBCQAAAAAAAAAAAAAAAKEAAv8AAa37AAAAAAAAAABWUkNMAMAAIPj/A5j/JABkA/QBAiAAAJcAAAAAAhICxgAAACAABQAAABQA9gADAAEECQABABQAAAADAAEECQACAA4AFAADAAEECQADADgAIgADAAEECQAEACQAWgADAAEECQAFAD4AfgADAAEECQAGACIAvAADAAEECQAIAJAA3gADAAEECQAJAGABbgADAAEECQALADABzgADAAEECQAMADABzgADAAEECQAQABQAAAADAAEECQARAA4AFAADAAEECQEAABIB/gADAAEECQEBAAoCEAADAAEECQECAAoCGgADAAEECQEDAAoCJAADAAEECQEEAAoCLgADAAEECQEFABQCOAADAAEECQEGABYCTAADAAEECQEHABgCYgBHAGUAaQBzAHQAIABNAG8AbgBvAFIAZQBnAHUAbABhAHIAMQAuADIAMAAwADsAVgBSAEMATAA7AEcAZQBpAHMAdABNAG8AbgBvAC0AUgBlAGcAdQBsAGEAcgBHAGUAaQBzAHQAIABNAG8AbgBvACAAUgBlAGcAdQBsAGEAcgBWAGUAcgBzAGkAbwBuACAAMQAuADIAMAAwADsARwBsAHkAcABoAHMAIAAzAC4AMgAgACgAMwAyADQAOQApAEcAZQBpAHMAdABNAG8AbgBvAC0AUgBlAGcAdQBsAGEAcgBCAGEAcwBlAG0AZQBuAHQALgBzAHQAdQBkAGkAbwAsACAAVgBlAHIAYwBlAGwALAAgAEEAbgBkAHIA6QBzACAAQgByAGkAZwBhAG4AdABpACwAIABHAHUAaQBkAG8AIABGAGUAcgByAGUAeQByAGEALAAgAE0AYQB0AGUAbwAgAFoAYQByAGEAZwBvAHoAYQBCAGEAcwBlAG0AZQBuAHQALgBzAHQAdQBkAGkAbwAsACAAQQBuAGQAcgDpAHMAIABCAHIAaQBnAGEAbgB0AGkALAAgAE0AYQB0AGUAbwAgAFoAYQByAGEAZwBvAHoAYQBoAHQAdABwAHMAOgAvAC8AYgBhAHMAZQBtAGUAbgB0AC4AcwB0AHUAZABpAG8ALwBOAG8AIAB0AGEAaQBsACAAYQBBAGwAdAAgAGEAQQBsAHQAIABsAEEAbAB0ACAAUgBBAGwAdAAgAEcAQQBsAHQAIABhAHIAcgBvAHcAcwBSAG8AdQBuAGQAZQBkACAAZABvAHQAUwBsAGEAcwBoAGUAZAAgAHoAZQByAG8AAAACAAAAAwAAABQAAwABAAAAFAAECCYAAAEIAQAABwAIAC8AOQB+AKwBEwErATEBNwE+AUgBTQF+AY8BkgHOAekCGwI3AlkCuQK8AsgC3QMEAwgDDAMSAyYDKAM1A5sDqQO7A8AEDAQaBCMELwQzBDUEOQQ6BEMEXwRjBGsEdQSTBJcEmwSjBLMEtwS7BMAEzwTZBOME6QTvDj8eIR6FHp4evR7zHvkgFCAaIB4gIiAmIDAgMyA6IEQgcCB5IIkgqiCsILQguSC9IQchFyEiIVUhXiGZIZ0hqiGxIbUh5SHnIgIiBiIPIhIiGiIeIisiSCJgImUjJyMrI84kDCQjJGgk6iUAJQIlDCUUJRwlsyW3Jb0lwSXMJc8nfjADMBEwFzAcp4z4////AAAAIAAwADoAoACuARYBLgE0ATkBQQFKAVABjwGSAc0B5AIYAjcCWQK5ArwCxgLYAwADBgMKAxIDJgMnAzUDmwOpA7sDwAQABA4EGwQkBDAENAQ2BDoEOwREBGIEagRyBJAElgSaBKIErgS2BLoEwATPBNgE4gToBO4OPx4gHoAenh68HvIe+CATIBggHCAgICYgMCAyIDkgRCBwIHQggCCqIKwgtCC5IL0hByEWISIhUyFbIZAhnSGpIbAhsyHkIeciAiIGIg8iESIaIh4iKyJIImAiZCMmIysjziQLJCMkYCTqJP8lAiUMJRQlHCWyJbYlvCXAJcolzyd2MAMwCDAUMByni/j///8AAAGtAAAAAAAAAAAAAAAAAAAAAAAAAAD+lADgAAAAAAAA/qD+ZgB8AHgAAAAAAAAAAAAAAAv/+P/5/+3+Pf4w/h/+GwAAAAD9SQAA/WUAAP1qAAD9bAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD80P0EAAAAAAAAAAD0NAAAAADhxAAAAAAAAOI7AAAAAAAA4hLir+J94jXhuOGh4aHhh+Ia4hTiDeIK4gXg1QAA4YsAAOCoAADhTeFE4T/hPuEH4Q3g2uDS4MoAAODB4LjgrOCK4GwAAAAA347e7QAA3pPdkt0HAADeDN3/3fnd8wAAAAAAAAAAAADdMNpy0j0AAAAA0jUAAAmmAAEBCAAAASQBrAHEAo4CuAK+AsQCzgLcAuIAAAAAAzoDPANGAAAAAAAAAAADRANIA1IDWgNeAAAAAAAAAAAAAAAAAAAAAANSA2oAAAOAAAADlAAAA5QAAAOSA8gDygPMA9ID2APaA9wD3gPoA+oAAAAAA+gD6gPsA+4AAAPuA/AAAAP4A/oD/AAAA/wEAAQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPsAAAD7AAAA+4AAAAAAAAAAAAAAAAAAAAAAAAD7gAAAAAAAAAAAAAD5gPoAAAAAAPmAAAAAAAAA+IAAAAAAAAAAAPcA94D4APiA+QAAAAAAAAD4gP0AAAD+AAAAAAAAQI5AnACQQK/At4CpwJxAlICUwI/AscCNQJNAjQCQgI2AjcCzgLLAs0COwKmAAIADgAPABUAGQAkACUALQAwADkAPAA/AEQARQBLAFUAVwBYAFwAYwBoAHMAdAB5AHoAgAJWAkMCVwLVAlADJwCeAKoAqwCxALUAwADBAMkAzADWANoA3QDiAOMA6QDzAPUA9gD6AQEBBgERARIBFwEYAR4CVAKxAlUC0wIbAjoCvQLFAr4CxgKyAqkDJQKqAVECbALUAqsDLwKuAtECEwIUAygC3QKoAj0DMAISAVICbQIAAf0CAQI8AAgAAwAGAAwABwALAA0AEgAfABoAHAAdADUAMQAyADMAGABJAE8ATABNAFMATgLJAFIAbQBpAGsAbAB7AFYBAACkAJ8AogCoAKMApwCpAK4AuwC2ALgAuQDSAM4AzwDQALQA5wDtAOoA6wDxAOwCygDwAQsBBwEJAQoBGQD0ARsACQClAAQAoAAKAKYAEACsABMArwAUALAAEQCtABYAsgAXALMAIAC8AB4AugAhAL0AGwC3ACgAxAAmAMIAKgDGACkAxQAvAMsALgDKADgA1QA2ANMANwDUADQAzQA7ANkAPgDcAEAA3gBCAOAAQQDfAEMA4QBGAOQASADmAEcA5QBKAOgAUQDvAFAA7gBUAPIAWQD3AFsA+QBaAPgAXQD7AGAA/gBfAP0AXgD8AGYBBABlAQMAZAECAHIBEABvAQ0AagEIAHEBDwBuAQwAcAEOAHYBFAB8ARoAfQCBAR8AgwEhAIIBIAAFAKEALADIACcAwwA9ANsAYQD/AGcBBQMqAysDNgMsAyYDLQMxAy4DKQMTAxQDFwMbAxwDGQMSAxEDGgMVAxgBXAFdAYMBVwF7AXoBfQF+AX8BeAF5AYABYwFtAXQBUwFUAVUBVgFaAVsBXgFfAWABYQFiAW4BbwFxAXABcgFzAXcBdgF1AXwBgQGCAZwBnQGlAbEBsgG0AbMBtQG2AboBuQG4Ab8BxAHFAZ4BnwHGAZkBvgG9AcABwQHCAbsBvAHDAaYBpAGwAbcBhAHHAYUByAGGAckBhwHKAVgBmgFZAZsBiAHLAYkBzAGKAc0BiwHOAYwBzwGNAdABjgHRAY8B0gGRAdQBkgHVAZMB1gGUAdcAKwDHAHgBFgB1ARMAdwEVACIAvgB+ARwAfwEdAmoCawJmAmgCaQJnArMCtAI+ArUCrAH+Af8CAgLmAuAC4gLkAugC6QLnAuEC4wLlAtoCyALQAs8CugK4ArwCtwHnAwwDAwMHAwQDCAMFAwkDBgMKAwIDAAMBAlgCWQJeAl8CXAJdAmICYwJaAlsCYAJhAmQCZQCEASIAAAADAAAAAAAA/5wAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAQAEAgABAQESR2Vpc3RNb25vLVJlZ3VsYXIAAQEBKfpxAPpyAfpzAvgYBPsRDANV+4scC3r6iAUcMrkPHDWrEbYdAAC9ExICWQIAAQAHAA4AFQAcACIAKAAzAD0AQwBJAE8AWQBgAGcAbgB1AHsAgQCMAJMAnQCkAKsArwC6AMQAywDSANgA4wDuAPUA/AECAQgBDwEVARsBIgElATIBOQE/AUUBTAFSAVoBZQFsAXMBdwF9AYQBiwGRAZ4BpQGsAbEBtwG9AcgB0QHXAeIB6AHvAfUB/wIGAhUCJAIqAjUCQAJMAlICXQJtAnkCiAKUAqICsQK/As4C3QLrAvoDCAMWAyQDMgNBA1UDWwNiA2kDcAN2A3wDhwORA5cDnQOjA60DtAO7A8IDyQPPA9UD4APnA/ED+AP/BAMEDgQXBB4EJQQrBDIEPQRIBE8EVgRcBGIEaQRvBHUEfAR/BIwEkwSZBJ8EpgSsBLQEvwTGBMoE0ATXBN4E5ATxBPgE/wUEBQoFEAUbBSQFKgU1BTsFQgVIBVIFWQVoBXcFfQWIBZMFnwWvBb0FyAXUBeAF6gX1BfsGBgYRBh0GLQY7BkYGUgZeBmgGcwZ5BoQGjwabBqYGtAbDBtEG4AbvBvUHAwcRBx0HIwcxBz8HTQdbB2oHfQeQB5cHngelB6wHswe6B8EHyAfPB9YH3QfkB+sH8gf5CAAIBwgOCBUIHAgjCCoIMQg4CD8IRghNCFQIWwhiCGkIcAh3CH4IhQiMCJMImgihCKgIrwi2CL0IxAjLCNII2QjgCOcI7gj1CPwJAwkKCREJGAkfCSYJLQk0CTsJQglJCVAJVwleCWUJbAlzCXoJgQmICY8JlgmdCaQJqwmyCbkJwAnHCc4J1QncCeMJ6gnxCfgJ/woGCg0KFAobCiIKKQowCjcKPgpFCkwKUwpaCmEKaApvCnYKfQqECosKkgqZCqAKpwquCrUKvArDCsoK0QrYCt8K5grtCvQK+wsCCwkLEAsXCx4LJQssCzMLOQtAC0YLSAtPC1YLXQtkC2sLcgt5C4ALhwuOC5ULnAujC6oLsQu4C78LxgvNC9QL2wvkC+sL8gv5DAAMBwwODBUMHAwjDCoMMQw4DD8MRgxNDFQMWwxiDGkMcAx3DH4MhQyMDJ4MtwzYDPINBQ0gDTANRQ1bDW0Nhg2eDa8Nvw3TDeQN+w4RDjAOVQ5vDpMOow65DsAOyw7VDuMO8A77DwoPFw8oDzsPQg9JD1APVw9eD2UPbA9zD3oPgQ+ID48Plg+dD6QPqw/CD9UP7Q//EBMQIRAxEEEQVxBvEIEQmxCvEMUQ2BDzEQURHxE6EVQRZBF7EZMRqBHGEesR+BIJEh4SMxJCElcSdBKLEp8SsBLFEtkS7RMJEygTPxNVE2cTfBOTE60TzxPjE+oT8RP3E/0UBBQLFBIUGRQgFCcULhQ1FDkUQBRHFE4UVRRdFGkUchR9FIUUjRSUFJsUpBSrFLYUvRTEFMsU1RTcFOUU7BT1FPwVBRUOFRUVHBUjFSoVMRU4FT8VRhVNFVsVYhVuFXoViRWVFaMVrxW9FckV1xXlFewV8hX5FgAWBxYOFhUWHBYjFioWMRY4Fj8WRhZNFlQWWxZlFmwWcxZ8FoUWjBaXFp4WpRasFrMWvBbDFsoW0RbgFucW7hb1FwEXDRcaFygXLxc2Fz0XSRdbF2IXcxeFQWJyZXZldW5pMDFDREFtYWNyb25Bb2dvbmVrQ2FjdXRlQ2Nhcm9uQ2NpcmN1bWZsZXhDZG90YWNjZW50RGNhcm9uRGNyb2F0RWNhcm9uRWRvdGFjY2VudEVtYWNyb25Fb2dvbmVrdW5pMUVCQ3VuaTAxOEZHYnJldmVHY2Fyb25HY2lyY3VtZmxleHVuaTAxMjJHZG90YWNjZW50dW5pMUUyMHVuaTAxRTRIYmFySGNpcmN1bWZsZXhJZG90YWNjZW50SW1hY3JvbklvZ29uZWtJdGlsZGV1bmkwMDRBMDMwMUpjaXJjdW1mbGV4dW5pMDFFOHVuaTAxMzZMYWN1dGVMY2Fyb251bmkwMTNCTmFjdXRlTmNhcm9udW5pMDE0NUVuZ09odW5nYXJ1bWxhdXRPbWFjcm9uUmFjdXRlUmNhcm9udW5pMDE1NlNhY3V0ZVNjZWRpbGxhU2NpcmN1bWZsZXh1bmkwMjE4dW5pMUU5RVRiYXJUY2Fyb251bmkwMTYydW5pMDIxQVVicmV2ZVVodW5nYXJ1bWxhdXRVbWFjcm9uVW9nb25la1VyaW5nVXRpbGRlV2FjdXRlV2NpcmN1bWZsZXhXZGllcmVzaXNXZ3JhdmVZY2lyY3VtZmxleFlncmF2ZXVuaTFFRjhaYWN1dGVaZG90YWNjZW50dW5pQTc4QnVuaTAxM0IubG9jbE1BSHVuaTAxNDUubG9jbE1BSFIuc3MwNFJhY3V0ZS5zczA0UmNhcm9uLnNzMDR1bmkwMTU2LnNzMDRHLnNzMDZHYnJldmUuc3MwNkdjaXJjdW1mbGV4LnNzMDZ1bmkwMTIyLnNzMDZHZG90YWNjZW50LnNzMDZ1bmkxRTIwLnNzMDZBZGllcmVzaXMuc3MwOENkb3RhY2NlbnQuc3MwOEVkaWVyZXNpcy5zczA4RWRvdGFjY2VudC5zczA4R2RvdGFjY2VudC5zczA4SWRpZXJlc2lzLnNzMDhJZG90YWNjZW50LnNzMDhPZGllcmVzaXMuc3MwOFVkaWVyZXNpcy5zczA4V2RpZXJlc2lzLnNzMDhZZGllcmVzaXMuc3MwOFpkb3RhY2NlbnQuc3MwOEdkb3RhY2NlbnQuc3MwNi5zczA4YWJyZXZldW5pMDFDRWFtYWNyb25hb2dvbmVrY2FjdXRlY2Nhcm9uY2NpcmN1bWZsZXhjZG90YWNjZW50ZGNhcm9uZGNyb2F0ZWNhcm9uZWRvdGFjY2VudGVtYWNyb25lb2dvbmVrdW5pMUVCRHVuaTAyNTlnYnJldmVnY2Fyb25nY2lyY3VtZmxleHVuaTAxMjNnZG90YWNjZW50dW5pMUUyMXVuaTAxRTVoYmFyaGNpcmN1bWZsZXhpLmxvY2xUUktpbWFjcm9uaW9nb25la2l0aWxkZXVuaTAyMzd1bmkwMDZBMDMwMWpjaXJjdW1mbGV4dW5pMDFFOXVuaTAxMzdsYWN1dGVsY2Fyb251bmkwMTNDbmFjdXRlbmNhcm9udW5pMDE0NmVuZ29odW5nYXJ1bWxhdXRvbWFjcm9ucmFjdXRlcmNhcm9udW5pMDE1N3NhY3V0ZXNjZWRpbGxhc2NpcmN1bWZsZXh1bmkwMjE5dGJhcnRjYXJvbnVuaTAxNjN1bmkwMjFCdWJyZXZldWh1bmdhcnVtbGF1dHVtYWNyb251b2dvbmVrdXJpbmd1dGlsZGV3YWN1dGV3Y2lyY3VtZmxleHdkaWVyZXNpc3dncmF2ZXljaXJjdW1mbGV4eWdyYXZldW5pMUVGOXphY3V0ZXpkb3RhY2NlbnR1bmlBNzhDdW5pMDEzQy5sb2NsTUFIdW5pMDE0Ni5sb2NsTUFIYS5zczAxYWFjdXRlLnNzMDFhYnJldmUuc3MwMXVuaTAxQ0Uuc3MwMWFjaXJjdW1mbGV4LnNzMDFhZGllcmVzaXMuc3MwMWFncmF2ZS5zczAxYW1hY3Jvbi5zczAxYW9nb25lay5zczAxYXJpbmcuc3MwMWF0aWxkZS5zczAxYS5zczAyYWFjdXRlLnNzMDJhYnJldmUuc3MwMnVuaTAxQ0Uuc3MwMmFjaXJjdW1mbGV4LnNzMDJhZGllcmVzaXMuc3MwMmFncmF2ZS5zczAyYW1hY3Jvbi5zczAyYW9nb25lay5zczAyYXJpbmcuc3MwMmF0aWxkZS5zczAybC5zczAzbGFjdXRlLnNzMDNsY2Fyb24uc3MwM3VuaTAxM0Muc3MwM2xzbGFzaC5zczAzYWRpZXJlc2lzLnNzMDhjZG90YWNjZW50LnNzMDhlZGllcmVzaXMuc3MwOGVkb3RhY2NlbnQuc3MwOGdkb3RhY2NlbnQuc3MwOGkuc3MwOGlkaWVyZXNpcy5zczA4aS5sb2NsVFJLLnNzMDhpb2dvbmVrLnNzMDhqLnNzMDhvZGllcmVzaXMuc3MwOHVkaWVyZXNpcy5zczA4d2RpZXJlc2lzLnNzMDh5ZGllcmVzaXMuc3MwOHpkb3RhY2NlbnQuc3MwOGFkaWVyZXNpcy5zczAxLnNzMDhhZGllcmVzaXMuc3MwMi5zczA4dW5pMDQxMHVuaTA0MTF1bmkwNDEydW5pMDQxM3VuaTA0MDN1bmkwNDkwdW5pMDQ5MnVuaTA0MTR1bmkwNDE1dW5pMDQwMHVuaTA0MDF1bmkwNDE2dW5pMDQxN3VuaTA0MTh1bmkwNDE5dW5pMDQxQXVuaTA0MEN1bmkwNDFCdW5pMDQxQ3VuaTA0MUR1bmkwNDFFdW5pMDQxRnVuaTA0MjB1bmkwNDIxdW5pMDQyMnVuaTA0MjN1bmkwNDBFdW5pMDQyNHVuaTA0MjV1bmkwNDI3dW5pMDQyNnVuaTA0Mjh1bmkwNDI5dW5pMDQwRnVuaTA0MkN1bmkwNDJCdW5pMDQyQXVuaTA0MDl1bmkwNDBBdW5pMDQwNXVuaTA0MDR1bmkwNDJEdW5pMDQwNnVuaTA0MDd1bmkwNDA4dW5pMDQwQnVuaTA0MkV1bmkwNDJGdW5pMDQwMnVuaTA0NjJ1bmkwNDZBdW5pMDQ3MnVuaTA0NzR1bmkwNDk2dW5pMDQ5QXVuaTA0QTJ1bmkwNEFFdW5pMDRCMHVuaTA0QjJ1bmkwNEI2dW5pMDRCQXVuaTA0QzB1bmkwNEQ4dW5pMDRFMnVuaTA0RTh1bmkwNEVFdW5pMDQzMHVuaTA0MzF1bmkwNDMydW5pMDQzM3VuaTA0NTN1bmkwNDkxdW5pMDQ5M3VuaTA0MzR1bmkwNDM1dW5pMDQ1MHVuaTA0NTF1bmkwNDM2dW5pMDQzN3VuaTA0Mzh1bmkwNDM5dW5pMDQ1RHVuaTA0M0F1bmkwNDVDdW5pMDQzQnVuaTA0M0N1bmkwNDNEdW5pMDQzRXVuaTA0M0Z1bmkwNDQwdW5pMDQ0MXVuaTA0NDJ1bmkwNDQzdW5pMDQ1RXVuaTA0NDR1bmkwNDQ1dW5pMDQ0N3VuaTA0NDZ1bmkwNDQ4dW5pMDQ0OXVuaTA0NUZ1bmkwNDRDdW5pMDQ0QnVuaTA0NEF1bmkwNDU5dW5pMDQ1QXVuaTA0NTV1bmkwNDU0dW5pMDQ0RHVuaTA0NTZ1bmkwNDU3dW5pMDQ1OHVuaTA0NUJ1bmkwNDRFdW5pMDQ0RnVuaTA0NTJ1bmkwNDYzdW5pMDQ2QnVuaTA0NzN1bmkwNDc1dW5pMDQ5N3VuaTA0OUJ1bmkwNEEzdW5pMDRBRnVuaTA0QjF1bmkwNEIzdW5pMDRCN3VuaTA0QkJ1bmkwNENGdW5pMDREOXVuaTA0RTN1bmkwNEU5dW5pMDRFRkxhbWJkYXVuaTAzQTlsYW1iZGFwaXVuaTIxMDd1bmkyNEZGdW5pMjc3NnVuaTI3Nzd1bmkyNzc4dW5pMjc3OXVuaTI3N0F1bmkyNzdCdW5pMjc3Q3VuaTI3N0R1bmkyNzdFdW5pMjRFQXVuaTI0NjB1bmkyNDYxdW5pMjQ2MnVuaTI0NjN1bmkyNDY0dW5pMjQ2NXVuaTI0NjZ1bmkyNDY3dW5pMjQ2OHplcm8uc3MwOXVuaTIxNTN1bmkyMTU0dW5pMjE1NXVuaTIwODB1bmkyMDgxdW5pMjA4MnVuaTIwODN1bmkyMDg0dW5pMjA4NXVuaTIwODZ1bmkyMDg3dW5pMjA4OHVuaTIwODl1bmkyMDcwdW5pMDBCOXVuaTAwQjJ1bmkwMEIzdW5pMjA3NHVuaTIwNzV1bmkyMDc2dW5pMjA3N3VuaTIwNzh1bmkyMDc5dW5pMDBBMGh5cGhlbl9oeXBoZW4ubGlnYWh5cGhlbl9oeXBoZW5faHlwaGVuLmxpZ2FoeXBoZW5faHlwaGVuX2h5cGhlbl9ncmVhdGVyLmxpZ2FoeXBoZW5faHlwaGVuX2dyZWF0ZXIubGlnYWh5cGhlbl9ncmVhdGVyLmxpZ2FoeXBoZW5fZ3JlYXRlcl9ncmVhdGVyLmxpZ2FoeXBoZW5fbGVzcy5saWdhaHlwaGVuX2xlc3NfbGVzcy5saWdhaHlwaGVuX2FzY2lpdGlsZGUubGlnYWJyYWNlbGVmdF9iYXIubGlnYXBlcmlvZF9wZXJpb2RfcGVyaW9kLmxpZ2FwZXJpb2RfcGVyaW9kX2VxdWFsLmxpZ2FwZXJpb2RfZXF1YWwubGlnYWNvbG9uX2VxdWFsLmxpZ2FleGNsYW1fcXVlc3Rpb24ubGlnYWV4Y2xhbV9lcXVhbC5saWdhZXhjbGFtX2VxdWFsX2VxdWFsLmxpZ2FxdWVzdGlvbl9xdWVzdGlvbi5saWdhcXVlc3Rpb25fcXVlc3Rpb25fcXVlc3Rpb24ubGlnYW51bWJlcnNpZ25fbnVtYmVyc2lnbl9udW1iZXJzaWduLmxpZ2FudW1iZXJzaWduX3VuZGVyc2NvcmUubGlnYW51bWJlcnNpZ25fdW5kZXJzY29yZV9wYXJlbmxlZnQubGlnYXNsYXNoX2VxdWFsLmxpZ2FzbGFzaF9lcXVhbF9lcXVhbC5saWdhdW5pMzAwM3BlcmlvZC5zczA4Y29sb24uc3MwOHNlbWljb2xvbi5zczA4ZWxsaXBzaXMuc3MwOGV4Y2xhbS5zczA4ZXhjbGFtZG93bi5zczA4cXVlc3Rpb24uc3MwOHF1ZXN0aW9uZG93bi5zczA4cGVyaW9kY2VudGVyZWQuc3MwOHVuaTMwMUN1bmkzMDA4dW5pMzAwOXVuaTMwMTB1bmkzMDExdW5pMzAwQ3VuaTMwMER1bmkzMDBBdW5pMzAwQnVuaTMwMTR1bmkzMDE1dW5pMzAwRXVuaTMwMEZ1bmkzMDE2dW5pMzAxN3VuaTBFM0ZiYXJfaHlwaGVuX2dyZWF0ZXIubGlnYWJhcl9icmFjZXJpZ2h0LmxpZ2FiYXJfYmFyX2Jhcl9ncmVhdGVyLmxpZ2FiYXJfYmFyX2VxdWFsLmxpZ2FiYXJfYmFyX2dyZWF0ZXIubGlnYWJhcl9lcXVhbC5saWdhYmFyX2dyZWF0ZXIubGlnYWVxdWFsX2VxdWFsLmxpZ2FlcXVhbF9lcXVhbF9lcXVhbC5saWdhZXF1YWxfZXF1YWxfZ3JlYXRlci5saWdhZXF1YWxfZ3JlYXRlci5saWdhZXF1YWxfZ3JlYXRlcl9ncmVhdGVyLmxpZ2FlcXVhbF9sZXNzX2xlc3MubGlnYWVxdWFsX3NsYXNoX2VxdWFsLmxpZ2FncmVhdGVyX2h5cGhlbi5saWdhZ3JlYXRlcl9oeXBoZW5fZ3JlYXRlci5saWdhZ3JlYXRlcl9lcXVhbC5saWdhZ3JlYXRlcl9lcXVhbF9ncmVhdGVyLmxpZ2FncmVhdGVyX2dyZWF0ZXJfaHlwaGVuLmxpZ2FncmVhdGVyX2dyZWF0ZXJfZXF1YWwubGlnYWxlc3NfaHlwaGVuLmxpZ2FsZXNzX2h5cGhlbl9oeXBoZW4ubGlnYWxlc3NfaHlwaGVuX2dyZWF0ZXIubGlnYWxlc3NfaHlwaGVuX2xlc3MubGlnYWxlc3NfZXhjbGFtX2h5cGhlbl9oeXBoZW4ubGlnYWxlc3NfZXhjbGFtX2h5cGhlbl9oeXBoZW5faHlwaGVuLmxpZ2FsZXNzX2Jhci5saWdhbGVzc19iYXJfYmFyLmxpZ2FsZXNzX2Jhcl9iYXJfYmFyLmxpZ2FsZXNzX2Jhcl9ncmVhdGVyLmxpZ2FsZXNzX2VxdWFsLmxpZ2FsZXNzX2VxdWFsX2VxdWFsLmxpZ2FsZXNzX2VxdWFsX2VxdWFsX2dyZWF0ZXIubGlnYWxlc3NfZXF1YWxfZ3JlYXRlci5saWdhbGVzc19lcXVhbF9sZXNzLmxpZ2FsZXNzX2dyZWF0ZXIubGlnYWxlc3NfbGVzc19oeXBoZW4ubGlnYWxlc3NfbGVzc19lcXVhbC5saWdhbGVzc19hc2NpaXRpbGRlLmxpZ2FsZXNzX2FzY2lpdGlsZGVfZ3JlYXRlci5saWdhbGVzc19hc2NpaXRpbGRlX2FzY2lpdGlsZGUubGlnYWxlc3Nfc2xhc2hfZ3JlYXRlci5saWdhYXNjaWl0aWxkZV9oeXBoZW4ubGlnYWFzY2lpdGlsZGVfYXQubGlnYWFzY2lpdGlsZGVfZXF1YWwubGlnYWFzY2lpdGlsZGVfZ3JlYXRlci5saWdhYXNjaWl0aWxkZV9hc2NpaXRpbGRlLmxpZ2Fhc2NpaXRpbGRlX2FzY2lpdGlsZGVfZ3JlYXRlci5saWdhcGVyY2VudF9wZXJjZW50LmxpZ2F1bmlGOEZGdW5pMjExN21pbnV0ZXNlY29uZHVuaTIxMTZ1bmkyNDIzdW5pMjQwQ3VuaTIzMjd1bmkyMzJCdW5pMjMyNnVuaTIzQ0V1bmkyNDBCRXVyb3VuaTIwQjR1bmkyMEJEdW5pMjBCOXVuaTIwQUFub3RlcXVhbGdyZWF0ZXJlcXVhbGxlc3NlcXVhbGFwcHJveGVxdWFsaW5maW5pdHlpbnRlZ3JhbHVuaTIyMDZwcm9kdWN0c3VtbWF0aW9ucmFkaWNhbHBhcnRpYWxkaWZmdW5pMDBCNWFycm93dXB1bmkyMTk3YXJyb3dyaWdodHVuaTIxOThhcnJvd2Rvd251bmkyMTk5YXJyb3dsZWZ0dW5pMjE5NmFycm93Ym90aGFycm93dXBkbnVuaTIxOUR1bmkyMUU0dW5pMjFFNXVuaTIxQTl1bmkyMUFBdW5pMjFCMHVuaTIxQjF1bmkyMUIzdW5pMjFCNGNhcnJpYWdlcmV0dXJudW5pMjFFN2Fycm93dXAuc3MwN3VuaTIxOTcuc3MwN2Fycm93cmlnaHQuc3MwN3VuaTIxOTguc3MwN2Fycm93ZG93bi5zczA3dW5pMjE5OS5zczA3YXJyb3dsZWZ0LnNzMDd1bmkyMTk2LnNzMDdhcnJvd2JvdGguc3MwN2Fycm93dXBkbi5zczA3dW5pMjVDRmNpcmNsZXVuaTI1Q0Nsb3plbmdldHJpYWd1cHVuaTI1QjZ0cmlhZ2RudW5pMjVDMHVuaTI1QjN1bmkyNUI3dW5pMjVCRHVuaTI1QzF1bmkyNTBDdW5pMjUwMHVuaTI1MTR1bmkyNTAydW5pMjUxQ3VuaTAzMDYuY3l1bmkwMzA4dW5pMDMwN2dyYXZlY29tYmFjdXRlY29tYnVuaTAzMEJ1bmkwMzBDLmFsdHVuaTAzMDJ1bmkwMzBDdW5pMDMwNnVuaTAzMEF0aWxkZWNvbWJ1bmkwMzA0dW5pMDMxMnVuaTAzMjZ1bmkwMzI2LmxvY2xNQUh1bmkwMzI3dW5pMDMyOHVuaTAzMzV1bmkwMzA4LnNzMDh1bmkwMzA3LnNzMDhkaWVyZXNpcy5zczA4ZG90YWNjZW50LnNzMDh1bmkwMkJDdW5pMDJCOXVuaTAyQzhibGFja0NpcmNsZWRibGFja0NpcmNsZWRTdHJva2UwMDEuMjAwY29weXJpZ2h0IG1pc3NpbmdHZWlzdCBNb25vIFJlZ3VsYXIA8wIAAQAEAAwAEgAZAB8AJQAqADQANwBCAEsAUQBZAF8ApADQANgA4AEeAVcBdgF7AYgBnwGmAdYB4QH3AgwCFgIdAiQCNgJlAm8CeAKAAoYCogKmArsC2gLrAvYC/wMGAxIDGQMfAyYDMAM0A0MDUQNjA28DeQOAA4kDkAOfA6YD9AP+BBwENwRMBFEEYARxBHwEhwSRBJ4EpwSyBLoEwwTKBNEE3QTlBO0E9QVNBY0FzgYRBjAGNwZJBmQGeAaUBsAGxAbrBvEHAwcWBycHNwc+B0wHWgdfB3YHegd/B4QHkAeiB7MHwwfNB9YH3wfoB/EH/QgFCA0IFQggCC8IgAiTCN4JIQl9CdYKIApsCrcK/AsECwcLTwuVC7gLwgviC/wMMAw6DHQMlQywDNMM1w0PDSENUw1eDW4Ngw2xDdoN+g4kDjMONw5VDn4Opg7ODtoPAA8lDzYPWw+AD5EPow+sD88P7xABECEQQRBgEH4QnBC6ENcQ9BELESYRQBFYEWYRfRGUEasRuhHQEdsR6BH9EgkSHhIqEj4SUhJkEnIShRKWEqESsxLFEtUS3BLsEvwTCxMQEx8TLRM7E0kTVxNlE3ETfhOLE5gTpBOwE7wTyBPUE+AT6hP1FAAUCxQWFCEULBQ3FEIUTUIdDhX3oNP7oAYOi9X4EtULeaGhf6UbDovd+LbdCxXj7TMGC7/3aL8LFdEGSfcUBS0GDrUdDvd6fxXXz66/qB8Li933ft33et0Le9/5FncLBSEG+5j7mQsB95XhAwv3wXsV90P3Avcj93j3ePsC9yP7Q/tE+wL7I/t4+3j3Avsj90Qf1QT7Fzr3BvdL90vc9wf3F/cW3fsH+0v7Szn7BvsWHwvV99QG9yg51fsU+wo9SyN1HuSEBcOZsLLZG9m6YDGMH/tOZgX7CXRYXDEaC3/VS9f4GNsL8/f08/v0BQ5Vlq10xRubn4yMkx/VaQd1gZOjH/dwB/caQd37FPsMPUcndx7khAXIm7Kt1RvXtV8xH/tGZwX7CHRXXDEaC/fAfxX3Juv3APc99z0r9wD7JvsnLPsA+z37Per7APcnH9sEKVPV9w/3D8PV7ezEQfsP+w9SQSofCzXXUe8ek9UVT2envbejpdOZH/c2qwVdBzNVT/sAHgv3qn8VCxXRBhPY0eUFE+hwHQ7lFvhM3fv293734t374vd69+7d/EQGC9zErMKoHwv3Pgb7CodJMSkb+wVK8vdL90zK8/cD379NM6If5ZEF9xpsM+n7Fhv7Oin7I/t5Hwv1Hfsm0fsX9y4fCzcHxnNKsEEb+xktIfsr+yvrIfcbHwv3UwRoc6OtqqOgrq6jdmxpc3NoHwv7iPcC+xL3Kh4L18OuyqgfC/sq1fjydwv3yX8V9wTdzuqnH5Adjx3YHQv3HvsqFdAG0rClxJ8f92v46QUvBvsr/E77NVAd91n8nAWoBnhZBXKBfIBmG04GCxXRBuX3FAUtBgvl2/cMJOHy5Qv7cMGtdtK4C6B2+FzVC8wd+wJN7/dO907J8fcC9wLJJftO+05NJ/sCHwsVyx0Or5qgpbMayla5RkdVXUxjoHGvfB4L95YW4fe2Bvdo+DgFKQb7MvvU+zL31AUpBvdq/DgFC/8AK4AA///UgAD/AISAABILe99cdveo3few3wt73/dj3/ev3wv3gNmx2QEL95j3mPuY95kFIQYLsPdcBUMGC/hOBS8GC0yPx1rYGw4BzeP3uucDQB0LFVYdC/xK/VoV2Qb3H/eTBT0GC9///7KAAP8ATYAAP9cLrKamrKxwpmpqcHBqaqZwrB8Lq/dBBfcRBmv7QQULFcgGv/eGBTgGDl6yqnW6Gw6gdvey3/eU3wsGy0tLSwUL1ftL+Fz7s0H3X/wS+2kLW3hvZFoaC+YD98F7Ffc38vcU918ft/ueN/dDB/sTjEc7+wAb+w5G9xn3Lfcuz/ca9w/dzE81oh/lkQX3Fmwo6fsWG/s6+wf7Oftj+2L3CPs49zkfCwHI5ffP5QN0HQsBseUD98J7Ffca6en3MKUfMJAFfh37d+n7I/c+HwskHS0d2xb4TN37Rfi290Xd/Ew590X8tvtFBg73XBXo+xkF6Qbo9xkFRQZFMUXlBQ75skIdDvjoB/eS/OgF9wz5WjUGCxX4TNn8TAb7vwT4TNn8TAYO+10V9wz3DPsMBgvXx7/Nu2i4XZkfC7Wrqbm5q21hHgv7cBXCtrS/wGOwUh8L4rW62R73AAYL+wwV9wz3DPsMBgv3Ldn3I9kBC8Z++wj3BfOEC6B2+QbfAQvFUc73IMoL0TEF0QYu9xkFLQYLEveE9wwk4Qv3HvwS+x4GC3vEd3b3RsEL98t7Ffcl79n3BPcKTcb7Qbwf+xqxZ6LOGs/DuePrvU01lx7lkQX3Fns36/smG/smMTj7CyHFW/coYR/3OVytZkcaRlVkKCdKxvV9HjGFBfskl/Qo9yobC/fKfxX3DOXD6eNftvs4ph8rm2ebwRq4r67Z07djU5ce45EF53tH2fsXG/sWREcvNblc9y5wH+gdJ5PfPPceGwt/1WJ2+KZ35/cUEuXf94rfO9sTvPebfxUTuj4dE3o1BxN82/imN/vQBhO8LFhSOD9nuvIe99I3++kH+xLPQPQeCwHS4fe25QPSFuH3svcUBpcG9zb7sgXqBvs9978F7KXC0u4a9xsu2/szHvtqBvdq++gV+xT3lPcUBvPFXDk5UV4jHwv/ADaAAP8AxIAAPdn3FNk991kSyRwGjBOYHAVb3h0LAb34iNsdC10dlx21q6m5uattYWRrcV0fCxXIBvcTwvcJ2e8et/uoUvddB0ErXvsG+w0aDqdmBbaVrHtrGnF5em5pc6ydfR4LZG16cXcfy5OnxMAbqaJ8b5UfxpEFyHlarFQbC/sFd05RORv7BU7y90v3TMjz9wXVxlYloh/nkQX3J20u4fsRG/s+Lfsj+3kL+/7sHRWqpKWpqnKkbGxycmxtpHGqH/dFFqqkpamqcqRsbHJybG2kcaofC98T6NMdCxbZBvmi98IF9Qf9o/fCBT0GCxKl+LgT3JEd4wb7bPlaBfsIBgsW2QaM+VoFPQb9o/vCBSEHC/eP+6MV28i41LxusVyfHwv9ChUT7DEdBvcp3sf29wA4x/spHwv7kvzoBfjoNf1a9wwHC/j6Qh0OZvtcBTIGf0UF4wZr+0EFNwZ/RQXeBguXHR8L6x2uuAv5vSUdDn/b+B7bw/cZYLYSC/gWpAb3Rirv+x77Ji77Afs8CzGSBVV5XmhGGy9SxPcGhR8LpRbjBsX3WgX3lAbF+1oFC3/b9zTV9zTbAQsV9zD3MPswBgv3kvjoBfzoBwv7G3b3MPcMAQt3AfeZ2QP3mQtCyF7bHsQEXWulsgt/21x2+GLbC6B2+GjVf3cL1u7W19fu1QtvaH5saRpZrW3DC3/bR8/4IstL18f3FJ8dC/sVdvce2/ge2393Etv/AE6AAP//sYAA3/e+4xPm1x0T6kNQaUxrHxPaiuAFE9Y9Bvd+/GIVLlLO9xYfE+b3FsXO5+fDQvsQHhPW+xBTQi8eDn/b9z/V9ynbxfcUUh37QPezJx0SweP3vt///7KAAP8ATYAAP9cTngA1HROdADgdE1yAjj8FE24A1/imNwYTngA6HROcgJzbFfsCYOvw9Lbr9wL3AbcpJChfKfsBHwvTBhNosPdZBeMGl9EFNAar90EF3gaX0QU5BhMYTx0TKGb7XAX7EQYTGE8dE2iKHROIZvtZBdMGE0iw91kF9xEGE4gLe9/3gt/3kN8B+HXmA/e4exX3NfcL9zf3ZPdu+wP3Lfs9+wUvN/sZYx/mgwXdocfG0xv01SP7KJUf/FkGjFkF+2WP9Psn9y4b3wQtUeH3LHgf9/sG+yx0SzUmGw5/2/cp1fc/2wHH5/e64wP3t/iyFfsEOUgsbx/lhAXBnbiu0BvnxFL7BpEf/BZyBvtG7Cf3Hvcm6PcB9zz3PC73AfsqHvsf+9kV97oGKX1UWDkbPVK68YMfDvsQ5cL3ER3h783fE+frFt/30QbtxcDd26tWKR770d/36Qf3BFLk+w0eE+tCTWlCbx8T24nqBRPXPgb3Kv18FcMGy+kF4ScxrQcOoHb4aNW11UH3EhLv3/eQ3xPcpPjcFdb83N/30Abtw8Hg1bBaJR770d/36Qf3Ckze+wZDT21KcB73HeoHE+zVLAcT3L83BxPsV0AHDhXlxOT3Iuxf4i8/UVU0N8FU0B8T9LKqnKafHz+Cal1bG210mqeBH1CFBRP4Tp28asIblPdUFV5zrbu8pa63tKloWoofW4praWUbDgb8uPvAFfty93IF+EPZ/EMG93H3ciwd95j7mAUT8PhAVBX3DPcM+wwGE+is5BXCBpHRlPcN2xr3ejX7egc7lfsNkUUeDnvf+NLfrB0OqR0OFejF2/cT9xRR3C4uUTr7FPsTxTvoH8YEeHqRl34f9xb3ZAWRdY5xbRotalVSHjH3KBXsrMDEnpyFf5ge+xb7YwWFoIikqBoL5QPRFuH3tPcoBt+vbkmRH5z7VQXiBnn3YITWbrFImBnIosHJ3hr3GC7b+yke+2wG92z76BX7FveW9xYG7MJbOTlUXSofC/sQ5a3V+MbVEveY70jfE+jPHVb9ohUT8MMGy+kF4ScxrQcOAbHl9+zlA0YdC/sq1fio1d7tEvf04zeBHRPw94b5RRUT6OPtBhPwMwYOSB0TgIBdHROAkIsdEyCQaB0TgJBka3FdHgugdves3fee3QHl4few5QPlFuH3rPcW9wEd+2wG92L78BX7DPee9wwG9wS/XDU1V1z7BB8OPx0BwfiEA0EdDt872xO5APebfxUTuIA+HRN4gDUHE3kA2/imN/vQBhO5ACxYUjg/Z7ryHvfSN/vpB/sSz0D0HhO2AAsV28PD3dhXx0Jvd4J3dx+Y8QX3LcT7YgZs+3YFxwbWHQ4qHd/tEuXhjePz4xP6Nx0T9uPfJR33VCklHQ4iHd7tEvdS45rfkOMT6NsW+HRcHQYT9PcC+K8lHfdUKSUdDhXZHQsB5eH3vOUD5Rb3PAb3TPcM9xL3ePd4+wz3FPtMH/s8Bvc3/QgVPvi22Ab3Htwt+0j7SDov+x4fC6B2+GjV9zx3Ae/f95DfA8cdDisdAbPf98DhA/enexX3JObr9zIf+Gw1/GwH+wRaUScpWsH3CIceN4MF+yiP5Cn3IhsOi+r4+3fn9xS8HQsqHdT3FAHl4QM3Hfda1CcdAcfh98jhA/fAexX3KuXx9zYf1B0LAbP4nAP3ABb3FgbJ+F3J/F0F9xYGz/laBTEGV/z7QfirBTMGQfyrV/j7BTEGCwGf+MQD9xEW9AbR997R+94F9Qbz+KYFLwZI/E4/+AQFMQY//ARIUB0L+xDlrd35CHcB7+Hq7/cJHfc1/jAVwwbL6QXhJzGtBw4B5d8D5Rbf9x4G8/cC90L7jAXxBvtv98X3Zfd1BfsEBvuW+7EF+GU3BwsGc20Fmx2xq5Wbmx6MHQvXgB0O+Or3GWC2Evc096wToPc0+OoV0QYTYNHlBROgcB0OO3tVY0cbKVHV9w/3D8XV7c+9Y0WbH+ORBfcKdTnN+wob+ygr+wH7PAv/ADSAAP8AyIAA//87gAD/AMSAAD3Z9xTZPfdV+1X3WRLJHAaME0YLi9X4xtUB95bfA/glFvcz1fszBmJ5nrYf+NL7mkH3RvyIBzS+WuceC8EV9oxOHfdy+3IFC+8W3/fQBu3DweDVsFolHvvR3/fpB/cKTN77BkNPbUpwHvebNwcL/wA2gAD/AMSAAD3Z9xTZPfdZEskcBowTqPhBwRUTaPsL9wsFCwHF4QP4WBb3BQb70ff34B0LA/fAfxX3Juv3APc99z0r9wD7JvsnLPsA+z37Per7APcnH9sEC7+zs7+/Y7NXV2NjV1ezY78fvQRzeZ2jo52do6OdeXNzeXlzHwv3wHsV9zzp9xn3geQdH98EC6mjo6moc6RtbnJybm2kc6gfDuMd9yA39xsdC/e5+MwV/IL7aUH4dNX7S/h8B+xYvioe+xVB9xEGtqRyYB8LFcjXt8Rf95NYBvta+5oFWfdQB/sCxBX3AvcmBfsmBw4iHdP3FAH3ud8D2xb4dFwdBgs1+4UGNTpOIEZYw+Ue94Y1+4YH+yHfMvcO39W0xqkeC/cC+yoV91gG5LjI5B/4pvvUQfeA/FwHX3RrZx77TwYL+GI1/GIH+wdWSiYmVsz3Bx74YjX8Ygf7NuUl9yoeC/cr950FKwb7JfuSBfeSN/uSB/sl95IFKwb3K/udC6+hpJCiG7OqZl5cbGljZ2yirYQfTIgFSpHDXdQbC9v7KhXf93AGWKfIbNAb9zLR9xf3JvcmRfcX+zIfC/s86PsB9yoe9x/32RX7ugbtmcK+3RvZxFwlkx8L3cG92Y8fUQZdhW13XRtdbZ+5hR9RBj2PwVndGwugdvkI3S0d95UW4fkI923d/Jw5920GDgO9FviI3fwoBvgg+LIF4fxuOfgOB/wg/LIFC43VFVNjpb21m6fbmx/3Pq0FZwclT1H7Ah4Li/cM9zDZ9/h3EvmC9wwk4RPo+mX3qBULwRX2jE4dE2j3C/sLBQsVMlTX9w33D8LV4u3FQfsP+w1RPysfC/fH9/cF+wUG+7777wX37zX9WuH37wcL91T39gUpBvsn+7P7J/ezBScG91T79Qv5BdMB9zr3oAP3OvkFIR34Dhb3ItX7IgZcdaK8H/fK92fV+2cL94Mt9xn7PPcCHQv8WxX7IPdO9yD3Ex0O90v4aPtL+GcFOwb3S/xn+0v8aAULwRX2jE4d93H7cgUL9wh3o3ldGltddT03W7LNgR4zhQUL91b3NftV9zUF+w4LFdsG+0v4aPdL+GcFOwb7S/xnBQtzwwWBf3eHfRt4gJWfm5Ccpa0fCxX3BL9cNTVXXPsEH/sM954GDgYTmPcL9wssHfeY+5gLxHJ39y/Ee3cSnMhcyPcSyFvKCzX9BvsI+QY1/Qb7CPkGNQYOk/cIIvsFmPsIUAsB9ynfA/cpFt/4XPez1fwHBgt3Er3j977f//+ygAD/AE2AAAsGE1i49xUFOAYTaF77FQULAe/h9wkdC0UHwG1VqD0b+y5F+xf7Jgtesqp1uhvCtrS/wGOwUh8L95j3mAUhBhOg+3H7cgULBvcDHQv7PC37GfuD+4Hp+xn3PAv3KOva9xz3HCva+ygfCwa3cVC1QRv7IDQg+z4LxPc3wtTEAfgJygP3wAv3Bi52+Oj3Bot3EtHhC3vf+NLfv/cZYLYSseULNxX5Vfuj/VT7owUOA+8W+Ezd+/b5CDUGC/kdFfyN+7f4jfu4BQvfXHb3qN33sN8SseUL96jZZbESyfrIE6ALBSIG+5n7mfeZ+5gLBtm1vO2VH6z3yQULmPcI+wUjkvsITRsL/wArgAAS96rIXLoLdvho1X93EuvZPd8L9ybf++839wcHDgbru2xMTVttKx8LFfe3/I33uPiNBQud+TgB95nZA/hhC/sC+fAB9wD4FAML9wrh1/cKoR8zkQv3itk992H3HNkSC/sVdvcq3/kGdxILdvhi27XVQfcSEgv7IPtDQfdD+8oHCwEAAQAAIgAAqwABhwEArAIBiQEArwEAigAAIwEBiwEAsQABjQEAJQABjwEAmgAAJgAAsgABkQAAswEBkgAAtQABkwMAJwEBlwYAKQABngEAKgAAtgIBoAAAuQABoQIAKwABpAEALAABpgEALQABqAIAjAAALgEBqwIAugABrgAAMAAAuwMBrwEAjQAAvwAAjgAAMQAAnQAAMgEBsQIANAABtAAAwAABtQMANQABuQMANgAAwQABvQAAwgIBvgQANwEBwwMAOQEAxQABxwAAxgAByAEAOwABygAAxwAByxoAQgAAyAAB5gEAyQIB6AEAzAEAkAAAQwEB6gEAzgAB7AEARQAB7gEApwAARgAAzwAB8AAA0AEB8QAA0gAB8gMARwEB9gYASQAB/QEASgAAkQAA0wIB/wAA1gACAAIASwACAwIATAACBgEATQACCAIAkgAATgECCwIA1wACDgAAUAAA2AMCDwEAkwAA3AAAlAAAUQAAogAAUgECEQIAVAACFAAA3QACFQIAlQAAVQACGAMAVgAA3gACHAAA3wICHQQAVwECIgMAWQEA4gACJgAA4wACJwEAWwACKQAA5AACKi8AiwAAjwACWokAEQkC5BQAYwAAmwAC+QEAngAAowAC+wABQAMC/CwADwAADQAAGwEAeQAAAgAAYAAAIAAAewAAcgAAdAAACwADKQAABAAAEAAAPQADKggADgAAbwAAiQAAQAADMwAACQEAXAAAXgAAPAAAPgADNA0AdQEAaQAAdwAAQQAACAAAagAAeAAAawEAAwAAaAAAZQADQjIAIQAABwAAcwAAZgAAqgAApQADdQAAmQAAoQADdgEAXQAAoAAAcAEDeAcAYQAAZwAABQADgAQAYgAAZAAADAAApgAAqAAAnwAAHgADhQAAHwAAHQADhgEAnAADiAAAXwAAlwAAPwADiQcABgAAegADkUQAgwAAggAAfAEAhgAAfgAAiAAAgQAAhAAAfwEAhQAAhwAD1gYDOQIAAQD9AP4BEAEfATcBRgFmAYEBjgGwAdQB8QIaAl8CYQJmAnACfQLKAtcC5gLrAvcC+QL7AwADDAMYAzEDMwNFA0cDYQOQA74DwAPfBAEEJARHBHkEpwTNBPgFOAU6BYEFowWlBa0FvgXABd8F5wX3BiAGPgZABngGuwbDBtAG4wbrBvgHGAcaB0gHSgdZB2UHbwdxB6AH6QfrB/IIDAgiCCkIMQhGCLsI2glRCVMJlQnjCegJ9AoBChoKHwopCjYK2wr5CxcLdAt2C54LrwvcDAQMCQwODDsMWQxyDHkMgQyaDOANGg05DWENaQ1vDakN3A3iDeQN5g3tDf4OFQ4cDjsOQA5NDloOaw5tDm8OcQ52DoIOjw7iDuwPFw81D1cPaA99D5YPuQ/0EAcQNBBKEGIQehCSEMQQ2REDERgRLRE0EWsRoxHIEegR7xIaEkYSbBKZEyITghOEE5ATnxPdFCEUNRRXFIIU5xVZFV4VaxV4FZYVmBWtFa8VzRYWFmwWbhafFrkW9xceF1YXghevF+EYPRg/GEEYYxhlGG8YdxiJGIsYjRiVGKYYzRjtGO8Y9BkBGRAZGxkrGWUZaBl0GYMZhRnCGh0aMhpUGnUadxqpGu8a+xsOGykbQhtVG2kbgRv3HBYcfhyAHMMdLh1CHWgdjh2vHbEeER50HvcfEh8vH5sfvR/yIBcgTyBuII8glCC/IPEhDiEcISMhTyGbIc8iESI1Ij0iQyJ1IqAipiKoIqoisiLDItUi3SL/IwgjGSMpIzojPCM+I0AjfiOnI+8kGCRKJIIkqyTXJUwlfiW6JeUl7CYjJjAmbCalJqwm6Sc0J2gnpiepJ7snwifdKBcoNyhJKGIoeCipKKsoxijIKPApBSkdKTApWimYKaop4SoUKokqwSrTKvcq+SsBKw8rKitLK5crnCueK6Ar3SxZLGwsjiyTLKAszyzRLNMs1SztLO8s9Cz2LTAtcS3QLdIt6i4VLiwuTi59Lp4u5S8LL2QvwS/GMBEwYjBkMGYwaDCfMP8xQzGCMbgyFjJsMpgy7jMWM0UzRzNxM6YzyDP/NAE0AzQqNF80pzS8NSw1lDWZNaQ1wTXrNj42QzZFNkc2bzbkNvU3DDcjNzk3Vjd0N6030jfeN/c3+Tf7OBI4FDglOI04jzinONU47DkROTc5VjmIOa058TpLOk06mDrbOt063zrhOuM7QTuIO948PDyaPPM9KD1lPZw90z3uPiQ+UT56Pnw+fj6APps+xT7dPv0/aD+pP+FAUkCzQOVBNEGeQc5CI0KMQrNDLEOWQ7BDzkPkRAVEFESFRJtEqkTKROBFQEVvRYpFuUXvRglGNkZmRpxG8Ec2R0lHhEfdSCJIcUjESTJJdknkSktKrkrASt1LKUtzS5lL2kv9TAxMRExXTGtMkkymTNRM5UzuTQRNEk1JTZRNlU22TeJOBU4WTitOTE5nTq1O309ET2NPik+oT89P+VA1UI9QsFDcUTlRXlGkUdRSCFIOUhlSKFI+UlhSalKeUq5TCFMSUzNTalOPU6ZTuFPNU9tT61QbVDlUY1SMVOFVNVU9VVJVZVV4VYlV1FX9ViZWfFbRVu1XClcZVz1XXFdyV4lXn1ezV8hX71gZWElYeFixWN5Y6Vj9WSFZOFlHWVhZllm+WeNZ8loZWilae1r9Wx1bgVuoW9Rb8lwSXDJcUFx/XJRcrlzsXUBdg12cXcRd+14wXmleu17VXvFfRl92X4NfkF+qX9JgCGBbYI5gp2D4YSFhWmGOYchiD2JgYtVjPmOPY8Fkj2TxZSFlemW5ZhpmV2cWZ7Rn4WiBaQ5pgWnqaidqX2pvaotqnWq1atZrCGt2a59r1mwTbFxso2zmbRRtim38bpxvGG+Ub9dwLXB3cORxHXE6cURxeHGTcZ5x5HIHcidyUXJ6cq9zS3OSc6hzznRNdIx0vnTxdR11RXWtdfV2E3bHduV3E3cmd053b3eXd7B32ngqeHp4zHjxeRJ5Wnmlecl57XoTejR6XHqXeq960HrmewV7G3s5e1Z7dXufe8d79XxCfbd95n34fg1+HH4rfkx+bn6JfqN+qX68ftB+437sfv5/EX8Wfxt/IH8zf0Z/S39ef3B/hX+gf6V/tn/Hf9h/3X/if/iAC4AegC6AMIAygDSARIBGgFaAZYB3gI+AkYCTgJWApYC1gMaAyIDYgOOA8hz6aPsqzaq4qqGquKrEqqLAoKyhqq5xpaqlq66rpKquqssS49JE00P3GfsZ91ksqmz3XPscqmz3HEHVE/+/Ffga+bQV+8L+SvfCBkH3whUg+zH2BxMQACD3EmwVExAACCxeBhMaACHqBqr3hBUgBxMOART7MfaqP+q4BhMGAEJsdWrABhMDYQXq9wgVLPsxrPcSyQeqxBUTAaEFbE1JLKrJrk2qBxMAEEDJ6BUTABAQbGgGEwA4QaoGrM4VSMlrBxMALwH7Me4G9zH3DhVsTWjJbPsxqgcT4AaBya5Oqgb3MP1dFWxtB0heBexsBhPgAQD7MaoGzbgFSaoGDg4uChKl+LgT2DIKXfxCFRPoMR0uCuf3FIMdn9NCHfsYhh0uCujJEqX4uBPcMgrF1LUdI/yLFRPsMR0uCuL3GYMdOfdctgpphh0uCuMgCqX4uBPaMgo4zxXRBhPW0eUFE+pwHVP9CxUxHS4K8u0S9zTj8+MT3jIKOd7CCvsw/PcVE+4xHS4K5/cUgx2n8Qqbhh0uCvcH0xKl+Lj8LfegE9wyChPqPuoV96DT+6AGqvzpFTEd+2bP9zd291rd9/TZi3cS+DrXE+yRHYxeCpWDCl38QhUT9DEdLgrXvd+9Evdkvd+9E98yCsXDFcsdI/ysFRPvMR0uCu8kCvciJh0T1zIKE9v3CtsmChPXJQoT23mhoX+lGxPn+zj8khUxHYvf9wrfqN33ed863BL31eET1JUW5AbL914F9zL7XveZ3/tDBhP093v3N937N/d59z7f++EHE8xU/DwV9wP36wWg++sGDo8KIgpgHQ4iCsP3FGAdZWMdIgq+9xlgHfsg+jIhCkQdod740t8SseX3c8IX98hpHaCh9wuX3uej9yUZMJAFE15+Hfts4Psg9y5+HxP+bWqnZgW2lax7axpxeXpuaXOsnX0eE15iZQUT/lkd9wcdE+iZCvsh+a42HSIKzu0BseX3FeOMCl6NHSQdth0OJB3O9xm2HS/50CEKkwqTCiodYQoOKh3U9xRhCvdS1CAdKh3P9xlhCuP3XSEKKh3QIArl4RP0Nx3i0BXRBhPs0eUFE/QnCrMdKh3f7QHl4ezjAzcd90vfJR0Ouh0qHevTEuXhkvegE/g3HRP06OsV96DT+6AGDvtmz/ci3fd+3fd63QHl4fds1wPlFvgDwB2HjAXc+/b3fvfi3fvi93r37t38RAcOKh3cJArl4XsmHRP1Nx33tNwVxLC3148fVwZZh357cht7fpKcdh8T6yUKE/UjHaEdoHb3xt33hN0B7+ED7xbh98b35N375PeE9/bd/EwGDnv3Cx337dw72xO89757FeHBtcytHxN8OwoTujkdE7w9HQ5LHcTJErHl9+3cO9sTvkIKE347ChO9OR0Tvj0djPmzFdkdDksdvvcZErHl9+3cO9sTvkIKE347ChO9OR0Tvj0d+x/6MiEKSx2/IAqx5fft3DvbE7sAQgoTewA7ChO6gDkdE7sAPR37IPmuFdEGE7cA0eUFE7sAJwr7EOWd9wsd9xfv9wbcO9sTXwBCChM/ADsKE16AOR0TXwA9HVD7WhXDBhPfAFUKSx3O7RKx5fcS4/cX3DvbE78AQgoTfwA7ChO+gDkdE78APR1fjR1LHdrTErHlr/egtNw72xO9AEIKE30AOwoTvIA5HRO9AD0dE78A+xr5ySEde9/a1cHf96/fAZ/l+ALmA/fBexX3BN7H8rUfwNVrBpCojqusGrf7njf3Qwd4inmIeh77P0H3JQZZbVluSqYKDrEKoHb31N/3Ed8390kS5uH3iuET7Pg7FuH4pc7fSAYT3Ow1BxPsKvuKBxPc7DUHE+wqSDfO/KXh99T3igf7it8V9xH3ivsRBw6gdvfQ3ffMd+MgCs/h97jhE/bKCubPFdEGE+7R5QUT9icKYR20CvdK+VAgHSQdzyAK95XhE+g4Ctr5TDYdnwokHd7tEveT4zXhE+g4ChPw90P5WxUT6OPtBhPwMwYOtAr3UvlQJx0kHerTAfeV4QM4CuD5ZyEd+2bP9yLd+LbdAfeV4a7XA9sW9/9eCt37Rfi290Xd/Ew590X8tvtFBw4kHdskCvciv8rhyr8T5jgK96z5WCYKE94lChPmIx24HSsd5/cUAbPf98DhA/enexX3JObr9zIf+Gw1/GwH+wRaUScpWsH3CIceN4MF+yiP5Cn3Ihv3LGMdKx3jIAqz3/fA4RPs96d7Ffck5uv3Mh/4bDX8bAf7BFpRJylawfcIhx43gwX7KI/kKfciG7z5rhXRBhPc0eUFE+wnCigKAcfhdwoOKAri9xkBx+F3CthiHfsQ5cJ2+Vp3Acfh7e93Cvc4fAqL3fkId/QdDovd+Qh35/cU9B2QRwqL3fgW94aLdxLv4ROw7xb4TN379vkINQYT0Pdc+4ZYHb4di935CHcB9wXhA5X3uxXyuwX76/hM3fv298EH9wvDZ9c4ZAX3fjX7pgf7H0oFDqAKzwrRFuEGE2xkHROcaAoOUwrn9xSrCvdU0yAdUwri9xmrCuViHZcKUwrvJArR4X0mHX3hE1ZA0RbhBhNmQGQdE5ZAaAoTWoD3ttsmChNVQCUKE1qAIx37Kt/idvjo9waLdxLR4fer6jXhE9r3ofsqFfIG58XD4h+Sk/laNfzoB/uS+OgF+wz9WuEGE+z46Af3kvzoBaSDBmV2d2EeJAYOpx10CmX5XiAd9wcd9+zlE+xGHfsh+VoV0QYT3NHlBRPsJwoiCs7tAbHlq+Pz46vlA0Yd+yD5aSoKdApt+V4nHXQK+wL5XkYKIgra0wGx5bD3oLLlA0Yd+xv5dSEdIgoBseX37OUDsXsV3waovAVrs716xhvuCvcIdeZhyh/H8QU5Bm9cBapjWptQG/s8LfsZ+4P7BaAytEwf91x2FWFomadwH/eM+DsFnl2UT0Ia+05NJ/sCHvtA97IV907J8fcCtK19cKYe+4z8OQV6uILG0RoOIgrLJAqx5ZkmHZnlE9lGHRPrx/lmJgoT3SUKE+sjHXvfR9/3e933ed9H3xKS4/d94zXhE7X3aHsVurKerasfE3Vm95rfBxN2+0T3e/c43fs493n3P98GE3X7lQYTbWYHrWtknlwb+xU/+yL7eh8Ttft41/si9xUeE67fBDZr9wL3RPdGq/cC4OCq+wL7RvtEbPsCNh8Orx2gdvcp3/ed3/cUdwHl4ffA5QPlFuH3KfceBvcz6N33HfcbLtr7Mx/7HvcUNQbh/HEV9533Hgf3AMFgNDJVXfsAHw4iCgGx5ffs5QP4OEUV6wZO9gXRxrD3APcqGuQdqaaPk6QeOdMV+wJN7/dO907J8fcC9wLJJftO+wN1O2JcH1bnBSsG2fscBYh/fop+Gw6FCnUKDoUK0/cUdQpl+DAgHYUKzvcZdQr7IPiwIQr7EOXCdve03feW3QHR4fcA79WqHWH83FQKIgpfHQ4iCsP3FF8dWWMdIgq+9xlfHfss+jIhCkQdXvcqT3b5I98SyOX3TcLW5RPvgPe5+3AVwra0v8BjsFIfnqAF9ySM7tn3Axr3Ck3G+0G8HvsasWeizhrPw7nj671NNZce5ZEF9xZ7N+v7Jhv7JjE4+wshxVv3KGEf9zlcrWZHGhNXgEZVZCgnSsb1fR4xhQUTT4CW+xXgL/cQeAgT74BraKdmBbaVrHtrGnF5em5pc6ydfR4TT4BiZQUT74BZHSIKvyAKyOX3z+UT7HQd+y35rhXRBhPc0eUFE+wnCvsQ5Z3f+NLfEsjl9wHv9eUTfHQdRPtaFcMGE/xVCovf96HS917fAa/h+ADkA6/4iRX8ieH4iQfctLfUHvdGBvtr+1EFNgfxjAX3BozSWDUaOk1XJh77Gjf3Ggb3Lu3l9xf3EPsA3fs0iB/3cPdWBef7twf7Dz47+xUfDtodoHb3y9X3h90tHfeVFuH3y/cx1fsx94f3bd38nDn3bfuH+zFB9zEGDqB2+QjdzvcZLR3cCir3riEKRB3FdvkI3RL3leGEwhN895UWngZfWwUT+nwdE3xiZQUT+vYdE3ytsAWa6woO+xDlwnb5CN0S95XhNfIn3hPw3Ap6/d4VE+jDBsvpBeEHE+QnMa0GDisdux0OdgplYx0rHejJAcfh98jhA0AK+bME3cG92Y8fUQZdhW13XRtdbZ+5hR9RBj2PwVndGw4rHeMgCsfh98jhE+xACvsh+a4V0QYT3NHlBRPsJworHfLtEsfhmePz45nhE/JAChP++yD5vSoKdgpt+bInHXYK+wL5skYKKx33B9MSx+Ge96Cg4RP0QAoT/Psb+ckhHftmz/cS3/kWdwHH4fXX9xLhA/fAexWPBoB9BU8KrrgF6K3A5PcRGvhiNfxiB/sHVkomJlbM9wce+GI1/GIH+zblJfcqHg4rHde9370Bx+HJvd+9yeEDQAr5ogS/s7O/v2OzV1djY1dXs2O/H70Ec3mdo6OdnaOjnXlzc3l5cx8OKx3vJArH4YcmHYfhE9lAChPqx/m6JgoT1SUKE+ojHYvrQHb5WncSo/i8E3D3iBb3BAb3cPlaBS8GE7D7TPz6+0z4+gUvBg6L6vj7d7wdDrkd93JHCovq+Pt34yAKs/icE+j3ABb3FgbJ+F3J/F0F9xYGz/laBTEGV/z7QfirBTMGQfyrV/j7BTEG9wvPNh2L6vj79Qr3ABb3FgbJ+F3J/F0F9xYGz/laBTEGV/z7QfirBTMGQfyrV/j7BTEG9wzeKgq5Hfd6gAqiCqoKqAqP+IAgHSgK4yAK95bhE+hJHSj4fDYdKAry7RL3NOOV4ZPjE+hJHRP8KfiLKgqoCpf4gCcdKArvJAr3Ir/L4cm/E9RJHRPm8fiIJgoT3CUKE+YjHSQdeR0OJB3T9xR5Hfdo+UwgHSQdzvcZeR33AvnMIQokHd7tAfeT49sd92H5VyUdDr8Kvh2XCloddx0OWh3T9xR3HWr4MCAdWh3O9xl3Hfsb+LAhCvsQ5cJ297Lf95TfAdLh6O/s5QPSFuH3svcUBpcG9zb7sgXqBvs9978F7KXC0u4a9xsu2/szHvtqBvdq++gV+xT3lPcUBvPFXDk5UV4jH1T83FQKTB0Bn+X4Al4dDkwdxMkBn+X4Al4d+bME3cG92Y8fUQZdhW13XRtdbZ+5hR9RBj2PwVndGw5MHb8gCp/l+ALmE/ZzCvsh+a4V0QYT7tHlBRP2Jwr7EOWd3/dj3/ev3xKf5fcr7/cH5hN+cwpP+1oVwwYT/lUKTB3O7QGf5fcm4/cYXh1ejR1MHdrTAZ/lw/egteYDcwr7G/nJIR0uCuuKCsz3BBPeMgps14Ad+1T8jhUT7jEdIgrC9wABseX3DPcAjAr5sQSpo6OpqHOkbW5ycm5tpHOoHw4qHdj3BBLl4YgtChPoNx0T9vcf2BWqpKWpqnKkbGxycmxtpHGqH/dFFqqkpamqcqRsbHJybG2kcaofDiod0/cAAeXh4/cAAzcd93jTKwpLHcL3ABKx5fcJ9wD3DNw72xO1AEIKE3UAOwoTtIA5HRO1AD0dE78AjPmxKwokHdeKCoHhgPcEE8g4ChP09xf5VCkKJB3S9wAS94r3ACrhE8g4ChPw93D5TysKIgrH9wQSseWmLQqn5RPSRh0T/jL5YikKKx3r9wQSx+GULQqV4RPyQAoT/jL5tikKi+r4++QK9wAW9xYGyfhdyfxdBfcWBs/5WgUxBlf8+0H4qwUzBkH8q1f4+wUxBvc/wR0oCuuKCoLhf/cEE+hJHRP0XPiEKQokHdL3AAH3ivcAA70W+Ijd/CgG+CD4sgXh/G45+A4H/CD8sgX3jvlLKwpMHcL3AAGf5fcd9wD3DV4d+bEEzR0wHRLB4/eW3xO4KR0TeDIdE7g0HQ6NCpP4sCAdMB3IyRLB4/eW3xO8KR0TfDIdE7w111HvHpPVFU9np723o6XTmR/3NqsFXQczVU/7AB65+LEoHTAdwvcZEsHj95bfE7wpHRN8Mh0TvDXXUe8ek9UVT2envbejpdOZH/c2qwVdBzNVT/sAHi35MCEKMB3DIArB4/eW3xO2KR0TdjIdE7Y0HSz4rBXRBhOu0eUFE7YnCjAd0u0SweON4/Pjc98TuSkdE3kyHRO5NB0Tti34uyoKjQqb+LAnHTAd3tMSweOS96B63xO6KR0TelWWrXTFG5ufjIyTH5AKE7o0HRO0MvjHIR37Zs/3FtVjdvhh2xLB4/eW3xPcKR0TvJRgonOyhHJsGE8KrrgFkAoT3DQdDjAdt73fvRLB4729372j3xO+gCkdE36AMh0TvoA0HRO/gLn4oEcdMB3PJArB43smHWHfE6yAKR0TbIAyHROsgDQdE7UA9fi4JgoTqoAlChO1ACMdLAoSmN/3IfEm7/c2/wBWgAAT9vg9rApZbh++c2KkURs2WVP7BHof3oQFE/rClJmzuRu6nmQmHzZ1BTV2VU4+GizIU9SJHsyNurSd1AgT9j+nvWPRG/ui2xVpiHOpuRqyprDBmB7ImgVxByZxXVGHHvfu94kVE/r7NQb2laS1vRsT9rehYSCVHw6YHfc8dxLb/wBNgAD//7KAAN/3vuMTtvfXfxX3IOL29z73PjT2+yBBUGFfcR/3kjcHE3b9WgcTetcGE7qO2wUTtlGpx2nVG4bbFStR1/cN9w/F1e3iwkH7D/sNVD8yHw6WCiMKx/cUAdFbCmSJHSMKwvcZAdFbCvsh+XohCkQdptlSdvhs2xLR4/dTwhPv98ZpHaKl9wKR2tag9wQZM5EFE1fDHfsv3CP3FXsfE+9oZXwdE09iZQUT71kdjh3R4xPo985/FfcXHQU7e1VjRxspUdX3D/cPxdXtz71jRZsf45EF9wp1Oc37Chv7KCv7Afs8+zzr+wH3KB/7Ivj2Nh0jCtLtAdHj9wJbCl35BRXj7TMGDpgd9zzyHRO896l/FRO61cetxakfE3qOOwUTfM0KE7y4Cg6YHUH3hovyHROu96l/FROt1cetxakfE22OOwUTbs0KE664ChOW95b4JFgdf9tc9xodveP3UvdUN99aCv8ATYAAE64A99z43BUTrQD3APsU9wQd+z7iIPcgHxOsgNXHrcWpHxNsgI47BRNtANf43MgGE7UA1U4HE60AvzcHE7UAVwcTtgD7AAYTrQBd/OLfHQ5/2/f22/dwdwHF4/fJ4wP3kfiiFfcMtaduoWWaXBmoZV2eVhv7Jysp+zP7M+sp9yf3Juvt9z33HnD3C0nfH/cBsXPL+x9aWbJKpTmTGXdBu4e1ga96GT9wBdP8nhUpUsv3BfcFxMvt7MRLJPsSUk4qHw4sClIdDiwKxfcUUh37SPezIB0sCsD3GVId+674MyEKLArBIArN4/e65xP2QB37r/evFdEGE+7R5QUT9icKjgosCtDtAc3j9uPu5wNAHftP974lHQ6eHSwK3NMSzeOc96CU5xP6QB0T/vup98oV96DT+6AGDvtOz3Z29yjb9z/V9ynbEs3j9yLX1+cTf/fJfxWjjAUTv3Jqf21rGlmtbcMeE3+xq5Wbmx8Tv4wduKirt5vAGZAdjx0eE3/YHQ4sCs0kCs3jhSYde+cT7QD3yX8V9wTdzuqnH5AdE+yAjx0eE+0A+zzo+wH3Kh4T7ID3H/fZFfu6Bu2Zwr7dG9nEXCWTHxP1ADn3uyYKE+sAJQoT9QAjHaIdRR311QH3fN8D93z4yBVp+zZB9zb8XN/4XPdg1ftgrQe3oae1Hvcq1fsqBidbVy0fDjkKhAoT9joKE+74ggcT7TsGE/U7HRP2NgoOOQroyRLH4/e+3zvbE/cAOgoT7wD4ggcT7oA7BhP2gDcHxnNKsEEb+xktIfsr+yvrIfcbHxP3ADYKjviDKB05CuL3GYQKE/cAOgoT7wD4ggcT7oA7BhP2gDsdE/cANgr7HfkCIQo5CuMgCsfj977fO9sT9YA6ChPtgPiCBxPtQDsGE/VAOx0T9YA2Cvse+H4V0QYT84DR5QUT9YAnCjkK3uUSx+Py7+rfO9sT94A6ChPvgPiCBxPvQDsGE/dAOx0T94A2Ctf5LeUKOQry7RLH4/Tj9N872xP3gDoKE++A+IIHE+9AOwYT90A7HRP3gDYKYfiNJR0OOQr3B9MSx+Oa96Ca3zvbE/aAOgoT7oD4ggcT7kA7BhP2QDsdE/aANgoT94D7GPiZIR37Ntvqdq/b9x3V9yPbf3eEChP7APe794kV9ygGNn1UVzwbMFPP9wH3AcHP6N3EVTKVH/spBo38dRX3JuLV9xAf92W/1VcHE/cA92cHE/aAOwYT+oA7HRP7ALwKDrcdpB2gdvho1fc8d+MgCu/f95DfE/bHHSnPFdEGE+7R5QUT9icKeAoiHQH3ud8DQQoO0R33aPikIB0iHc8gCve53xPoQQr3AfigNh20HXgK0R33cPikJx0iHerTAfe53wNBCvcH+LshHftmz/ci1fgS1d7tEvex4zvftNcT9tsW+CdeClwdBxP692H4ryUdDiId2yQK90C/0N/GvxPUQQoT5vfK+KwmChPcJQoT5iMdrR1vCrIKDm8K0/cUsgr3jfk6IB1vCs8gCvf4gR33Jvk2Nh2gdvimd/dcd78dDqB2+KZ391x34vcZvx0qYh37EOXCdvimd/dcdwHl3+rvA+UW3/ceBvP3AvdC+4wF8Qb7b/fF92X3dQX7BAb7lvuxBfhlNwf3M3wKpwoOTQrT9xSwCmz3aiAdpwr3EycVyAa/94YFOAYOqx1NCgH3zd8D95b3xBXCpAX7k/tpQfh01ftL97oH4rNszlNxBfcFB+xYvioe+xVB9xEGtqRyYB/7MQc1YwUOoHb4aMlN1RKz2T3f9xrf9xrfE66zFt/35gblqbO1t51lMR776N/35gflqbO1tZ9pLR776N/38gf3HGbDNlNiY0t6Hs9/aq9UGxO2WWZpU3kfE9aJ2QUTzj4GDqDgChPMXwoT1FcKE7SJ6gUTrD4GDpkd5/cUEuvZPd/3kN8T1l8KE9pXChO6ieoFE7Y+BvdARwqZHeL3GRLr2T3f95DfE9ZfChPaVwoTuonqBRO2PgbRYh2jHZkd7yQK69k932smHWvfE8pAXwoTzEBXChOsQInqBROygD4G96LbJgoTyUAlChOygCMd+yrV7OAKE+b3sfsqFdwG6MTD4h/38Af3BFLk+w0eE+pXChPaieoFE9Y+/Kbf99EGE+btxcDd26tWKR772Qdic3BjHjgGDiMKAcXj98jjAzMdDiMKx/cUAcXj98jjAzMdZfiqIB2OHcXj98jjE+wzHfsh+KYV0QYT3NHlBRPsJwojCtLtEsXjmePz45njE/IzHRP++yD4tSoKIwrH9xQBxeP3yOMDMx1t+KonHSMKx/cUAcXj98jjAzMd+wL4qkYKIwre0xLF4573oKDjE/QzHRP8+xv4wSEdIwoBxeP3yOMDrn8V4gautwVvsrt7wxv3Juv3APc91njJarof1egFNAZoXwWnZFubVBv7Jyz7APs9QZ1MrFwf91N+FWdslZ5zH/d096wFmW2SZV8a+w9SQSoe+y73WRX3D8PV7a+pgXijHvtz+6wFfamEsbcaDiMKzyQKxeOHJh2H4xPZMx0T6sf4siYKE9UlChPqIx0sChKV3/c34Dbh9zX/AFaAABP6+ECsClhuH71uYaZXGyZLIPs++z7LIPC/taa9qB9YqLdxxBv7kdsVWmvX9w33DavXvL6qP/sN+w1sP1gf9933iRUT9vs1Bu6Tpb25GxP6uqZaJ5IfDp0d+xV29x7b+B7b9zx3EtvaPN/3vuMT9tcdE/pDUGlMbB+J950FE/Y9Bvd+/RYVLlLO9xb3FsXO5+fDQvsQ+xBTQi8fDvsVdvce2/ge2393Er3j977f//+xgAD/AE6AABPs+Jz7KhUT3Pk8BxPaPQYT6oo2BcprUK1DG/syRfsX+yb7JtH7F/cyHxPs0Miqvqcf+3AH+yr3bhUvU9T3EPcQw9Tn58VI+xb7FlJILh8Oi+cKE6hqChPIah0TsGUKE6hyHQ6L1fgQ10HV0/cUEvd41ELfE6RqChPEah0TqGUKE7RyHfdn+KQgHYvV+BDXQdXO9xkS93jUQt8TtGoKE9RqHRO4ZQoTtHId9wH5JCEK+xDlrecKOO8T1GoKE+RqHRPYZQoT1HId9wv7tBUT0mYKkQojCsf3FAHp4feS4QP3yn8V9wzlw+njX7b7OKYfK5tnm8EauK+u2dO3Y1OXHuORBed7R9n7Fxv7FkRHLzW5XPcucB/3CHejeV0aW111PTdbss2BHjOFBSeT3zz3HhtdiR0jCsL3GQHp4feS4QP3yn8V9wzlw+njX7b7OKYfK5tnm8EauK+u2dO3Y1OXHuORBed7R9n7Fxv7FkRHLzW5XPcucB/3CHejeV0aW111PTdbss2BHjOFBSeT3zz3Hhv7KPl6IQpEHV73KlJ2+GzbEunh9zLCtOET74D3u2kdoqQF9wiO4MLnGuNftvs4ph4rm2ebwRq4r67Z07djU5ce45EF53tH2fsXG/sWREcvNblc9y5wHxNXgOgdE0+AkjHQQvcFfQgT74BoZadmBbaVrHtrGnF5em5pc6ydfR4TT4BiZQUT74BZHY4d6eH3kuET7HUd+yn49hXRBhPc0eUFE+wnCvsQ5aHb+B7bEunh3e/T4RN8dR1H+14VwwYT/FUKi9v3ltr3ddsS1+D3keFf4xP01/iKFfyK4PiKB+jAutceE/jUvl5LRlVaPo0fX4wFOge3jAUT9OiN22EvGjY9YjYeSzvLBvcY9wvP9xfrTM4zoh8T+NCiscjTGvcBNdP7EB4T9PsOLzv7IB8OIh0B93XfA/gOFvci1fsiBlx1orwf98rbCvvKByi9XPIeDovV9z/V9x3VAfd13wPN94kV9zMoBii9XPIe9yLV+yIGXHWivB/u917V+173HdsK+x37MwcOIh2j9wgS93XfE9DjHQcT8PcgNwcT0PcbHSi9XPIeE/B/+L5YHUQdsNX4EtUS93Xf2MITfs4dOa1d0n0eW1enZgW2lax7axoT/nF5em5pc6ydfR4TfmJlBRP+9h0O+xDlrdX4EtUS93XfjO8T8M4dKL1c8h4z+2oVE+hmCj4KEuXf94rfO9sTuPebfxUTtD4dE3Q1BxN4SgoTuEUKDnYdg4kdPgroyRLl3/eK3zvbE7z3m38VE7rXw67KqB8TejUHE3xKChO8RQqp+PsoHT4K4yAK5d/3it872xO295t/FRO1Ph0TdTUHE3ZKChO2RQr7A/j2FdEGE67R5QUTticKPgry7RLl33bj8+N+sR37AvkFFePtMwb3VCklHQ52Hfj6BNEGSfcUBS0GDnYdO/j6Rgo+CvcH0xLl33v3oIXfO9sTuvebfxUTuT4dE3k1BxN6SgoTukUKE7Qi+REhHftmz/cW1WJ2+KZ3EuXf91DXed872xPa95t/FRPZPh0TuTWOBxPcc20FTwoT2q64BfimN/vQByxYUjg/Z7ryHvfSN/vpB/sSz0D0Hg4+Cte9370S5d+mvd+9rt872xO9gPebfxUTvUA+HRN9QDUHE32ASgoTvYBFChO/gKn46kcdPgrvJArl32SyZCYdbN872xOsQPebfxUTrCA+HRNsIDUHE2xASgoTrEBFChO0gOX5AiYKE6pA5goTqUDfChO0gCMdi+FKdvimdxLB+IATcPeLFvUG91VyChOw+y78UPsu+FAFLwYOi+P4Tne9HQ6kCveGRwqL4/hOd+MgCp/4xBPo9xEW9AbR997R+94F9QbzcgpI/E4/+AQFMQY//ARIUB33H882HYvj+E71CvcRFvQG0ffe0fveBfUG83IKSPxOP/gEBTEGP/wESFAd9yDeKgqkCveOgAqhCrAdmwr3E/k6IB0/HeMgCsH4hBPoQR2j+TY2HT8d8u0B9zfj8+MDQR2k+UUqCpsK9xv5OicdPx3vJAr3JSYdE9xBHRPs93X5QiYKE9wlChPseaGhf6UbDiIdAd34SE4KDiId0/cUAd34SE4K90n4miAdIh3O9xkB3fhITgra+RohCiId3u0B95TjTgr3QvilJR0OvwqrHaMdLwoS2eP3nt8+2BO495h/FRO0MAoTdJE5BRN4Lx0TuC/bV/EejdUVU2OlvbWbp9ubH/c+rQVnByVPUfsCHg4vCsf3FBLZ4/ee3z7YE7z3mH8VE7owChN6kTkFE3wvHRO8NwqO+LAgHS8KyMkS2eP3nt8+2BO895h/FRO65cm4vKMfE3qROQUTfC8dE7wv21fxHo3VFVNjpb21m6fbmx/3Pq0FZwclT1H7Ah60+LEoHS8KwvcZEtnj957fPtgTvPeYfxUTujAKE3qROQUTfC8dE7w3Cij5MCEKLwrDIArZ4/ee3z7YE7b3mH8VE7UwChN1kTkFE3YvHRO2Nwon+KwV0QYTrtHlBRO2JwovCtLtEtnjiOPz44DfPtgTuID3mH8VMAoTdICROQUTeQAvHRO4gC/bV/EeE7kA3B0TtgAo+LsqCi8Kx/cUEtnj957fPtgTvPeYfxUTujAKE3qROQUTfC8dE7w3Cpb4sCcdLwre0xLZ4433oIffPtgTuveYfxUTuTAKE3mROQUTei8dE7o3ChO0LfjHIR37Zs/3FtX4JNsS2eP3ZNd53z7YE/T3mH8VE/IwCpE8BRP4cGoFTwoT9K64BffUB/coOdX7FPsKPUsjdR7khAXDmbCy2RvZumAxjB/7TmYF+wl0WFwxGi/bV/EejdUVU2OlvbWbp9ubH/c+rQVnByVPUfsCHg4vCre9370S2eO4vd+9sN8+2BO/gPeYfxUTv0AwChN/QJE5BRN/gC8dE7+ANwq0+KBHHS8KzyQK2eN2Jh1u3z7YE6yA95h/FROsQDAKE2xAkTkFE2yALx0TrIA3ChO1APD4uCYKE6qAJQoTtQAjHTQKEsHj977fWgr/AE2AAD/XE5w1HROaOB0TWY4/BRNsRAoTnDodE5kzCg6cHV74qiAdNArIyRLB4/e+31oK/wBNgAA/1xOeADUdE50AOB0TXICOPwUTbgBEChOeADodE5yAMwqE+KsoHTQKwvcZnx37J/kqIQo0CsMgCsHj975VHRObADUdE5qAOB0TWkCOPwUTawBEChObADodE5pAMwr7KPimFdEGE5cA0eUFE5sAJwo0CtLtEsHjkePz45dVHROcQDUd3MSswqgfE1ogjj8FE2qAwwofE5xA7QoeE5wgMwoTm4D7J/i1KgqcHWb4qicdNAre0xLB45b3oJ7fWgr/AE2AAD/XE50ANR0TnIA4HRNcQI4/BRNtAEQKE50AOh0TnEAzChOfAPsi+MEhHftmz/cW2112+GXLS9cSweP3hNd531oK/wBNgAA/1xNNADUdE0yAOB0TLECOQAUTzgBybAVPChNVAK64BfimNwcTTQA6HRNMQDMKDjQKt73fvRLB48G9373HVR0Tn8A1HROfoDgdE1+Qjj8FE2/ARAoTn8A6HROfkDMKhPiaRx00Cs8kCsHjfyYdhVUdE5ZANR0TliA4HRNWEI4/BRNmQEQKE5ZAOh0TlhAzChOagMD4siYKE5VAJQoTmoAjHcUdDk0K0/cUAfeW3wO6Cvsf+aIgHcUdqPhoWB37EOWt1fjG1RL3lt857xPwugr7NftqFRPoZgpNCgH3ld8D91/3xBXBpAX7VQc0vlrnHvcz1fszBmJ5nrYf93wH47NrzlNxBfeZ+5pB90b7dQc1YwUOMB3L9wQSweOILQpv3xO5KR0TeTIdE7k0HRO2YPi0KQojCsb3AAHR4/D3AJoKivj5KwosCsn3BBLN45ItConnE/lAHRP2+3v3tykKLArE9wABzePt9wDj5wNAHfsi97IrCjkK5vcAEsfj6/cA6d872xP2gDoKE+6A+IIHE+5AOwYT9kA7HRP2gDYKE/eAjviBKwqcCiId1/cEEvdN9wSH33z3BBPoQQoT9Pc1+KgpCpwK+2bP9yLV+BLV0vcAEveo9wAw37TXE/bbFvgnXgpcHQcT+veO+KMrCm8K0vcAEvfr9wAsgR0T8Pez+TkrCiMKy/cEEsXjlC0KleMT8jMdE/4y+K4pCj4K6/cEEuXfcS0KerEdUPj+KQqL4/hO5Ar3ERb0BtH33tH73gX1BvNyCkj8Tj/4BAUxBj/8BEhQHfdTwR0/Hev3BAH3Mi0KA/ce+yoV0AbSsKXEnx/3a/jpBS8G+yv8Tvs1UB33WfycBagGeFkFcoF8gGYbTgbX+T4pCiId0vcAAfeL9wBOCvdv+JkrCi8Ky/cEEtnjgy0KfN8+2BO5APeYfxUTuIDlybi8ox8TeICROQUTeQAvHRO5ADcKE7YAW/i0KQo0Csv3BBLB44wtCpNVHROcgDUdE5xAOB0TXCCOPwUTbIDDCu0KHxOcIDMKE5uAK/iuKQr4BcZVyfdsyhL3I9T3GNETuPeT+AUVurGirJsfE3hok6R7sRuVmoyMkB/HeQd8hZCcH/cMB+Fcvjc/WWBLfx7ShgWrk6CcsRuyoXVbHyN2BRO4TH5laVgaUb5nyB6UxhVsepqkpJuXqZEf4ZwFcwdca25XHg74Bcv3a8sB9yXU9zfUA/e/+AUV58rO9PJMzy8vTUckIspI5h/LBFlstM7NqbS+v6liSUltYVcfDi4KEqX4uBPYMgpd/EIVE+gxHYvd957d91jfAdvh97DlA9v5WhX9WvdsB2MK91j3+d8G+4F/HY8KoHb5Bt/ZCg6gdvkG39P3FNkK91BHCm4d7+H3tuED9075BhX4DPeDNfsv/Az9WuEGDlodAe/hA573shXc+7Lh97L3g9/7g/eU+ALf/Fj76DoGDvsVdvcq3/iy3xKX4ffI4Y3hE/iX+yoV4fcqBhP0+CD7KuH3fgYT+DP5BvvCBlf8ggUwgXJiWRtiBvdAFqComLORwLj4OBj3HfyyBg4qHWEKDrodsx0oCi0dkhboBvcx9+IF++Lh9+IH9zH74gXoBvs79/f3Mff3BS4G+yf74AX34DX74Af7J/fgBS4G9zH79wUOe9//AQuAAN//AN6AAN8SrOT33eVK5BP498B7FRP09yz3BeL3EOdUzyioHxP44aS3wNoa9wEk1/se+xEkRCd+HuWFBcSUyK/cG+TJZE0vO2xSjB9BjAU2B9WMBRP01YzjYywaOUNXIylCutWEHjKFBRP4+wmR9wY59ycbDs8K+KYW+Vr7DAcTnIgdE2yUHQ5TCujJEtHh97ThE174phb5WvsMBxOeiB0TbpQd+yT5oygdKArJHQ4oCuf3FMkd9wT4RyAdi9/4st8B+GHhA58W0gbjscXkkh+z+HMF91n9BuH5WvwABl38vQVfh3huZxtRBg6gCrEKpx1uHdHh97ThA9EW4fkG97T9BuH5WvxgBg6vHSIKYB0O2h2L3/kGdwG/+IoD9yEW0AbHsaXEnx/3dvkHBS0G+y78TPsz+EwFLAb3VfycBa0GckYFcIF7gXEbTgYOi9/5BnfoyQG/+IoD9yEW0AbHsaXEnx/3dvkHBS0G+y78TPsz+EwFLAb3VfycBa0GckYFcIF7gXEbTgb3N/lPKB0oCgGk5fch4fcj5QP3lBbh1gb3JZ3j8/cyGvcyM/P7JZ0e1jU/B/sjejMj+zIa+zLjI/cjeh77IferFfTA0+OcHvwYBzOcVtP0Gvd3+1YV+BgH5HvBQyEaIVVDMnseDqIKoHb3gt/4GHcBveH3yOED+FAW4fla0h0O9xkdx+H3tOF24RP4x/laFf1aBxP0+Ev7KuH3fgYT+Er5BjX9Bvu0+QYGDovf+QZ3AcLh9wjh9wjhA8IW+H75Wu8d9xkdruH3COH3COFx4RP8rhYT+vhk+yrh934GE/xP+QbvHfsq93433/kGdxLR4fDh8OETvPeV+yoV4QYTfPcq90/5WjX9Bvu0+QY1/Vr3TwcOi933nt33rHcB5eH3sOUD5flaFf1a92wHYwr3rAb3DH8di9/3nt/3qHcBruL3ZeXF4QOuFvcbBvcy6Nv3G/cdLt37Mh9b96g0Bvcb/QYVW/eeuwb3AMBdMjRWX/sAH/fJNxXh+Vo1Bg6L3fee3fdY3wH24few5QOp+QYV2P0G92wGYwr3WIzf+zgG969/HYvf957f91TfAfTf5eL3Fu4DkBa0BuO0xeSPH5/4cwXb/Qb3Bwb3FNTb9xv3HULd+xQfbwaK96gF+4sGcfy9BV+Jdm5nG28G+BAWePeengbZrF0yNGpfPR8Oi9/3et9b3/eodxKf4fcK4vc+7hPe93QW9xEG9zLU2/cbHxO+9x1C3fsyHmX3qDQGE977zPsK98w1/Vrh9873Cgf3CPt6FW4GE773nqgH9wCsXTIfE940al/7AB4OIgpfHQ573/eI3/eK3wGx5gP3wHsV9yHk6fc+pB8wBvsIdlJLNRsmTuL3MYIf92zf+2wG9zKUyOPwG+HES/sInx/nBvc/cTPo+yEb9wIdHw573/eI3/eK3wH4a+YD98B7Fe4K94Mt9xn7PPshMy77P3Ef5wb3CJ/Ey+Eb8Mgz+zKUH/tsN/dsBvsxgk40Jhs1Usv3CHYfMAb7PqTkLfchGw5hHZ8KuB2gdvgY3/cu3wH3DOH3quED9wwW4feFBuHIyOLXwU81HvuG4feGB/chN+T7DkROZFNxHveN9xIde99cdvfN3/eJ33t3Ep/h4+X3YuUTt/gWexX3G8b3BfeV95dQ9wX7G/sSTyf7eYUfMwYTb/fNNf1a4ffN4wcTt/t4kcYm9xMb3wRBb9r3Y/dkp9vV1qg7+2T7Y248QB8OWh0ByuX3tuED+KUW+Vr7agf7My47+xsowkTscR/7Pfu/BeoG9zb3sgWXBvcU+7IG+xT4BhUjUbjd3cW68x/3FPuUBg6L3/fE3/cu3wH3DOH3uuUD9wwW4feFBuHJyOTiw1IvLEJP+w8eNwf3RPcC5/cn9x0q6/scR1FlU3If94z3Eh2L3fee3e/fN/dIEvcG4few5RPsmvimFe78pvdsBmMK7/c43/s4BhPc6zUHE+wrKAf3xfue7B2gdvfF3/eB3y0d9Pe1FSP7tQXnBuL3jAW3mpuYpBug+8Xh98WgBqOafl+bH+P7jAXnBiL3tXPNZqpgjhn3JveBBd/8bDcH9yb7gWCJZWxzSBnG9+UV96QG+xz7cQUOe9/3Z+H3qd8BseX37OWzCvsATev3R4kfnY6yj8KCunkZ9whgo4a0jwj7HnxQQi0b+zz3/xX3HZrG1ekb9wDIKftGjh+Bil2GfI/7DbkZYJxQlGGGCA5uHZn42QP3fRbsBvc4+KoF0aCiobYbmd9dBlFZWTxzH/sc/Fb7RPjXBTAGDvsVdvcq0fkUdwH3i933Q+ED+Iz7KhXh93BWBvsU97H3K/f3BTEG+yH74gX34jn74gf7IffiBTEG9yv79/s0+/cF5Ab3K/fjBfvj3ffjB/cr++MFowYO+xV29yrR+RR3Abvh9/fhA/h9+yoV4fdwOAb7kvex4B33yPvvBboGDvsVdvcq0feK3ffMdxLA4fe44XndCkf5FDX7zPu498w1/Vrh99D3uPvQBhP6zwYOqgqgdvd53/ghdy0d8fd5Ffcv+3nh93n3S9/7Pwb3XPghwAr3XvwhBfsjBg77KvdwRdH5FHcS+ILhE7D4gvsqFeEGE3D3cEYH+zH3suEd+1j7+QXtBvcr97f3K/u3BbcGDvsVdvcq0fc83/gYdxKu4ffI4XvdCkX5FNId++YHE/rRBg6gdvgY3/eCdwHR4ffI4QP3MPlaFTX9WuH3hQbh3Mj20L5TMR77huH3hgf3ITfk+w43QWJQbR4OYR2hHVMK9wfTEtHhlPegluETXfimFvla+wwHE52IHRNtlB0TX/ur+bkhHXvf94nf94nfAbHm9+rmswolT+D3NIIf9+oG+zSCTzYlG/s/990V9zOUyOHwG/DINfszlB8Oi9/5Bnf3B9MSv/iK/BX3oBPw9yEW0AbHsaXEnx/3dvkHBS0G+y78TPsz+EwFLAb3VfycBa0GckYFcIF7gXEbTgYT6Kf5ZSEdMB0SweP3lt8TuCkdE3gyHRO4NB0Oe9v36NsSxeI05/c94bvjE9z3wHsV9x3z7Pcv9yYs8fsXHxPsPlJmSmcfkvcjz6LWswjctqi/2Ro1igVSdnRIbB4T3PsOUlg1+1Ua+wKkML5YHlS+wHXJG9sEMU3S8I0f7ozL0OUb4shGKCZMRDEfDovV9zK1YdVrq/cq1RLl3/eK5UflE63lFveNBvcK1sXnHxPNz1i6N5QeE57SlbWzxhrlPcT7Dh77cAYTrfeN/FwV+zn3Mvc5BsqzbFhdY21MHxOubvd8Ffsc9yr3HAbOtm9eXGBtSB8ORR3xHQ5FHdP3FPEd9yhHCkUdAfcp3/dd4QP3ffhcFfez93k1+y/7sfym3wYOoHb3fNX3KtUB9ynfA7T3fBX3APt83/d89wbV+wb3Kvez1fwH+3T7AAYO+yr3dEHV+BLVEp/f98bfjd8TeJ/VFRO4+3TfBxN09yr4HAcTtPsq3wcTdPd0BxN4Nfhc+8UGW/v8BUmCdG1hG/cQFpuhlqiQsLX3uhj3JfwSBg4sClIdDp4djgqgdvimdwH3lt8DlhbrBvcr95MF+5Pf95MH9yv7kwXrBvsx953VHQUOf9v/AKyAANr/AI6AANsS2+NG5vdv40XjE/L3vn8V9xnfx+vNXMA+oR8T7M2ds7O9Guc+xPsO+wQ+VjaBHuaGBbGQtKTJG8+2cGFdY25OjB9UjAU7B8KMBRPy04y6aFEaWVlsPD9ZrL6HHjOHBSmQ3033FRsObAoS6d/3id8TeGIKE7hrCg5sCujJEunf94nfE3xiChO8awr3Y9QoHWwK5/cUEunf94nfE3xiChO8awr3RYAKoHb4pncB5uED+EgW9wwG+6X3nccKDqB2+KZ35/cUAebhA/hIFvcMBvul953HCuH37CAdi9/4CNUB+FLfA6QWyPcOHfdZ/Fzf+Kb7+ukKWgYOi/I5dvimdxK03vf43xN4rxbfBpP38vcR+/IF9Ab3DvftBfvt3/im+wIHE7j7KPw/+yn4PwX7AwYOoHb3d9X3eXcB5t/3jt8D5hbf93f3jvt33/imN/t5+473eTcGDiMKAcXj98jjAzMdDkUdAeXf95DfA+UW3/hc95D8XN/4pvw4Bg6dHZYKRR0B95bgA/eWFuD4XPdT1fxnQfdTBg6wHT8d6MkBwfiEA0Ed9zn5Oygd+xV2+fB3AaLl9yXg9yPlA/eW+yoV4PdGBvcfm+np9xYa9xYt6fsfmx73Xjb7XQf7IHssLfsXGvsX6i33IHse+yX3hRXgwsXlmB77zAcxmFTF4Br3evswFffMB+R9wVE3GjdVUTJ9Hg6hCqB29zLb97h3AdDf96XfA/g+Ft/4prkKDlkK+Fx3EuXf95Dfgd8T+OX4phX8pgcT9Pgu+yrf93QGE/hB+Fw3/Fz7kPhcBg6L1fhcdwHD3/cJ4PcJ3wPDFvh7+KbUClkK+Fx3EsPf9wng9wnfZt8T/MMWE/r4Vvsq3/d0BhP8XPhc1ArqCt/f39/fE7z3lvsqFd8GE3z3Kvc8+KY3/Fz7kPhcN/ym9zwHDovW907V91d3Adzf97DjA9wW93SHHfsg91c3Bvd05R2L1vdO1fdXdwGu3/dz477fA64W9zeHHTz3VzcG9zf8WxU8907a9xMd969AFd/4pjcGDovW907V9w3VAevf97DjA5X4XBXh/Fz3dIcd+yD3V/s+BvfK5R2L1vdO1fcN1QH3pOD3KuMDkBag9w4d3vxc9yEG9wnMx/b3AErH+wkfU/dX+4npCoIG+CyCFVP3TsMGx61pT1Bpak8fDovW9zDVX9X3V3cSn9/3Mt/3K+MT3veaFvchBvcJzMf2HxO+9wBKx/sJHlL3VzcGE977dfsy93U3/Kbf93v3Mgf3IfswFVIGE773TsQHx61pTx8T3lBpak8eDpEKkh3I5QP3xH8V9wzi1PcNpR8xBkN3WGFDGzNUxvCBH/dF1ftFBvCVwsbjG9S+YEGfH+UG9w5xNNb7DRv7Jyv7APs9+z3r+wD3Jx8Okh34VeUD97x/Ffcn9Ar7J/sNNED7DnEf5QbVn7621BvjwlAmlR/7RUH3RQYmgVRQMxtDWLXTdx8xBvsNpeJC9wwbDngKtB2tHaQdf9tcdvd41fc02393Ep/fx+L3e+MTt/gCfxX3F9Tu90b3RkLu+xf7DUQ2+y+BH08GE2/3eDf8pt/3eMcHE7f7L5XSNvcNG9sEQWLS9xL3ErTS1dW1RPsS+xJhREEfDqB292HV90bUAeTl94vfA/dm93AV+xX7cAXtBvcN92EF9xL7Yd/4pvtlBvscP1IkR7ZV2W8f5sYVPV+rxMS3q9kf9xH7RgYO+yrV7PcaHerf95HfE+7qFt/3ywbtw8Df17BZJh77zgdedG9mHmJBvgbkuMTlH/fsB/cPRtn7AklNcVFtHvcS7wcT9tUnBxPuvzcHE/ZXRQcT7kHRBw6L1vdi1fdD3zf3SBL3FN839133O+MT6vcUFvd0Bvcp3sr3BvcGOMv7KR/7IPdDBhPm9wnfBhPq+wkGE9rrNwcT6iv7Cjf3Cgf3dPxbFfsg92L3IAbnv2VJSVdnLx8OoHb3btL3O9UtHez3axU4+2sF6wbI90UFrZehkqkboftu4fduoAaqoYRplx/I+0UF6wY492t5uWKiYJAZ9zH3OwXV/JdBB/cx+ztgh2FzeV0Zu/eFFffLBvsv+zkFDn/b9w3V91vbAcXj98jjyh0sU9H3CIgfjJGRjJEbq4y5hbJ5CF/tnYuvG5iMBT53WF5AG/so95kV35u/vNsb68RC+w2MH4iCgYmBG2WKf4snuWecW5FoiQgOi+NIdvhc1RKw+LMTcPd6FvUG9x/4EgW8naukuBuV1XQGP1FgPnAfE7D7BfvW+zD4TgUxBg5ZClZ2+KZ3EveW3/c43xO8+I77KhXfBhPc93ReB/sF91PVHfsx+50F6wb3K/eTBfuT3/eTB/cr+5MFmAYO6grh98DfE7j4cPsqFd8GE3j3dDoH+1n3U/eZ950F+woG+437lgX3ljX8puH3lgf3l/uWBbQGDlkK9y3V93l3Eubf947ffN8T+viC+yoV3/d0BhP8RvhcN/t5+473eTf8pt/3d/eO+3cGE/rQBg77FXb5PHcB95bfA/eWFvsq3/cqB/dg+KbeCg77KvdPQdX4gXcS95bfE3D3IGYV9woGE7D7Bd8HE3D3BfcJBxOw1SQH91L4gd4K91L8gQUjBg7vCvh53xOw+Hn7KhXfBhNw93Q/B/sg91jFCvtX+6QF7wb3J/dq9yf7agWwBg5ZCt/b97h3EtDf96XffN8T+viD+yoV3/d0BhP8RvhcuQr7lQcT+tAGDrcdYR2iHWwK9wfTEunff/eggN8TemIKE7prChN00+ohHZIdxeX3xOXKHTNVxvCBH/fEBiaBVFA0G/ss934V8JXBxuMb4sJQJpUfDj8d9wfTEsH4hPwS96AT8EEdE+ip+VEhHaB2+Q/Wi3cSpfi4E7ClFuMGE9D3TvkP9079DwXjgwoOi9/4wt8SlOUz943b940z5RPklhYT1PeN3wYT5DGMRPcP9zAa9zfe9wf3CvcK3vsH+zf7MET7DzGKHhPoN/eN3/sYBxPk2sDC9wn3Ahr3afsM9yn7P/s/+wz7Kftp+wLC+wnaVh4T1PsYBg5NCgHG+H8D+JgWrdVoBmd9oK6AH/sd+FIF7G1hsDcbU0HKBq+ad2eWH6Q6+1j8hwXjBvcl+A7W+4gFJ6qvad0bDiIdEpv3Uzff91HfE9j4uRaq1WsGX3OmuB/3yvHVBxPo/MpBBhPY9vxc3/hc91H7ygYzuFH3AB4Oe9v/ARKAANn/AOWAANsSvuNL4xPw98d7Fe7ztsi/H1XSBVJbNmVHGyVJw93fzcLxiR/BigXaB1WKBRPoSIo+recay8K05MjUZ1q1HsPQBcNaLLMzG/sdLD/7ATu1V99yHxPwKG5YRy8a+xDyNPctHg4iCgG95ffU5QP3wHsV9y7r9yD3evd6K/ci+y77Liv7Ivt6+3rr+yD3Lh/fBGZsmqZyH/d4+DMFm16UUEga+0RP+wInHvs097IV90TH9wTvsKp8b6Qe+3j8MwV7uILFzhoOi934UNVB90wS97DhRdETsMcW+HTd+z75CAYTqEUGE8g7bW0/HisGE7BB9078UPt0Bw6L3/jC3wG99ffD5QO9FviI3/weBo/BzdX3FM8I9yfZu8H3ABr3DjXf+yb7Li4y+x97HuWFBeuaxcHvG+m7WEJDZGspVx/7afsFUCj7KhoOe9/3n9/3c98SveT3vOVK5RP097p7Ffco9wDZ9xzmU88vpB8T+Nyktb7XGvcKM9X7HvseOUIhfh7lhQXKlLex5Rvju2RCOk1tQR9TN8MGE/Tn0GAtKztpNTZNreKDHzKFBfsJkd859y4bDqB29y7f+Gx3AfgY4QP4GBbh9y7h3zX4bC8G++r8cgU99/AH+4jfFfeI9+gF++gHDnvf99bd9y7fAcfl98DlA/e+exX3IfDw9yP3Ii/x+xxZVHdjaB+l92oF97/f/A4GXPwjBecGvaLEqMMb6cNNJydPTy85U7TbgR8xhQX7CpXlOvceGw573/fc3fc43xK95THp99DlE/T3wnsV9yfw6/cw9yYv6/sgOkxkV2kf9z+Zz9/3ABvZr2dTmx/lkwXvb0nP+xIb+2ZF+1T7fvtf5/sF9zQfjd8VE+wpTdHt7dPJ6+TGTSkfE/QhTE0uHg5uHfdW4wP3VhbjBveE2vdQ90f3YB7Z/HQ3+BYH+zL7Si37dPtwGg573/eh2/d13xK95VPl95DlU+UT8vfAexX3IfcB1Pce51bMN6kfE+zKpbO61xr3BDHe+xL7EjE4+wQ/s1zKcR4T8jdtVkovGvse9wFC9yEe3wQuSLXl3sHB9fXBVTgxSGEuHxPs9/EEP1mx18+7ttnZu2BHP1llPx8Oe9/3ON333N8SveX30Okx5RP09775ahX7JyYr+zD7Jucr9yDcyrK/rR/7P31HN/sAGz1nr8N7HzGDBSenzUf3Ehv3ZtH3VPd+918v9wX7NB+JNxUT+O3JRSkpQ00rMlDJ7R8T9PXKyegeDvcoxve+xgH3Kcj3SMgD98D3KKkd5vwHtQoO/wGggAD3EB0TwDEKdPdFFcj4GAYToFwGNQoTwIgK9zTE97PEAfc71PcTyAMxCvsa90RcCvcoxPccxPcCxBL3NHAKE/IxCvc4BGcdE+xdChPyPApRHfeBxAH31MgDMQqe90XQHfclxPc3wtTEAfgJygP3wXsV+0T7Avcj93j3ePcC9yP3RPdD9wL7I/t4+3j7Avsj+0Mfivc1FdvDw93YV8dCb3eCd3cfmPEF9y3E+2IGbPt2BccGr6GkkKIbs6pmXlxsaWNnbKKthB9MiAVKkcNd1BsO9yjE9zrE2cQS9zlvHRPsMQr3OASUCviAxAH3jMgDMQpW90V7HfcoxPcdwfcCfgoT8jEKivc4zgoT7EgdE/J6HRPsPB0O9yjE2cT3OsQS9zxxChP4MQqB9zilHXvV5cb3vsbk1AGa1cfI90jIydQDLh2K5RXoxdv3E/cUUdwuLlE6+xT7E8U76B/GBHh6kZd+H/cW92QFkXWOcW0aLWpVUh4x9ygV7KzAxJ6chX+YHvsW+2MFhaCIpKgaDnvV/wFmgAD/ACuAAPdV1BKa1fdRyFy690LUE/ouHXTyFcj4GAYT9lwGNQoT+ogKe9XxxPezxOfUAZrV2dT3E8jg1AMuHfsa8VwKe9XlxPccxPcCxOPUEprV0shcyPcSyFvK19QT/mAuHeUEZx0T/aBdChP+YDwKUR171fdHxPf71AGa1fd7yPcY1AMuHZ7yFcjXt8Rf95NYBvta+5oFWfdQB/sCxBX3AvcmBfsmBw571eLE9zfC1MTy1AGa1fewytjUAy4diuKyHXvV5cT3OsTZxOXUEprV128d2dQT/cAuHeUE18XB4t9VwkYfE/7AfR0T/cB5CnvV+EbE89QBmtX3M8j3YNQDLh1W8hXIBvcTwvcJ2e8et/uoUvddB0ErXvsG+w0aDnvV5cT3HcH3AsTl1BKa1dFtCtPUE/5gLh2K5RXbyLjUvG6xXJ8fE/2gSB0T/mB6HRP9oDwdDnvV5cTZxPc6xOXUEprV2nEK1tQT/0AuHYHlFeXE5Pci7F/iLz9RVTQ3wVTQHxP+wK8KE/9ATp28asIblPdUFV5zrbu8pa63tKloWoofW4praWUbDiIKAbvl99jlA/fAexX3L+z3I/d393kq9yP7L/svKvsj+3n7d+z7I/cvH98EKEz3A/dD90XK9wPu7sr7A/tF+0NM+wMoHw4oCgGY+NIDmBbfBvh++VoFNwYOi8T3s8T/ALGAAEod9yvIXLrq1PcTyBPbTApQCvcU+5OeCvsw99cVyPgYBhPXXAYT5zUKE+tzBhPbSwp7xHd290XE9wLE/wCxgABKHfcqyFy65HAKE7aQUQoTdpBUHRO2kPea+6NnChO2YF0KE7aQPApMj8da2Bv7t/fnFcj4GAYTtZBcBhO5kDUKE7qQcwYTtpBLCnvEd3b3RcTmxGXE96DEe3cSn9T3E8iicAoTtIhMChNyiFAKE7TI9577o2cKE6ywXQoTtMg8CkyPx1rYGxO1iPw99+lcCov3GVLE/wG9gABKHfcqyFy695PIE5pMClAK97P7kxXIBhNa17cHE5rEX/eTWAcTWn0KE5p/CvvQ91IVyPgYBhOWXAYTpjUKE6pzBhOaSwqL9xlSxPdExPcc7h33QMgTrTBMChOrMFAK97P7kxXIBhNtMNe3BxOtMMRf95NYBxNtMH0KE60wfwr7yPdEZwoTrNB6ChO1UIYKE7UwPAoTrTBRHXvEd3b3N+dYwtTE/wC9gABKHfcqyFy697PKE5tAUQoTa0BUHRObQPeK+6MV28PD3dhXx0Jvd4J3dx+Y8QX3LcT7YgYTq0Bs+3YFxwYTm0DWHfun9+cVyPgYBhOawFwGE5zANQoTnUBzBhObQEsKcx33AsT/ALOAAEod9yrIXLrZbQoTtpBRChNAgLcKExBgrh0TNmA8Hfus5hXI+BgGEwUAXAYTCQA1ChMKAHMGEwYASwpzHdXEdsT3E8LUxBL3eMqJyl/K9wrKX8oTtxBRChNAELcKEwhgrh0TKGA8HRMXAPun1RXbw8Pd2FfHQm93gnd3H5jxBfctxPtiBmz7dgXHBq+hpJCiG7OqZl5cbGljZ2yirYQfTIgFSpHDXdQbDnMd2MRzxPLuHYZtChOzRIBMChNAgIBQChOABICFHRMIAwBIHROABABdHROABICLHRMgBIBoHROABIBka3FdHhMoAwA8HRMSSAD7pNgVZx0TAzAAegoTBBAAhgoTFEgAPAoTEkgAUR1zHfcCxPeSxBL3Hsjlyl/K9wrKX8oTvkBRChNCAFQdE4JAhR0TEYBIHROCAF0dE4JAix0TIkBoHROCQGRrcV0eEz2APB37uOUVyAb3E8L3CdnvHrf7qFL3XQdBK177BvsNGg58xve+xgH3Kcj3SMgD98B8qB2gdv8A/4AA9xAdE+D3qhbI+BgGE9BcBjUKE+CICovE97PEAfc01PcTyAP3NBb3nMT7UwaMpaeosKSnnRjIsqy7uhrNWrlFQVdaPoIex4gFupSkpLQbq6V0a25+dGZzH2t2BShKeEpNGg57xPccxPcCxBL3NHAKE/L3wXsV18e/zbtouF2ZHxPstpiisbAaxVa5RkxUYVWDHsiHBaKOpp+uG6yncWxyb29mH3JSBhPyPApRHYv3GVLEEvfUyBOg99QWyAYTYNe3BxOgxF/3k1gHE2B9ChOgfwoOe/cFHXsV28PD3dhXx0Jvd4J3dx+Y8QX3LcT7YgZs+3YFxwavoaSQohuzqmZeXGxpY2dsoq2EH0yIBUqRw13UGw57xPc6xNnEEvc5bx0T7PfBexXXxcHi31XCRh8T9H0dE+x5Cp9299/EAfeMyAP3jIp7HXvE9x3B9wJ+ChPy98B7FdvIuNS8brFcnx8T7K+aoKWzGspWuUZHVV1MY6Bxr3weE/J6HRPsPB0Oe8TZxPc6xBL3PHEKE/j3t3ulHffKxve+xgH3Kcj3SMgD98D3yqgd/wJCgABKHfeqyFy6E2D3qvfXFcj4GAYTUFwGE5A1ChOgcwYTYEsK99nE97PEAfc01PcTyAP3NPfZXAr3ycT3HMRyd/cvxBL3NMhcyPcSyFvKE7n3wffJZwoTtnoKE9qGChPZPAoTuVEd+CPE95N3AffUyAP31PfX0B33xvcFHffGsh33y8T3OsTZxBL3OW8dE+z3wffLFZQK+SHEAfeMyAP3jPfWex33y8T3HapswXR39y1+ChOcgPfA98vOChObAEgdE5yAXR2XHR8TzIBoHROcgGRrcV0eE6sAPB0O98vE2cT3OsQS9zxxChP497f3yxXlxOT3Iuxf4i8/UVU0N8FU0B8T9K8KE/hOnbxqwhuU91QVXnOtu7ylrre0qWhaih9bimtpZRsODv1X96jZAfcQ+kwD+Rb3qBX4Rtn8Rgb8mj0V+EXZ/EUGDiD3qNkB9xscBfoDHAS796gV+FrZ/FoG/sg9FfhZ2fxZBviuPRX4Wdn8WQYO+IH3qNkByRwI5APJ96gVHAhSBvtx+3JSCvdy+3IFHPesBg4gvgr3cvtyBRz6BD0cBfoGDv1X96jZAcn6yAP5l8Yd/jg9+jYGDiC+CveY+5kFHPneZBUcBSAG+3L7clIK93P7cgUc+t4GDv1X9wwd+pvCFfYGE2D7mfeZ9wAd/YA9+YAGDiD3qNllsRLJHAaME6AcBl/CFfYG+5n3mfeY95gsHQUc+uNkFfr+Bvdy+3EF9QYTYPuZ95n3mPeYBSIGE6D7cvtyBf7+Bg79V00d+iLeA/dh94AV998G84T3CMnGfvsI9wUb9wCq9wbbHzgGRHZeaB5pClAb+98GDv1XMdn3y973ytkB97ra+FjdA/htMRX3btn7TQYqimelzhrlB+ZazUKZHowH0pm+zOUa5AfPsKXriR73Tdn7bgYhQkQmHzsHKlxiII0eOAf2jbpiKho6BybURPUe9/QW3fnwOQYOIIv3DAH4H/cM99n3DPfY9wwD+B89CvhRax34UGsdDiD3Ldly9zCX2RL3lvcw94n3MBN495b3YpMd+CX7MJMdE7j4NpdlHf1X9y3Zcvcwl9kS9zb3MBNw9zb3YpMdE7D4NpdlHf1XufcMftn3I9l39wwS92v3DBOY92u5FUMK954EQwoTaPfN+0ZlHf1Xi/cM+J7fe3cS96L3DCTh93NDHRPOgPmSPQoT1YA/CvyVZh0TroClCv1Xi/drWAr3YxLJ+sgTqPhRFt0GE2i79x0F+MfZ/KwGuPcUBfh/2fxk8x38pT34igZf+xQF/F49+EMGDiCL9y892dzZ3NoSyRwGjBO4+Y8W3QYTeKbYBfn2BhO42f3bB6fcBfm/2f2jBqfcBfmH2v1sBqbXBTgGcT8F/fY8+doGbzoF/b49+aMGbzoF/YcGE3g9+WwHDv1XiQrzQx3BQx0T90D5rhZDChP2wD8K/K1mHRPvQD8KDiCJCvcQQx3fQx3aQx0T93T3uj0KE+0APwr4qWYdE8LQPwr4pGYdE0AsPwoOIIv3n0XR90HRRfeiEvdqHAVeE4j6FhagHfgo+1kVoB3+K/tZFdMGE2jGChMYTx0TKGb7XAX7EQYTGE8dE2iKHROIZvtZBdMGE2jWCvsE0RVXHffQFlcd99AWVx0O/VfiChK1+tgTvPexFtMGlQoTfMv7LRX5gNn9gAb7RPclFVcdDiDiCq93EhwE3usTthwFjBbZBvtk93OL96z3ZPdzCD0GE3b7U/tMaftz9xD7WQj9Lz35agYTtph8mXyafQj9+RbTBhO6kgr9V/dA2fcU2QH3APqaA/cA+wIV2wbv964F+ebZ/csGufcUBfmd2f2CBvP3ugU7Bg4g90HZ9xTZAfcAHAZeA/cA+wIV2wbv968FHAWq2Rz6cga49xQFHAVh2Rz6ugbz97kFOwYOi24KPQoOlR33hPcMA/eLZAqL9wz3nm4KPQr3ngRDCg77G3b3MPcM955uCvgWFUMKkv0qSQoOi/cMAcL3DMv3DM33DAPCPQr3TGsd905rHQ6L9wz44ndxHRPg94Q9ChPQpQr7IXb44vcMcR0T4PeE+LgV+wz3DPcMBxPQa/tlFVQGhUWB+w07Gvt64fd6B9uC9w2F0R4OiQrOQx0T9PeBPQoT7D8KDvs23/ie9wwSzuXh9wwk4ezlE/T3//jIFfsM+wz3DAYT7Ho6FTUGRXxrVWgeNVNlXzca+wvjNvcW9ybl6fcYlx4xkQUrgVpXKBs6XL7Qx5mj2bsf0LanvesaDveHbgr3hxVDCg73W/dlAfdX92YD98D3WxXFurrExVy6UVFcXFFSulzFHw74msv3HHcB9xb36AP3fvgSFc31ziG/rUfxBfcLy/sLBs/xV61IIEn2V2nOJQX7C0v3CwZIJQUO9633XAH3NfeqA/ew960VzAbl91wFLgb7TftcFcwG5fdcBS8GDqB291nR90HR91x3AcH4gAP3vRbTBpIK9xYd9wD7AhXbBvfE+fAFOwYO9xYd+ID7AhX7xPnwBTsG98T98AUOhfcMAfeE9wwD98CFYAqF9wz3gfIKhVMd9/kEVh0O+xt29zD3DPd69wwS94T3DPsK9wwT8PfA9/JTHVj8jhUT6L0Gyvc+BfX7DPsMwQcOhfcMAcL3DM33DMz3DAP3B4VTHfdOFlYd900WVh0OhfcM+Oh3cR0T0Pel92EVwQaQ55bl5xr3ezX7ewcvljGQLx4T4Kb7Z2AK+yF2+Oj3DHEdE9D32/frFVUGhi+AMS8a+3vh93sH54DlhuceE+BwyAqF9wz4pN8Sy+Xg9wwk3fblE+z3lPdhFd0Gwp67va0e5smwwdAa9wkq3fsg+xApKvsVfx7lhQXilsPI3RvhxFtIih9JW3ZUXh5MVnRLQhoT9Lb7Z2AK+zbf+KT3DBKK5eH3DCjd8eUTrPeq9/sVOQZUeFtZaR4wTWZVRhr7Cew59yD3EO3s9xWXHjGRBTSAU045GzVSu86MH827oMK4HsrAosvUGhP0YMgK94XyCveFYAr3kNkB9yr3wAP3KveQFffA2fvABg73kdkB7/gkA+/3kRX4JNn8JAYO95HZAbP4nAOz95EV+JzZ/JwGDj3ZAdv4TAPbPRX4TNn8TAYO94vfkN8SkfjgE6D4OveLFc7OtM6xH1HFBVdnZG1kG2ximqpZHxNgqF1imWgbSEliSGQfxVEFwK+yqLIbqrR8bL0fE6BuubR9rhsOMfnwAfdR5AP4DTEV0wb7ePeci/fg93j3nAhDBvuP+5KL+/T3j/uSCA4x+fAB99bkA/crMRXTBveP95KL9/T7j/eSCEMG93j7nIv74Pt4+5wIDizZ983e983ZAfeX2wP4SiwVw9kG+wiIZKXQGucH5lrNQpkejAfSmb7M5RrnB9GypfcIhx7ZUwchQkQmHzgHKl5i+wuNHjgH9wuNuGIqGjgHJtRE9R4OLNn3zd73zdkB95nbA/c2LBX11NLwH94H7Li09wuJHt4H+wuJXrTsGt4H8ELSIR5TPQb3CI+ycUUaLwcxvkrSfR6KB0J9WkkwGi8HRmRx+wiOHj0HDjHZ+VTZAfc92wP4XjEV2ftl+VT3Zdn7tf3wBw4x2flU2QH389sD9yIxFfe1+fD7tT33Zf1U+2UGDvsG+jsB9z/3mwP39ssKDvsG+jsB9zr3mwP3ivsGFfdL+Gj7S/hnBTsG90v8Z/tL/GgFDkz6DAH3TfcfA/hfTBX7SPezi/fP90j3sgj7pv4MBg5M+gwB96j3HwP3IUwV96b6DPum4QoO+YDZAfc+3AP3Pvd/Fdz4lfdy2fvDBg4k2QH38dwD+EL4fBU6/JX7cj33wwYO+wb6OwHf+EID95/LCvfy/GjqHQ77Bvo7AeH4QgP34fsGFeYdNBbmHQ77Jvp4AfdE2wP4P/smFb/E+3P3XQX4dwf3cfdaV8T7jftzBfy3Bw77Jvp4Affs2wP3QfsmFfeP93YF+LcH+433c1dS93H7WgX8dwf7c/tdBQ73fbP4HbPbswH3PrPcsvOyA/c+930V9zT4Rfcj9zT7wwaz/L0V+JX3dDv7I/xFBw4ks9uz+B2zAfcTsvOy3LMD+EL4fhX7NPxF+yP7NPfDBmP4vRX8lft02/cj+EUHDkyz+byzAfdNs76yA/hWTBX7SPezi/fP90j3sgj7nf4MBvdXsxX7L/m89y8G+x/7oIv7o/cf+6EIDkyz+byzAfexsr6zA/cqTBX3nfoM+53hCtGzFfcf96GL96P7H/egCPcv/bwGDpUd94r3DAP3kWQKlR33MvcMufcMA/c5+zBJCvcLZAr4QfcMAfcw9wy59wwD+EfYCvsL9zAVWQZM+z4FIfcM9wxVBw745/cMAfcy9wy59wwD9zn4S0kK9wtkCvhB9wwB9333DAP37tgKDvjn9wwB94r3DAP3kfhLSQoO1/gkAdr4TgP309cV+z73XPc+91wFJAb7Hfs3BUEH9x37NwX3xRb7Pvdc9z73XAUkBvsd+zcFQQf3Hfs3BQ7X+CQB2vhOA/et18QK/Aj7XBXyBvcd9zcF1Qf7Hfc3BSQG9z77XAUO1/gkAfdb94QD+EvXFfs+91z3PvdcBSQG+x37NwVBB/cd+zcFDtf4JAH3NfeEA/c118QKDvladwH3P+Hh4QP37fgTFcgGoveLBdszB/sn+9sVyAaP99sFMzsGDoEK+BMVxwaZ948F1zM/Bw6K1vgS1fXVAf8BB4AA/wBQgAAD9yeKFeWKvbmV5K/31xj3UdX7SQaRvQWvj6Gfrxv3BdUhBjFZXjKBH4ZdBfsdQfcVBmf72wVnh3V4ZxsiQQYOi933gt33dd063RLl4dHW9wflT+UT3feKMBXW5gb3Jo3k1vcNGudQyimYHhPe15m+xtga9wRG0/sclB7rQCz7MP1a9zAHRd0V94LR+4IHRffUFfd20ft2BxPd1vvUFfeCB+qJvV5AGkRZYCyJHhPu99UE93QH2oSvYkoaS2djPIQeDiD3qNn4AncBp90DHAVbxh0c+jT4Ajn9Wt33nhwFygYO/Vcx2ffL3vfK2QH3ud34WNoD+WsxFfXU0vAf3AfsurT2iR7eByCJXLTsGtsH8ELSIR77bj33TQbrjbBxRxoyBzG+StJ9HooHQn1aSTAaMQdIZ3EqjB77TT0G+xoW+fA5/fAHDviBSAr3y934M93/AaOAAFYKE18cBR6CHfyJhwr8hYcKE6/6yPcIHSBsHfgX3fgr3QP4FzEV3fnwOQb4ff3wFd33h/i42fy49yP4uNn8uPfSOQYOIEgK98nd/wE/gABWChNe+VuCHfwlhwoTrvhz9wgd/VdsHffI3QP3yDEV3feH+LjZ/Lj3I/i42fy499I5Bg79V0gK/wCzgABWChNc90iCHROs2TcV+VX7o/1U+6MFDv1XbB33NfoCA/c1+AoV+gLZ/gIG+78E+gLZ/gIGDiD22dzZ3NoByRwGjAPJ+D0VHAaM2hz5dAb8IQQcBozZHPl0BtwEHAaM2Rz5dAYOIHgdHPprPRwF4lsdHPoePRwFlAYO/VfMCvrIE5j5l94d/dE9+h5bHf4ePfnQBg4gxB0cBVvDFVIK95j7mQUTMhz53vsiFRwEwQYTivsP+w/2jE4dEzL3B/sHBRz7Rj0cBQcGz0dPTwUc+vEGDiDTChwGX8IV9gb7mfeW95j3mwUhBvuY+5sFHPrj+x4VHATUBhOo9wv7DAX2BhNo+1n3WgUc+w8G9xQEHATvBhNY91r3VwUhBhNo+wv7CQUc+ywGDiCL92tYCvdjEskcBowTaMn3HRX5gQYTqFv7HQXdBhNou/cdBfnh2f3GBrj3FAX5mdn9fvMd/eM9+cgGX/sUBf2cBg79V/cMHfc9whX3cfdxBfmA2f2A1wr7mQUOIPeo2WWxErAcBsUToBwFe+cdHPsU1wr7mvaMBROg93H3cQUcBOwGDv1XcPjkAfeY+UUD95j3GRX5Rfc3BfUH/UX3NwU3B/jq+xj86vsZBfuHBPlF9zcF3Qf9Rfs2BQ4geB0c+04GE1j7DPcLBSEGE2j3WvtZBRwFG1sdHPrjBhOo+1n7WfaMBRNo9wr3CgUcBLMGDiD3qNlkshLJHAaME6D3rcEV9Yz3cvdxBfr92f79Bvty93IFIgYTYPeY+5kF/HT7mRVSCveY+5gFDiDTCvc9whX3mPeW+5j3mwUhBveY+5v7mfuWBRwGjPcMFdkc+w8HE6j7WftaBfYGE2j3C/cMBRwE1PdiFdkc+ywHE1j7C/cJBSEGE2j3WvtXBQ79V/eo2QHJ+sgD+EHBFftx93IF+jbZ/jjRCiD3qNkByRwGjAP4QcEV+3H3cgUcBfrZHPoE0Qog/wA2gAD/ASuAAD3ZPffAEskcBowTkBwFW8EV9oz3mPeYBRMw+5j3mQUhBhNQ93L7cgUc+pQGEzD3cvdyLB0FE5D3mPuY9ooFE1D7cfdyBRwFaAYOIPeo2WWxEqkcBsUToPghwRX7cvdyBRwE7Ab3cftx9ooFE2D7mfea9wAdHPsU1QoO+IHdHRwFUdkc+q+mHfrZ3R0cB6nZHPhXph39V0gK9zTZ/wLAgADZE1z6QoQd2cAVE6yCCiBICvd5Vgr/AT+AAN0TXvqHhB0cBO77whX5Wjn9Wgf+4vf3FROuggr4gUgK93pWCv8Bo4AA3fgz3RNf+oiEHRwFUvvCFflaOf1aB/jXFvlaOf1aBxz5Xff3FROvggogKAoBx9j/AtOAANn/AtSAANgD+nkW+Xv3wgX1B/1798IFNwf5Lvuj/S77owX7VjcV3wf9Lvej+S73owXfB/17+8IFIQf5tPvCFdkGjPlaBT0GDv1XcPjkAfeP+UUD+kD3GRXeB/zq9xn46vcYBd8H/UX7NwUhB/lF+9cV3gf9Rfc2BTkHDiDIHRwFlNkc+h4GS8vLywUcBeLZHPpryQr4gcL3WFgK91kSyRwI5BOo99bCFfYGE2j7CvcKBRwG8gYTmPsK+woF9gZOHRNo9wv7CwUc+QoGE1j3C/cLLB0FE2j1FsvLBRwHkFsdHPhwBg4geB0c+2LtHfaKBRNo+wv3CwUcBJwGHPrW9yIVy8sFHAU4Wx0c+sgGDiDIHRwEswYTqPcK+wr2igUTaPtZ91kFHPrjBkvLy8sFHAUbBhNY91r3WQUhBhNo+wz7CwUc+07JCv1XwPiUAfcl1vmM1gP47MAV+Fv3XwX1B/xb91/8W/tfBSEH1sAV+BD3PvgQ+z78EPs+BQ4g96jZAckcBowD+EHBFfuZ95n3mPeZLB33mPuYBRwFiPdxFdkc+t4H93P3ciwd95j7mPaK+3L3cgUOIMQd+EHDFfuZ95n3mPeZLB33mPuYBRMyHAWI9woV2Rz68QdPx8/PBRwFB9kc+0YGE4r3B/cHLB33mPuY9ooFEzL7D/cPBQ79V00d+mrfA/fP94QVntuF6MHJhPsIiwrLhPsI9wAb9wCr9wbbHzcGRHZeaB5OmPcI+wkjkvsITVCY9wj7BSKT+whMG2CM95j3mfcNHfWKBQ4gwveXPdmx2RL3QxwFqhOw+EfCFfYG+0v3SQWR74b3AskbE3BtHfcIycd9+wj3BfSD9wjKbR3iyRuzBpOD+5n7mAX1BveZ95j7mfeZBSIG90X7RgV7P49HV2kKT029ChsTsPsJmPsIThtIBoeM95n3mSwdBQ4gTR0cBfPfA/jEwRX7mfeZk5MFswbJhDSLCsqD+wj09wV99wjHyYT7CIsKy4T7CPcAG/cAq/cG2x83BkR2XmgeTpj3CPsJI5L7CE1QmPcI+wUik/sITU/3Dx1Xj8+bPx/3RfdG9w0dBQ4g+xV2+fB3Afd+HAU1A/kb+yoV4Qb3tfkI+Fr7Pfxb+z4FNQf4tvdfBfUH/JP3UtT3MgU0Bvua/M/8W/c++Fv3PgXhB/y2+18FIQf4lPtSBQ79V00d92PeA/ks94AV99/Z+98GUPcPHWh2uNIfOAY7qvsG9wAe9wV+9wjGyYT7CPMbDv1Xf8pNy+XZsdmZuV3C9x7UEviU2aDb9xrQ///IgAD/AECAANXTE7PQ+Wp/FbO0rr+fHxNzUJr7GvdZipX3vQj3c5Io9zH7PRv7NvsG+wf7OT1zZWUfTfAdGz0H84T3CMnHffsI9wUb6bnM9xX3Ddzh9wf3EtL7FPtMhR/7EIZ4VGgbdoKw2JEfE3swnfd6BUMGE3cwiGcFp39xnGkbQEw1+w9+HxOz0PsPfLo12xsTt9CfyhVjdMjjkx/klK3Jsxuzn00ygh8zg2tOZBsO/VeL2fcU2cnZs9kS9xHlON75m94T9vcY9+4VE/reBtDTvPAe90iy+wr3XRv3L/cC3PcHHzgGRj9aIR77SGP3CvtcGxP2+yohOvsHHxP6hPvuFfpK2f5KBvcUBPpK2f5KBg79V00d9xrfA/oJ94QV+077TvWM95n3mPuZ95kFIgb3mPuZYIoFTKMKG8GFLnjbHw79V/eA2T33Vj3ZEvdu3/jn3xO49273gBUTWN8GE7jSoLiuHsh++wj3CfOE9wjJxn77CPcFG/cAq/cG2x8TWDcGE7hEdl5oHmkKUEuS9wj7ABv7AGv7BjsfDiBNHfdV3wMcBNjBFfWM95n3mPuZ95kFIgb3RftGBXs/j0dXaQpPTaMKx337CPcF9IP3CMptHeLJG7MGk4MFDv1X2gqumh15mh0TRgC0fxXqBvhW+XYFLAYToMCuChNbAK0K+Er8WhXqBhOkDPhW+XYFLAaF/WoV27fX7Otf1zs6Xz8rKrc/3B/XBGt6rsnJnK2rqp5pTU14aGwfExgwqQqL9xD4B+QBk9n4P9oD9Bb4GgbDtLTDH/gaB8NitFMe/BoGU2JiUx/8GgdTtGLDHnj3EBX3afgH92r8BwUORdDdyk3L9765XcL3HtQSodS32vcd2P//voAA/wBBgADU1BPPoPhDbhVtzAVzYGF+ZBsiPun3S/c/1vdS9zjyz/sK+0AfE7eg+xZ0RGpzg7DYkR6d93oFE9dgQgYTz2CIZwWmgHCdaRsiWvssJii4Sc66r6y9nx8Tr2BVmKxvshvax/cJ9y33Zyn3J/sk+2gl+3X7Zvtx9wT7EPcgHxPPoL6/mKfBH/sx90EVaHa40MSi9xXIrZ5gSFt8+yJJHw5/2UnyOXb5Ft8SqeJ84fcv38HjE5v3rX8V0MmfsLMfEzuvXgXxBhNXNvIFsbql29saM5OPVIJLc2oZ+zj3ZdC2uMCcwBmt8TzmKpQIMpM1RyMaWKBSuU4eE5s3TFRnIRr7FvFF9yke2QQnS7rWzca2uKkf90H7bwVxdmB7WhsTl2D4CRVovHyyqxqKurCyu4gIt4imaV0aX2NdSm0eDqB2+Q7XAfex1tHVA/ex98YV+8bW+Q7R/Q7V+Vr7bwf7KS09+xD7EOk99ykfDvsB2/kK2xLs4zbj94XjNuMT1PfK+wEVE9jy87ztwHq2SqofE9TDoaiwvRrnWLT7LrEeKKVvnrQatLmoyNm8ZlCVHuGRBfcBfPsEyDUb+wQuVCVbqmjIcR8T6Elvbl5UGj/BY/cmaR7qc7BvYxpeW25EP1OzzIEeM4UFE9Qile5B9w0bjffTFRPkLZVqrLUatLmnyMPfdk0eE9RfW3BDHg5/0NTQ98/Q1dABj8/F0Pda0MjPA/e/fxX3QvcO9yz3bfdt+w73LPtC+0L7Dfss+237bfcN+yz3Qh/QBPsfM/cI90z3TeP3B/cf9x/k+wf7TftMMvsI+x8fktQV3NHI7ZcfRpAFTIJma1sbQ2jE7/CuxNO6r21Skx/QkAXogUPFPRshRTL7Hvse0TP1Hw7jCuu+873mwwP3wPdwFfcg9wT3Bvcg9x/7BPcF+yD7IPsE+wX7H/sg9wT7BvcgH8QEIDLk9wD25OP29uQzIPsAMjIgHyfFFb71tgbLIQXFBkT3BQWxlaGnsRrAYKtEHjAG7vsRFVvcuwavn31ycXd7Zx8O4wr3A77zvdfDA/fA93AV9yD3BPcG9yD3H/sE9wX7IPsg+wT7Bfsf+yD3BPsG9yAfxAQgMuT3APbk4/b25DMg+wAyMiAfNsUVvvW1BtOzqcC/X6xFHzAG7vsRFVvcuwauoH1ycXZ7aB8O+SLDAe7G9wTG91HGA/ga9/sVzgbI90gF+0jG9/NMBzD7pTL3pQVL+/PG90kG+3r7SRXG97vew/t0U90GDvga1Pcu1AH3KtX3LNUD98D4GhXdz8/d3UfPOTlHRzk5z0fdH9QEYWmutbWtrrW1rWhhYWloYR8O+C333gH3cvcwA/dy+C3sCvgt994B9yL30QP3IvgtFc0G5ffeBS4G7fve7Aox+fAB95fdA/eXMRXd+fA5Bg77FXb58JYd9/cV2ff3PQb98ATZ9/c9Bg5FHfdIdwH3mtkD95oW2fhc9y3V+y33SD37SPsvQfcvBg77FXb3ONb4A9X3SJYd+yoV2fc49y7W+y74A/cu1fsu90g9+0j7LkH3LvwD+y5A9y4GDovZytf3Vdf3dHcSkN/3LN+q10/3ZFDWE/6AkBbf+IgG9xH8iAX3A/laN/x/BvsN+H8F+wcGE/0A+AP9WhX3ZNn7ZAYT/oDzyhXQvs719VjNRkZYSSEhvkjQH9cEcnixxsaesKSlnmZQUHhlcR8O+1LZPfdSErHa+ALaE7Cx+1IV+KAGE3D3UjwHE7D7BPwCBxNw9wQ8Bw73ZLzqvK+86rwB2r73Xr0D9+DSFb33HfclvPsl6vcuvPtgBvuRJhW+9x33JLz7JOr3Lbz7YAYOi9D40NABmdD4RtADmRb40Pla/NAG0P0VFfjQ+Eb80Af7yPcfFebm5i/DwzDn5eVUwjExL+ZTU+cwMDAFDovQ+NDQAfif0AP3Mhb4Rvla/EYG+y77+QX3XfuwFfsR97H3EfezBffS/NAG+7P3HxXl5ucvwsMw5+XlVcIwMDDnU1PnMDAwBQ6L0PjQ0AGT0AP4Thb3Lvf1+y73+QX8Rv1aBvgX0BX70vjQ99IG9xH7swX7MPsmFcLCMebm5lPDMC8w5lVU5TEwL8JT5+cFDph291bZ19n3atkB94PKxtnX2QP3woMV91b3t/ig+3z7uFD3VAf7vvvIBfd/ZRUoB/sX9xz3F/cdBSn3XPe41/wEBw739LwB+Ca+A/ct98AVwQbw994FVgZA+5NA95MFVgb38vzDFb73req8+4Va6gYOf9tadvizdxLR49j/AEqAAP//7IAA1hO493swFdYGktoFjAb3CuHX9wqhHzORez1YY0qJGa34Gbp+rWaYVBnjkQUTdHjxTMoumpPmGEAGgzMF+xh+NyH7MRr7Hssq9GseOvefFfcAt9HYmx5q/A0FU6dry+YaDuzU95LUt3cB7tT3ktQD97/sFbWymKGrH9o9v7892gWgq5iytBq1frF1qx7a21e/OzwFoWtlmGEbYmR+dmsfPNlXV9k8BXVrfmRhGmGYZaFqHj09v1fZ2QV1rLF+tRvUBEVSxNHRxMTR0MVSRUVRUkYfDjD3NDffTHajdvlzd6B3Esvl9wTV9xXlE4eA954wFdUGEyuA1wf3F5Tj1vQa9wZRxvs1ux73hwfQe7BTlUPlkRh99wpE5PsNmwgTF4DdQToH+xJ/Pzz7ARoixFv3JWEe+5MHQ5xewn/iMYUYlvsU3y73EHkI+wT4sBXGtrbQlR77cgc0qHKkwxoTR4D3TvxfFfeBB/Rlo2hSGkxeZTeFHg573/c71dvV90ffAf8AMIAA5QOV+BkVsgaKaIxeBWRBuwb7MafjLfceG/ca6en3MKUfMJAF+wV3TlE5GzVUxvcAdR/3XQaW1QX7cgaKuIyuBfd7BpbVBft+BvcIn8TK4xvVxlYloh/nkQX3J20u4fsRG/shMij7OHEfXQYOf9/3N9Xb1dJ39xTfAbzl99LlA6H4GRX4wNVZBpeekqOgGvcOK9j7LPsGMUH7Cmwe6YIF1qvCtc0b4cdbSHGEd3l5H/wuBvej/G8V9xPt0PcCqx8pkwVMcExjQRszTrnNnJGdl5sf+DnV/MBBsgaDfId4ehr7B+869yQeDqB29w7V3933nt0B9wLh97DlA6z3DhXY+w7h9w7k1TLf9xb3AR37bPyWPgb3r/c6FfsM9573DAb3BL9cNTVXXPsEHw6gdveo3+rW699B1RKw+KAT9PflFvcNBvvD96gF1wb3IuTN9wWcH93WOgYT7IW1e69ypwj3FAYT9NX8oDf3Vgfnv2tLmR/79ED38wZMfFdrMRv7VjcGDove+LTeAZ/i0uHS4dLiA/dGFvePBufFxecf+MQ0/MkHZXRzZR77O/hsNQb7Mvy/FeL5B/c7BrCjc2Uf/C7h+CkH51HFMB77kAYOi+L3etX3j98S9wfkYt8394kT6LviFTQH+IWOBd/8OQfqtrHngeoIE+T3NdUGE/D7RQZ6wIGzqhrVx8DNxr1qU50e7pIF3nxD3vsjG/sJLTb7BGmTZZpdH5F3BSpBBhPo9wYGjWQFN2RNP14eDqB29yPZzdn37XcB95bhA/eWFuH3I/c42fs4zfc42fsSBvdC9+3ACvdE++0F+xI99zhJ+zg99zgGDvee2fdblh3OFdn3W/db2ftb91s9+1v7Wz33WwYO97PZAcn4cOgKDt/4GwH3EvgcA/cS9x8VwlT3Ifch9yH7IcLC+yH3Ifch9yBUwvsh+yH7IfchVFT3IfsgBQ7f9wze2ef3DAH3hPcM6Ar3gvutUx34CQRWHQ5sHdv4TAPb+AplHfct2fcj2T33RxLb+EwT0PdMthXYBq33AgX3ddn7XQa29yMF9zLZ+xoGE7Cq8AU+BhPQbCYF+3k992EGYPsjBfs2PfceBg7A+JQB+FnWA9TAFfhb918F9Qf8W/dfBTUH+BD7PvwQ+z4FDsD4lAHT1gP4o8AV4Qf8EPc++BD3PgXhB/xb+18FIQcOi9kByfhwA8n3SRX4cPcYBfUH/HD3GAU5B/gbJPwbIwX7mgT4cNn8cAYOi9kByfhwA/iu90kV3Af8G/P4G/IF3Qf8cPsYBSEH+HD7zRXZ/HA9Bw6v2fdt2T33ZRL3mdkT0MmvFfhw2fxwBvdtBPdb+xfZ9xf3W9n7WwYTsPcXPQcT0PsX+1sHDt7VQfdG+zz3RUHVq9VB90X7PPdGQdUS2tn3stkTmcD4G/fCFdu91fIfE5TAPQYTmcBNemJlZ3qop3Uep3Rwp1UbPFhBIx8TksDZBhOZwMqctLGsnHJxnx5to6ZrxRv7bwTbvdbyHxNJwD0GE5nATXphZWF7sqxuHqF3cZ5dGzxYQSQfEynA2QYTmcDKnLOxqZx2cZ8ebKOlaMkbDveA2T33Vj3ZEtne96neE1jZ94AV3gYTuNKguK4eyH77CPcJGxNY9wCq9wbbHzgGE7hEdl5oHkuS9wj7ABsTWPsAbPsGOx8O957ZAfgn2QP4J+oV2feN/Bs9980GDvkK24t3EvcH+AYTYPcH9+EV3wYToPD3vfD7vQXfBvsY+A0FIQYO9wfX9zPXQNcSktf4RdcTuPcr9wcVwcmvy6wfSazLacEb3MfR4R8T2OFP0TqKHlJPZ0xpHxO4yGpPslMbOE5FNTXIRd4f1wRjb6y6uqessx+zirpqpV0IXHFcamMb98AWY4pbrG+7CBPYqLq6rLOKCLGKpmpeGhO4XXBqZYoeDvsq1vla1gH3AvgPA/cw+yoV5om9upXkzfjoGI+voaGvibqJGJLWXYwwjVlcgTIZSvzoh2d1dmeMGVuNhEAFDovZ+MXSi3cSmsv4TssTuJoW+M73Ewb7efjbBfsEBvt5/NsFy1oVE9j3cfjF93H8xQUO+xV2+aLZEpz3Uj3Z91LZPfdOE9j3FfsqFdn5ovdS/aLZ+aIGE+T3ANn8yj0GE9j3BAYOi9/4st8B0fhwA9EW+HDf/A0G90n3o/tJ96MF+A3f/HA3BvdK+6P7SvujBQ77FXb5ptUBnPjLA/cK+yoV7wb3LPmmBfdq1futBvsc/VlG9+MFOgYOf9hTdvgq2xKz5PfQ6jrcE3T3nn8VxYXBnr+29y/3HLn4pPxHuHc+GPdDe/X7DI37RG7LUrJDkvsmmCU1fvssfvsi6CD3Jn8IE7iK2BUxlVLNlvCS7M/K5YPYhchdmD6C+xFAOCuTCA77FXb3HtVidvimdxLq3/eK4DrcE9zq+yoV3/ddBmSctXO9GxPaycGxyaQfE7ozBxO83PimNvvQBhPcLldQNkJnvvAe99A3Bw7aCpiaHRNXwJ5/FeoG+Fb5dgUsBhO7wK4KE5vAqQqL0E9295TR3tD3Q9GadxKYz+XPg8/lvuXOE0YAj38V4wb4Dfl2BTMGE7LgYP1qFaylnKmcH22cpXqsG86z0OLjY9FIanF6bXofqXpxnGobSGNFMzSzRs4fkNAVb3uqw8SbqqeonGxSU3psbh/3IRZufKrDxJqqqKedbFJTeWxvH/v799wVExsA1bPQ4+Jj0UFDY0U0HxOy4DOzRtMeExsA0ARve6vDxJupp6icbVJTemtuHw7wCvfRFfUH+6P3o/uj+6IFIQf3fPd8Bfyo2fimBw75D9YB/wHGgAD/AEuAAAP4W/ePFdbWBfgU/BMHQEAF99wG/Az8DMJU+Av4CwUO96jZAZz41AP3ducd/EM9+EMGDov/AEuAAAH4aNYD39YV1kAF+BT4EwZA1gX73Af8DPgMVFT4C/wLBQ7wCvgfFft8+3sF+KY9/KgH+3z3fAUhB/ej+6L3o/ejBQ6L/wBLgAABxNYD+JjWFfvcjPgL+AtUwvwM/AwF99wHQEAF/BP4FAcO96jZAZL41AP4CsEV+3L3cgX4Q9n8Q9UKDvkP1gHR/wBLgAAD9yX3jxWM99z4C/wLwsL8DPgMBffcBkDWBfwT/BQGDvdH91892T33XRKN+OgTkPc590cV9AYTUPsP9xEF98YGE5D7D/sRBfQG9zf3OAUTMPs29zYFIgYTUPcO+w8F+8YGEzD3DvcPBSIG+zb7NgUOl3YS9xT3aD3ZPfdmE6D3wYIVE5D3P/c/BfUHE6D7GPsYBfiOBxOQ9xj7GAX1B/s/9z8FE8D7QftABSEHE6D3GvcZBfyOBxPA+xr3GQUhBw73Ptj3GtcBnfjFA/e2900Vz2TbssHl4lgYdfeB+2oo3FtsVmlxa50ZbpuIqoithrKEtFipPLj7BkJ5IQjeBp7Es6aseKx4iGaSZJBol2i2cggO96fZAZ/ZA/fS9y0V9w73mtn7m/cOB/tV+zUFI/tXFdn4Gj0GDven2QH4itkD9673LRXpHfubPfeaB/e++zAV+Bo9/BoHDvcYHfiM2hOw9//3ihX3D+zm9wr3Cirn+w8f+7s997sG2slRQUJNUTwf+14GE3D3FPcTBSAG+zn7Ovc7+zsF9QYTsPsT9xQFDvcYHZzaE7D3gfeKFfdcBvsT+xQF9Qb3O/c7BRNw+zn3OgUgBhOw9xT7EwX7XgY8TcXU1cnF2h/3u9n7uwb7Dyov+wr7Cuww9w8fDqB2+CrZAfiA2QP4gBbZ+Hj7+/cOBvtV+zX3Vvs1BfcO96wHDqB2+CrZAanZA/cAFvgq96z7Dgf3Vvc1+1X3NQX7Dvv7/HgHDvd22fgqdwGp2QP3APlaFT38ePf7+w4G91X3NftW9zUF+w77rAcOoHb5C9kB+BvaA/hCFvc191UF+w34mPxcPfgN/En7DQYO93bZ+Cp3AfiA2QP4gPlaFfwq+6z3Dgf7Vvs191X7NQX3Dvf7+HgHDovZ99LG95J3Afci2fc22QON+CAV9yD8IPfS+CD3Hgb7vffNBfsd+5IV9x33Jvcc+yYFVPwN+zb4DQYO9xUd+IgV+zX3Vvs1+1UF9w78d9n4dgYO+Vp3AbH4jgP4nfhfFaL3j/uOdOE1++r76sJU9+r36gUO98/ZAZz40QP4IPdVFekd/BA9+A8HDqF2AbD4jgP3uKMV9490dPeONTX76vfqVFT36vvqBQ73FR33aBX7Dvh2Pfx3+w4G9zX7VQUOoXYBxPiOA/fIoxU04ffq9+pUwvvq++o14XT7jgUO98/ZAZX40QP3YPdVFfcO+A/Z/BD3Dgf7Vfs1BQ75WncBw/iOA9r4XxXh4vfq++rCwvvq9+rh4fuOogUO98PZAZP43AP3XfdJFfcO91r7Dgf3Vfc1+1b3NQX7DvtY9w4H+1b7NQUOlXYB95nZA/fAgBX3NfdVBfsO+DD3Dgb7NfdV+zX7VgX3Dvwu+w4GDtr4wAGb+M0D98HaFfc09xD3CPc19zf7EPcI+zT7NfsQ+wj7N/s19xD7CPc1Hw7a1vgq1gGb2fgx2QP3wdoV9zT3EPcJ9zT3NvsQ9wn7NPs1+xD7Cfs2+zT3EPsJ9zUf1gT7CTHf9wr3DOXf9wn3COU3+wz7CjE3+wgfDs3G+Ch33sYBjcX4c8UD+Gr3UxW0YJqamp2WnRlaqoJ9gH5+fxn73DgVqb58k3yWf5YZY2KafJ19noAZNdkVuq6BmIOahJwZVXWUdpV4mHkZ91b7CBWUxXqNeZB8kBl2VZ+EoIWgiBn7hfdzFcSXBYeciZydGlEGdI12kHce97b7PBVQB6Ghjo+fH4DDBYh7eIp5G/u5968VxYKOnI+ckpsZVKCDeIZ2h3UZ+Bb7nxWgVZ+TnpSdlxlrvH2BfIR6hBn77fgMFbxslJmWmJeXGWO1e3x+e394GdzeFatampWak5uRGXfBdoN4gnl/Gfge++EVwXWTn5Cgj6EZUpSIeoZ5hXwZ+7P4DRWWUgWOnJ2NnRuKxnWKdol3hxn3xPuxFcUGoYmghqAeUn8Fj3qNeXoa+yf3bRWfwXeTd5F1jhmCUZyInYebhRn3FvsSFcChg6CAnoCcGVppln2TfJJ7GVfYFbS1e5p5mHmWGW1ZmoKZgZd/GQ6LzviSzgHa+E0D94wW8gb3PffW+z331gUkBvs9+9YF4Rb3G/eT9xr7k/sa+5MFDqB2AZP42wOTFvjbBvu4+I0FDs342wFV+I0DVfkdFfzbB/iN97gFDvladwGT+NsDk/la9xQdDs342wH3KfiNA/ki9wodDu3VAZP42wOT7RX42wb7uPiNBfs4/EMV9zj3sfc5+7EFDs342wG31QO3+R0V/NsH+I33uAX8Q/c4Ffex+zj7sfs5BQ74ttUBk/jbA5P5APcUHfxcQRX33Qb7OfuxBQ7N+NsB+HbVA/jA9wodQfhcFfvdB/ux9zkFDtAK++sGDvfT4QFj+RQDY/fTFfkU4f0UBg730+EtHfeV99MV9+vh+5X48jUGDvuLHATrLR33lfuLFeEcBOs1Bg7QCvuV+PM1Bg4c+I3478kB9zT3rAP3wPjvKB0c+I34+e0B9zTj8+MD9zT4+SoKHPiN0goc+I3BChz4jXsKHPiN+O73FAH3KvfAA/cq+O5GChz4jfho94YB94j3BQP3iPhoWB0c+I3CHRz4jfjp9xkB9zT3rAP3NPluIQoc+I3478kB9zT3rAP3wPjvKB0c+I343r3fvQH3ZL3fvQP3wPjeRx0c+I349iQK9yImHROw9/z49iYKE3AlChOwIx0c+I3iHRz4jfjl5QH3hO8D9/z5meUKHPiN+xDlAfeY7wP3hPtqVAoc+I37EOUB95jvA/eE+2pUChz4jZgKHPiNnQoc+I33jNUB7/gkA+/3jBX4JNX8JAYOHPiN+PL3BAH3MC0KA/do+PIpChz4jfjt9wAB94r3AAP3wPjtKwr4+e0B9zTj8+MD9zT4+SoK0grBCnsK+O73FAH3KvfAA/cq+O5GCsId+On3GQH3NPesA/c0+W4hCvjvyQH3NPesA/fA+O8oHfjevd+9Afdkvd+9A/fA+N5HHfj2JAr3IiYdE7D3/Pj2JgoTcCUKE7AjHeIdmAqdCvjy9wQB9zAtCgP3aPjyKQr47fcAAfeK9wAD98D47SsK+Of3DAH3hfcMA/eM+EtJCg57CoEK+D8VxwaZ92MF1zM/Bw57+XoBmvjPAzEKDnvV+OfUAZrV+DzUAy4dDnub+KaX9zybBvs2lwceoDf/DAmLDAvfCuUL248MDN+RDA347BQcB3MVthMA1gIAAQAHAAoAEAAWABsAIAA2ADkAPwBCAEUASABRAFcAYgBqAHEAdwB9AJYAoACmAMUAzQDkAPEA/gEJAR0BIQEpAWIBcAF4AYMBiwGRAacBrgGyAb0BzAHUAdoB4gHoAgMCDgIYAiICJwIzAjYCPwJHAk4CVQJcAmICZgJpAnQCeAKVApgCnwKwArYCuwLNAtEC1QLhAuwC9wMBAwoDEwMeAyUDLgM1AzsDWANgA2gDcAOVA6wD0APUA90D4QPrA/ID/wQCBA0EFgQgBCkEMgQ7BEQESwRTBFsEYwRnBH8EmAT7BS0FOQVCBZIFowW7BcIF3wX9BhcGKwY4BlAGcQauBsUG/AcdBzsHXgdpB4MHtQe6B8cHygfUB+kIEwg9CGYIfAiECJYIngiiCKwIzwjiCOoI9gkWCTQJUglvCXcJiAmaCakJsQm5CcEJ2AnvCgYKHQoyCjYKTApRCmIKbQp5CoMKlAqhCrAKvwrQCt0K5Qr2CwcLFwsnCzcLPgtNC1wLawtyC4ALjgucC6cLswvAC80L2QvlC+kL9Qv/DAcMDwwaDCUMMAw7DEYMUQxc9xlgthILtgoOe9/40t8Lf9v4HtsLwY3BEgvmCt8KCxXEsLfXjx9XBlmHfntyG3t+kpx2HwtwHQ6gdvladwuAHQ7CCg4VzR1/2/c/1fcp2wv3BMz3BAugdvda3ff02Yt3C3/VYnb4YtsL5cm4vKMfC/fBe7UKC5Ed44MKC5zbFfsCYOvw9Lbr9wL3AbcpJChfKfsBHwt/20fP+CLLS9cLUmxrUR4LvAqJ96IVMFPP9wH3AcHP6OfIR/sBiR/7AYpQRzAbCy/bV/Ee3B0L2xb4TN37Rfi290Xd/Ew590X8tvtFBgv7Ntvqdq/b9/bbf3cL9737NhX3JuLV9xAfC40wBdv3+vuOOQYLpAa3rWtkZ2tuYmFopauIH06IBQsWQwoLf9Vidvimdwuc3BXhBtGaq8GuHuHDsbffGvcLM+D7FvsmMS37GH8e5YUF65W8v+4b3LpYRk99cz1bH0Zgb1krGgv3wHsV9yrl8fc2H9QdC9sW+HRcHQYL9757FeHBtcytHwv3DPcM+wwGC9f4pjcGCyxYUjg/Z7ryHvfSN/vpB/sSz0D0HgtCHdX7FCAd00IdDovfTHb5Bt+LdxILFb0Gyvc+BfX7DPsMwQcL2/imN/vQBgtfB+6MBQ735/haFdkGC4vV+MbVCwPdFvhI1fvsBvfk+AgF3/w2QffaB/vk/AgFC5sdsauVm5se6x0L9x/3lAU9BlQdC0wK9x/3lAU9Bgv2jE4dC4v3Bi52+Oj3Bot3CxVmCsvpBeEnMa0HDtn/AsCAANkLQk1pQm8fCz3Z9xTZPQv7FXb3KtUL//+ygAAL45oKC54KDrsKcm9vZh9yUgYLwB0FC+sW3/fRBu3FwN3bq1YpHvvR3/fpB/cEUuT7DR4LUx0OAeXhAzcdC+kW8wb3dfgeBfwe3/imKAcL9wMd+xYL+zBJCg7X+wEHSWBqRnkfhfEF+2RBBgvDBlUKFWcdC/zoB/uS+OgF+wwGC02S9wgj+wWY+wgL5Rb4GtX7PPeKBgv7evwmBfgmNwcLi/cUIHb4pncLyl/K9wrKX8oL9wwB94T3DAP3hAv7KtX4qNULyFzI9xLIW8oLyvcgzlLEC/imBS8GC/fBexX3N/L3FPdfH7f7njf3Qwf7E4xHO/sApgoLIgrD9xSsHQsB0eH3rqodCysd5/cUux0LA8cW4fewBsvP94j79AX1Bvu2+DD3ove+BSEG+7T7zgX3zjUHCyId3u0S97HjO98T6EEKE/D3YfivJR0OIWL7BfsKKrY06B+MxBVhbq68jB+7jKqtshu4o2lbWnFoXx8OuwofC/MK93D47kIdDv4wVAr7WvuaBVn3UAcLxBL3M20KC/sCxBX3AvcmBfsmBwvxCg75WncB95TjA/eiC/lV96OK/LIFDgb7bPlaBfsIBgsSx+P3vt872wugdve03feW3Qtyb29mHnJSBgv9WhXd+Vo5BgtzXwbujAUOi/cM+J7fEgv3BBL3L/cEC/P3BX73CMYLA5kKCzAdx/cUEsHj95bfE7wpHRN8Mh0TvDQdCywK0O0SzeOX4/PjjecT/UAdE/b7rve+KgqL3feC3fd23RLl4feY5U/lE/TlFvd1Bvcq5tb3D+dQyimYHxP415m+xtga9ww71fswHvtcBhP093b9CBX7IPeC9yAG7b9dP0NXXykfE/h199QV+wr3dvcKBu23YUNEX2IpHw7VaQd1gZOjH/dwB/caQd37FPsMPUcndx7khAXIm7Kt1RvXtV8xH/tGZwX7CHRXXDEaCyMKAenh95LhA3UdDpUK+wTRFVcdDovd94DV94DdAfcV4fe85QOB99IV9x/70vc8BvdM9wz3Evd493j7DPcU+0wf+zz70vsfBvfC+8oVPveA6tUs94DYBvce3C37SPtIOi/7Hh8O18XB4t9VwkYfE/R9HRPseQrGCk8dZvtcBfsRBk8dih1m+1kF0wbWCgsjCgHRWwoO+xDlrfcGHfPv3+ETr9EW4QYTt2QdE89oCvc+fApEHcV2Evf1whf3ymkdrbBglVZRfB0TeGJlBRP4WR33wnsV9xrp6fcwpR8wkAV+Hft36fsj9z4fCwP3zn8V9xcdBcMd+zzr+wH3KB8LPx3n9xQBwfiEA0EdCyId0vcAEveo9wAw3xPoQQoT8PeO+KMrCvtmz/c3dgH3aNcD98L7ZhWxq5Wbmx+MHUaVa2MFmx0eDhX3nMT7UwaMpaeosKSnnRjIsqy7uhrNWrlFQVdaPoIex4gFupSkpLQbq6V0a25+dGZzH2t2BShKeEpNGgskHd7tEvc045ThlOMT6DgKE/zb+VsqCqB2+Of3B4t3Esfh98jhE7j3mtsV1wYT2PcI+JcF/Ofh+Vr7Fgf7AvyC+wL4ggX7Fv1a4fjnBg6gdvimdwHB+IADwRbvBvcn92r3J/tqBe0G+1X3osUKBQ4oCgG9+IgDvRbtBvcr97f3K/u3Be8G+1j3+OEdBQ69CvsJmPsIThtodrjSHzcGO6v7BvcAHvcAhPcIy20d9wjJC4vj+E535/cUvR0LrOQVwgaR0ZT3Ddsa93o1+3oHO5X7DZFFHg4b+w5G9xn3Lfcuz/ca9w/dzE81oh/lkQX3Fmwo6fsWG/s6+wf7Oftj+2L3CPs49zkfC00KsAoLKArn9xQB95bhA0kdC60KDigKAfeW4QNJHQ4S0eH3tOETXtEW4QYTbmQdE55oCgt/FeS2uPcJpB82kgVLfndyZBtZbMj3AoYf940GirEF90WFVuMkG1JfcQv72ve2Fdy31+vsX9c6O18/Kiu3P9sf1wRsea3JyZ2uqqudaE1NeWlrHwuF/WoV27fX7Otf1zs6Xz8rKrc/3B/XBGt6rsnJnK2rqp5pTU14aGwfC7KqnKafHz+Cal1bG210mqeBH1CFBQsB97nfA88dC6B299Dd98x3Ac/h97jhA8oKDgH3+N8D0x0LA8wdCyQd0/cULR04CgsV+0T7Avcj93j3ePcC9yP3RPdD9wL7I/t4+3j7Avsj+0MfCxXo+xkF6Qbo9xkFRQZFMUXlBQtUHROAkIUdC/s+4iD3IB6Q298dCzf7IQYuT1ErRF3F5x73Ijf7Igf7Idky9w/Sx7PGpB4L+CUW9zPV+zMGYnmeth/40vuaQfdG/IgHNL5a5x4LtpiisbAaxVa5RkxUYVWDHsiHBaKOpp+uG6yncWwL0Mevw6UfNQc9VmUrOWepvXseM4UFLqHhTvcGGwvwHU2S9wgjC/eo2QHJHAaMAxwFW8EVUgoLgQr4DhXHBpn3WAX3HDP7HAcOBSkG+zL71Psy99QFKQYL8wr3yvjuJx0lHfdUKSUdC0QKE5yA9R0LFfIG9x33NwXVB/sd9zcFJAb3PvtcBQv3TPeYBScG+xz7XPsf91wFKQb3TfuWC7D3WQXjBpfRBTQGq/dBBd4Gl9EFOQYL95n3nQX7Cgb7jfuWBfeWNfym4feWBwv3ZxVqcHBqaqZwrKympqyscKZqHw7tHQUOzxbh99D3uPvQ4flaNfvM+7j3zDUGC/sG6h0L/wA2gAD/AMSAAFgK91kSyQvX+Vo3+5L3BB0fCxXbyLjUvG6xXJ8fC4v3Bh33tOETXAv30+EtHfeV+4sV4fjK95XhCwb3cvdyLB33mPuYBQ74+e0B95TjA/eU+PklHQ7C91pYCvdXEskcBowTaAs3/Fz7CfhcNvxc+wn4XDcGDgb3cfdyLB33mPuYBQuw91kF9xEGCwb7cfdyBSEGE2D3mPuY+5kL+VUVWQZM+z4FIfcM9wxVBwsB7+ED7xbh+Qb4At/8WAYLi9dIdvet16DX91XXmncSC/dn1ftn9yA3+yD7Q0H3Qwv3lRbh6woL4RP6+If7KhXh93AGE/wLBTEG+zD8Qfsw+EEFMQYLvwa7jZ2aoxuflIR4oh8L9xEd95DfCwb3SPuyi/vP+0j7swgLi/cOPdnW0fdB0fdcdwv3cMT3OLbct8fEAbvDC3fr9wQB9y8tCgMLFVMGSy0FNe/laQcOnnR2mGsbVWNjPokfC9X4ENdB1RL3eNRC3wsDyfezFfhw2fxwBgsGY/wKBVyGd3JqGwvvCuUL+Qj3bd38nDn3bQYLFc0G5ffeBS4GDvsm0fsX9y4L9zzp9xn3gQv7Kvd0QdX4XHcSC535OAH3mdkD+M8L0xXRBkn3FAUtBgv3DAH3hPcMA/fAC/ju9xQB93D3NAML6/cA9z33PSv3AAt38u0B9zTj8+MDCwAAAAEAAgAOAAAAAAAAAcIAAgBIAAIADAABAA8AIgABACUAKwABAC0ALQABAC8AQwABAEUAUwABAFcAYQABAGMAcgABAHQAeAABAHoAgwABAIUAqQABAKsAswABALUAvwABAMEA8QABAPYA/wABAQEBEAABARIBFgABARgBIQABASMBUAABAVMBUwABAVYBWQABAVsBXQABAWABYwABAWYBZwABAWoBbQABAXoBfwABAYIBggABAYYBhgABAYkBjAABAZABkAABAZIBlQABAZgBmwABAZ0BnwABAaIBpgABAaoBqgABAa0BrQABAa8BsAABAb0BvQABAcABwwABAcUBxQABAckByQABAcwBzAABAdIB1wABAd4B4gAEAeQB5QAEAf0CBgACAhwCMwACAjQCNAAEAjYCNgAEAjkCOQAEAjsCOwAEAkECQgAEAkUCTAABAk0CTQAEAlACUAAEAlICUgAEAlQCVQAEAmYCawABAnQCpAACAqYCpgAEAq0CrgABArECsQAEArUCtQACAr0CwAABAsYCxgABAsoCygABAssCywAEAs0CzgAEAtMC0wAEAt4C3gAEAwEDAQABAxADJAADAAEAAwAAABAAAAAgAAAAKgACAAIDEQMVAAADFwMdAAUAAgABAx4DIQAAAAIAAwMQAxUAAAMXAx0ABgMjAyQADQAAAAEAAAAKAGoAmgACREZMVAAObGF0bgASAEgAAAA6AAlBWkUgAERDUlQgAERLQVogAERNQUggAERNT0wgAEROTEQgAERST00gAERUQVQgAERUUksgAEQAAP//AAIAAQACAAD//wACAAAAAgADbWFyawAUbWFyawAUbWttawAoAAAACAAAAAEAAgADAAQABQAGAAcAAAACAAgACQAKABYBEgMAAx4DdAuMDFwOLA7kDzgABAAAAAEACAABA2oADAACA/wANAACAAYCRQJMAAACZgJrAAgCrQKuAA4CvQLAABACxgLGABQCygLKABUAFg94AAAPeAAAD3gAAA9yAAAAWgBgAGYAAABsAHIPeAAAAHgAAAB+AAAAAACEAIoAAACQAJYAnAAAAKIAAA94AAAK4ArmAKgAAAmuCkQArgC0CsIOygC6AAAAAQBiAhIAAQEtABIAAQEiAhIAAQC5AhIAAQD0ACIAAQEd/6kAAQEr/6kAAQEtAnwAAQErAfwAAQEaAhIAAQE6AnwAAQEkAhIAAQF9AhIAAQEdAhIAAQE4AsYAAQFFAAAAAQBTAhIABAAAAAEACAABAm4ADAACAwAAkgABAEEBUwFWAVcBWAFZAVsBXAFdAWABYQFiAWMBZgFnAWoBawFsAW0BegF7AXwBfQF+AX8BggGGAYkBigGLAYwBkAGSAZMBlAGVAZgBmQGaAZsBnQGeAZ8BogGjAaQBpQGmAaoBrQGvAbABvQHAAcEBwgHDAcUByQHMAdIB0wHUAdUB1gHXAEEJaAAAAQwAAAEGAAABDAAAAQwAAAhgCGYHvghmCGAIZgloDXAJaA1wARIAAAEYAAAJaAAACWgNcAhUCFoJaA1wATYAAAE2AAAJbg1wCWgNcAloDXAJaA1wCWgNcAfWAAABHgEkCWgNcAEqAAABMAAACWgNcAluCXQJaA1wCWgNcAloDXABNgAACXoJgAFCAAABPAAAAUIAAAFCAAAJkgmYCJYJmAmSCZgOGAAADhgAAAlEAAAOGAAACUQAAA4eDXAJhgmMCbwAAAm8AAAJIAkaCLoAAAmqAAAIwAAACK4AAAFIAU4OHg1wDh4AAAiuAAAJaA1wCJwIog4YAAAOHg1wCbwAAAABAUYDjgABAUYCxgABASYCxgABASYDjgABATYCxgABATYAAAABARwCxgABAR0CxgABATACxgABAU8C2gABAU8CEgABAVACEgABATgAAAAEAAAAAQAIAAEImAAMAAEI2AASAAEAAQFrAAEJGAAEAAAAAQAIAAEJSgAMAAEJwAAuAAEADwFTAVsBXAFdAX0BfgGQAZUBnQGeAZ8BwAHBAdMB1AAPCpAKlgqWCpYKnAqcCpwKtAq6CroKugrACsAKnAquAAQAAAABAAgAAQAMACIAAgCeAOwAAgADAxADFQAAAxcDIQAGAyMDJAARAAIAFAACAAwAAAAPACIACwAlACsAHwAtAC0AJgAvAEMAJwBFAFMAPABXAGEASwBjAHIAVgB0AHgAZgB6AIMAawCFAKkAdQCrALMAmgC1AL8AowDBAPEArgD2AP8A3wEBARAA6QESARYA+QEYASEA/gEjAVABCAMBAwEBNgATAAALsAAAC7AAAAuqAAALkgAAC5gAAAueAAALqgAAC7AAAAuwAAALsAAAC7AAAAuqAAALpAABCwIAAQsCAAELCAABCw4AAAuqAAALsAE3BqwAAAamAAAGrAAABqwAAAasAAAGrAAABqYAAAasAAAGrAAABqwAAAasAAAFmAWeBN4FngWYBZ4FmAWeBZgFngTkBZ4FsATqBbAE6gTwBPYE8AT2BaQFqgUCBaoFpAWqBaQFqgWkBaoE/AWqBQIFqgWkBaoFpAWqBaQFqgayBrgGsga4BrIGuAayBrgGsgUIBQ4GuAayBrgGrAAABqwAAAasCrQGpgq0BqwKtAasCrQFaAq0BqYKtAasCrQGrAq0BqwKtAUaAAAFFAAABRoAAAUmBSAFJgUgBSYFLAXyBW4FMgVuBfIFbgXyBTgFPgVEBqwKtAamCrQGrAq0BqwKygasCrQGrAq0BqwKtAamCrQGrAq0BqwKtAamCrQGpgq0BqwKtAasCrQGrAq0BqwKtAVWBVAFSgVQBVYFUAVWBVwGsgq0BWIKtAayCrQGsgq0BrIKtAayCsoGrAq0BqwKtAasCrQGrAq0BqwKygasCrQGpgq0BqwKtAasCrQGrAq0BqYKtAamCrQGrAq0BqwKtAasCrQGrAq0BqwKtAamCrQGrAq0BqwKtAamCrQGrAq0BqYKtAasCrQGrAq0BqYKtAasCrQGrAq0BqYKtAasCrQFaAq0BfIFbgasCrQFgAV6BXQFegWABXoFgAWGBbAHBgWwBwYFsAcGBbAFjAWSBwYFsAcGBqwAAAWYBZ4FpAWqBaQFqgayBrgGrAq0BqwKtAasCrQGrAq0BqwKtAasCrQGrAq0BbAHBga+BsQFtgbEBr4GxAa+BsQGvgbEBr4GxAW2BsQGvgbEBr4GxAa+BsQGvgbEBbwFwgbKBtAFyAbQBsoG0AbKBtAGygbQBc4G0AtiCrQLYgq0C2IKtAbWBtwF2gbcBtYG3AbWBtwG1gbcBdQG3AXaBtwG1gbcBtYG3AbWBtwF4AXmBuIAAAbiAAAG4gAABuIAAAbiAAAF7AAABuIAAAbiAAAF8gAABfIAAAXyAAAF/gAABu4AAAX4AAAG7gAABu4AAAX+AAAF+AAABu4AAAX+AAAG7gAABgQAAAb0AAAGCgAABvQAAAYQBtwGEAbcBhAGFgasCrQGpgq0BqwKtAasCsoGHAYiBigGLgaOBpQGNAaUBo4GlAaOBjoGjgaUBo4GlAtiCrQGggq0C2IKtAtiCrQGggq0BoIKtAtiCrQLYgq0C2IKtAZMBkYGQAZGBkwGRgZMBlIGZAZeBlgGXgZkBl4GZAZeBmQGXgZkBmoG4gZwBuIGcAbiBnAG4gZwBuIGdgpMBvoGfAb6CkwG+gpMBvoKTAb6BnwG+gZ8BvoKTAb6CkwG+gpMBvoKTAb6C2IKtAaCCrQLYgq0C2IKtAaCCrQHAAAABpoAAAcAAAAHAAAABpoAAAcAAAALXAcGBogHBgtcBwYLcgcGBqwKtAaOBpQHAAcGBpoHBgcABwYHAAcGBwAHBgcABwYGmgcGBwAHBgcABwYHAAcGBwAHBgcMBxIGoAcSBwwHEgcMBxIHDAcSBwwHEgagBxIHDAcSBwwHEgcMBxIHDAcSBqwKtAamCrQGrAq0BqwKygayBrgGvgbEBsoG0AbWBtwG1gbcBuIAAAboAAAG7gAABu4AAAbuAAAG9AAAC2IKtApMBvoLYgq0BwAAAAtcBwYHAAcGBwwHEgcYBx4AAQEuA44AAQEtA3sAAQEzAAAAAQFUAsYAAQFaAAAAAQE9A3wAAQE+A48AAQEr/yIAAQEqA3sAAQHRA44AAQHRAsYAAQEcAAAAAQEVAsYAAQEc/yIAAQCPA44AAQFB/yIAAQCcAsYAAQFOAAAAAQEeA44AAQEwAAAAAQEeAsYAAQEw/yIAAQErA44AAQErA3sAAQFBAAAAAQEiA44AAQEiAAAAAQEiAsYAAQEi/yIAAQEt/yIAAQEsA3sAAQEuAsYAAQE7AAAAAQE+AscAAQE+AAAAAQEtAsYAAQEcAtoAAQGpAhAAAQGpAAAAAQE5AtoAAQE4AscAAQExAsUAAQEyAtgAAQEjAhIAAQEmAAIAAQEpAscAAQCPAsYAAQFKAtoAAQFJAscAAQGMAscAAQGNAtoAAQCFAsYAAQE1/yIAAQFAAsYAAQFAAAAAAQFGAhIAAQEvAAAAAQEyAtoAAQEy/yIAAQFTAtoAAQENAAAAAQFTAhIAAQEN/yIAAQEuAtoAAQEuAAAAAQEuAhIAAQEu/yIAAQFeAAAAAQFe/yIAAQElAtoAAQEsAtoAAQEtAtoAAQEyAhIAAQEyAAAAAQEvAtoAAQEgAtoAAQEsA44AAQEsAsYAAQErAsYAAQErAAAAAQEcAhIAAQEXAAAAAQE5AhIAAQE5AAAAAQEyAhAAAQE1AAAAAQEqAhIAAQB8AhIAAQFKAhIAAQGNAhIAAQElAAAAAQEvAhIAAQEtAAAAAQEgAhIAAQEVAAAAAQEsAosAAQEsAEIABAAAAAEACAABAAwAEgABAEwAWAABAAEDIgACAAkAPwBDAAAAYwBnAAUAhQCFAAoAsQCzAAsA3QDhAA4BAQEFABMBIwEjABgBOwE/ABkDAQMBAB4AAQAAAAYAAQEsAR0AHwBMAEwATABMAEAARgBGAEYARgBGAEwAXgBeAF4AXgBeAF4AXgBSAFgAWABYAFgAWABeAF4AXgBeAF4AZABqAAEBOQFjAAEBLAFcAAEBLAFjAAEBQAEJAAEBKgEJAAEBLAEJAAEBKwEJAAEBLAFnAAQAAAABAAgAAQAMABIAAQCCAIgAAQABAyEAAgASAAIADAAAABkAIgALADAAOAAVAGgAcgAeAJEAkQApAJMAlAAqAJYAlwAsAJkAmQAuAJ4AqQAvALUAvwA7AMwA1QBGAQYBEABQASUBOgBbAUABQABxAUIBQwByAUUBSAB0AUsBSwB4AU8BUAB5AAEAAAJCAHsA+AD4APgA+AD4APgA+AD4APgA+AD4AP4A/gD+AP4A/gD+AP4A/gD+AP4BBAEEAQQBBAEEAQQBBAEEAQQBCgEKAQoBCgEKAQoBCgEKAQoBCgEKAPgA/gD+AQQBBAEKARwBHAEcARwBHAEcARwBHAEcARwBHAEQASIBIgEiASIBIgEiASIBIgEiASIBFgEoASgBKAEoASgBKAEoASgBKAEoAS4BLgEuAS4BLgEuAS4BLgEuAS4BLgE0ATQBNAE0ATQBNAE0ATQBNAE0ATQBOgE6AToBOgE6AToBOgE6AToBOgE6ARwBIgEiASgBKAEoASgBLgE0AToAAQI0AAAAAQIWAAAAAQIIAAAAAQGKAAAAAQHfAAAAAQCiAfoAAQImAAAAAQG2ABgAAQIwAAAAAQH4AAAAAQIEAAAAAQIMAAAABAAAAAEACAABAAwAEgABAEAATAABAAEDFgACAAcAPwBDAAAAhQCFAAUAsQCzAAYA3QDhAAkBAQEFAA4BIwEjABMBOwE/ABQAAQAAAAYAAQDgAhIAGQA6ADoAOgA6ADQAOgBAAEAAQABSAFIAUgBSAEYATABMAEwATABMAFIAWABYAFgAWABeAAEBJQISAAEBGAISAAECCAISAAEBpAISAAEBWgJoAAEBkAISAAEBmgISAAEBmQISAAYAEAABAAoAAQABAAwAFgABABwAQAACAAEDHgMhAAAAAQABAx4ABAAAABIAAAASAAAAGAAAAB4AAQEsAAAAAQE9AAAAAQFiAAAAAQAEAAEBLP8iAAYAEAABAAoAAgABAAwAIgABACwAjgACAAMDEAMVAAADFwMdAAYDIwMkAA0AAgABAxIDFQAAAA8AAABcAAAAXAAAAFYAAAA+AAAARAAAAEoAAABWAAAAXAAAAFwAAABcAAAAXAAAAFYAAABQAAAAVgAAAFwAAQFUAhIAAQECAhIAAQEEAhIAAQEfAhIAAQEtAhIAAQEsAhIABAAKABAAFgAcAAEBLALHAAEBVALaAAEBAgLaAAEBBALaAAEAAAAKAeQDGAACREZMVAAObGF0bgASAD4AAAA6AAlBWkUgAGBDUlQgAIhLQVogALBNQUggANhNT0wgAQBOTEQgAShST00gAVBUQVQgAXhUUksgAaAAAP//ABAAAAABAAIAAwANAA4ADwAQABEAEgATABQAFQAWABcAGAAA//8AEQAAAAEAAgADAAQADQAOAA8AEAARABIAEwAUABUAFgAXABgAAP//ABEAAAABAAIAAwAFAA0ADgAPABAAEQASABMAFAAVABYAFwAYAAD//wARAAAAAQACAAMABgANAA4ADwAQABEAEgATABQAFQAWABcAGAAA//8AEQAAAAEAAgADAAsADQAOAA8AEAARABIAEwAUABUAFgAXABgAAP//ABEAAAABAAIAAwAKAA0ADgAPABAAEQASABMAFAAVABYAFwAYAAD//wARAAAAAQACAAMADAANAA4ADwAQABEAEgATABQAFQAWABcAGAAA//8AEQAAAAEAAgADAAkADQAOAA8AEAARABIAEwAUABUAFgAXABgAAP//ABEAAAABAAIAAwAHAA0ADgAPABAAEQASABMAFAAVABYAFwAYAAD//wARAAAAAQACAAMACAANAA4ADwAQABEAEgATABQAFQAWABcAGAAZYWFsdACYY2NtcACeZnJhYwCkbGlnYQCqbG9jbACybG9jbACybG9jbACybG9jbACybG9jbACybG9jbAC4bG9jbAC4bG9jbAC+bG9jbADEb3JkbgDKc2luZgDSc3MwMQDYc3MwMgDic3MwMwDsc3MwNAD2c3MwNgEAc3MwNwEKc3MwOAEUc3MwOQEec3VicwEoc3VwcwEuAAAAAQAAAAAAAQABAAAAAQAJAAAAAgAMAA0AAAABAAIAAAABAAMAAAABAAQAAAABAAUAAAACAAoACwAAAAEABwAGAAEADgAAAQAABgABAA8AAAEBAAYAAQAQAAABAgAGAAEAEQAAAQMABgABABIAAAEEAAYAAQATAAABBQAGAAEAFAAAAQYABgABABUAAAEHAAAAAQAGAAAAAQAIABkANAOSA9gD7AQOBDQEagRqBHgEhgUaBWIFhAWuCK4IvAjUCOwJBAkuCUYKBAoYCjAKSgADAAAAAQAIAAECjABjAMwA0ADUANgA3ADgAOQA6ADsAPAA9gD6AP4BAgEGAQoBxgEOARIBFgEaAR4BIgEmASoBLgEyATYBOgE+AUYBTAFSAVgBXgFmAWwBcgF4AX4BhAGIAYwBkAGUAZoBngGiAaYBrAGwAbQBuAG+AcIBxgHKAc4B0gHWAdoB3gHiAeYB6gHuAfYB/AICAggCDgIUAhoCIAImAiwCMAI0AjgCPAJAAkQCSAJMAlACVAJYAlwCYAJkAmgCbAJwAnQCeAJ8AoAChAKIAAEBUQABAJEAAQCSAAEAkwABAJQAAQCLAAEAjAABAI0AAQCOAAIAjwCVAAEAkAABAJYAAQCXAAEAOgABAIUAAQCGAAEAmAABAIcAAQCIAAEAiQABAIoAAQBhAAEAZwABAJkAAQCaAAEAmwABAJwAAQCdAAMBUQElATAAAgEmATEAAgEnATIAAgEoATMAAgEpATQAAwEqATUBQAACASsBNgACASwBNwACAS0BOAACAS4BOQACAS8BOgABAUEAAQFCAAEBQwABAUQAAgDRAUUAAQFGAAEBRwABAUgAAgDYAUkAAQE7AAEBPAABAT0AAgEjAT4AAQE/AAEBJAABAVIAAQFKAAEA/wABAQUAAQFLAAEBTAABAU0AAQFOAAEBTwABAVAAAwIHAhEB+wACAggCEgACAgkCEwACAgoCFAACAgsCFQACAgwCFgACAg0CFwACAg4CGAACAg8CGQACAhACGgABAkQAAQJFAAECRgABAkcAAQJIAAECSQABAkoAAQJLAAECTAABAvUAAQL2AAEC9wABAvgAAQL5AAEC+gABAvsAAQL8AAEC/QABAv4AAQMjAAEDJAABAx8AAQMyAAEDMwABAGMAAgAHABQAHQAeACUAJgAoACkAKgArADMANAA5AEIASABLAE4AWABZAFoAWwBfAGYAbAB3AH0AgwCPAJ4AnwCgAKEAogCjAKQApQCmAKcAqACwALkAugDGAMwA0ADRANQA1gDdAN4A3wDgAOEA5gDpAOwA/QEEAQoBFQEbASEBKgE1Ad0B3gHfAeAB4QHiAeMB5AHlAeYCNAI2AjcCOAI5AjoCOwI8Aj0C4ALhAuIC4wLkAuUC5gLnAugC6QMRAxIDHgMlAyYABgAQAAIADAAeAAAAAwAAAAEASAABACoAAQAAABYAAwAAAAEAEgABABgAAQAAABYAAQABANYAAgACAxEDFQAAAxcDHQAFAAEAAAABAAgAAQAGAAUAAQABAMwAAQAAAAEACAACAA4ABABhAGcA/wEFAAEABABfAGYA/QEEAAEAAAABAAgAAgAQAAUAhQCGASMBJAMfAAEABQBCAEgA4ADmAx4ABgAAAAEACAABBgYAAgAKABwAAQAEAAEAMQABAAAAAQAAABcAAQAEAAEAzgABAAAAAQAAABcAAQAAAAEACAABAN4AKgABAAAAAQAIAAEA0AA0AAQAAAABAAgAAQB+AAUAEABEAFAAZgByAAUADAAUABwAJAAsAf0AAwJCAd8B/gADAkIB4AIAAAMCQgHhAgIAAwJCAeICAwADAkIB5QABAAQB/wADAkIB4AACAAYADgIBAAMCQgHhAgQAAwJCAeUAAQAEAgUAAwJCAeUAAQAEAgYAAwJCAeUAAQAFAd4B3wHgAeIB5AAGAAAAAgAKACQAAwABACwAAQASAAAAAQAAABgAAQACAAIAngADAAEAEgABABwAAAABAAAAGAACAAEB3QHmAAAAAQACAEsA6QAEAAAAAQAIAAEAFAABAAgAAQAEArUAAwDpAjQAAQABAEUABAAAAAEACAABABwAAQAIAAIABgAOAh0AAwJNAk0CHAACAk0AAQABAk0ABAAAAAEACAABAtgADgAiAEAASgBmAHoAmACsAPAA+gE+AYIBvAKaAs4AAwAIABAAGAImAAMCNAI0AicAAwI0AssCKAACAssAAQAEAikAAgLLAAMACAAQABYCLAADAssCywIqAAICOwIrAAICywACAAYADgIuAAMCOwI7Ai0AAgI7AAMACAAQABgCLwADAkECQQIxAAMCUAJSAjAAAgJQAAIABgAOAjMAAwLLAssCMgACAssABwAQABoAIgAqADIAOAA+Ah4ABAJNAk0CzQIfAAMCTQLNAiEAAwLNAs0CIwADAs4CzgIgAAICzQIiAAICzgIkAAIC0wABAAQCJQACArEABwAQABoAIgAqADIAOAA+AnYABAKxArECzQJ0AAMCTQLNAncAAwKxAssCeAADArECzQJ1AAICVQJ5AAICywJ6AAICzQAHABAAGAAgACgAMAA4AD4CgQADAkICywJ8AAMCywLLAn0AAwLLAs0CfwADAs0CzQKAAAMCzgLOAnsAAgLLAn4AAgLNAAYADgAWAB4AJgAuADQCgwADAk0CzQKFAAMCywLNAoYAAwLNAk0ChwADAs0CywKCAAICTQKEAAICywAWAC4AOgBEAE4AWABgAGgAcAB4AIAAiACQAJgAoACoALAAuADAAMYAzADSANgCjQAFAjkCTQJNAk0CjAAEAjkCTQJNApAABAKxArECsQKUAAQCywLLAs0CnQADAkICzQKJAAMCTQJNAooAAwJNAs0CiwADAk0CzgKPAAMCsQKxApEAAwKxAs0CkwADAssCywKVAAMCywLNApYAAwLLAs4CmAADAs4CTQKZAAMCzgLLApsAAwLTAs0CnAADAtMC0wKIAAICTQKOAAICsQKSAAICywKXAAICzQKaAAIC0wAGAA4AFgAcACIAKAAuAqMAAwLTAs0CngACAk0CnwACAqYCoAACAssCoQACAs0CogACAtMAAQAEAqQAAgLeAAEADgI0AjYCOQI7AkECQgJNAlQCsQLLAs0CzgLTAt4AAQAAAAEACAABABQAhwABAAAAAQAIAAEABgCSAAIAAQCeAKgAAAABAAAAAQAIAAEABgBeAAIAAQDdAOEAAAABAAAAAQAIAAEABgAvAAIAAQBYAFsAAAABAAAAAQAIAAIAEgAGAIsAjACNAI4AjwCQAAEABgAlACYAKAApACoAKwABAAAAAQAIAAEABgAVAAIAAQLgAukAAAABAAAAAQAIAAIAXAArAJEAkgCTAJQAlQCWAJcAmACZAJoAmwCcAJ0BQAFBAUIBQwFEAUUBRgFHAUgBSQFKAUsBTAFNAU4BTwFQAkQCRQJGAkcCSAJJAkoCSwJMAyMDJAMyAzMAAQArAAcAFAAdAB4AKgAzADQATgBsAHcAfQCDAI8AowCwALkAugDGAMwA0ADRANQA1gDsAQoBFQEbASEBKgE1AjQCNgI3AjgCOQI6AjsCPAI9AxEDEgMlAyYAAQAAAAEACAABAAYAHgABAAEB3QABABAAAQAKAAAAAQAGAAEAAQACAMwA1gABAAAAAQAIAAIACgACADoA2AABAAIAOQDWAAEAAAABAAgAAgAOAAQBUQFSAVEBUgABAAQAAgBLAJ4A6Q=="}
\ No newline at end of file
diff --git a/apps/v4/app/og/route.tsx b/apps/v4/app/og/route.tsx
new file mode 100644
index 00000000000..1710b3212c7
--- /dev/null
+++ b/apps/v4/app/og/route.tsx
@@ -0,0 +1,117 @@
+import { ImageResponse } from "next/og"
+
+async function loadAssets(): Promise<
+  { name: string; data: Buffer; weight: 400 | 600; style: "normal" }[]
+> {
+  const [
+    { base64Font: normal },
+    { base64Font: mono },
+    { base64Font: semibold },
+  ] = await Promise.all([
+    import("./geist-regular-otf.json").then((mod) => mod.default || mod),
+    import("./geistmono-regular-otf.json").then((mod) => mod.default || mod),
+    import("./geist-semibold-otf.json").then((mod) => mod.default || mod),
+  ])
+
+  return [
+    {
+      name: "Geist",
+      data: Buffer.from(normal, "base64"),
+      weight: 400 as const,
+      style: "normal" as const,
+    },
+    {
+      name: "Geist Mono",
+      data: Buffer.from(mono, "base64"),
+      weight: 400 as const,
+      style: "normal" as const,
+    },
+    {
+      name: "Geist",
+      data: Buffer.from(semibold, "base64"),
+      weight: 600 as const,
+      style: "normal" as const,
+    },
+  ]
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const title = searchParams.get("title")
+  const description = searchParams.get("description")
+
+  const [fonts] = await Promise.all([loadAssets()])
+
+  return new ImageResponse(
+    (
+      <div
+        tw="flex h-full w-full bg-black text-white"
+        style={{ fontFamily: "Geist Sans" }}
+      >
+        <div tw="flex border absolute border-stone-700 border-dashed inset-y-0 left-16 w-[1px]" />
+        <div tw="flex border absolute border-stone-700 border-dashed inset-y-0 right-16 w-[1px]" />
+        <div tw="flex border absolute border-stone-700 inset-x-0 h-[1px] top-16" />
+        <div tw="flex border absolute border-stone-700 inset-x-0 h-[1px] bottom-16" />
+        <div tw="flex absolute flex-row bottom-24 right-24 text-white">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 256 256"
+            width={48}
+            height={48}
+          >
+            <rect width="256" height="256" fill="none"></rect>
+            <line
+              x1="208"
+              y1="128"
+              x2="128"
+              y2="208"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="32"
+            ></line>
+            <line
+              x1="192"
+              y1="40"
+              x2="40"
+              y2="192"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="32"
+            ></line>
+          </svg>
+        </div>
+        <div tw="flex flex-col absolute w-[896px] justify-center inset-32">
+          <div
+            tw="tracking-tight flex-grow-1 flex flex-col justify-center leading-[1.1]"
+            style={{
+              textWrap: "balance",
+              fontWeight: 600,
+              fontSize: title && title.length > 20 ? 64 : 80,
+              letterSpacing: "-0.04em",
+            }}
+          >
+            {title}
+          </div>
+          <div
+            tw="text-[40px] leading-[1.5] flex-grow-1 text-stone-400"
+            style={{
+              fontWeight: 500,
+              textWrap: "balance",
+            }}
+          >
+            {description}
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 628,
+      fonts,
+    }
+  )
+}
diff --git a/apps/v4/components.json b/apps/v4/components.json
new file mode 100644
index 00000000000..72435ee18e9
--- /dev/null
+++ b/apps/v4/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/registry/new-york-v4/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/apps/v4/components/active-theme.tsx b/apps/v4/components/active-theme.tsx
new file mode 100644
index 00000000000..1bc94c61387
--- /dev/null
+++ b/apps/v4/components/active-theme.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react"
+
+const DEFAULT_THEME = "default"
+
+type ThemeContextType = {
+  activeTheme: string
+  setActiveTheme: (theme: string) => void
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+export function ActiveThemeProvider({
+  children,
+  initialTheme,
+}: {
+  children: ReactNode
+  initialTheme?: string
+}) {
+  const [activeTheme, setActiveTheme] = useState<string>(
+    () => initialTheme || DEFAULT_THEME
+  )
+
+  useEffect(() => {
+    Array.from(document.body.classList)
+      .filter((className) => className.startsWith("theme-"))
+      .forEach((className) => {
+        document.body.classList.remove(className)
+      })
+    document.body.classList.add(`theme-${activeTheme}`)
+    if (activeTheme.endsWith("-scaled")) {
+      document.body.classList.add("theme-scaled")
+    }
+  }, [activeTheme])
+
+  return (
+    <ThemeContext.Provider value={{ activeTheme, setActiveTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useThemeConfig() {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error("useThemeConfig must be used within an ActiveThemeProvider")
+  }
+  return context
+}
diff --git a/apps/v4/components/analytics.tsx b/apps/v4/components/analytics.tsx
new file mode 100644
index 00000000000..164e9b79043
--- /dev/null
+++ b/apps/v4/components/analytics.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import { Analytics as VercelAnalytics } from "@vercel/analytics/react"
+
+export function Analytics() {
+  return <VercelAnalytics />
+}
diff --git a/apps/v4/components/announcement.tsx b/apps/v4/components/announcement.tsx
new file mode 100644
index 00000000000..8f588a8560e
--- /dev/null
+++ b/apps/v4/components/announcement.tsx
@@ -0,0 +1,14 @@
+import Link from "next/link"
+import { ArrowRightIcon } from "lucide-react"
+
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+
+export function Announcement() {
+  return (
+    <Badge asChild variant="secondary" className="rounded-full">
+      <Link href="/docs/changelog">
+        Now available: shadcn CLI 3.0 and MCP Server <ArrowRightIcon />
+      </Link>
+    </Badge>
+  )
+}
diff --git a/apps/v4/components/block-display.tsx b/apps/v4/components/block-display.tsx
new file mode 100644
index 00000000000..f860cff1581
--- /dev/null
+++ b/apps/v4/components/block-display.tsx
@@ -0,0 +1,63 @@
+import * as React from "react"
+import { registryItemFileSchema } from "shadcn/schema"
+import { z } from "zod"
+
+import { highlightCode } from "@/lib/highlight-code"
+import {
+  createFileTreeForRegistryItemFiles,
+  getRegistryItem,
+} from "@/lib/registry"
+import { cn } from "@/lib/utils"
+import { BlockViewer } from "@/components/block-viewer"
+import { ComponentPreview } from "@/components/component-preview"
+
+export async function BlockDisplay({ name }: { name: string }) {
+  const item = await getCachedRegistryItem(name)
+
+  if (!item?.files) {
+    return null
+  }
+
+  const [tree, highlightedFiles] = await Promise.all([
+    getCachedFileTree(item.files),
+    getCachedHighlightedFiles(item.files),
+  ])
+
+  return (
+    <BlockViewer item={item} tree={tree} highlightedFiles={highlightedFiles}>
+      <ComponentPreview
+        name={item.name}
+        hideCode
+        className={cn(
+          "my-0 **:[.preview]:h-auto **:[.preview]:p-4 **:[.preview>.p-6]:p-0",
+          item.meta?.containerClassName
+        )}
+      />
+    </BlockViewer>
+  )
+}
+
+const getCachedRegistryItem = React.cache(async (name: string) => {
+  return await getRegistryItem(name)
+})
+
+const getCachedFileTree = React.cache(
+  async (files: Array<{ path: string; target?: string }>) => {
+    if (!files) {
+      return null
+    }
+
+    return await createFileTreeForRegistryItemFiles(files)
+  }
+)
+
+const getCachedHighlightedFiles = React.cache(
+  async (files: z.infer<typeof registryItemFileSchema>[]) => {
+    return await Promise.all(
+      files.map(async (file) => ({
+        ...file,
+        highlightedContent: await highlightCode(file.content ?? ""),
+      }))
+    )
+  }
+)
diff --git a/apps/v4/components/block-image.tsx b/apps/v4/components/block-image.tsx
new file mode 100644
index 00000000000..336a6e8a903
--- /dev/null
+++ b/apps/v4/components/block-image.tsx
@@ -0,0 +1,36 @@
+import Image from "next/image"
+
+import { cn } from "@/lib/utils"
+
+export function BlockImage({
+  name,
+  width = 1440,
+  height = 900,
+  className,
+}: Omit<React.ComponentProps<typeof Image>, "src" | "alt"> & { name: string }) {
+  return (
+    <div
+      className={cn(
+        "relative aspect-[1440/900] w-full overflow-hidden rounded-lg",
+        className
+      )}
+    >
+      <Image
+        src={`/r/styles/new-york/${name}-light.png`}
+        alt={name}
+        width={width}
+        height={height}
+        className="object-cover dark:hidden"
+        data-image="light"
+      />
+      <Image
+        src={`/r/styles/new-york/${name}-dark.png`}
+        alt={name}
+        width={width}
+        height={height}
+        className="hidden object-cover dark:block"
+        data-image="dark"
+      />
+    </div>
+  )
+}
diff --git a/apps/v4/components/block-viewer.tsx b/apps/v4/components/block-viewer.tsx
new file mode 100644
index 00000000000..5a65b1e7fe6
--- /dev/null
+++ b/apps/v4/components/block-viewer.tsx
@@ -0,0 +1,493 @@
+"use client"
+
+import * as React from "react"
+import Image from "next/image"
+import Link from "next/link"
+import {
+  Check,
+  ChevronRight,
+  Clipboard,
+  File,
+  Folder,
+  Fullscreen,
+  Monitor,
+  RotateCw,
+  Smartphone,
+  Tablet,
+  Terminal,
+} from "lucide-react"
+import { ImperativePanelHandle } from "react-resizable-panels"
+import { registryItemFileSchema, registryItemSchema } from "shadcn/schema"
+import { z } from "zod"
+
+import { trackEvent } from "@/lib/events"
+import { createFileTreeForRegistryItemFiles, FileTree } from "@/lib/registry"
+import { cn } from "@/lib/utils"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { getIconForLanguageExtension } from "@/components/icons"
+import { OpenInV0Button } from "@/components/open-in-v0-button"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york-v4/ui/resizable"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  Sidebar,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+import { Tabs, TabsList, TabsTrigger } from "@/registry/new-york-v4/ui/tabs"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+
+type BlockViewerContext = {
+  item: z.infer<typeof registryItemSchema>
+  view: "code" | "preview"
+  setView: (view: "code" | "preview") => void
+  activeFile: string | null
+  setActiveFile: (file: string) => void
+  resizablePanelRef: React.RefObject<ImperativePanelHandle | null> | null
+  tree: ReturnType<typeof createFileTreeForRegistryItemFiles> | null
+  highlightedFiles:
+    | (z.infer<typeof registryItemFileSchema> & {
+        highlightedContent: string
+      })[]
+    | null
+  iframeKey?: number
+  setIframeKey?: React.Dispatch<React.SetStateAction<number>>
+}
+
+const BlockViewerContext = React.createContext<BlockViewerContext | null>(null)
+
+function useBlockViewer() {
+  const context = React.useContext(BlockViewerContext)
+  if (!context) {
+    throw new Error("useBlockViewer must be used within a BlockViewerProvider.")
+  }
+  return context
+}
+
+function BlockViewerProvider({
+  item,
+  tree,
+  highlightedFiles,
+  children,
+}: Pick<BlockViewerContext, "item" | "tree" | "highlightedFiles"> & {
+  children: React.ReactNode
+}) {
+  const [view, setView] = React.useState<BlockViewerContext["view"]>("preview")
+  const [activeFile, setActiveFile] = React.useState<
+    BlockViewerContext["activeFile"]
+  >(highlightedFiles?.[0].target ?? null)
+  const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
+  const [iframeKey, setIframeKey] = React.useState(0)
+
+  return (
+    <BlockViewerContext.Provider
+      value={{
+        item,
+        view,
+        setView,
+        resizablePanelRef,
+        activeFile,
+        setActiveFile,
+        tree,
+        highlightedFiles,
+        iframeKey,
+        setIframeKey,
+      }}
+    >
+      <div
+        id={item.name}
+        data-view={view}
+        className="group/block-view-wrapper flex min-w-0 scroll-mt-24 flex-col-reverse items-stretch gap-4 overflow-hidden md:flex-col"
+        style={
+          {
+            "--height": item.meta?.iframeHeight ?? "930px",
+          } as React.CSSProperties
+        }
+      >
+        {children}
+      </div>
+    </BlockViewerContext.Provider>
+  )
+}
+
+function BlockViewerToolbar() {
+  const { setView, view, item, resizablePanelRef, setIframeKey } =
+    useBlockViewer()
+  const { copyToClipboard, isCopied } = useCopyToClipboard()
+
+  return (
+    <div className="hidden w-full items-center gap-2 pl-2 md:pr-6 lg:flex">
+      <Tabs
+        value={view}
+        onValueChange={(value) => setView(value as "preview" | "code")}
+      >
+        <TabsList className="grid h-8 grid-cols-2 items-center rounded-md p-1 *:data-[slot=tabs-trigger]:h-6 *:data-[slot=tabs-trigger]:rounded-sm *:data-[slot=tabs-trigger]:px-2 *:data-[slot=tabs-trigger]:text-xs">
+          <TabsTrigger value="preview">Preview</TabsTrigger>
+          <TabsTrigger value="code">Code</TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Separator orientation="vertical" className="mx-2 !h-4" />
+      <a
+        href={`#${item.name}`}
+        className="flex-1 text-center text-sm font-medium underline-offset-2 hover:underline md:flex-auto md:text-left"
+      >
+        {item.description?.replace(/\.$/, "")}
+      </a>
+      <div className="ml-auto flex items-center gap-2">
+        <div className="h-8 items-center gap-1.5 rounded-md border p-1 shadow-none">
+          <ToggleGroup
+            type="single"
+            defaultValue="100"
+            onValueChange={(value) => {
+              setView("preview")
+              if (resizablePanelRef?.current) {
+                resizablePanelRef.current.resize(parseInt(value))
+              }
+            }}
+            className="gap-1 *:data-[slot=toggle-group-item]:!size-6 *:data-[slot=toggle-group-item]:!rounded-sm"
+          >
+            <ToggleGroupItem value="100" title="Desktop">
+              <Monitor />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="60" title="Tablet">
+              <Tablet />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="30" title="Mobile">
+              <Smartphone />
+            </ToggleGroupItem>
+            <Separator orientation="vertical" className="!h-4" />
+            <Button
+              size="icon"
+              variant="ghost"
+              className="size-6 rounded-sm p-0"
+              asChild
+              title="Open in New Tab"
+            >
+              <Link href={`/view/${item.name}`} target="_blank">
+                <span className="sr-only">Open in New Tab</span>
+                <Fullscreen />
+              </Link>
+            </Button>
+            <Separator orientation="vertical" className="!h-4" />
+            <Button
+              size="icon"
+              variant="ghost"
+              className="size-6 rounded-sm p-0"
+              title="Refresh Preview"
+              onClick={() => {
+                if (setIframeKey) {
+                  setIframeKey((k) => k + 1)
+                }
+              }}
+            >
+              <RotateCw />
+              <span className="sr-only">Refresh Preview</span>
+            </Button>
+          </ToggleGroup>
+        </div>
+        <Separator orientation="vertical" className="mx-1 !h-4" />
+        <Button
+          variant="outline"
+          className="w-fit gap-1 px-2 shadow-none"
+          size="sm"
+          onClick={() => {
+            copyToClipboard(`npx shadcn@latest add ${item.name}`)
+          }}
+        >
+          {isCopied ? <Check /> : <Terminal />}
+          <span>npx shadcn add {item.name}</span>
+        </Button>
+        <Separator orientation="vertical" className="mx-1 !h-4" />
+        <OpenInV0Button name={item.name} />
+      </div>
+    </div>
+  )
+}
+
+function BlockViewerIframe({ className }: { className?: string }) {
+  const { item, iframeKey } = useBlockViewer()
+
+  return (
+    <iframe
+      key={iframeKey}
+      src={`/view/${item.name}`}
+      height={item.meta?.iframeHeight ?? 930}
+      loading="lazy"
+      className={cn(
+        "bg-background no-scrollbar relative z-20 w-full",
+        className
+      )}
+    />
+  )
+}
+
+function BlockViewerView() {
+  const { resizablePanelRef } = useBlockViewer()
+
+  return (
+    <div className="hidden group-data-[view=code]/block-view-wrapper:hidden md:h-(--height) lg:flex">
+      <div className="relative grid w-full gap-4">
+        <div className="absolute inset-0 right-4 [background-image:radial-gradient(#d4d4d4_1px,transparent_1px)] [background-size:20px_20px] dark:[background-image:radial-gradient(#404040_1px,transparent_1px)]"></div>
+        <ResizablePanelGroup
+          direction="horizontal"
+          className="after:bg-surface/50 relative z-10 after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-xl"
+        >
+          <ResizablePanel
+            ref={resizablePanelRef}
+            className="bg-background relative aspect-[4/2.5] overflow-hidden rounded-lg border md:aspect-auto md:rounded-xl"
+            defaultSize={100}
+            minSize={30}
+          >
+            <BlockViewerIframe />
+          </ResizablePanel>
+          <ResizableHandle className="after:bg-border relative hidden w-3 bg-transparent p-0 after:absolute after:top-1/2 after:right-0 after:h-8 after:w-[6px] after:translate-x-[-1px] after:-translate-y-1/2 after:rounded-full after:transition-all after:hover:h-10 md:block" />
+          <ResizablePanel defaultSize={0} minSize={0} />
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  )
+}
+
+function BlockViewerMobile({ children }: { children: React.ReactNode }) {
+  const { item } = useBlockViewer()
+
+  return (
+    <div className="flex flex-col gap-2 lg:hidden">
+      <div className="flex items-center gap-2 px-2">
+        <div className="line-clamp-1 text-sm font-medium">
+          {item.description}
+        </div>
+        <div className="text-muted-foreground ml-auto shrink-0 font-mono text-xs">
+          {item.name}
+        </div>
+      </div>
+      {item.meta?.mobile === "component" ? (
+        children
+      ) : (
+        <div className="overflow-hidden rounded-xl border">
+          <Image
+            src={`/r/styles/new-york-v4/${item.name}-light.png`}
+            alt={item.name}
+            data-block={item.name}
+            width={1440}
+            height={900}
+            className="object-cover dark:hidden"
+          />
+          <Image
+            src={`/r/styles/new-york-v4/${item.name}-dark.png`}
+            alt={item.name}
+            data-block={item.name}
+            width={1440}
+            height={900}
+            className="hidden object-cover dark:block"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function BlockViewerCode() {
+  const { activeFile, highlightedFiles } = useBlockViewer()
+
+  const file = React.useMemo(() => {
+    return highlightedFiles?.find((file) => file.target === activeFile)
+  }, [highlightedFiles, activeFile])
+
+  if (!file) {
+    return null
+  }
+
+  const language = file.path.split(".").pop() ?? "tsx"
+
+  return (
+    <div className="bg-code text-code-foreground mr-[14px] flex overflow-hidden rounded-xl border group-data-[view=preview]/block-view-wrapper:hidden md:h-(--height)">
+      <div className="w-72">
+        <BlockViewerFileTree />
+      </div>
+      <figure
+        data-rehype-pretty-code-figure=""
+        className="!mx-0 mt-0 flex min-w-0 flex-1 flex-col rounded-xl border-none"
+      >
+        <figcaption
+          className="text-code-foreground [&_svg]:text-code-foreground flex h-12 shrink-0 items-center gap-2 border-b px-4 py-2 [&_svg]:size-4 [&_svg]:opacity-70"
+          data-language={language}
+        >
+          {getIconForLanguageExtension(language)}
+          {file.target}
+          <div className="ml-auto flex items-center gap-2">
+            <BlockCopyCodeButton />
+          </div>
+        </figcaption>
+        <div
+          key={file?.path}
+          dangerouslySetInnerHTML={{ __html: file?.highlightedContent ?? "" }}
+          className="no-scrollbar overflow-y-auto"
+        />
+      </figure>
+    </div>
+  )
+}
+
+export function BlockViewerFileTree() {
+  const { tree } = useBlockViewer()
+
+  if (!tree) {
+    return null
+  }
+
+  return (
+    <SidebarProvider className="flex !min-h-full flex-col border-r">
+      <Sidebar collapsible="none" className="w-full flex-1">
+        <SidebarGroupLabel className="h-12 rounded-none border-b px-4 text-sm">
+          Files
+        </SidebarGroupLabel>
+        <SidebarGroup className="p-0">
+          <SidebarGroupContent>
+            <SidebarMenu className="translate-x-0 gap-1.5">
+              {tree.map((file, index) => (
+                <Tree key={index} item={file} index={1} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
+
+function Tree({ item, index }: { item: FileTree; index: number }) {
+  const { activeFile, setActiveFile } = useBlockViewer()
+
+  if (!item.children) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          isActive={item.path === activeFile}
+          onClick={() => item.path && setActiveFile(item.path)}
+          className="hover:bg-muted-foreground/15 focus:bg-muted-foreground/15 focus-visible:bg-muted-foreground/15 active:bg-muted-foreground/15 data-[active=true]:bg-muted-foreground/15 rounded-none pl-(--index) whitespace-nowrap"
+          data-index={index}
+          style={
+            {
+              "--index": `${index * (index === 2 ? 1.2 : 1.3)}rem`,
+            } as React.CSSProperties
+          }
+        >
+          <ChevronRight className="invisible" />
+          <File className="h-4 w-4" />
+          {item.name}
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    )
+  }
+
+  return (
+    <SidebarMenuItem>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen
+      >
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton
+            className="hover:bg-muted-foreground/15 focus:bg-muted-foreground/15 focus-visible:bg-muted-foreground/15 active:bg-muted-foreground/15 data-[active=true]:bg-muted-foreground/15 rounded-none pl-(--index) whitespace-nowrap"
+            style={
+              {
+                "--index": `${index * (index === 1 ? 1 : 1.2)}rem`,
+              } as React.CSSProperties
+            }
+          >
+            <ChevronRight className="transition-transform" />
+            <Folder />
+            {item.name}
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub className="m-0 w-full translate-x-0 border-none p-0">
+            {item.children.map((subItem, key) => (
+              <Tree key={key} item={subItem} index={index + 1} />
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarMenuItem>
+  )
+}
+
+function BlockCopyCodeButton() {
+  const { activeFile, item } = useBlockViewer()
+  const { copyToClipboard, isCopied } = useCopyToClipboard()
+
+  const file = React.useMemo(() => {
+    return item.files?.find((file) => file.target === activeFile)
+  }, [activeFile, item.files])
+
+  const content = file?.content
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="size-7"
+      onClick={() => {
+        copyToClipboard(content)
+        trackEvent({
+          name: "copy_block_code",
+          properties: {
+            name: item.name,
+            file: file.path,
+          },
+        })
+      }}
+    >
+      {isCopied ? <Check /> : <Clipboard />}
+    </Button>
+  )
+}
+
+function BlockViewer({
+  item,
+  tree,
+  highlightedFiles,
+  children,
+  ...props
+}: Pick<BlockViewerContext, "item" | "tree" | "highlightedFiles"> & {
+  children: React.ReactNode
+}) {
+  return (
+    <BlockViewerProvider
+      item={item}
+      tree={tree}
+      highlightedFiles={highlightedFiles}
+      {...props}
+    >
+      <BlockViewerToolbar />
+      <BlockViewerView />
+      <BlockViewerCode />
+      <BlockViewerMobile>{children}</BlockViewerMobile>
+    </BlockViewerProvider>
+  )
+}
+
+export { BlockViewer }
diff --git a/apps/v4/components/blocks-nav.tsx b/apps/v4/components/blocks-nav.tsx
new file mode 100644
index 00000000000..6b3e3b1d361
--- /dev/null
+++ b/apps/v4/components/blocks-nav.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { ScrollArea, ScrollBar } from "@/registry/new-york-v4/ui/scroll-area"
+import { registryCategories } from "@/registry/registry-categories"
+
+export function BlocksNav() {
+  const pathname = usePathname()
+
+  return (
+    <div className="relative overflow-hidden">
+      <ScrollArea className="max-w-none">
+        <div className="flex items-center">
+          <BlocksNavLink
+            category={{ name: "Featured", slug: "", hidden: false }}
+            isActive={pathname === "/blocks"}
+          />
+          {registryCategories.map((category) => (
+            <BlocksNavLink
+              key={category.slug}
+              category={category}
+              isActive={pathname === `/blocks/${category.slug}`}
+            />
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" className="invisible" />
+      </ScrollArea>
+    </div>
+  )
+}
+
+function BlocksNavLink({
+  category,
+  isActive,
+}: {
+  category: (typeof registryCategories)[number]
+  isActive: boolean
+}) {
+  if (category.hidden) {
+    return null
+  }
+
+  return (
+    <Link
+      href={`/blocks/${category.slug}`}
+      key={category.slug}
+      className="text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 items-center justify-center px-4 text-center text-base font-medium transition-colors"
+      data-active={isActive}
+    >
+      {category.name}
+    </Link>
+  )
+}
diff --git a/apps/v4/components/callout.tsx b/apps/v4/components/callout.tsx
new file mode 100644
index 00000000000..7fc9fb0b7f0
--- /dev/null
+++ b/apps/v4/components/callout.tsx
@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils"
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york-v4/ui/alert"
+
+export function Callout({
+  title,
+  children,
+  icon,
+  className,
+  ...props
+}: React.ComponentProps<typeof Alert> & { icon?: React.ReactNode }) {
+  return (
+    <Alert
+      className={cn(
+        "bg-surface text-surface-foreground mt-6 w-auto border-none md:-mx-1",
+        className
+      )}
+      {...props}
+    >
+      {icon}
+      {title && <AlertTitle>{title}</AlertTitle>}
+      <AlertDescription className="text-card-foreground/80">
+        {children}
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/apps/v4/components/cards/activity-goal.tsx b/apps/v4/components/cards/activity-goal.tsx
new file mode 100644
index 00000000000..17d8d84d5bc
--- /dev/null
+++ b/apps/v4/components/cards/activity-goal.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import { MinusIcon, PlusIcon } from "lucide-react"
+import { Bar, BarChart } from "recharts"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york-v4/ui/chart"
+
+const data = [
+  {
+    goal: 400,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 239,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 349,
+  },
+]
+
+const chartConfig = {
+  goal: {
+    label: "Goal",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+export function CardsActivityGoal() {
+  const [goal, setGoal] = React.useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <Card className="h-full gap-5">
+      <CardHeader>
+        <CardTitle>Move Goal</CardTitle>
+        <CardDescription>Set your daily activity goal.</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-1 flex-col">
+        <div className="flex items-center justify-center gap-4">
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 rounded-full"
+            onClick={() => onClick(-10)}
+            disabled={goal <= 200}
+          >
+            <MinusIcon />
+            <span className="sr-only">Decrease</span>
+          </Button>
+          <div className="text-center">
+            <div className="text-4xl font-bold tracking-tighter tabular-nums">
+              {goal}
+            </div>
+            <div className="text-muted-foreground text-xs uppercase">
+              Calories/day
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-7 rounded-full"
+            onClick={() => onClick(10)}
+            disabled={goal >= 400}
+          >
+            <PlusIcon />
+            <span className="sr-only">Increase</span>
+          </Button>
+        </div>
+        <div className="flex-1">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-full w-full"
+          >
+            <BarChart data={data}>
+              <Bar dataKey="goal" radius={4} fill="var(--color-goal)" />
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full" variant="secondary">
+          Set Goal
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/components/cards/calendar.tsx b/apps/v4/components/cards/calendar.tsx
new file mode 100644
index 00000000000..7e21c2432d0
--- /dev/null
+++ b/apps/v4/components/cards/calendar.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { addDays } from "date-fns"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
+
+const start = new Date(2025, 5, 5)
+
+export function CardsCalendar() {
+  return (
+    <Card className="hidden max-w-[260px] p-0 sm:flex">
+      <CardContent className="p-0">
+        <Calendar
+          numberOfMonths={1}
+          mode="range"
+          defaultMonth={start}
+          selected={{
+            from: start,
+            to: addDays(start, 8),
+          }}
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/components/cards/chat.tsx b/apps/v4/components/cards/chat.tsx
new file mode 100644
index 00000000000..8b15a040f47
--- /dev/null
+++ b/apps/v4/components/cards/chat.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpIcon, CheckIcon, PlusIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/registry/new-york-v4/ui/dialog"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
+
+const users = [
+  {
+    name: "Olivia Martin",
+    email: "m@example.com",
+    avatar: "/avatars/01.png",
+  },
+  {
+    name: "Isabella Nguyen",
+    email: "isabella.nguyen@email.com",
+    avatar: "/avatars/03.png",
+  },
+  {
+    name: "Emma Wilson",
+    email: "emma@example.com",
+    avatar: "/avatars/05.png",
+  },
+  {
+    name: "Jackson Lee",
+    email: "lee@example.com",
+    avatar: "/avatars/02.png",
+  },
+  {
+    name: "William Kim",
+    email: "will@email.com",
+    avatar: "/avatars/04.png",
+  },
+] as const
+
+type User = (typeof users)[number]
+
+export function CardsChat() {
+  const [open, setOpen] = React.useState(false)
+  const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
+
+  const [messages, setMessages] = React.useState([
+    {
+      role: "agent",
+      content: "Hi, how can I help you today?",
+    },
+    {
+      role: "user",
+      content: "Hey, I'm having trouble with my account.",
+    },
+    {
+      role: "agent",
+      content: "What seems to be the problem?",
+    },
+    {
+      role: "user",
+      content: "I can't log in.",
+    },
+  ])
+  const [input, setInput] = React.useState("")
+  const inputLength = input.trim().length
+
+  return (
+    <>
+      <Card>
+        <CardHeader className="flex flex-row items-center">
+          <div className="flex items-center gap-4">
+            <Avatar className="border">
+              <AvatarImage src="/avatars/01.png" alt="Image" />
+              <AvatarFallback>S</AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col gap-0.5">
+              <p className="text-sm leading-none font-medium">Sofia Davis</p>
+              <p className="text-muted-foreground text-xs">m@example.com</p>
+            </div>
+          </div>
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon"
+                  variant="secondary"
+                  className="ml-auto size-8 rounded-full"
+                  onClick={() => setOpen(true)}
+                >
+                  <PlusIcon />
+                  <span className="sr-only">New message</span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent sideOffset={10}>New message</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-4">
+            {messages.map((message, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
+                  message.role === "user"
+                    ? "bg-primary text-primary-foreground ml-auto"
+                    : "bg-muted"
+                )}
+              >
+                {message.content}
+              </div>
+            ))}
+          </div>
+        </CardContent>
+        <CardFooter>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              if (inputLength === 0) return
+              setMessages([
+                ...messages,
+                {
+                  role: "user",
+                  content: input,
+                },
+              ])
+              setInput("")
+            }}
+            className="relative w-full"
+          >
+            <Input
+              id="message"
+              placeholder="Type your message..."
+              className="flex-1 pr-10"
+              autoComplete="off"
+              value={input}
+              onChange={(event) => setInput(event.target.value)}
+            />
+            <Button
+              type="submit"
+              size="icon"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2 rounded-full"
+              disabled={inputLength === 0}
+            >
+              <ArrowUpIcon className="size-3.5" />
+              <span className="sr-only">Send</span>
+            </Button>
+          </form>
+        </CardFooter>
+      </Card>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="gap-0 p-0 outline-none">
+          <DialogHeader className="px-4 pt-5 pb-4">
+            <DialogTitle>New message</DialogTitle>
+            <DialogDescription>
+              Invite a user to this thread. This will create a new group
+              message.
+            </DialogDescription>
+          </DialogHeader>
+          <Command className="overflow-hidden rounded-t-none border-t bg-transparent">
+            <CommandInput placeholder="Search user..." />
+            <CommandList>
+              <CommandEmpty>No users found.</CommandEmpty>
+              <CommandGroup>
+                {users.map((user) => (
+                  <CommandItem
+                    key={user.email}
+                    data-active={selectedUsers.includes(user)}
+                    className="data-[active=true]:opacity-50"
+                    onSelect={() => {
+                      if (selectedUsers.includes(user)) {
+                        return setSelectedUsers(
+                          selectedUsers.filter(
+                            (selectedUser) => selectedUser !== user
+                          )
+                        )
+                      }
+
+                      return setSelectedUsers(
+                        [...users].filter((u) =>
+                          [...selectedUsers, user].includes(u)
+                        )
+                      )
+                    }}
+                  >
+                    <Avatar className="border">
+                      <AvatarImage src={user.avatar} alt="Image" />
+                      <AvatarFallback>{user.name[0]}</AvatarFallback>
+                    </Avatar>
+                    <div className="ml-2">
+                      <p className="text-sm leading-none font-medium">
+                        {user.name}
+                      </p>
+                      <p className="text-muted-foreground text-sm">
+                        {user.email}
+                      </p>
+                    </div>
+                    {selectedUsers.includes(user) ? (
+                      <CheckIcon className="text-primary ml-auto flex size-4" />
+                    ) : null}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+          <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
+            {selectedUsers.length > 0 ? (
+              <div className="flex -space-x-2 overflow-hidden">
+                {selectedUsers.map((user) => (
+                  <Avatar key={user.email} className="inline-block border">
+                    <AvatarImage src={user.avatar} />
+                    <AvatarFallback>{user.name[0]}</AvatarFallback>
+                  </Avatar>
+                ))}
+              </div>
+            ) : (
+              <p className="text-muted-foreground text-sm">
+                Select users to add to this thread.
+              </p>
+            )}
+            <Button
+              disabled={selectedUsers.length < 2}
+              size="sm"
+              onClick={() => {
+                setOpen(false)
+              }}
+            >
+              Continue
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/components/cards/cookie-settings.tsx b/apps/v4/components/cards/cookie-settings.tsx
new file mode 100644
index 00000000000..42c20522791
--- /dev/null
+++ b/apps/v4/components/cards/cookie-settings.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
+
+export function CardsCookieSettings() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Cookie Settings</CardTitle>
+        <CardDescription>Manage your cookie settings here.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <div className="flex items-center justify-between gap-4">
+          <Label htmlFor="necessary" className="flex flex-col items-start">
+            <span>Strictly Necessary</span>
+            <span className="text-muted-foreground leading-snug font-normal">
+              These cookies are essential in order to use the website and use
+              its features.
+            </span>
+          </Label>
+          <Switch id="necessary" defaultChecked aria-label="Necessary" />
+        </div>
+        <div className="flex items-center justify-between gap-4">
+          <Label htmlFor="functional" className="flex flex-col items-start">
+            <span>Functional Cookies</span>
+            <span className="text-muted-foreground leading-snug font-normal">
+              These cookies allow the website to provide personalized
+              functionality.
+            </span>
+          </Label>
+          <Switch id="functional" aria-label="Functional" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" className="w-full">
+          Save preferences
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/components/cards/create-account.tsx b/apps/v4/components/cards/create-account.tsx
new file mode 100644
index 00000000000..7d0168538ce
--- /dev/null
+++ b/apps/v4/components/cards/create-account.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export function CardsCreateAccount() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl">Create an account</CardTitle>
+        <CardDescription>
+          Enter your email below to create your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div className="grid grid-cols-2 gap-6">
+          <Button variant="outline">
+            <svg viewBox="0 0 438.549 438.549">
+              <path
+                fill="currentColor"
+                d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+              ></path>
+            </svg>
+            GitHub
+          </Button>
+          <Button variant="outline">
+            <svg role="img" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                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"
+              />
+            </svg>
+            Google
+          </Button>
+        </div>
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-card text-muted-foreground px-2">
+              Or continue with
+            </span>
+          </div>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="email-create-account">Email</Label>
+          <Input
+            id="email-create-account"
+            type="email"
+            placeholder="m@example.com"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="password-create-account">Password</Label>
+          <Input id="password-create-account" type="password" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Create account</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/components/cards/exercise-minutes.tsx b/apps/v4/components/cards/exercise-minutes.tsx
new file mode 100644
index 00000000000..36de1128bff
--- /dev/null
+++ b/apps/v4/components/cards/exercise-minutes.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+const data = [
+  {
+    average: 400,
+    today: 240,
+    day: "Monday",
+  },
+  {
+    average: 300,
+    today: 139,
+    day: "Tuesday",
+  },
+  {
+    average: 200,
+    today: 980,
+    day: "Wednesday",
+  },
+  {
+    average: 278,
+    today: 390,
+    day: "Thursday",
+  },
+  {
+    average: 189,
+    today: 480,
+    day: "Friday",
+  },
+  {
+    average: 239,
+    today: 380,
+    day: "Saturday",
+  },
+  {
+    average: 349,
+    today: 430,
+    day: "Sunday",
+  },
+]
+
+const chartConfig = {
+  today: {
+    label: "Today",
+    color: "var(--primary)",
+  },
+  average: {
+    label: "Average",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+export function CardsExerciseMinutes() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Exercise Minutes</CardTitle>
+        <CardDescription>
+          Your exercise minutes are ahead of where you normally are.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="w-full md:h-[200px]">
+          <LineChart
+            accessibilityLayer
+            data={data}
+            margin={{
+              top: 5,
+              right: 10,
+              left: 16,
+              bottom: 0,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="day"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <Line
+              type="monotone"
+              dataKey="today"
+              strokeWidth={2}
+              stroke="var(--color-today)"
+              dot={{
+                fill: "var(--color-today)",
+              }}
+              activeDot={{
+                r: 5,
+              }}
+            />
+            <Line
+              type="monotone"
+              strokeWidth={2}
+              dataKey="average"
+              stroke="var(--color-average)"
+              strokeOpacity={0.5}
+              dot={{
+                fill: "var(--color-average)",
+                opacity: 0.5,
+              }}
+              activeDot={{
+                r: 5,
+              }}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/components/cards/forms.tsx b/apps/v4/components/cards/forms.tsx
new file mode 100644
index 00000000000..c6bcc91819c
--- /dev/null
+++ b/apps/v4/components/cards/forms.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/new-york-v4/ui/radio-group"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+const plans = [
+  {
+    id: "starter",
+    name: "Starter Plan",
+    description: "Perfect for small businesses.",
+    price: "$10",
+  },
+  {
+    id: "pro",
+    name: "Pro Plan",
+    description: "More features and storage.",
+    price: "$20",
+  },
+] as const
+
+export function CardsForms() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg">Upgrade your subscription</CardTitle>
+        <CardDescription className="text-balance">
+          You are currently on the free plan. Upgrade to the pro plan to get
+          access to all features.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-3 md:flex-row">
+            <div className="flex flex-1 flex-col gap-2">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Evil Rabbit" />
+            </div>
+            <div className="flex flex-1 flex-col gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" placeholder="example@acme.com" />
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="card-number">Card Number</Label>
+            <div className="grid grid-cols-2 gap-3 md:grid-cols-[1fr_80px_60px]">
+              <Input
+                id="card-number"
+                placeholder="1234 1234 1234 1234"
+                className="col-span-2 md:col-span-1"
+              />
+              <Input id="card-number-expiry" placeholder="MM/YY" />
+              <Input id="card-number-cvc" placeholder="CVC" />
+            </div>
+          </div>
+          <fieldset className="flex flex-col gap-3">
+            <legend className="text-sm font-medium">Plan</legend>
+            <p className="text-muted-foreground text-sm">
+              Select the plan that best fits your needs.
+            </p>
+            <RadioGroup
+              defaultValue="starter"
+              className="grid gap-3 md:grid-cols-2"
+            >
+              {plans.map((plan) => (
+                <Label
+                  className="has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-input/20 flex items-start gap-3 rounded-lg border p-3"
+                  key={plan.id}
+                >
+                  <RadioGroupItem
+                    value={plan.id}
+                    id={plan.name}
+                    className="data-[state=checked]:border-primary"
+                  />
+                  <div className="grid gap-1 font-normal">
+                    <div className="font-medium">{plan.name}</div>
+                    <div className="text-muted-foreground text-xs leading-snug text-balance">
+                      {plan.description}
+                    </div>
+                  </div>
+                </Label>
+              ))}
+            </RadioGroup>
+          </fieldset>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="notes">Notes</Label>
+            <Textarea id="notes" placeholder="Enter notes" />
+          </div>
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-2">
+              <Checkbox id="terms" />
+              <Label htmlFor="terms" className="font-normal">
+                I agree to the terms and conditions
+              </Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id="newsletter" defaultChecked />
+              <Label htmlFor="newsletter" className="font-normal">
+                Allow us to send you emails
+              </Label>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline" size="sm">
+          Cancel
+        </Button>
+        <Button size="sm">Upgrade Plan</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/components/cards/index.tsx b/apps/v4/components/cards/index.tsx
new file mode 100644
index 00000000000..eba025e97c0
--- /dev/null
+++ b/apps/v4/components/cards/index.tsx
@@ -0,0 +1,63 @@
+import { CardsActivityGoal } from "@/components/cards/activity-goal"
+import { CardsCalendar } from "@/components/cards/calendar"
+import { CardsChat } from "@/components/cards/chat"
+import { CardsCookieSettings } from "@/components/cards/cookie-settings"
+import { CardsCreateAccount } from "@/components/cards/create-account"
+import { CardsExerciseMinutes } from "@/components/cards/exercise-minutes"
+import { CardsForms } from "@/components/cards/forms"
+import { CardsPayments } from "@/components/cards/payments"
+import { CardsReportIssue } from "@/components/cards/report-issue"
+import { CardsShare } from "@/components/cards/share"
+import { CardsStats } from "@/components/cards/stats"
+import { CardsTeamMembers } from "@/components/cards/team-members"
+
+export function CardsDemo() {
+  return (
+    <div className="md:grids-col-2 grid **:data-[slot=card]:shadow-none md:gap-4 lg:grid-cols-10 xl:grid-cols-11">
+      <div className="grid gap-4 lg:col-span-4 xl:col-span-6">
+        <CardsStats />
+        <div className="grid gap-1 sm:grid-cols-[auto_1fr] md:hidden">
+          <CardsCalendar />
+          <div className="pt-3 sm:pt-0 sm:pl-2 xl:pl-4">
+            <CardsActivityGoal />
+          </div>
+          <div className="pt-3 sm:col-span-2 xl:pt-4">
+            <CardsExerciseMinutes />
+          </div>
+        </div>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+          <div className="flex flex-col gap-4">
+            <CardsForms />
+            <CardsTeamMembers />
+            <CardsCookieSettings />
+          </div>
+          <div className="flex flex-col gap-4">
+            <CardsCreateAccount />
+            <CardsChat />
+            <div className="hidden xl:block">
+              <CardsReportIssue />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4 lg:col-span-6 xl:col-span-5">
+        <div className="hidden gap-1 sm:grid-cols-[auto_1fr] md:grid">
+          <CardsCalendar />
+          <div className="pt-3 sm:pt-0 sm:pl-2 xl:pl-3">
+            <CardsActivityGoal />
+          </div>
+          <div className="pt-3 sm:col-span-2 xl:pt-3">
+            <CardsExerciseMinutes />
+          </div>
+        </div>
+        <div className="hidden md:block">
+          <CardsPayments />
+        </div>
+        <CardsShare />
+        <div className="xl:hidden">
+          <CardsReportIssue />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/components/cards/payment-method.tsx b/apps/v4/components/cards/payment-method.tsx
new file mode 100644
index 00000000000..0d36e4b81be
--- /dev/null
+++ b/apps/v4/components/cards/payment-method.tsx
@@ -0,0 +1,134 @@
+"use client"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/new-york-v4/ui/radio-group"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+const plans = [
+  {
+    id: "starter",
+    name: "Starter Plan",
+    description: "Perfect for small businesses.",
+    price: "$10",
+  },
+  {
+    id: "pro",
+    name: "Pro Plan",
+    description: "Advanced features with more storage.",
+    price: "$20",
+  },
+] as const
+
+export function CardsPaymentMethod() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Payment Method</CardTitle>
+        <CardDescription>
+          Add a new payment method to your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-6">
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" placeholder="First Last" />
+        </div>
+        <fieldset className="flex flex-col gap-3">
+          <legend className="text-sm font-medium">Plan</legend>
+          <p className="text-muted-foreground text-sm">
+            Select the plan that best fits your needs.
+          </p>
+          <RadioGroup defaultValue="starter" className="grid gap-3">
+            {plans.map((plan) => (
+              <Label
+                className="has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-primary/5 flex items-start gap-3 rounded-lg border p-3"
+                key={plan.id}
+              >
+                <RadioGroupItem
+                  value={plan.id}
+                  id={plan.name}
+                  className="data-[state=checked]:border-primary"
+                />
+                <div className="grid gap-1 font-normal">
+                  <div className="font-medium">{plan.name}</div>
+                  <div className="text-muted-foreground pr-2 text-xs leading-snug text-balance">
+                    {plan.description}
+                  </div>
+                </div>
+              </Label>
+            ))}
+          </RadioGroup>
+        </fieldset>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="number">Card number</Label>
+          <Input id="number" placeholder="" />
+        </div>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="flex flex-col gap-3">
+            <Label htmlFor="month">Expires</Label>
+            <Select>
+              <SelectTrigger id="month" aria-label="Month" className="w-full">
+                <SelectValue placeholder="Month" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">January</SelectItem>
+                <SelectItem value="2">February</SelectItem>
+                <SelectItem value="3">March</SelectItem>
+                <SelectItem value="4">April</SelectItem>
+                <SelectItem value="5">May</SelectItem>
+                <SelectItem value="6">June</SelectItem>
+                <SelectItem value="7">July</SelectItem>
+                <SelectItem value="8">August</SelectItem>
+                <SelectItem value="9">September</SelectItem>
+                <SelectItem value="10">October</SelectItem>
+                <SelectItem value="11">November</SelectItem>
+                <SelectItem value="12">December</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-3">
+            <Label htmlFor="year">Year</Label>
+            <Select>
+              <SelectTrigger id="year" aria-label="Year" className="w-full">
+                <SelectValue placeholder="Year" />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.from({ length: 10 }, (_, i) => (
+                  <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>
+                    {new Date().getFullYear() + i}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-3">
+            <Label htmlFor="cvc">CVC</Label>
+            <Input id="cvc" placeholder="CVC" />
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Continue</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/components/cards/payments.tsx b/apps/v4/components/cards/payments.tsx
new file mode 100644
index 00000000000..66f36977ae1
--- /dev/null
+++ b/apps/v4/components/cards/payments.tsx
@@ -0,0 +1,297 @@
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table"
+import { MoreHorizontalIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york-v4/ui/table"
+
+const data: Payment[] = [
+  {
+    id: "m5gr84i9",
+    amount: 316,
+    status: "success",
+    email: "ken99@example.com",
+  },
+  {
+    id: "3u1reuv4",
+    amount: 242,
+    status: "success",
+    email: "Abe45@example.com",
+  },
+  {
+    id: "derv1ws0",
+    amount: 837,
+    status: "processing",
+    email: "Monserrat44@example.com",
+  },
+  {
+    id: "bhqecj4p",
+    amount: 721,
+    status: "failed",
+    email: "carmella@example.com",
+  },
+  {
+    id: "k9f2m3n4",
+    amount: 450,
+    status: "pending",
+    email: "jason78@example.com",
+  },
+  {
+    id: "p5q6r7s8",
+    amount: 1280,
+    status: "success",
+    email: "sarah23@example.com",
+  },
+]
+
+export type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <div className="capitalize">{row.getValue("status")}</div>
+    ),
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
+  },
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"))
+
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount)
+
+      return <div className="text-right font-medium">{formatted}</div>
+    },
+  },
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="size-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontalIcon />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(payment.id)}
+            >
+              Copy payment ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>View customer</DropdownMenuItem>
+            <DropdownMenuItem>View payment details</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]
+
+export function CardsPayments() {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-xl">Payments</CardTitle>
+        <CardDescription>Manage your payments.</CardDescription>
+        <CardAction>
+          <Button variant="secondary" size="sm" className="shadow-none">
+            Add Payment
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div className="overflow-hidden rounded-md border">
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <TableHead
+                        key={header.id}
+                        className="data-[name=actions]:w-10 data-[name=amount]:w-24 data-[name=select]:w-10 data-[name=status]:w-24 [&:has([role=checkbox])]:pl-3"
+                        data-name={header.id}
+                      >
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                      </TableHead>
+                    )
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        className="data-[name=actions]:w-10 data-[name=amount]:w-24 data-[name=select]:w-10 data-[name=status]:w-24 [&:has([role=checkbox])]:pl-3"
+                        data-name={cell.column.id}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+        <div className="flex items-center justify-end gap-2">
+          <div className="text-muted-foreground flex-1 text-sm">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/components/cards/report-issue.tsx b/apps/v4/components/cards/report-issue.tsx
new file mode 100644
index 00000000000..af11b539c5a
--- /dev/null
+++ b/apps/v4/components/cards/report-issue.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+export function CardsReportIssue() {
+  const id = React.useId()
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Report an issue</CardTitle>
+        <CardDescription>
+          What area are you having problems with?
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-6">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="flex flex-col gap-3">
+            <Label htmlFor={`area-${id}`}>Area</Label>
+            <Select defaultValue="billing">
+              <SelectTrigger
+                id={`area-${id}`}
+                aria-label="Area"
+                className="w-full"
+              >
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="team">Team</SelectItem>
+                <SelectItem value="billing">Billing</SelectItem>
+                <SelectItem value="account">Account</SelectItem>
+                <SelectItem value="deployments">Deployments</SelectItem>
+                <SelectItem value="support">Support</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-3">
+            <Label htmlFor={`security-level-${id}`}>Security Level</Label>
+            <Select defaultValue="2">
+              <SelectTrigger
+                id={`security-level-${id}`}
+                className="w-full [&_span]:!block [&_span]:truncate"
+                aria-label="Security Level"
+              >
+                <SelectValue placeholder="Select level" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">Severity 1 (Highest)</SelectItem>
+                <SelectItem value="2">Severity 2</SelectItem>
+                <SelectItem value="3">Severity 3</SelectItem>
+                <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor={`subject-${id}`}>Subject</Label>
+          <Input id={`subject-${id}`} placeholder="I need help with..." />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor={`description-${id}`}>Description</Label>
+          <Textarea
+            id={`description-${id}`}
+            placeholder="Please include all information relevant to your issue."
+            className="min-h-28"
+          />
+        </div>
+      </CardContent>
+      <CardFooter className="justify-end gap-2">
+        <Button variant="ghost" size="sm">
+          Cancel
+        </Button>
+        <Button size="sm">Submit</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/components/cards/share.tsx b/apps/v4/components/cards/share.tsx
new file mode 100644
index 00000000000..98dca40cdc3
--- /dev/null
+++ b/apps/v4/components/cards/share.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+const people = [
+  {
+    name: "Olivia Martin",
+    email: "m@example.com",
+    avatar: "/avatars/03.png",
+  },
+  {
+    name: "Isabella Nguyen",
+    email: "b@example.com",
+    avatar: "/avatars/04.png",
+  },
+  {
+    name: "Sofia Davis",
+    email: "p@example.com",
+    avatar: "/avatars/05.png",
+  },
+  {
+    name: "Ethan Thompson",
+    email: "e@example.com",
+    avatar: "/avatars/01.png",
+  },
+]
+export function CardsShare() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Share this document</CardTitle>
+        <CardDescription>
+          Anyone with the link can view this document.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center gap-2">
+          <Label htmlFor="link" className="sr-only">
+            Link
+          </Label>
+          <Input
+            id="link"
+            value="http://example.com/link/to/document"
+            className="h-8"
+            readOnly
+          />
+          <Button size="sm" variant="outline" className="shadow-none">
+            Copy Link
+          </Button>
+        </div>
+        <Separator className="my-4" />
+        <div className="flex flex-col gap-4">
+          <div className="text-sm font-medium">People with access</div>
+          <div className="grid gap-6">
+            {people.map((person) => (
+              <div
+                key={person.email}
+                className="flex items-center justify-between gap-4"
+              >
+                <div className="flex items-center gap-4">
+                  <Avatar>
+                    <AvatarImage src={person.avatar} alt="Image" />
+                    <AvatarFallback>{person.name.charAt(0)}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p className="text-sm leading-none font-medium">
+                      {person.name}
+                    </p>
+                    <p className="text-muted-foreground text-sm">
+                      {person.email}
+                    </p>
+                  </div>
+                </div>
+                <Select defaultValue="edit">
+                  <SelectTrigger
+                    className="ml-auto pr-2"
+                    aria-label="Edit"
+                    size="sm"
+                  >
+                    <SelectValue placeholder="Select" />
+                  </SelectTrigger>
+                  <SelectContent align="end">
+                    <SelectItem value="edit">Can edit</SelectItem>
+                    <SelectItem value="view">Can view</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/components/cards/stats.tsx b/apps/v4/components/cards/stats.tsx
new file mode 100644
index 00000000000..6e986ee3def
--- /dev/null
+++ b/apps/v4/components/cards/stats.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import { Area, AreaChart, Line, LineChart } from "recharts"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york-v4/ui/chart"
+
+const data = [
+  {
+    revenue: 10400,
+    subscription: 40,
+  },
+  {
+    revenue: 14405,
+    subscription: 90,
+  },
+  {
+    revenue: 9400,
+    subscription: 200,
+  },
+  {
+    revenue: 8200,
+    subscription: 278,
+  },
+  {
+    revenue: 7000,
+    subscription: 89,
+  },
+  {
+    revenue: 9600,
+    subscription: 239,
+  },
+  {
+    revenue: 11244,
+    subscription: 78,
+  },
+  {
+    revenue: 26475,
+    subscription: 89,
+  },
+]
+
+const chartConfig = {
+  revenue: {
+    label: "Revenue",
+    color: "var(--primary)",
+  },
+  subscription: {
+    label: "Subscriptions",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+export function CardsStats() {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+      <Card>
+        <CardHeader>
+          <CardDescription>Total Revenue</CardDescription>
+          <CardTitle className="text-3xl">$15,231.89</CardTitle>
+          <CardDescription>+20.1% from last month</CardDescription>
+        </CardHeader>
+        <CardContent className="pb-0">
+          <ChartContainer config={chartConfig} className="h-[80px] w-full">
+            <LineChart
+              data={data}
+              margin={{
+                top: 5,
+                right: 10,
+                left: 10,
+                bottom: 0,
+              }}
+            >
+              <Line
+                type="monotone"
+                strokeWidth={2}
+                dataKey="revenue"
+                stroke="var(--color-revenue)"
+                activeDot={{
+                  r: 6,
+                }}
+              />
+            </LineChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+      <Card className="pb-0 lg:hidden xl:flex">
+        <CardHeader>
+          <CardDescription>Subscriptions</CardDescription>
+          <CardTitle className="text-3xl">+2,350</CardTitle>
+          <CardDescription>+180.1% from last month</CardDescription>
+          <CardAction>
+            <Button variant="ghost" size="sm">
+              View More
+            </Button>
+          </CardAction>
+        </CardHeader>
+        <CardContent className="mt-auto max-h-[124px] flex-1 p-0">
+          <ChartContainer config={chartConfig} className="size-full">
+            <AreaChart
+              data={data}
+              margin={{
+                left: 0,
+                right: 0,
+              }}
+            >
+              <Area
+                dataKey="subscription"
+                fill="var(--color-subscription)"
+                fillOpacity={0.05}
+                stroke="var(--color-subscription)"
+                strokeWidth={2}
+                type="monotone"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/v4/components/cards/team-members.tsx b/apps/v4/components/cards/team-members.tsx
new file mode 100644
index 00000000000..c5bb28a78e8
--- /dev/null
+++ b/apps/v4/components/cards/team-members.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import { ChevronDown } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+const teamMembers = [
+  {
+    name: "Sofia Davis",
+    email: "m@example.com",
+    avatar: "/avatars/01.png",
+    role: "Owner",
+  },
+  {
+    name: "Jackson Lee",
+    email: "p@example.com",
+    avatar: "/avatars/02.png",
+    role: "Developer",
+  },
+  {
+    name: "Isabella Nguyen",
+    email: "i@example.com",
+    avatar: "/avatars/03.png",
+    role: "Billing",
+  },
+]
+
+const roles = [
+  {
+    name: "Viewer",
+    description: "Can view and comment.",
+  },
+  {
+    name: "Developer",
+    description: "Can view, comment and edit.",
+  },
+  {
+    name: "Billing",
+    description: "Can view, comment and manage billing.",
+  },
+  {
+    name: "Owner",
+    description: "Admin-level access to all resources.",
+  },
+]
+
+export function CardsTeamMembers() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Team Members</CardTitle>
+        <CardDescription>
+          Invite your team members to collaborate.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        {teamMembers.map((member) => (
+          <div
+            key={member.name}
+            className="flex items-center justify-between gap-4"
+          >
+            <div className="flex items-center gap-4">
+              <Avatar className="border">
+                <AvatarImage src={member.avatar} alt="Image" />
+                <AvatarFallback>{member.name.charAt(0)}</AvatarFallback>
+              </Avatar>
+              <div className="flex flex-col gap-0.5">
+                <p className="text-sm leading-none font-medium">
+                  {member.name}
+                </p>
+                <p className="text-muted-foreground text-xs">{member.email}</p>
+              </div>
+            </div>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="ml-auto shadow-none"
+                >
+                  {member.role} <ChevronDown />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" align="end">
+                <Command>
+                  <CommandInput placeholder="Select role..." />
+                  <CommandList>
+                    <CommandEmpty>No roles found.</CommandEmpty>
+                    <CommandGroup>
+                      {roles.map((role) => (
+                        <CommandItem key={role.name}>
+                          <div className="flex flex-col">
+                            <p className="text-sm font-medium">{role.name}</p>
+                            <p className="text-muted-foreground">
+                              {role.description}
+                            </p>
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/components/chart-code-viewer.tsx b/apps/v4/components/chart-code-viewer.tsx
new file mode 100644
index 00000000000..bd5d63919fc
--- /dev/null
+++ b/apps/v4/components/chart-code-viewer.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { ChartCopyButton } from "@/components/chart-copy-button"
+import { Chart } from "@/components/chart-display"
+import { getIconForLanguageExtension } from "@/components/icons"
+import { OpenInV0Button } from "@/components/open-in-v0-button"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/new-york-v4/ui/sheet"
+
+export function ChartCodeViewer({
+  chart,
+  className,
+  children,
+}: {
+  chart: Chart
+} & React.ComponentProps<"div">) {
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  const button = (
+    <Button
+      size="sm"
+      variant="outline"
+      className="text-foreground hover:bg-muted dark:text-foreground h-6 rounded-[6px] border bg-transparent px-2 text-xs shadow-none"
+    >
+      View Code
+    </Button>
+  )
+
+  const content = (
+    <div className="flex min-h-0 flex-1 flex-col gap-0">
+      <div className="chart-wrapper theme-container hidden sm:block [&_[data-chart]]:mx-auto [&_[data-chart]]:max-h-[35vh] [&>div]:rounded-none [&>div]:border-0 [&>div]:border-b [&>div]:shadow-none">
+        {children}
+      </div>
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden p-4">
+        <figure
+          data-rehype-pretty-code-figure=""
+          className="mt-0 flex h-auto min-w-0 flex-1 flex-col overflow-hidden"
+        >
+          <figcaption
+            className="text-foreground [&>svg]:text-foreground flex h-12 shrink-0 items-center gap-2 border-b py-2 pr-2 pl-4 [&>svg]:size-4 [&>svg]:opacity-70"
+            data-language="tsx"
+          >
+            {getIconForLanguageExtension("tsx")}
+            {chart.name}
+            <div className="ml-auto flex items-center gap-2">
+              <ChartCopyButton
+                event="copy_chart_code"
+                name={chart.name}
+                code={chart.files?.[0]?.content ?? ""}
+              />
+              <OpenInV0Button name={chart.name} className="rounded-sm" />
+            </div>
+          </figcaption>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: chart.highlightedCode,
+            }}
+            className="no-scrollbar overflow-y-auto"
+          />
+        </figure>
+      </div>
+    </div>
+  )
+
+  if (!isDesktop) {
+    return (
+      <Drawer>
+        <DrawerTrigger asChild>{button}</DrawerTrigger>
+        <DrawerContent
+          className={cn(
+            "flex max-h-[80vh] flex-col sm:max-h-[90vh] [&>div.bg-muted]:shrink-0",
+            className
+          )}
+        >
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Code</DrawerTitle>
+            <DrawerDescription>View the code for the chart.</DrawerDescription>
+          </DrawerHeader>
+          <div className="flex h-full flex-col overflow-auto">{content}</div>
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>{button}</SheetTrigger>
+      <SheetContent
+        side="right"
+        className={cn(
+          "flex flex-col gap-0 border-l-0 p-0 sm:max-w-sm md:w-[700px] md:max-w-[700px] dark:border-l",
+          className
+        )}
+      >
+        <SheetHeader className="sr-only">
+          <SheetTitle>Code</SheetTitle>
+          <SheetDescription>View the code for the chart.</SheetDescription>
+        </SheetHeader>
+        {content}
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/apps/v4/components/chart-copy-button.tsx b/apps/v4/components/chart-copy-button.tsx
new file mode 100644
index 00000000000..b9c26cf08e4
--- /dev/null
+++ b/apps/v4/components/chart-copy-button.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ClipboardIcon } from "lucide-react"
+
+import { Event, trackEvent } from "@/lib/events"
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
+
+export function ChartCopyButton({
+  event,
+  name,
+  code,
+  className,
+  ...props
+}: {
+  event: Event["name"]
+  name: string
+  code: string
+} & React.ComponentProps<typeof Button>) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 2000)
+  }, [hasCopied])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          className={cn(
+            "[&_svg]-h-3.5 h-7 w-7 rounded-[6px] [&_svg]:w-3.5",
+            className
+          )}
+          onClick={() => {
+            navigator.clipboard.writeText(code)
+            trackEvent({
+              name: event,
+              properties: {
+                name,
+              },
+            })
+            setHasCopied(true)
+          }}
+          {...props}
+        >
+          <span className="sr-only">Copy</span>
+          {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent className="bg-black text-white">Copy code</TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/components/chart-display.tsx b/apps/v4/components/chart-display.tsx
new file mode 100644
index 00000000000..6acd219d672
--- /dev/null
+++ b/apps/v4/components/chart-display.tsx
@@ -0,0 +1,54 @@
+import * as React from "react"
+import { registryItemSchema } from "shadcn/schema"
+import { z } from "zod"
+
+import { highlightCode } from "@/lib/highlight-code"
+import { getRegistryItem } from "@/lib/registry"
+import { cn } from "@/lib/utils"
+import { ChartToolbar } from "@/components/chart-toolbar"
+
+export type Chart = z.infer<typeof registryItemSchema> & {
+  highlightedCode: string
+}
+
+export async function ChartDisplay({
+  name,
+  children,
+  className,
+}: { name: string } & React.ComponentProps<"div">) {
+  const chart = await getCachedRegistryItem(name)
+  const highlightedCode = await getChartHighlightedCode(
+    chart?.files?.[0]?.content ?? ""
+  )
+
+  if (!chart || !highlightedCode) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "themes-wrapper group relative flex flex-col overflow-hidden rounded-xl border transition-all duration-200 ease-in-out hover:z-30",
+        className
+      )}
+    >
+      <ChartToolbar
+        chart={{ ...chart, highlightedCode }}
+        className="bg-card text-card-foreground relative z-20 flex justify-end border-b px-3 py-2.5"
+      >
+        {children}
+      </ChartToolbar>
+      <div className="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+const getCachedRegistryItem = React.cache(async (name: string) => {
+  return await getRegistryItem(name)
+})
+
+const getChartHighlightedCode = React.cache(async (content: string) => {
+  return await highlightCode(content)
+})
diff --git a/apps/v4/components/chart-toolbar.tsx b/apps/v4/components/chart-toolbar.tsx
new file mode 100644
index 00000000000..27252dc7d07
--- /dev/null
+++ b/apps/v4/components/chart-toolbar.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import {
+  AreaChartIcon,
+  BarChartBigIcon,
+  HexagonIcon,
+  LineChartIcon,
+  MousePointer2Icon,
+  PieChartIcon,
+  RadarIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ChartCodeViewer } from "@/components/chart-code-viewer"
+import { ChartCopyButton } from "@/components/chart-copy-button"
+import { Chart } from "@/components/chart-display"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+export function ChartToolbar({
+  chart,
+  className,
+  children,
+}: {
+  chart: Chart
+} & React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <div className="text-muted-foreground flex items-center gap-1.5 pl-1 text-[13px] [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]">
+        <ChartTitle chart={chart} />
+      </div>
+      <div className="ml-auto flex items-center gap-2 [&>form]:flex">
+        <ChartCopyButton
+          event="copy_chart_code"
+          name={chart.name}
+          code={chart.files?.[0]?.content ?? ""}
+          className="[&_svg]-h-3 text-foreground hover:bg-muted dark:text-foreground h-6 w-6 rounded-[6px] bg-transparent shadow-none [&_svg]:w-3"
+        />
+        <Separator
+          orientation="vertical"
+          className="mx-0 hidden !h-4 md:flex"
+        />
+        <ChartCodeViewer chart={chart}>{children}</ChartCodeViewer>
+      </div>
+    </div>
+  )
+}
+
+function ChartTitle({ chart }: { chart: Chart }) {
+  if (chart.name.includes("charts-line")) {
+    return (
+      <>
+        <LineChartIcon /> Line Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-bar")) {
+    return (
+      <>
+        <BarChartBigIcon /> Bar Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-pie")) {
+    return (
+      <>
+        <PieChartIcon /> Pie Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-area")) {
+    return (
+      <>
+        <AreaChartIcon /> Area Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-radar")) {
+    return (
+      <>
+        <HexagonIcon /> Radar Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-radial")) {
+    return (
+      <>
+        <RadarIcon /> Radial Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-tooltip")) {
+    return (
+      <>
+        <MousePointer2Icon />
+        Tooltip
+      </>
+    )
+  }
+
+  return chart.name
+}
diff --git a/apps/v4/components/charts-nav.tsx b/apps/v4/components/charts-nav.tsx
new file mode 100644
index 00000000000..0b2f78fbd2a
--- /dev/null
+++ b/apps/v4/components/charts-nav.tsx
@@ -0,0 +1,67 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { cn } from "@/lib/utils"
+import { ScrollArea, ScrollBar } from "@/registry/new-york-v4/ui/scroll-area"
+
+const links = [
+  {
+    name: "Area Charts",
+    href: "/charts/area#charts",
+  },
+  {
+    name: "Bar Charts",
+    href: "/charts/bar#charts",
+  },
+  {
+    name: "Line Charts",
+    href: "/charts/line#charts",
+  },
+  {
+    name: "Pie Charts",
+    href: "/charts/pie#charts",
+  },
+  {
+    name: "Radar Charts",
+    href: "/charts/radar#charts",
+  },
+  {
+    name: "Radial Charts",
+    href: "/charts/radial#charts",
+  },
+  {
+    name: "Tooltips",
+    href: "/charts/tooltip#charts",
+  },
+]
+
+export function ChartsNav({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const pathname = usePathname()
+
+  return (
+    <div className="relative overflow-hidden">
+      <ScrollArea className="max-w-[600px] lg:max-w-none">
+        <div className={cn("flex items-center", className)} {...props}>
+          {links.map((link) => (
+            <Link
+              href={link.href}
+              key={link.href}
+              data-active={link.href.startsWith(pathname)}
+              className={cn(
+                "text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 shrink-0 items-center justify-center px-4 text-center text-base font-medium transition-colors"
+              )}
+            >
+              {link.name}
+            </Link>
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" className="invisible" />
+      </ScrollArea>
+    </div>
+  )
+}
diff --git a/apps/v4/components/code-block-command.tsx b/apps/v4/components/code-block-command.tsx
new file mode 100644
index 00000000000..b25342db543
--- /dev/null
+++ b/apps/v4/components/code-block-command.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ClipboardIcon, TerminalIcon } from "lucide-react"
+
+import { useConfig } from "@/hooks/use-config"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
+
+export function CodeBlockCommand({
+  __npm__,
+  __yarn__,
+  __pnpm__,
+  __bun__,
+}: React.ComponentProps<"pre"> & {
+  __npm__?: string
+  __yarn__?: string
+  __pnpm__?: string
+  __bun__?: string
+}) {
+  const [config, setConfig] = useConfig()
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const packageManager = config.packageManager || "pnpm"
+  const tabs = React.useMemo(() => {
+    return {
+      pnpm: __pnpm__,
+      npm: __npm__,
+      yarn: __yarn__,
+      bun: __bun__,
+    }
+  }, [__npm__, __pnpm__, __yarn__, __bun__])
+
+  const copyCommand = React.useCallback(() => {
+    const command = tabs[packageManager]
+
+    if (!command) {
+      return
+    }
+
+    copyToClipboardWithMeta(command, {
+      name: "copy_npm_command",
+      properties: {
+        command,
+        pm: packageManager,
+      },
+    })
+    setHasCopied(true)
+  }, [packageManager, tabs])
+
+  return (
+    <div className="overflow-x-auto">
+      <Tabs
+        value={packageManager}
+        className="gap-0"
+        onValueChange={(value) => {
+          setConfig({
+            ...config,
+            packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
+          })
+        }}
+      >
+        <div className="border-border/50 flex items-center gap-2 border-b px-3 py-1">
+          <div className="bg-foreground flex size-4 items-center justify-center rounded-[1px] opacity-70">
+            <TerminalIcon className="text-code size-3" />
+          </div>
+          <TabsList className="rounded-none bg-transparent p-0">
+            {Object.entries(tabs).map(([key]) => {
+              return (
+                <TabsTrigger
+                  key={key}
+                  value={key}
+                  className="data-[state=active]:bg-accent data-[state=active]:border-input h-7 border border-transparent pt-0.5 data-[state=active]:shadow-none"
+                >
+                  {key}
+                </TabsTrigger>
+              )
+            })}
+          </TabsList>
+        </div>
+        <div className="no-scrollbar overflow-x-auto">
+          {Object.entries(tabs).map(([key, value]) => {
+            return (
+              <TabsContent key={key} value={key} className="mt-0 px-4 py-3.5">
+                <pre>
+                  <code
+                    className="relative font-mono text-sm leading-none"
+                    data-language="bash"
+                  >
+                    {value}
+                  </code>
+                </pre>
+              </TabsContent>
+            )
+          })}
+        </div>
+      </Tabs>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            data-slot="copy-button"
+            size="icon"
+            variant="ghost"
+            className="absolute top-2 right-2 z-10 size-7 opacity-70 hover:opacity-100 focus-visible:opacity-100"
+            onClick={copyCommand}
+          >
+            <span className="sr-only">Copy</span>
+            {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {hasCopied ? "Copied" : "Copy to Clipboard"}
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  )
+}
diff --git a/apps/v4/components/code-collapsible-wrapper.tsx b/apps/v4/components/code-collapsible-wrapper.tsx
new file mode 100644
index 00000000000..d9be9e0cb13
--- /dev/null
+++ b/apps/v4/components/code-collapsible-wrapper.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+export function CodeCollapsibleWrapper({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof Collapsible>) {
+  const [isOpened, setIsOpened] = React.useState(false)
+
+  return (
+    <Collapsible
+      open={isOpened}
+      onOpenChange={setIsOpened}
+      className={cn("group/collapsible relative md:-mx-1", className)}
+      {...props}
+    >
+      <CollapsibleTrigger asChild>
+        <div className="absolute top-1.5 right-9 z-10 flex items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-muted-foreground h-7 rounded-md px-2"
+          >
+            {isOpened ? "Collapse" : "Expand"}
+          </Button>
+          <Separator orientation="vertical" className="mx-1.5 !h-4" />
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent
+        forceMount
+        className="relative mt-6 overflow-hidden data-[state=closed]:max-h-64 [&>figure]:mt-0 [&>figure]:md:!mx-0"
+      >
+        {children}
+      </CollapsibleContent>
+      <CollapsibleTrigger className="from-code/70 to-code text-muted-foreground absolute inset-x-0 -bottom-2 flex h-20 items-center justify-center rounded-b-lg bg-gradient-to-b text-sm group-data-[state=open]/collapsible:hidden">
+        {isOpened ? "Collapse" : "Expand"}
+      </CollapsibleTrigger>
+    </Collapsible>
+  )
+}
diff --git a/apps/v4/components/code-tabs.tsx b/apps/v4/components/code-tabs.tsx
new file mode 100644
index 00000000000..98c48bf7684
--- /dev/null
+++ b/apps/v4/components/code-tabs.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+
+import { useConfig } from "@/hooks/use-config"
+import { Tabs } from "@/registry/new-york-v4/ui/tabs"
+
+export function CodeTabs({ children }: React.ComponentProps<typeof Tabs>) {
+  const [config, setConfig] = useConfig()
+
+  const installationType = React.useMemo(() => {
+    return config.installationType || "cli"
+  }, [config])
+
+  return (
+    <Tabs
+      value={installationType}
+      onValueChange={(value) =>
+        setConfig({ ...config, installationType: value as "cli" | "manual" })
+      }
+      className="relative mt-6 w-full"
+    >
+      {children}
+    </Tabs>
+  )
+}
diff --git a/apps/v4/components/color-format-selector.tsx b/apps/v4/components/color-format-selector.tsx
new file mode 100644
index 00000000000..699acfdc6f8
--- /dev/null
+++ b/apps/v4/components/color-format-selector.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+
+import { getColorFormat, type Color } from "@/lib/colors"
+import { cn } from "@/lib/utils"
+import { useColors } from "@/hooks/use-colors"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "@/registry/new-york-v4/ui/select"
+import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
+
+export function ColorFormatSelector({
+  color,
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof SelectTrigger>, "color"> & {
+  color: Color
+}) {
+  const { format, setFormat, isLoading } = useColors()
+  const formats = React.useMemo(() => getColorFormat(color), [color])
+
+  if (isLoading) {
+    return <ColorFormatSelectorSkeleton />
+  }
+
+  return (
+    <Select value={format} onValueChange={setFormat}>
+      <SelectTrigger
+        size="sm"
+        className={cn(
+          "bg-secondary text-secondary-foreground border-secondary shadow-none",
+          className
+        )}
+        {...props}
+      >
+        <span className="font-medium">Format: </span>
+        <span className="text-muted-foreground font-mono">{format}</span>
+      </SelectTrigger>
+      <SelectContent align="end" className="rounded-xl">
+        {Object.entries(formats).map(([format, value]) => (
+          <SelectItem
+            key={format}
+            value={format}
+            className="gap-2 rounded-lg [&>span]:flex [&>span]:items-center [&>span]:gap-2"
+          >
+            <span className="font-medium">{format}</span>
+            <span className="text-muted-foreground font-mono text-xs">
+              {value}
+            </span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export function ColorFormatSelectorSkeleton({
+  className,
+  ...props
+}: React.ComponentProps<typeof Skeleton>) {
+  return (
+    <Skeleton
+      className={cn("h-8 w-[132px] gap-1.5 rounded-md", className)}
+      {...props}
+    />
+  )
+}
diff --git a/apps/v4/components/color-palette.tsx b/apps/v4/components/color-palette.tsx
new file mode 100644
index 00000000000..75f34aa6d29
--- /dev/null
+++ b/apps/v4/components/color-palette.tsx
@@ -0,0 +1,24 @@
+import { type ColorPalette } from "@/lib/colors"
+import { Color } from "@/components/color"
+import { ColorFormatSelector } from "@/components/color-format-selector"
+
+export function ColorPalette({ colorPalette }: { colorPalette: ColorPalette }) {
+  return (
+    <div id={colorPalette.name} className="scroll-mt-20 rounded-lg">
+      <div className="flex items-center px-4">
+        <div className="flex-1 pl-1 text-sm font-medium">
+          <h2 className="capitalize">{colorPalette.name}</h2>
+        </div>
+        <ColorFormatSelector
+          color={colorPalette.colors[0]}
+          className="ml-auto"
+        />
+      </div>
+      <div className="flex flex-col gap-4 py-4 sm:flex-row sm:gap-2">
+        {colorPalette.colors.map((color) => (
+          <Color key={color.hex} color={color} />
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/components/color.tsx b/apps/v4/components/color.tsx
new file mode 100644
index 00000000000..20d42d117c4
--- /dev/null
+++ b/apps/v4/components/color.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { Check, Clipboard } from "lucide-react"
+import { toast } from "sonner"
+
+import { type Color } from "@/lib/colors"
+import { trackEvent } from "@/lib/events"
+import { useColors } from "@/hooks/use-colors"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+
+export function Color({ color }: { color: Color }) {
+  const { format, setLastCopied, lastCopied } = useColors()
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 0 })
+
+  return (
+    <button
+      key={color.hex}
+      className="group relative flex aspect-[3/1] w-full flex-1 cursor-pointer flex-col gap-2 text-(--text) sm:aspect-[2/3] sm:h-auto sm:w-auto [&>svg]:absolute [&>svg]:top-4 [&>svg]:right-4 [&>svg]:z-10 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:opacity-0 [&>svg]:transition-opacity"
+      data-last-copied={lastCopied === color[format]}
+      style={
+        {
+          "--bg": `${color.oklch}`,
+          "--text": color.foreground,
+        } as React.CSSProperties
+      }
+      onClick={() => {
+        copyToClipboard(color[format])
+        trackEvent({
+          name: "copy_color",
+          properties: {
+            color: color.id,
+            value: color[format],
+            format,
+          },
+        })
+        setLastCopied(color[format])
+        toast.success(`Copied ${color[format]} to clipboard.`)
+      }}
+    >
+      {isCopied ? (
+        <Check className="group-hover:opacity-100 group-data-[last-copied=true]:opacity-100" />
+      ) : (
+        <Clipboard className="group-hover:opacity-100" />
+      )}
+      <div className="border-ghost after:border-input w-full flex-1 rounded-md bg-(--bg) after:rounded-lg md:rounded-lg" />
+      <div className="flex w-full flex-col items-center justify-center gap-1">
+        <span className="text-muted-foreground group-hover:text-foreground group-data-[last-copied=true]:text-primary font-mono text-xs tabular-nums transition-colors sm:hidden xl:flex">
+          {color.className}
+        </span>
+        <span className="text-muted-foreground group-hover:text-foreground group-data-[last-copied=true]:text-primary hidden font-mono text-xs tabular-nums transition-colors sm:flex xl:hidden">
+          {color.scale}
+        </span>
+      </div>
+    </button>
+  )
+}
diff --git a/apps/v4/components/colors-nav.tsx b/apps/v4/components/colors-nav.tsx
new file mode 100644
index 00000000000..a15a59a4060
--- /dev/null
+++ b/apps/v4/components/colors-nav.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { getColors } from "@/lib/colors"
+import { cn } from "@/lib/utils"
+import { ScrollArea, ScrollBar } from "@/registry/new-york-v4/ui/scroll-area"
+
+export function ColorsNav({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const pathname = usePathname()
+  const colors = getColors()
+
+  return (
+    <div className={cn("flex items-center", className)} {...props}>
+      <ScrollArea className="max-w-full">
+        <div className="flex items-center">
+          {colors.map((colorPalette, index) => (
+            <Link
+              href={`/colors#${colorPalette.name}`}
+              key={colorPalette.name}
+              data-active={
+                pathname?.startsWith(colorPalette.name) ||
+                (index === 0 && pathname === "/colors")
+              }
+              className={cn(
+                "text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 items-center justify-center px-4 text-center text-base font-medium capitalize transition-colors"
+              )}
+            >
+              {colorPalette.name}
+            </Link>
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" className="invisible" />
+      </ScrollArea>
+    </div>
+  )
+}
diff --git a/apps/v4/components/command-menu.tsx b/apps/v4/components/command-menu.tsx
new file mode 100644
index 00000000000..3839806e8a4
--- /dev/null
+++ b/apps/v4/components/command-menu.tsx
@@ -0,0 +1,398 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { IconArrowRight } from "@tabler/icons-react"
+import { CornerDownLeftIcon, SquareDashedIcon } from "lucide-react"
+
+import { type Color, type ColorPalette } from "@/lib/colors"
+import { showMcpDocs } from "@/lib/flags"
+import { source } from "@/lib/source"
+import { cn } from "@/lib/utils"
+import { useConfig } from "@/hooks/use-config"
+import { useIsMac } from "@/hooks/use-is-mac"
+import { useMutationObserver } from "@/hooks/use-mutation-observer"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york-v4/ui/dialog"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+export function CommandMenu({
+  tree,
+  colors,
+  blocks,
+  navItems,
+  ...props
+}: DialogProps & {
+  tree: typeof source.pageTree
+  colors: ColorPalette[]
+  blocks?: { name: string; description: string; categories: string[] }[]
+  navItems?: { href: string; label: string }[]
+}) {
+  const router = useRouter()
+  const isMac = useIsMac()
+  const [config] = useConfig()
+  const [open, setOpen] = React.useState(false)
+  const [selectedType, setSelectedType] = React.useState<
+    "color" | "page" | "component" | "block" | null
+  >(null)
+  const [copyPayload, setCopyPayload] = React.useState("")
+  const packageManager = config.packageManager || "pnpm"
+
+  const handlePageHighlight = React.useCallback(
+    (isComponent: boolean, item: { url: string; name?: React.ReactNode }) => {
+      if (isComponent) {
+        const componentName = item.url.split("/").pop()
+        setSelectedType("component")
+        setCopyPayload(
+          `${packageManager} dlx shadcn@latest add ${componentName}`
+        )
+      } else {
+        setSelectedType("page")
+        setCopyPayload("")
+      }
+    },
+    [packageManager, setSelectedType, setCopyPayload]
+  )
+
+  const handleColorHighlight = React.useCallback(
+    (color: Color) => {
+      setSelectedType("color")
+      setCopyPayload(color.className)
+    },
+    [setSelectedType, setCopyPayload]
+  )
+
+  const handleBlockHighlight = React.useCallback(
+    (block: { name: string; description: string; categories: string[] }) => {
+      setSelectedType("block")
+      setCopyPayload(`${packageManager} dlx shadcn@latest add ${block.name}`)
+    },
+    [setSelectedType, setCopyPayload, packageManager]
+  )
+
+  const runCommand = React.useCallback((command: () => unknown) => {
+    setOpen(false)
+    command()
+  }, [])
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+
+      if (e.key === "c" && (e.metaKey || e.ctrlKey)) {
+        runCommand(() => {
+          if (selectedType === "color") {
+            copyToClipboardWithMeta(copyPayload, {
+              name: "copy_color",
+              properties: { color: copyPayload },
+            })
+          }
+
+          if (selectedType === "block") {
+            copyToClipboardWithMeta(copyPayload, {
+              name: "copy_npm_command",
+              properties: { command: copyPayload, pm: packageManager },
+            })
+          }
+
+          if (selectedType === "page" || selectedType === "component") {
+            copyToClipboardWithMeta(copyPayload, {
+              name: "copy_npm_command",
+              properties: { command: copyPayload, pm: packageManager },
+            })
+          }
+        })
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [copyPayload, runCommand, selectedType, packageManager])
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="secondary"
+          className={cn(
+            "bg-surface text-surface-foreground/60 dark:bg-card relative h-8 w-full justify-start pl-2.5 font-normal shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64"
+          )}
+          onClick={() => setOpen(true)}
+          {...props}
+        >
+          <span className="hidden lg:inline-flex">Search documentation...</span>
+          <span className="inline-flex lg:hidden">Search...</span>
+          <div className="absolute top-1.5 right-1.5 hidden gap-1 sm:flex">
+            <CommandMenuKbd>{isMac ? "⌘" : "Ctrl"}</CommandMenuKbd>
+            <CommandMenuKbd className="aspect-square">K</CommandMenuKbd>
+          </div>
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        showCloseButton={false}
+        className="rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl ring-4 ring-neutral-200/80 dark:bg-neutral-900 dark:ring-neutral-800"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>Search documentation...</DialogTitle>
+          <DialogDescription>Search for a command to run...</DialogDescription>
+        </DialogHeader>
+        <Command
+          className="**:data-[slot=command-input-wrapper]:bg-input/50 **:data-[slot=command-input-wrapper]:border-input rounded-none bg-transparent **:data-[slot=command-input]:!h-9 **:data-[slot=command-input]:py-0 **:data-[slot=command-input-wrapper]:mb-0 **:data-[slot=command-input-wrapper]:!h-9 **:data-[slot=command-input-wrapper]:rounded-md **:data-[slot=command-input-wrapper]:border"
+          filter={(value, search, keywords) => {
+            const extendValue = value + " " + (keywords?.join(" ") || "")
+            if (extendValue.toLowerCase().includes(search.toLowerCase())) {
+              return 1
+            }
+            return 0
+          }}
+        >
+          <CommandInput placeholder="Search documentation..." />
+          <CommandList className="no-scrollbar min-h-80 scroll-pt-2 scroll-pb-1.5">
+            <CommandEmpty className="text-muted-foreground py-12 text-center text-sm">
+              No results found.
+            </CommandEmpty>
+            {navItems && navItems.length > 0 && (
+              <CommandGroup
+                heading="Pages"
+                className="!p-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
+              >
+                {navItems.map((item) => (
+                  <CommandMenuItem
+                    key={item.href}
+                    value={`Navigation ${item.label}`}
+                    keywords={["nav", "navigation", item.label.toLowerCase()]}
+                    onHighlight={() => {
+                      setSelectedType("page")
+                      setCopyPayload("")
+                    }}
+                    onSelect={() => {
+                      runCommand(() => router.push(item.href))
+                    }}
+                  >
+                    <IconArrowRight />
+                    {item.label}
+                  </CommandMenuItem>
+                ))}
+              </CommandGroup>
+            )}
+            {tree.children.map((group) => (
+              <CommandGroup
+                key={group.$id}
+                heading={group.name}
+                className="!p-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
+              >
+                {group.type === "folder" &&
+                  group.children.map((item) => {
+                    if (item.type === "page") {
+                      const isComponent = item.url.includes("/components/")
+
+                      if (!showMcpDocs && item.url.includes("/mcp")) {
+                        return null
+                      }
+
+                      return (
+                        <CommandMenuItem
+                          key={item.url}
+                          value={
+                            item.name?.toString()
+                              ? `${group.name} ${item.name}`
+                              : ""
+                          }
+                          keywords={isComponent ? ["component"] : undefined}
+                          onHighlight={() =>
+                            handlePageHighlight(isComponent, item)
+                          }
+                          onSelect={() => {
+                            runCommand(() => router.push(item.url))
+                          }}
+                        >
+                          {isComponent ? (
+                            <div className="border-muted-foreground aspect-square size-4 rounded-full border border-dashed" />
+                          ) : (
+                            <IconArrowRight />
+                          )}
+                          {item.name}
+                        </CommandMenuItem>
+                      )
+                    }
+                    return null
+                  })}
+              </CommandGroup>
+            ))}
+            {colors.map((colorPalette) => (
+              <CommandGroup
+                key={colorPalette.name}
+                heading={
+                  colorPalette.name.charAt(0).toUpperCase() +
+                  colorPalette.name.slice(1)
+                }
+                className="!p-0 [&_[cmdk-group-heading]]:!p-3"
+              >
+                {colorPalette.colors.map((color) => (
+                  <CommandMenuItem
+                    key={color.hex}
+                    value={color.className}
+                    keywords={["color", color.name, color.className]}
+                    onHighlight={() => handleColorHighlight(color)}
+                    onSelect={() => {
+                      runCommand(() =>
+                        copyToClipboardWithMeta(color.oklch, {
+                          name: "copy_color",
+                          properties: { color: color.oklch },
+                        })
+                      )
+                    }}
+                  >
+                    <div
+                      className="border-ghost aspect-square size-4 rounded-sm bg-(--color) after:rounded-sm"
+                      style={{ "--color": color.oklch } as React.CSSProperties}
+                    />
+                    {color.className}
+                    <span className="text-muted-foreground ml-auto font-mono text-xs font-normal tabular-nums">
+                      {color.oklch}
+                    </span>
+                  </CommandMenuItem>
+                ))}
+              </CommandGroup>
+            ))}
+            {blocks?.length ? (
+              <CommandGroup
+                heading="Blocks"
+                className="!p-0 [&_[cmdk-group-heading]]:!p-3"
+              >
+                {blocks.map((block) => (
+                  <CommandMenuItem
+                    key={block.name}
+                    value={block.name}
+                    onHighlight={() => {
+                      handleBlockHighlight(block)
+                    }}
+                    keywords={[
+                      "block",
+                      block.name,
+                      block.description,
+                      ...block.categories,
+                    ]}
+                    onSelect={() => {
+                      runCommand(() =>
+                        router.push(
+                          `/blocks/${block.categories[0]}#${block.name}`
+                        )
+                      )
+                    }}
+                  >
+                    <SquareDashedIcon />
+                    {block.description}
+                    <span className="text-muted-foreground ml-auto font-mono text-xs font-normal tabular-nums">
+                      {block.name}
+                    </span>
+                  </CommandMenuItem>
+                ))}
+              </CommandGroup>
+            ) : null}
+          </CommandList>
+        </Command>
+        <div className="text-muted-foreground absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium dark:border-t-neutral-700 dark:bg-neutral-800">
+          <div className="flex items-center gap-2">
+            <CommandMenuKbd>
+              <CornerDownLeftIcon />
+            </CommandMenuKbd>{" "}
+            {selectedType === "page" || selectedType === "component"
+              ? "Go to Page"
+              : null}
+            {selectedType === "color" ? "Copy OKLCH" : null}
+          </div>
+          {copyPayload && (
+            <>
+              <Separator orientation="vertical" className="!h-4" />
+              <div className="flex items-center gap-1">
+                <CommandMenuKbd>{isMac ? "⌘" : "Ctrl"}</CommandMenuKbd>
+                <CommandMenuKbd>C</CommandMenuKbd>
+                {copyPayload}
+              </div>
+            </>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandMenuItem({
+  children,
+  className,
+  onHighlight,
+  ...props
+}: React.ComponentProps<typeof CommandItem> & {
+  onHighlight?: () => void
+  "data-selected"?: string
+  "aria-selected"?: string
+}) {
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  useMutationObserver(ref, (mutations) => {
+    mutations.forEach((mutation) => {
+      if (
+        mutation.type === "attributes" &&
+        mutation.attributeName === "aria-selected" &&
+        ref.current?.getAttribute("aria-selected") === "true"
+      ) {
+        onHighlight?.()
+      }
+    })
+  })
+
+  return (
+    <CommandItem
+      ref={ref}
+      className={cn(
+        "data-[selected=true]:border-input data-[selected=true]:bg-input/50 h-9 rounded-md border border-transparent !px-3 font-medium",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </CommandItem>
+  )
+}
+
+function CommandMenuKbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      className={cn(
+        "bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/apps/v4/components/component-preview-tabs.tsx b/apps/v4/components/component-preview-tabs.tsx
new file mode 100644
index 00000000000..e38e7a0f4b2
--- /dev/null
+++ b/apps/v4/components/component-preview-tabs.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Tabs, TabsList, TabsTrigger } from "@/registry/new-york-v4/ui/tabs"
+
+export function ComponentPreviewTabs({
+  className,
+  align = "center",
+  hideCode = false,
+  component,
+  source,
+  ...props
+}: React.ComponentProps<"div"> & {
+  align?: "center" | "start" | "end"
+  hideCode?: boolean
+  component: React.ReactNode
+  source: React.ReactNode
+}) {
+  const [tab, setTab] = React.useState("preview")
+
+  return (
+    <div
+      className={cn("group relative mt-4 mb-12 flex flex-col gap-2", className)}
+      {...props}
+    >
+      <Tabs
+        className="relative mr-auto w-full"
+        value={tab}
+        onValueChange={setTab}
+      >
+        <div className="flex items-center justify-between">
+          {!hideCode && (
+            <TabsList className="justify-start gap-4 rounded-none bg-transparent px-2 md:px-0">
+              <TabsTrigger
+                value="preview"
+                className="text-muted-foreground data-[state=active]:text-foreground px-0 text-base data-[state=active]:shadow-none dark:data-[state=active]:border-transparent dark:data-[state=active]:bg-transparent"
+              >
+                Preview
+              </TabsTrigger>
+              <TabsTrigger
+                value="code"
+                className="text-muted-foreground data-[state=active]:text-foreground px-0 text-base data-[state=active]:shadow-none dark:data-[state=active]:border-transparent dark:data-[state=active]:bg-transparent"
+              >
+                Code
+              </TabsTrigger>
+            </TabsList>
+          )}
+        </div>
+      </Tabs>
+      <div
+        data-tab={tab}
+        className="data-[tab=code]:border-code relative rounded-lg border md:-mx-1"
+      >
+        <div
+          data-slot="preview"
+          data-active={tab === "preview"}
+          className="invisible data-[active=true]:visible"
+        >
+          <div
+            data-align={align}
+            className={cn(
+              "preview flex h-[450px] w-full justify-center p-10 data-[align=center]:items-center data-[align=end]:items-end data-[align=start]:items-start"
+            )}
+          >
+            {component}
+          </div>
+        </div>
+        <div
+          data-slot="code"
+          data-active={tab === "code"}
+          className="absolute inset-0 hidden overflow-hidden data-[active=true]:block **:[figure]:!m-0 **:[pre]:h-[450px]"
+        >
+          {source}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/components/component-preview.tsx b/apps/v4/components/component-preview.tsx
new file mode 100644
index 00000000000..1318bcd1be1
--- /dev/null
+++ b/apps/v4/components/component-preview.tsx
@@ -0,0 +1,69 @@
+import Image from "next/image"
+
+import { ComponentPreviewTabs } from "@/components/component-preview-tabs"
+import { ComponentSource } from "@/components/component-source"
+import { Index } from "@/registry/__index__"
+
+export function ComponentPreview({
+  name,
+  type,
+  className,
+  align = "center",
+  hideCode = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  name: string
+  align?: "center" | "start" | "end"
+  description?: string
+  hideCode?: boolean
+  type?: "block" | "component" | "example"
+}) {
+  const Component = Index[name]?.component
+
+  if (!Component) {
+    return (
+      <p className="text-muted-foreground text-sm">
+        Component{" "}
+        <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
+          {name}
+        </code>{" "}
+        not found in registry.
+      </p>
+    )
+  }
+
+  if (type === "block") {
+    return (
+      <div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border md:-mx-1">
+        <Image
+          src={`/r/styles/new-york-v4/${name}-light.png`}
+          alt={name}
+          width={1440}
+          height={900}
+          className="bg-background absolute top-0 left-0 z-20 w-[970px] max-w-none sm:w-[1280px] md:hidden dark:hidden md:dark:hidden"
+        />
+        <Image
+          src={`/r/styles/new-york-v4/${name}-dark.png`}
+          alt={name}
+          width={1440}
+          height={900}
+          className="bg-background absolute top-0 left-0 z-20 hidden w-[970px] max-w-none sm:w-[1280px] md:hidden dark:block md:dark:hidden"
+        />
+        <div className="bg-background absolute inset-0 hidden w-[1600px] md:block">
+          <iframe src={`/view/${name}`} className="size-full" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <ComponentPreviewTabs
+      className={className}
+      align={align}
+      hideCode={hideCode}
+      component={<Component />}
+      source={<ComponentSource name={name} collapsible={false} />}
+      {...props}
+    />
+  )
+}
diff --git a/apps/v4/components/component-source.tsx b/apps/v4/components/component-source.tsx
new file mode 100644
index 00000000000..3aefe35f486
--- /dev/null
+++ b/apps/v4/components/component-source.tsx
@@ -0,0 +1,101 @@
+import fs from "node:fs/promises"
+import path from "node:path"
+import * as React from "react"
+
+import { highlightCode } from "@/lib/highlight-code"
+import { getRegistryItem } from "@/lib/registry"
+import { cn } from "@/lib/utils"
+import { CodeCollapsibleWrapper } from "@/components/code-collapsible-wrapper"
+import { CopyButton } from "@/components/copy-button"
+import { getIconForLanguageExtension } from "@/components/icons"
+
+export async function ComponentSource({
+  name,
+  src,
+  title,
+  language,
+  collapsible = true,
+  className,
+}: React.ComponentProps<"div"> & {
+  name?: string
+  src?: string
+  title?: string
+  language?: string
+  collapsible?: boolean
+}) {
+  if (!name && !src) {
+    return null
+  }
+
+  let code: string | undefined
+
+  if (name) {
+    const item = await getRegistryItem(name)
+    code = item?.files?.[0]?.content
+  }
+
+  if (src) {
+    const file = await fs.readFile(path.join(process.cwd(), src), "utf-8")
+    code = file
+  }
+
+  if (!code) {
+    return null
+  }
+
+  const lang = language ?? title?.split(".").pop() ?? "tsx"
+  const highlightedCode = await highlightCode(code, lang)
+
+  if (!collapsible) {
+    return (
+      <div className={cn("relative", className)}>
+        <ComponentCode
+          code={code}
+          highlightedCode={highlightedCode}
+          language={lang}
+          title={title}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <CodeCollapsibleWrapper className={className}>
+      <ComponentCode
+        code={code}
+        highlightedCode={highlightedCode}
+        language={lang}
+        title={title}
+      />
+    </CodeCollapsibleWrapper>
+  )
+}
+
+function ComponentCode({
+  code,
+  highlightedCode,
+  language,
+  title,
+}: {
+  code: string
+  highlightedCode: string
+  language: string
+  title: string | undefined
+}) {
+  return (
+    <figure data-rehype-pretty-code-figure="" className="[&>pre]:max-h-96">
+      {title && (
+        <figcaption
+          data-rehype-pretty-code-title=""
+          className="text-code-foreground [&_svg]:text-code-foreground flex items-center gap-2 [&_svg]:size-4 [&_svg]:opacity-70"
+          data-language={language}
+        >
+          {getIconForLanguageExtension(language)}
+          {title}
+        </figcaption>
+      )}
+      <CopyButton value={code} />
+      <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+    </figure>
+  )
+}
diff --git a/apps/v4/components/component-wrapper.tsx b/apps/v4/components/component-wrapper.tsx
new file mode 100644
index 00000000000..46ed741cf53
--- /dev/null
+++ b/apps/v4/components/component-wrapper.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/registry/new-york-v4/lib/utils"
+
+export function ComponentWrapper({
+  className,
+  name,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> & { name: string }) {
+  return (
+    <ComponentErrorBoundary name={name}>
+      <div
+        id={name}
+        data-name={name.toLowerCase()}
+        className={cn(
+          "flex w-full scroll-mt-16 flex-col rounded-lg border",
+          className
+        )}
+        {...props}
+      >
+        <div className="border-b px-4 py-3">
+          <div className="text-sm font-medium">{getComponentName(name)}</div>
+        </div>
+        <div className="flex flex-1 items-center gap-2 p-4">{children}</div>
+      </div>
+    </ComponentErrorBoundary>
+  )
+}
+
+class ComponentErrorBoundary extends React.Component<
+  { children: React.ReactNode; name: string },
+  { hasError: boolean }
+> {
+  constructor(props: { children: React.ReactNode; name: string }) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error(`Error in component ${this.props.name}:`, error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="p-4 text-red-500">
+          Something went wrong in component: {this.props.name}
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+function getComponentName(name: string) {
+  // convert kebab-case to title case
+  return name.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase())
+}
diff --git a/apps/v4/components/components-list.tsx b/apps/v4/components/components-list.tsx
new file mode 100644
index 00000000000..d5d2c5d427c
--- /dev/null
+++ b/apps/v4/components/components-list.tsx
@@ -0,0 +1,31 @@
+import Link from "next/link"
+
+import { source } from "@/lib/source"
+
+export function ComponentsList() {
+  const components = source.pageTree.children.find(
+    (page) => page.$id === "components"
+  )
+
+  if (components?.type !== "folder") {
+    return
+  }
+
+  const list = components.children.filter(
+    (component) => component.type === "page"
+  )
+
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 md:gap-x-8 lg:gap-x-16 lg:gap-y-6 xl:gap-x-20">
+      {list.map((component) => (
+        <Link
+          key={component.$id}
+          href={component.url}
+          className="text-lg font-medium underline-offset-4 hover:underline md:text-base"
+        >
+          {component.name}
+        </Link>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/components/copy-button.tsx b/apps/v4/components/copy-button.tsx
new file mode 100644
index 00000000000..9368e514ccb
--- /dev/null
+++ b/apps/v4/components/copy-button.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ClipboardIcon } from "lucide-react"
+
+import { Event, trackEvent } from "@/lib/events"
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
+
+export function copyToClipboardWithMeta(value: string, event?: Event) {
+  navigator.clipboard.writeText(value)
+  if (event) {
+    trackEvent(event)
+  }
+}
+
+export function CopyButton({
+  value,
+  className,
+  variant = "ghost",
+  event,
+  ...props
+}: React.ComponentProps<typeof Button> & {
+  value: string
+  src?: string
+  event?: Event["name"]
+}) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 2000)
+  }, [])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          data-slot="copy-button"
+          size="icon"
+          variant={variant}
+          className={cn(
+            "bg-code absolute top-3 right-2 z-10 size-7 hover:opacity-100 focus-visible:opacity-100",
+            className
+          )}
+          onClick={() => {
+            copyToClipboardWithMeta(
+              value,
+              event
+                ? {
+                    name: event,
+                    properties: {
+                      code: value,
+                    },
+                  }
+                : undefined
+            )
+            setHasCopied(true)
+          }}
+          {...props}
+        >
+          <span className="sr-only">Copy</span>
+          {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        {hasCopied ? "Copied" : "Copy to Clipboard"}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/components/docs-breadcrumb.tsx b/apps/v4/components/docs-breadcrumb.tsx
new file mode 100644
index 00000000000..9b798fda6a3
--- /dev/null
+++ b/apps/v4/components/docs-breadcrumb.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { Fragment } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useBreadcrumb } from "fumadocs-core/breadcrumb"
+import type { PageTree } from "fumadocs-core/server"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+
+export function DocsBreadcrumb({
+  tree,
+  className,
+}: {
+  tree: PageTree.Root
+  className?: string
+}) {
+  const pathname = usePathname()
+  const items = useBreadcrumb(pathname, tree)
+
+  if (items.length === 0) return null
+
+  return (
+    <Breadcrumb className={className}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/docs" className="hover:text-accent-foreground">
+              Docs
+            </Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        {items.map((item, i) => (
+          <Fragment key={i}>
+            {i !== 0 && <BreadcrumbSeparator />}
+            {item.url ? (
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link
+                    href={item.url}
+                    className="hover:text-accent-foreground truncate"
+                  >
+                    {item.name}
+                  </Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            ) : (
+              <BreadcrumbItem>
+                <BreadcrumbPage>{item.name}</BreadcrumbPage>
+              </BreadcrumbItem>
+            )}
+          </Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/components/docs-copy-page.tsx b/apps/v4/components/docs-copy-page.tsx
new file mode 100644
index 00000000000..f1cf9b22b32
--- /dev/null
+++ b/apps/v4/components/docs-copy-page.tsx
@@ -0,0 +1,156 @@
+"use client"
+
+import { IconCheck, IconChevronDown, IconCopy } from "@tabler/icons-react"
+
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+function getPromptUrl(baseURL: string, url: string) {
+  return `${baseURL}?q=${encodeURIComponent(
+    `I’m looking at this shadcn/ui documentation: ${url}.
+Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.
+  `
+  )}`
+}
+
+const menuItems = {
+  markdown: (url: string) => (
+    <a href={`${url}.md`} target="_blank" rel="noopener noreferrer">
+      <svg strokeLinejoin="round" viewBox="0 0 22 16">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M19.5 2.25H2.5C1.80964 2.25 1.25 2.80964 1.25 3.5V12.5C1.25 13.1904 1.80964 13.75 2.5 13.75H19.5C20.1904 13.75 20.75 13.1904 20.75 12.5V3.5C20.75 2.80964 20.1904 2.25 19.5 2.25ZM2.5 1C1.11929 1 0 2.11929 0 3.5V12.5C0 13.8807 1.11929 15 2.5 15H19.5C20.8807 15 22 13.8807 22 12.5V3.5C22 2.11929 20.8807 1 19.5 1H2.5ZM3 4.5H4H4.25H4.6899L4.98715 4.82428L7 7.02011L9.01285 4.82428L9.3101 4.5H9.75H10H11V5.5V11.5H9V7.79807L7.73715 9.17572L7 9.97989L6.26285 9.17572L5 7.79807V11.5H3V5.5V4.5ZM15 8V4.5H17V8H19.5L17 10.5L16 11.5L15 10.5L12.5 8H15Z"
+          fill="currentColor"
+        />
+      </svg>
+      View as Markdown
+    </a>
+  ),
+  v0: (url: string) => (
+    <a
+      href={getPromptUrl("https://v0.dev", url)}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 147 70"
+        className="size-4.5 -translate-x-px"
+      >
+        <path d="M56 50.203V14h14v46.156C70 65.593 65.593 70 60.156 70c-2.596 0-5.158-1-7-2.843L0 14h19.797L56 50.203ZM147 56h-14V23.953L100.953 56H133v14H96.687C85.814 70 77 61.186 77 50.312V14h14v32.156L123.156 14H91V0h36.312C138.186 0 147 8.814 147 19.688V56Z" />
+      </svg>
+      <span className="-translate-x-[2px]">Open in v0</span>
+    </a>
+  ),
+  chatgpt: (url: string) => (
+    <a
+      href={getPromptUrl("https://chatgpt.com", url)}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path
+          d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z"
+          fill="currentColor"
+        />
+      </svg>
+      Open in ChatGPT
+    </a>
+  ),
+  claude: (url: string) => (
+    <a
+      href={getPromptUrl("https://claude.ai/new", url)}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path
+          d="m4.714 15.956 4.718-2.648.079-.23-.08-.128h-.23l-.79-.048-2.695-.073-2.337-.097-2.265-.122-.57-.121-.535-.704.055-.353.48-.321.685.06 1.518.104 2.277.157 1.651.098 2.447.255h.389l.054-.158-.133-.097-.103-.098-2.356-1.596-2.55-1.688-1.336-.972-.722-.491L2 6.223l-.158-1.008.655-.722.88.06.225.061.893.686 1.906 1.476 2.49 1.833.364.304.146-.104.018-.072-.164-.274-1.354-2.446-1.445-2.49-.644-1.032-.17-.619a2.972 2.972 0 0 1-.103-.729L6.287.133 6.7 0l.995.134.42.364.619 1.415L9.735 4.14l1.555 3.03.455.898.243.832.09.255h.159V9.01l.127-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.583.28.48.685-.067.444-.286 1.851-.558 2.903-.365 1.942h.213l.243-.242.983-1.306 1.652-2.064.728-.82.85-.904.547-.431h1.032l.759 1.129-.34 1.166-1.063 1.347-.88 1.142-1.263 1.7-.79 1.36.074.11.188-.02 2.853-.606 1.542-.28 1.84-.315.832.388.09.395-.327.807-1.967.486-2.307.462-3.436.813-.043.03.049.061 1.548.146.662.036h1.62l3.018.225.79.522.473.638-.08.485-1.213.62-1.64-.389-3.825-.91-1.31-.329h-.183v.11l1.093 1.068 2.003 1.81 2.508 2.33.127.578-.321.455-.34-.049-2.204-1.657-.85-.747-1.925-1.62h-.127v.17l.443.649 2.343 3.521.122 1.08-.17.353-.607.213-.668-.122-1.372-1.924-1.415-2.168-1.141-1.943-.14.08-.674 7.254-.316.37-.728.28-.607-.461-.322-.747.322-1.476.388-1.924.316-1.53.285-1.9.17-.632-.012-.042-.14.018-1.432 1.967-2.18 2.945-1.724 1.845-.413.164-.716-.37.066-.662.401-.589 2.386-3.036 1.439-1.882.929-1.086-.006-.158h-.055L4.138 18.56l-1.13.146-.485-.456.06-.746.231-.243 1.907-1.312Z"
+          fill="currentColor"
+        />
+      </svg>
+      Open in Claude
+    </a>
+  ),
+}
+
+export function DocsCopyPage({ page, url }: { page: string; url: string }) {
+  const { copyToClipboard, isCopied } = useCopyToClipboard()
+
+  const trigger = (
+    <Button
+      variant="secondary"
+      size="sm"
+      className="peer -ml-0.5 size-8 shadow-none md:size-7 md:text-[0.8rem]"
+    >
+      <IconChevronDown className="rotate-180 sm:rotate-0" />
+    </Button>
+  )
+
+  return (
+    <Popover>
+      <div className="bg-secondary group/buttons relative flex rounded-lg *:[[data-slot=button]]:focus-visible:relative *:[[data-slot=button]]:focus-visible:z-10">
+        <PopoverAnchor />
+        <Button
+          variant="secondary"
+          size="sm"
+          className="h-8 shadow-none md:h-7 md:text-[0.8rem]"
+          onClick={() => copyToClipboard(page)}
+        >
+          {isCopied ? <IconCheck /> : <IconCopy />}
+          Copy Page
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild className="hidden sm:flex">
+            {trigger}
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="shadow-none">
+            {Object.entries(menuItems).map(([key, value]) => (
+              <DropdownMenuItem key={key} asChild>
+                {value(url)}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Separator
+          orientation="vertical"
+          className="!bg-foreground/10 absolute top-0 right-8 z-0 !h-8 peer-focus-visible:opacity-0 sm:right-7 sm:!h-7"
+        />
+        <PopoverTrigger asChild className="flex sm:hidden">
+          {trigger}
+        </PopoverTrigger>
+        <PopoverContent
+          className="bg-background/70 dark:bg-background/60 w-52 !origin-center rounded-lg p-1 shadow-sm backdrop-blur-sm"
+          align="start"
+        >
+          {Object.entries(menuItems).map(([key, value]) => (
+            <Button
+              variant="ghost"
+              size="lg"
+              asChild
+              key={key}
+              className="*:[svg]:text-muted-foreground w-full justify-start text-base font-normal"
+            >
+              {value(url)}
+            </Button>
+          ))}
+        </PopoverContent>
+      </div>
+    </Popover>
+  )
+}
diff --git a/apps/v4/components/docs-sidebar.tsx b/apps/v4/components/docs-sidebar.tsx
new file mode 100644
index 00000000000..bdc30257b60
--- /dev/null
+++ b/apps/v4/components/docs-sidebar.tsx
@@ -0,0 +1,136 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { showMcpDocs } from "@/lib/flags"
+import type { source } from "@/lib/source"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const TOP_LEVEL_SECTIONS = [
+  { name: "Get Started", href: "/docs" },
+  {
+    name: "Components",
+    href: "/docs/components",
+  },
+  {
+    name: "Registry",
+    href: "/docs/registry",
+  },
+  {
+    name: "MCP Server",
+    href: "/docs/mcp",
+  },
+  {
+    name: "Changelog",
+    href: "/docs/changelog",
+  },
+]
+const EXCLUDED_SECTIONS = ["installation", "dark-mode"]
+const EXCLUDED_PAGES = ["/docs", "/docs/changelog"]
+
+export function DocsSidebar({
+  tree,
+  ...props
+}: React.ComponentProps<typeof Sidebar> & { tree: typeof source.pageTree }) {
+  const pathname = usePathname()
+
+  return (
+    <Sidebar
+      className="sticky top-[calc(var(--header-height)+1px)] z-30 hidden h-[calc(100svh-var(--footer-height)+2rem)] bg-transparent lg:flex"
+      collapsible="none"
+      {...props}
+    >
+      <SidebarContent className="no-scrollbar overflow-x-hidden px-2 pb-12">
+        <div className="h-(--top-spacing) shrink-0" />
+        <SidebarGroup>
+          <SidebarGroupLabel className="text-muted-foreground font-medium">
+            Sections
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {TOP_LEVEL_SECTIONS.map(({ name, href }) => {
+                if (!showMcpDocs && href.includes("/mcp")) {
+                  return null
+                }
+                return (
+                  <SidebarMenuItem key={name}>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={
+                        href === "/docs"
+                          ? pathname === href
+                          : pathname.startsWith(href)
+                      }
+                      className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[30px] w-fit overflow-visible border border-transparent text-[0.8rem] font-medium after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
+                    >
+                      <Link href={href}>
+                        <span className="absolute inset-0 flex w-(--sidebar-width) bg-transparent" />
+                        {name}
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                )
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        {tree.children.map((item) => {
+          if (EXCLUDED_SECTIONS.includes(item.$id ?? "")) {
+            return null
+          }
+
+          return (
+            <SidebarGroup key={item.$id}>
+              <SidebarGroupLabel className="text-muted-foreground font-medium">
+                {item.name}
+              </SidebarGroupLabel>
+              <SidebarGroupContent>
+                {item.type === "folder" && (
+                  <SidebarMenu className="gap-0.5">
+                    {item.children.map((item) => {
+                      if (
+                        !showMcpDocs &&
+                        item.type === "page" &&
+                        item.url?.includes("/mcp")
+                      ) {
+                        return null
+                      }
+
+                      return (
+                        item.type === "page" &&
+                        !EXCLUDED_PAGES.includes(item.url) && (
+                          <SidebarMenuItem key={item.url}>
+                            <SidebarMenuButton
+                              asChild
+                              isActive={item.url === pathname}
+                              className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[30px] w-fit overflow-visible border border-transparent text-[0.8rem] font-medium after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
+                            >
+                              <Link href={item.url}>
+                                <span className="absolute inset-0 flex w-(--sidebar-width) bg-transparent" />
+                                {item.name}
+                              </Link>
+                            </SidebarMenuButton>
+                          </SidebarMenuItem>
+                        )
+                      )
+                    })}
+                  </SidebarMenu>
+                )}
+              </SidebarGroupContent>
+            </SidebarGroup>
+          )
+        })}
+      </SidebarContent>
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/components/docs-toc.tsx b/apps/v4/components/docs-toc.tsx
new file mode 100644
index 00000000000..ff0803035aa
--- /dev/null
+++ b/apps/v4/components/docs-toc.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import * as React from "react"
+import { IconMenu3 } from "@tabler/icons-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+function useActiveItem(itemIds: string[]) {
+  const [activeId, setActiveId] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+          }
+        }
+      },
+      { rootMargin: "0% 0% -80% 0%" }
+    )
+
+    for (const id of itemIds ?? []) {
+      const element = document.getElementById(id)
+      if (element) {
+        observer.observe(element)
+      }
+    }
+
+    return () => {
+      for (const id of itemIds ?? []) {
+        const element = document.getElementById(id)
+        if (element) {
+          observer.unobserve(element)
+        }
+      }
+    }
+  }, [itemIds])
+
+  return activeId
+}
+
+export function DocsTableOfContents({
+  toc,
+  variant = "list",
+  className,
+}: {
+  toc: {
+    title?: React.ReactNode
+    url: string
+    depth: number
+  }[]
+  variant?: "dropdown" | "list"
+  className?: string
+}) {
+  const [open, setOpen] = React.useState(false)
+  const itemIds = React.useMemo(
+    () => toc.map((item) => item.url.replace("#", "")),
+    [toc]
+  )
+  const activeHeading = useActiveItem(itemIds)
+
+  if (!toc?.length) {
+    return null
+  }
+
+  if (variant === "dropdown") {
+    return (
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn("h-8 md:h-7", className)}
+          >
+            <IconMenu3 /> On This Page
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="start"
+          className="no-scrollbar max-h-[70svh]"
+        >
+          {toc.map((item) => (
+            <DropdownMenuItem
+              key={item.url}
+              asChild
+              onClick={() => {
+                setOpen(false)
+              }}
+              data-depth={item.depth}
+              className="data-[depth=3]:pl-6 data-[depth=4]:pl-8"
+            >
+              <a href={item.url}>{item.title}</a>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-2 p-4 pt-0 text-sm", className)}>
+      <p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs">
+        On This Page
+      </p>
+      {toc.map((item) => (
+        <a
+          key={item.url}
+          href={item.url}
+          className="text-muted-foreground hover:text-foreground data-[active=true]:text-foreground text-[0.8rem] no-underline transition-colors data-[depth=3]:pl-4 data-[depth=4]:pl-6"
+          data-active={item.url === `#${activeHeading}`}
+          data-depth={item.depth}
+        >
+          {item.title}
+        </a>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/components/examples-nav.tsx b/apps/v4/components/examples-nav.tsx
new file mode 100644
index 00000000000..c1e11b51b3c
--- /dev/null
+++ b/apps/v4/components/examples-nav.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { cn } from "@/lib/utils"
+import { ScrollArea, ScrollBar } from "@/registry/new-york-v4/ui/scroll-area"
+
+const examples = [
+  {
+    name: "Dashboard",
+    href: "/examples/dashboard",
+    code: "https://github.com/shadcn/ui/tree/main/apps/v4/app/(app)/examples/dashboard",
+    hidden: false,
+  },
+  {
+    name: "Tasks",
+    href: "/examples/tasks",
+    code: "https://github.com/shadcn/ui/tree/main/apps/v4/app/(app)/examples/tasks",
+    hidden: false,
+  },
+  {
+    name: "Playground",
+    href: "/examples/playground",
+    code: "https://github.com/shadcn/ui/tree/main/apps/v4/app/(app)/examples/playground",
+    hidden: false,
+  },
+  {
+    name: "Authentication",
+    href: "/examples/authentication",
+    code: "https://github.com/shadcn/ui/tree/main/apps/v4/app/(app)/examples/authentication",
+    hidden: false,
+  },
+]
+
+export function ExamplesNav({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const pathname = usePathname()
+
+  return (
+    <div className={cn("flex items-center", className)} {...props}>
+      <ScrollArea className="max-w-[96%] md:max-w-[600px] lg:max-w-none">
+        <div className="flex items-center">
+          <ExampleLink
+            example={{ name: "Examples", href: "/", code: "", hidden: false }}
+            isActive={pathname === "/"}
+          />
+          {examples.map((example) => (
+            <ExampleLink
+              key={example.href}
+              example={example}
+              isActive={pathname?.startsWith(example.href) ?? false}
+            />
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" className="invisible" />
+      </ScrollArea>
+    </div>
+  )
+}
+
+function ExampleLink({
+  example,
+  isActive,
+}: {
+  example: (typeof examples)[number]
+  isActive: boolean
+}) {
+  if (example.hidden) {
+    return null
+  }
+
+  return (
+    <Link
+      href={example.href}
+      key={example.href}
+      className="text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 items-center justify-center px-4 text-center text-base font-medium transition-colors"
+      data-active={isActive}
+    >
+      {example.name}
+    </Link>
+  )
+}
diff --git a/apps/v4/components/github-link.tsx b/apps/v4/components/github-link.tsx
new file mode 100644
index 00000000000..b478f3032ed
--- /dev/null
+++ b/apps/v4/components/github-link.tsx
@@ -0,0 +1,35 @@
+import * as React from "react"
+import Link from "next/link"
+
+import { siteConfig } from "@/lib/config"
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
+
+export function GitHubLink() {
+  return (
+    <Button asChild size="sm" variant="ghost" className="h-8 shadow-none">
+      <Link href={siteConfig.links.github} target="_blank" rel="noreferrer">
+        <Icons.gitHub />
+        <React.Suspense fallback={<Skeleton className="h-4 w-8" />}>
+          <StarsCount />
+        </React.Suspense>
+      </Link>
+    </Button>
+  )
+}
+
+export async function StarsCount() {
+  const data = await fetch("https://api.github.com/repos/shadcn-ui/ui", {
+    next: { revalidate: 86400 }, // Cache for 1 day (86400 seconds)
+  })
+  const json = await data.json()
+
+  return (
+    <span className="text-muted-foreground w-8 text-xs tabular-nums">
+      {json.stargazers_count >= 1000
+        ? `${(json.stargazers_count / 1000).toFixed(1)}k`
+        : json.stargazers_count.toLocaleString()}
+    </span>
+  )
+}
diff --git a/apps/v4/components/icons.tsx b/apps/v4/components/icons.tsx
new file mode 100644
index 00000000000..214ace1161a
--- /dev/null
+++ b/apps/v4/components/icons.tsx
@@ -0,0 +1,207 @@
+import { FileIcon } from "lucide-react"
+
+type IconProps = React.HTMLAttributes<SVGElement>
+
+export const Icons = {
+  logo: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
+      <rect width="256" height="256" fill="none" />
+      <line
+        x1="208"
+        y1="128"
+        x2="128"
+        y2="208"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="32"
+      />
+      <line
+        x1="192"
+        y1="40"
+        x2="40"
+        y2="192"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="32"
+      />
+    </svg>
+  ),
+  twitter: (props: IconProps) => (
+    <svg
+      {...props}
+      height="23"
+      viewBox="0 0 1200 1227"
+      width="23"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
+    </svg>
+  ),
+  gitHub: (props: IconProps) => (
+    <svg viewBox="0 0 438.549 438.549" {...props}>
+      <path
+        fill="currentColor"
+        d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+      ></path>
+    </svg>
+  ),
+  radix: (props: IconProps) => (
+    <svg viewBox="0 0 25 25" fill="none" {...props}>
+      <path
+        d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"
+        fill="currentcolor"
+      ></path>
+      <path d="M12 0H4V8H12V0Z" fill="currentcolor"></path>
+      <path
+        d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
+        fill="currentcolor"
+      ></path>
+    </svg>
+  ),
+  aria: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z" />
+    </svg>
+  ),
+  npm: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  yarn: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  pnpm: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  react: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  tailwind: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  google: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        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"
+      />
+    </svg>
+  ),
+  apple: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <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>
+  ),
+  paypal: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  spinner: (props: IconProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  ),
+  json: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12.043 23.968c.479-.004.953-.029 1.426-.094a11.805 11.805 0 0 0 3.146-.863 12.404 12.404 0 0 0 3.793-2.542 11.977 11.977 0 0 0 2.44-3.427 11.794 11.794 0 0 0 1.02-3.476c.149-1.16.135-2.346-.045-3.499a11.96 11.96 0 0 0-.793-2.788 11.197 11.197 0 0 0-.854-1.617c-1.168-1.837-2.861-3.314-4.81-4.3a12.835 12.835 0 0 0-2.172-.87h-.005c.119.063.24.132.345.201.12.074.239.146.351.225a8.93 8.93 0 0 1 1.559 1.33c1.063 1.145 1.797 2.548 2.218 4.041.284.982.434 1.998.495 3.017.044.743.044 1.491-.047 2.229-.149 1.27-.554 2.51-1.228 3.596a7.475 7.475 0 0 1-1.903 2.084c-1.244.928-2.877 1.482-4.436 1.114a3.916 3.916 0 0 1-.748-.258 4.692 4.692 0 0 1-.779-.45 6.08 6.08 0 0 1-1.244-1.105 6.507 6.507 0 0 1-1.049-1.747 7.366 7.366 0 0 1-.494-2.54c-.03-1.273.225-2.553.854-3.67a6.43 6.43 0 0 1 1.663-1.918c.225-.178.464-.333.704-.479l.016-.007a5.121 5.121 0 0 0-1.441-.12 4.963 4.963 0 0 0-1.228.24c-.359.12-.704.27-1.019.45a6.146 6.146 0 0 0-.733.494c-.211.18-.42.36-.615.555-1.123 1.153-1.768 2.682-2.022 4.256-.15.973-.15 1.96-.091 2.95.105 1.395.391 2.787.945 4.062a8.518 8.518 0 0 0 1.348 2.173 8.14 8.14 0 0 0 3.132 2.23 7.934 7.934 0 0 0 2.113.54c.074.015.149.015.209.015zm-2.934-.398a4.102 4.102 0 0 1-.45-.228 8.5 8.5 0 0 1-2.038-1.534c-1.094-1.137-1.827-2.566-2.247-4.08a15.184 15.184 0 0 1-.495-3.172 12.14 12.14 0 0 1 .046-2.082c.135-1.257.495-2.501 1.124-3.58a6.889 6.889 0 0 1 1.783-2.053 6.23 6.23 0 0 1 1.633-.9 5.363 5.363 0 0 1 3.522-.045c.029 0 .029 0 .045.03.015.015.045.015.06.03.045.016.104.045.165.074.239.12.479.271.704.42a6.294 6.294 0 0 1 2.097 2.502c.42.914.615 1.934.631 2.938.014 1.079-.18 2.157-.645 3.146a6.42 6.42 0 0 1-2.638 2.832c.09.03.18.045.271.075.225.044.449.074.688.074 1.468.045 2.892-.66 3.94-1.647.195-.18.375-.375.54-.585.225-.27.435-.54.614-.823.239-.375.435-.75.614-1.154a8.112 8.112 0 0 0 .509-1.664c.196-1.004.211-2.022.149-3.026-.135-2.022-.673-4.045-1.842-5.724a9.054 9.054 0 0 0-.555-.719 9.868 9.868 0 0 0-1.063-1.034 8.477 8.477 0 0 0-1.363-.915 9.927 9.927 0 0 0-1.692-.598l-.3-.06c-.209-.03-.42-.044-.634-.06a8.453 8.453 0 0 0-1.015.016c-.704.045-1.412.16-2.112.337C5.799 1.227 2.863 3.566 1.3 6.67A11.834 11.834 0 0 0 .238 9.801a11.81 11.81 0 0 0-.104 3.775c.12 1.02.374 2.023.778 2.977.227.57.511 1.124.825 1.648 1.094 1.783 2.683 3.236 4.51 4.24.688.39 1.408.69 2.157.944.226.074.45.15.689.21z"
+      />
+    </svg>
+  ),
+  ts: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" />
+    </svg>
+  ),
+  css: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path d="M0 0v20.16A3.84 3.84 0 0 0 3.84 24h16.32A3.84 3.84 0 0 0 24 20.16V3.84A3.84 3.84 0 0 0 20.16 0Zm14.256 13.08c1.56 0 2.28 1.08 2.304 2.64h-1.608c.024-.288-.048-.6-.144-.84-.096-.192-.288-.264-.552-.264-.456 0-.696.264-.696.84-.024.576.288.888.768 1.08.72.288 1.608.744 1.92 1.296q.432.648.432 1.656c0 1.608-.912 2.592-2.496 2.592-1.656 0-2.4-1.032-2.424-2.688h1.68c0 .792.264 1.176.792 1.176.264 0 .456-.072.552-.24.192-.312.24-1.176-.048-1.512-.312-.408-.912-.6-1.32-.816q-.828-.396-1.224-.936c-.24-.36-.36-.888-.36-1.536 0-1.44.936-2.472 2.424-2.448m5.4 0c1.584 0 2.304 1.08 2.328 2.64h-1.608c0-.288-.048-.6-.168-.84-.096-.192-.264-.264-.528-.264-.48 0-.72.264-.72.84s.288.888.792 1.08c.696.288 1.608.744 1.92 1.296.264.432.408.984.408 1.656.024 1.608-.888 2.592-2.472 2.592-1.68 0-2.424-1.056-2.448-2.688h1.68c0 .744.264 1.176.792 1.176.264 0 .456-.072.552-.24.216-.312.264-1.176-.048-1.512-.288-.408-.888-.6-1.32-.816-.552-.264-.96-.576-1.2-.936s-.36-.888-.36-1.536c-.024-1.44.912-2.472 2.4-2.448m-11.031.018c.711-.006 1.419.198 1.839.63.432.432.672 1.128.648 1.992H9.336c.024-.456-.096-.792-.432-.96-.312-.144-.768-.048-.888.24-.12.264-.192.576-.168.864v3.504c0 .744.264 1.128.768 1.128a.65.65 0 0 0 .552-.264c.168-.24.192-.552.168-.84h1.776c.096 1.632-.984 2.712-2.568 2.688-1.536 0-2.496-.864-2.472-2.472v-4.032c0-.816.24-1.44.696-1.848.432-.408 1.146-.624 1.857-.63" />
+    </svg>
+  ),
+  bash: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path d="M21.038 4.9 13.461.402a2.86 2.86 0 0 0-2.923.001L2.961 4.9A3.023 3.023 0 0 0 1.5 7.503v8.995c0 1.073.557 2.066 1.462 2.603l7.577 4.497a2.86 2.86 0 0 0 2.922 0l7.577-4.497a3.023 3.023 0 0 0 1.462-2.603V7.503A3.021 3.021 0 0 0 21.038 4.9zM15.17 18.946l.013.646c.001.078-.05.167-.111.198l-.383.22c-.061.031-.111-.007-.112-.085l-.007-.635c-.328.136-.66.169-.872.084-.04-.016-.057-.075-.041-.142l.139-.584a.24.24 0 0 1 .069-.121.163.163 0 0 1 .036-.026c.022-.011.043-.014.062-.006.229.077.521.041.802-.101.357-.181.596-.545.592-.907-.003-.328-.181-.465-.613-.468-.55.001-1.064-.107-1.072-.917-.007-.667.34-1.361.889-1.8l-.007-.652c-.001-.08.048-.168.111-.2l.37-.236c.061-.031.111.007.112.087l.006.653c.273-.109.511-.138.726-.088.047.012.067.076.048.151l-.144.578a.255.255 0 0 1-.065.116.161.161 0 0 1-.038.028.083.083 0 0 1-.057.009c-.098-.022-.332-.073-.699.113-.385.195-.52.53-.517.778.003.297.155.387.681.396.7.012 1.003.318 1.01 1.023.007.689-.362 1.433-.928 1.888zm3.973-1.087c0 .06-.008.116-.058.145l-1.916 1.164c-.05.029-.09.004-.09-.056v-.494c0-.06.037-.093.087-.122l1.887-1.129c.05-.029.09-.004.09.056v.436zm1.316-11.062-7.168 4.427c-.894.523-1.553 1.109-1.553 2.187v8.833c0 .645.26 1.063.66 1.184a2.304 2.304 0 0 1-.398.039c-.42 0-.833-.114-1.197-.33L3.226 18.64a2.494 2.494 0 0 1-1.201-2.142V7.503c0-.881.46-1.702 1.201-2.142L10.803.863a2.342 2.342 0 0 1 2.394 0l7.577 4.498a2.479 2.479 0 0 1 1.164 1.732c-.252-.536-.818-.682-1.479-.296z" />
+    </svg>
+  ),
+  v0: (props: IconProps) => (
+    <svg
+      viewBox="0 0 40 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  ),
+}
+
+export function getIconForLanguageExtension(language: string) {
+  switch (language) {
+    case "json":
+      return <Icons.json />
+    case "css":
+      return <Icons.css className="fill-foreground" />
+    case "js":
+    case "jsx":
+    case "ts":
+    case "tsx":
+    case "typescript":
+      return <Icons.ts className="fill-foreground" />
+    default:
+      return <FileIcon />
+  }
+}
diff --git a/apps/v4/components/lo-fi/accordion.tsx b/apps/v4/components/lo-fi/accordion.tsx
new file mode 100644
index 00000000000..cb3c16b3748
--- /dev/null
+++ b/apps/v4/components/lo-fi/accordion.tsx
@@ -0,0 +1,32 @@
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { Atom } from "@/components/lo-fi/atom"
+
+export function AccordionLoFi() {
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-col gap-1 border-b py-2">
+        <div className="flex items-center justify-between">
+          <Atom shade="300" className="h-2 w-1/3" />
+          <ChevronDownIcon className="size-3" />
+        </div>
+      </div>
+      <div className="flex flex-col gap-1 border-b py-2">
+        <div className="flex items-center justify-between">
+          <Atom shade="300" className="h-2 w-1/2" />
+          <ChevronUpIcon className="size-3" />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <Atom shade="200" className="h-2 w-2/3" />
+          <Atom shade="200" className="h-2 w-1/3" />
+        </div>
+      </div>
+      <div className="flex flex-col gap-1 py-2">
+        <div className="flex items-center justify-between">
+          <Atom shade="300" className="h-2 w-2/3" />
+          <ChevronDownIcon className="size-3" />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/components/lo-fi/alert.tsx b/apps/v4/components/lo-fi/alert.tsx
new file mode 100644
index 00000000000..13e44a49162
--- /dev/null
+++ b/apps/v4/components/lo-fi/alert.tsx
@@ -0,0 +1,18 @@
+import { CircleAlertIcon } from "lucide-react"
+
+import { Atom } from "@/components/lo-fi/atom"
+
+export function AlertLoFi() {
+  return (
+    <Atom
+      shade="100"
+      className="rounder-lg flex items-start justify-between gap-2 border p-2"
+    >
+      <CircleAlertIcon className="size-3" />
+      <div className="flex flex-1 flex-col gap-1">
+        <Atom shade="300" className="h-2 w-2/3" />
+        <Atom shade="200" className="h-2 w-full" />
+      </div>
+    </Atom>
+  )
+}
diff --git a/apps/v4/components/lo-fi/atom.tsx b/apps/v4/components/lo-fi/atom.tsx
new file mode 100644
index 00000000000..8952be09809
--- /dev/null
+++ b/apps/v4/components/lo-fi/atom.tsx
@@ -0,0 +1,43 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const atomVariants = cva(
+  "inline-flex rounded-lg border-neutral-300 dark:border-neutral-600",
+  {
+    variants: {
+      shade: {
+        "50": "bg-neutral-50 dark:bg-neutral-900",
+        "100": "bg-neutral-100 dark:bg-neutral-800",
+        "200": "bg-neutral-200 dark:bg-neutral-700",
+        "300": "bg-neutral-300 dark:bg-neutral-600",
+        "400": "bg-neutral-400 dark:bg-neutral-500",
+        "500": "bg-neutral-500 dark:bg-neutral-400",
+        "600": "bg-neutral-600 dark:bg-neutral-300",
+        "700": "bg-neutral-700 dark:bg-neutral-200",
+        "800": "bg-neutral-800 dark:bg-neutral-100",
+        "900": "bg-neutral-900 dark:bg-neutral-50",
+      },
+    },
+    defaultVariants: {
+      shade: "50",
+    },
+  }
+)
+
+function Atom({
+  className,
+  shade,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof atomVariants>) {
+  return (
+    <div
+      data-slot="button"
+      className={cn(atomVariants({ shade, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Atom }
diff --git a/apps/v4/components/lo-fi/component.tsx b/apps/v4/components/lo-fi/component.tsx
new file mode 100644
index 00000000000..54b708ee1be
--- /dev/null
+++ b/apps/v4/components/lo-fi/component.tsx
@@ -0,0 +1,28 @@
+import Link from "next/link"
+
+import { Atom } from "@/components/lo-fi/atom"
+
+function Component({ href, ...props }: React.ComponentProps<typeof Link>) {
+  return <Link href={href} className="group flex flex-col gap-2" {...props} />
+}
+
+function ComponentContent({ ...props }: React.ComponentProps<typeof Atom>) {
+  return (
+    <Atom
+      shade="50"
+      className="bg-muted/30 ring-muted flex aspect-video items-center justify-center rounded-lg p-4 ring *:w-full *:max-w-[70%]"
+      {...props}
+    />
+  )
+}
+
+function ComponentName({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className="text-foreground text-center font-medium underline-offset-2 group-hover:underline"
+      {...props}
+    />
+  )
+}
+
+export { Component, ComponentContent, ComponentName }
diff --git a/apps/v4/components/lo-fi/index.tsx b/apps/v4/components/lo-fi/index.tsx
new file mode 100644
index 00000000000..69429ef8349
--- /dev/null
+++ b/apps/v4/components/lo-fi/index.tsx
@@ -0,0 +1,26 @@
+import { AccordionLoFi } from "@/components/lo-fi/accordion"
+import { AlertLoFi } from "@/components/lo-fi/alert"
+import {
+  Component,
+  ComponentContent,
+  ComponentName,
+} from "@/components/lo-fi/component"
+
+export function LoFi() {
+  return (
+    <div className="mx-auto grid max-w-[350px] gap-6 sm:max-w-none sm:grid-cols-2">
+      <Component href="/docs/components/accordion">
+        <ComponentContent>
+          <AccordionLoFi />
+        </ComponentContent>
+        <ComponentName>Accordion</ComponentName>
+      </Component>
+      <Component href="/docs/components/alert">
+        <ComponentContent>
+          <AlertLoFi />
+        </ComponentContent>
+        <ComponentName>Alert</ComponentName>
+      </Component>
+    </div>
+  )
+}
diff --git a/apps/v4/components/main-nav.tsx b/apps/v4/components/main-nav.tsx
new file mode 100644
index 00000000000..a4fd61dfda3
--- /dev/null
+++ b/apps/v4/components/main-nav.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export function MainNav({
+  items,
+  className,
+  ...props
+}: React.ComponentProps<"nav"> & {
+  items: { href: string; label: string }[]
+}) {
+  const pathname = usePathname()
+
+  return (
+    <nav className={cn("items-center gap-0.5", className)} {...props}>
+      {items.map((item) => (
+        <Button key={item.href} variant="ghost" asChild size="sm">
+          <Link
+            href={item.href}
+            className={cn(pathname === item.href && "text-primary")}
+          >
+            {item.label}
+          </Link>
+        </Button>
+      ))}
+    </nav>
+  )
+}
diff --git a/apps/v4/components/mobile-nav.tsx b/apps/v4/components/mobile-nav.tsx
new file mode 100644
index 00000000000..d28014fb9fc
--- /dev/null
+++ b/apps/v4/components/mobile-nav.tsx
@@ -0,0 +1,182 @@
+"use client"
+
+import * as React from "react"
+import Link, { LinkProps } from "next/link"
+import { useRouter } from "next/navigation"
+
+import { showMcpDocs } from "@/lib/flags"
+import { source } from "@/lib/source"
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+const TOP_LEVEL_SECTIONS = [
+  { name: "Get Started", href: "/docs" },
+  {
+    name: "Components",
+    href: "/docs/components",
+  },
+  {
+    name: "Registry",
+    href: "/docs/registry",
+  },
+  {
+    name: "MCP Server",
+    href: "/docs/mcp",
+  },
+  {
+    name: "Changelog",
+    href: "/docs/changelog",
+  },
+]
+
+export function MobileNav({
+  tree,
+  items,
+  className,
+}: {
+  tree: typeof source.pageTree
+  items: { href: string; label: string }[]
+  className?: string
+}) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          className={cn(
+            "extend-touch-target h-8 touch-manipulation items-center justify-start gap-2.5 !p-0 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 active:bg-transparent dark:hover:bg-transparent",
+            className
+          )}
+        >
+          <div className="relative flex h-8 w-4 items-center justify-center">
+            <div className="relative size-4">
+              <span
+                className={cn(
+                  "bg-foreground absolute left-0 block h-0.5 w-4 transition-all duration-100",
+                  open ? "top-[0.4rem] -rotate-45" : "top-1"
+                )}
+              />
+              <span
+                className={cn(
+                  "bg-foreground absolute left-0 block h-0.5 w-4 transition-all duration-100",
+                  open ? "top-[0.4rem] rotate-45" : "top-2.5"
+                )}
+              />
+            </div>
+            <span className="sr-only">Toggle Menu</span>
+          </div>
+          <span className="flex h-8 items-center text-lg leading-none font-medium">
+            Menu
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="bg-background/90 no-scrollbar h-(--radix-popper-available-height) w-(--radix-popper-available-width) overflow-y-auto rounded-none border-none p-0 shadow-none backdrop-blur duration-100"
+        align="start"
+        side="bottom"
+        alignOffset={-16}
+        sideOffset={14}
+      >
+        <div className="flex flex-col gap-12 overflow-auto px-6 py-6">
+          <div className="flex flex-col gap-4">
+            <div className="text-muted-foreground text-sm font-medium">
+              Menu
+            </div>
+            <div className="flex flex-col gap-3">
+              <MobileLink href="/" onOpenChange={setOpen}>
+                Home
+              </MobileLink>
+              {items.map((item, index) => (
+                <MobileLink key={index} href={item.href} onOpenChange={setOpen}>
+                  {item.label}
+                </MobileLink>
+              ))}
+            </div>
+          </div>
+          <div className="flex flex-col gap-4">
+            <div className="text-muted-foreground text-sm font-medium">
+              Sections
+            </div>
+            <div className="flex flex-col gap-3">
+              {TOP_LEVEL_SECTIONS.map(({ name, href }) => {
+                if (!showMcpDocs && href.includes("/mcp")) {
+                  return null
+                }
+                return (
+                  <MobileLink key={name} href={href} onOpenChange={setOpen}>
+                    {name}
+                  </MobileLink>
+                )
+              })}
+            </div>
+          </div>
+          <div className="flex flex-col gap-8">
+            {tree?.children?.map((group, index) => {
+              if (group.type === "folder") {
+                return (
+                  <div key={index} className="flex flex-col gap-4">
+                    <div className="text-muted-foreground text-sm font-medium">
+                      {group.name}
+                    </div>
+                    <div className="flex flex-col gap-3">
+                      {group.children.map((item) => {
+                        if (item.type === "page") {
+                          if (!showMcpDocs && item.url.includes("/mcp")) {
+                            return null
+                          }
+                          return (
+                            <MobileLink
+                              key={`${item.url}-${index}`}
+                              href={item.url}
+                              onOpenChange={setOpen}
+                            >
+                              {item.name}
+                            </MobileLink>
+                          )
+                        }
+                      })}
+                    </div>
+                  </div>
+                )
+              }
+            })}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function MobileLink({
+  href,
+  onOpenChange,
+  className,
+  children,
+  ...props
+}: LinkProps & {
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
+  className?: string
+}) {
+  const router = useRouter()
+  return (
+    <Link
+      href={href}
+      onClick={() => {
+        router.push(href.toString())
+        onOpenChange?.(false)
+      }}
+      className={cn("text-2xl font-medium", className)}
+      {...props}
+    >
+      {children}
+    </Link>
+  )
+}
diff --git a/apps/v4/components/mode-switcher.tsx b/apps/v4/components/mode-switcher.tsx
new file mode 100644
index 00000000000..d603805076a
--- /dev/null
+++ b/apps/v4/components/mode-switcher.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { useMetaColor } from "@/hooks/use-meta-color"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export function ModeSwitcher() {
+  const { setTheme, resolvedTheme } = useTheme()
+  const { setMetaColor, metaColor } = useMetaColor()
+
+  React.useEffect(() => {
+    setMetaColor(metaColor)
+  }, [metaColor, setMetaColor])
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+  }, [resolvedTheme, setTheme])
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="group/toggle extend-touch-target size-8"
+      onClick={toggleTheme}
+      title="Toggle theme"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4.5"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+        <path d="M12 3l0 18" />
+        <path d="M12 9l4.65 -4.65" />
+        <path d="M12 14.3l7.37 -7.37" />
+        <path d="M12 19.6l8.85 -8.85" />
+      </svg>
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
diff --git a/apps/v4/components/nav-header.tsx b/apps/v4/components/nav-header.tsx
new file mode 100644
index 00000000000..9da0c250c13
--- /dev/null
+++ b/apps/v4/components/nav-header.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+} from "@/registry/new-york-v4/ui/navigation-menu"
+
+export function NavHeader() {
+  const pathname = usePathname()
+
+  return (
+    <NavigationMenu className="hidden sm:flex">
+      <NavigationMenuList className="gap-2 *:data-[slot=navigation-menu-item]:h-7 **:data-[slot=navigation-menu-link]:py-1 **:data-[slot=navigation-menu-link]:font-medium">
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild data-active={pathname === "/"}>
+            <Link href="/">Home</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild data-active={pathname === "/charts"}>
+            <Link href="/charts">Charts</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild data-active={pathname === "/forms"}>
+            <Link href="/forms">Forms</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
diff --git a/apps/v4/components/nav-user.tsx b/apps/v4/components/nav-user.tsx
new file mode 100644
index 00000000000..9d751fbf267
--- /dev/null
+++ b/apps/v4/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/components/open-in-v0-button.tsx b/apps/v4/components/open-in-v0-button.tsx
new file mode 100644
index 00000000000..94e0b2b691d
--- /dev/null
+++ b/apps/v4/components/open-in-v0-button.tsx
@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils"
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+// v0 uses the default style.
+const V0_STYLE = "new-york-v4"
+
+export function OpenInV0Button({
+  name,
+  className,
+  ...props
+}: React.ComponentProps<typeof Button> & {
+  name: string
+}) {
+  return (
+    <Button
+      size="sm"
+      asChild
+      className={cn("h-[1.8rem] gap-1", className)}
+      {...props}
+    >
+      <a
+        href={`${process.env.NEXT_PUBLIC_V0_URL}/chat/api/open?url=${process.env.NEXT_PUBLIC_APP_URL}/r/styles/${V0_STYLE}/${name}.json`}
+        target="_blank"
+      >
+        Open in <Icons.v0 className="size-5" />
+      </a>
+    </Button>
+  )
+}
diff --git a/apps/v4/components/open-in-v0-cta.tsx b/apps/v4/components/open-in-v0-cta.tsx
new file mode 100644
index 00000000000..de5529be0cf
--- /dev/null
+++ b/apps/v4/components/open-in-v0-cta.tsx
@@ -0,0 +1,35 @@
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export function OpenInV0Cta({ className }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "group bg-surface text-surface-foreground relative flex flex-col gap-2 rounded-lg p-6 text-sm",
+        className
+      )}
+    >
+      <div className="text-base leading-tight font-semibold text-balance group-hover:underline">
+        Deploy your shadcn/ui app on Vercel
+      </div>
+      <div className="text-muted-foreground">
+        Trusted by OpenAI, Sonos, Adobe, and more.
+      </div>
+      <div className="text-muted-foreground">
+        Vercel provides tools and infrastructure to deploy apps and features at
+        scale.
+      </div>
+      <Button size="sm" className="mt-2 w-fit">
+        Deploy Now
+      </Button>
+      <a
+        href="https://vercel.com/new?utm_source=shadcn_site&utm_medium=web&utm_campaign=docs_cta_deploy_now_callout"
+        target="_blank"
+        rel="noreferrer"
+        className="absolute inset-0"
+      >
+        <span className="sr-only">Deploy to Vercel</span>
+      </a>
+    </div>
+  )
+}
diff --git a/apps/v4/components/page-header.tsx b/apps/v4/components/page-header.tsx
new file mode 100644
index 00000000000..f50c0cd56c6
--- /dev/null
+++ b/apps/v4/components/page-header.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@/lib/utils"
+
+function PageHeader({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"section">) {
+  return (
+    <section className={cn("border-grid", className)} {...props}>
+      <div className="container-wrapper">
+        <div className="container flex flex-col items-center gap-2 py-8 text-center md:py-16 lg:py-20 xl:gap-4">
+          {children}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function PageHeaderHeading({
+  className,
+  ...props
+}: React.ComponentProps<"h1">) {
+  return (
+    <h1
+      className={cn(
+        "text-primary leading-tighter max-w-2xl text-4xl font-semibold tracking-tight text-balance lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PageHeaderDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      className={cn(
+        "text-foreground max-w-3xl text-base text-balance sm:text-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PageActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center justify-center gap-2 pt-2 **:data-[slot=button]:shadow-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { PageActions, PageHeader, PageHeaderDescription, PageHeaderHeading }
diff --git a/apps/v4/components/page-nav.tsx b/apps/v4/components/page-nav.tsx
new file mode 100644
index 00000000000..8aa378a62eb
--- /dev/null
+++ b/apps/v4/components/page-nav.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+export function PageNav({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("container-wrapper scroll-mt-24", className)} {...props}>
+      <div className="container flex items-center justify-between gap-4 py-4">
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/components/site-config.tsx b/apps/v4/components/site-config.tsx
new file mode 100644
index 00000000000..4784288256c
--- /dev/null
+++ b/apps/v4/components/site-config.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { GalleryHorizontalIcon } from "lucide-react"
+
+import { trackEvent } from "@/lib/events"
+import { cn } from "@/lib/utils"
+import { useLayout } from "@/hooks/use-layout"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export function SiteConfig({ className }: React.ComponentProps<typeof Button>) {
+  const { layout, setLayout } = useLayout()
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => {
+        const newLayout = layout === "fixed" ? "full" : "fixed"
+        setLayout(newLayout)
+        trackEvent({
+          name: "set_layout",
+          properties: { layout: newLayout },
+        })
+      }}
+      className={cn("size-8", className)}
+      title="Toggle layout"
+    >
+      <span className="sr-only">Toggle layout</span>
+      <GalleryHorizontalIcon />
+    </Button>
+  )
+}
diff --git a/apps/v4/components/site-footer.tsx b/apps/v4/components/site-footer.tsx
new file mode 100644
index 00000000000..2ed63943edf
--- /dev/null
+++ b/apps/v4/components/site-footer.tsx
@@ -0,0 +1,42 @@
+import { siteConfig } from "@/lib/config"
+
+export function SiteFooter() {
+  return (
+    <footer className="group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent group-has-[.docs-nav]/body:pb-20 group-has-[.docs-nav]/body:sm:pb-0 dark:bg-transparent">
+      <div className="container-wrapper px-4 xl:px-6">
+        <div className="flex h-(--footer-height) items-center justify-between">
+          <div className="text-muted-foreground w-full px-1 text-center text-xs leading-loose sm:text-sm">
+            Built by{" "}
+            <a
+              href={siteConfig.links.twitter}
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              shadcn
+            </a>{" "}
+            at{" "}
+            <a
+              href="https://vercel.com/new?utm_source=shadcn_site&utm_medium=web&utm_campaign=docs_cta_deploy_now_callout"
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              Vercel
+            </a>
+            . The source code is available on{" "}
+            <a
+              href={siteConfig.links.github}
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              GitHub
+            </a>
+            .
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
diff --git a/apps/v4/components/site-header.tsx b/apps/v4/components/site-header.tsx
new file mode 100644
index 00000000000..45654b12588
--- /dev/null
+++ b/apps/v4/components/site-header.tsx
@@ -0,0 +1,64 @@
+import Link from "next/link"
+
+import { getColors } from "@/lib/colors"
+import { siteConfig } from "@/lib/config"
+import { source } from "@/lib/source"
+import { CommandMenu } from "@/components/command-menu"
+import { GitHubLink } from "@/components/github-link"
+import { Icons } from "@/components/icons"
+import { MainNav } from "@/components/main-nav"
+import { MobileNav } from "@/components/mobile-nav"
+import { ModeSwitcher } from "@/components/mode-switcher"
+import { SiteConfig } from "@/components/site-config"
+// import blocks from "@/registry/__blocks__.json"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+export function SiteHeader() {
+  const colors = getColors()
+  const pageTree = source.pageTree
+
+  return (
+    <header className="bg-background sticky top-0 z-50 w-full">
+      <div className="container-wrapper 3xl:fixed:px-0 px-6">
+        <div className="3xl:fixed:container flex h-(--header-height) items-center gap-2 **:data-[slot=separator]:!h-4">
+          <MobileNav
+            tree={pageTree}
+            items={siteConfig.navItems}
+            className="flex lg:hidden"
+          />
+          <Button
+            asChild
+            variant="ghost"
+            size="icon"
+            className="hidden size-8 lg:flex"
+          >
+            <Link href="/">
+              <Icons.logo className="size-5" />
+              <span className="sr-only">{siteConfig.name}</span>
+            </Link>
+          </Button>
+          <MainNav items={siteConfig.navItems} className="hidden lg:flex" />
+          <div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
+            <div className="hidden w-full flex-1 md:flex md:w-auto md:flex-none">
+              <CommandMenu
+                tree={pageTree}
+                colors={colors}
+                navItems={siteConfig.navItems}
+              />
+            </div>
+            <Separator
+              orientation="vertical"
+              className="ml-2 hidden lg:block"
+            />
+            <GitHubLink />
+            <Separator orientation="vertical" className="3xl:flex hidden" />
+            <SiteConfig className="3xl:flex hidden" />
+            <Separator orientation="vertical" />
+            <ModeSwitcher />
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/apps/v4/components/tailwind-indicator.tsx b/apps/v4/components/tailwind-indicator.tsx
new file mode 100644
index 00000000000..3e3aec6c9c8
--- /dev/null
+++ b/apps/v4/components/tailwind-indicator.tsx
@@ -0,0 +1,21 @@
+const SHOW = false
+
+export function TailwindIndicator() {
+  if (process.env.NODE_ENV === "production" || !SHOW) {
+    return null
+  }
+
+  return (
+    <div
+      data-tailwind-indicator=""
+      className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"
+    >
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden">sm</div>
+      <div className="hidden md:block lg:hidden">md</div>
+      <div className="hidden lg:block xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  )
+}
diff --git a/apps/v4/components/theme-customizer.tsx b/apps/v4/components/theme-customizer.tsx
new file mode 100644
index 00000000000..d3e55be2f14
--- /dev/null
+++ b/apps/v4/components/theme-customizer.tsx
@@ -0,0 +1,569 @@
+"use client"
+
+import * as React from "react"
+import template from "lodash/template"
+import { CheckIcon, ClipboardIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { useThemeConfig } from "@/components/active-theme"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york-v4/ui/dialog"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { ScrollArea, ScrollBar } from "@/registry/new-york-v4/ui/scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+import {
+  BaseColor,
+  baseColors,
+  baseColorsOKLCH,
+} from "@/registry/registry-base-colors"
+
+interface BaseColorOKLCH {
+  light: Record<string, string>
+  dark: Record<string, string>
+}
+
+const THEMES = baseColors.filter(
+  (theme) => !["slate", "stone", "gray", "zinc"].includes(theme.name)
+)
+
+export function ThemeCustomizer({ className }: React.ComponentProps<"div">) {
+  const { activeTheme = "neutral", setActiveTheme } = useThemeConfig()
+
+  return (
+    <div className={cn("flex w-full items-center gap-2", className)}>
+      <ScrollArea className="hidden max-w-[96%] md:max-w-[600px] lg:flex lg:max-w-none">
+        <div className="flex items-center">
+          {THEMES.map((theme) => (
+            <Button
+              key={theme.name}
+              variant="link"
+              size="sm"
+              data-active={activeTheme === theme.name}
+              className="text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 cursor-pointer items-center justify-center px-4 text-center text-base font-medium capitalize transition-colors hover:no-underline"
+              onClick={() => setActiveTheme(theme.name)}
+            >
+              {theme.name === "neutral" ? "Default" : theme.name}
+            </Button>
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" className="invisible" />
+      </ScrollArea>
+      <div className="flex items-center gap-2 lg:hidden">
+        <Label htmlFor="theme-selector" className="sr-only">
+          Theme
+        </Label>
+        <Select
+          value={activeTheme === "default" ? "neutral" : activeTheme}
+          onValueChange={setActiveTheme}
+        >
+          <SelectTrigger
+            id="theme-selector"
+            size="sm"
+            className="justify-start capitalize shadow-none *:data-[slot=select-value]:w-12 *:data-[slot=select-value]:capitalize"
+          >
+            <span className="font-medium">Theme:</span>
+            <SelectValue placeholder="Select a theme" />
+          </SelectTrigger>
+          <SelectContent align="end">
+            <SelectGroup>
+              {THEMES.map((theme) => (
+                <SelectItem
+                  key={theme.name}
+                  value={theme.name}
+                  className="capitalize data-[state=checked]:opacity-50"
+                >
+                  {theme.name}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+      <CopyCodeButton variant="secondary" size="sm" className="ml-auto" />
+    </div>
+  )
+}
+
+export function CopyCodeButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  let { activeTheme: activeThemeName = "neutral" } = useThemeConfig()
+  activeThemeName = activeThemeName === "default" ? "neutral" : activeThemeName
+
+  return (
+    <>
+      <Drawer>
+        <DrawerTrigger asChild>
+          <Button className={cn("sm:hidden", className)} {...props}>
+            Copy Code
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="h-auto">
+          <DrawerHeader>
+            <DrawerTitle className="capitalize">
+              {activeThemeName === "neutral" ? "Default" : activeThemeName}
+            </DrawerTitle>
+            <DrawerDescription>
+              Copy and paste the following code into your CSS file.
+            </DrawerDescription>
+          </DrawerHeader>
+          <CustomizerCode themeName={activeThemeName} />
+        </DrawerContent>
+      </Drawer>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button className={cn("hidden sm:flex", className)} {...props}>
+            Copy Code
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="outline-none md:max-w-3xl">
+          <DialogHeader>
+            <DialogTitle className="capitalize">
+              {activeThemeName === "neutral" ? "Default" : activeThemeName}
+            </DialogTitle>
+            <DialogDescription>
+              Copy and paste the following code into your CSS file.
+            </DialogDescription>
+          </DialogHeader>
+          <CustomizerCode themeName={activeThemeName} />
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+function CustomizerCode({ themeName }: { themeName: string }) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+  const [tailwindVersion, setTailwindVersion] = React.useState("v4")
+  const activeTheme = React.useMemo(
+    () => baseColors.find((theme) => theme.name === themeName),
+    [themeName]
+  )
+  const activeThemeOKLCH = React.useMemo(
+    () => baseColorsOKLCH[themeName as keyof typeof baseColorsOKLCH],
+    [themeName]
+  )
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      setTimeout(() => {
+        setHasCopied(false)
+      }, 2000)
+    }
+  }, [hasCopied])
+
+  return (
+    <>
+      <Tabs
+        value={tailwindVersion}
+        onValueChange={setTailwindVersion}
+        className="min-w-0 px-4 pb-4 md:p-0"
+      >
+        <TabsList>
+          <TabsTrigger value="v4">Tailwind v4</TabsTrigger>
+          <TabsTrigger value="v3">Tailwind v3</TabsTrigger>
+        </TabsList>
+        <TabsContent value="v4">
+          <figure
+            data-rehype-pretty-code-figure
+            className="!mx-0 mt-0 rounded-lg"
+          >
+            <figcaption
+              className="text-code-foreground [&_svg]:text-code-foreground flex items-center gap-2 [&_svg]:size-4 [&_svg]:opacity-70"
+              data-rehype-pretty-code-title=""
+              data-language="css"
+              data-theme="github-dark github-light-default"
+            >
+              <Icons.css className="fill-foreground" />
+              app/globals.css
+            </figcaption>
+            <pre className="no-scrollbar max-h-[300px] min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0 has-[[data-slot=tabs]]:p-0 md:max-h-[450px]">
+              <Button
+                data-slot="copy-button"
+                size="icon"
+                variant="ghost"
+                className="bg-code text-code-foreground absolute top-3 right-2 z-10 size-7 shadow-none hover:opacity-100 focus-visible:opacity-100"
+                onClick={() => {
+                  copyToClipboardWithMeta(
+                    tailwindVersion === "v3"
+                      ? getThemeCode(activeTheme, 0.65)
+                      : getThemeCodeOKLCH(activeThemeOKLCH, 0.65),
+                    {
+                      name: "copy_theme_code",
+                      properties: {
+                        theme: themeName,
+                        radius: 0.5,
+                      },
+                    }
+                  )
+                  setHasCopied(true)
+                }}
+              >
+                <span className="sr-only">Copy</span>
+                {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+              </Button>
+              <code data-line-numbers data-language="css">
+                <span data-line className="line text-code-foreground">
+                  &nbsp;:root &#123;
+                </span>
+                <span data-line className="line text-code-foreground">
+                  &nbsp;&nbsp;&nbsp;--radius: 0.65rem;
+                </span>
+                {Object.entries(activeThemeOKLCH?.light).map(([key, value]) => (
+                  <span
+                    data-line
+                    className="line text-code-foreground"
+                    key={key}
+                  >
+                    &nbsp;&nbsp;&nbsp;--{key}: {value};
+                  </span>
+                ))}
+                <span data-line className="line text-code-foreground">
+                  &nbsp;&#125;
+                </span>
+                <span data-line className="line text-code-foreground">
+                  &nbsp;
+                </span>
+                <span data-line className="line text-code-foreground">
+                  &nbsp;.dark &#123;
+                </span>
+                {Object.entries(activeThemeOKLCH?.dark).map(([key, value]) => (
+                  <span
+                    data-line
+                    className="line text-code-foreground"
+                    key={key}
+                  >
+                    &nbsp;&nbsp;&nbsp;--{key}: {value};
+                  </span>
+                ))}
+                <span data-line className="line text-code-foreground">
+                  &nbsp;&#125;
+                </span>
+              </code>
+            </pre>
+          </figure>
+        </TabsContent>
+        <TabsContent value="v3">
+          <figure
+            data-rehype-pretty-code-figure
+            className="!mx-0 mt-0 rounded-lg"
+          >
+            <figcaption
+              className="text-code-foreground [&_svg]:text-code-foreground flex items-center gap-2 [&_svg]:size-4 [&_svg]:opacity-70"
+              data-rehype-pretty-code-title=""
+              data-language="css"
+              data-theme="github-dark github-light-default"
+            >
+              <Icons.css className="fill-foreground" />
+              app/globals.css
+            </figcaption>
+            <pre className="no-scrollbar max-h-[300px] min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0 has-[[data-slot=tabs]]:p-0 md:max-h-[450px]">
+              <Button
+                data-slot="copy-button"
+                size="icon"
+                variant="ghost"
+                className="bg-code text-code-foreground absolute top-3 right-2 z-10 size-7 shadow-none hover:opacity-100 focus-visible:opacity-100"
+                onClick={() => {
+                  copyToClipboardWithMeta(
+                    tailwindVersion === "v3"
+                      ? getThemeCode(activeTheme, 0.65)
+                      : getThemeCodeOKLCH(activeThemeOKLCH, 0.65),
+                    {
+                      name: "copy_theme_code",
+                      properties: {
+                        theme: themeName,
+                        radius: 0.5,
+                      },
+                    }
+                  )
+                  setHasCopied(true)
+                }}
+              >
+                <span className="sr-only">Copy</span>
+                {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+              </Button>
+              <code data-line-numbers data-language="css">
+                <span data-line className="line">
+                  @layer base &#123;
+                </span>
+                <span data-line className="line">
+                  &nbsp;&nbsp;:root &#123;
+                </span>
+                <span data-line className="line">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--background:{" "}
+                  {activeTheme?.cssVars.light["background"]};
+                </span>
+                <span data-line className="line">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--foreground:{" "}
+                  {activeTheme?.cssVars.light["foreground"]};
+                </span>
+                {[
+                  "card",
+                  "popover",
+                  "primary",
+                  "secondary",
+                  "muted",
+                  "accent",
+                  "destructive",
+                ].map((prefix) => (
+                  <React.Fragment key={prefix}>
+                    <span data-line className="line">
+                      &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                      {
+                        activeTheme?.cssVars.light[
+                          prefix as keyof typeof activeTheme.cssVars.light
+                        ]
+                      }
+                      ;
+                    </span>
+                    <span data-line className="line">
+                      &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}-foreground:{" "}
+                      {
+                        activeTheme?.cssVars.light[
+                          `${prefix}-foreground` as keyof typeof activeTheme.cssVars.light
+                        ]
+                      }
+                      ;
+                    </span>
+                  </React.Fragment>
+                ))}
+                <span data-line className="line">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--border:{" "}
+                  {activeTheme?.cssVars.light["border"]};
+                </span>
+                <span data-line className="line">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--input:{" "}
+                  {activeTheme?.cssVars.light["input"]};
+                </span>
+                <span data-line className="line">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
+                  {activeTheme?.cssVars.light["ring"]};
+                </span>
+                <span data-line className="line">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--radius: 0.5rem;
+                </span>
+                {["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
+                  (prefix) => (
+                    <React.Fragment key={prefix}>
+                      <span data-line className="line">
+                        &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                        {
+                          activeTheme?.cssVars.light[
+                            prefix as keyof typeof activeTheme.cssVars.light
+                          ]
+                        }
+                        ;
+                      </span>
+                    </React.Fragment>
+                  )
+                )}
+                <span data-line className="line">
+                  &nbsp;&nbsp;&#125;
+                </span>
+                <span data-line className="line">
+                  &nbsp;
+                </span>
+                <span data-line className="line">
+                  &nbsp;&nbsp;.dark &#123;
+                </span>
+                <span data-line className="line">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--background:{" "}
+                  {activeTheme?.cssVars.dark["background"]};
+                </span>
+                <span data-line className="line">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--foreground:{" "}
+                  {activeTheme?.cssVars.dark["foreground"]};
+                </span>
+                {[
+                  "card",
+                  "popover",
+                  "primary",
+                  "secondary",
+                  "muted",
+                  "accent",
+                  "destructive",
+                ].map((prefix) => (
+                  <React.Fragment key={prefix}>
+                    <span data-line className="line">
+                      &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                      {
+                        activeTheme?.cssVars.dark[
+                          prefix as keyof typeof activeTheme.cssVars.dark
+                        ]
+                      }
+                      ;
+                    </span>
+                    <span data-line className="line">
+                      &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}-foreground:{" "}
+                      {
+                        activeTheme?.cssVars.dark[
+                          `${prefix}-foreground` as keyof typeof activeTheme.cssVars.dark
+                        ]
+                      }
+                      ;
+                    </span>
+                  </React.Fragment>
+                ))}
+                <span data-line className="line">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--border:{" "}
+                  {activeTheme?.cssVars.dark["border"]};
+                </span>
+                <span data-line className="line">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--input:{" "}
+                  {activeTheme?.cssVars.dark["input"]};
+                </span>
+                <span data-line className="line">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
+                  {activeTheme?.cssVars.dark["ring"]};
+                </span>
+                {["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
+                  (prefix) => (
+                    <React.Fragment key={prefix}>
+                      <span data-line className="line">
+                        &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                        {
+                          activeTheme?.cssVars.dark[
+                            prefix as keyof typeof activeTheme.cssVars.dark
+                          ]
+                        }
+                        ;
+                      </span>
+                    </React.Fragment>
+                  )
+                )}
+                <span data-line className="line">
+                  &nbsp;&nbsp;&#125;
+                </span>
+                <span data-line className="line">
+                  &#125;
+                </span>
+              </code>
+            </pre>
+          </figure>
+        </TabsContent>
+      </Tabs>
+    </>
+  )
+}
+
+function getThemeCodeOKLCH(theme: BaseColorOKLCH | undefined, radius: number) {
+  if (!theme) {
+    return ""
+  }
+
+  const rootSection =
+    ":root {\n  --radius: " +
+    radius +
+    "rem;\n" +
+    Object.entries(theme.light)
+      .map((entry) => "  --" + entry[0] + ": " + entry[1] + ";")
+      .join("\n") +
+    "\n}\n\n.dark {\n" +
+    Object.entries(theme.dark)
+      .map((entry) => "  --" + entry[0] + ": " + entry[1] + ";")
+      .join("\n") +
+    "\n}\n"
+
+  return rootSection
+}
+
+function getThemeCode(theme: BaseColor | undefined, radius: number) {
+  if (!theme) {
+    return ""
+  }
+
+  return template(BASE_STYLES_WITH_VARIABLES)({
+    colors: theme.cssVars,
+    radius: radius.toString(),
+  })
+}
+
+const BASE_STYLES_WITH_VARIABLES = `
+@layer base {
+  :root {
+    --background: <%- colors.light["background"] %>;
+    --foreground: <%- colors.light["foreground"] %>;
+    --card: <%- colors.light["card"] %>;
+    --card-foreground: <%- colors.light["card-foreground"] %>;
+    --popover: <%- colors.light["popover"] %>;
+    --popover-foreground: <%- colors.light["popover-foreground"] %>;
+    --primary: <%- colors.light["primary"] %>;
+    --primary-foreground: <%- colors.light["primary-foreground"] %>;
+    --secondary: <%- colors.light["secondary"] %>;
+    --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
+    --muted: <%- colors.light["muted"] %>;
+    --muted-foreground: <%- colors.light["muted-foreground"] %>;
+    --accent: <%- colors.light["accent"] %>;
+    --accent-foreground: <%- colors.light["accent-foreground"] %>;
+    --destructive: <%- colors.light["destructive"] %>;
+    --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
+    --border: <%- colors.light["border"] %>;
+    --input: <%- colors.light["input"] %>;
+    --ring: <%- colors.light["ring"] %>;
+    --radius: <%- radius %>rem;
+    --chart-1: <%- colors.light["chart-1"] %>;
+    --chart-2: <%- colors.light["chart-2"] %>;
+    --chart-3: <%- colors.light["chart-3"] %>;
+    --chart-4: <%- colors.light["chart-4"] %>;
+    --chart-5: <%- colors.light["chart-5"] %>;
+  }
+
+  .dark {
+    --background: <%- colors.dark["background"] %>;
+    --foreground: <%- colors.dark["foreground"] %>;
+    --card: <%- colors.dark["card"] %>;
+    --card-foreground: <%- colors.dark["card-foreground"] %>;
+    --popover: <%- colors.dark["popover"] %>;
+    --popover-foreground: <%- colors.dark["popover-foreground"] %>;
+    --primary: <%- colors.dark["primary"] %>;
+    --primary-foreground: <%- colors.dark["primary-foreground"] %>;
+    --secondary: <%- colors.dark["secondary"] %>;
+    --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
+    --muted: <%- colors.dark["muted"] %>;
+    --muted-foreground: <%- colors.dark["muted-foreground"] %>;
+    --accent: <%- colors.dark["accent"] %>;
+    --accent-foreground: <%- colors.dark["accent-foreground"] %>;
+    --destructive: <%- colors.dark["destructive"] %>;
+    --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
+    --border: <%- colors.dark["border"] %>;
+    --input: <%- colors.dark["input"] %>;
+    --ring: <%- colors.dark["ring"] %>;
+    --chart-1: <%- colors.dark["chart-1"] %>;
+    --chart-2: <%- colors.dark["chart-2"] %>;
+    --chart-3: <%- colors.dark["chart-3"] %>;
+    --chart-4: <%- colors.dark["chart-4"] %>;
+    --chart-5: <%- colors.dark["chart-5"] %>;
+  }
+}
+`
diff --git a/apps/v4/components/theme-provider.tsx b/apps/v4/components/theme-provider.tsx
new file mode 100644
index 00000000000..27a68f97950
--- /dev/null
+++ b/apps/v4/components/theme-provider.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      enableColorScheme
+      {...props}
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}
diff --git a/apps/v4/components/theme-selector.tsx b/apps/v4/components/theme-selector.tsx
new file mode 100644
index 00000000000..99127490aa5
--- /dev/null
+++ b/apps/v4/components/theme-selector.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { useThemeConfig } from "@/components/active-theme"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+const DEFAULT_THEMES = [
+  {
+    name: "Default",
+    value: "default",
+  },
+  {
+    name: "Scaled",
+    value: "scaled",
+  },
+  {
+    name: "Mono",
+    value: "mono",
+  },
+]
+
+const COLOR_THEMES = [
+  {
+    name: "Blue",
+    value: "blue",
+  },
+  {
+    name: "Green",
+    value: "green",
+  },
+  {
+    name: "Amber",
+    value: "amber",
+  },
+  {
+    name: "Rose",
+    value: "rose",
+  },
+  {
+    name: "Purple",
+    value: "purple",
+  },
+  {
+    name: "Orange",
+    value: "orange",
+  },
+  {
+    name: "Teal",
+    value: "teal",
+  },
+]
+
+export function ThemeSelector({ className }: React.ComponentProps<"div">) {
+  const { activeTheme, setActiveTheme } = useThemeConfig()
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <Label htmlFor="theme-selector" className="sr-only">
+        Theme
+      </Label>
+      <Select value={activeTheme} onValueChange={setActiveTheme}>
+        <SelectTrigger
+          id="theme-selector"
+          size="sm"
+          className="bg-secondary text-secondary-foreground border-secondary justify-start shadow-none *:data-[slot=select-value]:w-12"
+        >
+          <span className="font-medium">Theme:</span>
+          <SelectValue placeholder="Select a theme" />
+        </SelectTrigger>
+        <SelectContent align="end">
+          <SelectGroup>
+            {DEFAULT_THEMES.map((theme) => (
+              <SelectItem
+                key={theme.name}
+                value={theme.value}
+                className="data-[state=checked]:opacity-50"
+              >
+                {theme.name}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>Colors</SelectLabel>
+            {COLOR_THEMES.map((theme) => (
+              <SelectItem
+                key={theme.name}
+                value={theme.value}
+                className="data-[state=checked]:opacity-50"
+              >
+                {theme.name}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/apps/v4/content/docs/(root)/about.mdx b/apps/v4/content/docs/(root)/about.mdx
new file mode 100644
index 00000000000..ab523185c5b
--- /dev/null
+++ b/apps/v4/content/docs/(root)/about.mdx
@@ -0,0 +1,20 @@
+---
+title: About
+description: Powered by amazing open source projects.
+---
+
+## About
+
+[ui.shadcn.com](https://ui.shadcn.com) is a project by [shadcn](https://shadcn.com).
+
+## Credits
+
+- [Radix UI](https://radix-ui.com) - For the primitives.
+- [Vercel](https://vercel.com) - Where I host all my projects.
+- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
+- [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`.
+- [cmdk](https://cmdk.paco.me) - For the `<Command />` component.
+
+## License
+
+MIT © [shadcn](https://shadcn.com)
diff --git a/apps/v4/content/docs/(root)/blocks.mdx b/apps/v4/content/docs/(root)/blocks.mdx
new file mode 100644
index 00000000000..8547cd72367
--- /dev/null
+++ b/apps/v4/content/docs/(root)/blocks.mdx
@@ -0,0 +1,238 @@
+---
+title: Blocks
+description: Contribute components to the blocks library.
+---
+
+We are inviting the community to contribute to the [blocks library](/blocks). Share your components and blocks with other developers and help build a library of high-quality, reusable components.
+
+We'd love to see all types of blocks: applications, marketing, products, and more.
+
+## Setup your workspace
+
+<Steps>
+
+### Fork the repository
+
+```bash
+git clone https://github.com/shadcn-ui/ui.git
+```
+
+### Create a new branch
+
+```bash
+git checkout -b username/my-new-block
+```
+
+### Install dependencies
+
+```bash
+pnpm install
+```
+
+### Start the dev server
+
+```bash
+pnpm www:dev
+```
+
+</Steps>
+
+## Add a block
+
+A block can be a single component (eg. a variation of a ui component) or a complex component (eg. a dashboard) with multiple components, hooks, and utils.
+
+<Steps>
+
+### Create a new block
+
+Create a new folder in the `apps/www/registry/new-york/blocks` directory. Make sure the folder is named in kebab-case and under `new-york`.
+
+```txt
+apps
+└── www
+    └── registry
+        └── new-york
+            └── blocks
+                └── dashboard-01
+```
+
+<Callout className="mt-6">
+
+**Note:** The build script will take care of building the block for the `default` style.
+
+</Callout>
+
+### Add your block files
+
+Add your files to the block folder. Here is an example of a block with a page, components, hooks, and utils.
+
+```txt
+dashboard-01
+└── page.tsx
+└── components
+    └── hello-world.tsx
+    └── example-card.tsx
+└── hooks
+    └── use-hello-world.ts
+└── lib
+    └── format-date.ts
+```
+
+<Callout className="mt-6">
+
+**Note:** You can start with one file and add more files later.
+
+</Callout>
+
+</Steps>
+
+## Add your block to the registry
+
+<Steps>
+
+### Add your block definition to `registry-blocks.tsx`
+
+To add your block to the registry, you need to add your block definition to `registry-blocks.ts`.
+
+This follows the registry schema at [https://ui.shadcn.com/schema/registry-item.json](https://ui.shadcn.com/schema/registry-item.json).
+
+```tsx title="apps/www/registry/registry-blocks.tsx" showLineNumbers
+export const blocks = [
+  // ...
+  {
+    name: "dashboard-01",
+    author: "shadcn (https://ui.shadcn.com)",
+    title: "Dashboard",
+    description: "A simple dashboard with a hello world component.",
+    type: "registry:block",
+    registryDependencies: ["input", "button", "card"],
+    dependencies: ["zod"],
+    files: [
+      {
+        path: "blocks/dashboard-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/dashboard-01/components/hello-world.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/example-card.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/hooks/use-hello-world.ts",
+        type: "registry:hook",
+      },
+      {
+        path: "blocks/dashboard-01/lib/format-date.ts",
+        type: "registry:lib",
+      },
+    ],
+    categories: ["dashboard"],
+  },
+]
+```
+
+Make sure you add a name, description, type, registryDependencies, dependencies, files, and categories. We'll go over each of these in more detail in the schema docs (coming soon).
+
+### Run the build script
+
+```bash
+pnpm registry:build
+```
+
+<Callout className="mt-6">
+
+**Note:** you do not need to run this script for every change. You only need to run it when you update the block definition.
+
+</Callout>
+
+### View your block
+
+Once the build script is finished, you can view your block at `http://localhost:3333/blocks/[CATEGORY]` or a full screen preview at `http://localhost:3333/view/styles/new-york/dashboard-01`.
+
+<Image
+  src="/images/block-preview-light.png"
+  width="1432"
+  height="960"
+  alt="Block preview"
+  className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
+/>
+<Image
+  src="/images/block-preview-dark.png"
+  width="1432"
+  height="960"
+  alt="Block preview"
+  className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block"
+/>
+
+### Build your block
+
+You can now build your block by editing the files in the block folder and viewing the changes in the browser.
+
+If you add more files, make sure to add them to the `files` array in the block definition.
+
+</Steps>
+
+## Publish your block
+
+Once you're ready to publish your block, you can submit a pull request to the main repository.
+
+<Steps>
+
+### Run the build script
+
+```bash
+pnpm registry:build
+```
+
+### Capture a screenshot
+
+```bash
+pnpm registry:capture
+```
+
+<Callout className="mt-6">
+
+**Note:** If you've run the capture script before, you might need to delete the existing screenshots (both light and dark) at `apps/www/public/r/styles/new-york` and run the script again.
+
+</Callout>
+
+### Submit a pull request
+
+Commit your changes and submit a pull request to the main repository.
+
+Your block will be reviewed and merged. Once merged it will be published to the website and available to be installed via the CLI.
+
+</Steps>
+
+## Categories
+
+The `categories` property is used to organize your block in the registry.
+
+### Add a category
+
+If you need to add a new category, you can do so by adding it to the `registryCategories` array in `apps/www/registry/registry-categories.ts`.
+
+```tsx title="apps/www/registry/registry-categories.ts" showLineNumbers
+export const registryCategories = [
+  // ...
+  {
+    name: "Input",
+    slug: "input",
+    hidden: false,
+  },
+]
+```
+
+## Guidelines
+
+Here are some guidelines to follow when contributing to the blocks library.
+
+- The following properties are required for the block definition: `name`, `description`, `type`, `files`, and `categories`.
+- Make sure to list all registry dependencies in `registryDependencies`. A registry dependency is the name of the component in the registry eg. `input`, `button`, `card`, etc.
+- Make sure to list all dependencies in `dependencies`. A dependency is the name of the package in the registry eg. `zod`, `sonner`, etc.
+- If your block has a page (optional), it should be the first entry in the `files` array and it should have a `target` property. This helps the CLI place the page in the correct location for file-based routing.
+- **Imports should always use the `@/registry` path.** eg. `import { Input } from "@/registry/new-york/input"`
diff --git a/apps/v4/content/docs/(root)/changelog.mdx b/apps/v4/content/docs/(root)/changelog.mdx
new file mode 100644
index 00000000000..7ec39dd1d0c
--- /dev/null
+++ b/apps/v4/content/docs/(root)/changelog.mdx
@@ -0,0 +1,1176 @@
+---
+title: Changelog
+description: Latest updates and announcements.
+toc: false
+---
+
+## September 2025 - Registry Index
+
+We've created an index of open source registries that you can install items from.
+
+You can search, view and add items from the registry index without configuring the `.components.json` file.
+
+They'll be automatically added to your `components.json` file for you.
+
+```bash
+npx shadcn add @ai-elements/prompt-input
+```
+
+The full list of registries is available at [https://ui.shadcn.com/r/registries.json](https://ui.shadcn.com/r/registries.json).
+
+To add a registry to the index, submit a PR to the `shadcn/ui` repository. See the [registry index documentation](/docs/registry/registry-index) for more details.
+
+---
+
+## August 2025 - shadcn CLI 3.0 and MCP Server
+
+We just shipped shadcn CLI 3.0 with support for namespaced registries, advanced authentication, new commands and a completely rewritten registry engine.
+
+### What's New
+
+- [Namespaced Registries](#namespaced-registries) - Install components using `@registry/name` format.
+- [Private Registries](#private-registries) - Secure your registry with advanced authentication.
+- [Search & Discovery](#search--discovery) - New commands to find and view code before installing.
+- [MCP Server](#mcp-server) - MCP server for all registries.
+- [Faster Everything](#faster-everything) - Completely rewritten registry resolution.
+- [Improved Error Handling](#improved-error-handling) - Better error messages for users and LLMs.
+- [Upgrade Guide](#upgrade-guide) - Migration notes for existing users.
+
+### Namespaced Registries
+
+The biggest change in 3.0 is namespaced registries. You can now install components from registries: a community registry, your company's private registry or internal registry, using the `@registry/name` format.
+
+This makes it easier to distribute code across teams and projects.
+
+Configure registries in your `components.json`:
+
+```json title="components.json"
+{
+  "registries": {
+    "@acme": "https://acme.com/r/{name}.json",
+    "@internal": {
+      "url": "https://registry.company.com/{name}",
+      "headers": {
+        "Authorization": "Bearer ${REGISTRY_TOKEN}"
+      }
+    }
+  }
+}
+```
+
+Then use the `@registry/name` format to install components:
+
+```bash
+npx shadcn add @acme/button @internal/auth-system
+```
+
+It's completely decentralized. There's no central registrar. Create any namespace you want and organize components however makes sense for your team.
+
+```json title="components.json" showLineNumbers
+{
+  "registries": {
+    "@design": "https://registry.company.com/design/{name}.json",
+    "@engineering": "https://registry.company.com/eng/{name}.json",
+    "@marketing": "https://registry.company.com/marketing/{name}.json"
+  }
+}
+```
+
+Components can even depend on resources from different registries. Everything gets resolved and installed automatically from the right sources.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "name": "dashboard",
+  "type": "registry:block",
+  "registryDependencies": [
+    "@shadcn/card", // From default registry
+    "@v0/chart", // From v0 registry
+    "@acme/data-table", // From acme registry
+    "@lib/data-fetcher", // Utility library
+    "@ai/analytics-prompt" // AI prompt resource
+  ]
+}
+```
+
+### Private Registries
+
+Need to keep your components private? We've got you covered. Configure authentication with tokens, API keys, or custom headers:
+
+```json title="components.json"
+{
+  "registries": {
+    "@private": {
+      "url": "https://registry.company.com/{name}.json",
+      "headers": {
+        "Authorization": "Bearer ${REGISTRY_TOKEN}"
+      }
+    }
+  }
+}
+```
+
+Your private components stay private. Perfect for enterprise teams with proprietary UI libraries.
+
+We support all major authentication methods: basic auth, bearer token, api key query params and custom headers.
+
+See the [authentication docs](/docs/registry/authentication) for more details.
+
+### Search & Discovery
+
+Three new commands make it easy to find exactly what you need:
+
+1. View items from the registry before installing
+
+```bash
+npx shadcn view @acme/auth-system
+```
+
+2. Search items from registries
+
+```bash
+npx shadcn search @tweakcn -q "dark"
+```
+
+3. List all items from a registry
+
+```bash
+npx shadcn list @acme
+```
+
+Preview components before installing them. Search across multiple registries. See the code and all dependencies upfront.
+
+### MCP Server
+
+<Image
+  src="/images/mcp.jpeg"
+  width="1432"
+  height="1050"
+  alt="Lift Mode"
+  className="mt-6 w-full overflow-hidden rounded-lg border"
+/>
+
+Back in April, we [introduced](https://x.com/shadcn/status/1917597228513853603) the first version of the MCP server. Since then, we've taken everything we learned and built a better MCP server.
+
+Here's what's new:
+
+- Works with all registries. Zero config
+- One command to add to your favorite MCP clients
+- We improved the underlying tools
+- Better integration with the CLI and registries
+- Support for multiple registries in the same project
+
+Add the MCP server to your project:
+
+```bash
+npx shadcn@latest mcp init
+```
+
+See the [docs](/docs/mcp) for more details.
+
+### Faster Everything
+
+We completely rewrote the registry resolution engine from scratch. It's faster, smarter, and handles even the trickiest dependency trees.
+
+- Up to 3x faster dependency resolution
+- Smarter file deduplication and merging
+- Better monorepo support out of the box
+- Updated `build` command for registry authors
+
+### Improved Error Handling
+
+Registry developers can now provide custom error messages to help guide users (and LLMs) when things go wrong. The CLI displays helpful, actionable errors for common issues:
+
+```txt
+Unknown registry "@acme". Make sure it is defined in components.json as follows:
+{
+  "registries": {
+    "@acme": "[URL_TO_REGISTRY]"
+  }
+}
+```
+
+Missing environment variables? The CLI tells you exactly what's needed:
+
+```txt
+Registry "@private" requires the following environment variables:
+  • REGISTRY_TOKEN
+
+Set the required environment variables to your .env or .env.local file.
+```
+
+Registry authors can provide custom error messages in their responses to help users and AI agents understand and fix issues quickly.
+
+```txt
+Error:
+You are not authorized to access the item at http://example.com/r/component.
+
+Message:
+[Unauthorized] Your API key has expired. Renew it at https://example.com/api/renew-key.
+```
+
+### Upgrade Guide
+
+Here's the best part: there are no breaking changes for users. Your existing `components.json` works exactly the same. All your installed components work exactly the same.
+
+For developers, if you're using the programmatic APIs directly, we've deprecated a few functions in favor of better ones:
+
+- `fetchRegistry` → `getRegistry`
+- `resolveRegistryTree` → `resolveRegistryItems`
+- Schema moved from `shadcn/registry` to `shadcn/schema` package
+
+```diff
+- import { registryItemSchema } from "shadcn/registry"
++ import { registryItemSchema } from "shadcn/schema"
+```
+
+That's it. Seriously. Everything else just works.
+
+---
+
+## July 2025 - Universal Registry Items
+
+We've added support for universal registry items. This allows you to create registry items that can be distributed to any project i.e. no framework, no components.json, no tailwind, no react required.
+
+This new registry item type unlocks a lot of new workflows. You can now distribute code, config, rules, docs, anything to any code project.
+
+See the [docs](/docs/registry/examples) for more details and examples.
+
+---
+
+## July 2025 - Local File Support
+
+The shadcn CLI now supports local files. Initialize projects and add components, themes, hooks, utils and more from local JSON files.
+
+```bash
+# Initialize a project from a local file
+npx shadcn init ./template.json
+
+# Add a component from a local file
+npx shadcn add ./block.json
+```
+
+This feature enables powerful new workflows:
+
+- **Zero setup** - No remote registries required
+- **Faster development** - Test registry items locally before publishing
+- **Enhanced workflow for agents and MCP** - Generate and run registry items locally
+- **Private components** - Keep proprietary components local and private.
+
+---
+
+## June 2025 - `radix-ui`
+
+We've added a new command to migrate to the new `radix-ui` package. This command will replace all `@radix-ui/react-*` imports with `radix-ui`.
+
+```bash
+npx shadcn@latest migrate radix
+```
+
+It will automatically update all imports in your `ui` components and install `radix-ui` as a dependency.
+
+```diff showLineNumbers title="components/ui/alert-dialog.tsx"
+- import * as AlertDialogPrimitive from "@radix-ui/react-dialog"
++ import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+```
+
+Make sure to test your components and project after running the command.
+
+**Note:** To update imports for newly added components, run the migration command again.
+
+## June 2025 - Calendar Component
+
+We've upgraded the `Calendar` component to the latest version of [React DayPicker](https://daypicker.dev).
+
+This is a major upgrade and includes a lot of new features and improvements. We've also built a collection of 30+ calendar blocks that you can use to build your own calendar components.
+
+See all calendar blocks in the [Blocks Library](/blocks/calendar) page.
+
+<Image src="/images/calendar-2.png" alt="Calendar" width={676} height={895} />
+
+To upgrade your project to the latest version of the `Calendar` component, see the [upgrade guide](/docs/components/calendar#upgrade-guide).
+
+## May 2025 - New Site
+
+We've upgraded [ui.shadcn.com](https://ui.shadcn.com) to Next.js 15.3 and Tailwind v4. The site now uses the upgraded `new-york` components.
+
+We've also made some minor design updates to make the site faster and easier to navigate.
+
+This upgrade unlocks a lot of new features that we're working on. More to come.
+
+## April 2025 - MCP
+
+We're working on zero-config MCP support for shadcn/ui registry. One command `npx shadcn registry:mcp` to make any registry mcp-compatible.
+
+<Image
+  src="/images/mcp.jpeg"
+  width="1432"
+  height="1050"
+  alt="Lift Mode"
+  className="mt-6 w-full overflow-hidden rounded-lg border"
+/>
+
+Learn more in the [thread here](https://x.com/shadcn/status/1917597228513853603).
+
+## March 2025 - shadcn 2.5.0
+
+We tagged shadcn 2.5.0 earlier this week. It comes with a pretty cool feature: **resolve anywhere**.
+
+Registries can now place files anywhere in an app and we'll properly resolve imports. No need to stick to a fixed file structure. It can even add files outside the registry itself.
+
+On install, we track all files and perform a multi-pass resolution to correctly handle imports and aliases. It's fast.
+
+## March 2025 - Cross-framework Route Support
+
+The shadcn CLI can now auto-detect your framework and adapts routes for you.
+
+Works with all frameworks including Laravel, Vite and React Router.
+
+## February 2025 - Tailwind v4
+
+We shipped the first preview of Tailwind v4 and React 19. Ready for you to try out. You can start using it today.
+
+What's New:
+
+- The CLI can now initialize projects with Tailwind v4.
+- Full support for the new @theme directive and @theme inline option.
+- All components are updated for Tailwind v4 and React 19.
+- We've removed the forwardRefs and adjusted the types.
+- Every primitive now has a data-slot attribute for styling.
+- We've fixed and cleaned up the style of the components.
+- We're deprecating the toast component in favor of sonner.
+- Buttons now use the default cursor.
+- We're deprecating the default style. New projects will use new-york.
+- HSL colors are now converted to OKLCH.
+
+Read more in the [docs](/docs/tailwind-v4).
+
+## February 2025 - Updated Registry Schema
+
+We're updating the registry schema to support more features.
+
+Define code as a flat JSON file and distribute it via the CLI.
+
+- Custom styles: bring your own design system, components & tokens
+- Extend, override, mix & match components from third-party registries and LLMs
+- Install themes, CSS vars, hooks, animations, and Tailwind layers & utilities
+
+## January 2025 - Blocks
+
+We are inviting the community to contribute to the blocks library. Share your components and blocks with other developers and help build a library of high-quality, reusable components.
+
+We'd love to see all types of blocks: applications, marketing, products, and more.
+
+See the [docs](/docs/blocks) page to get started.
+
+## December 2024 - Monorepo Support
+
+Until now, using shadcn/ui in a monorepo was a bit of a pain. You could add
+components using the CLI, but you had to manage where the components
+were installed and manually fix import paths.
+
+With the new monorepo support in the CLI, we've made it a lot easier to use
+shadcn/ui in a monorepo.
+
+The CLI now understands the monorepo structure and will install the components,
+dependencies and registry dependencies to the correct paths and handle imports
+for you.
+
+Read more in the [docs](/docs/monorepo).
+
+## November 2024 - Icons
+
+An update on icons. The new-york style now uses Lucide as the default icon set.
+
+- New projects will use Lucide by default
+- No breaking changes for existing projects
+- Use the CLI to (optionally) migrate primitives to Lucide
+
+For more info on why we're doing this, see the [thread](https://x.com/shadcn/status/1853902179041702169).
+
+## October 2024 - React 19
+
+shadcn/ui is now compatible with React 19 and Next.js 15.
+
+We published a guide to help you upgrade your project to React 19.
+
+Read more [here](/docs/react-19).
+
+## October 2024 - Sidebar
+
+Introducing sidebar.tsx: 25 components to help you build all kinds of sidebars.
+
+I don't like building sidebars. So I built 30+ of them. All types. Then simplified the core into sidebar.tsx: a strong foundation to build on top of.
+
+It works with Next.js, Remix, Vite & Laravel.
+
+See the announcement [here](https://x.com/shadcn/status/1847359896557408461).
+
+## August 2024 - npx shadcn init
+
+The new CLI is now available. It's a complete rewrite with a lot of new features and improvements. You can now install components, themes, hooks, utils and more using `npx shadcn add`.
+
+This is a major step towards distributing code that you and your LLMs can access and use.
+
+1. First up, the cli now has support for all major React framework out of the box. Next.js, Remix, Vite and Laravel. And when you init into a new app, we update your existing Tailwind files instead of overriding.
+2. A component now ship its own dependencies. Take the accordion for example, it can define its Tailwind keyframes. When you add it to your project, we'll update your tailwind.config.ts file accordingly.
+3. You can also install remote components using url. `npx shadcn add https://acme.com/registry/navbar.json`.
+4. We have also improve the init command. It does framework detection and can even init a brand new Next.js app in one command. `npx shadcn init`.
+5. We have created a new schema that you can use to ship your own component registry. And since it has support for urls, you can even use it to distribute private components.
+6. And a few more updates like better error handling and monorepo support.
+
+You can try the new cli today.
+
+```bash
+npx shadcn init sidebar-01 login-01
+```
+
+### Update Your Project
+
+To update an existing project to use the new CLI, update your `components.json` file to include import aliases for your **components**, **utils**, **ui**, **lib** and **hooks**.
+
+```json showLineNumbers {7-13} title="components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "tailwind": {
+    // ...
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
+```
+
+If you're using a different import alias prefix eg `~`, replace `@` with your prefix.
+
+## April 2024 - Introducing Lift Mode
+
+We're introducing a new mode for [Blocks](/blocks) called **Lift Mode**.
+
+Enable Lift Mode to automatically "lift" smaller components from a block template for copy and paste.
+
+<a href="/blocks">
+  <Image
+    src="/images/lift-mode-light.png"
+    width="1432"
+    height="1050"
+    alt="Lift Mode"
+    className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
+  />
+  <Image
+    src="/images/lift-mode-dark.png"
+    width="1432"
+    height="1069"
+    alt="Lift Mode"
+    className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block"
+  />
+  <span className="sr-only">View the blocks library</span>
+</a>
+
+With Lift Mode, you'll be able to copy the smaller components that make up a block template, like cards, buttons, and forms, and paste them directly into your project.
+
+Visit the [Blocks](/blocks) page to try it out.
+
+## March 2024 - Introducing Blocks
+
+One of the most requested features since launch has been layouts: admin dashboards with sidebar, marketing page sections, cards and more.
+
+**Today, we're launching [**Blocks**](/blocks)**.
+
+<a href="/blocks">
+  <Image
+    src="/images/dashboard-1.jpg"
+    width="716"
+    height="430"
+    alt="Admin dashboard"
+    className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
+  />
+  <Image
+    src="/images/dashboard-1-dark.jpg"
+    width="716"
+    height="430"
+    alt="Admin dashboard"
+    className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block"
+  />
+  <span className="sr-only">View the blocks library</span>
+</a>
+
+Blocks are ready-made components that you can use to build your apps. They are fully responsive, accessible, and composable, meaning they are built using the same principles as the rest of the components in shadcn/ui.
+
+We're starting with dashboard layouts and authentication pages, with plans to add more blocks in the coming weeks.
+
+### Open Source
+
+Blocks are open source. You can find the source on GitHub. Use them in your projects, customize them and contribute back.
+
+<a href="/blocks">
+  <Image
+    src="/images/dashboard-2.jpg"
+    width="716"
+    height="420"
+    alt="AI Playground"
+    className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
+  />
+  <Image
+    src="/images/dashboard-2-dark.jpg"
+    width="716"
+    height="420"
+    alt="AI Playground"
+    className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block"
+  />
+  <span className="sr-only">View the blocks library</span>
+</a>
+
+### Request a Block
+
+We're also introducing a "Request a Block" feature. If there's a specific block you'd like to see, simply create a request on GitHub and the community can upvote and build it.
+
+<a href="/blocks">
+  <Image
+    src="/images/dashboard-3.jpg"
+    width="716"
+    height="420"
+    alt="Settings Page"
+    className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
+  />
+  <Image
+    src="/images/dashboard-3-dark.jpg"
+    width="716"
+    height="420"
+    alt="Settings Page"
+    className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block"
+  />
+  <span className="sr-only">View the blocks library</span>
+</a>
+
+### v0
+
+If you have a [v0](https://v0.dev) account, you can use the **Edit in v0** feature to open the code on v0 for prompting and further generation.
+
+<div className="bg-background mt-6 flex aspect-video w-full items-center justify-center overflow-hidden rounded-lg border shadow-sm">
+  <svg
+    viewBox="0 0 40 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="text-foreground h-40 w-40"
+  >
+    <path
+      d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
+      fill="currentColor"
+    ></path>
+    <path
+      d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</div>
+
+That's it. _Looking forward to seeing what you build with Blocks_.
+
+## March 2024 - Breadcrumb and Input OTP
+
+We've added a new Breadcrumb component and an Input OTP component.
+
+### Breadcrumb
+
+An accessible and flexible breadcrumb component. It has support for collapsed items, custom separators, bring-your-own routing `<Link />` and composable with other shadcn/ui components.
+
+<ComponentPreview name="breadcrumb-demo" />
+
+[See more examples](/docs/components/breadcrumb)
+
+### Input OTP
+
+A fully featured input OTP component. It has support for numeric and alphanumeric codes, custom length, copy-paste and accessible. Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input-otp) by [@guilherme_rodz](https://twitter.com/guilherme_rodz).
+
+<ComponentPreview name="input-otp-demo" />
+
+[Read the docs](/docs/components/input-otp)
+
+If you have a [v0](https://v0.dev), the new components are available for generation.
+
+## December 2023 - New components, CLI and more
+
+We've added new components to shadcn/ui and made a lot of improvements to the CLI.
+
+Here's a quick overview of what's new:
+
+- [**Carousel**](#carousel) - A carousel component with motion, swipe gestures and keyboard support.
+- [**Drawer**](#drawer) - A drawer component that looks amazing on mobile.
+- [**Pagination**](#pagination) - A pagination component with page navigation, previous and next buttons.
+- [**Resizable**](#resizable) - A resizable component for building resizable panel groups and layouts.
+- [**Sonner**](#sonner) - The last toast component you'll ever need.
+- [**CLI updates**](#cli-updates) - Support for custom **Tailwind prefix** and `tailwind.config.ts`.
+
+### Carousel
+
+We've added a fully featured carousel component with motion, swipe gestures and keyboard support. Built on top of [Embla Carousel](https://www.embla-carousel.com).
+
+It has support for infinite looping, autoplay, vertical orientation, and more.
+
+<ComponentPreview name="carousel-demo" />
+
+### Drawer
+
+Oh the drawer component 😍. Built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilkowalski\_](https://twitter.com/emilkowalski_).
+
+Try opening the following drawer on mobile. It looks amazing!
+
+<ComponentPreview name="drawer-demo" />
+
+### Pagination
+
+We've added a pagination component with page navigation, previous and next buttons. Simple, flexible and works with your framework's `<Link />` component.
+
+<ComponentPreview name="pagination-demo" />
+
+### Resizable
+
+Build resizable panel groups and layouts with this `<Resizable />` component.
+
+<ComponentPreview name="resizable-demo-with-handle" />
+
+`<Resizable />` is built using [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) by [bvaughn](https://github.com/bvaughn). It has support for mouse, touch and keyboard.
+
+### Sonner
+
+Another one by [emilkowalski\_](https://twitter.com/emilkowalski_). The last toast component you'll ever need. Sonner is now availabe in shadcn/ui.
+
+<ComponentPreview name="sonner-demo" />
+
+### CLI updates
+
+This has been one of the most requested features. You can now configure a custom Tailwind prefix and the cli will automatically prefix your utility classes when adding components.
+
+This means you can now easily add shadcn/ui components to existing projects like Docusaurus, Nextra...etc. A drop-in for your existing design system with no conflict. 🔥
+
+```tsx /tw-/
+<AlertDialog className="tw-grid tw-gap-4 tw-border tw-bg-background tw-shadow-lg" />
+```
+
+It works with `cn`, `cva` and CSS variables.
+
+The cli can now also detect `tailwind.config.ts` and add the TypeScript version of the config for you.
+
+That's it. Happy Holidays.
+
+## July 2023 - JavaScript
+
+This project and the components are written in TypeScript. **We recommend using TypeScript for your project as well**.
+
+However we provide a JavaScript version of the components, available via the [cli](/docs/cli).
+
+```txt
+Would you like to use TypeScript (recommended)? no
+```
+
+To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file.
+
+```json {10} title="components.json" showLineNumbers
+{
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "rsc": false,
+  "tsx": false,
+  "aliases": {
+    "utils": "~/lib/utils",
+    "components": "~/components"
+  }
+}
+```
+
+To configure import aliases, you can use the following `jsconfig.json`:
+
+```json {4} title="jsconfig.json" showLineNumbers
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
+```
+
+## June 2023 - New CLI, Styles and more
+
+I have a lot of updates to share with you today:
+
+- [**New CLI**](#new-cli) - Rewrote the CLI from scratch. You can now add components, dependencies and configure import paths.
+- [**Theming**](#theming-with-css-variables-or-tailwind-colors) - Choose between using CSS variables or Tailwind CSS utility classes for theming.
+- [**Base color**](#base-color) - Configure the base color for your project. This will be used to generate the default color palette for your components.
+- [**React Server Components**](#react-server-components) - Opt out of using React Server Components. The CLI will automatically append or remove the `use client` directive.
+- [**Styles**](#styles) - Introducing a new concept called _Style_. A style comes with its own set of components, animations, icons and more.
+- [**Exit animations**](#exit-animations) - Added exit animations to all components.
+- [**Other updates**](#other-updates) - New `icon` button size, updated `sheet` component and more.
+- [**Updating your project**](#updating-your-project) - How to update your project to get the latest changes.
+
+---
+
+### New CLI
+
+I've been working on a new CLI for the past few weeks. It's a complete rewrite. It comes with a lot of new features and improvements.
+
+### `init`
+
+```bash
+npx shadcn@latest init
+```
+
+When you run the `init` command, you will be asked a few questions to configure `components.json`:
+
+```txt showLineNumbers
+Which style would you like to use? › Default
+Which color would you like to use as base color? › Slate
+Where is your global CSS file? › › app/globals.css
+Do you want to use CSS variables for colors? › no / yes
+Where is your tailwind.config.js located? › tailwind.config.js
+Configure the import alias for components: › @/components
+Configure the import alias for utils: › @/lib/utils
+Are you using React Server Components? › no / yes
+```
+
+This file contains all the information about your components: where to install them, the import paths, how they are styled...etc.
+
+You can use this file to change the import path of a component, set a baseColor or change the styling method.
+
+```json title="components.json" showLineNumbers
+{
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "rsc": false,
+  "aliases": {
+    "utils": "~/lib/utils",
+    "components": "~/components"
+  }
+}
+```
+
+This means you can now use the CLI with any directory structure including `src` and `app` directories.
+
+### `add`
+
+```bash
+npx shadcn@latest add
+```
+
+The `add` command is now much more capable. You can now add UI components but also import more complex components (coming soon).
+
+The CLI will automatically resolve all components and dependencies, format them based on your custom config and add them to your project.
+
+### `diff` (experimental)
+
+```bash
+npx shadcn diff
+```
+
+We're also introducing a new `diff` command to help you keep track of upstream updates.
+
+You can use this command to see what has changed in the upstream repository and update your project accordingly.
+
+Run the `diff` command to get a list of components that have updates available:
+
+```bash
+npx shadcn diff
+```
+
+```txt
+The following components have updates available:
+- button
+  - /path/to/my-app/components/ui/button.tsx
+- toast
+  - /path/to/my-app/components/ui/use-toast.ts
+  - /path/to/my-app/components/ui/toaster.tsx
+```
+
+Then run `diff [component]` to see the changes:
+
+```bash
+npx shadcn diff alert
+```
+
+```diff /pl-12/
+const alertVariants = cva(
+- "relative w-full rounded-lg border",
++ "relative w-full pl-12 rounded-lg border"
+)
+```
+
+---
+
+### Theming with CSS Variables or Tailwind Colors
+
+You can choose between using CSS variables or Tailwind CSS utility classes for theming.
+
+When you add new components, the CLI will automatically use the correct theming methods based on your `components.json` configuration.
+
+#### Utility classes
+
+```tsx /bg-zinc-950/ /text-zinc-50/ /dark:bg-white/ /dark:text-zinc-950/
+<div className="bg-zinc-950 dark:bg-white" />
+```
+
+To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file.
+
+```json {6} title="components.json" showLineNumbers
+{
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": false
+  }
+}
+```
+
+#### CSS Variables
+
+```tsx /bg-background/ /text-foreground/
+<div className="bg-background text-foreground" />
+```
+
+To use CSS variables classes for theming set `tailwind.cssVariables` to `true` in your `components.json` file.
+
+```json {6} title="components.json" showLineNumbers
+{
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  }
+}
+```
+
+---
+
+### Base color
+
+You can now configure the base color for your project. This will be used to generate the default color palette for your components.
+
+```json {5} title="components.json" showLineNumbers
+{
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": false
+  }
+}
+```
+
+Choose between `gray`, `neutral`, `slate`, `stone` or `zinc`.
+
+If you have `cssVariables` set to `true`, we will set the base colors as CSS variables in your `globals.css` file. If you have `cssVariables` set to `false`, we will inline the Tailwind CSS utility classes in your components.
+
+---
+
+### React Server Components
+
+If you're using a framework that does not support React Server Components, you can now opt out by setting `rsc` to `false`. We will automatically append or remove the `use client` directive when adding components.
+
+```json title="components.json" showLineNumbers
+{
+  "rsc": false
+}
+```
+
+---
+
+### Styles
+
+We are introducing a new concept called _Style_.
+
+_You can think of style as the visual foundation: shapes, icons, animations & typography._ A style comes with its own set of components, animations, icons and more.
+
+We are shipping two styles: `default` and `new-york` (with more coming soon).
+
+<Image
+  src="/images/style.jpg"
+  width="716"
+  height="402"
+  alt="Default vs New York style"
+  className="mt-6 overflow-hidden rounded-lg border"
+/>
+
+The `default` style is the one you are used to. It's the one we've been using since the beginning of this project. It uses `lucide-react` for icons and `tailwindcss-animate` for animations.
+
+The `new-york` style is a new style. It ships with smaller buttons, cards with shadows and a new set of icons from [Radix Icons](https://icons.radix-ui.com).
+
+When you run the `init` command, you will be asked which style you would like to use. This is saved in your `components.json` file.
+
+```json title="components.json" showLineNumbers
+{
+  "style": "new-york"
+}
+```
+
+### Theming
+
+Start with a style as the base then theme using CSS variables or Tailwind CSS utility classes to completely change the look of your components.
+
+<Image
+  src="/images/style-with-theming.jpg"
+  width="716"
+  height="402"
+  alt="Style with theming"
+  className="mt-6 overflow-hidden rounded-lg border"
+/>
+
+---
+
+### Exit animations
+
+I added exit animations to all components. Click on the combobox below to see the subtle exit animation.
+
+<ComponentPreview name="combobox-demo" className="[&_.preview]:items-start" />
+
+The animations can be customized using utility classes.
+
+---
+
+### Other updates
+
+### Button
+
+- Added a new button size `icon`:
+
+<ComponentPreview name="button-icon" />
+
+### Sheet
+
+- Renamed `position` to `side` to match the other elements.
+
+<ComponentPreview name="sheet-side" />
+
+- Removed the `size` props. Use `className="w-[200px] md:w-[450px]"` for responsive sizing.
+
+---
+
+### Updating your project
+
+Since we follow a copy and paste approach, you will need to manually update your project to get the latest changes.
+
+<Callout className="mt-4">
+  Note: we are working on a [`diff`](#diff-experimental) command to help you
+  keep track of upstream updates.
+</Callout>
+
+<Steps>
+
+### Add `components.json`
+
+Creating a `components.json` file at the root:
+
+```json title="components.json" showLineNumbers
+{
+  "style": "default",
+  "rsc": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
+```
+
+Update the values for `tailwind.css` and `aliases` to match your project structure.
+
+### Button
+
+Add the `icon` size to the `buttonVariants`:
+
+```tsx {7} title="components/ui/button.tsx" showLineNumbers
+const buttonVariants = cva({
+  variants: {
+    size: {
+      default: "h-10 px-4 py-2",
+      sm: "h-9 rounded-md px-3",
+      lg: "h-11 rounded-md px-8",
+      icon: "h-10 w-10",
+    },
+  },
+})
+```
+
+### Sheet
+
+1. Replace the content of `sheet.tsx` with the following:
+
+```tsx title="components/ui/sheet.tsx" showLineNumbers
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = ({
+  className,
+  ...props
+}: SheetPrimitive.DialogPortalProps) => (
+  <SheetPrimitive.Portal className={cn(className)} {...props} />
+)
+SheetPortal.displayName = SheetPrimitive.Portal.displayName
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-foreground text-lg font-semibold", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
+```
+
+2. Rename `position` to `side`
+
+```diff /position/ /side/
+- <Sheet position="right" />
++ <Sheet side="right" />
+```
+
+</Steps>
+
+### Thank you
+
+I'd like to thank everyone who has been using this project, providing feedback and contributing to it. I really appreciate it. Thank you 🙏
diff --git a/apps/v4/content/docs/(root)/cli.mdx b/apps/v4/content/docs/(root)/cli.mdx
new file mode 100644
index 00000000000..ef7985fa20d
--- /dev/null
+++ b/apps/v4/content/docs/(root)/cli.mdx
@@ -0,0 +1,225 @@
+---
+title: shadcn
+description: Use the shadcn CLI to add components to your project.
+---
+
+## init
+
+Use the `init` command to initialize configuration and dependencies for a new project.
+
+The `init` command installs dependencies, adds the `cn` util and configures CSS variables for the project.
+
+```bash
+npx shadcn@latest init
+```
+
+**Options**
+
+```bash
+Usage: shadcn init [options] [components...]
+
+initialize your project and install dependencies
+
+Arguments:
+  components         name, url or local path to component
+
+Options:
+  -t, --template <template>      the template to use. (next, next-monorepo)
+  -b, --base-color <base-color>  the base color to use. (neutral, gray, zinc, stone, slate)
+  -y, --yes                      skip confirmation prompt. (default: true)
+  -f, --force                    force overwrite of existing configuration. (default: false)
+  -c, --cwd <cwd>                the working directory. defaults to the current directory.
+  -s, --silent                   mute output. (default: false)
+  --src-dir                      use the src directory when creating a new project. (default: false)
+  --no-src-dir                   do not use the src directory when creating a new project.
+  --css-variables                use css variables for theming. (default: true)
+  --no-css-variables             do not use css variables for theming.
+  --no-base-style                do not install the base shadcn style
+  -h, --help                     display help for command
+```
+
+---
+
+## add
+
+Use the `add` command to add components and dependencies to your project.
+
+```bash
+npx shadcn@latest add [component]
+```
+
+**Options**
+
+```bash
+Usage: shadcn add [options] [components...]
+
+add a component to your project
+
+Arguments:
+  components         name, url or local path to component
+
+Options:
+  -y, --yes           skip confirmation prompt. (default: false)
+  -o, --overwrite     overwrite existing files. (default: false)
+  -c, --cwd <cwd>     the working directory. defaults to the current directory.
+  -a, --all           add all available components (default: false)
+  -p, --path <path>   the path to add the component to.
+  -s, --silent        mute output. (default: false)
+  --src-dir           use the src directory when creating a new project. (default: false)
+  --no-src-dir        do not use the src directory when creating a new project.
+  --css-variables     use css variables for theming. (default: true)
+  --no-css-variables  do not use css variables for theming.
+  -h, --help          display help for command
+```
+
+---
+
+## view
+
+Use the `view` command to view items from the registry before installing them.
+
+```bash
+npx shadcn@latest view [item]
+```
+
+You can view multiple items at once:
+
+```bash
+npx shadcn@latest view button card dialog
+```
+
+Or view items from namespaced registries:
+
+```bash
+npx shadcn@latest view @acme/auth @v0/dashboard
+```
+
+**Options**
+
+```bash
+Usage: shadcn view [options] <items...>
+
+view items from the registry
+
+Arguments:
+  items            the item names or URLs to view
+
+Options:
+  -c, --cwd <cwd>  the working directory. defaults to the current directory.
+  -h, --help       display help for command
+```
+
+---
+
+## search
+
+Use the `search` command to search for items from registries.
+
+```bash
+npx shadcn@latest search [registry]
+```
+
+You can search with a query:
+
+```bash
+npx shadcn@latest search @shadcn -q "button"
+```
+
+Or search multiple registries at once:
+
+```bash
+npx shadcn@latest search @shadcn @v0 @acme
+```
+
+The `list` command is an alias for `search`:
+
+```bash
+npx shadcn@latest list @acme
+```
+
+**Options**
+
+```bash
+Usage: shadcn search|list [options] <registries...>
+
+search items from registries
+
+Arguments:
+  registries             the registry names or urls to search items from. Names
+                         must be prefixed with @.
+
+Options:
+  -c, --cwd <cwd>        the working directory. defaults to the current directory.
+  -q, --query <query>    query string
+  -l, --limit <number>   maximum number of items to display per registry (default: "100")
+  -o, --offset <number>  number of items to skip (default: "0")
+  -h, --help             display help for command
+```
+
+---
+
+## list
+
+Use the `list` command to list all items from a registry.
+
+```bash
+npx shadcn@latest list @acme
+```
+
+**Options**
+
+```bash
+Usage: shadcn list [options] <registries...>
+
+list items from registries
+
+Arguments:
+  registries             the registry names or urls to list items from. Names
+    must be prefixed with @.
+```
+
+**Options**
+
+```bash
+Usage: shadcn list [options] <registries...>
+
+list items from registries
+
+Arguments:
+  registries             the registry names or urls to list items from. Names
+    must be prefixed with @.
+```
+
+---
+
+## build
+
+Use the `build` command to generate the registry JSON files.
+
+```bash
+npx shadcn@latest build
+```
+
+This command reads the `registry.json` file and generates the registry JSON files in the `public/r` directory.
+
+**Options**
+
+```bash
+Usage: shadcn build [options] [registry]
+
+build components for a shadcn registry
+
+Arguments:
+  registry             path to registry.json file (default: "./registry.json")
+
+Options:
+  -o, --output <path>  destination directory for json files (default: "./public/r")
+  -c, --cwd <cwd>      the working directory. defaults to the current directory.
+  -h, --help           display help for command
+```
+
+To customize the output directory, use the `--output` option.
+
+```bash
+npx shadcn@latest build --output ./public/registry
+```
diff --git a/apps/v4/content/docs/(root)/components-json.mdx b/apps/v4/content/docs/(root)/components-json.mdx
new file mode 100644
index 00000000000..4965b638e28
--- /dev/null
+++ b/apps/v4/content/docs/(root)/components-json.mdx
@@ -0,0 +1,303 @@
+---
+title: components.json
+description: Configuration for your project.
+---
+
+The `components.json` file holds configuration for your project.
+
+We use it to understand how your project is set up and how to generate components customized for your project.
+
+<Callout className="mt-6" title="Note: The `components.json` file is optional">
+  It is **only required if you're using the CLI** to add components to your
+  project. If you're using the copy and paste method, you don't need this file.
+</Callout>
+
+You can create a `components.json` file in your project by running the following command:
+
+```bash
+npx shadcn@latest init
+```
+
+See the <Link href="/docs/cli">CLI section</Link> for more information.
+
+## $schema
+
+You can see the JSON Schema for `components.json` [here](https://ui.shadcn.com/schema.json).
+
+```json title="components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json"
+}
+```
+
+## style
+
+The style for your components. **This cannot be changed after initialization.**
+
+```json title="components.json"
+{
+  "style": "new-york"
+}
+```
+
+The `default` style has been deprecated. Use the `new-york` style instead.
+
+## tailwind
+
+Configuration to help the CLI understand how Tailwind CSS is set up in your project.
+
+See the <Link href="/docs/installation">installation section</Link> for how to set up Tailwind CSS.
+
+### tailwind.config
+
+Path to where your `tailwind.config.js` file is located. **For Tailwind CSS v4, leave this blank.**
+
+```json title="components.json"
+{
+  "tailwind": {
+    "config": "tailwind.config.js" | "tailwind.config.ts"
+  }
+}
+```
+
+### tailwind.css
+
+Path to the CSS file that imports Tailwind CSS into your project.
+
+```json title="components.json"
+{
+  "tailwind": {
+    "css": "styles/global.css"
+  }
+}
+```
+
+### tailwind.baseColor
+
+This is used to generate the default color palette for your components. **This cannot be changed after initialization.**
+
+```json title="components.json"
+{
+  "tailwind": {
+    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
+  }
+}
+```
+
+### tailwind.cssVariables
+
+You can choose between using CSS variables or Tailwind CSS utility classes for theming.
+
+To use utility classes for theming set `tailwind.cssVariables` to `false`. For CSS variables, set `tailwind.cssVariables` to `true`.
+
+```json title="components.json"
+{
+  "tailwind": {
+    "cssVariables": `true` | `false`
+  }
+}
+```
+
+For more information, see the <Link href="/docs/theming">theming docs</Link>.
+
+**This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components.
+
+### tailwind.prefix
+
+The prefix to use for your Tailwind CSS utility classes. Components will be added with this prefix.
+
+```json title="components.json"
+{
+  "tailwind": {
+    "prefix": "tw-"
+  }
+}
+```
+
+## rsc
+
+Whether or not to enable support for React Server Components.
+
+The CLI automatically adds a `use client` directive to client components when set to `true`.
+
+```json title="components.json"
+{
+  "rsc": `true` | `false`
+}
+```
+
+## tsx
+
+Choose between TypeScript or JavaScript components.
+
+Setting this option to `false` allows components to be added as JavaScript with the `.jsx` file extension.
+
+```json title="components.json"
+{
+  "tsx": `true` | `false`
+}
+```
+
+## aliases
+
+The CLI uses these values and the `paths` config from your `tsconfig.json` or `jsconfig.json` file to place generated components in the correct location.
+
+Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file.
+
+<Callout className="mt-6">
+  **Important:** If you're using the `src` directory, make sure it is included
+  under `paths` in your `tsconfig.json` or `jsconfig.json` file.
+</Callout>
+
+### aliases.utils
+
+Import alias for your utility functions.
+
+```json title="components.json"
+{
+  "aliases": {
+    "utils": "@/lib/utils"
+  }
+}
+```
+
+### aliases.components
+
+Import alias for your components.
+
+```json title="components.json"
+{
+  "aliases": {
+    "components": "@/components"
+  }
+}
+```
+
+### aliases.ui
+
+Import alias for `ui` components.
+
+The CLI will use the `aliases.ui` value to determine where to place your `ui` components. Use this config if you want to customize the installation directory for your `ui` components.
+
+```json title="components.json"
+{
+  "aliases": {
+    "ui": "@/app/ui"
+  }
+}
+```
+
+### aliases.lib
+
+Import alias for `lib` functions such as `format-date` or `generate-id`.
+
+```json title="components.json"
+{
+  "aliases": {
+    "lib": "@/lib"
+  }
+}
+```
+
+### aliases.hooks
+
+Import alias for `hooks` such as `use-media-query` or `use-toast`.
+
+```json title="components.json"
+{
+  "aliases": {
+    "hooks": "@/hooks"
+  }
+}
+```
+
+## registries
+
+Configure multiple resource registries for your project. This allows you to install components, libraries, utilities, and other resources from various sources including private registries.
+
+See the <Link href="/docs/registry/namespace">Namespaced Registries</Link> documentation for detailed information.
+
+### Basic Configuration
+
+Configure registries with URL templates:
+
+```json title="components.json"
+{
+  "registries": {
+    "@v0": "https://v0.dev/chat/b/{name}",
+    "@acme": "https://registry.acme.com/{name}.json",
+    "@internal": "https://internal.company.com/{name}.json"
+  }
+}
+```
+
+The `{name}` placeholder is replaced with the resource name when installing.
+
+### Advanced Configuration with Authentication
+
+For private registries that require authentication:
+
+```json title="components.json"
+{
+  "registries": {
+    "@private": {
+      "url": "https://api.company.com/registry/{name}.json",
+      "headers": {
+        "Authorization": "Bearer ${REGISTRY_TOKEN}",
+        "X-API-Key": "${API_KEY}"
+      },
+      "params": {
+        "version": "latest"
+      }
+    }
+  }
+}
+```
+
+Environment variables in the format `${VAR_NAME}` are automatically expanded from your environment.
+
+### Using Namespaced Registries
+
+Once configured, install resources using the namespace syntax:
+
+```bash
+# Install from a configured registry
+npx shadcn@latest add @v0/dashboard
+
+# Install from private registry
+npx shadcn@latest add @private/button
+
+# Install multiple resources
+npx shadcn@latest add @acme/header @internal/auth-utils
+```
+
+### Example: Multiple Registry Setup
+
+```json title="components.json"
+{
+  "registries": {
+    "@shadcn": "https://ui.shadcn.com/r/{name}.json",
+    "@company-ui": {
+      "url": "https://registry.company.com/ui/{name}.json",
+      "headers": {
+        "Authorization": "Bearer ${COMPANY_TOKEN}"
+      }
+    },
+    "@team": {
+      "url": "https://team.company.com/{name}.json",
+      "params": {
+        "team": "frontend",
+        "version": "${REGISTRY_VERSION}"
+      }
+    }
+  }
+}
+```
+
+This configuration allows you to:
+
+- Install public components from shadcn/ui
+- Access private company UI components with authentication
+- Use team-specific resources with versioning
+
+For more information about authentication, see the <Link href="/docs/registry/authentication">Authentication</Link> documentation.
diff --git a/apps/v4/content/docs/(root)/figma.mdx b/apps/v4/content/docs/(root)/figma.mdx
new file mode 100644
index 00000000000..0f17f3c282e
--- /dev/null
+++ b/apps/v4/content/docs/(root)/figma.mdx
@@ -0,0 +1,18 @@
+---
+title: Figma
+description: Every component recreated in Figma. With customizable props, typography and icons.
+---
+
+<Callout>
+  **Note:** The Figma files are contributed by the community. If you have any
+  questions or feedback, please reach out to the Figma file maintainers.
+</Callout>
+
+## 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.
+
+## Free
+
+- [shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
+- [Obra shadcn/ui](https://www.figma.com/community/file/1514746685758799870/obra-shadcn-ui) by [Obra Studio](https://obra.studio/) - Carefully crafted kit designed in the philosophy of shadcn, tracks v4, MIT licensed
diff --git a/apps/v4/content/docs/(root)/index.mdx b/apps/v4/content/docs/(root)/index.mdx
new file mode 100644
index 00000000000..b35634805ed
--- /dev/null
+++ b/apps/v4/content/docs/(root)/index.mdx
@@ -0,0 +1,77 @@
+---
+title: Introduction
+description: shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.
+---
+
+**This is not a component library. It is how you build your component library.**
+
+You know how most traditional component libraries work: you install a package from NPM, import the components, and use them in your app.
+
+This approach works well until you need to customize a component to fit your design system or require one that isn’t included in the library. **Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.**
+
+This is what shadcn/ui aims to solve. It is built around the following principles:
+
+- **Open Code:** The top layer of your component code is open for modification.
+- **Composition:** Every component uses a common, composable interface, making them predictable.
+- **Distribution:** A flat-file schema and command-line tool make it easy to distribute components.
+- **Beautiful Defaults:** Carefully chosen default styles, so you get great design out-of-the-box.
+- **AI-Ready:** Open code for LLMs to read, understand, and improve.
+
+## Open Code
+
+shadcn/ui hands you the actual component code. You have full control to customize and extend the components to your needs. This means:
+
+- **Full Transparency:** You see exactly how each component is built.
+- **Easy Customization:** Modify any part of a component to fit your design and functionality requirements.
+- **AI Integration:** Access to the code makes it straightforward for LLMs to read, understand, and even improve your components.
+
+_In a typical library, if you need to change a button’s behavior, you have to override styles or wrap the component. With shadcn/ui, you simply edit the button code directly._
+
+<Accordion collapsible>
+  <AccordionItem value="faq-1" className="border-none">
+    <AccordionTrigger>
+      How do I pull upstream updates in an Open Code approach?
+    </AccordionTrigger>
+    <AccordionContent>
+      <p>
+        shadcn/ui follows a headless component architecture. This means the core
+        of your app can receive fixes by updating your dependencies, for
+        instance, radix-ui or input-otp.
+      </p>
+      <p className="mt-4">
+        The topmost layer, i.e., the one closest to your design system, is not
+        coupled with the implementation of the library. It stays open for
+        modification.
+      </p>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+
+## Composition
+
+Every component in shadcn/ui shares a common, composable interface. **If a component does not exist, we bring it in, make it composable, and adjust its style to match and work with the rest of the design system.**
+
+_A shared, composable interface means it's predictable for both your team and LLMs. You are not learning different APIs for every new component. Even for third-party ones._
+
+## Distribution
+
+shadcn/ui is also a code distribution system. It defines a schema for components and a CLI to distribute them.
+
+- **Schema:** A flat-file structure that defines the components, their dependencies, and properties.
+- **CLI:** A command-line tool to distribute and install components across projects with cross-framework support.
+
+_You can use the schema to distribute your components to other projects or have AI generate completely new components based on existing schema._
+
+## Beautiful Defaults
+
+shadcn/ui comes with a large collection of components that have carefully chosen default styles. They are designed to look good on their own and to work well together as a consistent system:
+
+- **Good Out-of-the-Box:** Your UI has a clean and minimal look without extra work.
+- **Unified Design:** Components naturally fit with one another. Each component is built to match the others, keeping your UI consistent.
+- **Easily Customizable:** If you want to change something, it's simple to override and extend the defaults.
+
+## AI-Ready
+
+The design of shadcn/ui makes it easy for AI tools to work with your code. Its open code and consistent API allow AI models to read, understand, and even generate new components.
+
+_An AI model can learn how your components work and suggest improvements or even create new components that integrate with your existing design._
diff --git a/apps/v4/content/docs/(root)/javascript.mdx b/apps/v4/content/docs/(root)/javascript.mdx
new file mode 100644
index 00000000000..c35a341fcfd
--- /dev/null
+++ b/apps/v4/content/docs/(root)/javascript.mdx
@@ -0,0 +1,40 @@
+---
+title: JavaScript
+description: How to use shadcn/ui with JavaScript
+---
+
+This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.
+
+However we provide a JavaScript version of the components as well. The JavaScript version is available via the [cli](/docs/cli).
+
+To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file.
+
+```json {10} title="components.json" showLineNumbers
+{
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "rsc": false,
+  "tsx": false,
+  "aliases": {
+    "utils": "~/lib/utils",
+    "components": "~/components"
+  }
+}
+```
+
+To configure import aliases, you can use the following `jsconfig.json`:
+
+```json {4} title="jsconfig.json" showLineNumbers
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
+```
diff --git a/apps/v4/content/docs/(root)/legacy.mdx b/apps/v4/content/docs/(root)/legacy.mdx
new file mode 100644
index 00000000000..88d0a53d10d
--- /dev/null
+++ b/apps/v4/content/docs/(root)/legacy.mdx
@@ -0,0 +1,12 @@
+---
+title: Legacy Docs
+description: View the legacy docs for shadcn/ui and Tailwind v3.
+---
+
+You're looking at the docs for shadcn/ui + Tailwind v4. If you're looking for the docs for shadcn/ui + Tailwind v3, you can find them [here](https://v3.shadcn.com).
+
+<Button asChild className="mt-6 no-underline" size="sm">
+  <Link href="https://v3.shadcn.com" target="_blank">
+    View the legacy docs
+  </Link>
+</Button>
diff --git a/apps/v4/content/docs/(root)/mcp.mdx b/apps/v4/content/docs/(root)/mcp.mdx
new file mode 100644
index 00000000000..017fc8cd7b0
--- /dev/null
+++ b/apps/v4/content/docs/(root)/mcp.mdx
@@ -0,0 +1,281 @@
+---
+title: MCP Server
+description: Use the shadcn MCP server to browse, search, and install components from registries.
+---
+
+The shadcn MCP Server allows AI assistants to interact with items from registries. You can browse available components, search for specific ones, and install them directly into your project using natural language.
+
+For example, you can ask an AI assistant to "Build a landing page using components from the acme registry" or "Find me a login form from the shadcn registry".
+
+Registries are configured in your project's `components.json` file.
+
+```json title="components.json" showLineNumbers
+{
+  "registries": {
+    "@acme": "https://acme.com/r/{name}.json"
+  }
+}
+```
+
+---
+
+## Quick Start
+
+Select your MCP client and follow the instructions to configure the shadcn MCP server. If you'd like to do it manually, see the [Configuration](#configuration) section.
+
+<Tabs defaultValue="claude">
+  <TabsList>
+    <TabsTrigger value="claude">Claude Code</TabsTrigger>
+    <TabsTrigger value="cursor">Cursor</TabsTrigger>
+    <TabsTrigger value="vscode">VS Code</TabsTrigger>
+  </TabsList>
+  <TabsContent value="claude" className="mt-4">
+    **Run the following command** in your project:
+       ```bash
+       npx shadcn@latest mcp init --client claude
+       ```
+
+    **Restart Claude Code** and try the following prompts:
+       - Show me all available components in the shadcn registry
+       - Add the button, dialog and card components to my project
+       - Create a contact form using components from the shadcn registry
+
+    **Note:** You can use `/mcp` command in Claude Code to debug the MCP server.
+
+  </TabsContent>
+
+  <TabsContent value="cursor" className="mt-4">
+    **Run the following command** in your project:
+       ```bash
+       npx shadcn@latest mcp init --client cursor
+       ```
+
+    Open **Cursor Settings** and **Enable the MCP server** for shadcn. Then try the following prompts:
+       - Show me all available components in the shadcn registry
+       - Add the button, dialog and card components to my project
+       - Create a contact form using components from the shadcn registry
+
+  </TabsContent>
+
+  <TabsContent value="vscode" className="mt-4">
+    **Run the following command** in your project:
+       ```bash
+       npx shadcn@latest mcp init --client vscode
+       ```
+
+    Open `.vscode/mcp.json` and click **Start** next to the shadcn server. Then try the following prompts with GitHub Copilot:
+       - Show me all available components in the shadcn registry
+       - Add the button, dialog and card components to my project
+       - Create a contact form using components from the shadcn registry
+
+  </TabsContent>
+</Tabs>
+
+---
+
+## What is MCP?
+
+[Model Context Protocol (MCP)](https://modelcontextprotocol.io) is an open protocol that enables AI assistants to securely connect to external data sources and tools. With the shadcn MCP server, your AI assistant gains direct access to:
+
+- **Browse Components** - List all available components, blocks, and templates from any configured registry
+- **Search Across Registries** - Find specific components by name or functionality across multiple sources
+- **Install with Natural Language** - Add components using simple conversational prompts like "add a login form"
+- **Support for Multiple Registries** - Access public registries, private company libraries, and third-party sources
+
+---
+
+## How It Works
+
+The MCP server acts as a bridge between your AI assistant, component registries and the shadcn CLI.
+
+1. **Registry Connection** - MCP connects to configured registries (shadcn/ui, private registries, third-party sources)
+2. **Natural Language** - You describe what you need in plain English
+3. **AI Processing** - The assistant translates your request into registry commands
+4. **Component Delivery** - Resources are fetched and installed in your project
+
+---
+
+## Supported Registries
+
+The shadcn MCP server works out of the box with any shadcn-compatible registry.
+
+- **shadcn/ui Registry** - The default registry with all shadcn/ui components
+- **Third-Party Registries** - Any registry following the shadcn registry specification
+- **Private Registries** - Your company's internal component libraries
+- **Namespaced Registries** - Multiple registries configured with `@namespace` syntax
+
+---
+
+## Configuration
+
+You can use any MCP client to interact with the shadcn MCP server. Here are the instructions for the most popular ones.
+
+### Claude Code
+
+To use the shadcn MCP server with Claude Code, add the following configuration to your project's `.mcp.json` file:
+
+```json title=".mcp.json" showLineNumbers
+{
+  "mcpServers": {
+    "shadcn": {
+      "command": "npx",
+      "args": ["shadcn@latest", "mcp"]
+    }
+  }
+}
+```
+
+After adding the configuration, restart Claude Code and run `/mcp` to see the shadcn MCP server in the list. If you see `Connected`, you're good to go.
+
+See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for more details.
+
+### Cursor
+
+To configure MCP in Cursor, add the shadcn server to your project's `.cursor/mcp.json` configuration file:
+
+```json title=".cursor/mcp.json" showLineNumbers
+{
+  "mcpServers": {
+    "shadcn": {
+      "command": "npx",
+      "args": ["shadcn@latest", "mcp"]
+    }
+  }
+}
+```
+
+After adding the configuration, enable the shadcn MCP server in Cursor Settings.
+
+Once enabled, you should see a green dot next to the shadcn server in the MCP server list and a list of available tools.
+
+See the [Cursor MCP documentation](https://docs.cursor.com/en/context/mcp#using-mcp-json) for more details.
+
+### VS Code
+
+To configure MCP in VS Code with GitHub Copilot, add the shadcn server to your project's `.vscode/mcp.json` configuration file:
+
+```json title=".vscode/mcp.json" showLineNumbers
+{
+  "mcpServers": {
+    "shadcn": {
+      "command": "npx",
+      "args": ["shadcn@latest", "mcp"]
+    }
+  }
+}
+```
+
+After adding the configuration, open `.vscode/mcp.json` and click **Start** next to the shadcn server.
+
+See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.
+
+---
+
+## Configuring Registries
+
+The MCP server supports multiple registries through your project's `components.json` configuration. This allows you to access components from various sources including private registries and third-party providers.
+
+Configure additional registries in your `components.json`:
+
+```json title="components.json" showLineNumbers
+{
+  "registries": {
+    "@acme": "https://registry.acme.com/{name}.json",
+    "@internal": {
+      "url": "https://internal.company.com/{name}.json",
+      "headers": {
+        "Authorization": "Bearer ${REGISTRY_TOKEN}"
+      }
+    }
+  }
+}
+```
+
+<Callout>
+  **Note:** No configuration is needed to access the standard shadcn/ui
+  registry.
+</Callout>
+
+---
+
+## Authentication
+
+For private registries requiring authentication, set environment variables in your `.env.local`:
+
+```bash title=".env.local"
+REGISTRY_TOKEN=your_token_here
+API_KEY=your_api_key_here
+```
+
+For more details on registry authentication, see the [Authentication documentation](/docs/registry/authentication).
+
+---
+
+## Example Prompts
+
+Once the MCP server is configured, you can use natural language to interact with registries. Try one of the following prompts:
+
+### Browse & Search
+
+- Show me all available components in the shadcn registry
+- Find me a login form from the shadcn registry
+
+### Install Items
+
+- Add the button component to my project
+- Create a login form using shadcn components
+- Install the Cursor rules from the acme registry
+
+### Work with Namespaces
+
+- Show me components from acme registry
+- Install @internal/auth-form
+- Build me a landing page using hero, features and testimonials sections from the acme registry
+
+---
+
+## Troubleshooting
+
+### MCP Not Responding
+
+If the MCP server isn't responding to prompts:
+
+1. **Check Configuration** - Verify the MCP server is properly configured and enabled in your MCP client
+2. **Restart MCP Client** - Restart your MCP client after configuration changes
+3. **Verify Installation** - Ensure `shadcn` is installed in your project
+4. **Check Network** - Confirm you can access the configured registries
+
+### Registry Access Issues
+
+If components aren't loading from registries:
+
+1. **Check components.json** - Verify registry URLs are correct
+2. **Test Authentication** - Ensure environment variables are set for private registries
+3. **Verify Registry** - Confirm the registry is online and accessible
+4. **Check Namespace** - Ensure namespace syntax is correct (`@namespace/component`)
+
+### Installation Failures
+
+If components fail to install:
+
+1. **Check Project Setup** - Ensure you have a valid `components.json` file
+2. **Verify Paths** - Confirm the target directories exist
+3. **Check Permissions** - Ensure write permissions for component directories
+4. **Review Dependencies** - Check that required dependencies are installed
+
+### No Tools or Prompts
+
+If you see the `No tools or prompts` message, try the following:
+
+1. **Clear the npx cache** - Run `npx clear-npx-cache`
+2. **Re-enable the MCP server** - Try to re-enable the MCP server in your MCP client
+3. **Check Logs** - In Cursor, you can see the logs under View -> Output and select `MCP: project-*` in the dropdown.
+
+---
+
+## Learn More
+
+- [Registry Documentation](/docs/registry) - Complete guide to shadcn registries
+- [Namespaces](/docs/registry/namespace) - Configure multiple registry sources
+- [Authentication](/docs/registry/authentication) - Secure your private registries
+- [MCP Specification](https://modelcontextprotocol.io) - Learn about Model Context Protocol
diff --git a/apps/v4/content/docs/(root)/meta.json b/apps/v4/content/docs/(root)/meta.json
new file mode 100644
index 00000000000..349444a4f25
--- /dev/null
+++ b/apps/v4/content/docs/(root)/meta.json
@@ -0,0 +1,19 @@
+{
+  "title": "Get Started",
+  "pages": [
+    "index",
+    "[Installation](/docs/installation)",
+    "components-json",
+    "theming",
+    "[Dark Mode](/docs/dark-mode)",
+    "[CLI](/docs/cli)",
+    "monorepo",
+    "typography",
+    "v0",
+    "javascript",
+    "blocks",
+    "figma",
+    "changelog",
+    "legacy"
+  ]
+}
diff --git a/apps/v4/content/docs/(root)/monorepo.mdx b/apps/v4/content/docs/(root)/monorepo.mdx
new file mode 100644
index 00000000000..1604264a425
--- /dev/null
+++ b/apps/v4/content/docs/(root)/monorepo.mdx
@@ -0,0 +1,166 @@
+---
+title: Monorepo
+description: Using shadcn/ui components and CLI in a monorepo.
+---
+
+Until now, using shadcn/ui in a monorepo was a bit of a pain. You could add
+components using the CLI, but you had to manage where the components
+were installed and manually fix import paths.
+
+With the new monorepo support in the CLI, we've made it a lot easier to use
+shadcn/ui in a monorepo.
+
+The CLI now understands the monorepo structure and will install the components,
+dependencies and registry dependencies to the correct paths and handle imports
+for you.
+
+## Getting started
+
+<Steps>
+
+### Create a new monorepo project
+
+To create a new monorepo project, run the `init` command. You will be prompted
+to select the type of project you are creating.
+
+```bash
+npx shadcn@canary init
+```
+
+Select the `Next.js (Monorepo)` option.
+
+```bash
+? Would you like to start a new project?
+    Next.js
+❯   Next.js (Monorepo)
+```
+
+This will create a new monorepo project with two workspaces: `web` and `ui`,
+and [Turborepo](https://turbo.build/repo/docs) as the build system.
+
+Everything is set up for you, so you can start adding components to your project.
+
+Note: The monorepo uses React 19 and Tailwind CSS v4.
+
+### Add components to your project
+
+To add components to your project, run the `add` command **in the path of your app**.
+
+```bash
+cd apps/web
+```
+
+```bash
+npx shadcn@canary add [COMPONENT]
+```
+
+The CLI will figure out what type of component you are adding and install the
+correct files to the correct path.
+
+For example, if you run `npx shadcn@canary add button`, the CLI will install the button component under `packages/ui` and update the import path for components in `apps/web`.
+
+If you run `npx shadcn@canary add login-01`, the CLI will install the `button`, `label`, `input` and `card` components under `packages/ui` and the `login-form` component under `apps/web/components`.
+
+### Importing components
+
+You can import components from the `@workspace/ui` package as follows:
+
+```tsx
+import { Button } from "@workspace/ui/components/button"
+```
+
+You can also import hooks and utilities from the `@workspace/ui` package.
+
+```tsx
+import { useTheme } from "@workspace/ui/hooks/use-theme"
+import { cn } from "@workspace/ui/lib/utils"
+```
+
+</Steps>
+
+## File Structure
+
+When you create a new monorepo project, the CLI will create the following file structure:
+
+```txt
+apps
+└── web         # Your app goes here.
+    ├── app
+    │   └── page.tsx
+    ├── components
+    │   └── login-form.tsx
+    ├── components.json
+    └── package.json
+packages
+└── ui          # Your components and dependencies are installed here.
+    ├── src
+    │   ├── components
+    │   │   └── button.tsx
+    │   ├── hooks
+    │   ├── lib
+    │   │   └── utils.ts
+    │   └── styles
+    │       └── globals.css
+    ├── components.json
+    └── package.json
+package.json
+turbo.json
+```
+
+## Requirements
+
+1. Every workspace must have a `components.json` file. A `package.json` file tells npm how to install the dependencies. A `components.json` file tells the CLI how and where to install components.
+
+2. The `components.json` file must properly define aliases for the workspace. This tells the CLI how to import components, hooks, utilities, etc.
+
+```json showLineNumbers title="apps/web/components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}
+```
+
+```json showLineNumbers title="packages/ui/components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@workspace/ui/components",
+    "utils": "@workspace/ui/lib/utils",
+    "hooks": "@workspace/ui/hooks",
+    "lib": "@workspace/ui/lib",
+    "ui": "@workspace/ui/components"
+  }
+}
+```
+
+3. Ensure you have the same `style`, `iconLibrary` and `baseColor` in both `components.json` files.
+
+4. **For Tailwind CSS v4, leave the `tailwind` config empty in the `components.json` file.**
+
+By following these requirements, the CLI will be able to install ui components, blocks, libs and hooks to the correct paths and handle imports for you.
diff --git a/apps/v4/content/docs/(root)/react-19.mdx b/apps/v4/content/docs/(root)/react-19.mdx
new file mode 100644
index 00000000000..3c16bf1c66a
--- /dev/null
+++ b/apps/v4/content/docs/(root)/react-19.mdx
@@ -0,0 +1,174 @@
+---
+title: Next.js 15 + React 19
+description: Using shadcn/ui with Next.js 15 and React 19.
+---
+
+<Callout className="mb-6 border-blue-600 bg-blue-50 dark:border-blue-900 dark:bg-blue-950 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Update:** We have added full support for React 19 and Tailwind v4 in the
+  `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
+  information.
+</Callout>
+
+<Callout>
+  **The following guide applies to any framework that supports React 19**. I
+  titled this page "Next.js 15 + React 19" to help people upgrading to Next.js
+  15 find it. We are working with package maintainers to help upgrade to React
+  19.
+</Callout>
+
+## TL;DR
+
+If you're using `npm`, you can install shadcn/ui dependencies with a flag. The `shadcn` CLI will prompt you to select a flag when you run it. No flags required for pnpm, bun, or yarn.
+
+See [Upgrade Status](#upgrade-status) for the status of React 19 support for each package.
+
+## What's happening?
+
+React 19 is now [rc](https://www.npmjs.com/package/react?activeTab=versions) and is [tested and supported in the latest Next.js 15 release](https://nextjs.org/blog/next-15#react-19).
+
+To support React 19, package maintainers will need to test and update their packages to include React 19 as a peer dependency. This is [already](https://github.com/radix-ui/primitives/pull/2952) [in](https://github.com/pacocoursey/cmdk/pull/318) [progress](https://github.com/emilkowalski/vaul/pull/498).
+
+```diff /^19.0/
+"peerDependencies": {
+-  "react": "^16.8 || ^17.0 || ^18.0",
++  "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
+-  "react-dom": "^16.8 || ^17.0 || ^18.0"
++  "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
+},
+```
+
+<Callout>
+  You can check if a package lists React 19 as a peer dependency by running
+  `npm info <package> peerDependencies`.
+</Callout>
+
+In the meantime, if you are installing a package that **does not** list React 19 as a peer dependency, you will see an error message like this:
+
+```bash
+npm error code ERESOLVE
+npm error ERESOLVE unable to resolve dependency tree
+npm error
+npm error While resolving: my-app@0.1.0
+npm error Found: react@19.0.0-rc-69d4b800-20241021
+npm error node_modules/react
+npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project
+```
+
+<Callout>
+  **Note:** This is npm only. PNPM and Bun will only show a silent warning.
+</Callout>
+
+## How to fix this
+
+### Solution 1: `--force` or `--legacy-peer-deps`
+
+You can force install a package with the `--force` or the `--legacy-peer-deps` flag.
+
+```bash
+npm i <package> --force
+
+npm i <package> --legacy-peer-deps
+```
+
+This will install the package and ignore the peer dependency warnings.
+
+<Accordion type="multiple">
+  <AccordionItem value="flags">
+    <AccordionTrigger className="font-medium">
+      What do the `--force` and `--legacy-peer-deps` flag do?
+    </AccordionTrigger>
+    <AccordionContent className="[&_ul]:mt-0">
+
+      - `--force`: Ignores and overrides any dependency conflicts, forcing the
+        installation of packages.
+      - `--legacy-peer-deps`: Skips strict peer dependency checks, allowing
+        installation of packages with unmet peer dependencies to avoid errors.
+
+    </AccordionContent>
+
+  </AccordionItem>
+</Accordion>
+
+### Solution 2: Use React 18
+
+You can downgrade `react` and `react-dom` to version 18, which is compatible with the package you are installing and upgrade when the dependency is updated.
+
+```bash
+npm i react@18 react-dom@18
+```
+
+Whichever solution you choose, make sure you test your app thoroughly to ensure
+there are no regressions.
+
+## Using shadcn/ui on Next.js 15
+
+### Using pnpm, bun, or yarn
+
+Follow the instructions in the [installation guide](/docs/installation/next) to install shadcn/ui. No flags are needed.
+
+### Using npm
+
+When you run `npx shadcn@latest init -d`, you will be prompted to select an option to resolve the peer dependency issues.
+
+```bash
+It looks like you are using React 19.
+Some packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).
+
+? How would you like to proceed? › - Use arrow-keys. Return to submit.
+❯   Use --force
+    Use --legacy-peer-deps
+```
+
+You can then run the command with the flag you choose.
+
+## Adding components
+
+The process for adding components is the same as above. Select a flag to resolve the peer dependency issues.
+
+**Remember to always test your app after installing new dependencies.**
+
+## Upgrade Status
+
+To make it easy for you track the progress of the upgrade, I've created a table below with React 19 support status for the shadcn/ui dependencies.
+
+- ✅ - Works with React 19 using npm, pnpm, and bun.
+- 🚧 - Works with React 19 using pnpm and bun. Requires flag for npm. PR is in progress.
+
+| Package                                                                            | Status | Note                                                        |
+| ---------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------- |
+| [radix-ui](https://www.npmjs.com/package/@radix-ui/react-icons)                    | ✅     |                                                             |
+| [lucide-react](https://www.npmjs.com/package/lucide-react)                         | ✅     |                                                             |
+| [class-variance-authority](https://www.npmjs.com/package/class-variance-authority) | ✅     | Does not list React 19 as a peer dependency.                |
+| [tailwindcss-animate](https://www.npmjs.com/package/tailwindcss-animate)           | ✅     | Does not list React 19 as a peer dependency.                |
+| [embla-carousel-react](https://www.npmjs.com/package/embla-carousel-react)         | ✅     |                                                             |
+| [recharts](https://www.npmjs.com/package/recharts)                                 | ✅     | See note [below](#recharts)                                 |
+| [react-hook-form](https://www.npmjs.com/package/react-hook-form)                   | ✅     |                                                             |
+| [react-resizable-panels](https://www.npmjs.com/package/react-resizable-panels)     | ✅     |                                                             |
+| [sonner](https://www.npmjs.com/package/sonner)                                     | ✅     |                                                             |
+| [react-day-picker](https://www.npmjs.com/package/react-day-picker)                 | ✅     | Works with flag for npm. Work to upgrade to v9 in progress. |
+| [input-otp](https://www.npmjs.com/package/input-otp)                               | ✅     |                                                             |
+| [vaul](https://www.npmjs.com/package/vaul)                                         | ✅     |                                                             |
+| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons)       | 🚧     | See [PR #194](https://github.com/radix-ui/icons/pull/194)   |
+| [cmdk](https://www.npmjs.com/package/cmdk)                                         | ✅     |                                                             |
+
+If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub.
+
+## Recharts
+
+To use recharts with React 19, you will need to override the `react-is` dependency.
+
+<Steps>
+
+<Step>Add the following to your `package.json`</Step>
+
+```json title="package.json"
+"overrides": {
+  "react-is": "^19.0.0-rc-69d4b800-20241021"
+}
+```
+
+Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example.
+
+<Step>Run `npm install --legacy-peer-deps`</Step>
+
+</Steps>
diff --git a/apps/v4/content/docs/(root)/styleguide.mdx b/apps/v4/content/docs/(root)/styleguide.mdx
new file mode 100644
index 00000000000..d9abc71ce3f
--- /dev/null
+++ b/apps/v4/content/docs/(root)/styleguide.mdx
@@ -0,0 +1,208 @@
+---
+title: Styleguide
+description: A styleguide for writing documentation in mdx.
+---
+
+The OpenAI API provides a simple interface to state-of-the-art AI models for text generation, natural language processing, computer vision, and more. This example generates text output from a prompt, as you might using ChatGPT.
+
+## Analyze image inputs
+
+You can provide image inputs to the model as well. Scan receipts, analyze screenshots, or find objects in the real world with [computer vision](/docs/installation/computer-vision). This is code in a `pre` tag and `npx` command in a `code` tag.
+
+```bash
+npm install foo
+```
+
+```bash
+npx shadcn@latest init
+```
+
+```bash
+npx shadcn@latest add button
+```
+
+```tsx
+<Button>Click me</Button>
+```
+
+```tsx showLineNumbers
+// With line numbers
+export default function Home() {
+  return <div>Hello</div>
+}
+```
+
+```tsx title="Button.tsx"
+export default function Button({ children }: { children: React.ReactNode }) {
+  return <button>{children}</button>
+}
+```
+
+This is a code block with a title.
+
+## Line Numbers and Line Highlighting
+
+Draw attention to a particular line of code.
+
+```tsx {4} showLineNumbers
+import { useFloating } from "@floating-ui/react"
+
+function MyComponent() {
+  const { refs, floatingStyles } = useFloating()
+
+  return (
+    <>
+      <div ref={refs.setReference} />
+      <div ref={refs.setFloating} style={floatingStyles} />
+    </>
+  )
+}
+```
+
+## Word Highlighting
+
+Draw attention to a particular word or series of characters.
+
+```tsx /floatingStyles/
+import { useFloating } from "@floating-ui/react"
+
+function MyComponent() {
+  const { refs, floatingStyles } = useFloating()
+
+  return (
+    <>
+      <div ref={refs.setReference} />
+      <div ref={refs.setFloating} style={floatingStyles} />
+    </>
+  )
+}
+```
+
+How
+
+```tsx title="apps/www/registry/registry-blocks.tsx"
+export const blocks = [
+  // ...
+  {
+    name: "dashboard-01",
+    author: "shadcn (https://ui.shadcn.com)",
+    title: "Dashboard",
+    description: "A simple dashboard with a hello world component.",
+    type: "registry:block",
+    registryDependencies: ["input", "button", "card"],
+    dependencies: ["zod"],
+    files: [
+      {
+        path: "blocks/dashboard-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/dashboard-01/components/hello-world.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/example-card.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/hooks/use-hello-world.ts",
+        type: "registry:hook",
+      },
+      {
+        path: "blocks/dashboard-01/lib/format-date.ts",
+        type: "registry:lib",
+      },
+    ],
+    categories: ["dashboard"],
+  },
+]
+```
+
+```txt
+apps
+└── web         # Your app goes here.
+    ├── app
+    │   └── page.tsx
+    ├── components
+    │   └── login-form.tsx
+    ├── components.json
+    └── package.json
+packages
+└── ui          # Your components and dependencies are installed here.
+    ├── src
+    │   ├── components
+    │   │   └── button.tsx
+    │   ├── hooks
+    │   ├── lib
+    │   │   └── utils.ts
+    │   └── styles
+    │       └── globals.css
+    ├── components.json
+    └── package.json
+package.json
+turbo.json
+```
+
+```diff showLineNumbers
+- @plugin 'tailwindcss-animate';
++ @import "tw-animate-css";
+```
+
+## CSS Variables
+
+```tsx /bg-background/ /text-foreground/
+<div className="bg-background text-foreground" />
+```
+
+To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file.
+
+```json {8} title="components.json"
+{
+  "style": "default",
+  "rsc": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/registry/new-york-v4/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
+```
+
+## Utility classes
+
+```tsx /bg-zinc-950/ /text-zinc-50/ /dark:bg-white/ /dark:text-zinc-950/
+<div className="bg-zinc-950 dark:bg-white" />
+```
+
+To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file.
+
+```json {8} title="components.json"
+{
+  "style": "default",
+  "rsc": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/registry/new-york-v4/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
+```
diff --git a/apps/v4/content/docs/(root)/tailwind-v4.mdx b/apps/v4/content/docs/(root)/tailwind-v4.mdx
new file mode 100644
index 00000000000..75e7c008f97
--- /dev/null
+++ b/apps/v4/content/docs/(root)/tailwind-v4.mdx
@@ -0,0 +1,333 @@
+---
+title: Tailwind v4
+description: How to use shadcn/ui with Tailwind v4 and React 19.
+---
+
+It’s here! Tailwind v4 and React 19. Ready for you to try out. You can start using it today.
+
+## What's New
+
+- The CLI can now initialize projects with Tailwind v4.
+- Full support for the new `@theme` directive and `@theme inline` option.
+- All components are updated for Tailwind v4 and React 19.
+- We’ve removed the forwardRefs and adjusted the types.
+- Every primitive now has a `data-slot` attribute for styling.
+- We've fixed and cleaned up the style of the components.
+- We're deprecating the `toast` component in favor of `sonner`.
+- Buttons now use the default cursor.
+- We're deprecating the `default` style. New projects will use `new-york`.
+- HSL colors are now converted to OKLCH.
+
+**Note: this is non-breaking. Your existing apps with Tailwind v3 and React 18 will still work. When you add new components, they'll still be in v3 and React 18 until you upgrade. Only new projects start with Tailwind v4 and React 19.**
+
+## Try It Out
+
+You can test Tailwind v4 + React 19 today using the `canary` release of the CLI. See the framework specific guides below for how to get started.
+
+<div className="mt-8 grid gap-4 sm:grid-cols-2 sm:gap-6">
+  <LinkedCard href="/docs/installation/next">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Next.js</title>
+      <path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z" />
+    </svg>
+    <p className="mt-2 font-medium">Next.js</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/vite">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Vite</title>
+      <path d="m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808 0 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z" />
+    </svg>
+    <p className="mt-2 font-medium">Vite</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/laravel">
+    <svg
+      role="img"
+      viewBox="0 0 62 65"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+    >
+      <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" />
+    </svg>
+    <p className="mt-2 font-medium">Laravel</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/react-router">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <path d="M12.118 5.466a2.306 2.306 0 0 0-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 0 0-1.613-.73zm-4.785 4.36a2.145 2.145 0 0 0-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 0 0-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z" />
+    </svg>
+    <p className="mt-2 font-medium">React Router</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/astro">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Astro</title>
+      <path
+        d="M16.074 16.86C15.354 17.476 13.917 17.895 12.262 17.895C10.23 17.895 8.527 17.263 8.075 16.412C7.914 16.9 7.877 17.458 7.877 17.814C7.877 17.814 7.771 19.564 8.988 20.782C8.988 20.15 9.501 19.637 10.133 19.637C11.216 19.637 11.215 20.582 11.214 21.349V21.418C11.214 22.582 11.925 23.579 12.937 24C12.7812 23.6794 12.7005 23.3275 12.701 22.971C12.701 21.861 13.353 21.448 14.111 20.968C14.713 20.585 15.383 20.161 15.844 19.308C16.0926 18.8493 16.2225 18.3357 16.222 17.814C16.2221 17.4903 16.1722 17.1685 16.074 16.86ZM15.551 0.6C15.747 0.844 15.847 1.172 16.047 1.829L20.415 16.176C18.7743 15.3246 17.0134 14.7284 15.193 14.408L12.35 4.8C12.3273 4.72337 12.2803 4.65616 12.2162 4.60844C12.152 4.56072 12.0742 4.53505 11.9943 4.53528C11.9143 4.5355 11.8366 4.56161 11.7727 4.60969C11.7089 4.65777 11.6623 4.72524 11.64 4.802L8.83 14.405C7.00149 14.724 5.23264 15.3213 3.585 16.176L7.974 1.827C8.174 1.171 8.274 0.843 8.471 0.6C8.64406 0.385433 8.86922 0.218799 9.125 0.116C9.415 0 9.757 0 10.443 0H13.578C14.264 0 14.608 0 14.898 0.117C15.1529 0.219851 15.3783 0.386105 15.551 0.6Z"
+        fill="currentColor"
+      />
+    </svg>
+    <p className="mt-2 font-medium">Astro</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/tanstack">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
+    </svg>
+    <p className="mt-2 font-medium">TanStack Start</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/gatsby">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Gatsby</title>
+      <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 2.571c3.171 0 5.915 1.543 7.629 3.858l-1.286 1.115C16.886 5.572 14.571 4.286 12 4.286c-3.343 0-6.171 2.143-7.286 5.143l9.857 9.857c2.486-.857 4.373-3 4.973-5.572h-4.115V12h6c0 4.457-3.172 8.228-7.372 9.17L2.83 9.944C3.772 5.743 7.543 2.57 12 2.57zm-9.429 9.6l9.344 9.258c-2.4-.086-4.801-.943-6.601-2.743-1.8-1.8-2.743-4.201-2.743-6.515z" />
+    </svg>
+    <p className="mt-2 font-medium">Gatsby</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/manual">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>React</title>
+      <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
+    </svg>
+    <p className="mt-2 font-medium">Manual</p>
+  </LinkedCard>
+</div>
+
+## Upgrade Your Project
+
+<Callout className="mt-6 mb-6 border-blue-600 bg-blue-50 dark:border-blue-900 dark:bg-blue-950 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Important:** Before upgrading, please read the [Tailwind v4 Compatibility
+  Docs](https://tailwindcss.com/docs/compatibility) and make sure your project
+  is ready for the upgrade. Tailwind v4 uses bleeding-edge browser features and
+  is designed for modern browsers.
+</Callout>
+
+One of the major advantages of using `shadcn/ui` is that the code you end up with is exactly what you'd write yourself. There are no hidden abstractions.
+
+This means when a dependency has a new release, you can just follow the official upgrade paths.
+
+Here's how to upgrade your existing projects (full docs are on the way):
+
+### 1. Follow the Tailwind v4 Upgrade Guide
+
+- Upgrade to Tailwind v4 by following the official upgrade guide: https://tailwindcss.com/docs/upgrade-guide
+- Use the `@tailwindcss/upgrade@next` codemod to remove deprecated utility classes and update tailwind config.
+
+### 2. Update your CSS variables
+
+The codemod will migrate your CSS variables as references under the `@theme` directive.
+
+```css showLineNumbers
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+  }
+}
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+}
+```
+
+This works. But to make it easier to work with colors and other variables, we'll need to move the `hsl` wrappers and use `@theme inline`.
+
+Here's how you do it:
+
+1. Move `:root` and `.dark` out of the `@layer` base.
+2. Wrap the color values in `hsl()`
+3. Add the `inline` option to `@theme` i.e `@theme inline`
+4. Remove the `hsl()` wrappers from `@theme`
+
+```css showLineNumbers
+:root {
+  --background: hsl(0 0% 100%); // <-- Wrap in hsl
+  --foreground: hsl(0 0% 3.9%);
+}
+
+.dark {
+  --background: hsl(0 0% 3.9%); // <-- Wrap in hsl
+  --foreground: hsl(0 0% 98%);
+}
+
+@theme inline {
+  --color-background: var(--background); // <-- Remove hsl
+  --color-foreground: var(--foreground);
+}
+```
+
+This change makes it much simpler to access your theme variables in both utility classes and outside of CSS for eg. using color values in JavaScript.
+
+### 3. Update colors for charts
+
+Now that the theme colors come with `hsl()`, you can remove the wrapper in your `chartConfig`:
+
+```diff
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+-    color: "hsl(var(--chart-1))",
++    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+-   color: "hsl(var(--chart-2))",
++   color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+```
+
+### 4. Use new `size-*` utility
+
+The new `size-*` utility (added in Tailwind v3.4), is now fully supported by `tailwind-merge`. You can replace `w-* h-*` with the new `size-*` utility:
+
+```diff
+- w-4 h-4
++ size-4
+```
+
+### 5. Update your dependencies
+
+```bash
+pnpm up "@radix-ui/*" cmdk lucide-react recharts tailwind-merge clsx --latest
+```
+
+### 6. Remove forwardRef
+
+You can use the `remove-forward-ref` codemod to migrate your `forwardRef` to props or manually update the primitives.
+
+For the codemod, see https://github.com/reactjs/react-codemod#remove-forward-ref.
+
+If you want to do it manually, here's how to do it step by step:
+
+1. Replace `React.forwardRef<...>` with `React.ComponentProps<...>`
+2. Remove `ref={ref}` from the component.
+3. Add a `data-slot` attribute. This will come in handy for styling with Tailwind.
+4. You can optionally convert to a named function and remove the `displayName`.
+
+#### Before
+
+```tsx showLineNumbers
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b last:border-b-0", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+```
+
+#### After
+
+```tsx showLineNumbers
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+```
+
+## Changelog
+
+### March 19, 2025 - Deprecate `tailwindcss-animate`
+
+We've deprecated `tailwindcss-animate` in favor of `tw-animate-css`.
+
+New project will have `tw-animate-css` installed by default.
+
+For existing projects, follow the steps below to migrate.
+
+1. Remove `tailwindcss-animate` from your dependencies.
+2. Remove the `@plugin 'tailwindcss-animate'` from your globals.css file.
+3. Install `tw-animate-css` as a dev dependency.
+4. Add the `@import "tw-animate-css"` to your globals.css file.
+
+```diff showLineNumbers
+- @plugin 'tailwindcss-animate';
++ @import "tw-animate-css";
+```
+
+### March 12, 2025 - New Dark Mode Colors
+
+We've revisted the dark mode colors and updated them to be more accessible.
+
+If you're running an existing Tailwind v4 project (**not an upgraded one**[^1]), you can update your components to use the new dark mode colors by re-adding your components using the CLI[^2].
+
+<Steps>
+
+<Step>Commit any changes</Step>
+
+**The CLI will overwrite your existing components.** We recommend committing any changes you've made to your components before running the CLI.
+
+```bash
+git add .
+git commit -m "..."
+```
+
+<Step>Update components</Step>
+
+```bash
+npx shadcn@latest add --all --overwrite
+```
+
+<Step>Update colors</Step>
+
+Update the dark mode colors in your `globals.css` file to new OKLCH colors. See the [Base Colors](/docs/theming#base-colors) reference for a list of colors.
+
+<Step>Review changes</Step>
+
+Review and re-apply any changes you made to your components.
+
+</Steps>
+
+[^1]: Upgraded projects are not affected by this change. You can continue using the old dark mode colors.
+
+[^2]: Updating your components will overwrite your existing components.
diff --git a/apps/v4/content/docs/(root)/theming.mdx b/apps/v4/content/docs/(root)/theming.mdx
new file mode 100644
index 00000000000..f34a0daf29b
--- /dev/null
+++ b/apps/v4/content/docs/(root)/theming.mdx
@@ -0,0 +1,582 @@
+---
+title: Theming
+description: Using CSS Variables and color utilities for theming.
+---
+
+You can choose between using CSS variables (recommended) or utility classes for theming.
+
+## CSS Variables
+
+```tsx /bg-background/ /text-foreground/
+<div className="bg-background text-foreground" />
+```
+
+To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file.
+
+```json {8} title="components.json" showLineNumbers
+{
+  "style": "default",
+  "rsc": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
+```
+
+## Utility classes
+
+```tsx /bg-zinc-950/ /text-zinc-50/ /dark:bg-white/ /dark:text-zinc-950/
+<div className="bg-zinc-950 dark:bg-white" />
+```
+
+To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file.
+
+```json {8} title="components.json" showLineNumbers
+{
+  "style": "default",
+  "rsc": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
+```
+
+## Convention
+
+We use a simple `background` and `foreground` convention for colors. The `background` variable is used for the background color of the component and the `foreground` variable is used for the text color.
+
+<Callout className="mt-4">
+
+The `background` suffix is omitted when the variable is used for the background color of the component.
+
+</Callout>
+
+Given the following CSS variables:
+
+```css
+--primary: oklch(0.205 0 0);
+--primary-foreground: oklch(0.985 0 0);
+```
+
+The `background` color of the following component will be `var(--primary)` and the `foreground` color will be `var(--primary-foreground)`.
+
+```tsx
+<div className="bg-primary text-primary-foreground">Hello</div>
+```
+
+## List of variables
+
+Here's the list of variables available for customization:
+
+```css title="app/globals.css" showLineNumbers
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+```
+
+## Adding new colors
+
+To add new colors, you need to add them to your CSS file and to your `tailwind.config.js` file.
+
+```css title="app/globals.css" showLineNumbers
+:root {
+  --warning: oklch(0.84 0.16 84);
+  --warning-foreground: oklch(0.28 0.07 46);
+}
+
+.dark {
+  --warning: oklch(0.41 0.11 46);
+  --warning-foreground: oklch(0.99 0.02 95);
+}
+
+@theme inline {
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+}
+```
+
+You can now use the `warning` utility class in your components.
+
+```tsx /bg-warning/ /text-warning-foreground/
+<div className="bg-warning text-warning-foreground" />
+```
+
+## Other color formats
+
+See the [Tailwind CSS documentation](https://tailwindcss.com/docs/colors) for more information on using colors in Tailwind CSS.
+
+## Base Colors
+
+For reference, here's a list of the base colors that are available.
+
+### Neutral
+
+<CodeCollapsibleWrapper>
+
+```css title="app/globals.css" showLineNumbers
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+```
+
+</CodeCollapsibleWrapper>
+
+### Stone
+
+<CodeCollapsibleWrapper>
+
+```css title="app/globals.css" showLineNumbers
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.216 0.006 56.043);
+  --primary-foreground: oklch(0.985 0.001 106.423);
+  --secondary: oklch(0.97 0.001 106.424);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.216 0.006 56.043);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+}
+
+.dark {
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.923 0.003 48.717);
+  --primary-foreground: oklch(0.216 0.006 56.043);
+  --secondary: oklch(0.268 0.007 34.298);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+}
+```
+
+</CodeCollapsibleWrapper>
+
+### Zinc
+
+<CodeCollapsibleWrapper>
+
+```css title="app/globals.css" showLineNumbers
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+```
+
+</CodeCollapsibleWrapper>
+
+### Gray
+
+<CodeCollapsibleWrapper>
+
+```css title="app/globals.css" showLineNumbers
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.13 0.028 261.692);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.13 0.028 261.692);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.13 0.028 261.692);
+  --primary: oklch(0.21 0.034 264.665);
+  --primary-foreground: oklch(0.985 0.002 247.839);
+  --secondary: oklch(0.967 0.003 264.542);
+  --secondary-foreground: oklch(0.21 0.034 264.665);
+  --muted: oklch(0.967 0.003 264.542);
+  --muted-foreground: oklch(0.551 0.027 264.364);
+  --accent: oklch(0.967 0.003 264.542);
+  --accent-foreground: oklch(0.21 0.034 264.665);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.928 0.006 264.531);
+  --input: oklch(0.928 0.006 264.531);
+  --ring: oklch(0.707 0.022 261.325);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.002 247.839);
+  --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --sidebar-primary: oklch(0.21 0.034 264.665);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.967 0.003 264.542);
+  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+  --sidebar-border: oklch(0.928 0.006 264.531);
+  --sidebar-ring: oklch(0.707 0.022 261.325);
+}
+
+.dark {
+  --background: oklch(0.13 0.028 261.692);
+  --foreground: oklch(0.985 0.002 247.839);
+  --card: oklch(0.21 0.034 264.665);
+  --card-foreground: oklch(0.985 0.002 247.839);
+  --popover: oklch(0.21 0.034 264.665);
+  --popover-foreground: oklch(0.985 0.002 247.839);
+  --primary: oklch(0.928 0.006 264.531);
+  --primary-foreground: oklch(0.21 0.034 264.665);
+  --secondary: oklch(0.278 0.033 256.848);
+  --secondary-foreground: oklch(0.985 0.002 247.839);
+  --muted: oklch(0.278 0.033 256.848);
+  --muted-foreground: oklch(0.707 0.022 261.325);
+  --accent: oklch(0.278 0.033 256.848);
+  --accent-foreground: oklch(0.985 0.002 247.839);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.034 264.665);
+  --sidebar-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.278 0.033 256.848);
+  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+```
+
+</CodeCollapsibleWrapper>
+
+### Slate
+
+<CodeCollapsibleWrapper>
+
+```css title="app/globals.css" showLineNumbers
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+```
+
+</CodeCollapsibleWrapper>
diff --git a/apps/v4/content/docs/(root)/v0.mdx b/apps/v4/content/docs/(root)/v0.mdx
new file mode 100644
index 00000000000..60ac70e138d
--- /dev/null
+++ b/apps/v4/content/docs/(root)/v0.mdx
@@ -0,0 +1,30 @@
+---
+title: Open in v0
+description: Open components in v0 for customization.
+---
+
+Every component on ui.shadcn.com is editable on [v0 by Vercel](https://v0.dev). This allows you to easily customize the components in natural language and paste into your app.
+
+<a href="https://vercel.com/signup?utm_source=shad&utm_medium=web&utm_campaign=docs_cta_signup">
+  <Image
+    src="/images/open-in-v0.png"
+    width="716"
+    height="420"
+    alt="Open in v0"
+    className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
+  />
+  <Image
+    src="/images/open-in-v0-dark.png"
+    width="716"
+    height="420"
+    alt="Open in v0"
+    className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block"
+  />
+  <span className="sr-only">Open in v0</span>
+</a>
+
+To use v0, sign-up for a free [Vercel account here](https://vercel.com/signup?utm_source=shad&utm_medium=web&utm_campaign=docs_cta_signup). In addition to v0, this gives you free access to Vercel's frontend cloud platform by the creators of Next.js, where you can deploy and host your project for free.
+
+Learn more about getting started with [Vercel here](https://vercel.com/docs/getting-started-with-vercel?utm_source=shadcn_site&utm_medium=web&utm_campaign=docs_cta_about_vercel).
+
+Learn more about getting started with [v0 here](https://v0.dev/faq).
diff --git a/apps/v4/content/docs/components/accordion.mdx b/apps/v4/content/docs/components/accordion.mdx
new file mode 100644
index 00000000000..fb5cd44281c
--- /dev/null
+++ b/apps/v4/content/docs/components/accordion.mdx
@@ -0,0 +1,76 @@
+---
+title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/accordion
+  api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference
+---
+
+<ComponentPreview
+  name="accordion-demo"
+  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]"
+  description="An accordion with three items"
+  align="start"
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add accordion
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-accordion
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="accordion" title="components/ui/accordion.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+```
+
+```tsx showLineNumbers
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
diff --git a/apps/v4/content/docs/components/alert-dialog.mdx b/apps/v4/content/docs/components/alert-dialog.mdx
new file mode 100644
index 00000000000..d85d30f0579
--- /dev/null
+++ b/apps/v4/content/docs/components/alert-dialog.mdx
@@ -0,0 +1,88 @@
+---
+title: Alert Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+featured: true
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/alert-dialog
+  api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference
+---
+
+<ComponentPreview
+  name="alert-dialog-demo"
+  title="An alert dialog with cancel and continue buttons."
+  description="An alert dialog with cancel and continue buttons."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add alert-dialog
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-alert-dialog
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="alert-dialog" title="components/ui/alert-dialog.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+```
+
+```tsx showLineNumbers
+<AlertDialog>
+  <AlertDialogTrigger>Open</AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Continue</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
diff --git a/apps/v4/content/docs/components/alert.mdx b/apps/v4/content/docs/components/alert.mdx
new file mode 100644
index 00000000000..ec3d6f2d425
--- /dev/null
+++ b/apps/v4/content/docs/components/alert.mdx
@@ -0,0 +1,59 @@
+---
+title: Alert
+description: Displays a callout for user attention.
+component: true
+---
+
+<ComponentPreview
+  name="alert-demo"
+  title="An alert with an icon, title and description."
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add alert
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="alert" title="components/ui/alert.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+```
+
+```tsx showLineNumbers
+<Alert variant="default | destructive">
+  <Terminal />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```
diff --git a/apps/v4/content/docs/components/aspect-ratio.mdx b/apps/v4/content/docs/components/aspect-ratio.mdx
new file mode 100644
index 00000000000..958f6d054a1
--- /dev/null
+++ b/apps/v4/content/docs/components/aspect-ratio.mdx
@@ -0,0 +1,64 @@
+---
+title: Aspect Ratio
+description: Displays content within a desired ratio.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/aspect-ratio
+  api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference
+---
+
+<ComponentPreview
+  name="aspect-ratio-demo"
+  title="Aspect Ratio"
+  description="A component that displays an image with a 16:9 aspect ratio."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add aspect-ratio
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-aspect-ratio
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="aspect-ratio" title="components/ui/aspect-ratio.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { AspectRatio } from "@/components/ui/aspect-ratio"
+```
+
+```tsx showLineNumbers
+<AspectRatio ratio={16 / 9}>
+  <Image src="..." alt="Image" className="rounded-md object-cover" />
+</AspectRatio>
+```
diff --git a/apps/v4/content/docs/components/avatar.mdx b/apps/v4/content/docs/components/avatar.mdx
new file mode 100644
index 00000000000..a20c1259a9b
--- /dev/null
+++ b/apps/v4/content/docs/components/avatar.mdx
@@ -0,0 +1,65 @@
+---
+title: Avatar
+description: An image element with a fallback for representing the user.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/avatar
+  api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
+---
+
+<ComponentPreview
+  name="avatar-demo"
+  title="Avatar"
+  description="An avatar with a fallback."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add avatar
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-avatar
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="avatar" title="components/ui/avatar.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+```
+
+```tsx showLineNumbers
+<Avatar>
+  <AvatarImage src="https://github.com/shadcn.png" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>
+```
diff --git a/apps/v4/content/docs/components/badge.mdx b/apps/v4/content/docs/components/badge.mdx
new file mode 100644
index 00000000000..974eded49d7
--- /dev/null
+++ b/apps/v4/content/docs/components/badge.mdx
@@ -0,0 +1,71 @@
+---
+title: Badge
+description: Displays a badge or a component that looks like a badge.
+component: true
+---
+
+<ComponentPreview
+  name="badge-demo"
+  title="Badge"
+  description="A default badge"
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add badge
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="badge" title="components/ui/badge.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Badge } from "@/components/ui/badge"
+```
+
+```tsx
+<Badge variant="default |outline | secondary | destructive">Badge</Badge>
+```
+
+### Link
+
+You can use the `asChild` prop to make another component look like a badge. Here's an example of a link that looks like a badge.
+
+```tsx showLineNumbers
+import { Link } from "next/link"
+
+import { Badge } from "@/components/ui/badge"
+
+export function LinkAsBadge() {
+  return (
+    <Badge asChild>
+      <Link href="/">Badge</Link>
+    </Badge>
+  )
+}
+```
diff --git a/apps/v4/content/docs/components/breadcrumb.mdx b/apps/v4/content/docs/components/breadcrumb.mdx
new file mode 100644
index 00000000000..12f98707649
--- /dev/null
+++ b/apps/v4/content/docs/components/breadcrumb.mdx
@@ -0,0 +1,211 @@
+---
+title: Breadcrumb
+description: Displays the path to the current resource using a hierarchy of links.
+component: true
+---
+
+<ComponentPreview
+  name="breadcrumb-demo"
+  className="[&_.preview]:p-2"
+  description="A breadcrumb with a collapsible dropdown."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add breadcrumb
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="breadcrumb" title="components/ui/breadcrumb.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+```
+
+```tsx showLineNumbers
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+## Examples
+
+### Custom separator
+
+Use a custom component as `children` for `<BreadcrumbSeparator />` to create a custom separator.
+
+<ComponentPreview
+  name="breadcrumb-separator"
+  description="A breadcrumb with a custom separator"
+/>
+
+```tsx showLineNumbers {1,10-12}
+import { SlashIcon } from "lucide-react"
+
+...
+
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator>
+      <SlashIcon />
+    </BreadcrumbSeparator>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+---
+
+### Dropdown
+
+You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb.
+
+<ComponentPreview
+  name="breadcrumb-dropdown"
+  className="[&_.preview]:p-2"
+  description="A breadcrumb with a dropdown."
+/>
+
+```tsx showLineNumbers {1-6,11-21}
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+...
+
+<BreadcrumbItem>
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      Components
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start">
+      <DropdownMenuItem>Documentation</DropdownMenuItem>
+      <DropdownMenuItem>Themes</DropdownMenuItem>
+      <DropdownMenuItem>GitHub</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</BreadcrumbItem>
+```
+
+---
+
+### Collapsed
+
+We provide a `<BreadcrumbEllipsis />` component to show a collapsed state when the breadcrumb is too long.
+
+<ComponentPreview
+  name="breadcrumb-ellipsis"
+  className="[&_.preview]:p-2"
+  description="A breadcrumb showing a collapsed state."
+/>
+
+```tsx showLineNumbers {1,9}
+import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"
+
+...
+
+<Breadcrumb>
+  <BreadcrumbList>
+    {/* ... */}
+    <BreadcrumbItem>
+      <BreadcrumbEllipsis />
+    </BreadcrumbItem>
+    {/* ... */}
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+---
+
+### Link component
+
+To use a custom link component from your routing library, you can use the `asChild` prop on `<BreadcrumbLink />`.
+
+<ComponentPreview
+  name="breadcrumb-link"
+  description="A breadcrumb with a custom Link component"
+/>
+
+```tsx showLineNumbers {1,8-10}
+import { Link } from "next/link"
+
+...
+
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink asChild>
+        <Link href="/">Home</Link>
+      </BreadcrumbLink>
+    </BreadcrumbItem>
+    {/* ... */}
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+---
+
+### Responsive
+
+Here's an example of a responsive breadcrumb that composes `<BreadcrumbItem />` with `<BreadcrumbEllipsis />`, `<DropdownMenu />`, and `<Drawer />`.
+
+It displays a dropdown on desktop and a drawer on mobile.
+
+<ComponentPreview
+  name="breadcrumb-responsive"
+  className="[&_.preview]:p-2"
+  description="A responsive breadcrumb. It displays a dropdown on desktop and a drawer on mobile."
+/>
diff --git a/apps/v4/content/docs/components/button.mdx b/apps/v4/content/docs/components/button.mdx
new file mode 100644
index 00000000000..c3e310aa516
--- /dev/null
+++ b/apps/v4/content/docs/components/button.mdx
@@ -0,0 +1,127 @@
+---
+title: Button
+description: Displays a button or a component that looks like a button.
+featured: true
+component: true
+---
+
+<ComponentPreview name="button-demo" description="A button" />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add button
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-slot
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="button" title="components/ui/button.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Button } from "@/components/ui/button"
+```
+
+```tsx
+<Button variant="outline">Button</Button>
+```
+
+## Link
+
+You can use the `asChild` prop to make another component look like a button. Here's an example of a link that looks like a button.
+
+```tsx showLineNumbers
+import { Link } from "next/link"
+
+import { Button } from "@/components/ui/button"
+
+export function LinkAsButton() {
+  return (
+    <Button asChild>
+      <Link href="/login">Login</Link>
+    </Button>
+  )
+}
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="button-demo" description="A primary button" />
+
+### Secondary
+
+<ComponentPreview name="button-secondary" description="A secondary button" />
+
+### Destructive
+
+<ComponentPreview
+  name="button-destructive"
+  description="A destructive button"
+/>
+
+### Outline
+
+<ComponentPreview
+  name="button-outline"
+  description="A button using the outline variant."
+/>
+
+### Ghost
+
+<ComponentPreview
+  name="button-ghost"
+  description="A button using the ghost variant"
+/>
+
+### Link
+
+<ComponentPreview
+  name="button-link"
+  description="A button using the link variant."
+/>
+
+### Icon
+
+<ComponentPreview name="button-icon" description="An icon button" />
+
+### With Icon
+
+<ComponentPreview name="button-with-icon" description="A button with an icon" />
+
+### Loading
+
+<ComponentPreview
+  name="button-loading"
+  description="A button with a loading state."
+/>
diff --git a/apps/v4/content/docs/components/calendar.mdx b/apps/v4/content/docs/components/calendar.mdx
new file mode 100644
index 00000000000..315c20e2327
--- /dev/null
+++ b/apps/v4/content/docs/components/calendar.mdx
@@ -0,0 +1,419 @@
+---
+title: Calendar
+description: A date field component that allows users to enter and edit date.
+component: true
+links:
+  doc: https://react-day-picker.js.org
+---
+
+<ComponentPreview
+  name="calendar-demo"
+  title="Calendar"
+  description="A calendar showing the current date."
+/>
+
+## Blocks
+
+We have built a collection of 30+ calendar blocks that you can use to build your own calendar components.
+
+See all calendar blocks in the [Blocks Library](/blocks/calendar) page.
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add calendar
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install react-day-picker date-fns
+```
+
+<Step>Add the `Button` component to your project.</Step>
+
+The `Calendar` component uses the `Button` component. Make sure you have it installed in your project.
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="calendar" title="components/ui/calendar.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { Calendar } from "@/components/ui/calendar"
+```
+
+```tsx showLineNumbers
+const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+return (
+  <Calendar
+    mode="single"
+    selected={date}
+    onSelect={setDate}
+    className="rounded-lg border"
+  />
+)
+```
+
+See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
+
+## About
+
+The `Calendar` component is built on top of [React DayPicker](https://react-day-picker.js.org).
+
+## Customization
+
+See the [React DayPicker](https://react-day-picker.js.org/docs/customization) documentation for more information on how to customize the `Calendar` component.
+
+## Date Picker
+
+You can use the `<Calendar>` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information.
+
+## Persian / Hijri / Jalali Calendar
+
+To use the Persian calendar, edit `components/ui/calendar.tsx` and replace `react-day-picker` with `react-day-picker/persian`.
+
+```diff
+- import { DayPicker } from "react-day-picker"
++ import { DayPicker } from "react-day-picker/persian"
+```
+
+<ComponentPreview
+  name="calendar-hijri"
+  title="Persian / Hijri / Jalali Calendar"
+  description="A Persian calendar."
+/>
+
+## Examples
+
+### Range Calendar
+
+<ComponentPreview
+  name="calendar-02"
+  title="Range Calendar"
+  description="A calendar showing the current date and range selection."
+  className="**:[.preview]:h-auto lg:**:[.preview]:h-[450px]"
+/>
+
+### Month and Year Selector
+
+<ComponentPreview
+  name="calendar-13"
+  title="Month and Year Selector"
+  description="A calendar with month and year dropdowns."
+/>
+
+### Date of Birth Picker
+
+<ComponentPreview
+  name="calendar-22"
+  title="Date of Birth Picker"
+  description="A calendar with date of birth picker."
+/>
+
+### Date and Time Picker
+
+<ComponentPreview
+  name="calendar-24"
+  title="Date and Time Picker"
+  description="A calendar with date and time picker."
+/>
+
+### Natural Language Picker
+
+This component uses the `chrono-node` library to parse natural language dates.
+
+<ComponentPreview
+  name="calendar-29"
+  title="Natural Language Picker"
+  description="A calendar with natural language picker."
+/>
+
+### Form
+
+<ComponentPreview name="calendar-form" />
+
+## Upgrade Guide
+
+### Tailwind v4
+
+If you're already using Tailwind v4, you can upgrade to the latest version of the `Calendar` component by running the following command:
+
+```bash
+npx shadcn@latest add calendar
+```
+
+When you're prompted to overwrite the existing `Calendar` component, select `Yes`. **If you have made any changes to the `Calendar` component, you will need to merge your changes with the new version.**
+
+This will update the `Calendar` component and `react-day-picker` to the latest version.
+
+Next, follow the [React DayPicker](https://daypicker.dev/upgrading) upgrade guide to upgrade your existing components to the latest version.
+
+#### Installing Blocks
+
+After upgrading the `Calendar` component, you can install the new blocks by running the `shadcn@latest add` command.
+
+```bash
+npx shadcn@latest add calendar-02
+```
+
+This will install the latest version of the calendar blocks.
+
+### Tailwind v3
+
+If you're using Tailwind v3, you can upgrade to the latest version of the `Calendar` by copying the following code to your `calendar.tsx` file.
+
+<CodeCollapsibleWrapper>
+
+```tsx showLineNumbers title="components/ui/calendar.tsx"
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
+```
+
+</CodeCollapsibleWrapper>
+
+**If you have made any changes to the `Calendar` component, you will need to merge your changes with the new version.**
+
+Then follow the [React DayPicker](https://daypicker.dev/upgrading) upgrade guide to upgrade your dependencies and existing components to the latest version.
+
+#### Installing Blocks
+
+After upgrading the `Calendar` component, you can install the new blocks by running the `shadcn@latest add` command.
+
+```bash
+npx shadcn@latest add calendar-02
+```
+
+This will install the latest version of the calendar blocks.
diff --git a/apps/v4/content/docs/components/card.mdx b/apps/v4/content/docs/components/card.mdx
new file mode 100644
index 00000000000..c5b2633b341
--- /dev/null
+++ b/apps/v4/content/docs/components/card.mdx
@@ -0,0 +1,69 @@
+---
+title: Card
+description: Displays a card with header, content, and footer.
+component: true
+---
+
+<ComponentPreview name="card-demo" description="A card with a form" />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add card
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="card" title="components/ui/card.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+```
+
+```tsx showLineNumbers
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+    <CardAction>Card Action</CardAction>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
+</Card>
+```
diff --git a/apps/v4/content/docs/components/carousel.mdx b/apps/v4/content/docs/components/carousel.mdx
new file mode 100644
index 00000000000..73461ccc8c2
--- /dev/null
+++ b/apps/v4/content/docs/components/carousel.mdx
@@ -0,0 +1,301 @@
+---
+title: Carousel
+description: A carousel with motion and swipe built using Embla.
+component: true
+links:
+  doc: https://www.embla-carousel.com/get-started/react
+  api: https://www.embla-carousel.com/api
+---
+
+<ComponentPreview
+  name="carousel-demo"
+  title="Carousel"
+  description="A carousel with 5 items and a previous and next button."
+/>
+
+## About
+
+The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/) library.
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add carousel
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install embla-carousel-react
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="carousel" title="components/ui/carousel.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel"
+```
+
+```tsx showLineNumbers
+<Carousel>
+  <CarouselContent>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>
+```
+
+## Examples
+
+### Sizes
+
+To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
+
+<ComponentPreview
+  name="carousel-size"
+  title="Carousel"
+  description="A carousel with 3 active items of equal size."
+/>
+
+```tsx showLineNumbers {4-6}
+// 33% of the carousel width.
+<Carousel>
+  <CarouselContent>
+    <CarouselItem className="basis-1/3">...</CarouselItem>
+    <CarouselItem className="basis-1/3">...</CarouselItem>
+    <CarouselItem className="basis-1/3">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+```tsx showLineNumbers {4-6}
+// 50% on small screens and 33% on larger screens.
+<Carousel>
+  <CarouselContent>
+    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
+    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
+    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+### Spacing
+
+To set the spacing between the items, we use a `pl-[VALUE]` utility on the `<CarouselItem />` and a negative `-ml-[VALUE]` on the `<CarouselContent />`.
+
+<Callout className="mt-6">
+  **Why:** I tried to use the `gap` property or a `grid` layout on the `
+  <CarouselContent />` but it required a lot of math and mental effort to get the
+  spacing right. I found `pl-[VALUE]` and `-ml-[VALUE]` utilities much easier to
+  use.
+
+You can always adjust this in your own project if you need to.
+
+</Callout>
+
+<ComponentPreview
+  name="carousel-spacing"
+  title="Carousel"
+  description="A carousel with 3 items with a spacing of 1rem."
+/>
+
+```tsx showLineNumbers /-ml-4/ /pl-4/
+<Carousel>
+  <CarouselContent className="-ml-4">
+    <CarouselItem className="pl-4">...</CarouselItem>
+    <CarouselItem className="pl-4">...</CarouselItem>
+    <CarouselItem className="pl-4">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+```tsx showLineNumbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/
+<Carousel>
+  <CarouselContent className="-ml-2 md:-ml-4">
+    <CarouselItem className="pl-2 md:pl-4">...</CarouselItem>
+    <CarouselItem className="pl-2 md:pl-4">...</CarouselItem>
+    <CarouselItem className="pl-2 md:pl-4">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+### Orientation
+
+Use the `orientation` prop to set the orientation of the carousel.
+
+<ComponentPreview
+  name="carousel-orientation"
+  title="Carousel"
+  description="A vertical carousel."
+/>
+
+```tsx showLineNumbers /vertical | horizontal/
+<Carousel orientation="vertical | horizontal">
+  <CarouselContent>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+## Options
+
+You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information.
+
+```tsx showLineNumbers {2-5}
+<Carousel
+  opts={{
+    align: "start",
+    loop: true,
+  }}
+>
+  <CarouselContent>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+## API
+
+Use a state and the `setApi` props to get an instance of the carousel API.
+
+<ComponentPreview
+  name="carousel-api"
+  title="Carousel"
+  description="A carousel with a slide counter."
+/>
+
+```tsx showLineNumbers {1,4,22}
+import { type CarouselApi } from "@/components/ui/carousel"
+
+export function Example() {
+  const [api, setApi] = React.useState<CarouselApi>()
+  const [current, setCurrent] = React.useState(0)
+  const [count, setCount] = React.useState(0)
+
+  React.useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    setCount(api.scrollSnapList().length)
+    setCurrent(api.selectedScrollSnap() + 1)
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1)
+    })
+  }, [api])
+
+  return (
+    <Carousel setApi={setApi}>
+      <CarouselContent>
+        <CarouselItem>...</CarouselItem>
+        <CarouselItem>...</CarouselItem>
+        <CarouselItem>...</CarouselItem>
+      </CarouselContent>
+    </Carousel>
+  )
+}
+```
+
+## Events
+
+You can listen to events using the api instance from `setApi`.
+
+```tsx showLineNumbers {1,4-14,16}
+import { type CarouselApi } from "@/components/ui/carousel"
+
+export function Example() {
+  const [api, setApi] = React.useState<CarouselApi>()
+
+  React.useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    api.on("select", () => {
+      // Do something on select.
+    })
+  }, [api])
+
+  return (
+    <Carousel setApi={setApi}>
+      <CarouselContent>
+        <CarouselItem>...</CarouselItem>
+        <CarouselItem>...</CarouselItem>
+        <CarouselItem>...</CarouselItem>
+      </CarouselContent>
+    </Carousel>
+  )
+}
+```
+
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
+
+## Plugins
+
+You can use the `plugins` prop to add plugins to the carousel.
+
+```ts showLineNumbers {1,6-10}
+import Autoplay from "embla-carousel-autoplay"
+
+export function Example() {
+  return (
+    <Carousel
+      plugins={[
+        Autoplay({
+          delay: 2000,
+        }),
+      ]}
+    >
+      // ...
+    </Carousel>
+  )
+}
+```
+
+<ComponentPreview
+  name="carousel-plugin"
+  title="Carousel"
+  description="A carousel with the autoplay plugin."
+/>
+
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
diff --git a/apps/v4/content/docs/components/chart.mdx b/apps/v4/content/docs/components/chart.mdx
new file mode 100644
index 00000000000..0af34d501aa
--- /dev/null
+++ b/apps/v4/content/docs/components/chart.mdx
@@ -0,0 +1,599 @@
+---
+title: Chart
+description: Beautiful charts. Built using Recharts. Copy and paste into your apps.
+component: true
+---
+
+<Callout>
+
+**Note:** We're working on upgrading to Recharts v3. In the meantime, if you'd like to start testing v3, see the code in the comment [here](https://github.com/shadcn-ui/ui/issues/7669#issuecomment-2998299159). We'll have an official release soon.
+
+</Callout>
+
+<ComponentPreview
+  name="chart-bar-interactive"
+  className="theme-blue [&_.preview]:h-auto [&_.preview]:p-0 [&_.preview]:lg:min-h-[404px] [&_.preview>div]:w-full [&_.preview>div]:border-none [&_.preview>div]:shadow-none"
+  hideCode
+/>
+
+Introducing **Charts**. A collection of chart components that you can copy and paste into your apps.
+
+Charts are designed to look great out of the box. They work well with the other components and are fully customizable to fit your project.
+
+[Browse the Charts Library](/charts).
+
+## Component
+
+We use [Recharts](https://recharts.org/) under the hood.
+
+We designed the `chart` component with composition in mind. **You build your charts using Recharts components and only bring in custom components, such as `ChartTooltip`, when and where you need it**.
+
+```tsx showLineNumbers /ChartContainer/ /ChartTooltipContent/
+import { Bar, BarChart } from "recharts"
+
+import { ChartContainer, ChartTooltipContent } from "@/components/ui/charts"
+
+export function MyChart() {
+  return (
+    <ChartContainer>
+      <BarChart data={data}>
+        <Bar dataKey="value" />
+        <ChartTooltip content={<ChartTooltipContent />} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
+```
+
+We do not wrap Recharts. This means you're not locked into an abstraction. When a new Recharts version is released, you can follow the official upgrade path to upgrade your charts.
+
+**The components are yours**.
+
+## Installation
+
+<Callout className="mt-4">
+
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
+
+</Callout>
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Run the following command to install `chart.tsx`</Step>
+
+```bash
+npx shadcn@latest add chart
+```
+
+<Step>Add the following colors to your CSS file</Step>
+
+```css title="app/globals.css" showLineNumbers
+@layer base {
+  :root {
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+  }
+
+  .dark {
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+  }
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install recharts
+```
+
+<Step>Copy and paste the following code into `components/ui/chart.tsx`.</Step>
+
+<ComponentSource name="chart" title="components/ui/chart.tsx" />
+
+<Step>Add the following colors to your CSS file</Step>
+
+```css title="app/globals.css" showLineNumbers
+@layer base {
+  :root {
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+  }
+
+  .dark {
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+  }
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Your First Chart
+
+Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.
+
+<Steps>
+
+<Step>Start by defining your data</Step>
+
+The following data represents the number of desktop and mobile users for each month.
+
+<Callout className="mt-4">
+
+**Note:** Your data can be in any shape. You are not limited to the shape of the data below. Use the `dataKey` prop to map your data to the chart.
+
+</Callout>
+
+```tsx title="components/example-chart.tsx" showLineNumbers
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+```
+
+<Step>Define your chart config</Step>
+
+The chart config holds configuration for the chart. This is where you place human-readable strings, such as labels, icons and color tokens for theming.
+
+```tsx title="components/example-chart.tsx" showLineNumbers
+import { type ChartConfig } from "@/components/ui/chart"
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig
+```
+
+<Step>Build your chart</Step>
+
+You can now build your chart using Recharts components.
+
+<Callout className="mt-4 bg-amber-50 border-amber-200 dark:bg-amber-950/50 dark:border-amber-950">
+
+**Important:** Remember to set a `min-h-[VALUE]` on the `ChartContainer` component. This is required for the chart be responsive.
+
+</Callout>
+
+<ComponentSource name="chart-bar-demo" title="components/example-chart.tsx" />
+
+<ComponentPreview
+  name="chart-bar-demo"
+  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+/>
+
+</Steps>
+
+### Add a Grid
+
+Let's add a grid to the chart.
+
+<Steps>
+
+<Step>Import the `CartesianGrid` component.</Step>
+
+```tsx /CartesianGrid/
+import { Bar, BarChart, CartesianGrid } from "recharts"
+```
+
+<Step>Add the `CartesianGrid` component to your chart.</Step>
+
+```tsx showLineNumbers {3}
+<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+  <BarChart accessibilityLayer data={chartData}>
+    <CartesianGrid vertical={false} />
+    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+  </BarChart>
+</ChartContainer>
+```
+
+<ComponentPreview
+  name="chart-bar-demo-grid"
+  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+/>
+
+</Steps>
+
+### Add an Axis
+
+To add an x-axis to the chart, we'll use the `XAxis` component.
+
+<Steps>
+
+<Step>Import the `XAxis` component.</Step>
+
+```tsx /XAxis/
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+```
+
+<Step>Add the `XAxis` component to your chart.</Step>
+
+```tsx showLineNumbers {4-10}
+<ChartContainer config={chartConfig} className="h-[200px] w-full">
+  <BarChart accessibilityLayer data={chartData}>
+    <CartesianGrid vertical={false} />
+    <XAxis
+      dataKey="month"
+      tickLine={false}
+      tickMargin={10}
+      axisLine={false}
+      tickFormatter={(value) => value.slice(0, 3)}
+    />
+    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+  </BarChart>
+</ChartContainer>
+```
+
+<ComponentPreview
+  name="chart-bar-demo-axis"
+  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+/>
+
+</Steps>
+
+### Add Tooltip
+
+So far we've only used components from Recharts. They look great out of the box thanks to some customization in the `chart` component.
+
+To add a tooltip, we'll use the custom `ChartTooltip` and `ChartTooltipContent` components from `chart`.
+
+<Steps>
+
+<Step>Import the `ChartTooltip` and `ChartTooltipContent` components.</Step>
+
+```tsx
+import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
+```
+
+<Step>Add the components to your chart.</Step>
+
+```tsx showLineNumbers {11}
+<ChartContainer config={chartConfig} className="h-[200px] w-full">
+  <BarChart accessibilityLayer data={chartData}>
+    <CartesianGrid vertical={false} />
+    <XAxis
+      dataKey="month"
+      tickLine={false}
+      tickMargin={10}
+      axisLine={false}
+      tickFormatter={(value) => value.slice(0, 3)}
+    />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+  </BarChart>
+</ChartContainer>
+```
+
+<ComponentPreview
+  name="chart-bar-demo-tooltip"
+  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+/>
+
+Hover to see the tooltips. Easy, right? Two components, and we've got a beautiful tooltip.
+
+</Steps>
+
+### Add Legend
+
+We'll do the same for the legend. We'll use the `ChartLegend` and `ChartLegendContent` components from `chart`.
+
+<Steps>
+
+<Step>Import the `ChartLegend` and `ChartLegendContent` components.</Step>
+
+```tsx
+import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
+```
+
+<Step>Add the components to your chart.</Step>
+
+```tsx showLineNumbers {12}
+<ChartContainer config={chartConfig} className="h-[200px] w-full">
+  <BarChart accessibilityLayer data={chartData}>
+    <CartesianGrid vertical={false} />
+    <XAxis
+      dataKey="month"
+      tickLine={false}
+      tickMargin={10}
+      axisLine={false}
+      tickFormatter={(value) => value.slice(0, 3)}
+    />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <ChartLegend content={<ChartLegendContent />} />
+    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+  </BarChart>
+</ChartContainer>
+```
+
+<ComponentPreview
+  name="chart-bar-demo-legend"
+  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+/>
+
+</Steps>
+
+Done. You've built your first chart! What's next?
+
+- [Themes and Colors](/docs/components/chart#theming)
+- [Tooltip](/docs/components/chart#tooltip)
+- [Legend](/docs/components/chart#legend)
+
+## Chart Config
+
+The chart config is where you define the labels, icons and colors for a chart.
+
+It is intentionally decoupled from chart data.
+
+This allows you to share config and color tokens between charts. It can also works independently for cases where your data or color tokens live remotely or in a different format.
+
+```tsx showLineNumbers /ChartConfig/
+import { Monitor } from "lucide-react"
+
+import { type ChartConfig } from "@/components/ui/chart"
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    icon: Monitor,
+    // A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'
+    color: "#2563eb",
+    // OR a theme object with 'light' and 'dark' keys
+    theme: {
+      light: "#2563eb",
+      dark: "#dc2626",
+    },
+  },
+} satisfies ChartConfig
+```
+
+## Theming
+
+Charts has built-in support for theming. You can use css variables (recommended) or color values in any color format, such as hex, hsl or oklch.
+
+### CSS Variables
+
+<Steps>
+
+<Step>Define your colors in your css file</Step>
+
+```css {6-7,14-15} title="app/globals.css" showLineNumbers
+@layer base {
+  :root {
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+  }
+
+  .dark: {
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+  }
+}
+```
+
+<Step>Add the color to your `chartConfig`</Step>
+
+```tsx {4,8} showLineNumbers
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+```
+
+</Steps>
+
+### hex, hsl or oklch
+
+You can also define your colors directly in the chart config. Use the color format you prefer.
+
+```tsx showLineNumbers
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+} satisfies ChartConfig
+```
+
+### Using Colors
+
+To use the theme colors in your chart, reference the colors using the format `var(--color-KEY)`.
+
+#### Components
+
+```tsx
+<Bar dataKey="desktop" fill="var(--color-desktop)" />
+```
+
+#### Chart Data
+
+```tsx showLineNumbers
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+]
+```
+
+#### Tailwind
+
+```tsx
+<LabelList className="fill-[--color-desktop]" />
+```
+
+## Tooltip
+
+A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.
+
+<ComponentPreview
+  name="chart-tooltip-demo"
+  className="[&_.preview]:py-0"
+  hideCode
+/>
+
+You can turn on/off any of these using the `hideLabel`, `hideIndicator` props and customize the indicator style using the `indicator` prop.
+
+Use `labelKey` and `nameKey` to use a custom key for the tooltip label and name.
+
+Chart comes with the `<ChartTooltip>` and `<ChartTooltipContent>` components. You can use these two components to add custom tooltips to your chart.
+
+```tsx
+import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
+```
+
+```tsx
+<ChartTooltip content={<ChartTooltipContent />} />
+```
+
+### Props
+
+Use the following props to customize the tooltip.
+
+| Prop            | Type                     | Description                                  |
+| :-------------- | :----------------------- | :------------------------------------------- |
+| `labelKey`      | string                   | The config or data key to use for the label. |
+| `nameKey`       | string                   | The config or data key to use for the name.  |
+| `indicator`     | `dot` `line` or `dashed` | The indicator style for the tooltip.         |
+| `hideLabel`     | boolean                  | Whether to hide the label.                   |
+| `hideIndicator` | boolean                  | Whether to hide the indicator.               |
+
+### Colors
+
+Colors are automatically referenced from the chart config.
+
+### Custom
+
+To use a custom key for tooltip label and names, use the `labelKey` and `nameKey` props.
+
+```tsx showLineNumbers /browser/
+const chartData = [
+  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Total Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+```
+
+```tsx
+<ChartTooltip
+  content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />}
+/>
+```
+
+This will use `Total Visitors` for label and `Chrome` and `Safari` for the tooltip names.
+
+## Legend
+
+You can use the custom `<ChartLegend>` and `<ChartLegendContent>` components to add a legend to your chart.
+
+```tsx
+import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
+```
+
+```tsx
+<ChartLegend content={<ChartLegendContent />} />
+```
+
+### Colors
+
+Colors are automatically referenced from the chart config.
+
+### Custom
+
+To use a custom key for legend names, use the `nameKey` prop.
+
+```tsx showLineNumbers /browser/
+const chartData = [
+  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+```
+
+```tsx
+<ChartLegend content={<ChartLegendContent nameKey="browser" />} />
+```
+
+This will use `Chrome` and `Safari` for the legend names.
+
+## Accessibility
+
+You can turn on the `accessibilityLayer` prop to add an accessible layer to your chart.
+
+This prop adds keyboard access and screen reader support to your charts.
+
+```tsx
+<LineChart accessibilityLayer />
+```
diff --git a/apps/v4/content/docs/components/checkbox.mdx b/apps/v4/content/docs/components/checkbox.mdx
new file mode 100644
index 00000000000..3b2ef2e9c4d
--- /dev/null
+++ b/apps/v4/content/docs/components/checkbox.mdx
@@ -0,0 +1,64 @@
+---
+title: Checkbox
+description: A control that allows the user to toggle between checked and not checked.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/checkbox
+  api: https://www.radix-ui.com/docs/primitives/components/checkbox#api-reference
+---
+
+<ComponentPreview name="checkbox-demo" description="A checkbox" />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add checkbox
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-checkbox
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="checkbox" title="components/ui/checkbox.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Checkbox } from "@/components/ui/checkbox"
+```
+
+```tsx
+<Checkbox />
+```
+
+## Examples
+
+### Form
+
+<ComponentPreview name="checkbox-form-multiple" />
diff --git a/apps/v4/content/docs/components/collapsible.mdx b/apps/v4/content/docs/components/collapsible.mdx
new file mode 100644
index 00000000000..d3b18f7bcd7
--- /dev/null
+++ b/apps/v4/content/docs/components/collapsible.mdx
@@ -0,0 +1,72 @@
+---
+title: Collapsible
+description: An interactive component which expands/collapses a panel.
+component: true
+featured: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/collapsible
+  api: https://www.radix-ui.com/docs/primitives/components/collapsible#api-reference
+---
+
+<ComponentPreview
+  name="collapsible-demo"
+  description="A collapsible component."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add collapsible
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-collapsible
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="collapsible" title="components/ui/collapsible.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+```
+
+```tsx showLineNumbers
+<Collapsible>
+  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
+  <CollapsibleContent>
+    Yes. Free to use for personal and commercial projects. No attribution
+    required.
+  </CollapsibleContent>
+</Collapsible>
+```
diff --git a/apps/v4/content/docs/components/combobox.mdx b/apps/v4/content/docs/components/combobox.mdx
new file mode 100644
index 00000000000..6c76d585f38
--- /dev/null
+++ b/apps/v4/content/docs/components/combobox.mdx
@@ -0,0 +1,149 @@
+---
+title: Combobox
+description: Autocomplete input and command palette with a list of suggestions.
+component: true
+---
+
+<ComponentPreview
+  name="combobox-demo"
+  description="A combobox with a list of frameworks."
+/>
+
+## Installation
+
+The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
+
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
+
+## Usage
+
+<CodeCollapsibleWrapper>
+
+```tsx showLineNumbers title="components/example-combobox.tsx"
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+const frameworks = [
+  {
+    value: "next.js",
+    label: "Next.js",
+  },
+  {
+    value: "sveltekit",
+    label: "SvelteKit",
+  },
+  {
+    value: "nuxt.js",
+    label: "Nuxt.js",
+  },
+  {
+    value: "remix",
+    label: "Remix",
+  },
+  {
+    value: "astro",
+    label: "Astro",
+  },
+]
+
+export function ExampleCombobox() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
+          <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  <CheckIcon
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {framework.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+```
+
+</CodeCollapsibleWrapper>
+
+## Examples
+
+### Combobox
+
+<ComponentPreview
+  name="combobox-demo"
+  description="A combobox with a list of frameworks."
+/>
+
+### Popover
+
+<ComponentPreview name="combobox-popover" />
+
+### Dropdown menu
+
+<ComponentPreview
+  name="combobox-dropdown-menu"
+  description="A combobox in a dropdown menu"
+/>
+
+### Responsive
+
+You can create a responsive combobox by using the `<Popover />` on desktop and the `<Drawer />` components on mobile.
+
+<ComponentPreview name="combobox-responsive" />
+
+### Form
+
+<ComponentPreview name="combobox-form" />
diff --git a/apps/v4/content/docs/components/command.mdx b/apps/v4/content/docs/components/command.mdx
new file mode 100644
index 00000000000..7784dae9eed
--- /dev/null
+++ b/apps/v4/content/docs/components/command.mdx
@@ -0,0 +1,138 @@
+---
+title: Command
+description: Fast, composable, unstyled command menu for React.
+component: true
+links:
+  doc: https://cmdk.paco.me
+---
+
+<ComponentPreview
+  name="command-demo"
+  align="start"
+  className="[&_.preview>div]:max-w-[450px]"
+  description="A command menu"
+/>
+
+## About
+
+The `<Command />` component uses the [`cmdk`](https://cmdk.paco.me) component by [pacocoursey](https://twitter.com/pacocoursey).
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add command
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install cmdk
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="command" title="components/ui/command.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/components/ui/command"
+```
+
+```tsx showLineNumbers
+<Command>
+  <CommandInput placeholder="Type a command or search..." />
+  <CommandList>
+    <CommandEmpty>No results found.</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>Calendar</CommandItem>
+      <CommandItem>Search Emoji</CommandItem>
+      <CommandItem>Calculator</CommandItem>
+    </CommandGroup>
+    <CommandSeparator />
+    <CommandGroup heading="Settings">
+      <CommandItem>Profile</CommandItem>
+      <CommandItem>Billing</CommandItem>
+      <CommandItem>Settings</CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Command>
+```
+
+## Examples
+
+### Dialog
+
+<ComponentPreview
+  name="command-dialog"
+  description="A command menu in a dialog"
+/>
+
+To show the command menu in a dialog, use the `<CommandDialog />` component.
+
+```tsx showLineNumbers title="components/example-command-menu.tsx"
+export function CommandMenu() {
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>Calendar</CommandItem>
+          <CommandItem>Search Emoji</CommandItem>
+          <CommandItem>Calculator</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  )
+}
+```
+
+### Combobox
+
+You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
diff --git a/apps/v4/content/docs/components/context-menu.mdx b/apps/v4/content/docs/components/context-menu.mdx
new file mode 100644
index 00000000000..81c599d69e3
--- /dev/null
+++ b/apps/v4/content/docs/components/context-menu.mdx
@@ -0,0 +1,74 @@
+---
+title: Context Menu
+description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/context-menu
+  api: https://www.radix-ui.com/docs/primitives/components/context-menu#api-reference
+---
+
+<ComponentPreview
+  name="context-menu-demo"
+  description="A context menu with sub menu items."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add context-menu
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-context-menu
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="context-menu" title="components/ui/context-menu.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu"
+```
+
+```tsx showLineNumbers
+<ContextMenu>
+  <ContextMenuTrigger>Right click</ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>Profile</ContextMenuItem>
+    <ContextMenuItem>Billing</ContextMenuItem>
+    <ContextMenuItem>Team</ContextMenuItem>
+    <ContextMenuItem>Subscription</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
+```
diff --git a/apps/v4/content/docs/components/data-table.mdx b/apps/v4/content/docs/components/data-table.mdx
new file mode 100644
index 00000000000..b66f08572a9
--- /dev/null
+++ b/apps/v4/content/docs/components/data-table.mdx
@@ -0,0 +1,873 @@
+---
+title: Data Table
+description: Powerful table and datagrids built using TanStack Table.
+component: true
+links:
+  doc: https://tanstack.com/table/v8/docs/introduction
+---
+
+<ComponentPreview name="data-table-demo" className="[&_.preview]:items-start" />
+
+## Introduction
+
+Every data table or datagrid I've created has been unique. They all behave differently, have specific sorting and filtering requirements, and work with different data sources.
+
+It doesn't make sense to combine all of these variations into a single component. If we do that, we'll lose the flexibility that [headless UI](https://tanstack.com/table/v8/docs/introduction#what-is-headless-ui) provides.
+
+So instead of a data-table component, I thought it would be more helpful to provide a guide on how to build your own.
+
+We'll start with the basic `<Table />` component and build a complex data table from scratch.
+
+<Callout className="mt-4">
+
+**Tip:** If you find yourself using the same table in multiple places in your app, you can always extract it into a reusable component.
+
+</Callout>
+
+## Table of Contents
+
+This guide will show you how to use [TanStack Table](https://tanstack.com/table) and the `<Table />` component to build your own custom data table. We'll cover the following topics:
+
+- [Basic Table](#basic-table)
+- [Row Actions](#row-actions)
+- [Pagination](#pagination)
+- [Sorting](#sorting)
+- [Filtering](#filtering)
+- [Visibility](#visibility)
+- [Row Selection](#row-selection)
+- [Reusable Components](#reusable-components)
+
+## Installation
+
+1. Add the `<Table />` component to your project:
+
+```bash
+npx shadcn@latest add table
+```
+
+2. Add `tanstack/react-table` dependency:
+
+```bash
+npm install @tanstack/react-table
+```
+
+## Prerequisites
+
+We are going to build a table to show recent payments. Here's what our data looks like:
+
+```tsx showLineNumbers
+type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+export const payments: Payment[] = [
+  {
+    id: "728ed52f",
+    amount: 100,
+    status: "pending",
+    email: "m@example.com",
+  },
+  {
+    id: "489e1d42",
+    amount: 125,
+    status: "processing",
+    email: "example@gmail.com",
+  },
+  // ...
+]
+```
+
+## Project Structure
+
+Start by creating the following file structure:
+
+```txt
+app
+└── payments
+    ├── columns.tsx
+    ├── data-table.tsx
+    └── page.tsx
+```
+
+I'm using a Next.js example here but this works for any other React framework.
+
+- `columns.tsx` (client component) will contain our column definitions.
+- `data-table.tsx` (client component) will contain our `<DataTable />` component.
+- `page.tsx` (server component) is where we'll fetch data and render our table.
+
+## Basic Table
+
+Let's start by building a basic table.
+
+<Steps>
+
+### Column Definitions
+
+First, we'll define our columns.
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {3,14-27}
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: "status",
+    header: "Status",
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+  },
+  {
+    accessorKey: "amount",
+    header: "Amount",
+  },
+]
+```
+
+<Callout className="mt-4">
+
+**Note:** Columns are where you define the core of what your table
+will look like. They define the data that will be displayed, how it will be
+formatted, sorted and filtered.
+
+</Callout>
+
+### `<DataTable />` component
+
+Next, we'll create a `<DataTable />` component to render our table.
+
+```tsx showLineNumbers title="app/payments/data-table.tsx"
+"use client"
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <div className="overflow-hidden rounded-md border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+```
+
+<Callout>
+
+**Tip**: If you find yourself using `<DataTable />` in multiple places, this is the component you could make reusable by extracting it to `components/ui/data-table.tsx`.
+
+`<DataTable columns={columns} data={data} />`
+
+</Callout>
+
+### Render the table
+
+Finally, we'll render our table in our page component.
+
+```tsx showLineNumbers title="app/payments/page.tsx" {22}
+import { columns, Payment } from "./columns"
+import { DataTable } from "./data-table"
+
+async function getData(): Promise<Payment[]> {
+  // Fetch data from your API here.
+  return [
+    {
+      id: "728ed52f",
+      amount: 100,
+      status: "pending",
+      email: "m@example.com",
+    },
+    // ...
+  ]
+}
+
+export default async function DemoPage() {
+  const data = await getData()
+
+  return (
+    <div className="container mx-auto py-10">
+      <DataTable columns={columns} data={data} />
+    </div>
+  )
+}
+```
+
+</Steps>
+
+## Cell Formatting
+
+Let's format the amount cell to display the dollar amount. We'll also align the cell to the right.
+
+<Steps>
+
+### Update columns definition
+
+Update the `header` and `cell` definitions for amount as follows:
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {4-15}
+export const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"))
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount)
+
+      return <div className="text-right font-medium">{formatted}</div>
+    },
+  },
+]
+```
+
+You can use the same approach to format other cells and headers.
+
+</Steps>
+
+## Row Actions
+
+Let's add row actions to our table. We'll use a `<Dropdown />` component for this.
+
+<Steps>
+
+### Update columns definition
+
+Update our columns definition to add a new `actions` column. The `actions` cell returns a `<Dropdown />` component.
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {4,6-14,18-45}
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+import { MoreHorizontal } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export const columns: ColumnDef<Payment>[] = [
+  // ...
+  {
+    id: "actions",
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(payment.id)}
+            >
+              Copy payment ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>View customer</DropdownMenuItem>
+            <DropdownMenuItem>View payment details</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+  // ...
+]
+```
+
+You can access the row data using `row.original` in the `cell` function. Use this to handle actions for your row eg. use the `id` to make a DELETE call to your API.
+
+</Steps>
+
+## Pagination
+
+Next, we'll add pagination to our table.
+
+<Steps>
+
+### Update `<DataTable>`
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {5,17}
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
+
+  // ...
+}
+```
+
+This will automatically paginate your rows into pages of 10. See the [pagination docs](https://tanstack.com/table/v8/docs/api/features/pagination) for more information on customizing page size and implementing manual pagination.
+
+### Add pagination controls
+
+We can add pagination controls to our table using the `<Button />` component and the `table.previousPage()`, `table.nextPage()` API methods.
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {1,15,21-39}
+import { Button } from "@/components/ui/button"
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
+
+  return (
+    <div>
+      <div className="overflow-hidden rounded-md border">
+        <Table>
+          { // .... }
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  )
+}
+```
+
+See [Reusable Components](#reusable-components) section for a more advanced pagination component.
+
+</Steps>
+
+## Sorting
+
+Let's make the email column sortable.
+
+<Steps>
+
+### Update `<DataTable>`
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" showLineNumbers {3,6,10,18,25-28}
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
+  })
+
+  return (
+    <div>
+      <div className="overflow-hidden rounded-md border">
+        <Table>{ ... }</Table>
+      </div>
+    </div>
+  )
+}
+```
+
+### Make header cell sortable
+
+We can now update the `email` header cell to add sorting controls.
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {4,9-19}
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+import { ArrowUpDown } from "lucide-react"
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: "email",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
+  },
+]
+```
+
+This will automatically sort the table (asc and desc) when the user toggles on the header cell.
+
+</Steps>
+
+## Filtering
+
+Let's add a search input to filter emails in our table.
+
+<Steps>
+
+### Update `<DataTable>`
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {6,10,17,24-26,35-36,39,45-54}
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+      columnFilters,
+    },
+  })
+
+  return (
+    <div>
+      <div className="flex items-center py-4">
+        <Input
+          placeholder="Filter emails..."
+          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+      </div>
+      <div className="overflow-hidden rounded-md border">
+        <Table>{ ... }</Table>
+      </div>
+    </div>
+  )
+}
+```
+
+Filtering is now enabled for the `email` column. You can add filters to other columns as well. See the [filtering docs](https://tanstack.com/table/v8/docs/guide/filters) for more information on customizing filters.
+
+</Steps>
+
+## Visibility
+
+Adding column visibility is fairly simple using `@tanstack/react-table` visibility API.
+
+<Steps>
+
+### Update `<DataTable>`
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {8,18-23,33-34,45,49,64-91}
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
+  })
+
+  return (
+    <div>
+      <div className="flex items-center py-4">
+        <Input
+          placeholder="Filter emails..."
+          value={table.getColumn("email")?.getFilterValue() as string}
+          onChange={(event) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Columns
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter(
+                (column) => column.getCanHide()
+              )
+              .map((column) => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                )
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="overflow-hidden rounded-md border">
+        <Table>{ ... }</Table>
+      </div>
+    </div>
+  )
+}
+```
+
+This adds a dropdown menu that you can use to toggle column visibility.
+
+</Steps>
+
+## Row Selection
+
+Next, we're going to add row selection to our table.
+
+<Steps>
+
+### Update column definitions
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {6,9-27}
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+
+import { Badge } from "@/components/ui/badge"
+import { Checkbox } from "@/components/ui/checkbox"
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+]
+```
+
+### Update `<DataTable>`
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {11,23,28}
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <div>
+      <div className="overflow-hidden rounded-md border">
+        <Table />
+      </div>
+    </div>
+  )
+}
+```
+
+This adds a checkbox to each row and a checkbox in the header to select all rows.
+
+### Show selected rows
+
+You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API.
+
+```tsx
+<div className="text-muted-foreground flex-1 text-sm">
+  {table.getFilteredSelectedRowModel().rows.length} of{" "}
+  {table.getFilteredRowModel().rows.length} row(s) selected.
+</div>
+```
+
+</Steps>
+
+## Reusable Components
+
+Here are some components you can use to build your data tables. This is from the [Tasks](/examples/tasks) demo.
+
+### Column header
+
+Make any column header sortable and hideable.
+
+<ComponentSource
+  src="/app/(app)/examples/tasks/components/data-table-column-header.tsx"
+  title="components/data-table-column-header.tsx"
+/>
+
+```tsx showLineNumbers {5}
+export const columns = [
+  {
+    accessorKey: "email",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Email" />
+    ),
+  },
+]
+```
+
+### Pagination
+
+Add pagination controls to your table including page size and selection count.
+
+<ComponentSource src="/app/(app)/examples/tasks/components/data-table-pagination.tsx" />
+
+```tsx
+<DataTablePagination table={table} />
+```
+
+### Column toggle
+
+A component to toggle column visibility.
+
+<ComponentSource src="/app/(app)/examples/tasks/components/data-table-view-options.tsx" />
+
+```tsx
+<DataTableViewOptions table={table} />
+```
diff --git a/apps/v4/content/docs/components/date-picker.mdx b/apps/v4/content/docs/components/date-picker.mdx
new file mode 100644
index 00000000000..f94ca0a0147
--- /dev/null
+++ b/apps/v4/content/docs/components/date-picker.mdx
@@ -0,0 +1,100 @@
+---
+title: Date Picker
+description: A date picker component with range and presets.
+component: true
+---
+
+<ComponentPreview
+  name="calendar-22"
+  title="Date of Birth Picker"
+  description="A calendar with date of birth picker."
+/>
+
+## Installation
+
+The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components.
+
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
+
+## Usage
+
+```tsx showLineNumbers title="components/example-date-picker.tsx"
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+export function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          data-empty={!date}
+          className="data-[empty=true]:text-muted-foreground w-[280px] justify-start text-left font-normal"
+        >
+          <CalendarIcon />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar mode="single" selected={date} onSelect={setDate} />
+      </PopoverContent>
+    </Popover>
+  )
+}
+```
+
+See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
+
+## Examples
+
+### Date of Birth Picker
+
+<ComponentPreview
+  name="calendar-22"
+  title="Date of Birth Picker"
+  description="A calendar with date of birth picker."
+/>
+
+### Picker with Input
+
+<ComponentPreview
+  name="calendar-28"
+  title="Picker with Input"
+  description="A calendar with input and picker."
+/>
+
+### Date and Time Picker
+
+<ComponentPreview
+  name="calendar-24"
+  title="Date and Time Picker"
+  description="A calendar with date and time picker."
+/>
+
+### Natural Language Picker
+
+This component uses the `chrono-node` library to parse natural language dates.
+
+<ComponentPreview
+  name="calendar-29"
+  title="Natural Language Picker"
+  description="A calendar with natural language picker."
+/>
+
+### Form
+
+<ComponentPreview name="date-picker-form" />
diff --git a/apps/v4/content/docs/components/dialog.mdx b/apps/v4/content/docs/components/dialog.mdx
new file mode 100644
index 00000000000..30948817bcf
--- /dev/null
+++ b/apps/v4/content/docs/components/dialog.mdx
@@ -0,0 +1,120 @@
+---
+title: Dialog
+description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+featured: true
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/dialog
+  api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
+---
+
+<ComponentPreview
+  name="dialog-demo"
+  description="A dialog for editing profile details."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add dialog
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-dialog
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="dialog" title="components/ui/dialog.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+```
+
+```tsx showLineNumbers
+<Dialog>
+  <DialogTrigger>Open</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+```
+
+## Examples
+
+### Custom close button
+
+<ComponentPreview name="dialog-close-button" />
+
+## Notes
+
+To use the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or
+`Dropdown Menu` component in the `Dialog` component.
+
+```tsx showLineNumbers title="components/example-dialog-context-menu.tsx" {1, 26}
+<Dialog>
+  <ContextMenu>
+    <ContextMenuTrigger>Right click</ContextMenuTrigger>
+    <ContextMenuContent>
+      <ContextMenuItem>Open</ContextMenuItem>
+      <ContextMenuItem>Download</ContextMenuItem>
+      <DialogTrigger asChild>
+        <ContextMenuItem>
+          <span>Delete</span>
+        </ContextMenuItem>
+      </DialogTrigger>
+    </ContextMenuContent>
+  </ContextMenu>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. Are you sure you want to permanently
+        delete this file from our servers?
+      </DialogDescription>
+    </DialogHeader>
+    <DialogFooter>
+      <Button type="submit">Confirm</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
diff --git a/apps/v4/content/docs/components/drawer.mdx b/apps/v4/content/docs/components/drawer.mdx
new file mode 100644
index 00000000000..779b30cf321
--- /dev/null
+++ b/apps/v4/content/docs/components/drawer.mdx
@@ -0,0 +1,92 @@
+---
+title: Drawer
+description: A drawer component for React.
+component: true
+links:
+  doc: https://vaul.emilkowal.ski/getting-started
+---
+
+<ComponentPreview name="drawer-demo" description="A drawer component." />
+
+## About
+
+Drawer is built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilkowalski\_](https://twitter.com/emilkowalski_).
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add drawer
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install vaul
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="drawer" title="components/ui/drawer.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+```
+
+```tsx showLineNumbers
+<Drawer>
+  <DrawerTrigger>Open</DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+      <DrawerDescription>This action cannot be undone.</DrawerDescription>
+    </DrawerHeader>
+    <DrawerFooter>
+      <Button>Submit</Button>
+      <DrawerClose>
+        <Button variant="outline">Cancel</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>
+```
+
+## Examples
+
+### Responsive Dialog
+
+You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile.
+
+<ComponentPreview name="drawer-dialog" />
diff --git a/apps/v4/content/docs/components/dropdown-menu.mdx b/apps/v4/content/docs/components/dropdown-menu.mdx
new file mode 100644
index 00000000000..162f7d7a51a
--- /dev/null
+++ b/apps/v4/content/docs/components/dropdown-menu.mdx
@@ -0,0 +1,95 @@
+---
+title: Dropdown Menu
+description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
+featured: true
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/dropdown-menu
+  api: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#api-reference
+---
+
+<ComponentPreview
+  name="dropdown-menu-demo"
+  description="A dropdown menu with icons, shortcuts and sub menu items."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add dropdown-menu
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-dropdown-menu
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="dropdown-menu" title="components/ui/dropdown-menu.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+```
+
+```tsx showLineNumbers
+<DropdownMenu>
+  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>Profile</DropdownMenuItem>
+    <DropdownMenuItem>Billing</DropdownMenuItem>
+    <DropdownMenuItem>Team</DropdownMenuItem>
+    <DropdownMenuItem>Subscription</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+## Examples
+
+### Checkboxes
+
+<ComponentPreview
+  name="dropdown-menu-checkboxes"
+  description="A dropdown menu with checkboxes."
+/>
+
+### Radio Group
+
+<ComponentPreview
+  name="dropdown-menu-radio-group"
+  description="A dropdown menu with radio items."
+/>
diff --git a/apps/v4/content/docs/components/form.mdx b/apps/v4/content/docs/components/form.mdx
new file mode 100644
index 00000000000..99a39e3b289
--- /dev/null
+++ b/apps/v4/content/docs/components/form.mdx
@@ -0,0 +1,255 @@
+---
+title: React Hook Form
+description: Building forms with React Hook Form and Zod.
+links:
+  doc: https://react-hook-form.com
+---
+
+Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.
+
+Well-designed HTML forms are:
+
+- Well-structured and semantically correct.
+- Easy to use and navigate (keyboard).
+- Accessible with ARIA attributes and proper labels.
+- Has support for client and server side validation.
+- Well-styled and consistent with the rest of the application.
+
+In this guide, we will take a look at building forms with [`react-hook-form`](https://react-hook-form.com/) and [`zod`](https://zod.dev). We're going to use a `<FormField>` component to compose accessible forms using Radix UI components.
+
+## Features
+
+The `<Form />` component is a wrapper around the `react-hook-form` library. It provides a few things:
+
+- Composable components for building forms.
+- A `<FormField />` component for building controlled form fields.
+- Form validation using `zod`.
+- Handles accessibility and error messages.
+- Uses `React.useId()` for generating unique IDs.
+- Applies the correct `aria` attributes to form fields based on states.
+- Built to work with all Radix UI components.
+- Bring your own schema library. We use `zod` but you can use anything you want.
+- **You have full control over the markup and styling.**
+
+## Anatomy
+
+```tsx showLineNumbers
+<Form>
+  <FormField
+    control={...}
+    name="..."
+    render={() => (
+      <FormItem>
+        <FormLabel />
+        <FormControl>
+          { /* Your form field */}
+        </FormControl>
+        <FormDescription />
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+</Form>
+```
+
+## Example
+
+```tsx showLineNumbers
+const form = useForm()
+
+<FormField
+  control={form.control}
+  name="username"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Username</FormLabel>
+      <FormControl>
+        <Input placeholder="shadcn" {...field} />
+      </FormControl>
+      <FormDescription>This is your public display name.</FormDescription>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+<Steps>
+
+### Command
+
+```bash
+npx shadcn@latest add form
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-label @radix-ui/react-slot react-hook-form @hookform/resolvers zod
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="form" title="components/ui/form.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+<Steps>
+
+### Create a form schema
+
+Define the shape of your form using a Zod schema. You can read more about using Zod in the [Zod documentation](https://zod.dev).
+
+```tsx showLineNumbers title="components/example-form.tsx" {3,5-7}
+"use client"
+
+import { z } from "zod"
+
+const formSchema = z.object({
+  username: z.string().min(2).max(50),
+})
+```
+
+### Define a form
+
+Use the `useForm` hook from `react-hook-form` to create a form.
+
+```tsx showLineNumbers title="components/example-form.tsx" {3-4,14-20,22-27}
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: "Username must be at least 2 characters.",
+  }),
+})
+
+export function ProfileForm() {
+  // 1. Define your form.
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: "",
+    },
+  })
+
+  // 2. Define a submit handler.
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+    console.log(values)
+  }
+}
+```
+
+Since `FormField` is using a controlled component, you need to provide a default value for the field. See the [React Hook Form docs](https://react-hook-form.com/docs/usecontroller) to learn more about controlled components.
+
+### Build your form
+
+We can now use the `<Form />` components to build our form.
+
+```tsx showLineNumbers title="components/example-form.tsx" {7-17,28-50}
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: "Username must be at least 2 characters.",
+  }),
+})
+
+export function ProfileForm() {
+  // ...
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
+```
+
+### Done
+
+That's it. You now have a fully accessible form that is type-safe with client-side validation.
+
+<ComponentPreview
+  name="input-form"
+  className="[&_[role=tablist]]:hidden [&>div>div:first-child]:hidden"
+/>
+
+</Steps>
+
+## Examples
+
+See the following links for more examples on how to use the `<Form />` component with other components:
+
+- [Checkbox](/docs/components/checkbox#form)
+- [Date Picker](/docs/components/date-picker#form)
+- [Input](/docs/components/input#form)
+- [Radio Group](/docs/components/radio-group#form)
+- [Select](/docs/components/select#form)
+- [Switch](/docs/components/switch#form)
+- [Textarea](/docs/components/textarea#form)
+- [Combobox](/docs/components/combobox#form)
diff --git a/apps/v4/content/docs/components/hover-card.mdx b/apps/v4/content/docs/components/hover-card.mdx
new file mode 100644
index 00000000000..8dacd7e557d
--- /dev/null
+++ b/apps/v4/content/docs/components/hover-card.mdx
@@ -0,0 +1,67 @@
+---
+title: Hover Card
+description: For sighted users to preview content available behind a link.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/hover-card
+  api: https://www.radix-ui.com/docs/primitives/components/hover-card#api-reference
+---
+
+<ComponentPreview name="hover-card-demo" description="A hover card component" />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add hover-card
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-hover-card
+```
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="hover-card" title="components/ui/hover-card.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
+```
+
+```tsx showLineNumbers
+<HoverCard>
+  <HoverCardTrigger>Hover</HoverCardTrigger>
+  <HoverCardContent>
+    The React Framework – created and maintained by @vercel.
+  </HoverCardContent>
+</HoverCard>
+```
diff --git a/apps/v4/content/docs/components/index.mdx b/apps/v4/content/docs/components/index.mdx
new file mode 100644
index 00000000000..0393eb87251
--- /dev/null
+++ b/apps/v4/content/docs/components/index.mdx
@@ -0,0 +1,6 @@
+---
+title: Components
+description: Here you can find all the components available in the library. We are working on adding more components.
+---
+
+<ComponentsList />
diff --git a/apps/v4/content/docs/components/input-otp.mdx b/apps/v4/content/docs/components/input-otp.mdx
new file mode 100644
index 00000000000..9c56f18be3e
--- /dev/null
+++ b/apps/v4/content/docs/components/input-otp.mdx
@@ -0,0 +1,230 @@
+---
+title: Input OTP
+description: Accessible one-time password component with copy paste functionality.
+component: true
+links:
+  doc: https://input-otp.rodz.dev
+---
+
+<ComponentPreview name="input-otp-demo" description="An 6 digits input OTP." />
+
+## About
+
+Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input-otp) by [@guilherme_rodz](https://twitter.com/guilherme_rodz).
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Run the following command:</Step>
+
+```bash
+npx shadcn@latest add input-otp
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install input-otp
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="input-otp" title="components/ui/input-otp.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/components/ui/input-otp"
+```
+
+```tsx showLineNumbers
+<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+## Examples
+
+### Pattern
+
+Use the `pattern` prop to define a custom pattern for the OTP input.
+
+<ComponentPreview
+  name="input-otp-pattern"
+  description="An input OTP with alphanumeric pattern."
+/>
+
+```tsx showLineNumbers {1,7}
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+
+...
+
+<InputOTP
+  maxLength={6}
+  pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    {/* ... */}
+  </InputOTPGroup>
+</InputOTP>
+```
+
+### Separator
+
+You can use the `<InputOTPSeparator />` component to add a separator between the input groups.
+
+<ComponentPreview
+  name="input-otp-separator"
+  description="An input OTP with custom separator."
+/>
+
+```tsx showLineNumbers {4,15}
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/components/ui/input-otp"
+
+...
+
+<InputOTP maxLength={4}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+### Controlled
+
+You can use the `value` and `onChange` props to control the input value.
+
+<ComponentPreview name="input-otp-controlled" />
+
+### Form
+
+<ComponentPreview name="input-otp-form" />
+
+## Changelog
+
+### 2024-03-19 Composition
+
+We've made some updates and replaced the render props pattern with composition. Here's how to update your code if you prefer the composition pattern.
+
+<Callout className="mt-6">
+  **Note:** You are not required to update your code if you are using the
+  `render` prop. It is still supported.
+</Callout>
+
+<Steps>
+
+<Step>Update to the latest version of `input-otp`.</Step>
+
+```bash
+npm install input-otp@latest
+```
+
+<Step>Update `input-otp.tsx`</Step>
+
+```diff showLineNumbers title="input-otp.tsx" {2,8-11}
+- import { OTPInput, SlotProps } from "input-otp"
++ import { OTPInput, OTPInputContext } from "input-otp"
+
+ const InputOTPSlot = React.forwardRef<
+   React.ElementRef<"div">,
+-   SlotProps & React.ComponentPropsWithoutRef<"div">
+-  >(({ char, hasFakeCaret, isActive, className, ...props }, ref) => {
++   React.ComponentPropsWithoutRef<"div"> & { index: number }
++  >(({ index, className, ...props }, ref) => {
++   const inputOTPContext = React.useContext(OTPInputContext)
++   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+```
+
+<Step>Then replace the `render` prop in your code.</Step>
+
+```diff showLineNumbers {2-12}
+<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+</Steps>
+
+### 2024-03-19 Disabled
+
+To add a disabled state to the input, update `<InputOTP />` as follows:
+
+```tsx showLineNumbers title="input-otp.tsx" {4,7-11}
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+```
diff --git a/apps/v4/content/docs/components/input.mdx b/apps/v4/content/docs/components/input.mdx
new file mode 100644
index 00000000000..8953d996d31
--- /dev/null
+++ b/apps/v4/content/docs/components/input.mdx
@@ -0,0 +1,99 @@
+---
+title: Input
+description: Displays a form input field or a component that looks like an input field.
+component: true
+---
+
+<ComponentPreview
+  name="input-demo"
+  className="[&_input]:max-w-xs"
+  description="A form input component."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add input
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="input" title="components/ui/input.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Input } from "@/components/ui/input"
+```
+
+```tsx
+<Input />
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview
+  name="input-demo"
+  className="[&_input]:max-w-xs"
+  description="A form input component."
+/>
+
+### File
+
+<ComponentPreview
+  name="input-file"
+  className="[&_input]:max-w-xs"
+  description="A file input component."
+/>
+
+### Disabled
+
+<ComponentPreview
+  name="input-disabled"
+  className="[&_input]:max-w-xs"
+  description="A disabled input component."
+/>
+
+### With Label
+
+<ComponentPreview
+  name="input-with-label"
+  className="[&_input]:max-w-xs"
+  description="An input component with a label."
+/>
+
+### With Button
+
+<ComponentPreview
+  name="input-with-button"
+  className="[&_input]:max-w-xs"
+  description="An input component with a button."
+/>
+
+### Form
+
+<ComponentPreview name="input-form" />
diff --git a/apps/v4/content/docs/components/label.mdx b/apps/v4/content/docs/components/label.mdx
new file mode 100644
index 00000000000..f2f60e92823
--- /dev/null
+++ b/apps/v4/content/docs/components/label.mdx
@@ -0,0 +1,58 @@
+---
+title: Label
+description: Renders an accessible label associated with controls.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/label
+  api: https://www.radix-ui.com/docs/primitives/components/label#api-reference
+---
+
+<ComponentPreview name="label-demo" description="A label" />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add label
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-label
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="label" title="components/ui/label.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Label } from "@/components/ui/label"
+```
+
+```tsx
+<Label htmlFor="email">Your email address</Label>
+```
diff --git a/apps/v4/content/docs/components/menubar.mdx b/apps/v4/content/docs/components/menubar.mdx
new file mode 100644
index 00000000000..a96439dad83
--- /dev/null
+++ b/apps/v4/content/docs/components/menubar.mdx
@@ -0,0 +1,80 @@
+---
+title: Menubar
+description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/menubar
+  api: https://www.radix-ui.com/docs/primitives/components/menubar#api-reference
+---
+
+<ComponentPreview name="menubar-demo" description="A menubar component." />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add menubar
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-menubar
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="menubar" title="components/ui/menubar.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/components/ui/menubar"
+```
+
+```tsx showLineNumbers
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>File</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>
+        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>New Window</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Share</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Print</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>
+```
diff --git a/apps/v4/content/docs/components/navigation-menu.mdx b/apps/v4/content/docs/components/navigation-menu.mdx
new file mode 100644
index 00000000000..2bdfac72dbb
--- /dev/null
+++ b/apps/v4/content/docs/components/navigation-menu.mdx
@@ -0,0 +1,97 @@
+---
+title: Navigation Menu
+description: A collection of links for navigating websites.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/navigation-menu
+  api: https://www.radix-ui.com/docs/primitives/components/navigation-menu#api-reference
+---
+
+<ComponentPreview name="navigation-menu-demo" />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add navigation-menu
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-navigation-menu
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource
+  name="navigation-menu"
+  title="components/ui/navigation-menu.tsx"
+/>
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "@/components/ui/navigation-menu"
+```
+
+```tsx showLineNumbers
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <NavigationMenuLink>Link</NavigationMenuLink>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```
+
+## Link
+
+You can use the `asChild` prop to make another component look like a navigation menu trigger. Here's an example of a link that looks like a navigation menu trigger.
+
+```tsx showLineNumbers title="components/example-navigation-menu.tsx"
+import { Link } from "next/link"
+
+export function NavigationMenuDemo() {
+  return (
+    <NavigationMenuItem>
+      <NavigationMenuLink asChild>
+        <Link href="/docs">Documentation</Link>
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+  )
+}
+```
diff --git a/apps/v4/content/docs/components/pagination.mdx b/apps/v4/content/docs/components/pagination.mdx
new file mode 100644
index 00000000000..a1e79dd8921
--- /dev/null
+++ b/apps/v4/content/docs/components/pagination.mdx
@@ -0,0 +1,105 @@
+---
+title: Pagination
+description: Pagination with page navigation, next and previous links.
+component: true
+---
+
+<ComponentPreview
+  name="pagination-demo"
+  description="A pagination with previous and next links."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add pagination
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="pagination" title="components/ui/pagination.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+```
+
+```tsx showLineNumbers
+<Pagination>
+  <PaginationContent>
+    <PaginationItem>
+      <PaginationPrevious href="#" />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#">1</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationEllipsis />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationNext href="#" />
+    </PaginationItem>
+  </PaginationContent>
+</Pagination>
+```
+
+### Next.js
+
+By default the `<PaginationLink />` component will render an `<a />` tag.
+
+To use the Next.js `<Link />` component, make the following updates to `pagination.tsx`.
+
+```diff showLineNumbers /typeof Link/ {1}
++ import Link from "next/link"
+
+- type PaginationLinkProps = ... & React.ComponentProps<"a">
++ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>
+
+const PaginationLink = ({...props }: ) => (
+  <PaginationItem>
+-   <a>
++   <Link>
+      // ...
+-   </a>
++   </Link>
+  </PaginationItem>
+)
+
+```
+
+<Callout className="mt-6">
+
+**Note:** We are making updates to the cli to automatically do this for you.
+
+</Callout>
diff --git a/apps/v4/content/docs/components/popover.mdx b/apps/v4/content/docs/components/popover.mdx
new file mode 100644
index 00000000000..53e1e933bfb
--- /dev/null
+++ b/apps/v4/content/docs/components/popover.mdx
@@ -0,0 +1,68 @@
+---
+title: Popover
+description: Displays rich content in a portal, triggered by a button.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/popover
+  api: https://www.radix-ui.com/docs/primitives/components/popover#api-reference
+---
+
+<ComponentPreview
+  name="popover-demo"
+  description="A popover component with a form."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add popover
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-popover
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="popover" title="components/ui/popover.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+```
+
+```tsx showLineNumbers
+<Popover>
+  <PopoverTrigger>Open</PopoverTrigger>
+  <PopoverContent>Place content for the popover here.</PopoverContent>
+</Popover>
+```
diff --git a/apps/v4/content/docs/components/progress.mdx b/apps/v4/content/docs/components/progress.mdx
new file mode 100644
index 00000000000..fba7eb68e75
--- /dev/null
+++ b/apps/v4/content/docs/components/progress.mdx
@@ -0,0 +1,61 @@
+---
+title: Progress
+description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/progress
+  api: https://www.radix-ui.com/docs/primitives/components/progress#api-reference
+---
+
+<ComponentPreview
+  name="progress-demo"
+  description="A progress bar component."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add progress
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-progress
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="progress" title="components/ui/progress.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { Progress } from "@/components/ui/progress"
+```
+
+```tsx showLineNumbers
+<Progress value={33} />
+```
diff --git a/apps/v4/content/docs/components/radio-group.mdx b/apps/v4/content/docs/components/radio-group.mdx
new file mode 100644
index 00000000000..934619fcafe
--- /dev/null
+++ b/apps/v4/content/docs/components/radio-group.mdx
@@ -0,0 +1,77 @@
+---
+title: Radio Group
+description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/radio-group
+  api: https://www.radix-ui.com/docs/primitives/components/radio-group#api-reference
+---
+
+<ComponentPreview
+  name="radio-group-demo"
+  description="A radio group with 3 items."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add radio-group
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-radio-group
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="radio-group" title="components/ui/radio-group.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+```
+
+```tsx showLineNumbers
+<RadioGroup defaultValue="option-one">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-one" id="option-one" />
+    <Label htmlFor="option-one">Option One</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-two" id="option-two" />
+    <Label htmlFor="option-two">Option Two</Label>
+  </div>
+</RadioGroup>
+```
+
+## Examples
+
+### Form
+
+<ComponentPreview name="radio-group-form" />
diff --git a/apps/v4/content/docs/components/resizable.mdx b/apps/v4/content/docs/components/resizable.mdx
new file mode 100644
index 00000000000..bda70158a67
--- /dev/null
+++ b/apps/v4/content/docs/components/resizable.mdx
@@ -0,0 +1,129 @@
+---
+title: Resizable
+description: Accessible resizable panel groups and layouts with keyboard support.
+component: true
+links:
+  doc: https://github.com/bvaughn/react-resizable-panels
+  api: https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels
+---
+
+<ComponentPreview
+  name="resizable-demo"
+  description="A group of resizable horizontal and vertical panels."
+/>
+
+## About
+
+The `Resizable` component is built on top of [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) by [bvaughn](https://github.com/bvaughn).
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add resizable
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install react-resizable-panels
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="resizable" title="components/ui/resizable.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+```
+
+```tsx showLineNumbers
+<ResizablePanelGroup direction="horizontal">
+  <ResizablePanel>One</ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel>Two</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+## Examples
+
+### Vertical
+
+Use the `direction` prop to set the direction of the resizable panels.
+
+<ComponentPreview
+  name="resizable-vertical"
+  description="A group of resizable vertical panels."
+/>
+
+```tsx showLineNumbers {9}
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+
+export default function Example() {
+  return (
+    <ResizablePanelGroup direction="vertical">
+      <ResizablePanel>One</ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel>Two</ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+```
+
+### Handle
+
+You can set or hide the handle by using the `withHandle` prop on the `ResizableHandle` component.
+
+<ComponentPreview
+  name="resizable-handle"
+  description="A group of resizable panels with a handle."
+/>
+
+```tsx showLineNumbers {11}
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+
+export default function Example() {
+  return (
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel>One</ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel>Two</ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+```
diff --git a/apps/v4/content/docs/components/scroll-area.mdx b/apps/v4/content/docs/components/scroll-area.mdx
new file mode 100644
index 00000000000..f074ee69572
--- /dev/null
+++ b/apps/v4/content/docs/components/scroll-area.mdx
@@ -0,0 +1,74 @@
+---
+title: Scroll-area
+description: Augments native scroll functionality for custom, cross-browser styling.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/scroll-area
+  api: https://www.radix-ui.com/docs/primitives/components/scroll-area#api-reference
+---
+
+<ComponentPreview
+  name="scroll-area-demo"
+  description="A scroll area component."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add scroll-area
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-scroll-area
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="scroll-area" title="components/ui/scroll-area.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { ScrollArea } from "@/components/ui/scroll-area"
+```
+
+```tsx showLineNumbers
+<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
+  Jokester began sneaking into the castle in the middle of the night and leaving
+  jokes all over the place: under the king's pillow, in his soup, even in the
+  royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
+  then, one day, the people of the kingdom discovered that the jokes left by
+  Jokester were so funny that they couldn't help but laugh. And once they
+  started laughing, they couldn't stop.
+</ScrollArea>
+```
+
+## Examples
+
+### Horizontal Scrolling
+
+<ComponentPreview name="scroll-area-horizontal-demo" />
diff --git a/apps/v4/content/docs/components/select.mdx b/apps/v4/content/docs/components/select.mdx
new file mode 100644
index 00000000000..0c037852da8
--- /dev/null
+++ b/apps/v4/content/docs/components/select.mdx
@@ -0,0 +1,90 @@
+---
+title: Select
+description: Displays a list of options for the user to pick from—triggered by a button.
+component: true
+featured: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/select
+  api: https://www.radix-ui.com/docs/primitives/components/select#api-reference
+---
+
+<ComponentPreview
+  name="select-demo"
+  description="A select component with a list of options."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add select
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-select
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="select" title="components/ui/select.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+```
+
+```tsx showLineNumbers
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Theme" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="light">Light</SelectItem>
+    <SelectItem value="dark">Dark</SelectItem>
+    <SelectItem value="system">System</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+## Examples
+
+### Scrollable
+
+<ComponentPreview
+  name="select-scrollable"
+  description="A select component with a scrollable list of options."
+/>
+
+### Form
+
+<ComponentPreview name="select-form" />
diff --git a/apps/v4/content/docs/components/separator.mdx b/apps/v4/content/docs/components/separator.mdx
new file mode 100644
index 00000000000..ae264acb2f7
--- /dev/null
+++ b/apps/v4/content/docs/components/separator.mdx
@@ -0,0 +1,57 @@
+---
+title: Separator
+description: Visually or semantically separates content.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/separator
+  api: https://www.radix-ui.com/docs/primitives/components/separator#api-reference
+---
+
+<ComponentPreview name="separator-demo" description="A separator component." />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add separator
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-separator
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="separator" title="components/ui/separator.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { Separator } from "@/components/ui/separator"
+```
+
+```tsx showLineNumbers
+<Separator />
+```
diff --git a/apps/v4/content/docs/components/sheet.mdx b/apps/v4/content/docs/components/sheet.mdx
new file mode 100644
index 00000000000..a3c5a88d18f
--- /dev/null
+++ b/apps/v4/content/docs/components/sheet.mdx
@@ -0,0 +1,101 @@
+---
+title: Sheet
+description: Extends the Dialog component to display content that complements the main content of the screen.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/dialog
+  api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
+---
+
+<ComponentPreview name="sheet-demo" description="A sheet component." />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add sheet
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-dialog
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="sheet" title="components/ui/sheet.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+### Usage
+
+```tsx showLineNumbers
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet"
+```
+
+```tsx showLineNumbers
+<Sheet>
+  <SheetTrigger>Open</SheetTrigger>
+  <SheetContent>
+    <SheetHeader>
+      <SheetTitle>Are you absolutely sure?</SheetTitle>
+      <SheetDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
+      </SheetDescription>
+    </SheetHeader>
+  </SheetContent>
+</Sheet>
+```
+
+## Examples
+
+### Side
+
+Use the `side` property to `<SheetContent />` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`.
+
+### Size
+
+You can adjust the size of the sheet using CSS classes:
+
+```tsx showLineNumbers {3}
+<Sheet>
+  <SheetTrigger>Open</SheetTrigger>
+  <SheetContent className="w-[400px] sm:w-[540px]">
+    <SheetHeader>
+      <SheetTitle>Are you absolutely sure?</SheetTitle>
+      <SheetDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
+      </SheetDescription>
+    </SheetHeader>
+  </SheetContent>
+</Sheet>
+```
diff --git a/apps/v4/content/docs/components/sidebar.mdx b/apps/v4/content/docs/components/sidebar.mdx
new file mode 100644
index 00000000000..ca0e8da886a
--- /dev/null
+++ b/apps/v4/content/docs/components/sidebar.mdx
@@ -0,0 +1,1376 @@
+---
+title: Sidebar
+description: A composable, themeable and customizable sidebar component.
+component: true
+---
+
+<figure className="flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-07"
+    title="Sidebar"
+    type="block"
+    description="A composable, themeable and customizable sidebar component built using shadcn/ui"
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar that collapses to icons.
+  </figcaption>
+</figure>
+
+Sidebars are one of the most complex components to build. They are central
+to any application and often contain a lot of moving parts.
+
+I don't like building sidebars. So I built 30+ of them. All kinds of
+configurations. Then I extracted the core components into `sidebar.tsx`.
+
+We now have a solid foundation to build on top of. Composable. Themeable.
+Customizable.
+
+[Browse the Blocks Library](/blocks).
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Run the following command to install `sidebar.tsx`</Step>
+
+```bash
+npx shadcn@latest add sidebar
+```
+
+<Step>Add the following colors to your CSS file</Step>
+
+The command above should install the colors for you. If not, copy and paste the following in your CSS file.
+
+We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
+
+```css showLineNumbers title="app/globals.css"
+@layer base {
+  :root {
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+  }
+
+  .dark {
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.439 0 0);
+  }
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="sidebar" title="components/ui/sidebar.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Add the following colors to your CSS file</Step>
+
+We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
+
+```css showLineNumbers title="app/globals.css"
+@layer base {
+  :root {
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+  }
+
+  .dark {
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.439 0 0);
+  }
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Structure
+
+A `Sidebar` component is composed of the following parts:
+
+- `SidebarProvider` - Handles collapsible state.
+- `Sidebar` - The sidebar container.
+- `SidebarHeader` and `SidebarFooter` - Sticky at the top and bottom of the sidebar.
+- `SidebarContent` - Scrollable content.
+- `SidebarGroup` - Section within the `SidebarContent`.
+- `SidebarTrigger` - Trigger for the `Sidebar`.
+
+<Image
+  src="/images/sidebar-structure.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
+/>
+<Image
+  src="/images/sidebar-structure-dark.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  className="mt-6 hidden w-full overflow-hidden rounded-lg border dark:block"
+/>
+
+## Usage
+
+```tsx showLineNumbers title="app/layout.tsx"
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+```
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+} from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarHeader />
+      <SidebarContent>
+        <SidebarGroup />
+        <SidebarGroup />
+      </SidebarContent>
+      <SidebarFooter />
+    </Sidebar>
+  )
+}
+```
+
+## Your First Sidebar
+
+Let's start with the most basic sidebar. A collapsible sidebar with a menu.
+
+<Steps>
+
+<Step>
+  Add a `SidebarProvider` and `SidebarTrigger` at the root of your application.
+</Step>
+
+```tsx showLineNumbers title="app/layout.tsx"
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+```
+
+<Step>Create a new sidebar component at `components/app-sidebar.tsx`.</Step>
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+import { Sidebar, SidebarContent } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent />
+    </Sidebar>
+  )
+}
+```
+
+<Step>Now, let's add a `SidebarMenu` to the sidebar.</Step>
+
+We'll use the `SidebarMenu` component in a `SidebarGroup`.
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+// Menu items.
+const items = [
+  {
+    title: "Home",
+    url: "#",
+    icon: Home,
+  },
+  {
+    title: "Inbox",
+    url: "#",
+    icon: Inbox,
+  },
+  {
+    title: "Calendar",
+    url: "#",
+    icon: Calendar,
+  },
+  {
+    title: "Search",
+    url: "#",
+    icon: Search,
+  },
+  {
+    title: "Settings",
+    url: "#",
+    icon: Settings,
+  },
+]
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
+```
+
+<Step>You've created your first sidebar.</Step>
+
+You should see something like this:
+
+<figure className="flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-demo"
+    title="Sidebar"
+    type="block"
+    description="Your first sidebar."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    Your first sidebar.
+  </figcaption>
+</figure>
+
+</Steps>
+
+## Components
+
+The components in `sidebar.tsx` are built to be composable i.e you build your sidebar by putting the provided components together. They also compose well with other shadcn/ui components such as `DropdownMenu`, `Collapsible` or `Dialog` etc.
+
+**If you need to change the code in `sidebar.tsx`, you are encouraged to do so. The code is yours. Use `sidebar.tsx` as a starting point and build your own.**
+
+In the next sections, we'll go over each component and how to use them.
+
+## SidebarProvider
+
+The `SidebarProvider` component is used to provide the sidebar context to the `Sidebar` component. You should always wrap your application in a `SidebarProvider` component.
+
+### Props
+
+| Name           | Type                      | Description                                  |
+| -------------- | ------------------------- | -------------------------------------------- |
+| `defaultOpen`  | `boolean`                 | Default open state of the sidebar.           |
+| `open`         | `boolean`                 | Open state of the sidebar (controlled).      |
+| `onOpenChange` | `(open: boolean) => void` | Sets open state of the sidebar (controlled). |
+
+### Width
+
+If you have a single sidebar in your application, you can use the `SIDEBAR_WIDTH` and `SIDEBAR_WIDTH_MOBILE` variables in `sidebar.tsx` to set the width of the sidebar.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+```
+
+For multiple sidebars in your application, you can use the `style` prop to set the width of the sidebar.
+
+To set the width of the sidebar, you can use the `--sidebar-width` and `--sidebar-width-mobile` CSS variables in the `style` prop.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+<SidebarProvider
+  style={{
+    "--sidebar-width": "20rem",
+    "--sidebar-width-mobile": "20rem",
+  }}
+>
+  <Sidebar />
+</SidebarProvider>
+```
+
+This will handle the width of the sidebar but also the layout spacing.
+
+### Keyboard Shortcut
+
+The `SIDEBAR_KEYBOARD_SHORTCUT` variable is used to set the keyboard shortcut used to open and close the sidebar.
+
+To trigger the sidebar, you use the `cmd+b` keyboard shortcut on Mac and `ctrl+b` on Windows.
+
+You can change the keyboard shortcut by updating the `SIDEBAR_KEYBOARD_SHORTCUT` variable.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+```
+
+### Persisted State
+
+The `SidebarProvider` supports persisting the sidebar state across page reloads and server-side rendering. It uses cookies to store the current state of the sidebar. When the sidebar state changes, a default cookie named `sidebar_state` is set with the current open/closed state. This cookie is then read on subsequent page loads to restore the sidebar state.
+
+To persist sidebar state in Next.js, set up your `SidebarProvider` in `app/layout.tsx` like this:
+
+```tsx showLineNumbers title="app/layout.tsx"
+import { cookies } from "next/headers"
+
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export async function Layout({ children }: { children: React.ReactNode }) {
+  const cookieStore = await cookies()
+  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true"
+
+  return (
+    <SidebarProvider defaultOpen={defaultOpen}>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+```
+
+You can change the name of the cookie by updating the `SIDEBAR_COOKIE_NAME` variable in `sidebar.tsx`.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+```
+
+## Sidebar
+
+The main `Sidebar` component used to render a collapsible sidebar.
+
+```tsx showLineNumbers
+import { Sidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return <Sidebar />
+}
+```
+
+### Props
+
+| Property      | Type                              | Description                       |
+| ------------- | --------------------------------- | --------------------------------- |
+| `side`        | `left` or `right`                 | The side of the sidebar.          |
+| `variant`     | `sidebar`, `floating`, or `inset` | The variant of the sidebar.       |
+| `collapsible` | `offcanvas`, `icon`, or `none`    | Collapsible state of the sidebar. |
+
+### side
+
+Use the `side` prop to change the side of the sidebar.
+
+Available options are `left` and `right`.
+
+```tsx showLineNumbers
+import { Sidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return <Sidebar side="left | right" />
+}
+```
+
+### variant
+
+Use the `variant` prop to change the variant of the sidebar.
+
+Available options are `sidebar`, `floating` and `inset`.
+
+```tsx showLineNumbers
+import { Sidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return <Sidebar variant="sidebar | floating | inset" />
+}
+```
+
+<Callout>
+  **Note:** If you use the `inset` variant, remember to wrap your main content
+  in a `SidebarInset` component.
+</Callout>
+
+```tsx showLineNumbers
+<SidebarProvider>
+  <Sidebar variant="inset" />
+  <SidebarInset>
+    <main>{children}</main>
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### collapsible
+
+Use the `collapsible` prop to make the sidebar collapsible.
+
+Available options are `offcanvas`, `icon` and `none`.
+
+```tsx showLineNumbers
+import { Sidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return <Sidebar collapsible="offcanvas | icon | none" />
+}
+```
+
+| Prop        | Description                                                  |
+| ----------- | ------------------------------------------------------------ |
+| `offcanvas` | A collapsible sidebar that slides in from the left or right. |
+| `icon`      | A sidebar that collapses to icons.                           |
+| `none`      | A non-collapsible sidebar.                                   |
+
+## useSidebar
+
+The `useSidebar` hook is used to control the sidebar.
+
+```tsx showLineNumbers
+import { useSidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  const {
+    state,
+    open,
+    setOpen,
+    openMobile,
+    setOpenMobile,
+    isMobile,
+    toggleSidebar,
+  } = useSidebar()
+}
+```
+
+| Property        | Type                      | Description                                   |
+| --------------- | ------------------------- | --------------------------------------------- |
+| `state`         | `expanded` or `collapsed` | The current state of the sidebar.             |
+| `open`          | `boolean`                 | Whether the sidebar is open.                  |
+| `setOpen`       | `(open: boolean) => void` | Sets the open state of the sidebar.           |
+| `openMobile`    | `boolean`                 | Whether the sidebar is open on mobile.        |
+| `setOpenMobile` | `(open: boolean) => void` | Sets the open state of the sidebar on mobile. |
+| `isMobile`      | `boolean`                 | Whether the sidebar is on mobile.             |
+| `toggleSidebar` | `() => void`              | Toggles the sidebar. Desktop and mobile.      |
+
+## SidebarHeader
+
+Use the `SidebarHeader` component to add a sticky header to the sidebar.
+
+The following example adds a `<DropdownMenu>` to the `SidebarHeader`.
+
+<figure className="mt-6 flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-header"
+    title="Sidebar"
+    type="block"
+    description="A sidebar header with a dropdown menu."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar header with a dropdown menu.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+<Sidebar>
+  <SidebarHeader>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton>
+              Select Workspace
+              <ChevronDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-[--radix-popper-anchor-width]">
+            <DropdownMenuItem>
+              <span>Acme Inc</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <span>Acme Corp.</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarHeader>
+</Sidebar>
+```
+
+## SidebarFooter
+
+Use the `SidebarFooter` component to add a sticky footer to the sidebar.
+
+The following example adds a `<DropdownMenu>` to the `SidebarFooter`.
+
+<figure className="mt-6 flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-footer"
+    title="Sidebar"
+    type="block"
+    description="A sidebar footer with a dropdown menu."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar footer with a dropdown menu.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+export function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader />
+        <SidebarContent />
+        <SidebarFooter>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton>
+                    <User2 /> Username
+                    <ChevronUp className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  side="top"
+                  className="w-[--radix-popper-anchor-width]"
+                >
+                  <DropdownMenuItem>
+                    <span>Account</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Billing</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Sign out</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
+```
+
+## SidebarContent
+
+The `SidebarContent` component is used to wrap the content of the sidebar. This is where you add your `SidebarGroup` components. It is scrollable.
+
+```tsx showLineNumbers
+import { Sidebar, SidebarContent } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup />
+        <SidebarGroup />
+      </SidebarContent>
+    </Sidebar>
+  )
+}
+```
+
+## SidebarGroup
+
+Use the `SidebarGroup` component to create a section within the sidebar.
+
+A `SidebarGroup` has a `SidebarGroupLabel`, a `SidebarGroupContent` and an optional `SidebarGroupAction`.
+
+<figure className="mt-6 flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-group"
+    title="Sidebar Group"
+    type="block"
+    description="A sidebar group."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar group.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+import { Sidebar, SidebarContent, SidebarGroup } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupAction>
+            <Plus /> <span className="sr-only">Add Project</span>
+          </SidebarGroupAction>
+          <SidebarGroupContent></SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
+```
+
+## Collapsible SidebarGroup
+
+To make a `SidebarGroup` collapsible, wrap it in a `Collapsible`.
+
+<figure className="mt-6 flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-group-collapsible"
+    title="Sidebar Group"
+    type="block"
+    description="A collapsible sidebar group."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A collapsible sidebar group.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+export function AppSidebar() {
+  return (
+    <Collapsible defaultOpen className="group/collapsible">
+      <SidebarGroup>
+        <SidebarGroupLabel asChild>
+          <CollapsibleTrigger>
+            Help
+            <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+          </CollapsibleTrigger>
+        </SidebarGroupLabel>
+        <CollapsibleContent>
+          <SidebarGroupContent />
+        </CollapsibleContent>
+      </SidebarGroup>
+    </Collapsible>
+  )
+}
+```
+
+<Callout>
+  **Note:** We wrap the `CollapsibleTrigger` in a `SidebarGroupLabel` to render
+  a button.
+</Callout>
+
+## SidebarGroupAction
+
+Use the `SidebarGroupAction` component to add an action button to the `SidebarGroup`.
+
+<figure className="flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-group-action"
+    title="Sidebar Group"
+    type="block"
+    description="A sidebar group with an action button."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar group with an action button.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers {5-7}
+export function AppSidebar() {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel asChild>Projects</SidebarGroupLabel>
+      <SidebarGroupAction title="Add Project">
+        <Plus /> <span className="sr-only">Add Project</span>
+      </SidebarGroupAction>
+      <SidebarGroupContent />
+    </SidebarGroup>
+  )
+}
+```
+
+## SidebarMenu
+
+The `SidebarMenu` component is used for building a menu within a `SidebarGroup`.
+
+A `SidebarMenu` component is composed of `SidebarMenuItem`, `SidebarMenuButton`, `<SidebarMenuAction />` and `<SidebarMenuSub />` components.
+
+<Image
+  src="/images/sidebar-menu.png"
+  width="716"
+  height="420"
+  alt="Sidebar Menu"
+  className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
+/>
+<Image
+  src="/images/sidebar-menu-dark.png"
+  width="716"
+  height="420"
+  alt="Sidebar Menu"
+  className="mt-6 hidden w-full overflow-hidden rounded-lg border dark:block"
+/>
+
+Here's an example of a `SidebarMenu` component rendering a list of projects.
+
+<figure className="mt-6 flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-menu"
+    title="Sidebar Menu"
+    type="block"
+    description="A sidebar menu with a list of projects."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar menu with a list of projects.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+<Sidebar>
+  <SidebarContent>
+    <SidebarGroup>
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {projects.map((project) => (
+            <SidebarMenuItem key={project.name}>
+              <SidebarMenuButton asChild>
+                <a href={project.url}>
+                  <project.icon />
+                  <span>{project.name}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  </SidebarContent>
+</Sidebar>
+```
+
+## SidebarMenuButton
+
+The `SidebarMenuButton` component is used to render a menu button within a `SidebarMenuItem`.
+
+### Link or Anchor
+
+By default, the `SidebarMenuButton` renders a button but you can use the `asChild` prop to render a different component such as a `Link` or an `a` tag.
+
+```tsx showLineNumbers
+<SidebarMenuButton asChild>
+  <a href="#">Home</a>
+</SidebarMenuButton>
+```
+
+### Icon and Label
+
+You can render an icon and a truncated label inside the button. Remember to wrap the label in a `<span>`.
+
+```tsx showLineNumbers
+<SidebarMenuButton asChild>
+  <a href="#">
+    <Home />
+    <span>Home</span>
+  </a>
+</SidebarMenuButton>
+```
+
+### isActive
+
+Use the `isActive` prop to mark a menu item as active.
+
+```tsx showLineNumbers
+<SidebarMenuButton asChild isActive>
+  <a href="#">Home</a>
+</SidebarMenuButton>
+```
+
+## SidebarMenuAction
+
+The `SidebarMenuAction` component is used to render a menu action within a `SidebarMenuItem`.
+
+This button works independently of the `SidebarMenuButton` i.e you can have the `<SidebarMenuButton />` as a clickable link and the `<SidebarMenuAction />` as a button.
+
+```tsx showLineNumbers
+<SidebarMenuItem>
+  <SidebarMenuButton asChild>
+    <a href="#">
+      <Home />
+      <span>Home</span>
+    </a>
+  </SidebarMenuButton>
+  <SidebarMenuAction>
+    <Plus /> <span className="sr-only">Add Project</span>
+  </SidebarMenuAction>
+</SidebarMenuItem>
+```
+
+### DropdownMenu
+
+Here's an example of a `SidebarMenuAction` component rendering a `DropdownMenu`.
+
+<figure className="mt-6 flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-menu-action"
+    title="Sidebar Menu Action"
+    type="block"
+    description="A sidebar menu action with a dropdown menu."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar menu action with a dropdown menu.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+<SidebarMenuItem>
+  <SidebarMenuButton asChild>
+    <a href="#">
+      <Home />
+      <span>Home</span>
+    </a>
+  </SidebarMenuButton>
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <SidebarMenuAction>
+        <MoreHorizontal />
+      </SidebarMenuAction>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent side="right" align="start">
+      <DropdownMenuItem>
+        <span>Edit Project</span>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <span>Delete Project</span>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</SidebarMenuItem>
+```
+
+## SidebarMenuSub
+
+The `SidebarMenuSub` component is used to render a submenu within a `SidebarMenu`.
+
+Use `<SidebarMenuSubItem />` and `<SidebarMenuSubButton />` to render a submenu item.
+
+<figure className="mt-6 flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-menu-sub"
+    title="Sidebar Menu Sub"
+    type="block"
+    description="A sidebar menu sub."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar menu with a submenu.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+<SidebarMenuItem>
+  <SidebarMenuButton />
+  <SidebarMenuSub>
+    <SidebarMenuSubItem>
+      <SidebarMenuSubButton />
+    </SidebarMenuSubItem>
+    <SidebarMenuSubItem>
+      <SidebarMenuSubButton />
+    </SidebarMenuSubItem>
+  </SidebarMenuSub>
+</SidebarMenuItem>
+```
+
+## Collapsible SidebarMenu
+
+To make a `SidebarMenu` component collapsible, wrap it and the `SidebarMenuSub` components in a `Collapsible`.
+
+<figure className="mt-6 flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-menu-collapsible"
+    title="Sidebar Menu"
+    type="block"
+    description="A collapsible sidebar menu."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A collapsible sidebar menu.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+<SidebarMenu>
+  <Collapsible defaultOpen className="group/collapsible">
+    <SidebarMenuItem>
+      <CollapsibleTrigger asChild>
+        <SidebarMenuButton />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <SidebarMenuSub>
+          <SidebarMenuSubItem />
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </SidebarMenuItem>
+  </Collapsible>
+</SidebarMenu>
+```
+
+## SidebarMenuBadge
+
+The `SidebarMenuBadge` component is used to render a badge within a `SidebarMenuItem`.
+
+<figure className="mt-6 flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-menu-badge"
+    title="Sidebar Menu Badge"
+    type="block"
+    description="A sidebar menu badge."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar menu with a badge.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+<SidebarMenuItem>
+  <SidebarMenuButton />
+  <SidebarMenuBadge>24</SidebarMenuBadge>
+</SidebarMenuItem>
+```
+
+## SidebarMenuSkeleton
+
+The `SidebarMenuSkeleton` component is used to render a skeleton for a `SidebarMenu`. You can use this to show a loading state when using React Server Components, SWR or react-query.
+
+```tsx showLineNumbers
+function NavProjectsSkeleton() {
+  return (
+    <SidebarMenu>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <SidebarMenuItem key={index}>
+          <SidebarMenuSkeleton />
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+```
+
+## SidebarSeparator
+
+The `SidebarSeparator` component is used to render a separator within a `Sidebar`.
+
+```tsx showLineNumbers
+<Sidebar>
+  <SidebarHeader />
+  <SidebarSeparator />
+  <SidebarContent>
+    <SidebarGroup />
+    <SidebarSeparator />
+    <SidebarGroup />
+  </SidebarContent>
+</Sidebar>
+```
+
+## SidebarTrigger
+
+Use the `SidebarTrigger` component to render a button that toggles the sidebar.
+
+The `SidebarTrigger` component must be used within a `SidebarProvider`.
+
+```tsx showLineNumbers
+<SidebarProvider>
+  <Sidebar />
+  <main>
+    <SidebarTrigger />
+  </main>
+</SidebarProvider>
+```
+
+### Custom Trigger
+
+To create a custom trigger, you can use the `useSidebar` hook.
+
+```tsx showLineNumbers
+import { useSidebar } from "@/components/ui/sidebar"
+
+export function CustomTrigger() {
+  const { toggleSidebar } = useSidebar()
+
+  return <button onClick={toggleSidebar}>Toggle Sidebar</button>
+}
+```
+
+## SidebarRail
+
+The `SidebarRail` component is used to render a rail within a `Sidebar`. This rail can be used to toggle the sidebar.
+
+```tsx showLineNumbers
+<Sidebar>
+  <SidebarHeader />
+  <SidebarContent>
+    <SidebarGroup />
+  </SidebarContent>
+  <SidebarFooter />
+  <SidebarRail />
+</Sidebar>
+```
+
+## Data Fetching
+
+### React Server Components
+
+Here's an example of a `SidebarMenu` component rendering a list of projects using React Server Components.
+
+<figure className="mt-6 flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-rsc"
+    title="Sidebar Menu RSC"
+    type="block"
+    description="A sidebar menu using React Server Components."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar menu using React Server Components.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers {6} title="Skeleton to show loading state."
+function NavProjectsSkeleton() {
+  return (
+    <SidebarMenu>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <SidebarMenuItem key={index}>
+          <SidebarMenuSkeleton showIcon />
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+```
+
+```tsx showLineNumbers {2} title="Server component fetching data."
+async function NavProjects() {
+  const projects = await fetchProjects()
+
+  return (
+    <SidebarMenu>
+      {projects.map((project) => (
+        <SidebarMenuItem key={project.name}>
+          <SidebarMenuButton asChild>
+            <a href={project.url}>
+              <project.icon />
+              <span>{project.name}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+```
+
+```tsx showLineNumbers {8-10} title="Usage with React Suspense."
+function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <React.Suspense fallback={<NavProjectsSkeleton />}>
+              <NavProjects />
+            </React.Suspense>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
+```
+
+### SWR and React Query
+
+You can use the same approach with [SWR](https://swr.vercel.app/) or [react-query](https://tanstack.com/query/latest/docs/framework/react/overview).
+
+```tsx showLineNumbers title="SWR"
+function NavProjects() {
+  const { data, isLoading } = useSWR("/api/projects", fetcher)
+
+  if (isLoading) {
+    return (
+      <SidebarMenu>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <SidebarMenuItem key={index}>
+            <SidebarMenuSkeleton showIcon />
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    )
+  }
+
+  if (!data) {
+    return ...
+  }
+
+  return (
+    <SidebarMenu>
+      {data.map((project) => (
+        <SidebarMenuItem key={project.name}>
+          <SidebarMenuButton asChild>
+            <a href={project.url}>
+              <project.icon />
+              <span>{project.name}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+```
+
+```tsx showLineNumbers title="React Query"
+function NavProjects() {
+  const { data, isLoading } = useQuery()
+
+  if (isLoading) {
+    return (
+      <SidebarMenu>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <SidebarMenuItem key={index}>
+            <SidebarMenuSkeleton showIcon />
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    )
+  }
+
+  if (!data) {
+    return ...
+  }
+
+  return (
+    <SidebarMenu>
+      {data.map((project) => (
+        <SidebarMenuItem key={project.name}>
+          <SidebarMenuButton asChild>
+            <a href={project.url}>
+              <project.icon />
+              <span>{project.name}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+```
+
+## Controlled Sidebar
+
+Use the `open` and `onOpenChange` props to control the sidebar.
+
+<figure className="mt-6 flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-controlled"
+    title="Sidebar Controlled"
+    type="block"
+    description="A controlled sidebar."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A controlled sidebar.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+export function AppSidebar() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <SidebarProvider open={open} onOpenChange={setOpen}>
+      <Sidebar />
+    </SidebarProvider>
+  )
+}
+```
+
+## Theming
+
+We use the following CSS variables to theme the sidebar.
+
+```css
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 0 0% 98%;
+    --sidebar-primary-foreground: 240 5.9% 10%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+```
+
+**We intentionally use different variables for the sidebar and the rest of the application** to make it easy to have a sidebar that is styled differently from the rest of the application. Think a sidebar with a darker shade from the main application.
+
+## Styling
+
+Here are some tips for styling the sidebar based on different states.
+
+- **Styling an element based on the sidebar collapsible state.** The following will hide the `SidebarGroup` when the sidebar is in `icon` mode.
+
+```tsx
+<Sidebar collapsible="icon">
+  <SidebarContent>
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden" />
+  </SidebarContent>
+</Sidebar>
+```
+
+- **Styling a menu action based on the menu button active state.** The following will force the menu action to be visible when the menu button is active.
+
+```tsx
+<SidebarMenuItem>
+  <SidebarMenuButton />
+  <SidebarMenuAction className="peer-data-[active=true]/menu-button:opacity-100" />
+</SidebarMenuItem>
+```
+
+You can find more tips on using states for styling in this [Twitter thread](https://x.com/shadcn/status/1842329158879420864).
+
+## Changelog
+
+### 2024-10-30 Cookie handling in setOpen
+
+- [#5593](https://github.com/shadcn-ui/ui/pull/5593) - Improved setOpen callback logic in `<SidebarProvider>`.
+
+Update the `setOpen` callback in `<SidebarProvider>` as follows:
+
+```tsx showLineNumbers
+const setOpen = React.useCallback(
+  (value: boolean | ((value: boolean) => boolean)) => {
+    const openState = typeof value === "function" ? value(open) : value
+    if (setOpenProp) {
+      setOpenProp(openState)
+    } else {
+      _setOpen(openState)
+    }
+
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  },
+  [setOpenProp, open]
+)
+```
+
+### 2024-10-21 Fixed `text-sidebar-foreground`
+
+- [#5491](https://github.com/shadcn-ui/ui/pull/5491) - Moved `text-sidebar-foreground` from `<SidebarProvider>` to `<Sidebar>` component.
+
+### 2024-10-20 Typo in `useSidebar` hook.
+
+Fixed typo in `useSidebar` hook.
+
+```diff showLineNumbers title="sidebar.tsx"
+-  throw new Error("useSidebar must be used within a Sidebar.")
++  throw new Error("useSidebar must be used within a SidebarProvider.")
+```
diff --git a/apps/v4/content/docs/components/skeleton.mdx b/apps/v4/content/docs/components/skeleton.mdx
new file mode 100644
index 00000000000..39e49f01610
--- /dev/null
+++ b/apps/v4/content/docs/components/skeleton.mdx
@@ -0,0 +1,58 @@
+---
+title: Skeleton
+description: Use to show a placeholder while content is loading.
+component: true
+---
+
+<ComponentPreview name="skeleton-demo" description="A skeleton component." />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add skeleton
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="skeleton" title="components/ui/skeleton.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Skeleton } from "@/components/ui/skeleton"
+```
+
+```tsx
+<Skeleton className="h-[20px] w-[100px] rounded-full" />
+```
+
+## Examples
+
+### Card
+
+<ComponentPreview
+  name="skeleton-card"
+  description="A card with skeleton showing a loading state."
+/>
diff --git a/apps/v4/content/docs/components/slider.mdx b/apps/v4/content/docs/components/slider.mdx
new file mode 100644
index 00000000000..e4aaf8e3fc2
--- /dev/null
+++ b/apps/v4/content/docs/components/slider.mdx
@@ -0,0 +1,58 @@
+---
+title: Slider
+description: An input where the user selects a value from within a given range.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/slider
+  api: https://www.radix-ui.com/docs/primitives/components/slider#api-reference
+---
+
+<ComponentPreview name="slider-demo" description="A slider component." />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add slider
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-slider
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="slider" title="components/ui/slider.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Slider } from "@/components/ui/slider"
+```
+
+```tsx
+<Slider defaultValue={[33]} max={100} step={1} />
+```
diff --git a/apps/v4/content/docs/components/sonner.mdx b/apps/v4/content/docs/components/sonner.mdx
new file mode 100644
index 00000000000..d7a761dbb50
--- /dev/null
+++ b/apps/v4/content/docs/components/sonner.mdx
@@ -0,0 +1,101 @@
+---
+title: Sonner
+description: An opinionated toast component for React.
+component: true
+links:
+  doc: https://sonner.emilkowal.ski
+---
+
+<ComponentPreview name="sonner-demo" />
+
+## About
+
+Sonner is built and maintained by [emilkowalski\_](https://twitter.com/emilkowalski_).
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Run the following command:</Step>
+
+```bash
+npx shadcn@latest add sonner
+```
+
+<Step>Add the Toaster component</Step>
+
+```tsx title="app/layout.tsx" {1,9}
+import { Toaster } from "@/components/ui/sonner"
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <main>{children}</main>
+        <Toaster />
+      </body>
+    </html>
+  )
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install sonner next-themes
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="sonner" title="components/ui/sonner.tsx" />
+
+<Step>Add the Toaster component</Step>
+
+```tsx title="app/layout.tsx" {1,9}
+import { Toaster } from "@/components/ui/sonner"
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <main>{children}</main>
+        <Toaster />
+      </body>
+    </html>
+  )
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { toast } from "sonner"
+```
+
+```tsx
+toast("Event has been created.")
+```
diff --git a/apps/v4/content/docs/components/switch.mdx b/apps/v4/content/docs/components/switch.mdx
new file mode 100644
index 00000000000..317fc817681
--- /dev/null
+++ b/apps/v4/content/docs/components/switch.mdx
@@ -0,0 +1,64 @@
+---
+title: Switch
+description: A control that allows the user to toggle between checked and not checked.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/switch
+  api: https://www.radix-ui.com/docs/primitives/components/switch#api-reference
+---
+
+<ComponentPreview name="switch-demo" description="A switch component." />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add switch
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-switch
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="switch" title="components/ui/switch.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Switch } from "@/components/ui/switch"
+```
+
+```tsx
+<Switch />
+```
+
+## Examples
+
+### Form
+
+<ComponentPreview name="switch-form" />
diff --git a/apps/v4/content/docs/components/table.mdx b/apps/v4/content/docs/components/table.mdx
new file mode 100644
index 00000000000..9ded734a915
--- /dev/null
+++ b/apps/v4/content/docs/components/table.mdx
@@ -0,0 +1,83 @@
+---
+title: Table
+description: A responsive table component.
+component: true
+---
+
+<ComponentPreview name="table-demo" description="A table component." />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add table
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="table" title="components/ui/table.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+```
+
+```tsx showLineNumbers
+<Table>
+  <TableCaption>A list of your recent invoices.</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead className="w-[100px]">Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Method</TableHead>
+      <TableHead className="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell className="font-medium">INV001</TableCell>
+      <TableCell>Paid</TableCell>
+      <TableCell>Credit Card</TableCell>
+      <TableCell className="text-right">$250.00</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+## Data Table
+
+You can use the `<Table />` component to build more complex data tables. Combine it with [@tanstack/react-table](https://tanstack.com/table/v8) to create tables with sorting, filtering and pagination.
+
+See the [Data Table](/docs/components/data-table) documentation for more information.
+
+You can also see an example of a data table in the [Tasks](/examples/tasks) demo.
diff --git a/apps/v4/content/docs/components/tabs.mdx b/apps/v4/content/docs/components/tabs.mdx
new file mode 100644
index 00000000000..90a03232939
--- /dev/null
+++ b/apps/v4/content/docs/components/tabs.mdx
@@ -0,0 +1,68 @@
+---
+title: Tabs
+description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/tabs
+  api: https://www.radix-ui.com/docs/primitives/components/tabs#api-reference
+---
+
+<ComponentPreview
+  name="tabs-demo"
+  description="A tabs component with two forms."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add tabs
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-tabs
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="tabs" title="components/ui/tabs.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+```
+
+```tsx showLineNumbers
+<Tabs defaultValue="account" className="w-[400px]">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Make changes to your account here.</TabsContent>
+  <TabsContent value="password">Change your password here.</TabsContent>
+</Tabs>
+```
diff --git a/apps/v4/content/docs/components/textarea.mdx b/apps/v4/content/docs/components/textarea.mdx
new file mode 100644
index 00000000000..ca869b2734e
--- /dev/null
+++ b/apps/v4/content/docs/components/textarea.mdx
@@ -0,0 +1,85 @@
+---
+title: Textarea
+description: Displays a form textarea or a component that looks like a textarea.
+component: true
+---
+
+<ComponentPreview name="textarea-demo" description="A textarea" />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add textarea
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="textarea" title="components/ui/textarea.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Textarea } from "@/components/ui/textarea"
+```
+
+```tsx
+<Textarea />
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="textarea-demo" description="A textarea" />
+
+### Disabled
+
+<ComponentPreview name="textarea-disabled" description="A disabled textarea" />
+
+### With Label
+
+<ComponentPreview
+  name="textarea-with-label"
+  className="[&_div.grid]:w-full"
+  description="A textarea with a label"
+/>
+
+### With Text
+
+<ComponentPreview
+  name="textarea-with-text"
+  description="A textarea with text"
+/>
+
+### With Button
+
+<ComponentPreview
+  name="textarea-with-button"
+  description="A textarea with a button"
+/>
+
+### Form
+
+<ComponentPreview name="textarea-form" />
diff --git a/apps/v4/content/docs/components/toast.mdx b/apps/v4/content/docs/components/toast.mdx
new file mode 100644
index 00000000000..9069d926c7e
--- /dev/null
+++ b/apps/v4/content/docs/components/toast.mdx
@@ -0,0 +1,14 @@
+---
+title: Toast
+description: A succinct message that is displayed temporarily.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/toast
+  api: https://www.radix-ui.com/docs/primitives/components/toast#api-reference
+---
+
+<Callout title="The toast component has been deprecated." className="mt-0">
+  See the [sonner](/docs/components/sonner) documentation for more information.
+</Callout>
+
+If you're looking for the old toast component, see the [old docs](https://v3.shadcn.com/docs/components/toast) for more information.
diff --git a/apps/v4/content/docs/components/toggle-group.mdx b/apps/v4/content/docs/components/toggle-group.mdx
new file mode 100644
index 00000000000..a1b4a1a7c71
--- /dev/null
+++ b/apps/v4/content/docs/components/toggle-group.mdx
@@ -0,0 +1,109 @@
+---
+title: Toggle Group
+description: A set of two-state buttons that can be toggled on or off.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/toggle-group
+  api: https://www.radix-ui.com/docs/primitives/components/toggle-group#api-reference
+---
+
+<ComponentPreview
+  name="toggle-group-demo"
+  description="A toggle group with three items."
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add toggle-group
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-toggle-group
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="toggle-group" title="components/ui/toggle-group.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+```
+
+```tsx
+<ToggleGroup type="single">
+  <ToggleGroupItem value="a">A</ToggleGroupItem>
+  <ToggleGroupItem value="b">B</ToggleGroupItem>
+  <ToggleGroupItem value="c">C</ToggleGroupItem>
+</ToggleGroup>
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview
+  name="toggle-group-demo"
+  description="A toggle group with three items."
+/>
+
+### Outline
+
+<ComponentPreview
+  name="toggle-group-outline"
+  description="A toggle group using the outline variant."
+/>
+
+### Single
+
+<ComponentPreview
+  name="toggle-group-single"
+  description="A toggle group with single selection."
+/>
+
+### Small
+
+<ComponentPreview
+  name="toggle-group-sm"
+  description="A toggle group using the small size."
+/>
+
+### Large
+
+<ComponentPreview
+  name="toggle-group-lg"
+  description="A toggle group using the large size."
+/>
+
+### Disabled
+
+<ComponentPreview
+  name="toggle-group-disabled"
+  description="A disabled toggle group."
+/>
diff --git a/apps/v4/content/docs/components/toggle.mdx b/apps/v4/content/docs/components/toggle.mdx
new file mode 100644
index 00000000000..e826256df84
--- /dev/null
+++ b/apps/v4/content/docs/components/toggle.mdx
@@ -0,0 +1,93 @@
+---
+title: Toggle
+description: A two-state button that can be either on or off.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/toggle
+  api: https://www.radix-ui.com/docs/primitives/components/toggle#api-reference
+---
+
+<ComponentPreview name="toggle-demo" description="A toggle component." />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add toggle
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-toggle
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="toggle" title="components/ui/toggle.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Toggle } from "@/components/ui/toggle"
+```
+
+```tsx
+<Toggle>Toggle</Toggle>
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="toggle-demo" description="A toggle component." />
+
+### Outline
+
+<ComponentPreview
+  name="toggle-outline"
+  description="A toggle component using the outline variant."
+/>
+
+### With Text
+
+<ComponentPreview
+  name="toggle-with-text"
+  description="A toggle component with text."
+/>
+
+### Small
+
+<ComponentPreview name="toggle-sm" description="A small toggle component." />
+
+### Large
+
+<ComponentPreview name="toggle-lg" description="A large toggle component." />
+
+### Disabled
+
+<ComponentPreview
+  name="toggle-disabled"
+  description="A disabled toggle component."
+/>
diff --git a/apps/v4/content/docs/components/tooltip.mdx b/apps/v4/content/docs/components/tooltip.mdx
new file mode 100644
index 00000000000..8d4629c08a9
--- /dev/null
+++ b/apps/v4/content/docs/components/tooltip.mdx
@@ -0,0 +1,67 @@
+---
+title: Tooltip
+description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/tooltip
+  api: https://www.radix-ui.com/docs/primitives/components/tooltip#api-reference
+---
+
+<ComponentPreview name="tooltip-demo" description="A tooltip component." />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add tooltip
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-tooltip
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="tooltip" title="components/ui/tooltip.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+```
+
+```tsx showLineNumbers
+<Tooltip>
+  <TooltipTrigger>Hover</TooltipTrigger>
+  <TooltipContent>
+    <p>Add to library</p>
+  </TooltipContent>
+</Tooltip>
+```
diff --git a/apps/v4/content/docs/components/typography.mdx b/apps/v4/content/docs/components/typography.mdx
new file mode 100644
index 00000000000..f51f4e0b928
--- /dev/null
+++ b/apps/v4/content/docs/components/typography.mdx
@@ -0,0 +1,66 @@
+---
+title: Typography
+description: Styles for headings, paragraphs, lists...etc
+component: true
+---
+
+We do not ship any typography styles by default. This page is an example of how you can use utility classes to style your text.
+
+<ComponentPreview
+  name="typography-demo"
+  description="A collection of typographic elements."
+  className="[&_.preview]:!h-auto"
+  hideCode
+/>
+
+## h1
+
+<ComponentPreview name="typography-h1" />
+
+## h2
+
+<ComponentPreview name="typography-h2" />
+
+## h3
+
+<ComponentPreview name="typography-h3" />
+
+## h4
+
+<ComponentPreview name="typography-h4" />
+
+## p
+
+<ComponentPreview name="typography-p" />
+
+## blockquote
+
+<ComponentPreview name="typography-blockquote" />
+
+## table
+
+<ComponentPreview name="typography-table" />
+
+## list
+
+<ComponentPreview name="typography-list" />
+
+## Inline code
+
+<ComponentPreview name="typography-inline-code" />
+
+## Lead
+
+<ComponentPreview name="typography-lead" />
+
+## Large
+
+<ComponentPreview name="typography-large" />
+
+## Small
+
+<ComponentPreview name="typography-small" />
+
+## Muted
+
+<ComponentPreview name="typography-muted" />
diff --git a/apps/v4/content/docs/dark-mode/astro.mdx b/apps/v4/content/docs/dark-mode/astro.mdx
new file mode 100644
index 00000000000..4d264ccb0d3
--- /dev/null
+++ b/apps/v4/content/docs/dark-mode/astro.mdx
@@ -0,0 +1,114 @@
+---
+title: Astro
+description: Adding dark mode to your astro app.
+---
+
+## Create an inline theme script
+
+```astro title="src/pages/index.astro"
+---
+import '../styles/globals.css'
+---
+
+<script is:inline>
+	const getThemePreference = () => {
+		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+			return localStorage.getItem('theme');
+		}
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	};
+	const isDark = getThemePreference() === 'dark';
+	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
+
+	if (typeof localStorage !== 'undefined') {
+		const observer = new MutationObserver(() => {
+			const isDark = document.documentElement.classList.contains('dark');
+			localStorage.setItem('theme', isDark ? 'dark' : 'light');
+		});
+		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+	}
+</script>
+
+<html lang="en">
+	<body>
+      <h1>Astro</h1>
+	</body>
+</html>
+```
+
+## Add a mode toggle
+
+```tsx title="src/components/ModeToggle.tsx"
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+  const [theme, setThemeState] = React.useState<
+    "theme-light" | "dark" | "system"
+  >("theme-light")
+
+  React.useEffect(() => {
+    const isDarkMode = document.documentElement.classList.contains("dark")
+    setThemeState(isDarkMode ? "dark" : "theme-light")
+  }, [])
+
+  React.useEffect(() => {
+    const isDark =
+      theme === "dark" ||
+      (theme === "system" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    document.documentElement.classList[isDark ? "add" : "remove"]("dark")
+  }, [theme])
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setThemeState("theme-light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setThemeState("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setThemeState("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+```
+
+## Display the mode toggle
+
+Place a mode toggle on your site to toggle between light and dark mode.
+
+```astro title="src/pages/index.astro"
+---
+import '../styles/globals.css'
+import { ModeToggle } from '@/components/ModeToggle';
+---
+
+<!-- Inline script -->
+
+<html lang="en">
+	<body>
+      <h1>Astro</h1>
+      <ModeToggle client:load />
+	</body>
+</html>
+```
diff --git a/apps/v4/content/docs/dark-mode/index.mdx b/apps/v4/content/docs/dark-mode/index.mdx
new file mode 100644
index 00000000000..de7b6957f6b
--- /dev/null
+++ b/apps/v4/content/docs/dark-mode/index.mdx
@@ -0,0 +1,59 @@
+---
+title: Dark Mode
+description: Adding dark mode to your site.
+---
+
+<div className="grid gap-4 sm:grid-cols-2 sm:gap-6">
+  <LinkedCard href="/docs/dark-mode/next">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Next.js</title>
+      <path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z" />
+    </svg>
+    <p className="mt-2 font-medium">Next.js</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/dark-mode/vite">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Vite</title>
+      <path d="m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808 0 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z" />
+    </svg>
+    <p className="mt-2 font-medium">Vite</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/dark-mode/astro">
+    <svg
+      role="img"
+      viewBox="0 0 64 79"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <path d="M19.9924 65.9282C16.1165 62.432 14.9851 55.0859 16.5999 49.7638C19.3998 53.1193 23.2793 54.1822 27.2977 54.7822C33.5013 55.7081 39.5937 55.3618 45.3565 52.5637C46.0158 52.2434 46.625 51.8174 47.3454 51.386C47.8861 52.9341 48.0268 54.497 47.838 56.0877C47.3787 59.9617 45.4251 62.9542 42.3177 65.2227C41.0752 66.13 39.7604 66.9411 38.4771 67.7967C34.5346 70.4262 33.4679 73.5095 34.9494 77.9946C34.9846 78.1038 35.0161 78.2131 35.0957 78.4797C33.0828 77.5909 31.6124 76.2965 30.4921 74.5946C29.3088 72.7984 28.7458 70.8114 28.7162 68.6615C28.7014 67.6152 28.7014 66.5597 28.5588 65.5282C28.2107 63.0135 27.0144 61.8876 24.7608 61.8227C22.4479 61.7561 20.6183 63.1672 20.1331 65.3893C20.0961 65.5597 20.0424 65.7282 19.9887 65.9263L19.9924 65.9282Z" />
+      <path d="M0.5 51.3932C0.5 51.3932 11.0979 46.2433 21.7254 46.2433L29.7382 21.5069C30.0381 20.3106 30.9141 19.4977 31.9029 19.4977C32.8918 19.4977 33.7677 20.3106 34.0677 21.5069L42.0804 46.2433C54.6672 46.2433 63.3058 51.3932 63.3058 51.3932C63.3058 51.3932 45.3044 2.47586 45.2692 2.37772C44.7526 0.931458 43.8804 0 42.7045 0H21.1032C19.9273 0 19.0903 0.931458 18.5384 2.37772C18.4995 2.47401 0.5 51.3932 0.5 51.3932Z" />
+    </svg>
+    <p className="mt-2 font-medium">Astro</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/dark-mode/remix">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Remix</title>
+      <path d="M21.511 18.508c.216 2.773.216 4.073.216 5.492H15.31c0-.309.006-.592.011-.878.018-.892.036-1.821-.109-3.698-.19-2.747-1.374-3.358-3.55-3.358H1.574v-5h10.396c2.748 0 4.122-.835 4.122-3.049 0-1.946-1.374-3.125-4.122-3.125H1.573V0h11.541c6.221 0 9.313 2.938 9.313 7.632 0 3.511-2.176 5.8-5.114 6.182 2.48.497 3.93 1.909 4.198 4.694ZM1.573 24v-3.727h6.784c1.133 0 1.379.84 1.379 1.342V24Z" />
+    </svg>
+    <p className="mt-2 font-medium">Remix</p>
+  </LinkedCard>
+</div>
diff --git a/apps/v4/content/docs/dark-mode/meta.json b/apps/v4/content/docs/dark-mode/meta.json
new file mode 100644
index 00000000000..86a47e4c7f3
--- /dev/null
+++ b/apps/v4/content/docs/dark-mode/meta.json
@@ -0,0 +1,4 @@
+{
+  "title": "Dark mode",
+  "pages": ["index", "next", "vite", "astro", "remix"]
+}
diff --git a/apps/v4/content/docs/dark-mode/next.mdx b/apps/v4/content/docs/dark-mode/next.mdx
new file mode 100644
index 00000000000..144d311b755
--- /dev/null
+++ b/apps/v4/content/docs/dark-mode/next.mdx
@@ -0,0 +1,66 @@
+---
+title: Next.js
+description: Adding dark mode to your next app.
+---
+
+<Steps>
+
+## Install next-themes
+
+Start by installing `next-themes`:
+
+```bash
+npm install next-themes
+```
+
+## Create a theme provider
+
+```tsx title="components/theme-provider.tsx" showLineNumbers
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
+```
+
+## Wrap your root layout
+
+Add the `ThemeProvider` to your root layout and add the `suppressHydrationWarning` prop to the `html` tag.
+
+```tsx {1,6,9-14,16} title="app/layout.tsx" showLineNumbers
+import { ThemeProvider } from "@/components/theme-provider"
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <>
+      <html lang="en" suppressHydrationWarning>
+        <head />
+        <body>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+          </ThemeProvider>
+        </body>
+      </html>
+    </>
+  )
+}
+```
+
+## Add a mode toggle
+
+Place a mode toggle on your site to toggle between light and dark mode.
+
+<ComponentPreview name="mode-toggle" className="[&_.preview]:items-start" />
+
+</Steps>
diff --git a/apps/v4/content/docs/dark-mode/remix.mdx b/apps/v4/content/docs/dark-mode/remix.mdx
new file mode 100644
index 00000000000..43d8664b31a
--- /dev/null
+++ b/apps/v4/content/docs/dark-mode/remix.mdx
@@ -0,0 +1,157 @@
+---
+title: Remix
+description: Adding dark mode to your remix app.
+---
+
+<Steps>
+
+## Modify your tailwind.css file
+
+Add `:root[class~="dark"]` to your tailwind.css file. This will allow you to use the `dark` class on your html element to apply dark mode styles.
+
+```css {2} title="app/tailwind.css" showLineNumbers
+.dark,
+:root[class~="dark"] {
+  ...;
+}
+```
+
+## Install remix-themes
+
+Start by installing `remix-themes`:
+
+```bash
+npm install remix-themes
+```
+
+## Create a session storage and theme session resolver
+
+```tsx title="app/sessions.server.tsx" showLineNumbers
+import { createThemeSessionResolver } from "remix-themes"
+
+// You can default to 'development' if process.env.NODE_ENV is not set
+const isProduction = process.env.NODE_ENV === "production"
+
+const sessionStorage = createCookieSessionStorage({
+  cookie: {
+    name: "theme",
+    path: "/",
+    httpOnly: true,
+    sameSite: "lax",
+    secrets: ["s3cr3t"],
+    // Set domain and secure only if in production
+    ...(isProduction
+      ? { domain: "your-production-domain.com", secure: true }
+      : {}),
+  },
+})
+
+export const themeSessionResolver = createThemeSessionResolver(sessionStorage)
+```
+
+## Set up Remix Themes
+
+Add the `ThemeProvider` to your root layout.
+
+```tsx {1-3,6-11,15-22,25-26,28,33} title="app/root.tsx" showLineNumbers
+import clsx from "clsx"
+import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from "remix-themes"
+
+import { themeSessionResolver } from "./sessions.server"
+
+// Return the theme from the session storage using the loader
+export async function loader({ request }: LoaderFunctionArgs) {
+  const { getTheme } = await themeSessionResolver(request)
+  return {
+    theme: getTheme(),
+  }
+}
+// Wrap your app with ThemeProvider.
+// `specifiedTheme` is the stored theme in the session storage.
+// `themeAction` is the action name that's used to change the theme in the session storage.
+export default function AppWithProviders() {
+  const data = useLoaderData<typeof loader>()
+  return (
+    <ThemeProvider specifiedTheme={data.theme} themeAction="/action/set-theme">
+      <App />
+    </ThemeProvider>
+  )
+}
+
+export function App() {
+  const data = useLoaderData<typeof loader>()
+  const [theme] = useTheme()
+  return (
+    <html lang="en" className={clsx(theme)}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  )
+}
+```
+
+## Add an action route
+
+Create a file in `/routes/action.set-theme.ts`. Ensure that you pass the filename to the ThemeProvider component. This route it's used to store the preferred theme in the session storage when the user changes it.
+
+```tsx title="app/routes/action.set-theme.ts" showLineNumbers
+import { createThemeAction } from "remix-themes"
+
+import { themeSessionResolver } from "./sessions.server"
+
+export const action = createThemeAction(themeSessionResolver)
+```
+
+## Add a mode toggle
+
+Place a mode toggle on your site to toggle between light and dark mode.
+
+```tsx title="components/mode-toggle.tsx" showLineNumbers
+import { Moon, Sun } from "lucide-react"
+import { Theme, useTheme } from "remix-themes"
+
+import { Button } from "./ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu"
+
+export function ModeToggle() {
+  const [, setTheme] = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme(Theme.LIGHT)}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme(Theme.DARK)}>
+          Dark
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+```
+
+</Steps>
diff --git a/apps/v4/content/docs/dark-mode/vite.mdx b/apps/v4/content/docs/dark-mode/vite.mdx
new file mode 100644
index 00000000000..37dbac35485
--- /dev/null
+++ b/apps/v4/content/docs/dark-mode/vite.mdx
@@ -0,0 +1,144 @@
+---
+title: Vite
+description: Adding dark mode to your vite app.
+---
+
+## Create a theme provider
+
+```tsx title="components/theme-provider.tsx" showLineNumbers
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove("light", "dark")
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light"
+
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider")
+
+  return context
+}
+```
+
+## Wrap your root layout
+
+Add the `ThemeProvider` to your root layout.
+
+```tsx {1,5-7} title="App.tsx" showLineNumbers
+import { ThemeProvider } from "@/components/theme-provider"
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      {children}
+    </ThemeProvider>
+  )
+}
+
+export default App
+```
+
+## Add a mode toggle
+
+Place a mode toggle on your site to toggle between light and dark mode.
+
+```tsx title="components/mode-toggle.tsx" showLineNumbers
+import { Moon, Sun } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useTheme } from "@/components/theme-provider"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+```
diff --git a/apps/v4/content/docs/installation/astro.mdx b/apps/v4/content/docs/installation/astro.mdx
new file mode 100644
index 00000000000..40d306bbe34
--- /dev/null
+++ b/apps/v4/content/docs/installation/astro.mdx
@@ -0,0 +1,75 @@
+---
+title: Astro
+description: Install and configure shadcn/ui for Astro
+---
+
+<Steps>
+
+### Create project
+
+Start by creating a new Astro project:
+
+```bash
+npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
+```
+
+### Edit tsconfig.json file
+
+Add the following code to the `tsconfig.json` file to resolve paths:
+
+```ts title="tsconfig.json" {4-9} showLineNumbers
+{
+  "compilerOptions": {
+    // ...
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+    // ...
+  }
+}
+```
+
+### Run the CLI
+
+Run the `shadcn` init command to setup your project:
+
+```bash
+npx shadcn@latest init
+```
+
+### Add Components
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@latest add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```astro title="src/pages/index.astro" {2,16} showLineNumbers
+---
+import { Button } from "@/components/ui/button"
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro + TailwindCSS</title>
+	</head>
+
+	<body>
+		<div className="grid place-items-center h-screen content-center">
+			<Button>Button</Button>
+		</div>
+	</body>
+</html>
+```
+
+</Steps>
diff --git a/apps/v4/content/docs/installation/gatsby.mdx b/apps/v4/content/docs/installation/gatsby.mdx
new file mode 100644
index 00000000000..3b7d53fcae5
--- /dev/null
+++ b/apps/v4/content/docs/installation/gatsby.mdx
@@ -0,0 +1,126 @@
+---
+title: Gatsby
+description: Install and configure Gatsby.
+---
+
+<Callout className="mb-6 border-blue-600 bg-blue-50 dark:border-blue-900 dark:bg-blue-950 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Update:** We have added full support for React 19 and Tailwind v4 in the
+  `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
+  information.
+</Callout>
+
+<Steps>
+
+### Create project
+
+Start by creating a new Gatsby project using `create-gatsby`:
+
+```bash
+npm init gatsby
+```
+
+### Configure your Gatsby project to use TypeScript and Tailwind CSS
+
+You will be asked a few questions to configure your project:
+
+```txt showLineNumbers
+✔ What would you like to call your site?
+· your-app-name
+✔ What would you like to name the folder where your site will be created?
+· your-app-name
+✔ Will you be using JavaScript or TypeScript?
+· TypeScript
+✔ Will you be using a CMS?
+· Choose whatever you want
+✔ Would you like to install a styling system?
+· Tailwind CSS
+✔ Would you like to install additional features with other plugins?
+· Choose whatever you want
+✔ Shall we do this? (Y/n) · Yes
+```
+
+### Edit tsconfig.json file
+
+Add the following code to the `tsconfig.json` file to resolve paths:
+
+```ts {4-9} showLineNumbers
+{
+  "compilerOptions": {
+    // ...
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+    // ...
+  }
+}
+```
+
+### Create gatsby-node.ts file
+
+Create a `gatsby-node.ts` file at the root of your project if it doesn’t already exist, and add the code below to the `gatsby-node` file so your app can resolve paths:
+
+```ts
+import * as path from "path"
+
+export const onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        "@/components": path.resolve(__dirname, "src/components"),
+        "@/lib/utils": path.resolve(__dirname, "src/lib/utils"),
+      },
+    },
+  })
+}
+```
+
+### Run the CLI
+
+Run the `shadcn` init command to setup your project:
+
+```bash
+npx shadcn@latest init
+```
+
+### Configure components.json
+
+You will be asked a few questions to configure `components.json`:
+
+```txt showLineNumbers
+Would you like to use TypeScript (recommended)? no / yes
+Which style would you like to use? › Default
+Which color would you like to use as base color? › Slate
+Where is your global CSS file? › › ./src/styles/globals.css
+Do you want to use CSS variables for colors? › no / yes
+Where is your tailwind.config.js located? › tailwind.config.js
+Configure the import alias for components: › @/components
+Configure the import alias for utils: › @/lib/utils
+Are you using React Server Components? › no
+```
+
+### That's it
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@latest add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx {1,6} showLineNumbers
+import { Button } from "@/components/ui/button"
+
+export default function Home() {
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+```
+
+</Steps>
diff --git a/apps/v4/content/docs/installation/index.mdx b/apps/v4/content/docs/installation/index.mdx
new file mode 100644
index 00000000000..7147f384d98
--- /dev/null
+++ b/apps/v4/content/docs/installation/index.mdx
@@ -0,0 +1,111 @@
+---
+title: Installation
+description: How to install dependencies and structure your app.
+---
+
+## Pick Your Framework
+
+Start by selecting your framework of choice. Then follow the instructions to install the dependencies and structure your app. shadcn/ui is built to work with all React frameworks.
+
+<div className="mt-8 grid gap-4 sm:grid-cols-2 sm:gap-6">
+  <LinkedCard href="/docs/installation/next">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Next.js</title>
+      <path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z" />
+    </svg>
+    <p className="mt-2 font-medium">Next.js</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/vite">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Vite</title>
+      <path d="m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808 0 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z" />
+    </svg>
+    <p className="mt-2 font-medium">Vite</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/laravel">
+    <svg
+      role="img"
+      viewBox="0 0 62 65"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+    >
+      <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" />
+    </svg>
+    <p className="mt-2 font-medium">Laravel</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/react-router">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <path d="M12.118 5.466a2.306 2.306 0 0 0-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 0 0-1.613-.73zm-4.785 4.36a2.145 2.145 0 0 0-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 0 0-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z" />
+    </svg>
+    <p className="mt-2 font-medium">React Router</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/astro">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>Astro</title>
+      <path
+        d="M16.074 16.86C15.354 17.476 13.917 17.895 12.262 17.895C10.23 17.895 8.527 17.263 8.075 16.412C7.914 16.9 7.877 17.458 7.877 17.814C7.877 17.814 7.771 19.564 8.988 20.782C8.988 20.15 9.501 19.637 10.133 19.637C11.216 19.637 11.215 20.582 11.214 21.349V21.418C11.214 22.582 11.925 23.579 12.937 24C12.7812 23.6794 12.7005 23.3275 12.701 22.971C12.701 21.861 13.353 21.448 14.111 20.968C14.713 20.585 15.383 20.161 15.844 19.308C16.0926 18.8493 16.2225 18.3357 16.222 17.814C16.2221 17.4903 16.1722 17.1685 16.074 16.86ZM15.551 0.6C15.747 0.844 15.847 1.172 16.047 1.829L20.415 16.176C18.7743 15.3246 17.0134 14.7284 15.193 14.408L12.35 4.8C12.3273 4.72337 12.2803 4.65616 12.2162 4.60844C12.152 4.56072 12.0742 4.53505 11.9943 4.53528C11.9143 4.5355 11.8366 4.56161 11.7727 4.60969C11.7089 4.65777 11.6623 4.72524 11.64 4.802L8.83 14.405C7.00149 14.724 5.23264 15.3213 3.585 16.176L7.974 1.827C8.174 1.171 8.274 0.843 8.471 0.6C8.64406 0.385433 8.86922 0.218799 9.125 0.116C9.415 0 9.757 0 10.443 0H13.578C14.264 0 14.608 0 14.898 0.117C15.1529 0.219851 15.3783 0.386105 15.551 0.6Z"
+        fill="currentColor"
+      />
+    </svg>
+    <p className="mt-2 font-medium">Astro</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/tanstack">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
+    </svg>
+    <p className="mt-2 font-medium">TanStack Start</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/tanstack-router">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
+    </svg>
+    <p className="mt-2 font-medium">TanStack Router</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/manual">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10"
+      fill="currentColor"
+    >
+      <title>React</title>
+      <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
+    </svg>
+    <p className="mt-2 font-medium">Manual</p>
+  </LinkedCard>
+</div>
diff --git a/apps/v4/content/docs/installation/laravel.mdx b/apps/v4/content/docs/installation/laravel.mdx
new file mode 100644
index 00000000000..8f9b8ea30a8
--- /dev/null
+++ b/apps/v4/content/docs/installation/laravel.mdx
@@ -0,0 +1,40 @@
+---
+title: Laravel
+description: Install and configure shadcn/ui for Laravel
+---
+
+<Steps>
+
+### Create project
+
+Start by creating a new Laravel project with Inertia and React using the laravel installer `laravel new my-app`:
+
+```bash
+laravel new my-app --react
+```
+
+### Add Components
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@latest add switch
+```
+
+The command above will add the `Switch` component to `resources/js/components/ui/switch.tsx`. You can then import it like this:
+
+```tsx title="resources/js/pages/index.tsx" {1,6} showLineNumbers
+import { Switch } from "@/components/ui/switch"
+
+const MyPage = () => {
+  return (
+    <div>
+      <Switch />
+    </div>
+  )
+}
+
+export default MyPage
+```
+
+</Steps>
diff --git a/apps/v4/content/docs/installation/manual.mdx b/apps/v4/content/docs/installation/manual.mdx
new file mode 100644
index 00000000000..0c1c3c6bdf3
--- /dev/null
+++ b/apps/v4/content/docs/installation/manual.mdx
@@ -0,0 +1,216 @@
+---
+title: Manual Installation
+description: Add dependencies to your project manually.
+---
+
+<Steps>
+
+### Add Tailwind CSS
+
+Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.
+
+[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation)
+
+### Add dependencies
+
+Add the following dependencies to your project:
+
+```bash
+npm install class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
+```
+
+### Configure path aliases
+
+Configure the path aliases in your `tsconfig.json` file.
+
+```json {3-6} title="tsconfig.json" showLineNumbers
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
+```
+
+The `@` alias is a preference. You can use other aliases if you want.
+
+### Configure styles
+
+Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).
+
+<CodeCollapsibleWrapper>
+
+```css showLineNumbers title="src/styles/globals.css"
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+
+</CodeCollapsibleWrapper>
+
+### Add a cn helper
+
+```ts showLineNumbers title="lib/utils.ts"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+```
+
+### 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": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "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.
+
+</Steps>
diff --git a/apps/v4/content/docs/installation/meta.json b/apps/v4/content/docs/installation/meta.json
new file mode 100644
index 00000000000..8d6158b89ba
--- /dev/null
+++ b/apps/v4/content/docs/installation/meta.json
@@ -0,0 +1,13 @@
+{
+  "pages": [
+    "next",
+    "vite",
+    "laravel",
+    "react-router",
+    "remix",
+    "astro",
+    "tanstack",
+    "tanstack-router",
+    "manual"
+  ]
+}
diff --git a/apps/v4/content/docs/installation/next.mdx b/apps/v4/content/docs/installation/next.mdx
new file mode 100644
index 00000000000..8b75fa0aa39
--- /dev/null
+++ b/apps/v4/content/docs/installation/next.mdx
@@ -0,0 +1,40 @@
+---
+title: Next.js
+description: Install and configure shadcn/ui for Next.js.
+---
+
+<Steps>
+
+### Create project
+
+Run the `init` command to create a new Next.js project or to setup an existing one:
+
+```bash
+npx shadcn@latest init
+```
+
+Choose between a Next.js project or a Monorepo.
+
+### Add Components
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@latest add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx {1,6} showLineNumbers title="app/page.tsx"
+import { Button } from "@/components/ui/button"
+
+export default function Home() {
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+```
+
+</Steps>
diff --git a/apps/v4/content/docs/installation/react-router.mdx b/apps/v4/content/docs/installation/react-router.mdx
new file mode 100644
index 00000000000..f296cdeae81
--- /dev/null
+++ b/apps/v4/content/docs/installation/react-router.mdx
@@ -0,0 +1,53 @@
+---
+title: React Router
+description: Install and configure shadcn/ui for React Router.
+---
+
+<Steps>
+
+### Create project
+
+```bash
+npx create-react-router@latest my-app
+```
+
+### Run the CLI
+
+Run the `shadcn` init command to setup your project:
+
+```bash
+npx shadcn@latest init
+```
+
+### Add Components
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@latest add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx showLineNumbers title="app/routes/home.tsx"
+import { Button } from "~/components/ui/button"
+
+import type { Route } from "./+types/home"
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "New React Router App" },
+    { name: "description", content: "Welcome to React Router!" },
+  ]
+}
+
+export default function Home() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center">
+      <Button>Click me</Button>
+    </div>
+  )
+}
+```
+
+</Steps>
diff --git a/apps/v4/content/docs/installation/remix.mdx b/apps/v4/content/docs/installation/remix.mdx
new file mode 100644
index 00000000000..fb11248de14
--- /dev/null
+++ b/apps/v4/content/docs/installation/remix.mdx
@@ -0,0 +1,115 @@
+---
+title: Remix
+description: Install and configure shadcn/ui for Remix.
+---
+
+<Callout>
+
+**Note:** This guide is for Remix. For React Router, see the [React Router](/docs/installation/react-router) guide.
+
+</Callout>
+
+<Steps>
+
+### Create project
+
+Start by creating a new Remix project using `create-remix`:
+
+```bash
+npx create-remix@latest my-app
+```
+
+### Run the CLI
+
+Run the `shadcn` init command to setup your project:
+
+```bash
+npx shadcn@latest init
+```
+
+### Configure components.json
+
+You will be asked a few questions to configure `components.json`:
+
+```bash
+Which color would you like to use as base color? › Neutral
+```
+
+### App structure
+
+<Callout>
+
+**Note**: This app structure is only a suggestion. You can place the files wherever you want.
+
+</Callout>
+
+- Place the UI components in the `app/components/ui` folder.
+- Your own components can be placed in the `app/components` folder.
+- The `app/lib` folder contains all the utility functions. We have a `utils.ts` where we define the `cn` helper.
+- The `app/tailwind.css` file contains the global CSS.
+
+### Install Tailwind CSS
+
+```bash
+npm install -D tailwindcss@latest autoprefixer@latest
+```
+
+Then we create a `postcss.config.js` file:
+
+```js title="postcss.config.js" showLineNumbers
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+```
+
+And finally we add the following to our `remix.config.js` file:
+
+```js title="remix.config.js" {4-5} showLineNumbers
+/** @type {import('@remix-run/dev').AppConfig} */
+export default {
+  ...
+  tailwind: true,
+  postcss: true,
+  ...
+};
+```
+
+### Add `tailwind.css` to your app
+
+In your `app/root.tsx` file, import the `tailwind.css` file:
+
+```js {1, 4} showLineNumbers title="app/root.tsx"
+import styles from "./tailwind.css?url"
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: styles },
+  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
+]
+```
+
+### That's it
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@latest add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx {1,6} showLineNumbers title="app/routes/index.tsx"
+import { Button } from "~/components/ui/button"
+
+export default function Home() {
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+```
+
+</Steps>
diff --git a/apps/v4/content/docs/installation/tanstack-router.mdx b/apps/v4/content/docs/installation/tanstack-router.mdx
new file mode 100644
index 00000000000..7bca31659c3
--- /dev/null
+++ b/apps/v4/content/docs/installation/tanstack-router.mdx
@@ -0,0 +1,44 @@
+---
+title: TanStack Router
+description: Install and configure shadcn/ui for TanStack Router.
+---
+
+<Steps>
+
+### Create project
+
+Start by creating a new TanStack Router project:
+
+```bash
+npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
+```
+
+### Add Components
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@canary add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx title="src/routes/index.tsx" showLineNumbers {3,12}
+import { createFileRoute } from "@tanstack/react-router"
+
+import { Button } from "@/components/ui/button"
+
+export const Route = createFileRoute("/")({
+  component: App,
+})
+
+function App() {
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+```
+
+</Steps>
diff --git a/apps/v4/content/docs/installation/tanstack.mdx b/apps/v4/content/docs/installation/tanstack.mdx
new file mode 100644
index 00000000000..8c4a43b6e13
--- /dev/null
+++ b/apps/v4/content/docs/installation/tanstack.mdx
@@ -0,0 +1,132 @@
+---
+title: TanStack Start
+description: Install and configure shadcn/ui for TanStack Start.
+---
+
+<Steps>
+
+### Create project
+
+Start by creating a new TanStack Start project by following the [Build a Project from Scratch](https://tanstack.com/start/latest/docs/framework/react/build-from-scratch) guide on the TanStack Start website.
+
+**Do not add Tailwind yet. We'll install Tailwind v4 in the next step.**
+
+### Add Tailwind
+
+Install `tailwindcss` and its dependencies.
+
+```bash
+npm install tailwindcss @tailwindcss/postcss postcss
+```
+
+### Create postcss.config.ts
+
+Create a `postcss.config.ts` file at the root of your project.
+
+```ts title="postcss.config.ts" showLineNumbers
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}
+```
+
+### Create `app/styles/app.css`
+
+Create an `app.css` file in the `app/styles` directory and import `tailwindcss`
+
+```css title="app/styles/app.css"
+@import "tailwindcss" source("../");
+```
+
+### Import `app.css`
+
+```tsx title="app/routes/__root.tsx" showLineNumbers {5,21-26} showLineNumbers
+import type { ReactNode } from "react"
+import { createRootRoute, Outlet } from "@tanstack/react-router"
+import { Meta, Scripts } from "@tanstack/start"
+
+import appCss from "@/styles/app.css?url"
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: "utf-8",
+      },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+      {
+        title: "TanStack Start Starter",
+      },
+    ],
+    links: [
+      {
+        rel: "stylesheet",
+        href: appCss,
+      },
+    ],
+  }),
+  component: RootComponent,
+})
+```
+
+### Edit tsconfig.json file
+
+Add the following code to the `tsconfig.json` file to resolve paths.
+
+```ts title="tsconfig.json" showLineNumbers {9-12}
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ES2022",
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./app/*"]
+    }
+  }
+}
+```
+
+### Run the CLI
+
+Run the `shadcn` init command to setup your project:
+
+```bash
+npx shadcn@canary init
+```
+
+This will create a `components.json` file in the root of your project and configure CSS variables inside `app/styles/app.css`.
+
+### That's it
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@canary add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx title="app/routes/index.tsx" showLineNumbers {1,6}
+import { Button } from "@/components/ui/button"
+
+function Home() {
+  const router = useRouter()
+  const state = Route.useLoaderData()
+
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+```
+
+</Steps>
diff --git a/apps/v4/content/docs/installation/vite.mdx b/apps/v4/content/docs/installation/vite.mdx
new file mode 100644
index 00000000000..a38417a97a4
--- /dev/null
+++ b/apps/v4/content/docs/installation/vite.mdx
@@ -0,0 +1,136 @@
+---
+title: Vite
+description: Install and configure shadcn/ui for Vite.
+---
+
+<Steps>
+
+### Create project
+
+Start by creating a new React project using `vite`. Select the **React + TypeScript** template:
+
+```bash
+npm create vite@latest
+```
+
+### Add Tailwind CSS
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+
+Replace everything in `src/index.css` with the following:
+
+```css title="src/index.css"
+@import "tailwindcss";
+```
+
+### Edit tsconfig.json file
+
+The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
+Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and
+`tsconfig.app.json` files:
+
+```ts title="tsconfig.json" {11-16} showLineNumbers
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```
+
+### Edit tsconfig.app.json file
+
+Add the following code to the `tsconfig.app.json` file to resolve paths, for your IDE:
+
+```ts title="tsconfig.app.json" {4-9} showLineNumbers
+{
+  "compilerOptions": {
+    // ...
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+    // ...
+  }
+}
+```
+
+### Update vite.config.ts
+
+Add the following code to the vite.config.ts so your app can resolve paths without error:
+
+```bash
+npm install -D @types/node
+```
+
+```typescript title="vite.config.ts" showLineNumbers {1,2,8-13}
+import path from "path"
+import tailwindcss from "@tailwindcss/vite"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})
+```
+
+### Run the CLI
+
+Run the `shadcn` init command to setup your project:
+
+```bash
+npx shadcn@latest init
+```
+
+You will be asked a few questions to configure `components.json`.
+
+```txt
+Which color would you like to use as base color? › Neutral
+```
+
+### Add Components
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@latest add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx showLineNumbers title="src/App.tsx"
+import { Button } from "@/components/ui/button"
+
+function App() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center">
+      <Button>Click me</Button>
+    </div>
+  )
+}
+
+export default App
+```
+
+</Steps>
diff --git a/apps/v4/content/docs/meta.json b/apps/v4/content/docs/meta.json
new file mode 100644
index 00000000000..53a3705dd99
--- /dev/null
+++ b/apps/v4/content/docs/meta.json
@@ -0,0 +1,11 @@
+{
+  "root": true,
+  "pages": [
+    "(root)",
+    "changelog",
+    "components",
+    "installation",
+    "dark-mode",
+    "registry"
+  ]
+}
diff --git a/apps/v4/content/docs/registry/authentication.mdx b/apps/v4/content/docs/registry/authentication.mdx
new file mode 100644
index 00000000000..04aef35b592
--- /dev/null
+++ b/apps/v4/content/docs/registry/authentication.mdx
@@ -0,0 +1,399 @@
+---
+title: Authentication
+description: Secure your registry with authentication for private and personalized components.
+---
+
+Authentication lets you run private registries, control who can access your components, and give different teams or users different content. This guide shows common authentication patterns and how to set them up.
+
+Authentication enables these use cases:
+
+- **Private Components**: Keep your business logic and internal components secure
+- **Team-Specific Resources**: Give different teams different components
+- **Access Control**: Limit who can see sensitive or experimental components
+- **Usage Analytics**: See who's using which components in your organization
+- **Licensing**: Control who gets premium or licensed components
+
+## Common Authentication Patterns
+
+### Token-Based Authentication
+
+The most common approach uses Bearer tokens or API keys:
+
+```json title="components.json"
+{
+  "registries": {
+    "@private": {
+      "url": "https://registry.company.com/{name}.json",
+      "headers": {
+        "Authorization": "Bearer ${REGISTRY_TOKEN}"
+      }
+    }
+  }
+}
+```
+
+Set your token in environment variables:
+
+```bash title=".env.local"
+REGISTRY_TOKEN=your_secret_token_here
+```
+
+### API Key Authentication
+
+Some registries use API keys in headers:
+
+```json title="components.json"
+{
+  "registries": {
+    "@company": {
+      "url": "https://api.company.com/registry/{name}.json",
+      "headers": {
+        "X-API-Key": "${API_KEY}",
+        "X-Workspace-Id": "${WORKSPACE_ID}"
+      }
+    }
+  }
+}
+```
+
+### Query Parameter Authentication
+
+For simpler setups, use query parameters:
+
+```json title="components.json"
+{
+  "registries": {
+    "@internal": {
+      "url": "https://registry.company.com/{name}.json",
+      "params": {
+        "token": "${ACCESS_TOKEN}"
+      }
+    }
+  }
+}
+```
+
+This creates: `https://registry.company.com/button.json?token=your_token`
+
+## Server-Side Implementation
+
+Here's how to add authentication to your registry server:
+
+### Next.js API Route Example
+
+```typescript title="app/api/registry/[name]/route.ts"
+import { NextRequest, NextResponse } from "next/server"
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { name: string } }
+) {
+  // Get token from Authorization header.
+  const authHeader = request.headers.get("authorization")
+  const token = authHeader?.replace("Bearer ", "")
+
+  // Or from query parameters.
+  const queryToken = request.nextUrl.searchParams.get("token")
+
+  // Check if token is valid.
+  if (!isValidToken(token || queryToken)) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  // Check if token can access this component.
+  if (!hasAccessToComponent(token, params.name)) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 })
+  }
+
+  // Return the component.
+  const component = await getComponent(params.name)
+  return NextResponse.json(component)
+}
+
+function isValidToken(token: string | null) {
+  // Add your token validation logic here.
+  // Check against database, JWT validation, etc.
+  return token === process.env.VALID_TOKEN
+}
+
+function hasAccessToComponent(token: string, componentName: string) {
+  // Add role-based access control here.
+  // Check if token can access specific component.
+  return true // Your logic here.
+}
+```
+
+### Express.js Example
+
+```javascript title="server.js"
+app.get("/registry/:name.json", (req, res) => {
+  const token = req.headers.authorization?.replace("Bearer ", "")
+
+  if (!isValidToken(token)) {
+    return res.status(401).json({ error: "Unauthorized" })
+  }
+
+  const component = getComponent(req.params.name)
+  if (!component) {
+    return res.status(404).json({ error: "Component not found" })
+  }
+
+  res.json(component)
+})
+```
+
+## Advanced Authentication Patterns
+
+### Team-Based Access
+
+Give different teams different components:
+
+```typescript title="api/registry/route.ts"
+async function GET(request: NextRequest) {
+  const token = extractToken(request)
+  const team = await getTeamFromToken(token)
+
+  // Get components for this team.
+  const components = await getComponentsForTeam(team)
+  return NextResponse.json(components)
+}
+```
+
+### User-Personalized Registries
+
+Give users components based on their preferences:
+
+```typescript
+async function GET(request: NextRequest) {
+  const user = await authenticateUser(request)
+
+  // Get user's style and framework preferences.
+  const preferences = await getUserPreferences(user.id)
+
+  // Get personalized component version.
+  const component = await getPersonalizedComponent(params.name, preferences)
+
+  return NextResponse.json(component)
+}
+```
+
+### Temporary Access Tokens
+
+Use expiring tokens for better security:
+
+```typescript
+interface TemporaryToken {
+  token: string
+  expiresAt: Date
+  scope: string[]
+}
+
+async function validateTemporaryToken(token: string) {
+  const tokenData = await getTokenData(token)
+
+  if (!tokenData) return false
+  if (new Date() > tokenData.expiresAt) return false
+
+  return true
+}
+```
+
+## Multi-Registry Authentication
+
+With [namespaced registries](/docs/registry/namespace), you can set up multiple registries with different authentication:
+
+```json title="components.json"
+{
+  "registries": {
+    "@public": "https://public.company.com/{name}.json",
+    "@internal": {
+      "url": "https://internal.company.com/{name}.json",
+      "headers": {
+        "Authorization": "Bearer ${INTERNAL_TOKEN}"
+      }
+    },
+    "@premium": {
+      "url": "https://premium.company.com/{name}.json",
+      "headers": {
+        "X-License-Key": "${LICENSE_KEY}"
+      }
+    }
+  }
+}
+```
+
+This lets you:
+
+- Mix public and private registries
+- Use different authentication per registry
+- Organize components by access level
+
+## Security Best Practices
+
+### Use Environment Variables
+
+Never commit tokens to version control. Always use environment variables:
+
+```bash title=".env.local"
+REGISTRY_TOKEN=your_secret_token_here
+API_KEY=your_api_key_here
+```
+
+Then reference them in `components.json`:
+
+```json
+{
+  "registries": {
+    "@private": {
+      "url": "https://registry.company.com/{name}.json",
+      "headers": {
+        "Authorization": "Bearer ${REGISTRY_TOKEN}"
+      }
+    }
+  }
+}
+```
+
+### Use HTTPS
+
+Always use HTTPS URLs for registries to protect your tokens in transit:
+
+```json
+{
+  "@secure": "https://registry.company.com/{name}.json" // ✅
+  "@insecure": "http://registry.company.com/{name}.json" // ❌
+}
+```
+
+### Add Rate Limiting
+
+Protect your registry from abuse:
+
+```typescript
+import rateLimit from "express-rate-limit"
+
+const limiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // limit each IP to 100 requests per windowMs
+})
+
+app.use("/registry", limiter)
+```
+
+### Rotate Tokens
+
+Change access tokens regularly:
+
+```typescript
+// Create new token with expiration.
+function generateToken() {
+  const token = crypto.randomBytes(32).toString("hex")
+  const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000) // 30 days.
+
+  return { token, expiresAt }
+}
+```
+
+### Log Access
+
+Track registry access for security and analytics:
+
+```typescript
+async function logAccess(request: Request, component: string, userId: string) {
+  await db.accessLog.create({
+    timestamp: new Date(),
+    userId,
+    component,
+    ip: request.ip,
+    userAgent: request.headers["user-agent"],
+  })
+}
+```
+
+## Testing Authentication
+
+Test your authenticated registry locally:
+
+```bash
+# Test with curl.
+curl -H "Authorization: Bearer your_token" \
+  https://registry.company.com/button.json
+
+# Test with the CLI.
+REGISTRY_TOKEN=your_token npx shadcn@latest add @private/button
+```
+
+## Error Handling
+
+The shadcn CLI handles authentication errors gracefully:
+
+- **401 Unauthorized**: Token is invalid or missing
+- **403 Forbidden**: Token lacks permission for this resource
+- **429 Too Many Requests**: Rate limit exceeded
+
+### Custom Error Messages
+
+Your registry server can return custom error messages in the response body, and the CLI will display them to users:
+
+```typescript
+// Registry server returns custom error
+return NextResponse.json(
+  {
+    error: "Unauthorized",
+    message:
+      "Your subscription has expired. Please renew at company.com/billing",
+  },
+  { status: 403 }
+)
+```
+
+The user will see:
+
+```txt
+Your subscription has expired. Please renew at company.com/billing
+```
+
+This helps provide context-specific guidance:
+
+```typescript
+// Different error messages for different scenarios
+if (!token) {
+  return NextResponse.json(
+    {
+      error: "Unauthorized",
+      message:
+        "Authentication required. Set REGISTRY_TOKEN in your .env.local file",
+    },
+    { status: 401 }
+  )
+}
+
+if (isExpiredToken(token)) {
+  return NextResponse.json(
+    {
+      error: "Unauthorized",
+      message: "Token expired. Request a new token at company.com/tokens",
+    },
+    { status: 401 }
+  )
+}
+
+if (!hasTeamAccess(token, component)) {
+  return NextResponse.json(
+    {
+      error: "Forbidden",
+      message: `Component '${component}' is restricted to the Design team`,
+    },
+    { status: 403 }
+  )
+}
+```
+
+## Next Steps
+
+To set up authentication with multiple registries and advanced patterns, see the [Namespaced Registries](/docs/registry/namespace) documentation. It covers:
+
+- Setting up multiple authenticated registries
+- Using different authentication per namespace
+- Cross-registry dependency resolution
+- Advanced authentication patterns
diff --git a/apps/v4/content/docs/registry/examples.mdx b/apps/v4/content/docs/registry/examples.mdx
new file mode 100644
index 00000000000..0d45f37720f
--- /dev/null
+++ b/apps/v4/content/docs/registry/examples.mdx
@@ -0,0 +1,599 @@
+---
+title: Examples
+description: "Examples of registry items: styles, components, css vars, etc."
+---
+
+## registry:style
+
+### Custom style that extends shadcn/ui
+
+The following registry item is a custom style that extends shadcn/ui. On `npx shadcn init`, it will:
+
+- Install `@tabler/icons-react` as a dependency.
+- Add the `login-01` block and `calendar` component to the project.
+- Add the `editor` from a remote registry.
+- Set the `font-sans` variable to `Inter, sans-serif`.
+- Install a `brand` color in light and dark mode.
+
+```json title="example-style.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "example-style",
+  "type": "registry:style",
+  "dependencies": ["@tabler/icons-react"],
+  "registryDependencies": [
+    "login-01",
+    "calendar",
+    "https://example.com/r/editor.json"
+  ],
+  "cssVars": {
+    "theme": {
+      "font-sans": "Inter, sans-serif"
+    },
+    "light": {
+      "brand": "20 14.3% 4.1%"
+    },
+    "dark": {
+      "brand": "20 14.3% 4.1%"
+    }
+  }
+}
+```
+
+### Custom style from scratch
+
+The following registry item is a custom style that doesn't extend shadcn/ui. See the `extends: none` field.
+
+It can be used to create a new style from scratch i.e custom components, css vars, dependencies, etc.
+
+On `npx shadcn add`, the following will:
+
+- Install `tailwind-merge` and `clsx` as dependencies.
+- Add the `utils` registry item from the shadcn/ui registry.
+- Add the `button`, `input`, `label`, and `select` components from a remote registry.
+- Install new css vars: `main`, `bg`, `border`, `text`, `ring`.
+
+```json title="example-style.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "extends": "none",
+  "name": "new-style",
+  "type": "registry:style",
+  "dependencies": ["tailwind-merge", "clsx"],
+  "registryDependencies": [
+    "utils",
+    "https://example.com/r/button.json",
+    "https://example.com/r/input.json",
+    "https://example.com/r/label.json",
+    "https://example.com/r/select.json"
+  ],
+  "cssVars": {
+    "theme": {
+      "font-sans": "Inter, sans-serif",
+    }
+    "light": {
+      "main": "#88aaee",
+      "bg": "#dfe5f2",
+      "border": "#000",
+      "text": "#000",
+      "ring": "#000",
+    },
+    "dark": {
+      "main": "#88aaee",
+      "bg": "#272933",
+      "border": "#000",
+      "text": "#e6e6e6",
+      "ring": "#fff",
+    }
+  }
+}
+```
+
+## registry:theme
+
+### Custom theme
+
+```json title="example-theme.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-theme",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)",
+      "primary": "oklch(0.546 0.245 262.881)",
+      "primary-foreground": "oklch(0.97 0.014 254.604)",
+      "ring": "oklch(0.746 0.16 232.661)",
+      "sidebar-primary": "oklch(0.546 0.245 262.881)",
+      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
+      "sidebar-ring": "oklch(0.746 0.16 232.661)"
+    },
+    "dark": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)",
+      "primary": "oklch(0.707 0.165 254.624)",
+      "primary-foreground": "oklch(0.97 0.014 254.604)",
+      "ring": "oklch(0.707 0.165 254.624)",
+      "sidebar-primary": "oklch(0.707 0.165 254.624)",
+      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
+      "sidebar-ring": "oklch(0.707 0.165 254.624)"
+    }
+  }
+}
+```
+
+### Custom colors
+
+The following style will init using shadcn/ui defaults and then add a custom `brand` color.
+
+```json title="example-style.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-style",
+  "type": "registry:style",
+  "cssVars": {
+    "light": {
+      "brand": "oklch(0.99 0.00 0)"
+    },
+    "dark": {
+      "brand": "oklch(0.14 0.00 286)"
+    }
+  }
+}
+```
+
+## registry:block
+
+### Custom block
+
+This blocks installs the `login-01` block from the shadcn/ui registry.
+
+```json title="login-01.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-01",
+  "type": "registry:block",
+  "description": "A simple login form.",
+  "registryDependencies": ["button", "card", "input", "label"],
+  "files": [
+    {
+      "path": "blocks/login-01/page.tsx",
+      "content": "import { LoginForm } ...",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-01/components/login-form.tsx",
+      "content": "...",
+      "type": "registry:component"
+    }
+  ]
+}
+```
+
+### Install a block and override primitives
+
+You can install a block fromt the shadcn/ui registry and override the primitives using your custom ones.
+
+On `npx shadcn add`, the following will:
+
+- Add the `login-01` block from the shadcn/ui registry.
+- Override the `button`, `input`, and `label` primitives with the ones from the remote registry.
+
+```json title="example-style.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-login",
+  "type": "registry:block",
+  "registryDependencies": [
+    "login-01",
+    "https://example.com/r/button.json",
+    "https://example.com/r/input.json",
+    "https://example.com/r/label.json"
+  ]
+}
+```
+
+## CSS Variables
+
+### Custom Theme Variables
+
+Add custom theme variables to the `theme` object.
+
+```json title="example-theme.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-theme",
+  "type": "registry:theme",
+  "cssVars": {
+    "theme": {
+      "font-heading": "Inter, sans-serif",
+      "shadow-card": "0 0 0 1px rgba(0, 0, 0, 0.1)"
+    }
+  }
+}
+```
+
+### Override Tailwind CSS variables
+
+```json title="example-theme.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-theme",
+  "type": "registry:theme",
+  "cssVars": {
+    "theme": {
+      "spacing": "0.2rem",
+      "breakpoint-sm": "640px",
+      "breakpoint-md": "768px",
+      "breakpoint-lg": "1024px",
+      "breakpoint-xl": "1280px",
+      "breakpoint-2xl": "1536px"
+    }
+  }
+}
+```
+
+## Add custom CSS
+
+### Base styles
+
+```json title="example-base.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-style",
+  "type": "registry:style",
+  "css": {
+    "@layer base": {
+      "h1": {
+        "font-size": "var(--text-2xl)"
+      },
+      "h2": {
+        "font-size": "var(--text-xl)"
+      }
+    }
+  }
+}
+```
+
+### Components
+
+```json title="example-card.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-card",
+  "type": "registry:component",
+  "css": {
+    "@layer components": {
+      "card": {
+        "background-color": "var(--color-white)",
+        "border-radius": "var(--rounded-lg)",
+        "padding": "var(--spacing-6)",
+        "box-shadow": "var(--shadow-xl)"
+      }
+    }
+  }
+}
+```
+
+## Add custom utilities
+
+### Simple utility
+
+```json title="example-component.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-component",
+  "type": "registry:component",
+  "css": {
+    "@utility content-auto": {
+      "content-visibility": "auto"
+    }
+  }
+}
+```
+
+### Complex utility
+
+```json title="example-utility.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-component",
+  "type": "registry:component",
+  "css": {
+    "@utility scrollbar-hidden": {
+      "scrollbar-hidden": {
+        "&::-webkit-scrollbar": {
+          "display": "none"
+        }
+      }
+    }
+  }
+}
+```
+
+### Functional utilities
+
+```json title="example-functional.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-component",
+  "type": "registry:component",
+  "css": {
+    "@utility tab-*": {
+      "tab-size": "var(--tab-size-*)"
+    }
+  }
+}
+```
+
+## Add CSS imports
+
+Use `@import` to add CSS imports to your registry item. The imports will be placed at the top of the CSS file.
+
+### Basic import
+
+```json title="example-import.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-import",
+  "type": "registry:component",
+  "css": {
+    "@import \"tailwindcss\"": {},
+    "@import \"./styles/base.css\"": {}
+  }
+}
+```
+
+### Import with url() syntax
+
+```json title="example-url-import.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-import",
+  "type": "registry:item",
+  "css": {
+    "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\")": {},
+    "@import url('./local-styles.css')": {}
+  }
+}
+```
+
+### Import with media queries
+
+```json title="example-media-import.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "responsive-import",
+  "type": "registry:item",
+  "css": {
+    "@import \"print-styles.css\" print": {},
+    "@import url(\"mobile.css\") screen and (max-width: 768px)": {}
+  }
+}
+```
+
+## Add custom plugins
+
+Use `@plugin` to add Tailwind plugins to your registry item. Plugins will be automatically placed after imports and before other content.
+
+**Important:** When using plugins from npm packages, you must also add them to the `dependencies` array.
+
+### Basic plugin usage
+
+```json title="example-plugin.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-plugin",
+  "type": "registry:item",
+  "css": {
+    "@plugin \"@tailwindcss/typography\"": {},
+    "@plugin \"foo\"": {}
+  }
+}
+```
+
+### Plugin with npm dependency
+
+When using plugins from npm packages like `@tailwindcss/typography`, include them in the dependencies.
+
+```json title="example-typography.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-component",
+  "type": "registry:item",
+  "dependencies": ["@tailwindcss/typography"],
+  "css": {
+    "@plugin \"@tailwindcss/typography\"": {},
+    "@layer components": {
+      ".prose": {
+        "max-width": "65ch"
+      }
+    }
+  }
+}
+```
+
+### Scoped and file-based plugins
+
+```json title="example-scoped-plugin.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scoped-plugins",
+  "type": "registry:component",
+  "css": {
+    "@plugin \"@headlessui/tailwindcss\"": {},
+    "@plugin \"tailwindcss/plugin\"": {},
+    "@plugin \"./custom-plugin.js\"": {}
+  }
+}
+```
+
+### Multiple plugins with automatic ordering
+
+When you add multiple plugins, they are automatically grouped together and deduplicated.
+
+```json title="example-multiple-plugins.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "multiple-plugins",
+  "type": "registry:item",
+  "dependencies": [
+    "@tailwindcss/typography",
+    "@tailwindcss/forms",
+    "tw-animate-css"
+  ],
+  "css": {
+    "@plugin \"@tailwindcss/typography\"": {},
+    "@plugin \"@tailwindcss/forms\"": {},
+    "@plugin \"tw-animate-css\"": {}
+  }
+}
+```
+
+## Combined imports and plugins
+
+When using both `@import` and `@plugin` directives, imports are placed first, followed by plugins, then other CSS content.
+
+```json title="example-combined.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combined-example",
+  "type": "registry:item",
+  "dependencies": ["@tailwindcss/typography", "tw-animate-css"],
+  "css": {
+    "@import \"tailwindcss\"": {},
+    "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\")": {},
+    "@plugin \"@tailwindcss/typography\"": {},
+    "@plugin \"tw-animate-css\"": {},
+    "@layer base": {
+      "body": {
+        "font-family": "Inter, sans-serif"
+      }
+    },
+    "@utility content-auto": {
+      "content-visibility": "auto"
+    }
+  }
+}
+```
+
+## Add custom animations
+
+Note: you need to define both `@keyframes` in css and `theme` in cssVars to use animations.
+
+```json title="example-component.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-component",
+  "type": "registry:component",
+  "cssVars": {
+    "theme": {
+      "--animate-wiggle": "wiggle 1s ease-in-out infinite"
+    }
+  },
+  "css": {
+    "@keyframes wiggle": {
+      "0%, 100%": {
+        "transform": "rotate(-3deg)"
+      },
+      "50%": {
+        "transform": "rotate(3deg)"
+      }
+    }
+  }
+}
+```
+
+## Add environment variables
+
+You can add environment variables using the `envVars` field.
+
+```json title="example-item.json" showLineNumbers {5-9}
+{»
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-item",
+  "type": "registry:item",
+  "envVars": {
+    "NEXT_PUBLIC_APP_URL": "http://localhost:4000",
+    "DATABASE_URL": "postgresql://postgres:postgres@localhost:5432/postgres",
+    "OPENAI_API_KEY": ""
+  }
+}
+```
+
+Environment variables are added to the `.env.local` or `.env` file. Existing variables are not overwritten.
+
+<Callout>
+
+**IMPORTANT:** Use `envVars` to add development or example variables. Do NOT use it to add production variables.
+
+</Callout>
+
+## Universal Items
+
+As of `2.9.0`, you can create universal items that can be installed without framework detection or components.json.
+
+To make an item universal i.e framework agnostic, all the files in the item must have an explicit target.
+
+Here's an example of a registry item that installs custom Cursor rules for _python_:
+
+```json title=".cursor/rules/custom-python.mdc" showLineNumbers {9}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "python-rules",
+  "type": "registry:item",
+  "files": [
+    {
+      "path": "/path/to/your/registry/default/custom-python.mdc",
+      "type": "registry:file",
+      "target": "~/.cursor/rules/custom-python.mdc",
+      "content": "..."
+    }
+  ]
+}
+```
+
+Here's another example for installation custom ESLint config:
+
+```json title=".eslintrc.json" showLineNumbers {9}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "my-eslint-config",
+  "type": "registry:item",
+  "files": [
+    {
+      "path": "/path/to/your/registry/default/custom-eslint.json",
+      "type": "registry:file",
+      "target": "~/.eslintrc.json",
+      "content": "..."
+    }
+  ]
+}
+```
+
+You can also have a universal item that installs multiple files:
+
+```json title="my-custom-starter-template.json" showLineNumbers {9}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "my-custom-start-template",
+  "type": "registry:item",
+  dependencies: ["better-auth"]
+  "files": [
+    {
+      "path": "/path/to/file-01.json",
+      "type": "registry:file",
+      "target": "~/file-01.json",
+      "content": "..."
+    },
+    {
+      "path": "/path/to/file-02.vue",
+      "type": "registry:file",
+      "target": "~/pages/file-02.vue",
+      "content": "..."
+    }
+  ]
+}
+```
diff --git a/apps/v4/content/docs/registry/faq.mdx b/apps/v4/content/docs/registry/faq.mdx
new file mode 100644
index 00000000000..ea7ab24bba2
--- /dev/null
+++ b/apps/v4/content/docs/registry/faq.mdx
@@ -0,0 +1,101 @@
+---
+title: FAQ
+description: Frequently asked questions about running a registry.
+---
+
+## Frequently asked questions
+
+### What does a complex component look like?
+
+Here's an example of a complex component that installs a page, two components, a hook, a format-date utils and a config file.
+
+```json showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    {
+      "path": "registry/new-york/hello-world/page.tsx",
+      "type": "registry:page",
+      "target": "app/hello/page.tsx"
+    },
+    {
+      "path": "registry/new-york/hello-world/components/hello-world.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york/hello-world/components/formatted-message.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york/hello-world/hooks/use-hello.ts",
+      "type": "registry:hook"
+    },
+    {
+      "path": "registry/new-york/hello-world/lib/format-date.ts",
+      "type": "registry:utils"
+    },
+    {
+      "path": "registry/new-york/hello-world/hello.config.ts",
+      "type": "registry:file",
+      "target": "~/hello.config.ts"
+    }
+  ]
+}
+```
+
+### How do I add a new Tailwind color?
+
+To add a new color you need to add it to `cssVars` under `light` and `dark` keys.
+
+```json showLineNumbers {10-18}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    // ...
+  ],
+  "cssVars": {
+    "light": {
+      "brand-background": "20 14.3% 4.1%",
+      "brand-accent": "20 14.3% 4.1%"
+    },
+    "dark": {
+      "brand-background": "20 14.3% 4.1%",
+      "brand-accent": "20 14.3% 4.1%"
+    }
+  }
+}
+```
+
+The CLI will update the project CSS file. Once updated, the new colors will be available to be used as utility classes: `bg-brand` and `text-brand-accent`.
+
+### How do I add or override a Tailwind theme variable?
+
+To add or override a theme variable you add it to `cssVars.theme` under the key you want to add or override.
+
+```json showLineNumbers {10-15}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    // ...
+  ],
+  "cssVars": {
+    "theme": {
+      "text-base": "3rem",
+      "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "font-heading": "Poppins, sans-serif"
+    }
+  }
+}
+```
diff --git a/apps/v4/content/docs/registry/getting-started.mdx b/apps/v4/content/docs/registry/getting-started.mdx
new file mode 100644
index 00000000000..9a856ace1bb
--- /dev/null
+++ b/apps/v4/content/docs/registry/getting-started.mdx
@@ -0,0 +1,173 @@
+---
+title: Getting Started
+description: Learn how to get setup and run your own component registry.
+---
+
+This guide will walk you through the process of setting up your own component registry. It assumes you already have a project with components and would like to turn it into a registry.
+
+If you're starting a new registry project, you can use the [registry template](https://github.com/shadcn-ui/registry-template) as a starting point. We have already configured it for you.
+
+## Requirements
+
+You are free to design and host your custom registry as you see fit. The only requirement is that your registry items must be valid JSON files that conform to the [registry-item schema specification](/docs/registry/registry-item-json).
+
+If you'd like to see an example of a registry, we have a [template project](https://github.com/shadcn-ui/registry-template) for you to use as a starting point.
+
+## registry.json
+
+The `registry.json` is the entry point for the registry. It contains the registry's name, homepage, and defines all the items present in the registry.
+
+Your registry must have this file (or JSON payload) present at the root of the registry endpoint. The registry endpoint is the URL where your registry is hosted.
+
+The `shadcn` CLI will automatically generate this file for you when you run the `build` command.
+
+## Add a registry.json file
+
+Create a `registry.json` file in the root of your project. Your project can be a Next.js, Vite, Vue, Svelte, PHP or any other framework as long as it supports serving JSON over HTTP.
+
+```json title="registry.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "acme",
+  "homepage": "https://acme.com",
+  "items": [
+    // ...
+  ]
+}
+```
+
+This `registry.json` file must conform to the [registry schema specification](/docs/registry/registry-json).
+
+## Add a registry item
+
+### Create your component
+
+Add your first component. Here's an example of a simple `<HelloWorld />` component:
+
+```tsx title="registry/new-york/hello-world/hello-world.tsx" showLineNumbers
+import { Button } from "@/components/ui/button"
+
+export function HelloWorld() {
+  return <Button>Hello World</Button>
+}
+```
+
+<Callout className="mt-6">
+  **Note:** This example places the component in the `registry/new-york`
+  directory. You can place it anywhere in your project as long as you set the
+  correct path in the `registry.json` file and you follow the `registry/[NAME]`
+  directory structure.
+</Callout>
+
+```txt
+registry
+└── new-york
+    └── hello-world
+        └── hello-world.tsx
+```
+
+### Add your component to the registry
+
+To add your component to the registry, you need to add your component definition to `registry.json`.
+
+```json title="registry.json" showLineNumbers {6-17}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "acme",
+  "homepage": "https://acme.com",
+  "items": [
+    {
+      "name": "hello-world",
+      "type": "registry:block",
+      "title": "Hello World",
+      "description": "A simple hello world component.",
+      "files": [
+        {
+          "path": "registry/new-york/hello-world/hello-world.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
+```
+
+You define your registry item by adding a `name`, `type`, `title`, `description` and `files`.
+
+For every file you add, you must specify the `path` and `type` of the file. The `path` is the relative path to the file from the root of your project. The `type` is the type of the file.
+
+You can read more about the registry item schema and file types in the [registry item schema docs](/docs/registry/registry-item-json).
+
+## Build your registry
+
+### Install the shadcn CLI
+
+```bash
+npm install shadcn@canary
+```
+
+### Add a build script
+
+Add a `registry:build` script to your `package.json` file.
+
+```json title="package.json" showLineNumbers
+{
+  "scripts": {
+    "registry:build": "shadcn build"
+  }
+}
+```
+
+### Run the build script
+
+Run the build script to generate the registry JSON files.
+
+```bash
+npm run registry:build
+```
+
+<Callout className="mt-6">
+  **Note:** By default, the build script will generate the registry JSON files
+  in `public/r` e.g `public/r/hello-world.json`.
+
+You can change the output directory by passing the `--output` option. See the [shadcn build command](/docs/cli#build) for more information.
+
+</Callout>
+
+## Serve your registry
+
+If you're running your registry on Next.js, you can now serve your registry by running the `next` server. The command might differ for other frameworks.
+
+```bash
+npm run dev
+```
+
+Your files will now be served at `http://localhost:3000/r/[NAME].json` eg. `http://localhost:3000/r/hello-world.json`.
+
+## Publish your registry
+
+To make your registry available to other developers, you can publish it by deploying your project to a public URL.
+
+## Guidelines
+
+Here are some guidelines to follow when building components for a registry.
+
+- Place your registry item in the `registry/[STYLE]/[NAME]` directory. I'm using `new-york` as an example. It can be anything you want as long as it's nested under the `registry` directory.
+- The following properties are required for the block definition: `name`, `description`, `type` and `files`.
+- It is recommended to add a proper name and description to your registry item. This helps LLMs understand the component and its purpose.
+- Make sure to list all registry dependencies in `registryDependencies`. A registry dependency is the name of the component in the registry eg. `input`, `button`, `card`, etc or a URL to a registry item eg. `http://localhost:3000/r/editor.json`.
+- Make sure to list all dependencies in `dependencies`. A dependency is the name of the package in the registry eg. `zod`, `sonner`, etc. To set a version, you can use the `name@version` format eg. `zod@^3.20.0`.
+- **Imports should always use the `@/registry` path.** eg. `import { HelloWorld } from "@/registry/new-york/hello-world/hello-world"`
+- Ideally, place your files within a registry item in `components`, `hooks`, `lib` directories.
+
+## Install using the CLI
+
+To install a registry item using the `shadcn` CLI, use the `add` command followed by the URL of the registry item.
+
+```bash
+npx shadcn@latest add http://localhost:3000/r/hello-world.json
+```
+
+See the [Namespaced
+Registries](/docs/registry/namespace) docs for more information on
+how to install registry items from a namespaced registry.
diff --git a/apps/v4/content/docs/registry/index.mdx b/apps/v4/content/docs/registry/index.mdx
new file mode 100644
index 00000000000..64df63a35b1
--- /dev/null
+++ b/apps/v4/content/docs/registry/index.mdx
@@ -0,0 +1,79 @@
+---
+title: Introduction
+description: Run your own code registry.
+---
+
+You can use the `shadcn` CLI to run your own code registry. Running your own registry allows you to distribute your custom components, hooks, pages, config, rules and other files to any project.
+
+<Callout>
+  **Note:** The registry works with any project type and any framework, and is
+  not limited to React.
+</Callout>
+
+<figure className="flex flex-col gap-4">
+  <Image
+    src="/images/registry-light.png"
+    width="1432"
+    height="960"
+    alt="Registry"
+    className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
+  />
+  <Image
+    src="/images/registry-dark.png"
+    width="1432"
+    height="960"
+    alt="Registry"
+    className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A distribution system for code
+  </figcaption>
+</figure>
+
+Ready to create your own registry? In the next section, we'll walk you through setting up your own custom registry step-by-step, from creating your first component to publishing it for others to use.
+
+<div className="mt-6 grid gap-4 sm:grid-cols-2">
+  <LinkedCard href="/docs/registry/getting-started" className="items-start text-sm md:p-6">
+    <div className="font-medium">Getting Started</div>
+    <div className="text-muted-foreground">
+      Set up and build your own registry
+    </div>
+  </LinkedCard>
+
+<LinkedCard
+  href="/docs/registry/authentication"
+  className="items-start text-sm md:p-6"
+>
+  <div className="font-medium">Authentication</div>
+  <div className="text-muted-foreground">
+    Secure your registry with authentication
+  </div>
+</LinkedCard>
+<LinkedCard
+  href="/docs/registry/namespace"
+  className="items-start text-sm md:p-6"
+>
+  <div className="font-medium">Namespaces</div>
+  <div className="text-muted-foreground">
+    Configure registries with namespaces
+  </div>
+</LinkedCard>
+<LinkedCard
+  href="/docs/registry/examples"
+  className="items-start text-sm md:p-6"
+>
+  <div className="font-medium">Examples</div>
+  <div className="text-muted-foreground">
+    Registry item examples and configurations
+  </div>
+</LinkedCard>
+  <LinkedCard
+    href="/docs/registry/registry-json"
+    className="items-start text-sm md:p-6"
+  >
+    <div className="font-medium">Schema</div>
+    <div className="text-muted-foreground">
+      Schema specification for registry.json
+    </div>
+  </LinkedCard>
+</div>
diff --git a/apps/v4/content/docs/registry/mcp.mdx b/apps/v4/content/docs/registry/mcp.mdx
new file mode 100644
index 00000000000..0a3c40dee1c
--- /dev/null
+++ b/apps/v4/content/docs/registry/mcp.mdx
@@ -0,0 +1,109 @@
+---
+title: MCP Server
+description: MCP support for registry developers
+---
+
+The [shadcn MCP server](/docs/mcp) works out of the box with any shadcn-compatible registry. You do not need to do anything special to enable MCP support for your registry.
+
+---
+
+## Prerequisites
+
+The MCP server works by requesting your registry index. Make sure you have a registry item file at the root of your registry named `registry`.
+
+For example, if your registry is hosted at `https://acme.com/r/[name].json`, you should have a file at `https://acme.com/r/registry.json` or `https://acme.com/r/registry` if you're using a JSON file extension.
+
+This file must be a valid JSON file that conforms to the [registry schema](/docs/registry/registry-json).
+
+---
+
+## Configuring MCP
+
+Ask your registry consumers to configure your registry in their `components.json` file and install the shadcn MCP server:
+
+<Tabs defaultValue="claude">
+  <TabsList>
+    <TabsTrigger value="claude">Claude Code</TabsTrigger>
+    <TabsTrigger value="cursor">Cursor</TabsTrigger>
+    <TabsTrigger value="vscode">VS Code</TabsTrigger>
+  </TabsList>
+  <TabsContent value="claude" className="mt-4">
+    **Configure your registry** in your `components.json` file:
+
+    ```json title="components.json" showLineNumbers
+    {
+      "registries": {
+        "@acme": "https://acme.com/r/{name}.json"
+      }
+    }
+    ```
+
+    **Run the following command** in your project:
+
+    ```bash
+    npx shadcn@latest mcp init --client claude
+    ```
+
+    **Restart Claude Code** and try the following prompts:
+       - Show me the components in the acme registry
+       - Create a landing page using items from the acme registry
+
+    **Note:** You can use `/mcp` command in Claude Code to debug the MCP server.
+
+  </TabsContent>
+
+  <TabsContent value="cursor" className="mt-4">
+    **Configure your registry** in your `components.json` file:
+
+    ```json title="components.json" showLineNumbers
+    {
+      "registries": {
+        "@acme": "https://acme.com/r/{name}.json"
+      }
+    }
+    ```
+    **Run the following command** in your project:
+       ```bash
+       npx shadcn@latest mcp init --client cursor
+       ```
+
+    Open **Cursor Settings** and **Enable the MCP server** for shadcn. Then try the following prompts:
+       - Show me the components in the acme registry
+       - Create a landing page using items from the acme registry
+
+  </TabsContent>
+
+  <TabsContent value="vscode" className="mt-4">
+    **Configure your registry** in your `components.json` file:
+
+    ```json title="components.json" showLineNumbers
+    {
+      "registries": {
+        "@acme": "https://acme.com/r/{name}.json"
+      }
+    }
+    ```
+    **Run the following command** in your project:
+       ```bash
+       npx shadcn@latest mcp init --client vscode
+       ```
+
+    Open `.vscode/mcp.json` and click **Start** next to the shadcn server. Then try the following prompts with GitHub Copilot:
+       - Show me the components in the acme registry
+       - Create a landing page using items from the acme registry
+
+  </TabsContent>
+</Tabs>
+
+You can read more about the MCP server in the [MCP documentation](/docs/mcp).
+
+---
+
+## Best Practices
+
+Here are some best practices for MCP-compatible registries:
+
+1. **Clear Descriptions**: Add concise, informative descriptions that help AI assistants understand what a registry item is for and how to use it.
+2. **Proper Dependencies**: List all `dependencies` accurately so MCP can install them automatically.
+3. **Registry Dependencies**: Use `registryDependencies` to indicate relationships between items.
+4. **Consistent Naming**: Use kebab-case for component names and maintain consistency across your registry.
diff --git a/apps/v4/content/docs/registry/meta.json b/apps/v4/content/docs/registry/meta.json
new file mode 100644
index 00000000000..ae2e62b7226
--- /dev/null
+++ b/apps/v4/content/docs/registry/meta.json
@@ -0,0 +1,15 @@
+{
+  "title": "Registry",
+  "pages": [
+    "index",
+    "getting-started",
+    "namespace",
+    "authentication",
+    "examples",
+    "mcp",
+    "registry-index",
+    "open-in-v0",
+    "registry-json",
+    "registry-item-json"
+  ]
+}
diff --git a/apps/v4/content/docs/registry/namespace.mdx b/apps/v4/content/docs/registry/namespace.mdx
new file mode 100644
index 00000000000..226c984212a
--- /dev/null
+++ b/apps/v4/content/docs/registry/namespace.mdx
@@ -0,0 +1,913 @@
+---
+title: Namespaces
+description: Configure and use multiple resource registries with namespace support.
+---
+
+Namespaced registries let you configure multiple resource sources in one project. This means you can install components, libraries, utilities, AI prompts, configuration files, and other resources from various registries, whether they're public, third-party, or your own custom private libraries.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Decentralized Namespace System](#decentralized-namespace-system)
+- [Getting Started](#getting-started)
+- [Registry Naming Convention](#registry-naming-convention)
+- [Configuration](#configuration)
+- [Authentication & Security](#authentication--security)
+- [Versioning](#versioning)
+- [Dependency Resolution](#dependency-resolution)
+- [Built-in Registries](#built-in-registries)
+- [CLI Commands](#cli-commands)
+- [Error Handling](#error-handling)
+- [Creating Your Own Registry](#creating-your-own-registry)
+- [Example Configurations](#example-configurations)
+- [Technical Details](#technical-details)
+- [Best Practices](#best-practices)
+- [Troubleshooting](#troubleshooting)
+
+---
+
+## Overview
+
+Registry namespaces are prefixed with `@` and provide a way to organize and reference resources from different sources. Resources can be any type of content: components, libraries, utilities, hooks, AI prompts, configuration files, themes, and more. For example:
+
+- `@shadcn/button` - UI component from the shadcn registry
+- `@v0/dashboard` - Dashboard component from the v0 registry
+- `@ai-elements/input` - AI prompt input from an AI elements registry
+- `@acme/auth-utils` - Authentication utilities from your company's private registry
+- `@ai/chatbot-rules` - AI prompt rules from an AI resources registry
+- `@themes/dark-mode` - Theme configuration from a themes registry
+
+---
+
+## Decentralized Namespace System
+
+We intentionally designed the namespace system to be decentralized. There is a [central open source registry index](/docs/registry/registry-index) for open source namespaces but you are free to create and use any namespace you want.
+
+This decentralized approach gives you complete flexibility to organize your resources however makes sense for your organization.
+
+You can create multiple registries for different purposes:
+
+```json title="components.json" showLineNumbers
+{
+  "registries": {
+    "@acme-ui": "https://registry.acme.com/ui/{name}.json",
+    "@acme-docs": "https://registry.acme.com/docs/{name}.json",
+    "@acme-ai": "https://registry.acme.com/ai/{name}.json",
+    "@acme-themes": "https://registry.acme.com/themes/{name}.json",
+    "@acme-internal": {
+      "url": "https://internal.acme.com/registry/{name}.json",
+      "headers": {
+        "Authorization": "Bearer ${INTERNAL_TOKEN}"
+      }
+    }
+  }
+}
+```
+
+This allows you to:
+
+- **Organize by type**: Separate UI components, documentation, AI resources, etc.
+- **Organize by team**: Different teams can maintain their own registries
+- **Organize by visibility**: Public vs. private resources
+- **Organize by version**: Stable vs. experimental registries
+- **No naming conflicts**: Since there's no central authority, you don't need to worry about namespace collisions
+
+### Examples of Multi-Registry Setups
+
+#### By Resource Type
+
+```json title="components.json" showLineNumbers
+{
+  "@components": "https://cdn.company.com/components/{name}.json",
+  "@hooks": "https://cdn.company.com/hooks/{name}.json",
+  "@utils": "https://cdn.company.com/utils/{name}.json",
+  "@prompts": "https://cdn.company.com/ai-prompts/{name}.json"
+}
+```
+
+#### By Team or Department
+
+```json title="components.json" showLineNumbers
+{
+  "@design": "https://design.company.com/registry/{name}.json",
+  "@engineering": "https://eng.company.com/registry/{name}.json",
+  "@marketing": "https://marketing.company.com/registry/{name}.json"
+}
+```
+
+#### By Stability
+
+```json title="components.json" showLineNumbers
+{
+  "@stable": "https://registry.company.com/stable/{name}.json",
+  "@latest": "https://registry.company.com/beta/{name}.json",
+  "@experimental": "https://registry.company.com/experimental/{name}.json"
+}
+```
+
+---
+
+## Getting Started
+
+### Installing Resources
+
+Once configured, you can install resources using the namespace syntax:
+
+```bash
+npx shadcn@latest add @v0/dashboard
+```
+
+or multiple resources at once:
+
+```bash
+npx shadcn@latest add @acme/header @lib/auth-utils @ai/chatbot-rules
+```
+
+### Quick Configuration
+
+Add registries to your `components.json`:
+
+```json title="components.json"
+{
+  "registries": {
+    "@v0": "https://v0.dev/chat/b/{name}",
+    "@acme": "https://registry.acme.com/resources/{name}.json"
+  }
+}
+```
+
+Then start installing:
+
+```bash
+npx shadcn@latest add @acme/button
+```
+
+---
+
+## Registry Naming Convention
+
+Registry names must follow these rules:
+
+- Start with `@` symbol
+- Contain only alphanumeric characters, hyphens, and underscores
+- Examples of valid names: `@v0`, `@acme-ui`, `@my_company`
+
+The pattern for referencing resources is: `@namespace/resource-name`
+
+---
+
+## Configuration
+
+Namespaced registries are configured in your `components.json` file under the `registries` field.
+
+### Basic Configuration
+
+The simplest way to configure a registry is with a URL template string:
+
+```json title="components.json"
+{
+  "registries": {
+    "@v0": "https://v0.dev/chat/b/{name}",
+    "@acme": "https://registry.acme.com/resources/{name}.json",
+    "@lib": "https://lib.company.com/utilities/{name}",
+    "@ai": "https://ai-resources.com/r/{name}.json"
+  }
+}
+```
+
+> **Note:** The `{name}` placeholder in the URL is automatically parsed and replaced with the resource name when you run `npx shadcn@latest add @namespace/resource-name`. For example, `@acme/button` becomes `https://registry.acme.com/resources/button.json`. See [URL Pattern System](#url-pattern-system) for more details.
+
+### Advanced Configuration
+
+For registries that require authentication or additional parameters, use the object format:
+
+```json title="components.json"
+{
+  "registries": {
+    "@private": {
+      "url": "https://api.company.com/registry/{name}.json",
+      "headers": {
+        "Authorization": "Bearer ${REGISTRY_TOKEN}",
+        "X-API-Key": "${API_KEY}"
+      },
+      "params": {
+        "version": "latest",
+        "format": "json"
+      }
+    }
+  }
+}
+```
+
+> **Note:** Environment variables in the format `${VAR_NAME}` are automatically expanded from your environment (process.env). This works in URLs, headers, and params. For example, `${REGISTRY_TOKEN}` will be replaced with the value of `process.env.REGISTRY_TOKEN`. See [Authentication & Security](#authentication--security) for more details on using environment variables.
+
+---
+
+### URL Pattern System
+
+Registry URLs support the following placeholders:
+
+### `{name}` Placeholder (required)
+
+The `{name}` placeholder is replaced with the resource name:
+
+```json title="components.json" showLineNumbers
+{
+  "@acme": "https://registry.acme.com/{name}.json"
+}
+```
+
+When installing `@acme/button`, the URL becomes: `https://registry.acme.com/button.json`
+When installing `@acme/auth-utils`, the URL becomes: `https://registry.acme.com/auth-utils.json`
+
+### `{style}` Placeholder (optional)
+
+The `{style}` placeholder is replaced with the current style configuration:
+
+```json
+{
+  "@themes": "https://registry.example.com/{style}/{name}.json"
+}
+```
+
+With style set to `new-york`, installing `@themes/card` resolves to: `https://registry.example.com/new-york/card.json`
+
+The style placeholder is optional. Use this when you want to serve different versions of the same resource. For example, you can serve a different version of a component for each style.
+
+---
+
+## Authentication & Security
+
+### Environment Variables
+
+Use environment variables to securely store credentials:
+
+```json title="components.json"
+{
+  "registries": {
+    "@private": {
+      "url": "https://api.company.com/registry/{name}.json",
+      "headers": {
+        "Authorization": "Bearer ${REGISTRY_TOKEN}"
+      }
+    }
+  }
+}
+```
+
+Then set the environment variable:
+
+```bash title=".env.local"
+REGISTRY_TOKEN=your_secret_token_here
+```
+
+### Authentication Methods
+
+#### Bearer Token (OAuth 2.0)
+
+```json
+{
+  "@github": {
+    "url": "https://api.github.com/repos/org/registry/contents/{name}.json",
+    "headers": {
+      "Authorization": "Bearer ${GITHUB_TOKEN}"
+    }
+  }
+}
+```
+
+#### API Key in Headers
+
+```json title="components.json" showLineNumbers
+{
+  "@private": {
+    "url": "https://api.company.com/registry/{name}",
+    "headers": {
+      "X-API-Key": "${API_KEY}"
+    }
+  }
+}
+```
+
+#### Basic Authentication
+
+```json title="components.json" showLineNumbers
+{
+  "@internal": {
+    "url": "https://registry.company.com/{name}.json",
+    "headers": {
+      "Authorization": "Basic ${BASE64_CREDENTIALS}"
+    }
+  }
+}
+```
+
+#### Query Parameter Authentication
+
+```json title="components.json" showLineNumbers
+{
+  "@secure": {
+    "url": "https://registry.example.com/{name}.json",
+    "params": {
+      "api_key": "${API_KEY}",
+      "client_id": "${CLIENT_ID}",
+      "signature": "${REQUEST_SIGNATURE}"
+    }
+  }
+}
+```
+
+#### Multiple Authentication Methods
+
+Some registries require multiple authentication methods:
+
+```json title="components.json" showLineNumbers
+{
+  "@enterprise": {
+    "url": "https://api.enterprise.com/v2/registry/{name}",
+    "headers": {
+      "Authorization": "Bearer ${ACCESS_TOKEN}",
+      "X-API-Key": "${API_KEY}",
+      "X-Workspace-Id": "${WORKSPACE_ID}"
+    },
+    "params": {
+      "version": "latest"
+    }
+  }
+}
+```
+
+### Security Considerations
+
+When working with namespaced registries, especially third-party or public ones, security is paramount. Here's how we handle security:
+
+### Resource Validation
+
+All resources fetched from registries are validated against our registry item schema before installation. This ensures:
+
+- **Structure validation**: Resources must conform to the expected JSON schema
+- **Type safety**: Resource types are validated (`registry:ui`, `registry:lib`, etc.)
+- **No arbitrary code execution**: Resources are data files, not executable scripts
+
+### Environment Variable Security
+
+Environment variables used for authentication are:
+
+- **Never logged**: The CLI never logs or displays environment variable values
+- **Expanded at runtime**: Variables are only expanded when needed, not stored
+- **Isolated per registry**: Each registry maintains its own authentication context
+
+Example of secure configuration:
+
+```json title="components.json" showLineNumbers
+{
+  "registries": {
+    "@private": {
+      "url": "https://api.company.com/registry/{name}.json",
+      "headers": {
+        "Authorization": "Bearer ${PRIVATE_REGISTRY_TOKEN}"
+      }
+    }
+  }
+}
+```
+
+Never commit actual tokens to version control. Use `.env.local`:
+
+```bash title=".env.local"
+PRIVATE_REGISTRY_TOKEN=actual_token_here
+```
+
+### HTTPS Enforcement
+
+We strongly recommend using HTTPS for all registry URLs:
+
+- **Encrypted transport**: Prevents man-in-the-middle attacks
+- **Certificate validation**: Ensures you're connecting to the legitimate registry
+- **Credential protection**: Headers and tokens are encrypted in transit
+
+```json title="components.json" showLineNumbers
+{
+  "registries": {
+    "@secure": "https://registry.example.com/{name}.json", // ✅ Good
+    "@insecure": "http://registry.example.com/{name}.json" // ❌ Avoid
+  }
+}
+```
+
+### Content Security
+
+Resources from registries are treated as data, not code:
+
+1. **JSON parsing only**: Resources must be valid JSON
+2. **Schema validation**: Must match the registry item schema
+3. **File path restrictions**: Files can only be written to configured paths
+4. **No script execution**: The CLI doesn't execute any code from registry resources
+
+### Registry Trust Model
+
+The namespace system operates on a trust model:
+
+- **You trust what you install**: Only add registries you trust to your configuration
+- **Explicit configuration**: Registries must be explicitly configured in `components.json`
+- **No automatic registry discovery**: The CLI never automatically adds registries
+- **Dependency transparency**: All dependencies are clearly listed in registry items
+
+### Best Practices for Registry Operators
+
+If you're running your own registry:
+
+1. **Use HTTPS always**: Never serve registry content over HTTP
+2. **Implement authentication**: Require API keys or tokens for private registries
+3. **Rate limiting**: Protect your registry from abuse
+4. **Content validation**: Validate resources before serving them
+
+Example secure registry setup:
+
+```json title="components.json" showLineNumbers
+{
+  "@company": {
+    "url": "https://registry.company.com/v1/{name}.json",
+    "headers": {
+      "Authorization": "Bearer ${COMPANY_TOKEN}",
+      "X-Registry-Version": "1.0"
+    }
+  }
+}
+```
+
+### Inspecting Resources Before Installation
+
+The CLI provides transparency about what's being installed. You can see the payload of a registry item using the following command:
+
+```bash
+npx shadcn@latest view @acme/button
+```
+
+This will output the payload of the registry item to the console.
+
+---
+
+## Dependency Resolution
+
+### Basic Dependency Resolution
+
+Resources can have dependencies across different registries:
+
+```json title="registry-item.json" showLineNumbers
+{
+  "name": "dashboard",
+  "type": "registry:block",
+  "registryDependencies": [
+    "@shadcn/card", // From default registry
+    "@v0/chart", // From v0 registry
+    "@acme/data-table", // From acme registry
+    "@lib/data-fetcher", // Utility library
+    "@ai/analytics-prompt" // AI prompt resource
+  ]
+}
+```
+
+The CLI automatically resolves and installs all dependencies from their respective registries.
+
+### Advanced Dependency Resolution
+
+Understanding how dependencies are resolved internally is important if you're developing registries or need to customize third-party resources.
+
+### How Resolution Works
+
+When you run `npx shadcn@latest add @namespace/resource`, the CLI does the following:
+
+1. **Clears registry context** to start fresh
+2. **Fetches the main resource** from the specified registry
+3. **Recursively resolves dependencies** from their respective registries
+4. **Applies topological sorting** to ensure proper installation order
+5. **Deduplicates files** based on target paths (last one wins)
+6. **Deep merges configurations** (tailwind, cssVars, css, envVars)
+
+This means that if you run the following command:
+
+```bash
+npx shadcn@latest add @acme/auth @custom/login-form
+```
+
+The `login-form.ts` from `@custom/login-form` will override the `login-form.ts` from `@acme/auth` because it's resolved last.
+
+### Overriding Third-Party Resources
+
+You can leverage the dependency resolution process to override any third-party resource by adding them to your custom resource under `registryDependencies` and overriding with your own custom values.
+
+#### Example: Customizing a Third-Party Button
+
+Let's say you want to customize a button from a vendor registry:
+
+**1. Original vendor button** (`@vendor/button`):
+
+```json title="button.json" showLineNumbers
+{
+  "name": "button",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "components/ui/button.tsx",
+      "type": "registry:ui",
+      "content": "// Vendor's button implementation\nexport function Button() { ... }"
+    }
+  ],
+  "cssVars": {
+    "light": {
+      "--button-bg": "blue"
+    }
+  }
+}
+```
+
+**2. Create your custom override** (`@my-company/custom-button`):
+
+```json title="custom-button.json" showLineNumbers
+{
+  "name": "custom-button",
+  "type": "registry:ui",
+  "registryDependencies": [
+    "@vendor/button" // Import original first
+  ],
+  "cssVars": {
+    "light": {
+      "--button-bg": "purple" // Override the color
+    }
+  }
+}
+```
+
+**3. Install your custom version**:
+
+```bash
+npx shadcn@latest add @my-company/custom-button
+```
+
+This installs the original button from `@vendor/button` and then overrides the `cssVars` with your own custom values.
+
+### Advanced Override Patterns
+
+#### Extending Without Replacing
+
+Keep the original and add extensions:
+
+```json title="extended-table.json" showLineNumbers
+{
+  "name": "extended-table",
+  "registryDependencies": ["@vendor/table"],
+  "files": [
+    {
+      "path": "components/ui/table-extended.tsx",
+      "content": "import { Table } from '@vendor/table'\n// Add your extensions\nexport function ExtendedTable() { ... }"
+    }
+  ]
+}
+```
+
+This will install the original table from `@vendor/table` and then add your extensions to `components/ui/table-extended.tsx`.
+
+#### Partial Override (Multi-file Resources)
+
+Override only specific files from a complex component:
+
+```json title="custom-auth.json" showLineNumbers
+{
+  "name": "custom-auth",
+  "registryDependencies": [
+    "@vendor/auth" // Has multiple files
+  ],
+  "files": [
+    {
+      "path": "lib/auth-server.ts",
+      "type": "registry:lib",
+      "content": "// Your custom auth server"
+    }
+  ]
+}
+```
+
+### Resolution Order Example
+
+When you install `@custom/dashboard` that depends on multiple resources:
+
+```json title="dashboard.json" showLineNumbers
+{
+  "name": "dashboard",
+  "registryDependencies": [
+    "@shadcn/card", // 1. Resolved first
+    "@vendor/chart", // 2. Resolved second
+    "@custom/card" // 3. Resolved last (overrides @shadcn/card)
+  ]
+}
+```
+
+Resolution order:
+
+1. `@shadcn/card` - installs to `components/ui/card.tsx`
+2. `@vendor/chart` - installs to `components/ui/chart.tsx`
+3. `@custom/card` - overwrites `components/ui/card.tsx` (if same target)
+
+### Key Resolution Features
+
+1. **Source Tracking**: Each resource knows which registry it came from, avoiding naming conflicts
+2. **Circular Dependency Prevention**: Automatically detects and prevents circular dependencies
+3. **Smart Installation Order**: Dependencies are installed first, then the resources that use them
+
+---
+
+## Versioning
+
+You can implement versioning for your registry resources using query parameters. This allows users to pin specific versions or use different release channels.
+
+### Basic Version Parameter
+
+```json title="components.json" showLineNumbers
+{
+  "@versioned": {
+    "url": "https://registry.example.com/{name}",
+    "params": {
+      "version": "v2"
+    }
+  }
+}
+```
+
+This resolves `@versioned/button` to: `https://registry.example.com/button?version=v2`
+
+### Dynamic Version Selection
+
+Use environment variables to control versions across your project:
+
+```json title="components.json" showLineNumbers
+{
+  "@stable": {
+    "url": "https://registry.company.com/{name}",
+    "params": {
+      "version": "${REGISTRY_VERSION}"
+    }
+  }
+}
+```
+
+This allows you to:
+
+- Set `REGISTRY_VERSION=v1.2.3` in production
+- Override per environment (dev, staging, prod)
+
+### Semantic Versioning
+
+Implement semantic versioning with range support:
+
+```json title="components.json" showLineNumbers
+{
+  "@npm-style": {
+    "url": "https://registry.example.com/{name}",
+    "params": {
+      "semver": "^2.0.0",
+      "prerelease": "${ALLOW_PRERELEASE}"
+    }
+  }
+}
+```
+
+### Version Resolution Best Practices
+
+1. **Use environment variables** for version control across environments
+2. **Provide sensible defaults** using the `${VAR:-default}` syntax
+3. **Document version schemes** clearly for registry users
+4. **Support version pinning** for reproducible builds
+5. **Implement version discovery** endpoints (e.g., `/versions/{name}`)
+6. **Cache versioned resources** appropriately with proper cache headers
+
+---
+
+## CLI Commands
+
+The shadcn CLI provides several commands for working with namespaced registries:
+
+### Adding Resources
+
+Install resources from any configured registry:
+
+```bash
+# Install from a specific registry
+npx shadcn@latest add @v0/dashboard
+
+# Install multiple resources
+npx shadcn@latest add @acme/button @lib/utils @ai/prompt
+
+# Install from URL directly
+npx shadcn@latest add https://registry.example.com/button.json
+
+# Install from local file
+npx shadcn@latest add ./local-registry/button.json
+```
+
+### Viewing Resources
+
+Inspect registry items before installation:
+
+```bash
+# View a resource from a registry
+npx shadcn@latest view @acme/button
+
+# View multiple resources
+npx shadcn@latest view @v0/dashboard @shadcn/card
+
+# View from URL
+npx shadcn@latest view https://registry.example.com/button.json
+```
+
+The `view` command displays:
+
+- Resource metadata (name, type, description)
+- Dependencies and registry dependencies
+- File contents that will be installed
+- CSS variables and Tailwind configuration
+- Required environment variables
+
+### Searching Registries
+
+Search for available resources in registries:
+
+```bash
+# Search a specific registry
+npx shadcn@latest search @v0
+
+# Search with query
+npx shadcn@latest search @acme --query "auth"
+
+# Search multiple registries
+npx shadcn@latest search @v0 @acme @lib
+
+# Limit results
+npx shadcn@latest search @v0 --limit 10 --offset 20
+
+# List all items (alias for search)
+npx shadcn@latest list @acme
+```
+
+Search results include:
+
+- Resource name and type
+- Description
+- Registry source
+
+---
+
+## Error Handling
+
+### Registry Not Configured
+
+If you reference a registry that isn't configured:
+
+```bash
+npx shadcn@latest add @non-existent/component
+```
+
+Error:
+
+```txt
+Unknown registry "@non-existent". Make sure it is defined in components.json as follows:
+{
+  "registries": {
+    "@non-existent": "[URL_TO_REGISTRY]"
+  }
+}
+```
+
+### Missing Environment Variables
+
+If required environment variables are not set:
+
+```txt
+Registry "@private" requires the following environment variables:
+
+  • REGISTRY_TOKEN
+
+Set the required environment variables to your .env or .env.local file.
+```
+
+### Resource Not Found
+
+404 Not Found:
+
+```txt
+The item at https://registry.company.com/button.json was not found. It may not exist at the registry.
+```
+
+This usually means:
+
+- The resource name is misspelled
+- The resource doesn't exist in the registry
+- The registry URL pattern is incorrect
+
+### Authentication Failures
+
+401 Unauthorized:
+
+```txt
+You are not authorized to access the item at https://api.company.com/button.json
+Check your authentication credentials and environment variables.
+```
+
+403 Forbidden:
+
+```txt
+Access forbidden for https://api.company.com/button.json
+Verify your API key has the necessary permissions.
+```
+
+---
+
+## Creating Your Own Registry
+
+To make your registry compatible with the namespace system, you can serve any type of resource - components, libraries, utilities, AI prompts, themes, configurations, or any other shareable code/content:
+
+1. **Implement the registry item schema**: Your registry must return JSON that conforms to the [registry item schema](/docs/registry/registry-item-json).
+
+2. **Support the URL pattern**: Include `{name}` in your URL template where the resource name will be inserted.
+
+3. **Define resource types**: Use appropriate `type` fields to identify your resources (e.g., `registry:ui`, `registry:lib`, `registry:ai`, `registry:theme`, etc.).
+
+4. **Handle authentication** (if needed): Accept authentication via headers or query parameters.
+
+5. **Document your namespace**: Provide clear instructions for users to configure your registry:
+
+```json title="components.json" showLineNumbers
+{
+  "registries": {
+    "@your-registry": "https://your-domain.com/r/{name}.json"
+  }
+}
+```
+
+---
+
+## Technical Details
+
+### Parser Pattern
+
+The namespace parser uses the following regex pattern:
+
+```regex title="namespace-parser.js"
+/^(@[a-zA-Z0-9](?:[a-zA-Z0-9-_]*[a-zA-Z0-9])?)\/(.+)$/
+```
+
+This ensures valid namespace formatting and proper component name extraction.
+
+### Resolution Process
+
+1. **Parse**: Extract namespace and component name from `@namespace/component`
+2. **Lookup**: Find registry configuration for `@namespace`
+3. **Build URL**: Replace placeholders with actual values
+4. **Set Headers**: Apply authentication headers if configured
+5. **Fetch**: Retrieve component from the resolved URL
+6. **Validate**: Ensure response matches registry item schema
+7. **Resolve Dependencies**: Recursively fetch any registry dependencies
+
+### Cross-Registry Dependencies
+
+When a component has dependencies from different registries, the resolver:
+
+1. Maintains separate authentication contexts for each registry
+2. Resolves each dependency from its respective source
+3. Deduplicates files based on target paths
+4. Merges configurations (tailwind, cssVars, etc.) from all sources
+
+---
+
+## Best Practices
+
+1. **Use environment variables** for sensitive data like API keys and tokens
+2. **Namespace your registry** with a unique, descriptive name
+3. **Document authentication requirements** clearly for users
+4. **Implement proper error responses** with helpful messages
+5. **Cache registry responses** when possible to improve performance
+6. **Support style variants** if your components have multiple themes
+
+---
+
+## Troubleshooting
+
+### Resources not found
+
+- Verify the registry URL is correct and accessible
+- Check that the `{name}` placeholder is included in the URL
+- Ensure the resource exists in the registry
+- Confirm the resource type matches what the registry provides
+
+### Authentication issues
+
+- Confirm environment variables are set correctly
+- Verify API keys/tokens are valid and not expired
+- Check that headers are being sent in the correct format
+
+### Dependency conflicts
+
+- Review resources with the same name from different registries
+- Use fully qualified names (`@namespace/resource`) to avoid ambiguity
+- Check for circular dependencies between registries
+- Ensure resource types are compatible when mixing registries
diff --git a/apps/v4/content/docs/registry/open-in-v0.mdx b/apps/v4/content/docs/registry/open-in-v0.mdx
new file mode 100644
index 00000000000..66ea29226a3
--- /dev/null
+++ b/apps/v4/content/docs/registry/open-in-v0.mdx
@@ -0,0 +1,106 @@
+---
+title: Open in v0
+description: Integrate your registry with Open in v0.
+---
+
+If your registry is hosted and publicly accessible via a URL, you can open a registry item in v0 by using the `https://v0.dev/chat/api/open?url=[URL]` endpoint.
+
+eg. [https://v0.dev/chat/api/open?url=https://ui.shadcn.com/r/styles/new-york/login-01.json](https://v0.dev/chat/api/open?url=https://ui.shadcn.com/r/styles/new-york/login-01.json)
+
+<Callout className="mt-6">
+  **Important:** `Open in v0` does not support `cssVars`, `css`, `envVars`,
+  namespaced registries, or advanced authentication methods.
+</Callout>
+
+## Button
+
+See [Build your Open in v0 button](https://v0.dev/chat/button) for more information on how to build your own `Open in v0` button.
+
+Here's a simple example of how to add a `Open in v0` button to your site.
+
+```jsx showLineNumbers
+import { Button } from "@/components/ui/button"
+
+export function OpenInV0Button({ url }: { url: string }) {
+  return (
+    <Button
+      aria-label="Open in v0"
+      className="h-8 gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black"
+      asChild
+    >
+      <a
+        href={`https://v0.dev/chat/api/open?url=${url}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        Open in{" "}
+        <svg
+          viewBox="0 0 40 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5 text-current"
+        >
+          <path
+            d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
+            fill="currentColor"
+          ></path>
+          <path
+            d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </a>
+    </Button>
+  )
+}
+```
+
+```jsx
+<OpenInV0Button url="https://example.com/r/hello-world.json" />
+```
+
+## Authentication
+
+Open in v0 only supports query parameter authentication. It does not support namespaced registries or advanced authentication methods like Bearer tokens or API keys in headers.
+
+### Using Query Parameter Authentication
+
+To add authentication to your registry for Open in v0, use a `token` query parameter:
+
+```
+https://registry.company.com/r/hello-world.json?token=your_secure_token_here
+```
+
+When implementing this on your registry server:
+
+1. Check for the `token` query parameter
+2. Validate the token against your authentication system
+3. Return a `401 Unauthorized` response if the token is invalid or missing
+4. Both the shadcn CLI and Open in v0 will handle the 401 response and display an appropriate message to users
+
+### Example Implementation
+
+```typescript
+// Next.js API route example
+export async function GET(request: NextRequest) {
+  const token = request.nextUrl.searchParams.get("token")
+
+  if (!isValidToken(token)) {
+    return NextResponse.json(
+      {
+        error: "Unauthorized",
+        message: "Invalid or missing token",
+      },
+      { status: 401 }
+    )
+  }
+
+  // Return the registry item
+  return NextResponse.json(registryItem)
+}
+```
+
+<Callout className="mt-6">
+  **Security Note:** Make sure to encrypt and expire tokens. Never expose
+  production tokens in documentation or examples.
+</Callout>
diff --git a/apps/v4/content/docs/registry/registry-index.mdx b/apps/v4/content/docs/registry/registry-index.mdx
new file mode 100644
index 00000000000..8d83d41d813
--- /dev/null
+++ b/apps/v4/content/docs/registry/registry-index.mdx
@@ -0,0 +1,79 @@
+---
+title: Index
+description: Open Source Registry Index
+---
+
+The open source registry index is a list of all the open source registries that are available to use out of the box.
+
+When you run `shadcn add` or `shadcn search`, the CLI will automatically check the registry index for the registry you are looking for and add it to your `components.json` file.
+
+You can see the full list at [https://ui.shadcn.com/r/registries.json](https://ui.shadcn.com/r/registries.json).
+
+## Adding a Registry
+
+You can submit a PR to add a registry to the index by adding it to the [registries.json](https://github.com/shadcn-ui/ui/blob/main/apps/v4/public/r/registries.json) file.
+
+Here's an example of how to add a registry to the index:
+
+```json title="registries.json" showLineNumbers
+{
+  "@acme": "https://registry.acme.com/r/{name}.json",
+  "@example": "https://example.com/r/{name}"
+}
+```
+
+### Requirements
+
+1. The registry must be open source and publicly accessible.
+2. The registry must be a valid JSON file that conforms to the [registry schema specification](/docs/registry/registry-json).
+3. The registry is expected to be a flat registry with no nested items i.e `/registry.json` and `/component-name.json` files are expected to be in the root of the registry.
+4. The `files` array, if present, must NOT include a `content` property.
+
+Here's an example of a valid registry:
+
+```json title="registry.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "acme",
+  "homepage": "https://acme.com",
+  "items": [
+    {
+      "name": "login-form",
+      "type": "registry:component",
+      "title": "Login Form",
+      "description": "A login form component.",
+      "files": [
+        {
+          "path": "registry/new-york/auth/login-form.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "example-login-form",
+      "type": "registry:component",
+      "title": "Example Login Form",
+      "description": "An example showing how to use the login form component.",
+      "files": [
+        {
+          "path": "registry/new-york/examples/example-login-form.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+    }
+  ]
+}
+```
+
+### Validation
+
+At the root of the `shadcn/ui` project, you can run the following command to validate the `registries.json` file.
+
+```bash
+pnpm validate:registries
+```
+
+This will validate the registries.json file and output any errors.
+
+Once you have submitted your PR, it will be validated and reviewed by the team.
diff --git a/apps/v4/content/docs/registry/registry-item-json.mdx b/apps/v4/content/docs/registry/registry-item-json.mdx
new file mode 100644
index 00000000000..8266b5d334b
--- /dev/null
+++ b/apps/v4/content/docs/registry/registry-item-json.mdx
@@ -0,0 +1,355 @@
+---
+title: registry-item.json
+description: Specification for registry items.
+---
+
+The `registry-item.json` schema is used to define your custom registry items.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "type": "registry:block",
+  "title": "Hello World",
+  "description": "A simple hello world component.",
+  "registryDependencies": [
+    "button",
+    "@acme/input-form",
+    "https://example.com/r/foo"
+  ],
+  "dependencies": ["is-even@3.0.0", "motion"],
+  "files": [
+    {
+      "path": "registry/new-york/hello-world/hello-world.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york/hello-world/use-hello-world.ts",
+      "type": "registry:hook"
+    }
+  ],
+  "cssVars": {
+    "theme": {
+      "font-heading": "Poppins, sans-serif"
+    },
+    "light": {
+      "brand": "20 14.3% 4.1%"
+    },
+    "dark": {
+      "brand": "20 14.3% 4.1%"
+    }
+  }
+}
+```
+
+<div className="mt-6 flex items-center gap-2">
+  <Link href="/docs/registry/examples">See more examples</Link>
+</div>
+
+## Definitions
+
+You can see the JSON Schema for `registry-item.json` [here](https://ui.shadcn.com/schema/registry-item.json).
+
+### $schema
+
+The `$schema` property is used to specify the schema for the `registry-item.json` file.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}
+```
+
+### name
+
+The name of the item. This is used to identify the item in the registry. It should be unique for your registry.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "name": "hello-world"
+}
+```
+
+### title
+
+A human-readable title for your registry item. Keep it short and descriptive.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "title": "Hello World"
+}
+```
+
+### description
+
+A description of your registry item. This can be longer and more detailed than the `title`.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "description": "A simple hello world component."
+}
+```
+
+### type
+
+The `type` property is used to specify the type of your registry item. This is used to determine the type and target path of the item when resolved for a project.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "type": "registry:block"
+}
+```
+
+The following types are supported:
+
+| Type                 | Description                                      |
+| -------------------- | ------------------------------------------------ |
+| `registry:block`     | Use for complex components with multiple files.  |
+| `registry:component` | Use for simple components.                       |
+| `registry:lib`       | Use for lib and utils.                           |
+| `registry:hook`      | Use for hooks.                                   |
+| `registry:ui`        | Use for UI components and single-file primitives |
+| `registry:page`      | Use for page or file-based routes.               |
+| `registry:file`      | Use for miscellaneous files.                     |
+| `registry:style`     | Use for registry styles. eg. `new-york`          |
+| `registry:theme`     | Use for themes.                                  |
+| `registry:item`      | Use for universal registry items.                |
+
+### author
+
+The `author` property is used to specify the author of the registry item.
+
+It can be unique to the registry item or the same as the author of the registry.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "author": "John Doe <john@doe.com>"
+}
+```
+
+### dependencies
+
+The `dependencies` property is used to specify the dependencies of your registry item. This is for `npm` packages.
+
+Use `@version` to specify the version of your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "dependencies": [
+    "@radix-ui/react-accordion",
+    "zod",
+    "lucide-react",
+    "name@1.0.2"
+  ]
+}
+```
+
+### registryDependencies
+
+Used for registry dependencies. Can be names, namespaced or URLs.
+
+- For `shadcn/ui` registry items such as `button`, `input`, `select`, etc use the name eg. `['button', 'input', 'select']`.
+- For namespaced registry items such as `@acme` use the name eg. `['@acme/input-form']`.
+- For custom registry items use the URL of the registry item eg. `['https://example.com/r/hello-world.json']`.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "registryDependencies": [
+    "button",
+    "@acme/input-form",
+    "https://example.com/r/editor.json"
+  ]
+}
+```
+
+Note: The CLI will automatically resolve remote registry dependencies.
+
+### files
+
+The `files` property is used to specify the files of your registry item. Each file has a `path`, `type` and `target` (optional) property.
+
+**The `target` property is required for `registry:page` and `registry:file` types.**
+
+```json title="registry-item.json" showLineNumbers
+{
+  "files": [
+    {
+      "path": "registry/new-york/hello-world/page.tsx",
+      "type": "registry:page",
+      "target": "app/hello/page.tsx"
+    },
+    {
+      "path": "registry/new-york/hello-world/hello-world.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york/hello-world/use-hello-world.ts",
+      "type": "registry:hook"
+    },
+    {
+      "path": "registry/new-york/hello-world/.env",
+      "type": "registry:file",
+      "target": "~/.env"
+    }
+  ]
+}
+```
+
+#### path
+
+The `path` property is used to specify the path to the file in your registry. This path is used by the build script to parse, transform and build the registry JSON payload.
+
+#### type
+
+The `type` property is used to specify the type of the file. See the [type](#type) section for more information.
+
+#### target
+
+The `target` property is used to indicate where the file should be placed in a project. This is optional and only required for `registry:page` and `registry:file` types.
+
+By default, the `shadcn` cli will read a project's `components.json` file to determine the target path. For some files, such as routes or config you can specify the target path manually.
+
+Use `~` to refer to the root of the project e.g `~/foo.config.js`.
+
+### tailwind
+
+**DEPRECATED:** Use `cssVars.theme` instead for Tailwind v4 projects.
+
+The `tailwind` property is used for tailwind configuration such as `theme`, `plugins` and `content`.
+
+You can use the `tailwind.config` property to add colors, animations and plugins to your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "brand": "hsl(var(--brand))"
+          },
+          "keyframes": {
+            "wiggle": {
+              "0%, 100%": { "transform": "rotate(-3deg)" },
+              "50%": { "transform": "rotate(3deg)" }
+            }
+          },
+          "animation": {
+            "wiggle": "wiggle 1s ease-in-out infinite"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### cssVars
+
+Use to define CSS variables for your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "cssVars": {
+    "theme": {
+      "font-heading": "Poppins, sans-serif"
+    },
+    "light": {
+      "brand": "20 14.3% 4.1%",
+      "radius": "0.5rem"
+    },
+    "dark": {
+      "brand": "20 14.3% 4.1%"
+    }
+  }
+}
+```
+
+### css
+
+Use `css` to add new rules to the project's CSS file eg. `@layer base`, `@layer components`, `@utility`, `@keyframes`, `@plugin`, etc.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "css": {
+    "@plugin @tailwindcss/typography": {},
+    "@plugin foo": {},
+    "@layer base": {
+      "body": {
+        "font-size": "var(--text-base)",
+        "line-height": "1.5"
+      }
+    },
+    "@layer components": {
+      "button": {
+        "background-color": "var(--color-primary)",
+        "color": "var(--color-white)"
+      }
+    },
+    "@utility text-magic": {
+      "font-size": "var(--text-base)",
+      "line-height": "1.5"
+    },
+    "@keyframes wiggle": {
+      "0%, 100%": {
+        "transform": "rotate(-3deg)"
+      },
+      "50%": {
+        "transform": "rotate(3deg)"
+      }
+    }
+  }
+}
+```
+
+### envVars
+
+Use `envVars` to add environment variables to your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "envVars": {
+    "NEXT_PUBLIC_APP_URL": "http://localhost:4000",
+    "DATABASE_URL": "postgresql://postgres:postgres@localhost:5432/postgres",
+    "OPENAI_API_KEY": ""
+  }
+}
+```
+
+Environment variables are added to the `.env.local` or `.env` file. Existing variables are not overwritten.
+
+<Callout>
+
+**IMPORTANT:** Use `envVars` to add development or example variables. Do NOT use it to add production variables.
+
+</Callout>
+
+### docs
+
+Use `docs` to show custom documentation or message when installing your registry item via the CLI.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "docs": "To get an OPENAI_API_KEY, sign up for an account at https://platform.openai.com."
+}
+```
+
+### categories
+
+Use `categories` to organize your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "categories": ["sidebar", "dashboard"]
+}
+```
+
+### meta
+
+Use `meta` to add additional metadata to your registry item. You can add any key/value pair that you want to be available to the registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "meta": { "foo": "bar" }
+}
+```
diff --git a/apps/v4/content/docs/registry/registry-json.mdx b/apps/v4/content/docs/registry/registry-json.mdx
new file mode 100644
index 00000000000..7a71bf5b9b2
--- /dev/null
+++ b/apps/v4/content/docs/registry/registry-json.mdx
@@ -0,0 +1,99 @@
+---
+title: registry.json
+description: Schema for running your own component registry.
+---
+
+The `registry.json` schema is used to define your custom component registry.
+
+```json title="registry.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "shadcn",
+  "homepage": "https://ui.shadcn.com",
+  "items": [
+    {
+      "name": "hello-world",
+      "type": "registry:block",
+      "title": "Hello World",
+      "description": "A simple hello world component.",
+      "registryDependencies": [
+        "button",
+        "@acme/input-form",
+        "https://example.com/r/foo"
+      ],
+      "dependencies": ["is-even@3.0.0", "motion"],
+      "files": [
+        {
+          "path": "registry/new-york/hello-world/hello-world.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Definitions
+
+You can see the JSON Schema for `registry.json` [here](https://ui.shadcn.com/schema/registry.json).
+
+### $schema
+
+The `$schema` property is used to specify the schema for the `registry.json` file.
+
+```json title="registry.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json"
+}
+```
+
+### name
+
+The `name` property is used to specify the name of your registry. This is used for data attributes and other metadata.
+
+```json title="registry.json" showLineNumbers
+{
+  "name": "acme"
+}
+```
+
+### homepage
+
+The homepage of your registry. This is used for data attributes and other metadata.
+
+```json title="registry.json" showLineNumbers
+{
+  "homepage": "https://acme.com"
+}
+```
+
+### items
+
+The `items` in your registry. Each item must implement the [registry-item schema specification](https://ui.shadcn.com/schema/registry-item.json).
+
+```json title="registry.json" showLineNumbers
+{
+  "items": [
+    {
+      "name": "hello-world",
+      "type": "registry:block",
+      "title": "Hello World",
+      "description": "A simple hello world component.",
+      "registryDependencies": [
+        "button",
+        "@acme/input-form",
+        "https://example.com/r/foo"
+      ],
+      "dependencies": ["is-even@3.0.0", "motion"],
+      "files": [
+        {
+          "path": "registry/new-york/hello-world/hello-world.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
+```
+
+See the [registry-item schema documentation](/docs/registry/registry-item-json) for more information.
diff --git a/apps/v4/eslint.config.mjs b/apps/v4/eslint.config.mjs
new file mode 100644
index 00000000000..3b4d71d452d
--- /dev/null
+++ b/apps/v4/eslint.config.mjs
@@ -0,0 +1,21 @@
+import { dirname } from "path"
+import { fileURLToPath } from "url"
+import { FlatCompat } from "@eslint/eslintrc"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+})
+
+const eslintConfig = [
+  ...compat.config({
+    extends: ["next/core-web-vitals", "next/typescript"],
+    rules: {
+      "@next/next/no-duplicate-head": "off",
+    },
+  }),
+]
+
+export default eslintConfig
diff --git a/apps/v4/hooks/use-colors.ts b/apps/v4/hooks/use-colors.ts
new file mode 100644
index 00000000000..3b1e58835e8
--- /dev/null
+++ b/apps/v4/hooks/use-colors.ts
@@ -0,0 +1,28 @@
+import { useAtom } from "jotai"
+import { atomWithStorage } from "jotai/utils"
+
+import { ColorFormat } from "@/lib/colors"
+import { useMounted } from "@/hooks/use-mounted"
+
+type Config = {
+  format: ColorFormat
+  lastCopied: string
+}
+
+const colorsAtom = atomWithStorage<Config>("colors", {
+  format: "hsl",
+  lastCopied: "",
+})
+
+export function useColors() {
+  const [colors, setColors] = useAtom(colorsAtom)
+  const mounted = useMounted()
+
+  return {
+    isLoading: !mounted,
+    format: colors.format,
+    lastCopied: colors.lastCopied,
+    setFormat: (format: ColorFormat) => setColors({ ...colors, format }),
+    setLastCopied: (lastCopied: string) => setColors({ ...colors, lastCopied }),
+  }
+}
diff --git a/apps/v4/hooks/use-config.ts b/apps/v4/hooks/use-config.ts
new file mode 100644
index 00000000000..f607114a75e
--- /dev/null
+++ b/apps/v4/hooks/use-config.ts
@@ -0,0 +1,18 @@
+import { useAtom } from "jotai"
+import { atomWithStorage } from "jotai/utils"
+
+type Config = {
+  style: "new-york-v4"
+  packageManager: "npm" | "yarn" | "pnpm" | "bun"
+  installationType: "cli" | "manual"
+}
+
+const configAtom = atomWithStorage<Config>("config", {
+  style: "new-york-v4",
+  packageManager: "pnpm",
+  installationType: "cli",
+})
+
+export function useConfig() {
+  return useAtom(configAtom)
+}
diff --git a/apps/v4/hooks/use-copy-to-clipboard.ts b/apps/v4/hooks/use-copy-to-clipboard.ts
new file mode 100644
index 00000000000..366942f0631
--- /dev/null
+++ b/apps/v4/hooks/use-copy-to-clipboard.ts
@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+
+export function useCopyToClipboard({
+  timeout = 2000,
+  onCopy,
+}: {
+  timeout?: number
+  onCopy?: () => void
+} = {}) {
+  const [isCopied, setIsCopied] = React.useState(false)
+
+  const copyToClipboard = (value: string) => {
+    if (typeof window === "undefined" || !navigator.clipboard.writeText) {
+      return
+    }
+
+    if (!value) return
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true)
+
+      if (onCopy) {
+        onCopy()
+      }
+
+      if (timeout !== 0) {
+        setTimeout(() => {
+          setIsCopied(false)
+        }, timeout)
+      }
+    }, console.error)
+  }
+
+  return { isCopied, copyToClipboard }
+}
diff --git a/apps/v4/hooks/use-is-mac.ts b/apps/v4/hooks/use-is-mac.ts
new file mode 100644
index 00000000000..ee749b9b2e1
--- /dev/null
+++ b/apps/v4/hooks/use-is-mac.ts
@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react"
+
+export function useIsMac() {
+  const [isMac, setIsMac] = useState(true)
+
+  useEffect(() => {
+    setIsMac(navigator.platform.toUpperCase().includes("MAC"))
+  }, [])
+
+  return isMac
+}
diff --git a/apps/v4/hooks/use-layout.tsx b/apps/v4/hooks/use-layout.tsx
new file mode 100644
index 00000000000..629c9f4726b
--- /dev/null
+++ b/apps/v4/hooks/use-layout.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+
+type Layout = "fixed" | "full"
+
+interface LayoutProviderProps {
+  children: React.ReactNode
+  defaultLayout?: Layout
+  forcedLayout?: Layout
+  storageKey?: string
+  attribute?: string | string[]
+  value?: Record<string, string>
+}
+
+interface LayoutProviderState {
+  layout: Layout
+  setLayout: (layout: Layout | ((prev: Layout) => Layout)) => void
+  forcedLayout?: Layout
+}
+
+const isServer = typeof window === "undefined"
+const LayoutContext = React.createContext<LayoutProviderState | undefined>(
+  undefined
+)
+
+const saveToLS = (storageKey: string, value: string) => {
+  try {
+    localStorage.setItem(storageKey, value)
+  } catch {
+    // Unsupported
+  }
+}
+
+const useLayout = () => {
+  const context = React.useContext(LayoutContext)
+  if (context === undefined) {
+    throw new Error("useLayout must be used within a LayoutProvider")
+  }
+  return context
+}
+
+const Layout = ({
+  forcedLayout,
+  storageKey = "layout",
+  defaultLayout = "full",
+  attribute = "class",
+  value,
+  children,
+}: LayoutProviderProps) => {
+  const [layout, setLayoutState] = React.useState<Layout>(() => {
+    if (isServer) return defaultLayout
+    try {
+      const saved = localStorage.getItem(storageKey)
+      if (saved === "fixed" || saved === "full") {
+        return saved
+      }
+      return defaultLayout
+    } catch {
+      return defaultLayout
+    }
+  })
+
+  const attrs = !value ? ["layout-fixed", "layout-full"] : Object.values(value)
+
+  const applyLayout = React.useCallback(
+    (layout: Layout) => {
+      if (!layout) return
+
+      const name = value ? value[layout] : `layout-${layout}`
+      const d = document.documentElement
+
+      const handleAttribute = (attr: string) => {
+        if (attr === "class") {
+          d.classList.remove(...attrs)
+          if (name) d.classList.add(name)
+        } else if (attr.startsWith("data-")) {
+          if (name) {
+            d.setAttribute(attr, name)
+          } else {
+            d.removeAttribute(attr)
+          }
+        }
+      }
+
+      if (Array.isArray(attribute)) attribute.forEach(handleAttribute)
+      else handleAttribute(attribute)
+    },
+    [attrs, attribute, value]
+  )
+
+  const setLayout = React.useCallback(
+    (value: Layout | ((prev: Layout) => Layout)) => {
+      if (typeof value === "function") {
+        setLayoutState((prevLayout) => {
+          const newLayout = value(prevLayout)
+          saveToLS(storageKey, newLayout)
+          return newLayout
+        })
+      } else {
+        setLayoutState(value)
+        saveToLS(storageKey, value)
+      }
+    },
+    [storageKey]
+  )
+
+  // localStorage event handling
+  React.useEffect(() => {
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key !== storageKey) return
+
+      if (!e.newValue) {
+        setLayout(defaultLayout)
+      } else if (e.newValue === "fixed" || e.newValue === "full") {
+        setLayoutState(e.newValue)
+      }
+    }
+
+    window.addEventListener("storage", handleStorage)
+    return () => window.removeEventListener("storage", handleStorage)
+  }, [setLayout, storageKey, defaultLayout])
+
+  // Apply layout on mount and when it changes
+  React.useEffect(() => {
+    const currentLayout = forcedLayout ?? layout
+    applyLayout(currentLayout)
+  }, [forcedLayout, layout, applyLayout])
+
+  // Prevent layout changes during hydration
+  const [isHydrated, setIsHydrated] = React.useState(false)
+  React.useEffect(() => {
+    setIsHydrated(true)
+  }, [])
+
+  const providerValue = React.useMemo(
+    () => ({
+      layout: isHydrated ? layout : defaultLayout,
+      setLayout,
+      forcedLayout,
+    }),
+    [layout, setLayout, forcedLayout, isHydrated, defaultLayout]
+  )
+
+  return (
+    <LayoutContext.Provider value={providerValue}>
+      {children}
+    </LayoutContext.Provider>
+  )
+}
+
+const LayoutProvider = (props: LayoutProviderProps) => {
+  const context = React.useContext(LayoutContext)
+
+  // Ignore nested context providers, just passthrough children
+  if (context) return <>{props.children}</>
+  return <Layout {...props} />
+}
+
+export { useLayout, LayoutProvider }
diff --git a/apps/v4/hooks/use-media-query.tsx b/apps/v4/hooks/use-media-query.tsx
new file mode 100644
index 00000000000..95e552cd560
--- /dev/null
+++ b/apps/v4/hooks/use-media-query.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+export function useMediaQuery(query: string) {
+  const [value, setValue] = React.useState(false)
+
+  React.useEffect(() => {
+    function onChange(event: MediaQueryListEvent) {
+      setValue(event.matches)
+    }
+
+    const result = matchMedia(query)
+    result.addEventListener("change", onChange)
+    setValue(result.matches)
+
+    return () => result.removeEventListener("change", onChange)
+  }, [query])
+
+  return value
+}
diff --git a/apps/v4/hooks/use-meta-color.ts b/apps/v4/hooks/use-meta-color.ts
new file mode 100644
index 00000000000..2cfbd171a8b
--- /dev/null
+++ b/apps/v4/hooks/use-meta-color.ts
@@ -0,0 +1,28 @@
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+export const META_THEME_COLORS = {
+  light: "#ffffff",
+  dark: "#0a0a0a",
+}
+
+export function useMetaColor() {
+  const { resolvedTheme } = useTheme()
+
+  const metaColor = React.useMemo(() => {
+    return resolvedTheme !== "dark"
+      ? META_THEME_COLORS.light
+      : META_THEME_COLORS.dark
+  }, [resolvedTheme])
+
+  const setMetaColor = React.useCallback((color: string) => {
+    document
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute("content", color)
+  }, [])
+
+  return {
+    metaColor,
+    setMetaColor,
+  }
+}
diff --git a/apps/v4/hooks/use-mobile.ts b/apps/v4/hooks/use-mobile.ts
new file mode 100644
index 00000000000..519c959355f
--- /dev/null
+++ b/apps/v4/hooks/use-mobile.ts
@@ -0,0 +1,17 @@
+import * as React from "react"
+
+export function useIsMobile(mobileBreakpoint = 768) {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < mobileBreakpoint)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < mobileBreakpoint)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/v4/hooks/use-mounted.ts b/apps/v4/hooks/use-mounted.ts
new file mode 100644
index 00000000000..3a20c62ac73
--- /dev/null
+++ b/apps/v4/hooks/use-mounted.ts
@@ -0,0 +1,11 @@
+import * as React from "react"
+
+export function useMounted() {
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return mounted
+}
diff --git a/apps/v4/hooks/use-mutation-observer.ts b/apps/v4/hooks/use-mutation-observer.ts
new file mode 100644
index 00000000000..aed3cded46e
--- /dev/null
+++ b/apps/v4/hooks/use-mutation-observer.ts
@@ -0,0 +1,20 @@
+import * as React from "react"
+
+export const useMutationObserver = (
+  ref: React.RefObject<HTMLElement | null>,
+  callback: MutationCallback,
+  options: MutationObserverInit = {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  }
+) => {
+  React.useEffect(() => {
+    if (ref.current) {
+      const observer = new MutationObserver(callback)
+      observer.observe(ref.current, options)
+      return () => observer.disconnect()
+    }
+  }, [ref, callback, options])
+}
diff --git a/apps/v4/lib/blocks.ts b/apps/v4/lib/blocks.ts
new file mode 100644
index 00000000000..df7904ce7cb
--- /dev/null
+++ b/apps/v4/lib/blocks.ts
@@ -0,0 +1,35 @@
+"use server"
+
+import { registryItemSchema } from "shadcn/schema"
+import { z } from "zod"
+
+export async function getAllBlockIds(
+  types: z.infer<typeof registryItemSchema>["type"][] = [
+    "registry:block",
+    "registry:internal",
+  ],
+  categories: string[] = []
+): Promise<string[]> {
+  const blocks = await getAllBlocks(types, categories)
+
+  return blocks.map((block) => block.name)
+}
+
+export async function getAllBlocks(
+  types: z.infer<typeof registryItemSchema>["type"][] = [
+    "registry:block",
+    "registry:internal",
+  ],
+  categories: string[] = []
+) {
+  const { Index } = await import("@/registry/__index__")
+  const index = z.record(registryItemSchema).parse(Index)
+
+  return Object.values(index).filter(
+    (block) =>
+      types.includes(block.type) &&
+      (categories.length === 0 ||
+        block.categories?.some((category) => categories.includes(category))) &&
+      !block.name.startsWith("chart-")
+  )
+}
diff --git a/apps/v4/lib/colors.ts b/apps/v4/lib/colors.ts
new file mode 100644
index 00000000000..a95d7e61de6
--- /dev/null
+++ b/apps/v4/lib/colors.ts
@@ -0,0 +1,96 @@
+import { z } from "zod"
+
+import { colors } from "@/registry/registry-colors"
+
+const colorSchema = z.object({
+  name: z.string(),
+  id: z.string(),
+  scale: z.number(),
+  className: z.string(),
+  hex: z.string(),
+  rgb: z.string(),
+  hsl: z.string(),
+  foreground: z.string(),
+  oklch: z.string(),
+  var: z.string(),
+})
+
+const colorPaletteSchema = z.object({
+  name: z.string(),
+  colors: z.array(colorSchema),
+})
+
+export type ColorPalette = z.infer<typeof colorPaletteSchema>
+
+export function getColorFormat(color: Color) {
+  return {
+    className: `bg-${color.name}-100`,
+    hex: color.hex,
+    rgb: color.rgb,
+    hsl: color.hsl,
+    oklch: color.oklch,
+    var: `--color-${color.name}-${color.scale}`,
+  }
+}
+
+export type ColorFormat = keyof ReturnType<typeof getColorFormat>
+
+export function getColors() {
+  const tailwindColors = colorPaletteSchema.array().parse(
+    Object.entries(colors)
+      .map(([name, color]) => {
+        if (!Array.isArray(color)) {
+          return null
+        }
+
+        return {
+          name,
+          colors: color.map((color) => {
+            const rgb = color.rgb.replace(
+              /^rgb\((\d+),(\d+),(\d+)\)$/,
+              "$1 $2 $3"
+            )
+
+            return {
+              ...color,
+              name,
+              id: `${name}-${color.scale}`,
+              className: `${name}-${color.scale}`,
+              var: `--color-${name}-${color.scale}`,
+              rgb,
+              hsl: color.hsl.replace(
+                /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
+                "$1 $2 $3"
+              ),
+              oklch: `oklch(${color.oklch.replace(
+                /^oklch\(([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\)$/,
+                "$1 $2 $3"
+              )})`,
+              foreground: getForegroundFromBackground(rgb),
+            }
+          }),
+        }
+      })
+      .filter(Boolean)
+  )
+
+  return tailwindColors
+}
+
+export type Color = ReturnType<typeof getColors>[number]["colors"][number]
+
+function getForegroundFromBackground(rgb: string) {
+  const [r, g, b] = rgb.split(" ").map(Number)
+
+  function toLinear(number: number): number {
+    const base = number / 255
+    return base <= 0.04045
+      ? base / 12.92
+      : Math.pow((base + 0.055) / 1.055, 2.4)
+  }
+
+  const luminance =
+    0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b)
+
+  return luminance > 0.179 ? "#000" : "#fff"
+}
diff --git a/apps/v4/lib/config.ts b/apps/v4/lib/config.ts
new file mode 100644
index 00000000000..effd47e2501
--- /dev/null
+++ b/apps/v4/lib/config.ts
@@ -0,0 +1,42 @@
+export const siteConfig = {
+  name: "shadcn/ui",
+  url: "https://ui.shadcn.com",
+  ogImage: "https://ui.shadcn.com/og.jpg",
+  description:
+    "A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.",
+  links: {
+    twitter: "https://twitter.com/shadcn",
+    github: "https://github.com/shadcn-ui/ui",
+  },
+  navItems: [
+    {
+      href: "/docs/installation",
+      label: "Docs",
+    },
+    {
+      href: "/docs/components",
+      label: "Components",
+    },
+    {
+      href: "/blocks",
+      label: "Blocks",
+    },
+    {
+      href: "/charts/area",
+      label: "Charts",
+    },
+    {
+      href: "/themes",
+      label: "Themes",
+    },
+    {
+      href: "/colors",
+      label: "Colors",
+    },
+  ],
+}
+
+export const META_THEME_COLORS = {
+  light: "#ffffff",
+  dark: "#09090b",
+}
diff --git a/apps/v4/lib/events.ts b/apps/v4/lib/events.ts
new file mode 100644
index 00000000000..2c64366a302
--- /dev/null
+++ b/apps/v4/lib/events.ts
@@ -0,0 +1,33 @@
+import va from "@vercel/analytics"
+import { z } from "zod"
+
+const eventSchema = z.object({
+  name: z.enum([
+    "copy_npm_command",
+    "copy_usage_import_code",
+    "copy_usage_code",
+    "copy_primitive_code",
+    "copy_theme_code",
+    "copy_block_code",
+    "copy_chunk_code",
+    "enable_lift_mode",
+    "copy_chart_code",
+    "copy_chart_theme",
+    "copy_chart_data",
+    "copy_color",
+    "set_layout",
+  ]),
+  // declare type AllowedPropertyValues = string | number | boolean | null
+  properties: z
+    .record(z.union([z.string(), z.number(), z.boolean(), z.null()]))
+    .optional(),
+})
+
+export type Event = z.infer<typeof eventSchema>
+
+export function trackEvent(input: Event): void {
+  const event = eventSchema.parse(input)
+  if (event) {
+    va.track(event.name, event.properties)
+  }
+}
diff --git a/apps/v4/lib/flags.ts b/apps/v4/lib/flags.ts
new file mode 100644
index 00000000000..70f57d84f2d
--- /dev/null
+++ b/apps/v4/lib/flags.ts
@@ -0,0 +1 @@
+export const showMcpDocs = true
diff --git a/apps/v4/lib/fonts.ts b/apps/v4/lib/fonts.ts
new file mode 100644
index 00000000000..74918cbba1a
--- /dev/null
+++ b/apps/v4/lib/fonts.ts
@@ -0,0 +1,29 @@
+import {
+  Geist_Mono as FontMono,
+  Geist as FontSans,
+  Inter,
+} from "next/font/google"
+
+import { cn } from "@/lib/utils"
+
+const fontSans = FontSans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+})
+
+const fontMono = FontMono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+  weight: ["400"],
+})
+
+const fontInter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+})
+
+export const fontVariables = cn(
+  fontSans.variable,
+  fontMono.variable,
+  fontInter.variable
+)
diff --git a/apps/v4/lib/highlight-code.ts b/apps/v4/lib/highlight-code.ts
new file mode 100644
index 00000000000..5519ff89d50
--- /dev/null
+++ b/apps/v4/lib/highlight-code.ts
@@ -0,0 +1,83 @@
+import { codeToHtml } from "shiki"
+import type { ShikiTransformer } from "shiki"
+
+export const transformers = [
+  {
+    code(node) {
+      if (node.tagName === "code") {
+        const raw = this.source
+        node.properties["__raw__"] = raw
+
+        if (raw.startsWith("npm install")) {
+          node.properties["__npm__"] = raw
+          node.properties["__yarn__"] = raw.replace("npm install", "yarn add")
+          node.properties["__pnpm__"] = raw.replace("npm install", "pnpm add")
+          node.properties["__bun__"] = raw.replace("npm install", "bun add")
+        }
+
+        if (raw.startsWith("npx create-")) {
+          node.properties["__npm__"] = raw
+          node.properties["__yarn__"] = raw.replace(
+            "npx create-",
+            "yarn create "
+          )
+          node.properties["__pnpm__"] = raw.replace(
+            "npx create-",
+            "pnpm create "
+          )
+          node.properties["__bun__"] = raw.replace("npx", "bunx --bun")
+        }
+
+        // npm create.
+        if (raw.startsWith("npm create")) {
+          node.properties["__npm__"] = raw
+          node.properties["__yarn__"] = raw.replace("npm create", "yarn create")
+          node.properties["__pnpm__"] = raw.replace("npm create", "pnpm create")
+          node.properties["__bun__"] = raw.replace("npm create", "bun create")
+        }
+
+        // npx.
+        if (raw.startsWith("npx")) {
+          node.properties["__npm__"] = raw
+          node.properties["__yarn__"] = raw.replace("npx", "yarn")
+          node.properties["__pnpm__"] = raw.replace("npx", "pnpm dlx")
+          node.properties["__bun__"] = raw.replace("npx", "bunx --bun")
+        }
+
+        // npm run.
+        if (raw.startsWith("npm run")) {
+          node.properties["__npm__"] = raw
+          node.properties["__yarn__"] = raw.replace("npm run", "yarn")
+          node.properties["__pnpm__"] = raw.replace("npm run", "pnpm")
+          node.properties["__bun__"] = raw.replace("npm run", "bun")
+        }
+      }
+    },
+  },
+] as ShikiTransformer[]
+
+export async function highlightCode(code: string, language: string = "tsx") {
+  const html = await codeToHtml(code, {
+    lang: language,
+    themes: {
+      dark: "github-dark",
+      light: "github-light",
+    },
+    transformers: [
+      {
+        pre(node) {
+          node.properties["class"] =
+            "no-scrollbar min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0 has-[[data-slot=tabs]]:p-0 !bg-transparent"
+        },
+        code(node) {
+          node.properties["data-line-numbers"] = ""
+        },
+        line(node) {
+          node.properties["data-line"] = ""
+        },
+      },
+    ],
+  })
+
+  return html
+}
diff --git a/apps/v4/lib/registry.ts b/apps/v4/lib/registry.ts
new file mode 100644
index 00000000000..d6cdf859336
--- /dev/null
+++ b/apps/v4/lib/registry.ts
@@ -0,0 +1,214 @@
+import { promises as fs } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import { registryItemFileSchema, registryItemSchema } from "shadcn/schema"
+import { Project, ScriptKind } from "ts-morph"
+import { z } from "zod"
+
+import { Index } from "@/registry/__index__"
+
+export function getRegistryComponent(name: string) {
+  return Index[name]?.component
+}
+
+export async function getRegistryItem(name: string) {
+  const item = Index[name]
+
+  if (!item) {
+    return null
+  }
+
+  // Convert all file paths to object.
+  // TODO: remove when we migrate to new registry.
+  item.files = item.files.map((file: unknown) =>
+    typeof file === "string" ? { path: file } : file
+  )
+
+  // Fail early before doing expensive file operations.
+  const result = registryItemSchema.safeParse(item)
+  if (!result.success) {
+    return null
+  }
+
+  let files: typeof result.data.files = []
+  for (const file of item.files) {
+    const content = await getFileContent(file)
+    const relativePath = path.relative(process.cwd(), file.path)
+
+    files.push({
+      ...file,
+      path: relativePath,
+      content,
+    })
+  }
+
+  // Fix file paths.
+  files = fixFilePaths(files)
+
+  const parsed = registryItemSchema.safeParse({
+    ...result.data,
+    files,
+  })
+
+  if (!parsed.success) {
+    console.error(parsed.error.message)
+    return null
+  }
+
+  return parsed.data
+}
+
+async function getFileContent(file: z.infer<typeof registryItemFileSchema>) {
+  const raw = await fs.readFile(file.path, "utf-8")
+
+  const project = new Project({
+    compilerOptions: {},
+  })
+
+  const tempFile = await createTempSourceFile(file.path)
+  const sourceFile = project.createSourceFile(tempFile, raw, {
+    scriptKind: ScriptKind.TSX,
+  })
+
+  // Remove meta variables.
+  // removeVariable(sourceFile, "iframeHeight")
+  // removeVariable(sourceFile, "containerClassName")
+  // removeVariable(sourceFile, "description")
+
+  let code = sourceFile.getFullText()
+
+  // Some registry items uses default export.
+  // We want to use named export instead.
+  // TODO: do we really need this? - @shadcn.
+  if (file.type !== "registry:page") {
+    code = code.replaceAll("export default", "export")
+  }
+
+  // Fix imports.
+  code = fixImport(code)
+
+  return code
+}
+
+function getFileTarget(file: z.infer<typeof registryItemFileSchema>) {
+  let target = file.target
+
+  if (!target || target === "") {
+    const fileName = file.path.split("/").pop()
+    if (
+      file.type === "registry:block" ||
+      file.type === "registry:component" ||
+      file.type === "registry:example"
+    ) {
+      target = `components/${fileName}`
+    }
+
+    if (file.type === "registry:ui") {
+      target = `components/ui/${fileName}`
+    }
+
+    if (file.type === "registry:hook") {
+      target = `hooks/${fileName}`
+    }
+
+    if (file.type === "registry:lib") {
+      target = `lib/${fileName}`
+    }
+  }
+
+  return target ?? ""
+}
+
+async function createTempSourceFile(filename: string) {
+  const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-"))
+  return path.join(dir, filename)
+}
+
+function fixFilePaths(files: z.infer<typeof registryItemSchema>["files"]) {
+  if (!files) {
+    return []
+  }
+
+  // Resolve all paths relative to the first file's directory.
+  const firstFilePath = files[0].path
+  const firstFilePathDir = path.dirname(firstFilePath)
+
+  return files.map((file) => {
+    return {
+      ...file,
+      path: path.relative(firstFilePathDir, file.path),
+      target: getFileTarget(file),
+    }
+  })
+}
+
+export function fixImport(content: string) {
+  const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
+
+  const replacement = (
+    match: string,
+    path: string,
+    type: string,
+    component: string
+  ) => {
+    if (type.endsWith("components")) {
+      return `@/components/${component}`
+    } else if (type.endsWith("ui")) {
+      return `@/components/ui/${component}`
+    } else if (type.endsWith("hooks")) {
+      return `@/hooks/${component}`
+    } else if (type.endsWith("lib")) {
+      return `@/lib/${component}`
+    }
+
+    return match
+  }
+
+  return content.replace(regex, replacement)
+}
+
+export type FileTree = {
+  name: string
+  path?: string
+  children?: FileTree[]
+}
+
+export function createFileTreeForRegistryItemFiles(
+  files: Array<{ path: string; target?: string }>
+) {
+  const root: FileTree[] = []
+
+  for (const file of files) {
+    const path = file.target ?? file.path
+    const parts = path.split("/")
+    let currentLevel = root
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isFile = i === parts.length - 1
+      const existingNode = currentLevel.find((node) => node.name === part)
+
+      if (existingNode) {
+        if (isFile) {
+          // Update existing file node with full path
+          existingNode.path = path
+        } else {
+          // Move to next level in the tree
+          currentLevel = existingNode.children!
+        }
+      } else {
+        const newNode: FileTree = isFile
+          ? { name: part, path }
+          : { name: part, children: [] }
+
+        currentLevel.push(newNode)
+
+        if (!isFile) {
+          currentLevel = newNode.children!
+        }
+      }
+    }
+  }
+
+  return root
+}
diff --git a/apps/v4/lib/rehype.ts b/apps/v4/lib/rehype.ts
new file mode 100644
index 00000000000..faaeb152c16
--- /dev/null
+++ b/apps/v4/lib/rehype.ts
@@ -0,0 +1,160 @@
+import fs from "fs"
+import path from "path"
+import { u } from "unist-builder"
+import { visit } from "unist-util-visit"
+
+import { Index } from "@/registry/__index__"
+
+interface UnistNode {
+  type: string
+  name?: string
+  tagName?: string
+  value?: string
+  properties?: Record<string, unknown>
+  attributes?: {
+    name: string
+    value: unknown
+    type?: string
+  }[]
+  children?: UnistNode[]
+}
+
+export interface UnistTree {
+  type: string
+  children: UnistNode[]
+}
+
+export function rehypeComponent() {
+  return async (tree: UnistTree) => {
+    visit(tree, (node: UnistNode) => {
+      // src prop overrides both name and fileName.
+      const { value: srcPath } =
+        (getNodeAttributeByName(node, "src") as {
+          name: string
+          value?: string
+          type?: string
+        }) || {}
+
+      if (node.name === "ComponentSource") {
+        const name = getNodeAttributeByName(node, "name")?.value as string
+        const fileName = getNodeAttributeByName(node, "fileName")?.value as
+          | string
+          | undefined
+
+        if (!name && !srcPath) {
+          return null
+        }
+
+        try {
+          let src: string
+
+          if (srcPath) {
+            src = path.join(process.cwd(), srcPath)
+          } else {
+            const component = Index[name]
+            src = fileName
+              ? component.files.find((file: unknown) => {
+                  if (typeof file === "string") {
+                    return (
+                      file.endsWith(`${fileName}.tsx`) ||
+                      file.endsWith(`${fileName}.ts`)
+                    )
+                  }
+                  return false
+                }) || component.files[0]?.path
+              : component.files[0]?.path
+          }
+
+          // Read the source file.
+          const filePath = src
+          let source = fs.readFileSync(filePath, "utf8")
+
+          // Replace imports.
+          // TODO: Use @swc/core and a visitor to replace this.
+          // For now a simple regex should do.
+          source = source.replaceAll(`@/registry/new-york-v4/`, "@/components/")
+          source = source.replaceAll("export default", "export")
+
+          // Add code as children so that rehype can take over at build time.
+          node.children?.push(
+            u("element", {
+              tagName: "pre",
+              properties: {
+                __src__: src,
+              },
+              children: [
+                u("element", {
+                  tagName: "code",
+                  properties: {
+                    className: ["language-tsx"],
+                  },
+                  children: [
+                    {
+                      type: "text",
+                      value: source,
+                    },
+                  ],
+                }),
+              ],
+            })
+          )
+        } catch (error) {
+          console.error(error)
+        }
+      }
+
+      if (node.name === "ComponentPreview") {
+        const name = getNodeAttributeByName(node, "name")?.value as string
+
+        if (!name) {
+          return null
+        }
+
+        try {
+          const component = Index[name]
+          const src = component.files[0]?.path
+
+          // Read the source file.
+          const filePath = src
+          let source = fs.readFileSync(filePath, "utf8")
+
+          // Replace imports.
+          // TODO: Use @swc/core and a visitor to replace this.
+          // For now a simple regex should do.
+          source = source.replaceAll(`@/registry/new-york-v4/`, "@/components/")
+          source = source.replaceAll("export default", "export")
+
+          // Add code as children so that rehype can take over at build time.
+          node.children?.push(
+            u("element", {
+              tagName: "pre",
+              properties: {
+                __src__: src,
+              },
+              children: [
+                u("element", {
+                  tagName: "code",
+                  properties: {
+                    className: ["language-tsx"],
+                  },
+                  children: [
+                    {
+                      type: "text",
+                      value: source,
+                    },
+                  ],
+                }),
+              ],
+            })
+          )
+        } catch (error) {
+          console.error(error)
+        }
+      }
+    })
+  }
+}
+
+function getNodeAttributeByName(node: UnistNode, name: string) {
+  return node.attributes?.find((attribute) => attribute.name === name)
+}
diff --git a/apps/v4/lib/source.ts b/apps/v4/lib/source.ts
new file mode 100644
index 00000000000..a7515eee328
--- /dev/null
+++ b/apps/v4/lib/source.ts
@@ -0,0 +1,7 @@
+import { docs } from "@/.source"
+import { loader } from "fumadocs-core/source"
+
+export const source = loader({
+  baseUrl: "/docs",
+  source: docs.toFumadocsSource(),
+})
diff --git a/apps/v4/lib/themes.ts b/apps/v4/lib/themes.ts
new file mode 100644
index 00000000000..23034eb7172
--- /dev/null
+++ b/apps/v4/lib/themes.ts
@@ -0,0 +1,31 @@
+export const THEMES = [
+  {
+    name: "Default",
+    value: "default",
+  },
+  {
+    name: "Neutral",
+    value: "neutral",
+  },
+  {
+    name: "Stone",
+    value: "stone",
+  },
+  {
+    name: "Zinc",
+    value: "zinc",
+  },
+  {
+    name: "Gray",
+    value: "gray",
+  },
+  {
+    name: "Slate",
+    value: "slate",
+  },
+  {
+    name: "Scaled",
+    value: "scaled",
+  },
+]
+export type Theme = (typeof THEMES)[number]
diff --git a/apps/v4/lib/utils.ts b/apps/v4/lib/utils.ts
new file mode 100644
index 00000000000..8b4c50fc384
--- /dev/null
+++ b/apps/v4/lib/utils.ts
@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function absoluteUrl(path: string) {
+  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
+}
diff --git a/apps/v4/mdx-components.tsx b/apps/v4/mdx-components.tsx
new file mode 100644
index 00000000000..25ed07869ae
--- /dev/null
+++ b/apps/v4/mdx-components.tsx
@@ -0,0 +1,364 @@
+import * as React from "react"
+import Image from "next/image"
+import Link from "next/link"
+
+import { cn } from "@/lib/utils"
+import { Callout } from "@/components/callout"
+import { CodeBlockCommand } from "@/components/code-block-command"
+import { CodeCollapsibleWrapper } from "@/components/code-collapsible-wrapper"
+import { CodeTabs } from "@/components/code-tabs"
+import { ComponentPreview } from "@/components/component-preview"
+import { ComponentSource } from "@/components/component-source"
+import { ComponentsList } from "@/components/components-list"
+import { CopyButton } from "@/components/copy-button"
+import { getIconForLanguageExtension } from "@/components/icons"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/registry/new-york-v4/ui/accordion"
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york-v4/ui/alert"
+import { AspectRatio } from "@/registry/new-york-v4/ui/aspect-ratio"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+
+export const mdxComponents = {
+  h1: ({ className, ...props }: React.ComponentProps<"h1">) => (
+    <h1
+      className={cn(
+        "font-heading mt-2 scroll-m-28 text-3xl font-bold tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h2: ({ className, ...props }: React.ComponentProps<"h2">) => {
+    return (
+      <h2
+        id={props.children
+          ?.toString()
+          .replace(/ /g, "-")
+          .replace(/'/g, "")
+          .replace(/\?/g, "")
+          .toLowerCase()}
+        className={cn(
+          "font-heading mt-8 scroll-m-28 text-xl font-medium tracking-tight first:mt-0 lg:mt-8 [&+p]:!mt-4 *:[code]:text-xl",
+          className
+        )}
+        {...props}
+      />
+    )
+  },
+  h3: ({ className, ...props }: React.ComponentProps<"h3">) => (
+    <h3
+      className={cn(
+        "font-heading mt-8 scroll-m-28 text-lg font-medium tracking-tight *:[code]:text-xl",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h4: ({ className, ...props }: React.ComponentProps<"h4">) => (
+    <h4
+      className={cn(
+        "font-heading mt-8 scroll-m-28 text-base font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h5: ({ className, ...props }: React.ComponentProps<"h5">) => (
+    <h5
+      className={cn(
+        "mt-8 scroll-m-28 text-base font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  h6: ({ className, ...props }: React.ComponentProps<"h6">) => (
+    <h6
+      className={cn(
+        "mt-8 scroll-m-28 text-base font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  a: ({ className, ...props }: React.ComponentProps<"a">) => (
+    <a
+      className={cn("font-medium underline underline-offset-4", className)}
+      {...props}
+    />
+  ),
+  p: ({ className, ...props }: React.ComponentProps<"p">) => (
+    <p
+      className={cn("leading-relaxed [&:not(:first-child)]:mt-6", className)}
+      {...props}
+    />
+  ),
+  strong: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <strong className={cn("font-medium", className)} {...props} />
+  ),
+  ul: ({ className, ...props }: React.ComponentProps<"ul">) => (
+    <ul className={cn("my-6 ml-6 list-disc", className)} {...props} />
+  ),
+  ol: ({ className, ...props }: React.ComponentProps<"ol">) => (
+    <ol className={cn("my-6 ml-6 list-decimal", className)} {...props} />
+  ),
+  li: ({ className, ...props }: React.ComponentProps<"li">) => (
+    <li className={cn("mt-2", className)} {...props} />
+  ),
+  blockquote: ({ className, ...props }: React.ComponentProps<"blockquote">) => (
+    <blockquote
+      className={cn("mt-6 border-l-2 pl-6 italic", className)}
+      {...props}
+    />
+  ),
+  img: ({ className, alt, ...props }: React.ComponentProps<"img">) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img className={cn("rounded-md", className)} alt={alt} {...props} />
+  ),
+  hr: ({ ...props }: React.ComponentProps<"hr">) => (
+    <hr className="my-4 md:my-8" {...props} />
+  ),
+  table: ({ className, ...props }: React.ComponentProps<"table">) => (
+    <div className="my-6 w-full overflow-y-auto">
+      <table
+        className={cn(
+          "relative w-full overflow-hidden border-none text-sm",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  ),
+  tr: ({ className, ...props }: React.ComponentProps<"tr">) => (
+    <tr
+      className={cn("last:border-b-none m-0 border-b", className)}
+      {...props}
+    />
+  ),
+  th: ({ className, ...props }: React.ComponentProps<"th">) => (
+    <th
+      className={cn(
+        "px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+        className
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }: React.ComponentProps<"td">) => (
+    <td
+      className={cn(
+        "px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+        className
+      )}
+      {...props}
+    />
+  ),
+  pre: ({ className, children, ...props }: React.ComponentProps<"pre">) => {
+    return (
+      <pre
+        className={cn(
+          "no-scrollbar min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0 has-[[data-slot=tabs]]:p-0",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </pre>
+    )
+  },
+  figure: ({ className, ...props }: React.ComponentProps<"figure">) => {
+    return <figure className={cn(className)} {...props} />
+  },
+  figcaption: ({
+    className,
+    children,
+    ...props
+  }: React.ComponentProps<"figcaption">) => {
+    const iconExtension =
+      "data-language" in props && typeof props["data-language"] === "string"
+        ? getIconForLanguageExtension(props["data-language"])
+        : null
+
+    return (
+      <figcaption
+        className={cn(
+          "text-code-foreground [&_svg]:text-code-foreground flex items-center gap-2 [&_svg]:size-4 [&_svg]:opacity-70",
+          className
+        )}
+        {...props}
+      >
+        {iconExtension}
+        {children}
+      </figcaption>
+    )
+  },
+  code: ({
+    className,
+    __raw__,
+    __src__,
+    __npm__,
+    __yarn__,
+    __pnpm__,
+    __bun__,
+    ...props
+  }: React.ComponentProps<"code"> & {
+    __raw__?: string
+    __src__?: string
+    __npm__?: string
+    __yarn__?: string
+    __pnpm__?: string
+    __bun__?: string
+  }) => {
+    // Inline Code.
+    if (typeof props.children === "string") {
+      return (
+        <code
+          className={cn(
+            "bg-muted relative rounded-md px-[0.3rem] py-[0.2rem] font-mono text-[0.8rem] break-words outline-none",
+            className
+          )}
+          {...props}
+        />
+      )
+    }
+
+    // npm command.
+    const isNpmCommand = __npm__ && __yarn__ && __pnpm__ && __bun__
+    if (isNpmCommand) {
+      return (
+        <CodeBlockCommand
+          __npm__={__npm__}
+          __yarn__={__yarn__}
+          __pnpm__={__pnpm__}
+          __bun__={__bun__}
+        />
+      )
+    }
+
+    // Default codeblock.
+    return (
+      <>
+        {__raw__ && <CopyButton value={__raw__} src={__src__} />}
+        <code {...props} />
+      </>
+    )
+  },
+  Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
+    <h3
+      className={cn(
+        "font-heading mt-8 scroll-m-32 text-xl font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ),
+  Steps: ({ ...props }) => (
+    <div
+      className="[&>h3]:step steps mb-12 [counter-reset:step] *:[h3]:first:!mt-0"
+      {...props}
+    />
+  ),
+  Image: ({
+    src,
+    className,
+    width,
+    height,
+    alt,
+    ...props
+  }: React.ComponentProps<"img">) => (
+    <Image
+      className={cn("mt-6 rounded-md border", className)}
+      src={src || ""}
+      width={Number(width)}
+      height={Number(height)}
+      alt={alt || ""}
+      {...props}
+    />
+  ),
+  Tabs: ({ className, ...props }: React.ComponentProps<typeof Tabs>) => {
+    return <Tabs className={cn("relative mt-6 w-full", className)} {...props} />
+  },
+  TabsList: ({
+    className,
+    ...props
+  }: React.ComponentProps<typeof TabsList>) => (
+    <TabsList
+      className={cn(
+        "justify-start gap-4 rounded-none bg-transparent px-0",
+        className
+      )}
+      {...props}
+    />
+  ),
+  TabsTrigger: ({
+    className,
+    ...props
+  }: React.ComponentProps<typeof TabsTrigger>) => (
+    <TabsTrigger
+      className={cn(
+        "text-muted-foreground data-[state=active]:text-foreground data-[state=active]:border-primary dark:data-[state=active]:border-primary hover:text-primary rounded-none border-0 border-b-2 border-transparent bg-transparent px-0 pb-3 text-base data-[state=active]:bg-transparent data-[state=active]:shadow-none dark:data-[state=active]:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  ),
+  TabsContent: ({
+    className,
+    ...props
+  }: React.ComponentProps<typeof TabsContent>) => (
+    <TabsContent
+      className={cn(
+        "relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-medium *:[figure]:first:mt-0 [&>.steps]:mt-6",
+        className
+      )}
+      {...props}
+    />
+  ),
+  Tab: ({ className, ...props }: React.ComponentProps<"div">) => (
+    <div className={cn(className)} {...props} />
+  ),
+  Button,
+  Callout,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  AspectRatio,
+  CodeTabs,
+  ComponentPreview,
+  ComponentSource,
+  CodeCollapsibleWrapper,
+  ComponentsList,
+  Link: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
+    <Link
+      className={cn("font-medium underline underline-offset-4", className)}
+      {...props}
+    />
+  ),
+  LinkedCard: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
+    <Link
+      className={cn(
+        "bg-surface text-surface-foreground hover:bg-surface/80 flex w-full flex-col items-center rounded-xl p-6 transition-colors sm:p-10",
+        className
+      )}
+      {...props}
+    />
+  ),
+}
diff --git a/apps/v4/next.config.mjs b/apps/v4/next.config.mjs
new file mode 100644
index 00000000000..6d5545a204f
--- /dev/null
+++ b/apps/v4/next.config.mjs
@@ -0,0 +1,95 @@
+import { createMDX } from "fumadocs-mdx/next"
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  devIndicators: false,
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  outputFileTracingIncludes: {
+    "/*": ["./registry/**/*"],
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+      },
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+    ],
+  },
+  redirects() {
+    return [
+      {
+        source: "/components",
+        destination: "/docs/components",
+        permanent: true,
+      },
+      {
+        source: "/docs/primitives/:path*",
+        destination: "/docs/components/:path*",
+        permanent: true,
+      },
+      {
+        source: "/figma",
+        destination: "/docs/figma",
+        permanent: true,
+      },
+      {
+        source: "/docs/forms",
+        destination: "/docs/components/form",
+        permanent: false,
+      },
+      {
+        source: "/docs/forms/react-hook-form",
+        destination: "/docs/components/form",
+        permanent: false,
+      },
+      {
+        source: "/sidebar",
+        destination: "/docs/components/sidebar",
+        permanent: true,
+      },
+      {
+        source: "/react-19",
+        destination: "/docs/react-19",
+        permanent: true,
+      },
+      {
+        source: "/charts",
+        destination: "/charts/area",
+        permanent: true,
+      },
+      {
+        source: "/view/styles/:style/:name",
+        destination: "/view/:name",
+        permanent: true,
+      },
+      {
+        source: "/docs/:path*.mdx",
+        destination: "/docs/:path*.md",
+        permanent: true,
+      },
+      {
+        source: "/mcp",
+        destination: "/docs/mcp",
+        permanent: false,
+      },
+    ]
+  },
+  rewrites() {
+    return [
+      {
+        source: "/docs/:path*.md",
+        destination: "/llm/:path*",
+      },
+    ]
+  },
+}
+
+const withMDX = createMDX({})
+
+export default withMDX(nextConfig)
diff --git a/apps/v4/package.json b/apps/v4/package.json
new file mode 100644
index 00000000000..d1682273743
--- /dev/null
+++ b/apps/v4/package.json
@@ -0,0 +1,155 @@
+{
+  "name": "v4",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --turbopack --port 4000",
+    "build": "pnpm --filter=shadcn build && next build",
+    "start": "next start --port 4000",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "typecheck": "tsc --noEmit",
+    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
+    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
+    "registry:build": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --log-level silent --write \"registry/**/*.{ts,tsx,json,mdx}\" --cache",
+    "registry:capture": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/capture-registry.mts",
+    "validate:registries": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/validate-registries.mts",
+    "postinstall": "fumadocs-mdx"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@faker-js/faker": "^8.2.0",
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accessible-icon": "^1.1.1",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.5",
+    "@radix-ui/react-aspect-ratio": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.5",
+    "@radix-ui/react-dialog": "^1.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.5",
+    "@radix-ui/react-hover-card": "^1.1.5",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.5",
+    "@radix-ui/react-navigation-menu": "^1.2.4",
+    "@radix-ui/react-popover": "^1.1.5",
+    "@radix-ui/react-portal": "^1.1.3",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.5",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.5",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.7",
+    "@tabler/icons-react": "^3.31.0",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tanstack/react-table": "^8.9.1",
+    "@vercel/analytics": "^1.4.1",
+    "change-case": "^5.4.4",
+    "chrono-node": "^2.8.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-autoplay": "8.5.2",
+    "embla-carousel-react": "8.5.2",
+    "fumadocs-core": "15.3.1",
+    "fumadocs-docgen": "2.0.0",
+    "fumadocs-mdx": "11.6.3",
+    "fumadocs-ui": "15.3.1",
+    "input-otp": "^1.4.2",
+    "jotai": "^2.1.0",
+    "little-date": "^1.0.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "0.474.0",
+    "motion": "^12.12.1",
+    "next": "15.3.1",
+    "next-themes": "0.4.6",
+    "postcss": "^8.5.1",
+    "react": "19.1.0",
+    "react-day-picker": "^9.7.0",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.54.2",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "2.15.1",
+    "rehype-pretty-code": "^0.14.1",
+    "rimraf": "^6.0.1",
+    "shadcn": "3.3.1",
+    "shiki": "^1.10.1",
+    "sonner": "^2.0.0",
+    "tailwind-merge": "^3.0.1",
+    "ts-morph": "18.0.0",
+    "vaul": "1.1.2",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
+    "@tailwindcss/postcss": "^4",
+    "@types/lodash": "^4.17.7",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^20",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "@typescript-eslint/parser": "^8.31.0",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.1.11",
+    "tw-animate-css": "^1.2.4",
+    "typescript": "^5",
+    "unist-builder": "3.0.0",
+    "unist-util-visit": "^4.1.2"
+  },
+  "prettier": {
+    "endOfLine": "lf",
+    "semi": false,
+    "singleQuote": false,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "importOrder": [
+      "^(react/(.*)$)|^(react$)",
+      "^(next/(.*)$)|^(next$)",
+      "<THIRD_PARTY_MODULES>",
+      "",
+      "^@workspace/(.*)$",
+      "",
+      "^types$",
+      "^@/types/(.*)$",
+      "^@/config/(.*)$",
+      "^@/lib/(.*)$",
+      "^@/hooks/(.*)$",
+      "^@/components/ui/(.*)$",
+      "^@/components/(.*)$",
+      "^@/registry/(.*)$",
+      "^@/styles/(.*)$",
+      "^@/app/(.*)$",
+      "^@/www/(.*)$",
+      "",
+      "^[./]"
+    ],
+    "importOrderParserPlugins": [
+      "typescript",
+      "jsx",
+      "decorators-legacy"
+    ],
+    "plugins": [
+      "@ianvs/prettier-plugin-sort-imports",
+      "prettier-plugin-tailwindcss"
+    ]
+  }
+}
diff --git a/apps/v4/postcss.config.mjs b/apps/v4/postcss.config.mjs
new file mode 100644
index 00000000000..736723c67fd
--- /dev/null
+++ b/apps/v4/postcss.config.mjs
@@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}
+export default config
diff --git a/apps/v4/public/android-chrome-192x192.png b/apps/v4/public/android-chrome-192x192.png
new file mode 100644
index 00000000000..12cf161a081
Binary files /dev/null and b/apps/v4/public/android-chrome-192x192.png differ
diff --git a/apps/v4/public/android-chrome-512x512.png b/apps/v4/public/android-chrome-512x512.png
new file mode 100644
index 00000000000..5bafcab3800
Binary files /dev/null and b/apps/v4/public/android-chrome-512x512.png differ
diff --git a/apps/v4/public/apple-touch-icon.png b/apps/v4/public/apple-touch-icon.png
new file mode 100644
index 00000000000..10279359cb0
Binary files /dev/null and b/apps/v4/public/apple-touch-icon.png differ
diff --git a/apps/v4/public/avatars/01.png b/apps/v4/public/avatars/01.png
new file mode 100644
index 00000000000..c1901010923
Binary files /dev/null and b/apps/v4/public/avatars/01.png differ
diff --git a/apps/v4/public/avatars/02.png b/apps/v4/public/avatars/02.png
new file mode 100644
index 00000000000..b2aae01dd3c
Binary files /dev/null and b/apps/v4/public/avatars/02.png differ
diff --git a/apps/v4/public/avatars/03.png b/apps/v4/public/avatars/03.png
new file mode 100644
index 00000000000..f04b6b0b061
Binary files /dev/null and b/apps/v4/public/avatars/03.png differ
diff --git a/apps/v4/public/avatars/04.png b/apps/v4/public/avatars/04.png
new file mode 100644
index 00000000000..1129539cacb
Binary files /dev/null and b/apps/v4/public/avatars/04.png differ
diff --git a/apps/v4/public/avatars/05.png b/apps/v4/public/avatars/05.png
new file mode 100644
index 00000000000..e73aabf6dbd
Binary files /dev/null and b/apps/v4/public/avatars/05.png differ
diff --git a/apps/v4/public/avatars/shadcn.jpg b/apps/v4/public/avatars/shadcn.jpg
new file mode 100644
index 00000000000..7d3b7a4dab8
Binary files /dev/null and b/apps/v4/public/avatars/shadcn.jpg differ
diff --git a/apps/v4/public/examples/authentication-dark.png b/apps/v4/public/examples/authentication-dark.png
new file mode 100644
index 00000000000..a95af71f35b
Binary files /dev/null and b/apps/v4/public/examples/authentication-dark.png differ
diff --git a/apps/v4/public/examples/authentication-light.png b/apps/v4/public/examples/authentication-light.png
new file mode 100644
index 00000000000..30969c761c6
Binary files /dev/null and b/apps/v4/public/examples/authentication-light.png differ
diff --git a/apps/v4/public/examples/cards-dark.png b/apps/v4/public/examples/cards-dark.png
new file mode 100644
index 00000000000..333d0585857
Binary files /dev/null and b/apps/v4/public/examples/cards-dark.png differ
diff --git a/apps/v4/public/examples/cards-light.png b/apps/v4/public/examples/cards-light.png
new file mode 100644
index 00000000000..a440850384a
Binary files /dev/null and b/apps/v4/public/examples/cards-light.png differ
diff --git a/apps/v4/public/examples/dashboard-dark.png b/apps/v4/public/examples/dashboard-dark.png
new file mode 100644
index 00000000000..4ca59cf593c
Binary files /dev/null and b/apps/v4/public/examples/dashboard-dark.png differ
diff --git a/apps/v4/public/examples/dashboard-light.png b/apps/v4/public/examples/dashboard-light.png
new file mode 100644
index 00000000000..fca14b5b470
Binary files /dev/null and b/apps/v4/public/examples/dashboard-light.png differ
diff --git a/apps/v4/public/examples/playground-dark.png b/apps/v4/public/examples/playground-dark.png
new file mode 100644
index 00000000000..5c6bdcb95c9
Binary files /dev/null and b/apps/v4/public/examples/playground-dark.png differ
diff --git a/apps/v4/public/examples/playground-light.png b/apps/v4/public/examples/playground-light.png
new file mode 100644
index 00000000000..eb2e0e4ce23
Binary files /dev/null and b/apps/v4/public/examples/playground-light.png differ
diff --git a/apps/v4/public/examples/tasks-dark.png b/apps/v4/public/examples/tasks-dark.png
new file mode 100644
index 00000000000..dbd3ea3b924
Binary files /dev/null and b/apps/v4/public/examples/tasks-dark.png differ
diff --git a/apps/v4/public/examples/tasks-light.png b/apps/v4/public/examples/tasks-light.png
new file mode 100644
index 00000000000..951fd037f66
Binary files /dev/null and b/apps/v4/public/examples/tasks-light.png differ
diff --git a/apps/v4/public/favicon-16x16.png b/apps/v4/public/favicon-16x16.png
new file mode 100644
index 00000000000..547154b97f2
Binary files /dev/null and b/apps/v4/public/favicon-16x16.png differ
diff --git a/apps/v4/public/favicon-32x32.png b/apps/v4/public/favicon-32x32.png
new file mode 100644
index 00000000000..ccf57ec5a26
Binary files /dev/null and b/apps/v4/public/favicon-32x32.png differ
diff --git a/apps/v4/public/favicon.ico b/apps/v4/public/favicon.ico
new file mode 100644
index 00000000000..781985134b8
Binary files /dev/null and b/apps/v4/public/favicon.ico differ
diff --git a/apps/v4/public/file.svg b/apps/v4/public/file.svg
new file mode 100644
index 00000000000..004145cddf3
--- /dev/null
+++ b/apps/v4/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/apps/v4/public/globe.svg b/apps/v4/public/globe.svg
new file mode 100644
index 00000000000..567f17b0d7c
--- /dev/null
+++ b/apps/v4/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/v4/public/images/block-preview-dark.png b/apps/v4/public/images/block-preview-dark.png
new file mode 100644
index 00000000000..61e8b0b9f7d
Binary files /dev/null and b/apps/v4/public/images/block-preview-dark.png differ
diff --git a/apps/v4/public/images/block-preview-light.png b/apps/v4/public/images/block-preview-light.png
new file mode 100644
index 00000000000..03c1d608a7b
Binary files /dev/null and b/apps/v4/public/images/block-preview-light.png differ
diff --git a/apps/v4/public/images/calendar-2.png b/apps/v4/public/images/calendar-2.png
new file mode 100644
index 00000000000..74516e4c447
Binary files /dev/null and b/apps/v4/public/images/calendar-2.png differ
diff --git a/apps/v4/public/images/dashboard-1-dark.jpg b/apps/v4/public/images/dashboard-1-dark.jpg
new file mode 100644
index 00000000000..ed83ce7cb93
Binary files /dev/null and b/apps/v4/public/images/dashboard-1-dark.jpg differ
diff --git a/apps/v4/public/images/dashboard-1.jpg b/apps/v4/public/images/dashboard-1.jpg
new file mode 100644
index 00000000000..3fff462ff9e
Binary files /dev/null and b/apps/v4/public/images/dashboard-1.jpg differ
diff --git a/apps/v4/public/images/dashboard-2-dark.jpg b/apps/v4/public/images/dashboard-2-dark.jpg
new file mode 100644
index 00000000000..af06044f162
Binary files /dev/null and b/apps/v4/public/images/dashboard-2-dark.jpg differ
diff --git a/apps/v4/public/images/dashboard-2.jpg b/apps/v4/public/images/dashboard-2.jpg
new file mode 100644
index 00000000000..eee48ab484c
Binary files /dev/null and b/apps/v4/public/images/dashboard-2.jpg differ
diff --git a/apps/v4/public/images/dashboard-3-dark.jpg b/apps/v4/public/images/dashboard-3-dark.jpg
new file mode 100644
index 00000000000..a501b142873
Binary files /dev/null and b/apps/v4/public/images/dashboard-3-dark.jpg differ
diff --git a/apps/v4/public/images/dashboard-3.jpg b/apps/v4/public/images/dashboard-3.jpg
new file mode 100644
index 00000000000..fdc41a72a21
Binary files /dev/null and b/apps/v4/public/images/dashboard-3.jpg differ
diff --git a/apps/v4/public/images/lift-mode-dark.png b/apps/v4/public/images/lift-mode-dark.png
new file mode 100644
index 00000000000..b24fc1f7828
Binary files /dev/null and b/apps/v4/public/images/lift-mode-dark.png differ
diff --git a/apps/v4/public/images/lift-mode-light.png b/apps/v4/public/images/lift-mode-light.png
new file mode 100644
index 00000000000..2a58f2c0e2a
Binary files /dev/null and b/apps/v4/public/images/lift-mode-light.png differ
diff --git a/apps/v4/public/images/mcp.jpeg b/apps/v4/public/images/mcp.jpeg
new file mode 100644
index 00000000000..fe343b81501
Binary files /dev/null and b/apps/v4/public/images/mcp.jpeg differ
diff --git a/apps/v4/public/images/open-in-v0-dark.png b/apps/v4/public/images/open-in-v0-dark.png
new file mode 100644
index 00000000000..7d221046c33
Binary files /dev/null and b/apps/v4/public/images/open-in-v0-dark.png differ
diff --git a/apps/v4/public/images/open-in-v0.png b/apps/v4/public/images/open-in-v0.png
new file mode 100644
index 00000000000..5746e7e2b99
Binary files /dev/null and b/apps/v4/public/images/open-in-v0.png differ
diff --git a/apps/v4/public/images/registry-dark.png b/apps/v4/public/images/registry-dark.png
new file mode 100644
index 00000000000..6028eaee140
Binary files /dev/null and b/apps/v4/public/images/registry-dark.png differ
diff --git a/apps/v4/public/images/registry-light.png b/apps/v4/public/images/registry-light.png
new file mode 100644
index 00000000000..6d41e915017
Binary files /dev/null and b/apps/v4/public/images/registry-light.png differ
diff --git a/apps/v4/public/images/sidebar-menu-dark.png b/apps/v4/public/images/sidebar-menu-dark.png
new file mode 100644
index 00000000000..e21b25420af
Binary files /dev/null and b/apps/v4/public/images/sidebar-menu-dark.png differ
diff --git a/apps/v4/public/images/sidebar-menu.png b/apps/v4/public/images/sidebar-menu.png
new file mode 100644
index 00000000000..b7ff06ddfdb
Binary files /dev/null and b/apps/v4/public/images/sidebar-menu.png differ
diff --git a/apps/v4/public/images/sidebar-structure-dark.png b/apps/v4/public/images/sidebar-structure-dark.png
new file mode 100644
index 00000000000..8806dd2511f
Binary files /dev/null and b/apps/v4/public/images/sidebar-structure-dark.png differ
diff --git a/apps/v4/public/images/sidebar-structure.png b/apps/v4/public/images/sidebar-structure.png
new file mode 100644
index 00000000000..6c91f670623
Binary files /dev/null and b/apps/v4/public/images/sidebar-structure.png differ
diff --git a/apps/v4/public/images/style-with-theming.jpg b/apps/v4/public/images/style-with-theming.jpg
new file mode 100644
index 00000000000..2ebc67b180d
Binary files /dev/null and b/apps/v4/public/images/style-with-theming.jpg differ
diff --git a/apps/v4/public/images/style.jpg b/apps/v4/public/images/style.jpg
new file mode 100644
index 00000000000..bfc0dae7326
Binary files /dev/null and b/apps/v4/public/images/style.jpg differ
diff --git a/templates/next-template/public/next.svg b/apps/v4/public/next.svg
similarity index 100%
rename from templates/next-template/public/next.svg
rename to apps/v4/public/next.svg
diff --git a/apps/v4/public/opengraph-image.png b/apps/v4/public/opengraph-image.png
new file mode 100644
index 00000000000..4f7f6fd5bab
Binary files /dev/null and b/apps/v4/public/opengraph-image.png differ
diff --git a/apps/v4/public/placeholder.svg b/apps/v4/public/placeholder.svg
new file mode 100644
index 00000000000..e763910b27f
--- /dev/null
+++ b/apps/v4/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/v4/public/r/colors/gray.json b/apps/v4/public/r/colors/gray.json
new file mode 100644
index 00000000000..93a36e062eb
--- /dev/null
+++ b/apps/v4/public/r/colors/gray.json
@@ -0,0 +1,171 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "gray-950",
+      "card": "white",
+      "card-foreground": "gray-950",
+      "popover": "white",
+      "popover-foreground": "gray-950",
+      "primary": "gray-900",
+      "primary-foreground": "gray-50",
+      "secondary": "gray-100",
+      "secondary-foreground": "gray-900",
+      "muted": "gray-100",
+      "muted-foreground": "gray-500",
+      "accent": "gray-100",
+      "accent-foreground": "gray-900",
+      "destructive": "red-500",
+      "destructive-foreground": "gray-50",
+      "border": "gray-200",
+      "input": "gray-200",
+      "ring": "gray-950"
+    },
+    "dark": {
+      "background": "gray-950",
+      "foreground": "gray-50",
+      "card": "gray-950",
+      "card-foreground": "gray-50",
+      "popover": "gray-950",
+      "popover-foreground": "gray-50",
+      "primary": "gray-50",
+      "primary-foreground": "gray-900",
+      "secondary": "gray-800",
+      "secondary-foreground": "gray-50",
+      "muted": "gray-800",
+      "muted-foreground": "gray-400",
+      "accent": "gray-800",
+      "accent-foreground": "gray-50",
+      "destructive": "red-900",
+      "destructive-foreground": "gray-50",
+      "border": "gray-800",
+      "input": "gray-800",
+      "ring": "gray-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "224 71.4% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "224 71.4% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "224 71.4% 4.1%",
+      "primary": "220.9 39.3% 11%",
+      "primary-foreground": "210 20% 98%",
+      "secondary": "220 14.3% 95.9%",
+      "secondary-foreground": "220.9 39.3% 11%",
+      "muted": "220 14.3% 95.9%",
+      "muted-foreground": "220 8.9% 46.1%",
+      "accent": "220 14.3% 95.9%",
+      "accent-foreground": "220.9 39.3% 11%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "220 13% 91%",
+      "input": "220 13% 91%",
+      "ring": "224 71.4% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "224 71.4% 4.1%",
+      "foreground": "210 20% 98%",
+      "card": "224 71.4% 4.1%",
+      "card-foreground": "210 20% 98%",
+      "popover": "224 71.4% 4.1%",
+      "popover-foreground": "210 20% 98%",
+      "primary": "210 20% 98%",
+      "primary-foreground": "220.9 39.3% 11%",
+      "secondary": "215 27.9% 16.9%",
+      "secondary-foreground": "210 20% 98%",
+      "muted": "215 27.9% 16.9%",
+      "muted-foreground": "217.9 10.6% 64.9%",
+      "accent": "215 27.9% 16.9%",
+      "accent-foreground": "210 20% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "215 27.9% 16.9%",
+      "input": "215 27.9% 16.9%",
+      "ring": "216 12.2% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.13 0.028 261.692)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.13 0.028 261.692)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.13 0.028 261.692)",
+      "primary": "oklch(0.21 0.034 264.665)",
+      "primary-foreground": "oklch(0.985 0.002 247.839)",
+      "secondary": "oklch(0.967 0.003 264.542)",
+      "secondary-foreground": "oklch(0.21 0.034 264.665)",
+      "muted": "oklch(0.967 0.003 264.542)",
+      "muted-foreground": "oklch(0.551 0.027 264.364)",
+      "accent": "oklch(0.967 0.003 264.542)",
+      "accent-foreground": "oklch(0.21 0.034 264.665)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.928 0.006 264.531)",
+      "input": "oklch(0.928 0.006 264.531)",
+      "ring": "oklch(0.707 0.022 261.325)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0.002 247.839)",
+      "sidebar-foreground": "oklch(0.13 0.028 261.692)",
+      "sidebar-primary": "oklch(0.21 0.034 264.665)",
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-accent": "oklch(0.967 0.003 264.542)",
+      "sidebar-accent-foreground": "oklch(0.21 0.034 264.665)",
+      "sidebar-border": "oklch(0.928 0.006 264.531)",
+      "sidebar-ring": "oklch(0.707 0.022 261.325)"
+    },
+    "dark": {
+      "background": "oklch(0.13 0.028 261.692)",
+      "foreground": "oklch(0.985 0.002 247.839)",
+      "card": "oklch(0.21 0.034 264.665)",
+      "card-foreground": "oklch(0.985 0.002 247.839)",
+      "popover": "oklch(0.21 0.034 264.665)",
+      "popover-foreground": "oklch(0.985 0.002 247.839)",
+      "primary": "oklch(0.928 0.006 264.531)",
+      "primary-foreground": "oklch(0.21 0.034 264.665)",
+      "secondary": "oklch(0.278 0.033 256.848)",
+      "secondary-foreground": "oklch(0.985 0.002 247.839)",
+      "muted": "oklch(0.278 0.033 256.848)",
+      "muted-foreground": "oklch(0.707 0.022 261.325)",
+      "accent": "oklch(0.278 0.033 256.848)",
+      "accent-foreground": "oklch(0.985 0.002 247.839)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.551 0.027 264.364)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.21 0.034 264.665)",
+      "sidebar-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-accent": "oklch(0.278 0.033 256.848)",
+      "sidebar-accent-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.551 0.027 264.364)"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n    --ring: 224 71.4% 4.1%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --ring: 216 12.2% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/colors/index.json b/apps/v4/public/r/colors/index.json
new file mode 100644
index 00000000000..c06c452a3ff
--- /dev/null
+++ b/apps/v4/public/r/colors/index.json
@@ -0,0 +1,2243 @@
+{
+  "inherit": "inherit",
+  "current": "currentColor",
+  "transparent": "transparent",
+  "black": {
+    "hex": "#000000",
+    "rgb": "rgb(0,0,0)",
+    "hsl": "hsl(0,0%,0%)",
+    "oklch": "oklch(0.00,0.00,0)",
+    "rgbChannel": "0 0 0",
+    "hslChannel": "0 0% 0%"
+  },
+  "white": {
+    "hex": "#ffffff",
+    "rgb": "rgb(255,255,255)",
+    "hsl": "hsl(0,0%,100%)",
+    "oklch": "oklch(1.00,0.00,0)",
+    "rgbChannel": "255 255 255",
+    "hslChannel": "0 0% 100%"
+  },
+  "slate": [
+    {
+      "scale": 50,
+      "hex": "#f8fafc",
+      "rgb": "rgb(248,250,252)",
+      "hsl": "hsl(210,40%,98%)",
+      "oklch": "oklch(0.98,0.00,248)",
+      "rgbChannel": "248 250 252",
+      "hslChannel": "210 40% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f1f5f9",
+      "rgb": "rgb(241,245,249)",
+      "hsl": "hsl(210,40%,96.1%)",
+      "oklch": "oklch(0.97,0.01,248)",
+      "rgbChannel": "241 245 249",
+      "hslChannel": "210 40% 96.1%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e2e8f0",
+      "rgb": "rgb(226,232,240)",
+      "hsl": "hsl(214.3,31.8%,91.4%)",
+      "oklch": "oklch(0.93,0.01,256)",
+      "rgbChannel": "226 232 240",
+      "hslChannel": "214.3 31.8% 91.4%"
+    },
+    {
+      "scale": 300,
+      "hex": "#cbd5e1",
+      "rgb": "rgb(203,213,225)",
+      "hsl": "hsl(212.7,26.8%,83.9%)",
+      "oklch": "oklch(0.87,0.02,253)",
+      "rgbChannel": "203 213 225",
+      "hslChannel": "212.7 26.8% 83.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#94a3b8",
+      "rgb": "rgb(148,163,184)",
+      "hsl": "hsl(215,20.2%,65.1%)",
+      "oklch": "oklch(0.71,0.04,257)",
+      "rgbChannel": "148 163 184",
+      "hslChannel": "215 20.2% 65.1%"
+    },
+    {
+      "scale": 500,
+      "hex": "#64748b",
+      "rgb": "rgb(100,116,139)",
+      "hsl": "hsl(215.4,16.3%,46.9%)",
+      "oklch": "oklch(0.55,0.04,257)",
+      "rgbChannel": "100 116 139",
+      "hslChannel": "215.4 16.3% 46.9%"
+    },
+    {
+      "scale": 600,
+      "hex": "#475569",
+      "rgb": "rgb(71,85,105)",
+      "hsl": "hsl(215.3,19.3%,34.5%)",
+      "oklch": "oklch(0.45,0.04,257)",
+      "rgbChannel": "71 85 105",
+      "hslChannel": "215.3 19.3% 34.5%"
+    },
+    {
+      "scale": 700,
+      "hex": "#334155",
+      "rgb": "rgb(51,65,85)",
+      "hsl": "hsl(215.3,25%,26.7%)",
+      "oklch": "oklch(0.37,0.04,257)",
+      "rgbChannel": "51 65 85",
+      "hslChannel": "215.3 25% 26.7%"
+    },
+    {
+      "scale": 800,
+      "hex": "#1e293b",
+      "rgb": "rgb(30,41,59)",
+      "hsl": "hsl(217.2,32.6%,17.5%)",
+      "oklch": "oklch(0.28,0.04,260)",
+      "rgbChannel": "30 41 59",
+      "hslChannel": "217.2 32.6% 17.5%"
+    },
+    {
+      "scale": 900,
+      "hex": "#0f172a",
+      "rgb": "rgb(15,23,42)",
+      "hsl": "hsl(222.2,47.4%,11.2%)",
+      "oklch": "oklch(0.21,0.04,266)",
+      "rgbChannel": "15 23 42",
+      "hslChannel": "222.2 47.4% 11.2%"
+    },
+    {
+      "scale": 950,
+      "hex": "#020617",
+      "rgb": "rgb(2,6,23)",
+      "hsl": "hsl(222.2,84%,4.9%)",
+      "oklch": "oklch(0.13,0.04,265)",
+      "rgbChannel": "2 6 23",
+      "hslChannel": "222.2 84% 4.9%"
+    }
+  ],
+  "gray": [
+    {
+      "scale": 50,
+      "hex": "#f9fafb",
+      "rgb": "rgb(249,250,251)",
+      "hsl": "hsl(210,20%,98%)",
+      "oklch": "oklch(0.98,0.00,248)",
+      "rgbChannel": "249 250 251",
+      "hslChannel": "210 20% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f3f4f6",
+      "rgb": "rgb(243,244,246)",
+      "hsl": "hsl(220,14.3%,95.9%)",
+      "oklch": "oklch(0.97,0.00,265)",
+      "rgbChannel": "243 244 246",
+      "hslChannel": "220 14.3% 95.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e5e7eb",
+      "rgb": "rgb(229,231,235)",
+      "hsl": "hsl(220,13%,91%)",
+      "oklch": "oklch(0.93,0.01,265)",
+      "rgbChannel": "229 231 235",
+      "hslChannel": "220 13% 91%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d1d5db",
+      "rgb": "rgb(209,213,219)",
+      "hsl": "hsl(216,12.2%,83.9%)",
+      "oklch": "oklch(0.87,0.01,258)",
+      "rgbChannel": "209 213 219",
+      "hslChannel": "216 12.2% 83.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#9ca3af",
+      "rgb": "rgb(156,163,175)",
+      "hsl": "hsl(217.9,10.6%,64.9%)",
+      "oklch": "oklch(0.71,0.02,261)",
+      "rgbChannel": "156 163 175",
+      "hslChannel": "217.9 10.6% 64.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#6b7280",
+      "rgb": "rgb(107,114,128)",
+      "hsl": "hsl(220,8.9%,46.1%)",
+      "oklch": "oklch(0.55,0.02,264)",
+      "rgbChannel": "107 114 128",
+      "hslChannel": "220 8.9% 46.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#4b5563",
+      "rgb": "rgb(75,85,99)",
+      "hsl": "hsl(215,13.8%,34.1%)",
+      "oklch": "oklch(0.45,0.03,257)",
+      "rgbChannel": "75 85 99",
+      "hslChannel": "215 13.8% 34.1%"
+    },
+    {
+      "scale": 700,
+      "hex": "#374151",
+      "rgb": "rgb(55,65,81)",
+      "hsl": "hsl(216.9,19.1%,26.7%)",
+      "oklch": "oklch(0.37,0.03,260)",
+      "rgbChannel": "55 65 81",
+      "hslChannel": "216.9 19.1% 26.7%"
+    },
+    {
+      "scale": 800,
+      "hex": "#1f2937",
+      "rgb": "rgb(31,41,55)",
+      "hsl": "hsl(215,27.9%,16.9%)",
+      "oklch": "oklch(0.28,0.03,257)",
+      "rgbChannel": "31 41 55",
+      "hslChannel": "215 27.9% 16.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#111827",
+      "rgb": "rgb(17,24,39)",
+      "hsl": "hsl(220.9,39.3%,11%)",
+      "oklch": "oklch(0.21,0.03,265)",
+      "rgbChannel": "17 24 39",
+      "hslChannel": "220.9 39.3% 11%"
+    },
+    {
+      "scale": 950,
+      "hex": "#030712",
+      "rgb": "rgb(3,7,18)",
+      "hsl": "hsl(224,71.4%,4.1%)",
+      "oklch": "oklch(0.13,0.03,262)",
+      "rgbChannel": "3 7 18",
+      "hslChannel": "224 71.4% 4.1%"
+    }
+  ],
+  "zinc": [
+    {
+      "scale": 50,
+      "hex": "#fafafa",
+      "rgb": "rgb(250,250,250)",
+      "hsl": "hsl(0,0%,98%)",
+      "oklch": "oklch(0.99,0.00,0)",
+      "rgbChannel": "250 250 250",
+      "hslChannel": "0 0% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f4f4f5",
+      "rgb": "rgb(244,244,245)",
+      "hsl": "hsl(240,4.8%,95.9%)",
+      "oklch": "oklch(0.97,0.00,286)",
+      "rgbChannel": "244 244 245",
+      "hslChannel": "240 4.8% 95.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e4e4e7",
+      "rgb": "rgb(228,228,231)",
+      "hsl": "hsl(240,5.9%,90%)",
+      "oklch": "oklch(0.92,0.00,286)",
+      "rgbChannel": "228 228 231",
+      "hslChannel": "240 5.9% 90%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d4d4d8",
+      "rgb": "rgb(212,212,216)",
+      "hsl": "hsl(240,4.9%,83.9%)",
+      "oklch": "oklch(0.87,0.01,286)",
+      "rgbChannel": "212 212 216",
+      "hslChannel": "240 4.9% 83.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a1a1aa",
+      "rgb": "rgb(161,161,170)",
+      "hsl": "hsl(240,5%,64.9%)",
+      "oklch": "oklch(0.71,0.01,286)",
+      "rgbChannel": "161 161 170",
+      "hslChannel": "240 5% 64.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#71717a",
+      "rgb": "rgb(113,113,122)",
+      "hsl": "hsl(240,3.8%,46.1%)",
+      "oklch": "oklch(0.55,0.01,286)",
+      "rgbChannel": "113 113 122",
+      "hslChannel": "240 3.8% 46.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#52525b",
+      "rgb": "rgb(82,82,91)",
+      "hsl": "hsl(240,5.2%,33.9%)",
+      "oklch": "oklch(0.44,0.01,286)",
+      "rgbChannel": "82 82 91",
+      "hslChannel": "240 5.2% 33.9%"
+    },
+    {
+      "scale": 700,
+      "hex": "#3f3f46",
+      "rgb": "rgb(63,63,70)",
+      "hsl": "hsl(240,5.3%,26.1%)",
+      "oklch": "oklch(0.37,0.01,286)",
+      "rgbChannel": "63 63 70",
+      "hslChannel": "240 5.3% 26.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#27272a",
+      "rgb": "rgb(39,39,42)",
+      "hsl": "hsl(240,3.7%,15.9%)",
+      "oklch": "oklch(0.27,0.01,286)",
+      "rgbChannel": "39 39 42",
+      "hslChannel": "240 3.7% 15.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#18181b",
+      "rgb": "rgb(24,24,27)",
+      "hsl": "hsl(240,5.9%,10%)",
+      "oklch": "oklch(0.21,0.01,286)",
+      "rgbChannel": "24 24 27",
+      "hslChannel": "240 5.9% 10%"
+    },
+    {
+      "scale": 950,
+      "hex": "#09090b",
+      "rgb": "rgb(9,9,11)",
+      "hsl": "hsl(240,10%,3.9%)",
+      "oklch": "oklch(0.14,0.00,286)",
+      "rgbChannel": "9 9 11",
+      "hslChannel": "240 10% 3.9%"
+    }
+  ],
+  "neutral": [
+    {
+      "scale": 50,
+      "hex": "#fafafa",
+      "rgb": "rgb(250,250,250)",
+      "hsl": "hsl(0,0%,98%)",
+      "oklch": "oklch(0.99,0.00,0)",
+      "rgbChannel": "250 250 250",
+      "hslChannel": "0 0% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f5f5f5",
+      "rgb": "rgb(245,245,245)",
+      "hsl": "hsl(0,0%,96.1%)",
+      "oklch": "oklch(0.97,0.00,0)",
+      "rgbChannel": "245 245 245",
+      "hslChannel": "0 0% 96.1%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e5e5e5",
+      "rgb": "rgb(229,229,229)",
+      "hsl": "hsl(0,0%,89.8%)",
+      "oklch": "oklch(0.92,0.00,0)",
+      "rgbChannel": "229 229 229",
+      "hslChannel": "0 0% 89.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d4d4d4",
+      "rgb": "rgb(212,212,212)",
+      "hsl": "hsl(0,0%,83.1%)",
+      "oklch": "oklch(0.87,0.00,0)",
+      "rgbChannel": "212 212 212",
+      "hslChannel": "0 0% 83.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a3a3a3",
+      "rgb": "rgb(163,163,163)",
+      "hsl": "hsl(0,0%,63.9%)",
+      "oklch": "oklch(0.72,0.00,0)",
+      "rgbChannel": "163 163 163",
+      "hslChannel": "0 0% 63.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#737373",
+      "rgb": "rgb(115,115,115)",
+      "hsl": "hsl(0,0%,45.1%)",
+      "oklch": "oklch(0.56,0.00,0)",
+      "rgbChannel": "115 115 115",
+      "hslChannel": "0 0% 45.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#525252",
+      "rgb": "rgb(82,82,82)",
+      "hsl": "hsl(0,0%,32.2%)",
+      "oklch": "oklch(0.44,0.00,0)",
+      "rgbChannel": "82 82 82",
+      "hslChannel": "0 0% 32.2%"
+    },
+    {
+      "scale": 700,
+      "hex": "#404040",
+      "rgb": "rgb(64,64,64)",
+      "hsl": "hsl(0,0%,25.1%)",
+      "oklch": "oklch(0.37,0.00,0)",
+      "rgbChannel": "64 64 64",
+      "hslChannel": "0 0% 25.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#262626",
+      "rgb": "rgb(38,38,38)",
+      "hsl": "hsl(0,0%,14.9%)",
+      "oklch": "oklch(0.27,0.00,0)",
+      "rgbChannel": "38 38 38",
+      "hslChannel": "0 0% 14.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#171717",
+      "rgb": "rgb(23,23,23)",
+      "hsl": "hsl(0,0%,9%)",
+      "oklch": "oklch(0.20,0.00,0)",
+      "rgbChannel": "23 23 23",
+      "hslChannel": "0 0% 9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#0a0a0a",
+      "rgb": "rgb(10,10,10)",
+      "hsl": "hsl(0,0%,3.9%)",
+      "oklch": "oklch(0.14,0.00,0)",
+      "rgbChannel": "10 10 10",
+      "hslChannel": "0 0% 3.9%"
+    }
+  ],
+  "stone": [
+    {
+      "scale": 50,
+      "hex": "#fafaf9",
+      "rgb": "rgb(250,250,249)",
+      "hsl": "hsl(60,9.1%,97.8%)",
+      "oklch": "oklch(0.98,0.00,106)",
+      "rgbChannel": "250 250 249",
+      "hslChannel": "60 9.1% 97.8%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f5f5f4",
+      "rgb": "rgb(245,245,244)",
+      "hsl": "hsl(60,4.8%,95.9%)",
+      "oklch": "oklch(0.97,0.00,106)",
+      "rgbChannel": "245 245 244",
+      "hslChannel": "60 4.8% 95.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e7e5e4",
+      "rgb": "rgb(231,229,228)",
+      "hsl": "hsl(20,5.9%,90%)",
+      "oklch": "oklch(0.92,0.00,49)",
+      "rgbChannel": "231 229 228",
+      "hslChannel": "20 5.9% 90%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d6d3d1",
+      "rgb": "rgb(214,211,209)",
+      "hsl": "hsl(24,5.7%,82.9%)",
+      "oklch": "oklch(0.87,0.00,56)",
+      "rgbChannel": "214 211 209",
+      "hslChannel": "24 5.7% 82.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a8a29e",
+      "rgb": "rgb(168,162,158)",
+      "hsl": "hsl(24,5.4%,63.9%)",
+      "oklch": "oklch(0.72,0.01,56)",
+      "rgbChannel": "168 162 158",
+      "hslChannel": "24 5.4% 63.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#78716c",
+      "rgb": "rgb(120,113,108)",
+      "hsl": "hsl(25,5.3%,44.7%)",
+      "oklch": "oklch(0.55,0.01,58)",
+      "rgbChannel": "120 113 108",
+      "hslChannel": "25 5.3% 44.7%"
+    },
+    {
+      "scale": 600,
+      "hex": "#57534e",
+      "rgb": "rgb(87,83,78)",
+      "hsl": "hsl(33.3,5.5%,32.4%)",
+      "oklch": "oklch(0.44,0.01,74)",
+      "rgbChannel": "87 83 78",
+      "hslChannel": "33.3 5.5% 32.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#44403c",
+      "rgb": "rgb(68,64,60)",
+      "hsl": "hsl(30,6.3%,25.1%)",
+      "oklch": "oklch(0.37,0.01,68)",
+      "rgbChannel": "68 64 60",
+      "hslChannel": "30 6.3% 25.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#292524",
+      "rgb": "rgb(41,37,36)",
+      "hsl": "hsl(12,6.5%,15.1%)",
+      "oklch": "oklch(0.27,0.01,34)",
+      "rgbChannel": "41 37 36",
+      "hslChannel": "12 6.5% 15.1%"
+    },
+    {
+      "scale": 900,
+      "hex": "#1c1917",
+      "rgb": "rgb(28,25,23)",
+      "hsl": "hsl(24,9.8%,10%)",
+      "oklch": "oklch(0.22,0.01,56)",
+      "rgbChannel": "28 25 23",
+      "hslChannel": "24 9.8% 10%"
+    },
+    {
+      "scale": 950,
+      "hex": "#0c0a09",
+      "rgb": "rgb(12,10,9)",
+      "hsl": "hsl(20,14.3%,4.1%)",
+      "oklch": "oklch(0.15,0.00,49)",
+      "rgbChannel": "12 10 9",
+      "hslChannel": "20 14.3% 4.1%"
+    }
+  ],
+  "red": [
+    {
+      "scale": 50,
+      "hex": "#fef2f2",
+      "rgb": "rgb(254,242,242)",
+      "hsl": "hsl(0,85.7%,97.3%)",
+      "oklch": "oklch(0.97,0.01,17)",
+      "rgbChannel": "254 242 242",
+      "hslChannel": "0 85.7% 97.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fee2e2",
+      "rgb": "rgb(254,226,226)",
+      "hsl": "hsl(0,93.3%,94.1%)",
+      "oklch": "oklch(0.94,0.03,18)",
+      "rgbChannel": "254 226 226",
+      "hslChannel": "0 93.3% 94.1%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fecaca",
+      "rgb": "rgb(254,202,202)",
+      "hsl": "hsl(0,96.3%,89.4%)",
+      "oklch": "oklch(0.88,0.06,18)",
+      "rgbChannel": "254 202 202",
+      "hslChannel": "0 96.3% 89.4%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fca5a5",
+      "rgb": "rgb(252,165,165)",
+      "hsl": "hsl(0,93.5%,81.8%)",
+      "oklch": "oklch(0.81,0.10,20)",
+      "rgbChannel": "252 165 165",
+      "hslChannel": "0 93.5% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#f87171",
+      "rgb": "rgb(248,113,113)",
+      "hsl": "hsl(0,90.6%,70.8%)",
+      "oklch": "oklch(0.71,0.17,22)",
+      "rgbChannel": "248 113 113",
+      "hslChannel": "0 90.6% 70.8%"
+    },
+    {
+      "scale": 500,
+      "hex": "#ef4444",
+      "rgb": "rgb(239,68,68)",
+      "hsl": "hsl(0,84.2%,60.2%)",
+      "oklch": "oklch(0.64,0.21,25)",
+      "rgbChannel": "239 68 68",
+      "hslChannel": "0 84.2% 60.2%"
+    },
+    {
+      "scale": 600,
+      "hex": "#dc2626",
+      "rgb": "rgb(220,38,38)",
+      "hsl": "hsl(0,72.2%,50.6%)",
+      "oklch": "oklch(0.58,0.22,27)",
+      "rgbChannel": "220 38 38",
+      "hslChannel": "0 72.2% 50.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#b91c1c",
+      "rgb": "rgb(185,28,28)",
+      "hsl": "hsl(0,73.7%,41.8%)",
+      "oklch": "oklch(0.51,0.19,28)",
+      "rgbChannel": "185 28 28",
+      "hslChannel": "0 73.7% 41.8%"
+    },
+    {
+      "scale": 800,
+      "hex": "#991b1b",
+      "rgb": "rgb(153,27,27)",
+      "hsl": "hsl(0,70%,35.3%)",
+      "oklch": "oklch(0.44,0.16,27)",
+      "rgbChannel": "153 27 27",
+      "hslChannel": "0 70% 35.3%"
+    },
+    {
+      "scale": 900,
+      "hex": "#7f1d1d",
+      "rgb": "rgb(127,29,29)",
+      "hsl": "hsl(0,62.8%,30.6%)",
+      "oklch": "oklch(0.40,0.13,26)",
+      "rgbChannel": "127 29 29",
+      "hslChannel": "0 62.8% 30.6%"
+    },
+    {
+      "scale": 950,
+      "hex": "#450a0a",
+      "rgb": "rgb(69,10,10)",
+      "hsl": "hsl(0,74.7%,15.5%)",
+      "oklch": "oklch(0.26,0.09,26)",
+      "rgbChannel": "69 10 10",
+      "hslChannel": "0 74.7% 15.5%"
+    }
+  ],
+  "orange": [
+    {
+      "scale": 50,
+      "hex": "#fff7ed",
+      "rgb": "rgb(255,247,237)",
+      "hsl": "hsl(33.3,100%,96.5%)",
+      "oklch": "oklch(0.98,0.02,74)",
+      "rgbChannel": "255 247 237",
+      "hslChannel": "33.3 100% 96.5%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ffedd5",
+      "rgb": "rgb(255,237,213)",
+      "hsl": "hsl(34.3,100%,91.8%)",
+      "oklch": "oklch(0.95,0.04,75)",
+      "rgbChannel": "255 237 213",
+      "hslChannel": "34.3 100% 91.8%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fed7aa",
+      "rgb": "rgb(254,215,170)",
+      "hsl": "hsl(32.1,97.7%,83.1%)",
+      "oklch": "oklch(0.90,0.07,71)",
+      "rgbChannel": "254 215 170",
+      "hslChannel": "32.1 97.7% 83.1%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fdba74",
+      "rgb": "rgb(253,186,116)",
+      "hsl": "hsl(30.7,97.2%,72.4%)",
+      "oklch": "oklch(0.84,0.12,66)",
+      "rgbChannel": "253 186 116",
+      "hslChannel": "30.7 97.2% 72.4%"
+    },
+    {
+      "scale": 400,
+      "hex": "#fb923c",
+      "rgb": "rgb(251,146,60)",
+      "hsl": "hsl(27,96%,61%)",
+      "oklch": "oklch(0.76,0.16,56)",
+      "rgbChannel": "251 146 60",
+      "hslChannel": "27 96% 61%"
+    },
+    {
+      "scale": 500,
+      "hex": "#f97316",
+      "rgb": "rgb(249,115,22)",
+      "hsl": "hsl(24.6,95%,53.1%)",
+      "oklch": "oklch(0.70,0.19,48)",
+      "rgbChannel": "249 115 22",
+      "hslChannel": "24.6 95% 53.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#ea580c",
+      "rgb": "rgb(234,88,12)",
+      "hsl": "hsl(20.5,90.2%,48.2%)",
+      "oklch": "oklch(0.65,0.19,41)",
+      "rgbChannel": "234 88 12",
+      "hslChannel": "20.5 90.2% 48.2%"
+    },
+    {
+      "scale": 700,
+      "hex": "#c2410c",
+      "rgb": "rgb(194,65,12)",
+      "hsl": "hsl(17.5,88.3%,40.4%)",
+      "oklch": "oklch(0.55,0.17,38)",
+      "rgbChannel": "194 65 12",
+      "hslChannel": "17.5 88.3% 40.4%"
+    },
+    {
+      "scale": 800,
+      "hex": "#9a3412",
+      "rgb": "rgb(154,52,18)",
+      "hsl": "hsl(15,79.1%,33.7%)",
+      "oklch": "oklch(0.47,0.14,37)",
+      "rgbChannel": "154 52 18",
+      "hslChannel": "15 79.1% 33.7%"
+    },
+    {
+      "scale": 900,
+      "hex": "#7c2d12",
+      "rgb": "rgb(124,45,18)",
+      "hsl": "hsl(15.3,74.6%,27.8%)",
+      "oklch": "oklch(0.41,0.12,38)",
+      "rgbChannel": "124 45 18",
+      "hslChannel": "15.3 74.6% 27.8%"
+    },
+    {
+      "scale": 950,
+      "hex": "#431407",
+      "rgb": "rgb(67,20,7)",
+      "hsl": "hsl(13,81.1%,14.5%)",
+      "oklch": "oklch(0.27,0.08,36)",
+      "rgbChannel": "67 20 7",
+      "hslChannel": "13 81.1% 14.5%"
+    }
+  ],
+  "amber": [
+    {
+      "scale": 50,
+      "hex": "#fffbeb",
+      "rgb": "rgb(255,251,235)",
+      "hsl": "hsl(48,100%,96.1%)",
+      "oklch": "oklch(0.99,0.02,95)",
+      "rgbChannel": "255 251 235",
+      "hslChannel": "48 100% 96.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fef3c7",
+      "rgb": "rgb(254,243,199)",
+      "hsl": "hsl(48,96.5%,88.8%)",
+      "oklch": "oklch(0.96,0.06,96)",
+      "rgbChannel": "254 243 199",
+      "hslChannel": "48 96.5% 88.8%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fde68a",
+      "rgb": "rgb(253,230,138)",
+      "hsl": "hsl(48,96.6%,76.7%)",
+      "oklch": "oklch(0.92,0.12,96)",
+      "rgbChannel": "253 230 138",
+      "hslChannel": "48 96.6% 76.7%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fcd34d",
+      "rgb": "rgb(252,211,77)",
+      "hsl": "hsl(45.9,96.7%,64.5%)",
+      "oklch": "oklch(0.88,0.15,92)",
+      "rgbChannel": "252 211 77",
+      "hslChannel": "45.9 96.7% 64.5%"
+    },
+    {
+      "scale": 400,
+      "hex": "#fbbf24",
+      "rgb": "rgb(251,191,36)",
+      "hsl": "hsl(43.3,96.4%,56.3%)",
+      "oklch": "oklch(0.84,0.16,84)",
+      "rgbChannel": "251 191 36",
+      "hslChannel": "43.3 96.4% 56.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#f59e0b",
+      "rgb": "rgb(245,158,11)",
+      "hsl": "hsl(37.7,92.1%,50.2%)",
+      "oklch": "oklch(0.77,0.16,70)",
+      "rgbChannel": "245 158 11",
+      "hslChannel": "37.7 92.1% 50.2%"
+    },
+    {
+      "scale": 600,
+      "hex": "#d97706",
+      "rgb": "rgb(217,119,6)",
+      "hsl": "hsl(32.1,94.6%,43.7%)",
+      "oklch": "oklch(0.67,0.16,58)",
+      "rgbChannel": "217 119 6",
+      "hslChannel": "32.1 94.6% 43.7%"
+    },
+    {
+      "scale": 700,
+      "hex": "#b45309",
+      "rgb": "rgb(180,83,9)",
+      "hsl": "hsl(26,90.5%,37.1%)",
+      "oklch": "oklch(0.56,0.15,49)",
+      "rgbChannel": "180 83 9",
+      "hslChannel": "26 90.5% 37.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#92400e",
+      "rgb": "rgb(146,64,14)",
+      "hsl": "hsl(22.7,82.5%,31.4%)",
+      "oklch": "oklch(0.47,0.12,46)",
+      "rgbChannel": "146 64 14",
+      "hslChannel": "22.7 82.5% 31.4%"
+    },
+    {
+      "scale": 900,
+      "hex": "#78350f",
+      "rgb": "rgb(120,53,15)",
+      "hsl": "hsl(21.7,77.8%,26.5%)",
+      "oklch": "oklch(0.41,0.11,46)",
+      "rgbChannel": "120 53 15",
+      "hslChannel": "21.7 77.8% 26.5%"
+    },
+    {
+      "scale": 950,
+      "hex": "#451a03",
+      "rgb": "rgb(69,26,3)",
+      "hsl": "hsl(20.9,91.7%,14.1%)",
+      "oklch": "oklch(0.28,0.07,46)",
+      "rgbChannel": "69 26 3",
+      "hslChannel": "20.9 91.7% 14.1%"
+    }
+  ],
+  "yellow": [
+    {
+      "scale": 50,
+      "hex": "#fefce8",
+      "rgb": "rgb(254,252,232)",
+      "hsl": "hsl(54.5,91.7%,95.3%)",
+      "oklch": "oklch(0.99,0.03,102)",
+      "rgbChannel": "254 252 232",
+      "hslChannel": "54.5 91.7% 95.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fef9c3",
+      "rgb": "rgb(254,249,195)",
+      "hsl": "hsl(54.9,96.7%,88%)",
+      "oklch": "oklch(0.97,0.07,103)",
+      "rgbChannel": "254 249 195",
+      "hslChannel": "54.9 96.7% 88%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fef08a",
+      "rgb": "rgb(254,240,138)",
+      "hsl": "hsl(52.8,98.3%,76.9%)",
+      "oklch": "oklch(0.95,0.12,102)",
+      "rgbChannel": "254 240 138",
+      "hslChannel": "52.8 98.3% 76.9%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fde047",
+      "rgb": "rgb(253,224,71)",
+      "hsl": "hsl(50.4,97.8%,63.5%)",
+      "oklch": "oklch(0.91,0.17,98)",
+      "rgbChannel": "253 224 71",
+      "hslChannel": "50.4 97.8% 63.5%"
+    },
+    {
+      "scale": 400,
+      "hex": "#facc15",
+      "rgb": "rgb(250,204,21)",
+      "hsl": "hsl(47.9,95.8%,53.1%)",
+      "oklch": "oklch(0.86,0.17,92)",
+      "rgbChannel": "250 204 21",
+      "hslChannel": "47.9 95.8% 53.1%"
+    },
+    {
+      "scale": 500,
+      "hex": "#eab308",
+      "rgb": "rgb(234,179,8)",
+      "hsl": "hsl(45.4,93.4%,47.5%)",
+      "oklch": "oklch(0.80,0.16,86)",
+      "rgbChannel": "234 179 8",
+      "hslChannel": "45.4 93.4% 47.5%"
+    },
+    {
+      "scale": 600,
+      "hex": "#ca8a04",
+      "rgb": "rgb(202,138,4)",
+      "hsl": "hsl(40.6,96.1%,40.4%)",
+      "oklch": "oklch(0.68,0.14,76)",
+      "rgbChannel": "202 138 4",
+      "hslChannel": "40.6 96.1% 40.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#a16207",
+      "rgb": "rgb(161,98,7)",
+      "hsl": "hsl(35.5,91.7%,32.9%)",
+      "oklch": "oklch(0.55,0.12,66)",
+      "rgbChannel": "161 98 7",
+      "hslChannel": "35.5 91.7% 32.9%"
+    },
+    {
+      "scale": 800,
+      "hex": "#854d0e",
+      "rgb": "rgb(133,77,14)",
+      "hsl": "hsl(31.8,81%,28.8%)",
+      "oklch": "oklch(0.48,0.10,62)",
+      "rgbChannel": "133 77 14",
+      "hslChannel": "31.8 81% 28.8%"
+    },
+    {
+      "scale": 900,
+      "hex": "#713f12",
+      "rgb": "rgb(113,63,18)",
+      "hsl": "hsl(28.4,72.5%,25.7%)",
+      "oklch": "oklch(0.42,0.09,58)",
+      "rgbChannel": "113 63 18",
+      "hslChannel": "28.4 72.5% 25.7%"
+    },
+    {
+      "scale": 950,
+      "hex": "#422006",
+      "rgb": "rgb(66,32,6)",
+      "hsl": "hsl(26,83.3%,14.1%)",
+      "oklch": "oklch(0.29,0.06,54)",
+      "rgbChannel": "66 32 6",
+      "hslChannel": "26 83.3% 14.1%"
+    }
+  ],
+  "lime": [
+    {
+      "scale": 50,
+      "hex": "#f7fee7",
+      "rgb": "rgb(247,254,231)",
+      "hsl": "hsl(78.3,92%,95.1%)",
+      "oklch": "oklch(0.99,0.03,121)",
+      "rgbChannel": "247 254 231",
+      "hslChannel": "78.3 92% 95.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ecfccb",
+      "rgb": "rgb(236,252,203)",
+      "hsl": "hsl(79.6,89.1%,89.2%)",
+      "oklch": "oklch(0.97,0.07,122)",
+      "rgbChannel": "236 252 203",
+      "hslChannel": "79.6 89.1% 89.2%"
+    },
+    {
+      "scale": 200,
+      "hex": "#d9f99d",
+      "rgb": "rgb(217,249,157)",
+      "hsl": "hsl(80.9,88.5%,79.6%)",
+      "oklch": "oklch(0.94,0.12,124)",
+      "rgbChannel": "217 249 157",
+      "hslChannel": "80.9 88.5% 79.6%"
+    },
+    {
+      "scale": 300,
+      "hex": "#bef264",
+      "rgb": "rgb(190,242,100)",
+      "hsl": "hsl(82,84.5%,67.1%)",
+      "oklch": "oklch(0.90,0.18,127)",
+      "rgbChannel": "190 242 100",
+      "hslChannel": "82 84.5% 67.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a3e635",
+      "rgb": "rgb(163,230,53)",
+      "hsl": "hsl(82.7,78%,55.5%)",
+      "oklch": "oklch(0.85,0.21,129)",
+      "rgbChannel": "163 230 53",
+      "hslChannel": "82.7 78% 55.5%"
+    },
+    {
+      "scale": 500,
+      "hex": "#84cc16",
+      "rgb": "rgb(132,204,22)",
+      "hsl": "hsl(83.7,80.5%,44.3%)",
+      "oklch": "oklch(0.77,0.20,131)",
+      "rgbChannel": "132 204 22",
+      "hslChannel": "83.7 80.5% 44.3%"
+    },
+    {
+      "scale": 600,
+      "hex": "#65a30d",
+      "rgb": "rgb(101,163,13)",
+      "hsl": "hsl(84.8,85.2%,34.5%)",
+      "oklch": "oklch(0.65,0.18,132)",
+      "rgbChannel": "101 163 13",
+      "hslChannel": "84.8 85.2% 34.5%"
+    },
+    {
+      "scale": 700,
+      "hex": "#4d7c0f",
+      "rgb": "rgb(77,124,15)",
+      "hsl": "hsl(85.9,78.4%,27.3%)",
+      "oklch": "oklch(0.53,0.14,132)",
+      "rgbChannel": "77 124 15",
+      "hslChannel": "85.9 78.4% 27.3%"
+    },
+    {
+      "scale": 800,
+      "hex": "#3f6212",
+      "rgb": "rgb(63,98,18)",
+      "hsl": "hsl(86.3,69%,22.7%)",
+      "oklch": "oklch(0.45,0.11,131)",
+      "rgbChannel": "63 98 18",
+      "hslChannel": "86.3 69% 22.7%"
+    },
+    {
+      "scale": 900,
+      "hex": "#365314",
+      "rgb": "rgb(54,83,20)",
+      "hsl": "hsl(87.6,61.2%,20.2%)",
+      "oklch": "oklch(0.41,0.10,131)",
+      "rgbChannel": "54 83 20",
+      "hslChannel": "87.6 61.2% 20.2%"
+    },
+    {
+      "scale": 950,
+      "hex": "#1a2e05",
+      "rgb": "rgb(26,46,5)",
+      "hsl": "hsl(89.3,80.4%,10%)",
+      "oklch": "oklch(0.27,0.07,132)",
+      "rgbChannel": "26 46 5",
+      "hslChannel": "89.3 80.4% 10%"
+    }
+  ],
+  "green": [
+    {
+      "scale": 50,
+      "hex": "#f0fdf4",
+      "rgb": "rgb(240,253,244)",
+      "hsl": "hsl(138.5,76.5%,96.7%)",
+      "oklch": "oklch(0.98,0.02,156)",
+      "rgbChannel": "240 253 244",
+      "hslChannel": "138.5 76.5% 96.7%"
+    },
+    {
+      "scale": 100,
+      "hex": "#dcfce7",
+      "rgb": "rgb(220,252,231)",
+      "hsl": "hsl(140.6,84.2%,92.5%)",
+      "oklch": "oklch(0.96,0.04,157)",
+      "rgbChannel": "220 252 231",
+      "hslChannel": "140.6 84.2% 92.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#bbf7d0",
+      "rgb": "rgb(187,247,208)",
+      "hsl": "hsl(141,78.9%,85.1%)",
+      "oklch": "oklch(0.93,0.08,156)",
+      "rgbChannel": "187 247 208",
+      "hslChannel": "141 78.9% 85.1%"
+    },
+    {
+      "scale": 300,
+      "hex": "#86efac",
+      "rgb": "rgb(134,239,172)",
+      "hsl": "hsl(141.7,76.6%,73.1%)",
+      "oklch": "oklch(0.87,0.14,154)",
+      "rgbChannel": "134 239 172",
+      "hslChannel": "141.7 76.6% 73.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#4ade80",
+      "rgb": "rgb(74,222,128)",
+      "hsl": "hsl(141.9,69.2%,58%)",
+      "oklch": "oklch(0.80,0.18,152)",
+      "rgbChannel": "74 222 128",
+      "hslChannel": "141.9 69.2% 58%"
+    },
+    {
+      "scale": 500,
+      "hex": "#22c55e",
+      "rgb": "rgb(34,197,94)",
+      "hsl": "hsl(142.1,70.6%,45.3%)",
+      "oklch": "oklch(0.72,0.19,150)",
+      "rgbChannel": "34 197 94",
+      "hslChannel": "142.1 70.6% 45.3%"
+    },
+    {
+      "scale": 600,
+      "hex": "#16a34a",
+      "rgb": "rgb(22,163,74)",
+      "hsl": "hsl(142.1,76.2%,36.3%)",
+      "oklch": "oklch(0.63,0.17,149)",
+      "rgbChannel": "22 163 74",
+      "hslChannel": "142.1 76.2% 36.3%"
+    },
+    {
+      "scale": 700,
+      "hex": "#15803d",
+      "rgb": "rgb(21,128,61)",
+      "hsl": "hsl(142.4,71.8%,29.2%)",
+      "oklch": "oklch(0.53,0.14,150)",
+      "rgbChannel": "21 128 61",
+      "hslChannel": "142.4 71.8% 29.2%"
+    },
+    {
+      "scale": 800,
+      "hex": "#166534",
+      "rgb": "rgb(22,101,52)",
+      "hsl": "hsl(142.8,64.2%,24.1%)",
+      "oklch": "oklch(0.45,0.11,151)",
+      "rgbChannel": "22 101 52",
+      "hslChannel": "142.8 64.2% 24.1%"
+    },
+    {
+      "scale": 900,
+      "hex": "#14532d",
+      "rgb": "rgb(20,83,45)",
+      "hsl": "hsl(143.8,61.2%,20.2%)",
+      "oklch": "oklch(0.39,0.09,153)",
+      "rgbChannel": "20 83 45",
+      "hslChannel": "143.8 61.2% 20.2%"
+    },
+    {
+      "scale": 950,
+      "hex": "#052e16",
+      "rgb": "rgb(5,46,22)",
+      "hsl": "hsl(144.9,80.4%,10%)",
+      "oklch": "oklch(0.27,0.06,153)",
+      "rgbChannel": "5 46 22",
+      "hslChannel": "144.9 80.4% 10%"
+    }
+  ],
+  "emerald": [
+    {
+      "scale": 50,
+      "hex": "#ecfdf5",
+      "rgb": "rgb(236,253,245)",
+      "hsl": "hsl(151.8,81%,95.9%)",
+      "oklch": "oklch(0.98,0.02,166)",
+      "rgbChannel": "236 253 245",
+      "hslChannel": "151.8 81% 95.9%"
+    },
+    {
+      "scale": 100,
+      "hex": "#d1fae5",
+      "rgb": "rgb(209,250,229)",
+      "hsl": "hsl(149.3,80.4%,90%)",
+      "oklch": "oklch(0.95,0.05,163)",
+      "rgbChannel": "209 250 229",
+      "hslChannel": "149.3 80.4% 90%"
+    },
+    {
+      "scale": 200,
+      "hex": "#a7f3d0",
+      "rgb": "rgb(167,243,208)",
+      "hsl": "hsl(152.4,76%,80.4%)",
+      "oklch": "oklch(0.90,0.09,164)",
+      "rgbChannel": "167 243 208",
+      "hslChannel": "152.4 76% 80.4%"
+    },
+    {
+      "scale": 300,
+      "hex": "#6ee7b7",
+      "rgb": "rgb(110,231,183)",
+      "hsl": "hsl(156.2,71.6%,66.9%)",
+      "oklch": "oklch(0.85,0.13,165)",
+      "rgbChannel": "110 231 183",
+      "hslChannel": "156.2 71.6% 66.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#34d399",
+      "rgb": "rgb(52,211,153)",
+      "hsl": "hsl(158.1,64.4%,51.6%)",
+      "oklch": "oklch(0.77,0.15,163)",
+      "rgbChannel": "52 211 153",
+      "hslChannel": "158.1 64.4% 51.6%"
+    },
+    {
+      "scale": 500,
+      "hex": "#10b981",
+      "rgb": "rgb(16,185,129)",
+      "hsl": "hsl(160.1,84.1%,39.4%)",
+      "oklch": "oklch(0.70,0.15,162)",
+      "rgbChannel": "16 185 129",
+      "hslChannel": "160.1 84.1% 39.4%"
+    },
+    {
+      "scale": 600,
+      "hex": "#059669",
+      "rgb": "rgb(5,150,105)",
+      "hsl": "hsl(161.4,93.5%,30.4%)",
+      "oklch": "oklch(0.60,0.13,163)",
+      "rgbChannel": "5 150 105",
+      "hslChannel": "161.4 93.5% 30.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#047857",
+      "rgb": "rgb(4,120,87)",
+      "hsl": "hsl(162.9,93.5%,24.3%)",
+      "oklch": "oklch(0.51,0.10,166)",
+      "rgbChannel": "4 120 87",
+      "hslChannel": "162.9 93.5% 24.3%"
+    },
+    {
+      "scale": 800,
+      "hex": "#065f46",
+      "rgb": "rgb(6,95,70)",
+      "hsl": "hsl(163.1,88.1%,19.8%)",
+      "oklch": "oklch(0.43,0.09,167)",
+      "rgbChannel": "6 95 70",
+      "hslChannel": "163.1 88.1% 19.8%"
+    },
+    {
+      "scale": 900,
+      "hex": "#064e3b",
+      "rgb": "rgb(6,78,59)",
+      "hsl": "hsl(164.2,85.7%,16.5%)",
+      "oklch": "oklch(0.38,0.07,169)",
+      "rgbChannel": "6 78 59",
+      "hslChannel": "164.2 85.7% 16.5%"
+    },
+    {
+      "scale": 950,
+      "hex": "#022c22",
+      "rgb": "rgb(2,44,34)",
+      "hsl": "hsl(165.7,91.3%,9%)",
+      "oklch": "oklch(0.26,0.05,173)",
+      "rgbChannel": "2 44 34",
+      "hslChannel": "165.7 91.3% 9%"
+    }
+  ],
+  "teal": [
+    {
+      "scale": 50,
+      "hex": "#f0fdfa",
+      "rgb": "rgb(240,253,250)",
+      "hsl": "hsl(166.2,76.5%,96.7%)",
+      "oklch": "oklch(0.98,0.01,181)",
+      "rgbChannel": "240 253 250",
+      "hslChannel": "166.2 76.5% 96.7%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ccfbf1",
+      "rgb": "rgb(204,251,241)",
+      "hsl": "hsl(167.2,85.5%,89.2%)",
+      "oklch": "oklch(0.95,0.05,181)",
+      "rgbChannel": "204 251 241",
+      "hslChannel": "167.2 85.5% 89.2%"
+    },
+    {
+      "scale": 200,
+      "hex": "#99f6e4",
+      "rgb": "rgb(153,246,228)",
+      "hsl": "hsl(168.4,83.8%,78.2%)",
+      "oklch": "oklch(0.91,0.09,180)",
+      "rgbChannel": "153 246 228",
+      "hslChannel": "168.4 83.8% 78.2%"
+    },
+    {
+      "scale": 300,
+      "hex": "#5eead4",
+      "rgb": "rgb(94,234,212)",
+      "hsl": "hsl(170.6,76.9%,64.3%)",
+      "oklch": "oklch(0.85,0.13,181)",
+      "rgbChannel": "94 234 212",
+      "hslChannel": "170.6 76.9% 64.3%"
+    },
+    {
+      "scale": 400,
+      "hex": "#2dd4bf",
+      "rgb": "rgb(45,212,191)",
+      "hsl": "hsl(172.5,66%,50.4%)",
+      "oklch": "oklch(0.78,0.13,182)",
+      "rgbChannel": "45 212 191",
+      "hslChannel": "172.5 66% 50.4%"
+    },
+    {
+      "scale": 500,
+      "hex": "#14b8a6",
+      "rgb": "rgb(20,184,166)",
+      "hsl": "hsl(173.4,80.4%,40%)",
+      "oklch": "oklch(0.70,0.12,183)",
+      "rgbChannel": "20 184 166",
+      "hslChannel": "173.4 80.4% 40%"
+    },
+    {
+      "scale": 600,
+      "hex": "#0d9488",
+      "rgb": "rgb(13,148,136)",
+      "hsl": "hsl(174.7,83.9%,31.6%)",
+      "oklch": "oklch(0.60,0.10,185)",
+      "rgbChannel": "13 148 136",
+      "hslChannel": "174.7 83.9% 31.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#0f766e",
+      "rgb": "rgb(15,118,110)",
+      "hsl": "hsl(175.3,77.4%,26.1%)",
+      "oklch": "oklch(0.51,0.09,186)",
+      "rgbChannel": "15 118 110",
+      "hslChannel": "175.3 77.4% 26.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#115e59",
+      "rgb": "rgb(17,94,89)",
+      "hsl": "hsl(176.1,69.4%,21.8%)",
+      "oklch": "oklch(0.44,0.07,188)",
+      "rgbChannel": "17 94 89",
+      "hslChannel": "176.1 69.4% 21.8%"
+    },
+    {
+      "scale": 900,
+      "hex": "#134e4a",
+      "rgb": "rgb(19,78,74)",
+      "hsl": "hsl(175.9,60.8%,19%)",
+      "oklch": "oklch(0.39,0.06,188)",
+      "rgbChannel": "19 78 74",
+      "hslChannel": "175.9 60.8% 19%"
+    },
+    {
+      "scale": 950,
+      "hex": "#042f2e",
+      "rgb": "rgb(4,47,46)",
+      "hsl": "hsl(178.6,84.3%,10%)",
+      "oklch": "oklch(0.28,0.04,193)",
+      "rgbChannel": "4 47 46",
+      "hslChannel": "178.6 84.3% 10%"
+    }
+  ],
+  "cyan": [
+    {
+      "scale": 50,
+      "hex": "#ecfeff",
+      "rgb": "rgb(236,254,255)",
+      "hsl": "hsl(183.2,100%,96.3%)",
+      "oklch": "oklch(0.98,0.02,201)",
+      "rgbChannel": "236 254 255",
+      "hslChannel": "183.2 100% 96.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#cffafe",
+      "rgb": "rgb(207,250,254)",
+      "hsl": "hsl(185.1,95.9%,90.4%)",
+      "oklch": "oklch(0.96,0.04,203)",
+      "rgbChannel": "207 250 254",
+      "hslChannel": "185.1 95.9% 90.4%"
+    },
+    {
+      "scale": 200,
+      "hex": "#a5f3fc",
+      "rgb": "rgb(165,243,252)",
+      "hsl": "hsl(186.2,93.5%,81.8%)",
+      "oklch": "oklch(0.92,0.08,205)",
+      "rgbChannel": "165 243 252",
+      "hslChannel": "186.2 93.5% 81.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#67e8f9",
+      "rgb": "rgb(103,232,249)",
+      "hsl": "hsl(187,92.4%,69%)",
+      "oklch": "oklch(0.87,0.12,207)",
+      "rgbChannel": "103 232 249",
+      "hslChannel": "187 92.4% 69%"
+    },
+    {
+      "scale": 400,
+      "hex": "#22d3ee",
+      "rgb": "rgb(34,211,238)",
+      "hsl": "hsl(187.9,85.7%,53.3%)",
+      "oklch": "oklch(0.80,0.13,212)",
+      "rgbChannel": "34 211 238",
+      "hslChannel": "187.9 85.7% 53.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#06b6d4",
+      "rgb": "rgb(6,182,212)",
+      "hsl": "hsl(188.7,94.5%,42.7%)",
+      "oklch": "oklch(0.71,0.13,215)",
+      "rgbChannel": "6 182 212",
+      "hslChannel": "188.7 94.5% 42.7%"
+    },
+    {
+      "scale": 600,
+      "hex": "#0891b2",
+      "rgb": "rgb(8,145,178)",
+      "hsl": "hsl(191.6,91.4%,36.5%)",
+      "oklch": "oklch(0.61,0.11,222)",
+      "rgbChannel": "8 145 178",
+      "hslChannel": "191.6 91.4% 36.5%"
+    },
+    {
+      "scale": 700,
+      "hex": "#0e7490",
+      "rgb": "rgb(14,116,144)",
+      "hsl": "hsl(192.9,82.3%,31%)",
+      "oklch": "oklch(0.52,0.09,223)",
+      "rgbChannel": "14 116 144",
+      "hslChannel": "192.9 82.3% 31%"
+    },
+    {
+      "scale": 800,
+      "hex": "#155e75",
+      "rgb": "rgb(21,94,117)",
+      "hsl": "hsl(194.4,69.6%,27.1%)",
+      "oklch": "oklch(0.45,0.08,224)",
+      "rgbChannel": "21 94 117",
+      "hslChannel": "194.4 69.6% 27.1%"
+    },
+    {
+      "scale": 900,
+      "hex": "#164e63",
+      "rgb": "rgb(22,78,99)",
+      "hsl": "hsl(196.4,63.6%,23.7%)",
+      "oklch": "oklch(0.40,0.07,227)",
+      "rgbChannel": "22 78 99",
+      "hslChannel": "196.4 63.6% 23.7%"
+    },
+    {
+      "scale": 950,
+      "hex": "#083344",
+      "rgb": "rgb(8,51,68)",
+      "hsl": "hsl(197,78.9%,14.9%)",
+      "oklch": "oklch(0.30,0.05,230)",
+      "rgbChannel": "8 51 68",
+      "hslChannel": "197 78.9% 14.9%"
+    }
+  ],
+  "sky": [
+    {
+      "scale": 50,
+      "hex": "#f0f9ff",
+      "rgb": "rgb(240,249,255)",
+      "hsl": "hsl(204,100%,97.1%)",
+      "oklch": "oklch(0.98,0.01,237)",
+      "rgbChannel": "240 249 255",
+      "hslChannel": "204 100% 97.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#e0f2fe",
+      "rgb": "rgb(224,242,254)",
+      "hsl": "hsl(204,93.8%,93.7%)",
+      "oklch": "oklch(0.95,0.03,237)",
+      "rgbChannel": "224 242 254",
+      "hslChannel": "204 93.8% 93.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#bae6fd",
+      "rgb": "rgb(186,230,253)",
+      "hsl": "hsl(200.6,94.4%,86.1%)",
+      "oklch": "oklch(0.90,0.06,231)",
+      "rgbChannel": "186 230 253",
+      "hslChannel": "200.6 94.4% 86.1%"
+    },
+    {
+      "scale": 300,
+      "hex": "#7dd3fc",
+      "rgb": "rgb(125,211,252)",
+      "hsl": "hsl(199.4,95.5%,73.9%)",
+      "oklch": "oklch(0.83,0.10,230)",
+      "rgbChannel": "125 211 252",
+      "hslChannel": "199.4 95.5% 73.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#38bdf8",
+      "rgb": "rgb(56,189,248)",
+      "hsl": "hsl(198.4,93.2%,59.6%)",
+      "oklch": "oklch(0.75,0.14,233)",
+      "rgbChannel": "56 189 248",
+      "hslChannel": "198.4 93.2% 59.6%"
+    },
+    {
+      "scale": 500,
+      "hex": "#0ea5e9",
+      "rgb": "rgb(14,165,233)",
+      "hsl": "hsl(198.6,88.7%,48.4%)",
+      "oklch": "oklch(0.68,0.15,237)",
+      "rgbChannel": "14 165 233",
+      "hslChannel": "198.6 88.7% 48.4%"
+    },
+    {
+      "scale": 600,
+      "hex": "#0284c7",
+      "rgb": "rgb(2,132,199)",
+      "hsl": "hsl(200.4,98%,39.4%)",
+      "oklch": "oklch(0.59,0.14,242)",
+      "rgbChannel": "2 132 199",
+      "hslChannel": "200.4 98% 39.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#0369a1",
+      "rgb": "rgb(3,105,161)",
+      "hsl": "hsl(201.3,96.3%,32.2%)",
+      "oklch": "oklch(0.50,0.12,243)",
+      "rgbChannel": "3 105 161",
+      "hslChannel": "201.3 96.3% 32.2%"
+    },
+    {
+      "scale": 800,
+      "hex": "#075985",
+      "rgb": "rgb(7,89,133)",
+      "hsl": "hsl(201,90%,27.5%)",
+      "oklch": "oklch(0.44,0.10,241)",
+      "rgbChannel": "7 89 133",
+      "hslChannel": "201 90% 27.5%"
+    },
+    {
+      "scale": 900,
+      "hex": "#0c4a6e",
+      "rgb": "rgb(12,74,110)",
+      "hsl": "hsl(202,80.3%,23.9%)",
+      "oklch": "oklch(0.39,0.08,241)",
+      "rgbChannel": "12 74 110",
+      "hslChannel": "202 80.3% 23.9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#082f49",
+      "rgb": "rgb(8,47,73)",
+      "hsl": "hsl(204,80.2%,15.9%)",
+      "oklch": "oklch(0.29,0.06,243)",
+      "rgbChannel": "8 47 73",
+      "hslChannel": "204 80.2% 15.9%"
+    }
+  ],
+  "blue": [
+    {
+      "scale": 50,
+      "hex": "#eff6ff",
+      "rgb": "rgb(239,246,255)",
+      "hsl": "hsl(213.8,100%,96.9%)",
+      "oklch": "oklch(0.97,0.01,255)",
+      "rgbChannel": "239 246 255",
+      "hslChannel": "213.8 100% 96.9%"
+    },
+    {
+      "scale": 100,
+      "hex": "#dbeafe",
+      "rgb": "rgb(219,234,254)",
+      "hsl": "hsl(214.3,94.6%,92.7%)",
+      "oklch": "oklch(0.93,0.03,256)",
+      "rgbChannel": "219 234 254",
+      "hslChannel": "214.3 94.6% 92.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#bfdbfe",
+      "rgb": "rgb(191,219,254)",
+      "hsl": "hsl(213.3,96.9%,87.3%)",
+      "oklch": "oklch(0.88,0.06,254)",
+      "rgbChannel": "191 219 254",
+      "hslChannel": "213.3 96.9% 87.3%"
+    },
+    {
+      "scale": 300,
+      "hex": "#93c5fd",
+      "rgb": "rgb(147,197,253)",
+      "hsl": "hsl(211.7,96.4%,78.4%)",
+      "oklch": "oklch(0.81,0.10,252)",
+      "rgbChannel": "147 197 253",
+      "hslChannel": "211.7 96.4% 78.4%"
+    },
+    {
+      "scale": 400,
+      "hex": "#60a5fa",
+      "rgb": "rgb(96,165,250)",
+      "hsl": "hsl(213.1,93.9%,67.8%)",
+      "oklch": "oklch(0.71,0.14,255)",
+      "rgbChannel": "96 165 250",
+      "hslChannel": "213.1 93.9% 67.8%"
+    },
+    {
+      "scale": 500,
+      "hex": "#3b82f6",
+      "rgb": "rgb(59,130,246)",
+      "hsl": "hsl(217.2,91.2%,59.8%)",
+      "oklch": "oklch(0.62,0.19,260)",
+      "rgbChannel": "59 130 246",
+      "hslChannel": "217.2 91.2% 59.8%"
+    },
+    {
+      "scale": 600,
+      "hex": "#2563eb",
+      "rgb": "rgb(37,99,235)",
+      "hsl": "hsl(221.2,83.2%,53.3%)",
+      "oklch": "oklch(0.55,0.22,263)",
+      "rgbChannel": "37 99 235",
+      "hslChannel": "221.2 83.2% 53.3%"
+    },
+    {
+      "scale": 700,
+      "hex": "#1d4ed8",
+      "rgb": "rgb(29,78,216)",
+      "hsl": "hsl(224.3,76.3%,48%)",
+      "oklch": "oklch(0.49,0.22,264)",
+      "rgbChannel": "29 78 216",
+      "hslChannel": "224.3 76.3% 48%"
+    },
+    {
+      "scale": 800,
+      "hex": "#1e40af",
+      "rgb": "rgb(30,64,175)",
+      "hsl": "hsl(225.9,70.7%,40.2%)",
+      "oklch": "oklch(0.42,0.18,266)",
+      "rgbChannel": "30 64 175",
+      "hslChannel": "225.9 70.7% 40.2%"
+    },
+    {
+      "scale": 900,
+      "hex": "#1e3a8a",
+      "rgb": "rgb(30,58,138)",
+      "hsl": "hsl(224.4,64.3%,32.9%)",
+      "oklch": "oklch(0.38,0.14,266)",
+      "rgbChannel": "30 58 138",
+      "hslChannel": "224.4 64.3% 32.9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#172554",
+      "rgb": "rgb(23,37,84)",
+      "hsl": "hsl(226.2,57%,21%)",
+      "oklch": "oklch(0.28,0.09,268)",
+      "rgbChannel": "23 37 84",
+      "hslChannel": "226.2 57% 21%"
+    }
+  ],
+  "indigo": [
+    {
+      "scale": 50,
+      "hex": "#eef2ff",
+      "rgb": "rgb(238,242,255)",
+      "hsl": "hsl(225.9,100%,96.7%)",
+      "oklch": "oklch(0.96,0.02,272)",
+      "rgbChannel": "238 242 255",
+      "hslChannel": "225.9 100% 96.7%"
+    },
+    {
+      "scale": 100,
+      "hex": "#e0e7ff",
+      "rgb": "rgb(224,231,255)",
+      "hsl": "hsl(226.5,100%,93.9%)",
+      "oklch": "oklch(0.93,0.03,273)",
+      "rgbChannel": "224 231 255",
+      "hslChannel": "226.5 100% 93.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#c7d2fe",
+      "rgb": "rgb(199,210,254)",
+      "hsl": "hsl(228,96.5%,88.8%)",
+      "oklch": "oklch(0.87,0.06,274)",
+      "rgbChannel": "199 210 254",
+      "hslChannel": "228 96.5% 88.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#a5b4fc",
+      "rgb": "rgb(165,180,252)",
+      "hsl": "hsl(229.7,93.5%,81.8%)",
+      "oklch": "oklch(0.79,0.10,275)",
+      "rgbChannel": "165 180 252",
+      "hslChannel": "229.7 93.5% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#818cf8",
+      "rgb": "rgb(129,140,248)",
+      "hsl": "hsl(234.5,89.5%,73.9%)",
+      "oklch": "oklch(0.68,0.16,277)",
+      "rgbChannel": "129 140 248",
+      "hslChannel": "234.5 89.5% 73.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#6366f1",
+      "rgb": "rgb(99,102,241)",
+      "hsl": "hsl(238.7,83.5%,66.7%)",
+      "oklch": "oklch(0.59,0.20,277)",
+      "rgbChannel": "99 102 241",
+      "hslChannel": "238.7 83.5% 66.7%"
+    },
+    {
+      "scale": 600,
+      "hex": "#4f46e5",
+      "rgb": "rgb(79,70,229)",
+      "hsl": "hsl(243.4,75.4%,58.6%)",
+      "oklch": "oklch(0.51,0.23,277)",
+      "rgbChannel": "79 70 229",
+      "hslChannel": "243.4 75.4% 58.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#4338ca",
+      "rgb": "rgb(67,56,202)",
+      "hsl": "hsl(244.5,57.9%,50.6%)",
+      "oklch": "oklch(0.46,0.21,277)",
+      "rgbChannel": "67 56 202",
+      "hslChannel": "244.5 57.9% 50.6%"
+    },
+    {
+      "scale": 800,
+      "hex": "#3730a3",
+      "rgb": "rgb(55,48,163)",
+      "hsl": "hsl(243.7,54.5%,41.4%)",
+      "oklch": "oklch(0.40,0.18,277)",
+      "rgbChannel": "55 48 163",
+      "hslChannel": "243.7 54.5% 41.4%"
+    },
+    {
+      "scale": 900,
+      "hex": "#312e81",
+      "rgb": "rgb(49,46,129)",
+      "hsl": "hsl(242.2,47.4%,34.3%)",
+      "oklch": "oklch(0.36,0.14,279)",
+      "rgbChannel": "49 46 129",
+      "hslChannel": "242.2 47.4% 34.3%"
+    },
+    {
+      "scale": 950,
+      "hex": "#1e1b4b",
+      "rgb": "rgb(30,27,75)",
+      "hsl": "hsl(243.8,47.1%,20%)",
+      "oklch": "oklch(0.26,0.09,281)",
+      "rgbChannel": "30 27 75",
+      "hslChannel": "243.8 47.1% 20%"
+    }
+  ],
+  "violet": [
+    {
+      "scale": 50,
+      "hex": "#f5f3ff",
+      "rgb": "rgb(245,243,255)",
+      "hsl": "hsl(250,100%,97.6%)",
+      "oklch": "oklch(0.97,0.02,294)",
+      "rgbChannel": "245 243 255",
+      "hslChannel": "250 100% 97.6%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ede9fe",
+      "rgb": "rgb(237,233,254)",
+      "hsl": "hsl(251.4,91.3%,95.5%)",
+      "oklch": "oklch(0.94,0.03,295)",
+      "rgbChannel": "237 233 254",
+      "hslChannel": "251.4 91.3% 95.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#ddd6fe",
+      "rgb": "rgb(221,214,254)",
+      "hsl": "hsl(250.5,95.2%,91.8%)",
+      "oklch": "oklch(0.89,0.05,293)",
+      "rgbChannel": "221 214 254",
+      "hslChannel": "250.5 95.2% 91.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#c4b5fd",
+      "rgb": "rgb(196,181,253)",
+      "hsl": "hsl(252.5,94.7%,85.1%)",
+      "oklch": "oklch(0.81,0.10,294)",
+      "rgbChannel": "196 181 253",
+      "hslChannel": "252.5 94.7% 85.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a78bfa",
+      "rgb": "rgb(167,139,250)",
+      "hsl": "hsl(255.1,91.7%,76.3%)",
+      "oklch": "oklch(0.71,0.16,294)",
+      "rgbChannel": "167 139 250",
+      "hslChannel": "255.1 91.7% 76.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#8b5cf6",
+      "rgb": "rgb(139,92,246)",
+      "hsl": "hsl(258.3,89.5%,66.3%)",
+      "oklch": "oklch(0.61,0.22,293)",
+      "rgbChannel": "139 92 246",
+      "hslChannel": "258.3 89.5% 66.3%"
+    },
+    {
+      "scale": 600,
+      "hex": "#7c3aed",
+      "rgb": "rgb(124,58,237)",
+      "hsl": "hsl(262.1,83.3%,57.8%)",
+      "oklch": "oklch(0.54,0.25,293)",
+      "rgbChannel": "124 58 237",
+      "hslChannel": "262.1 83.3% 57.8%"
+    },
+    {
+      "scale": 700,
+      "hex": "#6d28d9",
+      "rgb": "rgb(109,40,217)",
+      "hsl": "hsl(263.4,70%,50.4%)",
+      "oklch": "oklch(0.49,0.24,293)",
+      "rgbChannel": "109 40 217",
+      "hslChannel": "263.4 70% 50.4%"
+    },
+    {
+      "scale": 800,
+      "hex": "#5b21b6",
+      "rgb": "rgb(91,33,182)",
+      "hsl": "hsl(263.4,69.3%,42.2%)",
+      "oklch": "oklch(0.43,0.21,293)",
+      "rgbChannel": "91 33 182",
+      "hslChannel": "263.4 69.3% 42.2%"
+    },
+    {
+      "scale": 900,
+      "hex": "#4c1d95",
+      "rgb": "rgb(76,29,149)",
+      "hsl": "hsl(263.5,67.4%,34.9%)",
+      "oklch": "oklch(0.38,0.18,294)",
+      "rgbChannel": "76 29 149",
+      "hslChannel": "263.5 67.4% 34.9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#1e1b4b",
+      "rgb": "rgb(46,16,101)",
+      "hsl": "hsl(261.2,72.6%,22.9%)",
+      "oklch": "oklch(0.28,0.14,291)",
+      "rgbChannel": "46 16 101",
+      "hslChannel": "261.2 72.6% 22.9%"
+    }
+  ],
+  "purple": [
+    {
+      "scale": 50,
+      "hex": "#faf5ff",
+      "rgb": "rgb(250,245,255)",
+      "hsl": "hsl(270,100%,98%)",
+      "oklch": "oklch(0.98,0.01,308)",
+      "rgbChannel": "250 245 255",
+      "hslChannel": "270 100% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f3e8ff",
+      "rgb": "rgb(243,232,255)",
+      "hsl": "hsl(268.7,100%,95.5%)",
+      "oklch": "oklch(0.95,0.03,307)",
+      "rgbChannel": "243 232 255",
+      "hslChannel": "268.7 100% 95.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e9d5ff",
+      "rgb": "rgb(233,213,255)",
+      "hsl": "hsl(268.6,100%,91.8%)",
+      "oklch": "oklch(0.90,0.06,307)",
+      "rgbChannel": "233 213 255",
+      "hslChannel": "268.6 100% 91.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d8b4fe",
+      "rgb": "rgb(216,180,254)",
+      "hsl": "hsl(269.2,97.4%,85.1%)",
+      "oklch": "oklch(0.83,0.11,306)",
+      "rgbChannel": "216 180 254",
+      "hslChannel": "269.2 97.4% 85.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#c084fc",
+      "rgb": "rgb(192,132,252)",
+      "hsl": "hsl(270,95.2%,75.3%)",
+      "oklch": "oklch(0.72,0.18,306)",
+      "rgbChannel": "192 132 252",
+      "hslChannel": "270 95.2% 75.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#a855f7",
+      "rgb": "rgb(168,85,247)",
+      "hsl": "hsl(270.7,91%,65.1%)",
+      "oklch": "oklch(0.63,0.23,304)",
+      "rgbChannel": "168 85 247",
+      "hslChannel": "270.7 91% 65.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#9333ea",
+      "rgb": "rgb(147,51,234)",
+      "hsl": "hsl(271.5,81.3%,55.9%)",
+      "oklch": "oklch(0.56,0.25,302)",
+      "rgbChannel": "147 51 234",
+      "hslChannel": "271.5 81.3% 55.9%"
+    },
+    {
+      "scale": 700,
+      "hex": "#7e22ce",
+      "rgb": "rgb(126,34,206)",
+      "hsl": "hsl(272.1,71.7%,47.1%)",
+      "oklch": "oklch(0.50,0.24,302)",
+      "rgbChannel": "126 34 206",
+      "hslChannel": "272.1 71.7% 47.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#6b21a8",
+      "rgb": "rgb(107,33,168)",
+      "hsl": "hsl(272.9,67.2%,39.4%)",
+      "oklch": "oklch(0.44,0.20,304)",
+      "rgbChannel": "107 33 168",
+      "hslChannel": "272.9 67.2% 39.4%"
+    },
+    {
+      "scale": 900,
+      "hex": "#581c87",
+      "rgb": "rgb(88,28,135)",
+      "hsl": "hsl(273.6,65.6%,32%)",
+      "oklch": "oklch(0.38,0.17,305)",
+      "rgbChannel": "88 28 135",
+      "hslChannel": "273.6 65.6% 32%"
+    },
+    {
+      "scale": 950,
+      "hex": "#3b0764",
+      "rgb": "rgb(59,7,100)",
+      "hsl": "hsl(273.5,86.9%,21%)",
+      "oklch": "oklch(0.29,0.14,303)",
+      "rgbChannel": "59 7 100",
+      "hslChannel": "273.5 86.9% 21%"
+    }
+  ],
+  "fuchsia": [
+    {
+      "scale": 50,
+      "hex": "#fdf4ff",
+      "rgb": "rgb(253,244,255)",
+      "hsl": "hsl(289.1,100%,97.8%)",
+      "oklch": "oklch(0.98,0.02,320)",
+      "rgbChannel": "253 244 255",
+      "hslChannel": "289.1 100% 97.8%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fae8ff",
+      "rgb": "rgb(250,232,255)",
+      "hsl": "hsl(287,100%,95.5%)",
+      "oklch": "oklch(0.95,0.04,319)",
+      "rgbChannel": "250 232 255",
+      "hslChannel": "287 100% 95.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#f5d0fe",
+      "rgb": "rgb(245,208,254)",
+      "hsl": "hsl(288.3,95.8%,90.6%)",
+      "oklch": "oklch(0.90,0.07,320)",
+      "rgbChannel": "245 208 254",
+      "hslChannel": "288.3 95.8% 90.6%"
+    },
+    {
+      "scale": 300,
+      "hex": "#f0abfc",
+      "rgb": "rgb(240,171,252)",
+      "hsl": "hsl(291.1,93.1%,82.9%)",
+      "oklch": "oklch(0.83,0.13,321)",
+      "rgbChannel": "240 171 252",
+      "hslChannel": "291.1 93.1% 82.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#e879f9",
+      "rgb": "rgb(232,121,249)",
+      "hsl": "hsl(292,91.4%,72.5%)",
+      "oklch": "oklch(0.75,0.21,322)",
+      "rgbChannel": "232 121 249",
+      "hslChannel": "292 91.4% 72.5%"
+    },
+    {
+      "scale": 500,
+      "hex": "#d946ef",
+      "rgb": "rgb(217,70,239)",
+      "hsl": "hsl(292.2,84.1%,60.6%)",
+      "oklch": "oklch(0.67,0.26,322)",
+      "rgbChannel": "217 70 239",
+      "hslChannel": "292.2 84.1% 60.6%"
+    },
+    {
+      "scale": 600,
+      "hex": "#c026d3",
+      "rgb": "rgb(192,38,211)",
+      "hsl": "hsl(293.4,69.5%,48.8%)",
+      "oklch": "oklch(0.59,0.26,323)",
+      "rgbChannel": "192 38 211",
+      "hslChannel": "293.4 69.5% 48.8%"
+    },
+    {
+      "scale": 700,
+      "hex": "#a21caf",
+      "rgb": "rgb(162,28,175)",
+      "hsl": "hsl(294.7,72.4%,39.8%)",
+      "oklch": "oklch(0.52,0.23,324)",
+      "rgbChannel": "162 28 175",
+      "hslChannel": "294.7 72.4% 39.8%"
+    },
+    {
+      "scale": 800,
+      "hex": "#86198f",
+      "rgb": "rgb(134,25,143)",
+      "hsl": "hsl(295.4,70.2%,32.9%)",
+      "oklch": "oklch(0.45,0.19,325)",
+      "rgbChannel": "134 25 143",
+      "hslChannel": "295.4 70.2% 32.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#701a75",
+      "rgb": "rgb(112,26,117)",
+      "hsl": "hsl(296.7,63.6%,28%)",
+      "oklch": "oklch(0.40,0.16,326)",
+      "rgbChannel": "112 26 117",
+      "hslChannel": "296.7 63.6% 28%"
+    },
+    {
+      "scale": 950,
+      "hex": "#4a044e",
+      "rgb": "rgb(74,4,78)",
+      "hsl": "hsl(296.8,90.2%,16.1%)",
+      "oklch": "oklch(0.29,0.13,326)",
+      "rgbChannel": "74 4 78",
+      "hslChannel": "296.8 90.2% 16.1%"
+    }
+  ],
+  "pink": [
+    {
+      "scale": 50,
+      "hex": "#fdf2f8",
+      "rgb": "rgb(253,242,248)",
+      "hsl": "hsl(327.3,73.3%,97.1%)",
+      "oklch": "oklch(0.97,0.01,343)",
+      "rgbChannel": "253 242 248",
+      "hslChannel": "327.3 73.3% 97.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fce7f3",
+      "rgb": "rgb(252,231,243)",
+      "hsl": "hsl(325.7,77.8%,94.7%)",
+      "oklch": "oklch(0.95,0.03,342)",
+      "rgbChannel": "252 231 243",
+      "hslChannel": "325.7 77.8% 94.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fbcfe8",
+      "rgb": "rgb(251,207,232)",
+      "hsl": "hsl(325.9,84.6%,89.8%)",
+      "oklch": "oklch(0.90,0.06,343)",
+      "rgbChannel": "251 207 232",
+      "hslChannel": "325.9 84.6% 89.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#f9a8d4",
+      "rgb": "rgb(249,168,212)",
+      "hsl": "hsl(327.4,87.1%,81.8%)",
+      "oklch": "oklch(0.82,0.11,346)",
+      "rgbChannel": "249 168 212",
+      "hslChannel": "327.4 87.1% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#f472b6",
+      "rgb": "rgb(244,114,182)",
+      "hsl": "hsl(328.6,85.5%,70.2%)",
+      "oklch": "oklch(0.73,0.18,350)",
+      "rgbChannel": "244 114 182",
+      "hslChannel": "328.6 85.5% 70.2%"
+    },
+    {
+      "scale": 500,
+      "hex": "#ec4899",
+      "rgb": "rgb(236,72,153)",
+      "hsl": "hsl(330.4,81.2%,60.4%)",
+      "oklch": "oklch(0.66,0.21,354)",
+      "rgbChannel": "236 72 153",
+      "hslChannel": "330.4 81.2% 60.4%"
+    },
+    {
+      "scale": 600,
+      "hex": "#db2777",
+      "rgb": "rgb(219,39,119)",
+      "hsl": "hsl(333.3,71.4%,50.6%)",
+      "oklch": "oklch(0.59,0.22,1)",
+      "rgbChannel": "219 39 119",
+      "hslChannel": "333.3 71.4% 50.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#be185d",
+      "rgb": "rgb(190,24,93)",
+      "hsl": "hsl(335.1,77.6%,42%)",
+      "oklch": "oklch(0.52,0.20,4)",
+      "rgbChannel": "190 24 93",
+      "hslChannel": "335.1 77.6% 42%"
+    },
+    {
+      "scale": 800,
+      "hex": "#9d174d",
+      "rgb": "rgb(157,23,77)",
+      "hsl": "hsl(335.8,74.4%,35.3%)",
+      "oklch": "oklch(0.46,0.17,4)",
+      "rgbChannel": "157 23 77",
+      "hslChannel": "335.8 74.4% 35.3%"
+    },
+    {
+      "scale": 900,
+      "hex": "#831843",
+      "rgb": "rgb(131,24,67)",
+      "hsl": "hsl(335.9,69%,30.4%)",
+      "oklch": "oklch(0.41,0.14,2)",
+      "rgbChannel": "131 24 67",
+      "hslChannel": "335.9 69% 30.4%"
+    },
+    {
+      "scale": 950,
+      "hex": "#500724",
+      "rgb": "rgb(80,7,36)",
+      "hsl": "hsl(336.2,83.9%,17.1%)",
+      "oklch": "oklch(0.28,0.10,4)",
+      "rgbChannel": "80 7 36",
+      "hslChannel": "336.2 83.9% 17.1%"
+    }
+  ],
+  "rose": [
+    {
+      "scale": 50,
+      "hex": "#fff1f2",
+      "rgb": "rgb(255,241,242)",
+      "hsl": "hsl(355.7,100%,97.3%)",
+      "oklch": "oklch(0.97,0.02,12)",
+      "rgbChannel": "255 241 242",
+      "hslChannel": "355.7 100% 97.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ffe4e6",
+      "rgb": "rgb(255,228,230)",
+      "hsl": "hsl(355.6,100%,94.7%)",
+      "oklch": "oklch(0.94,0.03,13)",
+      "rgbChannel": "255 228 230",
+      "hslChannel": "355.6 100% 94.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fecdd3",
+      "rgb": "rgb(254,205,211)",
+      "hsl": "hsl(352.7,96.1%,90%)",
+      "oklch": "oklch(0.89,0.06,10)",
+      "rgbChannel": "254 205 211",
+      "hslChannel": "352.7 96.1% 90%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fda4af",
+      "rgb": "rgb(253,164,175)",
+      "hsl": "hsl(352.6,95.7%,81.8%)",
+      "oklch": "oklch(0.81,0.11,12)",
+      "rgbChannel": "253 164 175",
+      "hslChannel": "352.6 95.7% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#fb7185",
+      "rgb": "rgb(251,113,133)",
+      "hsl": "hsl(351.3,94.5%,71.4%)",
+      "oklch": "oklch(0.72,0.17,13)",
+      "rgbChannel": "251 113 133",
+      "hslChannel": "351.3 94.5% 71.4%"
+    },
+    {
+      "scale": 500,
+      "hex": "#f43f5e",
+      "rgb": "rgb(244,63,94)",
+      "hsl": "hsl(349.7,89.2%,60.2%)",
+      "oklch": "oklch(0.65,0.22,16)",
+      "rgbChannel": "244 63 94",
+      "hslChannel": "349.7 89.2% 60.2%"
+    },
+    {
+      "scale": 600,
+      "hex": "#e11d48",
+      "rgb": "rgb(225,29,72)",
+      "hsl": "hsl(346.8,77.2%,49.8%)",
+      "oklch": "oklch(0.59,0.22,18)",
+      "rgbChannel": "225 29 72",
+      "hslChannel": "346.8 77.2% 49.8%"
+    },
+    {
+      "scale": 700,
+      "hex": "#be123c",
+      "rgb": "rgb(190,18,60)",
+      "hsl": "hsl(345.3,82.7%,40.8%)",
+      "oklch": "oklch(0.51,0.20,17)",
+      "rgbChannel": "190 18 60",
+      "hslChannel": "345.3 82.7% 40.8%"
+    },
+    {
+      "scale": 800,
+      "hex": "#9f1239",
+      "rgb": "rgb(159,18,57)",
+      "hsl": "hsl(343.4,79.7%,34.7%)",
+      "oklch": "oklch(0.45,0.17,14)",
+      "rgbChannel": "159 18 57",
+      "hslChannel": "343.4 79.7% 34.7%"
+    },
+    {
+      "scale": 900,
+      "hex": "#881337",
+      "rgb": "rgb(136,19,55)",
+      "hsl": "hsl(341.5,75.5%,30.4%)",
+      "oklch": "oklch(0.41,0.15,10)",
+      "rgbChannel": "136 19 55",
+      "hslChannel": "341.5 75.5% 30.4%"
+    },
+    {
+      "scale": 950,
+      "hex": "#4c0519",
+      "rgb": "rgb(76,5,25)",
+      "hsl": "hsl(343.1,87.7%,15.9%)",
+      "oklch": "oklch(0.27,0.10,12)",
+      "rgbChannel": "76 5 25",
+      "hslChannel": "343.1 87.7% 15.9%"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/colors/neutral.json b/apps/v4/public/r/colors/neutral.json
new file mode 100644
index 00000000000..56267dfb4a8
--- /dev/null
+++ b/apps/v4/public/r/colors/neutral.json
@@ -0,0 +1,171 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "neutral-950",
+      "card": "white",
+      "card-foreground": "neutral-950",
+      "popover": "white",
+      "popover-foreground": "neutral-950",
+      "primary": "neutral-900",
+      "primary-foreground": "neutral-50",
+      "secondary": "neutral-100",
+      "secondary-foreground": "neutral-900",
+      "muted": "neutral-100",
+      "muted-foreground": "neutral-500",
+      "accent": "neutral-100",
+      "accent-foreground": "neutral-900",
+      "destructive": "red-500",
+      "destructive-foreground": "neutral-50",
+      "border": "neutral-200",
+      "input": "neutral-200",
+      "ring": "neutral-950"
+    },
+    "dark": {
+      "background": "neutral-950",
+      "foreground": "neutral-50",
+      "card": "neutral-950",
+      "card-foreground": "neutral-50",
+      "popover": "neutral-950",
+      "popover-foreground": "neutral-50",
+      "primary": "neutral-50",
+      "primary-foreground": "neutral-900",
+      "secondary": "neutral-800",
+      "secondary-foreground": "neutral-50",
+      "muted": "neutral-800",
+      "muted-foreground": "neutral-400",
+      "accent": "neutral-800",
+      "accent-foreground": "neutral-50",
+      "destructive": "red-900",
+      "destructive-foreground": "neutral-50",
+      "border": "neutral-800",
+      "input": "neutral-800",
+      "ring": "neutral-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "0 0% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "0 0% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "0 0% 3.9%",
+      "primary": "0 0% 9%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "0 0% 96.1%",
+      "secondary-foreground": "0 0% 9%",
+      "muted": "0 0% 96.1%",
+      "muted-foreground": "0 0% 45.1%",
+      "accent": "0 0% 96.1%",
+      "accent-foreground": "0 0% 9%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 89.8%",
+      "input": "0 0% 89.8%",
+      "ring": "0 0% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "0 0% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "0 0% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "0 0% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "0 0% 9%",
+      "secondary": "0 0% 14.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "0 0% 14.9%",
+      "muted-foreground": "0 0% 63.9%",
+      "accent": "0 0% 14.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 14.9%",
+      "input": "0 0% 14.9%",
+      "ring": "0 0% 83.1%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.145 0 0)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.145 0 0)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.145 0 0)",
+      "primary": "oklch(0.205 0 0)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.97 0 0)",
+      "secondary-foreground": "oklch(0.205 0 0)",
+      "muted": "oklch(0.97 0 0)",
+      "muted-foreground": "oklch(0.556 0 0)",
+      "accent": "oklch(0.97 0 0)",
+      "accent-foreground": "oklch(0.205 0 0)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.922 0 0)",
+      "input": "oklch(0.922 0 0)",
+      "ring": "oklch(0.708 0 0)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.145 0 0)",
+      "sidebar-primary": "oklch(0.205 0 0)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.97 0 0)",
+      "sidebar-accent-foreground": "oklch(0.205 0 0)",
+      "sidebar-border": "oklch(0.922 0 0)",
+      "sidebar-ring": "oklch(0.708 0 0)"
+    },
+    "dark": {
+      "background": "oklch(0.145 0 0)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.205 0 0)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.205 0 0)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.922 0 0)",
+      "primary-foreground": "oklch(0.205 0 0)",
+      "secondary": "oklch(0.269 0 0)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.269 0 0)",
+      "muted-foreground": "oklch(0.708 0 0)",
+      "accent": "oklch(0.269 0 0)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.556 0 0)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.205 0 0)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.269 0 0)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.556 0 0)"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n    --ring: 0 0% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n    --ring: 0 0% 83.1%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/colors/slate.json b/apps/v4/public/r/colors/slate.json
new file mode 100644
index 00000000000..88c6ca0f4a8
--- /dev/null
+++ b/apps/v4/public/r/colors/slate.json
@@ -0,0 +1,171 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "slate-950",
+      "card": "white",
+      "card-foreground": "slate-950",
+      "popover": "white",
+      "popover-foreground": "slate-950",
+      "primary": "slate-900",
+      "primary-foreground": "slate-50",
+      "secondary": "slate-100",
+      "secondary-foreground": "slate-900",
+      "muted": "slate-100",
+      "muted-foreground": "slate-500",
+      "accent": "slate-100",
+      "accent-foreground": "slate-900",
+      "destructive": "red-500",
+      "destructive-foreground": "slate-50",
+      "border": "slate-200",
+      "input": "slate-200",
+      "ring": "slate-950"
+    },
+    "dark": {
+      "background": "slate-950",
+      "foreground": "slate-50",
+      "card": "slate-950",
+      "card-foreground": "slate-50",
+      "popover": "slate-950",
+      "popover-foreground": "slate-50",
+      "primary": "slate-50",
+      "primary-foreground": "slate-900",
+      "secondary": "slate-800",
+      "secondary-foreground": "slate-50",
+      "muted": "slate-800",
+      "muted-foreground": "slate-400",
+      "accent": "slate-800",
+      "accent-foreground": "slate-50",
+      "destructive": "red-900",
+      "destructive-foreground": "slate-50",
+      "border": "slate-800",
+      "input": "slate-800",
+      "ring": "slate-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "222.2 84% 4.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "222.2 84% 4.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "222.2 84% 4.9%",
+      "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%",
+      "muted": "210 40% 96.1%",
+      "muted-foreground": "215.4 16.3% 46.9%",
+      "accent": "210 40% 96.1%",
+      "accent-foreground": "222.2 47.4% 11.2%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "214.3 31.8% 91.4%",
+      "input": "214.3 31.8% 91.4%",
+      "ring": "222.2 84% 4.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "222.2 84% 4.9%",
+      "foreground": "210 40% 98%",
+      "card": "222.2 84% 4.9%",
+      "card-foreground": "210 40% 98%",
+      "popover": "222.2 84% 4.9%",
+      "popover-foreground": "210 40% 98%",
+      "primary": "210 40% 98%",
+      "primary-foreground": "222.2 47.4% 11.2%",
+      "secondary": "217.2 32.6% 17.5%",
+      "secondary-foreground": "210 40% 98%",
+      "muted": "217.2 32.6% 17.5%",
+      "muted-foreground": "215 20.2% 65.1%",
+      "accent": "217.2 32.6% 17.5%",
+      "accent-foreground": "210 40% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "217.2 32.6% 17.5%",
+      "input": "217.2 32.6% 17.5%",
+      "ring": "212.7 26.8% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.129 0.042 264.695)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.129 0.042 264.695)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.129 0.042 264.695)",
+      "primary": "oklch(0.208 0.042 265.755)",
+      "primary-foreground": "oklch(0.984 0.003 247.858)",
+      "secondary": "oklch(0.968 0.007 247.896)",
+      "secondary-foreground": "oklch(0.208 0.042 265.755)",
+      "muted": "oklch(0.968 0.007 247.896)",
+      "muted-foreground": "oklch(0.554 0.046 257.417)",
+      "accent": "oklch(0.968 0.007 247.896)",
+      "accent-foreground": "oklch(0.208 0.042 265.755)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.929 0.013 255.508)",
+      "input": "oklch(0.929 0.013 255.508)",
+      "ring": "oklch(0.704 0.04 256.788)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.984 0.003 247.858)",
+      "sidebar-foreground": "oklch(0.129 0.042 264.695)",
+      "sidebar-primary": "oklch(0.208 0.042 265.755)",
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-accent": "oklch(0.968 0.007 247.896)",
+      "sidebar-accent-foreground": "oklch(0.208 0.042 265.755)",
+      "sidebar-border": "oklch(0.929 0.013 255.508)",
+      "sidebar-ring": "oklch(0.704 0.04 256.788)"
+    },
+    "dark": {
+      "background": "oklch(0.129 0.042 264.695)",
+      "foreground": "oklch(0.984 0.003 247.858)",
+      "card": "oklch(0.208 0.042 265.755)",
+      "card-foreground": "oklch(0.984 0.003 247.858)",
+      "popover": "oklch(0.208 0.042 265.755)",
+      "popover-foreground": "oklch(0.984 0.003 247.858)",
+      "primary": "oklch(0.929 0.013 255.508)",
+      "primary-foreground": "oklch(0.208 0.042 265.755)",
+      "secondary": "oklch(0.279 0.041 260.031)",
+      "secondary-foreground": "oklch(0.984 0.003 247.858)",
+      "muted": "oklch(0.279 0.041 260.031)",
+      "muted-foreground": "oklch(0.704 0.04 256.788)",
+      "accent": "oklch(0.279 0.041 260.031)",
+      "accent-foreground": "oklch(0.984 0.003 247.858)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.551 0.027 264.364)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.208 0.042 265.755)",
+      "sidebar-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-accent": "oklch(0.279 0.041 260.031)",
+      "sidebar-accent-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.551 0.027 264.364)"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/colors/stone.json b/apps/v4/public/r/colors/stone.json
new file mode 100644
index 00000000000..2648208dce4
--- /dev/null
+++ b/apps/v4/public/r/colors/stone.json
@@ -0,0 +1,171 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "stone-950",
+      "card": "white",
+      "card-foreground": "stone-950",
+      "popover": "white",
+      "popover-foreground": "stone-950",
+      "primary": "stone-900",
+      "primary-foreground": "stone-50",
+      "secondary": "stone-100",
+      "secondary-foreground": "stone-900",
+      "muted": "stone-100",
+      "muted-foreground": "stone-500",
+      "accent": "stone-100",
+      "accent-foreground": "stone-900",
+      "destructive": "red-500",
+      "destructive-foreground": "stone-50",
+      "border": "stone-200",
+      "input": "stone-200",
+      "ring": "stone-950"
+    },
+    "dark": {
+      "background": "stone-950",
+      "foreground": "stone-50",
+      "card": "stone-950",
+      "card-foreground": "stone-50",
+      "popover": "stone-950",
+      "popover-foreground": "stone-50",
+      "primary": "stone-50",
+      "primary-foreground": "stone-900",
+      "secondary": "stone-800",
+      "secondary-foreground": "stone-50",
+      "muted": "stone-800",
+      "muted-foreground": "stone-400",
+      "accent": "stone-800",
+      "accent-foreground": "stone-50",
+      "destructive": "red-900",
+      "destructive-foreground": "stone-50",
+      "border": "stone-800",
+      "input": "stone-800",
+      "ring": "stone-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "20 14.3% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "20 14.3% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "20 14.3% 4.1%",
+      "primary": "24 9.8% 10%",
+      "primary-foreground": "60 9.1% 97.8%",
+      "secondary": "60 4.8% 95.9%",
+      "secondary-foreground": "24 9.8% 10%",
+      "muted": "60 4.8% 95.9%",
+      "muted-foreground": "25 5.3% 44.7%",
+      "accent": "60 4.8% 95.9%",
+      "accent-foreground": "24 9.8% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "20 5.9% 90%",
+      "input": "20 5.9% 90%",
+      "ring": "20 14.3% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "20 14.3% 4.1%",
+      "foreground": "60 9.1% 97.8%",
+      "card": "20 14.3% 4.1%",
+      "card-foreground": "60 9.1% 97.8%",
+      "popover": "20 14.3% 4.1%",
+      "popover-foreground": "60 9.1% 97.8%",
+      "primary": "60 9.1% 97.8%",
+      "primary-foreground": "24 9.8% 10%",
+      "secondary": "12 6.5% 15.1%",
+      "secondary-foreground": "60 9.1% 97.8%",
+      "muted": "12 6.5% 15.1%",
+      "muted-foreground": "24 5.4% 63.9%",
+      "accent": "12 6.5% 15.1%",
+      "accent-foreground": "60 9.1% 97.8%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "12 6.5% 15.1%",
+      "input": "12 6.5% 15.1%",
+      "ring": "24 5.7% 82.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.147 0.004 49.25)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.147 0.004 49.25)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.147 0.004 49.25)",
+      "primary": "oklch(0.216 0.006 56.043)",
+      "primary-foreground": "oklch(0.985 0.001 106.423)",
+      "secondary": "oklch(0.97 0.001 106.424)",
+      "secondary-foreground": "oklch(0.216 0.006 56.043)",
+      "muted": "oklch(0.97 0.001 106.424)",
+      "muted-foreground": "oklch(0.553 0.013 58.071)",
+      "accent": "oklch(0.97 0.001 106.424)",
+      "accent-foreground": "oklch(0.216 0.006 56.043)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.923 0.003 48.717)",
+      "input": "oklch(0.923 0.003 48.717)",
+      "ring": "oklch(0.709 0.01 56.259)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0.001 106.423)",
+      "sidebar-foreground": "oklch(0.147 0.004 49.25)",
+      "sidebar-primary": "oklch(0.216 0.006 56.043)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.97 0.001 106.424)",
+      "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)",
+      "sidebar-border": "oklch(0.923 0.003 48.717)",
+      "sidebar-ring": "oklch(0.709 0.01 56.259)"
+    },
+    "dark": {
+      "background": "oklch(0.147 0.004 49.25)",
+      "foreground": "oklch(0.985 0.001 106.423)",
+      "card": "oklch(0.216 0.006 56.043)",
+      "card-foreground": "oklch(0.985 0.001 106.423)",
+      "popover": "oklch(0.216 0.006 56.043)",
+      "popover-foreground": "oklch(0.985 0.001 106.423)",
+      "primary": "oklch(0.923 0.003 48.717)",
+      "primary-foreground": "oklch(0.216 0.006 56.043)",
+      "secondary": "oklch(0.268 0.007 34.298)",
+      "secondary-foreground": "oklch(0.985 0.001 106.423)",
+      "muted": "oklch(0.268 0.007 34.298)",
+      "muted-foreground": "oklch(0.709 0.01 56.259)",
+      "accent": "oklch(0.268 0.007 34.298)",
+      "accent-foreground": "oklch(0.985 0.001 106.423)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.553 0.013 58.071)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.216 0.006 56.043)",
+      "sidebar-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.268 0.007 34.298)",
+      "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.553 0.013 58.071)"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n    --ring: 20 14.3% 4.1%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n    --ring: 24 5.7% 82.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/colors/zinc.json b/apps/v4/public/r/colors/zinc.json
new file mode 100644
index 00000000000..89321e847cf
--- /dev/null
+++ b/apps/v4/public/r/colors/zinc.json
@@ -0,0 +1,171 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "zinc-950",
+      "card": "white",
+      "card-foreground": "zinc-950",
+      "popover": "white",
+      "popover-foreground": "zinc-950",
+      "primary": "zinc-900",
+      "primary-foreground": "zinc-50",
+      "secondary": "zinc-100",
+      "secondary-foreground": "zinc-900",
+      "muted": "zinc-100",
+      "muted-foreground": "zinc-500",
+      "accent": "zinc-100",
+      "accent-foreground": "zinc-900",
+      "destructive": "red-500",
+      "destructive-foreground": "zinc-50",
+      "border": "zinc-200",
+      "input": "zinc-200",
+      "ring": "zinc-950"
+    },
+    "dark": {
+      "background": "zinc-950",
+      "foreground": "zinc-50",
+      "card": "zinc-950",
+      "card-foreground": "zinc-50",
+      "popover": "zinc-950",
+      "popover-foreground": "zinc-50",
+      "primary": "zinc-50",
+      "primary-foreground": "zinc-900",
+      "secondary": "zinc-800",
+      "secondary-foreground": "zinc-50",
+      "muted": "zinc-800",
+      "muted-foreground": "zinc-400",
+      "accent": "zinc-800",
+      "accent-foreground": "zinc-50",
+      "destructive": "red-900",
+      "destructive-foreground": "zinc-50",
+      "border": "zinc-800",
+      "input": "zinc-800",
+      "ring": "zinc-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "240 5.9% 10%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 46.1%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "240 10% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "240 5.9% 10%",
+      "secondary": "240 3.7% 15.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "240 4.9% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.141 0.005 285.823)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.141 0.005 285.823)",
+      "primary": "oklch(0.21 0.006 285.885)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.967 0.001 286.375)",
+      "secondary-foreground": "oklch(0.21 0.006 285.885)",
+      "muted": "oklch(0.967 0.001 286.375)",
+      "muted-foreground": "oklch(0.552 0.016 285.938)",
+      "accent": "oklch(0.967 0.001 286.375)",
+      "accent-foreground": "oklch(0.21 0.006 285.885)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.92 0.004 286.32)",
+      "input": "oklch(0.92 0.004 286.32)",
+      "ring": "oklch(0.705 0.015 286.067)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
+      "sidebar-primary": "oklch(0.21 0.006 285.885)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.967 0.001 286.375)",
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+      "sidebar-border": "oklch(0.92 0.004 286.32)",
+      "sidebar-ring": "oklch(0.705 0.015 286.067)"
+    },
+    "dark": {
+      "background": "oklch(0.141 0.005 285.823)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.21 0.006 285.885)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.21 0.006 285.885)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.92 0.004 286.32)",
+      "primary-foreground": "oklch(0.21 0.006 285.885)",
+      "secondary": "oklch(0.274 0.006 286.033)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.274 0.006 286.033)",
+      "muted-foreground": "oklch(0.705 0.015 286.067)",
+      "accent": "oklch(0.274 0.006 286.033)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.552 0.016 285.938)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.21 0.006 285.885)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.274 0.006 286.033)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.552 0.016 285.938)"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n    --ring: 240 10% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n    --ring: 240 4.9% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/icons/index.json b/apps/v4/public/r/icons/index.json
new file mode 100644
index 00000000000..bf65dca463d
--- /dev/null
+++ b/apps/v4/public/r/icons/index.json
@@ -0,0 +1,150 @@
+{
+  "AlertCircle": {
+    "lucide": "AlertCircle",
+    "radix": "ExclamationTriangleIcon"
+  },
+  "ArrowLeft": {
+    "lucide": "ArrowLeft",
+    "radix": "ArrowLeftIcon"
+  },
+  "ArrowRight": {
+    "lucide": "ArrowRight",
+    "radix": "ArrowRightIcon"
+  },
+  "ArrowUpDown": {
+    "lucide": "ArrowUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "BellRing": {
+    "lucide": "BellRing",
+    "radix": "BellIcon"
+  },
+  "Bold": {
+    "lucide": "Bold",
+    "radix": "FontBoldIcon"
+  },
+  "Calculator": {
+    "lucide": "Calculator",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "Calendar": {
+    "lucide": "Calendar",
+    "radix": "CalendarIcon"
+  },
+  "Check": {
+    "lucide": "Check",
+    "radix": "CheckIcon"
+  },
+  "ChevronDown": {
+    "lucide": "ChevronDown",
+    "radix": "ChevronDownIcon"
+  },
+  "ChevronLeft": {
+    "lucide": "ChevronLeft",
+    "radix": "ChevronLeftIcon"
+  },
+  "ChevronRight": {
+    "lucide": "ChevronRight",
+    "radix": "ChevronRightIcon"
+  },
+  "ChevronUp": {
+    "lucide": "ChevronUp",
+    "radix": "ChevronUpIcon"
+  },
+  "ChevronsUpDown": {
+    "lucide": "ChevronsUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "Circle": {
+    "lucide": "Circle",
+    "radix": "DotFilledIcon"
+  },
+  "Copy": {
+    "lucide": "Copy",
+    "radix": "CopyIcon"
+  },
+  "CreditCard": {
+    "lucide": "CreditCard",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "GripVertical": {
+    "lucide": "GripVertical",
+    "radix": "DragHandleDots2Icon"
+  },
+  "Italic": {
+    "lucide": "Italic",
+    "radix": "FontItalicIcon"
+  },
+  "Loader2": {
+    "lucide": "Loader2",
+    "radix": "ReloadIcon"
+  },
+  "Mail": {
+    "lucide": "Mail",
+    "radix": "EnvelopeClosedIcon"
+  },
+  "MailOpen": {
+    "lucide": "MailOpen",
+    "radix": "EnvelopeOpenIcon"
+  },
+  "Minus": {
+    "lucide": "Minus",
+    "radix": "MinusIcon"
+  },
+  "Moon": {
+    "lucide": "Moon",
+    "radix": "MoonIcon"
+  },
+  "MoreHorizontal": {
+    "lucide": "MoreHorizontal",
+    "radix": "DotsHorizontalIcon"
+  },
+  "PanelLeft": {
+    "lucide": "PanelLeft",
+    "radix": "ViewVerticalIcon"
+  },
+  "Plus": {
+    "lucide": "Plus",
+    "radix": "PlusIcon"
+  },
+  "Search": {
+    "lucide": "Search",
+    "radix": "MagnifyingGlassIcon"
+  },
+  "Send": {
+    "lucide": "Send",
+    "radix": "PaperPlaneIcon"
+  },
+  "Settings": {
+    "lucide": "Settings",
+    "radix": "GearIcon"
+  },
+  "Slash": {
+    "lucide": "Slash",
+    "radix": "SlashIcon"
+  },
+  "Smile": {
+    "lucide": "Smile",
+    "radix": "FaceIcon"
+  },
+  "Sun": {
+    "lucide": "Sun",
+    "radix": "SunIcon"
+  },
+  "Terminal": {
+    "lucide": "Terminal",
+    "radix": "RocketIcon"
+  },
+  "Underline": {
+    "lucide": "Underline",
+    "radix": "UnderlineIcon"
+  },
+  "User": {
+    "lucide": "User",
+    "radix": "PersonIcon"
+  },
+  "X": {
+    "lucide": "X",
+    "radix": "Cross2Icon"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/index.json b/apps/v4/public/r/index.json
new file mode 100644
index 00000000000..0e193077ef0
--- /dev/null
+++ b/apps/v4/public/r/index.json
@@ -0,0 +1,716 @@
+[
+  {
+    "name": "accordion",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-accordion"
+    ],
+    "files": [
+      {
+        "path": "ui/accordion.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "tailwind": {
+      "config": {
+        "theme": {
+          "extend": {
+            "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"
+            }
+          }
+        }
+      }
+    }
+  },
+  {
+    "name": "alert",
+    "type": "registry:ui",
+    "files": [
+      {
+        "path": "ui/alert.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "alert-dialog",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-alert-dialog"
+    ],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/alert-dialog.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "aspect-ratio",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-aspect-ratio"
+    ],
+    "files": [
+      {
+        "path": "ui/aspect-ratio.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "avatar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-avatar"
+    ],
+    "files": [
+      {
+        "path": "ui/avatar.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "badge",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-slot"
+    ],
+    "files": [
+      {
+        "path": "ui/badge.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "breadcrumb",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-slot"
+    ],
+    "files": [
+      {
+        "path": "ui/breadcrumb.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "button",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-slot"
+    ],
+    "files": [
+      {
+        "path": "ui/button.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "calendar",
+    "type": "registry:ui",
+    "dependencies": [
+      "react-day-picker@latest",
+      "date-fns"
+    ],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/calendar.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "card",
+    "type": "registry:ui",
+    "files": [
+      {
+        "path": "ui/card.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "carousel",
+    "type": "registry:ui",
+    "dependencies": [
+      "embla-carousel-react"
+    ],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/carousel.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "chart",
+    "type": "registry:ui",
+    "dependencies": [
+      "recharts@2.15.4",
+      "lucide-react"
+    ],
+    "registryDependencies": [
+      "card"
+    ],
+    "files": [
+      {
+        "path": "ui/chart.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "checkbox",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-checkbox"
+    ],
+    "files": [
+      {
+        "path": "ui/checkbox.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "collapsible",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-collapsible"
+    ],
+    "files": [
+      {
+        "path": "ui/collapsible.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "command",
+    "type": "registry:ui",
+    "dependencies": [
+      "cmdk"
+    ],
+    "registryDependencies": [
+      "dialog"
+    ],
+    "files": [
+      {
+        "path": "ui/command.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "context-menu",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-context-menu"
+    ],
+    "files": [
+      {
+        "path": "ui/context-menu.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "dialog",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-dialog"
+    ],
+    "files": [
+      {
+        "path": "ui/dialog.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "drawer",
+    "type": "registry:ui",
+    "dependencies": [
+      "vaul",
+      "@radix-ui/react-dialog"
+    ],
+    "files": [
+      {
+        "path": "ui/drawer.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "dropdown-menu",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "ui/dropdown-menu.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "form",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-label",
+      "@radix-ui/react-slot",
+      "@hookform/resolvers",
+      "zod",
+      "react-hook-form"
+    ],
+    "registryDependencies": [
+      "button",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "ui/form.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "hover-card",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-hover-card"
+    ],
+    "files": [
+      {
+        "path": "ui/hover-card.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "input",
+    "type": "registry:ui",
+    "files": [
+      {
+        "path": "ui/input.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "input-otp",
+    "type": "registry:ui",
+    "dependencies": [
+      "input-otp"
+    ],
+    "files": [
+      {
+        "path": "ui/input-otp.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "label",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-label"
+    ],
+    "files": [
+      {
+        "path": "ui/label.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "menubar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-menubar"
+    ],
+    "files": [
+      {
+        "path": "ui/menubar.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "navigation-menu",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-navigation-menu"
+    ],
+    "files": [
+      {
+        "path": "ui/navigation-menu.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "pagination",
+    "type": "registry:ui",
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/pagination.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "popover",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-popover"
+    ],
+    "files": [
+      {
+        "path": "ui/popover.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "progress",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-progress"
+    ],
+    "files": [
+      {
+        "path": "ui/progress.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "radio-group",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-radio-group"
+    ],
+    "files": [
+      {
+        "path": "ui/radio-group.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "resizable",
+    "type": "registry:ui",
+    "dependencies": [
+      "react-resizable-panels"
+    ],
+    "files": [
+      {
+        "path": "ui/resizable.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "scroll-area",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-scroll-area"
+    ],
+    "files": [
+      {
+        "path": "ui/scroll-area.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "select",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-select"
+    ],
+    "files": [
+      {
+        "path": "ui/select.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "separator",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-separator"
+    ],
+    "files": [
+      {
+        "path": "ui/separator.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "sheet",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-dialog"
+    ],
+    "files": [
+      {
+        "path": "ui/sheet.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "sidebar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-slot",
+      "class-variance-authority",
+      "lucide-react"
+    ],
+    "registryDependencies": [
+      "button",
+      "separator",
+      "sheet",
+      "tooltip",
+      "input",
+      "use-mobile",
+      "skeleton"
+    ],
+    "files": [
+      {
+        "path": "ui/sidebar.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "tailwind": {
+      "config": {
+        "theme": {
+          "extend": {
+            "colors": {
+              "sidebar": {
+                "DEFAULT": "hsl(var(--sidebar-background))",
+                "foreground": "hsl(var(--sidebar-foreground))",
+                "primary": "hsl(var(--sidebar-primary))",
+                "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                "accent": "hsl(var(--sidebar-accent))",
+                "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                "border": "hsl(var(--sidebar-border))",
+                "ring": "hsl(var(--sidebar-ring))"
+              }
+            }
+          }
+        }
+      }
+    },
+    "cssVars": {
+      "light": {
+        "sidebar-background": "0 0% 98%",
+        "sidebar-foreground": "240 5.3% 26.1%",
+        "sidebar-primary": "240 5.9% 10%",
+        "sidebar-primary-foreground": "0 0% 98%",
+        "sidebar-accent": "240 4.8% 95.9%",
+        "sidebar-accent-foreground": "240 5.9% 10%",
+        "sidebar-border": "220 13% 91%",
+        "sidebar-ring": "217.2 91.2% 59.8%"
+      },
+      "dark": {
+        "sidebar-background": "240 5.9% 10%",
+        "sidebar-foreground": "240 4.8% 95.9%",
+        "sidebar-primary": "224.3 76.3% 48%",
+        "sidebar-primary-foreground": "0 0% 100%",
+        "sidebar-accent": "240 3.7% 15.9%",
+        "sidebar-accent-foreground": "240 4.8% 95.9%",
+        "sidebar-border": "240 3.7% 15.9%",
+        "sidebar-ring": "217.2 91.2% 59.8%"
+      }
+    }
+  },
+  {
+    "name": "skeleton",
+    "type": "registry:ui",
+    "files": [
+      {
+        "path": "ui/skeleton.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "slider",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-slider"
+    ],
+    "files": [
+      {
+        "path": "ui/slider.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "sonner",
+    "type": "registry:ui",
+    "dependencies": [
+      "sonner",
+      "next-themes"
+    ],
+    "files": [
+      {
+        "path": "ui/sonner.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "switch",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-switch"
+    ],
+    "files": [
+      {
+        "path": "ui/switch.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "table",
+    "type": "registry:ui",
+    "files": [
+      {
+        "path": "ui/table.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "tabs",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-tabs"
+    ],
+    "files": [
+      {
+        "path": "ui/tabs.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "textarea",
+    "type": "registry:ui",
+    "files": [
+      {
+        "path": "ui/textarea.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "toast",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-toast"
+    ],
+    "files": [
+      {
+        "path": "ui/toast.tsx",
+        "type": "registry:ui"
+      },
+      {
+        "path": "hooks/use-toast.ts",
+        "type": "registry:hook"
+      },
+      {
+        "path": "ui/toaster.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "toggle",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-toggle"
+    ],
+    "files": [
+      {
+        "path": "ui/toggle.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "toggle-group",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-toggle-group"
+    ],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "ui/toggle-group.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
+  {
+    "name": "tooltip",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-tooltip"
+    ],
+    "files": [
+      {
+        "path": "ui/tooltip.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/apps/v4/public/r/registries.json b/apps/v4/public/r/registries.json
new file mode 100644
index 00000000000..71a9a516666
--- /dev/null
+++ b/apps/v4/public/r/registries.json
@@ -0,0 +1,36 @@
+{
+  "@aceternity": "https://ui.aceternity.com/registry/{name}.json",
+  "@ai-elements": "https://registry.ai-sdk.dev/{name}.json",
+  "@alexcarpenter": "https://ui.alexcarpenter.me/r/{name}.json",
+  "@alpine": "https://alpine-registry.vercel.app/r/{name}.json",
+  "@animate-ui": "https://animate-ui.com/r/{name}.json",
+  "@blocks": "https://blocks.so/r/{name}.json",
+  "@clerk": "https://clerk.com/r/{name}.json",
+  "@cult-ui": "https://cult-ui.com/r/{name}.json",
+  "@kibo-ui": "https://www.kibo-ui.com/r/{name}.json",
+  "@kokonutui": "https://kokonutui.com/r/{name}.json",
+  "@magicui": "https://magicui.design/r/{name}.json",
+  "@motion-primitives": "https://motion-primitives.com/c/{name}.json",
+  "@originui": "https://originui.com/r/{name}.json",
+  "@prompt-kit": "https://prompt-kit.com/c/{name}.json",
+  "@tailark": "https://tailark.com/r/{name}.json",
+  "@react-bits": "https://reactbits.dev/r/{name}.json",
+  "@reui": "https://reui.io/r/{name}.json",
+  "@heseui": "https://www.heseui.com/r/{name}.json",
+  "@paceui-ui": "https://ui.paceui.com/r/{name}.json",
+  "@basecn": "https://basecn.dev/r/{name}.json",
+  "@ncdai": "https://chanhdai.com/r/{name}.json",
+  "@8bitcn": "https://8bitcn.com/r/{name}.json",
+  "@billingsdk": "https://billingsdk.com/r/{name}.json",
+  "@elements": "https://tryelements.dev/r/{name}.json",
+  "@nativeui": "https://nativeui.io/registry/{name}.json",
+  "@smoothui": "https://smoothui.dev/r/{name}.json",
+  "@formcn": "https://formcn.dev/r/{name}.json",
+  "@limeplay": "https://limeplay.winoffrg.dev/r/{name}.json",
+  "@skiper-ui": "https://skiper-ui.com/registry/{name}.json",
+  "@shadcn-editor": "https://shadcn-editor.vercel.app/r/{name}.json",
+  "@rigidui": "https://rigidui.com/r/{name}.json",
+  "@retroui": "https://retroui.dev/r/{name}.json",
+  "@wds": "https://wds-shadcn-registry.netlify.app/r/{name}.json",
+  "@97cn": "https://97cn.itzik.co/r/{name}.json"
+}
diff --git a/apps/v4/public/r/styles/default/accordion-demo.json b/apps/v4/public/r/styles/default/accordion-demo.json
new file mode 100644
index 00000000000..9c17049d880
--- /dev/null
+++ b/apps/v4/public/r/styles/default/accordion-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "accordion"
+  ],
+  "files": [
+    {
+      "path": "examples/accordion-demo.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport default function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other\n          components&apos; aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It&apos;s animated by default, but you can disable it if you\n          prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/accordion.json b/apps/v4/public/r/styles/default/accordion.json
new file mode 100644
index 00000000000..bdf7c13c60f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/accordion.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-accordion"
+  ],
+  "files": [
+    {
+      "path": "ui/accordion.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "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"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/alert-demo.json b/apps/v4/public/r/styles/default/alert-demo.json
new file mode 100644
index 00000000000..7f6b865cc94
--- /dev/null
+++ b/apps/v4/public/r/styles/default/alert-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertDemo() {\n  return (\n    <Alert>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/alert-destructive.json b/apps/v4/public/r/styles/default/alert-destructive.json
new file mode 100644
index 00000000000..490ed8667f3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/alert-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-destructive.tsx",
+      "content": "import { AlertCircle } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertDestructive() {\n  return (\n    <Alert variant=\"destructive\">\n      <AlertCircle className=\"h-4 w-4\" />\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>\n        Your session has expired. Please log in again.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/alert-dialog-demo.json b/apps/v4/public/r/styles/default/alert-dialog-demo.json
new file mode 100644
index 00000000000..8a52874789e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/alert-dialog-demo.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert-dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-dialog-demo.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/alert-dialog.json b/apps/v4/public/r/styles/default/alert-dialog.json
new file mode 100644
index 00000000000..8189458f19b
--- /dev/null
+++ b/apps/v4/public/r/styles/default/alert-dialog.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-alert-dialog"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/alert-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPortal>\n    <AlertDialogOverlay />\n    <AlertDialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    />\n  </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold\", className)}\n    {...props}\n  />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nAlertDialogDescription.displayName =\n  AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={cn(buttonVariants(), className)}\n    {...props}\n  />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={cn(\n      buttonVariants({ variant: \"outline\" }),\n      \"mt-2 sm:mt-0\",\n      className\n    )}\n    {...props}\n  />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/alert.json b/apps/v4/public/r/styles/default/alert.json
new file mode 100644
index 00000000000..300523eed7a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/alert.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "ui/alert.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/aspect-ratio-demo.json b/apps/v4/public/r/styles/default/aspect-ratio-demo.json
new file mode 100644
index 00000000000..1986b6fac1b
--- /dev/null
+++ b/apps/v4/public/r/styles/default/aspect-ratio-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "examples/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/aspect-ratio.json b/apps/v4/public/r/styles/default/aspect-ratio.json
new file mode 100644
index 00000000000..511410bb571
--- /dev/null
+++ b/apps/v4/public/r/styles/default/aspect-ratio.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "ui/aspect-ratio.tsx",
+      "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/avatar-demo.json b/apps/v4/public/r/styles/default/avatar-demo.json
new file mode 100644
index 00000000000..9e5ccb06543
--- /dev/null
+++ b/apps/v4/public/r/styles/default/avatar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "examples/avatar-demo.tsx",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/avatar.json b/apps/v4/public/r/styles/default/avatar.json
new file mode 100644
index 00000000000..7215ea17062
--- /dev/null
+++ b/apps/v4/public/r/styles/default/avatar.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-avatar"
+  ],
+  "files": [
+    {
+      "path": "ui/avatar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/badge-demo.json b/apps/v4/public/r/styles/default/badge-demo.json
new file mode 100644
index 00000000000..058cb863546
--- /dev/null
+++ b/apps/v4/public/r/styles/default/badge-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-demo.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/badge-destructive.json b/apps/v4/public/r/styles/default/badge-destructive.json
new file mode 100644
index 00000000000..a1c713208d4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/badge-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/badge-outline.json b/apps/v4/public/r/styles/default/badge-outline.json
new file mode 100644
index 00000000000..db35e6df38f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/badge-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-outline.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/badge-secondary.json b/apps/v4/public/r/styles/default/badge-secondary.json
new file mode 100644
index 00000000000..9eb9ee2929f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/badge-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-secondary",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/badge.json b/apps/v4/public/r/styles/default/badge.json
new file mode 100644
index 00000000000..afe0f305466
--- /dev/null
+++ b/apps/v4/public/r/styles/default/badge.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "ui/badge.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n        outline: \"text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/breadcrumb-demo.json b/apps/v4/public/r/styles/default/breadcrumb-demo.json
new file mode 100644
index 00000000000..d424b97255e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/breadcrumb-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-demo.tsx",
+      "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/breadcrumb-dropdown.json b/apps/v4/public/r/styles/default/breadcrumb-dropdown.json
new file mode 100644
index 00000000000..428279ddf7a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/breadcrumb-dropdown.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-dropdown",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-dropdown.tsx",
+      "content": "import { ChevronDown, Slash } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              Components\n              <ChevronDown className=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/breadcrumb-ellipsis.json b/apps/v4/public/r/styles/default/breadcrumb-ellipsis.json
new file mode 100644
index 00000000000..57056e9c439
--- /dev/null
+++ b/apps/v4/public/r/styles/default/breadcrumb-ellipsis.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-ellipsis",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-ellipsis.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbEllipsis />\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/breadcrumb-link.json b/apps/v4/public/r/styles/default/breadcrumb-link.json
new file mode 100644
index 00000000000..120f04169c7
--- /dev/null
+++ b/apps/v4/public/r/styles/default/breadcrumb-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-link",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-link.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink>\n            <Link href=\"/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/breadcrumb-responsive.json b/apps/v4/public/r/styles/default/breadcrumb-responsive.json
new file mode 100644
index 00000000000..3ffc728ccb8
--- /dev/null
+++ b/apps/v4/public/r/styles/default/breadcrumb-responsive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-responsive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nconst items = [\n  { href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Documentation\" },\n  { href: \"#\", label: \"Building Your Application\" },\n  { href: \"#\", label: \"Data Fetching\" },\n  { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        {items.length > ITEMS_TO_DISPLAY ? (\n          <>\n            <BreadcrumbItem>\n              {isDesktop ? (\n                <DropdownMenu open={open} onOpenChange={setOpen}>\n                  <DropdownMenuTrigger\n                    className=\"flex items-center gap-1\"\n                    aria-label=\"Toggle menu\"\n                  >\n                    <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                    {items.slice(1, -2).map((item, index) => (\n                      <DropdownMenuItem key={index}>\n                        <Link href={item.href ? item.href : \"#\"}>\n                          {item.label}\n                        </Link>\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              ) : (\n                <Drawer open={open} onOpenChange={setOpen}>\n                  <DrawerTrigger aria-label=\"Toggle Menu\">\n                    <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                  </DrawerTrigger>\n                  <DrawerContent>\n                    <DrawerHeader className=\"text-left\">\n                      <DrawerTitle>Navigate to</DrawerTitle>\n                      <DrawerDescription>\n                        Select a page to navigate to.\n                      </DrawerDescription>\n                    </DrawerHeader>\n                    <div className=\"grid gap-1 px-4\">\n                      {items.slice(1, -2).map((item, index) => (\n                        <Link\n                          key={index}\n                          href={item.href ? item.href : \"#\"}\n                          className=\"py-1 text-sm\"\n                        >\n                          {item.label}\n                        </Link>\n                      ))}\n                    </div>\n                    <DrawerFooter className=\"pt-4\">\n                      <DrawerClose asChild>\n                        <Button variant=\"outline\">Close</Button>\n                      </DrawerClose>\n                    </DrawerFooter>\n                  </DrawerContent>\n                </Drawer>\n              )}\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n          </>\n        ) : null}\n        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n          <BreadcrumbItem key={index}>\n            {item.href ? (\n              <>\n                <BreadcrumbLink\n                  asChild\n                  className=\"max-w-20 truncate md:max-w-none\"\n                >\n                  <Link href={item.href}>{item.label}</Link>\n                </BreadcrumbLink>\n                <BreadcrumbSeparator />\n              </>\n            ) : (\n              <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                {item.label}\n              </BreadcrumbPage>\n            )}\n          </BreadcrumbItem>\n        ))}\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/breadcrumb-separator.json b/apps/v4/public/r/styles/default/breadcrumb-separator.json
new file mode 100644
index 00000000000..409c3ff22be
--- /dev/null
+++ b/apps/v4/public/r/styles/default/breadcrumb-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-separator",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-separator.tsx",
+      "content": "import { Slash } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/breadcrumb.json b/apps/v4/public/r/styles/default/breadcrumb.json
new file mode 100644
index 00000000000..1dfdd056650
--- /dev/null
+++ b/apps/v4/public/r/styles/default/breadcrumb.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "ui/breadcrumb.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\"> & {\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    {...props}\n  />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & {\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:w-3.5 [&>svg]:h-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/button-as-child.json b/apps/v4/public/r/styles/default/button-as-child.json
new file mode 100644
index 00000000000..4d8e110e2b3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/button-as-child.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-as-child",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-as-child.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonAsChild() {\n  return (\n    <Button asChild>\n      <Link href=\"/login\">Login</Link>\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/button-demo.json b/apps/v4/public/r/styles/default/button-demo.json
new file mode 100644
index 00000000000..c0887f83c8a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/button-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/button-destructive.json b/apps/v4/public/r/styles/default/button-destructive.json
new file mode 100644
index 00000000000..6b960e591e2
--- /dev/null
+++ b/apps/v4/public/r/styles/default/button-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-destructive.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/button-ghost.json b/apps/v4/public/r/styles/default/button-ghost.json
new file mode 100644
index 00000000000..c3de5ec8640
--- /dev/null
+++ b/apps/v4/public/r/styles/default/button-ghost.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-ghost",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-ghost.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/button-icon.json b/apps/v4/public/r/styles/default/button-icon.json
new file mode 100644
index 00000000000..5e46a482581
--- /dev/null
+++ b/apps/v4/public/r/styles/default/button-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-icon",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-icon.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <ChevronRight />\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/button-link.json b/apps/v4/public/r/styles/default/button-link.json
new file mode 100644
index 00000000000..77f8b8b2b66
--- /dev/null
+++ b/apps/v4/public/r/styles/default/button-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-link",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-link.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/button-loading.json b/apps/v4/public/r/styles/default/button-loading.json
new file mode 100644
index 00000000000..26b7eafc49f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/button-loading.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-loading",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/button-outline.json b/apps/v4/public/r/styles/default/button-outline.json
new file mode 100644
index 00000000000..77aef187ddb
--- /dev/null
+++ b/apps/v4/public/r/styles/default/button-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-outline.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/button-secondary.json b/apps/v4/public/r/styles/default/button-secondary.json
new file mode 100644
index 00000000000..c9783a99f10
--- /dev/null
+++ b/apps/v4/public/r/styles/default/button-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-secondary",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-secondary.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/button-with-icon.json b/apps/v4/public/r/styles/default/button-with-icon.json
new file mode 100644
index 00000000000..b7b4ba4a767
--- /dev/null
+++ b/apps/v4/public/r/styles/default/button-with-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-with-icon",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-with-icon.tsx",
+      "content": "import { Mail } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button>\n      <Mail /> Login with Email\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/button.json b/apps/v4/public/r/styles/default/button.json
new file mode 100644
index 00000000000..1f2df4e6c27
--- /dev/null
+++ b/apps/v4/public/r/styles/default/button.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "ui/button.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-01.json b/apps/v4/public/r/styles/default/calendar-01.json
new file mode 100644
index 00000000000..5055c73ceee
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-01.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-02.json b/apps/v4/public/r/styles/default/calendar-02.json
new file mode 100644
index 00000000000..fe9bf781cea
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-02.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-03.json b/apps/v4/public/r/styles/default/calendar-03.json
new file mode 100644
index 00000000000..722062cf86d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-03.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-04.json b/apps/v4/public/r/styles/default/calendar-04.json
new file mode 100644
index 00000000000..4a238ea4a39
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-04.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-05.json b/apps/v4/public/r/styles/default/calendar-05.json
new file mode 100644
index 00000000000..70aecb22a7e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-05.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-06.json b/apps/v4/public/r/styles/default/calendar-06.json
new file mode 100644
index 00000000000..a6486cb573a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-06.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-07.json b/apps/v4/public/r/styles/default/calendar-07.json
new file mode 100644
index 00000000000..e8558053baa
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-07.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-08.json b/apps/v4/public/r/styles/default/calendar-08.json
new file mode 100644
index 00000000000..c4f47ebea31
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-08.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-09.json b/apps/v4/public/r/styles/default/calendar-09.json
new file mode 100644
index 00000000000..109eb92cbe2
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-09.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-10.json b/apps/v4/public/r/styles/default/calendar-10.json
new file mode 100644
index 00000000000..1851e7ead5e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-10.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader className=\"relative\">\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          className=\"absolute right-4 top-4\"\n          onClick={() => {\n            setMonth(new Date())\n            setDate(new Date())\n          }}\n        >\n          Today\n        </Button>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-11.json b/apps/v4/public/r/styles/default/calendar-11.json
new file mode 100644
index 00000000000..5807637528f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-11.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-12.json b/apps/v4/public/r/styles/default/calendar-12.json
new file mode 100644
index 00000000000..4b4034cb7f2
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-12.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"relative border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <Select\n          value={locale}\n          onValueChange={(value) =>\n            setLocale(value as keyof typeof localizedStrings)\n          }\n        >\n          <SelectTrigger className=\"absolute right-4 top-4 w-[100px]\">\n            <SelectValue placeholder=\"Language\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\">\n            <SelectItem value=\"es\">Español</SelectItem>\n            <SelectItem value=\"en\">English</SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"pt-4\">\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-13.json b/apps/v4/public/r/styles/default/calendar-13.json
new file mode 100644
index 00000000000..f772b672f48
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-13.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-14.json b/apps/v4/public/r/styles/default/calendar-14.json
new file mode 100644
index 00000000000..132c490637d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-14.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-15.json b/apps/v4/public/r/styles/default/calendar-15.json
new file mode 100644
index 00000000000..aaf941d6472
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-15.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-16.json b/apps/v4/public/r/styles/default/calendar-16.json
new file mode 100644
index 00000000000..19c92ec665e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-16.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-17.json b/apps/v4/public/r/styles/default/calendar-17.json
new file mode 100644
index 00000000000..9fee2d25b38
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-17.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:2.8rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-18.json b/apps/v4/public/r/styles/default/calendar-18.json
new file mode 100644
index 00000000000..c9fa9d20c1d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-18.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-19.json b/apps/v4/public/r/styles/default/calendar-19.json
new file mode 100644
index 00000000000..197ccf33f73
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-19.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:2.375rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 pb-0 pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-20.json b/apps/v4/public/r/styles/default/calendar-20.json
new file mode 100644
index 00000000000..280a23e319a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-20.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute\n      .toString()\n      .padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t !py-5 px-6 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-21.json b/apps/v4/public/r/styles/default/calendar-21.json
new file mode 100644
index 00000000000..e75290eea68
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-21.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-22.json b/apps/v4/public/r/styles/default/calendar-22.json
new file mode 100644
index 00000000000..8a83ac97d94
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-22.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-23.json b/apps/v4/public/r/styles/default/calendar-23.json
new file mode 100644
index 00000000000..a87121360e4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-23.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-24.json b/apps/v4/public/r/styles/default/calendar-24.json
new file mode 100644
index 00000000000..994c70a2119
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-24.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-25.json b/apps/v4/public/r/styles/default/calendar-25.json
new file mode 100644
index 00000000000..7b7ccd9a1ec
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-25.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-26.json b/apps/v4/public/r/styles/default/calendar-26.json
new file mode 100644
index 00000000000..c3a2ec7784e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-26.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-27.json b/apps/v4/public/r/styles/default/calendar-27.json
new file mode 100644
index 00000000000..be7ad4f5928
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-27.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--primary))\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"@md/card:grid relative flex flex-col border-b\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"absolute right-4 top-4\">\n              <CalendarIcon />\n              {range?.from && range?.to\n                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                : \"June 2025\"}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              className=\"w-full\"\n              mode=\"range\"\n              defaultMonth={range?.from}\n              selected={range}\n              onSelect={setRange}\n              disableNavigation\n              startMonth={range?.from}\n              fixedWeeks\n              showOutsideDays\n              disabled={{\n                after: new Date(2025, 5, 31),\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t pt-6\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-28.json b/apps/v4/public/r/styles/default/calendar-28.json
new file mode 100644
index 00000000000..2d0bf94cc95
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-28.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-29.json b/apps/v4/public/r/styles/default/calendar-29.json
new file mode 100644
index 00000000000..1d81663cdce
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-29.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-30.json b/apps/v4/public/r/styles/default/calendar-30.json
new file mode 100644
index 00000000000..4297f6e8feb
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-30.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-31.json b/apps/v4/public/r/styles/default/calendar-31.json
new file mode 100644
index 00000000000..34b2aecb5c9
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-31.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-6 w-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-32.json b/apps/v4/public/r/styles/default/calendar-32.json
new file mode 100644
index 00000000000..f0a8ca3703a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-32.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-demo.json b/apps/v4/public/r/styles/default/calendar-demo.json
new file mode 100644
index 00000000000..7d9622e097d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border\"\n    />\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar-form.json b/apps/v4/public/r/styles/default/calendar-form.json
new file mode 100644
index 00000000000..adc13f16dac
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/calendar.json b/apps/v4/public/r/styles/default/calendar.json
new file mode 100644
index 00000000000..e492d9aa27e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/calendar.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "react-day-picker@latest",
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/calendar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"bg-popover absolute inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-[--cell-size] select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-muted-foreground select-none text-[0.8rem]\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"bg-accent rounded-l-md\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"bg-accent rounded-r-md\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-[--cell-size] items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/card-demo.json b/apps/v4/public/r/styles/default/card-demo.json
new file mode 100644
index 00000000000..ba8d828cda9
--- /dev/null
+++ b/apps/v4/public/r/styles/default/card-demo.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "button",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "examples/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { 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 { Switch } from \"@/registry/default/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/card-with-form.json b/apps/v4/public/r/styles/default/card-with-form.json
new file mode 100644
index 00000000000..1a468d3c1aa
--- /dev/null
+++ b/apps/v4/public/r/styles/default/card-with-form.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-with-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/card-with-form.tsx",
+      "content": "import * as React from \"react\"\n\nimport { 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\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function CardWithForm() {\n  return (\n    <Card className=\"w-[350px]\">\n      <CardHeader>\n        <CardTitle>Create project</CardTitle>\n        <CardDescription>Deploy your new project in one-click.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <div className=\"grid w-full items-center gap-4\">\n            <div className=\"flex flex-col space-y-1.5\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" placeholder=\"Name of your project\" />\n            </div>\n            <div className=\"flex flex-col space-y-1.5\">\n              <Label htmlFor=\"framework\">Framework</Label>\n              <Select>\n                <SelectTrigger id=\"framework\">\n                  <SelectValue placeholder=\"Select\" />\n                </SelectTrigger>\n                <SelectContent position=\"popper\">\n                  <SelectItem value=\"next\">Next.js</SelectItem>\n                  <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                  <SelectItem value=\"astro\">Astro</SelectItem>\n                  <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex justify-between\">\n        <Button variant=\"outline\">Cancel</Button>\n        <Button>Deploy</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/card.json b/apps/v4/public/r/styles/default/card.json
new file mode 100644
index 00000000000..614194e24a6
--- /dev/null
+++ b/apps/v4/public/r/styles/default/card.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "ui/card.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/carousel-api.json b/apps/v4/public/r/styles/default/carousel-api.json
new file mode 100644
index 00000000000..6f7478939cf
--- /dev/null
+++ b/apps/v4/public/r/styles/default/carousel-api.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-api",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-api.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) {\n      return\n    }\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap() + 1)\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1)\n    })\n  }, [api])\n\n  return (\n    <div className=\"mx-auto max-w-xs\">\n      <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious />\n        <CarouselNext />\n      </Carousel>\n      <div className=\"py-2 text-center text-sm text-muted-foreground\">\n        Slide {current} of {count}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/carousel-demo.json b/apps/v4/public/r/styles/default/carousel-demo.json
new file mode 100644
index 00000000000..98b713af0c5
--- /dev/null
+++ b/apps/v4/public/r/styles/default/carousel-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/carousel-orientation.json b/apps/v4/public/r/styles/default/carousel-orientation.json
new file mode 100644
index 00000000000..efe1c8c8f87
--- /dev/null
+++ b/apps/v4/public/r/styles/default/carousel-orientation.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-orientation",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselOrientation() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      orientation=\"vertical\"\n      className=\"w-full max-w-xs\"\n    >\n      <CarouselContent className=\"-mt-1 h-[200px]\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/carousel-plugin.json b/apps/v4/public/r/styles/default/carousel-plugin.json
new file mode 100644
index 00000000000..43f8ce795e4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/carousel-plugin.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-plugin",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-plugin.tsx",
+      "content": "import * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselPlugin() {\n  const plugin = React.useRef(\n    Autoplay({ delay: 2000, stopOnInteraction: true })\n  )\n\n  return (\n    <Carousel\n      plugins={[plugin.current]}\n      className=\"w-full max-w-xs\"\n      onMouseEnter={plugin.current.stop}\n      onMouseLeave={plugin.current.reset}\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/carousel-size.json b/apps/v4/public/r/styles/default/carousel-size.json
new file mode 100644
index 00000000000..b006b78c097
--- /dev/null
+++ b/apps/v4/public/r/styles/default/carousel-size.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-size",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-size.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselSize() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      className=\"w-full max-w-sm\"\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/carousel-spacing.json b/apps/v4/public/r/styles/default/carousel-spacing.json
new file mode 100644
index 00000000000..1287dcd4029
--- /dev/null
+++ b/apps/v4/public/r/styles/default/carousel-spacing.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-spacing",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-spacing.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselSpacing() {\n  return (\n    <Carousel className=\"w-full max-w-sm\">\n      <CarouselContent className=\"-ml-1\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/carousel.json b/apps/v4/public/r/styles/default/carousel.json
new file mode 100644
index 00000000000..b98a95cc334
--- /dev/null
+++ b/apps/v4/public/r/styles/default/carousel.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "embla-carousel-react"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/carousel.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = \"horizontal\",\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n      },\n      plugins\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n    const onSelect = React.useCallback((api: CarouselApi) => {\n      if (!api) {\n        return\n      }\n\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev()\n    }, [api])\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext()\n    }, [api])\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === \"ArrowLeft\") {\n          event.preventDefault()\n          scrollPrev()\n        } else if (event.key === \"ArrowRight\") {\n          event.preventDefault()\n          scrollNext()\n        }\n      },\n      [scrollPrev, scrollNext]\n    )\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return\n      }\n\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) {\n        return\n      }\n\n      onSelect(api)\n      api.on(\"reInit\", onSelect)\n      api.on(\"select\", onSelect)\n\n      return () => {\n        api?.off(\"select\", onSelect)\n      }\n    }, [api, onSelect])\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api: api,\n          opts,\n          orientation:\n            orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\n        }}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    )\n  }\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\">\n      <div\n        ref={ref}\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute  h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-left-12 top-1/2 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-right-12 top-1/2 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-area-axes.json b/apps/v4/public/r/styles/default/chart-area-axes.json
new file mode 100644
index 00000000000..85179b8a27d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-area-axes.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-axes",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-axes.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Axes</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -20,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={3}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-area-default.json b/apps/v4/public/r/styles/default/chart-area-default.json
new file mode 100644
index 00000000000..cf4571ccb11
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-area-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-default",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-area-gradient.json b/apps/v4/public/r/styles/default/chart-area-gradient.json
new file mode 100644
index 00000000000..e6b79ca9898
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-area-gradient.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-gradient",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-gradient.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Gradient</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-area-icons.json b/apps/v4/public/r/styles/default/chart-area-icons.json
new file mode 100644
index 00000000000..887d10e645f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-area-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-icons",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-icons.tsx",
+      "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: TrendingDown,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: TrendingUp,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-area-interactive.json b/apps/v4/public/r/styles/default/chart-area-interactive.json
new file mode 100644
index 00000000000..373a7cf5d72
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-area-interactive.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-interactive",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n        <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n          <CardTitle>Area Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <Select value={timeRange} onValueChange={setTimeRange}>\n          <SelectTrigger\n            className=\"w-[160px] rounded-lg sm:ml-auto\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Last 3 months\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90d\" className=\"rounded-lg\">\n              Last 3 months\n            </SelectItem>\n            <SelectItem value=\"30d\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7d\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-area-legend.json b/apps/v4/public/r/styles/default/chart-area-legend.json
new file mode 100644
index 00000000000..7c863893cc4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-area-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-legend",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-area-linear.json b/apps/v4/public/r/styles/default/chart-area-linear.json
new file mode 100644
index 00000000000..cd3572fbbb0
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-area-linear.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-linear",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Linear</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"linear\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-area-stacked-expand.json b/apps/v4/public/r/styles/default/chart-area-stacked-expand.json
new file mode 100644
index 00000000000..ca7759f8f74
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-area-stacked-expand.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-stacked-expand",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-stacked-expand.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n  { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n  { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n  { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n  { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n  { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-3))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n              top: 12,\n            }}\n            stackOffset=\"expand\"\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"other\"\n              type=\"natural\"\n              fill=\"var(--color-other)\"\n              fillOpacity={0.1}\n              stroke=\"var(--color-other)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-area-stacked.json b/apps/v4/public/r/styles/default/chart-area-stacked.json
new file mode 100644
index 00000000000..03c4b4a49ac
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-area-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-stacked",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-area-step.json b/apps/v4/public/r/styles/default/chart-area-step.json
new file mode 100644
index 00000000000..f3f7669fee5
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-area-step.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-step",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-step.tsx",
+      "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Activity,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Step</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"step\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-active.json b/apps/v4/public/r/styles/default/chart-bar-active.json
new file mode 100644
index 00000000000..ec620c182d3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-active.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-active",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              activeIndex={2}\n              activeBar={({ ...props }) => {\n                return (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                )\n              }}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-default.json b/apps/v4/public/r/styles/default/chart-bar-default.json
new file mode 100644
index 00000000000..210fe173873
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-default",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-demo-axis.json b/apps/v4/public/r/styles/default/chart-bar-demo-axis.json
new file mode 100644
index 00000000000..6add2c70a11
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-demo-axis.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-axis",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-axis.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-demo-grid.json b/apps/v4/public/r/styles/default/chart-bar-demo-grid.json
new file mode 100644
index 00000000000..368bb078db6
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-demo-grid.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-grid",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-grid.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-demo-legend.json b/apps/v4/public/r/styles/default/chart-bar-demo-legend.json
new file mode 100644
index 00000000000..a7853f4dbed
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-demo-legend.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-legend",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-legend.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <ChartLegend content={<ChartLegendContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-demo-tooltip.json b/apps/v4/public/r/styles/default/chart-bar-demo-tooltip.json
new file mode 100644
index 00000000000..9e3b84fe5bb
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-demo-tooltip.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-tooltip",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-tooltip.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-demo.json b/apps/v4/public/r/styles/default/chart-bar-demo.json
new file mode 100644
index 00000000000..874bc171a73
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-horizontal.json b/apps/v4/public/r/styles/default/chart-bar-horizontal.json
new file mode 100644
index 00000000000..3007640c409
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-horizontal.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-horizontal",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-horizontal.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Horizontal</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: -20,\n            }}\n          >\n            <XAxis type=\"number\" dataKey=\"desktop\" hide />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-interactive.json b/apps/v4/public/r/styles/default/chart-bar-interactive.json
new file mode 100644
index 00000000000..3e648258779
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-interactive",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Bar Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-label-custom.json b/apps/v4/public/r/styles/default/chart-bar-label-custom.json
new file mode 100644
index 00000000000..bfe8f9f7f60
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-label-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  label: {\n    color: \"hsl(var(--background))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              right: 16,\n            }}\n          >\n            <CartesianGrid horizontal={false} />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n              hide\n            />\n            <XAxis dataKey=\"desktop\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Bar\n              dataKey=\"desktop\"\n              layout=\"vertical\"\n              fill=\"var(--color-desktop)\"\n              radius={4}\n            >\n              <LabelList\n                dataKey=\"month\"\n                position=\"insideLeft\"\n                offset={8}\n                className=\"fill-[--color-label]\"\n                fontSize={12}\n              />\n              <LabelList\n                dataKey=\"desktop\"\n                position=\"right\"\n                offset={8}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-label.json b/apps/v4/public/r/styles/default/chart-bar-label.json
new file mode 100644
index 00000000000..dee2deb3447
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-label",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-mixed.json b/apps/v4/public/r/styles/default/chart-bar-mixed.json
new file mode 100644
index 00000000000..566289d744d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-mixed.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-mixed",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-mixed.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Mixed</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: 0,\n            }}\n          >\n            <YAxis\n              dataKey=\"browser\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <XAxis dataKey=\"visitors\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-multiple.json b/apps/v4/public/r/styles/default/chart-bar-multiple.json
new file mode 100644
index 00000000000..807fe6dd0d3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-multiple",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dashed\" />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n            <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-negative.json b/apps/v4/public/r/styles/default/chart-bar-negative.json
new file mode 100644
index 00000000000..cfd11cb0038
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-negative.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-negative",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-negative.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 205 },\n  { month: \"March\", visitors: -207 },\n  { month: \"April\", visitors: 173 },\n  { month: \"May\", visitors: -209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Negative</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel hideIndicator />}\n            />\n            <Bar dataKey=\"visitors\">\n              <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n              {chartData.map((item) => (\n                <Cell\n                  key={item.month}\n                  fill={\n                    item.visitors > 0\n                      ? \"hsl(var(--chart-1))\"\n                      : \"hsl(var(--chart-2))\"\n                  }\n                />\n              ))}\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-bar-stacked.json b/apps/v4/public/r/styles/default/chart-bar-stacked.json
new file mode 100644
index 00000000000..d4cc7b9b606
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-bar-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-stacked",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            <Bar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              fill=\"var(--color-desktop)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"mobile\"\n              stackId=\"a\"\n              fill=\"var(--color-mobile)\"\n              radius={[4, 4, 0, 0]}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-line-default.json b/apps/v4/public/r/styles/default/chart-line-default.json
new file mode 100644
index 00000000000..703b63e7d89
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-line-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-default",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-line-dots-colors.json b/apps/v4/public/r/styles/default/chart-line-dots-colors.json
new file mode 100644
index 00000000000..4790face28b
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-line-dots-colors.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots-colors",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots-colors.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots Colors</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={({ payload, ...props }) => {\n                return (\n                  <Dot\n                    key={payload.browser}\n                    r={5}\n                    cx={props.cx}\n                    cy={props.cy}\n                    fill={payload.fill}\n                    stroke={payload.fill}\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-line-dots-custom.json b/apps/v4/public/r/styles/default/chart-line-dots-custom.json
new file mode 100644
index 00000000000..64e9be72505
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-line-dots-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots-custom.tsx",
+      "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={({ cx, cy, payload }) => {\n                const r = 24\n                return (\n                  <GitCommitVertical\n                    key={payload.month}\n                    x={cx - r / 2}\n                    y={cy - r / 2}\n                    width={r}\n                    height={r}\n                    fill=\"hsl(var(--background))\"\n                    stroke=\"var(--color-desktop)\"\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-line-dots.json b/apps/v4/public/r/styles/default/chart-line-dots.json
new file mode 100644
index 00000000000..8e29e33b22f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-line-dots.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-line-interactive.json b/apps/v4/public/r/styles/default/chart-line-interactive.json
new file mode 100644
index 00000000000..61d55391622
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-line-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-interactive",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Line Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Line\n              dataKey={activeChart}\n              type=\"monotone\"\n              stroke={`var(--color-${activeChart})`}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-line-label-custom.json b/apps/v4/public/r/styles/default/chart-line-label-custom.json
new file mode 100644
index 00000000000..8ba3b1a2d5d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-line-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-label-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-visitors)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n                dataKey=\"browser\"\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-line-label.json b/apps/v4/public/r/styles/default/chart-line-label.json
new file mode 100644
index 00000000000..f4bbfc668cf
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-line-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-label",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-line-linear.json b/apps/v4/public/r/styles/default/chart-line-linear.json
new file mode 100644
index 00000000000..c43167f8c86
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-line-linear.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-linear",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Linear</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"linear\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-line-multiple.json b/apps/v4/public/r/styles/default/chart-line-multiple.json
new file mode 100644
index 00000000000..495b9bc9983
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-line-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-multiple",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Line\n              dataKey=\"desktop\"\n              type=\"monotone\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n            <Line\n              dataKey=\"mobile\"\n              type=\"monotone\"\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-line-step.json b/apps/v4/public/r/styles/default/chart-line-step.json
new file mode 100644
index 00000000000..7f5b9b0771c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-line-step.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-step",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-step.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Step</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"step\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-pie-donut-active.json b/apps/v4/public/r/styles/default/chart-pie-donut-active.json
new file mode 100644
index 00000000000..1b4fd6de76c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-pie-donut-active.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut-active",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={0}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <Sector {...props} outerRadius={outerRadius + 10} />\n              )}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-pie-donut-text.json b/apps/v4/public/r/styles/default/chart-pie-donut-text.json
new file mode 100644
index 00000000000..ce74312b0b5
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-pie-donut-text.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut-text",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut-text.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = React.useMemo(() => {\n    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut with Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-pie-donut.json b/apps/v4/public/r/styles/default/chart-pie-donut.json
new file mode 100644
index 00000000000..1c579a18bc6
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-pie-donut.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-pie-interactive.json b/apps/v4/public/r/styles/default/chart-pie-interactive.json
new file mode 100644
index 00000000000..b8896a0321d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-pie-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-interactive",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const id = \"pie-interactive\"\n  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n  const activeIndex = React.useMemo(\n    () => desktopData.findIndex((item) => item.month === activeMonth),\n    [activeMonth]\n  )\n  const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n  return (\n    <Card data-chart={id} className=\"flex flex-col\">\n      <ChartStyle id={id} config={chartConfig} />\n      <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n        <div className=\"grid gap-1\">\n          <CardTitle>Pie Chart - Interactive</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </div>\n        <Select value={activeMonth} onValueChange={setActiveMonth}>\n          <SelectTrigger\n            className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\" className=\"rounded-xl\">\n            {months.map((key) => {\n              const config = chartConfig[key as keyof typeof chartConfig]\n\n              if (!config) {\n                return null\n              }\n\n              return (\n                <SelectItem\n                  key={key}\n                  value={key}\n                  className=\"rounded-lg [&_span]:flex\"\n                >\n                  <div className=\"flex items-center gap-2 text-xs\">\n                    <span\n                      className=\"flex h-3 w-3 shrink-0 rounded-sm\"\n                      style={{\n                        backgroundColor: `var(--color-${key})`,\n                      }}\n                    />\n                    {config?.label}\n                  </div>\n                </SelectItem>\n              )\n            })}\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 justify-center pb-0\">\n        <ChartContainer\n          id={id}\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[300px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={desktopData}\n              dataKey=\"desktop\"\n              nameKey=\"month\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={activeIndex}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <g>\n                  <Sector {...props} outerRadius={outerRadius + 10} />\n                  <Sector\n                    {...props}\n                    outerRadius={outerRadius + 25}\n                    innerRadius={outerRadius + 12}\n                  />\n                </g>\n              )}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {desktopData[activeIndex].desktop.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-pie-label-custom.json b/apps/v4/public/r/styles/default/chart-pie-label-custom.json
new file mode 100644
index 00000000000..99625f9259d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-pie-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] px-0\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {payload.visitors}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-pie-label-list.json b/apps/v4/public/r/styles/default/chart-pie-label-list.json
new file mode 100644
index 00000000000..6581bc115c7
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-pie-label-list.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label-list",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label-list.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label List</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\">\n              <LabelList\n                dataKey=\"browser\"\n                className=\"fill-background\"\n                stroke=\"none\"\n                fontSize={12}\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-pie-label.json b/apps/v4/public/r/styles/default/chart-pie-label.json
new file mode 100644
index 00000000000..384cd2b15d7
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-pie-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n        >\n          <PieChart>\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-pie-legend.json b/apps/v4/public/r/styles/default/chart-pie-legend.json
new file mode 100644
index 00000000000..ba6265945c6
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-pie-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-legend",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-legend.tsx",
+      "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[300px]\"\n        >\n          <PieChart>\n            <Pie data={chartData} dataKey=\"visitors\" />\n            <ChartLegend\n              content={<ChartLegendContent nameKey=\"browser\" />}\n              className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-pie-separator-none.json b/apps/v4/public/r/styles/default/chart-pie-separator-none.json
new file mode 100644
index 00000000000..a0b1109068f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-pie-separator-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-separator-none",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-separator-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Separator None</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              stroke=\"0\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-pie-simple.json b/apps/v4/public/r/styles/default/chart-pie-simple.json
new file mode 100644
index 00000000000..d95001a6440
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-pie-simple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-simple",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-pie-stacked.json b/apps/v4/public/r/styles/default/chart-pie-stacked.json
new file mode 100644
index 00000000000..8c088e244d6
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-pie-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-stacked",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-stacked.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n  { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n  { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n  { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n  { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n  { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelKey=\"visitors\"\n                  nameKey=\"month\"\n                  indicator=\"line\"\n                  labelFormatter={(_, payload) => {\n                    return chartConfig[\n                      payload?.[0].dataKey as keyof typeof chartConfig\n                    ].label\n                  }}\n                />\n              }\n            />\n            <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n            <Pie\n              data={mobileData}\n              dataKey=\"mobile\"\n              innerRadius={70}\n              outerRadius={90}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-default.json b/apps/v4/public/r/styles/default/chart-radar-default.json
new file mode 100644
index 00000000000..ac0f427b4b5
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-default",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-dots.json b/apps/v4/public/r/styles/default/chart-radar-dots.json
new file mode 100644
index 00000000000..8730564bd48
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-dots.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-dots",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Dots</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-grid-circle-fill.json b/apps/v4/public/r/styles/default/chart-radar-grid-circle-fill.json
new file mode 100644
index 00000000000..6a3a5d08eaa
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-grid-circle-fill.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-fill",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarGrid\n              className=\"fill-[--color-desktop] opacity-20\"\n              gridType=\"circle\"\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-grid-circle-no-lines.json b/apps/v4/public/r/styles/default/chart-radar-grid-circle-no-lines.json
new file mode 100644
index 00000000000..e8da03e0ab2
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-grid-circle-no-lines.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-no-lines",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle-no-lines.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" radialLines={false} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-grid-circle.json b/apps/v4/public/r/styles/default/chart-radar-grid-circle.json
new file mode 100644
index 00000000000..5d1f2358b3a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-grid-circle.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-grid-custom.json b/apps/v4/public/r/styles/default/chart-radar-grid-custom.json
new file mode 100644
index 00000000000..d99c9a4e3c7
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-grid-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Custom</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-grid-fill.json b/apps/v4/public/r/styles/default/chart-radar-grid-fill.json
new file mode 100644
index 00000000000..f5a0a98f36c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-grid-fill.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-fill",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-grid-none.json b/apps/v4/public/r/styles/default/chart-radar-grid-none.json
new file mode 100644
index 00000000000..7df63595546
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-grid-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-none",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid None</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-icons.json b/apps/v4/public/r/styles/default/chart-radar-icons.json
new file mode 100644
index 00000000000..b34dcf1e49c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-icons",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-icons.tsx",
+      "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: ArrowDownFromLine,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: ArrowUpFromLine,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-label-custom.json b/apps/v4/public/r/styles/default/chart-radar-label-custom.json
new file mode 100644
index 00000000000..07b3ab6b30b
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-label-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Custom Label</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: 10,\n              right: 10,\n              bottom: 10,\n              left: 10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis\n              dataKey=\"month\"\n              tick={({ x, y, textAnchor, value, index, ...props }) => {\n                const data = chartData[index]\n\n                return (\n                  <text\n                    x={x}\n                    y={index === 0 ? y - 10 : y}\n                    textAnchor={textAnchor}\n                    fontSize={13}\n                    fontWeight={500}\n                    {...props}\n                  >\n                    <tspan>{data.desktop}</tspan>\n                    <tspan className=\"fill-muted-foreground\">/</tspan>\n                    <tspan>{data.mobile}</tspan>\n                    <tspan\n                      x={x}\n                      dy={\"1rem\"}\n                      fontSize={12}\n                      className=\"fill-muted-foreground\"\n                    >\n                      {data.month}\n                    </tspan>\n                  </text>\n                )\n              }}\n            />\n\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-legend.json b/apps/v4/public/r/styles/default/chart-radar-legend.json
new file mode 100644
index 00000000000..e16aae47173
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-legend",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-lines-only.json b/apps/v4/public/r/styles/default/chart-radar-lines-only.json
new file mode 100644
index 00000000000..c516ae33415
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-lines-only.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-lines-only",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-lines-only.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 160 },\n  { month: \"February\", desktop: 185, mobile: 170 },\n  { month: \"March\", desktop: 207, mobile: 180 },\n  { month: \"April\", desktop: 173, mobile: 160 },\n  { month: \"May\", desktop: 160, mobile: 190 },\n  { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Lines Only</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid radialLines={false} />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0}\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n            />\n            <Radar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0}\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-multiple.json b/apps/v4/public/r/styles/default/chart-radar-multiple.json
new file mode 100644
index 00000000000..cf239dfdd9d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-multiple",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Multiple</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radar-radius.json b/apps/v4/public/r/styles/default/chart-radar-radius.json
new file mode 100644
index 00000000000..308b34b2f98
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radar-radius.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-radius",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-radius.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"hsla(var(--foreground))\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radial-grid.json b/apps/v4/public/r/styles/default/chart-radial-grid.json
new file mode 100644
index 00000000000..fdc8877c8fd
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radial-grid.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-grid",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-grid.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Grid</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <RadialBar dataKey=\"visitors\" />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radial-label.json b/apps/v4/public/r/styles/default/chart-radial-label.json
new file mode 100644
index 00000000000..db19930aa1e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radial-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-label",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={-90}\n            endAngle={380}\n            innerRadius={30}\n            outerRadius={110}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background>\n              <LabelList\n                position=\"insideStart\"\n                dataKey=\"browser\"\n                className=\"fill-white capitalize mix-blend-luminosity\"\n                fontSize={11}\n              />\n            </RadialBar>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radial-shape.json b/apps/v4/public/r/styles/default/chart-radial-shape.json
new file mode 100644
index 00000000000..68e76df2201
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radial-shape.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-shape",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-shape.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Shape</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={100}\n            innerRadius={80}\n            outerRadius={140}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radial-simple.json b/apps/v4/public/r/styles/default/chart-radial-simple.json
new file mode 100644
index 00000000000..876e0bef149
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radial-simple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-simple",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radial-stacked.json b/apps/v4/public/r/styles/default/chart-radial-stacked.json
new file mode 100644
index 00000000000..0855824bc66
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radial-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-stacked",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 items-center pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={180}\n            innerRadius={80}\n            outerRadius={130}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) - 16}\n                          className=\"fill-foreground text-2xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 4}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n            <RadialBar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              cornerRadius={5}\n              fill=\"var(--color-desktop)\"\n              className=\"stroke-transparent stroke-2\"\n            />\n            <RadialBar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              stackId=\"a\"\n              cornerRadius={5}\n              className=\"stroke-transparent stroke-2\"\n            />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-radial-text.json b/apps/v4/public/r/styles/default/chart-radial-text.json
new file mode 100644
index 00000000000..7b4f9e76a12
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-radial-text.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-text",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={0}\n            endAngle={250}\n            innerRadius={80}\n            outerRadius={110}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-tooltip-advanced.json b/apps/v4/public/r/styles/default/chart-tooltip-advanced.json
new file mode 100644
index 00000000000..2fd7550c17d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-tooltip-advanced.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-advanced",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-advanced.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Advanced</CardTitle>\n        <CardDescription>\n          Tooltip with custom formatter and total.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  className=\"w-[180px]\"\n                  formatter={(value, name, item, index) => (\n                    <>\n                      <div\n                        className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                        style={\n                          {\n                            \"--color-bg\": `var(--color-${name})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                      {/* Add this after the last item */}\n                      {index === 1 && (\n                        <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n                          Total\n                          <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                            {item.payload.running + item.payload.swimming}\n                            <span className=\"font-normal text-muted-foreground\">\n                              kcal\n                            </span>\n                          </div>\n                        </div>\n                      )}\n                    </>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-tooltip-default.json b/apps/v4/public/r/styles/default/chart-tooltip-default.json
new file mode 100644
index 00000000000..72f48f539b5
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-tooltip-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-default",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-default.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Default</CardTitle>\n        <CardDescription>\n          Default tooltip with ChartTooltipContent.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-tooltip-demo.json b/apps/v4/public/r/styles/default/chart-tooltip-demo.json
new file mode 100644
index 00000000000..7acfa77afcb
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-tooltip-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-tooltip-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute left-[-35px] top-[45px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute left-[5px] top-[50px] z-10\"\n        >\n          <g clip-path=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute left-[122px] top-[0px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute left-[85px] top-[10px] z-10 -scale-x-100\"\n        >\n          <g clip-path=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"!hidden md:!flex\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"!items-start !justify-start\">\n        <div className=\"absolute left-[50px] top-[60px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute left-[30px] top-[38px] z-10 rotate-[-40deg]\"\n        >\n          <g clip-path=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              <>\n                {!hideIndicator && (\n                  <div\n                    className={cn(\n                      \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                      {\n                        \"h-2.5 w-2.5\": indicator === \"dot\",\n                        \"w-1\": indicator === \"line\",\n                        \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                          indicator === \"dashed\",\n                        \"my-0.5\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\n                    }\n                  />\n                )}\n                <div\n                  className={cn(\n                    \"flex flex-1 justify-between leading-none\",\n                    nestLabel ? \"items-end\" : \"items-center\"\n                  )}\n                >\n                  <div className=\"grid gap-1.5\">\n                    {nestLabel ? tooltipLabel : null}\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                  </div>\n                  <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-tooltip-formatter.json b/apps/v4/public/r/styles/default/chart-tooltip-formatter.json
new file mode 100644
index 00000000000..39d76676afa
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-tooltip-formatter.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-formatter",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Formatter</CardTitle>\n        <CardDescription>Tooltip with custom formatter .</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  formatter={(value, name) => (\n                    <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-tooltip-icons.json b/apps/v4/public/r/styles/default/chart-tooltip-icons.json
new file mode 100644
index 00000000000..4ba931c92cb
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-tooltip-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-icons",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-icons.tsx",
+      "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Footprints,\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n    icon: Waves,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Icons</CardTitle>\n        <CardDescription>Tooltip with icons.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-tooltip-indicator-line.json b/apps/v4/public/r/styles/default/chart-tooltip-indicator-line.json
new file mode 100644
index 00000000000..b029d08ded0
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-tooltip-indicator-line.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-line",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-indicator-line.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Line Indicator</CardTitle>\n        <CardDescription>Tooltip with line indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent indicator=\"line\" />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-tooltip-indicator-none.json b/apps/v4/public/r/styles/default/chart-tooltip-indicator-none.json
new file mode 100644
index 00000000000..dbf4c93933f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-tooltip-indicator-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-none",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-indicator-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Indicator</CardTitle>\n        <CardDescription>Tooltip with no indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-tooltip-label-custom.json b/apps/v4/public/r/styles/default/chart-tooltip-label-custom.json
new file mode 100644
index 00000000000..092b4c55540
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-tooltip-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  activities: {\n    label: \"Activities\",\n  },\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Custom label</CardTitle>\n        <CardDescription>\n          Tooltip with custom label from chartConfig.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent labelKey=\"activities\" indicator=\"line\" />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-tooltip-label-formatter.json b/apps/v4/public/r/styles/default/chart-tooltip-label-formatter.json
new file mode 100644
index 00000000000..9ce9fe86444
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-tooltip-label-formatter.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-formatter",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Label Formatter</CardTitle>\n        <CardDescription>Tooltip with label formatter.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      day: \"numeric\",\n                      month: \"long\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart-tooltip-label-none.json b/apps/v4/public/r/styles/default/chart-tooltip-label-none.json
new file mode 100644
index 00000000000..a50fb4948e0
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart-tooltip-label-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-none",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Label</CardTitle>\n        <CardDescription>Tooltip with no label.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/chart.json b/apps/v4/public/r/styles/default/chart.json
new file mode 100644
index 00000000000..d58ee017729
--- /dev/null
+++ b/apps/v4/public/r/styles/default/chart.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "recharts@2.15.4",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "card"
+  ],
+  "files": [
+    {
+      "path": "ui/chart.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nconst ChartContainer = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    config: ChartConfig\n    children: React.ComponentProps<\n      typeof RechartsPrimitive.ResponsiveContainer\n    >[\"children\"]\n  }\n>(({ id, className, children, config, ...props }, ref) => {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        ref={ref}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n    React.ComponentProps<\"div\"> & {\n      hideLabel?: boolean\n      hideIndicator?: boolean\n      indicator?: \"line\" | \"dot\" | \"dashed\"\n      nameKey?: string\n      labelKey?: string\n    }\n>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) {\n        return null\n      }\n\n      const [item] = payload\n      const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n      const itemConfig = getPayloadConfigFromPayload(config, item, key)\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label\n\n      if (labelFormatter) {\n        return (\n          <div className={cn(\"font-medium\", labelClassName)}>\n            {labelFormatter(value, payload)}\n          </div>\n        )\n      }\n\n      if (!value) {\n        return null\n      }\n\n      return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n    }, [\n      label,\n      labelFormatter,\n      payload,\n      hideLabel,\n      labelClassName,\n      config,\n      labelKey,\n    ])\n\n    if (!active || !payload?.length) {\n      return null\n    }\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n          className\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload\n            .filter((item) => item.type !== \"none\")\n            .map((item, index) => {\n              const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n              const itemConfig = getPayloadConfigFromPayload(config, item, key)\n              const indicatorColor = color || item.payload.fill || item.color\n\n              return (\n                <div\n                  key={item.dataKey}\n                  className={cn(\n                    \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                    indicator === \"dot\" && \"items-center\"\n                  )}\n                >\n                  {formatter && item?.value !== undefined && item.name ? (\n                    formatter(item.value, item.name, item, index, item.payload)\n                  ) : (\n                    <>\n                      {itemConfig?.icon ? (\n                        <itemConfig.icon />\n                      ) : (\n                        !hideIndicator && (\n                          <div\n                            className={cn(\n                              \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                              {\n                                \"h-2.5 w-2.5\": indicator === \"dot\",\n                                \"w-1\": indicator === \"line\",\n                                \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                  indicator === \"dashed\",\n                                \"my-0.5\": nestLabel && indicator === \"dashed\",\n                              }\n                            )}\n                            style={\n                              {\n                                \"--color-bg\": indicatorColor,\n                                \"--color-border\": indicatorColor,\n                              } as React.CSSProperties\n                            }\n                          />\n                        )\n                      )}\n                      <div\n                        className={cn(\n                          \"flex flex-1 justify-between leading-none\",\n                          nestLabel ? \"items-end\" : \"items-center\"\n                        )}\n                      >\n                        <div className=\"grid gap-1.5\">\n                          {nestLabel ? tooltipLabel : null}\n                          <span className=\"text-muted-foreground\">\n                            {itemConfig?.label || item.name}\n                          </span>\n                        </div>\n                        {item.value && (\n                          <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                            {item.value.toLocaleString()}\n                          </span>\n                        )}\n                      </div>\n                    </>\n                  )}\n                </div>\n              )\n            })}\n        </div>\n      </div>\n    )\n  }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> &\n    Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n      hideIcon?: boolean\n      nameKey?: string\n    }\n>(\n  (\n    { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    if (!payload?.length) {\n      return null\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center gap-4\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className\n        )}\n      >\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item) => {\n            const key = `${nameKey || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n            return (\n              <div\n                key={item.value}\n                className={cn(\n                  \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n                )}\n              >\n                {itemConfig?.icon && !hideIcon ? (\n                  <itemConfig.icon />\n                ) : (\n                  <div\n                    className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                    style={{\n                      backgroundColor: item.color,\n                    }}\n                  />\n                )}\n                {itemConfig?.label}\n              </div>\n            )\n          })}\n      </div>\n    )\n  }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/checkbox-demo.json b/apps/v4/public/r/styles/default/checkbox-demo.json
new file mode 100644
index 00000000000..55db0158863
--- /dev/null
+++ b/apps/v4/public/r/styles/default/checkbox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nexport default function CheckboxDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <label\n        htmlFor=\"terms\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/checkbox-disabled.json b/apps/v4/public/r/styles/default/checkbox-disabled.json
new file mode 100644
index 00000000000..5a7a880c783
--- /dev/null
+++ b/apps/v4/public/r/styles/default/checkbox-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-disabled.tsx",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms2\" disabled />\n      <label\n        htmlFor=\"terms2\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/checkbox-form-multiple.json b/apps/v4/public/r/styles/default/checkbox-form-multiple.json
new file mode 100644
index 00000000000..b768e081cf4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/checkbox-form-multiple.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-multiple",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-multiple.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\n\nconst items = [\n  {\n    id: \"recents\",\n    label: \"Recents\",\n  },\n  {\n    id: \"home\",\n    label: \"Home\",\n  },\n  {\n    id: \"applications\",\n    label: \"Applications\",\n  },\n  {\n    id: \"desktop\",\n    label: \"Desktop\",\n  },\n  {\n    id: \"downloads\",\n    label: \"Downloads\",\n  },\n  {\n    id: \"documents\",\n    label: \"Documents\",\n  },\n] as const\n\nconst FormSchema = z.object({\n  items: z.array(z.string()).refine((value) => value.some((item) => item), {\n    message: \"You have to select at least one item.\",\n  }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      items: [\"recents\", \"home\"],\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"items\"\n          render={() => (\n            <FormItem>\n              <div className=\"mb-4\">\n                <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                <FormDescription>\n                  Select the items you want to display in the sidebar.\n                </FormDescription>\n              </div>\n              {items.map((item) => (\n                <FormField\n                  key={item.id}\n                  control={form.control}\n                  name=\"items\"\n                  render={({ field }) => {\n                    return (\n                      <FormItem\n                        key={item.id}\n                        className=\"flex flex-row items-start space-x-3 space-y-0\"\n                      >\n                        <FormControl>\n                          <Checkbox\n                            checked={field.value?.includes(item.id)}\n                            onCheckedChange={(checked) => {\n                              return checked\n                                ? field.onChange([...field.value, item.id])\n                                : field.onChange(\n                                    field.value?.filter(\n                                      (value) => value !== item.id\n                                    )\n                                  )\n                            }}\n                          />\n                        </FormControl>\n                        <FormLabel className=\"font-normal\">\n                          {item.label}\n                        </FormLabel>\n                      </FormItem>\n                    )\n                  }}\n                />\n              ))}\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/checkbox-form-single.json b/apps/v4/public/r/styles/default/checkbox-form-single.json
new file mode 100644
index 00000000000..c912bc018f3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/checkbox-form-single.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-single",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-single.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/default/ui/form\"\n\nconst FormSchema = z.object({\n  mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      mobile: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"mobile\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4\">\n              <FormControl>\n                <Checkbox\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <div className=\"space-y-1 leading-none\">\n                <FormLabel>\n                  Use different settings for my mobile devices\n                </FormLabel>\n                <FormDescription>\n                  You can manage your mobile notifications in the{\" \"}\n                  <Link href=\"/examples/forms\">mobile settings</Link> page.\n                </FormDescription>\n              </div>\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/checkbox-with-text.json b/apps/v4/public/r/styles/default/checkbox-with-text.json
new file mode 100644
index 00000000000..5539ed11723
--- /dev/null
+++ b/apps/v4/public/r/styles/default/checkbox-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-with-text.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n  return (\n    <div className=\"items-top flex space-x-2\">\n      <Checkbox id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-sm text-muted-foreground\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/checkbox.json b/apps/v4/public/r/styles/default/checkbox.json
new file mode 100644
index 00000000000..5c4b6ed2f60
--- /dev/null
+++ b/apps/v4/public/r/styles/default/checkbox.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-checkbox"
+  ],
+  "files": [
+    {
+      "path": "ui/checkbox.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <Check className=\"h-4 w-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/collapsible-demo.json b/apps/v4/public/r/styles/default/collapsible-demo.json
new file mode 100644
index 00000000000..50c1ba8b140
--- /dev/null
+++ b/apps/v4/public/r/styles/default/collapsible-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "examples/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/collapsible.json b/apps/v4/public/r/styles/default/collapsible.json
new file mode 100644
index 00000000000..65fdab451c0
--- /dev/null
+++ b/apps/v4/public/r/styles/default/collapsible.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-collapsible"
+  ],
+  "files": [
+    {
+      "path": "ui/collapsible.tsx",
+      "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/combobox-demo.json b/apps/v4/public/r/styles/default/combobox-demo.json
new file mode 100644
index 00000000000..4854fe2eec6
--- /dev/null
+++ b/apps/v4/public/r/styles/default/combobox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport default function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/combobox-dropdown-menu.json b/apps/v4/public/r/styles/default/combobox-dropdown-menu.json
new file mode 100644
index 00000000000..ae688cc0581
--- /dev/null
+++ b/apps/v4/public/r/styles/default/combobox-dropdown-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-dropdown-menu",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "dropdown-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nconst labels = [\n  \"feature\",\n  \"bug\",\n  \"enhancement\",\n  \"documentation\",\n  \"design\",\n  \"question\",\n  \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n  const [label, setLabel] = React.useState(\"feature\")\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n      <p className=\"text-sm font-medium leading-none\">\n        <span className=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">Create a new project</span>\n      </p>\n      <DropdownMenu open={open} onOpenChange={setOpen}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <MoreHorizontal />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n          <DropdownMenuLabel>Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <User />\n              Assign to...\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Calendar />\n              Set due date...\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <Tags />\n                Apply label\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"p-0\">\n                <Command>\n                  <CommandInput\n                    placeholder=\"Filter label...\"\n                    autoFocus={true}\n                  />\n                  <CommandList>\n                    <CommandEmpty>No label found.</CommandEmpty>\n                    <CommandGroup>\n                      {labels.map((label) => (\n                        <CommandItem\n                          key={label}\n                          value={label}\n                          onSelect={(value) => {\n                            setLabel(value)\n                            setOpen(false)\n                          }}\n                        >\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                  </CommandList>\n                </Command>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"text-red-600\">\n              <Trash />\n              Delete\n              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/combobox-form.json b/apps/v4/public/r/styles/default/combobox-form.json
new file mode 100644
index 00000000000..02525ed9bb3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/combobox-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst languages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n  language: z.string({\n    required_error: \"Please select a language.\",\n  }),\n})\n\nexport default function ComboboxForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"language\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Language</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      className={cn(\n                        \"w-[200px] justify-between\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value\n                        ? languages.find(\n                            (language) => language.value === field.value\n                          )?.label\n                        : \"Select language\"}\n                      <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-[200px] p-0\">\n                  <Command>\n                    <CommandInput placeholder=\"Search language...\" />\n                    <CommandList>\n                      <CommandEmpty>No language found.</CommandEmpty>\n                      <CommandGroup>\n                        {languages.map((language) => (\n                          <CommandItem\n                            value={language.label}\n                            key={language.value}\n                            onSelect={() => {\n                              form.setValue(\"language\", language.value)\n                            }}\n                          >\n                            {language.label}\n                            <Check\n                              className={cn(\n                                \"ml-auto\",\n                                language.value === field.value\n                                  ? \"opacity-100\"\n                                  : \"opacity-0\"\n                              )}\n                            />\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                This is the language that will be used in the dashboard.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/combobox-popover.json b/apps/v4/public/r/styles/default/combobox-popover.json
new file mode 100644
index 00000000000..42963c8ae09
--- /dev/null
+++ b/apps/v4/public/r/styles/default/combobox-popover.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-popover",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "combobox",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  LucideIcon,\n  XCircle,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n  icon: LucideIcon\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n    icon: HelpCircle,\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n    icon: Circle,\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n    icon: ArrowUpCircle,\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n    icon: CheckCircle2,\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n    icon: XCircle,\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-sm text-muted-foreground\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"w-[150px] justify-start\"\n          >\n            {selectedStatus ? (\n              <>\n                <selectedStatus.icon className=\"mr-2 h-4 w-4 shrink-0\" />\n                {selectedStatus.label}\n              </>\n            ) : (\n              <>+ Set status</>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    <status.icon\n                      className={cn(\n                        \"mr-2 h-4 w-4\",\n                        status.value === selectedStatus?.value\n                          ? \"opacity-100\"\n                          : \"opacity-40\"\n                      )}\n                    />\n                    <span>{status.label}</span>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/combobox-responsive.json b/apps/v4/public/r/styles/default/combobox-responsive.json
new file mode 100644
index 00000000000..bde716e46a4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/combobox-responsive.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-responsive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "combobox",
+    "popover",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboBoxResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  if (isDesktop) {\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </PopoverContent>\n      </Popover>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mt-4 border-t\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction StatusList({\n  setOpen,\n  setSelectedStatus,\n}: {\n  setOpen: (open: boolean) => void\n  setSelectedStatus: (status: Status | null) => void\n}) {\n  return (\n    <Command>\n      <CommandInput placeholder=\"Filter status...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup>\n          {statuses.map((status) => (\n            <CommandItem\n              key={status.value}\n              value={status.value}\n              onSelect={(value) => {\n                setSelectedStatus(\n                  statuses.find((priority) => priority.value === value) || null\n                )\n                setOpen(false)\n              }}\n            >\n              {status.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/command-demo.json b/apps/v4/public/r/styles/default/command-demo.json
new file mode 100644
index 00000000000..1f4ad1310dd
--- /dev/null
+++ b/apps/v4/public/r/styles/default/command-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/command-demo.tsx",
+      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\"\n\nexport default function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/command-dialog.json b/apps/v4/public/r/styles/default/command-dialog.json
new file mode 100644
index 00000000000..0aae35fc4f2
--- /dev/null
+++ b/apps/v4/public/r/styles/default/command-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-dialog",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/command-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\"\n\nexport default function CommandDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <p className=\"text-sm text-muted-foreground\">\n        Press{\" \"}\n        <kbd className=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/command.json b/apps/v4/public/r/styles/default/command.json
new file mode 100644
index 00000000000..0304943fb75
--- /dev/null
+++ b/apps/v4/public/r/styles/default/command.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "cmdk"
+  ],
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/command.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/default/ui/dialog\"\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/context-menu-demo.json b/apps/v4/public/r/styles/default/context-menu-demo.json
new file mode 100644
index 00000000000..e5856661fa7
--- /dev/null
+++ b/apps/v4/public/r/styles/default/context-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "context-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/context-menu-demo.tsx",
+      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nexport default function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/context-menu.json b/apps/v4/public/r/styles/default/context-menu.json
new file mode 100644
index 00000000000..7e16417c76d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/context-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-context-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/context-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/dashboard-01.json b/apps/v4/public/r/styles/default/dashboard-01.json
new file mode 100644
index 00000000000..9bde5db6e6f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/dashboard-01.json
@@ -0,0 +1,107 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dashboard-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A dashboard with sidebar, charts and data table.",
+  "dependencies": [
+    "@dnd-kit/core",
+    "@dnd-kit/modifiers",
+    "@dnd-kit/sortable",
+    "@dnd-kit/utilities",
+    "@tanstack/react-table",
+    "zod"
+  ],
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "chart",
+    "card",
+    "select",
+    "tabs",
+    "table",
+    "toggle-group",
+    "badge",
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "drawer",
+    "input",
+    "avatar",
+    "sheet",
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "blocks/dashboard-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/dashboard-01/components/app-sidebar\"\nimport { ChartAreaInteractive } from \"@/registry/default/blocks/dashboard-01/components/chart-area-interactive\"\nimport { DataTable } from \"@/registry/default/blocks/dashboard-01/components/data-table\"\nimport { SectionCards } from \"@/registry/default/blocks/dashboard-01/components/section-cards\"\nimport { SiteHeader } from \"@/registry/default/blocks/dashboard-01/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/default/ui/sidebar\"\n\nimport data from \"./data.json\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar variant=\"inset\" />\n      <SidebarInset>\n        <SiteHeader />\n        <div className=\"flex flex-1 flex-col\">\n          <div className=\"@container/main flex flex-1 flex-col gap-2\">\n            <div className=\"flex flex-col gap-4 py-4 md:gap-6 md:py-6\">\n              <SectionCards />\n              <div className=\"px-4 lg:px-6\">\n                <ChartAreaInteractive />\n              </div>\n              <DataTable data={data} />\n            </div>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/dashboard-01/data.json",
+      "content": "[\n  {\n    \"id\": 1,\n    \"header\": \"Cover page\",\n    \"type\": \"Cover page\",\n    \"status\": \"In Process\",\n    \"target\": \"18\",\n    \"limit\": \"5\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 2,\n    \"header\": \"Table of contents\",\n    \"type\": \"Table of contents\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 3,\n    \"header\": \"Executive summary\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"10\",\n    \"limit\": \"13\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 4,\n    \"header\": \"Technical approach\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"27\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 5,\n    \"header\": \"Design\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"2\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 6,\n    \"header\": \"Capabilities\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"20\",\n    \"limit\": \"8\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 7,\n    \"header\": \"Integration with existing systems\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 8,\n    \"header\": \"Innovation and Advantages\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"25\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 9,\n    \"header\": \"Overview of EMR's Innovative Solutions\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"7\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 10,\n    \"header\": \"Advanced Algorithms and Machine Learning\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 11,\n    \"header\": \"Adaptive Communication Protocols\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"9\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 12,\n    \"header\": \"Advantages Over Current Technologies\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"0\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 13,\n    \"header\": \"Past Performance\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 14,\n    \"header\": \"Customer Feedback and Satisfaction Levels\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"34\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 15,\n    \"header\": \"Implementation Challenges and Solutions\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"3\",\n    \"limit\": \"35\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 16,\n    \"header\": \"Security Measures and Data Protection Policies\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"6\",\n    \"limit\": \"36\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 17,\n    \"header\": \"Scalability and Future Proofing\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"4\",\n    \"limit\": \"37\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 18,\n    \"header\": \"Cost-Benefit Analysis\",\n    \"type\": \"Plain language\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"38\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 19,\n    \"header\": \"User Training and Onboarding Experience\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"17\",\n    \"limit\": \"39\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 20,\n    \"header\": \"Future Development Roadmap\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"11\",\n    \"limit\": \"40\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 21,\n    \"header\": \"System Architecture Overview\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"24\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Maya Johnson\"\n  },\n  {\n    \"id\": 22,\n    \"header\": \"Risk Management Plan\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Carlos Rodriguez\"\n  },\n  {\n    \"id\": 23,\n    \"header\": \"Compliance Documentation\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"31\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Sarah Chen\"\n  },\n  {\n    \"id\": 24,\n    \"header\": \"API Documentation\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"8\",\n    \"limit\": \"12\",\n    \"reviewer\": \"Raj Patel\"\n  },\n  {\n    \"id\": 25,\n    \"header\": \"User Interface Mockups\",\n    \"type\": \"Visual\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Leila Ahmadi\"\n  },\n  {\n    \"id\": 26,\n    \"header\": \"Database Schema\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Thomas Wilson\"\n  },\n  {\n    \"id\": 27,\n    \"header\": \"Testing Methodology\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 28,\n    \"header\": \"Deployment Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 29,\n    \"header\": \"Budget Breakdown\",\n    \"type\": \"Financial\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 30,\n    \"header\": \"Market Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Sophia Martinez\"\n  },\n  {\n    \"id\": 31,\n    \"header\": \"Competitor Comparison\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 32,\n    \"header\": \"Maintenance Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Alex Thompson\"\n  },\n  {\n    \"id\": 33,\n    \"header\": \"User Personas\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Nina Patel\"\n  },\n  {\n    \"id\": 34,\n    \"header\": \"Accessibility Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 35,\n    \"header\": \"Performance Metrics\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"David Kim\"\n  },\n  {\n    \"id\": 36,\n    \"header\": \"Disaster Recovery Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 37,\n    \"header\": \"Third-party Integrations\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 38,\n    \"header\": \"User Feedback Summary\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 39,\n    \"header\": \"Localization Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"12\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Maria Garcia\"\n  },\n  {\n    \"id\": 40,\n    \"header\": \"Mobile Compatibility\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"James Wilson\"\n  },\n  {\n    \"id\": 41,\n    \"header\": \"Data Migration Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 42,\n    \"header\": \"Quality Assurance Protocols\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Priya Singh\"\n  },\n  {\n    \"id\": 43,\n    \"header\": \"Stakeholder Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"11\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 44,\n    \"header\": \"Environmental Impact Assessment\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 45,\n    \"header\": \"Intellectual Property Rights\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Sarah Johnson\"\n  },\n  {\n    \"id\": 46,\n    \"header\": \"Customer Support Framework\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 47,\n    \"header\": \"Version Control Strategy\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 48,\n    \"header\": \"Continuous Integration Pipeline\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Michael Chen\"\n  },\n  {\n    \"id\": 49,\n    \"header\": \"Regulatory Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 50,\n    \"header\": \"User Authentication System\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 51,\n    \"header\": \"Data Analytics Framework\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 52,\n    \"header\": \"Cloud Infrastructure\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 53,\n    \"header\": \"Network Security Measures\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Lisa Wong\"\n  },\n  {\n    \"id\": 54,\n    \"header\": \"Project Timeline\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 55,\n    \"header\": \"Resource Allocation\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 56,\n    \"header\": \"Team Structure and Roles\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 57,\n    \"header\": \"Communication Protocols\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 58,\n    \"header\": \"Success Metrics\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 59,\n    \"header\": \"Internationalization Support\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 60,\n    \"header\": \"Backup and Recovery Procedures\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 61,\n    \"header\": \"Monitoring and Alerting System\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Daniel Park\"\n  },\n  {\n    \"id\": 62,\n    \"header\": \"Code Review Guidelines\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 63,\n    \"header\": \"Documentation Standards\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 64,\n    \"header\": \"Release Management Process\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 65,\n    \"header\": \"Feature Prioritization Matrix\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Emma Davis\"\n  },\n  {\n    \"id\": 66,\n    \"header\": \"Technical Debt Assessment\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 67,\n    \"header\": \"Capacity Planning\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 68,\n    \"header\": \"Service Level Agreements\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Assign reviewer\"\n  }\n]\n",
+      "type": "registry:file",
+      "target": "app/dashboard/data.json"
+    },
+    {
+      "path": "blocks/dashboard-01/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpCircleIcon,\n  BarChartIcon,\n  CameraIcon,\n  ClipboardListIcon,\n  DatabaseIcon,\n  FileCodeIcon,\n  FileIcon,\n  FileTextIcon,\n  FolderIcon,\n  HelpCircleIcon,\n  LayoutDashboardIcon,\n  ListIcon,\n  SearchIcon,\n  SettingsIcon,\n  UsersIcon,\n} from \"lucide-react\"\n\nimport { NavDocuments } from \"@/registry/default/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/default/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/default/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/default/blocks/dashboard-01/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Dashboard\",\n      url: \"#\",\n      icon: LayoutDashboardIcon,\n    },\n    {\n      title: \"Lifecycle\",\n      url: \"#\",\n      icon: ListIcon,\n    },\n    {\n      title: \"Analytics\",\n      url: \"#\",\n      icon: BarChartIcon,\n    },\n    {\n      title: \"Projects\",\n      url: \"#\",\n      icon: FolderIcon,\n    },\n    {\n      title: \"Team\",\n      url: \"#\",\n      icon: UsersIcon,\n    },\n  ],\n  navClouds: [\n    {\n      title: \"Capture\",\n      icon: CameraIcon,\n      isActive: true,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Proposal\",\n      icon: FileTextIcon,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Prompts\",\n      icon: FileCodeIcon,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: SettingsIcon,\n    },\n    {\n      title: \"Get Help\",\n      url: \"#\",\n      icon: HelpCircleIcon,\n    },\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: SearchIcon,\n    },\n  ],\n  documents: [\n    {\n      name: \"Data Library\",\n      url: \"#\",\n      icon: DatabaseIcon,\n    },\n    {\n      name: \"Reports\",\n      url: \"#\",\n      icon: ClipboardListIcon,\n    },\n    {\n      name: \"Word Assistant\",\n      url: \"#\",\n      icon: FileIcon,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              asChild\n              className=\"data-[slot=sidebar-menu-button]:!p-1.5\"\n            >\n              <a href=\"#\">\n                <ArrowUpCircleIcon className=\"h-5 w-5\" />\n                <span className=\"text-base font-semibold\">Acme Inc.</span>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavDocuments items={data.documents} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/default/hooks/use-mobile\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const isMobile = useIsMobile()\n  const [timeRange, setTimeRange] = React.useState(\"30d\")\n\n  React.useEffect(() => {\n    if (isMobile) {\n      setTimeRange(\"7d\")\n    }\n  }, [isMobile])\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"@container/card\">\n      <CardHeader className=\"relative\">\n        <CardTitle>Total Visitors</CardTitle>\n        <CardDescription>\n          <span className=\"@[540px]/card:block hidden\">\n            Total for the last 3 months\n          </span>\n          <span className=\"@[540px]/card:hidden\">Last 3 months</span>\n        </CardDescription>\n        <div className=\"absolute right-4 top-4\">\n          <ToggleGroup\n            type=\"single\"\n            value={timeRange}\n            onValueChange={setTimeRange}\n            variant=\"outline\"\n            className=\"@[767px]/card:flex hidden\"\n          >\n            <ToggleGroupItem value=\"90d\" className=\"h-8 px-2.5\">\n              Last 3 months\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"30d\" className=\"h-8 px-2.5\">\n              Last 30 days\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"7d\" className=\"h-8 px-2.5\">\n              Last 7 days\n            </ToggleGroupItem>\n          </ToggleGroup>\n          <Select value={timeRange} onValueChange={setTimeRange}>\n            <SelectTrigger\n              className=\"@[767px]/card:hidden flex w-40\"\n              aria-label=\"Select a value\"\n            >\n              <SelectValue placeholder=\"Last 3 months\" />\n            </SelectTrigger>\n            <SelectContent className=\"rounded-xl\">\n              <SelectItem value=\"90d\" className=\"rounded-lg\">\n                Last 3 months\n              </SelectItem>\n              <SelectItem value=\"30d\" className=\"rounded-lg\">\n                Last 30 days\n              </SelectItem>\n              <SelectItem value=\"7d\" className=\"rounded-lg\">\n                Last 7 days\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={1.0}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/data-table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  SortableContext,\n  arrayMove,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  Row,\n  SortingState,\n  VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport {\n  CheckCircle2Icon,\n  CheckCircleIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsLeftIcon,\n  ChevronsRightIcon,\n  ColumnsIcon,\n  GripVerticalIcon,\n  LoaderIcon,\n  MoreVerticalIcon,\n  PlusIcon,\n  TrendingUpIcon,\n} from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/default/hooks/use-mobile\"\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <GripVerticalIcon className=\"size-3 text-muted-foreground\" />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge\n        variant=\"outline\"\n        className=\"flex gap-1 px-1.5 text-muted-foreground [&_svg]:size-3\"\n      >\n        {row.original.status === \"Done\" ? (\n          <CheckCircle2Icon className=\"text-green-500 dark:text-green-400\" />\n        ) : (\n          <LoaderIcon />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"h-8 w-40\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n              <SelectItem value=\"Jamik Tashpulatov\">\n                Jamik Tashpulatov\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"flex size-8 text-muted-foreground data-[state=open]:bg-muted\"\n            size=\"icon\"\n          >\n            <MoreVerticalIcon />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"flex w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"@4xl/main:hidden flex w-fit\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"outline\">Outline</SelectItem>\n            <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n            <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n            <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"@4xl/main:flex hidden\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\" className=\"gap-1\">\n            Past Performance{\" \"}\n            <Badge\n              variant=\"secondary\"\n              className=\"flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30\"\n            >\n              3\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\" className=\"gap-1\">\n            Key Personnel{\" \"}\n            <Badge\n              variant=\"secondary\"\n              className=\"flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30\"\n            >\n              2\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <ColumnsIcon />\n                <span className=\"hidden lg:inline\">Customize Columns</span>\n                <span className=\"lg:hidden\">Columns</span>\n                <ChevronDownIcon />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <PlusIcon />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  {[10, 20, 30, 40, 50].map((pageSize) => (\n                    <SelectItem key={pageSize} value={`${pageSize}`}>\n                      {pageSize}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <ChevronsLeftIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <ChevronLeftIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <ChevronRightIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <ChevronsRightIcon />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </SheetTrigger>\n      <SheetContent side=\"right\" className=\"flex flex-col\">\n        <SheetHeader className=\"gap-1\">\n          <SheetTitle>{item.header}</SheetTitle>\n          <SheetDescription>\n            Showing total visitors for the last 6 months\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto py-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 font-medium leading-none\">\n                  Trending up by 5.2% this month{\" \"}\n                  <TrendingUpIcon className=\"size-4\" />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Table of Contents\">\n                      Table of Contents\n                    </SelectItem>\n                    <SelectItem value=\"Executive Summary\">\n                      Executive Summary\n                    </SelectItem>\n                    <SelectItem value=\"Technical Approach\">\n                      Technical Approach\n                    </SelectItem>\n                    <SelectItem value=\"Design\">Design</SelectItem>\n                    <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                    <SelectItem value=\"Focus Documents\">\n                      Focus Documents\n                    </SelectItem>\n                    <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                    <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Done\">Done</SelectItem>\n                    <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                    <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                  <SelectItem value=\"Jamik Tashpulatov\">\n                    Jamik Tashpulatov\n                  </SelectItem>\n                  <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <SheetFooter className=\"mt-auto flex gap-2 sm:flex-col sm:space-x-0\">\n          <Button className=\"w-full\">Submit</Button>\n          <SheetClose asChild>\n            <Button variant=\"outline\" className=\"w-full\">\n              Done\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-documents.tsx",
+      "content": "\"use client\"\n\nimport {\n  FolderIcon,\n  MoreHorizontalIcon,\n  ShareIcon,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"rounded-sm data-[state=open]:bg-accent\"\n                >\n                  <MoreHorizontalIcon />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <FolderIcon />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ShareIcon />\n                  <span>Share</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontalIcon className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { MailIcon, PlusCircleIcon, type LucideIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <PlusCircleIcon />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"h-9 w-9 shrink-0 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <MailIcon />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon && <item.icon />}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BellIcon,\n  CreditCardIcon,\n  LogOutIcon,\n  MoreVerticalIcon,\n  UserCircleIcon,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {user.email}\n                </span>\n              </div>\n              <MoreVerticalIcon className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <UserCircleIcon />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCardIcon />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <BellIcon />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOutIcon />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/section-cards.tsx",
+      "content": "import { TrendingDownIcon, TrendingUpIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:shadow-xs @xl/main:grid-cols-2 @5xl/main:grid-cols-4 grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card lg:px-6\">\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            $1,250.00\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +12.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            1,234\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingDownIcon className=\"size-3\" />\n              -20%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period <TrendingDownIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            45,678\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +12.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            4.5%\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +4.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/site-header.tsx",
+      "content": "import { Separator } from \"@/registry/default/ui/separator\"\nimport { SidebarTrigger } from \"@/registry/default/ui/sidebar\"\n\nexport function SiteHeader() {\n  return (\n    <header className=\"group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear\">\n      <div className=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\n        <SidebarTrigger className=\"-ml-1\" />\n        <Separator\n          orientation=\"vertical\"\n          className=\"mx-2 data-[orientation=vertical]:h-4\"\n        />\n        <h1 className=\"text-base font-medium\">Documents</h1>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/data-table-demo.json b/apps/v4/public/r/styles/default/data-table-demo.json
new file mode 100644
index 00000000000..8daeb06eca2
--- /dev/null
+++ b/apps/v4/public/r/styles/default/data-table-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-table-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "data-table"
+  ],
+  "files": [
+    {
+      "path": "examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  SortingState,\n  VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst data: Payment[] = [\n  {\n    id: \"m5gr84i9\",\n    amount: 316,\n    status: \"success\",\n    email: \"ken99@example.com\",\n  },\n  {\n    id: \"3u1reuv4\",\n    amount: 242,\n    status: \"success\",\n    email: \"Abe45@example.com\",\n  },\n  {\n    id: \"derv1ws0\",\n    amount: 837,\n    status: \"processing\",\n    email: \"Monserrat44@example.com\",\n  },\n  {\n    id: \"5kma53ae\",\n    amount: 874,\n    status: \"success\",\n    email: \"Silas22@example.com\",\n  },\n  {\n    id: \"bhqecj4p\",\n    amount: 721,\n    status: \"failed\",\n    email: \"carmella@example.com\",\n  },\n]\n\nexport type Payment = {\n  id: string\n  amount: number\n  status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n  email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n    ),\n  },\n  {\n    accessorKey: \"email\",\n    header: ({ column }) => {\n      return (\n        <Button\n          variant=\"ghost\"\n          onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n        >\n          Email\n          <ArrowUpDown />\n        </Button>\n      )\n    },\n    cell: ({ row }) => <div className=\"lowercase\">{row.getValue(\"email\")}</div>,\n  },\n  {\n    accessorKey: \"amount\",\n    header: () => <div className=\"text-right\">Amount</div>,\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"amount\"))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n\n      return <div className=\"text-right font-medium\">{formatted}</div>\n    },\n  },\n  {\n    id: \"actions\",\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" className=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem\n              onClick={() => navigator.clipboard.writeText(payment.id)}\n            >\n              Copy payment ID\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>View customer</DropdownMenuItem>\n            <DropdownMenuItem>View payment details</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      )\n    },\n  },\n]\n\nexport default function DataTableDemo() {\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [rowSelection, setRowSelection] = React.useState({})\n\n  const table = useReactTable({\n    data,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n  })\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-center py-4\">\n        <Input\n          placeholder=\"Filter emails...\"\n          value={(table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"}\n          onChange={(event) =>\n            table.getColumn(\"email\")?.setFilterValue(event.target.value)\n          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDown />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {table\n              .getAllColumns()\n              .filter((column) => column.getCanHide())\n              .map((column) => {\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    className=\"capitalize\"\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {column.id}\n                  </DropdownMenuCheckboxItem>\n                )\n              })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex items-center justify-end space-x-2 py-4\">\n        <div className=\"flex-1 text-sm text-muted-foreground\">\n          {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n          {table.getFilteredRowModel().rows.length} row(s) selected.\n        </div>\n        <div className=\"space-x-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            Previous\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            Next\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/date-picker-demo.json b/apps/v4/public/r/styles/default/date-picker-demo.json
new file mode 100644
index 00000000000..2fbcbf66ce4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/date-picker-demo.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[280px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/date-picker-form.json b/apps/v4/public/r/styles/default/date-picker-form.json
new file mode 100644
index 00000000000..2f4a593f8a6
--- /dev/null
+++ b/apps/v4/public/r/styles/default/date-picker-form.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function DatePickerForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/date-picker-with-presets.json b/apps/v4/public/r/styles/default/date-picker-with-presets.json
new file mode 100644
index 00000000000..21a33a4230c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/date-picker-with-presets.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-presets",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-presets.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function DatePickerWithPresets() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[280px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"flex w-auto flex-col space-y-2 p-2\">\n        <Select\n          onValueChange={(value) =>\n            setDate(addDays(new Date(), parseInt(value)))\n          }\n        >\n          <SelectTrigger>\n            <SelectValue placeholder=\"Select\" />\n          </SelectTrigger>\n          <SelectContent position=\"popper\">\n            <SelectItem value=\"0\">Today</SelectItem>\n            <SelectItem value=\"1\">Tomorrow</SelectItem>\n            <SelectItem value=\"3\">In 3 days</SelectItem>\n            <SelectItem value=\"7\">In a week</SelectItem>\n          </SelectContent>\n        </Select>\n        <div className=\"rounded-md border\">\n          <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/date-picker-with-range.json b/apps/v4/public/r/styles/default/date-picker-with-range.json
new file mode 100644
index 00000000000..a46e4127757
--- /dev/null
+++ b/apps/v4/public/r/styles/default/date-picker-with-range.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-range",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-range.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function DatePickerWithRange({\n  className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(2022, 0, 20),\n    to: addDays(new Date(2022, 0, 20), 20),\n  })\n\n  return (\n    <div className={cn(\"grid gap-2\", className)}>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id=\"date\"\n            variant={\"outline\"}\n            className={cn(\n              \"w-[300px] justify-start text-left font-normal\",\n              !date && \"text-muted-foreground\"\n            )}\n          >\n            <CalendarIcon />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            initialFocus\n            mode=\"range\"\n            defaultMonth={date?.from}\n            selected={date}\n            onSelect={setDate}\n            numberOfMonths={2}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/dialog-close-button.json b/apps/v4/public/r/styles/default/dialog-close-button.json
new file mode 100644
index 00000000000..fd434159dd5
--- /dev/null
+++ b/apps/v4/public/r/styles/default/dialog-close-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-close-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-close-button.tsx",
+      "content": "import { Copy } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function DialogCloseButton() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Share</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share link</DialogTitle>\n          <DialogDescription>\n            Anyone who has this link will be able to view this.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex items-center space-x-2\">\n          <div className=\"grid flex-1 gap-2\">\n            <Label htmlFor=\"link\" className=\"sr-only\">\n              Link\n            </Label>\n            <Input\n              id=\"link\"\n              defaultValue=\"https://ui.shadcn.com/docs/installation\"\n              readOnly\n            />\n          </div>\n          <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n            <span className=\"sr-only\">Copy</span>\n            <Copy />\n          </Button>\n        </div>\n        <DialogFooter className=\"sm:justify-start\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"secondary\">\n              Close\n            </Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/dialog-demo.json b/apps/v4/public/r/styles/default/dialog-demo.json
new file mode 100644
index 00000000000..8ee6c854989
--- /dev/null
+++ b/apps/v4/public/r/styles/default/dialog-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input\n              id=\"name\"\n              defaultValue=\"Pedro Duarte\"\n              className=\"col-span-3\"\n            />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input\n              id=\"username\"\n              defaultValue=\"@peduarte\"\n              className=\"col-span-3\"\n            />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/dialog.json b/apps/v4/public/r/styles/default/dialog.json
new file mode 100644
index 00000000000..9bd36471525
--- /dev/null
+++ b/apps/v4/public/r/styles/default/dialog.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/drawer-demo.json b/apps/v4/public/r/styles/default/drawer-demo.json
new file mode 100644
index 00000000000..8dd069d192f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/drawer-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport default function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/drawer-dialog.json b/apps/v4/public/r/styles/default/drawer-dialog.json
new file mode 100644
index 00000000000..6838981a3a1
--- /dev/null
+++ b/apps/v4/public/r/styles/default/drawer-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-dialog",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "drawer",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-dialog.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Edit Profile</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you're done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-4\", className)}>\n      <div className=\"grid gap-2\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-2\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/drawer.json b/apps/v4/public/r/styles/default/drawer.json
new file mode 100644
index 00000000000..4ea15139020
--- /dev/null
+++ b/apps/v4/public/r/styles/default/drawer.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "vaul",
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/drawer.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root\n    shouldScaleBackground={shouldScaleBackground}\n    {...props}\n  />\n)\nDrawer.displayName = \"Drawer\"\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Overlay\n    ref={ref}\n    className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n    {...props}\n  />\n))\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\n\nconst DrawerContent = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      {children}\n    </DrawerPrimitive.Content>\n  </DrawerPortal>\n))\nDrawerContent.displayName = \"DrawerContent\"\n\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n    {...props}\n  />\n)\nDrawerHeader.displayName = \"DrawerHeader\"\n\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    {...props}\n  />\n)\nDrawerFooter.displayName = \"DrawerFooter\"\n\nconst DrawerTitle = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/dropdown-menu-checkboxes.json b/apps/v4/public/r/styles/default/dropdown-menu-checkboxes.json
new file mode 100644
index 00000000000..3c657ea94cc
--- /dev/null
+++ b/apps/v4/public/r/styles/default/dropdown-menu-checkboxes.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-checkboxes",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-checkboxes.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\ntype Checked = DropdownMenuCheckboxItemProps[\"checked\"]\n\nexport default function DropdownMenuCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n  const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuCheckboxItem\n          checked={showStatusBar}\n          onCheckedChange={setShowStatusBar}\n        >\n          Status Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showActivityBar}\n          onCheckedChange={setShowActivityBar}\n          disabled\n        >\n          Activity Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showPanel}\n          onCheckedChange={setShowPanel}\n        >\n          Panel\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/dropdown-menu-demo.json b/apps/v4/public/r/styles/default/dropdown-menu-demo.json
new file mode 100644
index 00000000000..b6337201c6c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/dropdown-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-demo.tsx",
+      "content": "import {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User />\n            <span>Profile</span>\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <CreditCard />\n            <span>Billing</span>\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Settings />\n            <span>Settings</span>\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Keyboard />\n            <span>Keyboard shortcuts</span>\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Users />\n            <span>Team</span>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <UserPlus />\n              <span>Invite users</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>\n                  <Mail />\n                  <span>Email</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <MessageSquare />\n                  <span>Message</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <PlusCircle />\n                  <span>More...</span>\n                </DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            <Plus />\n            <span>New Team</span>\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <Github />\n          <span>GitHub</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <LifeBuoy />\n          <span>Support</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem disabled>\n          <Cloud />\n          <span>API</span>\n        </DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOut />\n          <span>Log out</span>\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/dropdown-menu-radio-group.json b/apps/v4/public/r/styles/default/dropdown-menu-radio-group.json
new file mode 100644
index 00000000000..39edac72f3d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/dropdown-menu-radio-group.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-radio-group",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function DropdownMenuRadioGroupDemo() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>\n          <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"bottom\">Bottom</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"right\">Right</DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/dropdown-menu.json b/apps/v4/public/r/styles/default/dropdown-menu.json
new file mode 100644
index 00000000000..52bf6a0befa
--- /dev/null
+++ b/apps/v4/public/r/styles/default/dropdown-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/form.json b/apps/v4/public/r/styles/default/form.json
new file mode 100644
index 00000000000..6e02cdc914f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/form.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "form",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-label",
+    "@radix-ui/react-slot",
+    "@hookform/resolvers",
+    "zod",
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "ui/form.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-sm font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/hover-card-demo.json b/apps/v4/public/r/styles/default/hover-card-demo.json
new file mode 100644
index 00000000000..1507f638374
--- /dev/null
+++ b/apps/v4/public/r/styles/default/hover-card-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "hover-card"
+  ],
+  "files": [
+    {
+      "path": "examples/hover-card-demo.tsx",
+      "content": "import { CalendarDays } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarDays className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-muted-foreground\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/hover-card.json b/apps/v4/public/r/styles/default/hover-card.json
new file mode 100644
index 00000000000..0bbe76aa4bd
--- /dev/null
+++ b/apps/v4/public/r/styles/default/hover-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-hover-card"
+  ],
+  "files": [
+    {
+      "path": "ui/hover-card.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/index.json b/apps/v4/public/r/styles/default/index.json
new file mode 100644
index 00000000000..924399da430
--- /dev/null
+++ b/apps/v4/public/r/styles/default/index.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {}
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-demo.json b/apps/v4/public/r/styles/default/input-demo.json
new file mode 100644
index 00000000000..df56c06cc1c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-demo.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-disabled.json b/apps/v4/public/r/styles/default/input-disabled.json
new file mode 100644
index 00000000000..10b9e1cae4f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-disabled.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputDisabled() {\n  return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-file.json b/apps/v4/public/r/styles/default/input-file.json
new file mode 100644
index 00000000000..970ddcfba58
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-file.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-file",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-file.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function InputFile() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"picture\">Picture</Label>\n      <Input id=\"picture\" type=\"file\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-form.json b/apps/v4/public/r/styles/default/input-form.json
new file mode 100644
index 00000000000..53a2a168b5c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nconst FormSchema = z.object({\n  username: z.string().min(2, {\n    message: \"Username must be at least 2 characters.\",\n  }),\n})\n\nexport default function InputForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      username: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-otp-controlled.json b/apps/v4/public/r/styles/default/input-otp-controlled.json
new file mode 100644
index 00000000000..b4a012645f1
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-otp-controlled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-controlled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport default function InputOTPControlled() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <div className=\"space-y-2\">\n      <InputOTP\n        maxLength={6}\n        value={value}\n        onChange={(value) => setValue(value)}\n      >\n        <InputOTPGroup>\n          <InputOTPSlot index={0} />\n          <InputOTPSlot index={1} />\n          <InputOTPSlot index={2} />\n          <InputOTPSlot index={3} />\n          <InputOTPSlot index={4} />\n          <InputOTPSlot index={5} />\n        </InputOTPGroup>\n      </InputOTP>\n      <div className=\"text-center text-sm\">\n        {value === \"\" ? (\n          <>Enter your one-time password.</>\n        ) : (\n          <>You entered: {value}</>\n        )}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-otp-demo.json b/apps/v4/public/r/styles/default/input-otp-demo.json
new file mode 100644
index 00000000000..9bd8b8eae67
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-otp-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-demo.tsx",
+      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-otp-form.json b/apps/v4/public/r/styles/default/input-otp-form.json
new file mode 100644
index 00000000000..ce849e1ec92
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-otp-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nconst FormSchema = z.object({\n  pin: z.string().min(6, {\n    message: \"Your one-time password must be 6 characters.\",\n  }),\n})\n\nexport default function InputOTPForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      pin: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"pin\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>One-Time Password</FormLabel>\n              <FormControl>\n                <InputOTP maxLength={6} {...field}>\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormControl>\n              <FormDescription>\n                Please enter the one-time password sent to your phone.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-otp-pattern.json b/apps/v4/public/r/styles/default/input-otp-pattern.json
new file mode 100644
index 00000000000..db857852de5
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-otp-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-pattern",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-pattern.tsx",
+      "content": "import { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport default function InputOTPPattern() {\n  return (\n    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-otp-separator.json b/apps/v4/public/r/styles/default/input-otp-separator.json
new file mode 100644
index 00000000000..6c19fca338b
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-otp-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-separator",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-separator.tsx",
+      "content": "import React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport default function InputOTPWithSeparator() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-otp.json b/apps/v4/public/r/styles/default/input-otp.json
new file mode 100644
index 00000000000..93a19b5dc3d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-otp.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "ui/input-otp.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Dot } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\n      \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n      containerClassName\n    )}\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-2 ring-ring ring-offset-background\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Dot />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-with-button.json b/apps/v4/public/r/styles/default/input-with-button.json
new file mode 100644
index 00000000000..9017dd28126
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-with-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-button.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputWithButton() {\n  return (\n    <div className=\"flex w-full max-w-sm items-center space-x-2\">\n      <Input type=\"email\" placeholder=\"Email\" />\n      <Button type=\"submit\">Subscribe</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-with-label.json b/apps/v4/public/r/styles/default/input-with-label.json
new file mode 100644
index 00000000000..1ff7204c162
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-with-label.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-label",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-label.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function InputWithLabel() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email\">Email</Label>\n      <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input-with-text.json b/apps/v4/public/r/styles/default/input-with-text.json
new file mode 100644
index 00000000000..032d6bed937
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input-with-text.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-text.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function InputWithText() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email-2\">Email</Label>\n      <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n      <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/input.json b/apps/v4/public/r/styles/default/input.json
new file mode 100644
index 00000000000..c91c1d3de85
--- /dev/null
+++ b/apps/v4/public/r/styles/default/input.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "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",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/label-demo.json b/apps/v4/public/r/styles/default/label-demo.json
new file mode 100644
index 00000000000..e5b9008d45c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/label-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/label.json b/apps/v4/public/r/styles/default/label.json
new file mode 100644
index 00000000000..9731d7b73a3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/label.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-label"
+  ],
+  "files": [
+    {
+      "path": "ui/label.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n  />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/login-01.json b/apps/v4/public/r/styles/default/login-01.json
new file mode 100644
index 00000000000..b291727d162
--- /dev/null
+++ b/apps/v4/public/r/styles/default/login-01.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple login form.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/default/blocks/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": "blocks/login-01/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>\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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/login-02.json b/apps/v4/public/r/styles/default/login-02.json
new file mode 100644
index 00000000000..1a2b026550f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/login-02.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/default/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/login-03.json b/apps/v4/public/r/styles/default/login-03.json
new file mode 100644
index 00000000000..da402b8b74f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/login-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/default/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/login-04.json b/apps/v4/public/r/styles/default/login-04.json
new file mode 100644
index 00000000000..931d3d0d587
--- /dev/null
+++ b/apps/v4/public/r/styles/default/login-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/default/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-04/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Card, CardContent } 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.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\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                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 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              <div className=\"grid grid-cols-3 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                  <span className=\"sr-only\">Login with Apple</span>\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                  <span className=\"sr-only\">Login with Google</span>\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=\"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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\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          <div className=\"relative hidden bg-muted md: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        </CardContent>\n      </Card>\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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/login-05.json b/apps/v4/public/r/styles/default/login-05.json
new file mode 100644
index 00000000000..041b51d88be
--- /dev/null
+++ b/apps/v4/public/r/styles/default/login-05.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/default/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/menubar-demo.json b/apps/v4/public/r/styles/default/menubar-demo.json
new file mode 100644
index 00000000000..ae80b235d63
--- /dev/null
+++ b/apps/v4/public/r/styles/default/menubar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "menubar"
+  ],
+  "files": [
+    {
+      "path": "examples/menubar-demo.tsx",
+      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/default/ui/menubar\"\n\nexport default function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/menubar.json b/apps/v4/public/r/styles/default/menubar.json
new file mode 100644
index 00000000000..7e07ef6e615
--- /dev/null
+++ b/apps/v4/public/r/styles/default/menubar.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-menubar"
+  ],
+  "files": [
+    {
+      "path": "ui/menubar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup {...props} />\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"flex h-10 items-center space-x-1 rounded-md border bg-background p-1\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n    ref\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarPortal,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarGroup,\n  MenubarSub,\n  MenubarShortcut,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/mode-toggle.json b/apps/v4/public/r/styles/default/mode-toggle.json
new file mode 100644
index 00000000000..b81685120fb
--- /dev/null
+++ b/apps/v4/public/r/styles/default/mode-toggle.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mode-toggle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n  const { setTheme } = useTheme()\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"icon\">\n          <Sun className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n          <Moon className=\"absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n          <span className=\"sr-only\">Toggle theme</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n          Light\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n          Dark\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n          System\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/navigation-menu-demo.json b/apps/v4/public/r/styles/default/navigation-menu-demo.json
new file mode 100644
index 00000000000..ec250b62a50
--- /dev/null
+++ b/apps/v4/public/r/styles/default/navigation-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/default/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <Icons.logo className=\"h-6 w-6\" />\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\n                      Beautifully designed components that you can copy and\n                      paste into your apps. Accessible. Customizable. Open\n                      Source.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nconst ListItem = React.forwardRef<\n  React.ElementRef<\"a\">,\n  React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          ref={ref}\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"text-sm font-medium leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/navigation-menu.json b/apps/v4/public/r/styles/default/navigation-menu.json
new file mode 100644
index 00000000000..42539c27559
--- /dev/null
+++ b/apps/v4/public/r/styles/default/navigation-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/navigation-menu.tsx",
+      "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center space-x-1\",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDown\n      className=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto \",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/pagination-demo.json b/apps/v4/public/r/styles/default/pagination-demo.json
new file mode 100644
index 00000000000..9081ba92302
--- /dev/null
+++ b/apps/v4/public/r/styles/default/pagination-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "pagination"
+  ],
+  "files": [
+    {
+      "path": "examples/pagination-demo.tsx",
+      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\"\n\nexport default function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/pagination.json b/apps/v4/public/r/styles/default/pagination.json
new file mode 100644
index 00000000000..536c5d24ae4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/pagination.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/pagination.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/default/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\n  />\n)\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\"flex flex-row items-center gap-1\", className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? \"page\" : undefined}\n    className={cn(\n      buttonVariants({\n        variant: isActive ? \"outline\" : \"ghost\",\n        size,\n      }),\n      className\n    )}\n    {...props}\n  />\n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    size=\"default\"\n    className={cn(\"gap-1 pl-2.5\", className)}\n    {...props}\n  >\n    <ChevronLeft className=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to next page\"\n    size=\"default\"\n    className={cn(\"gap-1 pr-2.5\", className)}\n    {...props}\n  >\n    <span>Next</span>\n    <ChevronRight className=\"h-4 w-4\" />\n  </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/popover-demo.json b/apps/v4/public/r/styles/default/popover-demo.json
new file mode 100644
index 00000000000..c602f263f65
--- /dev/null
+++ b/apps/v4/public/r/styles/default/popover-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/popover-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/popover.json b/apps/v4/public/r/styles/default/popover.json
new file mode 100644
index 00000000000..3ed248ca8a4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/popover.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-popover"
+  ],
+  "files": [
+    {
+      "path": "ui/popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/progress-demo.json b/apps/v4/public/r/styles/default/progress-demo.json
new file mode 100644
index 00000000000..e66a5a9ffda
--- /dev/null
+++ b/apps/v4/public/r/styles/default/progress-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "progress"
+  ],
+  "files": [
+    {
+      "path": "examples/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/default/ui/progress\"\n\nexport default function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/progress.json b/apps/v4/public/r/styles/default/progress.json
new file mode 100644
index 00000000000..ca2d331b1cd
--- /dev/null
+++ b/apps/v4/public/r/styles/default/progress.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-progress"
+  ],
+  "files": [
+    {
+      "path": "ui/progress.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n  <ProgressPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative h-4 w-full overflow-hidden rounded-full bg-secondary\",\n      className\n    )}\n    {...props}\n  >\n    <ProgressPrimitive.Indicator\n      className=\"h-full w-full flex-1 bg-primary transition-all\"\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n    />\n  </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/radio-group-demo.json b/apps/v4/public/r/styles/default/radio-group-demo.json
new file mode 100644
index 00000000000..b0a46d81cd5
--- /dev/null
+++ b/apps/v4/public/r/styles/default/radio-group-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/radio-group-form.json b/apps/v4/public/r/styles/default/radio-group-form.json
new file mode 100644
index 00000000000..a73222ff6c7
--- /dev/null
+++ b/apps/v4/public/r/styles/default/radio-group-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "radio-group",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\"\n\nconst FormSchema = z.object({\n  type: z.enum([\"all\", \"mentions\", \"none\"], {\n    required_error: \"You need to select a notification type.\",\n  }),\n})\n\nexport default function RadioGroupForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"type\"\n          render={({ field }) => (\n            <FormItem className=\"space-y-3\">\n              <FormLabel>Notify me about...</FormLabel>\n              <FormControl>\n                <RadioGroup\n                  onValueChange={field.onChange}\n                  defaultValue={field.value}\n                  className=\"flex flex-col space-y-1\"\n                >\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"all\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      All new messages\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"mentions\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      Direct messages and mentions\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"none\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">Nothing</FormLabel>\n                  </FormItem>\n                </RadioGroup>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/radio-group.json b/apps/v4/public/r/styles/default/radio-group.json
new file mode 100644
index 00000000000..f2225d2a30a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/radio-group.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-radio-group"
+  ],
+  "files": [
+    {
+      "path": "ui/radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"grid gap-2\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n        <Circle className=\"h-2.5 w-2.5 fill-current text-current\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/registry.json b/apps/v4/public/r/styles/default/registry.json
new file mode 100644
index 00000000000..8a546fa4d12
--- /dev/null
+++ b/apps/v4/public/r/styles/default/registry.json
@@ -0,0 +1,5793 @@
+{
+  "name": "shadcn/ui",
+  "homepage": "https://ui.shadcn.com",
+  "items": [
+    {
+      "name": "index",
+      "type": "registry:style",
+      "dependencies": [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "tailwind": {
+        "config": {
+          "plugins": ["require(\"tailwindcss-animate\")"]
+        }
+      },
+      "cssVars": {}
+    },
+    {
+      "name": "style",
+      "type": "registry:style",
+      "dependencies": [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "tailwind": {
+        "config": {
+          "plugins": ["require(\"tailwindcss-animate\")"]
+        }
+      },
+      "cssVars": {}
+    },
+    {
+      "name": "accordion",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-accordion"],
+      "files": [
+        {
+          "path": "registry/default/ui/accordion.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "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"
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "alert",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/alert.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-alert-dialog"],
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/ui/alert-dialog.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-aspect-ratio"],
+      "files": [
+        {
+          "path": "registry/default/ui/aspect-ratio.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "avatar",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-avatar"],
+      "files": [
+        {
+          "path": "registry/default/ui/avatar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-slot"],
+      "files": [
+        {
+          "path": "registry/default/ui/badge.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-slot"],
+      "files": [
+        {
+          "path": "registry/default/ui/breadcrumb.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-slot"],
+      "files": [
+        {
+          "path": "registry/default/ui/button.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar",
+      "type": "registry:ui",
+      "dependencies": ["react-day-picker@latest", "date-fns"],
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/ui/calendar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/card.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel",
+      "type": "registry:ui",
+      "dependencies": ["embla-carousel-react"],
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/ui/carousel.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart",
+      "type": "registry:ui",
+      "dependencies": ["recharts@2.15.4", "lucide-react"],
+      "registryDependencies": ["card"],
+      "files": [
+        {
+          "path": "registry/default/ui/chart.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-checkbox"],
+      "files": [
+        {
+          "path": "registry/default/ui/checkbox.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "collapsible",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-collapsible"],
+      "files": [
+        {
+          "path": "registry/default/ui/collapsible.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command",
+      "type": "registry:ui",
+      "dependencies": ["cmdk"],
+      "registryDependencies": ["dialog"],
+      "files": [
+        {
+          "path": "registry/default/ui/command.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "context-menu",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-context-menu"],
+      "files": [
+        {
+          "path": "registry/default/ui/context-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-dialog"],
+      "files": [
+        {
+          "path": "registry/default/ui/dialog.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer",
+      "type": "registry:ui",
+      "dependencies": ["vaul", "@radix-ui/react-dialog"],
+      "files": [
+        {
+          "path": "registry/default/ui/drawer.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-dropdown-menu"],
+      "files": [
+        {
+          "path": "registry/default/ui/dropdown-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "form",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label",
+        "@radix-ui/react-slot",
+        "@hookform/resolvers",
+        "zod",
+        "react-hook-form"
+      ],
+      "registryDependencies": ["button", "label"],
+      "files": [
+        {
+          "path": "registry/default/ui/form.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "hover-card",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-hover-card"],
+      "files": [
+        {
+          "path": "registry/default/ui/hover-card.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/input.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp",
+      "type": "registry:ui",
+      "dependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/default/ui/input-otp.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-label"],
+      "files": [
+        {
+          "path": "registry/default/ui/label.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "menubar",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-menubar"],
+      "files": [
+        {
+          "path": "registry/default/ui/menubar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-navigation-menu"],
+      "files": [
+        {
+          "path": "registry/default/ui/navigation-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "pagination",
+      "type": "registry:ui",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/ui/pagination.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "popover",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-popover"],
+      "files": [
+        {
+          "path": "registry/default/ui/popover.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-progress"],
+      "files": [
+        {
+          "path": "registry/default/ui/progress.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-radio-group"],
+      "files": [
+        {
+          "path": "registry/default/ui/radio-group.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable",
+      "type": "registry:ui",
+      "dependencies": ["react-resizable-panels"],
+      "files": [
+        {
+          "path": "registry/default/ui/resizable.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-scroll-area"],
+      "files": [
+        {
+          "path": "registry/default/ui/scroll-area.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-select"],
+      "files": [
+        {
+          "path": "registry/default/ui/select.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "separator",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-separator"],
+      "files": [
+        {
+          "path": "registry/default/ui/separator.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-dialog"],
+      "files": [
+        {
+          "path": "registry/default/ui/sheet.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "separator",
+        "sheet",
+        "tooltip",
+        "input",
+        "use-mobile",
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/sidebar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "colors": {
+                "sidebar": {
+                  "DEFAULT": "hsl(var(--sidebar-background))",
+                  "foreground": "hsl(var(--sidebar-foreground))",
+                  "primary": "hsl(var(--sidebar-primary))",
+                  "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                  "accent": "hsl(var(--sidebar-accent))",
+                  "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                  "border": "hsl(var(--sidebar-border))",
+                  "ring": "hsl(var(--sidebar-ring))"
+                }
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "sidebar-background": "0 0% 98%",
+          "sidebar-foreground": "240 5.3% 26.1%",
+          "sidebar-primary": "240 5.9% 10%",
+          "sidebar-primary-foreground": "0 0% 98%",
+          "sidebar-accent": "240 4.8% 95.9%",
+          "sidebar-accent-foreground": "240 5.9% 10%",
+          "sidebar-border": "220 13% 91%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        },
+        "dark": {
+          "sidebar-background": "240 5.9% 10%",
+          "sidebar-foreground": "240 4.8% 95.9%",
+          "sidebar-primary": "224.3 76.3% 48%",
+          "sidebar-primary-foreground": "0 0% 100%",
+          "sidebar-accent": "240 3.7% 15.9%",
+          "sidebar-accent-foreground": "240 4.8% 95.9%",
+          "sidebar-border": "240 3.7% 15.9%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        }
+      }
+    },
+    {
+      "name": "skeleton",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/skeleton.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "slider",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-slider"],
+      "files": [
+        {
+          "path": "registry/default/ui/slider.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sonner",
+      "type": "registry:ui",
+      "dependencies": ["sonner", "next-themes"],
+      "files": [
+        {
+          "path": "registry/default/ui/sonner.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-switch"],
+      "files": [
+        {
+          "path": "registry/default/ui/switch.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "table",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/table.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tabs",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-tabs"],
+      "files": [
+        {
+          "path": "registry/default/ui/tabs.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/textarea.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-toast"],
+      "files": [
+        {
+          "path": "registry/default/ui/toast.tsx",
+          "type": "registry:ui",
+          "target": ""
+        },
+        {
+          "path": "registry/default/hooks/use-toast.ts",
+          "type": "registry:hook",
+          "target": ""
+        },
+        {
+          "path": "registry/default/ui/toaster.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-toggle"],
+      "files": [
+        {
+          "path": "registry/default/ui/toggle.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-toggle-group"],
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/default/ui/toggle-group.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tooltip",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-tooltip"],
+      "files": [
+        {
+          "path": "registry/default/ui/tooltip.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dashboard-01",
+      "type": "registry:block",
+      "description": "A dashboard with sidebar, charts and data table.",
+      "dependencies": [
+        "@dnd-kit/core",
+        "@dnd-kit/modifiers",
+        "@dnd-kit/sortable",
+        "@dnd-kit/utilities",
+        "@tanstack/react-table",
+        "zod"
+      ],
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "chart",
+        "card",
+        "select",
+        "tabs",
+        "table",
+        "toggle-group",
+        "badge",
+        "button",
+        "checkbox",
+        "dropdown-menu",
+        "drawer",
+        "input",
+        "avatar",
+        "sheet",
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/dashboard-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/data.json",
+          "type": "registry:file",
+          "target": "app/dashboard/data.json"
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/chart-area-interactive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/data-table.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/nav-documents.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/section-cards.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/site-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["dashboard"]
+    },
+    {
+      "name": "sidebar-01",
+      "type": "registry:block",
+      "description": "A simple sidebar with navigation grouped by section.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-01/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-01/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-01/components/version-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-02",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible sections.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-02/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-02/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-02/components/version-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-03",
+      "type": "registry:block",
+      "description": "A sidebar with submenus.",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-03/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-04",
+      "type": "registry:block",
+      "description": "A floating sidebar with submenus.",
+      "registryDependencies": ["sidebar", "breadcrumb", "separator"],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-04/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-05",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-05/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-05/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-06",
+      "type": "registry:block",
+      "description": "A sidebar with submenus as dropdowns.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-06/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-06/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-06/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-07",
+      "type": "registry:block",
+      "description": "A sidebar that collapses to icons.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-07/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-07/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-07/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-07/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-07/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-07/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-08",
+      "type": "registry:block",
+      "description": "An inset sidebar with secondary navigation.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-08/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-08/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-08/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-08/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-08/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-08/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-09",
+      "type": "registry:block",
+      "description": "Collapsible nested sidebars.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-09/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-09/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-09/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-10",
+      "type": "registry:block",
+      "description": "A sidebar in a popover.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-10/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/nav-actions.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/nav-favorites.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/nav-workspaces.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-11",
+      "type": "registry:block",
+      "description": "A sidebar with a collapsible file tree.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-11/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-11/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-12",
+      "type": "registry:block",
+      "description": "A sidebar with a calendar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-12/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-12/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-12/components/calendars.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-12/components/date-picker.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-12/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-13",
+      "type": "registry:block",
+      "description": "A sidebar in a dialog.",
+      "registryDependencies": ["sidebar", "breadcrumb", "button", "dialog"],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-13/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-13/components/settings-dialog.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-14",
+      "type": "registry:block",
+      "description": "A sidebar on the right.",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-14/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-14/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-15",
+      "type": "registry:block",
+      "description": "A left and right sidebar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-15/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/calendars.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/date-picker.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/nav-favorites.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/nav-workspaces.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/sidebar-left.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/sidebar-right.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-16",
+      "type": "registry:block",
+      "description": "A sidebar with a sticky site header.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-16/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/site-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "login-01",
+      "type": "registry:block",
+      "description": "A simple login form.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/login-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/login-01/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["authentication", "login"]
+    },
+    {
+      "name": "login-02",
+      "type": "registry:block",
+      "description": "A two column login page with a cover image.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/login-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/login-02/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["authentication", "login"]
+    },
+    {
+      "name": "login-03",
+      "type": "registry:block",
+      "description": "A login page with a muted background color.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/login-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/login-03/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["authentication", "login"]
+    },
+    {
+      "name": "login-04",
+      "type": "registry:block",
+      "description": "A login page with form and image.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/login-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/login-04/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["authentication", "login"]
+    },
+    {
+      "name": "login-05",
+      "type": "registry:block",
+      "description": "A simple email-only login page.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/login-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/login-05/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["authentication", "login"]
+    },
+    {
+      "name": "calendar-01",
+      "type": "registry:block",
+      "description": "A simple calendar.",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-01.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-02",
+      "type": "registry:block",
+      "description": "Multiple months with single selection.",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-02.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-03",
+      "type": "registry:block",
+      "description": "Multiple months with multiple selection.",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-03.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-04",
+      "type": "registry:block",
+      "description": "Single month with range selection",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-04.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-05",
+      "type": "registry:block",
+      "description": "Multiple months with range selection",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-05.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-06",
+      "type": "registry:block",
+      "description": "Range selection with minimum days",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-06.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-07",
+      "type": "registry:block",
+      "description": "Range selection with minimum and maximum days",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-07.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-08",
+      "type": "registry:block",
+      "description": "Calendar with disabled days",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-08.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-09",
+      "type": "registry:block",
+      "description": "Calendar with disabled weekends",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-09.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-10",
+      "type": "registry:block",
+      "description": "Today button",
+      "registryDependencies": ["calendar", "card", "button"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-10.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-11",
+      "type": "registry:block",
+      "description": "Start and end of month",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-11.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-12",
+      "type": "registry:block",
+      "description": "Localized calendar",
+      "registryDependencies": ["calendar", "card", "select"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-12.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-13",
+      "type": "registry:block",
+      "description": "With Month and Year Dropdown",
+      "registryDependencies": ["calendar", "label", "select"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-13.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-14",
+      "type": "registry:block",
+      "description": "With Booked/Unavailable Days",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-14.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-15",
+      "type": "registry:block",
+      "description": "With Week Numbers",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-15.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-16",
+      "type": "registry:block",
+      "description": "With time picker",
+      "registryDependencies": ["calendar", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-16.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-17",
+      "type": "registry:block",
+      "description": "With time picker inline",
+      "registryDependencies": ["calendar", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-17.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-18",
+      "type": "registry:block",
+      "description": "Variable size",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-18.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-19",
+      "type": "registry:block",
+      "description": "With presets",
+      "dependencies": ["date-fns"],
+      "registryDependencies": ["calendar", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-19.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-20",
+      "type": "registry:block",
+      "description": "With time presets",
+      "registryDependencies": ["calendar", "card", "button"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-20.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-21",
+      "type": "registry:block",
+      "description": "Custom days and formatters",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-21.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-22",
+      "type": "registry:block",
+      "description": "Date picker",
+      "registryDependencies": ["calendar", "popover", "button", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-22.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-23",
+      "type": "registry:block",
+      "description": "Date range picker",
+      "registryDependencies": ["calendar", "popover", "button", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-23.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-24",
+      "type": "registry:block",
+      "description": "Date and Time picker",
+      "registryDependencies": ["calendar", "popover", "button", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-24.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-25",
+      "type": "registry:block",
+      "description": "Date and Time range picker",
+      "registryDependencies": ["calendar", "popover", "button", "label"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-25.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-26",
+      "type": "registry:block",
+      "description": "Date range picker with time",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-26.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-27",
+      "type": "registry:block",
+      "description": "Chart filter",
+      "registryDependencies": [
+        "calendar",
+        "chart",
+        "card",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-27.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-28",
+      "type": "registry:block",
+      "description": "Input with date picker",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-28.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-29",
+      "type": "registry:block",
+      "description": "Natural language date picker",
+      "dependencies": ["chrono-node"],
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-29.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-30",
+      "type": "registry:block",
+      "description": "With little-date",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-30.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-31",
+      "type": "registry:block",
+      "description": "With event slots",
+      "registryDependencies": ["calendar", "card", "button"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-31.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "700px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-32",
+      "type": "registry:block",
+      "description": "Date picker in a drawer",
+      "registryDependencies": ["calendar", "button", "drawer"],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-32.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "chart-area-axes",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-axes.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-default",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-gradient",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-gradient.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-icons",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-interactive",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart", "select"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-interactive.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-legend",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-linear",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-linear.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-stacked-expand",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-stacked-expand.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-stacked",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-step",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-step.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-bar-active",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-active.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-default",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-horizontal",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-horizontal.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-interactive",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-label",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-mixed",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-mixed.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-multiple",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-negative",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-negative.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-stacked",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-line-default",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-dots-colors",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-dots-colors.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-dots-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-dots-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-dots",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-dots.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-interactive",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-label-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-label",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-linear",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-linear.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-multiple",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-step",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-step.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-pie-donut-active",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-donut-active.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-donut-text",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-donut-text.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-donut",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-donut.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-interactive",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-label-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-label-list",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-label-list.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-label",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-legend",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-separator-none",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-separator-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-simple",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-simple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-stacked",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-radar-default",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-dots",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-dots.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-circle-fill",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-circle-fill.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-circle-no-lines",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-circle-no-lines.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-circle",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-circle.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-fill",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-fill.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-none",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-icons",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-legend",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-lines-only",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-lines-only.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-multiple",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-radius",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-radius.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radial-grid",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-grid.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-radial-label",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-radial-shape",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-shape.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-radial-simple",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-simple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-radial-stacked",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-radial-text",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-text.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-tooltip-default",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-indicator-line",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-indicator-line.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-indicator-none",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-indicator-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-label-none",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-label-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-label-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-label-formatter",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-label-formatter.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-formatter",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-formatter.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-icons",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-advanced",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-advanced.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "utils",
+      "type": "registry:lib",
+      "dependencies": ["clsx", "tailwind-merge"],
+      "files": [
+        {
+          "path": "registry/default/lib/utils.ts",
+          "type": "registry:lib",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "use-mobile",
+      "type": "registry:hook",
+      "files": [
+        {
+          "path": "registry/default/hooks/use-mobile.tsx",
+          "type": "registry:hook",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "use-toast",
+      "type": "registry:hook",
+      "files": [
+        {
+          "path": "registry/default/hooks/use-toast.ts",
+          "type": "registry:hook",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "theme-daylight",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "36 39% 88%",
+          "foreground": "36 45% 15%",
+          "primary": "36 45% 70%",
+          "primary-foreground": "36 45% 11%",
+          "secondary": "40 35% 77%",
+          "secondary-foreground": "36 45% 25%",
+          "accent": "36 64% 57%",
+          "accent-foreground": "36 72% 17%",
+          "destructive": "0 84% 37%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "36 33% 75%",
+          "muted-foreground": "36 45% 25%",
+          "card": "36 46% 82%",
+          "card-foreground": "36 45% 20%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "border": "36 45% 60%",
+          "input": "36 45% 60%",
+          "ring": "36 45% 30%",
+          "chart-1": "25 34% 28%",
+          "chart-2": "26 36% 34%",
+          "chart-3": "28 40% 40%",
+          "chart-4": "31 41% 48%",
+          "chart-5": "35 43% 53%"
+        },
+        "dark": {
+          "background": "36 39% 88%",
+          "foreground": "36 45% 15%",
+          "primary": "36 45% 70%",
+          "primary-foreground": "36 45% 11%",
+          "secondary": "40 35% 77%",
+          "secondary-foreground": "36 45% 25%",
+          "accent": "36 64% 57%",
+          "accent-foreground": "36 72% 17%",
+          "destructive": "0 84% 37%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "36 33% 75%",
+          "muted-foreground": "36 45% 25%",
+          "card": "36 46% 82%",
+          "card-foreground": "36 45% 20%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "border": "36 45% 60%",
+          "input": "36 45% 60%",
+          "ring": "36 45% 30%",
+          "chart-1": "25 34% 28%",
+          "chart-2": "26 36% 34%",
+          "chart-3": "28 40% 40%",
+          "chart-4": "31 41% 48%",
+          "chart-5": "35 43% 53%"
+        }
+      }
+    },
+    {
+      "name": "theme-midnight",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "240 5% 6%",
+          "foreground": "60 5% 90%",
+          "primary": "240 0% 90%",
+          "primary-foreground": "60 0% 0%",
+          "secondary": "240 4% 15%",
+          "secondary-foreground": "60 5% 85%",
+          "accent": "240 0% 13%",
+          "accent-foreground": "60 0% 100%",
+          "destructive": "0 60% 50%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "240 5% 25%",
+          "muted-foreground": "60 5% 85%",
+          "card": "240 4% 10%",
+          "card-foreground": "60 5% 90%",
+          "popover": "240 5% 15%",
+          "popover-foreground": "60 5% 85%",
+          "border": "240 6% 20%",
+          "input": "240 6% 20%",
+          "ring": "240 5% 90%",
+          "chart-1": "359 2% 90%",
+          "chart-2": "240 1% 74%",
+          "chart-3": "240 1% 58%",
+          "chart-4": "240 1% 42%",
+          "chart-5": "240 2% 26%"
+        },
+        "dark": {
+          "background": "240 5% 6%",
+          "foreground": "60 5% 90%",
+          "primary": "240 0% 90%",
+          "primary-foreground": "60 0% 0%",
+          "secondary": "240 4% 15%",
+          "secondary-foreground": "60 5% 85%",
+          "accent": "240 0% 13%",
+          "accent-foreground": "60 0% 100%",
+          "destructive": "0 60% 50%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "240 5% 25%",
+          "muted-foreground": "60 5% 85%",
+          "card": "240 4% 10%",
+          "card-foreground": "60 5% 90%",
+          "popover": "240 5% 15%",
+          "popover-foreground": "60 5% 85%",
+          "border": "240 6% 20%",
+          "input": "240 6% 20%",
+          "ring": "240 5% 90%",
+          "chart-1": "359 2% 90%",
+          "chart-2": "240 1% 74%",
+          "chart-3": "240 1% 58%",
+          "chart-4": "240 1% 42%",
+          "chart-5": "240 2% 26%"
+        }
+      }
+    },
+    {
+      "name": "theme-emerald",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "0 0% 100%",
+          "foreground": "240 10% 3.9%",
+          "card": "0 0% 100%",
+          "card-foreground": "240 10% 3.9%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "primary": "142 86% 28%",
+          "primary-foreground": "356 29% 98%",
+          "secondary": "240 4.8% 95.9%",
+          "secondary-foreground": "240 5.9% 10%",
+          "muted": "240 4.8% 95.9%",
+          "muted-foreground": "240 3.8% 45%",
+          "accent": "240 4.8% 95.9%",
+          "accent-foreground": "240 5.9% 10%",
+          "destructive": "0 72% 51%",
+          "destructive-foreground": "0 0% 98%",
+          "border": "240 5.9% 90%",
+          "input": "240 5.9% 90%",
+          "ring": "142 86% 28%",
+          "chart-1": "139 65% 20%",
+          "chart-2": "140 74% 44%",
+          "chart-3": "142 88% 28%",
+          "chart-4": "137 55% 15%",
+          "chart-5": "141 40% 9%"
+        },
+        "dark": {
+          "background": "240 10% 3.9%",
+          "foreground": "0 0% 98%",
+          "card": "240 10% 3.9%",
+          "card-foreground": "0 0% 98%",
+          "popover": "240 10% 3.9%",
+          "popover-foreground": "0 0% 98%",
+          "primary": "142 86% 28%",
+          "primary-foreground": "356 29% 98%",
+          "secondary": "240 4.8% 95.9%",
+          "secondary-foreground": "240 5.9% 10%",
+          "muted": "240 3.7% 15.9%",
+          "muted-foreground": "240 5% 64.9%",
+          "accent": "240 3.7% 15.9%",
+          "accent-foreground": "0 0% 98%",
+          "destructive": "0 72% 51%",
+          "destructive-foreground": "0 0% 98%",
+          "border": "240 3.7% 15.9%",
+          "input": "240 3.7% 15.9%",
+          "ring": "142 86% 28%",
+          "chart-1": "142 88% 28%",
+          "chart-2": "139 65% 20%",
+          "chart-3": "140 74% 24%",
+          "chart-4": "137 55% 15%",
+          "chart-5": "141 40% 9%"
+        }
+      }
+    },
+    {
+      "name": "sink",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "accordion",
+        "alert",
+        "alert-dialog",
+        "aspect-ratio",
+        "avatar",
+        "badge",
+        "breadcrumb",
+        "button",
+        "calendar",
+        "card",
+        "carousel",
+        "chart",
+        "checkbox",
+        "collapsible",
+        "command",
+        "context-menu",
+        "dialog",
+        "drawer",
+        "dropdown-menu",
+        "hover-card",
+        "input",
+        "input-otp",
+        "label",
+        "menubar",
+        "navigation-menu",
+        "pagination",
+        "popover",
+        "progress",
+        "radio-group",
+        "resizable",
+        "scroll-area",
+        "select",
+        "separator",
+        "sheet",
+        "sidebar",
+        "skeleton",
+        "slider",
+        "sonner",
+        "switch",
+        "table",
+        "tabs",
+        "textarea",
+        "toast",
+        "toggle",
+        "toggle-group",
+        "tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sink/page.tsx",
+          "type": "registry:page",
+          "target": "app/sink/page.tsx"
+        },
+        {
+          "path": "registry/default/internal/sink/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/component-wrapper.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/accordion-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/alert-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/alert-dialog-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/aspect-ratio-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/avatar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/badge-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/breadcrumb-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/calendar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/card-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/carousel-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/checkbox-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/collapsible-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/combobox-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/command-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/context-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/date-picker-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/dialog-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/drawer-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/dropdown-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/hover-card-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/input-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/input-otp-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/label-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/menubar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/navigation-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/pagination-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/popover-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/progress-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/radio-group-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/resizable-handle.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/scroll-area-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/select-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/separator-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/sheet-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/skeleton-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/slider-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/sonner-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/switch-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/table-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/tabs-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/textarea-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toast-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toggle-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toggle-group-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/tooltip-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/badge-destructive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/badge-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/badge-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-destructive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-ghost.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-link.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-loading.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-with-icon.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toggle-disabled.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toggle-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toggle-with-text.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-demo",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-header",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-footer",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-footer.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-group.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-group-collapsible.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-group-action.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-menu.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-menu-action.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-sub",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-menu-sub.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-menu-collapsible.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-badge",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-menu-badge.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-rsc",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-rsc.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-controlled",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-controlled.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-01",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-01.tsx",
+          "type": "registry:component",
+          "target": "components/sidebar-01.tsx"
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-02",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-02.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-03",
+      "type": "registry:internal",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-03.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-04",
+      "type": "registry:internal",
+      "registryDependencies": ["sidebar", "breadcrumb", "separator"],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-04.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-05",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-05.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-06",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-06.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-07",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-07.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-08",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-08.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-09",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-09.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-10",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-10.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-11",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-11.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-12",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-12.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-13",
+      "type": "registry:internal",
+      "registryDependencies": ["sidebar", "breadcrumb", "button", "dialog"],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-13.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-14",
+      "type": "registry:internal",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-14.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-15",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-15.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-login-01",
+      "type": "registry:internal",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/default/internal/login-01.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "accordion-demo",
+      "type": "registry:example",
+      "registryDependencies": ["accordion"],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-demo",
+      "type": "registry:example",
+      "registryDependencies": ["alert"],
+      "files": [
+        {
+          "path": "registry/default/examples/alert-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-destructive",
+      "type": "registry:example",
+      "registryDependencies": ["alert"],
+      "files": [
+        {
+          "path": "registry/default/examples/alert-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": ["alert-dialog", "button"],
+      "files": [
+        {
+          "path": "registry/default/examples/alert-dialog-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio-demo",
+      "type": "registry:example",
+      "registryDependencies": ["aspect-ratio"],
+      "files": [
+        {
+          "path": "registry/default/examples/aspect-ratio-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "avatar-demo",
+      "type": "registry:example",
+      "registryDependencies": ["avatar"],
+      "files": [
+        {
+          "path": "registry/default/examples/avatar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-demo",
+      "type": "registry:example",
+      "registryDependencies": ["badge"],
+      "files": [
+        {
+          "path": "registry/default/examples/badge-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-destructive",
+      "type": "registry:example",
+      "registryDependencies": ["badge"],
+      "files": [
+        {
+          "path": "registry/default/examples/badge-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-outline",
+      "type": "registry:example",
+      "registryDependencies": ["badge"],
+      "files": [
+        {
+          "path": "registry/default/examples/badge-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-secondary",
+      "type": "registry:example",
+      "registryDependencies": ["badge"],
+      "files": [
+        {
+          "path": "registry/default/examples/badge-secondary.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-demo",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-separator",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-separator.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-dropdown",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-dropdown.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-ellipsis",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-ellipsis.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-link",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-link.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-responsive",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-responsive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-demo",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/examples/button-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-secondary",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/examples/button-secondary.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-destructive",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/examples/button-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-outline",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/examples/button-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-ghost",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/examples/button-ghost.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-link",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/examples/button-link.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-with-icon",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/examples/button-with-icon.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-loading",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/examples/button-loading.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-icon",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/examples/button-icon.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-as-child",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/default/examples/button-as-child.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar-demo",
+      "type": "registry:example",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/default/examples/calendar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar-form",
+      "type": "registry:example",
+      "registryDependencies": ["calendar", "form", "popover"],
+      "files": [
+        {
+          "path": "registry/default/examples/calendar-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card-demo",
+      "type": "registry:example",
+      "registryDependencies": ["card", "button", "switch"],
+      "files": [
+        {
+          "path": "registry/default/examples/card-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card-with-form",
+      "type": "registry:example",
+      "registryDependencies": ["button", "card", "input", "label", "select"],
+      "files": [
+        {
+          "path": "registry/default/examples/card-with-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-demo",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-size",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-size.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-spacing",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-spacing.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-orientation",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-orientation.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-api",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-api.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-plugin",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-plugin.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-demo",
+      "type": "registry:example",
+      "registryDependencies": ["checkbox"],
+      "files": [
+        {
+          "path": "registry/default/examples/checkbox-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-disabled",
+      "type": "registry:example",
+      "registryDependencies": ["checkbox"],
+      "files": [
+        {
+          "path": "registry/default/examples/checkbox-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-multiple",
+      "type": "registry:example",
+      "registryDependencies": ["checkbox", "form"],
+      "files": [
+        {
+          "path": "registry/default/examples/checkbox-form-multiple.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-single",
+      "type": "registry:example",
+      "registryDependencies": ["checkbox", "form"],
+      "files": [
+        {
+          "path": "registry/default/examples/checkbox-form-single.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-with-text",
+      "type": "registry:example",
+      "registryDependencies": ["checkbox"],
+      "files": [
+        {
+          "path": "registry/default/examples/checkbox-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "collapsible-demo",
+      "type": "registry:example",
+      "registryDependencies": ["collapsible"],
+      "files": [
+        {
+          "path": "registry/default/examples/collapsible-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-demo",
+      "type": "registry:example",
+      "registryDependencies": ["command"],
+      "files": [
+        {
+          "path": "registry/default/examples/combobox-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-dropdown-menu",
+      "type": "registry:example",
+      "registryDependencies": ["command", "dropdown-menu", "button"],
+      "files": [
+        {
+          "path": "registry/default/examples/combobox-dropdown-menu.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-form",
+      "type": "registry:example",
+      "registryDependencies": ["command", "form"],
+      "files": [
+        {
+          "path": "registry/default/examples/combobox-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-popover",
+      "type": "registry:example",
+      "registryDependencies": ["combobox", "popover"],
+      "files": [
+        {
+          "path": "registry/default/examples/combobox-popover.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-responsive",
+      "type": "registry:example",
+      "registryDependencies": ["combobox", "popover", "drawer"],
+      "files": [
+        {
+          "path": "registry/default/examples/combobox-responsive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command-demo",
+      "type": "registry:example",
+      "registryDependencies": ["command"],
+      "files": [
+        {
+          "path": "registry/default/examples/command-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command-dialog",
+      "type": "registry:example",
+      "registryDependencies": ["command", "dialog"],
+      "files": [
+        {
+          "path": "registry/default/examples/command-dialog.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "context-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": ["context-menu"],
+      "files": [
+        {
+          "path": "registry/default/examples/context-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "data-table-demo",
+      "type": "registry:example",
+      "registryDependencies": ["data-table"],
+      "files": [
+        {
+          "path": "registry/default/examples/data-table-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-demo",
+      "type": "registry:example",
+      "dependencies": ["date-fns"],
+      "registryDependencies": ["button", "calendar", "popover"],
+      "files": [
+        {
+          "path": "registry/default/examples/date-picker-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-form",
+      "type": "registry:example",
+      "dependencies": ["date-fns"],
+      "registryDependencies": ["button", "calendar", "form", "popover"],
+      "files": [
+        {
+          "path": "registry/default/examples/date-picker-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-presets",
+      "type": "registry:example",
+      "dependencies": ["date-fns"],
+      "registryDependencies": ["button", "calendar", "popover", "select"],
+      "files": [
+        {
+          "path": "registry/default/examples/date-picker-with-presets.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-range",
+      "type": "registry:example",
+      "dependencies": ["date-fns"],
+      "registryDependencies": ["button", "calendar", "popover"],
+      "files": [
+        {
+          "path": "registry/default/examples/date-picker-with-range.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": ["dialog"],
+      "files": [
+        {
+          "path": "registry/default/examples/dialog-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog-close-button",
+      "type": "registry:example",
+      "registryDependencies": ["dialog", "button"],
+      "files": [
+        {
+          "path": "registry/default/examples/dialog-close-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer-demo",
+      "type": "registry:example",
+      "registryDependencies": ["drawer"],
+      "files": [
+        {
+          "path": "registry/default/examples/drawer-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer-dialog",
+      "type": "registry:example",
+      "registryDependencies": ["drawer", "dialog"],
+      "files": [
+        {
+          "path": "registry/default/examples/drawer-dialog.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": ["dropdown-menu"],
+      "files": [
+        {
+          "path": "registry/default/examples/dropdown-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-checkboxes",
+      "type": "registry:example",
+      "registryDependencies": ["dropdown-menu", "checkbox"],
+      "files": [
+        {
+          "path": "registry/default/examples/dropdown-menu-checkboxes.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-radio-group",
+      "type": "registry:example",
+      "registryDependencies": ["dropdown-menu", "radio-group"],
+      "files": [
+        {
+          "path": "registry/default/examples/dropdown-menu-radio-group.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "hover-card-demo",
+      "type": "registry:example",
+      "registryDependencies": ["hover-card"],
+      "files": [
+        {
+          "path": "registry/default/examples/hover-card-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-demo",
+      "type": "registry:example",
+      "registryDependencies": ["input"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-disabled",
+      "type": "registry:example",
+      "registryDependencies": ["input"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-file",
+      "type": "registry:example",
+      "registryDependencies": ["input"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-file.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-form",
+      "type": "registry:example",
+      "registryDependencies": ["input", "button", "form"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-button",
+      "type": "registry:example",
+      "registryDependencies": ["input", "button"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-with-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-label",
+      "type": "registry:example",
+      "registryDependencies": ["input", "button", "label"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-with-label.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-text",
+      "type": "registry:example",
+      "registryDependencies": ["input", "button", "label"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-demo",
+      "type": "registry:example",
+      "registryDependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-otp-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-pattern",
+      "type": "registry:example",
+      "registryDependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-otp-pattern.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-separator",
+      "type": "registry:example",
+      "registryDependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-otp-separator.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-controlled",
+      "type": "registry:example",
+      "registryDependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-otp-controlled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-form",
+      "type": "registry:example",
+      "registryDependencies": ["input-otp", "form"],
+      "files": [
+        {
+          "path": "registry/default/examples/input-otp-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "label-demo",
+      "type": "registry:example",
+      "registryDependencies": ["label"],
+      "files": [
+        {
+          "path": "registry/default/examples/label-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "menubar-demo",
+      "type": "registry:example",
+      "registryDependencies": ["menubar"],
+      "files": [
+        {
+          "path": "registry/default/examples/menubar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": ["navigation-menu"],
+      "files": [
+        {
+          "path": "registry/default/examples/navigation-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "pagination-demo",
+      "type": "registry:example",
+      "registryDependencies": ["pagination"],
+      "files": [
+        {
+          "path": "registry/default/examples/pagination-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "popover-demo",
+      "type": "registry:example",
+      "registryDependencies": ["popover"],
+      "files": [
+        {
+          "path": "registry/default/examples/popover-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "progress-demo",
+      "type": "registry:example",
+      "registryDependencies": ["progress"],
+      "files": [
+        {
+          "path": "registry/default/examples/progress-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group-demo",
+      "type": "registry:example",
+      "registryDependencies": ["radio-group"],
+      "files": [
+        {
+          "path": "registry/default/examples/radio-group-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group-form",
+      "type": "registry:example",
+      "registryDependencies": ["radio-group", "form"],
+      "files": [
+        {
+          "path": "registry/default/examples/radio-group-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo",
+      "type": "registry:example",
+      "registryDependencies": ["resizable"],
+      "files": [
+        {
+          "path": "registry/default/examples/resizable-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo-with-handle",
+      "type": "registry:example",
+      "registryDependencies": ["resizable"],
+      "files": [
+        {
+          "path": "registry/default/examples/resizable-demo-with-handle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-vertical",
+      "type": "registry:example",
+      "registryDependencies": ["resizable"],
+      "files": [
+        {
+          "path": "registry/default/examples/resizable-vertical.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-handle",
+      "type": "registry:example",
+      "registryDependencies": ["resizable"],
+      "files": [
+        {
+          "path": "registry/default/examples/resizable-handle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-demo",
+      "type": "registry:example",
+      "registryDependencies": ["scroll-area"],
+      "files": [
+        {
+          "path": "registry/default/examples/scroll-area-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-horizontal-demo",
+      "type": "registry:example",
+      "registryDependencies": ["scroll-area"],
+      "files": [
+        {
+          "path": "registry/default/examples/scroll-area-horizontal-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-demo",
+      "type": "registry:example",
+      "registryDependencies": ["select"],
+      "files": [
+        {
+          "path": "registry/default/examples/select-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-scrollable",
+      "type": "registry:example",
+      "registryDependencies": ["select"],
+      "files": [
+        {
+          "path": "registry/default/examples/select-scrollable.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-form",
+      "type": "registry:example",
+      "registryDependencies": ["select"],
+      "files": [
+        {
+          "path": "registry/default/examples/select-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "separator-demo",
+      "type": "registry:example",
+      "registryDependencies": ["separator"],
+      "files": [
+        {
+          "path": "registry/default/examples/separator-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet-demo",
+      "type": "registry:example",
+      "registryDependencies": ["sheet"],
+      "files": [
+        {
+          "path": "registry/default/examples/sheet-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet-side",
+      "type": "registry:example",
+      "registryDependencies": ["sheet"],
+      "files": [
+        {
+          "path": "registry/default/examples/sheet-side.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "skeleton-demo",
+      "type": "registry:example",
+      "registryDependencies": ["skeleton"],
+      "files": [
+        {
+          "path": "registry/default/examples/skeleton-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "skeleton-card",
+      "type": "registry:example",
+      "registryDependencies": ["skeleton"],
+      "files": [
+        {
+          "path": "registry/default/examples/skeleton-card.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "slider-demo",
+      "type": "registry:example",
+      "registryDependencies": ["slider"],
+      "files": [
+        {
+          "path": "registry/default/examples/slider-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sonner-demo",
+      "type": "registry:example",
+      "registryDependencies": ["sonner"],
+      "files": [
+        {
+          "path": "registry/default/examples/sonner-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch-demo",
+      "type": "registry:example",
+      "registryDependencies": ["switch"],
+      "files": [
+        {
+          "path": "registry/default/examples/switch-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch-form",
+      "type": "registry:example",
+      "registryDependencies": ["switch", "form"],
+      "files": [
+        {
+          "path": "registry/default/examples/switch-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "table-demo",
+      "type": "registry:example",
+      "registryDependencies": ["table"],
+      "files": [
+        {
+          "path": "registry/default/examples/table-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tabs-demo",
+      "type": "registry:example",
+      "registryDependencies": ["tabs"],
+      "files": [
+        {
+          "path": "registry/default/examples/tabs-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-demo",
+      "type": "registry:example",
+      "registryDependencies": ["textarea"],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-disabled",
+      "type": "registry:example",
+      "registryDependencies": ["textarea"],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-form",
+      "type": "registry:example",
+      "registryDependencies": ["textarea", "form"],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-button",
+      "type": "registry:example",
+      "registryDependencies": ["textarea", "button"],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-with-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-label",
+      "type": "registry:example",
+      "registryDependencies": ["textarea", "label"],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-with-label.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-text",
+      "type": "registry:example",
+      "registryDependencies": ["textarea", "label"],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-demo",
+      "type": "registry:example",
+      "registryDependencies": ["toast"],
+      "files": [
+        {
+          "path": "registry/default/examples/toast-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-destructive",
+      "type": "registry:example",
+      "registryDependencies": ["toast"],
+      "files": [
+        {
+          "path": "registry/default/examples/toast-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-simple",
+      "type": "registry:example",
+      "registryDependencies": ["toast"],
+      "files": [
+        {
+          "path": "registry/default/examples/toast-simple.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-with-action",
+      "type": "registry:example",
+      "registryDependencies": ["toast"],
+      "files": [
+        {
+          "path": "registry/default/examples/toast-with-action.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-with-title",
+      "type": "registry:example",
+      "registryDependencies": ["toast"],
+      "files": [
+        {
+          "path": "registry/default/examples/toast-with-title.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-demo",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-disabled",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-lg",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-lg.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-outline",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-sm",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-sm.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-single",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-single.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-demo",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-disabled",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-lg",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-lg.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-outline",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-sm",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-sm.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-with-text",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tooltip-demo",
+      "type": "registry:example",
+      "registryDependencies": ["tooltip"],
+      "files": [
+        {
+          "path": "registry/default/examples/tooltip-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-blockquote",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-blockquote.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h1",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-h1.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h2",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-h2.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h3",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-h3.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h4",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-h4.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-inline-code",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-inline-code.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-large",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-large.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-lead",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-lead.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-list",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-list.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-muted",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-muted.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-p",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-p.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-small",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-small.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-table",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-table.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "mode-toggle",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/mode-toggle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-bar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-grid",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-bar-demo-grid.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-axis",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-bar-demo-axis.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-tooltip",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-bar-demo-tooltip.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-legend",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-bar-demo-legend.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-tooltip-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-tooltip-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    }
+  ]
+}
diff --git a/apps/v4/public/r/styles/default/resizable-demo-with-handle.json b/apps/v4/public/r/styles/default/resizable-demo-with-handle.json
new file mode 100644
index 00000000000..d3b07efa5a7
--- /dev/null
+++ b/apps/v4/public/r/styles/default/resizable-demo-with-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo-with-handle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo-with-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle withHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/resizable-demo.json b/apps/v4/public/r/styles/default/resizable-demo.json
new file mode 100644
index 00000000000..dcfe32996ea
--- /dev/null
+++ b/apps/v4/public/r/styles/default/resizable-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/resizable-handle.json b/apps/v4/public/r/styles/default/resizable-handle.json
new file mode 100644
index 00000000000..93e348126b0
--- /dev/null
+++ b/apps/v4/public/r/styles/default/resizable-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-handle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/resizable-vertical.json b/apps/v4/public/r/styles/default/resizable-vertical.json
new file mode 100644
index 00000000000..27dbae3fc4c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/resizable-vertical.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-vertical",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-vertical.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"vertical\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Header</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/resizable.json b/apps/v4/public/r/styles/default/resizable.json
new file mode 100644
index 00000000000..31be59446fd
--- /dev/null
+++ b/apps/v4/public/r/styles/default/resizable.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "react-resizable-panels"
+  ],
+  "files": [
+    {
+      "path": "ui/resizable.tsx",
+      "content": "\"use client\"\n\nimport { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/scroll-area-demo.json b/apps/v4/public/r/styles/default/scroll-area-demo.json
new file mode 100644
index 00000000000..d2b3cd84aaa
--- /dev/null
+++ b/apps/v4/public/r/styles/default/scroll-area-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport default function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {tags.map((tag) => (\n          <>\n            <div key={tag} className=\"text-sm\">\n              {tag}\n            </div>\n            <Separator className=\"my-2\" />\n          </>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/scroll-area-horizontal-demo.json b/apps/v4/public/r/styles/default/scroll-area-horizontal-demo.json
new file mode 100644
index 00000000000..8103b7c35be
--- /dev/null
+++ b/apps/v4/public/r/styles/default/scroll-area-horizontal-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-horizontal-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-horizontal-demo.tsx",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { ScrollArea, ScrollBar } from \"@/registry/default/ui/scroll-area\"\n\nexport interface Artwork {\n  artist: string\n  art: string\n}\n\nexport const works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n  return (\n    <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n      <div className=\"flex w-max space-x-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <Image\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n              Photo by{\" \"}\n              <span className=\"font-semibold text-foreground\">\n                {artwork.artist}\n              </span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/scroll-area.json b/apps/v4/public/r/styles/default/scroll-area.json
new file mode 100644
index 00000000000..204354cf430
--- /dev/null
+++ b/apps/v4/public/r/styles/default/scroll-area.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-scroll-area"
+  ],
+  "files": [
+    {
+      "path": "ui/scroll-area.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"flex touch-none select-none transition-colors\",\n      orientation === \"vertical\" &&\n        \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"h-2.5 flex-col border-t border-t-transparent p-[1px]\",\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/select-demo.json b/apps/v4/public/r/styles/default/select-demo.json
new file mode 100644
index 00000000000..66817c2f057
--- /dev/null
+++ b/apps/v4/public/r/styles/default/select-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/select-form.json b/apps/v4/public/r/styles/default/select-form.json
new file mode 100644
index 00000000000..bbd6dd42688
--- /dev/null
+++ b/apps/v4/public/r/styles/default/select-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-form.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst FormSchema = z.object({\n  email: z\n    .string({\n      required_error: \"Please select an email to display.\",\n    })\n    .email(),\n})\n\nexport default function SelectForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <FormControl>\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a verified email to display\" />\n                  </SelectTrigger>\n                </FormControl>\n                <SelectContent>\n                  <SelectItem value=\"m@example.com\">m@example.com</SelectItem>\n                  <SelectItem value=\"m@google.com\">m@google.com</SelectItem>\n                  <SelectItem value=\"m@support.com\">m@support.com</SelectItem>\n                </SelectContent>\n              </Select>\n              <FormDescription>\n                You can manage email addresses in your{\" \"}\n                <Link href=\"/examples/forms\">email settings</Link>.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/select-scrollable.json b/apps/v4/public/r/styles/default/select-scrollable.json
new file mode 100644
index 00000000000..2d9c87862f2
--- /dev/null
+++ b/apps/v4/public/r/styles/default/select-scrollable.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-scrollable",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-scrollable.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function SelectScrollable() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[280px]\">\n        <SelectValue placeholder=\"Select a timezone\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>North America</SelectLabel>\n          <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n          <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n          <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n          <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n          <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n          <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Europe & Africa</SelectLabel>\n          <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n          <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n          <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n          <SelectItem value=\"west\">\n            Western European Summer Time (WEST)\n          </SelectItem>\n          <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n          <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Asia</SelectLabel>\n          <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n          <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n          <SelectItem value=\"cst_china\">China Standard Time (CST)</SelectItem>\n          <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n          <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n          <SelectItem value=\"ist_indonesia\">\n            Indonesia Central Standard Time (WITA)\n          </SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Australia & Pacific</SelectLabel>\n          <SelectItem value=\"awst\">\n            Australian Western Standard Time (AWST)\n          </SelectItem>\n          <SelectItem value=\"acst\">\n            Australian Central Standard Time (ACST)\n          </SelectItem>\n          <SelectItem value=\"aest\">\n            Australian Eastern Standard Time (AEST)\n          </SelectItem>\n          <SelectItem value=\"nzst\">New Zealand Standard Time (NZST)</SelectItem>\n          <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>South America</SelectLabel>\n          <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n          <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n          <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n          <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/select.json b/apps/v4/public/r/styles/default/select.json
new file mode 100644
index 00000000000..f9531c885cc
--- /dev/null
+++ b/apps/v4/public/r/styles/default/select.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-select"
+  ],
+  "files": [
+    {
+      "path": "ui/select.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronUp className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronDown className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/separator-demo.json b/apps/v4/public/r/styles/default/separator-demo.json
new file mode 100644
index 00000000000..fb8337b26a9
--- /dev/null
+++ b/apps/v4/public/r/styles/default/separator-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "examples/separator-demo.tsx",
+      "content": "import { Separator } from \"@/registry/default/ui/separator\"\n\nexport default function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/separator.json b/apps/v4/public/r/styles/default/separator.json
new file mode 100644
index 00000000000..e3ae2c55692
--- /dev/null
+++ b/apps/v4/public/r/styles/default/separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-separator"
+  ],
+  "files": [
+    {
+      "path": "ui/separator.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sheet-demo.json b/apps/v4/public/r/styles/default/sheet-demo.json
new file mode 100644
index 00000000000..5737a71d6d0
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sheet-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "examples/sheet-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nexport default function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sheet-side.json b/apps/v4/public/r/styles/default/sheet-side.json
new file mode 100644
index 00000000000..53e6322d87f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sheet-side.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-side",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "examples/sheet-side.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger asChild>\n            <Button variant=\"outline\">{side}</Button>\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you're done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose asChild>\n                <Button type=\"submit\">Save changes</Button>\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sheet.json b/apps/v4/public/r/styles/default/sheet.json
new file mode 100644
index 00000000000..e58b847ad5e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sheet.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/sheet.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-01.json b/apps/v4/public/r/styles/default/sidebar-01.json
new file mode 100644
index 00000000000..524a8fcf36f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-01.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple sidebar with navigation grouped by section.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/default/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/default/blocks/sidebar-01/components/version-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        {/* We create a SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <SidebarGroup key={item.title}>\n            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {item.items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild isActive={item.isActive}>\n                      <a href={item.url}>{item.title}</a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-01/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-semibold\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width]\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-02.json b/apps/v4/public/r/styles/default/sidebar-02.json
new file mode 100644
index 00000000000..17e57a6779e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-02.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with collapsible sections.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/default/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/default/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-semibold\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width]\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-03.json b/apps/v4/public/r/styles/default/sidebar-03.json
new file mode 100644
index 00000000000..96d29748843
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-03.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-04.json b/apps/v4/public/r/styles/default/sidebar-04.json
new file mode 100644
index 00000000000..291610e4144
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-04.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A floating sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-05.json b/apps/v4/public/r/styles/default/sidebar-05.json
new file mode 100644
index 00000000000..2bdd45fccac
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-05.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with collapsible submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/default/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                      <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-05/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-06.json b/apps/v4/public/r/styles/default/sidebar-06.json
new file mode 100644
index 00000000000..d09ac9c388f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-06.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with submenus as dropdowns.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { MoreHorizontal, type LucideIcon } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup>\n      <SidebarMenu>\n        {items.map((item) => (\n          <DropdownMenu key={item.title}>\n            <SidebarMenuItem>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  {item.title} <MoreHorizontal className=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              {item.items?.length ? (\n                <DropdownMenuContent\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align={isMobile ? \"end\" : \"start\"}\n                  className=\"min-w-56 rounded-lg\"\n                >\n                  {item.items.map((item) => (\n                    <DropdownMenuItem asChild key={item.title}>\n                      <a href={item.url}>{item.title}</a>\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              ) : null}\n            </SidebarMenuItem>\n          </DropdownMenu>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { SidebarInput } from \"@/registry/default/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"shadow-none\">\n      <form>\n        <CardHeader className=\"p-4 pb-0\">\n          <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n          <CardDescription>\n            Opt-in to receive updates and news about the sidebar.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"grid gap-2.5 p-4\">\n          <SidebarInput type=\"email\" placeholder=\"Email\" />\n          <Button\n            className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n            size=\"sm\"\n          >\n            Subscribe\n          </Button>\n        </CardContent>\n      </form>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-07.json b/apps/v4/public/r/styles/default/sidebar-07.json
new file mode 100644
index 00000000000..7c87e79be78
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-07.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar that collapses to icons.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/default/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">\n                  {activeTeam.name}\n                </span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-08.json b/apps/v4/public/r/styles/default/sidebar-08.json
new file mode 100644
index 00000000000..cf9ab0e04af
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-08.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "An inset sidebar with secondary navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/default/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-09.json b/apps/v4/public/r/styles/default/sidebar-09.json
new file mode 100644
index 00000000000..d6d99b4a8b7
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-09.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Collapsible nested sidebars.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\n\nimport { NavUser } from \"@/registry/default/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-10.json b/apps/v4/public/r/styles/default/sidebar-10.json
new file mode 100644
index 00000000000..fa4fa7b621a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-10.json
@@ -0,0 +1,69 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar in a popover.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/default/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/default/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/default/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/default/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/default/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/default/blocks/sidebar-10/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: Settings2,\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: Link,\n    },\n    {\n      label: \"Duplicate\",\n      icon: Copy,\n    },\n    {\n      label: \"Move to\",\n      icon: CornerUpRight,\n    },\n    {\n      label: \"Move to Trash\",\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: CornerUpLeft,\n    },\n    {\n      label: \"View analytics\",\n      icon: LineChart,\n    },\n    {\n      label: \"Version History\",\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: \"Show delete pages\",\n      icon: Trash,\n    },\n    {\n      label: \"Notifications\",\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: ArrowUp,\n    },\n    {\n      label: \"Export\",\n      icon: ArrowDown,\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-11.json b/apps/v4/public/r/styles/default/sidebar-11.json
new file mode 100644
index 00000000000..f10a5efa724
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-11.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a collapsible file tree.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <File />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <File />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton>\n            <ChevronRight className=\"transition-transform\" />\n            <Folder />\n            {name}\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-12.json b/apps/v4/public/r/styles/default/sidebar-12.json
new file mode 100644
index 00000000000..d96f1ecc124
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-12.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a calendar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/default/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/default/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-13.json b/apps/v4/public/r/styles/default/sidebar-13.json
new file mode 100644
index 00000000000..9cf2bc9ee1b
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-13.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar in a dialog.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"@/registry/default/blocks/sidebar-13/components/settings-dialog\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-14.json b/apps/v4/public/r/styles/default/sidebar-14.json
new file mode 100644
index 00000000000..34242fd92f4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-14.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar on the right.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-15.json b/apps/v4/public/r/styles/default/sidebar-15.json
new file mode 100644
index 00000000000..6c3b413772b
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-15.json
@@ -0,0 +1,89 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A left and right sidebar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"@/registry/default/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/default/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-15/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/default/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/default/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/default/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/default/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/default/blocks/sidebar-15/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function SidebarLeft({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/default/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/default/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-16.json b/apps/v4/public/r/styles/default/sidebar-16.json
new file mode 100644
index 00000000000..53626d1ef70
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-16.json
@@ -0,0 +1,71 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/default/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(theme(spacing.14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/default/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-[--header-height] !h-[calc(100svh-var(--header-height))]\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { SidebarInput } from \"@/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <div className=\"relative\">\n        <Label htmlFor=\"search\" className=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Type to search...\"\n          className=\"h-8 pl-7\"\n        />\n        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/default/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport { useSidebar } from \"@/registry/default/ui/sidebar\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"flex sticky top-0 z-50 w-full items-center border-b bg-background\">\n      <div className=\"flex h-[--header-height] w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <SidebarIcon />\n        </Button>\n        <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-controlled.json b/apps/v4/public/r/styles/default/sidebar-controlled.json
new file mode 100644
index 00000000000..f2be2062be4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-controlled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <SidebarProvider open={open} onOpenChange={setOpen}>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center h-12 px-4 justify-between\">\n          <Button\n            onClick={() => setOpen((open) => !open)}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            {open ? <PanelLeftClose /> : <PanelLeftOpen />}\n            <span>{open ? \"Close\" : \"Open\"} Sidebar</span>\n          </Button>\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-demo.json b/apps/v4/public/r/styles/default/sidebar-demo.json
new file mode 100644
index 00000000000..3bce491bb54
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Calendar, Home, Inbox, Search, Settings } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\n// Menu items.\nconst items = [\n  {\n    title: \"Home\",\n    url: \"#\",\n    icon: Home,\n  },\n  {\n    title: \"Inbox\",\n    url: \"#\",\n    icon: Inbox,\n  },\n  {\n    title: \"Calendar\",\n    url: \"#\",\n    icon: Calendar,\n  },\n  {\n    title: \"Search\",\n    url: \"#\",\n    icon: Search,\n  },\n  {\n    title: \"Settings\",\n    url: \"#\",\n    icon: Settings,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Application</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-footer.json b/apps/v4/public/r/styles/default/sidebar-footer.json
new file mode 100644
index 00000000000..762076b51de
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-footer.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-footer.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, ChevronUp, User2 } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader />\n        <SidebarContent />\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Username\n                    <ChevronUp className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  side=\"top\"\n                  className=\"w-[--radix-popper-anchor-width]\"\n                >\n                  <DropdownMenuItem>\n                    <span>Account</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Billing</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Sign out</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-group-action.json b/apps/v4/public/r/styles/default/sidebar-group-action.json
new file mode 100644
index 00000000000..4207e23e88b
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-group-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-action.tsx",
+      "content": "\"use client\"\n\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from \"lucide-react\"\nimport { Toaster, toast } from \"sonner\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Toaster\n        position=\"bottom-left\"\n        toastOptions={{\n          className: \"ml-[160px]\",\n        }}\n      />\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupAction\n              title=\"Add Project\"\n              onClick={() => toast(\"You clicked the group action!\")}\n            >\n              <Plus /> <span className=\"sr-only\">Add Project</span>\n            </SidebarGroupAction>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <Frame />\n                      <span>Design Engineering</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <PieChart />\n                      <span>Sales & Marketing</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <Map />\n                      <span>Travel</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-group-collapsible.json b/apps/v4/public/r/styles/default/sidebar-group-collapsible.json
new file mode 100644
index 00000000000..2fe54a6d844
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-group-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <Collapsible defaultOpen className=\"group/collapsible\">\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  Help\n                  <ChevronDown className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <LifeBuoy />\n                        Support\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <Send />\n                        Feedback\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-group.json b/apps/v4/public/r/styles/default/sidebar-group.json
new file mode 100644
index 00000000000..f346ded36ed
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-group.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group.tsx",
+      "content": "\"use client\"\n\nimport { LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Help</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <LifeBuoy />\n                    Support\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <Send />\n                    Feedback\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-header.json b/apps/v4/public/r/styles/default/sidebar-header.json
new file mode 100644
index 00000000000..a5efdcb83bb
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-header.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-header.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Select Workspace\n                    <ChevronDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent className=\"w-[--radix-popper-anchor-width]\">\n                  <DropdownMenuItem>\n                    <span>Acme Inc</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Acme Corp.</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-menu-action.json b/apps/v4/public/r/styles/default/sidebar-menu-action.json
new file mode 100644
index 00000000000..8ac46a44658
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-menu-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-action.tsx",
+      "content": "\"use client\"\n\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project, index) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction>\n                          <MoreHorizontal />\n                          <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuItem>\n                          <span>Edit Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <span>Delete Project</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-menu-badge.json b/apps/v4/public/r/styles/default/sidebar-menu-badge.json
new file mode 100644
index 00000000000..13bc9d40eb9
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-menu-badge.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-badge.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n    badge: \"8\",\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-menu-collapsible.json b/apps/v4/public/r/styles/default/sidebar-menu-collapsible.json
new file mode 100644
index 00000000000..c08d9f66151
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-menu-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <Collapsible\n                    key={index}\n                    className=\"group/collapsible\"\n                    defaultOpen={index === 0}\n                  >\n                    <SidebarMenuItem>\n                      <CollapsibleTrigger asChild>\n                        <SidebarMenuButton>\n                          <span>{item.title}</span>\n                          <ChevronRight className=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem, subIndex) => (\n                            <SidebarMenuSubItem key={subIndex}>\n                              <SidebarMenuSubButton asChild>\n                                <a href={subItem.url}>\n                                  <span>{subItem.title}</span>\n                                </a>\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </SidebarMenuItem>\n                  </Collapsible>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-menu-sub.json b/apps/v4/public/r/styles/default/sidebar-menu-sub.json
new file mode 100644
index 00000000000..33f48962040
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-menu-sub.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-sub.tsx",
+      "content": "\"use client\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <SidebarMenuItem key={index}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuSub>\n                      {item.items.map((subItem, subIndex) => (\n                        <SidebarMenuSubItem key={subIndex}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-menu.json b/apps/v4/public/r/styles/default/sidebar-menu.json
new file mode 100644
index 00000000000..41f54b6f1e9
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-menu.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar-rsc.json b/apps/v4/public/r/styles/default/sidebar-rsc.json
new file mode 100644
index 00000000000..f9dd25279b3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar-rsc.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-rsc.tsx",
+      "content": "import * as React from \"react\"\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n    badge: \"8\",\n  },\n]\n\n// Dummy fetch function\nasync function fetchProjects() {\n  await new Promise((resolve) => setTimeout(resolve, 3000))\n  return projects\n}\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <React.Suspense fallback={<NavProjectsSkeleton />}>\n                <NavProjects />\n              </React.Suspense>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n\nfunction NavProjectsSkeleton() {\n  return (\n    <SidebarMenu>\n      {Array.from({ length: 5 }).map((_, index) => (\n        <SidebarMenuItem key={index}>\n          <SidebarMenuSkeleton showIcon />\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nasync function NavProjects() {\n  const projects = await fetchProjects()\n\n  return (\n    <SidebarMenu>\n      {projects.map((project) => (\n        <SidebarMenuItem key={project.name}>\n          <SidebarMenuButton asChild>\n            <a href={project.url}>\n              <project.icon />\n              <span>{project.name}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sidebar.json b/apps/v4/public/r/styles/default/sidebar.json
new file mode 100644
index 00000000000..8b06dea10ad
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sidebar.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "separator",
+    "sheet",
+    "tooltip",
+    "input",
+    "use-mobile",
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "ui/sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/default/hooks/use-mobile\"\nimport { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/default/ui/sheet\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = React.useState(false)\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === \"function\" ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n\n        // This sets the cookie to keep the sidebar state.\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      },\n      [setOpenProp, open]\n    )\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener(\"keydown\", handleKeyDown)\n      return () => window.removeEventListener(\"keydown\", handleKeyDown)\n    }, [toggleSidebar])\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? \"expanded\" : \"collapsed\"\n\n    const contextValue = React.useMemo<SidebarContextProps>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH,\n                \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as React.CSSProperties\n            }\n            className={cn(\n              \"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar\",\n              className\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  }\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\nconst Sidebar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    side?: \"left\" | \"right\"\n    variant?: \"sidebar\" | \"floating\" | \"inset\"\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  }\n>(\n  (\n    {\n      side = \"left\",\n      variant = \"sidebar\",\n      collapsible = \"offcanvas\",\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n    if (collapsible === \"none\") {\n      return (\n        <div\n          className={cn(\n            \"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground\",\n            className\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </div>\n      )\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n              } as React.CSSProperties\n            }\n            side={side}\n          >\n            <SheetHeader className=\"sr-only\">\n              <SheetTitle>Sidebar</SheetTitle>\n              <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n            </SheetHeader>\n            <div className=\"flex h-full w-full flex-col\">{children}</div>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-sidebar-foreground md:block\"\n        data-state={state}\n        data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n        data-variant={variant}\n        data-side={side}\n      >\n        {/* This is what handles the sidebar gap on desktop */}\n        <div\n          className={cn(\n            \"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\n            \"group-data-[collapsible=offcanvas]:w-0\",\n            \"group-data-[side=right]:rotate-180\",\n            variant === \"floating\" || variant === \"inset\"\n              ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n              : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\"\n          )}\n        />\n        <div\n          className={cn(\n            \"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\n            side === \"left\"\n              ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n              : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n            // Adjust the padding for floating and inset variants.\n            variant === \"floating\" || variant === \"inset\"\n              ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n              : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n            className\n          )}\n          {...props}\n        >\n          <div\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n  React.ElementRef<typeof Button>,\n  React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"h-7 w-7\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <PanelLeft />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst SidebarRail = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      ref={ref}\n      data-sidebar=\"rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarRail.displayName = \"SidebarRail\"\n\nconst SidebarInset = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"main\">\n>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = \"SidebarInset\"\n\nconst SidebarInput = React.forwardRef<\n  React.ElementRef<typeof Input>,\n  React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      className={cn(\n        \"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = \"SidebarInput\"\n\nconst SidebarHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarSeparator = React.forwardRef<\n  React.ElementRef<typeof Separator>,\n  React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n})\nSidebarSeparator.displayName = \"SidebarSeparator\"\n\nconst SidebarContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = \"SidebarGroup\"\n\nconst SidebarGroupLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"div\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\n\nconst SidebarGroupAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = \"SidebarGroupAction\"\n\nconst SidebarGroupContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"group-content\"\n    className={cn(\"w-full text-sm\", className)}\n    {...props}\n  />\n))\nSidebarGroupContent.displayName = \"SidebarGroupContent\"\n\nconst SidebarMenu = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu\"\n    className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n    {...props}\n  />\n))\nSidebarMenu.displayName = \"SidebarMenu\"\n\nconst SidebarMenuItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    data-sidebar=\"menu-item\"\n    className={cn(\"group/menu-item relative\", className)}\n    {...props}\n  />\n))\nSidebarMenuItem.displayName = \"SidebarMenuItem\"\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = \"default\",\n      size = \"default\",\n      tooltip,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : \"button\"\n    const { isMobile, state } = useSidebar()\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n        {...props}\n      />\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === \"string\") {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== \"collapsed\" || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    )\n  }\n)\nSidebarMenuButton.displayName = \"SidebarMenuButton\"\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = \"SidebarMenuAction\"\n\nconst SidebarMenuBadge = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"menu-badge\"\n    className={cn(\n      \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground\",\n      \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className\n    )}\n    {...props}\n  />\n))\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\"\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-[--skeleton-width] flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\n\nconst SidebarMenuSub = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu-sub\"\n    className={cn(\n      \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className\n    )}\n    {...props}\n  />\n))\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\n\nconst SidebarMenuSubItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<\"a\"> & {\n    asChild?: boolean\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "sidebar": {
+              "DEFAULT": "hsl(var(--sidebar-background))",
+              "foreground": "hsl(var(--sidebar-foreground))",
+              "primary": "hsl(var(--sidebar-primary))",
+              "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+              "accent": "hsl(var(--sidebar-accent))",
+              "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+              "border": "hsl(var(--sidebar-border))",
+              "ring": "hsl(var(--sidebar-ring))"
+            }
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "sidebar-background": "0 0% 98%",
+      "sidebar-foreground": "240 5.3% 26.1%",
+      "sidebar-primary": "240 5.9% 10%",
+      "sidebar-primary-foreground": "0 0% 98%",
+      "sidebar-accent": "240 4.8% 95.9%",
+      "sidebar-accent-foreground": "240 5.9% 10%",
+      "sidebar-border": "220 13% 91%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    },
+    "dark": {
+      "sidebar-background": "240 5.9% 10%",
+      "sidebar-foreground": "240 4.8% 95.9%",
+      "sidebar-primary": "224.3 76.3% 48%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "240 3.7% 15.9%",
+      "sidebar-accent-foreground": "240 4.8% 95.9%",
+      "sidebar-border": "240 3.7% 15.9%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sink.json b/apps/v4/public/r/styles/default/sink.json
new file mode 100644
index 00000000000..b99700b7fab
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sink.json
@@ -0,0 +1,452 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sink",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "accordion",
+    "alert",
+    "alert-dialog",
+    "aspect-ratio",
+    "avatar",
+    "badge",
+    "breadcrumb",
+    "button",
+    "calendar",
+    "card",
+    "carousel",
+    "chart",
+    "checkbox",
+    "collapsible",
+    "command",
+    "context-menu",
+    "dialog",
+    "drawer",
+    "dropdown-menu",
+    "hover-card",
+    "input",
+    "input-otp",
+    "label",
+    "menubar",
+    "navigation-menu",
+    "pagination",
+    "popover",
+    "progress",
+    "radio-group",
+    "resizable",
+    "scroll-area",
+    "select",
+    "separator",
+    "sheet",
+    "sidebar",
+    "skeleton",
+    "slider",
+    "sonner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "toast",
+    "toggle",
+    "toggle-group",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "internal/sink/page.tsx",
+      "content": "import { AccordionDemo } from \"@/registry/default/internal/sink/components/accordion-demo\"\nimport { AlertDemo } from \"@/registry/default/internal/sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/registry/default/internal/sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/registry/default/internal/sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/registry/default/internal/sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/registry/default/internal/sink/components/avatar-demo\"\nimport { BadgeDemo } from \"@/registry/default/internal/sink/components/badge-demo\"\nimport { BadgeDestructive } from \"@/registry/default/internal/sink/components/badge-destructive\"\nimport { BadgeOutline } from \"@/registry/default/internal/sink/components/badge-outline\"\nimport { BadgeSecondary } from \"@/registry/default/internal/sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/registry/default/internal/sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/registry/default/internal/sink/components/button-demo\"\nimport { ButtonDestructive } from \"@/registry/default/internal/sink/components/button-destructive\"\nimport { ButtonGhost } from \"@/registry/default/internal/sink/components/button-ghost\"\nimport { ButtonLink } from \"@/registry/default/internal/sink/components/button-link\"\nimport { ButtonLoading } from \"@/registry/default/internal/sink/components/button-loading\"\nimport { ButtonOutline } from \"@/registry/default/internal/sink/components/button-outline\"\nimport { ButtonSecondary } from \"@/registry/default/internal/sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/registry/default/internal/sink/components/button-with-icon\"\nimport { CalendarDemo } from \"@/registry/default/internal/sink/components/calendar-demo\"\nimport { CardDemo } from \"@/registry/default/internal/sink/components/card-demo\"\nimport { CarouselDemo } from \"@/registry/default/internal/sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/registry/default/internal/sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/registry/default/internal/sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/registry/default/internal/sink/components/combobox-demo\"\nimport { CommandDemo } from \"@/registry/default/internal/sink/components/command-demo\"\nimport { ComponentWrapper } from \"@/registry/default/internal/sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/registry/default/internal/sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/registry/default/internal/sink/components/date-picker-demo\"\nimport { DialogDemo } from \"@/registry/default/internal/sink/components/dialog-demo\"\nimport { DrawerDemo } from \"@/registry/default/internal/sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/registry/default/internal/sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/registry/default/internal/sink/components/hover-card-demo\"\nimport { InputDemo } from \"@/registry/default/internal/sink/components/input-demo\"\nimport { InputOTPDemo } from \"@/registry/default/internal/sink/components/input-otp-demo\"\nimport { LabelDemo } from \"@/registry/default/internal/sink/components/label-demo\"\nimport { MenubarDemo } from \"@/registry/default/internal/sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/registry/default/internal/sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/registry/default/internal/sink/components/pagination-demo\"\nimport { PopoverDemo } from \"@/registry/default/internal/sink/components/popover-demo\"\nimport { ProgressDemo } from \"@/registry/default/internal/sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/registry/default/internal/sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/registry/default/internal/sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/registry/default/internal/sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/registry/default/internal/sink/components/select-demo\"\nimport { SeparatorDemo } from \"@/registry/default/internal/sink/components/separator-demo\"\nimport { SheetDemo } from \"@/registry/default/internal/sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/registry/default/internal/sink/components/skeleton-demo\"\nimport { SliderDemo } from \"@/registry/default/internal/sink/components/slider-demo\"\nimport { SonnerDemo } from \"@/registry/default/internal/sink/components/sonner-demo\"\nimport { SwitchDemo } from \"@/registry/default/internal/sink/components/switch-demo\"\nimport { TableDemo } from \"@/registry/default/internal/sink/components/table-demo\"\nimport { TabsDemo } from \"@/registry/default/internal/sink/components/tabs-demo\"\nimport { TextareaDemo } from \"@/registry/default/internal/sink/components/textarea-demo\"\nimport { ToastDemo } from \"@/registry/default/internal/sink/components/toast-demo\"\nimport { ToggleDemo } from \"@/registry/default/internal/sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/registry/default/internal/sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/registry/default/internal/sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/registry/default/internal/sink/components/toggle-outline\"\nimport { ToggleWithText } from \"@/registry/default/internal/sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/registry/default/internal/sink/components/tooltip-demo\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function SinkPage() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n            <ComponentWrapper name=\"Accordion\">\n              <AccordionDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Alert\">\n              <AlertDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AlertDialog\">\n              <AlertDialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AspectRatio\">\n              <AspectRatioDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Avatar\">\n              <AvatarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Badge\">\n              <BadgeDemo />\n              <BadgeDestructive />\n              <BadgeOutline />\n              <BadgeSecondary />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Breadcrumb\">\n              <BreadcrumbDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Button\">\n              <div className=\"flex items-center gap-2\">\n                <ButtonDemo />\n                <ButtonDestructive />\n                <ButtonGhost />\n                <ButtonLink />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonLoading />\n                <ButtonOutline />\n                <ButtonSecondary />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonWithIcon />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Calendar\">\n              <CalendarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Card\">\n              <CardDemo className=\"w-full\" />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Carousel\"\n              className=\"[&_.max-w-xs]:max-w-[70%]\"\n            >\n              <CarouselDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Checkbox\">\n              <CheckboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Collapsible\">\n              <CollapsibleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Combobox\">\n              <ComboboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Command\"\n              className=\"[&_[cmdk-root]]:md:min-w-max\"\n            >\n              <CommandDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ContextMenu\">\n              <ContextMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DatePicker\">\n              <DatePickerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Dialog\">\n              <DialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Drawer\">\n              <DrawerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DropdownMenu\">\n              <DropdownMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"HoverCard\">\n              <HoverCardDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Input\">\n              <InputDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"InputOTP\">\n              <InputOTPDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Label\">\n              <LabelDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Menubar\">\n              <MenubarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"NavigationMenu\" className=\"col-span-2\">\n              <NavigationMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Pagination\">\n              <PaginationDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Popover\">\n              <PopoverDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Progress\">\n              <ProgressDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"RadioGroup\">\n              <RadioGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Resizable\" className=\"col-span-2\">\n              <ResizableHandleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ScrollArea\">\n              <ScrollAreaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Select\">\n              <SelectDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Separator\">\n              <SeparatorDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sheet\">\n              <SheetDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Skeleton\">\n              <SkeletonDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Slider\">\n              <SliderDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sonner\">\n              <SonnerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Switch\">\n              <SwitchDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Table\" className=\"col-span-2\">\n              <TableDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tabs\">\n              <TabsDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Textarea\">\n              <TextareaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toast\">\n              <ToastDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toggle\">\n              <div className=\"flex items-center gap-2\">\n                <ToggleDemo />\n                <ToggleDisabled />\n                <ToggleOutline />\n                <ToggleWithText />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ToggleGroup\">\n              <ToggleGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tooltip\">\n              <TooltipDemo />\n            </ComponentWrapper>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/sink/page.tsx"
+    },
+    {
+      "path": "internal/sink/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/default/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/component-wrapper.tsx",
+      "content": "import { cn } from \"@/registry/default/lib/utils\"\n\nexport function ComponentWrapper({\n  className,\n  name,\n  children,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n  return (\n    <div\n      className={cn(\"flex w-full flex-col rounded-lg border\", className)}\n      {...props}\n    >\n      <div className=\"border-b px-4 py-3\">\n        <div className=\"text-sm font-medium\">{name}</div>\n      </div>\n      <div className=\"flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full\">\n        {children}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">\n                  {activeTeam.name}\n                </span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/accordion-demo.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other\n          components&apos; aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport function AlertDemo() {\n  return (\n    <Alert>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-dialog-demo.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/avatar-demo.tsx",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-demo.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/breadcrumb-demo.tsx",
+      "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { 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 { Switch } from \"@/registry/default/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nexport function CheckboxDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <label\n        htmlFor=\"terms\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nexport function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/command-demo.tsx",
+      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\"\n\nexport function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/context-menu-demo.tsx",
+      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dialog-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Email</DropdownMenuItem>\n                <DropdownMenuItem>Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\"\n\nexport function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-muted-foreground\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-demo.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-otp-demo.tsx",
+      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/menubar-demo.tsx",
+      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/default/ui/menubar\"\n\nexport function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/default/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport function NavigationMenuDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\n                      Beautifully designed components built with Radix UI and\n                      Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nconst ListItem = React.forwardRef<\n  React.ElementRef<\"a\">,\n  React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          ref={ref}\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"text-sm font-medium leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/pagination-demo.tsx",
+      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\"\n\nexport function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/popover-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/default/ui/progress\"\n\nexport function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/resizable-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/separator-demo.tsx",
+      "content": "import { Separator } from \"@/registry/default/ui/separator\"\n\nexport function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sheet-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nexport function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nexport function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/switch-demo.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/table-demo.tsx",
+      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tabs-demo.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\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nexport function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsList className=\"grid w-full grid-cols-2\">\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Account</CardTitle>\n            <CardDescription>\n              Make changes to your account here. Click save when you're done.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"username\">Username</Label>\n              <Input id=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save changes</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Password</CardTitle>\n            <CardDescription>\n              Change your password here. After saving, you'll be logged out.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"current\">Current password</Label>\n              <Input id=\"current\" type=\"password\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"new\">New password</Label>\n              <Input id=\"new\" type=\"password\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save password</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { ToastAction } from \"@/registry/default/ui/toast\"\n\nexport function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-outline.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-destructive.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-ghost.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-link.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-outline.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-secondary.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-with-icon.tsx",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonWithIcon() {\n  return (\n    <Button>\n      <MailOpen /> Login with Email\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/skeleton-card.json b/apps/v4/public/r/styles/default/skeleton-card.json
new file mode 100644
index 00000000000..e9214815568
--- /dev/null
+++ b/apps/v4/public/r/styles/default/skeleton-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-card",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "examples/skeleton-card.tsx",
+      "content": "import { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nexport default function SkeletonCard() {\n  return (\n    <div className=\"flex flex-col space-y-3\">\n      <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/skeleton-demo.json b/apps/v4/public/r/styles/default/skeleton-demo.json
new file mode 100644
index 00000000000..77baa4a7153
--- /dev/null
+++ b/apps/v4/public/r/styles/default/skeleton-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "examples/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/skeleton.json b/apps/v4/public/r/styles/default/skeleton.json
new file mode 100644
index 00000000000..62844a6a05c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/skeleton.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "ui/skeleton.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/slider-demo.json b/apps/v4/public/r/styles/default/slider-demo.json
new file mode 100644
index 00000000000..042dd2100cf
--- /dev/null
+++ b/apps/v4/public/r/styles/default/slider-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "slider"
+  ],
+  "files": [
+    {
+      "path": "examples/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/slider.json b/apps/v4/public/r/styles/default/slider.json
new file mode 100644
index 00000000000..a6b7d0381b1
--- /dev/null
+++ b/apps/v4/public/r/styles/default/slider.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slider"
+  ],
+  "files": [
+    {
+      "path": "ui/slider.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <SliderPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex w-full touch-none select-none items-center\",\n      className\n    )}\n    {...props}\n  >\n    <SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n      <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n    </SliderPrimitive.Track>\n    <SliderPrimitive.Thumb className=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\" />\n  </SliderPrimitive.Root>\n))\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sonner-demo.json b/apps/v4/public/r/styles/default/sonner-demo.json
new file mode 100644
index 00000000000..9e0db7d411a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sonner-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "examples/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/sonner.json b/apps/v4/public/r/styles/default/sonner.json
new file mode 100644
index 00000000000..88ac39ce6d4
--- /dev/null
+++ b/apps/v4/public/r/styles/default/sonner.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "sonner",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "ui/sonner.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner } from \"sonner\"\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n          description: \"group-[.toast]:text-muted-foreground\",\n          actionButton:\n            \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n          cancelButton:\n            \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/style.json b/apps/v4/public/r/styles/default/style.json
new file mode 100644
index 00000000000..f561eb73e3d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/style.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {}
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/switch-demo.json b/apps/v4/public/r/styles/default/switch-demo.json
new file mode 100644
index 00000000000..98d34cb40da
--- /dev/null
+++ b/apps/v4/public/r/styles/default/switch-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "examples/switch-demo.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/switch-form.json b/apps/v4/public/r/styles/default/switch-form.json
new file mode 100644
index 00000000000..fbb5832653d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/switch-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "switch",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/switch-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/default/ui/form\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nconst FormSchema = z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      security_emails: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full space-y-6\">\n        <div>\n          <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n          <div className=\"space-y-4\">\n            <FormField\n              control={form.control}\n              name=\"marketing_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel className=\"text-base\">\n                      Marketing emails\n                    </FormLabel>\n                    <FormDescription>\n                      Receive emails about new products, features, and more.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n            <FormField\n              control={form.control}\n              name=\"security_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel className=\"text-base\">Security emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about your account security.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                      disabled\n                      aria-readonly\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n          </div>\n        </div>\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/switch.json b/apps/v4/public/r/styles/default/switch.json
new file mode 100644
index 00000000000..e8b511d1a3c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/switch.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-switch"
+  ],
+  "files": [
+    {
+      "path": "ui/switch.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n      )}\n    />\n  </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/table-demo.json b/apps/v4/public/r/styles/default/table-demo.json
new file mode 100644
index 00000000000..a88c40c45f8
--- /dev/null
+++ b/apps/v4/public/r/styles/default/table-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "table"
+  ],
+  "files": [
+    {
+      "path": "examples/table-demo.tsx",
+      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/table.json b/apps/v4/public/r/styles/default/table.json
new file mode 100644
index 00000000000..d4e3fba9747
--- /dev/null
+++ b/apps/v4/public/r/styles/default/table.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "ui/table.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\"p-4 align-middle [&:has([role=checkbox])]:pr-0\", className)}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/tabs-demo.json b/apps/v4/public/r/styles/default/tabs-demo.json
new file mode 100644
index 00000000000..45b5898cff3
--- /dev/null
+++ b/apps/v4/public/r/styles/default/tabs-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "tabs"
+  ],
+  "files": [
+    {
+      "path": "examples/tabs-demo.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\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nexport default function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsList className=\"grid w-full grid-cols-2\">\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Account</CardTitle>\n            <CardDescription>\n              Make changes to your account here. Click save when you're done.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"username\">Username</Label>\n              <Input id=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save changes</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Password</CardTitle>\n            <CardDescription>\n              Change your password here. After saving, you'll be logged out.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"current\">Current password</Label>\n              <Input id=\"current\" type=\"password\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"new\">New password</Label>\n              <Input id=\"new\" type=\"password\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save password</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/tabs.json b/apps/v4/public/r/styles/default/tabs.json
new file mode 100644
index 00000000000..b5f9dc21b74
--- /dev/null
+++ b/apps/v4/public/r/styles/default/tabs.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-tabs"
+  ],
+  "files": [
+    {
+      "path": "ui/tabs.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/textarea-demo.json b/apps/v4/public/r/styles/default/textarea-demo.json
new file mode 100644
index 00000000000..e75806c86ea
--- /dev/null
+++ b/apps/v4/public/r/styles/default/textarea-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/textarea-disabled.json b/apps/v4/public/r/styles/default/textarea-disabled.json
new file mode 100644
index 00000000000..dceb48048b1
--- /dev/null
+++ b/apps/v4/public/r/styles/default/textarea-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-disabled.tsx",
+      "content": "import { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function TextareaDisabled() {\n  return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/textarea-form.json b/apps/v4/public/r/styles/default/textarea-form.json
new file mode 100644
index 00000000000..1cd07e809af
--- /dev/null
+++ b/apps/v4/public/r/styles/default/textarea-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nconst FormSchema = z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: \"Bio must be at least 10 characters.\",\n    })\n    .max(160, {\n      message: \"Bio must not be longer than 30 characters.\",\n    }),\n})\n\nexport default function TextareaForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"bio\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Bio</FormLabel>\n              <FormControl>\n                <Textarea\n                  placeholder=\"Tell us a little bit about yourself\"\n                  className=\"resize-none\"\n                  {...field}\n                />\n              </FormControl>\n              <FormDescription>\n                You can <span>@mention</span> other users and organizations.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/textarea-with-button.json b/apps/v4/public/r/styles/default/textarea-with-button.json
new file mode 100644
index 00000000000..2f3395d55e8
--- /dev/null
+++ b/apps/v4/public/r/styles/default/textarea-with-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-button.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function TextareaWithButton() {\n  return (\n    <div className=\"grid w-full gap-2\">\n      <Textarea placeholder=\"Type your message here.\" />\n      <Button>Send message</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/textarea-with-label.json b/apps/v4/public/r/styles/default/textarea-with-label.json
new file mode 100644
index 00000000000..af928655d80
--- /dev/null
+++ b/apps/v4/public/r/styles/default/textarea-with-label.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-label",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-label.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function TextareaWithLabel() {\n  return (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message\">Your message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/textarea-with-text.json b/apps/v4/public/r/styles/default/textarea-with-text.json
new file mode 100644
index 00000000000..26ff48efc90
--- /dev/null
+++ b/apps/v4/public/r/styles/default/textarea-with-text.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-text.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function TextareaWithText() {\n  return (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message-2\">Your Message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n      <p className=\"text-sm text-muted-foreground\">\n        Your message will be copied to the support team.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/textarea.json b/apps/v4/public/r/styles/default/textarea.json
new file mode 100644
index 00000000000..b27c54892b1
--- /dev/null
+++ b/apps/v4/public/r/styles/default/textarea.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "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",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/theme-daylight.json b/apps/v4/public/r/styles/default/theme-daylight.json
new file mode 100644
index 00000000000..56d374c2c52
--- /dev/null
+++ b/apps/v4/public/r/styles/default/theme-daylight.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-daylight",
+  "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "cssVars": {
+    "light": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    },
+    "dark": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/theme-emerald.json b/apps/v4/public/r/styles/default/theme-emerald.json
new file mode 100644
index 00000000000..dd11b1ab9e1
--- /dev/null
+++ b/apps/v4/public/r/styles/default/theme-emerald.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-emerald",
+  "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 45%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "142 86% 28%",
+      "chart-1": "139 65% 20%",
+      "chart-2": "140 74% 44%",
+      "chart-3": "142 88% 28%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "142 86% 28%",
+      "chart-1": "142 88% 28%",
+      "chart-2": "139 65% 20%",
+      "chart-3": "140 74% 24%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/theme-midnight.json b/apps/v4/public/r/styles/default/theme-midnight.json
new file mode 100644
index 00000000000..65dfce822e5
--- /dev/null
+++ b/apps/v4/public/r/styles/default/theme-midnight.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-midnight",
+  "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "cssVars": {
+    "light": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    },
+    "dark": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toast-demo.json b/apps/v4/public/r/styles/default/toast-demo.json
new file mode 100644
index 00000000000..405385e5a12
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toast-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { ToastAction } from \"@/registry/default/ui/toast\"\n\nexport default function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toast-destructive.json b/apps/v4/public/r/styles/default/toast-destructive.json
new file mode 100644
index 00000000000..e67ecccc640
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toast-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-destructive.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { ToastAction } from \"@/registry/default/ui/toast\"\n\nexport default function ToastDestructive() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          variant: \"destructive\",\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toast-simple.json b/apps/v4/public/r/styles/default/toast-simple.json
new file mode 100644
index 00000000000..bd0535467be
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toast-simple.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-simple",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-simple.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ToastSimple() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          description: \"Your message has been sent.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toast-with-action.json b/apps/v4/public/r/styles/default/toast-with-action.json
new file mode 100644
index 00000000000..98976606738
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toast-with-action.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-action",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-action.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { ToastAction } from \"@/registry/default/ui/toast\"\n\nexport default function ToastWithAction() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toast-with-title.json b/apps/v4/public/r/styles/default/toast-with-title.json
new file mode 100644
index 00000000000..c9bf06dd820
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toast-with-title.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-title",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-title.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ToastWithTitle() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toast.json b/apps/v4/public/r/styles/default/toast.json
new file mode 100644
index 00000000000..61b4048cb2a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toast.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-toast"
+  ],
+  "files": [
+    {
+      "path": "ui/toast.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Viewport\n    ref={ref}\n    className={cn(\n      \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n      className\n    )}\n    {...props}\n  />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n  \"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n  {\n    variants: {\n      variant: {\n        default: \"border bg-background text-foreground\",\n        destructive:\n          \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Toast = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n  return (\n    <ToastPrimitives.Root\n      ref={ref}\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Action>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Action\n    ref={ref}\n    className={cn(\n      \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive\",\n      className\n    )}\n    {...props}\n  />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Close>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Close\n    ref={ref}\n    className={cn(\n      \"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"h-4 w-4\" />\n  </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Title>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Title\n    ref={ref}\n    className={cn(\"text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Description>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Description\n    ref={ref}\n    className={cn(\"text-sm opacity-90\", className)}\n    {...props}\n  />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n  type ToastProps,\n  type ToastActionElement,\n  ToastProvider,\n  ToastViewport,\n  Toast,\n  ToastTitle,\n  ToastDescription,\n  ToastClose,\n  ToastAction,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "hooks/use-toast.ts",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/default/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { useToast, toast }\n",
+      "type": "registry:hook",
+      "target": ""
+    },
+    {
+      "path": "ui/toaster.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from \"@/registry/default/ui/toast\"\n\nexport function Toaster() {\n  const { toasts } = useToast()\n\n  return (\n    <ToastProvider>\n      {toasts.map(function ({ id, title, description, action, ...props }) {\n        return (\n          <Toast key={id} {...props}>\n            <div className=\"grid gap-1\">\n              {title && <ToastTitle>{title}</ToastTitle>}\n              {description && (\n                <ToastDescription>{description}</ToastDescription>\n              )}\n            </div>\n            {action}\n            <ToastClose />\n          </Toast>\n        )\n      })}\n      <ToastViewport />\n    </ToastProvider>\n  )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-demo.json b/apps/v4/public/r/styles/default/toggle-demo.json
new file mode 100644
index 00000000000..bf5e9a8cc38
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle bold\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-disabled.json b/apps/v4/public/r/styles/default/toggle-disabled.json
new file mode 100644
index 00000000000..aa1bd211e46
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle underline\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-group-demo.json b/apps/v4/public/r/styles/default/toggle-group-demo.json
new file mode 100644
index 00000000000..2d9cb3d314a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-group-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-group-disabled.json b/apps/v4/public/r/styles/default/toggle-group-disabled.json
new file mode 100644
index 00000000000..a9fb4c6c901
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-group-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-disabled.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup disabled type=\"single\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-group-lg.json b/apps/v4/public/r/styles/default/toggle-group-lg.json
new file mode 100644
index 00000000000..ed667df76fe
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-group-lg.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-lg",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-lg.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup size={\"lg\"} type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-group-outline.json b/apps/v4/public/r/styles/default/toggle-group-outline.json
new file mode 100644
index 00000000000..381cb5633a2
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-group-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-outline.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup variant=\"outline\" type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-group-single.json b/apps/v4/public/r/styles/default/toggle-group-single.json
new file mode 100644
index 00000000000..70566d9415c
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-group-single.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-single",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-single.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"single\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-group-sm.json b/apps/v4/public/r/styles/default/toggle-group-sm.json
new file mode 100644
index 00000000000..feebc156e0d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-group-sm.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-sm",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-sm.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup size={\"sm\"} type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-group.json b/apps/v4/public/r/styles/default/toggle-group.json
new file mode 100644
index 00000000000..c1092cab774
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-group.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-toggle-group"
+  ],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/default/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    className={cn(\"flex items-center justify-center gap-1\", className)}\n    {...props}\n  >\n    <ToggleGroupContext.Provider value={{ variant, size }}>\n      {children}\n    </ToggleGroupContext.Provider>\n  </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n    VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-lg.json b/apps/v4/public/r/styles/default/toggle-lg.json
new file mode 100644
index 00000000000..e8d521a6675
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-lg.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-lg",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-lg.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleLg() {\n  return (\n    <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-outline.json b/apps/v4/public/r/styles/default/toggle-outline.json
new file mode 100644
index 00000000000..4c778f44c69
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-sm.json b/apps/v4/public/r/styles/default/toggle-sm.json
new file mode 100644
index 00000000000..d2f444a703d
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-sm.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-sm",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-sm.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleSm() {\n  return (\n    <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle-with-text.json b/apps/v4/public/r/styles/default/toggle-with-text.json
new file mode 100644
index 00000000000..a26d7668696
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/toggle.json b/apps/v4/public/r/styles/default/toggle.json
new file mode 100644
index 00000000000..a913fa84553
--- /dev/null
+++ b/apps/v4/public/r/styles/default/toggle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-toggle"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-3 min-w-10\",\n        sm: \"h-9 px-2.5 min-w-9\",\n        lg: \"h-11 px-5 min-w-11\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/tooltip-demo.json b/apps/v4/public/r/styles/default/tooltip-demo.json
new file mode 100644
index 00000000000..8deb3757c3e
--- /dev/null
+++ b/apps/v4/public/r/styles/default/tooltip-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "examples/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/tooltip.json b/apps/v4/public/r/styles/default/tooltip.json
new file mode 100644
index 00000000000..c56aff63b16
--- /dev/null
+++ b/apps/v4/public/r/styles/default/tooltip.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-tooltip"
+  ],
+  "files": [
+    {
+      "path": "ui/tooltip.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-blockquote.json b/apps/v4/public/r/styles/default/typography-blockquote.json
new file mode 100644
index 00000000000..7afcb802cdf
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-blockquote.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-blockquote",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-blockquote.tsx",
+      "content": "export default function TypographyBlockquote() {\n  return (\n    <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n      they should pay for the privilege.\"\n    </blockquote>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-demo.json b/apps/v4/public/r/styles/default/typography-demo.json
new file mode 100644
index 00000000000..c5ae2e8b977
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-demo.tsx",
+      "content": "export default function TypographyDemo() {\n  return (\n    <div>\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n        The Joke Tax Chronicles\n      </h1>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </p>\n      <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n        The King's Plan\n      </h2>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king thought long and hard, and finally came up with{\" \"}\n        <a\n          href=\"#\"\n          className=\"font-medium text-primary underline underline-offset-4\"\n        >\n          a brilliant plan\n        </a>\n        : he would tax the jokes in the kingdom.\n      </p>\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n        \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n        that they should pay for the privilege.\"\n      </blockquote>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The Joke Tax\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king's subjects were not amused. They grumbled and complained, but\n        the king was firm:\n      </p>\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king's\n        foolishness get him down: a court jester named Jokester.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        Jokester's Revolt\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king's pillow, in his soup,\n        even in the royal toilet. The king was furious, but he couldn't seem to\n        stop Jokester.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn't help but laugh. And\n        once they started laughing, they couldn't stop.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The People's Rebellion\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </p>\n      <div className=\"my-6 w-full overflow-y-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                King's Treasury\n              </th>\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                People's happiness\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Empty\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Overflowing\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Modest\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Satisfied\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Full\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Ecstatic\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-h1.json b/apps/v4/public/r/styles/default/typography-h1.json
new file mode 100644
index 00000000000..0c282dda464
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-h1.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h1",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h1.tsx",
+      "content": "export default function TypographyH1() {\n  return (\n    <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      Taxing Laughter: The Joke Tax Chronicles\n    </h1>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-h2.json b/apps/v4/public/r/styles/default/typography-h2.json
new file mode 100644
index 00000000000..eb42b1c4142
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-h2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h2",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h2.tsx",
+      "content": "export default function TypographyH2() {\n  return (\n    <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n      The People of the Kingdom\n    </h2>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-h3.json b/apps/v4/public/r/styles/default/typography-h3.json
new file mode 100644
index 00000000000..946cf24167a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-h3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h3",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h3.tsx",
+      "content": "export default function TypographyH3() {\n  return (\n    <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-h4.json b/apps/v4/public/r/styles/default/typography-h4.json
new file mode 100644
index 00000000000..bbd61e8a255
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-h4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h4",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h4.tsx",
+      "content": "export default function TypographyH4() {\n  return (\n    <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n      People stopped telling jokes\n    </h4>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-inline-code.json b/apps/v4/public/r/styles/default/typography-inline-code.json
new file mode 100644
index 00000000000..edcf52f8b4a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-inline-code.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-inline-code",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-inline-code.tsx",
+      "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n      @radix-ui/react-alert-dialog\n    </code>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-large.json b/apps/v4/public/r/styles/default/typography-large.json
new file mode 100644
index 00000000000..fba10786a01
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-large.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-large",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-large.tsx",
+      "content": "export default function TypographyLarge() {\n  return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-lead.json b/apps/v4/public/r/styles/default/typography-lead.json
new file mode 100644
index 00000000000..c38d1ef4a04
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-lead.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-lead",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-lead.tsx",
+      "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-xl text-muted-foreground\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-list.json b/apps/v4/public/r/styles/default/typography-list.json
new file mode 100644
index 00000000000..397d847ec2b
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-list.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-list",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-list.tsx",
+      "content": "export default function TypographyList() {\n  return (\n    <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-muted.json b/apps/v4/public/r/styles/default/typography-muted.json
new file mode 100644
index 00000000000..786c2904577
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-muted.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-muted",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-muted.tsx",
+      "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-p.json b/apps/v4/public/r/styles/default/typography-p.json
new file mode 100644
index 00000000000..eb9a367fb1a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-p.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-p",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-p.tsx",
+      "content": "export default function TypographyP() {\n  return (\n    <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error of\n      his ways and repealed the joke tax.\n    </p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-small.json b/apps/v4/public/r/styles/default/typography-small.json
new file mode 100644
index 00000000000..f9cebba93fd
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-small.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-small",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-small.tsx",
+      "content": "export default function TypographySmall() {\n  return (\n    <small className=\"text-sm font-medium leading-none\">Email address</small>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/typography-table.json b/apps/v4/public/r/styles/default/typography-table.json
new file mode 100644
index 00000000000..af19b2b08f1
--- /dev/null
+++ b/apps/v4/public/r/styles/default/typography-table.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-table",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-table.tsx",
+      "content": "export default function TypographyTable() {\n  return (\n    <div className=\"my-6 w-full overflow-y-auto\">\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              King's Treasury\n            </th>\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Empty\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Overflowing\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Modest\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Satisfied\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Full\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/use-mobile.json b/apps/v4/public/r/styles/default/use-mobile.json
new file mode 100644
index 00000000000..50fc54a1982
--- /dev/null
+++ b/apps/v4/public/r/styles/default/use-mobile.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-mobile",
+  "type": "registry:hook",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "hooks/use-mobile.tsx",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/use-toast.json b/apps/v4/public/r/styles/default/use-toast.json
new file mode 100644
index 00000000000..2849dd851df
--- /dev/null
+++ b/apps/v4/public/r/styles/default/use-toast.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-toast",
+  "type": "registry:hook",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "hooks/use-toast.ts",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/default/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { useToast, toast }\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/utils.json b/apps/v4/public/r/styles/default/utils.json
new file mode 100644
index 00000000000..0af1ec0d616
--- /dev/null
+++ b/apps/v4/public/r/styles/default/utils.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "utils",
+  "type": "registry:lib",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-login-01.json b/apps/v4/public/r/styles/default/v0-login-01.json
new file mode 100644
index 00000000000..f01c3f77bb6
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-login-01.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-login-01",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "internal/login-01.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-screen w-full items-center justify-center px-4\">\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\n                  href=\"#\"\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        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-01.json b/apps/v4/public/r/styles/default/v0-sidebar-01.json
new file mode 100644
index 00000000000..9de56de16bd
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-01.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-01",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <GalleryVerticalEnd className=\"size-4\" />\n                    </div>\n                    <div className=\"flex flex-col gap-0.5 leading-none\">\n                      <span className=\"font-semibold\">Documentation</span>\n                      <span className=\"\">v{selectedVersion}</span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n                >\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <Check className=\"ml-auto\" />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {/* We create a SidebarGroup for each parent. */}\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((item) => (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton asChild isActive={item.isActive}>\n                        <a href={item.url}>{item.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": "components/sidebar-01.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-02.json b/apps/v4/public/r/styles/default/v0-sidebar-02.json
new file mode 100644
index 00000000000..804787539b9
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-02.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-02",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  GalleryVerticalEnd,\n  Search,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <GalleryVerticalEnd className=\"size-4\" />\n                    </div>\n                    <div className=\"flex flex-col gap-0.5 leading-none\">\n                      <span className=\"font-semibold\">Documentation</span>\n                      <span className=\"\">v{selectedVersion}</span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n                >\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <Check className=\"ml-auto\" />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent className=\"gap-0\">\n          {/* We create a collapsible SidebarGroup for each parent. */}\n          {data.navMain.map((item) => (\n            <Collapsible\n              key={item.title}\n              title={item.title}\n              defaultOpen\n              className=\"group/collapsible\"\n            >\n              <SidebarGroup>\n                <SidebarGroupLabel\n                  asChild\n                  className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <CollapsibleTrigger>\n                    {item.title}{\" \"}\n                    <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                  </CollapsibleTrigger>\n                </SidebarGroupLabel>\n                <CollapsibleContent>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      {item.items.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                          <SidebarMenuButton asChild isActive={item.isActive}>\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </CollapsibleContent>\n              </SidebarGroup>\n            </Collapsible>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-03.json b/apps/v4/public/r/styles/default/v0-sidebar-03.json
new file mode 100644
index 00000000000..ee5bd16496f
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-03.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-03",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-04.json b/apps/v4/public/r/styles/default/v0-sidebar-04.json
new file mode 100644
index 00000000000..667d7352121
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-04.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-04",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu className=\"gap-2\">\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-05.json b/apps/v4/public/r/styles/default/v0-sidebar-05.json
new file mode 100644
index 00000000000..94c9be19b61
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-05.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-05",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-05.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item, index) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={index === 1}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger asChild>\n                      <SidebarMenuButton>\n                        {item.title}{\" \"}\n                        <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                        <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                      </SidebarMenuButton>\n                    </CollapsibleTrigger>\n                    {item.items?.length ? (\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((item) => (\n                            <SidebarMenuSubItem key={item.title}>\n                              <SidebarMenuSubButton\n                                asChild\n                                isActive={item.isActive}\n                              >\n                                <a href={item.url}>{item.title}</a>\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-06.json b/apps/v4/public/r/styles/default/v0-sidebar-06.json
new file mode 100644
index 00000000000..81e033e09bb
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-06.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-06",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-06.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd, MoreHorizontal } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title} <MoreHorizontal className=\"ml-auto\" />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent\n                        side=\"bottom\"\n                        align=\"end\"\n                        className=\"min-w-56 rounded-lg\"\n                      >\n                        {item.items.map((item) => (\n                          <DropdownMenuItem asChild key={item.title}>\n                            <a href={item.url}>{item.title}</a>\n                          </DropdownMenuItem>\n                        ))}\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <div className=\"p-1\">\n            <Card className=\"shadow-none\">\n              <form>\n                <CardHeader className=\"p-4 pb-0\">\n                  <CardTitle className=\"text-sm\">\n                    Subscribe to our newsletter\n                  </CardTitle>\n                  <CardDescription>\n                    Opt-in to receive updates and news about the sidebar.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent className=\"grid gap-2.5 p-4\">\n                  <SidebarInput type=\"email\" placeholder=\"Email\" />\n                  <Button\n                    className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                    size=\"sm\"\n                  >\n                    Subscribe\n                  </Button>\n                </CardContent>\n              </form>\n            </Card>\n          </div>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-07.json b/apps/v4/public/r/styles/default/v0-sidebar-07.json
new file mode 100644
index 00000000000..c17bb33d270
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-07.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-07",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport default function Page() {\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <activeTeam.logo className=\"size-4\" />\n                    </div>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                    Teams\n                  </DropdownMenuLabel>\n                  {data.teams.map((team, index) => (\n                    <DropdownMenuItem\n                      key={team.name}\n                      onClick={() => setActiveTeam(team)}\n                      className=\"gap-2 p-2\"\n                    >\n                      <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                        <team.logo className=\"size-4 shrink-0\" />\n                      </div>\n                      {team.name}\n                      <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                    </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                    <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                      <Plus className=\"size-4\" />\n                    </div>\n                    <div className=\"font-medium text-muted-foreground\">\n                      Add team\n                    </div>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger asChild>\n                      <SidebarMenuButton tooltip={item.title}>\n                        {item.icon && <item.icon />}\n                        <span>{item.title}</span>\n                        <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                      </SidebarMenuButton>\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>\n                                <span>{subItem.title}</span>\n                              </a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      <item.icon />\n                      <span>{item.name}</span>\n                    </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuAction showOnHover>\n                        <MoreHorizontal />\n                        <span className=\"sr-only\">More</span>\n                      </SidebarMenuAction>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      className=\"w-48 rounded-lg\"\n                      side=\"bottom\"\n                      align=\"end\"\n                    >\n                      <DropdownMenuItem>\n                        <Folder className=\"text-muted-foreground\" />\n                        <span>View Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Forward className=\"text-muted-foreground\" />\n                        <span>Share Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <Trash2 className=\"text-muted-foreground\" />\n                        <span>Delete Project</span>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </SidebarMenuItem>\n              ))}\n              <SidebarMenuItem>\n                <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar className=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side=\"bottom\"\n                  align=\"end\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                    <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <Sparkles />\n                      Upgrade to Pro\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <BadgeCheck />\n                      Account\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <CreditCard />\n                      Billing\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <Bell />\n                      Notifications\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <LogOut />\n                    Log out\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-08.json b/apps/v4/public/r/styles/default/v0-sidebar-08.json
new file mode 100644
index 00000000000..a786f68a4ba
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-08.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-08",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-08.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Frame,\n  LifeBuoy,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n  Settings2,\n  Share,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton asChild tooltip={item.title}>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <ChevronRight />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      <item.icon />\n                      <span>{item.name}</span>\n                    </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuAction showOnHover>\n                        <MoreHorizontal />\n                        <span className=\"sr-only\">More</span>\n                      </SidebarMenuAction>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      className=\"w-48\"\n                      side=\"bottom\"\n                      align=\"end\"\n                    >\n                      <DropdownMenuItem>\n                        <Folder className=\"text-muted-foreground\" />\n                        <span>View Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Share className=\"text-muted-foreground\" />\n                        <span>Share Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <Trash2 className=\"text-muted-foreground\" />\n                        <span>Delete Project</span>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </SidebarMenuItem>\n              ))}\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar className=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side=\"bottom\"\n                  align=\"end\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                    <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <Sparkles />\n                      Upgrade to Pro\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <BadgeCheck />\n                      Account\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <CreditCard />\n                      Billing\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <Bell />\n                      Notifications\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <LogOut />\n                    Log out\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-09.json b/apps/v4/public/r/styles/default/v0-sidebar-09.json
new file mode 100644
index 00000000000..f491e5bda3a
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-09.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-09",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveX,\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  File,\n  Inbox,\n  LogOut,\n  Send,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\nimport { Switch } from \"@/components/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-10.json b/apps/v4/public/r/styles/default/v0-sidebar-10.json
new file mode 100644
index 00000000000..023503a20d2
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-10.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-10",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowUpRight,\n  AudioWaveform,\n  Bell,\n  Blocks,\n  Calendar,\n  ChevronDown,\n  ChevronRight,\n  Command,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  Home,\n  Inbox,\n  LineChart,\n  Link,\n  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  Star,\n  StarOff,\n  Trash,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n  actions: [\n    [\n      {\n        label: \"Customize Page\",\n        icon: Settings2,\n      },\n      {\n        label: \"Turn into wiki\",\n        icon: FileText,\n      },\n    ],\n    [\n      {\n        label: \"Copy Link\",\n        icon: Link,\n      },\n      {\n        label: \"Duplicate\",\n        icon: Copy,\n      },\n      {\n        label: \"Move to\",\n        icon: CornerUpRight,\n      },\n      {\n        label: \"Move to Trash\",\n        icon: Trash2,\n      },\n    ],\n    [\n      {\n        label: \"Undo\",\n        icon: CornerUpLeft,\n      },\n      {\n        label: \"View analytics\",\n        icon: LineChart,\n      },\n      {\n        label: \"Version History\",\n        icon: GalleryVerticalEnd,\n      },\n      {\n        label: \"Show delete pages\",\n        icon: Trash,\n      },\n      {\n        label: \"Notifications\",\n        icon: Bell,\n      },\n    ],\n    [\n      {\n        label: \"Import\",\n        icon: ArrowUp,\n      },\n      {\n        label: \"Export\",\n        icon: ArrowDown,\n      },\n    ],\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions actions={data.actions} />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction NavActions({\n  actions,\n}: {\n  actions: {\n    label: string\n    icon: LucideIcon\n  }[][]\n}) {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {actions.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n\nfunction NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nfunction NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nfunction NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-11.json b/apps/v4/public/r/styles/default/v0-sidebar-11.json
new file mode 100644
index 00000000000..5802b1f6882
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-11.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-11",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-11.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <File />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <File />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton>\n            <ChevronRight className=\"transition-transform\" />\n            <Folder />\n            {name}\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-12.json b/apps/v4/public/r/styles/default/v0-sidebar-12.json
new file mode 100644
index 00000000000..f8e7fafab62
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-12.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-12",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BadgeCheck,\n  Bell,\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Plus,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n\nfunction DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-13.json b/apps/v4/public/r/styles/default/v0-sidebar-13.json
new file mode 100644
index 00000000000..31b570c8d9b
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-13.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-13",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n\nfunction SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-14.json b/apps/v4/public/r/styles/default/v0-sidebar-14.json
new file mode 100644
index 00000000000..55b512fc163
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-14.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-14",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-14.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-15.json b/apps/v4/public/r/styles/default/v0-sidebar-15.json
new file mode 100644
index 00000000000..e46c60f1da2
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-15.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-15",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpRight,\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  Blocks,\n  CalendarIcon,\n  Check,\n  ChevronDown,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Home,\n  Inbox,\n  Link,\n  LogOut,\n  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  StarOff,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst sidebarLeftData = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: CalendarIcon,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\n// This is sample data.\nconst sidebarRightData = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n\nfunction SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={sidebarLeftData.teams} />\n        <NavMain items={sidebarLeftData.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={sidebarLeftData.favorites} />\n        <NavWorkspaces workspaces={sidebarLeftData.workspaces} />\n        <NavSecondary\n          items={sidebarLeftData.navSecondary}\n          className=\"mt-auto\"\n        />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={sidebarRightData.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={sidebarRightData.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n\nfunction Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n\nfunction DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nfunction NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nfunction NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nfunction NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/default/v0-sidebar-16.json b/apps/v4/public/r/styles/default/v0-sidebar-16.json
new file mode 100644
index 00000000000..649658c0552
--- /dev/null
+++ b/apps/v4/public/r/styles/default/v0-sidebar-16.json
@@ -0,0 +1,23 @@
+{
+  "name": "v0-sidebar-16",
+  "type": "registry:block",
+  "description": "An inset sidebar with site header navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "navigation-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "v0/sidebar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport {\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Frame,\n  LifeBuoy,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n  Settings2,\n  Share,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\nconst HEADER_HEIGHT = \"4rem\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function Page() {\n  const [open, setOpen] = React.useState(true)\n  const { isMobile } = useSidebar()\n\n  return (\n    <div\n      style={\n        {\n          \"--header-height\": HEADER_HEIGHT,\n        } as React.CSSProperties\n      }\n    >\n      <header className=\"sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20\">\n        <div className=\"flex items-center gap-2 w-full\">\n          <Button\n            className=\"hidden md:flex\"\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => setOpen(!open)}\n          >\n            <Sidebar />\n          </Button>\n\n          <div className=\"mx-auto flex items-center gap-2\">\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <Command className=\"size-4\" />\n            </div>\n            <Separator orientation=\"vertical\" className=\"ml-4 h-4\" />\n            <NavigationMenu>\n              <NavigationMenuList>\n                <NavigationMenuItem>\n                  <NavigationMenuTrigger className=\"bg-sidebar\">\n                    Getting started\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                      <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                          <a\n                            className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                            href=\"/\"\n                          >\n                            <Icons.logo className=\"h-6 w-6\" />\n                            <div className=\"mb-2 mt-4 text-lg font-medium\">\n                              shadcn/ui\n                            </div>\n                            <p className=\"text-sm leading-tight text-muted-foreground\">\n                              Beautifully designed components built with Radix\n                              UI and Tailwind CSS.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Introduction\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              Re-usable components built using Radix UI and\n                              Tailwind CSS.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Installation\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              How to install dependencies and structure your\n                              app.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Typography\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              Styles for headings, paragraphs, lists...etc\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                  <NavigationMenuTrigger className=\"bg-sidebar\">\n                    Components\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                      {components.map((component) => (\n                        <li>\n                          <NavigationMenuLink key={component.title} asChild>\n                            <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                              <div className=\"text-sm font-medium leading-none\">\n                                {component.title}\n                              </div>\n                              <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                                {component.description}\n                              </p>\n                            </a>\n                          </NavigationMenuLink>\n                        </li>\n                      ))}\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                  <Link href=\"/docs\" legacyBehavior passHref>\n                    <NavigationMenuLink\n                      className={cn(navigationMenuTriggerStyle(), \"bg-sidebar\")}\n                    >\n                      Documentation\n                    </NavigationMenuLink>\n                  </Link>\n                </NavigationMenuItem>\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n      </header>\n      <SidebarProvider open={open} onOpenChange={setOpen}>\n        <Sidebar\n          className=\"top-[--header-height] pb-[--header-height]\"\n          variant=\"inset\"\n        >\n          <SidebarHeader>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton size=\"lg\" asChild>\n                  <a href=\"#\">\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <Command className=\"size-4\" />\n                    </div>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">Acme Inc</span>\n                      <span className=\"truncate text-xs\">Enterprise</span>\n                    </div>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarHeader>\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupLabel>Platform</SidebarGroupLabel>\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <Collapsible\n                    key={item.title}\n                    asChild\n                    defaultOpen={item.isActive}\n                  >\n                    <SidebarMenuItem>\n                      <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                          <item.icon />\n                          <span>{item.title}</span>\n                        </a>\n                      </SidebarMenuButton>\n                      {item.items?.length ? (\n                        <>\n                          <CollapsibleTrigger asChild>\n                            <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                              <ChevronRight />\n                              <span className=\"sr-only\">Toggle</span>\n                            </SidebarMenuAction>\n                          </CollapsibleTrigger>\n                          <CollapsibleContent>\n                            <SidebarMenuSub>\n                              {item.items?.map((subItem) => (\n                                <SidebarMenuSubItem key={subItem.title}>\n                                  <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                      <span>{subItem.title}</span>\n                                    </a>\n                                  </SidebarMenuSubButton>\n                                </SidebarMenuSubItem>\n                              ))}\n                            </SidebarMenuSub>\n                          </CollapsibleContent>\n                        </>\n                      ) : null}\n                    </SidebarMenuItem>\n                  </Collapsible>\n                ))}\n              </SidebarMenu>\n            </SidebarGroup>\n            <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n              <SidebarGroupLabel>Projects</SidebarGroupLabel>\n              <SidebarMenu>\n                {data.projects.map((item) => (\n                  <SidebarMenuItem key={item.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                          <MoreHorizontal />\n                          <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                      >\n                        <DropdownMenuItem>\n                          <Folder className=\"text-muted-foreground\" />\n                          <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <Share className=\"text-muted-foreground\" />\n                          <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                          <Trash2 className=\"text-muted-foreground\" />\n                          <span>Delete Project</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </SidebarMenuItem>\n                ))}\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <MoreHorizontal />\n                    <span>More</span>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroup>\n            <SidebarGroup className=\"mt-auto\">\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {data.navSecondary.map((item) => (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                          <item.icon />\n                          <span>{item.title}</span>\n                        </a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n          <SidebarFooter>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                    >\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                      <ChevronsUpDown className=\"ml-auto size-4\" />\n                    </SidebarMenuButton>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent\n                    className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                    side={isMobile ? \"bottom\" : \"right\"}\n                    align=\"end\"\n                    sideOffset={4}\n                  >\n                    <DropdownMenuLabel className=\"p-0 font-normal\">\n                      <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                          <AvatarImage\n                            src={data.user.avatar}\n                            alt={data.user.name}\n                          />\n                          <AvatarFallback className=\"rounded-lg\">\n                            CN\n                          </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                          <span className=\"truncate font-semibold\">\n                            {data.user.name}\n                          </span>\n                          <span className=\"truncate text-xs\">\n                            {data.user.email}\n                          </span>\n                        </div>\n                      </div>\n                    </DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                      </DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                      </DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <LogOut />\n                      Log out\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarFooter>\n        </Sidebar>\n\n        <SidebarInset>\n          <header className=\" flex shrink-0 items-center gap-2 border-b py-2\">\n            <div className=\"flex items-center gap-2 px-4 py-2\">\n              <div className=\"flex md:hidden items-center gap-2\">\n                <SidebarTrigger />\n                <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n              </div>\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem className=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Building Your Application\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator className=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div className=\"flex flex-1 flex-col gap-4 p-4\">\n            <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            </div>\n            <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n          </div>\n        </SidebarInset>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:block",
+      "target": "components/sidebar-16.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/index.json b/apps/v4/public/r/styles/index.json
new file mode 100644
index 00000000000..123b4fc2d7b
--- /dev/null
+++ b/apps/v4/public/r/styles/index.json
@@ -0,0 +1,10 @@
+[
+  {
+    "name": "new-york",
+    "label": "New York"
+  },
+  {
+    "name": "default",
+    "label": "Default"
+  }
+]
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/accordion-demo.json b/apps/v4/public/r/styles/new-york-v4/accordion-demo.json
new file mode 100644
index 00000000000..606f1112700
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/accordion-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "accordion"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/accordion-demo.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york-v4/ui/accordion\"\n\nexport default function AccordionDemo() {\n  return (\n    <Accordion\n      type=\"single\"\n      collapsible\n      className=\"w-full\"\n      defaultValue=\"item-1\"\n    >\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Product Information</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            Our flagship product combines cutting-edge technology with sleek\n            design. Built with premium materials, it offers unparalleled\n            performance and reliability.\n          </p>\n          <p>\n            Key features include advanced processing capabilities, and an\n            intuitive user interface designed for both beginners and experts.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Shipping Details</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We offer worldwide shipping through trusted courier partners.\n            Standard delivery takes 3-5 business days, while express shipping\n            ensures delivery within 1-2 business days.\n          </p>\n          <p>\n            All orders are carefully packaged and fully insured. Track your\n            shipment in real-time through our dedicated tracking portal.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Return Policy</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We stand behind our products with a comprehensive 30-day return\n            policy. If you&apos;re not completely satisfied, simply return the\n            item in its original condition.\n          </p>\n          <p>\n            Our hassle-free return process includes free return shipping and\n            full refunds processed within 48 hours of receiving the returned\n            item.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/accordion.json b/apps/v4/public/r/styles/new-york-v4/accordion.json
new file mode 100644
index 00000000000..2a03bbc62aa
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/accordion.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-accordion"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/accordion.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-b last:border-b-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n    >\n      <div className={cn(\"pt-0 pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/alert-demo.json b/apps/v4/public/r/styles/new-york-v4/alert-demo.json
new file mode 100644
index 00000000000..d9103a817d9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/alert-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/alert-demo.tsx",
+      "content": "import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york-v4/ui/alert\"\n\nexport default function AlertDemo() {\n  return (\n    <div className=\"grid w-full max-w-xl items-start gap-4\">\n      <Alert>\n        <CheckCircle2Icon />\n        <AlertTitle>Success! Your changes have been saved</AlertTitle>\n        <AlertDescription>\n          This is an alert with icon, title and description.\n        </AlertDescription>\n      </Alert>\n      <Alert>\n        <PopcornIcon />\n        <AlertTitle>\n          This Alert has a title and an icon. No description.\n        </AlertTitle>\n      </Alert>\n      <Alert variant=\"destructive\">\n        <AlertCircleIcon />\n        <AlertTitle>Unable to process your payment.</AlertTitle>\n        <AlertDescription>\n          <p>Please verify your billing information and try again.</p>\n          <ul className=\"list-inside list-disc text-sm\">\n            <li>Check your card details</li>\n            <li>Ensure sufficient funds</li>\n            <li>Verify billing address</li>\n          </ul>\n        </AlertDescription>\n      </Alert>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/alert-destructive.json b/apps/v4/public/r/styles/new-york-v4/alert-destructive.json
new file mode 100644
index 00000000000..29e0efd7bbd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/alert-destructive.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-destructive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/alert-destructive.tsx",
+      "content": "import { AlertCircleIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york-v4/ui/alert\"\n\nexport default function AlertDestructive() {\n  return (\n    <Alert variant=\"destructive\">\n      <AlertCircleIcon />\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>\n        Your session has expired. Please log in again.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/alert-dialog-demo.json b/apps/v4/public/r/styles/new-york-v4/alert-dialog-demo.json
new file mode 100644
index 00000000000..2dc499b79a4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/alert-dialog-demo.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "alert-dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/alert-dialog-demo.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/new-york-v4/ui/alert-dialog\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/alert-dialog.json b/apps/v4/public/r/styles/new-york-v4/alert-dialog.json
new file mode 100644
index 00000000000..109140366c8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/alert-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-alert-dialog"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/alert-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"text-lg font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return (\n    <AlertDialogPrimitive.Action\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/alert.json b/apps/v4/public/r/styles/new-york-v4/alert.json
new file mode 100644
index 00000000000..270b4381216
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/alert.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/alert.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/aspect-ratio-demo.json b/apps/v4/public/r/styles/new-york-v4/aspect-ratio-demo.json
new file mode 100644
index 00000000000..7ba6042b664
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/aspect-ratio-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/new-york-v4/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale\"\n      />\n    </AspectRatio>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/aspect-ratio.json b/apps/v4/public/r/styles/new-york-v4/aspect-ratio.json
new file mode 100644
index 00000000000..5d7e39d26a0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/aspect-ratio.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/aspect-ratio.tsx",
+      "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nfunction AspectRatio({\n  ...props\n}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {\n  return <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" {...props} />\n}\n\nexport { AspectRatio }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/avatar-demo.json b/apps/v4/public/r/styles/new-york-v4/avatar-demo.json
new file mode 100644
index 00000000000..a0545ee7872
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/avatar-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/avatar-demo.tsx",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\n\nexport default function AvatarDemo() {\n  return (\n    <div className=\"flex flex-row flex-wrap items-center gap-12\">\n      <Avatar>\n        <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n        <AvatarFallback>CN</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"rounded-lg\">\n        <AvatarImage\n          src=\"https://github.com/evilrabbit.png\"\n          alt=\"@evilrabbit\"\n        />\n        <AvatarFallback>ER</AvatarFallback>\n      </Avatar>\n      <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/leerob.png\" alt=\"@leerob\" />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/avatar.json b/apps/v4/public/r/styles/new-york-v4/avatar.json
new file mode 100644
index 00000000000..ec90b1573e7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/avatar.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/avatar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn(\n        \"relative flex size-8 shrink-0 overflow-hidden rounded-full\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\"aspect-square size-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted flex size-full items-center justify-center rounded-full\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/badge-demo.json b/apps/v4/public/r/styles/new-york-v4/badge-demo.json
new file mode 100644
index 00000000000..06bb9603f12
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/badge-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/badge-demo.tsx",
+      "content": "import { AlertCircleIcon, BadgeCheckIcon, CheckIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\n\nexport default function BadgeDemo() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"flex w-full flex-wrap gap-2\">\n        <Badge>Badge</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n      </div>\n      <div className=\"flex w-full flex-wrap gap-2\">\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-500 text-white dark:bg-blue-600\"\n        >\n          <BadgeCheckIcon />\n          Verified\n        </Badge>\n        <Badge className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\">\n          8\n        </Badge>\n        <Badge\n          className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\"\n          variant=\"destructive\"\n        >\n          99\n        </Badge>\n        <Badge\n          className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\"\n          variant=\"outline\"\n        >\n          20+\n        </Badge>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/badge-destructive.json b/apps/v4/public/r/styles/new-york-v4/badge-destructive.json
new file mode 100644
index 00000000000..6f3bcc19bdd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/badge-destructive.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-destructive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/registry/new-york-v4/ui/badge\"\n\nexport default function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/badge-outline.json b/apps/v4/public/r/styles/new-york-v4/badge-outline.json
new file mode 100644
index 00000000000..4b52f9a0d82
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/badge-outline.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-outline",
+  "type": "registry:example",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/badge-outline.tsx",
+      "content": "import { Badge } from \"@/registry/new-york-v4/ui/badge\"\n\nexport default function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/badge-secondary.json b/apps/v4/public/r/styles/new-york-v4/badge-secondary.json
new file mode 100644
index 00000000000..171411f27df
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/badge-secondary.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-secondary",
+  "type": "registry:example",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/registry/new-york-v4/ui/badge\"\n\nexport default function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/badge.json b/apps/v4/public/r/styles/new-york-v4/badge.json
new file mode 100644
index 00000000000..02a7d530efb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/badge.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/badge.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/breadcrumb-demo.json b/apps/v4/public/r/styles/new-york-v4/breadcrumb-demo.json
new file mode 100644
index 00000000000..3e40b2447d9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/breadcrumb-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-demo.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"size-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/breadcrumb-dropdown.json b/apps/v4/public/r/styles/new-york-v4/breadcrumb-dropdown.json
new file mode 100644
index 00000000000..c85616a748e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/breadcrumb-dropdown.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-dropdown",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-dropdown.tsx",
+      "content": "import Link from \"next/link\"\nimport { ChevronDownIcon, SlashIcon } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\">\n              Components\n              <ChevronDownIcon />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/breadcrumb-ellipsis.json b/apps/v4/public/r/styles/new-york-v4/breadcrumb-ellipsis.json
new file mode 100644
index 00000000000..1ae3f8b0744
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/breadcrumb-ellipsis.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-ellipsis",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-ellipsis.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbEllipsis />\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/breadcrumb-link.json b/apps/v4/public/r/styles/new-york-v4/breadcrumb-link.json
new file mode 100644
index 00000000000..86e07ee4b71
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/breadcrumb-link.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-link",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-link.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/breadcrumb-responsive.json b/apps/v4/public/r/styles/new-york-v4/breadcrumb-responsive.json
new file mode 100644
index 00000000000..e4ad7d06ce9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/breadcrumb-responsive.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-responsive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nconst items = [\n  { href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Documentation\" },\n  { href: \"#\", label: \"Building Your Application\" },\n  { href: \"#\", label: \"Data Fetching\" },\n  { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href={items[0].href ?? \"/\"}>{items[0].label}</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        {items.length > ITEMS_TO_DISPLAY ? (\n          <>\n            <BreadcrumbItem>\n              {isDesktop ? (\n                <DropdownMenu open={open} onOpenChange={setOpen}>\n                  <DropdownMenuTrigger\n                    className=\"flex items-center gap-1\"\n                    aria-label=\"Toggle menu\"\n                  >\n                    <BreadcrumbEllipsis className=\"size-4\" />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                    {items.slice(1, -2).map((item, index) => (\n                      <DropdownMenuItem key={index}>\n                        <Link href={item.href ? item.href : \"#\"}>\n                          {item.label}\n                        </Link>\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              ) : (\n                <Drawer open={open} onOpenChange={setOpen}>\n                  <DrawerTrigger aria-label=\"Toggle Menu\">\n                    <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                  </DrawerTrigger>\n                  <DrawerContent>\n                    <DrawerHeader className=\"text-left\">\n                      <DrawerTitle>Navigate to</DrawerTitle>\n                      <DrawerDescription>\n                        Select a page to navigate to.\n                      </DrawerDescription>\n                    </DrawerHeader>\n                    <div className=\"grid gap-1 px-4\">\n                      {items.slice(1, -2).map((item, index) => (\n                        <Link\n                          key={index}\n                          href={item.href ? item.href : \"#\"}\n                          className=\"py-1 text-sm\"\n                        >\n                          {item.label}\n                        </Link>\n                      ))}\n                    </div>\n                    <DrawerFooter className=\"pt-4\">\n                      <DrawerClose asChild>\n                        <Button variant=\"outline\">Close</Button>\n                      </DrawerClose>\n                    </DrawerFooter>\n                  </DrawerContent>\n                </Drawer>\n              )}\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n          </>\n        ) : null}\n        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n          <BreadcrumbItem key={index}>\n            {item.href ? (\n              <>\n                <BreadcrumbLink\n                  asChild\n                  className=\"max-w-20 truncate md:max-w-none\"\n                >\n                  <Link href={item.href}>{item.label}</Link>\n                </BreadcrumbLink>\n                <BreadcrumbSeparator />\n              </>\n            ) : (\n              <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                {item.label}\n              </BreadcrumbPage>\n            )}\n          </BreadcrumbItem>\n        ))}\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/breadcrumb-separator.json b/apps/v4/public/r/styles/new-york-v4/breadcrumb-separator.json
new file mode 100644
index 00000000000..b30556e7b81
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/breadcrumb-separator.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-separator",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-separator.tsx",
+      "content": "import Link from \"next/link\"\nimport { SlashIcon } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/breadcrumb.json b/apps/v4/public/r/styles/new-york-v4/breadcrumb.json
new file mode 100644
index 00000000000..9558777aa91
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/breadcrumb.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/breadcrumb.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/button-as-child.json b/apps/v4/public/r/styles/new-york-v4/button-as-child.json
new file mode 100644
index 00000000000..8ca59f2dfde
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/button-as-child.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-as-child",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-as-child.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonAsChild() {\n  return (\n    <Button asChild>\n      <Link href=\"/login\">Login</Link>\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/button-demo.json b/apps/v4/public/r/styles/new-york-v4/button-demo.json
new file mode 100644
index 00000000000..758e4e81840
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/button-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonDemo() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2 md:flex-row\">\n      <Button>Button</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/button-destructive.json b/apps/v4/public/r/styles/new-york-v4/button-destructive.json
new file mode 100644
index 00000000000..c73853664e5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/button-destructive.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-destructive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-destructive.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/button-ghost.json b/apps/v4/public/r/styles/new-york-v4/button-ghost.json
new file mode 100644
index 00000000000..ca3060209a7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/button-ghost.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-ghost",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-ghost.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/button-icon.json b/apps/v4/public/r/styles/new-york-v4/button-icon.json
new file mode 100644
index 00000000000..3d2f7cead36
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/button-icon.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-icon",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-icon.tsx",
+      "content": "import { ChevronRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"secondary\" size=\"icon\" className=\"size-8\">\n      <ChevronRightIcon />\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/button-link.json b/apps/v4/public/r/styles/new-york-v4/button-link.json
new file mode 100644
index 00000000000..3bf41507bf8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/button-link.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-link",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-link.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/button-loading.json b/apps/v4/public/r/styles/new-york-v4/button-loading.json
new file mode 100644
index 00000000000..f4b07f1bbe4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/button-loading.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-loading",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-loading.tsx",
+      "content": "import { Loader2Icon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button size=\"sm\" disabled>\n      <Loader2Icon className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/button-outline.json b/apps/v4/public/r/styles/new-york-v4/button-outline.json
new file mode 100644
index 00000000000..aa16b60ea3b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/button-outline.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-outline",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-outline.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/button-secondary.json b/apps/v4/public/r/styles/new-york-v4/button-secondary.json
new file mode 100644
index 00000000000..b97902f2d09
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/button-secondary.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-secondary",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-secondary.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/button-with-icon.json b/apps/v4/public/r/styles/new-york-v4/button-with-icon.json
new file mode 100644
index 00000000000..8e69cf504cb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/button-with-icon.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-with-icon",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-with-icon.tsx",
+      "content": "import { IconGitBranch } from \"@tabler/icons-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button variant=\"outline\" size=\"sm\">\n      <IconGitBranch /> New Branch\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/button.json b/apps/v4/public/r/styles/new-york-v4/button.json
new file mode 100644
index 00000000000..b50fc663252
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/button.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/button.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-01.json b/apps/v4/public/r/styles/new-york-v4/calendar-01.json
new file mode 100644
index 00000000000..ae26b270f13
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-01.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-02.json b/apps/v4/public/r/styles/new-york-v4/calendar-02.json
new file mode 100644
index 00000000000..1de8d714eda
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-02.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-03.json b/apps/v4/public/r/styles/new-york-v4/calendar-03.json
new file mode 100644
index 00000000000..6777fdaf508
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-03.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-04.json b/apps/v4/public/r/styles/new-york-v4/calendar-04.json
new file mode 100644
index 00000000000..ae12a614610
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-04.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-05.json b/apps/v4/public/r/styles/new-york-v4/calendar-05.json
new file mode 100644
index 00000000000..d64891b0f71
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-05.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-06.json b/apps/v4/public/r/styles/new-york-v4/calendar-06.json
new file mode 100644
index 00000000000..0826945ec38
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-06.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-07.json b/apps/v4/public/r/styles/new-york-v4/calendar-07.json
new file mode 100644
index 00000000000..0d7bfb1a8cf
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-07.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-08.json b/apps/v4/public/r/styles/new-york-v4/calendar-08.json
new file mode 100644
index 00000000000..d5088b71f85
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-08.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-09.json b/apps/v4/public/r/styles/new-york-v4/calendar-09.json
new file mode 100644
index 00000000000..fe6a2830f9c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-09.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-10.json b/apps/v4/public/r/styles/new-york-v4/calendar-10.json
new file mode 100644
index 00000000000..314cca76a01
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-10.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <CardAction>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => {\n              setMonth(new Date())\n              setDate(new Date())\n            }}\n          >\n            Today\n          </Button>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-11.json b/apps/v4/public/r/styles/new-york-v4/calendar-11.json
new file mode 100644
index 00000000000..29a4e325075
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-11.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-12.json b/apps/v4/public/r/styles/new-york-v4/calendar-12.json
new file mode 100644
index 00000000000..11ce1eb5e2e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-12.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <CardAction>\n          <Select\n            value={locale}\n            onValueChange={(value) =>\n              setLocale(value as keyof typeof localizedStrings)\n            }\n          >\n            <SelectTrigger className=\"w-[100px]\">\n              <SelectValue placeholder=\"Language\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"es\">Español</SelectItem>\n              <SelectItem value=\"en\">English</SelectItem>\n            </SelectContent>\n          </Select>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-13.json b/apps/v4/public/r/styles/new-york-v4/calendar-13.json
new file mode 100644
index 00000000000..121ef9abb13
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-13.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger\n            id=\"dropdown\"\n            size=\"sm\"\n            className=\"bg-background w-full\"\n          >\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-14.json b/apps/v4/public/r/styles/new-york-v4/calendar-14.json
new file mode 100644
index 00000000000..2508f75d753
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-14.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-15.json b/apps/v4/public/r/styles/new-york-v4/calendar-15.json
new file mode 100644
index 00000000000..31c7c60a318
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-15.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-16.json b/apps/v4/public/r/styles/new-york-v4/calendar-16.json
new file mode 100644
index 00000000000..1f660e58576
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-16.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 !pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-17.json b/apps/v4/public/r/styles/new-york-v4/calendar-17.json
new file mode 100644
index 00000000000..4547a55a954
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-17.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:--spacing(10.5)]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex gap-2 border-t px-4 !pt-4 *:[div]:w-full\">\n        <div>\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div>\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-18.json b/apps/v4/public/r/styles/new-york-v4/calendar-18.json
new file mode 100644
index 00000000000..04c58b7ee53
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-18.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-19.json b/apps/v4/public/r/styles/new-york-v4/calendar-19.json
new file mode 100644
index 00000000000..16eb47d1876
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-19.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:--spacing(9.5)]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 !pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-20.json b/apps/v4/public/r/styles/new-york-v4/calendar-20.json
new file mode 100644
index 00000000000..f5c631564ea
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-20.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute.toString().padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-t-0 md:border-l\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t px-6 !py-5 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-21.json b/apps/v4/public/r/styles/new-york-v4/calendar-21.json
new file mode 100644
index 00000000000..8773d411e6a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-21.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:--spacing(11)] md:[--cell-size:--spacing(13)]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-22.json b/apps/v4/public/r/styles/new-york-v4/calendar-22.json
new file mode 100644
index 00000000000..ca4aeed570e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-22.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-23.json b/apps/v4/public/r/styles/new-york-v4/calendar-23.json
new file mode 100644
index 00000000000..838068b6c23
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-23.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-24.json b/apps/v4/public/r/styles/new-york-v4/calendar-24.json
new file mode 100644
index 00000000000..e637869404f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-24.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date-picker\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time-picker\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time-picker\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-25.json b/apps/v4/public/r/styles/new-york-v4/calendar-25.json
new file mode 100644
index 00000000000..18e56c8c288
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-25.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-26.json b/apps/v4/public/r/styles/new-york-v4/calendar-26.json
new file mode 100644
index 00000000000..230a4460a3b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-26.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-27.json b/apps/v4/public/r/styles/new-york-v4/calendar-27.json
new file mode 100644
index 00000000000..0d622255118
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-27.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--color-primary)\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"flex flex-col border-b @md/card:grid\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <CardAction className=\"mt-2 @md/card:mt-0\">\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <CalendarIcon />\n                {range?.from && range?.to\n                  ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                  : \"June 2025\"}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n              <Calendar\n                className=\"w-full\"\n                mode=\"range\"\n                defaultMonth={range?.from}\n                selected={range}\n                onSelect={setRange}\n                disableNavigation\n                startMonth={range?.from}\n                fixedWeeks\n                showOutsideDays\n                disabled={{\n                  after: new Date(2025, 5, 31),\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </CardAction>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-28.json b/apps/v4/public/r/styles/new-york-v4/calendar-28.json
new file mode 100644
index 00000000000..ae149ae0c6f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-28.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-29.json b/apps/v4/public/r/styles/new-york-v4/calendar-29.json
new file mode 100644
index 00000000000..df3d5743609
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-29.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-30.json b/apps/v4/public/r/styles/new-york-v4/calendar-30.json
new file mode 100644
index 00000000000..1aaaac6a11b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-30.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-31.json b/apps/v4/public/r/styles/new-york-v4/calendar-31.json
new file mode 100644
index 00000000000..03e2f971d67
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-31.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 !pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"size-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-32.json b/apps/v4/public/r/styles/new-york-v4/calendar-32.json
new file mode 100644
index 00000000000..f231548786b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-32.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-demo.json b/apps/v4/public/r/styles/new-york-v4/calendar-demo.json
new file mode 100644
index 00000000000..6e51dd80837
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow-sm\"\n      captionLayout=\"dropdown\"\n    />\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-form.json b/apps/v4/public/r/styles/new-york-v4/calendar-form.json
new file mode 100644
index 00000000000..62fabe3d69e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/calendar-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    captionLayout=\"dropdown\"\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-hijri.json b/apps/v4/public/r/styles/new-york-v4/calendar-hijri.json
new file mode 100644
index 00000000000..d317bd4cab4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-hijri.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-hijri",
+  "type": "registry:example",
+  "description": "A Persian calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/calendar-hijri.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, getDefaultClassNames } from \"react-day-picker\"\nimport { DayPicker } from \"react-day-picker/persian\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function CalendarHijri() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n\n// ----------------------------------------------------------------------------\n// The code below is for this example only.\n// For your own calendar, you would edit the calendar.tsx component directly.\n// ----------------------------------------------------------------------------\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar.json b/apps/v4/public/r/styles/new-york-v4/calendar.json
new file mode 100644
index 00000000000..267198d6231
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/calendar.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar",
+  "type": "registry:ui",
+  "dependencies": [
+    "react-day-picker@latest",
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/calendar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/card-demo.json b/apps/v4/public/r/styles/new-york-v4/card-demo.json
new file mode 100644
index 00000000000..5c4bb4042be
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/card-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "card",
+    "button",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/card-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function CardDemo() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Login to your account</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account\n        </CardDescription>\n        <CardAction>\n          <Button variant=\"link\">Sign Up</Button>\n        </CardAction>\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          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2\">\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      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/card-with-form.json b/apps/v4/public/r/styles/new-york-v4/card-with-form.json
new file mode 100644
index 00000000000..818ad3cdc2b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/card-with-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-with-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/card-with-form.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function CardWithForm() {\n  return (\n    <Card className=\"w-[350px]\">\n      <CardHeader>\n        <CardTitle>Create project</CardTitle>\n        <CardDescription>Deploy your new project in one-click.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <div className=\"grid w-full items-center gap-6\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" placeholder=\"Name of your project\" />\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"framework\">Framework</Label>\n              <Select>\n                <SelectTrigger id=\"framework\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select\" />\n                </SelectTrigger>\n                <SelectContent position=\"popper\">\n                  <SelectItem value=\"next\">Next.js</SelectItem>\n                  <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                  <SelectItem value=\"astro\">Astro</SelectItem>\n                  <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex justify-between\">\n        <Button variant=\"outline\">Cancel</Button>\n        <Button>Deploy</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/card.json b/apps/v4/public/r/styles/new-york-v4/card.json
new file mode 100644
index 00000000000..f9ae12ebd1c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/card.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/card.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/carousel-api.json b/apps/v4/public/r/styles/new-york-v4/carousel-api.json
new file mode 100644
index 00000000000..b6eb062e4e7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/carousel-api.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-api",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-api.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) {\n      return\n    }\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap() + 1)\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1)\n    })\n  }, [api])\n\n  return (\n    <div className=\"mx-auto max-w-xs\">\n      <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious />\n        <CarouselNext />\n      </Carousel>\n      <div className=\"text-muted-foreground py-2 text-center text-sm\">\n        Slide {current} of {count}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/carousel-demo.json b/apps/v4/public/r/styles/new-york-v4/carousel-demo.json
new file mode 100644
index 00000000000..8109d5bbd96
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/carousel-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/carousel-orientation.json b/apps/v4/public/r/styles/new-york-v4/carousel-orientation.json
new file mode 100644
index 00000000000..83ebb7d05e5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/carousel-orientation.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-orientation",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselOrientation() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      orientation=\"vertical\"\n      className=\"w-full max-w-xs\"\n    >\n      <CarouselContent className=\"-mt-1 h-[200px]\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/carousel-plugin.json b/apps/v4/public/r/styles/new-york-v4/carousel-plugin.json
new file mode 100644
index 00000000000..3640307af7e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/carousel-plugin.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-plugin",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-plugin.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselPlugin() {\n  const plugin = React.useRef(\n    Autoplay({ delay: 2000, stopOnInteraction: true })\n  )\n\n  return (\n    <Carousel\n      plugins={[plugin.current]}\n      className=\"w-full max-w-xs\"\n      onMouseEnter={plugin.current.stop}\n      onMouseLeave={plugin.current.reset}\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/carousel-size.json b/apps/v4/public/r/styles/new-york-v4/carousel-size.json
new file mode 100644
index 00000000000..57da366e1d8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/carousel-size.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-size",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-size.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselSize() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      className=\"w-full max-w-sm\"\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/carousel-spacing.json b/apps/v4/public/r/styles/new-york-v4/carousel-spacing.json
new file mode 100644
index 00000000000..2ca7c7e42e5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/carousel-spacing.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-spacing",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-spacing.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselSpacing() {\n  return (\n    <Carousel className=\"w-full max-w-sm\">\n      <CarouselContent className=\"-ml-1\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/carousel.json b/apps/v4/public/r/styles/new-york-v4/carousel.json
new file mode 100644
index 00000000000..9da591edb44
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/carousel.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel",
+  "type": "registry:ui",
+  "dependencies": [
+    "embla-carousel-react"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/carousel.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-axes.json b/apps/v4/public/r/styles/new-york-v4/chart-area-axes.json
new file mode 100644
index 00000000000..46b24f76075
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-axes.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-axes",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-axes.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with axes\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaAxes() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Axes</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -20,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={3}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-default.json b/apps/v4/public/r/styles/new-york-v4/chart-area-default.json
new file mode 100644
index 00000000000..3fd13fa8f53
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-default.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-gradient.json b/apps/v4/public/r/styles/new-york-v4/chart-area-gradient.json
new file mode 100644
index 00000000000..a883b39b66d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-gradient.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-gradient",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-gradient.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with gradient fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaGradient() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Gradient</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-icons.json b/apps/v4/public/r/styles/new-york-v4/chart-area-icons.json
new file mode 100644
index 00000000000..ce943df1f5c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-icons.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-icons",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-icons.tsx",
+      "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: TrendingDown,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n    icon: TrendingUp,\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaIcons() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-interactive.json b/apps/v4/public/r/styles/new-york-v4/chart-area-interactive.json
new file mode 100644
index 00000000000..b72864800ee
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-interactive.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-interactive",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"pt-0\">\n      <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n        <div className=\"grid flex-1 gap-1\">\n          <CardTitle>Area Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <Select value={timeRange} onValueChange={setTimeRange}>\n          <SelectTrigger\n            className=\"hidden w-[160px] rounded-lg sm:ml-auto sm:flex\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Last 3 months\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90d\" className=\"rounded-lg\">\n              Last 3 months\n            </SelectItem>\n            <SelectItem value=\"30d\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7d\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-legend.json b/apps/v4/public/r/styles/new-york-v4/chart-area-legend.json
new file mode 100644
index 00000000000..93298a47ba3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-legend.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-legend",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaLegend() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-linear.json b/apps/v4/public/r/styles/new-york-v4/chart-area-linear.json
new file mode 100644
index 00000000000..ae1ab901eb7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-linear.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-linear",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaLinear() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Linear</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"linear\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-stacked-expand.json b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked-expand.json
new file mode 100644
index 00000000000..0881f0bcd6c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked-expand.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-stacked-expand",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-stacked-expand.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart with expand stacking\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n  { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n  { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n  { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n  { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n  { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-3)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStackedExpand() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n              top: 12,\n            }}\n            stackOffset=\"expand\"\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"other\"\n              type=\"natural\"\n              fill=\"var(--color-other)\"\n              fillOpacity={0.1}\n              stroke=\"var(--color-other)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked.json
new file mode 100644
index 00000000000..958bb0fcba2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-stacked",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStacked() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-step.json b/apps/v4/public/r/styles/new-york-v4/chart-area-step.json
new file mode 100644
index 00000000000..ec978d8eeac
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-step.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-step",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-step.tsx",
+      "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A step area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: Activity,\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStep() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Step</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"step\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json
new file mode 100644
index 00000000000..e0816aec316
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-active",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarActive() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              activeIndex={2}\n              activeBar={({ ...props }) => {\n                return (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                )\n              }}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-default.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-default.json
new file mode 100644
index 00000000000..a7ef669ffed
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-default.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-axis.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-axis.json
new file mode 100644
index 00000000000..1dcd26b1078
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-axis.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-axis",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-bar-demo-axis.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york-v4/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-grid.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-grid.json
new file mode 100644
index 00000000000..2715c8aec50
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-grid.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-grid",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-bar-demo-grid.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york-v4/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-legend.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-legend.json
new file mode 100644
index 00000000000..3688a3f9cde
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-legend.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-legend",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-bar-demo-legend.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <ChartLegend content={<ChartLegendContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-tooltip.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-tooltip.json
new file mode 100644
index 00000000000..d5db6470d3e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-demo-tooltip.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-tooltip",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-bar-demo-tooltip.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-demo.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-demo.json
new file mode 100644
index 00000000000..472136ae609
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-demo.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-bar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york-v4/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-horizontal.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-horizontal.json
new file mode 100644
index 00000000000..27a5bfb0aa1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-horizontal.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-horizontal",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-horizontal.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A horizontal bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarHorizontal() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Horizontal</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: -20,\n            }}\n          >\n            <XAxis type=\"number\" dataKey=\"desktop\" hide />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-interactive.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-interactive.json
new file mode 100644
index 00000000000..953a1bbade4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-interactive.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-interactive",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An interactive bar chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-2)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarInteractive() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card className=\"py-0\">\n      <CardHeader className=\"flex flex-col items-stretch border-b !p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0\">\n          <CardTitle>Bar Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-muted-foreground text-xs\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg leading-none font-bold sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-label-custom.json
new file mode 100644
index 00000000000..e2a37f557ec
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-label-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-label-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-2)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n  label: {\n    color: \"var(--background)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarLabelCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              right: 16,\n            }}\n          >\n            <CartesianGrid horizontal={false} />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n              hide\n            />\n            <XAxis dataKey=\"desktop\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Bar\n              dataKey=\"desktop\"\n              layout=\"vertical\"\n              fill=\"var(--color-desktop)\"\n              radius={4}\n            >\n              <LabelList\n                dataKey=\"month\"\n                position=\"insideLeft\"\n                offset={8}\n                className=\"fill-(--color-label)\"\n                fontSize={12}\n              />\n              <LabelList\n                dataKey=\"desktop\"\n                position=\"right\"\n                offset={8}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-label.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-label.json
new file mode 100644
index 00000000000..f6c790f94b9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-label.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-label",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarLabel() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-mixed.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-mixed.json
new file mode 100644
index 00000000000..f2dfa0e46de
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-mixed.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-mixed",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-mixed.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A mixed bar chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarMixed() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Mixed</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: 0,\n            }}\n          >\n            <YAxis\n              dataKey=\"browser\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <XAxis dataKey=\"visitors\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-multiple.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-multiple.json
new file mode 100644
index 00000000000..f0774b35e5c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-multiple.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-multiple",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarMultiple() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dashed\" />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n            <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-negative.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-negative.json
new file mode 100644
index 00000000000..ca76ad01ef5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-negative.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-negative",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-negative.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with negative values\"\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 205 },\n  { month: \"March\", visitors: -207 },\n  { month: \"April\", visitors: 173 },\n  { month: \"May\", visitors: -209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarNegative() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Negative</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel hideIndicator />}\n            />\n            <Bar dataKey=\"visitors\">\n              <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n              {chartData.map((item) => (\n                <Cell\n                  key={item.month}\n                  fill={item.visitors > 0 ? \"var(--chart-1)\" : \"var(--chart-2)\"}\n                />\n              ))}\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-stacked.json
new file mode 100644
index 00000000000..e05119bf803
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-stacked.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-stacked",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarStacked() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            <Bar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              fill=\"var(--color-desktop)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"mobile\"\n              stackId=\"a\"\n              fill=\"var(--color-mobile)\"\n              radius={[4, 4, 0, 0]}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-default.json b/apps/v4/public/r/styles/new-york-v4/chart-line-default.json
new file mode 100644
index 00000000000..61851b481a7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-default.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-dots-colors.json b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-colors.json
new file mode 100644
index 00000000000..1079c6f20e7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-colors.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots-colors",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-dots-colors.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots and colors\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-2)\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDotsColors() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots Colors</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={({ payload, ...props }) => {\n                return (\n                  <Dot\n                    key={payload.browser}\n                    r={5}\n                    cx={props.cx}\n                    cy={props.cy}\n                    fill={payload.fill}\n                    stroke={payload.fill}\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-dots-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-custom.json
new file mode 100644
index 00000000000..c4344b35351
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-dots-custom.tsx",
+      "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with custom dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDotsCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={({ cx, cy, payload }) => {\n                const r = 24\n                return (\n                  <GitCommitVertical\n                    key={payload.month}\n                    x={cx - r / 2}\n                    y={cy - r / 2}\n                    width={r}\n                    height={r}\n                    fill=\"hsl(var(--background))\"\n                    stroke=\"var(--color-desktop)\"\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-dots.json b/apps/v4/public/r/styles/new-york-v4/chart-line-dots.json
new file mode 100644
index 00000000000..5a394829c62
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-dots.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDots() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-interactive.json b/apps/v4/public/r/styles/new-york-v4/chart-line-interactive.json
new file mode 100644
index 00000000000..05047d69800
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-interactive.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-interactive",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An interactive line chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineInteractive() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card className=\"py-4 sm:py-0\">\n      <CardHeader className=\"flex flex-col items-stretch border-b !p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 pb-3 sm:pb-0\">\n          <CardTitle>Line Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-muted-foreground text-xs\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg leading-none font-bold sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Line\n              dataKey={activeChart}\n              type=\"monotone\"\n              stroke={`var(--color-${activeChart})`}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-line-label-custom.json
new file mode 100644
index 00000000000..ce4b2866baa
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-label-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-label-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-2)\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLabelCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-visitors)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n                dataKey=\"browser\"\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-label.json b/apps/v4/public/r/styles/new-york-v4/chart-line-label.json
new file mode 100644
index 00000000000..c9c682b1bb6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-label.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-label",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLabel() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-linear.json b/apps/v4/public/r/styles/new-york-v4/chart-line-linear.json
new file mode 100644
index 00000000000..53fca61781f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-linear.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-linear",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLinear() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Linear</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"linear\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-multiple.json b/apps/v4/public/r/styles/new-york-v4/chart-line-multiple.json
new file mode 100644
index 00000000000..ac4fd35301d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-multiple.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-multiple",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineMultiple() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Line\n              dataKey=\"desktop\"\n              type=\"monotone\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n            <Line\n              dataKey=\"mobile\"\n              type=\"monotone\"\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-step.json b/apps/v4/public/r/styles/new-york-v4/chart-line-step.json
new file mode 100644
index 00000000000..643baed9f75
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-step.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-step",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-step.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with step\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineStep() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Step</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"step\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json
new file mode 100644
index 00000000000..ec45b95d573
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut-active",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-donut-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonutActive() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={0}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <Sector {...props} outerRadius={outerRadius + 10} />\n              )}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-text.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-text.json
new file mode 100644
index 00000000000..572d6b41147
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-text.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut-text",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-donut-text.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with text\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonutText() {\n  const totalVisitors = React.useMemo(() => {\n    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut with Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut.json
new file mode 100644
index 00000000000..ac6ae021db3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-donut.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonut() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-interactive.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-interactive.json
new file mode 100644
index 00000000000..62038382f89
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-interactive.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-interactive",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport const description = \"An interactive pie chart\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"var(--chart-1)\",\n  },\n  february: {\n    label: \"February\",\n    color: \"var(--chart-2)\",\n  },\n  march: {\n    label: \"March\",\n    color: \"var(--chart-3)\",\n  },\n  april: {\n    label: \"April\",\n    color: \"var(--chart-4)\",\n  },\n  may: {\n    label: \"May\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieInteractive() {\n  const id = \"pie-interactive\"\n  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n  const activeIndex = React.useMemo(\n    () => desktopData.findIndex((item) => item.month === activeMonth),\n    [activeMonth]\n  )\n  const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n  return (\n    <Card data-chart={id} className=\"flex flex-col\">\n      <ChartStyle id={id} config={chartConfig} />\n      <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n        <div className=\"grid gap-1\">\n          <CardTitle>Pie Chart - Interactive</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </div>\n        <Select value={activeMonth} onValueChange={setActiveMonth}>\n          <SelectTrigger\n            className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\" className=\"rounded-xl\">\n            {months.map((key) => {\n              const config = chartConfig[key as keyof typeof chartConfig]\n\n              if (!config) {\n                return null\n              }\n\n              return (\n                <SelectItem\n                  key={key}\n                  value={key}\n                  className=\"rounded-lg [&_span]:flex\"\n                >\n                  <div className=\"flex items-center gap-2 text-xs\">\n                    <span\n                      className=\"flex h-3 w-3 shrink-0 rounded-xs\"\n                      style={{\n                        backgroundColor: `var(--color-${key})`,\n                      }}\n                    />\n                    {config?.label}\n                  </div>\n                </SelectItem>\n              )\n            })}\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 justify-center pb-0\">\n        <ChartContainer\n          id={id}\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[300px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={desktopData}\n              dataKey=\"desktop\"\n              nameKey=\"month\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={activeIndex}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <g>\n                  <Sector {...props} outerRadius={outerRadius + 10} />\n                  <Sector\n                    {...props}\n                    outerRadius={outerRadius + 25}\n                    innerRadius={outerRadius + 12}\n                  />\n                </g>\n              )}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {desktopData[activeIndex].desktop.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json
new file mode 100644
index 00000000000..b1dc9a37de2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabelCustom() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] px-0\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {payload.visitors}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-list.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-list.json
new file mode 100644
index 00000000000..72e27f1c4fc
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-list.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label-list",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-label-list.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label list\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabelList() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label List</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"[&_.recharts-text]:fill-background mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\">\n              <LabelList\n                dataKey=\"browser\"\n                className=\"fill-background\"\n                stroke=\"none\"\n                fontSize={12}\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-label.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-label.json
new file mode 100644
index 00000000000..f34aa4fd95e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-label.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabel() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0\"\n        >\n          <PieChart>\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-legend.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-legend.json
new file mode 100644
index 00000000000..5302bb37ac6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-legend.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-legend",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-legend.tsx",
+      "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a legend\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLegend() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[300px]\"\n        >\n          <PieChart>\n            <Pie data={chartData} dataKey=\"visitors\" />\n            <ChartLegend\n              content={<ChartLegendContent nameKey=\"browser\" />}\n              className=\"-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-separator-none.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-separator-none.json
new file mode 100644
index 00000000000..3792d9c3b98
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-separator-none.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-separator-none",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-separator-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with no separator\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieSeparatorNone() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Separator None</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              stroke=\"0\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-simple.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-simple.json
new file mode 100644
index 00000000000..16d6012d124
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-simple.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-simple",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple pie chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieSimple() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-stacked.json
new file mode 100644
index 00000000000..f65e0a3be6c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-stacked.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-stacked",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-stacked.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with stacked sections\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n  { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n  { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n  { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n  { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n  { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"var(--chart-1)\",\n  },\n  february: {\n    label: \"February\",\n    color: \"var(--chart-2)\",\n  },\n  march: {\n    label: \"March\",\n    color: \"var(--chart-3)\",\n  },\n  april: {\n    label: \"April\",\n    color: \"var(--chart-4)\",\n  },\n  may: {\n    label: \"May\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieStacked() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelKey=\"visitors\"\n                  nameKey=\"month\"\n                  indicator=\"line\"\n                  labelFormatter={(_, payload) => {\n                    return chartConfig[\n                      payload?.[0].dataKey as keyof typeof chartConfig\n                    ].label\n                  }}\n                />\n              }\n            />\n            <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n            <Pie\n              data={mobileData}\n              dataKey=\"mobile\"\n              innerRadius={70}\n              outerRadius={90}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-default.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-default.json
new file mode 100644
index 00000000000..8df06687734
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-default.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarDefault() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-dots.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-dots.json
new file mode 100644
index 00000000000..a38aaa0237d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-dots.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-dots",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarDots() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Dots</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json
new file mode 100644
index 00000000000..95a9fb43d7c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-fill",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleFill() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarGrid\n              className=\"fill-(--color-desktop) opacity-20\"\n              gridType=\"circle\"\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json
new file mode 100644
index 00000000000..50de824ad67
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-no-lines",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleNoLines() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" radialLines={false} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle.json
new file mode 100644
index 00000000000..ed57385fe0a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-circle.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircle() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-custom.json
new file mode 100644
index 00000000000..3c12f9fbee7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCustom() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Custom</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-fill.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-fill.json
new file mode 100644
index 00000000000..2a71e2c79fe
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-fill.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-fill",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid filled\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridFill() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid className=\"fill-(--color-desktop) opacity-20\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-none.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-none.json
new file mode 100644
index 00000000000..b2d43da2c86
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-none.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-none",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with no grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridNone() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid None</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-icons.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-icons.json
new file mode 100644
index 00000000000..e4d189c18d4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-icons.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-icons",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-icons.tsx",
+      "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: ArrowDownFromLine,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n    icon: ArrowUpFromLine,\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarIcons() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-label-custom.json
new file mode 100644
index 00000000000..289b36bda0e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-label-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-label-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLabelCustom() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Custom Label</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: 10,\n              right: 10,\n              bottom: 10,\n              left: 10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis\n              dataKey=\"month\"\n              tick={({ x, y, textAnchor, value, index, ...props }) => {\n                const data = chartData[index]\n\n                return (\n                  <text\n                    x={x}\n                    y={index === 0 ? y - 10 : y}\n                    textAnchor={textAnchor}\n                    fontSize={13}\n                    fontWeight={500}\n                    {...props}\n                  >\n                    <tspan>{data.desktop}</tspan>\n                    <tspan className=\"fill-muted-foreground\">/</tspan>\n                    <tspan>{data.mobile}</tspan>\n                    <tspan\n                      x={x}\n                      dy={\"1rem\"}\n                      fontSize={12}\n                      className=\"fill-muted-foreground\"\n                    >\n                      {data.month}\n                    </tspan>\n                  </text>\n                )\n              }}\n            />\n\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-legend.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-legend.json
new file mode 100644
index 00000000000..fd34d06186a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-legend.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-legend",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLegend() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-lines-only.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-lines-only.json
new file mode 100644
index 00000000000..93ea203a121
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-lines-only.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-lines-only",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-lines-only.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with lines only\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 160 },\n  { month: \"February\", desktop: 185, mobile: 170 },\n  { month: \"March\", desktop: 207, mobile: 180 },\n  { month: \"April\", desktop: 173, mobile: 160 },\n  { month: \"May\", desktop: 160, mobile: 190 },\n  { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLinesOnly() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Lines Only</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid radialLines={false} />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0}\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n            />\n            <Radar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0}\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-multiple.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-multiple.json
new file mode 100644
index 00000000000..75adfea85ef
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-multiple.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-multiple",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with multiple data\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarMultiple() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Multiple</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json
new file mode 100644
index 00000000000..c0abb76d53a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-radius",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-radius.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a radius axis\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarRadius() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"hsla(var(--foreground))\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-grid.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-grid.json
new file mode 100644
index 00000000000..6afbeb0b04e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-grid.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-grid",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-grid.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a grid\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialGrid() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Grid</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <RadialBar dataKey=\"visitors\" />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-label.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-label.json
new file mode 100644
index 00000000000..fb33f244082
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-label.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-label",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialLabel() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={-90}\n            endAngle={380}\n            innerRadius={30}\n            outerRadius={110}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background>\n              <LabelList\n                position=\"insideStart\"\n                dataKey=\"browser\"\n                className=\"fill-white capitalize mix-blend-luminosity\"\n                fontSize={11}\n              />\n            </RadialBar>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-shape.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-shape.json
new file mode 100644
index 00000000000..7a698348495
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-shape.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-shape",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-shape.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a custom shape\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialShape() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Shape</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={100}\n            innerRadius={80}\n            outerRadius={140}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-simple.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-simple.json
new file mode 100644
index 00000000000..2df2df2318f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-simple.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-simple",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialSimple() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-stacked.json
new file mode 100644
index 00000000000..727525264cf
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-stacked.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-stacked",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with stacked sections\"\n\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialStacked() {\n  const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 items-center pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={180}\n            innerRadius={80}\n            outerRadius={130}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) - 16}\n                          className=\"fill-foreground text-2xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 4}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n            <RadialBar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              cornerRadius={5}\n              fill=\"var(--color-desktop)\"\n              className=\"stroke-transparent stroke-2\"\n            />\n            <RadialBar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              stackId=\"a\"\n              cornerRadius={5}\n              className=\"stroke-transparent stroke-2\"\n            />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-text.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-text.json
new file mode 100644
index 00000000000..fddbc36c401
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-text.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-text",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with text\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialText() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={0}\n            endAngle={250}\n            innerRadius={80}\n            outerRadius={110}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-advanced.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-advanced.json
new file mode 100644
index 00000000000..05abfc3e43c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-advanced.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-advanced",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-advanced.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipAdvanced() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Advanced</CardTitle>\n        <CardDescription>\n          Tooltip with custom formatter and total.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  className=\"w-[180px]\"\n                  formatter={(value, name, item, index) => (\n                    <>\n                      <div\n                        className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)\"\n                        style={\n                          {\n                            \"--color-bg\": `var(--color-${name})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                        {value}\n                        <span className=\"text-muted-foreground font-normal\">\n                          kcal\n                        </span>\n                      </div>\n                      {/* Add this after the last item */}\n                      {index === 1 && (\n                        <div className=\"text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium\">\n                          Total\n                          <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                            {item.payload.running + item.payload.swimming}\n                            <span className=\"text-muted-foreground font-normal\">\n                              kcal\n                            </span>\n                          </div>\n                        </div>\n                      )}\n                    </>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-default.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-default.json
new file mode 100644
index 00000000000..be2e0a6033b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-default.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-default.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\nexport const iframeHeight = \"600px\"\nexport const containerClassName =\n  \"[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Default</CardTitle>\n        <CardDescription>\n          Default tooltip with ChartTooltipContent.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json
new file mode 100644
index 00000000000..9a217665394
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-demo",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-tooltip-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute top-[45px] left-[-35px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute top-[50px] left-[5px] z-10\"\n        >\n          <g clipPath=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute top-[0px] left-[122px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute top-[10px] left-[85px] z-10 -scale-x-100\"\n        >\n          <g clipPath=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"!hidden md:!flex\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"!items-start !justify-start\">\n        <div className=\"absolute top-[60px] left-[50px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute top-[38px] left-[30px] z-10 rotate-[-40deg]\"\n        >\n          <g clipPath=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              <>\n                {!hideIndicator && (\n                  <div\n                    className={cn(\n                      \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                      {\n                        \"h-2.5 w-2.5\": indicator === \"dot\",\n                        \"w-1\": indicator === \"line\",\n                        \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                          indicator === \"dashed\",\n                        \"my-0.5\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\n                    }\n                  />\n                )}\n                <div\n                  className={cn(\n                    \"flex flex-1 justify-between leading-none\",\n                    nestLabel ? \"items-end\" : \"items-center\"\n                  )}\n                >\n                  <div className=\"grid gap-1.5\">\n                    {nestLabel ? tooltipLabel : null}\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                  </div>\n                  <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-formatter.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-formatter.json
new file mode 100644
index 00000000000..9062606673e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-formatter.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-formatter",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipFormatter() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Formatter</CardTitle>\n        <CardDescription>Tooltip with custom formatter .</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  formatter={(value, name) => (\n                    <div className=\"text-muted-foreground flex min-w-[130px] items-center text-xs\">\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                        {value}\n                        <span className=\"text-muted-foreground font-normal\">\n                          kcal\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-icons.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-icons.json
new file mode 100644
index 00000000000..419ae3a6e58
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-icons.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-icons",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-icons.tsx",
+      "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n    icon: Footprints,\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n    icon: Waves,\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipIcons() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Icons</CardTitle>\n        <CardDescription>Tooltip with icons.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-indicator-line.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-indicator-line.json
new file mode 100644
index 00000000000..19a90b21061
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-indicator-line.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-line",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-indicator-line.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\nexport const iframeHeight = \"600px\"\nexport const containerClassName =\n  \"[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipIndicatorLine() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Line Indicator</CardTitle>\n        <CardDescription>Tooltip with line indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent indicator=\"line\" />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-indicator-none.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-indicator-none.json
new file mode 100644
index 00000000000..35a03b44cc9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-indicator-none.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-none",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-indicator-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipIndicatorNone() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Indicator</CardTitle>\n        <CardDescription>Tooltip with no indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-label-custom.json
new file mode 100644
index 00000000000..d98b6266549
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-label-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  activities: {\n    label: \"Activities\",\n  },\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipLabelCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Custom label</CardTitle>\n        <CardDescription>\n          Tooltip with custom label from chartConfig.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent labelKey=\"activities\" indicator=\"line\" />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-label-formatter.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-label-formatter.json
new file mode 100644
index 00000000000..7a23d021f82
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-label-formatter.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-formatter",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-label-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipLabelFormatter() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Label Formatter</CardTitle>\n        <CardDescription>Tooltip with label formatter.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      day: \"numeric\",\n                      month: \"long\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-label-none.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-label-none.json
new file mode 100644
index 00000000000..506a57017cc
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-label-none.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-none",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-label-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipLabelNone() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Label</CardTitle>\n        <CardDescription>Tooltip with no label.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/chart.json b/apps/v4/public/r/styles/new-york-v4/chart.json
new file mode 100644
index 00000000000..885ffbd92e9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/chart.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart",
+  "type": "registry:ui",
+  "dependencies": [
+    "recharts@2.15.4",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "card"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/chart.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/checkbox-demo.json b/apps/v4/public/r/styles/new-york-v4/checkbox-demo.json
new file mode 100644
index 00000000000..13da6e342fb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/checkbox-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function CheckboxDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex items-center gap-3\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n      <div className=\"flex items-start gap-3\">\n        <Checkbox id=\"terms-2\" defaultChecked />\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"terms-2\">Accept terms and conditions</Label>\n          <p className=\"text-muted-foreground text-sm\">\n            By clicking this checkbox, you agree to the terms and conditions.\n          </p>\n        </div>\n      </div>\n      <div className=\"flex items-start gap-3\">\n        <Checkbox id=\"toggle\" disabled />\n        <Label htmlFor=\"toggle\">Enable notifications</Label>\n      </div>\n      <Label className=\"hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950\">\n        <Checkbox\n          id=\"toggle-2\"\n          defaultChecked\n          className=\"data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700\"\n        />\n        <div className=\"grid gap-1.5 font-normal\">\n          <p className=\"text-sm leading-none font-medium\">\n            Enable notifications\n          </p>\n          <p className=\"text-muted-foreground text-sm\">\n            You can enable or disable notifications at any time.\n          </p>\n        </div>\n      </Label>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/checkbox-disabled.json b/apps/v4/public/r/styles/new-york-v4/checkbox-disabled.json
new file mode 100644
index 00000000000..2f4f3400210
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/checkbox-disabled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-disabled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/checkbox-disabled.tsx",
+      "content": "import { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms2\" disabled />\n      <label\n        htmlFor=\"terms2\"\n        className=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/checkbox-form-multiple.json b/apps/v4/public/r/styles/new-york-v4/checkbox-form-multiple.json
new file mode 100644
index 00000000000..9e763949a44
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/checkbox-form-multiple.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-multiple",
+  "type": "registry:example",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/checkbox-form-multiple.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\n\nconst items = [\n  {\n    id: \"recents\",\n    label: \"Recents\",\n  },\n  {\n    id: \"home\",\n    label: \"Home\",\n  },\n  {\n    id: \"applications\",\n    label: \"Applications\",\n  },\n  {\n    id: \"desktop\",\n    label: \"Desktop\",\n  },\n  {\n    id: \"downloads\",\n    label: \"Downloads\",\n  },\n  {\n    id: \"documents\",\n    label: \"Documents\",\n  },\n] as const\n\nconst FormSchema = z.object({\n  items: z.array(z.string()).refine((value) => value.some((item) => item), {\n    message: \"You have to select at least one item.\",\n  }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      items: [\"recents\", \"home\"],\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"items\"\n          render={() => (\n            <FormItem>\n              <div className=\"mb-4\">\n                <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                <FormDescription>\n                  Select the items you want to display in the sidebar.\n                </FormDescription>\n              </div>\n              {items.map((item) => (\n                <FormField\n                  key={item.id}\n                  control={form.control}\n                  name=\"items\"\n                  render={({ field }) => {\n                    return (\n                      <FormItem\n                        key={item.id}\n                        className=\"flex flex-row items-center gap-2\"\n                      >\n                        <FormControl>\n                          <Checkbox\n                            checked={field.value?.includes(item.id)}\n                            onCheckedChange={(checked) => {\n                              return checked\n                                ? field.onChange([...field.value, item.id])\n                                : field.onChange(\n                                    field.value?.filter(\n                                      (value) => value !== item.id\n                                    )\n                                  )\n                            }}\n                          />\n                        </FormControl>\n                        <FormLabel className=\"text-sm font-normal\">\n                          {item.label}\n                        </FormLabel>\n                      </FormItem>\n                    )\n                  }}\n                />\n              ))}\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/checkbox-form-single.json b/apps/v4/public/r/styles/new-york-v4/checkbox-form-single.json
new file mode 100644
index 00000000000..df668fb5145
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/checkbox-form-single.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-single",
+  "type": "registry:example",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/checkbox-form-single.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/new-york-v4/ui/form\"\n\nconst FormSchema = z.object({\n  mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      mobile: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form\n        onSubmit={form.handleSubmit(onSubmit)}\n        className=\"flex flex-col items-start gap-4\"\n      >\n        <FormField\n          control={form.control}\n          name=\"mobile\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-row items-start gap-2 rounded-md border p-4 shadow-sm\">\n              <FormControl>\n                <Checkbox\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <div className=\"space-y-1 leading-none\">\n                <FormLabel>\n                  Use different settings for my mobile devices\n                </FormLabel>\n                <FormDescription>\n                  You can manage your mobile notifications in the{\" \"}\n                  <Link href=\"/examples/forms\">mobile settings</Link> page.\n                </FormDescription>\n              </div>\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/checkbox-with-text.json b/apps/v4/public/r/styles/new-york-v4/checkbox-with-text.json
new file mode 100644
index 00000000000..c4f53ca229d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/checkbox-with-text.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-with-text",
+  "type": "registry:example",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/checkbox-with-text.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n  return (\n    <div className=\"items-top flex gap-2\">\n      <Checkbox id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-muted-foreground text-sm\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/checkbox.json b/apps/v4/public/r/styles/new-york-v4/checkbox.json
new file mode 100644
index 00000000000..efc86def356
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/checkbox.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-checkbox"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/checkbox.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current transition-none\"\n      >\n        <CheckIcon className=\"size-3.5\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/collapsible-demo.json b/apps/v4/public/r/styles/new-york-v4/collapsible-demo.json
new file mode 100644
index 00000000000..cc97346e13e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/collapsible-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"flex w-[350px] flex-col gap-2\"\n    >\n      <div className=\"flex items-center justify-between gap-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n            <ChevronsUpDown />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"flex flex-col gap-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/collapsible.json b/apps/v4/public/r/styles/new-york-v4/collapsible.json
new file mode 100644
index 00000000000..3dc6db7ab79
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/collapsible.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/collapsible.tsx",
+      "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nfunction Collapsible({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      data-slot=\"collapsible-content\"\n      {...props}\n    />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/combobox-demo.json b/apps/v4/public/r/styles/new-york-v4/combobox-demo.json
new file mode 100644
index 00000000000..c1850b1ce49
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/combobox-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport default function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/combobox-dropdown-menu.json b/apps/v4/public/r/styles/new-york-v4/combobox-dropdown-menu.json
new file mode 100644
index 00000000000..fe7126312d2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/combobox-dropdown-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-dropdown-menu",
+  "type": "registry:example",
+  "registryDependencies": [
+    "command",
+    "dropdown-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/combobox-dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nconst labels = [\n  \"feature\",\n  \"bug\",\n  \"enhancement\",\n  \"documentation\",\n  \"design\",\n  \"question\",\n  \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n  const [label, setLabel] = React.useState(\"feature\")\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n      <p className=\"text-sm leading-none font-medium\">\n        <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">Create a new project</span>\n      </p>\n      <DropdownMenu open={open} onOpenChange={setOpen}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <MoreHorizontal />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n          <DropdownMenuLabel>Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Assign to...</DropdownMenuItem>\n            <DropdownMenuItem>Set due date...</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"p-0\">\n                <Command>\n                  <CommandInput\n                    placeholder=\"Filter label...\"\n                    autoFocus={true}\n                    className=\"h-9\"\n                  />\n                  <CommandList>\n                    <CommandEmpty>No label found.</CommandEmpty>\n                    <CommandGroup>\n                      {labels.map((label) => (\n                        <CommandItem\n                          key={label}\n                          value={label}\n                          onSelect={(value) => {\n                            setLabel(value)\n                            setOpen(false)\n                          }}\n                        >\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                  </CommandList>\n                </Command>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"text-red-600\">\n              Delete\n              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/combobox-form.json b/apps/v4/public/r/styles/new-york-v4/combobox-form.json
new file mode 100644
index 00000000000..1e87981d65a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/combobox-form.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "command",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/combobox-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst languages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n  language: z.string({\n    required_error: \"Please select a language.\",\n  }),\n})\n\nexport default function ComboboxForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"language\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Language</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      className={cn(\n                        \"w-[200px] justify-between\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value\n                        ? languages.find(\n                            (language) => language.value === field.value\n                          )?.label\n                        : \"Select language\"}\n                      <ChevronsUpDown className=\"opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-[200px] p-0\">\n                  <Command>\n                    <CommandInput\n                      placeholder=\"Search framework...\"\n                      className=\"h-9\"\n                    />\n                    <CommandList>\n                      <CommandEmpty>No framework found.</CommandEmpty>\n                      <CommandGroup>\n                        {languages.map((language) => (\n                          <CommandItem\n                            value={language.label}\n                            key={language.value}\n                            onSelect={() => {\n                              form.setValue(\"language\", language.value)\n                            }}\n                          >\n                            {language.label}\n                            <Check\n                              className={cn(\n                                \"ml-auto\",\n                                language.value === field.value\n                                  ? \"opacity-100\"\n                                  : \"opacity-0\"\n                              )}\n                            />\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                This is the language that will be used in the dashboard.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/combobox-popover.json b/apps/v4/public/r/styles/new-york-v4/combobox-popover.json
new file mode 100644
index 00000000000..99c1975d7b0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/combobox-popover.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-popover",
+  "type": "registry:example",
+  "registryDependencies": [
+    "combobox",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/combobox-popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/combobox-responsive.json b/apps/v4/public/r/styles/new-york-v4/combobox-responsive.json
new file mode 100644
index 00000000000..7f43fdc4a1e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/combobox-responsive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-responsive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "combobox",
+    "popover",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/combobox-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboBoxResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  if (isDesktop) {\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </PopoverContent>\n      </Popover>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mt-4 border-t\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction StatusList({\n  setOpen,\n  setSelectedStatus,\n}: {\n  setOpen: (open: boolean) => void\n  setSelectedStatus: (status: Status | null) => void\n}) {\n  return (\n    <Command>\n      <CommandInput placeholder=\"Filter status...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup>\n          {statuses.map((status) => (\n            <CommandItem\n              key={status.value}\n              value={status.value}\n              onSelect={(value) => {\n                setSelectedStatus(\n                  statuses.find((priority) => priority.value === value) || null\n                )\n                setOpen(false)\n              }}\n            >\n              {status.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/command-demo.json b/apps/v4/public/r/styles/new-york-v4/command-demo.json
new file mode 100644
index 00000000000..a2240639f5b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/command-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/command-demo.tsx",
+      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york-v4/ui/command\"\n\nexport default function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/command-dialog.json b/apps/v4/public/r/styles/new-york-v4/command-dialog.json
new file mode 100644
index 00000000000..4851ce87e39
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/command-dialog.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-dialog",
+  "type": "registry:example",
+  "registryDependencies": [
+    "command",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/command-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york-v4/ui/command\"\n\nexport default function CommandDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <p className=\"text-muted-foreground text-sm\">\n        Press{\" \"}\n        <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/command.json b/apps/v4/public/r/styles/new-york-v4/command.json
new file mode 100644
index 00000000000..ff5dd783b78
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/command.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command",
+  "type": "registry:ui",
+  "dependencies": [
+    "cmdk"
+  ],
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/command.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/new-york-v4/ui/dialog\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-9 items-center gap-2 border-b px-3\"\n    >\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/context-menu-demo.json b/apps/v4/public/r/styles/new-york-v4/context-menu-demo.json
new file mode 100644
index 00000000000..3f7da90d437
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/context-menu-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "context-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/context-menu-demo.tsx",
+      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/new-york-v4/ui/context-menu\"\n\nexport default function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-52\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-44\">\n            <ContextMenuItem>Save Page...</ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/context-menu.json b/apps/v4/public/r/styles/new-york-v4/context-menu.json
new file mode 100644
index 00000000000..94bc5d0b77e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/context-menu.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-context-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/context-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/dashboard-01-dark.png b/apps/v4/public/r/styles/new-york-v4/dashboard-01-dark.png
new file mode 100644
index 00000000000..eb91077a53d
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/dashboard-01-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/dashboard-01-light.png b/apps/v4/public/r/styles/new-york-v4/dashboard-01-light.png
new file mode 100644
index 00000000000..66206ed6a01
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/dashboard-01-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/dashboard-01.json b/apps/v4/public/r/styles/new-york-v4/dashboard-01.json
new file mode 100644
index 00000000000..537a06053d6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/dashboard-01.json
@@ -0,0 +1,101 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dashboard-01",
+  "type": "registry:block",
+  "description": "A dashboard with sidebar, charts and data table.",
+  "dependencies": [
+    "@dnd-kit/core",
+    "@dnd-kit/modifiers",
+    "@dnd-kit/sortable",
+    "@dnd-kit/utilities",
+    "@tanstack/react-table",
+    "zod",
+    "@tabler/icons-react"
+  ],
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "chart",
+    "card",
+    "select",
+    "tabs",
+    "table",
+    "toggle-group",
+    "badge",
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "drawer",
+    "input",
+    "avatar",
+    "sheet",
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/dashboard-01/components/app-sidebar\"\nimport { ChartAreaInteractive } from \"@/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive\"\nimport { DataTable } from \"@/registry/new-york-v4/blocks/dashboard-01/components/data-table\"\nimport { SectionCards } from \"@/registry/new-york-v4/blocks/dashboard-01/components/section-cards\"\nimport { SiteHeader } from \"@/registry/new-york-v4/blocks/dashboard-01/components/site-header\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nimport data from \"./data.json\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"calc(var(--spacing) * 72)\",\n          \"--header-height\": \"calc(var(--spacing) * 12)\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar variant=\"inset\" />\n      <SidebarInset>\n        <SiteHeader />\n        <div className=\"flex flex-1 flex-col\">\n          <div className=\"@container/main flex flex-1 flex-col gap-2\">\n            <div className=\"flex flex-col gap-4 py-4 md:gap-6 md:py-6\">\n              <SectionCards />\n              <div className=\"px-4 lg:px-6\">\n                <ChartAreaInteractive />\n              </div>\n              <DataTable data={data} />\n            </div>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/data.json",
+      "content": "[\n  {\n    \"id\": 1,\n    \"header\": \"Cover page\",\n    \"type\": \"Cover page\",\n    \"status\": \"In Process\",\n    \"target\": \"18\",\n    \"limit\": \"5\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 2,\n    \"header\": \"Table of contents\",\n    \"type\": \"Table of contents\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 3,\n    \"header\": \"Executive summary\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"10\",\n    \"limit\": \"13\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 4,\n    \"header\": \"Technical approach\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"27\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 5,\n    \"header\": \"Design\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"2\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 6,\n    \"header\": \"Capabilities\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"20\",\n    \"limit\": \"8\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 7,\n    \"header\": \"Integration with existing systems\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 8,\n    \"header\": \"Innovation and Advantages\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"25\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 9,\n    \"header\": \"Overview of EMR's Innovative Solutions\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"7\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 10,\n    \"header\": \"Advanced Algorithms and Machine Learning\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 11,\n    \"header\": \"Adaptive Communication Protocols\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"9\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 12,\n    \"header\": \"Advantages Over Current Technologies\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"0\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 13,\n    \"header\": \"Past Performance\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 14,\n    \"header\": \"Customer Feedback and Satisfaction Levels\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"34\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 15,\n    \"header\": \"Implementation Challenges and Solutions\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"3\",\n    \"limit\": \"35\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 16,\n    \"header\": \"Security Measures and Data Protection Policies\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"6\",\n    \"limit\": \"36\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 17,\n    \"header\": \"Scalability and Future Proofing\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"4\",\n    \"limit\": \"37\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 18,\n    \"header\": \"Cost-Benefit Analysis\",\n    \"type\": \"Plain language\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"38\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 19,\n    \"header\": \"User Training and Onboarding Experience\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"17\",\n    \"limit\": \"39\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 20,\n    \"header\": \"Future Development Roadmap\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"11\",\n    \"limit\": \"40\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 21,\n    \"header\": \"System Architecture Overview\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"24\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Maya Johnson\"\n  },\n  {\n    \"id\": 22,\n    \"header\": \"Risk Management Plan\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Carlos Rodriguez\"\n  },\n  {\n    \"id\": 23,\n    \"header\": \"Compliance Documentation\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"31\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Sarah Chen\"\n  },\n  {\n    \"id\": 24,\n    \"header\": \"API Documentation\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"8\",\n    \"limit\": \"12\",\n    \"reviewer\": \"Raj Patel\"\n  },\n  {\n    \"id\": 25,\n    \"header\": \"User Interface Mockups\",\n    \"type\": \"Visual\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Leila Ahmadi\"\n  },\n  {\n    \"id\": 26,\n    \"header\": \"Database Schema\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Thomas Wilson\"\n  },\n  {\n    \"id\": 27,\n    \"header\": \"Testing Methodology\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 28,\n    \"header\": \"Deployment Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 29,\n    \"header\": \"Budget Breakdown\",\n    \"type\": \"Financial\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 30,\n    \"header\": \"Market Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Sophia Martinez\"\n  },\n  {\n    \"id\": 31,\n    \"header\": \"Competitor Comparison\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 32,\n    \"header\": \"Maintenance Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Alex Thompson\"\n  },\n  {\n    \"id\": 33,\n    \"header\": \"User Personas\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Nina Patel\"\n  },\n  {\n    \"id\": 34,\n    \"header\": \"Accessibility Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 35,\n    \"header\": \"Performance Metrics\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"David Kim\"\n  },\n  {\n    \"id\": 36,\n    \"header\": \"Disaster Recovery Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 37,\n    \"header\": \"Third-party Integrations\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 38,\n    \"header\": \"User Feedback Summary\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 39,\n    \"header\": \"Localization Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"12\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Maria Garcia\"\n  },\n  {\n    \"id\": 40,\n    \"header\": \"Mobile Compatibility\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"James Wilson\"\n  },\n  {\n    \"id\": 41,\n    \"header\": \"Data Migration Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 42,\n    \"header\": \"Quality Assurance Protocols\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Priya Singh\"\n  },\n  {\n    \"id\": 43,\n    \"header\": \"Stakeholder Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"11\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 44,\n    \"header\": \"Environmental Impact Assessment\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 45,\n    \"header\": \"Intellectual Property Rights\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Sarah Johnson\"\n  },\n  {\n    \"id\": 46,\n    \"header\": \"Customer Support Framework\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 47,\n    \"header\": \"Version Control Strategy\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 48,\n    \"header\": \"Continuous Integration Pipeline\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Michael Chen\"\n  },\n  {\n    \"id\": 49,\n    \"header\": \"Regulatory Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 50,\n    \"header\": \"User Authentication System\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 51,\n    \"header\": \"Data Analytics Framework\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 52,\n    \"header\": \"Cloud Infrastructure\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 53,\n    \"header\": \"Network Security Measures\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Lisa Wong\"\n  },\n  {\n    \"id\": 54,\n    \"header\": \"Project Timeline\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 55,\n    \"header\": \"Resource Allocation\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 56,\n    \"header\": \"Team Structure and Roles\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 57,\n    \"header\": \"Communication Protocols\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 58,\n    \"header\": \"Success Metrics\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 59,\n    \"header\": \"Internationalization Support\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 60,\n    \"header\": \"Backup and Recovery Procedures\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 61,\n    \"header\": \"Monitoring and Alerting System\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Daniel Park\"\n  },\n  {\n    \"id\": 62,\n    \"header\": \"Code Review Guidelines\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 63,\n    \"header\": \"Documentation Standards\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 64,\n    \"header\": \"Release Management Process\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 65,\n    \"header\": \"Feature Prioritization Matrix\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Emma Davis\"\n  },\n  {\n    \"id\": 66,\n    \"header\": \"Technical Debt Assessment\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 67,\n    \"header\": \"Capacity Planning\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 68,\n    \"header\": \"Service Level Agreements\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Assign reviewer\"\n  }\n]\n",
+      "type": "registry:file",
+      "target": "app/dashboard/data.json"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  IconCamera,\n  IconChartBar,\n  IconDashboard,\n  IconDatabase,\n  IconFileAi,\n  IconFileDescription,\n  IconFileWord,\n  IconFolder,\n  IconHelp,\n  IconInnerShadowTop,\n  IconListDetails,\n  IconReport,\n  IconSearch,\n  IconSettings,\n  IconUsers,\n} from \"@tabler/icons-react\"\n\nimport { NavDocuments } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Dashboard\",\n      url: \"#\",\n      icon: IconDashboard,\n    },\n    {\n      title: \"Lifecycle\",\n      url: \"#\",\n      icon: IconListDetails,\n    },\n    {\n      title: \"Analytics\",\n      url: \"#\",\n      icon: IconChartBar,\n    },\n    {\n      title: \"Projects\",\n      url: \"#\",\n      icon: IconFolder,\n    },\n    {\n      title: \"Team\",\n      url: \"#\",\n      icon: IconUsers,\n    },\n  ],\n  navClouds: [\n    {\n      title: \"Capture\",\n      icon: IconCamera,\n      isActive: true,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Proposal\",\n      icon: IconFileDescription,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Prompts\",\n      icon: IconFileAi,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: IconSettings,\n    },\n    {\n      title: \"Get Help\",\n      url: \"#\",\n      icon: IconHelp,\n    },\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: IconSearch,\n    },\n  ],\n  documents: [\n    {\n      name: \"Data Library\",\n      url: \"#\",\n      icon: IconDatabase,\n    },\n    {\n      name: \"Reports\",\n      url: \"#\",\n      icon: IconReport,\n    },\n    {\n      name: \"Word Assistant\",\n      url: \"#\",\n      icon: IconFileWord,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              asChild\n              className=\"data-[slot=sidebar-menu-button]:!p-1.5\"\n            >\n              <a href=\"#\">\n                <IconInnerShadowTop className=\"!size-5\" />\n                <span className=\"text-base font-semibold\">Acme Inc.</span>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavDocuments items={data.documents} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const isMobile = useIsMobile()\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  React.useEffect(() => {\n    if (isMobile) {\n      setTimeRange(\"7d\")\n    }\n  }, [isMobile])\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"@container/card\">\n      <CardHeader>\n        <CardTitle>Total Visitors</CardTitle>\n        <CardDescription>\n          <span className=\"hidden @[540px]/card:block\">\n            Total for the last 3 months\n          </span>\n          <span className=\"@[540px]/card:hidden\">Last 3 months</span>\n        </CardDescription>\n        <CardAction>\n          <ToggleGroup\n            type=\"single\"\n            value={timeRange}\n            onValueChange={setTimeRange}\n            variant=\"outline\"\n            className=\"hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex\"\n          >\n            <ToggleGroupItem value=\"90d\">Last 3 months</ToggleGroupItem>\n            <ToggleGroupItem value=\"30d\">Last 30 days</ToggleGroupItem>\n            <ToggleGroupItem value=\"7d\">Last 7 days</ToggleGroupItem>\n          </ToggleGroup>\n          <Select value={timeRange} onValueChange={setTimeRange}>\n            <SelectTrigger\n              className=\"flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden\"\n              size=\"sm\"\n              aria-label=\"Select a value\"\n            >\n              <SelectValue placeholder=\"Last 3 months\" />\n            </SelectTrigger>\n            <SelectContent className=\"rounded-xl\">\n              <SelectItem value=\"90d\" className=\"rounded-lg\">\n                Last 3 months\n              </SelectItem>\n              <SelectItem value=\"30d\" className=\"rounded-lg\">\n                Last 30 days\n              </SelectItem>\n              <SelectItem value=\"7d\" className=\"rounded-lg\">\n                Last 7 days\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </CardAction>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={1.0}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronsLeft,\n  IconChevronsRight,\n  IconCircleCheckFilled,\n  IconDotsVertical,\n  IconGripVertical,\n  IconLayoutColumns,\n  IconLoader,\n  IconPlus,\n  IconTrendingUp,\n} from \"@tabler/icons-react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  Row,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york-v4/ui/tabs\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconGripVertical className=\"text-muted-foreground size-3\" />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconCircleCheckFilled className=\"fill-green-500 dark:fill-green-400\" />\n        ) : (\n          <IconLoader />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n              <SelectItem value=\"Jamik Tashpulatov\">\n                Jamik Tashpulatov\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"data-[state=open]:bg-muted text-muted-foreground flex size-8\"\n            size=\"icon\"\n          >\n            <IconDotsVertical />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"outline\">Outline</SelectItem>\n            <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n            <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n            <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconLayoutColumns />\n                <span className=\"hidden lg:inline\">Customize Columns</span>\n                <span className=\"lg:hidden\">Columns</span>\n                <IconChevronDown />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlus />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  {[10, 20, 30, 40, 50].map((pageSize) => (\n                    <SelectItem key={pageSize} value={`${pageSize}`}>\n                      {pageSize}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconChevronsLeft />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconChevronLeft />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconChevronRight />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconChevronsRight />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconTrendingUp className=\"size-4\" />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Table of Contents\">\n                      Table of Contents\n                    </SelectItem>\n                    <SelectItem value=\"Executive Summary\">\n                      Executive Summary\n                    </SelectItem>\n                    <SelectItem value=\"Technical Approach\">\n                      Technical Approach\n                    </SelectItem>\n                    <SelectItem value=\"Design\">Design</SelectItem>\n                    <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                    <SelectItem value=\"Focus Documents\">\n                      Focus Documents\n                    </SelectItem>\n                    <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                    <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Done\">Done</SelectItem>\n                    <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                    <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                  <SelectItem value=\"Jamik Tashpulatov\">\n                    Jamik Tashpulatov\n                  </SelectItem>\n                  <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx",
+      "content": "\"use client\"\n\nimport {\n  IconDots,\n  IconFolder,\n  IconShare3,\n  IconTrash,\n  type Icon,\n} from \"@tabler/icons-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: Icon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"data-[state=open]:bg-accent rounded-sm\"\n                >\n                  <IconDots />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconFolder />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconShare3 />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconTrash />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconDots className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { IconCirclePlusFilled, IconMail, type Icon } from \"@tabler/icons-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: Icon\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconCirclePlusFilled />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconMail />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon && <item.icon />}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Icon } from \"@tabler/icons-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: Icon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  IconCreditCard,\n  IconDotsVertical,\n  IconLogout,\n  IconNotification,\n  IconUserCircle,\n} from \"@tabler/icons-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  {user.email}\n                </span>\n              </div>\n              <IconDotsVertical className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"text-muted-foreground truncate text-xs\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconUserCircle />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconCreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconNotification />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconLogout />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx",
+      "content": "import { IconTrendingDown, IconTrendingUp } from \"@tabler/icons-react\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingDown />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period <IconTrendingDown className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/site-header.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport { SidebarTrigger } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SiteHeader() {\n  return (\n    <header className=\"flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)\">\n      <div className=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\n        <SidebarTrigger className=\"-ml-1\" />\n        <Separator\n          orientation=\"vertical\"\n          className=\"mx-2 data-[orientation=vertical]:h-4\"\n        />\n        <h1 className=\"text-base font-medium\">Documents</h1>\n        <div className=\"ml-auto flex items-center gap-2\">\n          <Button variant=\"ghost\" asChild size=\"sm\" className=\"hidden sm:flex\">\n            <a\n              href=\"https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard\"\n              rel=\"noopener noreferrer\"\n              target=\"_blank\"\n              className=\"dark:text-foreground\"\n            >\n              GitHub\n            </a>\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "1000px"
+  },
+  "categories": [
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/data-table-demo.json b/apps/v4/public/r/styles/new-york-v4/data-table-demo.json
new file mode 100644
index 00000000000..0bf652ccbd5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/data-table-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-table-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "data-table"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\n\nconst data: Payment[] = [\n  {\n    id: \"m5gr84i9\",\n    amount: 316,\n    status: \"success\",\n    email: \"ken99@example.com\",\n  },\n  {\n    id: \"3u1reuv4\",\n    amount: 242,\n    status: \"success\",\n    email: \"Abe45@example.com\",\n  },\n  {\n    id: \"derv1ws0\",\n    amount: 837,\n    status: \"processing\",\n    email: \"Monserrat44@example.com\",\n  },\n  {\n    id: \"5kma53ae\",\n    amount: 874,\n    status: \"success\",\n    email: \"Silas22@example.com\",\n  },\n  {\n    id: \"bhqecj4p\",\n    amount: 721,\n    status: \"failed\",\n    email: \"carmella@example.com\",\n  },\n]\n\nexport type Payment = {\n  id: string\n  amount: number\n  status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n  email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n    ),\n  },\n  {\n    accessorKey: \"email\",\n    header: ({ column }) => {\n      return (\n        <Button\n          variant=\"ghost\"\n          onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n        >\n          Email\n          <ArrowUpDown />\n        </Button>\n      )\n    },\n    cell: ({ row }) => <div className=\"lowercase\">{row.getValue(\"email\")}</div>,\n  },\n  {\n    accessorKey: \"amount\",\n    header: () => <div className=\"text-right\">Amount</div>,\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"amount\"))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n\n      return <div className=\"text-right font-medium\">{formatted}</div>\n    },\n  },\n  {\n    id: \"actions\",\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" className=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem\n              onClick={() => navigator.clipboard.writeText(payment.id)}\n            >\n              Copy payment ID\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>View customer</DropdownMenuItem>\n            <DropdownMenuItem>View payment details</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      )\n    },\n  },\n]\n\nexport default function DataTableDemo() {\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [rowSelection, setRowSelection] = React.useState({})\n\n  const table = useReactTable({\n    data,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n  })\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-center py-4\">\n        <Input\n          placeholder=\"Filter emails...\"\n          value={(table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"}\n          onChange={(event) =>\n            table.getColumn(\"email\")?.setFilterValue(event.target.value)\n          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDown />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {table\n              .getAllColumns()\n              .filter((column) => column.getCanHide())\n              .map((column) => {\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    className=\"capitalize\"\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {column.id}\n                  </DropdownMenuCheckboxItem>\n                )\n              })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex items-center justify-end space-x-2 py-4\">\n        <div className=\"text-muted-foreground flex-1 text-sm\">\n          {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n          {table.getFilteredRowModel().rows.length} row(s) selected.\n        </div>\n        <div className=\"space-x-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            Previous\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            Next\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/date-picker-demo.json b/apps/v4/public/r/styles/new-york-v4/date-picker-demo.json
new file mode 100644
index 00000000000..faf03d2c85d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/date-picker-demo.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-demo",
+  "type": "registry:example",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/date-picker-form.json b/apps/v4/public/r/styles/new-york-v4/date-picker-form.json
new file mode 100644
index 00000000000..0fb3b0c5aaa
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/date-picker-form.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-form",
+  "type": "registry:example",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/date-picker-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function DatePickerForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    captionLayout=\"dropdown\"\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/date-picker-with-presets.json b/apps/v4/public/r/styles/new-york-v4/date-picker-with-presets.json
new file mode 100644
index 00000000000..cadcb13e51e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/date-picker-with-presets.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-presets",
+  "type": "registry:example",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/date-picker-with-presets.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function DatePickerWithPresets() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"flex w-auto flex-col space-y-2 p-2\"\n      >\n        <Select\n          onValueChange={(value) =>\n            setDate(addDays(new Date(), parseInt(value)))\n          }\n        >\n          <SelectTrigger>\n            <SelectValue placeholder=\"Select\" />\n          </SelectTrigger>\n          <SelectContent position=\"popper\">\n            <SelectItem value=\"0\">Today</SelectItem>\n            <SelectItem value=\"1\">Tomorrow</SelectItem>\n            <SelectItem value=\"3\">In 3 days</SelectItem>\n            <SelectItem value=\"7\">In a week</SelectItem>\n          </SelectContent>\n        </Select>\n        <div className=\"rounded-md border\">\n          <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/date-picker-with-range.json b/apps/v4/public/r/styles/new-york-v4/date-picker-with-range.json
new file mode 100644
index 00000000000..6a44012fdfe
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/date-picker-with-range.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-range",
+  "type": "registry:example",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/date-picker-with-range.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function DatePickerWithRange({\n  className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(2022, 0, 20),\n    to: addDays(new Date(2022, 0, 20), 20),\n  })\n\n  return (\n    <div className={cn(\"grid gap-2\", className)}>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id=\"date\"\n            variant={\"outline\"}\n            className={cn(\n              \"w-[300px] justify-start text-left font-normal\",\n              !date && \"text-muted-foreground\"\n            )}\n          >\n            <CalendarIcon />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            initialFocus\n            mode=\"range\"\n            defaultMonth={date?.from}\n            selected={date}\n            onSelect={setDate}\n            numberOfMonths={2}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/dialog-close-button.json b/apps/v4/public/r/styles/new-york-v4/dialog-close-button.json
new file mode 100644
index 00000000000..d5a4e9fe404
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/dialog-close-button.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-close-button",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dialog-close-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function DialogCloseButton() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Share</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share link</DialogTitle>\n          <DialogDescription>\n            Anyone who has this link will be able to view this.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex items-center gap-2\">\n          <div className=\"grid flex-1 gap-2\">\n            <Label htmlFor=\"link\" className=\"sr-only\">\n              Link\n            </Label>\n            <Input\n              id=\"link\"\n              defaultValue=\"https://ui.shadcn.com/docs/installation\"\n              readOnly\n            />\n          </div>\n        </div>\n        <DialogFooter className=\"sm:justify-start\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"secondary\">\n              Close\n            </Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/dialog-demo.json b/apps/v4/public/r/styles/new-york-v4/dialog-demo.json
new file mode 100644
index 00000000000..15219db0ba3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/dialog-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dialog-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/dialog.json b/apps/v4/public/r/styles/new-york-v4/dialog.json
new file mode 100644
index 00000000000..cc3c50efaf6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/dialog.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/drawer-demo.json b/apps/v4/public/r/styles/new-york-v4/drawer-demo.json
new file mode 100644
index 00000000000..de47851d793
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/drawer-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport default function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/drawer-dialog.json b/apps/v4/public/r/styles/new-york-v4/drawer-dialog.json
new file mode 100644
index 00000000000..cefe9c50226
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/drawer-dialog.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-dialog",
+  "type": "registry:example",
+  "registryDependencies": [
+    "drawer",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/drawer-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Edit Profile</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/drawer.json b/apps/v4/public/r/styles/new-york-v4/drawer.json
new file mode 100644
index 00000000000..b3641635d0e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/drawer.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer",
+  "type": "registry:ui",
+  "dependencies": [
+    "vaul",
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/drawer.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/dropdown-menu-checkboxes.json b/apps/v4/public/r/styles/new-york-v4/dropdown-menu-checkboxes.json
new file mode 100644
index 00000000000..68fd7b65cba
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/dropdown-menu-checkboxes.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-checkboxes",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dropdown-menu",
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dropdown-menu-checkboxes.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\ntype Checked = DropdownMenuCheckboxItemProps[\"checked\"]\n\nexport default function DropdownMenuCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n  const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuCheckboxItem\n          checked={showStatusBar}\n          onCheckedChange={setShowStatusBar}\n        >\n          Status Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showActivityBar}\n          onCheckedChange={setShowActivityBar}\n          disabled\n        >\n          Activity Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showPanel}\n          onCheckedChange={setShowPanel}\n        >\n          Panel\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/dropdown-menu-demo.json b/apps/v4/public/r/styles/new-york-v4/dropdown-menu-demo.json
new file mode 100644
index 00000000000..0f2683f81f7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/dropdown-menu-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\" align=\"start\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Email</DropdownMenuItem>\n                <DropdownMenuItem>Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/dropdown-menu-radio-group.json b/apps/v4/public/r/styles/new-york-v4/dropdown-menu-radio-group.json
new file mode 100644
index 00000000000..62588064aa6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/dropdown-menu-radio-group.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-radio-group",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dropdown-menu",
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dropdown-menu-radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function DropdownMenuRadioGroupDemo() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>\n          <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"bottom\">Bottom</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"right\">Right</DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/dropdown-menu.json b/apps/v4/public/r/styles/new-york-v4/dropdown-menu.json
new file mode 100644
index 00000000000..7d073ba0c19
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/dropdown-menu.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/form.json b/apps/v4/public/r/styles/new-york-v4/form.json
new file mode 100644
index 00000000000..b8b5dd38e48
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/form.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "form",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-label",
+    "@radix-ui/react-slot",
+    "@hookform/resolvers",
+    "zod",
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/form.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState } = useFormContext()\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : props.children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-destructive text-sm\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/hover-card-demo.json b/apps/v4/public/r/styles/new-york-v4/hover-card-demo.json
new file mode 100644
index 00000000000..b729ec1892a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/hover-card-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "hover-card"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york-v4/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between gap-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"text-muted-foreground text-xs\">\n              Joined December 2021\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/hover-card.json b/apps/v4/public/r/styles/new-york-v4/hover-card.json
new file mode 100644
index 00000000000..fdb336fe7fd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/hover-card.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-hover-card"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/hover-card.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/index.json b/apps/v4/public/r/styles/new-york-v4/index.json
new file mode 100644
index 00000000000..3a8ab076873
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/index.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "type": "registry:style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "devDependencies": [
+    "tw-animate-css"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {}
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-demo.json b/apps/v4/public/r/styles/new-york-v4/input-demo.json
new file mode 100644
index 00000000000..c717e5f907a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-demo.tsx",
+      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport default function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-disabled.json b/apps/v4/public/r/styles/new-york-v4/input-disabled.json
new file mode 100644
index 00000000000..14173b3f1d1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-disabled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-disabled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-disabled.tsx",
+      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport default function InputDisabled() {\n  return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-file.json b/apps/v4/public/r/styles/new-york-v4/input-file.json
new file mode 100644
index 00000000000..5be7bf1ac0b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-file.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-file",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-file.tsx",
+      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function InputFile() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\n      <Label htmlFor=\"picture\">Picture</Label>\n      <Input id=\"picture\" type=\"file\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-form.json b/apps/v4/public/r/styles/new-york-v4/input-form.json
new file mode 100644
index 00000000000..d39dd1de864
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input",
+    "button",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nconst FormSchema = z.object({\n  username: z.string().min(2, {\n    message: \"Username must be at least 2 characters.\",\n  }),\n})\n\nexport default function InputForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      username: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-otp-controlled.json b/apps/v4/public/r/styles/new-york-v4/input-otp-controlled.json
new file mode 100644
index 00000000000..7da3e484629
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-otp-controlled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-controlled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-otp-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york-v4/ui/input-otp\"\n\nexport default function InputOTPControlled() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <div className=\"space-y-2\">\n      <InputOTP\n        maxLength={6}\n        value={value}\n        onChange={(value) => setValue(value)}\n      >\n        <InputOTPGroup>\n          <InputOTPSlot index={0} />\n          <InputOTPSlot index={1} />\n          <InputOTPSlot index={2} />\n          <InputOTPSlot index={3} />\n          <InputOTPSlot index={4} />\n          <InputOTPSlot index={5} />\n        </InputOTPGroup>\n      </InputOTP>\n      <div className=\"text-center text-sm\">\n        {value === \"\" ? (\n          <>Enter your one-time password.</>\n        ) : (\n          <>You entered: {value}</>\n        )}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-otp-demo.json b/apps/v4/public/r/styles/new-york-v4/input-otp-demo.json
new file mode 100644
index 00000000000..15979ff8f00
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-otp-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-otp-demo.tsx",
+      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york-v4/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-otp-form.json b/apps/v4/public/r/styles/new-york-v4/input-otp-form.json
new file mode 100644
index 00000000000..fc660ffe7d9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-otp-form.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input-otp",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-otp-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york-v4/ui/input-otp\"\n\nconst FormSchema = z.object({\n  pin: z.string().min(6, {\n    message: \"Your one-time password must be 6 characters.\",\n  }),\n})\n\nexport default function InputOTPForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      pin: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"pin\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>One-Time Password</FormLabel>\n              <FormControl>\n                <InputOTP maxLength={6} {...field}>\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormControl>\n              <FormDescription>\n                Please enter the one-time password sent to your phone.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-otp-pattern.json b/apps/v4/public/r/styles/new-york-v4/input-otp-pattern.json
new file mode 100644
index 00000000000..ddc9a0f9a6c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-otp-pattern.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-pattern",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-otp-pattern.tsx",
+      "content": "\"use client\"\n\nimport { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york-v4/ui/input-otp\"\n\nexport default function InputOTPPattern() {\n  return (\n    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-otp-separator.json b/apps/v4/public/r/styles/new-york-v4/input-otp-separator.json
new file mode 100644
index 00000000000..d9e33e2ee46
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-otp-separator.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-separator",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-otp-separator.tsx",
+      "content": "import React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york-v4/ui/input-otp\"\n\nexport default function InputOTPWithSeparator() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-otp.json b/apps/v4/public/r/styles/new-york-v4/input-otp.json
new file mode 100644
index 00000000000..bbb18126b8d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-otp.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp",
+  "type": "registry:ui",
+  "dependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/input-otp.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { MinusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"flex items-center gap-2 has-disabled:opacity-50\",\n        containerClassName\n      )}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-with-button.json b/apps/v4/public/r/styles/new-york-v4/input-with-button.json
new file mode 100644
index 00000000000..5a8d97f73a5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-with-button.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-button",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-with-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport default function InputWithButton() {\n  return (\n    <div className=\"flex w-full max-w-sm items-center gap-2\">\n      <Input type=\"email\" placeholder=\"Email\" />\n      <Button type=\"submit\" variant=\"outline\">\n        Subscribe\n      </Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-with-label.json b/apps/v4/public/r/styles/new-york-v4/input-with-label.json
new file mode 100644
index 00000000000..84506bb7010
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-with-label.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-label",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-with-label.tsx",
+      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function InputWithLabel() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\n      <Label htmlFor=\"email\">Email</Label>\n      <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input-with-text.json b/apps/v4/public/r/styles/new-york-v4/input-with-text.json
new file mode 100644
index 00000000000..e6c1eac116f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-text",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-with-text.tsx",
+      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function InputWithText() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\n      <Label htmlFor=\"email-2\">Email</Label>\n      <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n      <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/input.json b/apps/v4/public/r/styles/new-york-v4/input.json
new file mode 100644
index 00000000000..0236c3d891b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/input.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/input.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n        \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/label-demo.json b/apps/v4/public/r/styles/new-york-v4/label-demo.json
new file mode 100644
index 00000000000..b5f31b1cf73
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/label-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/label.json b/apps/v4/public/r/styles/new-york-v4/label.json
new file mode 100644
index 00000000000..e76b83242fb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/label.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/label.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/login-01-dark.png b/apps/v4/public/r/styles/new-york-v4/login-01-dark.png
new file mode 100644
index 00000000000..7aa27e6caac
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/login-01-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/login-01-light.png b/apps/v4/public/r/styles/new-york-v4/login-01-light.png
new file mode 100644
index 00000000000..1fc0832f460
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/login-01-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/login-01.json b/apps/v4/public/r/styles/new-york-v4/login-01.json
new file mode 100644
index 00000000000..24e841db344
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/login-01.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-01",
+  "type": "registry:block",
+  "description": "A simple login form.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york-v4/blocks/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": "registry/new-york-v4/blocks/login-01/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle>Login to your account</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-3\">\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-3\">\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              <div className=\"flex flex-col gap-3\">\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>\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"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/login-02-dark.png b/apps/v4/public/r/styles/new-york-v4/login-02-dark.png
new file mode 100644
index 00000000000..5a3e0a1d573
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/login-02-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/login-02-light.png b/apps/v4/public/r/styles/new-york-v4/login-02-light.png
new file mode 100644
index 00000000000..d4736ed5bf5
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/login-02-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/login-02.json b/apps/v4/public/r/styles/new-york-v4/login-02.json
new file mode 100644
index 00000000000..28b23deaa9d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/login-02.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-02",
+  "type": "registry:block",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york-v4/blocks/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=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\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=\"bg-muted relative hidden 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": "registry/new-york-v4/blocks/login-02/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"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-muted-foreground text-sm text-balance\">\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-3\">\n          <Label htmlFor=\"email\">Email</Label>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-3\">\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=\"after:border-border 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\">\n          <span className=\"bg-background text-muted-foreground relative z-10 px-2\">\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"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/login-03-dark.png b/apps/v4/public/r/styles/new-york-v4/login-03-dark.png
new file mode 100644
index 00000000000..64681875bb6
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/login-03-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/login-03-light.png b/apps/v4/public/r/styles/new-york-v4/login-03-light.png
new file mode 100644
index 00000000000..098107ef5f2
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/login-03-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/login-03.json b/apps/v4/public/r/styles/new-york-v4/login-03.json
new file mode 100644
index 00000000000..9ceac8ae326
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/login-03.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-03",
+  "type": "registry:block",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york-v4/blocks/login-03/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 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=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\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": "registry/new-york-v4/blocks/login-03/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"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=\"after:border-border 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\">\n                <span className=\"bg-card text-muted-foreground relative z-10 px-2\">\n                  Or continue with\n                </span>\n              </div>\n              <div className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\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-3\">\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-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4\">\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"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/login-04-dark.png b/apps/v4/public/r/styles/new-york-v4/login-04-dark.png
new file mode 100644
index 00000000000..fbe2439d6e0
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/login-04-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/login-04-light.png b/apps/v4/public/r/styles/new-york-v4/login-04-light.png
new file mode 100644
index 00000000000..21243713e21
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/login-04-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/login-04.json b/apps/v4/public/r/styles/new-york-v4/login-04.json
new file mode 100644
index 00000000000..c84837cbf40
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/login-04.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-04",
+  "type": "registry:block",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york-v4/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/login-04/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <div className=\"grid gap-3\">\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-3\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 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=\"after:border-border 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\">\n                <span className=\"bg-card text-muted-foreground relative z-10 px-2\">\n                  Or continue with\n                </span>\n              </div>\n              <div className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\" 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                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\" 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                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\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          <div className=\"bg-muted relative hidden md: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        </CardContent>\n      </Card>\n      <div className=\"text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4\">\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"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/login-05-dark.png b/apps/v4/public/r/styles/new-york-v4/login-05-dark.png
new file mode 100644
index 00000000000..d25a87a1cc4
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/login-05-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/login-05-light.png b/apps/v4/public/r/styles/new-york-v4/login-05-light.png
new file mode 100644
index 00000000000..e69504ca94d
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/login-05-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/login-05.json b/apps/v4/public/r/styles/new-york-v4/login-05.json
new file mode 100644
index 00000000000..535f1deb92a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/login-05.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-05",
+  "type": "registry:block",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york-v4/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 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": "registry/new-york-v4/blocks/login-05/components/login-form.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"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 size-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-3\">\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=\"after:border-border 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\">\n            <span className=\"bg-background text-muted-foreground relative z-10 px-2\">\n              Or\n            </span>\n          </div>\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            <Button variant=\"outline\" type=\"button\" 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\" type=\"button\" 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-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4\">\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"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/menubar-demo.json b/apps/v4/public/r/styles/new-york-v4/menubar-demo.json
new file mode 100644
index 00000000000..f50c19c843b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/menubar-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "menubar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/menubar-demo.tsx",
+      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/new-york-v4/ui/menubar\"\n\nexport default function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/menubar.json b/apps/v4/public/r/styles/new-york-v4/menubar.json
new file mode 100644
index 00000000000..0b31aae494f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/menubar.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-menubar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/menubar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/mode-toggle.json b/apps/v4/public/r/styles/new-york-v4/mode-toggle.json
new file mode 100644
index 00000000000..00c5a512cf1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/mode-toggle.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mode-toggle",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n  const { setTheme } = useTheme()\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"icon\">\n          <Sun className=\"h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90\" />\n          <Moon className=\"absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0\" />\n          <span className=\"sr-only\">Toggle theme</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n          Light\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n          Dark\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n          System\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/navigation-menu-demo.json b/apps/v4/public/r/styles/new-york-v4/navigation-menu-demo.json
new file mode 100644
index 00000000000..1a20c52eeb3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/navigation-menu-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport { CircleCheckIcon, CircleHelpIcon, CircleIcon } from \"lucide-react\"\n\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/new-york-v4/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuDemo() {\n  return (\n    <NavigationMenu viewport={false}>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Home</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <div className=\"mt-4 mb-2 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-muted-foreground text-sm leading-tight\">\n                      Beautifully designed components built with Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>\n            <Link href=\"/docs\">Docs</Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>List</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[300px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Components</div>\n                    <div className=\"text-muted-foreground\">\n                      Browse all components in the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Documentation</div>\n                    <div className=\"text-muted-foreground\">\n                      Learn how to use the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Blog</div>\n                    <div className=\"text-muted-foreground\">\n                      Read our latest blog posts.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Simple</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Components</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Documentation</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Blocks</Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleHelpIcon />\n                    Backlog\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleIcon />\n                    To Do\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleCheckIcon />\n                    Done\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"text-sm leading-none font-medium\">{title}</div>\n          <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n            {children}\n          </p>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/navigation-menu.json b/apps/v4/public/r/styles/new-york-v4/navigation-menu.json
new file mode 100644
index 00000000000..3305955ec09
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/navigation-menu.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/navigation-menu.tsx",
+      "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/pagination-demo.json b/apps/v4/public/r/styles/new-york-v4/pagination-demo.json
new file mode 100644
index 00000000000..e2b954defd1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/pagination-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "pagination"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/pagination-demo.tsx",
+      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/new-york-v4/ui/pagination\"\n\nexport default function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/pagination.json b/apps/v4/public/r/styles/new-york-v4/pagination.json
new file mode 100644
index 00000000000..18d91f44431
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/pagination.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination",
+  "type": "registry:ui",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/pagination.tsx",
+      "content": "import * as React from \"react\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  MoreHorizontalIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">Previous</span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/popover-demo.json b/apps/v4/public/r/styles/new-york-v4/popover-demo.json
new file mode 100644
index 00000000000..3dbeb5ac783
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/popover-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/popover-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"leading-none font-medium\">Dimensions</h4>\n            <p className=\"text-muted-foreground text-sm\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/popover.json b/apps/v4/public/r/styles/new-york-v4/popover.json
new file mode 100644
index 00000000000..b56fa05252e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/popover.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/products-01.json b/apps/v4/public/r/styles/new-york-v4/products-01.json
new file mode 100644
index 00000000000..827f9273a21
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/products-01.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "products-01",
+  "type": "registry:block",
+  "description": "A table of products",
+  "registryDependencies": [
+    "checkbox",
+    "badge",
+    "button",
+    "dropdown-menu",
+    "pagination",
+    "table",
+    "tabs",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/products-01/page.tsx",
+      "content": "import { ProductsTable } from \"@/registry/new-york-v4/blocks/products-01/components/products-table\"\n\n// Load from database.\nconst products = [\n  {\n    id: \"1\",\n    name: \"BJÖRKSNÄS Dining Table\",\n    price: 599.99,\n    stock: 12,\n    dateAdded: \"2023-06-15\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"2\",\n    name: \"POÄNG Armchair\",\n    price: 249.99,\n    stock: 28,\n    dateAdded: \"2023-07-22\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"3\",\n    name: \"MALM Bed Frame\",\n    price: 399.99,\n    stock: 15,\n    dateAdded: \"2023-08-05\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"4\",\n    name: \"KALLAX Shelf Unit\",\n    price: 179.99,\n    stock: 32,\n    dateAdded: \"2023-09-12\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"5\",\n    name: \"STOCKHOLM Rug\",\n    price: 299.99,\n    stock: 8,\n    dateAdded: \"2023-10-18\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"6\",\n    name: \"KIVIK Sofa\",\n    price: 899.99,\n    stock: 6,\n    dateAdded: \"2023-11-02\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"7\",\n    name: \"LISABO Coffee Table\",\n    price: 149.99,\n    stock: 22,\n    dateAdded: \"2023-11-29\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"8\",\n    name: \"HEMNES Bookcase\",\n    price: 249.99,\n    stock: 17,\n    dateAdded: \"2023-12-10\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"9\",\n    name: \"EKEDALEN Dining Chairs (Set of 2)\",\n    price: 199.99,\n    stock: 14,\n    dateAdded: \"2024-01-05\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"10\",\n    name: \"FRIHETEN Sleeper Sofa\",\n    price: 799.99,\n    stock: 9,\n    dateAdded: \"2024-01-18\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"11\",\n    name: \"NORDEN Extendable Table\",\n    price: 499.99,\n    stock: 11,\n    dateAdded: \"2024-01-25\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"12\",\n    name: \"BILLY Bookcase\",\n    price: 129.99,\n    stock: 42,\n    dateAdded: \"2024-02-03\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"13\",\n    name: \"STRANDMON Wing Chair\",\n    price: 349.99,\n    stock: 16,\n    dateAdded: \"2024-02-12\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"14\",\n    name: \"MALM Dresser\",\n    price: 279.99,\n    stock: 19,\n    dateAdded: \"2024-02-27\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"15\",\n    name: \"BRIMNES TV Unit\",\n    price: 149.99,\n    stock: 23,\n    dateAdded: \"2024-03-08\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"16\",\n    name: \"SÖDERHAMN Sectional Sofa\",\n    price: 1299.99,\n    stock: 5,\n    dateAdded: \"2024-03-15\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"17\",\n    name: \"BEKANT Desk\",\n    price: 249.99,\n    stock: 18,\n    dateAdded: \"2024-03-22\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"18\",\n    name: \"IVAR Storage System\",\n    price: 199.99,\n    stock: 14,\n    dateAdded: \"2024-04-01\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"19\",\n    name: \"RIBBA Picture Frame Set\",\n    price: 49.99,\n    stock: 36,\n    dateAdded: \"2024-04-09\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"20\",\n    name: \"EKTORP Loveseat\",\n    price: 499.99,\n    stock: 12,\n    dateAdded: \"2024-04-15\",\n    status: \"In Stock\",\n  },\n]\n\nexport default function ProductsPage() {\n  return (\n    <div className=\"flex h-full flex-1 flex-col gap-4 rounded-xl p-4\">\n      <ProductsTable products={products} />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/products/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/products-01/components/products-table.tsx",
+      "content": "import {\n  ArrowUpDownIcon,\n  EllipsisVerticalIcon,\n  ListFilterIcon,\n  PlusIcon,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/new-york-v4/ui/pagination\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/new-york-v4/ui/tabs\"\n\nexport function ProductsTable({\n  products,\n}: {\n  products: {\n    id: string\n    name: string\n    price: number\n    stock: number\n    dateAdded: string\n    status: string\n  }[]\n}) {\n  return (\n    <div className=\"flex w-full flex-col gap-4\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <Tabs defaultValue=\"all\">\n          <TabsList>\n            <TabsTrigger value=\"all\">All Products</TabsTrigger>\n            <TabsTrigger value=\"in-stock\">In Stock</TabsTrigger>\n            <TabsTrigger value=\"low-stock\">Low Stock</TabsTrigger>\n            <TabsTrigger value=\"archived\">Archived</TabsTrigger>\n            <TabsTrigger value=\"add-product\" asChild>\n              <button>\n                <PlusIcon />\n              </button>\n            </TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <div className=\"flex items-center gap-2 **:data-[slot=button]:size-8 **:data-[slot=select-trigger]:h-8\">\n          <Select defaultValue=\"all\">\n            <SelectTrigger>\n              <span className=\"text-muted-foreground text-sm\">Category:</span>\n              <SelectValue placeholder=\"Select a product\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"in-stock\">In Stock</SelectItem>\n              <SelectItem value=\"low-stock\">Low Stock</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectContent>\n          </Select>\n          <Select defaultValue=\"all\">\n            <SelectTrigger>\n              <span className=\"text-muted-foreground text-sm\">Price:</span>\n              <SelectValue placeholder=\"Select a product\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">$100-$200</SelectItem>\n              <SelectItem value=\"in-stock\">$200-$300</SelectItem>\n              <SelectItem value=\"low-stock\">$300-$400</SelectItem>\n              <SelectItem value=\"archived\">$400-$500</SelectItem>\n            </SelectContent>\n          </Select>\n          <Select defaultValue=\"all\">\n            <SelectTrigger>\n              <span className=\"text-muted-foreground text-sm\">Status:</span>\n              <SelectValue placeholder=\"Select a product\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">In Stock</SelectItem>\n              <SelectItem value=\"in-stock\">Low Stock</SelectItem>\n              <SelectItem value=\"low-stock\">Archived</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"icon\">\n            <ListFilterIcon />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <ArrowUpDownIcon />\n          </Button>\n        </div>\n      </div>\n      <div className=\"rounded-lg\">\n        <Table>\n          <TableHeader className=\"bg-muted/50\">\n            <TableRow className=\"!border-0\">\n              <TableHead className=\"w-12 rounded-l-lg px-4\">\n                <Checkbox />\n              </TableHead>\n              <TableHead>Product</TableHead>\n              <TableHead className=\"text-right\">Price</TableHead>\n              <TableHead className=\"text-right\">Stock</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead>Date Added</TableHead>\n              <TableHead className=\"rounded-r-lg\" />\n            </TableRow>\n          </TableHeader>\n          <TableBody className=\"**:data-[slot=table-cell]:py-2.5\">\n            {products.map((product) => (\n              <TableRow key={product.id}>\n                <TableCell className=\"px-4\">\n                  <Checkbox />\n                </TableCell>\n                <TableCell className=\"font-medium\">{product.name}</TableCell>\n                <TableCell className=\"text-right\">\n                  ${product.price.toFixed(2)}\n                </TableCell>\n                <TableCell className=\"text-right\">{product.stock}</TableCell>\n                <TableCell>\n                  <Badge\n                    variant=\"secondary\"\n                    className={\n                      product.status === \"Low Stock\"\n                        ? \"border-orange-500 bg-transparent text-orange-500 dark:border-orange-500 dark:bg-transparent dark:text-orange-500\"\n                        : \"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100\"\n                    }\n                  >\n                    {product.status}\n                  </Badge>\n                </TableCell>\n                <TableCell>\n                  {new Date(product.dateAdded).toLocaleDateString(\"en-US\", {\n                    month: \"long\",\n                    day: \"numeric\",\n                    year: \"numeric\",\n                  })}\n                </TableCell>\n                <TableCell>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\" className=\"size-6\">\n                        <EllipsisVerticalIcon />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuItem>Edit</DropdownMenuItem>\n                      <DropdownMenuItem variant=\"destructive\">\n                        Delete\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex justify-end\">\n        <Pagination>\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationLink href=\"#\" isActive>\n                2\n              </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext href=\"#\" />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/progress-demo.json b/apps/v4/public/r/styles/new-york-v4/progress-demo.json
new file mode 100644
index 00000000000..8bf70ae396d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/progress-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "progress"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/new-york-v4/ui/progress\"\n\nexport default function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/progress.json b/apps/v4/public/r/styles/new-york-v4/progress.json
new file mode 100644
index 00000000000..20f1d946c02
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/progress.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-progress"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/progress.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary h-full w-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/radio-group-demo.json b/apps/v4/public/r/styles/new-york-v4/radio-group-demo.json
new file mode 100644
index 00000000000..11c0c89259c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/radio-group-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center gap-3\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/radio-group-form.json b/apps/v4/public/r/styles/new-york-v4/radio-group-form.json
new file mode 100644
index 00000000000..49171cd1025
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/radio-group-form.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "radio-group",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/radio-group-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\n\nconst FormSchema = z.object({\n  type: z.enum([\"all\", \"mentions\", \"none\"], {\n    required_error: \"You need to select a notification type.\",\n  }),\n})\n\nexport default function RadioGroupForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"type\"\n          render={({ field }) => (\n            <FormItem className=\"space-y-3\">\n              <FormLabel>Notify me about...</FormLabel>\n              <FormControl>\n                <RadioGroup\n                  onValueChange={field.onChange}\n                  defaultValue={field.value}\n                  className=\"flex flex-col\"\n                >\n                  <FormItem className=\"flex items-center gap-3\">\n                    <FormControl>\n                      <RadioGroupItem value=\"all\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      All new messages\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center gap-3\">\n                    <FormControl>\n                      <RadioGroupItem value=\"mentions\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      Direct messages and mentions\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center gap-3\">\n                    <FormControl>\n                      <RadioGroupItem value=\"none\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">Nothing</FormLabel>\n                  </FormItem>\n                </RadioGroup>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/radio-group.json b/apps/v4/public/r/styles/new-york-v4/radio-group.json
new file mode 100644
index 00000000000..bcf327f7328
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/radio-group.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-radio-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon className=\"fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/registry.json b/apps/v4/public/r/styles/new-york-v4/registry.json
new file mode 100644
index 00000000000..6dce8b7b73c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/registry.json
@@ -0,0 +1,5968 @@
+{
+  "name": "shadcn/ui",
+  "homepage": "https://ui.shadcn.com",
+  "items": [
+    {
+      "name": "index",
+      "type": "registry:style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "devDependencies": [
+        "tw-animate-css"
+      ],
+      "registryDependencies": [
+        "utils"
+      ],
+      "files": [],
+      "cssVars": {}
+    },
+    {
+      "name": "style",
+      "type": "registry:style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "devDependencies": [
+        "tw-animate-css"
+      ],
+      "registryDependencies": [
+        "utils"
+      ],
+      "files": [],
+      "cssVars": {}
+    },
+    {
+      "name": "accordion",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-accordion"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/accordion.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "alert",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/alert.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-alert-dialog"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/alert-dialog.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-aspect-ratio"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/aspect-ratio.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "avatar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/avatar.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "badge",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/badge.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/breadcrumb.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/button.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "calendar",
+      "type": "registry:ui",
+      "dependencies": [
+        "react-day-picker@latest",
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/calendar.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/card.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "carousel",
+      "type": "registry:ui",
+      "dependencies": [
+        "embla-carousel-react"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/carousel.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "chart",
+      "type": "registry:ui",
+      "dependencies": [
+        "recharts@2.15.4",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/chart.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "checkbox",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/checkbox.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "collapsible",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/collapsible.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "command",
+      "type": "registry:ui",
+      "dependencies": [
+        "cmdk"
+      ],
+      "registryDependencies": [
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/command.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "context-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-context-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/context-menu.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "dialog",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/dialog.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "drawer",
+      "type": "registry:ui",
+      "dependencies": [
+        "vaul",
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/drawer.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/dropdown-menu.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "form",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label",
+        "@radix-ui/react-slot",
+        "@hookform/resolvers",
+        "zod",
+        "react-hook-form"
+      ],
+      "registryDependencies": [
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/form.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "hover-card",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-hover-card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/hover-card.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "input",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/input.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "input-otp",
+      "type": "registry:ui",
+      "dependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/input-otp.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/label.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "menubar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-menubar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/menubar.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-navigation-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/navigation-menu.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "pagination",
+      "type": "registry:ui",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/pagination.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "popover",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/popover.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-progress"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/progress.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "radio-group",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/radio-group.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "resizable",
+      "type": "registry:ui",
+      "dependencies": [
+        "react-resizable-panels"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/resizable.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "scroll-area",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/scroll-area.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "select",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/select.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "separator",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/separator.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "sheet",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/sheet.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "sidebar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "separator",
+        "sheet",
+        "tooltip",
+        "input",
+        "use-mobile",
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/sidebar.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "colors": {
+                "sidebar": {
+                  "DEFAULT": "hsl(var(--sidebar-background))",
+                  "foreground": "hsl(var(--sidebar-foreground))",
+                  "primary": "hsl(var(--sidebar-primary))",
+                  "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                  "accent": "hsl(var(--sidebar-accent))",
+                  "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                  "border": "hsl(var(--sidebar-border))",
+                  "ring": "hsl(var(--sidebar-ring))"
+                }
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "sidebar-background": "0 0% 98%",
+          "sidebar-foreground": "240 5.3% 26.1%",
+          "sidebar-primary": "240 5.9% 10%",
+          "sidebar-primary-foreground": "0 0% 98%",
+          "sidebar-accent": "240 4.8% 95.9%",
+          "sidebar-accent-foreground": "240 5.9% 10%",
+          "sidebar-border": "220 13% 91%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        },
+        "dark": {
+          "sidebar-background": "240 5.9% 10%",
+          "sidebar-foreground": "240 4.8% 95.9%",
+          "sidebar-primary": "224.3 76.3% 48%",
+          "sidebar-primary-foreground": "0 0% 100%",
+          "sidebar-accent": "240 3.7% 15.9%",
+          "sidebar-accent-foreground": "240 4.8% 95.9%",
+          "sidebar-border": "240 3.7% 15.9%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        }
+      }
+    },
+    {
+      "name": "skeleton",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/skeleton.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "slider",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slider"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/slider.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "sonner",
+      "type": "registry:ui",
+      "dependencies": [
+        "sonner",
+        "next-themes"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/sonner.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "switch",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/switch.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "table",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/table.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "tabs",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/tabs.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "textarea",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/textarea.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "toggle",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/toggle.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toggle-group"
+      ],
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/toggle-group.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "tooltip",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/tooltip.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "dashboard-01",
+      "type": "registry:block",
+      "description": "A dashboard with sidebar, charts and data table.",
+      "dependencies": [
+        "@dnd-kit/core",
+        "@dnd-kit/modifiers",
+        "@dnd-kit/sortable",
+        "@dnd-kit/utilities",
+        "@tanstack/react-table",
+        "zod",
+        "@tabler/icons-react"
+      ],
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "chart",
+        "card",
+        "select",
+        "tabs",
+        "table",
+        "toggle-group",
+        "badge",
+        "button",
+        "checkbox",
+        "dropdown-menu",
+        "drawer",
+        "input",
+        "avatar",
+        "sheet",
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/data.json",
+          "type": "registry:file",
+          "target": "app/dashboard/data.json"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/site-header.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "1000px"
+      },
+      "categories": [
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-01",
+      "type": "registry:block",
+      "description": "A simple sidebar with navigation grouped by section.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-02",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible sections.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-03",
+      "type": "registry:block",
+      "description": "A sidebar with submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-04",
+      "type": "registry:block",
+      "description": "A floating sidebar with submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-05",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-05/components/search-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-06",
+      "type": "registry:block",
+      "description": "A sidebar with submenus as dropdowns.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-07",
+      "type": "registry:block",
+      "description": "A sidebar that collapses to icons.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-08",
+      "type": "registry:block",
+      "description": "An inset sidebar with secondary navigation.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-09",
+      "type": "registry:block",
+      "description": "Collapsible nested sidebars.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-09/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-09/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-10",
+      "type": "registry:block",
+      "description": "A sidebar in a popover.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-favorites.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-11",
+      "type": "registry:block",
+      "description": "A sidebar with a collapsible file tree.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-11/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-11/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-12",
+      "type": "registry:block",
+      "description": "A sidebar with a calendar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-13",
+      "type": "registry:block",
+      "description": "A sidebar in a dialog.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "button",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-13/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-14",
+      "type": "registry:block",
+      "description": "A sidebar on the right.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-14/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-14/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-15",
+      "type": "registry:block",
+      "description": "A left and right sidebar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-favorites.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-left.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-16",
+      "type": "registry:block",
+      "description": "A sidebar with a sticky site header.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "login-01",
+      "type": "registry:block",
+      "description": "A simple login form.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-01/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-02",
+      "type": "registry:block",
+      "description": "A two column login page with a cover image.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-02/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-03",
+      "type": "registry:block",
+      "description": "A login page with a muted background color.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-03/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-04",
+      "type": "registry:block",
+      "description": "A login page with form and image.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-04/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-05",
+      "type": "registry:block",
+      "description": "A simple email-only login page.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-05/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "calendar-01",
+      "type": "registry:block",
+      "description": "A simple calendar.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-01.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-02",
+      "type": "registry:block",
+      "description": "Multiple months with single selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-02.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-03",
+      "type": "registry:block",
+      "description": "Multiple months with multiple selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-03.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-04",
+      "type": "registry:block",
+      "description": "Single month with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-04.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-05",
+      "type": "registry:block",
+      "description": "Multiple months with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-05.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-06",
+      "type": "registry:block",
+      "description": "Range selection with minimum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-06.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-07",
+      "type": "registry:block",
+      "description": "Range selection with minimum and maximum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-07.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-08",
+      "type": "registry:block",
+      "description": "Calendar with disabled days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-08.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-09",
+      "type": "registry:block",
+      "description": "Calendar with disabled weekends",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-09.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-10",
+      "type": "registry:block",
+      "description": "Today button",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-10.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-11",
+      "type": "registry:block",
+      "description": "Start and end of month",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-11.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-12",
+      "type": "registry:block",
+      "description": "Localized calendar",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-12.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-13",
+      "type": "registry:block",
+      "description": "With Month and Year Dropdown",
+      "registryDependencies": [
+        "calendar",
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-13.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-14",
+      "type": "registry:block",
+      "description": "With Booked/Unavailable Days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-14.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-15",
+      "type": "registry:block",
+      "description": "With Week Numbers",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-15.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-16",
+      "type": "registry:block",
+      "description": "With time picker",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-16.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-17",
+      "type": "registry:block",
+      "description": "With time picker inline",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-17.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-18",
+      "type": "registry:block",
+      "description": "Variable size",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-18.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-19",
+      "type": "registry:block",
+      "description": "With presets",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-19.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-20",
+      "type": "registry:block",
+      "description": "With time presets",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-20.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-21",
+      "type": "registry:block",
+      "description": "Custom days and formatters",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-21.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-22",
+      "type": "registry:block",
+      "description": "Date picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-22.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-23",
+      "type": "registry:block",
+      "description": "Date range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-23.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-24",
+      "type": "registry:block",
+      "description": "Date and Time picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-24.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-25",
+      "type": "registry:block",
+      "description": "Date and Time range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-25.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-26",
+      "type": "registry:block",
+      "description": "Date range picker with time",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-26.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-27",
+      "type": "registry:block",
+      "description": "Chart filter",
+      "registryDependencies": [
+        "calendar",
+        "chart",
+        "card",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-27.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-28",
+      "type": "registry:block",
+      "description": "Input with date picker",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-28.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-29",
+      "type": "registry:block",
+      "description": "Natural language date picker",
+      "dependencies": [
+        "chrono-node"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-29.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-30",
+      "type": "registry:block",
+      "description": "With little-date",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-30.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-31",
+      "type": "registry:block",
+      "description": "With event slots",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-31.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "700px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-32",
+      "type": "registry:block",
+      "description": "Date picker in a drawer",
+      "registryDependencies": [
+        "calendar",
+        "button",
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-32.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "chart-area-axes",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-axes.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-gradient",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-gradient.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-icons.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-interactive.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-legend.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-linear",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-linear.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-stacked-expand",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-stacked-expand.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-step",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-step.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-bar-active",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-active.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-horizontal",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-horizontal.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-interactive.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-mixed",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-mixed.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-multiple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-negative",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-negative.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-line-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots-colors",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-dots-colors.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-dots-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-dots.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-interactive.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-linear",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-linear.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-multiple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-step",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-step.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-pie-donut-active",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-donut-active.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-donut-text",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-donut-text.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-donut",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-donut.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-interactive.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label-list",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-label-list.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-legend.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-separator-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-separator-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-simple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-simple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-radar-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-dots",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-dots.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle-fill",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle-no-lines",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-circle.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-fill",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-fill.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-icons.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-legend.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-lines-only",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-lines-only.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-multiple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-radius",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-radius.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radial-grid",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-grid.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-shape",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-shape.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-simple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-simple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-text",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-text.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-tooltip-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-indicator-line",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-indicator-line.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-indicator-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-indicator-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-label-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-formatter",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-label-formatter.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-formatter",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-formatter.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-icons.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-advanced",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-advanced.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "utils",
+      "type": "registry:lib",
+      "dependencies": [
+        "clsx",
+        "tailwind-merge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/lib/utils.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
+    {
+      "name": "use-mobile",
+      "type": "registry:hook",
+      "files": [
+        {
+          "path": "registry/new-york-v4/hooks/use-mobile.ts",
+          "type": "registry:hook"
+        }
+      ]
+    },
+    {
+      "name": "theme-stone",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.147 0.004 49.25)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.147 0.004 49.25)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.147 0.004 49.25)",
+          "primary": "oklch(0.216 0.006 56.043)",
+          "primary-foreground": "oklch(0.985 0.001 106.423)",
+          "secondary": "oklch(0.97 0.001 106.424)",
+          "secondary-foreground": "oklch(0.216 0.006 56.043)",
+          "muted": "oklch(0.97 0.001 106.424)",
+          "muted-foreground": "oklch(0.553 0.013 58.071)",
+          "accent": "oklch(0.97 0.001 106.424)",
+          "accent-foreground": "oklch(0.216 0.006 56.043)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.923 0.003 48.717)",
+          "input": "oklch(0.923 0.003 48.717)",
+          "ring": "oklch(0.709 0.01 56.259)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0.001 106.423)",
+          "sidebar-foreground": "oklch(0.147 0.004 49.25)",
+          "sidebar-primary": "oklch(0.216 0.006 56.043)",
+          "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-accent": "oklch(0.97 0.001 106.424)",
+          "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)",
+          "sidebar-border": "oklch(0.923 0.003 48.717)",
+          "sidebar-ring": "oklch(0.709 0.01 56.259)"
+        },
+        "dark": {
+          "background": "oklch(0.147 0.004 49.25)",
+          "foreground": "oklch(0.985 0.001 106.423)",
+          "card": "oklch(0.216 0.006 56.043)",
+          "card-foreground": "oklch(0.985 0.001 106.423)",
+          "popover": "oklch(0.216 0.006 56.043)",
+          "popover-foreground": "oklch(0.985 0.001 106.423)",
+          "primary": "oklch(0.923 0.003 48.717)",
+          "primary-foreground": "oklch(0.216 0.006 56.043)",
+          "secondary": "oklch(0.268 0.007 34.298)",
+          "secondary-foreground": "oklch(0.985 0.001 106.423)",
+          "muted": "oklch(0.268 0.007 34.298)",
+          "muted-foreground": "oklch(0.709 0.01 56.259)",
+          "accent": "oklch(0.268 0.007 34.298)",
+          "accent-foreground": "oklch(0.985 0.001 106.423)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.553 0.013 58.071)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.216 0.006 56.043)",
+          "sidebar-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-accent": "oklch(0.268 0.007 34.298)",
+          "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.553 0.013 58.071)"
+        }
+      }
+    },
+    {
+      "name": "theme-zinc",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.141 0.005 285.823)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.141 0.005 285.823)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.141 0.005 285.823)",
+          "primary": "oklch(0.21 0.006 285.885)",
+          "primary-foreground": "oklch(0.985 0 0)",
+          "secondary": "oklch(0.967 0.001 286.375)",
+          "secondary-foreground": "oklch(0.21 0.006 285.885)",
+          "muted": "oklch(0.967 0.001 286.375)",
+          "muted-foreground": "oklch(0.552 0.016 285.938)",
+          "accent": "oklch(0.967 0.001 286.375)",
+          "accent-foreground": "oklch(0.21 0.006 285.885)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.92 0.004 286.32)",
+          "input": "oklch(0.92 0.004 286.32)",
+          "ring": "oklch(0.705 0.015 286.067)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0 0)",
+          "sidebar-foreground": "oklch(0.141 0.005 285.823)",
+          "sidebar-primary": "oklch(0.21 0.006 285.885)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.967 0.001 286.375)",
+          "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+          "sidebar-border": "oklch(0.92 0.004 286.32)",
+          "sidebar-ring": "oklch(0.705 0.015 286.067)"
+        },
+        "dark": {
+          "background": "oklch(0.141 0.005 285.823)",
+          "foreground": "oklch(0.985 0 0)",
+          "card": "oklch(0.21 0.006 285.885)",
+          "card-foreground": "oklch(0.985 0 0)",
+          "popover": "oklch(0.21 0.006 285.885)",
+          "popover-foreground": "oklch(0.985 0 0)",
+          "primary": "oklch(0.92 0.004 286.32)",
+          "primary-foreground": "oklch(0.21 0.006 285.885)",
+          "secondary": "oklch(0.274 0.006 286.033)",
+          "secondary-foreground": "oklch(0.985 0 0)",
+          "muted": "oklch(0.274 0.006 286.033)",
+          "muted-foreground": "oklch(0.705 0.015 286.067)",
+          "accent": "oklch(0.274 0.006 286.033)",
+          "accent-foreground": "oklch(0.985 0 0)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.552 0.016 285.938)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.21 0.006 285.885)",
+          "sidebar-foreground": "oklch(0.985 0 0)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.274 0.006 286.033)",
+          "sidebar-accent-foreground": "oklch(0.985 0 0)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.552 0.016 285.938)"
+        }
+      }
+    },
+    {
+      "name": "theme-neutral",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.145 0 0)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.145 0 0)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.145 0 0)",
+          "primary": "oklch(0.205 0 0)",
+          "primary-foreground": "oklch(0.985 0 0)",
+          "secondary": "oklch(0.97 0 0)",
+          "secondary-foreground": "oklch(0.205 0 0)",
+          "muted": "oklch(0.97 0 0)",
+          "muted-foreground": "oklch(0.556 0 0)",
+          "accent": "oklch(0.97 0 0)",
+          "accent-foreground": "oklch(0.205 0 0)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.922 0 0)",
+          "input": "oklch(0.922 0 0)",
+          "ring": "oklch(0.708 0 0)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0 0)",
+          "sidebar-foreground": "oklch(0.145 0 0)",
+          "sidebar-primary": "oklch(0.205 0 0)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.97 0 0)",
+          "sidebar-accent-foreground": "oklch(0.205 0 0)",
+          "sidebar-border": "oklch(0.922 0 0)",
+          "sidebar-ring": "oklch(0.708 0 0)"
+        },
+        "dark": {
+          "background": "oklch(0.145 0 0)",
+          "foreground": "oklch(0.985 0 0)",
+          "card": "oklch(0.205 0 0)",
+          "card-foreground": "oklch(0.985 0 0)",
+          "popover": "oklch(0.205 0 0)",
+          "popover-foreground": "oklch(0.985 0 0)",
+          "primary": "oklch(0.922 0 0)",
+          "primary-foreground": "oklch(0.205 0 0)",
+          "secondary": "oklch(0.269 0 0)",
+          "secondary-foreground": "oklch(0.985 0 0)",
+          "muted": "oklch(0.269 0 0)",
+          "muted-foreground": "oklch(0.708 0 0)",
+          "accent": "oklch(0.269 0 0)",
+          "accent-foreground": "oklch(0.985 0 0)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.556 0 0)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.205 0 0)",
+          "sidebar-foreground": "oklch(0.985 0 0)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.269 0 0)",
+          "sidebar-accent-foreground": "oklch(0.985 0 0)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.556 0 0)"
+        }
+      }
+    },
+    {
+      "name": "theme-gray",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.13 0.028 261.692)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.13 0.028 261.692)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.13 0.028 261.692)",
+          "primary": "oklch(0.21 0.034 264.665)",
+          "primary-foreground": "oklch(0.985 0.002 247.839)",
+          "secondary": "oklch(0.967 0.003 264.542)",
+          "secondary-foreground": "oklch(0.21 0.034 264.665)",
+          "muted": "oklch(0.967 0.003 264.542)",
+          "muted-foreground": "oklch(0.551 0.027 264.364)",
+          "accent": "oklch(0.967 0.003 264.542)",
+          "accent-foreground": "oklch(0.21 0.034 264.665)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.928 0.006 264.531)",
+          "input": "oklch(0.928 0.006 264.531)",
+          "ring": "oklch(0.707 0.022 261.325)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0.002 247.839)",
+          "sidebar-foreground": "oklch(0.13 0.028 261.692)",
+          "sidebar-primary": "oklch(0.21 0.034 264.665)",
+          "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-accent": "oklch(0.967 0.003 264.542)",
+          "sidebar-accent-foreground": "oklch(0.21 0.034 264.665)",
+          "sidebar-border": "oklch(0.928 0.006 264.531)",
+          "sidebar-ring": "oklch(0.707 0.022 261.325)"
+        },
+        "dark": {
+          "background": "oklch(0.13 0.028 261.692)",
+          "foreground": "oklch(0.985 0.002 247.839)",
+          "card": "oklch(0.21 0.034 264.665)",
+          "card-foreground": "oklch(0.985 0.002 247.839)",
+          "popover": "oklch(0.21 0.034 264.665)",
+          "popover-foreground": "oklch(0.985 0.002 247.839)",
+          "primary": "oklch(0.928 0.006 264.531)",
+          "primary-foreground": "oklch(0.21 0.034 264.665)",
+          "secondary": "oklch(0.278 0.033 256.848)",
+          "secondary-foreground": "oklch(0.985 0.002 247.839)",
+          "muted": "oklch(0.278 0.033 256.848)",
+          "muted-foreground": "oklch(0.707 0.022 261.325)",
+          "accent": "oklch(0.278 0.033 256.848)",
+          "accent-foreground": "oklch(0.985 0.002 247.839)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.551 0.027 264.364)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.21 0.034 264.665)",
+          "sidebar-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-accent": "oklch(0.278 0.033 256.848)",
+          "sidebar-accent-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.551 0.027 264.364)"
+        }
+      }
+    },
+    {
+      "name": "theme-slate",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.129 0.042 264.695)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.129 0.042 264.695)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.129 0.042 264.695)",
+          "primary": "oklch(0.208 0.042 265.755)",
+          "primary-foreground": "oklch(0.984 0.003 247.858)",
+          "secondary": "oklch(0.968 0.007 247.896)",
+          "secondary-foreground": "oklch(0.208 0.042 265.755)",
+          "muted": "oklch(0.968 0.007 247.896)",
+          "muted-foreground": "oklch(0.554 0.046 257.417)",
+          "accent": "oklch(0.968 0.007 247.896)",
+          "accent-foreground": "oklch(0.208 0.042 265.755)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.929 0.013 255.508)",
+          "input": "oklch(0.929 0.013 255.508)",
+          "ring": "oklch(0.704 0.04 256.788)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.984 0.003 247.858)",
+          "sidebar-foreground": "oklch(0.129 0.042 264.695)",
+          "sidebar-primary": "oklch(0.208 0.042 265.755)",
+          "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-accent": "oklch(0.968 0.007 247.896)",
+          "sidebar-accent-foreground": "oklch(0.208 0.042 265.755)",
+          "sidebar-border": "oklch(0.929 0.013 255.508)",
+          "sidebar-ring": "oklch(0.704 0.04 256.788)"
+        },
+        "dark": {
+          "background": "oklch(0.129 0.042 264.695)",
+          "foreground": "oklch(0.984 0.003 247.858)",
+          "card": "oklch(0.208 0.042 265.755)",
+          "card-foreground": "oklch(0.984 0.003 247.858)",
+          "popover": "oklch(0.208 0.042 265.755)",
+          "popover-foreground": "oklch(0.984 0.003 247.858)",
+          "primary": "oklch(0.929 0.013 255.508)",
+          "primary-foreground": "oklch(0.208 0.042 265.755)",
+          "secondary": "oklch(0.279 0.041 260.031)",
+          "secondary-foreground": "oklch(0.984 0.003 247.858)",
+          "muted": "oklch(0.279 0.041 260.031)",
+          "muted-foreground": "oklch(0.704 0.04 256.788)",
+          "accent": "oklch(0.279 0.041 260.031)",
+          "accent-foreground": "oklch(0.984 0.003 247.858)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.551 0.027 264.364)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.208 0.042 265.755)",
+          "sidebar-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-accent": "oklch(0.279 0.041 260.031)",
+          "sidebar-accent-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.551 0.027 264.364)"
+        }
+      }
+    },
+    {
+      "name": "accordion-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "accordion"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/accordion-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "alert-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/alert-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "alert-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/alert-destructive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert-dialog",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/alert-dialog-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "aspect-ratio"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/aspect-ratio-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "avatar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/avatar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-destructive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-secondary",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-secondary.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-separator",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-separator.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-dropdown",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-dropdown.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-ellipsis",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-ellipsis.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-link",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-link.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-responsive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-responsive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-secondary",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-secondary.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-destructive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-ghost",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-ghost.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-link",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-link.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-with-icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-with-icon.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-loading",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-loading.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-icon.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-as-child",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-as-child.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "calendar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/calendar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "calendar-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "calendar",
+        "form",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/calendar-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "card-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "card",
+        "button",
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/card-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "card-with-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/card-with-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-size",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-size.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-spacing",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-spacing.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-orientation",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-orientation.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-api",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-api.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-plugin",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-plugin.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-multiple",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-form-multiple.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-single",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-form-single.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "collapsible-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/collapsible-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-dropdown-menu",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "dropdown-menu",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-dropdown-menu.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-popover",
+      "type": "registry:example",
+      "registryDependencies": [
+        "combobox",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-popover.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-responsive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "combobox",
+        "popover",
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-responsive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "command-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/command-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "command-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/command-dialog.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "context-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "context-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/context-menu-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "data-table-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "data-table"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/data-table-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-demo",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-form",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "form",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-presets",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-with-presets.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-range",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-with-range.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dialog-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dialog-close-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dialog",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dialog-close-button.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "drawer-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/drawer-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "drawer-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "drawer",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/drawer-dialog.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-checkboxes",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-checkboxes.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-radio-group",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-radio-group.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "hover-card-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "hover-card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/hover-card-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-file",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-file.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-with-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-with-button.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-with-label",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-with-label.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-pattern",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-pattern.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-separator",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-separator.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-controlled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-controlled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "label-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/label-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "menubar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "menubar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/menubar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "navigation-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/navigation-menu-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "pagination-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "pagination"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/pagination-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "popover-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/popover-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "progress-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "progress"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/progress-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "radio-group-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/radio-group-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "radio-group-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "radio-group",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/radio-group-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo-with-handle",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-demo-with-handle.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-vertical",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-vertical.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-handle",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-handle.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/scroll-area-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-horizontal-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "select-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/select-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "select-scrollable",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/select-scrollable.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "select-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/select-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "separator-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/separator-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "sheet-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sheet"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/sheet-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "sheet-side",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sheet"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/sheet-side.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "skeleton-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/skeleton-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "skeleton-card",
+      "type": "registry:example",
+      "registryDependencies": [
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/skeleton-card.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "slider-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "slider"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/slider-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "sonner-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/sonner-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "switch-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/switch-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "switch-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "switch",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/switch-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "table-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "table"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/table-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "tabs-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/tabs-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-with-button.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-label",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-with-label.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-lg",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-lg.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-sm",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-sm.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-single",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-single.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-lg",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-lg.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-sm",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-sm.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "tooltip-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/tooltip-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-blockquote",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-blockquote.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h1",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h1.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h2",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h2.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h3",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h3.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h4",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h4.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-inline-code",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-inline-code.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-large",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-large.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-lead",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-lead.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-list",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-list.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-muted",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-muted.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-p",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-p.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-small",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-small.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-table",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-table.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "mode-toggle",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/mode-toggle.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-grid",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-grid.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-axis",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-axis.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-tooltip",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-tooltip.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-legend",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-legend.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-tooltip-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-tooltip-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "calendar-hijri",
+      "type": "registry:example",
+      "description": "A Persian calendar.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/calendar-hijri.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "sidebar-demo",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-demo.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-header",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-header.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-footer",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-footer.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-group.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-group-collapsible.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-group-action.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-action.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-sub",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-sub.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-collapsible.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-badge",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-badge.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-rsc",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-rsc.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-controlled",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-controlled.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/resizable-demo-with-handle.json b/apps/v4/public/r/styles/new-york-v4/resizable-demo-with-handle.json
new file mode 100644
index 00000000000..5a98195c89b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/resizable-demo-with-handle.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo-with-handle",
+  "type": "registry:example",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/resizable-demo-with-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle withHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/resizable-demo.json b/apps/v4/public/r/styles/new-york-v4/resizable-demo.json
new file mode 100644
index 00000000000..6b72a52f793
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/resizable-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/resizable-demo.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/resizable-handle.json b/apps/v4/public/r/styles/new-york-v4/resizable-handle.json
new file mode 100644
index 00000000000..7932b90e1b9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/resizable-handle.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-handle",
+  "type": "registry:example",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/resizable-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/resizable-vertical.json b/apps/v4/public/r/styles/new-york-v4/resizable-vertical.json
new file mode 100644
index 00000000000..9e543d0b32e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/resizable-vertical.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-vertical",
+  "type": "registry:example",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/resizable-vertical.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"vertical\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Header</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/resizable.json b/apps/v4/public/r/styles/new-york-v4/resizable.json
new file mode 100644
index 00000000000..2a878090bee
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/resizable.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable",
+  "type": "registry:ui",
+  "dependencies": [
+    "react-resizable-panels"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/resizable.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/scroll-area-demo.json b/apps/v4/public/r/styles/new-york-v4/scroll-area-demo.json
new file mode 100644
index 00000000000..12407200edf
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/scroll-area-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/new-york-v4/ui/scroll-area\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport default function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n        {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/scroll-area-horizontal-demo.json b/apps/v4/public/r/styles/new-york-v4/scroll-area-horizontal-demo.json
new file mode 100644
index 00000000000..4d81c2090b7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/scroll-area-horizontal-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-horizontal-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { ScrollArea, ScrollBar } from \"@/registry/new-york-v4/ui/scroll-area\"\n\nexport interface Artwork {\n  artist: string\n  art: string\n}\n\nexport const works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n  return (\n    <ScrollArea className=\"w-96 rounded-md border whitespace-nowrap\">\n      <div className=\"flex w-max space-x-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <Image\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n              Photo by{\" \"}\n              <span className=\"text-foreground font-semibold\">\n                {artwork.artist}\n              </span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/scroll-area.json b/apps/v4/public/r/styles/new-york-v4/scroll-area.json
new file mode 100644
index 00000000000..15e1d8dc524
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/scroll-area.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-scroll-area"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/scroll-area.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none\",\n        orientation === \"vertical\" &&\n          \"h-full w-2.5 border-l border-l-transparent\",\n        orientation === \"horizontal\" &&\n          \"h-2.5 flex-col border-t border-t-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/select-demo.json b/apps/v4/public/r/styles/new-york-v4/select-demo.json
new file mode 100644
index 00000000000..6daf5ebb1e3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/select-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/select-form.json b/apps/v4/public/r/styles/new-york-v4/select-form.json
new file mode 100644
index 00000000000..7853e03aac5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/select-form.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/select-form.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst FormSchema = z.object({\n  email: z\n    .string({\n      required_error: \"Please select an email to display.\",\n    })\n    .email(),\n})\n\nexport default function SelectForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <FormControl>\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a verified email to display\" />\n                  </SelectTrigger>\n                </FormControl>\n                <SelectContent>\n                  <SelectItem value=\"m@example.com\">m@example.com</SelectItem>\n                  <SelectItem value=\"m@google.com\">m@google.com</SelectItem>\n                  <SelectItem value=\"m@support.com\">m@support.com</SelectItem>\n                </SelectContent>\n              </Select>\n              <FormDescription>\n                You can manage email addresses in your{\" \"}\n                <Link href=\"/examples/forms\">email settings</Link>.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/select-scrollable.json b/apps/v4/public/r/styles/new-york-v4/select-scrollable.json
new file mode 100644
index 00000000000..ca789c68dda
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/select-scrollable.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-scrollable",
+  "type": "registry:example",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/select-scrollable.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function SelectScrollable() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[280px]\">\n        <SelectValue placeholder=\"Select a timezone\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>North America</SelectLabel>\n          <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n          <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n          <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n          <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n          <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n          <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Europe & Africa</SelectLabel>\n          <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n          <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n          <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n          <SelectItem value=\"west\">\n            Western European Summer Time (WEST)\n          </SelectItem>\n          <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n          <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Asia</SelectLabel>\n          <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n          <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n          <SelectItem value=\"cst_china\">China Standard Time (CST)</SelectItem>\n          <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n          <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n          <SelectItem value=\"ist_indonesia\">\n            Indonesia Central Standard Time (WITA)\n          </SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Australia & Pacific</SelectLabel>\n          <SelectItem value=\"awst\">\n            Australian Western Standard Time (AWST)\n          </SelectItem>\n          <SelectItem value=\"acst\">\n            Australian Central Standard Time (ACST)\n          </SelectItem>\n          <SelectItem value=\"aest\">\n            Australian Eastern Standard Time (AEST)\n          </SelectItem>\n          <SelectItem value=\"nzst\">New Zealand Standard Time (NZST)</SelectItem>\n          <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>South America</SelectLabel>\n          <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n          <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n          <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n          <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/select.json b/apps/v4/public/r/styles/new-york-v4/select.json
new file mode 100644
index 00000000000..61fe928daad
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/select.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/select.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/separator-demo.json b/apps/v4/public/r/styles/new-york-v4/separator-demo.json
new file mode 100644
index 00000000000..46d602553a3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/separator-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/separator-demo.tsx",
+      "content": "import { Separator } from \"@/registry/new-york-v4/ui/separator\"\n\nexport default function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm leading-none font-medium\">Radix Primitives</h4>\n        <p className=\"text-muted-foreground text-sm\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/separator.json b/apps/v4/public/r/styles/new-york-v4/separator.json
new file mode 100644
index 00000000000..142446b9d0e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/separator.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-separator"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/separator.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sheet-demo.json b/apps/v4/public/r/styles/new-york-v4/sheet-demo.json
new file mode 100644
index 00000000000..197f9c2a78c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sheet-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/sheet-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york-v4/ui/sheet\"\n\nexport default function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid flex-1 auto-rows-min gap-6 px-4\">\n          <div className=\"grid gap-3\">\n            <Label htmlFor=\"sheet-demo-name\">Name</Label>\n            <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n          </div>\n          <div className=\"grid gap-3\">\n            <Label htmlFor=\"sheet-demo-username\">Username</Label>\n            <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <Button type=\"submit\">Save changes</Button>\n          <SheetClose asChild>\n            <Button variant=\"outline\">Close</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sheet-side.json b/apps/v4/public/r/styles/new-york-v4/sheet-side.json
new file mode 100644
index 00000000000..54ccafc68cc
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sheet-side.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-side",
+  "type": "registry:example",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/sheet-side.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york-v4/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger asChild>\n            <Button variant=\"outline\">{side}</Button>\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you're done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose asChild>\n                <Button type=\"submit\">Save changes</Button>\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sheet.json b/apps/v4/public/r/styles/new-york-v4/sheet.json
new file mode 100644
index 00000000000..f65d26a3058
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sheet.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/sheet.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n          <XIcon className=\"size-4\" />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-01-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-01-dark.png
new file mode 100644
index 00000000000..5100697781c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-01-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-01-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-01-light.png
new file mode 100644
index 00000000000..c5ff78ae9d3
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-01-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-01.json b/apps/v4/public/r/styles/new-york-v4/sidebar-01.json
new file mode 100644
index 00000000000..aac96cb9529
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-01.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-01",
+  "type": "registry:block",
+  "description": "A simple sidebar with navigation grouped by section.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-01/components/version-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        {/* We create a SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <SidebarGroup key={item.title}>\n            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {item.items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild isActive={item.isActive}>\n                      <a href={item.url}>{item.title}</a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-01/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-02-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-02-dark.png
new file mode 100644
index 00000000000..1372d0985bd
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-02-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-02-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-02-light.png
new file mode 100644
index 00000000000..7d6896c28cc
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-02-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-02.json b/apps/v4/public/r/styles/new-york-v4/sidebar-02.json
new file mode 100644
index 00000000000..05dbf8bde7b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-02.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-02",
+  "type": "registry:block",
+  "description": "A sidebar with collapsible sections.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-02/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-03-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-03-dark.png
new file mode 100644
index 00000000000..b76119dcc5a
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-03-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-03-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-03-light.png
new file mode 100644
index 00000000000..9f90424f7d9
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-03-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-03.json b/apps/v4/public/r/styles/new-york-v4/sidebar-03.json
new file mode 100644
index 00000000000..516dd720a56
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-03.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-03",
+  "type": "registry:block",
+  "description": "A sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-04-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-04-dark.png
new file mode 100644
index 00000000000..a4eab4ac94a
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-04-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-04-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-04-light.png
new file mode 100644
index 00000000000..34d86af306b
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-04-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-04.json b/apps/v4/public/r/styles/new-york-v4/sidebar-04.json
new file mode 100644
index 00000000000..ec4e3876bb8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-04.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-04",
+  "type": "registry:block",
+  "description": "A floating sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-05-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-05-dark.png
new file mode 100644
index 00000000000..3a22cc74204
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-05-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-05-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-05-light.png
new file mode 100644
index 00000000000..2a5b9be5f31
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-05-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-05.json b/apps/v4/public/r/styles/new-york-v4/sidebar-05.json
new file mode 100644
index 00000000000..5d8620f9882
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-05.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-05",
+  "type": "registry:block",
+  "description": "A sidebar with collapsible submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                      <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-05/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-06-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-06-dark.png
new file mode 100644
index 00000000000..df9e5c0e4d1
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-06-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-06-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-06-light.png
new file mode 100644
index 00000000000..bc5aa641e35
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-06-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-06.json b/apps/v4/public/r/styles/new-york-v4/sidebar-06.json
new file mode 100644
index 00000000000..bae44a0cdc0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-06.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-06",
+  "type": "registry:block",
+  "description": "A sidebar with submenus as dropdowns.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { MoreHorizontal, type LucideIcon } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup>\n      <SidebarMenu>\n        {items.map((item) => (\n          <DropdownMenu key={item.title}>\n            <SidebarMenuItem>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  {item.title} <MoreHorizontal className=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              {item.items?.length ? (\n                <DropdownMenuContent\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align={isMobile ? \"end\" : \"start\"}\n                  className=\"min-w-56 rounded-lg\"\n                >\n                  {item.items.map((item) => (\n                    <DropdownMenuItem asChild key={item.title}>\n                      <a href={item.url}>{item.title}</a>\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              ) : null}\n            </SidebarMenuItem>\n          </DropdownMenu>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { SidebarInput } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button\n              className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\"\n              size=\"sm\"\n            >\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-07-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-07-dark.png
new file mode 100644
index 00000000000..13da5e56934
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-07-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-07-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-07-light.png
new file mode 100644
index 00000000000..5cdd9d3f4fb
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-07-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-07.json b/apps/v4/public/r/styles/new-york-v4/sidebar-07.json
new file mode 100644
index 00000000000..46a4961b0a7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-07.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-07",
+  "type": "registry:block",
+  "description": "A sidebar that collapses to icons.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york-v4/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  <team.logo className=\"size-3.5 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-08-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-08-dark.png
new file mode 100644
index 00000000000..86cd9c1396f
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-08-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-08-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-08-light.png
new file mode 100644
index 00000000000..8492135e7bb
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-08-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-08.json b/apps/v4/public/r/styles/new-york-v4/sidebar-08.json
new file mode 100644
index 00000000000..823a747474f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-08.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-08",
+  "type": "registry:block",
+  "description": "An inset sidebar with secondary navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-09-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-09-dark.png
new file mode 100644
index 00000000000..91deaefc071
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-09-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-09-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-09-light.png
new file mode 100644
index 00000000000..1619c660efe
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-09-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-09.json b/apps/v4/public/r/styles/new-york-v4/sidebar-09.json
new file mode 100644
index 00000000000..7554476eafd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-09.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-09",
+  "type": "registry:block",
+  "description": "Collapsible nested sidebars.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\n\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-10-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-10-dark.png
new file mode 100644
index 00000000000..a20b5fadc60
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-10-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-10-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-10-light.png
new file mode 100644
index 00000000000..5cac5da365f
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-10-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-10.json b/apps/v4/public/r/styles/new-york-v4/sidebar-10.json
new file mode 100644
index 00000000000..54163e38d1d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-10.json
@@ -0,0 +1,61 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-10",
+  "type": "registry:block",
+  "description": "A sidebar in a popover.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-10/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: Settings2,\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: Link,\n    },\n    {\n      label: \"Duplicate\",\n      icon: Copy,\n    },\n    {\n      label: \"Move to\",\n      icon: CornerUpRight,\n    },\n    {\n      label: \"Move to Trash\",\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: CornerUpLeft,\n    },\n    {\n      label: \"View analytics\",\n      icon: LineChart,\n    },\n    {\n      label: \"Version History\",\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: \"Show delete pages\",\n      icon: Trash,\n    },\n    {\n      label: \"Notifications\",\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: ArrowUp,\n    },\n    {\n      label: \"Export\",\n      icon: ArrowDown,\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"data-[state=open]:bg-accent h-7 w-7\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-11-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-11-dark.png
new file mode 100644
index 00000000000..818c4e165be
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-11-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-11-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-11-light.png
new file mode 100644
index 00000000000..9e26a3c2e83
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-11-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-11.json b/apps/v4/public/r/styles/new-york-v4/sidebar-11.json
new file mode 100644
index 00000000000..ed301dff865
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-11.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-11",
+  "type": "registry:block",
+  "description": "A sidebar with a collapsible file tree.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <File />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <File />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton>\n            <ChevronRight className=\"transition-transform\" />\n            <Folder />\n            {name}\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-12-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-12-dark.png
new file mode 100644
index 00000000000..9ffab436557
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-12-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-12-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-12-light.png
new file mode 100644
index 00000000000..a84d1bee91c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-12-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-12.json b/apps/v4/public/r/styles/new-york-v4/sidebar-12.json
new file mode 100644
index 00000000000..270b4aff1bc
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-12.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-12",
+  "type": "registry:block",
+  "description": "A sidebar with a calendar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york-v4/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york-v4/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-13-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-13-dark.png
new file mode 100644
index 00000000000..ea11e3fee8f
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-13-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-13-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-13-light.png
new file mode 100644
index 00000000000..6fba44eb93a
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-13-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-13.json b/apps/v4/public/r/styles/new-york-v4/sidebar-13.json
new file mode 100644
index 00000000000..3ffc740c57c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-13.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-13",
+  "type": "registry:block",
+  "description": "A sidebar in a dialog.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"@/registry/new-york-v4/blocks/sidebar-13/components/settings-dialog\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-14-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-14-dark.png
new file mode 100644
index 00000000000..fea4f9d9480
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-14-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-14-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-14-light.png
new file mode 100644
index 00000000000..edf7500721a
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-14-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-14.json b/apps/v4/public/r/styles/new-york-v4/sidebar-14.json
new file mode 100644
index 00000000000..9e81550049c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-14.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-14",
+  "type": "registry:block",
+  "description": "A sidebar on the right.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-15-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-15-dark.png
new file mode 100644
index 00000000000..0a8522cef9d
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-15-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-15-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-15-light.png
new file mode 100644
index 00000000000..428f99cfe22
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-15-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-15.json b/apps/v4/public/r/styles/new-york-v4/sidebar-15.json
new file mode 100644
index 00000000000..88921f299f0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-15.json
@@ -0,0 +1,78 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-15",
+  "type": "registry:block",
+  "description": "A left and right sidebar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-15/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function SidebarLeft({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york-v4/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york-v4/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-16-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-16-dark.png
new file mode 100644
index 00000000000..fa8a3ecd22f
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-16-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-16-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-16-light.png
new file mode 100644
index 00000000000..f5bb33f4580
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-16-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-16.json b/apps/v4/public/r/styles/new-york-v4/sidebar-16.json
new file mode 100644
index 00000000000..f1c218419b7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-16.json
@@ -0,0 +1,63 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-16",
+  "type": "registry:block",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/new-york-v4/blocks/sidebar-16/components/site-header\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { SidebarInput } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <div className=\"relative\">\n        <Label htmlFor=\"search\" className=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Type to search...\"\n          className=\"h-8 pl-7\"\n        />\n        <Search className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\" />\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport { useSidebar } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <SidebarIcon />\n        </Button>\n        <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-controlled-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-controlled-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-controlled-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-controlled-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-controlled-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-controlled-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-controlled.json b/apps/v4/public/r/styles/new-york-v4/sidebar-controlled.json
new file mode 100644
index 00000000000..f59c0b6cf88
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-controlled.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  FrameIcon,\n  LifeBuoyIcon,\n  MapIcon,\n  PanelLeftCloseIcon,\n  PanelLeftOpenIcon,\n  PieChartIcon,\n  SendIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: FrameIcon,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChartIcon,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: MapIcon,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoyIcon,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: SendIcon,\n  },\n]\n\nexport default function AppSidebar() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <SidebarProvider open={open} onOpenChange={setOpen}>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-12 items-center justify-between px-4\">\n          <Button\n            onClick={() => setOpen((open) => !open)}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            {open ? <PanelLeftCloseIcon /> : <PanelLeftOpenIcon />}\n            <span>{open ? \"Close\" : \"Open\"} Sidebar</span>\n          </Button>\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-demo-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-demo-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-demo-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-demo-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-demo-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-demo-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-demo.json b/apps/v4/public/r/styles/new-york-v4/sidebar-demo.json
new file mode 100644
index 00000000000..55f0988b8e9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-demo.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-demo.tsx",
+      "content": "\"use client\"\n\nimport {\n  CalendarIcon,\n  HomeIcon,\n  InboxIcon,\n  SearchIcon,\n  SettingsIcon,\n} from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// Menu items.\nconst items = [\n  {\n    title: \"Home\",\n    url: \"#\",\n    icon: HomeIcon,\n  },\n  {\n    title: \"Inbox\",\n    url: \"#\",\n    icon: InboxIcon,\n  },\n  {\n    title: \"Calendar\",\n    url: \"#\",\n    icon: CalendarIcon,\n  },\n  {\n    title: \"Search\",\n    url: \"#\",\n    icon: SearchIcon,\n  },\n  {\n    title: \"Settings\",\n    url: \"#\",\n    icon: SettingsIcon,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Application</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-12 items-center justify-between px-4\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-footer-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-footer-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-footer-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-footer-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-footer-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-footer-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-footer.json b/apps/v4/public/r/styles/new-york-v4/sidebar-footer.json
new file mode 100644
index 00000000000..27fa8d69359
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-footer.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-footer.tsx",
+      "content": "\"use client\"\n\nimport { ChevronUpIcon } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader />\n        <SidebarContent />\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Username\n                    <ChevronUpIcon className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  side=\"top\"\n                  className=\"w-(--radix-popper-anchor-width)\"\n                >\n                  <DropdownMenuItem>\n                    <span>Account</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Billing</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Sign out</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-12 items-center justify-between px-4\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-group-action-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-group-action-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-group-action-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-group-action-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-group-action-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-group-action-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-group-action.json b/apps/v4/public/r/styles/new-york-v4/sidebar-group-action.json
new file mode 100644
index 00000000000..d717587d61a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-group-action.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-group-action.tsx",
+      "content": "\"use client\"\n\nimport { FrameIcon, MapIcon, PieChartIcon, PlusIcon } from \"lucide-react\"\nimport { toast, Toaster } from \"sonner\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Toaster\n        position=\"bottom-left\"\n        toastOptions={{\n          className: \"ml-[160px]\",\n        }}\n      />\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupAction\n              title=\"Add Project\"\n              onClick={() => toast(\"You clicked the group action!\")}\n            >\n              <PlusIcon /> <span className=\"sr-only\">Add Project</span>\n            </SidebarGroupAction>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <FrameIcon />\n                      <span>Design Engineering</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <PieChartIcon />\n                      <span>Sales & Marketing</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <MapIcon />\n                      <span>Travel</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible.json b/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible.json
new file mode 100644
index 00000000000..ab70fb0f1e8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-group-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon, LifeBuoyIcon, SendIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <Collapsible defaultOpen className=\"group/collapsible\">\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  Help\n                  <ChevronDownIcon className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <LifeBuoyIcon />\n                        Support\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <SendIcon />\n                        Feedback\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-group-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-group-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-group-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-group-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-group-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-group-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-group.json b/apps/v4/public/r/styles/new-york-v4/sidebar-group.json
new file mode 100644
index 00000000000..5e42e32aacb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-group.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-group.tsx",
+      "content": "\"use client\"\n\nimport { LifeBuoyIcon, SendIcon } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Help</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <LifeBuoyIcon />\n                    Support\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <SendIcon />\n                    Feedback\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-header-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-header-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-header-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-header-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-header-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-header-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-header.json b/apps/v4/public/r/styles/new-york-v4/sidebar-header.json
new file mode 100644
index 00000000000..c3d589f9fce
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-header.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-header.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Select Workspace\n                    <ChevronDownIcon className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent className=\"w-(--radix-popper-anchor-width)\">\n                  <DropdownMenuItem>\n                    <span>Acme Inc</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Acme Corp.</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-12 items-center justify-between px-4\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-action-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-action-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-action-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-action-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-action-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-action-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-action.json b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-action.json
new file mode 100644
index 00000000000..3152f2fd5fd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-action.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-menu-action.tsx",
+      "content": "\"use client\"\n\nimport {\n  FrameIcon,\n  LifeBuoyIcon,\n  MapIcon,\n  MoreHorizontalIcon,\n  PieChartIcon,\n  SendIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: FrameIcon,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChartIcon,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: MapIcon,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoyIcon,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: SendIcon,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction>\n                          <MoreHorizontalIcon />\n                          <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuItem>\n                          <span>Edit Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <span>Delete Project</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-badge-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-badge-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-badge-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-badge-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-badge-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-badge-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-badge.json b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-badge.json
new file mode 100644
index 00000000000..d5017633b77
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-badge.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-menu-badge.tsx",
+      "content": "\"use client\"\n\nimport {\n  FrameIcon,\n  LifeBuoyIcon,\n  MapIcon,\n  PieChartIcon,\n  SendIcon,\n} from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: FrameIcon,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChartIcon,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: MapIcon,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoyIcon,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: SendIcon,\n    badge: \"8\",\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-collapsible-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-collapsible-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-collapsible-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-collapsible-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-collapsible-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-collapsible-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-collapsible.json b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-collapsible.json
new file mode 100644
index 00000000000..e9d07dcb670
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-collapsible.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-menu-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRightIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <Collapsible\n                    key={index}\n                    className=\"group/collapsible\"\n                    defaultOpen={index === 0}\n                  >\n                    <SidebarMenuItem>\n                      <CollapsibleTrigger asChild>\n                        <SidebarMenuButton>\n                          <span>{item.title}</span>\n                          <ChevronRightIcon className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem, subIndex) => (\n                            <SidebarMenuSubItem key={subIndex}>\n                              <SidebarMenuSubButton asChild>\n                                <a href={subItem.url}>\n                                  <span>{subItem.title}</span>\n                                </a>\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </SidebarMenuItem>\n                  </Collapsible>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-sub-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-sub-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-sub-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-sub-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-sub-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-sub-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu-sub.json b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-sub.json
new file mode 100644
index 00000000000..2523f4d5d55
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-menu-sub.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-menu-sub.tsx",
+      "content": "\"use client\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <SidebarMenuItem key={index}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuSub>\n                      {item.items.map((subItem, subIndex) => (\n                        <SidebarMenuSubItem key={subIndex}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-menu.json b/apps/v4/public/r/styles/new-york-v4/sidebar-menu.json
new file mode 100644
index 00000000000..0369474ecae
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-menu.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-menu.tsx",
+      "content": "\"use client\"\n\nimport {\n  FrameIcon,\n  LifeBuoyIcon,\n  MapIcon,\n  PieChartIcon,\n  SendIcon,\n} from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: FrameIcon,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChartIcon,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: MapIcon,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoyIcon,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: SendIcon,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-rsc-dark.png b/apps/v4/public/r/styles/new-york-v4/sidebar-rsc-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-rsc-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-rsc-light.png b/apps/v4/public/r/styles/new-york-v4/sidebar-rsc-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/v4/public/r/styles/new-york-v4/sidebar-rsc-light.png differ
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-rsc.json b/apps/v4/public/r/styles/new-york-v4/sidebar-rsc.json
new file mode 100644
index 00000000000..e6e437fe40b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-rsc.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-rsc.tsx",
+      "content": "import * as React from \"react\"\nimport {\n  FrameIcon,\n  LifeBuoyIcon,\n  MapIcon,\n  PieChartIcon,\n  SendIcon,\n} from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: FrameIcon,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChartIcon,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: MapIcon,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoyIcon,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: SendIcon,\n    badge: \"8\",\n  },\n]\n\n// Dummy fetch function\nasync function fetchProjects() {\n  await new Promise((resolve) => setTimeout(resolve, 3000))\n  return projects\n}\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <React.Suspense fallback={<NavProjectsSkeleton />}>\n                <NavProjects />\n              </React.Suspense>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n\nfunction NavProjectsSkeleton() {\n  return (\n    <SidebarMenu>\n      {Array.from({ length: 5 }).map((_, index) => (\n        <SidebarMenuItem key={index}>\n          <SidebarMenuSkeleton showIcon />\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nasync function NavProjects() {\n  const projects = await fetchProjects()\n\n  return (\n    <SidebarMenu>\n      {projects.map((project) => (\n        <SidebarMenuItem key={project.name}>\n          <SidebarMenuButton asChild>\n            <a href={project.url}>\n              <project.icon />\n              <span>{project.name}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar.json b/apps/v4/public/r/styles/new-york-v4/sidebar.json
new file mode 100644
index 00000000000..9b23f4dabb1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar.json
@@ -0,0 +1,68 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-slot",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "separator",
+    "sheet",
+    "tooltip",
+    "input",
+    "use-mobile",
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, VariantProps } from \"class-variance-authority\"\nimport { PanelLeftIcon } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/new-york-v4/ui/sheet\"\nimport { Skeleton } from \"@/registry/new-york-v4/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york-v4/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          data-slot=\"sidebar-wrapper\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH,\n              \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn(\n            \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"size-7\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col\",\n        \"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "sidebar": {
+              "DEFAULT": "hsl(var(--sidebar-background))",
+              "foreground": "hsl(var(--sidebar-foreground))",
+              "primary": "hsl(var(--sidebar-primary))",
+              "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+              "accent": "hsl(var(--sidebar-accent))",
+              "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+              "border": "hsl(var(--sidebar-border))",
+              "ring": "hsl(var(--sidebar-ring))"
+            }
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "sidebar-background": "0 0% 98%",
+      "sidebar-foreground": "240 5.3% 26.1%",
+      "sidebar-primary": "240 5.9% 10%",
+      "sidebar-primary-foreground": "0 0% 98%",
+      "sidebar-accent": "240 4.8% 95.9%",
+      "sidebar-accent-foreground": "240 5.9% 10%",
+      "sidebar-border": "220 13% 91%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    },
+    "dark": {
+      "sidebar-background": "240 5.9% 10%",
+      "sidebar-foreground": "240 4.8% 95.9%",
+      "sidebar-primary": "224.3 76.3% 48%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "240 3.7% 15.9%",
+      "sidebar-accent-foreground": "240 4.8% 95.9%",
+      "sidebar-border": "240 3.7% 15.9%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/skeleton-card.json b/apps/v4/public/r/styles/new-york-v4/skeleton-card.json
new file mode 100644
index 00000000000..2a8d4c3ecb8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/skeleton-card.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-card",
+  "type": "registry:example",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/skeleton-card.tsx",
+      "content": "import { Skeleton } from \"@/registry/new-york-v4/ui/skeleton\"\n\nexport default function SkeletonCard() {\n  return (\n    <div className=\"flex flex-col space-y-3\">\n      <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/skeleton-demo.json b/apps/v4/public/r/styles/new-york-v4/skeleton-demo.json
new file mode 100644
index 00000000000..0ba510b319b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/skeleton-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/registry/new-york-v4/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/skeleton.json b/apps/v4/public/r/styles/new-york-v4/skeleton.json
new file mode 100644
index 00000000000..1366dfca1de
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/skeleton.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/skeleton.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-accent animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/slider-demo.json b/apps/v4/public/r/styles/new-york-v4/slider-demo.json
new file mode 100644
index 00000000000..8a3c88778ce
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/slider-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "slider"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/new-york-v4/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/slider.json b/apps/v4/public/r/styles/new-york-v4/slider.json
new file mode 100644
index 00000000000..8e7f7d715ed
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/slider.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-slider"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/slider.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          \"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\"\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn(\n            \"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n          )}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sonner-demo.json b/apps/v4/public/r/styles/new-york-v4/sonner-demo.json
new file mode 100644
index 00000000000..247ab8b6f15
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sonner-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/sonner.json b/apps/v4/public/r/styles/new-york-v4/sonner.json
new file mode 100644
index 00000000000..d32332493fa
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/sonner.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner",
+  "type": "registry:ui",
+  "dependencies": [
+    "sonner",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/sonner.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, ToasterProps } from \"sonner\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/style.json b/apps/v4/public/r/styles/new-york-v4/style.json
new file mode 100644
index 00000000000..4158000a12c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/style.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "type": "registry:style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "devDependencies": [
+    "tw-animate-css"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {}
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/switch-demo.json b/apps/v4/public/r/styles/new-york-v4/switch-demo.json
new file mode 100644
index 00000000000..a2acb2d16db
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/switch-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/switch-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nexport default function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/switch-form.json b/apps/v4/public/r/styles/new-york-v4/switch-form.json
new file mode 100644
index 00000000000..662fd75d1aa
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/switch-form.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "switch",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/switch-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/new-york-v4/ui/form\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst FormSchema = z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      security_emails: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full space-y-6\">\n        <div>\n          <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n          <div className=\"space-y-4\">\n            <FormField\n              control={form.control}\n              name=\"marketing_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel>Marketing emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about new products, features, and more.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n            <FormField\n              control={form.control}\n              name=\"security_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel>Security emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about your account security.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                      disabled\n                      aria-readonly\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n          </div>\n        </div>\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/switch.json b/apps/v4/public/r/styles/new-york-v4/switch.json
new file mode 100644
index 00000000000..5ff1dfb8355
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/switch.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-switch"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/switch.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Switch({\n  className,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/table-demo.json b/apps/v4/public/r/styles/new-york-v4/table-demo.json
new file mode 100644
index 00000000000..c8aa2136a39
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/table-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "table"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/table-demo.tsx",
+      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/table.json b/apps/v4/public/r/styles/new-york-v4/table.json
new file mode 100644
index 00000000000..b38cef79f2c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/table.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/tabs-demo.json b/apps/v4/public/r/styles/new-york-v4/tabs-demo.json
new file mode 100644
index 00000000000..a098a4cfec6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/tabs-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "tabs"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/tabs-demo.tsx",
+      "content": "import { AppWindowIcon, CodeIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york-v4/ui/tabs\"\n\nexport default function TabsDemo() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-6\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n        </TabsList>\n        <TabsContent value=\"account\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Account</CardTitle>\n              <CardDescription>\n                Make changes to your account here. Click save when you&apos;re\n                done.\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-6\">\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-name\">Name</Label>\n                <Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </div>\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-username\">Username</Label>\n                <Input id=\"tabs-demo-username\" defaultValue=\"@peduarte\" />\n              </div>\n            </CardContent>\n            <CardFooter>\n              <Button>Save changes</Button>\n            </CardFooter>\n          </Card>\n        </TabsContent>\n        <TabsContent value=\"password\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Password</CardTitle>\n              <CardDescription>\n                Change your password here. After saving, you&apos;ll be logged\n                out.\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-6\">\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-current\">Current password</Label>\n                <Input id=\"tabs-demo-current\" type=\"password\" />\n              </div>\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-new\">New password</Label>\n                <Input id=\"tabs-demo-new\" type=\"password\" />\n              </div>\n            </CardContent>\n            <CardFooter>\n              <Button>Save password</Button>\n            </CardFooter>\n          </Card>\n        </TabsContent>\n      </Tabs>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/tabs.json b/apps/v4/public/r/styles/new-york-v4/tabs.json
new file mode 100644
index 00000000000..09a67e54187
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/tabs.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-tabs"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/tabs.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsList({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn(\n        \"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/textarea-demo.json b/apps/v4/public/r/styles/new-york-v4/textarea-demo.json
new file mode 100644
index 00000000000..67096325ebb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/textarea-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/textarea-disabled.json b/apps/v4/public/r/styles/new-york-v4/textarea-disabled.json
new file mode 100644
index 00000000000..c9bbb6e735b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/textarea-disabled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-disabled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-disabled.tsx",
+      "content": "import { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaDisabled() {\n  return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/textarea-form.json b/apps/v4/public/r/styles/new-york-v4/textarea-form.json
new file mode 100644
index 00000000000..b832247edc7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/textarea-form.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nconst FormSchema = z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: \"Bio must be at least 10 characters.\",\n    })\n    .max(160, {\n      message: \"Bio must not be longer than 30 characters.\",\n    }),\n})\n\nexport default function TextareaForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"bio\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Bio</FormLabel>\n              <FormControl>\n                <Textarea\n                  placeholder=\"Tell us a little bit about yourself\"\n                  className=\"resize-none\"\n                  {...field}\n                />\n              </FormControl>\n              <FormDescription>\n                You can <span>@mention</span> other users and organizations.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/textarea-with-button.json b/apps/v4/public/r/styles/new-york-v4/textarea-with-button.json
new file mode 100644
index 00000000000..24b960cb356
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/textarea-with-button.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-button",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-with-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaWithButton() {\n  return (\n    <div className=\"grid w-full gap-2\">\n      <Textarea placeholder=\"Type your message here.\" />\n      <Button>Send message</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/textarea-with-label.json b/apps/v4/public/r/styles/new-york-v4/textarea-with-label.json
new file mode 100644
index 00000000000..a75ff457f31
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/textarea-with-label.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-label",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-with-label.tsx",
+      "content": "import { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaWithLabel() {\n  return (\n    <div className=\"grid w-full gap-3\">\n      <Label htmlFor=\"message\">Your message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/textarea-with-text.json b/apps/v4/public/r/styles/new-york-v4/textarea-with-text.json
new file mode 100644
index 00000000000..915252f6033
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/textarea-with-text.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-text",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-with-text.tsx",
+      "content": "import { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaWithText() {\n  return (\n    <div className=\"grid w-full gap-3\">\n      <Label htmlFor=\"message-2\">Your Message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n      <p className=\"text-muted-foreground text-sm\">\n        Your message will be copied to the support team.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/textarea.json b/apps/v4/public/r/styles/new-york-v4/textarea.json
new file mode 100644
index 00000000000..fb648e5c81a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/textarea.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/textarea.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/theme-gray.json b/apps/v4/public/r/styles/new-york-v4/theme-gray.json
new file mode 100644
index 00000000000..c3f9d2c8a7d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/theme-gray.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-gray",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.13 0.028 261.692)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.13 0.028 261.692)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.13 0.028 261.692)",
+      "primary": "oklch(0.21 0.034 264.665)",
+      "primary-foreground": "oklch(0.985 0.002 247.839)",
+      "secondary": "oklch(0.967 0.003 264.542)",
+      "secondary-foreground": "oklch(0.21 0.034 264.665)",
+      "muted": "oklch(0.967 0.003 264.542)",
+      "muted-foreground": "oklch(0.551 0.027 264.364)",
+      "accent": "oklch(0.967 0.003 264.542)",
+      "accent-foreground": "oklch(0.21 0.034 264.665)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.928 0.006 264.531)",
+      "input": "oklch(0.928 0.006 264.531)",
+      "ring": "oklch(0.707 0.022 261.325)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0.002 247.839)",
+      "sidebar-foreground": "oklch(0.13 0.028 261.692)",
+      "sidebar-primary": "oklch(0.21 0.034 264.665)",
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-accent": "oklch(0.967 0.003 264.542)",
+      "sidebar-accent-foreground": "oklch(0.21 0.034 264.665)",
+      "sidebar-border": "oklch(0.928 0.006 264.531)",
+      "sidebar-ring": "oklch(0.707 0.022 261.325)"
+    },
+    "dark": {
+      "background": "oklch(0.13 0.028 261.692)",
+      "foreground": "oklch(0.985 0.002 247.839)",
+      "card": "oklch(0.21 0.034 264.665)",
+      "card-foreground": "oklch(0.985 0.002 247.839)",
+      "popover": "oklch(0.21 0.034 264.665)",
+      "popover-foreground": "oklch(0.985 0.002 247.839)",
+      "primary": "oklch(0.928 0.006 264.531)",
+      "primary-foreground": "oklch(0.21 0.034 264.665)",
+      "secondary": "oklch(0.278 0.033 256.848)",
+      "secondary-foreground": "oklch(0.985 0.002 247.839)",
+      "muted": "oklch(0.278 0.033 256.848)",
+      "muted-foreground": "oklch(0.707 0.022 261.325)",
+      "accent": "oklch(0.278 0.033 256.848)",
+      "accent-foreground": "oklch(0.985 0.002 247.839)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.551 0.027 264.364)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.21 0.034 264.665)",
+      "sidebar-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-accent": "oklch(0.278 0.033 256.848)",
+      "sidebar-accent-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.551 0.027 264.364)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/theme-neutral.json b/apps/v4/public/r/styles/new-york-v4/theme-neutral.json
new file mode 100644
index 00000000000..6c7ecbe8502
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/theme-neutral.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-neutral",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.145 0 0)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.145 0 0)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.145 0 0)",
+      "primary": "oklch(0.205 0 0)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.97 0 0)",
+      "secondary-foreground": "oklch(0.205 0 0)",
+      "muted": "oklch(0.97 0 0)",
+      "muted-foreground": "oklch(0.556 0 0)",
+      "accent": "oklch(0.97 0 0)",
+      "accent-foreground": "oklch(0.205 0 0)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.922 0 0)",
+      "input": "oklch(0.922 0 0)",
+      "ring": "oklch(0.708 0 0)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.145 0 0)",
+      "sidebar-primary": "oklch(0.205 0 0)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.97 0 0)",
+      "sidebar-accent-foreground": "oklch(0.205 0 0)",
+      "sidebar-border": "oklch(0.922 0 0)",
+      "sidebar-ring": "oklch(0.708 0 0)"
+    },
+    "dark": {
+      "background": "oklch(0.145 0 0)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.205 0 0)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.205 0 0)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.922 0 0)",
+      "primary-foreground": "oklch(0.205 0 0)",
+      "secondary": "oklch(0.269 0 0)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.269 0 0)",
+      "muted-foreground": "oklch(0.708 0 0)",
+      "accent": "oklch(0.269 0 0)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.556 0 0)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.205 0 0)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.269 0 0)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.556 0 0)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/theme-slate.json b/apps/v4/public/r/styles/new-york-v4/theme-slate.json
new file mode 100644
index 00000000000..1eaa08d050f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/theme-slate.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-slate",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.129 0.042 264.695)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.129 0.042 264.695)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.129 0.042 264.695)",
+      "primary": "oklch(0.208 0.042 265.755)",
+      "primary-foreground": "oklch(0.984 0.003 247.858)",
+      "secondary": "oklch(0.968 0.007 247.896)",
+      "secondary-foreground": "oklch(0.208 0.042 265.755)",
+      "muted": "oklch(0.968 0.007 247.896)",
+      "muted-foreground": "oklch(0.554 0.046 257.417)",
+      "accent": "oklch(0.968 0.007 247.896)",
+      "accent-foreground": "oklch(0.208 0.042 265.755)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.929 0.013 255.508)",
+      "input": "oklch(0.929 0.013 255.508)",
+      "ring": "oklch(0.704 0.04 256.788)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.984 0.003 247.858)",
+      "sidebar-foreground": "oklch(0.129 0.042 264.695)",
+      "sidebar-primary": "oklch(0.208 0.042 265.755)",
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-accent": "oklch(0.968 0.007 247.896)",
+      "sidebar-accent-foreground": "oklch(0.208 0.042 265.755)",
+      "sidebar-border": "oklch(0.929 0.013 255.508)",
+      "sidebar-ring": "oklch(0.704 0.04 256.788)"
+    },
+    "dark": {
+      "background": "oklch(0.129 0.042 264.695)",
+      "foreground": "oklch(0.984 0.003 247.858)",
+      "card": "oklch(0.208 0.042 265.755)",
+      "card-foreground": "oklch(0.984 0.003 247.858)",
+      "popover": "oklch(0.208 0.042 265.755)",
+      "popover-foreground": "oklch(0.984 0.003 247.858)",
+      "primary": "oklch(0.929 0.013 255.508)",
+      "primary-foreground": "oklch(0.208 0.042 265.755)",
+      "secondary": "oklch(0.279 0.041 260.031)",
+      "secondary-foreground": "oklch(0.984 0.003 247.858)",
+      "muted": "oklch(0.279 0.041 260.031)",
+      "muted-foreground": "oklch(0.704 0.04 256.788)",
+      "accent": "oklch(0.279 0.041 260.031)",
+      "accent-foreground": "oklch(0.984 0.003 247.858)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.551 0.027 264.364)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.208 0.042 265.755)",
+      "sidebar-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-accent": "oklch(0.279 0.041 260.031)",
+      "sidebar-accent-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.551 0.027 264.364)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/theme-stone.json b/apps/v4/public/r/styles/new-york-v4/theme-stone.json
new file mode 100644
index 00000000000..04c599678c3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/theme-stone.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-stone",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.147 0.004 49.25)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.147 0.004 49.25)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.147 0.004 49.25)",
+      "primary": "oklch(0.216 0.006 56.043)",
+      "primary-foreground": "oklch(0.985 0.001 106.423)",
+      "secondary": "oklch(0.97 0.001 106.424)",
+      "secondary-foreground": "oklch(0.216 0.006 56.043)",
+      "muted": "oklch(0.97 0.001 106.424)",
+      "muted-foreground": "oklch(0.553 0.013 58.071)",
+      "accent": "oklch(0.97 0.001 106.424)",
+      "accent-foreground": "oklch(0.216 0.006 56.043)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.923 0.003 48.717)",
+      "input": "oklch(0.923 0.003 48.717)",
+      "ring": "oklch(0.709 0.01 56.259)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0.001 106.423)",
+      "sidebar-foreground": "oklch(0.147 0.004 49.25)",
+      "sidebar-primary": "oklch(0.216 0.006 56.043)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.97 0.001 106.424)",
+      "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)",
+      "sidebar-border": "oklch(0.923 0.003 48.717)",
+      "sidebar-ring": "oklch(0.709 0.01 56.259)"
+    },
+    "dark": {
+      "background": "oklch(0.147 0.004 49.25)",
+      "foreground": "oklch(0.985 0.001 106.423)",
+      "card": "oklch(0.216 0.006 56.043)",
+      "card-foreground": "oklch(0.985 0.001 106.423)",
+      "popover": "oklch(0.216 0.006 56.043)",
+      "popover-foreground": "oklch(0.985 0.001 106.423)",
+      "primary": "oklch(0.923 0.003 48.717)",
+      "primary-foreground": "oklch(0.216 0.006 56.043)",
+      "secondary": "oklch(0.268 0.007 34.298)",
+      "secondary-foreground": "oklch(0.985 0.001 106.423)",
+      "muted": "oklch(0.268 0.007 34.298)",
+      "muted-foreground": "oklch(0.709 0.01 56.259)",
+      "accent": "oklch(0.268 0.007 34.298)",
+      "accent-foreground": "oklch(0.985 0.001 106.423)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.553 0.013 58.071)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.216 0.006 56.043)",
+      "sidebar-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.268 0.007 34.298)",
+      "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.553 0.013 58.071)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/theme-zinc.json b/apps/v4/public/r/styles/new-york-v4/theme-zinc.json
new file mode 100644
index 00000000000..a063a4ba15f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/theme-zinc.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-zinc",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.141 0.005 285.823)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.141 0.005 285.823)",
+      "primary": "oklch(0.21 0.006 285.885)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.967 0.001 286.375)",
+      "secondary-foreground": "oklch(0.21 0.006 285.885)",
+      "muted": "oklch(0.967 0.001 286.375)",
+      "muted-foreground": "oklch(0.552 0.016 285.938)",
+      "accent": "oklch(0.967 0.001 286.375)",
+      "accent-foreground": "oklch(0.21 0.006 285.885)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.92 0.004 286.32)",
+      "input": "oklch(0.92 0.004 286.32)",
+      "ring": "oklch(0.705 0.015 286.067)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
+      "sidebar-primary": "oklch(0.21 0.006 285.885)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.967 0.001 286.375)",
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+      "sidebar-border": "oklch(0.92 0.004 286.32)",
+      "sidebar-ring": "oklch(0.705 0.015 286.067)"
+    },
+    "dark": {
+      "background": "oklch(0.141 0.005 285.823)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.21 0.006 285.885)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.21 0.006 285.885)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.92 0.004 286.32)",
+      "primary-foreground": "oklch(0.21 0.006 285.885)",
+      "secondary": "oklch(0.274 0.006 286.033)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.274 0.006 286.033)",
+      "muted-foreground": "oklch(0.705 0.015 286.067)",
+      "accent": "oklch(0.274 0.006 286.033)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.552 0.016 285.938)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.21 0.006 285.885)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.274 0.006 286.033)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.552 0.016 285.938)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toast-demo.json b/apps/v4/public/r/styles/new-york-v4/toast-demo.json
new file mode 100644
index 00000000000..ad4b694f027
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toast-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york-v4/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ToastAction } from \"@/registry/new-york-v4/ui/toast\"\n\nexport default function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toast-destructive.json b/apps/v4/public/r/styles/new-york-v4/toast-destructive.json
new file mode 100644
index 00000000000..aab568bd853
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toast-destructive.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-destructive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toast-destructive.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york-v4/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ToastAction } from \"@/registry/new-york-v4/ui/toast\"\n\nexport default function ToastDestructive() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          variant: \"destructive\",\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toast-simple.json b/apps/v4/public/r/styles/new-york-v4/toast-simple.json
new file mode 100644
index 00000000000..a8ec04b1710
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toast-simple.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-simple",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toast-simple.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york-v4/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ToastSimple() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          description: \"Your message has been sent.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toast-with-action.json b/apps/v4/public/r/styles/new-york-v4/toast-with-action.json
new file mode 100644
index 00000000000..d4603252b6d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toast-with-action.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-action",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toast-with-action.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york-v4/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ToastAction } from \"@/registry/new-york-v4/ui/toast\"\n\nexport default function ToastWithAction() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toast-with-title.json b/apps/v4/public/r/styles/new-york-v4/toast-with-title.json
new file mode 100644
index 00000000000..5e996b85e23
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toast-with-title.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-title",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toast-with-title.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york-v4/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ToastWithTitle() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-demo.json b/apps/v4/public/r/styles/new-york-v4/toggle-demo.json
new file mode 100644
index 00000000000..b40477e66d5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-disabled.json b/apps/v4/public/r/styles/new-york-v4/toggle-disabled.json
new file mode 100644
index 00000000000..211dd472c51
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-disabled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-disabled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-demo.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-demo.json
new file mode 100644
index 00000000000..6b73b9c28a3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup variant=\"outline\" type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-disabled.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-disabled.json
new file mode 100644
index 00000000000..68b3c94e935
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-disabled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-disabled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-disabled.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" disabled>\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-lg.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-lg.json
new file mode 100644
index 00000000000..cf060cbfe67
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-lg.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-lg",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-lg.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" size=\"lg\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-outline.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-outline.json
new file mode 100644
index 00000000000..c5b5032dc33
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-outline.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-outline",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-outline.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"outline\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-single.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-single.json
new file mode 100644
index 00000000000..d2ee37c8d06
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-single.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-single",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-single.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"single\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-sm.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-sm.json
new file mode 100644
index 00000000000..a17d823104f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-sm.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-sm",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-sm.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"single\" size=\"sm\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group.json b/apps/v4/public/r/styles/new-york-v4/toggle-group.json
new file mode 100644
index 00000000000..a8186217880
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-group.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-toggle-group"
+  ],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/toggle-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/new-york-v4/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        \"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-lg.json b/apps/v4/public/r/styles/new-york-v4/toggle-lg.json
new file mode 100644
index 00000000000..4f5991c5fcd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-lg.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-lg",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-lg.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleLg() {\n  return (\n    <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-outline.json b/apps/v4/public/r/styles/new-york-v4/toggle-outline.json
new file mode 100644
index 00000000000..5109ea28f0a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-outline.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-outline",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-sm.json b/apps/v4/public/r/styles/new-york-v4/toggle-sm.json
new file mode 100644
index 00000000000..214e0156d09
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-sm.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-sm",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-sm.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleSm() {\n  return (\n    <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-with-text.json b/apps/v4/public/r/styles/new-york-v4/toggle-with-text.json
new file mode 100644
index 00000000000..e8bd5b3af65
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle-with-text.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-with-text",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle.json b/apps/v4/public/r/styles/new-york-v4/toggle.json
new file mode 100644
index 00000000000..4fcebb95176
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/toggle.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-2 min-w-9\",\n        sm: \"h-8 px-1.5 min-w-8\",\n        lg: \"h-10 px-2.5 min-w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/tooltip-demo.json b/apps/v4/public/r/styles/new-york-v4/tooltip-demo.json
new file mode 100644
index 00000000000..ee55350c6e8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/tooltip-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york-v4/ui/tooltip\"\n\nexport default function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button variant=\"outline\">Hover</Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/tooltip.json b/apps/v4/public/r/styles/new-york-v4/tooltip.json
new file mode 100644
index 00000000000..ea2d1028513
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/tooltip.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-tooltip"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/tooltip.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-blockquote.json b/apps/v4/public/r/styles/new-york-v4/typography-blockquote.json
new file mode 100644
index 00000000000..a75cd594721
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-blockquote.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-blockquote",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-blockquote.tsx",
+      "content": "export default function TypographyBlockquote() {\n  return (\n    <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n      &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so\n      it&apos;s only fair that they should pay for the privilege.&quot;\n    </blockquote>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-demo.json b/apps/v4/public/r/styles/new-york-v4/typography-demo.json
new file mode 100644
index 00000000000..a5fb70e480d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-demo.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-demo",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-demo.tsx",
+      "content": "export default function TypographyDemo() {\n  return (\n    <div>\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight text-balance\">\n        Taxing Laughter: The Joke Tax Chronicles\n      </h1>\n      <p className=\"text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </p>\n      <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n        The King&apos;s Plan\n      </h2>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king thought long and hard, and finally came up with{\" \"}\n        <a\n          href=\"#\"\n          className=\"text-primary font-medium underline underline-offset-4\"\n        >\n          a brilliant plan\n        </a>\n        : he would tax the jokes in the kingdom.\n      </p>\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n        &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so\n        it&apos;s only fair that they should pay for the privilege.&quot;\n      </blockquote>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The Joke Tax\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king&apos;s subjects were not amused. They grumbled and complained,\n        but the king was firm:\n      </p>\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king&apos;s\n        foolishness get him down: a court jester named Jokester.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        Jokester&apos;s Revolt\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king&apos;s pillow, in his\n        soup, even in the royal toilet. The king was furious, but he\n        couldn&apos;t seem to stop Jokester.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn&apos;t help but laugh.\n        And once they started laughing, they couldn&apos;t stop.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The People&apos;s Rebellion\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </p>\n      <div className=\"my-6 w-full overflow-y-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                King&apos;s Treasury\n              </th>\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                People&apos;s happiness\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Empty\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Overflowing\n              </td>\n            </tr>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Modest\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Satisfied\n              </td>\n            </tr>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Full\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Ecstatic\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-h1.json b/apps/v4/public/r/styles/new-york-v4/typography-h1.json
new file mode 100644
index 00000000000..85271afcaab
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-h1.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h1",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-h1.tsx",
+      "content": "export default function TypographyH1() {\n  return (\n    <h1 className=\"scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance\">\n      Taxing Laughter: The Joke Tax Chronicles\n    </h1>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-h2.json b/apps/v4/public/r/styles/new-york-v4/typography-h2.json
new file mode 100644
index 00000000000..633c1dab27d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-h2.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h2",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-h2.tsx",
+      "content": "export default function TypographyH2() {\n  return (\n    <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n      The People of the Kingdom\n    </h2>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-h3.json b/apps/v4/public/r/styles/new-york-v4/typography-h3.json
new file mode 100644
index 00000000000..91f92fcb7a6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-h3.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h3",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-h3.tsx",
+      "content": "export default function TypographyH3() {\n  return (\n    <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-h4.json b/apps/v4/public/r/styles/new-york-v4/typography-h4.json
new file mode 100644
index 00000000000..ca51847a8ea
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-h4.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h4",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-h4.tsx",
+      "content": "export default function TypographyH4() {\n  return (\n    <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n      People stopped telling jokes\n    </h4>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-inline-code.json b/apps/v4/public/r/styles/new-york-v4/typography-inline-code.json
new file mode 100644
index 00000000000..fb672846990
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-inline-code.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-inline-code",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-inline-code.tsx",
+      "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n      @radix-ui/react-alert-dialog\n    </code>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-large.json b/apps/v4/public/r/styles/new-york-v4/typography-large.json
new file mode 100644
index 00000000000..5927c1c95b4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-large.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-large",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-large.tsx",
+      "content": "export default function TypographyLarge() {\n  return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-lead.json b/apps/v4/public/r/styles/new-york-v4/typography-lead.json
new file mode 100644
index 00000000000..798e2d7c54a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-lead.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-lead",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-lead.tsx",
+      "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-muted-foreground text-xl\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-list.json b/apps/v4/public/r/styles/new-york-v4/typography-list.json
new file mode 100644
index 00000000000..4cdae3e597c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-list.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-list",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-list.tsx",
+      "content": "export default function TypographyList() {\n  return (\n    <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-muted.json b/apps/v4/public/r/styles/new-york-v4/typography-muted.json
new file mode 100644
index 00000000000..2d0f8258d5a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-muted.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-muted",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-muted.tsx",
+      "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-p.json b/apps/v4/public/r/styles/new-york-v4/typography-p.json
new file mode 100644
index 00000000000..fb0bfe4d333
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-p.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-p",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-p.tsx",
+      "content": "export default function TypographyP() {\n  return (\n    <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error of\n      his ways and repealed the joke tax.\n    </p>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-small.json b/apps/v4/public/r/styles/new-york-v4/typography-small.json
new file mode 100644
index 00000000000..0a3c04d5df5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-small.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-small",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-small.tsx",
+      "content": "export default function TypographySmall() {\n  return (\n    <small className=\"text-sm leading-none font-medium\">Email address</small>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-table.json b/apps/v4/public/r/styles/new-york-v4/typography-table.json
new file mode 100644
index 00000000000..1f5995eb2f0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/typography-table.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-table",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-table.tsx",
+      "content": "export default function TypographyTable() {\n  return (\n    <div className=\"my-6 w-full overflow-y-auto\">\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              King's Treasury\n            </th>\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Empty\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Overflowing\n            </td>\n          </tr>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Modest\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Satisfied\n            </td>\n          </tr>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Full\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/use-mobile.json b/apps/v4/public/r/styles/new-york-v4/use-mobile.json
new file mode 100644
index 00000000000..a5bed5f5550
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/use-mobile.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-mobile",
+  "type": "registry:hook",
+  "files": [
+    {
+      "path": "registry/new-york-v4/hooks/use-mobile.ts",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "type": "registry:hook"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/utils.json b/apps/v4/public/r/styles/new-york-v4/utils.json
new file mode 100644
index 00000000000..3e3c81192b2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york-v4/utils.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "utils",
+  "type": "registry:lib",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/accordion-demo.json b/apps/v4/public/r/styles/new-york/accordion-demo.json
new file mode 100644
index 00000000000..74706892e94
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/accordion-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "accordion"
+  ],
+  "files": [
+    {
+      "path": "examples/accordion-demo.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york/ui/accordion\"\n\nexport default function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other\n          components&apos; aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/accordion.json b/apps/v4/public/r/styles/new-york/accordion.json
new file mode 100644
index 00000000000..07752037905
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/accordion.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-accordion"
+  ],
+  "files": [
+    {
+      "path": "ui/accordion.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "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"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/alert-demo.json b/apps/v4/public/r/styles/new-york/alert-demo.json
new file mode 100644
index 00000000000..2c7d9f19f1d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/alert-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default function AlertDemo() {\n  return (\n    <Alert>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/alert-destructive.json b/apps/v4/public/r/styles/new-york/alert-destructive.json
new file mode 100644
index 00000000000..d14ba20ff59
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/alert-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-destructive.tsx",
+      "content": "import { AlertCircle } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default function AlertDestructive() {\n  return (\n    <Alert variant=\"destructive\">\n      <AlertCircle className=\"h-4 w-4\" />\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>\n        Your session has expired. Please log in again.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/alert-dialog-demo.json b/apps/v4/public/r/styles/new-york/alert-dialog-demo.json
new file mode 100644
index 00000000000..ef61da14469
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/alert-dialog-demo.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert-dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-dialog-demo.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/new-york/ui/alert-dialog\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/alert-dialog.json b/apps/v4/public/r/styles/new-york/alert-dialog.json
new file mode 100644
index 00000000000..4a1a1020407
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/alert-dialog.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-alert-dialog"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/alert-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPortal>\n    <AlertDialogOverlay />\n    <AlertDialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    />\n  </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold\", className)}\n    {...props}\n  />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nAlertDialogDescription.displayName =\n  AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={cn(buttonVariants(), className)}\n    {...props}\n  />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={cn(\n      buttonVariants({ variant: \"outline\" }),\n      \"mt-2 sm:mt-0\",\n      className\n    )}\n    {...props}\n  />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/alert.json b/apps/v4/public/r/styles/new-york/alert.json
new file mode 100644
index 00000000000..eda4b86fec4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/alert.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "ui/alert.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/app-01-dark.png b/apps/v4/public/r/styles/new-york/app-01-dark.png
new file mode 100644
index 00000000000..1e509caa6c0
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/app-01-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/app-01-light.png b/apps/v4/public/r/styles/new-york/app-01-light.png
new file mode 100644
index 00000000000..8fd7d6cabf3
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/app-01-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/app-01.json b/apps/v4/public/r/styles/new-york/app-01.json
new file mode 100644
index 00000000000..cab8dd0b316
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/app-01.json
@@ -0,0 +1,74 @@
+{
+  "name": "app-01",
+  "type": "registry:block",
+  "description": "A simple task app.",
+  "dependencies": [
+    "swr"
+  ],
+  "registryDependencies": [
+    "card",
+    "input",
+    "button",
+    "skeleton",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/app-01/page.tsx",
+      "content": "import { AddTaskForm } from \"@/registry/new-york/blocks/app-01/components/add-task-form\"\nimport { TasksList } from \"@/registry/new-york/blocks/app-01/components/tasks-list\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\n\nexport default function AppPage() {\n  return (\n    <div className=\"h-screen flex flex-col items-center justify-center\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Add Task</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <TasksList />\n        </CardContent>\n        <CardFooter>\n          <AddTaskForm />\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/page.tsx"
+    },
+    {
+      "path": "blocks/app-01/api/tasks/route.ts",
+      "content": "import { NextResponse } from \"next/server\"\n\nimport { API_URL } from \"@/registry/new-york/blocks/app-01/lib/constants\"\n\nexport async function GET() {\n  const response = await fetch(API_URL)\n  const data = await response.json()\n  return NextResponse.json(data)\n}\n",
+      "type": "registry:page",
+      "target": "app/api/tasks/route.ts"
+    },
+    {
+      "path": "blocks/app-01/components/add-task-form.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { SubmitButton } from \"@/registry/new-york/blocks/app-01/components/submit-button\"\nimport { useTasks } from \"@/registry/new-york/blocks/app-01/hooks/use-tasks\"\nimport { saveTask } from \"@/registry/new-york/blocks/app-01/lib/actions\"\nimport { Input } from \"@/registry/new-york/ui/input\"\n\nexport function AddTaskForm() {\n  const { mutate } = useTasks()\n  const formRef = React.useRef<HTMLFormElement>(null)\n\n  return (\n    <form\n      action={async (formData) => {\n        await saveTask(formData)\n        void mutate()\n        formRef.current?.reset()\n      }}\n      className=\"w-full\"\n      ref={formRef}\n    >\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"name\" className=\"sr-only\">\n          Task Name\n        </Label>\n        <Input\n          type=\"text\"\n          name=\"name\"\n          required\n          autoComplete=\"off\"\n          placeholder=\"Remember the milk\"\n        />\n        <SubmitButton className=\"w-full\">Add Task</SubmitButton>\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/components/submit-button.tsx",
+      "content": "\"use client\"\n\nimport { Loader2 } from \"lucide-react\"\nimport { useFormStatus } from \"react-dom\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function SubmitButton({\n  children,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { pending } = useFormStatus()\n\n  return (\n    <Button type=\"submit\" disabled={pending} {...props}>\n      {pending && <Loader2 className=\"animate-spin\" />}\n      {children}\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/components/tasks-list.tsx",
+      "content": "\"use client\"\n\nimport { useTasks } from \"@/registry/new-york/blocks/app-01/hooks/use-tasks\"\nimport { Skeleton } from \"@/registry/new-york/ui/skeleton\"\n\nexport function TasksList() {\n  const { tasks, isLoading } = useTasks()\n\n  if (isLoading)\n    return (\n      <div className=\"grid gap-2\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <Skeleton className=\"h-5 w-full\" key={index} />\n        ))}\n      </div>\n    )\n\n  return (\n    <div className=\"grid gap-2\">\n      {tasks.map((task, index) => (\n        <div key={index} className=\"h-5 text-sm\">\n          {task}\n        </div>\n      ))}\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/hooks/use-tasks.ts",
+      "content": "\"use client\"\n\nimport useSWR from \"swr\"\n\nimport { API_URL } from \"@/registry/new-york/blocks/app-01/lib/constants\"\n\nexport function useTasks() {\n  const { data, isLoading, mutate } = useSWR<{ tasks: string[] }>(\n    \"/api/tasks\",\n    async () => {\n      const response = await fetch(API_URL)\n      return response.json()\n    }\n  )\n\n  return { tasks: data?.tasks || [], isLoading, mutate }\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/lib/constants.ts",
+      "content": "export const API_URL = \"https://api.npoint.io/40ac2c2a67c912fa2120\"\n",
+      "type": "registry:lib",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/lib/actions.ts",
+      "content": "\"use server\"\n\nimport { API_URL } from \"@/registry/new-york/blocks/app-01/lib/constants\"\n\nexport async function saveTask(formData: FormData) {\n  const name = formData.get(\"name\")\n\n  // Get current tasks\n  const response = await fetch(API_URL)\n  const data = await response.json()\n  const tasks = data.tasks || []\n\n  // Add new task to array\n  tasks.push(name)\n\n  // Save updated tasks array\n  await fetch(API_URL, {\n    method: \"POST\",\n    body: JSON.stringify({ tasks }),\n  })\n\n  return { success: true }\n}\n",
+      "type": "registry:lib",
+      "target": ""
+    }
+  ],
+  "cssVars": {
+    "light": {
+      "primary": "224.3 76.3% 48%",
+      "primary-foreground": "0 0% 100%"
+    }
+  },
+  "categories": [
+    "apps"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/aspect-ratio-demo.json b/apps/v4/public/r/styles/new-york/aspect-ratio-demo.json
new file mode 100644
index 00000000000..73e5f507237
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/aspect-ratio-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "examples/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/new-york/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/aspect-ratio.json b/apps/v4/public/r/styles/new-york/aspect-ratio.json
new file mode 100644
index 00000000000..511410bb571
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/aspect-ratio.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "ui/aspect-ratio.tsx",
+      "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/avatar-demo.json b/apps/v4/public/r/styles/new-york/avatar-demo.json
new file mode 100644
index 00000000000..97873f88ec0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/avatar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "examples/avatar-demo.tsx",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\n\nexport default function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/avatar.json b/apps/v4/public/r/styles/new-york/avatar.json
new file mode 100644
index 00000000000..7215ea17062
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/avatar.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-avatar"
+  ],
+  "files": [
+    {
+      "path": "ui/avatar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/badge-demo.json b/apps/v4/public/r/styles/new-york/badge-demo.json
new file mode 100644
index 00000000000..ee4847c1965
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/badge-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-demo.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/badge-destructive.json b/apps/v4/public/r/styles/new-york/badge-destructive.json
new file mode 100644
index 00000000000..9df79546f45
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/badge-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/badge-outline.json b/apps/v4/public/r/styles/new-york/badge-outline.json
new file mode 100644
index 00000000000..5920bc4d0f7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/badge-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-outline.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/badge-secondary.json b/apps/v4/public/r/styles/new-york/badge-secondary.json
new file mode 100644
index 00000000000..438168e5033
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/badge-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-secondary",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/badge.json b/apps/v4/public/r/styles/new-york/badge.json
new file mode 100644
index 00000000000..91a9042fe5c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/badge.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "ui/badge.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n        outline: \"text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/breadcrumb-demo.json b/apps/v4/public/r/styles/new-york/breadcrumb-demo.json
new file mode 100644
index 00000000000..c198e3d8453
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/breadcrumb-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-demo.tsx",
+      "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/breadcrumb-dropdown.json b/apps/v4/public/r/styles/new-york/breadcrumb-dropdown.json
new file mode 100644
index 00000000000..4b486fcdd47
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/breadcrumb-dropdown.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-dropdown",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-dropdown.tsx",
+      "content": "import { ChevronDown, Slash } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              Components\n              <ChevronDown />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/breadcrumb-ellipsis.json b/apps/v4/public/r/styles/new-york/breadcrumb-ellipsis.json
new file mode 100644
index 00000000000..300002b0fff
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/breadcrumb-ellipsis.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-ellipsis",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-ellipsis.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbEllipsis />\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/breadcrumb-link.json b/apps/v4/public/r/styles/new-york/breadcrumb-link.json
new file mode 100644
index 00000000000..9e8b4df06d8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/breadcrumb-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-link",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-link.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink>\n            <Link href=\"/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/breadcrumb-responsive.json b/apps/v4/public/r/styles/new-york/breadcrumb-responsive.json
new file mode 100644
index 00000000000..78bbded7da6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/breadcrumb-responsive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-responsive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nconst items = [\n  { href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Documentation\" },\n  { href: \"#\", label: \"Building Your Application\" },\n  { href: \"#\", label: \"Data Fetching\" },\n  { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        {items.length > ITEMS_TO_DISPLAY ? (\n          <>\n            <BreadcrumbItem>\n              {isDesktop ? (\n                <DropdownMenu open={open} onOpenChange={setOpen}>\n                  <DropdownMenuTrigger\n                    className=\"flex items-center gap-1\"\n                    aria-label=\"Toggle menu\"\n                  >\n                    <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                    {items.slice(1, -2).map((item, index) => (\n                      <DropdownMenuItem key={index}>\n                        <Link href={item.href ? item.href : \"#\"}>\n                          {item.label}\n                        </Link>\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              ) : (\n                <Drawer open={open} onOpenChange={setOpen}>\n                  <DrawerTrigger aria-label=\"Toggle Menu\">\n                    <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                  </DrawerTrigger>\n                  <DrawerContent>\n                    <DrawerHeader className=\"text-left\">\n                      <DrawerTitle>Navigate to</DrawerTitle>\n                      <DrawerDescription>\n                        Select a page to navigate to.\n                      </DrawerDescription>\n                    </DrawerHeader>\n                    <div className=\"grid gap-1 px-4\">\n                      {items.slice(1, -2).map((item, index) => (\n                        <Link\n                          key={index}\n                          href={item.href ? item.href : \"#\"}\n                          className=\"py-1 text-sm\"\n                        >\n                          {item.label}\n                        </Link>\n                      ))}\n                    </div>\n                    <DrawerFooter className=\"pt-4\">\n                      <DrawerClose asChild>\n                        <Button variant=\"outline\">Close</Button>\n                      </DrawerClose>\n                    </DrawerFooter>\n                  </DrawerContent>\n                </Drawer>\n              )}\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n          </>\n        ) : null}\n        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n          <BreadcrumbItem key={index}>\n            {item.href ? (\n              <>\n                <BreadcrumbLink\n                  asChild\n                  className=\"max-w-20 truncate md:max-w-none\"\n                >\n                  <Link href={item.href}>{item.label}</Link>\n                </BreadcrumbLink>\n                <BreadcrumbSeparator />\n              </>\n            ) : (\n              <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                {item.label}\n              </BreadcrumbPage>\n            )}\n          </BreadcrumbItem>\n        ))}\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/breadcrumb-separator.json b/apps/v4/public/r/styles/new-york/breadcrumb-separator.json
new file mode 100644
index 00000000000..5bede98f278
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/breadcrumb-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-separator",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-separator.tsx",
+      "content": "import { Slash } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/breadcrumb.json b/apps/v4/public/r/styles/new-york/breadcrumb.json
new file mode 100644
index 00000000000..1dfdd056650
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/breadcrumb.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "ui/breadcrumb.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\"> & {\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    {...props}\n  />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & {\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:w-3.5 [&>svg]:h-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button-01-dark.png b/apps/v4/public/r/styles/new-york/button-01-dark.png
new file mode 100644
index 00000000000..211238839bb
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/button-01-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/button-01-light.png b/apps/v4/public/r/styles/new-york/button-01-light.png
new file mode 100644
index 00000000000..b46751b1ea7
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/button-01-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/button-01.json b/apps/v4/public/r/styles/new-york/button-01.json
new file mode 100644
index 00000000000..2b3fe8ab6c9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button-01.json
@@ -0,0 +1,25 @@
+{
+  "name": "button-01",
+  "type": "registry:block",
+  "description": "A simple button.",
+  "files": [
+    {
+      "path": "blocks/button-01/page.tsx",
+      "content": "import { AmazingButton } from \"@/registry/new-york/blocks/button-01/components/amazing-button\"\n\nexport default function Page() {\n  return (\n    <div className=\"h-svh flex items-center justify-center\">\n      <AmazingButton />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/page.tsx"
+    },
+    {
+      "path": "blocks/button-01/components/amazing-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function AmazingButton() {\n  return (\n    <Button className=\"bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white\">\n      Amazing Button\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "300px"
+  },
+  "categories": [
+    "misc"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button-as-child.json b/apps/v4/public/r/styles/new-york/button-as-child.json
new file mode 100644
index 00000000000..dda54019cc0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button-as-child.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-as-child",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-as-child.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonAsChild() {\n  return (\n    <Button asChild>\n      <Link href=\"/login\">Login</Link>\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button-demo.json b/apps/v4/public/r/styles/new-york/button-demo.json
new file mode 100644
index 00000000000..c68f3015504
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button-destructive.json b/apps/v4/public/r/styles/new-york/button-destructive.json
new file mode 100644
index 00000000000..9a4bd7a6e23
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-destructive.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button-ghost.json b/apps/v4/public/r/styles/new-york/button-ghost.json
new file mode 100644
index 00000000000..17a1aba9104
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button-ghost.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-ghost",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-ghost.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button-icon.json b/apps/v4/public/r/styles/new-york/button-icon.json
new file mode 100644
index 00000000000..5d25d884f16
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-icon",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-icon.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <ChevronRight />\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button-link.json b/apps/v4/public/r/styles/new-york/button-link.json
new file mode 100644
index 00000000000..01b102b7d07
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-link",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-link.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button-loading.json b/apps/v4/public/r/styles/new-york/button-loading.json
new file mode 100644
index 00000000000..64b34de52a8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button-loading.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-loading",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button-outline.json b/apps/v4/public/r/styles/new-york/button-outline.json
new file mode 100644
index 00000000000..8e3df0be852
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-outline.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button-secondary.json b/apps/v4/public/r/styles/new-york/button-secondary.json
new file mode 100644
index 00000000000..19a96ea9eca
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-secondary",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-secondary.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button-with-icon.json b/apps/v4/public/r/styles/new-york/button-with-icon.json
new file mode 100644
index 00000000000..c90290dbf34
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button-with-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-with-icon",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-with-icon.tsx",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button>\n      <MailOpen /> Login with Email\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/button.json b/apps/v4/public/r/styles/new-york/button.json
new file mode 100644
index 00000000000..62957780d39
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/button.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "ui/button.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-01.json b/apps/v4/public/r/styles/new-york/calendar-01.json
new file mode 100644
index 00000000000..3429d8ff75c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-01.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-02.json b/apps/v4/public/r/styles/new-york/calendar-02.json
new file mode 100644
index 00000000000..dbf49a6a422
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-02.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-03.json b/apps/v4/public/r/styles/new-york/calendar-03.json
new file mode 100644
index 00000000000..9eac847c94b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-03.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-04.json b/apps/v4/public/r/styles/new-york/calendar-04.json
new file mode 100644
index 00000000000..ac46925d135
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-04.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-05.json b/apps/v4/public/r/styles/new-york/calendar-05.json
new file mode 100644
index 00000000000..1a3cc272a71
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-05.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-06.json b/apps/v4/public/r/styles/new-york/calendar-06.json
new file mode 100644
index 00000000000..3c93a8f865f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-06.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-07.json b/apps/v4/public/r/styles/new-york/calendar-07.json
new file mode 100644
index 00000000000..8143508a202
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-07.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-08.json b/apps/v4/public/r/styles/new-york/calendar-08.json
new file mode 100644
index 00000000000..1882fb4e2bd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-08.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-09.json b/apps/v4/public/r/styles/new-york/calendar-09.json
new file mode 100644
index 00000000000..64a29e68dc7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-09.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-10.json b/apps/v4/public/r/styles/new-york/calendar-10.json
new file mode 100644
index 00000000000..d91ca5e115d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-10.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader className=\"relative\">\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          className=\"absolute right-4 top-4\"\n          onClick={() => {\n            setMonth(new Date())\n            setDate(new Date())\n          }}\n        >\n          Today\n        </Button>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-11.json b/apps/v4/public/r/styles/new-york/calendar-11.json
new file mode 100644
index 00000000000..16f7b180852
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-11.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-12.json b/apps/v4/public/r/styles/new-york/calendar-12.json
new file mode 100644
index 00000000000..ea591262f41
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-12.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"relative border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <Select\n          value={locale}\n          onValueChange={(value) =>\n            setLocale(value as keyof typeof localizedStrings)\n          }\n        >\n          <SelectTrigger className=\"absolute right-4 top-4 w-[100px]\">\n            <SelectValue placeholder=\"Language\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\">\n            <SelectItem value=\"es\">Español</SelectItem>\n            <SelectItem value=\"en\">English</SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"pt-4\">\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-13.json b/apps/v4/public/r/styles/new-york/calendar-13.json
new file mode 100644
index 00000000000..48686de333e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-13.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-14.json b/apps/v4/public/r/styles/new-york/calendar-14.json
new file mode 100644
index 00000000000..08268bb603b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-14.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-15.json b/apps/v4/public/r/styles/new-york/calendar-15.json
new file mode 100644
index 00000000000..4e0c8d11fd3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-15.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-16.json b/apps/v4/public/r/styles/new-york/calendar-16.json
new file mode 100644
index 00000000000..b9ed7abaebf
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-16.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } 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 Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-17.json b/apps/v4/public/r/styles/new-york/calendar-17.json
new file mode 100644
index 00000000000..ade5449c4a4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-17.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } 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 Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:2.8rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-18.json b/apps/v4/public/r/styles/new-york/calendar-18.json
new file mode 100644
index 00000000000..cbbeaa7e065
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-18.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-19.json b/apps/v4/public/r/styles/new-york/calendar-19.json
new file mode 100644
index 00000000000..c514d38355d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-19.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:2.375rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 pb-0 pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-20.json b/apps/v4/public/r/styles/new-york/calendar-20.json
new file mode 100644
index 00000000000..4429f6dd877
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-20.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute\n      .toString()\n      .padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t !py-5 px-6 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-21.json b/apps/v4/public/r/styles/new-york/calendar-21.json
new file mode 100644
index 00000000000..4e085b2e01f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-21.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-22.json b/apps/v4/public/r/styles/new-york/calendar-22.json
new file mode 100644
index 00000000000..d9af6df607a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-22.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-23.json b/apps/v4/public/r/styles/new-york/calendar-23.json
new file mode 100644
index 00000000000..a8d3e19af90
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-23.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-24.json b/apps/v4/public/r/styles/new-york/calendar-24.json
new file mode 100644
index 00000000000..2733e739775
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-24.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-25.json b/apps/v4/public/r/styles/new-york/calendar-25.json
new file mode 100644
index 00000000000..92aa408dfee
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-25.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-26.json b/apps/v4/public/r/styles/new-york/calendar-26.json
new file mode 100644
index 00000000000..790ab1dd0f1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-26.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-27.json b/apps/v4/public/r/styles/new-york/calendar-27.json
new file mode 100644
index 00000000000..20781d5bf31
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-27.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--primary))\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"@md/card:grid relative flex flex-col border-b\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"absolute right-4 top-4\">\n              <CalendarIcon />\n              {range?.from && range?.to\n                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                : \"June 2025\"}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              className=\"w-full\"\n              mode=\"range\"\n              defaultMonth={range?.from}\n              selected={range}\n              onSelect={setRange}\n              disableNavigation\n              startMonth={range?.from}\n              fixedWeeks\n              showOutsideDays\n              disabled={{\n                after: new Date(2025, 5, 31),\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t pt-6\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-28.json b/apps/v4/public/r/styles/new-york/calendar-28.json
new file mode 100644
index 00000000000..7dd46474a72
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-28.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-29.json b/apps/v4/public/r/styles/new-york/calendar-29.json
new file mode 100644
index 00000000000..8abbeb587e4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-29.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-30.json b/apps/v4/public/r/styles/new-york/calendar-30.json
new file mode 100644
index 00000000000..db134b9b347
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-30.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-31.json b/apps/v4/public/r/styles/new-york/calendar-31.json
new file mode 100644
index 00000000000..00f7278c51b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-31.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-6 w-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-32.json b/apps/v4/public/r/styles/new-york/calendar-32.json
new file mode 100644
index 00000000000..610b102bc9a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-32.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-demo.json b/apps/v4/public/r/styles/new-york/calendar-demo.json
new file mode 100644
index 00000000000..361fcd28dae
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow\"\n    />\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar-form.json b/apps/v4/public/r/styles/new-york/calendar-form.json
new file mode 100644
index 00000000000..3f1a22cb414
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/calendar.json b/apps/v4/public/r/styles/new-york/calendar.json
new file mode 100644
index 00000000000..e492d9aa27e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/calendar.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "react-day-picker@latest",
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/calendar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"bg-popover absolute inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-[--cell-size] select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-muted-foreground select-none text-[0.8rem]\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"bg-accent rounded-l-md\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"bg-accent rounded-r-md\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-[--cell-size] items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/card-demo.json b/apps/v4/public/r/styles/new-york/card-demo.json
new file mode 100644
index 00000000000..6c1b84a38b1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/card-demo.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "button",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "examples/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { 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 { Switch } from \"@/registry/new-york/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/card-with-form.json b/apps/v4/public/r/styles/new-york/card-with-form.json
new file mode 100644
index 00000000000..396d3554cc3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/card-with-form.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-with-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/card-with-form.tsx",
+      "content": "import * as React from \"react\"\n\nimport { 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\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function CardWithForm() {\n  return (\n    <Card className=\"w-[350px]\">\n      <CardHeader>\n        <CardTitle>Create project</CardTitle>\n        <CardDescription>Deploy your new project in one-click.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <div className=\"grid w-full items-center gap-4\">\n            <div className=\"flex flex-col space-y-1.5\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" placeholder=\"Name of your project\" />\n            </div>\n            <div className=\"flex flex-col space-y-1.5\">\n              <Label htmlFor=\"framework\">Framework</Label>\n              <Select>\n                <SelectTrigger id=\"framework\">\n                  <SelectValue placeholder=\"Select\" />\n                </SelectTrigger>\n                <SelectContent position=\"popper\">\n                  <SelectItem value=\"next\">Next.js</SelectItem>\n                  <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                  <SelectItem value=\"astro\">Astro</SelectItem>\n                  <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex justify-between\">\n        <Button variant=\"outline\">Cancel</Button>\n        <Button>Deploy</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/card.json b/apps/v4/public/r/styles/new-york/card.json
new file mode 100644
index 00000000000..ba037ae57b8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/card.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "ui/card.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/carousel-api.json b/apps/v4/public/r/styles/new-york/carousel-api.json
new file mode 100644
index 00000000000..74167edcac4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/carousel-api.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-api",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-api.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) {\n      return\n    }\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap() + 1)\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1)\n    })\n  }, [api])\n\n  return (\n    <div className=\"mx-auto max-w-xs\">\n      <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious />\n        <CarouselNext />\n      </Carousel>\n      <div className=\"py-2 text-center text-sm text-muted-foreground\">\n        Slide {current} of {count}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/carousel-demo.json b/apps/v4/public/r/styles/new-york/carousel-demo.json
new file mode 100644
index 00000000000..4bdb332b27e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/carousel-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/carousel-orientation.json b/apps/v4/public/r/styles/new-york/carousel-orientation.json
new file mode 100644
index 00000000000..1dc8eebf7c4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/carousel-orientation.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-orientation",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselOrientation() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      orientation=\"vertical\"\n      className=\"w-full max-w-xs\"\n    >\n      <CarouselContent className=\"-mt-1 h-[200px]\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/carousel-plugin.json b/apps/v4/public/r/styles/new-york/carousel-plugin.json
new file mode 100644
index 00000000000..cc29a0053de
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/carousel-plugin.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-plugin",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-plugin.tsx",
+      "content": "import * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselPlugin() {\n  const plugin = React.useRef(\n    Autoplay({ delay: 2000, stopOnInteraction: true })\n  )\n\n  return (\n    <Carousel\n      plugins={[plugin.current]}\n      className=\"w-full max-w-xs\"\n      onMouseEnter={plugin.current.stop}\n      onMouseLeave={plugin.current.reset}\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/carousel-size.json b/apps/v4/public/r/styles/new-york/carousel-size.json
new file mode 100644
index 00000000000..6d890f1a5f5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/carousel-size.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-size",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-size.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselSize() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      className=\"w-full max-w-sm\"\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/carousel-spacing.json b/apps/v4/public/r/styles/new-york/carousel-spacing.json
new file mode 100644
index 00000000000..a3d693b310c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/carousel-spacing.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-spacing",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-spacing.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselSpacing() {\n  return (\n    <Carousel className=\"w-full max-w-sm\">\n      <CarouselContent className=\"-ml-1\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/carousel.json b/apps/v4/public/r/styles/new-york/carousel.json
new file mode 100644
index 00000000000..6151aa3e483
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/carousel.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "embla-carousel-react"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/carousel.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = \"horizontal\",\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n      },\n      plugins\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n    const onSelect = React.useCallback((api: CarouselApi) => {\n      if (!api) {\n        return\n      }\n\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev()\n    }, [api])\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext()\n    }, [api])\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === \"ArrowLeft\") {\n          event.preventDefault()\n          scrollPrev()\n        } else if (event.key === \"ArrowRight\") {\n          event.preventDefault()\n          scrollNext()\n        }\n      },\n      [scrollPrev, scrollNext]\n    )\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return\n      }\n\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) {\n        return\n      }\n\n      onSelect(api)\n      api.on(\"reInit\", onSelect)\n      api.on(\"select\", onSelect)\n\n      return () => {\n        api?.off(\"select\", onSelect)\n      }\n    }, [api, onSelect])\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api: api,\n          opts,\n          orientation:\n            orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\n        }}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    )\n  }\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\">\n      <div\n        ref={ref}\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute  h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-left-12 top-1/2 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-right-12 top-1/2 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-area-axes.json b/apps/v4/public/r/styles/new-york/chart-area-axes.json
new file mode 100644
index 00000000000..3a918c41da2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-area-axes.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-axes",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-axes.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Axes</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -20,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={3}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-area-default.json b/apps/v4/public/r/styles/new-york/chart-area-default.json
new file mode 100644
index 00000000000..0e00173d5c6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-area-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-default",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-area-gradient.json b/apps/v4/public/r/styles/new-york/chart-area-gradient.json
new file mode 100644
index 00000000000..ad50586d5a7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-area-gradient.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-gradient",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-gradient.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Gradient</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-area-icons.json b/apps/v4/public/r/styles/new-york/chart-area-icons.json
new file mode 100644
index 00000000000..b93f86af9f4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-area-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-icons",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-icons.tsx",
+      "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: TrendingDown,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: TrendingUp,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-area-interactive.json b/apps/v4/public/r/styles/new-york/chart-area-interactive.json
new file mode 100644
index 00000000000..e84fcfe99f4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-area-interactive.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-interactive",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n        <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n          <CardTitle>Area Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <Select value={timeRange} onValueChange={setTimeRange}>\n          <SelectTrigger\n            className=\"w-[160px] rounded-lg sm:ml-auto\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Last 3 months\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90d\" className=\"rounded-lg\">\n              Last 3 months\n            </SelectItem>\n            <SelectItem value=\"30d\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7d\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-area-legend.json b/apps/v4/public/r/styles/new-york/chart-area-legend.json
new file mode 100644
index 00000000000..c2071788d71
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-area-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-legend",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-area-linear.json b/apps/v4/public/r/styles/new-york/chart-area-linear.json
new file mode 100644
index 00000000000..688afc066a9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-area-linear.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-linear",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Linear</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"linear\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-area-stacked-expand.json b/apps/v4/public/r/styles/new-york/chart-area-stacked-expand.json
new file mode 100644
index 00000000000..91feaf37204
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-area-stacked-expand.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-stacked-expand",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-stacked-expand.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n  { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n  { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n  { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n  { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n  { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-3))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n              top: 12,\n            }}\n            stackOffset=\"expand\"\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"other\"\n              type=\"natural\"\n              fill=\"var(--color-other)\"\n              fillOpacity={0.1}\n              stroke=\"var(--color-other)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-area-stacked.json b/apps/v4/public/r/styles/new-york/chart-area-stacked.json
new file mode 100644
index 00000000000..ef67ea3e885
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-area-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-stacked",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-area-step.json b/apps/v4/public/r/styles/new-york/chart-area-step.json
new file mode 100644
index 00000000000..6dc2d8efe44
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-area-step.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-step",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-area-step.tsx",
+      "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Activity,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Step</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"step\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-active.json b/apps/v4/public/r/styles/new-york/chart-bar-active.json
new file mode 100644
index 00000000000..a7210f2f5d8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-active.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-active",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              activeIndex={2}\n              activeBar={({ ...props }) => {\n                return (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                )\n              }}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-default.json b/apps/v4/public/r/styles/new-york/chart-bar-default.json
new file mode 100644
index 00000000000..179af19cd90
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-default",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-demo-axis.json b/apps/v4/public/r/styles/new-york/chart-bar-demo-axis.json
new file mode 100644
index 00000000000..be930f91aeb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-demo-axis.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-axis",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-axis.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-demo-grid.json b/apps/v4/public/r/styles/new-york/chart-bar-demo-grid.json
new file mode 100644
index 00000000000..77538b2465f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-demo-grid.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-grid",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-grid.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-demo-legend.json b/apps/v4/public/r/styles/new-york/chart-bar-demo-legend.json
new file mode 100644
index 00000000000..8c8a9a0e8fe
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-demo-legend.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-legend",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-legend.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <ChartLegend content={<ChartLegendContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-demo-tooltip.json b/apps/v4/public/r/styles/new-york/chart-bar-demo-tooltip.json
new file mode 100644
index 00000000000..87705dc8739
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-demo-tooltip.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-tooltip",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-tooltip.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-demo.json b/apps/v4/public/r/styles/new-york/chart-bar-demo.json
new file mode 100644
index 00000000000..6557b543280
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-horizontal.json b/apps/v4/public/r/styles/new-york/chart-bar-horizontal.json
new file mode 100644
index 00000000000..0247254f219
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-horizontal.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-horizontal",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-horizontal.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Horizontal</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: -20,\n            }}\n          >\n            <XAxis type=\"number\" dataKey=\"desktop\" hide />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-interactive.json b/apps/v4/public/r/styles/new-york/chart-bar-interactive.json
new file mode 100644
index 00000000000..44b072947e5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-interactive",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Bar Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-label-custom.json b/apps/v4/public/r/styles/new-york/chart-bar-label-custom.json
new file mode 100644
index 00000000000..bc03827c278
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-label-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  label: {\n    color: \"hsl(var(--background))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              right: 16,\n            }}\n          >\n            <CartesianGrid horizontal={false} />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n              hide\n            />\n            <XAxis dataKey=\"desktop\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Bar\n              dataKey=\"desktop\"\n              layout=\"vertical\"\n              fill=\"var(--color-desktop)\"\n              radius={4}\n            >\n              <LabelList\n                dataKey=\"month\"\n                position=\"insideLeft\"\n                offset={8}\n                className=\"fill-[--color-label]\"\n                fontSize={12}\n              />\n              <LabelList\n                dataKey=\"desktop\"\n                position=\"right\"\n                offset={8}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-label.json b/apps/v4/public/r/styles/new-york/chart-bar-label.json
new file mode 100644
index 00000000000..4a236c9316e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-label",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-mixed.json b/apps/v4/public/r/styles/new-york/chart-bar-mixed.json
new file mode 100644
index 00000000000..36a77415d7c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-mixed.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-mixed",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-mixed.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Mixed</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: 0,\n            }}\n          >\n            <YAxis\n              dataKey=\"browser\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <XAxis dataKey=\"visitors\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-multiple.json b/apps/v4/public/r/styles/new-york/chart-bar-multiple.json
new file mode 100644
index 00000000000..4e100e2a68c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-multiple",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dashed\" />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n            <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-negative.json b/apps/v4/public/r/styles/new-york/chart-bar-negative.json
new file mode 100644
index 00000000000..fffb5c7f2cc
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-negative.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-negative",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-negative.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 205 },\n  { month: \"March\", visitors: -207 },\n  { month: \"April\", visitors: 173 },\n  { month: \"May\", visitors: -209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Negative</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel hideIndicator />}\n            />\n            <Bar dataKey=\"visitors\">\n              <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n              {chartData.map((item) => (\n                <Cell\n                  key={item.month}\n                  fill={\n                    item.visitors > 0\n                      ? \"hsl(var(--chart-1))\"\n                      : \"hsl(var(--chart-2))\"\n                  }\n                />\n              ))}\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-bar-stacked.json b/apps/v4/public/r/styles/new-york/chart-bar-stacked.json
new file mode 100644
index 00000000000..7c8ede31179
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-bar-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-stacked",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-bar-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            <Bar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              fill=\"var(--color-desktop)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"mobile\"\n              stackId=\"a\"\n              fill=\"var(--color-mobile)\"\n              radius={[4, 4, 0, 0]}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-line-default.json b/apps/v4/public/r/styles/new-york/chart-line-default.json
new file mode 100644
index 00000000000..9cf435e22fd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-line-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-default",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-line-dots-colors.json b/apps/v4/public/r/styles/new-york/chart-line-dots-colors.json
new file mode 100644
index 00000000000..96c75f2d1c1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-line-dots-colors.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots-colors",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots-colors.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots Colors</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={({ payload, ...props }) => {\n                return (\n                  <Dot\n                    key={payload.browser}\n                    r={5}\n                    cx={props.cx}\n                    cy={props.cy}\n                    fill={payload.fill}\n                    stroke={payload.fill}\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-line-dots-custom.json b/apps/v4/public/r/styles/new-york/chart-line-dots-custom.json
new file mode 100644
index 00000000000..61ca9189f4a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-line-dots-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots-custom.tsx",
+      "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={({ cx, cy, payload }) => {\n                const r = 24\n                return (\n                  <GitCommitVertical\n                    key={payload.month}\n                    x={cx - r / 2}\n                    y={cy - r / 2}\n                    width={r}\n                    height={r}\n                    fill=\"hsl(var(--background))\"\n                    stroke=\"var(--color-desktop)\"\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-line-dots.json b/apps/v4/public/r/styles/new-york/chart-line-dots.json
new file mode 100644
index 00000000000..30dc6b15e7c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-line-dots.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-line-interactive.json b/apps/v4/public/r/styles/new-york/chart-line-interactive.json
new file mode 100644
index 00000000000..ca50122446a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-line-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-interactive",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Line Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Line\n              dataKey={activeChart}\n              type=\"monotone\"\n              stroke={`var(--color-${activeChart})`}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-line-label-custom.json b/apps/v4/public/r/styles/new-york/chart-line-label-custom.json
new file mode 100644
index 00000000000..2ab577700e3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-line-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-label-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-visitors)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n                dataKey=\"browser\"\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-line-label.json b/apps/v4/public/r/styles/new-york/chart-line-label.json
new file mode 100644
index 00000000000..e179dbda377
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-line-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-label",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-line-linear.json b/apps/v4/public/r/styles/new-york/chart-line-linear.json
new file mode 100644
index 00000000000..489b6b61970
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-line-linear.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-linear",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Linear</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"linear\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-line-multiple.json b/apps/v4/public/r/styles/new-york/chart-line-multiple.json
new file mode 100644
index 00000000000..9256347a4d4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-line-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-multiple",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Line\n              dataKey=\"desktop\"\n              type=\"monotone\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n            <Line\n              dataKey=\"mobile\"\n              type=\"monotone\"\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-line-step.json b/apps/v4/public/r/styles/new-york/chart-line-step.json
new file mode 100644
index 00000000000..1c501018b62
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-line-step.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-step",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-line-step.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Step</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"step\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-pie-donut-active.json b/apps/v4/public/r/styles/new-york/chart-pie-donut-active.json
new file mode 100644
index 00000000000..413f21c983f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-pie-donut-active.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut-active",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={0}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <Sector {...props} outerRadius={outerRadius + 10} />\n              )}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-pie-donut-text.json b/apps/v4/public/r/styles/new-york/chart-pie-donut-text.json
new file mode 100644
index 00000000000..df73f7a9f6d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-pie-donut-text.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut-text",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut-text.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = React.useMemo(() => {\n    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut with Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-pie-donut.json b/apps/v4/public/r/styles/new-york/chart-pie-donut.json
new file mode 100644
index 00000000000..49a4602532a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-pie-donut.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-donut.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-pie-interactive.json b/apps/v4/public/r/styles/new-york/chart-pie-interactive.json
new file mode 100644
index 00000000000..b187958a243
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-pie-interactive.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-interactive",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const id = \"pie-interactive\"\n  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n  const activeIndex = React.useMemo(\n    () => desktopData.findIndex((item) => item.month === activeMonth),\n    [activeMonth]\n  )\n  const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n  return (\n    <Card data-chart={id} className=\"flex flex-col\">\n      <ChartStyle id={id} config={chartConfig} />\n      <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n        <div className=\"grid gap-1\">\n          <CardTitle>Pie Chart - Interactive</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </div>\n        <Select value={activeMonth} onValueChange={setActiveMonth}>\n          <SelectTrigger\n            className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\" className=\"rounded-xl\">\n            {months.map((key) => {\n              const config = chartConfig[key as keyof typeof chartConfig]\n\n              if (!config) {\n                return null\n              }\n\n              return (\n                <SelectItem\n                  key={key}\n                  value={key}\n                  className=\"rounded-lg [&_span]:flex\"\n                >\n                  <div className=\"flex items-center gap-2 text-xs\">\n                    <span\n                      className=\"flex h-3 w-3 shrink-0 rounded-sm\"\n                      style={{\n                        backgroundColor: `var(--color-${key})`,\n                      }}\n                    />\n                    {config?.label}\n                  </div>\n                </SelectItem>\n              )\n            })}\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 justify-center pb-0\">\n        <ChartContainer\n          id={id}\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[300px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={desktopData}\n              dataKey=\"desktop\"\n              nameKey=\"month\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={activeIndex}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <g>\n                  <Sector {...props} outerRadius={outerRadius + 10} />\n                  <Sector\n                    {...props}\n                    outerRadius={outerRadius + 25}\n                    innerRadius={outerRadius + 12}\n                  />\n                </g>\n              )}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {desktopData[activeIndex].desktop.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-pie-label-custom.json b/apps/v4/public/r/styles/new-york/chart-pie-label-custom.json
new file mode 100644
index 00000000000..404db825ffe
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-pie-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] px-0\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {payload.visitors}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-pie-label-list.json b/apps/v4/public/r/styles/new-york/chart-pie-label-list.json
new file mode 100644
index 00000000000..63853f9d99b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-pie-label-list.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label-list",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label-list.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label List</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\">\n              <LabelList\n                dataKey=\"browser\"\n                className=\"fill-background\"\n                stroke=\"none\"\n                fontSize={12}\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-pie-label.json b/apps/v4/public/r/styles/new-york/chart-pie-label.json
new file mode 100644
index 00000000000..f9cf0efc912
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-pie-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n        >\n          <PieChart>\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-pie-legend.json b/apps/v4/public/r/styles/new-york/chart-pie-legend.json
new file mode 100644
index 00000000000..d29f2051c58
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-pie-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-legend",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-legend.tsx",
+      "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[300px]\"\n        >\n          <PieChart>\n            <Pie data={chartData} dataKey=\"visitors\" />\n            <ChartLegend\n              content={<ChartLegendContent nameKey=\"browser\" />}\n              className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-pie-separator-none.json b/apps/v4/public/r/styles/new-york/chart-pie-separator-none.json
new file mode 100644
index 00000000000..0535070416b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-pie-separator-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-separator-none",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-separator-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Separator None</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              stroke=\"0\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-pie-simple.json b/apps/v4/public/r/styles/new-york/chart-pie-simple.json
new file mode 100644
index 00000000000..d63d58ff0dd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-pie-simple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-simple",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-pie-stacked.json b/apps/v4/public/r/styles/new-york/chart-pie-stacked.json
new file mode 100644
index 00000000000..35c284368b9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-pie-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-stacked",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-pie-stacked.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n  { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n  { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n  { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n  { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n  { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelKey=\"visitors\"\n                  nameKey=\"month\"\n                  indicator=\"line\"\n                  labelFormatter={(_, payload) => {\n                    return chartConfig[\n                      payload?.[0].dataKey as keyof typeof chartConfig\n                    ].label\n                  }}\n                />\n              }\n            />\n            <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n            <Pie\n              data={mobileData}\n              dataKey=\"mobile\"\n              innerRadius={70}\n              outerRadius={90}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-default.json b/apps/v4/public/r/styles/new-york/chart-radar-default.json
new file mode 100644
index 00000000000..20f8b2519bc
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-default",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-dots.json b/apps/v4/public/r/styles/new-york/chart-radar-dots.json
new file mode 100644
index 00000000000..67c8a38cd93
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-dots.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-dots",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Dots</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-grid-circle-fill.json b/apps/v4/public/r/styles/new-york/chart-radar-grid-circle-fill.json
new file mode 100644
index 00000000000..45901d23a2f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-grid-circle-fill.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-fill",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarGrid\n              className=\"fill-[--color-desktop] opacity-20\"\n              gridType=\"circle\"\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-grid-circle-no-lines.json b/apps/v4/public/r/styles/new-york/chart-radar-grid-circle-no-lines.json
new file mode 100644
index 00000000000..89926c5f797
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-grid-circle-no-lines.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-no-lines",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle-no-lines.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" radialLines={false} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-grid-circle.json b/apps/v4/public/r/styles/new-york/chart-radar-grid-circle.json
new file mode 100644
index 00000000000..6ded1907e52
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-grid-circle.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-circle.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-grid-custom.json b/apps/v4/public/r/styles/new-york/chart-radar-grid-custom.json
new file mode 100644
index 00000000000..9ab1f99292c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-grid-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Custom</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-grid-fill.json b/apps/v4/public/r/styles/new-york/chart-radar-grid-fill.json
new file mode 100644
index 00000000000..8c46b14cb1f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-grid-fill.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-fill",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-grid-none.json b/apps/v4/public/r/styles/new-york/chart-radar-grid-none.json
new file mode 100644
index 00000000000..52d7059718a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-grid-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-none",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-grid-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid None</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-icons.json b/apps/v4/public/r/styles/new-york/chart-radar-icons.json
new file mode 100644
index 00000000000..1f26249e8a6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-icons",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-icons.tsx",
+      "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: ArrowDownFromLine,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: ArrowUpFromLine,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-label-custom.json b/apps/v4/public/r/styles/new-york/chart-radar-label-custom.json
new file mode 100644
index 00000000000..8635bbbbc90
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-label-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Custom Label</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: 10,\n              right: 10,\n              bottom: 10,\n              left: 10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis\n              dataKey=\"month\"\n              tick={({ x, y, textAnchor, value, index, ...props }) => {\n                const data = chartData[index]\n\n                return (\n                  <text\n                    x={x}\n                    y={index === 0 ? y - 10 : y}\n                    textAnchor={textAnchor}\n                    fontSize={13}\n                    fontWeight={500}\n                    {...props}\n                  >\n                    <tspan>{data.desktop}</tspan>\n                    <tspan className=\"fill-muted-foreground\">/</tspan>\n                    <tspan>{data.mobile}</tspan>\n                    <tspan\n                      x={x}\n                      dy={\"1rem\"}\n                      fontSize={12}\n                      className=\"fill-muted-foreground\"\n                    >\n                      {data.month}\n                    </tspan>\n                  </text>\n                )\n              }}\n            />\n\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-legend.json b/apps/v4/public/r/styles/new-york/chart-radar-legend.json
new file mode 100644
index 00000000000..fbb03660943
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-legend.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-legend",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-lines-only.json b/apps/v4/public/r/styles/new-york/chart-radar-lines-only.json
new file mode 100644
index 00000000000..768b2947042
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-lines-only.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-lines-only",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-lines-only.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 160 },\n  { month: \"February\", desktop: 185, mobile: 170 },\n  { month: \"March\", desktop: 207, mobile: 180 },\n  { month: \"April\", desktop: 173, mobile: 160 },\n  { month: \"May\", desktop: 160, mobile: 190 },\n  { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Lines Only</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid radialLines={false} />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0}\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n            />\n            <Radar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0}\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-multiple.json b/apps/v4/public/r/styles/new-york/chart-radar-multiple.json
new file mode 100644
index 00000000000..46914049534
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-multiple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-multiple",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Multiple</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radar-radius.json b/apps/v4/public/r/styles/new-york/chart-radar-radius.json
new file mode 100644
index 00000000000..1d07512e9ec
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radar-radius.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-radius",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radar-radius.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"hsla(var(--foreground))\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radial-grid.json b/apps/v4/public/r/styles/new-york/chart-radial-grid.json
new file mode 100644
index 00000000000..c6c1feafb5b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radial-grid.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-grid",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-grid.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Grid</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <RadialBar dataKey=\"visitors\" />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radial-label.json b/apps/v4/public/r/styles/new-york/chart-radial-label.json
new file mode 100644
index 00000000000..35e5f267ad2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radial-label.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-label",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={-90}\n            endAngle={380}\n            innerRadius={30}\n            outerRadius={110}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background>\n              <LabelList\n                position=\"insideStart\"\n                dataKey=\"browser\"\n                className=\"fill-white capitalize mix-blend-luminosity\"\n                fontSize={11}\n              />\n            </RadialBar>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radial-shape.json b/apps/v4/public/r/styles/new-york/chart-radial-shape.json
new file mode 100644
index 00000000000..5ba9062e753
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radial-shape.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-shape",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-shape.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Shape</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={100}\n            innerRadius={80}\n            outerRadius={140}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radial-simple.json b/apps/v4/public/r/styles/new-york/chart-radial-simple.json
new file mode 100644
index 00000000000..ed41c67cc07
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radial-simple.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-simple",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radial-stacked.json b/apps/v4/public/r/styles/new-york/chart-radial-stacked.json
new file mode 100644
index 00000000000..5037a16de9b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radial-stacked.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-stacked",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 items-center pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={180}\n            innerRadius={80}\n            outerRadius={130}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) - 16}\n                          className=\"fill-foreground text-2xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 4}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n            <RadialBar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              cornerRadius={5}\n              fill=\"var(--color-desktop)\"\n              className=\"stroke-transparent stroke-2\"\n            />\n            <RadialBar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              stackId=\"a\"\n              cornerRadius={5}\n              className=\"stroke-transparent stroke-2\"\n            />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-radial-text.json b/apps/v4/public/r/styles/new-york/chart-radial-text.json
new file mode 100644
index 00000000000..002fddeb46b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-radial-text.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-text",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-radial-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={0}\n            endAngle={250}\n            innerRadius={80}\n            outerRadius={110}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-tooltip-advanced.json b/apps/v4/public/r/styles/new-york/chart-tooltip-advanced.json
new file mode 100644
index 00000000000..e08e7ac98c7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-tooltip-advanced.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-advanced",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-advanced.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Advanced</CardTitle>\n        <CardDescription>\n          Tooltip with custom formatter and total.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  className=\"w-[180px]\"\n                  formatter={(value, name, item, index) => (\n                    <>\n                      <div\n                        className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                        style={\n                          {\n                            \"--color-bg\": `var(--color-${name})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                      {/* Add this after the last item */}\n                      {index === 1 && (\n                        <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n                          Total\n                          <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                            {item.payload.running + item.payload.swimming}\n                            <span className=\"font-normal text-muted-foreground\">\n                              kcal\n                            </span>\n                          </div>\n                        </div>\n                      )}\n                    </>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-tooltip-default.json b/apps/v4/public/r/styles/new-york/chart-tooltip-default.json
new file mode 100644
index 00000000000..e7a8de1ccb0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-tooltip-default.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-default",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-default.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Default</CardTitle>\n        <CardDescription>\n          Default tooltip with ChartTooltipContent.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-tooltip-demo.json b/apps/v4/public/r/styles/new-york/chart-tooltip-demo.json
new file mode 100644
index 00000000000..7acfa77afcb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-tooltip-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-tooltip-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute left-[-35px] top-[45px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute left-[5px] top-[50px] z-10\"\n        >\n          <g clip-path=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute left-[122px] top-[0px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute left-[85px] top-[10px] z-10 -scale-x-100\"\n        >\n          <g clip-path=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"!hidden md:!flex\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"!items-start !justify-start\">\n        <div className=\"absolute left-[50px] top-[60px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute left-[30px] top-[38px] z-10 rotate-[-40deg]\"\n        >\n          <g clip-path=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              <>\n                {!hideIndicator && (\n                  <div\n                    className={cn(\n                      \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                      {\n                        \"h-2.5 w-2.5\": indicator === \"dot\",\n                        \"w-1\": indicator === \"line\",\n                        \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                          indicator === \"dashed\",\n                        \"my-0.5\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\n                    }\n                  />\n                )}\n                <div\n                  className={cn(\n                    \"flex flex-1 justify-between leading-none\",\n                    nestLabel ? \"items-end\" : \"items-center\"\n                  )}\n                >\n                  <div className=\"grid gap-1.5\">\n                    {nestLabel ? tooltipLabel : null}\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                  </div>\n                  <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-tooltip-formatter.json b/apps/v4/public/r/styles/new-york/chart-tooltip-formatter.json
new file mode 100644
index 00000000000..a6672e655cd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-tooltip-formatter.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-formatter",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Formatter</CardTitle>\n        <CardDescription>Tooltip with custom formatter .</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  formatter={(value, name) => (\n                    <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-tooltip-icons.json b/apps/v4/public/r/styles/new-york/chart-tooltip-icons.json
new file mode 100644
index 00000000000..3eb9270c757
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-tooltip-icons.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-icons",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-icons.tsx",
+      "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Footprints,\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n    icon: Waves,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Icons</CardTitle>\n        <CardDescription>Tooltip with icons.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-tooltip-indicator-line.json b/apps/v4/public/r/styles/new-york/chart-tooltip-indicator-line.json
new file mode 100644
index 00000000000..3306b5046c5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-tooltip-indicator-line.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-line",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-indicator-line.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Line Indicator</CardTitle>\n        <CardDescription>Tooltip with line indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent indicator=\"line\" />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-tooltip-indicator-none.json b/apps/v4/public/r/styles/new-york/chart-tooltip-indicator-none.json
new file mode 100644
index 00000000000..5996f51a354
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-tooltip-indicator-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-none",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-indicator-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Indicator</CardTitle>\n        <CardDescription>Tooltip with no indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-tooltip-label-custom.json b/apps/v4/public/r/styles/new-york/chart-tooltip-label-custom.json
new file mode 100644
index 00000000000..1afded6be91
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-tooltip-label-custom.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-custom",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  activities: {\n    label: \"Activities\",\n  },\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Custom label</CardTitle>\n        <CardDescription>\n          Tooltip with custom label from chartConfig.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent labelKey=\"activities\" indicator=\"line\" />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-tooltip-label-formatter.json b/apps/v4/public/r/styles/new-york/chart-tooltip-label-formatter.json
new file mode 100644
index 00000000000..bf7106c8ce3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-tooltip-label-formatter.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-formatter",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Label Formatter</CardTitle>\n        <CardDescription>Tooltip with label formatter.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      day: \"numeric\",\n                      month: \"long\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart-tooltip-label-none.json b/apps/v4/public/r/styles/new-york/chart-tooltip-label-none.json
new file mode 100644
index 00000000000..0ceb55f572c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart-tooltip-label-none.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-none",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "charts/chart-tooltip-label-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Label</CardTitle>\n        <CardDescription>Tooltip with no label.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/chart.json b/apps/v4/public/r/styles/new-york/chart.json
new file mode 100644
index 00000000000..d58ee017729
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/chart.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "recharts@2.15.4",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "card"
+  ],
+  "files": [
+    {
+      "path": "ui/chart.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nconst ChartContainer = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    config: ChartConfig\n    children: React.ComponentProps<\n      typeof RechartsPrimitive.ResponsiveContainer\n    >[\"children\"]\n  }\n>(({ id, className, children, config, ...props }, ref) => {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        ref={ref}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n    React.ComponentProps<\"div\"> & {\n      hideLabel?: boolean\n      hideIndicator?: boolean\n      indicator?: \"line\" | \"dot\" | \"dashed\"\n      nameKey?: string\n      labelKey?: string\n    }\n>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) {\n        return null\n      }\n\n      const [item] = payload\n      const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n      const itemConfig = getPayloadConfigFromPayload(config, item, key)\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label\n\n      if (labelFormatter) {\n        return (\n          <div className={cn(\"font-medium\", labelClassName)}>\n            {labelFormatter(value, payload)}\n          </div>\n        )\n      }\n\n      if (!value) {\n        return null\n      }\n\n      return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n    }, [\n      label,\n      labelFormatter,\n      payload,\n      hideLabel,\n      labelClassName,\n      config,\n      labelKey,\n    ])\n\n    if (!active || !payload?.length) {\n      return null\n    }\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n          className\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload\n            .filter((item) => item.type !== \"none\")\n            .map((item, index) => {\n              const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n              const itemConfig = getPayloadConfigFromPayload(config, item, key)\n              const indicatorColor = color || item.payload.fill || item.color\n\n              return (\n                <div\n                  key={item.dataKey}\n                  className={cn(\n                    \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                    indicator === \"dot\" && \"items-center\"\n                  )}\n                >\n                  {formatter && item?.value !== undefined && item.name ? (\n                    formatter(item.value, item.name, item, index, item.payload)\n                  ) : (\n                    <>\n                      {itemConfig?.icon ? (\n                        <itemConfig.icon />\n                      ) : (\n                        !hideIndicator && (\n                          <div\n                            className={cn(\n                              \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                              {\n                                \"h-2.5 w-2.5\": indicator === \"dot\",\n                                \"w-1\": indicator === \"line\",\n                                \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                  indicator === \"dashed\",\n                                \"my-0.5\": nestLabel && indicator === \"dashed\",\n                              }\n                            )}\n                            style={\n                              {\n                                \"--color-bg\": indicatorColor,\n                                \"--color-border\": indicatorColor,\n                              } as React.CSSProperties\n                            }\n                          />\n                        )\n                      )}\n                      <div\n                        className={cn(\n                          \"flex flex-1 justify-between leading-none\",\n                          nestLabel ? \"items-end\" : \"items-center\"\n                        )}\n                      >\n                        <div className=\"grid gap-1.5\">\n                          {nestLabel ? tooltipLabel : null}\n                          <span className=\"text-muted-foreground\">\n                            {itemConfig?.label || item.name}\n                          </span>\n                        </div>\n                        {item.value && (\n                          <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                            {item.value.toLocaleString()}\n                          </span>\n                        )}\n                      </div>\n                    </>\n                  )}\n                </div>\n              )\n            })}\n        </div>\n      </div>\n    )\n  }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> &\n    Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n      hideIcon?: boolean\n      nameKey?: string\n    }\n>(\n  (\n    { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    if (!payload?.length) {\n      return null\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center gap-4\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className\n        )}\n      >\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item) => {\n            const key = `${nameKey || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n            return (\n              <div\n                key={item.value}\n                className={cn(\n                  \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n                )}\n              >\n                {itemConfig?.icon && !hideIcon ? (\n                  <itemConfig.icon />\n                ) : (\n                  <div\n                    className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                    style={{\n                      backgroundColor: item.color,\n                    }}\n                  />\n                )}\n                {itemConfig?.label}\n              </div>\n            )\n          })}\n      </div>\n    )\n  }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/checkbox-demo.json b/apps/v4/public/r/styles/new-york/checkbox-demo.json
new file mode 100644
index 00000000000..d780ca8ee4e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/checkbox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\n\nexport default function CheckboxDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <label\n        htmlFor=\"terms\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/checkbox-disabled.json b/apps/v4/public/r/styles/new-york/checkbox-disabled.json
new file mode 100644
index 00000000000..63fbb74f208
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/checkbox-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-disabled.tsx",
+      "content": "import { Checkbox } from \"@/registry/new-york/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms2\" disabled />\n      <label\n        htmlFor=\"terms2\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/checkbox-form-multiple.json b/apps/v4/public/r/styles/new-york/checkbox-form-multiple.json
new file mode 100644
index 00000000000..aec4fd0a88e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/checkbox-form-multiple.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-multiple",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-multiple.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\n\nconst items = [\n  {\n    id: \"recents\",\n    label: \"Recents\",\n  },\n  {\n    id: \"home\",\n    label: \"Home\",\n  },\n  {\n    id: \"applications\",\n    label: \"Applications\",\n  },\n  {\n    id: \"desktop\",\n    label: \"Desktop\",\n  },\n  {\n    id: \"downloads\",\n    label: \"Downloads\",\n  },\n  {\n    id: \"documents\",\n    label: \"Documents\",\n  },\n] as const\n\nconst FormSchema = z.object({\n  items: z.array(z.string()).refine((value) => value.some((item) => item), {\n    message: \"You have to select at least one item.\",\n  }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      items: [\"recents\", \"home\"],\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"items\"\n          render={() => (\n            <FormItem>\n              <div className=\"mb-4\">\n                <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                <FormDescription>\n                  Select the items you want to display in the sidebar.\n                </FormDescription>\n              </div>\n              {items.map((item) => (\n                <FormField\n                  key={item.id}\n                  control={form.control}\n                  name=\"items\"\n                  render={({ field }) => {\n                    return (\n                      <FormItem\n                        key={item.id}\n                        className=\"flex flex-row items-start space-x-3 space-y-0\"\n                      >\n                        <FormControl>\n                          <Checkbox\n                            checked={field.value?.includes(item.id)}\n                            onCheckedChange={(checked) => {\n                              return checked\n                                ? field.onChange([...field.value, item.id])\n                                : field.onChange(\n                                    field.value?.filter(\n                                      (value) => value !== item.id\n                                    )\n                                  )\n                            }}\n                          />\n                        </FormControl>\n                        <FormLabel className=\"text-sm font-normal\">\n                          {item.label}\n                        </FormLabel>\n                      </FormItem>\n                    )\n                  }}\n                />\n              ))}\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/checkbox-form-single.json b/apps/v4/public/r/styles/new-york/checkbox-form-single.json
new file mode 100644
index 00000000000..e7c1120ec43
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/checkbox-form-single.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-single",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-single.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/new-york/ui/form\"\n\nconst FormSchema = z.object({\n  mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      mobile: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"mobile\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow\">\n              <FormControl>\n                <Checkbox\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <div className=\"space-y-1 leading-none\">\n                <FormLabel>\n                  Use different settings for my mobile devices\n                </FormLabel>\n                <FormDescription>\n                  You can manage your mobile notifications in the{\" \"}\n                  <Link href=\"/examples/forms\">mobile settings</Link> page.\n                </FormDescription>\n              </div>\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/checkbox-with-text.json b/apps/v4/public/r/styles/new-york/checkbox-with-text.json
new file mode 100644
index 00000000000..7381d8ab5b8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/checkbox-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-with-text.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n  return (\n    <div className=\"items-top flex space-x-2\">\n      <Checkbox id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-sm text-muted-foreground\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/checkbox.json b/apps/v4/public/r/styles/new-york/checkbox.json
new file mode 100644
index 00000000000..44aa1437cae
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/checkbox.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-checkbox"
+  ],
+  "files": [
+    {
+      "path": "ui/checkbox.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <Check className=\"h-4 w-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/collapsible-demo.json b/apps/v4/public/r/styles/new-york/collapsible-demo.json
new file mode 100644
index 00000000000..1f7a69b0cfa
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/collapsible-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "examples/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/collapsible.json b/apps/v4/public/r/styles/new-york/collapsible.json
new file mode 100644
index 00000000000..65fdab451c0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/collapsible.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-collapsible"
+  ],
+  "files": [
+    {
+      "path": "ui/collapsible.tsx",
+      "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/combobox-demo.json b/apps/v4/public/r/styles/new-york/combobox-demo.json
new file mode 100644
index 00000000000..0e73cf1297b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/combobox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport default function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/combobox-dropdown-menu.json b/apps/v4/public/r/styles/new-york/combobox-dropdown-menu.json
new file mode 100644
index 00000000000..4da6e44f2b7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/combobox-dropdown-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-dropdown-menu",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "dropdown-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nconst labels = [\n  \"feature\",\n  \"bug\",\n  \"enhancement\",\n  \"documentation\",\n  \"design\",\n  \"question\",\n  \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n  const [label, setLabel] = React.useState(\"feature\")\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n      <p className=\"text-sm font-medium leading-none\">\n        <span className=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">Create a new project</span>\n      </p>\n      <DropdownMenu open={open} onOpenChange={setOpen}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <MoreHorizontal />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n          <DropdownMenuLabel>Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Assign to...</DropdownMenuItem>\n            <DropdownMenuItem>Set due date...</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"p-0\">\n                <Command>\n                  <CommandInput\n                    placeholder=\"Filter label...\"\n                    autoFocus={true}\n                    className=\"h-9\"\n                  />\n                  <CommandList>\n                    <CommandEmpty>No label found.</CommandEmpty>\n                    <CommandGroup>\n                      {labels.map((label) => (\n                        <CommandItem\n                          key={label}\n                          value={label}\n                          onSelect={(value) => {\n                            setLabel(value)\n                            setOpen(false)\n                          }}\n                        >\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                  </CommandList>\n                </Command>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"text-red-600\">\n              Delete\n              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/combobox-form.json b/apps/v4/public/r/styles/new-york/combobox-form.json
new file mode 100644
index 00000000000..1457e2b84ca
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/combobox-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst languages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n  language: z.string({\n    required_error: \"Please select a language.\",\n  }),\n})\n\nexport default function ComboboxForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"language\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Language</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      className={cn(\n                        \"w-[200px] justify-between\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value\n                        ? languages.find(\n                            (language) => language.value === field.value\n                          )?.label\n                        : \"Select language\"}\n                      <ChevronsUpDown className=\"opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-[200px] p-0\">\n                  <Command>\n                    <CommandInput\n                      placeholder=\"Search framework...\"\n                      className=\"h-9\"\n                    />\n                    <CommandList>\n                      <CommandEmpty>No framework found.</CommandEmpty>\n                      <CommandGroup>\n                        {languages.map((language) => (\n                          <CommandItem\n                            value={language.label}\n                            key={language.value}\n                            onSelect={() => {\n                              form.setValue(\"language\", language.value)\n                            }}\n                          >\n                            {language.label}\n                            <Check\n                              className={cn(\n                                \"ml-auto\",\n                                language.value === field.value\n                                  ? \"opacity-100\"\n                                  : \"opacity-0\"\n                              )}\n                            />\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                This is the language that will be used in the dashboard.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/combobox-popover.json b/apps/v4/public/r/styles/new-york/combobox-popover.json
new file mode 100644
index 00000000000..88c76531128
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/combobox-popover.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-popover",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "combobox",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-sm text-muted-foreground\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/combobox-responsive.json b/apps/v4/public/r/styles/new-york/combobox-responsive.json
new file mode 100644
index 00000000000..7caf8bbb199
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/combobox-responsive.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-responsive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "combobox",
+    "popover",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboBoxResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  if (isDesktop) {\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </PopoverContent>\n      </Popover>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mt-4 border-t\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction StatusList({\n  setOpen,\n  setSelectedStatus,\n}: {\n  setOpen: (open: boolean) => void\n  setSelectedStatus: (status: Status | null) => void\n}) {\n  return (\n    <Command>\n      <CommandInput placeholder=\"Filter status...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup>\n          {statuses.map((status) => (\n            <CommandItem\n              key={status.value}\n              value={status.value}\n              onSelect={(value) => {\n                setSelectedStatus(\n                  statuses.find((priority) => priority.value === value) || null\n                )\n                setOpen(false)\n              }}\n            >\n              {status.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/command-demo.json b/apps/v4/public/r/styles/new-york/command-demo.json
new file mode 100644
index 00000000000..60c110558fe
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/command-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/command-demo.tsx",
+      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york/ui/command\"\n\nexport default function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/command-dialog.json b/apps/v4/public/r/styles/new-york/command-dialog.json
new file mode 100644
index 00000000000..7e6cd2de8b4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/command-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-dialog",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/command-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york/ui/command\"\n\nexport default function CommandDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <p className=\"text-sm text-muted-foreground\">\n        Press{\" \"}\n        <kbd className=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/command.json b/apps/v4/public/r/styles/new-york/command.json
new file mode 100644
index 00000000000..616c43a90e9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/command.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "cmdk"
+  ],
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/command.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/new-york/ui/dialog\"\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/context-menu-demo.json b/apps/v4/public/r/styles/new-york/context-menu-demo.json
new file mode 100644
index 00000000000..94cf83a6982
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/context-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "context-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/context-menu-demo.tsx",
+      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/new-york/ui/context-menu\"\n\nexport default function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/context-menu.json b/apps/v4/public/r/styles/new-york/context-menu.json
new file mode 100644
index 00000000000..d23e982a6f7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/context-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-context-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/context-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-4 w-4 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/dashboard-01-dark.png b/apps/v4/public/r/styles/new-york/dashboard-01-dark.png
new file mode 100644
index 00000000000..e5e3d644ec3
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/dashboard-01-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/dashboard-01-light.png b/apps/v4/public/r/styles/new-york/dashboard-01-light.png
new file mode 100644
index 00000000000..5bbf9c21946
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/dashboard-01-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/dashboard-01.json b/apps/v4/public/r/styles/new-york/dashboard-01.json
new file mode 100644
index 00000000000..db4780f315f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/dashboard-01.json
@@ -0,0 +1,107 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dashboard-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A dashboard with sidebar, charts and data table.",
+  "dependencies": [
+    "@dnd-kit/core",
+    "@dnd-kit/modifiers",
+    "@dnd-kit/sortable",
+    "@dnd-kit/utilities",
+    "@tanstack/react-table",
+    "zod"
+  ],
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "chart",
+    "card",
+    "select",
+    "tabs",
+    "table",
+    "toggle-group",
+    "badge",
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "drawer",
+    "input",
+    "avatar",
+    "sheet",
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "blocks/dashboard-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/dashboard-01/components/app-sidebar\"\nimport { ChartAreaInteractive } from \"@/registry/new-york/blocks/dashboard-01/components/chart-area-interactive\"\nimport { DataTable } from \"@/registry/new-york/blocks/dashboard-01/components/data-table\"\nimport { SectionCards } from \"@/registry/new-york/blocks/dashboard-01/components/section-cards\"\nimport { SiteHeader } from \"@/registry/new-york/blocks/dashboard-01/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/new-york/ui/sidebar\"\n\nimport data from \"./data.json\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar variant=\"inset\" />\n      <SidebarInset>\n        <SiteHeader />\n        <div className=\"flex flex-1 flex-col\">\n          <div className=\"@container/main flex flex-1 flex-col gap-2\">\n            <div className=\"flex flex-col gap-4 py-4 md:gap-6 md:py-6\">\n              <SectionCards />\n              <div className=\"px-4 lg:px-6\">\n                <ChartAreaInteractive />\n              </div>\n              <DataTable data={data} />\n            </div>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/dashboard-01/data.json",
+      "content": "[\n  {\n    \"id\": 1,\n    \"header\": \"Cover page\",\n    \"type\": \"Cover page\",\n    \"status\": \"In Process\",\n    \"target\": \"18\",\n    \"limit\": \"5\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 2,\n    \"header\": \"Table of contents\",\n    \"type\": \"Table of contents\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 3,\n    \"header\": \"Executive summary\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"10\",\n    \"limit\": \"13\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 4,\n    \"header\": \"Technical approach\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"27\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 5,\n    \"header\": \"Design\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"2\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 6,\n    \"header\": \"Capabilities\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"20\",\n    \"limit\": \"8\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 7,\n    \"header\": \"Integration with existing systems\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 8,\n    \"header\": \"Innovation and Advantages\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"25\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 9,\n    \"header\": \"Overview of EMR's Innovative Solutions\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"7\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 10,\n    \"header\": \"Advanced Algorithms and Machine Learning\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 11,\n    \"header\": \"Adaptive Communication Protocols\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"9\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 12,\n    \"header\": \"Advantages Over Current Technologies\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"0\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 13,\n    \"header\": \"Past Performance\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 14,\n    \"header\": \"Customer Feedback and Satisfaction Levels\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"34\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 15,\n    \"header\": \"Implementation Challenges and Solutions\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"3\",\n    \"limit\": \"35\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 16,\n    \"header\": \"Security Measures and Data Protection Policies\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"6\",\n    \"limit\": \"36\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 17,\n    \"header\": \"Scalability and Future Proofing\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"4\",\n    \"limit\": \"37\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 18,\n    \"header\": \"Cost-Benefit Analysis\",\n    \"type\": \"Plain language\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"38\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 19,\n    \"header\": \"User Training and Onboarding Experience\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"17\",\n    \"limit\": \"39\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 20,\n    \"header\": \"Future Development Roadmap\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"11\",\n    \"limit\": \"40\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 21,\n    \"header\": \"System Architecture Overview\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"24\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Maya Johnson\"\n  },\n  {\n    \"id\": 22,\n    \"header\": \"Risk Management Plan\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Carlos Rodriguez\"\n  },\n  {\n    \"id\": 23,\n    \"header\": \"Compliance Documentation\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"31\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Sarah Chen\"\n  },\n  {\n    \"id\": 24,\n    \"header\": \"API Documentation\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"8\",\n    \"limit\": \"12\",\n    \"reviewer\": \"Raj Patel\"\n  },\n  {\n    \"id\": 25,\n    \"header\": \"User Interface Mockups\",\n    \"type\": \"Visual\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Leila Ahmadi\"\n  },\n  {\n    \"id\": 26,\n    \"header\": \"Database Schema\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Thomas Wilson\"\n  },\n  {\n    \"id\": 27,\n    \"header\": \"Testing Methodology\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 28,\n    \"header\": \"Deployment Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 29,\n    \"header\": \"Budget Breakdown\",\n    \"type\": \"Financial\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 30,\n    \"header\": \"Market Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Sophia Martinez\"\n  },\n  {\n    \"id\": 31,\n    \"header\": \"Competitor Comparison\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 32,\n    \"header\": \"Maintenance Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Alex Thompson\"\n  },\n  {\n    \"id\": 33,\n    \"header\": \"User Personas\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Nina Patel\"\n  },\n  {\n    \"id\": 34,\n    \"header\": \"Accessibility Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 35,\n    \"header\": \"Performance Metrics\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"David Kim\"\n  },\n  {\n    \"id\": 36,\n    \"header\": \"Disaster Recovery Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 37,\n    \"header\": \"Third-party Integrations\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 38,\n    \"header\": \"User Feedback Summary\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 39,\n    \"header\": \"Localization Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"12\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Maria Garcia\"\n  },\n  {\n    \"id\": 40,\n    \"header\": \"Mobile Compatibility\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"James Wilson\"\n  },\n  {\n    \"id\": 41,\n    \"header\": \"Data Migration Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 42,\n    \"header\": \"Quality Assurance Protocols\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Priya Singh\"\n  },\n  {\n    \"id\": 43,\n    \"header\": \"Stakeholder Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"11\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 44,\n    \"header\": \"Environmental Impact Assessment\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 45,\n    \"header\": \"Intellectual Property Rights\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Sarah Johnson\"\n  },\n  {\n    \"id\": 46,\n    \"header\": \"Customer Support Framework\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 47,\n    \"header\": \"Version Control Strategy\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 48,\n    \"header\": \"Continuous Integration Pipeline\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Michael Chen\"\n  },\n  {\n    \"id\": 49,\n    \"header\": \"Regulatory Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 50,\n    \"header\": \"User Authentication System\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 51,\n    \"header\": \"Data Analytics Framework\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 52,\n    \"header\": \"Cloud Infrastructure\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 53,\n    \"header\": \"Network Security Measures\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Lisa Wong\"\n  },\n  {\n    \"id\": 54,\n    \"header\": \"Project Timeline\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 55,\n    \"header\": \"Resource Allocation\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 56,\n    \"header\": \"Team Structure and Roles\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 57,\n    \"header\": \"Communication Protocols\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 58,\n    \"header\": \"Success Metrics\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 59,\n    \"header\": \"Internationalization Support\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 60,\n    \"header\": \"Backup and Recovery Procedures\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 61,\n    \"header\": \"Monitoring and Alerting System\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Daniel Park\"\n  },\n  {\n    \"id\": 62,\n    \"header\": \"Code Review Guidelines\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 63,\n    \"header\": \"Documentation Standards\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 64,\n    \"header\": \"Release Management Process\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 65,\n    \"header\": \"Feature Prioritization Matrix\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Emma Davis\"\n  },\n  {\n    \"id\": 66,\n    \"header\": \"Technical Debt Assessment\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 67,\n    \"header\": \"Capacity Planning\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 68,\n    \"header\": \"Service Level Agreements\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Assign reviewer\"\n  }\n]\n",
+      "type": "registry:file",
+      "target": "app/dashboard/data.json"
+    },
+    {
+      "path": "blocks/dashboard-01/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpCircleIcon,\n  BarChartIcon,\n  CameraIcon,\n  ClipboardListIcon,\n  DatabaseIcon,\n  FileCodeIcon,\n  FileIcon,\n  FileTextIcon,\n  FolderIcon,\n  HelpCircleIcon,\n  LayoutDashboardIcon,\n  ListIcon,\n  SearchIcon,\n  SettingsIcon,\n  UsersIcon,\n} from \"lucide-react\"\n\nimport { NavDocuments } from \"@/registry/new-york/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/new-york/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/blocks/dashboard-01/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Dashboard\",\n      url: \"#\",\n      icon: LayoutDashboardIcon,\n    },\n    {\n      title: \"Lifecycle\",\n      url: \"#\",\n      icon: ListIcon,\n    },\n    {\n      title: \"Analytics\",\n      url: \"#\",\n      icon: BarChartIcon,\n    },\n    {\n      title: \"Projects\",\n      url: \"#\",\n      icon: FolderIcon,\n    },\n    {\n      title: \"Team\",\n      url: \"#\",\n      icon: UsersIcon,\n    },\n  ],\n  navClouds: [\n    {\n      title: \"Capture\",\n      icon: CameraIcon,\n      isActive: true,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Proposal\",\n      icon: FileTextIcon,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Prompts\",\n      icon: FileCodeIcon,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: SettingsIcon,\n    },\n    {\n      title: \"Get Help\",\n      url: \"#\",\n      icon: HelpCircleIcon,\n    },\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: SearchIcon,\n    },\n  ],\n  documents: [\n    {\n      name: \"Data Library\",\n      url: \"#\",\n      icon: DatabaseIcon,\n    },\n    {\n      name: \"Reports\",\n      url: \"#\",\n      icon: ClipboardListIcon,\n    },\n    {\n      name: \"Word Assistant\",\n      url: \"#\",\n      icon: FileIcon,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              asChild\n              className=\"data-[slot=sidebar-menu-button]:!p-1.5\"\n            >\n              <a href=\"#\">\n                <ArrowUpCircleIcon className=\"h-5 w-5\" />\n                <span className=\"text-base font-semibold\">Acme Inc.</span>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavDocuments items={data.documents} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const isMobile = useIsMobile()\n  const [timeRange, setTimeRange] = React.useState(\"30d\")\n\n  React.useEffect(() => {\n    if (isMobile) {\n      setTimeRange(\"7d\")\n    }\n  }, [isMobile])\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"@container/card\">\n      <CardHeader className=\"relative\">\n        <CardTitle>Total Visitors</CardTitle>\n        <CardDescription>\n          <span className=\"@[540px]/card:block hidden\">\n            Total for the last 3 months\n          </span>\n          <span className=\"@[540px]/card:hidden\">Last 3 months</span>\n        </CardDescription>\n        <div className=\"absolute right-4 top-4\">\n          <ToggleGroup\n            type=\"single\"\n            value={timeRange}\n            onValueChange={setTimeRange}\n            variant=\"outline\"\n            className=\"@[767px]/card:flex hidden\"\n          >\n            <ToggleGroupItem value=\"90d\" className=\"h-8 px-2.5\">\n              Last 3 months\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"30d\" className=\"h-8 px-2.5\">\n              Last 30 days\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"7d\" className=\"h-8 px-2.5\">\n              Last 7 days\n            </ToggleGroupItem>\n          </ToggleGroup>\n          <Select value={timeRange} onValueChange={setTimeRange}>\n            <SelectTrigger\n              className=\"@[767px]/card:hidden flex w-40\"\n              aria-label=\"Select a value\"\n            >\n              <SelectValue placeholder=\"Last 3 months\" />\n            </SelectTrigger>\n            <SelectContent className=\"rounded-xl\">\n              <SelectItem value=\"90d\" className=\"rounded-lg\">\n                Last 3 months\n              </SelectItem>\n              <SelectItem value=\"30d\" className=\"rounded-lg\">\n                Last 30 days\n              </SelectItem>\n              <SelectItem value=\"7d\" className=\"rounded-lg\">\n                Last 7 days\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={1.0}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/data-table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  SortableContext,\n  arrayMove,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  Row,\n  SortingState,\n  VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport {\n  CheckCircle2Icon,\n  CheckCircleIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsLeftIcon,\n  ChevronsRightIcon,\n  ColumnsIcon,\n  GripVerticalIcon,\n  LoaderIcon,\n  MoreVerticalIcon,\n  PlusIcon,\n  TrendingUpIcon,\n} from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <GripVerticalIcon className=\"size-3 text-muted-foreground\" />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge\n        variant=\"outline\"\n        className=\"flex gap-1 px-1.5 text-muted-foreground [&_svg]:size-3\"\n      >\n        {row.original.status === \"Done\" ? (\n          <CheckCircle2Icon className=\"text-green-500 dark:text-green-400\" />\n        ) : (\n          <LoaderIcon />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"h-8 w-40\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n              <SelectItem value=\"Jamik Tashpulatov\">\n                Jamik Tashpulatov\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"flex size-8 text-muted-foreground data-[state=open]:bg-muted\"\n            size=\"icon\"\n          >\n            <MoreVerticalIcon />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"flex w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"@4xl/main:hidden flex w-fit\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"outline\">Outline</SelectItem>\n            <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n            <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n            <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"@4xl/main:flex hidden\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\" className=\"gap-1\">\n            Past Performance{\" \"}\n            <Badge\n              variant=\"secondary\"\n              className=\"flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30\"\n            >\n              3\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\" className=\"gap-1\">\n            Key Personnel{\" \"}\n            <Badge\n              variant=\"secondary\"\n              className=\"flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30\"\n            >\n              2\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <ColumnsIcon />\n                <span className=\"hidden lg:inline\">Customize Columns</span>\n                <span className=\"lg:hidden\">Columns</span>\n                <ChevronDownIcon />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <PlusIcon />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  {[10, 20, 30, 40, 50].map((pageSize) => (\n                    <SelectItem key={pageSize} value={`${pageSize}`}>\n                      {pageSize}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <ChevronsLeftIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <ChevronLeftIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <ChevronRightIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <ChevronsRightIcon />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </SheetTrigger>\n      <SheetContent side=\"right\" className=\"flex flex-col\">\n        <SheetHeader className=\"gap-1\">\n          <SheetTitle>{item.header}</SheetTitle>\n          <SheetDescription>\n            Showing total visitors for the last 6 months\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto py-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 font-medium leading-none\">\n                  Trending up by 5.2% this month{\" \"}\n                  <TrendingUpIcon className=\"size-4\" />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Table of Contents\">\n                      Table of Contents\n                    </SelectItem>\n                    <SelectItem value=\"Executive Summary\">\n                      Executive Summary\n                    </SelectItem>\n                    <SelectItem value=\"Technical Approach\">\n                      Technical Approach\n                    </SelectItem>\n                    <SelectItem value=\"Design\">Design</SelectItem>\n                    <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                    <SelectItem value=\"Focus Documents\">\n                      Focus Documents\n                    </SelectItem>\n                    <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                    <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Done\">Done</SelectItem>\n                    <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                    <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                  <SelectItem value=\"Jamik Tashpulatov\">\n                    Jamik Tashpulatov\n                  </SelectItem>\n                  <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <SheetFooter className=\"mt-auto flex gap-2 sm:flex-col sm:space-x-0\">\n          <Button className=\"w-full\">Submit</Button>\n          <SheetClose asChild>\n            <Button variant=\"outline\" className=\"w-full\">\n              Done\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-documents.tsx",
+      "content": "\"use client\"\n\nimport {\n  FolderIcon,\n  MoreHorizontalIcon,\n  ShareIcon,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"rounded-sm data-[state=open]:bg-accent\"\n                >\n                  <MoreHorizontalIcon />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <FolderIcon />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ShareIcon />\n                  <span>Share</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontalIcon className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { MailIcon, PlusCircleIcon, type LucideIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <PlusCircleIcon />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"h-9 w-9 shrink-0 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <MailIcon />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon && <item.icon />}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BellIcon,\n  CreditCardIcon,\n  LogOutIcon,\n  MoreVerticalIcon,\n  UserCircleIcon,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {user.email}\n                </span>\n              </div>\n              <MoreVerticalIcon className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <UserCircleIcon />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCardIcon />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <BellIcon />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOutIcon />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/section-cards.tsx",
+      "content": "import { TrendingDownIcon, TrendingUpIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:shadow-xs @xl/main:grid-cols-2 @5xl/main:grid-cols-4 grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card lg:px-6\">\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            $1,250.00\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +12.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            1,234\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingDownIcon className=\"size-3\" />\n              -20%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period <TrendingDownIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            45,678\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +12.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            4.5%\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +4.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/site-header.tsx",
+      "content": "import { Separator } from \"@/registry/new-york/ui/separator\"\nimport { SidebarTrigger } from \"@/registry/new-york/ui/sidebar\"\n\nexport function SiteHeader() {\n  return (\n    <header className=\"group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear\">\n      <div className=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\n        <SidebarTrigger className=\"-ml-1\" />\n        <Separator\n          orientation=\"vertical\"\n          className=\"mx-2 data-[orientation=vertical]:h-4\"\n        />\n        <h1 className=\"text-base font-medium\">Documents</h1>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/data-table-demo.json b/apps/v4/public/r/styles/new-york/data-table-demo.json
new file mode 100644
index 00000000000..e09d49409b3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/data-table-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-table-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "data-table"
+  ],
+  "files": [
+    {
+      "path": "examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  SortingState,\n  VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nconst data: Payment[] = [\n  {\n    id: \"m5gr84i9\",\n    amount: 316,\n    status: \"success\",\n    email: \"ken99@example.com\",\n  },\n  {\n    id: \"3u1reuv4\",\n    amount: 242,\n    status: \"success\",\n    email: \"Abe45@example.com\",\n  },\n  {\n    id: \"derv1ws0\",\n    amount: 837,\n    status: \"processing\",\n    email: \"Monserrat44@example.com\",\n  },\n  {\n    id: \"5kma53ae\",\n    amount: 874,\n    status: \"success\",\n    email: \"Silas22@example.com\",\n  },\n  {\n    id: \"bhqecj4p\",\n    amount: 721,\n    status: \"failed\",\n    email: \"carmella@example.com\",\n  },\n]\n\nexport type Payment = {\n  id: string\n  amount: number\n  status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n  email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n    ),\n  },\n  {\n    accessorKey: \"email\",\n    header: ({ column }) => {\n      return (\n        <Button\n          variant=\"ghost\"\n          onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n        >\n          Email\n          <ArrowUpDown />\n        </Button>\n      )\n    },\n    cell: ({ row }) => <div className=\"lowercase\">{row.getValue(\"email\")}</div>,\n  },\n  {\n    accessorKey: \"amount\",\n    header: () => <div className=\"text-right\">Amount</div>,\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"amount\"))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n\n      return <div className=\"text-right font-medium\">{formatted}</div>\n    },\n  },\n  {\n    id: \"actions\",\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" className=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem\n              onClick={() => navigator.clipboard.writeText(payment.id)}\n            >\n              Copy payment ID\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>View customer</DropdownMenuItem>\n            <DropdownMenuItem>View payment details</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      )\n    },\n  },\n]\n\nexport default function DataTableDemo() {\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [rowSelection, setRowSelection] = React.useState({})\n\n  const table = useReactTable({\n    data,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n  })\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-center py-4\">\n        <Input\n          placeholder=\"Filter emails...\"\n          value={(table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"}\n          onChange={(event) =>\n            table.getColumn(\"email\")?.setFilterValue(event.target.value)\n          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDown />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {table\n              .getAllColumns()\n              .filter((column) => column.getCanHide())\n              .map((column) => {\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    className=\"capitalize\"\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {column.id}\n                  </DropdownMenuCheckboxItem>\n                )\n              })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex items-center justify-end space-x-2 py-4\">\n        <div className=\"flex-1 text-sm text-muted-foreground\">\n          {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n          {table.getFilteredRowModel().rows.length} row(s) selected.\n        </div>\n        <div className=\"space-x-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            Previous\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            Next\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/date-picker-demo.json b/apps/v4/public/r/styles/new-york/date-picker-demo.json
new file mode 100644
index 00000000000..cba98a1feb8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/date-picker-demo.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/date-picker-form.json b/apps/v4/public/r/styles/new-york/date-picker-form.json
new file mode 100644
index 00000000000..0a1ad1ae805
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/date-picker-form.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function DatePickerForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/date-picker-with-presets.json b/apps/v4/public/r/styles/new-york/date-picker-with-presets.json
new file mode 100644
index 00000000000..34ddf382588
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/date-picker-with-presets.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-presets",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-presets.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function DatePickerWithPresets() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"flex w-auto flex-col space-y-2 p-2\"\n      >\n        <Select\n          onValueChange={(value) =>\n            setDate(addDays(new Date(), parseInt(value)))\n          }\n        >\n          <SelectTrigger>\n            <SelectValue placeholder=\"Select\" />\n          </SelectTrigger>\n          <SelectContent position=\"popper\">\n            <SelectItem value=\"0\">Today</SelectItem>\n            <SelectItem value=\"1\">Tomorrow</SelectItem>\n            <SelectItem value=\"3\">In 3 days</SelectItem>\n            <SelectItem value=\"7\">In a week</SelectItem>\n          </SelectContent>\n        </Select>\n        <div className=\"rounded-md border\">\n          <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/date-picker-with-range.json b/apps/v4/public/r/styles/new-york/date-picker-with-range.json
new file mode 100644
index 00000000000..e5cee0ece13
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/date-picker-with-range.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-range",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-range.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function DatePickerWithRange({\n  className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(2022, 0, 20),\n    to: addDays(new Date(2022, 0, 20), 20),\n  })\n\n  return (\n    <div className={cn(\"grid gap-2\", className)}>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id=\"date\"\n            variant={\"outline\"}\n            className={cn(\n              \"w-[300px] justify-start text-left font-normal\",\n              !date && \"text-muted-foreground\"\n            )}\n          >\n            <CalendarIcon />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            initialFocus\n            mode=\"range\"\n            defaultMonth={date?.from}\n            selected={date}\n            onSelect={setDate}\n            numberOfMonths={2}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/dialog-close-button.json b/apps/v4/public/r/styles/new-york/dialog-close-button.json
new file mode 100644
index 00000000000..79b413d16f3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/dialog-close-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-close-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-close-button.tsx",
+      "content": "import { Copy } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function DialogCloseButton() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Share</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share link</DialogTitle>\n          <DialogDescription>\n            Anyone who has this link will be able to view this.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex items-center space-x-2\">\n          <div className=\"grid flex-1 gap-2\">\n            <Label htmlFor=\"link\" className=\"sr-only\">\n              Link\n            </Label>\n            <Input\n              id=\"link\"\n              defaultValue=\"https://ui.shadcn.com/docs/installation\"\n              readOnly\n            />\n          </div>\n          <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n            <span className=\"sr-only\">Copy</span>\n            <Copy />\n          </Button>\n        </div>\n        <DialogFooter className=\"sm:justify-start\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"secondary\">\n              Close\n            </Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/dialog-demo.json b/apps/v4/public/r/styles/new-york/dialog-demo.json
new file mode 100644
index 00000000000..33b74e08a36
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/dialog-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/dialog.json b/apps/v4/public/r/styles/new-york/dialog.json
new file mode 100644
index 00000000000..46c640bb760
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/dialog.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/drawer-demo.json b/apps/v4/public/r/styles/new-york/drawer-demo.json
new file mode 100644
index 00000000000..05d3f0f92c0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/drawer-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport default function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/drawer-dialog.json b/apps/v4/public/r/styles/new-york/drawer-dialog.json
new file mode 100644
index 00000000000..9815b9cf867
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/drawer-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-dialog",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "drawer",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-dialog.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Edit Profile</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you're done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-4\", className)}>\n      <div className=\"grid gap-2\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-2\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/drawer.json b/apps/v4/public/r/styles/new-york/drawer.json
new file mode 100644
index 00000000000..4ea15139020
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/drawer.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "vaul",
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/drawer.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root\n    shouldScaleBackground={shouldScaleBackground}\n    {...props}\n  />\n)\nDrawer.displayName = \"Drawer\"\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Overlay\n    ref={ref}\n    className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n    {...props}\n  />\n))\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\n\nconst DrawerContent = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      {children}\n    </DrawerPrimitive.Content>\n  </DrawerPortal>\n))\nDrawerContent.displayName = \"DrawerContent\"\n\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n    {...props}\n  />\n)\nDrawerHeader.displayName = \"DrawerHeader\"\n\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    {...props}\n  />\n)\nDrawerFooter.displayName = \"DrawerFooter\"\n\nconst DrawerTitle = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/dropdown-menu-checkboxes.json b/apps/v4/public/r/styles/new-york/dropdown-menu-checkboxes.json
new file mode 100644
index 00000000000..66514082ea3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/dropdown-menu-checkboxes.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-checkboxes",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-checkboxes.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\ntype Checked = DropdownMenuCheckboxItemProps[\"checked\"]\n\nexport default function DropdownMenuCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n  const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuCheckboxItem\n          checked={showStatusBar}\n          onCheckedChange={setShowStatusBar}\n        >\n          Status Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showActivityBar}\n          onCheckedChange={setShowActivityBar}\n          disabled\n        >\n          Activity Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showPanel}\n          onCheckedChange={setShowPanel}\n        >\n          Panel\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/dropdown-menu-demo.json b/apps/v4/public/r/styles/new-york/dropdown-menu-demo.json
new file mode 100644
index 00000000000..aed315aacc6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/dropdown-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Email</DropdownMenuItem>\n                <DropdownMenuItem>Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/dropdown-menu-radio-group.json b/apps/v4/public/r/styles/new-york/dropdown-menu-radio-group.json
new file mode 100644
index 00000000000..10c15d9b4dc
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/dropdown-menu-radio-group.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-radio-group",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function DropdownMenuRadioGroupDemo() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>\n          <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"bottom\">Bottom</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"right\">Right</DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/dropdown-menu.json b/apps/v4/public/r/styles/new-york/dropdown-menu.json
new file mode 100644
index 00000000000..579b0b26175
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/dropdown-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/form.json b/apps/v4/public/r/styles/new-york/form.json
new file mode 100644
index 00000000000..c71038d1757
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/form.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "form",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-label",
+    "@radix-ui/react-slot",
+    "@hookform/resolvers",
+    "zod",
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "ui/form.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-[0.8rem] text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-[0.8rem] font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/hover-card-demo.json b/apps/v4/public/r/styles/new-york/hover-card-demo.json
new file mode 100644
index 00000000000..0ad5c112367
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/hover-card-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "hover-card"
+  ],
+  "files": [
+    {
+      "path": "examples/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-muted-foreground\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/hover-card.json b/apps/v4/public/r/styles/new-york/hover-card.json
new file mode 100644
index 00000000000..0bbe76aa4bd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/hover-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-hover-card"
+  ],
+  "files": [
+    {
+      "path": "ui/hover-card.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/index.json b/apps/v4/public/r/styles/new-york/index.json
new file mode 100644
index 00000000000..924399da430
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/index.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {}
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-demo.json b/apps/v4/public/r/styles/new-york/input-demo.json
new file mode 100644
index 00000000000..9bde26311d9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-demo.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\n\nexport default function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-disabled.json b/apps/v4/public/r/styles/new-york/input-disabled.json
new file mode 100644
index 00000000000..7fe97a4962f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-disabled.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\n\nexport default function InputDisabled() {\n  return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-file.json b/apps/v4/public/r/styles/new-york/input-file.json
new file mode 100644
index 00000000000..363f7363df9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-file.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-file",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-file.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function InputFile() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"picture\">Picture</Label>\n      <Input id=\"picture\" type=\"file\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-form.json b/apps/v4/public/r/styles/new-york/input-form.json
new file mode 100644
index 00000000000..12dbeddcc50
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport { Input } from \"@/registry/new-york/ui/input\"\n\nconst FormSchema = z.object({\n  username: z.string().min(2, {\n    message: \"Username must be at least 2 characters.\",\n  }),\n})\n\nexport default function InputForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      username: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-otp-controlled.json b/apps/v4/public/r/styles/new-york/input-otp-controlled.json
new file mode 100644
index 00000000000..3da231e20ff
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-otp-controlled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-controlled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nexport default function InputOTPControlled() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <div className=\"space-y-2\">\n      <InputOTP\n        maxLength={6}\n        value={value}\n        onChange={(value) => setValue(value)}\n      >\n        <InputOTPGroup>\n          <InputOTPSlot index={0} />\n          <InputOTPSlot index={1} />\n          <InputOTPSlot index={2} />\n          <InputOTPSlot index={3} />\n          <InputOTPSlot index={4} />\n          <InputOTPSlot index={5} />\n        </InputOTPGroup>\n      </InputOTP>\n      <div className=\"text-center text-sm\">\n        {value === \"\" ? (\n          <>Enter your one-time password.</>\n        ) : (\n          <>You entered: {value}</>\n        )}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-otp-demo.json b/apps/v4/public/r/styles/new-york/input-otp-demo.json
new file mode 100644
index 00000000000..a0626b0856a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-otp-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-demo.tsx",
+      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-otp-form.json b/apps/v4/public/r/styles/new-york/input-otp-form.json
new file mode 100644
index 00000000000..93ad4103e72
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-otp-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nconst FormSchema = z.object({\n  pin: z.string().min(6, {\n    message: \"Your one-time password must be 6 characters.\",\n  }),\n})\n\nexport default function InputOTPForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      pin: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"pin\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>One-Time Password</FormLabel>\n              <FormControl>\n                <InputOTP maxLength={6} {...field}>\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormControl>\n              <FormDescription>\n                Please enter the one-time password sent to your phone.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-otp-pattern.json b/apps/v4/public/r/styles/new-york/input-otp-pattern.json
new file mode 100644
index 00000000000..0e099cc1444
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-otp-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-pattern",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-pattern.tsx",
+      "content": "import { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nexport default function InputOTPPattern() {\n  return (\n    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-otp-separator.json b/apps/v4/public/r/styles/new-york/input-otp-separator.json
new file mode 100644
index 00000000000..ced94265245
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-otp-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-separator",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-separator.tsx",
+      "content": "import React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nexport default function InputOTPWithSeparator() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-otp.json b/apps/v4/public/r/styles/new-york/input-otp.json
new file mode 100644
index 00000000000..0ce810ae02d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-otp.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "ui/input-otp.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Minus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\n      \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n      containerClassName\n    )}\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-1 ring-ring\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Minus />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-with-button.json b/apps/v4/public/r/styles/new-york/input-with-button.json
new file mode 100644
index 00000000000..cd6eba8a71d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-with-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\n\nexport default function InputWithButton() {\n  return (\n    <div className=\"flex w-full max-w-sm items-center space-x-2\">\n      <Input type=\"email\" placeholder=\"Email\" />\n      <Button type=\"submit\">Subscribe</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-with-label.json b/apps/v4/public/r/styles/new-york/input-with-label.json
new file mode 100644
index 00000000000..61c8e2dee9d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-with-label.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-label",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-label.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function InputWithLabel() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email\">Email</Label>\n      <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input-with-text.json b/apps/v4/public/r/styles/new-york/input-with-text.json
new file mode 100644
index 00000000000..7ed9919ea6a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input-with-text.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-text.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function InputWithText() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email-2\">Email</Label>\n      <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n      <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/input.json b/apps/v4/public/r/styles/new-york/input.json
new file mode 100644
index 00000000000..0ca4eb918a2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/input.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "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",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/label-demo.json b/apps/v4/public/r/styles/new-york/label-demo.json
new file mode 100644
index 00000000000..db9a98d6e3b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/label-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/label.json b/apps/v4/public/r/styles/new-york/label.json
new file mode 100644
index 00000000000..9731d7b73a3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/label.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-label"
+  ],
+  "files": [
+    {
+      "path": "ui/label.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n  />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/login-01-dark.png b/apps/v4/public/r/styles/new-york/login-01-dark.png
new file mode 100644
index 00000000000..c250316cccc
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/login-01-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/login-01-light.png b/apps/v4/public/r/styles/new-york/login-01-light.png
new file mode 100644
index 00000000000..69e4efcc891
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/login-01-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/login-01.json b/apps/v4/public/r/styles/new-york/login-01.json
new file mode 100644
index 00000000000..32a4f828434
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/login-01.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple login form.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york/blocks/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": "blocks/login-01/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>\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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/login-02-dark.png b/apps/v4/public/r/styles/new-york/login-02-dark.png
new file mode 100644
index 00000000000..26a61e686bb
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/login-02-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/login-02-light.png b/apps/v4/public/r/styles/new-york/login-02-light.png
new file mode 100644
index 00000000000..a5f7503403d
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/login-02-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/login-02.json b/apps/v4/public/r/styles/new-york/login-02.json
new file mode 100644
index 00000000000..15c7f068219
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/login-02.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/login-03-dark.png b/apps/v4/public/r/styles/new-york/login-03-dark.png
new file mode 100644
index 00000000000..430199c514f
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/login-03-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/login-03-light.png b/apps/v4/public/r/styles/new-york/login-03-light.png
new file mode 100644
index 00000000000..5df8b428540
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/login-03-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/login-03.json b/apps/v4/public/r/styles/new-york/login-03.json
new file mode 100644
index 00000000000..384ca9a0819
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/login-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/login-04-dark.png b/apps/v4/public/r/styles/new-york/login-04-dark.png
new file mode 100644
index 00000000000..11bb75052dd
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/login-04-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/login-04-light.png b/apps/v4/public/r/styles/new-york/login-04-light.png
new file mode 100644
index 00000000000..d41f49a5bd0
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/login-04-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/login-04.json b/apps/v4/public/r/styles/new-york/login-04.json
new file mode 100644
index 00000000000..cd33117a255
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/login-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-04/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Card, CardContent } 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.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\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                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 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              <div className=\"grid grid-cols-3 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                  <span className=\"sr-only\">Login with Apple</span>\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                  <span className=\"sr-only\">Login with Google</span>\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=\"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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\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          <div className=\"relative hidden bg-muted md: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        </CardContent>\n      </Card>\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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/login-05-dark.png b/apps/v4/public/r/styles/new-york/login-05-dark.png
new file mode 100644
index 00000000000..fbd54d230bd
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/login-05-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/login-05-light.png b/apps/v4/public/r/styles/new-york/login-05-light.png
new file mode 100644
index 00000000000..5799e89dc56
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/login-05-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/login-05.json b/apps/v4/public/r/styles/new-york/login-05.json
new file mode 100644
index 00000000000..b1be986de5b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/login-05.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/menubar-demo.json b/apps/v4/public/r/styles/new-york/menubar-demo.json
new file mode 100644
index 00000000000..80ca3b848a0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/menubar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "menubar"
+  ],
+  "files": [
+    {
+      "path": "examples/menubar-demo.tsx",
+      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/new-york/ui/menubar\"\n\nexport default function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/menubar.json b/apps/v4/public/r/styles/new-york/menubar.json
new file mode 100644
index 00000000000..87eb8707733
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/menubar.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-menubar"
+  ],
+  "files": [
+    {
+      "path": "ui/menubar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup {...props} />\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n    ref\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Circle className=\"h-4 w-4 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarPortal,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarGroup,\n  MenubarSub,\n  MenubarShortcut,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/mode-toggle.json b/apps/v4/public/r/styles/new-york/mode-toggle.json
new file mode 100644
index 00000000000..5d82bd958de
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/mode-toggle.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mode-toggle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n  const { setTheme } = useTheme()\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"icon\">\n          <Sun className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n          <Moon className=\"absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n          <span className=\"sr-only\">Toggle theme</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n          Light\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n          Dark\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n          System\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/navigation-menu-demo.json b/apps/v4/public/r/styles/new-york/navigation-menu-demo.json
new file mode 100644
index 00000000000..b474ba02029
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/navigation-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/new-york/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <Icons.logo className=\"h-6 w-6\" />\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\n                      Beautifully designed components built with Radix UI and\n                      Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nconst ListItem = React.forwardRef<\n  React.ElementRef<\"a\">,\n  React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          ref={ref}\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"text-sm font-medium leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/navigation-menu.json b/apps/v4/public/r/styles/new-york/navigation-menu.json
new file mode 100644
index 00000000000..bb01c99a789
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/navigation-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "ui/navigation-menu.tsx",
+      "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center space-x-1\",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDown\n      className=\"relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto \",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/pagination-demo.json b/apps/v4/public/r/styles/new-york/pagination-demo.json
new file mode 100644
index 00000000000..7048db45db0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/pagination-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "pagination"
+  ],
+  "files": [
+    {
+      "path": "examples/pagination-demo.tsx",
+      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/new-york/ui/pagination\"\n\nexport default function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/pagination.json b/apps/v4/public/r/styles/new-york/pagination.json
new file mode 100644
index 00000000000..55eff111fe1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/pagination.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/pagination.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\n  />\n)\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\"flex flex-row items-center gap-1\", className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? \"page\" : undefined}\n    className={cn(\n      buttonVariants({\n        variant: isActive ? \"outline\" : \"ghost\",\n        size,\n      }),\n      className\n    )}\n    {...props}\n  />\n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    size=\"default\"\n    className={cn(\"gap-1 pl-2.5\", className)}\n    {...props}\n  >\n    <ChevronLeft className=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to next page\"\n    size=\"default\"\n    className={cn(\"gap-1 pr-2.5\", className)}\n    {...props}\n  >\n    <span>Next</span>\n    <ChevronRight className=\"h-4 w-4\" />\n  </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/popover-demo.json b/apps/v4/public/r/styles/new-york/popover-demo.json
new file mode 100644
index 00000000000..6d87bdeaae1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/popover-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/popover-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/popover.json b/apps/v4/public/r/styles/new-york/popover.json
new file mode 100644
index 00000000000..47f9e82a30f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/popover.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-popover"
+  ],
+  "files": [
+    {
+      "path": "ui/popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/progress-demo.json b/apps/v4/public/r/styles/new-york/progress-demo.json
new file mode 100644
index 00000000000..4ec56fd17c4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/progress-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "progress"
+  ],
+  "files": [
+    {
+      "path": "examples/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/new-york/ui/progress\"\n\nexport default function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/progress.json b/apps/v4/public/r/styles/new-york/progress.json
new file mode 100644
index 00000000000..cf128f72320
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/progress.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-progress"
+  ],
+  "files": [
+    {
+      "path": "ui/progress.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n  <ProgressPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative h-2 w-full overflow-hidden rounded-full bg-primary/20\",\n      className\n    )}\n    {...props}\n  >\n    <ProgressPrimitive.Indicator\n      className=\"h-full w-full flex-1 bg-primary transition-all\"\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n    />\n  </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/radio-group-demo.json b/apps/v4/public/r/styles/new-york/radio-group-demo.json
new file mode 100644
index 00000000000..2790d94f05b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/radio-group-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/new-york/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/radio-group-form.json b/apps/v4/public/r/styles/new-york/radio-group-form.json
new file mode 100644
index 00000000000..980a6b01d71
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/radio-group-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "radio-group",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/new-york/ui/radio-group\"\n\nconst FormSchema = z.object({\n  type: z.enum([\"all\", \"mentions\", \"none\"], {\n    required_error: \"You need to select a notification type.\",\n  }),\n})\n\nexport default function RadioGroupForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"type\"\n          render={({ field }) => (\n            <FormItem className=\"space-y-3\">\n              <FormLabel>Notify me about...</FormLabel>\n              <FormControl>\n                <RadioGroup\n                  onValueChange={field.onChange}\n                  defaultValue={field.value}\n                  className=\"flex flex-col space-y-1\"\n                >\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"all\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      All new messages\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"mentions\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      Direct messages and mentions\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"none\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">Nothing</FormLabel>\n                  </FormItem>\n                </RadioGroup>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/radio-group.json b/apps/v4/public/r/styles/new-york/radio-group.json
new file mode 100644
index 00000000000..329ad552700
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/radio-group.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-radio-group"
+  ],
+  "files": [
+    {
+      "path": "ui/radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"grid gap-2\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n        <Circle className=\"h-3.5 w-3.5 fill-primary\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/registry.json b/apps/v4/public/r/styles/new-york/registry.json
new file mode 100644
index 00000000000..ffced639981
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/registry.json
@@ -0,0 +1,5793 @@
+{
+  "name": "shadcn/ui",
+  "homepage": "https://ui.shadcn.com",
+  "items": [
+    {
+      "name": "index",
+      "type": "registry:style",
+      "dependencies": [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "tailwind": {
+        "config": {
+          "plugins": ["require(\"tailwindcss-animate\")"]
+        }
+      },
+      "cssVars": {}
+    },
+    {
+      "name": "style",
+      "type": "registry:style",
+      "dependencies": [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "tailwind": {
+        "config": {
+          "plugins": ["require(\"tailwindcss-animate\")"]
+        }
+      },
+      "cssVars": {}
+    },
+    {
+      "name": "accordion",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-accordion"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/accordion.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "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"
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "alert",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/alert.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-alert-dialog"],
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/alert-dialog.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-aspect-ratio"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/aspect-ratio.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "avatar",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-avatar"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/avatar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-slot"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/badge.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-slot"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/breadcrumb.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-slot"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/button.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar",
+      "type": "registry:ui",
+      "dependencies": ["react-day-picker@latest", "date-fns"],
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/calendar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/card.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel",
+      "type": "registry:ui",
+      "dependencies": ["embla-carousel-react"],
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/carousel.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart",
+      "type": "registry:ui",
+      "dependencies": ["recharts@2.15.4", "lucide-react"],
+      "registryDependencies": ["card"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/chart.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-checkbox"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/checkbox.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "collapsible",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-collapsible"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/collapsible.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command",
+      "type": "registry:ui",
+      "dependencies": ["cmdk"],
+      "registryDependencies": ["dialog"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/command.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "context-menu",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-context-menu"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/context-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-dialog"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/dialog.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer",
+      "type": "registry:ui",
+      "dependencies": ["vaul", "@radix-ui/react-dialog"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/drawer.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-dropdown-menu"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/dropdown-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "form",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label",
+        "@radix-ui/react-slot",
+        "@hookform/resolvers",
+        "zod",
+        "react-hook-form"
+      ],
+      "registryDependencies": ["button", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/form.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "hover-card",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-hover-card"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/hover-card.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/input.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp",
+      "type": "registry:ui",
+      "dependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/input-otp.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-label"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/label.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "menubar",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-menubar"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/menubar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-navigation-menu"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/navigation-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "pagination",
+      "type": "registry:ui",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/pagination.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "popover",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-popover"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/popover.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-progress"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/progress.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-radio-group"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/radio-group.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable",
+      "type": "registry:ui",
+      "dependencies": ["react-resizable-panels"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/resizable.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-scroll-area"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/scroll-area.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-select"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/select.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "separator",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-separator"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/separator.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-dialog"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/sheet.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "separator",
+        "sheet",
+        "tooltip",
+        "input",
+        "use-mobile",
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/sidebar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "colors": {
+                "sidebar": {
+                  "DEFAULT": "hsl(var(--sidebar-background))",
+                  "foreground": "hsl(var(--sidebar-foreground))",
+                  "primary": "hsl(var(--sidebar-primary))",
+                  "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                  "accent": "hsl(var(--sidebar-accent))",
+                  "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                  "border": "hsl(var(--sidebar-border))",
+                  "ring": "hsl(var(--sidebar-ring))"
+                }
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "sidebar-background": "0 0% 98%",
+          "sidebar-foreground": "240 5.3% 26.1%",
+          "sidebar-primary": "240 5.9% 10%",
+          "sidebar-primary-foreground": "0 0% 98%",
+          "sidebar-accent": "240 4.8% 95.9%",
+          "sidebar-accent-foreground": "240 5.9% 10%",
+          "sidebar-border": "220 13% 91%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        },
+        "dark": {
+          "sidebar-background": "240 5.9% 10%",
+          "sidebar-foreground": "240 4.8% 95.9%",
+          "sidebar-primary": "224.3 76.3% 48%",
+          "sidebar-primary-foreground": "0 0% 100%",
+          "sidebar-accent": "240 3.7% 15.9%",
+          "sidebar-accent-foreground": "240 4.8% 95.9%",
+          "sidebar-border": "240 3.7% 15.9%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        }
+      }
+    },
+    {
+      "name": "skeleton",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/skeleton.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "slider",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-slider"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/slider.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sonner",
+      "type": "registry:ui",
+      "dependencies": ["sonner", "next-themes"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/sonner.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-switch"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/switch.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "table",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/table.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tabs",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-tabs"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/tabs.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/textarea.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-toast"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/toast.tsx",
+          "type": "registry:ui",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/hooks/use-toast.ts",
+          "type": "registry:hook",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/ui/toaster.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-toggle"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/toggle.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-toggle-group"],
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/toggle-group.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tooltip",
+      "type": "registry:ui",
+      "dependencies": ["@radix-ui/react-tooltip"],
+      "files": [
+        {
+          "path": "registry/new-york/ui/tooltip.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dashboard-01",
+      "type": "registry:block",
+      "description": "A dashboard with sidebar, charts and data table.",
+      "dependencies": [
+        "@dnd-kit/core",
+        "@dnd-kit/modifiers",
+        "@dnd-kit/sortable",
+        "@dnd-kit/utilities",
+        "@tanstack/react-table",
+        "zod"
+      ],
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "chart",
+        "card",
+        "select",
+        "tabs",
+        "table",
+        "toggle-group",
+        "badge",
+        "button",
+        "checkbox",
+        "dropdown-menu",
+        "drawer",
+        "input",
+        "avatar",
+        "sheet",
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/dashboard-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/data.json",
+          "type": "registry:file",
+          "target": "app/dashboard/data.json"
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/chart-area-interactive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/data-table.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/nav-documents.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/section-cards.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/site-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["dashboard"]
+    },
+    {
+      "name": "sidebar-01",
+      "type": "registry:block",
+      "description": "A simple sidebar with navigation grouped by section.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-01/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-01/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-01/components/version-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-02",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible sections.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-02/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-02/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-02/components/version-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-03",
+      "type": "registry:block",
+      "description": "A sidebar with submenus.",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-03/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-04",
+      "type": "registry:block",
+      "description": "A floating sidebar with submenus.",
+      "registryDependencies": ["sidebar", "breadcrumb", "separator"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-04/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-05",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-05/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-05/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-06",
+      "type": "registry:block",
+      "description": "A sidebar with submenus as dropdowns.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-06/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-06/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-06/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-07",
+      "type": "registry:block",
+      "description": "A sidebar that collapses to icons.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-07/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-07/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-07/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-07/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-07/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-07/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-08",
+      "type": "registry:block",
+      "description": "An inset sidebar with secondary navigation.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-08/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-08/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-08/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-08/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-08/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-08/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-09",
+      "type": "registry:block",
+      "description": "Collapsible nested sidebars.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-09/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-09/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-09/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-10",
+      "type": "registry:block",
+      "description": "A sidebar in a popover.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-10/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/nav-actions.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/nav-favorites.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/nav-workspaces.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-11",
+      "type": "registry:block",
+      "description": "A sidebar with a collapsible file tree.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-11/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-11/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-12",
+      "type": "registry:block",
+      "description": "A sidebar with a calendar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-12/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-12/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-12/components/calendars.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-12/components/date-picker.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-12/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-13",
+      "type": "registry:block",
+      "description": "A sidebar in a dialog.",
+      "registryDependencies": ["sidebar", "breadcrumb", "button", "dialog"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-13/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-13/components/settings-dialog.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-14",
+      "type": "registry:block",
+      "description": "A sidebar on the right.",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-14/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-14/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-15",
+      "type": "registry:block",
+      "description": "A left and right sidebar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-15/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/calendars.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/date-picker.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/nav-favorites.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/nav-workspaces.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/sidebar-left.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/sidebar-right.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "sidebar-16",
+      "type": "registry:block",
+      "description": "A sidebar with a sticky site header.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-16/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/site-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["sidebar", "dashboard"]
+    },
+    {
+      "name": "login-01",
+      "type": "registry:block",
+      "description": "A simple login form.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/login-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/login-01/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["authentication", "login"]
+    },
+    {
+      "name": "login-02",
+      "type": "registry:block",
+      "description": "A two column login page with a cover image.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/login-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/login-02/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["authentication", "login"]
+    },
+    {
+      "name": "login-03",
+      "type": "registry:block",
+      "description": "A login page with a muted background color.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/login-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/login-03/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["authentication", "login"]
+    },
+    {
+      "name": "login-04",
+      "type": "registry:block",
+      "description": "A login page with form and image.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/login-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/login-04/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["authentication", "login"]
+    },
+    {
+      "name": "login-05",
+      "type": "registry:block",
+      "description": "A simple email-only login page.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/login-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/login-05/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["authentication", "login"]
+    },
+    {
+      "name": "calendar-01",
+      "type": "registry:block",
+      "description": "A simple calendar.",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-01.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-02",
+      "type": "registry:block",
+      "description": "Multiple months with single selection.",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-02.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-03",
+      "type": "registry:block",
+      "description": "Multiple months with multiple selection.",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-03.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-04",
+      "type": "registry:block",
+      "description": "Single month with range selection",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-04.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-05",
+      "type": "registry:block",
+      "description": "Multiple months with range selection",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-05.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-06",
+      "type": "registry:block",
+      "description": "Range selection with minimum days",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-06.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-07",
+      "type": "registry:block",
+      "description": "Range selection with minimum and maximum days",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-07.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-08",
+      "type": "registry:block",
+      "description": "Calendar with disabled days",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-08.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-09",
+      "type": "registry:block",
+      "description": "Calendar with disabled weekends",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-09.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-10",
+      "type": "registry:block",
+      "description": "Today button",
+      "registryDependencies": ["calendar", "card", "button"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-10.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-11",
+      "type": "registry:block",
+      "description": "Start and end of month",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-11.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-12",
+      "type": "registry:block",
+      "description": "Localized calendar",
+      "registryDependencies": ["calendar", "card", "select"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-12.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-13",
+      "type": "registry:block",
+      "description": "With Month and Year Dropdown",
+      "registryDependencies": ["calendar", "label", "select"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-13.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-14",
+      "type": "registry:block",
+      "description": "With Booked/Unavailable Days",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-14.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-15",
+      "type": "registry:block",
+      "description": "With Week Numbers",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-15.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-16",
+      "type": "registry:block",
+      "description": "With time picker",
+      "registryDependencies": ["calendar", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-16.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-17",
+      "type": "registry:block",
+      "description": "With time picker inline",
+      "registryDependencies": ["calendar", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-17.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-18",
+      "type": "registry:block",
+      "description": "Variable size",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-18.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-19",
+      "type": "registry:block",
+      "description": "With presets",
+      "dependencies": ["date-fns"],
+      "registryDependencies": ["calendar", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-19.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-20",
+      "type": "registry:block",
+      "description": "With time presets",
+      "registryDependencies": ["calendar", "card", "button"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-20.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-21",
+      "type": "registry:block",
+      "description": "Custom days and formatters",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-21.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-22",
+      "type": "registry:block",
+      "description": "Date picker",
+      "registryDependencies": ["calendar", "popover", "button", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-22.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-23",
+      "type": "registry:block",
+      "description": "Date range picker",
+      "registryDependencies": ["calendar", "popover", "button", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-23.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-24",
+      "type": "registry:block",
+      "description": "Date and Time picker",
+      "registryDependencies": ["calendar", "popover", "button", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-24.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-25",
+      "type": "registry:block",
+      "description": "Date and Time range picker",
+      "registryDependencies": ["calendar", "popover", "button", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-25.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-26",
+      "type": "registry:block",
+      "description": "Date range picker with time",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-26.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-27",
+      "type": "registry:block",
+      "description": "Chart filter",
+      "registryDependencies": [
+        "calendar",
+        "chart",
+        "card",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-27.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-28",
+      "type": "registry:block",
+      "description": "Input with date picker",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-28.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-29",
+      "type": "registry:block",
+      "description": "Natural language date picker",
+      "dependencies": ["chrono-node"],
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-29.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-30",
+      "type": "registry:block",
+      "description": "With little-date",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-30.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-31",
+      "type": "registry:block",
+      "description": "With event slots",
+      "registryDependencies": ["calendar", "card", "button"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-31.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "700px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "calendar-32",
+      "type": "registry:block",
+      "description": "Date picker in a drawer",
+      "registryDependencies": ["calendar", "button", "drawer"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-32.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": ["calendar", "date"]
+    },
+    {
+      "name": "chart-area-axes",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-axes.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-default",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-gradient",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-gradient.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-icons",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-interactive",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart", "select"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-interactive.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-legend",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-linear",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-linear.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-stacked-expand",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-stacked-expand.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-stacked",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-area-step",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-step.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-area"]
+    },
+    {
+      "name": "chart-bar-active",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-active.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-default",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-horizontal",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-horizontal.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-interactive",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-label",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-mixed",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-mixed.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-multiple",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-negative",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-negative.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-bar-stacked",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-bar"]
+    },
+    {
+      "name": "chart-line-default",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-dots-colors",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-dots-colors.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-dots-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-dots-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-dots",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-dots.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-interactive",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-label-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-label",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-linear",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-linear.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-multiple",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-line-step",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-step.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-line"]
+    },
+    {
+      "name": "chart-pie-donut-active",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-donut-active.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-donut-text",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-donut-text.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-donut",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-donut.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-interactive",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-label-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-label-list",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-label-list.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-label",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-legend",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-separator-none",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-separator-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-simple",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-simple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-pie-stacked",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-pie"]
+    },
+    {
+      "name": "chart-radar-default",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-dots",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-dots.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-circle-fill",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-circle-fill.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-circle-no-lines",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-circle-no-lines.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-circle",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-circle.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-fill",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-fill.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-grid-none",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-icons",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-legend",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-lines-only",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-lines-only.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-multiple",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radar-radius",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-radius.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radar"]
+    },
+    {
+      "name": "chart-radial-grid",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-grid.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-radial-label",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-radial-shape",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-shape.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-radial-simple",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-simple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-radial-stacked",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-radial-text",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-text.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-radial"]
+    },
+    {
+      "name": "chart-tooltip-default",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-indicator-line",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-indicator-line.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-indicator-none",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-indicator-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-label-none",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-label-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-label-custom",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-label-formatter",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-label-formatter.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-formatter",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-formatter.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-icons",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "chart-tooltip-advanced",
+      "type": "registry:block",
+      "registryDependencies": ["card", "chart"],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-advanced.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": ["charts", "charts-tooltip"]
+    },
+    {
+      "name": "utils",
+      "type": "registry:lib",
+      "dependencies": ["clsx", "tailwind-merge"],
+      "files": [
+        {
+          "path": "registry/new-york/lib/utils.ts",
+          "type": "registry:lib",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "use-mobile",
+      "type": "registry:hook",
+      "files": [
+        {
+          "path": "registry/new-york/hooks/use-mobile.tsx",
+          "type": "registry:hook",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "use-toast",
+      "type": "registry:hook",
+      "files": [
+        {
+          "path": "registry/new-york/hooks/use-toast.ts",
+          "type": "registry:hook",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "theme-daylight",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "36 39% 88%",
+          "foreground": "36 45% 15%",
+          "primary": "36 45% 70%",
+          "primary-foreground": "36 45% 11%",
+          "secondary": "40 35% 77%",
+          "secondary-foreground": "36 45% 25%",
+          "accent": "36 64% 57%",
+          "accent-foreground": "36 72% 17%",
+          "destructive": "0 84% 37%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "36 33% 75%",
+          "muted-foreground": "36 45% 25%",
+          "card": "36 46% 82%",
+          "card-foreground": "36 45% 20%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "border": "36 45% 60%",
+          "input": "36 45% 60%",
+          "ring": "36 45% 30%",
+          "chart-1": "25 34% 28%",
+          "chart-2": "26 36% 34%",
+          "chart-3": "28 40% 40%",
+          "chart-4": "31 41% 48%",
+          "chart-5": "35 43% 53%"
+        },
+        "dark": {
+          "background": "36 39% 88%",
+          "foreground": "36 45% 15%",
+          "primary": "36 45% 70%",
+          "primary-foreground": "36 45% 11%",
+          "secondary": "40 35% 77%",
+          "secondary-foreground": "36 45% 25%",
+          "accent": "36 64% 57%",
+          "accent-foreground": "36 72% 17%",
+          "destructive": "0 84% 37%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "36 33% 75%",
+          "muted-foreground": "36 45% 25%",
+          "card": "36 46% 82%",
+          "card-foreground": "36 45% 20%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "border": "36 45% 60%",
+          "input": "36 45% 60%",
+          "ring": "36 45% 30%",
+          "chart-1": "25 34% 28%",
+          "chart-2": "26 36% 34%",
+          "chart-3": "28 40% 40%",
+          "chart-4": "31 41% 48%",
+          "chart-5": "35 43% 53%"
+        }
+      }
+    },
+    {
+      "name": "theme-midnight",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "240 5% 6%",
+          "foreground": "60 5% 90%",
+          "primary": "240 0% 90%",
+          "primary-foreground": "60 0% 0%",
+          "secondary": "240 4% 15%",
+          "secondary-foreground": "60 5% 85%",
+          "accent": "240 0% 13%",
+          "accent-foreground": "60 0% 100%",
+          "destructive": "0 60% 50%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "240 5% 25%",
+          "muted-foreground": "60 5% 85%",
+          "card": "240 4% 10%",
+          "card-foreground": "60 5% 90%",
+          "popover": "240 5% 15%",
+          "popover-foreground": "60 5% 85%",
+          "border": "240 6% 20%",
+          "input": "240 6% 20%",
+          "ring": "240 5% 90%",
+          "chart-1": "359 2% 90%",
+          "chart-2": "240 1% 74%",
+          "chart-3": "240 1% 58%",
+          "chart-4": "240 1% 42%",
+          "chart-5": "240 2% 26%"
+        },
+        "dark": {
+          "background": "240 5% 6%",
+          "foreground": "60 5% 90%",
+          "primary": "240 0% 90%",
+          "primary-foreground": "60 0% 0%",
+          "secondary": "240 4% 15%",
+          "secondary-foreground": "60 5% 85%",
+          "accent": "240 0% 13%",
+          "accent-foreground": "60 0% 100%",
+          "destructive": "0 60% 50%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "240 5% 25%",
+          "muted-foreground": "60 5% 85%",
+          "card": "240 4% 10%",
+          "card-foreground": "60 5% 90%",
+          "popover": "240 5% 15%",
+          "popover-foreground": "60 5% 85%",
+          "border": "240 6% 20%",
+          "input": "240 6% 20%",
+          "ring": "240 5% 90%",
+          "chart-1": "359 2% 90%",
+          "chart-2": "240 1% 74%",
+          "chart-3": "240 1% 58%",
+          "chart-4": "240 1% 42%",
+          "chart-5": "240 2% 26%"
+        }
+      }
+    },
+    {
+      "name": "theme-emerald",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "0 0% 100%",
+          "foreground": "240 10% 3.9%",
+          "card": "0 0% 100%",
+          "card-foreground": "240 10% 3.9%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "primary": "142 86% 28%",
+          "primary-foreground": "356 29% 98%",
+          "secondary": "240 4.8% 95.9%",
+          "secondary-foreground": "240 5.9% 10%",
+          "muted": "240 4.8% 95.9%",
+          "muted-foreground": "240 3.8% 45%",
+          "accent": "240 4.8% 95.9%",
+          "accent-foreground": "240 5.9% 10%",
+          "destructive": "0 72% 51%",
+          "destructive-foreground": "0 0% 98%",
+          "border": "240 5.9% 90%",
+          "input": "240 5.9% 90%",
+          "ring": "142 86% 28%",
+          "chart-1": "139 65% 20%",
+          "chart-2": "140 74% 44%",
+          "chart-3": "142 88% 28%",
+          "chart-4": "137 55% 15%",
+          "chart-5": "141 40% 9%"
+        },
+        "dark": {
+          "background": "240 10% 3.9%",
+          "foreground": "0 0% 98%",
+          "card": "240 10% 3.9%",
+          "card-foreground": "0 0% 98%",
+          "popover": "240 10% 3.9%",
+          "popover-foreground": "0 0% 98%",
+          "primary": "142 86% 28%",
+          "primary-foreground": "356 29% 98%",
+          "secondary": "240 4.8% 95.9%",
+          "secondary-foreground": "240 5.9% 10%",
+          "muted": "240 3.7% 15.9%",
+          "muted-foreground": "240 5% 64.9%",
+          "accent": "240 3.7% 15.9%",
+          "accent-foreground": "0 0% 98%",
+          "destructive": "0 72% 51%",
+          "destructive-foreground": "0 0% 98%",
+          "border": "240 3.7% 15.9%",
+          "input": "240 3.7% 15.9%",
+          "ring": "142 86% 28%",
+          "chart-1": "142 88% 28%",
+          "chart-2": "139 65% 20%",
+          "chart-3": "140 74% 24%",
+          "chart-4": "137 55% 15%",
+          "chart-5": "141 40% 9%"
+        }
+      }
+    },
+    {
+      "name": "sink",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "accordion",
+        "alert",
+        "alert-dialog",
+        "aspect-ratio",
+        "avatar",
+        "badge",
+        "breadcrumb",
+        "button",
+        "calendar",
+        "card",
+        "carousel",
+        "chart",
+        "checkbox",
+        "collapsible",
+        "command",
+        "context-menu",
+        "dialog",
+        "drawer",
+        "dropdown-menu",
+        "hover-card",
+        "input",
+        "input-otp",
+        "label",
+        "menubar",
+        "navigation-menu",
+        "pagination",
+        "popover",
+        "progress",
+        "radio-group",
+        "resizable",
+        "scroll-area",
+        "select",
+        "separator",
+        "sheet",
+        "sidebar",
+        "skeleton",
+        "slider",
+        "sonner",
+        "switch",
+        "table",
+        "tabs",
+        "textarea",
+        "toast",
+        "toggle",
+        "toggle-group",
+        "tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sink/page.tsx",
+          "type": "registry:page",
+          "target": "app/sink/page.tsx"
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/component-wrapper.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/accordion-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/alert-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/alert-dialog-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/aspect-ratio-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/avatar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/badge-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/breadcrumb-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/calendar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/card-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/carousel-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/checkbox-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/collapsible-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/combobox-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/command-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/context-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/date-picker-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/dialog-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/drawer-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/dropdown-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/hover-card-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/input-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/input-otp-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/label-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/menubar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/navigation-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/pagination-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/popover-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/progress-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/radio-group-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/resizable-handle.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/scroll-area-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/select-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/separator-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/sheet-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/skeleton-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/slider-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/sonner-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/switch-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/table-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/tabs-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/textarea-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toast-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toggle-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toggle-group-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/tooltip-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/badge-destructive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/badge-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/badge-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-destructive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-ghost.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-link.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-loading.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-with-icon.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toggle-disabled.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toggle-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toggle-with-text.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-demo",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-header",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-footer",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-footer.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-group.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-group-collapsible.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-group-action.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-menu.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-menu-action.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-sub",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-menu-sub.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-menu-collapsible.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-badge",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-menu-badge.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-rsc",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-rsc.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-controlled",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-controlled.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-01",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-01.tsx",
+          "type": "registry:component",
+          "target": "components/sidebar-01.tsx"
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-02",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-02.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-03",
+      "type": "registry:internal",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-03.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-04",
+      "type": "registry:internal",
+      "registryDependencies": ["sidebar", "breadcrumb", "separator"],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-04.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-05",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-05.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-06",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-06.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-07",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-07.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-08",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-08.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-09",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-09.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-10",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-10.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-11",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-11.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-12",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-12.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-13",
+      "type": "registry:internal",
+      "registryDependencies": ["sidebar", "breadcrumb", "button", "dialog"],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-13.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-14",
+      "type": "registry:internal",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-14.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-15",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-15.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-login-01",
+      "type": "registry:internal",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/internal/login-01.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "accordion-demo",
+      "type": "registry:example",
+      "registryDependencies": ["accordion"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/accordion-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-demo",
+      "type": "registry:example",
+      "registryDependencies": ["alert"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/alert-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-destructive",
+      "type": "registry:example",
+      "registryDependencies": ["alert"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/alert-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": ["alert-dialog", "button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/alert-dialog-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio-demo",
+      "type": "registry:example",
+      "registryDependencies": ["aspect-ratio"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/aspect-ratio-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "avatar-demo",
+      "type": "registry:example",
+      "registryDependencies": ["avatar"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/avatar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-demo",
+      "type": "registry:example",
+      "registryDependencies": ["badge"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/badge-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-destructive",
+      "type": "registry:example",
+      "registryDependencies": ["badge"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/badge-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-outline",
+      "type": "registry:example",
+      "registryDependencies": ["badge"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/badge-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-secondary",
+      "type": "registry:example",
+      "registryDependencies": ["badge"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/badge-secondary.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-demo",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-separator",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-separator.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-dropdown",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-dropdown.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-ellipsis",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-ellipsis.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-link",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-link.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-responsive",
+      "type": "registry:example",
+      "registryDependencies": ["breadcrumb"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-responsive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-demo",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-secondary",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-secondary.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-destructive",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-outline",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-ghost",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-ghost.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-link",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-link.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-with-icon",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-with-icon.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-loading",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-loading.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-icon",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-icon.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-as-child",
+      "type": "registry:example",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-as-child.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar-demo",
+      "type": "registry:example",
+      "registryDependencies": ["calendar"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/calendar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar-form",
+      "type": "registry:example",
+      "registryDependencies": ["calendar", "form", "popover"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/calendar-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card-demo",
+      "type": "registry:example",
+      "registryDependencies": ["card", "button", "switch"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/card-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card-with-form",
+      "type": "registry:example",
+      "registryDependencies": ["button", "card", "input", "label", "select"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/card-with-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-demo",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-size",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-size.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-spacing",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-spacing.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-orientation",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-orientation.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-api",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-api.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-plugin",
+      "type": "registry:example",
+      "registryDependencies": ["carousel"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-plugin.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-demo",
+      "type": "registry:example",
+      "registryDependencies": ["checkbox"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/checkbox-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-disabled",
+      "type": "registry:example",
+      "registryDependencies": ["checkbox"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/checkbox-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-multiple",
+      "type": "registry:example",
+      "registryDependencies": ["checkbox", "form"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/checkbox-form-multiple.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-single",
+      "type": "registry:example",
+      "registryDependencies": ["checkbox", "form"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/checkbox-form-single.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-with-text",
+      "type": "registry:example",
+      "registryDependencies": ["checkbox"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/checkbox-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "collapsible-demo",
+      "type": "registry:example",
+      "registryDependencies": ["collapsible"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/collapsible-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-demo",
+      "type": "registry:example",
+      "registryDependencies": ["command"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/combobox-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-dropdown-menu",
+      "type": "registry:example",
+      "registryDependencies": ["command", "dropdown-menu", "button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/combobox-dropdown-menu.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-form",
+      "type": "registry:example",
+      "registryDependencies": ["command", "form"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/combobox-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-popover",
+      "type": "registry:example",
+      "registryDependencies": ["combobox", "popover"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/combobox-popover.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-responsive",
+      "type": "registry:example",
+      "registryDependencies": ["combobox", "popover", "drawer"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/combobox-responsive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command-demo",
+      "type": "registry:example",
+      "registryDependencies": ["command"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/command-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command-dialog",
+      "type": "registry:example",
+      "registryDependencies": ["command", "dialog"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/command-dialog.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "context-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": ["context-menu"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/context-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "data-table-demo",
+      "type": "registry:example",
+      "registryDependencies": ["data-table"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/data-table-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-demo",
+      "type": "registry:example",
+      "dependencies": ["date-fns"],
+      "registryDependencies": ["button", "calendar", "popover"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/date-picker-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-form",
+      "type": "registry:example",
+      "dependencies": ["date-fns"],
+      "registryDependencies": ["button", "calendar", "form", "popover"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/date-picker-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-presets",
+      "type": "registry:example",
+      "dependencies": ["date-fns"],
+      "registryDependencies": ["button", "calendar", "popover", "select"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/date-picker-with-presets.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-range",
+      "type": "registry:example",
+      "dependencies": ["date-fns"],
+      "registryDependencies": ["button", "calendar", "popover"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/date-picker-with-range.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": ["dialog"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/dialog-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog-close-button",
+      "type": "registry:example",
+      "registryDependencies": ["dialog", "button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/dialog-close-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer-demo",
+      "type": "registry:example",
+      "registryDependencies": ["drawer"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/drawer-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer-dialog",
+      "type": "registry:example",
+      "registryDependencies": ["drawer", "dialog"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/drawer-dialog.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": ["dropdown-menu"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/dropdown-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-checkboxes",
+      "type": "registry:example",
+      "registryDependencies": ["dropdown-menu", "checkbox"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/dropdown-menu-checkboxes.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-radio-group",
+      "type": "registry:example",
+      "registryDependencies": ["dropdown-menu", "radio-group"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/dropdown-menu-radio-group.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "hover-card-demo",
+      "type": "registry:example",
+      "registryDependencies": ["hover-card"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/hover-card-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-demo",
+      "type": "registry:example",
+      "registryDependencies": ["input"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-disabled",
+      "type": "registry:example",
+      "registryDependencies": ["input"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-file",
+      "type": "registry:example",
+      "registryDependencies": ["input"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-file.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-form",
+      "type": "registry:example",
+      "registryDependencies": ["input", "button", "form"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-button",
+      "type": "registry:example",
+      "registryDependencies": ["input", "button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-with-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-label",
+      "type": "registry:example",
+      "registryDependencies": ["input", "button", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-with-label.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-text",
+      "type": "registry:example",
+      "registryDependencies": ["input", "button", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-demo",
+      "type": "registry:example",
+      "registryDependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-otp-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-pattern",
+      "type": "registry:example",
+      "registryDependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-otp-pattern.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-separator",
+      "type": "registry:example",
+      "registryDependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-otp-separator.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-controlled",
+      "type": "registry:example",
+      "registryDependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-otp-controlled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-form",
+      "type": "registry:example",
+      "registryDependencies": ["input-otp", "form"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-otp-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "label-demo",
+      "type": "registry:example",
+      "registryDependencies": ["label"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/label-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "menubar-demo",
+      "type": "registry:example",
+      "registryDependencies": ["menubar"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/menubar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": ["navigation-menu"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/navigation-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "pagination-demo",
+      "type": "registry:example",
+      "registryDependencies": ["pagination"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/pagination-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "popover-demo",
+      "type": "registry:example",
+      "registryDependencies": ["popover"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/popover-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "progress-demo",
+      "type": "registry:example",
+      "registryDependencies": ["progress"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/progress-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group-demo",
+      "type": "registry:example",
+      "registryDependencies": ["radio-group"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/radio-group-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group-form",
+      "type": "registry:example",
+      "registryDependencies": ["radio-group", "form"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/radio-group-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo",
+      "type": "registry:example",
+      "registryDependencies": ["resizable"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/resizable-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo-with-handle",
+      "type": "registry:example",
+      "registryDependencies": ["resizable"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/resizable-demo-with-handle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-vertical",
+      "type": "registry:example",
+      "registryDependencies": ["resizable"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/resizable-vertical.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-handle",
+      "type": "registry:example",
+      "registryDependencies": ["resizable"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/resizable-handle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-demo",
+      "type": "registry:example",
+      "registryDependencies": ["scroll-area"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/scroll-area-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-horizontal-demo",
+      "type": "registry:example",
+      "registryDependencies": ["scroll-area"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/scroll-area-horizontal-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-demo",
+      "type": "registry:example",
+      "registryDependencies": ["select"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/select-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-scrollable",
+      "type": "registry:example",
+      "registryDependencies": ["select"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/select-scrollable.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-form",
+      "type": "registry:example",
+      "registryDependencies": ["select"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/select-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "separator-demo",
+      "type": "registry:example",
+      "registryDependencies": ["separator"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/separator-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet-demo",
+      "type": "registry:example",
+      "registryDependencies": ["sheet"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/sheet-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet-side",
+      "type": "registry:example",
+      "registryDependencies": ["sheet"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/sheet-side.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "skeleton-demo",
+      "type": "registry:example",
+      "registryDependencies": ["skeleton"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/skeleton-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "skeleton-card",
+      "type": "registry:example",
+      "registryDependencies": ["skeleton"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/skeleton-card.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "slider-demo",
+      "type": "registry:example",
+      "registryDependencies": ["slider"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/slider-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sonner-demo",
+      "type": "registry:example",
+      "registryDependencies": ["sonner"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/sonner-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch-demo",
+      "type": "registry:example",
+      "registryDependencies": ["switch"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/switch-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch-form",
+      "type": "registry:example",
+      "registryDependencies": ["switch", "form"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/switch-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "table-demo",
+      "type": "registry:example",
+      "registryDependencies": ["table"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/table-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tabs-demo",
+      "type": "registry:example",
+      "registryDependencies": ["tabs"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/tabs-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-demo",
+      "type": "registry:example",
+      "registryDependencies": ["textarea"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-disabled",
+      "type": "registry:example",
+      "registryDependencies": ["textarea"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-form",
+      "type": "registry:example",
+      "registryDependencies": ["textarea", "form"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-button",
+      "type": "registry:example",
+      "registryDependencies": ["textarea", "button"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-with-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-label",
+      "type": "registry:example",
+      "registryDependencies": ["textarea", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-with-label.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-text",
+      "type": "registry:example",
+      "registryDependencies": ["textarea", "label"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-demo",
+      "type": "registry:example",
+      "registryDependencies": ["toast"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toast-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-destructive",
+      "type": "registry:example",
+      "registryDependencies": ["toast"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toast-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-simple",
+      "type": "registry:example",
+      "registryDependencies": ["toast"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toast-simple.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-with-action",
+      "type": "registry:example",
+      "registryDependencies": ["toast"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toast-with-action.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-with-title",
+      "type": "registry:example",
+      "registryDependencies": ["toast"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toast-with-title.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-demo",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-disabled",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-lg",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-lg.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-outline",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-sm",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-sm.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-single",
+      "type": "registry:example",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-single.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-demo",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-disabled",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-lg",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-lg.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-outline",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-sm",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-sm.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-with-text",
+      "type": "registry:example",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tooltip-demo",
+      "type": "registry:example",
+      "registryDependencies": ["tooltip"],
+      "files": [
+        {
+          "path": "registry/new-york/examples/tooltip-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-blockquote",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-blockquote.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h1",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-h1.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h2",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-h2.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h3",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-h3.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h4",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-h4.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-inline-code",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-inline-code.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-large",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-large.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-lead",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-lead.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-list",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-list.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-muted",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-muted.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-p",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-p.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-small",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-small.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-table",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-table.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "mode-toggle",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/mode-toggle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-bar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-grid",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-bar-demo-grid.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-axis",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-bar-demo-axis.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-tooltip",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-bar-demo-tooltip.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-legend",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-bar-demo-legend.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-tooltip-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-tooltip-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    }
+  ]
+}
diff --git a/apps/v4/public/r/styles/new-york/resizable-demo-with-handle.json b/apps/v4/public/r/styles/new-york/resizable-demo-with-handle.json
new file mode 100644
index 00000000000..cd173919889
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/resizable-demo-with-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo-with-handle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo-with-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle withHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/resizable-demo.json b/apps/v4/public/r/styles/new-york/resizable-demo.json
new file mode 100644
index 00000000000..2b0ae3c7fcd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/resizable-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/resizable-handle.json b/apps/v4/public/r/styles/new-york/resizable-handle.json
new file mode 100644
index 00000000000..92995edd87e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/resizable-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-handle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport default function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/resizable-vertical.json b/apps/v4/public/r/styles/new-york/resizable-vertical.json
new file mode 100644
index 00000000000..7cb4dc8b8fd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/resizable-vertical.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-vertical",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-vertical.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"vertical\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Header</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/resizable.json b/apps/v4/public/r/styles/new-york/resizable.json
new file mode 100644
index 00000000000..31be59446fd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/resizable.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "react-resizable-panels"
+  ],
+  "files": [
+    {
+      "path": "ui/resizable.tsx",
+      "content": "\"use client\"\n\nimport { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/scroll-area-demo.json b/apps/v4/public/r/styles/new-york/scroll-area-demo.json
new file mode 100644
index 00000000000..1c04dc6d54b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/scroll-area-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/new-york/ui/scroll-area\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport default function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {tags.map((tag) => (\n          <>\n            <div key={tag} className=\"text-sm\">\n              {tag}\n            </div>\n            <Separator className=\"my-2\" />\n          </>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/scroll-area-horizontal-demo.json b/apps/v4/public/r/styles/new-york/scroll-area-horizontal-demo.json
new file mode 100644
index 00000000000..afd14b32dc6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/scroll-area-horizontal-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-horizontal-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-horizontal-demo.tsx",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { ScrollArea, ScrollBar } from \"@/registry/new-york/ui/scroll-area\"\n\nexport interface Artwork {\n  artist: string\n  art: string\n}\n\nexport const works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n  return (\n    <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n      <div className=\"flex w-max space-x-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <Image\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n              Photo by{\" \"}\n              <span className=\"font-semibold text-foreground\">\n                {artwork.artist}\n              </span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/scroll-area.json b/apps/v4/public/r/styles/new-york/scroll-area.json
new file mode 100644
index 00000000000..204354cf430
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/scroll-area.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-scroll-area"
+  ],
+  "files": [
+    {
+      "path": "ui/scroll-area.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"flex touch-none select-none transition-colors\",\n      orientation === \"vertical\" &&\n        \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"h-2.5 flex-col border-t border-t-transparent p-[1px]\",\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/select-demo.json b/apps/v4/public/r/styles/new-york/select-demo.json
new file mode 100644
index 00000000000..ca05559722c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/select-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/select-form.json b/apps/v4/public/r/styles/new-york/select-form.json
new file mode 100644
index 00000000000..2cd053a4ec9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/select-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-form.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nconst FormSchema = z.object({\n  email: z\n    .string({\n      required_error: \"Please select an email to display.\",\n    })\n    .email(),\n})\n\nexport default function SelectForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <FormControl>\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a verified email to display\" />\n                  </SelectTrigger>\n                </FormControl>\n                <SelectContent>\n                  <SelectItem value=\"m@example.com\">m@example.com</SelectItem>\n                  <SelectItem value=\"m@google.com\">m@google.com</SelectItem>\n                  <SelectItem value=\"m@support.com\">m@support.com</SelectItem>\n                </SelectContent>\n              </Select>\n              <FormDescription>\n                You can manage email addresses in your{\" \"}\n                <Link href=\"/examples/forms\">email settings</Link>.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/select-scrollable.json b/apps/v4/public/r/styles/new-york/select-scrollable.json
new file mode 100644
index 00000000000..5eb0fff7e97
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/select-scrollable.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-scrollable",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-scrollable.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function SelectScrollable() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[280px]\">\n        <SelectValue placeholder=\"Select a timezone\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>North America</SelectLabel>\n          <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n          <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n          <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n          <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n          <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n          <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Europe & Africa</SelectLabel>\n          <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n          <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n          <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n          <SelectItem value=\"west\">\n            Western European Summer Time (WEST)\n          </SelectItem>\n          <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n          <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Asia</SelectLabel>\n          <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n          <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n          <SelectItem value=\"cst_china\">China Standard Time (CST)</SelectItem>\n          <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n          <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n          <SelectItem value=\"ist_indonesia\">\n            Indonesia Central Standard Time (WITA)\n          </SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Australia & Pacific</SelectLabel>\n          <SelectItem value=\"awst\">\n            Australian Western Standard Time (AWST)\n          </SelectItem>\n          <SelectItem value=\"acst\">\n            Australian Central Standard Time (ACST)\n          </SelectItem>\n          <SelectItem value=\"aest\">\n            Australian Eastern Standard Time (AEST)\n          </SelectItem>\n          <SelectItem value=\"nzst\">New Zealand Standard Time (NZST)</SelectItem>\n          <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>South America</SelectLabel>\n          <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n          <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n          <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n          <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/select.json b/apps/v4/public/r/styles/new-york/select.json
new file mode 100644
index 00000000000..24aabc92058
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/select.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-select"
+  ],
+  "files": [
+    {
+      "path": "ui/select.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronUp className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronDown className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/separator-demo.json b/apps/v4/public/r/styles/new-york/separator-demo.json
new file mode 100644
index 00000000000..a47307ada4b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/separator-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "examples/separator-demo.tsx",
+      "content": "import { Separator } from \"@/registry/new-york/ui/separator\"\n\nexport default function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/separator.json b/apps/v4/public/r/styles/new-york/separator.json
new file mode 100644
index 00000000000..e3ae2c55692
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-separator"
+  ],
+  "files": [
+    {
+      "path": "ui/separator.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sheet-demo.json b/apps/v4/public/r/styles/new-york/sheet-demo.json
new file mode 100644
index 00000000000..8b487305be7
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sheet-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "examples/sheet-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/ui/sheet\"\n\nexport default function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sheet-side.json b/apps/v4/public/r/styles/new-york/sheet-side.json
new file mode 100644
index 00000000000..228df22713f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sheet-side.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-side",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "examples/sheet-side.tsx",
+      "content": "\"use client\"\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\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger asChild>\n            <Button variant=\"outline\">{side}</Button>\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you're done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose asChild>\n                <Button type=\"submit\">Save changes</Button>\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sheet.json b/apps/v4/public/r/styles/new-york/sheet.json
new file mode 100644
index 00000000000..ccfdba7ab2b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sheet.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/sheet.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n      {children}\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-01-dark.png b/apps/v4/public/r/styles/new-york/sidebar-01-dark.png
new file mode 100644
index 00000000000..7b7cf8fa24c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-01-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-01-light.png b/apps/v4/public/r/styles/new-york/sidebar-01-light.png
new file mode 100644
index 00000000000..d59e52ad973
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-01-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-01.json b/apps/v4/public/r/styles/new-york/sidebar-01.json
new file mode 100644
index 00000000000..41242b93c49
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-01.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple sidebar with navigation grouped by section.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york/blocks/sidebar-01/components/version-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        {/* We create a SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <SidebarGroup key={item.title}>\n            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {item.items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild isActive={item.isActive}>\n                      <a href={item.url}>{item.title}</a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-01/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-semibold\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width]\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-02-dark.png b/apps/v4/public/r/styles/new-york/sidebar-02-dark.png
new file mode 100644
index 00000000000..e92a167de03
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-02-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-02-light.png b/apps/v4/public/r/styles/new-york/sidebar-02-light.png
new file mode 100644
index 00000000000..287bb936ca3
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-02-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-02.json b/apps/v4/public/r/styles/new-york/sidebar-02.json
new file mode 100644
index 00000000000..e01efe1687b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-02.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with collapsible sections.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-semibold\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width]\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-03-dark.png b/apps/v4/public/r/styles/new-york/sidebar-03-dark.png
new file mode 100644
index 00000000000..f8321378c15
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-03-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-03-light.png b/apps/v4/public/r/styles/new-york/sidebar-03-light.png
new file mode 100644
index 00000000000..77643fccb73
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-03-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-03.json b/apps/v4/public/r/styles/new-york/sidebar-03.json
new file mode 100644
index 00000000000..44bc1ae1df5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-03.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-04-dark.png b/apps/v4/public/r/styles/new-york/sidebar-04-dark.png
new file mode 100644
index 00000000000..cfb5b162016
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-04-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-04-light.png b/apps/v4/public/r/styles/new-york/sidebar-04-light.png
new file mode 100644
index 00000000000..07b0fa47a45
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-04-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-04.json b/apps/v4/public/r/styles/new-york/sidebar-04.json
new file mode 100644
index 00000000000..afa3204958b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-04.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A floating sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-05-dark.png b/apps/v4/public/r/styles/new-york/sidebar-05-dark.png
new file mode 100644
index 00000000000..893ef968f3e
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-05-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-05-light.png b/apps/v4/public/r/styles/new-york/sidebar-05-light.png
new file mode 100644
index 00000000000..a3a88c38e8c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-05-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-05.json b/apps/v4/public/r/styles/new-york/sidebar-05.json
new file mode 100644
index 00000000000..f8ba695087d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-05.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with collapsible submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                      <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-05/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-06-dark.png b/apps/v4/public/r/styles/new-york/sidebar-06-dark.png
new file mode 100644
index 00000000000..0115ddb1200
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-06-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-06-light.png b/apps/v4/public/r/styles/new-york/sidebar-06-light.png
new file mode 100644
index 00000000000..f36a857718f
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-06-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-06.json b/apps/v4/public/r/styles/new-york/sidebar-06.json
new file mode 100644
index 00000000000..a7d3cb8dcfd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-06.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with submenus as dropdowns.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { MoreHorizontal, type LucideIcon } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup>\n      <SidebarMenu>\n        {items.map((item) => (\n          <DropdownMenu key={item.title}>\n            <SidebarMenuItem>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  {item.title} <MoreHorizontal className=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              {item.items?.length ? (\n                <DropdownMenuContent\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align={isMobile ? \"end\" : \"start\"}\n                  className=\"min-w-56 rounded-lg\"\n                >\n                  {item.items.map((item) => (\n                    <DropdownMenuItem asChild key={item.title}>\n                      <a href={item.url}>{item.title}</a>\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              ) : null}\n            </SidebarMenuItem>\n          </DropdownMenu>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { 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 { SidebarInput } from \"@/registry/new-york/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"shadow-none\">\n      <form>\n        <CardHeader className=\"p-4 pb-0\">\n          <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n          <CardDescription>\n            Opt-in to receive updates and news about the sidebar.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"grid gap-2.5 p-4\">\n          <SidebarInput type=\"email\" placeholder=\"Email\" />\n          <Button\n            className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n            size=\"sm\"\n          >\n            Subscribe\n          </Button>\n        </CardContent>\n      </form>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-07-dark.png b/apps/v4/public/r/styles/new-york/sidebar-07-dark.png
new file mode 100644
index 00000000000..43a9fb16d7a
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-07-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-07-light.png b/apps/v4/public/r/styles/new-york/sidebar-07-light.png
new file mode 100644
index 00000000000..e66a7e58f9f
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-07-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-07.json b/apps/v4/public/r/styles/new-york/sidebar-07.json
new file mode 100644
index 00000000000..34f018610c8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-07.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar that collapses to icons.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">\n                  {activeTeam.name}\n                </span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-08-dark.png b/apps/v4/public/r/styles/new-york/sidebar-08-dark.png
new file mode 100644
index 00000000000..6de2042e8e0
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-08-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-08-light.png b/apps/v4/public/r/styles/new-york/sidebar-08-light.png
new file mode 100644
index 00000000000..8f36ab1d856
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-08-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-08.json b/apps/v4/public/r/styles/new-york/sidebar-08.json
new file mode 100644
index 00000000000..3f8cd1240a3
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-08.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "An inset sidebar with secondary navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-09-dark.png b/apps/v4/public/r/styles/new-york/sidebar-09-dark.png
new file mode 100644
index 00000000000..80833544957
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-09-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-09-light.png b/apps/v4/public/r/styles/new-york/sidebar-09-light.png
new file mode 100644
index 00000000000..7b2e848f66c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-09-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-09.json b/apps/v4/public/r/styles/new-york/sidebar-09.json
new file mode 100644
index 00000000000..b27f41e0a22
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-09.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Collapsible nested sidebars.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\n\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-10-dark.png b/apps/v4/public/r/styles/new-york/sidebar-10-dark.png
new file mode 100644
index 00000000000..9ac92d8e32b
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-10-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-10-light.png b/apps/v4/public/r/styles/new-york/sidebar-10-light.png
new file mode 100644
index 00000000000..4ba7a53a646
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-10-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-10.json b/apps/v4/public/r/styles/new-york/sidebar-10.json
new file mode 100644
index 00000000000..9744bba01a5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-10.json
@@ -0,0 +1,69 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar in a popover.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/new-york/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/new-york/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-10/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: Settings2,\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: Link,\n    },\n    {\n      label: \"Duplicate\",\n      icon: Copy,\n    },\n    {\n      label: \"Move to\",\n      icon: CornerUpRight,\n    },\n    {\n      label: \"Move to Trash\",\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: CornerUpLeft,\n    },\n    {\n      label: \"View analytics\",\n      icon: LineChart,\n    },\n    {\n      label: \"Version History\",\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: \"Show delete pages\",\n      icon: Trash,\n    },\n    {\n      label: \"Notifications\",\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: ArrowUp,\n    },\n    {\n      label: \"Export\",\n      icon: ArrowDown,\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-11-dark.png b/apps/v4/public/r/styles/new-york/sidebar-11-dark.png
new file mode 100644
index 00000000000..fe7240b71be
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-11-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-11-light.png b/apps/v4/public/r/styles/new-york/sidebar-11-light.png
new file mode 100644
index 00000000000..abd19a6a76c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-11-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-11.json b/apps/v4/public/r/styles/new-york/sidebar-11.json
new file mode 100644
index 00000000000..03b981fbba2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-11.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a collapsible file tree.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <File />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <File />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton>\n            <ChevronRight className=\"transition-transform\" />\n            <Folder />\n            {name}\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-12-dark.png b/apps/v4/public/r/styles/new-york/sidebar-12-dark.png
new file mode 100644
index 00000000000..9d6b6164c3c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-12-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-12-light.png b/apps/v4/public/r/styles/new-york/sidebar-12-light.png
new file mode 100644
index 00000000000..b1fac8c4cf2
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-12-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-12.json b/apps/v4/public/r/styles/new-york/sidebar-12.json
new file mode 100644
index 00000000000..b30585d1d27
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-12.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a calendar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-13-dark.png b/apps/v4/public/r/styles/new-york/sidebar-13-dark.png
new file mode 100644
index 00000000000..34c2606f327
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-13-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-13-light.png b/apps/v4/public/r/styles/new-york/sidebar-13-light.png
new file mode 100644
index 00000000000..cb5efd33e6a
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-13-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-13.json b/apps/v4/public/r/styles/new-york/sidebar-13.json
new file mode 100644
index 00000000000..e67df343e94
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-13.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar in a dialog.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"@/registry/new-york/blocks/sidebar-13/components/settings-dialog\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-14-dark.png b/apps/v4/public/r/styles/new-york/sidebar-14-dark.png
new file mode 100644
index 00000000000..ccbf36c07c5
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-14-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-14-light.png b/apps/v4/public/r/styles/new-york/sidebar-14-light.png
new file mode 100644
index 00000000000..d19f20508a4
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-14-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-14.json b/apps/v4/public/r/styles/new-york/sidebar-14.json
new file mode 100644
index 00000000000..4c7016ec026
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-14.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar on the right.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-15-dark.png b/apps/v4/public/r/styles/new-york/sidebar-15-dark.png
new file mode 100644
index 00000000000..dc7d52abbdf
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-15-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-15-light.png b/apps/v4/public/r/styles/new-york/sidebar-15-light.png
new file mode 100644
index 00000000000..6b89b39681d
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-15-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-15.json b/apps/v4/public/r/styles/new-york/sidebar-15.json
new file mode 100644
index 00000000000..219a4b5ead2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-15.json
@@ -0,0 +1,89 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A left and right sidebar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"@/registry/new-york/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/new-york/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-15/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/new-york/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-15/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function SidebarLeft({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-16-dark.png b/apps/v4/public/r/styles/new-york/sidebar-16-dark.png
new file mode 100644
index 00000000000..a52e11ff9d4
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-16-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-16-light.png b/apps/v4/public/r/styles/new-york/sidebar-16-light.png
new file mode 100644
index 00000000000..cd0f4559813
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-16-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-16.json b/apps/v4/public/r/styles/new-york/sidebar-16.json
new file mode 100644
index 00000000000..67450cf3e5f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-16.json
@@ -0,0 +1,71 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/new-york/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(theme(spacing.14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-[--header-height] !h-[calc(100svh-var(--header-height))]\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport { SidebarInput } from \"@/registry/new-york/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <div className=\"relative\">\n        <Label htmlFor=\"search\" className=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Type to search...\"\n          className=\"h-8 pl-7\"\n        />\n        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport { useSidebar } from \"@/registry/new-york/ui/sidebar\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"flex sticky top-0 z-50 w-full items-center border-b bg-background\">\n      <div className=\"flex h-[--header-height] w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <SidebarIcon />\n        </Button>\n        <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-controlled-dark.png b/apps/v4/public/r/styles/new-york/sidebar-controlled-dark.png
new file mode 100644
index 00000000000..a5c90ec88e2
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-controlled-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-controlled-light.png b/apps/v4/public/r/styles/new-york/sidebar-controlled-light.png
new file mode 100644
index 00000000000..37f9fb17103
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-controlled-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-controlled.json b/apps/v4/public/r/styles/new-york/sidebar-controlled.json
new file mode 100644
index 00000000000..6d4aba2f626
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-controlled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <SidebarProvider open={open} onOpenChange={setOpen}>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center h-12 px-4 justify-between\">\n          <Button\n            onClick={() => setOpen((open) => !open)}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            {open ? <PanelLeftClose /> : <PanelLeftOpen />}\n            <span>{open ? \"Close\" : \"Open\"} Sidebar</span>\n          </Button>\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-demo-dark.png b/apps/v4/public/r/styles/new-york/sidebar-demo-dark.png
new file mode 100644
index 00000000000..66b72862973
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-demo-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-demo-light.png b/apps/v4/public/r/styles/new-york/sidebar-demo-light.png
new file mode 100644
index 00000000000..c73e763cbe7
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-demo-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-demo.json b/apps/v4/public/r/styles/new-york/sidebar-demo.json
new file mode 100644
index 00000000000..5a575c9ea38
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Calendar, Home, Inbox, Search, Settings } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// Menu items.\nconst items = [\n  {\n    title: \"Home\",\n    url: \"#\",\n    icon: Home,\n  },\n  {\n    title: \"Inbox\",\n    url: \"#\",\n    icon: Inbox,\n  },\n  {\n    title: \"Calendar\",\n    url: \"#\",\n    icon: Calendar,\n  },\n  {\n    title: \"Search\",\n    url: \"#\",\n    icon: Search,\n  },\n  {\n    title: \"Settings\",\n    url: \"#\",\n    icon: Settings,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Application</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-footer-dark.png b/apps/v4/public/r/styles/new-york/sidebar-footer-dark.png
new file mode 100644
index 00000000000..590927dcc6f
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-footer-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-footer-light.png b/apps/v4/public/r/styles/new-york/sidebar-footer-light.png
new file mode 100644
index 00000000000..b12fea3ac92
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-footer-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-footer.json b/apps/v4/public/r/styles/new-york/sidebar-footer.json
new file mode 100644
index 00000000000..3550b749ea6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-footer.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-footer.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, ChevronUp, User2 } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader />\n        <SidebarContent />\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Username\n                    <ChevronUp className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  side=\"top\"\n                  className=\"w-[--radix-popper-anchor-width]\"\n                >\n                  <DropdownMenuItem>\n                    <span>Account</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Billing</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Sign out</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-group-action-dark.png b/apps/v4/public/r/styles/new-york/sidebar-group-action-dark.png
new file mode 100644
index 00000000000..169fe007c3f
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-group-action-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-group-action-light.png b/apps/v4/public/r/styles/new-york/sidebar-group-action-light.png
new file mode 100644
index 00000000000..e5b45c2bee6
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-group-action-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-group-action.json b/apps/v4/public/r/styles/new-york/sidebar-group-action.json
new file mode 100644
index 00000000000..9e5d48f4510
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-group-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-action.tsx",
+      "content": "\"use client\"\n\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from \"lucide-react\"\nimport { Toaster, toast } from \"sonner\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Toaster\n        position=\"bottom-left\"\n        toastOptions={{\n          className: \"ml-[160px]\",\n        }}\n      />\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupAction\n              title=\"Add Project\"\n              onClick={() => toast(\"You clicked the group action!\")}\n            >\n              <Plus /> <span className=\"sr-only\">Add Project</span>\n            </SidebarGroupAction>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <Frame />\n                      <span>Design Engineering</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <PieChart />\n                      <span>Sales & Marketing</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <Map />\n                      <span>Travel</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-group-collapsible-dark.png b/apps/v4/public/r/styles/new-york/sidebar-group-collapsible-dark.png
new file mode 100644
index 00000000000..34ca14208cf
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-group-collapsible-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-group-collapsible-light.png b/apps/v4/public/r/styles/new-york/sidebar-group-collapsible-light.png
new file mode 100644
index 00000000000..69997b2453d
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-group-collapsible-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-group-collapsible.json b/apps/v4/public/r/styles/new-york/sidebar-group-collapsible.json
new file mode 100644
index 00000000000..bbd44b10334
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-group-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <Collapsible defaultOpen className=\"group/collapsible\">\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  Help\n                  <ChevronDown className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <LifeBuoy />\n                        Support\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <Send />\n                        Feedback\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-group-dark.png b/apps/v4/public/r/styles/new-york/sidebar-group-dark.png
new file mode 100644
index 00000000000..5a292bdfb10
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-group-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-group-light.png b/apps/v4/public/r/styles/new-york/sidebar-group-light.png
new file mode 100644
index 00000000000..2ea25ce315a
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-group-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-group.json b/apps/v4/public/r/styles/new-york/sidebar-group.json
new file mode 100644
index 00000000000..1bddbeef77e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-group.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group.tsx",
+      "content": "\"use client\"\n\nimport { LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Help</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <LifeBuoy />\n                    Support\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <Send />\n                    Feedback\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-header-dark.png b/apps/v4/public/r/styles/new-york/sidebar-header-dark.png
new file mode 100644
index 00000000000..4e83953edc7
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-header-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-header-light.png b/apps/v4/public/r/styles/new-york/sidebar-header-light.png
new file mode 100644
index 00000000000..6af0e608d6c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-header-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-header.json b/apps/v4/public/r/styles/new-york/sidebar-header.json
new file mode 100644
index 00000000000..79433884cf9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-header.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-header.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Select Workspace\n                    <ChevronDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent className=\"w-[--radix-popper-anchor-width]\">\n                  <DropdownMenuItem>\n                    <span>Acme Inc</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Acme Corp.</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-action-dark.png b/apps/v4/public/r/styles/new-york/sidebar-menu-action-dark.png
new file mode 100644
index 00000000000..6fe8c59cccf
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-menu-action-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-action-light.png b/apps/v4/public/r/styles/new-york/sidebar-menu-action-light.png
new file mode 100644
index 00000000000..85f417f4690
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-menu-action-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-action.json b/apps/v4/public/r/styles/new-york/sidebar-menu-action.json
new file mode 100644
index 00000000000..801f7a2e612
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-menu-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-action.tsx",
+      "content": "\"use client\"\n\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project, index) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction>\n                          <MoreHorizontal />\n                          <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuItem>\n                          <span>Edit Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <span>Delete Project</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-badge-dark.png b/apps/v4/public/r/styles/new-york/sidebar-menu-badge-dark.png
new file mode 100644
index 00000000000..4d7b35fdffe
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-menu-badge-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-badge-light.png b/apps/v4/public/r/styles/new-york/sidebar-menu-badge-light.png
new file mode 100644
index 00000000000..22ec06c9801
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-menu-badge-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-badge.json b/apps/v4/public/r/styles/new-york/sidebar-menu-badge.json
new file mode 100644
index 00000000000..3f75b70d6ad
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-menu-badge.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-badge.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n    badge: \"8\",\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-collapsible-dark.png b/apps/v4/public/r/styles/new-york/sidebar-menu-collapsible-dark.png
new file mode 100644
index 00000000000..809fa9b13fd
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-menu-collapsible-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-collapsible-light.png b/apps/v4/public/r/styles/new-york/sidebar-menu-collapsible-light.png
new file mode 100644
index 00000000000..88209c7be73
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-menu-collapsible-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-collapsible.json b/apps/v4/public/r/styles/new-york/sidebar-menu-collapsible.json
new file mode 100644
index 00000000000..2b5d48b6cfe
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-menu-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <Collapsible\n                    key={index}\n                    className=\"group/collapsible\"\n                    defaultOpen={index === 0}\n                  >\n                    <SidebarMenuItem>\n                      <CollapsibleTrigger asChild>\n                        <SidebarMenuButton>\n                          <span>{item.title}</span>\n                          <ChevronRight className=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem, subIndex) => (\n                            <SidebarMenuSubItem key={subIndex}>\n                              <SidebarMenuSubButton asChild>\n                                <a href={subItem.url}>\n                                  <span>{subItem.title}</span>\n                                </a>\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </SidebarMenuItem>\n                  </Collapsible>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-dark.png b/apps/v4/public/r/styles/new-york/sidebar-menu-dark.png
new file mode 100644
index 00000000000..26fe7bc4fdc
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-menu-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-light.png b/apps/v4/public/r/styles/new-york/sidebar-menu-light.png
new file mode 100644
index 00000000000..2672b17cd29
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-menu-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-sub-dark.png b/apps/v4/public/r/styles/new-york/sidebar-menu-sub-dark.png
new file mode 100644
index 00000000000..34896191a4b
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-menu-sub-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-sub-light.png b/apps/v4/public/r/styles/new-york/sidebar-menu-sub-light.png
new file mode 100644
index 00000000000..d6325ae695c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-menu-sub-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu-sub.json b/apps/v4/public/r/styles/new-york/sidebar-menu-sub.json
new file mode 100644
index 00000000000..d9c453cee13
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-menu-sub.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-sub.tsx",
+      "content": "\"use client\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <SidebarMenuItem key={index}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuSub>\n                      {item.items.map((subItem, subIndex) => (\n                        <SidebarMenuSubItem key={subIndex}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-menu.json b/apps/v4/public/r/styles/new-york/sidebar-menu.json
new file mode 100644
index 00000000000..1211bd5864e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-menu.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar-rsc-dark.png b/apps/v4/public/r/styles/new-york/sidebar-rsc-dark.png
new file mode 100644
index 00000000000..26fe7bc4fdc
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-rsc-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-rsc-light.png b/apps/v4/public/r/styles/new-york/sidebar-rsc-light.png
new file mode 100644
index 00000000000..2672b17cd29
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sidebar-rsc-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sidebar-rsc.json b/apps/v4/public/r/styles/new-york/sidebar-rsc.json
new file mode 100644
index 00000000000..ae8dd5bee3f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar-rsc.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-rsc.tsx",
+      "content": "import * as React from \"react\"\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n    badge: \"8\",\n  },\n]\n\n// Dummy fetch function\nasync function fetchProjects() {\n  await new Promise((resolve) => setTimeout(resolve, 3000))\n  return projects\n}\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <React.Suspense fallback={<NavProjectsSkeleton />}>\n                <NavProjects />\n              </React.Suspense>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n\nfunction NavProjectsSkeleton() {\n  return (\n    <SidebarMenu>\n      {Array.from({ length: 5 }).map((_, index) => (\n        <SidebarMenuItem key={index}>\n          <SidebarMenuSkeleton showIcon />\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nasync function NavProjects() {\n  const projects = await fetchProjects()\n\n  return (\n    <SidebarMenu>\n      {projects.map((project) => (\n        <SidebarMenuItem key={project.name}>\n          <SidebarMenuButton asChild>\n            <a href={project.url}>\n              <project.icon />\n              <span>{project.name}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sidebar.json b/apps/v4/public/r/styles/new-york/sidebar.json
new file mode 100644
index 00000000000..1b3c7df50cb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sidebar.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "separator",
+    "sheet",
+    "tooltip",
+    "input",
+    "use-mobile",
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "ui/sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\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 { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/new-york/ui/sheet\"\nimport { Skeleton } from \"@/registry/new-york/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = React.useState(false)\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === \"function\" ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n\n        // This sets the cookie to keep the sidebar state.\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      },\n      [setOpenProp, open]\n    )\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener(\"keydown\", handleKeyDown)\n      return () => window.removeEventListener(\"keydown\", handleKeyDown)\n    }, [toggleSidebar])\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? \"expanded\" : \"collapsed\"\n\n    const contextValue = React.useMemo<SidebarContextProps>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH,\n                \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as React.CSSProperties\n            }\n            className={cn(\n              \"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar\",\n              className\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  }\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\nconst Sidebar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    side?: \"left\" | \"right\"\n    variant?: \"sidebar\" | \"floating\" | \"inset\"\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  }\n>(\n  (\n    {\n      side = \"left\",\n      variant = \"sidebar\",\n      collapsible = \"offcanvas\",\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n    if (collapsible === \"none\") {\n      return (\n        <div\n          className={cn(\n            \"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground\",\n            className\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </div>\n      )\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n              } as React.CSSProperties\n            }\n            side={side}\n          >\n            <SheetHeader className=\"sr-only\">\n              <SheetTitle>Sidebar</SheetTitle>\n              <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n            </SheetHeader>\n            <div className=\"flex h-full w-full flex-col\">{children}</div>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-sidebar-foreground md:block\"\n        data-state={state}\n        data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n        data-variant={variant}\n        data-side={side}\n      >\n        {/* This is what handles the sidebar gap on desktop */}\n        <div\n          className={cn(\n            \"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\n            \"group-data-[collapsible=offcanvas]:w-0\",\n            \"group-data-[side=right]:rotate-180\",\n            variant === \"floating\" || variant === \"inset\"\n              ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n              : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\"\n          )}\n        />\n        <div\n          className={cn(\n            \"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\n            side === \"left\"\n              ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n              : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n            // Adjust the padding for floating and inset variants.\n            variant === \"floating\" || variant === \"inset\"\n              ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n              : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n            className\n          )}\n          {...props}\n        >\n          <div\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n  React.ElementRef<typeof Button>,\n  React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"h-7 w-7\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <PanelLeft />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst SidebarRail = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      ref={ref}\n      data-sidebar=\"rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarRail.displayName = \"SidebarRail\"\n\nconst SidebarInset = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"main\">\n>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = \"SidebarInset\"\n\nconst SidebarInput = React.forwardRef<\n  React.ElementRef<typeof Input>,\n  React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      className={cn(\n        \"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = \"SidebarInput\"\n\nconst SidebarHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarSeparator = React.forwardRef<\n  React.ElementRef<typeof Separator>,\n  React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n})\nSidebarSeparator.displayName = \"SidebarSeparator\"\n\nconst SidebarContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = \"SidebarGroup\"\n\nconst SidebarGroupLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"div\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\n\nconst SidebarGroupAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = \"SidebarGroupAction\"\n\nconst SidebarGroupContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"group-content\"\n    className={cn(\"w-full text-sm\", className)}\n    {...props}\n  />\n))\nSidebarGroupContent.displayName = \"SidebarGroupContent\"\n\nconst SidebarMenu = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu\"\n    className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n    {...props}\n  />\n))\nSidebarMenu.displayName = \"SidebarMenu\"\n\nconst SidebarMenuItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    data-sidebar=\"menu-item\"\n    className={cn(\"group/menu-item relative\", className)}\n    {...props}\n  />\n))\nSidebarMenuItem.displayName = \"SidebarMenuItem\"\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = \"default\",\n      size = \"default\",\n      tooltip,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : \"button\"\n    const { isMobile, state } = useSidebar()\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n        {...props}\n      />\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === \"string\") {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== \"collapsed\" || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    )\n  }\n)\nSidebarMenuButton.displayName = \"SidebarMenuButton\"\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = \"SidebarMenuAction\"\n\nconst SidebarMenuBadge = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"menu-badge\"\n    className={cn(\n      \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground\",\n      \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className\n    )}\n    {...props}\n  />\n))\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\"\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-[--skeleton-width] flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\n\nconst SidebarMenuSub = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu-sub\"\n    className={cn(\n      \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className\n    )}\n    {...props}\n  />\n))\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\n\nconst SidebarMenuSubItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<\"a\"> & {\n    asChild?: boolean\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "sidebar": {
+              "DEFAULT": "hsl(var(--sidebar-background))",
+              "foreground": "hsl(var(--sidebar-foreground))",
+              "primary": "hsl(var(--sidebar-primary))",
+              "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+              "accent": "hsl(var(--sidebar-accent))",
+              "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+              "border": "hsl(var(--sidebar-border))",
+              "ring": "hsl(var(--sidebar-ring))"
+            }
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "sidebar-background": "0 0% 98%",
+      "sidebar-foreground": "240 5.3% 26.1%",
+      "sidebar-primary": "240 5.9% 10%",
+      "sidebar-primary-foreground": "0 0% 98%",
+      "sidebar-accent": "240 4.8% 95.9%",
+      "sidebar-accent-foreground": "240 5.9% 10%",
+      "sidebar-border": "220 13% 91%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    },
+    "dark": {
+      "sidebar-background": "240 5.9% 10%",
+      "sidebar-foreground": "240 4.8% 95.9%",
+      "sidebar-primary": "224.3 76.3% 48%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "240 3.7% 15.9%",
+      "sidebar-accent-foreground": "240 4.8% 95.9%",
+      "sidebar-border": "240 3.7% 15.9%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sink-dark.png b/apps/v4/public/r/styles/new-york/sink-dark.png
new file mode 100644
index 00000000000..0b84c2ed939
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sink-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/sink-light.png b/apps/v4/public/r/styles/new-york/sink-light.png
new file mode 100644
index 00000000000..1c209b3082e
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/sink-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/sink.json b/apps/v4/public/r/styles/new-york/sink.json
new file mode 100644
index 00000000000..dd7bdb1263a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sink.json
@@ -0,0 +1,452 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sink",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "accordion",
+    "alert",
+    "alert-dialog",
+    "aspect-ratio",
+    "avatar",
+    "badge",
+    "breadcrumb",
+    "button",
+    "calendar",
+    "card",
+    "carousel",
+    "chart",
+    "checkbox",
+    "collapsible",
+    "command",
+    "context-menu",
+    "dialog",
+    "drawer",
+    "dropdown-menu",
+    "hover-card",
+    "input",
+    "input-otp",
+    "label",
+    "menubar",
+    "navigation-menu",
+    "pagination",
+    "popover",
+    "progress",
+    "radio-group",
+    "resizable",
+    "scroll-area",
+    "select",
+    "separator",
+    "sheet",
+    "sidebar",
+    "skeleton",
+    "slider",
+    "sonner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "toast",
+    "toggle",
+    "toggle-group",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "internal/sink/page.tsx",
+      "content": "import { AccordionDemo } from \"@/registry/new-york/internal/sink/components/accordion-demo\"\nimport { AlertDemo } from \"@/registry/new-york/internal/sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/registry/new-york/internal/sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/registry/new-york/internal/sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/registry/new-york/internal/sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/registry/new-york/internal/sink/components/avatar-demo\"\nimport { BadgeDemo } from \"@/registry/new-york/internal/sink/components/badge-demo\"\nimport { BadgeDestructive } from \"@/registry/new-york/internal/sink/components/badge-destructive\"\nimport { BadgeOutline } from \"@/registry/new-york/internal/sink/components/badge-outline\"\nimport { BadgeSecondary } from \"@/registry/new-york/internal/sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/registry/new-york/internal/sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/registry/new-york/internal/sink/components/button-demo\"\nimport { ButtonDestructive } from \"@/registry/new-york/internal/sink/components/button-destructive\"\nimport { ButtonGhost } from \"@/registry/new-york/internal/sink/components/button-ghost\"\nimport { ButtonLink } from \"@/registry/new-york/internal/sink/components/button-link\"\nimport { ButtonLoading } from \"@/registry/new-york/internal/sink/components/button-loading\"\nimport { ButtonOutline } from \"@/registry/new-york/internal/sink/components/button-outline\"\nimport { ButtonSecondary } from \"@/registry/new-york/internal/sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/registry/new-york/internal/sink/components/button-with-icon\"\nimport { CalendarDemo } from \"@/registry/new-york/internal/sink/components/calendar-demo\"\nimport { CardDemo } from \"@/registry/new-york/internal/sink/components/card-demo\"\nimport { CarouselDemo } from \"@/registry/new-york/internal/sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/registry/new-york/internal/sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/registry/new-york/internal/sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/registry/new-york/internal/sink/components/combobox-demo\"\nimport { CommandDemo } from \"@/registry/new-york/internal/sink/components/command-demo\"\nimport { ComponentWrapper } from \"@/registry/new-york/internal/sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/registry/new-york/internal/sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/registry/new-york/internal/sink/components/date-picker-demo\"\nimport { DialogDemo } from \"@/registry/new-york/internal/sink/components/dialog-demo\"\nimport { DrawerDemo } from \"@/registry/new-york/internal/sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/registry/new-york/internal/sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/registry/new-york/internal/sink/components/hover-card-demo\"\nimport { InputDemo } from \"@/registry/new-york/internal/sink/components/input-demo\"\nimport { InputOTPDemo } from \"@/registry/new-york/internal/sink/components/input-otp-demo\"\nimport { LabelDemo } from \"@/registry/new-york/internal/sink/components/label-demo\"\nimport { MenubarDemo } from \"@/registry/new-york/internal/sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/registry/new-york/internal/sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/registry/new-york/internal/sink/components/pagination-demo\"\nimport { PopoverDemo } from \"@/registry/new-york/internal/sink/components/popover-demo\"\nimport { ProgressDemo } from \"@/registry/new-york/internal/sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/registry/new-york/internal/sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/registry/new-york/internal/sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/registry/new-york/internal/sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/registry/new-york/internal/sink/components/select-demo\"\nimport { SeparatorDemo } from \"@/registry/new-york/internal/sink/components/separator-demo\"\nimport { SheetDemo } from \"@/registry/new-york/internal/sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/registry/new-york/internal/sink/components/skeleton-demo\"\nimport { SliderDemo } from \"@/registry/new-york/internal/sink/components/slider-demo\"\nimport { SonnerDemo } from \"@/registry/new-york/internal/sink/components/sonner-demo\"\nimport { SwitchDemo } from \"@/registry/new-york/internal/sink/components/switch-demo\"\nimport { TableDemo } from \"@/registry/new-york/internal/sink/components/table-demo\"\nimport { TabsDemo } from \"@/registry/new-york/internal/sink/components/tabs-demo\"\nimport { TextareaDemo } from \"@/registry/new-york/internal/sink/components/textarea-demo\"\nimport { ToastDemo } from \"@/registry/new-york/internal/sink/components/toast-demo\"\nimport { ToggleDemo } from \"@/registry/new-york/internal/sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/registry/new-york/internal/sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/registry/new-york/internal/sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/registry/new-york/internal/sink/components/toggle-outline\"\nimport { ToggleWithText } from \"@/registry/new-york/internal/sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/registry/new-york/internal/sink/components/tooltip-demo\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function SinkPage() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n            <ComponentWrapper name=\"Accordion\">\n              <AccordionDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Alert\">\n              <AlertDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AlertDialog\">\n              <AlertDialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AspectRatio\">\n              <AspectRatioDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Avatar\">\n              <AvatarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Badge\">\n              <BadgeDemo />\n              <BadgeDestructive />\n              <BadgeOutline />\n              <BadgeSecondary />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Breadcrumb\">\n              <BreadcrumbDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Button\">\n              <div className=\"flex items-center gap-2\">\n                <ButtonDemo />\n                <ButtonDestructive />\n                <ButtonGhost />\n                <ButtonLink />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonLoading />\n                <ButtonOutline />\n                <ButtonSecondary />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonWithIcon />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Calendar\">\n              <CalendarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Card\">\n              <CardDemo className=\"w-full\" />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Carousel\"\n              className=\"[&_.max-w-xs]:max-w-[70%]\"\n            >\n              <CarouselDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Checkbox\">\n              <CheckboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Collapsible\">\n              <CollapsibleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Combobox\">\n              <ComboboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Command\"\n              className=\"[&_[cmdk-root]]:md:min-w-max\"\n            >\n              <CommandDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ContextMenu\">\n              <ContextMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DatePicker\">\n              <DatePickerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Dialog\">\n              <DialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Drawer\">\n              <DrawerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DropdownMenu\">\n              <DropdownMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"HoverCard\">\n              <HoverCardDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Input\">\n              <InputDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"InputOTP\">\n              <InputOTPDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Label\">\n              <LabelDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Menubar\">\n              <MenubarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"NavigationMenu\" className=\"col-span-2\">\n              <NavigationMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Pagination\">\n              <PaginationDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Popover\">\n              <PopoverDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Progress\">\n              <ProgressDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"RadioGroup\">\n              <RadioGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Resizable\" className=\"col-span-2\">\n              <ResizableHandleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ScrollArea\">\n              <ScrollAreaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Select\">\n              <SelectDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Separator\">\n              <SeparatorDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sheet\">\n              <SheetDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Skeleton\">\n              <SkeletonDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Slider\">\n              <SliderDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sonner\">\n              <SonnerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Switch\">\n              <SwitchDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Table\" className=\"col-span-2\">\n              <TableDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tabs\">\n              <TabsDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Textarea\">\n              <TextareaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toast\">\n              <ToastDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toggle\">\n              <div className=\"flex items-center gap-2\">\n                <ToggleDemo />\n                <ToggleDisabled />\n                <ToggleOutline />\n                <ToggleWithText />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ToggleGroup\">\n              <ToggleGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tooltip\">\n              <TooltipDemo />\n            </ComponentWrapper>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/sink/page.tsx"
+    },
+    {
+      "path": "internal/sink/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/component-wrapper.tsx",
+      "content": "import { cn } from \"@/registry/new-york/lib/utils\"\n\nexport function ComponentWrapper({\n  className,\n  name,\n  children,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n  return (\n    <div\n      className={cn(\"flex w-full flex-col rounded-lg border\", className)}\n      {...props}\n    >\n      <div className=\"border-b px-4 py-3\">\n        <div className=\"text-sm font-medium\">{name}</div>\n      </div>\n      <div className=\"flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full\">\n        {children}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">\n                  {activeTeam.name}\n                </span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/accordion-demo.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york/ui/accordion\"\n\nexport function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other\n          components&apos; aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport function AlertDemo() {\n  return (\n    <Alert>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-dialog-demo.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/new-york/ui/alert-dialog\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/new-york/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/avatar-demo.tsx",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\n\nexport function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-demo.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/breadcrumb-demo.tsx",
+      "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { 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 { Switch } from \"@/registry/new-york/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\n\nexport function CheckboxDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <label\n        htmlFor=\"terms\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\n\nexport function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/command-demo.tsx",
+      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york/ui/command\"\n\nexport function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/context-menu-demo.tsx",
+      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/new-york/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dialog-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Email</DropdownMenuItem>\n                <DropdownMenuItem>Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york/ui/hover-card\"\n\nexport function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-muted-foreground\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-demo.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\n\nexport function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-otp-demo.tsx",
+      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nexport function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/menubar-demo.tsx",
+      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/new-york/ui/menubar\"\n\nexport function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/new-york/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport function NavigationMenuDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\n                      Beautifully designed components built with Radix UI and\n                      Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nconst ListItem = React.forwardRef<\n  React.ElementRef<\"a\">,\n  React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          ref={ref}\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"text-sm font-medium leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/pagination-demo.tsx",
+      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/new-york/ui/pagination\"\n\nexport function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/popover-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/new-york/ui/progress\"\n\nexport function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/new-york/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/resizable-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/new-york/ui/scroll-area\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/separator-demo.tsx",
+      "content": "import { Separator } from \"@/registry/new-york/ui/separator\"\n\nexport function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sheet-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/ui/sheet\"\n\nexport function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/registry/new-york/ui/skeleton\"\n\nexport function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/new-york/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/switch-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\nexport function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/table-demo.tsx",
+      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tabs-demo.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\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\n\nexport function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsList className=\"grid w-full grid-cols-2\">\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Account</CardTitle>\n            <CardDescription>\n              Make changes to your account here. Click save when you're done.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"username\">Username</Label>\n              <Input id=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save changes</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Password</CardTitle>\n            <CardDescription>\n              Change your password here. After saving, you'll be logged out.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"current\">Current password</Label>\n              <Input id=\"current\" type=\"password\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"new\">New password</Label>\n              <Input id=\"new\" type=\"password\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save password</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/toast\"\n\nexport function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-outline.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-destructive.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-ghost.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-link.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-outline.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-secondary.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-with-icon.tsx",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonWithIcon() {\n  return (\n    <Button>\n      <MailOpen /> Login with Email\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/skeleton-card.json b/apps/v4/public/r/styles/new-york/skeleton-card.json
new file mode 100644
index 00000000000..095afce7779
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/skeleton-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-card",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "examples/skeleton-card.tsx",
+      "content": "import { Skeleton } from \"@/registry/new-york/ui/skeleton\"\n\nexport default function SkeletonCard() {\n  return (\n    <div className=\"flex flex-col space-y-3\">\n      <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/skeleton-demo.json b/apps/v4/public/r/styles/new-york/skeleton-demo.json
new file mode 100644
index 00000000000..7a8d561e1c0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/skeleton-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "examples/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/registry/new-york/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/skeleton.json b/apps/v4/public/r/styles/new-york/skeleton.json
new file mode 100644
index 00000000000..0be9dc2528e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/skeleton.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "ui/skeleton.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"animate-pulse rounded-md bg-primary/10\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/slider-demo.json b/apps/v4/public/r/styles/new-york/slider-demo.json
new file mode 100644
index 00000000000..ead868d00bd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/slider-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "slider"
+  ],
+  "files": [
+    {
+      "path": "examples/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/new-york/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/slider.json b/apps/v4/public/r/styles/new-york/slider.json
new file mode 100644
index 00000000000..f7afc1b8b5a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/slider.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slider"
+  ],
+  "files": [
+    {
+      "path": "ui/slider.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <SliderPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex w-full touch-none select-none items-center\",\n      className\n    )}\n    {...props}\n  >\n    <SliderPrimitive.Track className=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n    </SliderPrimitive.Track>\n    <SliderPrimitive.Thumb className=\"block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\" />\n  </SliderPrimitive.Root>\n))\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sonner-demo.json b/apps/v4/public/r/styles/new-york/sonner-demo.json
new file mode 100644
index 00000000000..986ad5ce068
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sonner-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "examples/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/sonner.json b/apps/v4/public/r/styles/new-york/sonner.json
new file mode 100644
index 00000000000..88ac39ce6d4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/sonner.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "sonner",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "ui/sonner.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner } from \"sonner\"\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n          description: \"group-[.toast]:text-muted-foreground\",\n          actionButton:\n            \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n          cancelButton:\n            \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/style.json b/apps/v4/public/r/styles/new-york/style.json
new file mode 100644
index 00000000000..f561eb73e3d
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/style.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {}
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/switch-demo.json b/apps/v4/public/r/styles/new-york/switch-demo.json
new file mode 100644
index 00000000000..6015f972a78
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/switch-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "examples/switch-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\nexport default function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/switch-form.json b/apps/v4/public/r/styles/new-york/switch-form.json
new file mode 100644
index 00000000000..58661c13ae6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/switch-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "switch",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/switch-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/new-york/ui/form\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\nconst FormSchema = z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      security_emails: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full space-y-6\">\n        <div>\n          <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n          <div className=\"space-y-4\">\n            <FormField\n              control={form.control}\n              name=\"marketing_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel>Marketing emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about new products, features, and more.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n            <FormField\n              control={form.control}\n              name=\"security_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel>Security emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about your account security.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                      disabled\n                      aria-readonly\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n          </div>\n        </div>\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/switch.json b/apps/v4/public/r/styles/new-york/switch.json
new file mode 100644
index 00000000000..5494b27da69
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/switch.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-switch"
+  ],
+  "files": [
+    {
+      "path": "ui/switch.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n      )}\n    />\n  </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/table-demo.json b/apps/v4/public/r/styles/new-york/table-demo.json
new file mode 100644
index 00000000000..4f7437dd623
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/table-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "table"
+  ],
+  "files": [
+    {
+      "path": "examples/table-demo.tsx",
+      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/table.json b/apps/v4/public/r/styles/new-york/table.json
new file mode 100644
index 00000000000..924463428eb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/table.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "ui/table.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/tabs-demo.json b/apps/v4/public/r/styles/new-york/tabs-demo.json
new file mode 100644
index 00000000000..beca2797ef8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/tabs-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "tabs"
+  ],
+  "files": [
+    {
+      "path": "examples/tabs-demo.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\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\n\nexport default function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsList className=\"grid w-full grid-cols-2\">\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Account</CardTitle>\n            <CardDescription>\n              Make changes to your account here. Click save when you're done.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"username\">Username</Label>\n              <Input id=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save changes</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Password</CardTitle>\n            <CardDescription>\n              Change your password here. After saving, you'll be logged out.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"current\">Current password</Label>\n              <Input id=\"current\" type=\"password\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"new\">New password</Label>\n              <Input id=\"new\" type=\"password\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save password</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/tabs.json b/apps/v4/public/r/styles/new-york/tabs.json
new file mode 100644
index 00000000000..5b1ea41f34f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/tabs.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-tabs"
+  ],
+  "files": [
+    {
+      "path": "ui/tabs.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/textarea-demo.json b/apps/v4/public/r/styles/new-york/textarea-demo.json
new file mode 100644
index 00000000000..cce1041f0ae
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/textarea-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport default function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/textarea-disabled.json b/apps/v4/public/r/styles/new-york/textarea-disabled.json
new file mode 100644
index 00000000000..6bedefdcb38
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/textarea-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-disabled.tsx",
+      "content": "import { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport default function TextareaDisabled() {\n  return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/textarea-form.json b/apps/v4/public/r/styles/new-york/textarea-form.json
new file mode 100644
index 00000000000..0db96a4c086
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/textarea-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nconst FormSchema = z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: \"Bio must be at least 10 characters.\",\n    })\n    .max(160, {\n      message: \"Bio must not be longer than 30 characters.\",\n    }),\n})\n\nexport default function TextareaForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"bio\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Bio</FormLabel>\n              <FormControl>\n                <Textarea\n                  placeholder=\"Tell us a little bit about yourself\"\n                  className=\"resize-none\"\n                  {...field}\n                />\n              </FormControl>\n              <FormDescription>\n                You can <span>@mention</span> other users and organizations.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/textarea-with-button.json b/apps/v4/public/r/styles/new-york/textarea-with-button.json
new file mode 100644
index 00000000000..3535e7df1f5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/textarea-with-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport default function TextareaWithButton() {\n  return (\n    <div className=\"grid w-full gap-2\">\n      <Textarea placeholder=\"Type your message here.\" />\n      <Button>Send message</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/textarea-with-label.json b/apps/v4/public/r/styles/new-york/textarea-with-label.json
new file mode 100644
index 00000000000..98cc1c85292
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/textarea-with-label.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-label",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-label.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport default function TextareaWithLabel() {\n  return (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message\">Your message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/textarea-with-text.json b/apps/v4/public/r/styles/new-york/textarea-with-text.json
new file mode 100644
index 00000000000..a57d94b22fe
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/textarea-with-text.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-text.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport default function TextareaWithText() {\n  return (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message-2\">Your Message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n      <p className=\"text-sm text-muted-foreground\">\n        Your message will be copied to the support team.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/textarea.json b/apps/v4/public/r/styles/new-york/textarea.json
new file mode 100644
index 00000000000..4e5f9b73afb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/textarea.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "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",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/theme-daylight.json b/apps/v4/public/r/styles/new-york/theme-daylight.json
new file mode 100644
index 00000000000..56d374c2c52
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/theme-daylight.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-daylight",
+  "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "cssVars": {
+    "light": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    },
+    "dark": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/theme-emerald.json b/apps/v4/public/r/styles/new-york/theme-emerald.json
new file mode 100644
index 00000000000..dd11b1ab9e1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/theme-emerald.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-emerald",
+  "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 45%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "142 86% 28%",
+      "chart-1": "139 65% 20%",
+      "chart-2": "140 74% 44%",
+      "chart-3": "142 88% 28%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "142 86% 28%",
+      "chart-1": "142 88% 28%",
+      "chart-2": "139 65% 20%",
+      "chart-3": "140 74% 24%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/theme-midnight.json b/apps/v4/public/r/styles/new-york/theme-midnight.json
new file mode 100644
index 00000000000..65dfce822e5
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/theme-midnight.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-midnight",
+  "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "cssVars": {
+    "light": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    },
+    "dark": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toast-demo.json b/apps/v4/public/r/styles/new-york/toast-demo.json
new file mode 100644
index 00000000000..0a68ab0928c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toast-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/toast\"\n\nexport default function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toast-destructive.json b/apps/v4/public/r/styles/new-york/toast-destructive.json
new file mode 100644
index 00000000000..aa3fd5fde32
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toast-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-destructive.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/toast\"\n\nexport default function ToastDestructive() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          variant: \"destructive\",\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toast-simple.json b/apps/v4/public/r/styles/new-york/toast-simple.json
new file mode 100644
index 00000000000..246e45c9e6e
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toast-simple.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-simple",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-simple.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ToastSimple() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          description: \"Your message has been sent.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toast-with-action.json b/apps/v4/public/r/styles/new-york/toast-with-action.json
new file mode 100644
index 00000000000..1cd49357a47
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toast-with-action.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-action",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-action.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/toast\"\n\nexport default function ToastWithAction() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toast-with-title.json b/apps/v4/public/r/styles/new-york/toast-with-title.json
new file mode 100644
index 00000000000..97433b3d0a4
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toast-with-title.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-title",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-title.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ToastWithTitle() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toast.json b/apps/v4/public/r/styles/new-york/toast.json
new file mode 100644
index 00000000000..cee1ff52da0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toast.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-toast"
+  ],
+  "files": [
+    {
+      "path": "ui/toast.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Viewport\n    ref={ref}\n    className={cn(\n      \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n      className\n    )}\n    {...props}\n  />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n  \"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n  {\n    variants: {\n      variant: {\n        default: \"border bg-background text-foreground\",\n        destructive:\n          \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Toast = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n  return (\n    <ToastPrimitives.Root\n      ref={ref}\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Action>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Action\n    ref={ref}\n    className={cn(\n      \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive\",\n      className\n    )}\n    {...props}\n  />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Close>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Close\n    ref={ref}\n    className={cn(\n      \"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"h-4 w-4\" />\n  </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Title>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Title\n    ref={ref}\n    className={cn(\"text-sm font-semibold [&+div]:text-xs\", className)}\n    {...props}\n  />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Description>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Description\n    ref={ref}\n    className={cn(\"text-sm opacity-90\", className)}\n    {...props}\n  />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n  type ToastProps,\n  type ToastActionElement,\n  ToastProvider,\n  ToastViewport,\n  Toast,\n  ToastTitle,\n  ToastDescription,\n  ToastClose,\n  ToastAction,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "hooks/use-toast.ts",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/new-york/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { useToast, toast }\n",
+      "type": "registry:hook",
+      "target": ""
+    },
+    {
+      "path": "ui/toaster.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from \"@/registry/new-york/ui/toast\"\n\nexport function Toaster() {\n  const { toasts } = useToast()\n\n  return (\n    <ToastProvider>\n      {toasts.map(function ({ id, title, description, action, ...props }) {\n        return (\n          <Toast key={id} {...props}>\n            <div className=\"grid gap-1\">\n              {title && <ToastTitle>{title}</ToastTitle>}\n              {description && (\n                <ToastDescription>{description}</ToastDescription>\n              )}\n            </div>\n            {action}\n            <ToastClose />\n          </Toast>\n        )\n      })}\n      <ToastViewport />\n    </ToastProvider>\n  )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-demo.json b/apps/v4/public/r/styles/new-york/toggle-demo.json
new file mode 100644
index 00000000000..d3ecc1a13d0
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-disabled.json b/apps/v4/public/r/styles/new-york/toggle-disabled.json
new file mode 100644
index 00000000000..53b807abc2c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-group-demo.json b/apps/v4/public/r/styles/new-york/toggle-group-demo.json
new file mode 100644
index 00000000000..f7e6be3e760
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-group-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-group-disabled.json b/apps/v4/public/r/styles/new-york/toggle-group-disabled.json
new file mode 100644
index 00000000000..d76c257a709
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-group-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-disabled.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" disabled>\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-group-lg.json b/apps/v4/public/r/styles/new-york/toggle-group-lg.json
new file mode 100644
index 00000000000..bbc660f0cbe
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-group-lg.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-lg",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-lg.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" size=\"lg\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-group-outline.json b/apps/v4/public/r/styles/new-york/toggle-group-outline.json
new file mode 100644
index 00000000000..bdf8147b091
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-group-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-outline.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"outline\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-group-single.json b/apps/v4/public/r/styles/new-york/toggle-group-single.json
new file mode 100644
index 00000000000..2293a03ebae
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-group-single.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-single",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-single.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"single\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-group-sm.json b/apps/v4/public/r/styles/new-york/toggle-group-sm.json
new file mode 100644
index 00000000000..da7100ecb06
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-group-sm.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-sm",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-sm.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"single\" size=\"sm\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-group.json b/apps/v4/public/r/styles/new-york/toggle-group.json
new file mode 100644
index 00000000000..09f148971d6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-group.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-toggle-group"
+  ],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/new-york/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    className={cn(\"flex items-center justify-center gap-1\", className)}\n    {...props}\n  >\n    <ToggleGroupContext.Provider value={{ variant, size }}>\n      {children}\n    </ToggleGroupContext.Provider>\n  </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n    VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-lg.json b/apps/v4/public/r/styles/new-york/toggle-lg.json
new file mode 100644
index 00000000000..3bbd6af6c7c
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-lg.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-lg",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-lg.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleLg() {\n  return (\n    <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-outline.json b/apps/v4/public/r/styles/new-york/toggle-outline.json
new file mode 100644
index 00000000000..319d334fef1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-sm.json b/apps/v4/public/r/styles/new-york/toggle-sm.json
new file mode 100644
index 00000000000..8a1292a43b8
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-sm.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-sm",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-sm.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleSm() {\n  return (\n    <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle-with-text.json b/apps/v4/public/r/styles/new-york/toggle-with-text.json
new file mode 100644
index 00000000000..b2e4dcbaabb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/toggle.json b/apps/v4/public/r/styles/new-york/toggle.json
new file mode 100644
index 00000000000..d04d330fe99
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/toggle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-toggle"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-2 min-w-9\",\n        sm: \"h-8 px-1.5 min-w-8\",\n        lg: \"h-10 px-2.5 min-w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/tooltip-demo.json b/apps/v4/public/r/styles/new-york/tooltip-demo.json
new file mode 100644
index 00000000000..b889359b3ea
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/tooltip-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "examples/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport default function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/tooltip.json b/apps/v4/public/r/styles/new-york/tooltip.json
new file mode 100644
index 00000000000..57e3f906607
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/tooltip.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-tooltip"
+  ],
+  "files": [
+    {
+      "path": "ui/tooltip.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-blockquote.json b/apps/v4/public/r/styles/new-york/typography-blockquote.json
new file mode 100644
index 00000000000..7afcb802cdf
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-blockquote.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-blockquote",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-blockquote.tsx",
+      "content": "export default function TypographyBlockquote() {\n  return (\n    <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n      they should pay for the privilege.\"\n    </blockquote>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-demo.json b/apps/v4/public/r/styles/new-york/typography-demo.json
new file mode 100644
index 00000000000..c5ae2e8b977
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-demo.tsx",
+      "content": "export default function TypographyDemo() {\n  return (\n    <div>\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n        The Joke Tax Chronicles\n      </h1>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </p>\n      <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n        The King's Plan\n      </h2>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king thought long and hard, and finally came up with{\" \"}\n        <a\n          href=\"#\"\n          className=\"font-medium text-primary underline underline-offset-4\"\n        >\n          a brilliant plan\n        </a>\n        : he would tax the jokes in the kingdom.\n      </p>\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n        \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n        that they should pay for the privilege.\"\n      </blockquote>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The Joke Tax\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king's subjects were not amused. They grumbled and complained, but\n        the king was firm:\n      </p>\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king's\n        foolishness get him down: a court jester named Jokester.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        Jokester's Revolt\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king's pillow, in his soup,\n        even in the royal toilet. The king was furious, but he couldn't seem to\n        stop Jokester.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn't help but laugh. And\n        once they started laughing, they couldn't stop.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The People's Rebellion\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </p>\n      <div className=\"my-6 w-full overflow-y-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                King's Treasury\n              </th>\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                People's happiness\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Empty\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Overflowing\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Modest\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Satisfied\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Full\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Ecstatic\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-h1.json b/apps/v4/public/r/styles/new-york/typography-h1.json
new file mode 100644
index 00000000000..0c282dda464
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-h1.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h1",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h1.tsx",
+      "content": "export default function TypographyH1() {\n  return (\n    <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      Taxing Laughter: The Joke Tax Chronicles\n    </h1>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-h2.json b/apps/v4/public/r/styles/new-york/typography-h2.json
new file mode 100644
index 00000000000..eb42b1c4142
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-h2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h2",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h2.tsx",
+      "content": "export default function TypographyH2() {\n  return (\n    <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n      The People of the Kingdom\n    </h2>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-h3.json b/apps/v4/public/r/styles/new-york/typography-h3.json
new file mode 100644
index 00000000000..946cf24167a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-h3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h3",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h3.tsx",
+      "content": "export default function TypographyH3() {\n  return (\n    <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-h4.json b/apps/v4/public/r/styles/new-york/typography-h4.json
new file mode 100644
index 00000000000..bbd61e8a255
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-h4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h4",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h4.tsx",
+      "content": "export default function TypographyH4() {\n  return (\n    <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n      People stopped telling jokes\n    </h4>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-inline-code.json b/apps/v4/public/r/styles/new-york/typography-inline-code.json
new file mode 100644
index 00000000000..edcf52f8b4a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-inline-code.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-inline-code",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-inline-code.tsx",
+      "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n      @radix-ui/react-alert-dialog\n    </code>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-large.json b/apps/v4/public/r/styles/new-york/typography-large.json
new file mode 100644
index 00000000000..fba10786a01
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-large.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-large",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-large.tsx",
+      "content": "export default function TypographyLarge() {\n  return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-lead.json b/apps/v4/public/r/styles/new-york/typography-lead.json
new file mode 100644
index 00000000000..c38d1ef4a04
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-lead.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-lead",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-lead.tsx",
+      "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-xl text-muted-foreground\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-list.json b/apps/v4/public/r/styles/new-york/typography-list.json
new file mode 100644
index 00000000000..397d847ec2b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-list.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-list",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-list.tsx",
+      "content": "export default function TypographyList() {\n  return (\n    <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-muted.json b/apps/v4/public/r/styles/new-york/typography-muted.json
new file mode 100644
index 00000000000..786c2904577
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-muted.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-muted",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-muted.tsx",
+      "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-p.json b/apps/v4/public/r/styles/new-york/typography-p.json
new file mode 100644
index 00000000000..eb9a367fb1a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-p.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-p",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-p.tsx",
+      "content": "export default function TypographyP() {\n  return (\n    <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error of\n      his ways and repealed the joke tax.\n    </p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-small.json b/apps/v4/public/r/styles/new-york/typography-small.json
new file mode 100644
index 00000000000..f9cebba93fd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-small.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-small",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-small.tsx",
+      "content": "export default function TypographySmall() {\n  return (\n    <small className=\"text-sm font-medium leading-none\">Email address</small>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/typography-table.json b/apps/v4/public/r/styles/new-york/typography-table.json
new file mode 100644
index 00000000000..af19b2b08f1
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/typography-table.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-table",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-table.tsx",
+      "content": "export default function TypographyTable() {\n  return (\n    <div className=\"my-6 w-full overflow-y-auto\">\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              King's Treasury\n            </th>\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Empty\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Overflowing\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Modest\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Satisfied\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Full\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/use-mobile.json b/apps/v4/public/r/styles/new-york/use-mobile.json
new file mode 100644
index 00000000000..50fc54a1982
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/use-mobile.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-mobile",
+  "type": "registry:hook",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "hooks/use-mobile.tsx",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/use-toast.json b/apps/v4/public/r/styles/new-york/use-toast.json
new file mode 100644
index 00000000000..f216cba4243
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/use-toast.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-toast",
+  "type": "registry:hook",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "hooks/use-toast.ts",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/new-york/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { useToast, toast }\n",
+      "type": "registry:hook",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/utils.json b/apps/v4/public/r/styles/new-york/utils.json
new file mode 100644
index 00000000000..0af1ec0d616
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/utils.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "utils",
+  "type": "registry:lib",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-login-01-dark.png b/apps/v4/public/r/styles/new-york/v0-login-01-dark.png
new file mode 100644
index 00000000000..a919e7811c2
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-login-01-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-login-01-light.png b/apps/v4/public/r/styles/new-york/v0-login-01-light.png
new file mode 100644
index 00000000000..99e01a47d44
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-login-01-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-login-01.json b/apps/v4/public/r/styles/new-york/v0-login-01.json
new file mode 100644
index 00000000000..f01c3f77bb6
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-login-01.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-login-01",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "internal/login-01.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-screen w-full items-center justify-center px-4\">\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\n                  href=\"#\"\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        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-01-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-01-dark.png
new file mode 100644
index 00000000000..7b7cf8fa24c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-01-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-01-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-01-light.png
new file mode 100644
index 00000000000..d59e52ad973
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-01-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-01.json b/apps/v4/public/r/styles/new-york/v0-sidebar-01.json
new file mode 100644
index 00000000000..9de56de16bd
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-01.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-01",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <GalleryVerticalEnd className=\"size-4\" />\n                    </div>\n                    <div className=\"flex flex-col gap-0.5 leading-none\">\n                      <span className=\"font-semibold\">Documentation</span>\n                      <span className=\"\">v{selectedVersion}</span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n                >\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <Check className=\"ml-auto\" />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {/* We create a SidebarGroup for each parent. */}\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((item) => (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton asChild isActive={item.isActive}>\n                        <a href={item.url}>{item.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": "components/sidebar-01.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-02-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-02-dark.png
new file mode 100644
index 00000000000..e92a167de03
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-02-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-02-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-02-light.png
new file mode 100644
index 00000000000..287bb936ca3
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-02-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-02.json b/apps/v4/public/r/styles/new-york/v0-sidebar-02.json
new file mode 100644
index 00000000000..804787539b9
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-02.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-02",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  GalleryVerticalEnd,\n  Search,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <GalleryVerticalEnd className=\"size-4\" />\n                    </div>\n                    <div className=\"flex flex-col gap-0.5 leading-none\">\n                      <span className=\"font-semibold\">Documentation</span>\n                      <span className=\"\">v{selectedVersion}</span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n                >\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <Check className=\"ml-auto\" />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent className=\"gap-0\">\n          {/* We create a collapsible SidebarGroup for each parent. */}\n          {data.navMain.map((item) => (\n            <Collapsible\n              key={item.title}\n              title={item.title}\n              defaultOpen\n              className=\"group/collapsible\"\n            >\n              <SidebarGroup>\n                <SidebarGroupLabel\n                  asChild\n                  className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <CollapsibleTrigger>\n                    {item.title}{\" \"}\n                    <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                  </CollapsibleTrigger>\n                </SidebarGroupLabel>\n                <CollapsibleContent>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      {item.items.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                          <SidebarMenuButton asChild isActive={item.isActive}>\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </CollapsibleContent>\n              </SidebarGroup>\n            </Collapsible>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-03-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-03-dark.png
new file mode 100644
index 00000000000..f8321378c15
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-03-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-03-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-03-light.png
new file mode 100644
index 00000000000..77643fccb73
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-03-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-03.json b/apps/v4/public/r/styles/new-york/v0-sidebar-03.json
new file mode 100644
index 00000000000..ee5bd16496f
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-03.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-03",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-04-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-04-dark.png
new file mode 100644
index 00000000000..cfb5b162016
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-04-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-04-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-04-light.png
new file mode 100644
index 00000000000..07b0fa47a45
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-04-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-04.json b/apps/v4/public/r/styles/new-york/v0-sidebar-04.json
new file mode 100644
index 00000000000..667d7352121
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-04.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-04",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu className=\"gap-2\">\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-05-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-05-dark.png
new file mode 100644
index 00000000000..893ef968f3e
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-05-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-05-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-05-light.png
new file mode 100644
index 00000000000..a3a88c38e8c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-05-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-05.json b/apps/v4/public/r/styles/new-york/v0-sidebar-05.json
new file mode 100644
index 00000000000..94c9be19b61
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-05.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-05",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-05.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item, index) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={index === 1}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger asChild>\n                      <SidebarMenuButton>\n                        {item.title}{\" \"}\n                        <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                        <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                      </SidebarMenuButton>\n                    </CollapsibleTrigger>\n                    {item.items?.length ? (\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((item) => (\n                            <SidebarMenuSubItem key={item.title}>\n                              <SidebarMenuSubButton\n                                asChild\n                                isActive={item.isActive}\n                              >\n                                <a href={item.url}>{item.title}</a>\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-06-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-06-dark.png
new file mode 100644
index 00000000000..0115ddb1200
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-06-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-06-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-06-light.png
new file mode 100644
index 00000000000..f36a857718f
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-06-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-06.json b/apps/v4/public/r/styles/new-york/v0-sidebar-06.json
new file mode 100644
index 00000000000..81e033e09bb
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-06.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-06",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-06.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd, MoreHorizontal } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title} <MoreHorizontal className=\"ml-auto\" />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent\n                        side=\"bottom\"\n                        align=\"end\"\n                        className=\"min-w-56 rounded-lg\"\n                      >\n                        {item.items.map((item) => (\n                          <DropdownMenuItem asChild key={item.title}>\n                            <a href={item.url}>{item.title}</a>\n                          </DropdownMenuItem>\n                        ))}\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <div className=\"p-1\">\n            <Card className=\"shadow-none\">\n              <form>\n                <CardHeader className=\"p-4 pb-0\">\n                  <CardTitle className=\"text-sm\">\n                    Subscribe to our newsletter\n                  </CardTitle>\n                  <CardDescription>\n                    Opt-in to receive updates and news about the sidebar.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent className=\"grid gap-2.5 p-4\">\n                  <SidebarInput type=\"email\" placeholder=\"Email\" />\n                  <Button\n                    className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                    size=\"sm\"\n                  >\n                    Subscribe\n                  </Button>\n                </CardContent>\n              </form>\n            </Card>\n          </div>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-07-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-07-dark.png
new file mode 100644
index 00000000000..43a9fb16d7a
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-07-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-07-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-07-light.png
new file mode 100644
index 00000000000..e66a7e58f9f
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-07-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-07.json b/apps/v4/public/r/styles/new-york/v0-sidebar-07.json
new file mode 100644
index 00000000000..c17bb33d270
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-07.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-07",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport default function Page() {\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <activeTeam.logo className=\"size-4\" />\n                    </div>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                    Teams\n                  </DropdownMenuLabel>\n                  {data.teams.map((team, index) => (\n                    <DropdownMenuItem\n                      key={team.name}\n                      onClick={() => setActiveTeam(team)}\n                      className=\"gap-2 p-2\"\n                    >\n                      <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                        <team.logo className=\"size-4 shrink-0\" />\n                      </div>\n                      {team.name}\n                      <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                    </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                    <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                      <Plus className=\"size-4\" />\n                    </div>\n                    <div className=\"font-medium text-muted-foreground\">\n                      Add team\n                    </div>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger asChild>\n                      <SidebarMenuButton tooltip={item.title}>\n                        {item.icon && <item.icon />}\n                        <span>{item.title}</span>\n                        <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                      </SidebarMenuButton>\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>\n                                <span>{subItem.title}</span>\n                              </a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      <item.icon />\n                      <span>{item.name}</span>\n                    </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuAction showOnHover>\n                        <MoreHorizontal />\n                        <span className=\"sr-only\">More</span>\n                      </SidebarMenuAction>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      className=\"w-48 rounded-lg\"\n                      side=\"bottom\"\n                      align=\"end\"\n                    >\n                      <DropdownMenuItem>\n                        <Folder className=\"text-muted-foreground\" />\n                        <span>View Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Forward className=\"text-muted-foreground\" />\n                        <span>Share Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <Trash2 className=\"text-muted-foreground\" />\n                        <span>Delete Project</span>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </SidebarMenuItem>\n              ))}\n              <SidebarMenuItem>\n                <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar className=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side=\"bottom\"\n                  align=\"end\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                    <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <Sparkles />\n                      Upgrade to Pro\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <BadgeCheck />\n                      Account\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <CreditCard />\n                      Billing\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <Bell />\n                      Notifications\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <LogOut />\n                    Log out\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-08-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-08-dark.png
new file mode 100644
index 00000000000..6de2042e8e0
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-08-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-08-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-08-light.png
new file mode 100644
index 00000000000..8f36ab1d856
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-08-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-08.json b/apps/v4/public/r/styles/new-york/v0-sidebar-08.json
new file mode 100644
index 00000000000..a786f68a4ba
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-08.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-08",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-08.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Frame,\n  LifeBuoy,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n  Settings2,\n  Share,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton asChild tooltip={item.title}>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <ChevronRight />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      <item.icon />\n                      <span>{item.name}</span>\n                    </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuAction showOnHover>\n                        <MoreHorizontal />\n                        <span className=\"sr-only\">More</span>\n                      </SidebarMenuAction>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      className=\"w-48\"\n                      side=\"bottom\"\n                      align=\"end\"\n                    >\n                      <DropdownMenuItem>\n                        <Folder className=\"text-muted-foreground\" />\n                        <span>View Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Share className=\"text-muted-foreground\" />\n                        <span>Share Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <Trash2 className=\"text-muted-foreground\" />\n                        <span>Delete Project</span>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </SidebarMenuItem>\n              ))}\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar className=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side=\"bottom\"\n                  align=\"end\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                    <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <Sparkles />\n                      Upgrade to Pro\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <BadgeCheck />\n                      Account\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <CreditCard />\n                      Billing\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <Bell />\n                      Notifications\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <LogOut />\n                    Log out\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-09-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-09-dark.png
new file mode 100644
index 00000000000..80833544957
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-09-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-09-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-09-light.png
new file mode 100644
index 00000000000..7b2e848f66c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-09-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-09.json b/apps/v4/public/r/styles/new-york/v0-sidebar-09.json
new file mode 100644
index 00000000000..f491e5bda3a
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-09.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-09",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveX,\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  File,\n  Inbox,\n  LogOut,\n  Send,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\nimport { Switch } from \"@/components/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-10-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-10-dark.png
new file mode 100644
index 00000000000..9ac92d8e32b
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-10-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-10-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-10-light.png
new file mode 100644
index 00000000000..4ba7a53a646
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-10-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-10.json b/apps/v4/public/r/styles/new-york/v0-sidebar-10.json
new file mode 100644
index 00000000000..023503a20d2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-10.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-10",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowUpRight,\n  AudioWaveform,\n  Bell,\n  Blocks,\n  Calendar,\n  ChevronDown,\n  ChevronRight,\n  Command,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  Home,\n  Inbox,\n  LineChart,\n  Link,\n  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  Star,\n  StarOff,\n  Trash,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n  actions: [\n    [\n      {\n        label: \"Customize Page\",\n        icon: Settings2,\n      },\n      {\n        label: \"Turn into wiki\",\n        icon: FileText,\n      },\n    ],\n    [\n      {\n        label: \"Copy Link\",\n        icon: Link,\n      },\n      {\n        label: \"Duplicate\",\n        icon: Copy,\n      },\n      {\n        label: \"Move to\",\n        icon: CornerUpRight,\n      },\n      {\n        label: \"Move to Trash\",\n        icon: Trash2,\n      },\n    ],\n    [\n      {\n        label: \"Undo\",\n        icon: CornerUpLeft,\n      },\n      {\n        label: \"View analytics\",\n        icon: LineChart,\n      },\n      {\n        label: \"Version History\",\n        icon: GalleryVerticalEnd,\n      },\n      {\n        label: \"Show delete pages\",\n        icon: Trash,\n      },\n      {\n        label: \"Notifications\",\n        icon: Bell,\n      },\n    ],\n    [\n      {\n        label: \"Import\",\n        icon: ArrowUp,\n      },\n      {\n        label: \"Export\",\n        icon: ArrowDown,\n      },\n    ],\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions actions={data.actions} />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction NavActions({\n  actions,\n}: {\n  actions: {\n    label: string\n    icon: LucideIcon\n  }[][]\n}) {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {actions.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n\nfunction NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nfunction NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nfunction NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-11-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-11-dark.png
new file mode 100644
index 00000000000..fe7240b71be
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-11-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-11-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-11-light.png
new file mode 100644
index 00000000000..abd19a6a76c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-11-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-11.json b/apps/v4/public/r/styles/new-york/v0-sidebar-11.json
new file mode 100644
index 00000000000..5802b1f6882
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-11.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-11",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-11.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <File />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <File />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton>\n            <ChevronRight className=\"transition-transform\" />\n            <Folder />\n            {name}\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-12-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-12-dark.png
new file mode 100644
index 00000000000..9d6b6164c3c
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-12-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-12-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-12-light.png
new file mode 100644
index 00000000000..b1fac8c4cf2
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-12-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-12.json b/apps/v4/public/r/styles/new-york/v0-sidebar-12.json
new file mode 100644
index 00000000000..f8e7fafab62
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-12.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-12",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BadgeCheck,\n  Bell,\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Plus,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n\nfunction DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-13-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-13-dark.png
new file mode 100644
index 00000000000..34c2606f327
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-13-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-13-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-13-light.png
new file mode 100644
index 00000000000..cb5efd33e6a
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-13-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-13.json b/apps/v4/public/r/styles/new-york/v0-sidebar-13.json
new file mode 100644
index 00000000000..31b570c8d9b
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-13.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-13",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n\nfunction SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-14-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-14-dark.png
new file mode 100644
index 00000000000..ccbf36c07c5
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-14-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-14-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-14-light.png
new file mode 100644
index 00000000000..d19f20508a4
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-14-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-14.json b/apps/v4/public/r/styles/new-york/v0-sidebar-14.json
new file mode 100644
index 00000000000..55b512fc163
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-14.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-14",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-14.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-15-dark.png b/apps/v4/public/r/styles/new-york/v0-sidebar-15-dark.png
new file mode 100644
index 00000000000..dc7d52abbdf
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-15-dark.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-15-light.png b/apps/v4/public/r/styles/new-york/v0-sidebar-15-light.png
new file mode 100644
index 00000000000..6b89b39681d
Binary files /dev/null and b/apps/v4/public/r/styles/new-york/v0-sidebar-15-light.png differ
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-15.json b/apps/v4/public/r/styles/new-york/v0-sidebar-15.json
new file mode 100644
index 00000000000..e46c60f1da2
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-15.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-15",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpRight,\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  Blocks,\n  CalendarIcon,\n  Check,\n  ChevronDown,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Home,\n  Inbox,\n  Link,\n  LogOut,\n  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  StarOff,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst sidebarLeftData = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: CalendarIcon,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\n// This is sample data.\nconst sidebarRightData = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n\nfunction SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={sidebarLeftData.teams} />\n        <NavMain items={sidebarLeftData.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={sidebarLeftData.favorites} />\n        <NavWorkspaces workspaces={sidebarLeftData.workspaces} />\n        <NavSecondary\n          items={sidebarLeftData.navSecondary}\n          className=\"mt-auto\"\n        />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={sidebarRightData.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={sidebarRightData.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n\nfunction Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n\nfunction DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nfunction NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nfunction NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nfunction NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/v0-sidebar-16.json b/apps/v4/public/r/styles/new-york/v0-sidebar-16.json
new file mode 100644
index 00000000000..649658c0552
--- /dev/null
+++ b/apps/v4/public/r/styles/new-york/v0-sidebar-16.json
@@ -0,0 +1,23 @@
+{
+  "name": "v0-sidebar-16",
+  "type": "registry:block",
+  "description": "An inset sidebar with site header navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "navigation-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "v0/sidebar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport {\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Frame,\n  LifeBuoy,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n  Settings2,\n  Share,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\nconst HEADER_HEIGHT = \"4rem\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function Page() {\n  const [open, setOpen] = React.useState(true)\n  const { isMobile } = useSidebar()\n\n  return (\n    <div\n      style={\n        {\n          \"--header-height\": HEADER_HEIGHT,\n        } as React.CSSProperties\n      }\n    >\n      <header className=\"sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20\">\n        <div className=\"flex items-center gap-2 w-full\">\n          <Button\n            className=\"hidden md:flex\"\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => setOpen(!open)}\n          >\n            <Sidebar />\n          </Button>\n\n          <div className=\"mx-auto flex items-center gap-2\">\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <Command className=\"size-4\" />\n            </div>\n            <Separator orientation=\"vertical\" className=\"ml-4 h-4\" />\n            <NavigationMenu>\n              <NavigationMenuList>\n                <NavigationMenuItem>\n                  <NavigationMenuTrigger className=\"bg-sidebar\">\n                    Getting started\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                      <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                          <a\n                            className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                            href=\"/\"\n                          >\n                            <Icons.logo className=\"h-6 w-6\" />\n                            <div className=\"mb-2 mt-4 text-lg font-medium\">\n                              shadcn/ui\n                            </div>\n                            <p className=\"text-sm leading-tight text-muted-foreground\">\n                              Beautifully designed components built with Radix\n                              UI and Tailwind CSS.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Introduction\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              Re-usable components built using Radix UI and\n                              Tailwind CSS.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Installation\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              How to install dependencies and structure your\n                              app.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Typography\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              Styles for headings, paragraphs, lists...etc\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                  <NavigationMenuTrigger className=\"bg-sidebar\">\n                    Components\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                      {components.map((component) => (\n                        <li>\n                          <NavigationMenuLink key={component.title} asChild>\n                            <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                              <div className=\"text-sm font-medium leading-none\">\n                                {component.title}\n                              </div>\n                              <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                                {component.description}\n                              </p>\n                            </a>\n                          </NavigationMenuLink>\n                        </li>\n                      ))}\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                  <Link href=\"/docs\" legacyBehavior passHref>\n                    <NavigationMenuLink\n                      className={cn(navigationMenuTriggerStyle(), \"bg-sidebar\")}\n                    >\n                      Documentation\n                    </NavigationMenuLink>\n                  </Link>\n                </NavigationMenuItem>\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n      </header>\n      <SidebarProvider open={open} onOpenChange={setOpen}>\n        <Sidebar\n          className=\"top-[--header-height] pb-[--header-height]\"\n          variant=\"inset\"\n        >\n          <SidebarHeader>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton size=\"lg\" asChild>\n                  <a href=\"#\">\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <Command className=\"size-4\" />\n                    </div>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">Acme Inc</span>\n                      <span className=\"truncate text-xs\">Enterprise</span>\n                    </div>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarHeader>\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupLabel>Platform</SidebarGroupLabel>\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <Collapsible\n                    key={item.title}\n                    asChild\n                    defaultOpen={item.isActive}\n                  >\n                    <SidebarMenuItem>\n                      <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                          <item.icon />\n                          <span>{item.title}</span>\n                        </a>\n                      </SidebarMenuButton>\n                      {item.items?.length ? (\n                        <>\n                          <CollapsibleTrigger asChild>\n                            <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                              <ChevronRight />\n                              <span className=\"sr-only\">Toggle</span>\n                            </SidebarMenuAction>\n                          </CollapsibleTrigger>\n                          <CollapsibleContent>\n                            <SidebarMenuSub>\n                              {item.items?.map((subItem) => (\n                                <SidebarMenuSubItem key={subItem.title}>\n                                  <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                      <span>{subItem.title}</span>\n                                    </a>\n                                  </SidebarMenuSubButton>\n                                </SidebarMenuSubItem>\n                              ))}\n                            </SidebarMenuSub>\n                          </CollapsibleContent>\n                        </>\n                      ) : null}\n                    </SidebarMenuItem>\n                  </Collapsible>\n                ))}\n              </SidebarMenu>\n            </SidebarGroup>\n            <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n              <SidebarGroupLabel>Projects</SidebarGroupLabel>\n              <SidebarMenu>\n                {data.projects.map((item) => (\n                  <SidebarMenuItem key={item.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                          <MoreHorizontal />\n                          <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                      >\n                        <DropdownMenuItem>\n                          <Folder className=\"text-muted-foreground\" />\n                          <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <Share className=\"text-muted-foreground\" />\n                          <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                          <Trash2 className=\"text-muted-foreground\" />\n                          <span>Delete Project</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </SidebarMenuItem>\n                ))}\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <MoreHorizontal />\n                    <span>More</span>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroup>\n            <SidebarGroup className=\"mt-auto\">\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {data.navSecondary.map((item) => (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                          <item.icon />\n                          <span>{item.title}</span>\n                        </a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n          <SidebarFooter>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                    >\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                      <ChevronsUpDown className=\"ml-auto size-4\" />\n                    </SidebarMenuButton>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent\n                    className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                    side={isMobile ? \"bottom\" : \"right\"}\n                    align=\"end\"\n                    sideOffset={4}\n                  >\n                    <DropdownMenuLabel className=\"p-0 font-normal\">\n                      <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                          <AvatarImage\n                            src={data.user.avatar}\n                            alt={data.user.name}\n                          />\n                          <AvatarFallback className=\"rounded-lg\">\n                            CN\n                          </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                          <span className=\"truncate font-semibold\">\n                            {data.user.name}\n                          </span>\n                          <span className=\"truncate text-xs\">\n                            {data.user.email}\n                          </span>\n                        </div>\n                      </div>\n                    </DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                      </DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                      </DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <LogOut />\n                      Log out\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarFooter>\n        </Sidebar>\n\n        <SidebarInset>\n          <header className=\" flex shrink-0 items-center gap-2 border-b py-2\">\n            <div className=\"flex items-center gap-2 px-4 py-2\">\n              <div className=\"flex md:hidden items-center gap-2\">\n                <SidebarTrigger />\n                <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n              </div>\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem className=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Building Your Application\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator className=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div className=\"flex flex-1 flex-col gap-4 p-4\">\n            <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            </div>\n            <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n          </div>\n        </SidebarInset>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:block",
+      "target": "components/sidebar-16.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/themes.css b/apps/v4/public/r/themes.css
new file mode 100644
index 00000000000..f953bb054f7
--- /dev/null
+++ b/apps/v4/public/r/themes.css
@@ -0,0 +1,768 @@
+
+.theme-zinc {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 240 5.9% 10%;
+
+  --radius: 0.5rem;
+}
+
+.dark .theme-zinc {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 240 4.9% 83.9%;
+}
+
+.theme-slate {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+
+  --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 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 222.2 84% 4.9%;
+
+  --radius: 0.5rem;
+}
+
+.dark .theme-slate {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 212.7 26.8% 83.9;
+}
+
+.theme-stone {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 24 9.8% 10%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20 14.3% 4.1%;
+
+  --radius: 0.95rem;
+}
+
+.dark .theme-stone {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 60 9.1% 97.8%;
+  --primary-foreground: 24 9.8% 10%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 24 5.7% 82.9%;
+}
+
+.theme-gray {
+  --background: 0 0% 100%;
+  --foreground: 224 71.4% 4.1%;
+
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+
+  --primary: 220.9 39.3% 11%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 224 71.4% 4.1%;
+
+  --radius: 0.35rem;
+}
+
+.dark .theme-gray {
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
+
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+
+  --primary: 210 20% 98%;
+  --primary-foreground: 220.9 39.3% 11%;
+
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 216 12.2% 83.9%;
+}
+
+.theme-neutral {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 0% 3.9%;
+
+  --radius: ;
+}
+
+.dark .theme-neutral {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 0% 83.1%;
+}
+
+.theme-red {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+
+  --primary: 0 72.2% 50.6%;
+  --primary-foreground: 0 85.7% 97.3%;
+
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 72.2% 50.6%;
+
+  --radius: 0.4rem;
+}
+
+.dark .theme-red {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+
+  --primary: 0 72.2% 50.6%;
+  --primary-foreground: 0 85.7% 97.3%;
+
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 72.2% 50.6%;
+}
+
+.theme-rose {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 346.8 77.2% 49.8%;
+
+  --radius: 0.5rem;
+}
+
+.dark .theme-rose {
+  --background: 20 14.3% 4.1%;
+  --foreground: 0 0% 95%;
+
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+
+  --card: 24 9.8% 10%;
+  --card-foreground: 0 0% 95%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+
+  --ring: 346.8 77.2% 49.8%;
+}
+
+.theme-orange {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 24.6 95% 53.1%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 24.6 95% 53.1%;
+
+  --radius: 0.95rem;
+}
+
+.dark .theme-orange {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 20.5 90.2% 48.2%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 72.2% 50.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20.5 90.2% 48.2%;
+}
+
+.theme-green {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 142.1 76.2% 36.3%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 142.1 76.2% 36.3%;
+
+  --radius: ;
+}
+
+.dark .theme-green {
+  --background: 20 14.3% 4.1%;
+  --foreground: 0 0% 95%;
+
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+
+  --card: 24 9.8% 10%;
+  --card-foreground: 0 0% 95%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 142.1 70.6% 45.3%;
+  --primary-foreground: 144.9 80.4% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+
+  --ring: 142.4 71.8% 29.2%;
+}
+
+.theme-blue {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+
+  --primary: 221.2 83.2% 53.3%;
+  --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 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 221.2 83.2% 53.3%;
+
+  --radius: ;
+}
+
+.dark .theme-blue {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 224.3 76.3% 48%;
+}
+
+.theme-yellow {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 47.9 95.8% 53.1%;
+  --primary-foreground: 26 83.3% 14.1%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20 14.3% 4.1%;
+
+  --radius: 0.95rem;
+}
+
+.dark .theme-yellow {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 47.9 95.8% 53.1%;
+  --primary-foreground: 26 83.3% 14.1%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 35.5 91.7% 32.9%;
+}
+
+.theme-violet {
+  --background: 0 0% 100%;
+  --foreground: 224 71.4% 4.1%;
+
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+
+  --primary: 262.1 83.3% 57.8%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 262.1 83.3% 57.8%;
+
+  --radius: ;
+}
+
+.dark .theme-violet {
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
+
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+
+  --primary: 263.4 70% 50.4%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 263.4 70% 50.4%;
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/themes/gray.json b/apps/v4/public/r/themes/gray.json
new file mode 100644
index 00000000000..a7f4d7498d7
--- /dev/null
+++ b/apps/v4/public/r/themes/gray.json
@@ -0,0 +1,58 @@
+{
+  "name": "gray",
+  "label": "Gray",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "224 71.4% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "224 71.4% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "224 71.4% 4.1%",
+      "primary": "220.9 39.3% 11%",
+      "primary-foreground": "210 20% 98%",
+      "secondary": "220 14.3% 95.9%",
+      "secondary-foreground": "220.9 39.3% 11%",
+      "muted": "220 14.3% 95.9%",
+      "muted-foreground": "220 8.9% 46.1%",
+      "accent": "220 14.3% 95.9%",
+      "accent-foreground": "220.9 39.3% 11%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "220 13% 91%",
+      "input": "220 13% 91%",
+      "ring": "224 71.4% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "224 71.4% 4.1%",
+      "foreground": "210 20% 98%",
+      "card": "224 71.4% 4.1%",
+      "card-foreground": "210 20% 98%",
+      "popover": "224 71.4% 4.1%",
+      "popover-foreground": "210 20% 98%",
+      "primary": "210 20% 98%",
+      "primary-foreground": "220.9 39.3% 11%",
+      "secondary": "215 27.9% 16.9%",
+      "secondary-foreground": "210 20% 98%",
+      "muted": "215 27.9% 16.9%",
+      "muted-foreground": "217.9 10.6% 64.9%",
+      "accent": "215 27.9% 16.9%",
+      "accent-foreground": "210 20% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "215 27.9% 16.9%",
+      "input": "215 27.9% 16.9%",
+      "ring": "216 12.2% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/themes/neutral.json b/apps/v4/public/r/themes/neutral.json
new file mode 100644
index 00000000000..775f929bc69
--- /dev/null
+++ b/apps/v4/public/r/themes/neutral.json
@@ -0,0 +1,58 @@
+{
+  "name": "neutral",
+  "label": "Neutral",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "0 0% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "0 0% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "0 0% 3.9%",
+      "primary": "0 0% 9%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "0 0% 96.1%",
+      "secondary-foreground": "0 0% 9%",
+      "muted": "0 0% 96.1%",
+      "muted-foreground": "0 0% 45.1%",
+      "accent": "0 0% 96.1%",
+      "accent-foreground": "0 0% 9%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 89.8%",
+      "input": "0 0% 89.8%",
+      "ring": "0 0% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "0 0% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "0 0% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "0 0% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "0 0% 9%",
+      "secondary": "0 0% 14.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "0 0% 14.9%",
+      "muted-foreground": "0 0% 63.9%",
+      "accent": "0 0% 14.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 14.9%",
+      "input": "0 0% 14.9%",
+      "ring": "0 0% 83.1%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/themes/slate.json b/apps/v4/public/r/themes/slate.json
new file mode 100644
index 00000000000..17db98cb273
--- /dev/null
+++ b/apps/v4/public/r/themes/slate.json
@@ -0,0 +1,58 @@
+{
+  "name": "slate",
+  "label": "Slate",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "222.2 84% 4.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "222.2 84% 4.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "222.2 84% 4.9%",
+      "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%",
+      "muted": "210 40% 96.1%",
+      "muted-foreground": "215.4 16.3% 46.9%",
+      "accent": "210 40% 96.1%",
+      "accent-foreground": "222.2 47.4% 11.2%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "214.3 31.8% 91.4%",
+      "input": "214.3 31.8% 91.4%",
+      "ring": "222.2 84% 4.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "222.2 84% 4.9%",
+      "foreground": "210 40% 98%",
+      "card": "222.2 84% 4.9%",
+      "card-foreground": "210 40% 98%",
+      "popover": "222.2 84% 4.9%",
+      "popover-foreground": "210 40% 98%",
+      "primary": "210 40% 98%",
+      "primary-foreground": "222.2 47.4% 11.2%",
+      "secondary": "217.2 32.6% 17.5%",
+      "secondary-foreground": "210 40% 98%",
+      "muted": "217.2 32.6% 17.5%",
+      "muted-foreground": "215 20.2% 65.1%",
+      "accent": "217.2 32.6% 17.5%",
+      "accent-foreground": "210 40% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "217.2 32.6% 17.5%",
+      "input": "217.2 32.6% 17.5%",
+      "ring": "212.7 26.8% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/themes/stone.json b/apps/v4/public/r/themes/stone.json
new file mode 100644
index 00000000000..9b2babe0b22
--- /dev/null
+++ b/apps/v4/public/r/themes/stone.json
@@ -0,0 +1,58 @@
+{
+  "name": "stone",
+  "label": "Stone",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "20 14.3% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "20 14.3% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "20 14.3% 4.1%",
+      "primary": "24 9.8% 10%",
+      "primary-foreground": "60 9.1% 97.8%",
+      "secondary": "60 4.8% 95.9%",
+      "secondary-foreground": "24 9.8% 10%",
+      "muted": "60 4.8% 95.9%",
+      "muted-foreground": "25 5.3% 44.7%",
+      "accent": "60 4.8% 95.9%",
+      "accent-foreground": "24 9.8% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "20 5.9% 90%",
+      "input": "20 5.9% 90%",
+      "ring": "20 14.3% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "20 14.3% 4.1%",
+      "foreground": "60 9.1% 97.8%",
+      "card": "20 14.3% 4.1%",
+      "card-foreground": "60 9.1% 97.8%",
+      "popover": "20 14.3% 4.1%",
+      "popover-foreground": "60 9.1% 97.8%",
+      "primary": "60 9.1% 97.8%",
+      "primary-foreground": "24 9.8% 10%",
+      "secondary": "12 6.5% 15.1%",
+      "secondary-foreground": "60 9.1% 97.8%",
+      "muted": "12 6.5% 15.1%",
+      "muted-foreground": "24 5.4% 63.9%",
+      "accent": "12 6.5% 15.1%",
+      "accent-foreground": "60 9.1% 97.8%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "12 6.5% 15.1%",
+      "input": "12 6.5% 15.1%",
+      "ring": "24 5.7% 82.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/themes/zinc.json b/apps/v4/public/r/themes/zinc.json
new file mode 100644
index 00000000000..669fc8d3cd2
--- /dev/null
+++ b/apps/v4/public/r/themes/zinc.json
@@ -0,0 +1,58 @@
+{
+  "name": "zinc",
+  "label": "Zinc",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "240 5.9% 10%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 46.1%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "240 10% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "240 5.9% 10%",
+      "secondary": "240 3.7% 15.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "240 4.9% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/schema.json b/apps/v4/public/schema.json
new file mode 100644
index 00000000000..e5c9496f1ba
--- /dev/null
+++ b/apps/v4/public/schema.json
@@ -0,0 +1,98 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "style": {
+      "type": "string",
+      "enum": ["default", "new-york"]
+    },
+    "tailwind": {
+      "type": "object",
+      "properties": {
+        "config": {
+          "type": "string"
+        },
+        "css": {
+          "type": "string"
+        },
+        "baseColor": {
+          "type": "string"
+        },
+        "cssVariables": {
+          "type": "boolean"
+        },
+        "prefix": {
+          "type": "string"
+        }
+      },
+      "required": ["config", "css", "baseColor", "cssVariables"]
+    },
+    "rsc": {
+      "type": "boolean"
+    },
+    "tsx": {
+      "type": "boolean"
+    },
+    "iconLibrary": {
+      "type": "string"
+    },
+    "aliases": {
+      "type": "object",
+      "properties": {
+        "utils": {
+          "type": "string"
+        },
+        "components": {
+          "type": "string"
+        },
+        "ui": {
+          "type": "string"
+        },
+        "lib": {
+          "type": "string"
+        },
+        "hooks": {
+          "type": "string"
+        }
+      },
+      "required": ["utils", "components"]
+    },
+    "registries": {
+      "type": "object",
+      "patternProperties": {
+        "^@": {
+          "oneOf": [
+            {
+              "type": "string",
+              "pattern": "\\{name\\}"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "url": {
+                  "type": "string",
+                  "pattern": "\\{name\\}"
+                },
+                "params": {
+                  "type": "object",
+                  "additionalProperties": {
+                    "type": "string"
+                  }
+                },
+                "headers": {
+                  "type": "object",
+                  "additionalProperties": {
+                    "type": "string"
+                  }
+                }
+              },
+              "required": ["url"]
+            }
+          ]
+        }
+      },
+      "additionalProperties": false
+    }
+  },
+  "required": ["style", "tailwind", "rsc", "aliases"]
+}
diff --git a/apps/v4/public/schema/registry-item.json b/apps/v4/public/schema/registry-item.json
new file mode 100644
index 00000000000..c5ef84c2161
--- /dev/null
+++ b/apps/v4/public/schema/registry-item.json
@@ -0,0 +1,215 @@
+{
+  "$schema": "https://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the item. This is used to identify the item in the registry. It should be unique for your registry."
+    },
+    "type": {
+      "type": "string",
+      "enum": [
+        "registry:lib",
+        "registry:block",
+        "registry:component",
+        "registry:ui",
+        "registry:hook",
+        "registry:theme",
+        "registry:page",
+        "registry:file",
+        "registry:style",
+        "registry:item"
+      ],
+      "description": "The type of the item. This is used to determine the type and target path of the item when resolved for a project."
+    },
+    "description": {
+      "type": "string",
+      "description": "The description of the item. This is used to provide a brief overview of the item."
+    },
+    "title": {
+      "type": "string",
+      "description": "The human-readable title for your registry item. Keep it short and descriptive."
+    },
+    "author": {
+      "type": "string",
+      "description": "The author of the item. Recommended format: username <url>"
+    },
+    "dependencies": {
+      "type": "array",
+      "description": "An array of NPM dependencies required by the registry item.",
+      "items": {
+        "type": "string"
+      }
+    },
+    "devDependencies": {
+      "type": "array",
+      "description": "An array of NPM dev dependencies required by the registry item.",
+      "items": {
+        "type": "string"
+      }
+    },
+    "registryDependencies": {
+      "type": "array",
+      "description": "An array of registry items that this item depends on. Use the name of the item to reference shadcn/ui components and urls to reference other registries.",
+      "items": {
+        "type": "string"
+      }
+    },
+    "files": {
+      "type": "array",
+      "description": "The main payload of the registry item. This is an array of files that are part of the registry item. Each file is an object with a path, content, type, and target.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "path": {
+            "type": "string",
+            "description": "The path to the file relative to the registry root."
+          },
+          "content": {
+            "type": "string",
+            "description": "The content of the file."
+          },
+          "type": {
+            "type": "string",
+            "enum": [
+              "registry:lib",
+              "registry:block",
+              "registry:component",
+              "registry:ui",
+              "registry:hook",
+              "registry:theme",
+              "registry:page",
+              "registry:file",
+              "registry:style",
+              "registry:item"
+            ],
+            "description": "The type of the file. This is used to determine the type of the file when resolved for a project."
+          },
+          "target": {
+            "type": "string",
+            "description": "The target path of the file. This is the path to the file in the project."
+          }
+        },
+        "if": {
+          "properties": {
+            "type": {
+              "enum": ["registry:file", "registry:page"]
+            }
+          }
+        },
+        "then": {
+          "required": ["path", "type", "target"]
+        },
+        "else": {
+          "required": ["path", "type"]
+        }
+      }
+    },
+    "tailwind": {
+      "type": "object",
+      "description": "The tailwind configuration for the registry item. This is an object with a config property. Use cssVars for Tailwind v4 projects.",
+      "properties": {
+        "config": {
+          "type": "object",
+          "properties": {
+            "content": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "theme": {
+              "type": "object",
+              "additionalProperties": true
+            },
+            "plugins": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    },
+    "cssVars": {
+      "type": "object",
+      "description": "The css variables for the registry item. This will be merged with the project's css variables.",
+      "properties": {
+        "theme": {
+          "type": "object",
+          "description": "CSS variables for the @theme directive. For Tailwind v4 projects only. Use tailwind for older projects.",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "light": {
+          "type": "object",
+          "description": "CSS variables for the light theme.",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "dark": {
+          "type": "object",
+          "description": "CSS variables for the dark theme.",
+          "additionalProperties": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "css": {
+      "type": "object",
+      "description": "CSS definitions to be added to the project's CSS file. Supports at-rules, selectors, nested rules, utilities, layers, and more.",
+      "additionalProperties": {
+        "$ref": "#/definitions/cssValue"
+      }
+    },
+    "envVars": {
+      "type": "object",
+      "description": "Environment variables required by the registry item. Key-value pairs that will be added to the project's .env file.",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "meta": {
+      "type": "object",
+      "description": "Additional metadata for the registry item. This is an object with any key value pairs.",
+      "additionalProperties": true
+    },
+    "docs": {
+      "type": "string",
+      "description": "The documentation for the registry item. This is a markdown string."
+    },
+    "categories": {
+      "type": "array",
+      "items": {
+        "type": "string",
+        "description": "The categories of the registry item. This is an array of strings."
+      }
+    },
+    "extends": {
+      "type": "string",
+      "description": "The name of the registry item to extend. This is used to extend the base shadcn/ui style. Set to none to start fresh. This is available for registry:style items only."
+    }
+  },
+  "required": ["name", "type"],
+  "definitions": {
+    "cssValue": {
+      "oneOf": [
+        {
+          "type": "string",
+          "description": "CSS property value or direct CSS string"
+        },
+        {
+          "type": "object",
+          "description": "Nested CSS properties, selectors, or at-rules. Empty objects are allowed for at-rules with no body.",
+          "additionalProperties": {
+            "$ref": "#/definitions/cssValue"
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/apps/v4/public/schema/registry.json b/apps/v4/public/schema/registry.json
new file mode 100644
index 00000000000..6f21ab4b24e
--- /dev/null
+++ b/apps/v4/public/schema/registry.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://json-schema.org/draft-07/schema#",
+  "description": "A shadcn registry of components, hooks, pages, etc.",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string"
+    },
+    "homepage": {
+      "type": "string"
+    },
+    "items": {
+      "type": "array",
+      "items": {
+        "$ref": "https://ui.shadcn.com/schema/registry-item.json"
+      }
+    }
+  },
+  "required": ["name", "homepage", "items"],
+  "uniqueItems": true,
+  "minItems": 1
+}
diff --git a/apps/v4/public/site.webmanifest b/apps/v4/public/site.webmanifest
new file mode 100644
index 00000000000..d84fa29cba2
--- /dev/null
+++ b/apps/v4/public/site.webmanifest
@@ -0,0 +1,17 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "display": "standalone"
+}
diff --git a/apps/v4/public/twitter-image.png b/apps/v4/public/twitter-image.png
new file mode 100644
index 00000000000..4f7f6fd5bab
Binary files /dev/null and b/apps/v4/public/twitter-image.png differ
diff --git a/apps/v4/public/vercel.svg b/apps/v4/public/vercel.svg
new file mode 100644
index 00000000000..77053960334
--- /dev/null
+++ b/apps/v4/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/apps/v4/public/window.svg b/apps/v4/public/window.svg
new file mode 100644
index 00000000000..b2b2a44f6eb
--- /dev/null
+++ b/apps/v4/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/apps/v4/registry.json b/apps/v4/registry.json
new file mode 100644
index 00000000000..6dce8b7b73c
--- /dev/null
+++ b/apps/v4/registry.json
@@ -0,0 +1,5968 @@
+{
+  "name": "shadcn/ui",
+  "homepage": "https://ui.shadcn.com",
+  "items": [
+    {
+      "name": "index",
+      "type": "registry:style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "devDependencies": [
+        "tw-animate-css"
+      ],
+      "registryDependencies": [
+        "utils"
+      ],
+      "files": [],
+      "cssVars": {}
+    },
+    {
+      "name": "style",
+      "type": "registry:style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "devDependencies": [
+        "tw-animate-css"
+      ],
+      "registryDependencies": [
+        "utils"
+      ],
+      "files": [],
+      "cssVars": {}
+    },
+    {
+      "name": "accordion",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-accordion"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/accordion.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "alert",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/alert.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-alert-dialog"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/alert-dialog.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-aspect-ratio"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/aspect-ratio.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "avatar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/avatar.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "badge",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/badge.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/breadcrumb.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/button.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "calendar",
+      "type": "registry:ui",
+      "dependencies": [
+        "react-day-picker@latest",
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/calendar.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/card.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "carousel",
+      "type": "registry:ui",
+      "dependencies": [
+        "embla-carousel-react"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/carousel.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "chart",
+      "type": "registry:ui",
+      "dependencies": [
+        "recharts@2.15.4",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/chart.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "checkbox",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/checkbox.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "collapsible",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/collapsible.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "command",
+      "type": "registry:ui",
+      "dependencies": [
+        "cmdk"
+      ],
+      "registryDependencies": [
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/command.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "context-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-context-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/context-menu.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "dialog",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/dialog.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "drawer",
+      "type": "registry:ui",
+      "dependencies": [
+        "vaul",
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/drawer.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/dropdown-menu.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "form",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label",
+        "@radix-ui/react-slot",
+        "@hookform/resolvers",
+        "zod",
+        "react-hook-form"
+      ],
+      "registryDependencies": [
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/form.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "hover-card",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-hover-card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/hover-card.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "input",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/input.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "input-otp",
+      "type": "registry:ui",
+      "dependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/input-otp.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/label.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "menubar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-menubar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/menubar.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-navigation-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/navigation-menu.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "pagination",
+      "type": "registry:ui",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/pagination.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "popover",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/popover.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-progress"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/progress.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "radio-group",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/radio-group.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "resizable",
+      "type": "registry:ui",
+      "dependencies": [
+        "react-resizable-panels"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/resizable.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "scroll-area",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/scroll-area.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "select",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/select.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "separator",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/separator.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "sheet",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/sheet.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "sidebar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "separator",
+        "sheet",
+        "tooltip",
+        "input",
+        "use-mobile",
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/sidebar.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "colors": {
+                "sidebar": {
+                  "DEFAULT": "hsl(var(--sidebar-background))",
+                  "foreground": "hsl(var(--sidebar-foreground))",
+                  "primary": "hsl(var(--sidebar-primary))",
+                  "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                  "accent": "hsl(var(--sidebar-accent))",
+                  "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                  "border": "hsl(var(--sidebar-border))",
+                  "ring": "hsl(var(--sidebar-ring))"
+                }
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "sidebar-background": "0 0% 98%",
+          "sidebar-foreground": "240 5.3% 26.1%",
+          "sidebar-primary": "240 5.9% 10%",
+          "sidebar-primary-foreground": "0 0% 98%",
+          "sidebar-accent": "240 4.8% 95.9%",
+          "sidebar-accent-foreground": "240 5.9% 10%",
+          "sidebar-border": "220 13% 91%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        },
+        "dark": {
+          "sidebar-background": "240 5.9% 10%",
+          "sidebar-foreground": "240 4.8% 95.9%",
+          "sidebar-primary": "224.3 76.3% 48%",
+          "sidebar-primary-foreground": "0 0% 100%",
+          "sidebar-accent": "240 3.7% 15.9%",
+          "sidebar-accent-foreground": "240 4.8% 95.9%",
+          "sidebar-border": "240 3.7% 15.9%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        }
+      }
+    },
+    {
+      "name": "skeleton",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/skeleton.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "slider",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slider"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/slider.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "sonner",
+      "type": "registry:ui",
+      "dependencies": [
+        "sonner",
+        "next-themes"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/sonner.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "switch",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/switch.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "table",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/table.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "tabs",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/tabs.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "textarea",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/textarea.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "toggle",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/toggle.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toggle-group"
+      ],
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/toggle-group.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "tooltip",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/tooltip.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "dashboard-01",
+      "type": "registry:block",
+      "description": "A dashboard with sidebar, charts and data table.",
+      "dependencies": [
+        "@dnd-kit/core",
+        "@dnd-kit/modifiers",
+        "@dnd-kit/sortable",
+        "@dnd-kit/utilities",
+        "@tanstack/react-table",
+        "zod",
+        "@tabler/icons-react"
+      ],
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "chart",
+        "card",
+        "select",
+        "tabs",
+        "table",
+        "toggle-group",
+        "badge",
+        "button",
+        "checkbox",
+        "dropdown-menu",
+        "drawer",
+        "input",
+        "avatar",
+        "sheet",
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/data.json",
+          "type": "registry:file",
+          "target": "app/dashboard/data.json"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/site-header.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "1000px"
+      },
+      "categories": [
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-01",
+      "type": "registry:block",
+      "description": "A simple sidebar with navigation grouped by section.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-02",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible sections.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-03",
+      "type": "registry:block",
+      "description": "A sidebar with submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-04",
+      "type": "registry:block",
+      "description": "A floating sidebar with submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-05",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-05/components/search-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-06",
+      "type": "registry:block",
+      "description": "A sidebar with submenus as dropdowns.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-07",
+      "type": "registry:block",
+      "description": "A sidebar that collapses to icons.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-08",
+      "type": "registry:block",
+      "description": "An inset sidebar with secondary navigation.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-09",
+      "type": "registry:block",
+      "description": "Collapsible nested sidebars.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-09/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-09/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-10",
+      "type": "registry:block",
+      "description": "A sidebar in a popover.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-favorites.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-11",
+      "type": "registry:block",
+      "description": "A sidebar with a collapsible file tree.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-11/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-11/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-12",
+      "type": "registry:block",
+      "description": "A sidebar with a calendar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-13",
+      "type": "registry:block",
+      "description": "A sidebar in a dialog.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "button",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-13/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-14",
+      "type": "registry:block",
+      "description": "A sidebar on the right.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-14/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-14/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-15",
+      "type": "registry:block",
+      "description": "A left and right sidebar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-favorites.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-left.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-16",
+      "type": "registry:block",
+      "description": "A sidebar with a sticky site header.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "login-01",
+      "type": "registry:block",
+      "description": "A simple login form.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-01/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-02",
+      "type": "registry:block",
+      "description": "A two column login page with a cover image.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-02/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-03",
+      "type": "registry:block",
+      "description": "A login page with a muted background color.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-03/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-04",
+      "type": "registry:block",
+      "description": "A login page with form and image.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-04/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-05",
+      "type": "registry:block",
+      "description": "A simple email-only login page.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-05/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "calendar-01",
+      "type": "registry:block",
+      "description": "A simple calendar.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-01.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-02",
+      "type": "registry:block",
+      "description": "Multiple months with single selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-02.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-03",
+      "type": "registry:block",
+      "description": "Multiple months with multiple selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-03.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-04",
+      "type": "registry:block",
+      "description": "Single month with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-04.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-05",
+      "type": "registry:block",
+      "description": "Multiple months with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-05.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-06",
+      "type": "registry:block",
+      "description": "Range selection with minimum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-06.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-07",
+      "type": "registry:block",
+      "description": "Range selection with minimum and maximum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-07.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-08",
+      "type": "registry:block",
+      "description": "Calendar with disabled days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-08.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-09",
+      "type": "registry:block",
+      "description": "Calendar with disabled weekends",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-09.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-10",
+      "type": "registry:block",
+      "description": "Today button",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-10.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-11",
+      "type": "registry:block",
+      "description": "Start and end of month",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-11.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-12",
+      "type": "registry:block",
+      "description": "Localized calendar",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-12.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-13",
+      "type": "registry:block",
+      "description": "With Month and Year Dropdown",
+      "registryDependencies": [
+        "calendar",
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-13.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-14",
+      "type": "registry:block",
+      "description": "With Booked/Unavailable Days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-14.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-15",
+      "type": "registry:block",
+      "description": "With Week Numbers",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-15.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-16",
+      "type": "registry:block",
+      "description": "With time picker",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-16.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-17",
+      "type": "registry:block",
+      "description": "With time picker inline",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-17.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-18",
+      "type": "registry:block",
+      "description": "Variable size",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-18.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-19",
+      "type": "registry:block",
+      "description": "With presets",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-19.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-20",
+      "type": "registry:block",
+      "description": "With time presets",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-20.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-21",
+      "type": "registry:block",
+      "description": "Custom days and formatters",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-21.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-22",
+      "type": "registry:block",
+      "description": "Date picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-22.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-23",
+      "type": "registry:block",
+      "description": "Date range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-23.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-24",
+      "type": "registry:block",
+      "description": "Date and Time picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-24.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-25",
+      "type": "registry:block",
+      "description": "Date and Time range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-25.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-26",
+      "type": "registry:block",
+      "description": "Date range picker with time",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-26.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-27",
+      "type": "registry:block",
+      "description": "Chart filter",
+      "registryDependencies": [
+        "calendar",
+        "chart",
+        "card",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-27.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-28",
+      "type": "registry:block",
+      "description": "Input with date picker",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-28.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-29",
+      "type": "registry:block",
+      "description": "Natural language date picker",
+      "dependencies": [
+        "chrono-node"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-29.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-30",
+      "type": "registry:block",
+      "description": "With little-date",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-30.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-31",
+      "type": "registry:block",
+      "description": "With event slots",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-31.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "700px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-32",
+      "type": "registry:block",
+      "description": "Date picker in a drawer",
+      "registryDependencies": [
+        "calendar",
+        "button",
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-32.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "chart-area-axes",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-axes.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-gradient",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-gradient.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-icons.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-interactive.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-legend.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-linear",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-linear.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-stacked-expand",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-stacked-expand.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-step",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-step.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-bar-active",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-active.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-horizontal",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-horizontal.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-interactive.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-mixed",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-mixed.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-multiple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-negative",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-negative.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-line-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots-colors",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-dots-colors.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-dots-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-dots.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-interactive.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-linear",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-linear.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-multiple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-step",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-step.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-pie-donut-active",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-donut-active.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-donut-text",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-donut-text.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-donut",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-donut.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-interactive.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label-list",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-label-list.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-legend.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-separator-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-separator-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-simple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-simple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-radar-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-dots",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-dots.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle-fill",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle-no-lines",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-circle.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-fill",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-fill.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-icons.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-legend.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-lines-only",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-lines-only.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-multiple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-radius",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-radius.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radial-grid",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-grid.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-shape",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-shape.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-simple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-simple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-text",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-text.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-tooltip-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-indicator-line",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-indicator-line.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-indicator-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-indicator-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-label-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-formatter",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-label-formatter.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-formatter",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-formatter.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-icons.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-advanced",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-advanced.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "utils",
+      "type": "registry:lib",
+      "dependencies": [
+        "clsx",
+        "tailwind-merge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/lib/utils.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
+    {
+      "name": "use-mobile",
+      "type": "registry:hook",
+      "files": [
+        {
+          "path": "registry/new-york-v4/hooks/use-mobile.ts",
+          "type": "registry:hook"
+        }
+      ]
+    },
+    {
+      "name": "theme-stone",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.147 0.004 49.25)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.147 0.004 49.25)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.147 0.004 49.25)",
+          "primary": "oklch(0.216 0.006 56.043)",
+          "primary-foreground": "oklch(0.985 0.001 106.423)",
+          "secondary": "oklch(0.97 0.001 106.424)",
+          "secondary-foreground": "oklch(0.216 0.006 56.043)",
+          "muted": "oklch(0.97 0.001 106.424)",
+          "muted-foreground": "oklch(0.553 0.013 58.071)",
+          "accent": "oklch(0.97 0.001 106.424)",
+          "accent-foreground": "oklch(0.216 0.006 56.043)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.923 0.003 48.717)",
+          "input": "oklch(0.923 0.003 48.717)",
+          "ring": "oklch(0.709 0.01 56.259)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0.001 106.423)",
+          "sidebar-foreground": "oklch(0.147 0.004 49.25)",
+          "sidebar-primary": "oklch(0.216 0.006 56.043)",
+          "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-accent": "oklch(0.97 0.001 106.424)",
+          "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)",
+          "sidebar-border": "oklch(0.923 0.003 48.717)",
+          "sidebar-ring": "oklch(0.709 0.01 56.259)"
+        },
+        "dark": {
+          "background": "oklch(0.147 0.004 49.25)",
+          "foreground": "oklch(0.985 0.001 106.423)",
+          "card": "oklch(0.216 0.006 56.043)",
+          "card-foreground": "oklch(0.985 0.001 106.423)",
+          "popover": "oklch(0.216 0.006 56.043)",
+          "popover-foreground": "oklch(0.985 0.001 106.423)",
+          "primary": "oklch(0.923 0.003 48.717)",
+          "primary-foreground": "oklch(0.216 0.006 56.043)",
+          "secondary": "oklch(0.268 0.007 34.298)",
+          "secondary-foreground": "oklch(0.985 0.001 106.423)",
+          "muted": "oklch(0.268 0.007 34.298)",
+          "muted-foreground": "oklch(0.709 0.01 56.259)",
+          "accent": "oklch(0.268 0.007 34.298)",
+          "accent-foreground": "oklch(0.985 0.001 106.423)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.553 0.013 58.071)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.216 0.006 56.043)",
+          "sidebar-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-accent": "oklch(0.268 0.007 34.298)",
+          "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.553 0.013 58.071)"
+        }
+      }
+    },
+    {
+      "name": "theme-zinc",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.141 0.005 285.823)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.141 0.005 285.823)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.141 0.005 285.823)",
+          "primary": "oklch(0.21 0.006 285.885)",
+          "primary-foreground": "oklch(0.985 0 0)",
+          "secondary": "oklch(0.967 0.001 286.375)",
+          "secondary-foreground": "oklch(0.21 0.006 285.885)",
+          "muted": "oklch(0.967 0.001 286.375)",
+          "muted-foreground": "oklch(0.552 0.016 285.938)",
+          "accent": "oklch(0.967 0.001 286.375)",
+          "accent-foreground": "oklch(0.21 0.006 285.885)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.92 0.004 286.32)",
+          "input": "oklch(0.92 0.004 286.32)",
+          "ring": "oklch(0.705 0.015 286.067)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0 0)",
+          "sidebar-foreground": "oklch(0.141 0.005 285.823)",
+          "sidebar-primary": "oklch(0.21 0.006 285.885)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.967 0.001 286.375)",
+          "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+          "sidebar-border": "oklch(0.92 0.004 286.32)",
+          "sidebar-ring": "oklch(0.705 0.015 286.067)"
+        },
+        "dark": {
+          "background": "oklch(0.141 0.005 285.823)",
+          "foreground": "oklch(0.985 0 0)",
+          "card": "oklch(0.21 0.006 285.885)",
+          "card-foreground": "oklch(0.985 0 0)",
+          "popover": "oklch(0.21 0.006 285.885)",
+          "popover-foreground": "oklch(0.985 0 0)",
+          "primary": "oklch(0.92 0.004 286.32)",
+          "primary-foreground": "oklch(0.21 0.006 285.885)",
+          "secondary": "oklch(0.274 0.006 286.033)",
+          "secondary-foreground": "oklch(0.985 0 0)",
+          "muted": "oklch(0.274 0.006 286.033)",
+          "muted-foreground": "oklch(0.705 0.015 286.067)",
+          "accent": "oklch(0.274 0.006 286.033)",
+          "accent-foreground": "oklch(0.985 0 0)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.552 0.016 285.938)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.21 0.006 285.885)",
+          "sidebar-foreground": "oklch(0.985 0 0)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.274 0.006 286.033)",
+          "sidebar-accent-foreground": "oklch(0.985 0 0)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.552 0.016 285.938)"
+        }
+      }
+    },
+    {
+      "name": "theme-neutral",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.145 0 0)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.145 0 0)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.145 0 0)",
+          "primary": "oklch(0.205 0 0)",
+          "primary-foreground": "oklch(0.985 0 0)",
+          "secondary": "oklch(0.97 0 0)",
+          "secondary-foreground": "oklch(0.205 0 0)",
+          "muted": "oklch(0.97 0 0)",
+          "muted-foreground": "oklch(0.556 0 0)",
+          "accent": "oklch(0.97 0 0)",
+          "accent-foreground": "oklch(0.205 0 0)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.922 0 0)",
+          "input": "oklch(0.922 0 0)",
+          "ring": "oklch(0.708 0 0)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0 0)",
+          "sidebar-foreground": "oklch(0.145 0 0)",
+          "sidebar-primary": "oklch(0.205 0 0)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.97 0 0)",
+          "sidebar-accent-foreground": "oklch(0.205 0 0)",
+          "sidebar-border": "oklch(0.922 0 0)",
+          "sidebar-ring": "oklch(0.708 0 0)"
+        },
+        "dark": {
+          "background": "oklch(0.145 0 0)",
+          "foreground": "oklch(0.985 0 0)",
+          "card": "oklch(0.205 0 0)",
+          "card-foreground": "oklch(0.985 0 0)",
+          "popover": "oklch(0.205 0 0)",
+          "popover-foreground": "oklch(0.985 0 0)",
+          "primary": "oklch(0.922 0 0)",
+          "primary-foreground": "oklch(0.205 0 0)",
+          "secondary": "oklch(0.269 0 0)",
+          "secondary-foreground": "oklch(0.985 0 0)",
+          "muted": "oklch(0.269 0 0)",
+          "muted-foreground": "oklch(0.708 0 0)",
+          "accent": "oklch(0.269 0 0)",
+          "accent-foreground": "oklch(0.985 0 0)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.556 0 0)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.205 0 0)",
+          "sidebar-foreground": "oklch(0.985 0 0)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.269 0 0)",
+          "sidebar-accent-foreground": "oklch(0.985 0 0)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.556 0 0)"
+        }
+      }
+    },
+    {
+      "name": "theme-gray",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.13 0.028 261.692)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.13 0.028 261.692)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.13 0.028 261.692)",
+          "primary": "oklch(0.21 0.034 264.665)",
+          "primary-foreground": "oklch(0.985 0.002 247.839)",
+          "secondary": "oklch(0.967 0.003 264.542)",
+          "secondary-foreground": "oklch(0.21 0.034 264.665)",
+          "muted": "oklch(0.967 0.003 264.542)",
+          "muted-foreground": "oklch(0.551 0.027 264.364)",
+          "accent": "oklch(0.967 0.003 264.542)",
+          "accent-foreground": "oklch(0.21 0.034 264.665)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.928 0.006 264.531)",
+          "input": "oklch(0.928 0.006 264.531)",
+          "ring": "oklch(0.707 0.022 261.325)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0.002 247.839)",
+          "sidebar-foreground": "oklch(0.13 0.028 261.692)",
+          "sidebar-primary": "oklch(0.21 0.034 264.665)",
+          "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-accent": "oklch(0.967 0.003 264.542)",
+          "sidebar-accent-foreground": "oklch(0.21 0.034 264.665)",
+          "sidebar-border": "oklch(0.928 0.006 264.531)",
+          "sidebar-ring": "oklch(0.707 0.022 261.325)"
+        },
+        "dark": {
+          "background": "oklch(0.13 0.028 261.692)",
+          "foreground": "oklch(0.985 0.002 247.839)",
+          "card": "oklch(0.21 0.034 264.665)",
+          "card-foreground": "oklch(0.985 0.002 247.839)",
+          "popover": "oklch(0.21 0.034 264.665)",
+          "popover-foreground": "oklch(0.985 0.002 247.839)",
+          "primary": "oklch(0.928 0.006 264.531)",
+          "primary-foreground": "oklch(0.21 0.034 264.665)",
+          "secondary": "oklch(0.278 0.033 256.848)",
+          "secondary-foreground": "oklch(0.985 0.002 247.839)",
+          "muted": "oklch(0.278 0.033 256.848)",
+          "muted-foreground": "oklch(0.707 0.022 261.325)",
+          "accent": "oklch(0.278 0.033 256.848)",
+          "accent-foreground": "oklch(0.985 0.002 247.839)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.551 0.027 264.364)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.21 0.034 264.665)",
+          "sidebar-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-accent": "oklch(0.278 0.033 256.848)",
+          "sidebar-accent-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.551 0.027 264.364)"
+        }
+      }
+    },
+    {
+      "name": "theme-slate",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.129 0.042 264.695)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.129 0.042 264.695)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.129 0.042 264.695)",
+          "primary": "oklch(0.208 0.042 265.755)",
+          "primary-foreground": "oklch(0.984 0.003 247.858)",
+          "secondary": "oklch(0.968 0.007 247.896)",
+          "secondary-foreground": "oklch(0.208 0.042 265.755)",
+          "muted": "oklch(0.968 0.007 247.896)",
+          "muted-foreground": "oklch(0.554 0.046 257.417)",
+          "accent": "oklch(0.968 0.007 247.896)",
+          "accent-foreground": "oklch(0.208 0.042 265.755)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.929 0.013 255.508)",
+          "input": "oklch(0.929 0.013 255.508)",
+          "ring": "oklch(0.704 0.04 256.788)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.984 0.003 247.858)",
+          "sidebar-foreground": "oklch(0.129 0.042 264.695)",
+          "sidebar-primary": "oklch(0.208 0.042 265.755)",
+          "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-accent": "oklch(0.968 0.007 247.896)",
+          "sidebar-accent-foreground": "oklch(0.208 0.042 265.755)",
+          "sidebar-border": "oklch(0.929 0.013 255.508)",
+          "sidebar-ring": "oklch(0.704 0.04 256.788)"
+        },
+        "dark": {
+          "background": "oklch(0.129 0.042 264.695)",
+          "foreground": "oklch(0.984 0.003 247.858)",
+          "card": "oklch(0.208 0.042 265.755)",
+          "card-foreground": "oklch(0.984 0.003 247.858)",
+          "popover": "oklch(0.208 0.042 265.755)",
+          "popover-foreground": "oklch(0.984 0.003 247.858)",
+          "primary": "oklch(0.929 0.013 255.508)",
+          "primary-foreground": "oklch(0.208 0.042 265.755)",
+          "secondary": "oklch(0.279 0.041 260.031)",
+          "secondary-foreground": "oklch(0.984 0.003 247.858)",
+          "muted": "oklch(0.279 0.041 260.031)",
+          "muted-foreground": "oklch(0.704 0.04 256.788)",
+          "accent": "oklch(0.279 0.041 260.031)",
+          "accent-foreground": "oklch(0.984 0.003 247.858)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.551 0.027 264.364)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.208 0.042 265.755)",
+          "sidebar-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-accent": "oklch(0.279 0.041 260.031)",
+          "sidebar-accent-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.551 0.027 264.364)"
+        }
+      }
+    },
+    {
+      "name": "accordion-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "accordion"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/accordion-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "alert-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/alert-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "alert-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/alert-destructive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert-dialog",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/alert-dialog-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "aspect-ratio"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/aspect-ratio-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "avatar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/avatar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-destructive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-secondary",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-secondary.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-separator",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-separator.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-dropdown",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-dropdown.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-ellipsis",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-ellipsis.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-link",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-link.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-responsive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-responsive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-secondary",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-secondary.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-destructive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-ghost",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-ghost.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-link",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-link.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-with-icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-with-icon.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-loading",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-loading.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-icon.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-as-child",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-as-child.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "calendar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/calendar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "calendar-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "calendar",
+        "form",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/calendar-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "card-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "card",
+        "button",
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/card-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "card-with-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/card-with-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-size",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-size.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-spacing",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-spacing.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-orientation",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-orientation.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-api",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-api.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-plugin",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-plugin.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-multiple",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-form-multiple.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-single",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-form-single.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "collapsible-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/collapsible-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-dropdown-menu",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "dropdown-menu",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-dropdown-menu.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-popover",
+      "type": "registry:example",
+      "registryDependencies": [
+        "combobox",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-popover.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-responsive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "combobox",
+        "popover",
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-responsive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "command-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/command-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "command-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/command-dialog.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "context-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "context-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/context-menu-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "data-table-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "data-table"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/data-table-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-demo",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-form",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "form",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-presets",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-with-presets.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-range",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-with-range.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dialog-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dialog-close-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dialog",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dialog-close-button.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "drawer-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/drawer-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "drawer-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "drawer",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/drawer-dialog.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-checkboxes",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-checkboxes.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-radio-group",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-radio-group.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "hover-card-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "hover-card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/hover-card-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-file",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-file.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-with-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-with-button.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-with-label",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-with-label.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-pattern",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-pattern.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-separator",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-separator.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-controlled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-controlled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "label-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/label-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "menubar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "menubar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/menubar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "navigation-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/navigation-menu-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "pagination-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "pagination"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/pagination-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "popover-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/popover-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "progress-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "progress"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/progress-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "radio-group-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/radio-group-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "radio-group-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "radio-group",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/radio-group-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo-with-handle",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-demo-with-handle.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-vertical",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-vertical.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-handle",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-handle.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/scroll-area-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-horizontal-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "select-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/select-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "select-scrollable",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/select-scrollable.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "select-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/select-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "separator-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/separator-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "sheet-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sheet"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/sheet-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "sheet-side",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sheet"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/sheet-side.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "skeleton-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/skeleton-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "skeleton-card",
+      "type": "registry:example",
+      "registryDependencies": [
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/skeleton-card.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "slider-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "slider"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/slider-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "sonner-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/sonner-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "switch-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/switch-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "switch-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "switch",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/switch-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "table-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "table"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/table-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "tabs-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/tabs-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-with-button.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-label",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-with-label.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-lg",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-lg.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-sm",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-sm.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-single",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-single.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-lg",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-lg.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-sm",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-sm.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "tooltip-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/tooltip-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-blockquote",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-blockquote.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h1",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h1.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h2",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h2.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h3",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h3.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h4",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h4.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-inline-code",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-inline-code.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-large",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-large.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-lead",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-lead.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-list",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-list.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-muted",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-muted.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-p",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-p.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-small",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-small.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-table",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-table.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "mode-toggle",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/mode-toggle.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-grid",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-grid.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-axis",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-axis.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-tooltip",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-tooltip.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-legend",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-legend.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-tooltip-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-tooltip-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "calendar-hijri",
+      "type": "registry:example",
+      "description": "A Persian calendar.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/calendar-hijri.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "sidebar-demo",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-demo.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-header",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-header.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-footer",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-footer.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-group.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-group-collapsible.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-group-action.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-action.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-sub",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-sub.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-collapsible.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-badge",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-badge.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-rsc",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-rsc.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-controlled",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-controlled.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/v4/registry/__blocks__.json b/apps/v4/registry/__blocks__.json
new file mode 100644
index 00000000000..01ed55d0fd5
--- /dev/null
+++ b/apps/v4/registry/__blocks__.json
@@ -0,0 +1,272 @@
+[
+  {
+    "name": "dashboard-01",
+    "description": "A dashboard with sidebar, charts and data table.",
+    "categories": ["dashboard"]
+  },
+  {
+    "name": "sidebar-01",
+    "description": "A simple sidebar with navigation grouped by section.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-02",
+    "description": "A sidebar with collapsible sections.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-03",
+    "description": "A sidebar with submenus.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-04",
+    "description": "A floating sidebar with submenus.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-05",
+    "description": "A sidebar with collapsible submenus.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-06",
+    "description": "A sidebar with submenus as dropdowns.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-07",
+    "description": "A sidebar that collapses to icons.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-08",
+    "description": "An inset sidebar with secondary navigation.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-09",
+    "description": "Collapsible nested sidebars.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-10",
+    "description": "A sidebar in a popover.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-11",
+    "description": "A sidebar with a collapsible file tree.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-12",
+    "description": "A sidebar with a calendar.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-13",
+    "description": "A sidebar in a dialog.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-14",
+    "description": "A sidebar on the right.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-15",
+    "description": "A left and right sidebar.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "sidebar-16",
+    "description": "A sidebar with a sticky site header.",
+    "categories": ["sidebar", "dashboard"]
+  },
+  {
+    "name": "login-01",
+    "description": "A simple login form.",
+    "categories": ["authentication", "login"]
+  },
+  {
+    "name": "login-02",
+    "description": "A two column login page with a cover image.",
+    "categories": ["authentication", "login"]
+  },
+  {
+    "name": "login-03",
+    "description": "A login page with a muted background color.",
+    "categories": ["authentication", "login"]
+  },
+  {
+    "name": "login-04",
+    "description": "A login page with form and image.",
+    "categories": ["authentication", "login"]
+  },
+  {
+    "name": "login-05",
+    "description": "A simple email-only login page.",
+    "categories": ["authentication", "login"]
+  },
+  {
+    "name": "calendar-01",
+    "description": "A simple calendar.",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-02",
+    "description": "Multiple months with single selection.",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-03",
+    "description": "Multiple months with multiple selection.",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-04",
+    "description": "Single month with range selection",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-05",
+    "description": "Multiple months with range selection",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-06",
+    "description": "Range selection with minimum days",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-07",
+    "description": "Range selection with minimum and maximum days",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-08",
+    "description": "Calendar with disabled days",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-09",
+    "description": "Calendar with disabled weekends",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-10",
+    "description": "Today button",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-11",
+    "description": "Start and end of month",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-12",
+    "description": "Localized calendar",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-13",
+    "description": "With Month and Year Dropdown",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-14",
+    "description": "With Booked/Unavailable Days",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-15",
+    "description": "With Week Numbers",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-16",
+    "description": "With time picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-17",
+    "description": "With time picker inline",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-18",
+    "description": "Variable size",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-19",
+    "description": "With presets",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-20",
+    "description": "With time presets",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-21",
+    "description": "Custom days and formatters",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-22",
+    "description": "Date picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-23",
+    "description": "Date range picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-24",
+    "description": "Date and Time picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-25",
+    "description": "Date and Time range picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-26",
+    "description": "Date range picker with time",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-27",
+    "description": "Chart filter",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-28",
+    "description": "Input with date picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-29",
+    "description": "Natural language date picker",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-30",
+    "description": "With little-date",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-31",
+    "description": "With event slots",
+    "categories": ["calendar", "date"]
+  },
+  {
+    "name": "calendar-32",
+    "description": "Date picker in a drawer",
+    "categories": ["calendar", "date"]
+  }
+]
diff --git a/apps/v4/registry/__index__.tsx b/apps/v4/registry/__index__.tsx
new file mode 100644
index 00000000000..279e022cf41
--- /dev/null
+++ b/apps/v4/registry/__index__.tsx
@@ -0,0 +1,6235 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import * as React from "react"
+
+export const Index: Record<string, any> = {
+  "index": {
+    name: "index",
+    description: "",
+    type: "registry:style",
+    registryDependencies: ["utils"],
+    files: [],
+    component: null,
+    categories: undefined,
+    meta: undefined,
+  },
+  "style": {
+    name: "style",
+    description: "",
+    type: "registry:style",
+    registryDependencies: ["utils"],
+    files: [],
+    component: null,
+    categories: undefined,
+    meta: undefined,
+  },
+  "accordion": {
+    name: "accordion",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/accordion.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/accordion.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "alert": {
+    name: "alert",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/alert.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/alert.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "alert-dialog": {
+    name: "alert-dialog",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/ui/alert-dialog.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/alert-dialog.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "aspect-ratio": {
+    name: "aspect-ratio",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/aspect-ratio.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/aspect-ratio.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "avatar": {
+    name: "avatar",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/avatar.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/avatar.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "badge": {
+    name: "badge",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/badge.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/badge.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "breadcrumb": {
+    name: "breadcrumb",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/breadcrumb.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/breadcrumb.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "button": {
+    name: "button",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/button.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/button.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "calendar": {
+    name: "calendar",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/ui/calendar.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/calendar.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "card": {
+    name: "card",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/card.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/card.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel": {
+    name: "carousel",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/ui/carousel.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/carousel.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "chart": {
+    name: "chart",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: ["card"],
+    files: [{
+      path: "registry/new-york-v4/ui/chart.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/chart.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "checkbox": {
+    name: "checkbox",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/checkbox.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/checkbox.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "collapsible": {
+    name: "collapsible",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/collapsible.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/collapsible.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "command": {
+    name: "command",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: ["dialog"],
+    files: [{
+      path: "registry/new-york-v4/ui/command.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/command.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "context-menu": {
+    name: "context-menu",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/context-menu.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/context-menu.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "dialog": {
+    name: "dialog",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/dialog.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/dialog.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "drawer": {
+    name: "drawer",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/drawer.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/drawer.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "dropdown-menu": {
+    name: "dropdown-menu",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/dropdown-menu.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/dropdown-menu.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "form": {
+    name: "form",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: ["button","label"],
+    files: [{
+      path: "registry/new-york-v4/ui/form.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/form.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "hover-card": {
+    name: "hover-card",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/hover-card.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/hover-card.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input": {
+    name: "input",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/input.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/input.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-otp": {
+    name: "input-otp",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/input-otp.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/input-otp.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "label": {
+    name: "label",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/label.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/label.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "menubar": {
+    name: "menubar",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/menubar.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/menubar.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "navigation-menu": {
+    name: "navigation-menu",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/navigation-menu.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/navigation-menu.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "pagination": {
+    name: "pagination",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/ui/pagination.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/pagination.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "popover": {
+    name: "popover",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/popover.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/popover.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "progress": {
+    name: "progress",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/progress.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/progress.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "radio-group": {
+    name: "radio-group",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/radio-group.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/radio-group.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "resizable": {
+    name: "resizable",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/resizable.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/resizable.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "scroll-area": {
+    name: "scroll-area",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/scroll-area.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/scroll-area.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "select": {
+    name: "select",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/select.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/select.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "separator": {
+    name: "separator",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/separator.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/separator.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sheet": {
+    name: "sheet",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/sheet.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/sheet.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar": {
+    name: "sidebar",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: ["button","separator","sheet","tooltip","input","use-mobile","skeleton"],
+    files: [{
+      path: "registry/new-york-v4/ui/sidebar.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/sidebar.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "skeleton": {
+    name: "skeleton",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/skeleton.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/skeleton.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "slider": {
+    name: "slider",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/slider.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/slider.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sonner": {
+    name: "sonner",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/sonner.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/sonner.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "switch": {
+    name: "switch",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/switch.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/switch.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "table": {
+    name: "table",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/table.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/table.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "tabs": {
+    name: "tabs",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/tabs.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/tabs.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "textarea": {
+    name: "textarea",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/textarea.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/textarea.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle": {
+    name: "toggle",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/toggle.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/toggle.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-group": {
+    name: "toggle-group",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: ["toggle"],
+    files: [{
+      path: "registry/new-york-v4/ui/toggle-group.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/toggle-group.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "tooltip": {
+    name: "tooltip",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/ui/tooltip.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/ui/tooltip.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "dashboard-01": {
+    name: "dashboard-01",
+    description: "A dashboard with sidebar, charts and data table.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","label","chart","card","select","tabs","table","toggle-group","badge","button","checkbox","dropdown-menu","drawer","input","avatar","sheet","sonner"],
+    files: [{
+      path: "registry/new-york-v4/blocks/dashboard-01/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/dashboard-01/data.json",
+      type: "registry:file",
+      target: "app/dashboard/data.json"
+    },{
+      path: "registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/dashboard-01/components/nav-secondary.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/dashboard-01/components/site-header.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/dashboard-01/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["dashboard"],
+    meta: {"iframeHeight":"1000px"},
+  },
+  "sidebar-01": {
+    name: "sidebar-01",
+    description: "A simple sidebar with navigation grouped by section.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-01/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-01/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-01/components/search-form.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-01/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-02": {
+    name: "sidebar-02",
+    description: "A sidebar with collapsible sections.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-02/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-02/components/search-form.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-02/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-03": {
+    name: "sidebar-03",
+    description: "A sidebar with submenus.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-03/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-03/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-04": {
+    name: "sidebar-04",
+    description: "A floating sidebar with submenus.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-04/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-04/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-05": {
+    name: "sidebar-05",
+    description: "A sidebar with collapsible submenus.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-05/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-05/components/search-form.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-05/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-06": {
+    name: "sidebar-06",
+    description: "A sidebar with submenus as dropdowns.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","card","dropdown-menu"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-06/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-06/components/nav-main.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-06/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-07": {
+    name: "sidebar-07",
+    description: "A sidebar that collapses to icons.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-07/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-07/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-07/components/nav-main.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-07/components/nav-projects.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-07/components/nav-user.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-07/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-08": {
+    name: "sidebar-08",
+    description: "An inset sidebar with secondary navigation.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-08/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-08/components/nav-main.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-08/components/nav-projects.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-08/components/nav-secondary.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-08/components/nav-user.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-08/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-09": {
+    name: "sidebar-09",
+    description: "Collapsible nested sidebars.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-09/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-09/components/nav-user.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-09/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-10": {
+    name: "sidebar-10",
+    description: "A sidebar in a popover.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-10/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-10/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-10/components/nav-favorites.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-10/components/nav-main.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-10/components/nav-secondary.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-10/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-11": {
+    name: "sidebar-11",
+    description: "A sidebar with a collapsible file tree.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","collapsible"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-11/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-11/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-11/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-12": {
+    name: "sidebar-12",
+    description: "A sidebar with a calendar.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","collapsible","calendar","dropdown-menu","avatar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-12/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-12/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-13": {
+    name: "sidebar-13",
+    description: "A sidebar in a dialog.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","button","dialog"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-13/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-13/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-14": {
+    name: "sidebar-14",
+    description: "A sidebar on the right.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-14/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-14/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-14/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-15": {
+    name: "sidebar-15",
+    description: "A left and right sidebar.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu","calendar","avatar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-15/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-15/components/nav-favorites.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-15/components/nav-main.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-15/components/nav-secondary.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-15/components/sidebar-left.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-15/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "sidebar-16": {
+    name: "sidebar-16",
+    description: "A sidebar with a sticky site header.",
+    type: "registry:block",
+    registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","button","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/sidebar-16/page.tsx",
+      type: "registry:page",
+      target: "app/dashboard/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-16/components/nav-main.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-16/components/nav-projects.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-16/components/nav-secondary.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-16/components/search-form.tsx",
+      type: "registry:component",
+      target: ""
+    },{
+      path: "registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/sidebar-16/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["sidebar","dashboard"],
+    meta: undefined,
+  },
+  "login-01": {
+    name: "login-01",
+    description: "A simple login form.",
+    type: "registry:block",
+    registryDependencies: ["button","card","input","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/login-01/page.tsx",
+      type: "registry:page",
+      target: "app/login/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/login-01/components/login-form.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/login-01/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["authentication","login"],
+    meta: undefined,
+  },
+  "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-v4/blocks/login-02/page.tsx",
+      type: "registry:page",
+      target: "app/login/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/login-02/components/login-form.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/login-02/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["authentication","login"],
+    meta: undefined,
+  },
+  "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-v4/blocks/login-03/page.tsx",
+      type: "registry:page",
+      target: "app/login/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/login-03/components/login-form.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/login-03/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["authentication","login"],
+    meta: undefined,
+  },
+  "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-v4/blocks/login-04/page.tsx",
+      type: "registry:page",
+      target: "app/login/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/login-04/components/login-form.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/login-04/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["authentication","login"],
+    meta: undefined,
+  },
+  "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-v4/blocks/login-05/page.tsx",
+      type: "registry:page",
+      target: "app/login/page.tsx"
+    },{
+      path: "registry/new-york-v4/blocks/login-05/components/login-form.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/login-05/page.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["authentication","login"],
+    meta: undefined,
+  },
+  "calendar-01": {
+    name: "calendar-01",
+    description: "A simple calendar.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-01.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-01.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-02": {
+    name: "calendar-02",
+    description: "Multiple months with single selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-02.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-02.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-03": {
+    name: "calendar-03",
+    description: "Multiple months with multiple selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-03.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-03.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-04": {
+    name: "calendar-04",
+    description: "Single month with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-04.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-04.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28","mobile":"component"},
+  },
+  "calendar-05": {
+    name: "calendar-05",
+    description: "Multiple months with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-05.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-05.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-06": {
+    name: "calendar-06",
+    description: "Range selection with minimum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-06.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-06.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-07": {
+    name: "calendar-07",
+    description: "Range selection with minimum and maximum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-07.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-07.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-08": {
+    name: "calendar-08",
+    description: "Calendar with disabled days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-08.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-08.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-09": {
+    name: "calendar-09",
+    description: "Calendar with disabled weekends",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-09.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-09.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-10": {
+    name: "calendar-10",
+    description: "Today button",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-10.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-10.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-11": {
+    name: "calendar-11",
+    description: "Start and end of month",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-11.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-11.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-12": {
+    name: "calendar-12",
+    description: "Localized calendar",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","select"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-12.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-12.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-13": {
+    name: "calendar-13",
+    description: "With Month and Year Dropdown",
+    type: "registry:block",
+    registryDependencies: ["calendar","label","select"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-13.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-13.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-14": {
+    name: "calendar-14",
+    description: "With Booked/Unavailable Days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-14.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-14.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-15": {
+    name: "calendar-15",
+    description: "With Week Numbers",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-15.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-15.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-16": {
+    name: "calendar-16",
+    description: "With time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","input","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-16.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-16.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-17": {
+    name: "calendar-17",
+    description: "With time picker inline",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","input","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-17.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-17.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-18": {
+    name: "calendar-18",
+    description: "Variable size",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-18.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-18.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-19": {
+    name: "calendar-19",
+    description: "With presets",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","input","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-19.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-19.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-20": {
+    name: "calendar-20",
+    description: "With time presets",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-20.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-20.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-21": {
+    name: "calendar-21",
+    description: "Custom days and formatters",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-21.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-21.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-22": {
+    name: "calendar-22",
+    description: "Date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","popover","button","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-22.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-22.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-23": {
+    name: "calendar-23",
+    description: "Date range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","popover","button","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-23.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-23.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-24": {
+    name: "calendar-24",
+    description: "Date and Time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","popover","button","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-24.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-24.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-25": {
+    name: "calendar-25",
+    description: "Date and Time range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","popover","button","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-25.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-25.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-26": {
+    name: "calendar-26",
+    description: "Date range picker with time",
+    type: "registry:block",
+    registryDependencies: ["calendar","popover","button","input","label"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-26.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-26.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-27": {
+    name: "calendar-27",
+    description: "Chart filter",
+    type: "registry:block",
+    registryDependencies: ["calendar","chart","card","popover","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-27.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-27.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-28": {
+    name: "calendar-28",
+    description: "Input with date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","input","label","popover","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-28.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-28.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-29": {
+    name: "calendar-29",
+    description: "Natural language date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar","input","label","popover","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-29.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-29.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-30": {
+    name: "calendar-30",
+    description: "With little-date",
+    type: "registry:block",
+    registryDependencies: ["calendar","input","label","popover","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-30.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-30.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "calendar-31": {
+    name: "calendar-31",
+    description: "With event slots",
+    type: "registry:block",
+    registryDependencies: ["calendar","card","button"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-31.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-31.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"700px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0","mobile":"component"},
+  },
+  "calendar-32": {
+    name: "calendar-32",
+    description: "Date picker in a drawer",
+    type: "registry:block",
+    registryDependencies: ["calendar","button","drawer"],
+    files: [{
+      path: "registry/new-york-v4/blocks/calendar-32.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/blocks/calendar-32.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+  },
+  "chart-area-axes": {
+    name: "chart-area-axes",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-area-axes.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-area-axes.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-area"],
+    meta: undefined,
+  },
+  "chart-area-default": {
+    name: "chart-area-default",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-area-default.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-area-default.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-area"],
+    meta: undefined,
+  },
+  "chart-area-gradient": {
+    name: "chart-area-gradient",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-area-gradient.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-area-gradient.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-area"],
+    meta: undefined,
+  },
+  "chart-area-icons": {
+    name: "chart-area-icons",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-area-icons.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-area-icons.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-area"],
+    meta: undefined,
+  },
+  "chart-area-interactive": {
+    name: "chart-area-interactive",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart","select"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-area-interactive.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-area-interactive.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-area"],
+    meta: undefined,
+  },
+  "chart-area-legend": {
+    name: "chart-area-legend",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-area-legend.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-area-legend.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-area"],
+    meta: undefined,
+  },
+  "chart-area-linear": {
+    name: "chart-area-linear",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-area-linear.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-area-linear.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-area"],
+    meta: undefined,
+  },
+  "chart-area-stacked-expand": {
+    name: "chart-area-stacked-expand",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-area-stacked-expand.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-area-stacked-expand.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-area"],
+    meta: undefined,
+  },
+  "chart-area-stacked": {
+    name: "chart-area-stacked",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-area-stacked.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-area-stacked.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-area"],
+    meta: undefined,
+  },
+  "chart-area-step": {
+    name: "chart-area-step",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-area-step.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-area-step.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-area"],
+    meta: undefined,
+  },
+  "chart-bar-active": {
+    name: "chart-bar-active",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-bar-active.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-bar-active.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-bar"],
+    meta: undefined,
+  },
+  "chart-bar-default": {
+    name: "chart-bar-default",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-bar-default.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-bar-default.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-bar"],
+    meta: undefined,
+  },
+  "chart-bar-horizontal": {
+    name: "chart-bar-horizontal",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-bar-horizontal.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-bar-horizontal.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-bar"],
+    meta: undefined,
+  },
+  "chart-bar-interactive": {
+    name: "chart-bar-interactive",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-bar-interactive.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-bar-interactive.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-bar"],
+    meta: undefined,
+  },
+  "chart-bar-label-custom": {
+    name: "chart-bar-label-custom",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-bar-label-custom.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-bar-label-custom.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-bar"],
+    meta: undefined,
+  },
+  "chart-bar-label": {
+    name: "chart-bar-label",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-bar-label.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-bar-label.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-bar"],
+    meta: undefined,
+  },
+  "chart-bar-mixed": {
+    name: "chart-bar-mixed",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-bar-mixed.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-bar-mixed.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-bar"],
+    meta: undefined,
+  },
+  "chart-bar-multiple": {
+    name: "chart-bar-multiple",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-bar-multiple.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-bar-multiple.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-bar"],
+    meta: undefined,
+  },
+  "chart-bar-negative": {
+    name: "chart-bar-negative",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-bar-negative.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-bar-negative.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-bar"],
+    meta: undefined,
+  },
+  "chart-bar-stacked": {
+    name: "chart-bar-stacked",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-bar-stacked.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-bar-stacked.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-bar"],
+    meta: undefined,
+  },
+  "chart-line-default": {
+    name: "chart-line-default",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-line-default.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-line-default.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-line"],
+    meta: undefined,
+  },
+  "chart-line-dots-colors": {
+    name: "chart-line-dots-colors",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-line-dots-colors.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-line-dots-colors.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-line"],
+    meta: undefined,
+  },
+  "chart-line-dots-custom": {
+    name: "chart-line-dots-custom",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-line-dots-custom.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-line-dots-custom.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-line"],
+    meta: undefined,
+  },
+  "chart-line-dots": {
+    name: "chart-line-dots",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-line-dots.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-line-dots.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-line"],
+    meta: undefined,
+  },
+  "chart-line-interactive": {
+    name: "chart-line-interactive",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-line-interactive.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-line-interactive.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-line"],
+    meta: undefined,
+  },
+  "chart-line-label-custom": {
+    name: "chart-line-label-custom",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-line-label-custom.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-line-label-custom.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-line"],
+    meta: undefined,
+  },
+  "chart-line-label": {
+    name: "chart-line-label",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-line-label.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-line-label.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-line"],
+    meta: undefined,
+  },
+  "chart-line-linear": {
+    name: "chart-line-linear",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-line-linear.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-line-linear.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-line"],
+    meta: undefined,
+  },
+  "chart-line-multiple": {
+    name: "chart-line-multiple",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-line-multiple.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-line-multiple.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-line"],
+    meta: undefined,
+  },
+  "chart-line-step": {
+    name: "chart-line-step",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-line-step.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-line-step.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-line"],
+    meta: undefined,
+  },
+  "chart-pie-donut-active": {
+    name: "chart-pie-donut-active",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-pie-donut-active.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-pie-donut-active.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-pie"],
+    meta: undefined,
+  },
+  "chart-pie-donut-text": {
+    name: "chart-pie-donut-text",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-pie-donut-text.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-pie-donut-text.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-pie"],
+    meta: undefined,
+  },
+  "chart-pie-donut": {
+    name: "chart-pie-donut",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-pie-donut.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-pie-donut.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-pie"],
+    meta: undefined,
+  },
+  "chart-pie-interactive": {
+    name: "chart-pie-interactive",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-pie-interactive.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-pie-interactive.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-pie"],
+    meta: undefined,
+  },
+  "chart-pie-label-custom": {
+    name: "chart-pie-label-custom",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-pie-label-custom.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-pie-label-custom.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-pie"],
+    meta: undefined,
+  },
+  "chart-pie-label-list": {
+    name: "chart-pie-label-list",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-pie-label-list.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-pie-label-list.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-pie"],
+    meta: undefined,
+  },
+  "chart-pie-label": {
+    name: "chart-pie-label",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-pie-label.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-pie-label.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-pie"],
+    meta: undefined,
+  },
+  "chart-pie-legend": {
+    name: "chart-pie-legend",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-pie-legend.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-pie-legend.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-pie"],
+    meta: undefined,
+  },
+  "chart-pie-separator-none": {
+    name: "chart-pie-separator-none",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-pie-separator-none.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-pie-separator-none.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-pie"],
+    meta: undefined,
+  },
+  "chart-pie-simple": {
+    name: "chart-pie-simple",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-pie-simple.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-pie-simple.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-pie"],
+    meta: undefined,
+  },
+  "chart-pie-stacked": {
+    name: "chart-pie-stacked",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-pie-stacked.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-pie-stacked.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-pie"],
+    meta: undefined,
+  },
+  "chart-radar-default": {
+    name: "chart-radar-default",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-default.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-default.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-dots": {
+    name: "chart-radar-dots",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-dots.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-dots.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-grid-circle-fill": {
+    name: "chart-radar-grid-circle-fill",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-grid-circle-no-lines": {
+    name: "chart-radar-grid-circle-no-lines",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-grid-circle": {
+    name: "chart-radar-grid-circle",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-grid-circle.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-grid-circle.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-grid-custom": {
+    name: "chart-radar-grid-custom",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-grid-custom.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-grid-custom.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-grid-fill": {
+    name: "chart-radar-grid-fill",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-grid-fill.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-grid-fill.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-grid-none": {
+    name: "chart-radar-grid-none",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-grid-none.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-grid-none.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-icons": {
+    name: "chart-radar-icons",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-icons.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-icons.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-label-custom": {
+    name: "chart-radar-label-custom",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-label-custom.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-label-custom.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-legend": {
+    name: "chart-radar-legend",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-legend.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-legend.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-lines-only": {
+    name: "chart-radar-lines-only",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-lines-only.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-lines-only.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-multiple": {
+    name: "chart-radar-multiple",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-multiple.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-multiple.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radar-radius": {
+    name: "chart-radar-radius",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radar-radius.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radar-radius.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radar"],
+    meta: undefined,
+  },
+  "chart-radial-grid": {
+    name: "chart-radial-grid",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radial-grid.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radial-grid.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radial"],
+    meta: undefined,
+  },
+  "chart-radial-label": {
+    name: "chart-radial-label",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radial-label.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radial-label.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radial"],
+    meta: undefined,
+  },
+  "chart-radial-shape": {
+    name: "chart-radial-shape",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radial-shape.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radial-shape.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radial"],
+    meta: undefined,
+  },
+  "chart-radial-simple": {
+    name: "chart-radial-simple",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radial-simple.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radial-simple.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radial"],
+    meta: undefined,
+  },
+  "chart-radial-stacked": {
+    name: "chart-radial-stacked",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radial-stacked.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radial-stacked.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radial"],
+    meta: undefined,
+  },
+  "chart-radial-text": {
+    name: "chart-radial-text",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-radial-text.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-radial-text.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-radial"],
+    meta: undefined,
+  },
+  "chart-tooltip-default": {
+    name: "chart-tooltip-default",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-tooltip-default.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-tooltip-default.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-tooltip"],
+    meta: undefined,
+  },
+  "chart-tooltip-indicator-line": {
+    name: "chart-tooltip-indicator-line",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-tooltip-indicator-line.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-tooltip-indicator-line.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-tooltip"],
+    meta: undefined,
+  },
+  "chart-tooltip-indicator-none": {
+    name: "chart-tooltip-indicator-none",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-tooltip-indicator-none.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-tooltip-indicator-none.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-tooltip"],
+    meta: undefined,
+  },
+  "chart-tooltip-label-none": {
+    name: "chart-tooltip-label-none",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-tooltip-label-none.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-tooltip-label-none.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-tooltip"],
+    meta: undefined,
+  },
+  "chart-tooltip-label-custom": {
+    name: "chart-tooltip-label-custom",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-tooltip-label-custom.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-tooltip-label-custom.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-tooltip"],
+    meta: undefined,
+  },
+  "chart-tooltip-label-formatter": {
+    name: "chart-tooltip-label-formatter",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-tooltip-label-formatter.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-tooltip-label-formatter.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-tooltip"],
+    meta: undefined,
+  },
+  "chart-tooltip-formatter": {
+    name: "chart-tooltip-formatter",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-tooltip-formatter.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-tooltip-formatter.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-tooltip"],
+    meta: undefined,
+  },
+  "chart-tooltip-icons": {
+    name: "chart-tooltip-icons",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-tooltip-icons.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-tooltip-icons.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-tooltip"],
+    meta: undefined,
+  },
+  "chart-tooltip-advanced": {
+    name: "chart-tooltip-advanced",
+    description: "",
+    type: "registry:block",
+    registryDependencies: ["card","chart"],
+    files: [{
+      path: "registry/new-york-v4/charts/chart-tooltip-advanced.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/charts/chart-tooltip-advanced.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["charts","charts-tooltip"],
+    meta: undefined,
+  },
+  "utils": {
+    name: "utils",
+    description: "",
+    type: "registry:lib",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/lib/utils.ts",
+      type: "registry:lib",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/lib/utils.ts")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "use-mobile": {
+    name: "use-mobile",
+    description: "",
+    type: "registry:hook",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/hooks/use-mobile.ts",
+      type: "registry:hook",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/hooks/use-mobile.ts")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "accordion-demo": {
+    name: "accordion-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["accordion"],
+    files: [{
+      path: "registry/new-york-v4/examples/accordion-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/accordion-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "alert-demo": {
+    name: "alert-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["alert"],
+    files: [{
+      path: "registry/new-york-v4/examples/alert-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/alert-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "alert-destructive": {
+    name: "alert-destructive",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["alert"],
+    files: [{
+      path: "registry/new-york-v4/examples/alert-destructive.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/alert-destructive.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "alert-dialog-demo": {
+    name: "alert-dialog-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["alert-dialog","button"],
+    files: [{
+      path: "registry/new-york-v4/examples/alert-dialog-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/alert-dialog-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "aspect-ratio-demo": {
+    name: "aspect-ratio-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["aspect-ratio"],
+    files: [{
+      path: "registry/new-york-v4/examples/aspect-ratio-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/aspect-ratio-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "avatar-demo": {
+    name: "avatar-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["avatar"],
+    files: [{
+      path: "registry/new-york-v4/examples/avatar-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/avatar-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "badge-demo": {
+    name: "badge-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["badge"],
+    files: [{
+      path: "registry/new-york-v4/examples/badge-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/badge-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "badge-destructive": {
+    name: "badge-destructive",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["badge"],
+    files: [{
+      path: "registry/new-york-v4/examples/badge-destructive.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/badge-destructive.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "badge-outline": {
+    name: "badge-outline",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["badge"],
+    files: [{
+      path: "registry/new-york-v4/examples/badge-outline.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/badge-outline.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "badge-secondary": {
+    name: "badge-secondary",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["badge"],
+    files: [{
+      path: "registry/new-york-v4/examples/badge-secondary.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/badge-secondary.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "breadcrumb-demo": {
+    name: "breadcrumb-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [{
+      path: "registry/new-york-v4/examples/breadcrumb-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/breadcrumb-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "breadcrumb-separator": {
+    name: "breadcrumb-separator",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [{
+      path: "registry/new-york-v4/examples/breadcrumb-separator.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/breadcrumb-separator.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "breadcrumb-dropdown": {
+    name: "breadcrumb-dropdown",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [{
+      path: "registry/new-york-v4/examples/breadcrumb-dropdown.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/breadcrumb-dropdown.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "breadcrumb-ellipsis": {
+    name: "breadcrumb-ellipsis",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [{
+      path: "registry/new-york-v4/examples/breadcrumb-ellipsis.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/breadcrumb-ellipsis.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "breadcrumb-link": {
+    name: "breadcrumb-link",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [{
+      path: "registry/new-york-v4/examples/breadcrumb-link.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/breadcrumb-link.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "breadcrumb-responsive": {
+    name: "breadcrumb-responsive",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [{
+      path: "registry/new-york-v4/examples/breadcrumb-responsive.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/breadcrumb-responsive.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-demo": {
+    name: "button-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/examples/button-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/button-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-secondary": {
+    name: "button-secondary",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/examples/button-secondary.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/button-secondary.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-destructive": {
+    name: "button-destructive",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/examples/button-destructive.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/button-destructive.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-outline": {
+    name: "button-outline",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/examples/button-outline.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/button-outline.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-ghost": {
+    name: "button-ghost",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/examples/button-ghost.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/button-ghost.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-link": {
+    name: "button-link",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/examples/button-link.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/button-link.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-with-icon": {
+    name: "button-with-icon",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/examples/button-with-icon.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/button-with-icon.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-loading": {
+    name: "button-loading",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/examples/button-loading.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/button-loading.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-icon": {
+    name: "button-icon",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/examples/button-icon.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/button-icon.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-as-child": {
+    name: "button-as-child",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [{
+      path: "registry/new-york-v4/examples/button-as-child.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/button-as-child.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "calendar-demo": {
+    name: "calendar-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/examples/calendar-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/calendar-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "calendar-form": {
+    name: "calendar-form",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["calendar","form","popover"],
+    files: [{
+      path: "registry/new-york-v4/examples/calendar-form.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/calendar-form.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "card-demo": {
+    name: "card-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["card","button","switch"],
+    files: [{
+      path: "registry/new-york-v4/examples/card-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/card-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "card-with-form": {
+    name: "card-with-form",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","card","input","label","select"],
+    files: [{
+      path: "registry/new-york-v4/examples/card-with-form.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/card-with-form.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel-demo": {
+    name: "carousel-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [{
+      path: "registry/new-york-v4/examples/carousel-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/carousel-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel-size": {
+    name: "carousel-size",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [{
+      path: "registry/new-york-v4/examples/carousel-size.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/carousel-size.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel-spacing": {
+    name: "carousel-spacing",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [{
+      path: "registry/new-york-v4/examples/carousel-spacing.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/carousel-spacing.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel-orientation": {
+    name: "carousel-orientation",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [{
+      path: "registry/new-york-v4/examples/carousel-orientation.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/carousel-orientation.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel-api": {
+    name: "carousel-api",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [{
+      path: "registry/new-york-v4/examples/carousel-api.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/carousel-api.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel-plugin": {
+    name: "carousel-plugin",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [{
+      path: "registry/new-york-v4/examples/carousel-plugin.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/carousel-plugin.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "checkbox-demo": {
+    name: "checkbox-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["checkbox"],
+    files: [{
+      path: "registry/new-york-v4/examples/checkbox-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/checkbox-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "checkbox-disabled": {
+    name: "checkbox-disabled",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["checkbox"],
+    files: [{
+      path: "registry/new-york-v4/examples/checkbox-disabled.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/checkbox-disabled.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "checkbox-form-multiple": {
+    name: "checkbox-form-multiple",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["checkbox","form"],
+    files: [{
+      path: "registry/new-york-v4/examples/checkbox-form-multiple.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/checkbox-form-multiple.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "checkbox-form-single": {
+    name: "checkbox-form-single",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["checkbox","form"],
+    files: [{
+      path: "registry/new-york-v4/examples/checkbox-form-single.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/checkbox-form-single.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "checkbox-with-text": {
+    name: "checkbox-with-text",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["checkbox"],
+    files: [{
+      path: "registry/new-york-v4/examples/checkbox-with-text.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/checkbox-with-text.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "collapsible-demo": {
+    name: "collapsible-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["collapsible"],
+    files: [{
+      path: "registry/new-york-v4/examples/collapsible-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/collapsible-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "combobox-demo": {
+    name: "combobox-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["command"],
+    files: [{
+      path: "registry/new-york-v4/examples/combobox-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/combobox-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "combobox-dropdown-menu": {
+    name: "combobox-dropdown-menu",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["command","dropdown-menu","button"],
+    files: [{
+      path: "registry/new-york-v4/examples/combobox-dropdown-menu.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/combobox-dropdown-menu.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "combobox-form": {
+    name: "combobox-form",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["command","form"],
+    files: [{
+      path: "registry/new-york-v4/examples/combobox-form.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/combobox-form.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "combobox-popover": {
+    name: "combobox-popover",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["combobox","popover"],
+    files: [{
+      path: "registry/new-york-v4/examples/combobox-popover.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/combobox-popover.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "combobox-responsive": {
+    name: "combobox-responsive",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["combobox","popover","drawer"],
+    files: [{
+      path: "registry/new-york-v4/examples/combobox-responsive.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/combobox-responsive.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "command-demo": {
+    name: "command-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["command"],
+    files: [{
+      path: "registry/new-york-v4/examples/command-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/command-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "command-dialog": {
+    name: "command-dialog",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["command","dialog"],
+    files: [{
+      path: "registry/new-york-v4/examples/command-dialog.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/command-dialog.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "context-menu-demo": {
+    name: "context-menu-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["context-menu"],
+    files: [{
+      path: "registry/new-york-v4/examples/context-menu-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/context-menu-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "data-table-demo": {
+    name: "data-table-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["data-table"],
+    files: [{
+      path: "registry/new-york-v4/examples/data-table-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/data-table-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "date-picker-demo": {
+    name: "date-picker-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","calendar","popover"],
+    files: [{
+      path: "registry/new-york-v4/examples/date-picker-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/date-picker-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "date-picker-form": {
+    name: "date-picker-form",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","calendar","form","popover"],
+    files: [{
+      path: "registry/new-york-v4/examples/date-picker-form.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/date-picker-form.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "date-picker-with-presets": {
+    name: "date-picker-with-presets",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","calendar","popover","select"],
+    files: [{
+      path: "registry/new-york-v4/examples/date-picker-with-presets.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/date-picker-with-presets.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "date-picker-with-range": {
+    name: "date-picker-with-range",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","calendar","popover"],
+    files: [{
+      path: "registry/new-york-v4/examples/date-picker-with-range.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/date-picker-with-range.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "dialog-demo": {
+    name: "dialog-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["dialog"],
+    files: [{
+      path: "registry/new-york-v4/examples/dialog-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/dialog-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "dialog-close-button": {
+    name: "dialog-close-button",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["dialog","button"],
+    files: [{
+      path: "registry/new-york-v4/examples/dialog-close-button.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/dialog-close-button.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "drawer-demo": {
+    name: "drawer-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["drawer"],
+    files: [{
+      path: "registry/new-york-v4/examples/drawer-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/drawer-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "drawer-dialog": {
+    name: "drawer-dialog",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["drawer","dialog"],
+    files: [{
+      path: "registry/new-york-v4/examples/drawer-dialog.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/drawer-dialog.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "dropdown-menu-demo": {
+    name: "dropdown-menu-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["dropdown-menu"],
+    files: [{
+      path: "registry/new-york-v4/examples/dropdown-menu-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/dropdown-menu-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "dropdown-menu-checkboxes": {
+    name: "dropdown-menu-checkboxes",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["dropdown-menu","checkbox"],
+    files: [{
+      path: "registry/new-york-v4/examples/dropdown-menu-checkboxes.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/dropdown-menu-checkboxes.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "dropdown-menu-radio-group": {
+    name: "dropdown-menu-radio-group",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["dropdown-menu","radio-group"],
+    files: [{
+      path: "registry/new-york-v4/examples/dropdown-menu-radio-group.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/dropdown-menu-radio-group.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "hover-card-demo": {
+    name: "hover-card-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["hover-card"],
+    files: [{
+      path: "registry/new-york-v4/examples/hover-card-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/hover-card-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-demo": {
+    name: "input-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-disabled": {
+    name: "input-disabled",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-disabled.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-disabled.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-file": {
+    name: "input-file",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-file.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-file.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-form": {
+    name: "input-form",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input","button","form"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-form.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-form.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-with-button": {
+    name: "input-with-button",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input","button"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-with-button.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-with-button.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-with-label": {
+    name: "input-with-label",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input","button","label"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-with-label.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-with-label.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-with-text": {
+    name: "input-with-text",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input","button","label"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-with-text.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-with-text.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-otp-demo": {
+    name: "input-otp-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input-otp"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-otp-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-otp-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-otp-pattern": {
+    name: "input-otp-pattern",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input-otp"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-otp-pattern.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-otp-pattern.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-otp-separator": {
+    name: "input-otp-separator",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input-otp"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-otp-separator.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-otp-separator.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-otp-controlled": {
+    name: "input-otp-controlled",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input-otp"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-otp-controlled.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-otp-controlled.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "input-otp-form": {
+    name: "input-otp-form",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["input-otp","form"],
+    files: [{
+      path: "registry/new-york-v4/examples/input-otp-form.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/input-otp-form.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "label-demo": {
+    name: "label-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["label"],
+    files: [{
+      path: "registry/new-york-v4/examples/label-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/label-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "menubar-demo": {
+    name: "menubar-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["menubar"],
+    files: [{
+      path: "registry/new-york-v4/examples/menubar-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/menubar-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "navigation-menu-demo": {
+    name: "navigation-menu-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["navigation-menu"],
+    files: [{
+      path: "registry/new-york-v4/examples/navigation-menu-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/navigation-menu-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "pagination-demo": {
+    name: "pagination-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["pagination"],
+    files: [{
+      path: "registry/new-york-v4/examples/pagination-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/pagination-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "popover-demo": {
+    name: "popover-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["popover"],
+    files: [{
+      path: "registry/new-york-v4/examples/popover-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/popover-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "progress-demo": {
+    name: "progress-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["progress"],
+    files: [{
+      path: "registry/new-york-v4/examples/progress-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/progress-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "radio-group-demo": {
+    name: "radio-group-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["radio-group"],
+    files: [{
+      path: "registry/new-york-v4/examples/radio-group-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/radio-group-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "radio-group-form": {
+    name: "radio-group-form",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["radio-group","form"],
+    files: [{
+      path: "registry/new-york-v4/examples/radio-group-form.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/radio-group-form.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "resizable-demo": {
+    name: "resizable-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["resizable"],
+    files: [{
+      path: "registry/new-york-v4/examples/resizable-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/resizable-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "resizable-demo-with-handle": {
+    name: "resizable-demo-with-handle",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["resizable"],
+    files: [{
+      path: "registry/new-york-v4/examples/resizable-demo-with-handle.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/resizable-demo-with-handle.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "resizable-vertical": {
+    name: "resizable-vertical",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["resizable"],
+    files: [{
+      path: "registry/new-york-v4/examples/resizable-vertical.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/resizable-vertical.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "resizable-handle": {
+    name: "resizable-handle",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["resizable"],
+    files: [{
+      path: "registry/new-york-v4/examples/resizable-handle.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/resizable-handle.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "scroll-area-demo": {
+    name: "scroll-area-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["scroll-area"],
+    files: [{
+      path: "registry/new-york-v4/examples/scroll-area-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/scroll-area-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "scroll-area-horizontal-demo": {
+    name: "scroll-area-horizontal-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["scroll-area"],
+    files: [{
+      path: "registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "select-demo": {
+    name: "select-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["select"],
+    files: [{
+      path: "registry/new-york-v4/examples/select-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/select-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "select-scrollable": {
+    name: "select-scrollable",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["select"],
+    files: [{
+      path: "registry/new-york-v4/examples/select-scrollable.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/select-scrollable.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "select-form": {
+    name: "select-form",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["select"],
+    files: [{
+      path: "registry/new-york-v4/examples/select-form.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/select-form.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "separator-demo": {
+    name: "separator-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["separator"],
+    files: [{
+      path: "registry/new-york-v4/examples/separator-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/separator-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sheet-demo": {
+    name: "sheet-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["sheet"],
+    files: [{
+      path: "registry/new-york-v4/examples/sheet-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/sheet-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sheet-side": {
+    name: "sheet-side",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["sheet"],
+    files: [{
+      path: "registry/new-york-v4/examples/sheet-side.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/sheet-side.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "skeleton-demo": {
+    name: "skeleton-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["skeleton"],
+    files: [{
+      path: "registry/new-york-v4/examples/skeleton-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/skeleton-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "skeleton-card": {
+    name: "skeleton-card",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["skeleton"],
+    files: [{
+      path: "registry/new-york-v4/examples/skeleton-card.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/skeleton-card.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "slider-demo": {
+    name: "slider-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["slider"],
+    files: [{
+      path: "registry/new-york-v4/examples/slider-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/slider-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sonner-demo": {
+    name: "sonner-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["sonner"],
+    files: [{
+      path: "registry/new-york-v4/examples/sonner-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/sonner-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "switch-demo": {
+    name: "switch-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["switch"],
+    files: [{
+      path: "registry/new-york-v4/examples/switch-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/switch-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "switch-form": {
+    name: "switch-form",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["switch","form"],
+    files: [{
+      path: "registry/new-york-v4/examples/switch-form.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/switch-form.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "table-demo": {
+    name: "table-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["table"],
+    files: [{
+      path: "registry/new-york-v4/examples/table-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/table-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "tabs-demo": {
+    name: "tabs-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["tabs"],
+    files: [{
+      path: "registry/new-york-v4/examples/tabs-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/tabs-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "textarea-demo": {
+    name: "textarea-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["textarea"],
+    files: [{
+      path: "registry/new-york-v4/examples/textarea-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/textarea-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "textarea-disabled": {
+    name: "textarea-disabled",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["textarea"],
+    files: [{
+      path: "registry/new-york-v4/examples/textarea-disabled.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/textarea-disabled.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "textarea-form": {
+    name: "textarea-form",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["textarea","form"],
+    files: [{
+      path: "registry/new-york-v4/examples/textarea-form.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/textarea-form.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "textarea-with-button": {
+    name: "textarea-with-button",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["textarea","button"],
+    files: [{
+      path: "registry/new-york-v4/examples/textarea-with-button.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/textarea-with-button.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "textarea-with-label": {
+    name: "textarea-with-label",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["textarea","label"],
+    files: [{
+      path: "registry/new-york-v4/examples/textarea-with-label.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/textarea-with-label.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "textarea-with-text": {
+    name: "textarea-with-text",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["textarea","label"],
+    files: [{
+      path: "registry/new-york-v4/examples/textarea-with-text.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/textarea-with-text.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-group-demo": {
+    name: "toggle-group-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-group-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-group-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-group-disabled": {
+    name: "toggle-group-disabled",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-group-disabled.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-group-disabled.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-group-lg": {
+    name: "toggle-group-lg",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-group-lg.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-group-lg.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-group-outline": {
+    name: "toggle-group-outline",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-group-outline.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-group-outline.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-group-sm": {
+    name: "toggle-group-sm",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-group-sm.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-group-sm.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-group-single": {
+    name: "toggle-group-single",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-group-single.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-group-single.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-demo": {
+    name: "toggle-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-disabled": {
+    name: "toggle-disabled",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-disabled.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-disabled.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-lg": {
+    name: "toggle-lg",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-lg.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-lg.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-outline": {
+    name: "toggle-outline",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-outline.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-outline.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-sm": {
+    name: "toggle-sm",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-sm.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-sm.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "toggle-with-text": {
+    name: "toggle-with-text",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [{
+      path: "registry/new-york-v4/examples/toggle-with-text.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/toggle-with-text.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "tooltip-demo": {
+    name: "tooltip-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["tooltip"],
+    files: [{
+      path: "registry/new-york-v4/examples/tooltip-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/tooltip-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-blockquote": {
+    name: "typography-blockquote",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-blockquote.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-blockquote.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-demo": {
+    name: "typography-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-h1": {
+    name: "typography-h1",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-h1.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-h1.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-h2": {
+    name: "typography-h2",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-h2.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-h2.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-h3": {
+    name: "typography-h3",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-h3.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-h3.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-h4": {
+    name: "typography-h4",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-h4.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-h4.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-inline-code": {
+    name: "typography-inline-code",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-inline-code.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-inline-code.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-large": {
+    name: "typography-large",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-large.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-large.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-lead": {
+    name: "typography-lead",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-lead.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-lead.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-list": {
+    name: "typography-list",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-list.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-list.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-muted": {
+    name: "typography-muted",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-muted.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-muted.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-p": {
+    name: "typography-p",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-p.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-p.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-small": {
+    name: "typography-small",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-small.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-small.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "typography-table": {
+    name: "typography-table",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/typography-table.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/typography-table.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "mode-toggle": {
+    name: "mode-toggle",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/mode-toggle.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/mode-toggle.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "chart-bar-demo": {
+    name: "chart-bar-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/chart-bar-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/chart-bar-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "chart-bar-demo-grid": {
+    name: "chart-bar-demo-grid",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/chart-bar-demo-grid.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/chart-bar-demo-grid.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "chart-bar-demo-axis": {
+    name: "chart-bar-demo-axis",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/chart-bar-demo-axis.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/chart-bar-demo-axis.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "chart-bar-demo-tooltip": {
+    name: "chart-bar-demo-tooltip",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/chart-bar-demo-tooltip.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/chart-bar-demo-tooltip.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "chart-bar-demo-legend": {
+    name: "chart-bar-demo-legend",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/chart-bar-demo-legend.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/chart-bar-demo-legend.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "chart-tooltip-demo": {
+    name: "chart-tooltip-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/examples/chart-tooltip-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/chart-tooltip-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "calendar-hijri": {
+    name: "calendar-hijri",
+    description: "A Persian calendar.",
+    type: "registry:example",
+    registryDependencies: ["calendar"],
+    files: [{
+      path: "registry/new-york-v4/examples/calendar-hijri.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/examples/calendar-hijri.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["calendar","date"],
+    meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+  },
+  "sidebar-demo": {
+    name: "sidebar-demo",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-demo.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-header": {
+    name: "sidebar-header",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-header.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-header.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-footer": {
+    name: "sidebar-footer",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-footer.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-footer.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-group": {
+    name: "sidebar-group",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-group.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-group.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-group-collapsible": {
+    name: "sidebar-group-collapsible",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-group-collapsible.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-group-collapsible.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-group-action": {
+    name: "sidebar-group-action",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-group-action.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-group-action.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-menu": {
+    name: "sidebar-menu",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-menu.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-menu.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-menu-action": {
+    name: "sidebar-menu-action",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-menu-action.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-menu-action.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-menu-sub": {
+    name: "sidebar-menu-sub",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-menu-sub.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-menu-sub.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-menu-collapsible": {
+    name: "sidebar-menu-collapsible",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-menu-collapsible.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-menu-collapsible.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-menu-badge": {
+    name: "sidebar-menu-badge",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-menu-badge.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-menu-badge.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-rsc": {
+    name: "sidebar-rsc",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-rsc.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-rsc.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  "sidebar-controlled": {
+    name: "sidebar-controlled",
+    description: "",
+    type: "registry:internal",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/new-york-v4/internal/sidebar-controlled.tsx",
+      type: "registry:component",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/new-york-v4/internal/sidebar-controlled.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
+  }
\ No newline at end of file
diff --git a/apps/v4/registry/index.ts b/apps/v4/registry/index.ts
new file mode 100644
index 00000000000..85d45b310f4
--- /dev/null
+++ b/apps/v4/registry/index.ts
@@ -0,0 +1,70 @@
+import { registryItemSchema, type Registry } from "shadcn/schema"
+import { z } from "zod"
+
+import { blocks } from "@/registry/registry-blocks"
+import { charts } from "@/registry/registry-charts"
+import { examples } from "@/registry/registry-examples"
+import { hooks } from "@/registry/registry-hooks"
+import { internal } from "@/registry/registry-internal"
+import { lib } from "@/registry/registry-lib"
+import { themes } from "@/registry/registry-themes"
+import { ui } from "@/registry/registry-ui"
+
+const DEPRECATED_ITEMS = [
+  "toast",
+  "toast-demo",
+  "toast-destructive",
+  "toast-simple",
+  "toast-with-action",
+  "toast-with-title",
+]
+
+// Shared between index and style for backward compatibility.
+const NEW_YORK_V4_STYLE = {
+  type: "registry:style",
+  dependencies: ["class-variance-authority", "lucide-react"],
+  devDependencies: ["tw-animate-css"],
+  registryDependencies: ["utils"],
+  cssVars: {},
+  files: [],
+}
+
+export const registry = {
+  name: "shadcn/ui",
+  homepage: "https://ui.shadcn.com",
+  items: z.array(registryItemSchema).parse(
+    [
+      {
+        name: "index",
+        ...NEW_YORK_V4_STYLE,
+      },
+      {
+        name: "style",
+        ...NEW_YORK_V4_STYLE,
+      },
+      ...ui,
+      ...blocks,
+      ...charts,
+      ...lib,
+      ...hooks,
+      ...themes,
+      ...examples,
+      ...internal,
+    ]
+      .filter((item) => {
+        return !DEPRECATED_ITEMS.includes(item.name)
+      })
+      .map((item) => {
+        // Temporary fix for dashboard-01.
+        if (item.name === "dashboard-01") {
+          item.dependencies?.push("@tabler/icons-react")
+        }
+
+        if (item.name === "accordion" && "tailwind" in item) {
+          delete item.tailwind
+        }
+
+        return item
+      })
+  ),
+} satisfies Registry
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-01.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-01.tsx
new file mode 100644
index 00000000000..d3f663629e5
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-01.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar01() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-02.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-02.tsx
new file mode 100644
index 00000000000..1a078da3b87
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-02.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar02() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      numberOfMonths={2}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-03.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-03.tsx
new file mode 100644
index 00000000000..cfe447ed241
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-03.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar03() {
+  const [dates, setDates] = React.useState<Date[]>([
+    new Date(2025, 5, 12),
+    new Date(2025, 6, 24),
+  ])
+
+  return (
+    <Calendar
+      mode="multiple"
+      numberOfMonths={2}
+      defaultMonth={dates[0]}
+      required
+      selected={dates}
+      onSelect={setDates}
+      max={5}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-04.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-04.tsx
new file mode 100644
index 00000000000..bfa6c0020f2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-04.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar04() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 9),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-05.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-05.tsx
new file mode 100644
index 00000000000..f759899ee8c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-05.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar05() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 6, 15),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-06.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-06.tsx
new file mode 100644
index 00000000000..721c3aac3bf
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-06.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar06() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={1}
+        min={5}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        A minimum of 5 days is required
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-07.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-07.tsx
new file mode 100644
index 00000000000..354e2a03e62
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-07.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar07() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 18),
+    to: new Date(2025, 6, 7),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        min={2}
+        max={20}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        Your stay must be between 2 and 20 nights
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-08.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-08.tsx
new file mode 100644
index 00000000000..cfc8976924f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-08.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar08() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={{
+        before: new Date(2025, 5, 12),
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-09.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-09.tsx
new file mode 100644
index 00000000000..b150b17d236
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-09.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar09() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      disabled={{ dayOfWeek: [0, 6] }}
+      className="rounded-lg border shadow-sm"
+      excludeDisabled
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-10.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-10.tsx
new file mode 100644
index 00000000000..021061058be
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-10.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+
+export default function Calendar10() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Appointment</CardTitle>
+        <CardDescription>Find a date</CardDescription>
+        <CardAction>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              setMonth(new Date())
+              setDate(new Date())
+            }}
+          >
+            Today
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="single"
+          month={month}
+          onMonthChange={setMonth}
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-11.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-11.tsx
new file mode 100644
index 00000000000..aac7d909cd7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-11.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar11() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        startMonth={new Date(2025, 5, 1)}
+        endMonth={new Date(2025, 6, 31)}
+        disableNavigation
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        We are open in June and July only.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-12.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-12.tsx
new file mode 100644
index 00000000000..3785d5195a7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-12.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+import { enUS, es } from "react-day-picker/locale"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+const localizedStrings = {
+  en: {
+    title: "Book an appointment",
+    description: "Select the dates for your appointment",
+  },
+  es: {
+    title: "Reserva una cita",
+    description: "Selecciona las fechas para tu cita",
+  },
+} as const
+
+export default function Calendar12() {
+  const [locale, setLocale] =
+    React.useState<keyof typeof localizedStrings>("es")
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 8, 9),
+    to: new Date(2025, 8, 17),
+  })
+
+  return (
+    <Card>
+      <CardHeader className="border-b">
+        <CardTitle>{localizedStrings[locale].title}</CardTitle>
+        <CardDescription>
+          {localizedStrings[locale].description}
+        </CardDescription>
+        <CardAction>
+          <Select
+            value={locale}
+            onValueChange={(value) =>
+              setLocale(value as keyof typeof localizedStrings)
+            }
+          >
+            <SelectTrigger className="w-[100px]">
+              <SelectValue placeholder="Language" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              <SelectItem value="es">Español</SelectItem>
+              <SelectItem value="en">English</SelectItem>
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="range"
+          selected={dateRange}
+          onSelect={setDateRange}
+          defaultMonth={dateRange?.from}
+          numberOfMonths={2}
+          locale={locale === "es" ? es : enUS}
+          className="bg-transparent p-0"
+          buttonVariant="outline"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-13.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-13.tsx
new file mode 100644
index 00000000000..e228944f3b4
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-13.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+export default function Calendar13() {
+  const [dropdown, setDropdown] =
+    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
+      "dropdown"
+    )
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        captionLayout={dropdown}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="dropdown" className="px-1">
+          Dropdown
+        </Label>
+        <Select
+          value={dropdown}
+          onValueChange={(value) =>
+            setDropdown(
+              value as React.ComponentProps<typeof Calendar>["captionLayout"]
+            )
+          }
+        >
+          <SelectTrigger
+            id="dropdown"
+            size="sm"
+            className="bg-background w-full"
+          >
+            <SelectValue placeholder="Dropdown" />
+          </SelectTrigger>
+          <SelectContent align="center">
+            <SelectItem value="dropdown">Month and Year</SelectItem>
+            <SelectItem value="dropdown-months">Month Only</SelectItem>
+            <SelectItem value="dropdown-years">Year Only</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-14.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-14.tsx
new file mode 100644
index 00000000000..54839830704
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-14.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar14() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const bookedDates = Array.from(
+    { length: 12 },
+    (_, i) => new Date(2025, 5, 15 + i)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={bookedDates}
+      modifiers={{
+        booked: bookedDates,
+      }}
+      modifiersClassNames={{
+        booked: "[&>button]:line-through opacity-100",
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-15.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-15.tsx
new file mode 100644
index 00000000000..b4e37374c23
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-15.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar15() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+      showWeekNumber
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-16.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-16.tsx
new file mode 100644
index 00000000000..27f98962bad
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-16.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Clock2Icon } from "lucide-react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function Calendar16() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col gap-6 border-t px-4 !pt-4">
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-from">Start Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-from"
+              type="time"
+              step="1"
+              defaultValue="10:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-to">End Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-to"
+              type="time"
+              step="1"
+              defaultValue="12:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-17.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-17.tsx
new file mode 100644
index 00000000000..092c39b7c59
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-17.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function Calendar17() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0 [--cell-size:--spacing(10.5)]"
+        />
+      </CardContent>
+      <CardFooter className="flex gap-2 border-t px-4 !pt-4 *:[div]:w-full">
+        <div>
+          <Label htmlFor="time-from" className="sr-only">
+            Start Time
+          </Label>
+          <Input
+            id="time-from"
+            type="time"
+            step="1"
+            defaultValue="10:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <span>-</span>
+        <div>
+          <Label htmlFor="time-to" className="sr-only">
+            End Time
+          </Label>
+          <Input
+            id="time-to"
+            type="time"
+            step="1"
+            defaultValue="12:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-18.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-18.tsx
new file mode 100644
index 00000000000..3211ab0dabf
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-18.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar18() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
+      buttonVariant="ghost"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-19.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-19.tsx
new file mode 100644
index 00000000000..d71170be309
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-19.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { addDays } from "date-fns"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+
+export default function Calendar19() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="max-w-[300px] py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          defaultMonth={date}
+          className="bg-transparent p-0 [--cell-size:--spacing(9.5)]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t px-4 !pt-4">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-20.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-20.tsx
new file mode 100644
index 00000000000..aa2e7e66b66
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-20.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+
+export default function Calendar20() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00")
+  const timeSlots = Array.from({ length: 37 }, (_, i) => {
+    const totalMinutes = i * 15
+    const hour = Math.floor(totalMinutes / 60) + 9
+    const minute = totalMinutes % 60
+    return `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`
+  })
+
+  const bookedDates = Array.from(
+    { length: 3 },
+    (_, i) => new Date(2025, 5, 17 + i)
+  )
+
+  return (
+    <Card className="gap-0 p-0">
+      <CardContent className="relative p-0 md:pr-48">
+        <div className="p-6">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            defaultMonth={date}
+            disabled={bookedDates}
+            showOutsideDays={false}
+            modifiers={{
+              booked: bookedDates,
+            }}
+            modifiersClassNames={{
+              booked: "[&>button]:line-through opacity-100",
+            }}
+            className="bg-transparent p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]"
+            formatters={{
+              formatWeekdayName: (date) => {
+                return date.toLocaleString("en-US", { weekday: "short" })
+              },
+            }}
+          />
+        </div>
+        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-t-0 md:border-l">
+          <div className="grid gap-2">
+            {timeSlots.map((time) => (
+              <Button
+                key={time}
+                variant={selectedTime === time ? "default" : "outline"}
+                onClick={() => setSelectedTime(time)}
+                className="w-full shadow-none"
+              >
+                {time}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-4 border-t px-6 !py-5 md:flex-row">
+        <div className="text-sm">
+          {date && selectedTime ? (
+            <>
+              Your meeting is booked for{" "}
+              <span className="font-medium">
+                {" "}
+                {date?.toLocaleDateString("en-US", {
+                  weekday: "long",
+                  day: "numeric",
+                  month: "long",
+                })}{" "}
+              </span>
+              at <span className="font-medium">{selectedTime}</span>.
+            </>
+          ) : (
+            <>Select a date and time for your meeting.</>
+          )}
+        </div>
+        <Button
+          disabled={!date || !selectedTime}
+          className="w-full md:ml-auto md:w-auto"
+          variant="outline"
+        >
+          Continue
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-21.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-21.tsx
new file mode 100644
index 00000000000..51816164f4d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-21.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { DateRange } from "react-day-picker"
+
+import { Calendar, CalendarDayButton } from "@/registry/new-york-v4/ui/calendar"
+
+export default function Calendar21() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 17),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={range?.from}
+      selected={range}
+      onSelect={setRange}
+      numberOfMonths={1}
+      captionLayout="dropdown"
+      className="rounded-lg border shadow-sm [--cell-size:--spacing(11)] md:[--cell-size:--spacing(13)]"
+      formatters={{
+        formatMonthDropdown: (date) => {
+          return date.toLocaleString("default", { month: "long" })
+        },
+      }}
+      components={{
+        DayButton: ({ children, modifiers, day, ...props }) => {
+          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+          return (
+            <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+              {children}
+              {!modifiers.outside && <span>{isWeekend ? "$220" : "$100"}</span>}
+            </CalendarDayButton>
+          )
+        },
+      }}
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-22.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-22.tsx
new file mode 100644
index 00000000000..1a37fd8a45c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-22.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar22() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-23.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-23.tsx
new file mode 100644
index 00000000000..641ab44c67b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-23.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar23() {
+  const [range, setRange] = React.useState<DateRange | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-24.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-24.tsx
new file mode 100644
index 00000000000..f2a8d5e32b0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-24.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar24() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date-picker" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date-picker"
+              className="w-32 justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="time-picker" className="px-1">
+          Time
+        </Label>
+        <Input
+          type="time"
+          id="time-picker"
+          step="1"
+          defaultValue="10:30:00"
+          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-25.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-25.tsx
new file mode 100644
index 00000000000..a573ce57641
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-25.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar25() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-full justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-26.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-26.tsx
new file mode 100644
index 00000000000..77495c87e01
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-26.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar26() {
+  const [openFrom, setOpenFrom] = React.useState(false)
+  const [openTo, setOpenTo] = React.useState(false)
+  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [dateTo, setDateTo] = React.useState<Date | undefined>(
+    new Date("2025-06-03")
+  )
+
+  return (
+    <div className="flex w-full max-w-64 min-w-0 flex-col gap-6">
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-from" className="px-1">
+            Check-in
+          </Label>
+          <Popover open={openFrom} onOpenChange={setOpenFrom}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-from"
+                className="w-full justify-between font-normal"
+              >
+                {dateFrom
+                  ? dateFrom.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateFrom}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateFrom(date)
+                  setOpenFrom(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="invisible px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-to" className="px-1">
+            Check-out
+          </Label>
+          <Popover open={openTo} onOpenChange={setOpenTo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-to"
+                className="w-full justify-between font-normal"
+              >
+                {dateTo
+                  ? dateTo.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateTo}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateTo(date)
+                  setOpenTo(false)
+                }}
+                disabled={dateFrom && { before: dateFrom }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="invisible px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-27.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-27.tsx
new file mode 100644
index 00000000000..ec86fa0b57b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-27.tsx
@@ -0,0 +1,180 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+const chartData = [
+  { date: "2025-06-01", visitors: 178 },
+  { date: "2025-06-02", visitors: 470 },
+  { date: "2025-06-03", visitors: 103 },
+  { date: "2025-06-04", visitors: 439 },
+  { date: "2025-06-05", visitors: 88 },
+  { date: "2025-06-06", visitors: 294 },
+  { date: "2025-06-07", visitors: 323 },
+  { date: "2025-06-08", visitors: 385 },
+  { date: "2025-06-09", visitors: 438 },
+  { date: "2025-06-10", visitors: 155 },
+  { date: "2025-06-11", visitors: 92 },
+  { date: "2025-06-12", visitors: 492 },
+  { date: "2025-06-13", visitors: 81 },
+  { date: "2025-06-14", visitors: 426 },
+  { date: "2025-06-15", visitors: 307 },
+  { date: "2025-06-16", visitors: 371 },
+  { date: "2025-06-17", visitors: 475 },
+  { date: "2025-06-18", visitors: 107 },
+  { date: "2025-06-19", visitors: 341 },
+  { date: "2025-06-20", visitors: 408 },
+  { date: "2025-06-21", visitors: 169 },
+  { date: "2025-06-22", visitors: 317 },
+  { date: "2025-06-23", visitors: 480 },
+  { date: "2025-06-24", visitors: 132 },
+  { date: "2025-06-25", visitors: 141 },
+  { date: "2025-06-26", visitors: 434 },
+  { date: "2025-06-27", visitors: 448 },
+  { date: "2025-06-28", visitors: 149 },
+  { date: "2025-06-29", visitors: 103 },
+  { date: "2025-06-30", visitors: 446 },
+]
+
+const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "var(--color-primary)",
+  },
+} satisfies ChartConfig
+
+export default function Calendar27() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 5),
+    to: new Date(2025, 5, 20),
+  })
+  const filteredData = React.useMemo(() => {
+    if (!range?.from && !range?.to) {
+      return chartData
+    }
+
+    return chartData.filter((item) => {
+      const date = new Date(item.date)
+      return date >= range.from! && date <= range.to!
+    })
+  }, [range])
+
+  return (
+    <Card className="@container/card w-full max-w-xl">
+      <CardHeader className="flex flex-col border-b @md/card:grid">
+        <CardTitle>Web Analytics</CardTitle>
+        <CardDescription>
+          Showing total visitors for this month.
+        </CardDescription>
+        <CardAction className="mt-2 @md/card:mt-0">
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline">
+                <CalendarIcon />
+                {range?.from && range?.to
+                  ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+                  : "June 2025"}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+              <Calendar
+                className="w-full"
+                mode="range"
+                defaultMonth={range?.from}
+                selected={range}
+                onSelect={setRange}
+                disableNavigation
+                startMonth={range?.from}
+                fixedWeeks
+                showOutsideDays
+                disabled={{
+                  after: new Date(2025, 5, 31),
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="px-4">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={filteredData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={20}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="visitors"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey="visitors" fill={`var(--color-visitors)`} radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="border-t">
+        <div className="text-sm">
+          You had{" "}
+          <span className="font-semibold">{total.toLocaleString()}</span>{" "}
+          visitors for the month of June.
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-28.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-28.tsx
new file mode 100644
index 00000000000..2202cdfe6f4
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-28.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+function isValidDate(date: Date | undefined) {
+  if (!date) {
+    return false
+  }
+  return !isNaN(date.getTime())
+}
+
+export default function Calendar28() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+  const [value, setValue] = React.useState(formatDate(date))
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Subscription Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="June 01, 2025"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            const date = new Date(e.target.value)
+            setValue(e.target.value)
+            if (isValidDate(date)) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto overflow-hidden p-0"
+            align="end"
+            alignOffset={-8}
+            sideOffset={10}
+          >
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-29.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-29.tsx
new file mode 100644
index 00000000000..df57d9defc2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-29.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { parseDate } from "chrono-node"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+export default function Calendar29() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("In 2 days")
+  const [date, setDate] = React.useState<Date | undefined>(
+    parseDate(value) || undefined
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Schedule Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="Tomorrow or next week"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            setValue(e.target.value)
+            const date = parseDate(e.target.value)
+            if (date) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="text-muted-foreground px-1 text-sm">
+        Your post will be published on{" "}
+        <span className="font-medium">{formatDate(date)}</span>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-30.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-30.tsx
new file mode 100644
index 00000000000..533dd74f8c2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-30.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function Calendar30() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? formatDateRange(range.from, range.to, {
+                  includeTime: false,
+                })
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-31.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-31.tsx
new file mode 100644
index 00000000000..88c8ddc74fa
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-31.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
+
+const events = [
+  {
+    title: "Team Sync Meeting",
+    from: "2025-06-12T09:00:00",
+    to: "2025-06-12T10:00:00",
+  },
+  {
+    title: "Design Review",
+    from: "2025-06-12T11:30:00",
+    to: "2025-06-12T12:30:00",
+  },
+  {
+    title: "Client Presentation",
+    from: "2025-06-12T14:00:00",
+    to: "2025-06-12T15:00:00",
+  },
+]
+
+export default function Calendar31() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+          required
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col items-start gap-3 border-t px-4 !pt-4">
+        <div className="flex w-full items-center justify-between px-1">
+          <div className="text-sm font-medium">
+            {date?.toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+            })}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-6"
+            title="Add Event"
+          >
+            <PlusIcon />
+            <span className="sr-only">Add Event</span>
+          </Button>
+        </div>
+        <div className="flex w-full flex-col gap-2">
+          {events.map((event) => (
+            <div
+              key={event.title}
+              className="bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full"
+            >
+              <div className="font-medium">{event.title}</div>
+              <div className="text-muted-foreground text-xs">
+                {formatDateRange(new Date(event.from), new Date(event.to))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-32.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-32.tsx
new file mode 100644
index 00000000000..0d424546650
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-32.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { CalendarPlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function Calendar32() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <CalendarPlusIcon />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="w-auto overflow-hidden p-0">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select date</DrawerTitle>
+            <DrawerDescription>Set your date of birth</DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
+          />
+        </DrawerContent>
+      </Drawer>
+      <div className="text-muted-foreground px-1 text-sm">
+        This example works best on mobile.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx
new file mode 100644
index 00000000000..ef40779e516
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import {
+  IconCamera,
+  IconChartBar,
+  IconDashboard,
+  IconDatabase,
+  IconFileAi,
+  IconFileDescription,
+  IconFileWord,
+  IconFolder,
+  IconHelp,
+  IconInnerShadowTop,
+  IconListDetails,
+  IconReport,
+  IconSearch,
+  IconSettings,
+  IconUsers,
+} from "@tabler/icons-react"
+
+import { NavDocuments } from "@/registry/new-york-v4/blocks/dashboard-01/components/nav-documents"
+import { NavMain } from "@/registry/new-york-v4/blocks/dashboard-01/components/nav-main"
+import { NavSecondary } from "@/registry/new-york-v4/blocks/dashboard-01/components/nav-secondary"
+import { NavUser } from "@/registry/new-york-v4/blocks/dashboard-01/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Dashboard",
+      url: "#",
+      icon: IconDashboard,
+    },
+    {
+      title: "Lifecycle",
+      url: "#",
+      icon: IconListDetails,
+    },
+    {
+      title: "Analytics",
+      url: "#",
+      icon: IconChartBar,
+    },
+    {
+      title: "Projects",
+      url: "#",
+      icon: IconFolder,
+    },
+    {
+      title: "Team",
+      url: "#",
+      icon: IconUsers,
+    },
+  ],
+  navClouds: [
+    {
+      title: "Capture",
+      icon: IconCamera,
+      isActive: true,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Proposal",
+      icon: IconFileDescription,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Prompts",
+      icon: IconFileAi,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Settings",
+      url: "#",
+      icon: IconSettings,
+    },
+    {
+      title: "Get Help",
+      url: "#",
+      icon: IconHelp,
+    },
+    {
+      title: "Search",
+      url: "#",
+      icon: IconSearch,
+    },
+  ],
+  documents: [
+    {
+      name: "Data Library",
+      url: "#",
+      icon: IconDatabase,
+    },
+    {
+      name: "Reports",
+      url: "#",
+      icon: IconReport,
+    },
+    {
+      name: "Word Assistant",
+      url: "#",
+      icon: IconFileWord,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="offcanvas" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              className="data-[slot=sidebar-menu-button]:!p-1.5"
+            >
+              <a href="#">
+                <IconInnerShadowTop className="!size-5" />
+                <span className="text-base font-semibold">Acme Inc.</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavDocuments items={data.documents} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx
new file mode 100644
index 00000000000..cc69b4479f2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx
@@ -0,0 +1,291 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--primary)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaInteractive() {
+  const isMobile = useIsMobile()
+  const [timeRange, setTimeRange] = React.useState("90d")
+
+  React.useEffect(() => {
+    if (isMobile) {
+      setTimeRange("7d")
+    }
+  }, [isMobile])
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card className="@container/card">
+      <CardHeader>
+        <CardTitle>Total Visitors</CardTitle>
+        <CardDescription>
+          <span className="hidden @[540px]/card:block">
+            Total for the last 3 months
+          </span>
+          <span className="@[540px]/card:hidden">Last 3 months</span>
+        </CardDescription>
+        <CardAction>
+          <ToggleGroup
+            type="single"
+            value={timeRange}
+            onValueChange={setTimeRange}
+            variant="outline"
+            className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
+          >
+            <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
+            <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
+            <ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
+          </ToggleGroup>
+          <Select value={timeRange} onValueChange={setTimeRange}>
+            <SelectTrigger
+              className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
+              size="sm"
+              aria-label="Select a value"
+            >
+              <SelectValue placeholder="Last 3 months" />
+            </SelectTrigger>
+            <SelectContent className="rounded-xl">
+              <SelectItem value="90d" className="rounded-lg">
+                Last 3 months
+              </SelectItem>
+              <SelectItem value="30d" className="rounded-lg">
+                Last 30 days
+              </SelectItem>
+              <SelectItem value="7d" className="rounded-lg">
+                Last 7 days
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={1.0}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx
new file mode 100644
index 00000000000..1a34e73067d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx
@@ -0,0 +1,807 @@
+"use client"
+
+import * as React from "react"
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type UniqueIdentifier,
+} from "@dnd-kit/core"
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import {
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight,
+  IconCircleCheckFilled,
+  IconDotsVertical,
+  IconGripVertical,
+  IconLayoutColumns,
+  IconLoader,
+  IconPlus,
+  IconTrendingUp,
+} from "@tabler/icons-react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  Row,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york-v4/ui/table"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+
+export const schema = z.object({
+  id: z.number(),
+  header: z.string(),
+  type: z.string(),
+  status: z.string(),
+  target: z.string(),
+  limit: z.string(),
+  reviewer: z.string(),
+})
+
+// Create a separate component for the drag handle
+function DragHandle({ id }: { id: number }) {
+  const { attributes, listeners } = useSortable({
+    id,
+  })
+
+  return (
+    <Button
+      {...attributes}
+      {...listeners}
+      variant="ghost"
+      size="icon"
+      className="text-muted-foreground size-7 hover:bg-transparent"
+    >
+      <IconGripVertical className="text-muted-foreground size-3" />
+      <span className="sr-only">Drag to reorder</span>
+    </Button>
+  )
+}
+
+const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "drag",
+    header: () => null,
+    cell: ({ row }) => <DragHandle id={row.original.id} />,
+  },
+  {
+    id: "select",
+    header: ({ table }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "header",
+    header: "Header",
+    cell: ({ row }) => {
+      return <TableCellViewer item={row.original} />
+    },
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: "Section Type",
+    cell: ({ row }) => (
+      <div className="w-32">
+        <Badge variant="outline" className="text-muted-foreground px-1.5">
+          {row.original.type}
+        </Badge>
+      </div>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <Badge variant="outline" className="text-muted-foreground px-1.5">
+        {row.original.status === "Done" ? (
+          <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
+        ) : (
+          <IconLoader />
+        )}
+        {row.original.status}
+      </Badge>
+    ),
+  },
+  {
+    accessorKey: "target",
+    header: () => <div className="w-full text-right">Target</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: "Done",
+            error: "Error",
+          })
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-target`} className="sr-only">
+          Target
+        </Label>
+        <Input
+          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          defaultValue={row.original.target}
+          id={`${row.original.id}-target`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: "limit",
+    header: () => <div className="w-full text-right">Limit</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: "Done",
+            error: "Error",
+          })
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-limit`} className="sr-only">
+          Limit
+        </Label>
+        <Input
+          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          defaultValue={row.original.limit}
+          id={`${row.original.id}-limit`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: "reviewer",
+    header: "Reviewer",
+    cell: ({ row }) => {
+      const isAssigned = row.original.reviewer !== "Assign reviewer"
+
+      if (isAssigned) {
+        return row.original.reviewer
+      }
+
+      return (
+        <>
+          <Label htmlFor={`${row.original.id}-reviewer`} className="sr-only">
+            Reviewer
+          </Label>
+          <Select>
+            <SelectTrigger
+              className="w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate"
+              size="sm"
+              id={`${row.original.id}-reviewer`}
+            >
+              <SelectValue placeholder="Assign reviewer" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+              <SelectItem value="Jamik Tashpulatov">
+                Jamik Tashpulatov
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </>
+      )
+    },
+  },
+  {
+    id: "actions",
+    cell: () => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
+            size="icon"
+          >
+            <IconDotsVertical />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-32">
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+          <DropdownMenuItem>Make a copy</DropdownMenuItem>
+          <DropdownMenuItem>Favorite</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+  },
+]
+
+function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id: row.original.id,
+  })
+
+  return (
+    <TableRow
+      data-state={row.getIsSelected() && "selected"}
+      data-dragging={isDragging}
+      ref={setNodeRef}
+      className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition: transition,
+      }}
+    >
+      {row.getVisibleCells().map((cell) => (
+        <TableCell key={cell.id}>
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}
+
+export function DataTable({
+  data: initialData,
+}: {
+  data: z.infer<typeof schema>[]
+}) {
+  const [data, setData] = React.useState(() => initialData)
+  const [rowSelection, setRowSelection] = React.useState({})
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+  const sortableId = React.useId()
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  const dataIds = React.useMemo<UniqueIdentifier[]>(
+    () => data?.map(({ id }) => id) || [],
+    [data]
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination,
+    },
+    getRowId: (row) => row.id.toString(),
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  })
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (active && over && active.id !== over.id) {
+      setData((data) => {
+        const oldIndex = dataIds.indexOf(active.id)
+        const newIndex = dataIds.indexOf(over.id)
+        return arrayMove(data, oldIndex, newIndex)
+      })
+    }
+  }
+
+  return (
+    <Tabs
+      defaultValue="outline"
+      className="w-full flex-col justify-start gap-6"
+    >
+      <div className="flex items-center justify-between px-4 lg:px-6">
+        <Label htmlFor="view-selector" className="sr-only">
+          View
+        </Label>
+        <Select defaultValue="outline">
+          <SelectTrigger
+            className="flex w-fit @4xl/main:hidden"
+            size="sm"
+            id="view-selector"
+          >
+            <SelectValue placeholder="Select a view" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="outline">Outline</SelectItem>
+            <SelectItem value="past-performance">Past Performance</SelectItem>
+            <SelectItem value="key-personnel">Key Personnel</SelectItem>
+            <SelectItem value="focus-documents">Focus Documents</SelectItem>
+          </SelectContent>
+        </Select>
+        <TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
+          <TabsTrigger value="outline">Outline</TabsTrigger>
+          <TabsTrigger value="past-performance">
+            Past Performance <Badge variant="secondary">3</Badge>
+          </TabsTrigger>
+          <TabsTrigger value="key-personnel">
+            Key Personnel <Badge variant="secondary">2</Badge>
+          </TabsTrigger>
+          <TabsTrigger value="focus-documents">Focus Documents</TabsTrigger>
+        </TabsList>
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm">
+                <IconLayoutColumns />
+                <span className="hidden lg:inline">Customize Columns</span>
+                <span className="lg:hidden">Columns</span>
+                <IconChevronDown />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              {table
+                .getAllColumns()
+                .filter(
+                  (column) =>
+                    typeof column.accessorFn !== "undefined" &&
+                    column.getCanHide()
+                )
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) =>
+                        column.toggleVisibility(!!value)
+                      }
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Button variant="outline" size="sm">
+            <IconPlus />
+            <span className="hidden lg:inline">Add Section</span>
+          </Button>
+        </div>
+      </div>
+      <TabsContent
+        value="outline"
+        className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
+      >
+        <div className="overflow-hidden rounded-lg border">
+          <DndContext
+            collisionDetection={closestCenter}
+            modifiers={[restrictToVerticalAxis]}
+            onDragEnd={handleDragEnd}
+            sensors={sensors}
+            id={sortableId}
+          >
+            <Table>
+              <TableHeader className="bg-muted sticky top-0 z-10">
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} colSpan={header.colSpan}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      )
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody className="**:data-[slot=table-cell]:first:w-8">
+                {table.getRowModel().rows?.length ? (
+                  <SortableContext
+                    items={dataIds}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {table.getRowModel().rows.map((row) => (
+                      <DraggableRow key={row.id} row={row} />
+                    ))}
+                  </SortableContext>
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      No results.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </DndContext>
+        </div>
+        <div className="flex items-center justify-between px-4">
+          <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+          <div className="flex w-full items-center gap-8 lg:w-fit">
+            <div className="hidden items-center gap-2 lg:flex">
+              <Label htmlFor="rows-per-page" className="text-sm font-medium">
+                Rows per page
+              </Label>
+              <Select
+                value={`${table.getState().pagination.pageSize}`}
+                onValueChange={(value) => {
+                  table.setPageSize(Number(value))
+                }}
+              >
+                <SelectTrigger size="sm" className="w-20" id="rows-per-page">
+                  <SelectValue
+                    placeholder={table.getState().pagination.pageSize}
+                  />
+                </SelectTrigger>
+                <SelectContent side="top">
+                  {[10, 20, 30, 40, 50].map((pageSize) => (
+                    <SelectItem key={pageSize} value={`${pageSize}`}>
+                      {pageSize}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex w-fit items-center justify-center text-sm font-medium">
+              Page {table.getState().pagination.pageIndex + 1} of{" "}
+              {table.getPageCount()}
+            </div>
+            <div className="ml-auto flex items-center gap-2 lg:ml-0">
+              <Button
+                variant="outline"
+                className="hidden h-8 w-8 p-0 lg:flex"
+                onClick={() => table.setPageIndex(0)}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to first page</span>
+                <IconChevronsLeft />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8"
+                size="icon"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to previous page</span>
+                <IconChevronLeft />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8"
+                size="icon"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to next page</span>
+                <IconChevronRight />
+              </Button>
+              <Button
+                variant="outline"
+                className="hidden size-8 lg:flex"
+                size="icon"
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to last page</span>
+                <IconChevronsRight />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </TabsContent>
+      <TabsContent
+        value="past-performance"
+        className="flex flex-col px-4 lg:px-6"
+      >
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+      <TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+      <TabsContent
+        value="focus-documents"
+        className="flex flex-col px-4 lg:px-6"
+      >
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+    </Tabs>
+  )
+}
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--primary)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
+  const isMobile = useIsMobile()
+
+  return (
+    <Drawer direction={isMobile ? "bottom" : "right"}>
+      <DrawerTrigger asChild>
+        <Button variant="link" className="text-foreground w-fit px-0 text-left">
+          {item.header}
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="gap-1">
+          <DrawerTitle>{item.header}</DrawerTitle>
+          <DrawerDescription>
+            Showing total visitors for the last 6 months
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
+          {!isMobile && (
+            <>
+              <ChartContainer config={chartConfig}>
+                <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                    left: 0,
+                    right: 10,
+                  }}
+                >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                    dataKey="month"
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                    tickFormatter={(value) => value.slice(0, 3)}
+                    hide
+                  />
+                  <ChartTooltip
+                    cursor={false}
+                    content={<ChartTooltipContent indicator="dot" />}
+                  />
+                  <Area
+                    dataKey="mobile"
+                    type="natural"
+                    fill="var(--color-mobile)"
+                    fillOpacity={0.6}
+                    stroke="var(--color-mobile)"
+                    stackId="a"
+                  />
+                  <Area
+                    dataKey="desktop"
+                    type="natural"
+                    fill="var(--color-desktop)"
+                    fillOpacity={0.4}
+                    stroke="var(--color-desktop)"
+                    stackId="a"
+                  />
+                </AreaChart>
+              </ChartContainer>
+              <Separator />
+              <div className="grid gap-2">
+                <div className="flex gap-2 leading-none font-medium">
+                  Trending up by 5.2% this month{" "}
+                  <IconTrendingUp className="size-4" />
+                </div>
+                <div className="text-muted-foreground">
+                  Showing total visitors for the last 6 months. This is just
+                  some random text to test the layout. It spans multiple lines
+                  and should wrap around.
+                </div>
+              </div>
+              <Separator />
+            </>
+          )}
+          <form className="flex flex-col gap-4">
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="header">Header</Label>
+              <Input id="header" defaultValue={item.header} />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="type">Type</Label>
+                <Select defaultValue={item.type}>
+                  <SelectTrigger id="type" className="w-full">
+                    <SelectValue placeholder="Select a type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Table of Contents">
+                      Table of Contents
+                    </SelectItem>
+                    <SelectItem value="Executive Summary">
+                      Executive Summary
+                    </SelectItem>
+                    <SelectItem value="Technical Approach">
+                      Technical Approach
+                    </SelectItem>
+                    <SelectItem value="Design">Design</SelectItem>
+                    <SelectItem value="Capabilities">Capabilities</SelectItem>
+                    <SelectItem value="Focus Documents">
+                      Focus Documents
+                    </SelectItem>
+                    <SelectItem value="Narrative">Narrative</SelectItem>
+                    <SelectItem value="Cover Page">Cover Page</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="status">Status</Label>
+                <Select defaultValue={item.status}>
+                  <SelectTrigger id="status" className="w-full">
+                    <SelectValue placeholder="Select a status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Done">Done</SelectItem>
+                    <SelectItem value="In Progress">In Progress</SelectItem>
+                    <SelectItem value="Not Started">Not Started</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="target">Target</Label>
+                <Input id="target" defaultValue={item.target} />
+              </div>
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="limit">Limit</Label>
+                <Input id="limit" defaultValue={item.limit} />
+              </div>
+            </div>
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="reviewer">Reviewer</Label>
+              <Select defaultValue={item.reviewer}>
+                <SelectTrigger id="reviewer" className="w-full">
+                  <SelectValue placeholder="Select a reviewer" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+                  <SelectItem value="Jamik Tashpulatov">
+                    Jamik Tashpulatov
+                  </SelectItem>
+                  <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </form>
+        </div>
+        <DrawerFooter>
+          <Button>Submit</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Done</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx
new file mode 100644
index 00000000000..503c59938a7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import {
+  IconDots,
+  IconFolder,
+  IconShare3,
+  IconTrash,
+  type Icon,
+} from "@tabler/icons-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavDocuments({
+  items,
+}: {
+  items: {
+    name: string
+    url: string
+    icon: Icon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Documents</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction
+                  showOnHover
+                  className="data-[state=open]:bg-accent rounded-sm"
+                >
+                  <IconDots />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-24 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <IconFolder />
+                  <span>Open</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <IconShare3 />
+                  <span>Share</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">
+                  <IconTrash />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <IconDots className="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx
new file mode 100644
index 00000000000..79ffb5cd6e7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import { IconCirclePlusFilled, IconMail, type Icon } from "@tabler/icons-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: Icon
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupContent className="flex flex-col gap-2">
+        <SidebarMenu>
+          <SidebarMenuItem className="flex items-center gap-2">
+            <SidebarMenuButton
+              tooltip="Quick Create"
+              className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
+            >
+              <IconCirclePlusFilled />
+              <span>Quick Create</span>
+            </SidebarMenuButton>
+            <Button
+              size="icon"
+              className="size-8 group-data-[collapsible=icon]:opacity-0"
+              variant="outline"
+            >
+              <IconMail />
+              <span className="sr-only">Inbox</span>
+            </Button>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton tooltip={item.title}>
+                {item.icon && <item.icon />}
+                <span>{item.title}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-secondary.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-secondary.tsx
new file mode 100644
index 00000000000..c4f2ea77e63
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-secondary.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { type Icon } from "@tabler/icons-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: Icon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx
new file mode 100644
index 00000000000..4d63e06cf80
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import {
+  IconCreditCard,
+  IconDotsVertical,
+  IconLogout,
+  IconNotification,
+  IconUserCircle,
+} from "@tabler/icons-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg grayscale">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="text-muted-foreground truncate text-xs">
+                  {user.email}
+                </span>
+              </div>
+              <IconDotsVertical className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="text-muted-foreground truncate text-xs">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <IconUserCircle />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <IconCreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <IconNotification />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <IconLogout />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx
new file mode 100644
index 00000000000..4a69bf5ea8f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx
@@ -0,0 +1,102 @@
+import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react"
+
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+
+export function SectionCards() {
+  return (
+    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>Total Revenue</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            $1,250.00
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingUp />
+              +12.5%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Trending up this month <IconTrendingUp className="size-4" />
+          </div>
+          <div className="text-muted-foreground">
+            Visitors for the last 6 months
+          </div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>New Customers</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            1,234
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingDown />
+              -20%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Down 20% this period <IconTrendingDown className="size-4" />
+          </div>
+          <div className="text-muted-foreground">
+            Acquisition needs attention
+          </div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>Active Accounts</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            45,678
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingUp />
+              +12.5%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Strong user retention <IconTrendingUp className="size-4" />
+          </div>
+          <div className="text-muted-foreground">Engagement exceed targets</div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription>Growth Rate</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            4.5%
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <IconTrendingUp />
+              +4.5%
+            </Badge>
+          </CardAction>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Steady performance increase <IconTrendingUp className="size-4" />
+          </div>
+          <div className="text-muted-foreground">Meets growth projections</div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/site-header.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/site-header.tsx
new file mode 100644
index 00000000000..dd4210d31c3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/site-header.tsx
@@ -0,0 +1,30 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import { SidebarTrigger } from "@/registry/new-york-v4/ui/sidebar"
+
+export function SiteHeader() {
+  return (
+    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <SidebarTrigger className="-ml-1" />
+        <Separator
+          orientation="vertical"
+          className="mx-2 data-[orientation=vertical]:h-4"
+        />
+        <h1 className="text-base font-medium">Documents</h1>
+        <div className="ml-auto flex items-center gap-2">
+          <Button variant="ghost" asChild size="sm" className="hidden sm:flex">
+            <a
+              href="https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard"
+              rel="noopener noreferrer"
+              target="_blank"
+              className="dark:text-foreground"
+            >
+              GitHub
+            </a>
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/data.json b/apps/v4/registry/new-york-v4/blocks/dashboard-01/data.json
new file mode 100644
index 00000000000..ec0873641b7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/data.json
@@ -0,0 +1,614 @@
+[
+  {
+    "id": 1,
+    "header": "Cover page",
+    "type": "Cover page",
+    "status": "In Process",
+    "target": "18",
+    "limit": "5",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 2,
+    "header": "Table of contents",
+    "type": "Table of contents",
+    "status": "Done",
+    "target": "29",
+    "limit": "24",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 3,
+    "header": "Executive summary",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "10",
+    "limit": "13",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 4,
+    "header": "Technical approach",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "27",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 5,
+    "header": "Design",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "2",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 6,
+    "header": "Capabilities",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "20",
+    "limit": "8",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 7,
+    "header": "Integration with existing systems",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "19",
+    "limit": "21",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 8,
+    "header": "Innovation and Advantages",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "25",
+    "limit": "26",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 9,
+    "header": "Overview of EMR's Innovative Solutions",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "7",
+    "limit": "23",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 10,
+    "header": "Advanced Algorithms and Machine Learning",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "30",
+    "limit": "28",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 11,
+    "header": "Adaptive Communication Protocols",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "9",
+    "limit": "31",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 12,
+    "header": "Advantages Over Current Technologies",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "12",
+    "limit": "0",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 13,
+    "header": "Past Performance",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "33",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 14,
+    "header": "Customer Feedback and Satisfaction Levels",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "34",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 15,
+    "header": "Implementation Challenges and Solutions",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "3",
+    "limit": "35",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 16,
+    "header": "Security Measures and Data Protection Policies",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "6",
+    "limit": "36",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 17,
+    "header": "Scalability and Future Proofing",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "4",
+    "limit": "37",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 18,
+    "header": "Cost-Benefit Analysis",
+    "type": "Plain language",
+    "status": "Done",
+    "target": "14",
+    "limit": "38",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 19,
+    "header": "User Training and Onboarding Experience",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "17",
+    "limit": "39",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 20,
+    "header": "Future Development Roadmap",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "11",
+    "limit": "40",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 21,
+    "header": "System Architecture Overview",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "24",
+    "limit": "18",
+    "reviewer": "Maya Johnson"
+  },
+  {
+    "id": 22,
+    "header": "Risk Management Plan",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "22",
+    "reviewer": "Carlos Rodriguez"
+  },
+  {
+    "id": 23,
+    "header": "Compliance Documentation",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "31",
+    "limit": "27",
+    "reviewer": "Sarah Chen"
+  },
+  {
+    "id": 24,
+    "header": "API Documentation",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "8",
+    "limit": "12",
+    "reviewer": "Raj Patel"
+  },
+  {
+    "id": 25,
+    "header": "User Interface Mockups",
+    "type": "Visual",
+    "status": "In Process",
+    "target": "19",
+    "limit": "25",
+    "reviewer": "Leila Ahmadi"
+  },
+  {
+    "id": 26,
+    "header": "Database Schema",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "22",
+    "limit": "20",
+    "reviewer": "Thomas Wilson"
+  },
+  {
+    "id": 27,
+    "header": "Testing Methodology",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "17",
+    "limit": "14",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 28,
+    "header": "Deployment Strategy",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "26",
+    "limit": "30",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 29,
+    "header": "Budget Breakdown",
+    "type": "Financial",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 30,
+    "header": "Market Analysis",
+    "type": "Research",
+    "status": "Done",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Sophia Martinez"
+  },
+  {
+    "id": 31,
+    "header": "Competitor Comparison",
+    "type": "Research",
+    "status": "In Process",
+    "target": "21",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 32,
+    "header": "Maintenance Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "23",
+    "reviewer": "Alex Thompson"
+  },
+  {
+    "id": 33,
+    "header": "User Personas",
+    "type": "Research",
+    "status": "In Process",
+    "target": "27",
+    "limit": "24",
+    "reviewer": "Nina Patel"
+  },
+  {
+    "id": 34,
+    "header": "Accessibility Compliance",
+    "type": "Legal",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 35,
+    "header": "Performance Metrics",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "David Kim"
+  },
+  {
+    "id": 36,
+    "header": "Disaster Recovery Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 37,
+    "header": "Third-party Integrations",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 38,
+    "header": "User Feedback Summary",
+    "type": "Research",
+    "status": "Done",
+    "target": "20",
+    "limit": "15",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 39,
+    "header": "Localization Strategy",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "12",
+    "limit": "19",
+    "reviewer": "Maria Garcia"
+  },
+  {
+    "id": 40,
+    "header": "Mobile Compatibility",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "James Wilson"
+  },
+  {
+    "id": 41,
+    "header": "Data Migration Plan",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 42,
+    "header": "Quality Assurance Protocols",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Priya Singh"
+  },
+  {
+    "id": 43,
+    "header": "Stakeholder Analysis",
+    "type": "Research",
+    "status": "In Process",
+    "target": "11",
+    "limit": "14",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 44,
+    "header": "Environmental Impact Assessment",
+    "type": "Research",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 45,
+    "header": "Intellectual Property Rights",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "17",
+    "limit": "20",
+    "reviewer": "Sarah Johnson"
+  },
+  {
+    "id": 46,
+    "header": "Customer Support Framework",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 47,
+    "header": "Version Control Strategy",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 48,
+    "header": "Continuous Integration Pipeline",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Michael Chen"
+  },
+  {
+    "id": 49,
+    "header": "Regulatory Compliance",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 50,
+    "header": "User Authentication System",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 51,
+    "header": "Data Analytics Framework",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 52,
+    "header": "Cloud Infrastructure",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 53,
+    "header": "Network Security Measures",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Lisa Wong"
+  },
+  {
+    "id": 54,
+    "header": "Project Timeline",
+    "type": "Planning",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 55,
+    "header": "Resource Allocation",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 56,
+    "header": "Team Structure and Roles",
+    "type": "Planning",
+    "status": "Done",
+    "target": "20",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 57,
+    "header": "Communication Protocols",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 58,
+    "header": "Success Metrics",
+    "type": "Planning",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 59,
+    "header": "Internationalization Support",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 60,
+    "header": "Backup and Recovery Procedures",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 61,
+    "header": "Monitoring and Alerting System",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Daniel Park"
+  },
+  {
+    "id": 62,
+    "header": "Code Review Guidelines",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "12",
+    "limit": "15",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 63,
+    "header": "Documentation Standards",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 64,
+    "header": "Release Management Process",
+    "type": "Planning",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 65,
+    "header": "Feature Prioritization Matrix",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Emma Davis"
+  },
+  {
+    "id": 66,
+    "header": "Technical Debt Assessment",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 67,
+    "header": "Capacity Planning",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 68,
+    "header": "Service Level Agreements",
+    "type": "Legal",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Assign reviewer"
+  }
+]
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/page.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/page.tsx
new file mode 100644
index 00000000000..c936e0c06da
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/page.tsx
@@ -0,0 +1,40 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/dashboard-01/components/app-sidebar"
+import { ChartAreaInteractive } from "@/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive"
+import { DataTable } from "@/registry/new-york-v4/blocks/dashboard-01/components/data-table"
+import { SectionCards } from "@/registry/new-york-v4/blocks/dashboard-01/components/section-cards"
+import { SiteHeader } from "@/registry/new-york-v4/blocks/dashboard-01/components/site-header"
+import {
+  SidebarInset,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+import data from "./data.json"
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 72)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+              <SectionCards />
+              <div className="px-4 lg:px-6">
+                <ChartAreaInteractive />
+              </div>
+              <DataTable data={data} />
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/login-01/components/login-form.tsx b/apps/v4/registry/new-york-v4/blocks/login-01/components/login-form.tsx
new file mode 100644
index 00000000000..b3bce636635
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/login-01/components/login-form.tsx
@@ -0,0 +1,70 @@
+import { cn } from "@/registry/new-york-v4/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle>Login to your account</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-3">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+                />
+              </div>
+              <div className="grid gap-3">
+                <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>
+              <div className="flex flex-col gap-3">
+                <Button type="submit" className="w-full">
+                  Login
+                </Button>
+                <Button variant="outline" className="w-full">
+                  Login with Google
+                </Button>
+              </div>
+            </div>
+            <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>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/login-01/page.tsx b/apps/v4/registry/new-york-v4/blocks/login-01/page.tsx
new file mode 100644
index 00000000000..88eb8bde6f2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/login-01/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york-v4/blocks/login-01/components/login-form"
+
+export default function Page() {
+  return (
+    <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>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/login-02/components/login-form.tsx b/apps/v4/registry/new-york-v4/blocks/login-02/components/login-form.tsx
new file mode 100644
index 00000000000..fa01c733860
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/login-02/components/login-form.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@/registry/new-york-v4/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"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-muted-foreground text-sm text-balance">
+          Enter your email below to login to your account
+        </p>
+      </div>
+      <div className="grid gap-6">
+        <div className="grid gap-3">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" required />
+        </div>
+        <div className="grid gap-3">
+          <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="after:border-border 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">
+          <span className="bg-background text-muted-foreground relative z-10 px-2">
+            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>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/login-02/page.tsx b/apps/v4/registry/new-york-v4/blocks/login-02/page.tsx
new file mode 100644
index 00000000000..e260bcd3ea7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/login-02/page.tsx
@@ -0,0 +1,32 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york-v4/blocks/login-02/components/login-form"
+
+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="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+              <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="bg-muted relative hidden 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>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/login-03/components/login-form.tsx b/apps/v4/registry/new-york-v4/blocks/login-03/components/login-form.tsx
new file mode 100644
index 00000000000..e80b0f0d0d8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/login-03/components/login-form.tsx
@@ -0,0 +1,96 @@
+import { cn } from "@/registry/new-york-v4/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"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="after:border-border 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">
+                <span className="bg-card text-muted-foreground relative z-10 px-2">
+                  Or continue with
+                </span>
+              </div>
+              <div className="grid gap-6">
+                <div className="grid gap-3">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="m@example.com"
+                    required
+                  />
+                </div>
+                <div className="grid gap-3">
+                  <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-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+        and <a href="#">Privacy Policy</a>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/login-03/page.tsx b/apps/v4/registry/new-york-v4/blocks/login-03/page.tsx
new file mode 100644
index 00000000000..3c201cb9190
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/login-03/page.tsx
@@ -0,0 +1,19 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york-v4/blocks/login-03/components/login-form"
+
+export default function LoginPage() {
+  return (
+    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 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="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+            <GalleryVerticalEnd className="size-4" />
+          </div>
+          Acme Inc.
+        </a>
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/login-04/components/login-form.tsx b/apps/v4/registry/new-york-v4/blocks/login-04/components/login-form.tsx
new file mode 100644
index 00000000000..4fe5789b5aa
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/login-04/components/login-form.tsx
@@ -0,0 +1,104 @@
+import { cn } from "@/registry/new-york-v4/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/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 p-0">
+        <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-muted-foreground text-balance">
+                  Login to your Acme Inc account
+                </p>
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+                />
+              </div>
+              <div className="grid gap-3">
+                <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="after:border-border 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">
+                <span className="bg-card text-muted-foreground relative z-10 px-2">
+                  Or continue with
+                </span>
+              </div>
+              <div className="grid grid-cols-3 gap-4">
+                <Button variant="outline" type="button" 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" type="button" 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" type="button" 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="bg-muted relative hidden 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-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+        and <a href="#">Privacy Policy</a>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/login-04/page.tsx b/apps/v4/registry/new-york-v4/blocks/login-04/page.tsx
new file mode 100644
index 00000000000..e014af15fea
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/login-04/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york-v4/blocks/login-04/components/login-form"
+
+export default function LoginPage() {
+  return (
+    <div className="bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-3xl">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/login-05/components/login-form.tsx b/apps/v4/registry/new-york-v4/blocks/login-05/components/login-form.tsx
new file mode 100644
index 00000000000..61307747c74
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/login-05/components/login-form.tsx
@@ -0,0 +1,81 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { cn } from "@/registry/new-york-v4/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"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 size-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-3">
+              <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="after:border-border 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">
+            <span className="bg-background text-muted-foreground relative z-10 px-2">
+              Or
+            </span>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <Button variant="outline" type="button" 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" type="button" 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-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+        and <a href="#">Privacy Policy</a>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/login-05/page.tsx b/apps/v4/registry/new-york-v4/blocks/login-05/page.tsx
new file mode 100644
index 00000000000..af237a27266
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/login-05/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york-v4/blocks/login-05/components/login-form"
+
+export default function LoginPage() {
+  return (
+    <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/products-01/components/products-table.tsx b/apps/v4/registry/new-york-v4/blocks/products-01/components/products-table.tsx
new file mode 100644
index 00000000000..06117b03f0e
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/products-01/components/products-table.tsx
@@ -0,0 +1,209 @@
+import {
+  ArrowUpDownIcon,
+  EllipsisVerticalIcon,
+  ListFilterIcon,
+  PlusIcon,
+} from "lucide-react"
+
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/registry/new-york-v4/ui/pagination"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york-v4/ui/table"
+import { Tabs, TabsList, TabsTrigger } from "@/registry/new-york-v4/ui/tabs"
+
+export function ProductsTable({
+  products,
+}: {
+  products: {
+    id: string
+    name: string
+    price: number
+    stock: number
+    dateAdded: string
+    status: string
+  }[]
+}) {
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <div className="flex items-center justify-between gap-4">
+        <Tabs defaultValue="all">
+          <TabsList>
+            <TabsTrigger value="all">All Products</TabsTrigger>
+            <TabsTrigger value="in-stock">In Stock</TabsTrigger>
+            <TabsTrigger value="low-stock">Low Stock</TabsTrigger>
+            <TabsTrigger value="archived">Archived</TabsTrigger>
+            <TabsTrigger value="add-product" asChild>
+              <button>
+                <PlusIcon />
+              </button>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <div className="flex items-center gap-2 **:data-[slot=button]:size-8 **:data-[slot=select-trigger]:h-8">
+          <Select defaultValue="all">
+            <SelectTrigger>
+              <span className="text-muted-foreground text-sm">Category:</span>
+              <SelectValue placeholder="Select a product" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All</SelectItem>
+              <SelectItem value="in-stock">In Stock</SelectItem>
+              <SelectItem value="low-stock">Low Stock</SelectItem>
+              <SelectItem value="archived">Archived</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select defaultValue="all">
+            <SelectTrigger>
+              <span className="text-muted-foreground text-sm">Price:</span>
+              <SelectValue placeholder="Select a product" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">$100-$200</SelectItem>
+              <SelectItem value="in-stock">$200-$300</SelectItem>
+              <SelectItem value="low-stock">$300-$400</SelectItem>
+              <SelectItem value="archived">$400-$500</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select defaultValue="all">
+            <SelectTrigger>
+              <span className="text-muted-foreground text-sm">Status:</span>
+              <SelectValue placeholder="Select a product" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">In Stock</SelectItem>
+              <SelectItem value="in-stock">Low Stock</SelectItem>
+              <SelectItem value="low-stock">Archived</SelectItem>
+              <SelectItem value="archived">Archived</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon">
+            <ListFilterIcon />
+          </Button>
+          <Button variant="outline" size="icon">
+            <ArrowUpDownIcon />
+          </Button>
+        </div>
+      </div>
+      <div className="rounded-lg">
+        <Table>
+          <TableHeader className="bg-muted/50">
+            <TableRow className="!border-0">
+              <TableHead className="w-12 rounded-l-lg px-4">
+                <Checkbox />
+              </TableHead>
+              <TableHead>Product</TableHead>
+              <TableHead className="text-right">Price</TableHead>
+              <TableHead className="text-right">Stock</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Date Added</TableHead>
+              <TableHead className="rounded-r-lg" />
+            </TableRow>
+          </TableHeader>
+          <TableBody className="**:data-[slot=table-cell]:py-2.5">
+            {products.map((product) => (
+              <TableRow key={product.id}>
+                <TableCell className="px-4">
+                  <Checkbox />
+                </TableCell>
+                <TableCell className="font-medium">{product.name}</TableCell>
+                <TableCell className="text-right">
+                  ${product.price.toFixed(2)}
+                </TableCell>
+                <TableCell className="text-right">{product.stock}</TableCell>
+                <TableCell>
+                  <Badge
+                    variant="secondary"
+                    className={
+                      product.status === "Low Stock"
+                        ? "border-orange-500 bg-transparent text-orange-500 dark:border-orange-500 dark:bg-transparent dark:text-orange-500"
+                        : "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100"
+                    }
+                  >
+                    {product.status}
+                  </Badge>
+                </TableCell>
+                <TableCell>
+                  {new Date(product.dateAdded).toLocaleDateString("en-US", {
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric",
+                  })}
+                </TableCell>
+                <TableCell>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" className="size-6">
+                        <EllipsisVerticalIcon />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem>Edit</DropdownMenuItem>
+                      <DropdownMenuItem variant="destructive">
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex justify-end">
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#" />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" isActive>
+                2
+              </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">3</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#" />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/products-01/page.tsx b/apps/v4/registry/new-york-v4/blocks/products-01/page.tsx
new file mode 100644
index 00000000000..bd780f0bb87
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/products-01/page.tsx
@@ -0,0 +1,173 @@
+import { ProductsTable } from "@/registry/new-york-v4/blocks/products-01/components/products-table"
+
+// Load from database.
+const products = [
+  {
+    id: "1",
+    name: "BJÖRKSNÄS Dining Table",
+    price: 599.99,
+    stock: 12,
+    dateAdded: "2023-06-15",
+    status: "In Stock",
+  },
+  {
+    id: "2",
+    name: "POÄNG Armchair",
+    price: 249.99,
+    stock: 28,
+    dateAdded: "2023-07-22",
+    status: "In Stock",
+  },
+  {
+    id: "3",
+    name: "MALM Bed Frame",
+    price: 399.99,
+    stock: 15,
+    dateAdded: "2023-08-05",
+    status: "In Stock",
+  },
+  {
+    id: "4",
+    name: "KALLAX Shelf Unit",
+    price: 179.99,
+    stock: 32,
+    dateAdded: "2023-09-12",
+    status: "In Stock",
+  },
+  {
+    id: "5",
+    name: "STOCKHOLM Rug",
+    price: 299.99,
+    stock: 8,
+    dateAdded: "2023-10-18",
+    status: "Low Stock",
+  },
+  {
+    id: "6",
+    name: "KIVIK Sofa",
+    price: 899.99,
+    stock: 6,
+    dateAdded: "2023-11-02",
+    status: "Low Stock",
+  },
+  {
+    id: "7",
+    name: "LISABO Coffee Table",
+    price: 149.99,
+    stock: 22,
+    dateAdded: "2023-11-29",
+    status: "In Stock",
+  },
+  {
+    id: "8",
+    name: "HEMNES Bookcase",
+    price: 249.99,
+    stock: 17,
+    dateAdded: "2023-12-10",
+    status: "In Stock",
+  },
+  {
+    id: "9",
+    name: "EKEDALEN Dining Chairs (Set of 2)",
+    price: 199.99,
+    stock: 14,
+    dateAdded: "2024-01-05",
+    status: "In Stock",
+  },
+  {
+    id: "10",
+    name: "FRIHETEN Sleeper Sofa",
+    price: 799.99,
+    stock: 9,
+    dateAdded: "2024-01-18",
+    status: "Low Stock",
+  },
+  {
+    id: "11",
+    name: "NORDEN Extendable Table",
+    price: 499.99,
+    stock: 11,
+    dateAdded: "2024-01-25",
+    status: "In Stock",
+  },
+  {
+    id: "12",
+    name: "BILLY Bookcase",
+    price: 129.99,
+    stock: 42,
+    dateAdded: "2024-02-03",
+    status: "In Stock",
+  },
+  {
+    id: "13",
+    name: "STRANDMON Wing Chair",
+    price: 349.99,
+    stock: 16,
+    dateAdded: "2024-02-12",
+    status: "In Stock",
+  },
+  {
+    id: "14",
+    name: "MALM Dresser",
+    price: 279.99,
+    stock: 19,
+    dateAdded: "2024-02-27",
+    status: "In Stock",
+  },
+  {
+    id: "15",
+    name: "BRIMNES TV Unit",
+    price: 149.99,
+    stock: 23,
+    dateAdded: "2024-03-08",
+    status: "In Stock",
+  },
+  {
+    id: "16",
+    name: "SÖDERHAMN Sectional Sofa",
+    price: 1299.99,
+    stock: 5,
+    dateAdded: "2024-03-15",
+    status: "Low Stock",
+  },
+  {
+    id: "17",
+    name: "BEKANT Desk",
+    price: 249.99,
+    stock: 18,
+    dateAdded: "2024-03-22",
+    status: "In Stock",
+  },
+  {
+    id: "18",
+    name: "IVAR Storage System",
+    price: 199.99,
+    stock: 14,
+    dateAdded: "2024-04-01",
+    status: "In Stock",
+  },
+  {
+    id: "19",
+    name: "RIBBA Picture Frame Set",
+    price: 49.99,
+    stock: 36,
+    dateAdded: "2024-04-09",
+    status: "In Stock",
+  },
+  {
+    id: "20",
+    name: "EKTORP Loveseat",
+    price: 499.99,
+    stock: 12,
+    dateAdded: "2024-04-15",
+    status: "In Stock",
+  },
+]
+
+export default function ProductsPage() {
+  return (
+    <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
+      <ProductsTable products={products} />
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/app-sidebar.tsx
new file mode 100644
index 00000000000..fdcc8a01a3c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/app-sidebar.tsx
@@ -0,0 +1,182 @@
+import * as React from "react"
+
+import { SearchForm } from "@/registry/new-york-v4/blocks/sidebar-01/components/search-form"
+import { VersionSwitcher } from "@/registry/new-york-v4/blocks/sidebar-01/components/version-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <VersionSwitcher
+          versions={data.versions}
+          defaultVersion={data.versions[0]}
+        />
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent>
+        {/* We create a SidebarGroup for each parent. */}
+        {data.navMain.map((item) => (
+          <SidebarGroup key={item.title}>
+            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {item.items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild isActive={item.isActive}>
+                      <a href={item.url}>{item.title}</a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/search-form.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/search-form.tsx
new file mode 100644
index 00000000000..ec4ac46ebe2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <SidebarInput
+            id="search"
+            placeholder="Search the docs..."
+            className="pl-8"
+          />
+          <Search className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx
new file mode 100644
index 00000000000..29601dba7aa
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function VersionSwitcher({
+  versions,
+  defaultVersion,
+}: {
+  versions: string[]
+  defaultVersion: string
+}) {
+  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <GalleryVerticalEnd className="size-4" />
+              </div>
+              <div className="flex flex-col gap-0.5 leading-none">
+                <span className="font-medium">Documentation</span>
+                <span className="">v{selectedVersion}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width)"
+            align="start"
+          >
+            {versions.map((version) => (
+              <DropdownMenuItem
+                key={version}
+                onSelect={() => setSelectedVersion(version)}
+              >
+                v{version}{" "}
+                {version === selectedVersion && <Check className="ml-auto" />}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-01/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000000..c963e46ec9c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-01/page.tsx
@@ -0,0 +1,53 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-01/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator
+            orientation="vertical"
+            className="mr-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx
new file mode 100644
index 00000000000..5bf206338e1
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx
@@ -0,0 +1,215 @@
+import * as React from "react"
+import { ChevronRight } from "lucide-react"
+
+import { SearchForm } from "@/registry/new-york-v4/blocks/sidebar-02/components/search-form"
+import { VersionSwitcher } from "@/registry/new-york-v4/blocks/sidebar-02/components/version-switcher"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <VersionSwitcher
+          versions={data.versions}
+          defaultVersion={data.versions[0]}
+        />
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="gap-0">
+        {/* We create a collapsible SidebarGroup for each parent. */}
+        {data.navMain.map((item) => (
+          <Collapsible
+            key={item.title}
+            title={item.title}
+            defaultOpen
+            className="group/collapsible"
+          >
+            <SidebarGroup>
+              <SidebarGroupLabel
+                asChild
+                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
+              >
+                <CollapsibleTrigger>
+                  {item.title}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {item.items.map((item) => (
+                      <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton asChild isActive={item.isActive}>
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        ))}
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/search-form.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/search-form.tsx
new file mode 100644
index 00000000000..ec4ac46ebe2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <SidebarInput
+            id="search"
+            placeholder="Search the docs..."
+            className="pl-8"
+          />
+          <Search className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx
new file mode 100644
index 00000000000..29601dba7aa
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function VersionSwitcher({
+  versions,
+  defaultVersion,
+}: {
+  versions: string[]
+  defaultVersion: string
+}) {
+  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <GalleryVerticalEnd className="size-4" />
+              </div>
+              <div className="flex flex-col gap-0.5 leading-none">
+                <span className="font-medium">Documentation</span>
+                <span className="">v{selectedVersion}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width)"
+            align="start"
+          >
+            {versions.map((version) => (
+              <DropdownMenuItem
+                key={version}
+                onSelect={() => setSelectedVersion(version)}
+              >
+                v{version}{" "}
+                {version === selectedVersion && <Check className="ml-auto" />}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-02/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000000..1a6cbe801df
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-02/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx
new file mode 100644
index 00000000000..dfd8fdc788b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx
@@ -0,0 +1,208 @@
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-medium">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu>
+            {data.navMain.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild>
+                  <a href={item.url} className="font-medium">
+                    {item.title}
+                  </a>
+                </SidebarMenuButton>
+                {item.items?.length ? (
+                  <SidebarMenuSub>
+                    {item.items.map((item) => (
+                      <SidebarMenuSubItem key={item.title}>
+                        <SidebarMenuSubButton asChild isActive={item.isActive}>
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                ) : null}
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-03/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000000..73764d20e83
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-03/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+          <div className="flex items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx
new file mode 100644
index 00000000000..378be05e310
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx
@@ -0,0 +1,206 @@
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar variant="floating" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-medium">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu className="gap-2">
+            {data.navMain.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild>
+                  <a href={item.url} className="font-medium">
+                    {item.title}
+                  </a>
+                </SidebarMenuButton>
+                {item.items?.length ? (
+                  <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
+                    {item.items.map((item) => (
+                      <SidebarMenuSubItem key={item.title}>
+                        <SidebarMenuSubButton asChild isActive={item.isActive}>
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                ) : null}
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-04/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000000..3391d52210a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-04/page.tsx
@@ -0,0 +1,59 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "19rem",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator
+            orientation="vertical"
+            className="mr-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx
new file mode 100644
index 00000000000..11ce07e26d8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx
@@ -0,0 +1,228 @@
+import * as React from "react"
+import { GalleryVerticalEnd, Minus, Plus } from "lucide-react"
+
+import { SearchForm } from "@/registry/new-york-v4/blocks/sidebar-05/components/search-form"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-medium">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu>
+            {data.navMain.map((item, index) => (
+              <Collapsible
+                key={item.title}
+                defaultOpen={index === 1}
+                className="group/collapsible"
+              >
+                <SidebarMenuItem>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuButton>
+                      {item.title}{" "}
+                      <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                      <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  {item.items?.length ? (
+                    <CollapsibleContent>
+                      <SidebarMenuSub>
+                        {item.items.map((item) => (
+                          <SidebarMenuSubItem key={item.title}>
+                            <SidebarMenuSubButton
+                              asChild
+                              isActive={item.isActive}
+                            >
+                              <a href={item.url}>{item.title}</a>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        ))}
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  ) : null}
+                </SidebarMenuItem>
+              </Collapsible>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-05/components/search-form.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-05/components/search-form.tsx
new file mode 100644
index 00000000000..ec4ac46ebe2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-05/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <SidebarInput
+            id="search"
+            placeholder="Search the docs..."
+            className="pl-8"
+          />
+          <Search className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-05/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000000..e557db0a536
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-05/page.tsx
@@ -0,0 +1,53 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator
+            orientation="vertical"
+            className="mr-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx
new file mode 100644
index 00000000000..6a734e06faf
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx
@@ -0,0 +1,179 @@
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { NavMain } from "@/registry/new-york-v4/blocks/sidebar-06/components/nav-main"
+import { SidebarOptInForm } from "@/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-medium">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+      </SidebarContent>
+      <SidebarFooter>
+        <div className="p-1">
+          <SidebarOptInForm />
+        </div>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/nav-main.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/nav-main.tsx
new file mode 100644
index 00000000000..cf40f37dfd2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/nav-main.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { MoreHorizontal, type LucideIcon } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup>
+      <SidebarMenu>
+        {items.map((item) => (
+          <DropdownMenu key={item.title}>
+            <SidebarMenuItem>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  {item.title} <MoreHorizontal className="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              {item.items?.length ? (
+                <DropdownMenuContent
+                  side={isMobile ? "bottom" : "right"}
+                  align={isMobile ? "end" : "start"}
+                  className="min-w-56 rounded-lg"
+                >
+                  {item.items.map((item) => (
+                    <DropdownMenuItem asChild key={item.title}>
+                      <a href={item.url}>{item.title}</a>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              ) : null}
+            </SidebarMenuItem>
+          </DropdownMenu>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
new file mode 100644
index 00000000000..8d335900ef8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { SidebarInput } from "@/registry/new-york-v4/ui/sidebar"
+
+export function SidebarOptInForm() {
+  return (
+    <Card className="gap-2 py-4 shadow-none">
+      <CardHeader className="px-4">
+        <CardTitle className="text-sm">Subscribe to our newsletter</CardTitle>
+        <CardDescription>
+          Opt-in to receive updates and news about the sidebar.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="px-4">
+        <form>
+          <div className="grid gap-2.5">
+            <SidebarInput type="email" placeholder="Email" />
+            <Button
+              className="bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none"
+              size="sm"
+            >
+              Subscribe
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-06/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000000..3dafe5c4a4c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-06/page.tsx
@@ -0,0 +1,53 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator
+            orientation="vertical"
+            className="mr-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/app-sidebar.tsx
new file mode 100644
index 00000000000..165e79eb234
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  GalleryVerticalEnd,
+  Map,
+  PieChart,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { NavMain } from "@/registry/new-york-v4/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "@/registry/new-york-v4/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "@/registry/new-york-v4/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "@/registry/new-york-v4/blocks/sidebar-07/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: GalleryVerticalEnd,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/nav-main.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/nav-main.tsx
new file mode 100644
index 00000000000..25b99a8a0c3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/nav-main.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible
+            key={item.title}
+            asChild
+            defaultOpen={item.isActive}
+            className="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton tooltip={item.title}>
+                  {item.icon && <item.icon />}
+                  <span>{item.title}</span>
+                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  {item.items?.map((subItem) => (
+                    <SidebarMenuSubItem key={subItem.title}>
+                      <SidebarMenuSubButton asChild>
+                        <a href={subItem.url}>
+                          <span>{subItem.title}</span>
+                        </a>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/nav-projects.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/nav-projects.tsx
new file mode 100644
index 00000000000..e4d55c8a4d4
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  Forward,
+  MoreHorizontal,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Forward className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal className="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/nav-user.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/nav-user.tsx
new file mode 100644
index 00000000000..c3b9de977b3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx
new file mode 100644
index 00000000000..e5d43de4097
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <activeTeam.logo className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{activeTeam.name}</span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-muted-foreground text-xs">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-md border">
+                  <team.logo className="size-3.5 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
+                <Plus className="size-4" />
+              </div>
+              <div className="text-muted-foreground font-medium">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-07/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000000..5942a99fc09
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-07/page.tsx
@@ -0,0 +1,55 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-07/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator
+              orientation="vertical"
+              className="mr-2 data-[orientation=vertical]:h-4"
+            />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx
new file mode 100644
index 00000000000..8c07236f55d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import {
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  LifeBuoy,
+  Map,
+  PieChart,
+  Send,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { NavMain } from "@/registry/new-york-v4/blocks/sidebar-08/components/nav-main"
+import { NavProjects } from "@/registry/new-york-v4/blocks/sidebar-08/components/nav-projects"
+import { NavSecondary } from "@/registry/new-york-v4/blocks/sidebar-08/components/nav-secondary"
+import { NavUser } from "@/registry/new-york-v4/blocks/sidebar-08/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar variant="inset" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <Command className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">Acme Inc</span>
+                  <span className="truncate text-xs">Enterprise</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-main.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-main.tsx
new file mode 100644
index 00000000000..4ffa6b3fd51
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-main.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild tooltip={item.title}>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.items?.length ? (
+                <>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuAction className="data-[state=open]:rotate-90">
+                      <ChevronRight />
+                      <span className="sr-only">Toggle</span>
+                    </SidebarMenuAction>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.items?.map((subItem) => (
+                        <SidebarMenuSubItem key={subItem.title}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </>
+              ) : null}
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-projects.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-projects.tsx
new file mode 100644
index 00000000000..2c6d23a28ae
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  MoreHorizontal,
+  Share,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Share className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-secondary.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-secondary.tsx
new file mode 100644
index 00000000000..66924a12dc0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-secondary.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild size="sm">
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-user.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-user.tsx
new file mode 100644
index 00000000000..c3b9de977b3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-08/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000000..e432248b11c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-08/page.tsx
@@ -0,0 +1,55 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator
+              orientation="vertical"
+              className="mr-2 data-[orientation=vertical]:h-4"
+            />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx
new file mode 100644
index 00000000000..ce95b4f8e25
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { ArchiveX, Command, File, Inbox, Send, Trash2 } from "lucide-react"
+
+import { NavUser } from "@/registry/new-york-v4/blocks/sidebar-09/components/nav-user"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
+
+// This is sample data
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      isActive: true,
+    },
+    {
+      title: "Drafts",
+      url: "#",
+      icon: File,
+      isActive: false,
+    },
+    {
+      title: "Sent",
+      url: "#",
+      icon: Send,
+      isActive: false,
+    },
+    {
+      title: "Junk",
+      url: "#",
+      icon: ArchiveX,
+      isActive: false,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+      isActive: false,
+    },
+  ],
+  mails: [
+    {
+      name: "William Smith",
+      email: "williamsmith@example.com",
+      subject: "Meeting Tomorrow",
+      date: "09:34 AM",
+      teaser:
+        "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.",
+    },
+    {
+      name: "Alice Smith",
+      email: "alicesmith@example.com",
+      subject: "Re: Project Update",
+      date: "Yesterday",
+      teaser:
+        "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.",
+    },
+    {
+      name: "Bob Johnson",
+      email: "bobjohnson@example.com",
+      subject: "Weekend Plans",
+      date: "2 days ago",
+      teaser:
+        "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?",
+    },
+    {
+      name: "Emily Davis",
+      email: "emilydavis@example.com",
+      subject: "Re: Question about Budget",
+      date: "2 days ago",
+      teaser:
+        "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?",
+    },
+    {
+      name: "Michael Wilson",
+      email: "michaelwilson@example.com",
+      subject: "Important Announcement",
+      date: "1 week ago",
+      teaser:
+        "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.",
+    },
+    {
+      name: "Sarah Brown",
+      email: "sarahbrown@example.com",
+      subject: "Re: Feedback on Proposal",
+      date: "1 week ago",
+      teaser:
+        "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?",
+    },
+    {
+      name: "David Lee",
+      email: "davidlee@example.com",
+      subject: "New Project Idea",
+      date: "1 week ago",
+      teaser:
+        "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?",
+    },
+    {
+      name: "Olivia Wilson",
+      email: "oliviawilson@example.com",
+      subject: "Vacation Plans",
+      date: "1 week ago",
+      teaser:
+        "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.",
+    },
+    {
+      name: "James Martin",
+      email: "jamesmartin@example.com",
+      subject: "Re: Conference Registration",
+      date: "1 week ago",
+      teaser:
+        "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.",
+    },
+    {
+      name: "Sophia White",
+      email: "sophiawhite@example.com",
+      subject: "Team Dinner",
+      date: "1 week ago",
+      teaser:
+        "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.",
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  // Note: I'm using state to show active item.
+  // IRL you should use the url/router.
+  const [activeItem, setActiveItem] = React.useState(data.navMain[0])
+  const [mails, setMails] = React.useState(data.mails)
+  const { setOpen } = useSidebar()
+
+  return (
+    <Sidebar
+      collapsible="icon"
+      className="overflow-hidden *:data-[sidebar=sidebar]:flex-row"
+      {...props}
+    >
+      {/* This is the first sidebar */}
+      {/* We disable collapsible and adjust width to icon. */}
+      {/* This will make the sidebar appear as icons. */}
+      <Sidebar
+        collapsible="none"
+        className="w-[calc(var(--sidebar-width-icon)+1px)]! border-r"
+      >
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
+                <a href="#">
+                  <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                    <Command className="size-4" />
+                  </div>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-medium">Acme Inc</span>
+                    <span className="truncate text-xs">Enterprise</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent className="px-1.5 md:px-0">
+              <SidebarMenu>
+                {data.navMain.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton
+                      tooltip={{
+                        children: item.title,
+                        hidden: false,
+                      }}
+                      onClick={() => {
+                        setActiveItem(item)
+                        const mail = data.mails.sort(() => Math.random() - 0.5)
+                        setMails(
+                          mail.slice(
+                            0,
+                            Math.max(5, Math.floor(Math.random() * 10) + 1)
+                          )
+                        )
+                        setOpen(true)
+                      }}
+                      isActive={activeItem?.title === item.title}
+                      className="px-2.5 md:px-2"
+                    >
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <NavUser user={data.user} />
+        </SidebarFooter>
+      </Sidebar>
+
+      {/* This is the second sidebar */}
+      {/* We disable collapsible and let it fill remaining space */}
+      <Sidebar collapsible="none" className="hidden flex-1 md:flex">
+        <SidebarHeader className="gap-3.5 border-b p-4">
+          <div className="flex w-full items-center justify-between">
+            <div className="text-foreground text-base font-medium">
+              {activeItem?.title}
+            </div>
+            <Label className="flex items-center gap-2 text-sm">
+              <span>Unreads</span>
+              <Switch className="shadow-none" />
+            </Label>
+          </div>
+          <SidebarInput placeholder="Type to search..." />
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup className="px-0">
+            <SidebarGroupContent>
+              {mails.map((mail) => (
+                <a
+                  href="#"
+                  key={mail.email}
+                  className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0"
+                >
+                  <div className="flex w-full items-center gap-2">
+                    <span>{mail.name}</span>{" "}
+                    <span className="ml-auto text-xs">{mail.date}</span>
+                  </div>
+                  <span className="font-medium">{mail.subject}</span>
+                  <span className="line-clamp-2 w-[260px] text-xs whitespace-break-spaces">
+                    {mail.teaser}
+                  </span>
+                </a>
+              ))}
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-09/components/nav-user.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-09/components/nav-user.tsx
new file mode 100644
index 00000000000..62fbf618748
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-09/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-09/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000000..c4fd03139f4
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-09/page.tsx
@@ -0,0 +1,57 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "350px",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator
+            orientation="vertical"
+            className="mr-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Inbox</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/app-sidebar.tsx
new file mode 100644
index 00000000000..3334c2a32a0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/app-sidebar.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  Blocks,
+  Calendar,
+  Command,
+  Home,
+  Inbox,
+  MessageCircleQuestion,
+  Search,
+  Settings2,
+  Sparkles,
+  Trash2,
+} from "lucide-react"
+
+import { NavFavorites } from "@/registry/new-york-v4/blocks/sidebar-10/components/nav-favorites"
+import { NavMain } from "@/registry/new-york-v4/blocks/sidebar-10/components/nav-main"
+import { NavSecondary } from "@/registry/new-york-v4/blocks/sidebar-10/components/nav-secondary"
+import { NavWorkspaces } from "@/registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces"
+import { TeamSwitcher } from "@/registry/new-york-v4/blocks/sidebar-10/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: Command,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Search",
+      url: "#",
+      icon: Search,
+    },
+    {
+      title: "Ask AI",
+      url: "#",
+      icon: Sparkles,
+    },
+    {
+      title: "Home",
+      url: "#",
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      badge: "10",
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Calendar",
+      url: "#",
+      icon: Calendar,
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+    },
+    {
+      title: "Templates",
+      url: "#",
+      icon: Blocks,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+    },
+    {
+      title: "Help",
+      url: "#",
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: "Project Management & Task Tracking",
+      url: "#",
+      emoji: "📊",
+    },
+    {
+      name: "Family Recipe Collection & Meal Planning",
+      url: "#",
+      emoji: "🍳",
+    },
+    {
+      name: "Fitness Tracker & Workout Routines",
+      url: "#",
+      emoji: "💪",
+    },
+    {
+      name: "Book Notes & Reading List",
+      url: "#",
+      emoji: "📚",
+    },
+    {
+      name: "Sustainable Gardening Tips & Plant Care",
+      url: "#",
+      emoji: "🌱",
+    },
+    {
+      name: "Language Learning Progress & Resources",
+      url: "#",
+      emoji: "🗣️",
+    },
+    {
+      name: "Home Renovation Ideas & Budget Tracker",
+      url: "#",
+      emoji: "🏠",
+    },
+    {
+      name: "Personal Finance & Investment Portfolio",
+      url: "#",
+      emoji: "💰",
+    },
+    {
+      name: "Movie & TV Show Watchlist with Reviews",
+      url: "#",
+      emoji: "🎬",
+    },
+    {
+      name: "Daily Habit Tracker & Goal Setting",
+      url: "#",
+      emoji: "✅",
+    },
+  ],
+  workspaces: [
+    {
+      name: "Personal Life Management",
+      emoji: "🏠",
+      pages: [
+        {
+          name: "Daily Journal & Reflection",
+          url: "#",
+          emoji: "📔",
+        },
+        {
+          name: "Health & Wellness Tracker",
+          url: "#",
+          emoji: "🍏",
+        },
+        {
+          name: "Personal Growth & Learning Goals",
+          url: "#",
+          emoji: "🌟",
+        },
+      ],
+    },
+    {
+      name: "Professional Development",
+      emoji: "💼",
+      pages: [
+        {
+          name: "Career Objectives & Milestones",
+          url: "#",
+          emoji: "🎯",
+        },
+        {
+          name: "Skill Acquisition & Training Log",
+          url: "#",
+          emoji: "🧠",
+        },
+        {
+          name: "Networking Contacts & Events",
+          url: "#",
+          emoji: "🤝",
+        },
+      ],
+    },
+    {
+      name: "Creative Projects",
+      emoji: "🎨",
+      pages: [
+        {
+          name: "Writing Ideas & Story Outlines",
+          url: "#",
+          emoji: "✍️",
+        },
+        {
+          name: "Art & Design Portfolio",
+          url: "#",
+          emoji: "🖼️",
+        },
+        {
+          name: "Music Composition & Practice Log",
+          url: "#",
+          emoji: "🎵",
+        },
+      ],
+    },
+    {
+      name: "Home Management",
+      emoji: "🏡",
+      pages: [
+        {
+          name: "Household Budget & Expense Tracking",
+          url: "#",
+          emoji: "💰",
+        },
+        {
+          name: "Home Maintenance Schedule & Tasks",
+          url: "#",
+          emoji: "🔧",
+        },
+        {
+          name: "Family Calendar & Event Planning",
+          url: "#",
+          emoji: "📅",
+        },
+      ],
+    },
+    {
+      name: "Travel & Adventure",
+      emoji: "🧳",
+      pages: [
+        {
+          name: "Trip Planning & Itineraries",
+          url: "#",
+          emoji: "🗺️",
+        },
+        {
+          name: "Travel Bucket List & Inspiration",
+          url: "#",
+          emoji: "🌎",
+        },
+        {
+          name: "Travel Journal & Photo Gallery",
+          url: "#",
+          emoji: "📸",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar className="border-r-0" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+        <NavMain items={data.navMain} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavFavorites favorites={data.favorites} />
+        <NavWorkspaces workspaces={data.workspaces} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx
new file mode 100644
index 00000000000..146b8f825b1
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx
@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArrowDown,
+  ArrowUp,
+  Bell,
+  Copy,
+  CornerUpLeft,
+  CornerUpRight,
+  FileText,
+  GalleryVerticalEnd,
+  LineChart,
+  Link,
+  MoreHorizontal,
+  Settings2,
+  Star,
+  Trash,
+  Trash2,
+} from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const data = [
+  [
+    {
+      label: "Customize Page",
+      icon: Settings2,
+    },
+    {
+      label: "Turn into wiki",
+      icon: FileText,
+    },
+  ],
+  [
+    {
+      label: "Copy Link",
+      icon: Link,
+    },
+    {
+      label: "Duplicate",
+      icon: Copy,
+    },
+    {
+      label: "Move to",
+      icon: CornerUpRight,
+    },
+    {
+      label: "Move to Trash",
+      icon: Trash2,
+    },
+  ],
+  [
+    {
+      label: "Undo",
+      icon: CornerUpLeft,
+    },
+    {
+      label: "View analytics",
+      icon: LineChart,
+    },
+    {
+      label: "Version History",
+      icon: GalleryVerticalEnd,
+    },
+    {
+      label: "Show delete pages",
+      icon: Trash,
+    },
+    {
+      label: "Notifications",
+      icon: Bell,
+    },
+  ],
+  [
+    {
+      label: "Import",
+      icon: ArrowUp,
+    },
+    {
+      label: "Export",
+      icon: ArrowDown,
+    },
+  ],
+]
+
+export function NavActions() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsOpen(true)
+  }, [])
+
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      <div className="text-muted-foreground hidden font-medium md:inline-block">
+        Edit Oct 08
+      </div>
+      <Button variant="ghost" size="icon" className="h-7 w-7">
+        <Star />
+      </Button>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="data-[state=open]:bg-accent h-7 w-7"
+          >
+            <MoreHorizontal />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-56 overflow-hidden rounded-lg p-0"
+          align="end"
+        >
+          <Sidebar collapsible="none" className="bg-transparent">
+            <SidebarContent>
+              {data.map((group, index) => (
+                <SidebarGroup key={index} className="border-b last:border-none">
+                  <SidebarGroupContent className="gap-0">
+                    <SidebarMenu>
+                      {group.map((item, index) => (
+                        <SidebarMenuItem key={index}>
+                          <SidebarMenuButton>
+                            <item.icon /> <span>{item.label}</span>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              ))}
+            </SidebarContent>
+          </Sidebar>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-favorites.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-favorites.tsx
new file mode 100644
index 00000000000..1fb17fc10b8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-favorites.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import {
+  ArrowUpRight,
+  Link,
+  MoreHorizontal,
+  StarOff,
+  Trash2,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavFavorites({
+  favorites,
+}: {
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+      <SidebarMenu>
+        {favorites.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url} title={item.name}>
+                <span>{item.emoji}</span>
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-56 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <StarOff className="text-muted-foreground" />
+                  <span>Remove from Favorites</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link className="text-muted-foreground" />
+                  <span>Copy Link</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArrowUpRight className="text-muted-foreground" />
+                  <span>Open in New Tab</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-main.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-main.tsx
new file mode 100644
index 00000000000..742b3ce7f95
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-main.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton asChild isActive={item.isActive}>
+            <a href={item.url}>
+              <item.icon />
+              <span>{item.title}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-secondary.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-secondary.tsx
new file mode 100644
index 00000000000..901c63e89a3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-secondary.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: React.ReactNode
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx
new file mode 100644
index 00000000000..cf9bfa9aedf
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx
@@ -0,0 +1,85 @@
+import { ChevronRight, MoreHorizontal, Plus } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavWorkspaces({
+  workspaces,
+}: {
+  workspaces: {
+    name: string
+    emoji: React.ReactNode
+    pages: {
+      name: string
+      emoji: React.ReactNode
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {workspaces.map((workspace) => (
+            <Collapsible key={workspace.name}>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <span>{workspace.emoji}</span>
+                    <span>{workspace.name}</span>
+                  </a>
+                </SidebarMenuButton>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuAction
+                    className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90"
+                    showOnHover
+                  >
+                    <ChevronRight />
+                  </SidebarMenuAction>
+                </CollapsibleTrigger>
+                <SidebarMenuAction showOnHover>
+                  <Plus />
+                </SidebarMenuAction>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {workspace.pages.map((page) => (
+                      <SidebarMenuSubItem key={page.name}>
+                        <SidebarMenuSubButton asChild>
+                          <a href="#">
+                            <span>{page.emoji}</span>
+                            <span>{page.name}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ))}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="text-sidebar-foreground/70">
+              <MoreHorizontal />
+              <span>More</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx
new file mode 100644
index 00000000000..f7fd8e1f261
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className="w-fit px-1.5">
+              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
+                <activeTeam.logo className="size-3" />
+              </div>
+              <span className="truncate font-medium">{activeTeam.name}</span>
+              <ChevronDown className="opacity-50" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-64 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-muted-foreground text-xs">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-xs border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="bg-background flex size-6 items-center justify-center rounded-md border">
+                <Plus className="size-4" />
+              </div>
+              <div className="text-muted-foreground font-medium">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000000..777c747f792
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/page.tsx
@@ -0,0 +1,49 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-10/components/app-sidebar"
+import { NavActions } from "@/registry/new-york-v4/blocks/sidebar-10/components/nav-actions"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-14 shrink-0 items-center gap-2">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator
+              orientation="vertical"
+              className="mr-2 data-[orientation=vertical]:h-4"
+            />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+          <div className="ml-auto px-3">
+            <NavActions />
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+          <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
+          <div className="bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-11/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-11/components/app-sidebar.tsx
new file mode 100644
index 00000000000..a7aec0c157a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-11/components/app-sidebar.tsx
@@ -0,0 +1,141 @@
+import * as React from "react"
+import { ChevronRight, File, Folder } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarRail,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  changes: [
+    {
+      file: "README.md",
+      state: "M",
+    },
+    {
+      file: "api/hello/route.ts",
+      state: "U",
+    },
+    {
+      file: "app/layout.tsx",
+      state: "M",
+    },
+  ],
+  tree: [
+    [
+      "app",
+      [
+        "api",
+        ["hello", ["route.ts"]],
+        "page.tsx",
+        "layout.tsx",
+        ["blog", ["page.tsx"]],
+      ],
+    ],
+    [
+      "components",
+      ["ui", "button.tsx", "card.tsx"],
+      "header.tsx",
+      "footer.tsx",
+    ],
+    ["lib", ["util.ts"]],
+    ["public", "favicon.ico", "vercel.svg"],
+    ".eslintrc.json",
+    ".gitignore",
+    "next.config.js",
+    "tailwind.config.js",
+    "package.json",
+    "README.md",
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Changes</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.changes.map((item, index) => (
+                <SidebarMenuItem key={index}>
+                  <SidebarMenuButton>
+                    <File />
+                    {item.file}
+                  </SidebarMenuButton>
+                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Files</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.tree.map((item, index) => (
+                <Tree key={index} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function Tree({ item }: { item: string | any[] }) {
+  const [name, ...items] = Array.isArray(item) ? item : [item]
+
+  if (!items.length) {
+    return (
+      <SidebarMenuButton
+        isActive={name === "button.tsx"}
+        className="data-[active=true]:bg-transparent"
+      >
+        <File />
+        {name}
+      </SidebarMenuButton>
+    )
+  }
+
+  return (
+    <SidebarMenuItem>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen={name === "components" || name === "ui"}
+      >
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton>
+            <ChevronRight className="transition-transform" />
+            <Folder />
+            {name}
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {items.map((subItem, index) => (
+              <Tree key={index} item={subItem} />
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarMenuItem>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-11/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000000..91537b1940a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-11/page.tsx
@@ -0,0 +1,55 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-11/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator
+            orientation="vertical"
+            className="mr-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">components</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">ui</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>button.tsx</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx
new file mode 100644
index 00000000000..86f9f6965d1
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+
+import { Calendars } from "@/registry/new-york-v4/blocks/sidebar-12/components/calendars"
+import { DatePicker } from "@/registry/new-york-v4/blocks/sidebar-12/components/date-picker"
+import { NavUser } from "@/registry/new-york-v4/blocks/sidebar-12/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  calendars: [
+    {
+      name: "My Calendars",
+      items: ["Personal", "Work", "Family"],
+    },
+    {
+      name: "Favorites",
+      items: ["Holidays", "Birthdays"],
+    },
+    {
+      name: "Other",
+      items: ["Travel", "Reminders", "Deadlines"],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader className="border-sidebar-border h-16 border-b">
+        <NavUser user={data.user} />
+      </SidebarHeader>
+      <SidebarContent>
+        <DatePicker />
+        <SidebarSeparator className="mx-0" />
+        <Calendars calendars={data.calendars} />
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              <Plus />
+              <span>New Calendar</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx
new file mode 100644
index 00000000000..8b5e4954e64
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Check, ChevronRight } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function Calendars({
+  calendars,
+}: {
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}) {
+  return (
+    <>
+      {calendars.map((calendar, index) => (
+        <React.Fragment key={calendar.name}>
+          <SidebarGroup key={calendar.name} className="py-0">
+            <Collapsible
+              defaultOpen={index === 0}
+              className="group/collapsible"
+            >
+              <SidebarGroupLabel
+                asChild
+                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+              >
+                <CollapsibleTrigger>
+                  {calendar.name}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {calendar.items.map((item, index) => (
+                      <SidebarMenuItem key={item}>
+                        <SidebarMenuButton>
+                          <div
+                            data-active={index < 2}
+                            className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
+                          >
+                            <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                          </div>
+                          {item}
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </SidebarGroup>
+          <SidebarSeparator className="mx-0" />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx
new file mode 100644
index 00000000000..81c493ea2b0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx
@@ -0,0 +1,15 @@
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function DatePicker() {
+  return (
+    <SidebarGroup className="px-0">
+      <SidebarGroupContent>
+        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx
new file mode 100644
index 00000000000..8f40d2059c0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-12/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000000..eb594eb253a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-12/page.tsx
@@ -0,0 +1,44 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator
+            orientation="vertical"
+            className="mr-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbPage>October 2024</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+            {Array.from({ length: 20 }).map((_, i) => (
+              <div key={i} className="bg-muted/50 aspect-square rounded-xl" />
+            ))}
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx
new file mode 100644
index 00000000000..b408be0e2f0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import {
+  Bell,
+  Check,
+  Globe,
+  Home,
+  Keyboard,
+  Link,
+  Lock,
+  Menu,
+  MessageCircle,
+  Paintbrush,
+  Settings,
+  Video,
+} from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york-v4/ui/dialog"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const data = {
+  nav: [
+    { name: "Notifications", icon: Bell },
+    { name: "Navigation", icon: Menu },
+    { name: "Home", icon: Home },
+    { name: "Appearance", icon: Paintbrush },
+    { name: "Messages & media", icon: MessageCircle },
+    { name: "Language & region", icon: Globe },
+    { name: "Accessibility", icon: Keyboard },
+    { name: "Mark as read", icon: Check },
+    { name: "Audio & video", icon: Video },
+    { name: "Connected accounts", icon: Link },
+    { name: "Privacy & visibility", icon: Lock },
+    { name: "Advanced", icon: Settings },
+  ],
+}
+
+export function SettingsDialog() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+        <DialogTitle className="sr-only">Settings</DialogTitle>
+        <DialogDescription className="sr-only">
+          Customize your settings here.
+        </DialogDescription>
+        <SidebarProvider className="items-start">
+          <Sidebar collapsible="none" className="hidden md:flex">
+            <SidebarContent>
+              <SidebarGroup>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {data.nav.map((item) => (
+                      <SidebarMenuItem key={item.name}>
+                        <SidebarMenuButton
+                          asChild
+                          isActive={item.name === "Messages & media"}
+                        >
+                          <a href="#">
+                            <item.icon />
+                            <span>{item.name}</span>
+                          </a>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            </SidebarContent>
+          </Sidebar>
+          <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+              <div className="flex items-center gap-2 px-4">
+                <Breadcrumb>
+                  <BreadcrumbList>
+                    <BreadcrumbItem className="hidden md:block">
+                      <BreadcrumbLink href="#">Settings</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator className="hidden md:block" />
+                    <BreadcrumbItem>
+                      <BreadcrumbPage>Messages & media</BreadcrumbPage>
+                    </BreadcrumbItem>
+                  </BreadcrumbList>
+                </Breadcrumb>
+              </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+              {Array.from({ length: 10 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="bg-muted/50 aspect-video max-w-3xl rounded-xl"
+                />
+              ))}
+            </div>
+          </main>
+        </SidebarProvider>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-13/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000000..fc2bd2dff2e
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-13/page.tsx
@@ -0,0 +1,9 @@
+import { SettingsDialog } from "@/registry/new-york-v4/blocks/sidebar-13/components/settings-dialog"
+
+export default function Page() {
+  return (
+    <div className="flex h-svh items-center justify-center">
+      <SettingsDialog />
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-14/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-14/components/app-sidebar.tsx
new file mode 100644
index 00000000000..56a8db36663
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-14/components/app-sidebar.tsx
@@ -0,0 +1,197 @@
+import * as React from "react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url} className="font-medium">
+                      {item.title}
+                    </a>
+                  </SidebarMenuButton>
+                  {item.items?.length ? (
+                    <SidebarMenuSub>
+                      {item.items.map((item) => (
+                        <SidebarMenuSubItem key={item.title}>
+                          <SidebarMenuSubButton
+                            asChild
+                            isActive={item.isActive}
+                          >
+                            <a href={item.url}>{item.title}</a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  ) : null}
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-14/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000000..90872e74eec
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-14/page.tsx
@@ -0,0 +1,48 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-14/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+      <AppSidebar side="right" />
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx
new file mode 100644
index 00000000000..3d1b7eb35ee
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Check, ChevronRight } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function Calendars({
+  calendars,
+}: {
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}) {
+  return (
+    <>
+      {calendars.map((calendar, index) => (
+        <React.Fragment key={calendar.name}>
+          <SidebarGroup key={calendar.name} className="py-0">
+            <Collapsible
+              defaultOpen={index === 0}
+              className="group/collapsible"
+            >
+              <SidebarGroupLabel
+                asChild
+                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+              >
+                <CollapsibleTrigger>
+                  {calendar.name}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {calendar.items.map((item, index) => (
+                      <SidebarMenuItem key={item}>
+                        <SidebarMenuButton>
+                          <div
+                            data-active={index < 2}
+                            className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border"
+                          >
+                            <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                          </div>
+                          {item}
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </SidebarGroup>
+          <SidebarSeparator className="mx-0" />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx
new file mode 100644
index 00000000000..81c493ea2b0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx
@@ -0,0 +1,15 @@
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function DatePicker() {
+  return (
+    <SidebarGroup className="px-0">
+      <SidebarGroupContent>
+        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-favorites.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-favorites.tsx
new file mode 100644
index 00000000000..1fb17fc10b8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-favorites.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import {
+  ArrowUpRight,
+  Link,
+  MoreHorizontal,
+  StarOff,
+  Trash2,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavFavorites({
+  favorites,
+}: {
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+      <SidebarMenu>
+        {favorites.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url} title={item.name}>
+                <span>{item.emoji}</span>
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-56 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <StarOff className="text-muted-foreground" />
+                  <span>Remove from Favorites</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link className="text-muted-foreground" />
+                  <span>Copy Link</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArrowUpRight className="text-muted-foreground" />
+                  <span>Open in New Tab</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-main.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-main.tsx
new file mode 100644
index 00000000000..742b3ce7f95
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-main.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton asChild isActive={item.isActive}>
+            <a href={item.url}>
+              <item.icon />
+              <span>{item.title}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-secondary.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-secondary.tsx
new file mode 100644
index 00000000000..901c63e89a3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-secondary.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: React.ReactNode
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx
new file mode 100644
index 00000000000..8f40d2059c0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx
new file mode 100644
index 00000000000..cf9bfa9aedf
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx
@@ -0,0 +1,85 @@
+import { ChevronRight, MoreHorizontal, Plus } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavWorkspaces({
+  workspaces,
+}: {
+  workspaces: {
+    name: string
+    emoji: React.ReactNode
+    pages: {
+      name: string
+      emoji: React.ReactNode
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {workspaces.map((workspace) => (
+            <Collapsible key={workspace.name}>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <span>{workspace.emoji}</span>
+                    <span>{workspace.name}</span>
+                  </a>
+                </SidebarMenuButton>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuAction
+                    className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90"
+                    showOnHover
+                  >
+                    <ChevronRight />
+                  </SidebarMenuAction>
+                </CollapsibleTrigger>
+                <SidebarMenuAction showOnHover>
+                  <Plus />
+                </SidebarMenuAction>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {workspace.pages.map((page) => (
+                      <SidebarMenuSubItem key={page.name}>
+                        <SidebarMenuSubButton asChild>
+                          <a href="#">
+                            <span>{page.emoji}</span>
+                            <span>{page.name}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ))}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="text-sidebar-foreground/70">
+              <MoreHorizontal />
+              <span>More</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/sidebar-left.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/sidebar-left.tsx
new file mode 100644
index 00000000000..9f3bad49f02
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/sidebar-left.tsx
@@ -0,0 +1,278 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  Blocks,
+  Calendar,
+  Command,
+  Home,
+  Inbox,
+  MessageCircleQuestion,
+  Search,
+  Settings2,
+  Sparkles,
+  Trash2,
+} from "lucide-react"
+
+import { NavFavorites } from "@/registry/new-york-v4/blocks/sidebar-15/components/nav-favorites"
+import { NavMain } from "@/registry/new-york-v4/blocks/sidebar-15/components/nav-main"
+import { NavSecondary } from "@/registry/new-york-v4/blocks/sidebar-15/components/nav-secondary"
+import { NavWorkspaces } from "@/registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces"
+import { TeamSwitcher } from "@/registry/new-york-v4/blocks/sidebar-15/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: Command,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Search",
+      url: "#",
+      icon: Search,
+    },
+    {
+      title: "Ask AI",
+      url: "#",
+      icon: Sparkles,
+    },
+    {
+      title: "Home",
+      url: "#",
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      badge: "10",
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Calendar",
+      url: "#",
+      icon: Calendar,
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+    },
+    {
+      title: "Templates",
+      url: "#",
+      icon: Blocks,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+    },
+    {
+      title: "Help",
+      url: "#",
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: "Project Management & Task Tracking",
+      url: "#",
+      emoji: "📊",
+    },
+    {
+      name: "Family Recipe Collection & Meal Planning",
+      url: "#",
+      emoji: "🍳",
+    },
+    {
+      name: "Fitness Tracker & Workout Routines",
+      url: "#",
+      emoji: "💪",
+    },
+    {
+      name: "Book Notes & Reading List",
+      url: "#",
+      emoji: "📚",
+    },
+    {
+      name: "Sustainable Gardening Tips & Plant Care",
+      url: "#",
+      emoji: "🌱",
+    },
+    {
+      name: "Language Learning Progress & Resources",
+      url: "#",
+      emoji: "🗣️",
+    },
+    {
+      name: "Home Renovation Ideas & Budget Tracker",
+      url: "#",
+      emoji: "🏠",
+    },
+    {
+      name: "Personal Finance & Investment Portfolio",
+      url: "#",
+      emoji: "💰",
+    },
+    {
+      name: "Movie & TV Show Watchlist with Reviews",
+      url: "#",
+      emoji: "🎬",
+    },
+    {
+      name: "Daily Habit Tracker & Goal Setting",
+      url: "#",
+      emoji: "✅",
+    },
+  ],
+  workspaces: [
+    {
+      name: "Personal Life Management",
+      emoji: "🏠",
+      pages: [
+        {
+          name: "Daily Journal & Reflection",
+          url: "#",
+          emoji: "📔",
+        },
+        {
+          name: "Health & Wellness Tracker",
+          url: "#",
+          emoji: "🍏",
+        },
+        {
+          name: "Personal Growth & Learning Goals",
+          url: "#",
+          emoji: "🌟",
+        },
+      ],
+    },
+    {
+      name: "Professional Development",
+      emoji: "💼",
+      pages: [
+        {
+          name: "Career Objectives & Milestones",
+          url: "#",
+          emoji: "🎯",
+        },
+        {
+          name: "Skill Acquisition & Training Log",
+          url: "#",
+          emoji: "🧠",
+        },
+        {
+          name: "Networking Contacts & Events",
+          url: "#",
+          emoji: "🤝",
+        },
+      ],
+    },
+    {
+      name: "Creative Projects",
+      emoji: "🎨",
+      pages: [
+        {
+          name: "Writing Ideas & Story Outlines",
+          url: "#",
+          emoji: "✍️",
+        },
+        {
+          name: "Art & Design Portfolio",
+          url: "#",
+          emoji: "🖼️",
+        },
+        {
+          name: "Music Composition & Practice Log",
+          url: "#",
+          emoji: "🎵",
+        },
+      ],
+    },
+    {
+      name: "Home Management",
+      emoji: "🏡",
+      pages: [
+        {
+          name: "Household Budget & Expense Tracking",
+          url: "#",
+          emoji: "💰",
+        },
+        {
+          name: "Home Maintenance Schedule & Tasks",
+          url: "#",
+          emoji: "🔧",
+        },
+        {
+          name: "Family Calendar & Event Planning",
+          url: "#",
+          emoji: "📅",
+        },
+      ],
+    },
+    {
+      name: "Travel & Adventure",
+      emoji: "🧳",
+      pages: [
+        {
+          name: "Trip Planning & Itineraries",
+          url: "#",
+          emoji: "🗺️",
+        },
+        {
+          name: "Travel Bucket List & Inspiration",
+          url: "#",
+          emoji: "🌎",
+        },
+        {
+          name: "Travel Journal & Photo Gallery",
+          url: "#",
+          emoji: "📸",
+        },
+      ],
+    },
+  ],
+}
+
+export function SidebarLeft({
+  ...props
+}: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar className="border-r-0" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+        <NavMain items={data.navMain} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavFavorites favorites={data.favorites} />
+        <NavWorkspaces workspaces={data.workspaces} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx
new file mode 100644
index 00000000000..b3c1ee4d3a5
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+
+import { Calendars } from "@/registry/new-york-v4/blocks/sidebar-15/components/calendars"
+import { DatePicker } from "@/registry/new-york-v4/blocks/sidebar-15/components/date-picker"
+import { NavUser } from "@/registry/new-york-v4/blocks/sidebar-15/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  calendars: [
+    {
+      name: "My Calendars",
+      items: ["Personal", "Work", "Family"],
+    },
+    {
+      name: "Favorites",
+      items: ["Holidays", "Birthdays"],
+    },
+    {
+      name: "Other",
+      items: ["Travel", "Reminders", "Deadlines"],
+    },
+  ],
+}
+
+export function SidebarRight({
+  ...props
+}: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar
+      collapsible="none"
+      className="sticky top-0 hidden h-svh border-l lg:flex"
+      {...props}
+    >
+      <SidebarHeader className="border-sidebar-border h-16 border-b">
+        <NavUser user={data.user} />
+      </SidebarHeader>
+      <SidebarContent>
+        <DatePicker />
+        <SidebarSeparator className="mx-0" />
+        <Calendars calendars={data.calendars} />
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              <Plus />
+              <span>New Calendar</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx
new file mode 100644
index 00000000000..f7fd8e1f261
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className="w-fit px-1.5">
+              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
+                <activeTeam.logo className="size-3" />
+              </div>
+              <span className="truncate font-medium">{activeTeam.name}</span>
+              <ChevronDown className="opacity-50" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-64 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-muted-foreground text-xs">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-xs border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="bg-background flex size-6 items-center justify-center rounded-md border">
+                <Plus className="size-4" />
+              </div>
+              <div className="text-muted-foreground font-medium">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000000..a301f05ce35
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/page.tsx
@@ -0,0 +1,47 @@
+import { SidebarLeft } from "@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarLeft />
+      <SidebarInset>
+        <header className="bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator
+              orientation="vertical"
+              className="mr-2 data-[orientation=vertical]:h-4"
+            />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
+          <div className="bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl" />
+        </div>
+      </SidebarInset>
+      <SidebarRight />
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx
new file mode 100644
index 00000000000..2b915d486f9
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx
@@ -0,0 +1,188 @@
+"use client"
+
+import * as React from "react"
+import {
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  LifeBuoy,
+  Map,
+  PieChart,
+  Send,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { NavMain } from "@/registry/new-york-v4/blocks/sidebar-16/components/nav-main"
+import { NavProjects } from "@/registry/new-york-v4/blocks/sidebar-16/components/nav-projects"
+import { NavSecondary } from "@/registry/new-york-v4/blocks/sidebar-16/components/nav-secondary"
+import { NavUser } from "@/registry/new-york-v4/blocks/sidebar-16/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar
+      className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
+      {...props}
+    >
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <Command className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">Acme Inc</span>
+                  <span className="truncate text-xs">Enterprise</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-main.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-main.tsx
new file mode 100644
index 00000000000..4ffa6b3fd51
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-main.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild tooltip={item.title}>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.items?.length ? (
+                <>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuAction className="data-[state=open]:rotate-90">
+                      <ChevronRight />
+                      <span className="sr-only">Toggle</span>
+                    </SidebarMenuAction>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.items?.map((subItem) => (
+                        <SidebarMenuSubItem key={subItem.title}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </>
+              ) : null}
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-projects.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-projects.tsx
new file mode 100644
index 00000000000..2c6d23a28ae
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  MoreHorizontal,
+  Share,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Share className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-secondary.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-secondary.tsx
new file mode 100644
index 00000000000..66924a12dc0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-secondary.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild size="sm">
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx
new file mode 100644
index 00000000000..c3b9de977b3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/search-form.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/search-form.tsx
new file mode 100644
index 00000000000..0491880e4d2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/search-form.tsx
@@ -0,0 +1,22 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { SidebarInput } from "@/registry/new-york-v4/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <div className="relative">
+        <Label htmlFor="search" className="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Type to search..."
+          className="h-8 pl-7"
+        />
+        <Search className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+      </div>
+    </form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx
new file mode 100644
index 00000000000..9ab08581ef2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { SidebarIcon } from "lucide-react"
+
+import { SearchForm } from "@/registry/new-york-v4/blocks/sidebar-16/components/search-form"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import { useSidebar } from "@/registry/new-york-v4/ui/sidebar"
+
+export function SiteHeader() {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <header className="bg-background sticky top-0 z-50 flex w-full items-center border-b">
+      <div className="flex h-(--header-height) w-full items-center gap-2 px-4">
+        <Button
+          className="h-8 w-8"
+          variant="ghost"
+          size="icon"
+          onClick={toggleSidebar}
+        >
+          <SidebarIcon />
+        </Button>
+        <Separator orientation="vertical" className="mr-2 h-4" />
+        <Breadcrumb className="hidden sm:block">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <SearchForm className="w-full sm:ml-auto sm:w-auto" />
+      </div>
+    </header>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/page.tsx
new file mode 100644
index 00000000000..9a90ac959e3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/page.tsx
@@ -0,0 +1,33 @@
+import { AppSidebar } from "@/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar"
+import { SiteHeader } from "@/registry/new-york-v4/blocks/sidebar-16/components/site-header"
+import {
+  SidebarInset,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a header and a search form."
+
+export default function Page() {
+  return (
+    <div className="[--header-height:calc(--spacing(14))]">
+      <SidebarProvider className="flex flex-col">
+        <SiteHeader />
+        <div className="flex flex-1">
+          <AppSidebar />
+          <SidebarInset>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+              <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                <div className="bg-muted/50 aspect-video rounded-xl" />
+                <div className="bg-muted/50 aspect-video rounded-xl" />
+                <div className="bg-muted/50 aspect-video rounded-xl" />
+              </div>
+              <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+            </div>
+          </SidebarInset>
+        </div>
+      </SidebarProvider>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-axes.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-axes.tsx
new file mode 100644
index 00000000000..be7572d9657
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-axes.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "An area chart with axes"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaAxes() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Axes</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: -20,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickCount={3}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-default.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-default.tsx
new file mode 100644
index 00000000000..08296e713b7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-default.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A simple area chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaDefault() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-gradient.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-gradient.tsx
new file mode 100644
index 00000000000..5fac294ded9
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-gradient.tsx
@@ -0,0 +1,130 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "An area chart with gradient fill"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaGradient() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Gradient</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-icons.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-icons.tsx
new file mode 100644
index 00000000000..7d9806ba9f7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-icons.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingDown, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "An area chart with icons"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+    icon: TrendingDown,
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+    icon: TrendingUp,
+  },
+} satisfies ChartConfig
+
+export function ChartAreaIcons() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Icons</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-interactive.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000000..1f841b02ef5
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaInteractive() {
+  const [timeRange, setTimeRange] = React.useState("90d")
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card className="pt-0">
+      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
+        <div className="grid flex-1 gap-1">
+          <CardTitle>Area Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <Select value={timeRange} onValueChange={setTimeRange}>
+          <SelectTrigger
+            className="hidden w-[160px] rounded-lg sm:ml-auto sm:flex"
+            aria-label="Select a value"
+          >
+            <SelectValue placeholder="Last 3 months" />
+          </SelectTrigger>
+          <SelectContent className="rounded-xl">
+            <SelectItem value="90d" className="rounded-lg">
+              Last 3 months
+            </SelectItem>
+            <SelectItem value="30d" className="rounded-lg">
+              Last 30 days
+            </SelectItem>
+            <SelectItem value="7d" className="rounded-lg">
+              Last 7 days
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-legend.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-legend.tsx
new file mode 100644
index 00000000000..f74b7bbbbe3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-legend.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "An area chart with a legend"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaLegend() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Legend</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-linear.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-linear.tsx
new file mode 100644
index 00000000000..f6a6f40e7be
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-linear.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A linear area chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaLinear() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Linear</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dot" hideLabel />}
+            />
+            <Area
+              dataKey="desktop"
+              type="linear"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-stacked-expand.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-stacked-expand.tsx
new file mode 100644
index 00000000000..1ff030e704c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-stacked-expand.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked area chart with expand stacking"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80, other: 45 },
+  { month: "February", desktop: 305, mobile: 200, other: 100 },
+  { month: "March", desktop: 237, mobile: 120, other: 150 },
+  { month: "April", desktop: 73, mobile: 190, other: 50 },
+  { month: "May", desktop: 209, mobile: 130, other: 100 },
+  { month: "June", desktop: 214, mobile: 140, other: 160 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-3)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaStackedExpand() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Stacked Expanded</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+              top: 12,
+            }}
+            stackOffset="expand"
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="other"
+              type="natural"
+              fill="var(--color-other)"
+              fillOpacity={0.1}
+              stroke="var(--color-other)"
+              stackId="a"
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-stacked.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-stacked.tsx
new file mode 100644
index 00000000000..98a2d930e9d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-stacked.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked area chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaStacked() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Stacked</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dot" />}
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-step.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-step.tsx
new file mode 100644
index 00000000000..91423052044
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-step.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { Activity, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A step area chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+    icon: Activity,
+  },
+} satisfies ChartConfig
+
+export function ChartAreaStep() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Step</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Area
+              dataKey="desktop"
+              type="step"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-active.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-active.tsx
new file mode 100644
index 00000000000..bcc8631e2e2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-active.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A bar chart with an active bar"
+
+const chartData = [
+  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarActive() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Active</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="browser"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) =>
+                chartConfig[value as keyof typeof chartConfig]?.label
+              }
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar
+              dataKey="visitors"
+              strokeWidth={2}
+              radius={8}
+              activeIndex={2}
+              activeBar={({ ...props }) => {
+                return (
+                  <Rectangle
+                    {...props}
+                    fillOpacity={0.8}
+                    stroke={props.payload.fill}
+                    strokeDasharray={4}
+                    strokeDashoffset={4}
+                  />
+                )
+              }}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-default.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-default.tsx
new file mode 100644
index 00000000000..a74ed59dd9c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-default.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A bar chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarDefault() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-horizontal.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-horizontal.tsx
new file mode 100644
index 00000000000..8b9d863921c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-horizontal.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A horizontal bar chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarHorizontal() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Horizontal</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            margin={{
+              left: -20,
+            }}
+          >
+            <XAxis type="number" dataKey="desktop" hide />
+            <YAxis
+              dataKey="month"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={5} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-interactive.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-interactive.tsx
new file mode 100644
index 00000000000..8203901c7b5
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-interactive.tsx
@@ -0,0 +1,221 @@
+"use client"
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "An interactive bar chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  views: {
+    label: "Page Views",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-2)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarInteractive() {
+  const [activeChart, setActiveChart] =
+    React.useState<keyof typeof chartConfig>("desktop")
+
+  const total = React.useMemo(
+    () => ({
+      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+    }),
+    []
+  )
+
+  return (
+    <Card className="py-0">
+      <CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0">
+          <CardTitle>Bar Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <div className="flex">
+          {["desktop", "mobile"].map((key) => {
+            const chart = key as keyof typeof chartConfig
+            return (
+              <button
+                key={chart}
+                data-active={activeChart === chart}
+                className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
+                onClick={() => setActiveChart(chart)}
+              >
+                <span className="text-muted-foreground text-xs">
+                  {chartConfig[chart].label}
+                </span>
+                <span className="text-lg leading-none font-bold sm:text-3xl">
+                  {total[key as keyof typeof total].toLocaleString()}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-label-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-label-custom.tsx
new file mode 100644
index 00000000000..92285a43bf2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-label-custom.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A bar chart with a custom label"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-2)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+  label: {
+    color: "var(--background)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarLabelCustom() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Custom Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            margin={{
+              right: 16,
+            }}
+          >
+            <CartesianGrid horizontal={false} />
+            <YAxis
+              dataKey="month"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+              hide
+            />
+            <XAxis dataKey="desktop" type="number" hide />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Bar
+              dataKey="desktop"
+              layout="vertical"
+              fill="var(--color-desktop)"
+              radius={4}
+            >
+              <LabelList
+                dataKey="month"
+                position="insideLeft"
+                offset={8}
+                className="fill-(--color-label)"
+                fontSize={12}
+              />
+              <LabelList
+                dataKey="desktop"
+                position="right"
+                offset={8}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-label.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-label.tsx
new file mode 100644
index 00000000000..faaac426f81
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-label.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A bar chart with a label"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarLabel() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 20,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
+              <LabelList
+                position="top"
+                offset={12}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-mixed.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-mixed.tsx
new file mode 100644
index 00000000000..1e622051c29
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-mixed.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A mixed bar chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarMixed() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Mixed</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            margin={{
+              left: 0,
+            }}
+          >
+            <YAxis
+              dataKey="browser"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) =>
+                chartConfig[value as keyof typeof chartConfig]?.label
+              }
+            />
+            <XAxis dataKey="visitors" type="number" hide />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="visitors" layout="vertical" radius={5} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-multiple.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-multiple.tsx
new file mode 100644
index 00000000000..c5682fc6be6
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-multiple.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A multiple bar chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarMultiple() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dashed" />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-negative.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-negative.tsx
new file mode 100644
index 00000000000..91a195ab81d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-negative.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A bar chart with negative values"
+
+const chartData = [
+  { month: "January", visitors: 186 },
+  { month: "February", visitors: 205 },
+  { month: "March", visitors: -207 },
+  { month: "April", visitors: 173 },
+  { month: "May", visitors: -209 },
+  { month: "June", visitors: 214 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+} satisfies ChartConfig
+
+export function ChartBarNegative() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Negative</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel hideIndicator />}
+            />
+            <Bar dataKey="visitors">
+              <LabelList position="top" dataKey="month" fillOpacity={1} />
+              {chartData.map((item) => (
+                <Cell
+                  key={item.month}
+                  fill={item.visitors > 0 ? "var(--chart-1)" : "var(--chart-2)"}
+                />
+              ))}
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-stacked.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-stacked.tsx
new file mode 100644
index 00000000000..e8da231089f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-stacked.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarStacked() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="desktop"
+              stackId="a"
+              fill="var(--color-desktop)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="mobile"
+              stackId="a"
+              fill="var(--color-mobile)"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-default.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-default.tsx
new file mode 100644
index 00000000000..e6a67fd5b34
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-default.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A line chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineDefault() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-dots-colors.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-dots-colors.tsx
new file mode 100644
index 00000000000..3863dec495b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-dots-colors.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Dot, Line, LineChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A line chart with dots and colors"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "var(--chart-2)",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineDotsColors() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Dots Colors</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 24,
+              left: 24,
+              right: 24,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  indicator="line"
+                  nameKey="visitors"
+                  hideLabel
+                />
+              }
+            />
+            <Line
+              dataKey="visitors"
+              type="natural"
+              stroke="var(--color-visitors)"
+              strokeWidth={2}
+              dot={({ payload, ...props }) => {
+                return (
+                  <Dot
+                    key={payload.browser}
+                    r={5}
+                    cx={props.cx}
+                    cy={props.cy}
+                    fill={payload.fill}
+                    stroke={payload.fill}
+                  />
+                )
+              }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-dots-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-dots-custom.tsx
new file mode 100644
index 00000000000..9c1b8d58d5a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-dots-custom.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { GitCommitVertical, TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A line chart with custom dots"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineDotsCustom() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Custom Dots</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={({ cx, cy, payload }) => {
+                const r = 24
+                return (
+                  <GitCommitVertical
+                    key={payload.month}
+                    x={cx - r / 2}
+                    y={cy - r / 2}
+                    width={r}
+                    height={r}
+                    fill="hsl(var(--background))"
+                    stroke="var(--color-desktop)"
+                  />
+                )
+              }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-dots.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-dots.tsx
new file mode 100644
index 00000000000..174eeeed437
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-dots.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A line chart with dots"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineDots() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Dots</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={{
+                fill: "var(--color-desktop)",
+              }}
+              activeDot={{
+                r: 6,
+              }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-interactive.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-interactive.tsx
new file mode 100644
index 00000000000..75b1a8018a9
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-interactive.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "An interactive line chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  views: {
+    label: "Page Views",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineInteractive() {
+  const [activeChart, setActiveChart] =
+    React.useState<keyof typeof chartConfig>("desktop")
+
+  const total = React.useMemo(
+    () => ({
+      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+    }),
+    []
+  )
+
+  return (
+    <Card className="py-4 sm:py-0">
+      <CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pb-3 sm:pb-0">
+          <CardTitle>Line Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <div className="flex">
+          {["desktop", "mobile"].map((key) => {
+            const chart = key as keyof typeof chartConfig
+            return (
+              <button
+                key={chart}
+                data-active={activeChart === chart}
+                className="data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
+                onClick={() => setActiveChart(chart)}
+              >
+                <span className="text-muted-foreground text-xs">
+                  {chartConfig[chart].label}
+                </span>
+                <span className="text-lg leading-none font-bold sm:text-3xl">
+                  {total[key as keyof typeof total].toLocaleString()}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Line
+              dataKey={activeChart}
+              type="monotone"
+              stroke={`var(--color-${activeChart})`}
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-label-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-label-custom.tsx
new file mode 100644
index 00000000000..6f30ee1762d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-label-custom.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A line chart with a custom label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "var(--chart-2)",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineLabelCustom() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Custom Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 24,
+              left: 24,
+              right: 24,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  indicator="line"
+                  nameKey="visitors"
+                  hideLabel
+                />
+              }
+            />
+            <Line
+              dataKey="visitors"
+              type="natural"
+              stroke="var(--color-visitors)"
+              strokeWidth={2}
+              dot={{
+                fill: "var(--color-visitors)",
+              }}
+              activeDot={{
+                r: 6,
+              }}
+            >
+              <LabelList
+                position="top"
+                offset={12}
+                className="fill-foreground"
+                fontSize={12}
+                dataKey="browser"
+                formatter={(value: keyof typeof chartConfig) =>
+                  chartConfig[value]?.label
+                }
+              />
+            </Line>
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-label.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-label.tsx
new file mode 100644
index 00000000000..1de35744ec3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-label.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A line chart with a label"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineLabel() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 20,
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={{
+                fill: "var(--color-desktop)",
+              }}
+              activeDot={{
+                r: 6,
+              }}
+            >
+              <LabelList
+                position="top"
+                offset={12}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Line>
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-linear.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-linear.tsx
new file mode 100644
index 00000000000..0cc249ce573
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-linear.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A linear line chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineLinear() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Linear</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="linear"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-multiple.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-multiple.tsx
new file mode 100644
index 00000000000..80e9b0870e9
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-multiple.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A multiple line chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineMultiple() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Line
+              dataKey="desktop"
+              type="monotone"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="mobile"
+              type="monotone"
+              stroke="var(--color-mobile)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-step.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-step.tsx
new file mode 100644
index 00000000000..d387525a90a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-step.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A line chart with step"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineStep() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Step</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="step"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-donut-active.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-donut-active.tsx
new file mode 100644
index 00000000000..65a909a39b8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-donut-active.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A donut chart with an active sector"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieDonutActive() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Donut Active</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+              strokeWidth={5}
+              activeIndex={0}
+              activeShape={({
+                outerRadius = 0,
+                ...props
+              }: PieSectorDataItem) => (
+                <Sector {...props} outerRadius={outerRadius + 10} />
+              )}
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-donut-text.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-donut-text.tsx
new file mode 100644
index 00000000000..b4ba4ca5e46
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-donut-text.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A donut chart with text"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 190, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieDonutText() {
+  const totalVisitors = React.useMemo(() => {
+    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+  }, [])
+
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Donut with Text</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-donut.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-donut.tsx
new file mode 100644
index 00000000000..4296f8113e2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-donut.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A donut chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieDonut() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Donut</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-interactive.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-interactive.tsx
new file mode 100644
index 00000000000..06dd2579347
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-interactive.tsx
@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+export const description = "An interactive pie chart"
+
+const desktopData = [
+  { month: "january", desktop: 186, fill: "var(--color-january)" },
+  { month: "february", desktop: 305, fill: "var(--color-february)" },
+  { month: "march", desktop: 237, fill: "var(--color-march)" },
+  { month: "april", desktop: 173, fill: "var(--color-april)" },
+  { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+  },
+  mobile: {
+    label: "Mobile",
+  },
+  january: {
+    label: "January",
+    color: "var(--chart-1)",
+  },
+  february: {
+    label: "February",
+    color: "var(--chart-2)",
+  },
+  march: {
+    label: "March",
+    color: "var(--chart-3)",
+  },
+  april: {
+    label: "April",
+    color: "var(--chart-4)",
+  },
+  may: {
+    label: "May",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieInteractive() {
+  const id = "pie-interactive"
+  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
+
+  const activeIndex = React.useMemo(
+    () => desktopData.findIndex((item) => item.month === activeMonth),
+    [activeMonth]
+  )
+  const months = React.useMemo(() => desktopData.map((item) => item.month), [])
+
+  return (
+    <Card data-chart={id} className="flex flex-col">
+      <ChartStyle id={id} config={chartConfig} />
+      <CardHeader className="flex-row items-start space-y-0 pb-0">
+        <div className="grid gap-1">
+          <CardTitle>Pie Chart - Interactive</CardTitle>
+          <CardDescription>January - June 2024</CardDescription>
+        </div>
+        <Select value={activeMonth} onValueChange={setActiveMonth}>
+          <SelectTrigger
+            className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
+            aria-label="Select a value"
+          >
+            <SelectValue placeholder="Select month" />
+          </SelectTrigger>
+          <SelectContent align="end" className="rounded-xl">
+            {months.map((key) => {
+              const config = chartConfig[key as keyof typeof chartConfig]
+
+              if (!config) {
+                return null
+              }
+
+              return (
+                <SelectItem
+                  key={key}
+                  value={key}
+                  className="rounded-lg [&_span]:flex"
+                >
+                  <div className="flex items-center gap-2 text-xs">
+                    <span
+                      className="flex h-3 w-3 shrink-0 rounded-xs"
+                      style={{
+                        backgroundColor: `var(--color-${key})`,
+                      }}
+                    />
+                    {config?.label}
+                  </div>
+                </SelectItem>
+              )
+            })}
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="flex flex-1 justify-center pb-0">
+        <ChartContainer
+          id={id}
+          config={chartConfig}
+          className="mx-auto aspect-square w-full max-w-[300px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={desktopData}
+              dataKey="desktop"
+              nameKey="month"
+              innerRadius={60}
+              strokeWidth={5}
+              activeIndex={activeIndex}
+              activeShape={({
+                outerRadius = 0,
+                ...props
+              }: PieSectorDataItem) => (
+                <g>
+                  <Sector {...props} outerRadius={outerRadius + 10} />
+                  <Sector
+                    {...props}
+                    outerRadius={outerRadius + 25}
+                    innerRadius={outerRadius + 12}
+                  />
+                </g>
+              )}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {desktopData[activeIndex].desktop.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-label-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-label-custom.tsx
new file mode 100644
index 00000000000..dcd601dac7c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-label-custom.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A pie chart with a custom label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieLabelCustom() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Custom Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] px-0"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              labelLine={false}
+              label={({ payload, ...props }) => {
+                return (
+                  <text
+                    cx={props.cx}
+                    cy={props.cy}
+                    x={props.x}
+                    y={props.y}
+                    textAnchor={props.textAnchor}
+                    dominantBaseline={props.dominantBaseline}
+                    fill="hsla(var(--foreground))"
+                  >
+                    {payload.visitors}
+                  </text>
+                )
+              }}
+              nameKey="browser"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-label-list.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-label-list.tsx
new file mode 100644
index 00000000000..a715bc88b5e
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-label-list.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A pie chart with a label list"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieLabelList() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Label List</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="[&_.recharts-text]:fill-background mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+            />
+            <Pie data={chartData} dataKey="visitors">
+              <LabelList
+                dataKey="browser"
+                className="fill-background"
+                stroke="none"
+                fontSize={12}
+                formatter={(value: keyof typeof chartConfig) =>
+                  chartConfig[value]?.label
+                }
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-label.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-label.tsx
new file mode 100644
index 00000000000..e82954ffff8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-label.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A pie chart with a label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieLabel() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0"
+        >
+          <PieChart>
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <Pie data={chartData} dataKey="visitors" label nameKey="browser" />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-legend.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-legend.tsx
new file mode 100644
index 00000000000..bb29479fc9b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-legend.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A pie chart with a legend"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieLegend() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Legend</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[300px]"
+        >
+          <PieChart>
+            <Pie data={chartData} dataKey="visitors" />
+            <ChartLegend
+              content={<ChartLegendContent nameKey="browser" />}
+              className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-separator-none.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-separator-none.tsx
new file mode 100644
index 00000000000..45b05167685
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-separator-none.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A pie chart with no separator"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieSeparatorNone() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Separator None</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              stroke="0"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-simple.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-simple.tsx
new file mode 100644
index 00000000000..e669d09a701
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-simple.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A simple pie chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieSimple() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie data={chartData} dataKey="visitors" nameKey="browser" />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-stacked.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-stacked.tsx
new file mode 100644
index 00000000000..70b5b29130e
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-stacked.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import * as React from "react"
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A pie chart with stacked sections"
+
+const desktopData = [
+  { month: "january", desktop: 186, fill: "var(--color-january)" },
+  { month: "february", desktop: 305, fill: "var(--color-february)" },
+  { month: "march", desktop: 237, fill: "var(--color-march)" },
+  { month: "april", desktop: 173, fill: "var(--color-april)" },
+  { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const mobileData = [
+  { month: "january", mobile: 80, fill: "var(--color-january)" },
+  { month: "february", mobile: 200, fill: "var(--color-february)" },
+  { month: "march", mobile: 120, fill: "var(--color-march)" },
+  { month: "april", mobile: 190, fill: "var(--color-april)" },
+  { month: "may", mobile: 130, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+  },
+  mobile: {
+    label: "Mobile",
+  },
+  january: {
+    label: "January",
+    color: "var(--chart-1)",
+  },
+  february: {
+    label: "February",
+    color: "var(--chart-2)",
+  },
+  march: {
+    label: "March",
+    color: "var(--chart-3)",
+  },
+  april: {
+    label: "April",
+    color: "var(--chart-4)",
+  },
+  may: {
+    label: "May",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieStacked() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Stacked</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  labelKey="visitors"
+                  nameKey="month"
+                  indicator="line"
+                  labelFormatter={(_, payload) => {
+                    return chartConfig[
+                      payload?.[0].dataKey as keyof typeof chartConfig
+                    ].label
+                  }}
+                />
+              }
+            />
+            <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
+            <Pie
+              data={mobileData}
+              dataKey="mobile"
+              innerRadius={70}
+              outerRadius={90}
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-default.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-default.tsx
new file mode 100644
index 00000000000..c932dfaf73f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-default.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarDefault() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-dots.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-dots.tsx
new file mode 100644
index 00000000000..12b1b2c3542
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-dots.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with dots"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarDots() {
+  return (
+    <Card>
+      <CardHeader className="items-center">
+        <CardTitle>Radar Chart - Dots</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx
new file mode 100644
index 00000000000..082632f5b5f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 285 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 203 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarGridCircleFill() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <PolarGrid
+              className="fill-(--color-desktop) opacity-20"
+              gridType="circle"
+            />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.5}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx
new file mode 100644
index 00000000000..79c413714f2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 203 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarGridCircleNoLines() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid gridType="circle" radialLines={false} />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle.tsx
new file mode 100644
index 00000000000..4705e33936f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with a grid and circle"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarGridCircle() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Circle</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid gridType="circle" />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-custom.tsx
new file mode 100644
index 00000000000..0049721d96d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-custom.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with a custom grid"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarGridCustom() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Custom</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-fill.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-fill.tsx
new file mode 100644
index 00000000000..a02991945f7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-fill.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with a grid filled"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 285 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 203 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarGridFill() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Filled</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid className="fill-(--color-desktop) opacity-20" />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.5}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-none.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-none.tsx
new file mode 100644
index 00000000000..03d7122c2ba
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-none.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with no grid"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarGridNone() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid None</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-icons.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-icons.tsx
new file mode 100644
index 00000000000..71fd60d94dd
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-icons.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with icons"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+    icon: ArrowDownFromLine,
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+    icon: ArrowUpFromLine,
+  },
+} satisfies ChartConfig
+
+export function ChartRadarIcons() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Icons</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart
+            data={chartData}
+            margin={{
+              top: -40,
+              bottom: -10,
+            }}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+            <ChartLegend className="mt-8" content={<ChartLegendContent />} />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 pt-4 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-label-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-label-custom.tsx
new file mode 100644
index 00000000000..d2f246646a1
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-label-custom.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with a custom label"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarLabelCustom() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Custom Label</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart
+            data={chartData}
+            margin={{
+              top: 10,
+              right: 10,
+              bottom: 10,
+              left: 10,
+            }}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis
+              dataKey="month"
+              tick={({ x, y, textAnchor, value, index, ...props }) => {
+                const data = chartData[index]
+
+                return (
+                  <text
+                    x={x}
+                    y={index === 0 ? y - 10 : y}
+                    textAnchor={textAnchor}
+                    fontSize={13}
+                    fontWeight={500}
+                    {...props}
+                  >
+                    <tspan>{data.desktop}</tspan>
+                    <tspan className="fill-muted-foreground">/</tspan>
+                    <tspan>{data.mobile}</tspan>
+                    <tspan
+                      x={x}
+                      dy={"1rem"}
+                      fontSize={12}
+                      className="fill-muted-foreground"
+                    >
+                      {data.month}
+                    </tspan>
+                  </text>
+                )
+              }}
+            />
+
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-legend.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-legend.tsx
new file mode 100644
index 00000000000..4cecde5ec4b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-legend.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with a legend"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarLegend() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Legend</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart
+            data={chartData}
+            margin={{
+              top: -40,
+              bottom: -10,
+            }}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+            <ChartLegend className="mt-8" content={<ChartLegendContent />} />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 pt-4 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-lines-only.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-lines-only.tsx
new file mode 100644
index 00000000000..b800f91e1de
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-lines-only.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with lines only"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 160 },
+  { month: "February", desktop: 185, mobile: 170 },
+  { month: "March", desktop: 207, mobile: 180 },
+  { month: "April", desktop: 173, mobile: 160 },
+  { month: "May", desktop: 160, mobile: 190 },
+  { month: "June", desktop: 174, mobile: 204 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarLinesOnly() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Lines Only</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid radialLines={false} />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0}
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+            />
+            <Radar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              fillOpacity={0}
+              stroke="var(--color-mobile)"
+              strokeWidth={2}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-multiple.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-multiple.tsx
new file mode 100644
index 00000000000..a71a46f6fdc
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-multiple.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with multiple data"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarMultiple() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Multiple</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-radius.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-radius.tsx
new file mode 100644
index 00000000000..74c425c23d9
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-radius.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radar chart with a radius axis"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarRadius() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Radius Axis</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent indicator="line" labelKey="month" />
+              }
+            />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+            <PolarRadiusAxis
+              angle={60}
+              stroke="hsla(var(--foreground))"
+              orientation="middle"
+              axisLine={false}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-grid.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-grid.tsx
new file mode 100644
index 00000000000..26a74b32fec
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-grid.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radial chart with a grid"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadialGrid() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Grid</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel nameKey="browser" />}
+            />
+            <PolarGrid gridType="circle" />
+            <RadialBar dataKey="visitors" />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-label.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-label.tsx
new file mode 100644
index 00000000000..913d1cb97ef
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-label.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radial chart with a label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadialLabel() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            startAngle={-90}
+            endAngle={380}
+            innerRadius={30}
+            outerRadius={110}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel nameKey="browser" />}
+            />
+            <RadialBar dataKey="visitors" background>
+              <LabelList
+                position="insideStart"
+                dataKey="browser"
+                className="fill-white capitalize mix-blend-luminosity"
+                fontSize={11}
+              />
+            </RadialBar>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-shape.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-shape.tsx
new file mode 100644
index 00000000000..1f9a9aad6e6
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-shape.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radial chart with a custom shape"
+
+const chartData = [
+  { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadialShape() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Shape</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            endAngle={100}
+            innerRadius={80}
+            outerRadius={140}
+          >
+            <PolarGrid
+              gridType="circle"
+              radialLines={false}
+              stroke="none"
+              className="first:fill-muted last:fill-background"
+              polarRadius={[86, 74]}
+            />
+            <RadialBar dataKey="visitors" background />
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-4xl font-bold"
+                        >
+                          {chartData[0].visitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-simple.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-simple.tsx
new file mode 100644
index 00000000000..67f68c5799c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-simple.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radial chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadialSimple() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel nameKey="browser" />}
+            />
+            <RadialBar dataKey="visitors" background />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-stacked.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-stacked.tsx
new file mode 100644
index 00000000000..2f5a2763cd3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-stacked.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radial chart with stacked sections"
+
+const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadialStacked() {
+  const totalVisitors = chartData[0].desktop + chartData[0].mobile
+
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Stacked</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-1 items-center pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square w-full max-w-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            endAngle={180}
+            innerRadius={80}
+            outerRadius={130}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) - 16}
+                          className="fill-foreground text-2xl font-bold"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 4}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+            <RadialBar
+              dataKey="desktop"
+              stackId="a"
+              cornerRadius={5}
+              fill="var(--color-desktop)"
+              className="stroke-transparent stroke-2"
+            />
+            <RadialBar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              stackId="a"
+              cornerRadius={5}
+              className="stroke-transparent stroke-2"
+            />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-text.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-text.tsx
new file mode 100644
index 00000000000..75f32bce2d4
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-text.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A radial chart with text"
+
+const chartData = [
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadialText() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Text</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            startAngle={0}
+            endAngle={250}
+            innerRadius={80}
+            outerRadius={110}
+          >
+            <PolarGrid
+              gridType="circle"
+              radialLines={false}
+              stroke="none"
+              className="first:fill-muted last:fill-background"
+              polarRadius={[86, 74]}
+            />
+            <RadialBar dataKey="visitors" background cornerRadius={10} />
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-4xl font-bold"
+                        >
+                          {chartData[0].visitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-tooltip-advanced.tsx b/apps/v4/registry/new-york-v4/charts/chart-tooltip-advanced.tsx
new file mode 100644
index 00000000000..044c94f8e53
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-tooltip-advanced.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "var(--chart-1)",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartTooltipAdvanced() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Advanced</CardTitle>
+        <CardDescription>
+          Tooltip with custom formatter and total.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  hideLabel
+                  className="w-[180px]"
+                  formatter={(value, name, item, index) => (
+                    <>
+                      <div
+                        className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)"
+                        style={
+                          {
+                            "--color-bg": `var(--color-${name})`,
+                          } as React.CSSProperties
+                        }
+                      />
+                      {chartConfig[name as keyof typeof chartConfig]?.label ||
+                        name}
+                      <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
+                        {value}
+                        <span className="text-muted-foreground font-normal">
+                          kcal
+                        </span>
+                      </div>
+                      {/* Add this after the last item */}
+                      {index === 1 && (
+                        <div className="text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium">
+                          Total
+                          <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
+                            {item.payload.running + item.payload.swimming}
+                            <span className="text-muted-foreground font-normal">
+                              kcal
+                            </span>
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  )}
+                />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-tooltip-default.tsx b/apps/v4/registry/new-york-v4/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..695c70a9d0a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "var(--chart-1)",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartTooltipDefault() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Default</CardTitle>
+        <CardDescription>
+          Default tooltip with ChartTooltipContent.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-tooltip-formatter.tsx b/apps/v4/registry/new-york-v4/charts/chart-tooltip-formatter.tsx
new file mode 100644
index 00000000000..e2f3d70dbd0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-tooltip-formatter.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "var(--chart-1)",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartTooltipFormatter() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Formatter</CardTitle>
+        <CardDescription>Tooltip with custom formatter .</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  hideLabel
+                  formatter={(value, name) => (
+                    <div className="text-muted-foreground flex min-w-[130px] items-center text-xs">
+                      {chartConfig[name as keyof typeof chartConfig]?.label ||
+                        name}
+                      <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
+                        {value}
+                        <span className="text-muted-foreground font-normal">
+                          kcal
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-tooltip-icons.tsx b/apps/v4/registry/new-york-v4/charts/chart-tooltip-icons.tsx
new file mode 100644
index 00000000000..edce3936dca
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-tooltip-icons.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Footprints, Waves } from "lucide-react"
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "var(--chart-1)",
+    icon: Footprints,
+  },
+  swimming: {
+    label: "Swimming",
+    color: "var(--chart-2)",
+    icon: Waves,
+  },
+} satisfies ChartConfig
+
+export function ChartTooltipIcons() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Icons</CardTitle>
+        <CardDescription>Tooltip with icons.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent hideLabel />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-tooltip-indicator-line.tsx b/apps/v4/registry/new-york-v4/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..e6acd7079dc
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-tooltip-indicator-line.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "var(--chart-1)",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartTooltipIndicatorLine() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Line Indicator</CardTitle>
+        <CardDescription>Tooltip with line indicator.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="line" />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-tooltip-indicator-none.tsx b/apps/v4/registry/new-york-v4/charts/chart-tooltip-indicator-none.tsx
new file mode 100644
index 00000000000..63b7464b900
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-tooltip-indicator-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "var(--chart-1)",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartTooltipIndicatorNone() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - No Indicator</CardTitle>
+        <CardDescription>Tooltip with no indicator.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent hideIndicator />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-tooltip-label-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-tooltip-label-custom.tsx
new file mode 100644
index 00000000000..8765718980f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-tooltip-label-custom.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  activities: {
+    label: "Activities",
+  },
+  running: {
+    label: "Running",
+    color: "var(--chart-1)",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartTooltipLabelCustom() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Custom label</CardTitle>
+        <CardDescription>
+          Tooltip with custom label from chartConfig.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent labelKey="activities" indicator="line" />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-tooltip-label-formatter.tsx b/apps/v4/registry/new-york-v4/charts/chart-tooltip-label-formatter.tsx
new file mode 100644
index 00000000000..43bd7d1313f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-tooltip-label-formatter.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "var(--chart-1)",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartTooltipLabelFormatter() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Label Formatter</CardTitle>
+        <CardDescription>Tooltip with label formatter.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      day: "numeric",
+                      month: "long",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/charts/chart-tooltip-label-none.tsx b/apps/v4/registry/new-york-v4/charts/chart-tooltip-label-none.tsx
new file mode 100644
index 00000000000..d93bd185602
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/charts/chart-tooltip-label-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "var(--chart-1)",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartTooltipLabelNone() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - No Label</CardTitle>
+        <CardDescription>Tooltip with no label.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent hideIndicator hideLabel />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/accordion-demo.tsx b/apps/v4/registry/new-york-v4/examples/accordion-demo.tsx
new file mode 100644
index 00000000000..5ced7f9b94d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/accordion-demo.tsx
@@ -0,0 +1,61 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/registry/new-york-v4/ui/accordion"
+
+export default function AccordionDemo() {
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className="w-full"
+      defaultValue="item-1"
+    >
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Product Information</AccordionTrigger>
+        <AccordionContent className="flex flex-col gap-4 text-balance">
+          <p>
+            Our flagship product combines cutting-edge technology with sleek
+            design. Built with premium materials, it offers unparalleled
+            performance and reliability.
+          </p>
+          <p>
+            Key features include advanced processing capabilities, and an
+            intuitive user interface designed for both beginners and experts.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Shipping Details</AccordionTrigger>
+        <AccordionContent className="flex flex-col gap-4 text-balance">
+          <p>
+            We offer worldwide shipping through trusted courier partners.
+            Standard delivery takes 3-5 business days, while express shipping
+            ensures delivery within 1-2 business days.
+          </p>
+          <p>
+            All orders are carefully packaged and fully insured. Track your
+            shipment in real-time through our dedicated tracking portal.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Return Policy</AccordionTrigger>
+        <AccordionContent className="flex flex-col gap-4 text-balance">
+          <p>
+            We stand behind our products with a comprehensive 30-day return
+            policy. If you&apos;re not completely satisfied, simply return the
+            item in its original condition.
+          </p>
+          <p>
+            Our hassle-free return process includes free return shipping and
+            full refunds processed within 48 hours of receiving the returned
+            item.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/alert-demo.tsx b/apps/v4/registry/new-york-v4/examples/alert-demo.tsx
new file mode 100644
index 00000000000..049109fabaf
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/alert-demo.tsx
@@ -0,0 +1,39 @@
+import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from "lucide-react"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york-v4/ui/alert"
+
+export default function AlertDemo() {
+  return (
+    <div className="grid w-full max-w-xl items-start gap-4">
+      <Alert>
+        <CheckCircle2Icon />
+        <AlertTitle>Success! Your changes have been saved</AlertTitle>
+        <AlertDescription>
+          This is an alert with icon, title and description.
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <PopcornIcon />
+        <AlertTitle>
+          This Alert has a title and an icon. No description.
+        </AlertTitle>
+      </Alert>
+      <Alert variant="destructive">
+        <AlertCircleIcon />
+        <AlertTitle>Unable to process your payment.</AlertTitle>
+        <AlertDescription>
+          <p>Please verify your billing information and try again.</p>
+          <ul className="list-inside list-disc text-sm">
+            <li>Check your card details</li>
+            <li>Ensure sufficient funds</li>
+            <li>Verify billing address</li>
+          </ul>
+        </AlertDescription>
+      </Alert>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/alert-destructive.tsx b/apps/v4/registry/new-york-v4/examples/alert-destructive.tsx
new file mode 100644
index 00000000000..c709afa2e27
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/alert-destructive.tsx
@@ -0,0 +1,19 @@
+import { AlertCircleIcon } from "lucide-react"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york-v4/ui/alert"
+
+export default function AlertDestructive() {
+  return (
+    <Alert variant="destructive">
+      <AlertCircleIcon />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/alert-dialog-demo.tsx b/apps/v4/registry/new-york-v4/examples/alert-dialog-demo.tsx
new file mode 100644
index 00000000000..86ebbfc3846
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/new-york-v4/ui/alert-dialog"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Show Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/aspect-ratio-demo.tsx b/apps/v4/registry/new-york-v4/examples/aspect-ratio-demo.tsx
new file mode 100644
index 00000000000..1f9cdc5eeba
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image"
+
+import { AspectRatio } from "@/registry/new-york-v4/ui/aspect-ratio"
+
+export default function AspectRatioDemo() {
+  return (
+    <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+      <Image
+        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+        alt="Photo by Drew Beamer"
+        fill
+        className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/avatar-demo.tsx b/apps/v4/registry/new-york-v4/examples/avatar-demo.tsx
new file mode 100644
index 00000000000..0bf63fddd2d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/avatar-demo.tsx
@@ -0,0 +1,40 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+
+export default function AvatarDemo() {
+  return (
+    <div className="flex flex-row flex-wrap items-center gap-12">
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <Avatar className="rounded-lg">
+        <AvatarImage
+          src="https://github.com/evilrabbit.png"
+          alt="@evilrabbit"
+        />
+        <AvatarFallback>ER</AvatarFallback>
+      </Avatar>
+      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/badge-demo.tsx b/apps/v4/registry/new-york-v4/examples/badge-demo.tsx
new file mode 100644
index 00000000000..9af75e6e552
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/badge-demo.tsx
@@ -0,0 +1,40 @@
+import { AlertCircleIcon, BadgeCheckIcon, CheckIcon } from "lucide-react"
+
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+
+export default function BadgeDemo() {
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div className="flex w-full flex-wrap gap-2">
+        <Badge>Badge</Badge>
+        <Badge variant="secondary">Secondary</Badge>
+        <Badge variant="destructive">Destructive</Badge>
+        <Badge variant="outline">Outline</Badge>
+      </div>
+      <div className="flex w-full flex-wrap gap-2">
+        <Badge
+          variant="secondary"
+          className="bg-blue-500 text-white dark:bg-blue-600"
+        >
+          <BadgeCheckIcon />
+          Verified
+        </Badge>
+        <Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
+          8
+        </Badge>
+        <Badge
+          className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
+          variant="destructive"
+        >
+          99
+        </Badge>
+        <Badge
+          className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
+          variant="outline"
+        >
+          20+
+        </Badge>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/badge-destructive.tsx b/apps/v4/registry/new-york-v4/examples/badge-destructive.tsx
new file mode 100644
index 00000000000..baf55470b46
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+
+export default function BadgeDestructive() {
+  return <Badge variant="destructive">Destructive</Badge>
+}
diff --git a/apps/v4/registry/new-york-v4/examples/badge-outline.tsx b/apps/v4/registry/new-york-v4/examples/badge-outline.tsx
new file mode 100644
index 00000000000..9faa91a718c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+
+export default function BadgeOutline() {
+  return <Badge variant="outline">Outline</Badge>
+}
diff --git a/apps/v4/registry/new-york-v4/examples/badge-secondary.tsx b/apps/v4/registry/new-york-v4/examples/badge-secondary.tsx
new file mode 100644
index 00000000000..3ec92cddca9
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+
+export default function BadgeSecondary() {
+  return <Badge variant="secondary">Secondary</Badge>
+}
diff --git a/apps/v4/registry/new-york-v4/examples/breadcrumb-demo.tsx b/apps/v4/registry/new-york-v4/examples/breadcrumb-demo.tsx
new file mode 100644
index 00000000000..78aab4b48ec
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/breadcrumb-demo.tsx
@@ -0,0 +1,55 @@
+import Link from "next/link"
+
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+export default function BreadcrumbDemo() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/">Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1">
+              <BreadcrumbEllipsis className="size-4" />
+              <span className="sr-only">Toggle menu</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/docs/components">Components</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/breadcrumb-dropdown.tsx b/apps/v4/registry/new-york-v4/examples/breadcrumb-dropdown.tsx
new file mode 100644
index 00000000000..780372354d8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/breadcrumb-dropdown.tsx
@@ -0,0 +1,53 @@
+import Link from "next/link"
+import { ChevronDownIcon, SlashIcon } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+export default function BreadcrumbWithDropdown() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/">Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <SlashIcon />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5">
+              Components
+              <ChevronDownIcon />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <SlashIcon />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/breadcrumb-ellipsis.tsx b/apps/v4/registry/new-york-v4/examples/breadcrumb-ellipsis.tsx
new file mode 100644
index 00000000000..824e46def7e
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/breadcrumb-ellipsis.tsx
@@ -0,0 +1,39 @@
+import Link from "next/link"
+
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+
+export default function BreadcrumbCollapsed() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/">Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/docs/components">Components</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/breadcrumb-link.tsx b/apps/v4/registry/new-york-v4/examples/breadcrumb-link.tsx
new file mode 100644
index 00000000000..fdd66b665fe
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/breadcrumb-link.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+
+export default function BreadcrumbWithCustomSeparator() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/">Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/components">Components</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/breadcrumb-responsive.tsx b/apps/v4/registry/new-york-v4/examples/breadcrumb-responsive.tsx
new file mode 100644
index 00000000000..dbadc358c7d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/breadcrumb-responsive.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+const items = [
+  { href: "#", label: "Home" },
+  { href: "#", label: "Documentation" },
+  { href: "#", label: "Building Your Application" },
+  { href: "#", label: "Data Fetching" },
+  { label: "Caching and Revalidating" },
+]
+
+const ITEMS_TO_DISPLAY = 3
+
+export default function BreadcrumbResponsive() {
+  const [open, setOpen] = React.useState(false)
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href={items[0].href ?? "/"}>{items[0].label}</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        {items.length > ITEMS_TO_DISPLAY ? (
+          <>
+            <BreadcrumbItem>
+              {isDesktop ? (
+                <DropdownMenu open={open} onOpenChange={setOpen}>
+                  <DropdownMenuTrigger
+                    className="flex items-center gap-1"
+                    aria-label="Toggle menu"
+                  >
+                    <BreadcrumbEllipsis className="size-4" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    {items.slice(1, -2).map((item, index) => (
+                      <DropdownMenuItem key={index}>
+                        <Link href={item.href ? item.href : "#"}>
+                          {item.label}
+                        </Link>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              ) : (
+                <Drawer open={open} onOpenChange={setOpen}>
+                  <DrawerTrigger aria-label="Toggle Menu">
+                    <BreadcrumbEllipsis className="h-4 w-4" />
+                  </DrawerTrigger>
+                  <DrawerContent>
+                    <DrawerHeader className="text-left">
+                      <DrawerTitle>Navigate to</DrawerTitle>
+                      <DrawerDescription>
+                        Select a page to navigate to.
+                      </DrawerDescription>
+                    </DrawerHeader>
+                    <div className="grid gap-1 px-4">
+                      {items.slice(1, -2).map((item, index) => (
+                        <Link
+                          key={index}
+                          href={item.href ? item.href : "#"}
+                          className="py-1 text-sm"
+                        >
+                          {item.label}
+                        </Link>
+                      ))}
+                    </div>
+                    <DrawerFooter className="pt-4">
+                      <DrawerClose asChild>
+                        <Button variant="outline">Close</Button>
+                      </DrawerClose>
+                    </DrawerFooter>
+                  </DrawerContent>
+                </Drawer>
+              )}
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+          </>
+        ) : null}
+        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
+          <BreadcrumbItem key={index}>
+            {item.href ? (
+              <>
+                <BreadcrumbLink
+                  asChild
+                  className="max-w-20 truncate md:max-w-none"
+                >
+                  <Link href={item.href}>{item.label}</Link>
+                </BreadcrumbLink>
+                <BreadcrumbSeparator />
+              </>
+            ) : (
+              <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
+                {item.label}
+              </BreadcrumbPage>
+            )}
+          </BreadcrumbItem>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/breadcrumb-separator.tsx b/apps/v4/registry/new-york-v4/examples/breadcrumb-separator.tsx
new file mode 100644
index 00000000000..5983fea40b9
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/breadcrumb-separator.tsx
@@ -0,0 +1,39 @@
+import Link from "next/link"
+import { SlashIcon } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+
+export default function BreadcrumbWithCustomSeparator() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/">Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <SlashIcon />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/components">Components</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <SlashIcon />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/button-as-child.tsx b/apps/v4/registry/new-york-v4/examples/button-as-child.tsx
new file mode 100644
index 00000000000..a656c30766b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/button-as-child.tsx
@@ -0,0 +1,11 @@
+import Link from "next/link"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function ButtonAsChild() {
+  return (
+    <Button asChild>
+      <Link href="/login">Login</Link>
+    </Button>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/button-demo.tsx b/apps/v4/registry/new-york-v4/examples/button-demo.tsx
new file mode 100644
index 00000000000..a2615d48e53
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/button-demo.tsx
@@ -0,0 +1,9 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function ButtonDemo() {
+  return (
+    <div className="flex flex-wrap items-center gap-2 md:flex-row">
+      <Button>Button</Button>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/button-destructive.tsx b/apps/v4/registry/new-york-v4/examples/button-destructive.tsx
new file mode 100644
index 00000000000..df78eb9f14a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/button-destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function ButtonDestructive() {
+  return <Button variant="destructive">Destructive</Button>
+}
diff --git a/apps/v4/registry/new-york-v4/examples/button-ghost.tsx b/apps/v4/registry/new-york-v4/examples/button-ghost.tsx
new file mode 100644
index 00000000000..d11b6f6721e
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/button-ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function ButtonGhost() {
+  return <Button variant="ghost">Ghost</Button>
+}
diff --git a/apps/v4/registry/new-york-v4/examples/button-icon.tsx b/apps/v4/registry/new-york-v4/examples/button-icon.tsx
new file mode 100644
index 00000000000..65f39073520
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/button-icon.tsx
@@ -0,0 +1,11 @@
+import { ChevronRightIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function ButtonIcon() {
+  return (
+    <Button variant="secondary" size="icon" className="size-8">
+      <ChevronRightIcon />
+    </Button>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/button-link.tsx b/apps/v4/registry/new-york-v4/examples/button-link.tsx
new file mode 100644
index 00000000000..97bccaa18e2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/button-link.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function ButtonLink() {
+  return <Button variant="link">Link</Button>
+}
diff --git a/apps/v4/registry/new-york-v4/examples/button-loading.tsx b/apps/v4/registry/new-york-v4/examples/button-loading.tsx
new file mode 100644
index 00000000000..f0b1f1611d3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/button-loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2Icon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function ButtonLoading() {
+  return (
+    <Button size="sm" disabled>
+      <Loader2Icon className="animate-spin" />
+      Please wait
+    </Button>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/button-outline.tsx b/apps/v4/registry/new-york-v4/examples/button-outline.tsx
new file mode 100644
index 00000000000..1477d860dcf
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/button-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function ButtonOutline() {
+  return <Button variant="outline">Outline</Button>
+}
diff --git a/apps/v4/registry/new-york-v4/examples/button-secondary.tsx b/apps/v4/registry/new-york-v4/examples/button-secondary.tsx
new file mode 100644
index 00000000000..bea0cffac94
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/button-secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function ButtonSecondary() {
+  return <Button variant="secondary">Secondary</Button>
+}
diff --git a/apps/v4/registry/new-york-v4/examples/button-with-icon.tsx b/apps/v4/registry/new-york-v4/examples/button-with-icon.tsx
new file mode 100644
index 00000000000..f9ab8f57d5f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { IconGitBranch } from "@tabler/icons-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function ButtonWithIcon() {
+  return (
+    <Button variant="outline" size="sm">
+      <IconGitBranch /> New Branch
+    </Button>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/calendar-demo.tsx b/apps/v4/registry/new-york-v4/examples/calendar-demo.tsx
new file mode 100644
index 00000000000..1995831ffa0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/calendar-demo.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+
+export default function CalendarDemo() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-md border shadow-sm"
+      captionLayout="dropdown"
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/calendar-form.tsx b/apps/v4/registry/new-york-v4/examples/calendar-form.tsx
new file mode 100644
index 00000000000..7bd9a5d1232
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/calendar-form.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york-v4/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+const FormSchema = z.object({
+  dob: z.date({
+    required_error: "A date of birth is required.",
+  }),
+})
+
+export default function CalendarForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="dob"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Date of birth</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant={"outline"}
+                      className={cn(
+                        "w-[240px] pl-3 text-left font-normal",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value ? (
+                        format(field.value, "PPP")
+                      ) : (
+                        <span>Pick a date</span>
+                      )}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    disabled={(date) =>
+                      date > new Date() || date < new Date("1900-01-01")
+                    }
+                    captionLayout="dropdown"
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                Your date of birth is used to calculate your age.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx b/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
new file mode 100644
index 00000000000..b210c93c196
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
@@ -0,0 +1,229 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, getDefaultClassNames } from "react-day-picker"
+import { DayPicker } from "react-day-picker/persian"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/registry/new-york-v4/ui/button"
+
+export default function CalendarHijri() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
+
+// ----------------------------------------------------------------------------
+// The code below is for this example only.
+// For your own calendar, you would edit the calendar.tsx component directly.
+// ----------------------------------------------------------------------------
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/card-demo.tsx b/apps/v4/registry/new-york-v4/examples/card-demo.tsx
new file mode 100644
index 00000000000..9e50eb1d7f0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/card-demo.tsx
@@ -0,0 +1,63 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function CardDemo() {
+  return (
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Login to your account</CardTitle>
+        <CardDescription>
+          Enter your email below to login to your account
+        </CardDescription>
+        <CardAction>
+          <Button variant="link">Sign Up</Button>
+        </CardAction>
+      </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>
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <Button type="submit" className="w-full">
+          Login
+        </Button>
+        <Button variant="outline" className="w-full">
+          Login with Google
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/card-with-form.tsx b/apps/v4/registry/new-york-v4/examples/card-with-form.tsx
new file mode 100644
index 00000000000..56558966e2d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/card-with-form.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+export default function CardWithForm() {
+  return (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Deploy your new project in one-click.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <div className="grid w-full items-center gap-6">
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Name of your project" />
+            </div>
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="framework">Framework</Label>
+              <Select>
+                <SelectTrigger id="framework" className="w-full">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent position="popper">
+                  <SelectItem value="next">Next.js</SelectItem>
+                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
+                  <SelectItem value="astro">Astro</SelectItem>
+                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/carousel-api.tsx b/apps/v4/registry/new-york-v4/examples/carousel-api.tsx
new file mode 100644
index 00000000000..527c5d73af9
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/carousel-api.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from "@/registry/new-york-v4/ui/carousel"
+
+export default function CarouselDApiDemo() {
+  const [api, setApi] = React.useState<CarouselApi>()
+  const [current, setCurrent] = React.useState(0)
+  const [count, setCount] = React.useState(0)
+
+  React.useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    setCount(api.scrollSnapList().length)
+    setCurrent(api.selectedScrollSnap() + 1)
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1)
+    })
+  }, [api])
+
+  return (
+    <div className="mx-auto max-w-xs">
+      <Carousel setApi={setApi} className="w-full max-w-xs">
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+      <div className="text-muted-foreground py-2 text-center text-sm">
+        Slide {current} of {count}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/carousel-demo.tsx b/apps/v4/registry/new-york-v4/examples/carousel-demo.tsx
new file mode 100644
index 00000000000..bcd47022419
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/carousel-demo.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york-v4/ui/carousel"
+
+export default function CarouselDemo() {
+  return (
+    <Carousel className="w-full max-w-xs">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/carousel-orientation.tsx b/apps/v4/registry/new-york-v4/examples/carousel-orientation.tsx
new file mode 100644
index 00000000000..b466545193f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/carousel-orientation.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york-v4/ui/carousel"
+
+export default function CarouselOrientation() {
+  return (
+    <Carousel
+      opts={{
+        align: "start",
+      }}
+      orientation="vertical"
+      className="w-full max-w-xs"
+    >
+      <CarouselContent className="-mt-1 h-[200px]">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="pt-1 md:basis-1/2">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex items-center justify-center p-6">
+                  <span className="text-3xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/carousel-plugin.tsx b/apps/v4/registry/new-york-v4/examples/carousel-plugin.tsx
new file mode 100644
index 00000000000..4c8980cbab5
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/carousel-plugin.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import Autoplay from "embla-carousel-autoplay"
+
+import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york-v4/ui/carousel"
+
+export default function CarouselPlugin() {
+  const plugin = React.useRef(
+    Autoplay({ delay: 2000, stopOnInteraction: true })
+  )
+
+  return (
+    <Carousel
+      plugins={[plugin.current]}
+      className="w-full max-w-xs"
+      onMouseEnter={plugin.current.stop}
+      onMouseLeave={plugin.current.reset}
+    >
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/carousel-size.tsx b/apps/v4/registry/new-york-v4/examples/carousel-size.tsx
new file mode 100644
index 00000000000..b036be69914
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/carousel-size.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york-v4/ui/carousel"
+
+export default function CarouselSize() {
+  return (
+    <Carousel
+      opts={{
+        align: "start",
+      }}
+      className="w-full max-w-sm"
+    >
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-3xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/carousel-spacing.tsx b/apps/v4/registry/new-york-v4/examples/carousel-spacing.tsx
new file mode 100644
index 00000000000..6771b13b3f3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/carousel-spacing.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york-v4/ui/carousel"
+
+export default function CarouselSpacing() {
+  return (
+    <Carousel className="w-full max-w-sm">
+      <CarouselContent className="-ml-1">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-2xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/chart-bar-demo-axis.tsx b/apps/v4/registry/new-york-v4/examples/chart-bar-demo-axis.tsx
new file mode 100644
index 00000000000..f1aea399610
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/chart-bar-demo-axis.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { ChartConfig, ChartContainer } from "@/registry/new-york-v4/ui/chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/chart-bar-demo-grid.tsx b/apps/v4/registry/new-york-v4/examples/chart-bar-demo-grid.tsx
new file mode 100644
index 00000000000..3f95b8833c7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/chart-bar-demo-grid.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid } from "recharts"
+
+import { ChartConfig, ChartContainer } from "@/registry/new-york-v4/ui/chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <CartesianGrid vertical={false} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/chart-bar-demo-legend.tsx b/apps/v4/registry/new-york-v4/examples/chart-bar-demo-legend.tsx
new file mode 100644
index 00000000000..02e5cdd7c1d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/chart-bar-demo-legend.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/chart-bar-demo-tooltip.tsx b/apps/v4/registry/new-york-v4/examples/chart-bar-demo-tooltip.tsx
new file mode 100644
index 00000000000..55031911106
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/chart-bar-demo-tooltip.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york-v4/ui/chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/chart-bar-demo.tsx b/apps/v4/registry/new-york-v4/examples/chart-bar-demo.tsx
new file mode 100644
index 00000000000..dc707fbdbff
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/chart-bar-demo.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import { Bar, BarChart } from "recharts"
+
+import { ChartConfig, ChartContainer } from "@/registry/new-york-v4/ui/chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/chart-tooltip-demo.tsx b/apps/v4/registry/new-york-v4/examples/chart-tooltip-demo.tsx
new file mode 100644
index 00000000000..483a0df986b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/chart-tooltip-demo.tsx
@@ -0,0 +1,218 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export default function Component() {
+  return (
+    <div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
+      <div>
+        <div className="absolute top-[45px] left-[-35px] z-10 text-sm font-medium">
+          Label
+        </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 193 40"
+          width="50"
+          height="12"
+          fill="none"
+          className="absolute top-[50px] left-[5px] z-10"
+        >
+          <g clipPath="url(#a)">
+            <path
+              fill="currentColor"
+              d="M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z"
+            />
+          </g>
+          <defs>
+            <clipPath id="a">
+              <path fill="currentColor" d="M0 0h193v40H0z" />
+            </clipPath>
+          </defs>
+        </svg>
+        <TooltipDemo
+          label="Page Views"
+          payload={[
+            { name: "Desktop", value: 186, fill: "hsl(var(--chart-1))" },
+            { name: "Mobile", value: 80, fill: "hsl(var(--chart-2))" },
+          ]}
+          className="w-[8rem]"
+        />
+      </div>
+      <div className="items-end">
+        <div className="absolute top-[0px] left-[122px] z-10 text-sm font-medium">
+          Name
+        </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="35"
+          height="42"
+          fill="none"
+          viewBox="0 0 122 148"
+          className="absolute top-[10px] left-[85px] z-10 -scale-x-100"
+        >
+          <g clipPath="url(#ab)">
+            <path
+              fill="currentColor"
+              d="M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z"
+            />
+          </g>
+          <defs>
+            <clipPath id="ab">
+              <path fill="currentColor" d="M0 0h122v148H0z" />
+            </clipPath>
+          </defs>
+        </svg>
+        <TooltipDemo
+          label="Browser"
+          hideLabel
+          payload={[
+            { name: "Chrome", value: 1286, fill: "hsl(var(--chart-3))" },
+            { name: "Firefox", value: 1000, fill: "hsl(var(--chart-4))" },
+          ]}
+          indicator="dashed"
+          className="w-[8rem]"
+        />
+      </div>
+      <div className="!hidden md:!flex">
+        <TooltipDemo
+          label="Page Views"
+          payload={[
+            { name: "Desktop", value: 12486, fill: "hsl(var(--chart-3))" },
+          ]}
+          className="w-[9rem]"
+          indicator="line"
+        />
+      </div>
+      <div className="!items-start !justify-start">
+        <div className="absolute top-[60px] left-[50px] z-10 text-sm font-medium">
+          Indicator
+        </div>
+        <TooltipDemo
+          label="Browser"
+          hideLabel
+          payload={[
+            { name: "Chrome", value: 1286, fill: "hsl(var(--chart-1))" },
+          ]}
+          indicator="dot"
+          className="w-[8rem]"
+        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="15"
+          height="34"
+          fill="none"
+          viewBox="0 0 75 175"
+          className="absolute top-[38px] left-[30px] z-10 rotate-[-40deg]"
+        >
+          <g clipPath="url(#abc)">
+            <path
+              fill="currentColor"
+              d="M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z"
+            />
+          </g>
+          <defs>
+            <clipPath id="abc">
+              <path fill="currentColor" d="M0 0h75v175H0z" />
+            </clipPath>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+function TooltipDemo({
+  indicator = "dot",
+  label,
+  payload,
+  hideLabel,
+  hideIndicator,
+  className,
+}: {
+  label: string
+  hideLabel?: boolean
+  hideIndicator?: boolean
+  indicator?: "line" | "dot" | "dashed"
+  payload: {
+    name: string
+    value: number
+    fill: string
+  }[]
+  nameKey?: string
+  labelKey?: string
+} & React.ComponentProps<"div">) {
+  const tooltipLabel = hideLabel ? null : (
+    <div className="font-medium">{label}</div>
+  )
+
+  if (!payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const indicatorColor = item.fill
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              )}
+            >
+              <>
+                {!hideIndicator && (
+                  <div
+                    className={cn(
+                      "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                      {
+                        "h-2.5 w-2.5": indicator === "dot",
+                        "w-1": indicator === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent":
+                          indicator === "dashed",
+                        "my-0.5": nestLabel && indicator === "dashed",
+                      }
+                    )}
+                    style={
+                      {
+                        "--color-bg": indicatorColor,
+                        "--color-border": indicatorColor,
+                      } as React.CSSProperties
+                    }
+                  />
+                )}
+                <div
+                  className={cn(
+                    "flex flex-1 justify-between leading-none",
+                    nestLabel ? "items-end" : "items-center"
+                  )}
+                >
+                  <div className="grid gap-1.5">
+                    {nestLabel ? tooltipLabel : null}
+                    <span className="text-muted-foreground">{item.name}</span>
+                  </div>
+                  <span className="text-foreground font-mono font-medium tabular-nums">
+                    {item.value.toLocaleString()}
+                  </span>
+                </div>
+              </>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/checkbox-demo.tsx b/apps/v4/registry/new-york-v4/examples/checkbox-demo.tsx
new file mode 100644
index 00000000000..62dabebc7bf
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/checkbox-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function CheckboxDemo() {
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-3">
+        <Checkbox id="terms" />
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+      <div className="flex items-start gap-3">
+        <Checkbox id="terms-2" defaultChecked />
+        <div className="grid gap-2">
+          <Label htmlFor="terms-2">Accept terms and conditions</Label>
+          <p className="text-muted-foreground text-sm">
+            By clicking this checkbox, you agree to the terms and conditions.
+          </p>
+        </div>
+      </div>
+      <div className="flex items-start gap-3">
+        <Checkbox id="toggle" disabled />
+        <Label htmlFor="toggle">Enable notifications</Label>
+      </div>
+      <Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
+        <Checkbox
+          id="toggle-2"
+          defaultChecked
+          className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+        />
+        <div className="grid gap-1.5 font-normal">
+          <p className="text-sm leading-none font-medium">
+            Enable notifications
+          </p>
+          <p className="text-muted-foreground text-sm">
+            You can enable or disable notifications at any time.
+          </p>
+        </div>
+      </Label>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/checkbox-disabled.tsx b/apps/v4/registry/new-york-v4/examples/checkbox-disabled.tsx
new file mode 100644
index 00000000000..632d821752c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/checkbox-disabled.tsx
@@ -0,0 +1,15 @@
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+
+export default function CheckboxDisabled() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms2" disabled />
+      <label
+        htmlFor="terms2"
+        className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/checkbox-form-multiple.tsx b/apps/v4/registry/new-york-v4/examples/checkbox-form-multiple.tsx
new file mode 100644
index 00000000000..b6878e89302
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/checkbox-form-multiple.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york-v4/ui/form"
+
+const items = [
+  {
+    id: "recents",
+    label: "Recents",
+  },
+  {
+    id: "home",
+    label: "Home",
+  },
+  {
+    id: "applications",
+    label: "Applications",
+  },
+  {
+    id: "desktop",
+    label: "Desktop",
+  },
+  {
+    id: "downloads",
+    label: "Downloads",
+  },
+  {
+    id: "documents",
+    label: "Documents",
+  },
+] as const
+
+const FormSchema = z.object({
+  items: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "You have to select at least one item.",
+  }),
+})
+
+export default function CheckboxReactHookFormMultiple() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      items: ["recents", "home"],
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="items"
+          render={() => (
+            <FormItem>
+              <div className="mb-4">
+                <FormLabel className="text-base">Sidebar</FormLabel>
+                <FormDescription>
+                  Select the items you want to display in the sidebar.
+                </FormDescription>
+              </div>
+              {items.map((item) => (
+                <FormField
+                  key={item.id}
+                  control={form.control}
+                  name="items"
+                  render={({ field }) => {
+                    return (
+                      <FormItem
+                        key={item.id}
+                        className="flex flex-row items-center gap-2"
+                      >
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value?.includes(item.id)}
+                            onCheckedChange={(checked) => {
+                              return checked
+                                ? field.onChange([...field.value, item.id])
+                                : field.onChange(
+                                    field.value?.filter(
+                                      (value) => value !== item.id
+                                    )
+                                  )
+                            }}
+                          />
+                        </FormControl>
+                        <FormLabel className="text-sm font-normal">
+                          {item.label}
+                        </FormLabel>
+                      </FormItem>
+                    )
+                  }}
+                />
+              ))}
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/checkbox-form-single.tsx b/apps/v4/registry/new-york-v4/examples/checkbox-form-single.tsx
new file mode 100644
index 00000000000..aef7c467491
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/checkbox-form-single.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import Link from "next/link"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/registry/new-york-v4/ui/form"
+
+const FormSchema = z.object({
+  mobile: z.boolean().default(false).optional(),
+})
+
+export default function CheckboxReactHookFormSingle() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      mobile: true,
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col items-start gap-4"
+      >
+        <FormField
+          control={form.control}
+          name="mobile"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-start gap-2 rounded-md border p-4 shadow-sm">
+              <FormControl>
+                <Checkbox
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <div className="space-y-1 leading-none">
+                <FormLabel>
+                  Use different settings for my mobile devices
+                </FormLabel>
+                <FormDescription>
+                  You can manage your mobile notifications in the{" "}
+                  <Link href="/examples/forms">mobile settings</Link> page.
+                </FormDescription>
+              </div>
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/checkbox-with-text.tsx b/apps/v4/registry/new-york-v4/examples/checkbox-with-text.tsx
new file mode 100644
index 00000000000..c90d242547a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/checkbox-with-text.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+
+export default function CheckboxWithText() {
+  return (
+    <div className="items-top flex gap-2">
+      <Checkbox id="terms1" />
+      <div className="grid gap-1.5 leading-none">
+        <label
+          htmlFor="terms1"
+          className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          Accept terms and conditions
+        </label>
+        <p className="text-muted-foreground text-sm">
+          You agree to our Terms of Service and Privacy Policy.
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/collapsible-demo.tsx b/apps/v4/registry/new-york-v4/examples/collapsible-demo.tsx
new file mode 100644
index 00000000000..9cc43c06278
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+
+export default function CollapsibleDemo() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="flex w-[350px] flex-col gap-2"
+    >
+      <div className="flex items-center justify-between gap-4 px-4">
+        <h4 className="text-sm font-semibold">
+          @peduarte starred 3 repositories
+        </h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="icon" className="size-8">
+            <ChevronsUpDown />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border px-4 py-2 font-mono text-sm">
+        @radix-ui/primitives
+      </div>
+      <CollapsibleContent className="flex flex-col gap-2">
+        <div className="rounded-md border px-4 py-2 font-mono text-sm">
+          @radix-ui/colors
+        </div>
+        <div className="rounded-md border px-4 py-2 font-mono text-sm">
+          @stitches/react
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/combobox-demo.tsx b/apps/v4/registry/new-york-v4/examples/combobox-demo.tsx
new file mode 100644
index 00000000000..662f522245a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/combobox-demo.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+const frameworks = [
+  {
+    value: "next.js",
+    label: "Next.js",
+  },
+  {
+    value: "sveltekit",
+    label: "SvelteKit",
+  },
+  {
+    value: "nuxt.js",
+    label: "Nuxt.js",
+  },
+  {
+    value: "remix",
+    label: "Remix",
+  },
+  {
+    value: "astro",
+    label: "Astro",
+  },
+]
+
+export default function ComboboxDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
+          <ChevronsUpDown className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." className="h-9" />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  {framework.label}
+                  <Check
+                    className={cn(
+                      "ml-auto",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/combobox-dropdown-menu.tsx b/apps/v4/registry/new-york-v4/examples/combobox-dropdown-menu.tsx
new file mode 100644
index 00000000000..d2522a81c2b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/combobox-dropdown-menu.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from "react"
+import { MoreHorizontal } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+const labels = [
+  "feature",
+  "bug",
+  "enhancement",
+  "documentation",
+  "design",
+  "question",
+  "maintenance",
+]
+
+export default function ComboboxDropdownMenu() {
+  const [label, setLabel] = React.useState("feature")
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+      <p className="text-sm leading-none font-medium">
+        <span className="bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs">
+          {label}
+        </span>
+        <span className="text-muted-foreground">Create a new project</span>
+      </p>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <MoreHorizontal />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[200px]">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuGroup>
+            <DropdownMenuItem>Assign to...</DropdownMenuItem>
+            <DropdownMenuItem>Set due date...</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="p-0">
+                <Command>
+                  <CommandInput
+                    placeholder="Filter label..."
+                    autoFocus={true}
+                    className="h-9"
+                  />
+                  <CommandList>
+                    <CommandEmpty>No label found.</CommandEmpty>
+                    <CommandGroup>
+                      {labels.map((label) => (
+                        <CommandItem
+                          key={label}
+                          value={label}
+                          onSelect={(value) => {
+                            setLabel(value)
+                            setOpen(false)
+                          }}
+                        >
+                          {label}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="text-red-600">
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/combobox-form.tsx b/apps/v4/registry/new-york-v4/examples/combobox-form.tsx
new file mode 100644
index 00000000000..288b51d5436
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/combobox-form.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york-v4/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+const languages = [
+  { label: "English", value: "en" },
+  { label: "French", value: "fr" },
+  { label: "German", value: "de" },
+  { label: "Spanish", value: "es" },
+  { label: "Portuguese", value: "pt" },
+  { label: "Russian", value: "ru" },
+  { label: "Japanese", value: "ja" },
+  { label: "Korean", value: "ko" },
+  { label: "Chinese", value: "zh" },
+] as const
+
+const FormSchema = z.object({
+  language: z.string({
+    required_error: "Please select a language.",
+  }),
+})
+
+export default function ComboboxForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="language"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Language</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "w-[200px] justify-between",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value
+                        ? languages.find(
+                            (language) => language.value === field.value
+                          )?.label
+                        : "Select language"}
+                      <ChevronsUpDown className="opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-[200px] p-0">
+                  <Command>
+                    <CommandInput
+                      placeholder="Search framework..."
+                      className="h-9"
+                    />
+                    <CommandList>
+                      <CommandEmpty>No framework found.</CommandEmpty>
+                      <CommandGroup>
+                        {languages.map((language) => (
+                          <CommandItem
+                            value={language.label}
+                            key={language.value}
+                            onSelect={() => {
+                              form.setValue("language", language.value)
+                            }}
+                          >
+                            {language.label}
+                            <Check
+                              className={cn(
+                                "ml-auto",
+                                language.value === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                This is the language that will be used in the dashboard.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/combobox-popover.tsx b/apps/v4/registry/new-york-v4/examples/combobox-popover.tsx
new file mode 100644
index 00000000000..58377475a57
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/combobox-popover.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+type Status = {
+  value: string
+  label: string
+}
+
+const statuses: Status[] = [
+  {
+    value: "backlog",
+    label: "Backlog",
+  },
+  {
+    value: "todo",
+    label: "Todo",
+  },
+  {
+    value: "in progress",
+    label: "In Progress",
+  },
+  {
+    value: "done",
+    label: "Done",
+  },
+  {
+    value: "canceled",
+    label: "Canceled",
+  },
+]
+
+export default function ComboboxPopover() {
+  const [open, setOpen] = React.useState(false)
+  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
+    null
+  )
+
+  return (
+    <div className="flex items-center space-x-4">
+      <p className="text-muted-foreground text-sm">Status</p>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" className="w-[150px] justify-start">
+            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0" side="right" align="start">
+          <Command>
+            <CommandInput placeholder="Change status..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                {statuses.map((status) => (
+                  <CommandItem
+                    key={status.value}
+                    value={status.value}
+                    onSelect={(value) => {
+                      setSelectedStatus(
+                        statuses.find((priority) => priority.value === value) ||
+                          null
+                      )
+                      setOpen(false)
+                    }}
+                  >
+                    {status.label}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/combobox-responsive.tsx b/apps/v4/registry/new-york-v4/examples/combobox-responsive.tsx
new file mode 100644
index 00000000000..f13ccf2eeb7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/combobox-responsive.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import * as React from "react"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york-v4/ui/command"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+type Status = {
+  value: string
+  label: string
+}
+
+const statuses: Status[] = [
+  {
+    value: "backlog",
+    label: "Backlog",
+  },
+  {
+    value: "todo",
+    label: "Todo",
+  },
+  {
+    value: "in progress",
+    label: "In Progress",
+  },
+  {
+    value: "done",
+    label: "Done",
+  },
+  {
+    value: "canceled",
+    label: "Canceled",
+  },
+]
+
+export default function ComboBoxResponsive() {
+  const [open, setOpen] = React.useState(false)
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
+    null
+  )
+
+  if (isDesktop) {
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" className="w-[150px] justify-start">
+            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[200px] p-0" align="start">
+          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
+        </PopoverContent>
+      </Popover>
+    )
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <Button variant="outline" className="w-[150px] justify-start">
+          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mt-4 border-t">
+          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function StatusList({
+  setOpen,
+  setSelectedStatus,
+}: {
+  setOpen: (open: boolean) => void
+  setSelectedStatus: (status: Status | null) => void
+}) {
+  return (
+    <Command>
+      <CommandInput placeholder="Filter status..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup>
+          {statuses.map((status) => (
+            <CommandItem
+              key={status.value}
+              value={status.value}
+              onSelect={(value) => {
+                setSelectedStatus(
+                  statuses.find((priority) => priority.value === value) || null
+                )
+                setOpen(false)
+              }}
+            >
+              {status.label}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/command-demo.tsx b/apps/v4/registry/new-york-v4/examples/command-demo.tsx
new file mode 100644
index 00000000000..068e07886e8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/command-demo.tsx
@@ -0,0 +1,62 @@
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/registry/new-york-v4/ui/command"
+
+export default function CommandDemo() {
+  return (
+    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <Calendar />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <Smile />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem disabled>
+            <Calculator />
+            <span>Calculator</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <User />
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <CreditCard />
+            <span>Billing</span>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Settings />
+            <span>Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/command-dialog.tsx b/apps/v4/registry/new-york-v4/examples/command-dialog.tsx
new file mode 100644
index 00000000000..9845354bf23
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/command-dialog.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react"
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/registry/new-york-v4/ui/command"
+
+export default function CommandDialogDemo() {
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  return (
+    <>
+      <p className="text-muted-foreground text-sm">
+        Press{" "}
+        <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
+          <span className="text-xs">⌘</span>J
+        </kbd>
+      </p>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
+              <Calendar />
+              <span>Calendar</span>
+            </CommandItem>
+            <CommandItem>
+              <Smile />
+              <span>Search Emoji</span>
+            </CommandItem>
+            <CommandItem>
+              <Calculator />
+              <span>Calculator</span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem>
+              <User />
+              <span>Profile</span>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <CreditCard />
+              <span>Billing</span>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <Settings />
+              <span>Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/context-menu-demo.tsx b/apps/v4/registry/new-york-v4/examples/context-menu-demo.tsx
new file mode 100644
index 00000000000..2a994771182
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/context-menu-demo.tsx
@@ -0,0 +1,64 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/registry/new-york-v4/ui/context-menu"
+
+export default function ContextMenuDemo() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-52">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-44">
+            <ContextMenuItem>Save Page...</ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value="pedro">
+          <ContextMenuLabel inset>People</ContextMenuLabel>
+          <ContextMenuRadioItem value="pedro">
+            Pedro Duarte
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx b/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx
new file mode 100644
index 00000000000..0b614c44905
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx
@@ -0,0 +1,312 @@
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table"
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york-v4/ui/table"
+
+const data: Payment[] = [
+  {
+    id: "m5gr84i9",
+    amount: 316,
+    status: "success",
+    email: "ken99@example.com",
+  },
+  {
+    id: "3u1reuv4",
+    amount: 242,
+    status: "success",
+    email: "Abe45@example.com",
+  },
+  {
+    id: "derv1ws0",
+    amount: 837,
+    status: "processing",
+    email: "Monserrat44@example.com",
+  },
+  {
+    id: "5kma53ae",
+    amount: 874,
+    status: "success",
+    email: "Silas22@example.com",
+  },
+  {
+    id: "bhqecj4p",
+    amount: 721,
+    status: "failed",
+    email: "carmella@example.com",
+  },
+]
+
+export type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <div className="capitalize">{row.getValue("status")}</div>
+    ),
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <ArrowUpDown />
+        </Button>
+      )
+    },
+    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
+  },
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"))
+
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount)
+
+      return <div className="text-right font-medium">{formatted}</div>
+    },
+  },
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(payment.id)}
+            >
+              Copy payment ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>View customer</DropdownMenuItem>
+            <DropdownMenuItem>View payment details</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]
+
+export default function DataTableDemo() {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center py-4">
+        <Input
+          placeholder="Filter emails..."
+          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Columns <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                )
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="overflow-hidden rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <div className="text-muted-foreground flex-1 text-sm">
+          {table.getFilteredSelectedRowModel().rows.length} of{" "}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </div>
+        <div className="space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/date-picker-demo.tsx b/apps/v4/registry/new-york-v4/examples/date-picker-demo.tsx
new file mode 100644
index 00000000000..adbda5adb2b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[240px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/date-picker-form.tsx b/apps/v4/registry/new-york-v4/examples/date-picker-form.tsx
new file mode 100644
index 00000000000..727a0da38d9
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/date-picker-form.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york-v4/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+const FormSchema = z.object({
+  dob: z.date({
+    required_error: "A date of birth is required.",
+  }),
+})
+
+export default function DatePickerForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="dob"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Date of birth</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant={"outline"}
+                      className={cn(
+                        "w-[240px] pl-3 text-left font-normal",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value ? (
+                        format(field.value, "PPP")
+                      ) : (
+                        <span>Pick a date</span>
+                      )}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    disabled={(date) =>
+                      date > new Date() || date < new Date("1900-01-01")
+                    }
+                    captionLayout="dropdown"
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                Your date of birth is used to calculate your age.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/date-picker-with-presets.tsx b/apps/v4/registry/new-york-v4/examples/date-picker-with-presets.tsx
new file mode 100644
index 00000000000..a72a8404a6d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/date-picker-with-presets.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+export default function DatePickerWithPresets() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[240px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="flex w-auto flex-col space-y-2 p-2"
+      >
+        <Select
+          onValueChange={(value) =>
+            setDate(addDays(new Date(), parseInt(value)))
+          }
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent position="popper">
+            <SelectItem value="0">Today</SelectItem>
+            <SelectItem value="1">Tomorrow</SelectItem>
+            <SelectItem value="3">In 3 days</SelectItem>
+            <SelectItem value="7">In a week</SelectItem>
+          </SelectContent>
+        </Select>
+        <div className="rounded-md border">
+          <Calendar mode="single" selected={date} onSelect={setDate} />
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/date-picker-with-range.tsx b/apps/v4/registry/new-york-v4/examples/date-picker-with-range.tsx
new file mode 100644
index 00000000000..6988f47229c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/date-picker-with-range.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Calendar } from "@/registry/new-york-v4/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function DatePickerWithRange({
+  className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2022, 0, 20),
+    to: addDays(new Date(2022, 0, 20), 20),
+  })
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn(
+              "w-[300px] justify-start text-left font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "LLL dd, y")} -{" "}
+                  {format(date.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(date.from, "LLL dd, y")
+              )
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/dialog-close-button.tsx b/apps/v4/registry/new-york-v4/examples/dialog-close-button.tsx
new file mode 100644
index 00000000000..628c7cd509b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/dialog-close-button.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york-v4/ui/dialog"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function DialogCloseButton() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Share</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share link</DialogTitle>
+          <DialogDescription>
+            Anyone who has this link will be able to view this.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center gap-2">
+          <div className="grid flex-1 gap-2">
+            <Label htmlFor="link" className="sr-only">
+              Link
+            </Label>
+            <Input
+              id="link"
+              defaultValue="https://ui.shadcn.com/docs/installation"
+              readOnly
+            />
+          </div>
+        </div>
+        <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/dialog-demo.tsx b/apps/v4/registry/new-york-v4/examples/dialog-demo.tsx
new file mode 100644
index 00000000000..8ce938334c8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/dialog-demo.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york-v4/ui/dialog"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function DialogDemo() {
+  return (
+    <Dialog>
+      <form>
+        <DialogTrigger asChild>
+          <Button variant="outline">Open Dialog</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you&apos;re
+              done.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4">
+            <div className="grid gap-3">
+              <Label htmlFor="name-1">Name</Label>
+              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className="grid gap-3">
+              <Label htmlFor="username-1">Username</Label>
+              <Input id="username-1" name="username" defaultValue="@peduarte" />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Save changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </form>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/drawer-demo.tsx b/apps/v4/registry/new-york-v4/examples/drawer-demo.tsx
new file mode 100644
index 00000000000..e2be27ffdfd
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/drawer-demo.tsx
@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+
+const data = [
+  {
+    goal: 400,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 239,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 349,
+  },
+]
+
+export default function DrawerDemo() {
+  const [goal, setGoal] = React.useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Move Goal</DrawerTitle>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 pb-0">
+            <div className="flex items-center justify-center space-x-2">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(-10)}
+                disabled={goal <= 200}
+              >
+                <Minus />
+                <span className="sr-only">Decrease</span>
+              </Button>
+              <div className="flex-1 text-center">
+                <div className="text-7xl font-bold tracking-tighter">
+                  {goal}
+                </div>
+                <div className="text-muted-foreground text-[0.70rem] uppercase">
+                  Calories/day
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(10)}
+                disabled={goal >= 400}
+              >
+                <Plus />
+                <span className="sr-only">Increase</span>
+              </Button>
+            </div>
+            <div className="mt-3 h-[120px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={data}>
+                  <Bar
+                    dataKey="goal"
+                    style={
+                      {
+                        fill: "hsl(var(--foreground))",
+                        opacity: 0.9,
+                      } as React.CSSProperties
+                    }
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/drawer-dialog.tsx b/apps/v4/registry/new-york-v4/examples/drawer-dialog.tsx
new file mode 100644
index 00000000000..4bfa7c897b7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/drawer-dialog.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york-v4/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function DrawerDialogDemo() {
+  const [open, setOpen] = React.useState(false)
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  if (isDesktop) {
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button variant="outline">Edit Profile</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you&apos;re
+              done.
+            </DialogDescription>
+          </DialogHeader>
+          <ProfileForm />
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="text-left">
+          <DrawerTitle>Edit profile</DrawerTitle>
+          <DrawerDescription>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </DrawerDescription>
+        </DrawerHeader>
+        <ProfileForm className="px-4" />
+        <DrawerFooter className="pt-2">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function ProfileForm({ className }: React.ComponentProps<"form">) {
+  return (
+    <form className={cn("grid items-start gap-6", className)}>
+      <div className="grid gap-3">
+        <Label htmlFor="email">Email</Label>
+        <Input type="email" id="email" defaultValue="shadcn@example.com" />
+      </div>
+      <div className="grid gap-3">
+        <Label htmlFor="username">Username</Label>
+        <Input id="username" defaultValue="@shadcn" />
+      </div>
+      <Button type="submit">Save changes</Button>
+    </form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/dropdown-menu-checkboxes.tsx b/apps/v4/registry/new-york-v4/examples/dropdown-menu-checkboxes.tsx
new file mode 100644
index 00000000000..b2b6593eed2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/dropdown-menu-checkboxes.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+type Checked = DropdownMenuCheckboxItemProps["checked"]
+
+export default function DropdownMenuCheckboxes() {
+  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
+  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
+  const [showPanel, setShowPanel] = React.useState<Checked>(false)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem
+          checked={showStatusBar}
+          onCheckedChange={setShowStatusBar}
+        >
+          Status Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={showActivityBar}
+          onCheckedChange={setShowActivityBar}
+          disabled
+        >
+          Activity Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={showPanel}
+          onCheckedChange={setShowPanel}
+        >
+          Panel
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/dropdown-menu-demo.tsx b/apps/v4/registry/new-york-v4/examples/dropdown-menu-demo.tsx
new file mode 100644
index 00000000000..35075e6527b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/dropdown-menu-demo.tsx
@@ -0,0 +1,74 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+export default function DropdownMenuDemo() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="start">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Billing
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Settings
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Keyboard shortcuts
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Team</DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>Email</DropdownMenuItem>
+                <DropdownMenuItem>Message</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>More...</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            New Team
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>GitHub</DropdownMenuItem>
+        <DropdownMenuItem>Support</DropdownMenuItem>
+        <DropdownMenuItem disabled>API</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          Log out
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/dropdown-menu-radio-group.tsx b/apps/v4/registry/new-york-v4/examples/dropdown-menu-radio-group.tsx
new file mode 100644
index 00000000000..d64ed308002
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/dropdown-menu-radio-group.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+export default function DropdownMenuRadioGroupDemo() {
+  const [position, setPosition] = React.useState("bottom")
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/hover-card-demo.tsx b/apps/v4/registry/new-york-v4/examples/hover-card-demo.tsx
new file mode 100644
index 00000000000..f5cf7adc17f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/hover-card-demo.tsx
@@ -0,0 +1,40 @@
+import { CalendarIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york-v4/ui/hover-card"
+
+export default function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="link">@nextjs</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex justify-between gap-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/vercel.png" />
+            <AvatarFallback>VC</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@nextjs</h4>
+            <p className="text-sm">
+              The React Framework – created and maintained by @vercel.
+            </p>
+            <div className="text-muted-foreground text-xs">
+              Joined December 2021
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-demo.tsx b/apps/v4/registry/new-york-v4/examples/input-demo.tsx
new file mode 100644
index 00000000000..4fbe0cc97de
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/registry/new-york-v4/ui/input"
+
+export default function InputDemo() {
+  return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-disabled.tsx b/apps/v4/registry/new-york-v4/examples/input-disabled.tsx
new file mode 100644
index 00000000000..b68794dce3d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-disabled.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/registry/new-york-v4/ui/input"
+
+export default function InputDisabled() {
+  return <Input disabled type="email" placeholder="Email" />
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-file.tsx b/apps/v4/registry/new-york-v4/examples/input-file.tsx
new file mode 100644
index 00000000000..aa1a3f09475
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-file.tsx
@@ -0,0 +1,11 @@
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function InputFile() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-3">
+      <Label htmlFor="picture">Picture</Label>
+      <Input id="picture" type="file" />
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-form.tsx b/apps/v4/registry/new-york-v4/examples/input-form.tsx
new file mode 100644
index 00000000000..16d7050d76e
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-form.tsx
@@ -0,0 +1,67 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york-v4/ui/form"
+import { Input } from "@/registry/new-york-v4/ui/input"
+
+const FormSchema = z.object({
+  username: z.string().min(2, {
+    message: "Username must be at least 2 characters.",
+  }),
+})
+
+export default function InputForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      username: "",
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-otp-controlled.tsx b/apps/v4/registry/new-york-v4/examples/input-otp-controlled.tsx
new file mode 100644
index 00000000000..7c20e0446b4
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-otp-controlled.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/registry/new-york-v4/ui/input-otp"
+
+export default function InputOTPControlled() {
+  const [value, setValue] = React.useState("")
+
+  return (
+    <div className="space-y-2">
+      <InputOTP
+        maxLength={6}
+        value={value}
+        onChange={(value) => setValue(value)}
+      >
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+      <div className="text-center text-sm">
+        {value === "" ? (
+          <>Enter your one-time password.</>
+        ) : (
+          <>You entered: {value}</>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-otp-demo.tsx b/apps/v4/registry/new-york-v4/examples/input-otp-demo.tsx
new file mode 100644
index 00000000000..34d82fbc88c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-otp-demo.tsx
@@ -0,0 +1,24 @@
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/registry/new-york-v4/ui/input-otp"
+
+export default function InputOTPDemo() {
+  return (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-otp-form.tsx b/apps/v4/registry/new-york-v4/examples/input-otp-form.tsx
new file mode 100644
index 00000000000..bafab40b134
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-otp-form.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york-v4/ui/form"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/registry/new-york-v4/ui/input-otp"
+
+const FormSchema = z.object({
+  pin: z.string().min(6, {
+    message: "Your one-time password must be 6 characters.",
+  }),
+})
+
+export default function InputOTPForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      pin: "",
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="pin"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>One-Time Password</FormLabel>
+              <FormControl>
+                <InputOTP maxLength={6} {...field}>
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </FormControl>
+              <FormDescription>
+                Please enter the one-time password sent to your phone.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-otp-pattern.tsx b/apps/v4/registry/new-york-v4/examples/input-otp-pattern.tsx
new file mode 100644
index 00000000000..33bec782caa
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-otp-pattern.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/registry/new-york-v4/ui/input-otp"
+
+export default function InputOTPPattern() {
+  return (
+    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-otp-separator.tsx b/apps/v4/registry/new-york-v4/examples/input-otp-separator.tsx
new file mode 100644
index 00000000000..eaac7d96a1a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-otp-separator.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/registry/new-york-v4/ui/input-otp"
+
+export default function InputOTPWithSeparator() {
+  return (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-with-button.tsx b/apps/v4/registry/new-york-v4/examples/input-with-button.tsx
new file mode 100644
index 00000000000..2e6c3d11c2f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-with-button.tsx
@@ -0,0 +1,13 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+
+export default function InputWithButton() {
+  return (
+    <div className="flex w-full max-w-sm items-center gap-2">
+      <Input type="email" placeholder="Email" />
+      <Button type="submit" variant="outline">
+        Subscribe
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-with-label.tsx b/apps/v4/registry/new-york-v4/examples/input-with-label.tsx
new file mode 100644
index 00000000000..ed798cc5ab6
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-with-label.tsx
@@ -0,0 +1,11 @@
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function InputWithLabel() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-3">
+      <Label htmlFor="email">Email</Label>
+      <Input type="email" id="email" placeholder="Email" />
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/input-with-text.tsx b/apps/v4/registry/new-york-v4/examples/input-with-text.tsx
new file mode 100644
index 00000000000..7a47c5fd19b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/input-with-text.tsx
@@ -0,0 +1,12 @@
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function InputWithText() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-3">
+      <Label htmlFor="email-2">Email</Label>
+      <Input type="email" id="email-2" placeholder="Email" />
+      <p className="text-muted-foreground text-sm">Enter your email address.</p>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/label-demo.tsx b/apps/v4/registry/new-york-v4/examples/label-demo.tsx
new file mode 100644
index 00000000000..7556a142dd8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/label-demo.tsx
@@ -0,0 +1,13 @@
+import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+export default function LabelDemo() {
+  return (
+    <div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="terms" />
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/menubar-demo.tsx b/apps/v4/registry/new-york-v4/examples/menubar-demo.tsx
new file mode 100644
index 00000000000..9c821ce515b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/menubar-demo.tsx
@@ -0,0 +1,107 @@
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/registry/new-york-v4/ui/menubar"
+
+export default function MenubarDemo() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/mode-toggle.tsx b/apps/v4/registry/new-york-v4/examples/mode-toggle.tsx
new file mode 100644
index 00000000000..85bd2192504
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/mode-toggle.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+export default function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/navigation-menu-demo.tsx b/apps/v4/registry/new-york-v4/examples/navigation-menu-demo.tsx
new file mode 100644
index 00000000000..8b798dd3f42
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/navigation-menu-demo.tsx
@@ -0,0 +1,212 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { CircleCheckIcon, CircleHelpIcon, CircleIcon } from "lucide-react"
+
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/registry/new-york-v4/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+export default function NavigationMenuDemo() {
+  return (
+    <NavigationMenu viewport={false}>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Home</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+              <li className="row-span-3">
+                <NavigationMenuLink asChild>
+                  <a
+                    className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md"
+                    href="/"
+                  >
+                    <div className="mt-4 mb-2 text-lg font-medium">
+                      shadcn/ui
+                    </div>
+                    <p className="text-muted-foreground text-sm leading-tight">
+                      Beautifully designed components built with Tailwind CSS.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+              <ListItem href="/docs" title="Introduction">
+                Re-usable components built using Radix UI and Tailwind CSS.
+              </ListItem>
+              <ListItem href="/docs/installation" title="Installation">
+                How to install dependencies and structure your app.
+              </ListItem>
+              <ListItem href="/docs/primitives/typography" title="Typography">
+                Styles for headings, paragraphs, lists...etc
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+              {components.map((component) => (
+                <ListItem
+                  key={component.title}
+                  title={component.title}
+                  href={component.href}
+                >
+                  {component.description}
+                </ListItem>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link href="/docs">Docs</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>List</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[300px] gap-4">
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="#">
+                    <div className="font-medium">Components</div>
+                    <div className="text-muted-foreground">
+                      Browse all components in the library.
+                    </div>
+                  </Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#">
+                    <div className="font-medium">Documentation</div>
+                    <div className="text-muted-foreground">
+                      Learn how to use the library.
+                    </div>
+                  </Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#">
+                    <div className="font-medium">Blog</div>
+                    <div className="text-muted-foreground">
+                      Read our latest blog posts.
+                    </div>
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Simple</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[200px] gap-4">
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="#">Components</Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#">Documentation</Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#">Blocks</Link>
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[200px] gap-4">
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="#" className="flex-row items-center gap-2">
+                    <CircleHelpIcon />
+                    Backlog
+                  </Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#" className="flex-row items-center gap-2">
+                    <CircleIcon />
+                    To Do
+                  </Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#" className="flex-row items-center gap-2">
+                    <CircleCheckIcon />
+                    Done
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+
+function ListItem({
+  title,
+  children,
+  href,
+  ...props
+}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
+  return (
+    <li {...props}>
+      <NavigationMenuLink asChild>
+        <Link href={href}>
+          <div className="text-sm leading-none font-medium">{title}</div>
+          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+            {children}
+          </p>
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/pagination-demo.tsx b/apps/v4/registry/new-york-v4/examples/pagination-demo.tsx
new file mode 100644
index 00000000000..e746ad4e008
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/pagination-demo.tsx
@@ -0,0 +1,38 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/registry/new-york-v4/ui/pagination"
+
+export default function PaginationDemo() {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/popover-demo.tsx b/apps/v4/registry/new-york-v4/examples/popover-demo.tsx
new file mode 100644
index 00000000000..2b6ea01652a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/popover-demo.tsx
@@ -0,0 +1,62 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function PopoverDemo() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="leading-none font-medium">Dimensions</h4>
+            <p className="text-muted-foreground text-sm">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxWidth">Max. width</Label>
+              <Input
+                id="maxWidth"
+                defaultValue="300px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxHeight">Max. height</Label>
+              <Input
+                id="maxHeight"
+                defaultValue="none"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/progress-demo.tsx b/apps/v4/registry/new-york-v4/examples/progress-demo.tsx
new file mode 100644
index 00000000000..0792c2c1cee
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/progress-demo.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import * as React from "react"
+
+import { Progress } from "@/registry/new-york-v4/ui/progress"
+
+export default function ProgressDemo() {
+  const [progress, setProgress] = React.useState(13)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return <Progress value={progress} className="w-[60%]" />
+}
diff --git a/apps/v4/registry/new-york-v4/examples/radio-group-demo.tsx b/apps/v4/registry/new-york-v4/examples/radio-group-demo.tsx
new file mode 100644
index 00000000000..297fa193700
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/radio-group-demo.tsx
@@ -0,0 +1,24 @@
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/new-york-v4/ui/radio-group"
+
+export default function RadioGroupDemo() {
+  return (
+    <RadioGroup defaultValue="comfortable">
+      <div className="flex items-center gap-3">
+        <RadioGroupItem value="default" id="r1" />
+        <Label htmlFor="r1">Default</Label>
+      </div>
+      <div className="flex items-center gap-3">
+        <RadioGroupItem value="comfortable" id="r2" />
+        <Label htmlFor="r2">Comfortable</Label>
+      </div>
+      <div className="flex items-center gap-3">
+        <RadioGroupItem value="compact" id="r3" />
+        <Label htmlFor="r3">Compact</Label>
+      </div>
+    </RadioGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/radio-group-form.tsx b/apps/v4/registry/new-york-v4/examples/radio-group-form.tsx
new file mode 100644
index 00000000000..17b0f177b94
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/radio-group-form.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york-v4/ui/form"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/new-york-v4/ui/radio-group"
+
+const FormSchema = z.object({
+  type: z.enum(["all", "mentions", "none"], {
+    required_error: "You need to select a notification type.",
+  }),
+})
+
+export default function RadioGroupForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="type"
+          render={({ field }) => (
+            <FormItem className="space-y-3">
+              <FormLabel>Notify me about...</FormLabel>
+              <FormControl>
+                <RadioGroup
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                  className="flex flex-col"
+                >
+                  <FormItem className="flex items-center gap-3">
+                    <FormControl>
+                      <RadioGroupItem value="all" />
+                    </FormControl>
+                    <FormLabel className="font-normal">
+                      All new messages
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem className="flex items-center gap-3">
+                    <FormControl>
+                      <RadioGroupItem value="mentions" />
+                    </FormControl>
+                    <FormLabel className="font-normal">
+                      Direct messages and mentions
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem className="flex items-center gap-3">
+                    <FormControl>
+                      <RadioGroupItem value="none" />
+                    </FormControl>
+                    <FormLabel className="font-normal">Nothing</FormLabel>
+                  </FormItem>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/resizable-demo-with-handle.tsx b/apps/v4/registry/new-york-v4/examples/resizable-demo-with-handle.tsx
new file mode 100644
index 00000000000..9eeb3f20936
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/resizable-demo-with-handle.tsx
@@ -0,0 +1,36 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york-v4/ui/resizable"
+
+export default function ResizableDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="max-w-md rounded-lg border md:min-w-[450px]"
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Two</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Three</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/resizable-demo.tsx b/apps/v4/registry/new-york-v4/examples/resizable-demo.tsx
new file mode 100644
index 00000000000..8e4ba87ff28
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/resizable-demo.tsx
@@ -0,0 +1,36 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york-v4/ui/resizable"
+
+export default function ResizableDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="max-w-md rounded-lg border md:min-w-[450px]"
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Two</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Three</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/resizable-handle.tsx b/apps/v4/registry/new-york-v4/examples/resizable-handle.tsx
new file mode 100644
index 00000000000..f07f1902adc
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/resizable-handle.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york-v4/ui/resizable"
+
+export default function ResizableHandleDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/resizable-vertical.tsx b/apps/v4/registry/new-york-v4/examples/resizable-vertical.tsx
new file mode 100644
index 00000000000..acd24f9646e
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/resizable-vertical.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york-v4/ui/resizable"
+
+export default function ResizableDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="vertical"
+      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Header</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/scroll-area-demo.tsx b/apps/v4/registry/new-york-v4/examples/scroll-area-demo.tsx
new file mode 100644
index 00000000000..f0e3622f0d2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/scroll-area-demo.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { ScrollArea } from "@/registry/new-york-v4/ui/scroll-area"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+export default function ScrollAreaDemo() {
+  return (
+    <ScrollArea className="h-72 w-48 rounded-md border">
+      <div className="p-4">
+        <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
+        {tags.map((tag) => (
+          <React.Fragment key={tag}>
+            <div className="text-sm">{tag}</div>
+            <Separator className="my-2" />
+          </React.Fragment>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx b/apps/v4/registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx
new file mode 100644
index 00000000000..d88dd9d5e77
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import Image from "next/image"
+
+import { ScrollArea, ScrollBar } from "@/registry/new-york-v4/ui/scroll-area"
+
+export interface Artwork {
+  artist: string
+  art: string
+}
+
+export const works: Artwork[] = [
+  {
+    artist: "Ornella Binni",
+    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Vladimir Malyavko",
+    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+  },
+]
+
+export default function ScrollAreaHorizontalDemo() {
+  return (
+    <ScrollArea className="w-96 rounded-md border whitespace-nowrap">
+      <div className="flex w-max space-x-4 p-4">
+        {works.map((artwork) => (
+          <figure key={artwork.artist} className="shrink-0">
+            <div className="overflow-hidden rounded-md">
+              <Image
+                src={artwork.art}
+                alt={`Photo by ${artwork.artist}`}
+                className="aspect-[3/4] h-fit w-fit object-cover"
+                width={300}
+                height={400}
+              />
+            </div>
+            <figcaption className="text-muted-foreground pt-2 text-xs">
+              Photo by{" "}
+              <span className="text-foreground font-semibold">
+                {artwork.artist}
+              </span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/select-demo.tsx b/apps/v4/registry/new-york-v4/examples/select-demo.tsx
new file mode 100644
index 00000000000..4c5b1e840ab
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/select-demo.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+export default function SelectDemo() {
+  return (
+    <Select>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes">Grapes</SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/select-form.tsx b/apps/v4/registry/new-york-v4/examples/select-form.tsx
new file mode 100644
index 00000000000..65bb3a3bcf5
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/select-form.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import Link from "next/link"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york-v4/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+const FormSchema = z.object({
+  email: z
+    .string({
+      required_error: "Please select an email to display.",
+    })
+    .email(),
+})
+
+export default function SelectForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a verified email to display" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="m@example.com">m@example.com</SelectItem>
+                  <SelectItem value="m@google.com">m@google.com</SelectItem>
+                  <SelectItem value="m@support.com">m@support.com</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                You can manage email addresses in your{" "}
+                <Link href="/examples/forms">email settings</Link>.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/select-scrollable.tsx b/apps/v4/registry/new-york-v4/examples/select-scrollable.tsx
new file mode 100644
index 00000000000..b7288dde550
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/select-scrollable.tsx
@@ -0,0 +1,75 @@
+import * as React from "react"
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york-v4/ui/select"
+
+export default function SelectScrollable() {
+  return (
+    <Select>
+      <SelectTrigger className="w-[280px]">
+        <SelectValue placeholder="Select a timezone" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>North America</SelectLabel>
+          <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
+          <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
+          <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
+          <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
+          <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
+          <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Europe & Africa</SelectLabel>
+          <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+          <SelectItem value="cet">Central European Time (CET)</SelectItem>
+          <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
+          <SelectItem value="west">
+            Western European Summer Time (WEST)
+          </SelectItem>
+          <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
+          <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Asia</SelectLabel>
+          <SelectItem value="msk">Moscow Time (MSK)</SelectItem>
+          <SelectItem value="ist">India Standard Time (IST)</SelectItem>
+          <SelectItem value="cst_china">China Standard Time (CST)</SelectItem>
+          <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
+          <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
+          <SelectItem value="ist_indonesia">
+            Indonesia Central Standard Time (WITA)
+          </SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Australia & Pacific</SelectLabel>
+          <SelectItem value="awst">
+            Australian Western Standard Time (AWST)
+          </SelectItem>
+          <SelectItem value="acst">
+            Australian Central Standard Time (ACST)
+          </SelectItem>
+          <SelectItem value="aest">
+            Australian Eastern Standard Time (AEST)
+          </SelectItem>
+          <SelectItem value="nzst">New Zealand Standard Time (NZST)</SelectItem>
+          <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>South America</SelectLabel>
+          <SelectItem value="art">Argentina Time (ART)</SelectItem>
+          <SelectItem value="bot">Bolivia Time (BOT)</SelectItem>
+          <SelectItem value="brt">Brasilia Time (BRT)</SelectItem>
+          <SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/separator-demo.tsx b/apps/v4/registry/new-york-v4/examples/separator-demo.tsx
new file mode 100644
index 00000000000..406eae19136
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/separator-demo.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+export default function SeparatorDemo() {
+  return (
+    <div>
+      <div className="space-y-1">
+        <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
+        <p className="text-muted-foreground text-sm">
+          An open-source UI component library.
+        </p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-sm">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/sheet-demo.tsx b/apps/v4/registry/new-york-v4/examples/sheet-demo.tsx
new file mode 100644
index 00000000000..f78da94f0b3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/sheet-demo.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/new-york-v4/ui/sheet"
+
+export default function SheetDemo() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="grid flex-1 auto-rows-min gap-6 px-4">
+          <div className="grid gap-3">
+            <Label htmlFor="sheet-demo-name">Name</Label>
+            <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
+          </div>
+          <div className="grid gap-3">
+            <Label htmlFor="sheet-demo-username">Username</Label>
+            <Input id="sheet-demo-username" defaultValue="@peduarte" />
+          </div>
+        </div>
+        <SheetFooter>
+          <Button type="submit">Save changes</Button>
+          <SheetClose asChild>
+            <Button variant="outline">Close</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/sheet-side.tsx b/apps/v4/registry/new-york-v4/examples/sheet-side.tsx
new file mode 100644
index 00000000000..3e37f0b13ea
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/sheet-side.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/new-york-v4/ui/sheet"
+
+const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
+
+type SheetSide = (typeof SHEET_SIDES)[number]
+
+export default function SheetSide() {
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      {SHEET_SIDES.map((side) => (
+        <Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button variant="outline">{side}</Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>Edit profile</SheetTitle>
+              <SheetDescription>
+                Make changes to your profile here. Click save when you're done.
+              </SheetDescription>
+            </SheetHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="name" className="text-right">
+                  Name
+                </Label>
+                <Input id="name" value="Pedro Duarte" className="col-span-3" />
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="username" className="text-right">
+                  Username
+                </Label>
+                <Input id="username" value="@peduarte" className="col-span-3" />
+              </div>
+            </div>
+            <SheetFooter>
+              <SheetClose asChild>
+                <Button type="submit">Save changes</Button>
+              </SheetClose>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/skeleton-card.tsx b/apps/v4/registry/new-york-v4/examples/skeleton-card.tsx
new file mode 100644
index 00000000000..c7379b8130a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/skeleton-card.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
+
+export default function SkeletonCard() {
+  return (
+    <div className="flex flex-col space-y-3">
+      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/skeleton-demo.tsx b/apps/v4/registry/new-york-v4/examples/skeleton-demo.tsx
new file mode 100644
index 00000000000..d55e6bae179
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/skeleton-demo.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
+
+export default function SkeletonDemo() {
+  return (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/slider-demo.tsx b/apps/v4/registry/new-york-v4/examples/slider-demo.tsx
new file mode 100644
index 00000000000..bd5f6b2f43f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/slider-demo.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils"
+import { Slider } from "@/registry/new-york-v4/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderDemo({ className, ...props }: SliderProps) {
+  return (
+    <Slider
+      defaultValue={[50]}
+      max={100}
+      step={1}
+      className={cn("w-[60%]", className)}
+      {...props}
+    />
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/sonner-demo.tsx b/apps/v4/registry/new-york-v4/examples/sonner-demo.tsx
new file mode 100644
index 00000000000..50685f35368
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/sonner-demo.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { toast } from "sonner"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+export default function SonnerDemo() {
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast("Event has been created", {
+          description: "Sunday, December 03, 2023 at 9:00 AM",
+          action: {
+            label: "Undo",
+            onClick: () => console.log("Undo"),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/switch-demo.tsx b/apps/v4/registry/new-york-v4/examples/switch-demo.tsx
new file mode 100644
index 00000000000..477ffdb31ef
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/switch-demo.tsx
@@ -0,0 +1,11 @@
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
+
+export default function SwitchDemo() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch id="airplane-mode" />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/switch-form.tsx b/apps/v4/registry/new-york-v4/examples/switch-form.tsx
new file mode 100644
index 00000000000..d93c3bc2f6a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/switch-form.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/registry/new-york-v4/ui/form"
+import { Switch } from "@/registry/new-york-v4/ui/switch"
+
+const FormSchema = z.object({
+  marketing_emails: z.boolean().default(false).optional(),
+  security_emails: z.boolean(),
+})
+
+export default function SwitchForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      security_emails: true,
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
+        <div>
+          <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="marketing_emails"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                  <div className="space-y-0.5">
+                    <FormLabel>Marketing emails</FormLabel>
+                    <FormDescription>
+                      Receive emails about new products, features, and more.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="security_emails"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                  <div className="space-y-0.5">
+                    <FormLabel>Security emails</FormLabel>
+                    <FormDescription>
+                      Receive emails about your account security.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                      disabled
+                      aria-readonly
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </div>
+        </div>
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/table-demo.tsx b/apps/v4/registry/new-york-v4/examples/table-demo.tsx
new file mode 100644
index 00000000000..36a752eebab
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/table-demo.tsx
@@ -0,0 +1,87 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york-v4/ui/table"
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
+
+export default function TableDemo() {
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/tabs-demo.tsx b/apps/v4/registry/new-york-v4/examples/tabs-demo.tsx
new file mode 100644
index 00000000000..6a1a413e48a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/tabs-demo.tsx
@@ -0,0 +1,80 @@
+import { AppWindowIcon, CodeIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Label } from "@/registry/new-york-v4/ui/label"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+
+export default function TabsDemo() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-6">
+      <Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+          <Card>
+            <CardHeader>
+              <CardTitle>Account</CardTitle>
+              <CardDescription>
+                Make changes to your account here. Click save when you&apos;re
+                done.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-6">
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-name">Name</Label>
+                <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-username">Username</Label>
+                <Input id="tabs-demo-username" defaultValue="@peduarte" />
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button>Save changes</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+        <TabsContent value="password">
+          <Card>
+            <CardHeader>
+              <CardTitle>Password</CardTitle>
+              <CardDescription>
+                Change your password here. After saving, you&apos;ll be logged
+                out.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-6">
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-current">Current password</Label>
+                <Input id="tabs-demo-current" type="password" />
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-new">New password</Label>
+                <Input id="tabs-demo-new" type="password" />
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button>Save password</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/textarea-demo.tsx b/apps/v4/registry/new-york-v4/examples/textarea-demo.tsx
new file mode 100644
index 00000000000..fe3557a656c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/textarea-demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+export default function TextareaDemo() {
+  return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/v4/registry/new-york-v4/examples/textarea-disabled.tsx b/apps/v4/registry/new-york-v4/examples/textarea-disabled.tsx
new file mode 100644
index 00000000000..1be5e55f4c5
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/textarea-disabled.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+export default function TextareaDisabled() {
+  return <Textarea placeholder="Type your message here." disabled />
+}
diff --git a/apps/v4/registry/new-york-v4/examples/textarea-form.tsx b/apps/v4/registry/new-york-v4/examples/textarea-form.tsx
new file mode 100644
index 00000000000..6e4a8b775a0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/textarea-form.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york-v4/ui/form"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+const FormSchema = z.object({
+  bio: z
+    .string()
+    .min(10, {
+      message: "Bio must be at least 10 characters.",
+    })
+    .max(160, {
+      message: "Bio must not be longer than 30 characters.",
+    }),
+})
+
+export default function TextareaForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast("You submitted the following values", {
+      description: (
+        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="bio"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Bio</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Tell us a little bit about yourself"
+                  className="resize-none"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>
+                You can <span>@mention</span> other users and organizations.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/textarea-with-button.tsx b/apps/v4/registry/new-york-v4/examples/textarea-with-button.tsx
new file mode 100644
index 00000000000..8ded0d0fb22
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/textarea-with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+export default function TextareaWithButton() {
+  return (
+    <div className="grid w-full gap-2">
+      <Textarea placeholder="Type your message here." />
+      <Button>Send message</Button>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/textarea-with-label.tsx b/apps/v4/registry/new-york-v4/examples/textarea-with-label.tsx
new file mode 100644
index 00000000000..4e529718ebc
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/textarea-with-label.tsx
@@ -0,0 +1,11 @@
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+export default function TextareaWithLabel() {
+  return (
+    <div className="grid w-full gap-3">
+      <Label htmlFor="message">Your message</Label>
+      <Textarea placeholder="Type your message here." id="message" />
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/textarea-with-text.tsx b/apps/v4/registry/new-york-v4/examples/textarea-with-text.tsx
new file mode 100644
index 00000000000..e0ba022ac71
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/textarea-with-text.tsx
@@ -0,0 +1,14 @@
+import { Label } from "@/registry/new-york-v4/ui/label"
+import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+
+export default function TextareaWithText() {
+  return (
+    <div className="grid w-full gap-3">
+      <Label htmlFor="message-2">Your Message</Label>
+      <Textarea placeholder="Type your message here." id="message-2" />
+      <p className="text-muted-foreground text-sm">
+        Your message will be copied to the support team.
+      </p>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-demo.tsx b/apps/v4/registry/new-york-v4/examples/toggle-demo.tsx
new file mode 100644
index 00000000000..3973251c1d3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york-v4/ui/toggle"
+
+export default function ToggleDemo() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-disabled.tsx b/apps/v4/registry/new-york-v4/examples/toggle-disabled.tsx
new file mode 100644
index 00000000000..65002dfb734
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york-v4/ui/toggle"
+
+export default function ToggleDisabled() {
+  return (
+    <Toggle aria-label="Toggle italic" disabled>
+      <Underline className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-demo.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-demo.tsx
new file mode 100644
index 00000000000..521f0421a6b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-group-demo.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup variant="outline" type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-disabled.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-disabled.tsx
new file mode 100644
index 00000000000..2d3ed882fee
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-group-disabled.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" disabled>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-lg.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-lg.tsx
new file mode 100644
index 00000000000..2a5db576bd0
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-group-lg.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" size="lg">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-outline.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-outline.tsx
new file mode 100644
index 00000000000..f018c69ba73
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-group-outline.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" variant="outline">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-single.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-single.tsx
new file mode 100644
index 00000000000..3913a779458
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-group-single.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="single">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-sm.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-sm.tsx
new file mode 100644
index 00000000000..08424d7a86b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-group-sm.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="single" size="sm">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-lg.tsx b/apps/v4/registry/new-york-v4/examples/toggle-lg.tsx
new file mode 100644
index 00000000000..97c68fd839e
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-lg.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york-v4/ui/toggle"
+
+export default function ToggleLg() {
+  return (
+    <Toggle size="lg" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-outline.tsx b/apps/v4/registry/new-york-v4/examples/toggle-outline.tsx
new file mode 100644
index 00000000000..df64553b041
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-outline.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york-v4/ui/toggle"
+
+export default function ToggleOutline() {
+  return (
+    <Toggle variant="outline" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-sm.tsx b/apps/v4/registry/new-york-v4/examples/toggle-sm.tsx
new file mode 100644
index 00000000000..d6c64e1d331
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-sm.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york-v4/ui/toggle"
+
+export default function ToggleSm() {
+  return (
+    <Toggle size="sm" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-with-text.tsx b/apps/v4/registry/new-york-v4/examples/toggle-with-text.tsx
new file mode 100644
index 00000000000..4c52d03c81f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york-v4/ui/toggle"
+
+export default function ToggleWithText() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Italic />
+      Italic
+    </Toggle>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/tooltip-demo.tsx b/apps/v4/registry/new-york-v4/examples/tooltip-demo.tsx
new file mode 100644
index 00000000000..8f55c339ecc
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/tooltip-demo.tsx
@@ -0,0 +1,19 @@
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
+
+export default function TooltipDemo() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Hover</Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Add to library</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/typography-blockquote.tsx b/apps/v4/registry/new-york-v4/examples/typography-blockquote.tsx
new file mode 100644
index 00000000000..c5aa079ac31
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/typography-blockquote.tsx
@@ -0,0 +1,8 @@
+export default function TypographyBlockquote() {
+  return (
+    <blockquote className="mt-6 border-l-2 pl-6 italic">
+      &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so
+      it&apos;s only fair that they should pay for the privilege.&quot;
+    </blockquote>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/typography-demo.tsx b/apps/v4/registry/new-york-v4/examples/typography-demo.tsx
new file mode 100644
index 00000000000..ec5af8eb5d9
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/typography-demo.tsx
@@ -0,0 +1,119 @@
+export default function TypographyDemo() {
+  return (
+    <div>
+      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
+        Taxing Laughter: The Joke Tax Chronicles
+      </h1>
+      <p className="text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6">
+        Once upon a time, in a far-off land, there was a very lazy king who
+        spent all day lounging on his throne. One day, his advisors came to him
+        with a problem: the kingdom was running out of money.
+      </p>
+      <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+        The King&apos;s Plan
+      </h2>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king thought long and hard, and finally came up with{" "}
+        <a
+          href="#"
+          className="text-primary font-medium underline underline-offset-4"
+        >
+          a brilliant plan
+        </a>
+        : he would tax the jokes in the kingdom.
+      </p>
+      <blockquote className="mt-6 border-l-2 pl-6 italic">
+        &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so
+        it&apos;s only fair that they should pay for the privilege.&quot;
+      </blockquote>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+        The Joke Tax
+      </h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king&apos;s subjects were not amused. They grumbled and complained,
+        but the king was firm:
+      </p>
+      <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+        <li>1st level of puns: 5 gold coins</li>
+        <li>2nd level of jokes: 10 gold coins</li>
+        <li>3rd level of one-liners : 20 gold coins</li>
+      </ul>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        As a result, people stopped telling jokes, and the kingdom fell into a
+        gloom. But there was one person who refused to let the king&apos;s
+        foolishness get him down: a court jester named Jokester.
+      </p>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+        Jokester&apos;s Revolt
+      </h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        Jokester began sneaking into the castle in the middle of the night and
+        leaving jokes all over the place: under the king&apos;s pillow, in his
+        soup, even in the royal toilet. The king was furious, but he
+        couldn&apos;t seem to stop Jokester.
+      </p>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        And then, one day, the people of the kingdom discovered that the jokes
+        left by Jokester were so funny that they couldn&apos;t help but laugh.
+        And once they started laughing, they couldn&apos;t stop.
+      </p>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+        The People&apos;s Rebellion
+      </h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The people of the kingdom, feeling uplifted by the laughter, started to
+        tell jokes and puns again, and soon the entire kingdom was in on the
+        joke.
+      </p>
+      <div className="my-6 w-full overflow-y-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="even:bg-muted m-0 border-t p-0">
+              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                King&apos;s Treasury
+              </th>
+              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                People&apos;s happiness
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="even:bg-muted m-0 border-t p-0">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Empty
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Overflowing
+              </td>
+            </tr>
+            <tr className="even:bg-muted m-0 border-t p-0">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Modest
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Satisfied
+              </td>
+            </tr>
+            <tr className="even:bg-muted m-0 border-t p-0">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Full
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Ecstatic
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king, seeing how much happier his subjects were, realized the error
+        of his ways and repealed the joke tax. Jokester was declared a hero, and
+        the kingdom lived happily ever after.
+      </p>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The moral of the story is: never underestimate the power of a good laugh
+        and always be careful of bad ideas.
+      </p>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/typography-h1.tsx b/apps/v4/registry/new-york-v4/examples/typography-h1.tsx
new file mode 100644
index 00000000000..51b2fe6fc20
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/typography-h1.tsx
@@ -0,0 +1,7 @@
+export default function TypographyH1() {
+  return (
+    <h1 className="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">
+      Taxing Laughter: The Joke Tax Chronicles
+    </h1>
+  )
+}
diff --git a/apps/www/registry/default/example/typography-h2.tsx b/apps/v4/registry/new-york-v4/examples/typography-h2.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-h2.tsx
rename to apps/v4/registry/new-york-v4/examples/typography-h2.tsx
diff --git a/apps/www/registry/default/example/typography-h3.tsx b/apps/v4/registry/new-york-v4/examples/typography-h3.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-h3.tsx
rename to apps/v4/registry/new-york-v4/examples/typography-h3.tsx
diff --git a/apps/www/registry/default/example/typography-h4.tsx b/apps/v4/registry/new-york-v4/examples/typography-h4.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-h4.tsx
rename to apps/v4/registry/new-york-v4/examples/typography-h4.tsx
diff --git a/apps/v4/registry/new-york-v4/examples/typography-inline-code.tsx b/apps/v4/registry/new-york-v4/examples/typography-inline-code.tsx
new file mode 100644
index 00000000000..123bd0f3b13
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/typography-inline-code.tsx
@@ -0,0 +1,7 @@
+export default function TypographyInlineCode() {
+  return (
+    <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+      @radix-ui/react-alert-dialog
+    </code>
+  )
+}
diff --git a/apps/www/registry/default/example/typography-large.tsx b/apps/v4/registry/new-york-v4/examples/typography-large.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-large.tsx
rename to apps/v4/registry/new-york-v4/examples/typography-large.tsx
diff --git a/apps/v4/registry/new-york-v4/examples/typography-lead.tsx b/apps/v4/registry/new-york-v4/examples/typography-lead.tsx
new file mode 100644
index 00000000000..1889c0eeb42
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/typography-lead.tsx
@@ -0,0 +1,8 @@
+export default function TypographyLead() {
+  return (
+    <p className="text-muted-foreground text-xl">
+      A modal dialog that interrupts the user with important content and expects
+      a response.
+    </p>
+  )
+}
diff --git a/apps/www/registry/default/example/typography-list.tsx b/apps/v4/registry/new-york-v4/examples/typography-list.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-list.tsx
rename to apps/v4/registry/new-york-v4/examples/typography-list.tsx
diff --git a/apps/v4/registry/new-york-v4/examples/typography-muted.tsx b/apps/v4/registry/new-york-v4/examples/typography-muted.tsx
new file mode 100644
index 00000000000..322a3575675
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/typography-muted.tsx
@@ -0,0 +1,5 @@
+export default function TypographyMuted() {
+  return (
+    <p className="text-muted-foreground text-sm">Enter your email address.</p>
+  )
+}
diff --git a/apps/www/registry/default/example/typography-p.tsx b/apps/v4/registry/new-york-v4/examples/typography-p.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-p.tsx
rename to apps/v4/registry/new-york-v4/examples/typography-p.tsx
diff --git a/apps/v4/registry/new-york-v4/examples/typography-small.tsx b/apps/v4/registry/new-york-v4/examples/typography-small.tsx
new file mode 100644
index 00000000000..333787a22fc
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/typography-small.tsx
@@ -0,0 +1,5 @@
+export default function TypographySmall() {
+  return (
+    <small className="text-sm leading-none font-medium">Email address</small>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/examples/typography-table.tsx b/apps/v4/registry/new-york-v4/examples/typography-table.tsx
new file mode 100644
index 00000000000..da55d42a673
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/examples/typography-table.tsx
@@ -0,0 +1,44 @@
+export default function TypographyTable() {
+  return (
+    <div className="my-6 w-full overflow-y-auto">
+      <table className="w-full">
+        <thead>
+          <tr className="even:bg-muted m-0 border-t p-0">
+            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+              King's Treasury
+            </th>
+            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+              People's happiness
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr className="even:bg-muted m-0 border-t p-0">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Empty
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Overflowing
+            </td>
+          </tr>
+          <tr className="even:bg-muted m-0 border-t p-0">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Modest
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Satisfied
+            </td>
+          </tr>
+          <tr className="even:bg-muted m-0 border-t p-0">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Full
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Ecstatic
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/hooks/use-mobile.ts b/apps/v4/registry/new-york-v4/hooks/use-mobile.ts
new file mode 100644
index 00000000000..2b0fe1dfef3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-controlled.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-controlled.tsx
new file mode 100644
index 00000000000..2868394a840
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-controlled.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import {
+  FrameIcon,
+  LifeBuoyIcon,
+  MapIcon,
+  PanelLeftCloseIcon,
+  PanelLeftOpenIcon,
+  PieChartIcon,
+  SendIcon,
+} from "lucide-react"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: FrameIcon,
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChartIcon,
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: MapIcon,
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoyIcon,
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: SendIcon,
+  },
+]
+
+export default function AppSidebar() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <SidebarProvider open={open} onOpenChange={setOpen}>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton asChild>
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-12 items-center justify-between px-4">
+          <Button
+            onClick={() => setOpen((open) => !open)}
+            size="sm"
+            variant="ghost"
+          >
+            {open ? <PanelLeftCloseIcon /> : <PanelLeftOpenIcon />}
+            <span>{open ? "Close" : "Open"} Sidebar</span>
+          </Button>
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-demo.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-demo.tsx
new file mode 100644
index 00000000000..afb3ba724fe
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-demo.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import {
+  CalendarIcon,
+  HomeIcon,
+  InboxIcon,
+  SearchIcon,
+  SettingsIcon,
+} from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+// Menu items.
+const items = [
+  {
+    title: "Home",
+    url: "#",
+    icon: HomeIcon,
+  },
+  {
+    title: "Inbox",
+    url: "#",
+    icon: InboxIcon,
+  },
+  {
+    title: "Calendar",
+    url: "#",
+    icon: CalendarIcon,
+  },
+  {
+    title: "Search",
+    url: "#",
+    icon: SearchIcon,
+  },
+  {
+    title: "Settings",
+    url: "#",
+    icon: SettingsIcon,
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Application</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild>
+                      <a href={item.url}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-12 items-center justify-between px-4">
+          <SidebarTrigger />
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-footer.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-footer.tsx
new file mode 100644
index 00000000000..d0f5f2538dd
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-footer.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { ChevronUpIcon } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader />
+        <SidebarContent />
+        <SidebarFooter>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                    Username
+                    <ChevronUpIcon className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  side="top"
+                  className="w-(--radix-popper-anchor-width)"
+                >
+                  <DropdownMenuItem>
+                    <span>Account</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Billing</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Sign out</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-12 items-center justify-between px-4">
+          <SidebarTrigger />
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-group-action.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-group-action.tsx
new file mode 100644
index 00000000000..687ecde4fa6
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-group-action.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import { FrameIcon, MapIcon, PieChartIcon, PlusIcon } from "lucide-react"
+import { toast, Toaster } from "sonner"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Toaster
+        position="bottom-left"
+        toastOptions={{
+          className: "ml-[160px]",
+        }}
+      />
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupAction
+              title="Add Project"
+              onClick={() => toast("You clicked the group action!")}
+            >
+              <PlusIcon /> <span className="sr-only">Add Project</span>
+            </SidebarGroupAction>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <a href="#">
+                      <FrameIcon />
+                      <span>Design Engineering</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <a href="#">
+                      <PieChartIcon />
+                      <span>Sales & Marketing</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <a href="#">
+                      <MapIcon />
+                      <span>Travel</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-group-collapsible.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-group-collapsible.tsx
new file mode 100644
index 00000000000..79b93993824
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-group-collapsible.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import { ChevronDownIcon, LifeBuoyIcon, SendIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <Collapsible defaultOpen className="group/collapsible">
+            <SidebarGroup>
+              <SidebarGroupLabel
+                asChild
+                className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
+              >
+                <CollapsibleTrigger>
+                  Help
+                  <ChevronDownIcon className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton>
+                        <LifeBuoyIcon />
+                        Support
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton>
+                        <SendIcon />
+                        Feedback
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-group.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-group.tsx
new file mode 100644
index 00000000000..11397e324f2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-group.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { LifeBuoyIcon, SendIcon } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Help</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <LifeBuoyIcon />
+                    Support
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <SendIcon />
+                    Feedback
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-header.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-header.tsx
new file mode 100644
index 00000000000..e3955662136
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-header.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { ChevronDownIcon } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                    Select Workspace
+                    <ChevronDownIcon className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-(--radix-popper-anchor-width)">
+                  <DropdownMenuItem>
+                    <span>Acme Inc</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Acme Corp.</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-12 items-center justify-between px-4">
+          <SidebarTrigger />
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-menu-action.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-menu-action.tsx
new file mode 100644
index 00000000000..059c7b35101
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-menu-action.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import {
+  FrameIcon,
+  LifeBuoyIcon,
+  MapIcon,
+  MoreHorizontalIcon,
+  PieChartIcon,
+  SendIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: FrameIcon,
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChartIcon,
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: MapIcon,
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoyIcon,
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: SendIcon,
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton
+                      asChild
+                      className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                    >
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction>
+                          <MoreHorizontalIcon />
+                          <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent side="right" align="start">
+                        <DropdownMenuItem>
+                          <span>Edit Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <span>Delete Project</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-menu-badge.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-menu-badge.tsx
new file mode 100644
index 00000000000..604d3ac1165
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-menu-badge.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import {
+  FrameIcon,
+  LifeBuoyIcon,
+  MapIcon,
+  PieChartIcon,
+  SendIcon,
+} from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: FrameIcon,
+    badge: "24",
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChartIcon,
+    badge: "12",
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: MapIcon,
+    badge: "3",
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoyIcon,
+    badge: "21",
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: SendIcon,
+    badge: "8",
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton
+                      asChild
+                      className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                    >
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-menu-collapsible.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-menu-collapsible.tsx
new file mode 100644
index 00000000000..5867503022d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-menu-collapsible.tsx
@@ -0,0 +1,196 @@
+"use client"
+
+import { ChevronRightIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const items = [
+  {
+    title: "Getting Started",
+    url: "#",
+    items: [
+      {
+        title: "Installation",
+        url: "#",
+      },
+      {
+        title: "Project Structure",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Building Your Application",
+    url: "#",
+    items: [
+      {
+        title: "Routing",
+        url: "#",
+      },
+      {
+        title: "Data Fetching",
+        url: "#",
+        isActive: true,
+      },
+      {
+        title: "Rendering",
+        url: "#",
+      },
+      {
+        title: "Caching",
+        url: "#",
+      },
+      {
+        title: "Styling",
+        url: "#",
+      },
+      {
+        title: "Optimizing",
+        url: "#",
+      },
+      {
+        title: "Configuring",
+        url: "#",
+      },
+      {
+        title: "Testing",
+        url: "#",
+      },
+      {
+        title: "Authentication",
+        url: "#",
+      },
+      {
+        title: "Deploying",
+        url: "#",
+      },
+      {
+        title: "Upgrading",
+        url: "#",
+      },
+      {
+        title: "Examples",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "API Reference",
+    url: "#",
+    items: [
+      {
+        title: "Components",
+        url: "#",
+      },
+      {
+        title: "File Conventions",
+        url: "#",
+      },
+      {
+        title: "Functions",
+        url: "#",
+      },
+      {
+        title: "next.config.js Options",
+        url: "#",
+      },
+      {
+        title: "CLI",
+        url: "#",
+      },
+      {
+        title: "Edge Runtime",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Architecture",
+    url: "#",
+    items: [
+      {
+        title: "Accessibility",
+        url: "#",
+      },
+      {
+        title: "Fast Refresh",
+        url: "#",
+      },
+      {
+        title: "Next.js Compiler",
+        url: "#",
+      },
+      {
+        title: "Supported Browsers",
+        url: "#",
+      },
+      {
+        title: "Turbopack",
+        url: "#",
+      },
+    ],
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {items.map((item, index) => (
+                  <Collapsible
+                    key={index}
+                    className="group/collapsible"
+                    defaultOpen={index === 0}
+                  >
+                    <SidebarMenuItem>
+                      <CollapsibleTrigger asChild>
+                        <SidebarMenuButton>
+                          <span>{item.title}</span>
+                          <ChevronRightIcon className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent>
+                        <SidebarMenuSub>
+                          {item.items.map((subItem, subIndex) => (
+                            <SidebarMenuSubItem key={subIndex}>
+                              <SidebarMenuSubButton asChild>
+                                <a href={subItem.url}>
+                                  <span>{subItem.title}</span>
+                                </a>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </Collapsible>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-menu-sub.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-menu-sub.tsx
new file mode 100644
index 00000000000..885bfbaf7f1
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-menu-sub.tsx
@@ -0,0 +1,180 @@
+"use client"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const items = [
+  {
+    title: "Getting Started",
+    url: "#",
+    items: [
+      {
+        title: "Installation",
+        url: "#",
+      },
+      {
+        title: "Project Structure",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Building Your Application",
+    url: "#",
+    items: [
+      {
+        title: "Routing",
+        url: "#",
+      },
+      {
+        title: "Data Fetching",
+        url: "#",
+        isActive: true,
+      },
+      {
+        title: "Rendering",
+        url: "#",
+      },
+      {
+        title: "Caching",
+        url: "#",
+      },
+      {
+        title: "Styling",
+        url: "#",
+      },
+      {
+        title: "Optimizing",
+        url: "#",
+      },
+      {
+        title: "Configuring",
+        url: "#",
+      },
+      {
+        title: "Testing",
+        url: "#",
+      },
+      {
+        title: "Authentication",
+        url: "#",
+      },
+      {
+        title: "Deploying",
+        url: "#",
+      },
+      {
+        title: "Upgrading",
+        url: "#",
+      },
+      {
+        title: "Examples",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "API Reference",
+    url: "#",
+    items: [
+      {
+        title: "Components",
+        url: "#",
+      },
+      {
+        title: "File Conventions",
+        url: "#",
+      },
+      {
+        title: "Functions",
+        url: "#",
+      },
+      {
+        title: "next.config.js Options",
+        url: "#",
+      },
+      {
+        title: "CLI",
+        url: "#",
+      },
+      {
+        title: "Edge Runtime",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Architecture",
+    url: "#",
+    items: [
+      {
+        title: "Accessibility",
+        url: "#",
+      },
+      {
+        title: "Fast Refresh",
+        url: "#",
+      },
+      {
+        title: "Next.js Compiler",
+        url: "#",
+      },
+      {
+        title: "Supported Browsers",
+        url: "#",
+      },
+      {
+        title: "Turbopack",
+        url: "#",
+      },
+    ],
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {items.map((item, index) => (
+                  <SidebarMenuItem key={index}>
+                    <SidebarMenuButton asChild>
+                      <a href={item.url}>
+                        <span>{item.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <SidebarMenuSub>
+                      {item.items.map((subItem, subIndex) => (
+                        <SidebarMenuSubItem key={subIndex}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-menu.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-menu.tsx
new file mode 100644
index 00000000000..543e54dc573
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-menu.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import {
+  FrameIcon,
+  LifeBuoyIcon,
+  MapIcon,
+  PieChartIcon,
+  SendIcon,
+} from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: FrameIcon,
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChartIcon,
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: MapIcon,
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoyIcon,
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: SendIcon,
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton asChild>
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-rsc.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-rsc.tsx
new file mode 100644
index 00000000000..17f7bfe0be6
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-rsc.tsx
@@ -0,0 +1,110 @@
+import * as React from "react"
+import {
+  FrameIcon,
+  LifeBuoyIcon,
+  MapIcon,
+  PieChartIcon,
+  SendIcon,
+} from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarProvider,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: FrameIcon,
+    badge: "24",
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChartIcon,
+    badge: "12",
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: MapIcon,
+    badge: "3",
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoyIcon,
+    badge: "21",
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: SendIcon,
+    badge: "8",
+  },
+]
+
+// Dummy fetch function
+async function fetchProjects() {
+  await new Promise((resolve) => setTimeout(resolve, 3000))
+  return projects
+}
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <React.Suspense fallback={<NavProjectsSkeleton />}>
+                <NavProjects />
+              </React.Suspense>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
+
+function NavProjectsSkeleton() {
+  return (
+    <SidebarMenu>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <SidebarMenuItem key={index}>
+          <SidebarMenuSkeleton showIcon />
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+
+async function NavProjects() {
+  const projects = await fetchProjects()
+
+  return (
+    <SidebarMenu>
+      {projects.map((project) => (
+        <SidebarMenuItem key={project.name}>
+          <SidebarMenuButton asChild>
+            <a href={project.url}>
+              <project.icon />
+              <span>{project.name}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
diff --git a/templates/next-template/lib/utils.ts b/apps/v4/registry/new-york-v4/lib/utils.ts
similarity index 100%
rename from templates/next-template/lib/utils.ts
rename to apps/v4/registry/new-york-v4/lib/utils.ts
diff --git a/apps/v4/registry/new-york-v4/ui/accordion.tsx b/apps/v4/registry/new-york-v4/ui/accordion.tsx
new file mode 100644
index 00000000000..4a8cca46b9c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/accordion.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx b/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx
new file mode 100644
index 00000000000..ea8465ca40b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/registry/new-york-v4/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/alert.tsx b/apps/v4/registry/new-york-v4/ui/alert.tsx
new file mode 100644
index 00000000000..14213546e5a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/apps/v4/registry/new-york-v4/ui/aspect-ratio.tsx b/apps/v4/registry/new-york-v4/ui/aspect-ratio.tsx
new file mode 100644
index 00000000000..3df3fd02a6a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }
diff --git a/apps/v4/registry/new-york-v4/ui/avatar.tsx b/apps/v4/registry/new-york-v4/ui/avatar.tsx
new file mode 100644
index 00000000000..71e428b4ca6
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/apps/v4/registry/new-york-v4/ui/badge.tsx b/apps/v4/registry/new-york-v4/ui/badge.tsx
new file mode 100644
index 00000000000..02054139a9a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/apps/v4/registry/new-york-v4/ui/breadcrumb.tsx b/apps/v4/registry/new-york-v4/ui/breadcrumb.tsx
new file mode 100644
index 00000000000..eb88f321220
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/button.tsx b/apps/v4/registry/new-york-v4/ui/button.tsx
new file mode 100644
index 00000000000..a2df8dce675
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/apps/v4/registry/new-york-v4/ui/calendar.tsx b/apps/v4/registry/new-york-v4/ui/calendar.tsx
new file mode 100644
index 00000000000..6b96be5962f
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/calendar.tsx
@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/registry/new-york-v4/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/apps/v4/registry/new-york-v4/ui/card.tsx b/apps/v4/registry/new-york-v4/ui/card.tsx
new file mode 100644
index 00000000000..d05bbc6c74c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/carousel.tsx b/apps/v4/registry/new-york-v4/ui/carousel.tsx
new file mode 100644
index 00000000000..1c38c8217c2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/carousel.tsx
@@ -0,0 +1,241 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/chart.tsx b/apps/v4/registry/new-york-v4/ui/chart.tsx
new file mode 100644
index 00000000000..8b42f210966
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/chart.tsx
@@ -0,0 +1,357 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="text-foreground font-mono font-medium tabular-nums">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/checkbox.tsx b/apps/v4/registry/new-york-v4/ui/checkbox.tsx
new file mode 100644
index 00000000000..fa0e4b59fa8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/apps/v4/registry/new-york-v4/ui/collapsible.tsx b/apps/v4/registry/new-york-v4/ui/collapsible.tsx
new file mode 100644
index 00000000000..ae9fad04a37
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/apps/v4/registry/new-york-v4/ui/command.tsx b/apps/v4/registry/new-york-v4/ui/command.tsx
new file mode 100644
index 00000000000..fdfcbccb763
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/command.tsx
@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/registry/new-york-v4/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/context-menu.tsx b/apps/v4/registry/new-york-v4/ui/context-menu.tsx
new file mode 100644
index 00000000000..e29ad05f96a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/context-menu.tsx
@@ -0,0 +1,252 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/dialog.tsx b/apps/v4/registry/new-york-v4/ui/dialog.tsx
new file mode 100644
index 00000000000..d9ccec91d22
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/dialog.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/drawer.tsx b/apps/v4/registry/new-york-v4/ui/drawer.tsx
new file mode 100644
index 00000000000..8aa69230a08
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/drawer.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/dropdown-menu.tsx b/apps/v4/registry/new-york-v4/ui/dropdown-menu.tsx
new file mode 100644
index 00000000000..ec51e9cc9f8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/form.tsx b/apps/v4/registry/new-york-v4/ui/form.tsx
new file mode 100644
index 00000000000..2e3565ac3ed
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/form.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/registry/new-york-v4/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/hover-card.tsx b/apps/v4/registry/new-york-v4/ui/hover-card.tsx
new file mode 100644
index 00000000000..e7541864c7d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/hover-card.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/apps/v4/registry/new-york-v4/ui/input-otp.tsx b/apps/v4/registry/new-york-v4/ui/input-otp.tsx
new file mode 100644
index 00000000000..614f70e383b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/input-otp.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/apps/v4/registry/new-york-v4/ui/input.tsx b/apps/v4/registry/new-york-v4/ui/input.tsx
new file mode 100644
index 00000000000..03295ca6ac6
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/apps/v4/registry/new-york-v4/ui/label.tsx b/apps/v4/registry/new-york-v4/ui/label.tsx
new file mode 100644
index 00000000000..fb5fbc3eee8
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/apps/v4/registry/new-york-v4/ui/menubar.tsx b/apps/v4/registry/new-york-v4/ui/menubar.tsx
new file mode 100644
index 00000000000..8480f0aac11
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/menubar.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx b/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx
new file mode 100644
index 00000000000..1199945c494
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx
@@ -0,0 +1,168 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/pagination.tsx b/apps/v4/registry/new-york-v4/ui/pagination.tsx
new file mode 100644
index 00000000000..8014149c4c5
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/pagination.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/registry/new-york-v4/ui/button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/popover.tsx b/apps/v4/registry/new-york-v4/ui/popover.tsx
new file mode 100644
index 00000000000..01e468b6783
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/popover.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/apps/v4/registry/new-york-v4/ui/progress.tsx b/apps/v4/registry/new-york-v4/ui/progress.tsx
new file mode 100644
index 00000000000..e7a416c3751
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/apps/v4/registry/new-york-v4/ui/radio-group.tsx b/apps/v4/registry/new-york-v4/ui/radio-group.tsx
new file mode 100644
index 00000000000..5e6778cb48d
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/apps/v4/registry/new-york-v4/ui/resizable.tsx b/apps/v4/registry/new-york-v4/ui/resizable.tsx
new file mode 100644
index 00000000000..12bbd0b8b04
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/resizable.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/apps/v4/registry/new-york-v4/ui/scroll-area.tsx b/apps/v4/registry/new-york-v4/ui/scroll-area.tsx
new file mode 100644
index 00000000000..8e4fa13f668
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/apps/v4/registry/new-york-v4/ui/select.tsx b/apps/v4/registry/new-york-v4/ui/select.tsx
new file mode 100644
index 00000000000..dcbbc0ca0c7
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/select.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/separator.tsx b/apps/v4/registry/new-york-v4/ui/separator.tsx
new file mode 100644
index 00000000000..275381cab0a
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/apps/v4/registry/new-york-v4/ui/sheet.tsx b/apps/v4/registry/new-york-v4/ui/sheet.tsx
new file mode 100644
index 00000000000..84649ad0ffd
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/sheet.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/sidebar.tsx b/apps/v4/registry/new-york-v4/ui/sidebar.tsx
new file mode 100644
index 00000000000..f6541ddeadb
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/sidebar.tsx
@@ -0,0 +1,726 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+
+import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
+import { cn } from "@/registry/new-york-v4/lib/utils"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Input } from "@/registry/new-york-v4/ui/input"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/registry/new-york-v4/ui/sheet"
+import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/skeleton.tsx b/apps/v4/registry/new-york-v4/ui/skeleton.tsx
new file mode 100644
index 00000000000..32ea0ef7fb4
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/apps/v4/registry/new-york-v4/ui/slider.tsx b/apps/v4/registry/new-york-v4/ui/slider.tsx
new file mode 100644
index 00000000000..09391e86b31
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/slider.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/apps/v4/registry/new-york-v4/ui/sonner.tsx b/apps/v4/registry/new-york-v4/ui/sonner.tsx
new file mode 100644
index 00000000000..957524edbd2
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/sonner.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/apps/v4/registry/new-york-v4/ui/switch.tsx b/apps/v4/registry/new-york-v4/ui/switch.tsx
new file mode 100644
index 00000000000..6a2b5241d8c
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/switch.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/apps/v4/registry/new-york-v4/ui/table.tsx b/apps/v4/registry/new-york-v4/ui/table.tsx
new file mode 100644
index 00000000000..51b74dd5257
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/apps/v4/registry/new-york-v4/ui/tabs.tsx b/apps/v4/registry/new-york-v4/ui/tabs.tsx
new file mode 100644
index 00000000000..497ba5ea342
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/tabs.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/apps/v4/registry/new-york-v4/ui/textarea.tsx b/apps/v4/registry/new-york-v4/ui/textarea.tsx
new file mode 100644
index 00000000000..7f21b5e78a4
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/apps/v4/registry/new-york-v4/ui/toggle-group.tsx b/apps/v4/registry/new-york-v4/ui/toggle-group.tsx
new file mode 100644
index 00000000000..fe69cdd495b
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/toggle-group.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/registry/new-york-v4/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/apps/v4/registry/new-york-v4/ui/toggle.tsx b/apps/v4/registry/new-york-v4/ui/toggle.tsx
new file mode 100644
index 00000000000..94ec8f589b3
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/apps/v4/registry/new-york-v4/ui/tooltip.tsx b/apps/v4/registry/new-york-v4/ui/tooltip.tsx
new file mode 100644
index 00000000000..4ee26b38a59
--- /dev/null
+++ b/apps/v4/registry/new-york-v4/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/apps/v4/registry/registry-base-colors.ts b/apps/v4/registry/registry-base-colors.ts
new file mode 100644
index 00000000000..ecaf0af3249
--- /dev/null
+++ b/apps/v4/registry/registry-base-colors.ts
@@ -0,0 +1,1789 @@
+export const baseColors = [
+  {
+    name: "zinc",
+    label: "Zinc",
+    activeColor: {
+      light: "240 5.9% 10%",
+      dark: "240 5.2% 33.9%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "240 10% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "240 10% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        primary: "240 5.9% 10%",
+        "primary-foreground": "0 0% 98%",
+        secondary: "240 4.8% 95.9%",
+        "secondary-foreground": "240 5.9% 10%",
+        muted: "240 4.8% 95.9%",
+        "muted-foreground": "240 3.8% 46.1%",
+        accent: "240 4.8% 95.9%",
+        "accent-foreground": "240 5.9% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 5.9% 90%",
+        input: "240 5.9% 90%",
+        ring: "240 5.9% 10%",
+        radius: "0.5rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "240 10% 3.9%",
+        foreground: "0 0% 98%",
+        card: "240 10% 3.9%",
+        "card-foreground": "0 0% 98%",
+        popover: "240 10% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        primary: "0 0% 98%",
+        "primary-foreground": "240 5.9% 10%",
+        secondary: "240 3.7% 15.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "240 3.7% 15.9%",
+        "muted-foreground": "240 5% 64.9%",
+        accent: "240 3.7% 15.9%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 3.7% 15.9%",
+        input: "240 3.7% 15.9%",
+        ring: "240 4.9% 83.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "slate",
+    label: "Slate",
+    activeColor: {
+      light: "215.4 16.3% 46.9%",
+      dark: "215.3 19.3% 34.5%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "222.2 84% 4.9%",
+        card: "0 0% 100%",
+        "card-foreground": "222.2 84% 4.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "222.2 84% 4.9%",
+        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%",
+        muted: "210 40% 96.1%",
+        "muted-foreground": "215.4 16.3% 46.9%",
+        accent: "210 40% 96.1%",
+        "accent-foreground": "222.2 47.4% 11.2%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 40% 98%",
+        border: "214.3 31.8% 91.4%",
+        input: "214.3 31.8% 91.4%",
+        ring: "222.2 84% 4.9%",
+        radius: "0.5rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "222.2 84% 4.9%",
+        foreground: "210 40% 98%",
+        card: "222.2 84% 4.9%",
+        "card-foreground": "210 40% 98%",
+        popover: "222.2 84% 4.9%",
+        "popover-foreground": "210 40% 98%",
+        primary: "210 40% 98%",
+        "primary-foreground": "222.2 47.4% 11.2%",
+        secondary: "217.2 32.6% 17.5%",
+        "secondary-foreground": "210 40% 98%",
+        muted: "217.2 32.6% 17.5%",
+        "muted-foreground": "215 20.2% 65.1%",
+        accent: "217.2 32.6% 17.5%",
+        "accent-foreground": "210 40% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 40% 98%",
+        border: "217.2 32.6% 17.5%",
+        input: "217.2 32.6% 17.5%",
+        ring: "212.7 26.8% 83.9",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "stone",
+    label: "Stone",
+    activeColor: {
+      light: "25 5.3% 44.7%",
+      dark: "33.3 5.5% 32.4%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "20 14.3% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "20 14.3% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "20 14.3% 4.1%",
+        primary: "24 9.8% 10%",
+        "primary-foreground": "60 9.1% 97.8%",
+        secondary: "60 4.8% 95.9%",
+        "secondary-foreground": "24 9.8% 10%",
+        muted: "60 4.8% 95.9%",
+        "muted-foreground": "25 5.3% 44.7%",
+        accent: "60 4.8% 95.9%",
+        "accent-foreground": "24 9.8% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "20 5.9% 90%",
+        input: "20 5.9% 90%",
+        ring: "20 14.3% 4.1%",
+        radius: "0.95rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "60 9.1% 97.8%",
+        card: "20 14.3% 4.1%",
+        "card-foreground": "60 9.1% 97.8%",
+        popover: "20 14.3% 4.1%",
+        "popover-foreground": "60 9.1% 97.8%",
+        primary: "60 9.1% 97.8%",
+        "primary-foreground": "24 9.8% 10%",
+        secondary: "12 6.5% 15.1%",
+        "secondary-foreground": "60 9.1% 97.8%",
+        muted: "12 6.5% 15.1%",
+        "muted-foreground": "24 5.4% 63.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "60 9.1% 97.8%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "12 6.5% 15.1%",
+        input: "12 6.5% 15.1%",
+        ring: "24 5.7% 82.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "gray",
+    label: "Gray",
+    activeColor: {
+      light: "220 8.9% 46.1%",
+      dark: "215 13.8% 34.1%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "224 71.4% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "224 71.4% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "224 71.4% 4.1%",
+        primary: "220.9 39.3% 11%",
+        "primary-foreground": "210 20% 98%",
+        secondary: "220 14.3% 95.9%",
+        "secondary-foreground": "220.9 39.3% 11%",
+        muted: "220 14.3% 95.9%",
+        "muted-foreground": "220 8.9% 46.1%",
+        accent: "220 14.3% 95.9%",
+        "accent-foreground": "220.9 39.3% 11%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 20% 98%",
+        border: "220 13% 91%",
+        input: "220 13% 91%",
+        ring: "224 71.4% 4.1%",
+        radius: "0.35rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "224 71.4% 4.1%",
+        foreground: "210 20% 98%",
+        card: "224 71.4% 4.1%",
+        "card-foreground": "210 20% 98%",
+        popover: "224 71.4% 4.1%",
+        "popover-foreground": "210 20% 98%",
+        primary: "210 20% 98%",
+        "primary-foreground": "220.9 39.3% 11%",
+        secondary: "215 27.9% 16.9%",
+        "secondary-foreground": "210 20% 98%",
+        muted: "215 27.9% 16.9%",
+        "muted-foreground": "217.9 10.6% 64.9%",
+        accent: "215 27.9% 16.9%",
+        "accent-foreground": "210 20% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 20% 98%",
+        border: "215 27.9% 16.9%",
+        input: "215 27.9% 16.9%",
+        ring: "216 12.2% 83.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "neutral",
+    label: "Neutral",
+    activeColor: {
+      light: "0 0% 45.1%",
+      dark: "0 0% 32.2%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "0 0% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "0 0% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "0 0% 3.9%",
+        primary: "0 0% 9%",
+        "primary-foreground": "0 0% 98%",
+        secondary: "0 0% 96.1%",
+        "secondary-foreground": "0 0% 9%",
+        muted: "0 0% 96.1%",
+        "muted-foreground": "0 0% 45.1%",
+        accent: "0 0% 96.1%",
+        "accent-foreground": "0 0% 9%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 89.8%",
+        input: "0 0% 89.8%",
+        ring: "0 0% 3.9%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "0 0% 3.9%",
+        foreground: "0 0% 98%",
+        card: "0 0% 3.9%",
+        "card-foreground": "0 0% 98%",
+        popover: "0 0% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        primary: "0 0% 98%",
+        "primary-foreground": "0 0% 9%",
+        secondary: "0 0% 14.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 14.9%",
+        "muted-foreground": "0 0% 63.9%",
+        accent: "0 0% 14.9%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 14.9%",
+        input: "0 0% 14.9%",
+        ring: "0 0% 83.1%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "red",
+    label: "Red",
+    activeColor: {
+      light: "0 72.2% 50.6%",
+      dark: "0 72.2% 50.6%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "0 0% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "0 0% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "0 0% 3.9%",
+        primary: "0 72.2% 50.6%",
+        "primary-foreground": "0 85.7% 97.3%",
+        secondary: "0 0% 96.1%",
+        "secondary-foreground": "0 0% 9%",
+        muted: "0 0% 96.1%",
+        "muted-foreground": "0 0% 45.1%",
+        accent: "0 0% 96.1%",
+        "accent-foreground": "0 0% 9%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 89.8%",
+        input: "0 0% 89.8%",
+        ring: "0 72.2% 50.6%",
+        radius: "0.4rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "0 0% 3.9%",
+        foreground: "0 0% 98%",
+        card: "0 0% 3.9%",
+        "card-foreground": "0 0% 98%",
+        popover: "0 0% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        primary: "0 72.2% 50.6%",
+        "primary-foreground": "0 85.7% 97.3%",
+        secondary: "0 0% 14.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 14.9%",
+        "muted-foreground": "0 0% 63.9%",
+        accent: "0 0% 14.9%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 14.9%",
+        input: "0 0% 14.9%",
+        ring: "0 72.2% 50.6%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "rose",
+    label: "Rose",
+    activeColor: {
+      light: "346.8 77.2% 49.8%",
+      dark: "346.8 77.2% 49.8%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "240 10% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "240 10% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        primary: "346.8 77.2% 49.8%",
+        "primary-foreground": "355.7 100% 97.3%",
+        secondary: "240 4.8% 95.9%",
+        "secondary-foreground": "240 5.9% 10%",
+        muted: "240 4.8% 95.9%",
+        "muted-foreground": "240 3.8% 46.1%",
+        accent: "240 4.8% 95.9%",
+        "accent-foreground": "240 5.9% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 5.9% 90%",
+        input: "240 5.9% 90%",
+        ring: "346.8 77.2% 49.8%",
+        radius: "0.5rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "0 0% 95%",
+        popover: "0 0% 9%",
+        "popover-foreground": "0 0% 95%",
+        card: "24 9.8% 10%",
+        "card-foreground": "0 0% 95%",
+        primary: "346.8 77.2% 49.8%",
+        "primary-foreground": "355.7 100% 97.3%",
+        secondary: "240 3.7% 15.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 15%",
+        "muted-foreground": "240 5% 64.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 85.7% 97.3%",
+        border: "240 3.7% 15.9%",
+        input: "240 3.7% 15.9%",
+        ring: "346.8 77.2% 49.8%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "orange",
+    label: "Orange",
+    activeColor: {
+      light: "24.6 95% 53.1%",
+      dark: "20.5 90.2% 48.2%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "20 14.3% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "20 14.3% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "20 14.3% 4.1%",
+        primary: "24.6 95% 53.1%",
+        "primary-foreground": "60 9.1% 97.8%",
+        secondary: "60 4.8% 95.9%",
+        "secondary-foreground": "24 9.8% 10%",
+        muted: "60 4.8% 95.9%",
+        "muted-foreground": "25 5.3% 44.7%",
+        accent: "60 4.8% 95.9%",
+        "accent-foreground": "24 9.8% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "20 5.9% 90%",
+        input: "20 5.9% 90%",
+        ring: "24.6 95% 53.1%",
+        radius: "0.95rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "60 9.1% 97.8%",
+        card: "20 14.3% 4.1%",
+        "card-foreground": "60 9.1% 97.8%",
+        popover: "20 14.3% 4.1%",
+        "popover-foreground": "60 9.1% 97.8%",
+        primary: "20.5 90.2% 48.2%",
+        "primary-foreground": "60 9.1% 97.8%",
+        secondary: "12 6.5% 15.1%",
+        "secondary-foreground": "60 9.1% 97.8%",
+        muted: "12 6.5% 15.1%",
+        "muted-foreground": "24 5.4% 63.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "60 9.1% 97.8%",
+        destructive: "0 72.2% 50.6%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "12 6.5% 15.1%",
+        input: "12 6.5% 15.1%",
+        ring: "20.5 90.2% 48.2%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "green",
+    label: "Green",
+    activeColor: {
+      light: "142.1 76.2% 36.3%",
+      dark: "142.1 70.6% 45.3%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "240 10% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "240 10% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        primary: "142.1 76.2% 36.3%",
+        "primary-foreground": "355.7 100% 97.3%",
+        secondary: "240 4.8% 95.9%",
+        "secondary-foreground": "240 5.9% 10%",
+        muted: "240 4.8% 95.9%",
+        "muted-foreground": "240 3.8% 46.1%",
+        accent: "240 4.8% 95.9%",
+        "accent-foreground": "240 5.9% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 5.9% 90%",
+        input: "240 5.9% 90%",
+        ring: "142.1 76.2% 36.3%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "0 0% 95%",
+        popover: "0 0% 9%",
+        "popover-foreground": "0 0% 95%",
+        card: "24 9.8% 10%",
+        "card-foreground": "0 0% 95%",
+        primary: "142.1 70.6% 45.3%",
+        "primary-foreground": "144.9 80.4% 10%",
+        secondary: "240 3.7% 15.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 15%",
+        "muted-foreground": "240 5% 64.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 85.7% 97.3%",
+        border: "240 3.7% 15.9%",
+        input: "240 3.7% 15.9%",
+        ring: "142.4 71.8% 29.2%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "blue",
+    label: "Blue",
+    activeColor: {
+      light: "221.2 83.2% 53.3%",
+      dark: "217.2 91.2% 59.8%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "222.2 84% 4.9%",
+        card: "0 0% 100%",
+        "card-foreground": "222.2 84% 4.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "222.2 84% 4.9%",
+        primary: "221.2 83.2% 53.3%",
+        "primary-foreground": "210 40% 98%",
+        secondary: "210 40% 96.1%",
+        "secondary-foreground": "222.2 47.4% 11.2%",
+        muted: "210 40% 96.1%",
+        "muted-foreground": "215.4 16.3% 46.9%",
+        accent: "210 40% 96.1%",
+        "accent-foreground": "222.2 47.4% 11.2%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 40% 98%",
+        border: "214.3 31.8% 91.4%",
+        input: "214.3 31.8% 91.4%",
+        ring: "221.2 83.2% 53.3%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "222.2 84% 4.9%",
+        foreground: "210 40% 98%",
+        card: "222.2 84% 4.9%",
+        "card-foreground": "210 40% 98%",
+        popover: "222.2 84% 4.9%",
+        "popover-foreground": "210 40% 98%",
+        primary: "217.2 91.2% 59.8%",
+        "primary-foreground": "222.2 47.4% 11.2%",
+        secondary: "217.2 32.6% 17.5%",
+        "secondary-foreground": "210 40% 98%",
+        muted: "217.2 32.6% 17.5%",
+        "muted-foreground": "215 20.2% 65.1%",
+        accent: "217.2 32.6% 17.5%",
+        "accent-foreground": "210 40% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 40% 98%",
+        border: "217.2 32.6% 17.5%",
+        input: "217.2 32.6% 17.5%",
+        ring: "224.3 76.3% 48%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "yellow",
+    label: "Yellow",
+    activeColor: {
+      light: "47.9 95.8% 53.1%",
+      dark: "47.9 95.8% 53.1%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "20 14.3% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "20 14.3% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "20 14.3% 4.1%",
+        primary: "47.9 95.8% 53.1%",
+        "primary-foreground": "26 83.3% 14.1%",
+        secondary: "60 4.8% 95.9%",
+        "secondary-foreground": "24 9.8% 10%",
+        muted: "60 4.8% 95.9%",
+        "muted-foreground": "25 5.3% 44.7%",
+        accent: "60 4.8% 95.9%",
+        "accent-foreground": "24 9.8% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "20 5.9% 90%",
+        input: "20 5.9% 90%",
+        ring: "20 14.3% 4.1%",
+        radius: "0.95rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "60 9.1% 97.8%",
+        card: "20 14.3% 4.1%",
+        "card-foreground": "60 9.1% 97.8%",
+        popover: "20 14.3% 4.1%",
+        "popover-foreground": "60 9.1% 97.8%",
+        primary: "47.9 95.8% 53.1%",
+        "primary-foreground": "26 83.3% 14.1%",
+        secondary: "12 6.5% 15.1%",
+        "secondary-foreground": "60 9.1% 97.8%",
+        muted: "12 6.5% 15.1%",
+        "muted-foreground": "24 5.4% 63.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "60 9.1% 97.8%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "12 6.5% 15.1%",
+        input: "12 6.5% 15.1%",
+        ring: "35.5 91.7% 32.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "violet",
+    label: "Violet",
+    activeColor: {
+      light: "262.1 83.3% 57.8%",
+      dark: "263.4 70% 50.4%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "224 71.4% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "224 71.4% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "224 71.4% 4.1%",
+        primary: "262.1 83.3% 57.8%",
+        "primary-foreground": "210 20% 98%",
+        secondary: "220 14.3% 95.9%",
+        "secondary-foreground": "220.9 39.3% 11%",
+        muted: "220 14.3% 95.9%",
+        "muted-foreground": "220 8.9% 46.1%",
+        accent: "220 14.3% 95.9%",
+        "accent-foreground": "220.9 39.3% 11%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 20% 98%",
+        border: "220 13% 91%",
+        input: "220 13% 91%",
+        ring: "262.1 83.3% 57.8%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "224 71.4% 4.1%",
+        foreground: "210 20% 98%",
+        card: "224 71.4% 4.1%",
+        "card-foreground": "210 20% 98%",
+        popover: "224 71.4% 4.1%",
+        "popover-foreground": "210 20% 98%",
+        primary: "263.4 70% 50.4%",
+        "primary-foreground": "210 20% 98%",
+        secondary: "215 27.9% 16.9%",
+        "secondary-foreground": "210 20% 98%",
+        muted: "215 27.9% 16.9%",
+        "muted-foreground": "217.9 10.6% 64.9%",
+        accent: "215 27.9% 16.9%",
+        "accent-foreground": "210 20% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 20% 98%",
+        border: "215 27.9% 16.9%",
+        input: "215 27.9% 16.9%",
+        ring: "263.4 70% 50.4%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+] as const
+
+export type BaseColor = (typeof baseColors)[number]
+
+export const baseColorsV4 = {
+  stone: {
+    light: {
+      background: "oklch(1 0 0)", // --color-white
+      foreground: "oklch(0.147 0.004 49.25)", // --color-stone-950
+      card: "oklch(1 0 0)", // --color-white
+      "card-foreground": "oklch(0.147 0.004 49.25)", // --color-stone-950
+      popover: "oklch(1 0 0)", // --color-white
+      "popover-foreground": "oklch(0.147 0.004 49.25)", // --color-stone-950
+      primary: "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "primary-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      secondary: "oklch(0.97 0.001 106.424)", // --color-stone-100
+      "secondary-foreground": "oklch(0.216 0.006 56.043)", // --color-stone-900
+      muted: "oklch(0.97 0.001 106.424)", // --color-stone-100
+      "muted-foreground": "oklch(0.553 0.013 58.071)", // --color-stone-500
+      accent: "oklch(0.97 0.001 106.424)", // --color-stone-100
+      "accent-foreground": "oklch(0.216 0.006 56.043)", // --color-stone-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.923 0.003 48.717)", // --color-stone-200
+      input: "oklch(0.923 0.003 48.717)", // --color-stone-200
+      ring: "oklch(0.709 0.01 56.259)", // --color-stone-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.985 0.001 106.423)", // --color-stone-50
+      "sidebar-foreground": "oklch(0.147 0.004 49.25)", // --color-stone-950
+      "sidebar-primary": "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      "sidebar-accent": "oklch(0.97 0.001 106.424)", // --color-stone-100
+      "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "sidebar-border": "oklch(0.923 0.003 48.717)", // --color-stone-200
+      "sidebar-ring": "oklch(0.709 0.01 56.259)", // --color-stone-400
+    },
+    dark: {
+      background: "oklch(0.147 0.004 49.25)", // --color-stone-950
+      foreground: "oklch(0.985 0.001 106.423)", // --color-stone-50
+      card: "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "card-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      popover: "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "popover-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      primary: "oklch(0.923 0.003 48.717)", // --color-stone-200
+      "primary-foreground": "oklch(0.216 0.006 56.043)", // --color-stone-900
+      secondary: "oklch(0.268 0.007 34.298)", // --color-stone-800
+      "secondary-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      muted: "oklch(0.268 0.007 34.298)", // --color-stone-800
+      "muted-foreground": "oklch(0.709 0.01 56.259)", // --color-stone-400
+      accent: "oklch(0.268 0.007 34.298)", // --color-stone-800
+      "accent-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-500
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.553 0.013 58.071)", // --color-stone-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "sidebar-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      "sidebar-accent": "oklch(0.268 0.007 34.298)", // --color-stone-800
+      "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.553 0.013 58.071)", // --color-stone-500
+    },
+  },
+  zinc: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      card: "oklch(1 0 0)", // --color-zinc-50
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      popover: "oklch(1 0 0)", // --color-zinc-50
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      primary: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      ring: "oklch(0.705 0.015 286.067)", // --color-zinc-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      "sidebar-primary": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      "sidebar-ring": "oklch(0.705 0.015 286.067)", // --color-zinc-400
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      primary: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      "primary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.552 0.016 285.938)", // --color-zinc-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.552 0.016 285.938)", // --color-zinc-500
+    },
+  },
+  neutral: {
+    light: {
+      background: "oklch(1 0 0)", // --color-neutral-50
+      foreground: "oklch(0.145 0 0)", // --color-neutral-950
+      card: "oklch(1 0 0)", // --color-neutral-50
+      "card-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      popover: "oklch(1 0 0)", // --color-neutral-50
+      "popover-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      primary: "oklch(0.205 0 0)", // --color-neutral-900
+      "primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      secondary: "oklch(0.97 0 0)", // --color-neutral-100
+      "secondary-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      muted: "oklch(0.97 0 0)", // --color-neutral-100
+      "muted-foreground": "oklch(0.556 0 0)", // --color-neutral-500
+      accent: "oklch(0.97 0 0)", // --color-neutral-100
+      "accent-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.922 0 0)", // --color-neutral-200
+      input: "oklch(0.922 0 0)", // --color-neutral-200
+      ring: "oklch(0.708 0 0)", // --color-neutral-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      "sidebar-primary": "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-accent": "oklch(0.97 0 0)", // --color-neutral-100
+      "sidebar-accent-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-border": "oklch(0.922 0 0)", // --color-neutral-200
+      "sidebar-ring": "oklch(0.708 0 0)", // --color-neutral-400
+    },
+    dark: {
+      background: "oklch(0.145 0 0)", // --color-neutral-950
+      foreground: "oklch(0.985 0 0)", // --color-neutral-50
+      card: "oklch(0.205 0 0)", // --color-neutral-900
+      "card-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      popover: "oklch(0.205 0 0)", // --color-neutral-900
+      "popover-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      primary: "oklch(0.922 0 0)", // --color-neutral-200
+      "primary-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      secondary: "oklch(0.269 0 0)", // --color-neutral-800
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      muted: "oklch(0.269 0 0)", // --color-neutral-800
+      "muted-foreground": "oklch(0.708 0 0)", // --color-neutral-400
+      accent: "oklch(0.269 0 0)", // --color-neutral-800
+      "accent-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.556 0 0)", // --color-neutral-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-accent": "oklch(0.269 0 0)", // --color-neutral-800
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.556 0 0)", // --color-neutral-500
+    },
+  },
+  gray: {
+    light: {
+      background: "oklch(1 0 0)", // --color-white (closest to gray-50)
+      foreground: "oklch(0.13 0.028 261.692)", // --color-gray-950
+      card: "oklch(1 0 0)", // --color-white (closest to gray-50)
+      "card-foreground": "oklch(0.13 0.028 261.692)", // --color-gray-950
+      popover: "oklch(1 0 0)", // --color-white (closest to gray-50)
+      "popover-foreground": "oklch(0.13 0.028 261.692)", // --color-gray-950
+      primary: "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "primary-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      secondary: "oklch(0.967 0.003 264.542)", // --color-gray-100
+      "secondary-foreground": "oklch(0.21 0.034 264.665)", // --color-gray-900
+      muted: "oklch(0.967 0.003 264.542)", // --color-gray-100
+      "muted-foreground": "oklch(0.551 0.027 264.364)", // --color-gray-500
+      accent: "oklch(0.967 0.003 264.542)", // --color-gray-100
+      "accent-foreground": "oklch(0.21 0.034 264.665)", // --color-gray-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.928 0.006 264.531)", // --color-gray-200
+      input: "oklch(0.928 0.006 264.531)", // --color-gray-200
+      ring: "oklch(0.707 0.022 261.325)", // --color-gray-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.985 0.002 247.839)", // --color-gray-50
+      "sidebar-foreground": "oklch(0.13 0.028 261.692)", // --color-gray-950
+      "sidebar-primary": "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      "sidebar-accent": "oklch(0.967 0.003 264.542)", // --color-gray-100
+      "sidebar-accent-foreground": "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "sidebar-border": "oklch(0.928 0.006 264.531)", // --color-gray-200
+      "sidebar-ring": "oklch(0.707 0.022 261.325)", // --color-gray-400
+    },
+    dark: {
+      background: "oklch(0.13 0.028 261.692)", // --color-gray-950
+      foreground: "oklch(0.985 0.002 247.839)", // --color-gray-50
+      card: "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "card-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      popover: "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "popover-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      primary: "oklch(0.928 0.006 264.531)", // --color-gray-200
+      "primary-foreground": "oklch(0.21 0.034 264.665)", // --color-gray-900
+      secondary: "oklch(0.278 0.033 256.848)", // --color-gray-800
+      "secondary-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      muted: "oklch(0.278 0.033 256.848)", // --color-gray-800
+      "muted-foreground": "oklch(0.707 0.022 261.325)", // --color-gray-400
+      accent: "oklch(0.278 0.033 256.848)", // --color-gray-800
+      "accent-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.551 0.027 264.364)", // --color-gray-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "sidebar-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      "sidebar-accent": "oklch(0.278 0.033 256.848)", // --color-gray-800
+      "sidebar-accent-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.551 0.027 264.364)", // --color-gray-500
+    },
+  },
+  slate: {
+    light: {
+      background: "oklch(1 0 0)", // --color-white (closest to slate-50)
+      foreground: "oklch(0.129 0.042 264.695)", // --color-slate-950
+      card: "oklch(1 0 0)", // --color-white (closest to slate-50)
+      "card-foreground": "oklch(0.129 0.042 264.695)", // --color-slate-950
+      popover: "oklch(1 0 0)", // --color-white (closest to slate-50)
+      "popover-foreground": "oklch(0.129 0.042 264.695)", // --color-slate-950
+      primary: "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "primary-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      secondary: "oklch(0.968 0.007 247.896)", // --color-slate-100
+      "secondary-foreground": "oklch(0.208 0.042 265.755)", // --color-slate-900
+      muted: "oklch(0.968 0.007 247.896)", // --color-slate-100
+      "muted-foreground": "oklch(0.554 0.046 257.417)", // --color-slate-500
+      accent: "oklch(0.968 0.007 247.896)", // --color-slate-100
+      "accent-foreground": "oklch(0.208 0.042 265.755)", // --color-slate-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.929 0.013 255.508)", // --color-slate-200
+      input: "oklch(0.929 0.013 255.508)", // --color-slate-200
+      ring: "oklch(0.704 0.04 256.788)", // --color-slate-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.984 0.003 247.858)", // --color-slate-50
+      "sidebar-foreground": "oklch(0.129 0.042 264.695)", // --color-slate-950
+      "sidebar-primary": "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      "sidebar-accent": "oklch(0.968 0.007 247.896)", // --color-slate-100
+      "sidebar-accent-foreground": "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "sidebar-border": "oklch(0.929 0.013 255.508)", // --color-slate-200
+      "sidebar-ring": "oklch(0.704 0.04 256.788)", // --color-slate-400
+    },
+    dark: {
+      background: "oklch(0.129 0.042 264.695)", // --color-slate-950
+      foreground: "oklch(0.984 0.003 247.858)", // --color-slate-50
+      card: "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "card-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      popover: "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "popover-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      primary: "oklch(0.929 0.013 255.508)", // --color-slate-200
+      "primary-foreground": "oklch(0.208 0.042 265.755)", // --color-slate-900
+      secondary: "oklch(0.279 0.041 260.031)", // --color-slate-800
+      "secondary-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      muted: "oklch(0.279 0.041 260.031)", // --color-slate-800
+      "muted-foreground": "oklch(0.704 0.04 256.788)", // --color-slate-400
+      accent: "oklch(0.279 0.041 260.031)", // --color-slate-800
+      "accent-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.551 0.027 264.364)", // --color-slate-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "sidebar-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      "sidebar-accent": "oklch(0.279 0.041 260.031)", // --color-slate-800
+      "sidebar-accent-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.551 0.027 264.364)", // --color-slate-500
+    },
+  },
+} as const
+
+export const baseColorsOKLCH = {
+  default: {
+    light: {
+      background: "oklch(1 0 0)", // --color-neutral-50
+      foreground: "oklch(0.145 0 0)", // --color-neutral-950
+      card: "oklch(1 0 0)", // --color-neutral-50
+      "card-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      popover: "oklch(1 0 0)", // --color-neutral-50
+      "popover-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      primary: "oklch(0.205 0 0)", // --color-neutral-900
+      "primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      secondary: "oklch(0.97 0 0)", // --color-neutral-100
+      "secondary-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      muted: "oklch(0.97 0 0)", // --color-neutral-100
+      "muted-foreground": "oklch(0.556 0 0)", // --color-neutral-500
+      accent: "oklch(0.97 0 0)", // --color-neutral-100
+      "accent-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.922 0 0)", // --color-neutral-200
+      input: "oklch(0.922 0 0)", // --color-neutral-200
+      ring: "oklch(0.708 0 0)", // --color-neutral-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      "sidebar-primary": "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-accent": "oklch(0.97 0 0)", // --color-neutral-100
+      "sidebar-accent-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-border": "oklch(0.922 0 0)", // --color-neutral-200
+      "sidebar-ring": "oklch(0.708 0 0)", // --color-neutral-400
+    },
+    dark: {
+      background: "oklch(0.145 0 0)", // --color-neutral-950
+      foreground: "oklch(0.985 0 0)", // --color-neutral-50
+      card: "oklch(0.205 0 0)", // --color-neutral-900
+      "card-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      popover: "oklch(0.205 0 0)", // --color-neutral-900
+      "popover-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      primary: "oklch(0.922 0 0)", // --color-neutral-200
+      "primary-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      secondary: "oklch(0.269 0 0)", // --color-neutral-800
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      muted: "oklch(0.269 0 0)", // --color-neutral-800
+      "muted-foreground": "oklch(0.708 0 0)", // --color-neutral-400
+      accent: "oklch(0.269 0 0)", // --color-neutral-800
+      "accent-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.556 0 0)", // --color-neutral-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-accent": "oklch(0.269 0 0)", // --color-neutral-800
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.556 0 0)", // --color-neutral-500
+    },
+  },
+  neutral: {
+    light: {
+      background: "oklch(1 0 0)", // --color-neutral-50
+      foreground: "oklch(0.145 0 0)", // --color-neutral-950
+      card: "oklch(1 0 0)", // --color-neutral-50
+      "card-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      popover: "oklch(1 0 0)", // --color-neutral-50
+      "popover-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      primary: "oklch(0.205 0 0)", // --color-neutral-900
+      "primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      secondary: "oklch(0.97 0 0)", // --color-neutral-100
+      "secondary-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      muted: "oklch(0.97 0 0)", // --color-neutral-100
+      "muted-foreground": "oklch(0.556 0 0)", // --color-neutral-500
+      accent: "oklch(0.97 0 0)", // --color-neutral-100
+      "accent-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.922 0 0)", // --color-neutral-200
+      input: "oklch(0.922 0 0)", // --color-neutral-200
+      ring: "oklch(0.708 0 0)", // --color-neutral-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      "sidebar-primary": "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-accent": "oklch(0.97 0 0)", // --color-neutral-100
+      "sidebar-accent-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-border": "oklch(0.922 0 0)", // --color-neutral-200
+      "sidebar-ring": "oklch(0.708 0 0)", // --color-neutral-400
+    },
+    dark: {
+      background: "oklch(0.145 0 0)", // --color-neutral-950
+      foreground: "oklch(0.985 0 0)", // --color-neutral-50
+      card: "oklch(0.205 0 0)", // --color-neutral-900
+      "card-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      popover: "oklch(0.205 0 0)", // --color-neutral-900
+      "popover-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      primary: "oklch(0.922 0 0)", // --color-neutral-200
+      "primary-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      secondary: "oklch(0.269 0 0)", // --color-neutral-800
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      muted: "oklch(0.269 0 0)", // --color-neutral-800
+      "muted-foreground": "oklch(0.708 0 0)", // --color-neutral-400
+      accent: "oklch(0.269 0 0)", // --color-neutral-800
+      "accent-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.556 0 0)", // --color-neutral-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-accent": "oklch(0.269 0 0)", // --color-neutral-800
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.556 0 0)", // --color-neutral-500
+    },
+  },
+  zinc: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      card: "oklch(1 0 0)", // --color-zinc-50
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      popover: "oklch(1 0 0)", // --color-zinc-50
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      primary: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      ring: "oklch(0.705 0.015 286.067)", // --color-zinc-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      "sidebar-primary": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      "sidebar-ring": "oklch(0.705 0.015 286.067)", // --color-zinc-400
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      primary: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      "primary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.552 0.016 285.938)", // --color-zinc-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.552 0.016 285.938)", // --color-zinc-500
+    },
+  },
+  red: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "sidebar-primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "sidebar-primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+    },
+  },
+  rose: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "sidebar-primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "sidebar-primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+    },
+  },
+  orange: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
+      "primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
+      "sidebar-primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
+      "primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
+      "sidebar-primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
+    },
+  },
+  green: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
+      "primary-foreground": "oklch(0.982 0.018 155.826)", // --color-green-50 (approx HSL 355.7 100% 97.3%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
+      "sidebar-primary-foreground": "oklch(0.982 0.018 155.826)", // --color-green-50 (approx HSL 355.7 100% 97.3%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.696 0.17 162.48)", // --color-emerald-500 (approx HSL 142.1 70.6% 45.3%)
+      "primary-foreground": "oklch(0.393 0.095 152.535)", // --color-green-900 (approx HSL 144.9 80.4% 10%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.527 0.154 150.069)", // --color-green-700 (approx HSL 142.4 71.8% 29.2%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (approx HSL 142.1 70.6% 45.3%)
+      "sidebar-primary-foreground": "oklch(0.393 0.095 152.535)", // --color-green-900 (approx HSL 144.9 80.4% 10%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.527 0.154 150.069)", // --color-green-700 (approx HSL 142.4 71.8% 29.2%)
+    },
+  },
+  blue: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
+      "primary-foreground": "oklch(0.97 0.014 254.604)", // --color-blue-50 (approx HSL 210 40% 98%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
+      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)", // --color-blue-50 (approx HSL 210 40% 98%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.546 0.245 262.881)", // --color-blue-600 (approx HSL 217.2 91.2% 59.8%)
+      "primary-foreground": "oklch(0.379 0.146 265.522)", // --color-blue-900 (approx HSL 222.2 47.4% 11.2%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.488 0.243 264.376)", // --color-blue-700 (approx HSL 224.3 76.3% 48%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.546 0.245 262.881)", // --color-blue-600 (approx HSL 217.2 91.2% 59.8%)
+      "sidebar-primary-foreground": "oklch(0.379 0.146 265.522)", // --color-blue-900 (approx HSL 222.2 47.4% 11.2%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.488 0.243 264.376)", // --color-blue-700 (approx HSL 224.3 76.3% 48%)
+    },
+  },
+  yellow: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+      "primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+      "sidebar-primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+      "primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.554 0.135 66.442)", // --color-yellow-700 (approx HSL 35.5 91.7% 32.9%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+      "sidebar-primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.554 0.135 66.442)", // --color-yellow-700 (approx HSL 35.5 91.7% 32.9%)
+    },
+  },
+  violet: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
+      "primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
+      "sidebar-primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
+      "primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
+      "sidebar-primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
+    },
+  },
+}
diff --git a/apps/v4/registry/registry-blocks.ts b/apps/v4/registry/registry-blocks.ts
new file mode 100644
index 00000000000..67aa5ed4ed0
--- /dev/null
+++ b/apps/v4/registry/registry-blocks.ts
@@ -0,0 +1,1318 @@
+import { type Registry } from "shadcn/schema"
+
+export const blocks: Registry["items"] = [
+  {
+    name: "dashboard-01",
+    type: "registry:block",
+    description: "A dashboard with sidebar, charts and data table.",
+    dependencies: [
+      "@dnd-kit/core",
+      "@dnd-kit/modifiers",
+      "@dnd-kit/sortable",
+      "@dnd-kit/utilities",
+      "@tanstack/react-table",
+      "zod",
+    ],
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "label",
+      "chart",
+      "card",
+      "select",
+      "tabs",
+      "table",
+      "toggle-group",
+      "badge",
+      "button",
+      "checkbox",
+      "dropdown-menu",
+      "drawer",
+      "input",
+      "avatar",
+      "sheet",
+      "sonner",
+    ],
+    files: [
+      {
+        path: "blocks/dashboard-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/dashboard-01/data.json",
+        type: "registry:file",
+        target: "app/dashboard/data.json",
+      },
+      {
+        path: "blocks/dashboard-01/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/chart-area-interactive.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/data-table.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/nav-documents.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/nav-secondary.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/nav-user.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/section-cards.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/site-header.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["dashboard"],
+    meta: {
+      iframeHeight: "1000px",
+    },
+  },
+  {
+    name: "sidebar-01",
+    type: "registry:block",
+    description: "A simple sidebar with navigation grouped by section.",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "label",
+      "dropdown-menu",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-01/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-01/components/search-form.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-01/components/version-switcher.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-02",
+    description: "A sidebar with collapsible sections.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "label",
+      "dropdown-menu",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-02/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-02/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-02/components/search-form.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-02/components/version-switcher.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-03",
+    description: "A sidebar with submenus.",
+    type: "registry:block",
+    registryDependencies: ["sidebar", "breadcrumb"],
+    files: [
+      {
+        path: "blocks/sidebar-03/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-03/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-04",
+    description: "A floating sidebar with submenus.",
+    type: "registry:block",
+    registryDependencies: ["sidebar", "breadcrumb", "separator"],
+    files: [
+      {
+        path: "blocks/sidebar-04/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-04/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-05",
+    description: "A sidebar with collapsible submenus.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "label",
+      "collapsible",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-05/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-05/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-05/components/search-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-06",
+    description: "A sidebar with submenus as dropdowns.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "card",
+      "dropdown-menu",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-06/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-06/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-06/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-07",
+    type: "registry:block",
+    description: "A sidebar that collapses to icons.",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "dropdown-menu",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-07/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-07/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-07/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-07/components/nav-projects.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-07/components/nav-user.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-07/components/team-switcher.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-08",
+    description: "An inset sidebar with secondary navigation.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "dropdown-menu",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-08/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-08/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-08/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-08/components/nav-projects.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-08/components/nav-secondary.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-08/components/nav-user.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-09",
+    description: "Collapsible nested sidebars.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "dropdown-menu",
+      "avatar",
+      "switch",
+      "label",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-09/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-09/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-09/components/nav-user.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-10",
+    description: "A sidebar in a popover.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "popover",
+      "collapsible",
+      "dropdown-menu",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-10/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-10/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/nav-actions.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/nav-favorites.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/nav-secondary.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/nav-workspaces.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/team-switcher.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-11",
+    description: "A sidebar with a collapsible file tree.",
+    type: "registry:block",
+    registryDependencies: ["sidebar", "breadcrumb", "separator", "collapsible"],
+    files: [
+      {
+        path: "blocks/sidebar-11/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-11/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-12",
+    description: "A sidebar with a calendar.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "calendar",
+      "dropdown-menu",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-12/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-12/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-12/components/calendars.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-12/components/date-picker.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-12/components/nav-user.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-13",
+    description: "A sidebar in a dialog.",
+    type: "registry:block",
+    registryDependencies: ["sidebar", "breadcrumb", "button", "dialog"],
+    files: [
+      {
+        path: "blocks/sidebar-13/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-13/components/settings-dialog.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-14",
+    description: "A sidebar on the right.",
+    type: "registry:block",
+    registryDependencies: ["sidebar", "breadcrumb"],
+    files: [
+      {
+        path: "blocks/sidebar-14/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-14/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-15",
+    description: "A left and right sidebar.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "popover",
+      "collapsible",
+      "dropdown-menu",
+      "calendar",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-15/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-15/components/calendars.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/date-picker.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/nav-favorites.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/nav-secondary.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/nav-user.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/nav-workspaces.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/sidebar-left.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/sidebar-right.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/team-switcher.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-16",
+    description: "A sidebar with a sticky site header.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "dropdown-menu",
+      "avatar",
+      "button",
+      "label",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-16/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-16/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/nav-projects.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/nav-secondary.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/nav-user.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/search-form.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/site-header.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "login-01",
+    description: "A simple login form.",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/login-01/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-01/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
+  },
+  {
+    name: "login-02",
+    description: "A two column login page with a cover image.",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/login-02/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-02/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
+  },
+  {
+    name: "login-03",
+    description: "A login page with a muted background color.",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/login-03/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-03/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
+  },
+  {
+    name: "login-04",
+    description: "A login page with form and image.",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/login-04/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-04/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
+  },
+  {
+    name: "login-05",
+    description: "A simple email-only login page.",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/login-05/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-05/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
+  },
+  {
+    name: "calendar-01",
+    description: "A simple calendar.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-01.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-02",
+    description: "Multiple months with single selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-02.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-03",
+    description: "Multiple months with multiple selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-03.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-04",
+    description: "Single month with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-04.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-05",
+    description: "Multiple months with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-05.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-06",
+    description: "Range selection with minimum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-06.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-07",
+    description: "Range selection with minimum and maximum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-07.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-08",
+    description: "Calendar with disabled days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-08.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-09",
+    description: "Calendar with disabled weekends",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-09.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-10",
+    description: "Today button",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-10.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-11",
+    description: "Start and end of month",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-11.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-12",
+    description: "Localized calendar",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "select"],
+    files: [
+      {
+        path: "blocks/calendar-12.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-13",
+    description: "With Month and Year Dropdown",
+    type: "registry:block",
+    registryDependencies: ["calendar", "label", "select"],
+    files: [
+      {
+        path: "blocks/calendar-13.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-14",
+    description: "With Booked/Unavailable Days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-14.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-15",
+    description: "With Week Numbers",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-15.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-16",
+    description: "With time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-16.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-17",
+    description: "With time picker inline",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-17.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-18",
+    description: "Variable size",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-18.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-19",
+    description: "With presets",
+    type: "registry:block",
+    dependencies: ["date-fns"],
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-19.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-20",
+    description: "With time presets",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-20.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-21",
+    description: "Custom days and formatters",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-21.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-22",
+    description: "Date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-22.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-23",
+    description: "Date range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-23.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-24",
+    description: "Date and Time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-24.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-25",
+    description: "Date and Time range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-25.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-26",
+    description: "Date range picker with time",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-26.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-27",
+    description: "Chart filter",
+    type: "registry:block",
+    registryDependencies: ["calendar", "chart", "card", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-27.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-28",
+    description: "Input with date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-28.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-29",
+    description: "Natural language date picker",
+    type: "registry:block",
+    dependencies: ["chrono-node"],
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-29.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-30",
+    description: "With little-date",
+    type: "registry:block",
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-30.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-31",
+    description: "With event slots",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-31.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "700px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-32",
+    description: "Date picker in a drawer",
+    type: "registry:block",
+    registryDependencies: ["calendar", "button", "drawer"],
+    files: [
+      {
+        path: "blocks/calendar-32.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+]
diff --git a/apps/v4/registry/registry-categories.ts b/apps/v4/registry/registry-categories.ts
new file mode 100644
index 00000000000..432a351b386
--- /dev/null
+++ b/apps/v4/registry/registry-categories.ts
@@ -0,0 +1,27 @@
+export const registryCategories = [
+  {
+    name: "Sidebar",
+    slug: "sidebar",
+    hidden: false,
+  },
+  {
+    name: "Dashboard",
+    slug: "dashboard",
+    hidden: true,
+  },
+  {
+    name: "Authentication",
+    slug: "authentication",
+    hidden: false,
+  },
+  {
+    name: "Login",
+    slug: "login",
+    hidden: false,
+  },
+  {
+    name: "Calendar",
+    slug: "calendar",
+    hidden: false,
+  },
+]
diff --git a/apps/v4/registry/registry-charts.ts b/apps/v4/registry/registry-charts.ts
new file mode 100644
index 00000000000..deeda2cba61
--- /dev/null
+++ b/apps/v4/registry/registry-charts.ts
@@ -0,0 +1,855 @@
+import { type Registry } from "shadcn/schema"
+
+export const charts: Registry["items"] = [
+  // Area Charts
+  {
+    name: "chart-area-axes",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-area-axes.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
+  },
+  {
+    name: "chart-area-default",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-area-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
+  },
+  {
+    name: "chart-area-gradient",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-area-gradient.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
+  },
+  {
+    name: "chart-area-icons",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-area-icons.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
+  },
+  {
+    name: "chart-area-interactive",
+    type: "registry:block",
+    registryDependencies: ["card", "chart", "select"],
+    files: [
+      {
+        path: "charts/chart-area-interactive.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["charts", "charts-area"],
+  },
+  {
+    name: "chart-area-legend",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-area-legend.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
+  },
+  {
+    name: "chart-area-linear",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-area-linear.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
+  },
+  {
+    name: "chart-area-stacked-expand",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-area-stacked-expand.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
+  },
+  {
+    name: "chart-area-stacked",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-area-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
+  },
+  {
+    name: "chart-area-step",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-area-step.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
+  },
+
+  // Bar Charts
+  {
+    name: "chart-bar-active",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-bar-active.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
+  },
+  {
+    name: "chart-bar-default",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-bar-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
+  },
+  {
+    name: "chart-bar-horizontal",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-bar-horizontal.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
+  },
+  {
+    name: "chart-bar-interactive",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-bar-interactive.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
+  },
+  {
+    name: "chart-bar-label-custom",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-bar-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
+  },
+  {
+    name: "chart-bar-label",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-bar-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
+  },
+  {
+    name: "chart-bar-mixed",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-bar-mixed.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
+  },
+  {
+    name: "chart-bar-multiple",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-bar-multiple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
+  },
+  {
+    name: "chart-bar-negative",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-bar-negative.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
+  },
+  {
+    name: "chart-bar-stacked",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-bar-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
+  },
+
+  // Line Charts
+  {
+    name: "chart-line-default",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-line-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
+  },
+  {
+    name: "chart-line-dots-colors",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-line-dots-colors.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
+  },
+  {
+    name: "chart-line-dots-custom",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-line-dots-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
+  },
+  {
+    name: "chart-line-dots",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-line-dots.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
+  },
+  {
+    name: "chart-line-interactive",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-line-interactive.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
+  },
+  {
+    name: "chart-line-label-custom",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-line-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
+  },
+  {
+    name: "chart-line-label",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-line-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
+  },
+  {
+    name: "chart-line-linear",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-line-linear.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
+  },
+  {
+    name: "chart-line-multiple",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-line-multiple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
+  },
+  {
+    name: "chart-line-step",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-line-step.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
+  },
+
+  // Pie Charts
+  {
+    name: "chart-pie-donut-active",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-pie-donut-active.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
+  },
+  {
+    name: "chart-pie-donut-text",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-pie-donut-text.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
+  },
+  {
+    name: "chart-pie-donut",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-pie-donut.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
+  },
+  {
+    name: "chart-pie-interactive",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-pie-interactive.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
+  },
+  {
+    name: "chart-pie-label-custom",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-pie-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
+  },
+  {
+    name: "chart-pie-label-list",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-pie-label-list.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
+  },
+  {
+    name: "chart-pie-label",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-pie-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
+  },
+  {
+    name: "chart-pie-legend",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-pie-legend.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
+  },
+  {
+    name: "chart-pie-separator-none",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-pie-separator-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
+  },
+  {
+    name: "chart-pie-simple",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-pie-simple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
+  },
+  {
+    name: "chart-pie-stacked",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-pie-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
+  },
+
+  // Radar Charts
+  {
+    name: "chart-radar-default",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-dots",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-dots.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-grid-circle-fill",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-grid-circle-fill.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-grid-circle-no-lines",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-grid-circle-no-lines.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-grid-circle",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-grid-circle.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-grid-custom",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-grid-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-grid-fill",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-grid-fill.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-grid-none",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-grid-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-icons",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-icons.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-label-custom",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-legend",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-legend.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-lines-only",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-lines-only.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-multiple",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-multiple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+  {
+    name: "chart-radar-radius",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radar-radius.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
+  },
+
+  // Radial Charts
+  {
+    name: "chart-radial-grid",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radial-grid.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
+  },
+  {
+    name: "chart-radial-label",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radial-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
+  },
+  {
+    name: "chart-radial-shape",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radial-shape.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
+  },
+  {
+    name: "chart-radial-simple",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radial-simple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
+  },
+  {
+    name: "chart-radial-stacked",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radial-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
+  },
+  {
+    name: "chart-radial-text",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-radial-text.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
+  },
+  {
+    name: "chart-tooltip-default",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-tooltip-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
+  },
+  {
+    name: "chart-tooltip-indicator-line",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-tooltip-indicator-line.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
+  },
+  {
+    name: "chart-tooltip-indicator-none",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-tooltip-indicator-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
+  },
+  {
+    name: "chart-tooltip-label-none",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-tooltip-label-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
+  },
+  {
+    name: "chart-tooltip-label-custom",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-tooltip-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
+  },
+  {
+    name: "chart-tooltip-label-formatter",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-tooltip-label-formatter.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
+  },
+  {
+    name: "chart-tooltip-formatter",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-tooltip-formatter.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
+  },
+  {
+    name: "chart-tooltip-icons",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-tooltip-icons.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
+  },
+  {
+    name: "chart-tooltip-advanced",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/chart-tooltip-advanced.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
+  },
+]
diff --git a/apps/v4/registry/registry-colors.ts b/apps/v4/registry/registry-colors.ts
new file mode 100644
index 00000000000..d5da076ee55
--- /dev/null
+++ b/apps/v4/registry/registry-colors.ts
@@ -0,0 +1,1810 @@
+export const colors = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  black: {
+    hex: "#000000",
+    rgb: "rgb(0,0,0)",
+    hsl: "hsl(0,0%,0%)",
+    oklch: "oklch(0.00,0.00,0)",
+  },
+  white: {
+    hex: "#ffffff",
+    rgb: "rgb(255,255,255)",
+    hsl: "hsl(0,0%,100%)",
+    oklch: "oklch(1.00,0.00,0)",
+  },
+  neutral: [
+    {
+      scale: 50,
+      hex: "#fafafa",
+      rgb: "rgb(250,250,250)",
+      hsl: "hsl(0,0%,98%)",
+      oklch: "oklch(0.99,0.00,0)",
+    },
+    {
+      scale: 100,
+      hex: "#f5f5f5",
+      rgb: "rgb(245,245,245)",
+      hsl: "hsl(0,0%,96.1%)",
+      oklch: "oklch(0.97,0.00,0)",
+    },
+    {
+      scale: 200,
+      hex: "#e5e5e5",
+      rgb: "rgb(229,229,229)",
+      hsl: "hsl(0,0%,89.8%)",
+      oklch: "oklch(0.92,0.00,0)",
+    },
+    {
+      scale: 300,
+      hex: "#d4d4d4",
+      rgb: "rgb(212,212,212)",
+      hsl: "hsl(0,0%,83.1%)",
+      oklch: "oklch(0.87,0.00,0)",
+    },
+    {
+      scale: 400,
+      hex: "#a3a3a3",
+      rgb: "rgb(163,163,163)",
+      hsl: "hsl(0,0%,63.9%)",
+      oklch: "oklch(0.72,0.00,0)",
+    },
+    {
+      scale: 500,
+      hex: "#737373",
+      rgb: "rgb(115,115,115)",
+      hsl: "hsl(0,0%,45.1%)",
+      oklch: "oklch(0.56,0.00,0)",
+    },
+    {
+      scale: 600,
+      hex: "#525252",
+      rgb: "rgb(82,82,82)",
+      hsl: "hsl(0,0%,32.2%)",
+      oklch: "oklch(0.44,0.00,0)",
+    },
+    {
+      scale: 700,
+      hex: "#404040",
+      rgb: "rgb(64,64,64)",
+      hsl: "hsl(0,0%,25.1%)",
+      oklch: "oklch(0.37,0.00,0)",
+    },
+    {
+      scale: 800,
+      hex: "#262626",
+      rgb: "rgb(38,38,38)",
+      hsl: "hsl(0,0%,14.9%)",
+      oklch: "oklch(0.27,0.00,0)",
+    },
+    {
+      scale: 900,
+      hex: "#171717",
+      rgb: "rgb(23,23,23)",
+      hsl: "hsl(0,0%,9%)",
+      oklch: "oklch(0.20,0.00,0)",
+    },
+    {
+      scale: 950,
+      hex: "#0a0a0a",
+      rgb: "rgb(10,10,10)",
+      hsl: "hsl(0,0%,3.9%)",
+      oklch: "oklch(0.14,0.00,0)",
+    },
+  ],
+  stone: [
+    {
+      scale: 50,
+      hex: "#fafaf9",
+      rgb: "rgb(250,250,249)",
+      hsl: "hsl(60,9.1%,97.8%)",
+      oklch: "oklch(0.98,0.00,106)",
+    },
+    {
+      scale: 100,
+      hex: "#f5f5f4",
+      rgb: "rgb(245,245,244)",
+      hsl: "hsl(60,4.8%,95.9%)",
+      oklch: "oklch(0.97,0.00,106)",
+    },
+    {
+      scale: 200,
+      hex: "#e7e5e4",
+      rgb: "rgb(231,229,228)",
+      hsl: "hsl(20,5.9%,90%)",
+      oklch: "oklch(0.92,0.00,49)",
+    },
+    {
+      scale: 300,
+      hex: "#d6d3d1",
+      rgb: "rgb(214,211,209)",
+      hsl: "hsl(24,5.7%,82.9%)",
+      oklch: "oklch(0.87,0.00,56)",
+    },
+    {
+      scale: 400,
+      hex: "#a8a29e",
+      rgb: "rgb(168,162,158)",
+      hsl: "hsl(24,5.4%,63.9%)",
+      oklch: "oklch(0.72,0.01,56)",
+    },
+    {
+      scale: 500,
+      hex: "#78716c",
+      rgb: "rgb(120,113,108)",
+      hsl: "hsl(25,5.3%,44.7%)",
+      oklch: "oklch(0.55,0.01,58)",
+    },
+    {
+      scale: 600,
+      hex: "#57534e",
+      rgb: "rgb(87,83,78)",
+      hsl: "hsl(33.3,5.5%,32.4%)",
+      oklch: "oklch(0.44,0.01,74)",
+    },
+    {
+      scale: 700,
+      hex: "#44403c",
+      rgb: "rgb(68,64,60)",
+      hsl: "hsl(30,6.3%,25.1%)",
+      oklch: "oklch(0.37,0.01,68)",
+    },
+    {
+      scale: 800,
+      hex: "#292524",
+      rgb: "rgb(41,37,36)",
+      hsl: "hsl(12,6.5%,15.1%)",
+      oklch: "oklch(0.27,0.01,34)",
+    },
+    {
+      scale: 900,
+      hex: "#1c1917",
+      rgb: "rgb(28,25,23)",
+      hsl: "hsl(24,9.8%,10%)",
+      oklch: "oklch(0.22,0.01,56)",
+    },
+    {
+      scale: 950,
+      hex: "#0c0a09",
+      rgb: "rgb(12,10,9)",
+      hsl: "hsl(20,14.3%,4.1%)",
+      oklch: "oklch(0.15,0.00,49)",
+    },
+  ],
+  zinc: [
+    {
+      scale: 50,
+      hex: "#fafafa",
+      rgb: "rgb(250,250,250)",
+      hsl: "hsl(0,0%,98%)",
+      oklch: "oklch(0.99,0.00,0)",
+    },
+    {
+      scale: 100,
+      hex: "#f4f4f5",
+      rgb: "rgb(244,244,245)",
+      hsl: "hsl(240,4.8%,95.9%)",
+      oklch: "oklch(0.97,0.00,286)",
+    },
+    {
+      scale: 200,
+      hex: "#e4e4e7",
+      rgb: "rgb(228,228,231)",
+      hsl: "hsl(240,5.9%,90%)",
+      oklch: "oklch(0.92,0.00,286)",
+    },
+    {
+      scale: 300,
+      hex: "#d4d4d8",
+      rgb: "rgb(212,212,216)",
+      hsl: "hsl(240,4.9%,83.9%)",
+      oklch: "oklch(0.87,0.01,286)",
+    },
+    {
+      scale: 400,
+      hex: "#a1a1aa",
+      rgb: "rgb(161,161,170)",
+      hsl: "hsl(240,5%,64.9%)",
+      oklch: "oklch(0.71,0.01,286)",
+    },
+    {
+      scale: 500,
+      hex: "#71717a",
+      rgb: "rgb(113,113,122)",
+      hsl: "hsl(240,3.8%,46.1%)",
+      oklch: "oklch(0.55,0.01,286)",
+    },
+    {
+      scale: 600,
+      hex: "#52525b",
+      rgb: "rgb(82,82,91)",
+      hsl: "hsl(240,5.2%,33.9%)",
+      oklch: "oklch(0.44,0.01,286)",
+    },
+    {
+      scale: 700,
+      hex: "#3f3f46",
+      rgb: "rgb(63,63,70)",
+      hsl: "hsl(240,5.3%,26.1%)",
+      oklch: "oklch(0.37,0.01,286)",
+    },
+    {
+      scale: 800,
+      hex: "#27272a",
+      rgb: "rgb(39,39,42)",
+      hsl: "hsl(240,3.7%,15.9%)",
+      oklch: "oklch(0.27,0.01,286)",
+    },
+    {
+      scale: 900,
+      hex: "#18181b",
+      rgb: "rgb(24,24,27)",
+      hsl: "hsl(240,5.9%,10%)",
+      oklch: "oklch(0.21,0.01,286)",
+    },
+    {
+      scale: 950,
+      hex: "#09090b",
+      rgb: "rgb(9,9,11)",
+      hsl: "hsl(240,10%,3.9%)",
+      oklch: "oklch(0.14,0.00,286)",
+    },
+  ],
+  slate: [
+    {
+      scale: 50,
+      hex: "#f8fafc",
+      rgb: "rgb(248,250,252)",
+      hsl: "hsl(210,40%,98%)",
+      oklch: "oklch(0.98,0.00,248)",
+    },
+    {
+      scale: 100,
+      hex: "#f1f5f9",
+      rgb: "rgb(241,245,249)",
+      hsl: "hsl(210,40%,96.1%)",
+      oklch: "oklch(0.97,0.01,248)",
+    },
+    {
+      scale: 200,
+      hex: "#e2e8f0",
+      rgb: "rgb(226,232,240)",
+      hsl: "hsl(214.3,31.8%,91.4%)",
+      oklch: "oklch(0.93,0.01,256)",
+    },
+    {
+      scale: 300,
+      hex: "#cbd5e1",
+      rgb: "rgb(203,213,225)",
+      hsl: "hsl(212.7,26.8%,83.9%)",
+      oklch: "oklch(0.87,0.02,253)",
+    },
+    {
+      scale: 400,
+      hex: "#94a3b8",
+      rgb: "rgb(148,163,184)",
+      hsl: "hsl(215,20.2%,65.1%)",
+      oklch: "oklch(0.71,0.04,257)",
+    },
+    {
+      scale: 500,
+      hex: "#64748b",
+      rgb: "rgb(100,116,139)",
+      hsl: "hsl(215.4,16.3%,46.9%)",
+      oklch: "oklch(0.55,0.04,257)",
+    },
+    {
+      scale: 600,
+      hex: "#475569",
+      rgb: "rgb(71,85,105)",
+      hsl: "hsl(215.3,19.3%,34.5%)",
+      oklch: "oklch(0.45,0.04,257)",
+    },
+    {
+      scale: 700,
+      hex: "#334155",
+      rgb: "rgb(51,65,85)",
+      hsl: "hsl(215.3,25%,26.7%)",
+      oklch: "oklch(0.37,0.04,257)",
+    },
+    {
+      scale: 800,
+      hex: "#1e293b",
+      rgb: "rgb(30,41,59)",
+      hsl: "hsl(217.2,32.6%,17.5%)",
+      oklch: "oklch(0.28,0.04,260)",
+    },
+    {
+      scale: 900,
+      hex: "#0f172a",
+      rgb: "rgb(15,23,42)",
+      hsl: "hsl(222.2,47.4%,11.2%)",
+      oklch: "oklch(0.21,0.04,266)",
+    },
+    {
+      scale: 950,
+      hex: "#020617",
+      rgb: "rgb(2,6,23)",
+      hsl: "hsl(222.2,84%,4.9%)",
+      oklch: "oklch(0.13,0.04,265)",
+    },
+  ],
+  gray: [
+    {
+      scale: 50,
+      hex: "#f9fafb",
+      rgb: "rgb(249,250,251)",
+      hsl: "hsl(210,20%,98%)",
+      oklch: "oklch(0.98,0.00,248)",
+    },
+    {
+      scale: 100,
+      hex: "#f3f4f6",
+      rgb: "rgb(243,244,246)",
+      hsl: "hsl(220,14.3%,95.9%)",
+      oklch: "oklch(0.97,0.00,265)",
+    },
+    {
+      scale: 200,
+      hex: "#e5e7eb",
+      rgb: "rgb(229,231,235)",
+      hsl: "hsl(220,13%,91%)",
+      oklch: "oklch(0.93,0.01,265)",
+    },
+    {
+      scale: 300,
+      hex: "#d1d5db",
+      rgb: "rgb(209,213,219)",
+      hsl: "hsl(216,12.2%,83.9%)",
+      oklch: "oklch(0.87,0.01,258)",
+    },
+    {
+      scale: 400,
+      hex: "#9ca3af",
+      rgb: "rgb(156,163,175)",
+      hsl: "hsl(217.9,10.6%,64.9%)",
+      oklch: "oklch(0.71,0.02,261)",
+    },
+    {
+      scale: 500,
+      hex: "#6b7280",
+      rgb: "rgb(107,114,128)",
+      hsl: "hsl(220,8.9%,46.1%)",
+      oklch: "oklch(0.55,0.02,264)",
+    },
+    {
+      scale: 600,
+      hex: "#4b5563",
+      rgb: "rgb(75,85,99)",
+      hsl: "hsl(215,13.8%,34.1%)",
+      oklch: "oklch(0.45,0.03,257)",
+    },
+    {
+      scale: 700,
+      hex: "#374151",
+      rgb: "rgb(55,65,81)",
+      hsl: "hsl(216.9,19.1%,26.7%)",
+      oklch: "oklch(0.37,0.03,260)",
+    },
+    {
+      scale: 800,
+      hex: "#1f2937",
+      rgb: "rgb(31,41,55)",
+      hsl: "hsl(215,27.9%,16.9%)",
+      oklch: "oklch(0.28,0.03,257)",
+    },
+    {
+      scale: 900,
+      hex: "#111827",
+      rgb: "rgb(17,24,39)",
+      hsl: "hsl(220.9,39.3%,11%)",
+      oklch: "oklch(0.21,0.03,265)",
+    },
+    {
+      scale: 950,
+      hex: "#030712",
+      rgb: "rgb(3,7,18)",
+      hsl: "hsl(224,71.4%,4.1%)",
+      oklch: "oklch(0.13,0.03,262)",
+    },
+  ],
+  red: [
+    {
+      scale: 50,
+      hex: "#fef2f2",
+      rgb: "rgb(254,242,242)",
+      hsl: "hsl(0,85.7%,97.3%)",
+      oklch: "oklch(0.97,0.01,17)",
+    },
+    {
+      scale: 100,
+      hex: "#fee2e2",
+      rgb: "rgb(254,226,226)",
+      hsl: "hsl(0,93.3%,94.1%)",
+      oklch: "oklch(0.94,0.03,18)",
+    },
+    {
+      scale: 200,
+      hex: "#fecaca",
+      rgb: "rgb(254,202,202)",
+      hsl: "hsl(0,96.3%,89.4%)",
+      oklch: "oklch(0.88,0.06,18)",
+    },
+    {
+      scale: 300,
+      hex: "#fca5a5",
+      rgb: "rgb(252,165,165)",
+      hsl: "hsl(0,93.5%,81.8%)",
+      oklch: "oklch(0.81,0.10,20)",
+    },
+    {
+      scale: 400,
+      hex: "#f87171",
+      rgb: "rgb(248,113,113)",
+      hsl: "hsl(0,90.6%,70.8%)",
+      oklch: "oklch(0.71,0.17,22)",
+    },
+    {
+      scale: 500,
+      hex: "#ef4444",
+      rgb: "rgb(239,68,68)",
+      hsl: "hsl(0,84.2%,60.2%)",
+      oklch: "oklch(0.64,0.21,25)",
+    },
+    {
+      scale: 600,
+      hex: "#dc2626",
+      rgb: "rgb(220,38,38)",
+      hsl: "hsl(0,72.2%,50.6%)",
+      oklch: "oklch(0.58,0.22,27)",
+    },
+    {
+      scale: 700,
+      hex: "#b91c1c",
+      rgb: "rgb(185,28,28)",
+      hsl: "hsl(0,73.7%,41.8%)",
+      oklch: "oklch(0.51,0.19,28)",
+    },
+    {
+      scale: 800,
+      hex: "#991b1b",
+      rgb: "rgb(153,27,27)",
+      hsl: "hsl(0,70%,35.3%)",
+      oklch: "oklch(0.44,0.16,27)",
+    },
+    {
+      scale: 900,
+      hex: "#7f1d1d",
+      rgb: "rgb(127,29,29)",
+      hsl: "hsl(0,62.8%,30.6%)",
+      oklch: "oklch(0.40,0.13,26)",
+    },
+    {
+      scale: 950,
+      hex: "#450a0a",
+      rgb: "rgb(69,10,10)",
+      hsl: "hsl(0,74.7%,15.5%)",
+      oklch: "oklch(0.26,0.09,26)",
+    },
+  ],
+  orange: [
+    {
+      scale: 50,
+      hex: "#fff7ed",
+      rgb: "rgb(255,247,237)",
+      hsl: "hsl(33.3,100%,96.5%)",
+      oklch: "oklch(0.98,0.02,74)",
+    },
+    {
+      scale: 100,
+      hex: "#ffedd5",
+      rgb: "rgb(255,237,213)",
+      hsl: "hsl(34.3,100%,91.8%)",
+      oklch: "oklch(0.95,0.04,75)",
+    },
+    {
+      scale: 200,
+      hex: "#fed7aa",
+      rgb: "rgb(254,215,170)",
+      hsl: "hsl(32.1,97.7%,83.1%)",
+      oklch: "oklch(0.90,0.07,71)",
+    },
+    {
+      scale: 300,
+      hex: "#fdba74",
+      rgb: "rgb(253,186,116)",
+      hsl: "hsl(30.7,97.2%,72.4%)",
+      oklch: "oklch(0.84,0.12,66)",
+    },
+    {
+      scale: 400,
+      hex: "#fb923c",
+      rgb: "rgb(251,146,60)",
+      hsl: "hsl(27,96%,61%)",
+      oklch: "oklch(0.76,0.16,56)",
+    },
+    {
+      scale: 500,
+      hex: "#f97316",
+      rgb: "rgb(249,115,22)",
+      hsl: "hsl(24.6,95%,53.1%)",
+      oklch: "oklch(0.70,0.19,48)",
+    },
+    {
+      scale: 600,
+      hex: "#ea580c",
+      rgb: "rgb(234,88,12)",
+      hsl: "hsl(20.5,90.2%,48.2%)",
+      oklch: "oklch(0.65,0.19,41)",
+    },
+    {
+      scale: 700,
+      hex: "#c2410c",
+      rgb: "rgb(194,65,12)",
+      hsl: "hsl(17.5,88.3%,40.4%)",
+      oklch: "oklch(0.55,0.17,38)",
+    },
+    {
+      scale: 800,
+      hex: "#9a3412",
+      rgb: "rgb(154,52,18)",
+      hsl: "hsl(15,79.1%,33.7%)",
+      oklch: "oklch(0.47,0.14,37)",
+    },
+    {
+      scale: 900,
+      hex: "#7c2d12",
+      rgb: "rgb(124,45,18)",
+      hsl: "hsl(15.3,74.6%,27.8%)",
+      oklch: "oklch(0.41,0.12,38)",
+    },
+    {
+      scale: 950,
+      hex: "#431407",
+      rgb: "rgb(67,20,7)",
+      hsl: "hsl(13,81.1%,14.5%)",
+      oklch: "oklch(0.27,0.08,36)",
+    },
+  ],
+  amber: [
+    {
+      scale: 50,
+      hex: "#fffbeb",
+      rgb: "rgb(255,251,235)",
+      hsl: "hsl(48,100%,96.1%)",
+      oklch: "oklch(0.99,0.02,95)",
+    },
+    {
+      scale: 100,
+      hex: "#fef3c7",
+      rgb: "rgb(254,243,199)",
+      hsl: "hsl(48,96.5%,88.8%)",
+      oklch: "oklch(0.96,0.06,96)",
+    },
+    {
+      scale: 200,
+      hex: "#fde68a",
+      rgb: "rgb(253,230,138)",
+      hsl: "hsl(48,96.6%,76.7%)",
+      oklch: "oklch(0.92,0.12,96)",
+    },
+    {
+      scale: 300,
+      hex: "#fcd34d",
+      rgb: "rgb(252,211,77)",
+      hsl: "hsl(45.9,96.7%,64.5%)",
+      oklch: "oklch(0.88,0.15,92)",
+    },
+    {
+      scale: 400,
+      hex: "#fbbf24",
+      rgb: "rgb(251,191,36)",
+      hsl: "hsl(43.3,96.4%,56.3%)",
+      oklch: "oklch(0.84,0.16,84)",
+    },
+    {
+      scale: 500,
+      hex: "#f59e0b",
+      rgb: "rgb(245,158,11)",
+      hsl: "hsl(37.7,92.1%,50.2%)",
+      oklch: "oklch(0.77,0.16,70)",
+    },
+    {
+      scale: 600,
+      hex: "#d97706",
+      rgb: "rgb(217,119,6)",
+      hsl: "hsl(32.1,94.6%,43.7%)",
+      oklch: "oklch(0.67,0.16,58)",
+    },
+    {
+      scale: 700,
+      hex: "#b45309",
+      rgb: "rgb(180,83,9)",
+      hsl: "hsl(26,90.5%,37.1%)",
+      oklch: "oklch(0.56,0.15,49)",
+    },
+    {
+      scale: 800,
+      hex: "#92400e",
+      rgb: "rgb(146,64,14)",
+      hsl: "hsl(22.7,82.5%,31.4%)",
+      oklch: "oklch(0.47,0.12,46)",
+    },
+    {
+      scale: 900,
+      hex: "#78350f",
+      rgb: "rgb(120,53,15)",
+      hsl: "hsl(21.7,77.8%,26.5%)",
+      oklch: "oklch(0.41,0.11,46)",
+    },
+    {
+      scale: 950,
+      hex: "#451a03",
+      rgb: "rgb(69,26,3)",
+      hsl: "hsl(20.9,91.7%,14.1%)",
+      oklch: "oklch(0.28,0.07,46)",
+    },
+  ],
+  yellow: [
+    {
+      scale: 50,
+      hex: "#fefce8",
+      rgb: "rgb(254,252,232)",
+      hsl: "hsl(54.5,91.7%,95.3%)",
+      oklch: "oklch(0.99,0.03,102)",
+    },
+    {
+      scale: 100,
+      hex: "#fef9c3",
+      rgb: "rgb(254,249,195)",
+      hsl: "hsl(54.9,96.7%,88%)",
+      oklch: "oklch(0.97,0.07,103)",
+    },
+    {
+      scale: 200,
+      hex: "#fef08a",
+      rgb: "rgb(254,240,138)",
+      hsl: "hsl(52.8,98.3%,76.9%)",
+      oklch: "oklch(0.95,0.12,102)",
+    },
+    {
+      scale: 300,
+      hex: "#fde047",
+      rgb: "rgb(253,224,71)",
+      hsl: "hsl(50.4,97.8%,63.5%)",
+      oklch: "oklch(0.91,0.17,98)",
+    },
+    {
+      scale: 400,
+      hex: "#facc15",
+      rgb: "rgb(250,204,21)",
+      hsl: "hsl(47.9,95.8%,53.1%)",
+      oklch: "oklch(0.86,0.17,92)",
+    },
+    {
+      scale: 500,
+      hex: "#eab308",
+      rgb: "rgb(234,179,8)",
+      hsl: "hsl(45.4,93.4%,47.5%)",
+      oklch: "oklch(0.80,0.16,86)",
+    },
+    {
+      scale: 600,
+      hex: "#ca8a04",
+      rgb: "rgb(202,138,4)",
+      hsl: "hsl(40.6,96.1%,40.4%)",
+      oklch: "oklch(0.68,0.14,76)",
+    },
+    {
+      scale: 700,
+      hex: "#a16207",
+      rgb: "rgb(161,98,7)",
+      hsl: "hsl(35.5,91.7%,32.9%)",
+      oklch: "oklch(0.55,0.12,66)",
+    },
+    {
+      scale: 800,
+      hex: "#854d0e",
+      rgb: "rgb(133,77,14)",
+      hsl: "hsl(31.8,81%,28.8%)",
+      oklch: "oklch(0.48,0.10,62)",
+    },
+    {
+      scale: 900,
+      hex: "#713f12",
+      rgb: "rgb(113,63,18)",
+      hsl: "hsl(28.4,72.5%,25.7%)",
+      oklch: "oklch(0.42,0.09,58)",
+    },
+    {
+      scale: 950,
+      hex: "#422006",
+      rgb: "rgb(66,32,6)",
+      hsl: "hsl(26,83.3%,14.1%)",
+      oklch: "oklch(0.29,0.06,54)",
+    },
+  ],
+  lime: [
+    {
+      scale: 50,
+      hex: "#f7fee7",
+      rgb: "rgb(247,254,231)",
+      hsl: "hsl(78.3,92%,95.1%)",
+      oklch: "oklch(0.99,0.03,121)",
+    },
+    {
+      scale: 100,
+      hex: "#ecfccb",
+      rgb: "rgb(236,252,203)",
+      hsl: "hsl(79.6,89.1%,89.2%)",
+      oklch: "oklch(0.97,0.07,122)",
+    },
+    {
+      scale: 200,
+      hex: "#d9f99d",
+      rgb: "rgb(217,249,157)",
+      hsl: "hsl(80.9,88.5%,79.6%)",
+      oklch: "oklch(0.94,0.12,124)",
+    },
+    {
+      scale: 300,
+      hex: "#bef264",
+      rgb: "rgb(190,242,100)",
+      hsl: "hsl(82,84.5%,67.1%)",
+      oklch: "oklch(0.90,0.18,127)",
+    },
+    {
+      scale: 400,
+      hex: "#a3e635",
+      rgb: "rgb(163,230,53)",
+      hsl: "hsl(82.7,78%,55.5%)",
+      oklch: "oklch(0.85,0.21,129)",
+    },
+    {
+      scale: 500,
+      hex: "#84cc16",
+      rgb: "rgb(132,204,22)",
+      hsl: "hsl(83.7,80.5%,44.3%)",
+      oklch: "oklch(0.77,0.20,131)",
+    },
+    {
+      scale: 600,
+      hex: "#65a30d",
+      rgb: "rgb(101,163,13)",
+      hsl: "hsl(84.8,85.2%,34.5%)",
+      oklch: "oklch(0.65,0.18,132)",
+    },
+    {
+      scale: 700,
+      hex: "#4d7c0f",
+      rgb: "rgb(77,124,15)",
+      hsl: "hsl(85.9,78.4%,27.3%)",
+      oklch: "oklch(0.53,0.14,132)",
+    },
+    {
+      scale: 800,
+      hex: "#3f6212",
+      rgb: "rgb(63,98,18)",
+      hsl: "hsl(86.3,69%,22.7%)",
+      oklch: "oklch(0.45,0.11,131)",
+    },
+    {
+      scale: 900,
+      hex: "#365314",
+      rgb: "rgb(54,83,20)",
+      hsl: "hsl(87.6,61.2%,20.2%)",
+      oklch: "oklch(0.41,0.10,131)",
+    },
+    {
+      scale: 950,
+      hex: "#1a2e05",
+      rgb: "rgb(26,46,5)",
+      hsl: "hsl(89.3,80.4%,10%)",
+      oklch: "oklch(0.27,0.07,132)",
+    },
+  ],
+  green: [
+    {
+      scale: 50,
+      hex: "#f0fdf4",
+      rgb: "rgb(240,253,244)",
+      hsl: "hsl(138.5,76.5%,96.7%)",
+      oklch: "oklch(0.98,0.02,156)",
+    },
+    {
+      scale: 100,
+      hex: "#dcfce7",
+      rgb: "rgb(220,252,231)",
+      hsl: "hsl(140.6,84.2%,92.5%)",
+      oklch: "oklch(0.96,0.04,157)",
+    },
+    {
+      scale: 200,
+      hex: "#bbf7d0",
+      rgb: "rgb(187,247,208)",
+      hsl: "hsl(141,78.9%,85.1%)",
+      oklch: "oklch(0.93,0.08,156)",
+    },
+    {
+      scale: 300,
+      hex: "#86efac",
+      rgb: "rgb(134,239,172)",
+      hsl: "hsl(141.7,76.6%,73.1%)",
+      oklch: "oklch(0.87,0.14,154)",
+    },
+    {
+      scale: 400,
+      hex: "#4ade80",
+      rgb: "rgb(74,222,128)",
+      hsl: "hsl(141.9,69.2%,58%)",
+      oklch: "oklch(0.80,0.18,152)",
+    },
+    {
+      scale: 500,
+      hex: "#22c55e",
+      rgb: "rgb(34,197,94)",
+      hsl: "hsl(142.1,70.6%,45.3%)",
+      oklch: "oklch(0.72,0.19,150)",
+    },
+    {
+      scale: 600,
+      hex: "#16a34a",
+      rgb: "rgb(22,163,74)",
+      hsl: "hsl(142.1,76.2%,36.3%)",
+      oklch: "oklch(0.63,0.17,149)",
+    },
+    {
+      scale: 700,
+      hex: "#15803d",
+      rgb: "rgb(21,128,61)",
+      hsl: "hsl(142.4,71.8%,29.2%)",
+      oklch: "oklch(0.53,0.14,150)",
+    },
+    {
+      scale: 800,
+      hex: "#166534",
+      rgb: "rgb(22,101,52)",
+      hsl: "hsl(142.8,64.2%,24.1%)",
+      oklch: "oklch(0.45,0.11,151)",
+    },
+    {
+      scale: 900,
+      hex: "#14532d",
+      rgb: "rgb(20,83,45)",
+      hsl: "hsl(143.8,61.2%,20.2%)",
+      oklch: "oklch(0.39,0.09,153)",
+    },
+    {
+      scale: 950,
+      hex: "#052e16",
+      rgb: "rgb(5,46,22)",
+      hsl: "hsl(144.9,80.4%,10%)",
+      oklch: "oklch(0.27,0.06,153)",
+    },
+  ],
+  emerald: [
+    {
+      scale: 50,
+      hex: "#ecfdf5",
+      rgb: "rgb(236,253,245)",
+      hsl: "hsl(151.8,81%,95.9%)",
+      oklch: "oklch(0.98,0.02,166)",
+    },
+    {
+      scale: 100,
+      hex: "#d1fae5",
+      rgb: "rgb(209,250,229)",
+      hsl: "hsl(149.3,80.4%,90%)",
+      oklch: "oklch(0.95,0.05,163)",
+    },
+    {
+      scale: 200,
+      hex: "#a7f3d0",
+      rgb: "rgb(167,243,208)",
+      hsl: "hsl(152.4,76%,80.4%)",
+      oklch: "oklch(0.90,0.09,164)",
+    },
+    {
+      scale: 300,
+      hex: "#6ee7b7",
+      rgb: "rgb(110,231,183)",
+      hsl: "hsl(156.2,71.6%,66.9%)",
+      oklch: "oklch(0.85,0.13,165)",
+    },
+    {
+      scale: 400,
+      hex: "#34d399",
+      rgb: "rgb(52,211,153)",
+      hsl: "hsl(158.1,64.4%,51.6%)",
+      oklch: "oklch(0.77,0.15,163)",
+    },
+    {
+      scale: 500,
+      hex: "#10b981",
+      rgb: "rgb(16,185,129)",
+      hsl: "hsl(160.1,84.1%,39.4%)",
+      oklch: "oklch(0.70,0.15,162)",
+    },
+    {
+      scale: 600,
+      hex: "#059669",
+      rgb: "rgb(5,150,105)",
+      hsl: "hsl(161.4,93.5%,30.4%)",
+      oklch: "oklch(0.60,0.13,163)",
+    },
+    {
+      scale: 700,
+      hex: "#047857",
+      rgb: "rgb(4,120,87)",
+      hsl: "hsl(162.9,93.5%,24.3%)",
+      oklch: "oklch(0.51,0.10,166)",
+    },
+    {
+      scale: 800,
+      hex: "#065f46",
+      rgb: "rgb(6,95,70)",
+      hsl: "hsl(163.1,88.1%,19.8%)",
+      oklch: "oklch(0.43,0.09,167)",
+    },
+    {
+      scale: 900,
+      hex: "#064e3b",
+      rgb: "rgb(6,78,59)",
+      hsl: "hsl(164.2,85.7%,16.5%)",
+      oklch: "oklch(0.38,0.07,169)",
+    },
+    {
+      scale: 950,
+      hex: "#022c22",
+      rgb: "rgb(2,44,34)",
+      hsl: "hsl(165.7,91.3%,9%)",
+      oklch: "oklch(0.26,0.05,173)",
+    },
+  ],
+  teal: [
+    {
+      scale: 50,
+      hex: "#f0fdfa",
+      rgb: "rgb(240,253,250)",
+      hsl: "hsl(166.2,76.5%,96.7%)",
+      oklch: "oklch(0.98,0.01,181)",
+    },
+    {
+      scale: 100,
+      hex: "#ccfbf1",
+      rgb: "rgb(204,251,241)",
+      hsl: "hsl(167.2,85.5%,89.2%)",
+      oklch: "oklch(0.95,0.05,181)",
+    },
+    {
+      scale: 200,
+      hex: "#99f6e4",
+      rgb: "rgb(153,246,228)",
+      hsl: "hsl(168.4,83.8%,78.2%)",
+      oklch: "oklch(0.91,0.09,180)",
+    },
+    {
+      scale: 300,
+      hex: "#5eead4",
+      rgb: "rgb(94,234,212)",
+      hsl: "hsl(170.6,76.9%,64.3%)",
+      oklch: "oklch(0.85,0.13,181)",
+    },
+    {
+      scale: 400,
+      hex: "#2dd4bf",
+      rgb: "rgb(45,212,191)",
+      hsl: "hsl(172.5,66%,50.4%)",
+      oklch: "oklch(0.78,0.13,182)",
+    },
+    {
+      scale: 500,
+      hex: "#14b8a6",
+      rgb: "rgb(20,184,166)",
+      hsl: "hsl(173.4,80.4%,40%)",
+      oklch: "oklch(0.70,0.12,183)",
+    },
+    {
+      scale: 600,
+      hex: "#0d9488",
+      rgb: "rgb(13,148,136)",
+      hsl: "hsl(174.7,83.9%,31.6%)",
+      oklch: "oklch(0.60,0.10,185)",
+    },
+    {
+      scale: 700,
+      hex: "#0f766e",
+      rgb: "rgb(15,118,110)",
+      hsl: "hsl(175.3,77.4%,26.1%)",
+      oklch: "oklch(0.51,0.09,186)",
+    },
+    {
+      scale: 800,
+      hex: "#115e59",
+      rgb: "rgb(17,94,89)",
+      hsl: "hsl(176.1,69.4%,21.8%)",
+      oklch: "oklch(0.44,0.07,188)",
+    },
+    {
+      scale: 900,
+      hex: "#134e4a",
+      rgb: "rgb(19,78,74)",
+      hsl: "hsl(175.9,60.8%,19%)",
+      oklch: "oklch(0.39,0.06,188)",
+    },
+    {
+      scale: 950,
+      hex: "#042f2e",
+      rgb: "rgb(4,47,46)",
+      hsl: "hsl(178.6,84.3%,10%)",
+      oklch: "oklch(0.28,0.04,193)",
+    },
+  ],
+  cyan: [
+    {
+      scale: 50,
+      hex: "#ecfeff",
+      rgb: "rgb(236,254,255)",
+      hsl: "hsl(183.2,100%,96.3%)",
+      oklch: "oklch(0.98,0.02,201)",
+    },
+    {
+      scale: 100,
+      hex: "#cffafe",
+      rgb: "rgb(207,250,254)",
+      hsl: "hsl(185.1,95.9%,90.4%)",
+      oklch: "oklch(0.96,0.04,203)",
+    },
+    {
+      scale: 200,
+      hex: "#a5f3fc",
+      rgb: "rgb(165,243,252)",
+      hsl: "hsl(186.2,93.5%,81.8%)",
+      oklch: "oklch(0.92,0.08,205)",
+    },
+    {
+      scale: 300,
+      hex: "#67e8f9",
+      rgb: "rgb(103,232,249)",
+      hsl: "hsl(187,92.4%,69%)",
+      oklch: "oklch(0.87,0.12,207)",
+    },
+    {
+      scale: 400,
+      hex: "#22d3ee",
+      rgb: "rgb(34,211,238)",
+      hsl: "hsl(187.9,85.7%,53.3%)",
+      oklch: "oklch(0.80,0.13,212)",
+    },
+    {
+      scale: 500,
+      hex: "#06b6d4",
+      rgb: "rgb(6,182,212)",
+      hsl: "hsl(188.7,94.5%,42.7%)",
+      oklch: "oklch(0.71,0.13,215)",
+    },
+    {
+      scale: 600,
+      hex: "#0891b2",
+      rgb: "rgb(8,145,178)",
+      hsl: "hsl(191.6,91.4%,36.5%)",
+      oklch: "oklch(0.61,0.11,222)",
+    },
+    {
+      scale: 700,
+      hex: "#0e7490",
+      rgb: "rgb(14,116,144)",
+      hsl: "hsl(192.9,82.3%,31%)",
+      oklch: "oklch(0.52,0.09,223)",
+    },
+    {
+      scale: 800,
+      hex: "#155e75",
+      rgb: "rgb(21,94,117)",
+      hsl: "hsl(194.4,69.6%,27.1%)",
+      oklch: "oklch(0.45,0.08,224)",
+    },
+    {
+      scale: 900,
+      hex: "#164e63",
+      rgb: "rgb(22,78,99)",
+      hsl: "hsl(196.4,63.6%,23.7%)",
+      oklch: "oklch(0.40,0.07,227)",
+    },
+    {
+      scale: 950,
+      hex: "#083344",
+      rgb: "rgb(8,51,68)",
+      hsl: "hsl(197,78.9%,14.9%)",
+      oklch: "oklch(0.30,0.05,230)",
+    },
+  ],
+  sky: [
+    {
+      scale: 50,
+      hex: "#f0f9ff",
+      rgb: "rgb(240,249,255)",
+      hsl: "hsl(204,100%,97.1%)",
+      oklch: "oklch(0.98,0.01,237)",
+    },
+    {
+      scale: 100,
+      hex: "#e0f2fe",
+      rgb: "rgb(224,242,254)",
+      hsl: "hsl(204,93.8%,93.7%)",
+      oklch: "oklch(0.95,0.03,237)",
+    },
+    {
+      scale: 200,
+      hex: "#bae6fd",
+      rgb: "rgb(186,230,253)",
+      hsl: "hsl(200.6,94.4%,86.1%)",
+      oklch: "oklch(0.90,0.06,231)",
+    },
+    {
+      scale: 300,
+      hex: "#7dd3fc",
+      rgb: "rgb(125,211,252)",
+      hsl: "hsl(199.4,95.5%,73.9%)",
+      oklch: "oklch(0.83,0.10,230)",
+    },
+    {
+      scale: 400,
+      hex: "#38bdf8",
+      rgb: "rgb(56,189,248)",
+      hsl: "hsl(198.4,93.2%,59.6%)",
+      oklch: "oklch(0.75,0.14,233)",
+    },
+    {
+      scale: 500,
+      hex: "#0ea5e9",
+      rgb: "rgb(14,165,233)",
+      hsl: "hsl(198.6,88.7%,48.4%)",
+      oklch: "oklch(0.68,0.15,237)",
+    },
+    {
+      scale: 600,
+      hex: "#0284c7",
+      rgb: "rgb(2,132,199)",
+      hsl: "hsl(200.4,98%,39.4%)",
+      oklch: "oklch(0.59,0.14,242)",
+    },
+    {
+      scale: 700,
+      hex: "#0369a1",
+      rgb: "rgb(3,105,161)",
+      hsl: "hsl(201.3,96.3%,32.2%)",
+      oklch: "oklch(0.50,0.12,243)",
+    },
+    {
+      scale: 800,
+      hex: "#075985",
+      rgb: "rgb(7,89,133)",
+      hsl: "hsl(201,90%,27.5%)",
+      oklch: "oklch(0.44,0.10,241)",
+    },
+    {
+      scale: 900,
+      hex: "#0c4a6e",
+      rgb: "rgb(12,74,110)",
+      hsl: "hsl(202,80.3%,23.9%)",
+      oklch: "oklch(0.39,0.08,241)",
+    },
+    {
+      scale: 950,
+      hex: "#082f49",
+      rgb: "rgb(8,47,73)",
+      hsl: "hsl(204,80.2%,15.9%)",
+      oklch: "oklch(0.29,0.06,243)",
+    },
+  ],
+  blue: [
+    {
+      scale: 50,
+      hex: "#eff6ff",
+      rgb: "rgb(239,246,255)",
+      hsl: "hsl(213.8,100%,96.9%)",
+      oklch: "oklch(0.97,0.01,255)",
+    },
+    {
+      scale: 100,
+      hex: "#dbeafe",
+      rgb: "rgb(219,234,254)",
+      hsl: "hsl(214.3,94.6%,92.7%)",
+      oklch: "oklch(0.93,0.03,256)",
+    },
+    {
+      scale: 200,
+      hex: "#bfdbfe",
+      rgb: "rgb(191,219,254)",
+      hsl: "hsl(213.3,96.9%,87.3%)",
+      oklch: "oklch(0.88,0.06,254)",
+    },
+    {
+      scale: 300,
+      hex: "#93c5fd",
+      rgb: "rgb(147,197,253)",
+      hsl: "hsl(211.7,96.4%,78.4%)",
+      oklch: "oklch(0.81,0.10,252)",
+    },
+    {
+      scale: 400,
+      hex: "#60a5fa",
+      rgb: "rgb(96,165,250)",
+      hsl: "hsl(213.1,93.9%,67.8%)",
+      oklch: "oklch(0.71,0.14,255)",
+    },
+    {
+      scale: 500,
+      hex: "#3b82f6",
+      rgb: "rgb(59,130,246)",
+      hsl: "hsl(217.2,91.2%,59.8%)",
+      oklch: "oklch(0.62,0.19,260)",
+    },
+    {
+      scale: 600,
+      hex: "#2563eb",
+      rgb: "rgb(37,99,235)",
+      hsl: "hsl(221.2,83.2%,53.3%)",
+      oklch: "oklch(0.55,0.22,263)",
+    },
+    {
+      scale: 700,
+      hex: "#1d4ed8",
+      rgb: "rgb(29,78,216)",
+      hsl: "hsl(224.3,76.3%,48%)",
+      oklch: "oklch(0.49,0.22,264)",
+    },
+    {
+      scale: 800,
+      hex: "#1e40af",
+      rgb: "rgb(30,64,175)",
+      hsl: "hsl(225.9,70.7%,40.2%)",
+      oklch: "oklch(0.42,0.18,266)",
+    },
+    {
+      scale: 900,
+      hex: "#1e3a8a",
+      rgb: "rgb(30,58,138)",
+      hsl: "hsl(224.4,64.3%,32.9%)",
+      oklch: "oklch(0.38,0.14,266)",
+    },
+    {
+      scale: 950,
+      hex: "#172554",
+      rgb: "rgb(23,37,84)",
+      hsl: "hsl(226.2,57%,21%)",
+      oklch: "oklch(0.28,0.09,268)",
+    },
+  ],
+  indigo: [
+    {
+      scale: 50,
+      hex: "#eef2ff",
+      rgb: "rgb(238,242,255)",
+      hsl: "hsl(225.9,100%,96.7%)",
+      oklch: "oklch(0.96,0.02,272)",
+    },
+    {
+      scale: 100,
+      hex: "#e0e7ff",
+      rgb: "rgb(224,231,255)",
+      hsl: "hsl(226.5,100%,93.9%)",
+      oklch: "oklch(0.93,0.03,273)",
+    },
+    {
+      scale: 200,
+      hex: "#c7d2fe",
+      rgb: "rgb(199,210,254)",
+      hsl: "hsl(228,96.5%,88.8%)",
+      oklch: "oklch(0.87,0.06,274)",
+    },
+    {
+      scale: 300,
+      hex: "#a5b4fc",
+      rgb: "rgb(165,180,252)",
+      hsl: "hsl(229.7,93.5%,81.8%)",
+      oklch: "oklch(0.79,0.10,275)",
+    },
+    {
+      scale: 400,
+      hex: "#818cf8",
+      rgb: "rgb(129,140,248)",
+      hsl: "hsl(234.5,89.5%,73.9%)",
+      oklch: "oklch(0.68,0.16,277)",
+    },
+    {
+      scale: 500,
+      hex: "#6366f1",
+      rgb: "rgb(99,102,241)",
+      hsl: "hsl(238.7,83.5%,66.7%)",
+      oklch: "oklch(0.59,0.20,277)",
+    },
+    {
+      scale: 600,
+      hex: "#4f46e5",
+      rgb: "rgb(79,70,229)",
+      hsl: "hsl(243.4,75.4%,58.6%)",
+      oklch: "oklch(0.51,0.23,277)",
+    },
+    {
+      scale: 700,
+      hex: "#4338ca",
+      rgb: "rgb(67,56,202)",
+      hsl: "hsl(244.5,57.9%,50.6%)",
+      oklch: "oklch(0.46,0.21,277)",
+    },
+    {
+      scale: 800,
+      hex: "#3730a3",
+      rgb: "rgb(55,48,163)",
+      hsl: "hsl(243.7,54.5%,41.4%)",
+      oklch: "oklch(0.40,0.18,277)",
+    },
+    {
+      scale: 900,
+      hex: "#312e81",
+      rgb: "rgb(49,46,129)",
+      hsl: "hsl(242.2,47.4%,34.3%)",
+      oklch: "oklch(0.36,0.14,279)",
+    },
+    {
+      scale: 950,
+      hex: "#1e1b4b",
+      rgb: "rgb(30,27,75)",
+      hsl: "hsl(243.8,47.1%,20%)",
+      oklch: "oklch(0.26,0.09,281)",
+    },
+  ],
+  violet: [
+    {
+      scale: 50,
+      hex: "#f5f3ff",
+      rgb: "rgb(245,243,255)",
+      hsl: "hsl(250,100%,97.6%)",
+      oklch: "oklch(0.97,0.02,294)",
+    },
+    {
+      scale: 100,
+      hex: "#ede9fe",
+      rgb: "rgb(237,233,254)",
+      hsl: "hsl(251.4,91.3%,95.5%)",
+      oklch: "oklch(0.94,0.03,295)",
+    },
+    {
+      scale: 200,
+      hex: "#ddd6fe",
+      rgb: "rgb(221,214,254)",
+      hsl: "hsl(250.5,95.2%,91.8%)",
+      oklch: "oklch(0.89,0.05,293)",
+    },
+    {
+      scale: 300,
+      hex: "#c4b5fd",
+      rgb: "rgb(196,181,253)",
+      hsl: "hsl(252.5,94.7%,85.1%)",
+      oklch: "oklch(0.81,0.10,294)",
+    },
+    {
+      scale: 400,
+      hex: "#a78bfa",
+      rgb: "rgb(167,139,250)",
+      hsl: "hsl(255.1,91.7%,76.3%)",
+      oklch: "oklch(0.71,0.16,294)",
+    },
+    {
+      scale: 500,
+      hex: "#8b5cf6",
+      rgb: "rgb(139,92,246)",
+      hsl: "hsl(258.3,89.5%,66.3%)",
+      oklch: "oklch(0.61,0.22,293)",
+    },
+    {
+      scale: 600,
+      hex: "#7c3aed",
+      rgb: "rgb(124,58,237)",
+      hsl: "hsl(262.1,83.3%,57.8%)",
+      oklch: "oklch(0.54,0.25,293)",
+    },
+    {
+      scale: 700,
+      hex: "#6d28d9",
+      rgb: "rgb(109,40,217)",
+      hsl: "hsl(263.4,70%,50.4%)",
+      oklch: "oklch(0.49,0.24,293)",
+    },
+    {
+      scale: 800,
+      hex: "#5b21b6",
+      rgb: "rgb(91,33,182)",
+      hsl: "hsl(263.4,69.3%,42.2%)",
+      oklch: "oklch(0.43,0.21,293)",
+    },
+    {
+      scale: 900,
+      hex: "#4c1d95",
+      rgb: "rgb(76,29,149)",
+      hsl: "hsl(263.5,67.4%,34.9%)",
+      oklch: "oklch(0.38,0.18,294)",
+    },
+    {
+      scale: 950,
+      hex: "#1e1b4b",
+      rgb: "rgb(46,16,101)",
+      hsl: "hsl(261.2,72.6%,22.9%)",
+      oklch: "oklch(0.28,0.14,291)",
+    },
+  ],
+  purple: [
+    {
+      scale: 50,
+      hex: "#faf5ff",
+      rgb: "rgb(250,245,255)",
+      hsl: "hsl(270,100%,98%)",
+      oklch: "oklch(0.98,0.01,308)",
+    },
+    {
+      scale: 100,
+      hex: "#f3e8ff",
+      rgb: "rgb(243,232,255)",
+      hsl: "hsl(268.7,100%,95.5%)",
+      oklch: "oklch(0.95,0.03,307)",
+    },
+    {
+      scale: 200,
+      hex: "#e9d5ff",
+      rgb: "rgb(233,213,255)",
+      hsl: "hsl(268.6,100%,91.8%)",
+      oklch: "oklch(0.90,0.06,307)",
+    },
+    {
+      scale: 300,
+      hex: "#d8b4fe",
+      rgb: "rgb(216,180,254)",
+      hsl: "hsl(269.2,97.4%,85.1%)",
+      oklch: "oklch(0.83,0.11,306)",
+    },
+    {
+      scale: 400,
+      hex: "#c084fc",
+      rgb: "rgb(192,132,252)",
+      hsl: "hsl(270,95.2%,75.3%)",
+      oklch: "oklch(0.72,0.18,306)",
+    },
+    {
+      scale: 500,
+      hex: "#a855f7",
+      rgb: "rgb(168,85,247)",
+      hsl: "hsl(270.7,91%,65.1%)",
+      oklch: "oklch(0.63,0.23,304)",
+    },
+    {
+      scale: 600,
+      hex: "#9333ea",
+      rgb: "rgb(147,51,234)",
+      hsl: "hsl(271.5,81.3%,55.9%)",
+      oklch: "oklch(0.56,0.25,302)",
+    },
+    {
+      scale: 700,
+      hex: "#7e22ce",
+      rgb: "rgb(126,34,206)",
+      hsl: "hsl(272.1,71.7%,47.1%)",
+      oklch: "oklch(0.50,0.24,302)",
+    },
+    {
+      scale: 800,
+      hex: "#6b21a8",
+      rgb: "rgb(107,33,168)",
+      hsl: "hsl(272.9,67.2%,39.4%)",
+      oklch: "oklch(0.44,0.20,304)",
+    },
+    {
+      scale: 900,
+      hex: "#581c87",
+      rgb: "rgb(88,28,135)",
+      hsl: "hsl(273.6,65.6%,32%)",
+      oklch: "oklch(0.38,0.17,305)",
+    },
+    {
+      scale: 950,
+      hex: "#3b0764",
+      rgb: "rgb(59,7,100)",
+      hsl: "hsl(273.5,86.9%,21%)",
+      oklch: "oklch(0.29,0.14,303)",
+    },
+  ],
+  fuchsia: [
+    {
+      scale: 50,
+      hex: "#fdf4ff",
+      rgb: "rgb(253,244,255)",
+      hsl: "hsl(289.1,100%,97.8%)",
+      oklch: "oklch(0.98,0.02,320)",
+    },
+    {
+      scale: 100,
+      hex: "#fae8ff",
+      rgb: "rgb(250,232,255)",
+      hsl: "hsl(287,100%,95.5%)",
+      oklch: "oklch(0.95,0.04,319)",
+    },
+    {
+      scale: 200,
+      hex: "#f5d0fe",
+      rgb: "rgb(245,208,254)",
+      hsl: "hsl(288.3,95.8%,90.6%)",
+      oklch: "oklch(0.90,0.07,320)",
+    },
+    {
+      scale: 300,
+      hex: "#f0abfc",
+      rgb: "rgb(240,171,252)",
+      hsl: "hsl(291.1,93.1%,82.9%)",
+      oklch: "oklch(0.83,0.13,321)",
+    },
+    {
+      scale: 400,
+      hex: "#e879f9",
+      rgb: "rgb(232,121,249)",
+      hsl: "hsl(292,91.4%,72.5%)",
+      oklch: "oklch(0.75,0.21,322)",
+    },
+    {
+      scale: 500,
+      hex: "#d946ef",
+      rgb: "rgb(217,70,239)",
+      hsl: "hsl(292.2,84.1%,60.6%)",
+      oklch: "oklch(0.67,0.26,322)",
+    },
+    {
+      scale: 600,
+      hex: "#c026d3",
+      rgb: "rgb(192,38,211)",
+      hsl: "hsl(293.4,69.5%,48.8%)",
+      oklch: "oklch(0.59,0.26,323)",
+    },
+    {
+      scale: 700,
+      hex: "#a21caf",
+      rgb: "rgb(162,28,175)",
+      hsl: "hsl(294.7,72.4%,39.8%)",
+      oklch: "oklch(0.52,0.23,324)",
+    },
+    {
+      scale: 800,
+      hex: "#86198f",
+      rgb: "rgb(134,25,143)",
+      hsl: "hsl(295.4,70.2%,32.9%)",
+      oklch: "oklch(0.45,0.19,325)",
+    },
+    {
+      scale: 900,
+      hex: "#701a75",
+      rgb: "rgb(112,26,117)",
+      hsl: "hsl(296.7,63.6%,28%)",
+      oklch: "oklch(0.40,0.16,326)",
+    },
+    {
+      scale: 950,
+      hex: "#4a044e",
+      rgb: "rgb(74,4,78)",
+      hsl: "hsl(296.8,90.2%,16.1%)",
+      oklch: "oklch(0.29,0.13,326)",
+    },
+  ],
+  pink: [
+    {
+      scale: 50,
+      hex: "#fdf2f8",
+      rgb: "rgb(253,242,248)",
+      hsl: "hsl(327.3,73.3%,97.1%)",
+      oklch: "oklch(0.97,0.01,343)",
+    },
+    {
+      scale: 100,
+      hex: "#fce7f3",
+      rgb: "rgb(252,231,243)",
+      hsl: "hsl(325.7,77.8%,94.7%)",
+      oklch: "oklch(0.95,0.03,342)",
+    },
+    {
+      scale: 200,
+      hex: "#fbcfe8",
+      rgb: "rgb(251,207,232)",
+      hsl: "hsl(325.9,84.6%,89.8%)",
+      oklch: "oklch(0.90,0.06,343)",
+    },
+    {
+      scale: 300,
+      hex: "#f9a8d4",
+      rgb: "rgb(249,168,212)",
+      hsl: "hsl(327.4,87.1%,81.8%)",
+      oklch: "oklch(0.82,0.11,346)",
+    },
+    {
+      scale: 400,
+      hex: "#f472b6",
+      rgb: "rgb(244,114,182)",
+      hsl: "hsl(328.6,85.5%,70.2%)",
+      oklch: "oklch(0.73,0.18,350)",
+    },
+    {
+      scale: 500,
+      hex: "#ec4899",
+      rgb: "rgb(236,72,153)",
+      hsl: "hsl(330.4,81.2%,60.4%)",
+      oklch: "oklch(0.66,0.21,354)",
+    },
+    {
+      scale: 600,
+      hex: "#db2777",
+      rgb: "rgb(219,39,119)",
+      hsl: "hsl(333.3,71.4%,50.6%)",
+      oklch: "oklch(0.59,0.22,1)",
+    },
+    {
+      scale: 700,
+      hex: "#be185d",
+      rgb: "rgb(190,24,93)",
+      hsl: "hsl(335.1,77.6%,42%)",
+      oklch: "oklch(0.52,0.20,4)",
+    },
+    {
+      scale: 800,
+      hex: "#9d174d",
+      rgb: "rgb(157,23,77)",
+      hsl: "hsl(335.8,74.4%,35.3%)",
+      oklch: "oklch(0.46,0.17,4)",
+    },
+    {
+      scale: 900,
+      hex: "#831843",
+      rgb: "rgb(131,24,67)",
+      hsl: "hsl(335.9,69%,30.4%)",
+      oklch: "oklch(0.41,0.14,2)",
+    },
+    {
+      scale: 950,
+      hex: "#500724",
+      rgb: "rgb(80,7,36)",
+      hsl: "hsl(336.2,83.9%,17.1%)",
+      oklch: "oklch(0.28,0.10,4)",
+    },
+  ],
+  rose: [
+    {
+      scale: 50,
+      hex: "#fff1f2",
+      rgb: "rgb(255,241,242)",
+      hsl: "hsl(355.7,100%,97.3%)",
+      oklch: "oklch(0.97,0.02,12)",
+    },
+    {
+      scale: 100,
+      hex: "#ffe4e6",
+      rgb: "rgb(255,228,230)",
+      hsl: "hsl(355.6,100%,94.7%)",
+      oklch: "oklch(0.94,0.03,13)",
+    },
+    {
+      scale: 200,
+      hex: "#fecdd3",
+      rgb: "rgb(254,205,211)",
+      hsl: "hsl(352.7,96.1%,90%)",
+      oklch: "oklch(0.89,0.06,10)",
+    },
+    {
+      scale: 300,
+      hex: "#fda4af",
+      rgb: "rgb(253,164,175)",
+      hsl: "hsl(352.6,95.7%,81.8%)",
+      oklch: "oklch(0.81,0.11,12)",
+    },
+    {
+      scale: 400,
+      hex: "#fb7185",
+      rgb: "rgb(251,113,133)",
+      hsl: "hsl(351.3,94.5%,71.4%)",
+      oklch: "oklch(0.72,0.17,13)",
+    },
+    {
+      scale: 500,
+      hex: "#f43f5e",
+      rgb: "rgb(244,63,94)",
+      hsl: "hsl(349.7,89.2%,60.2%)",
+      oklch: "oklch(0.65,0.22,16)",
+    },
+    {
+      scale: 600,
+      hex: "#e11d48",
+      rgb: "rgb(225,29,72)",
+      hsl: "hsl(346.8,77.2%,49.8%)",
+      oklch: "oklch(0.59,0.22,18)",
+    },
+    {
+      scale: 700,
+      hex: "#be123c",
+      rgb: "rgb(190,18,60)",
+      hsl: "hsl(345.3,82.7%,40.8%)",
+      oklch: "oklch(0.51,0.20,17)",
+    },
+    {
+      scale: 800,
+      hex: "#9f1239",
+      rgb: "rgb(159,18,57)",
+      hsl: "hsl(343.4,79.7%,34.7%)",
+      oklch: "oklch(0.45,0.17,14)",
+    },
+    {
+      scale: 900,
+      hex: "#881337",
+      rgb: "rgb(136,19,55)",
+      hsl: "hsl(341.5,75.5%,30.4%)",
+      oklch: "oklch(0.41,0.15,10)",
+    },
+    {
+      scale: 950,
+      hex: "#4c0519",
+      rgb: "rgb(76,5,25)",
+      hsl: "hsl(343.1,87.7%,15.9%)",
+      oklch: "oklch(0.27,0.10,12)",
+    },
+  ],
+}
+
+export const colorMapping = {
+  light: {
+    background: "white",
+    foreground: "{{base}}-950",
+    card: "white",
+    "card-foreground": "{{base}}-950",
+    popover: "white",
+    "popover-foreground": "{{base}}-950",
+    primary: "{{base}}-900",
+    "primary-foreground": "{{base}}-50",
+    secondary: "{{base}}-100",
+    "secondary-foreground": "{{base}}-900",
+    muted: "{{base}}-100",
+    "muted-foreground": "{{base}}-500",
+    accent: "{{base}}-100",
+    "accent-foreground": "{{base}}-900",
+    destructive: "red-500",
+    "destructive-foreground": "{{base}}-50",
+    border: "{{base}}-200",
+    input: "{{base}}-200",
+    ring: "{{base}}-950",
+    "chart-1": "12 76% 61%",
+    "chart-2": "173 58% 39%",
+    "chart-3": "197 37% 24%",
+    "chart-4": "43 74% 66%",
+    "chart-5": "27 87% 67%",
+  },
+  dark: {
+    background: "{{base}}-950",
+    foreground: "{{base}}-50",
+    card: "{{base}}-950",
+    "card-foreground": "{{base}}-50",
+    popover: "{{base}}-950",
+    "popover-foreground": "{{base}}-50",
+    primary: "{{base}}-50",
+    "primary-foreground": "{{base}}-900",
+    secondary: "{{base}}-800",
+    "secondary-foreground": "{{base}}-50",
+    muted: "{{base}}-800",
+    "muted-foreground": "{{base}}-400",
+    accent: "{{base}}-800",
+    "accent-foreground": "{{base}}-50",
+    destructive: "red-900",
+    "destructive-foreground": "{{base}}-50",
+    border: "{{base}}-800",
+    input: "{{base}}-800",
+    ring: "{{base}}-300",
+    "chart-1": "220 70% 50%",
+    "chart-2": "160 60% 45%",
+    "chart-3": "30 80% 55%",
+    "chart-4": "280 65% 60%",
+    "chart-5": "340 75% 55%",
+  },
+} as const
diff --git a/apps/v4/registry/registry-examples.ts b/apps/v4/registry/registry-examples.ts
new file mode 100644
index 00000000000..a48f10a7d8e
--- /dev/null
+++ b/apps/v4/registry/registry-examples.ts
@@ -0,0 +1,1634 @@
+import { type Registry } from "shadcn/schema"
+
+export const examples: Registry["items"] = [
+  {
+    name: "accordion-demo",
+    type: "registry:example",
+    registryDependencies: ["accordion"],
+    files: [
+      {
+        path: "examples/accordion-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "alert-demo",
+    type: "registry:example",
+    registryDependencies: ["alert"],
+    files: [
+      {
+        path: "examples/alert-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "alert-destructive",
+    type: "registry:example",
+    registryDependencies: ["alert"],
+    files: [
+      {
+        path: "examples/alert-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "alert-dialog-demo",
+    type: "registry:example",
+    registryDependencies: ["alert-dialog", "button"],
+    files: [
+      {
+        path: "examples/alert-dialog-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "aspect-ratio-demo",
+    type: "registry:example",
+    registryDependencies: ["aspect-ratio"],
+    files: [
+      {
+        path: "examples/aspect-ratio-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "avatar-demo",
+    type: "registry:example",
+    registryDependencies: ["avatar"],
+    files: [
+      {
+        path: "examples/avatar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "badge-demo",
+    type: "registry:example",
+    registryDependencies: ["badge"],
+    files: [
+      {
+        path: "examples/badge-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "badge-destructive",
+    type: "registry:example",
+    registryDependencies: ["badge"],
+    files: [
+      {
+        path: "examples/badge-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "badge-outline",
+    type: "registry:example",
+    registryDependencies: ["badge"],
+    files: [
+      {
+        path: "examples/badge-outline.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "badge-secondary",
+    type: "registry:example",
+    registryDependencies: ["badge"],
+    files: [
+      {
+        path: "examples/badge-secondary.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "breadcrumb-demo",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [
+      {
+        path: "examples/breadcrumb-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "breadcrumb-separator",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [
+      {
+        path: "examples/breadcrumb-separator.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "breadcrumb-dropdown",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [
+      {
+        path: "examples/breadcrumb-dropdown.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "breadcrumb-ellipsis",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [
+      {
+        path: "examples/breadcrumb-ellipsis.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "breadcrumb-link",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [
+      {
+        path: "examples/breadcrumb-link.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "breadcrumb-responsive",
+    type: "registry:example",
+    registryDependencies: ["breadcrumb"],
+    files: [
+      {
+        path: "examples/breadcrumb-responsive.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-demo",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "examples/button-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-secondary",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "examples/button-secondary.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-destructive",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "examples/button-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-outline",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "examples/button-outline.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-ghost",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "examples/button-ghost.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-link",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "examples/button-link.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-with-icon",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "examples/button-with-icon.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-loading",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "examples/button-loading.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-icon",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "examples/button-icon.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-as-child",
+    type: "registry:example",
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "examples/button-as-child.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "calendar-demo",
+    type: "registry:example",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "examples/calendar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "calendar-form",
+    type: "registry:example",
+    registryDependencies: ["calendar", "form", "popover"],
+    files: [
+      {
+        path: "examples/calendar-form.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "card-demo",
+    type: "registry:example",
+    registryDependencies: ["card", "button", "switch"],
+    files: [
+      {
+        path: "examples/card-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "card-with-form",
+    type: "registry:example",
+    registryDependencies: ["button", "card", "input", "label", "select"],
+    files: [
+      {
+        path: "examples/card-with-form.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-demo",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [
+      {
+        path: "examples/carousel-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-size",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [
+      {
+        path: "examples/carousel-size.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-spacing",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [
+      {
+        path: "examples/carousel-spacing.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-orientation",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [
+      {
+        path: "examples/carousel-orientation.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-api",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [
+      {
+        path: "examples/carousel-api.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-plugin",
+    type: "registry:example",
+    registryDependencies: ["carousel"],
+    files: [
+      {
+        path: "examples/carousel-plugin.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "checkbox-demo",
+    type: "registry:example",
+    registryDependencies: ["checkbox"],
+    files: [
+      {
+        path: "examples/checkbox-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "checkbox-disabled",
+    type: "registry:example",
+    registryDependencies: ["checkbox"],
+    files: [
+      {
+        path: "examples/checkbox-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "checkbox-form-multiple",
+    type: "registry:example",
+    registryDependencies: ["checkbox", "form"],
+    files: [
+      {
+        path: "examples/checkbox-form-multiple.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "checkbox-form-single",
+    type: "registry:example",
+    registryDependencies: ["checkbox", "form"],
+    files: [
+      {
+        path: "examples/checkbox-form-single.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "checkbox-with-text",
+    type: "registry:example",
+    registryDependencies: ["checkbox"],
+    files: [
+      {
+        path: "examples/checkbox-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "collapsible-demo",
+    type: "registry:example",
+    registryDependencies: ["collapsible"],
+    files: [
+      {
+        path: "examples/collapsible-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "combobox-demo",
+    type: "registry:example",
+    registryDependencies: ["command"],
+    files: [
+      {
+        path: "examples/combobox-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "combobox-dropdown-menu",
+    type: "registry:example",
+    registryDependencies: ["command", "dropdown-menu", "button"],
+    files: [
+      {
+        path: "examples/combobox-dropdown-menu.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "combobox-form",
+    type: "registry:example",
+    registryDependencies: ["command", "form"],
+    files: [
+      {
+        path: "examples/combobox-form.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "combobox-popover",
+    type: "registry:example",
+    registryDependencies: ["combobox", "popover"],
+    files: [
+      {
+        path: "examples/combobox-popover.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "combobox-responsive",
+    type: "registry:example",
+    registryDependencies: ["combobox", "popover", "drawer"],
+    files: [
+      {
+        path: "examples/combobox-responsive.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "command-demo",
+    type: "registry:example",
+    registryDependencies: ["command"],
+    files: [
+      {
+        path: "examples/command-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "command-dialog",
+    type: "registry:example",
+    registryDependencies: ["command", "dialog"],
+    files: [
+      {
+        path: "examples/command-dialog.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "context-menu-demo",
+    type: "registry:example",
+    registryDependencies: ["context-menu"],
+    files: [
+      {
+        path: "examples/context-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "data-table-demo",
+    type: "registry:example",
+    registryDependencies: ["data-table"],
+    files: [
+      {
+        path: "examples/data-table-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "date-picker-demo",
+    type: "registry:example",
+    registryDependencies: ["button", "calendar", "popover"],
+    files: [
+      {
+        path: "examples/date-picker-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+    dependencies: ["date-fns"],
+  },
+  {
+    name: "date-picker-form",
+    type: "registry:example",
+    registryDependencies: ["button", "calendar", "form", "popover"],
+    files: [
+      {
+        path: "examples/date-picker-form.tsx",
+        type: "registry:example",
+      },
+    ],
+    dependencies: ["date-fns"],
+  },
+  {
+    name: "date-picker-with-presets",
+    type: "registry:example",
+    registryDependencies: ["button", "calendar", "popover", "select"],
+    files: [
+      {
+        path: "examples/date-picker-with-presets.tsx",
+        type: "registry:example",
+      },
+    ],
+    dependencies: ["date-fns"],
+  },
+  {
+    name: "date-picker-with-range",
+    type: "registry:example",
+    registryDependencies: ["button", "calendar", "popover"],
+    files: [
+      {
+        path: "examples/date-picker-with-range.tsx",
+        type: "registry:example",
+      },
+    ],
+    dependencies: ["date-fns"],
+  },
+  {
+    name: "dialog-demo",
+    type: "registry:example",
+    registryDependencies: ["dialog"],
+    files: [
+      {
+        path: "examples/dialog-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "dialog-close-button",
+    type: "registry:example",
+    registryDependencies: ["dialog", "button"],
+    files: [
+      {
+        path: "examples/dialog-close-button.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "drawer-demo",
+    type: "registry:example",
+    registryDependencies: ["drawer"],
+    files: [
+      {
+        path: "examples/drawer-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "drawer-dialog",
+    type: "registry:example",
+    registryDependencies: ["drawer", "dialog"],
+    files: [
+      {
+        path: "examples/drawer-dialog.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "dropdown-menu-demo",
+    type: "registry:example",
+    registryDependencies: ["dropdown-menu"],
+    files: [
+      {
+        path: "examples/dropdown-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "dropdown-menu-checkboxes",
+    type: "registry:example",
+    registryDependencies: ["dropdown-menu", "checkbox"],
+    files: [
+      {
+        path: "examples/dropdown-menu-checkboxes.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "dropdown-menu-radio-group",
+    type: "registry:example",
+    registryDependencies: ["dropdown-menu", "radio-group"],
+    files: [
+      {
+        path: "examples/dropdown-menu-radio-group.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "hover-card-demo",
+    type: "registry:example",
+    registryDependencies: ["hover-card"],
+    files: [
+      {
+        path: "examples/hover-card-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-demo",
+    type: "registry:example",
+    registryDependencies: ["input"],
+    files: [
+      {
+        path: "examples/input-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-disabled",
+    type: "registry:example",
+    registryDependencies: ["input"],
+    files: [
+      {
+        path: "examples/input-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-file",
+    type: "registry:example",
+    registryDependencies: ["input"],
+    files: [
+      {
+        path: "examples/input-file.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-form",
+    type: "registry:example",
+    registryDependencies: ["input", "button", "form"],
+    files: [
+      {
+        path: "examples/input-form.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-with-button",
+    type: "registry:example",
+    registryDependencies: ["input", "button"],
+    files: [
+      {
+        path: "examples/input-with-button.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-with-label",
+    type: "registry:example",
+    registryDependencies: ["input", "button", "label"],
+    files: [
+      {
+        path: "examples/input-with-label.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-with-text",
+    type: "registry:example",
+    registryDependencies: ["input", "button", "label"],
+    files: [
+      {
+        path: "examples/input-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-otp-demo",
+    type: "registry:example",
+    registryDependencies: ["input-otp"],
+    files: [
+      {
+        path: "examples/input-otp-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-otp-pattern",
+    type: "registry:example",
+    registryDependencies: ["input-otp"],
+    files: [
+      {
+        path: "examples/input-otp-pattern.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-otp-separator",
+    type: "registry:example",
+    registryDependencies: ["input-otp"],
+    files: [
+      {
+        path: "examples/input-otp-separator.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-otp-controlled",
+    type: "registry:example",
+    registryDependencies: ["input-otp"],
+    files: [
+      {
+        path: "examples/input-otp-controlled.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "input-otp-form",
+    type: "registry:example",
+    registryDependencies: ["input-otp", "form"],
+    files: [
+      {
+        path: "examples/input-otp-form.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "label-demo",
+    type: "registry:example",
+    registryDependencies: ["label"],
+    files: [
+      {
+        path: "examples/label-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "menubar-demo",
+    type: "registry:example",
+    registryDependencies: ["menubar"],
+    files: [
+      {
+        path: "examples/menubar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "navigation-menu-demo",
+    type: "registry:example",
+    registryDependencies: ["navigation-menu"],
+    files: [
+      {
+        path: "examples/navigation-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "pagination-demo",
+    type: "registry:example",
+    registryDependencies: ["pagination"],
+    files: [
+      {
+        path: "examples/pagination-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "popover-demo",
+    type: "registry:example",
+    registryDependencies: ["popover"],
+    files: [
+      {
+        path: "examples/popover-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "progress-demo",
+    type: "registry:example",
+    registryDependencies: ["progress"],
+    files: [
+      {
+        path: "examples/progress-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "radio-group-demo",
+    type: "registry:example",
+    registryDependencies: ["radio-group"],
+    files: [
+      {
+        path: "examples/radio-group-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "radio-group-form",
+    type: "registry:example",
+    registryDependencies: ["radio-group", "form"],
+    files: [
+      {
+        path: "examples/radio-group-form.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "resizable-demo",
+    type: "registry:example",
+    registryDependencies: ["resizable"],
+    files: [
+      {
+        path: "examples/resizable-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "resizable-demo-with-handle",
+    type: "registry:example",
+    registryDependencies: ["resizable"],
+    files: [
+      {
+        path: "examples/resizable-demo-with-handle.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "resizable-vertical",
+    type: "registry:example",
+    registryDependencies: ["resizable"],
+    files: [
+      {
+        path: "examples/resizable-vertical.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "resizable-handle",
+    type: "registry:example",
+    registryDependencies: ["resizable"],
+    files: [
+      {
+        path: "examples/resizable-handle.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "scroll-area-demo",
+    type: "registry:example",
+    registryDependencies: ["scroll-area"],
+    files: [
+      {
+        path: "examples/scroll-area-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "scroll-area-horizontal-demo",
+    type: "registry:example",
+    registryDependencies: ["scroll-area"],
+    files: [
+      {
+        path: "examples/scroll-area-horizontal-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "select-demo",
+    type: "registry:example",
+    registryDependencies: ["select"],
+    files: [
+      {
+        path: "examples/select-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "select-scrollable",
+    type: "registry:example",
+    registryDependencies: ["select"],
+    files: [
+      {
+        path: "examples/select-scrollable.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "select-form",
+    type: "registry:example",
+    registryDependencies: ["select"],
+    files: [
+      {
+        path: "examples/select-form.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "separator-demo",
+    type: "registry:example",
+    registryDependencies: ["separator"],
+    files: [
+      {
+        path: "examples/separator-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "sheet-demo",
+    type: "registry:example",
+    registryDependencies: ["sheet"],
+    files: [
+      {
+        path: "examples/sheet-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "sheet-side",
+    type: "registry:example",
+    registryDependencies: ["sheet"],
+    files: [
+      {
+        path: "examples/sheet-side.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "skeleton-demo",
+    type: "registry:example",
+    registryDependencies: ["skeleton"],
+    files: [
+      {
+        path: "examples/skeleton-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "skeleton-card",
+    type: "registry:example",
+    registryDependencies: ["skeleton"],
+    files: [
+      {
+        path: "examples/skeleton-card.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "slider-demo",
+    type: "registry:example",
+    registryDependencies: ["slider"],
+    files: [
+      {
+        path: "examples/slider-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "sonner-demo",
+    type: "registry:example",
+    registryDependencies: ["sonner"],
+    files: [
+      {
+        path: "examples/sonner-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "switch-demo",
+    type: "registry:example",
+    registryDependencies: ["switch"],
+    files: [
+      {
+        path: "examples/switch-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "switch-form",
+    type: "registry:example",
+    registryDependencies: ["switch", "form"],
+    files: [
+      {
+        path: "examples/switch-form.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "table-demo",
+    type: "registry:example",
+    registryDependencies: ["table"],
+    files: [
+      {
+        path: "examples/table-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "tabs-demo",
+    type: "registry:example",
+    registryDependencies: ["tabs"],
+    files: [
+      {
+        path: "examples/tabs-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textarea-demo",
+    type: "registry:example",
+    registryDependencies: ["textarea"],
+    files: [
+      {
+        path: "examples/textarea-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textarea-disabled",
+    type: "registry:example",
+    registryDependencies: ["textarea"],
+    files: [
+      {
+        path: "examples/textarea-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textarea-form",
+    type: "registry:example",
+    registryDependencies: ["textarea", "form"],
+    files: [
+      {
+        path: "examples/textarea-form.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textarea-with-button",
+    type: "registry:example",
+    registryDependencies: ["textarea", "button"],
+    files: [
+      {
+        path: "examples/textarea-with-button.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textarea-with-label",
+    type: "registry:example",
+    registryDependencies: ["textarea", "label"],
+    files: [
+      {
+        path: "examples/textarea-with-label.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textarea-with-text",
+    type: "registry:example",
+    registryDependencies: ["textarea", "label"],
+    files: [
+      {
+        path: "examples/textarea-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toast-demo",
+    type: "registry:example",
+    registryDependencies: ["toast"],
+    files: [
+      {
+        path: "examples/toast-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toast-destructive",
+    type: "registry:example",
+    registryDependencies: ["toast"],
+    files: [
+      {
+        path: "examples/toast-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toast-simple",
+    type: "registry:example",
+    registryDependencies: ["toast"],
+    files: [
+      {
+        path: "examples/toast-simple.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toast-with-action",
+    type: "registry:example",
+    registryDependencies: ["toast"],
+    files: [
+      {
+        path: "examples/toast-with-action.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toast-with-title",
+    type: "registry:example",
+    registryDependencies: ["toast"],
+    files: [
+      {
+        path: "examples/toast-with-title.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-demo",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [
+      {
+        path: "examples/toggle-group-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-disabled",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [
+      {
+        path: "examples/toggle-group-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-lg",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [
+      {
+        path: "examples/toggle-group-lg.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-outline",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [
+      {
+        path: "examples/toggle-group-outline.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-sm",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [
+      {
+        path: "examples/toggle-group-sm.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-single",
+    type: "registry:example",
+    registryDependencies: ["toggle-group"],
+    files: [
+      {
+        path: "examples/toggle-group-single.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-demo",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [
+      {
+        path: "examples/toggle-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-disabled",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [
+      {
+        path: "examples/toggle-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-lg",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [
+      {
+        path: "examples/toggle-lg.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-outline",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [
+      {
+        path: "examples/toggle-outline.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-sm",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [
+      {
+        path: "examples/toggle-sm.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-with-text",
+    type: "registry:example",
+    registryDependencies: ["toggle"],
+    files: [
+      {
+        path: "examples/toggle-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "tooltip-demo",
+    type: "registry:example",
+    registryDependencies: ["tooltip"],
+    files: [
+      {
+        path: "examples/tooltip-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-blockquote",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-blockquote.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-h1",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-h1.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-h2",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-h2.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-h3",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-h3.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-h4",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-h4.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-inline-code",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-inline-code.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-large",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-large.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-lead",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-lead.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-list",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-list.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-muted",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-muted.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-p",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-p.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-small",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-small.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "typography-table",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/typography-table.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "mode-toggle",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/mode-toggle.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "chart-bar-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/chart-bar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "chart-bar-demo-grid",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/chart-bar-demo-grid.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "chart-bar-demo-axis",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/chart-bar-demo-axis.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "chart-bar-demo-tooltip",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/chart-bar-demo-tooltip.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "chart-bar-demo-legend",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/chart-bar-demo-legend.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "chart-tooltip-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/chart-tooltip-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "calendar-hijri",
+    description: "A Persian calendar.",
+    type: "registry:example",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "examples/calendar-hijri.tsx",
+        type: "registry:example",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+]
diff --git a/apps/v4/registry/registry-hooks.ts b/apps/v4/registry/registry-hooks.ts
new file mode 100644
index 00000000000..5957a81599f
--- /dev/null
+++ b/apps/v4/registry/registry-hooks.ts
@@ -0,0 +1,14 @@
+import { type Registry } from "shadcn/schema"
+
+export const hooks: Registry["items"] = [
+  {
+    name: "use-mobile",
+    type: "registry:hook",
+    files: [
+      {
+        path: "hooks/use-mobile.ts",
+        type: "registry:hook",
+      },
+    ],
+  },
+]
diff --git a/apps/v4/registry/registry-icons.ts b/apps/v4/registry/registry-icons.ts
new file mode 100644
index 00000000000..d70d235d09d
--- /dev/null
+++ b/apps/v4/registry/registry-icons.ts
@@ -0,0 +1,166 @@
+export const iconLibraries = {
+  lucide: {
+    name: "lucide-react",
+    package: "lucide-react",
+    import: "lucide-react",
+  },
+  radix: {
+    name: "@radix-ui/react-icons",
+    package: "@radix-ui/react-icons",
+    import: "@radix-ui/react-icons",
+  },
+} as const
+
+export const icons: Record<
+  string,
+  Record<keyof typeof iconLibraries, string>
+> = {
+  AlertCircle: {
+    lucide: "AlertCircle",
+    radix: "ExclamationTriangleIcon",
+  },
+  ArrowLeft: {
+    lucide: "ArrowLeft",
+    radix: "ArrowLeftIcon",
+  },
+  ArrowRight: {
+    lucide: "ArrowRight",
+    radix: "ArrowRightIcon",
+  },
+  ArrowUpDown: {
+    lucide: "ArrowUpDown",
+    radix: "CaretSortIcon",
+  },
+  BellRing: {
+    lucide: "BellRing",
+    radix: "BellIcon",
+  },
+  Bold: {
+    lucide: "Bold",
+    radix: "FontBoldIcon",
+  },
+  Calculator: {
+    lucide: "Calculator",
+    radix: "ComponentPlaceholderIcon",
+  },
+  Calendar: {
+    lucide: "Calendar",
+    radix: "CalendarIcon",
+  },
+  Check: {
+    lucide: "Check",
+    radix: "CheckIcon",
+  },
+  ChevronDown: {
+    lucide: "ChevronDown",
+    radix: "ChevronDownIcon",
+  },
+  ChevronLeft: {
+    lucide: "ChevronLeft",
+    radix: "ChevronLeftIcon",
+  },
+  ChevronRight: {
+    lucide: "ChevronRight",
+    radix: "ChevronRightIcon",
+  },
+  ChevronUp: {
+    lucide: "ChevronUp",
+    radix: "ChevronUpIcon",
+  },
+  ChevronsUpDown: {
+    lucide: "ChevronsUpDown",
+    radix: "CaretSortIcon",
+  },
+  Circle: {
+    lucide: "Circle",
+    radix: "DotFilledIcon",
+  },
+  Copy: {
+    lucide: "Copy",
+    radix: "CopyIcon",
+  },
+  CreditCard: {
+    lucide: "CreditCard",
+    radix: "ComponentPlaceholderIcon",
+  },
+  GripVertical: {
+    lucide: "GripVertical",
+    radix: "DragHandleDots2Icon",
+  },
+  Italic: {
+    lucide: "Italic",
+    radix: "FontItalicIcon",
+  },
+  Loader2: {
+    lucide: "Loader2",
+    radix: "ReloadIcon",
+  },
+  Mail: {
+    lucide: "Mail",
+    radix: "EnvelopeClosedIcon",
+  },
+  MailOpen: {
+    lucide: "MailOpen",
+    radix: "EnvelopeOpenIcon",
+  },
+  Minus: {
+    lucide: "Minus",
+    radix: "MinusIcon",
+  },
+  Moon: {
+    lucide: "Moon",
+    radix: "MoonIcon",
+  },
+  MoreHorizontal: {
+    lucide: "MoreHorizontal",
+    radix: "DotsHorizontalIcon",
+  },
+  PanelLeft: {
+    lucide: "PanelLeft",
+    radix: "ViewVerticalIcon",
+  },
+  Plus: {
+    lucide: "Plus",
+    radix: "PlusIcon",
+  },
+  Search: {
+    lucide: "Search",
+    radix: "MagnifyingGlassIcon",
+  },
+  Send: {
+    lucide: "Send",
+    radix: "PaperPlaneIcon",
+  },
+  Settings: {
+    lucide: "Settings",
+    radix: "GearIcon",
+  },
+  Slash: {
+    lucide: "Slash",
+    radix: "SlashIcon",
+  },
+  Smile: {
+    lucide: "Smile",
+    radix: "FaceIcon",
+  },
+  Sun: {
+    lucide: "Sun",
+    radix: "SunIcon",
+  },
+  Terminal: {
+    lucide: "Terminal",
+    radix: "RocketIcon",
+  },
+  Underline: {
+    lucide: "Underline",
+    radix: "UnderlineIcon",
+  },
+  User: {
+    lucide: "User",
+    radix: "PersonIcon",
+  },
+  X: {
+    lucide: "X",
+    radix: "Cross2Icon",
+  },
+} as const
diff --git a/apps/v4/registry/registry-internal.ts b/apps/v4/registry/registry-internal.ts
new file mode 100644
index 00000000000..31adcb00e93
--- /dev/null
+++ b/apps/v4/registry/registry-internal.ts
@@ -0,0 +1,135 @@
+import { type Registry } from "shadcn/schema"
+
+export const internal: Registry["items"] = [
+  // Do not move this. They are intentionally here for registry capture.
+  {
+    name: "sidebar-demo",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-demo.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-header",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-header.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-footer",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-footer.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-group",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-group.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-group-collapsible",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-group-collapsible.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-group-action",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-group-action.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-menu",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-menu.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-menu-action",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-menu-action.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-menu-sub",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-menu-sub.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-menu-collapsible",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-menu-collapsible.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-menu-badge",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-menu-badge.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-rsc",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-rsc.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-controlled",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-controlled.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+]
diff --git a/apps/v4/registry/registry-lib.ts b/apps/v4/registry/registry-lib.ts
new file mode 100644
index 00000000000..fd94cdea665
--- /dev/null
+++ b/apps/v4/registry/registry-lib.ts
@@ -0,0 +1,15 @@
+import { type Registry } from "shadcn/schema"
+
+export const lib: Registry["items"] = [
+  {
+    name: "utils",
+    type: "registry:lib",
+    dependencies: ["clsx", "tailwind-merge"],
+    files: [
+      {
+        path: "lib/utils.ts",
+        type: "registry:lib",
+      },
+    ],
+  },
+]
diff --git a/apps/v4/registry/registry-themes.ts b/apps/v4/registry/registry-themes.ts
new file mode 100644
index 00000000000..bf2114bf712
--- /dev/null
+++ b/apps/v4/registry/registry-themes.ts
@@ -0,0 +1,14 @@
+import { type Registry } from "shadcn/schema"
+
+import { baseColorsV4 } from "@/registry/registry-base-colors"
+
+// Create a theme for each color in the base colors.
+export const themes: Registry["items"] = Object.keys(baseColorsV4).map(
+  (color) => {
+    return {
+      name: `theme-${color}`,
+      type: "registry:theme",
+      cssVars: baseColorsV4[color as keyof typeof baseColorsV4],
+    }
+  }
+)
diff --git a/apps/v4/registry/registry-ui.ts b/apps/v4/registry/registry-ui.ts
new file mode 100644
index 00000000000..63e3f19551f
--- /dev/null
+++ b/apps/v4/registry/registry-ui.ts
@@ -0,0 +1,613 @@
+import { type Registry } from "shadcn/schema"
+
+export const ui: Registry["items"] = [
+  {
+    name: "accordion",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-accordion"],
+    files: [
+      {
+        path: "ui/accordion.tsx",
+        type: "registry:ui",
+      },
+    ],
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            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",
+            },
+          },
+        },
+      },
+    },
+  },
+  {
+    name: "alert",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/alert.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "alert-dialog",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-alert-dialog"],
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "ui/alert-dialog.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "aspect-ratio",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-aspect-ratio"],
+    files: [
+      {
+        path: "ui/aspect-ratio.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "avatar",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-avatar"],
+    files: [
+      {
+        path: "ui/avatar.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "badge",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-slot"],
+    files: [
+      {
+        path: "ui/badge.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "breadcrumb",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-slot"],
+    files: [
+      {
+        path: "ui/breadcrumb.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "button",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-slot"],
+    files: [
+      {
+        path: "ui/button.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "calendar",
+    type: "registry:ui",
+    dependencies: ["react-day-picker@latest", "date-fns"],
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "ui/calendar.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "card",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/card.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "carousel",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/carousel.tsx",
+        type: "registry:ui",
+      },
+    ],
+    registryDependencies: ["button"],
+    dependencies: ["embla-carousel-react"],
+  },
+  {
+    name: "chart",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/chart.tsx",
+        type: "registry:ui",
+      },
+    ],
+    registryDependencies: ["card"],
+    dependencies: ["recharts@2.15.4", "lucide-react"],
+  },
+  {
+    name: "checkbox",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-checkbox"],
+    files: [
+      {
+        path: "ui/checkbox.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "collapsible",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-collapsible"],
+    files: [
+      {
+        path: "ui/collapsible.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "command",
+    type: "registry:ui",
+    dependencies: ["cmdk"],
+    registryDependencies: ["dialog"],
+    files: [
+      {
+        path: "ui/command.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "context-menu",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-context-menu"],
+    files: [
+      {
+        path: "ui/context-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "dialog",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-dialog"],
+    files: [
+      {
+        path: "ui/dialog.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "drawer",
+    type: "registry:ui",
+    dependencies: ["vaul", "@radix-ui/react-dialog"],
+    files: [
+      {
+        path: "ui/drawer.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "dropdown-menu",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-dropdown-menu"],
+    files: [
+      {
+        path: "ui/dropdown-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "form",
+    type: "registry:ui",
+    dependencies: [
+      "@radix-ui/react-label",
+      "@radix-ui/react-slot",
+      "@hookform/resolvers",
+      "zod",
+      "react-hook-form",
+    ],
+    registryDependencies: ["button", "label"],
+    files: [
+      {
+        path: "ui/form.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "hover-card",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-hover-card"],
+    files: [
+      {
+        path: "ui/hover-card.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "input",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/input.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "input-otp",
+    type: "registry:ui",
+    dependencies: ["input-otp"],
+    files: [
+      {
+        path: "ui/input-otp.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "label",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-label"],
+    files: [
+      {
+        path: "ui/label.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "menubar",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-menubar"],
+    files: [
+      {
+        path: "ui/menubar.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "navigation-menu",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-navigation-menu"],
+    files: [
+      {
+        path: "ui/navigation-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "pagination",
+    type: "registry:ui",
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "ui/pagination.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "popover",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-popover"],
+    files: [
+      {
+        path: "ui/popover.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "progress",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-progress"],
+    files: [
+      {
+        path: "ui/progress.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "radio-group",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-radio-group"],
+    files: [
+      {
+        path: "ui/radio-group.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "resizable",
+    type: "registry:ui",
+    dependencies: ["react-resizable-panels"],
+    files: [
+      {
+        path: "ui/resizable.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "scroll-area",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-scroll-area"],
+    files: [
+      {
+        path: "ui/scroll-area.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "select",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-select"],
+    files: [
+      {
+        path: "ui/select.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "separator",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-separator"],
+    files: [
+      {
+        path: "ui/separator.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "sheet",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-dialog"],
+    files: [
+      {
+        path: "ui/sheet.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "sidebar",
+    type: "registry:ui",
+    dependencies: [
+      "@radix-ui/react-slot",
+      "class-variance-authority",
+      "lucide-react",
+    ],
+    registryDependencies: [
+      "button",
+      "separator",
+      "sheet",
+      "tooltip",
+      "input",
+      "use-mobile",
+      "skeleton",
+    ],
+    files: [
+      {
+        path: "ui/sidebar.tsx",
+        type: "registry:ui",
+      },
+    ],
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            colors: {
+              sidebar: {
+                DEFAULT: "hsl(var(--sidebar-background))",
+                foreground: "hsl(var(--sidebar-foreground))",
+                primary: "hsl(var(--sidebar-primary))",
+                "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                accent: "hsl(var(--sidebar-accent))",
+                "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                border: "hsl(var(--sidebar-border))",
+                ring: "hsl(var(--sidebar-ring))",
+              },
+            },
+          },
+        },
+      },
+    },
+    cssVars: {
+      light: {
+        "sidebar-background": "0 0% 98%",
+        "sidebar-foreground": "240 5.3% 26.1%",
+        "sidebar-primary": "240 5.9% 10%",
+        "sidebar-primary-foreground": "0 0% 98%",
+        "sidebar-accent": "240 4.8% 95.9%",
+        "sidebar-accent-foreground": "240 5.9% 10%",
+        "sidebar-border": "220 13% 91%",
+        "sidebar-ring": "217.2 91.2% 59.8%",
+      },
+      dark: {
+        "sidebar-background": "240 5.9% 10%",
+        "sidebar-foreground": "240 4.8% 95.9%",
+        "sidebar-primary": "224.3 76.3% 48%",
+        "sidebar-primary-foreground": "0 0% 100%",
+        "sidebar-accent": "240 3.7% 15.9%",
+        "sidebar-accent-foreground": "240 4.8% 95.9%",
+        "sidebar-border": "240 3.7% 15.9%",
+        "sidebar-ring": "217.2 91.2% 59.8%",
+      },
+    },
+  },
+  {
+    name: "skeleton",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/skeleton.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "slider",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-slider"],
+    files: [
+      {
+        path: "ui/slider.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "sonner",
+    type: "registry:ui",
+    dependencies: ["sonner", "next-themes"],
+    files: [
+      {
+        path: "ui/sonner.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "switch",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-switch"],
+    files: [
+      {
+        path: "ui/switch.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "table",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/table.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "tabs",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-tabs"],
+    files: [
+      {
+        path: "ui/tabs.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "textarea",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/textarea.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "toast",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-toast"],
+    files: [
+      {
+        path: "ui/toast.tsx",
+        type: "registry:ui",
+      },
+      {
+        path: "hooks/use-toast.ts",
+        type: "registry:hook",
+      },
+      {
+        path: "ui/toaster.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "toggle",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-toggle"],
+    files: [
+      {
+        path: "ui/toggle.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "toggle-group",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-toggle-group"],
+    registryDependencies: ["toggle"],
+    files: [
+      {
+        path: "ui/toggle-group.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "tooltip",
+    type: "registry:ui",
+    dependencies: ["@radix-ui/react-tooltip"],
+    files: [
+      {
+        path: "ui/tooltip.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+]
diff --git a/apps/v4/scripts/build-registry.mts b/apps/v4/scripts/build-registry.mts
new file mode 100644
index 00000000000..533c8ac2f2b
--- /dev/null
+++ b/apps/v4/scripts/build-registry.mts
@@ -0,0 +1,192 @@
+import { exec } from "child_process"
+import { promises as fs } from "fs"
+import path from "path"
+import { rimraf } from "rimraf"
+
+import { getAllBlocks } from "@/lib/blocks"
+import { registry } from "@/registry/index"
+
+async function buildRegistryIndex() {
+  let index = `/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import * as React from "react"
+
+export const Index: Record<string, any> = {`
+  for (const item of registry.items) {
+    const resolveFiles = item.files?.map(
+      (file) => `registry/new-york-v4/${file.path}`
+    )
+    if (!resolveFiles) {
+      continue
+    }
+
+    const componentPath = item.files?.[0]?.path
+      ? `@/registry/new-york-v4/${item.files[0].path}`
+      : ""
+
+    index += `
+  "${item.name}": {
+    name: "${item.name}",
+    description: "${item.description ?? ""}",
+    type: "${item.type}",
+    registryDependencies: ${JSON.stringify(item.registryDependencies)},
+    files: [${item.files?.map((file) => {
+      const filePath = `registry/new-york-v4/${typeof file === "string" ? file : file.path}`
+      const resolvedFilePath = path.resolve(filePath)
+      return typeof file === "string"
+        ? `"${resolvedFilePath}"`
+        : `{
+      path: "${filePath}",
+      type: "${file.type}",
+      target: "${file.target ?? ""}"
+    }`
+    })}],
+    component: ${
+      componentPath
+        ? `React.lazy(async () => {
+      const mod = await import("${componentPath}")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    })`
+        : "null"
+    },
+    categories: ${JSON.stringify(item.categories)},
+    meta: ${JSON.stringify(item.meta)},
+  },`
+  }
+
+  index += `
+  }`
+
+  console.log(`#️⃣  ${Object.keys(registry.items).length} items found`)
+
+  // Write style index.
+  rimraf.sync(path.join(process.cwd(), "registry/__index__.tsx"))
+  await fs.writeFile(path.join(process.cwd(), "registry/__index__.tsx"), index)
+}
+
+async function buildRegistryJsonFile() {
+  // 1. Fix the path for registry items.
+  const fixedRegistry = {
+    ...registry,
+    items: registry.items.map((item) => {
+      const files = item.files?.map((file) => {
+        return {
+          ...file,
+          path: `registry/new-york-v4/${file.path}`,
+        }
+      })
+
+      return {
+        ...item,
+        files,
+      }
+    }),
+  }
+
+  // 2. Write the content of the registry to `registry.json`
+  rimraf.sync(path.join(process.cwd(), `registry.json`))
+  await fs.writeFile(
+    path.join(process.cwd(), `registry.json`),
+    JSON.stringify(fixedRegistry, null, 2)
+  )
+
+  // 3. Copy the registry.json to the www/public/r/styles/new-york-v4 directory.
+  await fs.cp(
+    path.join(process.cwd(), "registry.json"),
+    path.join(
+      process.cwd(),
+      "../www/public/r/styles/new-york-v4/registry.json"
+    ),
+    { recursive: true }
+  )
+}
+
+async function buildRegistry() {
+  return new Promise((resolve, reject) => {
+    // Use local shadcn copy.
+    const process = exec(
+      `node ../../packages/shadcn/dist/index.js build registry.json --output ../www/public/r/styles/new-york-v4`
+    )
+
+    // exec(
+    //   `pnpm dlx shadcn build registry.json --output ../www/public/r/styles/new-york-v4`
+    // )
+
+    process.on("exit", (code) => {
+      if (code === 0) {
+        resolve(undefined)
+      } else {
+        reject(new Error(`Process exited with code ${code}`))
+      }
+    })
+  })
+}
+
+async function syncRegistry() {
+  // Store the current registry content
+  const registryDir = path.join(process.cwd(), "registry")
+  const registryIndexPath = path.join(registryDir, "__index__.tsx")
+  let registryContent = null
+
+  try {
+    registryContent = await fs.readFile(registryIndexPath, "utf8")
+  } catch {
+    // File might not exist yet, that's ok
+  }
+
+  // 1. Call pnpm registry:build for www.
+  await exec("pnpm --filter=www registry:build")
+
+  // 2. Copy the www/public/r directory to v4/public/r.
+  rimraf.sync(path.join(process.cwd(), "public/r"))
+  await fs.cp(
+    path.resolve(process.cwd(), "../www/public/r"),
+    path.resolve(process.cwd(), "public/r"),
+    { recursive: true }
+  )
+
+  // 3. Restore the registry content if we had it
+  if (registryContent) {
+    await fs.writeFile(registryIndexPath, registryContent, "utf8")
+  }
+}
+
+async function buildBlocksIndex() {
+  const blocks = await getAllBlocks(["registry:block"])
+
+  const payload = blocks.map((block) => ({
+    name: block.name,
+    description: block.description,
+    categories: block.categories,
+  }))
+
+  rimraf.sync(path.join(process.cwd(), "registry/__blocks__.json"))
+  await fs.writeFile(
+    path.join(process.cwd(), "registry/__blocks__.json"),
+    JSON.stringify(payload, null, 2)
+  )
+}
+
+try {
+  console.log("🗂️ Building registry/__index__.tsx...")
+  await buildRegistryIndex()
+
+  console.log("🗂️ Building registry/__blocks__.json...")
+  await buildBlocksIndex()
+
+  console.log("💅 Building registry.json...")
+  await buildRegistryJsonFile()
+
+  console.log("🏗️ Building registry...")
+  await buildRegistry()
+
+  console.log("🔄 Syncing registry...")
+  await syncRegistry()
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}
diff --git a/apps/v4/scripts/capture-registry.mts b/apps/v4/scripts/capture-registry.mts
new file mode 100644
index 00000000000..2d755fc8c17
--- /dev/null
+++ b/apps/v4/scripts/capture-registry.mts
@@ -0,0 +1,100 @@
+import { existsSync } from "fs"
+import path from "path"
+import puppeteer from "puppeteer"
+
+import { getAllBlockIds } from "../lib/blocks"
+
+const REGISTRY_PATH = path.join(process.cwd(), "public/r")
+
+// ----------------------------------------------------------------------------
+// Capture screenshots.
+// ----------------------------------------------------------------------------
+async function captureScreenshots() {
+  const blockIds = await getAllBlockIds()
+  const blocks = blockIds.filter((block) => {
+    // Check if screenshots already exist
+    const lightPath = path.join(
+      REGISTRY_PATH,
+      `styles/new-york-v4/${block}-light.png`
+    )
+    const darkPath = path.join(
+      REGISTRY_PATH,
+      `styles/new-york-v4/${block}-dark.png`
+    )
+    return !existsSync(lightPath) || !existsSync(darkPath)
+  })
+
+  if (blocks.length === 0) {
+    console.log("✨ All screenshots exist, nothing to capture")
+    return
+  }
+
+  const browser = await puppeteer.launch({
+    defaultViewport: {
+      width: 1440,
+      height: 900,
+      deviceScaleFactor: 2,
+    },
+  })
+
+  for (const block of blocks) {
+    const pageUrl = `http://localhost:4000/view/${block}`
+
+    const page = await browser.newPage()
+    await page.goto(pageUrl, {
+      waitUntil: "networkidle2",
+    })
+
+    console.log(`- Capturing ${block}...`)
+
+    for (const theme of ["light", "dark"]) {
+      const screenshotPath = path.join(
+        REGISTRY_PATH,
+        `styles/new-york-v4/${block}${theme === "dark" ? "-dark" : "-light"}.png`
+      )
+
+      if (existsSync(screenshotPath)) {
+        continue
+      }
+
+      // Set theme and reload page
+      await page.evaluate((currentTheme) => {
+        localStorage.setItem("theme", currentTheme)
+      }, theme)
+
+      await page.reload({ waitUntil: "networkidle2" })
+
+      // Wait for animations to complete
+      if (block.startsWith("chart") || block.startsWith("dashboard")) {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+      }
+
+      // Hide Tailwind indicator
+      await page.evaluate(() => {
+        const indicator = document.querySelector("[data-tailwind-indicator]")
+        if (indicator) {
+          indicator.remove()
+        }
+      })
+
+      await page.screenshot({
+        path: screenshotPath,
+      })
+    }
+
+    await page.close()
+  }
+
+  await browser.close()
+}
+
+try {
+  console.log("🔍 Capturing screenshots...")
+
+  await captureScreenshots()
+
+  console.log("✅ Done!")
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}
diff --git a/apps/v4/scripts/validate-registries.mts b/apps/v4/scripts/validate-registries.mts
new file mode 100644
index 00000000000..cf68e69e4ea
--- /dev/null
+++ b/apps/v4/scripts/validate-registries.mts
@@ -0,0 +1,58 @@
+import { promises as fs } from "fs"
+import path from "path"
+import { registrySchema } from "shadcn/schema"
+import { z } from "zod"
+
+const registriesIndexSchema = z.record(
+  z.string().regex(/^@[a-zA-Z0-9][a-zA-Z0-9-_]*$/),
+  z.string().refine((url) => url.includes("{name}"))
+)
+
+async function main() {
+  // 1. Validate the registries.json file.
+  const registriesFile = path.join(process.cwd(), "public/r/registries.json")
+  const content = await fs.readFile(registriesFile, "utf-8")
+  const data = JSON.parse(content)
+  const registries = registriesIndexSchema.parse(data)
+
+  // 2. Validate each registry endpoint.
+  const errors: string[] = []
+  for (const [name, url] of Object.entries(registries)) {
+    try {
+      const testUrl = url.replace("{name}", "registry")
+      const response = await fetch(testUrl)
+
+      if (!response.ok) {
+        errors.push(`${name}: HTTP ${response.status}`)
+        continue
+      }
+
+      const json = await response.json()
+      registrySchema.parse(json)
+      console.log(`✅ ${name}`)
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        errors.push(`${name}: ${error.message}`)
+        continue
+      }
+
+      errors.push(
+        `${name}: ${error instanceof Error ? error.message : String(error)}`
+      )
+    }
+  }
+
+  if (errors.length > 0) {
+    console.error("\n❌ Validation failed:")
+    errors.forEach((err) => console.error(`   ${err}`))
+    process.exit(1)
+  }
+
+  console.log("\n✅ All registries passed validation.")
+  process.exit(0)
+}
+
+main().catch((error) => {
+  console.error("❌ Error:", error instanceof Error ? error.message : error)
+  process.exit(1)
+})
diff --git a/apps/v4/source.config.ts b/apps/v4/source.config.ts
new file mode 100644
index 00000000000..122355ddf98
--- /dev/null
+++ b/apps/v4/source.config.ts
@@ -0,0 +1,45 @@
+import {
+  defineConfig,
+  defineDocs,
+  frontmatterSchema,
+} from "fumadocs-mdx/config"
+import rehypePrettyCode from "rehype-pretty-code"
+import { z } from "zod"
+
+import { transformers } from "@/lib/highlight-code"
+
+export default defineConfig({
+  mdxOptions: {
+    rehypePlugins: (plugins) => {
+      plugins.shift()
+      plugins.push([
+        // TODO: fix the type.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        rehypePrettyCode as any,
+        {
+          theme: {
+            dark: "github-dark",
+            light: "github-light-default",
+          },
+          transformers,
+        },
+      ])
+
+      return plugins
+    },
+  },
+})
+
+export const docs = defineDocs({
+  dir: "content/docs",
+  docs: {
+    schema: frontmatterSchema.extend({
+      links: z
+        .object({
+          doc: z.string().optional(),
+          api: z.string().optional(),
+        })
+        .optional(),
+    }),
+  },
+})
diff --git a/apps/v4/styles/globals.css b/apps/v4/styles/globals.css
new file mode 100644
index 00000000000..52559b3f7c4
--- /dev/null
+++ b/apps/v4/styles/globals.css
@@ -0,0 +1,343 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@import "./themes.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@custom-variant fixed (&:is(.layout-fixed *));
+
+@theme inline {
+  --breakpoint-3xl: 1600px;
+  --breakpoint-4xl: 2000px;
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-highlight: var(--code-highlight);
+  --color-code-number: var(--code-number);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --surface: oklch(0.98 0 0);
+  --surface-foreground: var(--foreground);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: oklch(0.96 0 0);
+  --code-number: oklch(0.56 0 0);
+  --selection: oklch(0.145 0 0);
+  --selection-foreground: oklch(1 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
+  --surface: oklch(0.2 0 0);
+  --surface-foreground: oklch(0.708 0 0);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: oklch(0.27 0 0);
+  --code-number: oklch(0.72 0 0);
+  --selection: oklch(0.922 0 0);
+  --selection-foreground: oklch(0.205 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  ::selection {
+    @apply bg-selection text-selection-foreground;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+  }
+
+  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+    [data-wrapper] {
+      @apply min-[1800px]:border-t;
+    }
+  }
+
+  a:active,
+  button:active {
+    @apply opacity-60 md:opacity-100;
+  }
+}
+
+@utility border-grid {
+  @apply border-border/50 dark:border-border;
+}
+
+@utility section-soft {
+  @apply from-background to-surface/40 dark:bg-background 3xl:fixed:bg-none bg-gradient-to-b;
+}
+
+@utility theme-container {
+  @apply font-sans;
+}
+
+@utility container-wrapper {
+  @apply 3xl:fixed:max-w-[calc(var(--breakpoint-2xl)+2rem)] mx-auto w-full px-2;
+}
+
+@utility container {
+  @apply 3xl:max-w-screen-2xl mx-auto max-w-[1400px] px-4 lg:px-8;
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility border-ghost {
+  @apply after:border-border relative after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten;
+}
+
+@utility step {
+  counter-increment: step;
+  @apply relative;
+
+  &:before {
+    @apply text-muted-foreground right-0 mr-2 hidden size-7 items-center justify-center rounded-full text-center -indent-px font-mono text-sm font-medium md:absolute;
+    content: counter(step);
+  }
+}
+
+@utility extend-touch-target {
+  @media (pointer: coarse) {
+    @apply relative touch-manipulation after:absolute after:-inset-2;
+  }
+}
+
+@layer components {
+  .steps {
+    &:first-child {
+      @apply !mt-0;
+    }
+
+    &:first-child > h3:first-child {
+      @apply !mt-0;
+    }
+
+    > h3 {
+      @apply !mt-16;
+    }
+
+    > h3 + p {
+      @apply !mt-2;
+    }
+  }
+
+  [data-rehype-pretty-code-figure] {
+    background-color: var(--color-code);
+    color: var(--color-code-foreground);
+    border-radius: var(--radius-lg);
+    border-width: 0px;
+    border-color: var(--border);
+    margin-top: calc(var(--spacing) * 6);
+    overflow: hidden;
+    font-size: var(--text-sm);
+    outline: none;
+    position: relative;
+    @apply -mx-1 md:-mx-1;
+
+    &:has([data-rehype-pretty-code-title]) [data-slot="copy-button"] {
+      top: calc(var(--spacing) * 1.5) !important;
+    }
+  }
+
+  [data-rehype-pretty-code-title] {
+    border-bottom: color-mix(in oklab, var(--border) 30%, transparent);
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    padding-block: calc(var(--spacing) * 2.5);
+    padding-inline: calc(var(--spacing) * 4);
+    font-size: var(--text-sm);
+    font-family: var(--font-mono);
+    color: var(--color-code-foreground);
+  }
+
+  [data-line-numbers] {
+    display: grid;
+    min-width: 100%;
+    white-space: pre;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    counter-reset: line;
+    box-decoration-break: clone;
+  }
+
+  [data-line-numbers] [data-line]::before {
+    font-size: var(--text-sm);
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block;
+    width: calc(var(--spacing) * 16);
+    padding-right: calc(var(--spacing) * 6);
+    text-align: right;
+    color: var(--color-code-number);
+    background-color: var(--color-code);
+    position: sticky;
+    left: 0;
+  }
+
+  [data-line-numbers] [data-highlighted-line][data-line]::before {
+    background-color: var(--color-code-highlight);
+  }
+
+  [data-line] {
+    padding-top: calc(var(--spacing) * 0.5);
+    padding-bottom: calc(var(--spacing) * 0.5);
+    min-height: calc(var(--spacing) * 1);
+    width: 100%;
+    display: inline-block;
+  }
+
+  [data-line] span {
+    color: var(--shiki-light);
+
+    @variant dark {
+      color: var(--shiki-dark) !important;
+    }
+  }
+
+  [data-highlighted-line],
+  [data-highlighted-chars] {
+    position: relative;
+    background-color: var(--color-code-highlight);
+  }
+
+  [data-highlighted-line] {
+    &:after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      content: "";
+      background-color: color-mix(
+        in oklab,
+        var(--muted-foreground) 50%,
+        transparent
+      );
+    }
+  }
+
+  [data-highlighted-chars] {
+    border-radius: var(--radius-sm);
+    padding-inline: 0.3rem;
+    padding-block: 0.1rem;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+  }
+}
diff --git a/apps/v4/styles/themes.css b/apps/v4/styles/themes.css
new file mode 100644
index 00000000000..5b4286408bc
--- /dev/null
+++ b/apps/v4/styles/themes.css
@@ -0,0 +1,334 @@
+.theme-default .theme-container {
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+}
+
+.theme-blue .theme-container {
+  --primary: var(--color-blue-600);
+  --primary-foreground: var(--color-blue-50);
+  --ring: var(--color-blue-400);
+  --sidebar-primary: var(--color-blue-600);
+  --sidebar-primary-foreground: var(--color-blue-50);
+  --sidebar-ring: var(--color-blue-400);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+
+  @variant dark {
+    --primary: var(--color-blue-500);
+    --primary-foreground: var(--color-blue-50);
+    --ring: var(--color-blue-900);
+    --sidebar-primary: var(--color-blue-500);
+    --sidebar-primary-foreground: var(--color-blue-50);
+    --sidebar-ring: var(--color-blue-900);
+  }
+}
+
+.theme-green .theme-container {
+  --primary: var(--color-lime-600);
+  --primary-foreground: var(--color-lime-50);
+  --ring: var(--color-lime-400);
+  --chart-1: var(--color-green-300);
+  --chart-2: var(--color-green-500);
+  --chart-3: var(--color-green-600);
+  --chart-4: var(--color-green-700);
+  --chart-5: var(--color-green-800);
+  --sidebar-primary: var(--color-lime-600);
+  --sidebar-primary-foreground: var(--color-lime-50);
+  --sidebar-ring: var(--color-lime-400);
+
+  @variant dark {
+    --primary: var(--color-lime-600);
+    --primary-foreground: var(--color-lime-50);
+    --ring: var(--color-lime-900);
+    --sidebar-primary: var(--color-lime-500);
+    --sidebar-primary-foreground: var(--color-lime-50);
+    --sidebar-ring: var(--color-lime-900);
+  }
+}
+
+.theme-amber .theme-container {
+  --primary: var(--color-amber-600);
+  --primary-foreground: var(--color-amber-50);
+  --ring: var(--color-amber-400);
+  --chart-1: var(--color-amber-300);
+  --chart-2: var(--color-amber-500);
+  --chart-3: var(--color-amber-600);
+  --chart-4: var(--color-amber-700);
+  --chart-5: var(--color-amber-800);
+  --sidebar-primary: var(--color-amber-600);
+  --sidebar-primary-foreground: var(--color-amber-50);
+  --sidebar-ring: var(--color-amber-400);
+
+  @variant dark {
+    --primary: var(--color-amber-500);
+    --primary-foreground: var(--color-amber-50);
+    --ring: var(--color-amber-900);
+    --sidebar-primary: var(--color-amber-500);
+    --sidebar-primary-foreground: var(--color-amber-50);
+    --sidebar-ring: var(--color-amber-900);
+  }
+}
+
+.theme-rose .theme-container {
+  --primary: var(--color-rose-600);
+  --primary-foreground: var(--color-rose-50);
+  --ring: var(--color-rose-400);
+  --chart-1: var(--color-rose-300);
+  --chart-2: var(--color-rose-500);
+  --chart-3: var(--color-rose-600);
+  --chart-4: var(--color-rose-700);
+  --chart-5: var(--color-rose-800);
+  --sidebar-primary: var(--color-rose-600);
+  --sidebar-primary-foreground: var(--color-rose-50);
+  --sidebar-ring: var(--color-rose-400);
+
+  @variant dark {
+    --primary: var(--color-rose-500);
+    --primary-foreground: var(--color-rose-50);
+    --ring: var(--color-rose-900);
+    --sidebar-primary: var(--color-rose-500);
+    --sidebar-primary-foreground: var(--color-rose-50);
+    --sidebar-ring: var(--color-rose-900);
+  }
+}
+
+.theme-purple .theme-container {
+  --primary: var(--color-purple-600);
+  --primary-foreground: var(--color-purple-50);
+  --ring: var(--color-purple-400);
+  --chart-1: var(--color-purple-300);
+  --chart-2: var(--color-purple-500);
+  --chart-3: var(--color-purple-600);
+  --chart-4: var(--color-purple-700);
+  --chart-5: var(--color-purple-800);
+  --sidebar-primary: var(--color-purple-600);
+  --sidebar-primary-foreground: var(--color-purple-50);
+  --sidebar-ring: var(--color-purple-400);
+
+  @variant dark {
+    --primary: var(--color-purple-500);
+    --primary-foreground: var(--color-purple-50);
+    --ring: var(--color-purple-900);
+    --sidebar-primary: var(--color-purple-500);
+    --sidebar-primary-foreground: var(--color-purple-50);
+    --sidebar-ring: var(--color-purple-900);
+  }
+}
+
+.theme-orange .theme-container {
+  --primary: var(--color-orange-600);
+  --primary-foreground: var(--color-orange-50);
+  --ring: var(--color-orange-400);
+  --chart-1: var(--color-orange-300);
+  --chart-2: var(--color-orange-500);
+  --chart-3: var(--color-orange-600);
+  --chart-4: var(--color-orange-700);
+  --chart-5: var(--color-orange-800);
+  --sidebar-primary: var(--color-orange-600);
+  --sidebar-primary-foreground: var(--color-orange-50);
+  --sidebar-ring: var(--color-orange-400);
+
+  @variant dark {
+    --primary: var(--color-orange-500);
+    --primary-foreground: var(--color-orange-50);
+    --ring: var(--color-orange-900);
+    --sidebar-primary: var(--color-orange-500);
+    --sidebar-primary-foreground: var(--color-orange-50);
+    --sidebar-ring: var(--color-orange-900);
+  }
+}
+
+.theme-teal .theme-container {
+  --primary: var(--color-teal-600);
+  --primary-foreground: var(--color-teal-50);
+  --chart-1: var(--color-teal-300);
+  --chart-2: var(--color-teal-500);
+  --chart-3: var(--color-teal-600);
+  --chart-4: var(--color-teal-700);
+  --chart-5: var(--color-teal-800);
+  --sidebar-primary: var(--color-teal-600);
+  --sidebar-primary-foreground: var(--color-teal-50);
+  --sidebar-ring: var(--color-teal-400);
+
+  @variant dark {
+    --primary: var(--color-teal-500);
+    --primary-foreground: var(--color-teal-50);
+    --sidebar-primary: var(--color-teal-500);
+    --sidebar-primary-foreground: var(--color-teal-50);
+    --sidebar-ring: var(--color-teal-900);
+  }
+}
+
+.theme-mono .theme-container {
+  --font-sans: var(--font-mono);
+  --primary: var(--color-stone-600);
+  --primary-foreground: var(--color-stone-50);
+  --chart-1: var(--color-stone-300);
+  --chart-2: var(--color-stone-500);
+  --chart-3: var(--color-stone-600);
+  --chart-4: var(--color-stone-700);
+  --chart-5: var(--color-stone-800);
+  --sidebar-primary: var(--color-stone-600);
+  --sidebar-primary-foreground: var(--color-stone-50);
+  --sidebar-ring: var(--color-stone-400);
+
+  @variant dark {
+    --primary: var(--color-stone-500);
+    --primary-foreground: var(--color-stone-50);
+    --sidebar-primary: var(--color-stone-500);
+    --sidebar-primary-foreground: var(--color-stone-50);
+    --sidebar-ring: var(--color-stone-900);
+  }
+
+  @media (min-width: 1024px) {
+    --font-sans: var(--font-mono);
+    --radius: 0.45em;
+    --text-lg: 1rem;
+    --text-xl: 1.1rem;
+    --text-2xl: 1.2rem;
+    --text-3xl: 1.3rem;
+    --text-4xl: 1.4rem;
+    --text-5xl: 1.5rem;
+    --text-6xl: 1.6rem;
+    --text-7xl: 1.7rem;
+    --text-8xl: 1.8rem;
+    --text-base: 0.85rem;
+    --text-sm: 0.8rem;
+    --spacing: 0.222222rem;
+  }
+
+  .rounded-xs,
+  .rounded-sm,
+  .rounded-md,
+  .rounded-lg,
+  .rounded-xl {
+    border-radius: 0;
+  }
+
+  .shadow-xs,
+  .shadow-sm,
+  .shadow-md,
+  .shadow-lg,
+  .shadow-xl {
+    box-shadow: none;
+  }
+
+  [data-slot="toggle-group"],
+  [data-slot="toggle-group-item"] {
+    @apply !rounded-none !shadow-none;
+  }
+}
+
+.theme-scaled .theme-container {
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+
+  @media (min-width: 1024px) {
+    --radius: 0.45em;
+    --text-lg: 1rem;
+    --text-xl: 1.1rem;
+    --text-2xl: 1.2rem;
+    --text-3xl: 1.3rem;
+    --text-4xl: 1.4rem;
+    --text-5xl: 1.5rem;
+    --text-6xl: 1.6rem;
+    --text-7xl: 1.7rem;
+    --text-8xl: 1.8rem;
+    --text-base: 0.85rem;
+    --text-sm: 0.8rem;
+    --spacing: 0.2rem;
+  }
+
+  [data-slot="select-trigger"],
+  [data-slot="toggle-group-item"] {
+    --spacing: 0.2rem;
+  }
+
+  [data-slot="card"] {
+    border-radius: var(--radius);
+    padding-block: calc(var(--spacing) * 4);
+    gap: calc(var(--spacing) * 2);
+  }
+
+  [data-slot="card"].pb-0 {
+    padding-bottom: 0;
+  }
+}
+
+.theme-red .theme-container {
+  --primary: var(--color-red-600);
+  --primary-foreground: var(--color-red-50);
+  --ring: var(--color-red-400);
+  --chart-1: var(--color-red-300);
+  --chart-2: var(--color-red-500);
+  --chart-3: var(--color-red-600);
+  --chart-4: var(--color-red-700);
+  --chart-5: var(--color-red-800);
+  --sidebar-primary: var(--color-red-600);
+  --sidebar-primary-foreground: var(--color-red-50);
+  --sidebar-ring: var(--color-red-400);
+
+  @variant dark {
+    --primary: var(--color-red-500);
+    --primary-foreground: var(--color-red-50);
+    --ring: var(--color-red-900);
+    --sidebar-primary: var(--color-red-500);
+    --sidebar-primary-foreground: var(--color-red-50);
+    --sidebar-ring: var(--color-red-900);
+  }
+}
+
+.theme-yellow .theme-container {
+  --primary: var(--color-yellow-400);
+  --primary-foreground: var(--color-yellow-900);
+  --ring: var(--color-yellow-400);
+  --chart-1: var(--color-yellow-300);
+  --chart-2: var(--color-yellow-500);
+  --chart-3: var(--color-yellow-600);
+  --chart-4: var(--color-yellow-700);
+  --chart-5: var(--color-yellow-800);
+  --sidebar-primary: var(--color-yellow-600);
+  --sidebar-primary-foreground: var(--color-yellow-50);
+  --sidebar-ring: var(--color-yellow-400);
+
+  @variant dark {
+    --primary: var(--color-yellow-500);
+    --primary-foreground: var(--color-yellow-900);
+    --ring: var(--color-yellow-900);
+    --sidebar-primary: var(--color-yellow-500);
+    --sidebar-primary-foreground: var(--color-yellow-50);
+    --sidebar-ring: var(--color-yellow-900);
+  }
+}
+
+.theme-violet .theme-container {
+  --primary: var(--color-violet-600);
+  --primary-foreground: var(--color-violet-50);
+  --ring: var(--color-violet-400);
+  --chart-1: var(--color-violet-300);
+  --chart-2: var(--color-violet-500);
+  --chart-3: var(--color-violet-600);
+  --chart-4: var(--color-violet-700);
+  --chart-5: var(--color-violet-800);
+  --sidebar-primary: var(--color-violet-600);
+  --sidebar-primary-foreground: var(--color-violet-50);
+  --sidebar-ring: var(--color-violet-400);
+
+  @variant dark {
+    --primary: var(--color-violet-500);
+    --primary-foreground: var(--color-violet-50);
+    --ring: var(--color-violet-900);
+    --sidebar-primary: var(--color-violet-500);
+    --sidebar-primary-foreground: var(--color-violet-50);
+    --sidebar-ring: var(--color-violet-900);
+  }
+}
diff --git a/apps/v4/tsconfig.json b/apps/v4/tsconfig.json
new file mode 100644
index 00000000000..382c1a234bc
--- /dev/null
+++ b/apps/v4/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "react": ["./node_modules/@types/react"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "scripts/build-registry.mts",
+    "next.config.mjs"
+  ],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/v4/tsconfig.scripts.json b/apps/v4/tsconfig.scripts.json
new file mode 100644
index 00000000000..ca5cd5ff7e6
--- /dev/null
+++ b/apps/v4/tsconfig.scripts.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "isolatedModules": false,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["scripts/**/*.{ts,mts}"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/www/.eslintrc.json b/apps/www/.eslintrc.json
new file mode 100644
index 00000000000..23df755dcf3
--- /dev/null
+++ b/apps/www/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "overrides": [
+    {
+      "files": ["scripts/**/*.{ts,mts}"],
+      "parserOptions": {
+        "project": "tsconfig.scripts.json"
+      }
+    }
+  ]
+}
diff --git a/apps/www/README.md b/apps/www/README.md
new file mode 100644
index 00000000000..07f68ccdbbf
--- /dev/null
+++ b/apps/www/README.md
@@ -0,0 +1,6 @@
+# ui.shadcn.com
+
+> [!WARNING]
+> The site at ui.shadcn.com now points to `apps/v4`. All changes should be made in the `apps/v4` directory.
+
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
diff --git a/apps/www/__registry__/default/block/authentication-01.tsx b/apps/www/__registry__/default/block/authentication-01.tsx
deleted file mode 100644
index ad62585fa44..00000000000
--- a/apps/www/__registry__/default/block/authentication-01.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/__registry__/default/block/authentication-02.tsx b/apps/www/__registry__/default/block/authentication-02.tsx
deleted file mode 100644
index b4ccaddd92b..00000000000
--- a/apps/www/__registry__/default/block/authentication-02.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/__registry__/default/block/authentication-03.tsx b/apps/www/__registry__/default/block/authentication-03.tsx
deleted file mode 100644
index 65e7c939a7a..00000000000
--- a/apps/www/__registry__/default/block/authentication-03.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/__registry__/default/block/authentication-04.tsx b/apps/www/__registry__/default/block/authentication-04.tsx
deleted file mode 100644
index 1ccce939230..00000000000
--- a/apps/www/__registry__/default/block/authentication-04.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/__registry__/default/block/chart-area-interactive.tsx b/apps/www/__registry__/default/block/chart-area-interactive.tsx
deleted file mode 100644
index 3044b7357a6..00000000000
--- a/apps/www/__registry__/default/block/chart-area-interactive.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-
-export const description = "An interactive area chart"
-
-const chartData = [
-  { date: "2024-04-01", desktop: 222, mobile: 150 },
-  { date: "2024-04-02", desktop: 97, mobile: 180 },
-  { date: "2024-04-03", desktop: 167, mobile: 120 },
-  { date: "2024-04-04", desktop: 242, mobile: 260 },
-  { date: "2024-04-05", desktop: 373, mobile: 290 },
-  { date: "2024-04-06", desktop: 301, mobile: 340 },
-  { date: "2024-04-07", desktop: 245, mobile: 180 },
-  { date: "2024-04-08", desktop: 409, mobile: 320 },
-  { date: "2024-04-09", desktop: 59, mobile: 110 },
-  { date: "2024-04-10", desktop: 261, mobile: 190 },
-  { date: "2024-04-11", desktop: 327, mobile: 350 },
-  { date: "2024-04-12", desktop: 292, mobile: 210 },
-  { date: "2024-04-13", desktop: 342, mobile: 380 },
-  { date: "2024-04-14", desktop: 137, mobile: 220 },
-  { date: "2024-04-15", desktop: 120, mobile: 170 },
-  { date: "2024-04-16", desktop: 138, mobile: 190 },
-  { date: "2024-04-17", desktop: 446, mobile: 360 },
-  { date: "2024-04-18", desktop: 364, mobile: 410 },
-  { date: "2024-04-19", desktop: 243, mobile: 180 },
-  { date: "2024-04-20", desktop: 89, mobile: 150 },
-  { date: "2024-04-21", desktop: 137, mobile: 200 },
-  { date: "2024-04-22", desktop: 224, mobile: 170 },
-  { date: "2024-04-23", desktop: 138, mobile: 230 },
-  { date: "2024-04-24", desktop: 387, mobile: 290 },
-  { date: "2024-04-25", desktop: 215, mobile: 250 },
-  { date: "2024-04-26", desktop: 75, mobile: 130 },
-  { date: "2024-04-27", desktop: 383, mobile: 420 },
-  { date: "2024-04-28", desktop: 122, mobile: 180 },
-  { date: "2024-04-29", desktop: 315, mobile: 240 },
-  { date: "2024-04-30", desktop: 454, mobile: 380 },
-  { date: "2024-05-01", desktop: 165, mobile: 220 },
-  { date: "2024-05-02", desktop: 293, mobile: 310 },
-  { date: "2024-05-03", desktop: 247, mobile: 190 },
-  { date: "2024-05-04", desktop: 385, mobile: 420 },
-  { date: "2024-05-05", desktop: 481, mobile: 390 },
-  { date: "2024-05-06", desktop: 498, mobile: 520 },
-  { date: "2024-05-07", desktop: 388, mobile: 300 },
-  { date: "2024-05-08", desktop: 149, mobile: 210 },
-  { date: "2024-05-09", desktop: 227, mobile: 180 },
-  { date: "2024-05-10", desktop: 293, mobile: 330 },
-  { date: "2024-05-11", desktop: 335, mobile: 270 },
-  { date: "2024-05-12", desktop: 197, mobile: 240 },
-  { date: "2024-05-13", desktop: 197, mobile: 160 },
-  { date: "2024-05-14", desktop: 448, mobile: 490 },
-  { date: "2024-05-15", desktop: 473, mobile: 380 },
-  { date: "2024-05-16", desktop: 338, mobile: 400 },
-  { date: "2024-05-17", desktop: 499, mobile: 420 },
-  { date: "2024-05-18", desktop: 315, mobile: 350 },
-  { date: "2024-05-19", desktop: 235, mobile: 180 },
-  { date: "2024-05-20", desktop: 177, mobile: 230 },
-  { date: "2024-05-21", desktop: 82, mobile: 140 },
-  { date: "2024-05-22", desktop: 81, mobile: 120 },
-  { date: "2024-05-23", desktop: 252, mobile: 290 },
-  { date: "2024-05-24", desktop: 294, mobile: 220 },
-  { date: "2024-05-25", desktop: 201, mobile: 250 },
-  { date: "2024-05-26", desktop: 213, mobile: 170 },
-  { date: "2024-05-27", desktop: 420, mobile: 460 },
-  { date: "2024-05-28", desktop: 233, mobile: 190 },
-  { date: "2024-05-29", desktop: 78, mobile: 130 },
-  { date: "2024-05-30", desktop: 340, mobile: 280 },
-  { date: "2024-05-31", desktop: 178, mobile: 230 },
-  { date: "2024-06-01", desktop: 178, mobile: 200 },
-  { date: "2024-06-02", desktop: 470, mobile: 410 },
-  { date: "2024-06-03", desktop: 103, mobile: 160 },
-  { date: "2024-06-04", desktop: 439, mobile: 380 },
-  { date: "2024-06-05", desktop: 88, mobile: 140 },
-  { date: "2024-06-06", desktop: 294, mobile: 250 },
-  { date: "2024-06-07", desktop: 323, mobile: 370 },
-  { date: "2024-06-08", desktop: 385, mobile: 320 },
-  { date: "2024-06-09", desktop: 438, mobile: 480 },
-  { date: "2024-06-10", desktop: 155, mobile: 200 },
-  { date: "2024-06-11", desktop: 92, mobile: 150 },
-  { date: "2024-06-12", desktop: 492, mobile: 420 },
-  { date: "2024-06-13", desktop: 81, mobile: 130 },
-  { date: "2024-06-14", desktop: 426, mobile: 380 },
-  { date: "2024-06-15", desktop: 307, mobile: 350 },
-  { date: "2024-06-16", desktop: 371, mobile: 310 },
-  { date: "2024-06-17", desktop: 475, mobile: 520 },
-  { date: "2024-06-18", desktop: 107, mobile: 170 },
-  { date: "2024-06-19", desktop: 341, mobile: 290 },
-  { date: "2024-06-20", desktop: 408, mobile: 450 },
-  { date: "2024-06-21", desktop: 169, mobile: 210 },
-  { date: "2024-06-22", desktop: 317, mobile: 270 },
-  { date: "2024-06-23", desktop: 480, mobile: 530 },
-  { date: "2024-06-24", desktop: 132, mobile: 180 },
-  { date: "2024-06-25", desktop: 141, mobile: 190 },
-  { date: "2024-06-26", desktop: 434, mobile: 380 },
-  { date: "2024-06-27", desktop: 448, mobile: 490 },
-  { date: "2024-06-28", desktop: 149, mobile: 200 },
-  { date: "2024-06-29", desktop: 103, mobile: 160 },
-  { date: "2024-06-30", desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  desktop: {
-    label: "Desktop",
-    color: "hsl(var(--chart-1))",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  const [timeRange, setTimeRange] = React.useState("90d")
-
-  const filteredData = chartData.filter((item) => {
-    const date = new Date(item.date)
-    const now = new Date()
-    let daysToSubtract = 90
-    if (timeRange === "30d") {
-      daysToSubtract = 30
-    } else if (timeRange === "7d") {
-      daysToSubtract = 7
-    }
-    now.setDate(now.getDate() - daysToSubtract)
-    return date >= now
-  })
-
-  return (
-    <Card>
-      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
-        <div className="grid flex-1 gap-1 text-center sm:text-left">
-          <CardTitle>Area Chart - Interactive</CardTitle>
-          <CardDescription>
-            Showing total visitors for the last 3 months
-          </CardDescription>
-        </div>
-        <Select value={timeRange} onValueChange={setTimeRange}>
-          <SelectTrigger
-            className="w-[160px] rounded-lg sm:ml-auto"
-            aria-label="Select a value"
-          >
-            <SelectValue placeholder="Last 3 months" />
-          </SelectTrigger>
-          <SelectContent className="rounded-xl">
-            <SelectItem value="90d" className="rounded-lg">
-              Last 3 months
-            </SelectItem>
-            <SelectItem value="30d" className="rounded-lg">
-              Last 30 days
-            </SelectItem>
-            <SelectItem value="7d" className="rounded-lg">
-              Last 7 days
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </CardHeader>
-      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
-        <ChartContainer
-          config={chartConfig}
-          className="aspect-auto h-[250px] w-full"
-        >
-          <AreaChart data={filteredData}>
-            <defs>
-              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-            </defs>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              minTickGap={32}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                return date.toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                })
-              }}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={
-                <ChartTooltipContent
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }}
-                  indicator="dot"
-                />
-              }
-            />
-            <Area
-              dataKey="mobile"
-              type="natural"
-              fill="url(#fillMobile)"
-              stroke="var(--color-mobile)"
-              stackId="a"
-            />
-            <Area
-              dataKey="desktop"
-              type="natural"
-              fill="url(#fillDesktop)"
-              stroke="var(--color-desktop)"
-              stackId="a"
-            />
-            <ChartLegend content={<ChartLegendContent />} />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/__registry__/default/block/chart-pie-label-custom.tsx b/apps/www/__registry__/default/block/chart-pie-label-custom.tsx
deleted file mode 100644
index 647712d505b..00000000000
--- a/apps/www/__registry__/default/block/chart-pie-label-custom.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client"
-
-import { TrendingUp } from "lucide-react"
-import { Pie, PieChart } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-
-export const description = "A pie chart with a custom label"
-
-const chartData = [
-  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
-  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
-  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-  { browser: "other", visitors: 90, fill: "var(--color-other)" },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  chrome: {
-    label: "Chrome",
-    color: "hsl(var(--chart-1))",
-  },
-  safari: {
-    label: "Safari",
-    color: "hsl(var(--chart-2))",
-  },
-  firefox: {
-    label: "Firefox",
-    color: "hsl(var(--chart-3))",
-  },
-  edge: {
-    label: "Edge",
-    color: "hsl(var(--chart-4))",
-  },
-  other: {
-    label: "Other",
-    color: "hsl(var(--chart-5))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card className="flex flex-col">
-      <CardHeader className="items-center pb-0">
-        <CardTitle>Pie Chart - Custom Label</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent className="flex-1 pb-0">
-        <ChartContainer
-          config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
-        >
-          <PieChart>
-            <ChartTooltip
-              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
-            />
-            <Pie
-              data={chartData}
-              dataKey="visitors"
-              labelLine={false}
-              label={({ payload, ...props }) => {
-                return (
-                  <text
-                    cx={props.cx}
-                    cy={props.cy}
-                    x={props.x}
-                    y={props.y}
-                    textAnchor={props.textAnchor}
-                    dominantBaseline={props.dominantBaseline}
-                    fill="hsla(var(--foreground))"
-                  >
-                    {`${
-                      chartConfig[payload.browser as keyof typeof chartConfig]
-                        ?.label
-                    } (${payload.visitors})`}
-                  </text>
-                )
-              }}
-              nameKey="browser"
-            />
-          </PieChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col gap-2 text-sm">
-        <div className="flex items-center gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-        </div>
-        <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/__registry__/default/block/chart-pie-label-list.tsx b/apps/www/__registry__/default/block/chart-pie-label-list.tsx
deleted file mode 100644
index fa5f0038ce6..00000000000
--- a/apps/www/__registry__/default/block/chart-pie-label-list.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client"
-
-import { TrendingUp } from "lucide-react"
-import { LabelList, Pie, PieChart } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-
-export const description = "A pie chart with a label list"
-
-const chartData = [
-  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
-  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
-  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-  { browser: "other", visitors: 90, fill: "var(--color-other)" },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  chrome: {
-    label: "Chrome",
-    color: "hsl(var(--chart-1))",
-  },
-  safari: {
-    label: "Safari",
-    color: "hsl(var(--chart-2))",
-  },
-  firefox: {
-    label: "Firefox",
-    color: "hsl(var(--chart-3))",
-  },
-  edge: {
-    label: "Edge",
-    color: "hsl(var(--chart-4))",
-  },
-  other: {
-    label: "Other",
-    color: "hsl(var(--chart-5))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card className="flex flex-col">
-      <CardHeader className="items-center pb-0">
-        <CardTitle>Pie Chart - Label List</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent className="flex-1 pb-0">
-        <ChartContainer
-          config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
-        >
-          <PieChart>
-            <ChartTooltip
-              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
-            />
-            <Pie data={chartData} dataKey="visitors">
-              <LabelList
-                dataKey="browser"
-                className="fill-background"
-                stroke="none"
-                fontSize={12}
-                formatter={(value: keyof typeof chartConfig) =>
-                  chartConfig[value]?.label
-                }
-              />
-            </Pie>
-          </PieChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col gap-2 text-sm">
-        <div className="flex items-center gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-        </div>
-        <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/__registry__/default/block/chart-tooltip-default.tsx b/apps/www/__registry__/default/block/chart-tooltip-default.tsx
deleted file mode 100644
index a4951569374..00000000000
--- a/apps/www/__registry__/default/block/chart-tooltip-default.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-
-export const description = "A stacked bar chart with a legend"
-
-const chartData = [
-  { date: "2024-07-15", running: 450, swimming: 300 },
-  { date: "2024-07-16", running: 380, swimming: 420 },
-  { date: "2024-07-17", running: 520, swimming: 120 },
-  { date: "2024-07-18", running: 140, swimming: 550 },
-  { date: "2024-07-19", running: 600, swimming: 350 },
-  { date: "2024-07-20", running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-  running: {
-    label: "Running",
-    color: "hsl(var(--chart-1))",
-  },
-  swimming: {
-    label: "Swimming",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Tooltip - Default</CardTitle>
-        <CardDescription>
-          Default tooltip with ChartTooltipContent.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <BarChart accessibilityLayer data={chartData}>
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <Bar
-              dataKey="running"
-              stackId="a"
-              fill="var(--color-running)"
-              radius={[0, 0, 4, 4]}
-            />
-            <Bar
-              dataKey="swimming"
-              stackId="a"
-              fill="var(--color-swimming)"
-              radius={[4, 4, 0, 0]}
-            />
-            <ChartTooltip
-              content={<ChartTooltipContent />}
-              cursor={false}
-              defaultIndex={1}
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/__registry__/default/block/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/default/block/chart-tooltip-indicator-line.tsx
deleted file mode 100644
index c5cc9a676dc..00000000000
--- a/apps/www/__registry__/default/block/chart-tooltip-indicator-line.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-
-export const description = "A stacked bar chart with a legend"
-
-const chartData = [
-  { date: "2024-07-15", running: 450, swimming: 300 },
-  { date: "2024-07-16", running: 380, swimming: 420 },
-  { date: "2024-07-17", running: 520, swimming: 120 },
-  { date: "2024-07-18", running: 140, swimming: 550 },
-  { date: "2024-07-19", running: 600, swimming: 350 },
-  { date: "2024-07-20", running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-  running: {
-    label: "Running",
-    color: "hsl(var(--chart-1))",
-  },
-  swimming: {
-    label: "Swimming",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Tooltip - Line Indicator</CardTitle>
-        <CardDescription>Tooltip with line indicator.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <BarChart accessibilityLayer data={chartData}>
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <Bar
-              dataKey="running"
-              stackId="a"
-              fill="var(--color-running)"
-              radius={[0, 0, 4, 4]}
-            />
-            <Bar
-              dataKey="swimming"
-              stackId="a"
-              fill="var(--color-swimming)"
-              radius={[4, 4, 0, 0]}
-            />
-            <ChartTooltip
-              content={<ChartTooltipContent indicator="line" />}
-              cursor={false}
-              defaultIndex={1}
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/__registry__/default/block/charts-01.tsx b/apps/www/__registry__/default/block/charts-01.tsx
deleted file mode 100644
index 806272513be..00000000000
--- a/apps/www/__registry__/default/block/charts-01.tsx
+++ /dev/null
@@ -1,871 +0,0 @@
-"use client"
-
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Label,
-  LabelList,
-  Line,
-  LineChart,
-  PolarAngleAxis,
-  RadialBar,
-  RadialBarChart,
-  Rectangle,
-  ReferenceLine,
-  XAxis,
-  YAxis,
-} from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-import { Separator } from "@/registry/default/ui/separator"
-
-export const description = "A collection of health charts."
-
-export const iframeHeight = "900px"
-
-export const containerClassName = "min-h-screen py-12"
-
-export default function Charts() {
-  return (
-    <div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
-      <div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
-        <Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
-          <CardHeader className="space-y-0 pb-2">
-            <CardDescription>Today</CardDescription>
-            <CardTitle className="text-4xl tabular-nums">
-              12,584{" "}
-              <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-                steps
-              </span>
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ChartContainer
-              config={{
-                steps: {
-                  label: "Steps",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-            >
-              <BarChart
-                accessibilityLayer
-                margin={{
-                  left: -4,
-                  right: -4,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    steps: 2000,
-                  },
-                  {
-                    date: "2024-01-02",
-                    steps: 2100,
-                  },
-                  {
-                    date: "2024-01-03",
-                    steps: 2200,
-                  },
-                  {
-                    date: "2024-01-04",
-                    steps: 1300,
-                  },
-                  {
-                    date: "2024-01-05",
-                    steps: 1400,
-                  },
-                  {
-                    date: "2024-01-06",
-                    steps: 2500,
-                  },
-                  {
-                    date: "2024-01-07",
-                    steps: 1600,
-                  },
-                ]}
-              >
-                <Bar
-                  dataKey="steps"
-                  fill="var(--color-steps)"
-                  radius={5}
-                  fillOpacity={0.6}
-                  activeBar={<Rectangle fillOpacity={0.8} />}
-                />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={4}
-                  tickFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      weekday: "short",
-                    })
-                  }}
-                />
-                <ChartTooltip
-                  defaultIndex={2}
-                  content={
-                    <ChartTooltipContent
-                      hideIndicator
-                      labelFormatter={(value) => {
-                        return new Date(value).toLocaleDateString("en-US", {
-                          day: "numeric",
-                          month: "long",
-                          year: "numeric",
-                        })
-                      }}
-                    />
-                  }
-                  cursor={false}
-                />
-                <ReferenceLine
-                  y={1200}
-                  stroke="hsl(var(--muted-foreground))"
-                  strokeDasharray="3 3"
-                  strokeWidth={1}
-                >
-                  <Label
-                    position="insideBottomLeft"
-                    value="Average Steps"
-                    offset={10}
-                    fill="hsl(var(--foreground))"
-                  />
-                  <Label
-                    position="insideTopLeft"
-                    value="12,343"
-                    className="text-lg"
-                    fill="hsl(var(--foreground))"
-                    offset={10}
-                    startOffset={100}
-                  />
-                </ReferenceLine>
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-          <CardFooter className="flex-col items-start gap-1">
-            <CardDescription>
-              Over the past 7 days, you have walked{" "}
-              <span className="font-medium text-foreground">53,305</span> steps.
-            </CardDescription>
-            <CardDescription>
-              You need{" "}
-              <span className="font-medium text-foreground">12,584</span> more
-              steps to reach your goal.
-            </CardDescription>
-          </CardFooter>
-        </Card>
-        <Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
-          <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
-            <div>
-              <CardDescription>Resting HR</CardDescription>
-              <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                62
-                <span className="text-sm font-normal tracking-normal text-muted-foreground">
-                  bpm
-                </span>
-              </CardTitle>
-            </div>
-            <div>
-              <CardDescription>Variability</CardDescription>
-              <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                35
-                <span className="text-sm font-normal tracking-normal text-muted-foreground">
-                  ms
-                </span>
-              </CardTitle>
-            </div>
-          </CardHeader>
-          <CardContent className="flex flex-1 items-center">
-            <ChartContainer
-              config={{
-                resting: {
-                  label: "Resting",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-              className="w-full"
-            >
-              <LineChart
-                accessibilityLayer
-                margin={{
-                  left: 14,
-                  right: 14,
-                  top: 10,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    resting: 62,
-                  },
-                  {
-                    date: "2024-01-02",
-                    resting: 72,
-                  },
-                  {
-                    date: "2024-01-03",
-                    resting: 35,
-                  },
-                  {
-                    date: "2024-01-04",
-                    resting: 62,
-                  },
-                  {
-                    date: "2024-01-05",
-                    resting: 52,
-                  },
-                  {
-                    date: "2024-01-06",
-                    resting: 62,
-                  },
-                  {
-                    date: "2024-01-07",
-                    resting: 70,
-                  },
-                ]}
-              >
-                <CartesianGrid
-                  strokeDasharray="4 4"
-                  vertical={false}
-                  stroke="hsl(var(--muted-foreground))"
-                  strokeOpacity={0.5}
-                />
-                <YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={8}
-                  tickFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      weekday: "short",
-                    })
-                  }}
-                />
-                <Line
-                  dataKey="resting"
-                  type="natural"
-                  fill="var(--color-resting)"
-                  stroke="var(--color-resting)"
-                  strokeWidth={2}
-                  dot={false}
-                  activeDot={{
-                    fill: "var(--color-resting)",
-                    stroke: "var(--color-resting)",
-                    r: 4,
-                  }}
-                />
-                <ChartTooltip
-                  content={
-                    <ChartTooltipContent
-                      indicator="line"
-                      labelFormatter={(value) => {
-                        return new Date(value).toLocaleDateString("en-US", {
-                          day: "numeric",
-                          month: "long",
-                          year: "numeric",
-                        })
-                      }}
-                    />
-                  }
-                  cursor={false}
-                />
-              </LineChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-      </div>
-      <div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-2">
-          <CardHeader>
-            <CardTitle>Progress</CardTitle>
-            <CardDescription>
-              You're average more steps a day this year than last year.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="grid gap-4">
-            <div className="grid auto-rows-min gap-2">
-              <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                12,453
-                <span className="text-sm font-normal text-muted-foreground">
-                  steps/day
-                </span>
-              </div>
-              <ChartContainer
-                config={{
-                  steps: {
-                    label: "Steps",
-                    color: "hsl(var(--chart-1))",
-                  },
-                }}
-                className="aspect-auto h-[32px] w-full"
-              >
-                <BarChart
-                  accessibilityLayer
-                  layout="vertical"
-                  margin={{
-                    left: 0,
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                  }}
-                  data={[
-                    {
-                      date: "2024",
-                      steps: 12435,
-                    },
-                  ]}
-                >
-                  <Bar
-                    dataKey="steps"
-                    fill="var(--color-steps)"
-                    radius={4}
-                    barSize={32}
-                  >
-                    <LabelList
-                      position="insideLeft"
-                      dataKey="date"
-                      offset={8}
-                      fontSize={12}
-                      fill="white"
-                    />
-                  </Bar>
-                  <YAxis dataKey="date" type="category" tickCount={1} hide />
-                  <XAxis dataKey="steps" type="number" hide />
-                </BarChart>
-              </ChartContainer>
-            </div>
-            <div className="grid auto-rows-min gap-2">
-              <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                10,103
-                <span className="text-sm font-normal text-muted-foreground">
-                  steps/day
-                </span>
-              </div>
-              <ChartContainer
-                config={{
-                  steps: {
-                    label: "Steps",
-                    color: "hsl(var(--muted))",
-                  },
-                }}
-                className="aspect-auto h-[32px] w-full"
-              >
-                <BarChart
-                  accessibilityLayer
-                  layout="vertical"
-                  margin={{
-                    left: 0,
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                  }}
-                  data={[
-                    {
-                      date: "2023",
-                      steps: 10103,
-                    },
-                  ]}
-                >
-                  <Bar
-                    dataKey="steps"
-                    fill="var(--color-steps)"
-                    radius={4}
-                    barSize={32}
-                  >
-                    <LabelList
-                      position="insideLeft"
-                      dataKey="date"
-                      offset={8}
-                      fontSize={12}
-                      fill="hsl(var(--muted-foreground))"
-                    />
-                  </Bar>
-                  <YAxis dataKey="date" type="category" tickCount={1} hide />
-                  <XAxis dataKey="steps" type="number" hide />
-                </BarChart>
-              </ChartContainer>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-3">
-          <CardHeader className="p-4 pb-0">
-            <CardTitle>Walking Distance</CardTitle>
-            <CardDescription>
-              Over the last 7 days, your distance walked and run was 12.5 miles
-              per day.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
-            <div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
-              12.5
-              <span className="text-sm font-normal text-muted-foreground">
-                miles/day
-              </span>
-            </div>
-            <ChartContainer
-              config={{
-                steps: {
-                  label: "Steps",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-              className="ml-auto w-[72px]"
-            >
-              <BarChart
-                accessibilityLayer
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 0,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    steps: 2000,
-                  },
-                  {
-                    date: "2024-01-02",
-                    steps: 2100,
-                  },
-                  {
-                    date: "2024-01-03",
-                    steps: 2200,
-                  },
-                  {
-                    date: "2024-01-04",
-                    steps: 1300,
-                  },
-                  {
-                    date: "2024-01-05",
-                    steps: 1400,
-                  },
-                  {
-                    date: "2024-01-06",
-                    steps: 2500,
-                  },
-                  {
-                    date: "2024-01-07",
-                    steps: 1600,
-                  },
-                ]}
-              >
-                <Bar
-                  dataKey="steps"
-                  fill="var(--color-steps)"
-                  radius={2}
-                  fillOpacity={0.2}
-                  activeIndex={6}
-                  activeBar={<Rectangle fillOpacity={0.8} />}
-                />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={4}
-                  hide
-                />
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-4">
-          <CardContent className="flex gap-4 p-4 pb-2">
-            <ChartContainer
-              config={{
-                move: {
-                  label: "Move",
-                  color: "hsl(var(--chart-1))",
-                },
-                stand: {
-                  label: "Stand",
-                  color: "hsl(var(--chart-2))",
-                },
-                exercise: {
-                  label: "Exercise",
-                  color: "hsl(var(--chart-3))",
-                },
-              }}
-              className="h-[140px] w-full"
-            >
-              <BarChart
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 10,
-                }}
-                data={[
-                  {
-                    activity: "stand",
-                    value: (8 / 12) * 100,
-                    label: "8/12 hr",
-                    fill: "var(--color-stand)",
-                  },
-                  {
-                    activity: "exercise",
-                    value: (46 / 60) * 100,
-                    label: "46/60 min",
-                    fill: "var(--color-exercise)",
-                  },
-                  {
-                    activity: "move",
-                    value: (245 / 360) * 100,
-                    label: "245/360 kcal",
-                    fill: "var(--color-move)",
-                  },
-                ]}
-                layout="vertical"
-                barSize={32}
-                barGap={2}
-              >
-                <XAxis type="number" dataKey="value" hide />
-                <YAxis
-                  dataKey="activity"
-                  type="category"
-                  tickLine={false}
-                  tickMargin={4}
-                  axisLine={false}
-                  className="capitalize"
-                />
-                <Bar dataKey="value" radius={5}>
-                  <LabelList
-                    position="insideLeft"
-                    dataKey="label"
-                    fill="white"
-                    offset={8}
-                    fontSize={12}
-                  />
-                </Bar>
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-          <CardFooter className="flex flex-row border-t p-4">
-            <div className="flex w-full items-center gap-2">
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-xs text-muted-foreground">Move</div>
-                <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  562
-                  <span className="text-sm font-normal text-muted-foreground">
-                    kcal
-                  </span>
-                </div>
-              </div>
-              <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-xs text-muted-foreground">Exercise</div>
-                <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  73
-                  <span className="text-sm font-normal text-muted-foreground">
-                    min
-                  </span>
-                </div>
-              </div>
-              <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-xs text-muted-foreground">Stand</div>
-                <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  14
-                  <span className="text-sm font-normal text-muted-foreground">
-                    hr
-                  </span>
-                </div>
-              </div>
-            </div>
-          </CardFooter>
-        </Card>
-      </div>
-      <div className="grid w-full flex-1 gap-6">
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-5">
-          <CardContent className="flex gap-4 p-4">
-            <div className="grid items-center gap-2">
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-sm text-muted-foreground">Move</div>
-                <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                  562/600
-                  <span className="text-sm font-normal text-muted-foreground">
-                    kcal
-                  </span>
-                </div>
-              </div>
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-sm text-muted-foreground">Exercise</div>
-                <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                  73/120
-                  <span className="text-sm font-normal text-muted-foreground">
-                    min
-                  </span>
-                </div>
-              </div>
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-sm text-muted-foreground">Stand</div>
-                <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                  8/12
-                  <span className="text-sm font-normal text-muted-foreground">
-                    hr
-                  </span>
-                </div>
-              </div>
-            </div>
-            <ChartContainer
-              config={{
-                move: {
-                  label: "Move",
-                  color: "hsl(var(--chart-1))",
-                },
-                exercise: {
-                  label: "Exercise",
-                  color: "hsl(var(--chart-2))",
-                },
-                stand: {
-                  label: "Stand",
-                  color: "hsl(var(--chart-3))",
-                },
-              }}
-              className="mx-auto aspect-square w-full max-w-[80%]"
-            >
-              <RadialBarChart
-                margin={{
-                  left: -10,
-                  right: -10,
-                  top: -10,
-                  bottom: -10,
-                }}
-                data={[
-                  {
-                    activity: "stand",
-                    value: (8 / 12) * 100,
-                    fill: "var(--color-stand)",
-                  },
-                  {
-                    activity: "exercise",
-                    value: (46 / 60) * 100,
-                    fill: "var(--color-exercise)",
-                  },
-                  {
-                    activity: "move",
-                    value: (245 / 360) * 100,
-                    fill: "var(--color-move)",
-                  },
-                ]}
-                innerRadius="20%"
-                barSize={24}
-                startAngle={90}
-                endAngle={450}
-              >
-                <PolarAngleAxis
-                  type="number"
-                  domain={[0, 100]}
-                  dataKey="value"
-                  tick={false}
-                />
-                <RadialBar dataKey="value" background cornerRadius={5} />
-              </RadialBarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-6">
-          <CardHeader className="p-4 pb-0">
-            <CardTitle>Active Energy</CardTitle>
-            <CardDescription>
-              You're burning an average of 754 calories per day. Good job!
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
-            <div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
-              1,254
-              <span className="text-sm font-normal text-muted-foreground">
-                kcal/day
-              </span>
-            </div>
-            <ChartContainer
-              config={{
-                calories: {
-                  label: "Calories",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-              className="ml-auto w-[64px]"
-            >
-              <BarChart
-                accessibilityLayer
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 0,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    calories: 354,
-                  },
-                  {
-                    date: "2024-01-02",
-                    calories: 514,
-                  },
-                  {
-                    date: "2024-01-03",
-                    calories: 345,
-                  },
-                  {
-                    date: "2024-01-04",
-                    calories: 734,
-                  },
-                  {
-                    date: "2024-01-05",
-                    calories: 645,
-                  },
-                  {
-                    date: "2024-01-06",
-                    calories: 456,
-                  },
-                  {
-                    date: "2024-01-07",
-                    calories: 345,
-                  },
-                ]}
-              >
-                <Bar
-                  dataKey="calories"
-                  fill="var(--color-calories)"
-                  radius={2}
-                  fillOpacity={0.2}
-                  activeIndex={6}
-                  activeBar={<Rectangle fillOpacity={0.8} />}
-                />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={4}
-                  hide
-                />
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-7">
-          <CardHeader className="space-y-0 pb-0">
-            <CardDescription>Time in Bed</CardDescription>
-            <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-              8
-              <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-                hr
-              </span>
-              35
-              <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-                min
-              </span>
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-0">
-            <ChartContainer
-              config={{
-                time: {
-                  label: "Time",
-                  color: "hsl(var(--chart-2))",
-                },
-              }}
-            >
-              <AreaChart
-                accessibilityLayer
-                data={[
-                  {
-                    date: "2024-01-01",
-                    time: 8.5,
-                  },
-                  {
-                    date: "2024-01-02",
-                    time: 7.2,
-                  },
-                  {
-                    date: "2024-01-03",
-                    time: 8.1,
-                  },
-                  {
-                    date: "2024-01-04",
-                    time: 6.2,
-                  },
-                  {
-                    date: "2024-01-05",
-                    time: 5.2,
-                  },
-                  {
-                    date: "2024-01-06",
-                    time: 8.1,
-                  },
-                  {
-                    date: "2024-01-07",
-                    time: 7.0,
-                  },
-                ]}
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 0,
-                }}
-              >
-                <XAxis dataKey="date" hide />
-                <YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
-                <defs>
-                  <linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
-                    <stop
-                      offset="5%"
-                      stopColor="var(--color-time)"
-                      stopOpacity={0.8}
-                    />
-                    <stop
-                      offset="95%"
-                      stopColor="var(--color-time)"
-                      stopOpacity={0.1}
-                    />
-                  </linearGradient>
-                </defs>
-                <Area
-                  dataKey="time"
-                  type="natural"
-                  fill="url(#fillTime)"
-                  fillOpacity={0.4}
-                  stroke="var(--color-time)"
-                />
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent hideLabel />}
-                  formatter={(value) => (
-                    <div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
-                      Time in bed
-                      <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
-                        {value}
-                        <span className="font-normal text-muted-foreground">
-                          hr
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                />
-              </AreaChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/default/block/dashboard-01.tsx b/apps/www/__registry__/default/block/dashboard-01.tsx
deleted file mode 100644
index 74bc72a8cde..00000000000
--- a/apps/www/__registry__/default/block/dashboard-01.tsx
+++ /dev/null
@@ -1,455 +0,0 @@
-import Link from "next/link"
-import {
-  Activity,
-  ArrowUpRight,
-  CircleUser,
-  CreditCard,
-  DollarSign,
-  Menu,
-  Package2,
-  Search,
-  Users,
-} from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-import { Badge } from "@/registry/default/ui/badge"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-
-export const description =
-  "An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image."
-
-export const iframeHeight = "825px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col">
-      <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
-        <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-          <Link
-            href="#"
-            className="flex items-center gap-2 text-lg font-semibold md:text-base"
-          >
-            <Package2 className="h-6 w-6" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Link
-            href="#"
-            className="text-foreground transition-colors hover:text-foreground"
-          >
-            Dashboard
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Orders
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Products
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Customers
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Analytics
-          </Link>
-        </nav>
-        <Sheet>
-          <SheetTrigger asChild>
-            <Button
-              variant="outline"
-              size="icon"
-              className="shrink-0 md:hidden"
-            >
-              <Menu className="h-5 w-5" />
-              <span className="sr-only">Toggle navigation menu</span>
-            </Button>
-          </SheetTrigger>
-          <SheetContent side="left">
-            <nav className="grid gap-6 text-lg font-medium">
-              <Link
-                href="#"
-                className="flex items-center gap-2 text-lg font-semibold"
-              >
-                <Package2 className="h-6 w-6" />
-                <span className="sr-only">Acme Inc</span>
-              </Link>
-              <Link href="#" className="hover:text-foreground">
-                Dashboard
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Orders
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Products
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Customers
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Analytics
-              </Link>
-            </nav>
-          </SheetContent>
-        </Sheet>
-        <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
-          <form className="ml-auto flex-1 sm:flex-initial">
-            <div className="relative">
-              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input
-                type="search"
-                placeholder="Search products..."
-                className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
-              />
-            </div>
-          </form>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" size="icon" className="rounded-full">
-                <CircleUser className="h-5 w-5" />
-                <span className="sr-only">Toggle user menu</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </header>
-      <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
-        <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-          <Card x-chunk="dashboard-01-chunk-0">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Total Revenue
-              </CardTitle>
-              <DollarSign className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">$45,231.89</div>
-              <p className="text-xs text-muted-foreground">
-                +20.1% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card x-chunk="dashboard-01-chunk-1">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Subscriptions
-              </CardTitle>
-              <Users className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">+2350</div>
-              <p className="text-xs text-muted-foreground">
-                +180.1% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card x-chunk="dashboard-01-chunk-2">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Sales</CardTitle>
-              <CreditCard className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">+12,234</div>
-              <p className="text-xs text-muted-foreground">
-                +19% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card x-chunk="dashboard-01-chunk-3">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-              <Activity className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">+573</div>
-              <p className="text-xs text-muted-foreground">
-                +201 since last hour
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-        <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-          <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
-            <CardHeader className="flex flex-row items-center">
-              <div className="grid gap-2">
-                <CardTitle>Transactions</CardTitle>
-                <CardDescription>
-                  Recent transactions from your store.
-                </CardDescription>
-              </div>
-              <Button asChild size="sm" className="ml-auto gap-1">
-                <Link href="#">
-                  View All
-                  <ArrowUpRight className="h-4 w-4" />
-                </Link>
-              </Button>
-            </CardHeader>
-            <CardContent>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Customer</TableHead>
-                    <TableHead className="hidden xl:table-column">
-                      Type
-                    </TableHead>
-                    <TableHead className="hidden xl:table-column">
-                      Status
-                    </TableHead>
-                    <TableHead className="hidden xl:table-column">
-                      Date
-                    </TableHead>
-                    <TableHead className="text-right">Amount</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Liam Johnson</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        liam@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Sale
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-23
-                    </TableCell>
-                    <TableCell className="text-right">$250.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Olivia Smith</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        olivia@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Refund
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Declined
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-24
-                    </TableCell>
-                    <TableCell className="text-right">$150.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Noah Williams</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        noah@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Subscription
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-25
-                    </TableCell>
-                    <TableCell className="text-right">$350.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Emma Brown</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        emma@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Sale
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-26
-                    </TableCell>
-                    <TableCell className="text-right">$450.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Liam Johnson</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        liam@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Sale
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-27
-                    </TableCell>
-                    <TableCell className="text-right">$550.00</TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-          <Card x-chunk="dashboard-01-chunk-5">
-            <CardHeader>
-              <CardTitle>Recent Sales</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-8">
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/01.png" alt="Avatar" />
-                  <AvatarFallback>OM</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Olivia Martin
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    olivia.martin@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$1,999.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/02.png" alt="Avatar" />
-                  <AvatarFallback>JL</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Jackson Lee
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    jackson.lee@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$39.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/03.png" alt="Avatar" />
-                  <AvatarFallback>IN</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Isabella Nguyen
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    isabella.nguyen@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$299.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/04.png" alt="Avatar" />
-                  <AvatarFallback>WK</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    William Kim
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    will@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$99.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/05.png" alt="Avatar" />
-                  <AvatarFallback>SD</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Sofia Davis
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    sofia.davis@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$39.00</div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </main>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/default/block/dashboard-02.tsx b/apps/www/__registry__/default/block/dashboard-02.tsx
deleted file mode 100644
index 10e217352a4..00000000000
--- a/apps/www/__registry__/default/block/dashboard-02.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import Link from "next/link"
-import {
-  Bell,
-  CircleUser,
-  Home,
-  LineChart,
-  Menu,
-  Package,
-  Package2,
-  Search,
-  ShoppingCart,
-  Users,
-} from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-
-export const description =
-  "A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action."
-
-export const iframeHeight = "800px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-      <div className="hidden border-r bg-muted/40 md:block">
-        <div className="flex h-full max-h-screen flex-col gap-2">
-          <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
-            <Link href="/" className="flex items-center gap-2 font-semibold">
-              <Package2 className="h-6 w-6" />
-              <span className="">Acme Inc</span>
-            </Link>
-            <Button variant="outline" size="icon" className="ml-auto h-8 w-8">
-              <Bell className="h-4 w-4" />
-              <span className="sr-only">Toggle notifications</span>
-            </Button>
-          </div>
-          <div className="flex-1">
-            <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <Home className="h-4 w-4" />
-                Dashboard
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <ShoppingCart className="h-4 w-4" />
-                Orders
-                <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
-                  6
-                </Badge>
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
-              >
-                <Package className="h-4 w-4" />
-                Products{" "}
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <Users className="h-4 w-4" />
-                Customers
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <LineChart className="h-4 w-4" />
-                Analytics
-              </Link>
-            </nav>
-          </div>
-          <div className="mt-auto p-4">
-            <Card x-chunk="dashboard-02-chunk-0">
-              <CardHeader className="p-2 pt-0 md:p-4">
-                <CardTitle>Upgrade to Pro</CardTitle>
-                <CardDescription>
-                  Unlock all features and get unlimited access to our support
-                  team.
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
-                <Button size="sm" className="w-full">
-                  Upgrade
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-col">
-        <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="shrink-0 md:hidden"
-              >
-                <Menu className="h-5 w-5" />
-                <span className="sr-only">Toggle navigation menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="flex flex-col">
-              <nav className="grid gap-2 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="flex items-center gap-2 text-lg font-semibold"
-                >
-                  <Package2 className="h-6 w-6" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                  <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
-                    6
-                  </Badge>
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <Users className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Analytics
-                </Link>
-              </nav>
-              <div className="mt-auto">
-                <Card>
-                  <CardHeader>
-                    <CardTitle>Upgrade to Pro</CardTitle>
-                    <CardDescription>
-                      Unlock all features and get unlimited access to our
-                      support team.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Button size="sm" className="w-full">
-                      Upgrade
-                    </Button>
-                  </CardContent>
-                </Card>
-              </div>
-            </SheetContent>
-          </Sheet>
-          <div className="w-full flex-1">
-            <form>
-              <div className="relative">
-                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-                <Input
-                  type="search"
-                  placeholder="Search products..."
-                  className="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
-                />
-              </div>
-            </form>
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" size="icon" className="rounded-full">
-                <CircleUser className="h-5 w-5" />
-                <span className="sr-only">Toggle user menu</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
-          <div className="flex items-center">
-            <h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
-          </div>
-          <div
-            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-            x-chunk="dashboard-02-chunk-1"
-          >
-            <div className="flex flex-col items-center gap-1 text-center">
-              <h3 className="text-2xl font-bold tracking-tight">
-                You have no products
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                You can start selling as soon as you add a product.
-              </p>
-              <Button className="mt-4">Add Product</Button>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/default/block/dashboard-03.tsx b/apps/www/__registry__/default/block/dashboard-03.tsx
deleted file mode 100644
index ea89e0e67a9..00000000000
--- a/apps/www/__registry__/default/block/dashboard-03.tsx
+++ /dev/null
@@ -1,464 +0,0 @@
-import {
-  Bird,
-  Book,
-  Bot,
-  Code2,
-  CornerDownLeft,
-  LifeBuoy,
-  Mic,
-  Paperclip,
-  Rabbit,
-  Settings,
-  Settings2,
-  Share,
-  SquareTerminal,
-  SquareUser,
-  Triangle,
-  Turtle,
-} from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/default/ui/drawer"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-import { Textarea } from "@/registry/default/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/default/ui/tooltip"
-
-export const description =
-  "An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages."
-
-export const iframeHeight = "740px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="grid h-screen w-full pl-[56px]">
-      <aside className="inset-y fixed  left-0 z-20 flex h-full flex-col border-r">
-        <div className="border-b p-2">
-          <Button variant="outline" size="icon" aria-label="Home">
-            <Triangle className="size-5 fill-foreground" />
-          </Button>
-        </div>
-        <nav className="grid gap-1 p-2">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg bg-muted"
-                aria-label="Playground"
-              >
-                <SquareTerminal className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Playground
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="Models"
-              >
-                <Bot className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Models
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="API"
-              >
-                <Code2 className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              API
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="Documentation"
-              >
-                <Book className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Documentation
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="Settings"
-              >
-                <Settings2 className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Settings
-            </TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto grid gap-1 p-2">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="mt-auto rounded-lg"
-                aria-label="Help"
-              >
-                <LifeBuoy className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Help
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="mt-auto rounded-lg"
-                aria-label="Account"
-              >
-                <SquareUser className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Account
-            </TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col">
-        <header className="sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4">
-          <h1 className="text-xl font-semibold">Playground</h1>
-          <Drawer>
-            <DrawerTrigger asChild>
-              <Button variant="ghost" size="icon" className="md:hidden">
-                <Settings className="size-4" />
-                <span className="sr-only">Settings</span>
-              </Button>
-            </DrawerTrigger>
-            <DrawerContent className="max-h-[80vh]">
-              <DrawerHeader>
-                <DrawerTitle>Configuration</DrawerTitle>
-                <DrawerDescription>
-                  Configure the settings for the model and messages.
-                </DrawerDescription>
-              </DrawerHeader>
-              <form className="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
-                <fieldset className="grid gap-6 rounded-lg border p-4">
-                  <legend className="-ml-1 px-1 text-sm font-medium">
-                    Settings
-                  </legend>
-                  <div className="grid gap-3">
-                    <Label htmlFor="model">Model</Label>
-                    <Select>
-                      <SelectTrigger
-                        id="model"
-                        className="items-start [&_[data-description]]:hidden"
-                      >
-                        <SelectValue placeholder="Select a model" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="genesis">
-                          <div className="flex items-start gap-3 text-muted-foreground">
-                            <Rabbit className="size-5" />
-                            <div className="grid gap-0.5">
-                              <p>
-                                Neural{" "}
-                                <span className="font-medium text-foreground">
-                                  Genesis
-                                </span>
-                              </p>
-                              <p className="text-xs" data-description>
-                                Our fastest model for general use cases.
-                              </p>
-                            </div>
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="explorer">
-                          <div className="flex items-start gap-3 text-muted-foreground">
-                            <Bird className="size-5" />
-                            <div className="grid gap-0.5">
-                              <p>
-                                Neural{" "}
-                                <span className="font-medium text-foreground">
-                                  Explorer
-                                </span>
-                              </p>
-                              <p className="text-xs" data-description>
-                                Performance and speed for efficiency.
-                              </p>
-                            </div>
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="quantum">
-                          <div className="flex items-start gap-3 text-muted-foreground">
-                            <Turtle className="size-5" />
-                            <div className="grid gap-0.5">
-                              <p>
-                                Neural{" "}
-                                <span className="font-medium text-foreground">
-                                  Quantum
-                                </span>
-                              </p>
-                              <p className="text-xs" data-description>
-                                The most powerful model for complex
-                                computations.
-                              </p>
-                            </div>
-                          </div>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="temperature">Temperature</Label>
-                    <Input id="temperature" type="number" placeholder="0.4" />
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-p">Top P</Label>
-                    <Input id="top-p" type="number" placeholder="0.7" />
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-k">Top K</Label>
-                    <Input id="top-k" type="number" placeholder="0.0" />
-                  </div>
-                </fieldset>
-                <fieldset className="grid gap-6 rounded-lg border p-4">
-                  <legend className="-ml-1 px-1 text-sm font-medium">
-                    Messages
-                  </legend>
-                  <div className="grid gap-3">
-                    <Label htmlFor="role">Role</Label>
-                    <Select defaultValue="system">
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a role" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="system">System</SelectItem>
-                        <SelectItem value="user">User</SelectItem>
-                        <SelectItem value="assistant">Assistant</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="content">Content</Label>
-                    <Textarea id="content" placeholder="You are a..." />
-                  </div>
-                </fieldset>
-              </form>
-            </DrawerContent>
-          </Drawer>
-          <Button
-            variant="outline"
-            size="sm"
-            className="ml-auto gap-1.5 text-sm"
-          >
-            <Share className="size-3.5" />
-            Share
-          </Button>
-        </header>
-        <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
-          <div
-            className="relative hidden flex-col items-start gap-8 md:flex"
-            x-chunk="dashboard-03-chunk-0"
-          >
-            <form className="grid w-full items-start gap-6">
-              <fieldset className="grid gap-6 rounded-lg border p-4">
-                <legend className="-ml-1 px-1 text-sm font-medium">
-                  Settings
-                </legend>
-                <div className="grid gap-3">
-                  <Label htmlFor="model">Model</Label>
-                  <Select>
-                    <SelectTrigger
-                      id="model"
-                      className="items-start [&_[data-description]]:hidden"
-                    >
-                      <SelectValue placeholder="Select a model" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="genesis">
-                        <div className="flex items-start gap-3 text-muted-foreground">
-                          <Rabbit className="size-5" />
-                          <div className="grid gap-0.5">
-                            <p>
-                              Neural{" "}
-                              <span className="font-medium text-foreground">
-                                Genesis
-                              </span>
-                            </p>
-                            <p className="text-xs" data-description>
-                              Our fastest model for general use cases.
-                            </p>
-                          </div>
-                        </div>
-                      </SelectItem>
-                      <SelectItem value="explorer">
-                        <div className="flex items-start gap-3 text-muted-foreground">
-                          <Bird className="size-5" />
-                          <div className="grid gap-0.5">
-                            <p>
-                              Neural{" "}
-                              <span className="font-medium text-foreground">
-                                Explorer
-                              </span>
-                            </p>
-                            <p className="text-xs" data-description>
-                              Performance and speed for efficiency.
-                            </p>
-                          </div>
-                        </div>
-                      </SelectItem>
-                      <SelectItem value="quantum">
-                        <div className="flex items-start gap-3 text-muted-foreground">
-                          <Turtle className="size-5" />
-                          <div className="grid gap-0.5">
-                            <p>
-                              Neural{" "}
-                              <span className="font-medium text-foreground">
-                                Quantum
-                              </span>
-                            </p>
-                            <p className="text-xs" data-description>
-                              The most powerful model for complex computations.
-                            </p>
-                          </div>
-                        </div>
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="temperature">Temperature</Label>
-                  <Input id="temperature" type="number" placeholder="0.4" />
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-p">Top P</Label>
-                    <Input id="top-p" type="number" placeholder="0.7" />
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-k">Top K</Label>
-                    <Input id="top-k" type="number" placeholder="0.0" />
-                  </div>
-                </div>
-              </fieldset>
-              <fieldset className="grid gap-6 rounded-lg border p-4">
-                <legend className="-ml-1 px-1 text-sm font-medium">
-                  Messages
-                </legend>
-                <div className="grid gap-3">
-                  <Label htmlFor="role">Role</Label>
-                  <Select defaultValue="system">
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a role" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="system">System</SelectItem>
-                      <SelectItem value="user">User</SelectItem>
-                      <SelectItem value="assistant">Assistant</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="content">Content</Label>
-                  <Textarea
-                    id="content"
-                    placeholder="You are a..."
-                    className="min-h-[9.5rem]"
-                  />
-                </div>
-              </fieldset>
-            </form>
-          </div>
-          <div className="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
-            <Badge variant="outline" className="absolute right-3 top-3">
-              Output
-            </Badge>
-            <div className="flex-1" />
-            <form
-              className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
-              x-chunk="dashboard-03-chunk-1"
-            >
-              <Label htmlFor="message" className="sr-only">
-                Message
-              </Label>
-              <Textarea
-                id="message"
-                placeholder="Type your message here..."
-                className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
-              />
-              <div className="flex items-center p-3 pt-0">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="ghost" size="icon">
-                      <Paperclip className="size-4" />
-                      <span className="sr-only">Attach file</span>
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">Attach File</TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="ghost" size="icon">
-                      <Mic className="size-4" />
-                      <span className="sr-only">Use Microphone</span>
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">Use Microphone</TooltipContent>
-                </Tooltip>
-                <Button type="submit" size="sm" className="ml-auto gap-1.5">
-                  Send Message
-                  <CornerDownLeft className="size-3.5" />
-                </Button>
-              </div>
-            </form>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/default/block/dashboard-04.tsx b/apps/www/__registry__/default/block/dashboard-04.tsx
deleted file mode 100644
index 991a45cc950..00000000000
--- a/apps/www/__registry__/default/block/dashboard-04.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import Link from "next/link"
-import { CircleUser, Menu, Package2, Search } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Checkbox } from "@/registry/default/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-
-export const description =
-  "A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings."
-
-export const iframeHeight = "780px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col">
-      <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
-        <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-          <Link
-            href="#"
-            className="flex items-center gap-2 text-lg font-semibold md:text-base"
-          >
-            <Package2 className="h-6 w-6" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Dashboard
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Orders
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Products
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Customers
-          </Link>
-          <Link
-            href="#"
-            className="text-foreground transition-colors hover:text-foreground"
-          >
-            Settings
-          </Link>
-        </nav>
-        <Sheet>
-          <SheetTrigger asChild>
-            <Button
-              variant="outline"
-              size="icon"
-              className="shrink-0 md:hidden"
-            >
-              <Menu className="h-5 w-5" />
-              <span className="sr-only">Toggle navigation menu</span>
-            </Button>
-          </SheetTrigger>
-          <SheetContent side="left">
-            <nav className="grid gap-6 text-lg font-medium">
-              <Link
-                href="#"
-                className="flex items-center gap-2 text-lg font-semibold"
-              >
-                <Package2 className="h-6 w-6" />
-                <span className="sr-only">Acme Inc</span>
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Dashboard
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Orders
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Products
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Customers
-              </Link>
-              <Link href="#" className="hover:text-foreground">
-                Settings
-              </Link>
-            </nav>
-          </SheetContent>
-        </Sheet>
-        <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
-          <form className="ml-auto flex-1 sm:flex-initial">
-            <div className="relative">
-              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input
-                type="search"
-                placeholder="Search products..."
-                className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
-              />
-            </div>
-          </form>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" size="icon" className="rounded-full">
-                <CircleUser className="h-5 w-5" />
-                <span className="sr-only">Toggle user menu</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </header>
-      <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
-        <div className="mx-auto grid w-full max-w-6xl gap-2">
-          <h1 className="text-3xl font-semibold">Settings</h1>
-        </div>
-        <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
-          <nav
-            className="grid gap-4 text-sm text-muted-foreground"
-            x-chunk="dashboard-04-chunk-0"
-          >
-            <Link href="#" className="font-semibold text-primary">
-              General
-            </Link>
-            <Link href="#">Security</Link>
-            <Link href="#">Integrations</Link>
-            <Link href="#">Support</Link>
-            <Link href="#">Organizations</Link>
-            <Link href="#">Advanced</Link>
-          </nav>
-          <div className="grid gap-6">
-            <Card x-chunk="dashboard-04-chunk-1">
-              <CardHeader>
-                <CardTitle>Store Name</CardTitle>
-                <CardDescription>
-                  Used to identify your store in the marketplace.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <form>
-                  <Input placeholder="Store Name" />
-                </form>
-              </CardContent>
-              <CardFooter className="border-t px-6 py-4">
-                <Button>Save</Button>
-              </CardFooter>
-            </Card>
-            <Card x-chunk="dashboard-04-chunk-2">
-              <CardHeader>
-                <CardTitle>Plugins Directory</CardTitle>
-                <CardDescription>
-                  The directory within your project, in which your plugins are
-                  located.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <form className="flex flex-col gap-4">
-                  <Input
-                    placeholder="Project Name"
-                    defaultValue="/content/plugins"
-                  />
-                  <div className="flex items-center space-x-2">
-                    <Checkbox id="include" defaultChecked />
-                    <label
-                      htmlFor="include"
-                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                    >
-                      Allow administrators to change the directory.
-                    </label>
-                  </div>
-                </form>
-              </CardContent>
-              <CardFooter className="border-t px-6 py-4">
-                <Button>Save</Button>
-              </CardFooter>
-            </Card>
-          </div>
-        </div>
-      </main>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/default/block/dashboard-05.tsx b/apps/www/__registry__/default/block/dashboard-05.tsx
deleted file mode 100644
index f94522d7f17..00000000000
--- a/apps/www/__registry__/default/block/dashboard-05.tsx
+++ /dev/null
@@ -1,720 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-import {
-  ChevronLeft,
-  ChevronRight,
-  Copy,
-  CreditCard,
-  File,
-  Home,
-  LineChart,
-  ListFilter,
-  MoreVertical,
-  Package,
-  Package2,
-  PanelLeft,
-  Search,
-  Settings,
-  ShoppingCart,
-  Truck,
-  Users2,
-} from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-} from "@/registry/default/ui/pagination"
-import { Progress } from "@/registry/default/ui/progress"
-import { Separator } from "@/registry/default/ui/separator"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/default/ui/tabs"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/default/ui/tooltip"
-
-export const description =
-  "An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information."
-
-export const iframeHeight = "1112px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col bg-muted/40">
-      <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
-        <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Link
-            href="#"
-            className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
-          >
-            <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Home className="h-5 w-5" />
-                <span className="sr-only">Dashboard</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Dashboard</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <ShoppingCart className="h-5 w-5" />
-                <span className="sr-only">Orders</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Orders</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Package className="h-5 w-5" />
-                <span className="sr-only">Products</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Products</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Users2 className="h-5 w-5" />
-                <span className="sr-only">Customers</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Customers</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <LineChart className="h-5 w-5" />
-                <span className="sr-only">Analytics</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Analytics</TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Settings className="h-5 w-5" />
-                <span className="sr-only">Settings</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Settings</TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button size="icon" variant="outline" className="sm:hidden">
-                <PanelLeft className="h-5 w-5" />
-                <span className="sr-only">Toggle Menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="sm:max-w-xs">
-              <nav className="grid gap-6 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
-                >
-                  <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Users2 className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Settings
-                </Link>
-              </nav>
-            </SheetContent>
-          </Sheet>
-          <Breadcrumb className="hidden md:flex">
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Dashboard</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Orders</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>Recent Orders</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="relative ml-auto flex-1 md:grow-0">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
-            />
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="overflow-hidden rounded-full"
-              >
-                <Image
-                  src="/placeholder-user.jpg"
-                  width={36}
-                  height={36}
-                  alt="Avatar"
-                  className="overflow-hidden rounded-full"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
-          <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
-            <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
-              <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
-                <CardHeader className="pb-3">
-                  <CardTitle>Your Orders</CardTitle>
-                  <CardDescription className="max-w-lg text-balance leading-relaxed">
-                    Introducing Our Dynamic Orders Dashboard for Seamless
-                    Management and Insightful Analysis.
-                  </CardDescription>
-                </CardHeader>
-                <CardFooter>
-                  <Button>Create New Order</Button>
-                </CardFooter>
-              </Card>
-              <Card x-chunk="dashboard-05-chunk-1">
-                <CardHeader className="pb-2">
-                  <CardDescription>This Week</CardDescription>
-                  <CardTitle className="text-4xl">$1,329</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="text-xs text-muted-foreground">
-                    +25% from last week
-                  </div>
-                </CardContent>
-                <CardFooter>
-                  <Progress value={25} aria-label="25% increase" />
-                </CardFooter>
-              </Card>
-              <Card x-chunk="dashboard-05-chunk-2">
-                <CardHeader className="pb-2">
-                  <CardDescription>This Month</CardDescription>
-                  <CardTitle className="text-4xl">$5,329</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="text-xs text-muted-foreground">
-                    +10% from last month
-                  </div>
-                </CardContent>
-                <CardFooter>
-                  <Progress value={12} aria-label="12% increase" />
-                </CardFooter>
-              </Card>
-            </div>
-            <Tabs defaultValue="week">
-              <div className="flex items-center">
-                <TabsList>
-                  <TabsTrigger value="week">Week</TabsTrigger>
-                  <TabsTrigger value="month">Month</TabsTrigger>
-                  <TabsTrigger value="year">Year</TabsTrigger>
-                </TabsList>
-                <div className="ml-auto flex items-center gap-2">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="h-7 gap-1 text-sm"
-                      >
-                        <ListFilter className="h-3.5 w-3.5" />
-                        <span className="sr-only sm:not-sr-only">Filter</span>
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuLabel>Filter by</DropdownMenuLabel>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuCheckboxItem checked>
-                        Fulfilled
-                      </DropdownMenuCheckboxItem>
-                      <DropdownMenuCheckboxItem>
-                        Declined
-                      </DropdownMenuCheckboxItem>
-                      <DropdownMenuCheckboxItem>
-                        Refunded
-                      </DropdownMenuCheckboxItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    className="h-7 gap-1 text-sm"
-                  >
-                    <File className="h-3.5 w-3.5" />
-                    <span className="sr-only sm:not-sr-only">Export</span>
-                  </Button>
-                </div>
-              </div>
-              <TabsContent value="week">
-                <Card x-chunk="dashboard-05-chunk-3">
-                  <CardHeader className="px-7">
-                    <CardTitle>Orders</CardTitle>
-                    <CardDescription>
-                      Recent orders from your store.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead>Customer</TableHead>
-                          <TableHead className="hidden sm:table-cell">
-                            Type
-                          </TableHead>
-                          <TableHead className="hidden sm:table-cell">
-                            Status
-                          </TableHead>
-                          <TableHead className="hidden md:table-cell">
-                            Date
-                          </TableHead>
-                          <TableHead className="text-right">Amount</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        <TableRow className="bg-accent">
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Olivia Smith</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              olivia@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Refund
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="outline">
-                              Declined
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-24
-                          </TableCell>
-                          <TableCell className="text-right">$150.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Noah Williams</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              noah@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Subscription
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-25
-                          </TableCell>
-                          <TableCell className="text-right">$350.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Emma Brown</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              emma@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-26
-                          </TableCell>
-                          <TableCell className="text-right">$450.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Olivia Smith</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              olivia@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Refund
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="outline">
-                              Declined
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-24
-                          </TableCell>
-                          <TableCell className="text-right">$150.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Emma Brown</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              emma@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-26
-                          </TableCell>
-                          <TableCell className="text-right">$450.00</TableCell>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </CardContent>
-                </Card>
-              </TabsContent>
-            </Tabs>
-          </div>
-          <div>
-            <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
-              <CardHeader className="flex flex-row items-start bg-muted/50">
-                <div className="grid gap-0.5">
-                  <CardTitle className="group flex items-center gap-2 text-lg">
-                    Order Oe31b70H
-                    <Button
-                      size="icon"
-                      variant="outline"
-                      className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
-                    >
-                      <Copy className="h-3 w-3" />
-                      <span className="sr-only">Copy Order ID</span>
-                    </Button>
-                  </CardTitle>
-                  <CardDescription>Date: November 23, 2023</CardDescription>
-                </div>
-                <div className="ml-auto flex items-center gap-1">
-                  <Button size="sm" variant="outline" className="h-8 gap-1">
-                    <Truck className="h-3.5 w-3.5" />
-                    <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-                      Track Order
-                    </span>
-                  </Button>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button size="icon" variant="outline" className="h-8 w-8">
-                        <MoreVertical className="h-3.5 w-3.5" />
-                        <span className="sr-only">More</span>
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuItem>Edit</DropdownMenuItem>
-                      <DropdownMenuItem>Export</DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem>Trash</DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-              </CardHeader>
-              <CardContent className="p-6 text-sm">
-                <div className="grid gap-3">
-                  <div className="font-semibold">Order Details</div>
-                  <ul className="grid gap-3">
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">
-                        Glimmer Lamps x <span>2</span>
-                      </span>
-                      <span>$250.00</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">
-                        Aqua Filters x <span>1</span>
-                      </span>
-                      <span>$49.00</span>
-                    </li>
-                  </ul>
-                  <Separator className="my-2" />
-                  <ul className="grid gap-3">
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">Subtotal</span>
-                      <span>$299.00</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">Shipping</span>
-                      <span>$5.00</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">Tax</span>
-                      <span>$25.00</span>
-                    </li>
-                    <li className="flex items-center justify-between font-semibold">
-                      <span className="text-muted-foreground">Total</span>
-                      <span>$329.00</span>
-                    </li>
-                  </ul>
-                </div>
-                <Separator className="my-4" />
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-3">
-                    <div className="font-semibold">Shipping Information</div>
-                    <address className="grid gap-0.5 not-italic text-muted-foreground">
-                      <span>Liam Johnson</span>
-                      <span>1234 Main St.</span>
-                      <span>Anytown, CA 12345</span>
-                    </address>
-                  </div>
-                  <div className="grid auto-rows-max gap-3">
-                    <div className="font-semibold">Billing Information</div>
-                    <div className="text-muted-foreground">
-                      Same as shipping address
-                    </div>
-                  </div>
-                </div>
-                <Separator className="my-4" />
-                <div className="grid gap-3">
-                  <div className="font-semibold">Customer Information</div>
-                  <dl className="grid gap-3">
-                    <div className="flex items-center justify-between">
-                      <dt className="text-muted-foreground">Customer</dt>
-                      <dd>Liam Johnson</dd>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <dt className="text-muted-foreground">Email</dt>
-                      <dd>
-                        <a href="mailto:">liam@acme.com</a>
-                      </dd>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <dt className="text-muted-foreground">Phone</dt>
-                      <dd>
-                        <a href="tel:">+1 234 567 890</a>
-                      </dd>
-                    </div>
-                  </dl>
-                </div>
-                <Separator className="my-4" />
-                <div className="grid gap-3">
-                  <div className="font-semibold">Payment Information</div>
-                  <dl className="grid gap-3">
-                    <div className="flex items-center justify-between">
-                      <dt className="flex items-center gap-1 text-muted-foreground">
-                        <CreditCard className="h-4 w-4" />
-                        Visa
-                      </dt>
-                      <dd>**** **** **** 4532</dd>
-                    </div>
-                  </dl>
-                </div>
-              </CardContent>
-              <CardFooter className="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
-                <div className="text-xs text-muted-foreground">
-                  Updated <time dateTime="2023-11-23">November 23, 2023</time>
-                </div>
-                <Pagination className="ml-auto mr-0 w-auto">
-                  <PaginationContent>
-                    <PaginationItem>
-                      <Button size="icon" variant="outline" className="h-6 w-6">
-                        <ChevronLeft className="h-3.5 w-3.5" />
-                        <span className="sr-only">Previous Order</span>
-                      </Button>
-                    </PaginationItem>
-                    <PaginationItem>
-                      <Button size="icon" variant="outline" className="h-6 w-6">
-                        <ChevronRight className="h-3.5 w-3.5" />
-                        <span className="sr-only">Next Order</span>
-                      </Button>
-                    </PaginationItem>
-                  </PaginationContent>
-                </Pagination>
-              </CardFooter>
-            </Card>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/default/block/dashboard-06.tsx b/apps/www/__registry__/default/block/dashboard-06.tsx
deleted file mode 100644
index 737d90c0427..00000000000
--- a/apps/www/__registry__/default/block/dashboard-06.tsx
+++ /dev/null
@@ -1,637 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-import {
-  File,
-  Home,
-  LineChart,
-  ListFilter,
-  MoreHorizontal,
-  Package,
-  Package2,
-  PanelLeft,
-  PlusCircle,
-  Search,
-  Settings,
-  ShoppingCart,
-  Users2,
-} from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/default/ui/tabs"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/default/ui/tooltip"
-
-export const description =
-  "An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions."
-
-export const iframeHeight = "938px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col bg-muted/40">
-      <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
-        <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Link
-            href="#"
-            className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
-          >
-            <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Home className="h-5 w-5" />
-                <span className="sr-only">Dashboard</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Dashboard</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <ShoppingCart className="h-5 w-5" />
-                <span className="sr-only">Orders</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Orders</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Package className="h-5 w-5" />
-                <span className="sr-only">Products</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Products</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Users2 className="h-5 w-5" />
-                <span className="sr-only">Customers</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Customers</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <LineChart className="h-5 w-5" />
-                <span className="sr-only">Analytics</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Analytics</TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Settings className="h-5 w-5" />
-                <span className="sr-only">Settings</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Settings</TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button size="icon" variant="outline" className="sm:hidden">
-                <PanelLeft className="h-5 w-5" />
-                <span className="sr-only">Toggle Menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="sm:max-w-xs">
-              <nav className="grid gap-6 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
-                >
-                  <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Users2 className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Settings
-                </Link>
-              </nav>
-            </SheetContent>
-          </Sheet>
-          <Breadcrumb className="hidden md:flex">
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Dashboard</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Products</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>All Products</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="relative ml-auto flex-1 md:grow-0">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
-            />
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="overflow-hidden rounded-full"
-              >
-                <Image
-                  src="/placeholder-user.jpg"
-                  width={36}
-                  height={36}
-                  alt="Avatar"
-                  className="overflow-hidden rounded-full"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
-          <Tabs defaultValue="all">
-            <div className="flex items-center">
-              <TabsList>
-                <TabsTrigger value="all">All</TabsTrigger>
-                <TabsTrigger value="active">Active</TabsTrigger>
-                <TabsTrigger value="draft">Draft</TabsTrigger>
-                <TabsTrigger value="archived" className="hidden sm:flex">
-                  Archived
-                </TabsTrigger>
-              </TabsList>
-              <div className="ml-auto flex items-center gap-2">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm" className="h-8 gap-1">
-                      <ListFilter className="h-3.5 w-3.5" />
-                      <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                        Filter
-                      </span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuCheckboxItem checked>
-                      Active
-                    </DropdownMenuCheckboxItem>
-                    <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>
-                    <DropdownMenuCheckboxItem>
-                      Archived
-                    </DropdownMenuCheckboxItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-                <Button size="sm" variant="outline" className="h-8 gap-1">
-                  <File className="h-3.5 w-3.5" />
-                  <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                    Export
-                  </span>
-                </Button>
-                <Button size="sm" className="h-8 gap-1">
-                  <PlusCircle className="h-3.5 w-3.5" />
-                  <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                    Add Product
-                  </span>
-                </Button>
-              </div>
-            </div>
-            <TabsContent value="all">
-              <Card x-chunk="dashboard-06-chunk-0">
-                <CardHeader>
-                  <CardTitle>Products</CardTitle>
-                  <CardDescription>
-                    Manage your products and view their sales performance.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="hidden w-[100px] sm:table-cell">
-                          <span className="sr-only">Image</span>
-                        </TableHead>
-                        <TableHead>Name</TableHead>
-                        <TableHead>Status</TableHead>
-                        <TableHead className="hidden md:table-cell">
-                          Price
-                        </TableHead>
-                        <TableHead className="hidden md:table-cell">
-                          Total Sales
-                        </TableHead>
-                        <TableHead className="hidden md:table-cell">
-                          Created at
-                        </TableHead>
-                        <TableHead>
-                          <span className="sr-only">Actions</span>
-                        </TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Laser Lemonade Machine
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Draft</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $499.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          25
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-07-12 10:42 AM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Hypernova Headphones
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $129.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          100
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-10-18 03:21 PM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          AeroGlow Desk Lamp
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $39.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          50
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-11-29 08:15 AM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          TechTonic Energy Drink
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="secondary">Draft</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $2.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          0
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-12-25 11:59 PM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Gamer Gear Pro Controller
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $59.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          75
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2024-01-01 12:00 AM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Luminous VR Headset
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $199.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          30
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2024-02-14 02:14 PM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                    </TableBody>
-                  </Table>
-                </CardContent>
-                <CardFooter>
-                  <div className="text-xs text-muted-foreground">
-                    Showing <strong>1-10</strong> of <strong>32</strong>{" "}
-                    products
-                  </div>
-                </CardFooter>
-              </Card>
-            </TabsContent>
-          </Tabs>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/default/block/dashboard-07.tsx b/apps/www/__registry__/default/block/dashboard-07.tsx
deleted file mode 100644
index 5c78dee0561..00000000000
--- a/apps/www/__registry__/default/block/dashboard-07.tsx
+++ /dev/null
@@ -1,610 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-import {
-  ChevronLeft,
-  Home,
-  LineChart,
-  Package,
-  Package2,
-  PanelLeft,
-  PlusCircle,
-  Search,
-  Settings,
-  ShoppingCart,
-  Upload,
-  Users2,
-} from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-import { Textarea } from "@/registry/default/ui/textarea"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/default/ui/toggle-group"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/default/ui/tooltip"
-
-export const description =
-  "A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images."
-
-export const iframeHeight = "1200px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col bg-muted/40">
-      <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
-        <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Link
-            href="#"
-            className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
-          >
-            <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Home className="h-5 w-5" />
-                <span className="sr-only">Dashboard</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Dashboard</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <ShoppingCart className="h-5 w-5" />
-                <span className="sr-only">Orders</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Orders</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Package className="h-5 w-5" />
-                <span className="sr-only">Products</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Products</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Users2 className="h-5 w-5" />
-                <span className="sr-only">Customers</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Customers</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <LineChart className="h-5 w-5" />
-                <span className="sr-only">Analytics</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Analytics</TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Settings className="h-5 w-5" />
-                <span className="sr-only">Settings</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Settings</TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button size="icon" variant="outline" className="sm:hidden">
-                <PanelLeft className="h-5 w-5" />
-                <span className="sr-only">Toggle Menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="sm:max-w-xs">
-              <nav className="grid gap-6 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
-                >
-                  <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Users2 className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Settings
-                </Link>
-              </nav>
-            </SheetContent>
-          </Sheet>
-          <Breadcrumb className="hidden md:flex">
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Dashboard</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Products</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>Edit Product</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="relative ml-auto flex-1 md:grow-0">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
-            />
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="overflow-hidden rounded-full"
-              >
-                <Image
-                  src="/placeholder-user.jpg"
-                  width={36}
-                  height={36}
-                  alt="Avatar"
-                  className="overflow-hidden rounded-full"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
-          <div className="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
-            <div className="flex items-center gap-4">
-              <Button variant="outline" size="icon" className="h-7 w-7">
-                <ChevronLeft className="h-4 w-4" />
-                <span className="sr-only">Back</span>
-              </Button>
-              <h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
-                Pro Controller
-              </h1>
-              <Badge variant="outline" className="ml-auto sm:ml-0">
-                In stock
-              </Badge>
-              <div className="hidden items-center gap-2 md:ml-auto md:flex">
-                <Button variant="outline" size="sm">
-                  Discard
-                </Button>
-                <Button size="sm">Save Product</Button>
-              </div>
-            </div>
-            <div className="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
-              <div className="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
-                <Card x-chunk="dashboard-07-chunk-0">
-                  <CardHeader>
-                    <CardTitle>Product Details</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-6">
-                      <div className="grid gap-3">
-                        <Label htmlFor="name">Name</Label>
-                        <Input
-                          id="name"
-                          type="text"
-                          className="w-full"
-                          defaultValue="Gamer Gear Pro Controller"
-                        />
-                      </div>
-                      <div className="grid gap-3">
-                        <Label htmlFor="description">Description</Label>
-                        <Textarea
-                          id="description"
-                          defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
-                          className="min-h-32"
-                        />
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-                <Card x-chunk="dashboard-07-chunk-1">
-                  <CardHeader>
-                    <CardTitle>Stock</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead className="w-[100px]">SKU</TableHead>
-                          <TableHead>Stock</TableHead>
-                          <TableHead>Price</TableHead>
-                          <TableHead className="w-[100px]">Size</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        <TableRow>
-                          <TableCell className="font-semibold">
-                            GGPC-001
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="stock-1" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="stock-1"
-                              type="number"
-                              defaultValue="100"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="price-1" className="sr-only">
-                              Price
-                            </Label>
-                            <Input
-                              id="price-1"
-                              type="number"
-                              defaultValue="99.99"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <ToggleGroup
-                              type="single"
-                              defaultValue="s"
-                              variant="outline"
-                            >
-                              <ToggleGroupItem value="s">S</ToggleGroupItem>
-                              <ToggleGroupItem value="m">M</ToggleGroupItem>
-                              <ToggleGroupItem value="l">L</ToggleGroupItem>
-                            </ToggleGroup>
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-semibold">
-                            GGPC-002
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="stock-2" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="stock-2"
-                              type="number"
-                              defaultValue="143"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="price-2" className="sr-only">
-                              Price
-                            </Label>
-                            <Input
-                              id="price-2"
-                              type="number"
-                              defaultValue="99.99"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <ToggleGroup
-                              type="single"
-                              defaultValue="m"
-                              variant="outline"
-                            >
-                              <ToggleGroupItem value="s">S</ToggleGroupItem>
-                              <ToggleGroupItem value="m">M</ToggleGroupItem>
-                              <ToggleGroupItem value="l">L</ToggleGroupItem>
-                            </ToggleGroup>
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-semibold">
-                            GGPC-003
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="stock-3" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="stock-3"
-                              type="number"
-                              defaultValue="32"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="price-3" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="price-3"
-                              type="number"
-                              defaultValue="99.99"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <ToggleGroup
-                              type="single"
-                              defaultValue="s"
-                              variant="outline"
-                            >
-                              <ToggleGroupItem value="s">S</ToggleGroupItem>
-                              <ToggleGroupItem value="m">M</ToggleGroupItem>
-                              <ToggleGroupItem value="l">L</ToggleGroupItem>
-                            </ToggleGroup>
-                          </TableCell>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </CardContent>
-                  <CardFooter className="justify-center border-t p-4">
-                    <Button size="sm" variant="ghost" className="gap-1">
-                      <PlusCircle className="h-3.5 w-3.5" />
-                      Add Variant
-                    </Button>
-                  </CardFooter>
-                </Card>
-                <Card x-chunk="dashboard-07-chunk-2">
-                  <CardHeader>
-                    <CardTitle>Product Category</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-6 sm:grid-cols-3">
-                      <div className="grid gap-3">
-                        <Label htmlFor="category">Category</Label>
-                        <Select>
-                          <SelectTrigger
-                            id="category"
-                            aria-label="Select category"
-                          >
-                            <SelectValue placeholder="Select category" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="clothing">Clothing</SelectItem>
-                            <SelectItem value="electronics">
-                              Electronics
-                            </SelectItem>
-                            <SelectItem value="accessories">
-                              Accessories
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                      <div className="grid gap-3">
-                        <Label htmlFor="subcategory">
-                          Subcategory (optional)
-                        </Label>
-                        <Select>
-                          <SelectTrigger
-                            id="subcategory"
-                            aria-label="Select subcategory"
-                          >
-                            <SelectValue placeholder="Select subcategory" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="t-shirts">T-Shirts</SelectItem>
-                            <SelectItem value="hoodies">Hoodies</SelectItem>
-                            <SelectItem value="sweatshirts">
-                              Sweatshirts
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-              <div className="grid auto-rows-max items-start gap-4 lg:gap-8">
-                <Card x-chunk="dashboard-07-chunk-3">
-                  <CardHeader>
-                    <CardTitle>Product Status</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-6">
-                      <div className="grid gap-3">
-                        <Label htmlFor="status">Status</Label>
-                        <Select>
-                          <SelectTrigger id="status" aria-label="Select status">
-                            <SelectValue placeholder="Select status" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="draft">Draft</SelectItem>
-                            <SelectItem value="published">Active</SelectItem>
-                            <SelectItem value="archived">Archived</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-                <Card
-                  className="overflow-hidden"
-                  x-chunk="dashboard-07-chunk-4"
-                >
-                  <CardHeader>
-                    <CardTitle>Product Images</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-2">
-                      <Image
-                        alt="Product image"
-                        className="aspect-square w-full rounded-md object-cover"
-                        height="300"
-                        src="/placeholder.svg"
-                        width="300"
-                      />
-                      <div className="grid grid-cols-3 gap-2">
-                        <button>
-                          <Image
-                            alt="Product image"
-                            className="aspect-square w-full rounded-md object-cover"
-                            height="84"
-                            src="/placeholder.svg"
-                            width="84"
-                          />
-                        </button>
-                        <button>
-                          <Image
-                            alt="Product image"
-                            className="aspect-square w-full rounded-md object-cover"
-                            height="84"
-                            src="/placeholder.svg"
-                            width="84"
-                          />
-                        </button>
-                        <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
-                          <Upload className="h-4 w-4 text-muted-foreground" />
-                          <span className="sr-only">Upload</span>
-                        </button>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-                <Card x-chunk="dashboard-07-chunk-5">
-                  <CardHeader>
-                    <CardTitle>Archive Product</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div></div>
-                    <Button size="sm" variant="secondary">
-                      Archive Product
-                    </Button>
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
-            <div className="flex items-center justify-center gap-2 md:hidden">
-              <Button variant="outline" size="sm">
-                Discard
-              </Button>
-              <Button size="sm">Save Product</Button>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/default/block/login-01.tsx b/apps/www/__registry__/default/block/login-01.tsx
deleted file mode 100644
index 09809062ff2..00000000000
--- a/apps/www/__registry__/default/block/login-01.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { LoginForm } from "@/registry/default/block/login-01/components/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>
-  )
-}
diff --git a/apps/www/__registry__/default/block/login-01/page.tsx b/apps/www/__registry__/default/block/login-01/page.tsx
deleted file mode 100644
index 09809062ff2..00000000000
--- a/apps/www/__registry__/default/block/login-01/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { LoginForm } from "@/registry/default/block/login-01/components/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>
-  )
-}
diff --git a/apps/www/__registry__/default/block/sidebar-01.tsx b/apps/www/__registry__/default/block/sidebar-01.tsx
deleted file mode 100644
index 335bb25e163..00000000000
--- a/apps/www/__registry__/default/block/sidebar-01.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { AppSidebar } from "@/registry/default/block/sidebar-01/components/app-sidebar"
-import {
-  SidebarLayout,
-  SidebarTrigger,
-} from "@/registry/default/block/sidebar-01/ui/sidebar"
-
-export const iframeHeight = "870px"
-
-export const containerClassName = "w-full h-full"
-
-export default async function Page() {
-  const { cookies } = await import("next/headers")
-  return (
-    <SidebarLayout
-      defaultOpen={cookies().get("sidebar:state")?.value === "true"}
-    >
-      <AppSidebar />
-      <main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
-        <div className="h-full rounded-md border-2 border-dashed p-2">
-          <SidebarTrigger />
-        </div>
-      </main>
-    </SidebarLayout>
-  )
-}
diff --git a/apps/www/__registry__/default/block/sidebar-01/page.tsx b/apps/www/__registry__/default/block/sidebar-01/page.tsx
deleted file mode 100644
index 335bb25e163..00000000000
--- a/apps/www/__registry__/default/block/sidebar-01/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { AppSidebar } from "@/registry/default/block/sidebar-01/components/app-sidebar"
-import {
-  SidebarLayout,
-  SidebarTrigger,
-} from "@/registry/default/block/sidebar-01/ui/sidebar"
-
-export const iframeHeight = "870px"
-
-export const containerClassName = "w-full h-full"
-
-export default async function Page() {
-  const { cookies } = await import("next/headers")
-  return (
-    <SidebarLayout
-      defaultOpen={cookies().get("sidebar:state")?.value === "true"}
-    >
-      <AppSidebar />
-      <main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
-        <div className="h-full rounded-md border-2 border-dashed p-2">
-          <SidebarTrigger />
-        </div>
-      </main>
-    </SidebarLayout>
-  )
-}
diff --git a/apps/www/__registry__/default/block/sidebar-16/page.tsx b/apps/www/__registry__/default/block/sidebar-16/page.tsx
new file mode 100644
index 00000000000..6109ca50876
--- /dev/null
+++ b/apps/www/__registry__/default/block/sidebar-16/page.tsx
@@ -0,0 +1,134 @@
+"use client"
+
+import * as React from "react"
+import { Command, Sidebar } from "lucide-react"
+
+import { AppSidebar } from "@/registry/default/block/sidebar-16/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Button } from "@/registry/default/ui/button"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with site header navigation."
+
+const HEADER_HEIGHT = "4rem"
+
+export default function Page() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <div
+      style={
+        {
+          "--header-height": HEADER_HEIGHT,
+        } as React.CSSProperties
+      }
+    >
+      <header className="bg-sidebar sticky h-[--header-height] top-0 z-50 w-full border-b border-border/40  backdrop-blur">
+        <div className="flex h-14 items-center px-4">
+          <div className="mr-4 hidden md:flex">
+            <Button
+              className="hidden md:flex"
+              variant="ghost"
+              size="icon"
+              onClick={() => setOpen(!open)}
+            >
+              <Sidebar />
+            </Button>
+            <a href="#" className="mr-4 flex items-center gap-2 lg:mr-6">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <Command className="size-4" />
+              </div>
+            </a>
+            <nav className="flex items-center gap-4 text-sm xl:gap-6">
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Docs
+              </a>
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Components
+              </a>
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Blocks
+              </a>
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Charts
+              </a>
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Themes
+              </a>
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Colors
+              </a>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <SidebarProvider open={open} onOpenChange={setOpen}>
+        <AppSidebar />
+
+        <SidebarInset>
+          <header className=" flex shrink-0 items-center gap-2 border-b py-2">
+            <div className="flex items-center gap-2 px-4 py-2">
+              <div className="flex md:hidden items-center gap-2">
+                <SidebarTrigger />
+                <Separator orientation="vertical" className="mr-2 h-4" />
+              </div>
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink href="#">
+                      Building Your Application
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+          </header>
+          <div className="flex flex-1 flex-col gap-4 p-4">
+            <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+              <div className="aspect-video rounded-xl bg-muted/50" />
+              <div className="aspect-video rounded-xl bg-muted/50" />
+              <div className="aspect-video rounded-xl bg-muted/50" />
+            </div>
+            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-01.tsx b/apps/www/__registry__/default/blocks/calendar-01.tsx
new file mode 100644
index 00000000000..7c254e7a0f8
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-01.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar01() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-02.tsx b/apps/www/__registry__/default/blocks/calendar-02.tsx
new file mode 100644
index 00000000000..a3c937ecbaa
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-02.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar02() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      numberOfMonths={2}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-03.tsx b/apps/www/__registry__/default/blocks/calendar-03.tsx
new file mode 100644
index 00000000000..89de91fafb3
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-03.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar03() {
+  const [dates, setDates] = React.useState<Date[]>([
+    new Date(2025, 5, 12),
+    new Date(2025, 6, 24),
+  ])
+
+  return (
+    <Calendar
+      mode="multiple"
+      numberOfMonths={2}
+      defaultMonth={dates[0]}
+      required
+      selected={dates}
+      onSelect={setDates}
+      max={5}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-04.tsx b/apps/www/__registry__/default/blocks/calendar-04.tsx
new file mode 100644
index 00000000000..86d58b8c98a
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-04.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar04() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 9),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-05.tsx b/apps/www/__registry__/default/blocks/calendar-05.tsx
new file mode 100644
index 00000000000..b6a13b61c4f
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-05.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar05() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 6, 15),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-06.tsx b/apps/www/__registry__/default/blocks/calendar-06.tsx
new file mode 100644
index 00000000000..5c61050a69d
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-06.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar06() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={1}
+        min={5}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        A minimum of 5 days is required
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-07.tsx b/apps/www/__registry__/default/blocks/calendar-07.tsx
new file mode 100644
index 00000000000..3f46a659e02
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-07.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar07() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 18),
+    to: new Date(2025, 6, 7),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        min={2}
+        max={20}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        Your stay must be between 2 and 20 nights
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-08.tsx b/apps/www/__registry__/default/blocks/calendar-08.tsx
new file mode 100644
index 00000000000..93a90ff4e85
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-08.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar08() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={{
+        before: new Date(2025, 5, 12),
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-09.tsx b/apps/www/__registry__/default/blocks/calendar-09.tsx
new file mode 100644
index 00000000000..182d7f2bb9f
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-09.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar09() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      disabled={{ dayOfWeek: [0, 6] }}
+      className="rounded-lg border shadow-sm"
+      excludeDisabled
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-10.tsx b/apps/www/__registry__/default/blocks/calendar-10.tsx
new file mode 100644
index 00000000000..592c66ded3b
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-10.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+
+export default function Calendar10() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Card>
+      <CardHeader className="relative">
+        <CardTitle>Appointment</CardTitle>
+        <CardDescription>Find a date</CardDescription>
+        <Button
+          size="sm"
+          variant="outline"
+          className="absolute right-4 top-4"
+          onClick={() => {
+            setMonth(new Date())
+            setDate(new Date())
+          }}
+        >
+          Today
+        </Button>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="single"
+          month={month}
+          onMonthChange={setMonth}
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-11.tsx b/apps/www/__registry__/default/blocks/calendar-11.tsx
new file mode 100644
index 00000000000..dfad509ae13
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-11.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar11() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        startMonth={new Date(2025, 5, 1)}
+        endMonth={new Date(2025, 6, 31)}
+        disableNavigation
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        We are open in June and July only.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-12.tsx b/apps/www/__registry__/default/blocks/calendar-12.tsx
new file mode 100644
index 00000000000..0e3dda96324
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-12.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+import { enUS, es } from "react-day-picker/locale"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+const localizedStrings = {
+  en: {
+    title: "Book an appointment",
+    description: "Select the dates for your appointment",
+  },
+  es: {
+    title: "Reserva una cita",
+    description: "Selecciona las fechas para tu cita",
+  },
+} as const
+
+export default function Calendar12() {
+  const [locale, setLocale] =
+    React.useState<keyof typeof localizedStrings>("es")
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 8, 9),
+    to: new Date(2025, 8, 17),
+  })
+
+  return (
+    <Card>
+      <CardHeader className="relative border-b">
+        <CardTitle>{localizedStrings[locale].title}</CardTitle>
+        <CardDescription>
+          {localizedStrings[locale].description}
+        </CardDescription>
+        <Select
+          value={locale}
+          onValueChange={(value) =>
+            setLocale(value as keyof typeof localizedStrings)
+          }
+        >
+          <SelectTrigger className="absolute right-4 top-4 w-[100px]">
+            <SelectValue placeholder="Language" />
+          </SelectTrigger>
+          <SelectContent align="end">
+            <SelectItem value="es">Español</SelectItem>
+            <SelectItem value="en">English</SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <Calendar
+          mode="range"
+          selected={dateRange}
+          onSelect={setDateRange}
+          defaultMonth={dateRange?.from}
+          numberOfMonths={2}
+          locale={locale === "es" ? es : enUS}
+          className="bg-transparent p-0"
+          buttonVariant="outline"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-13.tsx b/apps/www/__registry__/default/blocks/calendar-13.tsx
new file mode 100644
index 00000000000..047d67fa6cb
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-13.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+export default function Calendar13() {
+  const [dropdown, setDropdown] =
+    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
+      "dropdown"
+    )
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        captionLayout={dropdown}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="dropdown" className="px-1">
+          Dropdown
+        </Label>
+        <Select
+          value={dropdown}
+          onValueChange={(value) =>
+            setDropdown(
+              value as React.ComponentProps<typeof Calendar>["captionLayout"]
+            )
+          }
+        >
+          <SelectTrigger id="dropdown" className="bg-background w-full">
+            <SelectValue placeholder="Dropdown" />
+          </SelectTrigger>
+          <SelectContent align="center">
+            <SelectItem value="dropdown">Month and Year</SelectItem>
+            <SelectItem value="dropdown-months">Month Only</SelectItem>
+            <SelectItem value="dropdown-years">Year Only</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-14.tsx b/apps/www/__registry__/default/blocks/calendar-14.tsx
new file mode 100644
index 00000000000..e1d53f1a7dc
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-14.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar14() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const bookedDates = Array.from(
+    { length: 12 },
+    (_, i) => new Date(2025, 5, 15 + i)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={bookedDates}
+      modifiers={{
+        booked: bookedDates,
+      }}
+      modifiersClassNames={{
+        booked: "[&>button]:line-through opacity-100",
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-15.tsx b/apps/www/__registry__/default/blocks/calendar-15.tsx
new file mode 100644
index 00000000000..6fec6f59a05
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-15.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar15() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+      showWeekNumber
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-16.tsx b/apps/www/__registry__/default/blocks/calendar-16.tsx
new file mode 100644
index 00000000000..d21aa9fcabb
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-16.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Clock2Icon } from "lucide-react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar16() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col gap-6 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-from">Start Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-from"
+              type="time"
+              step="1"
+              defaultValue="10:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-to">End Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-to"
+              type="time"
+              step="1"
+              defaultValue="12:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-17.tsx b/apps/www/__registry__/default/blocks/calendar-17.tsx
new file mode 100644
index 00000000000..bd66aeb3d26
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-17.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar17() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0 [--cell-size:2.8rem]"
+        />
+      </CardContent>
+      <CardFooter className="*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4">
+        <div className="flex-1">
+          <Label htmlFor="time-from" className="sr-only">
+            Start Time
+          </Label>
+          <Input
+            id="time-from"
+            type="time"
+            step="1"
+            defaultValue="10:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <span>-</span>
+        <div className="flex-1">
+          <Label htmlFor="time-to" className="sr-only">
+            End Time
+          </Label>
+          <Input
+            id="time-to"
+            type="time"
+            step="1"
+            defaultValue="12:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-18.tsx b/apps/www/__registry__/default/blocks/calendar-18.tsx
new file mode 100644
index 00000000000..950983dfa3a
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-18.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar18() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      buttonVariant="ghost"
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-19.tsx b/apps/www/__registry__/default/blocks/calendar-19.tsx
new file mode 100644
index 00000000000..c9bff184e89
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-19.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { addDays } from "date-fns"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+export default function Calendar19() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="max-w-[300px] py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          defaultMonth={date}
+          className="bg-transparent p-0 [--cell-size:2.375rem]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t px-4 pb-0 pt-4">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-20.tsx b/apps/www/__registry__/default/blocks/calendar-20.tsx
new file mode 100644
index 00000000000..e9ba34fc43c
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-20.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+export default function Calendar20() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00")
+  const timeSlots = Array.from({ length: 37 }, (_, i) => {
+    const totalMinutes = i * 15
+    const hour = Math.floor(totalMinutes / 60) + 9
+    const minute = totalMinutes % 60
+    return `${hour.toString().padStart(2, "0")}:${minute
+      .toString()
+      .padStart(2, "0")}`
+  })
+
+  const bookedDates = Array.from(
+    { length: 3 },
+    (_, i) => new Date(2025, 5, 17 + i)
+  )
+
+  return (
+    <Card className="gap-0 p-0">
+      <CardContent className="relative p-0 md:pr-48">
+        <div className="p-6">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            defaultMonth={date}
+            disabled={bookedDates}
+            showOutsideDays={false}
+            modifiers={{
+              booked: bookedDates,
+            }}
+            modifiersClassNames={{
+              booked: "[&>button]:line-through opacity-100",
+            }}
+            className="bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]"
+            formatters={{
+              formatWeekdayName: (date) => {
+                return date.toLocaleString("en-US", { weekday: "short" })
+              },
+            }}
+          />
+        </div>
+        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0">
+          <div className="grid gap-2">
+            {timeSlots.map((time) => (
+              <Button
+                key={time}
+                variant={selectedTime === time ? "default" : "outline"}
+                onClick={() => setSelectedTime(time)}
+                className="w-full shadow-none"
+              >
+                {time}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-4 border-t !py-5 px-6 md:flex-row">
+        <div className="text-sm">
+          {date && selectedTime ? (
+            <>
+              Your meeting is booked for{" "}
+              <span className="font-medium">
+                {" "}
+                {date?.toLocaleDateString("en-US", {
+                  weekday: "long",
+                  day: "numeric",
+                  month: "long",
+                })}{" "}
+              </span>
+              at <span className="font-medium">{selectedTime}</span>.
+            </>
+          ) : (
+            <>Select a date and time for your meeting.</>
+          )}
+        </div>
+        <Button
+          disabled={!date || !selectedTime}
+          className="w-full md:ml-auto md:w-auto"
+          variant="outline"
+        >
+          Continue
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-21.tsx b/apps/www/__registry__/default/blocks/calendar-21.tsx
new file mode 100644
index 00000000000..4762f22b32c
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-21.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { DateRange } from "react-day-picker"
+
+import { Calendar, CalendarDayButton } from "@/registry/default/ui/calendar"
+
+export default function Calendar21() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 17),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={range?.from}
+      selected={range}
+      onSelect={setRange}
+      numberOfMonths={1}
+      captionLayout="dropdown"
+      className="rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      formatters={{
+        formatMonthDropdown: (date) => {
+          return date.toLocaleString("default", { month: "long" })
+        },
+      }}
+      components={{
+        DayButton: ({ children, modifiers, day, ...props }) => {
+          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+          return (
+            <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+              {children}
+              {!modifiers.outside && <span>{isWeekend ? "$220" : "$100"}</span>}
+            </CalendarDayButton>
+          )
+        },
+      }}
+    />
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-22.tsx b/apps/www/__registry__/default/blocks/calendar-22.tsx
new file mode 100644
index 00000000000..b1846847620
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-22.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar22() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-23.tsx b/apps/www/__registry__/default/blocks/calendar-23.tsx
new file mode 100644
index 00000000000..a1110c054ac
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-23.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar23() {
+  const [range, setRange] = React.useState<DateRange | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-24.tsx b/apps/www/__registry__/default/blocks/calendar-24.tsx
new file mode 100644
index 00000000000..19f1fd0d036
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-24.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar24() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-32 justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="time" className="px-1">
+          Time
+        </Label>
+        <Input
+          type="time"
+          id="time"
+          step="1"
+          defaultValue="10:30:00"
+          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-25.tsx b/apps/www/__registry__/default/blocks/calendar-25.tsx
new file mode 100644
index 00000000000..bf01d207c38
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-25.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar25() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-full justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-26.tsx b/apps/www/__registry__/default/blocks/calendar-26.tsx
new file mode 100644
index 00000000000..20326233488
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-26.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar26() {
+  const [openFrom, setOpenFrom] = React.useState(false)
+  const [openTo, setOpenTo] = React.useState(false)
+  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [dateTo, setDateTo] = React.useState<Date | undefined>(
+    new Date("2025-06-03")
+  )
+
+  return (
+    <div className="flex w-full max-w-64 min-w-0 flex-col gap-6">
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-from" className="px-1">
+            Check-in
+          </Label>
+          <Popover open={openFrom} onOpenChange={setOpenFrom}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-from"
+                className="w-full justify-between font-normal"
+              >
+                {dateFrom
+                  ? dateFrom.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateFrom}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateFrom(date)
+                  setOpenFrom(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="invisible px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-to" className="px-1">
+            Check-out
+          </Label>
+          <Popover open={openTo} onOpenChange={setOpenTo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-to"
+                className="w-full justify-between font-normal"
+              >
+                {dateTo
+                  ? dateTo.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateTo}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateTo(date)
+                  setOpenTo(false)
+                }}
+                disabled={dateFrom && { before: dateFrom }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="invisible px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-27.tsx b/apps/www/__registry__/default/blocks/calendar-27.tsx
new file mode 100644
index 00000000000..ebc120422d9
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-27.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+const chartData = [
+  { date: "2025-06-01", visitors: 178 },
+  { date: "2025-06-02", visitors: 470 },
+  { date: "2025-06-03", visitors: 103 },
+  { date: "2025-06-04", visitors: 439 },
+  { date: "2025-06-05", visitors: 88 },
+  { date: "2025-06-06", visitors: 294 },
+  { date: "2025-06-07", visitors: 323 },
+  { date: "2025-06-08", visitors: 385 },
+  { date: "2025-06-09", visitors: 438 },
+  { date: "2025-06-10", visitors: 155 },
+  { date: "2025-06-11", visitors: 92 },
+  { date: "2025-06-12", visitors: 492 },
+  { date: "2025-06-13", visitors: 81 },
+  { date: "2025-06-14", visitors: 426 },
+  { date: "2025-06-15", visitors: 307 },
+  { date: "2025-06-16", visitors: 371 },
+  { date: "2025-06-17", visitors: 475 },
+  { date: "2025-06-18", visitors: 107 },
+  { date: "2025-06-19", visitors: 341 },
+  { date: "2025-06-20", visitors: 408 },
+  { date: "2025-06-21", visitors: 169 },
+  { date: "2025-06-22", visitors: 317 },
+  { date: "2025-06-23", visitors: 480 },
+  { date: "2025-06-24", visitors: 132 },
+  { date: "2025-06-25", visitors: 141 },
+  { date: "2025-06-26", visitors: 434 },
+  { date: "2025-06-27", visitors: 448 },
+  { date: "2025-06-28", visitors: 149 },
+  { date: "2025-06-29", visitors: 103 },
+  { date: "2025-06-30", visitors: 446 },
+]
+
+const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export default function Calendar27() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 5),
+    to: new Date(2025, 5, 20),
+  })
+  const filteredData = React.useMemo(() => {
+    if (!range?.from && !range?.to) {
+      return chartData
+    }
+
+    return chartData.filter((item) => {
+      const date = new Date(item.date)
+      return date >= range.from! && date <= range.to!
+    })
+  }, [range])
+
+  return (
+    <Card className="@container/card w-full max-w-xl">
+      <CardHeader className="@md/card:grid relative flex flex-col border-b">
+        <CardTitle>Web Analytics</CardTitle>
+        <CardDescription>
+          Showing total visitors for this month.
+        </CardDescription>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="absolute right-4 top-4">
+              <CalendarIcon />
+              {range?.from && range?.to
+                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+                : "June 2025"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              className="w-full"
+              mode="range"
+              defaultMonth={range?.from}
+              selected={range}
+              onSelect={setRange}
+              disableNavigation
+              startMonth={range?.from}
+              fixedWeeks
+              showOutsideDays
+              disabled={{
+                after: new Date(2025, 5, 31),
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+      <CardContent className="px-4">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={filteredData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={20}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="visitors"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey="visitors" fill={`var(--color-visitors)`} radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="border-t pt-6">
+        <div className="text-sm">
+          You had{" "}
+          <span className="font-semibold">{total.toLocaleString()}</span>{" "}
+          visitors for the month of June.
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-28.tsx b/apps/www/__registry__/default/blocks/calendar-28.tsx
new file mode 100644
index 00000000000..2cd72f75a1c
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-28.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+function isValidDate(date: Date | undefined) {
+  if (!date) {
+    return false
+  }
+  return !isNaN(date.getTime())
+}
+
+export default function Calendar28() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+  const [value, setValue] = React.useState(formatDate(date))
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Subscription Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="June 01, 2025"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            const date = new Date(e.target.value)
+            setValue(e.target.value)
+            if (isValidDate(date)) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto overflow-hidden p-0"
+            align="end"
+            alignOffset={-8}
+            sideOffset={10}
+          >
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-29.tsx b/apps/www/__registry__/default/blocks/calendar-29.tsx
new file mode 100644
index 00000000000..22af3602507
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-29.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { parseDate } from "chrono-node"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+export default function Calendar29() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("In 2 days")
+  const [date, setDate] = React.useState<Date | undefined>(
+    parseDate(value) || undefined
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Schedule Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="Tomorrow or next week"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            setValue(e.target.value)
+            const date = parseDate(e.target.value)
+            if (date) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="text-muted-foreground px-1 text-sm">
+        Your post will be published on{" "}
+        <span className="font-medium">{formatDate(date)}</span>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-30.tsx b/apps/www/__registry__/default/blocks/calendar-30.tsx
new file mode 100644
index 00000000000..5cb30d9841f
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-30.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar30() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? formatDateRange(range.from, range.to, {
+                  includeTime: false,
+                })
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-31.tsx b/apps/www/__registry__/default/blocks/calendar-31.tsx
new file mode 100644
index 00000000000..6c2c185df10
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-31.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+const events = [
+  {
+    title: "Team Sync Meeting",
+    from: "2025-06-12T09:00:00",
+    to: "2025-06-12T10:00:00",
+  },
+  {
+    title: "Design Review",
+    from: "2025-06-12T11:30:00",
+    to: "2025-06-12T12:30:00",
+  },
+  {
+    title: "Client Presentation",
+    from: "2025-06-12T14:00:00",
+    to: "2025-06-12T15:00:00",
+  },
+]
+
+export default function Calendar31() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+          required
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full items-center justify-between px-1">
+          <div className="text-sm font-medium">
+            {date?.toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+            })}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            title="Add Event"
+          >
+            <PlusIcon />
+            <span className="sr-only">Add Event</span>
+          </Button>
+        </div>
+        <div className="flex w-full flex-col gap-2">
+          {events.map((event) => (
+            <div
+              key={event.title}
+              className="bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full"
+            >
+              <div className="font-medium">{event.title}</div>
+              <div className="text-muted-foreground text-xs">
+                {formatDateRange(new Date(event.from), new Date(event.to))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/calendar-32.tsx b/apps/www/__registry__/default/blocks/calendar-32.tsx
new file mode 100644
index 00000000000..afd47c1497f
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/calendar-32.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { CalendarPlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/default/ui/drawer"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar32() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <CalendarPlusIcon />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="w-auto overflow-hidden p-0">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select date</DrawerTitle>
+            <DrawerDescription>Set your date of birth</DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
+          />
+        </DrawerContent>
+      </Drawer>
+      <div className="text-muted-foreground px-1 text-sm">
+        This example works best on mobile.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/block/chart-area-axes.tsx b/apps/www/__registry__/default/blocks/chart-area-axes.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-axes.tsx
rename to apps/www/__registry__/default/blocks/chart-area-axes.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-default.tsx b/apps/www/__registry__/default/blocks/chart-area-default.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-default.tsx
rename to apps/www/__registry__/default/blocks/chart-area-default.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-gradient.tsx b/apps/www/__registry__/default/blocks/chart-area-gradient.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-gradient.tsx
rename to apps/www/__registry__/default/blocks/chart-area-gradient.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-icons.tsx b/apps/www/__registry__/default/blocks/chart-area-icons.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-icons.tsx
rename to apps/www/__registry__/default/blocks/chart-area-icons.tsx
diff --git a/apps/www/__registry__/default/blocks/chart-area-interactive.tsx b/apps/www/__registry__/default/blocks/chart-area-interactive.tsx
new file mode 100644
index 00000000000..16cbcca59f1
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const [timeRange, setTimeRange] = React.useState("90d")
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card>
+      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
+        <div className="grid flex-1 gap-1 text-center sm:text-left">
+          <CardTitle>Area Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <Select value={timeRange} onValueChange={setTimeRange}>
+          <SelectTrigger
+            className="w-[160px] rounded-lg sm:ml-auto"
+            aria-label="Select a value"
+          >
+            <SelectValue placeholder="Last 3 months" />
+          </SelectTrigger>
+          <SelectContent className="rounded-xl">
+            <SelectItem value="90d" className="rounded-lg">
+              Last 3 months
+            </SelectItem>
+            <SelectItem value="30d" className="rounded-lg">
+              Last 30 days
+            </SelectItem>
+            <SelectItem value="7d" className="rounded-lg">
+              Last 7 days
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/block/chart-area-legend.tsx b/apps/www/__registry__/default/blocks/chart-area-legend.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-legend.tsx
rename to apps/www/__registry__/default/blocks/chart-area-legend.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-linear.tsx b/apps/www/__registry__/default/blocks/chart-area-linear.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-linear.tsx
rename to apps/www/__registry__/default/blocks/chart-area-linear.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-stacked-expand.tsx b/apps/www/__registry__/default/blocks/chart-area-stacked-expand.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-stacked-expand.tsx
rename to apps/www/__registry__/default/blocks/chart-area-stacked-expand.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-stacked.tsx b/apps/www/__registry__/default/blocks/chart-area-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-stacked.tsx
rename to apps/www/__registry__/default/blocks/chart-area-stacked.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-step.tsx b/apps/www/__registry__/default/blocks/chart-area-step.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-step.tsx
rename to apps/www/__registry__/default/blocks/chart-area-step.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-active.tsx b/apps/www/__registry__/default/blocks/chart-bar-active.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-active.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-active.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-default.tsx b/apps/www/__registry__/default/blocks/chart-bar-default.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-default.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-default.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-horizontal.tsx b/apps/www/__registry__/default/blocks/chart-bar-horizontal.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-horizontal.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-horizontal.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-interactive.tsx b/apps/www/__registry__/default/blocks/chart-bar-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-interactive.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-interactive.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-label-custom.tsx b/apps/www/__registry__/default/blocks/chart-bar-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-label-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-label-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-label.tsx b/apps/www/__registry__/default/blocks/chart-bar-label.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-label.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-label.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-mixed.tsx b/apps/www/__registry__/default/blocks/chart-bar-mixed.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-mixed.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-mixed.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-multiple.tsx b/apps/www/__registry__/default/blocks/chart-bar-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-multiple.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-multiple.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-negative.tsx b/apps/www/__registry__/default/blocks/chart-bar-negative.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-negative.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-negative.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-stacked.tsx b/apps/www/__registry__/default/blocks/chart-bar-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-stacked.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-stacked.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-default.tsx b/apps/www/__registry__/default/blocks/chart-line-default.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-default.tsx
rename to apps/www/__registry__/default/blocks/chart-line-default.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-dots-colors.tsx b/apps/www/__registry__/default/blocks/chart-line-dots-colors.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-dots-colors.tsx
rename to apps/www/__registry__/default/blocks/chart-line-dots-colors.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-dots-custom.tsx b/apps/www/__registry__/default/blocks/chart-line-dots-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-dots-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-line-dots-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-dots.tsx b/apps/www/__registry__/default/blocks/chart-line-dots.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-dots.tsx
rename to apps/www/__registry__/default/blocks/chart-line-dots.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-interactive.tsx b/apps/www/__registry__/default/blocks/chart-line-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-interactive.tsx
rename to apps/www/__registry__/default/blocks/chart-line-interactive.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-label-custom.tsx b/apps/www/__registry__/default/blocks/chart-line-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-label-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-line-label-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-label.tsx b/apps/www/__registry__/default/blocks/chart-line-label.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-label.tsx
rename to apps/www/__registry__/default/blocks/chart-line-label.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-linear.tsx b/apps/www/__registry__/default/blocks/chart-line-linear.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-linear.tsx
rename to apps/www/__registry__/default/blocks/chart-line-linear.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-multiple.tsx b/apps/www/__registry__/default/blocks/chart-line-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-multiple.tsx
rename to apps/www/__registry__/default/blocks/chart-line-multiple.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-step.tsx b/apps/www/__registry__/default/blocks/chart-line-step.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-step.tsx
rename to apps/www/__registry__/default/blocks/chart-line-step.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-donut-active.tsx b/apps/www/__registry__/default/blocks/chart-pie-donut-active.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-donut-active.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-donut-active.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-donut-text.tsx b/apps/www/__registry__/default/blocks/chart-pie-donut-text.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-donut-text.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-donut-text.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-donut.tsx b/apps/www/__registry__/default/blocks/chart-pie-donut.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-donut.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-donut.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-interactive.tsx b/apps/www/__registry__/default/blocks/chart-pie-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-interactive.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-interactive.tsx
diff --git a/apps/www/__registry__/default/blocks/chart-pie-label-custom.tsx b/apps/www/__registry__/default/blocks/chart-pie-label-custom.tsx
new file mode 100644
index 00000000000..4b8c616214e
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/chart-pie-label-custom.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A pie chart with a custom label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Custom Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] px-0"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              labelLine={false}
+              label={({ payload, ...props }) => {
+                return (
+                  <text
+                    cx={props.cx}
+                    cy={props.cy}
+                    x={props.x}
+                    y={props.y}
+                    textAnchor={props.textAnchor}
+                    dominantBaseline={props.dominantBaseline}
+                    fill="hsla(var(--foreground))"
+                  >
+                    {payload.visitors}
+                  </text>
+                )
+              }}
+              nameKey="browser"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/chart-pie-label-list.tsx b/apps/www/__registry__/default/blocks/chart-pie-label-list.tsx
new file mode 100644
index 00000000000..6b083fb02a1
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/chart-pie-label-list.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A pie chart with a label list"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Label List</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+            />
+            <Pie data={chartData} dataKey="visitors">
+              <LabelList
+                dataKey="browser"
+                className="fill-background"
+                stroke="none"
+                fontSize={12}
+                formatter={(value: keyof typeof chartConfig) =>
+                  chartConfig[value]?.label
+                }
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/block/chart-pie-label.tsx b/apps/www/__registry__/default/blocks/chart-pie-label.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-label.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-label.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-legend.tsx b/apps/www/__registry__/default/blocks/chart-pie-legend.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-legend.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-legend.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-separator-none.tsx b/apps/www/__registry__/default/blocks/chart-pie-separator-none.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-separator-none.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-separator-none.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-simple.tsx b/apps/www/__registry__/default/blocks/chart-pie-simple.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-simple.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-simple.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-stacked.tsx b/apps/www/__registry__/default/blocks/chart-pie-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-stacked.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-stacked.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-default.tsx b/apps/www/__registry__/default/blocks/chart-radar-default.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-default.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-default.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-dots.tsx b/apps/www/__registry__/default/blocks/chart-radar-dots.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-dots.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-dots.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-circle-fill.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-circle-fill.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-circle-fill.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-circle-fill.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-circle-no-lines.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-circle-no-lines.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-circle-no-lines.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-circle-no-lines.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-circle.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-circle.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-circle.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-circle.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-custom.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-fill.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-fill.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-fill.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-fill.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-none.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-none.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-none.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-none.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-icons.tsx b/apps/www/__registry__/default/blocks/chart-radar-icons.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-icons.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-icons.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-label-custom.tsx b/apps/www/__registry__/default/blocks/chart-radar-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-label-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-label-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-legend.tsx b/apps/www/__registry__/default/blocks/chart-radar-legend.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-legend.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-legend.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-lines-only.tsx b/apps/www/__registry__/default/blocks/chart-radar-lines-only.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-lines-only.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-lines-only.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-multiple.tsx b/apps/www/__registry__/default/blocks/chart-radar-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-multiple.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-multiple.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-radius.tsx b/apps/www/__registry__/default/blocks/chart-radar-radius.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-radius.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-radius.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-grid.tsx b/apps/www/__registry__/default/blocks/chart-radial-grid.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-grid.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-grid.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-label.tsx b/apps/www/__registry__/default/blocks/chart-radial-label.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-label.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-label.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-shape.tsx b/apps/www/__registry__/default/blocks/chart-radial-shape.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-shape.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-shape.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-simple.tsx b/apps/www/__registry__/default/blocks/chart-radial-simple.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-simple.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-simple.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-stacked.tsx b/apps/www/__registry__/default/blocks/chart-radial-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-stacked.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-stacked.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-text.tsx b/apps/www/__registry__/default/blocks/chart-radial-text.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-text.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-text.tsx
diff --git a/apps/www/__registry__/default/block/chart-tooltip-advanced.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-advanced.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-advanced.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-advanced.tsx
diff --git a/apps/www/__registry__/default/blocks/chart-tooltip-default.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..e1ed0870752
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Default</CardTitle>
+        <CardDescription>
+          Default tooltip with ChartTooltipContent.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/block/chart-tooltip-formatter.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-formatter.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-formatter.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-formatter.tsx
diff --git a/apps/www/__registry__/default/block/chart-tooltip-icons.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-icons.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-icons.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-icons.tsx
diff --git a/apps/www/__registry__/default/blocks/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..8f59a417cde
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/chart-tooltip-indicator-line.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Line Indicator</CardTitle>
+        <CardDescription>Tooltip with line indicator.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="line" />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/block/chart-tooltip-indicator-none.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-indicator-none.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-indicator-none.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-indicator-none.tsx
diff --git a/apps/www/__registry__/default/block/chart-tooltip-label-custom.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-label-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-label-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-tooltip-label-formatter.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-label-formatter.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-label-formatter.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-label-formatter.tsx
diff --git a/apps/www/__registry__/default/block/chart-tooltip-label-none.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-label-none.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-label-none.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-label-none.tsx
diff --git a/apps/www/__registry__/default/blocks/dashboard-01/page.tsx b/apps/www/__registry__/default/blocks/dashboard-01/page.tsx
new file mode 100644
index 00000000000..083e2a7f012
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/dashboard-01/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "@/registry/default/blocks/dashboard-01/components/app-sidebar"
+import { ChartAreaInteractive } from "@/registry/default/blocks/dashboard-01/components/chart-area-interactive"
+import { DataTable } from "@/registry/default/blocks/dashboard-01/components/data-table"
+import { SectionCards } from "@/registry/default/blocks/dashboard-01/components/section-cards"
+import { SiteHeader } from "@/registry/default/blocks/dashboard-01/components/site-header"
+import { SidebarInset, SidebarProvider } from "@/registry/default/ui/sidebar"
+
+import data from "./data.json"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+              <SectionCards />
+              <div className="px-4 lg:px-6">
+                <ChartAreaInteractive />
+              </div>
+              <DataTable data={data} />
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/login-01/page.tsx b/apps/www/__registry__/default/blocks/login-01/page.tsx
new file mode 100644
index 00000000000..6e1c2cb4db1
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/login-01/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/default/blocks/login-01/components/login-form"
+
+export default function Page() {
+  return (
+    <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>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/login-02/page.tsx b/apps/www/__registry__/default/blocks/login-02/page.tsx
new file mode 100644
index 00000000000..56b73d32467
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/login-02/page.tsx
@@ -0,0 +1,32 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/default/blocks/login-02/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/login-03/page.tsx b/apps/www/__registry__/default/blocks/login-03/page.tsx
new file mode 100644
index 00000000000..15a0ca451c8
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/login-03/page.tsx
@@ -0,0 +1,19 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/default/blocks/login-03/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/login-04/page.tsx b/apps/www/__registry__/default/blocks/login-04/page.tsx
new file mode 100644
index 00000000000..d302b4fa447
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/login-04/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/default/blocks/login-04/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/login-05/page.tsx b/apps/www/__registry__/default/blocks/login-05/page.tsx
new file mode 100644
index 00000000000..b9baa00d537
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/login-05/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/default/blocks/login-05/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-01/page.tsx b/apps/www/__registry__/default/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000000..090e3eb248d
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-01/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-01/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-02/page.tsx b/apps/www/__registry__/default/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000000..179af7cf288
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-02/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-02/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-03/page.tsx b/apps/www/__registry__/default/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000000..a3b34b10804
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-03/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-03/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+          <div className="flex items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-04/page.tsx b/apps/www/__registry__/default/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000000..8a0dbbff759
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-04/page.tsx
@@ -0,0 +1,56 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-04/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "19rem",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-05/page.tsx b/apps/www/__registry__/default/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000000..3bfc7a8b3f1
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-05/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-05/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-06/page.tsx b/apps/www/__registry__/default/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000000..028a7ba6209
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-06/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-06/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-07/page.tsx b/apps/www/__registry__/default/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000000..1627996458d
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-07/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-07/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-08/page.tsx b/apps/www/__registry__/default/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000000..052b62b38cf
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-08/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-08/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-09/page.tsx b/apps/www/__registry__/default/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000000..6ed155ad79d
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-09/page.tsx
@@ -0,0 +1,54 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-09/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "350px",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Inbox</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-10/page.tsx b/apps/www/__registry__/default/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000000..a3570860058
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-10/page.tsx
@@ -0,0 +1,46 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-10/components/app-sidebar"
+import { NavActions } from "@/registry/default/blocks/sidebar-10/components/nav-actions"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-14 shrink-0 items-center gap-2">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+          <div className="ml-auto px-3">
+            <NavActions />
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-11/page.tsx b/apps/www/__registry__/default/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000000..3e60984c5eb
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-11/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-11/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">components</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">ui</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>button.tsx</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-12/page.tsx b/apps/www/__registry__/default/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000000..ac96a460267
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-12/page.tsx
@@ -0,0 +1,41 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-12/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbPage>October 2024</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+            {Array.from({ length: 20 }).map((_, i) => (
+              <div key={i} className="aspect-square rounded-xl bg-muted/50" />
+            ))}
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-13/page.tsx b/apps/www/__registry__/default/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000000..7bebc464af7
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-13/page.tsx
@@ -0,0 +1,9 @@
+import { SettingsDialog } from "@/registry/default/blocks/sidebar-13/components/settings-dialog"
+
+export default function Page() {
+  return (
+    <div className="flex h-svh items-center justify-center">
+      <SettingsDialog />
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-14/page.tsx b/apps/www/__registry__/default/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000000..a299c067deb
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-14/page.tsx
@@ -0,0 +1,48 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-14/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+      <AppSidebar side="right" />
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-15/page.tsx b/apps/www/__registry__/default/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000000..3bf6087ecee
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-15/page.tsx
@@ -0,0 +1,44 @@
+import { SidebarLeft } from "@/registry/default/blocks/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "@/registry/default/blocks/sidebar-15/components/sidebar-right"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarLeft />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+      <SidebarRight />
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/default/blocks/sidebar-16/page.tsx b/apps/www/__registry__/default/blocks/sidebar-16/page.tsx
new file mode 100644
index 00000000000..01313fb14e9
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-16/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-16/components/app-sidebar"
+import { SiteHeader } from "@/registry/default/blocks/sidebar-16/components/site-header"
+import { SidebarInset, SidebarProvider } from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a header and a search form."
+
+export default function Page() {
+  return (
+    <div className="[--header-height:calc(theme(spacing.14))]">
+      <SidebarProvider className="flex flex-col">
+        <SiteHeader />
+        <div className="flex flex-1">
+          <AppSidebar />
+          <SidebarInset>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+              <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+              </div>
+              <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+          </SidebarInset>
+        </div>
+      </SidebarProvider>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/block/chart-area-axes.tsx b/apps/www/__registry__/default/charts/chart-area-axes.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-axes.tsx
rename to apps/www/__registry__/default/charts/chart-area-axes.tsx
diff --git a/apps/www/registry/default/block/chart-area-default.tsx b/apps/www/__registry__/default/charts/chart-area-default.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-default.tsx
rename to apps/www/__registry__/default/charts/chart-area-default.tsx
diff --git a/apps/www/registry/default/block/chart-area-gradient.tsx b/apps/www/__registry__/default/charts/chart-area-gradient.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-gradient.tsx
rename to apps/www/__registry__/default/charts/chart-area-gradient.tsx
diff --git a/apps/www/registry/default/block/chart-area-icons.tsx b/apps/www/__registry__/default/charts/chart-area-icons.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-icons.tsx
rename to apps/www/__registry__/default/charts/chart-area-icons.tsx
diff --git a/apps/www/__registry__/default/charts/chart-area-interactive.tsx b/apps/www/__registry__/default/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000000..16cbcca59f1
--- /dev/null
+++ b/apps/www/__registry__/default/charts/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const [timeRange, setTimeRange] = React.useState("90d")
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card>
+      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
+        <div className="grid flex-1 gap-1 text-center sm:text-left">
+          <CardTitle>Area Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <Select value={timeRange} onValueChange={setTimeRange}>
+          <SelectTrigger
+            className="w-[160px] rounded-lg sm:ml-auto"
+            aria-label="Select a value"
+          >
+            <SelectValue placeholder="Last 3 months" />
+          </SelectTrigger>
+          <SelectContent className="rounded-xl">
+            <SelectItem value="90d" className="rounded-lg">
+              Last 3 months
+            </SelectItem>
+            <SelectItem value="30d" className="rounded-lg">
+              Last 30 days
+            </SelectItem>
+            <SelectItem value="7d" className="rounded-lg">
+              Last 7 days
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/block/chart-area-legend.tsx b/apps/www/__registry__/default/charts/chart-area-legend.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-legend.tsx
rename to apps/www/__registry__/default/charts/chart-area-legend.tsx
diff --git a/apps/www/registry/default/block/chart-area-linear.tsx b/apps/www/__registry__/default/charts/chart-area-linear.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-linear.tsx
rename to apps/www/__registry__/default/charts/chart-area-linear.tsx
diff --git a/apps/www/registry/default/block/chart-area-stacked-expand.tsx b/apps/www/__registry__/default/charts/chart-area-stacked-expand.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-stacked-expand.tsx
rename to apps/www/__registry__/default/charts/chart-area-stacked-expand.tsx
diff --git a/apps/www/registry/default/block/chart-area-stacked.tsx b/apps/www/__registry__/default/charts/chart-area-stacked.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-stacked.tsx
rename to apps/www/__registry__/default/charts/chart-area-stacked.tsx
diff --git a/apps/www/registry/default/block/chart-area-step.tsx b/apps/www/__registry__/default/charts/chart-area-step.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-step.tsx
rename to apps/www/__registry__/default/charts/chart-area-step.tsx
diff --git a/apps/www/registry/default/block/chart-bar-active.tsx b/apps/www/__registry__/default/charts/chart-bar-active.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-active.tsx
rename to apps/www/__registry__/default/charts/chart-bar-active.tsx
diff --git a/apps/www/registry/default/block/chart-bar-default.tsx b/apps/www/__registry__/default/charts/chart-bar-default.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-default.tsx
rename to apps/www/__registry__/default/charts/chart-bar-default.tsx
diff --git a/apps/www/registry/default/block/chart-bar-horizontal.tsx b/apps/www/__registry__/default/charts/chart-bar-horizontal.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-horizontal.tsx
rename to apps/www/__registry__/default/charts/chart-bar-horizontal.tsx
diff --git a/apps/www/registry/default/block/chart-bar-interactive.tsx b/apps/www/__registry__/default/charts/chart-bar-interactive.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-interactive.tsx
rename to apps/www/__registry__/default/charts/chart-bar-interactive.tsx
diff --git a/apps/www/registry/default/block/chart-bar-label-custom.tsx b/apps/www/__registry__/default/charts/chart-bar-label-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-label-custom.tsx
rename to apps/www/__registry__/default/charts/chart-bar-label-custom.tsx
diff --git a/apps/www/registry/default/block/chart-bar-label.tsx b/apps/www/__registry__/default/charts/chart-bar-label.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-label.tsx
rename to apps/www/__registry__/default/charts/chart-bar-label.tsx
diff --git a/apps/www/registry/default/block/chart-bar-mixed.tsx b/apps/www/__registry__/default/charts/chart-bar-mixed.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-mixed.tsx
rename to apps/www/__registry__/default/charts/chart-bar-mixed.tsx
diff --git a/apps/www/registry/default/block/chart-bar-multiple.tsx b/apps/www/__registry__/default/charts/chart-bar-multiple.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-multiple.tsx
rename to apps/www/__registry__/default/charts/chart-bar-multiple.tsx
diff --git a/apps/www/registry/default/block/chart-bar-negative.tsx b/apps/www/__registry__/default/charts/chart-bar-negative.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-negative.tsx
rename to apps/www/__registry__/default/charts/chart-bar-negative.tsx
diff --git a/apps/www/registry/default/block/chart-bar-stacked.tsx b/apps/www/__registry__/default/charts/chart-bar-stacked.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-stacked.tsx
rename to apps/www/__registry__/default/charts/chart-bar-stacked.tsx
diff --git a/apps/www/registry/default/block/chart-line-default.tsx b/apps/www/__registry__/default/charts/chart-line-default.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-default.tsx
rename to apps/www/__registry__/default/charts/chart-line-default.tsx
diff --git a/apps/www/registry/default/block/chart-line-dots-colors.tsx b/apps/www/__registry__/default/charts/chart-line-dots-colors.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-dots-colors.tsx
rename to apps/www/__registry__/default/charts/chart-line-dots-colors.tsx
diff --git a/apps/www/registry/default/block/chart-line-dots-custom.tsx b/apps/www/__registry__/default/charts/chart-line-dots-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-dots-custom.tsx
rename to apps/www/__registry__/default/charts/chart-line-dots-custom.tsx
diff --git a/apps/www/registry/default/block/chart-line-dots.tsx b/apps/www/__registry__/default/charts/chart-line-dots.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-dots.tsx
rename to apps/www/__registry__/default/charts/chart-line-dots.tsx
diff --git a/apps/www/registry/default/block/chart-line-interactive.tsx b/apps/www/__registry__/default/charts/chart-line-interactive.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-interactive.tsx
rename to apps/www/__registry__/default/charts/chart-line-interactive.tsx
diff --git a/apps/www/registry/default/block/chart-line-label-custom.tsx b/apps/www/__registry__/default/charts/chart-line-label-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-label-custom.tsx
rename to apps/www/__registry__/default/charts/chart-line-label-custom.tsx
diff --git a/apps/www/registry/default/block/chart-line-label.tsx b/apps/www/__registry__/default/charts/chart-line-label.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-label.tsx
rename to apps/www/__registry__/default/charts/chart-line-label.tsx
diff --git a/apps/www/registry/default/block/chart-line-linear.tsx b/apps/www/__registry__/default/charts/chart-line-linear.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-linear.tsx
rename to apps/www/__registry__/default/charts/chart-line-linear.tsx
diff --git a/apps/www/registry/default/block/chart-line-multiple.tsx b/apps/www/__registry__/default/charts/chart-line-multiple.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-multiple.tsx
rename to apps/www/__registry__/default/charts/chart-line-multiple.tsx
diff --git a/apps/www/registry/default/block/chart-line-step.tsx b/apps/www/__registry__/default/charts/chart-line-step.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-step.tsx
rename to apps/www/__registry__/default/charts/chart-line-step.tsx
diff --git a/apps/www/registry/default/block/chart-pie-donut-active.tsx b/apps/www/__registry__/default/charts/chart-pie-donut-active.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-donut-active.tsx
rename to apps/www/__registry__/default/charts/chart-pie-donut-active.tsx
diff --git a/apps/www/registry/default/block/chart-pie-donut-text.tsx b/apps/www/__registry__/default/charts/chart-pie-donut-text.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-donut-text.tsx
rename to apps/www/__registry__/default/charts/chart-pie-donut-text.tsx
diff --git a/apps/www/registry/default/block/chart-pie-donut.tsx b/apps/www/__registry__/default/charts/chart-pie-donut.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-donut.tsx
rename to apps/www/__registry__/default/charts/chart-pie-donut.tsx
diff --git a/apps/www/registry/default/block/chart-pie-interactive.tsx b/apps/www/__registry__/default/charts/chart-pie-interactive.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-interactive.tsx
rename to apps/www/__registry__/default/charts/chart-pie-interactive.tsx
diff --git a/apps/www/__registry__/default/charts/chart-pie-label-custom.tsx b/apps/www/__registry__/default/charts/chart-pie-label-custom.tsx
new file mode 100644
index 00000000000..4b8c616214e
--- /dev/null
+++ b/apps/www/__registry__/default/charts/chart-pie-label-custom.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A pie chart with a custom label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Custom Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] px-0"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              labelLine={false}
+              label={({ payload, ...props }) => {
+                return (
+                  <text
+                    cx={props.cx}
+                    cy={props.cy}
+                    x={props.x}
+                    y={props.y}
+                    textAnchor={props.textAnchor}
+                    dominantBaseline={props.dominantBaseline}
+                    fill="hsla(var(--foreground))"
+                  >
+                    {payload.visitors}
+                  </text>
+                )
+              }}
+              nameKey="browser"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/default/charts/chart-pie-label-list.tsx b/apps/www/__registry__/default/charts/chart-pie-label-list.tsx
new file mode 100644
index 00000000000..6b083fb02a1
--- /dev/null
+++ b/apps/www/__registry__/default/charts/chart-pie-label-list.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A pie chart with a label list"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Label List</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+            />
+            <Pie data={chartData} dataKey="visitors">
+              <LabelList
+                dataKey="browser"
+                className="fill-background"
+                stroke="none"
+                fontSize={12}
+                formatter={(value: keyof typeof chartConfig) =>
+                  chartConfig[value]?.label
+                }
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/block/chart-pie-label.tsx b/apps/www/__registry__/default/charts/chart-pie-label.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-label.tsx
rename to apps/www/__registry__/default/charts/chart-pie-label.tsx
diff --git a/apps/www/registry/default/block/chart-pie-legend.tsx b/apps/www/__registry__/default/charts/chart-pie-legend.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-legend.tsx
rename to apps/www/__registry__/default/charts/chart-pie-legend.tsx
diff --git a/apps/www/registry/default/block/chart-pie-separator-none.tsx b/apps/www/__registry__/default/charts/chart-pie-separator-none.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-separator-none.tsx
rename to apps/www/__registry__/default/charts/chart-pie-separator-none.tsx
diff --git a/apps/www/registry/default/block/chart-pie-simple.tsx b/apps/www/__registry__/default/charts/chart-pie-simple.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-simple.tsx
rename to apps/www/__registry__/default/charts/chart-pie-simple.tsx
diff --git a/apps/www/registry/default/block/chart-pie-stacked.tsx b/apps/www/__registry__/default/charts/chart-pie-stacked.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-stacked.tsx
rename to apps/www/__registry__/default/charts/chart-pie-stacked.tsx
diff --git a/apps/www/registry/default/block/chart-radar-default.tsx b/apps/www/__registry__/default/charts/chart-radar-default.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-default.tsx
rename to apps/www/__registry__/default/charts/chart-radar-default.tsx
diff --git a/apps/www/registry/default/block/chart-radar-dots.tsx b/apps/www/__registry__/default/charts/chart-radar-dots.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-dots.tsx
rename to apps/www/__registry__/default/charts/chart-radar-dots.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-circle-fill.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-circle-fill.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-circle-fill.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-circle-fill.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-circle-no-lines.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-circle-no-lines.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-circle-no-lines.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-circle-no-lines.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-circle.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-circle.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-circle.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-circle.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-custom.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-custom.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-custom.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-fill.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-fill.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-fill.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-fill.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-none.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-none.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-none.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-none.tsx
diff --git a/apps/www/registry/default/block/chart-radar-icons.tsx b/apps/www/__registry__/default/charts/chart-radar-icons.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-icons.tsx
rename to apps/www/__registry__/default/charts/chart-radar-icons.tsx
diff --git a/apps/www/registry/default/block/chart-radar-label-custom.tsx b/apps/www/__registry__/default/charts/chart-radar-label-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-label-custom.tsx
rename to apps/www/__registry__/default/charts/chart-radar-label-custom.tsx
diff --git a/apps/www/registry/default/block/chart-radar-legend.tsx b/apps/www/__registry__/default/charts/chart-radar-legend.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-legend.tsx
rename to apps/www/__registry__/default/charts/chart-radar-legend.tsx
diff --git a/apps/www/registry/default/block/chart-radar-lines-only.tsx b/apps/www/__registry__/default/charts/chart-radar-lines-only.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-lines-only.tsx
rename to apps/www/__registry__/default/charts/chart-radar-lines-only.tsx
diff --git a/apps/www/registry/default/block/chart-radar-multiple.tsx b/apps/www/__registry__/default/charts/chart-radar-multiple.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-multiple.tsx
rename to apps/www/__registry__/default/charts/chart-radar-multiple.tsx
diff --git a/apps/www/registry/default/block/chart-radar-radius.tsx b/apps/www/__registry__/default/charts/chart-radar-radius.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-radius.tsx
rename to apps/www/__registry__/default/charts/chart-radar-radius.tsx
diff --git a/apps/www/registry/default/block/chart-radial-grid.tsx b/apps/www/__registry__/default/charts/chart-radial-grid.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-grid.tsx
rename to apps/www/__registry__/default/charts/chart-radial-grid.tsx
diff --git a/apps/www/registry/default/block/chart-radial-label.tsx b/apps/www/__registry__/default/charts/chart-radial-label.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-label.tsx
rename to apps/www/__registry__/default/charts/chart-radial-label.tsx
diff --git a/apps/www/registry/default/block/chart-radial-shape.tsx b/apps/www/__registry__/default/charts/chart-radial-shape.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-shape.tsx
rename to apps/www/__registry__/default/charts/chart-radial-shape.tsx
diff --git a/apps/www/registry/default/block/chart-radial-simple.tsx b/apps/www/__registry__/default/charts/chart-radial-simple.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-simple.tsx
rename to apps/www/__registry__/default/charts/chart-radial-simple.tsx
diff --git a/apps/www/registry/default/block/chart-radial-stacked.tsx b/apps/www/__registry__/default/charts/chart-radial-stacked.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-stacked.tsx
rename to apps/www/__registry__/default/charts/chart-radial-stacked.tsx
diff --git a/apps/www/registry/default/block/chart-radial-text.tsx b/apps/www/__registry__/default/charts/chart-radial-text.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-text.tsx
rename to apps/www/__registry__/default/charts/chart-radial-text.tsx
diff --git a/apps/www/registry/default/block/chart-tooltip-advanced.tsx b/apps/www/__registry__/default/charts/chart-tooltip-advanced.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-advanced.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-advanced.tsx
diff --git a/apps/www/__registry__/default/charts/chart-tooltip-default.tsx b/apps/www/__registry__/default/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..e1ed0870752
--- /dev/null
+++ b/apps/www/__registry__/default/charts/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Default</CardTitle>
+        <CardDescription>
+          Default tooltip with ChartTooltipContent.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/block/chart-tooltip-formatter.tsx b/apps/www/__registry__/default/charts/chart-tooltip-formatter.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-formatter.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-formatter.tsx
diff --git a/apps/www/registry/default/block/chart-tooltip-icons.tsx b/apps/www/__registry__/default/charts/chart-tooltip-icons.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-icons.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-icons.tsx
diff --git a/apps/www/__registry__/default/charts/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/default/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..8f59a417cde
--- /dev/null
+++ b/apps/www/__registry__/default/charts/chart-tooltip-indicator-line.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Line Indicator</CardTitle>
+        <CardDescription>Tooltip with line indicator.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="line" />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/block/chart-tooltip-indicator-none.tsx b/apps/www/__registry__/default/charts/chart-tooltip-indicator-none.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-indicator-none.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-indicator-none.tsx
diff --git a/apps/www/registry/default/block/chart-tooltip-label-custom.tsx b/apps/www/__registry__/default/charts/chart-tooltip-label-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-label-custom.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-label-custom.tsx
diff --git a/apps/www/registry/default/block/chart-tooltip-label-formatter.tsx b/apps/www/__registry__/default/charts/chart-tooltip-label-formatter.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-label-formatter.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-label-formatter.tsx
diff --git a/apps/www/registry/default/block/chart-tooltip-label-none.tsx b/apps/www/__registry__/default/charts/chart-tooltip-label-none.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-label-none.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-label-none.tsx
diff --git a/apps/www/__registry__/icons.tsx b/apps/www/__registry__/icons.tsx
new file mode 100644
index 00000000000..3c8f028fcb3
--- /dev/null
+++ b/apps/www/__registry__/icons.tsx
@@ -0,0 +1,451 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import * as React from "react"
+
+export const Icons = {
+  AlertCircle: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.AlertCircle,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ExclamationTriangleIcon,
+      }))
+    ),
+  },
+  ArrowLeft: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ArrowLeft,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ArrowLeftIcon,
+      }))
+    ),
+  },
+  ArrowRight: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ArrowRight,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ArrowRightIcon,
+      }))
+    ),
+  },
+  ArrowUpDown: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ArrowUpDown,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.CaretSortIcon,
+      }))
+    ),
+  },
+  BellRing: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.BellRing,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.BellIcon,
+      }))
+    ),
+  },
+  Bold: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Bold,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.FontBoldIcon,
+      }))
+    ),
+  },
+  Calculator: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Calculator,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ComponentPlaceholderIcon,
+      }))
+    ),
+  },
+  Calendar: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Calendar,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.CalendarIcon,
+      }))
+    ),
+  },
+  Check: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Check,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.CheckIcon,
+      }))
+    ),
+  },
+  ChevronDown: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ChevronDown,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ChevronDownIcon,
+      }))
+    ),
+  },
+  ChevronLeft: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ChevronLeft,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ChevronLeftIcon,
+      }))
+    ),
+  },
+  ChevronRight: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ChevronRight,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ChevronRightIcon,
+      }))
+    ),
+  },
+  ChevronUp: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ChevronUp,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ChevronUpIcon,
+      }))
+    ),
+  },
+  ChevronsUpDown: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ChevronsUpDown,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.CaretSortIcon,
+      }))
+    ),
+  },
+  Circle: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Circle,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.DotFilledIcon,
+      }))
+    ),
+  },
+  Copy: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Copy,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.CopyIcon,
+      }))
+    ),
+  },
+  CreditCard: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.CreditCard,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ComponentPlaceholderIcon,
+      }))
+    ),
+  },
+  GripVertical: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.GripVertical,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.DragHandleDots2Icon,
+      }))
+    ),
+  },
+  Italic: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Italic,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.FontItalicIcon,
+      }))
+    ),
+  },
+  Loader2: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Loader2,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ReloadIcon,
+      }))
+    ),
+  },
+  Mail: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Mail,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.EnvelopeClosedIcon,
+      }))
+    ),
+  },
+  MailOpen: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.MailOpen,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.EnvelopeOpenIcon,
+      }))
+    ),
+  },
+  Minus: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Minus,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.MinusIcon,
+      }))
+    ),
+  },
+  Moon: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Moon,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.MoonIcon,
+      }))
+    ),
+  },
+  MoreHorizontal: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.MoreHorizontal,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.DotsHorizontalIcon,
+      }))
+    ),
+  },
+  PanelLeft: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.PanelLeft,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ViewVerticalIcon,
+      }))
+    ),
+  },
+  Plus: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Plus,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.PlusIcon,
+      }))
+    ),
+  },
+  Search: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Search,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.MagnifyingGlassIcon,
+      }))
+    ),
+  },
+  Send: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Send,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.PaperPlaneIcon,
+      }))
+    ),
+  },
+  Settings: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Settings,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.GearIcon,
+      }))
+    ),
+  },
+  Slash: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Slash,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.SlashIcon,
+      }))
+    ),
+  },
+  Smile: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Smile,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.FaceIcon,
+      }))
+    ),
+  },
+  Sun: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Sun,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.SunIcon,
+      }))
+    ),
+  },
+  Terminal: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Terminal,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.RocketIcon,
+      }))
+    ),
+  },
+  Underline: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Underline,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.UnderlineIcon,
+      }))
+    ),
+  },
+  User: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.User,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.PersonIcon,
+      }))
+    ),
+  },
+  X: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.X,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.Cross2Icon,
+      }))
+    ),
+  },
+}
diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
index 79e4865a846..29960874743 100644
--- a/apps/www/__registry__/index.tsx
+++ b/apps/www/__registry__/index.tsx
@@ -5,6716 +5,11714 @@ import * as React from "react"
 
 export const Index: Record<string, any> = {
   "new-york": {
+    "index": {
+      name: "index",
+      description: "",
+      type: "registry:style",
+      registryDependencies: ["utils"],
+      files: [],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/style/index")),
+      source: "",
+      meta: undefined,
+    },
+    "style": {
+      name: "style",
+      description: "",
+      type: "registry:style",
+      registryDependencies: ["utils"],
+      files: [],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/style/style")),
+      source: "",
+      meta: undefined,
+    },
     "accordion": {
       name: "accordion",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/accordion.tsx"],
+      files: [{
+        path: "registry/new-york/ui/accordion.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/accordion.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "alert": {
       name: "alert",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/alert.tsx"],
+      files: [{
+        path: "registry/new-york/ui/alert.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/alert.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "alert-dialog": {
       name: "alert-dialog",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/new-york/ui/alert-dialog.tsx"],
+      files: [{
+        path: "registry/new-york/ui/alert-dialog.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/alert-dialog.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "aspect-ratio": {
       name: "aspect-ratio",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/aspect-ratio.tsx"],
+      files: [{
+        path: "registry/new-york/ui/aspect-ratio.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/aspect-ratio.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "avatar": {
       name: "avatar",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/avatar.tsx"],
+      files: [{
+        path: "registry/new-york/ui/avatar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/avatar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "badge": {
       name: "badge",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/badge.tsx"],
+      files: [{
+        path: "registry/new-york/ui/badge.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/badge.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "breadcrumb": {
       name: "breadcrumb",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/breadcrumb.tsx"],
+      files: [{
+        path: "registry/new-york/ui/breadcrumb.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/breadcrumb.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "button": {
       name: "button",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/button.tsx"],
+      files: [{
+        path: "registry/new-york/ui/button.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "calendar": {
       name: "calendar",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/new-york/ui/calendar.tsx"],
+      files: [{
+        path: "registry/new-york/ui/calendar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/calendar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "card": {
       name: "card",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/card.tsx"],
+      files: [{
+        path: "registry/new-york/ui/card.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/card.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "carousel": {
       name: "carousel",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/new-york/ui/carousel.tsx"],
+      files: [{
+        path: "registry/new-york/ui/carousel.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/carousel.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "chart": {
       name: "chart",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["card"],
-      files: ["registry/new-york/ui/chart.tsx"],
+      files: [{
+        path: "registry/new-york/ui/chart.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/chart.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "checkbox": {
       name: "checkbox",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/checkbox.tsx"],
+      files: [{
+        path: "registry/new-york/ui/checkbox.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/checkbox.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "collapsible": {
       name: "collapsible",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/collapsible.tsx"],
+      files: [{
+        path: "registry/new-york/ui/collapsible.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/collapsible.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "command": {
       name: "command",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["dialog"],
-      files: ["registry/new-york/ui/command.tsx"],
+      files: [{
+        path: "registry/new-york/ui/command.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/command.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "context-menu": {
       name: "context-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/context-menu.tsx"],
+      files: [{
+        path: "registry/new-york/ui/context-menu.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/context-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "dialog": {
       name: "dialog",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/dialog.tsx"],
+      files: [{
+        path: "registry/new-york/ui/dialog.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/dialog.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "drawer": {
       name: "drawer",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/drawer.tsx"],
+      files: [{
+        path: "registry/new-york/ui/drawer.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/drawer.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "dropdown-menu": {
       name: "dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/dropdown-menu.tsx"],
+      files: [{
+        path: "registry/new-york/ui/dropdown-menu.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "form": {
       name: "form",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button","label"],
-      files: ["registry/new-york/ui/form.tsx"],
+      files: [{
+        path: "registry/new-york/ui/form.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "hover-card": {
       name: "hover-card",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/hover-card.tsx"],
+      files: [{
+        path: "registry/new-york/ui/hover-card.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/hover-card.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "input": {
       name: "input",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/input.tsx"],
+      files: [{
+        path: "registry/new-york/ui/input.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/input.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "input-otp": {
       name: "input-otp",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/input-otp.tsx"],
+      files: [{
+        path: "registry/new-york/ui/input-otp.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/input-otp.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "label": {
       name: "label",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/label.tsx"],
+      files: [{
+        path: "registry/new-york/ui/label.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/label.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "menubar": {
       name: "menubar",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/menubar.tsx"],
+      files: [{
+        path: "registry/new-york/ui/menubar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/menubar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "navigation-menu": {
       name: "navigation-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/navigation-menu.tsx"],
+      files: [{
+        path: "registry/new-york/ui/navigation-menu.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/navigation-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "pagination": {
       name: "pagination",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/new-york/ui/pagination.tsx"],
+      files: [{
+        path: "registry/new-york/ui/pagination.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/pagination.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "popover": {
       name: "popover",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/popover.tsx"],
+      files: [{
+        path: "registry/new-york/ui/popover.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/popover.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "progress": {
       name: "progress",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/progress.tsx"],
+      files: [{
+        path: "registry/new-york/ui/progress.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/progress.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "radio-group": {
       name: "radio-group",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/radio-group.tsx"],
+      files: [{
+        path: "registry/new-york/ui/radio-group.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/radio-group.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "resizable": {
       name: "resizable",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/resizable.tsx"],
+      files: [{
+        path: "registry/new-york/ui/resizable.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/resizable.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "scroll-area": {
       name: "scroll-area",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/scroll-area.tsx"],
+      files: [{
+        path: "registry/new-york/ui/scroll-area.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/scroll-area.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "select": {
       name: "select",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/select.tsx"],
+      files: [{
+        path: "registry/new-york/ui/select.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/select.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "separator": {
       name: "separator",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/separator.tsx"],
+      files: [{
+        path: "registry/new-york/ui/separator.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/separator.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "sheet": {
       name: "sheet",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/sheet.tsx"],
+      files: [{
+        path: "registry/new-york/ui/sheet.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/sheet.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
+    },
+    "sidebar": {
+      name: "sidebar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","separator","sheet","tooltip","input","use-mobile","skeleton"],
+      files: [{
+        path: "registry/new-york/ui/sidebar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/sidebar.tsx")),
+      source: "",
+      meta: undefined,
     },
     "skeleton": {
       name: "skeleton",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/skeleton.tsx"],
+      files: [{
+        path: "registry/new-york/ui/skeleton.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/skeleton.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "slider": {
       name: "slider",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/slider.tsx"],
+      files: [{
+        path: "registry/new-york/ui/slider.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/slider.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "sonner": {
       name: "sonner",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/sonner.tsx"],
+      files: [{
+        path: "registry/new-york/ui/sonner.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/sonner.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "switch": {
       name: "switch",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/switch.tsx"],
+      files: [{
+        path: "registry/new-york/ui/switch.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/switch.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "table": {
       name: "table",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/table.tsx"],
+      files: [{
+        path: "registry/new-york/ui/table.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/table.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "tabs": {
       name: "tabs",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/tabs.tsx"],
+      files: [{
+        path: "registry/new-york/ui/tabs.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/tabs.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "textarea": {
       name: "textarea",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/textarea.tsx"],
+      files: [{
+        path: "registry/new-york/ui/textarea.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/textarea.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "toast": {
       name: "toast",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/toast.tsx","registry/new-york/hooks/use-toast.ts","registry/new-york/ui/toaster.tsx"],
+      files: [{
+        path: "registry/new-york/ui/toast.tsx",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/hooks/use-toast.ts",
+        type: "registry:hook",
+        target: ""
+      },{
+        path: "registry/new-york/ui/toaster.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/toast.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "toggle": {
       name: "toggle",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/toggle.tsx"],
+      files: [{
+        path: "registry/new-york/ui/toggle.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/toggle.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "toggle-group": {
       name: "toggle-group",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toggle"],
-      files: ["registry/new-york/ui/toggle-group.tsx"],
+      files: [{
+        path: "registry/new-york/ui/toggle-group.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/toggle-group.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "tooltip": {
       name: "tooltip",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/tooltip.tsx"],
+      files: [{
+        path: "registry/new-york/ui/tooltip.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/tooltip.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "accordion-demo": {
-      name: "accordion-demo",
-      type: "registry:example",
-      registryDependencies: ["accordion"],
-      files: ["registry/new-york/example/accordion-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/accordion-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "dashboard-01": {
+      name: "dashboard-01",
+      description: "A dashboard with sidebar, charts and data table.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","chart","card","select","tabs","table","toggle-group","badge","button","checkbox","dropdown-menu","drawer","input","avatar","sheet","sonner"],
+      files: [{
+        path: "registry/new-york/blocks/dashboard-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/dashboard-01/data.json",
+        type: "registry:file",
+        target: "app/dashboard/data.json"
+      },{
+        path: "registry/new-york/blocks/dashboard-01/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/dashboard-01/components/chart-area-interactive.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/dashboard-01/components/data-table.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/dashboard-01/components/nav-documents.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/dashboard-01/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/dashboard-01/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/dashboard-01/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/dashboard-01/components/section-cards.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/dashboard-01/components/site-header.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/dashboard-01/page.tsx")),
+      source: "__registry__/new-york/blocks/dashboard-01/page.tsx",
+      meta: undefined,
     },
-    "alert-demo": {
-      name: "alert-demo",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: ["registry/new-york/example/alert-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/alert-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "sidebar-01": {
+      name: "sidebar-01",
+      description: "A simple sidebar with navigation grouped by section.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-01/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-01/components/search-form.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-01/components/version-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-01/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-01/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-02": {
+      name: "sidebar-02",
+      description: "A sidebar with collapsible sections.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-02/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-02/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-02/components/search-form.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-02/components/version-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-02/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-02/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-03": {
+      name: "sidebar-03",
+      description: "A sidebar with submenus.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-03/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-03/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-03/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-03/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-04": {
+      name: "sidebar-04",
+      description: "A floating sidebar with submenus.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-04/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-04/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-04/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-04/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-05": {
+      name: "sidebar-05",
+      description: "A sidebar with collapsible submenus.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-05/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-05/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-05/components/search-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-05/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-05/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-06": {
+      name: "sidebar-06",
+      description: "A sidebar with submenus as dropdowns.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","card","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-06/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-06/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-06/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-06/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-06/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-07": {
+      name: "sidebar-07",
+      description: "A sidebar that collapses to icons.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-07/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-07/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-07/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-07/components/nav-projects.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-07/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-07/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-07/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-07/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-08": {
+      name: "sidebar-08",
+      description: "An inset sidebar with secondary navigation.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-08/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-08/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-08/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-08/components/nav-projects.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-08/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-08/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-08/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-08/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-09": {
+      name: "sidebar-09",
+      description: "Collapsible nested sidebars.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch","label"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-09/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-09/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-09/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-09/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-09/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-10": {
+      name: "sidebar-10",
+      description: "A sidebar in a popover.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-10/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/nav-actions.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/nav-favorites.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/nav-workspaces.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-10/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-10/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-11": {
+      name: "sidebar-11",
+      description: "A sidebar with a collapsible file tree.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-11/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-11/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-11/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-11/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-12": {
+      name: "sidebar-12",
+      description: "A sidebar with a calendar.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","calendar","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-12/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-12/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-12/components/calendars.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-12/components/date-picker.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-12/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-12/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-12/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-13": {
+      name: "sidebar-13",
+      description: "A sidebar in a dialog.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","button","dialog"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-13/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-13/components/settings-dialog.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-13/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-13/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-14": {
+      name: "sidebar-14",
+      description: "A sidebar on the right.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-14/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-14/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-14/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-14/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-15": {
+      name: "sidebar-15",
+      description: "A left and right sidebar.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu","calendar","avatar"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-15/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/calendars.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/date-picker.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/nav-favorites.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/nav-workspaces.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/sidebar-left.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/sidebar-right.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-15/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-15/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-16": {
+      name: "sidebar-16",
+      description: "A sidebar with a sticky site header.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","button","label"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-16/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-16/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-16/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-16/components/nav-projects.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-16/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-16/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-16/components/search-form.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-16/components/site-header.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-16/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-16/page.tsx",
+      meta: undefined,
     },
-    "alert-destructive": {
-      name: "alert-destructive",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: ["registry/new-york/example/alert-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/alert-destructive.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "login-01": {
+      name: "login-01",
+      description: "A simple login form.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/blocks/login-01/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/blocks/login-01/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/login-01/page.tsx")),
+      source: "__registry__/new-york/blocks/login-01/page.tsx",
+      meta: undefined,
+    },
+    "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/blocks/login-02/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/blocks/login-02/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/login-02/page.tsx")),
+      source: "__registry__/new-york/blocks/login-02/page.tsx",
+      meta: undefined,
+    },
+    "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/blocks/login-03/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/blocks/login-03/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/login-03/page.tsx")),
+      source: "__registry__/new-york/blocks/login-03/page.tsx",
+      meta: undefined,
+    },
+    "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/blocks/login-04/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/blocks/login-04/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/login-04/page.tsx")),
+      source: "__registry__/new-york/blocks/login-04/page.tsx",
+      meta: undefined,
+    },
+    "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/blocks/login-05/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/blocks/login-05/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/login-05/page.tsx")),
+      source: "__registry__/new-york/blocks/login-05/page.tsx",
+      meta: undefined,
+    },
+    "calendar-01": {
+      name: "calendar-01",
+      description: "A simple calendar.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-01.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-01.tsx")),
+      source: "__registry__/new-york/blocks/calendar-01.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-02": {
+      name: "calendar-02",
+      description: "Multiple months with single selection.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-02.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-02.tsx")),
+      source: "__registry__/new-york/blocks/calendar-02.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-03": {
+      name: "calendar-03",
+      description: "Multiple months with multiple selection.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-03.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-03.tsx")),
+      source: "__registry__/new-york/blocks/calendar-03.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-04": {
+      name: "calendar-04",
+      description: "Single month with range selection",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-04.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-04.tsx")),
+      source: "__registry__/new-york/blocks/calendar-04.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28","mobile":"component"},
+    },
+    "calendar-05": {
+      name: "calendar-05",
+      description: "Multiple months with range selection",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-05.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-05.tsx")),
+      source: "__registry__/new-york/blocks/calendar-05.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-06": {
+      name: "calendar-06",
+      description: "Range selection with minimum days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-06.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-06.tsx")),
+      source: "__registry__/new-york/blocks/calendar-06.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-07": {
+      name: "calendar-07",
+      description: "Range selection with minimum and maximum days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-07.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-07.tsx")),
+      source: "__registry__/new-york/blocks/calendar-07.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-08": {
+      name: "calendar-08",
+      description: "Calendar with disabled days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-08.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-08.tsx")),
+      source: "__registry__/new-york/blocks/calendar-08.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-09": {
+      name: "calendar-09",
+      description: "Calendar with disabled weekends",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-09.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-09.tsx")),
+      source: "__registry__/new-york/blocks/calendar-09.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-10": {
+      name: "calendar-10",
+      description: "Today button",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-10.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-10.tsx")),
+      source: "__registry__/new-york/blocks/calendar-10.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-11": {
+      name: "calendar-11",
+      description: "Start and end of month",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-11.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-11.tsx")),
+      source: "__registry__/new-york/blocks/calendar-11.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-12": {
+      name: "calendar-12",
+      description: "Localized calendar",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","select"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-12.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-12.tsx")),
+      source: "__registry__/new-york/blocks/calendar-12.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-13": {
+      name: "calendar-13",
+      description: "With Month and Year Dropdown",
+      type: "registry:block",
+      registryDependencies: ["calendar","label","select"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-13.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-13.tsx")),
+      source: "__registry__/new-york/blocks/calendar-13.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-14": {
+      name: "calendar-14",
+      description: "With Booked/Unavailable Days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-14.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-14.tsx")),
+      source: "__registry__/new-york/blocks/calendar-14.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-15": {
+      name: "calendar-15",
+      description: "With Week Numbers",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-15.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-15.tsx")),
+      source: "__registry__/new-york/blocks/calendar-15.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-16": {
+      name: "calendar-16",
+      description: "With time picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-16.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-16.tsx")),
+      source: "__registry__/new-york/blocks/calendar-16.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-17": {
+      name: "calendar-17",
+      description: "With time picker inline",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-17.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-17.tsx")),
+      source: "__registry__/new-york/blocks/calendar-17.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-18": {
+      name: "calendar-18",
+      description: "Variable size",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-18.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-18.tsx")),
+      source: "__registry__/new-york/blocks/calendar-18.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-19": {
+      name: "calendar-19",
+      description: "With presets",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-19.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-19.tsx")),
+      source: "__registry__/new-york/blocks/calendar-19.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-20": {
+      name: "calendar-20",
+      description: "With time presets",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-20.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-20.tsx")),
+      source: "__registry__/new-york/blocks/calendar-20.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-21": {
+      name: "calendar-21",
+      description: "Custom days and formatters",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-21.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-21.tsx")),
+      source: "__registry__/new-york/blocks/calendar-21.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-22": {
+      name: "calendar-22",
+      description: "Date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-22.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-22.tsx")),
+      source: "__registry__/new-york/blocks/calendar-22.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-23": {
+      name: "calendar-23",
+      description: "Date range picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-23.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-23.tsx")),
+      source: "__registry__/new-york/blocks/calendar-23.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-24": {
+      name: "calendar-24",
+      description: "Date and Time picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-24.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-24.tsx")),
+      source: "__registry__/new-york/blocks/calendar-24.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-25": {
+      name: "calendar-25",
+      description: "Date and Time range picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-25.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-25.tsx")),
+      source: "__registry__/new-york/blocks/calendar-25.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-26": {
+      name: "calendar-26",
+      description: "Date range picker with time",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","input","label"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-26.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-26.tsx")),
+      source: "__registry__/new-york/blocks/calendar-26.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-27": {
+      name: "calendar-27",
+      description: "Chart filter",
+      type: "registry:block",
+      registryDependencies: ["calendar","chart","card","popover","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-27.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-27.tsx")),
+      source: "__registry__/new-york/blocks/calendar-27.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-28": {
+      name: "calendar-28",
+      description: "Input with date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-28.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-28.tsx")),
+      source: "__registry__/new-york/blocks/calendar-28.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-29": {
+      name: "calendar-29",
+      description: "Natural language date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-29.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-29.tsx")),
+      source: "__registry__/new-york/blocks/calendar-29.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-30": {
+      name: "calendar-30",
+      description: "With little-date",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-30.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-30.tsx")),
+      source: "__registry__/new-york/blocks/calendar-30.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-31": {
+      name: "calendar-31",
+      description: "With event slots",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-31.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-31.tsx")),
+      source: "__registry__/new-york/blocks/calendar-31.tsx",
+      meta: {"iframeHeight":"700px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-32": {
+      name: "calendar-32",
+      description: "Date picker in a drawer",
+      type: "registry:block",
+      registryDependencies: ["calendar","button","drawer"],
+      files: [{
+        path: "registry/new-york/blocks/calendar-32.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/calendar-32.tsx")),
+      source: "__registry__/new-york/blocks/calendar-32.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
     },
-    "alert-dialog-demo": {
-      name: "alert-dialog-demo",
-      type: "registry:example",
-      registryDependencies: ["alert-dialog","button"],
-      files: ["registry/new-york/example/alert-dialog-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/alert-dialog-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-area-axes": {
+      name: "chart-area-axes",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-axes.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-axes.tsx")),
+      source: "__registry__/new-york/charts/chart-area-axes.tsx",
+      meta: undefined,
     },
-    "aspect-ratio-demo": {
-      name: "aspect-ratio-demo",
-      type: "registry:example",
-      registryDependencies: ["aspect-ratio"],
-      files: ["registry/new-york/example/aspect-ratio-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/aspect-ratio-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-area-default": {
+      name: "chart-area-default",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-default.tsx")),
+      source: "__registry__/new-york/charts/chart-area-default.tsx",
+      meta: undefined,
     },
-    "avatar-demo": {
-      name: "avatar-demo",
-      type: "registry:example",
-      registryDependencies: ["avatar"],
-      files: ["registry/new-york/example/avatar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/avatar-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-area-gradient": {
+      name: "chart-area-gradient",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-gradient.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-gradient.tsx")),
+      source: "__registry__/new-york/charts/chart-area-gradient.tsx",
+      meta: undefined,
     },
-    "badge-demo": {
-      name: "badge-demo",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/new-york/example/badge-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/badge-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-area-icons": {
+      name: "chart-area-icons",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-icons.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-icons.tsx")),
+      source: "__registry__/new-york/charts/chart-area-icons.tsx",
+      meta: undefined,
     },
-    "badge-destructive": {
-      name: "badge-destructive",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/new-york/example/badge-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/badge-destructive.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-area-interactive": {
+      name: "chart-area-interactive",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart","select"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-interactive.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-interactive.tsx")),
+      source: "__registry__/new-york/charts/chart-area-interactive.tsx",
+      meta: undefined,
     },
-    "badge-outline": {
-      name: "badge-outline",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/new-york/example/badge-outline.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/badge-outline.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-area-legend": {
+      name: "chart-area-legend",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-legend.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-legend.tsx")),
+      source: "__registry__/new-york/charts/chart-area-legend.tsx",
+      meta: undefined,
     },
-    "badge-secondary": {
-      name: "badge-secondary",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/new-york/example/badge-secondary.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/badge-secondary.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-area-linear": {
+      name: "chart-area-linear",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-linear.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-linear.tsx")),
+      source: "__registry__/new-york/charts/chart-area-linear.tsx",
+      meta: undefined,
     },
-    "breadcrumb-demo": {
-      name: "breadcrumb-demo",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-area-stacked-expand": {
+      name: "chart-area-stacked-expand",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-stacked-expand.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-stacked-expand.tsx")),
+      source: "__registry__/new-york/charts/chart-area-stacked-expand.tsx",
+      meta: undefined,
     },
-    "breadcrumb-separator": {
-      name: "breadcrumb-separator",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-separator.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-separator.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-area-stacked": {
+      name: "chart-area-stacked",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-stacked.tsx")),
+      source: "__registry__/new-york/charts/chart-area-stacked.tsx",
+      meta: undefined,
     },
-    "breadcrumb-dropdown": {
-      name: "breadcrumb-dropdown",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-dropdown.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-dropdown.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-area-step": {
+      name: "chart-area-step",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-step.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-step.tsx")),
+      source: "__registry__/new-york/charts/chart-area-step.tsx",
+      meta: undefined,
     },
-    "breadcrumb-ellipsis": {
-      name: "breadcrumb-ellipsis",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-ellipsis.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-ellipsis.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-active": {
+      name: "chart-bar-active",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-active.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-active.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-active.tsx",
+      meta: undefined,
     },
-    "breadcrumb-link": {
-      name: "breadcrumb-link",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-link.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-link.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-default": {
+      name: "chart-bar-default",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-default.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-default.tsx",
+      meta: undefined,
     },
-    "breadcrumb-responsive": {
-      name: "breadcrumb-responsive",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-responsive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-responsive.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-horizontal": {
+      name: "chart-bar-horizontal",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-horizontal.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-horizontal.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-horizontal.tsx",
+      meta: undefined,
     },
-    "button-demo": {
-      name: "button-demo",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-interactive": {
+      name: "chart-bar-interactive",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-interactive.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-interactive.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-interactive.tsx",
+      meta: undefined,
     },
-    "button-secondary": {
-      name: "button-secondary",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-secondary.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-secondary.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-label-custom": {
+      name: "chart-bar-label-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-label-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-label-custom.tsx",
+      meta: undefined,
     },
-    "button-destructive": {
-      name: "button-destructive",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-destructive.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-label": {
+      name: "chart-bar-label",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-label.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-label.tsx",
+      meta: undefined,
     },
-    "button-outline": {
-      name: "button-outline",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-outline.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-outline.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-mixed": {
+      name: "chart-bar-mixed",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-mixed.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-mixed.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-mixed.tsx",
+      meta: undefined,
     },
-    "button-ghost": {
-      name: "button-ghost",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-ghost.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-ghost.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-multiple": {
+      name: "chart-bar-multiple",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-multiple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-multiple.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-multiple.tsx",
+      meta: undefined,
     },
-    "button-link": {
-      name: "button-link",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-link.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-link.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-negative": {
+      name: "chart-bar-negative",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-negative.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-negative.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-negative.tsx",
+      meta: undefined,
     },
-    "button-with-icon": {
-      name: "button-with-icon",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-with-icon.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-with-icon.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-stacked": {
+      name: "chart-bar-stacked",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-stacked.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-stacked.tsx",
+      meta: undefined,
     },
-    "button-loading": {
-      name: "button-loading",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-loading.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-loading.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-default": {
+      name: "chart-line-default",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-default.tsx")),
+      source: "__registry__/new-york/charts/chart-line-default.tsx",
+      meta: undefined,
     },
-    "button-icon": {
-      name: "button-icon",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-icon.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-icon.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-dots-colors": {
+      name: "chart-line-dots-colors",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-dots-colors.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-dots-colors.tsx")),
+      source: "__registry__/new-york/charts/chart-line-dots-colors.tsx",
+      meta: undefined,
     },
-    "button-as-child": {
-      name: "button-as-child",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-as-child.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-as-child.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-dots-custom": {
+      name: "chart-line-dots-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-dots-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-dots-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-line-dots-custom.tsx",
+      meta: undefined,
     },
-    "calendar-demo": {
-      name: "calendar-demo",
-      type: "registry:example",
-      registryDependencies: ["calendar"],
-      files: ["registry/new-york/example/calendar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/calendar-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-dots": {
+      name: "chart-line-dots",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-dots.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-dots.tsx")),
+      source: "__registry__/new-york/charts/chart-line-dots.tsx",
+      meta: undefined,
     },
-    "calendar-form": {
-      name: "calendar-form",
-      type: "registry:example",
-      registryDependencies: ["calendar","form","popover"],
-      files: ["registry/new-york/example/calendar-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/calendar-form.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-interactive": {
+      name: "chart-line-interactive",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-interactive.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-interactive.tsx")),
+      source: "__registry__/new-york/charts/chart-line-interactive.tsx",
+      meta: undefined,
     },
-    "card-demo": {
-      name: "card-demo",
-      type: "registry:example",
-      registryDependencies: ["card","button","switch"],
-      files: ["registry/new-york/example/card-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/card-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-label-custom": {
+      name: "chart-line-label-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-label-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-line-label-custom.tsx",
+      meta: undefined,
     },
-    "card-with-form": {
-      name: "card-with-form",
-      type: "registry:example",
-      registryDependencies: ["button","card","input","label","select"],
-      files: ["registry/new-york/example/card-with-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/card-with-form.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-label": {
+      name: "chart-line-label",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-label.tsx")),
+      source: "__registry__/new-york/charts/chart-line-label.tsx",
+      meta: undefined,
     },
-    "carousel-demo": {
-      name: "carousel-demo",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-linear": {
+      name: "chart-line-linear",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-linear.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-linear.tsx")),
+      source: "__registry__/new-york/charts/chart-line-linear.tsx",
+      meta: undefined,
     },
-    "carousel-size": {
-      name: "carousel-size",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-size.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-size.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-multiple": {
+      name: "chart-line-multiple",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-multiple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-multiple.tsx")),
+      source: "__registry__/new-york/charts/chart-line-multiple.tsx",
+      meta: undefined,
     },
-    "carousel-spacing": {
-      name: "carousel-spacing",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-spacing.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-spacing.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-step": {
+      name: "chart-line-step",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-step.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-step.tsx")),
+      source: "__registry__/new-york/charts/chart-line-step.tsx",
+      meta: undefined,
     },
-    "carousel-orientation": {
-      name: "carousel-orientation",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-orientation.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-orientation.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-donut-active": {
+      name: "chart-pie-donut-active",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-donut-active.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-donut-active.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-donut-active.tsx",
+      meta: undefined,
     },
-    "carousel-api": {
-      name: "carousel-api",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-api.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-api.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-donut-text": {
+      name: "chart-pie-donut-text",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-donut-text.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-donut-text.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-donut-text.tsx",
+      meta: undefined,
     },
-    "carousel-plugin": {
-      name: "carousel-plugin",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-plugin.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-plugin.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-donut": {
+      name: "chart-pie-donut",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-donut.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-donut.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-donut.tsx",
+      meta: undefined,
     },
-    "checkbox-demo": {
-      name: "checkbox-demo",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/new-york/example/checkbox-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/checkbox-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-interactive": {
+      name: "chart-pie-interactive",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-interactive.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-interactive.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-interactive.tsx",
+      meta: undefined,
     },
-    "checkbox-disabled": {
-      name: "checkbox-disabled",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/new-york/example/checkbox-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/checkbox-disabled.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-label-custom": {
+      name: "chart-pie-label-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-label-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-label-custom.tsx",
+      meta: undefined,
     },
-    "checkbox-form-multiple": {
-      name: "checkbox-form-multiple",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: ["registry/new-york/example/checkbox-form-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/checkbox-form-multiple.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-label-list": {
+      name: "chart-pie-label-list",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-label-list.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-label-list.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-label-list.tsx",
+      meta: undefined,
     },
-    "checkbox-form-single": {
-      name: "checkbox-form-single",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: ["registry/new-york/example/checkbox-form-single.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/checkbox-form-single.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-label": {
+      name: "chart-pie-label",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-label.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-label.tsx",
+      meta: undefined,
     },
-    "checkbox-with-text": {
-      name: "checkbox-with-text",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/new-york/example/checkbox-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/checkbox-with-text.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-legend": {
+      name: "chart-pie-legend",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-legend.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-legend.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-legend.tsx",
+      meta: undefined,
     },
-    "collapsible-demo": {
-      name: "collapsible-demo",
-      type: "registry:example",
-      registryDependencies: ["collapsible"],
-      files: ["registry/new-york/example/collapsible-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/collapsible-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-separator-none": {
+      name: "chart-pie-separator-none",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-separator-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-separator-none.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-separator-none.tsx",
+      meta: undefined,
     },
-    "combobox-demo": {
-      name: "combobox-demo",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: ["registry/new-york/example/combobox-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/combobox-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-simple": {
+      name: "chart-pie-simple",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-simple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-simple.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-simple.tsx",
+      meta: undefined,
     },
-    "combobox-dropdown-menu": {
-      name: "combobox-dropdown-menu",
-      type: "registry:example",
-      registryDependencies: ["command","dropdown-menu","button"],
-      files: ["registry/new-york/example/combobox-dropdown-menu.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/combobox-dropdown-menu.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-stacked": {
+      name: "chart-pie-stacked",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-stacked.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-stacked.tsx",
+      meta: undefined,
     },
-    "combobox-form": {
-      name: "combobox-form",
-      type: "registry:example",
-      registryDependencies: ["command","form"],
-      files: ["registry/new-york/example/combobox-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/combobox-form.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-default": {
+      name: "chart-radar-default",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-default.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-default.tsx",
+      meta: undefined,
     },
-    "combobox-popover": {
-      name: "combobox-popover",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover"],
-      files: ["registry/new-york/example/combobox-popover.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/combobox-popover.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-dots": {
+      name: "chart-radar-dots",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-dots.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-dots.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-dots.tsx",
+      meta: undefined,
     },
-    "combobox-responsive": {
-      name: "combobox-responsive",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover","drawer"],
-      files: ["registry/new-york/example/combobox-responsive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/combobox-responsive.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-circle-fill": {
+      name: "chart-radar-grid-circle-fill",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-circle-fill.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-circle-fill.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-circle-fill.tsx",
+      meta: undefined,
     },
-    "command-demo": {
-      name: "command-demo",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: ["registry/new-york/example/command-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/command-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-circle-no-lines": {
+      name: "chart-radar-grid-circle-no-lines",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-circle-no-lines.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-circle-no-lines.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-circle-no-lines.tsx",
+      meta: undefined,
     },
-    "command-dialog": {
-      name: "command-dialog",
-      type: "registry:example",
-      registryDependencies: ["command","dialog"],
-      files: ["registry/new-york/example/command-dialog.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/command-dialog.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-circle": {
+      name: "chart-radar-grid-circle",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-circle.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-circle.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-circle.tsx",
+      meta: undefined,
     },
-    "context-menu-demo": {
-      name: "context-menu-demo",
-      type: "registry:example",
-      registryDependencies: ["context-menu"],
-      files: ["registry/new-york/example/context-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/context-menu-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-custom": {
+      name: "chart-radar-grid-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-custom.tsx",
+      meta: undefined,
     },
-    "data-table-demo": {
-      name: "data-table-demo",
-      type: "registry:example",
-      registryDependencies: ["data-table"],
-      files: ["registry/new-york/example/data-table-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/data-table-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-fill": {
+      name: "chart-radar-grid-fill",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-fill.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-fill.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-fill.tsx",
+      meta: undefined,
     },
-    "date-picker-demo": {
-      name: "date-picker-demo",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: ["registry/new-york/example/date-picker-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/date-picker-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-none": {
+      name: "chart-radar-grid-none",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-none.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-none.tsx",
+      meta: undefined,
+    },
+    "chart-radar-icons": {
+      name: "chart-radar-icons",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-icons.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-icons.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-icons.tsx",
+      meta: undefined,
+    },
+    "chart-radar-label-custom": {
+      name: "chart-radar-label-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-label-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-label-custom.tsx",
+      meta: undefined,
+    },
+    "chart-radar-legend": {
+      name: "chart-radar-legend",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-legend.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-legend.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-legend.tsx",
+      meta: undefined,
+    },
+    "chart-radar-lines-only": {
+      name: "chart-radar-lines-only",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-lines-only.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-lines-only.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-lines-only.tsx",
+      meta: undefined,
+    },
+    "chart-radar-multiple": {
+      name: "chart-radar-multiple",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-multiple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-multiple.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-multiple.tsx",
+      meta: undefined,
+    },
+    "chart-radar-radius": {
+      name: "chart-radar-radius",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-radius.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-radius.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-radius.tsx",
+      meta: undefined,
+    },
+    "chart-radial-grid": {
+      name: "chart-radial-grid",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-grid.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-grid.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-grid.tsx",
+      meta: undefined,
+    },
+    "chart-radial-label": {
+      name: "chart-radial-label",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-label.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-label.tsx",
+      meta: undefined,
+    },
+    "chart-radial-shape": {
+      name: "chart-radial-shape",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-shape.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-shape.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-shape.tsx",
+      meta: undefined,
+    },
+    "chart-radial-simple": {
+      name: "chart-radial-simple",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-simple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-simple.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-simple.tsx",
+      meta: undefined,
+    },
+    "chart-radial-stacked": {
+      name: "chart-radial-stacked",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-stacked.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-stacked.tsx",
+      meta: undefined,
+    },
+    "chart-radial-text": {
+      name: "chart-radial-text",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-text.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-text.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-text.tsx",
+      meta: undefined,
     },
-    "date-picker-form": {
-      name: "date-picker-form",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover"],
-      files: ["registry/new-york/example/date-picker-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/date-picker-form.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-default": {
+      name: "chart-tooltip-default",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-default.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-default.tsx",
+      meta: undefined,
     },
-    "date-picker-with-presets": {
-      name: "date-picker-with-presets",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover","select"],
-      files: ["registry/new-york/example/date-picker-with-presets.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/date-picker-with-presets.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-indicator-line": {
+      name: "chart-tooltip-indicator-line",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-indicator-line.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-indicator-line.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-indicator-line.tsx",
+      meta: undefined,
     },
-    "date-picker-with-range": {
-      name: "date-picker-with-range",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: ["registry/new-york/example/date-picker-with-range.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/date-picker-with-range.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-indicator-none": {
+      name: "chart-tooltip-indicator-none",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-indicator-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-indicator-none.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-indicator-none.tsx",
+      meta: undefined,
     },
-    "dialog-demo": {
-      name: "dialog-demo",
-      type: "registry:example",
-      registryDependencies: ["dialog"],
-      files: ["registry/new-york/example/dialog-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/dialog-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-label-none": {
+      name: "chart-tooltip-label-none",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-label-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-label-none.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-label-none.tsx",
+      meta: undefined,
     },
-    "dialog-close-button": {
-      name: "dialog-close-button",
-      type: "registry:example",
-      registryDependencies: ["dialog","button"],
-      files: ["registry/new-york/example/dialog-close-button.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/dialog-close-button.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-label-custom": {
+      name: "chart-tooltip-label-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-label-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-label-custom.tsx",
+      meta: undefined,
     },
-    "drawer-demo": {
-      name: "drawer-demo",
-      type: "registry:example",
-      registryDependencies: ["drawer"],
-      files: ["registry/new-york/example/drawer-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/drawer-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-label-formatter": {
+      name: "chart-tooltip-label-formatter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-label-formatter.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-label-formatter.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-label-formatter.tsx",
+      meta: undefined,
     },
-    "drawer-dialog": {
-      name: "drawer-dialog",
-      type: "registry:example",
-      registryDependencies: ["drawer","dialog"],
-      files: ["registry/new-york/example/drawer-dialog.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/drawer-dialog.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-formatter": {
+      name: "chart-tooltip-formatter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-formatter.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-formatter.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-formatter.tsx",
+      meta: undefined,
     },
-    "dropdown-menu-demo": {
-      name: "dropdown-menu-demo",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu"],
-      files: ["registry/new-york/example/dropdown-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-icons": {
+      name: "chart-tooltip-icons",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-icons.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-icons.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-icons.tsx",
+      meta: undefined,
     },
-    "dropdown-menu-checkboxes": {
-      name: "dropdown-menu-checkboxes",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu","checkbox"],
-      files: ["registry/new-york/example/dropdown-menu-checkboxes.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-checkboxes.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-advanced": {
+      name: "chart-tooltip-advanced",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-advanced.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-advanced.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-advanced.tsx",
+      meta: undefined,
     },
-    "dropdown-menu-radio-group": {
-      name: "dropdown-menu-radio-group",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu","radio-group"],
-      files: ["registry/new-york/example/dropdown-menu-radio-group.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-radio-group.tsx")),
+    "utils": {
+      name: "utils",
+      description: "",
+      type: "registry:lib",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/lib/utils.ts",
+        type: "registry:lib",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/lib/utils.ts")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "hover-card-demo": {
-      name: "hover-card-demo",
-      type: "registry:example",
-      registryDependencies: ["hover-card"],
-      files: ["registry/new-york/example/hover-card-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/hover-card-demo.tsx")),
+    "use-mobile": {
+      name: "use-mobile",
+      description: "",
+      type: "registry:hook",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/hooks/use-mobile.tsx",
+        type: "registry:hook",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/hooks/use-mobile.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-demo": {
-      name: "input-demo",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/new-york/example/input-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-demo.tsx")),
+    "use-toast": {
+      name: "use-toast",
+      description: "",
+      type: "registry:hook",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/hooks/use-toast.ts",
+        type: "registry:hook",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/hooks/use-toast.ts")),
+      source: "",
+      meta: undefined,
+    },
+    "sink": {
+      name: "sink",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["accordion","alert","alert-dialog","aspect-ratio","avatar","badge","breadcrumb","button","calendar","card","carousel","chart","checkbox","collapsible","command","context-menu","dialog","drawer","dropdown-menu","hover-card","input","input-otp","label","menubar","navigation-menu","pagination","popover","progress","radio-group","resizable","scroll-area","select","separator","sheet","sidebar","skeleton","slider","sonner","switch","table","tabs","textarea","toast","toggle","toggle-group","tooltip"],
+      files: [{
+        path: "registry/new-york/internal/sink/page.tsx",
+        type: "registry:page",
+        target: "app/sink/page.tsx"
+      },{
+        path: "registry/new-york/internal/sink/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/component-wrapper.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/nav-projects.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/accordion-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/alert-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/alert-dialog-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/aspect-ratio-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/avatar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/badge-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/breadcrumb-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/calendar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/card-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/carousel-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/checkbox-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/collapsible-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/combobox-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/command-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/context-menu-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/date-picker-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/dialog-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/drawer-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/dropdown-menu-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/hover-card-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/input-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/input-otp-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/label-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/menubar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/navigation-menu-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/pagination-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/popover-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/progress-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/radio-group-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/resizable-handle.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/scroll-area-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/select-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/separator-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/sheet-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/skeleton-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/slider-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/sonner-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/switch-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/table-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/tabs-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/textarea-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toast-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toggle-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toggle-group-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/tooltip-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/badge-destructive.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/badge-outline.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/badge-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-destructive.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-ghost.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-link.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-loading.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-outline.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-with-icon.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toggle-disabled.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toggle-outline.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toggle-with-text.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sink/page.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-demo": {
+      name: "sidebar-demo",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-demo.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-header": {
+      name: "sidebar-header",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-header.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-header.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-footer": {
+      name: "sidebar-footer",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-footer.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-footer.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-group": {
+      name: "sidebar-group",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-group.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-group.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-group-collapsible": {
+      name: "sidebar-group-collapsible",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-group-collapsible.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-group-collapsible.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-group-action": {
+      name: "sidebar-group-action",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-group-action.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-group-action.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-menu": {
+      name: "sidebar-menu",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-menu.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-menu.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-menu-action": {
+      name: "sidebar-menu-action",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-menu-action.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-menu-action.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-menu-sub": {
+      name: "sidebar-menu-sub",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-menu-sub.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-menu-sub.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-menu-collapsible": {
+      name: "sidebar-menu-collapsible",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-menu-collapsible.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-menu-collapsible.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-menu-badge": {
+      name: "sidebar-menu-badge",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-menu-badge.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-menu-badge.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-rsc": {
+      name: "sidebar-rsc",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-rsc.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-rsc.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-controlled": {
+      name: "sidebar-controlled",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-controlled.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-controlled.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-01": {
+      name: "v0-sidebar-01",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-01.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-01.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-02": {
+      name: "v0-sidebar-02",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-02.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-02.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-03": {
+      name: "v0-sidebar-03",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-03.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-03.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-04": {
+      name: "v0-sidebar-04",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-04.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-04.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-05": {
+      name: "v0-sidebar-05",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-05.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-05.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-06": {
+      name: "v0-sidebar-06",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","card","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-06.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-06.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-07": {
+      name: "v0-sidebar-07",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-07.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-07.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-08": {
+      name: "v0-sidebar-08",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-08.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-08.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-09": {
+      name: "v0-sidebar-09",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-09.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-09.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-10": {
+      name: "v0-sidebar-10",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-10.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-10.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-11": {
+      name: "v0-sidebar-11",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-11.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-11.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-12": {
+      name: "v0-sidebar-12",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","calendar","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-12.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-12.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-13": {
+      name: "v0-sidebar-13",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","button","dialog"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-13.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-13.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-14": {
+      name: "v0-sidebar-14",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-14.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-14.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-15": {
+      name: "v0-sidebar-15",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu","calendar","avatar"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-15.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-15.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-login-01": {
+      name: "v0-login-01",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/internal/login-01.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/login-01.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-disabled": {
-      name: "input-disabled",
+    "accordion-demo": {
+      name: "accordion-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/new-york/example/input-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-disabled.tsx")),
+      registryDependencies: ["accordion"],
+      files: [{
+        path: "registry/new-york/examples/accordion-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/accordion-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-file": {
-      name: "input-file",
+    "alert-demo": {
+      name: "alert-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/new-york/example/input-file.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-file.tsx")),
+      registryDependencies: ["alert"],
+      files: [{
+        path: "registry/new-york/examples/alert-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/alert-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-form": {
-      name: "input-form",
+    "alert-destructive": {
+      name: "alert-destructive",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input","button","form"],
-      files: ["registry/new-york/example/input-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-form.tsx")),
+      registryDependencies: ["alert"],
+      files: [{
+        path: "registry/new-york/examples/alert-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/alert-destructive.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-with-button": {
-      name: "input-with-button",
+    "alert-dialog-demo": {
+      name: "alert-dialog-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input","button"],
-      files: ["registry/new-york/example/input-with-button.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-with-button.tsx")),
+      registryDependencies: ["alert-dialog","button"],
+      files: [{
+        path: "registry/new-york/examples/alert-dialog-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/alert-dialog-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-with-label": {
-      name: "input-with-label",
+    "aspect-ratio-demo": {
+      name: "aspect-ratio-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: ["registry/new-york/example/input-with-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-with-label.tsx")),
+      registryDependencies: ["aspect-ratio"],
+      files: [{
+        path: "registry/new-york/examples/aspect-ratio-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/aspect-ratio-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-with-text": {
-      name: "input-with-text",
+    "avatar-demo": {
+      name: "avatar-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: ["registry/new-york/example/input-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-with-text.tsx")),
+      registryDependencies: ["avatar"],
+      files: [{
+        path: "registry/new-york/examples/avatar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/avatar-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-demo": {
-      name: "input-otp-demo",
+    "badge-demo": {
+      name: "badge-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/new-york/example/input-otp-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-otp-demo.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/new-york/examples/badge-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/badge-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-pattern": {
-      name: "input-otp-pattern",
+    "badge-destructive": {
+      name: "badge-destructive",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/new-york/example/input-otp-pattern.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-otp-pattern.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/new-york/examples/badge-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/badge-destructive.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-separator": {
-      name: "input-otp-separator",
+    "badge-outline": {
+      name: "badge-outline",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/new-york/example/input-otp-separator.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-otp-separator.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/new-york/examples/badge-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/badge-outline.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-controlled": {
-      name: "input-otp-controlled",
+    "badge-secondary": {
+      name: "badge-secondary",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/new-york/example/input-otp-controlled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-otp-controlled.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/new-york/examples/badge-secondary.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/badge-secondary.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-form": {
-      name: "input-otp-form",
+    "breadcrumb-demo": {
+      name: "breadcrumb-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input-otp","form"],
-      files: ["registry/new-york/example/input-otp-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-otp-form.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "label-demo": {
-      name: "label-demo",
+    "breadcrumb-separator": {
+      name: "breadcrumb-separator",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["label"],
-      files: ["registry/new-york/example/label-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/label-demo.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-separator.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-separator.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "menubar-demo": {
-      name: "menubar-demo",
+    "breadcrumb-dropdown": {
+      name: "breadcrumb-dropdown",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["menubar"],
-      files: ["registry/new-york/example/menubar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/menubar-demo.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-dropdown.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-dropdown.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "navigation-menu-demo": {
-      name: "navigation-menu-demo",
+    "breadcrumb-ellipsis": {
+      name: "breadcrumb-ellipsis",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["navigation-menu"],
-      files: ["registry/new-york/example/navigation-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/navigation-menu-demo.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-ellipsis.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-ellipsis.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "pagination-demo": {
-      name: "pagination-demo",
+    "breadcrumb-link": {
+      name: "breadcrumb-link",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["pagination"],
-      files: ["registry/new-york/example/pagination-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/pagination-demo.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-link.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-link.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "popover-demo": {
-      name: "popover-demo",
+    "breadcrumb-responsive": {
+      name: "breadcrumb-responsive",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["popover"],
-      files: ["registry/new-york/example/popover-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/popover-demo.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-responsive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-responsive.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "progress-demo": {
-      name: "progress-demo",
+    "button-demo": {
+      name: "button-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["progress"],
-      files: ["registry/new-york/example/progress-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/progress-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "radio-group-demo": {
-      name: "radio-group-demo",
+    "button-secondary": {
+      name: "button-secondary",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["radio-group"],
-      files: ["registry/new-york/example/radio-group-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/radio-group-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-secondary.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-secondary.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "radio-group-form": {
-      name: "radio-group-form",
+    "button-destructive": {
+      name: "button-destructive",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["radio-group","form"],
-      files: ["registry/new-york/example/radio-group-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/radio-group-form.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-destructive.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-demo": {
-      name: "resizable-demo",
+    "button-outline": {
+      name: "button-outline",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/new-york/example/resizable-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/resizable-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-outline.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-demo-with-handle": {
-      name: "resizable-demo-with-handle",
+    "button-ghost": {
+      name: "button-ghost",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/new-york/example/resizable-demo-with-handle.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/resizable-demo-with-handle.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-ghost.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-ghost.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-vertical": {
-      name: "resizable-vertical",
+    "button-link": {
+      name: "button-link",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/new-york/example/resizable-vertical.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/resizable-vertical.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-link.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-link.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-handle": {
-      name: "resizable-handle",
+    "button-with-icon": {
+      name: "button-with-icon",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/new-york/example/resizable-handle.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/resizable-handle.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-with-icon.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-with-icon.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "scroll-area-demo": {
-      name: "scroll-area-demo",
+    "button-loading": {
+      name: "button-loading",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: ["registry/new-york/example/scroll-area-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/scroll-area-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-loading.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-loading.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "scroll-area-horizontal-demo": {
-      name: "scroll-area-horizontal-demo",
+    "button-icon": {
+      name: "button-icon",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: ["registry/new-york/example/scroll-area-horizontal-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/scroll-area-horizontal-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-icon.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-icon.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "select-demo": {
-      name: "select-demo",
+    "button-as-child": {
+      name: "button-as-child",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/new-york/example/select-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/select-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-as-child.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-as-child.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "select-scrollable": {
-      name: "select-scrollable",
+    "calendar-demo": {
+      name: "calendar-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/new-york/example/select-scrollable.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/select-scrollable.tsx")),
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/examples/calendar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/calendar-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "select-form": {
-      name: "select-form",
+    "calendar-form": {
+      name: "calendar-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/new-york/example/select-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/select-form.tsx")),
+      registryDependencies: ["calendar","form","popover"],
+      files: [{
+        path: "registry/new-york/examples/calendar-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/calendar-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "separator-demo": {
-      name: "separator-demo",
+    "card-demo": {
+      name: "card-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["separator"],
-      files: ["registry/new-york/example/separator-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/separator-demo.tsx")),
+      registryDependencies: ["card","button","switch"],
+      files: [{
+        path: "registry/new-york/examples/card-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/card-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "sheet-demo": {
-      name: "sheet-demo",
+    "card-with-form": {
+      name: "card-with-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["sheet"],
-      files: ["registry/new-york/example/sheet-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/sheet-demo.tsx")),
+      registryDependencies: ["button","card","input","label","select"],
+      files: [{
+        path: "registry/new-york/examples/card-with-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/card-with-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "sheet-side": {
-      name: "sheet-side",
+    "carousel-demo": {
+      name: "carousel-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["sheet"],
-      files: ["registry/new-york/example/sheet-side.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/sheet-side.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "skeleton-demo": {
-      name: "skeleton-demo",
+    "carousel-size": {
+      name: "carousel-size",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["skeleton"],
-      files: ["registry/new-york/example/skeleton-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/skeleton-demo.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-size.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-size.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "skeleton-card": {
-      name: "skeleton-card",
+    "carousel-spacing": {
+      name: "carousel-spacing",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["skeleton"],
-      files: ["registry/new-york/example/skeleton-card.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/skeleton-card.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-spacing.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-spacing.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "slider-demo": {
-      name: "slider-demo",
+    "carousel-orientation": {
+      name: "carousel-orientation",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["slider"],
-      files: ["registry/new-york/example/slider-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/slider-demo.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-orientation.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-orientation.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "sonner-demo": {
-      name: "sonner-demo",
+    "carousel-api": {
+      name: "carousel-api",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["sonner"],
-      files: ["registry/new-york/example/sonner-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/sonner-demo.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-api.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-api.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "switch-demo": {
-      name: "switch-demo",
+    "carousel-plugin": {
+      name: "carousel-plugin",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["switch"],
-      files: ["registry/new-york/example/switch-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/switch-demo.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-plugin.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-plugin.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "switch-form": {
-      name: "switch-form",
+    "checkbox-demo": {
+      name: "checkbox-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["switch","form"],
-      files: ["registry/new-york/example/switch-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/switch-form.tsx")),
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/new-york/examples/checkbox-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/checkbox-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "table-demo": {
-      name: "table-demo",
+    "checkbox-disabled": {
+      name: "checkbox-disabled",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["table"],
-      files: ["registry/new-york/example/table-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/table-demo.tsx")),
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/new-york/examples/checkbox-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/checkbox-disabled.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "tabs-demo": {
-      name: "tabs-demo",
+    "checkbox-form-multiple": {
+      name: "checkbox-form-multiple",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["tabs"],
-      files: ["registry/new-york/example/tabs-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/tabs-demo.tsx")),
+      registryDependencies: ["checkbox","form"],
+      files: [{
+        path: "registry/new-york/examples/checkbox-form-multiple.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/checkbox-form-multiple.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-demo": {
-      name: "textarea-demo",
+    "checkbox-form-single": {
+      name: "checkbox-form-single",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea"],
-      files: ["registry/new-york/example/textarea-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-demo.tsx")),
+      registryDependencies: ["checkbox","form"],
+      files: [{
+        path: "registry/new-york/examples/checkbox-form-single.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/checkbox-form-single.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-disabled": {
-      name: "textarea-disabled",
+    "checkbox-with-text": {
+      name: "checkbox-with-text",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea"],
-      files: ["registry/new-york/example/textarea-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-disabled.tsx")),
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/new-york/examples/checkbox-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/checkbox-with-text.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-form": {
-      name: "textarea-form",
+    "collapsible-demo": {
+      name: "collapsible-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","form"],
-      files: ["registry/new-york/example/textarea-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-form.tsx")),
+      registryDependencies: ["collapsible"],
+      files: [{
+        path: "registry/new-york/examples/collapsible-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/collapsible-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-button": {
-      name: "textarea-with-button",
+    "combobox-demo": {
+      name: "combobox-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","button"],
-      files: ["registry/new-york/example/textarea-with-button.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-with-button.tsx")),
+      registryDependencies: ["command"],
+      files: [{
+        path: "registry/new-york/examples/combobox-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/combobox-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-label": {
-      name: "textarea-with-label",
+    "combobox-dropdown-menu": {
+      name: "combobox-dropdown-menu",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","label"],
-      files: ["registry/new-york/example/textarea-with-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-with-label.tsx")),
+      registryDependencies: ["command","dropdown-menu","button"],
+      files: [{
+        path: "registry/new-york/examples/combobox-dropdown-menu.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/combobox-dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-text": {
-      name: "textarea-with-text",
+    "combobox-form": {
+      name: "combobox-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","label"],
-      files: ["registry/new-york/example/textarea-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-with-text.tsx")),
+      registryDependencies: ["command","form"],
+      files: [{
+        path: "registry/new-york/examples/combobox-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/combobox-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toast-demo": {
-      name: "toast-demo",
+    "combobox-popover": {
+      name: "combobox-popover",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/new-york/example/toast-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toast-demo.tsx")),
+      registryDependencies: ["combobox","popover"],
+      files: [{
+        path: "registry/new-york/examples/combobox-popover.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/combobox-popover.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toast-destructive": {
-      name: "toast-destructive",
+    "combobox-responsive": {
+      name: "combobox-responsive",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/new-york/example/toast-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toast-destructive.tsx")),
+      registryDependencies: ["combobox","popover","drawer"],
+      files: [{
+        path: "registry/new-york/examples/combobox-responsive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/combobox-responsive.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toast-simple": {
-      name: "toast-simple",
+    "command-demo": {
+      name: "command-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/new-york/example/toast-simple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toast-simple.tsx")),
+      registryDependencies: ["command"],
+      files: [{
+        path: "registry/new-york/examples/command-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/command-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toast-with-action": {
-      name: "toast-with-action",
+    "command-dialog": {
+      name: "command-dialog",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/new-york/example/toast-with-action.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toast-with-action.tsx")),
+      registryDependencies: ["command","dialog"],
+      files: [{
+        path: "registry/new-york/examples/command-dialog.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/command-dialog.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toast-with-title": {
-      name: "toast-with-title",
+    "context-menu-demo": {
+      name: "context-menu-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/new-york/example/toast-with-title.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toast-with-title.tsx")),
+      registryDependencies: ["context-menu"],
+      files: [{
+        path: "registry/new-york/examples/context-menu-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/context-menu-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-demo": {
-      name: "toggle-group-demo",
+    "data-table-demo": {
+      name: "data-table-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-demo.tsx")),
+      registryDependencies: ["data-table"],
+      files: [{
+        path: "registry/new-york/examples/data-table-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/data-table-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-disabled": {
-      name: "toggle-group-disabled",
+    "date-picker-demo": {
+      name: "date-picker-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-disabled.tsx")),
+      registryDependencies: ["button","calendar","popover"],
+      files: [{
+        path: "registry/new-york/examples/date-picker-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/date-picker-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-lg": {
-      name: "toggle-group-lg",
+    "date-picker-form": {
+      name: "date-picker-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-lg.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-lg.tsx")),
+      registryDependencies: ["button","calendar","form","popover"],
+      files: [{
+        path: "registry/new-york/examples/date-picker-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/date-picker-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-outline": {
-      name: "toggle-group-outline",
+    "date-picker-with-presets": {
+      name: "date-picker-with-presets",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-outline.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-outline.tsx")),
+      registryDependencies: ["button","calendar","popover","select"],
+      files: [{
+        path: "registry/new-york/examples/date-picker-with-presets.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/date-picker-with-presets.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-sm": {
-      name: "toggle-group-sm",
+    "date-picker-with-range": {
+      name: "date-picker-with-range",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-sm.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-sm.tsx")),
+      registryDependencies: ["button","calendar","popover"],
+      files: [{
+        path: "registry/new-york/examples/date-picker-with-range.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/date-picker-with-range.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-single": {
-      name: "toggle-group-single",
+    "dialog-demo": {
+      name: "dialog-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-single.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-single.tsx")),
+      registryDependencies: ["dialog"],
+      files: [{
+        path: "registry/new-york/examples/dialog-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/dialog-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-demo": {
-      name: "toggle-demo",
+    "dialog-close-button": {
+      name: "dialog-close-button",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-demo.tsx")),
+      registryDependencies: ["dialog","button"],
+      files: [{
+        path: "registry/new-york/examples/dialog-close-button.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/dialog-close-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-disabled": {
-      name: "toggle-disabled",
+    "drawer-demo": {
+      name: "drawer-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-disabled.tsx")),
+      registryDependencies: ["drawer"],
+      files: [{
+        path: "registry/new-york/examples/drawer-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/drawer-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-lg": {
-      name: "toggle-lg",
+    "drawer-dialog": {
+      name: "drawer-dialog",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-lg.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-lg.tsx")),
+      registryDependencies: ["drawer","dialog"],
+      files: [{
+        path: "registry/new-york/examples/drawer-dialog.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/drawer-dialog.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-outline": {
-      name: "toggle-outline",
+    "dropdown-menu-demo": {
+      name: "dropdown-menu-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-outline.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-outline.tsx")),
+      registryDependencies: ["dropdown-menu"],
+      files: [{
+        path: "registry/new-york/examples/dropdown-menu-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/dropdown-menu-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-sm": {
-      name: "toggle-sm",
+    "dropdown-menu-checkboxes": {
+      name: "dropdown-menu-checkboxes",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-sm.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-sm.tsx")),
+      registryDependencies: ["dropdown-menu","checkbox"],
+      files: [{
+        path: "registry/new-york/examples/dropdown-menu-checkboxes.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/dropdown-menu-checkboxes.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-with-text": {
-      name: "toggle-with-text",
+    "dropdown-menu-radio-group": {
+      name: "dropdown-menu-radio-group",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-with-text.tsx")),
+      registryDependencies: ["dropdown-menu","radio-group"],
+      files: [{
+        path: "registry/new-york/examples/dropdown-menu-radio-group.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/dropdown-menu-radio-group.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "tooltip-demo": {
-      name: "tooltip-demo",
+    "hover-card-demo": {
+      name: "hover-card-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["tooltip"],
-      files: ["registry/new-york/example/tooltip-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/tooltip-demo.tsx")),
+      registryDependencies: ["hover-card"],
+      files: [{
+        path: "registry/new-york/examples/hover-card-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/hover-card-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-blockquote": {
-      name: "typography-blockquote",
+    "input-demo": {
+      name: "input-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-blockquote.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-blockquote.tsx")),
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/new-york/examples/input-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-demo": {
-      name: "typography-demo",
+    "input-disabled": {
+      name: "input-disabled",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-demo.tsx")),
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/new-york/examples/input-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-disabled.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h1": {
-      name: "typography-h1",
+    "input-file": {
+      name: "input-file",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-h1.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-h1.tsx")),
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/new-york/examples/input-file.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-file.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h2": {
-      name: "typography-h2",
+    "input-form": {
+      name: "input-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-h2.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-h2.tsx")),
+      registryDependencies: ["input","button","form"],
+      files: [{
+        path: "registry/new-york/examples/input-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h3": {
-      name: "typography-h3",
+    "input-with-button": {
+      name: "input-with-button",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-h3.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-h3.tsx")),
+      registryDependencies: ["input","button"],
+      files: [{
+        path: "registry/new-york/examples/input-with-button.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-with-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h4": {
-      name: "typography-h4",
+    "input-with-label": {
+      name: "input-with-label",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-h4.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-h4.tsx")),
+      registryDependencies: ["input","button","label"],
+      files: [{
+        path: "registry/new-york/examples/input-with-label.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-with-label.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-inline-code": {
-      name: "typography-inline-code",
+    "input-with-text": {
+      name: "input-with-text",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-inline-code.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-inline-code.tsx")),
+      registryDependencies: ["input","button","label"],
+      files: [{
+        path: "registry/new-york/examples/input-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-with-text.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-large": {
-      name: "typography-large",
+    "input-otp-demo": {
+      name: "input-otp-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-large.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-large.tsx")),
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/new-york/examples/input-otp-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-otp-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-lead": {
-      name: "typography-lead",
+    "input-otp-pattern": {
+      name: "input-otp-pattern",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-lead.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-lead.tsx")),
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/new-york/examples/input-otp-pattern.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-otp-pattern.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-list": {
-      name: "typography-list",
+    "input-otp-separator": {
+      name: "input-otp-separator",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-list.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-list.tsx")),
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/new-york/examples/input-otp-separator.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-otp-separator.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-muted": {
-      name: "typography-muted",
+    "input-otp-controlled": {
+      name: "input-otp-controlled",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-muted.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-muted.tsx")),
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/new-york/examples/input-otp-controlled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-otp-controlled.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-p": {
-      name: "typography-p",
+    "input-otp-form": {
+      name: "input-otp-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-p.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-p.tsx")),
+      registryDependencies: ["input-otp","form"],
+      files: [{
+        path: "registry/new-york/examples/input-otp-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-otp-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-small": {
-      name: "typography-small",
+    "label-demo": {
+      name: "label-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-small.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-small.tsx")),
+      registryDependencies: ["label"],
+      files: [{
+        path: "registry/new-york/examples/label-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/label-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-table": {
-      name: "typography-table",
+    "menubar-demo": {
+      name: "menubar-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-table.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-table.tsx")),
+      registryDependencies: ["menubar"],
+      files: [{
+        path: "registry/new-york/examples/menubar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/menubar-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "mode-toggle": {
-      name: "mode-toggle",
+    "navigation-menu-demo": {
+      name: "navigation-menu-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/mode-toggle.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/mode-toggle.tsx")),
+      registryDependencies: ["navigation-menu"],
+      files: [{
+        path: "registry/new-york/examples/navigation-menu-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/navigation-menu-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo": {
-      name: "chart-bar-demo",
+    "pagination-demo": {
+      name: "pagination-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-bar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo.tsx")),
+      registryDependencies: ["pagination"],
+      files: [{
+        path: "registry/new-york/examples/pagination-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/pagination-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-grid": {
-      name: "chart-bar-demo-grid",
+    "popover-demo": {
+      name: "popover-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-bar-demo-grid.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-grid.tsx")),
+      registryDependencies: ["popover"],
+      files: [{
+        path: "registry/new-york/examples/popover-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/popover-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-axis": {
-      name: "chart-bar-demo-axis",
+    "progress-demo": {
+      name: "progress-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-bar-demo-axis.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-axis.tsx")),
+      registryDependencies: ["progress"],
+      files: [{
+        path: "registry/new-york/examples/progress-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/progress-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-tooltip": {
-      name: "chart-bar-demo-tooltip",
+    "radio-group-demo": {
+      name: "radio-group-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-bar-demo-tooltip.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-tooltip.tsx")),
+      registryDependencies: ["radio-group"],
+      files: [{
+        path: "registry/new-york/examples/radio-group-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/radio-group-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-legend": {
-      name: "chart-bar-demo-legend",
+    "radio-group-form": {
+      name: "radio-group-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-bar-demo-legend.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-legend.tsx")),
+      registryDependencies: ["radio-group","form"],
+      files: [{
+        path: "registry/new-york/examples/radio-group-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/radio-group-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-tooltip-demo": {
-      name: "chart-tooltip-demo",
+    "resizable-demo": {
+      name: "resizable-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-tooltip-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-tooltip-demo.tsx")),
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/new-york/examples/resizable-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/resizable-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "sidebar-01": {
-      name: "sidebar-01",
-      type: "registry:block",
-      registryDependencies: ["avatar","button","collapsible","dropdown-menu","drawer","separator","input","popover","sheet","progress","card","use-mobile"],
-      files: ["registry/new-york/block/sidebar-01/page.tsx","registry/new-york/block/sidebar-01/components/app-sidebar.tsx","registry/new-york/block/sidebar-01/components/nav-main.tsx","registry/new-york/block/sidebar-01/components/nav-projects.tsx","registry/new-york/block/sidebar-01/components/nav-secondary.tsx","registry/new-york/block/sidebar-01/components/nav-user.tsx","registry/new-york/block/sidebar-01/components/storage-card.tsx","registry/new-york/block/sidebar-01/components/team-switcher.tsx","registry/new-york/block/sidebar-01/hooks/use-sidebar.tsx","registry/new-york/block/sidebar-01/ui/sidebar.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-01/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-01/page.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: []
-    },
-    "login-01": {
-      name: "login-01",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/new-york/block/login-01/page.tsx","registry/new-york/block/login-01/components/login-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/login-01/page.tsx")),
-      source: "__registry__/new-york/block/login-01/page.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "charts-01": {
-      name: "charts-01",
-      type: "registry:block",
-      registryDependencies: ["chart"],
-      files: ["registry/new-york/block/charts-01.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/charts-01.tsx")),
-      source: "__registry__/new-york/block/charts-01.tsx",
-      category: "Application",
-      subcategory: "Charts",
-      chunks: [{
-        name: "charts-01-chunk-0",
-        description: "A bar chart showing the number of steps you have walked in the past 7 days.",
-        component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-0")),
-        file: "registry/new-york/block/charts-01-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-1",
-        description: "A line chart showing the resting heart rate for the past 7 days.",
-        component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-1")),
-        file: "registry/new-york/block/charts-01-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-2",
-        description: "Two horizontal bar charts showing total steps taken during the current year and last year.",
-        component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-2")),
-        file: "registry/new-york/block/charts-01-chunk-2.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-3",
-        description: "A bar chart showing the walking and running distance for the past 7 days.",
-        component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-3")),
-        file: "registry/new-york/block/charts-01-chunk-3.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-4",
-        description: "A bar chart showing move, exercise, and stand progress.",
-        component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-4")),
-        file: "registry/new-york/block/charts-01-chunk-4.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-5",
-        description: "A radial bar chart showing the percentage of time spent moving, exercising, and standing.",
-        component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-5")),
-        file: "registry/new-york/block/charts-01-chunk-5.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-6",
-        description: "A bar chart showing active energy in the past 7 days.",
-        component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-6")),
-        file: "registry/new-york/block/charts-01-chunk-6.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-7",
-        description: "An area chart showing the time spent in bed for the past 7 days.",
-        component: React.lazy(() => import("@/registry/new-york/block/charts-01-chunk-7")),
-        file: "registry/new-york/block/charts-01-chunk-7.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-05": {
-      name: "dashboard-05",
-      type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
-      files: ["registry/new-york/block/dashboard-05.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/dashboard-05.tsx")),
-      source: "__registry__/new-york/block/dashboard-05.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-05-chunk-0",
-        description: "A card for an orders dashboard with a description and a button to create a new order.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-05-chunk-0")),
-        file: "registry/new-york/block/dashboard-05-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-05-chunk-1",
-        description: "A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-05-chunk-1")),
-        file: "registry/new-york/block/dashboard-05-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-05-chunk-2",
-        description: "A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-05-chunk-2")),
-        file: "registry/new-york/block/dashboard-05-chunk-2.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-05-chunk-3",
-        description: "A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-05-chunk-3")),
-        file: "registry/new-york/block/dashboard-05-chunk-3.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-05-chunk-4",
-        description: "An order details card with order details, shipping information, customer information and payment information.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-05-chunk-4")),
-        file: "registry/new-york/block/dashboard-05-chunk-4.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-06": {
-      name: "dashboard-06",
-      type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
-      files: ["registry/new-york/block/dashboard-06.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/dashboard-06.tsx")),
-      source: "__registry__/new-york/block/dashboard-06.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-06-chunk-0",
-        description: "A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-06-chunk-0")),
-        file: "registry/new-york/block/dashboard-06-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-07": {
-      name: "dashboard-07",
-      type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
-      files: ["registry/new-york/block/dashboard-07.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/dashboard-07.tsx")),
-      source: "__registry__/new-york/block/dashboard-07.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-07-chunk-0",
-        description: "A card with a form to edit the product details",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-07-chunk-0")),
-        file: "registry/new-york/block/dashboard-07-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-07-chunk-1",
-        description: "A card with a form to edit the product stock and variants",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-07-chunk-1")),
-        file: "registry/new-york/block/dashboard-07-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-07-chunk-2",
-        description: "A card with a form to edit the product category and subcategory",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-07-chunk-2")),
-        file: "registry/new-york/block/dashboard-07-chunk-2.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-07-chunk-3",
-        description: "A card with a form to edit the product status",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-07-chunk-3")),
-        file: "registry/new-york/block/dashboard-07-chunk-3.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-07-chunk-4",
-        description: "A card with a form to upload product images",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-07-chunk-4")),
-        file: "registry/new-york/block/dashboard-07-chunk-4.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-07-chunk-5",
-        description: "A card with a call to action to archive the product",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-07-chunk-5")),
-        file: "registry/new-york/block/dashboard-07-chunk-5.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-04": {
-      name: "dashboard-04",
-      type: "registry:block",
-      registryDependencies: ["button","card","dropdown-menu","input"],
-      files: ["registry/new-york/block/dashboard-04.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/dashboard-04.tsx")),
-      source: "__registry__/new-york/block/dashboard-04.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-04-chunk-0",
-        description: "A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-04-chunk-0")),
-        file: "registry/new-york/block/dashboard-04-chunk-0.tsx",
-        container: {
-          className: "chunk-container after:right-0"
-        }
-      },{
-        name: "dashboard-04-chunk-1",
-        description: "A form to update the store name.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-04-chunk-1")),
-        file: "registry/new-york/block/dashboard-04-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-04-chunk-2",
-        description: "A form to update the plugins directory with a checkbox to allow administrators to change the directory.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-04-chunk-2")),
-        file: "registry/new-york/block/dashboard-04-chunk-2.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-03": {
-      name: "dashboard-03",
-      type: "registry:block",
-      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
-      files: ["registry/new-york/block/dashboard-03.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/dashboard-03.tsx")),
-      source: "__registry__/new-york/block/dashboard-03.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-03-chunk-0",
-        description: "A settings form a configuring an AI model and messages.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-03-chunk-0")),
-        file: "registry/new-york/block/dashboard-03-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-03-chunk-1",
-        description: "A form for sending a message to an AI chatbot. The form has a textarea and buttons to upload files and record audio.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-03-chunk-1")),
-        file: "registry/new-york/block/dashboard-03-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-02": {
-      name: "dashboard-02",
-      type: "registry:block",
-      registryDependencies: ["badge","button","card","dropdown-menu","input"],
-      files: ["registry/new-york/block/dashboard-02.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/dashboard-02.tsx")),
-      source: "__registry__/new-york/block/dashboard-02.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-02-chunk-0",
-        description: "A card with a call to action",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-02-chunk-0")),
-        file: "registry/new-york/block/dashboard-02-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-02-chunk-1",
-        description: "An empty state showing no products with a heading, description and a call to action to add a product.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-02-chunk-1")),
-        file: "registry/new-york/block/dashboard-02-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-01": {
-      name: "dashboard-01",
-      type: "registry:block",
-      registryDependencies: ["button","dropdown-menu","input","sheet"],
-      files: ["registry/new-york/block/dashboard-01.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/dashboard-01.tsx")),
-      source: "__registry__/new-york/block/dashboard-01.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-01-chunk-0",
-        description: "A card showing the total revenue in USD and the percentage difference from last month.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-01-chunk-0")),
-        file: "registry/new-york/block/dashboard-01-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-01-chunk-1",
-        description: "A card showing the total subscriptions and the percentage difference from last month.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-01-chunk-1")),
-        file: "registry/new-york/block/dashboard-01-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-01-chunk-2",
-        description: "A card showing the total sales and the percentage difference from last month.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-01-chunk-2")),
-        file: "registry/new-york/block/dashboard-01-chunk-2.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-01-chunk-3",
-        description: "A card showing the total active users and the percentage difference from last hour.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-01-chunk-3")),
-        file: "registry/new-york/block/dashboard-01-chunk-3.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-01-chunk-4",
-        description: "A card showing a table of recent transactions with a link to view all transactions.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-01-chunk-4")),
-        file: "registry/new-york/block/dashboard-01-chunk-4.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-01-chunk-5",
-        description: "A card showing a list of recent sales with customer names and email addresses.",
-        component: React.lazy(() => import("@/registry/new-york/block/dashboard-01-chunk-5")),
-        file: "registry/new-york/block/dashboard-01-chunk-5.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "authentication-01": {
-      name: "authentication-01",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/new-york/block/authentication-01.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/authentication-01.tsx")),
-      source: "__registry__/new-york/block/authentication-01.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "authentication-02": {
-      name: "authentication-02",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/new-york/block/authentication-02.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/authentication-02.tsx")),
-      source: "__registry__/new-york/block/authentication-02.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "authentication-03": {
-      name: "authentication-03",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/new-york/block/authentication-03.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/authentication-03.tsx")),
-      source: "__registry__/new-york/block/authentication-03.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "authentication-04": {
-      name: "authentication-04",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/new-york/block/authentication-04.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/authentication-04.tsx")),
-      source: "__registry__/new-york/block/authentication-04.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "chart-area-axes": {
-      name: "chart-area-axes",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-axes.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-axes.tsx")),
-      source: "__registry__/new-york/block/chart-area-axes.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-default": {
-      name: "chart-area-default",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-default.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-default.tsx")),
-      source: "__registry__/new-york/block/chart-area-default.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-gradient": {
-      name: "chart-area-gradient",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-gradient.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-gradient.tsx")),
-      source: "__registry__/new-york/block/chart-area-gradient.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-icons": {
-      name: "chart-area-icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-icons.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-icons.tsx")),
-      source: "__registry__/new-york/block/chart-area-icons.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-interactive": {
-      name: "chart-area-interactive",
-      type: "registry:block",
-      registryDependencies: ["card","chart","select"],
-      files: ["registry/new-york/block/chart-area-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-interactive.tsx")),
-      source: "__registry__/new-york/block/chart-area-interactive.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-legend": {
-      name: "chart-area-legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-legend.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-legend.tsx")),
-      source: "__registry__/new-york/block/chart-area-legend.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-linear": {
-      name: "chart-area-linear",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-linear.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-linear.tsx")),
-      source: "__registry__/new-york/block/chart-area-linear.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-stacked-expand": {
-      name: "chart-area-stacked-expand",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-stacked-expand.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-stacked-expand.tsx")),
-      source: "__registry__/new-york/block/chart-area-stacked-expand.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-stacked": {
-      name: "chart-area-stacked",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-stacked.tsx")),
-      source: "__registry__/new-york/block/chart-area-stacked.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+      meta: undefined,
     },
-    "chart-area-step": {
-      name: "chart-area-step",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-step.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-step.tsx")),
-      source: "__registry__/new-york/block/chart-area-step.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+    "resizable-demo-with-handle": {
+      name: "resizable-demo-with-handle",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/new-york/examples/resizable-demo-with-handle.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/resizable-demo-with-handle.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-active": {
-      name: "chart-bar-active",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-active.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-active.tsx")),
-      source: "__registry__/new-york/block/chart-bar-active.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "resizable-vertical": {
+      name: "resizable-vertical",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/new-york/examples/resizable-vertical.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/resizable-vertical.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-default": {
-      name: "chart-bar-default",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-default.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-default.tsx")),
-      source: "__registry__/new-york/block/chart-bar-default.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "resizable-handle": {
+      name: "resizable-handle",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/new-york/examples/resizable-handle.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/resizable-handle.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-horizontal": {
-      name: "chart-bar-horizontal",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-horizontal.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-horizontal.tsx")),
-      source: "__registry__/new-york/block/chart-bar-horizontal.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "scroll-area-demo": {
+      name: "scroll-area-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["scroll-area"],
+      files: [{
+        path: "registry/new-york/examples/scroll-area-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/scroll-area-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-interactive": {
-      name: "chart-bar-interactive",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-interactive.tsx")),
-      source: "__registry__/new-york/block/chart-bar-interactive.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "scroll-area-horizontal-demo": {
+      name: "scroll-area-horizontal-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["scroll-area"],
+      files: [{
+        path: "registry/new-york/examples/scroll-area-horizontal-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/scroll-area-horizontal-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-label-custom": {
-      name: "chart-bar-label-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-label-custom.tsx")),
-      source: "__registry__/new-york/block/chart-bar-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "select-demo": {
+      name: "select-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/new-york/examples/select-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/select-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-label": {
-      name: "chart-bar-label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-label.tsx")),
-      source: "__registry__/new-york/block/chart-bar-label.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "select-scrollable": {
+      name: "select-scrollable",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/new-york/examples/select-scrollable.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/select-scrollable.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-mixed": {
-      name: "chart-bar-mixed",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-mixed.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-mixed.tsx")),
-      source: "__registry__/new-york/block/chart-bar-mixed.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "select-form": {
+      name: "select-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/new-york/examples/select-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/select-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-multiple": {
-      name: "chart-bar-multiple",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-multiple.tsx")),
-      source: "__registry__/new-york/block/chart-bar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "separator-demo": {
+      name: "separator-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["separator"],
+      files: [{
+        path: "registry/new-york/examples/separator-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/separator-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-negative": {
-      name: "chart-bar-negative",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-negative.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-negative.tsx")),
-      source: "__registry__/new-york/block/chart-bar-negative.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "sheet-demo": {
+      name: "sheet-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["sheet"],
+      files: [{
+        path: "registry/new-york/examples/sheet-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/sheet-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-stacked": {
-      name: "chart-bar-stacked",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-stacked.tsx")),
-      source: "__registry__/new-york/block/chart-bar-stacked.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "sheet-side": {
+      name: "sheet-side",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["sheet"],
+      files: [{
+        path: "registry/new-york/examples/sheet-side.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/sheet-side.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-default": {
-      name: "chart-line-default",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-default.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-default.tsx")),
-      source: "__registry__/new-york/block/chart-line-default.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "skeleton-demo": {
+      name: "skeleton-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/new-york/examples/skeleton-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/skeleton-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-dots-colors": {
-      name: "chart-line-dots-colors",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-dots-colors.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots-colors.tsx")),
-      source: "__registry__/new-york/block/chart-line-dots-colors.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "skeleton-card": {
+      name: "skeleton-card",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/new-york/examples/skeleton-card.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/skeleton-card.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-dots-custom": {
-      name: "chart-line-dots-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-dots-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots-custom.tsx")),
-      source: "__registry__/new-york/block/chart-line-dots-custom.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "slider-demo": {
+      name: "slider-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["slider"],
+      files: [{
+        path: "registry/new-york/examples/slider-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/slider-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-dots": {
-      name: "chart-line-dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-dots.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots.tsx")),
-      source: "__registry__/new-york/block/chart-line-dots.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "sonner-demo": {
+      name: "sonner-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["sonner"],
+      files: [{
+        path: "registry/new-york/examples/sonner-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/sonner-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-interactive": {
-      name: "chart-line-interactive",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-interactive.tsx")),
-      source: "__registry__/new-york/block/chart-line-interactive.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "switch-demo": {
+      name: "switch-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["switch"],
+      files: [{
+        path: "registry/new-york/examples/switch-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/switch-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-label-custom": {
-      name: "chart-line-label-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-label-custom.tsx")),
-      source: "__registry__/new-york/block/chart-line-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "switch-form": {
+      name: "switch-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["switch","form"],
+      files: [{
+        path: "registry/new-york/examples/switch-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/switch-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-label": {
-      name: "chart-line-label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-label.tsx")),
-      source: "__registry__/new-york/block/chart-line-label.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "table-demo": {
+      name: "table-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["table"],
+      files: [{
+        path: "registry/new-york/examples/table-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/table-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-linear": {
-      name: "chart-line-linear",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-linear.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-linear.tsx")),
-      source: "__registry__/new-york/block/chart-line-linear.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "tabs-demo": {
+      name: "tabs-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["tabs"],
+      files: [{
+        path: "registry/new-york/examples/tabs-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/tabs-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-multiple": {
-      name: "chart-line-multiple",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-multiple.tsx")),
-      source: "__registry__/new-york/block/chart-line-multiple.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "textarea-demo": {
+      name: "textarea-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      files: [{
+        path: "registry/new-york/examples/textarea-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-step": {
-      name: "chart-line-step",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-step.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-step.tsx")),
-      source: "__registry__/new-york/block/chart-line-step.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "textarea-disabled": {
+      name: "textarea-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      files: [{
+        path: "registry/new-york/examples/textarea-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-disabled.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-donut-active": {
-      name: "chart-pie-donut-active",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-donut-active.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut-active.tsx")),
-      source: "__registry__/new-york/block/chart-pie-donut-active.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "textarea-form": {
+      name: "textarea-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","form"],
+      files: [{
+        path: "registry/new-york/examples/textarea-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-donut-text": {
-      name: "chart-pie-donut-text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-donut-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut-text.tsx")),
-      source: "__registry__/new-york/block/chart-pie-donut-text.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "textarea-with-button": {
+      name: "textarea-with-button",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","button"],
+      files: [{
+        path: "registry/new-york/examples/textarea-with-button.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-with-button.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-donut": {
-      name: "chart-pie-donut",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-donut.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut.tsx")),
-      source: "__registry__/new-york/block/chart-pie-donut.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "textarea-with-label": {
+      name: "textarea-with-label",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","label"],
+      files: [{
+        path: "registry/new-york/examples/textarea-with-label.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-with-label.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-interactive": {
-      name: "chart-pie-interactive",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-interactive.tsx")),
-      source: "__registry__/new-york/block/chart-pie-interactive.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "textarea-with-text": {
+      name: "textarea-with-text",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","label"],
+      files: [{
+        path: "registry/new-york/examples/textarea-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-with-text.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-label-custom": {
-      name: "chart-pie-label-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label-custom.tsx")),
-      source: "__registry__/new-york/block/chart-pie-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toast-demo": {
+      name: "toast-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/new-york/examples/toast-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toast-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-label-list": {
-      name: "chart-pie-label-list",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-label-list.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label-list.tsx")),
-      source: "__registry__/new-york/block/chart-pie-label-list.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toast-destructive": {
+      name: "toast-destructive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/new-york/examples/toast-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toast-destructive.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-label": {
-      name: "chart-pie-label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label.tsx")),
-      source: "__registry__/new-york/block/chart-pie-label.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toast-simple": {
+      name: "toast-simple",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/new-york/examples/toast-simple.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toast-simple.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-legend": {
-      name: "chart-pie-legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-legend.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-legend.tsx")),
-      source: "__registry__/new-york/block/chart-pie-legend.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toast-with-action": {
+      name: "toast-with-action",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/new-york/examples/toast-with-action.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toast-with-action.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-separator-none": {
-      name: "chart-pie-separator-none",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-separator-none.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-separator-none.tsx")),
-      source: "__registry__/new-york/block/chart-pie-separator-none.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toast-with-title": {
+      name: "toast-with-title",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/new-york/examples/toast-with-title.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toast-with-title.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-simple": {
-      name: "chart-pie-simple",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-simple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-simple.tsx")),
-      source: "__registry__/new-york/block/chart-pie-simple.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toggle-group-demo": {
+      name: "toggle-group-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-stacked": {
-      name: "chart-pie-stacked",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-stacked.tsx")),
-      source: "__registry__/new-york/block/chart-pie-stacked.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toggle-group-disabled": {
+      name: "toggle-group-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-disabled.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-default": {
-      name: "chart-radar-default",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-default.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-default.tsx")),
-      source: "__registry__/new-york/block/chart-radar-default.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-group-lg": {
+      name: "toggle-group-lg",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-lg.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-lg.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-dots": {
-      name: "chart-radar-dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-dots.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-dots.tsx")),
-      source: "__registry__/new-york/block/chart-radar-dots.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-group-outline": {
+      name: "toggle-group-outline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-outline.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-circle-fill": {
-      name: "chart-radar-grid-circle-fill",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-grid-circle-fill.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle-fill.tsx")),
-      source: "__registry__/new-york/block/chart-radar-grid-circle-fill.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-group-sm": {
+      name: "toggle-group-sm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-sm.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-sm.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-circle-no-lines": {
-      name: "chart-radar-grid-circle-no-lines",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-grid-circle-no-lines.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle-no-lines.tsx")),
-      source: "__registry__/new-york/block/chart-radar-grid-circle-no-lines.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-group-single": {
+      name: "toggle-group-single",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-single.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-single.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-circle": {
-      name: "chart-radar-grid-circle",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-grid-circle.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle.tsx")),
-      source: "__registry__/new-york/block/chart-radar-grid-circle.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-demo": {
+      name: "toggle-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-custom": {
-      name: "chart-radar-grid-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-grid-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-custom.tsx")),
-      source: "__registry__/new-york/block/chart-radar-grid-custom.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-disabled": {
+      name: "toggle-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-disabled.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-fill": {
-      name: "chart-radar-grid-fill",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-grid-fill.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-fill.tsx")),
-      source: "__registry__/new-york/block/chart-radar-grid-fill.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-lg": {
+      name: "toggle-lg",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-lg.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-lg.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-none": {
-      name: "chart-radar-grid-none",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-grid-none.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-none.tsx")),
-      source: "__registry__/new-york/block/chart-radar-grid-none.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-outline": {
+      name: "toggle-outline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-outline.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-icons": {
-      name: "chart-radar-icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-icons.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-icons.tsx")),
-      source: "__registry__/new-york/block/chart-radar-icons.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-sm": {
+      name: "toggle-sm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-sm.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-sm.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-label-custom": {
-      name: "chart-radar-label-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-label-custom.tsx")),
-      source: "__registry__/new-york/block/chart-radar-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-with-text": {
+      name: "toggle-with-text",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-with-text.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-legend": {
-      name: "chart-radar-legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-legend.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-legend.tsx")),
-      source: "__registry__/new-york/block/chart-radar-legend.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "tooltip-demo": {
+      name: "tooltip-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["tooltip"],
+      files: [{
+        path: "registry/new-york/examples/tooltip-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/tooltip-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-lines-only": {
-      name: "chart-radar-lines-only",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-lines-only.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-lines-only.tsx")),
-      source: "__registry__/new-york/block/chart-radar-lines-only.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "typography-blockquote": {
+      name: "typography-blockquote",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-blockquote.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-blockquote.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-multiple": {
-      name: "chart-radar-multiple",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-multiple.tsx")),
-      source: "__registry__/new-york/block/chart-radar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "typography-demo": {
+      name: "typography-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-radius": {
-      name: "chart-radar-radius",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-radius.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-radius.tsx")),
-      source: "__registry__/new-york/block/chart-radar-radius.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "typography-h1": {
+      name: "typography-h1",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-h1.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-h1.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-grid": {
-      name: "chart-radial-grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-grid.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-grid.tsx")),
-      source: "__registry__/new-york/block/chart-radial-grid.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-h2": {
+      name: "typography-h2",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-h2.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-h2.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-label": {
-      name: "chart-radial-label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-label.tsx")),
-      source: "__registry__/new-york/block/chart-radial-label.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-h3": {
+      name: "typography-h3",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-h3.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-h3.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-shape": {
-      name: "chart-radial-shape",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-shape.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-shape.tsx")),
-      source: "__registry__/new-york/block/chart-radial-shape.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-h4": {
+      name: "typography-h4",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-h4.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-h4.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-simple": {
-      name: "chart-radial-simple",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-simple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-simple.tsx")),
-      source: "__registry__/new-york/block/chart-radial-simple.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-inline-code": {
+      name: "typography-inline-code",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-inline-code.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-inline-code.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-stacked": {
-      name: "chart-radial-stacked",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-stacked.tsx")),
-      source: "__registry__/new-york/block/chart-radial-stacked.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-large": {
+      name: "typography-large",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-large.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-large.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-text": {
-      name: "chart-radial-text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-text.tsx")),
-      source: "__registry__/new-york/block/chart-radial-text.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-lead": {
+      name: "typography-lead",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-lead.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-lead.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-default": {
-      name: "chart-tooltip-default",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-default.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-default.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-default.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-list": {
+      name: "typography-list",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-list.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-list.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-indicator-line": {
-      name: "chart-tooltip-indicator-line",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-indicator-line.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-indicator-line.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-indicator-line.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-muted": {
+      name: "typography-muted",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-muted.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-muted.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-indicator-none": {
-      name: "chart-tooltip-indicator-none",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-indicator-none.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-indicator-none.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-indicator-none.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-p": {
+      name: "typography-p",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-p.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-p.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-label-none": {
-      name: "chart-tooltip-label-none",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-label-none.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-none.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-label-none.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-small": {
+      name: "typography-small",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-small.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-small.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-label-custom": {
-      name: "chart-tooltip-label-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-custom.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-table": {
+      name: "typography-table",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-table.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-table.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-label-formatter": {
-      name: "chart-tooltip-label-formatter",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-label-formatter.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-formatter.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-label-formatter.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "mode-toggle": {
+      name: "mode-toggle",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/mode-toggle.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/mode-toggle.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-formatter": {
-      name: "chart-tooltip-formatter",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-formatter.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-formatter.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-formatter.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "chart-bar-demo": {
+      name: "chart-bar-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/chart-bar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-bar-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-icons": {
-      name: "chart-tooltip-icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-icons.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-icons.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-icons.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "chart-bar-demo-grid": {
+      name: "chart-bar-demo-grid",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/chart-bar-demo-grid.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-bar-demo-grid.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-advanced": {
-      name: "chart-tooltip-advanced",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-advanced.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-advanced.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-advanced.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "chart-bar-demo-axis": {
+      name: "chart-bar-demo-axis",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/chart-bar-demo-axis.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-bar-demo-axis.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "utils": {
-      name: "utils",
-      type: "registry:lib",
+    "chart-bar-demo-tooltip": {
+      name: "chart-bar-demo-tooltip",
+      description: "",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/new-york/lib/utils.ts"],
-      component: React.lazy(() => import("@/registry/new-york/lib/utils.ts")),
+      files: [{
+        path: "registry/new-york/examples/chart-bar-demo-tooltip.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-bar-demo-tooltip.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "use-mobile": {
-      name: "use-mobile",
-      type: "registry:hook",
+    "chart-bar-demo-legend": {
+      name: "chart-bar-demo-legend",
+      description: "",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/new-york/hooks/use-mobile.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/hooks/use-mobile.tsx")),
+      files: [{
+        path: "registry/new-york/examples/chart-bar-demo-legend.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-bar-demo-legend.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "use-toast": {
-      name: "use-toast",
-      type: "registry:hook",
+    "chart-tooltip-demo": {
+      name: "chart-tooltip-demo",
+      description: "",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/new-york/hooks/use-toast.ts"],
-      component: React.lazy(() => import("@/registry/new-york/hooks/use-toast.ts")),
+      files: [{
+        path: "registry/new-york/examples/chart-tooltip-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-tooltip-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
   },  "default": {
+    "index": {
+      name: "index",
+      description: "",
+      type: "registry:style",
+      registryDependencies: ["utils"],
+      files: [],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/style/index")),
+      source: "",
+      meta: undefined,
+    },
+    "style": {
+      name: "style",
+      description: "",
+      type: "registry:style",
+      registryDependencies: ["utils"],
+      files: [],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/style/style")),
+      source: "",
+      meta: undefined,
+    },
     "accordion": {
       name: "accordion",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/accordion.tsx"],
+      files: [{
+        path: "registry/default/ui/accordion.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/accordion.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "alert": {
       name: "alert",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/alert.tsx"],
+      files: [{
+        path: "registry/default/ui/alert.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/alert.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "alert-dialog": {
       name: "alert-dialog",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/default/ui/alert-dialog.tsx"],
+      files: [{
+        path: "registry/default/ui/alert-dialog.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/alert-dialog.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "aspect-ratio": {
       name: "aspect-ratio",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/aspect-ratio.tsx"],
+      files: [{
+        path: "registry/default/ui/aspect-ratio.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/aspect-ratio.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "avatar": {
       name: "avatar",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/avatar.tsx"],
+      files: [{
+        path: "registry/default/ui/avatar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/avatar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "badge": {
       name: "badge",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/badge.tsx"],
+      files: [{
+        path: "registry/default/ui/badge.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/badge.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "breadcrumb": {
       name: "breadcrumb",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/breadcrumb.tsx"],
+      files: [{
+        path: "registry/default/ui/breadcrumb.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/breadcrumb.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "button": {
       name: "button",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/button.tsx"],
+      files: [{
+        path: "registry/default/ui/button.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "calendar": {
       name: "calendar",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/default/ui/calendar.tsx"],
+      files: [{
+        path: "registry/default/ui/calendar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/calendar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "card": {
       name: "card",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/card.tsx"],
+      files: [{
+        path: "registry/default/ui/card.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/card.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "carousel": {
       name: "carousel",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/default/ui/carousel.tsx"],
+      files: [{
+        path: "registry/default/ui/carousel.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/carousel.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "chart": {
       name: "chart",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["card"],
-      files: ["registry/default/ui/chart.tsx"],
+      files: [{
+        path: "registry/default/ui/chart.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/chart.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "checkbox": {
       name: "checkbox",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/checkbox.tsx"],
+      files: [{
+        path: "registry/default/ui/checkbox.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/checkbox.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "collapsible": {
       name: "collapsible",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/collapsible.tsx"],
+      files: [{
+        path: "registry/default/ui/collapsible.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/collapsible.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "command": {
       name: "command",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["dialog"],
-      files: ["registry/default/ui/command.tsx"],
+      files: [{
+        path: "registry/default/ui/command.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/command.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "context-menu": {
       name: "context-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/context-menu.tsx"],
+      files: [{
+        path: "registry/default/ui/context-menu.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/context-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "dialog": {
       name: "dialog",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/dialog.tsx"],
+      files: [{
+        path: "registry/default/ui/dialog.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/dialog.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "drawer": {
       name: "drawer",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/drawer.tsx"],
+      files: [{
+        path: "registry/default/ui/drawer.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/drawer.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "dropdown-menu": {
       name: "dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/dropdown-menu.tsx"],
+      files: [{
+        path: "registry/default/ui/dropdown-menu.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "form": {
       name: "form",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button","label"],
-      files: ["registry/default/ui/form.tsx"],
+      files: [{
+        path: "registry/default/ui/form.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "hover-card": {
       name: "hover-card",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/hover-card.tsx"],
+      files: [{
+        path: "registry/default/ui/hover-card.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/hover-card.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "input": {
       name: "input",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/input.tsx"],
+      files: [{
+        path: "registry/default/ui/input.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/input.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "input-otp": {
       name: "input-otp",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/input-otp.tsx"],
+      files: [{
+        path: "registry/default/ui/input-otp.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/input-otp.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "label": {
       name: "label",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/label.tsx"],
+      files: [{
+        path: "registry/default/ui/label.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/label.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "menubar": {
       name: "menubar",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/menubar.tsx"],
+      files: [{
+        path: "registry/default/ui/menubar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/menubar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "navigation-menu": {
       name: "navigation-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/navigation-menu.tsx"],
+      files: [{
+        path: "registry/default/ui/navigation-menu.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/navigation-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "pagination": {
       name: "pagination",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/default/ui/pagination.tsx"],
+      files: [{
+        path: "registry/default/ui/pagination.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/pagination.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "popover": {
       name: "popover",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/popover.tsx"],
+      files: [{
+        path: "registry/default/ui/popover.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/popover.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "progress": {
       name: "progress",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/progress.tsx"],
+      files: [{
+        path: "registry/default/ui/progress.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/progress.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "radio-group": {
       name: "radio-group",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/radio-group.tsx"],
+      files: [{
+        path: "registry/default/ui/radio-group.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/radio-group.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "resizable": {
       name: "resizable",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/resizable.tsx"],
+      files: [{
+        path: "registry/default/ui/resizable.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/resizable.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "scroll-area": {
       name: "scroll-area",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/scroll-area.tsx"],
+      files: [{
+        path: "registry/default/ui/scroll-area.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/scroll-area.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "select": {
       name: "select",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/select.tsx"],
+      files: [{
+        path: "registry/default/ui/select.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/select.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "separator": {
       name: "separator",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/separator.tsx"],
+      files: [{
+        path: "registry/default/ui/separator.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/separator.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "sheet": {
       name: "sheet",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/sheet.tsx"],
+      files: [{
+        path: "registry/default/ui/sheet.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/sheet.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
+    },
+    "sidebar": {
+      name: "sidebar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","separator","sheet","tooltip","input","use-mobile","skeleton"],
+      files: [{
+        path: "registry/default/ui/sidebar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/sidebar.tsx")),
+      source: "",
+      meta: undefined,
     },
     "skeleton": {
       name: "skeleton",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/skeleton.tsx"],
+      files: [{
+        path: "registry/default/ui/skeleton.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/skeleton.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "slider": {
       name: "slider",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/slider.tsx"],
+      files: [{
+        path: "registry/default/ui/slider.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/slider.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "sonner": {
       name: "sonner",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/sonner.tsx"],
+      files: [{
+        path: "registry/default/ui/sonner.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/sonner.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "switch": {
       name: "switch",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/switch.tsx"],
+      files: [{
+        path: "registry/default/ui/switch.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/switch.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "table": {
       name: "table",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/table.tsx"],
+      files: [{
+        path: "registry/default/ui/table.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/table.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "tabs": {
       name: "tabs",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/tabs.tsx"],
+      files: [{
+        path: "registry/default/ui/tabs.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/tabs.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "textarea": {
       name: "textarea",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/textarea.tsx"],
+      files: [{
+        path: "registry/default/ui/textarea.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/textarea.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
     "toast": {
       name: "toast",
+      description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/toast.tsx","registry/default/hooks/use-toast.ts","registry/default/ui/toaster.tsx"],
+      files: [{
+        path: "registry/default/ui/toast.tsx",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/hooks/use-toast.ts",
+        type: "registry:hook",
+        target: ""
+      },{
+        path: "registry/default/ui/toaster.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/toast.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
+    },
+    "toggle": {
+      name: "toggle",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/ui/toggle.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/toggle.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "toggle-group": {
+      name: "toggle-group",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/ui/toggle-group.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/toggle-group.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "tooltip": {
+      name: "tooltip",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/ui/tooltip.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/tooltip.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "dashboard-01": {
+      name: "dashboard-01",
+      description: "A dashboard with sidebar, charts and data table.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","chart","card","select","tabs","table","toggle-group","badge","button","checkbox","dropdown-menu","drawer","input","avatar","sheet","sonner"],
+      files: [{
+        path: "registry/default/blocks/dashboard-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/dashboard-01/data.json",
+        type: "registry:file",
+        target: "app/dashboard/data.json"
+      },{
+        path: "registry/default/blocks/dashboard-01/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/dashboard-01/components/chart-area-interactive.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/dashboard-01/components/data-table.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/dashboard-01/components/nav-documents.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/dashboard-01/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/dashboard-01/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/dashboard-01/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/dashboard-01/components/section-cards.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/dashboard-01/components/site-header.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/dashboard-01/page.tsx")),
+      source: "__registry__/default/blocks/dashboard-01/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-01": {
+      name: "sidebar-01",
+      description: "A simple sidebar with navigation grouped by section.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/blocks/sidebar-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-01/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-01/components/search-form.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-01/components/version-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-01/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-01/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-02": {
+      name: "sidebar-02",
+      description: "A sidebar with collapsible sections.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/blocks/sidebar-02/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-02/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-02/components/search-form.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-02/components/version-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-02/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-02/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-03": {
+      name: "sidebar-03",
+      description: "A sidebar with submenus.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb"],
+      files: [{
+        path: "registry/default/blocks/sidebar-03/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-03/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-03/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-03/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-04": {
+      name: "sidebar-04",
+      description: "A floating sidebar with submenus.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator"],
+      files: [{
+        path: "registry/default/blocks/sidebar-04/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-04/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-04/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-04/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-05": {
+      name: "sidebar-05",
+      description: "A sidebar with collapsible submenus.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
+      files: [{
+        path: "registry/default/blocks/sidebar-05/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-05/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-05/components/search-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-05/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-05/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-06": {
+      name: "sidebar-06",
+      description: "A sidebar with submenus as dropdowns.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","card","dropdown-menu"],
+      files: [{
+        path: "registry/default/blocks/sidebar-06/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-06/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-06/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-06/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-06/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-07": {
+      name: "sidebar-07",
+      description: "A sidebar that collapses to icons.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/default/blocks/sidebar-07/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-07/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-07/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-07/components/nav-projects.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-07/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-07/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-07/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-07/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-08": {
+      name: "sidebar-08",
+      description: "An inset sidebar with secondary navigation.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/default/blocks/sidebar-08/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-08/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-08/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-08/components/nav-projects.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-08/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-08/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-08/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-08/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-09": {
+      name: "sidebar-09",
+      description: "Collapsible nested sidebars.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch","label"],
+      files: [{
+        path: "registry/default/blocks/sidebar-09/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-09/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-09/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-09/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-09/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-10": {
+      name: "sidebar-10",
+      description: "A sidebar in a popover.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu"],
+      files: [{
+        path: "registry/default/blocks/sidebar-10/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-10/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-10/components/nav-actions.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-10/components/nav-favorites.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-10/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-10/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-10/components/nav-workspaces.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-10/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-10/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-10/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-11": {
+      name: "sidebar-11",
+      description: "A sidebar with a collapsible file tree.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible"],
+      files: [{
+        path: "registry/default/blocks/sidebar-11/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-11/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-11/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-11/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-12": {
+      name: "sidebar-12",
+      description: "A sidebar with a calendar.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","calendar","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/default/blocks/sidebar-12/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-12/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-12/components/calendars.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-12/components/date-picker.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-12/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-12/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-12/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-13": {
+      name: "sidebar-13",
+      description: "A sidebar in a dialog.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","button","dialog"],
+      files: [{
+        path: "registry/default/blocks/sidebar-13/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-13/components/settings-dialog.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-13/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-13/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-14": {
+      name: "sidebar-14",
+      description: "A sidebar on the right.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb"],
+      files: [{
+        path: "registry/default/blocks/sidebar-14/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-14/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-14/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-14/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-15": {
+      name: "sidebar-15",
+      description: "A left and right sidebar.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu","calendar","avatar"],
+      files: [{
+        path: "registry/default/blocks/sidebar-15/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-15/components/calendars.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-15/components/date-picker.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-15/components/nav-favorites.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-15/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-15/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-15/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-15/components/nav-workspaces.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-15/components/sidebar-left.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-15/components/sidebar-right.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-15/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-15/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-15/page.tsx",
+      meta: undefined,
+    },
+    "sidebar-16": {
+      name: "sidebar-16",
+      description: "A sidebar with a sticky site header.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","button","label"],
+      files: [{
+        path: "registry/default/blocks/sidebar-16/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/default/blocks/sidebar-16/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-16/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-16/components/nav-projects.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-16/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-16/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-16/components/search-form.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/sidebar-16/components/site-header.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/default/blocks/sidebar-16/page.tsx")),
+      source: "__registry__/default/blocks/sidebar-16/page.tsx",
+      meta: undefined,
+    },
+    "login-01": {
+      name: "login-01",
+      description: "A simple login form.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/blocks/login-01/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/blocks/login-01/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/default/blocks/login-01/page.tsx")),
+      source: "__registry__/default/blocks/login-01/page.tsx",
+      meta: undefined,
+    },
+    "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/blocks/login-02/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/blocks/login-02/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/default/blocks/login-02/page.tsx")),
+      source: "__registry__/default/blocks/login-02/page.tsx",
+      meta: undefined,
+    },
+    "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/blocks/login-03/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/blocks/login-03/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/default/blocks/login-03/page.tsx")),
+      source: "__registry__/default/blocks/login-03/page.tsx",
+      meta: undefined,
+    },
+    "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/blocks/login-04/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/blocks/login-04/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/default/blocks/login-04/page.tsx")),
+      source: "__registry__/default/blocks/login-04/page.tsx",
+      meta: undefined,
+    },
+    "login-05": {
+      name: "login-05",
+      description: "A simple email-only login page.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/blocks/login-05/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/blocks/login-05/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/default/blocks/login-05/page.tsx")),
+      source: "__registry__/default/blocks/login-05/page.tsx",
+      meta: undefined,
+    },
+    "calendar-01": {
+      name: "calendar-01",
+      description: "A simple calendar.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-01.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-01.tsx")),
+      source: "__registry__/default/blocks/calendar-01.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-02": {
+      name: "calendar-02",
+      description: "Multiple months with single selection.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-02.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-02.tsx")),
+      source: "__registry__/default/blocks/calendar-02.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-03": {
+      name: "calendar-03",
+      description: "Multiple months with multiple selection.",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-03.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-03.tsx")),
+      source: "__registry__/default/blocks/calendar-03.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-04": {
+      name: "calendar-04",
+      description: "Single month with range selection",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-04.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-04.tsx")),
+      source: "__registry__/default/blocks/calendar-04.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28","mobile":"component"},
+    },
+    "calendar-05": {
+      name: "calendar-05",
+      description: "Multiple months with range selection",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-05.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-05.tsx")),
+      source: "__registry__/default/blocks/calendar-05.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-06": {
+      name: "calendar-06",
+      description: "Range selection with minimum days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-06.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-06.tsx")),
+      source: "__registry__/default/blocks/calendar-06.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-07": {
+      name: "calendar-07",
+      description: "Range selection with minimum and maximum days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-07.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-07.tsx")),
+      source: "__registry__/default/blocks/calendar-07.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-08": {
+      name: "calendar-08",
+      description: "Calendar with disabled days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-08.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-08.tsx")),
+      source: "__registry__/default/blocks/calendar-08.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-09": {
+      name: "calendar-09",
+      description: "Calendar with disabled weekends",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-09.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-09.tsx")),
+      source: "__registry__/default/blocks/calendar-09.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-10": {
+      name: "calendar-10",
+      description: "Today button",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-10.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-10.tsx")),
+      source: "__registry__/default/blocks/calendar-10.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-11": {
+      name: "calendar-11",
+      description: "Start and end of month",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-11.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-11.tsx")),
+      source: "__registry__/default/blocks/calendar-11.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-12": {
+      name: "calendar-12",
+      description: "Localized calendar",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","select"],
+      files: [{
+        path: "registry/default/blocks/calendar-12.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-12.tsx")),
+      source: "__registry__/default/blocks/calendar-12.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-13": {
+      name: "calendar-13",
+      description: "With Month and Year Dropdown",
+      type: "registry:block",
+      registryDependencies: ["calendar","label","select"],
+      files: [{
+        path: "registry/default/blocks/calendar-13.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-13.tsx")),
+      source: "__registry__/default/blocks/calendar-13.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-14": {
+      name: "calendar-14",
+      description: "With Booked/Unavailable Days",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-14.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-14.tsx")),
+      source: "__registry__/default/blocks/calendar-14.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-15": {
+      name: "calendar-15",
+      description: "With Week Numbers",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-15.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-15.tsx")),
+      source: "__registry__/default/blocks/calendar-15.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-16": {
+      name: "calendar-16",
+      description: "With time picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-16.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-16.tsx")),
+      source: "__registry__/default/blocks/calendar-16.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-17": {
+      name: "calendar-17",
+      description: "With time picker inline",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-17.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-17.tsx")),
+      source: "__registry__/default/blocks/calendar-17.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-18": {
+      name: "calendar-18",
+      description: "Variable size",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-18.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-18.tsx")),
+      source: "__registry__/default/blocks/calendar-18.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-19": {
+      name: "calendar-19",
+      description: "With presets",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","input","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-19.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-19.tsx")),
+      source: "__registry__/default/blocks/calendar-19.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-20": {
+      name: "calendar-20",
+      description: "With time presets",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-20.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-20.tsx")),
+      source: "__registry__/default/blocks/calendar-20.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-21": {
+      name: "calendar-21",
+      description: "Custom days and formatters",
+      type: "registry:block",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/blocks/calendar-21.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-21.tsx")),
+      source: "__registry__/default/blocks/calendar-21.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-22": {
+      name: "calendar-22",
+      description: "Date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-22.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-22.tsx")),
+      source: "__registry__/default/blocks/calendar-22.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-23": {
+      name: "calendar-23",
+      description: "Date range picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-23.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-23.tsx")),
+      source: "__registry__/default/blocks/calendar-23.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-24": {
+      name: "calendar-24",
+      description: "Date and Time picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-24.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-24.tsx")),
+      source: "__registry__/default/blocks/calendar-24.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-25": {
+      name: "calendar-25",
+      description: "Date and Time range picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-25.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-25.tsx")),
+      source: "__registry__/default/blocks/calendar-25.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-26": {
+      name: "calendar-26",
+      description: "Date range picker with time",
+      type: "registry:block",
+      registryDependencies: ["calendar","popover","button","input","label"],
+      files: [{
+        path: "registry/default/blocks/calendar-26.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-26.tsx")),
+      source: "__registry__/default/blocks/calendar-26.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-27": {
+      name: "calendar-27",
+      description: "Chart filter",
+      type: "registry:block",
+      registryDependencies: ["calendar","chart","card","popover","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-27.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-27.tsx")),
+      source: "__registry__/default/blocks/calendar-27.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-28": {
+      name: "calendar-28",
+      description: "Input with date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-28.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-28.tsx")),
+      source: "__registry__/default/blocks/calendar-28.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-29": {
+      name: "calendar-29",
+      description: "Natural language date picker",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-29.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-29.tsx")),
+      source: "__registry__/default/blocks/calendar-29.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-30": {
+      name: "calendar-30",
+      description: "With little-date",
+      type: "registry:block",
+      registryDependencies: ["calendar","input","label","popover","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-30.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-30.tsx")),
+      source: "__registry__/default/blocks/calendar-30.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "calendar-31": {
+      name: "calendar-31",
+      description: "With event slots",
+      type: "registry:block",
+      registryDependencies: ["calendar","card","button"],
+      files: [{
+        path: "registry/default/blocks/calendar-31.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-31.tsx")),
+      source: "__registry__/default/blocks/calendar-31.tsx",
+      meta: {"iframeHeight":"700px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0","mobile":"component"},
+    },
+    "calendar-32": {
+      name: "calendar-32",
+      description: "Date picker in a drawer",
+      type: "registry:block",
+      registryDependencies: ["calendar","button","drawer"],
+      files: [{
+        path: "registry/default/blocks/calendar-32.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["calendar","date"],
+      component: React.lazy(() => import("@/registry/default/blocks/calendar-32.tsx")),
+      source: "__registry__/default/blocks/calendar-32.tsx",
+      meta: {"iframeHeight":"600px","container":"w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24","mobile":"component"},
+    },
+    "chart-area-axes": {
+      name: "chart-area-axes",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-area-axes.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-area-axes.tsx")),
+      source: "__registry__/default/charts/chart-area-axes.tsx",
+      meta: undefined,
+    },
+    "chart-area-default": {
+      name: "chart-area-default",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-area-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-area-default.tsx")),
+      source: "__registry__/default/charts/chart-area-default.tsx",
+      meta: undefined,
+    },
+    "chart-area-gradient": {
+      name: "chart-area-gradient",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-area-gradient.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-area-gradient.tsx")),
+      source: "__registry__/default/charts/chart-area-gradient.tsx",
+      meta: undefined,
+    },
+    "chart-area-icons": {
+      name: "chart-area-icons",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-area-icons.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-area-icons.tsx")),
+      source: "__registry__/default/charts/chart-area-icons.tsx",
+      meta: undefined,
+    },
+    "chart-area-interactive": {
+      name: "chart-area-interactive",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart","select"],
+      files: [{
+        path: "registry/default/charts/chart-area-interactive.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-area-interactive.tsx")),
+      source: "__registry__/default/charts/chart-area-interactive.tsx",
+      meta: undefined,
+    },
+    "chart-area-legend": {
+      name: "chart-area-legend",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-area-legend.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-area-legend.tsx")),
+      source: "__registry__/default/charts/chart-area-legend.tsx",
+      meta: undefined,
+    },
+    "chart-area-linear": {
+      name: "chart-area-linear",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-area-linear.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-area-linear.tsx")),
+      source: "__registry__/default/charts/chart-area-linear.tsx",
+      meta: undefined,
+    },
+    "chart-area-stacked-expand": {
+      name: "chart-area-stacked-expand",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-area-stacked-expand.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-area-stacked-expand.tsx")),
+      source: "__registry__/default/charts/chart-area-stacked-expand.tsx",
+      meta: undefined,
+    },
+    "chart-area-stacked": {
+      name: "chart-area-stacked",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-area-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-area-stacked.tsx")),
+      source: "__registry__/default/charts/chart-area-stacked.tsx",
+      meta: undefined,
+    },
+    "chart-area-step": {
+      name: "chart-area-step",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-area-step.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-area-step.tsx")),
+      source: "__registry__/default/charts/chart-area-step.tsx",
+      meta: undefined,
+    },
+    "chart-bar-active": {
+      name: "chart-bar-active",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-bar-active.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-bar-active.tsx")),
+      source: "__registry__/default/charts/chart-bar-active.tsx",
+      meta: undefined,
+    },
+    "chart-bar-default": {
+      name: "chart-bar-default",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-bar-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-bar-default.tsx")),
+      source: "__registry__/default/charts/chart-bar-default.tsx",
+      meta: undefined,
     },
-    "toggle": {
-      name: "toggle",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: ["registry/default/ui/toggle.tsx"],
-      component: React.lazy(() => import("@/registry/default/ui/toggle.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-horizontal": {
+      name: "chart-bar-horizontal",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-bar-horizontal.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-bar-horizontal.tsx")),
+      source: "__registry__/default/charts/chart-bar-horizontal.tsx",
+      meta: undefined,
     },
-    "toggle-group": {
-      name: "toggle-group",
-      type: "registry:ui",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/ui/toggle-group.tsx"],
-      component: React.lazy(() => import("@/registry/default/ui/toggle-group.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-interactive": {
+      name: "chart-bar-interactive",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-bar-interactive.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-bar-interactive.tsx")),
+      source: "__registry__/default/charts/chart-bar-interactive.tsx",
+      meta: undefined,
     },
-    "tooltip": {
-      name: "tooltip",
-      type: "registry:ui",
-      registryDependencies: undefined,
-      files: ["registry/default/ui/tooltip.tsx"],
-      component: React.lazy(() => import("@/registry/default/ui/tooltip.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-label-custom": {
+      name: "chart-bar-label-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-bar-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-bar-label-custom.tsx")),
+      source: "__registry__/default/charts/chart-bar-label-custom.tsx",
+      meta: undefined,
     },
-    "accordion-demo": {
-      name: "accordion-demo",
-      type: "registry:example",
-      registryDependencies: ["accordion"],
-      files: ["registry/default/example/accordion-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/accordion-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-label": {
+      name: "chart-bar-label",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-bar-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-bar-label.tsx")),
+      source: "__registry__/default/charts/chart-bar-label.tsx",
+      meta: undefined,
     },
-    "alert-demo": {
-      name: "alert-demo",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: ["registry/default/example/alert-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/alert-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-mixed": {
+      name: "chart-bar-mixed",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-bar-mixed.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-bar-mixed.tsx")),
+      source: "__registry__/default/charts/chart-bar-mixed.tsx",
+      meta: undefined,
     },
-    "alert-destructive": {
-      name: "alert-destructive",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: ["registry/default/example/alert-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/alert-destructive.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-multiple": {
+      name: "chart-bar-multiple",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-bar-multiple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-bar-multiple.tsx")),
+      source: "__registry__/default/charts/chart-bar-multiple.tsx",
+      meta: undefined,
     },
-    "alert-dialog-demo": {
-      name: "alert-dialog-demo",
-      type: "registry:example",
-      registryDependencies: ["alert-dialog","button"],
-      files: ["registry/default/example/alert-dialog-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/alert-dialog-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-negative": {
+      name: "chart-bar-negative",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-bar-negative.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-bar-negative.tsx")),
+      source: "__registry__/default/charts/chart-bar-negative.tsx",
+      meta: undefined,
     },
-    "aspect-ratio-demo": {
-      name: "aspect-ratio-demo",
-      type: "registry:example",
-      registryDependencies: ["aspect-ratio"],
-      files: ["registry/default/example/aspect-ratio-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/aspect-ratio-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-bar-stacked": {
+      name: "chart-bar-stacked",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-bar-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-bar-stacked.tsx")),
+      source: "__registry__/default/charts/chart-bar-stacked.tsx",
+      meta: undefined,
     },
-    "avatar-demo": {
-      name: "avatar-demo",
-      type: "registry:example",
-      registryDependencies: ["avatar"],
-      files: ["registry/default/example/avatar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/avatar-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-default": {
+      name: "chart-line-default",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-line-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-line-default.tsx")),
+      source: "__registry__/default/charts/chart-line-default.tsx",
+      meta: undefined,
     },
-    "badge-demo": {
-      name: "badge-demo",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/default/example/badge-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/badge-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-dots-colors": {
+      name: "chart-line-dots-colors",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-line-dots-colors.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-line-dots-colors.tsx")),
+      source: "__registry__/default/charts/chart-line-dots-colors.tsx",
+      meta: undefined,
     },
-    "badge-destructive": {
-      name: "badge-destructive",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/default/example/badge-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/badge-destructive.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-dots-custom": {
+      name: "chart-line-dots-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-line-dots-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-line-dots-custom.tsx")),
+      source: "__registry__/default/charts/chart-line-dots-custom.tsx",
+      meta: undefined,
     },
-    "badge-outline": {
-      name: "badge-outline",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/default/example/badge-outline.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/badge-outline.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-dots": {
+      name: "chart-line-dots",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-line-dots.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-line-dots.tsx")),
+      source: "__registry__/default/charts/chart-line-dots.tsx",
+      meta: undefined,
     },
-    "badge-secondary": {
-      name: "badge-secondary",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/default/example/badge-secondary.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/badge-secondary.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-interactive": {
+      name: "chart-line-interactive",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-line-interactive.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-line-interactive.tsx")),
+      source: "__registry__/default/charts/chart-line-interactive.tsx",
+      meta: undefined,
     },
-    "breadcrumb-demo": {
-      name: "breadcrumb-demo",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-label-custom": {
+      name: "chart-line-label-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-line-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-line-label-custom.tsx")),
+      source: "__registry__/default/charts/chart-line-label-custom.tsx",
+      meta: undefined,
     },
-    "breadcrumb-separator": {
-      name: "breadcrumb-separator",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-separator.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-separator.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-label": {
+      name: "chart-line-label",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-line-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-line-label.tsx")),
+      source: "__registry__/default/charts/chart-line-label.tsx",
+      meta: undefined,
     },
-    "breadcrumb-dropdown": {
-      name: "breadcrumb-dropdown",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-dropdown.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-dropdown.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-linear": {
+      name: "chart-line-linear",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-line-linear.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-line-linear.tsx")),
+      source: "__registry__/default/charts/chart-line-linear.tsx",
+      meta: undefined,
     },
-    "breadcrumb-ellipsis": {
-      name: "breadcrumb-ellipsis",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-ellipsis.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-ellipsis.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-multiple": {
+      name: "chart-line-multiple",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-line-multiple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-line-multiple.tsx")),
+      source: "__registry__/default/charts/chart-line-multiple.tsx",
+      meta: undefined,
     },
-    "breadcrumb-link": {
-      name: "breadcrumb-link",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-link.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-link.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-line-step": {
+      name: "chart-line-step",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-line-step.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-line-step.tsx")),
+      source: "__registry__/default/charts/chart-line-step.tsx",
+      meta: undefined,
     },
-    "breadcrumb-responsive": {
-      name: "breadcrumb-responsive",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-responsive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-responsive.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-donut-active": {
+      name: "chart-pie-donut-active",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-pie-donut-active.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-pie-donut-active.tsx")),
+      source: "__registry__/default/charts/chart-pie-donut-active.tsx",
+      meta: undefined,
     },
-    "button-demo": {
-      name: "button-demo",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-donut-text": {
+      name: "chart-pie-donut-text",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-pie-donut-text.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-pie-donut-text.tsx")),
+      source: "__registry__/default/charts/chart-pie-donut-text.tsx",
+      meta: undefined,
     },
-    "button-secondary": {
-      name: "button-secondary",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-secondary.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-secondary.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-donut": {
+      name: "chart-pie-donut",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-pie-donut.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-pie-donut.tsx")),
+      source: "__registry__/default/charts/chart-pie-donut.tsx",
+      meta: undefined,
     },
-    "button-destructive": {
-      name: "button-destructive",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-destructive.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-interactive": {
+      name: "chart-pie-interactive",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-pie-interactive.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-pie-interactive.tsx")),
+      source: "__registry__/default/charts/chart-pie-interactive.tsx",
+      meta: undefined,
     },
-    "button-outline": {
-      name: "button-outline",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-outline.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-outline.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-label-custom": {
+      name: "chart-pie-label-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-pie-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-pie-label-custom.tsx")),
+      source: "__registry__/default/charts/chart-pie-label-custom.tsx",
+      meta: undefined,
     },
-    "button-ghost": {
-      name: "button-ghost",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-ghost.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-ghost.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-label-list": {
+      name: "chart-pie-label-list",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-pie-label-list.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-pie-label-list.tsx")),
+      source: "__registry__/default/charts/chart-pie-label-list.tsx",
+      meta: undefined,
     },
-    "button-link": {
-      name: "button-link",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-link.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-link.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-label": {
+      name: "chart-pie-label",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-pie-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-pie-label.tsx")),
+      source: "__registry__/default/charts/chart-pie-label.tsx",
+      meta: undefined,
     },
-    "button-with-icon": {
-      name: "button-with-icon",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-with-icon.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-with-icon.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-legend": {
+      name: "chart-pie-legend",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-pie-legend.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-pie-legend.tsx")),
+      source: "__registry__/default/charts/chart-pie-legend.tsx",
+      meta: undefined,
     },
-    "button-loading": {
-      name: "button-loading",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-loading.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-loading.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-separator-none": {
+      name: "chart-pie-separator-none",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-pie-separator-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-pie-separator-none.tsx")),
+      source: "__registry__/default/charts/chart-pie-separator-none.tsx",
+      meta: undefined,
     },
-    "button-icon": {
-      name: "button-icon",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-icon.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-icon.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-simple": {
+      name: "chart-pie-simple",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-pie-simple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-pie-simple.tsx")),
+      source: "__registry__/default/charts/chart-pie-simple.tsx",
+      meta: undefined,
     },
-    "button-as-child": {
-      name: "button-as-child",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-as-child.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-as-child.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-pie-stacked": {
+      name: "chart-pie-stacked",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-pie-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-pie-stacked.tsx")),
+      source: "__registry__/default/charts/chart-pie-stacked.tsx",
+      meta: undefined,
     },
-    "calendar-demo": {
-      name: "calendar-demo",
-      type: "registry:example",
-      registryDependencies: ["calendar"],
-      files: ["registry/default/example/calendar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/calendar-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-default": {
+      name: "chart-radar-default",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-default.tsx")),
+      source: "__registry__/default/charts/chart-radar-default.tsx",
+      meta: undefined,
     },
-    "calendar-form": {
-      name: "calendar-form",
-      type: "registry:example",
-      registryDependencies: ["calendar","form","popover"],
-      files: ["registry/default/example/calendar-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/calendar-form.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-dots": {
+      name: "chart-radar-dots",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-dots.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-dots.tsx")),
+      source: "__registry__/default/charts/chart-radar-dots.tsx",
+      meta: undefined,
     },
-    "card-demo": {
-      name: "card-demo",
-      type: "registry:example",
-      registryDependencies: ["card","button","switch"],
-      files: ["registry/default/example/card-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/card-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-circle-fill": {
+      name: "chart-radar-grid-circle-fill",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-grid-circle-fill.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-grid-circle-fill.tsx")),
+      source: "__registry__/default/charts/chart-radar-grid-circle-fill.tsx",
+      meta: undefined,
     },
-    "card-with-form": {
-      name: "card-with-form",
-      type: "registry:example",
-      registryDependencies: ["button","card","input","label","select"],
-      files: ["registry/default/example/card-with-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/card-with-form.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-circle-no-lines": {
+      name: "chart-radar-grid-circle-no-lines",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-grid-circle-no-lines.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-grid-circle-no-lines.tsx")),
+      source: "__registry__/default/charts/chart-radar-grid-circle-no-lines.tsx",
+      meta: undefined,
     },
-    "carousel-demo": {
-      name: "carousel-demo",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-circle": {
+      name: "chart-radar-grid-circle",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-grid-circle.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-grid-circle.tsx")),
+      source: "__registry__/default/charts/chart-radar-grid-circle.tsx",
+      meta: undefined,
     },
-    "carousel-size": {
-      name: "carousel-size",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-size.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-size.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-custom": {
+      name: "chart-radar-grid-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-grid-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-grid-custom.tsx")),
+      source: "__registry__/default/charts/chart-radar-grid-custom.tsx",
+      meta: undefined,
     },
-    "carousel-spacing": {
-      name: "carousel-spacing",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-spacing.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-spacing.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-fill": {
+      name: "chart-radar-grid-fill",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-grid-fill.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-grid-fill.tsx")),
+      source: "__registry__/default/charts/chart-radar-grid-fill.tsx",
+      meta: undefined,
     },
-    "carousel-orientation": {
-      name: "carousel-orientation",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-orientation.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-orientation.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-grid-none": {
+      name: "chart-radar-grid-none",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-grid-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-grid-none.tsx")),
+      source: "__registry__/default/charts/chart-radar-grid-none.tsx",
+      meta: undefined,
     },
-    "carousel-api": {
-      name: "carousel-api",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-api.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-api.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-icons": {
+      name: "chart-radar-icons",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-icons.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-icons.tsx")),
+      source: "__registry__/default/charts/chart-radar-icons.tsx",
+      meta: undefined,
     },
-    "carousel-plugin": {
-      name: "carousel-plugin",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-plugin.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-plugin.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-label-custom": {
+      name: "chart-radar-label-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-label-custom.tsx")),
+      source: "__registry__/default/charts/chart-radar-label-custom.tsx",
+      meta: undefined,
     },
-    "checkbox-demo": {
-      name: "checkbox-demo",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/default/example/checkbox-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/checkbox-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-legend": {
+      name: "chart-radar-legend",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-legend.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-legend.tsx")),
+      source: "__registry__/default/charts/chart-radar-legend.tsx",
+      meta: undefined,
     },
-    "checkbox-disabled": {
-      name: "checkbox-disabled",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/default/example/checkbox-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/checkbox-disabled.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-lines-only": {
+      name: "chart-radar-lines-only",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-lines-only.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-lines-only.tsx")),
+      source: "__registry__/default/charts/chart-radar-lines-only.tsx",
+      meta: undefined,
     },
-    "checkbox-form-multiple": {
-      name: "checkbox-form-multiple",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: ["registry/default/example/checkbox-form-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/checkbox-form-multiple.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-multiple": {
+      name: "chart-radar-multiple",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-multiple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-multiple.tsx")),
+      source: "__registry__/default/charts/chart-radar-multiple.tsx",
+      meta: undefined,
     },
-    "checkbox-form-single": {
-      name: "checkbox-form-single",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: ["registry/default/example/checkbox-form-single.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/checkbox-form-single.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radar-radius": {
+      name: "chart-radar-radius",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radar-radius.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radar-radius.tsx")),
+      source: "__registry__/default/charts/chart-radar-radius.tsx",
+      meta: undefined,
     },
-    "checkbox-with-text": {
-      name: "checkbox-with-text",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/default/example/checkbox-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/checkbox-with-text.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radial-grid": {
+      name: "chart-radial-grid",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radial-grid.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radial-grid.tsx")),
+      source: "__registry__/default/charts/chart-radial-grid.tsx",
+      meta: undefined,
     },
-    "collapsible-demo": {
-      name: "collapsible-demo",
-      type: "registry:example",
-      registryDependencies: ["collapsible"],
-      files: ["registry/default/example/collapsible-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/collapsible-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radial-label": {
+      name: "chart-radial-label",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radial-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radial-label.tsx")),
+      source: "__registry__/default/charts/chart-radial-label.tsx",
+      meta: undefined,
     },
-    "combobox-demo": {
-      name: "combobox-demo",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: ["registry/default/example/combobox-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/combobox-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radial-shape": {
+      name: "chart-radial-shape",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radial-shape.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radial-shape.tsx")),
+      source: "__registry__/default/charts/chart-radial-shape.tsx",
+      meta: undefined,
     },
-    "combobox-dropdown-menu": {
-      name: "combobox-dropdown-menu",
-      type: "registry:example",
-      registryDependencies: ["command","dropdown-menu","button"],
-      files: ["registry/default/example/combobox-dropdown-menu.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/combobox-dropdown-menu.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radial-simple": {
+      name: "chart-radial-simple",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radial-simple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radial-simple.tsx")),
+      source: "__registry__/default/charts/chart-radial-simple.tsx",
+      meta: undefined,
     },
-    "combobox-form": {
-      name: "combobox-form",
-      type: "registry:example",
-      registryDependencies: ["command","form"],
-      files: ["registry/default/example/combobox-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/combobox-form.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radial-stacked": {
+      name: "chart-radial-stacked",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radial-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radial-stacked.tsx")),
+      source: "__registry__/default/charts/chart-radial-stacked.tsx",
+      meta: undefined,
     },
-    "combobox-popover": {
-      name: "combobox-popover",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover"],
-      files: ["registry/default/example/combobox-popover.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/combobox-popover.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-radial-text": {
+      name: "chart-radial-text",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-radial-text.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-radial-text.tsx")),
+      source: "__registry__/default/charts/chart-radial-text.tsx",
+      meta: undefined,
     },
-    "combobox-responsive": {
-      name: "combobox-responsive",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover","drawer"],
-      files: ["registry/default/example/combobox-responsive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/combobox-responsive.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-default": {
+      name: "chart-tooltip-default",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-tooltip-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-tooltip-default.tsx")),
+      source: "__registry__/default/charts/chart-tooltip-default.tsx",
+      meta: undefined,
     },
-    "command-demo": {
-      name: "command-demo",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: ["registry/default/example/command-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/command-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-indicator-line": {
+      name: "chart-tooltip-indicator-line",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-tooltip-indicator-line.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-tooltip-indicator-line.tsx")),
+      source: "__registry__/default/charts/chart-tooltip-indicator-line.tsx",
+      meta: undefined,
     },
-    "command-dialog": {
-      name: "command-dialog",
-      type: "registry:example",
-      registryDependencies: ["command","dialog"],
-      files: ["registry/default/example/command-dialog.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/command-dialog.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-indicator-none": {
+      name: "chart-tooltip-indicator-none",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-tooltip-indicator-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-tooltip-indicator-none.tsx")),
+      source: "__registry__/default/charts/chart-tooltip-indicator-none.tsx",
+      meta: undefined,
     },
-    "context-menu-demo": {
-      name: "context-menu-demo",
-      type: "registry:example",
-      registryDependencies: ["context-menu"],
-      files: ["registry/default/example/context-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/context-menu-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-label-none": {
+      name: "chart-tooltip-label-none",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-tooltip-label-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-tooltip-label-none.tsx")),
+      source: "__registry__/default/charts/chart-tooltip-label-none.tsx",
+      meta: undefined,
     },
-    "data-table-demo": {
-      name: "data-table-demo",
-      type: "registry:example",
-      registryDependencies: ["data-table"],
-      files: ["registry/default/example/data-table-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/data-table-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-label-custom": {
+      name: "chart-tooltip-label-custom",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-tooltip-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-tooltip-label-custom.tsx")),
+      source: "__registry__/default/charts/chart-tooltip-label-custom.tsx",
+      meta: undefined,
     },
-    "date-picker-demo": {
-      name: "date-picker-demo",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: ["registry/default/example/date-picker-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/date-picker-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-label-formatter": {
+      name: "chart-tooltip-label-formatter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-tooltip-label-formatter.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-tooltip-label-formatter.tsx")),
+      source: "__registry__/default/charts/chart-tooltip-label-formatter.tsx",
+      meta: undefined,
     },
-    "date-picker-form": {
-      name: "date-picker-form",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover"],
-      files: ["registry/default/example/date-picker-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/date-picker-form.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-formatter": {
+      name: "chart-tooltip-formatter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-tooltip-formatter.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-tooltip-formatter.tsx")),
+      source: "__registry__/default/charts/chart-tooltip-formatter.tsx",
+      meta: undefined,
+    },
+    "chart-tooltip-icons": {
+      name: "chart-tooltip-icons",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-tooltip-icons.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-tooltip-icons.tsx")),
+      source: "__registry__/default/charts/chart-tooltip-icons.tsx",
+      meta: undefined,
     },
-    "date-picker-with-presets": {
-      name: "date-picker-with-presets",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover","select"],
-      files: ["registry/default/example/date-picker-with-presets.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/date-picker-with-presets.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+    "chart-tooltip-advanced": {
+      name: "chart-tooltip-advanced",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/default/charts/chart-tooltip-advanced.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/default/charts/chart-tooltip-advanced.tsx")),
+      source: "__registry__/default/charts/chart-tooltip-advanced.tsx",
+      meta: undefined,
     },
-    "date-picker-with-range": {
-      name: "date-picker-with-range",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: ["registry/default/example/date-picker-with-range.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/date-picker-with-range.tsx")),
+    "utils": {
+      name: "utils",
+      description: "",
+      type: "registry:lib",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/lib/utils.ts",
+        type: "registry:lib",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/lib/utils.ts")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "dialog-demo": {
-      name: "dialog-demo",
-      type: "registry:example",
-      registryDependencies: ["dialog"],
-      files: ["registry/default/example/dialog-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/dialog-demo.tsx")),
+    "use-mobile": {
+      name: "use-mobile",
+      description: "",
+      type: "registry:hook",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/hooks/use-mobile.tsx",
+        type: "registry:hook",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/hooks/use-mobile.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "dialog-close-button": {
-      name: "dialog-close-button",
-      type: "registry:example",
-      registryDependencies: ["dialog","button"],
-      files: ["registry/default/example/dialog-close-button.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/dialog-close-button.tsx")),
+    "use-toast": {
+      name: "use-toast",
+      description: "",
+      type: "registry:hook",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/hooks/use-toast.ts",
+        type: "registry:hook",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/hooks/use-toast.ts")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "drawer-demo": {
-      name: "drawer-demo",
-      type: "registry:example",
-      registryDependencies: ["drawer"],
-      files: ["registry/default/example/drawer-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/drawer-demo.tsx")),
+      meta: undefined,
+    },
+    "sink": {
+      name: "sink",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["accordion","alert","alert-dialog","aspect-ratio","avatar","badge","breadcrumb","button","calendar","card","carousel","chart","checkbox","collapsible","command","context-menu","dialog","drawer","dropdown-menu","hover-card","input","input-otp","label","menubar","navigation-menu","pagination","popover","progress","radio-group","resizable","scroll-area","select","separator","sheet","sidebar","skeleton","slider","sonner","switch","table","tabs","textarea","toast","toggle","toggle-group","tooltip"],
+      files: [{
+        path: "registry/default/internal/sink/page.tsx",
+        type: "registry:page",
+        target: "app/sink/page.tsx"
+      },{
+        path: "registry/default/internal/sink/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/component-wrapper.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/nav-projects.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/accordion-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/alert-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/alert-dialog-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/aspect-ratio-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/avatar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/badge-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/breadcrumb-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/button-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/calendar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/card-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/carousel-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/checkbox-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/collapsible-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/combobox-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/command-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/context-menu-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/date-picker-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/dialog-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/drawer-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/dropdown-menu-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/hover-card-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/input-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/input-otp-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/label-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/menubar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/navigation-menu-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/pagination-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/popover-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/progress-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/radio-group-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/resizable-handle.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/scroll-area-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/select-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/separator-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/sheet-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/skeleton-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/slider-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/sonner-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/switch-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/table-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/tabs-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/textarea-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/toast-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/toggle-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/toggle-group-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/tooltip-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/badge-destructive.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/badge-outline.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/badge-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/button-destructive.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/button-ghost.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/button-link.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/button-loading.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/button-outline.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/button-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/button-with-icon.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/toggle-disabled.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/toggle-outline.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/internal/sink/components/toggle-with-text.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sink/page.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-demo": {
+      name: "sidebar-demo",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-demo.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-header": {
+      name: "sidebar-header",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-header.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-header.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-footer": {
+      name: "sidebar-footer",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-footer.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-footer.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-group": {
+      name: "sidebar-group",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-group.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-group.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-group-collapsible": {
+      name: "sidebar-group-collapsible",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-group-collapsible.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-group-collapsible.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-group-action": {
+      name: "sidebar-group-action",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-group-action.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-group-action.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-menu": {
+      name: "sidebar-menu",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-menu.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-menu.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-menu-action": {
+      name: "sidebar-menu-action",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-menu-action.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-menu-action.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-menu-sub": {
+      name: "sidebar-menu-sub",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-menu-sub.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-menu-sub.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-menu-collapsible": {
+      name: "sidebar-menu-collapsible",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-menu-collapsible.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-menu-collapsible.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-menu-badge": {
+      name: "sidebar-menu-badge",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-menu-badge.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-menu-badge.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-rsc": {
+      name: "sidebar-rsc",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-rsc.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-rsc.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-controlled": {
+      name: "sidebar-controlled",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/internal/sidebar-controlled.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-controlled.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-01": {
+      name: "v0-sidebar-01",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/internal/sidebar-01.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-01.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-02": {
+      name: "v0-sidebar-02",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/internal/sidebar-02.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-02.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-03": {
+      name: "v0-sidebar-03",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb"],
+      files: [{
+        path: "registry/default/internal/sidebar-03.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-03.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-04": {
+      name: "v0-sidebar-04",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator"],
+      files: [{
+        path: "registry/default/internal/sidebar-04.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-04.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-05": {
+      name: "v0-sidebar-05",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
+      files: [{
+        path: "registry/default/internal/sidebar-05.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-05.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-06": {
+      name: "v0-sidebar-06",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","card","dropdown-menu"],
+      files: [{
+        path: "registry/default/internal/sidebar-06.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-06.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-07": {
+      name: "v0-sidebar-07",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/default/internal/sidebar-07.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-07.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-08": {
+      name: "v0-sidebar-08",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/default/internal/sidebar-08.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-08.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-09": {
+      name: "v0-sidebar-09",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch"],
+      files: [{
+        path: "registry/default/internal/sidebar-09.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-09.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-10": {
+      name: "v0-sidebar-10",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu"],
+      files: [{
+        path: "registry/default/internal/sidebar-10.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-10.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-11": {
+      name: "v0-sidebar-11",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible"],
+      files: [{
+        path: "registry/default/internal/sidebar-11.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-11.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-12": {
+      name: "v0-sidebar-12",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","calendar","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/default/internal/sidebar-12.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-12.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-13": {
+      name: "v0-sidebar-13",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","button","dialog"],
+      files: [{
+        path: "registry/default/internal/sidebar-13.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-13.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-14": {
+      name: "v0-sidebar-14",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb"],
+      files: [{
+        path: "registry/default/internal/sidebar-14.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-14.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-sidebar-15": {
+      name: "v0-sidebar-15",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu","calendar","avatar"],
+      files: [{
+        path: "registry/default/internal/sidebar-15.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/sidebar-15.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "v0-login-01": {
+      name: "v0-login-01",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/internal/login-01.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/internal/login-01.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "drawer-dialog": {
-      name: "drawer-dialog",
+    "accordion-demo": {
+      name: "accordion-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["drawer","dialog"],
-      files: ["registry/default/example/drawer-dialog.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/drawer-dialog.tsx")),
+      registryDependencies: ["accordion"],
+      files: [{
+        path: "registry/default/examples/accordion-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/accordion-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "dropdown-menu-demo": {
-      name: "dropdown-menu-demo",
+    "alert-demo": {
+      name: "alert-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["dropdown-menu"],
-      files: ["registry/default/example/dropdown-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/dropdown-menu-demo.tsx")),
+      registryDependencies: ["alert"],
+      files: [{
+        path: "registry/default/examples/alert-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/alert-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "dropdown-menu-checkboxes": {
-      name: "dropdown-menu-checkboxes",
+    "alert-destructive": {
+      name: "alert-destructive",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["dropdown-menu","checkbox"],
-      files: ["registry/default/example/dropdown-menu-checkboxes.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/dropdown-menu-checkboxes.tsx")),
+      registryDependencies: ["alert"],
+      files: [{
+        path: "registry/default/examples/alert-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/alert-destructive.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "dropdown-menu-radio-group": {
-      name: "dropdown-menu-radio-group",
+    "alert-dialog-demo": {
+      name: "alert-dialog-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["dropdown-menu","radio-group"],
-      files: ["registry/default/example/dropdown-menu-radio-group.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/dropdown-menu-radio-group.tsx")),
+      registryDependencies: ["alert-dialog","button"],
+      files: [{
+        path: "registry/default/examples/alert-dialog-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/alert-dialog-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "hover-card-demo": {
-      name: "hover-card-demo",
+    "aspect-ratio-demo": {
+      name: "aspect-ratio-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["hover-card"],
-      files: ["registry/default/example/hover-card-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/hover-card-demo.tsx")),
+      registryDependencies: ["aspect-ratio"],
+      files: [{
+        path: "registry/default/examples/aspect-ratio-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/aspect-ratio-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-demo": {
-      name: "input-demo",
+    "avatar-demo": {
+      name: "avatar-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/default/example/input-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-demo.tsx")),
+      registryDependencies: ["avatar"],
+      files: [{
+        path: "registry/default/examples/avatar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/avatar-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-disabled": {
-      name: "input-disabled",
+    "badge-demo": {
+      name: "badge-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/default/example/input-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-disabled.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/examples/badge-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/badge-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-file": {
-      name: "input-file",
+    "badge-destructive": {
+      name: "badge-destructive",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/default/example/input-file.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-file.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/examples/badge-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/badge-destructive.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-form": {
-      name: "input-form",
+    "badge-outline": {
+      name: "badge-outline",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input","button","form"],
-      files: ["registry/default/example/input-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-form.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/examples/badge-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/badge-outline.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-with-button": {
-      name: "input-with-button",
+    "badge-secondary": {
+      name: "badge-secondary",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input","button"],
-      files: ["registry/default/example/input-with-button.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-with-button.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/examples/badge-secondary.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/badge-secondary.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-with-label": {
-      name: "input-with-label",
+    "breadcrumb-demo": {
+      name: "breadcrumb-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: ["registry/default/example/input-with-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-with-label.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/examples/breadcrumb-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/breadcrumb-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-with-text": {
-      name: "input-with-text",
+    "breadcrumb-separator": {
+      name: "breadcrumb-separator",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: ["registry/default/example/input-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-with-text.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/examples/breadcrumb-separator.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/breadcrumb-separator.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-demo": {
-      name: "input-otp-demo",
+    "breadcrumb-dropdown": {
+      name: "breadcrumb-dropdown",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/default/example/input-otp-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-otp-demo.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/examples/breadcrumb-dropdown.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/breadcrumb-dropdown.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-pattern": {
-      name: "input-otp-pattern",
+    "breadcrumb-ellipsis": {
+      name: "breadcrumb-ellipsis",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/default/example/input-otp-pattern.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-otp-pattern.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/examples/breadcrumb-ellipsis.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/breadcrumb-ellipsis.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-separator": {
-      name: "input-otp-separator",
+    "breadcrumb-link": {
+      name: "breadcrumb-link",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/default/example/input-otp-separator.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-otp-separator.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/examples/breadcrumb-link.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/breadcrumb-link.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-controlled": {
-      name: "input-otp-controlled",
+    "breadcrumb-responsive": {
+      name: "breadcrumb-responsive",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/default/example/input-otp-controlled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-otp-controlled.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/examples/breadcrumb-responsive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/breadcrumb-responsive.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-form": {
-      name: "input-otp-form",
+    "button-demo": {
+      name: "button-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["input-otp","form"],
-      files: ["registry/default/example/input-otp-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-otp-form.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/examples/button-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/button-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "label-demo": {
-      name: "label-demo",
+    "button-secondary": {
+      name: "button-secondary",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["label"],
-      files: ["registry/default/example/label-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/label-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/examples/button-secondary.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/button-secondary.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "menubar-demo": {
-      name: "menubar-demo",
+    "button-destructive": {
+      name: "button-destructive",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["menubar"],
-      files: ["registry/default/example/menubar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/menubar-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/examples/button-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/button-destructive.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "navigation-menu-demo": {
-      name: "navigation-menu-demo",
+    "button-outline": {
+      name: "button-outline",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["navigation-menu"],
-      files: ["registry/default/example/navigation-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/navigation-menu-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/examples/button-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/button-outline.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "pagination-demo": {
-      name: "pagination-demo",
+    "button-ghost": {
+      name: "button-ghost",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["pagination"],
-      files: ["registry/default/example/pagination-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/pagination-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/examples/button-ghost.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/button-ghost.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "popover-demo": {
-      name: "popover-demo",
+    "button-link": {
+      name: "button-link",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["popover"],
-      files: ["registry/default/example/popover-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/popover-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/examples/button-link.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/button-link.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "progress-demo": {
-      name: "progress-demo",
+    "button-with-icon": {
+      name: "button-with-icon",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["progress"],
-      files: ["registry/default/example/progress-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/progress-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/examples/button-with-icon.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/button-with-icon.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "radio-group-demo": {
-      name: "radio-group-demo",
+    "button-loading": {
+      name: "button-loading",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["radio-group"],
-      files: ["registry/default/example/radio-group-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/radio-group-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/examples/button-loading.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/button-loading.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "radio-group-form": {
-      name: "radio-group-form",
+    "button-icon": {
+      name: "button-icon",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["radio-group","form"],
-      files: ["registry/default/example/radio-group-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/radio-group-form.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/examples/button-icon.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/button-icon.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-demo": {
-      name: "resizable-demo",
+    "button-as-child": {
+      name: "button-as-child",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/default/example/resizable-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/resizable-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/examples/button-as-child.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/button-as-child.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-demo-with-handle": {
-      name: "resizable-demo-with-handle",
+    "calendar-demo": {
+      name: "calendar-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/default/example/resizable-demo-with-handle.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/resizable-demo-with-handle.tsx")),
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/examples/calendar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/calendar-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-vertical": {
-      name: "resizable-vertical",
+    "calendar-form": {
+      name: "calendar-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/default/example/resizable-vertical.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/resizable-vertical.tsx")),
+      registryDependencies: ["calendar","form","popover"],
+      files: [{
+        path: "registry/default/examples/calendar-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/calendar-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-handle": {
-      name: "resizable-handle",
+    "card-demo": {
+      name: "card-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/default/example/resizable-handle.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/resizable-handle.tsx")),
+      registryDependencies: ["card","button","switch"],
+      files: [{
+        path: "registry/default/examples/card-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/card-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "scroll-area-demo": {
-      name: "scroll-area-demo",
+    "card-with-form": {
+      name: "card-with-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: ["registry/default/example/scroll-area-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/scroll-area-demo.tsx")),
+      registryDependencies: ["button","card","input","label","select"],
+      files: [{
+        path: "registry/default/examples/card-with-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/card-with-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "scroll-area-horizontal-demo": {
-      name: "scroll-area-horizontal-demo",
+    "carousel-demo": {
+      name: "carousel-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: ["registry/default/example/scroll-area-horizontal-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/scroll-area-horizontal-demo.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/default/examples/carousel-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/carousel-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "select-demo": {
-      name: "select-demo",
+    "carousel-size": {
+      name: "carousel-size",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/default/example/select-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/select-demo.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/default/examples/carousel-size.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/carousel-size.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "select-scrollable": {
-      name: "select-scrollable",
+    "carousel-spacing": {
+      name: "carousel-spacing",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/default/example/select-scrollable.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/select-scrollable.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/default/examples/carousel-spacing.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/carousel-spacing.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "select-form": {
-      name: "select-form",
+    "carousel-orientation": {
+      name: "carousel-orientation",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/default/example/select-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/select-form.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/default/examples/carousel-orientation.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/carousel-orientation.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "separator-demo": {
-      name: "separator-demo",
+    "carousel-api": {
+      name: "carousel-api",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["separator"],
-      files: ["registry/default/example/separator-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/separator-demo.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/default/examples/carousel-api.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/carousel-api.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "sheet-demo": {
-      name: "sheet-demo",
+    "carousel-plugin": {
+      name: "carousel-plugin",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["sheet"],
-      files: ["registry/default/example/sheet-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/sheet-demo.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/default/examples/carousel-plugin.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/carousel-plugin.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "sheet-side": {
-      name: "sheet-side",
+    "checkbox-demo": {
+      name: "checkbox-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["sheet"],
-      files: ["registry/default/example/sheet-side.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/sheet-side.tsx")),
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/default/examples/checkbox-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/checkbox-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "skeleton-demo": {
-      name: "skeleton-demo",
+    "checkbox-disabled": {
+      name: "checkbox-disabled",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["skeleton"],
-      files: ["registry/default/example/skeleton-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/skeleton-demo.tsx")),
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/default/examples/checkbox-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/checkbox-disabled.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "skeleton-card": {
-      name: "skeleton-card",
+    "checkbox-form-multiple": {
+      name: "checkbox-form-multiple",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["skeleton"],
-      files: ["registry/default/example/skeleton-card.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/skeleton-card.tsx")),
+      registryDependencies: ["checkbox","form"],
+      files: [{
+        path: "registry/default/examples/checkbox-form-multiple.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/checkbox-form-multiple.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "slider-demo": {
-      name: "slider-demo",
+    "checkbox-form-single": {
+      name: "checkbox-form-single",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["slider"],
-      files: ["registry/default/example/slider-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/slider-demo.tsx")),
+      registryDependencies: ["checkbox","form"],
+      files: [{
+        path: "registry/default/examples/checkbox-form-single.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/checkbox-form-single.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "sonner-demo": {
-      name: "sonner-demo",
+    "checkbox-with-text": {
+      name: "checkbox-with-text",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["sonner"],
-      files: ["registry/default/example/sonner-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/sonner-demo.tsx")),
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/default/examples/checkbox-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/checkbox-with-text.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "switch-demo": {
-      name: "switch-demo",
+    "collapsible-demo": {
+      name: "collapsible-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["switch"],
-      files: ["registry/default/example/switch-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/switch-demo.tsx")),
+      registryDependencies: ["collapsible"],
+      files: [{
+        path: "registry/default/examples/collapsible-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/collapsible-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "switch-form": {
-      name: "switch-form",
+    "combobox-demo": {
+      name: "combobox-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["switch","form"],
-      files: ["registry/default/example/switch-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/switch-form.tsx")),
+      registryDependencies: ["command"],
+      files: [{
+        path: "registry/default/examples/combobox-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/combobox-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "table-demo": {
-      name: "table-demo",
+    "combobox-dropdown-menu": {
+      name: "combobox-dropdown-menu",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["table"],
-      files: ["registry/default/example/table-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/table-demo.tsx")),
+      registryDependencies: ["command","dropdown-menu","button"],
+      files: [{
+        path: "registry/default/examples/combobox-dropdown-menu.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/combobox-dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "tabs-demo": {
-      name: "tabs-demo",
+    "combobox-form": {
+      name: "combobox-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["tabs"],
-      files: ["registry/default/example/tabs-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/tabs-demo.tsx")),
+      registryDependencies: ["command","form"],
+      files: [{
+        path: "registry/default/examples/combobox-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/combobox-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-demo": {
-      name: "textarea-demo",
+    "combobox-popover": {
+      name: "combobox-popover",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea"],
-      files: ["registry/default/example/textarea-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-demo.tsx")),
+      registryDependencies: ["combobox","popover"],
+      files: [{
+        path: "registry/default/examples/combobox-popover.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/combobox-popover.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-disabled": {
-      name: "textarea-disabled",
+    "combobox-responsive": {
+      name: "combobox-responsive",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea"],
-      files: ["registry/default/example/textarea-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-disabled.tsx")),
+      registryDependencies: ["combobox","popover","drawer"],
+      files: [{
+        path: "registry/default/examples/combobox-responsive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/combobox-responsive.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-form": {
-      name: "textarea-form",
+    "command-demo": {
+      name: "command-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","form"],
-      files: ["registry/default/example/textarea-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-form.tsx")),
+      registryDependencies: ["command"],
+      files: [{
+        path: "registry/default/examples/command-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/command-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-button": {
-      name: "textarea-with-button",
+    "command-dialog": {
+      name: "command-dialog",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","button"],
-      files: ["registry/default/example/textarea-with-button.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-with-button.tsx")),
+      registryDependencies: ["command","dialog"],
+      files: [{
+        path: "registry/default/examples/command-dialog.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/command-dialog.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-label": {
-      name: "textarea-with-label",
+    "context-menu-demo": {
+      name: "context-menu-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","label"],
-      files: ["registry/default/example/textarea-with-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-with-label.tsx")),
+      registryDependencies: ["context-menu"],
+      files: [{
+        path: "registry/default/examples/context-menu-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/context-menu-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-text": {
-      name: "textarea-with-text",
+    "data-table-demo": {
+      name: "data-table-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","label"],
-      files: ["registry/default/example/textarea-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-with-text.tsx")),
+      registryDependencies: ["data-table"],
+      files: [{
+        path: "registry/default/examples/data-table-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/data-table-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toast-demo": {
-      name: "toast-demo",
+    "date-picker-demo": {
+      name: "date-picker-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/default/example/toast-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toast-demo.tsx")),
+      registryDependencies: ["button","calendar","popover"],
+      files: [{
+        path: "registry/default/examples/date-picker-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/date-picker-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toast-destructive": {
-      name: "toast-destructive",
+    "date-picker-form": {
+      name: "date-picker-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/default/example/toast-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toast-destructive.tsx")),
+      registryDependencies: ["button","calendar","form","popover"],
+      files: [{
+        path: "registry/default/examples/date-picker-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/date-picker-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toast-simple": {
-      name: "toast-simple",
+    "date-picker-with-presets": {
+      name: "date-picker-with-presets",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/default/example/toast-simple.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toast-simple.tsx")),
+      registryDependencies: ["button","calendar","popover","select"],
+      files: [{
+        path: "registry/default/examples/date-picker-with-presets.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/date-picker-with-presets.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toast-with-action": {
-      name: "toast-with-action",
+    "date-picker-with-range": {
+      name: "date-picker-with-range",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/default/example/toast-with-action.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toast-with-action.tsx")),
+      registryDependencies: ["button","calendar","popover"],
+      files: [{
+        path: "registry/default/examples/date-picker-with-range.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/date-picker-with-range.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toast-with-title": {
-      name: "toast-with-title",
+    "dialog-demo": {
+      name: "dialog-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/default/example/toast-with-title.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toast-with-title.tsx")),
+      registryDependencies: ["dialog"],
+      files: [{
+        path: "registry/default/examples/dialog-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/dialog-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-demo": {
-      name: "toggle-group-demo",
+    "dialog-close-button": {
+      name: "dialog-close-button",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-demo.tsx")),
+      registryDependencies: ["dialog","button"],
+      files: [{
+        path: "registry/default/examples/dialog-close-button.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/dialog-close-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-disabled": {
-      name: "toggle-group-disabled",
+    "drawer-demo": {
+      name: "drawer-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-disabled.tsx")),
+      registryDependencies: ["drawer"],
+      files: [{
+        path: "registry/default/examples/drawer-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/drawer-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-lg": {
-      name: "toggle-group-lg",
+    "drawer-dialog": {
+      name: "drawer-dialog",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-lg.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-lg.tsx")),
+      registryDependencies: ["drawer","dialog"],
+      files: [{
+        path: "registry/default/examples/drawer-dialog.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/drawer-dialog.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-outline": {
-      name: "toggle-group-outline",
+    "dropdown-menu-demo": {
+      name: "dropdown-menu-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-outline.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-outline.tsx")),
+      registryDependencies: ["dropdown-menu"],
+      files: [{
+        path: "registry/default/examples/dropdown-menu-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/dropdown-menu-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-sm": {
-      name: "toggle-group-sm",
+    "dropdown-menu-checkboxes": {
+      name: "dropdown-menu-checkboxes",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-sm.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-sm.tsx")),
+      registryDependencies: ["dropdown-menu","checkbox"],
+      files: [{
+        path: "registry/default/examples/dropdown-menu-checkboxes.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/dropdown-menu-checkboxes.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-single": {
-      name: "toggle-group-single",
+    "dropdown-menu-radio-group": {
+      name: "dropdown-menu-radio-group",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-single.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-single.tsx")),
+      registryDependencies: ["dropdown-menu","radio-group"],
+      files: [{
+        path: "registry/default/examples/dropdown-menu-radio-group.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/dropdown-menu-radio-group.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-demo": {
-      name: "toggle-demo",
+    "hover-card-demo": {
+      name: "hover-card-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-demo.tsx")),
+      registryDependencies: ["hover-card"],
+      files: [{
+        path: "registry/default/examples/hover-card-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/hover-card-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-disabled": {
-      name: "toggle-disabled",
+    "input-demo": {
+      name: "input-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-disabled.tsx")),
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/default/examples/input-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-lg": {
-      name: "toggle-lg",
+    "input-disabled": {
+      name: "input-disabled",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-lg.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-lg.tsx")),
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/default/examples/input-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-disabled.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-outline": {
-      name: "toggle-outline",
+    "input-file": {
+      name: "input-file",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-outline.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-outline.tsx")),
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/default/examples/input-file.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-file.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-sm": {
-      name: "toggle-sm",
+    "input-form": {
+      name: "input-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-sm.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-sm.tsx")),
+      registryDependencies: ["input","button","form"],
+      files: [{
+        path: "registry/default/examples/input-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-with-text": {
-      name: "toggle-with-text",
+    "input-with-button": {
+      name: "input-with-button",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-with-text.tsx")),
+      registryDependencies: ["input","button"],
+      files: [{
+        path: "registry/default/examples/input-with-button.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-with-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "tooltip-demo": {
-      name: "tooltip-demo",
+    "input-with-label": {
+      name: "input-with-label",
+      description: "",
       type: "registry:example",
-      registryDependencies: ["tooltip"],
-      files: ["registry/default/example/tooltip-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/tooltip-demo.tsx")),
+      registryDependencies: ["input","button","label"],
+      files: [{
+        path: "registry/default/examples/input-with-label.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-with-label.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-blockquote": {
-      name: "typography-blockquote",
+    "input-with-text": {
+      name: "input-with-text",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-blockquote.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-blockquote.tsx")),
+      registryDependencies: ["input","button","label"],
+      files: [{
+        path: "registry/default/examples/input-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-with-text.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-demo": {
-      name: "typography-demo",
+    "input-otp-demo": {
+      name: "input-otp-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-demo.tsx")),
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/default/examples/input-otp-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-otp-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h1": {
-      name: "typography-h1",
+    "input-otp-pattern": {
+      name: "input-otp-pattern",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-h1.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-h1.tsx")),
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/default/examples/input-otp-pattern.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-otp-pattern.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h2": {
-      name: "typography-h2",
+    "input-otp-separator": {
+      name: "input-otp-separator",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-h2.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-h2.tsx")),
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/default/examples/input-otp-separator.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-otp-separator.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h3": {
-      name: "typography-h3",
+    "input-otp-controlled": {
+      name: "input-otp-controlled",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-h3.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-h3.tsx")),
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/default/examples/input-otp-controlled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-otp-controlled.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h4": {
-      name: "typography-h4",
+    "input-otp-form": {
+      name: "input-otp-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-h4.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-h4.tsx")),
+      registryDependencies: ["input-otp","form"],
+      files: [{
+        path: "registry/default/examples/input-otp-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/input-otp-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-inline-code": {
-      name: "typography-inline-code",
+    "label-demo": {
+      name: "label-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-inline-code.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-inline-code.tsx")),
+      registryDependencies: ["label"],
+      files: [{
+        path: "registry/default/examples/label-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/label-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-large": {
-      name: "typography-large",
+    "menubar-demo": {
+      name: "menubar-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-large.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-large.tsx")),
+      registryDependencies: ["menubar"],
+      files: [{
+        path: "registry/default/examples/menubar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/menubar-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-lead": {
-      name: "typography-lead",
+    "navigation-menu-demo": {
+      name: "navigation-menu-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-lead.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-lead.tsx")),
+      registryDependencies: ["navigation-menu"],
+      files: [{
+        path: "registry/default/examples/navigation-menu-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/navigation-menu-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-list": {
-      name: "typography-list",
+    "pagination-demo": {
+      name: "pagination-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-list.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-list.tsx")),
+      registryDependencies: ["pagination"],
+      files: [{
+        path: "registry/default/examples/pagination-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/pagination-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-muted": {
-      name: "typography-muted",
+    "popover-demo": {
+      name: "popover-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-muted.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-muted.tsx")),
+      registryDependencies: ["popover"],
+      files: [{
+        path: "registry/default/examples/popover-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/popover-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-p": {
-      name: "typography-p",
+    "progress-demo": {
+      name: "progress-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-p.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-p.tsx")),
+      registryDependencies: ["progress"],
+      files: [{
+        path: "registry/default/examples/progress-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/progress-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-small": {
-      name: "typography-small",
+    "radio-group-demo": {
+      name: "radio-group-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-small.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-small.tsx")),
+      registryDependencies: ["radio-group"],
+      files: [{
+        path: "registry/default/examples/radio-group-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/radio-group-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "typography-table": {
-      name: "typography-table",
+    "radio-group-form": {
+      name: "radio-group-form",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-table.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-table.tsx")),
+      registryDependencies: ["radio-group","form"],
+      files: [{
+        path: "registry/default/examples/radio-group-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/radio-group-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "mode-toggle": {
-      name: "mode-toggle",
+    "resizable-demo": {
+      name: "resizable-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/mode-toggle.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/mode-toggle.tsx")),
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/default/examples/resizable-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/resizable-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo": {
-      name: "chart-bar-demo",
+    "resizable-demo-with-handle": {
+      name: "resizable-demo-with-handle",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-bar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-bar-demo.tsx")),
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/default/examples/resizable-demo-with-handle.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/resizable-demo-with-handle.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-grid": {
-      name: "chart-bar-demo-grid",
+    "resizable-vertical": {
+      name: "resizable-vertical",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-bar-demo-grid.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-grid.tsx")),
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/default/examples/resizable-vertical.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/resizable-vertical.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-axis": {
-      name: "chart-bar-demo-axis",
+    "resizable-handle": {
+      name: "resizable-handle",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-bar-demo-axis.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-axis.tsx")),
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/default/examples/resizable-handle.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/resizable-handle.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-tooltip": {
-      name: "chart-bar-demo-tooltip",
+    "scroll-area-demo": {
+      name: "scroll-area-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-bar-demo-tooltip.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-tooltip.tsx")),
+      registryDependencies: ["scroll-area"],
+      files: [{
+        path: "registry/default/examples/scroll-area-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/scroll-area-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-legend": {
-      name: "chart-bar-demo-legend",
+    "scroll-area-horizontal-demo": {
+      name: "scroll-area-horizontal-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-bar-demo-legend.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-legend.tsx")),
+      registryDependencies: ["scroll-area"],
+      files: [{
+        path: "registry/default/examples/scroll-area-horizontal-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/scroll-area-horizontal-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "chart-tooltip-demo": {
-      name: "chart-tooltip-demo",
+    "select-demo": {
+      name: "select-demo",
+      description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-tooltip-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-tooltip-demo.tsx")),
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/default/examples/select-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/select-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "sidebar-01": {
-      name: "sidebar-01",
-      type: "registry:block",
-      registryDependencies: ["avatar","button","collapsible","dropdown-menu","drawer","separator","input","popover","sheet","progress","card","use-mobile"],
-      files: ["registry/default/block/sidebar-01/page.tsx","registry/default/block/sidebar-01/components/app-sidebar.tsx","registry/default/block/sidebar-01/components/nav-main.tsx","registry/default/block/sidebar-01/components/nav-projects.tsx","registry/default/block/sidebar-01/components/nav-secondary.tsx","registry/default/block/sidebar-01/components/nav-user.tsx","registry/default/block/sidebar-01/components/storage-card.tsx","registry/default/block/sidebar-01/components/team-switcher.tsx","registry/default/block/sidebar-01/hooks/use-sidebar.tsx","registry/default/block/sidebar-01/ui/sidebar.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/sidebar-01/page.tsx")),
-      source: "__registry__/default/block/sidebar-01/page.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: []
-    },
-    "login-01": {
-      name: "login-01",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/default/block/login-01/page.tsx","registry/default/block/login-01/components/login-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/login-01/page.tsx")),
-      source: "__registry__/default/block/login-01/page.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "charts-01": {
-      name: "charts-01",
-      type: "registry:block",
-      registryDependencies: ["chart"],
-      files: ["registry/default/block/charts-01.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/charts-01.tsx")),
-      source: "__registry__/default/block/charts-01.tsx",
-      category: "Application",
-      subcategory: "Charts",
-      chunks: [{
-        name: "charts-01-chunk-0",
-        description: "A bar chart showing the number of steps you have walked in the past 7 days.",
-        component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-0")),
-        file: "registry/default/block/charts-01-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-1",
-        description: "A line chart showing the resting heart rate for the past 7 days.",
-        component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-1")),
-        file: "registry/default/block/charts-01-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-2",
-        description: "Two horizontal bar charts showing total steps taken during the current year and last year.",
-        component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-2")),
-        file: "registry/default/block/charts-01-chunk-2.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-3",
-        description: "A bar chart showing the walking and running distance for the past 7 days.",
-        component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-3")),
-        file: "registry/default/block/charts-01-chunk-3.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-4",
-        description: "A bar chart showing move, exercise, and stand progress.",
-        component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-4")),
-        file: "registry/default/block/charts-01-chunk-4.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-5",
-        description: "A radial bar chart showing the percentage of time spent moving, exercising, and standing.",
-        component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-5")),
-        file: "registry/default/block/charts-01-chunk-5.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-6",
-        description: "A bar chart showing active energy in the past 7 days.",
-        component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-6")),
-        file: "registry/default/block/charts-01-chunk-6.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "charts-01-chunk-7",
-        description: "An area chart showing the time spent in bed for the past 7 days.",
-        component: React.lazy(() => import("@/registry/default/block/charts-01-chunk-7")),
-        file: "registry/default/block/charts-01-chunk-7.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-05": {
-      name: "dashboard-05",
-      type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
-      files: ["registry/default/block/dashboard-05.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/dashboard-05.tsx")),
-      source: "__registry__/default/block/dashboard-05.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-05-chunk-0",
-        description: "A card for an orders dashboard with a description and a button to create a new order.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-05-chunk-0")),
-        file: "registry/default/block/dashboard-05-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-05-chunk-1",
-        description: "A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-05-chunk-1")),
-        file: "registry/default/block/dashboard-05-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-05-chunk-2",
-        description: "A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-05-chunk-2")),
-        file: "registry/default/block/dashboard-05-chunk-2.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-05-chunk-3",
-        description: "A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-05-chunk-3")),
-        file: "registry/default/block/dashboard-05-chunk-3.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-05-chunk-4",
-        description: "An order details card with order details, shipping information, customer information and payment information.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-05-chunk-4")),
-        file: "registry/default/block/dashboard-05-chunk-4.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-06": {
-      name: "dashboard-06",
-      type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
-      files: ["registry/default/block/dashboard-06.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/dashboard-06.tsx")),
-      source: "__registry__/default/block/dashboard-06.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-06-chunk-0",
-        description: "A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-06-chunk-0")),
-        file: "registry/default/block/dashboard-06-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-07": {
-      name: "dashboard-07",
-      type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
-      files: ["registry/default/block/dashboard-07.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/dashboard-07.tsx")),
-      source: "__registry__/default/block/dashboard-07.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-07-chunk-0",
-        description: "A card with a form to edit the product details",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-07-chunk-0")),
-        file: "registry/default/block/dashboard-07-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-07-chunk-1",
-        description: "A card with a form to edit the product stock and variants",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-07-chunk-1")),
-        file: "registry/default/block/dashboard-07-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-07-chunk-2",
-        description: "A card with a form to edit the product category and subcategory",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-07-chunk-2")),
-        file: "registry/default/block/dashboard-07-chunk-2.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-07-chunk-3",
-        description: "A card with a form to edit the product status",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-07-chunk-3")),
-        file: "registry/default/block/dashboard-07-chunk-3.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-07-chunk-4",
-        description: "A card with a form to upload product images",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-07-chunk-4")),
-        file: "registry/default/block/dashboard-07-chunk-4.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-07-chunk-5",
-        description: "A card with a call to action to archive the product",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-07-chunk-5")),
-        file: "registry/default/block/dashboard-07-chunk-5.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-04": {
-      name: "dashboard-04",
-      type: "registry:block",
-      registryDependencies: ["button","card","dropdown-menu","input"],
-      files: ["registry/default/block/dashboard-04.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/dashboard-04.tsx")),
-      source: "__registry__/default/block/dashboard-04.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-04-chunk-0",
-        description: "A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-04-chunk-0")),
-        file: "registry/default/block/dashboard-04-chunk-0.tsx",
-        container: {
-          className: "chunk-container after:right-0"
-        }
-      },{
-        name: "dashboard-04-chunk-1",
-        description: "A form to update the store name.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-04-chunk-1")),
-        file: "registry/default/block/dashboard-04-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-04-chunk-2",
-        description: "A form to update the plugins directory with a checkbox to allow administrators to change the directory.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-04-chunk-2")),
-        file: "registry/default/block/dashboard-04-chunk-2.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-03": {
-      name: "dashboard-03",
-      type: "registry:block",
-      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
-      files: ["registry/default/block/dashboard-03.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/dashboard-03.tsx")),
-      source: "__registry__/default/block/dashboard-03.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-03-chunk-0",
-        description: "A settings form a configuring an AI model and messages.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-03-chunk-0")),
-        file: "registry/default/block/dashboard-03-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-03-chunk-1",
-        description: "A form for sending a message to an AI chatbot. The form has a textarea and buttons to upload files and record audio.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-03-chunk-1")),
-        file: "registry/default/block/dashboard-03-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-02": {
-      name: "dashboard-02",
-      type: "registry:block",
-      registryDependencies: ["badge","button","card","dropdown-menu","input"],
-      files: ["registry/default/block/dashboard-02.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/dashboard-02.tsx")),
-      source: "__registry__/default/block/dashboard-02.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-02-chunk-0",
-        description: "A card with a call to action",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-02-chunk-0")),
-        file: "registry/default/block/dashboard-02-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-02-chunk-1",
-        description: "An empty state showing no products with a heading, description and a call to action to add a product.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-02-chunk-1")),
-        file: "registry/default/block/dashboard-02-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "dashboard-01": {
-      name: "dashboard-01",
-      type: "registry:block",
-      registryDependencies: ["button","dropdown-menu","input","sheet"],
-      files: ["registry/default/block/dashboard-01.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/dashboard-01.tsx")),
-      source: "__registry__/default/block/dashboard-01.tsx",
-      category: "Application",
-      subcategory: "Dashboard",
-      chunks: [{
-        name: "dashboard-01-chunk-0",
-        description: "A card showing the total revenue in USD and the percentage difference from last month.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-01-chunk-0")),
-        file: "registry/default/block/dashboard-01-chunk-0.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-01-chunk-1",
-        description: "A card showing the total subscriptions and the percentage difference from last month.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-01-chunk-1")),
-        file: "registry/default/block/dashboard-01-chunk-1.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-01-chunk-2",
-        description: "A card showing the total sales and the percentage difference from last month.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-01-chunk-2")),
-        file: "registry/default/block/dashboard-01-chunk-2.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-01-chunk-3",
-        description: "A card showing the total active users and the percentage difference from last hour.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-01-chunk-3")),
-        file: "registry/default/block/dashboard-01-chunk-3.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-01-chunk-4",
-        description: "A card showing a table of recent transactions with a link to view all transactions.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-01-chunk-4")),
-        file: "registry/default/block/dashboard-01-chunk-4.tsx",
-        container: {
-          className: "undefined"
-        }
-      },{
-        name: "dashboard-01-chunk-5",
-        description: "A card showing a list of recent sales with customer names and email addresses.",
-        component: React.lazy(() => import("@/registry/default/block/dashboard-01-chunk-5")),
-        file: "registry/default/block/dashboard-01-chunk-5.tsx",
-        container: {
-          className: "undefined"
-        }
-      }]
-    },
-    "authentication-01": {
-      name: "authentication-01",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/default/block/authentication-01.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/authentication-01.tsx")),
-      source: "__registry__/default/block/authentication-01.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "authentication-02": {
-      name: "authentication-02",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/default/block/authentication-02.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/authentication-02.tsx")),
-      source: "__registry__/default/block/authentication-02.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "authentication-03": {
-      name: "authentication-03",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/default/block/authentication-03.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/authentication-03.tsx")),
-      source: "__registry__/default/block/authentication-03.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "authentication-04": {
-      name: "authentication-04",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/default/block/authentication-04.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/authentication-04.tsx")),
-      source: "__registry__/default/block/authentication-04.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
-    },
-    "chart-area-axes": {
-      name: "chart-area-axes",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-area-axes.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-area-axes.tsx")),
-      source: "__registry__/default/block/chart-area-axes.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-default": {
-      name: "chart-area-default",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-area-default.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-area-default.tsx")),
-      source: "__registry__/default/block/chart-area-default.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-gradient": {
-      name: "chart-area-gradient",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-area-gradient.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-area-gradient.tsx")),
-      source: "__registry__/default/block/chart-area-gradient.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-icons": {
-      name: "chart-area-icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-area-icons.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-area-icons.tsx")),
-      source: "__registry__/default/block/chart-area-icons.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-interactive": {
-      name: "chart-area-interactive",
-      type: "registry:block",
-      registryDependencies: ["card","chart","select"],
-      files: ["registry/default/block/chart-area-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-area-interactive.tsx")),
-      source: "__registry__/default/block/chart-area-interactive.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-legend": {
-      name: "chart-area-legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-area-legend.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-area-legend.tsx")),
-      source: "__registry__/default/block/chart-area-legend.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-linear": {
-      name: "chart-area-linear",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-area-linear.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-area-linear.tsx")),
-      source: "__registry__/default/block/chart-area-linear.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-stacked-expand": {
-      name: "chart-area-stacked-expand",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-area-stacked-expand.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-area-stacked-expand.tsx")),
-      source: "__registry__/default/block/chart-area-stacked-expand.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-stacked": {
-      name: "chart-area-stacked",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-area-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-area-stacked.tsx")),
-      source: "__registry__/default/block/chart-area-stacked.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-area-step": {
-      name: "chart-area-step",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-area-step.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-area-step.tsx")),
-      source: "__registry__/default/block/chart-area-step.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
-    },
-    "chart-bar-active": {
-      name: "chart-bar-active",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-active.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-active.tsx")),
-      source: "__registry__/default/block/chart-bar-active.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-default": {
-      name: "chart-bar-default",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-default.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-default.tsx")),
-      source: "__registry__/default/block/chart-bar-default.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-horizontal": {
-      name: "chart-bar-horizontal",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-horizontal.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-horizontal.tsx")),
-      source: "__registry__/default/block/chart-bar-horizontal.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-interactive": {
-      name: "chart-bar-interactive",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-interactive.tsx")),
-      source: "__registry__/default/block/chart-bar-interactive.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-label-custom": {
-      name: "chart-bar-label-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-label-custom.tsx")),
-      source: "__registry__/default/block/chart-bar-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
-    },
-    "chart-bar-label": {
-      name: "chart-bar-label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-label.tsx")),
-      source: "__registry__/default/block/chart-bar-label.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-mixed": {
-      name: "chart-bar-mixed",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-mixed.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-mixed.tsx")),
-      source: "__registry__/default/block/chart-bar-mixed.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "select-scrollable": {
+      name: "select-scrollable",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/default/examples/select-scrollable.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/select-scrollable.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-multiple": {
-      name: "chart-bar-multiple",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-multiple.tsx")),
-      source: "__registry__/default/block/chart-bar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "select-form": {
+      name: "select-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/default/examples/select-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/select-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-negative": {
-      name: "chart-bar-negative",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-negative.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-negative.tsx")),
-      source: "__registry__/default/block/chart-bar-negative.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "separator-demo": {
+      name: "separator-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["separator"],
+      files: [{
+        path: "registry/default/examples/separator-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/separator-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-stacked": {
-      name: "chart-bar-stacked",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-stacked.tsx")),
-      source: "__registry__/default/block/chart-bar-stacked.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "sheet-demo": {
+      name: "sheet-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["sheet"],
+      files: [{
+        path: "registry/default/examples/sheet-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/sheet-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-default": {
-      name: "chart-line-default",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-default.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-default.tsx")),
-      source: "__registry__/default/block/chart-line-default.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "sheet-side": {
+      name: "sheet-side",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["sheet"],
+      files: [{
+        path: "registry/default/examples/sheet-side.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/sheet-side.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-dots-colors": {
-      name: "chart-line-dots-colors",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-dots-colors.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-dots-colors.tsx")),
-      source: "__registry__/default/block/chart-line-dots-colors.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "skeleton-demo": {
+      name: "skeleton-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/default/examples/skeleton-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/skeleton-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-dots-custom": {
-      name: "chart-line-dots-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-dots-custom.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-dots-custom.tsx")),
-      source: "__registry__/default/block/chart-line-dots-custom.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "skeleton-card": {
+      name: "skeleton-card",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/default/examples/skeleton-card.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/skeleton-card.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-dots": {
-      name: "chart-line-dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-dots.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-dots.tsx")),
-      source: "__registry__/default/block/chart-line-dots.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "slider-demo": {
+      name: "slider-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["slider"],
+      files: [{
+        path: "registry/default/examples/slider-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/slider-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-interactive": {
-      name: "chart-line-interactive",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-interactive.tsx")),
-      source: "__registry__/default/block/chart-line-interactive.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "sonner-demo": {
+      name: "sonner-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["sonner"],
+      files: [{
+        path: "registry/default/examples/sonner-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/sonner-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-label-custom": {
-      name: "chart-line-label-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-label-custom.tsx")),
-      source: "__registry__/default/block/chart-line-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "switch-demo": {
+      name: "switch-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["switch"],
+      files: [{
+        path: "registry/default/examples/switch-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/switch-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-label": {
-      name: "chart-line-label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-label.tsx")),
-      source: "__registry__/default/block/chart-line-label.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "switch-form": {
+      name: "switch-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["switch","form"],
+      files: [{
+        path: "registry/default/examples/switch-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/switch-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-linear": {
-      name: "chart-line-linear",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-linear.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-linear.tsx")),
-      source: "__registry__/default/block/chart-line-linear.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "table-demo": {
+      name: "table-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["table"],
+      files: [{
+        path: "registry/default/examples/table-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/table-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-multiple": {
-      name: "chart-line-multiple",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-multiple.tsx")),
-      source: "__registry__/default/block/chart-line-multiple.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "tabs-demo": {
+      name: "tabs-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["tabs"],
+      files: [{
+        path: "registry/default/examples/tabs-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/tabs-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-step": {
-      name: "chart-line-step",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-step.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-step.tsx")),
-      source: "__registry__/default/block/chart-line-step.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "textarea-demo": {
+      name: "textarea-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      files: [{
+        path: "registry/default/examples/textarea-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/textarea-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-donut-active": {
-      name: "chart-pie-donut-active",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-donut-active.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-donut-active.tsx")),
-      source: "__registry__/default/block/chart-pie-donut-active.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "textarea-disabled": {
+      name: "textarea-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      files: [{
+        path: "registry/default/examples/textarea-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/textarea-disabled.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-donut-text": {
-      name: "chart-pie-donut-text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-donut-text.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-donut-text.tsx")),
-      source: "__registry__/default/block/chart-pie-donut-text.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "textarea-form": {
+      name: "textarea-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","form"],
+      files: [{
+        path: "registry/default/examples/textarea-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/textarea-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-donut": {
-      name: "chart-pie-donut",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-donut.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-donut.tsx")),
-      source: "__registry__/default/block/chart-pie-donut.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "textarea-with-button": {
+      name: "textarea-with-button",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","button"],
+      files: [{
+        path: "registry/default/examples/textarea-with-button.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/textarea-with-button.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-interactive": {
-      name: "chart-pie-interactive",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-interactive.tsx")),
-      source: "__registry__/default/block/chart-pie-interactive.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "textarea-with-label": {
+      name: "textarea-with-label",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","label"],
+      files: [{
+        path: "registry/default/examples/textarea-with-label.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/textarea-with-label.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-label-custom": {
-      name: "chart-pie-label-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-label-custom.tsx")),
-      source: "__registry__/default/block/chart-pie-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "textarea-with-text": {
+      name: "textarea-with-text",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","label"],
+      files: [{
+        path: "registry/default/examples/textarea-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/textarea-with-text.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-label-list": {
-      name: "chart-pie-label-list",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-label-list.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-label-list.tsx")),
-      source: "__registry__/default/block/chart-pie-label-list.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toast-demo": {
+      name: "toast-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/default/examples/toast-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toast-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-label": {
-      name: "chart-pie-label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-label.tsx")),
-      source: "__registry__/default/block/chart-pie-label.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toast-destructive": {
+      name: "toast-destructive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/default/examples/toast-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toast-destructive.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-legend": {
-      name: "chart-pie-legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-legend.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-legend.tsx")),
-      source: "__registry__/default/block/chart-pie-legend.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toast-simple": {
+      name: "toast-simple",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/default/examples/toast-simple.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toast-simple.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-separator-none": {
-      name: "chart-pie-separator-none",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-separator-none.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-separator-none.tsx")),
-      source: "__registry__/default/block/chart-pie-separator-none.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toast-with-action": {
+      name: "toast-with-action",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/default/examples/toast-with-action.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toast-with-action.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-simple": {
-      name: "chart-pie-simple",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-simple.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-simple.tsx")),
-      source: "__registry__/default/block/chart-pie-simple.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toast-with-title": {
+      name: "toast-with-title",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/default/examples/toast-with-title.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toast-with-title.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-stacked": {
-      name: "chart-pie-stacked",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-stacked.tsx")),
-      source: "__registry__/default/block/chart-pie-stacked.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "toggle-group-demo": {
+      name: "toggle-group-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/examples/toggle-group-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-group-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-default": {
-      name: "chart-radar-default",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-default.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-default.tsx")),
-      source: "__registry__/default/block/chart-radar-default.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-group-disabled": {
+      name: "toggle-group-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/examples/toggle-group-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-group-disabled.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-dots": {
-      name: "chart-radar-dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-dots.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-dots.tsx")),
-      source: "__registry__/default/block/chart-radar-dots.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-group-lg": {
+      name: "toggle-group-lg",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/examples/toggle-group-lg.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-group-lg.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-circle-fill": {
-      name: "chart-radar-grid-circle-fill",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-grid-circle-fill.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-circle-fill.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-circle-fill.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-group-outline": {
+      name: "toggle-group-outline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/examples/toggle-group-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-group-outline.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-circle-no-lines": {
-      name: "chart-radar-grid-circle-no-lines",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-grid-circle-no-lines.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-circle-no-lines.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-circle-no-lines.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-group-sm": {
+      name: "toggle-group-sm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/examples/toggle-group-sm.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-group-sm.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-circle": {
-      name: "chart-radar-grid-circle",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-grid-circle.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-circle.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-circle.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-group-single": {
+      name: "toggle-group-single",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/examples/toggle-group-single.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-group-single.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-custom": {
-      name: "chart-radar-grid-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-grid-custom.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-custom.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-custom.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-demo": {
+      name: "toggle-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/examples/toggle-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-fill": {
-      name: "chart-radar-grid-fill",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-grid-fill.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-fill.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-fill.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-disabled": {
+      name: "toggle-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/examples/toggle-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-disabled.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-none": {
-      name: "chart-radar-grid-none",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-grid-none.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-none.tsx")),
-      source: "__registry__/default/block/chart-radar-grid-none.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-lg": {
+      name: "toggle-lg",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/examples/toggle-lg.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-lg.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-icons": {
-      name: "chart-radar-icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-icons.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-icons.tsx")),
-      source: "__registry__/default/block/chart-radar-icons.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-outline": {
+      name: "toggle-outline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/examples/toggle-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-outline.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-label-custom": {
-      name: "chart-radar-label-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-label-custom.tsx")),
-      source: "__registry__/default/block/chart-radar-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-sm": {
+      name: "toggle-sm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/examples/toggle-sm.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-sm.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-legend": {
-      name: "chart-radar-legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-legend.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-legend.tsx")),
-      source: "__registry__/default/block/chart-radar-legend.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toggle-with-text": {
+      name: "toggle-with-text",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/examples/toggle-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/toggle-with-text.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-lines-only": {
-      name: "chart-radar-lines-only",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-lines-only.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-lines-only.tsx")),
-      source: "__registry__/default/block/chart-radar-lines-only.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "tooltip-demo": {
+      name: "tooltip-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["tooltip"],
+      files: [{
+        path: "registry/default/examples/tooltip-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/tooltip-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-multiple": {
-      name: "chart-radar-multiple",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-multiple.tsx")),
-      source: "__registry__/default/block/chart-radar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "typography-blockquote": {
+      name: "typography-blockquote",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-blockquote.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-blockquote.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-radius": {
-      name: "chart-radar-radius",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-radius.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-radius.tsx")),
-      source: "__registry__/default/block/chart-radar-radius.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "typography-demo": {
+      name: "typography-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-grid": {
-      name: "chart-radial-grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-grid.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-grid.tsx")),
-      source: "__registry__/default/block/chart-radial-grid.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-h1": {
+      name: "typography-h1",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-h1.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-h1.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-label": {
-      name: "chart-radial-label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-label.tsx")),
-      source: "__registry__/default/block/chart-radial-label.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-h2": {
+      name: "typography-h2",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-h2.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-h2.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-shape": {
-      name: "chart-radial-shape",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-shape.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-shape.tsx")),
-      source: "__registry__/default/block/chart-radial-shape.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-h3": {
+      name: "typography-h3",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-h3.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-h3.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-simple": {
-      name: "chart-radial-simple",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-simple.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-simple.tsx")),
-      source: "__registry__/default/block/chart-radial-simple.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-h4": {
+      name: "typography-h4",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-h4.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-h4.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-stacked": {
-      name: "chart-radial-stacked",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-stacked.tsx")),
-      source: "__registry__/default/block/chart-radial-stacked.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-inline-code": {
+      name: "typography-inline-code",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-inline-code.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-inline-code.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-text": {
-      name: "chart-radial-text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-text.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-text.tsx")),
-      source: "__registry__/default/block/chart-radial-text.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "typography-large": {
+      name: "typography-large",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-large.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-large.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-default": {
-      name: "chart-tooltip-default",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-default.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-default.tsx")),
-      source: "__registry__/default/block/chart-tooltip-default.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-lead": {
+      name: "typography-lead",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-lead.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-lead.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-indicator-line": {
-      name: "chart-tooltip-indicator-line",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-indicator-line.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-indicator-line.tsx")),
-      source: "__registry__/default/block/chart-tooltip-indicator-line.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-list": {
+      name: "typography-list",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-list.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-list.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-indicator-none": {
-      name: "chart-tooltip-indicator-none",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-indicator-none.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-indicator-none.tsx")),
-      source: "__registry__/default/block/chart-tooltip-indicator-none.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-muted": {
+      name: "typography-muted",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-muted.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-muted.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-label-none": {
-      name: "chart-tooltip-label-none",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-label-none.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-none.tsx")),
-      source: "__registry__/default/block/chart-tooltip-label-none.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-p": {
+      name: "typography-p",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-p.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-p.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-label-custom": {
-      name: "chart-tooltip-label-custom",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-custom.tsx")),
-      source: "__registry__/default/block/chart-tooltip-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-small": {
+      name: "typography-small",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-small.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-small.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-label-formatter": {
-      name: "chart-tooltip-label-formatter",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-label-formatter.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-formatter.tsx")),
-      source: "__registry__/default/block/chart-tooltip-label-formatter.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-table": {
+      name: "typography-table",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/typography-table.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/typography-table.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-formatter": {
-      name: "chart-tooltip-formatter",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-formatter.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-formatter.tsx")),
-      source: "__registry__/default/block/chart-tooltip-formatter.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "mode-toggle": {
+      name: "mode-toggle",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/mode-toggle.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/mode-toggle.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-icons": {
-      name: "chart-tooltip-icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-icons.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-icons.tsx")),
-      source: "__registry__/default/block/chart-tooltip-icons.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "chart-bar-demo": {
+      name: "chart-bar-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/chart-bar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-bar-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-advanced": {
-      name: "chart-tooltip-advanced",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-advanced.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-advanced.tsx")),
-      source: "__registry__/default/block/chart-tooltip-advanced.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "chart-bar-demo-grid": {
+      name: "chart-bar-demo-grid",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/chart-bar-demo-grid.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-bar-demo-grid.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "utils": {
-      name: "utils",
-      type: "registry:lib",
+    "chart-bar-demo-axis": {
+      name: "chart-bar-demo-axis",
+      description: "",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/default/lib/utils.ts"],
-      component: React.lazy(() => import("@/registry/default/lib/utils.ts")),
+      files: [{
+        path: "registry/default/examples/chart-bar-demo-axis.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-bar-demo-axis.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "use-mobile": {
-      name: "use-mobile",
-      type: "registry:hook",
+    "chart-bar-demo-tooltip": {
+      name: "chart-bar-demo-tooltip",
+      description: "",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/default/hooks/use-mobile.tsx"],
-      component: React.lazy(() => import("@/registry/default/hooks/use-mobile.tsx")),
+      files: [{
+        path: "registry/default/examples/chart-bar-demo-tooltip.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-bar-demo-tooltip.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
     },
-    "use-toast": {
-      name: "use-toast",
-      type: "registry:hook",
+    "chart-bar-demo-legend": {
+      name: "chart-bar-demo-legend",
+      description: "",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/default/hooks/use-toast.ts"],
-      component: React.lazy(() => import("@/registry/default/hooks/use-toast.ts")),
+      files: [{
+        path: "registry/default/examples/chart-bar-demo-legend.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-bar-demo-legend.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      meta: undefined,
+    },
+    "chart-tooltip-demo": {
+      name: "chart-tooltip-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/chart-tooltip-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-tooltip-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
   },
 }
diff --git a/apps/www/__registry__/new-york/block/authentication-01.tsx b/apps/www/__registry__/new-york/block/authentication-01.tsx
deleted file mode 100644
index 84e1e4575bf..00000000000
--- a/apps/www/__registry__/new-york/block/authentication-01.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/authentication-02.tsx b/apps/www/__registry__/new-york/block/authentication-02.tsx
deleted file mode 100644
index bb1517bee41..00000000000
--- a/apps/www/__registry__/new-york/block/authentication-02.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/authentication-03.tsx b/apps/www/__registry__/new-york/block/authentication-03.tsx
deleted file mode 100644
index 727f9ed3c87..00000000000
--- a/apps/www/__registry__/new-york/block/authentication-03.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/authentication-04.tsx b/apps/www/__registry__/new-york/block/authentication-04.tsx
deleted file mode 100644
index cee34f6c650..00000000000
--- a/apps/www/__registry__/new-york/block/authentication-04.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/chart-area-interactive.tsx b/apps/www/__registry__/new-york/block/chart-area-interactive.tsx
deleted file mode 100644
index 1cd672af11c..00000000000
--- a/apps/www/__registry__/new-york/block/chart-area-interactive.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/ui/chart"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-
-export const description = "An interactive area chart"
-
-const chartData = [
-  { date: "2024-04-01", desktop: 222, mobile: 150 },
-  { date: "2024-04-02", desktop: 97, mobile: 180 },
-  { date: "2024-04-03", desktop: 167, mobile: 120 },
-  { date: "2024-04-04", desktop: 242, mobile: 260 },
-  { date: "2024-04-05", desktop: 373, mobile: 290 },
-  { date: "2024-04-06", desktop: 301, mobile: 340 },
-  { date: "2024-04-07", desktop: 245, mobile: 180 },
-  { date: "2024-04-08", desktop: 409, mobile: 320 },
-  { date: "2024-04-09", desktop: 59, mobile: 110 },
-  { date: "2024-04-10", desktop: 261, mobile: 190 },
-  { date: "2024-04-11", desktop: 327, mobile: 350 },
-  { date: "2024-04-12", desktop: 292, mobile: 210 },
-  { date: "2024-04-13", desktop: 342, mobile: 380 },
-  { date: "2024-04-14", desktop: 137, mobile: 220 },
-  { date: "2024-04-15", desktop: 120, mobile: 170 },
-  { date: "2024-04-16", desktop: 138, mobile: 190 },
-  { date: "2024-04-17", desktop: 446, mobile: 360 },
-  { date: "2024-04-18", desktop: 364, mobile: 410 },
-  { date: "2024-04-19", desktop: 243, mobile: 180 },
-  { date: "2024-04-20", desktop: 89, mobile: 150 },
-  { date: "2024-04-21", desktop: 137, mobile: 200 },
-  { date: "2024-04-22", desktop: 224, mobile: 170 },
-  { date: "2024-04-23", desktop: 138, mobile: 230 },
-  { date: "2024-04-24", desktop: 387, mobile: 290 },
-  { date: "2024-04-25", desktop: 215, mobile: 250 },
-  { date: "2024-04-26", desktop: 75, mobile: 130 },
-  { date: "2024-04-27", desktop: 383, mobile: 420 },
-  { date: "2024-04-28", desktop: 122, mobile: 180 },
-  { date: "2024-04-29", desktop: 315, mobile: 240 },
-  { date: "2024-04-30", desktop: 454, mobile: 380 },
-  { date: "2024-05-01", desktop: 165, mobile: 220 },
-  { date: "2024-05-02", desktop: 293, mobile: 310 },
-  { date: "2024-05-03", desktop: 247, mobile: 190 },
-  { date: "2024-05-04", desktop: 385, mobile: 420 },
-  { date: "2024-05-05", desktop: 481, mobile: 390 },
-  { date: "2024-05-06", desktop: 498, mobile: 520 },
-  { date: "2024-05-07", desktop: 388, mobile: 300 },
-  { date: "2024-05-08", desktop: 149, mobile: 210 },
-  { date: "2024-05-09", desktop: 227, mobile: 180 },
-  { date: "2024-05-10", desktop: 293, mobile: 330 },
-  { date: "2024-05-11", desktop: 335, mobile: 270 },
-  { date: "2024-05-12", desktop: 197, mobile: 240 },
-  { date: "2024-05-13", desktop: 197, mobile: 160 },
-  { date: "2024-05-14", desktop: 448, mobile: 490 },
-  { date: "2024-05-15", desktop: 473, mobile: 380 },
-  { date: "2024-05-16", desktop: 338, mobile: 400 },
-  { date: "2024-05-17", desktop: 499, mobile: 420 },
-  { date: "2024-05-18", desktop: 315, mobile: 350 },
-  { date: "2024-05-19", desktop: 235, mobile: 180 },
-  { date: "2024-05-20", desktop: 177, mobile: 230 },
-  { date: "2024-05-21", desktop: 82, mobile: 140 },
-  { date: "2024-05-22", desktop: 81, mobile: 120 },
-  { date: "2024-05-23", desktop: 252, mobile: 290 },
-  { date: "2024-05-24", desktop: 294, mobile: 220 },
-  { date: "2024-05-25", desktop: 201, mobile: 250 },
-  { date: "2024-05-26", desktop: 213, mobile: 170 },
-  { date: "2024-05-27", desktop: 420, mobile: 460 },
-  { date: "2024-05-28", desktop: 233, mobile: 190 },
-  { date: "2024-05-29", desktop: 78, mobile: 130 },
-  { date: "2024-05-30", desktop: 340, mobile: 280 },
-  { date: "2024-05-31", desktop: 178, mobile: 230 },
-  { date: "2024-06-01", desktop: 178, mobile: 200 },
-  { date: "2024-06-02", desktop: 470, mobile: 410 },
-  { date: "2024-06-03", desktop: 103, mobile: 160 },
-  { date: "2024-06-04", desktop: 439, mobile: 380 },
-  { date: "2024-06-05", desktop: 88, mobile: 140 },
-  { date: "2024-06-06", desktop: 294, mobile: 250 },
-  { date: "2024-06-07", desktop: 323, mobile: 370 },
-  { date: "2024-06-08", desktop: 385, mobile: 320 },
-  { date: "2024-06-09", desktop: 438, mobile: 480 },
-  { date: "2024-06-10", desktop: 155, mobile: 200 },
-  { date: "2024-06-11", desktop: 92, mobile: 150 },
-  { date: "2024-06-12", desktop: 492, mobile: 420 },
-  { date: "2024-06-13", desktop: 81, mobile: 130 },
-  { date: "2024-06-14", desktop: 426, mobile: 380 },
-  { date: "2024-06-15", desktop: 307, mobile: 350 },
-  { date: "2024-06-16", desktop: 371, mobile: 310 },
-  { date: "2024-06-17", desktop: 475, mobile: 520 },
-  { date: "2024-06-18", desktop: 107, mobile: 170 },
-  { date: "2024-06-19", desktop: 341, mobile: 290 },
-  { date: "2024-06-20", desktop: 408, mobile: 450 },
-  { date: "2024-06-21", desktop: 169, mobile: 210 },
-  { date: "2024-06-22", desktop: 317, mobile: 270 },
-  { date: "2024-06-23", desktop: 480, mobile: 530 },
-  { date: "2024-06-24", desktop: 132, mobile: 180 },
-  { date: "2024-06-25", desktop: 141, mobile: 190 },
-  { date: "2024-06-26", desktop: 434, mobile: 380 },
-  { date: "2024-06-27", desktop: 448, mobile: 490 },
-  { date: "2024-06-28", desktop: 149, mobile: 200 },
-  { date: "2024-06-29", desktop: 103, mobile: 160 },
-  { date: "2024-06-30", desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  desktop: {
-    label: "Desktop",
-    color: "hsl(var(--chart-1))",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  const [timeRange, setTimeRange] = React.useState("90d")
-
-  const filteredData = chartData.filter((item) => {
-    const date = new Date(item.date)
-    const now = new Date()
-    let daysToSubtract = 90
-    if (timeRange === "30d") {
-      daysToSubtract = 30
-    } else if (timeRange === "7d") {
-      daysToSubtract = 7
-    }
-    now.setDate(now.getDate() - daysToSubtract)
-    return date >= now
-  })
-
-  return (
-    <Card>
-      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
-        <div className="grid flex-1 gap-1 text-center sm:text-left">
-          <CardTitle>Area Chart - Interactive</CardTitle>
-          <CardDescription>
-            Showing total visitors for the last 3 months
-          </CardDescription>
-        </div>
-        <Select value={timeRange} onValueChange={setTimeRange}>
-          <SelectTrigger
-            className="w-[160px] rounded-lg sm:ml-auto"
-            aria-label="Select a value"
-          >
-            <SelectValue placeholder="Last 3 months" />
-          </SelectTrigger>
-          <SelectContent className="rounded-xl">
-            <SelectItem value="90d" className="rounded-lg">
-              Last 3 months
-            </SelectItem>
-            <SelectItem value="30d" className="rounded-lg">
-              Last 30 days
-            </SelectItem>
-            <SelectItem value="7d" className="rounded-lg">
-              Last 7 days
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </CardHeader>
-      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
-        <ChartContainer
-          config={chartConfig}
-          className="aspect-auto h-[250px] w-full"
-        >
-          <AreaChart data={filteredData}>
-            <defs>
-              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-            </defs>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              minTickGap={32}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                return date.toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                })
-              }}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={
-                <ChartTooltipContent
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }}
-                  indicator="dot"
-                />
-              }
-            />
-            <Area
-              dataKey="mobile"
-              type="natural"
-              fill="url(#fillMobile)"
-              stroke="var(--color-mobile)"
-              stackId="a"
-            />
-            <Area
-              dataKey="desktop"
-              type="natural"
-              fill="url(#fillDesktop)"
-              stroke="var(--color-desktop)"
-              stackId="a"
-            />
-            <ChartLegend content={<ChartLegendContent />} />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-default.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-default.tsx
deleted file mode 100644
index 93fe696fa43..00000000000
--- a/apps/www/__registry__/new-york/block/chart-tooltip-default.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/ui/chart"
-
-export const description = "A stacked bar chart with a legend"
-
-const chartData = [
-  { date: "2024-07-15", running: 450, swimming: 300 },
-  { date: "2024-07-16", running: 380, swimming: 420 },
-  { date: "2024-07-17", running: 520, swimming: 120 },
-  { date: "2024-07-18", running: 140, swimming: 550 },
-  { date: "2024-07-19", running: 600, swimming: 350 },
-  { date: "2024-07-20", running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-  running: {
-    label: "Running",
-    color: "hsl(var(--chart-1))",
-  },
-  swimming: {
-    label: "Swimming",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Tooltip - Default</CardTitle>
-        <CardDescription>
-          Default tooltip with ChartTooltipContent.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <BarChart accessibilityLayer data={chartData}>
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <Bar
-              dataKey="running"
-              stackId="a"
-              fill="var(--color-running)"
-              radius={[0, 0, 4, 4]}
-            />
-            <Bar
-              dataKey="swimming"
-              stackId="a"
-              fill="var(--color-swimming)"
-              radius={[4, 4, 0, 0]}
-            />
-            <ChartTooltip
-              content={<ChartTooltipContent />}
-              cursor={false}
-              defaultIndex={1}
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-indicator-line.tsx
deleted file mode 100644
index 431dbf6719d..00000000000
--- a/apps/www/__registry__/new-york/block/chart-tooltip-indicator-line.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/ui/chart"
-
-export const description = "A stacked bar chart with a legend"
-
-const chartData = [
-  { date: "2024-07-15", running: 450, swimming: 300 },
-  { date: "2024-07-16", running: 380, swimming: 420 },
-  { date: "2024-07-17", running: 520, swimming: 120 },
-  { date: "2024-07-18", running: 140, swimming: 550 },
-  { date: "2024-07-19", running: 600, swimming: 350 },
-  { date: "2024-07-20", running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-  running: {
-    label: "Running",
-    color: "hsl(var(--chart-1))",
-  },
-  swimming: {
-    label: "Swimming",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Tooltip - Line Indicator</CardTitle>
-        <CardDescription>Tooltip with line indicator.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <BarChart accessibilityLayer data={chartData}>
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <Bar
-              dataKey="running"
-              stackId="a"
-              fill="var(--color-running)"
-              radius={[0, 0, 4, 4]}
-            />
-            <Bar
-              dataKey="swimming"
-              stackId="a"
-              fill="var(--color-swimming)"
-              radius={[4, 4, 0, 0]}
-            />
-            <ChartTooltip
-              content={<ChartTooltipContent indicator="line" />}
-              cursor={false}
-              defaultIndex={1}
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/charts-01.tsx b/apps/www/__registry__/new-york/block/charts-01.tsx
deleted file mode 100644
index d9567003c4e..00000000000
--- a/apps/www/__registry__/new-york/block/charts-01.tsx
+++ /dev/null
@@ -1,871 +0,0 @@
-"use client"
-
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Label,
-  LabelList,
-  Line,
-  LineChart,
-  PolarAngleAxis,
-  RadialBar,
-  RadialBarChart,
-  Rectangle,
-  ReferenceLine,
-  XAxis,
-  YAxis,
-} from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york//ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york//ui/chart"
-import { Separator } from "@/registry/new-york//ui/separator"
-
-export const description = "A collection of health charts."
-
-export const iframeHeight = "900px"
-
-export const containerClassName = "min-h-screen py-12"
-
-export default function Charts() {
-  return (
-    <div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
-      <div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
-        <Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
-          <CardHeader className="space-y-0 pb-2">
-            <CardDescription>Today</CardDescription>
-            <CardTitle className="text-4xl tabular-nums">
-              12,584{" "}
-              <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-                steps
-              </span>
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ChartContainer
-              config={{
-                steps: {
-                  label: "Steps",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-            >
-              <BarChart
-                accessibilityLayer
-                margin={{
-                  left: -4,
-                  right: -4,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    steps: 2000,
-                  },
-                  {
-                    date: "2024-01-02",
-                    steps: 2100,
-                  },
-                  {
-                    date: "2024-01-03",
-                    steps: 2200,
-                  },
-                  {
-                    date: "2024-01-04",
-                    steps: 1300,
-                  },
-                  {
-                    date: "2024-01-05",
-                    steps: 1400,
-                  },
-                  {
-                    date: "2024-01-06",
-                    steps: 2500,
-                  },
-                  {
-                    date: "2024-01-07",
-                    steps: 1600,
-                  },
-                ]}
-              >
-                <Bar
-                  dataKey="steps"
-                  fill="var(--color-steps)"
-                  radius={5}
-                  fillOpacity={0.6}
-                  activeBar={<Rectangle fillOpacity={0.8} />}
-                />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={4}
-                  tickFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      weekday: "short",
-                    })
-                  }}
-                />
-                <ChartTooltip
-                  defaultIndex={2}
-                  content={
-                    <ChartTooltipContent
-                      hideIndicator
-                      labelFormatter={(value) => {
-                        return new Date(value).toLocaleDateString("en-US", {
-                          day: "numeric",
-                          month: "long",
-                          year: "numeric",
-                        })
-                      }}
-                    />
-                  }
-                  cursor={false}
-                />
-                <ReferenceLine
-                  y={1200}
-                  stroke="hsl(var(--muted-foreground))"
-                  strokeDasharray="3 3"
-                  strokeWidth={1}
-                >
-                  <Label
-                    position="insideBottomLeft"
-                    value="Average Steps"
-                    offset={10}
-                    fill="hsl(var(--foreground))"
-                  />
-                  <Label
-                    position="insideTopLeft"
-                    value="12,343"
-                    className="text-lg"
-                    fill="hsl(var(--foreground))"
-                    offset={10}
-                    startOffset={100}
-                  />
-                </ReferenceLine>
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-          <CardFooter className="flex-col items-start gap-1">
-            <CardDescription>
-              Over the past 7 days, you have walked{" "}
-              <span className="font-medium text-foreground">53,305</span> steps.
-            </CardDescription>
-            <CardDescription>
-              You need{" "}
-              <span className="font-medium text-foreground">12,584</span> more
-              steps to reach your goal.
-            </CardDescription>
-          </CardFooter>
-        </Card>
-        <Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
-          <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
-            <div>
-              <CardDescription>Resting HR</CardDescription>
-              <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                62
-                <span className="text-sm font-normal tracking-normal text-muted-foreground">
-                  bpm
-                </span>
-              </CardTitle>
-            </div>
-            <div>
-              <CardDescription>Variability</CardDescription>
-              <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                35
-                <span className="text-sm font-normal tracking-normal text-muted-foreground">
-                  ms
-                </span>
-              </CardTitle>
-            </div>
-          </CardHeader>
-          <CardContent className="flex flex-1 items-center">
-            <ChartContainer
-              config={{
-                resting: {
-                  label: "Resting",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-              className="w-full"
-            >
-              <LineChart
-                accessibilityLayer
-                margin={{
-                  left: 14,
-                  right: 14,
-                  top: 10,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    resting: 62,
-                  },
-                  {
-                    date: "2024-01-02",
-                    resting: 72,
-                  },
-                  {
-                    date: "2024-01-03",
-                    resting: 35,
-                  },
-                  {
-                    date: "2024-01-04",
-                    resting: 62,
-                  },
-                  {
-                    date: "2024-01-05",
-                    resting: 52,
-                  },
-                  {
-                    date: "2024-01-06",
-                    resting: 62,
-                  },
-                  {
-                    date: "2024-01-07",
-                    resting: 70,
-                  },
-                ]}
-              >
-                <CartesianGrid
-                  strokeDasharray="4 4"
-                  vertical={false}
-                  stroke="hsl(var(--muted-foreground))"
-                  strokeOpacity={0.5}
-                />
-                <YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={8}
-                  tickFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      weekday: "short",
-                    })
-                  }}
-                />
-                <Line
-                  dataKey="resting"
-                  type="natural"
-                  fill="var(--color-resting)"
-                  stroke="var(--color-resting)"
-                  strokeWidth={2}
-                  dot={false}
-                  activeDot={{
-                    fill: "var(--color-resting)",
-                    stroke: "var(--color-resting)",
-                    r: 4,
-                  }}
-                />
-                <ChartTooltip
-                  content={
-                    <ChartTooltipContent
-                      indicator="line"
-                      labelFormatter={(value) => {
-                        return new Date(value).toLocaleDateString("en-US", {
-                          day: "numeric",
-                          month: "long",
-                          year: "numeric",
-                        })
-                      }}
-                    />
-                  }
-                  cursor={false}
-                />
-              </LineChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-      </div>
-      <div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-2">
-          <CardHeader>
-            <CardTitle>Progress</CardTitle>
-            <CardDescription>
-              You're average more steps a day this year than last year.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="grid gap-4">
-            <div className="grid auto-rows-min gap-2">
-              <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                12,453
-                <span className="text-sm font-normal text-muted-foreground">
-                  steps/day
-                </span>
-              </div>
-              <ChartContainer
-                config={{
-                  steps: {
-                    label: "Steps",
-                    color: "hsl(var(--chart-1))",
-                  },
-                }}
-                className="aspect-auto h-[32px] w-full"
-              >
-                <BarChart
-                  accessibilityLayer
-                  layout="vertical"
-                  margin={{
-                    left: 0,
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                  }}
-                  data={[
-                    {
-                      date: "2024",
-                      steps: 12435,
-                    },
-                  ]}
-                >
-                  <Bar
-                    dataKey="steps"
-                    fill="var(--color-steps)"
-                    radius={4}
-                    barSize={32}
-                  >
-                    <LabelList
-                      position="insideLeft"
-                      dataKey="date"
-                      offset={8}
-                      fontSize={12}
-                      fill="white"
-                    />
-                  </Bar>
-                  <YAxis dataKey="date" type="category" tickCount={1} hide />
-                  <XAxis dataKey="steps" type="number" hide />
-                </BarChart>
-              </ChartContainer>
-            </div>
-            <div className="grid auto-rows-min gap-2">
-              <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                10,103
-                <span className="text-sm font-normal text-muted-foreground">
-                  steps/day
-                </span>
-              </div>
-              <ChartContainer
-                config={{
-                  steps: {
-                    label: "Steps",
-                    color: "hsl(var(--muted))",
-                  },
-                }}
-                className="aspect-auto h-[32px] w-full"
-              >
-                <BarChart
-                  accessibilityLayer
-                  layout="vertical"
-                  margin={{
-                    left: 0,
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                  }}
-                  data={[
-                    {
-                      date: "2023",
-                      steps: 10103,
-                    },
-                  ]}
-                >
-                  <Bar
-                    dataKey="steps"
-                    fill="var(--color-steps)"
-                    radius={4}
-                    barSize={32}
-                  >
-                    <LabelList
-                      position="insideLeft"
-                      dataKey="date"
-                      offset={8}
-                      fontSize={12}
-                      fill="hsl(var(--muted-foreground))"
-                    />
-                  </Bar>
-                  <YAxis dataKey="date" type="category" tickCount={1} hide />
-                  <XAxis dataKey="steps" type="number" hide />
-                </BarChart>
-              </ChartContainer>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-3">
-          <CardHeader className="p-4 pb-0">
-            <CardTitle>Walking Distance</CardTitle>
-            <CardDescription>
-              Over the last 7 days, your distance walked and run was 12.5 miles
-              per day.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
-            <div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
-              12.5
-              <span className="text-sm font-normal text-muted-foreground">
-                miles/day
-              </span>
-            </div>
-            <ChartContainer
-              config={{
-                steps: {
-                  label: "Steps",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-              className="ml-auto w-[72px]"
-            >
-              <BarChart
-                accessibilityLayer
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 0,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    steps: 2000,
-                  },
-                  {
-                    date: "2024-01-02",
-                    steps: 2100,
-                  },
-                  {
-                    date: "2024-01-03",
-                    steps: 2200,
-                  },
-                  {
-                    date: "2024-01-04",
-                    steps: 1300,
-                  },
-                  {
-                    date: "2024-01-05",
-                    steps: 1400,
-                  },
-                  {
-                    date: "2024-01-06",
-                    steps: 2500,
-                  },
-                  {
-                    date: "2024-01-07",
-                    steps: 1600,
-                  },
-                ]}
-              >
-                <Bar
-                  dataKey="steps"
-                  fill="var(--color-steps)"
-                  radius={2}
-                  fillOpacity={0.2}
-                  activeIndex={6}
-                  activeBar={<Rectangle fillOpacity={0.8} />}
-                />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={4}
-                  hide
-                />
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-4">
-          <CardContent className="flex gap-4 p-4 pb-2">
-            <ChartContainer
-              config={{
-                move: {
-                  label: "Move",
-                  color: "hsl(var(--chart-1))",
-                },
-                stand: {
-                  label: "Stand",
-                  color: "hsl(var(--chart-2))",
-                },
-                exercise: {
-                  label: "Exercise",
-                  color: "hsl(var(--chart-3))",
-                },
-              }}
-              className="h-[140px] w-full"
-            >
-              <BarChart
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 10,
-                }}
-                data={[
-                  {
-                    activity: "stand",
-                    value: (8 / 12) * 100,
-                    label: "8/12 hr",
-                    fill: "var(--color-stand)",
-                  },
-                  {
-                    activity: "exercise",
-                    value: (46 / 60) * 100,
-                    label: "46/60 min",
-                    fill: "var(--color-exercise)",
-                  },
-                  {
-                    activity: "move",
-                    value: (245 / 360) * 100,
-                    label: "245/360 kcal",
-                    fill: "var(--color-move)",
-                  },
-                ]}
-                layout="vertical"
-                barSize={32}
-                barGap={2}
-              >
-                <XAxis type="number" dataKey="value" hide />
-                <YAxis
-                  dataKey="activity"
-                  type="category"
-                  tickLine={false}
-                  tickMargin={4}
-                  axisLine={false}
-                  className="capitalize"
-                />
-                <Bar dataKey="value" radius={5}>
-                  <LabelList
-                    position="insideLeft"
-                    dataKey="label"
-                    fill="white"
-                    offset={8}
-                    fontSize={12}
-                  />
-                </Bar>
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-          <CardFooter className="flex flex-row border-t p-4">
-            <div className="flex w-full items-center gap-2">
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-xs text-muted-foreground">Move</div>
-                <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  562
-                  <span className="text-sm font-normal text-muted-foreground">
-                    kcal
-                  </span>
-                </div>
-              </div>
-              <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-xs text-muted-foreground">Exercise</div>
-                <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  73
-                  <span className="text-sm font-normal text-muted-foreground">
-                    min
-                  </span>
-                </div>
-              </div>
-              <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-xs text-muted-foreground">Stand</div>
-                <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  14
-                  <span className="text-sm font-normal text-muted-foreground">
-                    hr
-                  </span>
-                </div>
-              </div>
-            </div>
-          </CardFooter>
-        </Card>
-      </div>
-      <div className="grid w-full flex-1 gap-6">
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-5">
-          <CardContent className="flex gap-4 p-4">
-            <div className="grid items-center gap-2">
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-sm text-muted-foreground">Move</div>
-                <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                  562/600
-                  <span className="text-sm font-normal text-muted-foreground">
-                    kcal
-                  </span>
-                </div>
-              </div>
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-sm text-muted-foreground">Exercise</div>
-                <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                  73/120
-                  <span className="text-sm font-normal text-muted-foreground">
-                    min
-                  </span>
-                </div>
-              </div>
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-sm text-muted-foreground">Stand</div>
-                <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                  8/12
-                  <span className="text-sm font-normal text-muted-foreground">
-                    hr
-                  </span>
-                </div>
-              </div>
-            </div>
-            <ChartContainer
-              config={{
-                move: {
-                  label: "Move",
-                  color: "hsl(var(--chart-1))",
-                },
-                exercise: {
-                  label: "Exercise",
-                  color: "hsl(var(--chart-2))",
-                },
-                stand: {
-                  label: "Stand",
-                  color: "hsl(var(--chart-3))",
-                },
-              }}
-              className="mx-auto aspect-square w-full max-w-[80%]"
-            >
-              <RadialBarChart
-                margin={{
-                  left: -10,
-                  right: -10,
-                  top: -10,
-                  bottom: -10,
-                }}
-                data={[
-                  {
-                    activity: "stand",
-                    value: (8 / 12) * 100,
-                    fill: "var(--color-stand)",
-                  },
-                  {
-                    activity: "exercise",
-                    value: (46 / 60) * 100,
-                    fill: "var(--color-exercise)",
-                  },
-                  {
-                    activity: "move",
-                    value: (245 / 360) * 100,
-                    fill: "var(--color-move)",
-                  },
-                ]}
-                innerRadius="20%"
-                barSize={24}
-                startAngle={90}
-                endAngle={450}
-              >
-                <PolarAngleAxis
-                  type="number"
-                  domain={[0, 100]}
-                  dataKey="value"
-                  tick={false}
-                />
-                <RadialBar dataKey="value" background cornerRadius={5} />
-              </RadialBarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-6">
-          <CardHeader className="p-4 pb-0">
-            <CardTitle>Active Energy</CardTitle>
-            <CardDescription>
-              You're burning an average of 754 calories per day. Good job!
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
-            <div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
-              1,254
-              <span className="text-sm font-normal text-muted-foreground">
-                kcal/day
-              </span>
-            </div>
-            <ChartContainer
-              config={{
-                calories: {
-                  label: "Calories",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-              className="ml-auto w-[64px]"
-            >
-              <BarChart
-                accessibilityLayer
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 0,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    calories: 354,
-                  },
-                  {
-                    date: "2024-01-02",
-                    calories: 514,
-                  },
-                  {
-                    date: "2024-01-03",
-                    calories: 345,
-                  },
-                  {
-                    date: "2024-01-04",
-                    calories: 734,
-                  },
-                  {
-                    date: "2024-01-05",
-                    calories: 645,
-                  },
-                  {
-                    date: "2024-01-06",
-                    calories: 456,
-                  },
-                  {
-                    date: "2024-01-07",
-                    calories: 345,
-                  },
-                ]}
-              >
-                <Bar
-                  dataKey="calories"
-                  fill="var(--color-calories)"
-                  radius={2}
-                  fillOpacity={0.2}
-                  activeIndex={6}
-                  activeBar={<Rectangle fillOpacity={0.8} />}
-                />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={4}
-                  hide
-                />
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-7">
-          <CardHeader className="space-y-0 pb-0">
-            <CardDescription>Time in Bed</CardDescription>
-            <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-              8
-              <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-                hr
-              </span>
-              35
-              <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-                min
-              </span>
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-0">
-            <ChartContainer
-              config={{
-                time: {
-                  label: "Time",
-                  color: "hsl(var(--chart-2))",
-                },
-              }}
-            >
-              <AreaChart
-                accessibilityLayer
-                data={[
-                  {
-                    date: "2024-01-01",
-                    time: 8.5,
-                  },
-                  {
-                    date: "2024-01-02",
-                    time: 7.2,
-                  },
-                  {
-                    date: "2024-01-03",
-                    time: 8.1,
-                  },
-                  {
-                    date: "2024-01-04",
-                    time: 6.2,
-                  },
-                  {
-                    date: "2024-01-05",
-                    time: 5.2,
-                  },
-                  {
-                    date: "2024-01-06",
-                    time: 8.1,
-                  },
-                  {
-                    date: "2024-01-07",
-                    time: 7.0,
-                  },
-                ]}
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 0,
-                }}
-              >
-                <XAxis dataKey="date" hide />
-                <YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
-                <defs>
-                  <linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
-                    <stop
-                      offset="5%"
-                      stopColor="var(--color-time)"
-                      stopOpacity={0.8}
-                    />
-                    <stop
-                      offset="95%"
-                      stopColor="var(--color-time)"
-                      stopOpacity={0.1}
-                    />
-                  </linearGradient>
-                </defs>
-                <Area
-                  dataKey="time"
-                  type="natural"
-                  fill="url(#fillTime)"
-                  fillOpacity={0.4}
-                  stroke="var(--color-time)"
-                />
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent hideLabel />}
-                  formatter={(value) => (
-                    <div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
-                      Time in bed
-                      <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
-                        {value}
-                        <span className="font-normal text-muted-foreground">
-                          hr
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                />
-              </AreaChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/dashboard-01.tsx b/apps/www/__registry__/new-york/block/dashboard-01.tsx
deleted file mode 100644
index 2c4672f5c69..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-01.tsx
+++ /dev/null
@@ -1,455 +0,0 @@
-import Link from "next/link"
-import {
-  Activity,
-  ArrowUpRight,
-  CircleUser,
-  CreditCard,
-  DollarSign,
-  Menu,
-  Package2,
-  Search,
-  Users,
-} from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import { Badge } from "@/registry/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-
-export const description =
-  "An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales."
-
-export const iframeHeight = "730px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col">
-      <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
-        <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-          <Link
-            href="#"
-            className="flex items-center gap-2 text-lg font-semibold md:text-base"
-          >
-            <Package2 className="h-6 w-6" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Link
-            href="#"
-            className="text-foreground transition-colors hover:text-foreground"
-          >
-            Dashboard
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Orders
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Products
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Customers
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Analytics
-          </Link>
-        </nav>
-        <Sheet>
-          <SheetTrigger asChild>
-            <Button
-              variant="outline"
-              size="icon"
-              className="shrink-0 md:hidden"
-            >
-              <Menu className="h-5 w-5" />
-              <span className="sr-only">Toggle navigation menu</span>
-            </Button>
-          </SheetTrigger>
-          <SheetContent side="left">
-            <nav className="grid gap-6 text-lg font-medium">
-              <Link
-                href="#"
-                className="flex items-center gap-2 text-lg font-semibold"
-              >
-                <Package2 className="h-6 w-6" />
-                <span className="sr-only">Acme Inc</span>
-              </Link>
-              <Link href="#" className="hover:text-foreground">
-                Dashboard
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Orders
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Products
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Customers
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Analytics
-              </Link>
-            </nav>
-          </SheetContent>
-        </Sheet>
-        <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
-          <form className="ml-auto flex-1 sm:flex-initial">
-            <div className="relative">
-              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input
-                type="search"
-                placeholder="Search products..."
-                className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
-              />
-            </div>
-          </form>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" size="icon" className="rounded-full">
-                <CircleUser className="h-5 w-5" />
-                <span className="sr-only">Toggle user menu</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </header>
-      <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
-        <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-          <Card x-chunk="dashboard-01-chunk-0">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Total Revenue
-              </CardTitle>
-              <DollarSign className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">$45,231.89</div>
-              <p className="text-xs text-muted-foreground">
-                +20.1% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card x-chunk="dashboard-01-chunk-1">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Subscriptions
-              </CardTitle>
-              <Users className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">+2350</div>
-              <p className="text-xs text-muted-foreground">
-                +180.1% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card x-chunk="dashboard-01-chunk-2">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Sales</CardTitle>
-              <CreditCard className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">+12,234</div>
-              <p className="text-xs text-muted-foreground">
-                +19% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card x-chunk="dashboard-01-chunk-3">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-              <Activity className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">+573</div>
-              <p className="text-xs text-muted-foreground">
-                +201 since last hour
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-        <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-          <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
-            <CardHeader className="flex flex-row items-center">
-              <div className="grid gap-2">
-                <CardTitle>Transactions</CardTitle>
-                <CardDescription>
-                  Recent transactions from your store.
-                </CardDescription>
-              </div>
-              <Button asChild size="sm" className="ml-auto gap-1">
-                <Link href="#">
-                  View All
-                  <ArrowUpRight className="h-4 w-4" />
-                </Link>
-              </Button>
-            </CardHeader>
-            <CardContent>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Customer</TableHead>
-                    <TableHead className="hidden xl:table-column">
-                      Type
-                    </TableHead>
-                    <TableHead className="hidden xl:table-column">
-                      Status
-                    </TableHead>
-                    <TableHead className="hidden xl:table-column">
-                      Date
-                    </TableHead>
-                    <TableHead className="text-right">Amount</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Liam Johnson</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        liam@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Sale
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-23
-                    </TableCell>
-                    <TableCell className="text-right">$250.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Olivia Smith</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        olivia@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Refund
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Declined
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-24
-                    </TableCell>
-                    <TableCell className="text-right">$150.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Noah Williams</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        noah@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Subscription
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-25
-                    </TableCell>
-                    <TableCell className="text-right">$350.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Emma Brown</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        emma@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Sale
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-26
-                    </TableCell>
-                    <TableCell className="text-right">$450.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Liam Johnson</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        liam@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Sale
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-27
-                    </TableCell>
-                    <TableCell className="text-right">$550.00</TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-          <Card x-chunk="dashboard-01-chunk-5">
-            <CardHeader>
-              <CardTitle>Recent Sales</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-8">
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/01.png" alt="Avatar" />
-                  <AvatarFallback>OM</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Olivia Martin
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    olivia.martin@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$1,999.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/02.png" alt="Avatar" />
-                  <AvatarFallback>JL</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Jackson Lee
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    jackson.lee@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$39.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/03.png" alt="Avatar" />
-                  <AvatarFallback>IN</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Isabella Nguyen
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    isabella.nguyen@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$299.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/04.png" alt="Avatar" />
-                  <AvatarFallback>WK</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    William Kim
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    will@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$99.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/05.png" alt="Avatar" />
-                  <AvatarFallback>SD</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Sofia Davis
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    sofia.davis@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$39.00</div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </main>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/dashboard-02.tsx b/apps/www/__registry__/new-york/block/dashboard-02.tsx
deleted file mode 100644
index 5f9215f5547..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-02.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import Link from "next/link"
-import {
-  Bell,
-  CircleUser,
-  Home,
-  LineChart,
-  Menu,
-  Package,
-  Package2,
-  Search,
-  ShoppingCart,
-  Users,
-} from "lucide-react"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
-
-export const description =
-  "A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action."
-
-export const iframeHeight = "800px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-      <div className="hidden border-r bg-muted/40 md:block">
-        <div className="flex h-full max-h-screen flex-col gap-2">
-          <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
-            <Link href="/" className="flex items-center gap-2 font-semibold">
-              <Package2 className="h-6 w-6" />
-              <span className="">Acme Inc</span>
-            </Link>
-            <Button variant="outline" size="icon" className="ml-auto h-8 w-8">
-              <Bell className="h-4 w-4" />
-              <span className="sr-only">Toggle notifications</span>
-            </Button>
-          </div>
-          <div className="flex-1">
-            <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <Home className="h-4 w-4" />
-                Dashboard
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <ShoppingCart className="h-4 w-4" />
-                Orders
-                <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
-                  6
-                </Badge>
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
-              >
-                <Package className="h-4 w-4" />
-                Products{" "}
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <Users className="h-4 w-4" />
-                Customers
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <LineChart className="h-4 w-4" />
-                Analytics
-              </Link>
-            </nav>
-          </div>
-          <div className="mt-auto p-4">
-            <Card x-chunk="dashboard-02-chunk-0">
-              <CardHeader className="p-2 pt-0 md:p-4">
-                <CardTitle>Upgrade to Pro</CardTitle>
-                <CardDescription>
-                  Unlock all features and get unlimited access to our support
-                  team.
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
-                <Button size="sm" className="w-full">
-                  Upgrade
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-col">
-        <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="shrink-0 md:hidden"
-              >
-                <Menu className="h-5 w-5" />
-                <span className="sr-only">Toggle navigation menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="flex flex-col">
-              <nav className="grid gap-2 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="flex items-center gap-2 text-lg font-semibold"
-                >
-                  <Package2 className="h-6 w-6" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                  <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
-                    6
-                  </Badge>
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <Users className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Analytics
-                </Link>
-              </nav>
-              <div className="mt-auto">
-                <Card>
-                  <CardHeader>
-                    <CardTitle>Upgrade to Pro</CardTitle>
-                    <CardDescription>
-                      Unlock all features and get unlimited access to our
-                      support team.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Button size="sm" className="w-full">
-                      Upgrade
-                    </Button>
-                  </CardContent>
-                </Card>
-              </div>
-            </SheetContent>
-          </Sheet>
-          <div className="w-full flex-1">
-            <form>
-              <div className="relative">
-                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-                <Input
-                  type="search"
-                  placeholder="Search products..."
-                  className="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
-                />
-              </div>
-            </form>
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" size="icon" className="rounded-full">
-                <CircleUser className="h-5 w-5" />
-                <span className="sr-only">Toggle user menu</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
-          <div className="flex items-center">
-            <h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
-          </div>
-          <div
-            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-            x-chunk="dashboard-02-chunk-1"
-          >
-            <div className="flex flex-col items-center gap-1 text-center">
-              <h3 className="text-2xl font-bold tracking-tight">
-                You have no products
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                You can start selling as soon as you add a product.
-              </p>
-              <Button className="mt-4">Add Product</Button>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/dashboard-03.tsx b/apps/www/__registry__/new-york/block/dashboard-03.tsx
deleted file mode 100644
index b8808b42f0f..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-03.tsx
+++ /dev/null
@@ -1,464 +0,0 @@
-import {
-  Bird,
-  Book,
-  Bot,
-  Code2,
-  CornerDownLeft,
-  LifeBuoy,
-  Mic,
-  Paperclip,
-  Rabbit,
-  Settings,
-  Settings2,
-  Share,
-  SquareTerminal,
-  SquareUser,
-  Triangle,
-  Turtle,
-} from "lucide-react"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/new-york/ui/drawer"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-import { Textarea } from "@/registry/new-york/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/ui/tooltip"
-
-export const description =
-  "An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages."
-
-export const iframeHeight = "720px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="grid h-screen w-full pl-[53px]">
-      <aside className="inset-y fixed  left-0 z-20 flex h-full flex-col border-r">
-        <div className="border-b p-2">
-          <Button variant="outline" size="icon" aria-label="Home">
-            <Triangle className="size-5 fill-foreground" />
-          </Button>
-        </div>
-        <nav className="grid gap-1 p-2">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg bg-muted"
-                aria-label="Playground"
-              >
-                <SquareTerminal className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Playground
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="Models"
-              >
-                <Bot className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Models
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="API"
-              >
-                <Code2 className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              API
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="Documentation"
-              >
-                <Book className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Documentation
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="Settings"
-              >
-                <Settings2 className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Settings
-            </TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto grid gap-1 p-2">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="mt-auto rounded-lg"
-                aria-label="Help"
-              >
-                <LifeBuoy className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Help
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="mt-auto rounded-lg"
-                aria-label="Account"
-              >
-                <SquareUser className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Account
-            </TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col">
-        <header className="sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4">
-          <h1 className="text-xl font-semibold">Playground</h1>
-          <Drawer>
-            <DrawerTrigger asChild>
-              <Button variant="ghost" size="icon" className="md:hidden">
-                <Settings className="size-4" />
-                <span className="sr-only">Settings</span>
-              </Button>
-            </DrawerTrigger>
-            <DrawerContent className="max-h-[80vh]">
-              <DrawerHeader>
-                <DrawerTitle>Configuration</DrawerTitle>
-                <DrawerDescription>
-                  Configure the settings for the model and messages.
-                </DrawerDescription>
-              </DrawerHeader>
-              <form className="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
-                <fieldset className="grid gap-6 rounded-lg border p-4">
-                  <legend className="-ml-1 px-1 text-sm font-medium">
-                    Settings
-                  </legend>
-                  <div className="grid gap-3">
-                    <Label htmlFor="model">Model</Label>
-                    <Select>
-                      <SelectTrigger
-                        id="model"
-                        className="items-start [&_[data-description]]:hidden"
-                      >
-                        <SelectValue placeholder="Select a model" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="genesis">
-                          <div className="flex items-start gap-3 text-muted-foreground">
-                            <Rabbit className="size-5" />
-                            <div className="grid gap-0.5">
-                              <p>
-                                Neural{" "}
-                                <span className="font-medium text-foreground">
-                                  Genesis
-                                </span>
-                              </p>
-                              <p className="text-xs" data-description>
-                                Our fastest model for general use cases.
-                              </p>
-                            </div>
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="explorer">
-                          <div className="flex items-start gap-3 text-muted-foreground">
-                            <Bird className="size-5" />
-                            <div className="grid gap-0.5">
-                              <p>
-                                Neural{" "}
-                                <span className="font-medium text-foreground">
-                                  Explorer
-                                </span>
-                              </p>
-                              <p className="text-xs" data-description>
-                                Performance and speed for efficiency.
-                              </p>
-                            </div>
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="quantum">
-                          <div className="flex items-start gap-3 text-muted-foreground">
-                            <Turtle className="size-5" />
-                            <div className="grid gap-0.5">
-                              <p>
-                                Neural{" "}
-                                <span className="font-medium text-foreground">
-                                  Quantum
-                                </span>
-                              </p>
-                              <p className="text-xs" data-description>
-                                The most powerful model for complex
-                                computations.
-                              </p>
-                            </div>
-                          </div>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="temperature">Temperature</Label>
-                    <Input id="temperature" type="number" placeholder="0.4" />
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-p">Top P</Label>
-                    <Input id="top-p" type="number" placeholder="0.7" />
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-k">Top K</Label>
-                    <Input id="top-k" type="number" placeholder="0.0" />
-                  </div>
-                </fieldset>
-                <fieldset className="grid gap-6 rounded-lg border p-4">
-                  <legend className="-ml-1 px-1 text-sm font-medium">
-                    Messages
-                  </legend>
-                  <div className="grid gap-3">
-                    <Label htmlFor="role">Role</Label>
-                    <Select defaultValue="system">
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a role" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="system">System</SelectItem>
-                        <SelectItem value="user">User</SelectItem>
-                        <SelectItem value="assistant">Assistant</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="content">Content</Label>
-                    <Textarea id="content" placeholder="You are a..." />
-                  </div>
-                </fieldset>
-              </form>
-            </DrawerContent>
-          </Drawer>
-          <Button
-            variant="outline"
-            size="sm"
-            className="ml-auto gap-1.5 text-sm"
-          >
-            <Share className="size-3.5" />
-            Share
-          </Button>
-        </header>
-        <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
-          <div
-            className="relative hidden flex-col items-start gap-8 md:flex"
-            x-chunk="dashboard-03-chunk-0"
-          >
-            <form className="grid w-full items-start gap-6">
-              <fieldset className="grid gap-6 rounded-lg border p-4">
-                <legend className="-ml-1 px-1 text-sm font-medium">
-                  Settings
-                </legend>
-                <div className="grid gap-3">
-                  <Label htmlFor="model">Model</Label>
-                  <Select>
-                    <SelectTrigger
-                      id="model"
-                      className="items-start [&_[data-description]]:hidden"
-                    >
-                      <SelectValue placeholder="Select a model" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="genesis">
-                        <div className="flex items-start gap-3 text-muted-foreground">
-                          <Rabbit className="size-5" />
-                          <div className="grid gap-0.5">
-                            <p>
-                              Neural{" "}
-                              <span className="font-medium text-foreground">
-                                Genesis
-                              </span>
-                            </p>
-                            <p className="text-xs" data-description>
-                              Our fastest model for general use cases.
-                            </p>
-                          </div>
-                        </div>
-                      </SelectItem>
-                      <SelectItem value="explorer">
-                        <div className="flex items-start gap-3 text-muted-foreground">
-                          <Bird className="size-5" />
-                          <div className="grid gap-0.5">
-                            <p>
-                              Neural{" "}
-                              <span className="font-medium text-foreground">
-                                Explorer
-                              </span>
-                            </p>
-                            <p className="text-xs" data-description>
-                              Performance and speed for efficiency.
-                            </p>
-                          </div>
-                        </div>
-                      </SelectItem>
-                      <SelectItem value="quantum">
-                        <div className="flex items-start gap-3 text-muted-foreground">
-                          <Turtle className="size-5" />
-                          <div className="grid gap-0.5">
-                            <p>
-                              Neural{" "}
-                              <span className="font-medium text-foreground">
-                                Quantum
-                              </span>
-                            </p>
-                            <p className="text-xs" data-description>
-                              The most powerful model for complex computations.
-                            </p>
-                          </div>
-                        </div>
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="temperature">Temperature</Label>
-                  <Input id="temperature" type="number" placeholder="0.4" />
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-p">Top P</Label>
-                    <Input id="top-p" type="number" placeholder="0.7" />
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-k">Top K</Label>
-                    <Input id="top-k" type="number" placeholder="0.0" />
-                  </div>
-                </div>
-              </fieldset>
-              <fieldset className="grid gap-6 rounded-lg border p-4">
-                <legend className="-ml-1 px-1 text-sm font-medium">
-                  Messages
-                </legend>
-                <div className="grid gap-3">
-                  <Label htmlFor="role">Role</Label>
-                  <Select defaultValue="system">
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a role" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="system">System</SelectItem>
-                      <SelectItem value="user">User</SelectItem>
-                      <SelectItem value="assistant">Assistant</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="content">Content</Label>
-                  <Textarea
-                    id="content"
-                    placeholder="You are a..."
-                    className="min-h-[9.5rem]"
-                  />
-                </div>
-              </fieldset>
-            </form>
-          </div>
-          <div className="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
-            <Badge variant="outline" className="absolute right-3 top-3">
-              Output
-            </Badge>
-            <div className="flex-1" />
-            <form
-              className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
-              x-chunk="dashboard-03-chunk-1"
-            >
-              <Label htmlFor="message" className="sr-only">
-                Message
-              </Label>
-              <Textarea
-                id="message"
-                placeholder="Type your message here..."
-                className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
-              />
-              <div className="flex items-center p-3 pt-0">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="ghost" size="icon">
-                      <Paperclip className="size-4" />
-                      <span className="sr-only">Attach file</span>
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">Attach File</TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="ghost" size="icon">
-                      <Mic className="size-4" />
-                      <span className="sr-only">Use Microphone</span>
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">Use Microphone</TooltipContent>
-                </Tooltip>
-                <Button type="submit" size="sm" className="ml-auto gap-1.5">
-                  Send Message
-                  <CornerDownLeft className="size-3.5" />
-                </Button>
-              </div>
-            </form>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/dashboard-04.tsx b/apps/www/__registry__/new-york/block/dashboard-04.tsx
deleted file mode 100644
index 69e19a57a2b..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-04.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import Link from "next/link"
-import { CircleUser, Menu, Package2, Search } from "lucide-react"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Checkbox } from "@/registry/new-york/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
-
-export const description =
-  "A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings."
-
-export const iframeHeight = "780px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col">
-      <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
-        <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-          <Link
-            href="#"
-            className="flex items-center gap-2 text-lg font-semibold md:text-base"
-          >
-            <Package2 className="h-6 w-6" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Dashboard
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Orders
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Products
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Customers
-          </Link>
-          <Link
-            href="#"
-            className="text-foreground transition-colors hover:text-foreground"
-          >
-            Settings
-          </Link>
-        </nav>
-        <Sheet>
-          <SheetTrigger asChild>
-            <Button
-              variant="outline"
-              size="icon"
-              className="shrink-0 md:hidden"
-            >
-              <Menu className="h-5 w-5" />
-              <span className="sr-only">Toggle navigation menu</span>
-            </Button>
-          </SheetTrigger>
-          <SheetContent side="left">
-            <nav className="grid gap-6 text-lg font-medium">
-              <Link
-                href="#"
-                className="flex items-center gap-2 text-lg font-semibold"
-              >
-                <Package2 className="h-6 w-6" />
-                <span className="sr-only">Acme Inc</span>
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Dashboard
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Orders
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Products
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Customers
-              </Link>
-              <Link href="#" className="hover:text-foreground">
-                Settings
-              </Link>
-            </nav>
-          </SheetContent>
-        </Sheet>
-        <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
-          <form className="ml-auto flex-1 sm:flex-initial">
-            <div className="relative">
-              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input
-                type="search"
-                placeholder="Search products..."
-                className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
-              />
-            </div>
-          </form>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" size="icon" className="rounded-full">
-                <CircleUser className="h-5 w-5" />
-                <span className="sr-only">Toggle user menu</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </header>
-      <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
-        <div className="mx-auto grid w-full max-w-6xl gap-2">
-          <h1 className="text-3xl font-semibold">Settings</h1>
-        </div>
-        <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
-          <nav
-            className="grid gap-4 text-sm text-muted-foreground"
-            x-chunk="dashboard-04-chunk-0"
-          >
-            <Link href="#" className="font-semibold text-primary">
-              General
-            </Link>
-            <Link href="#">Security</Link>
-            <Link href="#">Integrations</Link>
-            <Link href="#">Support</Link>
-            <Link href="#">Organizations</Link>
-            <Link href="#">Advanced</Link>
-          </nav>
-          <div className="grid gap-6">
-            <Card x-chunk="dashboard-04-chunk-1">
-              <CardHeader>
-                <CardTitle>Store Name</CardTitle>
-                <CardDescription>
-                  Used to identify your store in the marketplace.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <form>
-                  <Input placeholder="Store Name" />
-                </form>
-              </CardContent>
-              <CardFooter className="border-t px-6 py-4">
-                <Button>Save</Button>
-              </CardFooter>
-            </Card>
-            <Card x-chunk="dashboard-04-chunk-2">
-              <CardHeader>
-                <CardTitle>Plugins Directory</CardTitle>
-                <CardDescription>
-                  The directory within your project, in which your plugins are
-                  located.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <form className="flex flex-col gap-4">
-                  <Input
-                    placeholder="Project Name"
-                    defaultValue="/content/plugins"
-                  />
-                  <div className="flex items-center space-x-2">
-                    <Checkbox id="include" defaultChecked />
-                    <label
-                      htmlFor="include"
-                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                    >
-                      Allow administrators to change the directory.
-                    </label>
-                  </div>
-                </form>
-              </CardContent>
-              <CardFooter className="border-t px-6 py-4">
-                <Button>Save</Button>
-              </CardFooter>
-            </Card>
-          </div>
-        </div>
-      </main>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/dashboard-05.tsx b/apps/www/__registry__/new-york/block/dashboard-05.tsx
deleted file mode 100644
index bb35ec41d0b..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-05.tsx
+++ /dev/null
@@ -1,721 +0,0 @@
-import * as React from "react"
-import Image from "next/image"
-import Link from "next/link"
-import {
-  ChevronLeft,
-  ChevronRight,
-  Copy,
-  CreditCard,
-  File,
-  Home,
-  LineChart,
-  ListFilter,
-  MoreVertical,
-  Package,
-  Package2,
-  PanelLeft,
-  Search,
-  Settings,
-  ShoppingCart,
-  Truck,
-  Users2,
-} from "lucide-react"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-} from "@/registry/new-york/ui/pagination"
-import { Progress } from "@/registry/new-york/ui/progress"
-import { Separator } from "@/registry/new-york/ui/separator"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york/ui/tabs"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/ui/tooltip"
-
-export const description =
-  "An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information."
-
-export const iframeHeight = "906px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col bg-muted/40">
-      <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
-        <nav className="flex flex-col items-center gap-4 px-2 sm:py-4">
-          <Link
-            href="#"
-            className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
-          >
-            <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Home className="h-5 w-5" />
-                <span className="sr-only">Dashboard</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Dashboard</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <ShoppingCart className="h-5 w-5" />
-                <span className="sr-only">Orders</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Orders</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Package className="h-5 w-5" />
-                <span className="sr-only">Products</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Products</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Users2 className="h-5 w-5" />
-                <span className="sr-only">Customers</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Customers</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <LineChart className="h-5 w-5" />
-                <span className="sr-only">Analytics</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Analytics</TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-4">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Settings className="h-5 w-5" />
-                <span className="sr-only">Settings</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Settings</TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button size="icon" variant="outline" className="sm:hidden">
-                <PanelLeft className="h-5 w-5" />
-                <span className="sr-only">Toggle Menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="sm:max-w-xs">
-              <nav className="grid gap-6 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
-                >
-                  <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Users2 className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Settings
-                </Link>
-              </nav>
-            </SheetContent>
-          </Sheet>
-          <Breadcrumb className="hidden md:flex">
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Dashboard</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Orders</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>Recent Orders</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="relative ml-auto flex-1 md:grow-0">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]"
-            />
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="overflow-hidden rounded-full"
-              >
-                <Image
-                  src="/placeholder-user.jpg"
-                  width={36}
-                  height={36}
-                  alt="Avatar"
-                  className="overflow-hidden rounded-full"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
-          <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
-            <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
-              <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
-                <CardHeader className="pb-3">
-                  <CardTitle>Your Orders</CardTitle>
-                  <CardDescription className="text-balance max-w-lg leading-relaxed">
-                    Introducing Our Dynamic Orders Dashboard for Seamless
-                    Management and Insightful Analysis.
-                  </CardDescription>
-                </CardHeader>
-                <CardFooter>
-                  <Button>Create New Order</Button>
-                </CardFooter>
-              </Card>
-              <Card x-chunk="dashboard-05-chunk-1">
-                <CardHeader className="pb-2">
-                  <CardDescription>This Week</CardDescription>
-                  <CardTitle className="text-4xl">$1,329</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="text-xs text-muted-foreground">
-                    +25% from last week
-                  </div>
-                </CardContent>
-                <CardFooter>
-                  <Progress value={25} aria-label="25% increase" />
-                </CardFooter>
-              </Card>
-              <Card x-chunk="dashboard-05-chunk-2">
-                <CardHeader className="pb-2">
-                  <CardDescription>This Month</CardDescription>
-                  <CardTitle className="text-4xl">$5,329</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="text-xs text-muted-foreground">
-                    +10% from last month
-                  </div>
-                </CardContent>
-                <CardFooter>
-                  <Progress value={12} aria-label="12% increase" />
-                </CardFooter>
-              </Card>
-            </div>
-            <Tabs defaultValue="week">
-              <div className="flex items-center">
-                <TabsList>
-                  <TabsTrigger value="week">Week</TabsTrigger>
-                  <TabsTrigger value="month">Month</TabsTrigger>
-                  <TabsTrigger value="year">Year</TabsTrigger>
-                </TabsList>
-                <div className="ml-auto flex items-center gap-2">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="h-7 gap-1 text-sm"
-                      >
-                        <ListFilter className="h-3.5 w-3.5" />
-                        <span className="sr-only sm:not-sr-only">Filter</span>
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuLabel>Filter by</DropdownMenuLabel>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuCheckboxItem checked>
-                        Fulfilled
-                      </DropdownMenuCheckboxItem>
-                      <DropdownMenuCheckboxItem>
-                        Declined
-                      </DropdownMenuCheckboxItem>
-                      <DropdownMenuCheckboxItem>
-                        Refunded
-                      </DropdownMenuCheckboxItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    className="h-7 gap-1 text-sm"
-                  >
-                    <File className="h-3.5 w-3.5" />
-                    <span className="sr-only sm:not-sr-only">Export</span>
-                  </Button>
-                </div>
-              </div>
-              <TabsContent value="week">
-                <Card x-chunk="dashboard-05-chunk-3">
-                  <CardHeader className="px-7">
-                    <CardTitle>Orders</CardTitle>
-                    <CardDescription>
-                      Recent orders from your store.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead>Customer</TableHead>
-                          <TableHead className="hidden sm:table-cell">
-                            Type
-                          </TableHead>
-                          <TableHead className="hidden sm:table-cell">
-                            Status
-                          </TableHead>
-                          <TableHead className="hidden md:table-cell">
-                            Date
-                          </TableHead>
-                          <TableHead className="text-right">Amount</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        <TableRow className="bg-accent">
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Olivia Smith</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              olivia@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Refund
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="outline">
-                              Declined
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-24
-                          </TableCell>
-                          <TableCell className="text-right">$150.00</TableCell>
-                        </TableRow>
-                        {/* <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow> */}
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Noah Williams</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              noah@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Subscription
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-25
-                          </TableCell>
-                          <TableCell className="text-right">$350.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Emma Brown</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              emma@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-26
-                          </TableCell>
-                          <TableCell className="text-right">$450.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Olivia Smith</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              olivia@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Refund
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="outline">
-                              Declined
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-24
-                          </TableCell>
-                          <TableCell className="text-right">$150.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Emma Brown</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              emma@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-26
-                          </TableCell>
-                          <TableCell className="text-right">$450.00</TableCell>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </CardContent>
-                </Card>
-              </TabsContent>
-            </Tabs>
-          </div>
-          <div>
-            <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
-              <CardHeader className="flex flex-row items-start bg-muted/50">
-                <div className="grid gap-0.5">
-                  <CardTitle className="group flex items-center gap-2 text-lg">
-                    Order Oe31b70H
-                    <Button
-                      size="icon"
-                      variant="outline"
-                      className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
-                    >
-                      <Copy className="h-3 w-3" />
-                      <span className="sr-only">Copy Order ID</span>
-                    </Button>
-                  </CardTitle>
-                  <CardDescription>Date: November 23, 2023</CardDescription>
-                </div>
-                <div className="ml-auto flex items-center gap-1">
-                  <Button size="sm" variant="outline" className="h-8 gap-1">
-                    <Truck className="h-3.5 w-3.5" />
-                    <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-                      Track Order
-                    </span>
-                  </Button>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button size="icon" variant="outline" className="h-8 w-8">
-                        <MoreVertical className="h-3.5 w-3.5" />
-                        <span className="sr-only">More</span>
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuItem>Edit</DropdownMenuItem>
-                      <DropdownMenuItem>Export</DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem>Trash</DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-              </CardHeader>
-              <CardContent className="p-6 text-sm">
-                <div className="grid gap-3">
-                  <div className="font-semibold">Order Details</div>
-                  <ul className="grid gap-3">
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">
-                        Glimmer Lamps x <span>2</span>
-                      </span>
-                      <span>$250.00</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">
-                        Aqua Filters x <span>1</span>
-                      </span>
-                      <span>$49.00</span>
-                    </li>
-                  </ul>
-                  <Separator className="my-2" />
-                  <ul className="grid gap-3">
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">Subtotal</span>
-                      <span>$299.00</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">Shipping</span>
-                      <span>$5.00</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">Tax</span>
-                      <span>$25.00</span>
-                    </li>
-                    <li className="flex items-center justify-between font-semibold">
-                      <span className="text-muted-foreground">Total</span>
-                      <span>$329.00</span>
-                    </li>
-                  </ul>
-                </div>
-                <Separator className="my-4" />
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-3">
-                    <div className="font-semibold">Shipping Information</div>
-                    <address className="grid gap-0.5 not-italic text-muted-foreground">
-                      <span>Liam Johnson</span>
-                      <span>1234 Main St.</span>
-                      <span>Anytown, CA 12345</span>
-                    </address>
-                  </div>
-                  <div className="grid auto-rows-max gap-3">
-                    <div className="font-semibold">Billing Information</div>
-                    <div className="text-muted-foreground">
-                      Same as shipping address
-                    </div>
-                  </div>
-                </div>
-                <Separator className="my-4" />
-                <div className="grid gap-3">
-                  <div className="font-semibold">Customer Information</div>
-                  <dl className="grid gap-3">
-                    <div className="flex items-center justify-between">
-                      <dt className="text-muted-foreground">Customer</dt>
-                      <dd>Liam Johnson</dd>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <dt className="text-muted-foreground">Email</dt>
-                      <dd>
-                        <a href="mailto:">liam@acme.com</a>
-                      </dd>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <dt className="text-muted-foreground">Phone</dt>
-                      <dd>
-                        <a href="tel:">+1 234 567 890</a>
-                      </dd>
-                    </div>
-                  </dl>
-                </div>
-                <Separator className="my-4" />
-                <div className="grid gap-3">
-                  <div className="font-semibold">Payment Information</div>
-                  <dl className="grid gap-3">
-                    <div className="flex items-center justify-between">
-                      <dt className="flex items-center gap-1 text-muted-foreground">
-                        <CreditCard className="h-4 w-4" />
-                        Visa
-                      </dt>
-                      <dd>**** **** **** 4532</dd>
-                    </div>
-                  </dl>
-                </div>
-              </CardContent>
-              <CardFooter className="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
-                <div className="text-xs text-muted-foreground">
-                  Updated <time dateTime="2023-11-23">November 23, 2023</time>
-                </div>
-                <Pagination className="ml-auto mr-0 w-auto">
-                  <PaginationContent>
-                    <PaginationItem>
-                      <Button size="icon" variant="outline" className="h-6 w-6">
-                        <ChevronLeft className="h-3.5 w-3.5" />
-                        <span className="sr-only">Previous Order</span>
-                      </Button>
-                    </PaginationItem>
-                    <PaginationItem>
-                      <Button size="icon" variant="outline" className="h-6 w-6">
-                        <ChevronRight className="h-3.5 w-3.5" />
-                        <span className="sr-only">Next Order</span>
-                      </Button>
-                    </PaginationItem>
-                  </PaginationContent>
-                </Pagination>
-              </CardFooter>
-            </Card>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/dashboard-06.tsx b/apps/www/__registry__/new-york/block/dashboard-06.tsx
deleted file mode 100644
index 0311c178a8e..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-06.tsx
+++ /dev/null
@@ -1,623 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-import {
-  File,
-  Home,
-  LineChart,
-  ListFilter,
-  MoreHorizontal,
-  Package,
-  Package2,
-  PanelLeft,
-  PlusCircle,
-  Search,
-  Settings,
-  ShoppingCart,
-  Users2,
-} from "lucide-react"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york/ui/tabs"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/ui/tooltip"
-
-export const description =
-  "An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions."
-
-export const iframeHeight = "820px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col bg-muted/40">
-      <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
-        <nav className="flex flex-col items-center gap-4 px-2 py-4">
-          <Link
-            href="#"
-            className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
-          >
-            <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Home className="h-5 w-5" />
-                <span className="sr-only">Dashboard</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Dashboard</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <ShoppingCart className="h-5 w-5" />
-                <span className="sr-only">Orders</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Orders</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Package className="h-5 w-5" />
-                <span className="sr-only">Products</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Products</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Users2 className="h-5 w-5" />
-                <span className="sr-only">Customers</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Customers</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <LineChart className="h-5 w-5" />
-                <span className="sr-only">Analytics</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Analytics</TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto flex flex-col items-center gap-4 px-2 py-4">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Settings className="h-5 w-5" />
-                <span className="sr-only">Settings</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Settings</TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button size="icon" variant="outline" className="sm:hidden">
-                <PanelLeft className="h-5 w-5" />
-                <span className="sr-only">Toggle Menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="sm:max-w-xs">
-              <nav className="grid gap-6 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
-                >
-                  <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Users2 className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Settings
-                </Link>
-              </nav>
-            </SheetContent>
-          </Sheet>
-          <Breadcrumb className="hidden md:flex">
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Dashboard</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Products</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>All Products</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="relative ml-auto flex-1 md:grow-0">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]"
-            />
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="overflow-hidden rounded-full"
-              >
-                <Image
-                  src="/placeholder-user.jpg"
-                  width={36}
-                  height={36}
-                  alt="Avatar"
-                  className="overflow-hidden rounded-full"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
-          <Tabs defaultValue="all">
-            <div className="flex items-center">
-              <TabsList>
-                <TabsTrigger value="all">All</TabsTrigger>
-                <TabsTrigger value="active">Active</TabsTrigger>
-                <TabsTrigger value="draft">Draft</TabsTrigger>
-                <TabsTrigger value="archived" className="hidden sm:flex">
-                  Archived
-                </TabsTrigger>
-              </TabsList>
-              <div className="ml-auto flex items-center gap-2">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm" className="h-7 gap-1">
-                      <ListFilter className="h-3.5 w-3.5" />
-                      <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                        Filter
-                      </span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuCheckboxItem checked>
-                      Active
-                    </DropdownMenuCheckboxItem>
-                    <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>
-                    <DropdownMenuCheckboxItem>
-                      Archived
-                    </DropdownMenuCheckboxItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-                <Button size="sm" variant="outline" className="h-7 gap-1">
-                  <File className="h-3.5 w-3.5" />
-                  <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                    Export
-                  </span>
-                </Button>
-                <Button size="sm" className="h-7 gap-1">
-                  <PlusCircle className="h-3.5 w-3.5" />
-                  <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                    Add Product
-                  </span>
-                </Button>
-              </div>
-            </div>
-            <TabsContent value="all">
-              <Card x-chunk="dashboard-06-chunk-0">
-                <CardHeader>
-                  <CardTitle>Products</CardTitle>
-                  <CardDescription>
-                    Manage your products and view their sales performance.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="hidden w-[100px] sm:table-cell">
-                          <span className="sr-only">Image</span>
-                        </TableHead>
-                        <TableHead>Name</TableHead>
-                        <TableHead>Status</TableHead>
-                        <TableHead>Price</TableHead>
-                        <TableHead className="hidden md:table-cell">
-                          Total Sales
-                        </TableHead>
-                        <TableHead className="hidden md:table-cell">
-                          Created at
-                        </TableHead>
-                        <TableHead>
-                          <span className="sr-only">Actions</span>
-                        </TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Laser Lemonade Machine
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Draft</Badge>
-                        </TableCell>
-                        <TableCell>$499.99</TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          25
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-07-12 10:42 AM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Hypernova Headphones
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell>$129.99</TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          100
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-10-18 03:21 PM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          AeroGlow Desk Lamp
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell>$39.99</TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          50
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-11-29 08:15 AM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          TechTonic Energy Drink
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="secondary">Draft</Badge>
-                        </TableCell>
-                        <TableCell>$2.99</TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          0
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-12-25 11:59 PM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Gamer Gear Pro Controller
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell>$59.99</TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          75
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2024-01-01 12:00 AM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Luminous VR Headset
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell>$199.99</TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          30
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2024-02-14 02:14 PM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                    </TableBody>
-                  </Table>
-                </CardContent>
-                <CardFooter>
-                  <div className="text-xs text-muted-foreground">
-                    Showing <strong>1-10</strong> of <strong>32</strong>{" "}
-                    products
-                  </div>
-                </CardFooter>
-              </Card>
-            </TabsContent>
-          </Tabs>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/dashboard-07.tsx b/apps/www/__registry__/new-york/block/dashboard-07.tsx
deleted file mode 100644
index bf65a018734..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-07.tsx
+++ /dev/null
@@ -1,610 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-import {
-  ChevronLeft,
-  Home,
-  LineChart,
-  Package,
-  Package2,
-  PanelLeft,
-  PlusCircle,
-  Search,
-  Settings,
-  ShoppingCart,
-  Upload,
-  Users2,
-} from "lucide-react"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-import { Textarea } from "@/registry/new-york/ui/textarea"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/ui/tooltip"
-
-export const description =
-  "A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images."
-
-export const iframeHeight = "1100px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col bg-muted/40">
-      <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
-        <nav className="flex flex-col items-center gap-4 px-2 py-4">
-          <Link
-            href="#"
-            className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
-          >
-            <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Home className="h-5 w-5" />
-                <span className="sr-only">Dashboard</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Dashboard</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <ShoppingCart className="h-5 w-5" />
-                <span className="sr-only">Orders</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Orders</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Package className="h-5 w-5" />
-                <span className="sr-only">Products</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Products</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Users2 className="h-5 w-5" />
-                <span className="sr-only">Customers</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Customers</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <LineChart className="h-5 w-5" />
-                <span className="sr-only">Analytics</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Analytics</TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto flex flex-col items-center gap-4 px-2 py-4">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Settings className="h-5 w-5" />
-                <span className="sr-only">Settings</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Settings</TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button size="icon" variant="outline" className="sm:hidden">
-                <PanelLeft className="h-5 w-5" />
-                <span className="sr-only">Toggle Menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="sm:max-w-xs">
-              <nav className="grid gap-6 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
-                >
-                  <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Users2 className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Settings
-                </Link>
-              </nav>
-            </SheetContent>
-          </Sheet>
-          <Breadcrumb className="hidden md:flex">
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Dashboard</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Products</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>Edit Product</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="relative ml-auto flex-1 md:grow-0">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]"
-            />
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="overflow-hidden rounded-full"
-              >
-                <Image
-                  src="/placeholder-user.jpg"
-                  width={36}
-                  height={36}
-                  alt="Avatar"
-                  className="overflow-hidden rounded-full"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
-          <div className="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
-            <div className="flex items-center gap-4">
-              <Button variant="outline" size="icon" className="h-7 w-7">
-                <ChevronLeft className="h-4 w-4" />
-                <span className="sr-only">Back</span>
-              </Button>
-              <h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
-                Pro Controller
-              </h1>
-              <Badge variant="outline" className="ml-auto sm:ml-0">
-                In stock
-              </Badge>
-              <div className="hidden items-center gap-2 md:ml-auto md:flex">
-                <Button variant="outline" size="sm">
-                  Discard
-                </Button>
-                <Button size="sm">Save Product</Button>
-              </div>
-            </div>
-            <div className="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
-              <div className="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
-                <Card x-chunk="dashboard-07-chunk-0">
-                  <CardHeader>
-                    <CardTitle>Product Details</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-6">
-                      <div className="grid gap-3">
-                        <Label htmlFor="name">Name</Label>
-                        <Input
-                          id="name"
-                          type="text"
-                          className="w-full"
-                          defaultValue="Gamer Gear Pro Controller"
-                        />
-                      </div>
-                      <div className="grid gap-3">
-                        <Label htmlFor="description">Description</Label>
-                        <Textarea
-                          id="description"
-                          defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
-                          className="min-h-32"
-                        />
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-                <Card x-chunk="dashboard-07-chunk-1">
-                  <CardHeader>
-                    <CardTitle>Stock</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead className="w-[100px]">SKU</TableHead>
-                          <TableHead>Stock</TableHead>
-                          <TableHead>Price</TableHead>
-                          <TableHead className="w-[100px]">Size</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        <TableRow>
-                          <TableCell className="font-semibold">
-                            GGPC-001
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="stock-1" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="stock-1"
-                              type="number"
-                              defaultValue="100"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="price-1" className="sr-only">
-                              Price
-                            </Label>
-                            <Input
-                              id="price-1"
-                              type="number"
-                              defaultValue="99.99"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <ToggleGroup
-                              type="single"
-                              defaultValue="s"
-                              variant="outline"
-                            >
-                              <ToggleGroupItem value="s">S</ToggleGroupItem>
-                              <ToggleGroupItem value="m">M</ToggleGroupItem>
-                              <ToggleGroupItem value="l">L</ToggleGroupItem>
-                            </ToggleGroup>
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-semibold">
-                            GGPC-002
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="stock-2" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="stock-2"
-                              type="number"
-                              defaultValue="143"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="price-2" className="sr-only">
-                              Price
-                            </Label>
-                            <Input
-                              id="price-2"
-                              type="number"
-                              defaultValue="99.99"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <ToggleGroup
-                              type="single"
-                              defaultValue="m"
-                              variant="outline"
-                            >
-                              <ToggleGroupItem value="s">S</ToggleGroupItem>
-                              <ToggleGroupItem value="m">M</ToggleGroupItem>
-                              <ToggleGroupItem value="l">L</ToggleGroupItem>
-                            </ToggleGroup>
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-semibold">
-                            GGPC-003
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="stock-3" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="stock-3"
-                              type="number"
-                              defaultValue="32"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="price-3" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="price-3"
-                              type="number"
-                              defaultValue="99.99"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <ToggleGroup
-                              type="single"
-                              defaultValue="s"
-                              variant="outline"
-                            >
-                              <ToggleGroupItem value="s">S</ToggleGroupItem>
-                              <ToggleGroupItem value="m">M</ToggleGroupItem>
-                              <ToggleGroupItem value="l">L</ToggleGroupItem>
-                            </ToggleGroup>
-                          </TableCell>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </CardContent>
-                  <CardFooter className="justify-center border-t p-4">
-                    <Button size="sm" variant="ghost" className="gap-1">
-                      <PlusCircle className="h-3.5 w-3.5" />
-                      Add Variant
-                    </Button>
-                  </CardFooter>
-                </Card>
-                <Card x-chunk="dashboard-07-chunk-2">
-                  <CardHeader>
-                    <CardTitle>Product Category</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-6 sm:grid-cols-3">
-                      <div className="grid gap-3">
-                        <Label htmlFor="category">Category</Label>
-                        <Select>
-                          <SelectTrigger
-                            id="category"
-                            aria-label="Select category"
-                          >
-                            <SelectValue placeholder="Select category" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="clothing">Clothing</SelectItem>
-                            <SelectItem value="electronics">
-                              Electronics
-                            </SelectItem>
-                            <SelectItem value="accessories">
-                              Accessories
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                      <div className="grid gap-3">
-                        <Label htmlFor="subcategory">
-                          Subcategory (optional)
-                        </Label>
-                        <Select>
-                          <SelectTrigger
-                            id="subcategory"
-                            aria-label="Select subcategory"
-                          >
-                            <SelectValue placeholder="Select subcategory" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="t-shirts">T-Shirts</SelectItem>
-                            <SelectItem value="hoodies">Hoodies</SelectItem>
-                            <SelectItem value="sweatshirts">
-                              Sweatshirts
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-              <div className="grid auto-rows-max items-start gap-4 lg:gap-8">
-                <Card x-chunk="dashboard-07-chunk-3">
-                  <CardHeader>
-                    <CardTitle>Product Status</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-6">
-                      <div className="grid gap-3">
-                        <Label htmlFor="status">Status</Label>
-                        <Select>
-                          <SelectTrigger id="status" aria-label="Select status">
-                            <SelectValue placeholder="Select status" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="draft">Draft</SelectItem>
-                            <SelectItem value="published">Active</SelectItem>
-                            <SelectItem value="archived">Archived</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-                <Card
-                  className="overflow-hidden"
-                  x-chunk="dashboard-07-chunk-4"
-                >
-                  <CardHeader>
-                    <CardTitle>Product Images</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-2">
-                      <Image
-                        alt="Product image"
-                        className="aspect-square w-full rounded-md object-cover"
-                        height="300"
-                        src="/placeholder.svg"
-                        width="300"
-                      />
-                      <div className="grid grid-cols-3 gap-2">
-                        <button>
-                          <Image
-                            alt="Product image"
-                            className="aspect-square w-full rounded-md object-cover"
-                            height="84"
-                            src="/placeholder.svg"
-                            width="84"
-                          />
-                        </button>
-                        <button>
-                          <Image
-                            alt="Product image"
-                            className="aspect-square w-full rounded-md object-cover"
-                            height="84"
-                            src="/placeholder.svg"
-                            width="84"
-                          />
-                        </button>
-                        <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
-                          <Upload className="h-4 w-4 text-muted-foreground" />
-                          <span className="sr-only">Upload</span>
-                        </button>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-                <Card x-chunk="dashboard-07-chunk-5">
-                  <CardHeader>
-                    <CardTitle>Archive Product</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div></div>
-                    <Button size="sm" variant="secondary">
-                      Archive Product
-                    </Button>
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
-            <div className="flex items-center justify-center gap-2 md:hidden">
-              <Button variant="outline" size="sm">
-                Discard
-              </Button>
-              <Button size="sm">Save Product</Button>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/login-01.tsx b/apps/www/__registry__/new-york/block/login-01.tsx
deleted file mode 100644
index 005ae4a9b60..00000000000
--- a/apps/www/__registry__/new-york/block/login-01.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { LoginForm } from "@/registry/new-york/block/login-01/components/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>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/login-01/page.tsx b/apps/www/__registry__/new-york/block/login-01/page.tsx
deleted file mode 100644
index 005ae4a9b60..00000000000
--- a/apps/www/__registry__/new-york/block/login-01/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { LoginForm } from "@/registry/new-york/block/login-01/components/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>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/sidebar-01.tsx b/apps/www/__registry__/new-york/block/sidebar-01.tsx
deleted file mode 100644
index 3e39cd9948b..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-01.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar"
-import {
-  SidebarLayout,
-  SidebarTrigger,
-} from "@/registry/new-york/block/sidebar-01/ui/sidebar"
-
-export const iframeHeight = "870px"
-
-export const containerClassName = "w-full h-full"
-
-export default async function Page() {
-  const { cookies } = await import("next/headers")
-  return (
-    <SidebarLayout
-      defaultOpen={cookies().get("sidebar:state")?.value === "true"}
-    >
-      <AppSidebar />
-      <main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
-        <div className="h-full rounded-md border-2 border-dashed p-2">
-          <SidebarTrigger />
-        </div>
-      </main>
-    </SidebarLayout>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/sidebar-01/page.tsx b/apps/www/__registry__/new-york/block/sidebar-01/page.tsx
deleted file mode 100644
index 3e39cd9948b..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-01/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar"
-import {
-  SidebarLayout,
-  SidebarTrigger,
-} from "@/registry/new-york/block/sidebar-01/ui/sidebar"
-
-export const iframeHeight = "870px"
-
-export const containerClassName = "w-full h-full"
-
-export default async function Page() {
-  const { cookies } = await import("next/headers")
-  return (
-    <SidebarLayout
-      defaultOpen={cookies().get("sidebar:state")?.value === "true"}
-    >
-      <AppSidebar />
-      <main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
-        <div className="h-full rounded-md border-2 border-dashed p-2">
-          <SidebarTrigger />
-        </div>
-      </main>
-    </SidebarLayout>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/sidebar-16/page.tsx b/apps/www/__registry__/new-york/block/sidebar-16/page.tsx
new file mode 100644
index 00000000000..d639e07c2ee
--- /dev/null
+++ b/apps/www/__registry__/new-york/block/sidebar-16/page.tsx
@@ -0,0 +1,134 @@
+"use client"
+
+import * as React from "react"
+import { Command, Sidebar } from "lucide-react"
+
+import { AppSidebar } from "@/registry/new-york/block/sidebar-16/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Button } from "@/registry/new-york/ui/button"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with site header navigation."
+
+const HEADER_HEIGHT = "4rem"
+
+export default function Page() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <div
+      style={
+        {
+          "--header-height": HEADER_HEIGHT,
+        } as React.CSSProperties
+      }
+    >
+      <header className="bg-sidebar sticky h-[--header-height] top-0 z-50 w-full border-b border-border/40  backdrop-blur">
+        <div className="flex h-14 items-center px-4">
+          <div className="mr-4 hidden md:flex">
+            <Button
+              className="hidden md:flex"
+              variant="ghost"
+              size="icon"
+              onClick={() => setOpen(!open)}
+            >
+              <Sidebar />
+            </Button>
+            <a href="#" className="mr-4 flex items-center gap-2 lg:mr-6">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <Command className="size-4" />
+              </div>
+            </a>
+            <nav className="flex items-center gap-4 text-sm xl:gap-6">
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Docs
+              </a>
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Components
+              </a>
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Blocks
+              </a>
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Charts
+              </a>
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Themes
+              </a>
+              <a
+                href="#"
+                className="transition-colors hover:text-foreground/80"
+              >
+                Colors
+              </a>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <SidebarProvider open={open} onOpenChange={setOpen}>
+        <AppSidebar />
+
+        <SidebarInset>
+          <header className=" flex shrink-0 items-center gap-2 border-b py-2">
+            <div className="flex items-center gap-2 px-4 py-2">
+              <div className="flex md:hidden items-center gap-2">
+                <SidebarTrigger />
+                <Separator orientation="vertical" className="mr-2 h-4" />
+              </div>
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink href="#">
+                      Building Your Application
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+          </header>
+          <div className="flex flex-1 flex-col gap-4 p-4">
+            <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+              <div className="aspect-video rounded-xl bg-muted/50" />
+              <div className="aspect-video rounded-xl bg-muted/50" />
+              <div className="aspect-video rounded-xl bg-muted/50" />
+            </div>
+            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/app-01/page.tsx b/apps/www/__registry__/new-york/blocks/app-01/page.tsx
new file mode 100644
index 00000000000..cd86b7dc4f0
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/app-01/page.tsx
@@ -0,0 +1,27 @@
+import { AddTaskForm } from "@/registry/new-york/blocks/app-01/components/add-task-form"
+import { TasksList } from "@/registry/new-york/blocks/app-01/components/tasks-list"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+
+export default function AppPage() {
+  return (
+    <div className="h-screen flex flex-col items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Add Task</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <TasksList />
+        </CardContent>
+        <CardFooter>
+          <AddTaskForm />
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/button-01/page.tsx b/apps/www/__registry__/new-york/blocks/button-01/page.tsx
new file mode 100644
index 00000000000..da382c533c7
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/button-01/page.tsx
@@ -0,0 +1,9 @@
+import { AmazingButton } from "@/registry/new-york/blocks/button-01/components/amazing-button"
+
+export default function Page() {
+  return (
+    <div className="h-svh flex items-center justify-center">
+      <AmazingButton />
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-01.tsx b/apps/www/__registry__/new-york/blocks/calendar-01.tsx
new file mode 100644
index 00000000000..6ec892f2670
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-01.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar01() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-02.tsx b/apps/www/__registry__/new-york/blocks/calendar-02.tsx
new file mode 100644
index 00000000000..ec4099fc806
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-02.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar02() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      numberOfMonths={2}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-03.tsx b/apps/www/__registry__/new-york/blocks/calendar-03.tsx
new file mode 100644
index 00000000000..fa06eb391f9
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-03.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar03() {
+  const [dates, setDates] = React.useState<Date[]>([
+    new Date(2025, 5, 12),
+    new Date(2025, 6, 24),
+  ])
+
+  return (
+    <Calendar
+      mode="multiple"
+      numberOfMonths={2}
+      defaultMonth={dates[0]}
+      required
+      selected={dates}
+      onSelect={setDates}
+      max={5}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-04.tsx b/apps/www/__registry__/new-york/blocks/calendar-04.tsx
new file mode 100644
index 00000000000..d3f823baf8d
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-04.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar04() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 9),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-05.tsx b/apps/www/__registry__/new-york/blocks/calendar-05.tsx
new file mode 100644
index 00000000000..ec01627f237
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-05.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar05() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 6, 15),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-06.tsx b/apps/www/__registry__/new-york/blocks/calendar-06.tsx
new file mode 100644
index 00000000000..9d8cc09c9db
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-06.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar06() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={1}
+        min={5}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        A minimum of 5 days is required
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-07.tsx b/apps/www/__registry__/new-york/blocks/calendar-07.tsx
new file mode 100644
index 00000000000..26651effb9d
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-07.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar07() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 18),
+    to: new Date(2025, 6, 7),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        min={2}
+        max={20}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        Your stay must be between 2 and 20 nights
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-08.tsx b/apps/www/__registry__/new-york/blocks/calendar-08.tsx
new file mode 100644
index 00000000000..094f975b2da
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-08.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar08() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={{
+        before: new Date(2025, 5, 12),
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-09.tsx b/apps/www/__registry__/new-york/blocks/calendar-09.tsx
new file mode 100644
index 00000000000..f46cb5b13e1
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-09.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar09() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      disabled={{ dayOfWeek: [0, 6] }}
+      className="rounded-lg border shadow-sm"
+      excludeDisabled
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-10.tsx b/apps/www/__registry__/new-york/blocks/calendar-10.tsx
new file mode 100644
index 00000000000..05e48d53007
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-10.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+
+export default function Calendar10() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Card>
+      <CardHeader className="relative">
+        <CardTitle>Appointment</CardTitle>
+        <CardDescription>Find a date</CardDescription>
+        <Button
+          size="sm"
+          variant="outline"
+          className="absolute right-4 top-4"
+          onClick={() => {
+            setMonth(new Date())
+            setDate(new Date())
+          }}
+        >
+          Today
+        </Button>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="single"
+          month={month}
+          onMonthChange={setMonth}
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-11.tsx b/apps/www/__registry__/new-york/blocks/calendar-11.tsx
new file mode 100644
index 00000000000..10a58ba3cde
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-11.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar11() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        startMonth={new Date(2025, 5, 1)}
+        endMonth={new Date(2025, 6, 31)}
+        disableNavigation
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        We are open in June and July only.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-12.tsx b/apps/www/__registry__/new-york/blocks/calendar-12.tsx
new file mode 100644
index 00000000000..89e8b422e10
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-12.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+import { enUS, es } from "react-day-picker/locale"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+const localizedStrings = {
+  en: {
+    title: "Book an appointment",
+    description: "Select the dates for your appointment",
+  },
+  es: {
+    title: "Reserva una cita",
+    description: "Selecciona las fechas para tu cita",
+  },
+} as const
+
+export default function Calendar12() {
+  const [locale, setLocale] =
+    React.useState<keyof typeof localizedStrings>("es")
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 8, 9),
+    to: new Date(2025, 8, 17),
+  })
+
+  return (
+    <Card>
+      <CardHeader className="relative border-b">
+        <CardTitle>{localizedStrings[locale].title}</CardTitle>
+        <CardDescription>
+          {localizedStrings[locale].description}
+        </CardDescription>
+        <Select
+          value={locale}
+          onValueChange={(value) =>
+            setLocale(value as keyof typeof localizedStrings)
+          }
+        >
+          <SelectTrigger className="absolute right-4 top-4 w-[100px]">
+            <SelectValue placeholder="Language" />
+          </SelectTrigger>
+          <SelectContent align="end">
+            <SelectItem value="es">Español</SelectItem>
+            <SelectItem value="en">English</SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <Calendar
+          mode="range"
+          selected={dateRange}
+          onSelect={setDateRange}
+          defaultMonth={dateRange?.from}
+          numberOfMonths={2}
+          locale={locale === "es" ? es : enUS}
+          className="bg-transparent p-0"
+          buttonVariant="outline"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-13.tsx b/apps/www/__registry__/new-york/blocks/calendar-13.tsx
new file mode 100644
index 00000000000..fbe5c58f773
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-13.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export default function Calendar13() {
+  const [dropdown, setDropdown] =
+    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
+      "dropdown"
+    )
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        captionLayout={dropdown}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="dropdown" className="px-1">
+          Dropdown
+        </Label>
+        <Select
+          value={dropdown}
+          onValueChange={(value) =>
+            setDropdown(
+              value as React.ComponentProps<typeof Calendar>["captionLayout"]
+            )
+          }
+        >
+          <SelectTrigger id="dropdown" className="bg-background w-full">
+            <SelectValue placeholder="Dropdown" />
+          </SelectTrigger>
+          <SelectContent align="center">
+            <SelectItem value="dropdown">Month and Year</SelectItem>
+            <SelectItem value="dropdown-months">Month Only</SelectItem>
+            <SelectItem value="dropdown-years">Year Only</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-14.tsx b/apps/www/__registry__/new-york/blocks/calendar-14.tsx
new file mode 100644
index 00000000000..41be778b9fa
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-14.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar14() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const bookedDates = Array.from(
+    { length: 12 },
+    (_, i) => new Date(2025, 5, 15 + i)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={bookedDates}
+      modifiers={{
+        booked: bookedDates,
+      }}
+      modifiersClassNames={{
+        booked: "[&>button]:line-through opacity-100",
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-15.tsx b/apps/www/__registry__/new-york/blocks/calendar-15.tsx
new file mode 100644
index 00000000000..8031bd2cedd
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-15.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar15() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+      showWeekNumber
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-16.tsx b/apps/www/__registry__/new-york/blocks/calendar-16.tsx
new file mode 100644
index 00000000000..638ec8ff21d
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-16.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Clock2Icon } from "lucide-react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar16() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col gap-6 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-from">Start Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-from"
+              type="time"
+              step="1"
+              defaultValue="10:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-to">End Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-to"
+              type="time"
+              step="1"
+              defaultValue="12:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-17.tsx b/apps/www/__registry__/new-york/blocks/calendar-17.tsx
new file mode 100644
index 00000000000..5ac8cbc4f0e
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-17.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar17() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0 [--cell-size:2.8rem]"
+        />
+      </CardContent>
+      <CardFooter className="*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4">
+        <div className="flex-1">
+          <Label htmlFor="time-from" className="sr-only">
+            Start Time
+          </Label>
+          <Input
+            id="time-from"
+            type="time"
+            step="1"
+            defaultValue="10:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <span>-</span>
+        <div className="flex-1">
+          <Label htmlFor="time-to" className="sr-only">
+            End Time
+          </Label>
+          <Input
+            id="time-to"
+            type="time"
+            step="1"
+            defaultValue="12:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-18.tsx b/apps/www/__registry__/new-york/blocks/calendar-18.tsx
new file mode 100644
index 00000000000..d647923405f
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-18.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar18() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      buttonVariant="ghost"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-19.tsx b/apps/www/__registry__/new-york/blocks/calendar-19.tsx
new file mode 100644
index 00000000000..54a62dd7e95
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-19.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { addDays } from "date-fns"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+export default function Calendar19() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="max-w-[300px] py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          defaultMonth={date}
+          className="bg-transparent p-0 [--cell-size:2.375rem]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t px-4 pb-0 pt-4">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-20.tsx b/apps/www/__registry__/new-york/blocks/calendar-20.tsx
new file mode 100644
index 00000000000..2a2bb3f5eb6
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-20.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+export default function Calendar20() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00")
+  const timeSlots = Array.from({ length: 37 }, (_, i) => {
+    const totalMinutes = i * 15
+    const hour = Math.floor(totalMinutes / 60) + 9
+    const minute = totalMinutes % 60
+    return `${hour.toString().padStart(2, "0")}:${minute
+      .toString()
+      .padStart(2, "0")}`
+  })
+
+  const bookedDates = Array.from(
+    { length: 3 },
+    (_, i) => new Date(2025, 5, 17 + i)
+  )
+
+  return (
+    <Card className="gap-0 p-0">
+      <CardContent className="relative p-0 md:pr-48">
+        <div className="p-6">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            defaultMonth={date}
+            disabled={bookedDates}
+            showOutsideDays={false}
+            modifiers={{
+              booked: bookedDates,
+            }}
+            modifiersClassNames={{
+              booked: "[&>button]:line-through opacity-100",
+            }}
+            className="bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]"
+            formatters={{
+              formatWeekdayName: (date) => {
+                return date.toLocaleString("en-US", { weekday: "short" })
+              },
+            }}
+          />
+        </div>
+        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0">
+          <div className="grid gap-2">
+            {timeSlots.map((time) => (
+              <Button
+                key={time}
+                variant={selectedTime === time ? "default" : "outline"}
+                onClick={() => setSelectedTime(time)}
+                className="w-full shadow-none"
+              >
+                {time}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-4 border-t !py-5 px-6 md:flex-row">
+        <div className="text-sm">
+          {date && selectedTime ? (
+            <>
+              Your meeting is booked for{" "}
+              <span className="font-medium">
+                {" "}
+                {date?.toLocaleDateString("en-US", {
+                  weekday: "long",
+                  day: "numeric",
+                  month: "long",
+                })}{" "}
+              </span>
+              at <span className="font-medium">{selectedTime}</span>.
+            </>
+          ) : (
+            <>Select a date and time for your meeting.</>
+          )}
+        </div>
+        <Button
+          disabled={!date || !selectedTime}
+          className="w-full md:ml-auto md:w-auto"
+          variant="outline"
+        >
+          Continue
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-21.tsx b/apps/www/__registry__/new-york/blocks/calendar-21.tsx
new file mode 100644
index 00000000000..9016b91b8ca
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-21.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { DateRange } from "react-day-picker"
+
+import { Calendar, CalendarDayButton } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar21() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 17),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={range?.from}
+      selected={range}
+      onSelect={setRange}
+      numberOfMonths={1}
+      captionLayout="dropdown"
+      className="rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      formatters={{
+        formatMonthDropdown: (date) => {
+          return date.toLocaleString("default", { month: "long" })
+        },
+      }}
+      components={{
+        DayButton: ({ children, modifiers, day, ...props }) => {
+          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+          return (
+            <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+              {children}
+              {!modifiers.outside && <span>{isWeekend ? "$220" : "$100"}</span>}
+            </CalendarDayButton>
+          )
+        },
+      }}
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-22.tsx b/apps/www/__registry__/new-york/blocks/calendar-22.tsx
new file mode 100644
index 00000000000..fbba5c925ac
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-22.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar22() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-23.tsx b/apps/www/__registry__/new-york/blocks/calendar-23.tsx
new file mode 100644
index 00000000000..2702cd90fd6
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-23.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar23() {
+  const [range, setRange] = React.useState<DateRange | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-24.tsx b/apps/www/__registry__/new-york/blocks/calendar-24.tsx
new file mode 100644
index 00000000000..02640d5936f
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-24.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar24() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-32 justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="time" className="px-1">
+          Time
+        </Label>
+        <Input
+          type="time"
+          id="time"
+          step="1"
+          defaultValue="10:30:00"
+          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-25.tsx b/apps/www/__registry__/new-york/blocks/calendar-25.tsx
new file mode 100644
index 00000000000..5ed864df3e7
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-25.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar25() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-full justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-26.tsx b/apps/www/__registry__/new-york/blocks/calendar-26.tsx
new file mode 100644
index 00000000000..166cd464982
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-26.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar26() {
+  const [openFrom, setOpenFrom] = React.useState(false)
+  const [openTo, setOpenTo] = React.useState(false)
+  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [dateTo, setDateTo] = React.useState<Date | undefined>(
+    new Date("2025-06-03")
+  )
+
+  return (
+    <div className="flex w-full max-w-64 min-w-0 flex-col gap-6">
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-from" className="px-1">
+            Check-in
+          </Label>
+          <Popover open={openFrom} onOpenChange={setOpenFrom}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-from"
+                className="w-full justify-between font-normal"
+              >
+                {dateFrom
+                  ? dateFrom.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateFrom}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateFrom(date)
+                  setOpenFrom(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="invisible px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-to" className="px-1">
+            Check-out
+          </Label>
+          <Popover open={openTo} onOpenChange={setOpenTo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-to"
+                className="w-full justify-between font-normal"
+              >
+                {dateTo
+                  ? dateTo.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateTo}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateTo(date)
+                  setOpenTo(false)
+                }}
+                disabled={dateFrom && { before: dateFrom }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="invisible px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-27.tsx b/apps/www/__registry__/new-york/blocks/calendar-27.tsx
new file mode 100644
index 00000000000..89c65876e2c
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-27.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+const chartData = [
+  { date: "2025-06-01", visitors: 178 },
+  { date: "2025-06-02", visitors: 470 },
+  { date: "2025-06-03", visitors: 103 },
+  { date: "2025-06-04", visitors: 439 },
+  { date: "2025-06-05", visitors: 88 },
+  { date: "2025-06-06", visitors: 294 },
+  { date: "2025-06-07", visitors: 323 },
+  { date: "2025-06-08", visitors: 385 },
+  { date: "2025-06-09", visitors: 438 },
+  { date: "2025-06-10", visitors: 155 },
+  { date: "2025-06-11", visitors: 92 },
+  { date: "2025-06-12", visitors: 492 },
+  { date: "2025-06-13", visitors: 81 },
+  { date: "2025-06-14", visitors: 426 },
+  { date: "2025-06-15", visitors: 307 },
+  { date: "2025-06-16", visitors: 371 },
+  { date: "2025-06-17", visitors: 475 },
+  { date: "2025-06-18", visitors: 107 },
+  { date: "2025-06-19", visitors: 341 },
+  { date: "2025-06-20", visitors: 408 },
+  { date: "2025-06-21", visitors: 169 },
+  { date: "2025-06-22", visitors: 317 },
+  { date: "2025-06-23", visitors: 480 },
+  { date: "2025-06-24", visitors: 132 },
+  { date: "2025-06-25", visitors: 141 },
+  { date: "2025-06-26", visitors: 434 },
+  { date: "2025-06-27", visitors: 448 },
+  { date: "2025-06-28", visitors: 149 },
+  { date: "2025-06-29", visitors: 103 },
+  { date: "2025-06-30", visitors: 446 },
+]
+
+const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export default function Calendar27() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 5),
+    to: new Date(2025, 5, 20),
+  })
+  const filteredData = React.useMemo(() => {
+    if (!range?.from && !range?.to) {
+      return chartData
+    }
+
+    return chartData.filter((item) => {
+      const date = new Date(item.date)
+      return date >= range.from! && date <= range.to!
+    })
+  }, [range])
+
+  return (
+    <Card className="@container/card w-full max-w-xl">
+      <CardHeader className="@md/card:grid relative flex flex-col border-b">
+        <CardTitle>Web Analytics</CardTitle>
+        <CardDescription>
+          Showing total visitors for this month.
+        </CardDescription>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="absolute right-4 top-4">
+              <CalendarIcon />
+              {range?.from && range?.to
+                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+                : "June 2025"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              className="w-full"
+              mode="range"
+              defaultMonth={range?.from}
+              selected={range}
+              onSelect={setRange}
+              disableNavigation
+              startMonth={range?.from}
+              fixedWeeks
+              showOutsideDays
+              disabled={{
+                after: new Date(2025, 5, 31),
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+      <CardContent className="px-4">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={filteredData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={20}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="visitors"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey="visitors" fill={`var(--color-visitors)`} radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="border-t pt-6">
+        <div className="text-sm">
+          You had{" "}
+          <span className="font-semibold">{total.toLocaleString()}</span>{" "}
+          visitors for the month of June.
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-28.tsx b/apps/www/__registry__/new-york/blocks/calendar-28.tsx
new file mode 100644
index 00000000000..40b63bc2e76
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-28.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+function isValidDate(date: Date | undefined) {
+  if (!date) {
+    return false
+  }
+  return !isNaN(date.getTime())
+}
+
+export default function Calendar28() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+  const [value, setValue] = React.useState(formatDate(date))
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Subscription Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="June 01, 2025"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            const date = new Date(e.target.value)
+            setValue(e.target.value)
+            if (isValidDate(date)) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto overflow-hidden p-0"
+            align="end"
+            alignOffset={-8}
+            sideOffset={10}
+          >
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-29.tsx b/apps/www/__registry__/new-york/blocks/calendar-29.tsx
new file mode 100644
index 00000000000..a08ffa1b1db
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-29.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { parseDate } from "chrono-node"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+export default function Calendar29() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("In 2 days")
+  const [date, setDate] = React.useState<Date | undefined>(
+    parseDate(value) || undefined
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Schedule Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="Tomorrow or next week"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            setValue(e.target.value)
+            const date = parseDate(e.target.value)
+            if (date) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="text-muted-foreground px-1 text-sm">
+        Your post will be published on{" "}
+        <span className="font-medium">{formatDate(date)}</span>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-30.tsx b/apps/www/__registry__/new-york/blocks/calendar-30.tsx
new file mode 100644
index 00000000000..05b5a9ae9f9
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-30.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar30() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? formatDateRange(range.from, range.to, {
+                  includeTime: false,
+                })
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-31.tsx b/apps/www/__registry__/new-york/blocks/calendar-31.tsx
new file mode 100644
index 00000000000..c4d3844f9e2
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-31.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+const events = [
+  {
+    title: "Team Sync Meeting",
+    from: "2025-06-12T09:00:00",
+    to: "2025-06-12T10:00:00",
+  },
+  {
+    title: "Design Review",
+    from: "2025-06-12T11:30:00",
+    to: "2025-06-12T12:30:00",
+  },
+  {
+    title: "Client Presentation",
+    from: "2025-06-12T14:00:00",
+    to: "2025-06-12T15:00:00",
+  },
+]
+
+export default function Calendar31() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+          required
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full items-center justify-between px-1">
+          <div className="text-sm font-medium">
+            {date?.toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+            })}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            title="Add Event"
+          >
+            <PlusIcon />
+            <span className="sr-only">Add Event</span>
+          </Button>
+        </div>
+        <div className="flex w-full flex-col gap-2">
+          {events.map((event) => (
+            <div
+              key={event.title}
+              className="bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full"
+            >
+              <div className="font-medium">{event.title}</div>
+              <div className="text-muted-foreground text-xs">
+                {formatDateRange(new Date(event.from), new Date(event.to))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/calendar-32.tsx b/apps/www/__registry__/new-york/blocks/calendar-32.tsx
new file mode 100644
index 00000000000..21c8f5e160c
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/calendar-32.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { CalendarPlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar32() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <CalendarPlusIcon />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="w-auto overflow-hidden p-0">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select date</DrawerTitle>
+            <DrawerDescription>Set your date of birth</DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
+          />
+        </DrawerContent>
+      </Drawer>
+      <div className="text-muted-foreground px-1 text-sm">
+        This example works best on mobile.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/block/chart-area-axes.tsx b/apps/www/__registry__/new-york/blocks/chart-area-axes.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-axes.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-axes.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-default.tsx b/apps/www/__registry__/new-york/blocks/chart-area-default.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-default.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-default.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-gradient.tsx b/apps/www/__registry__/new-york/blocks/chart-area-gradient.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-gradient.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-gradient.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-icons.tsx b/apps/www/__registry__/new-york/blocks/chart-area-icons.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-icons.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-icons.tsx
diff --git a/apps/www/__registry__/new-york/blocks/chart-area-interactive.tsx b/apps/www/__registry__/new-york/blocks/chart-area-interactive.tsx
new file mode 100644
index 00000000000..cd8e7e6b288
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const [timeRange, setTimeRange] = React.useState("90d")
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card>
+      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
+        <div className="grid flex-1 gap-1 text-center sm:text-left">
+          <CardTitle>Area Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <Select value={timeRange} onValueChange={setTimeRange}>
+          <SelectTrigger
+            className="w-[160px] rounded-lg sm:ml-auto"
+            aria-label="Select a value"
+          >
+            <SelectValue placeholder="Last 3 months" />
+          </SelectTrigger>
+          <SelectContent className="rounded-xl">
+            <SelectItem value="90d" className="rounded-lg">
+              Last 3 months
+            </SelectItem>
+            <SelectItem value="30d" className="rounded-lg">
+              Last 30 days
+            </SelectItem>
+            <SelectItem value="7d" className="rounded-lg">
+              Last 7 days
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/block/chart-area-legend.tsx b/apps/www/__registry__/new-york/blocks/chart-area-legend.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-legend.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-legend.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-linear.tsx b/apps/www/__registry__/new-york/blocks/chart-area-linear.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-linear.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-linear.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-stacked-expand.tsx b/apps/www/__registry__/new-york/blocks/chart-area-stacked-expand.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-stacked-expand.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-stacked-expand.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-stacked.tsx b/apps/www/__registry__/new-york/blocks/chart-area-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-stacked.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-stacked.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-step.tsx b/apps/www/__registry__/new-york/blocks/chart-area-step.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-step.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-step.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-active.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-active.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-active.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-active.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-default.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-default.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-default.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-default.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-horizontal.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-horizontal.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-horizontal.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-horizontal.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-interactive.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-interactive.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-label-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-label-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-label-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-label.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-label.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-label.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-label.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-mixed.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-mixed.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-mixed.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-mixed.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-multiple.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-multiple.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-multiple.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-negative.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-negative.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-negative.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-negative.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-stacked.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-stacked.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-stacked.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-default.tsx b/apps/www/__registry__/new-york/blocks/chart-line-default.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-default.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-default.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-dots-colors.tsx b/apps/www/__registry__/new-york/blocks/chart-line-dots-colors.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-dots-colors.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-dots-colors.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-dots-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-line-dots-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-dots-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-dots-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-dots.tsx b/apps/www/__registry__/new-york/blocks/chart-line-dots.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-dots.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-dots.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-interactive.tsx b/apps/www/__registry__/new-york/blocks/chart-line-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-interactive.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-interactive.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-label-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-line-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-label-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-label-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-label.tsx b/apps/www/__registry__/new-york/blocks/chart-line-label.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-label.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-label.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-linear.tsx b/apps/www/__registry__/new-york/blocks/chart-line-linear.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-linear.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-linear.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-multiple.tsx b/apps/www/__registry__/new-york/blocks/chart-line-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-multiple.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-multiple.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-step.tsx b/apps/www/__registry__/new-york/blocks/chart-line-step.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-step.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-step.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-donut-active.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-donut-active.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-donut-active.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-donut-active.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-donut-text.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-donut-text.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-donut-text.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-donut-text.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-donut.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-donut.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-donut.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-donut.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-interactive.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-interactive.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-interactive.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-label-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-label-list.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-label-list.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-label-list.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-label.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-label.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-label.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-label.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-legend.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-legend.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-legend.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-legend.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-separator-none.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-separator-none.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-separator-none.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-separator-none.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-simple.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-simple.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-simple.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-simple.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-stacked.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-stacked.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-stacked.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-default.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-default.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-default.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-default.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-dots.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-dots.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-dots.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-dots.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-circle-fill.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-circle-fill.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-circle-fill.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-circle-fill.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-circle-no-lines.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-circle-no-lines.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-circle-no-lines.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-circle-no-lines.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-circle.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-circle.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-circle.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-circle.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-fill.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-fill.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-fill.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-fill.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-none.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-none.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-none.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-none.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-icons.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-icons.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-icons.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-icons.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-label-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-label-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-label-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-legend.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-legend.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-legend.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-legend.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-lines-only.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-lines-only.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-lines-only.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-lines-only.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-multiple.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-multiple.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-multiple.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-radius.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-radius.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-radius.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-radius.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-grid.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-grid.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-grid.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-grid.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-label.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-label.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-label.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-label.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-shape.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-shape.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-shape.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-shape.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-simple.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-simple.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-simple.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-simple.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-stacked.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-stacked.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-stacked.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-text.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-text.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-text.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-text.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-advanced.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-advanced.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-advanced.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-advanced.tsx
diff --git a/apps/www/__registry__/new-york/blocks/chart-tooltip-default.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..759b4555bea
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Default</CardTitle>
+        <CardDescription>
+          Default tooltip with ChartTooltipContent.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-formatter.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-formatter.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-formatter.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-formatter.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-icons.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-icons.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-icons.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-icons.tsx
diff --git a/apps/www/__registry__/new-york/blocks/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..19c3f858894
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/chart-tooltip-indicator-line.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Line Indicator</CardTitle>
+        <CardDescription>Tooltip with line indicator.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="line" />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-indicator-none.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-indicator-none.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-indicator-none.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-indicator-none.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-label-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-label-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-label-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-label-formatter.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-label-formatter.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-label-formatter.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-label-formatter.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-label-none.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-label-none.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-label-none.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-label-none.tsx
diff --git a/apps/www/__registry__/new-york/blocks/dashboard-01/page.tsx b/apps/www/__registry__/new-york/blocks/dashboard-01/page.tsx
new file mode 100644
index 00000000000..e5602a4af14
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/dashboard-01/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "@/registry/new-york/blocks/dashboard-01/components/app-sidebar"
+import { ChartAreaInteractive } from "@/registry/new-york/blocks/dashboard-01/components/chart-area-interactive"
+import { DataTable } from "@/registry/new-york/blocks/dashboard-01/components/data-table"
+import { SectionCards } from "@/registry/new-york/blocks/dashboard-01/components/section-cards"
+import { SiteHeader } from "@/registry/new-york/blocks/dashboard-01/components/site-header"
+import { SidebarInset, SidebarProvider } from "@/registry/new-york/ui/sidebar"
+
+import data from "./data.json"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+              <SectionCards />
+              <div className="px-4 lg:px-6">
+                <ChartAreaInteractive />
+              </div>
+              <DataTable data={data} />
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/login-01/page.tsx b/apps/www/__registry__/new-york/blocks/login-01/page.tsx
new file mode 100644
index 00000000000..20fe9846ce2
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/login-01/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/blocks/login-01/components/login-form"
+
+export default function Page() {
+  return (
+    <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>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/login-02/page.tsx b/apps/www/__registry__/new-york/blocks/login-02/page.tsx
new file mode 100644
index 00000000000..7353a4d4fa1
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/login-02/page.tsx
@@ -0,0 +1,32 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/blocks/login-02/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/login-03/page.tsx b/apps/www/__registry__/new-york/blocks/login-03/page.tsx
new file mode 100644
index 00000000000..a4ced5031b3
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/login-03/page.tsx
@@ -0,0 +1,19 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/blocks/login-03/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/login-04/page.tsx b/apps/www/__registry__/new-york/blocks/login-04/page.tsx
new file mode 100644
index 00000000000..e2188012ae6
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/login-04/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/blocks/login-04/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/login-05/page.tsx b/apps/www/__registry__/new-york/blocks/login-05/page.tsx
new file mode 100644
index 00000000000..3d03c04805d
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/login-05/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/blocks/login-05/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-01/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000000..a13e7b06fe3
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-01/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-01/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-02/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000000..140cf70f884
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-02/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-02/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-03/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000000..768d4775bb1
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-03/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-03/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+          <div className="flex items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-04/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000000..fd5d6c8f00d
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-04/page.tsx
@@ -0,0 +1,56 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-04/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "19rem",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-05/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000000..9d630900db1
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-05/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-05/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-06/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000000..ac30ac9fe1c
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-06/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-06/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-07/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000000..8f9ab72554b
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-07/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-07/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-08/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000000..6df3df5d465
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-08/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-08/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-09/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000000..8c5b59468d8
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-09/page.tsx
@@ -0,0 +1,54 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-09/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "350px",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Inbox</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-10/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000000..d12f80239a5
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-10/page.tsx
@@ -0,0 +1,46 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-10/components/app-sidebar"
+import { NavActions } from "@/registry/new-york/blocks/sidebar-10/components/nav-actions"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-14 shrink-0 items-center gap-2">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+          <div className="ml-auto px-3">
+            <NavActions />
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-11/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000000..939d72c6825
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-11/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-11/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">components</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">ui</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>button.tsx</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-12/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000000..ccf68cbe1fa
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-12/page.tsx
@@ -0,0 +1,41 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-12/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbPage>October 2024</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+            {Array.from({ length: 20 }).map((_, i) => (
+              <div key={i} className="aspect-square rounded-xl bg-muted/50" />
+            ))}
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-13/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000000..a323b1c5d17
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-13/page.tsx
@@ -0,0 +1,9 @@
+import { SettingsDialog } from "@/registry/new-york/blocks/sidebar-13/components/settings-dialog"
+
+export default function Page() {
+  return (
+    <div className="flex h-svh items-center justify-center">
+      <SettingsDialog />
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-14/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000000..7d6c0b37c78
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-14/page.tsx
@@ -0,0 +1,48 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-14/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+      <AppSidebar side="right" />
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-15/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000000..acfcc0a4c17
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-15/page.tsx
@@ -0,0 +1,44 @@
+import { SidebarLeft } from "@/registry/new-york/blocks/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "@/registry/new-york/blocks/sidebar-15/components/sidebar-right"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarLeft />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+      <SidebarRight />
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/sidebar-16/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-16/page.tsx
new file mode 100644
index 00000000000..85d4f3b69b5
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-16/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-16/components/app-sidebar"
+import { SiteHeader } from "@/registry/new-york/blocks/sidebar-16/components/site-header"
+import { SidebarInset, SidebarProvider } from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a header and a search form."
+
+export default function Page() {
+  return (
+    <div className="[--header-height:calc(theme(spacing.14))]">
+      <SidebarProvider className="flex flex-col">
+        <SiteHeader />
+        <div className="flex flex-1">
+          <AppSidebar />
+          <SidebarInset>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+              <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+              </div>
+              <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+          </SidebarInset>
+        </div>
+      </SidebarProvider>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/block/chart-area-axes.tsx b/apps/www/__registry__/new-york/charts/chart-area-axes.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-axes.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-axes.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-default.tsx b/apps/www/__registry__/new-york/charts/chart-area-default.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-default.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-default.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-gradient.tsx b/apps/www/__registry__/new-york/charts/chart-area-gradient.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-gradient.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-gradient.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-icons.tsx b/apps/www/__registry__/new-york/charts/chart-area-icons.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-icons.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-icons.tsx
diff --git a/apps/www/__registry__/new-york/charts/chart-area-interactive.tsx b/apps/www/__registry__/new-york/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000000..cd8e7e6b288
--- /dev/null
+++ b/apps/www/__registry__/new-york/charts/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const [timeRange, setTimeRange] = React.useState("90d")
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card>
+      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
+        <div className="grid flex-1 gap-1 text-center sm:text-left">
+          <CardTitle>Area Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <Select value={timeRange} onValueChange={setTimeRange}>
+          <SelectTrigger
+            className="w-[160px] rounded-lg sm:ml-auto"
+            aria-label="Select a value"
+          >
+            <SelectValue placeholder="Last 3 months" />
+          </SelectTrigger>
+          <SelectContent className="rounded-xl">
+            <SelectItem value="90d" className="rounded-lg">
+              Last 3 months
+            </SelectItem>
+            <SelectItem value="30d" className="rounded-lg">
+              Last 30 days
+            </SelectItem>
+            <SelectItem value="7d" className="rounded-lg">
+              Last 7 days
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/block/chart-area-legend.tsx b/apps/www/__registry__/new-york/charts/chart-area-legend.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-legend.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-legend.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-linear.tsx b/apps/www/__registry__/new-york/charts/chart-area-linear.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-linear.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-linear.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-stacked-expand.tsx b/apps/www/__registry__/new-york/charts/chart-area-stacked-expand.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-stacked-expand.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-stacked-expand.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-stacked.tsx b/apps/www/__registry__/new-york/charts/chart-area-stacked.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-stacked.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-stacked.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-step.tsx b/apps/www/__registry__/new-york/charts/chart-area-step.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-step.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-step.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-active.tsx b/apps/www/__registry__/new-york/charts/chart-bar-active.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-active.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-active.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-default.tsx b/apps/www/__registry__/new-york/charts/chart-bar-default.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-default.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-default.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-horizontal.tsx b/apps/www/__registry__/new-york/charts/chart-bar-horizontal.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-horizontal.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-horizontal.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-interactive.tsx b/apps/www/__registry__/new-york/charts/chart-bar-interactive.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-interactive.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-interactive.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-label-custom.tsx b/apps/www/__registry__/new-york/charts/chart-bar-label-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-label-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-label-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-label.tsx b/apps/www/__registry__/new-york/charts/chart-bar-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-label.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-label.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-mixed.tsx b/apps/www/__registry__/new-york/charts/chart-bar-mixed.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-mixed.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-mixed.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-multiple.tsx b/apps/www/__registry__/new-york/charts/chart-bar-multiple.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-multiple.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-multiple.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-negative.tsx b/apps/www/__registry__/new-york/charts/chart-bar-negative.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-negative.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-negative.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-stacked.tsx b/apps/www/__registry__/new-york/charts/chart-bar-stacked.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-stacked.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-stacked.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-default.tsx b/apps/www/__registry__/new-york/charts/chart-line-default.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-default.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-default.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-dots-colors.tsx b/apps/www/__registry__/new-york/charts/chart-line-dots-colors.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-dots-colors.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-dots-colors.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-dots-custom.tsx b/apps/www/__registry__/new-york/charts/chart-line-dots-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-dots-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-dots-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-dots.tsx b/apps/www/__registry__/new-york/charts/chart-line-dots.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-dots.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-dots.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-interactive.tsx b/apps/www/__registry__/new-york/charts/chart-line-interactive.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-interactive.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-interactive.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-label-custom.tsx b/apps/www/__registry__/new-york/charts/chart-line-label-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-label-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-label-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-label.tsx b/apps/www/__registry__/new-york/charts/chart-line-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-label.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-label.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-linear.tsx b/apps/www/__registry__/new-york/charts/chart-line-linear.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-linear.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-linear.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-multiple.tsx b/apps/www/__registry__/new-york/charts/chart-line-multiple.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-multiple.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-multiple.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-step.tsx b/apps/www/__registry__/new-york/charts/chart-line-step.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-step.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-step.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-donut-active.tsx b/apps/www/__registry__/new-york/charts/chart-pie-donut-active.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-donut-active.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-donut-active.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-donut-text.tsx b/apps/www/__registry__/new-york/charts/chart-pie-donut-text.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-donut-text.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-donut-text.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-donut.tsx b/apps/www/__registry__/new-york/charts/chart-pie-donut.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-donut.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-donut.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-interactive.tsx b/apps/www/__registry__/new-york/charts/chart-pie-interactive.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-interactive.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-interactive.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-label-custom.tsx b/apps/www/__registry__/new-york/charts/chart-pie-label-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-label-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-label-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-label-list.tsx b/apps/www/__registry__/new-york/charts/chart-pie-label-list.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-label-list.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-label-list.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-label.tsx b/apps/www/__registry__/new-york/charts/chart-pie-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-label.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-label.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-legend.tsx b/apps/www/__registry__/new-york/charts/chart-pie-legend.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-legend.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-legend.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-separator-none.tsx b/apps/www/__registry__/new-york/charts/chart-pie-separator-none.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-separator-none.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-separator-none.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-simple.tsx b/apps/www/__registry__/new-york/charts/chart-pie-simple.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-simple.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-simple.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-stacked.tsx b/apps/www/__registry__/new-york/charts/chart-pie-stacked.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-stacked.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-stacked.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-default.tsx b/apps/www/__registry__/new-york/charts/chart-radar-default.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-default.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-default.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-dots.tsx b/apps/www/__registry__/new-york/charts/chart-radar-dots.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-dots.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-dots.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-circle-fill.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-circle-fill.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-circle-fill.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-circle-fill.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-circle-no-lines.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-circle-no-lines.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-circle-no-lines.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-circle-no-lines.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-circle.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-circle.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-circle.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-circle.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-custom.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-fill.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-fill.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-fill.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-fill.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-none.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-none.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-none.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-none.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-icons.tsx b/apps/www/__registry__/new-york/charts/chart-radar-icons.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-icons.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-icons.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-label-custom.tsx b/apps/www/__registry__/new-york/charts/chart-radar-label-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-label-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-label-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-legend.tsx b/apps/www/__registry__/new-york/charts/chart-radar-legend.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-legend.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-legend.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-lines-only.tsx b/apps/www/__registry__/new-york/charts/chart-radar-lines-only.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-lines-only.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-lines-only.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-multiple.tsx b/apps/www/__registry__/new-york/charts/chart-radar-multiple.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-multiple.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-multiple.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-radius.tsx b/apps/www/__registry__/new-york/charts/chart-radar-radius.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-radius.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-radius.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-grid.tsx b/apps/www/__registry__/new-york/charts/chart-radial-grid.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-grid.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-grid.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-label.tsx b/apps/www/__registry__/new-york/charts/chart-radial-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-label.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-label.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-shape.tsx b/apps/www/__registry__/new-york/charts/chart-radial-shape.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-shape.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-shape.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-simple.tsx b/apps/www/__registry__/new-york/charts/chart-radial-simple.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-simple.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-simple.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-stacked.tsx b/apps/www/__registry__/new-york/charts/chart-radial-stacked.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-stacked.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-stacked.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-text.tsx b/apps/www/__registry__/new-york/charts/chart-radial-text.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-text.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-text.tsx
diff --git a/apps/www/registry/new-york/block/chart-tooltip-advanced.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-advanced.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-advanced.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-advanced.tsx
diff --git a/apps/www/__registry__/new-york/charts/chart-tooltip-default.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..759b4555bea
--- /dev/null
+++ b/apps/www/__registry__/new-york/charts/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Default</CardTitle>
+        <CardDescription>
+          Default tooltip with ChartTooltipContent.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/block/chart-tooltip-formatter.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-formatter.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-formatter.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-formatter.tsx
diff --git a/apps/www/registry/new-york/block/chart-tooltip-icons.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-icons.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-icons.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-icons.tsx
diff --git a/apps/www/__registry__/new-york/charts/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..19c3f858894
--- /dev/null
+++ b/apps/www/__registry__/new-york/charts/chart-tooltip-indicator-line.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Line Indicator</CardTitle>
+        <CardDescription>Tooltip with line indicator.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="line" />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/block/chart-tooltip-indicator-none.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-indicator-none.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-indicator-none.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-indicator-none.tsx
diff --git a/apps/www/registry/new-york/block/chart-tooltip-label-custom.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-label-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-label-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-label-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-tooltip-label-formatter.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-label-formatter.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-label-formatter.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-label-formatter.tsx
diff --git a/apps/www/registry/new-york/block/chart-tooltip-label-none.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-label-none.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-label-none.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-label-none.tsx
diff --git a/apps/www/actions/edit-in-v0.ts b/apps/www/actions/edit-in-v0.ts
index 4c2f718f5d7..125dacc5639 100644
--- a/apps/www/actions/edit-in-v0.ts
+++ b/apps/www/actions/edit-in-v0.ts
@@ -3,50 +3,71 @@
 import { track } from "@vercel/analytics/server"
 import { capitalCase } from "change-case"
 
+import { getRegistryItem } from "@/lib/registry"
+import { Style } from "@/registry/registry-styles"
+
+const TAILWIND_CONFIG_BLOCKS = ["dashboard-01"]
+
 export async function editInV0({
   name,
-  title,
-  description,
   style,
-  code,
   url,
 }: {
   name: string
-  title?: string
-  description: string
-  style: string
-  code: string
+  style?: Style["name"]
   url: string
 }) {
+  style = style ?? "new-york"
   try {
-    title =
-      title ??
-      capitalCase(
-        name.replace(/\d+/g, "").replace("-demo", "").replace("-", " ")
-      )
+    const registryItem = await getRegistryItem(name, style)
+
+    if (!registryItem) {
+      return { error: "Something went wrong. Please try again later." }
+    }
 
     await track("edit_in_v0", {
       name,
-      title,
-      description,
+      title: registryItem.name,
+      description: registryItem.description ?? registryItem.name,
       style,
       url,
     })
 
-    // Replace "use client" in the code.
-    // v0 will handle this for us.
-    // code = code.replace(`"use client"`, "")
+    // Remove v0 prefix from the name
+    registryItem.name = registryItem.name.replace(/^v0-/, "")
+
+    const projectName = capitalCase(name.replace(/\d+/g, ""))
+    registryItem.description = registryItem.description || projectName
+
+    // Replace `@/registry/new-york/` in files.
+    registryItem.files = registryItem.files?.map((file) => {
+      if (file.content?.includes("@/registry/new-york/ui")) {
+        file.content = file.content?.replaceAll(
+          "@/registry/new-york/ui",
+          "@/components/ui"
+        )
+      }
+      return file
+    })
+
+    if (TAILWIND_CONFIG_BLOCKS.includes(name)) {
+      registryItem.files?.push({
+        path: "tailwind.config.js",
+        type: "registry:file",
+        target: "tailwind.config.js",
+        content: TAILWIND_CONFIG,
+      })
+    }
 
     const payload = {
-      title,
-      description,
-      code,
+      version: 2,
+      payload: registryItem,
       source: {
         title: "shadcn/ui",
         url,
       },
       meta: {
-        project: capitalCase(name.replace(/\d+/g, "")),
+        project: projectName,
         file: `${name}.tsx`,
       },
     }
@@ -85,3 +106,100 @@ export async function editInV0({
     }
   }
 }
+
+const TAILWIND_CONFIG = `const { fontFamily } = require("tailwindcss/defaultTheme")
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+        mono: ["var(--font-geist-mono)", ...fontFamily.mono],
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			},
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+      borderRadius: {
+        xl: "calc(var(--radius) + 4px)",
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      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" },
+        },
+        "caret-blink": {
+          "0%,70%,100%": { opacity: "1" },
+          "20%,50%": { opacity: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
+      },
+    },
+  },
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/container-queries"),
+  ],
+}`
diff --git a/apps/www/app/(app)/blocks/[...categories]/page.tsx b/apps/www/app/(app)/blocks/[...categories]/page.tsx
new file mode 100644
index 00000000000..d02086924a5
--- /dev/null
+++ b/apps/www/app/(app)/blocks/[...categories]/page.tsx
@@ -0,0 +1,31 @@
+import { getAllBlockIds } from "@/lib/blocks"
+import { BlockDisplay } from "@/components/block-display"
+import { registryCategories } from "@/registry/registry-categories"
+
+export const dynamicParams = false
+
+export async function generateStaticParams() {
+  return registryCategories.map((category) => ({
+    categories: [category.slug],
+  }))
+}
+
+export default async function BlocksPage({
+  params,
+}: {
+  params: { categories?: string[] }
+}) {
+  const blocks = await getAllBlockIds(
+    ["registry:block"],
+    params.categories ?? []
+  )
+
+  return blocks.map((name) => (
+    <div
+      key={name}
+      className="border-grid container border-b py-8 first:pt-6 last:border-b-0 md:py-12"
+    >
+      <BlockDisplay name={name} />
+    </div>
+  ))
+}
diff --git a/apps/www/app/(app)/blocks/layout.tsx b/apps/www/app/(app)/blocks/layout.tsx
index 8b35b010986..2b52e490524 100644
--- a/apps/www/app/(app)/blocks/layout.tsx
+++ b/apps/www/app/(app)/blocks/layout.tsx
@@ -1,6 +1,7 @@
 import { Metadata } from "next"
 
 import { Announcement } from "@/components/announcement"
+import { BlocksNav } from "@/components/blocks-nav"
 import {
   PageActions,
   PageHeader,
@@ -9,10 +10,35 @@ import {
 } from "@/components/page-header"
 import { Button } from "@/registry/new-york/ui/button"
 
+import "@/styles/mdx.css"
+import Link from "next/link"
+
+const title = "Building Blocks for the Web"
+const description =
+  "Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever."
+
 export const metadata: Metadata = {
-  title: "Building Blocks.",
-  description:
-    "Beautifully designed. Copy and paste into your apps. Open Source.",
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
 }
 
 export default function BlocksLayout({
@@ -21,30 +47,28 @@ export default function BlocksLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="container relative">
+    <>
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading>Building Blocks for the Web</PageHeaderHeading>
-        <PageHeaderDescription>
-          Beautifully designed. Copy and paste into your apps. Open Source.
-        </PageHeaderDescription>
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm">
             <a href="#blocks">Browse Blocks</a>
           </Button>
           <Button asChild variant="ghost" size="sm">
-            <a
-              href="https://github.com/shadcn-ui/ui/discussions/new?category=blocks-request"
-              target="_blank"
-            >
-              Request a block
-            </a>
+            <Link href="/docs/blocks">Add a block</Link>
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="blocks" className="scroll-mt-24">
-        {children}
-      </section>
-    </div>
+      <div id="blocks" className="border-grid scroll-mt-24 border-b">
+        <div className="container-wrapper">
+          <div className="container flex items-center py-4">
+            <BlocksNav />
+          </div>
+        </div>
+      </div>
+      <div className="container-wrapper flex-1">{children}</div>
+    </>
   )
 }
diff --git a/apps/www/app/(app)/blocks/page.tsx b/apps/www/app/(app)/blocks/page.tsx
index 9b013de4946..199985bf68b 100644
--- a/apps/www/app/(app)/blocks/page.tsx
+++ b/apps/www/app/(app)/blocks/page.tsx
@@ -1,31 +1,33 @@
-import { getAllBlockIds } from "@/lib/blocks"
-import { THEMES } from "@/lib/themes"
-import { BlockDisplay } from "@/components/block-display"
-import { ThemesSwitcher } from "@/components/themes-selector"
+import Link from "next/link"
 
-export default async function BlocksPage() {
-  const blocks = (await getAllBlockIds()).filter(
-    (name) =>
-      !name.startsWith("chart-") &&
-      !name.startsWith("sidebar-01") &&
-      !name.startsWith("login-01")
-  )
+import { BlockDisplay } from "@/components/block-display"
+import { Button } from "@/registry/new-york/ui/button"
 
-  // These themes are not compatible with the blocks yet.
-  const themes = THEMES.filter(
-    (theme) => !["default-daylight", "default-midnight"].includes(theme.id)
-  )
+const FEATURED_BLOCKS = [
+  "dashboard-01",
+  "sidebar-07",
+  "sidebar-03",
+  "login-03",
+  "login-04",
+]
 
+export default async function BlocksPage() {
   return (
-    <div className="gap-3 md:flex md:flex-row-reverse md:items-start">
-      <ThemesSwitcher
-        themes={themes}
-        className="fixed inset-x-0 bottom-0 z-40 mt-12 flex bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:sticky lg:bottom-auto lg:top-20"
-      />
-      <div className="grid flex-1 gap-24 lg:gap-48">
-        {blocks.map((name, index) => (
-          <BlockDisplay key={`${name}-${index}`} name={name} />
-        ))}
+    <div>
+      {FEATURED_BLOCKS.map((block) => (
+        <div
+          key={block}
+          className="border-grid container border-b py-8 first:pt-6 last:border-b-0 md:py-12"
+        >
+          <BlockDisplay name={block} />
+        </div>
+      ))}
+      <div className="container-wrapper">
+        <div className="container flex justify-center py-6">
+          <Button asChild variant="outline">
+            <Link href="/blocks/sidebar">Browse all blocks</Link>
+          </Button>
+        </div>
       </div>
     </div>
   )
diff --git a/apps/www/app/(app)/charts/charts.tsx b/apps/www/app/(app)/charts/charts.tsx
index 1ff2ca3ee1a..694d62b0bc0 100644
--- a/apps/www/app/(app)/charts/charts.tsx
+++ b/apps/www/app/(app)/charts/charts.tsx
@@ -1,76 +1,76 @@
-export { default as ChartAreaDefault } from "@/registry/new-york/block/chart-area-default"
-export { default as ChartAreaLinear } from "@/registry/new-york/block/chart-area-linear"
-export { default as ChartAreaStep } from "@/registry/new-york/block/chart-area-step"
-export { default as ChartAreaLegend } from "@/registry/new-york/block/chart-area-legend"
-export { default as ChartAreaStacked } from "@/registry/new-york/block/chart-area-stacked"
-export { default as ChartAreaStackedExpand } from "@/registry/new-york/block/chart-area-stacked-expand"
-export { default as ChartAreaIcons } from "@/registry/new-york/block/chart-area-icons"
-export { default as ChartAreaGradient } from "@/registry/new-york/block/chart-area-gradient"
-export { default as ChartAreaAxes } from "@/registry/new-york/block/chart-area-axes"
-export { default as ChartAreaInteractive } from "@/registry/new-york/block/chart-area-interactive"
+export { default as ChartAreaDefault } from "@/registry/new-york/charts/chart-area-default"
+export { default as ChartAreaLinear } from "@/registry/new-york/charts/chart-area-linear"
+export { default as ChartAreaStep } from "@/registry/new-york/charts/chart-area-step"
+export { default as ChartAreaLegend } from "@/registry/new-york/charts/chart-area-legend"
+export { default as ChartAreaStacked } from "@/registry/new-york/charts/chart-area-stacked"
+export { default as ChartAreaStackedExpand } from "@/registry/new-york/charts/chart-area-stacked-expand"
+export { default as ChartAreaIcons } from "@/registry/new-york/charts/chart-area-icons"
+export { default as ChartAreaGradient } from "@/registry/new-york/charts/chart-area-gradient"
+export { default as ChartAreaAxes } from "@/registry/new-york/charts/chart-area-axes"
+export { default as ChartAreaInteractive } from "@/registry/new-york/charts/chart-area-interactive"
 
-export { default as ChartBarDefault } from "@/registry/new-york/block/chart-bar-default"
-export { default as ChartBarHorizontal } from "@/registry/new-york/block/chart-bar-horizontal"
-export { default as ChartBarMultiple } from "@/registry/new-york/block/chart-bar-multiple"
-export { default as ChartBarStacked } from "@/registry/new-york/block/chart-bar-stacked"
-export { default as ChartBarLabel } from "@/registry/new-york/block/chart-bar-label"
-export { default as ChartBarLabelCustom } from "@/registry/new-york/block/chart-bar-label-custom"
-export { default as ChartBarMixed } from "@/registry/new-york/block/chart-bar-mixed"
-export { default as ChartBarActive } from "@/registry/new-york/block/chart-bar-active"
-export { default as ChartBarNegative } from "@/registry/new-york/block/chart-bar-negative"
-export { default as ChartBarInteractive } from "@/registry/new-york/block/chart-bar-interactive"
+export { default as ChartBarDefault } from "@/registry/new-york/charts/chart-bar-default"
+export { default as ChartBarHorizontal } from "@/registry/new-york/charts/chart-bar-horizontal"
+export { default as ChartBarMultiple } from "@/registry/new-york/charts/chart-bar-multiple"
+export { default as ChartBarStacked } from "@/registry/new-york/charts/chart-bar-stacked"
+export { default as ChartBarLabel } from "@/registry/new-york/charts/chart-bar-label"
+export { default as ChartBarLabelCustom } from "@/registry/new-york/charts/chart-bar-label-custom"
+export { default as ChartBarMixed } from "@/registry/new-york/charts/chart-bar-mixed"
+export { default as ChartBarActive } from "@/registry/new-york/charts/chart-bar-active"
+export { default as ChartBarNegative } from "@/registry/new-york/charts/chart-bar-negative"
+export { default as ChartBarInteractive } from "@/registry/new-york/charts/chart-bar-interactive"
 
-export { default as ChartLineDefault } from "@/registry/new-york/block/chart-line-default"
-export { default as ChartLineLinear } from "@/registry/new-york/block/chart-line-linear"
-export { default as ChartLineStep } from "@/registry/new-york/block/chart-line-step"
-export { default as ChartLineMultiple } from "@/registry/new-york/block/chart-line-multiple"
-export { default as ChartLineDots } from "@/registry/new-york/block/chart-line-dots"
-export { default as ChartLineDotsCustom } from "@/registry/new-york/block/chart-line-dots-custom"
-export { default as ChartLineDotsColors } from "@/registry/new-york/block/chart-line-dots-colors"
-export { default as ChartLineLabel } from "@/registry/new-york/block/chart-line-label"
-export { default as ChartLineLabelCustom } from "@/registry/new-york/block/chart-line-label-custom"
-export { default as ChartLineInteractive } from "@/registry/new-york/block/chart-line-interactive"
+export { default as ChartLineDefault } from "@/registry/new-york/charts/chart-line-default"
+export { default as ChartLineLinear } from "@/registry/new-york/charts/chart-line-linear"
+export { default as ChartLineStep } from "@/registry/new-york/charts/chart-line-step"
+export { default as ChartLineMultiple } from "@/registry/new-york/charts/chart-line-multiple"
+export { default as ChartLineDots } from "@/registry/new-york/charts/chart-line-dots"
+export { default as ChartLineDotsCustom } from "@/registry/new-york/charts/chart-line-dots-custom"
+export { default as ChartLineDotsColors } from "@/registry/new-york/charts/chart-line-dots-colors"
+export { default as ChartLineLabel } from "@/registry/new-york/charts/chart-line-label"
+export { default as ChartLineLabelCustom } from "@/registry/new-york/charts/chart-line-label-custom"
+export { default as ChartLineInteractive } from "@/registry/new-york/charts/chart-line-interactive"
 
-export { default as ChartPieSimple } from "@/registry/new-york/block/chart-pie-simple"
-export { default as ChartPieSeparatorNone } from "@/registry/new-york/block/chart-pie-separator-none"
-export { default as ChartPieLabel } from "@/registry/new-york/block/chart-pie-label"
-export { default as ChartPieLabelCustom } from "@/registry/new-york/block/chart-pie-label-custom"
-export { default as ChartPieLabelList } from "@/registry/new-york/block/chart-pie-label-list"
-export { default as ChartPieLegend } from "@/registry/new-york/block/chart-pie-legend"
-export { default as ChartPieDonut } from "@/registry/new-york/block/chart-pie-donut"
-export { default as ChartPieDonutActive } from "@/registry/new-york/block/chart-pie-donut-active"
-export { default as ChartPieDonutText } from "@/registry/new-york/block/chart-pie-donut-text"
-export { default as ChartPieStacked } from "@/registry/new-york/block/chart-pie-stacked"
-export { default as ChartPieInteractive } from "@/registry/new-york/block/chart-pie-interactive"
+export { default as ChartPieSimple } from "@/registry/new-york/charts/chart-pie-simple"
+export { default as ChartPieSeparatorNone } from "@/registry/new-york/charts/chart-pie-separator-none"
+export { default as ChartPieLabel } from "@/registry/new-york/charts/chart-pie-label"
+export { default as ChartPieLabelCustom } from "@/registry/new-york/charts/chart-pie-label-custom"
+export { default as ChartPieLabelList } from "@/registry/new-york/charts/chart-pie-label-list"
+export { default as ChartPieLegend } from "@/registry/new-york/charts/chart-pie-legend"
+export { default as ChartPieDonut } from "@/registry/new-york/charts/chart-pie-donut"
+export { default as ChartPieDonutActive } from "@/registry/new-york/charts/chart-pie-donut-active"
+export { default as ChartPieDonutText } from "@/registry/new-york/charts/chart-pie-donut-text"
+export { default as ChartPieStacked } from "@/registry/new-york/charts/chart-pie-stacked"
+export { default as ChartPieInteractive } from "@/registry/new-york/charts/chart-pie-interactive"
 
-export { default as ChartRadarDefault } from "@/registry/new-york/block/chart-radar-default"
-export { default as ChartRadarDots } from "@/registry/new-york/block/chart-radar-dots"
-export { default as ChartRadarLinesOnly } from "@/registry/new-york/block/chart-radar-lines-only"
-export { default as ChartRadarLabelCustom } from "@/registry/new-york/block/chart-radar-label-custom"
-export { default as ChartRadarGridCustom } from "@/registry/new-york/block/chart-radar-grid-custom"
-export { default as ChartRadarGridNone } from "@/registry/new-york/block/chart-radar-grid-none"
-export { default as ChartRadarGridCircle } from "@/registry/new-york/block/chart-radar-grid-circle"
-export { default as ChartRadarGridCircleNoLines } from "@/registry/new-york/block/chart-radar-grid-circle-no-lines"
-export { default as ChartRadarGridCircleFill } from "@/registry/new-york/block/chart-radar-grid-circle-fill"
-export { default as ChartRadarGridFill } from "@/registry/new-york/block/chart-radar-grid-fill"
-export { default as ChartRadarMultiple } from "@/registry/new-york/block/chart-radar-multiple"
-export { default as ChartRadarLegend } from "@/registry/new-york/block/chart-radar-legend"
-export { default as ChartRadarIcons } from "@/registry/new-york/block/chart-radar-icons"
-export { default as ChartRadarRadius } from "@/registry/new-york/block/chart-radar-radius"
+export { default as ChartRadarDefault } from "@/registry/new-york/charts/chart-radar-default"
+export { default as ChartRadarDots } from "@/registry/new-york/charts/chart-radar-dots"
+export { default as ChartRadarLinesOnly } from "@/registry/new-york/charts/chart-radar-lines-only"
+export { default as ChartRadarLabelCustom } from "@/registry/new-york/charts/chart-radar-label-custom"
+export { default as ChartRadarGridCustom } from "@/registry/new-york/charts/chart-radar-grid-custom"
+export { default as ChartRadarGridNone } from "@/registry/new-york/charts/chart-radar-grid-none"
+export { default as ChartRadarGridCircle } from "@/registry/new-york/charts/chart-radar-grid-circle"
+export { default as ChartRadarGridCircleNoLines } from "@/registry/new-york/charts/chart-radar-grid-circle-no-lines"
+export { default as ChartRadarGridCircleFill } from "@/registry/new-york/charts/chart-radar-grid-circle-fill"
+export { default as ChartRadarGridFill } from "@/registry/new-york/charts/chart-radar-grid-fill"
+export { default as ChartRadarMultiple } from "@/registry/new-york/charts/chart-radar-multiple"
+export { default as ChartRadarLegend } from "@/registry/new-york/charts/chart-radar-legend"
+export { default as ChartRadarIcons } from "@/registry/new-york/charts/chart-radar-icons"
+export { default as ChartRadarRadius } from "@/registry/new-york/charts/chart-radar-radius"
 
-export { default as ChartRadialSimple } from "@/registry/new-york/block/chart-radial-simple"
-export { default as ChartRadialLabel } from "@/registry/new-york/block/chart-radial-label"
-export { default as ChartRadialGrid } from "@/registry/new-york/block/chart-radial-grid"
-export { default as ChartRadialText } from "@/registry/new-york/block/chart-radial-text"
-export { default as ChartRadialShape } from "@/registry/new-york/block/chart-radial-shape"
-export { default as ChartRadialStacked } from "@/registry/new-york/block/chart-radial-stacked"
+export { default as ChartRadialSimple } from "@/registry/new-york/charts/chart-radial-simple"
+export { default as ChartRadialLabel } from "@/registry/new-york/charts/chart-radial-label"
+export { default as ChartRadialGrid } from "@/registry/new-york/charts/chart-radial-grid"
+export { default as ChartRadialText } from "@/registry/new-york/charts/chart-radial-text"
+export { default as ChartRadialShape } from "@/registry/new-york/charts/chart-radial-shape"
+export { default as ChartRadialStacked } from "@/registry/new-york/charts/chart-radial-stacked"
 
-export { default as ChartTooltipDefault } from "@/registry/new-york/block/chart-tooltip-default"
-export { default as ChartTooltipIndicatorLine } from "@/registry/new-york/block/chart-tooltip-indicator-line"
-export { default as ChartTooltipIndicatorNone } from "@/registry/new-york/block/chart-tooltip-indicator-none"
-export { default as ChartTooltipLabelCustom } from "@/registry/new-york/block/chart-tooltip-label-custom"
-export { default as ChartTooltipLabelFormatter } from "@/registry/new-york/block/chart-tooltip-label-formatter"
-export { default as ChartTooltipLabelNone } from "@/registry/new-york/block/chart-tooltip-label-none"
-export { default as ChartTooltipFormatter } from "@/registry/new-york/block/chart-tooltip-formatter"
-export { default as ChartTooltipIcons } from "@/registry/new-york/block/chart-tooltip-icons"
-export { default as ChartTooltipAdvanced } from "@/registry/new-york/block/chart-tooltip-advanced"
+export { default as ChartTooltipDefault } from "@/registry/new-york/charts/chart-tooltip-default"
+export { default as ChartTooltipIndicatorLine } from "@/registry/new-york/charts/chart-tooltip-indicator-line"
+export { default as ChartTooltipIndicatorNone } from "@/registry/new-york/charts/chart-tooltip-indicator-none"
+export { default as ChartTooltipLabelCustom } from "@/registry/new-york/charts/chart-tooltip-label-custom"
+export { default as ChartTooltipLabelFormatter } from "@/registry/new-york/charts/chart-tooltip-label-formatter"
+export { default as ChartTooltipLabelNone } from "@/registry/new-york/charts/chart-tooltip-label-none"
+export { default as ChartTooltipFormatter } from "@/registry/new-york/charts/chart-tooltip-formatter"
+export { default as ChartTooltipIcons } from "@/registry/new-york/charts/chart-tooltip-icons"
+export { default as ChartTooltipAdvanced } from "@/registry/new-york/charts/chart-tooltip-advanced"
diff --git a/apps/www/app/(app)/charts/layout.tsx b/apps/www/app/(app)/charts/layout.tsx
index bf41aa3da8f..660367cde70 100644
--- a/apps/www/app/(app)/charts/layout.tsx
+++ b/apps/www/app/(app)/charts/layout.tsx
@@ -2,6 +2,7 @@ import { Metadata } from "next"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"
+import { ChartsNav } from "@/components/charts-nav"
 import {
   PageActions,
   PageHeader,
@@ -10,10 +11,32 @@ import {
 } from "@/components/page-header"
 import { Button } from "@/registry/new-york/ui/button"
 
+const title = "Beautiful Charts"
+const description =
+  "Built using Recharts. Copy and paste into your apps. Open Source."
+
 export const metadata: Metadata = {
-  title: "Beautiful Charts",
-  description:
-    "Built using Recharts. Copy and paste into your apps. Open Source.",
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
 }
 
 export default function ChartsLayout({
@@ -22,13 +45,11 @@ export default function ChartsLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="container relative">
+    <>
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading>Beautiful Charts</PageHeaderHeading>
-        <PageHeaderDescription>
-          Built using Recharts. Copy and paste into your apps. Open Source.
-        </PageHeaderDescription>
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm">
             <a href="#charts">Browse Charts</a>
@@ -38,9 +59,20 @@ export default function ChartsLayout({
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="charts" className="scroll-mt-20">
-        {children}
-      </section>
-    </div>
+      <div className="border-grid border-b">
+        <div className="container-wrapper">
+          <div className="container py-4">
+            <ChartsNav />
+          </div>
+        </div>
+      </div>
+      <div className="container-wrapper">
+        <div className="container py-6">
+          <section id="charts" className="scroll-mt-20">
+            {children}
+          </section>
+        </div>
+      </div>
+    </>
   )
 }
diff --git a/apps/www/app/(app)/charts/page.tsx b/apps/www/app/(app)/charts/page.tsx
index f368ff27dfc..d1584b15329 100644
--- a/apps/www/app/(app)/charts/page.tsx
+++ b/apps/www/app/(app)/charts/page.tsx
@@ -1,6 +1,5 @@
 import { THEMES } from "@/lib/themes"
 import { ChartDisplay } from "@/components/chart-display"
-import { ChartsNav } from "@/components/charts-nav"
 import { ThemesSwitcher } from "@/components/themes-selector"
 import { ThemesStyle } from "@/components/themes-styles"
 import { Separator } from "@/registry/new-york/ui/separator"
@@ -9,7 +8,6 @@ import * as Charts from "@/app/(app)/charts/charts"
 export default function ChartsPage() {
   return (
     <div className="grid gap-4">
-      <ChartsNav className="[&>a:first-child]:bg-muted [&>a:first-child]:font-medium [&>a:first-child]:text-primary" />
       <ThemesStyle />
       <div className="gap-6 md:flex md:flex-row-reverse md:items-start">
         <ThemesSwitcher
diff --git a/apps/www/app/(app)/colors/layout.tsx b/apps/www/app/(app)/colors/layout.tsx
index 35d973c625e..76e37df4ec7 100644
--- a/apps/www/app/(app)/colors/layout.tsx
+++ b/apps/www/app/(app)/colors/layout.tsx
@@ -10,24 +10,44 @@ import {
 } from "@/components/page-header"
 import { Button } from "@/registry/new-york/ui/button"
 
+const title = "Color Library"
+const description = "Tailwind CSS colors in HSL, RGB, HEX and OKLCH formats."
+
 export const metadata: Metadata = {
-  title: "Tailwind Colors",
-  description: "All colors in all formats.",
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
 }
 
-export default function ChartsLayout({
+export default function ColorsLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <div className="container relative">
+    <>
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading>Tailwind Colors</PageHeaderHeading>
-        <PageHeaderDescription>
-          Tailwind CSS colors in HSL, RGB, and HEX formats.
-        </PageHeaderDescription>
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm">
             <a href="#colors">Browse Colors</a>
@@ -37,9 +57,13 @@ export default function ChartsLayout({
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="charts" className="scroll-mt-20">
-        {children}
-      </section>
-    </div>
+      <div className="container-wrapper">
+        <div className="container py-6">
+          <section id="colors" className="scroll-mt-20">
+            {children}
+          </section>
+        </div>
+      </div>
+    </>
   )
 }
diff --git a/apps/www/app/(app)/colors/page.tsx b/apps/www/app/(app)/colors/page.tsx
index ad1c8aa38e6..693a6fccaae 100644
--- a/apps/www/app/(app)/colors/page.tsx
+++ b/apps/www/app/(app)/colors/page.tsx
@@ -1,11 +1,11 @@
 import { getColors } from "@/lib/colors"
 import { ColorPalette } from "@/components/color-palette"
 
-const colors = getColors()
-
 export default function ColorsPage() {
+  const colors = getColors()
+
   return (
-    <div id="colors" className="grid scroll-mt-20 gap-8">
+    <div className="grid gap-8">
       {colors.map((colorPalette) => (
         <ColorPalette key={colorPalette.name} colorPalette={colorPalette} />
       ))}
diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
index 824de656341..a724965a9d5 100644
--- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
@@ -4,10 +4,9 @@ import { allDocs } from "contentlayer/generated"
 import "@/styles/mdx.css"
 import type { Metadata } from "next"
 import Link from "next/link"
-import { ChevronRightIcon, ExternalLinkIcon } from "@radix-ui/react-icons"
+import { ChevronRight, ExternalLink } from "lucide-react"
 import Balancer from "react-wrap-balancer"
 
-import { siteConfig } from "@/config/site"
 import { getTableOfContents } from "@/lib/toc"
 import { absoluteUrl, cn } from "@/lib/utils"
 import { Mdx } from "@/components/mdx-components"
@@ -15,7 +14,6 @@ import { OpenInV0Cta } from "@/components/open-in-v0-cta"
 import { DocsPager } from "@/components/pager"
 import { DashboardTableOfContents } from "@/components/toc"
 import { badgeVariants } from "@/registry/new-york/ui/badge"
-import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
 
 interface DocPageProps {
   params: {
@@ -53,10 +51,9 @@ export async function generateMetadata({
       url: absoluteUrl(doc.slug),
       images: [
         {
-          url: siteConfig.ogImage,
-          width: 1200,
-          height: 630,
-          alt: siteConfig.name,
+          url: `/og?title=${encodeURIComponent(
+            doc.title
+          )}&description=${encodeURIComponent(doc.description)}`,
         },
       ],
     },
@@ -64,7 +61,13 @@ export async function generateMetadata({
       card: "summary_large_image",
       title: doc.title,
       description: doc.description,
-      images: [siteConfig.ogImage],
+      images: [
+        {
+          url: `/og?title=${encodeURIComponent(
+            doc.title
+          )}&description=${encodeURIComponent(doc.description)}`,
+        },
+      ],
       creator: "@shadcn",
     },
   }
@@ -89,10 +92,12 @@ export default async function DocPage({ params }: DocPageProps) {
 
   return (
     <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
-      <div className="mx-auto w-full min-w-0">
+      <div className="mx-auto w-full min-w-0 max-w-2xl">
         <div className="mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground">
-          <div className="truncate">Docs</div>
-          <ChevronRightIcon className="h-3.5 w-3.5" />
+          <Link href="/docs" className="truncate">
+            Docs
+          </Link>
+          <ChevronRight className="h-3.5 w-3.5" />
           <div className="text-foreground">{doc.title}</div>
         </div>
         <div className="space-y-2">
@@ -115,7 +120,7 @@ export default async function DocPage({ params }: DocPageProps) {
                 className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
               >
                 Docs
-                <ExternalLinkIcon className="h-3 w-3" />
+                <ExternalLink className="h-3 w-3" />
               </Link>
             )}
             {doc.links?.api && (
@@ -126,7 +131,7 @@ export default async function DocPage({ params }: DocPageProps) {
                 className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
               >
                 API Reference
-                <ExternalLinkIcon className="h-3 w-3" />
+                <ExternalLink className="h-3 w-3" />
               </Link>
             )}
           </div>
@@ -137,11 +142,11 @@ export default async function DocPage({ params }: DocPageProps) {
         <DocsPager doc={doc} />
       </div>
       <div className="hidden text-sm xl:block">
-        <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] pt-4">
-          <ScrollArea className="h-full pb-10">
+        <div className="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
+          <div className="no-scrollbar h-full overflow-auto pb-10">
             {doc.toc && <DashboardTableOfContents toc={toc} />}
             <OpenInV0Cta className="mt-6 max-w-[80%]" />
-          </ScrollArea>
+          </div>
         </div>
       </div>
     </main>
diff --git a/apps/www/app/(app)/docs/layout.tsx b/apps/www/app/(app)/docs/layout.tsx
index f16dc0c35b6..148baa46acd 100644
--- a/apps/www/app/(app)/docs/layout.tsx
+++ b/apps/www/app/(app)/docs/layout.tsx
@@ -1,19 +1,18 @@
 import { docsConfig } from "@/config/docs"
-import { DocsSidebarNav } from "@/components/sidebar-nav"
-import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
+import { DocsNav } from "@/components/docs-nav"
 
-interface DocsLayoutProps {
+export default function DocsLayout({
+  children,
+}: {
   children: React.ReactNode
-}
-
-export default function DocsLayout({ children }: DocsLayoutProps) {
+}) {
   return (
-    <div className="border-b">
+    <div className="container-wrapper">
       <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-        <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
-          <ScrollArea className="h-full py-6 pr-6 lg:py-8">
-            <DocsSidebarNav config={docsConfig} />
-          </ScrollArea>
+        <aside className="border-grid fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 border-r md:sticky md:block">
+          <div className="no-scrollbar h-full overflow-auto py-6 pr-4 lg:py-8">
+            <DocsNav config={docsConfig} />
+          </div>
         </aside>
         {children}
       </div>
diff --git a/apps/www/app/(app)/examples/cards/components/date-picker.tsx b/apps/www/app/(app)/examples/cards/components/date-picker.tsx
index 124c13a1e06..d14594d13e8 100644
--- a/apps/www/app/(app)/examples/cards/components/date-picker.tsx
+++ b/apps/www/app/(app)/examples/cards/components/date-picker.tsx
@@ -1,4 +1,4 @@
-import DatePickerWithRange from "@/registry/default/example/date-picker-with-range"
+import DatePickerWithRange from "@/registry/default/examples/date-picker-with-range"
 import { Card, CardContent } from "@/registry/new-york/ui/card"
 import { Label } from "@/registry/new-york/ui/label"
 
diff --git a/apps/www/app/(app)/examples/cards/components/github-card.tsx b/apps/www/app/(app)/examples/cards/components/github-card.tsx
index b80ea22b221..9e4c039da47 100644
--- a/apps/www/app/(app)/examples/cards/components/github-card.tsx
+++ b/apps/www/app/(app)/examples/cards/components/github-card.tsx
@@ -1,9 +1,4 @@
-import {
-  ChevronDownIcon,
-  CircleIcon,
-  PlusIcon,
-  StarIcon,
-} from "@radix-ui/react-icons"
+import { ChevronDown, Circle, Plus, Star } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -37,14 +32,14 @@ export function DemoGithub() {
         </div>
         <div className="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
           <Button variant="secondary" className="px-3 shadow-none">
-            <StarIcon className="mr-2 h-4 w-4" />
+            <Star />
             Star
           </Button>
           <Separator orientation="vertical" className="h-[20px]" />
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="secondary" className="px-2 shadow-none">
-                <ChevronDownIcon className="h-4 w-4 text-secondary-foreground" />
+                <ChevronDown className="text-secondary-foreground" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
@@ -62,7 +57,7 @@ export function DemoGithub() {
               <DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem>
-                <PlusIcon className="mr-2 h-4 w-4" /> Create List
+                <Plus /> Create List
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -71,11 +66,11 @@ export function DemoGithub() {
       <CardContent>
         <div className="flex space-x-4 text-sm text-muted-foreground">
           <div className="flex items-center">
-            <CircleIcon className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
+            <Circle className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
             TypeScript
           </div>
           <div className="flex items-center">
-            <StarIcon className="mr-1 h-3 w-3" />
+            <Star className="mr-1 h-3 w-3" />
             20k
           </div>
           <div>Updated April 2023</div>
diff --git a/apps/www/app/(app)/examples/cards/components/notifications.tsx b/apps/www/app/(app)/examples/cards/components/notifications.tsx
index c0a2cec57cb..766e16584d3 100644
--- a/apps/www/app/(app)/examples/cards/components/notifications.tsx
+++ b/apps/www/app/(app)/examples/cards/components/notifications.tsx
@@ -1,4 +1,4 @@
-import { BellIcon, EyeNoneIcon, PersonIcon } from "@radix-ui/react-icons"
+import { Bell, EyeOff, User } from "lucide-react"
 
 import {
   Card,
@@ -19,7 +19,7 @@ export function DemoNotifications() {
       </CardHeader>
       <CardContent className="grid gap-1">
         <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
-          <BellIcon className="mt-px h-5 w-5" />
+          <Bell className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Everything</p>
             <p className="text-sm text-muted-foreground">
@@ -28,7 +28,7 @@ export function DemoNotifications() {
           </div>
         </div>
         <div className="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
-          <PersonIcon className="mt-px h-5 w-5" />
+          <User className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Available</p>
             <p className="text-sm text-muted-foreground">
@@ -37,7 +37,7 @@ export function DemoNotifications() {
           </div>
         </div>
         <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
-          <EyeNoneIcon className="mt-px h-5 w-5" />
+          <EyeOff className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Ignoring</p>
             <p className="text-sm text-muted-foreground">
diff --git a/apps/www/app/(app)/examples/cards/components/share-document.tsx b/apps/www/app/(app)/examples/cards/components/share-document.tsx
index fb599c7892d..aea2607cc46 100644
--- a/apps/www/app/(app)/examples/cards/components/share-document.tsx
+++ b/apps/www/app/(app)/examples/cards/components/share-document.tsx
@@ -41,7 +41,7 @@ export function DemoShareDocument() {
         </div>
         <Separator className="my-4" />
         <div className="space-y-4">
-          <h4 className="text-sm font-medium">People with access</h4>
+          <div className="text-sm font-medium">People with access</div>
           <div className="grid gap-6">
             <div className="flex items-center justify-between space-x-4">
               <div className="flex items-center space-x-4">
diff --git a/apps/www/app/(app)/examples/cards/components/team-members.tsx b/apps/www/app/(app)/examples/cards/components/team-members.tsx
index ff8d9a58176..52e841535a8 100644
--- a/apps/www/app/(app)/examples/cards/components/team-members.tsx
+++ b/apps/www/app/(app)/examples/cards/components/team-members.tsx
@@ -1,4 +1,4 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { ChevronDown } from "lucide-react"
 
 import {
   Avatar,
@@ -51,8 +51,7 @@ export function DemoTeamMembers() {
           <Popover>
             <PopoverTrigger asChild>
               <Button variant="outline" className="ml-auto">
-                Owner{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+                Owner <ChevronDown className="text-muted-foreground" />
               </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0" align="end">
@@ -105,8 +104,7 @@ export function DemoTeamMembers() {
           <Popover>
             <PopoverTrigger asChild>
               <Button variant="outline" className="ml-auto">
-                Member{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+                Member <ChevronDown className="text-muted-foreground" />
               </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0" align="end">
diff --git a/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx b/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx
index 46238b12063..a4dd6ca2da0 100644
--- a/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx
+++ b/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { CalendarIcon } from "@radix-ui/react-icons"
 import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
 import { DateRange } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
diff --git a/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx b/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx
index 42c7af13240..8171046e7c5 100644
--- a/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx
+++ b/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx
@@ -1,11 +1,7 @@
 "use client"
 
 import * as React from "react"
-import {
-  CaretSortIcon,
-  CheckIcon,
-  PlusCircledIcon,
-} from "@radix-ui/react-icons"
+import { Check, ChevronsUpDown, PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import {
@@ -105,7 +101,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
               <AvatarFallback>SC</AvatarFallback>
             </Avatar>
             {selectedTeam.label}
-            <CaretSortIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
+            <ChevronsUpDown className="ml-auto opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[200px] p-0">
@@ -133,9 +129,9 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                         <AvatarFallback>SC</AvatarFallback>
                       </Avatar>
                       {team.label}
-                      <CheckIcon
+                      <Check
                         className={cn(
-                          "ml-auto h-4 w-4",
+                          "ml-auto",
                           selectedTeam.value === team.value
                             ? "opacity-100"
                             : "opacity-0"
@@ -156,7 +152,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                       setShowNewTeamDialog(true)
                     }}
                   >
-                    <PlusCircledIcon className="mr-2 h-5 w-5" />
+                    <PlusCircle className="h-5 w-5" />
                     Create Team
                   </CommandItem>
                 </DialogTrigger>
diff --git a/apps/www/app/(app)/examples/forms/account/account-form.tsx b/apps/www/app/(app)/examples/forms/account/account-form.tsx
index a5862b4b210..0eed6c44ebc 100644
--- a/apps/www/app/(app)/examples/forms/account/account-form.tsx
+++ b/apps/www/app/(app)/examples/forms/account/account-form.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { CalendarIcon, CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 import { format } from "date-fns"
+import { CalendarIcon, Check, ChevronsUpDown } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
@@ -174,7 +174,7 @@ export function AccountForm() {
                             (language) => language.value === field.value
                           )?.label
                         : "Select language"}
-                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      <ChevronsUpDown className="opacity-50" />
                     </Button>
                   </FormControl>
                 </PopoverTrigger>
@@ -192,9 +192,9 @@ export function AccountForm() {
                               form.setValue("language", language.value)
                             }}
                           >
-                            <CheckIcon
+                            <Check
                               className={cn(
-                                "mr-2 h-4 w-4",
+                                "mr-2",
                                 language.value === field.value
                                   ? "opacity-100"
                                   : "opacity-0"
diff --git a/apps/www/app/(app)/examples/forms/appearance/appearance-form.tsx b/apps/www/app/(app)/examples/forms/appearance/appearance-form.tsx
index 676884dbbdc..b89dbfeea4e 100644
--- a/apps/www/app/(app)/examples/forms/appearance/appearance-form.tsx
+++ b/apps/www/app/(app)/examples/forms/appearance/appearance-form.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { ChevronDown } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
@@ -76,7 +76,7 @@ export function AppearanceForm() {
                     <option value="system">System</option>
                   </select>
                 </FormControl>
-                <ChevronDownIcon className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
+                <ChevronDown className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
               </div>
               <FormDescription>
                 Set the font you want to use in the dashboard.
diff --git a/apps/www/app/(app)/examples/layout.tsx b/apps/www/app/(app)/examples/layout.tsx
index 1988b8b6f4b..ef2d8c7dae7 100644
--- 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 { cn } from "@/lib/utils"
 import { Announcement } from "@/components/announcement"
 import { ExamplesNav } from "@/components/examples-nav"
 import {
@@ -10,45 +9,73 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
-import { Button, buttonVariants } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
+
+const title = "Examples"
+const description = "Check out some examples app built using the components."
 
 export const metadata: Metadata = {
-  title: "Examples",
-  description: "Check out some examples app built using the components.",
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
 }
 
-interface ExamplesLayoutProps {
+export default function ExamplesLayout({
+  children,
+}: {
   children: React.ReactNode
-}
-
-export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
+}) {
   return (
-    <div className="container relative">
+    <>
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading className="hidden md:block">
-          Check out some examples
-        </PageHeaderHeading>
-        <PageHeaderHeading className="md:hidden">Examples</PageHeaderHeading>
+        <PageHeaderHeading>Build your component library</PageHeaderHeading>
         <PageHeaderDescription>
-          Dashboard, cards, authentication. Some examples built using the
-          components. Use this as a guide to build your own.
+          A set of beautifully-designed, accessible components and a code
+          distribution platform. Works with your favorite frameworks. Open
+          Source. Open Code.
         </PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm">
             <Link href="/docs">Get Started</Link>
           </Button>
           <Button asChild size="sm" variant="ghost">
-            <Link href="/components">Components</Link>
+            <Link href="/blocks">Browse Blocks</Link>
           </Button>
         </PageActions>
       </PageHeader>
-      <section>
-        <ExamplesNav />
-        <div className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
-          {children}
+      <div className="border-grid border-b">
+        <div className="container-wrapper">
+          <div className="container py-4">
+            <ExamplesNav />
+          </div>
+        </div>
+      </div>
+      <div className="container-wrapper">
+        <div className="container py-6">
+          <section className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
+            {children}
+          </section>
         </div>
-      </section>
-    </div>
+      </div>
+    </>
   )
 }
diff --git a/apps/www/app/(app)/examples/mail/data.tsx b/apps/www/app/(app)/examples/mail/data.tsx
index 2807a4a24e1..1c9699f2526 100644
--- a/apps/www/app/(app)/examples/mail/data.tsx
+++ b/apps/www/app/(app)/examples/mail/data.tsx
@@ -186,7 +186,7 @@ export const accounts = [
   },
   {
     label: "Alicia Koch",
-    email: "alicia@gmail.com",
+    email: "alicia@example.com",
     icon: (
       <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <title>Gmail</title>
@@ -199,7 +199,7 @@ export const accounts = [
   },
   {
     label: "Alicia Koch",
-    email: "alicia@me.com",
+    email: "alicia@example.com",
     icon: (
       <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <title>iCloud</title>
diff --git a/apps/www/app/(app)/examples/music/components/album-artwork.tsx b/apps/www/app/(app)/examples/music/components/album-artwork.tsx
index a226c83bcc5..8cdc5e2a262 100644
--- a/apps/www/app/(app)/examples/music/components/album-artwork.tsx
+++ b/apps/www/app/(app)/examples/music/components/album-artwork.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image"
-import { PlusCircledIcon } from "@radix-ui/react-icons"
+import { PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import {
@@ -54,7 +54,7 @@ export function AlbumArtwork({
             <ContextMenuSubTrigger>Add to Playlist</ContextMenuSubTrigger>
             <ContextMenuSubContent className="w-48">
               <ContextMenuItem>
-                <PlusCircledIcon className="mr-2 h-4 w-4" />
+                <PlusCircle className="mr-2 h-4 w-4" />
                 New Playlist
               </ContextMenuItem>
               <ContextMenuSeparator />
diff --git a/apps/www/app/(app)/examples/music/page.tsx b/apps/www/app/(app)/examples/music/page.tsx
index 40960c6b180..5321ccc41d8 100644
--- a/apps/www/app/(app)/examples/music/page.tsx
+++ b/apps/www/app/(app)/examples/music/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from "next"
 import Image from "next/image"
-import { PlusCircledIcon } from "@radix-ui/react-icons"
+import { PlusCircle } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
@@ -64,7 +64,7 @@ export default function MusicPage() {
                       </TabsList>
                       <div className="ml-auto mr-4">
                         <Button>
-                          <PlusCircledIcon className="mr-2 h-4 w-4" />
+                          <PlusCircle />
                           Add music
                         </Button>
                       </div>
diff --git a/apps/www/app/(app)/examples/playground/components/model-selector.tsx b/apps/www/app/(app)/examples/playground/components/model-selector.tsx
index fb669827d07..1269069e650 100644
--- a/apps/www/app/(app)/examples/playground/components/model-selector.tsx
+++ b/apps/www/app/(app)/examples/playground/components/model-selector.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 import { PopoverProps } from "@radix-ui/react-popover"
+import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { useMutationObserver } from "@/hooks/use-mutation-observer"
@@ -64,7 +64,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
             className="w-full justify-between"
           >
             {selectedModel ? selectedModel.name : "Select a model..."}
-            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            <ChevronsUpDown className="opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent align="end" className="w-[250px] p-0">
@@ -154,11 +154,8 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
       className="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
     >
       {model.name}
-      <CheckIcon
-        className={cn(
-          "ml-auto h-4 w-4",
-          isSelected ? "opacity-100" : "opacity-0"
-        )}
+      <Check
+        className={cn("ml-auto", isSelected ? "opacity-100" : "opacity-0")}
       />
     </CommandItem>
   )
diff --git a/apps/www/app/(app)/examples/playground/components/preset-actions.tsx b/apps/www/app/(app)/examples/playground/components/preset-actions.tsx
index 8fb6aa115b3..9b57241a045 100644
--- a/apps/www/app/(app)/examples/playground/components/preset-actions.tsx
+++ b/apps/www/app/(app)/examples/playground/components/preset-actions.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { Dialog } from "@radix-ui/react-dialog"
-import { DotsHorizontalIcon } from "@radix-ui/react-icons"
+import { MoreHorizontal } from "lucide-react"
 
 import { toast } from "@/registry/new-york/hooks/use-toast"
 import {
@@ -40,9 +40,9 @@ export function PresetActions() {
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="secondary">
+          <Button variant="secondary" size="icon">
             <span className="sr-only">Actions</span>
-            <DotsHorizontalIcon className="h-4 w-4" />
+            <MoreHorizontal />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
diff --git a/apps/www/app/(app)/examples/playground/components/preset-selector.tsx b/apps/www/app/(app)/examples/playground/components/preset-selector.tsx
index eefb4b06d5d..f8a99beb95c 100644
--- a/apps/www/app/(app)/examples/playground/components/preset-selector.tsx
+++ b/apps/www/app/(app)/examples/playground/components/preset-selector.tsx
@@ -2,8 +2,8 @@
 
 import * as React from "react"
 import { useRouter } from "next/navigation"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 import { PopoverProps } from "@radix-ui/react-popover"
+import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
@@ -43,7 +43,7 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
           className="flex-1 justify-between md:max-w-[200px] lg:max-w-[300px]"
         >
           {selectedPreset ? selectedPreset.name : "Load a preset..."}
-          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronsUpDown className="opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[300px] p-0">
@@ -61,9 +61,9 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
                   }}
                 >
                   {preset.name}
-                  <CheckIcon
+                  <Check
                     className={cn(
-                      "ml-auto h-4 w-4",
+                      "ml-auto",
                       selectedPreset?.id === preset.id
                         ? "opacity-100"
                         : "opacity-0"
diff --git a/apps/www/app/(app)/examples/playground/components/preset-share.tsx b/apps/www/app/(app)/examples/playground/components/preset-share.tsx
index fa3e695de22..2215d63db7f 100644
--- a/apps/www/app/(app)/examples/playground/components/preset-share.tsx
+++ b/apps/www/app/(app)/examples/playground/components/preset-share.tsx
@@ -1,4 +1,4 @@
-import { CopyIcon } from "@radix-ui/react-icons"
+import { Copy } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import { Input } from "@/registry/new-york/ui/input"
@@ -37,7 +37,7 @@ export function PresetShare() {
           </div>
           <Button type="submit" size="sm" className="px-3">
             <span className="sr-only">Copy</span>
-            <CopyIcon className="h-4 w-4" />
+            <Copy />
           </Button>
         </div>
       </PopoverContent>
diff --git a/apps/www/app/(app)/examples/playground/page.tsx b/apps/www/app/(app)/examples/playground/page.tsx
index 0ab59665ae5..6d046508f3d 100644
--- a/apps/www/app/(app)/examples/playground/page.tsx
+++ b/apps/www/app/(app)/examples/playground/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from "next"
 import Image from "next/image"
-import { CounterClockwiseClockIcon } from "@radix-ui/react-icons"
+import { RotateCcw } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -265,7 +265,7 @@ export default function PlaygroundPage() {
                       <Button>Submit</Button>
                       <Button variant="secondary">
                         <span className="sr-only">Show history</span>
-                        <CounterClockwiseClockIcon className="h-4 w-4" />
+                        <RotateCcw />
                       </Button>
                     </div>
                   </div>
@@ -283,7 +283,7 @@ export default function PlaygroundPage() {
                       <Button>Submit</Button>
                       <Button variant="secondary">
                         <span className="sr-only">Show history</span>
-                        <CounterClockwiseClockIcon className="h-4 w-4" />
+                        <RotateCcw />
                       </Button>
                     </div>
                   </div>
@@ -314,7 +314,7 @@ export default function PlaygroundPage() {
                       <Button>Submit</Button>
                       <Button variant="secondary">
                         <span className="sr-only">Show history</span>
-                        <CounterClockwiseClockIcon className="h-4 w-4" />
+                        <RotateCcw />
                       </Button>
                     </div>
                   </div>
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx
index 7df71bb4a12..389c53c4ced 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx
@@ -1,10 +1,5 @@
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CaretSortIcon,
-  EyeNoneIcon,
-} from "@radix-ui/react-icons"
 import { Column } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
@@ -42,26 +37,26 @@ export function DataTableColumnHeader<TData, TValue>({
           >
             <span>{title}</span>
             {column.getIsSorted() === "desc" ? (
-              <ArrowDownIcon className="ml-2 h-4 w-4" />
+              <ArrowDown />
             ) : column.getIsSorted() === "asc" ? (
-              <ArrowUpIcon className="ml-2 h-4 w-4" />
+              <ArrowUp />
             ) : (
-              <CaretSortIcon className="ml-2 h-4 w-4" />
+              <ChevronsUpDown />
             )}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <ArrowUp className="h-3.5 w-3.5 text-muted-foreground/70" />
             Asc
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <ArrowDown className="h-3.5 w-3.5 text-muted-foreground/70" />
             Desc
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70" />
             Hide
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
index b1a975fd7a9..d39bd53ea61 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
-import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons"
 import { Column } from "@tanstack/react-table"
+import { Check, PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/registry/new-york/ui/badge"
@@ -43,7 +43,7 @@ export function DataTableFacetedFilter<TData, TValue>({
     <Popover>
       <PopoverTrigger asChild>
         <Button variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircledIcon className="mr-2 h-4 w-4" />
+          <PlusCircle />
           {title}
           {selectedValues?.size > 0 && (
             <>
@@ -111,7 +111,7 @@ export function DataTableFacetedFilter<TData, TValue>({
                           : "opacity-50 [&_svg]:invisible"
                       )}
                     >
-                      <CheckIcon className={cn("h-4 w-4")} />
+                      <Check />
                     </div>
                     {option.icon && (
                       <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx
index 3e40a83b4f4..049b2e20c0d 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx
@@ -1,10 +1,10 @@
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon,
-} from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -61,7 +61,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to first page</span>
-            <DoubleArrowLeftIcon className="h-4 w-4" />
+            <ChevronsLeft />
           </Button>
           <Button
             variant="outline"
@@ -70,7 +70,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="h-4 w-4" />
+            <ChevronLeft />
           </Button>
           <Button
             variant="outline"
@@ -79,7 +79,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="h-4 w-4" />
+            <ChevronRight />
           </Button>
           <Button
             variant="outline"
@@ -88,7 +88,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to last page</span>
-            <DoubleArrowRightIcon className="h-4 w-4" />
+            <ChevronsRight />
           </Button>
         </div>
       </div>
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx
index 2dfa8cd2069..8546b2a38ad 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { DotsHorizontalIcon } from "@radix-ui/react-icons"
 import { Row } from "@tanstack/react-table"
+import { MoreHorizontal } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -37,7 +37,7 @@ export function DataTableRowActions<TData>({
           variant="ghost"
           className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
         >
-          <DotsHorizontalIcon className="h-4 w-4" />
+          <MoreHorizontal />
           <span className="sr-only">Open menu</span>
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx
index 10bd91aee2a..a3a87b11c38 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { Cross2Icon } from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
+import { X } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import { Input } from "@/registry/new-york/ui/input"
@@ -51,7 +51,7 @@ export function DataTableToolbar<TData>({
             className="h-8 px-2 lg:px-3"
           >
             Reset
-            <Cross2Icon className="ml-2 h-4 w-4" />
+            <X />
           </Button>
         )}
       </div>
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx
index 270bd8edf16..d7fe8776590 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
-import { MixerHorizontalIcon } from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
+import { Settings2 } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -28,7 +28,7 @@ export function DataTableViewOptions<TData>({
           size="sm"
           className="ml-auto hidden h-8 lg:flex"
         >
-          <MixerHorizontalIcon className="mr-2 h-4 w-4" />
+          <Settings2 />
           View
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table.tsx b/apps/www/app/(app)/examples/tasks/components/data-table.tsx
index 2dd726e5aff..d763f5b84fc 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table.tsx
@@ -70,7 +70,7 @@ export function DataTable<TData, TValue>({
   return (
     <div className="space-y-4">
       <DataTableToolbar table={table} />
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/www/app/(app)/examples/tasks/data/data.tsx b/apps/www/app/(app)/examples/tasks/data/data.tsx
index a507982f623..c4792ba82c2 100644
--- a/apps/www/app/(app)/examples/tasks/data/data.tsx
+++ b/apps/www/app/(app)/examples/tasks/data/data.tsx
@@ -1,13 +1,13 @@
 import {
-  ArrowDownIcon,
-  ArrowRightIcon,
-  ArrowUpIcon,
-  CheckCircledIcon,
-  CircleIcon,
-  CrossCircledIcon,
-  QuestionMarkCircledIcon,
-  StopwatchIcon,
-} from "@radix-ui/react-icons"
+  ArrowDown,
+  ArrowRight,
+  ArrowUp,
+  CheckCircle,
+  Circle,
+  CircleOff,
+  HelpCircle,
+  Timer,
+} from "lucide-react"
 
 export const labels = [
   {
@@ -28,27 +28,27 @@ export const statuses = [
   {
     value: "backlog",
     label: "Backlog",
-    icon: QuestionMarkCircledIcon,
+    icon: HelpCircle,
   },
   {
     value: "todo",
     label: "Todo",
-    icon: CircleIcon,
+    icon: Circle,
   },
   {
     value: "in progress",
     label: "In Progress",
-    icon: StopwatchIcon,
+    icon: Timer,
   },
   {
     value: "done",
     label: "Done",
-    icon: CheckCircledIcon,
+    icon: CheckCircle,
   },
   {
     value: "canceled",
     label: "Canceled",
-    icon: CrossCircledIcon,
+    icon: CircleOff,
   },
 ]
 
@@ -56,16 +56,16 @@ export const priorities = [
   {
     label: "Low",
     value: "low",
-    icon: ArrowDownIcon,
+    icon: ArrowDown,
   },
   {
     label: "Medium",
     value: "medium",
-    icon: ArrowRightIcon,
+    icon: ArrowRight,
   },
   {
     label: "High",
     value: "high",
-    icon: ArrowUpIcon,
+    icon: ArrowUp,
   },
 ]
diff --git a/apps/www/app/(app)/layout.tsx b/apps/www/app/(app)/layout.tsx
index ceaa87acfbb..6838c20355a 100644
--- a/apps/www/app/(app)/layout.tsx
+++ b/apps/www/app/(app)/layout.tsx
@@ -7,10 +7,10 @@ interface AppLayoutProps {
 
 export default function AppLayout({ children }: AppLayoutProps) {
   return (
-    <>
+    <div data-wrapper="" className="border-grid flex flex-1 flex-col">
       <SiteHeader />
-      <main className="flex-1">{children}</main>
+      <main className="flex flex-1 flex-col">{children}</main>
       <SiteFooter />
-    </>
+    </div>
   )
 }
diff --git a/apps/www/app/(app)/og/geist-regular-otf.json b/apps/www/app/(app)/og/geist-regular-otf.json
new file mode 100644
index 00000000000..718fb521998
--- /dev/null
+++ b/apps/www/app/(app)/og/geist-regular-otf.json
@@ -0,0 +1 @@
+{"base64Font":"T1RUTwAMAIAAAwBAQ0ZGIN9uOmAAABXMAACeZkdERUZBTj+sAAC0NAAAAT5HUE9Ttn3F0QAAtXQAABvSR1NVQpIcrgQAANFIAAASlE9TLzJPyiLTAAAL3AAAAGBjbWFwrm6KhgAADtQAAAbWaGVhZCrsuiMAAADUAAAANmhoZWEM9AjIAAALuAAAACRobXR487+RWAAAAQwAAAqqbWF4cAKrUAAAAADMAAAABm5hbWU8hhcjAAAMPAAAApdwb3N0/58AMgAAFawAAAAgAABQAAKrAAAAAQAAAAEAg2zs2StfDzz1AAMD6AAAAADhcDrwAAAAAOFwOvD/0/8kCSIDuAAAAAcAAgAAAAAAAAGuAFAA+gAAAqAAFQKgABUCoAAVAqAAFQKgABUCoAAVAqAAFQKgABUCwwAVAqAAFQKgABUD0QAVAqkAXAK+ADECvgAxAr4AMQK+ADECvgAxAr4AMQK/AFwDFwAxAr8AXAMXADECXABcAlwAXAJcAFwCXABcAlwAXAJcAFwCXABcAlwAXAJcAFwCXABcAtIAMQJZADICWQAyAk8AXALFADECxQAxAsUAMQLFADECxQAxAsUAMQLFADEC8wAxAsAAXANkAFwCwABcARAAXAMSAFwBEABcARD//QEQABABEABbARAADgEQAAgBEAAwARD/4AJWAEMCVgBDAlYAQwKNAFwCjQBcAo0AXAJFAFwCRQBcAh4AXAJFAFwCaAAWA24AXALjAFwC4wBcAuMAXALjAFwC4wBcAuMAXALsADEC7AAxAuwAMQLsADEC7AAxAuwAMQLsADEC8QAxAuwAMQQ+ADECiwBcAm0AXALmADECoQBcAqEAXAKhAFwCoQBcAokAOwKJADsAvAAxAokAOwKJADsCiQA7AokAOwK2AFwCQgAZAkIAGQJCABkCQgAZAkIAGQKyAE0CsgBNArIATQKyAE0CsgBNArIATQKyAE0CsgBNArIATQKyAE0CsgBNAp4AFQOQABUDkAAVA5AAFQOQABUDkAAVAnUAGwJ3ABUCdwAVAncAFQJ3ABUCdwAVAncAFQIfABsCHwAbAh8AGwIfABsCRQBcAuMAXAKnAFwCpwBcAqcAXAKnAFwBtgAxAbYAMQG2ADEBtgAxAbYAMQG2ADEBtgAxAbYAMQG2ADECvgAxAr4AMQK+ADECvgAxAr4AMQK+ADECoAAVAr4AMQJcAFwCXABcAsUAMQEQAAEBEABTAuwAMQKyAE0DkAAVAncAFQIfABsBtgAxAbYAMQK+ADEEVgAVBGgATQJAAC8CQAAvAkAALwJAAC8CQAAvAkAALwJAAC8CQAAvAkAALwJAAC8CQAAvA6QALwJXAFACKQAvAikALwIpAC8CKQAvAikALwIpAC8CVwAvAlMALwL4AC8CjAAvAjgALwI4AC8COAAvAjgALwI4AC8COAAvAjgALwI4AC8COAAvAjgALwI4AC8CWQAyAlkAMgGPADwCVgAvAlYALwJWAC8CVgAvAlYALwJWAC8CVgAvAnoALwJGAFACPAAZAkb/8AD2AE4A9gBQAPYAUAD2//AA9gADAPYATgD2AAEB8QBOAPb/+wD2ACIA9v/TAQX/+wEF//sBBf/7AQX/+wJPAFACT//tAk8AUAEcAFABHABQAZoAUAEcAEYBegBQA24AUAJGAFACRgBQAkYAUAJGAFACRgBQAkYAUAJEAC8CRAAvAkQALwJEAC8CRAAvAkQALwJEAC8CNgAMAkQALwPEAC8CVwBQAlcAUAJXAC8BfwBQAX8AUAF/ADcBfwAbAhMALwITAC8AvAAxAhMALwITAC8CEwAvAhMALwJPAFABjQA3AY0ANwHGADcBjQA3AY0ANwJAAFACQABQAkAAUAJAAFACQABQAkAAUAJAAFACQABQAkAAUAJAAFACQABQAhoAFgM0ABYDNAAWAzQAFgM0ABYDNAAWAksALwIaABYCGgAWAhoAFgIaABYCGgAWAhoAFgImADkCJgA5AiYAOQImADkBHABGAkYAUAIyACoCMgAqAjIAKgIyACoCMgAqAjIAKgIyACoCMgAqAjIAKgIyACoCMgAqAlcALwJXAC8CVwAvAlcALwJXAC8CVwAvAlcALwJXAC8CVwAvAlcALwJXAC8BDgBcAQ4AXAGeAFABDgAnAXoAUAJAAC8CKQAvAjgALwI4AC8CVgAvAPYARgD2//QA9gBGAfEARgD2ACIBBf/7AkQALwJAAFADNAAWAhoAFgImADkCMgAqAlcALwKwADwCvQA3AoUAPAKXADwCQAAvAkQALwKgABUC5AAxAj0AFQKUADcCZQAyAqAANgGBACgCawA8AmUAMgJ8ADICcgA8AnAAPAJJACgCXAAoAnAAPANAAC8DQAAvA0AALwNAAC8DQAAvA0AALwNAAC8DQAAvA0AALwNAAC8DQAAvA0AALwNAAC8DQAAvA0AALwNAAC8DQAAvA0AALwNAAC8DQAAvAqAANgGzABkCWAAUAlgAfgJYADsCWAAqAlgAMAJYADkCWAA4AlgAOwJYABoCWAA4AlgADQPQADEDwgAxA7oAMQO9ADEDzQAxA7cAMQPAADED0AAxA8sAMQSwAKYCWACVAlgAsgJYAKACWACgAlgAhAJYAKUCWAClAlgApgJYAJ8CWACoAlgAlQJYALICWACgAlgAoAJYAIQCWAClAlgApQJYAKYCWACfAlgAqAD6AAABYgAvCWAAPgcIAD4EsAA+AMsALwDLAC8BJQBcASUAXAI9AC8A2QA2ANkANgI3AC8CNwAvAMsALwEpAC8BtAAvAXgALwHe//YB4wAoAd4AMgKCACgBtAAvA44ALwHeADIAywAvAMsALwEUADYB3v/2AwIALwDLAC8CNwAvAWQALwC4AC8AywAvAeMAKADSAC8BLABcAS0AXAJFAC8A0gAvANIALwI3AC8CNwAvANIALwI0AC8A0gAvARQALwDSAC8CNwAvANMALwGqAC8BsAAvAlYALwOSAC8CNAAvA1sALwLQAC8BOQAvATkALwGoAC8BqAAvAVEALwFRAC8BZwAvAWcALwFxAC8BcQAvAagALwGoAC8BjQAvAY0ALwIOAC8CDgAvAY8ALwGPAC8BjQAvAY0ALwFnAC8BZwAvAVEALwFRAC8BOQAvATkALwDPADEBdgAxAXYAMQF2ADEAzwAxAM8AMQIaAC8CGgAvAVAALwFQAC8BaAAxALwAMQIDADwCgQBcBLAAPgcIAD4JYAA+BwcAPgNAAC8DQAAvA5IAMQJuACgCUQAjAi4AOwNEADECWgAxAloAMQN6AFwBjAAvAPwALwF3AC8BCABcAQgAXAI7AFwCOwBcBEQAXAJYAE8DWQAxAlgANAIpAC8CSwAxAokAOwLgADsCogA7AtEALgKoAFwDBwBcAmgAOwJ3ABUCOgAvAjoALwHnAC8COgAvApQAXAI6AC8CKQAxAiUALwI6AC8COgAvAjoALwIaAC8CGgAvAeUALwGSAC8DSQAvAXsAAAKMABUCaAAZAhIAGwJjABYCVQAvAlIAWgMCAC8ESAAvAtAAMQJ2ADEDKAAxAnYAMQLQADECdgAxAygAMQJ2ADEEFgAxAtAAMQKVADECqAAxAqgAMQKYADECmAAxAp8AMQKfADECnwAxAqQAMQKfADEDIgAVAaYAMQJeADEDBgAxAl4AMQGmADECXgAxAwYAMQJeADEDSgAxAaYAMQNUADEDVAAxA1QAMQIdADEDXQAVAzcAXANdABUDNwAVA10AFQM3AFwDXQAVAzcAFQAAAC8AAAAvAAAALwAAAC8AAAAvAAAALwAAAC8AAAAvAAAALwAAAC8AAAAvAAAALwAAAC8AAAAvAAAALwAAAC8AAADHAAAALwAAAC8AAAAvAUgALwC4AC8A/AAvAPwALwF2AC8BdAAvAXQALwF6AC8BGQAvAa4ALwFeAC8BNgAvAQUALwFnAC8AyAAvAM8AMQD8AC8AuAAvAlgAAANAAC8ALwAAAAEAAAOY/yQAZAlg/9P9mQkiAAEAAAAAAAAAAAAAAAAAAAKqAAQCTQGQAAUACAKKAlgAAABLAooCWAAAAV4AMgEJAAAAAAAAAAAAAAAAoQAA/wAB5fsAAAAQAAAAAFVLV04AwAAg/10DmP8kAGQDmADcIAAAkwAAAAACEgLGAAAAIAAEAAAAFgEOAAEAAAAAAAEABQAAAAEAAAAAAAIABwAFAAEAAAAAAAQADQAMAAEAAAAAAAUAIQAZAAEAAAAAAAYADQA6AAMAAQQJAAEACgBHAAMAAQQJAAIADgBRAAMAAQQJAAMAMABfAAMAAQQJAAQAGgCPAAMAAQQJAAUAQgCpAAMAAQQJAAYAGgDrAAMAAQQJABAACgBHAAMAAQQJABEADgBRAAMAAQQJAQAAEgEFAAMAAQQJAQEACgEXAAMAAQQJAQIACgEhAAMAAQQJAQMACgErAAMAAQQJAQQACgE1AAMAAQQJAQUACgE/AAMAAQQJAQYAFAFJAAMAAQQJAQcAFgFdAAMAAQQJAQgAFgFzR2Vpc3RSZWd1bGFyR2Vpc3QgUmVndWxhclZlcnNpb24gMS4wMDI7R2x5cGhzIDMuMS4yICgzMTUxKUdlaXN0LVJlZ3VsYXIARwBlAGkAcwB0AFIAZQBnAHUAbABhAHIAMQAuADAAMAAyADsAVQBLAFcATgA7AEcAZQBpAHMAdAAtAFIAZQBnAHUAbABhAHIARwBlAGkAcwB0ACAAUgBlAGcAdQBsAGEAcgBWAGUAcgBzAGkAbwBuACAAMQAuADAAMAAyADsARwBsAHkAcABoAHMAIAAzAC4AMQAuADIAIAAoADMAMQA1ADEAKQBHAGUAaQBzAHQALQBSAGUAZwB1AGwAYQByAE4AbwAgAHQAYQBpAGwAIABhAEEAbAB0ACAAYQBBAGwAdAAgAGwAQQBsAHQAIABSAEEAbAB0ACAASQBBAGwAdAAgAEcAQQBsAHQAIABhAHIAcgBvAHcAcwBSAG8AdQBuAGQAZQBkACAAZABvAHQAQQBsAHQAIABuAHUAbQBiAGUAcgBzAAAAAAIAAAADAAAAFAADAAEAAAAUAAQGwgAAANgAgAAGAFgALwA5AH4BEwErATcBPgFIAU0BfgGPAZIBtwHOAekB7wIbAjcCWQKSArkCvALIAt0DBAMIAwwDEgMoAzUDmwOpA7sDwA4/HiEehR6eHr0e8x75IBQgGiAeICIgJiAwIDMgOiBEIHAgeSCJIKogrCC0ILkgvSEHIRchIiFVIV4hmSGdIaohsSG1IeUh5yICIgYiDyISIhoiHiIrIkgiYCJlI84kDCRoJOok/yWzJbclvSXBJcwlzyY6J34wAzARMBcwHKeM/wP/Cv8P/xv/IP89/z//W/9d//8AAAAgADAAOgCgARYBLgE5AUEBSgFQAY8BkgG3Ac0B5AHuAhgCNwJZApICuQK8AsYC2AMAAwYDCgMSAyYDNQObA6kDuwPADj8eIB6AHp4evB7yHvggEyAYIBwgICAmIDAgMiA5IEQgcCB0IIAgqiCsILQguSC9IQchFiEiIVMhWyGQIZ0hqSGwIbMh5CHnIgIiBiIPIhEiGiIeIisiSCJgImQjziQLJGAk6iT/JbIltiW8JcAlyiXPJjkndjACMAgwFDAcp4v/Af8F/wz/Gv8f/zv/P/9b/13//wAAAUAAAAAAAAAAAAAAAAAAAAAA/pQAh/5tAAAAAAAAAAD+s/52/j7/7f/pAAAAAAAAAAAAAP98/2n/Xf3Q/cP9sv2u89sAAAAA4cgAAAAAAADh2wAAAAAAAOGc4ibh+OHc4VbhP+E/4SXhkeGL4YThgeF84GgAAOEGAADgRgAA4MTgu+C24LXgfuCE4FHgSeBBAADgOOAv4CPgAd/jAADeZAAA3SXcmtx7AAAAAAAAAAAAANyn2+baBQAAAAAAANHVAAAAAAAAAAAAAAAAAAACpwKiAqEAAQDYAAAA9AF8AmICjAKeAqgCtgK8AAAAAAAAAxIDFAMeAyAAAAAAAAAAAAAAAxwDIAMqAzIDNgAAAAAAAAAAAAAAAAAAAAADKgMsAAADNAM2AzgAAAM4AzwDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADKAAAAygAAAMqAAAAAAAAAAAAAAAAAAAAAAAAAyoAAAAAAAAAAAAAAyIAAAMiAAAAAAAAAx4DIAMiAyQDJgAAAAAAAAMkAyYDOAAAAzwDPgNCA0wDUgNUA1YAAAAAAAAAAAABAcMCFwHLAjYCVQIiAhgB8wH0AckCPgG/AewBvgHMAcABwQJFAkICRAHFAiEAAgAOAA8AFQAZACYAJwAvADIAPAA/AEIARwBIAE4AWABaAFsAXwBnAGwAdwB4AH0AfgCEAfcBzQH4AkwB8AKYAK4AugC7AMEAxQDSANMA2wDeAOkA7QDwAPUA9gD8AQYBCAEJAQ0BFQEaASUBJgErASwBMgH1AiwB9gJKAbkBxAI0AjwCNQI9Ai0CJAKWAiUBaQITAksB7QImAqACKQJIAbEBsgKZAlQCIwHHAqEBsAFqAhQBngGbAZ8BxgAIAAMABgAMAAcACwANABIAHwAaABwAHQA4ADQANQA2ABYATABSAE8AUABWAFECQABVAHEAbQBvAHAAfwBZARQAtACvALIAuACzALcAuQC+AMsAxgDIAMkA5ADgAOEA4gDCAPoBAAD9AP4BBAD/AkEBAwEfARsBHQEeAS0BBwEvAAkAtQAEALAACgC2ABAAvAATAL8AFADAABEAvQAXAMMAGADEACAAzAAeAMoAIQDNABsAxwAqANYAKADUACwA2AArANcAMQDdADAA3AA7AOgAOQDmADoA5wA3AN8AMwDlAD4A7ABBAO8AQwDxAEUA8wBEAPIARgD0AEkA9wBLAPkASgD4AE0A+wBUAQIAUwEBAFcBBQBcAQoAXgEMAF0BCwBgAQ4AZAESAGMBEQBiARAAagEYAGkBFwBoARYAdgEkAHMBIQBuARwAdQEjAHIBIAB0ASIAegEoAIABLgCBAIUBMwCHATUAhgE0AAUAsQAuANoAKQDVAEAA7gAlANEAZQETAGsBGQKbApwCpwKdApcCngKiAp8CmgKEAoUCiAKMAo0CigKDAoICiwKGAokALQDZAHwBKgB5AScAewEpACIAzgCCATAAgwExAhECEgINAg8CEAIOAi4CLwHIAjACJwGcAZ0BoAJdAlcCWQJbAl8CYAJeAlgCWgJcAlECPwJHAkYCMwIxAnoCfgJ7An8CfAKAAn0CgQJ5AncCeAG6AcoB+QH6AgECAgH/AgACBQIGAfsB/AIDAgQCBwIIAGEBDwHUAdkB1QHWAc4B2gILAgwBzwHTAfIB1wHcAdIB2wHYAdACCQHRAgoAAAADAAAAAAAA/5wAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAQAEAgABAQEOR2Vpc3QtUmVndWxhcgABAQEp+BEA+eMB+eQC+BgE+xEMA177cBwJIvpMBRwrGg8cLhIRqR0AAI1CEgHKAgABAAcADgAVABwAIgAoADMAPQBDAEkATwBZAGAAZwBuAHUAfACDAIkAjwCaAKEAqwCyALkAvQDIAMoA1ADbAOIA6ADzAP4BBQEMARIBGAEfASUBKwEyATUBQgFJAU8BVQFcAWIBaQFxAXwBgwGKAY4BlAGbAaIBqAG1AbwBwwHIAc4B1AHfAegB7gH5Af8CBgIMAhYCJQI0AjoCRQJQAlwCYgJtAn0CiwKaAqUCsQK9AsgCzgLZAukC9QMEAxADHgMtAzsDSgNZA2cDdgOEA5IDoAOuA70D0APkA/gEAAQIBA4EFQQcBCMEKQQvBDoERARKBFAEVgRgBGcEbgR1BHwEgwSKBJAElgShBKgEsgS5BMAExATPBNgE2gThBOgE7gT1BQAFCwUSBRkFHwUlBSwFMgU4BT8FQgVPBVYFXAViBWkFbwV2BX4FiQWQBZQFmgWhBagFrgW7BcIFyQXOBdQF2gXlBe4F9AX/BgUGDAYSBhwGKwY6BkAGSwZWBmIGcgaABosGlwajBq0GuAa+BskG1AbgBvAG/gcJBxUHIQcrBzYHPAdHB1IHXgdpB3cHhgeUB6MHsge4B8YH1AfbB+cH7Qf7CAkIFwglCDQIRwhaCGIIaghxCHgIfgiFCIsIjQiUCJsIogipCLAItwi+CMUIzAjTCNoI4QjoCO8I9gj9CQQJCwkSCRkJIAkpCTEJOAk+CUQJTAlTCVoJYAloCXAJdwl+CYUJjAmTCZoJoQmoCa8Jtgm9CcQJywnSCdkJ4AnnCe4J9Qn8CgMKCgoRChgKHwomCkcKYQp0CnsKggqJCpAKlwqeCqUKrAqzCroKwQrICs8K1grdCuQK7wr5CwcLFAsfCy4LOwtMC18LZgtyC34LiguWC6ILqQuwC7cLvgvFC8wL0wvaC+EL6AvvC/YL/QwEDAsMEgwZDCAMJwwuDDUMPAxDDEoMWgxxDI8MpwyuDLcMvgzEDMoM0QzYDN8M5gzqDPEM+Az/DQYNDg0aDSMNLg02DT4NRQ1MDVUNXA1nDW4NdQ18DYYNjQ2WDZ0Npg2tDbYNvw3GDc0N1A3bDeIN6Q3wDfcN/g4MDhMOHw4rDjoORg5UDmAObg56DogOlg6dDqMOqg6xDrgOvw7GDs0O1A7bDuIO6Q7wDvcPAA8JDxAPGw8iDykPMA83D0APRw9OD1UPXA9jD2oPeQ+FD5EPng+sD7MPug/BD8sP1w/pD/oQB0FicmV2ZXVuaTAxQ0RBbWFjcm9uQW9nb25la0NhY3V0ZUNjYXJvbkNjaXJjdW1mbGV4Q2RvdGFjY2VudERjYXJvbkRjcm9hdEVjYXJvbkVkb3RhY2NlbnRFbWFjcm9uRW9nb25la3VuaTFFQkN1bmkwMThGdW5pMDFCN3VuaTAxRUVHYnJldmVHY2Fyb25HY2lyY3VtZmxleHVuaTAxMjJHZG90YWNjZW50dW5pMUUyMHVuaTAxRTRIYmFySGNpcmN1bWZsZXhJSklkb3RhY2NlbnRJbWFjcm9uSW9nb25la0l0aWxkZXVuaTAwNEEwMzAxSmNpcmN1bWZsZXh1bmkwMUU4dW5pMDEzNkxhY3V0ZUxjYXJvbnVuaTAxM0JOYWN1dGVOY2Fyb251bmkwMTQ1RW5nT2h1bmdhcnVtbGF1dE9tYWNyb25SYWN1dGVSY2Fyb251bmkwMTU2U2FjdXRldW5pQTc4QlNjZWRpbGxhU2NpcmN1bWZsZXh1bmkwMjE4dW5pMUU5RVRiYXJUY2Fyb251bmkwMTYydW5pMDIxQVVicmV2ZVVodW5nYXJ1bWxhdXRVbWFjcm9uVW9nb25la1VyaW5nVXRpbGRlV2FjdXRlV2NpcmN1bWZsZXhXZGllcmVzaXNXZ3JhdmVZY2lyY3VtZmxleFlncmF2ZXVuaTFFRjhaYWN1dGVaZG90YWNjZW50dW5pMDEzQi5sb2NsTUFIdW5pMDE0NS5sb2NsTUFIUi5zczA0UmFjdXRlLnNzMDRSY2Fyb24uc3MwNHVuaTAxNTYuc3MwNEkuc3MwNUlhY3V0ZS5zczA1SWNpcmN1bWZsZXguc3MwNUlkaWVyZXNpcy5zczA1SWRvdGFjY2VudC5zczA1SWdyYXZlLnNzMDVJbWFjcm9uLnNzMDVJb2dvbmVrLnNzMDVJdGlsZGUuc3MwNUcuc3MwNkdicmV2ZS5zczA2R2NpcmN1bWZsZXguc3MwNnVuaTAxMjIuc3MwNkdkb3RhY2NlbnQuc3MwNnVuaTFFMjAuc3MwNkFkaWVyZXNpcy5zczA4Q2RvdGFjY2VudC5zczA4RWRpZXJlc2lzLnNzMDhFZG90YWNjZW50LnNzMDhHZG90YWNjZW50LnNzMDhJZGllcmVzaXMuc3MwOElkb3RhY2NlbnQuc3MwOE9kaWVyZXNpcy5zczA4VWRpZXJlc2lzLnNzMDhXZGllcmVzaXMuc3MwOFlkaWVyZXNpcy5zczA4WmRvdGFjY2VudC5zczA4SWRpZXJlc2lzLnNzMDUuc3MwOElkb3RhY2NlbnQuc3MwNS5zczA4R2RvdGFjY2VudC5zczA2LnNzMDhBX0kuZGxpZ1VfSS5kbGlnYWJyZXZldW5pMDFDRWFtYWNyb25hb2dvbmVrY2FjdXRlY2Nhcm9uY2NpcmN1bWZsZXhjZG90YWNjZW50ZGNhcm9uZGNyb2F0ZWNhcm9uZWRvdGFjY2VudGVtYWNyb25lb2dvbmVrdW5pMUVCRHVuaTAyNTl1bmkwMjkydW5pMDFFRmdicmV2ZWdjYXJvbmdjaXJjdW1mbGV4dW5pMDEyM2dkb3RhY2NlbnR1bmkxRTIxdW5pMDFFNWhiYXJoY2lyY3VtZmxleGkubG9jbFRSS2lqaW1hY3JvbmlvZ29uZWtpdGlsZGV1bmkwMjM3dW5pMDA2QTAzMDFqY2lyY3VtZmxleHVuaTAxRTl1bmkwMTM3bGFjdXRlbGNhcm9udW5pMDEzQ25hY3V0ZW5jYXJvbnVuaTAxNDZlbmdvaHVuZ2FydW1sYXV0b21hY3JvbnJhY3V0ZXJjYXJvbnVuaTAxNTdzYWN1dGV1bmlBNzhDc2NlZGlsbGFzY2lyY3VtZmxleHVuaTAyMTl0YmFydGNhcm9udW5pMDE2M3VuaTAyMUJ1YnJldmV1aHVuZ2FydW1sYXV0dW1hY3JvbnVvZ29uZWt1cmluZ3V0aWxkZXdhY3V0ZXdjaXJjdW1mbGV4d2RpZXJlc2lzd2dyYXZleWNpcmN1bWZsZXh5Z3JhdmV1bmkxRUY5emFjdXRlemRvdGFjY2VudHVuaTAxM0MubG9jbE1BSHVuaTAxNDYubG9jbE1BSGEuc3MwMWFhY3V0ZS5zczAxYWJyZXZlLnNzMDF1bmkwMUNFLnNzMDFhY2lyY3VtZmxleC5zczAxYWRpZXJlc2lzLnNzMDFhZ3JhdmUuc3MwMWFtYWNyb24uc3MwMWFvZ29uZWsuc3MwMWFyaW5nLnNzMDFhdGlsZGUuc3MwMWEuc3MwMmFhY3V0ZS5zczAyYWJyZXZlLnNzMDJ1bmkwMUNFLnNzMDJhY2lyY3VtZmxleC5zczAyYWRpZXJlc2lzLnNzMDJhZ3JhdmUuc3MwMmFtYWNyb24uc3MwMmFvZ29uZWsuc3MwMmFyaW5nLnNzMDJhdGlsZGUuc3MwMmwuc3MwM2xhY3V0ZS5zczAzbGNhcm9uLnNzMDN1bmkwMTNDLnNzMDNsc2xhc2guc3MwM2FkaWVyZXNpcy5zczA4Y2RvdGFjY2VudC5zczA4ZWRpZXJlc2lzLnNzMDhlZG90YWNjZW50LnNzMDhnZG90YWNjZW50LnNzMDhpLnNzMDhpZGllcmVzaXMuc3MwOGkubG9jbFRSSy5zczA4aWouc3MwOGlvZ29uZWsuc3MwOGouc3MwOG9kaWVyZXNpcy5zczA4dWRpZXJlc2lzLnNzMDh3ZGllcmVzaXMuc3MwOHlkaWVyZXNpcy5zczA4emRvdGFjY2VudC5zczA4YWRpZXJlc2lzLnNzMDEuc3MwOGFkaWVyZXNpcy5zczAyLnNzMDhmX2YubGlnYXRfdC5saWdhZmkubGlnYWZsLmxpZ2FMYW1iZGF1bmkwM0E5bGFtYmRhcGl1bmkyMTA3dW5pMjRGRnVuaTI3NzZ1bmkyNzc3dW5pMjc3OHVuaTI3Nzl1bmkyNzdBdW5pMjc3QnVuaTI3N0N1bmkyNzdEdW5pMjc3RXVuaTI0RUF1bmkyNDYwdW5pMjQ2MXVuaTI0NjJ1bmkyNDYzdW5pMjQ2NHVuaTI0NjV1bmkyNDY2dW5pMjQ2N3VuaTI0Njh6ZXJvLnNzMDlvbmUuc3MwOXplcm8udGZvbmUudGZ0d28udGZ0aHJlZS50ZmZvdXIudGZmaXZlLnRmc2l4LnRmc2V2ZW4udGZlaWdodC50Zm5pbmUudGZ1bmkyMTUzdW5pMjE1NHVuaTIxNTV1bmkyMDgwdW5pMjA4MXVuaTIwODJ1bmkyMDgzdW5pMjA4NHVuaTIwODV1bmkyMDg2dW5pMjA4N3VuaTIwODh1bmkyMDg5dW5pMjA3MHVuaTAwQjl1bmkwMEIydW5pMDBCM3VuaTIwNzR1bmkyMDc1dW5pMjA3NnVuaTIwNzd1bmkyMDc4dW5pMjA3OXVuaTAwQTB1bmkzMDAyaHlwaGVuX2h5cGhlbl9oeXBoZW5fZ3JlYXRlci5saWdhaHlwaGVuX2h5cGhlbl9ncmVhdGVyLmxpZ2FoeXBoZW5fZ3JlYXRlci5saWdhdW5pMzAwM3VuaUZGMDZ1bmlGRjBBdW5pRkYyMHVuaUZGM0N1bmlGRjFBdW5pRkYwQ3VuaUZGMDF1bmlGRjAzdW5pRkYwNXVuaUZGMEV1bmlGRjFGdW5pRkYwMnVuaUZGMDd1bmlGRjFCdW5pRkYwRnBlcmlvZC5zczA4Y29sb24uc3MwOHNlbWljb2xvbi5zczA4ZWxsaXBzaXMuc3MwOGV4Y2xhbS5zczA4ZXhjbGFtZG93bi5zczA4cXVlc3Rpb24uc3MwOHF1ZXN0aW9uZG93bi5zczA4cGVyaW9kY2VudGVyZWQuc3MwOHVuaUZGM0Z1bmlGRjFBLnNzMDh1bmlGRjAxLnNzMDh1bmlGRjBFLnNzMDh1bmlGRjFGLnNzMDh1bmlGRjFCLnNzMDh1bmkwMEFEdW5pMzAxQ3VuaUZGMER1bmkzMDA4dW5pMzAwOXVuaTMwMTB1bmkzMDExdW5pRkY1QnVuaUZGNUR1bmkzMDBDdW5pMzAwRHVuaTMwMEF1bmkzMDBCdW5pMzAxNHVuaTMwMTV1bmkzMDBFdW5pMzAwRnVuaTMwMTZ1bmkzMDE3dW5pRkYzQnVuaUZGM0R1bmlGRjA4dW5pRkYwOXVuaTBFM0ZsZXNzX2h5cGhlbi5saWdhbGVzc19oeXBoZW5faHlwaGVuLmxpZ2FsZXNzX2h5cGhlbl9oeXBoZW5faHlwaGVuLmxpZ2FsZXNzX2h5cGhlbl9ncmVhdGVyLmxpZ2F1bmkyNjM5c21pbGVmYWNldW5pMjExN21pbnV0ZXNlY29uZHVuaTIxMTZ1bmkyNDBDdW5pMjNDRXVuaTI0MEJFdXJvdW5pMjBCNHVuaTIwQkR1bmkyMEI5dW5pMjBBQW5vdGVxdWFsZ3JlYXRlcmVxdWFsbGVzc2VxdWFsYXBwcm94ZXF1YWxpbmZpbml0eWludGVncmFsdW5pMjIwNnByb2R1Y3RzdW1tYXRpb25yYWRpY2FscGFydGlhbGRpZmZ1bmkwMEI1YXJyb3d1cHVuaTIxOTdhcnJvd3JpZ2h0dW5pMjE5OGFycm93ZG93bnVuaTIxOTlhcnJvd2xlZnR1bmkyMTk2YXJyb3dib3RoYXJyb3d1cGRudW5pMjE5RHVuaTIxRTR1bmkyMUU1dW5pMjFBOXVuaTIxQUF1bmkyMUIwdW5pMjFCMXVuaTIxQjN1bmkyMUI0Y2FycmlhZ2VyZXR1cm51bmkyMUU3YXJyb3d1cC5zczA3dW5pMjE5Ny5zczA3YXJyb3dyaWdodC5zczA3dW5pMjE5OC5zczA3YXJyb3dkb3duLnNzMDd1bmkyMTk5LnNzMDdhcnJvd2xlZnQuc3MwN3VuaTIxOTYuc3MwN2Fycm93Ym90aC5zczA3YXJyb3d1cGRuLnNzMDd1bmkyNUNGY2lyY2xldW5pMjVDQ2xvemVuZ2V0cmlhZ3VwdW5pMjVCNnRyaWFnZG51bmkyNUMwdW5pMjVCM3VuaTI1Qjd1bmkyNUJEdW5pMjVDMXVuaTAzMDh1bmkwMzA3Z3JhdmVjb21iYWN1dGVjb21idW5pMDMwQnVuaTAzMEMuYWx0dW5pMDMwMnVuaTAzMEN1bmkwMzA2dW5pMDMwQXRpbGRlY29tYnVuaTAzMDR1bmkwMzEydW5pMDMyNnVuaTAzMjd1bmkwMzI4dW5pMDMzNXVuaTAzMjYubG9jbE1BSHVuaTAzMDguc3MwOHVuaTAzMDcuc3MwOGRpZXJlc2lzLnNzMDhkb3RhY2NlbnQuc3MwOHVuaTAyQkN1bmkwMkI5dW5pMDJDOE51ZXZvR2xpZm9ibGFja0NpcmNsZWRibGFja0NpcmNsZWRTdHJva2Vjb3B5cmlnaHQgbWlzc2luZ0dlaXN0IFJlZ3VsYXIBAQIAAQAFABAAFgAcACIAKAA2AD4ARABrAHUAfgCHAJ8AogCvALoAwQDJANEA1gDkAO8A+wECAVABZQF7AYUBjgGTAZoBpgGwAbMBwwHLAdUB3QHkAeoCBAIQAisCRAJWAmUCcAJ4AoECjwKWAp8CpwKtArICwwLOAtsC6wLwAwYDDwMbAyUDLAM0AzsDQwOCA84D0gQIBBQEGAQgBC0ESwRlBHYEewSGBI8ElwSfBKgErwS2BL0ExQTNBNUE4ATnBQQFSwWGBbYFvgXjBfYGFAYaBikGOAZRBmkGdAZ5BoUGiwaWBqAGqgazBsAGzQbZBt8G5wdJB6gH8ggfCHoIowkQCUcJpQoCCj4KhQrYCxwLKAtVC50LvQv/DDMMPwx5DLAM5g0DDRANJQ03DVgNhw2lDdEN7Q31DiEORQ5eDmcOjA6sDroO4Q8EDyoPPA9dD4APjg+hD8IP0g/xEBAQGRA5EEYQWhBfEHoQlxCaELYQyRDSEO0Q9xEQESoRRBFdEXQRjBGkEbwR0hHoEf8SFhIlEjwSUhJnEnsSjxKjErcSyRLTEuYS7hL/ExATIhMmEzcTQRNSE1YTZhN1E4UTlROlE7UTwxPSE+ET8BP+FAwUGhQoFDYUPhRHFFAUXRRqFHcUhBSRFJ4UphSrFLcUwRTJFNEU3BTnFPIU/RUIFRMVHhUpFTL5WhULFXwdPQZONk7gBQ4V5ewxBg5/3fga3Qt74fjO4QuL4fiu4QsVyga6mZ+mo5d6epweCxX3lMv7lAYO9wxorhILFW2idKqpo6KpqnOhbWx0dWwe9zEWbaJ0qqmjoqmqc6FtbHR1bB4O9wv37vcL++4FC3/d9zzX9ybdC/cHHesG9xQdC0cHv21Vpz0b+y5F+xj7Jfsl0fsY9y4fC+8dDvcQogVoBylHUjWHHgugdvdd4ffu2It3C93Dq8GoHwt/02R2+GDdC3/XS9f4FN0L0kT3OwvD+AoV5oQFx5u3rM0bC9i9YDOMH/subwUL9xj3IRXXy4rZmh4L+yrX+PB3C9YD+DR/Ffdg9zn3Ofdh91/7Ofc5+2D7YPs5+zn7X/th9zn7OfdgH/u6+AYV9zj3FfcV9zn3OfcV+xX7OPs5+xX7Fvs5+zn7FfcW9zkeC6+aoKWzGspWuUZHVV1MY6Bxr3weC573TBWpop6traJ4bWl0dWlpdKGtHg74hBb4pjX70AcL9x8d9/Ldf3cLd+4oHQtbeG9kWhoL4wODHfc58vH3Nh4LjTgF2ffUBuQdC+gdDjkHxXNPr0Mb+x0rIfsrHwvnIB39WuMHCxXOBub3FgUsBgv7cMGtdtK4Cy9SzvcAHwv3z9sByQu6950VVR3x5cnvqh5tHfsnK/sA+z0f6HAdC40d9z0r9wD7J74dC/hc+KYVLwb7EfxH+xH4RwUvBvc3/KYF9wAGC/cJ+CT3CfwkBfcABvc3+KYFLwb7EfxHBQs+h2i3tBoxFmEd3o3Lt6G8CAvnxEj7AIkf+wCKUkgyGwvb+KYV/Kbh+KYHC0LIXtuQHR4Lzgbm9xYFLAYOEtv/AE+AAP//sIAA4Qvp48HZqR8Li/cNJ3b5WncL+z3r+wD3JwvhNuA33wvjA34dC/mMXx37cvjQFeuMBfuOzwcL+PX3FgG69zKHHQ73WxV8HT0GTjZO4AUO/wAxgADjd6B3Evclz1m9CxX3AB0L95zH+1EGjKKmpbGlp54YxbKutsAaCxWUHWqkc6wfCyAdNgb8ff1aBeAGCwHn4wPnIB39Wgss4VP0iR4Ldvex4feR4QsoSntJTRoL+xp29y/3AgsVIgdOxuZl4hv3MPcA5fcT9wQ45PsKmB/3UvdXBe/8fTX4EAf7WPtfBTQHwYwF743RVDoaPkRVJkIvudNDHgsB5+P34OcD9/4gHfui/Vrj97H3QQbytXZLkR+d+1wF5AZ392WE1m2vRZYZyp3Eyt4a9xgu3vspHvtK++cV95H3SgfrwV06OlVeKx8LA38dC/Md97H3OwaWBvc2+7EF7Ab7Pfe+BeymwdLuGvcbLtv7Mx77O/vnFfeR9zsH8sRdOjpSXiQfC8wD+DR/FXUdiR0fCwO1HQtFHcb7FkUdDs1ZuUVBVVo+gh7nHQsvkgVUc1hrUxsxVcn1gx/4EwaKsgX3UoIi1vsIGwsD+JD5AhXj/GQ19/4H/A/8qQUw+H3h/BoHC/f3FfvK98sF+wUG96P7owULvPcKHQtTlkagvxq9uqjFC/fL+8sF9wUGC2qkc6yUHR4OErrl95xWHQv7YPs59zn3YQuae3eYZhsL+wb6OwG6C/UyrPsMogt/3Vp2+GTZC/sFOEokdh8Le8d0dvdFxAvh+wwF9Abi9wwFCwG65gNJHQv4B/f8FTX3Wwf7B4dGMvsStB33SvT3D/dkH7gHC/km934VLZEF+wF2Rk4kG/s1RvcZ9yv3LM/3Gvc27M9UKKIf6JEF9yBsKOn7Kxv7YvsI+zr7Yvth9wn7Ofdh9zjs8PcppR8Lf9dgdvimd+73FhLb4feI4TndE3w8HRO8KVRXOj9rv+0e99A1++kH+wTFMvcKHhO60Miqz6cfE3o0BwvhOd0TeQA8HRO5AClUVzo/a7/tHvfQNfvpB/sExTL3Ch4TuIDQyKrPpx8TdIA0BwtgHfhb9wEdC/j594wV+GMz/GMH+wZKS/sH+wdKy/cGHvhjM/xjB/s28iX3OQtycIBsbRpatGe9pKWTn6QezAcLtpiisbAaxVa5RkxUYVWDHsyHBaGOop2uG6ukc20L3Pt/4B0LA/dh+XcVLAZM+xYFzgYL+OcH9+f85wX3FPlaMwYL91/3Ofc592D3YPc5+zn7X/th+zn7OftgC9sgHfzyB021Yckex9ddBnWBlaEf+O4HC9+UFe/3GQX7GQcO9xXvHQv3tn8V9yfr9wD3PQslHdr3DAtxeXpvaXOtnX0eC9vIuNS8brFcnwvrjAX7js/4GAcLFTv4cNsH/HALKss+3NzL2OzsS9g6C6yko6yscqNqanJzagtFT2gx+wRJy+p4HgtfdKq7Hw4zHc73FpodC+E24DndE/aA962nFc7FrsOlHzQHQlNkLkpeqLx1HjGFBS6k3073BRv3H+vV9yAfE+6A+HIHE+4gOQYT9iBDHRP2gPsr7CH3HR77JPeVFfcAxM7nHhP2QE4dE/aARx0T94AL4TbgOd0T94D3racVzsWuw6UfNAdCU2QuSl6ovHUeMYUFLqTfTvcFG/cf69X3IB8T74D4cgcT7yA5BhP3IEMdE/eA+yvsIfcdHvsk95UV9wDEzuceE/dATh0T94BHHQt0HRO5NR0TvOC1YDOMH/subQX7CnQ5cPsCGizhU/QeE7rfxbi7oR8Teku7esEeE3mw13UGdYGVoR/3aAf3Ij7b+x0eE7l6HYYdC+E33zzaE7hANx0TuIAvHRO4QE0dE3hAQR0TuQA2HRO4QPsJdjhw+wQaE7YAC3/dRdH4Hs1J2c73FhK65fe84f//sIAA/wBPgAA92ROsgPib+KYVE64ANQYTngAtHROdADEdE1yAjkEF2QYTnID8EvedFfK16/cC9wG2KiUpYCr7AfsCYevuHgsSteX3nOE33zzaE7k3HRO6Lx0TuU0dE3lBHRO8Nh0TufsJdjhw+wQaC6B291jT9z/T91t3AYH4gQOvFtQGr/dYBfcZBmf7WAXUBq/3WAXcBpbTBTwGq/c/BdcGltMFQQaw91tBimf7WgX7GQaw91tBimf7WgUyBoBDBeEGbPs/BTcGgEMF3Qbh0xWr9z8F9xgGbPs/BQ6F9wb4qOESuufo9wj7Ad/05xPs94P3YBXfBsKeu72tHubJxh1bdlReHkxWdEtBGhP0hPstFXMd4fjK4QHV5/fg5wP3K/d9FS+FBfskl/cGLPcwG/cU9w3P9xj3ASPL+xSvHzSjIqLiGs7Gtdvsz1EzmB7nkQX3F3wm6vstG/scK0D7DPsH9VL3B24f9yFnyWBDGpUdC/huFfsm6iX3IdfKrsuyHvs4fUswIhtPXKa7dB8uhAUnruBV8hv3Yc/3XPdp9wNy5VjAH8BXTKFNG/snIyr7Lx/nFuzM0OceE/jqzUYqiR8sikZIKxsT9DNNzuofDov3Avim4RK65+D3ASvj8ucT7PeB92AV4wbQnK3BsB7ixsYdXHhYYB5EUXVaMxoT1H77YBX3AfcC+wEGDvtS9xbcdvhm1393Uh33juET1tv4phX8puH30QcT5uzCv9/aq1cqHvvR4ffpB/cEUeT7DR4T6kJNa0RwHxPaiOYFsP1kRR0O+wfb+VXbAfdV3LTJA/gN96cV4AdPiWDD3BreB/BB0iEeXDsG9Y+zckYaLwcxvkrSfR6KB0J9WkkwGi8HRmNyIY8eO7oH9dXS8B/eB9y2w8eJHg4VypEFyHlarFQbIGP7BfsKKrY06NfFweLfVcJGHxP09xodE+ypnn5wlR/7HftCFbuMqaqxG7eibFtacmtgYm+rvIwfDiMdAbrl98blA0odDvtr00P3axK6NB0TYPcoXhWquAUTUFEGZWEFE5CEHROg9yIdHxNgn5ujmZ8eDvgKexX3X/cO9yH3efd7+w73Iftf+1/7Dvsh+3v7efcO+yH3Xx/7ffgGFfdG4vcA9yb3JuL7APtG+0Q0+wD7JvsmNPcA90QeC/tS9xbH9wgdE65EHRO2iB0TzvzyB/vt+PIFxv4YRR0O+IYV54UF6p7FwOAb2sJbR1RUVUJcH/sLP/suPvtrGviH4fwaBo7S9x/rwKoI9s3d0fMa9wgr4fsW+yIuKvsXeB4ORh0S92PDE3DyWxWnZgW2lax7axoT8I8dE3BhZAUT8F6yqnW7G8K2tL/AY7BSH7a6BVYGDjgd7vcWAaH4gmodC/sbFfsg9wT7Bvcg9yD3BPcG9yD3H/sE9wX7IPsg+wT7BfsfHsQW9uPi9vXkNCD7ADIzISAz4/cAHgv4mcf3GXcBuvfqA/gZ+NUV+wsGx/JXqU8kT/JXbcckBfsLT/cLBk8kv23H8sckv6lP8gX3CwYO+N3D1sMBusPWwwP3IfjdFb61s8C/YbVYV2FhV1a1Y78fZekVnpydoJ+ceXh3enl3dnqdnx4Oi/cC+Ox3EsH3ASzjE9DP2h0l/VoV9wH3AvsBBg73AB0T+IUdcnJvZx8L+1L3FsfX+Q53AdvhA4odK/4YRR0OoHb4pnfs8hLR9Sv3Ax0rjB0O8B0soh/nkQX3IGwo6fsrG/ti+wj7Ovti+2H3Cfs592ELofimFfdV/JwFqAZ4WgVygXyBchtOP9EGx7GlxJ8f92r46QUwBvst/Er7MvhKBQvX+A7XAfcY4QP3GPkeFfsMPj/Y+8wHMMBY6x7sHQv7Atv5UNsSuveHOd0T0Pe2+YIVE+D7hzsGE9D3Nf1QBhPg+zU7BhPQ94cGDvfyXh0T6Fn78hW0BmT7LwW9BsT3LwX3AvsBBw4wHe73Fs0dC6B2+Vp37vcWAfek4wOgIB33j/w4Bfu24/e2B/eO+DgFIwb7Uvvb+1P32wULYB3j94EH5e/3jfvlBfYG+734Jveq98gF+wMG+9D78gX38gcLEufj+A/jE15EHRNuiB0TnvzyB/vt+PIFC4VeHVH4MhVzHfsnK/sA+z1VHR/7LfepFfcOw9Ts7MNC+w77DlNCKipT1PcOHgv3yfv/FZMdOks+Kh7YFsalsLW1pmZQUHBmYWFxsMYeC/tS9xbH7R33Ef4YRR0OTp29asIb5cTk9yLsYOIuP1FVNDfBVNAfE/SyqZumnx9AgmpgXBsLJR3a9xYB90PjA/gTIB373DX3DPyu+xI19+jh+xL4rvcMBgvhA/cX+McVakQ/0vxa4fha9xnX+xmsB7ejpq0e3dc5BiheUTIfC6B2+KZ38uwS2eUz9wMdM94iHSAdE7CP+5sFyQaj90sF2wf7mjsVo/tLBckGj/ebBTEGDrDC0Br3CSnd+yD7ECgq+xV/HueFBeGWw8fcG+HDXEmKH0kL+PX3FgG696yHHcIWUR0VtaqouLiqbmFlbHNeXmyjsR4LE+igIB33j/w4Bfu24/e2B/eO+DgFIwb7Uvvb+1P32wUL+JsgHTX7jOod1cuswKgfCyAdNfgpB/si+0kv+2n7ehrnBvd87/dp9yL3Sx7dBw4gY/sF+wof0GAVu4ypqrEbt6JsW1pya2Bib6u8jB8OEqD5ChPcLB0L4ffLB+zCv9/aq1cqHvvL4ffpB/cEUeT7DUtNcVNsHguF9wYBuvcIA/SFXh0O+PPyAbr1A+/48xX3Fh1sonapHw7VHRPwC/ladwG85QO8IB37HAeZ+1kFyQaZ91kF9xwHDgHq4QP3SYgV+Kk1/KkHYHRvaB5hP78G5LjF5B8L2R0O4RPo90mIFfipNfypB2B0b2geYT+/BuS4xeQfC/caHamefnCVH8qRBch5WqxUGwsVT/dcB+sdBw4D93r5yRX7S/xn90v8aAXdBvtL+Gj3S/hnBQsV91wG6x37qAcLIB37egcvljCQLx7DBpDnlubnGvd6BxPgC/gU+AIV5ZEF8no0ziEb+w45SyUj83DrdR8LSpHDXdQb28PD3dhXx0Jwd4N3dx+Y7QX3LAvPFft64/d6B+eA5obnHlMGhi+AMC8aE+AL+wL58AGz+A4Ds/sCFd0G97z58AU4Bg4VvwbkuMXkH/ipNfypB2B0b2geYQYT9gsV1cuP2Zke9xChBYYH+xBHTzU+aK20Hgv4cBUiBvc++1z7PvtcBfQG9x33NgXXBwsV9+jh+xL4rvcM4fvcNfcM/K77EgYO+1L3FgG69zID92FPFSwGTPsWBc4GDvcoNdX7FPsCNUgmdh7ohAXBmLqyyxsLFfcOxtjo6MY++w77DFBALi5Q1vcMHgugdvimd+73FgHb4QNPHQvMiAW5lKGitBuqo3Zsbn51ZnMfa3YFCxVCyVLb28nE1B5JBmZqbmBgaqiwHgvX90h3AfeK2wP3iiAd+0j7Lj/3LgsGvG5NqkQb+x41IPs++z7hIPceC0ErXfsD+w0azAb3E8D3CNnvHrgL2Nc+BmF2obcf98z3Itf7IvcMBwvh+QR3AefjA+cW+E7h+/b5BDMGC/kEywG695QDuvlEFUv3lMsHDhVsonap9xYdHgsb+zVG9xn3K/csz/ca9zbxy1ALdvlad/cJHQv3GAf3O94y+0n7Rzgy+zsfDgHn4/fb5wP37yAd+5P9WuML4Vp296bh96zhErzn+EHgR88L9wYdDkB/UmBJGypT1PcO9w7D1OwL9yYdu2i4XZkfC+H8A/d49+/f++/3dvf74QcL9wodDuET6Nv4phX8puH4pgcT8AsB94njA/i9IB38pDX3cAsHMMBY6x7Y1z4GYXahtx8LFfsC9wH3AmIHsvcvBVkGC6AW6wbR910F974G0ftdBQvzOHb45/cHi3cS5+P4D+MLAefhA+cgHf1a4flaBwsV55nAwd4bysZn+wKaHwvH97zHAfcpyfdGyQP3wAv7FXb58HcB59sD5/laFQt/2vfZ3RK75ffN7DjeC/cz6N33HvcbLtv7Mx8LEtv/AE2AAP//soAA4Qv3ZRXm+xYFzgZM9xYFC8f3McXRxwH4B8wD+C0LJB3KKB285wv3AgG69wEDugv7lPlaBfsKBgugdvladwH30t8D9/wLqaKgqql0oG1tdHZtC7Soa1qKH1uKbGxlGwu+9x33JLz7JOn3Lb0L9wIBvPcBxfcBA/fZC2Rue3F3H8qTpsHAGwtkHfeH9wIBC/cjHe4L+F/3AvcvdwG89wELBvug+6EF9wUGDvs23eh2r90L9wB643X3AAv47BVSQAYT8PcnC4J0dH96G3d+mp4Li/M4dvjn9weLdwuL+VoBoPnHA/c1C535OAH3Pd8D92cLTI/HWtgb18e/zQv3ids792H3G9sSC/j1FTD7pr/1tAYL9y3X+y33SAcOAQABAAAiAACrAAGHAQCsAgGJAQCvAQCKAAAjAQGLAQCxAAGNAQAlAACaAAGPAQAmAACyAAGRAACzAQGSAAC1AAGTBQAnAQGZBgApAAGgAQAqAAGiAAC2AgGjAAC5AAGkAgArAAGnAQAsAAGpAQAtAAGrAgCMAAAuAQGuAgC6AAGxAAAwAAC7AwGyAQCNAAC/AACOAAAxAACdAAAyAQG0AgA0AAG3AQDAAAG5AwA1AAG9AwA2AADBAAHBAADCAgHCBAA3AQHHAwA5AQDFAAHLAADGAAHMAQA7AAHOAADHAAHPJgBCAADIAAH2AQDJAgH4AQDMAQCQAABDAQH6AQDOAAH8AQBFAACnAAH+AQBGAADPAAIAAADQAQIBAADSAAICBQBHAQIIBgBJAAIPAQBKAACRAADTAgIRAADWAAISAwBLAAIWAgBMAAIZAQBNAAIbAgCSAABOAQIeAgDXAAIhAABQAADYAwIiAQCTAADcAACUAABRAACiAABSAQIkAgBUAAInAQDdAAIpAgCVAABVAAIsAwBWAADeAAIwAADfAgIxBABXAQI2AwBZAQDiAAI6AADjAAI7AQBbAAI9AADkAAI+MwCLAACPAAJyBAARCQJ3HwBjAACbAAKXAQCeAACjAAKZAAFAAwKaGAAPAAANAAAbAQB5AAACAABgAAAgAAB7AAByAAB0AAALAAKzAAAEAAAQAAA9AAK0HQAOAALSAABvAACJAABAAALTAQAJAQBcAABeAAA8AAA+AALVEwB1AQBpAAB3AABBAAAIAABqAAB4AABrAQADAABoAABlAALpBgAhAAAHAABzAABmAACqAAClAALwAACZAAChAALxAQBdAACgAABwAQLzAwBhAABnAAAFAAL3BABiAABkAAAMAACmAACoAACfAAAeAAL8AAAfAAAdAAL9AQCcAAL/AABfAACXAAA/AAMABwAGAAB6AAMIPgCDAACCAAB8AQCGAAB+AACIAACBAACEAAB/AQCFAACHAANHBwKrAgABAU4BUQFlAXYBkgGwAdUB+AIIAiwCXwJ+AqQC6QNAA0kDWgNrA9MD6wP6BCkELQRhBGUEawR0BIIEnQS8BNIE2wTxBSkFSwWvBbwF0AXqBgEGLAZSBocGpgbLBu8HSgdwB8AH9QgBCCYILghLCGYIfAiECJcIvgjgCOkI+gkaCR8JKwk2CTsJTgltCXAJngnaCfgKBQoQChMKRwqDCo4KlwruCwELCgsTCyYLogvDDCwMOwx0DN0M5AzwDP0NCg0PDUQNSA2FDc8OFg4hDn8OhA6nDrgPAg8ODxkPIg82D1gPbQ92D38PlA/GD90P/xArEDwQVBB1EI4QpRDdEPsRAxEdEUwRUhGPEZkRqxG5EcoRzRHQEdcR4xHwEf4SGRIkEkYScRKNEpcSuRLpExATIRM9E2UTfROYE7IT1RP6FBQUOBRdFHUUixSeFLIUyxTgFQcVIhU6FVUVchWQFZMVnBWyFb8V+BY1Fj0WcRbJFzIXeRf9GE4YWBhqGHwYuRjQGOQY/xlSGX8Z8xn5GgIaEBpHGlwabxp4Go8ayBr9G1cbZBt4G4cbsRvuHB8cXhxzHIUcmRziHPUdMR1THVcdah1yHY8dpx2rHbMd4R37Hi0eVh5nHm4efB6YHp0erB63HsEe0R7lHukfIh92H5Ufph+2H7kf8yAwIDMgPCBVIGsgcyB7IJMg/yFIIX4h3iI3IqEiuyLLItoi6yLxI0gjTCOjI+gkCCQVJHwkgiStJN4lLyU7JVclYCWDJbMl0yXcJeUmFyZjJo8m0yb+Jw8nKCdKJ2QnfSe1J78nxygQKCEoJyhDKEkoVyhkKHQoeCh7KJ4opyi6KMcpGClZKWEppCn+KjMqciqVKp4qsSrhKxwrTitWK4orzywDLEssUSxdLHgshSyuLNos7S0ELRctKS0tLUgtTC11LaYtty3PLfAuCS4dLkQubS6ALrYu8C8pL04vUS9UL3Yv3TAiMFIwwzDRMPcxCDEYMSoxPDFTMWExcjGIMbkx3zH5MhkyOTJMMm8yfTK6MvMzUzN9M58zyTP8NBY0QzRaNIs04zUeNTM1QTVWNWc1dzWJNZs1sjXANdE15zX1Nio2ZjauNvU3UjeCN8A4DDhTOJY4nji2OMo46zkdOSY5PzlQOZI5pDmuOcY52zoxOlg6Yjp8Oos6xTrZOtw7FzsuO0U7WDtiO2Y7fTuPO647sjvLO848JDwwPFI8Vjx5PH08gTyFPIg8jDyXPJs8rjyyPLY8ujy+PMg8yzzePP89ET0VPRk9Kz1BPW49cj2MPY896D35Pfw+DT4RPhU+GD4tPjE+NT5IPlw+Xz6oPrs+vz7DPsc+yz7PPtM+3D7oPws/Lj8yPzY/TT9lP4Q/pz/SP/pAKkBZQJVA0EDUQNhA3EDgQO9BAkEXQUZBUUFVQXtBo0GvQb5B0UHzQkZCvELLQt5C8UMbQ11Dr0O6Q71D6USERSRFT0VwRbVF8EX0RgRGEEYlRjRGVUbJRvBHNUdnR+pIYEkPSZZKD0pSSqlK9ktpS6RLyEvbTA9MMkxNTJ1MwEzmTQZNLk1gTf9OUU5pTpZPFU9TT4JPtU/hUA1QSFCOUJJQ+FEbUUpRYFGJUapR1VH5UiNSTFKPUuBTB1MuU3lTx1PqVA1UMVRTVHdUr1THVOhVB1UnVT5VXVV7VZtVxlXzViVWf1fkWCFYMVhHWFVYaliIWKlYx1jpWO1Y8Vj1WPlY/VkBWQVZCVkNWRFZFVkZWSlZLVkxWTVZS1lPWVNZV1lbWV9ZY1lnWWtZb1lzWXdZe1l/WYNZh1mLWY9Zk1mXWZtZvFm+WclZ1vtr+yrGqLOonqizp7+noLueqJ+oqnSiqKKoqqiip6unxRLby0v3DPsM90Y1p2/3SfsPp2/3D0jOE6orAvf1IB37pf3w96UG+2XGFRNAAQCoB8ezBU8GEyABAqj3IgcTQAACbnAHT2MF4gYTqgECbgf7IvcJFez3IioH+yL3KRXsBxMGACCnRgYTBAAI4bQGEwQABG93BhMGAIJtu+EGEwoBAioH+yL3CBUTAUEIqPcGxAcTAkACpzUGEwEBAPsivBUTAIEAqMOqUwcTACECqPciBxMAgAJuBxMAgAhTBhMBKQhPBzX3BBXkBxMACALhBhMAEAJPwwcTACkCbgf7IvcEFRMABQCnw6tTBxMAAwKn9yIHEwAEAm9Ta8MHEwAIAm8HExAAEPsG/JEVExAAQOGzBhMQABA1BhMAECD4FgQTABCAp6oGEwAQIG8GDvwfDqYwHRKg+QoT2CwdT/w7FRPoKh0OprkdT/w7FRPsKh37L/iKIAqmMB3uyxL3Vi4KE94sHTj3ZegdYP0MFRPuKh0OpjAd7vcMzR0491sVfB09Bk42TuAFVP0CFRPsKh0OpjAd7igdoPkKE9osHTvaFdkGE9bI4AUT6sg2BWUKSf0CFSodDqYwHfLsEvds5cHlE94sHU7eFeXsMQaM/O8VE+4qHSz4jiIdprkdTPcQHS/9DBUT7CodDqYwHfcGyxKg+Qr8T/eUE9wsHRPqRukV95TL+5QGlPzZFSodDsn7a9P3OHb3XeH37tiLdxL4mzQdE+r3Bx2xPAoT7CcKqrj7lPlaBfsKBk/8OxUT8iodDqYwHdbD1sMS94bD1sMT3ywdT/w7FRPvKh37afjPUgqmMB3sJgr3PCoKE9ssHRPX+wHaJh0T2yMKE9ckChPrvPyKFSodDvfgi+H3B+Gm3/d24TjeEviD4xO0+CUgHfwQ/VoF7gYT9PL3XQX3pPtd+D3h++UGE7TtCgcT7P0Z/DsV90X36AW+++gGDq/vCvfR503nE/TnFvexBvcv4tP3FedRyCuYHxP42Jm6wNoa9xg3zPs8HvuJBuP9BBX3fPdZBxP068FhQEFVYisf+1n30hX3cPcxBxP49sBmQUVSZCQfDsQkHQG852cdDsQkHcr3FgG852cd+9f4vyAKxCQdyvcMAbznZx38Qfk3IR3ERh2i30x2+SLhErzn957DE0/5Jvd+FS2RBRNX+wF2Rk4kG/s1RvcZ9yv3LM/3Gvc27M9UKKIf6JEF9yBsKOn7Kxv7YvsI+zr7YvtU8vsx90p4HxPvbGmoCp6gBRNP9zCR5+6k9yUIDsT3Eh0T6H8d/D74vxXZBhPYyOAFE+ghCsT3AAr3TeVnHfvg+MMiHcUlHQHn4/gS5wP3zCAd+3D9Wvd2Bvds9wz3E/d393j7D/cU+28f+xj9BBX4rvId9yaQCsWOHQHn4/gS5wP3zCAd+3D9Wvd2BtYK+xj9BBX4rvcYB/c73jL7SftHODL7Ox/7GPnLIR33JpAKYiwKgh0OYqsK+5bbFVEdYiwK2/cMgh38APdcIR1iLArbKB3n4xP0PQr7/dsV2QYT7MjgBRP0IQpiLArf7BLn45zlweUT+j0KE/776t8V5ewxBvckKiIdYiwK3+wB5+Pn5QM9Cvuf3xXl7DEGDmKrCvvs92YoCmIsCurLEufjlPeUE/g9ChP8+/LqJx1i+2vT9yOCChLn4/d/NB0uxRN5Ygr4IQcT+mVhVgoT/CcKE3mquAXh/AP3ePfv3/vv93b3++EHDmIsCtnLkMsS5+NsKgoT5D0KE+r8GtsVdwoT9SMKE+okCg7Ye+H3f+H3jeEB+NjoA/jY+BsV/KcGjFcF+5OX9x4n9y0b91D3GPct9273dvsS9yX7Vvsa+wI3+xliH+yCBemwz7neG/cL7SD7IpUf/Eg1FfhHBvsrdDo3+w4b+wdA3/creB8OX3vh+L7hZgr3UGUdDl974fi+4dr3DGYK91BlHfL5ZSEdVaB298Xf93/hYB3j98X36d/76fd/9/vhBw7Le/QdE3o4ChO8NAoTulMdE3qT+wgFDstKCsrLErzn4y4KxOBHzxN8QDgKE7yANAoTvEBTHRN/QJP7CAX7/vorQh3LSgrK9wwSvOf4QeBHzxN9OAoTvjQKE71THRN9k/sIBfv++iEhHctKCsooHbzn+EHgR88TeoA4ChO7ADQKE7qAUx0TeoCT+wgF+/v5qRXZBhO2gMjgBRO6gCEKyykKt/QdEz04ChNeNAoTXVMdE72T+wgF+9D7UhVRHctKCs7sErzn903l9y7gR88TfoA4ChO/ADQKE76Aegr7nfmtIh3LSgrZyxK85/H3lNLgR88TfIA4ChO9ADQKE7yAegr78Pm4Jx33Anvh19e/4fes4QG85/hB4wP4B/f8FTX3WweKeYl6h3oI+1Q/9zMGXGpVbkPwHTaiH+eRBfcWbCjp+ysb+2L7CPs6+2LqCvcR5MXzth/e104GkKiOqqwauAcOxqB2987h98p3Aefj9+zjA+cW4/fO9+z7zuP5WjP7yvvs98ozBg73c6B299Ph9w/hNfdKEvcv4/gS4xPc9y8gHRPsK0wHE9w1yvyk4/fT+BL70+P4pMoHE+zhTAcT3OszBxPsK/wSBxPc6wf7xQT3D/gS+w8HDsagdvfO4ffKPh3n4/fs4xP25xbj98737PvO4/laM/vK++z3yjMG9w3aFdkGE+7I4AUT9iEK/AmgIgpgHeP5WgcO9yF74VoiChLn49bl96jjE7znIB0TfP1a4/laB9b8dBUTvLMKDvwJyAo72iAK/AmgdvlaPh3n4xPoTQr7S9oV2QYT2MjgBRPoIQr8CaAiCvLsEpuACucgHf1a4/laBxP0+zjeJQr8CaAiCvLsEublMuMT6E0KE/Ay3iId/AnICvs6Vwr8CaAiCvcGywHn4wNNCvtA6Scd/An7a9P3OCIKErs0HfsP4xPkYgoHE+ipPAoT8CcKE+SquAX5WgcO/AmgIgrsJgprysjjyMoT5E0KE9z7aNomHRPmIwoT3CQKDlx74fkUd58KDlx74fkUd+73Fp8K97H4uyAKXHvh+RQ+Hc7l96jjE+ypCvdK+LsV2QYT3MjgBRPsIQqToKEKDpOgIgru9wy7HZFaHZMpCtyhCtP+GCAKS4vtHQ5Li+H5BHfu9xYB5+MD8QqT2iAKJIvh+J/wJvcWEufjE9DxCvdCJhXOBhOw5vcWBSwGDkvAHW6L4fkEdwH3E+MDofgIFbA9z6sF+9r4TuH79vetB/cv02bZ+wpUBfeMM/u1Bw73fYvrQHb4qfdFi3cS5+P4muMTXEQdE2z4qQf3XPypBfcKBvdc+KkF/Knj+Vr7DgcTnPt1/Pr7dfj6BQ7pi/cIHRNcRB0TbPjnB/fn/OcF9xT5WjMGE5zMCg7p9xwd9xa8HfcM2iAK6fccHfcMvB2ZWh3pqR3p9yMd7CYK5+OhKgqg4xNaQEQdE2pAiB0Tl0DMCn/aJh0TWsAjChNXQHYdE5dAT2RYOx8O6fsq4eB2+Of3B4t3Eufj+A/jE9xEHRPs+OcH+A/85wWEB2V2eGEeJDXyBujFw+Mf+WAz/LcH+/D4twUO8iQdAbzn+GZRCg7yagr3WfhHIAry9xId+GbnE+z4CtUK93v7Dvch+1/7X/sO+yH7e/t59w77IfdfH/t9+AYV90bi9wD3Jvcm4vsA+0b7RDT7APsm+yY09wD3RB7p+EcV2QYT3MjgBRPsIQry9wAK9wXlweX3C1EK9wX4SyUK8moK9wP4ySgK8moK9yP4R2sd8iQd2csBvOf095T0UQr0+FYnHfcAJB0Bwef4ZucD+A/VCvcLa+lQzB/R6QU3BmZZBatZTp1DG/tf+w77Ift7+wCmM71MHzn7AwXgBrnJBWO/znXbG/t9+AYV90bi9wD3Jr23fnOuHvvT/EIFb7p8yNQa4/t/FffX+EgFr1ueRjca+0Q0+wD7JlFanKtlHg7yJB3Iy5DLErznzCoKzOcT3agdzPhHJh0T7yMKE90kCg74TXvhRYIKReESvOf4YOYz4xO1+Ad7FfLZtM6/HxN1L/g94QcTdvvl7QoGE3X8NS8GE27OVz20JBv7YvsI+zr7Yh8TteoKHvt6+AYVE673L9b3F/cv9y/W+xf7L/suP/sW+y4eE7X3AQqRoHb3p+H3m+HzHfenrwpzoHb3KOH3m+H3E3cB5+P3vecD90gW9yj3HQf3Dh37HfcTM/1aBuP3fhX3m/cdB/bAYDUyVl4gHw7sJB0BvOf4YOcD+Ad7Fbi0k5mvH8VABecGNfcDBePNu/cH9xca92L7CPc6+2L7YvsI+zr7Yvth9wn7OfdhHvt6+AYV9y/W9xf3L/cv1vsX+y8majFKWB5B6wUvBu/7FQWFd3WIcxv3AQqnoGIdZh0Op18K9xZmHU74NiAKp18K9wxmHfs7+K4hHacpCtxiHWYdIPzFIAqPf6AdDo9/4fjK4cr3FgHV5/fg5wP3K/d9FS+FBfskl/cGLPcwG/cU9w3P9xiBCh9bCpUd9yT4wCAK/F3SHY9/4fjK4cr3DAHV5/fg5wP3K/d9FS+FBfskl/cGLPcwG/cU9w3P9xiBCh9bCkVPaDH7BEnL6ngesfk4IR2PRh1e9zBMdvke4RLV5/dew9XnE1eA9yv3fRUvhQUTT4CW+xfqMfcaewgT74BoZaIK9xGO9wfP9xUa9wEjy/sUrx5bChNXgJUdDo9/4fjK4cooHdXn9+DnE+z3K/d9FS+FBfskl/cGLPcwG/cU9w3P9xiBCh9bCkVPaDH7BEnL6ngetPjAFdkGE9zI4AUT7CEKjykKu6Ad4Pw7IAq8i+H3ntT3W+EB5+P3/uUD+BDhFfsaNfcaBvcv7OX3F/cQ+wDe+zKIH/du91MF6fu3B/sPPTr7FR/8iOP4iAfbtLfTHvdDBvto+04FNAfzjAX3BIzRWDYaO01YJx4OSKC9Cg5IoHb3ytf3guH3BB37gvsYP/cY+8rj98r3Gdf7GfeC93AGDkigdvkE4dr3DMUK/Cr3sSEdSEYdxXb5BOES94njg8MTfPi9IB38pDX3cP0EnwZfWwUT+qdmBbaVrHtrGnF5em9pc62dfR4TfGFkBRP6XQoTfK2wBZr5BPdwBg5IKQrcvQr7/P3CIAq4MwoB2OP3/EAdDrhtCvvE+LEgCrgzCu3LAdjjsS4KsUAd/C75M0IduDMK7fcMaK4S2OP3/OMT7GwK/Cv4sRXZBhPcyOAFE+whCrgzCvHsAdjjx+XB5c1AHfwY+LUlCrhtCvwa+TMoCrhtCvv6+LFrHbgzCvcFywHY47/3lL9AHfwg+MAnHbj7a9P3E+H5FXcS2OP3KDQduOMT9oMdlZSLjJQec3BWChP6JwqptgUT9vWsyuX3ExoOuDMK1cPWwwHY4+HD1sPiQB37/vj2Ugq4MwrrJgrY45cqCpfjE+lsChPd/Ej4sSYdE+sjChPdJAoOpIvtPnb5WncSoPkIE3CgIB33lP1aBfcIBveU+VoFKgYTsPtt/Pj7bvj4BQ73n1QdEqD5+hNwRgoTsEcKDvefVB3u9xYSoPn6E3hGChO4Rwr3w9ogCvefVB3uKB2g+foTdEYKE7RHCvdc2hXZBhNsyOAFE3QhCvefVB3y7BL35OXB5RN8RgoTvEcK92/eJQr3n1Qd7vcWEqD5+hN4RgoTuEcK921XCnugIgoBpvjTA/iIIB37TPuv+033rwUlBvd7+/X7ffv5Be8G90/3svdO+7IF8Qb7fff493v39gUOfaAiCgH3pOMDoCAd94/8OAX7tuP3tgf3jvg46woOfbod9y/aIAp9oHb5Wj4d96TjyR2/2hXZBhPYyOAFE+ghCn2gIgry7BL3WIAKoCAd94/8OAX7tuP3tgf3jvg4BSMG+1L72/tT99sFE/TS3iUKfbod0FcKfaAiCuwmCvcoysjjyMoT5KAgHfeP/DgF+7bj97YH9474OAUjBvtS+9v7U/fbBRPcotomHRPmIwoT3CQKDiUlHQGm+H1uHQ4lJR3a9xYBpvh9bh33CflTIAoljh0Bpvh9bh2W+cshHSUlHd7sAfd+5W4d9wD5VyIdS8Ad6akdraBiHWgdDq1fCvcWaB1Y+DYgCq1fCvcMaB37MfiuIR2tKQrcYh1oHfsD/MUgCvtjJR0B90PjA/gTIB373DX3DPyu+xI1YAoGDvtjwh37XPc5FVEd+2OOHWiuEvdD4xPoVAr7w/c5FdkGE9jI4AUT6Mg2BWUKDvtjJR3e7BLugAr4EyAd+9w19wz8rvsSNWAKBhP0+7D3PRXl7DEG9yQqIh37YyUd3uwS90LlMuMT6FQKE/D7Zfc9FeXsMQYO+2PCHfuy97soCvtjJR3pywH3Q+MD+BMgHfvcNfcM/K77EjVgCgb7uPdIJx37Y/tr0/cj4fiu4RL3Q+OFNB0TcN4KBhPk9648ChPoJwqquAXhBxNw+xL4rvcMBg77YyUd2MuQyxK+ylDGyOPIyhPGVAoT2vvg9zkVdwoT5yMKE9okCg7Ee+H3YOH3rOEBvOf4QVcdDsR74fdg4fes4crLAbzn4y4KxOMDfh38QfjDQh3Ee+H3YOH3rOHK9wxorhK85/hB4xP2fh38PvhBFdkGE+7I4AUT9iEKxCkKt+H3YOH3rOEBvOf4QVcd/BP8uiAKxHvh92Dh96zhzuwBvOf3TeX3Llcd++D4RSIdxHvh92Dh96zh2csBvOfx95TSVx38M/hQJx2mMB3q9RL3XSsKE94sHT/3FBU/Cpv8uxUT7iodKvi7FT8KDsQkHcjyAbzn90X1A38d++j48RVsonapqaKgqql0oG1tdHZtHg5iLArX9RLn4433ALz3ABPoPQoT9vv59xUpHWIsCtnyAefj3/UDPQr7p/cWFWyidqmpoqCqqXSgbW10dm0eDstKCsjyErzn90X19ybgR88TdIA4ChO1ADQKE7SAegr7pfnbLh38CaAiCur1Eoz3IB0T6E0KE/T7R/cUKR38CaAiCuzyEt71KuMT6E0KE/AqjB0O8iQdxvUBvOftKwryUQrt+HgpHbgzCun1AdjjuCsKvUAd/Cf44ikd959UHer1EvfVKwoTfEYKE7xHCvdg9xQpHX2gIgrq9RL3SfcgHckdE/TD9xQpHSUlHdjyAfd29QP4kPkCFeP8ZDX3/gf8D/ypBTD4feH8Ggfv+YUuHftjJR3W9RLf9wB643X3ABPIVAoT9Pu/92opHftjJR3Y8hL3OvUq4xPIVAoT8Ptt92suHcR74fdg4fes4cjyAbzn90X19yZXHfvo+HMuHfhli+H3B+H35eEB+ePjAywdT/w7FSod9577s+Id+Hd74UXh+K7hEtjj9/zj95DjE7xsChN89xL7jOIdRoYKRpcd9wH4aiAKRjMdzssSuuWOLgp0iAoTtgCO+OxCHUYzHc73DJodjvjiIR1GMx3O9wxornQdE7SANR0TtgA1ChO1ADoKE3UATAoTdIA+ChO0gEUKkfhqFdkGE6yAyOAFE7SAIQpGMx3S7BK65aTlweWQVh0TtEA1HRO9ADUKE7SAOgoTdIBLu3rBHhN0QD4KE7RAeh0TvECGHRO2AKT4biUKRpcdovjsKApGMx3dyxK65Zz3lIJWHRO4gDUdE7oANQoTuQA6ChN5AEwKE3iAPgoTuIBFChO8AJz4eScdRvto0/cU10vXVHahdvhf3XQdPdITRkA1HRNHADUKE0aAOgoTDoBUrne3hh4TliBnY1YKJwoTFkCotQWNBhMmQNd1B3WBlaEf92gH9yI+2/sdHhNGQEUKDkYzHbbD1sMSuuW+w9bDpVYdE74gNR0TvoA1ChO+QDoKE35ATAoTfiA+ChO+IEUKvvivFVa1Y78eE78gvrWzwL9htVgfE74gV2FhVx/DjBWenJ2gHhO/IJ+ceXh3enl3HxO+IHZ6nZ8fDkYzHcwmCrrldCoKWlYdE7QgNR0TtIA1ChO0QDoKE3RATAoTdCA+ChO0IHodE6ogxfd/Jh0TtQAjChOqICQKE7Qgovxq4B0O97N/00Pd9zzX9ybdErrl957/AB2AAP//4oAA7hN6w/gKFeEK2L1gM4wf+y5vBTkKYR0TfPWN0MCe6IyNGC2v2lP1G/Hlye+qHy+SBVRzWGtTGxN6rgo3R2dNYR/MaEisNhv7AjVIJnYfE7rc+30V18uK2ZoeLx0+h2i3tBr4A/dB9wIdXXkd9zx3EtvZPf8AT4AA//+wgADh97zlE7PbIB0Tc/1aBxN12QYTtY7VBVaoy2rVG/ce4fb3Pvc+Nfb7Hh8Ts0RNbFpuH/eMBxO5g/xR5R0OLyMdAbrlA0QKDi8jHc73FgG65QNECvs795UgCi8jHc73DAG65QNECvul+A0hHS9GHabbUHb4at0SuuX3UcMTT8YK+zDdI/cUfB8T72hlqAqipfSS4tSb9wUZMJEFE1f2HR8TT8rEY0eWHw4v5goT6EQK+6L3lRXZBhPYyOAFE+ghCi8jHdLsAbrl9wDlA0QK+0T3mSIdXXkd9zx3Errl97zhPdkTvModE3wtChO6vwoOWfcNHRPwvAr3AevD97X7FfdH0KQYdMssaVa6Q6wrlRl2PMOGvHu0chkgZaJKBRPo9yXAu1WlQ4w1GRPw0wrWhchfmD+C+xFBOSyTMpRTzZXvCA73B3kdzvAm9xYSuuX3vOE92RO2yh0Tdi0KE7W/Cvg29+wVzgYTrub3FgUsBg6SeR201z/3ExK65fdU91I14T3ZE60A+JsgHTUGE7UAWAcTtgAjBhOuAD8HE60A8/sN6h0fE6yA1cuswKgfE2yAjkEFE20A2fjbygYTtQDXTAf8EvweFfcOxtjoHhOsgOjGPvsO+wxQQC4fE7UALlDW9wwfDj4rHX0dDj6OCvtB97kgCj4rHcz3DH0d+6v4MSEdPisdzCgduuYT9Lr3nRVVHfHlye+qHi+SBVRzWGtTG64KTgof6HAd+6j3uRXZBhPsyOAFE/QhCj4rHdDsAbrmq+XB5QNJHfuV970lCj4rHdDsAbrm9uUDSR37Sve9Ih0+jgr7l/g7KAo+Kx3byxK65qP3lBP4SR0T/Pud98gnHT77a9P3F933PNf3Jt0Suubr0kT3OxP6ywoekgZwbQWEHRP8JwqquNCiwsCi1RltHRP6Tgof6HAdDj4rHcrLkMsSuuZ7yvdmyhPlywrx5cnvqh5tHU4KHxPr1vfqJh0T9SMKE+skChPjnfu59wIdPn/d9ybX9zzdAfhC5gP4nfedFfc9K/cA+yclMU0nbB7nhAXCo76rwxvlwU0hkx/8EwaMZAX7UpT0QPcIG/cn6/cA9z0f/BBaFfezBi99VlU4G0xQr/cCfB8OX/tY4fi+4WYKk2UdDl/7WOH4vuHa9wxmCpNlHfL5ZSEd+4qgdvha1/PXAfcXwx0OXD0dYwoT9gBQChPuAPhyBxPsgDkGE/SAQx0T9gBVChP1AE4dE/YARx0OXD0d7ssSuuWSLgqP4TbgOd0T9kBQChPuQPhyBxPuEDkGE/YQQx0T9kBVChP2IE4dE/ZARx0T9YCS+FpCHVw9He73DGMKE/cAUAoT7wD4cgcT7kA5BhP2QEMdE/cAVQoT9oBOHRP3AEcdkvhQIR1cPR3u9wxormMKE/WAUAoT7YD4cgcT7SA5BhP1IEMdE/WAVQoT9UBOHRP1gEcdlffYFdkGE/OAyOAFE/WAIQpcPR33BvcCErrl8fcB35kd8ffn0ApcPR3y7BK65fPl8Jkd8/fcIh1cPR33BssSuuWg95SdmB2g9+cnHYD3Hx33Ddf3Ld1/d2MKE/sAUAr3R8PXUwcT9wD3cwcT9kA5BhP6QEMdE/sAVQoT+oDhwlEskR/7Wz/3VQY/e1deQhsT+wBHHQ5MoHb4YN33PHcB2+H3juEDqgoOQqB2+GDdtNc/9xMS2+E191v3HeET2tsgHRPqWFQHE9o/wvzbzh33DwcT1vcFBhPm1wcT6vsFBhPavgcOTKB2+GDd9zw+Hdvh947hE/aqCvtK2hXZBhPuyOAFE/YhCvwjxB38I0MKAdvhA9v4phX8puH4pgcO/CPmHTzaIAr8I6B2+KY+HdvhE+hPHftK2hXZBhPYyOAFE+ghCvwjQwry7BKO5X7heOUT6E8dE/T7N94lCvwjxB38I+Yd+zlXCvso+yrX6nb4pnfy7BLZ5TPh9zflM+ET9U8dE/kz3hXl7DEG9y398N8d7flDIh38I0MK9wbLAdvhA9v4phX8puH4pgf7P+knHfwj+2vT9zh2+KZ38uwSrTQd+w/lM+ET8X8KBxP0pzwKE/gnChPxqrgF+KYHE/Iz3iId/CNDCuwmCl7KyeHJyhPk2/imFfym4fimBxPc+2faJh0T5iMKE9wkCg78FDgd8uwS6OUz0R0z+PwiHfwUOB3THQ78FDgd7vcW0x08+PggCvwU+yrX+PA+HerVHftK+PgV2QYT2MjgBRPoIQpVoJ4KDlVDCvdcd+73DKQK+01aHVUpCtyeCq/+GCAK+/2L1/kOd7oKDvv9i9f5Dnfu9xa6CjvaIAr7f4vX+KjxJfcWEtvhE9CKHbLkCvv9sh37n4vX+Q53Afcy4QP3MiAd+8IHPWerRrmgBftwB021Yckex9ddBnWBlaEf95QH6bZr0E1uBfebBw73faB2+GbXf3dSHfd64fd64ROuWQoTzui7w9zKsVMuHvvR4ffRB+q6wd3LsFUsHvvR4ffpB/cUTdQgOFRkRHQe0XRUsz4bE9ZCVWdLch8TtojjBQ5MoHb4Ztd/d1Id947hE6xZChPMcwoT1GgKE7SI5gUOTKB2+GbXf3fu9xaXCuzaIApMoHb4Ztd/d+73DJcKglodTKMdTKB2+GbXf3fsy5DLUh1gKgpg4ROyQFkKE9JAcwoT1EBoChO0QIjmBRPJQGjaJh0T0oAjChPJQCQKDkz7Ktfqdvhm1393Uh33juET1lkKE+biCvvYB2JzcWQeOD/cBujFw+Mf9+8H9wRR5PsNHhPqaAoT2ojmBQ5Kph1Kawr3CffsIApK5gr3xuUT7EodmffsFdkGE9zI4AUT7CEKSiMd0uwBuuWs5cHlsuUDSh2s9/AlCkprCqr4bigKSmsKyvfsax1KIx3dyxK65aT3lKTlE/RKHRP8pPf7Jx08Ix0BuuX3xuUDjR3TeshruR/d7QUyBmNcBalkWZxRG04KRJxOql0fOCgF5Aa0uwVssr56xRv7LfepFfcOw9TssKqAd6Me+3b7ogV+qIWvtBrG+zcV93j3owWXbZJnYRr7DlNCKmVslqByHg5KIx3MJgq65XwqCnzlE+mNHfc9K/cA+ydOClUdHxPV+zz5ASYdE+ojChPVJAoT6Zr77BX3DsPU7OzDQvsO+w5TQioqU9T3Dh4O99MrHQG65ffG5gP3tn8V4tCxzbUfSbXQZeIb8eXJ76ofbR00RmVJYR/NYUaxNBu+HfgjcB0OXe4K29c//wBPgAD//7CAAOH3uucT09v7KhXh93EGVKjCb9Qb9zPR9xj3JfclRfcY+zMfE9U+U2tSbh8T5YjYBRPjPQYT2df7nRXtt+z3APcBtisoKGAr+wH7AF/s7R4OXfsVdvce3fge2fc8dxLb2T3j97rlE/bbIB398OP3aAdcqsBw1xv3LtH3GPcl9yVF9xj7Lj9VcFltH/eJBxP6gfxRFfG27PcB9wK1KyQoYSv7AvsBYOztHg5d7gq65/e64f//sIAA/wBPgAA/1xPc+Jv7KhUT7Pk8BxPqPQYT2og+BcRuU6s+G/szRfsY+yX7JdH7GPczHxPc1MKnwqgf+3EH+7r4MxXutuv3AR4T2fcAtyopKV8q+wAfE9z7AWDr7h8O+5qgdvha1/cPHRPQzwoT4EZkbUp6H4jqBQ77mqB2+FrX2vcWbwqQ2iAK+5qgdvha19r3DG8KJlod+5opCtx2+FrXbwr7Ff1kIAr7Bn+NCg77BiMdzvcWAcfl94jlA/gU+AIV5ZEF8no0ziEb+w45SyUj83DrdR/HfdWFTBpVSHtZPFmzyoAeMYUF+wKT60b3Ehvv9rfyeB0fcR3FxmhQlx77L/eHIAr8XdId+wYjHc73DAHH5feI5QP4FPgCFeWRBfJ6NM4hG/sOOUslI/Nw63Ufx33VhUwaVUh7WTxZs8qAHjGFBfsCk+tG9xIb7/a38ngdH3EdxcZoUJce+5n3/yEd+wZGHV73LFF2+GndEsfl9y7DreUTT4DbHRNXgM4KE0+AkinXSvR+CBPvgGhkogrsjvC37xp4HR5xHR4TT4DFxmhQlx8O+wYjHc4oHcfl94jlE+yRCvuW94cV2QYT3MjgBRPsIQr7BikKu40K+2j8wCAKVd3/AP6AAN3/AN2AABL3Os5I2BPQ973dFd/Zs9/nO7QviR9figXeB7eKBd6JusTPGsFVuEYeE+BAVl0vH/yKNfiKB/cg59v3DvcQ4kP7AUNlTkZ0HuN0ykgrGvsY+wxI+xgeS90GDvuMi7YdDvuMi9f3PNf3GtcB9xjhA/YK+xo+P9gl9wUd8fci1/si9xr3Itf7IvcMBw77UzIK2bVh9xYS9xjhE+j3GPkeFfsMPj/Y+8wHMMBY6x7sHbRhFc4GE9jm9xYFLAYO+4xGHbDX+A7XEvcY4b/DE372CvvMB0apXcN5HldSp2YFtpWse2saE/6PHRN+YWQFE/5dCq2xBYqRkYuRG9jXPgZhdqG3H/fM9yLX+yL3DAcO+4wpCse2HTv93CAKRjsKEtvh94jhOd0TeDwdE7hTChO0WgoTdDQHDkaAHfs6+PUgCkY7Cu7LEtvhcy4Ke4Ed+6T5dxVCyVLbHhO2ANvJxNQf8AoORjsK7vcMaK4S2+H3iOE53RN2PB0TtlMKE7VaChN1NAf7ofj1FdkGE67I4AUTtiEKRjsK8uwS2+GJ5cHll4Ed+474+RXl7DEGE7sA9yQqIh1GgB37kPl3KApGgB37cPj1ax1GOwr3BssS2+GB95SJ4TndE3o8HRO6UwoTudDIqs+nHxN5NAcTtPuW+QQV95TL+5QGDkb7a9P3F9dgdvimdxLb4fdaNB37DeE53RPZADwdKVRXOj9rv+0e99A1++kH+wTFMvcKHhPYgFoKE7iANAcTugCjBmVhVgoT3AAnCg5GOwrWw9bDEtvho8PWw6zhOd0TfIA8HRO8gFMKE7xAWgoTf0A0B/t0+TpSCkY7CuwmCtvhWb1ZyvdmymHhOd0TdEA8HRO0QFMKE7QgWgoTaiA0B/u++PUVE6lAdwoTtIAjChOqQHYdE2ogT2RYOx8OIIvlRnb4pncSofiCE3D4mPimFS8GE7D7L/xM+y/4TAUvBvdV/KYF9wAGDvdDSwoSofmcE7BLHRPQTB0O90NLCu73FhKh+ZwTuEsdE9hMHfti+JYgCvdDSwruKB2h+ZwTtEsdE9RMHfvJ+JYV2QYTrMjgBRO0IQr3Q0sK8uwS97flweUTvEsdE9xMHfu2+JolCvdDSwru9xYSofmcE7hLHRPYTB37uPkYKApRQwoBuviBA/g9+KYV+xf7VPsY91QFIgb3TPuW+1b7pAX0Bvci92H3IfthBfQG+1T3o/dL95cFDiA4HQGh+IJqHQ4grB33C9ogCiD7Ktf48D4dofiCE+ih+KYV91X8nAWoBnhaBXKBfIFyG04/0QbHsaXEnx/3avjpBTAG+y38Svsy+EoFm9oV2QYT2MjgBRPoIQogOB3y7AH3KeXB5Wodrt4lCiCsHaxXCiA4HewmCvAqChPstR0T3H7aJh0T7CMKE9wkCg4sMgpyCg4sMgra9xZyCuX4qRVRHSwyCtr3DHIKe/khIR0sMgre7AH3e+XCCtz4rSId+/2yHUyjHTgyHRK15fecQgoTsjcdE7QvHROyTR0TckEdE7g2HROyOQoOOIcK91L4aCAKODIdzssSteWFLgp9mx3f+OpCHTgyHc73DJ0d3/jgIR04Mh3OKB215fecQgoTtIA3HRO1AC8dE7SAPodot7QaMRZhHd6Ny7ehvAgTdICNOAXZ99QG5B0TtgA2HRO0gDkK4vhoFdkGE6yAyOAFE7SAIQo4Mh3S7BK15ZvlweWZQgoTvIA3HS8dPodot7QaMRZhHRO0QN6Ny7ehvAgTdEBBHRO1ADYdE7yAOQoTtkD1+GwlCjiHCvP46igKODId3csSteWT95SLQgoTuIA3HRO5AC8dE7iAPodot7QaMRZhHd6Ny7ehvAgTeIBBHRO6ADYdE7iAOQoTvADt+HcnHTj7a9P3F9Nkdvhg3RK15fduNB37DUIKE1hANx0TWIAvHRNYQE0dEzhAjTgFE7oAnzwKE9wAJwoTWECquAX31Af3KDXV+xT7AjVIJnYe4QoTWQA2HRNYQDkKDjgyHbbD1sMSteW1w9bDrkIKE78gNx0Tv0AvHRO/IE0dE38gQR0Tv4A2HRO/IDkK9xj4rVIKODIdzCYKteVrKgpjQgoTtCA3HRO0QC8dE7QgTR0TdCBBHRO0gDYdE7QgOQoTqiDF+GgmHRO1ACMKE6ogJAoOXTAKErrl97wvChOpMQoTrDUGE5wtHROaMR0TWS0KE5k2Cg5dnB33CPfsIApdMArOyxK65ZUuCo2KCpX4bkIdXTAKzvcMErrl97wvChOsgDEKE64ANQYTngAtHROdADEdE1yALQoTnIA2CpX4ZCEdXTAKzigduuX3vC8KE6pAMQoTqwA1BhObAC0dE5qAMR0TWkAtChOaQDYKmPfsFdkGE5ZAyOAFE5pAIQpdMArS7BK65avlweWpLwoTryAxChOvgDUGE5+ALR0Tn0AxHRNfIC0KE58gNgqr9/AlCl2cHan4bigKXTAK3csSuuWj95SbLwoTrEAxChOtADUGE50ALR0TnIAxHRNcQC0KE5xANgoTnkCj9/snHV37a9P3F91advhkzUnZErrl947Sci8KE1RAMQoTVQA1BhNNAC0dE0yAMR0TLECOQQUTrgCfPAonChMsQKq4BRNMQDYKDl0wCrbD1sMSuuXFw9bDvi8KE6+QMQoTr8A1BhOfwC0dE5+gMR0TX5AtChOfkDYKxfgxUgpdMArMJgq65XsqCnMvChOqEDEKE6pANQYTmkAtHROaIDEdE1UQLQr8Ivj1Jh0TmoAjChOVEHYdE1UQT2RYOx8TmhCb++zHCg78C6DxHQ78C6DZCvcJHTzaIAr7e6B2+PTxJfcWEtvhE9DbIB39WuH5Wge25Ar8CykK3PEd+x/+GCAK+5+gIgoB9zHhA/cxIB37wwc+aKtGuKAF+9jh9/8H6rdr0ExuBfebBw5GMx3K9RK65ZUrCoCIChO+AJX4mxU/CvcxFm2idKqpo6KpqnOhbWx0dWweDi8jHczyAbrl7/UDRAr7TPfHLh0+Kx3I9RK65pwrChP6SR0T/vuk9+opHT4rHcryAbrm7vUDSR37UvfrLh1cPR3s8hK65ev16Jgd6/gKLh38I7Md/CNDCur1En/3AHvhdvcAE+hPHRP0+0b3FCkd/COzHfso+yrX6nb4pnfs8hLR9Svh9y/1K+ET9U8dE/nJCvc1/b3fHeX5cS4d/CP7a9P3OHb4pnfs8hKtNB37F/Ur4RPxfwoHE/SnPAoT+CcKE/GquAX4pgcT8skKDvwUOB3s8hLg9SvRHSv5Ki4dSiMdyvUSuuWdKwqi5RPySh0T/p34HSkdRjsK6vUS2+F69wC89wCHgR37nfkmFT8KE7oA9zEWPwoO90NLCur1EveoKwoTvEsdE9xMHfvF+McpHSA4Her1Afca9wC89wBqHZ/3FCkdLDIK2PIB93P1A/h5+EcV6vw2P/faB/vk+/0FLvhI1/vrB9T42y4dODIdyvUSteWMKwqJmx3m+JkVPwr3MRZtonSqqaOiqapzoW1sdHVsHg5dMArK9RK65ZwrCpmKCpz4HSkdtqB2+FrX89cB9xfh91/hA/cX+McVakQ/0vxa4fha91/ACmr7X6wHt6OmrR7d1zkGKF5RMh8OwzIKP/dYEvcY4fdu4RO49xj5HhUT2PsMPj/YzQr3bs0K9yLX+yIHE7j3DDUHE9j7DPtuBxO49wwHDougdvha197sP9cS9xfh95jlM+ET2vcX+McVakQ/0sAKE+z37r0V5QYT3OwxBxPajf1aFeH4pjUGDp0yCvPXAfcX4feGwx333PxfFU21Yckex9ddBnWBlaEf+O41Bw5GhgpKph2moHb5DdgBoPkKA/fk+Q0V92/9DQXrBvcUHfuU/VoF6wYO6ovh+L7hErznMfeh7/ehMecT5PgG+RQV9yfdJPtB+zA8+w4nHxPoNfeh4fsWBxPk3cS97fcPGvdv+xD3I/tZ+1n7EPsj+2/7D70p3VIeE9T7FjX3oeEGE+QnPPcO9zD3Qd3y9ycfDkOL1/jC1wGg+KcD+JoWrddoBmeAnq59H/tE+FIF6WZnszcbXD/BBq+WeGiZH6dD+1r8kAXlBvcs+CLz+5wFKrGqZt0bDpoyCgH3NuH3T+EDwvimFT/2/Frh+Fr3T/vHBzK4UfcBHqvXawZfc6a3H/fH8dcHDmt73f8BD4AA2/8A4oAA3RK95UnlE/D4x+MVVNMFU1s2ZUcbJUrC3N/MwfGJH8GKBdwHVYoFE+hJij6s5xrKwrPjyNRnW7UexNEFw1orszMb+x0rP/sBO7VX33IfE/AoblhHLxr7EPI09y7u9LbIvx4OpiQdAcHn+BDnA/fklgr7mKB2+KHW9wJ3EvdP40bQE+js9yEd/KHj+VoGE+hGBj5qaj8eDnGL4fi+4QHH9wH3uOcD1Koda+AKveb3xudI5hPo98GLCoKgdvcl4fhzdwH4NeMD+I2xCnh74ffT3/cr4QH4bucD+JqVCnZ74ffc4fcw4RLH5THr99DnE/T4aYwKT6B2+QThAfdn5wOzyx1ie+H3nOP3buESs/MK98KJCnZ74fcw4ffc4RLH5/fQ6zHlE/THoR33KMf3vMcB96DJ90bJA/g39ygV3wr7E8U76B/8CPdmFYkd+2D7Ofc592Ee96+IFaAK/wGagABpChL4Hs9ZvRPAXAr7Cvg6FZEdE6BZBlJra1IeE8ByBg73NMf3rccB96/W9w5pHfsZ90AVXR1sHWMdDvcox/cYxfbHEveqQQoT9FwK+x73pBWxHXJRBhP0NwoO94DHAfg8aR37RPeMFfdMQMzWt8df95FYBvta+5oFix33Jcf3McXRxwH4e2kd+xv3oG4K9yjH9zTH1scS963GUND3HMwT7FwK+xv37OMKE/TWHRPszB34fccB9/ppHfse+InUHfcox/cZxPTHEvenQAoT8vg0fxV1Hfdfewr3Ofs5+1/7Yfs5+zn7YB/7IfeqFVAdE+w6HRPyPx1IChPsOx33KMfWx/c0xxL3rX4K+DR/FXUd9197Cvc5+zn7X/th+zn7OftgH/sb95IVwR14Ch4T+PcXHRP0lh1/1uDH97zH4tYButb3I8n3Rsn3Izkd9yOIFfsTxTvo6MXb9xP3FFHcLi5ROvsUHskW66zAw56bhYCYHvsU+2EFhZ+IpKcatPsWFfcU92IFkXaOcW4aLWpWU3h7kZZ+Hg5/1v8BW4AAaQr3U9YSutb3pM9ZvfeM1hP6Twr3RL8VkR0T9kkKE/pyBg5/1uzH963H5dYButb3Ntb3Dsz3ODkd9zb7WhVdHWwdYx0Of9bgx/cYxfbH4dYSutb3MEEK9y/WE/7ATwr3MClcHRP/QHAKE/7ANwoOf9b3Qcf399YButb3wsz3cTkd9wr7DhX3TEDM1rfHX/eRWAb7WvuaBd+UFe/3GQX7GQcOf9bdx/cxxdHH8NYButb4Acz3Mjkd9zMlbgp/1uDH9zTH1sfj1hK61vczxlDQ9xzM9zPWE/3ATwr3M3HjChP+wNYdE/3AzB1/1vg+x/HWAbrW94DM97M5Hfcw9xfUHX/W4Mf3GcT0x+PWErrW9y1ACvct1hP+YE8K9y0vFVAdE/2gOh0T/mA/HUgKE/2gOx1/1uDH1sf3NMfj1hK61vczzPcdz1HF9zPWE/9ATwr3M/sIFU6dvWrCG+XE5Pci7GDiLj9RVTQ3wVTQHxP+wLKpm6afH0CCamBcG3gKHhP/QPcXHRP+wJYdpiQdAcHn+BDnA/fkowqvq4J5pR77jPxTBXS6fsrZGuL7jxX3jvhZBadbmkc1GvtKRyX7DmJplqFvHg77Zovh+EvW9wJ3EvdN40bQE+jqsgpeJB0Bn+f4EOcD98KWCl6L4fhL1vcCdxL3suNG0BPo91iyCl6L4fi+4QHG9wH3uOcD06odXuAKteb3xudI5hPo97mLCl6gdvcl4fhzdwH4M+MD+IuxCl574ffT3/cr4QH4a+cD+JeVCl574ffc4fcw4RLD5THr99DnE/T4ZYwKXqB2+QThAfd65wPGyx1ee+H3nOP3buESpfMK97SJCl574fcw4ffc4RLD5/fQ6zHlE/TDoR1eoCIKAZj40gP4318dDvffi8f3rcf/AKuAAFsd+FbW9w7ME/SAWB0T7ID4GAcT6oBJChPtgHIG+Pr9AhVdHWwdYx0O99F7x3R290TF9sf/AKuAAFsd+DtBChN9UFgdE7tQ+BgHE7rQSQoTu1ByBvjf/KJcHRO7YHAKE7tQNwoO98l7x3R290TF5sdfx/edx3t3ErzW9w7M99FBChNz0PmEXx37avfZFV0dE7XQbB0Tc9BjHRO10PjX+3lcHROt4HAKE7XQNwoO98yL9xtPx/8BtYAAWx343swTtVgdE634GAcTq0kKE21yBvjK/LcV90wGE61AzAcTbda3BxOtx1/3kVgHE237WvuaBROtix333Iv3G0/H90LH9xjaCvh9zBOrYPmcXx37gvg5XB0TraC2ChO1oHJyb2ceclEGE3VgNwr4mfvxFfdMBhOtYEDMBxNtYNa3BxOtYMdf95FYBxNtYPta+5oFE61gix33xnvHdHb3XcXRx/8At4AAWx35BMwTfUBYHRO7QPgYBxO6wEkKE7tAcgb42vyjbgr3z3sd9Mf/AK2AAFsd+DRAChN9SFgdE7tI+BgHE7rISQoTu0hyBvjY/JwVUB0TuzA6HRO7SD8dSAoTuzA7Hfffex3Wx23H8doK99NAChNy2fmcXx37gvg5XB0Ts2m2ChO1aXJyb2ceclEGE7VZNwr4p/vWFVAdE6tWOh0TtVk/HROzWUgKE6tWOx332nsd08dwx/cQxdHHEveTzPfUQAoTt5D5lyAdNgYTd5DyCvt9+DWbCvii+9IVE7eQUB0Tr2A6HRN3kD8dE7eQSAoTr2A7Hfi/ex30x/ePxxL3isz4UUAKE75A+gsgHTYGE35A8gr7fPke2R344vz0FRO+QFAdE72AOh0TfkA/HRO+QEgKE72AOx1efPcLHXyTCl6gdv8A+YAAaQoS96bPWb0T4Pdf97++Cl6Lx/etxwH3NNb3DswD9zn3p5kKXnvH9xjF9scS9zRBChP497z3fhVyUQYT9DcKSogFsR0OXov3G0/HEvfQzBOg+BH4GBVYBhNg+1r7mgVY90wHE6BAzAcTYNa3BxOgx18H+zkW5Qpee/cRHfgZmgpee8f3NMfWxxL3OcZQ0PcczBPs+Af3v6UdXp9299zHAfeKzAP3OvgX1x1ee8f3GcT0xxL3M8xdzPcGzF3ME/L3wHsVkB0fE+w6HRPyPx1CyF7bHj/3DhW1qqi4uKpuYWVsc15ebKOxHhPsOx1ee8fWx/c0xxL3PH4K93zfkgpe98r3Cx33ypMKXv8CPIAAaQrkdxL3ps9ZvRPg91/5Ar4KXvfZx/etxwH3NNb3DswD9zn47JkKXvfJx/cYxXJ39yzHEvc0QQoT3Pe8+MMVclEGE9o3CkqIBfcmHR8TurtouF2ZHhO8tpiisbAaxVa5RkxUYVWDHsyHBaGOop2uG6ukc20fE9xycm9nHg5e+CLH95F3AffQzAP4EflbFVgG+1r7mgVY90xAzNa3x18H+zkW5Qpe98b3ER35W5oKXvfLx/c0x9bHEvc5xlDQ9xzME+z4B/kGpR1e+R7HAfeKzAP3Ovla1x1e98vH9xmra8Ryd/cqxxL3M0AKE5yA98D3yxWQHR8TmwA6HROcgD8dQshe2x4TzIA/9w7IHROrADsdXvfLx9bH9zTHEvc8fgr3fPgvkgr8Hw77t/sD1PcG1AG61fcE1QP3RvsDFdLFxdLTUcZEQ1BQQ0TGUdMfUvcVFaqlpqqqo3BsbHNybGxxpKoeDhwG20gdHAjkAxwJIm8dHPe0OxwISmEKHASDSB0cBowDHAbKbx0c+gw7HAXyYQr4v0gd+sgDHARybx3+MDv6LmEK/E6L9wIBun0KDvxOtQr79Iv3AveH9wIB5/cBA+f3AnkK94dYCvv09xsd5/cBA+f4Y3kK/GNxCkOL9wIBuvcB1vcB2H0K1vsCFfcB9wL7AQb3TvsCWAr8QLAd/ED7IXb47PcCEsH3ASzjE9DP3R19+AZYCj2iHT37NuH4pvcCErrn6vcBJuPt5xPs9973/BUzBkZ6aVVmHjRQZlRGGvsJ7Tn3IPcQ7uz3FZceL5EFNYBTTzobNVO6zYwfzbqevrYe0sWhvOMaE/Ar6VgK/E73hvcTHff0ZAoO+/D3Q/dbAbr3XwP3KfdDFcS3tMXFX7VSUV9hUVG3YsUfDvtlrh37ofet91wBuveuA/dh+HUVLAZM+1wFzgbEFs4G5vdcBSwGDvs7nh37Nt4d+zu7CoiECvtlrh33negKut0K+NqDCvs7uwr8Tov3AveH9wIBun0K+wH3h1gK/E61CvwFsB37O54d9xGFCvxOh/cTHfVkCg49oh37tfhT95uLdxK64+HjE3D3b8Ud/GH4U/ebi3cSuuUTYLogHT8HE6CZ+08FyQaZ908F1wcO/E73Gx269wEDuvhjeQr8Y3EK+zbeHfxHzx377YX3BveH9wYB5/cIA/cqvR377GQd94T3BhLn9wj7APcBE/D3KrgdS4X3BgG69wjR9wjQ9wgD9IVeHfcUxHUK900WaqRzrKyko6yscqNqanJzah4O/EeYCvxH+yF2+O73BhK69wj7AeMT0MHdHYT4QZ0KPZ8dPfs24fio9wYSuufb9wgw3+/nE6z33Pf8FTcGVHhbWWkeME1mVEYa+wntOfcg9xDu7PcVlx4vkQU1gFNPOhs1U7rNjB/Nu6DCuB7KwKLL1RoT9PsB9y0Vcx38R/eE9wYBuvcIA/T3hF4dDjrUCvxHhfcG94f3BgG69wgD9L0d/AWYCvxHzx09nx38RmQd94T3BhK69wj7APcBE/D0uB37b9EK+2nRClz3kNsBuviMA7r34BU7+IzbBw73ofeQ2wG6+cgDuvfgFTv5yNsHDjrUCvdq93/3UAG6+ZED+Y74KhW9SQVFQkFoQBtceZHD+wMfolxVmmQbR1dwSlEfWtAF3+XDptsbtcV8drQfUPcHmoa5G8i2oMnPHw7W98vbAbr5BgO6+BsVO/kG2wcO++CmCvvgpQr7cY8K+3GkHfvIpwr7yLcd+7J3Hfed2B0O+7J3HfedA/cVygoO+6hM+gwBuvcgA/fW+c0V+6f+DPenBvtI97OL98/3SPeyCA77qEz6DAH3SvcgA/fW+c0V+6cG90j7sov7z/tI+7MI96cGDvtxjwr7caQd+4z5ftsBut0Duvd9Fd34lfdx2/vDBg77jCTbAfeg3QP38vh+FTn8lftxO/fDBg77C3cd+ETYHSn8ZxX3S/xoBd0G+0v4aPdL+GcFOQYO+wt3HfhEA/e8ygr8RPxoFd0G90v4aPtL+GcFOQb3S/xnBQ77ivsm+ngBut0D97355hX7jvtzBfy3B/eQ+3bAxftz910F+HUH93H3WgUO+4r7Jvp4Afei3QPx+eYVVlH3cftaBfx1B/tz+13AUfeQ93YF+LcHDvuM932z+B2z27MBurPbs/KzA7r3fRX3NPhF9yP3NPvDBrP8vRX4lfdzO/sj/EUHDvuMJLPbs/gdswG6s/Kz27MD9/L4fhX7NPxF+yP7NPfDBvubsxXb9yP4Rdv8lQcO+7JMs/m8swG6s72zA/fM+c0V+53+DPedBvtI97OL98/3SPeyCPt1/eQV+bz3Lgf7H/ugi/uj9x/7oQgO+7JMs/m8swH3SrO9swP3zPnNFfudBvdI+7KL+8/7SPuzCPedBvtWsxX3H/ehi/ej+x/3oAj3Lv28Bg77yKcK+8i3Hfvgpgr74KUK/EpkHQG89wED9zIWXgoO+6P7Gnb3L/cZHRZeCvtv9y9xCvuj9x0dxfcBA7z4zfcGHfcC+53QCvuj+Oz3GR347BX3AvsB+wK0B2T7LwW9Bvtv9y8VtAZk+y8FvQbE9y8F9wL7AQcO/Er3HR0DvPjN9R38SrcKINf4JAG6+FC4CmP7ghX3Hfs2BfQG+z73XPc+91wFIgb7Hfs2BQ4g1/gkAbr4UAP39uEd/FD7ghX0Bvcd9zYF1wf7Hfc2BSIG9z77XAUO+8nX+CQBuveGuAoO+8nX+CQBuveGA/cs4R0O+7H4U/ebi3cSvOPh4xNw93HFHfxd+FP3m4t3ErzlE2C8+VoVPwcToJn7TwXJBpn3TwXXBw77ForX+A/X89cB/wDogAD/AFKAAAPHFsSK5om9upXkGa/31QX3Pdf7NQaRvQWuj6Cerxvp1gY0jDCMWV2BMhmGXQU0P9oGZ/vZBWiHdnhnG0oGDofvCt7X9wrnTecT+ucW9z8w1+YG9yiM59n3DhrnUMkqlx4T/NeavcPWGvcHQND7G5Ye7D8s+z8H4/0EFfd83vt8Bzj30hX3cN77cAcT+tf70hX3fAfqisBhQRpFUl8wih4T/PfUBPdrB9eCtWVOGk9hZj+BHg74v0gd+sh0Cvou2/4wfAocBINIHRwGjHQKHAXy2xz6DHwKHAbbSB0cCOR0ChwIStsc97R8ChwEgkgdHAaLAxwGyW8dHPqlBvej96MF+wUG+8r7y3Id+6L3owUcBVdhCn/W94PQtu/3HdYButb3JfDy8PceOR3q+y8V1AbLo7muxhvGuWhLox/UBvJzPcwnGyc9SiRzH733mhV2CvdgFnYKDn/W7tD3S+/3HdYButb3JfDy8PceOR3cgxX7AJvlO/cCG/cC5dv3AJsfRAZGe1BZRRtFUL3Qex+E9wcVdgr3YBZvonSnpqKip6Z0oXBvdHVwHg73oegKvN0K+NyDCnSEClegdvkO1wH3qtfS1wP4iSAd+3MG+yktPfsQ+xDpPfcpH/vG1/kO0v0O1wcONPsB3fkG3RLX5TTl94HlNOUT1Pgu+I0V45EF9wF8+wXINRv7BC5UJFypaMdxHxPoSm9vXlQaP79j9yhoHul0r29jGl9db0RAU7LLgR4yhQUile5B9w0b8vO87cB7tkuqHxPUw6GmsL0a51m0+y+yHimlcJ20GrO4p8fZu2dRlR4T5PuI+2YVs7inx8Hfd01fXHFEHi2VbKy0Gg73U3/UQvcw9zn/AGaAAP8AnIAA9zJC1BK81UH3PviC1RNz+Dr4zBXz0VAslB9AhgXCg2KuUBs8WlcxMLxW2sm1sMmTH9aFBSeBRU0gG/sRPdz3GPcY2dr3ER8TjfwJ+2cV+2D3Ofs592D3YHsK+zn3Oftg+2D7Ofs5+2Ae1Rb3NvcZ9xr3Nvc19xr7Gvs2+zb7Gvsa+zX7NvsZ9xr3Nh4OYOkK6r/xvuXEA/e49ygdyyEFxgZE9wUFsZWhp7EawGCrRB77h60d9yfcCmDpCvcCv/G+1sQD98f3KB3Ts6nAv1+sRR/7lq0d9zbcCveJ9/vJ93zEAfdfx/c0x/eTxwPnIB1S9wP7usf3uvcDxAe8+/MVx/eDBuX7gwXXBuT3gQX7gcf38zoHIfu1Ife1BTkGDvuN+BjV9y7VAbrW9yzWA/da+BgV3s/P3t5Hzzg4R0c4OM9H3h8/9ysVta2utbWtaGFhaWhhYWmutR4O/B1ZHfui+PX3FgG6962HHcMWUR38EfcMHf3w2/nwBw78EfcMHfv32/f3Bzv98BXb9/c7Bg5BoHb4Wukd/Frb+Fr3KR1B+xV29zjX+ADpHfwA+y4/9y77ONv3OPct1/st+AD3KR34U4vbyNn3VNn19weLdxLn4/gP48rYTveWT9cT70BEHRP3QPjnB/fn/OcF9xT5WjP88gb77fjyBfiE/B8VIMNI5OTDzvb2U84yMlNIIB4T7oCb+88V95bb+5YGE+9AyPd/Fcmjrbe3pGlNTXJpX19zrckeDl73ZLzpva+86b0B2r73Xr4D9+D4JRX73vcYHQf8XSYV9xgd+2AGDvdo93z3INv3RgH4NuXb9yAD9+b3fBX4Gvgi+yD7lvuO9wMG+0n7SfdJ+0oF+7X3ShX4BfgFBftv5feW98D8wvwa+3EHDl73870B+Ca+A/i4+CUV+4VZ6vusvves6gb8hPerFfD73gXBBvD33gVVBkH7j0H3jwUOLzD3NU52qnb4s3cSuuXY/wBLgAD//+uAANcTOvg59/QV5ZF/60TLNJ4Zk+cFPwaDMwX7GX82IvszGvsfzCn1bR4TnIMyBdcGE1yS2vcDjOrVnPcLGTCRBROagERXYU2GrfgTGBM6t32uaJNXCPuwNBX3ALfQ2JoeavwKBVOma8rnGg5R7NX3kNW4dwHo1feQ1QP3uewVtbGYoasf2jzBwTzaBaCrmLG0GrR+snarHtraVcE8PAWga2SYYhtiZX52ax882lVV2jwFdWt+ZWEaYphkoGsePT3BVdnZBXarsn60G/sS91wV0MTE0M/FUkZGUVJHRlLE0B4OjzD3OjXhSnaidvkd4YV3EtXn9xXX9xPnExeA9yv3fRUvhZb7Fegx9xh6GROHgDnXBxMngNsH9wiV8s73Dhr0Ksv7Dq8e94EHyHe0WZVJ55EYfvcDQOH7CKIIExuA4D88B/sWhzBB+wka+wf1UvcHbh77jwcTF4A7nVvEe9oImve+FRMbgMvBtNaPHvt1BxMXgEefTqnNGhNHgPdh/FwV93wH42uyZFIaS1loPoYeDuZ74fc419nX90ThAfcj5wP5SPd0FS2RBS54TEg6Gy1M0OpwH/cyBpbXBftLBoqZipqaGpaLl4yWHvdVBpbXBftUBvCkytbuG9fIUDahH+eRBfcWbCzp+xEb+yMj+wL7LGofKz/gBoqAi3+AGnyMfIx9HjU/7Qb7Jq/yI/cfG/cd6fD3H6UfDqh/4fc019nX0Xf3EuEB4Of30OcDxvd+FbEGg3yHeXoa+wfwOvck9xPu0PcCqx4mkwVNcE1kQhs0TrjMnJGcl5sf+DjX/MAG2QT4wNdbBpaekqKgGvcOK9j7LfsGMEH7Cmwe7IIF1avBtMwb4MdcSXGEd3p6H/wuBg7Xi/dZP9fZ4feb4RL3NuMz91/3aOcTuvg1IB37k/yV+wgGE3o/9wgHE7r7DeMHE3r3DQcTdvcHBhO21wcTuvsH2a8KrqB296fh6Nfp4T/XEuf4ohP0+BwW9w8G+8L3pwXVBvcj5M33BZwf3dc6BhPshbR8rnOnCPcSBhP01/yiNfdXB+a/bEyZH/v0P/fzBk18V2wyG/tXNQYO9xaL4Piw4AHn49vj2uPb4wP4ASAd+6X9WuP5BfdPBrCidGYf/C7j+CkH51HFLx4i/VoV96UG58XF5x/4xDP8yQdmdHRmHvtP+GozBg5ui+T3d9f3jOES9xLmYOE194oT8Pfm+WoV+wotNvsEaZNlml0fkXgFKz8GE+j3BQaMfox+fxo3ZE9AXh4yB/iFjgXh/DgH6bWx5YLqCBPk9zTXBhPw+0UGe7+Bs6oa1Me/zMS9a1SdHvGSBd18Qt/7IxsOfaB29yLbzNv363cB96TjA6AgHfdh++sF+w479zxK+zw79zz7IuP3Ivcy2/syzPcy2/sEBvdg9+vrCg5A95Pb91p3AfeJ2wO69+MVO/da+1rb91r3Wtv7WvdaO/taBw5A95PbAbr4cAO69+MVO/hw2wcO+zL1+B4BuvgdA/L4iBVTUvcg+yD7IPsgw1L3IPcg9yD7IMTE+yD3IPcg9yBSxPsg+yAFDkDg9wbh2+j3BgH3ffcIA7r4ARU7+HDbB/u2+3N1CvgJBHMdmvcw2/cS2wHn+HAD5/hOkh37shX4cNv8cAYOQPcw2/cS2zv3PBK6+HATsPfc+KYVE9BwMwX7kgYTsDv3egdk+xIF+1M79zsGYfscBdoGtfccBfd62/tiBrL3EgX3OwYT0Nv7IwcTsKbjBQ4vq/iWAfhA1wO8+LYVMwf4D/s9/A/7PQUzB/hb918F9wAHDiur+JYButcD+Ir4thX8W/tfBfsAB/hb+18F4wf8D/c9+A/3PQUOQPUKutuSHdwV+HD3FwX3AAf8cPcXBTgH+Bol/BolBQ5A9Qr4n9sV/HA7+HAG/HD3uBX4cPsXBd4H/Brx+BrxBd4H/HD7FwUOQK7b92HbO/dmEveJ2xPQuvcHkh33YRX3WvsW2/cW91rb+1oGE7D3FjsHE9D7FvtaBw4g3dc/90j7PvdHP9ep1z/3R/s+90g/1xK62/ew2xOJwLr3yhUTgsDbBhOJwMqbtLGsnHJxnx5toqZrxhvbvtbzHxOEwDsGE4nATXtiZWd6qKd1Hqd1cKdUGztYQCIfEynA+24E2wYTmcDKm7OxqZx2cp4ebKOlZ8ob277X8x8TScA7BhOZwEx7YmVhe7Ksbh6hd3GeXRsTKcA7WEAjHw4g93/aPPdO+0T3TjzaErrb97DbE5y694kVEyzbBhOczJu1sbGbaWykHnCgp3K+G9u+2fcAHxNMOwYTnEp7YWVqeqWmdx6qdHCsUBs7WD37AB8O+zT3f9sB9/rbA7r3zxU798v7Pdv3jQcO+4f4E/e2OtwSuvfIE6D3o/gTFd8GE2An97YF+wAGE6An+7YF3wYTYNH3ZQUO91jq2fdX2j3ZErrl+MvlE7j4CvejFUtmWGlTG1dit8HBtLe/H8SKvWmwTAj72xYq2Tzq29q02bUeO7XcZNwb6Nfa7B8T2Ow/2i4eN4o+YmA9CBO412A/tzkbLD08Kh8T2Pg4FrHLv63Eigi9irNgVhpWY19Zih5RileuZssIDvue+yrY+VbYAYv4DwP7KQS6iuaJvbqV5BnN+OiPrqCgr4kZuomS2FyMMI1ZXIEyGUr86IdodndnjBlbjQUOkovb+MHUi3cSoPj2E7Cg2xU7+PbbB/uM+QoF+wYG+zf9ChUT0Pdw+MH3cPzBBQ5u+xV2+aDbEqT3Uzvb91DbO/dPE+T44yAd/Mo7BhPY9wP9oNv5oPdQ/aDb+aAGE9T2Bg77ByUdAab4cAOmIB02B/dJ+6L7SfuiBTb4cOH8Cwf3SPeh+0j3oQX4C+EGDmn7FXb5pNcBofjLA/jhIB37rQb7HP1XR/fhBTkG8Px6BfAG9yv5pAX3agYOW/cNHRPovAr3L/ccuvik/Ei4djwY90J89fsLjftC0woIE/DWhchfmD+C+xFBOSyTCBPoMpRTzZXvCA5Y+xV29x7XYHb4pncS5eH3iOE53RO8+I4W+KY1+9AHE9wvV1E3Q2e97x730DX9POH3XAdlnLVzvBsT2sjBscikHxO6NAcO9xGFCvhXwwqv2Pcd1xOr8PocFtzL2OzsS9g6Oks+KirLPtwf/e34rRUTGwCTHR4Tq/A6Sz4qHxNGAKz8uRXsBvia+XYFKgYTGwD8bvtRFcalsLW1pmZQUHBmYWFxsMYeE6Dwvx332tIKDtb3FR35WhX7y/vKBfsFB/eh96EF/MDf+L4H96H7oAX3BQcOfPkM2wH/AfSAAP8AUIAAA/jZ+VsV/EyMPDsF+BAG/B38HcZQ+Bz4HIz8ENvbBQ73N/fM3wG8+VoD+YvbCvzAN/i+9x4dfOcK+In/AE+AAAP42I0VjPhMO9oF/BAH/B34HVBQ+Bz8HPwQits7BQ7W9xUdFvfL98sF9wUH+6H7oAX4vjf8wAf7ofehBfsFBw585wr/ADGAAP8AT4AAA72NFfhLBtvb/BCM+Bz4HFDG/B38HQX4EAc7PAUO9zf3zN8BvPlaA7z39hVyHfug96EF+L7f/MAG96H3oQX7BQYOfPkM2wG8/wBQgAADvPlbFfxLB9s7jPgQ+Bz8HMbG/B34HQX4EAY82wUO+CX3zN8BvPpIA/p52wr9FAb3ofehBfsFBvvK+8tyHfug96EF+RD3Hh3W+yB2AffS3wP3/Ps1FffL98oF9wUH+6H7oQX5FAf3ofuhBfcFB/vL98r7y/vLBfsFB/eh96AF/RAH+6H3oAX7BQcOm/c82vcZ2QG8+McDvPfIFd8GnsSzp6x4rHiIZZFkkGmXaLdxz2Tcs8Hl4lgYdfeD+2so3VtrVWlwa54ZbpuJqoithrGEtVipO7n7CEB6IAgOrvfO2wG82wP3Off2FfdX+zYF9w73o9v7pPcOB/vK+/kV2/gaOwYOrvfO2wH4u9sD+Jf39hX7Vvc2BfsO+6Q796P7Dgf3e2oV2/gaOwYOnvcnHfir2xOw+B/3iRX3D+zn9wr3Cirn+w8f+7s797sG2clSQkJNUj0f+1sGE3D3EvcRBfsBBvs4+zn3Ovs6BfcABhOw+xH3EgUOnvcnHbzbE7D3ofeJFfdZBvsR+xIF9wAG9zr3OgUTcPs49zkF+wEGE7D3EvsRBftbBj1NxNTUycTZH/e72/u7BvsPKi/7CvsK7C/3Dx8OpaB2+CffAfiu3wO8+FEV91f7NgX3DPe6/Cff+Hv8D/cMBw6loHb4J98BvN8D+QL4URX7Vvc2BfsM/A/8e9/4J/e6+wwHDqX3c9/4J3cBvN8D+QL3nRX7V/c2BfsM+7r4Jzf8e/gP+wwHDqqgdvkK2wH4PdsD+GUW9zb3VgX7DviY/Fw7+Az8R/sOBg6l93Pf+Cd3Afiu3wO8950V91b7NgX3DPgP+Hs3/Cf7uvcMBw73Mdv3mgH3zPdIA/fM+DoV++r3SPfq8Af7U/dT+1T7UwX7UTsV+BH4D/gP/A8F+2X76vvo9+oGDvtz9yUd+UoV+zb7VgX3DPx23/h19wwGDmT5XXcBvPiQA/jB+V0V+5B04Db76fvpx1D36Pfp4DUFDvcV99XfAbz5OAP5aff/FftW9zYF+wz8djf4dfsMBw5kjviQAbz4kAP4wY4VdPeQNjb76ffpUE/36fvoNTYFDvtz9yUdnRX3NvdXBfsM+HU3/Hb7DAYOZI34kAG8+JADvI0V95GiNeD36ffoUMf76fvpNuAFDvcV99ffAbz5OAO8+AEV91f7NgX3DPh13/x29wwHDmT5XHcBvPiQA7z5XBWi+5Hg4ffo++nHxvvp9+ng4AUO91n3wN8BvPl8A7z36hX3Vvs2BfcM9/j7DAf3Vvc2+1f3NgX7DPv29wwHDvtzj3b5fHcB9z3fA/dnehX3NvdWBfsM9/j3DAb7NvdW+zb7VwX3DPv2+wwGDvdjlHb5dncBvPmGA/g+fxX3afc49y/3afdr+zj3L/tp+2n7OPsv+2v7afc4+y/3aR8O92N/0/jm0wG81fjy1QP4Pn8V92n3OPcv92n3a/s49y/7aftp+zj7L/tr+2n3OPsv92kf+8P4BBX3QfcY9xH3P/c/9xj7EftB+z/7GPsR+z/7P/sY9xH3Px4O92OQ1fjg1W93p3cSvNX48tUTnPkV9zoVv1ecnJuemaAZTbSAen99fXwZ/OT3XBVyjnKQdB7UmgWGnomeoBpI0xXUfo6ekZ6SnRlHp4F1hHOHchmj+20VlXWYdZl3x7cYgJqBnIOdCGf31xXJYpacl5mZmhlXv3p6e3h9dhnB/GwVnXqefKB+sskYepZ8l3yZCBMojPidFbROmpadlJ6TGW/PdIF1gHd9GdT9IRWigqOFpIaX1Bh3j3iQeZIIE8Sv+RQVmUMFjp+ejZ8b1Qdyc4iHcx/U/W0VpKOOj6MffdMFiHd4iXcbExS/+OEVn4eehp2EptAYdJRzkXKQCL/9FBWnR6KVoZafmRliyHyAeYJ4gxm6+KEVnICaf5p9vcEYeZx4mnaYCLr7JBWWfJV6k3nPqRiBoX6hfZ8Ib/vYFc9vlaGSo4+kGUKYiHiFeIR5GZr3QhWQeI14dhrVjAWkiKSGoh4OI4vQW3b409ASvPhPE3D3bvkYFfs9+9b3PfvWBfQG9z331vs999YF+0771hX3GveR9xn7kQUTsPsZ+5EFDvds9Ar5WhX4Lv1aBf3HBg73RmcK5/laA/m29/gV/Vr3+AX9XQcO92z0Chb8LflaBfnHBg73RmcKoPlaA6D3+BX5Wvv5BfldBw73bPckHdsV+LAG+6P4awX8Lfy7Ffgt+Vr4Lv1aBQ73RmcK59sD+bb3+BX9Wvf4Bf1dB9v3FRX4Wwf4V/t3BQ73bPckHfkKFfeh/Gv3o/hrBf082xX5xwb8Lv1aBQ73RmcK+R/bA6D3+BX5Wvv5BfldB/yn+/gV+Ff3dwX8WwcO/RnBCv0Z1wr9GcQK/RlZHf0Zxx39GVkd/RmtCv0ZtAr9GawK/RmvHf0ZlAr9Ge4d/Rn5BPcCAbr3AQO6+XL1Hf0Z4x39Gasd/RmnHf0Z94vXAfdb+DQD91v31xU/+DTXBw79GeMd/RmcCv0Z0B370cEK/GHXCvwdxAr8HVkd+6PHHfulrQr7pbQK+5+sCvwArx37a5QK+7vuHfvjqx38FKcd+7KcCvxR0B38SrcK/B1ZHfxh+Hv3c4t3ErrlE2C6IB0/BxOgmfsnBckGmfcnBdcHDl4Of/l2Abr5dgNcCg5/1vjg1gG61vjgOR0Of5f4ppf3PJsG+zaXBx6gN/8MCYsMC/nUFPkZFakTANkCAAEABAAKAA8AJwAvADkAPgBIAFQAWQBeAGQAaABuAHMAgQCLAJEAlwCdAKsAwwDKANsA5QDuAPUA/QEDAQsBHwEnATABNwE9AUMBWwFgAYABlQGaAaIBrQG2AbwBwwHLAhcCPwJEAmsCggKIApsCnwKjAqwCsgK5AuoC9AMEAxMDGAMiAywDMgM9A0YDTwNWA10DZANqA3cDhgOQA50DoAOzA74D0QPYA+gD9QP+BBAEHQQsBDEEOwREBE4EVwRgBGcEbwR3BH8FKwW6BegGBQYNBi4GlQa5BxcHdAeCB4oH2wgNCCkIQQhQCHQIuAjOCOUI/AkOCRgJHwk4CTsJRQlPCX4JgwmUCcMJ7woaCkQKbQp5CoQKjwqXCrIKzgrjCv0LCQsqC0QLZgt+C4sLjwugC74L3AvjC/4MGgwhDDMMOgxVDGkMgwydDKsMtwzKDOEM6wzvDQUNDA0VDR0NMQ1ADVINZA13DYoNmw2mDbgNxw3LDdEN3g3vDf4ODg4dDi0OPQ5HDlEOYA5tDnUOfQ6LDpkOpw6wDr0Oyg7XDuQO8A78DwgPEA8bDyYPMQ88D0cPUEUdDsg2BWUKDnb5WncLepugebYbx7LA2h9MBlx+dnBvf6Gedh4Ldh1PZFg7HwsV5ewxBvckKiIdy5DLEgv3Ih2fm6OZnx8LFeb7FgXOBkz3FgUO+1L3FgvK92bKC/cAvPcAC4uCCguOQQXZBgvN9yzNC+H//7CAAP8AT4AAPdkLf91F0fgezUnZC/ib+KYVC4vX+A7XC3vh+RV3C/dbBvsHhEYy+w+0HR8L4LVgM4wf+y5tBfsKdDlw+wIaLOFT9B4L/BL3nccKC6QGtqxsZGhscGNia6OqiB8L+SMW9/z7sDUHC/sJdjhw+wQaC9/FuLuhHwt/12B2+KZ3CwZlYVYKC2IK+Fv3AR0LsNd1BnWBlaEf92gH9yI+2/sdHgttonSq7AoeC8xdzPcGzF3MC8z3GMxZzAvhN9882gugdvimdwvGClUd9wTs1fcMnB8wkQX2HcrEY0eWHwt6HYYdC6D5WhX3Tv1aBfcCBvcf+Kf3H/ynBfcCBvdO+VoFKgYL+yP84fsm+OEFKAb7Jfzh+yT44QULzI/IHQtZBlJra1IeC3vhWnb3puH3rOELi+r3xfcWi3cLS7t6wR4LYgrj+VoHC/snK/sA+z0L+DR/Ffdg9zn3Ofdh91/7Ofc5+2D7YPs5+zn7X/th9zn7OfdgH/u6+AYV9zj3FfcV9zn3OfcV+xX7OPs5+xX7Fvs5+zn7FfcW9zkeC/etpxXOxa7DpR80B0JTZC5KXqi8dR4xhQUupN9O9wUb9x/r1fcgHwvnA6gdCxVWtWO/vrWzwL9htVhXYWFXHsOMFZ6cnaCfnHl4d3p5d3Z6nZ8eDilUVzo/a7/tHvfQNfvpB/sExTL3Ch4L3gpgCgYL+yvsIfcdHvsk95UV9wDEzuceCwWEHQv3EB0OFfcB9wL7AQYO2Ar30QcL0Miqz6cfCzSjIqLiGs7Gtdvsz1EzmB7nkQX3F3wm6vstG/scK0D7DPsH9VL3B24f9yFnyWBDGgv4NH8VdR2JHR8LXrKqdbsbwra0v8BjsFIfC/cC+wH7ArQHZPsvBb0GC6BiHdoL9+jh+xL4rvcMCwb7ovujBfcFBg7nIB39WgsSuuX3u+E24DndCxX7AvcB9wIHC9kGNPcMBSIGCwH4X+cDvQufdvlddwELQk1rRHAfC/8AMYAACyQdyvcWAbzn+GZRCgsjHc73FgG65ffG5QNKHQuDHfc58vH3Nh4LMwrt9xYB2OP3/EAdC5sKDvcPHRPozwoT8EZkbUp6H4jqBQuFHXJyb2cfclEGCxW0BmT7LwW9BsT3LwX3AvsBBw4BxPhIwgoL4gr70eH36Qf3BFHk+w0eCwPJ9/cVch37ovejBQsVaqRzrJQdHgtvonSnpqKip6Z0oXBvdHVwHgvKBrqZn6ajl3p6nB4LbXiYpoEfjPdCFbykq7YLZAr7AQtTHRN+gJP7CAUL9zn3Ofdg92ALBvej96MF+wUGDvcBA7r3AmQKC8z3Hc9RxRP4C9v4phX8pgvlfeN35RPoC/cBI8v7FK8L4fd43/d24Qv4fhWHVgWydluiThv7FUUn+wF/HxPewPsCfsMo9xUbz9CyvKIfE79Amvsb96GJlfe+CPdpkvs39zv7bBv7hPtY+0j7eoMff/vR96T7O/fb9xF60hj7syH7b/cTlfefCPdQkvc19yj3XBv3QvcY+yD7P4UfhvsoJ01kx3+cjrmNoQgT3sCd93oF++j7XBXZk7TT5xsT30DmqEI+hB9Bg2FBMBsT3sAvb9TWkh8Of/l3Afdc9y0D97X5ahXsgtsvaCR5V19WRmD3NvtiGKOrlMyHwuWDGDtxOWRcHuEkBSMGZ7cFZ2RNd0Yb+yol0fcW36+95MkfmJQFXch4xL0a9OHP5YMe+zT8rhVByl3vu7aapJ8e+z/3bgVfblBgSRrS+AYVbJlkrlsey6izubYauXGsYI4eW45mZIxdCA7DChNXwPjq+WoV/Jr9dgXsBvia+XYFE5vA/Rz7URWTHTpLPioe2NIKE7vAvx0OMx10HROyNR0TuDUKE7Q6ChN0TAoTcj4KE7JFCg4yHc73Fp0dC1YdE7hANR0TuQA1ChO4gDoKE3iATAoTeEA+ChO4QEUKC3sV9y33Adz3FuJYzzauHxPsy6exudMa9wQs3vsZ+xgrOPsEQ7BdzG8eE/I2aVhHMxr7FvcBOvctHvs+924V3M2+8/PNWDo6SVgjI0m+3B4T7K333RXOv7Xf379hSEhXYTc3V7XOHg4vChOsIDEKE6yANQYTnIAtHROcQDEdE1wgLQoTnCA2ChOfIAv4OBVVjAU0B8GMBRP03o3jYywaLDNmOEY4rOGDHjCFBfsJkfI59yIb9y73AOL3EOdUzyioHxPo4aS3wNoa9wEp1/sg+wstRCd+HueFBcOUv67UG+XDZU4vO21JjB8O+LsV55IF9wFrM8b7ABv7YUf7XPtp+wOkMb5XH1W/ynXJG/cn8+z3L/cmLPH7IT9MaEtkH/c4mcvm9BvNvGtSoB8T7PvN+88V6ozQzusb48lILCpKRi8sSdDsjR8O3fga3QHH5feI5QORCgsrHcz3Fn0dC/sH2/lV2wG6ybTcA7r3/BU2B8eNtlM6GjgHJtVE9R662wYhh2Ok0BrnB+ZazUKZHowH0pm+zOUa5wfQs6T1hx7bXAchQUQmHzgHOmBTT40eDovh93vX93vhAfdI4/gS5wO8+B0VP/cX+9H3dgfWCvtw+9EG4/vHFfd79yvX+yv3e/Id2x3OCvsCk+tG9xIb7/a38ngdH3EdxcZoUJceCxVLhQXBHRP4eAq0qGtaih5bimxsZRuWHRXfCvsTxTvoHzL3YxWgCvjzJgq6KgoTcPcr+TgVo5d6epwfE7AjChNwJArKBrqZn6YeDiAd/BsGVPwkBeoGvaHCqMwb8MtNKC5MSi43RLbXgB8vhQX7CZX1OfciG/cj9PD3I/ciKvL7HU5NdWRpH6j3aAX3zgYOowr3Ds8k+0v7Skcl+w77Dkfx90oeDlId947hE7ZZChPWcwoT2mgKE7qI5gULhfcG+O53Err3CPsB4xPQwdodLP0nnQoV5x1jHV0dzVm5RUFVWj6CHg4VuQpKiAXcHQYOFdwdx7kKC/jx9QG6KwoD8PjxFewKbaJ0qh/ywBU/Cg51Cg52+KZ391x3pAoLAc7l96jjA6kKC+uswMOem4WAmB77FPthBYWfiKSnGrT7FhX3FPdiBZF2jnFuGi1qVlN4e5GWfh4OIgq7HQuwChNPgGFkBRPvgF0KoqQFC3sV90H3Afcj93f3efsB9yP7QftB+wH7I/t5+3f3Afsj90Ef+1L4BhX3S8/y9w4LAdvhA9sgHf1a4fcbB/H3A/c++4oF9Qb7bffF92P3dQX7CQb7j/uvBfhjBwv7AvnwAfdD5wP3E/mCFTsG9z77s4v7svs++7MI2wb3Tveoi/fI+073qAgO+wL58AG65wP3nvmCFTsG+077qIv7yPdO+6gI2wb7Pvezi/ey9z73swgO+wLb+VDbErrdOfeHE+C6+YIV/fAHE9D3h9sGE+D7NflQBhPQ9zXbBg6wChNPYWQFE+9dCgv3MfeCFTGDBbMKC9sgHf1azh33jgcLLArb9xaCHQv49csBui4KA/cF+XcVSQZCyVLb28nE1B7wCg749SgduveqE6D3i/j1FWUKNfsMBdkGE2DI4AUOMVXJ9YMf+BMGirIF91KCItb7CBsL9zsG9w4d+zv78RX3m/c7B/bAYDUyVl4gHw6nZgW2lax7axqPHQsgHS0G+/38cwU1+AP7JeP3JdzhOgf77xb3l/fsBfvsBw73IR38S/s0NfgV4fsd+QQGE+hGBj5qaj8eDvskjOgl9xgb9yDj8fc2H/hiM/xiB/sGWUsxNVrH9wCKHgv49fcMAbr3qgP3i/ltFU42TuAFPQZ8HQ5kHQG69wED9zAWXgoOhR0fC/js9wIBvPcBA/cy+OwVXgoOA/dM+HAV+x37NgU/B/cd+zYF9Ab7Pvdc9z73XAUL+2IGbPt2BckGr6GjjaEbsqloX11ta2RobaCshB8LAdvhA4odC/sC+fABvfgOA/hA+wIV+7v58AU4Bve8/fAFDvfJ+G4V+yeYJjV++yx++yLoIPcmf8WFwZ6/tgt2+QThxQoLFXJZBpEdE9BZBhPgUmtrUh4O/BL3neUdC/xa4fha9xnX+xmsB7ejpq0e3dc5BiheUTIfC/j57AG65cHlA7ogHSrl7AfBKiIdA/h5+EcV6vw2P/faB/vk+/0FLvhI1/vrBwuL2UZ2967Zmtn3VNmadxK62Pcd1+vY9x3XC/j19xYBuvcyA7r5dygK9wQd/QTj+QT3cAYL+Dn39BXlkQX3Bn0o0fsAG04KCxXytev3AvcBtiolKWAq+wH7AmHr7h4LoNkKYB3j+VoHCyuMHQv5yRU5BvdL/Gf7S/xoBd0G90v4aAULuvedFVUdC/zyB/vt+PIFC/vM9wUd98wLx33VhUwaVUh7WTxZs8qAHjGFBQvYCvfQB+awutwev9dXBgsV9wH3AmIGsvcvBVkGUvsvBQ73kNsBuvfgA7r34BU79+DbBw4WxqWwtbWmZlBQcGZhYXGwxh4LbspUsUOSCPs/+3wVkuvPyeSDC/sQ2wG6+GoDul8VO/hq2wcOexX3X/cO9yH3eQv3bPcM9xP3d/d4+w/3FPtvHwv4+ewBuuUDuiAdKuXsBw5/CuELIgru9xYLxXJ39yzHe3cSvEEKC/f2FfvK98sF+wUG96H7oQULlhXaugeun35ycXd8aB8O1fcI2veSz1HO9yLVE77AC/gTIB373DX3DPyu+xI1C+jF2/cT9xRR3C4uUTr7FAt74f8BCIAA4f8A24AA4RIL6IQFwZi6sssbC+zCv9/aq1cqHgsVKrY06NfFweLfVcJGHgslFc4GE7Dm9xYFLAYO7/cZBfsZBw4jHc4oHbrlC43/AFCAAP8Bw4AAdwELJtf1yE/R97TG9x3VEgv3cMX3N7fauMbFAbzEC/th9wn7OfdhCwUjBvtS+9v7U/fbBQupo6KpqnOhbWx0dWwL93j30d/70fd2993hC/sVdvce3fga0UXdEguL4fd84fdw4RLn4wtJBmZqbmBgaqiwHgvnFvhO4fv2+QQzBgv8ff1aBeAGC+dR5/ek51HnE/ILi/laAaD5xwP4QguL2/hXdwG6+HADC/cY+R4V+ww+P9gLe+H4zuHO7AG85wv7Lj/3FvcuHw4AAAABAAIADgAAAAAAAAEmAAIALgACAAwAAQAPACIAAQAkACUAAQAnAC0AAQAvAC8AAQAxAEYAAQBIAEwAAQBOAFYAAQBaAGAAAQBiAGUAAQBnAHYAAQB4AHwAAQB+AKsAAQCsAK0AAgCuALkAAQC7AMAAAQDFANEAAQDTAQUAAQEJAQ4AAQEQARMAAQEVASQAAQEmASoAAQEsAWQAAQFlAWgAAgFpAWoAAQG6AboAAQG7Ab0AAgHAAcEAAQHDAcQAAQHHAcgAAQHSAdIAAQHUAdQAAQHbAdsAAQHeAeUAAQHnAegAAQHqAesAAQIRAhIAAQIbAh4AAgIoAikAAQIwAjAAAQI0AjYAAQI9Aj0AAQJBAkEAAQJUAlQAAQJ2AncAAQKCApUAAwABAAEAAAAIAAIAAgKCAo4AAAKUApUADQAAAAEAAAAKAOwB4AACREZMVAAObGF0bgAwAAoAAU1BSCAAFgAA//8AAwAAAAwAGAAA//8AAwABAA0AGQA6AAlBWkUgAEZDUlQgAFJLQVogAF5NQUggAGpNT0wgAHZOTEQgAIJST00gAI5UQVQgAJpUUksgAKYAAP//AAMAAgAOABoAAP//AAMAAwAPABsAAP//AAMABAAQABwAAP//AAMABQARAB0AAP//AAMABgASAB4AAP//AAMABwATAB8AAP//AAMACAAUACAAAP//AAMACQAVACEAAP//AAMACgAWACIAAP//AAMACwAXACMAJGtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2mtlcm4A2m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1hcmsA4m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7m1rbWsA7gAAAAIAAAABAAAABAACAAMABAAFAAAAAQAGAAcAEADIC3oNdg2aGBwZKgACAAgAAQAIAAIAOAAEAAAASABeAAQABQAA/+wAAAAAAAAAAAAA/9gAAAAAAAAAAAAA//YAAAAAAAAAAAAA//EAAQAGAXIBdwG+Ab8B3QIXAAIAAwFyAXIAAwF3AXcAAgIXAhcAAQACAA0ADwAPAAEAJwAnAAEATgBOAAEAWgBaAAEAXwBfAAEAZwBnAAQBcAFwAAEBdgF2AAEBdwF3AAQBeAF4AAMBjgGOAAEBvwG/AAICJQIlAAEAAgAIAAIACgB+AAEAFAAEAAAABQAiACwAMgBIAE4AAQAFAA4AGQAmAGcBCQACABn/7AEV/+wAAQBI//YABQDS//YA6f/sAV3/7AFl//YCGf/2AAEAAv+mAAkAu//YAMH/2ADF/9gA0//YAPz/2AEI/9gBDf/YATj/5wFD/9gAAgYuAAQAAAbMCFwAHQAbAAD/8f/d/+L/pv/x/7oACv/Y//H/2P/E/+L/7P/OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//b/7AAA/+wAAP/sAAAAAAAAAAD/8QAA//H/9gAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/9gAAAAD/8QAAAAAAAAAAAAAAAAAAAAAAAAAA/+cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/EAAAAAAAAAAAAAAAAAAAAAP/2AAAAAAAA/7AAAP/2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/9gAAAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/8QAAAAAAAAAAAAD/+wAA/+wAAAAAAAAAAAAA//YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+L/nAAA/7AAAAAA/9j/xP/iAAD/5//YABQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/9gAAAAD/7AAA/+IAAP/2AAAAAP/YAAAAAP/x/+L/7AAA/9j/5//s/+z/7AAAAAAAAAAAAAAAAP+wAAAAAAAAAAD/5wAA/+cAAAAAAAD/9gAA/7oAAAAAAAAAAAAA//YAAAAAAAAAAAAAAAD/8QAA//H/9gAA/+IAAAAA//EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP9+/+wAFAAAABn/2P/s/7oAAAAAAAD/0//2AAAAAP/sAAAAAP+c//b/nP/i/+IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/8f+w/+IAAAAAAAr/7AAA/84AAAAAAAAAAAAA/7oAAAAAAAAAAP+wAAD/sP/nAAAAAAAAAAD/7AAA/9gAAAAAAAD/9gAA/84AAAAAAAAAAP/iAAAAAAAAAAAAAAAA/+wAAAAAAAAAAAAAAAAAAAAA/+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAA//EAAAAAAAAAAAAAAAAAAP/YAAD/7AAAAAD/9gAAAAD/4gAA//EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/7AAA/+IAAAAAAAAAAAAA/9j/2AAAAAAAAAAAAAAAAAAAAAD/7AAAAAAAAAAAAAAAAAAAAAAAAAAA//b/7P/OAAD/9v/nAAAAAAAAAAAAAAAA//gAFAAAAAAAAAAAAAAAAAAAAAD/2AAA/+wAAP/x//EAAP/nAAD/8f/sAAAAAP/2//YAAAAA/+wAAAAAAAD/8QAAAAAAAAAAAAD/ugAA/84ABf/sAAD/2P/iAAD/9v/n//b/9v/OAAD/7AAA//sAAAAAAAAAAP/xAAAAAAAAAAAAAAAAAAD/7P/2/+IAAP/xAAAAAAAA/+L/7AAAAAAAAP/E/+L/xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/sAAAAAP/sAAAAAAAAAAAAAAAAAAD/8QAAAAAAAAAAAAAAAAAAAAAAAAAA//H/9gAAAAD/7AAA/+cAAAAAAAAAAAAA/84AAAAAAAAAAP/OAAD/xAAAAAAAAAAAAAAAAAAA//b/7AAAAAD/9v/T/84AAP/sAAD/7AAAAAD/9gAAAAAAAAAAAAAAAAAAAAD/5wAAAAAAAAAAAAAAAAAAAAAAAAAA//EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/ugAA/84AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEATQACAA4ADwAVABkAJAAmACcALwAyADwAPwBCAEcASABNAE4AWABaAFsAXwBnAGwAdwB4AH0AfgCEAIoArgC6ALsAwQDFANIA2wDeAOkA7QDwAPUA9gD7APwBBgEIAQkBDQEVARYBGgElASYBKwEsATIBOAFDAU4BWAFdAWUBZgFrAW0BbwFwAXEBcwF5AY4BzAHNAhkCIgIlAmsAAgBCAA4ADgABAA8ADwACABUAFQAIABkAGQADACQAJAAXACYAJgAEACcAJwAFAC8ALwAQADIAMgAQADwAPAAMAD8APwAOAEIAQgAHAEcASAAGAE0ATQAGAE4ATgAIAFgAWAAJAFoAWgAIAFsAWwAKAF8AXwAIAGcAZwALAGwAbAAMAHcAeAANAH0AfQAOAH4AfgANAIQAhAAPAIoAigAKAK4ArgASALoAuwAUAMEAwQAQAMUAxQAUANIA0gARANsA2wATAN4A3gAQAOkA6QAQAO0A7QAaAPAA8AASAPUA9gATAPsA+wATAPwA/AAUAQYBBgAUAQgBCAAQAQkBCQAVAQ0BDQAUARUBFgAWARoBGgAYASUBJgAZASsBKwAaASwBLAAZATIBMgAbATgBOAATAUMBQwATAU4BTgAQAVgBWAAQAV0BXQAQAWUBZQARAWYBZgAWAW8BbwAXAXABcAAIAXEBcQAGAXMBcwAXAXkBeQAIAY4BjgAIAcwBzAANAhkCGQARAiICIgAcAiUCJQAIAAIATgACAAIADwAOAA4AAQAPAA8AAwAVABUAAQAZABkAAQAkACQADAAmACYAEwAnACcAAwAvAC8AEwAyADIAEwA8ADwAAgA/AD8AAQBCAEIAAQBHAEgAAQBNAE0AAQBOAE4AAwBYAFgAAQBaAFoAAwBbAFsAAQBfAF8AAwBnAGcABABsAGwABQB3AHgABgB9AH0AEgB+AH4ABgCKAIoAAQCuAK4ABwC6ALoAEwC7ALsACQDBAMEACQDFAMUACQDSANIACADTANMACQDbANsAFQDeAN4AEwDpAOkAEADtAO0AFQDwAPAAGQD1APYAFQD7APsAFQD8APwACQEGAQYAFQEIAQgACQEJAQkAFQENAQ0ACQEVARYACwEaARoADQElASYADgErASsAEQEsASwADgEyATIAGgE4ATgABwFDAUMACQFOAU4AEwFYAVgAFQFdAV0AEAFlAWUACAFmAWYACwFrAWsADwFtAW0ADwFvAW8ADAFwAXAAAwFzAXMADAF0AXQAGAF2AXYAAwF3AXcABAGOAY4AAwG+Ab4AFgG/Ab8AFAHFAcUACgHMAcwADwHNAc0ABgHdAd0AFgHjAeMACgIZAhkACAIiAiIAFwIlAiUAAwJrAmsADwAEAAAAAQAIAAEMrgAMAAMAVACiAAEAIgHAAcEBwwHEAccByAHSAdQB2wHeAd8B4AHhAeIB4wHkAeUB5wHoAeoB6wIRAhICKAIpAjACNAI1AjYCPQJBAlQCdgJ3ABMAAA2+AAANxAAADcoAAA3QAAAN1gAADdwAAA3iAAAN6AAADegAAA3uAAAN9AAADfoAAA4AAAEMzgABDMIAAgzIAAEMzgAADgYAAA4MACIAzgAAAAAAzgAAAAAA4AAAAAAAAADUAAAA5gAAAAAA2gAAAAAA5gAAAAAA4AAAAAAA5gAAAAANoAAAAAAA7AAAAAAA8gAAAAABFgAAAAABFgD4AAABEAAAAAAA/gEEAAABFgAAAAABCgAAAAABFgAAAAABEAAAAAABFgAAAAABHAAAAAANyAAAAAABIgAAAAABKAAAAAABLgE0AAAL7AvyAAABOgAAAAAKHgpIAAAKigqQAAABQAAAAAAAAAAAAUYBTAAAAAABTAAAAAAAAQCMAhIAAQBqABIAAQCIAhIAAQBqAhIAAQBfAhIAAQCPAhIAAQEbAhIAAQBiABIAAQEYAhIAAQEmACIAAQBgAhIAAQERAhIAAQBiAhIAAQBKAhIAAQHHAhIAAQC4AhIAAQFcAsYAAQFbAAAAAQEXAhIAAQCCAhIAAQH6AAAAAQGqAhIABAAAAAEACAABC8IADAABC9gAEgABAAEBugABAAQAAQCOAB8ABAAAAAEACAABCo4ADAADCqgAmgACABcAAgAMAAAADwAiAAsAJAAlAB8AJwAtACEALwAvACgAMQBGACkASABMAD8ATgBWAEQAWgBgAE0AYgBlAFQAZwB2AFgAeAB8AGgAfgCrAG0ArgC5AJsAuwDAAKcAxQDRAK0A0wEFALoBCQEOAO0BEAETAPMBFQEkAPcBJgEqAQcBLAFkAQwBaQFqAUUBRwqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAqECooAAAAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAAB6wHsgAAB7gHvgAAB6wHsgAAB7gHvgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgg2CDwIQgAAB8QAAAAAB8QAAAAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAAB8oAAAAAB8oAAAhICE4IVAhIB9AIVAhICE4IVAhICE4IVAhICE4IVAhICE4IVAhICE4IVAhICE4IVAhICE4IVAhICE4IVAAAB9YAAAAAB9YAAAAAB9YAAAAAB9wH6AAAB9wH6AAAB9wH6AAACE4IGAAACE4IGAAACE4IGAAACE4IGAAAB+IH6AAACB4IJAAACB4IJAAACB4IJAAACB4IJAAACB4IJAAACFoIYAAACFoIYAAACFoIYAAACFoIYAAACFoIYAAACFoIYAAACFoIYAAAB+4H9AAACFoIYAAACJwIogAAB/oIAAAAB/oIAAAAB/oIAAAAB/oIAAAACAYIMAAACAYIMAAACAYIMAAACAYIMAAACAYIMAAACAYIMAAACAwIEgAACAwIEgAACAwIEgAACAwIEgAACAwIEgqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAqwCrYKvAAACGYIbAAACGYIbAAACGYIbAAACGYIbAAACGYIbAAACHIIeAAACHIIeAAACHIIeAAACHIIeAAACHIIeAAACHIIeAAACH4IhAAACH4IhAAACH4IhAAACH4IhAAACE4IGAAACB4IJAAACCoIMAAACCoIMAAACCoIMAAACCoIMAiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgiKCJAIlgAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogAACJwIogqECooAAAAACJwIogg2CDwIQgg2CDwIQgAACJwIoghICE4IVAhICE4IVAAACFoIYAqwCrYKvAAACGYIbAAACHIIeAAACH4IhAiKCJAIlgiKCJAIlgAACJwIognCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgnCCcgJzgioCK4ItAAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2glECUoJ2gi6CMAIxgAACMwAAAAACMwAAAAACVAAAAAACVAAAAAACVAAAAAACVAAAAAACVAAAAAACVAAAAAACVAAAAAACVAAAAAACSAAAAAACSAAAAAACSAAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCVYAAAlcCWIAAAlcCWIAAAlcCWIAAAAACWgAAAAACWgAAAAACWgAAAAACWgAAAAACSAI0gAACSAI0gAACSAI0gAACQ4JXAAACQ4JXAAACQ4JXAAACQ4JXAAACTgI2AAACN4I5AAACRQJGgAACRQJGgAACRQJGgAACRQJGgAACRQJGgAACRQJGgAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gAACdQJ2gjqCPAI9gAACPwJJgAACPwJJgAACPwJJgAACPwJJgAACQIJCAAACQIJCAAACQIJCAAACQIJCAAACQIJCAAACQIJCAAAAAAK4gAAAAAK4gAAAAAK4gAAAAAK4gAAAAAK4gluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegluCXQJegAACYAJhgAACYAJhgAACYAJhgAACYAJhgAACYAJhgAACYwAAAAACYwAAAAACYwAAAAACYwAAAAACYwAAAAACYwAAAAACZIJmAAACZIJmAAACZIJmAAACZIJmAAACQ4JXAAACRQJGgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmeCaQJqgmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAmwCbYJvAAACSwJMgAACSwJMgAACSAJJgAACSwJMgAACTgJPgnCCcgJzgAACdQJ2glECUoJ2glECUoJ2gAACVAAAAlcCWIAAAlcCWIAAAlcCWIAAAlcCVYAAAlcCWIAAAAACWgAAAAACdQJ2gluCXQJegAACYAJhgAACYwAAAAACZIJmAmeCaQJqgmwCbYJvAnCCcgJzgAACdQJ2gABAUICxgABAUgAAAABAZoCxgABAaAAAAABAScCxgABAWACxgABApoCxgABAd4CxgABAUgCxgABAKsCxgABAVwAAAABAXsCxgABAXsAAAABAVECxgABAV8AAAABAUsCxgABASECxgABASEAAAABATkAAAABAXICxgABAXEAAAABAUwCxgABAUwAAAABAiMAAAABAT0CxwABAT8AAAABALQAAAABAIgCxgABAIgAAAABAXYCxgABAXYAAAABAcgCxgABAcgAAAABATwCxgABATwAAAABARcCxgABARcAAAABAYUAAAABANsCxgABANsAAAABAXMCxgABAXMAAAABAtoAAAABAo4CEAABAo4AAAABAMoCEgABARYCEgABARYAAgABAScCEgABASoAAAABAPQAAAABAbcCEgABAbcAAAABAvoAAAABAq4CEAABAq4AAAABAMUCEgABAQkCEgABAQwAAAABAHoCxgABASMCEgABASMAAAABAHsCxgABAHsAAAABAIcCxgABAIcAAAABAMgCxgABAMgAAAABAW4AAAABASICEAABAR4CEgABAXYCEgABAKYAAAABAHsCEgABAIoCEgABAfAAAAABARwCEgABARwAAAABAZsCEgABAZsAAAABAQ0CEgABARQCEgABARQAAAABAeIAAAABAQwCEgABAQoAAAABAgcAAAABASECEgABAR4AAAABAh0AAwABARoCEgABARkAAAABASICEgABASIAAAAFAAAAAQAIAAEADAAcAAMAJgCGAAIAAgKCApEAAAKTApUAEAABAAMArACtAWYAEwABAUoAAQFQAAEBVgABAVwAAQFiAAEBaAABAW4AAQF0AAEBdAABAXoAAQGAAAEBhgABAYwAAgBaAAIATgAAAFQAAgBaAAEBkgABAZgAAQCrAAAAAQCzAAAAAQCPAAAAAwAIADQAZgACAA4AFAAAABoAIAAmAAECiwAAAAEBUALGAAEEJQAAAAEDewLGAAEDewAAAAIADgAUABoAIAAmACwAAQG9AAAAAQFZAsYAAQFZAAAAAQQ3AAAAAQONAsYAAQONAAAAAgAAAAAADgAAAAAAFAABAOoAAAABAhoAAAAGABAAAQAKAAAAAQAMABwAAQAiALQAAgACAoICjgAAApQClQANAAEAAQKlAA8AAAA+AAAARAAAAEoAAABQAAAAVgAAAFwAAABiAAAAaAAAAGgAAABuAAAAdAAAAHoAAACAAAAAhgAAAIwAAQCnAhIAAQBcAhIAAQCpAhIAAQBTAhIAAQCJAhIAAQBBAhIAAQC6AhIAAQC9AhIAAQCNAhIAAQDXAhIAAQCvAhIAAQBeAhIAAQC2AhIAAQBkAhIAAQAEAAEAbQISAAAAAQAAAAoCsAmaAAJERkxUAA5sYXRuAHoACgABTUFIIAA6AAD//wAVAAAADAAYACQAMAA8AFIAXgBqAHYAggCOAJoApgCyAL4AygDWAOIA7gD6AAD//wAWAAEADQAZACUAMQA9AEgAUwBfAGsAdwCDAI8AmwCnALMAvwDLANcA4wDvAPsAOgAJQVpFIABqQ1JUIACcS0FaIADOTUFIIAEATU9MIAEyTkxEIAFkUk9NIAGWVEFUIAHIVFJLIAH6AAD//wAVAAIADgAaACYAMgA+AFQAYABsAHgAhACQAJwAqAC0AMAAzADYAOQA8AD8AAD//wAWAAMADwAbACcAMwA/AEkAVQBhAG0AeQCFAJEAnQCpALUAwQDNANkA5QDxAP0AAP//ABYABAAQABwAKAA0AEAASgBWAGIAbgB6AIYAkgCeAKoAtgDCAM4A2gDmAPIA/gAA//8AFgAFABEAHQApADUAQQBLAFcAYwBvAHsAhwCTAJ8AqwC3AMMAzwDbAOcA8wD/AAD//wAWAAYAEgAeACoANgBCAEwAWABkAHAAfACIAJQAoACsALgAxADQANwA6AD0AQAAAP//ABYABwATAB8AKwA3AEMATQBZAGUAcQB9AIkAlQChAK0AuQDFANEA3QDpAPUBAQAA//8AFgAIABQAIAAsADgARABOAFoAZgByAH4AigCWAKIArgC6AMYA0gDeAOoA9gECAAD//wAWAAkAFQAhAC0AOQBFAE8AWwBnAHMAfwCLAJcAowCvALsAxwDTAN8A6wD3AQMAAP//ABYACgAWACIALgA6AEYAUABcAGgAdACAAIwAmACkALAAvADIANQA4ADsAPgBBAAA//8AFgALABcAIwAvADsARwBRAF0AaQB1AIEAjQCZAKUAsQC9AMkA1QDhAO0A+QEFAQZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZhYWx0BiZjY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5jY21wBi5kbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRkbGlnBjRmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmcmFjBjpmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBmd2lkBkBsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsaWdhBkZsb2NsBkxsb2NsBmRsb2NsBmRsb2NsBmRsb2NsBlJsb2NsBl5sb2NsBlhsb2NsBl5sb2NsBmRsb2NsBmRvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpvcmRuBmpwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJwbnVtBnJzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzaW5mBnhzczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAxBn5zczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAyBohzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczAzBpJzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA0BpxzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA1BqZzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA2BrBzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA3BrpzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA4BsRzczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zczA5Bs5zdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdWJzBthzdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt5zdXBzBt50bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuR0bnVtBuQAAAACAAAAAQAAAAEAAgAAAAEAEAAAAAEACwAAAAEAEgAAAAEAEQAAAAEAAwAAAAEABgAAAAEABwAAAAEABQAAAAEABAAAAAIADAANAAAAAQAOAAAAAQAJAAYAAQATAAABAAAGAAEAFAAAAQEABgABABUAAAECAAYAAQAWAAABAwAGAAEAFwAAAQQABgABABgAAAEFAAYAAQAZAAABBgAGAAEAGgAAAQcABgABABsAAAEIAAAAAQAIAAAAAQAKAAAAAQAPAB8AQAHiA5QD3gPyBAYEKARKBIAEgASOBJwFMAVuBZAFqAXABe4GfgbsBvoHEgcqB0IHcgecB7QIkgioCL4I2AABAAAAAQAIAAIAzgBkAWkAnQCeAJ8AoACXAJgAmQCaAJwAjgCPAJAAkwCUAJUAlgA9AIgAiQFqAKQAigCLAIwAjQBlAGsApQCmAKcAqACpAKoAqwFUAVUBVgFXAVkBWgFbAVwBTgFPAVABUgE3AWoBXgETARkBXwFgAWEBYgFjAWQB0wHgAeIB5AHlAc8B1QHcAdEB5wHoAekB6gHrAfIB5gILAgwB/QH+AgkCCgHZAdoB0AHOAdYCbAJtAm4CbwJwAnECcgJzAnQCdQKUApUCkwKjAqQAAQBkAAIABwAUAB0AHgAnACgAKgArAC0AMgA0ADUAOAA5ADoAOwA8AEUASwBOAFEAWwBcAF0AXgBjAGoAcAB7AIEAhwCRAJIAmwDAAMkAygDYAOIA4wDlAOcA8ADxAPIA9AD5APwA/wERARgBHgEpAS8BNQE9AUgBvwHCAcQBxgHHAckBywHMAc0B0gHUAdcB2AHbAewB8AHzAfQB9QH2AfcB+AIXAhgCIQIiAlUCVwJYAlkCWgJbAlwCXQJeAl8CYAKCAoMCjwKWApcAAwAAAAEACAABAV4AKgBaAGAAZgBsAHQAegCAAIYAjACUAJoAoACmAKwAsgC4AL4AxADOANgA4ADoAPAA+AEAAQgBEAEYARwBIAEkASgBLAEwATQBOAE8AUABRgFMAVIBWAACAJsAoQACAJEAogACAJIAowADAWkBOAFDAAIBOQFEAAIBOgFFAAIBOwFGAAIBPAFHAAMBPQFIAVMAAgE+AUkAAgE/AUoAAgFAAUsAAgFBAUwAAgFCAU0AAgDjAVgAAgDrAV0AAgE2AVEABAGlAa8BkAGOAAQBpgGwAZEBjwADAacBsQGSAAMBqAGyAZMAAwGpAbMBlAADAaoBtAGVAAMBqwG1AZYAAwGsAbYBlwADAa0BtwGYAAMBrgG4AZkAAQFwAAEBcQABAXIAAQFzAAEBdAABAXUAAQF2AAEBdwABAXgAAQF5AAIB1wHdAAIB0gHeAAIB2wHfAAIB1AHhAAIB2AHjAAIADAAsACwAAAA2ADcAAQCuALgAAwDeAN4ADgDpAOkADwDzAPMAEAFwAXkAEQGQAZkAGwG+Ab4AJQHAAcEAJgHDAcMAKAHFAcUAKQAGAAAAAgAKABwAAwAAAAEFGAABADAAAQAAABwAAwAAAAEFBgACABQAHgABAAAAHAABAAMCkAKRApIAAgACAoIChgAAAogCjgAFAAEAAAABAAgAAQAGAAQAAQABAo8AAQAAAAEACAABAAYABQABAAEA3gABAAAAAQAIAAIADgAEAGUAawETARkAAQAEAGMAagERARgAAQAAAAEACAACAA4ABACIAIkBNgE3AAEABABFAEsA8wD5AAYAAAABAAgAAQR+AAIACgAcAAEABAABADQAAQAAAAEAAAAdAAEABAABAOAAAQAAAAEAAAAdAAEAAAABAAgAAQEuADUAAQAAAAEACAABASAAPwAEAAAAAQAIAAEAfgAFABAARABQAGYAcgAFAAwAFAAcACQALAGbAAMBzAFyAZwAAwHMAXMBngADAcwBdAGgAAMBzAF1AaEAAwHMAXgAAQAEAZ0AAwHMAXMAAgAGAA4BnwADAcwBdAGiAAMBzAF4AAEABAGjAAMBzAF4AAEABAGkAAMBzAF4AAEABQFxAXIBcwF1AXcABgAAAAIACgAkAAMAAQB8AAEAEgAAAAEAAAAeAAEAAgACAK4AAwABAGIAAQASAAAAAQAAAB4AAQACAE4A/AAEAAAAAQAIAAEAFAABAAgAAQAEAjAAAwD8Ab4AAQABAEgAAQAAAAEACAABAAb/4AACAAEBkAGZAAAAAQAAAAEACAABAAYAIAACAAEBcAF5AAAABAAIAAEACAABAB4AAgAKABQAAQAEAKwAAgAyAAEABACtAAIAMgABAAIAAgBsAAQACAABAAgAAQB8AAQADgAoADIAUgADAAgADgAUAWUAAgDSAWcAAgDeAWgAAgDwAAEABAFmAAIBFQADAAgAEgAaAbsABAHsAewCRAG8AAMB7AJEAb0AAgJEAAQACgAUABwAJAIdAAQB7AHsAewCHAADAewB7AIeAAMB7AJEAhsAAgHsAAEABADSARUB7AJFAAEAAAABAAgAAgA0ABcB1wHTAdIB2wHUAdgBzwHVAdwB0QHyAeYCCwIMAf0B/gIJAgoB2QHaAdABzgHWAAEAFwG+Ab8BwAHBAcMBxQHJAcsBzAHNAewB8AHzAfQB9QH2AfcB+AIXAhgCIQIiAlUAAQAAAAEACAABABQAigABAAAAAQAIAAEABgCVAAIAAQCuALgAAAABAAAAAQAIAAEABgBeAAIAAQDwAPQAAAABAAAAAQAIAAEABgAvAAIAAQBbAF4AAAABAAAAAQAIAAIAGAAJAI4AjwCQAJEAkgCTAJQAlQCWAAIAAgAyADIAAAA0ADsAAQABAAAAAQAIAAIAEgAGAJcAmACZAJoAmwCcAAEABgAnACgAKgArACwALQABAAAAAQAIAAEABgAVAAIAAQJXAmAAAAABAAAAAQAIAAIAbAAzAJ0AngCfAKAAoQCiAKMApAClAKYApwCoAKkAqgCrAVMBVAFVAVYBVwFYAVkBWgFbAVwBXQFeAV8BYAFhAWIBYwFkAd0B3gHfAeAB4QHiAeMB5AHlAecB6AHpAeoB6wKUApUCowKkAAEAMwAHABQAHQAeACwANgA3AFEAcAB7AIEAhwCRAJIAmwCzAMAAyQDKANgA3gDiAOMA5QDnAOkA/wEeASkBLwE1AT0BSAG+AcABwQHCAcMBxAHFAcYBxwHSAdQB1wHYAdsCggKDApYClwABAAAAAQAIAAEABgAeAAEAAgFwAXEAAQAAAAEACAABAAYAAQABAAIA3gDpAAEAAAABAAgAAgAKAAIAPQDrAAEAAgA8AOkAAQAAAAEACAACAA4ABAFpAWoBaQFqAAEABAACAE4ArgD8"}
\ No newline at end of file
diff --git a/apps/www/app/(app)/og/geist-semibold-otf.json b/apps/www/app/(app)/og/geist-semibold-otf.json
new file mode 100644
index 00000000000..677ef4444db
--- /dev/null
+++ b/apps/www/app/(app)/og/geist-semibold-otf.json
@@ -0,0 +1 @@
+{"base64Font":"T1RUTwAMAIAAAwBAQ0ZGIHIR/08AABlsAAC8I0dERUZznnHMAADVkAAAAdZHUE9TY4mY0QAA12gAACqMR1NVQsbFMjAAAQH0AAANHE9TLzI+rl/YAAANbAAAAGBjbWFwVC6iugAAEUQAAAgGaGVhZCxmteIAAADUAAAANmhoZWENAAmoAAANSAAAACRobXR4MmWPlAAAAQwAAAw8bWF4cAMPUAAAAADMAAAABm5hbWVgE49UAAANzAAAA3Zwb3N0/58AMgAAGUwAAAAgAABQAAMPAAAAAQAAAAEzMy4X/pdfDzz1AAMD6AAAAADiJx99AAAAAOInH33/3/8ZCSIDuAAAAAcAAgAAAAAAAAHbAFgA7AAAAs4AFwLOABcCzgAXAs4AFwLOABcCzgAXAs4AFwLOABcCzgAXAs4AFwLOABcEAAAXArcAUALVACsC1QArAtUAKwLVACsC1QArAtUAKwLJAFACyQBQAxkAKwMZACsCZwBQAmcAUAJnAFACZwBQAmcAUAJnAFACZwBQAmcAUAJnAFACZwBQAugAKwJYAFAC1gArAtYAKwLWACsC1gArAtYAKwLWACsC1gArAwEAKwLOAFADBwAeAs4AUAEiAFADiwBQASIAUAEi//MBIv/uASIATgEiAAwBIgAAASIAKgEi/+kCaQA3AmkANwJpADcCrwBQAq8AUAKvAFACSgBQAkoAUAJKAFACSgBQAmwABQOGAFAC7ABQAuwAUALsAFAC7ABQAuwAUALpAFAC/AArAvwAKwL8ACsC/AArAvwAKwL8ACsC/AArAv8ALQL8ACsEUAArApgAUAJ6AFAC9gArArEAUAKxAFACsQBQArEAUAKcADUCnAA1ApwANQKcADUCnAA1ApwANQLVAFACZgAbAmYAGwJmABsCZgAbAmYAGwK7AEECuwBBArsAQQK7AEECuwBBArsAQQK7AEECuwBBArsAQQK7AEECuwBBAs0AFwPEABcDxAAXA8QAFwPEABcDxAAXArIAHAKhABcCoQAXAqEAFwKhABcCoQAXAqEAFwJCABwCQwAcAkIAHAJCABwAwAArAkoAUALsAFACugBQAroAUAK6AFACugBQAcoAKwHKACsBygArAcoAKwHKACsBygArAcoAKwHKACsBygArAs4AKwLOACsCzgArAs4AKwLOACsCzgArAs4AFwLVACsCZwBQAmcAUALWACsBIv/xASIATgL8ACsCuwBBA8QAFwKhABcCQgAcAcoAKwHKACsCzgArBJcAFwSEAEECVgApAlYAKQJWACkCVgApAlYAKQJWACkCVgApAlYAKQJWACkCVgApAlYAKQO6ACkCbwBGAkkAKQJJACkCSQApAkkAKQJJACkCSQApAm8AKQKLACkCpgApAl8AKQJTACkCUwApAlMAKQJTACkCUwApAlMAKQJTACkCUwApAlMAKQJTACkCUwApAbAAMgJvACkCbwApAm8AKQJvACkCbwApAm8AKQJvACkCkQApAlkARgJ1ADICWf/oAQ0ARAENAEYBDQBGAQ3/6AEN/+MBDQBEAQ0AAgEN//YBDQAfAQ3/3wI3AEQBNP/9ATT//QE0//0BNP/9AnQARgJ0/+gCdABGAToARgE6AEYBQABGAToARgFAAAADfABGAlkARgJZAEYCWQBGAlkARgJZAEYCWQBGAl8AKQJfACkCXwApAl8AKQJfACkCXwApAl8AKQJQABoCXwApA+AAKQJvAEYCaABGAm8AKQGcAEYBnABGAZwAPQGcAEECMAApAjAAKQIwACkCMAApAjAAKQIwACkCewBGAa0ALQGtAC0BrQAtAa0ALQGtAC0CVQBGAlUARgJVAEYCVQBGAlUARgJVAEYCVQBGAlUARgJVAEYCVQBGAlUARgJJABYDRwAWA0cAFgNHABYDRwAWA0cAFgJ1AC8COgAWAjoAFgI6ABYCOgAWAjoAFgI6ABYCRAA5AkQAOQJEADkCRAA5AMEAKwE6AEYCWQBGAkoAJAJKACQCSgAkAkoAJAJKACQCSgAkAkoAJAJKACQCSgAkAkoAJAJKACQCbwApAm8AKQJvACkCbwApAm8AKQJvACkCbwApAm8AKQJvACkCbwApAm8AKQEgAFABIABQATcATgEgAEoBlQBGAlYAKQJJACkCUwApAlMAKQJvACkBDQBEAQ3/5wENAEQBDQAfAioARAE0//0CXwApAlUARgNHABYCOgAWAkQAOQJKACQCbwApAwAAMgK9ADIC2AAyAwoALQGuACsBrgArAs4AFwKiAFACtwBQAmUAUAJlAFACMwBQApoAPANHADICZwBQAmcAUAJnAFAEAAAcAqUALwLpAE0C6QBNAq0AUAKtAFADCAA3A4YAUALJAFAC/AArAskAUAKYAFACzwArAmYAGwJUABcCVAAXA1kAKwKxABwCmQAlAx0AUAO4AFAECgBQAskAUAKiAFADhwBQAu4APASIADcESQBQApwANQLyACwC8gArASIAUAEi/+8CaQA3AxoAGwQIAFACugA1Ax0AGwLrADIC8gAcAvwAKwL8ABcEHwAcAtYAUAMIAFACoQAXAqIAFwLgABwC2QAlApkAUAEiAFAC6AArAukATQL8ACsCVAAXAlwAKQJxACsCYgBGAfAARgHwAEYBxwBGAh8AMgLUACUCVAApAlQAKQJUACkDtAAvAioAHgJMAEYCTABGAkwARgJ4AEYCeABGAqcAMgLjAEYCUgBGAl8AKQJbAEYCbwBGAkkAKQJDACkCOgAWAjoAFgK8ACkCdQAvAnkARgK0AEYDRgBGA5gARgJbAEYCWgBGA00ARgKaADID9AAyA58ARgIwACkCVwApAlcAKQENAEQBDf/lATT//QJ1ADIDRwBGAmUARgKAADICswAyAuMALwJfACkCbwAWA8EALwKOAEYCqQBGAkkAFgJJABYCmwAvAr4ARgJZAEYBIABQAlMAKQJMAEYCXwApAjoAFgLIABcC9AArAnAAFwKbAC0CVQAlArAAMAGrACYCggA7An8ALwKZAC8CkAA5AogAOQJQACUChgAlAosAOQM1ACkDNQApAzUAKQM1ACkDNQApAzUAKQM1ACkDNQApAzUAKQM1ACkDSQApA0kAKQNJACkDSQApA0kAKQNJACkDSQApA0kAKQNJACkDSQApArAAMAHoABsCdQAWAnUAcQJ1AEACdQArAnUAKwJ1ADkCdQA7AnUAQAJ1ABMCdQA5AlgADANFACsDLQArA2gAKwMNACsDOgArA2AAKwM3ACsDagArA1kAKwM0ACsBkwAtAQ4AHgFqAC0BfAAtAX8AKwFtAC0BawAtAUsAHgF/AC0BcAAtAZMALQEOAB4BagAtAXwALQF/ACsBbQAtAWsALQFLAB4BfwAtAXAALQDsAAAJYAA+BwgAPgSwAD4A5QApAOUAKQEyAFABMgBQApIAKQDzADAA8wAwAkkAKQJJACkA5QApAUIAKQGtACkBhwApAij//wH8ACIB+gArAOMAKQEwAFABNwBQAn4AKQDnAC4A5wAuAkkAKQJJACkA4wApAaYAKQJWACkDkgApAjQAKQNgACkBQgAsAUIAHAGhACsBoQAcAYcAUAGHABwBfwApAX8AKgFrACoBawApAYQAKQGEACkCVgApAlYAKgGKACoBigApAYIAKQGCACoBcwApAXMAKQDnACoBsAArAbAAKwGvACsA6QArAOcAKgJoACoCaAApAXQAKgF0ACkBdwArAMIAKwIMADIClgBQBLAAPgcIAD4JYAA+BwcAPgNJACkDSQApAlgACAOxACsCqAAlAnkAIwJLADUDOQArAk8AKwJPACsDdgBQAZgAKQEBACkBtAAqARwAUAEcAFACQABQAkMAUAROAFACWABMA3YAKwJYADECSQApAkMAKwKcADUC4QA1Ar0ANQLWACoCuwBQA0YAUAJ8ADUCoQAXAi8AKQIvACkB8AAqAi8AKQJ8AFACLwApAiEAKwIdACkCLwApAi8AKgJAACkCDgApAg4AKQHaACkBnQApA1gAKQGrAAkCkwAXAqkAGwIkABwCmgAWAmQAKQJoAFMDMAApBHwAKQLFACsCeQArAx0AKwJ6ACwCxQArAnoAKwMdACwCeQAsBCwAKwLFACwCiQArApwAKwKcACsCkwArApMAKwKWACsClgArApYAKwKYACsClgArA14AFwHOACsCYQAsAvsAKwJhACwBzgArAmEAKwL7ACsCYQAsA1wAKwHOACwDSQArA0kAKwNJACsCPgArA2IAFwMuAFADYgAXAy4AFwNiABcDLgBQA2IAFwMuABcAAAApAAAAKQAAACkAAAApAAAAKQAAACkAAAA3AAAAKQAAACkAAAApAAAAKQAAACkAAAApAAAAKQAAACkAAAApAAAAKQAAACkAAABsAAAAKQAAACkBmQApANgAKQEQACkBEAApAbIAKQGOACkBjgApAYEAKQEZACkBoAApAXQAKQFJACkBHgApAY4AKQDXACkA5gA3AQEAKQC+ACkDNQApA0kAKQABAAADmP8kAGQJYP/f/hQJIgABAAAAAAAAAAAAAAAAAAADDwAEAmoCWAAFAAgCigJYAAAASwKKAlgAAAFeADIBCQAAAAAAAAAAAAAAAKEAAv9AAeX7AAAAAAAAAABWUkNMAMAAIPsCA5j/JABkA9ABBiAAAJcAAAAAAhYCxgAAACAABAAAABUBAgADAAEECQABABwAAAADAAEECQACAA4AHAADAAEECQADADIAKgADAAEECQAEABwAAAADAAEECQAFAD4AXAADAAEECQAGABwAmgADAAEECQAIAJAAtgADAAEECQAJAGABRgADAAEECQALADABpgADAAEECQAMADABpgADAAEECQAQAAoB1gADAAEECQARABAB4AADAAEECQEAABIB8AADAAEECQEBAAoCAgADAAEECQECAAoCDAADAAEECQEDAAoCFgADAAEECQEEAAoCIAADAAEECQEFAAoCKgADAAEECQEGABQCNAADAAEECQEHABYCSAADAAEECQEIABYCXgBHAGUAaQBzAHQAIABTAGUAbQBpAEIAbwBsAGQAUgBlAGcAdQBsAGEAcgAxAC4AMgAwADAAOwBWAFIAQwBMADsARwBlAGkAcwB0AC0AUwBlAG0AaQBCAG8AbABkAFYAZQByAHMAaQBvAG4AIAAxAC4AMgAwADAAOwBHAGwAeQBwAGgAcwAgADMALgAyACAAKAAzADIANAA5ACkARwBlAGkAcwB0AC0AUwBlAG0AaQBCAG8AbABkAEIAYQBzAGUAbQBlAG4AdAAuAHMAdAB1AGQAaQBvACwAIABWAGUAcgBjAGUAbAAsACAAQQBuAGQAcgDpAHMAIABCAHIAaQBnAGEAbgB0AGkALAAgAEcAdQBpAGQAbwAgAEYAZQByAHIAZQB5AHIAYQAsACAATQBhAHQAZQBvACAAWgBhAHIAYQBnAG8AegBhAEIAYQBzAGUAbQBlAG4AdAAuAHMAdAB1AGQAaQBvACwAIABBAG4AZAByAOkAcwAgAEIAcgBpAGcAYQBuAHQAaQAsACAATQBhAHQAZQBvACAAWgBhAHIAYQBnAG8AegBhAGgAdAB0AHAAcwA6AC8ALwBiAGEAcwBlAG0AZQBuAHQALgBzAHQAdQBkAGkAbwAvAEcAZQBpAHMAdABTAGUAbQBpAEIAbwBsAGQATgBvACAAdABhAGkAbAAgAGEAQQBsAHQAIABhAEEAbAB0ACAAbABBAGwAdAAgAFIAQQBsAHQAIABJAEEAbAB0ACAARwBBAGwAdAAgAGEAcgByAG8AdwBzAFIAbwB1AG4AZABlAGQAIABkAG8AdABBAGwAdAAgAG4AdQBtAGIAZQByAHMAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQH8gAAAPwAgAAGAHwALwA5AH4ArAETASsBNwE+AUgBTQF+AY8BkgHOAekCGwI3AlkCuQK8AsgC3QMEAwgDDAMSAyYDKAM1A5sDqQO7A8AEDAQaBCMELwQzBDUEOQQ6BEMEXwRjBGsEdQSTBJcEmwSjBLMEtwS7BMAEzwTZBOME6QTvDj8eIR6FHp4evR7zHvkgFCAaIB4gIiAmIDAgMyA6IEQgcCB5IIkgqiCsILQguSC9IQchFyEiIVUhXiGZIZ0hqiGxIbUh5SHnIgIiBiIPIhIiGiIeIisiSCJgImUjziQMJGgk6iT/JbMltyW9JcElzCXPJjonfjADMBEwFzAcp4z4//sC//8AAAAgADAAOgCgAK4BFgEuATkBQQFKAVABjwGSAc0B5AIYAjcCWQK5ArwCxgLYAwADBgMKAxIDJgMnAzUDmwOpA7sDwAQABA4EGwQkBDAENAQ2BDoEOwREBGIEagRyBJAElgSaBKIErgS2BLoEwATPBNgE4gToBO4OPx4gHoAenh68HvIe+CATIBggHCAgICYgMCAyIDkgRCBwIHQggCCqIKwgtCC5IL0hByEWISIhUyFbIZAhnSGpIbAhsyHkIeciAiIGIg8iESIaIh4iKyJIImAiZCPOJAskYCTqJP8lsiW2JbwlwCXKJc8mOSd2MAMwCDAUMByni/j/+wH//wAAAcEAAAAAAAAAAAAAAAAAAAAAAAD+lADqAAAAAAAA/q/+dABSAE4AAAAAAAAAAAAA/+H/zv/P/8P+Uf5E/jP+LwAAAAD9XQAA/XkAAP1+AAD9gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD85P0YAAAAAAAAAAD0PgAAAADhxQAAAAAAAOJFAAAAAAAA4hziiuJc4j/h1+HA4cDhpuH14e/h6OHl4eDg6QAA4WoAAODHAADhKOEf4RrhGeDi4OjgteCt4KUAAOCc4JPgh+Bl4EcAAN7IAADdpt0b3PwAAAAAAAAAAAAA3QvcSdqG0kcAAAAA0j8AAAmFBmEAAQD8AAABGAGgAbgCggKsAr4CyALWAtwAAAAAAzQDNgNAAAAAAAAAAAADPgNCA0wDVANYAAAAAAAAAAAAAAAAAAAAAANMA2QAAAN6AAADjgAAA44AAAOMA8IDxAPGA8wD0gPUA9YD2APiA+QAAAAAA+ID5APmA+gAAAPoA+oAAAPyA/QD9gAAA/YD+gP+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPmAAAD5gAAA+gAAAAAAAAAAAAAAAAAAAAAAAAD6AAAAAAAAAAAAAAD4AAAA+AAAAAAAAAD3APeA+AD4gPkAAAAAAAAAAAD4APyAAAD9gAAAAAAAAABAkMCegJLApoCuQKGAnsCXAJdAkkCogI/AlcCPgJMAkACQQKpAqYCqAJFAoUAAgAOAA8AFQAZACQAJQAtADAAOgA9AEAARQBGAEwAVgBYAFkAXQBkAGkAdAB1AHoAewCBAmACTQJhArACWgL9AKwAuAC5AL8AwwDOAM8A1wDaAOUA6QDsAPEA8gD4AQIBBAEFAQkBEAEVASABIQEmAScBLQJeApACXwKuAjoCRAKYAqACmQKhApECiAL7AokBZQJ2Aq8CigMFAo0CrAIyAjMC/gK4AocCRwMGAjEBZgJ3Ah8CHAIgAkYACAADAAYADAAHAAsADQASAB8AGgAcAB0ANgAyADMANAAYAEoAUABNAE4AVABPAqQAUwBuAGoAbABtAHwAVwEPALIArQCwALYAsQC1ALcAvADJAMQAxgDHAOAA3ADdAN4AwgD2APwA+QD6AQAA+wKlAP8BGgEWARgBGQEoAQMBKgAJALMABACuAAoAtAAQALoAEwC9ABQAvgARALsAFgDAABcAwQAgAMoAHgDIACEAywAbAMUAKADSACYA0AAqANQAKQDTAC8A2QAuANgAOQDjADcA4QA4AOIANQDbADEA5AA8AOgAPwDrAEEA7QBDAO8AQgDuAEQA8ABHAPMASQD1AEgA9ABLAPcAUgD+AFEA/QBVAQEAWgEGAFwBCABbAQcAXgEKAGEBDQBgAQwAXwELAGcBEwBmARIAZQERAHMBHwBwARwAawEXAHIBHgBvARsAcQEdAHcBIwB9ASkAfgCCAS4AhAEwAIMBLwAFAK8ALADWACcA0QA+AOoAYgEOAGgBFAMAAwEDDAMCAvwDAwMHAwQC/wLpAuoC7QLxAvIC7wLoAucC8ALrAu4BcAFxAZcBawGPAY4BkQGSAZMBjAGNAZQBdwGBAYgBZwFoAWkBagFuAW8BcgFzAXQBdQF2AYIBgwGFAYQBhgGHAYsBigGJAZABlQGWAbABsQG5AcUBxgHIAccByQHKAc4BzQHMAdMB2AHZAbIBswHaAa0B0gHRAdQB1QHWAc8B0AHXAboBuAHEAcsBmAHbAZkB3AGaAd0BmwHeAWwBrgFtAa8BnAHfAZ0B4AGeAeEBnwHiAaAB4wGhAeQBogHlAaMB5gGlAegBpgHpAacB6gGoAesAKwDVAHkBJQB2ASIAeAEkACIAzAB/ASsAgAEsAnQCdQJwAnICcwJxApICkwJIApQCiwIdAh4CIQLBArsCvQK/AsMCxALCArwCvgLAArUCowKrAqoClwKVAt4C4gLfAuMC4ALkAuEC5QLdAtsC3AJiAmMCaAJpAmYCZwJsAm0CZAJlAmoCawJuAm8AhQExAAAAAwAAAAAAAP+cADIAAAAAAAAAAAAAAAAAAAAAAAAAAAEABAIAAQEBD0dlaXN0LVNlbWlCb2xkAAEBASn6RQD6RgH6RwL6SAT7EQwDavt7HAki+kwFHC4oDxwxIxG+HQAArEESAi4CAAEABwAOABUAHAAiACgAMwA9AEMASQBPAFkAYABnAG4AdQB7AIEAjACTAJ0ApACrAK8AugC8AMYAzQDUANoA5QDwAPcA/gEEAQoBEQEXAR0BJAEnATQBOwFBAUcBTgFUAVwBZwFuAXUBeQF/AYYBjQGTAaABpwGuAbMBuQG/AcoB0wHZAeQB6gHxAfcCAQIIAhcCJgIsAjcCQgJOAlQCXwJvAn0CjAKXAqMCrwK6AsACywLbAucC9gMCAxADHwMtAzwDSwNZA2gDdgOEA5IDoAOvA8ID1gPqA/ID+gQABAcEDgQVBBsEIQQsBDYEPARCBEgEUgRZBGAEZwRuBHQEegSFBIwElgSdBKQEqASzBLwEwwTKBNAE0gTZBOQE7wT2BP0FAwUJBRAFFgUcBSMFJgUzBToFQAVGBU0FUwVbBWYFbQVxBXcFfgWFBYsFmAWfBaYFqwWxBbcFwgXLBdEF3AXiBekF7wX5BgAGDwYeBiQGLwY6BkYGVgZkBm8GewaHBpEGnAaiBq0GuAbEBtQG4gbtBvkHBQcPBxoHIAcrBzYHQgdNB1sHagd4B4cHlgecB6oHuAfEB8sH0QffB+0H+wgJCBgIKwg+CEYITghVCFwIYwhqCHEIeAh/CIYIjQiUCJsIogipCLAItwi+CMUIzAjTCNoI4QjoCO8I9gj9CQQJCwkSCRkJIAknCS4JNQk8CUMJSglRCVgJXwlmCW0JdAl7CYIJiQmQCZcJngmlCawJswm6CcEJyAnPCdYJ3QnkCesJ8gn5CgAKBwoOChUKHAojCioKMQo4Cj8KRgpNClQKWwpiCmkKcAp3Cn4KhQqMCpMKmgqhCqgKrwq2Cr0KxArLCtIK2QrgCucK7gr1CvwLAwsKCxELGAsfCyYLLQs0CzsLQgtJC1ALVwteC2ULbAtzC3oLgQuIC48LlgudC6QLqwuyC7kLwAvHC84L1QvcC+ML6gvxC/cL/gwEDAYMDQwUDBsMIgwpDDAMNww+DEUMTAxTDFoMYQxoDG8Mdgx9DIQMiwySDJkMogyqDLEMtwy9DMUMzAzTDNkM4QzpDPAM9wz+DQUNDA0TDRoNIQ0oDS8NNg09DUQNSw1SDVkNYA1nDW4NdQ18DYMNig2RDZgNuQ3TDeYN7Q34DgIOEA4dDigONw5EDlUOaA5vDnYOfQ6EDosOkg6ZDqAOpw6uDrUOvA7DDsoO0Q7YDugO/w8dDzUPPA9FD0wPUw9ZD18PZg9tD3QPew9/D4YPjQ+UD5sPow+vD7gPww/LD9MP2g/hD+oP8Q/8EAMQChAREBsQIhArEDIQOxBCEEsQVBBbEGIQaRBwEHcQfhCFEIwQkxChEKgQtBDAEM8Q2xDpEPURAxEPER0RKxEyETgRPxFGEU0RVBFbEWIRaRFwEXcRfhGIEY8RlhGfEagRrxG6EcERyBHPEdYR3xHmEe0R9BIDEgoSERIYEiQSMBI9EksSUhJZEmASbBJ+EoUSlhKkEqxBYnJldmV1bmkwMUNEQW1hY3JvbkFvZ29uZWtDYWN1dGVDY2Fyb25DY2lyY3VtZmxleENkb3RhY2NlbnREY2Fyb25EY3JvYXRFY2Fyb25FZG90YWNjZW50RW1hY3JvbkVvZ29uZWt1bmkxRUJDdW5pMDE4RkdicmV2ZUdjYXJvbkdjaXJjdW1mbGV4dW5pMDEyMkdkb3RhY2NlbnR1bmkxRTIwdW5pMDFFNEhiYXJIY2lyY3VtZmxleElKSWRvdGFjY2VudEltYWNyb25Jb2dvbmVrSXRpbGRldW5pMDA0QTAzMDFKY2lyY3VtZmxleHVuaTAxRTh1bmkwMTM2TGFjdXRlTGNhcm9udW5pMDEzQk5hY3V0ZU5jYXJvbnVuaTAxNDVFbmdPaHVuZ2FydW1sYXV0T21hY3JvblJhY3V0ZVJjYXJvbnVuaTAxNTZTYWN1dGVTY2VkaWxsYVNjaXJjdW1mbGV4dW5pMDIxOHVuaTFFOUVUYmFyVGNhcm9udW5pMDE2MnVuaTAyMUFVYnJldmVVaHVuZ2FydW1sYXV0VW1hY3JvblVvZ29uZWtVcmluZ1V0aWxkZVdhY3V0ZVdjaXJjdW1mbGV4V2RpZXJlc2lzV2dyYXZlWWNpcmN1bWZsZXhZZ3JhdmV1bmkxRUY4WmFjdXRlWmRvdGFjY2VudHVuaUE3OEJ1bmkwMTNCLmxvY2xNQUh1bmkwMTQ1LmxvY2xNQUhSLnNzMDRSYWN1dGUuc3MwNFJjYXJvbi5zczA0dW5pMDE1Ni5zczA0SS5zczA1SWFjdXRlLnNzMDVJY2lyY3VtZmxleC5zczA1SWRpZXJlc2lzLnNzMDVJZG90YWNjZW50LnNzMDVJZ3JhdmUuc3MwNUltYWNyb24uc3MwNUlvZ29uZWsuc3MwNUl0aWxkZS5zczA1Ry5zczA2R2JyZXZlLnNzMDZHY2lyY3VtZmxleC5zczA2dW5pMDEyMi5zczA2R2RvdGFjY2VudC5zczA2dW5pMUUyMC5zczA2QWRpZXJlc2lzLnNzMDhDZG90YWNjZW50LnNzMDhFZGllcmVzaXMuc3MwOEVkb3RhY2NlbnQuc3MwOEdkb3RhY2NlbnQuc3MwOElkaWVyZXNpcy5zczA4SWRvdGFjY2VudC5zczA4T2RpZXJlc2lzLnNzMDhVZGllcmVzaXMuc3MwOFdkaWVyZXNpcy5zczA4WWRpZXJlc2lzLnNzMDhaZG90YWNjZW50LnNzMDhJZGllcmVzaXMuc3MwNS5zczA4SWRvdGFjY2VudC5zczA1LnNzMDhHZG90YWNjZW50LnNzMDYuc3MwOEFfSS5kbGlnVV9JLmRsaWdhYnJldmV1bmkwMUNFYW1hY3JvbmFvZ29uZWtjYWN1dGVjY2Fyb25jY2lyY3VtZmxleGNkb3RhY2NlbnRkY2Fyb25kY3JvYXRlY2Fyb25lZG90YWNjZW50ZW1hY3JvbmVvZ29uZWt1bmkxRUJEdW5pMDI1OWdicmV2ZWdjYXJvbmdjaXJjdW1mbGV4dW5pMDEyM2dkb3RhY2NlbnR1bmkxRTIxdW5pMDFFNWhiYXJoY2lyY3VtZmxleGkubG9jbFRSS2ltYWNyb25pb2dvbmVraXRpbGRlaWp1bmkwMjM3dW5pMDA2QTAzMDFqY2lyY3VtZmxleHVuaTAxRTl1bmkwMTM3bGFjdXRlbGNhcm9udW5pMDEzQ25hY3V0ZW5jYXJvbnVuaTAxNDZlbmdvaHVuZ2FydW1sYXV0b21hY3JvbnJhY3V0ZXJjYXJvbnVuaTAxNTdzYWN1dGVzY2VkaWxsYXNjaXJjdW1mbGV4dW5pMDIxOXRiYXJ0Y2Fyb251bmkwMTYzdW5pMDIxQnVicmV2ZXVodW5nYXJ1bWxhdXR1bWFjcm9udW9nb25la3VyaW5ndXRpbGRld2FjdXRld2NpcmN1bWZsZXh3ZGllcmVzaXN3Z3JhdmV5Y2lyY3VtZmxleHlncmF2ZXVuaTFFRjl6YWN1dGV6ZG90YWNjZW50dW5pQTc4Q3VuaTAxM0MubG9jbE1BSHVuaTAxNDYubG9jbE1BSGEuc3MwMWFhY3V0ZS5zczAxYWJyZXZlLnNzMDF1bmkwMUNFLnNzMDFhY2lyY3VtZmxleC5zczAxYWRpZXJlc2lzLnNzMDFhZ3JhdmUuc3MwMWFtYWNyb24uc3MwMWFvZ29uZWsuc3MwMWFyaW5nLnNzMDFhdGlsZGUuc3MwMWEuc3MwMmFhY3V0ZS5zczAyYWJyZXZlLnNzMDJ1bmkwMUNFLnNzMDJhY2lyY3VtZmxleC5zczAyYWRpZXJlc2lzLnNzMDJhZ3JhdmUuc3MwMmFtYWNyb24uc3MwMmFvZ29uZWsuc3MwMmFyaW5nLnNzMDJhdGlsZGUuc3MwMmwuc3MwM2xhY3V0ZS5zczAzbGNhcm9uLnNzMDN1bmkwMTNDLnNzMDNsc2xhc2guc3MwM2FkaWVyZXNpcy5zczA4Y2RvdGFjY2VudC5zczA4ZWRpZXJlc2lzLnNzMDhlZG90YWNjZW50LnNzMDhnZG90YWNjZW50LnNzMDhpLnNzMDhpZGllcmVzaXMuc3MwOGkubG9jbFRSSy5zczA4aW9nb25lay5zczA4aWouc3MwOGouc3MwOG9kaWVyZXNpcy5zczA4dWRpZXJlc2lzLnNzMDh3ZGllcmVzaXMuc3MwOHlkaWVyZXNpcy5zczA4emRvdGFjY2VudC5zczA4YWRpZXJlc2lzLnNzMDEuc3MwOGFkaWVyZXNpcy5zczAyLnNzMDhmX2YubGlnYXRfdC5saWdhdW5pMDQxMHVuaTA0MTF1bmkwNDEydW5pMDQxM3VuaTA0MDN1bmkwNDkwdW5pMDQ5MnVuaTA0MTR1bmkwNDE1dW5pMDQwMHVuaTA0MDF1bmkwNDE2dW5pMDQxN3VuaTA0MTh1bmkwNDE5dW5pMDQxQXVuaTA0MEN1bmkwNDFCdW5pMDQxQ3VuaTA0MUR1bmkwNDFFdW5pMDQxRnVuaTA0MjB1bmkwNDIxdW5pMDQyMnVuaTA0MjN1bmkwNDBFdW5pMDQyNHVuaTA0MjV1bmkwNDI3dW5pMDQyNnVuaTA0Mjh1bmkwNDI5dW5pMDQwRnVuaTA0MkN1bmkwNDJCdW5pMDQyQXVuaTA0MDl1bmkwNDBBdW5pMDQwNXVuaTA0MDR1bmkwNDJEdW5pMDQwNnVuaTA0MDd1bmkwNDA4dW5pMDQwQnVuaTA0MkV1bmkwNDJGdW5pMDQwMnVuaTA0NjJ1bmkwNDZBdW5pMDQ3MnVuaTA0NzR1bmkwNDk2dW5pMDQ5QXVuaTA0QTJ1bmkwNEFFdW5pMDRCMHVuaTA0QjJ1bmkwNEI2dW5pMDRCQXVuaTA0QzB1bmkwNEQ4dW5pMDRFMnVuaTA0RTh1bmkwNEVFdW5pMDQzMHVuaTA0MzF1bmkwNDMydW5pMDQzM3VuaTA0NTN1bmkwNDkxdW5pMDQ5M3VuaTA0MzR1bmkwNDM1dW5pMDQ1MHVuaTA0NTF1bmkwNDM2dW5pMDQzN3VuaTA0Mzh1bmkwNDM5dW5pMDQ1RHVuaTA0M0F1bmkwNDVDdW5pMDQzQnVuaTA0M0N1bmkwNDNEdW5pMDQzRXVuaTA0M0Z1bmkwNDQwdW5pMDQ0MXVuaTA0NDJ1bmkwNDQzdW5pMDQ1RXVuaTA0NDR1bmkwNDQ1dW5pMDQ0N3VuaTA0NDZ1bmkwNDQ4dW5pMDQ0OXVuaTA0NUZ1bmkwNDRDdW5pMDQ0QnVuaTA0NEF1bmkwNDU5dW5pMDQ1QXVuaTA0NTV1bmkwNDU0dW5pMDQ0RHVuaTA0NTZ1bmkwNDU3dW5pMDQ1OHVuaTA0NUJ1bmkwNDRFdW5pMDQ0RnVuaTA0NTJ1bmkwNDYzdW5pMDQ2QnVuaTA0NzN1bmkwNDc1dW5pMDQ5N3VuaTA0OUJ1bmkwNEEzdW5pMDRBRnVuaTA0QjF1bmkwNEIzdW5pMDRCN3VuaTA0QkJ1bmkwNENGdW5pMDREOXVuaTA0RTN1bmkwNEU5dW5pMDRFRkxhbWJkYXVuaTAzQTlsYW1iZGFwaXVuaTIxMDd1bmkyNEZGdW5pMjc3NnVuaTI3Nzd1bmkyNzc4dW5pMjc3OXVuaTI3N0F1bmkyNzdCdW5pMjc3Q3VuaTI3N0R1bmkyNzdFdW5pMjRFQXVuaTI0NjB1bmkyNDYxdW5pMjQ2MnVuaTI0NjN1bmkyNDY0dW5pMjQ2NXVuaTI0NjZ1bmkyNDY3dW5pMjQ2OHplcm8uc3MwOW9uZS5zczA5emVyby50Zm9uZS50ZnR3by50ZnRocmVlLnRmZm91ci50ZmZpdmUudGZzaXgudGZzZXZlbi50ZmVpZ2h0LnRmbmluZS50ZnVuaTIxNTN1bmkyMTU0dW5pMjE1NXVuaTIwODB1bmkyMDgxdW5pMjA4MnVuaTIwODN1bmkyMDg0dW5pMjA4NXVuaTIwODZ1bmkyMDg3dW5pMjA4OHVuaTIwODl1bmkyMDcwdW5pMDBCOXVuaTAwQjJ1bmkwMEIzdW5pMjA3NHVuaTIwNzV1bmkyMDc2dW5pMjA3N3VuaTIwNzh1bmkyMDc5dW5pMDBBMGh5cGhlbl9oeXBoZW5faHlwaGVuX2dyZWF0ZXIubGlnYWh5cGhlbl9oeXBoZW5fZ3JlYXRlci5saWdhaHlwaGVuX2dyZWF0ZXIubGlnYXVuaTMwMDNwZXJpb2Quc3MwOGNvbG9uLnNzMDhzZW1pY29sb24uc3MwOGVsbGlwc2lzLnNzMDhleGNsYW0uc3MwOGV4Y2xhbWRvd24uc3MwOHF1ZXN0aW9uLnNzMDhxdWVzdGlvbmRvd24uc3MwOHBlcmlvZGNlbnRlcmVkLnNzMDh1bmkzMDFDdW5pMzAwOHVuaTMwMDl1bmkzMDEwdW5pMzAxMXVuaTMwMEN1bmkzMDBEdW5pMzAwQXVuaTMwMEJ1bmkzMDE0dW5pMzAxNXVuaTMwMEV1bmkzMDBGdW5pMzAxNnVuaTMwMTd1bmkwRTNGbGVzc19oeXBoZW4ubGlnYWxlc3NfaHlwaGVuX2h5cGhlbi5saWdhbGVzc19oeXBoZW5faHlwaGVuX2h5cGhlbi5saWdhbGVzc19oeXBoZW5fZ3JlYXRlci5saWdhdW5pMjYzOXNtaWxlZmFjZXVuaUY4RkZ1bmkyMTE3bWludXRlc2Vjb25kdW5pMjExNnVuaTI0MEN1bmkyM0NFdW5pMjQwQkV1cm91bmkyMEI0dW5pMjBCRHVuaTIwQjl1bmkyMEFBbm90ZXF1YWxncmVhdGVyZXF1YWxsZXNzZXF1YWxhcHByb3hlcXVhbGluZmluaXR5aW50ZWdyYWx1bmkyMjA2cHJvZHVjdHN1bW1hdGlvbnJhZGljYWxwYXJ0aWFsZGlmZnVuaTAwQjVhcnJvd3VwdW5pMjE5N2Fycm93cmlnaHR1bmkyMTk4YXJyb3dkb3dudW5pMjE5OWFycm93bGVmdHVuaTIxOTZhcnJvd2JvdGhhcnJvd3VwZG51bmkyMTlEdW5pMjFFNHVuaTIxRTV1bmkyMUE5dW5pMjFBQXVuaTIxQjB1bmkyMUIxdW5pMjFCM3VuaTIxQjRjYXJyaWFnZXJldHVybnVuaTIxRTdhcnJvd3VwLnNzMDd1bmkyMTk3LnNzMDdhcnJvd3JpZ2h0LnNzMDd1bmkyMTk4LnNzMDdhcnJvd2Rvd24uc3MwN3VuaTIxOTkuc3MwN2Fycm93bGVmdC5zczA3dW5pMjE5Ni5zczA3YXJyb3dib3RoLnNzMDdhcnJvd3VwZG4uc3MwN3VuaTI1Q0ZjaXJjbGV1bmkyNUNDbG96ZW5nZXRyaWFndXB1bmkyNUI2dHJpYWdkbnVuaTI1QzB1bmkyNUIzdW5pMjVCN3VuaTI1QkR1bmkyNUMxdW5pMDMwNi5jeXVuaTAzMDh1bmkwMzA3Z3JhdmVjb21iYWN1dGVjb21idW5pMDMwQnVuaTAzMEMuYWx0dW5pMDMwMnVuaTAzMEN1bmkwMzA2dW5pMDMwQXRpbGRlY29tYnVuaTAzMDR1bmkwMzEydW5pMDMyNnVuaTAzMjYubG9jbE1BSHVuaTAzMjd1bmkwMzI4dW5pMDMzNXVuaTAzMDguc3MwOHVuaTAzMDcuc3MwOGRpZXJlc2lzLnNzMDhkb3RhY2NlbnQuc3MwOHVuaTAyQkN1bmkwMkI5dW5pMDJDOGJsYWNrQ2lyY2xlZGJsYWNrQ2lyY2xlZFN0cm9rZTAwMS4yMDBjb3B5cmlnaHQgbWlzc2luZ0dlaXN0IFNlbWlCb2xkU2VtaUJvbGQA6QIAAQAMABEAFgAcADEAPABEAEgATgB1AH4AgQCHAIwAkQCUAJkAngC0ALgAwwEMARMBGwEgASgBMAFcAWABdQGCAYoBkQGYAaIBqwH2AhUCLwJFAk8CVAJbAmECkAKpAsAC0QLcAuYC7QL0AwADBgMlAysDLwNBA04DWgNoA3MDfQOGA48DlgOdA6QDrAQPBGUEaASCBL0E5QTtBQgFJgUpBTYFOQVEBU4FVgVdBWQFfgWGBcIFzgX2Bf0GCAZOBlkGewaaBqgGxQbOBucG7AcWBysHOgdKB2YHeAd/B4MHjAeTB5wHpweyB70HwwfMB9UH4QfpB/QH/whCCIEI2AlHCakKDQprCsYLIAt3C6wLtQvBC+8MNwx/DMgM8w0tDWANeg24DdAOEQ5NDokOlQ7LDuwPHg8jD0UPaw+AD6kPsw/JD/EQCxAzEFoQfxCTELcQwBDjEPYRGBE6EUIRYRGBEaARvhHZEdwR9BINEiYSPhJDElMSahKAEpYSmxKjErASuxLMEt8S8BMDExUTJRM2E0cTWBNpE3oThxOME5wTrBO8E8sT2hPpE/gUBxQVFCMUMRQ/FE0UWxRoFHUUghSPFJwUqRS0FMAUzBTYFOQU7BT3FQIV7wbl9yEF+xQGDhK09xkLAdv3FgugdvladwsV9xH3BvsRBvde+wYV9xD3BvsQBg4V7wZO9yEF+xUGDhX3tez7tQYOe/cFC/cmUsQSCxWxqKaysW6lZWVucWVkqHCxH/dJFrGoprKxbqVlZm1xZWSpcLAfDktjWTeJH88GC8kdDvcauvcaCxLR9xQLEtv3FgsVgh1/9w8dC8/3W84Lohb3HAbG9zwF960Gxvs8Bfcc9wAdC4uTHQv3d38V48+xxKUfC/g4dRX3Zvc99z33Z/dl+z33Pftm+2X7Pvs9+2X7Z/c++z33ZR/dBPs6+xf3GPc69zn3F/cY9zr3OvcY+xj7Ofs6+xj7GPs6Hwv7Ku743XcLf+hPdvhT7gug9w0dC3/zL+f4TncL9yf3IPsnBgv38XsV90P3AvP3Oh/4XfsW/F0HJlNTKClTw/Ae+F37FvxdB/s69wIj90IeC6axHQuymqKnshrKVbhCQlReTGSib7J8Hgv7NuzXdq/v99TjM+8L1lPW9NZT1gvZxa7FqR8L4c2zxqcfC8fwBez7DCCuBw4StPcZ9273FAv4D3sV9zz3GfL3gB+2+8Qk90AHK4NQRSMb+x1N9wb3I/ckyPcH9x7iwlc1oB/3G5IF9ypqIun7Mhv7ZfsT+zb7Zvtl9xT7NfdkHwtXeW5lWRpDyVzgHs8EYG6isLGop7a1qG9lZm50YR8L2xb4evcF+/j3T/fk9wT75PdN9/D3BfxyBgtxS6UGs6pvaGpucmZlbaCniR9AiAUL9wn4qvsU+8cGC3fbKB0L97n3DgHJC05raE8eC/fDfxX3D+bL86gf+xeTBVx8ZHBSGz9auumGH5kd+zEl+wP7PPs98fsC9zQejx0L+xX8pvsY+KYF+w0G+xb8pvsW+KYF+x4GCzgHxXFRsD4b+xgu+wD7Lfsv6SP3GR8LBfsmBvs7+8L7PPfCBfsmBguQIAXf+AL7wiYGC4v3SPszdvladwtETm1Bbx8L9xT7CvcKCwG09xn3i/cZA0wdCwZ1b3wdCzCj2k73IBuJ97QVP1vJ7e25ydnZvE4oih8nWk8+HgsiHQNGHQsVWR0LtKqptLRsp2Jja29iYqttsx8L98D7NhX3LO/T9x0fCxXayL/NvWe4WpcfCwX7Hwb7yvvL98v7ywULe/cF9zry94v3BQsB0fcUA9EW9xQL92j3E/ch93kL9wb3Bfv7+wUL+3jO2rxaC1yctWnNGw73BhK09xkLe/cE+Jr3BAsBz/cY96/3GAP38XsV9zT13PcW9UvR+1O0H/sSqGmhxRrCubHX5L5WPpQe9xeRBfcdfC3u+z0b+zQrNfsQ+wjNWfdEYx/3JWmnalQaTlpsOChVvud+HvsYgwX7KJf2KPdFGwshHfeP9xT//4WAAP8AeoAAE573m38VE51AHRNdjjoFE273Dfiq+xQGE54/B8JtU6w+G/snQfsQ+y/7Mdb7DvcnH7HzFTRj3ejrs9ri5a0/KCxqOzAfCxWzHQG09xkD98R/Ffce69z3FJof+xiRBYYdlh0L28jF3dlUx0RxdoN6eh+W3wX3L8/7bgZr+3gF0garnqGQohuvp2thYG9uZ2pvnqmGH0CIBUiRx1zUGw7WA/gufxX7YPs59zn3Yfdf9zn3Ofdg92D3Ofs5+1/7Yfs5+zn7YB8L0B1zdXNqHwsV1gb3ErX3BtnrHr/7qEf3VQdFLWH7BfsFGg7RFvcYBvdQ9+QF++T3FPiq+xIH+1b77QX37fsUBwtYHQ75qxXvBuX3IQX7FAYOiR0OoHb3ofcF92v3BQv7VPuSBU33SAcLtvcb9xr3GQufdvlddwEL9xf3gPcWC/e2fxX3HOjE8uRUufs8pR+0HSKT3kD3MhsLOR3g9yGuHQv4EnsVXx33efsT9yP7aPtn+xT7I/t5+3n3FPsh92cf9wUE+xQ/6vc29zbX7PcU9xTXKvs2+zY/LPsUHwsBzPcW98n3FgM7HQugdviqd+b3BhLP9xn7F/cUE+jRFvcU+Kr7FAYT8InSFfcZ9wb7GQYOIh333MwdC5cds7SXmZwe3x0L+Ah7FfdI9fH3O6cf+xySBSV7U04iG/sKPuz3NPcy1vD3De3EUi6cH/cckgX3NW0q6vtJG/tc+xf7JPt4+3z3HPse91UfC/fEfxXyHewd8wQLAaf4nwOnFvif9wX8BQb3+fh5BfcE/IT7BfflB/v0/HkFC1Cav2bGG5T3XxVkdai1tqKpsrCmbWCKH2GKb25oGw4V1tO0z2L3jEwGch2NHeTEwOOPHz4GXYZxeGEbYXCeuYYfPQYzj8VW5RsOs7SXmZwf3x0L97X39wX7Lwb7rvvuBffu+xb9WvcW9+8HC7YV3R0LQIFeZ00bOFzL9wP3ArrM3sm4Z0eVH/cYkgX3E3sq1fscG/szI/sD+zwL90oEa3afqaignauqoHlubXZ3bB8LIx3i9xr7E9c/9xw21xILFdIGzvdCBfcQ+yf7IMgHC/cW+JsG98L8mwX3MPla+xb8qgb7xviqBfssBgv4B/cF+wz4eGAd9wf8ePsNBgstHfdcUx0L9xAdDvQd9xH7FPsRC/cK993oHQvW9xHZRNIT+Av7KveANeH5BHcSC6B296D3Bvdr9wUL9wX3T/cE9033BQv3DR0SogvTQ9r3EdUT7Av7PfP7AvczHwsFcGt8bWUaVbJqzgv7MyP7Avs9C/gQqAb3SCb1+y0L+xb7vPu/97z7FgshHfeN9xX7FPcU+xH3ERPugFodE/aA+HsHE/ZA+xEGE+5ATh0T7wDQyK2/pB9HB0BfaTxGbqK0fh77GIIFE+6AVh0L9xX7FPcU+xH3ERPuQFodE/ZA+HsHE/Yg+xEGE+4gTh0T7oDQyK2/pB9HB0BfaTxGbqK0fh77GIIFE+5AVh0L9xT7BPcEE7iA93F/FUEdE3SAjzQFE3kA9wL32Ab3Ij3b+yz7GTVL+wR2HvcXhQXBl62oyhvOrmRAH/tFaAX7CXRSWi8aE7iALtVW9wMeE7kAPB0TtgALFfdm9z33Pfdn92X7Pfc9+2b7Zfs++z37Zftn9z77PfdlH90E+zr7F/cY9zr3OfcX9xj3Ovc69xj7GPs5+zr7GPsY+zofK/fxFaijo6ioc6FubnN1bm6jc6gf91oWqKOjqKhzoW5udHVubqJzqB8OErb3G/gK9xL//6mAAP8AVoAAE734BHsV7uG81a8fE31QHRO+90QGLIVLQiIb+x5O9wH3KPckyfcH9xvxu1Q4mx/3G5IF9yVtL+77SBv7ZPsP+zP7aR8Tvftt9w37LfdgHgt7FfdA9wbT9x7oVcwzqB8T7M6ltL7UGvcGLtz7M/szLzr7BkKzWM5xHhPyM29VSS4a+x73BkP3QB73BgQvULHW0r+67u+/XERAT2UvHxPs99wEQGCqysS0r9jYtWdSTF9sQB8O9xT//4WAAP8AeoAAE5xA95t/FUAdE1pAjjoFE2qA9w34qvsUBhOcgD8Hwm1TrD4b+ydB+xD7Lx8TnED7Mdb7DvcnHhOcgLHzFTRj3ejrs9ri5a0/KCxqOzAfE5sAC3/w9xTh9yHxAbT3GfeL9xkD97j4thX7DzBLI24f9xeDBbqasqbEG9e8XC2QH/wQbgb7SPAh9y33MfH3A/c89z0l9wL7NB77CvvdFfeLBjiBXF5GG0dctOKFHw579wb3pfH3EPcFAfhk9xoD99p7Ffc39wHu9yv3HS7x+yVLVHZnaB+h90kF99b3BfxHBlr8LgX3GAa2nrunxxviv1U4NVdZNT9arM6AH/sZhAX7EJbnOPc6Gw57Ffcw9wHn9zL3Iivp+yMfE/Q+Umpgax/3KZjF0ugbzqpuWpsf9w+VBfcCcD/R+xkbE+z7ZDX7SfuB+2Ho+wv3RB/3AQQ4VsXe3cfB3NfAVTkzVFY8Hw6gdvhO86vbO/cYEvcB9xT3YfcUE9y9+NYVxvzWyh33CPcFBxPs2/sFBxPcv/sUBxPsV1AHDvcZE/lMHRP2CwG29xv3GPcZA30dCxXnxub3IO9b3zE7T1Q1N8FU0h8T9K+nmqSdH0WDbmNhG3B5mKSDH0GEBRP4gB0W+KH3BfwFBo+3xMf3CsoI9x/Vvr73ARr3Ei/h+zEeE9j7Nikx+yh9H/cagwXhlru63BvXsmFQT2hvKlgfE+j7VyVLKPtAGg4V6cnb9xP3FE3cLSxNOvsU+xPJO+ofzwR6fJCVfx/3DPdUBZB4jnRxGjNsWFYetvedFfsL+1MFhZ2JoaQa5qm9wZuahoGXHg73GgPbFvcW96D3PgbVqHJSjx+a+04F9xgGefdhhdRms0iVGdChwMngGvcWKd77LR77vQb3tfvcFfsz92v3LQbfumVFRlxlPR8L+yD2rO7493cS0fcVQvcM+wz3LBPw91sWE+Ta7gYT8NsdMPt7FRPo2QZCHWEd5xL3adYTsPc6+3gVz8GvzR8T0L1tsUmQHhOwqLYFPAZpUq9oBcSXenNzeH1sa3qYpn8fTnEFYh2MHRO894p/FRO62sKtzqYfE3qNMgUTfEgdE7wzY1xGTW6z5R73zPsU++wH+xPOQPcBHgv7IPbBdvladyId9wP3DOzMHfdz/kEV2QZCHTYd4PchAaH4owP3APsqFeYG2bOnzaIf92X44gX7GQb7E/wd+xv4HQX7GAb3UvyVBbAGfWYFcoF9gWgbRwYL6BVYb6K1sKKjxJYf9x6nBW0HOlVVNh4L9xoD2xb3Fveh9x0GlAb3J/uhBfchBvs297cF5am71ega9yAq3fs8HvunBveh+9wV+x/3a/cfBuG+ZURFWGc1Hwv3pM/7TAaOoaWjrqKnnhjEsay1vhrOVbpEQlFZPoIe14cFtZOgoK4bqKB5b3B8dmp2H2t2BShKe0VNGg46mG+cthqyqqbIxq9pVZQe9xaRBfJ8Qdj7JBv7KD1GKDC+X/c4bx/uep17ZxphZ3lPQWirw4Ie+xeFBQszHc33IVcd91rNJR0jHQGn+Q4Dpxb3Kwb3OfeX9zv7lwX3Kwb7g/f694D39AX7Kwb7NvuT+zn3kwX7Kwb3gPv2BQ6gdviqd+T3FRLP9xn7F/cUE+jRFvcU+Kr7FAYT8MvQKx3yFvcDBtK3qMyhH/dy+PwF+xsG+x78IPsh+CAF+xwG91X8kAW4BnZTBXODeX9sGzsGCyMdwR0OoHb3wfcF97x3Ih33v/cWA9sW9xb3wfe/+8H3Fvlamh0GDl4d9ycG3+T3MPuABfckBvts98z3ZfdyBfsyBvtv+4UF+DX7FAcLi/cF+Hj3Bcz3IQH3OPcWA7YWix0LA9sW9xb3bgbb5vdw+8kF9ykG+6/4Ivee98wF+y4G+6r72AX32PsWBwvRFsod94z7FAcL90P4aPtD+GcF+xIG90L8Z/tC/GgFCxL19xn7FvcUE+iI+yoV1wb3C7i39wIf+Kb7FPyiB112fmUeVgYT8AsB96T3FgP3pBb3FvesBveM+EJPHfeN/EIFCwHR9xYD+D4W9zMG+4T3n/d4958F+zEG+2z7lQX3lfsW/Kr3FveWBwsV9yrt8/c5H/hd+xb8XQckYFZAQWG/84ke+xeEBfssjOj7AvcvGwsW9xb3IuD3BTb4W/srBvvj/GIFIff4B/tq9wUV92r3sgX7sgcO97AW9wbujh03KN/7rgchvFz1HgsjW/sA+w8nuzfmH43PFWVyqbaMH7WMpqiuG7OhbmFgc21kHw6JHfuP+zKJHQ4B93v3GQOnFvif9wX8BQb3+fh5BfcE/IT7BfflB/v0/HkFCxWxqKaxsG6mZWZucGZlqHCwHwv3FPfJBuK3udHJqGA0HvvM9xT36wf3C0zf+wpIUnBSbx4L+xb7dQY5S1UqN2C94B73dvsW+44H+xzfNfcn3tGvwq0eC/cWA9sWih0LoHb46fcFAfeG9xYD94YW9xb46fds9wX8xfsF92sGDgH3dvcZA8QW+Gfu+9QG98z33QX1/FQo970H+8j73QUL+S0W+Vr7LAf7xvyqBfiq+xb9WvcwB/fC+JsF/JsHC7eXpbCyGsZVuEJJU2BSgx7WhwWfjqCbqhupoXZwCwP3bPsGFfcSBvtC+Gj3QvhnBfsSBvtD/GcFC9QdDvladwG29QPF+AUV2QaY91wF9yEh+yEHDhX3JAb3JvdBBcEH+yb3QQX7JAb3PvtcBQv3TPebBfsiBvsL+0r7D/dKBfsfBvdO+5oLfxX3GQb4mvl2BfsZBvwp+/0V4tDW7R8L2u7bHQugdviqd+D3IV4d+Kr7FAYL94YG93P3EPcT93f3ePsT9xT7dh/7gAsVPlnP9vcBvM3Z27dO+wb7BV5NPB8LZAZxfZenH/jP+xQHivzcBTK9ZtoeCyMd8B0O7h33jvuOBQv49ewBtPe1A7T49SYd9wgdnZuToKGnHwsiHQPbFvcW+On4DfcF/I8GCwGi+ccDovlaFfgt/Vr4LvlaBQuL9wX3ePcF95R3Ih33qPcaC/sU/Ef7M/hH+w/8R/s0+Ef7FAvRFvcU98gG3bOt3R699wJaBgsV9wz3AGgGwOYFPQZPJgUO9yju+yj3SPsM+0j7KCj3KAuL6fcq6/dWdwHR9xT3e/cYCxX7iwbelbq40BvPumI0kR8L94wG9zLgxfcC9wU2xvsyHwvz9yLcAbTd9yj16PT3I9wDCycd+Jj3BbcoHbb3GwuYHZYdCxVEBkj7QgX7EPcn9yBOBwv3Hwb3y/fL+8r3ywX7HwYL9Qb3KNI8+zj7NkQ8+ygfCwHb9xQD2xb3FPla+xQGCwPbFvhn9wX75fjp+xYGC/cy8/cC9z33PSP3AvsyCxLR/wB5gAD//4aAAPcUC0AGXnabvR/3ovch7vshC/sqFfcWBhN694AHE3wLA9uKFfla9/n9Wvf4BQsG+5T5WgX7MwZ0/EMVC/dwzPcuu86+w8wBtssLz/cmy8bPAfeO1gP3TAv3i/cFyuwStvcbw/e1C/cw+y73GveT9xoT6Av3FfsV9xn3ovcXE+wLEq/3Gfdu9xT7BPcEC9u5vuyVH6n3swX3Rwtw0QWDgHuGeht8f5ML9yD3efcgAdv3JwPbCwbbs3NXWWNzOx8O+D33IPcydwG29ycL9wP3EfcFAfdl9xYLdvc89wP3wPcXi3cLe/cG93vs90/3BRIL8fch4fcU8AszzxXj9woF+woHC/sU+2/7Wfdv+xQLAQABAAAiAACrAAGHAQCsAgGJAQCvAQCKAAAjAQGLAQCxAAGNAQAlAAGPAQCaAAAmAACyAAGRAACzAQGSAAC1AAGTAwAnAQGXBgApAAGeAQAqAAGgAAC2AgGhAAC5AAGiAgArAAGlAQAsAAGnAQAtAAGpAgCMAAAuAQGsAgC6AAGvAAAwAAC7AwGwAQCNAAC/AACOAAAxAACdAAAyAQGyAgA0AAG1AADAAAG2AwA1AAG6AwA2AADBAAG+AADCAgG/BAA3AQHEAwA5AQDFAAHIAADGAAHJAQA7AAHLAADHAAHMJwBCAADIAAH0AQDJAgH2AQDMAQCQAABDAQH4AQDOAAH6AQBFAAH8AQCnAABGAADPAAH+AADQAQH/AADSAAIAAwBHAQIEBgBJAAILAQBKAACRAADTAgINAADWAAIOAwBLAAISAgBMAAIVAQBNAAIXAgCSAABOAQIaAgDXAAIdAABQAADYAwIeAQCTAADcAACUAABRAACiAABSAQIgAgBUAAIjAADdAAIkAgCVAABVAAInAwBWAADeAAIrAADfAgIsBABXAQIxAwBZAQDiAAI1AADjAAI2AQBbAAI4AADkAAI5MQBtAQJrAACLAACPAAJsiQARCQL2HwBjAACbAAMWAQCeAACjAAMYAAFAAwMZFwAPAAANAAAbAQB5AAACAABgAAAgAAB7AAByAAB0AAALAAMxAAAEAAAQAAA9AAMyCAAOAABvAACJAABAAAM7AAAJAQBcAABeAAA8AAA+AAM8DQB1AQBpAAB3AABBAAAIAABqAAB4AABrAQADAABoAABlAANKBwAhAAAHAABzAABmAACqAAClAANSAACZAAChAANTAQBdAACgAABwAQNVAwBhAABnAAAFAANZBABiAABkAAAMAACmAACoAACfAAAeAANeAAAfAAAdAANfAQCcAANhAABfAACXAAA/AANiBwAGAAB6AANqPwCDAACCAAB8AQCGAAB+AACIAACBAACEAAB/AQCFAACHAAOqBgMPAgABAPwA/wEOASYBPAFUAXUBjgGmAcMB/QIXAk0CoAKjAqkCtALCAzMDSgNXA4EDoAOkA6gDrgO7A8gD4wPmA/oD/QQXBEoEfQSABKQE+AUEBRIFRQV2BZsFxgY8Bj8GlAbIBswG6QbxBwwHIQdEB0wHXgeJB7wHvwfTB/AIFwgmCDoIRAhUCHcIegitCLEItwjCCNAI0wkICU4JWgltCYgJngmxCcUJ2gpbCpELFAsXC10LzAvSC98L7QwIDA4MGQwnDHMMlAy3DRcNGg1DDVsNlQ3FDcsN0Q3dDf4OGg4iDisORg6tDscO4A8NDzYPTg9vD4gPoA+jD6YPrg/dD/EP+RBgEGYQdBCCEJAQlBCXEJoQoBCtELsQ1hD0EP4RHBFXEYQRjhGnEeESGRIoElgSeRKgErQSzBLlEvITIRM/E2cTehOUE6kTxBPdE+8T/RQTFC8UQxR3FJkUqxTEFNwU9hUcFTwVVRWyFhoWQRaAFyMXiheQF50XqxfsGAMYEBhBGIEY3BlNGVMZXBlqGYsZnRmrGbQZzRokGoQahxqWGrwayBrWGxIbJxs4G04buBu7G74b3xvjG+8b9xwUHC8cMxw7HEwcYByVHMUcyRzZHPEdFB0dHS0dbB2THaodwx3HHhEebB6HHrce3x7iHzgflh+lH7sf1h/uIAQgGyA0ILAgySEqIS0hjiH1Ig8iICIyIlkiYiJyIoMiyiLuIw8jiSOWI88j/CREJGQkgSSJJJUkxiUhJSklMSVFJX8lsyYNJjomSyZjJoQmnSa1JrgmuybEJxMnJicvJ1onfCeKJ5cnpSepJ60nsCfZJ+Yn8igAKD8oVShiKJso3CkdKXEpkCmdKakptynwKgIqDyo/Knwq0isdKyErLCtNK3MrnSu+K8sr/iwdLDMsNyxSLFYsaiyaLKkswizVLO4tMi1ALVUtaC2TLcMt3C4ILokuwi7RLxUvGC8eLysvRy92L8sv0S/UL9cwAjCGMIwwmTCsMMQw9DD4MPsxBzEjMSYxLDEvMTkxSzG9McAx3TILMigyUzJ8MpIyrzLOMxMzSDNOM600BTQJNB40ITRiNNA1GDVgNZE19TZvNqs26TcSN0U3SDd7N8I37jgqOC44MThMOIc4ozi1OS05ljmoOcE54joNOmY6bDp6Oo461ztHO1Y7bDuLO5E7oTvKPAY8Kzw6PFs8XjxkPIE8hDyWPQQ9Bz0jPVs9cD2dPcw91D3tPg8+Vj65PsI/Cz9hP2U/kz+XP5o/9kBCQKdBBEFwQdBCCUJlQqNC4EL+QzVDXEOPQ5JDlkOZQ7BD4UP5RCREnETiRRhFjEWcRclF2UXtRflF/EYHRhRGH0YiRoNGrkbERt9G7kcCRxtHKkdRR2pHzkf/SB1IV0hxSI5Iw0jcSRRJU0mWSaxJvEnSSeJJ9koCSgVKEEodSihKK0o6SnBKwUsES05LwUv+TEVMoUzgTTBNOE1iTa1NwU3oTfFOBE4VTjVOR05RTntOjk6/TtJO3U7yTwJPSU92T3lPlk+uT8FP0E/jT/dQC1AtUGNQoVD+UV9RcVGTUdRR+FJuUolSp1K2Us9TAVMgU1JTl1P0VGNUdFSLVKFUuFTKVRpVSVV4VdpWO1ZtVqBWrVbAVtRW61cCVxpXP1doV5BXu1frWBtYSVh3WIpYoVjEWNhY5Vj1WTZZSllxWX9ZqFnDWhhal1qvWsta71sUW0VbeVu3XIFdJ11aXgler17fXwVfRV9+X4Jfl1+mX79fz1/zYFRgjGDTYQJhe2HuYpJjD2OVY/FkSGSaZQxlUGVxZYdlu2XgZgBmT2Z2ZpxmyWb2ZyZnpWfuaAZoKGinaOZpFWlEaXJpnWoIalVqomsla09rf2uqa9dsA2w0bFZsgmytbPBtQ21tbZtt5W4xblZue26ibsRu7W8ob0JvZG+Jb6pvwm/icAJwInBPcHxwrnEFco1yxnLPctly4HLqcwJzF3Mvc0dzVXNjc2VzdHN2c4RzhnOIc5ZzpHO1c7dzuXPHc9Rz4XPjc+Vz+nQJdBd0J3QrdDx0QHRQdFR0ZHR0dId0i3SPdJN0l3SodLh0vHTAdNt063T8+077Ks2quKqhqriqxKqiwKCsoaqucaWqpauuq6SqrqrLEuPSRNND9xn7GfdZLKps91z7HKps9xxB1RP/vxX4Gvm0FfvC/kr3wgZB98IVIPsx9gcTEAAg9xJsFRMQAAgsXgYTGgAh6gaq94QVIAcTDgEU+zH2qj/quAYTBgBCbHVqwAYTA2EF6vcIFSz7Maz3EskHqsQVEwGhBWxNSSyqya5NqgcTABBAyegVEwAQEGxoBhMAOEGqBqzOFUjJawcTAC8B+zHuBvcx9w4VbE1oyWz7MaoHE+AGgcmuTqoG9zD9XRVsbQdIXgXsbAYT4AEA+zGqBs24BUmqBg78PQ7EoJQd+TMT2DIdE+gvCg7EOB3g9yESovkzE9wyHRPsLwr7NPiEIB3EOB3g1xKi+TMT3DIdE+wvCiX4hC8dxDgd2/cmEqL5MxPcMh0T7C8K+5j5ESEKxDgd2ygdovkzE9oyHRPqLwr7mPh/FekGE9bM5AUT2iAKxDgd5vcGEvdYKQoT3jIdE+4vCvud+IokHcQ4HeD3IRKi+TMT3DIdE+wvCvsl+IQlHcQ4He7sEqL5M/x097UT3DIdE+wvChPa+4v4kiYdxPtr3vctlB35WPtg9RPsohb3HAbG9zwFE+r3rQbG+zwFrFUdq7QFigb7lPlaBfszBnT8QxUT9C8KDsQ4HczH2McS95fI2MgT3zIdE+8vCiX4cD4KxDgd4iwK900xHRPUwDIdE+TALwpY+I0VE9LAKwoT1MAlChPRwCgKE9jAKh0T0cAmChPkwCcK9/+L9wXK9wuQ9wT3TfcF+wP3AxL4mvcWE7SiFvcfBhPU5vdEBfed+0T4XfcF+9sGE7T3T/fH9wT7x/dN99P3BfzIBxPMM/wzFfcx98QFufvEBg6thArLIgpjCg7LIgq89yFjClVvHcsiCrf3JmMK+y76OCEKy2Ed90f7A/cDMXb5B/cFErb3G/eA1hOP+ANoChPPagqXnfc0l+rvpfcwGfsckgUTlyV7U04iG/sKPuz3NPcy1vD3De3EUi6cH/cckgX3NW0q6vtJG/tc+xf7JPt4+2r3CPsa9z53HxOnd2pJChOPYh3L6x0T6H0d+y75phXpBhPYzOQFE+ggCssiCsL3BqcdTfmxLQq/IwoB24AK2xb3hgb3c/cQ9xP3d/d4+xP3FPt2H/uABveA/OkVIfh4ywq/IwrH9yYB24AK2xbZHQb3gPzpFSH4eO8d+yr5tyEK9xiLCvcYiwpdMx1XHQ5dMx3N9yFXHfdKzSAdXTMdyPcmVx3d92MhCl0zHcgoHdv3FhP0Rh3dyBXpBhPszOQFE/QgCl2PCl0zHdP3Bq8K90HTFfcZ9wb7GQYOXbUdXTMd2+wuHWj3tRP4Rh0T9OrbFfe17Pu1Bg5d+2ve9xiTHS4d91D1Ifc8E/zbFvgSVR0T+qu0BfcF+/j3T/fk9wT75PdN9/D3BfxyBw5dMx3PLArb9xZSMR0T6QBGHfe+1hUT5UArChPpQCUKE+MAKAoT8IAqHRPigCYKE+kAJwrehgpOoHb3t/cE91b3BSIdA9sW9xb3t/fb9wT72/dW9+33BfxvBg7MTAoStvcb+ApKChO6SwoTepAgBd/4AvvCJgYTvPdEBiyFS0IiG/seTvcB9yj3JMn3B/cb8btUOJsf9xuSBfclbS/u+0gb+2T7D/sz+2kfE7pNCg7MTAq8158dlvmrLx3MTAq39yafHfsn+jghCsxMCrcoHbb3G/gKSgoTuoBLChN6gFAdE7sAUwoTuoBNCvsn+aYV6QYTtoDM5AUTuoAgCsz7IPac6AoStvcb9yj3DPVKChNegEsKEz6AUB0TXwBTChNegE0KT/trFdkGE96AQh3MTArC9wYScx32SgoTvoBLChN+gFAdE78AUwoTvoBNClP5sS0KzCcdP3b3nfD3Ax2oSgoTvIBLChN8gFAdE70AUwoTvIBNChO+gPsa+bkmHfcAJx3L1bng94v3BQG29xv4BvcYA/gPexX3D/PC9w66H9jVUgaQpo2oqxq2+8Q290AHe4l8iHwe+ztB9xwGY29dc04b+x1N9wb3I/ckyPcH9x7iwlc+oB/3G5MF9yBqIun7Mhv7ZfsT+zb7Zvtl9xT7NfdkHw7Euh33BqB296b3BfcF9wX7BfdmEuf3F/fd9xYT7Pi8FvcW+IjK9wVMBhPc7PsWBxPsKvvdBxPc7PsXBxPsKk37Bcn8iPcX96b33Qf73fcFFfcF9937BQcOxKB298H3Bfe8SR3b9xb3v/cWE/bbFvcW98H3v/vB9xb5WpodBvcNxxXpBhPuzOQFE/YgCvwHdwr3iicdP3b5WncuHfcbdR0TdNtDChO8+Jb9asMdDvwHvQqSzCAd/AegdvlaSR3b9xZfCi7HFekGE9jM5AUT6CAK/AdnCnn3EXD3FnH3EF8KE/Qp0iQd/AdnCtn3GPsW9xb7FvcXXwoT8InSFRPk9xn3BgYT8PsZBg78B70KocwlHfwHIx3u7AHb9xYD20MKO9omHfwH+2ve9y12+Vp3ErX1R89H9xYT5NsWE/Cl0QoT6IMdE+SrtAX5WvsWBw78B4gddM+u9xatzhPRANtDCvcO1RUTyYArChPRgCUKE8UAKAoT4wAqHRPHACYKE9EAJwpfngpfJx34+Xfg9yEBwnUdA3IK9xFvHV8nHfj5SR3CdR0T7HIKpPmmFekGE9zM5AUT7CAKpdcK924G2+b3cPvJBfcpBvuv+CL3nvfMBfsuBvuq+9gF99j7FgcOpSMd2/cmIh29HfH3YiEKpfsg9sF2+Vp3Ih3n9wy9HfdgdgpAi/cF+Ol3xQoOQIv3Bfjpd+D3IcUKkswgHUCL9wX34/eai3cuHROw2xb4Z/cF++X46fsWBhPQ9237mk8KQKEKYov3BfjpdwH3BvcWA7j3rBXQqwX7zPhn9wX75feYB/cjzWLgJVsF9377Fvu6B/sBWAUO94WWCuIjHXsdDuKgXAp7HfeJzCAd4iMd2/cmex33JfdiIQrirx3iiB3b9xaQMR2A9xYT0kDbFood9/zVFRPKgCsKE9KAJQoTxkAoChPhQCodE8VAJgoT0kAnCt/7M+/bdvlady4d99j3F/sV9xUT+NsW9xb4lQYT9Pfa/JUFhQdodnljHjIn9wgGE/jvysfpH/lf+xf8egf7xfh6BfspBg7yIgoBtvcb+Cw4Cg7yIgq89yEBtvcb+Cw4ClH5OiAd8usd+Cz3GxPseB37Mvk1FekGE9zM5AUT7CAK8iIKwvcGAbb3G7MpCrU4Cvs4+UAkHfIiCrz3IQG29xv4LDgKYPk6JR3yIgq89yEBtvcb+Cw4CvsW+TpHCvIiCsrsAbb3G8b3tcc4Cvsl+UgmHfUiCirsErj3G/gs9xsT2Lx7FfEGssAFaMDMedcbXx0fE7j3CGrpUMweE9jT7AUlBmldBalYTptEG/tn+xT7I/t5+wKpMcFMH/eTkRVbY5ikax/3svgVBaRhmFNHGvs2Pyz7FB77YPeVFfc21+z3FLawgHepHvuv/BEFd7SAvsgaDvIiCr4sCrb3G68xHbH3GxPSQHgdxPlDFRPKwCsKE9LAJQoTxkAoChPjQCodE8dAJgoT0kAnCvhPJx0qkx0q9wUStvcb+Cb3J/sW9xYTtfgPexXo1K3Evx8TdUD4XvcFBxN2+9z3T/fI9wT7yPdN99T3BQYTdfxWBhNtQAfEV0KtLhv7ZfsT+zb7Zh8Ttftl9xT7NfdkHhOu9wUE+x1L9wv3HvcfyvcM9x73Hsr7DPsf+x5L+wv7HR8OjpQKcKB29yn3Bfdj9wX3FHciHfeJ9xsD2xb3Fvcp9wwG9znq2/cf9xss2vs5H/sM9xT7Fgb3FvxUFfdj9wkH4LZpR0ZgZzYfDuwiCgG29xv4JvcaA/iNkhXDRAX3BgYv9wcF38269fcXGvdm+wr3Nvtt+2z7DPs2+2b7afcU+zH3ZL23lJmrHvsS5RX7HUv3C/ce9x/J9wz3H/ceyvsM+x8rcUlbYR9P2gX7Bgbv+xAFhX15iXYbDqeSHW0KDqeSHcz3IW0KNvgdIB2nkh3H9yZtCvtN+KohCqf7IPbBdveg9wb3a/cFIh3q9wzQqx05/PlOCpJkHWUdDpJkHbz3IWUdSW8dkmQdt/cmZR37Ovo4IQqSYR33RjR2+Qb3BBLP9xj3Rdaq9xgTn/feaAoT32oKl5wF9ymR7dv3ERr1S9H7U7QepAoTr78KE5+W+xjgL/ckeAgT33ZoSQoTn2IdkmQdtygdz/cY96/3GBPsgQr7OvmmFekGE9zM5AUT7CAKkvsg9pz3BPia9wQSz/cY5vcM0/cYE3yBCj/7axXZBhP8Qh3Li/cF923o90L3BSId9933GAPb+HMV/HP3FvhzB9iytNMe9ycG+0n7NAX7AAfvjAXqxGNGSVdhNh/7EfsF9xEG9z7u4Pcc9wUv1/sgmB/3Vfc/BfcI+8sH+y40N/snHw5czR1coHb3udz3c/cFAfeG9xYD94YW9xb3ufcT3PsT93PrCvtz+xM69xMGDlw7Csf3JgH3hvcWA/eGFvcW3Qou99MhClz7eM7avMF2+On3BRL3hvcWbdYT+PeGFqIGb1wFE/RJClyctWnNG8/Br829bbFJkB8T+KGsBajdCg5c+yD2wXb46fcFEveG9xb7FvcZ+wz3CRPw94YW9xb46fds9wX8xfsF92sGhv3QwwqxNgp5HQ6xcApRbx2xNgrf13kdjPmrLx2xNgraKB3M9xb3yfcWE+w7Hfsy+aYV6QYT3MzkBRPsIAqxNgrl9wYSzPcWgikKg/cWE/I7HRPs+zf5sSQdsXAKYfmrJR2xcAr7FvmrRwqxNgrt7BLM9xaV97WV9xYT9DsdE/z7JPm5Jh2x+23c9wz3Bfj6dxLM9xbX4TX3SMD3FhP2zPeSFfs49iT3PogeY3BraYxWCFm2ZsCuqZecnh7VBxP6fHd4hHobc32Zn7CtqOq5H+m0weH3CRr4XfsW/F0HJlNTKClTw/Ae+F37FgcOsTYKy8fYxwHM9xbCyNjIwvcWAzsdjPmXPgqxNgrhLArM9xZ+MR1/9xYT0kA7HcX5tJEKw4v3JfsQdvladxKi+TMTcPesFvcxBveV+VoF+xwGE7D7W/zJ+1v4yQX7HQYO98NRHRKi+ikTcPdqFvckBvcQ+Hr3EPx6BfclBvdR+VoF+x0GE7BNHQ73w1Ed4PchEqL6KRN4VwoTuE0d+CXMIB33w1Ed2ygdovopE3RXChO0TR33wccV6QYTbMzkBRN0IAr3w1Ed5vcGEvfSKQoTfFcKE7xNHfe70iQd98NRHeD3IRKi+ikTeFcKE7hNHfg0zCUdqLYdl7kdl6IKkviDIB2XoHb5Wkkd96T3FhPo96QW9xb3rAb3jPhCTx33jfxCBS74fhXpBhPYzOQFE+ggCpdnCvdC9xFw9xZx9xCrCin4iSQdl6IKofiDJR2XiB33Pc+u9xatzhPRAPekFvcW96wG94z4Qk8d9438QgX3DviMFRPJgM6yvuCOH0gGE9GAXYd+fXUbfYCQmnkfE8UAn3J1lmsbE+MAKh0TxwC3jZyZnxublYV8nR8T0QB3o5+BqRsOOCMKfx0OOSMKzPchfx33dfkrIB04IwrH9yZ/HfcE+bghCjgjCtL3Bsgd91/5MS0K/GnTHUChCuKvHbBxHW8KDrBxHcz3IW8KR/gdIB2wcR3H9yZvCvs8+KohCrD7IPbBdveh9wX3a/cFIh3Y9wzash07/PlOCvtfIwoB9zj3FgO2FvgH9wX7DPh4YB33B/x4+w0GDvtfvB33E/kqIB37XyMKxygd9zj3FhPoVQqm+SUV6QYT2MzkBRPoIAr7XyMK0vcGErz3IfsR9xFx9xZw9xD7EPchE+S2FvgH9wX7DPh4BhPxYB0GE+T3B/x4+w0GE+qh+TAkHftfIwrS9wYS9zb3GfsX9xYT6LYW+Af3BfsM+HhgHfcH/Hj7DQYT8PcL+TAtCvtfvB33I/kqJR37XyMK2uwS3/e1+2X3FhPoVQoT8LT5OCYd+1/7a973GPcF+Hj3BRL3OPcWXPUh9zsTcLYWE+j3oFUdE2SrtAWK9wUGE3D7DPh4YB33B/x4+w0GDvtfIwrOLAq820fPrvcWrc4T0oBVCveH+TMVE8rAKwoT0sAlChPGgCgKE+GAKh0TxYAmChPSgCcKxF0dAbb3G/gG9xgDRB0OxF0dvNcBtvcb+Ab3GANEHfmrBOTEwOOPHz4GXYZxeGEbYXCeuYYfPQYzj8VW5RsOxF0dtygdtvcb+Ab3GBP2RB37MvmmFekGE+7M5AUT9iAKxPsg9pz3Bfc68veL9wUStvcb9yn3DPD3GBN+RB1F+2sV2QYT/kIdxF0dwvcGAXMd8vcYA0QdSPmxLQrEJx33OvL3Ax2k9xgT+kQdE/77Jfm5Jh3EOB3k9xYS91ssHRPeMh0T7i8K+1f4iCkdyyIKwPcVpx2P+a8rHV0zHdH3Fi4dWiwdE+pGHRP29yjRFWYKZW5xZWSocLEf90kWZgpmbXFlZKlwsB8OXTMd0fcVrwr3g9EVsaimsbBupmVmbnBmZahwsB8OzEwKwPcVEnMd9koKE7SASwoTdIBQHRO1AFMKE7SATQoTvoCV+a8rHfwHIx3k9xYSfHoKXwoT9G/QKR38ByMd5PcVEtn3GfsX9xYT6NtDChPwy9ArHfIiCsD3FgG29xu3LB28OAou+T4pHbE2CuP3FhLM9xaGLB2K9xYT8jsdE+wv+a8pHffDUR3k9xYS99YsHRN8VwoTvE0d+ALQKR2XIx3k9xYS90V6CqsKb/iHKR04IwrQ9xXIHfeh+S8rHftfIwrQ9xYS0HoKE8hVChP06PkuKR37XyMK0PcVEvc29xn7F/cWE8hVChPw9035LisdxF0dwPcVAXMd8vcYA0QdivmvKx34lov3BcL3A/fS9wUB+gb3FgOiFvccBsb3PAX3rQbG+zwF9xz3AB3y98Dx+8AF98D7q7oK+IMnHSr3Bfh49wUSzPcW98n3Fvd59xYTvDsdE3z4HZu6CkwwCkMdE7g0HRN4MQoTuC4KDkwwCsD3IUMdE7w0HRN8MQoTvC4KePiaIB1MMArA10MdE7w0HRN8MQoTvC4Ks/iaLx1MMAq79yZDHRO8NB0TfDEKE7wuCvsL+SchCkwwCrv3JlLEQx0TtjQdE3YxChO2Lgr7C/iVFekGE67M5AUTtiAKTDAKxmMdXikKTPcUE7k0HRN5MQoTuS4KE7b7EPigJB1MMArA9yFDHRO8NB0TfDEKE7wuCoj4miUdTDAKzuwhHXH3tV73FBO6NB0TekmWtnbFG5ygjY2TH+h6B3eBk6gf91YH9yI92/ss+xk1S/sEdh73F4UFwZetqMobzq5kQB/7RWgF+wl0UlovGhO6LgoTtCL4qCYdTPtr3vcM6PgC7kMd+w31K/cDE/j3d38VE/Ljz7HEpR+SYKBzqYAIE/RxanwdE/irtAXoegd3gZOoH/dWB/ciPdv7LPsZNUv7BHYe9xeFBcGXrajKG86uZEAf+0VoBfsJdFJaLxouCg5MMAqsx9jHIR2eyNjIi/cUE76ANB0TfoAxChO+gC4KE7sAs/iGPgpMMArCLAq09xlaMR1I9xQTqSA0HRNpIDEKE6kgLgrs4AoTpSBIBhOpICUKE6MgKAoTsKAqHROioCYKE6kgJwr3uX/fN/cPHSjuIR33bfci+x/3H/eL9xkTdYD3gH8V74zVsa7SCEW312PsG3wKdAo+THFcXh68Y0qjORv7EjFM+wR2HxNugPcYhAW9lbGsxBvLs2Q+H/sybQX7CXRAaSUaE3WALORR9YoeE7WAq98VSIhws60ayr2R0Jge8J8FaAeKNVVaRIgI+JT3iRUTdoD7iwbelbq40BsTtYDPumI0kR8OZWsK9zh3EtH/AHuAAP//hIAA9xT3j/cZE7b3+X8V9x7i9wH3Pvc+NPcB+x5BUmNbbx/3kPsUBxN2/VoHE3r3DgYTuo7aBRO2UqnEadYbbvMVOVvN9wH3A7vL3tS6S/sD+wFbSUIfDj8kCmgdDj8kCsD3IWgdUfj3IB0/JAq79yZoHfsy+YQhCj9hHfdCO3b4V/MhHfc51hOe97hoChPeagqaofcOlt/ZmfcLGfsYkQUTroYdHxOe+yzfI/cYdx4T3nRlSQoTnmIdP9QKE+iVCvsy+PIV6QYT2MzkBRPoIAo/JArG9waSCkj4/S0KZWsK9zh3ErT3GfePNQoTvDwKE7rVya3EqR8Teo48BRN89w35WvsU+5DVCh8TvLQKDoFrCi33mod3o3chHfePNQoTpwA8ChOmgNXJrcSpHxNmgI48BRNrAPcN+Vr7FPuQ1QofE6cAtAoTkwD3uvf8Twqcawqr2zv3GBK09xn3jzUKE6730/jWFfX7DAbCblCsQRv7GzT7APs/+z/g+wD3HR8TrdXJrcSpHxNtjjwFE273DfjWywYTtttLBxOuv/sUBxO2VyEHefzK2h0OVX/x97zx9353AbT3GfeY9xgD94D4khX3Er2ocKBommEZn2Zhl18b+zsrLPsv+y/rLPc79zrr6vdF9xts9w1D3x/vs3HP+xpVWLBKojuTGWovtYiwg6p/GUBtBer8exU4XMPn57rD3t27UzUnW1U5Hw5JMB1UHQ5JiQr7Q/esIB1JMB259yZUHfun+DkhCkkwHbkoHbT3GfeL9xkT9kwd+6f3pxXpBhPuzOQFE/YgCkkwHcRjHWopCl2mHfus97IkHUkwHcT3BowK+0z3si0KSYkK+zT3rCUdSTAdzOwhHXz3tXD3GRP6TB0T9Pua97omHUn7a973DPH3IeH3FPABtPcZ8fWy9xkD98N/FaSMhIMFb2t6a2AaU7JqzrO0l5mcHvcIHZ+elKGipx/i9J+jm6iUrBl0CvsxJfsD+zz7PfH7Avc0Ho8dDkkwHcD3GvsT1z/3HDbXIR1lMR1a9xkT4UD3w38VfArPChPhIJkd+zEl+wP7PB4T4UD7PfH7Avc0HhPpII8dT/e1FRPlQCsKE+lAJQoT40AoChPwwCodE+LAJgoT6SAnCkmiHft5oHb4Oe7m7gH3EqYKDmU+HbYKE+0AWh0T9QD4ewcT9ID7EQYT7IBOHRPuAGQKE+0AVh0OZT4dwNebHZD4bS8dZT4du/cmmx37Lfj6IQplPh279yZSxLYKE+1AWh0T9UD4ewcT9SD7EQYT7SBOHRPtgGQKE+1AVh37LfhoFekGE+tAzOQFE+1AIAplPh289wAStPcZz/cMyIIKU/hp5R1lPh3GYx3J9xnBggpN+HMtCmU+Hc7sIR1797VznB0T7QD7IPh7Jh2H+zbs13av7/Hb9x7jM+8hHfeN9xX7EfcRE/cA95z3eBX3LgZKe2BmThs/W8nt7bnJ2dO6VzWRH/szBq/8ahX3LO/T9x0f90nB21UHE/sA93YHE/qA+xEGE/aATh0T9wBkCjCj2k73IBsOT5wKa6UdT6B2+E7z9zh32ygd0V4KE/a+HS3HFekGE+7M5AUT9iAK/Bx6HfwcKgpeHfiq+xQGDvwc2B2RzCAd/BygdviqSR3R9xQT6DoKLccV6QYT2MzkBRPoIAr8HCoK5vcGEm73EXH3FHL3EBPoOgoT9CjSJB38HHod/BzYHaHMJR38HCoK7uwB0fcUAzoKO9omHfwc+2ve9y12+Kp35vcGkAqJ0i0K/BwqCuIsCmrPrvcUr84T0QA6CvcO1RUTyYArChPRgCUKE8UAKAoT4wAqHRPHACYKE9EAJwot+yru03b4qnfm9wYSz38K9zv3GfsW9xQT9ToKE/mJ0t8K91D9+VkKE/b3AfkkLQr79ZgK+/U2HQH3AfcUA4j7KlkKDvv1Nh3g9yEB9wH3FAOI+ypZCvcK+R4gHfv1+yru+N1JHfcB9xQT6Ij7KlkKnfkZFekGE9jM5AUT6CAKaioK91h3ux0OaioK91h32/cmux0t92IhCmr7IPbBdviqd/dYdwHR9xTJ9wwD0Rb3FPcnBt/k9zD7gAX3JAb7bPfM92X3cgX7Mgb7b/uFBfg1+xQH90B2Cvvvi+7493cB0fcVA/dbFtruZAZxfZenH/jP+xQHivzcBTK9ZtoeDvvvi+7493fg9yEB0fcVA7kK+w/5myAd++mL7vfx95qLdxLR9xUTsLkKE9C1+FRPCvvvrB376Yvu+Pd3EtP3Ff//f4AA/wCAgAAT4Kn3wxW1mwX7VQcyvWbaHhPQ2u5kBnF9l6cf93oH6K9u1UtzBfeT+xQHivvEBRPgQ28FDvd7oHkK91D3C/dR9xQTrtEW9xT3xgbgsb7IzKNaNB77xvcL98YH4bC9yMmoXzMe+8r3FPfrB/cYR9L7AkFUZERzHtB0VbQ9GxO2SFVmSnEfE9aI5QUTzvsIBg5PoHkK92H3FBOsVgoTtFIdE9SI5wUTzPsIBg5PoHb4Tucv88D3IRLR/wB1gAD//4qAAF4KE7ZWChO6Uh0T2ojnBRPW+wgG90DMIB1PoHb4Tucv87v3JtYK92H3FBO2VgoTulIdE9qI5wUT1vsIBtP3YiEKT4cKT6B2+E7nL/PCLArR/wB1gAD//4qAAPcUSjEdS/cUE6iQVgoTqRBSHRPJEIjnBRPIkPsIBve01RUTpKArChOooCUKE6KQKAoTsFAqHROiUCYKE8iQJwpP+yrn2nb4Tucv8xLR/wB1gAD//4qAAF4KE9b3pvsqFekG7crF540f9+sH9wxL3vsKHhPaUh0T6ojnBRPm+wj8qvcU98IGE9bltr3Q0KNZMR77VYoiB2V0c2UeSAYOVSQKAbT3GfeY9xgDNAoOVSQKwPchAbT3GfeY9xgDNApR+I8gHVXUCveY9xgT7DQK+zL4ihXpBhPczOQFE+wgClUkCsZjHWopCmr3GBPyNAoT7Ps3+JUkHVUkCsD3IQG09xn3mPcYAzQKYPiPJR1VJArA9yEBtPcZ95j3GAM0CvsW+I9HClUkCs7sIR1897V99xgT9DQKE+j7JfidJh1GJAox4RK09xn3mPcYE9ilfxXtBqyzBXGzvX3EG/cy8/cC9z0fE7jYdcxluh7R4QUpBhPYbmgFpGNamVMbmB0/oEqxXB/3YJgVbXKTm3cf91X3gQWTc49uahr7A1tLOR77FvdDFfcCuszeqKSDfJ4e+1T7gAWEo4enqxoOVSQKwiwKtPcZZTEdZ/cYE9JANArE+JiRCvfff/El8/cf4fcR8ybwIR33mPcd94v3GRN398R/Fd7QqsC5H1a40GzfG3wKE7d0CjhIbFZeHsBdRqo4G5gdHxN3+z3z+wL3Mx7zBMgK3btK+wL7A1tLOR8Tb/iW93XoHQ5lhQpe+xV29x73Avfo9wD3OHcS0fcN+w33FveH9xgT9tH7KhX3FvdeBmOqu3PLG/ct2vcR9y73Ljz3EfstR1xzYm8f93n7Fgf3i/z4FRP6M2Xd4uWx3OPksDwvHxP2MmY7Mh4OZfsVdvce8/fy5y/zIR33j/cU+xD3EBPc+L37KhUT7PlABxPq+w8GE9qJPAXGbFCrRRv7LED7Efsu+y7X+xH3LB8T3M/GrL+oH/tzB/sS94YVPVzM9wL3ArrM2dm7UPsI+whcUDwfDvuNoMQKE9DkHRPgSmFsQ3YfiPIFE9D7DAYO+42gdvg89wLM9yGgCubMIB37jaB2+Dz3Asf3JqAKgvdiIQr7jfsg9sHECvsU9xn7DPcHrQqG/ZEVE+TZBsfwBewHE+L7DCCuBg4mf+33/u1iCg4mf+33/u289yFiCkr48yAdJn/t9/7tt/cmYgr7OfmAIQomYR33PEF2+F3tEsH3GfcZ1oL3GROe96VoChPeagqaoQUTrfcPkd3D7BrkVLn7PKUetB0TnpIuzUb3EHwIE950ZUkKE55iHSZ/7ff+7bcoHcH3Gfdb9xkT7HYd+zn47hXpBhPczOQFE+wgCib7IPag7ff+7RLB9xm69wyr9xkTfHYdQftvFdkGE/xCHXGL9wL/ANCAAPcA/wC5gAD3Ai0d93f3FjP3GBP00fhwFfxw9xT4cAfjvbvTHhP4xrllXFJiXkWMH2KMBfsBB7qMBRP03o3LaUAaRklqQR5L+wLLBvcY9yDB9yPpSs0qoR8T+NehtcbTGvcIKtX7Hh4T9PsrKDL7MR8O+3w9CgH3FfcUA8UdDvt8i+73Htv3Cu4B9xX3FAO494EV3zcGIbxc9R7JCtP3INv7IPcK9yHu+yH3EfsU+xE3KN/7CjcHDvt8PQqk7xL3FfcUE9D3sBb3Bu70HQcT8PcR+xQHE9D7ETco330KE/CO+MNPCvt8+3jO2rys7vfk7hL3FfcUqdYT+Lj4RxXf+64GO6ddxXkealMFE/xJClyctWnNG8/Br829bbFJkB+hrAX3Au4GE/iOHTcHDvt8+yD2rO735O4S9xX3FFP3DBPwxR0m+3sVE+jZBkIdSzkdjB0TuPeKfxUTtEIKE3SNMgUTeEgdE7hACg5Ldx2C+PcgHUs5HeDXrh29+PcvHUs5Hdv3JlLEjB0TtveKfxUTtUIKE3WNMgUTdkgdE7ZACvsB+PIV6QYTrszkBRO2IApLOR3m9wYtHUnNSfcR2PcQT8dPUx0TuED3in8VE7ggQgoTeCCNMgUTeEBIHRO4QEAKE7RA+wb4/RUTskD3EfcGBhO1APsRBvde+wYVE7iA9xD3BgYTuQD7EAYOS3cdkvj3JR1Ldx06+PdHCks5He7sLR1cuvdctWGTCiz5BSYdS/tr3vcM80R2+Kp3LR33NfVIUx0T2veKfxUT2UIKE7mNMgUTvJlVHRO6q7QFiviq+xT7xwYT2kAKDks5HczH2MctHYnI2MiOUx0TvID3in8VE7xAQgoTfECNMgUTfIBIHRO8gEAKE7sAvfjjPgpLOR3eLArR9xQ/z0fX91POUVMdE6kQ94p/FROpCEIKE2kIjTIFE2kQSB0TqRBACvD4/BUTpSArChOpICUKE6MQKAoTsFBLY1k3iR8TsJDPBhOikCYKE6kQJwo/i/cV+wB2+Kp3EqH4shNw920W9ysG91j4qgX7HAYTsPsb/Cn7HPgpBfsbBg73RlAKEqH5sBNwRQoTsEYKDvdGUArg9yESofmwE3hFChO4Rgr36MwgHfdGUArbKB2h+bATdEUKE7RGCveExxXpBhNszOQFE3QgCvdGUArm9wYS95UpChN8RQoTvEYK93/SJB33RlAK4PchEqH5sBN4RQoTuEYK9/jMJR1rnQowlwowsB33DPkeIB0w+yru+N1JHaH4oxPo9wD7KhXmBtmzp82iH/dl+OIF+xkG+xP8Hfsb+B0F+xgG91L8lQWwBn1mBXKBfYFoG0cGn/kZFekGE9jM5AUT6CAKMDYd5vcGAfcPKQoDVAqa+SQkHTCwHfcc+R4lHTA2HeIsCvcLMR0T01QK94D5JxUTyysKE9MlChPHKAoT4yodE8cmChPTJwo6PQoBxPhnA8QW+Gfu+9QG98z33QX1/FQo970H+8j73QUOOj0KzPchtQr3RviBIB06PQrH9ya1Ctn5DiEKOj0K0vcGzh33PfiHLQr8aNMd+++sHU+HCkA3HfcGHRO493F/FRO0QR0TdI80BRN49wL32AY3ChO4LtVW9wMePB0OQDcdwPchYQpz+JogHUA3HcDXYQqt+JovHUA3Hbv3JmEK+xD5JyEKQDcduygdr/cZ925gChO293F/FRO1QR0TdY80BRN29wL32AY3ChO2LtVW9wMePB37EPiVFekGE67M5AUTtiAKQDcdxvcGEq/3GVkpClGdHfsV+KAkHUA3HcD3IWEKgviaJR1ANx3O7BKv9xlr97VkYAoTuvdxfxUTuUEdE3mPNAUTevcC99gGNwoTui7VVvcDHjwdE7T7A/ioJh1A+2ve9wzoT3b4U+4Sr/cZ90f1SGAKE9r3cX8VE9lBHRO5jzQFkgYT3HVvfB0T2qu0BYr32AY3Ci7VVvcDHjwdDkA3HazH2McSr/cZmMjYyJFgChO8gPdxfxUTvEBBHRN8QI80BRN8gPcC99gGNwoTvIAu1Vb3Ax48HRO/AK34hj4KQDcdwiwKr/cZVDEdTmAKE6kg93F/FROpEEEdE2kQjzQFE2kg9wL32AY3ChOpIC7VVvcDHjwd5uAKSAYTqUAlChOjICgKE7CgKh0ToqAmChOpICcKZTIKIR33jzUKE5w8ChOaQB0TWo46BRNsWwoTnEQKDmUyCsD3IWYdUfiPIB1lMgrA12YdjPiPLx1lMgq79yZmHfsy+RwhCmUyCrsoHbT3GfePNQoTmwA8ChOagEAdE1qAjjoFE2sAWwoTmwBECvsy+IoV6QYTlwDM5AUTmwAgCmUyCsZjHWcpCmShHfs3+JUkHWUyCsD3IWYdYfiPJR1lMgrO7CEdeve1djUKE50APAoTnIBAHRNcgI46BRNtAFsKE50ARAoTmgD7JPidJh1l+2ve9wzzRHb4Tucv8yEd92f1STUKE80APAoTzIBAHROsgI46BROuAJxVHRO1AKu0Bfiq+xQHE80ARAoOZTIKrMfYxyEdp8jYyKM1ChOeQDwKE54gQB0TXiCOOgUTbkBbChOeQEQKE5/AjPh7FcO2tsPDYLVTU19hU1O3YMMfxwR0e5uioZuboqGbe3V0e3t1Hw5lMgrCLAq09xljMR1gNQoTlJA8ChOUiEAdE1SIjjoFE2SQWwoTlJBECsX4mBUTkqArChOUoCUKE5GQKAoTmFAqHRORUCYKE5SQJwr8Cdwd/AmgXArwHZHMIB378qB2+FT3mot3Etn3FBOw2Rb3FPla+xQGE9D3PvuaTwr8Cfsg9sF2+Vp3Etv3FPsU9xj7DPcIE/DbFvcU+Vr7FAaF/kHDCvuUIx0B9y/3FAPv98MVwqAF+9j3FPgJB+GsbdVTdgX3j/sU+8AHNmoFDkwwCsT3FiEdYiwdU/cUE7k0HRN5MQoTuS4KE7ZW+J4pHT8kCsT3FZIKivj7Kx1JMB3C9xYhHW0sHWX3GRPpTB0T9vtm97AVZgplbnFlZKhwsR/3SRZmCmZtcWVkqXCwHw5JMB3C9xWMCvsK97AVsaimsbBupmVmbnBmZahwsB8OZT4dxPcVIR3J9xnBnB0T70CP+HErHfwctx38HCoK5PcWEnL3GmT3FGH3GhPoOgoT9G/QKR38HLcd/Bz7a973LXb4qnfk9xWQCsvQKx0g+yru03b4qnfk9xUSz38K9y73GfsW9xQT9ToKE/nL0Mkd9wH9hVkKE/b3Q/kiKx379TYd5PcVwB33Q/kiKx1VJArE9xYhHW0sHXL3GBPyNAoT7C74kykdSzkd5PcWLR1NLB1Wkwpg+PspHfdGUArk9xYS95ksHRN8RQoTvEYK98bQKR0wNh3k9xYB9xMsHQP3APsqFeYG2bOnzaIf92X44gX7GQb7E/wd+xv4HQX7GAb3UvyVBbAGfWYFcoF9gWgbRwbh+SIpHTo9CtD3Fc4d93/4hSsdQDcdxPcWEq/3GVwsHVmdHVD4nikdZTIKxPcWIR1rLB1roR0v+JMpHfagdvg57ubuAfcS9xX3ZPcVA/cS+L8VaD8o1/w59xX4Ofdktwpo+2TKCg6zoHb4Oe6Zd+b3BvsA7hL3EvcV94l/ChPNrAr4DPy/FfcUBhOt+Kr7FAcTtonSLQrOi+731u7m7gH3EvcV93qmCvh8/L8V1x0O9wk9CgH3FfcU93D3FAP3sBbJCvei93B9CvcG7o4d+3D3EfsU+xE3KN99Cg77e/gFzUzS913RErbz9wTwON449wITuPc1+AUVE7THs6Kvmx8TdF+TrH+tGxNymZqNjZEfzoIHE3h/hZCfH/cBB+RXuyYyU2ZAfh7vhwWpkZ6brBusnnZkHyJ2BRO4RXxib04aUrtq0R6lzRVwfpegn5qYppEf0ZsFfAdcbXFhHg77e/gF1vdX1gG28vcd8wP3a/gFFfLQz/TyR9AjI0dHIyLQR/If1gRfcq/Jx6Swt7ejZ05Nc2dfHw7EoJQd+TMT2DIdE+gvCg6Yi/cF92/3Bvcr9wUB21IKA9sW96cG9zru3/ce9x8o4Ps6H/sl9yv4DvcF/JAG96H86RX7H/dv9x8G5bplQ0NcZjEfDq2ECls7CuAdDls7Csz3IeAd91fMIB0pOwoiHfdZ9xYD2xb3Fvjp99v3oPsW+y/72wYOkKB296T3Bfdo9wUB9xn3FgPH96QV1Puk9xb3pPd39wX7d/do+A33BfyP+9lCBg73RvsVdvcq9wX4ePcFEr33Fvga9xdg9xcT+L37KhX3FvcqBhP0+HL7KvcX95sGE/gz+On8bQZX/GUFM4FtX1cbaQb3bRagqJizkcCz9/4Y93P8eAYOXTMdVx0OXbUdXY8K9/8jHQH4U/cWA6cW9zoG95H32wX72/cW99wH95L73AX3OQb7qPf3sgoFDpsnHf8A5oAA7f8Ac4AAd+f3BRK69xn3t/ca+wL3GhP69+Z7FfdC9wng9xLqUM8gpR8T/OiivMHbGvcDINX7NPsp+wFA+wJ+HvcYgwW8kr+q2Rvev2pWQExvUYwfQowFKAfUjAUT+tSM02c7GkVPXSswTbXOhR77GYUF+xWS9wk09zsbDt8jHakKDt8jHeDXqQr7OPmbLx2jIx0iHQP4ihb3Lwb7v/f3hB0Oo6BcCiIdA/iKFvcvBvu/9/eEHdz4QCAd9wcjCgH4yvcWA8IW5wbrvMvvlB+y+EUF93b86fcW+Vr8cAZd/KAFXod3b2YbUQYO94WWCr+6HfIiCgG29xv4LDgKDr87CiId97j3FwPbFvcW+On3uPzp9xf5Wvy9Bg6OlArFIgpjCg5czR1Ki/cC+Ox3nwoOSov3Avjsd+DXnwr3V/ktFYId91gjHQG29xv3UfcP91H3GwP4Axb3D9cG91ee9xX3APcsGvcs+xX3APtXnh7X+w8/B/tXefsV+wD7LRr7LfcV+wD3V3ke+1H3qxXk0sj3Cpoe+94H+wqaRMjkGvfM+zkV994H9wp70k4zGjNETvsKex4Op7Ydj6B294L3A/f9dwGw9xb3tPcWA/hbFvcW+VrLHQ73HNkK97j3F3D3FxP42/laFf1aBxP0+KL7KvcX95sGE/gj+On7F/zp+7j46QYO97eL9wX46XciHfdd9xf3XPcWA9sW+az5WscKBg74CdkK9133F/dc9xZv9xcT+vng+yoV9xf3mwYT/CT46ccK/VoGE/r5kAYOv+wKIh3c9xbc9xcD97f7KhX3Fvcq92j5WvsX/On7uPjp+xb9WvdnBg6Y4h0D2/laFf1a96cHswoG9x/8BVoK94biHdT3FgP5SUMK/PkW/Vr3pwezCgb3H/wFWgrkaQr3I/cFAfc5UgoDx/jpFfT86XgK+38G+Ar8BVoK+IdpCvcj9wUB+MpSCgPCFucG67zL75QfsvhFBfd2/Ol4CvxwBl38oAVeh3dvZhtRBvmg93gV47xkP0FbZDIf+x/3eAYO+EhpCvsF9wb3k3cuHfe5UgoT3tsW9xb36fe5++l4CvsWBhO++5P7ufeT+xYHE975SPwFWgqSZB1lHQ7oJx33YPX3YvcFAbf5MAP4E3sV90b3CvD3O6wf+x4GKXFHUiob+wZC1/cUfB/3jvX7jgb3FprU1/cGG+zPUSmlH/ceBvc9avsK7/tGG/to+xP7Ift7+3n3E/sh92gfDugnHfdg9fdi9wUBtvkwA/gIexVfHfd7+xP3Ifto+0b7Cif7PWof9x4G7aXPxewb9wbUP/sWmh/7jiH3jgb7FHxCP/sGGypHxO1xH/seBvs7rPcKJvdGGw78B3cK/AdnCnr3EW/3FnL3EF8KE/Qq0iQdX54K9xmgdvf99wwd97T3FgOm+OkV90r86fcW93UG3cvB7N+2WTYe+3b3FveOB/ccN+H7JzhFZ1RpHvds92L3BfyaBw74BycdP3b3vvcG9133BXt3Lh35GPcbE3bbFvcW977zBhO2+1ie9xD7CvdVG18d93n7E/cj+2j7VfsP+wv7V3cfIwYTrve++xYH+M78+RX7FD/q9zYfE7b3Ntfs9xT3FNcq+zYeE677Nj8s+xQeDrBxHQHY9xr3qPcWA/j9Fvla+6cH+zwqOfsgLrtB5W0f+zb7twX3IQb3J/ehBZQG9x37oQb7H/gSFTVYr9HSvrHhH/cf+2sGDvcci/cF94z3DB33sfcZA/dlFvcW93EG4MrC7Ne8W0E+UVonHvsFB/dH9wTo9yj3Hi3o+x85RmhVaR/3avdi9wX8mvsF90oHDuFpCtfjM/dIEvctUgoT3L34phXy/KbGCtfzBhPs4yMHE9zn+xYHE+wvJAf4CPupWgroOwoB98/3EQP3EPegFSv7oAX3GgbV928Fupqdla0bl/uo9xH3qJYGrZ2BXJkf1vtvBfcaBiv3oHPTYbFSkxn3KvdnBfcF/MP7BQf3KvtnUoRgZXNCGfcC990V97MG+yP7XgUO8icd90L3BFT3BfdA9wUStvcd+Cj3HRO8jgr7CEHZ9xx/H52UnpCejqyPvoO7eggT3PBntYWzkZSMlY2VjggTvPsGdkRJIRv7WfflFfcFoNLN9Bv3CNQ8+xuYHxPce4J6hnqJY4ZrkSqvCBO8XJ5Qk2KFgYqAiH+ICA7yi/cm+xF2+On3BRKi+WITcPesFvcxBvdN+JMFy6KmocEbmvcFXAY0RlUxax8TsPsn/Dj7XPjIBfscBg74HpEd+FP3FvfZ9xYTuPoa+yoV9xYGE3j3gCQH+2X3obIK+6f79wX3Ogb3kffbBfvb9xb33Af3kvvcBdIGDsyRHdv3Fvf69xYTuPjM+yoV9xYGE3j3gPsFB/t396GEHfe4++8FzQYO9wf7KveANeH3a/cF97x3Lh33v/cWVvcWE7r43vUdPvkEmh39WvcW98H3v/vBBhN62AYOl7kdmKB291z3BfghdwH3pPcWA/cF91wV9zP7XPcW91z3M/cF+yAG93n4IU8d93r8IQX7IAYO1pEd+Nb3FhOw+Nb7KhX3FgYTcPeAJAf7Svek94D39AX7Kwb7NvuT+zn3kwX7Kwb3gPv2+4L7+AX3Kwb3OfeX9zv7lwXOBg7P+yr3gDXh9yz3A/f9dxKw9xb3tPcWXfcWE7r4r/UdN/kEyx373QcTet8GDo+gdvf99wP3gnciHfe09xYD92b5WhX7Fv1a9xb3dQbdy8Hs37ZZNh77dvcW944H9xw34fsnOEVnVGkeDvwHdwrehgrfIx3u7BLY9xaV97Wo9xYT9M8dE/z70vmpJh3yJx33XvcE9173BQG2+ToDjgr7BUPV9xR7H/gmBvsUe0NB+wUb+133zhX3E5zT1vcEG/cE00D7E5wfDkqL9wL47Hfu7BKi+Lr8N/e1E/C4HRPovvk7Jh1SMApDHRO4NB0TeDEKE7guCg5ne/P3vPMStvcK+wr3HfcW9wak9xgT1PfOexX3M/cA7fcw9ygn8fstHxPsQ1BsVmcflPcDw6besgjgs6nF4xr7BooFVHlzSW4eE9T7FlJWLvtVGiGkNbpXHkzB03PUG4zzFTpTyOSNH+KMxcbcG9fATzUyVE48Hw5Yi+v3Gbpc3/cR6xLR9xb3WPcY+wL3GBO60Rb3ngb3HdjD6h8T2tNXuTKSHhPc1pO3s8ka6jvA+yIe+4AGE7r3l/xKFfsV9xn3FQbCrXFgZGlyVB8TvHL3bRUj9xHzBsSuc2ZkaHJSHw77OaB2+EfuXh34R/ef7vwfBg77OaB2+EfuzPchXh34R/ef7vwfBvcfzCAd+2KgdvhH7gHR9xT19xYD0Rb3FPhH94D3k/sW+zD7fgYO+wqgdvdl7vcT7gH29xQDvfdlFcT7ZfcU92X3Ke77KfcT95/u/B/7dlIGDsr7KveNKO735O4SsPcU98f3FWD3FRN4sO4VE7j7jfcUBxN09yr4HQcTtPsq9xUHE3T3jQcTeDX4R/wlBlv75wVIgnRuYhv3OBaao5SokLCt94oY9zr75AYOSjAdVB0OSjAduvchVB37NPeoJR1KMB3A9wYhHWspClymHfur964kHfezKgoB+C/3FAO6Fvc1Bvdf944F+473FPeNB/df+40F9zMG+3P3n/dp958F+zMG+1X7jAX3jPsU+40H+1X3jQX7NQb3afufBQ4gf/D3KuH3GuISqfcY91P3GPsG9xcT9PegfxX3I+bH7M9avzigHxP41J21s78a6DfE+xn7EDZUMYEe9xiGBbOPqqK9G8Ctc2Nfa3BXjB9bNbsGE/TJjLNsWRpfYnFMTWOpuIge+xiHBSGQ50n3IRsOQioKAdH3FPdU9xQDbR0OQioK3NcB0fcU91T3FANtHfd0yBWCHUIqCtz3IQHR9xT3VPcUA20d90nIFe8GTvchBfsVBg5uKgrCHQ5uoHb4qnfg9yHCHbz36SAdnYv1993uAfh09xUDvRbgBvcHHfxH9xX4qvw9BmX7+AVchnhyaRtlBg7Zi/cMKHb4qnctHffq9xUTeNEW9xT31Qb3C/vVBfUG9wn31AX71PcV+Kr7MAcTuPsj/DL7I/gyBfsxBg5IoHb3be33b3cB0fcU91n3FAPRFvcU9233Wftt9xT4qvcRHQYOVSQKAbT3GfeY9xgDNAoOUaB2+EfuAdH3FPdi9xUD0Rb3FPhH92L8R/cV+Kr8YwYOZYUKPyQKaB0OOaB2+EfuAfd19xUD93UW9xX4R/dM7vyFKPdMBg4wlwowNh3c1wGh+KMDVAr3RfkaLx2y+xZ2+fF3AbT3F/cM9wr3CvcXA/e4+ysV9wr3Rgb3Lp7q5/cYGvcYLOf7Lp4e91n7CvtYB/sueSou+xka+xnsLvcueR77DPeIFdG4vNabHvuiB0CbXrzRGveC+xsV96IH1Xq3W0UaRV9bQXoeDmudCm+gdvcz9PeidwHR9xT3gPcUA/hGFvcU+KqwCg6q+xZ29yfuKPItHfdi9xVt9xQT1NH4phX8qvhF+yf3FAcTtPeOBxO4KfhD+xUGE9j8R/ti+EcHDvdFi+74R3cB5woD0Rb5Tviq4x0GDveX+xZ29yvu+Ed3EucKcPcUE/r5efsrFfcU944GE/wm+EfjHfyqBhP6+TMGDlH7Fnb3J+4B0fcUsvcUsvcVA/eB+ysV9xT3J/c8+Kr7FfxH+2L4R/sU/Kr3OwYOUOcdA9EWowr3TOcd4PcVA/kaFvcV+Kr7FQb81PyqFaMKkIvp9yrr6u4B9xr3FPd79xgDvfhHFd/8R8EK+2gG99fACvfzi+kt9fce6+ruEvh09xX3evcYE7z4dBbpHfsL91b8PQYTfGX7+AVchnhyaRtlBhO8IeAH9wcdBveD++kV+wL3KvcC9wod956L6fco7irr91Z3LR33WPcU93v3GBPe0Rb3FPeG91j7hveMBvcy4MX3Ah8TvvcFNsb7Mh77DPdW+xQGE977VftY91X7FAf4x/xMFfsDBhO+9yr3Awfbs3NXHxPeWWNzOx4OJn/t9/7tYgoOTX/z9xbl9xbzAbT3HAP3xH8V9xbp1fcUqB/7GwZMemFoUBtEXrregB/3J+X7Jwbelri60hvItGdJnB/3Gwb3FW8s2PsXG+wdDk1/8/cW5fcW8wH4OvccA/e7fxX3M/P3Avc99z0j9wL7M/sXLD77FW8f9xsGzZy0r8gb0rhcOJYf+ycx9ycGOIBeXEQbUGGuynof+xsG+xSo6UH3FhsO/Bx6HfwcKgri9wYScPcRb/cUdPcQE+g6ChP0Ks4V9xH3BvsRBvde+wYV9xD3BvsQBg779ZgKa6Ud90Z/80R2927t9xLzf3ctHfho9xgTdtEW9xT3btkGE7b7IZ3uMvcjG/Id+yMoMvsheR89BhOu9277FAf4ZvxOFThcy/cDHxO29wK6zN7du0r7Ah4TrvsDW0s5Hg5boHb3Wun3KOkB4vcX91n3FAP3WfduFfsT+24F9xwG9wX3WgXr+1r3FPiq+3cG+yk7UfsAR7NX0W0f9wvVFUxoprq6rqbKH+77KAYOdvsq79J2+Er3AK/cOvcZEvcBXgoT7vcBFvcU974G5bW90c2mWy8e+6wHYXRxaB5mJ8YG9wPAx/cAH/fZB/cORtz7AkpRdE5sHvcM9wUHE/bc+wUHE+6/+xQHE/ZXUAcT7jrGBw6pi+n3P+r3P+Mz90wS9zL3Ffd69xgT3PcyFveMBvcv48r3B/cJNMz7MB/7C/c/9gYT7OMgBxPc6/sVBxPsK/sABxPcM/cAB/eD/EkV+wL3P/cCBte3a1RVYG0+Hw7ZoHb3atL3LesB6/cU4PcO4fcUA/cY918VNvtfBfcWBsr3PgWslp2WrhuQ+2r3DvdqjwavnIBqlx/J+z4F9xcGNvdfd7tgp1iRGfcr9y0F6/y5Kwf3KvstV4ZgbnhbGef3fxX3uQb7JvspBQ5Vf/Pq7V/s8/MStPca95b3GRO8fh1AXcDngx+NkpGNkRunj6+FtHoIE9zPbamFpowIE7xOeGJpTxv7DveKFc2btrHKG9i6UiiQH4SKBRPcaod5jDmxCBO8ZJxikWyGCA5li/cW+wF2+EfuEqH42BNw920W9ysG9xn4AAW6nKqjthuV7mcGNUhbL2wfE7Ax+5z7HvgoBfsYBg73wHsK+C/3FPeM9xQTuPmn+ysV9xQGE3j3dT8H+zX3Vfdp958F+zMG+1X7jAX3jPsU+40H+1X3jQX7NQb3afuf+3P7nwX3NQb3X/eOBfuO9xT3jQf3X/uNBbgGDoR7CtH3Fver9xQTuPhz+ysV9xQGE3j3dTIH+0H3Vfd4958F+zEG+2z7lQX3lfsW/Kr3FveWB/d2+5YFwAYOn/sr93VB1fcj7fdvdy0d91n3FGL3FBO6+Hb7KxX3FAYTevd1BxN8NPhg9xEd/Kr3FPdt91n7bQYTeuIGDj/7FXb5QHcB93j3FAP3eBb7KvcU9yoH92T4qswKDj/7KvdbKe34eXcS93j3FBNw9wRaFfcIBhOwJvcUBxNw8PcJBxOw7SkH91H4ecwK90/8eQUqBg6Rewr4gfcUE7D4gfsrFfcUBhNw93UwB/se91nVHftU+6QF5Aq8Bg60+yr3dEHV4PT3onctHfeA9xRg9xQTuvib+yoV9xQGE3r3dAcTfDb4YLAK+4wHE3rgBg5PnAr8CdwdSaIdQioK7uwtHVu791T3FBP0bR0T7NvaJh1Vf/P3Eu33EvMBtPihA34dRV+43H4f95EGOn9eXkYb+xL3dBXbl7e50RvQuF07lx8OMDYd7uwSofij/Cz3tRPwVAoT6Kz5LCYdvqB2+Nf3F4t3EqL5LROwohb3GgYT0Pdb+Nf3W/zXBfcZBvuU+VoF+y0GDuqL/wBwgAD/AfSAAPcFErb3GvsY97Xj97b7GPcZE9S4Fve19wUGE+Qzj0b3AfceGvcu1er3E/cT1iz7LvseRvsBMoceE+j7Bfe29wUH+yKKBRPk4brE7PcTGvdc+xX3I/ti+2H7Fvsj+1z7E8Uq4VweE9T7IowFDmaL7viU7gGi+NYD+K4Wyu5oBmaBoLR5H/s3+C0F62VjtzYbPCi/BrKXdmKcH55c+2j8igX3GQb3Ivfs3ftgBSiyrmLfGw6Ri+734+8B9yn3BPc39wQD+OcWsu5pBmJ0pbUf95/u7/ziJ/P8RvcE+Eb3N/ufByHATvcKHg5Le+//APKAAOv/AMuAAO8SsPcHMPcHE/D3vHsV9PW4zL8fSeUFTVg+ZUsbMFG91NbFuuaJH7uKBewHW4oFE+hPikqt2BrEvLDXxM9mVrUe0uIFylEusy8b+yAsP/sDPLlV3XIfE/ApclVIMBr7EvQz9y4eDqYiCgG79xv31vcaA/fsmQr7fqB2+Hvu9xB3EvdS9xYk8hPw91IW9xb5WgYT6CQGLWptNh5OKAYT8PcsBg54i/cF+Ij3BRLG9wQdxqkddd4KuvcZ95P3GvsD9xsT/PfRiAqP6gr4J/cWA/gnxB2Gox1+6QrE9wUd99qkHUY7CgH3TvcYA/dOrgp89w4dsNMK99egHYGDCvc09yjP96zPAfeS1Pc80wP4L/coFenJ2/cT9xRN3C0sTTr7FPsTyTvqH88EenyQlX8f9wz3VAWQeI50cRozbFhWHrb3nRX7C/tTBYWdiaGkGuapvcGbmoaBlx5f/IE/Cg73NP8BkYAA/wAzgAAS+AXYUMYTwPgufz8KYvdBFdj4GAYToFAGSx0TwH4K9zT3NM/3nc8B96bj9mod+xz3QBWzHfc09yjP9w3L688S96A5ChP0+C5/PwqO9zSNCvc0933PAfg+ah2b90GBHfc09yXP9ybLxs8B+HBqHfcxBGkd9zT3KM/3JM/RzBL3o5Ud+C5/Pwr3NARuCvc0+HXPAff1ah1S90FsHfc09yjP9xLD7M8S95w/HRPy+C5/PwqM9zRBChPsPR0T8kUdE+xICvc09yjM0c/3JM8S96OQHfgufz8Kf/c0qB33SHXd48/3rM/m3AG03fch1Pc80/ch3AM1HYzjFenJ2/cT9xRN3C0sTTr7FPsTyTvqH88EenyQlX8f9wz3VAWQeI50cRozbFhWHrb3nRX7C/tTBYWdiaGkGuapvcGbmoaBlx4O90h13f8BVYAA/wAzgAD3XtwStN33othQxveM3BP6NR1w8BXY+BgGE/ZQBksdE/p+CvdIdd3vz/edz+ncAbTd9zXj9tb3ONwDNR37HO9nHfdIdd3jz/cNy+vP5dwStN33LzkK9y/cE/7ANR2O4xXayL/NvWe4WpcfE/9Aax0T/sBHHUuPyVnaGw73SHXd90HP9/bcAbTd98/W92HcAzUdnfCBHfdIdd3gz/cmy8bP9NwBtN33/9b3MdwDNR3gBGkd90h13ePP9yTP0czn3BK03fcy00Pa9xHV9zPcE/3ANR3jBNvGwuHfVcJEHxP+wLgKE/3Axh33SHXd+DnP9dwBtN33hNb3rNwDNR1S8Gwd90h13ePP9xLD7M/n3BK03fcrPx33K9wT/mA1HYzjFd/JutO8bbFYnh8T/aA9HRP+YEUdE/2gSAr3SHXd48zRz/ckz+fcErTd9zLW9xHZRNL3M9wT/0A1HX/jFefG5vcg71vfMTtPVDU3wVTSHxP+wKcKE/9AgB2mIgoBu/cb99b3GgP37KoKbHCTm3Qf92n4JgWeYZVSRRr7PFIyIx77NfeVFfc8xObzpqOFfqAe+2X8HwV7s4O/yhoO+0GL9fgR7vcQdxL3UPcWJPIT8KaxCmsiCgGh9xv31vcaA/fSmQpri/X4Ee73EHcS96b3FiTyE/D3BbEKa4v3BfiI9wUSy/cEHcupHWveCrb3GfeT9xr7A/cbE/z3zYgKa+oK+CP3FgP4I8Qda6Mda+kKxvcFHffcpB1rOwoB92n3GAP3aa4Ka/cOHZ7TCvfFoB1rgwpOIx0Bl/jTA5cW7AYzCg73RIvP953P/wCigABYCvfE4/bWE9j3KRbsBjMK/HpdChPUUAYT5EsdE+hzBhPbUQr4EfzIZx33LHvPbHb3Qcvrz/8AooAAWAr3nzkKE3YA7hbsBjMK/EhdChO1AFAGE7kATmtoTx4TugBzBhO2oFEK+H382FsdE7ZAax0TtqBHHUuPyVnaGw73Z3vPbHb3Qcvjz0/P95XPe3cStuP21vd6OQoTc9D3MhbsBjMKE7XQv/1qWx0TreBrHRO10EcdS4/JWdob/Rn36Wcd9wyL9yBHz/8Bp4AAWAr4PtYTmvcPFuwGMwr8YF0KE5ZQBhOmSx0TqnMGE5pRCviL/MgV1gYTWtO0BxOaz2L3jEwHE1pyHROajR33OYv3IEfP9z3P9w3Lb3f3JM97dxK2OQr3/dYTrCD3RRbsBhOqIDMKrf1aFdYGE2wg07QHE6wgz2L3jEwHE2wgch0TrWD3EB38ifc9FdrIv829Z7halx8TrKBzChO0oHN1c2oeE7VgRx0TrWBLj8lZ2hsO9197z2x291rLxs//AK6AAFgK+KTWE3aA9xMW7AYzCvxkXQoTtYBQBhO5gEsdE7qAcwYTtoBRCviv/NhxCvc2bArsz/8ApIAAWAr3oD8dE3aQ7BbsBjMK/EZdChO1kFAGE7mQSx0TupBzBhO2kFEK+ID82EEKE7ZgPR0TtpBFHRO2YEgK92lsCtbPXc/uy2939yTPe3cStjkK92U/HRNy2fcwFuwGMwr8UvwlWx0Ts2lzChO1aXN1c2oeE7VZRx0TctlLj8lZ2hsTs1n4hPvZQQoTq1Y9HROzWUUdE6tWSAr3WGwK089gz/cNy8bPEveM1vdaPx0Td5D3LRbsBjMKE7eQsP1qQQoTr2A9HRO3kEUdE69ghx0Tt5D8etMVaR33M2wK7M/3h88S9xDW97E/HRN+QPcDFuwGMwoTvkC1/WpBChO9gD0dE75ARR0TvYCHHfyP4xXWBvcStfcG2esev/uoR/dVB0UtYfsF+wUaDvuWfNwKfKod/Bugdv8A8IAA/wAzgAAS9xTYUMYT4PcUFtj4GAYT0FAGTmtoTx4T4H4K+7+Lz/edzwG44/bWA7gW96TP+0wGjqGlo66ip54YxLGstb4azlW6REJRWT6CHteHBbWToKCuG6igeW9wfHZqdh9rdgUoSntFTRoO+617z/cNy+vPErg5ChP091J7jQr7qov3IEfPEvdz1hOg93MW1gYTYNO0BxOgz2L3jEwHE2ByHROgjR37vHv3Ah17cQr7vnvP9yTP0cwSuJUd90x7FW4K+96fdvfUzwH3A9YD9wOKbB37qnvP9xLD7M8SuD8dE/L3VHtBChPsPR0T8kUdE+xICvu5e8zRz/ckzxK4kB33QHuoHfuW98rcCvfKqh38G/8CM4AAzgr3FNhQxhNg9xT31xXY+BgGE1BQBhOQSx0ToHMGE2BRCg77v/fZz/edzwG44/bWA7j32Wcd+633yc/3Dctvd/ckzxK4OQoTuvdS98lbHRO8cwoT3HN1c2oeE9pHHRO6S4/JWdobDvuq+B/P94x3Afdz1gP3c/fXgR37vPfG9wId98ZxCvu+98vP9yTP0cwSuJUd90z3yxVuCvve+RbPAfcD1gP3A/fWbB37qvfLz/cSw3J39yLPErg/HRO591T3y0EKE7Y9HRO5V3luZVkaQ8lc4B7PBGBuorAfE9mxqKe2tahvZR4TuWZudGEeE9ZICvu598vM0c/3JM8SuJAd90D3yxXnxub3IO9b3zE7T1Q1N8FU0h8T9KcKE/iAHfw9DhwGy0odHAjkA8n3uRUcCBsG+437jgXdHRz34wYOHARzSh0cBowDHAUIhR0c+jv7DhwFwwYO+K9KHfrIA/lEhR3+AfsO+f8GDvxEi/cgAbT3JwO0FjodDvxE+x129zL3IAG09ycDvfsycB3794v3CR0WOh33eQT3J/cg+ycGDvv3+x129zL3CR34BRU6HZT9L3AdiIv3IAG09yfP9yfO9ycDtBY6Hfdr+yAVOh33avsgFTodDvw2i/cg+M53Erv3J/se9xYT0Nr3cBXiBpPPmPcP2xr3b/sW+28HO5n7D5NHHhPgbPtwFTodDvw2+yF2+M73IBK79yf7HvcWE9D3OvfcFTQGg0d9+w87Gvtv9xb3bwfbfvcPg88eE+D7CvdwFfsg9yf3IAcOP4v3IPhw9wIStPcatPcn+x73FMX3GRPs93X3bRX3FAbMmqe+qR7kwK+z4hr3CjPj+yv7Mi0t+xh/HvcahQXblLa12RvOsmJUWH52QGMfRGRwWiQaE/SC+20VOh0OP/s29wL4cPcgIR279yf7HfcUvfcaE+z3/PfvFfsUBkp8b1htHjJWZ2M0GvsK4zP3K/cy6en3GJce+xqRBTuCYGE9G0hktMK+mKDWsx/Ssqa88hoT9JT3bRX7J/sg9ycGDvxE9333IAG09ycDtPd9FTodDvvn90j3gAG094YD9zb3SBXQv77Q0Fe6RkdWXEZGwFjPHw77fPiK/wBXgAD/AISAAHcBtPfuA/cy+AYVxOrELNC0TeYF9wDjBvsAisnmRrVSKlLsRmHHMPsAjAUz9wAHTzAFDvui9633XAG098kDtPetFdgG5/dcBSEG2ftcFdgG5vdcBSEGDvsBoHb3Q/H3KvL3SHcBivi7A/ejFvcHBqj3QwXdBprxBTsGpPcqBdkGmvIFPwap90gF+wgGbftIBfsCBqn3SAX7CAZu+0gFOgZ8JAXaBnL7KgU+BnwlBdcGbvtDBfcHBqj3QwX3AgYu8RWj9yoF9wIGc/sqBQ77LfsC+fABrfg6A637AhX3Egb3vPnwBfsSBg77L/sC+fABtvg6A/hl+wIV+7z58AX7Egb3vP3wBQ78RoP3IAG09yQD9wWDbh37+YP3IPdc9yAB2/ckA/csg1gd9+gEWR0O+/L7HXb3Mvcg91P3IBLb9yT7IPcnE/D3LPffWB1Q/H0VE+jSBs73QgX3EPsn+yDIBw50g/cgAbT3JMn3JMn3JAP3BYNYHfdiFlkd92IWWR0O/EKD9yD41ncSufcW+xb3JBPgz/dwFeEGkuSa5+Qa93D7FvtwBzKZL5MyHhPQvft4bh38QvshdvjW9yASufcW+xb3JBPg9y733BU1BoMyfS8yGvtw9xb3cAfkfOeE5B4T0Gf3eBVja21iYqtvs7Sqp7S0bKliHw4/g/cg+Hj3AhK09xq+9xL7EPcksvcZE/T3dvdwFfcSBsCgtr2rHuLDrb3QGvcLJN/7KPseJiz7F34e9xqFBdOVuL3OG9G4ZVSKH1Fde1tmHkhac045GhPs1ft4bh0/+zb3Avh49yAStPcZsvck+xD3Er73GhPs9/v37BX7EgZWdmBZax40U2lZRhr7C/I39yj3HvDq9xeYHvsakQVDgV5ZSBtFXrHCjB/FuZu7sB7OvKPI3RoT9EH3eBVibG1iYqpvtLOrp7S0a6ljHw78Rvdz9yABtPckA/cF93NuHfuD94L3AAG09+gDtPeCFffo9wD76AYOTPeC9wABtPiYA7T3ghX4mPcA/JgGDveR94L3AAG0+dQDtPeCFfnU9wD91AYOKiD2AbT4dgO0IBX4dvb8dgYO91/3cfcGffcGErT5ohOg+OT3cRXa2LDS1h9I4gVNR2V4URtfdpDCJR8TYKVdT5lfGzhPbzYwH8wxBcjCvafMG7C+fXK6HxOgUPcFoIm6Gw775/sC+fABt/cTA/dI+wIV9wYG+zj3s4v3svc497MI+wYG+0r7q4v7wvdK+6sIDvvn+wL58AH3K/cUA6f7AhX3Bgb3Sveri/fC+0r3qwj7Bgb3OPuzi/uy+zj7swgO+4j7DvcC+ST3BBK23Jn3DhPQ9+r7DhW69wIGMIhlpswa1AflVM06lR6PB9qVxMvlGtUHyrGl5oge9wRcB/sMNz/7AB84BzloZU+MHhPwIQcT0MeMrmQ6GjgH+wDfP/cMHg77iPsO9wL5JPcEEvcx9w6Z3BPg1vsOFfcM39f3AB/eB9yusseKHhPw9QcT4E+KaLHdGt4H9wA31/sMHlz7BAbmjrFxTBpBBzHES9qBHocHOoFUSTEaQgdKZXAwjh77AgcO+6L7AvcA+Rj3ABLb9w/7D/evE9D3//sCFfcABxPg+zT5GAYT0Pc09wAGE+D7r/3wBg77ovsC9wD5GPcAEqf3r/sP9w8T4Kf7AhUT0Pev+fAGE+D7r/sABhPQ9zT9GAYT4Ps0Bg77qvsG+jsBtPfB0R0O+6r7Bvo7AbX3wQP3PPsGFb8dDvu+TPoMAbX3KQP31tgK+6z+DAYO+75M+gwB90D3KQO0TBX3rPoM+6zbCg77pfl05QG06AO0938V6PiJ92nl+8YGDvulJOUB95LoA/fv+HwVLvyJ+2kx98YGDkz7Bvo7AbT4l9Ed+Bn8aBX3Egb7Qvho90L4ZwX7Egb7Q/xnBQ5M+wb6OwG1+JcD+BL7BhW/HTMW90P4aPtD+GcF+xIG90L8Z/tC/GgFDvuf+yb6eAG15wP3ufsmFcfN+2/3WQX4bQf3bfdWT837jftzBfy3Bw77n/sm+ngB95jnA/D7JhX3j/d2Bfi3B/uN93NPSfdt+1YF/G0H+2/7WQUO+6f3fbb4GrbVtgG0t9W18LUDtPd9Ffc0+EX3I/c0+8MGt/y6FfiP921B+yP8RQcO+6cottW2+Bq2AbW18LXVtwP37fiCFfs0/EX7I/s098MGX/i6FfyP+23V9yP4RQcO+7ZMvPmqvAG0v8G/A/fe2Ar7tf4MBvdevBX7Kvmq9yoG+xT7mov7nfcU+5sIDvu2TLz5qrwB90C/wb8DtEwV97X6DPu12wrivBX3FPebi/ed+xT3mgj3Kv2qBg78Qvsddvcy9yABtfcnA777MnAd+3n7HXb3MvcgAbb3J7/3JwP3j/syxx37efcLHb/3JwP3Sfln7R33j/cyFUQGSPtCBfsQ9yf3IE4HDvt6+NP3IAG29ye/9ycD94/4Nccd/ED3Cx0D90n5Z+0dDvxC+NT3IAG19ycDvvg2cB1e1/gkAbX4qQP34NcV+z73XPc+91wF+yQG+yb7QQVVB/cm+0EF+BcW+z73XPc+91wF+yQG+yb7QQVVB/cm+0EFDl7X+CQBtPiqA/ex19Qd/DL7XNId+7XX+CQBtfe2A/fg1xX7Pvdc9z73XAX7JAb7JvtBBVUH9yb7QQUO+7XX+CQBtPe2A7TX0h37svhL96MBtvXZ9APP+EsV2gaP96MF+wA5BvdO+1EV2wai91EF3SAHDvxn+Ev3owG29wADxfhLFdoGmfdSBdz7ADoHDvsdivX3y+7k9RK9+Er7p/cPE/C9Ft2K6InEv5XlGar3qQX3Oe4GE+j7LgaPrQWuj6Cfrxvk9Ab7BYwwjFFXgTIZhVQFLSjeBm/7lAVoh3d3aBtNBg6MzQrR2uf3Eyr3ExO92xb3XDDa5gb3M5Dl1vcNGhPd7E3H+wKUHhPe4ZTDxNsa9wc/zfsjmB7tPCz7XAf3FvzsFRO991zR+1wHRffCFfdQ0ftQB9r7whUT3fdcB9uHtWlNGhO9T19nPYceE773xgT3SAfIgaprWhpabGxOgh4O+K9KHfrIA/iUthX7jfeOBfn/9w7+AcIKHARzSh0cBowD+JS2FfuN944FHAXD9w4c+jvCChwGy0odHAjkAxwJIve5FfcOHPfjB/eO945cHfcfBvuN944FDhwEckodHAaLAxwFB4UdHPsDBveO945cHfcfBvuN944FHAT5Bg73SHXd93/Vs+od93b3ZRXbBsKftarCG8K1bFSeH9sG7XRAySkbKT9NKXQf91b7e54d90h13fTV9z7qHfg79zkV9wLl2vcBmx8/Bkh8UlxHG0dSus58H0AG+wGa5Tz3AhuI+0+eHU6L9xD4B+QBk9n4P9oD9Bb4GgbDtLTDH/gaB8NitFMe/BoGU2JiUx/8GgdTtGLDHnj3EBX3afgH92r8BwUO97Ai6+bbPtf3ltJE3/cF6RK29wXp9wP3aeI07Tza9xXvE89Q+S1OFXXnBXNRRntBG/tD+wPs90T3Yfcj9yf3ZvdO9fsG+zofE6+Q+w9YV2Jnf6qqnYyfjJYeE9dQnfduBRPXMDUGE88wh18FrnRfoVQb+xczIPsaJ8o79wnMx6++qB8TrzBVl7ptxhvu7+L3Rfdi+y73L/t9+5j7Z/tJ+6P7ffc6+xb3dR8Tz1Dc15qo1R/7ZfdzFUdwvsfZt8/VzqdaTUJkQjwfDp579wYp9wEzdvj59wUSsPcbTfcZ9xn3GpH3FhOa96x7FePTn6q1HxM6qGgFEzn3KwYTWS/3Aba8qNiP2Bn7FpcFV4FheHEe+xX3NQUTlvTLur/cGutGz/sW+xVDRyBMpV+5Vh4TmiFGZFIxGvsP4kf3MB6X9wYVOmStwbyirsSxH/cl+0gFeXhof1gbE5b37gRmtn+mrBqzpKW3tKJ0ZGFzb09mHg5voHb5DtcB95b3BdD3BQP3lvfIFfvI9wX5DtD9DvcF+Vr7pwf7KS09+xD7CuE/9x2FHw5B+wHt+ObsEtD3GfsY9xn3V/cZ+xj3GBPU98X7ARUT2PcR8MDxvni0TqgfE9TBoqWwvRrtRrf7LakeOp9znIquCK+JsaW/G8uzalaUH/cUkQX3BXsgy/sDG/sbLlEiXKZoxHAfE+hScHBiilmIOMZd9yJtCNV5xHZiGmZlclFMXKzDgh77FoUFE9T7AZXwQ/chG4n33xUT5EKTb6auGq6vor64zHlZHhPUZmR0Uh4O9zh/59Pd94rd0+cStujc7fdR7C3pLe3f5xP8wPgwfxX3YPc59zn3YPdg+zn3Oftg+2D7Ofs5+2D7YPc5+zn3YB/nBPsr+xH3Efcs9yz3EfcR9yv3LPcR+xH7LPss+xH7EfssH4/TFfLXzuuVHymQBVaEZ2pbG09ivNXWtLvHHxP+QLmua1uSHxP9QOyQBeeCQMwmG/sJOTj7Dh8T/MD7Dd039wkeDkX3AR3mxeDH3ZsKKsMVxe2tBsEpBcwGTfYFrpWep68avmCrRx4vBur7ChVmzrDlCkX3AR30xt/Hz5sKOMMVxu2uBtCzqcC+YatHHy4G6vsKFWfOr+UK93X5Fs8B90vX9yrX94jYA/jL9/sV3Abc92sF+2vY9/MnByn7nyn3nwUm+/PX924G+8L7bhXX96/yz/uuR/IGDvuR+Afn9yHnAbTo9x/oA/dg+AcV5NTU5ORC1TIyQUEyMtVC5B/nBGRsq7GyqquysqlrZGVta2QfDvwoZQr7dfjn9yEBtffzA7X453UK7vshIB38DeIK+yoV9xH58PsRBg78DeIK9/cV9xH39/sRBv3wBPcR9/f7EQYONqB2+EPjChb3DPhD5h0GDjn7FXb3O+/3zuMK+yoV9wz3O/cq7/sq987mHfvO+yUn9yUGDvhNi+XK2vdP2/dndy4d99z3FrvmQ/egReQT/oD5+fctFejHz/T0T88uL05HIiLIR+cf/an7LRWKHRP9APkj/VoV96Dl+6AGE/6A9xr3IhVkdK7Gx6KssrSiak9QdGhiHw5O92DC4sKrwuLCAdfH91XGA/fd0hXG9xn3H8L7H+L3KML7Ywb7kSYVx/cZ9x7C+x7i9yfC+2MGDvd19yHs9xTs9yvrAffq4+br9xXrA/hCNRX3d/gw+M371fuLMPd1B/wX/BYF97/7PhX7Pfc+9z33PQUi96f3jPcV/Az8KAcOTvfuwgH4I8QD9yr3wBXHBvD33gVQBkP7iUP3iQVQBvfy/MMVxPen58L7hVTnBg4/lHaodvi5dyEdwf8ATYAAdf8ATYAAE7j3dDAV2QaS2vcbjencmvcSGfsYkYJGZGdUhhmp9+qyfaZrklgZ9xiSBRN0ffcCQdH7AJyT4hg9BoQ3BfsmgC77APszGvsi1Cf3Cm4eUfejFemtyMmbHm773gVgpHPC2hoOOeXr93LrsncB3ur3cusD97XlFbazmKKsH9ZBw8E/1gWirJizthq2frN0rR7X1lPBQEAFompjmGAbYWN+dWofQNVTVddABXRpfmNgGmCYY6JqHj9Aw1XV1QV0rbJ+thvrBE9YvcjIvr3Hx75ZTk5YWU8fDpKRdqF2+Qf3BIh3oncSz/cY8trk9xf7C/cYE4qA98MwFdrXBvchlufZ9w0a8VDP+0K1HvdZBxNTAL95qV+SUfcXkRh+9wxB5/sZnwgTTgDePDsH+yeEMzf7Chr7BstY9z9kHvtnB0aZZbuA1/sYgxiW+xvlLfcpewgTZoAk+KsVvbGvzJEe+04HO6J0orsa90r8OxX3VAfeb51tXxpWZm1LhB4O1ycd9xzZ19n3KPcFAfcV9xID+EJ7Ffcj7fD3K6cf+xWSBTR7VVBDGz1VwtxyH/cYBpbZBfsyBom2jKwF9zwGltkF+zoG46LCx90bz8BWO54f9xOSBfckbCjq+xsb+yf7APsA+y1oHzQ91waKao1gBT495Qb7J7D2JfcjGw6zf/cF9xrZ09n3K/cEAdr3Gveh9xkDwPgVFfjm2V0Gk5yRn50a9xMk3Ps5+w8sQfsMah73Gn4FyKa4rcMb1b9iU4kfinWFenp8CPwpBve0/G8V9yD00vcGqx/7I5MFWnJYbE0bQlewwowfmZCZlZke+DfZ/OY9rwaFfod8fRr7DvU49zAeDsyL90892dD3Bfd49wUS9yL3Fveo9xoTfLX3ARXvBhO8+wH3FgcTfPcB7AcTvNkq0PclB/c67uH3IvchKOD7Oh/7p/yfJwb4BfdKFfsf93j3Hwbku2RBP1pkMx8OsaB295T22NrZ9wU92RLb+MkT7Pf+Fvc3Bvuv95QFxwb3J+vQ9weeH9zaPAaFuHmxcKkI9xbZ/MkGE/T7BfdtB9e2cVeZH/vyPPfxBld9X3JBG/ttIAYO90WL3vi03gHb9wXa9tj3A9n3BQP3pBb35QbnxMXnH/jE+wX8yQdldHNlHvth+GwgBvtU/L8V9wX5B/dfBrCic2Uf/C73A/gpB+dRxS8e++UGDnKL9wj3Wdn3cvcFEvcN9xU69xIT6MH0FSIH+KeOBfcF/CgH26+w2YjeCPco2QYT8Ps1Bnu+e6uwGse7tcC7s29ZmB73JJIF8nk53PsnG/sXKjj7BmuTYppeH5F3BSo9BhPo9wYGjH+Mf4AaQWVQPmMeDpeL92824Mbg9+93Evek9xYTePcP9xoV9ykGE7j7GvcWBxN49xr3KeD7Kcb3KeAmB/dc9+9PHfdd++8FJjb3KVD7KQYOJfeA9gH3dvYD93a+Ffb3TfdM9vtM90wg+0z7TSD3TQYOJfd/9wABtPhwA7T3fxX4cPcA/HAGDvs54fgxAbX4MAO19zYV1j/3F/cX9xb7FtfX+xb3FvcW9xY/1/sW+xb7F/cWQED3F/sXBQ4lyfcg1fbc9yAB92r3JAO096gV+HD2/HAG94n71Vgd+CYEWR0OcvcX9vcG9gHb+HAD2/f0Ffhw9vxwBvvcBPhw9vxwBg4l9xf29wb2IPdMErT4cBOw9yqfFfcBBq33AwX3dPb7VAat9wYF9zIGE9D2+xEHE7Ci2AX7AQYT0HQ+BfuGBhOwIPdlB2n7BgX7QyD3IwYO+wil+KYBtvhfA7alFfhf91oF9xsH/F/3WQX7CAf37fsp++37KAUO+wyl+KYBtPhfA/iIpRX3CQf77fco9+33KQX3CAf8X/tZBfsbBw4li/YBtPhwA7T3QBX4cPcSBfchB/xw9xIF+wIH9+w1++w1BfuvBPhw9vxwBg4li/YBtfhwA/ia90AV9wMH++zh9+zhBfcCB/xw+xIF+yEH+HD7vhX2/HAgBw42pfD3SvAB93j3CwO098kV90/7C/cL9wv3T/D7T/cM+wv7DPtPBvwUBPiB8PyBBg77G+DkkeOv45HkErTt94zsE6z38PfEFeC+0fQfKgZXfmhqb3yho3YeE5ymc2+hXBs3VkQiH+0GwJmtqqaZeHSfHhOsb6Soc7wb+28E4L7S9B8qBld+aGprfainch4TbKFzcJpiGzdWRSIf7QbAma2qo5t7dJ4eE6xupKZwwBsO+xv3gueR5xK07feM7BOw9/D3ghXgvtT3AR8qBlR+aGpxfJ+ieB4TcKpyb6NZGzdWQvsBH+0GwpmuqqmZcnCjHhOwcKKoeLcbDvtP93vlAffq5QP36s0V5feT/Bsx98EGDvuM+BP3tgG0994DtPgTFe8GzPdVzPtVBe8GJ/e2BfsWBg73V+Pu9zvvKO4hHfiR9xgTuPd24xXd2LLUtx9Bt9ll3hvx2tvyHxPY8jzbJR42ikBkXkEIE7jTXkC1OBskOTskJN078h+p7hVcaLC6uq6wuh+6irltqVYIVW5bbV0b9+4WXFypwW0fE9iqwbqpuYoIuYquZ10aE7hdaGZdih4O+377Kvb5GvYBlPgtA937KhXmicbAleTJ+MMYj66gobCJtIkYlvZBjDCNUFaBMhlN/MOHZ3Z3aowZXo2BIAUOiYvr+Jnsi3cSovj5E7CiFvj56wb7hfj6BfsVBvuH/PoF8hYT0Pdg+Jn3YPyZBQ6f+xV2+YP3AQH3HfcR9zX3EAP3HfsqFfcR+YP3Nf2D9xD5g/cA9wH9CPsB9wIGDvsFIwoBp/iAA6cW+ID3Bfv8Bvc394b7N/eGBff89wX8gPsFBvc2+4b7NvuGBQ6Q+xV2+Yb1AaH5AwP3D/sqFfc/Bvcm+YYF92H1+8YG+xj9RUr3zwX7DAYOWn/w967yErX3GfeT9x8h9RPo961/FdOHwZ7Bu/ct9x+4+KD8TrZoKRj3Pnr3AfsFjfsyccVSsUeS+yqYIDN++yp++yPw+wL3K4MIE/CN8BVDk17ElOOR3cPB04TJhr1jlEuF+wBORDuRCA5e+xV29yrnMeUS3vcV92H3FPsO9w4T2N77KhX3FQYTtPdkB2mZsHW1G7+5q72fHxPUNwcT2PcO+Kb7FPu/BjNiWERMbbnoHve/+xUHDvcvi9pFdveq257b90/amncStOr3D+n3Aun3D+oTV8Df1h0Tm8DtRtY0NUVAKR4TV8DhChObwMSisLGyomZSHhNXwFJ0Z2QeE7vApQoO+HuL2kV296rbPNqe2/dP2pp3ErTq9w/p9wLp9w/qpOb3EeUTldj6TRbizdbt7UnWNDRJQCkpzUDiHxNLgP351h0TBYDtRtY0NUVAKR4TS4DhChMFgMSisLGyomZSHhNLgFJ0Z2QeE6BgpQoTkBj34hZlc7DExKOwsbKjZlJSc2ZkHw67Ix0B97j3EQP5LfeYFfcfB/vL98v7y/vKBfsfB/eN940F/JL3EfiPBw5v+PrtAf8B6oAA/wBigAAD+H/3QRXt7gX4Swf8S4wpKQX39Ab7/fv94zP3+/f7BQ73HPe39xEBtvlaA/fDthX3Hwb3y/fL+8r3ywX7Hwb3jfuNBfyS+xH4jwYOcI3u+Et3AfiB/wBhgAADv/AV7igF+EsGjPhLKe4F+/UH+/33/TMz9/v7+wUOuyMdAfe49xED+S34VhX7jPuLBfiP+xH8kgf7jfeNBfsfB/fL+8r3y/fLBQ5wje74S3cB/wArgAD/AGGAAAP42vAV+/MG9/v3+zPj+/37/QX39QcpKIz8SwX4SwYO9xz3t/cRAbf5WgP4grYV+4v3jAX4j/cR/JIG9433jVwdDm/4+u0Bt/8AYoAAA/ci90EVjPfz9/v7++Pj+/33/QX39AYp7fxLigX8SwcO+Cv3t/cRAbb6aQP40rYV7h33jfuNBfzZBveN941cHfcfBvuL94wF+NMGDrv7S/poAfe49xEDt/efFfsfB/fL+8v3y/fKBfcfB/uN+40F+NgH9437jQX3Hwf7y/fK+8v7ywX7Hwf3jPeLBfzSBw5/9z/s5egBtvjHA/fO908V02LdtsLk3lsYdfeM+3Qj21xsWWx3cJsZc5mHpoenha2DrVynPrf7CUh2+wkI7gabvK6gp3ylfIpukmqTZpptsXUIDpL3w+73JXcBtuAD+AT3RxX3EPeV7vuW9xAH+2P7QgX7CftXFeD4GjYGDpL3w+73JXcB+LDgA/fA90cV92T3Qftj90IF+xD7lij3lQf32fsmFfgaNvwaBw6J94Dt94buAfiY7wP4F/eAFfcU8Or3EPcQJuv7FB/7uyj3ugbUxFZHSFJVQh/7PAb3C/cLBfsTBvs7+zz3Pfs8BfcSBvsK9wsFDon3gO33hu4Btu8D96T3gBX3Owb7CvsLBfcSBvc99zz7O/c8BfsTBvcL+wsF+zwGQlLBzs/EwNQf97ru+7sG+xQmK/sQ+xDwLPcUHw6MoHb4HvEB+JnxA/iZFvH4hPv79xYG+237Sfdu+0kF9xb3lAcOjKB2+B7xAbbxA/clFvge95T7Fgf3bvdJ+233SQX7Fvv7/IQHDoz3avH4HncBtvED9yX5WhUl/IT3+/sWBvdt90n7bvdJBfsW+5QHDo6gdvj37QH4Iu0D+FMW90H3ZAX7EPiJ/Fkp9/f8J/sQBg6M92rx+B53AfiZ8QP4mflaFfwe+5T3Fgf7bvtJ9237SQX3Fvf7+IQHDvddi+73dOIB94ft90rtA/eHFvgO99f3bQb8Kvgr/C38KwX3cAbt+3QV98snB/dT91L3UftSBSn7ywYO+1vmCvhoFftP93b7UPt1BfcS/Ff3EPhWBg5X+Vx3Abf4nQP4rvg4Fab3uPu4ceQx+9L70uIz99P30gUO8fe89xD3EncBtvk4A/iB9z8V93b3T/t191AF+xL8V/sQ+FYHDleN+J4Bt/ieA/emqRX3uG9x97gxMvvS99MzM/fS+9IFDvtb5gr3iBX7EfhW+xD8V/sSBvdQ+3UFDleN+J4BtvieA/fjqBUz4/fS99Mz4/vS+9Mx5HH7uAUO8fe+9xABtvk4A/eh90EV9xH4VvcQ/Ff3Egf7dftQBQ5X+Vt3Abf4nQPS+DcV4+P30/vS4uP70vfS5OX7uKUFDvdb96z3EQG2+ZoD96D3LxX3EffY+xEH93X3T/t291AF+xH71vcRB/t2+1AFDvtbaPmaAfc99xED+Df3UhX7EffY9xEG+0/3dftQ+3YF9xH71vsRBvdQ+3YFDvdIlHb5dncBtvmGA/g4fxX3afc49y/3afdr+zj3L/tp+2n7OPsv+2v7afc4+y/3aR8O90h/8vio8gG29fiz9AP4OH8V92n3OPcv92n3a/s49y/7aftp+zj7L/tr+2n3OPsv92kf8gT7LfsK9wP3Lvcw9wr3A/ct9y73CvsD+zD7LvsK+wP7Lh8O90iQ3fhYd/cg3W93p3cStt344t0TzvkK90AVxFGcnJuemaAZRrmBen99fn0Z/DD7BhW30HqWfZd9mBlST516nnygfhkg7xXOvIGZgZuEnRk+apV1mHWZdxn3ifstFZnceI95kHiRGW0/ooKjhaSGGfvF97QV3JwFhp6JnZ8aOYoFco5ykHQe+AX7YhU5B6Sjjo+jH3zbBYh3eYl3G/wG9/QV3HyOnpGek5wZPqqBdYRzh3IZ+Hf73hWqP6KVoZafmRlez3yAeoN4gxn8P/hmFdBdlpyXmZmZGVDFenp7eH12GfTyFblHBRMUmpack52UbNYYE850gXWAd30I+Hf8LxXWbJWhkqOPpBk7moh4hXmEeRkTIvvv+GcVmzsFjp+djZ4b3Qdyc4iHcx/4BPv3Fd2MBaSIpIaiHjt6BY94jXl3GhNK+1D3nhWo13SUc5FykBl+Op6HnoadhRn3OPsuFdasgaF+oX2fGUhaln2We5J5GUnnFcLHeZx4mnaYGWBGm4Caf5p+GQ40i+pBdvi56hK2+HwTcPdoFvcqBvc999b7PffWBfsqBvs9+9YF9xAW9wz3d/cM+3cFE7D7DPt3BQ73YaB2+VrQCg73LXQd2/la9h0O92EjHeEdDvctdB2i+VraCg73YYv3APju0Ar7ffzuFfd9+DL3f/wyBQ73LXQd2+v2Hev8whX4Jwf4I/tdBQ73YaB2+O73AOEd/Rf7ABX4aAb7f/wyBQ73LXQd+RHr2gr4+vteFfwj9174I/ddBQ7459cBtPfCA/dV+OcvHfjt9wYBtCkKA7T47SQdvgr45/chAbT3UgP3F/jnJR1lCvjn9yEBtPf0A7T450cKvAqoCvji9yYBtPfQA7T5dCEK+OfXAbT3wgP3VfjnLx3408fYxwG0yNjIA/ch+NM+CooK3h344/cAAbT3DAO0+OPlHfsg9gHG9wwDtPt7Tgr7IPYBxvcMA7T7e04KrR2aCve53AH3APgUA/cA97kV+BTc/BQGDvjr9xYBtCwdA/cA+OspHfjr9xUBtPcZA/b46ysd+5D47fcGAbQpCgO0+O0kHfxRvgr8Gfjn9yEBtPdSA/cX+OclHfwZZQr7d/jn9yEBtPf0A7T450cK+5uoCvub+OL3JgG099ADtPl0IQr7qPjn1wG098ID91X45y8d/BD408fYxwG0yNjIA/ch+NM+CvuJigr7td4d++CtHfwLmgr7m/jr9xYBtCwdA/cA+OspHfxS+Ov3FQG09xkD9vjrKx38Q7wK/ChlCvxr+FT3mgG09wADw/hUFdoGmfdJBdz7ADoHDvc0f/l2AbT5dgP4Ln8/Cg73SHXd+OfcAbTd+OfcAzUdDnub+KqX9zibBvs2lwd/l/iml/c8mwgeoDf/DAmLDAv3BQr3GgvwlwwM9xSRDA35KRW+EwDNAgABAA4AIgApADEANwBEAFEAWABfAGUAawB0AIAAgwCNAJUAnQC3AMEAyQDZAOYA7QEWARwBIwEtATQBOQE/AWUBiAGgAawBswG8AegCAQIYAh8CIgI3AkQCTwJTAl0CYgJsAnYCfAKDArYC6gLvAw4DKQMxA0oDWgNiA2oDcgN5A38DhgOsA7gDwAPXA+YD7wP5BAIECgQRBBkEIQQoBDkEQARIBEsEUQRVBFoEZQRpBHEEdgR/BIgEkwSbBKQEqwSyBLoE2AT7BWoFygY0BpgGvAcZByEHRwd2B4QHlQe4B8wH8wgSCB0IPwh9CJIIzwjZCOYI/gkZCVUJZQl7CYgJkAmVCakJrwm4CeQKDgoUCioKQgpOCnUKjQqZCq4KzwrYCvoLGQs6Cz8LTAtrC3ILgAucC6ILpguxC78LyQvXC+0L+QwADAgMGgwiDCcMLQxADEsMVgxoDGsMfAyLDJwMrQy+DMUM1QzkDO0M/A0LDRoNKQ0uDTwNSg1YDV4Naw10DYENjg2bDagNtQ3ADcwN2A3kDfAN+w4GDhHLMgXoBi33JgX7FAYOFen7JgX3FAbp9yYFLgZLMkrkBQ4nHfiY9wULi/cF+Hj3BQt/8/fy8wtdh359dRt9gJCaeR8Lt42cmZ8bm5WFfJ0fC3ejn4GpGw6fcnWWaxsL9xHY9xALoHb4qncLzrK+4I4fSAYL9xr7E9c/9xw21xIL3woOLtVW9wQepbEdC/L3wPH7wAULf+g27Pf27gtJlrZ2xRucoI2Nkx/oegd3gZOoH/dWBzcKC3/zL+f38ucv8wv4cvlaBSoGC34dyArdu0r7AvsDW0s5Hwv3FP//hYAA/wB6gAALe/cF+Pp3C/ciPdv7LPsZNUv7BHYe9xeFBcGXrajKG86uZEAf+0VoBfsJdFJaLxoL9xsDeB0L1vcM1lDVC9EW9xT4qvsUBgugdvjp9wUL95t/FQuL7vfk7gsVw7a2w8NgtVNTX2FTU7dgwx/HBHR7m6Khm5uioZt7dXR7e3UfDhX7YPs59zn3Yfdf9zn3Ofdg92D3Ofs5+1/7Yfs5+zn7YB8LM2NcRk1us+Ue98z7FPvsB/sTzkD3AR4LFd/JutO8bbFYnh8L2sKtzqYfCxb3Fvla+xYGCz8Hwm1TrD4b+ydB+xD7L/sx1vsO9ycfsfMVNGPd6Ouz2uLlrT8oLGo7MB8L90oW9xgG9Pf69fv6BfcYBvc1+KoF+xcGCyP8GfsA+BkF+wMG+wD8GST4GQX7FwYLdQrv+yEgHYcdDq9oBcSXenNzeH1sa3qYpn8fTnEFC/cS//+pgAD/AFaAAAv4BHsV7uG81a8fC3voCgv7bfcN+y33YB4LFdkGQh0V2gbC95oFIwYOi/cl+xB2+Kp3C1cH7YwFC/cW96j3Ggv3RAYshUtCIhv7Hk73Afco9yTJ9wf3G/G7VDibH/cbkgX3JW0v7vtIG/tk+w/7M/tpHwv3APsqFeYG2bOnzaIf92X44gX7GQb7E/wd+xv4HQX7GAb3UvyVBbAGfWYFcoF9gWgbRwYLthaLHQvRFvcU98IG5ba90NCjWTEe+8L3FPfrB/cMS977Ch4L92oW9yQG9xD4evcQ/HoF9yUG91H5WgX7HQYLzgr3IdhQxgsV1wb3C7i39wIf+Kb7FPyiB112fmUeVgYLFeO8ZD9BW2QyH/sf93gGDvcN+Kr7FAYLdvlad+D3IQv8FxXY+BgGC/cU92H3FAsT6NtDCgv3FPsE9wQL9wYdE7z3cX8VE7pBHRN6jzQFE3z3AvfYBjcKE7wu1Vb3Ax48HQsBwfcZ91v3GQN2HQsBtvcbA30dC9DIrb+kH0cHQF9pPEZuorR+HvsYggUL+Of3IQG091IDtPjndQoOsaimsrFupWULoHb5Wnfm9wYSC/t4Fc/Br80fC4v3Bfd49wULvW2xSZAeC3/zL+f38vMLe89sdvdGwwsiHfewqx0L28bC4d9VwkQfE/S4ChPsxh0iHfeosh0LNgrf9yF5HQsVaR33xHvDHQvQHR8LzwqZHQsV7wbl9yEF+xQGC/5BTgrXCvla+xYGDsYK95QLdvhO5y/z1goL9xpk9xZf9xoL+yv3dUHV+GB3Egv3D+bL86gfC/uuByG8XPUeC3NXBu2MBQ73GfsX9xQL9xb32fcaAwv38XsV9zT13PcW9UvR+1O0H6QKvwr7KJf2KPdFGwu7ChPvQFodE/dA+HsHE/cg+xEGE+8gTh0T74BkChPvQFYdC3v3BPcZ8fey9wESxPcY9573HvsW9xYT+PfGexX3YN73MfeI92sz9xL7UPsuISj7MPsl7Cr3IB8T9NXFp8GwH/ssgldMKxtQZ6K0fB/7E4MFE/giqdpM9xQbl/fvFT1YweLivcXd371QNDNTVzofDs0K96D3GST3GRO62xb3wgb3OujM9xYfE9rsTc37A5QeE9zmlL/E4Br3GS/G+0Ee+54GE7r3vPzsFfs691z3OgbdvWhJSlhpOh8TvGn3whX7GPdQ9xgG47ttS05YajYfDvsVdvce8/fy5y/zEtH3EPsQ9xT3j/cZE9bR+yoV9xT3cwZXqMZqzxv3LNf3Efcu9y5A9xH7LB8T2kVQa1BsHxPqidoFE+b7Dwb3kvxOFTxcxvcIHxPW9wi7xtnZukr7Ah4T5vsCXEo9Hg4nHfdR9wX3avcFAfjJ9xsD+AF7FfdQ9yf3Lfdu93b7Ivcl+1X7IvsKNfsdYB/3IIMF2avHs9Qb9t4x+xCTH/yeBoxWBfuGlfcj+wz3PBuN9wUVKUnR9wt4H/gNBvsLdkRFJRsO+yD2wXkKvvcMrfcUE9dWChPbUh0T64jnBRPn+wgG9zX9kU4KexUT+vc69wLb9xvlVcwuox8T/Nuktr/VGvcNMNf7NPssLz77CH0e9xmEBb+TsK7bG9qxZ09HV3FHH04kyAYT+uLDZT8/TGo9Plas14Qf+xmFBRP8+xeS6Db3PhsOMB2+9yFUHQv46SwKtDEdE0z3nvjwFRMsKwoTTCUKExwoChOMKh0THCYKE0wnCov3Bfde2/de9wUB9zSACrb3zxX3CfvP2R37z/sJBvf1+64VIfde9xXb+xX3XssKAbT3Gcr3Gb73GQNMHQtbHRP4ax0T9EcdS4/JWdobDvgSexVfHfd5+xP3I/to+2f7FPsj+3n7efcU+yH3Zx/3BQQLMx3T9wYuHVYpChP6Rh0T9tjTJB0SqvVG9xn7F85I9xQT8dEWE/ik0QoT8oMdE/GrtAWK+Kr7FAYT9AsVE8qAKwoT0oAlChPGQCgKE+FAKh0TxUAmChPSQCcKAbT3Gcr3GQOVCgtTHRO5APeKfxUTuIBCChN4gI0yBRN5AEgdE7kAQAoTtgALoHb3lPcF93j3BQHbUgoD2xb3FveU9yUG9zru4fci9yEo4Ps6H/unBveh++kV+x/3ePcfBuS7ZEE/WmQzHw73xH8V9x7r3PcUmh/7GJEFhh2WHQugdqF2+Vl3Lh34dvcWE7jbFvcW+H4GE3j3R/x9BfcQBvdH+H0FE7j8fvcW+Vr7Qwf7WPy6+1j4ugX7QwYONh0BofijA1QKDjYd5vcGwB33AfkkLQqqCiNS5Pc89zzE5vPzxDD7PPs8UjIjHw77a973LXYBtPUD9yf7axWDHau0LJZsZJcdHg7MA/e793AV9yD3BfcG9yD3H/sF9wX7IPsg+wT7Bfsf+yD3BPsG9yAfzAQlNeDz8uHf8fLgNyQjNjYkHwugdvhO8/c4dwHRXgoDvh0OKgoBuvirA7oW5Ar3Hgb7Uvej1R0FDicd+Pl3AcJ1HQNyCg4Bovi6A7gdC/MdrQoL+yD2rPcF+Ol3Ih2/9wzxHfc4dgqgXArBHQvBCvsUBveDwAr7EqhpocUawrmx1+S+Vj6UHvcXkQX3HXwt7vs9G/s0KzX7EPsIzVn3RGMfC/g6/FEV4dHW7e1F1jU0RkApKdBA4h/aBGR0sMTEoq+ysaJnUlJ0ZmUfC/cVA6wKC6+nmqSdH0WDbmNhG3B5mKSDH0GEBQv44igdtPfQE6C0+OIV6QYTYMzkBROgIAoB2PcW99z3FgPPHQt7FfdK9wX3Ivd493n7Bfcj+0r7SvsG+yP7eft49wb7IvdKH/cFBAsT6PekFvcW96wG94z4Qk8d9438QgUT9Av3Evi/FWg/KNe3CgsT6OQdE/BKYWxDdh+I8gUT6PsMBgsW9xgG94zY90T3NPdIHvX8mvsF+BMH+yP7PDD7ZftwGg4iHbb3GQNGHQv7FPsTBjJZVTlLY8HjHvcU+xT7LAf7HNs09xLRxa7BqR4LFvhH9fsk+PAGE+gkBi1qbTYeTigGE/D3LPwR+zUGDvee9/cF+zkG+4j72wX32/sW+9oH+4f32gX7Ogb3nfv3C9IK95QL+z/g+wD3HR6x89odCwHE+GcDxBb4Z+771Ab3zPfdBfX8VCj3vQf7yPvdBQshHfeNuwoL/Dn3Ffg59xnu+xnKCgtob3xzeR/IkqS7uRunnH5ykx/VkgXGfFewURsL91sW1x0LFYsdDvcV+xT3FPsR9xEL+FT3mgHC9xoDwvhUTwqgXAoiHQPbQwoL+O33BgG09xkDtPjtLQr3JWmnalQaTlpsOChVvud+HvsYgwUL/EwV+wP3KvcD9wod6R37DPdWCwb3jveOXB0OFRPo2QbH8AXsBxPk+wwgrgYOdvg89wLzHQsiHfEdC/enBtIKC/sW/On7XPjp+xf86ftd+On7Fgs4XMv3A/cCuszeC/cG7kAGXnabvR8Lpwe0naG1HtvuIwb7BVdQKx8L7x0OBfsaBvse/CD7HvggBfsYBguL9wL3XMRS8fdQ9wIuHQv/ADOAAP//zIAA/wCTgAASC/sXkwVcfGRwUhs/Wrrphh8LdwGi+ccDohb5xwb8LvlaBQsGdW+XHR4L9zru4Pch9yIo4fs6H/slC/cbJ/cZ94H3GSf3GhPyCyQKuygdtPcZCwbCblCsQRv7GzT7APs/CxLR/wB1gAD//4qAAPcUC6B2+Vp3Adv3FgPbFvcWC0wV+0P3s4v3z/dD97IIC+wKLh0LA/lxihX5XQf9Wvv4BQsG90P7sov7z/tD+7MIC8/3rM8BuNT3PNMD914L+OnrCgYLJx33c/L3Anfv9wUSCxX3GfcG+xkGC/ijFROlQM6yvuCOHwsp0UDhHtsEZXSvxB8L+xV2+fB3Adv3EQPbC+73SHcB93j3DAP3eAv3IQb3FPdU9xT7VAULBqmdgHZ0eX9tHw6d+TgB9z33EAP4NgvR9xT3NPcP9zP3FAv3BT92953w94v3BQt79wH3qe/3JPcEEgugdvci9wX4W3cBC/ds9wX8xfsF92sL+xV29yr3BfjpdwsAAAEAAgAOAAAAAAAAAbAAAgBFAAIADAABAA8AIgABACUAKwABAC0ALQABAC8ARAABAEYASgABAEwAVAABAFgAYgABAGQAcwABAHUAeQABAHsAhAABAIYAqQABAKoAqwACAKwAtwABALkAwQABAMMAzQABAM4AzgAEAM8BAQABAQUBDgABARABHwABASEBJQABAScBMAABATIBYAABAWEBZAACAWcBZwABAWoBawABAW0BbQABAW8BcQABAXQBdwABAXoBewABAX4BgQABAY4BjgABAZEBkwABAZUBlgABAZoBmgABAZ0BoAABAaQBpAABAaYBqQABAawBrQABAa8BrwABAbEBswABAbYBugABAb4BvgABAcEBwQABAcMBxAABAdEB0QABAdQB2gABAd0B3QABAeAB4AABAeYB6wABAfIB9gAEAfgB+QAEAhwCJQACAjsCPQACAj4CPgAEAkwCTAAEAk8CVgABAlcCVwAEAnQCdAABAn4CgQACAowCjQABApQClAABApgCmgABAqECoQABAqUCpQABAqgCqQAEArgCuAABAtoC3AABAuYC+gADAAEAAgAAAAwAAAAcAAIAAgLnAusAAALtAvMABQACAAEC9AL3AAAAAAABAAAACgBuALwAAkRGTFQADmxhdG4AEgBKAAAAOgAJQVpFIABGQ1JUIABGS0FaIABGTUFIIABGTU9MIABGTkxEIABGUk9NIABGVEFUIABGVFJLIABGAAD//wADAAEAAwAEAAD//wADAAAAAgAEAAVrZXJuACBrZXJuACBtYXJrAChtYXJrAChta21rAEgAAAACAAAAAQAAAA4AAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPAAAAAQAQABEAJAJUGLQZphnKG8Qb5hw4HFYkeCT6Ju4ncCioKOQpNil4AAIACAACAAoAKgABABAABAAAAAMAGgAaABoAAQADAj4CPwJOAAEB8wAGAAIAqgAEAAAAwADuAAcACwAA//cAAAAAAAAAAAAAAAAAAAAAAAAAAP/0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/4AAAAAAAAAAAAAAAAAAAAAAAA//kAAP/cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/0//P/6f/i/+oAAAAAAAAAAP/3AAD/8QAA/+IAAP/5//r//gAAAAAAAAAA/+wAAAAAAAAAAAAAAAAAAQAJAfMB9AH2AfgB+QI+Aj8CTgJcAAIABwHzAfMABAH0AfQAAwH2AfYAAQH4AfgAAgI+Aj8ABgJOAk4ABgJcAlwABQACAC4AAgANAAMADwAUAAQAFwAYAAQAIwAjAAQAJQAsAAQATABVAAQAWABYAAQAXQBiAAQAZABoAAUAlQCaAAQAmwCbAAMAnACcAAQAnwCfAAQAogCiAAQAqQCpAAQAqgCqAAMBZwFnAAMBbgFuAAMBcwFzAAgBewF7AAQBfgF+AAQBfwF/AAUBggGCAAQBjgGQAAQBlAGUAAUBlwGXAAUBmgGaAAQBpQGlAAQBpwGnAAQB7AHsAAMB7gHuAAMB8AHwAAIB8QHxAAQB8wHzAAkB9AH0AAgB9QH1AAYB9gH2AAoB9wH3AAQB+AH4AAUB+QH5AAICDwIPAAQCTAJMAAMCVwJXAAcCXQJdAAECiQKJAAQCzwLPAAMAAgAIAAIACgXUAAEAWgAEAAAAKAOsAK4DrAOsA6wDrAOsA6wDrAOsA6wDrAC4A6wA0gHQAdAB0AHQAdAB1gOsA6wDsgSwBbIFsgWyBbgFvgW+Bb4FvgW+BcQFxAXEBcQFxAXEAAEAKAANAA4AGQAaABsAHAAdAB4AHwAgACEAIgAkAFUAWQBkAGUAZgBnAGgAewCdAJ4A6QEFAQYBBwEIAYkBrAGtAa4BrwHCAcMBxAHeAeIB4wHrAAIAGf/zARD/7AAGAM7/9gDl/+wA5//sAOj/7AFh//YCfP/2AD8Auf/uALr/7gC7/+4AvP/uAL3/7gC+/+4Av//uAMD/7gDB/+4Awv/uAMP/7gDE/+4Axf/uAMb/7gDH/+4AyP/uAMn/7gDK/+4Ay//uAMz/7gDN/+4Az//uAND/7gDR/+4A0v/uANP/7gDU/+4A1f/uANb/7gD4/+4A+f/uAPr/7gD7/+4A/P/uAP3/7gD+/+4A///uAQD/7gEB/+4BBP/uAQn/7gEK/+4BC//uAQz/7gEN/+4BDv/uAT//7gFA/+4BQf/uAUL/7gFD/+4BRP/uAUX/7gFG/+4BR//uAUj/7gFJ/+4BUP/uAVH/7gFS/+4BU//uAVr/7gFg/+4AAQAC/6AAdQCs/7kArf+5AK7/uQCv/7kAsP+5ALH/uQCy/7kAs/+5ALT/uQC1/7kAtv+5ALf/uQC5/64Auv+uALv/rgC8/64Avf+uAL7/rgC//64AwP+uAMH/rgDC/64Aw/+uAMT/rgDF/64Axv+uAMf/rgDI/64Ayf+uAMr/rgDL/64AzP+uAM3/rgDP/64A0P+uANH/rgDS/64A0/+uANT/rgDV/64A1v+uAOn/6ADq/+gA6//oAPH/6ADy/+gA8//oAPT/6AD1/+gA9v/oAPf/6AD4/64A+f+uAPr/rgD7/64A/P+uAP3/rgD+/64A//+uAQD/rgEB/64BAv/oAQP/6AEE/64BBf/oAQb/6AEH/+gBCP/oAQn/rgEK/64BC/+uAQz/rgEN/64BDv+uARX/4gEW/+IBF//iARj/4gEZ/+IBGv/iARv/4gEc/+IBHf/iAR7/4gEf/+IBM//oATT/uQE1/7kBNv+5ATf/uQE4/7kBOf+5ATr/uQE7/7kBPP+5AT3/uQE+/7kBP/+uAUD/rgFB/64BQv+uAUP/rgFE/64BRf+uAUb/rgFH/64BSP+uAUn/rgFP/7kBUP+uAVH/rgFS/64BU/+uAVr/rgFb/+IBX/+5AWD/rgABAEb/+QA/ALn/wAC6/8AAu//AALz/wAC9/8AAvv/AAL//wADA/8AAwf/AAML/wADD/8AAxP/AAMX/wADG/8AAx//AAMj/wADJ/8AAyv/AAMv/wADM/8AAzf/AAM//wADQ/8AA0f/AANL/wADT/8AA1P/AANX/wADW/8AA+P/AAPn/wAD6/8AA+//AAPz/wAD9/8AA/v/AAP//wAEA/8ABAf/AAQT/wAEJ/8ABCv/AAQv/wAEM/8ABDf/AAQ7/wAE//8ABQP/AAUH/wAFC/8ABQ//AAUT/wAFF/8ABRv/AAUf/wAFI/8ABSf/AAVD/wAFR/8ABUv/AAVP/wAFa/8ABYP/AAEAAuf/eALr/3gC7/94AvP/eAL3/3gC+/94Av//eAMD/3gDB/94Awv/eAMP/3gDE/94Axf/eAMb/3gDH/94AyP/eAMn/3gDK/94Ay//eAMz/3gDN/94Az//eAND/3gDR/94A0v/eANP/3gDU/94A1f/eANb/3gD4/94A+f/eAPr/3gD7/94A/P/eAP3/3gD+/94A///eAQD/3gEB/94BBP/eAQn/3gEK/94BC//eAQz/3gEN/94BDv/eATT/5wE//94BQP/eAUH/3gFC/94BQ//eAUT/3gFF/94BRv/eAUf/3gFI/94BSf/eAVD/3gFR/94BUv/eAVP/3gFa/94BYP/eAAEBNP/nAAEBzAAAAAEBu/+wAAEBu/+4AAIHgAAEAAAIdAxiABwAIgAA/+//4P/Z/6D/8//z/6YACv+2/9X/8P/0//H/1f/A/9n/6v/OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//b/7AAAAAD/4//6AAD/7AAAAAAAAAAAAAAAAP/zAAD/5//2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/5AAAAAP/xAAAAAAAAAAAAAAAA//UAAAAAAAAAAAAAAAAAAP/kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//YAAAAAAAD/rQAA//YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/2AAAAAAAAAAAAAAAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAP/c/5wAAAAA/7AAAP+IAAAAAAAA/+D/xP/iAAD/6//YABEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/8wAAAAD/7AAAAAD/1QAA//b/9gAA/+8AAAAA/98AAAAA//H/2f/sAAD/+v/Y/+r/7v/s//QAAAAAAAAAAAAAAAAAAAAA/7AAAAAAAAAAAAAA/+8AAAAAAAD/+f/pAAAAAAAA//kAAP+xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//MAAP/x//gAAAAA/+IAAAAAAAAAAAAA//IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP9+/+wADQAAAAAAEf+6AAD/7AAA/+z/twAAAAAAAP/h/+v/ygAA/+wAAAAAAAAAAP+lAAD/6/+c/+X/rgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//H/sP/VAAAAAAAAAAf/yQAAAAAAAP/w/8IAAP/0AAD/6gAA/6YAAAAAAAAAAAAAAAD/tgAA/+8AAAAAAAAAAAAAAAD/7gAA/9gAAAAAAAAAAP/o//IAAAAA/+//xgAAAAAAAAAA/+IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/7AAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/1AAAAAAAAAAAAAAAAAAAAAP/z//0AAP/fAAD/7gAAAAD/9gAAAAAAAP/pAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/0AAAAAD/3gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+wAAAAA/+8AAP/iAAAAAAAAAAAAAP/W/9YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//v/oAAD/9v/8//j/6f/UAAD/+P/gAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/2AAAAAD/7P/0AAD/8f/1/+//8wAA/+IAAP/z/+wAAP/4/+gAAP/2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP+6AAAAAP/O//z/6P/s//v/+P/5/9j/5QAA//T/5P/2/+L/xQAAAAD/8AAAAAAAAAAA/+MAAAAA//UAAAAAAAAAAAAAAAAAAAAAAAD/6QAA//YAAP/p/+sAAP/0AAAAAAAA/+L/2AAAAAAAAP/xAAD/ygAAAAD/sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAX/9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdAAAAAAAAAAAAAAAA/+YAAAAAAAAAAAAAAAAAAAAAAAAAAP/zAAAAAP/zAAD/8wAAAAAAAAAA//z/6wAAAAD/9QAAAAAAAAAA//AAAAAA//sAAAAAAAAAAP/x//MAAAAAAAD/7AAAAAAAAAAA/+UAAAAAAAAAAAAA/87/2wAAAAAAAAAAAAD/ygAAAAD/yAAAAAAAAAAAAAAAAAAA//b/7AAAAAAAAP/ZAAD/0f/T/+3/xQAA/+AAAP/sAAAAAP/2AAAAAAAA/+UAAAAAAAAAAAAAAAAAAAAA/7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/zAAAAAAAAAAAAAAAA//wAAAAAAAD/9wAAAAAAAAAAAAAAAAAA//AAAAAA//MAAAAA//wAAAAAAAD/+wAAAAAAAAAA/+8AAAAAAAD/+gAA//kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAKAACABUAAAAZAFYAFABYAGIAUgBkAIQAXQCGAIsAfgCVAKYAhACpAKkAlgCsAL8AlwDCAOUAqwDnAO0AzwDvAQ4A1gEQATAA9gEyAUsBFwFNAWEBMQFkAWQBRgFnAWoBRwFsAXYBSwF4AYQBVgGGAYYBYwGJAZIBZAGVAZ0BbgGfAZ8BdwGhAaEBeAGkAacBeQGpAbkBfQG7AcoBjgHNAc0BngHRAdoBnwHcAekBqQHrAewBtwHuAe4BuQHwAfIBugH6AfoBvQIPAg8BvgJMAk0BvwJ8AnwBwQKGAoYBwgKJAokBwwKhAqEBxALPAs8BxQACAKcADQANAAMADgAOAAEADwAUAAIAFQAVAAcAGQAiAAMAIwAjAAcAJAAkAAQAJQAsAAUALQAwAA8AMQAxAAsAMgA5AA8AOgA8AAsAPQA/AA0AQABEAAYARQBLAA8ATABUAAcAVQBVAAMAVgBWAAgAWABYAAcAWQBcAAkAXQBiAAcAZABoAAoAaQBzAAsAdAB5AAwAegB6AA0AewCAAAwAgQCEAA4AhgCGAAYAhwCHAA8AiACLAAkAlQCaAAUAnACcAAIAnQCeAAMAnwCfAAUAoAChAA8AogCiAAcAowCjAAsApAClAAwApgCmAA4AqQCpAAUArAC2ABIAtwC+ABQAvwC/AA8AwgDNABQAzgDOABEAzwDWABcA1wDZABMA2gDlAA8A5wDoAA8A6QDrABkA7ADtABIA7wDwABIA8QD3ABMA+AEDABQBBAEEABcBBQEIABUBCQEOABQBEAEUABYBFQEfABcBIAElABgBJgEmABkBJwEsABgBLQEwABoBMgEyABIBMwE+ABMBPwFJABcBSgFLAA8BTQFOAA8BTwFPABIBUAFSABQBUwFTABcBVAFZAA8BWgFaABQBWwFbABcBXAFdABgBXgFeABoBXwFfABMBYAFgABcBYQFhABEBZAFkABYBaAFpAAEBagFqAAoBbAFtAAoBbwFxAAMBcgFyAA0BcwFzAAEBdAF1AA8BdgF2AA0BeAF6AA8BewF7AAcBfAF8AA8BfQF9AAgBfgF+AAIBfwF/AAoBgAGBAAwBggGCAAcBgwGDAA0BhAGEABsBhgGGAA8BiQGJAAEBigGKABsBiwGNAAEBjgGOAAcBjwGPAAIBkAGQAAcBkQGSABsBlQGVAAcBlgGWABsBlwGYAAEBmQGZAA0BmgGaAAcBmwGbAAwBnAGdAA0BnwGfAAwBoQGhAA0BpAGkABsBpQGlAAcBpgGmAA8BpwGnAAcBqQGpABIBqgGrABQBrAGvABUBsAGzABQBtAG0ABkBtQG1ABQBtgG4ABcBuQG5ABkBuwG9ABcBvgG+ABQBvwG/ABMBwAHBABQBwgHCABUBwwHEABgBxQHFABQBxgHGABkBxwHKABcBzQHNABcB0QHTABQB1AHVABcB1gHWAA8B1wHXABMB2AHYABQB2QHZABcB2gHaABMB3AHcABkB3QHdABQB3gHeABgB3wHgABkB4QHhAA8B4gHjABgB5AHkABkB5QHlABcB5gHmABMB5wHnAA8B6AHoABQB6QHpABcB6wHrABgB8AHwAAIB8QHxAAcB8gHyABsB+gH6AAcCDwIPAAcCTAJMAAwCfAJ8ABEChgKGABACiQKJAAcCoQKhABsAAgCxAAIADQATAA4ADgAYAA8AFAADABUAFgAYABcAGAADABkAIgAYACMAIwADACQAJAABACUALAADAC0AOQAYADoAPAACAD0AQgABAEMAQwAYAEQARAAWAEUASwAYAEwAVQADAFYAVwAYAFgAWAADAFkAXAAYAF0AYgADAGQAaAAEAGkAcwAFAHQAeQAHAHoAegAXAHsAgAAHAIYAiwAYAJUAmgADAJsAmwATAJwAnAADAJ0AngAYAJ8AnwADAKAAoQAYAKIAogADAKMAowAFAKQApQAHAKkAqQADAKoAqgATAKsAqwAFAKwAtwAIALgAuAAYALkAzQANAM4AzgAKAM8A1gANANcA5AAYAOUA5QAUAOcA6AAUAOkA6wAMAOwA8AALAPEA9wAMAPgBAQANAQIBAwAMAQQBBAANAQUBCAAMAQkBDgANARABFAAPARUBHwARASABJQASASYBJgAVAScBLAASAS0BMAAgATIBMgALATMBMwAMATQBPgAIAT8BSQANAUoBSwAYAU0BTgAYAU8BTwAIAVABUwANAVQBWQAYAVoBWgANAVsBWwARAVwBXQASAV4BXgAgAV8BXwAIAWABYAANAWEBYQAKAWQBZAAPAWUBZgAJAWcBZwATAWgBawAYAWwBbQABAW4BbgATAW8BcQAYAXIBcgAXAXMBcwAQAXQBdwAYAXgBeAAfAXkBegAYAXsBewADAXwBfQAYAX4BfgADAX8BfwAEAYABgQAGAYIBggADAYMBgwAXAYUBigAYAYwBjAACAY0BjQABAY4BkAADAZEBkgABAZQBlAAEAZUBlQABAZcBlwAEAZgBmAABAZkBmQAXAZoBmgADAZsBmwAHAZwBnAAXAZ0BngAYAZ8BnwAHAaEBoQAXAaMBpAAYAaUBpQADAacBpwADAakBqQAIAaoBqgANAasBrwAMAbABswANAbQBtAAVAbUBtQANAbYBuQAMAbsBuwAdAbwBvQAMAb4BvgANAb8BwAAMAcEBwQANAcIBwgAPAcMBxAASAcUBxQANAcYBxgAVAccBxwARAcgBygAMAcwBzQAMAc4BzgAPAc8BzwAdAdAB0AAMAdEB0wANAdQB1QAMAdYB1gAUAdcB1wAYAdgB2AAMAdsB2wAYAdwB3AAVAd0B3QANAd4B3gASAd8B3wAVAeAB4QAYAeIB4wASAeQB5AAVAeUB5QARAeYB5wAYAegB6AANAekB6QAMAesB6wASAewB7AATAe4B7gATAfEB8QADAfMB8wAbAfQB9AAQAfUB9QAeAfcB9wADAfgB+AAEAg8CDwADAj4CPwAaAkUCRQAOAkkCSQAJAkwCTAATAk0CTQAHAk4CTgAaAlQCVAAOAlcCVwAhAl0CXQAZAnwCfAAKAoYChgAcAokCiQADAqECoQABAs8CzwATAAQAAAABAAgAAQ7IAAwAAg7oADYAAQATAk8CUAJRAlICUwJUAlUCVgJ0AowCjQKUApgCmQKaAqECpQLaAtsAEwBOAAAAVAAAAFoAAABgAAAAZgBsAHIAAAB4AH4AhAAADxIAAACKAAAAkAAAAJYAnAs4Cz4AogAACYgJggoMChIAqAAAAK4AAACuAAAAAQCPAhIAAQCTAhIAAQEvAhIAAQBvAhIAAQBcAhIAAQBvABIAAQEcAhIAAQESAhIAAQEtACIAAQBrAhIAAQG7AhIAAQC+AhIAAQFkAsYAAQFjAAAAAQETAhIAAQB8AhIAAQGkAhIABAAAAAEACAABD0oADAABD1gAEgABAAECuAABAAQAAQIcAAAABAAAAAEACAABDbIADAACDdIAkAABAEABZwFqAWsBbQFvAXABcQF0AXUBdgF3AXoBewF+AX8BgAGBAY4BkQGSAZMBlQGWAZoBnQGeAZ8BoAGkAaYBpwGoAakBrAGtAa8BsQGyAbMBtgG3AbgBuQG6Ab4BwQHDAcQB0QHUAdUB1gHXAdgB2QHaAd0B4AHmAecB6AHpAeoB6wBADfAAAAECAAABAgAAAQgAAAhmCGwIZghsCGYIbAEgASYBIAEmDgwAAA4MAAAN8AAACIQIighgCMYIKggkASwAAAEsAAAIGAgSCHgIfgh4CH4HygAAAQ4BFA3wARoIhAiKDgwAAA3wAAAInAiiCJwIogh4CH4BIAEmCIQIigEsAAAJ7AmkATIAAAEyAAABOAAACaoJzgmqCc4JqgnOAVwAAAFcAAABXAAAAVYAAAFWAAAJyAnOCcgJzgnmAAAJ5gAACVAJSgm2AAAJtgAACcIAAAjwAAABPgFEAUoBUAjwAAAJyAnOAVYAAAkCAAAJjAl6COQI6gFcAAAJyAnOCeYAAAABAU0CxgABAYICxgABAooCxgABAooAAAABAWcAAAABAWoCxgABAXQAAAABASsCxgABAQsCFgABATECFgABAhgCFgABAhgAAAABAV8CFgABAUQAAAABATQCFgABAScCFgAEAAAAAQAIAAEM8AAMAAEM9gAUAAEAAgF/AecAAgj2CQgABAAAAAEACAABDQoADAABDRgALAABAA4BZwFvAXABcQGRAZIBpAGpAbEBsgGzAdQB1QHoAA4M/gqMCowKjAqSCpIKkgqwCrYKtgq2CrwKvAqkAAQAAAABAAgAAQ0KAAwAAQ0WABIAAQABAecAAQsSAAQAAAABAAgAAQsmAAwAAgtGAJQAAgAWAAIADAAAAA8AIgALACUAKwAfAC0ALQAmAC8ARAAnAEYASgA9AEwAVABCAFgAYgBLAGQAcwBWAHUAeQBmAHsAhABrAIYAqQB1AKwAtwCZALkAwQClAMMAzQCuAM8BAQC5AQUBDgDsARABHwD2ASEBJQEGAScBMAELATIBYAEVAtwC3AFEAUULYAAAC2AAAAtgAAALYAAAC2AAAAtgAAALYAAAC2AAAAtgAAALYAAAC2AAAAXQBjYF0AY2BdAGNgXQBjYF0AY2BdAGNgUWBRwFFgUcBSIFKAUiBSgF1gXcBdYF3AXWBdwF1gXcBdYF3AXWBdwF1gXcBdYF3AXWBdwF1gXcBjAF4gYwBeIGMAXiBjAF4gYwBS4GMAXiBjAF4gtgAAALYAAABegF7gU0Be4F6AXuBegF7gXoBe4F6AXuBegF7gXoBe4F6AXuBegF7gU6AAAFOgAABToAAAVGBUAFRgVABUYFTAXoBVIF6AVSBegFUgXoBaYFWAVeBawFZAWsBWQFrAVkBawFsgWsBWQF9AX6BfQF+gX0BfoF9AX6BfQF+gX0BfoF9AX6BWoFcAX0BfoGMAY2BYgFdgWIBXYFiAV2BYgFfAWIBYIFiAWCBYgFggWIBYIFiAWCBYgFjgWaBZQFmgWUBZoFlAWaBZQFmgWgC3wLggt8C4ILfAuCC3wLggt8C4ILfAuCC3wLggt8C4ILfAuCC3wLggt8C4IGAAYGBgAGBgYABgYGAAYGBgAGBgYMBhIGDAYSBgwGEgYMBhIGDAYSBgwGEgYYBh4GGAYeBhgGHgYYBh4F6AWmBawFsgW+BbgFvgW4Bb4FuAW+BcQGJAYqBiQGKgYkBioGJAYqBiQGKgYkBioGJAYqBiQGKgYkBioGMAY2BjAGNgYwBjYGMAXKBjAGNgYwBjYLYAAABdAGNgXWBdwF1gXcBjAF4gXoBe4F6AXuBfQF+gt8C4IGAAYGBgwGEgYYBh4GJAYqBiQGKgYwBjYHXAcUB1wHFAdcBxQHXAcUB1wHFAdcBxQHXAcUB1wHFAdcBxQHXAcUB1wHFAY8BkIHOAc+BzgHPgc4Bz4HOAc+BzgHPgc4Bz4GSAZOBkgGTgZIBk4HGgc+BxoHPgcaBz4HGgc+BxoHPgcaBz4HGgc+BxoHPgcaBz4HGgc+BlQGWgcgAAAHIAAAByAAAAcgAAAHIAAAByAAAAcgAAAHIAAABnIAAAZgAAAGcgAAByYAAAcmAAAHJgAAByYAAAcmAAAHJgAAByYAAAcmAAAHJgAAByYAAAZmAAAHMgAABzIAAAcyAAAHMgAABnIGbAZyBmwGcgZ4BtIMxgbSDMYG0gzGBtIG2AZ+BoQGigaQBt4GlgbeBpYG3gaWBt4G5AbeBpYG3gaWBzgHPgc4Bz4HOAc+BzgHPgc4Bz4HOAc+BzgHPgc4Bz4HOAc+BpwGogauBqgGrgaoBq4GqAauBrQGwAa6BsAGugbABroGwAa6BsAGugbABsYLngukC54LpAueC6QLngukC54GzAdEB0oHRAdKB0QHSgdEB0oHRAdKB0QHSgdEB0oHRAdKB0QHSgdEB0oHRAdKB1AHgAdQB4AHUAeAB1AHgAdQB4AHVgAAB1YAAAdWAAAHVgAAB1YAAAdWAAAHXAd0B1wHdAdcB3QHXAd0BtIG2AbeBuQHYgdoB2IHaAdiB2gHYgdoB2IHaAdiB2gHYgdoB2IHaAdiB2gHYgdoB2IHaAduB3QHbgd0B24HdAduB3QHbgd0B24HdAduB3QHbgd0B24HdAduB3QHbgd0BvwG6gb8BuoG8Ab2BvwHAgcIBw4HXAcUBzgHPgcaBz4HGgc+ByAAAAcmAAAHJgAAByYAAAcmAAAHLAAABzIAAAc4Bz4HRAdKB1AHgAdWAAAHXAd0B2IHaAduB3QHegeAAAEBRQLGAAEBSwAAAAEBlQLGAAEBmwAAAAEBev8ZAAEDCgLGAAEB6ALGAAEBYgAAAAEBVALGAAEBYv8ZAAEBOQAAAAEAswLGAAEBXAAAAAEBdQAAAAEBgALGAAEBgAAAAAEBZQAAAAEBZf8ZAAEBVgAAAAEBVgLGAAEBV/8ZAAEBMwAAAAEBMwLGAAEBM/8ZAAEBOv8ZAAEBfwLGAAEBdf8ZAAEBUwAAAAEBUwLGAAEBU/8ZAAEBe/8ZAAEBeALGAAEBQALHAAEBQQAAAAEBegAAAAEAkQLGAAEAkQAAAAEBfgLGAAEBfgAAAAEB4gLGAAEB4gAAAAEBUQLGAAEBUQAAAAEBKgLGAAEBKgAAAAEA5QLGAAEA5QAAAAEBewLGAAEBewAAAAEClwIUAAEClwAAAAEBOAIWAAEBOAAAAAEBIwIWAAEBIwACAAEArQLLAAEBsAIWAAEBNwAAAAEAhgLLAAEBOP8ZAAEAiQLGAAEAtAAAAAEBvgIWAAEBvgAAAAEBLQAAAAECvQIUAAECvQAAAAEAhgAAAAEA3AIWAAEAh/8ZAAEBHQAAAAEBGwISAAEBHv8ZAAEA/f8ZAAEAhgLGAAEAsv8ZAAEBLQIWAAEBLf8ZAAEAkAAAAAEAjgLGAAEAjgAAAAEAkALGAAEAkP8ZAAEA2wLGAAEA2wAAAAEBHgAAAAEBMAIUAAEBLwIWAAEAhgIWAAEBowIWAAEArQIWAAEBMAIWAAEBMAAAAAEBKAIWAAEBKAAAAAEBpAIWAAEBHgIWAAEBJQIWAAEBGgIWAAEBGQAAAAEBLgIWAAEBJQAAAAEBpALGAAEBpAAAAAQAAAABAAgAAQQ8AAwAAQRCAC4AAgAFAGQAaAAAAL8AwQAFARABFAAIAUoBTgANAtwC3AASABMAKAAoACgAKAAoAC4ALgAuBCoEKgQqBCoEKgA6ADoANAA6AEAARgABATMBTgABATgBCwABAI4BCQABAJABCQABANsBCQABAaQBdQAEAAAAAQAIAAED9gAMAAEEBACOAAIAFQACAAwAAAAZACIACwAwADkAFQBpAHMAHwCMAJQAKgCbAJsAMwCdAJ4ANACgAKEANgCjAKMAOACnAKgAOQCsALcAOwDDAM0ARwDaAOQAUgEBAQEAXQEVAR8AXgE0AUkAaQFPAU8AfwFRAVIAgAFUAVgAggFbAVsAhwFfAWAAiACKA4gDiAOIA4gDiAOIA4gDiAOIA4gDiAEWARYBFgEWARYBFgEWARYBFgEWARwBHAEcARwBHAEcARwBHAEcARwDmgOaA5oDmgOaA5oDmgOaA5oDmgOaASIBIgEiASIBIgEiASIBIgEiA4gBFgEWARwBHAOaASIBIgE6AToBOgE6AToBOgE6AToBOgE6AToBKAFAAUABQAFAAUABQAFAAUABQAFAAS4BRgFGAUYBRgFGAUYBRgFGAUYBRgFGATQBTAFMAUwBTAFMAUwBTAFMAUwBTAFMAVIBUgFSAVIBUgFSAVIBUgFSAVIBUgFYAVgBWAFYAVgBWAFYAVgBWAFYAVgBOgFAAUABRgFGAUYBRgFGAUwBUgFYAAECNgAAAAEA0gAAAAEBngAAAAEDMAAeAAEAiwH4AAEDVQAeAAECNwAAAAEByAAeAAEAxgAAAAECDgAAAAECAwAAAAECKQAAAAQAAAABAAgAAQJUAAwAAQJgAC4AAgAFAL8AwQAAAOwA8AADARABFAAIATIBMgANAUoBTgAOABMAKAAoACgANAA0ADQANAAuAkgCSAJIAkgCSAA0AEAAQAA6AEAARgABAj8CFgABAN8CEgABAN0CEgABAOQCEgABAOYCEgABATECEgAFAAAAAQAIAAEADAAiAAIALADIAAIAAwLmAusAAALtAvcABgL5AvoAEQABAAMAqgCrAWQAEwAAAE4AAABUAAAAlgAAAFoAAABgAAAAZgAAAGwAAABsAAAAcgAAAHgAAAB+AAAAhAAAAIoAAQIOAAECDgABAhQAAQIaAAAAkAAAAJYAAQDBAhYAAQDMAhIAAQCuAhIAAQBjAhIAAQCrAhIAAQDHAhIAAQDBAhIAAQCNAhIAAQDRAhIAAQC6AhIAAQBmAhIAAQDJAhIAAQBsAhIAAwAIACQARgACAAoAAAAQABYAAQFnAsYAAQOzAsYAAQOzAAAAAgAKABAAFgAcAAEBXQLGAAEBXQAAAAEDoALGAAEDoAAAAAIACgAQABYAHAABANcCFgABAPwAAAABAjQCFgABAlkAAAAFAAAAAQAIAAEADACgAAEAEgAeAAEAAQL4AAEAAAAGAAEBLQFOAAEABAACAAYADAABANcBCwABAjQBCwAFAAAAAQAIAAEADAASAAEAGgAgAAEAAQL3AAEAAgCqAKsAAQAAALgAAgAGABgAAgAGAAwAAQK2AAAAAQRsAAAAAgAGAAwAAQHEAAAAAQRZAAAABQAAAAEACAABAAwAEgABABgAJAABAAEC7AABAAEBZAABAAAABgABACMCEgABAAQAAgAGAAwAAQELAoEAAQJnAoEABgAQAAEACgABAAEADAAWAAEAHgBCAAIAAQL0AvcAAAABAAIC9AL1AAQAAAASAAAAEgAAABgAAAAeAAEAbwAAAAEAsgAAAAEA0QAAAAIABgAGAAEAb/8ZAAEAAAAKAmID0AACREZMVAAObGF0bgBAAAQAAAAA//8AFAAAAAEAAwAEAAUADwAQABEAEgATABQAFQAWABcAGAAZABoAGwAcAB0AOgAJQVpFIABoQ1JUIACYS0FaIADITUFIIAD4TU9MIAEoTkxEIAFYUk9NIAGIVEFUIAG4VFJLIAHoAAD//wAUAAAAAgADAAQABQAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUABgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUABwAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUACAAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUADQAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUADAAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUACwAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUACQAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAA//8AFQAAAAEAAwAEAAUACgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeYWFsdAC2Y2NtcAC8Y2NtcAC8ZGxpZwDEZnJhYwDKbGlnYQDQbG9jbADWbG9jbADWbG9jbADWbG9jbADWbG9jbADWbG9jbADcbG9jbADcbG9jbADibG9jbADob3JkbgDucG51bQD2c2luZgD8c3MwMQECc3MwMgEMc3MwMwEWc3MwNAEgc3MwNQEqc3MwNgE0c3MwNwE+c3MwOAFIc3MwOQFSc3VicwFcc3VwcwFidG51bQFoAAAAAQAAAAAAAgABAAIAAAABAA8AAAABAAoAAAABABAAAAABAAMAAAABAAQAAAABAAUAAAABAAYAAAACAAsADAAAAAEADQAAAAEACAAGAAEAEQAAAQAABgABABIAAAEBAAYAAQATAAABAgAGAAEAFAAAAQMABgABABUAAAEEAAYAAQAWAAABBQAGAAEAFwAAAQYABgABABgAAAEHAAYAAQAZAAABCAAAAAEABwAAAAEACQAAAAEADgAdADwEVASaBMAE1AT2BRwFUgVSBWAFbgYCBkAGYgZ6BpIGwAdQB14HdgeOB6YH1ggACBgI4gj4CRAJKgADAAAAAQAIAAEDHgB3APQA+AD8AQABBAEIAQwBEAEUARgBHgEiASYBKgEuATQBOgE+AUIBRgFKAU4BUgIaAVYBWgFeAWIBZgFqAW4BcgF2AXoBfgGCAYYBigGOAZYBnAGiAagBrgG2AbwBwgHIAc4B1AHYAdwB4AHkAeoB7gHyAfYB+gIAAgQCCAIMAhICFgIaAh4CIgImAioCLgIyAjYCOgI+AkICTAJWAl4CZgJuAnYCfgKGAo4ClgKaAp4CogKmAqoCrgKyArYCugK+AsICxgLKAs4C0gLWAtoC3gLiAuYC6gLuAvIC9gL6Av4DAgMGAwoDDgMSAxYDGgABAWUAAQCbAAEAnAABAJ0AAQCeAAEAlQABAJYAAQCXAAEAmAACAJkAnwABAJoAAQCMAAEAjQABAI4AAgCPAKAAAgCQAKEAAQCRAAEAkgABAJMAAQCUAAEAOwABAIYAAQCHAAEAogABAIgAAQCJAAEAigABAIsAAQBiAAEAaAABAKMAAQCkAAEApQABAKYAAQCnAAEAqAABAKkAAwFlATQBPwACATUBQAACATYBQQACATcBQgACATgBQwADATkBRAFPAAIBOgFFAAIBOwFGAAIBPAFHAAIBPQFIAAIBPgFJAAEBUAABAVEAAQFSAAEBUwACAN8BVAABAVUAAQFWAAEBVwABAVgAAgDnAVkAAQFKAAEBSwABAUwAAgEyAU0AAQFOAAEBMwABAWYAAQFaAAEBDgABARQAAQFbAAEBXAABAV0AAQFeAAEBXwABAWAABAImAjACEQIPAAQCJwIxAhICEAADAigCMgITAAMCKQIzAhQAAwIqAjQCFQADAisCNQIWAAMCLAI2AhcAAwItAjcCGAADAi4COAIZAAMCLwI5AhoAAQHxAAEB8gABAfMAAQH0AAEB9QABAfYAAQH3AAEB+AABAfkAAQH6AAECTgABAk8AAQJQAAECUQABAlIAAQJTAAECVAABAlUAAQJWAAEC0AABAtEAAQLSAAEC0wABAtQAAQLVAAEC1gABAtcAAQLYAAEC2QABAvkAAQL6AAEC9QABAwgAAQMJAAEAdwACAAcAFAAdAB4AJQAmACgAKQAqACsAMAAyADMANAA1ADYANwA4ADkAOgBDAEkATABPAFkAWgBbAFwAYABnAG0AeAB+AIQAjwCQAJkArACtAK4ArwCwALEAsgCzALQAtQC2AL4AxwDIANQA2gDeAN8A4gDkAOUA7ADtAO4A7wDwAPUA+AD7AQwBEwEZASQBKgEwATkBRAHxAfIB8wH0AfUB9gH3AfgB+QH6AhECEgITAhQCFQIWAhcCGAIZAhoCPgJAAkECQgJDAkQCRQJGAkcCuwK8Ar0CvgK/AsACwQLCAsMCxALnAugC9AL7AvwABgAQAAIADAAeAAAAAwAAAAEAbgABACoAAQAAABoAAwAAAAEAEgABABgAAQAAABoAAQABAOUAAgACAucC6wAAAu0C8wAFAAIAAAABAAgAAQAKAAIAEgAYAAEAAgFiAWMAAgDOANoAAgDOAOwAAQAAAAEACAABAAYABQABAAEA2gABAAAAAQAIAAIADgAEAGIAaAEOARQAAQAEAGAAZwEMARMAAQAAAAEACAACABAABQCGAIcBMgEzAvUAAQAFAEMASQDvAPUC9AAGAAAAAQAIAAED/gACAAoAHAABAAQAAQAyAAEAAAABAAAAGwABAAQAAQDcAAEAAAABAAAAGwABAAAAAQAIAAEBLgA1AAEAAAABAAgAAQEgAD8ABAAAAAEACAABAH4ABQAQAEQAUABmAHIABQAMABQAHAAkACwCHAADAkwB8wIdAAMCTAH0Ah8AAwJMAfUCIQADAkwB9gIiAAMCTAH5AAEABAIeAAMCTAH0AAIABgAOAiAAAwJMAfUCIwADAkwB+QABAAQCJAADAkwB+QABAAQCJQADAkwB+QABAAUB8gHzAfQB9gH4AAYAAAACAAoAJAADAAEAfAABABIAAAABAAAAHAABAAIAAgCsAAMAAQBiAAEAEgAAAAEAAAAcAAEAAgBMAPgABAAAAAEACAABABQAAQAIAAEABAKUAAMA+AI+AAEAAQBGAAEAAAABAAgAAQAG/+AAAgABAhECGgAAAAEAAAABAAgAAQAGACAAAgABAfEB+gAAAAQACAABAAgAAQAeAAIACgAUAAEABACqAAIAMAABAAQAqwACADAAAQACAAIAaQAEAAgAAQAIAAEAfAAEAA4AKAAyAFIAAwAIAA4AFAFhAAIAzgFiAAIA2gFjAAIA7AABAAQBZAACARAAAwAIABIAGgI7AAQCVwJXAqgCPAADAlcCqAI9AAICqAAEAAoAFAAcACQCgAAEAlcCVwJXAn8AAwJXAlcCgQADAlcCqAJ+AAICVwABAAQAzgEQAlcCqQABAAAAAQAIAAEAFACIAAEAAAABAAgAAQAGAJMAAgABAKwAtgAAAAEAAAABAAgAAQAGAF4AAgABAOwA8AAAAAEAAAABAAgAAQAGAC8AAgABAFkAXAAAAAEAAAABAAgAAgAYAAkAjACNAI4AjwCQAJEAkgCTAJQAAgACADAAMAAAADIAOQABAAEAAAABAAgAAgASAAYAlQCWAJcAmACZAJoAAQAGACUAJgAoACkAKgArAAEAAAABAAgAAQAGABUAAgABArsCxAAAAAEAAAABAAgAAgBiAC4AmwCcAJ0AngCfAKAAoQCiAKMApAClAKYApwCoAKkBTwFQAVEBUgFTAVQBVQFWAVcBWAFZAVoBWwFcAV0BXgFfAWACTgJPAlACUQJSAlMCVAJVAlYC+QL6AwgDCQABAC4ABwAUAB0AHgAqADQANQBPAG0AeAB+AIQAjwCQAJkAsQC+AMcAyADUANoA3gDfAOIA5ADlAPsBGQEkASoBMAE5AUQCPgJAAkECQgJDAkQCRQJGAkcC5wLoAvsC/AABAAAAAQAIAAEABgAeAAEAAgHxAfIAAQAQAAEACgAAAAEABgABAAEAAgDaAOUAAQAAAAEACAACAAoAAgA7AOcAAQACADoA5QABAAAAAQAIAAIADgAEAWUBZgFlAWYAAQAEAAIATACsAPg="}
\ No newline at end of file
diff --git a/apps/www/app/(app)/og/geistmono-regular-otf.json b/apps/www/app/(app)/og/geistmono-regular-otf.json
new file mode 100644
index 00000000000..e5285e5fdea
--- /dev/null
+++ b/apps/www/app/(app)/og/geistmono-regular-otf.json
@@ -0,0 +1 @@
+{"base64Font":"T1RUTwAMAIAAAwBAQ0ZGINMvNaQAABocAADLSkdERUaOgIu5AADlaAAAAgJHUE9TaW4+HAAA52wAABCMR1NVQtVEIxcAAPf4AAANhE9TLzIF4h4/AAAN8AAAAGBjbWFwOpoBDgAAEcAAAAg6aGVhZC6pukoAAADUAAAANmhoZWEPQwwPAAANzAAAACRobXR4VrH9cAAAAQwAAAy+bWF4cAM5UAAAAADMAAAABm5hbWVaa41VAAAOUAAAA3Bwb3N0/58AMgAAGfwAAAAgAABQAAM5AAAAAQAAAAEzM2trAy5fDzz1AAMD6AAAAADiJyGbAAAAAOInIZv/yv8JC3oD9AAAAAcAAgAAAAAAAAHbAFgCWAAAAlgAGgJYABoCWAAaAlgAGgJYABoCWAAaAlgAGgJYABoCWAAaAlgAGgJYABoCWAAKAlgAWgJYACYCWAAmAlgAJgJYACYCWAAmAlgAJgJYAFoCWABaAlj/9gJY//YCWABaAlgAWgJYAFoCWABaAlgAWgJYAFoCWABaAlgAWgJYAFoCWABaAlgAHAJYAGQCWAAmAlgAJgJYACYCWAAmAlgAJgJYACYCWAAmAlgAFAJYAEQCWAAYAlgARAJYAFACWABQAlgAUAJYAFACWABQAlgAUAJYAFACWABQAlgAUAJYACgCWAAoAlgAKAJYADwCWAA8AlgAPAJYAGQCWABkAlgAZAJYAGQCWP/mAlgAPAJYAEYCWABGAlgARgJYAEYCWABGAlgARgJYACYCWAAmAlgAJgJYACYCWAAmAlgAJgJYACYCWAAmAlgAJgJYAAcCWABaAlgAWgJYACYCWABGAlgARgJYAEYCWABGAlgALAJYACwCWAAsAlgALAJYACwCWAAsAlgAJAJYACgCWAAoAlgAKAJYACgCWAAoAlgAPAJYADwCWAA8AlgAPAJYADwCWAA8AlgAPAJYADwCWAA8AlgAPAJYADwCWAAYAlgAKAJYACgCWAAoAlgAKAJYACgCWAAyAlgALAJYACwCWAAsAlgALAJYACwCWAAsAlgAMgJYADICWAAyAlgAMgJYAQACWABkAlgARgJYAEcCWABHAlgARwJYAEcCWAAUAlgAFAJYABQCWAAUAlgAFAJYABQCWAAaAlgAJgJYAFoCWABaAlgAJgJYAFACWABQAlgAJgJYADwCWAAoAlgALAJYADICWAAUAlgANgJYADYCWAA2AlgANgJYADYCWAA2AlgANgJYADYCWAA2AlgANgJYADYCWAANAlgAUAJYAEYCWABGAlgARgJYAEYCWABGAlgARgJYADICWAAyAlgAMgJYADoCWABCAlgAQgJYAEICWABCAlgAQgJYAEICWABCAlgAQgJYAEICWABCAlgAPAJYAEYCWAA8AlgAPAJYADwCWAA8AlgAPAJYADwCWAA8AlgAPAJYAGQCWAAZAlgAAgJYAFACWABQAlgAUAJYAFACWABQAlgAUAJYAFACWABQAlgAUAJYAFACWABuAlgAbgJYAG4CWABuAlgAWgJY//kCWABaAlgAUAJYAFACWABQAlgAUAJYAGQCWAAoAlgAYAJYAGACWABgAlgAYAJYAGACWABgAlgAOgJYADoCWAA6AlgAOgJYADoCWAA6AlgAOgJYACMCWAA6AlgACgJYAFACWABQAlgAMgJYAFoCWABaAlgAWgJYAFoCWABQAlgAUAJYAFACWABQAlgAUAJYAFACWABMAlgAMgJYADICWAAyAlgAMgJYADICWABaAlgAWgJYAFoCWABaAlgAWgJYAFoCWABaAlgAWgJYAFoCWABaAlgAWgJYADYCWAAUAlgAFAJYABQCWAAUAlgAFAJYADYCWAA2AlgANgJYADYCWAA2AlgANgJYADYCWABSAlgAUgJYAFICWABSAlgBAAJYAFACWABgAlgATgJYAE4CWABOAlgATgJYAE4CWABOAlgATgJYAE4CWABOAlgATgJYAE4CWAA2AlgANgJYADYCWAA2AlgANgJYADYCWAA2AlgANgJYADYCWAA2AlgANgJYAFACWABQAlgAUAJYAFACWABPAlgANgJYAEYCWABCAlgAQgJYADwCWABQAlgAUAJYAFACWABQAlgAbgJYADoCWABaAlgAFAJYADYCWABSAlgATgJYADYCWACPAlgAkQJYABoCWABQAlgAWgJYAGQCWABkAlgAZAJYABMCWAAMAlgAWgJYAFoCWABaAlgABwJYACECWABGAlgARgJYADoCWAA6AlgAFAJYADwCWABEAlgAJgJYAEYCWABaAlgAJgJYACgCWAA0AlgANAJYABkCWAAyAlgAMgJYADwCWAA3AlgAIwJYAEYCWABaAlgAIwJYAB4CWAAFAlgAFAJYACwCWAAmAlgALQJYAFACWABQAlgAKAJYAAUCWAAUAlgALgJYAAUCWAAPAlgAAQJYACYCWAAOAlgABwJYADACWAA1AlgALAJYACsCWAAyAlgAIwJYAEYCWABQAlgAHAJYAEYCWAAmAlgANAJYADYCWAA6AlgAWgJYAJUCWACVAlgAlQJYACkCWAAUAlgAQgJYAEICWABCAlgACwJYAFACWABeAlgAXgJYAF4CWABbAlgAWwJYABkCWAAkAlgAWwJYADoCWABaAlgAUAJYAEYCWABDAlgANgJYADYCWAAXAlgANgJYAEUCWABaAlgAOAJYADgCWABaAlgAUQJYACMCWAAKAlgABQJYABQCWABQAlgAPQJYAD4CWABQAlgAUAJYAG4CWAAZAlgAFAJYAFECWAAZAlgACgJYAA4CWAA6AlgAJQJYAAsCWABaAlgAWwJYADYCWAA2AlgANgJYAEUCWABkAlgAUAJYADwCWABeAlgAOgJYADYCWAAaAlgACQJYADsCWAAQAlgAMwJYADICWAA8AlgAMgJYADICWAAoAlgAPAJYADICWAA8AlgAMgJYADICWAAPAlgADwJYAA8CWAAPAlgADwJYAA8CWAAPAlgADwJYAA8CWAAPAlgADwJYAA8CWAAPAlgADwJYAA8CWAAPAlgADwJYAA8CWAAPAlgADwJYADACWAANAlgAKAJYACgCWAAUAlgAKAJYABECWAAoAlgAKAJYABQCWAARAlgAKAJYAJUCWACzAlgAoAJYAKACWACEAlgApQJYAKUCWACmAlgAnwJYAKgCWACVAlgAswJYAKACWACgAlgAhAJYAKUCWAClAlgApgJYAJ8CWACoAlgAAASwAHwHCACHCWAAPgcIAD4EsAA+BwgAPgSwAD4HCAA+BLAAzQSwAIwHCAGLBwgBAgSwAKIEsADXBLABDgSwAD4HCAA+BLAAaAcIAHwHCADWBLAAKgcIATQEsABsBwgAbAJYAPACWADwAlgA8AJYAPACWAA3AlgA8AJYAPACWABDAlgAQwJYAPACWADDAlgAggJYAKECWAA2AlgAbAJYAGwCWADwAlgA8AJYAPACWAA3AlgA8AJYAPACWABAAlj//wJYAPACWACWAlgAZAJYACgCWABQAlgABgJYAL0CWACXAlgAXwJYAGoCWACpAlgAjgJYAKsCWACmAlgAuQJYAI0CWACqAlgAfwJYAFQCWABWAlgAsAJYAHkCWACqAlgAfwJYALkCWACWAlgA9gJYAJ4CWACcAlgAngJYAOkCWAD2AlgATwJYAE8CWADHAlgAoQJYAKsCWAEAAlgAMgJYAFoHCAAcBLABJQlgATcHCAGDBwgBNQSwATQEsACzBLAAoQcIAD4HCAA+BLAAPgcIAD4HCAA+BwgAPgSwAD4HCAAlBLABBAcIAD4HCAA+BwgAPgSwAD4HCAA+BwgAPgcIAB4JYAA+C7gAPgSwAKAHCADlCWAA5gcIADwEsAD7BwgAPglgAD4HCAA+BwgAPgSwAJEHCAA+BwgAPgSwAIYHCACvBwgAwQcIAOoEsADPBLAAhASwAH0EsACGBLAA2gcIAMEEsAAjAlgACAJYABYCWAAeAlgAKgJYAFACWAAEAlgAMAJYADACWAARAlgAlgJYAN4CWACOAlgBAwJYAQUCWABrAlgAawJYAAUCWAAmAlgATwJYAA4CWAAEAlgACAJYAAQCWAA0AlgARgJYADgCWAAvAlgACgJYABYCWAAhAlgAJQJYABQCWAAvAlgALAJYAD4CWAA+AlgAfgJYAD4CWABQAlgAUAJYAEkCWABIAlgAPgJYAD4CWAA+AlgATwJYAE4CWABaAlgAcwJYAAcCWABuAlgADwJYABECWABGAlgAEQJYACcCWABfAlgADQJYAAQCWAAdAlgAGAJYABECWAAlAlgAHQJYADkCWAAHAlgARgJYAAICWACAAlgAEgJYABQCWAAUAlgAEQJYABECWAASAlgAHgJYAB4CWAAOAlgAEgJYAAICWACLAlgAJgJYABECWAAlAlgAiwJYADkCWAAKAlgAOAJYAAgCWACLAlgAEAJYABACWAACAlgATwJYAAgCWP/KAlgACAJYAJUCWAAIAlgALAJYAAgCWAAzAlgBAQJY/9gCWAEBAlgBAQJYAQEAAACgAAAAoAAAAQAAAADcAAAA3AAAAJYAAAD0AAAAoAAAAKAAAACgAAAA0AAAAI4AAACmAAAA8AAAAPAAAADwAAAAwQAAANQAAABkAAAAnAAAAPYCWACgAQAA3ADcAJYAoACgAKAA0ACOAKYAwQDUAJwA9gDxANwBAAAPAA8AAAABAAADmP8kAGQLuP/K/gwLegABAAAAAAAAAAAAAAAAAAADJgAEArMBkAAFAAgCigJYAAAASwKKAlgAAAFeADIBCQAAAAAAAAAAAAAAAKEAAv8AAa37AAAAAAAAAABWUkNMAMAAIPj/A5j/JABkA/QBAiAAAJcAAAAAAhICxgAAACAABQAAABQA9gADAAEECQABABQAAAADAAEECQACAA4AFAADAAEECQADADgAIgADAAEECQAEACQAWgADAAEECQAFAD4AfgADAAEECQAGACIAvAADAAEECQAIAJAA3gADAAEECQAJAGABbgADAAEECQALADABzgADAAEECQAMADABzgADAAEECQAQABQAAAADAAEECQARAA4AFAADAAEECQEAABIB/gADAAEECQEBAAoCEAADAAEECQECAAoCGgADAAEECQEDAAoCJAADAAEECQEEAAoCLgADAAEECQEFABQCOAADAAEECQEGABYCTAADAAEECQEHABgCYgBHAGUAaQBzAHQAIABNAG8AbgBvAFIAZQBnAHUAbABhAHIAMQAuADIAMAAwADsAVgBSAEMATAA7AEcAZQBpAHMAdABNAG8AbgBvAC0AUgBlAGcAdQBsAGEAcgBHAGUAaQBzAHQAIABNAG8AbgBvACAAUgBlAGcAdQBsAGEAcgBWAGUAcgBzAGkAbwBuACAAMQAuADIAMAAwADsARwBsAHkAcABoAHMAIAAzAC4AMgAgACgAMwAyADQAOQApAEcAZQBpAHMAdABNAG8AbgBvAC0AUgBlAGcAdQBsAGEAcgBCAGEAcwBlAG0AZQBuAHQALgBzAHQAdQBkAGkAbwAsACAAVgBlAHIAYwBlAGwALAAgAEEAbgBkAHIA6QBzACAAQgByAGkAZwBhAG4AdABpACwAIABHAHUAaQBkAG8AIABGAGUAcgByAGUAeQByAGEALAAgAE0AYQB0AGUAbwAgAFoAYQByAGEAZwBvAHoAYQBCAGEAcwBlAG0AZQBuAHQALgBzAHQAdQBkAGkAbwAsACAAQQBuAGQAcgDpAHMAIABCAHIAaQBnAGEAbgB0AGkALAAgAE0AYQB0AGUAbwAgAFoAYQByAGEAZwBvAHoAYQBoAHQAdABwAHMAOgAvAC8AYgBhAHMAZQBtAGUAbgB0AC4AcwB0AHUAZABpAG8ALwBOAG8AIAB0AGEAaQBsACAAYQBBAGwAdAAgAGEAQQBsAHQAIABsAEEAbAB0ACAAUgBBAGwAdAAgAEcAQQBsAHQAIABhAHIAcgBvAHcAcwBSAG8AdQBuAGQAZQBkACAAZABvAHQAUwBsAGEAcwBoAGUAZAAgAHoAZQByAG8AAAACAAAAAwAAABQAAwABAAAAFAAECCYAAAEIAQAABwAIAC8AOQB+AKwBEwErATEBNwE+AUgBTQF+AY8BkgHOAekCGwI3AlkCuQK8AsgC3QMEAwgDDAMSAyYDKAM1A5sDqQO7A8AEDAQaBCMELwQzBDUEOQQ6BEMEXwRjBGsEdQSTBJcEmwSjBLMEtwS7BMAEzwTZBOME6QTvDj8eIR6FHp4evR7zHvkgFCAaIB4gIiAmIDAgMyA6IEQgcCB5IIkgqiCsILQguSC9IQchFyEiIVUhXiGZIZ0hqiGxIbUh5SHnIgIiBiIPIhIiGiIeIisiSCJgImUjJyMrI84kDCQjJGgk6iUAJQIlDCUUJRwlsyW3Jb0lwSXMJc8nfjADMBEwFzAcp4z4////AAAAIAAwADoAoACuARYBLgE0ATkBQQFKAVABjwGSAc0B5AIYAjcCWQK5ArwCxgLYAwADBgMKAxIDJgMnAzUDmwOpA7sDwAQABA4EGwQkBDAENAQ2BDoEOwREBGIEagRyBJAElgSaBKIErgS2BLoEwATPBNgE4gToBO4OPx4gHoAenh68HvIe+CATIBggHCAgICYgMCAyIDkgRCBwIHQggCCqIKwgtCC5IL0hByEWISIhUyFbIZAhnSGpIbAhsyHkIeciAiIGIg8iESIaIh4iKyJIImAiZCMmIysjziQLJCMkYCTqJP8lAiUMJRQlHCWyJbYlvCXAJcolzyd2MAMwCDAUMByni/j///8AAAGtAAAAAAAAAAAAAAAAAAAAAAAAAAD+lADgAAAAAAAA/qD+ZgB8AHgAAAAAAAAAAAAAAAv/+P/5/+3+Pf4w/h/+GwAAAAD9SQAA/WUAAP1qAAD9bAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD80P0EAAAAAAAAAAD0NAAAAADhxAAAAAAAAOI7AAAAAAAA4hLir+J94jXhuOGh4aHhh+Ia4hTiDeIK4gXg1QAA4YsAAOCoAADhTeFE4T/hPuEH4Q3g2uDS4MoAAODB4LjgrOCK4GwAAAAA347e7QAA3pPdkt0HAADeDN3/3fnd8wAAAAAAAAAAAADdMNpy0j0AAAAA0jUAAAmmAAEBCAAAASQBrAHEAo4CuAK+AsQCzgLcAuIAAAAAAzoDPANGAAAAAAAAAAADRANIA1IDWgNeAAAAAAAAAAAAAAAAAAAAAANSA2oAAAOAAAADlAAAA5QAAAOSA8gDygPMA9ID2APaA9wD3gPoA+oAAAAAA+gD6gPsA+4AAAPuA/AAAAP4A/oD/AAAA/wEAAQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPsAAAD7AAAA+4AAAAAAAAAAAAAAAAAAAAAAAAD7gAAAAAAAAAAAAAD5gPoAAAAAAPmAAAAAAAAA+IAAAAAAAAAAAPcA94D4APiA+QAAAAAAAAD4gP0AAAD+AAAAAAAAQI5AnACQQK/At4CpwJxAlICUwI/AscCNQJNAjQCQgI2AjcCzgLLAs0COwKmAAIADgAPABUAGQAkACUALQAwADkAPAA/AEQARQBLAFUAVwBYAFwAYwBoAHMAdAB5AHoAgAJWAkMCVwLVAlADJwCeAKoAqwCxALUAwADBAMkAzADWANoA3QDiAOMA6QDzAPUA9gD6AQEBBgERARIBFwEYAR4CVAKxAlUC0wIbAjoCvQLFAr4CxgKyAqkDJQKqAVECbALUAqsDLwKuAtECEwIUAygC3QKoAj0DMAISAVICbQIAAf0CAQI8AAgAAwAGAAwABwALAA0AEgAfABoAHAAdADUAMQAyADMAGABJAE8ATABNAFMATgLJAFIAbQBpAGsAbAB7AFYBAACkAJ8AogCoAKMApwCpAK4AuwC2ALgAuQDSAM4AzwDQALQA5wDtAOoA6wDxAOwCygDwAQsBBwEJAQoBGQD0ARsACQClAAQAoAAKAKYAEACsABMArwAUALAAEQCtABYAsgAXALMAIAC8AB4AugAhAL0AGwC3ACgAxAAmAMIAKgDGACkAxQAvAMsALgDKADgA1QA2ANMANwDUADQAzQA7ANkAPgDcAEAA3gBCAOAAQQDfAEMA4QBGAOQASADmAEcA5QBKAOgAUQDvAFAA7gBUAPIAWQD3AFsA+QBaAPgAXQD7AGAA/gBfAP0AXgD8AGYBBABlAQMAZAECAHIBEABvAQ0AagEIAHEBDwBuAQwAcAEOAHYBFAB8ARoAfQCBAR8AgwEhAIIBIAAFAKEALADIACcAwwA9ANsAYQD/AGcBBQMqAysDNgMsAyYDLQMxAy4DKQMTAxQDFwMbAxwDGQMSAxEDGgMVAxgBXAFdAYMBVwF7AXoBfQF+AX8BeAF5AYABYwFtAXQBUwFUAVUBVgFaAVsBXgFfAWABYQFiAW4BbwFxAXABcgFzAXcBdgF1AXwBgQGCAZwBnQGlAbEBsgG0AbMBtQG2AboBuQG4Ab8BxAHFAZ4BnwHGAZkBvgG9AcABwQHCAbsBvAHDAaYBpAGwAbcBhAHHAYUByAGGAckBhwHKAVgBmgFZAZsBiAHLAYkBzAGKAc0BiwHOAYwBzwGNAdABjgHRAY8B0gGRAdQBkgHVAZMB1gGUAdcAKwDHAHgBFgB1ARMAdwEVACIAvgB+ARwAfwEdAmoCawJmAmgCaQJnArMCtAI+ArUCrAH+Af8CAgLmAuAC4gLkAugC6QLnAuEC4wLlAtoCyALQAs8CugK4ArwCtwHnAwwDAwMHAwQDCAMFAwkDBgMKAwIDAAMBAlgCWQJeAl8CXAJdAmICYwJaAlsCYAJhAmQCZQCEASIAAAADAAAAAAAA/5wAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAQAEAgABAQESR2Vpc3RNb25vLVJlZ3VsYXIAAQEBKfpxAPpyAfpzAvgYBPsRDANV+4scC3r6iAUcMrkPHDWrEbYdAAC9ExICWQIAAQAHAA4AFQAcACIAKAAzAD0AQwBJAE8AWQBgAGcAbgB1AHsAgQCMAJMAnQCkAKsArwC6AMQAywDSANgA4wDuAPUA/AECAQgBDwEVARsBIgElATIBOQE/AUUBTAFSAVoBZQFsAXMBdwF9AYQBiwGRAZ4BpQGsAbEBtwG9AcgB0QHXAeIB6AHvAfUB/wIGAhUCJAIqAjUCQAJMAlICXQJtAnkCiAKUAqICsQK/As4C3QLrAvoDCAMWAyQDMgNBA1UDWwNiA2kDcAN2A3wDhwORA5cDnQOjA60DtAO7A8IDyQPPA9UD4APnA/ED+AP/BAMEDgQXBB4EJQQrBDIEPQRIBE8EVgRcBGIEaQRvBHUEfAR/BIwEkwSZBJ8EpgSsBLQEvwTGBMoE0ATXBN4E5ATxBPgE/wUEBQoFEAUbBSQFKgU1BTsFQgVIBVIFWQVoBXcFfQWIBZMFnwWvBb0FyAXUBeAF6gX1BfsGBgYRBh0GLQY7BkYGUgZeBmgGcwZ5BoQGjwabBqYGtAbDBtEG4AbvBvUHAwcRBx0HIwcxBz8HTQdbB2oHfQeQB5cHngelB6wHswe6B8EHyAfPB9YH3QfkB+sH8gf5CAAIBwgOCBUIHAgjCCoIMQg4CD8IRghNCFQIWwhiCGkIcAh3CH4IhQiMCJMImgihCKgIrwi2CL0IxAjLCNII2QjgCOcI7gj1CPwJAwkKCREJGAkfCSYJLQk0CTsJQglJCVAJVwleCWUJbAlzCXoJgQmICY8JlgmdCaQJqwmyCbkJwAnHCc4J1QncCeMJ6gnxCfgJ/woGCg0KFAobCiIKKQowCjcKPgpFCkwKUwpaCmEKaApvCnYKfQqECosKkgqZCqAKpwquCrUKvArDCsoK0QrYCt8K5grtCvQK+wsCCwkLEAsXCx4LJQssCzMLOQtAC0YLSAtPC1YLXQtkC2sLcgt5C4ALhwuOC5ULnAujC6oLsQu4C78LxgvNC9QL2wvkC+sL8gv5DAAMBwwODBUMHAwjDCoMMQw4DD8MRgxNDFQMWwxiDGkMcAx3DH4MhQyMDJ4MtwzYDPINBQ0gDTANRQ1bDW0Nhg2eDa8Nvw3TDeQN+w4RDjAOVQ5vDpMOow65DsAOyw7VDuMO8A77DwoPFw8oDzsPQg9JD1APVw9eD2UPbA9zD3oPgQ+ID48Plg+dD6QPqw/CD9UP7Q//EBMQIRAxEEEQVxBvEIEQmxCvEMUQ2BDzEQURHxE6EVQRZBF7EZMRqBHGEesR+BIJEh4SMxJCElcSdBKLEp8SsBLFEtkS7RMJEygTPxNVE2cTfBOTE60TzxPjE+oT8RP3E/0UBBQLFBIUGRQgFCcULhQ1FDkUQBRHFE4UVRRdFGkUchR9FIUUjRSUFJsUpBSrFLYUvRTEFMsU1RTcFOUU7BT1FPwVBRUOFRUVHBUjFSoVMRU4FT8VRhVNFVsVYhVuFXoViRWVFaMVrxW9FckV1xXlFewV8hX5FgAWBxYOFhUWHBYjFioWMRY4Fj8WRhZNFlQWWxZlFmwWcxZ8FoUWjBaXFp4WpRasFrMWvBbDFsoW0RbgFucW7hb1FwEXDRcaFygXLxc2Fz0XSRdbF2IXcxeFQWJyZXZldW5pMDFDREFtYWNyb25Bb2dvbmVrQ2FjdXRlQ2Nhcm9uQ2NpcmN1bWZsZXhDZG90YWNjZW50RGNhcm9uRGNyb2F0RWNhcm9uRWRvdGFjY2VudEVtYWNyb25Fb2dvbmVrdW5pMUVCQ3VuaTAxOEZHYnJldmVHY2Fyb25HY2lyY3VtZmxleHVuaTAxMjJHZG90YWNjZW50dW5pMUUyMHVuaTAxRTRIYmFySGNpcmN1bWZsZXhJZG90YWNjZW50SW1hY3JvbklvZ29uZWtJdGlsZGV1bmkwMDRBMDMwMUpjaXJjdW1mbGV4dW5pMDFFOHVuaTAxMzZMYWN1dGVMY2Fyb251bmkwMTNCTmFjdXRlTmNhcm9udW5pMDE0NUVuZ09odW5nYXJ1bWxhdXRPbWFjcm9uUmFjdXRlUmNhcm9udW5pMDE1NlNhY3V0ZVNjZWRpbGxhU2NpcmN1bWZsZXh1bmkwMjE4dW5pMUU5RVRiYXJUY2Fyb251bmkwMTYydW5pMDIxQVVicmV2ZVVodW5nYXJ1bWxhdXRVbWFjcm9uVW9nb25la1VyaW5nVXRpbGRlV2FjdXRlV2NpcmN1bWZsZXhXZGllcmVzaXNXZ3JhdmVZY2lyY3VtZmxleFlncmF2ZXVuaTFFRjhaYWN1dGVaZG90YWNjZW50dW5pQTc4QnVuaTAxM0IubG9jbE1BSHVuaTAxNDUubG9jbE1BSFIuc3MwNFJhY3V0ZS5zczA0UmNhcm9uLnNzMDR1bmkwMTU2LnNzMDRHLnNzMDZHYnJldmUuc3MwNkdjaXJjdW1mbGV4LnNzMDZ1bmkwMTIyLnNzMDZHZG90YWNjZW50LnNzMDZ1bmkxRTIwLnNzMDZBZGllcmVzaXMuc3MwOENkb3RhY2NlbnQuc3MwOEVkaWVyZXNpcy5zczA4RWRvdGFjY2VudC5zczA4R2RvdGFjY2VudC5zczA4SWRpZXJlc2lzLnNzMDhJZG90YWNjZW50LnNzMDhPZGllcmVzaXMuc3MwOFVkaWVyZXNpcy5zczA4V2RpZXJlc2lzLnNzMDhZZGllcmVzaXMuc3MwOFpkb3RhY2NlbnQuc3MwOEdkb3RhY2NlbnQuc3MwNi5zczA4YWJyZXZldW5pMDFDRWFtYWNyb25hb2dvbmVrY2FjdXRlY2Nhcm9uY2NpcmN1bWZsZXhjZG90YWNjZW50ZGNhcm9uZGNyb2F0ZWNhcm9uZWRvdGFjY2VudGVtYWNyb25lb2dvbmVrdW5pMUVCRHVuaTAyNTlnYnJldmVnY2Fyb25nY2lyY3VtZmxleHVuaTAxMjNnZG90YWNjZW50dW5pMUUyMXVuaTAxRTVoYmFyaGNpcmN1bWZsZXhpLmxvY2xUUktpbWFjcm9uaW9nb25la2l0aWxkZXVuaTAyMzd1bmkwMDZBMDMwMWpjaXJjdW1mbGV4dW5pMDFFOXVuaTAxMzdsYWN1dGVsY2Fyb251bmkwMTNDbmFjdXRlbmNhcm9udW5pMDE0NmVuZ29odW5nYXJ1bWxhdXRvbWFjcm9ucmFjdXRlcmNhcm9udW5pMDE1N3NhY3V0ZXNjZWRpbGxhc2NpcmN1bWZsZXh1bmkwMjE5dGJhcnRjYXJvbnVuaTAxNjN1bmkwMjFCdWJyZXZldWh1bmdhcnVtbGF1dHVtYWNyb251b2dvbmVrdXJpbmd1dGlsZGV3YWN1dGV3Y2lyY3VtZmxleHdkaWVyZXNpc3dncmF2ZXljaXJjdW1mbGV4eWdyYXZldW5pMUVGOXphY3V0ZXpkb3RhY2NlbnR1bmlBNzhDdW5pMDEzQy5sb2NsTUFIdW5pMDE0Ni5sb2NsTUFIYS5zczAxYWFjdXRlLnNzMDFhYnJldmUuc3MwMXVuaTAxQ0Uuc3MwMWFjaXJjdW1mbGV4LnNzMDFhZGllcmVzaXMuc3MwMWFncmF2ZS5zczAxYW1hY3Jvbi5zczAxYW9nb25lay5zczAxYXJpbmcuc3MwMWF0aWxkZS5zczAxYS5zczAyYWFjdXRlLnNzMDJhYnJldmUuc3MwMnVuaTAxQ0Uuc3MwMmFjaXJjdW1mbGV4LnNzMDJhZGllcmVzaXMuc3MwMmFncmF2ZS5zczAyYW1hY3Jvbi5zczAyYW9nb25lay5zczAyYXJpbmcuc3MwMmF0aWxkZS5zczAybC5zczAzbGFjdXRlLnNzMDNsY2Fyb24uc3MwM3VuaTAxM0Muc3MwM2xzbGFzaC5zczAzYWRpZXJlc2lzLnNzMDhjZG90YWNjZW50LnNzMDhlZGllcmVzaXMuc3MwOGVkb3RhY2NlbnQuc3MwOGdkb3RhY2NlbnQuc3MwOGkuc3MwOGlkaWVyZXNpcy5zczA4aS5sb2NsVFJLLnNzMDhpb2dvbmVrLnNzMDhqLnNzMDhvZGllcmVzaXMuc3MwOHVkaWVyZXNpcy5zczA4d2RpZXJlc2lzLnNzMDh5ZGllcmVzaXMuc3MwOHpkb3RhY2NlbnQuc3MwOGFkaWVyZXNpcy5zczAxLnNzMDhhZGllcmVzaXMuc3MwMi5zczA4dW5pMDQxMHVuaTA0MTF1bmkwNDEydW5pMDQxM3VuaTA0MDN1bmkwNDkwdW5pMDQ5MnVuaTA0MTR1bmkwNDE1dW5pMDQwMHVuaTA0MDF1bmkwNDE2dW5pMDQxN3VuaTA0MTh1bmkwNDE5dW5pMDQxQXVuaTA0MEN1bmkwNDFCdW5pMDQxQ3VuaTA0MUR1bmkwNDFFdW5pMDQxRnVuaTA0MjB1bmkwNDIxdW5pMDQyMnVuaTA0MjN1bmkwNDBFdW5pMDQyNHVuaTA0MjV1bmkwNDI3dW5pMDQyNnVuaTA0Mjh1bmkwNDI5dW5pMDQwRnVuaTA0MkN1bmkwNDJCdW5pMDQyQXVuaTA0MDl1bmkwNDBBdW5pMDQwNXVuaTA0MDR1bmkwNDJEdW5pMDQwNnVuaTA0MDd1bmkwNDA4dW5pMDQwQnVuaTA0MkV1bmkwNDJGdW5pMDQwMnVuaTA0NjJ1bmkwNDZBdW5pMDQ3MnVuaTA0NzR1bmkwNDk2dW5pMDQ5QXVuaTA0QTJ1bmkwNEFFdW5pMDRCMHVuaTA0QjJ1bmkwNEI2dW5pMDRCQXVuaTA0QzB1bmkwNEQ4dW5pMDRFMnVuaTA0RTh1bmkwNEVFdW5pMDQzMHVuaTA0MzF1bmkwNDMydW5pMDQzM3VuaTA0NTN1bmkwNDkxdW5pMDQ5M3VuaTA0MzR1bmkwNDM1dW5pMDQ1MHVuaTA0NTF1bmkwNDM2dW5pMDQzN3VuaTA0Mzh1bmkwNDM5dW5pMDQ1RHVuaTA0M0F1bmkwNDVDdW5pMDQzQnVuaTA0M0N1bmkwNDNEdW5pMDQzRXVuaTA0M0Z1bmkwNDQwdW5pMDQ0MXVuaTA0NDJ1bmkwNDQzdW5pMDQ1RXVuaTA0NDR1bmkwNDQ1dW5pMDQ0N3VuaTA0NDZ1bmkwNDQ4dW5pMDQ0OXVuaTA0NUZ1bmkwNDRDdW5pMDQ0QnVuaTA0NEF1bmkwNDU5dW5pMDQ1QXVuaTA0NTV1bmkwNDU0dW5pMDQ0RHVuaTA0NTZ1bmkwNDU3dW5pMDQ1OHVuaTA0NUJ1bmkwNDRFdW5pMDQ0RnVuaTA0NTJ1bmkwNDYzdW5pMDQ2QnVuaTA0NzN1bmkwNDc1dW5pMDQ5N3VuaTA0OUJ1bmkwNEEzdW5pMDRBRnVuaTA0QjF1bmkwNEIzdW5pMDRCN3VuaTA0QkJ1bmkwNENGdW5pMDREOXVuaTA0RTN1bmkwNEU5dW5pMDRFRkxhbWJkYXVuaTAzQTlsYW1iZGFwaXVuaTIxMDd1bmkyNEZGdW5pMjc3NnVuaTI3Nzd1bmkyNzc4dW5pMjc3OXVuaTI3N0F1bmkyNzdCdW5pMjc3Q3VuaTI3N0R1bmkyNzdFdW5pMjRFQXVuaTI0NjB1bmkyNDYxdW5pMjQ2MnVuaTI0NjN1bmkyNDY0dW5pMjQ2NXVuaTI0NjZ1bmkyNDY3dW5pMjQ2OHplcm8uc3MwOXVuaTIxNTN1bmkyMTU0dW5pMjE1NXVuaTIwODB1bmkyMDgxdW5pMjA4MnVuaTIwODN1bmkyMDg0dW5pMjA4NXVuaTIwODZ1bmkyMDg3dW5pMjA4OHVuaTIwODl1bmkyMDcwdW5pMDBCOXVuaTAwQjJ1bmkwMEIzdW5pMjA3NHVuaTIwNzV1bmkyMDc2dW5pMjA3N3VuaTIwNzh1bmkyMDc5dW5pMDBBMGh5cGhlbl9oeXBoZW4ubGlnYWh5cGhlbl9oeXBoZW5faHlwaGVuLmxpZ2FoeXBoZW5faHlwaGVuX2h5cGhlbl9ncmVhdGVyLmxpZ2FoeXBoZW5faHlwaGVuX2dyZWF0ZXIubGlnYWh5cGhlbl9ncmVhdGVyLmxpZ2FoeXBoZW5fZ3JlYXRlcl9ncmVhdGVyLmxpZ2FoeXBoZW5fbGVzcy5saWdhaHlwaGVuX2xlc3NfbGVzcy5saWdhaHlwaGVuX2FzY2lpdGlsZGUubGlnYWJyYWNlbGVmdF9iYXIubGlnYXBlcmlvZF9wZXJpb2RfcGVyaW9kLmxpZ2FwZXJpb2RfcGVyaW9kX2VxdWFsLmxpZ2FwZXJpb2RfZXF1YWwubGlnYWNvbG9uX2VxdWFsLmxpZ2FleGNsYW1fcXVlc3Rpb24ubGlnYWV4Y2xhbV9lcXVhbC5saWdhZXhjbGFtX2VxdWFsX2VxdWFsLmxpZ2FxdWVzdGlvbl9xdWVzdGlvbi5saWdhcXVlc3Rpb25fcXVlc3Rpb25fcXVlc3Rpb24ubGlnYW51bWJlcnNpZ25fbnVtYmVyc2lnbl9udW1iZXJzaWduLmxpZ2FudW1iZXJzaWduX3VuZGVyc2NvcmUubGlnYW51bWJlcnNpZ25fdW5kZXJzY29yZV9wYXJlbmxlZnQubGlnYXNsYXNoX2VxdWFsLmxpZ2FzbGFzaF9lcXVhbF9lcXVhbC5saWdhdW5pMzAwM3BlcmlvZC5zczA4Y29sb24uc3MwOHNlbWljb2xvbi5zczA4ZWxsaXBzaXMuc3MwOGV4Y2xhbS5zczA4ZXhjbGFtZG93bi5zczA4cXVlc3Rpb24uc3MwOHF1ZXN0aW9uZG93bi5zczA4cGVyaW9kY2VudGVyZWQuc3MwOHVuaTMwMUN1bmkzMDA4dW5pMzAwOXVuaTMwMTB1bmkzMDExdW5pMzAwQ3VuaTMwMER1bmkzMDBBdW5pMzAwQnVuaTMwMTR1bmkzMDE1dW5pMzAwRXVuaTMwMEZ1bmkzMDE2dW5pMzAxN3VuaTBFM0ZiYXJfaHlwaGVuX2dyZWF0ZXIubGlnYWJhcl9icmFjZXJpZ2h0LmxpZ2FiYXJfYmFyX2Jhcl9ncmVhdGVyLmxpZ2FiYXJfYmFyX2VxdWFsLmxpZ2FiYXJfYmFyX2dyZWF0ZXIubGlnYWJhcl9lcXVhbC5saWdhYmFyX2dyZWF0ZXIubGlnYWVxdWFsX2VxdWFsLmxpZ2FlcXVhbF9lcXVhbF9lcXVhbC5saWdhZXF1YWxfZXF1YWxfZ3JlYXRlci5saWdhZXF1YWxfZ3JlYXRlci5saWdhZXF1YWxfZ3JlYXRlcl9ncmVhdGVyLmxpZ2FlcXVhbF9sZXNzX2xlc3MubGlnYWVxdWFsX3NsYXNoX2VxdWFsLmxpZ2FncmVhdGVyX2h5cGhlbi5saWdhZ3JlYXRlcl9oeXBoZW5fZ3JlYXRlci5saWdhZ3JlYXRlcl9lcXVhbC5saWdhZ3JlYXRlcl9lcXVhbF9ncmVhdGVyLmxpZ2FncmVhdGVyX2dyZWF0ZXJfaHlwaGVuLmxpZ2FncmVhdGVyX2dyZWF0ZXJfZXF1YWwubGlnYWxlc3NfaHlwaGVuLmxpZ2FsZXNzX2h5cGhlbl9oeXBoZW4ubGlnYWxlc3NfaHlwaGVuX2dyZWF0ZXIubGlnYWxlc3NfaHlwaGVuX2xlc3MubGlnYWxlc3NfZXhjbGFtX2h5cGhlbl9oeXBoZW4ubGlnYWxlc3NfZXhjbGFtX2h5cGhlbl9oeXBoZW5faHlwaGVuLmxpZ2FsZXNzX2Jhci5saWdhbGVzc19iYXJfYmFyLmxpZ2FsZXNzX2Jhcl9iYXJfYmFyLmxpZ2FsZXNzX2Jhcl9ncmVhdGVyLmxpZ2FsZXNzX2VxdWFsLmxpZ2FsZXNzX2VxdWFsX2VxdWFsLmxpZ2FsZXNzX2VxdWFsX2VxdWFsX2dyZWF0ZXIubGlnYWxlc3NfZXF1YWxfZ3JlYXRlci5saWdhbGVzc19lcXVhbF9sZXNzLmxpZ2FsZXNzX2dyZWF0ZXIubGlnYWxlc3NfbGVzc19oeXBoZW4ubGlnYWxlc3NfbGVzc19lcXVhbC5saWdhbGVzc19hc2NpaXRpbGRlLmxpZ2FsZXNzX2FzY2lpdGlsZGVfZ3JlYXRlci5saWdhbGVzc19hc2NpaXRpbGRlX2FzY2lpdGlsZGUubGlnYWxlc3Nfc2xhc2hfZ3JlYXRlci5saWdhYXNjaWl0aWxkZV9oeXBoZW4ubGlnYWFzY2lpdGlsZGVfYXQubGlnYWFzY2lpdGlsZGVfZXF1YWwubGlnYWFzY2lpdGlsZGVfZ3JlYXRlci5saWdhYXNjaWl0aWxkZV9hc2NpaXRpbGRlLmxpZ2Fhc2NpaXRpbGRlX2FzY2lpdGlsZGVfZ3JlYXRlci5saWdhcGVyY2VudF9wZXJjZW50LmxpZ2F1bmlGOEZGdW5pMjExN21pbnV0ZXNlY29uZHVuaTIxMTZ1bmkyNDIzdW5pMjQwQ3VuaTIzMjd1bmkyMzJCdW5pMjMyNnVuaTIzQ0V1bmkyNDBCRXVyb3VuaTIwQjR1bmkyMEJEdW5pMjBCOXVuaTIwQUFub3RlcXVhbGdyZWF0ZXJlcXVhbGxlc3NlcXVhbGFwcHJveGVxdWFsaW5maW5pdHlpbnRlZ3JhbHVuaTIyMDZwcm9kdWN0c3VtbWF0aW9ucmFkaWNhbHBhcnRpYWxkaWZmdW5pMDBCNWFycm93dXB1bmkyMTk3YXJyb3dyaWdodHVuaTIxOThhcnJvd2Rvd251bmkyMTk5YXJyb3dsZWZ0dW5pMjE5NmFycm93Ym90aGFycm93dXBkbnVuaTIxOUR1bmkyMUU0dW5pMjFFNXVuaTIxQTl1bmkyMUFBdW5pMjFCMHVuaTIxQjF1bmkyMUIzdW5pMjFCNGNhcnJpYWdlcmV0dXJudW5pMjFFN2Fycm93dXAuc3MwN3VuaTIxOTcuc3MwN2Fycm93cmlnaHQuc3MwN3VuaTIxOTguc3MwN2Fycm93ZG93bi5zczA3dW5pMjE5OS5zczA3YXJyb3dsZWZ0LnNzMDd1bmkyMTk2LnNzMDdhcnJvd2JvdGguc3MwN2Fycm93dXBkbi5zczA3dW5pMjVDRmNpcmNsZXVuaTI1Q0Nsb3plbmdldHJpYWd1cHVuaTI1QjZ0cmlhZ2RudW5pMjVDMHVuaTI1QjN1bmkyNUI3dW5pMjVCRHVuaTI1QzF1bmkyNTBDdW5pMjUwMHVuaTI1MTR1bmkyNTAydW5pMjUxQ3VuaTAzMDYuY3l1bmkwMzA4dW5pMDMwN2dyYXZlY29tYmFjdXRlY29tYnVuaTAzMEJ1bmkwMzBDLmFsdHVuaTAzMDJ1bmkwMzBDdW5pMDMwNnVuaTAzMEF0aWxkZWNvbWJ1bmkwMzA0dW5pMDMxMnVuaTAzMjZ1bmkwMzI2LmxvY2xNQUh1bmkwMzI3dW5pMDMyOHVuaTAzMzV1bmkwMzA4LnNzMDh1bmkwMzA3LnNzMDhkaWVyZXNpcy5zczA4ZG90YWNjZW50LnNzMDh1bmkwMkJDdW5pMDJCOXVuaTAyQzhibGFja0NpcmNsZWRibGFja0NpcmNsZWRTdHJva2UwMDEuMjAwY29weXJpZ2h0IG1pc3NpbmdHZWlzdCBNb25vIFJlZ3VsYXIA8wIAAQAEAAwAEgAZAB8AJQAqADQANwBCAEsAUQBZAF8ApADQANgA4AEeAVcBdgF7AYgBnwGmAdYB4QH3AgwCFgIdAiQCNgJlAm8CeAKAAoYCogKmArsC2gLrAvYC/wMGAxIDGQMfAyYDMAM0A0MDUQNjA28DeQOAA4kDkAOfA6YD9AP+BBwENwRMBFEEYARxBHwEhwSRBJ4EpwSyBLoEwwTKBNEE3QTlBO0E9QVNBY0FzgYRBjAGNwZJBmQGeAaUBsAGxAbrBvEHAwcWBycHNwc+B0wHWgdfB3YHegd/B4QHkAeiB7MHwwfNB9YH3wfoB/EH/QgFCA0IFQggCC8IgAiTCN4JIQl9CdYKIApsCrcK/AsECwcLTwuVC7gLwgviC/wMMAw6DHQMlQywDNMM1w0PDSENUw1eDW4Ngw2xDdoN+g4kDjMONw5VDn4Opg7ODtoPAA8lDzYPWw+AD5EPow+sD88P7xABECEQQRBgEH4QnBC6ENcQ9BELESYRQBFYEWYRfRGUEasRuhHQEdsR6BH9EgkSHhIqEj4SUhJkEnIShRKWEqESsxLFEtUS3BLsEvwTCxMQEx8TLRM7E0kTVxNlE3ETfhOLE5gTpBOwE7wTyBPUE+AT6hP1FAAUCxQWFCEULBQ3FEIUTUIdDhX3oNP7oAYOi9X4EtULeaGhf6UbDovd+LbdCxXj7TMGC7/3aL8LFdEGSfcUBS0GDrUdDvd6fxXXz66/qB8Li933ft33et0Le9/5FncLBSEG+5j7mQsB95XhAwv3wXsV90P3Avcj93j3ePsC9yP7Q/tE+wL7I/t4+3j3Avsj90Qf1QT7Fzr3BvdL90vc9wf3F/cW3fsH+0v7Szn7BvsWHwvV99QG9yg51fsU+wo9SyN1HuSEBcOZsLLZG9m6YDGMH/tOZgX7CXRYXDEaC3/VS9f4GNsL8/f08/v0BQ5Vlq10xRubn4yMkx/VaQd1gZOjH/dwB/caQd37FPsMPUcndx7khAXIm7Kt1RvXtV8xH/tGZwX7CHRXXDEaC/fAfxX3Juv3APc99z0r9wD7JvsnLPsA+z37Per7APcnH9sEKVPV9w/3D8PV7ezEQfsP+w9SQSofCzXXUe8ek9UVT2envbejpdOZH/c2qwVdBzNVT/sAHgv3qn8VCxXRBhPY0eUFE+hwHQ7lFvhM3fv293734t374vd69+7d/EQGC9zErMKoHwv3Pgb7CodJMSkb+wVK8vdL90zK8/cD379NM6If5ZEF9xpsM+n7Fhv7Oin7I/t5Hwv1Hfsm0fsX9y4fCzcHxnNKsEEb+xktIfsr+yvrIfcbHwv3UwRoc6OtqqOgrq6jdmxpc3NoHwv7iPcC+xL3Kh4L18OuyqgfC/sq1fjydwv3yX8V9wTdzuqnH5Adjx3YHQv3HvsqFdAG0rClxJ8f92v46QUvBvsr/E77NVAd91n8nAWoBnhZBXKBfIBmG04GCxXRBuX3FAUtBgvl2/cMJOHy5Qv7cMGtdtK4C6B2+FzVC8wd+wJN7/dO907J8fcC9wLJJftO+05NJ/sCHwsVyx0Or5qgpbMayla5RkdVXUxjoHGvfB4L95YW4fe2Bvdo+DgFKQb7MvvU+zL31AUpBvdq/DgFC/8AK4AA///UgAD/AISAABILe99cdveo3few3wt73/dj3/ev3wv3gNmx2QEL95j3mPuY95kFIQYLsPdcBUMGC/hOBS8GC0yPx1rYGw4BzeP3uucDQB0LFVYdC/xK/VoV2Qb3H/eTBT0GC9///7KAAP8ATYAAP9cLrKamrKxwpmpqcHBqaqZwrB8Lq/dBBfcRBmv7QQULFcgGv/eGBTgGDl6yqnW6Gw6gdvey3/eU3wsGy0tLSwUL1ftL+Fz7s0H3X/wS+2kLW3hvZFoaC+YD98F7Ffc38vcU918ft/ueN/dDB/sTjEc7+wAb+w5G9xn3Lfcuz/ca9w/dzE81oh/lkQX3Fmwo6fsWG/s6+wf7Oftj+2L3CPs49zkfCwHI5ffP5QN0HQsBseUD98J7Ffca6en3MKUfMJAFfh37d+n7I/c+HwskHS0d2xb4TN37Rfi290Xd/Ew590X8tvtFBg73XBXo+xkF6Qbo9xkFRQZFMUXlBQ75skIdDvjoB/eS/OgF9wz5WjUGCxX4TNn8TAb7vwT4TNn8TAYO+10V9wz3DPsMBgvXx7/Nu2i4XZkfC7Wrqbm5q21hHgv7cBXCtrS/wGOwUh8L4rW62R73AAYL+wwV9wz3DPsMBgv3Ldn3I9kBC8Z++wj3BfOEC6B2+QbfAQvFUc73IMoL0TEF0QYu9xkFLQYLEveE9wwk4Qv3HvwS+x4GC3vEd3b3RsEL98t7Ffcl79n3BPcKTcb7Qbwf+xqxZ6LOGs/DuePrvU01lx7lkQX3Fns36/smG/smMTj7CyHFW/coYR/3OVytZkcaRlVkKCdKxvV9HjGFBfskl/Qo9yobC/fKfxX3DOXD6eNftvs4ph8rm2ebwRq4r67Z07djU5ce45EF53tH2fsXG/sWREcvNblc9y5wH+gdJ5PfPPceGwt/1WJ2+KZ35/cUEuXf94rfO9sTvPebfxUTuj4dE3o1BxN82/imN/vQBhO8LFhSOD9nuvIe99I3++kH+xLPQPQeCwHS4fe25QPSFuH3svcUBpcG9zb7sgXqBvs9978F7KXC0u4a9xsu2/szHvtqBvdq++gV+xT3lPcUBvPFXDk5UV4jHwv/ADaAAP8AxIAAPdn3FNk991kSyRwGjBOYHAVb3h0LAb34iNsdC10dlx21q6m5uattYWRrcV0fCxXIBvcTwvcJ2e8et/uoUvddB0ErXvsG+w0aDqdmBbaVrHtrGnF5em5pc6ydfR4LZG16cXcfy5OnxMAbqaJ8b5UfxpEFyHlarFQbC/sFd05RORv7BU7y90v3TMjz9wXVxlYloh/nkQX3J20u4fsRG/s+Lfsj+3kL+/7sHRWqpKWpqnKkbGxycmxtpHGqH/dFFqqkpamqcqRsbHJybG2kcaofC98T6NMdCxbZBvmi98IF9Qf9o/fCBT0GCxKl+LgT3JEd4wb7bPlaBfsIBgsW2QaM+VoFPQb9o/vCBSEHC/eP+6MV28i41LxusVyfHwv9ChUT7DEdBvcp3sf29wA4x/spHwv7kvzoBfjoNf1a9wwHC/j6Qh0OZvtcBTIGf0UF4wZr+0EFNwZ/RQXeBguXHR8L6x2uuAv5vSUdDn/b+B7bw/cZYLYSC/gWpAb3Rirv+x77Ji77Afs8CzGSBVV5XmhGGy9SxPcGhR8LpRbjBsX3WgX3lAbF+1oFC3/b9zTV9zTbAQsV9zD3MPswBgv3kvjoBfzoBwv7G3b3MPcMAQt3AfeZ2QP3mQtCyF7bHsQEXWulsgt/21x2+GLbC6B2+GjVf3cL1u7W19fu1QtvaH5saRpZrW3DC3/bR8/4IstL18f3FJ8dC/sVdvce2/ge2393Etv/AE6AAP//sYAA3/e+4xPm1x0T6kNQaUxrHxPaiuAFE9Y9Bvd+/GIVLlLO9xYfE+b3FsXO5+fDQvsQHhPW+xBTQi8eDn/b9z/V9ynbxfcUUh37QPezJx0SweP3vt///7KAAP8ATYAAP9cTngA1HROdADgdE1yAjj8FE24A1/imNwYTngA6HROcgJzbFfsCYOvw9Lbr9wL3AbcpJChfKfsBHwvTBhNosPdZBeMGl9EFNAar90EF3gaX0QU5BhMYTx0TKGb7XAX7EQYTGE8dE2iKHROIZvtZBdMGE0iw91kF9xEGE4gLe9/3gt/3kN8B+HXmA/e4exX3NfcL9zf3ZPdu+wP3Lfs9+wUvN/sZYx/mgwXdocfG0xv01SP7KJUf/FkGjFkF+2WP9Psn9y4b3wQtUeH3LHgf9/sG+yx0SzUmGw5/2/cp1fc/2wHH5/e64wP3t/iyFfsEOUgsbx/lhAXBnbiu0BvnxFL7BpEf/BZyBvtG7Cf3Hvcm6PcB9zz3PC73AfsqHvsf+9kV97oGKX1UWDkbPVK68YMfDvsQ5cL3ER3h783fE+frFt/30QbtxcDd26tWKR770d/36Qf3BFLk+w0eE+tCTWlCbx8T24nqBRPXPgb3Kv18FcMGy+kF4ScxrQcOoHb4aNW11UH3EhLv3/eQ3xPcpPjcFdb83N/30Abtw8Hg1bBaJR770d/36Qf3Ckze+wZDT21KcB73HeoHE+zVLAcT3L83BxPsV0AHDhXlxOT3Iuxf4i8/UVU0N8FU0B8T9LKqnKafHz+Cal1bG210mqeBH1CFBRP4Tp28asIblPdUFV5zrbu8pa63tKloWoofW4praWUbDgb8uPvAFfty93IF+EPZ/EMG93H3ciwd95j7mAUT8PhAVBX3DPcM+wwGE+is5BXCBpHRlPcN2xr3ejX7egc7lfsNkUUeDnvf+NLfrB0OqR0OFejF2/cT9xRR3C4uUTr7FPsTxTvoH8YEeHqRl34f9xb3ZAWRdY5xbRotalVSHjH3KBXsrMDEnpyFf5ge+xb7YwWFoIikqBoL5QPRFuH3tPcoBt+vbkmRH5z7VQXiBnn3YITWbrFImBnIosHJ3hr3GC7b+yke+2wG92z76BX7FveW9xYG7MJbOTlUXSofC/sQ5a3V+MbVEveY70jfE+jPHVb9ohUT8MMGy+kF4ScxrQcOAbHl9+zlA0YdC/sq1fio1d7tEvf04zeBHRPw94b5RRUT6OPtBhPwMwYOSB0TgIBdHROAkIsdEyCQaB0TgJBka3FdHgugdves3fee3QHl4few5QPlFuH3rPcW9wEd+2wG92L78BX7DPee9wwG9wS/XDU1V1z7BB8OPx0BwfiEA0EdDt872xO5APebfxUTuIA+HRN4gDUHE3kA2/imN/vQBhO5ACxYUjg/Z7ryHvfSN/vpB/sSz0D0HhO2AAsV28PD3dhXx0Jvd4J3dx+Y8QX3LcT7YgZs+3YFxwbWHQ4qHd/tEuXhjePz4xP6Nx0T9uPfJR33VCklHQ4iHd7tEvdS45rfkOMT6NsW+HRcHQYT9PcC+K8lHfdUKSUdDhXZHQsB5eH3vOUD5Rb3PAb3TPcM9xL3ePd4+wz3FPtMH/s8Bvc3/QgVPvi22Ab3Htwt+0j7SDov+x4fC6B2+GjV9zx3Ae/f95DfA8cdDisdAbPf98DhA/enexX3JObr9zIf+Gw1/GwH+wRaUScpWsH3CIceN4MF+yiP5Cn3IhsOi+r4+3fn9xS8HQsqHdT3FAHl4QM3Hfda1CcdAcfh98jhA/fAexX3KuXx9zYf1B0LAbP4nAP3ABb3FgbJ+F3J/F0F9xYGz/laBTEGV/z7QfirBTMGQfyrV/j7BTEGCwGf+MQD9xEW9AbR997R+94F9Qbz+KYFLwZI/E4/+AQFMQY//ARIUB0L+xDlrd35CHcB7+Hq7/cJHfc1/jAVwwbL6QXhJzGtBw4B5d8D5Rbf9x4G8/cC90L7jAXxBvtv98X3Zfd1BfsEBvuW+7EF+GU3BwsGc20Fmx2xq5Wbmx6MHQvXgB0O+Or3GWC2Evc096wToPc0+OoV0QYTYNHlBROgcB0OO3tVY0cbKVHV9w/3D8XV7c+9Y0WbH+ORBfcKdTnN+wob+ygr+wH7PAv/ADSAAP8AyIAA//87gAD/AMSAAD3Z9xTZPfdV+1X3WRLJHAaME0YLi9X4xtUB95bfA/glFvcz1fszBmJ5nrYf+NL7mkH3RvyIBzS+WuceC8EV9oxOHfdy+3IFC+8W3/fQBu3DweDVsFolHvvR3/fpB/cKTN77BkNPbUpwHvebNwcL/wA2gAD/AMSAAD3Z9xTZPfdZEskcBowTqPhBwRUTaPsL9wsFCwHF4QP4WBb3BQb70ff34B0LA/fAfxX3Juv3APc99z0r9wD7JvsnLPsA+z37Per7APcnH9sEC7+zs7+/Y7NXV2NjV1ezY78fvQRzeZ2jo52do6OdeXNzeXlzHwv3wHsV9zzp9xn3geQdH98EC6mjo6moc6RtbnJybm2kc6gfDuMd9yA39xsdC/e5+MwV/IL7aUH4dNX7S/h8B+xYvioe+xVB9xEGtqRyYB8LFcjXt8Rf95NYBvta+5oFWfdQB/sCxBX3AvcmBfsmBw4iHdP3FAH3ud8D2xb4dFwdBgs1+4UGNTpOIEZYw+Ue94Y1+4YH+yHfMvcO39W0xqkeC/cC+yoV91gG5LjI5B/4pvvUQfeA/FwHX3RrZx77TwYL+GI1/GIH+wdWSiYmVsz3Bx74YjX8Ygf7NuUl9yoeC/cr950FKwb7JfuSBfeSN/uSB/sl95IFKwb3K/udC6+hpJCiG7OqZl5cbGljZ2yirYQfTIgFSpHDXdQbC9v7KhXf93AGWKfIbNAb9zLR9xf3JvcmRfcX+zIfC/s86PsB9yoe9x/32RX7ugbtmcK+3RvZxFwlkx8L3cG92Y8fUQZdhW13XRtdbZ+5hR9RBj2PwVndGwugdvkI3S0d95UW4fkI923d/Jw5920GDgO9FviI3fwoBvgg+LIF4fxuOfgOB/wg/LIFC43VFVNjpb21m6fbmx/3Pq0FZwclT1H7Ah4Li/cM9zDZ9/h3EvmC9wwk4RPo+mX3qBULwRX2jE4dE2j3C/sLBQsVMlTX9w33D8LV4u3FQfsP+w1RPysfC/fH9/cF+wUG+7777wX37zX9WuH37wcL91T39gUpBvsn+7P7J/ezBScG91T79Qv5BdMB9zr3oAP3OvkFIR34Dhb3ItX7IgZcdaK8H/fK92fV+2cL94Mt9xn7PPcCHQv8WxX7IPdO9yD3Ex0O90v4aPtL+GcFOwb3S/xn+0v8aAULwRX2jE4d93H7cgUL9wh3o3ldGltddT03W7LNgR4zhQUL91b3NftV9zUF+w4LFdsG+0v4aPdL+GcFOwb7S/xnBQtzwwWBf3eHfRt4gJWfm5Ccpa0fCxX3BL9cNTVXXPsEH/sM954GDgYTmPcL9wssHfeY+5gLxHJ39y/Ee3cSnMhcyPcSyFvKCzX9BvsI+QY1/Qb7CPkGNQYOk/cIIvsFmPsIUAsB9ynfA/cpFt/4XPez1fwHBgt3Er3j977f//+ygAD/AE2AAAsGE1i49xUFOAYTaF77FQULAe/h9wkdC0UHwG1VqD0b+y5F+xf7Jgtesqp1uhvCtrS/wGOwUh8L95j3mAUhBhOg+3H7cgULBvcDHQv7PC37GfuD+4Hp+xn3PAv3KOva9xz3HCva+ygfCwa3cVC1QRv7IDQg+z4LxPc3wtTEAfgJygP3wAv3Bi52+Oj3Bot3EtHhC3vf+NLfv/cZYLYSseULNxX5Vfuj/VT7owUOA+8W+Ezd+/b5CDUGC/kdFfyN+7f4jfu4BQvfXHb3qN33sN8SseUL96jZZbESyfrIE6ALBSIG+5n7mfeZ+5gLBtm1vO2VH6z3yQULmPcI+wUjkvsITRsL/wArgAAS96rIXLoLdvho1X93EuvZPd8L9ybf++839wcHDgbru2xMTVttKx8LFfe3/I33uPiNBQud+TgB95nZA/hhC/sC+fAB9wD4FAML9wrh1/cKoR8zkQv3itk992H3HNkSC/sVdvcq3/kGdxILdvhi27XVQfcSEgv7IPtDQfdD+8oHCwEAAQAAIgAAqwABhwEArAIBiQEArwEAigAAIwEBiwEAsQABjQEAJQABjwEAmgAAJgAAsgABkQAAswEBkgAAtQABkwMAJwEBlwYAKQABngEAKgAAtgIBoAAAuQABoQIAKwABpAEALAABpgEALQABqAIAjAAALgEBqwIAugABrgAAMAAAuwMBrwEAjQAAvwAAjgAAMQAAnQAAMgEBsQIANAABtAAAwAABtQMANQABuQMANgAAwQABvQAAwgIBvgQANwEBwwMAOQEAxQABxwAAxgAByAEAOwABygAAxwAByxoAQgAAyAAB5gEAyQIB6AEAzAEAkAAAQwEB6gEAzgAB7AEARQAB7gEApwAARgAAzwAB8AAA0AEB8QAA0gAB8gMARwEB9gYASQAB/QEASgAAkQAA0wIB/wAA1gACAAIASwACAwIATAACBgEATQACCAIAkgAATgECCwIA1wACDgAAUAAA2AMCDwEAkwAA3AAAlAAAUQAAogAAUgECEQIAVAACFAAA3QACFQIAlQAAVQACGAMAVgAA3gACHAAA3wICHQQAVwECIgMAWQEA4gACJgAA4wACJwEAWwACKQAA5AACKi8AiwAAjwACWokAEQkC5BQAYwAAmwAC+QEAngAAowAC+wABQAMC/CwADwAADQAAGwEAeQAAAgAAYAAAIAAAewAAcgAAdAAACwADKQAABAAAEAAAPQADKggADgAAbwAAiQAAQAADMwAACQEAXAAAXgAAPAAAPgADNA0AdQEAaQAAdwAAQQAACAAAagAAeAAAawEAAwAAaAAAZQADQjIAIQAABwAAcwAAZgAAqgAApQADdQAAmQAAoQADdgEAXQAAoAAAcAEDeAcAYQAAZwAABQADgAQAYgAAZAAADAAApgAAqAAAnwAAHgADhQAAHwAAHQADhgEAnAADiAAAXwAAlwAAPwADiQcABgAAegADkUQAgwAAggAAfAEAhgAAfgAAiAAAgQAAhAAAfwEAhQAAhwAD1gYDOQIAAQD9AP4BEAEfATcBRgFmAYEBjgGwAdQB8QIaAl8CYQJmAnACfQLKAtcC5gLrAvcC+QL7AwADDAMYAzEDMwNFA0cDYQOQA74DwAPfBAEEJARHBHkEpwTNBPgFOAU6BYEFowWlBa0FvgXABd8F5wX3BiAGPgZABngGuwbDBtAG4wbrBvgHGAcaB0gHSgdZB2UHbwdxB6AH6QfrB/IIDAgiCCkIMQhGCLsI2glRCVMJlQnjCegJ9AoBChoKHwopCjYK2wr5CxcLdAt2C54LrwvcDAQMCQwODDsMWQxyDHkMgQyaDOANGg05DWENaQ1vDakN3A3iDeQN5g3tDf4OFQ4cDjsOQA5NDloOaw5tDm8OcQ52DoIOjw7iDuwPFw81D1cPaA99D5YPuQ/0EAcQNBBKEGIQehCSEMQQ2REDERgRLRE0EWsRoxHIEegR7xIaEkYSbBKZEyITghOEE5ATnxPdFCEUNRRXFIIU5xVZFV4VaxV4FZYVmBWtFa8VzRYWFmwWbhafFrkW9xceF1YXghevF+EYPRg/GEEYYxhlGG8YdxiJGIsYjRiVGKYYzRjtGO8Y9BkBGRAZGxkrGWUZaBl0GYMZhRnCGh0aMhpUGnUadxqpGu8a+xsOGykbQhtVG2kbgRv3HBYcfhyAHMMdLh1CHWgdjh2vHbEeER50HvcfEh8vH5sfvR/yIBcgTyBuII8glCC/IPEhDiEcISMhTyGbIc8iESI1Ij0iQyJ1IqAipiKoIqoisiLDItUi3SL/IwgjGSMpIzojPCM+I0AjfiOnI+8kGCRKJIIkqyTXJUwlfiW6JeUl7CYjJjAmbCalJqwm6Sc0J2gnpiepJ7snwifdKBcoNyhJKGIoeCipKKsoxijIKPApBSkdKTApWimYKaop4SoUKokqwSrTKvcq+SsBKw8rKitLK5crnCueK6Ar3SxZLGwsjiyTLKAszyzRLNMs1SztLO8s9Cz2LTAtcS3QLdIt6i4VLiwuTi59Lp4u5S8LL2QvwS/GMBEwYjBkMGYwaDCfMP8xQzGCMbgyFjJsMpgy7jMWM0UzRzNxM6YzyDP/NAE0AzQqNF80pzS8NSw1lDWZNaQ1wTXrNj42QzZFNkc2bzbkNvU3DDcjNzk3Vjd0N6030jfeN/c3+Tf7OBI4FDglOI04jzinONU47DkROTc5VjmIOa058TpLOk06mDrbOt063zrhOuM7QTuIO948PDyaPPM9KD1lPZw90z3uPiQ+UT56Pnw+fj6APps+xT7dPv0/aD+pP+FAUkCzQOVBNEGeQc5CI0KMQrNDLEOWQ7BDzkPkRAVEFESFRJtEqkTKROBFQEVvRYpFuUXvRglGNkZmRpxG8Ec2R0lHhEfdSCJIcUjESTJJdknkSktKrkrASt1LKUtzS5lL2kv9TAxMRExXTGtMkkymTNRM5UzuTQRNEk1JTZRNlU22TeJOBU4WTitOTE5nTq1O309ET2NPik+oT89P+VA1UI9QsFDcUTlRXlGkUdRSCFIOUhlSKFI+UlhSalKeUq5TCFMSUzNTalOPU6ZTuFPNU9tT61QbVDlUY1SMVOFVNVU9VVJVZVV4VYlV1FX9ViZWfFbRVu1XClcZVz1XXFdyV4lXn1ezV8hX71gZWElYeFixWN5Y6Vj9WSFZOFlHWVhZllm+WeNZ8loZWilae1r9Wx1bgVuoW9Rb8lwSXDJcUFx/XJRcrlzsXUBdg12cXcRd+14wXmleu17VXvFfRl92X4NfkF+qX9JgCGBbYI5gp2D4YSFhWmGOYchiD2JgYtVjPmOPY8Fkj2TxZSFlemW5ZhpmV2cWZ7Rn4WiBaQ5pgWnqaidqX2pvaotqnWq1atZrCGt2a59r1mwTbFxso2zmbRRtim38bpxvGG+Ub9dwLXB3cORxHXE6cURxeHGTcZ5x5HIHcidyUXJ6cq9zS3OSc6hzznRNdIx0vnTxdR11RXWtdfV2E3bHduV3E3cmd053b3eXd7B32ngqeHp4zHjxeRJ5Wnmlecl57XoTejR6XHqXeq960HrmewV7G3s5e1Z7dXufe8d79XxCfbd95n34fg1+HH4rfkx+bn6JfqN+qX68ftB+437sfv5/EX8Wfxt/IH8zf0Z/S39ef3B/hX+gf6V/tn/Hf9h/3X/if/iAC4AegC6AMIAygDSARIBGgFaAZYB3gI+AkYCTgJWApYC1gMaAyIDYgOOA8hz6aPsqzaq4qqGquKrEqqLAoKyhqq5xpaqlq66rpKquqssS49JE00P3GfsZ91ksqmz3XPscqmz3HEHVE/+/Ffga+bQV+8L+SvfCBkH3whUg+zH2BxMQACD3EmwVExAACCxeBhMaACHqBqr3hBUgBxMOART7MfaqP+q4BhMGAEJsdWrABhMDYQXq9wgVLPsxrPcSyQeqxBUTAaEFbE1JLKrJrk2qBxMAEEDJ6BUTABAQbGgGEwA4QaoGrM4VSMlrBxMALwH7Me4G9zH3DhVsTWjJbPsxqgcT4AaBya5Oqgb3MP1dFWxtB0heBexsBhPgAQD7MaoGzbgFSaoGDg4uChKl+LgT2DIKXfxCFRPoMR0uCuf3FIMdn9NCHfsYhh0uCujJEqX4uBPcMgrF1LUdI/yLFRPsMR0uCuL3GYMdOfdctgpphh0uCuMgCqX4uBPaMgo4zxXRBhPW0eUFE+pwHVP9CxUxHS4K8u0S9zTj8+MT3jIKOd7CCvsw/PcVE+4xHS4K5/cUgx2n8Qqbhh0uCvcH0xKl+Lj8LfegE9wyChPqPuoV96DT+6AGqvzpFTEd+2bP9zd291rd9/TZi3cS+DrXE+yRHYxeCpWDCl38QhUT9DEdLgrXvd+9Evdkvd+9E98yCsXDFcsdI/ysFRPvMR0uCu8kCvciJh0T1zIKE9v3CtsmChPXJQoT23mhoX+lGxPn+zj8khUxHYvf9wrfqN33ed863BL31eET1JUW5AbL914F9zL7XveZ3/tDBhP093v3N937N/d59z7f++EHE8xU/DwV9wP36wWg++sGDo8KIgpgHQ4iCsP3FGAdZWMdIgq+9xlgHfsg+jIhCkQdod740t8SseX3c8IX98hpHaCh9wuX3uej9yUZMJAFE15+Hfts4Psg9y5+HxP+bWqnZgW2lax7axpxeXpuaXOsnX0eE15iZQUT/lkd9wcdE+iZCvsh+a42HSIKzu0BseX3FeOMCl6NHSQdth0OJB3O9xm2HS/50CEKkwqTCiodYQoOKh3U9xRhCvdS1CAdKh3P9xlhCuP3XSEKKh3QIArl4RP0Nx3i0BXRBhPs0eUFE/QnCrMdKh3f7QHl4ezjAzcd90vfJR0Ouh0qHevTEuXhkvegE/g3HRP06OsV96DT+6AGDvtmz/ci3fd+3fd63QHl4fds1wPlFvgDwB2HjAXc+/b3fvfi3fvi93r37t38RAcOKh3cJArl4XsmHRP1Nx33tNwVxLC3148fVwZZh357cht7fpKcdh8T6yUKE/UjHaEdoHb3xt33hN0B7+ED7xbh98b35N375PeE9/bd/EwGDnv3Cx337dw72xO89757FeHBtcytHxN8OwoTujkdE7w9HQ5LHcTJErHl9+3cO9sTvkIKE347ChO9OR0Tvj0djPmzFdkdDksdvvcZErHl9+3cO9sTvkIKE347ChO9OR0Tvj0d+x/6MiEKSx2/IAqx5fft3DvbE7sAQgoTewA7ChO6gDkdE7sAPR37IPmuFdEGE7cA0eUFE7sAJwr7EOWd9wsd9xfv9wbcO9sTXwBCChM/ADsKE16AOR0TXwA9HVD7WhXDBhPfAFUKSx3O7RKx5fcS4/cX3DvbE78AQgoTfwA7ChO+gDkdE78APR1fjR1LHdrTErHlr/egtNw72xO9AEIKE30AOwoTvIA5HRO9AD0dE78A+xr5ySEde9/a1cHf96/fAZ/l+ALmA/fBexX3BN7H8rUfwNVrBpCojqusGrf7njf3Qwd4inmIeh77P0H3JQZZbVluSqYKDrEKoHb31N/3Ed8390kS5uH3iuET7Pg7FuH4pc7fSAYT3Ow1BxPsKvuKBxPc7DUHE+wqSDfO/KXh99T3igf7it8V9xH3ivsRBw6gdvfQ3ffMd+MgCs/h97jhE/bKCubPFdEGE+7R5QUT9icKYR20CvdK+VAgHSQdzyAK95XhE+g4Ctr5TDYdnwokHd7tEveT4zXhE+g4ChPw90P5WxUT6OPtBhPwMwYOtAr3UvlQJx0kHerTAfeV4QM4CuD5ZyEd+2bP9yLd+LbdAfeV4a7XA9sW9/9eCt37Rfi290Xd/Ew590X8tvtFBw4kHdskCvciv8rhyr8T5jgK96z5WCYKE94lChPmIx24HSsd5/cUAbPf98DhA/enexX3JObr9zIf+Gw1/GwH+wRaUScpWsH3CIceN4MF+yiP5Cn3Ihv3LGMdKx3jIAqz3/fA4RPs96d7Ffck5uv3Mh/4bDX8bAf7BFpRJylawfcIhx43gwX7KI/kKfciG7z5rhXRBhPc0eUFE+wnCigKAcfhdwoOKAri9xkBx+F3CthiHfsQ5cJ2+Vp3Acfh7e93Cvc4fAqL3fkId/QdDovd+Qh35/cU9B2QRwqL3fgW94aLdxLv4ROw7xb4TN379vkINQYT0Pdc+4ZYHb4di935CHcB9wXhA5X3uxXyuwX76/hM3fv298EH9wvDZ9c4ZAX3fjX7pgf7H0oFDqAKzwrRFuEGE2xkHROcaAoOUwrn9xSrCvdU0yAdUwri9xmrCuViHZcKUwrvJArR4X0mHX3hE1ZA0RbhBhNmQGQdE5ZAaAoTWoD3ttsmChNVQCUKE1qAIx37Kt/idvjo9waLdxLR4fer6jXhE9r3ofsqFfIG58XD4h+Sk/laNfzoB/uS+OgF+wz9WuEGE+z46Af3kvzoBaSDBmV2d2EeJAYOpx10CmX5XiAd9wcd9+zlE+xGHfsh+VoV0QYT3NHlBRPsJwoiCs7tAbHlq+Pz46vlA0Yd+yD5aSoKdApt+V4nHXQK+wL5XkYKIgra0wGx5bD3oLLlA0Yd+xv5dSEdIgoBseX37OUDsXsV3waovAVrs716xhvuCvcIdeZhyh/H8QU5Bm9cBapjWptQG/s8LfsZ+4P7BaAytEwf91x2FWFomadwH/eM+DsFnl2UT0Ia+05NJ/sCHvtA97IV907J8fcCtK19cKYe+4z8OQV6uILG0RoOIgrLJAqx5ZkmHZnlE9lGHRPrx/lmJgoT3SUKE+sjHXvfR9/3e933ed9H3xKS4/d94zXhE7X3aHsVurKerasfE3Vm95rfBxN2+0T3e/c43fs493n3P98GE3X7lQYTbWYHrWtknlwb+xU/+yL7eh8Ttft41/si9xUeE67fBDZr9wL3RPdGq/cC4OCq+wL7RvtEbPsCNh8Orx2gdvcp3/ed3/cUdwHl4ffA5QPlFuH3KfceBvcz6N33HfcbLtr7Mx/7HvcUNQbh/HEV9533Hgf3AMFgNDJVXfsAHw4iCgGx5ffs5QP4OEUV6wZO9gXRxrD3APcqGuQdqaaPk6QeOdMV+wJN7/dO907J8fcC9wLJJftO+wN1O2JcH1bnBSsG2fscBYh/fop+Gw6FCnUKDoUK0/cUdQpl+DAgHYUKzvcZdQr7IPiwIQr7EOXCdve03feW3QHR4fcA79WqHWH83FQKIgpfHQ4iCsP3FF8dWWMdIgq+9xlfHfss+jIhCkQdXvcqT3b5I98SyOX3TcLW5RPvgPe5+3AVwra0v8BjsFIfnqAF9ySM7tn3Axr3Ck3G+0G8HvsasWeizhrPw7nj671NNZce5ZEF9xZ7N+v7Jhv7JjE4+wshxVv3KGEf9zlcrWZHGhNXgEZVZCgnSsb1fR4xhQUTT4CW+xXgL/cQeAgT74BraKdmBbaVrHtrGnF5em5pc6ydfR4TT4BiZQUT74BZHSIKvyAKyOX3z+UT7HQd+y35rhXRBhPc0eUFE+wnCvsQ5Z3f+NLfEsjl9wHv9eUTfHQdRPtaFcMGE/xVCovf96HS917fAa/h+ADkA6/4iRX8ieH4iQfctLfUHvdGBvtr+1EFNgfxjAX3BozSWDUaOk1XJh77Gjf3Ggb3Lu3l9xf3EPsA3fs0iB/3cPdWBef7twf7Dz47+xUfDtodoHb3y9X3h90tHfeVFuH3y/cx1fsx94f3bd38nDn3bfuH+zFB9zEGDqB2+QjdzvcZLR3cCir3riEKRB3FdvkI3RL3leGEwhN895UWngZfWwUT+nwdE3xiZQUT+vYdE3ytsAWa6woO+xDlwnb5CN0S95XhNfIn3hPw3Ap6/d4VE+jDBsvpBeEHE+QnMa0GDisdux0OdgplYx0rHejJAcfh98jhA0AK+bME3cG92Y8fUQZdhW13XRtdbZ+5hR9RBj2PwVndGw4rHeMgCsfh98jhE+xACvsh+a4V0QYT3NHlBRPsJworHfLtEsfhmePz45nhE/JAChP++yD5vSoKdgpt+bInHXYK+wL5skYKKx33B9MSx+Ge96Cg4RP0QAoT/Psb+ckhHftmz/cS3/kWdwHH4fXX9xLhA/fAexWPBoB9BU8KrrgF6K3A5PcRGvhiNfxiB/sHVkomJlbM9wce+GI1/GIH+zblJfcqHg4rHde9370Bx+HJvd+9yeEDQAr5ogS/s7O/v2OzV1djY1dXs2O/H70Ec3mdo6OdnaOjnXlzc3l5cx8OKx3vJArH4YcmHYfhE9lAChPqx/m6JgoT1SUKE+ojHYvrQHb5WncSo/i8E3D3iBb3BAb3cPlaBS8GE7D7TPz6+0z4+gUvBg6L6vj7d7wdDrkd93JHCovq+Pt34yAKs/icE+j3ABb3FgbJ+F3J/F0F9xYGz/laBTEGV/z7QfirBTMGQfyrV/j7BTEG9wvPNh2L6vj79Qr3ABb3FgbJ+F3J/F0F9xYGz/laBTEGV/z7QfirBTMGQfyrV/j7BTEG9wzeKgq5Hfd6gAqiCqoKqAqP+IAgHSgK4yAK95bhE+hJHSj4fDYdKAry7RL3NOOV4ZPjE+hJHRP8KfiLKgqoCpf4gCcdKArvJAr3Ir/L4cm/E9RJHRPm8fiIJgoT3CUKE+YjHSQdeR0OJB3T9xR5Hfdo+UwgHSQdzvcZeR33AvnMIQokHd7tAfeT49sd92H5VyUdDr8Kvh2XCloddx0OWh3T9xR3HWr4MCAdWh3O9xl3Hfsb+LAhCvsQ5cJ297Lf95TfAdLh6O/s5QPSFuH3svcUBpcG9zb7sgXqBvs9978F7KXC0u4a9xsu2/szHvtqBvdq++gV+xT3lPcUBvPFXDk5UV4jH1T83FQKTB0Bn+X4Al4dDkwdxMkBn+X4Al4d+bME3cG92Y8fUQZdhW13XRtdbZ+5hR9RBj2PwVndGw5MHb8gCp/l+ALmE/ZzCvsh+a4V0QYT7tHlBRP2Jwr7EOWd3/dj3/ev3xKf5fcr7/cH5hN+cwpP+1oVwwYT/lUKTB3O7QGf5fcm4/cYXh1ejR1MHdrTAZ/lw/egteYDcwr7G/nJIR0uCuuKCsz3BBPeMgps14Ad+1T8jhUT7jEdIgrC9wABseX3DPcAjAr5sQSpo6OpqHOkbW5ycm5tpHOoHw4qHdj3BBLl4YgtChPoNx0T9vcf2BWqpKWpqnKkbGxycmxtpHGqH/dFFqqkpamqcqRsbHJybG2kcaofDiod0/cAAeXh4/cAAzcd93jTKwpLHcL3ABKx5fcJ9wD3DNw72xO1AEIKE3UAOwoTtIA5HRO1AD0dE78AjPmxKwokHdeKCoHhgPcEE8g4ChP09xf5VCkKJB3S9wAS94r3ACrhE8g4ChPw93D5TysKIgrH9wQSseWmLQqn5RPSRh0T/jL5YikKKx3r9wQSx+GULQqV4RPyQAoT/jL5tikKi+r4++QK9wAW9xYGyfhdyfxdBfcWBs/5WgUxBlf8+0H4qwUzBkH8q1f4+wUxBvc/wR0oCuuKCoLhf/cEE+hJHRP0XPiEKQokHdL3AAH3ivcAA70W+Ijd/CgG+CD4sgXh/G45+A4H/CD8sgX3jvlLKwpMHcL3AAGf5fcd9wD3DV4d+bEEzR0wHRLB4/eW3xO4KR0TeDIdE7g0HQ6NCpP4sCAdMB3IyRLB4/eW3xO8KR0TfDIdE7w111HvHpPVFU9np723o6XTmR/3NqsFXQczVU/7AB65+LEoHTAdwvcZEsHj95bfE7wpHRN8Mh0TvDXXUe8ek9UVT2envbejpdOZH/c2qwVdBzNVT/sAHi35MCEKMB3DIArB4/eW3xO2KR0TdjIdE7Y0HSz4rBXRBhOu0eUFE7YnCjAd0u0SweON4/Pjc98TuSkdE3kyHRO5NB0Tti34uyoKjQqb+LAnHTAd3tMSweOS96B63xO6KR0TelWWrXTFG5ufjIyTH5AKE7o0HRO0MvjHIR37Zs/3FtVjdvhh2xLB4/eW3xPcKR0TvJRgonOyhHJsGE8KrrgFkAoT3DQdDjAdt73fvRLB4729372j3xO+gCkdE36AMh0TvoA0HRO/gLn4oEcdMB3PJArB43smHWHfE6yAKR0TbIAyHROsgDQdE7UA9fi4JgoTqoAlChO1ACMdLAoSmN/3IfEm7/c2/wBWgAAT9vg9rApZbh++c2KkURs2WVP7BHof3oQFE/rClJmzuRu6nmQmHzZ1BTV2VU4+GizIU9SJHsyNurSd1AgT9j+nvWPRG/ui2xVpiHOpuRqyprDBmB7ImgVxByZxXVGHHvfu94kVE/r7NQb2laS1vRsT9rehYSCVHw6YHfc8dxLb/wBNgAD//7KAAN/3vuMTtvfXfxX3IOL29z73PjT2+yBBUGFfcR/3kjcHE3b9WgcTetcGE7qO2wUTtlGpx2nVG4bbFStR1/cN9w/F1e3iwkH7D/sNVD8yHw6WCiMKx/cUAdFbCmSJHSMKwvcZAdFbCvsh+XohCkQdptlSdvhs2xLR4/dTwhPv98ZpHaKl9wKR2tag9wQZM5EFE1fDHfsv3CP3FXsfE+9oZXwdE09iZQUT71kdjh3R4xPo985/FfcXHQU7e1VjRxspUdX3D/cPxdXtz71jRZsf45EF9wp1Oc37Chv7KCv7Afs8+zzr+wH3KB/7Ivj2Nh0jCtLtAdHj9wJbCl35BRXj7TMGDpgd9zzyHRO896l/FRO61cetxakfE3qOOwUTfM0KE7y4Cg6YHUH3hovyHROu96l/FROt1cetxakfE22OOwUTbs0KE664ChOW95b4JFgdf9tc9xodveP3UvdUN99aCv8ATYAAE64A99z43BUTrQD3APsU9wQd+z7iIPcgHxOsgNXHrcWpHxNsgI47BRNtANf43MgGE7UA1U4HE60AvzcHE7UAVwcTtgD7AAYTrQBd/OLfHQ5/2/f22/dwdwHF4/fJ4wP3kfiiFfcMtaduoWWaXBmoZV2eVhv7Jysp+zP7M+sp9yf3Juvt9z33HnD3C0nfH/cBsXPL+x9aWbJKpTmTGXdBu4e1ga96GT9wBdP8nhUpUsv3BfcFxMvt7MRLJPsSUk4qHw4sClIdDiwKxfcUUh37SPezIB0sCsD3GVId+674MyEKLArBIArN4/e65xP2QB37r/evFdEGE+7R5QUT9icKjgosCtDtAc3j9uPu5wNAHftP974lHQ6eHSwK3NMSzeOc96CU5xP6QB0T/vup98oV96DT+6AGDvtOz3Z29yjb9z/V9ynbEs3j9yLX1+cTf/fJfxWjjAUTv3Jqf21rGlmtbcMeE3+xq5Wbmx8Tv4wduKirt5vAGZAdjx0eE3/YHQ4sCs0kCs3jhSYde+cT7QD3yX8V9wTdzuqnH5AdE+yAjx0eE+0A+zzo+wH3Kh4T7ID3H/fZFfu6Bu2Zwr7dG9nEXCWTHxP1ADn3uyYKE+sAJQoT9QAjHaIdRR311QH3fN8D93z4yBVp+zZB9zb8XN/4XPdg1ftgrQe3oae1Hvcq1fsqBidbVy0fDjkKhAoT9joKE+74ggcT7TsGE/U7HRP2NgoOOQroyRLH4/e+3zvbE/cAOgoT7wD4ggcT7oA7BhP2gDcHxnNKsEEb+xktIfsr+yvrIfcbHxP3ADYKjviDKB05CuL3GYQKE/cAOgoT7wD4ggcT7oA7BhP2gDsdE/cANgr7HfkCIQo5CuMgCsfj977fO9sT9YA6ChPtgPiCBxPtQDsGE/VAOx0T9YA2Cvse+H4V0QYT84DR5QUT9YAnCjkK3uUSx+Py7+rfO9sT94A6ChPvgPiCBxPvQDsGE/dAOx0T94A2Ctf5LeUKOQry7RLH4/Tj9N872xP3gDoKE++A+IIHE+9AOwYT90A7HRP3gDYKYfiNJR0OOQr3B9MSx+Oa96Ca3zvbE/aAOgoT7oD4ggcT7kA7BhP2QDsdE/aANgoT94D7GPiZIR37Ntvqdq/b9x3V9yPbf3eEChP7APe794kV9ygGNn1UVzwbMFPP9wH3AcHP6N3EVTKVH/spBo38dRX3JuLV9xAf92W/1VcHE/cA92cHE/aAOwYT+oA7HRP7ALwKDrcdpB2gdvho1fc8d+MgCu/f95DfE/bHHSnPFdEGE+7R5QUT9icKeAoiHQH3ud8DQQoO0R33aPikIB0iHc8gCve53xPoQQr3AfigNh20HXgK0R33cPikJx0iHerTAfe53wNBCvcH+LshHftmz/ci1fgS1d7tEvex4zvftNcT9tsW+CdeClwdBxP692H4ryUdDiId2yQK90C/0N/GvxPUQQoT5vfK+KwmChPcJQoT5iMdrR1vCrIKDm8K0/cUsgr3jfk6IB1vCs8gCvf4gR33Jvk2Nh2gdvimd/dcd78dDqB2+KZ391x34vcZvx0qYh37EOXCdvimd/dcdwHl3+rvA+UW3/ceBvP3AvdC+4wF8Qb7b/fF92X3dQX7BAb7lvuxBfhlNwf3M3wKpwoOTQrT9xSwCmz3aiAdpwr3EycVyAa/94YFOAYOqx1NCgH3zd8D95b3xBXCpAX7k/tpQfh01ftL97oH4rNszlNxBfcFB+xYvioe+xVB9xEGtqRyYB/7MQc1YwUOoHb4aMlN1RKz2T3f9xrf9xrfE66zFt/35gblqbO1t51lMR776N/35gflqbO1tZ9pLR776N/38gf3HGbDNlNiY0t6Hs9/aq9UGxO2WWZpU3kfE9aJ2QUTzj4GDqDgChPMXwoT1FcKE7SJ6gUTrD4GDpkd5/cUEuvZPd/3kN8T1l8KE9pXChO6ieoFE7Y+BvdARwqZHeL3GRLr2T3f95DfE9ZfChPaVwoTuonqBRO2PgbRYh2jHZkd7yQK69k932smHWvfE8pAXwoTzEBXChOsQInqBROygD4G96LbJgoTyUAlChOygCMd+yrV7OAKE+b3sfsqFdwG6MTD4h/38Af3BFLk+w0eE+pXChPaieoFE9Y+/Kbf99EGE+btxcDd26tWKR772Qdic3BjHjgGDiMKAcXj98jjAzMdDiMKx/cUAcXj98jjAzMdZfiqIB2OHcXj98jjE+wzHfsh+KYV0QYT3NHlBRPsJwojCtLtEsXjmePz45njE/IzHRP++yD4tSoKIwrH9xQBxeP3yOMDMx1t+KonHSMKx/cUAcXj98jjAzMd+wL4qkYKIwre0xLF4573oKDjE/QzHRP8+xv4wSEdIwoBxeP3yOMDrn8V4gautwVvsrt7wxv3Juv3APc91njJarof1egFNAZoXwWnZFubVBv7Jyz7APs9QZ1MrFwf91N+FWdslZ5zH/d096wFmW2SZV8a+w9SQSoe+y73WRX3D8PV7a+pgXijHvtz+6wFfamEsbcaDiMKzyQKxeOHJh2H4xPZMx0T6sf4siYKE9UlChPqIx0sChKV3/c34Dbh9zX/AFaAABP6+ECsClhuH71uYaZXGyZLIPs++z7LIPC/taa9qB9YqLdxxBv7kdsVWmvX9w33DavXvL6qP/sN+w1sP1gf9933iRUT9vs1Bu6Tpb25GxP6uqZaJ5IfDp0d+xV29x7b+B7b9zx3EtvaPN/3vuMT9tcdE/pDUGlMbB+J950FE/Y9Bvd+/RYVLlLO9xb3FsXO5+fDQvsQ+xBTQi8fDvsVdvce2/ge2393Er3j977f//+xgAD/AE6AABPs+Jz7KhUT3Pk8BxPaPQYT6oo2BcprUK1DG/syRfsX+yb7JtH7F/cyHxPs0Miqvqcf+3AH+yr3bhUvU9T3EPcQw9Tn58VI+xb7FlJILh8Oi+cKE6hqChPIah0TsGUKE6hyHQ6L1fgQ10HV0/cUEvd41ELfE6RqChPEah0TqGUKE7RyHfdn+KQgHYvV+BDXQdXO9xkS93jUQt8TtGoKE9RqHRO4ZQoTtHId9wH5JCEK+xDlrecKOO8T1GoKE+RqHRPYZQoT1HId9wv7tBUT0mYKkQojCsf3FAHp4feS4QP3yn8V9wzlw+njX7b7OKYfK5tnm8EauK+u2dO3Y1OXHuORBed7R9n7Fxv7FkRHLzW5XPcucB/3CHejeV0aW111PTdbss2BHjOFBSeT3zz3HhtdiR0jCsL3GQHp4feS4QP3yn8V9wzlw+njX7b7OKYfK5tnm8EauK+u2dO3Y1OXHuORBed7R9n7Fxv7FkRHLzW5XPcucB/3CHejeV0aW111PTdbss2BHjOFBSeT3zz3Hhv7KPl6IQpEHV73KlJ2+GzbEunh9zLCtOET74D3u2kdoqQF9wiO4MLnGuNftvs4ph4rm2ebwRq4r67Z07djU5ce45EF53tH2fsXG/sWREcvNblc9y5wHxNXgOgdE0+AkjHQQvcFfQgT74BoZadmBbaVrHtrGnF5em5pc6ydfR4TT4BiZQUT74BZHY4d6eH3kuET7HUd+yn49hXRBhPc0eUFE+wnCvsQ5aHb+B7bEunh3e/T4RN8dR1H+14VwwYT/FUKi9v3ltr3ddsS1+D3keFf4xP01/iKFfyK4PiKB+jAutceE/jUvl5LRlVaPo0fX4wFOge3jAUT9OiN22EvGjY9YjYeSzvLBvcY9wvP9xfrTM4zoh8T+NCiscjTGvcBNdP7EB4T9PsOLzv7IB8OIh0B93XfA/gOFvci1fsiBlx1orwf98rbCvvKByi9XPIeDovV9z/V9x3VAfd13wPN94kV9zMoBii9XPIe9yLV+yIGXHWivB/u917V+173HdsK+x37MwcOIh2j9wgS93XfE9DjHQcT8PcgNwcT0PcbHSi9XPIeE/B/+L5YHUQdsNX4EtUS93Xf2MITfs4dOa1d0n0eW1enZgW2lax7axoT/nF5em5pc6ydfR4TfmJlBRP+9h0O+xDlrdX4EtUS93XfjO8T8M4dKL1c8h4z+2oVE+hmCj4KEuXf94rfO9sTuPebfxUTtD4dE3Q1BxN4SgoTuEUKDnYdg4kdPgroyRLl3/eK3zvbE7z3m38VE7rXw67KqB8TejUHE3xKChO8RQqp+PsoHT4K4yAK5d/3it872xO295t/FRO1Ph0TdTUHE3ZKChO2RQr7A/j2FdEGE67R5QUTticKPgry7RLl33bj8+N+sR37AvkFFePtMwb3VCklHQ52Hfj6BNEGSfcUBS0GDnYdO/j6Rgo+CvcH0xLl33v3oIXfO9sTuvebfxUTuT4dE3k1BxN6SgoTukUKE7Qi+REhHftmz/cW1WJ2+KZ3EuXf91DXed872xPa95t/FRPZPh0TuTWOBxPcc20FTwoT2q64BfimN/vQByxYUjg/Z7ryHvfSN/vpB/sSz0D0Hg4+Cte9370S5d+mvd+9rt872xO9gPebfxUTvUA+HRN9QDUHE32ASgoTvYBFChO/gKn46kcdPgrvJArl32SyZCYdbN872xOsQPebfxUTrCA+HRNsIDUHE2xASgoTrEBFChO0gOX5AiYKE6pA5goTqUDfChO0gCMdi+FKdvimdxLB+IATcPeLFvUG91VyChOw+y78UPsu+FAFLwYOi+P4Tne9HQ6kCveGRwqL4/hOd+MgCp/4xBPo9xEW9AbR997R+94F9QbzcgpI/E4/+AQFMQY//ARIUB33H882HYvj+E71CvcRFvQG0ffe0fveBfUG83IKSPxOP/gEBTEGP/wESFAd9yDeKgqkCveOgAqhCrAdmwr3E/k6IB0/HeMgCsH4hBPoQR2j+TY2HT8d8u0B9zfj8+MDQR2k+UUqCpsK9xv5OicdPx3vJAr3JSYdE9xBHRPs93X5QiYKE9wlChPseaGhf6UbDiIdAd34SE4KDiId0/cUAd34SE4K90n4miAdIh3O9xkB3fhITgra+RohCiId3u0B95TjTgr3QvilJR0OvwqrHaMdLwoS2eP3nt8+2BO495h/FRO0MAoTdJE5BRN4Lx0TuC/bV/EejdUVU2OlvbWbp9ubH/c+rQVnByVPUfsCHg4vCsf3FBLZ4/ee3z7YE7z3mH8VE7owChN6kTkFE3wvHRO8NwqO+LAgHS8KyMkS2eP3nt8+2BO895h/FRO65cm4vKMfE3qROQUTfC8dE7wv21fxHo3VFVNjpb21m6fbmx/3Pq0FZwclT1H7Ah60+LEoHS8KwvcZEtnj957fPtgTvPeYfxUTujAKE3qROQUTfC8dE7w3Cij5MCEKLwrDIArZ4/ee3z7YE7b3mH8VE7UwChN1kTkFE3YvHRO2Nwon+KwV0QYTrtHlBRO2JwovCtLtEtnjiOPz44DfPtgTuID3mH8VMAoTdICROQUTeQAvHRO4gC/bV/EeE7kA3B0TtgAo+LsqCi8Kx/cUEtnj957fPtgTvPeYfxUTujAKE3qROQUTfC8dE7w3Cpb4sCcdLwre0xLZ4433oIffPtgTuveYfxUTuTAKE3mROQUTei8dE7o3ChO0LfjHIR37Zs/3FtX4JNsS2eP3ZNd53z7YE/T3mH8VE/IwCpE8BRP4cGoFTwoT9K64BffUB/coOdX7FPsKPUsjdR7khAXDmbCy2RvZumAxjB/7TmYF+wl0WFwxGi/bV/EejdUVU2OlvbWbp9ubH/c+rQVnByVPUfsCHg4vCre9370S2eO4vd+9sN8+2BO/gPeYfxUTv0AwChN/QJE5BRN/gC8dE7+ANwq0+KBHHS8KzyQK2eN2Jh1u3z7YE6yA95h/FROsQDAKE2xAkTkFE2yALx0TrIA3ChO1APD4uCYKE6qAJQoTtQAjHTQKEsHj977fWgr/AE2AAD/XE5w1HROaOB0TWY4/BRNsRAoTnDodE5kzCg6cHV74qiAdNArIyRLB4/e+31oK/wBNgAA/1xOeADUdE50AOB0TXICOPwUTbgBEChOeADodE5yAMwqE+KsoHTQKwvcZnx37J/kqIQo0CsMgCsHj975VHRObADUdE5qAOB0TWkCOPwUTawBEChObADodE5pAMwr7KPimFdEGE5cA0eUFE5sAJwo0CtLtEsHjkePz45dVHROcQDUd3MSswqgfE1ogjj8FE2qAwwofE5xA7QoeE5wgMwoTm4D7J/i1KgqcHWb4qicdNAre0xLB45b3oJ7fWgr/AE2AAD/XE50ANR0TnIA4HRNcQI4/BRNtAEQKE50AOh0TnEAzChOfAPsi+MEhHftmz/cW2112+GXLS9cSweP3hNd531oK/wBNgAA/1xNNADUdE0yAOB0TLECOQAUTzgBybAVPChNVAK64BfimNwcTTQA6HRNMQDMKDjQKt73fvRLB48G9373HVR0Tn8A1HROfoDgdE1+Qjj8FE2/ARAoTn8A6HROfkDMKhPiaRx00Cs8kCsHjfyYdhVUdE5ZANR0TliA4HRNWEI4/BRNmQEQKE5ZAOh0TlhAzChOagMD4siYKE5VAJQoTmoAjHcUdDk0K0/cUAfeW3wO6Cvsf+aIgHcUdqPhoWB37EOWt1fjG1RL3lt857xPwugr7NftqFRPoZgpNCgH3ld8D91/3xBXBpAX7VQc0vlrnHvcz1fszBmJ5nrYf93wH47NrzlNxBfeZ+5pB90b7dQc1YwUOMB3L9wQSweOILQpv3xO5KR0TeTIdE7k0HRO2YPi0KQojCsb3AAHR4/D3AJoKivj5KwosCsn3BBLN45ItConnE/lAHRP2+3v3tykKLArE9wABzePt9wDj5wNAHfsi97IrCjkK5vcAEsfj6/cA6d872xP2gDoKE+6A+IIHE+5AOwYT9kA7HRP2gDYKE/eAjviBKwqcCiId1/cEEvdN9wSH33z3BBPoQQoT9Pc1+KgpCpwK+2bP9yLV+BLV0vcAEveo9wAw37TXE/bbFvgnXgpcHQcT+veO+KMrCm8K0vcAEvfr9wAsgR0T8Pez+TkrCiMKy/cEEsXjlC0KleMT8jMdE/4y+K4pCj4K6/cEEuXfcS0KerEdUPj+KQqL4/hO5Ar3ERb0BtH33tH73gX1BvNyCkj8Tj/4BAUxBj/8BEhQHfdTwR0/Hev3BAH3Mi0KA/ce+yoV0AbSsKXEnx/3a/jpBS8G+yv8Tvs1UB33WfycBagGeFkFcoF8gGYbTgbX+T4pCiId0vcAAfeL9wBOCvdv+JkrCi8Ky/cEEtnjgy0KfN8+2BO5APeYfxUTuIDlybi8ox8TeICROQUTeQAvHRO5ADcKE7YAW/i0KQo0Csv3BBLB44wtCpNVHROcgDUdE5xAOB0TXCCOPwUTbIDDCu0KHxOcIDMKE5uAK/iuKQr4BcZVyfdsyhL3I9T3GNETuPeT+AUVurGirJsfE3hok6R7sRuVmoyMkB/HeQd8hZCcH/cMB+Fcvjc/WWBLfx7ShgWrk6CcsRuyoXVbHyN2BRO4TH5laVgaUb5nyB6UxhVsepqkpJuXqZEf4ZwFcwdca25XHg74Bcv3a8sB9yXU9zfUA/e/+AUV58rO9PJMzy8vTUckIspI5h/LBFlstM7NqbS+v6liSUltYVcfDi4KEqX4uBPYMgpd/EIVE+gxHYvd957d91jfAdvh97DlA9v5WhX9WvdsB2MK91j3+d8G+4F/HY8KoHb5Bt/ZCg6gdvkG39P3FNkK91BHCm4d7+H3tuED9075BhX4DPeDNfsv/Az9WuEGDlodAe/hA573shXc+7Lh97L3g9/7g/eU+ALf/Fj76DoGDvsVdvcq3/iy3xKX4ffI4Y3hE/iX+yoV4fcqBhP0+CD7KuH3fgYT+DP5BvvCBlf8ggUwgXJiWRtiBvdAFqComLORwLj4OBj3HfyyBg4qHWEKDrodsx0oCi0dkhboBvcx9+IF++Lh9+IH9zH74gXoBvs79/f3Mff3BS4G+yf74AX34DX74Af7J/fgBS4G9zH79wUOe9//AQuAAN//AN6AAN8SrOT33eVK5BP498B7FRP09yz3BeL3EOdUzyioHxP44aS3wNoa9wEk1/se+xEkRCd+HuWFBcSUyK/cG+TJZE0vO2xSjB9BjAU2B9WMBRP01YzjYywaOUNXIylCutWEHjKFBRP4+wmR9wY59ycbDs8K+KYW+Vr7DAcTnIgdE2yUHQ5TCujJEtHh97ThE174phb5WvsMBxOeiB0TbpQd+yT5oygdKArJHQ4oCuf3FMkd9wT4RyAdi9/4st8B+GHhA58W0gbjscXkkh+z+HMF91n9BuH5WvwABl38vQVfh3huZxtRBg6gCrEKpx1uHdHh97ThA9EW4fkG97T9BuH5WvxgBg6vHSIKYB0O2h2L3/kGdwG/+IoD9yEW0AbHsaXEnx/3dvkHBS0G+y78TPsz+EwFLAb3VfycBa0GckYFcIF7gXEbTgYOi9/5BnfoyQG/+IoD9yEW0AbHsaXEnx/3dvkHBS0G+y78TPsz+EwFLAb3VfycBa0GckYFcIF7gXEbTgb3N/lPKB0oCgGk5fch4fcj5QP3lBbh1gb3JZ3j8/cyGvcyM/P7JZ0e1jU/B/sjejMj+zIa+zLjI/cjeh77IferFfTA0+OcHvwYBzOcVtP0Gvd3+1YV+BgH5HvBQyEaIVVDMnseDqIKoHb3gt/4GHcBveH3yOED+FAW4fla0h0O9xkdx+H3tOF24RP4x/laFf1aBxP0+Ev7KuH3fgYT+Er5BjX9Bvu0+QYGDovf+QZ3AcLh9wjh9wjhA8IW+H75Wu8d9xkdruH3COH3COFx4RP8rhYT+vhk+yrh934GE/xP+QbvHfsq93433/kGdxLR4fDh8OETvPeV+yoV4QYTfPcq90/5WjX9Bvu0+QY1/Vr3TwcOi933nt33rHcB5eH3sOUD5flaFf1a92wHYwr3rAb3DH8di9/3nt/3qHcBruL3ZeXF4QOuFvcbBvcy6Nv3G/cdLt37Mh9b96g0Bvcb/QYVW/eeuwb3AMBdMjRWX/sAH/fJNxXh+Vo1Bg6L3fee3fdY3wH24few5QOp+QYV2P0G92wGYwr3WIzf+zgG969/HYvf957f91TfAfTf5eL3Fu4DkBa0BuO0xeSPH5/4cwXb/Qb3Bwb3FNTb9xv3HULd+xQfbwaK96gF+4sGcfy9BV+Jdm5nG28G+BAWePeengbZrF0yNGpfPR8Oi9/3et9b3/eodxKf4fcK4vc+7hPe93QW9xEG9zLU2/cbHxO+9x1C3fsyHmX3qDQGE977zPsK98w1/Vrh9873Cgf3CPt6FW4GE773nqgH9wCsXTIfE940al/7AB4OIgpfHQ573/eI3/eK3wGx5gP3wHsV9yHk6fc+pB8wBvsIdlJLNRsmTuL3MYIf92zf+2wG9zKUyOPwG+HES/sInx/nBvc/cTPo+yEb9wIdHw573/eI3/eK3wH4a+YD98B7Fe4K94Mt9xn7PPshMy77P3Ef5wb3CJ/Ey+Eb8Mgz+zKUH/tsN/dsBvsxgk40Jhs1Usv3CHYfMAb7PqTkLfchGw5hHZ8KuB2gdvgY3/cu3wH3DOH3quED9wwW4feFBuHIyOLXwU81HvuG4feGB/chN+T7DkROZFNxHveN9xIde99cdvfN3/eJ33t3Ep/h4+X3YuUTt/gWexX3G8b3BfeV95dQ9wX7G/sSTyf7eYUfMwYTb/fNNf1a4ffN4wcTt/t4kcYm9xMb3wRBb9r3Y/dkp9vV1qg7+2T7Y248QB8OWh0ByuX3tuED+KUW+Vr7agf7My47+xsowkTscR/7Pfu/BeoG9zb3sgWXBvcU+7IG+xT4BhUjUbjd3cW68x/3FPuUBg6L3/fE3/cu3wH3DOH3uuUD9wwW4feFBuHJyOTiw1IvLEJP+w8eNwf3RPcC5/cn9x0q6/scR1FlU3If94z3Eh2L3fee3e/fN/dIEvcG4few5RPsmvimFe78pvdsBmMK7/c43/s4BhPc6zUHE+wrKAf3xfue7B2gdvfF3/eB3y0d9Pe1FSP7tQXnBuL3jAW3mpuYpBug+8Xh98WgBqOafl+bH+P7jAXnBiL3tXPNZqpgjhn3JveBBd/8bDcH9yb7gWCJZWxzSBnG9+UV96QG+xz7cQUOe9/3Z+H3qd8BseX37OWzCvsATev3R4kfnY6yj8KCunkZ9whgo4a0jwj7HnxQQi0b+zz3/xX3HZrG1ekb9wDIKftGjh+Bil2GfI/7DbkZYJxQlGGGCA5uHZn42QP3fRbsBvc4+KoF0aCiobYbmd9dBlFZWTxzH/sc/Fb7RPjXBTAGDvsVdvcq0fkUdwH3i933Q+ED+Iz7KhXh93BWBvsU97H3K/f3BTEG+yH74gX34jn74gf7IffiBTEG9yv79/s0+/cF5Ab3K/fjBfvj3ffjB/cr++MFowYO+xV29yrR+RR3Abvh9/fhA/h9+yoV4fdwOAb7kvex4B33yPvvBboGDvsVdvcq0feK3ffMdxLA4fe44XndCkf5FDX7zPu498w1/Vrh99D3uPvQBhP6zwYOqgqgdvd53/ghdy0d8fd5Ffcv+3nh93n3S9/7Pwb3XPghwAr3XvwhBfsjBg77KvdwRdH5FHcS+ILhE7D4gvsqFeEGE3D3cEYH+zH3suEd+1j7+QXtBvcr97f3K/u3BbcGDvsVdvcq0fc83/gYdxKu4ffI4XvdCkX5FNId++YHE/rRBg6gdvgY3/eCdwHR4ffI4QP3MPlaFTX9WuH3hQbh3Mj20L5TMR77huH3hgf3ITfk+w43QWJQbR4OYR2hHVMK9wfTEtHhlPegluETXfimFvla+wwHE52IHRNtlB0TX/ur+bkhHXvf94nf94nfAbHm9+rmswolT+D3NIIf9+oG+zSCTzYlG/s/990V9zOUyOHwG/DINfszlB8Oi9/5Bnf3B9MSv/iK/BX3oBPw9yEW0AbHsaXEnx/3dvkHBS0G+y78TPsz+EwFLAb3VfycBa0GckYFcIF7gXEbTgYT6Kf5ZSEdMB0SweP3lt8TuCkdE3gyHRO4NB0Oe9v36NsSxeI05/c94bvjE9z3wHsV9x3z7Pcv9yYs8fsXHxPsPlJmSmcfkvcjz6LWswjctqi/2Ro1igVSdnRIbB4T3PsOUlg1+1Ua+wKkML5YHlS+wHXJG9sEMU3S8I0f7ozL0OUb4shGKCZMRDEfDovV9zK1YdVrq/cq1RLl3/eK5UflE63lFveNBvcK1sXnHxPNz1i6N5QeE57SlbWzxhrlPcT7Dh77cAYTrfeN/FwV+zn3Mvc5BsqzbFhdY21MHxOubvd8Ffsc9yr3HAbOtm9eXGBtSB8ORR3xHQ5FHdP3FPEd9yhHCkUdAfcp3/dd4QP3ffhcFfez93k1+y/7sfym3wYOoHb3fNX3KtUB9ynfA7T3fBX3APt83/d89wbV+wb3Kvez1fwH+3T7AAYO+yr3dEHV+BLVEp/f98bfjd8TeJ/VFRO4+3TfBxN09yr4HAcTtPsq3wcTdPd0BxN4Nfhc+8UGW/v8BUmCdG1hG/cQFpuhlqiQsLX3uhj3JfwSBg4sClIdDp4djgqgdvimdwH3lt8DlhbrBvcr95MF+5Pf95MH9yv7kwXrBvsx953VHQUOf9v/AKyAANr/AI6AANsS2+NG5vdv40XjE/L3vn8V9xnfx+vNXMA+oR8T7M2ds7O9Guc+xPsO+wQ+VjaBHuaGBbGQtKTJG8+2cGFdY25OjB9UjAU7B8KMBRPy04y6aFEaWVlsPD9ZrL6HHjOHBSmQ3033FRsObAoS6d/3id8TeGIKE7hrCg5sCujJEunf94nfE3xiChO8awr3Y9QoHWwK5/cUEunf94nfE3xiChO8awr3RYAKoHb4pncB5uED+EgW9wwG+6X3nccKDqB2+KZ35/cUAebhA/hIFvcMBvul953HCuH37CAdi9/4CNUB+FLfA6QWyPcOHfdZ/Fzf+Kb7+ukKWgYOi/I5dvimdxK03vf43xN4rxbfBpP38vcR+/IF9Ab3DvftBfvt3/im+wIHE7j7KPw/+yn4PwX7AwYOoHb3d9X3eXcB5t/3jt8D5hbf93f3jvt33/imN/t5+473eTcGDiMKAcXj98jjAzMdDkUdAeXf95DfA+UW3/hc95D8XN/4pvw4Bg6dHZYKRR0B95bgA/eWFuD4XPdT1fxnQfdTBg6wHT8d6MkBwfiEA0Ed9zn5Oygd+xV2+fB3AaLl9yXg9yPlA/eW+yoV4PdGBvcfm+np9xYa9xYt6fsfmx73Xjb7XQf7IHssLfsXGvsX6i33IHse+yX3hRXgwsXlmB77zAcxmFTF4Br3evswFffMB+R9wVE3GjdVUTJ9Hg6hCqB29zLb97h3AdDf96XfA/g+Ft/4prkKDlkK+Fx3EuXf95Dfgd8T+OX4phX8pgcT9Pgu+yrf93QGE/hB+Fw3/Fz7kPhcBg6L1fhcdwHD3/cJ4PcJ3wPDFvh7+KbUClkK+Fx3EsPf9wng9wnfZt8T/MMWE/r4Vvsq3/d0BhP8XPhc1ArqCt/f39/fE7z3lvsqFd8GE3z3Kvc8+KY3/Fz7kPhcN/ym9zwHDovW907V91d3Adzf97DjA9wW93SHHfsg91c3Bvd05R2L1vdO1fdXdwGu3/dz477fA64W9zeHHTz3VzcG9zf8WxU8907a9xMd969AFd/4pjcGDovW907V9w3VAevf97DjA5X4XBXh/Fz3dIcd+yD3V/s+BvfK5R2L1vdO1fcN1QH3pOD3KuMDkBag9w4d3vxc9yEG9wnMx/b3AErH+wkfU/dX+4npCoIG+CyCFVP3TsMGx61pT1Bpak8fDovW9zDVX9X3V3cSn9/3Mt/3K+MT3veaFvchBvcJzMf2HxO+9wBKx/sJHlL3VzcGE977dfsy93U3/Kbf93v3Mgf3IfswFVIGE773TsQHx61pTx8T3lBpak8eDpEKkh3I5QP3xH8V9wzi1PcNpR8xBkN3WGFDGzNUxvCBH/dF1ftFBvCVwsbjG9S+YEGfH+UG9w5xNNb7DRv7Jyv7APs9+z3r+wD3Jx8Okh34VeUD97x/Ffcn9Ar7J/sNNED7DnEf5QbVn7621BvjwlAmlR/7RUH3RQYmgVRQMxtDWLXTdx8xBvsNpeJC9wwbDngKtB2tHaQdf9tcdvd41fc02393Ep/fx+L3e+MTt/gCfxX3F9Tu90b3RkLu+xf7DUQ2+y+BH08GE2/3eDf8pt/3eMcHE7f7L5XSNvcNG9sEQWLS9xL3ErTS1dW1RPsS+xJhREEfDqB292HV90bUAeTl94vfA/dm93AV+xX7cAXtBvcN92EF9xL7Yd/4pvtlBvscP1IkR7ZV2W8f5sYVPV+rxMS3q9kf9xH7RgYO+yrV7PcaHerf95HfE+7qFt/3ywbtw8Df17BZJh77zgdedG9mHmJBvgbkuMTlH/fsB/cPRtn7AklNcVFtHvcS7wcT9tUnBxPuvzcHE/ZXRQcT7kHRBw6L1vdi1fdD3zf3SBL3FN839133O+MT6vcUFvd0Bvcp3sr3BvcGOMv7KR/7IPdDBhPm9wnfBhPq+wkGE9rrNwcT6iv7Cjf3Cgf3dPxbFfsg92L3IAbnv2VJSVdnLx8OoHb3btL3O9UtHez3axU4+2sF6wbI90UFrZehkqkboftu4fduoAaqoYRplx/I+0UF6wY492t5uWKiYJAZ9zH3OwXV/JdBB/cx+ztgh2FzeV0Zu/eFFffLBvsv+zkFDn/b9w3V91vbAcXj98jjyh0sU9H3CIgfjJGRjJEbq4y5hbJ5CF/tnYuvG5iMBT53WF5AG/so95kV35u/vNsb68RC+w2MH4iCgYmBG2WKf4snuWecW5FoiQgOi+NIdvhc1RKw+LMTcPd6FvUG9x/4EgW8naukuBuV1XQGP1FgPnAfE7D7BfvW+zD4TgUxBg5ZClZ2+KZ3EveW3/c43xO8+I77KhXfBhPc93ReB/sF91PVHfsx+50F6wb3K/eTBfuT3/eTB/cr+5MFmAYO6grh98DfE7j4cPsqFd8GE3j3dDoH+1n3U/eZ950F+woG+437lgX3ljX8puH3lgf3l/uWBbQGDlkK9y3V93l3Eubf947ffN8T+viC+yoV3/d0BhP8RvhcN/t5+473eTf8pt/3d/eO+3cGE/rQBg77FXb5PHcB95bfA/eWFvsq3/cqB/dg+KbeCg77KvdPQdX4gXcS95bfE3D3IGYV9woGE7D7Bd8HE3D3BfcJBxOw1SQH91L4gd4K91L8gQUjBg7vCvh53xOw+Hn7KhXfBhNw93Q/B/sg91jFCvtX+6QF7wb3J/dq9yf7agWwBg5ZCt/b97h3EtDf96XffN8T+viD+yoV3/d0BhP8RvhcuQr7lQcT+tAGDrcdYR2iHWwK9wfTEunff/eggN8TemIKE7prChN00+ohHZIdxeX3xOXKHTNVxvCBH/fEBiaBVFA0G/ss934V8JXBxuMb4sJQJpUfDj8d9wfTEsH4hPwS96AT8EEdE+ip+VEhHaB2+Q/Wi3cSpfi4E7ClFuMGE9D3TvkP9079DwXjgwoOi9/4wt8SlOUz943b940z5RPklhYT1PeN3wYT5DGMRPcP9zAa9zfe9wf3CvcK3vsH+zf7MET7DzGKHhPoN/eN3/sYBxPk2sDC9wn3Ahr3afsM9yn7P/s/+wz7Kftp+wLC+wnaVh4T1PsYBg5NCgHG+H8D+JgWrdVoBmd9oK6AH/sd+FIF7G1hsDcbU0HKBq+ad2eWH6Q6+1j8hwXjBvcl+A7W+4gFJ6qvad0bDiIdEpv3Uzff91HfE9j4uRaq1WsGX3OmuB/3yvHVBxPo/MpBBhPY9vxc3/hc91H7ygYzuFH3AB4Oe9v/ARKAANn/AOWAANsSvuNL4xPw98d7Fe7ztsi/H1XSBVJbNmVHGyVJw93fzcLxiR/BigXaB1WKBRPoSIo+recay8K05MjUZ1q1HsPQBcNaLLMzG/sdLD/7ATu1V99yHxPwKG5YRy8a+xDyNPctHg4iCgG95ffU5QP3wHsV9y7r9yD3evd6K/ci+y77Liv7Ivt6+3rr+yD3Lh/fBGZsmqZyH/d4+DMFm16UUEga+0RP+wInHvs097IV90TH9wTvsKp8b6Qe+3j8MwV7uILFzhoOi934UNVB90wS97DhRdETsMcW+HTd+z75CAYTqEUGE8g7bW0/HisGE7BB9078UPt0Bw6L3/jC3wG99ffD5QO9FviI3/weBo/BzdX3FM8I9yfZu8H3ABr3DjXf+yb7Li4y+x97HuWFBeuaxcHvG+m7WEJDZGspVx/7afsFUCj7KhoOe9/3n9/3c98SveT3vOVK5RP097p7Ffco9wDZ9xzmU88vpB8T+Nyktb7XGvcKM9X7HvseOUIhfh7lhQXKlLex5Rvju2RCOk1tQR9TN8MGE/Tn0GAtKztpNTZNreKDHzKFBfsJkd859y4bDqB29y7f+Gx3AfgY4QP4GBbh9y7h3zX4bC8G++r8cgU99/AH+4jfFfeI9+gF++gHDnvf99bd9y7fAcfl98DlA/e+exX3IfDw9yP3Ii/x+xxZVHdjaB+l92oF97/f/A4GXPwjBecGvaLEqMMb6cNNJydPTy85U7TbgR8xhQX7CpXlOvceGw573/fc3fc43xK95THp99DlE/T3wnsV9yfw6/cw9yYv6/sgOkxkV2kf9z+Zz9/3ABvZr2dTmx/lkwXvb0nP+xIb+2ZF+1T7fvtf5/sF9zQfjd8VE+wpTdHt7dPJ6+TGTSkfE/QhTE0uHg5uHfdW4wP3VhbjBveE2vdQ90f3YB7Z/HQ3+BYH+zL7Si37dPtwGg573/eh2/d13xK95VPl95DlU+UT8vfAexX3IfcB1Pce51bMN6kfE+zKpbO61xr3BDHe+xL7EjE4+wQ/s1zKcR4T8jdtVkovGvse9wFC9yEe3wQuSLXl3sHB9fXBVTgxSGEuHxPs9/EEP1mx18+7ttnZu2BHP1llPx8Oe9/3ON333N8SveX30Okx5RP09775ahX7JyYr+zD7Jucr9yDcyrK/rR/7P31HN/sAGz1nr8N7HzGDBSenzUf3Ehv3ZtH3VPd+918v9wX7NB+JNxUT+O3JRSkpQ00rMlDJ7R8T9PXKyegeDvcoxve+xgH3Kcj3SMgD98D3KKkd5vwHtQoO/wGggAD3EB0TwDEKdPdFFcj4GAYToFwGNQoTwIgK9zTE97PEAfc71PcTyAMxCvsa90RcCvcoxPccxPcCxBL3NHAKE/IxCvc4BGcdE+xdChPyPApRHfeBxAH31MgDMQqe90XQHfclxPc3wtTEAfgJygP3wXsV+0T7Avcj93j3ePcC9yP3RPdD9wL7I/t4+3j7Avsj+0Mfivc1FdvDw93YV8dCb3eCd3cfmPEF9y3E+2IGbPt2BccGr6GkkKIbs6pmXlxsaWNnbKKthB9MiAVKkcNd1BsO9yjE9zrE2cQS9zlvHRPsMQr3OASUCviAxAH3jMgDMQpW90V7HfcoxPcdwfcCfgoT8jEKivc4zgoT7EgdE/J6HRPsPB0O9yjE2cT3OsQS9zxxChP4MQqB9zilHXvV5cb3vsbk1AGa1cfI90jIydQDLh2K5RXoxdv3E/cUUdwuLlE6+xT7E8U76B/GBHh6kZd+H/cW92QFkXWOcW0aLWpVUh4x9ygV7KzAxJ6chX+YHvsW+2MFhaCIpKgaDnvV/wFmgAD/ACuAAPdV1BKa1fdRyFy690LUE/ouHXTyFcj4GAYT9lwGNQoT+ogKe9XxxPezxOfUAZrV2dT3E8jg1AMuHfsa8VwKe9XlxPccxPcCxOPUEprV0shcyPcSyFvK19QT/mAuHeUEZx0T/aBdChP+YDwKUR171fdHxPf71AGa1fd7yPcY1AMuHZ7yFcjXt8Rf95NYBvta+5oFWfdQB/sCxBX3AvcmBfsmBw571eLE9zfC1MTy1AGa1fewytjUAy4diuKyHXvV5cT3OsTZxOXUEprV128d2dQT/cAuHeUE18XB4t9VwkYfE/7AfR0T/cB5CnvV+EbE89QBmtX3M8j3YNQDLh1W8hXIBvcTwvcJ2e8et/uoUvddB0ErXvsG+w0aDnvV5cT3HcH3AsTl1BKa1dFtCtPUE/5gLh2K5RXbyLjUvG6xXJ8fE/2gSB0T/mB6HRP9oDwdDnvV5cTZxPc6xOXUEprV2nEK1tQT/0AuHYHlFeXE5Pci7F/iLz9RVTQ3wVTQHxP+wK8KE/9ATp28asIblPdUFV5zrbu8pa63tKloWoofW4praWUbDiIKAbvl99jlA/fAexX3L+z3I/d393kq9yP7L/svKvsj+3n7d+z7I/cvH98EKEz3A/dD90XK9wPu7sr7A/tF+0NM+wMoHw4oCgGY+NIDmBbfBvh++VoFNwYOi8T3s8T/ALGAAEod9yvIXLrq1PcTyBPbTApQCvcU+5OeCvsw99cVyPgYBhPXXAYT5zUKE+tzBhPbSwp7xHd290XE9wLE/wCxgABKHfcqyFy65HAKE7aQUQoTdpBUHRO2kPea+6NnChO2YF0KE7aQPApMj8da2Bv7t/fnFcj4GAYTtZBcBhO5kDUKE7qQcwYTtpBLCnvEd3b3RcTmxGXE96DEe3cSn9T3E8iicAoTtIhMChNyiFAKE7TI9577o2cKE6ywXQoTtMg8CkyPx1rYGxO1iPw99+lcCov3GVLE/wG9gABKHfcqyFy695PIE5pMClAK97P7kxXIBhNa17cHE5rEX/eTWAcTWn0KE5p/CvvQ91IVyPgYBhOWXAYTpjUKE6pzBhOaSwqL9xlSxPdExPcc7h33QMgTrTBMChOrMFAK97P7kxXIBhNtMNe3BxOtMMRf95NYBxNtMH0KE60wfwr7yPdEZwoTrNB6ChO1UIYKE7UwPAoTrTBRHXvEd3b3N+dYwtTE/wC9gABKHfcqyFy697PKE5tAUQoTa0BUHRObQPeK+6MV28PD3dhXx0Jvd4J3dx+Y8QX3LcT7YgYTq0Bs+3YFxwYTm0DWHfun9+cVyPgYBhOawFwGE5zANQoTnUBzBhObQEsKcx33AsT/ALOAAEod9yrIXLrZbQoTtpBRChNAgLcKExBgrh0TNmA8Hfus5hXI+BgGEwUAXAYTCQA1ChMKAHMGEwYASwpzHdXEdsT3E8LUxBL3eMqJyl/K9wrKX8oTtxBRChNAELcKEwhgrh0TKGA8HRMXAPun1RXbw8Pd2FfHQm93gnd3H5jxBfctxPtiBmz7dgXHBq+hpJCiG7OqZl5cbGljZ2yirYQfTIgFSpHDXdQbDnMd2MRzxPLuHYZtChOzRIBMChNAgIBQChOABICFHRMIAwBIHROABABdHROABICLHRMgBIBoHROABIBka3FdHhMoAwA8HRMSSAD7pNgVZx0TAzAAegoTBBAAhgoTFEgAPAoTEkgAUR1zHfcCxPeSxBL3Hsjlyl/K9wrKX8oTvkBRChNCAFQdE4JAhR0TEYBIHROCAF0dE4JAix0TIkBoHROCQGRrcV0eEz2APB37uOUVyAb3E8L3CdnvHrf7qFL3XQdBK177BvsNGg58xve+xgH3Kcj3SMgD98B8qB2gdv8A/4AA9xAdE+D3qhbI+BgGE9BcBjUKE+CICovE97PEAfc01PcTyAP3NBb3nMT7UwaMpaeosKSnnRjIsqy7uhrNWrlFQVdaPoIex4gFupSkpLQbq6V0a25+dGZzH2t2BShKeEpNGg57xPccxPcCxBL3NHAKE/L3wXsV18e/zbtouF2ZHxPstpiisbAaxVa5RkxUYVWDHsiHBaKOpp+uG6yncWxyb29mH3JSBhPyPApRHYv3GVLEEvfUyBOg99QWyAYTYNe3BxOgxF/3k1gHE2B9ChOgfwoOe/cFHXsV28PD3dhXx0Jvd4J3dx+Y8QX3LcT7YgZs+3YFxwavoaSQohuzqmZeXGxpY2dsoq2EH0yIBUqRw13UGw57xPc6xNnEEvc5bx0T7PfBexXXxcHi31XCRh8T9H0dE+x5Cp9299/EAfeMyAP3jIp7HXvE9x3B9wJ+ChPy98B7FdvIuNS8brFcnx8T7K+aoKWzGspWuUZHVV1MY6Bxr3weE/J6HRPsPB0Oe8TZxPc6xBL3PHEKE/j3t3ulHffKxve+xgH3Kcj3SMgD98D3yqgd/wJCgABKHfeqyFy6E2D3qvfXFcj4GAYTUFwGE5A1ChOgcwYTYEsK99nE97PEAfc01PcTyAP3NPfZXAr3ycT3HMRyd/cvxBL3NMhcyPcSyFvKE7n3wffJZwoTtnoKE9qGChPZPAoTuVEd+CPE95N3AffUyAP31PfX0B33xvcFHffGsh33y8T3OsTZxBL3OW8dE+z3wffLFZQK+SHEAfeMyAP3jPfWex33y8T3HapswXR39y1+ChOcgPfA98vOChObAEgdE5yAXR2XHR8TzIBoHROcgGRrcV0eE6sAPB0O98vE2cT3OsQS9zxxChP497f3yxXlxOT3Iuxf4i8/UVU0N8FU0B8T9K8KE/hOnbxqwhuU91QVXnOtu7ylrre0qWhaih9bimtpZRsODv1X96jZAfcQ+kwD+Rb3qBX4Rtn8Rgb8mj0V+EXZ/EUGDiD3qNkB9xscBfoDHAS796gV+FrZ/FoG/sg9FfhZ2fxZBviuPRX4Wdn8WQYO+IH3qNkByRwI5APJ96gVHAhSBvtx+3JSCvdy+3IFHPesBg4gvgr3cvtyBRz6BD0cBfoGDv1X96jZAcn6yAP5l8Yd/jg9+jYGDiC+CveY+5kFHPneZBUcBSAG+3L7clIK93P7cgUc+t4GDv1X9wwd+pvCFfYGE2D7mfeZ9wAd/YA9+YAGDiD3qNllsRLJHAaME6AcBl/CFfYG+5n3mfeY95gsHQUc+uNkFfr+Bvdy+3EF9QYTYPuZ95n3mPeYBSIGE6D7cvtyBf7+Bg79V00d+iLeA/dh94AV998G84T3CMnGfvsI9wUb9wCq9wbbHzgGRHZeaB5pClAb+98GDv1XMdn3y973ytkB97ra+FjdA/htMRX3btn7TQYqimelzhrlB+ZazUKZHowH0pm+zOUa5AfPsKXriR73Tdn7bgYhQkQmHzsHKlxiII0eOAf2jbpiKho6BybURPUe9/QW3fnwOQYOIIv3DAH4H/cM99n3DPfY9wwD+B89CvhRax34UGsdDiD3Ldly9zCX2RL3lvcw94n3MBN495b3YpMd+CX7MJMdE7j4NpdlHf1X9y3Zcvcwl9kS9zb3MBNw9zb3YpMdE7D4NpdlHf1XufcMftn3I9l39wwS92v3DBOY92u5FUMK954EQwoTaPfN+0ZlHf1Xi/cM+J7fe3cS96L3DCTh93NDHRPOgPmSPQoT1YA/CvyVZh0TroClCv1Xi/drWAr3YxLJ+sgTqPhRFt0GE2i79x0F+MfZ/KwGuPcUBfh/2fxk8x38pT34igZf+xQF/F49+EMGDiCL9y892dzZ3NoSyRwGjBO4+Y8W3QYTeKbYBfn2BhO42f3bB6fcBfm/2f2jBqfcBfmH2v1sBqbXBTgGcT8F/fY8+doGbzoF/b49+aMGbzoF/YcGE3g9+WwHDv1XiQrzQx3BQx0T90D5rhZDChP2wD8K/K1mHRPvQD8KDiCJCvcQQx3fQx3aQx0T93T3uj0KE+0APwr4qWYdE8LQPwr4pGYdE0AsPwoOIIv3n0XR90HRRfeiEvdqHAVeE4j6FhagHfgo+1kVoB3+K/tZFdMGE2jGChMYTx0TKGb7XAX7EQYTGE8dE2iKHROIZvtZBdMGE2jWCvsE0RVXHffQFlcd99AWVx0O/VfiChK1+tgTvPexFtMGlQoTfMv7LRX5gNn9gAb7RPclFVcdDiDiCq93EhwE3usTthwFjBbZBvtk93OL96z3ZPdzCD0GE3b7U/tMaftz9xD7WQj9Lz35agYTtph8mXyafQj9+RbTBhO6kgr9V/dA2fcU2QH3APqaA/cA+wIV2wbv964F+ebZ/csGufcUBfmd2f2CBvP3ugU7Bg4g90HZ9xTZAfcAHAZeA/cA+wIV2wbv968FHAWq2Rz6cga49xQFHAVh2Rz6ugbz97kFOwYOi24KPQoOlR33hPcMA/eLZAqL9wz3nm4KPQr3ngRDCg77G3b3MPcM955uCvgWFUMKkv0qSQoOi/cMAcL3DMv3DM33DAPCPQr3TGsd905rHQ6L9wz44ndxHRPg94Q9ChPQpQr7IXb44vcMcR0T4PeE+LgV+wz3DPcMBxPQa/tlFVQGhUWB+w07Gvt64fd6B9uC9w2F0R4OiQrOQx0T9PeBPQoT7D8KDvs23/ie9wwSzuXh9wwk4ezlE/T3//jIFfsM+wz3DAYT7Ho6FTUGRXxrVWgeNVNlXzca+wvjNvcW9ybl6fcYlx4xkQUrgVpXKBs6XL7Qx5mj2bsf0LanvesaDveHbgr3hxVDCg73W/dlAfdX92YD98D3WxXFurrExVy6UVFcXFFSulzFHw74msv3HHcB9xb36AP3fvgSFc31ziG/rUfxBfcLy/sLBs/xV61IIEn2V2nOJQX7C0v3CwZIJQUO9633XAH3NfeqA/ew960VzAbl91wFLgb7TftcFcwG5fdcBS8GDqB291nR90HR91x3AcH4gAP3vRbTBpIK9xYd9wD7AhXbBvfE+fAFOwYO9xYd+ID7AhX7xPnwBTsG98T98AUOhfcMAfeE9wwD98CFYAqF9wz3gfIKhVMd9/kEVh0O+xt29zD3DPd69wwS94T3DPsK9wwT8PfA9/JTHVj8jhUT6L0Gyvc+BfX7DPsMwQcOhfcMAcL3DM33DMz3DAP3B4VTHfdOFlYd900WVh0OhfcM+Oh3cR0T0Pel92EVwQaQ55bl5xr3ezX7ewcvljGQLx4T4Kb7Z2AK+yF2+Oj3DHEdE9D32/frFVUGhi+AMS8a+3vh93sH54DlhuceE+BwyAqF9wz4pN8Sy+Xg9wwk3fblE+z3lPdhFd0Gwp67va0e5smwwdAa9wkq3fsg+xApKvsVfx7lhQXilsPI3RvhxFtIih9JW3ZUXh5MVnRLQhoT9Lb7Z2AK+zbf+KT3DBKK5eH3DCjd8eUTrPeq9/sVOQZUeFtZaR4wTWZVRhr7Cew59yD3EO3s9xWXHjGRBTSAU045GzVSu86MH827oMK4HsrAosvUGhP0YMgK94XyCveFYAr3kNkB9yr3wAP3KveQFffA2fvABg73kdkB7/gkA+/3kRX4JNn8JAYO95HZAbP4nAOz95EV+JzZ/JwGDj3ZAdv4TAPbPRX4TNn8TAYO94vfkN8SkfjgE6D4OveLFc7OtM6xH1HFBVdnZG1kG2ximqpZHxNgqF1imWgbSEliSGQfxVEFwK+yqLIbqrR8bL0fE6BuubR9rhsOMfnwAfdR5AP4DTEV0wb7ePeci/fg93j3nAhDBvuP+5KL+/T3j/uSCA4x+fAB99bkA/crMRXTBveP95KL9/T7j/eSCEMG93j7nIv74Pt4+5wIDizZ983e983ZAfeX2wP4SiwVw9kG+wiIZKXQGucH5lrNQpkejAfSmb7M5RrnB9GypfcIhx7ZUwchQkQmHzgHKl5i+wuNHjgH9wuNuGIqGjgHJtRE9R4OLNn3zd73zdkB95nbA/c2LBX11NLwH94H7Li09wuJHt4H+wuJXrTsGt4H8ELSIR5TPQb3CI+ycUUaLwcxvkrSfR6KB0J9WkkwGi8HRmRx+wiOHj0HDjHZ+VTZAfc92wP4XjEV2ftl+VT3Zdn7tf3wBw4x2flU2QH389sD9yIxFfe1+fD7tT33Zf1U+2UGDvsG+jsB9z/3mwP39ssKDvsG+jsB9zr3mwP3ivsGFfdL+Gj7S/hnBTsG90v8Z/tL/GgFDkz6DAH3TfcfA/hfTBX7SPezi/fP90j3sgj7pv4MBg5M+gwB96j3HwP3IUwV96b6DPum4QoO+YDZAfc+3AP3Pvd/Fdz4lfdy2fvDBg4k2QH38dwD+EL4fBU6/JX7cj33wwYO+wb6OwHf+EID95/LCvfy/GjqHQ77Bvo7AeH4QgP34fsGFeYdNBbmHQ77Jvp4AfdE2wP4P/smFb/E+3P3XQX4dwf3cfdaV8T7jftzBfy3Bw77Jvp4Affs2wP3QfsmFfeP93YF+LcH+433c1dS93H7WgX8dwf7c/tdBQ73fbP4HbPbswH3PrPcsvOyA/c+930V9zT4Rfcj9zT7wwaz/L0V+JX3dDv7I/xFBw4ks9uz+B2zAfcTsvOy3LMD+EL4fhX7NPxF+yP7NPfDBmP4vRX8lft02/cj+EUHDkyz+byzAfdNs76yA/hWTBX7SPezi/fP90j3sgj7nf4MBvdXsxX7L/m89y8G+x/7oIv7o/cf+6EIDkyz+byzAfexsr6zA/cqTBX3nfoM+53hCtGzFfcf96GL96P7H/egCPcv/bwGDpUd94r3DAP3kWQKlR33MvcMufcMA/c5+zBJCvcLZAr4QfcMAfcw9wy59wwD+EfYCvsL9zAVWQZM+z4FIfcM9wxVBw745/cMAfcy9wy59wwD9zn4S0kK9wtkCvhB9wwB9333DAP37tgKDvjn9wwB94r3DAP3kfhLSQoO1/gkAdr4TgP309cV+z73XPc+91wFJAb7Hfs3BUEH9x37NwX3xRb7Pvdc9z73XAUkBvsd+zcFQQf3Hfs3BQ7X+CQB2vhOA/et18QK/Aj7XBXyBvcd9zcF1Qf7Hfc3BSQG9z77XAUO1/gkAfdb94QD+EvXFfs+91z3PvdcBSQG+x37NwVBB/cd+zcFDtf4JAH3NfeEA/c118QKDvladwH3P+Hh4QP37fgTFcgGoveLBdszB/sn+9sVyAaP99sFMzsGDoEK+BMVxwaZ948F1zM/Bw6K1vgS1fXVAf8BB4AA/wBQgAAD9yeKFeWKvbmV5K/31xj3UdX7SQaRvQWvj6Gfrxv3BdUhBjFZXjKBH4ZdBfsdQfcVBmf72wVnh3V4ZxsiQQYOi933gt33dd063RLl4dHW9wflT+UT3feKMBXW5gb3Jo3k1vcNGudQyimYHhPe15m+xtga9wRG0/sclB7rQCz7MP1a9zAHRd0V94LR+4IHRffUFfd20ft2BxPd1vvUFfeCB+qJvV5AGkRZYCyJHhPu99UE93QH2oSvYkoaS2djPIQeDiD3qNn4AncBp90DHAVbxh0c+jT4Ajn9Wt33nhwFygYO/Vcx2ffL3vfK2QH3ud34WNoD+WsxFfXU0vAf3AfsurT2iR7eByCJXLTsGtsH8ELSIR77bj33TQbrjbBxRxoyBzG+StJ9HooHQn1aSTAaMQdIZ3EqjB77TT0G+xoW+fA5/fAHDviBSAr3y934M93/AaOAAFYKE18cBR6CHfyJhwr8hYcKE6/6yPcIHSBsHfgX3fgr3QP4FzEV3fnwOQb4ff3wFd33h/i42fy49yP4uNn8uPfSOQYOIEgK98nd/wE/gABWChNe+VuCHfwlhwoTrvhz9wgd/VdsHffI3QP3yDEV3feH+LjZ/Lj3I/i42fy499I5Bg79V0gK/wCzgABWChNc90iCHROs2TcV+VX7o/1U+6MFDv1XbB33NfoCA/c1+AoV+gLZ/gIG+78E+gLZ/gIGDiD22dzZ3NoByRwGjAPJ+D0VHAaM2hz5dAb8IQQcBozZHPl0BtwEHAaM2Rz5dAYOIHgdHPprPRwF4lsdHPoePRwFlAYO/VfMCvrIE5j5l94d/dE9+h5bHf4ePfnQBg4gxB0cBVvDFVIK95j7mQUTMhz53vsiFRwEwQYTivsP+w/2jE4dEzL3B/sHBRz7Rj0cBQcGz0dPTwUc+vEGDiDTChwGX8IV9gb7mfeW95j3mwUhBvuY+5sFHPrj+x4VHATUBhOo9wv7DAX2BhNo+1n3WgUc+w8G9xQEHATvBhNY91r3VwUhBhNo+wv7CQUc+ywGDiCL92tYCvdjEskcBowTaMn3HRX5gQYTqFv7HQXdBhNou/cdBfnh2f3GBrj3FAX5mdn9fvMd/eM9+cgGX/sUBf2cBg79V/cMHfc9whX3cfdxBfmA2f2A1wr7mQUOIPeo2WWxErAcBsUToBwFe+cdHPsU1wr7mvaMBROg93H3cQUcBOwGDv1XcPjkAfeY+UUD95j3GRX5Rfc3BfUH/UX3NwU3B/jq+xj86vsZBfuHBPlF9zcF3Qf9Rfs2BQ4geB0c+04GE1j7DPcLBSEGE2j3WvtZBRwFG1sdHPrjBhOo+1n7WfaMBRNo9wr3CgUcBLMGDiD3qNlkshLJHAaME6D3rcEV9Yz3cvdxBfr92f79Bvty93IFIgYTYPeY+5kF/HT7mRVSCveY+5gFDiDTCvc9whX3mPeW+5j3mwUhBveY+5v7mfuWBRwGjPcMFdkc+w8HE6j7WftaBfYGE2j3C/cMBRwE1PdiFdkc+ywHE1j7C/cJBSEGE2j3WvtXBQ79V/eo2QHJ+sgD+EHBFftx93IF+jbZ/jjRCiD3qNkByRwGjAP4QcEV+3H3cgUcBfrZHPoE0Qog/wA2gAD/ASuAAD3ZPffAEskcBowTkBwFW8EV9oz3mPeYBRMw+5j3mQUhBhNQ93L7cgUc+pQGEzD3cvdyLB0FE5D3mPuY9ooFE1D7cfdyBRwFaAYOIPeo2WWxEqkcBsUToPghwRX7cvdyBRwE7Ab3cftx9ooFE2D7mfea9wAdHPsU1QoO+IHdHRwFUdkc+q+mHfrZ3R0cB6nZHPhXph39V0gK9zTZ/wLAgADZE1z6QoQd2cAVE6yCCiBICvd5Vgr/AT+AAN0TXvqHhB0cBO77whX5Wjn9Wgf+4vf3FROuggr4gUgK93pWCv8Bo4AA3fgz3RNf+oiEHRwFUvvCFflaOf1aB/jXFvlaOf1aBxz5Xff3FROvggogKAoBx9j/AtOAANn/AtSAANgD+nkW+Xv3wgX1B/1798IFNwf5Lvuj/S77owX7VjcV3wf9Lvej+S73owXfB/17+8IFIQf5tPvCFdkGjPlaBT0GDv1XcPjkAfeP+UUD+kD3GRXeB/zq9xn46vcYBd8H/UX7NwUhB/lF+9cV3gf9Rfc2BTkHDiDIHRwFlNkc+h4GS8vLywUcBeLZHPpryQr4gcL3WFgK91kSyRwI5BOo99bCFfYGE2j7CvcKBRwG8gYTmPsK+woF9gZOHRNo9wv7CwUc+QoGE1j3C/cLLB0FE2j1FsvLBRwHkFsdHPhwBg4geB0c+2LtHfaKBRNo+wv3CwUcBJwGHPrW9yIVy8sFHAU4Wx0c+sgGDiDIHRwEswYTqPcK+wr2igUTaPtZ91kFHPrjBkvLy8sFHAUbBhNY91r3WQUhBhNo+wz7CwUc+07JCv1XwPiUAfcl1vmM1gP47MAV+Fv3XwX1B/xb91/8W/tfBSEH1sAV+BD3PvgQ+z78EPs+BQ4g96jZAckcBowD+EHBFfuZ95n3mPeZLB33mPuYBRwFiPdxFdkc+t4H93P3ciwd95j7mPaK+3L3cgUOIMQd+EHDFfuZ95n3mPeZLB33mPuYBRMyHAWI9woV2Rz68QdPx8/PBRwFB9kc+0YGE4r3B/cHLB33mPuY9ooFEzL7D/cPBQ79V00d+mrfA/fP94QVntuF6MHJhPsIiwrLhPsI9wAb9wCr9wbbHzcGRHZeaB5OmPcI+wkjkvsITVCY9wj7BSKT+whMG2CM95j3mfcNHfWKBQ4gwveXPdmx2RL3QxwFqhOw+EfCFfYG+0v3SQWR74b3AskbE3BtHfcIycd9+wj3BfSD9wjKbR3iyRuzBpOD+5n7mAX1BveZ95j7mfeZBSIG90X7RgV7P49HV2kKT029ChsTsPsJmPsIThtIBoeM95n3mSwdBQ4gTR0cBfPfA/jEwRX7mfeZk5MFswbJhDSLCsqD+wj09wV99wjHyYT7CIsKy4T7CPcAG/cAq/cG2x83BkR2XmgeTpj3CPsJI5L7CE1QmPcI+wUik/sITU/3Dx1Xj8+bPx/3RfdG9w0dBQ4g+xV2+fB3Afd+HAU1A/kb+yoV4Qb3tfkI+Fr7Pfxb+z4FNQf4tvdfBfUH/JP3UtT3MgU0Bvua/M/8W/c++Fv3PgXhB/y2+18FIQf4lPtSBQ79V00d92PeA/ks94AV99/Z+98GUPcPHWh2uNIfOAY7qvsG9wAe9wV+9wjGyYT7CPMbDv1Xf8pNy+XZsdmZuV3C9x7UEviU2aDb9xrQ///IgAD/AECAANXTE7PQ+Wp/FbO0rr+fHxNzUJr7GvdZipX3vQj3c5Io9zH7PRv7NvsG+wf7OT1zZWUfTfAdGz0H84T3CMnHffsI9wUb6bnM9xX3Ddzh9wf3EtL7FPtMhR/7EIZ4VGgbdoKw2JEfE3swnfd6BUMGE3cwiGcFp39xnGkbQEw1+w9+HxOz0PsPfLo12xsTt9CfyhVjdMjjkx/klK3Jsxuzn00ygh8zg2tOZBsO/VeL2fcU2cnZs9kS9xHlON75m94T9vcY9+4VE/reBtDTvPAe90iy+wr3XRv3L/cC3PcHHzgGRj9aIR77SGP3CvtcGxP2+yohOvsHHxP6hPvuFfpK2f5KBvcUBPpK2f5KBg79V00d9xrfA/oJ94QV+077TvWM95n3mPuZ95kFIgb3mPuZYIoFTKMKG8GFLnjbHw79V/eA2T33Vj3ZEvdu3/jn3xO49273gBUTWN8GE7jSoLiuHsh++wj3CfOE9wjJxn77CPcFG/cAq/cG2x8TWDcGE7hEdl5oHmkKUEuS9wj7ABv7AGv7BjsfDiBNHfdV3wMcBNjBFfWM95n3mPuZ95kFIgb3RftGBXs/j0dXaQpPTaMKx337CPcF9IP3CMptHeLJG7MGk4MFDv1X2gqumh15mh0TRgC0fxXqBvhW+XYFLAYToMCuChNbAK0K+Er8WhXqBhOkDPhW+XYFLAaF/WoV27fX7Otf1zs6Xz8rKrc/3B/XBGt6rsnJnK2rqp5pTU14aGwfExgwqQqL9xD4B+QBk9n4P9oD9Bb4GgbDtLTDH/gaB8NitFMe/BoGU2JiUx/8GgdTtGLDHnj3EBX3afgH92r8BwUORdDdyk3L9765XcL3HtQSodS32vcd2P//voAA/wBBgADU1BPPoPhDbhVtzAVzYGF+ZBsiPun3S/c/1vdS9zjyz/sK+0AfE7eg+xZ0RGpzg7DYkR6d93oFE9dgQgYTz2CIZwWmgHCdaRsiWvssJii4Sc66r6y9nx8Tr2BVmKxvshvax/cJ9y33Zyn3J/sk+2gl+3X7Zvtx9wT7EPcgHxPPoL6/mKfBH/sx90EVaHa40MSi9xXIrZ5gSFt8+yJJHw5/2UnyOXb5Ft8SqeJ84fcv38HjE5v3rX8V0MmfsLMfEzuvXgXxBhNXNvIFsbql29saM5OPVIJLc2oZ+zj3ZdC2uMCcwBmt8TzmKpQIMpM1RyMaWKBSuU4eE5s3TFRnIRr7FvFF9yke2QQnS7rWzca2uKkf90H7bwVxdmB7WhsTl2D4CRVovHyyqxqKurCyu4gIt4imaV0aX2NdSm0eDqB2+Q7XAfex1tHVA/ex98YV+8bW+Q7R/Q7V+Vr7bwf7KS09+xD7EOk99ykfDvsB2/kK2xLs4zbj94XjNuMT1PfK+wEVE9jy87ztwHq2SqofE9TDoaiwvRrnWLT7LrEeKKVvnrQatLmoyNm8ZlCVHuGRBfcBfPsEyDUb+wQuVCVbqmjIcR8T6Elvbl5UGj/BY/cmaR7qc7BvYxpeW25EP1OzzIEeM4UFE9Qile5B9w0bjffTFRPkLZVqrLUatLmnyMPfdk0eE9RfW3BDHg5/0NTQ98/Q1dABj8/F0Pda0MjPA/e/fxX3QvcO9yz3bfdt+w73LPtC+0L7Dfss+237bfcN+yz3Qh/QBPsfM/cI90z3TeP3B/cf9x/k+wf7TftMMvsI+x8fktQV3NHI7ZcfRpAFTIJma1sbQ2jE7/CuxNO6r21Skx/QkAXogUPFPRshRTL7Hvse0TP1Hw7jCuu+873mwwP3wPdwFfcg9wT3Bvcg9x/7BPcF+yD7IPsE+wX7H/sg9wT7BvcgH8QEIDLk9wD25OP29uQzIPsAMjIgHyfFFb71tgbLIQXFBkT3BQWxlaGnsRrAYKtEHjAG7vsRFVvcuwavn31ycXd7Zx8O4wr3A77zvdfDA/fA93AV9yD3BPcG9yD3H/sE9wX7IPsg+wT7Bfsf+yD3BPsG9yAfxAQgMuT3APbk4/b25DMg+wAyMiAfNsUVvvW1BtOzqcC/X6xFHzAG7vsRFVvcuwauoH1ycXZ7aB8O+SLDAe7G9wTG91HGA/ga9/sVzgbI90gF+0jG9/NMBzD7pTL3pQVL+/PG90kG+3r7SRXG97vew/t0U90GDvga1Pcu1AH3KtX3LNUD98D4GhXdz8/d3UfPOTlHRzk5z0fdH9QEYWmutbWtrrW1rWhhYWloYR8O+C333gH3cvcwA/dy+C3sCvgt994B9yL30QP3IvgtFc0G5ffeBS4G7fve7Aox+fAB95fdA/eXMRXd+fA5Bg77FXb58JYd9/cV2ff3PQb98ATZ9/c9Bg5FHfdIdwH3mtkD95oW2fhc9y3V+y33SD37SPsvQfcvBg77FXb3ONb4A9X3SJYd+yoV2fc49y7W+y74A/cu1fsu90g9+0j7LkH3LvwD+y5A9y4GDovZytf3Vdf3dHcSkN/3LN+q10/3ZFDWE/6AkBbf+IgG9xH8iAX3A/laN/x/BvsN+H8F+wcGE/0A+AP9WhX3ZNn7ZAYT/oDzyhXQvs719VjNRkZYSSEhvkjQH9cEcnixxsaesKSlnmZQUHhlcR8O+1LZPfdSErHa+ALaE7Cx+1IV+KAGE3D3UjwHE7D7BPwCBxNw9wQ8Bw73ZLzqvK+86rwB2r73Xr0D9+DSFb33HfclvPsl6vcuvPtgBvuRJhW+9x33JLz7JOr3Lbz7YAYOi9D40NABmdD4RtADmRb40Pla/NAG0P0VFfjQ+Eb80Af7yPcfFebm5i/DwzDn5eVUwjExL+ZTU+cwMDAFDovQ+NDQAfif0AP3Mhb4Rvla/EYG+y77+QX3XfuwFfsR97H3EfezBffS/NAG+7P3HxXl5ucvwsMw5+XlVcIwMDDnU1PnMDAwBQ6L0PjQ0AGT0AP4Thb3Lvf1+y73+QX8Rv1aBvgX0BX70vjQ99IG9xH7swX7MPsmFcLCMebm5lPDMC8w5lVU5TEwL8JT5+cFDph291bZ19n3atkB94PKxtnX2QP3woMV91b3t/ig+3z7uFD3VAf7vvvIBfd/ZRUoB/sX9xz3F/cdBSn3XPe41/wEBw739LwB+Ca+A/ct98AVwQbw994FVgZA+5NA95MFVgb38vzDFb73req8+4Va6gYOf9tadvizdxLR49j/AEqAAP//7IAA1hO493swFdYGktoFjAb3CuHX9wqhHzORez1YY0qJGa34Gbp+rWaYVBnjkQUTdHjxTMoumpPmGEAGgzMF+xh+NyH7MRr7Hssq9GseOvefFfcAt9HYmx5q/A0FU6dry+YaDuzU95LUt3cB7tT3ktQD97/sFbWymKGrH9o9v7892gWgq5iytBq1frF1qx7a21e/OzwFoWtlmGEbYmR+dmsfPNlXV9k8BXVrfmRhGmGYZaFqHj09v1fZ2QV1rLF+tRvUBEVSxNHRxMTR0MVSRUVRUkYfDjD3NDffTHajdvlzd6B3Esvl9wTV9xXlE4eA954wFdUGEyuA1wf3F5Tj1vQa9wZRxvs1ux73hwfQe7BTlUPlkRh99wpE5PsNmwgTF4DdQToH+xJ/Pzz7ARoixFv3JWEe+5MHQ5xewn/iMYUYlvsU3y73EHkI+wT4sBXGtrbQlR77cgc0qHKkwxoTR4D3TvxfFfeBB/Rlo2hSGkxeZTeFHg573/c71dvV90ffAf8AMIAA5QOV+BkVsgaKaIxeBWRBuwb7MafjLfceG/ca6en3MKUfMJAF+wV3TlE5GzVUxvcAdR/3XQaW1QX7cgaKuIyuBfd7BpbVBft+BvcIn8TK4xvVxlYloh/nkQX3J20u4fsRG/shMij7OHEfXQYOf9/3N9Xb1dJ39xTfAbzl99LlA6H4GRX4wNVZBpeekqOgGvcOK9j7LPsGMUH7Cmwe6YIF1qvCtc0b4cdbSHGEd3l5H/wuBvej/G8V9xPt0PcCqx8pkwVMcExjQRszTrnNnJGdl5sf+DnV/MBBsgaDfId4ehr7B+869yQeDqB29w7V3933nt0B9wLh97DlA6z3DhXY+w7h9w7k1TLf9xb3AR37bPyWPgb3r/c6FfsM9573DAb3BL9cNTVXXPsEHw6gdveo3+rW699B1RKw+KAT9PflFvcNBvvD96gF1wb3IuTN9wWcH93WOgYT7IW1e69ypwj3FAYT9NX8oDf3Vgfnv2tLmR/79ED38wZMfFdrMRv7VjcGDove+LTeAZ/i0uHS4dLiA/dGFvePBufFxecf+MQ0/MkHZXRzZR77O/hsNQb7Mvy/FeL5B/c7BrCjc2Uf/C7h+CkH51HFMB77kAYOi+L3etX3j98S9wfkYt8394kT6LviFTQH+IWOBd/8OQfqtrHngeoIE+T3NdUGE/D7RQZ6wIGzqhrVx8DNxr1qU50e7pIF3nxD3vsjG/sJLTb7BGmTZZpdH5F3BSpBBhPo9wYGjWQFN2RNP14eDqB29yPZzdn37XcB95bhA/eWFuH3I/c42fs4zfc42fsSBvdC9+3ACvdE++0F+xI99zhJ+zg99zgGDvee2fdblh3OFdn3W/db2ftb91s9+1v7Wz33WwYO97PZAcn4cOgKDt/4GwH3EvgcA/cS9x8VwlT3Ifch9yH7IcLC+yH3Ifch9yBUwvsh+yH7IfchVFT3IfsgBQ7f9wze2ef3DAH3hPcM6Ar3gvutUx34CQRWHQ5sHdv4TAPb+AplHfct2fcj2T33RxLb+EwT0PdMthXYBq33AgX3ddn7XQa29yMF9zLZ+xoGE7Cq8AU+BhPQbCYF+3k992EGYPsjBfs2PfceBg7A+JQB+FnWA9TAFfhb918F9Qf8W/dfBTUH+BD7PvwQ+z4FDsD4lAHT1gP4o8AV4Qf8EPc++BD3PgXhB/xb+18FIQcOi9kByfhwA8n3SRX4cPcYBfUH/HD3GAU5B/gbJPwbIwX7mgT4cNn8cAYOi9kByfhwA/iu90kV3Af8G/P4G/IF3Qf8cPsYBSEH+HD7zRXZ/HA9Bw6v2fdt2T33ZRL3mdkT0MmvFfhw2fxwBvdtBPdb+xfZ9xf3W9n7WwYTsPcXPQcT0PsX+1sHDt7VQfdG+zz3RUHVq9VB90X7PPdGQdUS2tn3stkTmcD4G/fCFdu91fIfE5TAPQYTmcBNemJlZ3qop3Uep3Rwp1UbPFhBIx8TksDZBhOZwMqctLGsnHJxnx5to6ZrxRv7bwTbvdbyHxNJwD0GE5nATXphZWF7sqxuHqF3cZ5dGzxYQSQfEynA2QYTmcDKnLOxqZx2cZ8ebKOlaMkbDveA2T33Vj3ZEtne96neE1jZ94AV3gYTuNKguK4eyH77CPcJGxNY9wCq9wbbHzgGE7hEdl5oHkuS9wj7ABsTWPsAbPsGOx8O957ZAfgn2QP4J+oV2feN/Bs9980GDvkK24t3EvcH+AYTYPcH9+EV3wYToPD3vfD7vQXfBvsY+A0FIQYO9wfX9zPXQNcSktf4RdcTuPcr9wcVwcmvy6wfSazLacEb3MfR4R8T2OFP0TqKHlJPZ0xpHxO4yGpPslMbOE5FNTXIRd4f1wRjb6y6uqessx+zirpqpV0IXHFcamMb98AWY4pbrG+7CBPYqLq6rLOKCLGKpmpeGhO4XXBqZYoeDvsq1vla1gH3AvgPA/cw+yoV5om9upXkzfjoGI+voaGvibqJGJLWXYwwjVlcgTIZSvzoh2d1dmeMGVuNhEAFDovZ+MXSi3cSmsv4TssTuJoW+M73Ewb7efjbBfsEBvt5/NsFy1oVE9j3cfjF93H8xQUO+xV2+aLZEpz3Uj3Z91LZPfdOE9j3FfsqFdn5ovdS/aLZ+aIGE+T3ANn8yj0GE9j3BAYOi9/4st8B0fhwA9EW+HDf/A0G90n3o/tJ96MF+A3f/HA3BvdK+6P7SvujBQ77FXb5ptUBnPjLA/cK+yoV7wb3LPmmBfdq1futBvsc/VlG9+MFOgYOf9hTdvgq2xKz5PfQ6jrcE3T3nn8VxYXBnr+29y/3HLn4pPxHuHc+GPdDe/X7DI37RG7LUrJDkvsmmCU1fvssfvsi6CD3Jn8IE7iK2BUxlVLNlvCS7M/K5YPYhchdmD6C+xFAOCuTCA77FXb3HtVidvimdxLq3/eK4DrcE9zq+yoV3/ddBmSctXO9GxPaycGxyaQfE7ozBxO83PimNvvQBhPcLldQNkJnvvAe99A3Bw7aCpiaHRNXwJ5/FeoG+Fb5dgUsBhO7wK4KE5vAqQqL0E9295TR3tD3Q9GadxKYz+XPg8/lvuXOE0YAj38V4wb4Dfl2BTMGE7LgYP1qFaylnKmcH22cpXqsG86z0OLjY9FIanF6bXofqXpxnGobSGNFMzSzRs4fkNAVb3uqw8SbqqeonGxSU3psbh/3IRZufKrDxJqqqKedbFJTeWxvH/v799wVExsA1bPQ4+Jj0UFDY0U0HxOy4DOzRtMeExsA0ARve6vDxJupp6icbVJTemtuHw7wCvfRFfUH+6P3o/uj+6IFIQf3fPd8Bfyo2fimBw75D9YB/wHGgAD/AEuAAAP4W/ePFdbWBfgU/BMHQEAF99wG/Az8DMJU+Av4CwUO96jZAZz41AP3ducd/EM9+EMGDov/AEuAAAH4aNYD39YV1kAF+BT4EwZA1gX73Af8DPgMVFT4C/wLBQ7wCvgfFft8+3sF+KY9/KgH+3z3fAUhB/ej+6L3o/ejBQ6L/wBLgAABxNYD+JjWFfvcjPgL+AtUwvwM/AwF99wHQEAF/BP4FAcO96jZAZL41AP4CsEV+3L3cgX4Q9n8Q9UKDvkP1gHR/wBLgAAD9yX3jxWM99z4C/wLwsL8DPgMBffcBkDWBfwT/BQGDvdH91892T33XRKN+OgTkPc590cV9AYTUPsP9xEF98YGE5D7D/sRBfQG9zf3OAUTMPs29zYFIgYTUPcO+w8F+8YGEzD3DvcPBSIG+zb7NgUOl3YS9xT3aD3ZPfdmE6D3wYIVE5D3P/c/BfUHE6D7GPsYBfiOBxOQ9xj7GAX1B/s/9z8FE8D7QftABSEHE6D3GvcZBfyOBxPA+xr3GQUhBw73Ptj3GtcBnfjFA/e2900Vz2TbssHl4lgYdfeB+2oo3FtsVmlxa50ZbpuIqoithrKEtFipPLj7BkJ5IQjeBp7Es6aseKx4iGaSZJBol2i2cggO96fZAZ/ZA/fS9y0V9w73mtn7m/cOB/tV+zUFI/tXFdn4Gj0GDven2QH4itkD9673LRXpHfubPfeaB/e++zAV+Bo9/BoHDvcYHfiM2hOw9//3ihX3D+zm9wr3Cirn+w8f+7s997sG2slRQUJNUTwf+14GE3D3FPcTBSAG+zn7Ovc7+zsF9QYTsPsT9xQFDvcYHZzaE7D3gfeKFfdcBvsT+xQF9Qb3O/c7BRNw+zn3OgUgBhOw9xT7EwX7XgY8TcXU1cnF2h/3u9n7uwb7Dyov+wr7Cuww9w8fDqB2+CrZAfiA2QP4gBbZ+Hj7+/cOBvtV+zX3Vvs1BfcO96wHDqB2+CrZAanZA/cAFvgq96z7Dgf3Vvc1+1X3NQX7Dvv7/HgHDvd22fgqdwGp2QP3APlaFT38ePf7+w4G91X3NftW9zUF+w77rAcOoHb5C9kB+BvaA/hCFvc191UF+w34mPxcPfgN/En7DQYO93bZ+Cp3AfiA2QP4gPlaFfwq+6z3Dgf7Vvs191X7NQX3Dvf7+HgHDovZ99LG95J3Afci2fc22QON+CAV9yD8IPfS+CD3Hgb7vffNBfsd+5IV9x33Jvcc+yYFVPwN+zb4DQYO9xUd+IgV+zX3Vvs1+1UF9w78d9n4dgYO+Vp3AbH4jgP4nfhfFaL3j/uOdOE1++r76sJU9+r36gUO98/ZAZz40QP4IPdVFekd/BA9+A8HDqF2AbD4jgP3uKMV9490dPeONTX76vfqVFT36vvqBQ73FR33aBX7Dvh2Pfx3+w4G9zX7VQUOoXYBxPiOA/fIoxU04ffq9+pUwvvq++o14XT7jgUO98/ZAZX40QP3YPdVFfcO+A/Z/BD3Dgf7Vfs1BQ75WncBw/iOA9r4XxXh4vfq++rCwvvq9+rh4fuOogUO98PZAZP43AP3XfdJFfcO91r7Dgf3Vfc1+1b3NQX7DvtY9w4H+1b7NQUOlXYB95nZA/fAgBX3NfdVBfsO+DD3Dgb7NfdV+zX7VgX3Dvwu+w4GDtr4wAGb+M0D98HaFfc09xD3CPc19zf7EPcI+zT7NfsQ+wj7N/s19xD7CPc1Hw7a1vgq1gGb2fgx2QP3wdoV9zT3EPcJ9zT3NvsQ9wn7NPs1+xD7Cfs2+zT3EPsJ9zUf1gT7CTHf9wr3DOXf9wn3COU3+wz7CjE3+wgfDs3G+Ch33sYBjcX4c8UD+Gr3UxW0YJqamp2WnRlaqoJ9gH5+fxn73DgVqb58k3yWf5YZY2KafJ19noAZNdkVuq6BmIOahJwZVXWUdpV4mHkZ91b7CBWUxXqNeZB8kBl2VZ+EoIWgiBn7hfdzFcSXBYeciZydGlEGdI12kHce97b7PBVQB6Ghjo+fH4DDBYh7eIp5G/u5968VxYKOnI+ckpsZVKCDeIZ2h3UZ+Bb7nxWgVZ+TnpSdlxlrvH2BfIR6hBn77fgMFbxslJmWmJeXGWO1e3x+e394GdzeFatampWak5uRGXfBdoN4gnl/Gfge++EVwXWTn5Cgj6EZUpSIeoZ5hXwZ+7P4DRWWUgWOnJ2NnRuKxnWKdol3hxn3xPuxFcUGoYmghqAeUn8Fj3qNeXoa+yf3bRWfwXeTd5F1jhmCUZyInYebhRn3FvsSFcChg6CAnoCcGVppln2TfJJ7GVfYFbS1e5p5mHmWGW1ZmoKZgZd/GQ6LzviSzgHa+E0D94wW8gb3PffW+z331gUkBvs9+9YF4Rb3G/eT9xr7k/sa+5MFDqB2AZP42wOTFvjbBvu4+I0FDs342wFV+I0DVfkdFfzbB/iN97gFDvladwGT+NsDk/la9xQdDs342wH3KfiNA/ki9wodDu3VAZP42wOT7RX42wb7uPiNBfs4/EMV9zj3sfc5+7EFDs342wG31QO3+R0V/NsH+I33uAX8Q/c4Ffex+zj7sfs5BQ74ttUBk/jbA5P5APcUHfxcQRX33Qb7OfuxBQ7N+NsB+HbVA/jA9wodQfhcFfvdB/ux9zkFDtAK++sGDvfT4QFj+RQDY/fTFfkU4f0UBg730+EtHfeV99MV9+vh+5X48jUGDvuLHATrLR33lfuLFeEcBOs1Bg7QCvuV+PM1Bg4c+I3478kB9zT3rAP3wPjvKB0c+I34+e0B9zTj8+MD9zT4+SoKHPiN0goc+I3BChz4jXsKHPiN+O73FAH3KvfAA/cq+O5GChz4jfho94YB94j3BQP3iPhoWB0c+I3CHRz4jfjp9xkB9zT3rAP3NPluIQoc+I3478kB9zT3rAP3wPjvKB0c+I343r3fvQH3ZL3fvQP3wPjeRx0c+I349iQK9yImHROw9/z49iYKE3AlChOwIx0c+I3iHRz4jfjl5QH3hO8D9/z5meUKHPiN+xDlAfeY7wP3hPtqVAoc+I37EOUB95jvA/eE+2pUChz4jZgKHPiNnQoc+I33jNUB7/gkA+/3jBX4JNX8JAYOHPiN+PL3BAH3MC0KA/do+PIpChz4jfjt9wAB94r3AAP3wPjtKwr4+e0B9zTj8+MD9zT4+SoK0grBCnsK+O73FAH3KvfAA/cq+O5GCsId+On3GQH3NPesA/c0+W4hCvjvyQH3NPesA/fA+O8oHfjevd+9Afdkvd+9A/fA+N5HHfj2JAr3IiYdE7D3/Pj2JgoTcCUKE7AjHeIdmAqdCvjy9wQB9zAtCgP3aPjyKQr47fcAAfeK9wAD98D47SsK+Of3DAH3hfcMA/eM+EtJCg57CoEK+D8VxwaZ92MF1zM/Bw57+XoBmvjPAzEKDnvV+OfUAZrV+DzUAy4dDnub+KaX9zybBvs2lwceoDf/DAmLDAvfCuUL248MDN+RDA347BQcB3MVthMA1gIAAQAHAAoAEAAWABsAIAA2ADkAPwBCAEUASABRAFcAYgBqAHEAdwB9AJYAoACmAMUAzQDkAPEA/gEJAR0BIQEpAWIBcAF4AYMBiwGRAacBrgGyAb0BzAHUAdoB4gHoAgMCDgIYAiICJwIzAjYCPwJHAk4CVQJcAmICZgJpAnQCeAKVApgCnwKwArYCuwLNAtEC1QLhAuwC9wMBAwoDEwMeAyUDLgM1AzsDWANgA2gDcAOVA6wD0APUA90D4QPrA/ID/wQCBA0EFgQgBCkEMgQ7BEQESwRTBFsEYwRnBH8EmAT7BS0FOQVCBZIFowW7BcIF3wX9BhcGKwY4BlAGcQauBsUG/AcdBzsHXgdpB4MHtQe6B8cHygfUB+kIEwg9CGYIfAiECJYIngiiCKwIzwjiCOoI9gkWCTQJUglvCXcJiAmaCakJsQm5CcEJ2AnvCgYKHQoyCjYKTApRCmIKbQp5CoMKlAqhCrAKvwrQCt0K5Qr2CwcLFwsnCzcLPgtNC1wLawtyC4ALjgucC6cLswvAC80L2QvlC+kL9Qv/DAcMDwwaDCUMMAw7DEYMUQxc9xlgthILtgoOe9/40t8Lf9v4HtsLwY3BEgvmCt8KCxXEsLfXjx9XBlmHfntyG3t+kpx2HwtwHQ6gdvladwuAHQ7CCg4VzR1/2/c/1fcp2wv3BMz3BAugdvda3ff02Yt3C3/VYnb4YtsL5cm4vKMfC/fBe7UKC5Ed44MKC5zbFfsCYOvw9Lbr9wL3AbcpJChfKfsBHwt/20fP+CLLS9cLUmxrUR4LvAqJ96IVMFPP9wH3AcHP6OfIR/sBiR/7AYpQRzAbCy/bV/Ee3B0L2xb4TN37Rfi290Xd/Ew590X8tvtFBgv7Ntvqdq/b9/bbf3cL9737NhX3JuLV9xAfC40wBdv3+vuOOQYLpAa3rWtkZ2tuYmFopauIH06IBQsWQwoLf9Vidvimdwuc3BXhBtGaq8GuHuHDsbffGvcLM+D7FvsmMS37GH8e5YUF65W8v+4b3LpYRk99cz1bH0Zgb1krGgv3wHsV9yrl8fc2H9QdC9sW+HRcHQYL9757FeHBtcytHwv3DPcM+wwGC9f4pjcGCyxYUjg/Z7ryHvfSN/vpB/sSz0D0HgtCHdX7FCAd00IdDovfTHb5Bt+LdxILFb0Gyvc+BfX7DPsMwQcL2/imN/vQBgtfB+6MBQ735/haFdkGC4vV+MbVCwPdFvhI1fvsBvfk+AgF3/w2QffaB/vk/AgFC5sdsauVm5se6x0L9x/3lAU9BlQdC0wK9x/3lAU9Bgv2jE4dC4v3Bi52+Oj3Bot3CxVmCsvpBeEnMa0HDtn/AsCAANkLQk1pQm8fCz3Z9xTZPQv7FXb3KtUL//+ygAAL45oKC54KDrsKcm9vZh9yUgYLwB0FC+sW3/fRBu3FwN3bq1YpHvvR3/fpB/cEUuT7DR4LUx0OAeXhAzcdC+kW8wb3dfgeBfwe3/imKAcL9wMd+xYL+zBJCg7X+wEHSWBqRnkfhfEF+2RBBgvDBlUKFWcdC/zoB/uS+OgF+wwGC02S9wgj+wWY+wgL5Rb4GtX7PPeKBgv7evwmBfgmNwcLi/cUIHb4pncLyl/K9wrKX8oL9wwB94T3DAP3hAv7KtX4qNULyFzI9xLIW8oLyvcgzlLEC/imBS8GC/fBexX3N/L3FPdfH7f7njf3Qwf7E4xHO/sApgoLIgrD9xSsHQsB0eH3rqodCysd5/cUux0LA8cW4fewBsvP94j79AX1Bvu2+DD3ove+BSEG+7T7zgX3zjUHCyId3u0S97HjO98T6EEKE/D3YfivJR0OIWL7BfsKKrY06B+MxBVhbq68jB+7jKqtshu4o2lbWnFoXx8OuwofC/MK93D47kIdDv4wVAr7WvuaBVn3UAcLxBL3M20KC/sCxBX3AvcmBfsmBwvxCg75WncB95TjA/eiC/lV96OK/LIFDgb7bPlaBfsIBgsSx+P3vt872wugdve03feW3Qtyb29mHnJSBgv9WhXd+Vo5BgtzXwbujAUOi/cM+J7fEgv3BBL3L/cEC/P3BX73CMYLA5kKCzAdx/cUEsHj95bfE7wpHRN8Mh0TvDQdCywK0O0SzeOX4/PjjecT/UAdE/b7rve+KgqL3feC3fd23RLl4feY5U/lE/TlFvd1Bvcq5tb3D+dQyimYHxP415m+xtga9ww71fswHvtcBhP093b9CBX7IPeC9yAG7b9dP0NXXykfE/h199QV+wr3dvcKBu23YUNEX2IpHw7VaQd1gZOjH/dwB/caQd37FPsMPUcndx7khAXIm7Kt1RvXtV8xH/tGZwX7CHRXXDEaCyMKAenh95LhA3UdDpUK+wTRFVcdDovd94DV94DdAfcV4fe85QOB99IV9x/70vc8BvdM9wz3Evd493j7DPcU+0wf+zz70vsfBvfC+8oVPveA6tUs94DYBvce3C37SPtIOi/7Hh8O18XB4t9VwkYfE/R9HRPseQrGCk8dZvtcBfsRBk8dih1m+1kF0wbWCgsjCgHRWwoO+xDlrfcGHfPv3+ETr9EW4QYTt2QdE89oCvc+fApEHcV2Evf1whf3ymkdrbBglVZRfB0TeGJlBRP4WR33wnsV9xrp6fcwpR8wkAV+Hft36fsj9z4fCwP3zn8V9xcdBcMd+zzr+wH3KB8LPx3n9xQBwfiEA0EdCyId0vcAEveo9wAw3xPoQQoT8PeO+KMrCvtmz/c3dgH3aNcD98L7ZhWxq5Wbmx+MHUaVa2MFmx0eDhX3nMT7UwaMpaeosKSnnRjIsqy7uhrNWrlFQVdaPoIex4gFupSkpLQbq6V0a25+dGZzH2t2BShKeEpNGgskHd7tEvc045ThlOMT6DgKE/zb+VsqCqB2+Of3B4t3Esfh98jhE7j3mtsV1wYT2PcI+JcF/Ofh+Vr7Fgf7AvyC+wL4ggX7Fv1a4fjnBg6gdvimdwHB+IADwRbvBvcn92r3J/tqBe0G+1X3osUKBQ4oCgG9+IgDvRbtBvcr97f3K/u3Be8G+1j3+OEdBQ69CvsJmPsIThtodrjSHzcGO6v7BvcAHvcAhPcIy20d9wjJC4vj+E535/cUvR0LrOQVwgaR0ZT3Ddsa93o1+3oHO5X7DZFFHg4b+w5G9xn3Lfcuz/ca9w/dzE81oh/lkQX3Fmwo6fsWG/s6+wf7Oftj+2L3CPs49zkfC00KsAoLKArn9xQB95bhA0kdC60KDigKAfeW4QNJHQ4S0eH3tOETXtEW4QYTbmQdE55oCgt/FeS2uPcJpB82kgVLfndyZBtZbMj3AoYf940GirEF90WFVuMkG1JfcQv72ve2Fdy31+vsX9c6O18/Kiu3P9sf1wRsea3JyZ2uqqudaE1NeWlrHwuF/WoV27fX7Otf1zs6Xz8rKrc/3B/XBGt6rsnJnK2rqp5pTU14aGwfC7KqnKafHz+Cal1bG210mqeBH1CFBQsB97nfA88dC6B299Dd98x3Ac/h97jhA8oKDgH3+N8D0x0LA8wdCyQd0/cULR04CgsV+0T7Avcj93j3ePcC9yP3RPdD9wL7I/t4+3j7Avsj+0MfCxXo+xkF6Qbo9xkFRQZFMUXlBQtUHROAkIUdC/s+4iD3IB6Q298dCzf7IQYuT1ErRF3F5x73Ijf7Igf7Idky9w/Sx7PGpB4L+CUW9zPV+zMGYnmeth/40vuaQfdG/IgHNL5a5x4LtpiisbAaxVa5RkxUYVWDHsiHBaKOpp+uG6yncWwL0Mevw6UfNQc9VmUrOWepvXseM4UFLqHhTvcGGwvwHU2S9wgjC/eo2QHJHAaMAxwFW8EVUgoLgQr4DhXHBpn3WAX3HDP7HAcOBSkG+zL71Psy99QFKQYL8wr3yvjuJx0lHfdUKSUdC0QKE5yA9R0LFfIG9x33NwXVB/sd9zcFJAb3PvtcBQv3TPeYBScG+xz7XPsf91wFKQb3TfuWC7D3WQXjBpfRBTQGq/dBBd4Gl9EFOQYL95n3nQX7Cgb7jfuWBfeWNfym4feWBwv3ZxVqcHBqaqZwrKympqyscKZqHw7tHQUOzxbh99D3uPvQ4flaNfvM+7j3zDUGC/sG6h0L/wA2gAD/AMSAAFgK91kSyQvX+Vo3+5L3BB0fCxXbyLjUvG6xXJ8fC4v3Bh33tOETXAv30+EtHfeV+4sV4fjK95XhCwb3cvdyLB33mPuYBQ74+e0B95TjA/eU+PklHQ7C91pYCvdXEskcBowTaAs3/Fz7CfhcNvxc+wn4XDcGDgb3cfdyLB33mPuYBQuw91kF9xEGCwb7cfdyBSEGE2D3mPuY+5kL+VUVWQZM+z4FIfcM9wxVBwsB7+ED7xbh+Qb4At/8WAYLi9dIdvet16DX91XXmncSC/dn1ftn9yA3+yD7Q0H3Qwv3lRbh6woL4RP6+If7KhXh93AGE/wLBTEG+zD8Qfsw+EEFMQYLvwa7jZ2aoxuflIR4oh8L9xEd95DfCwb3SPuyi/vP+0j7swgLi/cOPdnW0fdB0fdcdwv3cMT3OLbct8fEAbvDC3fr9wQB9y8tCgMLFVMGSy0FNe/laQcOnnR2mGsbVWNjPokfC9X4ENdB1RL3eNRC3wsDyfezFfhw2fxwBgsGY/wKBVyGd3JqGwvvCuUL+Qj3bd38nDn3bQYLFc0G5ffeBS4GDvsm0fsX9y4L9zzp9xn3gQv7Kvd0QdX4XHcSC535OAH3mdkD+M8L0xXRBkn3FAUtBgv3DAH3hPcMA/fAC/ju9xQB93D3NAML6/cA9z33PSv3AAt38u0B9zTj8+MDCwAAAAEAAgAOAAAAAAAAAcIAAgBIAAIADAABAA8AIgABACUAKwABAC0ALQABAC8AQwABAEUAUwABAFcAYQABAGMAcgABAHQAeAABAHoAgwABAIUAqQABAKsAswABALUAvwABAMEA8QABAPYA/wABAQEBEAABARIBFgABARgBIQABASMBUAABAVMBUwABAVYBWQABAVsBXQABAWABYwABAWYBZwABAWoBbQABAXoBfwABAYIBggABAYYBhgABAYkBjAABAZABkAABAZIBlQABAZgBmwABAZ0BnwABAaIBpgABAaoBqgABAa0BrQABAa8BsAABAb0BvQABAcABwwABAcUBxQABAckByQABAcwBzAABAdIB1wABAd4B4gAEAeQB5QAEAf0CBgACAhwCMwACAjQCNAAEAjYCNgAEAjkCOQAEAjsCOwAEAkECQgAEAkUCTAABAk0CTQAEAlACUAAEAlICUgAEAlQCVQAEAmYCawABAnQCpAACAqYCpgAEAq0CrgABArECsQAEArUCtQACAr0CwAABAsYCxgABAsoCygABAssCywAEAs0CzgAEAtMC0wAEAt4C3gAEAwEDAQABAxADJAADAAEAAwAAABAAAAAgAAAAKgACAAIDEQMVAAADFwMdAAUAAgABAx4DIQAAAAIAAwMQAxUAAAMXAx0ABgMjAyQADQAAAAEAAAAKAGoAmgACREZMVAAObGF0bgASAEgAAAA6AAlBWkUgAERDUlQgAERLQVogAERNQUggAERNT0wgAEROTEQgAERST00gAERUQVQgAERUUksgAEQAAP//AAIAAQACAAD//wACAAAAAgADbWFyawAUbWFyawAUbWttawAoAAAACAAAAAEAAgADAAQABQAGAAcAAAACAAgACQAKABYBEgMAAx4DdAuMDFwOLA7kDzgABAAAAAEACAABA2oADAACA/wANAACAAYCRQJMAAACZgJrAAgCrQKuAA4CvQLAABACxgLGABQCygLKABUAFg94AAAPeAAAD3gAAA9yAAAAWgBgAGYAAABsAHIPeAAAAHgAAAB+AAAAAACEAIoAAACQAJYAnAAAAKIAAA94AAAK4ArmAKgAAAmuCkQArgC0CsIOygC6AAAAAQBiAhIAAQEtABIAAQEiAhIAAQC5AhIAAQD0ACIAAQEd/6kAAQEr/6kAAQEtAnwAAQErAfwAAQEaAhIAAQE6AnwAAQEkAhIAAQF9AhIAAQEdAhIAAQE4AsYAAQFFAAAAAQBTAhIABAAAAAEACAABAm4ADAACAwAAkgABAEEBUwFWAVcBWAFZAVsBXAFdAWABYQFiAWMBZgFnAWoBawFsAW0BegF7AXwBfQF+AX8BggGGAYkBigGLAYwBkAGSAZMBlAGVAZgBmQGaAZsBnQGeAZ8BogGjAaQBpQGmAaoBrQGvAbABvQHAAcEBwgHDAcUByQHMAdIB0wHUAdUB1gHXAEEJaAAAAQwAAAEGAAABDAAAAQwAAAhgCGYHvghmCGAIZgloDXAJaA1wARIAAAEYAAAJaAAACWgNcAhUCFoJaA1wATYAAAE2AAAJbg1wCWgNcAloDXAJaA1wCWgNcAfWAAABHgEkCWgNcAEqAAABMAAACWgNcAluCXQJaA1wCWgNcAloDXABNgAACXoJgAFCAAABPAAAAUIAAAFCAAAJkgmYCJYJmAmSCZgOGAAADhgAAAlEAAAOGAAACUQAAA4eDXAJhgmMCbwAAAm8AAAJIAkaCLoAAAmqAAAIwAAACK4AAAFIAU4OHg1wDh4AAAiuAAAJaA1wCJwIog4YAAAOHg1wCbwAAAABAUYDjgABAUYCxgABASYCxgABASYDjgABATYCxgABATYAAAABARwCxgABAR0CxgABATACxgABAU8C2gABAU8CEgABAVACEgABATgAAAAEAAAAAQAIAAEImAAMAAEI2AASAAEAAQFrAAEJGAAEAAAAAQAIAAEJSgAMAAEJwAAuAAEADwFTAVsBXAFdAX0BfgGQAZUBnQGeAZ8BwAHBAdMB1AAPCpAKlgqWCpYKnAqcCpwKtAq6CroKugrACsAKnAquAAQAAAABAAgAAQAMACIAAgCeAOwAAgADAxADFQAAAxcDIQAGAyMDJAARAAIAFAACAAwAAAAPACIACwAlACsAHwAtAC0AJgAvAEMAJwBFAFMAPABXAGEASwBjAHIAVgB0AHgAZgB6AIMAawCFAKkAdQCrALMAmgC1AL8AowDBAPEArgD2AP8A3wEBARAA6QESARYA+QEYASEA/gEjAVABCAMBAwEBNgATAAALsAAAC7AAAAuqAAALkgAAC5gAAAueAAALqgAAC7AAAAuwAAALsAAAC7AAAAuqAAALpAABCwIAAQsCAAELCAABCw4AAAuqAAALsAE3BqwAAAamAAAGrAAABqwAAAasAAAGrAAABqYAAAasAAAGrAAABqwAAAasAAAFmAWeBN4FngWYBZ4FmAWeBZgFngTkBZ4FsATqBbAE6gTwBPYE8AT2BaQFqgUCBaoFpAWqBaQFqgWkBaoE/AWqBQIFqgWkBaoFpAWqBaQFqgayBrgGsga4BrIGuAayBrgGsgUIBQ4GuAayBrgGrAAABqwAAAasCrQGpgq0BqwKtAasCrQFaAq0BqYKtAasCrQGrAq0BqwKtAUaAAAFFAAABRoAAAUmBSAFJgUgBSYFLAXyBW4FMgVuBfIFbgXyBTgFPgVEBqwKtAamCrQGrAq0BqwKygasCrQGrAq0BqwKtAamCrQGrAq0BqwKtAamCrQGpgq0BqwKtAasCrQGrAq0BqwKtAVWBVAFSgVQBVYFUAVWBVwGsgq0BWIKtAayCrQGsgq0BrIKtAayCsoGrAq0BqwKtAasCrQGrAq0BqwKygasCrQGpgq0BqwKtAasCrQGrAq0BqYKtAamCrQGrAq0BqwKtAasCrQGrAq0BqwKtAamCrQGrAq0BqwKtAamCrQGrAq0BqYKtAasCrQGrAq0BqYKtAasCrQGrAq0BqYKtAasCrQFaAq0BfIFbgasCrQFgAV6BXQFegWABXoFgAWGBbAHBgWwBwYFsAcGBbAFjAWSBwYFsAcGBqwAAAWYBZ4FpAWqBaQFqgayBrgGrAq0BqwKtAasCrQGrAq0BqwKtAasCrQGrAq0BbAHBga+BsQFtgbEBr4GxAa+BsQGvgbEBr4GxAW2BsQGvgbEBr4GxAa+BsQGvgbEBbwFwgbKBtAFyAbQBsoG0AbKBtAGygbQBc4G0AtiCrQLYgq0C2IKtAbWBtwF2gbcBtYG3AbWBtwG1gbcBdQG3AXaBtwG1gbcBtYG3AbWBtwF4AXmBuIAAAbiAAAG4gAABuIAAAbiAAAF7AAABuIAAAbiAAAF8gAABfIAAAXyAAAF/gAABu4AAAX4AAAG7gAABu4AAAX+AAAF+AAABu4AAAX+AAAG7gAABgQAAAb0AAAGCgAABvQAAAYQBtwGEAbcBhAGFgasCrQGpgq0BqwKtAasCsoGHAYiBigGLgaOBpQGNAaUBo4GlAaOBjoGjgaUBo4GlAtiCrQGggq0C2IKtAtiCrQGggq0BoIKtAtiCrQLYgq0C2IKtAZMBkYGQAZGBkwGRgZMBlIGZAZeBlgGXgZkBl4GZAZeBmQGXgZkBmoG4gZwBuIGcAbiBnAG4gZwBuIGdgpMBvoGfAb6CkwG+gpMBvoKTAb6BnwG+gZ8BvoKTAb6CkwG+gpMBvoKTAb6C2IKtAaCCrQLYgq0C2IKtAaCCrQHAAAABpoAAAcAAAAHAAAABpoAAAcAAAALXAcGBogHBgtcBwYLcgcGBqwKtAaOBpQHAAcGBpoHBgcABwYHAAcGBwAHBgcABwYGmgcGBwAHBgcABwYHAAcGBwAHBgcMBxIGoAcSBwwHEgcMBxIHDAcSBwwHEgagBxIHDAcSBwwHEgcMBxIHDAcSBqwKtAamCrQGrAq0BqwKygayBrgGvgbEBsoG0AbWBtwG1gbcBuIAAAboAAAG7gAABu4AAAbuAAAG9AAAC2IKtApMBvoLYgq0BwAAAAtcBwYHAAcGBwwHEgcYBx4AAQEuA44AAQEtA3sAAQEzAAAAAQFUAsYAAQFaAAAAAQE9A3wAAQE+A48AAQEr/yIAAQEqA3sAAQHRA44AAQHRAsYAAQEcAAAAAQEVAsYAAQEc/yIAAQCPA44AAQFB/yIAAQCcAsYAAQFOAAAAAQEeA44AAQEwAAAAAQEeAsYAAQEw/yIAAQErA44AAQErA3sAAQFBAAAAAQEiA44AAQEiAAAAAQEiAsYAAQEi/yIAAQEt/yIAAQEsA3sAAQEuAsYAAQE7AAAAAQE+AscAAQE+AAAAAQEtAsYAAQEcAtoAAQGpAhAAAQGpAAAAAQE5AtoAAQE4AscAAQExAsUAAQEyAtgAAQEjAhIAAQEmAAIAAQEpAscAAQCPAsYAAQFKAtoAAQFJAscAAQGMAscAAQGNAtoAAQCFAsYAAQE1/yIAAQFAAsYAAQFAAAAAAQFGAhIAAQEvAAAAAQEyAtoAAQEy/yIAAQFTAtoAAQENAAAAAQFTAhIAAQEN/yIAAQEuAtoAAQEuAAAAAQEuAhIAAQEu/yIAAQFeAAAAAQFe/yIAAQElAtoAAQEsAtoAAQEtAtoAAQEyAhIAAQEyAAAAAQEvAtoAAQEgAtoAAQEsA44AAQEsAsYAAQErAsYAAQErAAAAAQEcAhIAAQEXAAAAAQE5AhIAAQE5AAAAAQEyAhAAAQE1AAAAAQEqAhIAAQB8AhIAAQFKAhIAAQGNAhIAAQElAAAAAQEvAhIAAQEtAAAAAQEgAhIAAQEVAAAAAQEsAosAAQEsAEIABAAAAAEACAABAAwAEgABAEwAWAABAAEDIgACAAkAPwBDAAAAYwBnAAUAhQCFAAoAsQCzAAsA3QDhAA4BAQEFABMBIwEjABgBOwE/ABkDAQMBAB4AAQAAAAYAAQEsAR0AHwBMAEwATABMAEAARgBGAEYARgBGAEwAXgBeAF4AXgBeAF4AXgBSAFgAWABYAFgAWABeAF4AXgBeAF4AZABqAAEBOQFjAAEBLAFcAAEBLAFjAAEBQAEJAAEBKgEJAAEBLAEJAAEBKwEJAAEBLAFnAAQAAAABAAgAAQAMABIAAQCCAIgAAQABAyEAAgASAAIADAAAABkAIgALADAAOAAVAGgAcgAeAJEAkQApAJMAlAAqAJYAlwAsAJkAmQAuAJ4AqQAvALUAvwA7AMwA1QBGAQYBEABQASUBOgBbAUABQABxAUIBQwByAUUBSAB0AUsBSwB4AU8BUAB5AAEAAAJCAHsA+AD4APgA+AD4APgA+AD4APgA+AD4AP4A/gD+AP4A/gD+AP4A/gD+AP4BBAEEAQQBBAEEAQQBBAEEAQQBCgEKAQoBCgEKAQoBCgEKAQoBCgEKAPgA/gD+AQQBBAEKARwBHAEcARwBHAEcARwBHAEcARwBHAEQASIBIgEiASIBIgEiASIBIgEiASIBFgEoASgBKAEoASgBKAEoASgBKAEoAS4BLgEuAS4BLgEuAS4BLgEuAS4BLgE0ATQBNAE0ATQBNAE0ATQBNAE0ATQBOgE6AToBOgE6AToBOgE6AToBOgE6ARwBIgEiASgBKAEoASgBLgE0AToAAQI0AAAAAQIWAAAAAQIIAAAAAQGKAAAAAQHfAAAAAQCiAfoAAQImAAAAAQG2ABgAAQIwAAAAAQH4AAAAAQIEAAAAAQIMAAAABAAAAAEACAABAAwAEgABAEAATAABAAEDFgACAAcAPwBDAAAAhQCFAAUAsQCzAAYA3QDhAAkBAQEFAA4BIwEjABMBOwE/ABQAAQAAAAYAAQDgAhIAGQA6ADoAOgA6ADQAOgBAAEAAQABSAFIAUgBSAEYATABMAEwATABMAFIAWABYAFgAWABeAAEBJQISAAEBGAISAAECCAISAAEBpAISAAEBWgJoAAEBkAISAAEBmgISAAEBmQISAAYAEAABAAoAAQABAAwAFgABABwAQAACAAEDHgMhAAAAAQABAx4ABAAAABIAAAASAAAAGAAAAB4AAQEsAAAAAQE9AAAAAQFiAAAAAQAEAAEBLP8iAAYAEAABAAoAAgABAAwAIgABACwAjgACAAMDEAMVAAADFwMdAAYDIwMkAA0AAgABAxIDFQAAAA8AAABcAAAAXAAAAFYAAAA+AAAARAAAAEoAAABWAAAAXAAAAFwAAABcAAAAXAAAAFYAAABQAAAAVgAAAFwAAQFUAhIAAQECAhIAAQEEAhIAAQEfAhIAAQEtAhIAAQEsAhIABAAKABAAFgAcAAEBLALHAAEBVALaAAEBAgLaAAEBBALaAAEAAAAKAeQDGAACREZMVAAObGF0bgASAD4AAAA6AAlBWkUgAGBDUlQgAIhLQVogALBNQUggANhNT0wgAQBOTEQgAShST00gAVBUQVQgAXhUUksgAaAAAP//ABAAAAABAAIAAwANAA4ADwAQABEAEgATABQAFQAWABcAGAAA//8AEQAAAAEAAgADAAQADQAOAA8AEAARABIAEwAUABUAFgAXABgAAP//ABEAAAABAAIAAwAFAA0ADgAPABAAEQASABMAFAAVABYAFwAYAAD//wARAAAAAQACAAMABgANAA4ADwAQABEAEgATABQAFQAWABcAGAAA//8AEQAAAAEAAgADAAsADQAOAA8AEAARABIAEwAUABUAFgAXABgAAP//ABEAAAABAAIAAwAKAA0ADgAPABAAEQASABMAFAAVABYAFwAYAAD//wARAAAAAQACAAMADAANAA4ADwAQABEAEgATABQAFQAWABcAGAAA//8AEQAAAAEAAgADAAkADQAOAA8AEAARABIAEwAUABUAFgAXABgAAP//ABEAAAABAAIAAwAHAA0ADgAPABAAEQASABMAFAAVABYAFwAYAAD//wARAAAAAQACAAMACAANAA4ADwAQABEAEgATABQAFQAWABcAGAAZYWFsdACYY2NtcACeZnJhYwCkbGlnYQCqbG9jbACybG9jbACybG9jbACybG9jbACybG9jbACybG9jbAC4bG9jbAC4bG9jbAC+bG9jbADEb3JkbgDKc2luZgDSc3MwMQDYc3MwMgDic3MwMwDsc3MwNAD2c3MwNgEAc3MwNwEKc3MwOAEUc3MwOQEec3VicwEoc3VwcwEuAAAAAQAAAAAAAQABAAAAAQAJAAAAAgAMAA0AAAABAAIAAAABAAMAAAABAAQAAAABAAUAAAACAAoACwAAAAEABwAGAAEADgAAAQAABgABAA8AAAEBAAYAAQAQAAABAgAGAAEAEQAAAQMABgABABIAAAEEAAYAAQATAAABBQAGAAEAFAAAAQYABgABABUAAAEHAAAAAQAGAAAAAQAIABkANAOSA9gD7AQOBDQEagRqBHgEhgUaBWIFhAWuCK4IvAjUCOwJBAkuCUYKBAoYCjAKSgADAAAAAQAIAAECjABjAMwA0ADUANgA3ADgAOQA6ADsAPAA9gD6AP4BAgEGAQoBxgEOARIBFgEaAR4BIgEmASoBLgEyATYBOgE+AUYBTAFSAVgBXgFmAWwBcgF4AX4BhAGIAYwBkAGUAZoBngGiAaYBrAGwAbQBuAG+AcIBxgHKAc4B0gHWAdoB3gHiAeYB6gHuAfYB/AICAggCDgIUAhoCIAImAiwCMAI0AjgCPAJAAkQCSAJMAlACVAJYAlwCYAJkAmgCbAJwAnQCeAJ8AoAChAKIAAEBUQABAJEAAQCSAAEAkwABAJQAAQCLAAEAjAABAI0AAQCOAAIAjwCVAAEAkAABAJYAAQCXAAEAOgABAIUAAQCGAAEAmAABAIcAAQCIAAEAiQABAIoAAQBhAAEAZwABAJkAAQCaAAEAmwABAJwAAQCdAAMBUQElATAAAgEmATEAAgEnATIAAgEoATMAAgEpATQAAwEqATUBQAACASsBNgACASwBNwACAS0BOAACAS4BOQACAS8BOgABAUEAAQFCAAEBQwABAUQAAgDRAUUAAQFGAAEBRwABAUgAAgDYAUkAAQE7AAEBPAABAT0AAgEjAT4AAQE/AAEBJAABAVIAAQFKAAEA/wABAQUAAQFLAAEBTAABAU0AAQFOAAEBTwABAVAAAwIHAhEB+wACAggCEgACAgkCEwACAgoCFAACAgsCFQACAgwCFgACAg0CFwACAg4CGAACAg8CGQACAhACGgABAkQAAQJFAAECRgABAkcAAQJIAAECSQABAkoAAQJLAAECTAABAvUAAQL2AAEC9wABAvgAAQL5AAEC+gABAvsAAQL8AAEC/QABAv4AAQMjAAEDJAABAx8AAQMyAAEDMwABAGMAAgAHABQAHQAeACUAJgAoACkAKgArADMANAA5AEIASABLAE4AWABZAFoAWwBfAGYAbAB3AH0AgwCPAJ4AnwCgAKEAogCjAKQApQCmAKcAqACwALkAugDGAMwA0ADRANQA1gDdAN4A3wDgAOEA5gDpAOwA/QEEAQoBFQEbASEBKgE1Ad0B3gHfAeAB4QHiAeMB5AHlAeYCNAI2AjcCOAI5AjoCOwI8Aj0C4ALhAuIC4wLkAuUC5gLnAugC6QMRAxIDHgMlAyYABgAQAAIADAAeAAAAAwAAAAEASAABACoAAQAAABYAAwAAAAEAEgABABgAAQAAABYAAQABANYAAgACAxEDFQAAAxcDHQAFAAEAAAABAAgAAQAGAAUAAQABAMwAAQAAAAEACAACAA4ABABhAGcA/wEFAAEABABfAGYA/QEEAAEAAAABAAgAAgAQAAUAhQCGASMBJAMfAAEABQBCAEgA4ADmAx4ABgAAAAEACAABBgYAAgAKABwAAQAEAAEAMQABAAAAAQAAABcAAQAEAAEAzgABAAAAAQAAABcAAQAAAAEACAABAN4AKgABAAAAAQAIAAEA0AA0AAQAAAABAAgAAQB+AAUAEABEAFAAZgByAAUADAAUABwAJAAsAf0AAwJCAd8B/gADAkIB4AIAAAMCQgHhAgIAAwJCAeICAwADAkIB5QABAAQB/wADAkIB4AACAAYADgIBAAMCQgHhAgQAAwJCAeUAAQAEAgUAAwJCAeUAAQAEAgYAAwJCAeUAAQAFAd4B3wHgAeIB5AAGAAAAAgAKACQAAwABACwAAQASAAAAAQAAABgAAQACAAIAngADAAEAEgABABwAAAABAAAAGAACAAEB3QHmAAAAAQACAEsA6QAEAAAAAQAIAAEAFAABAAgAAQAEArUAAwDpAjQAAQABAEUABAAAAAEACAABABwAAQAIAAIABgAOAh0AAwJNAk0CHAACAk0AAQABAk0ABAAAAAEACAABAtgADgAiAEAASgBmAHoAmACsAPAA+gE+AYIBvAKaAs4AAwAIABAAGAImAAMCNAI0AicAAwI0AssCKAACAssAAQAEAikAAgLLAAMACAAQABYCLAADAssCywIqAAICOwIrAAICywACAAYADgIuAAMCOwI7Ai0AAgI7AAMACAAQABgCLwADAkECQQIxAAMCUAJSAjAAAgJQAAIABgAOAjMAAwLLAssCMgACAssABwAQABoAIgAqADIAOAA+Ah4ABAJNAk0CzQIfAAMCTQLNAiEAAwLNAs0CIwADAs4CzgIgAAICzQIiAAICzgIkAAIC0wABAAQCJQACArEABwAQABoAIgAqADIAOAA+AnYABAKxArECzQJ0AAMCTQLNAncAAwKxAssCeAADArECzQJ1AAICVQJ5AAICywJ6AAICzQAHABAAGAAgACgAMAA4AD4CgQADAkICywJ8AAMCywLLAn0AAwLLAs0CfwADAs0CzQKAAAMCzgLOAnsAAgLLAn4AAgLNAAYADgAWAB4AJgAuADQCgwADAk0CzQKFAAMCywLNAoYAAwLNAk0ChwADAs0CywKCAAICTQKEAAICywAWAC4AOgBEAE4AWABgAGgAcAB4AIAAiACQAJgAoACoALAAuADAAMYAzADSANgCjQAFAjkCTQJNAk0CjAAEAjkCTQJNApAABAKxArECsQKUAAQCywLLAs0CnQADAkICzQKJAAMCTQJNAooAAwJNAs0CiwADAk0CzgKPAAMCsQKxApEAAwKxAs0CkwADAssCywKVAAMCywLNApYAAwLLAs4CmAADAs4CTQKZAAMCzgLLApsAAwLTAs0CnAADAtMC0wKIAAICTQKOAAICsQKSAAICywKXAAICzQKaAAIC0wAGAA4AFgAcACIAKAAuAqMAAwLTAs0CngACAk0CnwACAqYCoAACAssCoQACAs0CogACAtMAAQAEAqQAAgLeAAEADgI0AjYCOQI7AkECQgJNAlQCsQLLAs0CzgLTAt4AAQAAAAEACAABABQAhwABAAAAAQAIAAEABgCSAAIAAQCeAKgAAAABAAAAAQAIAAEABgBeAAIAAQDdAOEAAAABAAAAAQAIAAEABgAvAAIAAQBYAFsAAAABAAAAAQAIAAIAEgAGAIsAjACNAI4AjwCQAAEABgAlACYAKAApACoAKwABAAAAAQAIAAEABgAVAAIAAQLgAukAAAABAAAAAQAIAAIAXAArAJEAkgCTAJQAlQCWAJcAmACZAJoAmwCcAJ0BQAFBAUIBQwFEAUUBRgFHAUgBSQFKAUsBTAFNAU4BTwFQAkQCRQJGAkcCSAJJAkoCSwJMAyMDJAMyAzMAAQArAAcAFAAdAB4AKgAzADQATgBsAHcAfQCDAI8AowCwALkAugDGAMwA0ADRANQA1gDsAQoBFQEbASEBKgE1AjQCNgI3AjgCOQI6AjsCPAI9AxEDEgMlAyYAAQAAAAEACAABAAYAHgABAAEB3QABABAAAQAKAAAAAQAGAAEAAQACAMwA1gABAAAAAQAIAAIACgACADoA2AABAAIAOQDWAAEAAAABAAgAAgAOAAQBUQFSAVEBUgABAAQAAgBLAJ4A6Q=="}
\ No newline at end of file
diff --git a/apps/www/app/(app)/og/route.tsx b/apps/www/app/(app)/og/route.tsx
new file mode 100644
index 00000000000..1710b3212c7
--- /dev/null
+++ b/apps/www/app/(app)/og/route.tsx
@@ -0,0 +1,117 @@
+import { ImageResponse } from "next/og"
+
+async function loadAssets(): Promise<
+  { name: string; data: Buffer; weight: 400 | 600; style: "normal" }[]
+> {
+  const [
+    { base64Font: normal },
+    { base64Font: mono },
+    { base64Font: semibold },
+  ] = await Promise.all([
+    import("./geist-regular-otf.json").then((mod) => mod.default || mod),
+    import("./geistmono-regular-otf.json").then((mod) => mod.default || mod),
+    import("./geist-semibold-otf.json").then((mod) => mod.default || mod),
+  ])
+
+  return [
+    {
+      name: "Geist",
+      data: Buffer.from(normal, "base64"),
+      weight: 400 as const,
+      style: "normal" as const,
+    },
+    {
+      name: "Geist Mono",
+      data: Buffer.from(mono, "base64"),
+      weight: 400 as const,
+      style: "normal" as const,
+    },
+    {
+      name: "Geist",
+      data: Buffer.from(semibold, "base64"),
+      weight: 600 as const,
+      style: "normal" as const,
+    },
+  ]
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const title = searchParams.get("title")
+  const description = searchParams.get("description")
+
+  const [fonts] = await Promise.all([loadAssets()])
+
+  return new ImageResponse(
+    (
+      <div
+        tw="flex h-full w-full bg-black text-white"
+        style={{ fontFamily: "Geist Sans" }}
+      >
+        <div tw="flex border absolute border-stone-700 border-dashed inset-y-0 left-16 w-[1px]" />
+        <div tw="flex border absolute border-stone-700 border-dashed inset-y-0 right-16 w-[1px]" />
+        <div tw="flex border absolute border-stone-700 inset-x-0 h-[1px] top-16" />
+        <div tw="flex border absolute border-stone-700 inset-x-0 h-[1px] bottom-16" />
+        <div tw="flex absolute flex-row bottom-24 right-24 text-white">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 256 256"
+            width={48}
+            height={48}
+          >
+            <rect width="256" height="256" fill="none"></rect>
+            <line
+              x1="208"
+              y1="128"
+              x2="128"
+              y2="208"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="32"
+            ></line>
+            <line
+              x1="192"
+              y1="40"
+              x2="40"
+              y2="192"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="32"
+            ></line>
+          </svg>
+        </div>
+        <div tw="flex flex-col absolute w-[896px] justify-center inset-32">
+          <div
+            tw="tracking-tight flex-grow-1 flex flex-col justify-center leading-[1.1]"
+            style={{
+              textWrap: "balance",
+              fontWeight: 600,
+              fontSize: title && title.length > 20 ? 64 : 80,
+              letterSpacing: "-0.04em",
+            }}
+          >
+            {title}
+          </div>
+          <div
+            tw="text-[40px] leading-[1.5] flex-grow-1 text-stone-400"
+            style={{
+              fontWeight: 500,
+              textWrap: "balance",
+            }}
+          >
+            {description}
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 628,
+      fonts,
+    }
+  )
+}
diff --git a/apps/www/app/(app)/page.tsx b/apps/www/app/(app)/page.tsx
index 812a4fb29df..278d0a11b7a 100644
--- a/apps/www/app/(app)/page.tsx
+++ b/apps/www/app/(app)/page.tsx
@@ -1,8 +1,9 @@
+import { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 
-import { siteConfig } from "@/config/site"
 import { Announcement } from "@/components/announcement"
+import { CardsDemo } from "@/components/cards"
 import { ExamplesNav } from "@/components/examples-nav"
 import {
   PageActions,
@@ -11,55 +12,88 @@ import {
   PageHeaderHeading,
 } from "@/components/page-header"
 import { Button } from "@/registry/new-york/ui/button"
-import MailPage from "@/app/(app)/examples/mail/page"
+
+const title = "Build your component library"
+const description =
+  "A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code."
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+}
 
 export default function IndexPage() {
   return (
-    <div className="container relative">
+    <>
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading>Build your component library</PageHeaderHeading>
-        <PageHeaderDescription>
-          Beautifully designed components that you can copy and paste into your
-          apps.
-        </PageHeaderDescription>
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
-          <Button asChild size="sm">
-            <Link href="/docs">Get Started</Link>
+          <Button asChild size="sm" className="rounded-md">
+            <Link href="/docs/installation">Get Started</Link>
           </Button>
-          <Button asChild size="sm" variant="ghost">
-            <Link
-              target="_blank"
-              rel="noreferrer"
-              href={siteConfig.links.github}
-            >
-              GitHub
-            </Link>
+          <Button asChild size="sm" variant="ghost" className="rounded-md">
+            <Link href="/blocks">Browse Blocks</Link>
           </Button>
         </PageActions>
       </PageHeader>
-      <ExamplesNav className="[&>a:first-child]:text-primary" />
-      <section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
-        <Image
-          src="/examples/mail-dark.png"
-          width={1280}
-          height={727}
-          alt="Mail"
-          className="hidden dark:block"
-        />
-        <Image
-          src="/examples/mail-light.png"
-          width={1280}
-          height={727}
-          alt="Mail"
-          className="block dark:hidden"
-        />
-      </section>
-      <section className="hidden md:block">
-        <div className="overflow-hidden rounded-lg border bg-background shadow">
-          <MailPage />
+      <div className="border-grid border-b">
+        <div className="container-wrapper">
+          <div className="container py-4">
+            <ExamplesNav className="[&>a:first-child]:text-primary" />
+          </div>
+        </div>
+      </div>
+      <div className="container-wrapper">
+        <div className="container py-6">
+          <section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
+            <Image
+              src="/examples/cards-light.png"
+              width={1280}
+              height={1214}
+              alt="Cards"
+              className="block dark:hidden"
+            />
+            <Image
+              src="/examples/cards-dark.png"
+              width={1280}
+              height={1214}
+              alt="Cards"
+              className="hidden dark:block"
+            />
+          </section>
+          <section
+            className="hidden md:block [&>div]:p-0"
+            style={
+              {
+                "--radius": "0.75rem",
+              } as React.CSSProperties
+            }
+          >
+            <CardsDemo />
+          </section>
         </div>
-      </section>
-    </div>
+      </div>
+    </>
   )
 }
diff --git a/apps/www/app/(app)/sink/layout.tsx b/apps/www/app/(app)/sink/layout.tsx
deleted file mode 100644
index 70da365c39f..00000000000
--- a/apps/www/app/(app)/sink/layout.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import Link from "next/link"
-
-import { ThemeWrapper } from "@/components/theme-wrapper"
-import { styles } from "@/registry/registry-styles"
-
-interface SinkLayoutProps {
-  children: React.ReactNode
-}
-
-export default function SinkLayout({ children }: SinkLayoutProps) {
-  return (
-    <div className="flex flex-col">
-      <div className="container">
-        <div className="flex space-x-2 px-2 py-4">
-          {styles.map((style) => (
-            <Link href={`/sink/${style.name}`} key={style.name}>
-              {style.label}
-            </Link>
-          ))}
-        </div>
-      </div>
-      <div className="flex-1">
-        <ThemeWrapper>{children}</ThemeWrapper>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/app/(app)/sink/new-york/page.tsx b/apps/www/app/(app)/sink/new-york/page.tsx
deleted file mode 100644
index f7897d193d3..00000000000
--- a/apps/www/app/(app)/sink/new-york/page.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import * as React from "react"
-import Link from "next/link"
-
-import { cn } from "@/lib/utils"
-import AccordionDemo from "@/registry/new-york/example/accordion-demo"
-import AlertDialogDemo from "@/registry/new-york/example/alert-dialog-demo"
-import AspectRatioDemo from "@/registry/new-york/example/aspect-ratio-demo"
-import AvatarDemo from "@/registry/new-york/example/avatar-demo"
-import BadgeDemo from "@/registry/new-york/example/badge-demo"
-import BadgeDestructive from "@/registry/new-york/example/badge-destructive"
-import BadgeOutline from "@/registry/new-york/example/badge-outline"
-import BadgeSecondary from "@/registry/new-york/example/badge-secondary"
-import ButtonDemo from "@/registry/new-york/example/button-demo"
-import ButtonDestructive from "@/registry/new-york/example/button-destructive"
-import ButtonGhost from "@/registry/new-york/example/button-ghost"
-import ButtonLink from "@/registry/new-york/example/button-link"
-import ButtonLoading from "@/registry/new-york/example/button-loading"
-import ButtonOutline from "@/registry/new-york/example/button-outline"
-import ButtonSecondary from "@/registry/new-york/example/button-secondary"
-import ButtonWithIcon from "@/registry/new-york/example/button-with-icon"
-import CardDemo from "@/registry/new-york/example/card-demo"
-import CheckboxDemo from "@/registry/new-york/example/checkbox-demo"
-import CollapsibleDemo from "@/registry/new-york/example/collapsible-demo"
-import CommandDemo from "@/registry/new-york/example/command-demo"
-import ContextMenuDemo from "@/registry/new-york/example/context-menu-demo"
-import DatePickerDemo from "@/registry/new-york/example/date-picker-demo"
-import DialogDemo from "@/registry/new-york/example/dialog-demo"
-import DropdownMenuDemo from "@/registry/new-york/example/dropdown-menu-demo"
-import HoverCardDemo from "@/registry/new-york/example/hover-card-demo"
-import MenubarDemo from "@/registry/new-york/example/menubar-demo"
-import NavigationMenuDemo from "@/registry/new-york/example/navigation-menu-demo"
-import PopoverDemo from "@/registry/new-york/example/popover-demo"
-import ProgressDemo from "@/registry/new-york/example/progress-demo"
-import RadioGroupDemo from "@/registry/new-york/example/radio-group-demo"
-import ScrollAreaDemo from "@/registry/new-york/example/scroll-area-demo"
-import SelectDemo from "@/registry/new-york/example/select-demo"
-import SeparatorDemo from "@/registry/new-york/example/separator-demo"
-import SheetDemo from "@/registry/new-york/example/sheet-demo"
-import SkeletonDemo from "@/registry/new-york/example/skeleton-demo"
-import SliderDemo from "@/registry/new-york/example/slider-demo"
-import SwitchDemo from "@/registry/new-york/example/switch-demo"
-import TabsDemo from "@/registry/new-york/example/tabs-demo"
-import ToastDemo from "@/registry/new-york/example/toast-demo"
-import ToggleDemo from "@/registry/new-york/example/toggle-demo"
-import ToggleDisabled from "@/registry/new-york/example/toggle-disabled"
-import ToggleOutline from "@/registry/new-york/example/toggle-outline"
-import ToggleWithText from "@/registry/new-york/example/toggle-with-text"
-import TooltipDemo from "@/registry/new-york/example/tooltip-demo"
-import { Button } from "@/registry/new-york/ui/button"
-
-export default function KitchenSinkPage() {
-  return (
-    <div className="container">
-      <div className="grid gap-4">
-        <div className="grid grid-cols-3 items-start gap-4">
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <CardDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SliderDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper
-              className="spa flex-col items-start space-x-0
-				space-y-2"
-            >
-              <p className="text-sm text-muted-foreground">Documentation</p>
-              <p className="text-sm font-medium leading-none">
-                You can customize the theme using{" "}
-                <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground">
-                  CSS variables
-                </code>
-                .{" "}
-                <Link
-                  href="#"
-                  className="font-medium text-primary underline underline-offset-4"
-                >
-                  Click here
-                </Link>{" "}
-                to learn more.
-              </p>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CheckboxDemo />
-              <HoverCardDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <TabsDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <MenubarDemo />
-              <AvatarDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="flex-col items-start space-x-0 space-y-2">
-              <div className="flex space-x-2">
-                <ButtonDemo />
-                <ButtonSecondary />
-                <ButtonDestructive />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonOutline />
-                <ButtonLink />
-                <ButtonGhost />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonWithIcon />
-                <ButtonLoading />
-              </div>
-              <div className="flex space-x-2">
-                <Button size="lg">Large</Button>
-                <Button size="sm">Small</Button>
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <DatePickerDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AccordionDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&_ul>li:last-child]:hidden">
-              <NavigationMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="justify-between">
-              <SwitchDemo />
-              <SelectDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SeparatorDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AspectRatioDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <PopoverDemo />
-              <ToastDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <TooltipDemo />
-              <SheetDemo />
-              <ProgressDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CommandDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>span]:h-[80px] [&>span]:w-[200px]">
-              <RadioGroupDemo />
-              <ContextMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <DropdownMenuDemo />
-                <AlertDialogDemo />
-                <DialogDemo />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <BadgeDemo />
-                <BadgeSecondary />
-                <BadgeDestructive />
-                <BadgeOutline />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SkeletonDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <CollapsibleDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <ToggleDemo />
-                <ToggleOutline />
-                <ToggleDisabled />
-                <ToggleWithText />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <ScrollAreaDemo />
-            </ComponentWrapper>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ComponentWrapper({
-  className,
-  children,
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-between space-x-4 rounded-md p-4",
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/apps/www/app/(app)/sink/page.tsx b/apps/www/app/(app)/sink/page.tsx
deleted file mode 100644
index 9533913922a..00000000000
--- a/apps/www/app/(app)/sink/page.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import * as React from "react"
-import Link from "next/link"
-
-import { cn } from "@/lib/utils"
-import AccordionDemo from "@/registry/default/example/accordion-demo"
-import AlertDialogDemo from "@/registry/default/example/alert-dialog-demo"
-import AspectRatioDemo from "@/registry/default/example/aspect-ratio-demo"
-import AvatarDemo from "@/registry/default/example/avatar-demo"
-import BadgeDemo from "@/registry/default/example/badge-demo"
-import BadgeDestructive from "@/registry/default/example/badge-destructive"
-import BadgeOutline from "@/registry/default/example/badge-outline"
-import BadgeSecondary from "@/registry/default/example/badge-secondary"
-import ButtonDemo from "@/registry/default/example/button-demo"
-import ButtonDestructive from "@/registry/default/example/button-destructive"
-import ButtonGhost from "@/registry/default/example/button-ghost"
-import ButtonLink from "@/registry/default/example/button-link"
-import ButtonLoading from "@/registry/default/example/button-loading"
-import ButtonOutline from "@/registry/default/example/button-outline"
-import ButtonSecondary from "@/registry/default/example/button-secondary"
-import ButtonWithIcon from "@/registry/default/example/button-with-icon"
-import CardDemo from "@/registry/default/example/card-demo"
-import CheckboxDemo from "@/registry/default/example/checkbox-demo"
-import CollapsibleDemo from "@/registry/default/example/collapsible-demo"
-import CommandDemo from "@/registry/default/example/command-demo"
-import ContextMenuDemo from "@/registry/default/example/context-menu-demo"
-import DatePickerDemo from "@/registry/default/example/date-picker-demo"
-import DialogDemo from "@/registry/default/example/dialog-demo"
-import DropdownMenuDemo from "@/registry/default/example/dropdown-menu-demo"
-import HoverCardDemo from "@/registry/default/example/hover-card-demo"
-import MenubarDemo from "@/registry/default/example/menubar-demo"
-import NavigationMenuDemo from "@/registry/default/example/navigation-menu-demo"
-import PopoverDemo from "@/registry/default/example/popover-demo"
-import ProgressDemo from "@/registry/default/example/progress-demo"
-import RadioGroupDemo from "@/registry/default/example/radio-group-demo"
-import ScrollAreaDemo from "@/registry/default/example/scroll-area-demo"
-import SelectDemo from "@/registry/default/example/select-demo"
-import SeparatorDemo from "@/registry/default/example/separator-demo"
-import SheetDemo from "@/registry/default/example/sheet-demo"
-import SkeletonDemo from "@/registry/default/example/skeleton-demo"
-import SliderDemo from "@/registry/default/example/slider-demo"
-import SwitchDemo from "@/registry/default/example/switch-demo"
-import TabsDemo from "@/registry/default/example/tabs-demo"
-import ToastDemo from "@/registry/default/example/toast-demo"
-import ToggleDemo from "@/registry/default/example/toggle-demo"
-import ToggleDisabled from "@/registry/default/example/toggle-disabled"
-import ToggleGroupDemo from "@/registry/default/example/toggle-group-demo"
-import ToggleOutline from "@/registry/default/example/toggle-outline"
-import ToggleWithText from "@/registry/default/example/toggle-with-text"
-import TooltipDemo from "@/registry/default/example/tooltip-demo"
-import { Button } from "@/registry/default/ui/button"
-
-export default function KitchenSinkPage() {
-  return (
-    <div className="container">
-      <div className="grid gap-4">
-        <div className="grid grid-cols-3 items-start gap-4">
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <CardDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SliderDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper
-              className="spa flex-col items-start space-x-0
-				space-y-2"
-            >
-              <p className="text-sm text-muted-foreground">Documentation</p>
-              <p className="text-sm font-medium leading-none">
-                You can customize the theme using{" "}
-                <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground">
-                  CSS variables
-                </code>
-                .{" "}
-                <Link
-                  href="#"
-                  className="font-medium text-primary underline underline-offset-4"
-                >
-                  Click here
-                </Link>{" "}
-                to learn more.
-              </p>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CheckboxDemo />
-              <HoverCardDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <TabsDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <MenubarDemo />
-              <AvatarDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="flex-col items-start space-x-0 space-y-2">
-              <div className="flex space-x-2">
-                <ButtonDemo />
-                <ButtonSecondary />
-                <ButtonDestructive />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonOutline />
-                <ButtonLink />
-                <ButtonGhost />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonWithIcon />
-                <ButtonLoading />
-              </div>
-              <div className="flex space-x-2">
-                <Button size="lg">Large</Button>
-                <Button size="sm">Small</Button>
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <DatePickerDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AccordionDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&_ul>li:last-child]:hidden">
-              <NavigationMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="justify-between">
-              <SwitchDemo />
-              <SelectDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <ToggleGroupDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SeparatorDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AspectRatioDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <PopoverDemo />
-              <ToastDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <TooltipDemo />
-              <SheetDemo />
-              <ProgressDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CommandDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>span]:h-[80px] [&>span]:w-[200px]">
-              <RadioGroupDemo />
-              <ContextMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <DropdownMenuDemo />
-                <AlertDialogDemo />
-                <DialogDemo />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <BadgeDemo />
-                <BadgeSecondary />
-                <BadgeDestructive />
-                <BadgeOutline />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SkeletonDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <CollapsibleDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <ToggleDemo />
-                <ToggleOutline />
-                <ToggleDisabled />
-                <ToggleWithText />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <ScrollAreaDemo />
-            </ComponentWrapper>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ComponentWrapper({
-  className,
-  children,
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-between space-x-4 rounded-md p-4",
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/apps/www/app/(app)/themes/layout.tsx b/apps/www/app/(app)/themes/layout.tsx
new file mode 100644
index 00000000000..e2763d33856
--- /dev/null
+++ b/apps/www/app/(app)/themes/layout.tsx
@@ -0,0 +1,72 @@
+import { Metadata } from "next"
+
+import { Announcement } from "@/components/announcement"
+import {
+  PageActions,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+import { Customizer } from "@/components/theme-customizer"
+import { Button } from "@/registry/new-york/ui/button"
+
+const title = "Add colors. Make it yours."
+const description =
+  "Hand-picked themes that you can copy and paste into your apps."
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+}
+
+export default function ThemesLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
+        <div className="mt-2 rounded-full bg-blue-600 px-3 py-1 text-xs text-white">
+          New Theme Editor coming soon
+        </div>
+      </PageHeader>
+      <div id="themes" className="border-grid scroll-mt-24 border-b">
+        <div className="container-wrapper">
+          <div className="container flex items-center py-4">
+            <Customizer />
+          </div>
+        </div>
+      </div>
+      <div className="container-wrapper">
+        <div className="container py-6">
+          <section id="themes" className="scroll-mt-20">
+            {children}
+          </section>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/www/app/(app)/themes/page.tsx b/apps/www/app/(app)/themes/page.tsx
index 39d3436da29..ff5bd3944e1 100644
--- a/apps/www/app/(app)/themes/page.tsx
+++ b/apps/www/app/(app)/themes/page.tsx
@@ -1,46 +1,12 @@
-import { Metadata } from "next"
-
-import "public/registry/themes.css"
-import { Announcement } from "@/components/announcement"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { ThemeCustomizer } from "@/components/theme-customizer"
+import { CardsDemo } from "@/components/cards"
 import { ThemeWrapper } from "@/components/theme-wrapper"
-import { ThemesTabs } from "@/app/(app)/themes/tabs"
 
-export const metadata: Metadata = {
-  title: "Themes",
-  description: "Hand-picked themes that you can copy and paste into your apps.",
-}
+import "public/registry/themes.css"
 
 export default function ThemesPage() {
   return (
-    <div className="container">
-      <ThemeWrapper
-        defaultTheme="zinc"
-        className="relative flex w-full flex-col items-start md:flex-row"
-      >
-        <PageHeader className="w-full">
-          <Announcement />
-          <PageHeaderHeading className="hidden md:block">
-            Add colors. Make it yours.
-          </PageHeaderHeading>
-          <PageHeaderHeading className="md:hidden">
-            Make it yours
-          </PageHeaderHeading>
-          <PageHeaderDescription>
-            Hand-picked themes that you can copy and paste into your apps.
-          </PageHeaderDescription>
-          <PageActions>
-            <ThemeCustomizer />
-          </PageActions>
-        </PageHeader>
-      </ThemeWrapper>
-      <ThemesTabs />
-    </div>
+    <ThemeWrapper>
+      <CardsDemo />
+    </ThemeWrapper>
   )
 }
diff --git a/apps/www/app/(app)/themes/tabs.tsx b/apps/www/app/(app)/themes/tabs.tsx
deleted file mode 100644
index 3a6fbd684ae..00000000000
--- a/apps/www/app/(app)/themes/tabs.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { useConfig } from "@/hooks/use-config"
-import { ThemeWrapper } from "@/components/theme-wrapper"
-import CardsDefault from "@/registry/default/example/cards"
-import { Skeleton } from "@/registry/default/ui/skeleton"
-import CardsNewYork from "@/registry/new-york/example/cards"
-
-export function ThemesTabs() {
-  const [mounted, setMounted] = React.useState(false)
-  const [config] = useConfig()
-
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return (
-    <div className="space-y-8">
-      {!mounted ? (
-        <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:gap-6">
-          <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-6">
-            <Skeleton className="h-[218px] w-full" />
-            <div className="grid gap-1 sm:grid-cols-[260px_1fr] md:hidden">
-              <Skeleton className="h-[218px] w-full" />
-              <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-                <Skeleton className="h-[218px] w-full" />
-              </div>
-              <div className="pt-3 sm:col-span-2 xl:pt-4">
-                <Skeleton className="h-[218px] w-full" />
-              </div>
-            </div>
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-              <div className="space-y-4 xl:space-y-6">
-                <Skeleton className="h-[218px] w-full" />
-                <Skeleton className="h-[218px] w-full" />
-                <Skeleton className="h-[218px] w-full" />
-              </div>
-              <div className="space-y-4 xl:space-y-6">
-                <Skeleton className="h-[218px] w-full" />
-                <Skeleton className="h-[218px] w-full" />
-                <div className="hidden xl:block">
-                  <Skeleton className="h-[218px] w-full" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="space-y-4 lg:col-span-6 xl:col-span-4 xl:space-y-6">
-            <div className="hidden gap-1 sm:grid-cols-[260px_1fr] md:grid">
-              <Skeleton className="h-[218px] w-full" />
-              <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-                <Skeleton className="h-[218px] w-full" />
-              </div>
-              <div className="pt-3 sm:col-span-2 xl:pt-4">
-                <Skeleton className="h-[218px] w-full" />
-              </div>
-            </div>
-            <div className="hidden md:block">
-              <Skeleton className="h-[218px] w-full" />
-            </div>
-            <Skeleton className="h-[218px] w-full" />
-          </div>
-        </div>
-      ) : (
-        <ThemeWrapper>
-          {config.style === "new-york" && <CardsNewYork />}
-          {config.style === "default" && <CardsDefault />}
-        </ThemeWrapper>
-      )}
-    </div>
-  )
-}
diff --git a/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx b/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx
deleted file mode 100644
index d82d3ea6930..00000000000
--- a/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { Metadata } from "next"
-import { notFound } from "next/navigation"
-
-import { siteConfig } from "@/config/site"
-import { getAllBlockIds, getBlock } from "@/lib/blocks"
-import { absoluteUrl, cn } from "@/lib/utils"
-import { BlockChunk } from "@/components/block-chunk"
-import { BlockWrapper } from "@/components/block-wrapper"
-import { ThemesStyle } from "@/components/themes-styles"
-import { Style, styles } from "@/registry/registry-styles"
-
-import "@/styles/mdx.css"
-
-export async function generateMetadata({
-  params,
-}: {
-  params: {
-    style: Style["name"]
-    name: string
-  }
-}): Promise<Metadata> {
-  const { name, style } = params
-  const block = await getBlock(name, style)
-
-  if (!block) {
-    return {}
-  }
-
-  return {
-    title: block.name,
-    description: block.description,
-    openGraph: {
-      title: block.name,
-      description: block.description,
-      type: "article",
-      url: absoluteUrl(`/blocks/${block.name}`),
-      images: [
-        {
-          url: siteConfig.ogImage,
-          width: 1200,
-          height: 630,
-          alt: siteConfig.name,
-        },
-      ],
-    },
-    twitter: {
-      card: "summary_large_image",
-      title: block.name,
-      description: block.description,
-      images: [siteConfig.ogImage],
-      creator: "@shadcn",
-    },
-  }
-}
-
-export async function generateStaticParams() {
-  const blockIds = await getAllBlockIds()
-  return styles
-    .map((style) =>
-      blockIds.map((name) => ({
-        style: style.name,
-        name,
-      }))
-    )
-    .flat()
-}
-
-export default async function BlockPage({
-  params,
-}: {
-  params: {
-    style: Style["name"]
-    name: string
-  }
-}) {
-  const { name, style } = params
-  const block = await getBlock(name, style)
-
-  if (!block) {
-    return notFound()
-  }
-
-  const Component = block.component
-
-  const chunks = block.chunks?.map((chunk) => ({ ...chunk }))
-  delete block.component
-  block.chunks?.map((chunk) => delete chunk.component)
-
-  return (
-    <>
-      {/* <ThemesStyle /> */}
-      <div
-        className={cn(
-          "themes-wrapper bg-background",
-          block.container?.className
-        )}
-      >
-        <BlockWrapper block={block}>
-          <Component />
-          {chunks?.map((chunk, index) => (
-            <BlockChunk
-              key={chunk.name}
-              block={block}
-              chunk={block.chunks?.[index]}
-            >
-              <chunk.component />
-            </BlockChunk>
-          ))}
-        </BlockWrapper>
-      </div>
-    </>
-  )
-}
diff --git a/apps/www/app/(internal)/icons/layout.tsx b/apps/www/app/(internal)/icons/layout.tsx
new file mode 100644
index 00000000000..e8fc4e32866
--- /dev/null
+++ b/apps/www/app/(internal)/icons/layout.tsx
@@ -0,0 +1,34 @@
+import { Metadata } from "next"
+
+import { Announcement } from "@/components/announcement"
+import {
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+
+export const metadata: Metadata = {
+  title: "Icons",
+  description: "All icons in all libraries.",
+}
+
+export default function IconsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="container relative">
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading>Icons</PageHeaderHeading>
+        <PageHeaderDescription>
+          All icons in all libraries.
+        </PageHeaderDescription>
+      </PageHeader>
+      <section id="icons" className="scroll-mt-20">
+        {children}
+      </section>
+    </div>
+  )
+}
diff --git a/apps/www/app/(internal)/icons/page.tsx b/apps/www/app/(internal)/icons/page.tsx
new file mode 100644
index 00000000000..635426d32c6
--- /dev/null
+++ b/apps/www/app/(internal)/icons/page.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { Icons } from "@/__registry__/icons"
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/ui/table"
+import { iconLibraries } from "@/registry/registry-icons"
+
+export default function IconsPage() {
+  return (
+    <div>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[240px]" align="left">
+              name
+            </TableHead>
+            {Object.keys(iconLibraries).map((library) => (
+              <TableHead key={library}>{library}</TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Object.entries(Icons).map(([name, icon]) => (
+            <TableRow key={name}>
+              <TableCell align="left">
+                <code>{name}</code>
+              </TableCell>
+              {Object.entries(iconLibraries).map(([library, name]) => {
+                const IconComponent = icon[library as keyof typeof icon]
+                return (
+                  <TableCell key={library} className="[&_svg]:h-4 [&_svg]:w-4">
+                    <React.Suspense fallback={<div>Loading...</div>}>
+                      {IconComponent && <IconComponent />}
+                    </React.Suspense>
+                  </TableCell>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
diff --git a/apps/www/app/(internal)/sink/page.tsx b/apps/www/app/(internal)/sink/page.tsx
new file mode 100644
index 00000000000..ca0e0e6c259
--- /dev/null
+++ b/apps/www/app/(internal)/sink/page.tsx
@@ -0,0 +1,3 @@
+import SinkPage from "@/registry/new-york/internal/sink/page"
+
+export default SinkPage
diff --git a/apps/www/app/(view)/view/styles/[style]/[name]/page.tsx b/apps/www/app/(view)/view/styles/[style]/[name]/page.tsx
new file mode 100644
index 00000000000..c3c2866c3d6
--- /dev/null
+++ b/apps/www/app/(view)/view/styles/[style]/[name]/page.tsx
@@ -0,0 +1,101 @@
+import * as React from "react"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+import { siteConfig } from "@/config/site"
+import { getAllBlockIds } from "@/lib/blocks"
+import { absoluteUrl, cn } from "@/lib/utils"
+import { Style, styles } from "@/registry/registry-styles"
+
+import "@/styles/mdx.css"
+import { getRegistryComponent, getRegistryItem } from "@/lib/registry"
+
+const getCachedRegistryItem = React.cache(
+  async (name: string, style: Style["name"]) => {
+    return await getRegistryItem(name, style)
+  }
+)
+
+export const dynamicParams = false
+
+export async function generateMetadata({
+  params,
+}: {
+  params: {
+    style: Style["name"]
+    name: string
+  }
+}): Promise<Metadata> {
+  const { name, style } = params
+  const item = await getCachedRegistryItem(name, style)
+
+  if (!item) {
+    return {}
+  }
+
+  const title = item.name
+  const description = item.description
+
+  return {
+    title: `${item.name}${item.description ? ` - ${item.description}` : ""}`,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: "article",
+      url: absoluteUrl(`/blocks/${style}/${item.name}`),
+      images: [
+        {
+          url: siteConfig.ogImage,
+          width: 1200,
+          height: 630,
+          alt: siteConfig.name,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [siteConfig.ogImage],
+      creator: "@shadcn",
+    },
+  }
+}
+
+export async function generateStaticParams() {
+  const blockIds = await getAllBlockIds()
+  return styles
+    .map((style) =>
+      blockIds.map((name) => ({
+        style: style.name,
+        name,
+      }))
+    )
+    .flat()
+}
+
+export default async function BlockPage({
+  params,
+}: {
+  params: {
+    style: Style["name"]
+    name: string
+  }
+}) {
+  const { name, style } = params
+  const item = await getCachedRegistryItem(name, style)
+  const Component = getRegistryComponent(name, style)
+
+  if (!item || !Component) {
+    return notFound()
+  }
+
+  return (
+    <>
+      <div className={cn("themes-wrapper bg-background", item.meta?.container)}>
+        <Component />
+      </div>
+    </>
+  )
+}
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index c3f046e9656..c3e043f4530 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -1,8 +1,8 @@
 import "@/styles/globals.css"
 import { Metadata, Viewport } from "next"
 
-import { siteConfig } from "@/config/site"
-import { fontSans } from "@/lib/fonts"
+import { META_THEME_COLORS, siteConfig } from "@/config/site"
+import { fontMono, fontSans } from "@/lib/fonts"
 import { cn } from "@/lib/utils"
 import { Analytics } from "@/components/analytics"
 import { ThemeProvider } from "@/components/providers"
@@ -65,10 +65,7 @@ export const metadata: Metadata = {
 }
 
 export const viewport: Viewport = {
-  themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "white" },
-    { media: "(prefers-color-scheme: dark)", color: "black" },
-  ],
+  themeColor: META_THEME_COLORS.light,
 }
 
 interface RootLayoutProps {
@@ -79,11 +76,24 @@ export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <>
       <html lang="en" suppressHydrationWarning>
-        <head />
+        <head>
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+              try {
+                if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                  document.querySelector('meta[name="theme-color"]').setAttribute('content', '${META_THEME_COLORS.dark}')
+                }
+              } catch (_) {}
+            `,
+            }}
+          />
+        </head>
         <body
           className={cn(
-            "min-h-screen bg-background font-sans antialiased",
-            fontSans.variable
+            "min-h-svh bg-background font-sans antialiased",
+            fontSans.variable,
+            fontMono.variable
           )}
         >
           <ThemeProvider
@@ -91,9 +101,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
             defaultTheme="system"
             enableSystem
             disableTransitionOnChange
+            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>
diff --git a/apps/www/components/announcement.tsx b/apps/www/components/announcement.tsx
index 44ac1433c89..abc656c144d 100644
--- a/apps/www/components/announcement.tsx
+++ b/apps/www/components/announcement.tsx
@@ -1,21 +1,25 @@
 import Link from "next/link"
-import { ArrowRightIcon } from "@radix-ui/react-icons"
-import { Blocks, PieChart } from "lucide-react"
-
-import { Separator } from "@/registry/new-york/ui/separator"
+import { ArrowRight } from "lucide-react"
 
 export function Announcement() {
   return (
     <Link
-      href="/docs/changelog"
-      className="group inline-flex items-center px-0.5 text-sm font-medium"
+      href="/docs/tailwind-v4"
+      className="group mb-2 inline-flex items-center gap-2 px-0.5 text-sm font-medium"
     >
-      <PieChart className="h-4 w-4" />{" "}
-      <Separator className="mx-2 h-4" orientation="vertical" />{" "}
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-4 w-4 fill-current"
+      >
+        <title>Tailwind CSS</title>
+        <path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z" />
+      </svg>
       <span className="underline-offset-4 group-hover:underline">
-        npx shadcn init
+        Get Started with Tailwind v4
       </span>
-      <ArrowRightIcon className="ml-1 h-4 w-4" />
+      <ArrowRight className="ml-1 h-4 w-4" />
     </Link>
   )
 }
diff --git a/apps/www/components/block-chunk.tsx b/apps/www/components/block-chunk.tsx
deleted file mode 100644
index 2ee0902f3df..00000000000
--- a/apps/www/components/block-chunk.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { AnimatePresence, motion } from "framer-motion"
-
-import { cn } from "@/lib/utils"
-import { useLiftMode } from "@/hooks/use-lift-mode"
-import { BlockCopyButton } from "@/components/block-copy-button"
-import { V0Button } from "@/components/v0-button"
-import { Block, type BlockChunk } from "@/registry/schema"
-
-export function BlockChunk({
-  block,
-  chunk,
-  children,
-  ...props
-}: React.PropsWithChildren<{ block: Block; chunk?: BlockChunk }>) {
-  const { isLiftMode } = useLiftMode(block.name)
-
-  if (!chunk) {
-    return null
-  }
-
-  return (
-    <AnimatePresence>
-      {isLiftMode && (
-        <motion.div
-          key={chunk.name}
-          x-chunk-container={chunk.name}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0, transition: { ease: "easeOut", duration: 0.2 } }}
-          transition={{ ease: "easeIn", duration: 0.2 }}
-          className={cn(
-            "group rounded-xl bg-background shadow-xl transition",
-            chunk.container?.className
-          )}
-          {...props}
-        >
-          <div className="relative z-30">{children}</div>
-          {chunk.code && (
-            <div className="absolute inset-x-0 top-0 z-30 flex px-4 py-3 opacity-0 transition-all duration-200 ease-in group-hover:-translate-y-12 group-hover:opacity-100">
-              <div className="flex w-full items-center justify-end gap-2">
-                <BlockCopyButton
-                  event="copy_chunk_code"
-                  name={chunk.name}
-                  code={chunk.code}
-                />
-                <V0Button
-                  size="icon"
-                  block={{
-                    name: chunk.name,
-                    description: chunk.description || "",
-                    code: chunk.code,
-                    style: block.style,
-                  }}
-                />
-              </div>
-            </div>
-          )}
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-}
diff --git a/apps/www/components/block-copy-button.tsx b/apps/www/components/block-copy-button.tsx
deleted file mode 100644
index 4c13b0636f1..00000000000
--- a/apps/www/components/block-copy-button.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CheckIcon, ClipboardIcon } from "lucide-react"
-
-import { Event, trackEvent } from "@/lib/events"
-import { cn } from "@/lib/utils"
-import { Button, ButtonProps } from "@/registry/new-york/ui/button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/ui/tooltip"
-
-export function BlockCopyButton({
-  event,
-  name,
-  code,
-  className,
-  ...props
-}: {
-  event: Event["name"]
-  name: string
-  code: string
-} & ButtonProps) {
-  const [hasCopied, setHasCopied] = React.useState(false)
-
-  React.useEffect(() => {
-    setTimeout(() => {
-      setHasCopied(false)
-    }, 2000)
-  }, [hasCopied])
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          size="icon"
-          variant="outline"
-          className={cn(
-            "[&_svg]-h-3.5 h-7 w-7 rounded-[6px] [&_svg]:w-3.5",
-            className
-          )}
-          onClick={() => {
-            navigator.clipboard.writeText(code)
-            trackEvent({
-              name: event,
-              properties: {
-                name,
-              },
-            })
-            setHasCopied(true)
-          }}
-          {...props}
-        >
-          <span className="sr-only">Copy</span>
-          {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent className="bg-black text-white">Copy code</TooltipContent>
-    </Tooltip>
-  )
-}
diff --git a/apps/www/components/block-display.tsx b/apps/www/components/block-display.tsx
index 7dca89e6827..c1f4362c1e6 100644
--- a/apps/www/components/block-display.tsx
+++ b/apps/www/components/block-display.tsx
@@ -1,29 +1,52 @@
-import { getBlock } from "@/lib/blocks"
-import { BlockPreview } from "@/components/block-preview"
-import { styles } from "@/registry/registry-styles"
+import * as React from "react"
+import { registryItemFileSchema } from "shadcn/schema"
+import { z } from "zod"
+
+import { highlightCode } from "@/lib/highlight-code"
+import {
+  createFileTreeForRegistryItemFiles,
+  getRegistryItem,
+} from "@/lib/registry"
+import { BlockViewer } from "@/components/block-viewer"
 
 export async function BlockDisplay({ name }: { name: string }) {
-  const blocks = await Promise.all(
-    styles.map(async (style) => {
-      const block = await getBlock(name, style.name)
-      const hasLiftMode = block?.chunks ? block?.chunks?.length > 0 : false
-
-      // Cannot (and don't need to) pass to the client.
-      delete block?.component
-      delete block?.chunks
-
-      return {
-        ...block,
-        hasLiftMode,
-      }
-    })
-  )
+  const item = await getCachedRegistryItem(name)
 
-  if (!blocks?.length) {
+  if (!item?.files) {
     return null
   }
 
-  return blocks.map((block) => (
-    <BlockPreview key={`${block.style}-${block.name}`} block={block} />
-  ))
+  const [tree, highlightedFiles] = await Promise.all([
+    getCachedFileTree(item.files),
+    getCachedHighlightedFiles(item.files),
+  ])
+
+  return (
+    <BlockViewer item={item} tree={tree} highlightedFiles={highlightedFiles} />
+  )
 }
+
+const getCachedRegistryItem = React.cache(async (name: string) => {
+  return await getRegistryItem(name)
+})
+
+const getCachedFileTree = React.cache(
+  async (files: Array<{ path: string; target?: string }>) => {
+    if (!files) {
+      return null
+    }
+
+    return await createFileTreeForRegistryItemFiles(files)
+  }
+)
+
+const getCachedHighlightedFiles = React.cache(
+  async (files: z.infer<typeof registryItemFileSchema>[]) => {
+    return await Promise.all(
+      files.map(async (file) => ({
+        ...file,
+        highlightedContent: await highlightCode(file.content ?? ""),
+      }))
+    )
+  }
+)
diff --git a/apps/www/components/block-image.tsx b/apps/www/components/block-image.tsx
new file mode 100644
index 00000000000..336a6e8a903
--- /dev/null
+++ b/apps/www/components/block-image.tsx
@@ -0,0 +1,36 @@
+import Image from "next/image"
+
+import { cn } from "@/lib/utils"
+
+export function BlockImage({
+  name,
+  width = 1440,
+  height = 900,
+  className,
+}: Omit<React.ComponentProps<typeof Image>, "src" | "alt"> & { name: string }) {
+  return (
+    <div
+      className={cn(
+        "relative aspect-[1440/900] w-full overflow-hidden rounded-lg",
+        className
+      )}
+    >
+      <Image
+        src={`/r/styles/new-york/${name}-light.png`}
+        alt={name}
+        width={width}
+        height={height}
+        className="object-cover dark:hidden"
+        data-image="light"
+      />
+      <Image
+        src={`/r/styles/new-york/${name}-dark.png`}
+        alt={name}
+        width={width}
+        height={height}
+        className="hidden object-cover dark:block"
+        data-image="dark"
+      />
+    </div>
+  )
+}
diff --git a/apps/www/components/block-preview.tsx b/apps/www/components/block-preview.tsx
deleted file mode 100644
index 196b332f3ec..00000000000
--- a/apps/www/components/block-preview.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ImperativePanelHandle } from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-import { useConfig } from "@/hooks/use-config"
-import { useLiftMode } from "@/hooks/use-lift-mode"
-import { BlockToolbar } from "@/components/block-toolbar"
-import { Icons } from "@/components/icons"
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/registry/new-york/ui/resizable"
-import { Tabs, TabsContent } from "@/registry/new-york/ui/tabs"
-import { Block } from "@/registry/schema"
-
-export function BlockPreview({
-  block,
-}: {
-  block: Block & { hasLiftMode: boolean }
-}) {
-  const [config] = useConfig()
-  const { isLiftMode } = useLiftMode(block.name)
-  const [isLoading, setIsLoading] = React.useState(true)
-  const ref = React.useRef<ImperativePanelHandle>(null)
-
-  if (config.style !== block.style) {
-    return null
-  }
-
-  return (
-    <Tabs
-      id={block.name}
-      defaultValue="preview"
-      className="relative grid w-full scroll-m-20 gap-4"
-      style={
-        {
-          "--container-height": block.container?.height,
-        } as React.CSSProperties
-      }
-    >
-      <BlockToolbar block={block} resizablePanelRef={ref} />
-      <TabsContent
-        value="preview"
-        className="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted"
-      >
-        <ResizablePanelGroup direction="horizontal" className="relative z-10">
-          <ResizablePanel
-            ref={ref}
-            className={cn(
-              "relative rounded-lg border bg-background",
-              isLiftMode ? "border-border/50" : "border-border"
-            )}
-            defaultSize={100}
-            minSize={30}
-          >
-            {isLoading ? (
-              <div className="absolute inset-0 z-10 flex h-[--container-height] w-full items-center justify-center gap-2 bg-background text-sm text-muted-foreground">
-                <Icons.spinner className="h-4 w-4 animate-spin" />
-                Loading...
-              </div>
-            ) : null}
-            <iframe
-              src={`/blocks/${block.style}/${block.name}`}
-              height={block.container?.height ?? 450}
-              className="chunk-mode relative z-20 w-full bg-background"
-              onLoad={() => {
-                setIsLoading(false)
-              }}
-              allowTransparency
-            />
-          </ResizablePanel>
-          <ResizableHandle
-            className={cn(
-              "relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 sm:block",
-              isLiftMode && "invisible"
-            )}
-          />
-          <ResizablePanel defaultSize={0} minSize={0} />
-        </ResizablePanelGroup>
-      </TabsContent>
-      <TabsContent value="code">
-        <div
-          data-rehype-pretty-code-fragment
-          dangerouslySetInnerHTML={{ __html: block.highlightedCode }}
-          className="w-full overflow-hidden rounded-md [&_pre]:my-0 [&_pre]:h-[--container-height] [&_pre]:overflow-auto [&_pre]:whitespace-break-spaces [&_pre]:p-6 [&_pre]:font-mono [&_pre]:text-sm [&_pre]:leading-relaxed"
-        />
-      </TabsContent>
-    </Tabs>
-  )
-}
diff --git a/apps/www/components/block-toolbar.tsx b/apps/www/components/block-toolbar.tsx
deleted file mode 100644
index f1b683cc3e7..00000000000
--- a/apps/www/components/block-toolbar.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CircleHelp, Monitor, Smartphone, Tablet } from "lucide-react"
-import { ImperativePanelHandle } from "react-resizable-panels"
-
-import { trackEvent } from "@/lib/events"
-import { cn } from "@/lib/utils"
-import { useLiftMode } from "@/hooks/use-lift-mode"
-import { BlockCopyButton } from "@/components/block-copy-button"
-import { StyleSwitcher } from "@/components/style-switcher"
-import { V0Button } from "@/components/v0-button"
-import { Badge } from "@/registry/new-york/ui/badge"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-import { Separator } from "@/registry/new-york/ui/separator"
-import { Switch } from "@/registry/new-york/ui/switch"
-import { TabsList, TabsTrigger } from "@/registry/new-york/ui/tabs"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-import { Block } from "@/registry/schema"
-
-export function BlockToolbar({
-  block,
-  resizablePanelRef,
-}: {
-  block: Block & { hasLiftMode: boolean }
-  resizablePanelRef: React.RefObject<ImperativePanelHandle>
-}) {
-  const { isLiftMode, toggleLiftMode } = useLiftMode(block.name)
-
-  return (
-    <div className="flex items-center gap-4">
-      <div className="flex items-center gap-2">
-        <TabsList className="hidden h-7 rounded-md p-0 px-[calc(theme(spacing.1)_-_2px)] py-[theme(spacing.1)] sm:flex">
-          <TabsTrigger
-            value="preview"
-            className="h-[1.45rem] rounded-sm px-2 text-xs"
-            disabled={isLiftMode}
-          >
-            Preview
-          </TabsTrigger>
-          <TabsTrigger
-            value="code"
-            className="h-[1.45rem] rounded-sm px-2 text-xs"
-            disabled={isLiftMode}
-          >
-            Code
-          </TabsTrigger>
-        </TabsList>
-        <Separator orientation="vertical" className="mx-2 hidden h-4 md:flex" />
-        <StyleSwitcher
-          className="h-[calc(theme(spacing.7)_-_1px)] dark:h-7"
-          disabled={isLiftMode}
-        />
-        <Popover>
-          <PopoverTrigger
-            disabled={isLiftMode}
-            className="hidden text-muted-foreground hover:text-foreground disabled:opacity-50 sm:flex"
-          >
-            <CircleHelp className="h-3.5 w-3.5" />
-            <span className="sr-only">Block description</span>
-          </PopoverTrigger>
-          <PopoverContent
-            side="top"
-            sideOffset={20}
-            className="space-y-3 rounded-[0.5rem] text-sm"
-          >
-            <p className="font-medium">
-              What is the difference between the New York and Default style?
-            </p>
-            <p>
-              A style comes with its own set of components, animations, icons
-              and more.
-            </p>
-            <p>
-              The <span className="font-medium">Default</span> style has larger
-              inputs, uses lucide-react for icons and tailwindcss-animate for
-              animations.
-            </p>
-            <p>
-              The <span className="font-medium">New York</span> style ships with
-              smaller buttons and inputs. It also uses shadows on cards and
-              buttons.
-            </p>
-          </PopoverContent>
-        </Popover>
-        <div className="hidden items-center gap-2 sm:flex">
-          <Separator
-            orientation="vertical"
-            className="mx-2 mr-0 hidden h-4 md:flex"
-          />
-          <div className="flex items-center gap-2">
-            <a href={`#${block.name}`}>
-              <Badge
-                variant="secondary"
-                className={cn("bg-transparent", isLiftMode && "opacity-50")}
-              >
-                {block.name}
-              </Badge>
-            </a>
-          </div>
-        </div>
-      </div>
-      {block.code && (
-        <div className="ml-auto flex items-center gap-2 md:pr-[14px]">
-          {block.hasLiftMode && (
-            <>
-              <div className="hidden h-7 items-center justify-between gap-2 md:flex">
-                <Label htmlFor={`lift-mode-${block.name}`} className="text-xs">
-                  Lift Mode
-                </Label>
-                <Switch
-                  id={`lift-mode-${block.name}`}
-                  checked={isLiftMode}
-                  onCheckedChange={(value) => {
-                    resizablePanelRef.current?.resize(100)
-                    toggleLiftMode(block.name)
-
-                    if (value) {
-                      trackEvent({
-                        name: "enable_lift_mode",
-                        properties: {
-                          name: block.name,
-                        },
-                      })
-                    }
-                  }}
-                />
-              </div>
-              <Separator
-                orientation="vertical"
-                className="mx-2 hidden h-4 lg:inline-flex"
-              />
-            </>
-          )}
-          <div className="hidden h-[28px] items-center gap-1.5 rounded-md border p-[2px] shadow-sm md:flex">
-            <ToggleGroup
-              disabled={isLiftMode}
-              type="single"
-              defaultValue="100"
-              onValueChange={(value) => {
-                if (resizablePanelRef.current) {
-                  resizablePanelRef.current.resize(parseInt(value))
-                }
-              }}
-            >
-              <ToggleGroupItem
-                value="100"
-                className="h-[22px] w-[22px] rounded-sm p-0"
-              >
-                <Monitor className="h-3.5 w-3.5" />
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="60"
-                className="h-[22px] w-[22px] rounded-sm p-0"
-              >
-                <Tablet className="h-3.5 w-3.5" />
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="30"
-                className="h-[22px] w-[22px] rounded-sm p-0"
-              >
-                <Smartphone className="h-3.5 w-3.5" />
-              </ToggleGroupItem>
-            </ToggleGroup>
-          </div>
-          <Separator
-            orientation="vertical"
-            className="mx-2 hidden h-4 md:flex"
-          />
-          <BlockCopyButton
-            event="copy_block_code"
-            name={block.name}
-            code={block.code}
-            disabled={isLiftMode}
-          />
-          <V0Button
-            className="hidden md:flex"
-            id={`v0-button-${block.name}`}
-            disabled={
-              isLiftMode || ["login-01", "sidebar-01"].includes(block.name)
-            }
-            block={{
-              name: block.name,
-              description: block.description || "Edit in v0",
-              code: block.code,
-              style: block.style,
-            }}
-          />
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/apps/www/components/block-viewer.tsx b/apps/www/components/block-viewer.tsx
new file mode 100644
index 00000000000..710aacd4017
--- /dev/null
+++ b/apps/www/components/block-viewer.tsx
@@ -0,0 +1,454 @@
+"use client"
+
+import * as React from "react"
+import Image from "next/image"
+import Link from "next/link"
+import {
+  Check,
+  ChevronRight,
+  Clipboard,
+  File,
+  Folder,
+  Fullscreen,
+  Monitor,
+  Smartphone,
+  Tablet,
+  Terminal,
+} from "lucide-react"
+import { ImperativePanelHandle } from "react-resizable-panels"
+import { registryItemFileSchema, registryItemSchema } from "shadcn/schema"
+import { z } from "zod"
+
+import { trackEvent } from "@/lib/events"
+import { FileTree, createFileTreeForRegistryItemFiles } from "@/lib/registry"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { V0Button } from "@/components/v0-button"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york/ui/resizable"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+import { Tabs, TabsList, TabsTrigger } from "@/registry/new-york/ui/tabs"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+import { Style } from "@/registry/registry-styles"
+
+type BlockViewerContext = {
+  item: z.infer<typeof registryItemSchema>
+  view: "code" | "preview"
+  setView: (view: "code" | "preview") => void
+  style?: Style["name"]
+  setStyle: (style: Style["name"]) => void
+  activeFile: string | null
+  setActiveFile: (file: string) => void
+  resizablePanelRef: React.RefObject<ImperativePanelHandle> | null
+  tree: ReturnType<typeof createFileTreeForRegistryItemFiles> | null
+  highlightedFiles:
+    | (z.infer<typeof registryItemFileSchema> & {
+        highlightedContent: string
+      })[]
+    | null
+}
+
+const BlockViewerContext = React.createContext<BlockViewerContext | null>(null)
+
+function useBlockViewer() {
+  const context = React.useContext(BlockViewerContext)
+  if (!context) {
+    throw new Error("useBlockViewer must be used within a BlockViewerProvider.")
+  }
+  return context
+}
+
+function BlockViewerProvider({
+  item,
+  tree,
+  highlightedFiles,
+  children,
+}: Pick<BlockViewerContext, "item" | "tree" | "highlightedFiles"> & {
+  children: React.ReactNode
+}) {
+  const [view, setView] = React.useState<BlockViewerContext["view"]>("preview")
+  const [style, setStyle] =
+    React.useState<BlockViewerContext["style"]>("new-york")
+  const [activeFile, setActiveFile] = React.useState<
+    BlockViewerContext["activeFile"]
+  >(highlightedFiles?.[0].target ?? null)
+  const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
+
+  return (
+    <BlockViewerContext.Provider
+      value={{
+        item,
+        view,
+        setView,
+        style,
+        setStyle,
+        resizablePanelRef,
+        activeFile,
+        setActiveFile,
+        tree,
+        highlightedFiles,
+      }}
+    >
+      <div
+        id={item.name}
+        data-view={view}
+        className="group/block-view-wrapper flex min-w-0 flex-col items-stretch gap-4"
+        style={
+          {
+            "--height": item.meta?.iframeHeight ?? "930px",
+          } as React.CSSProperties
+        }
+      >
+        {children}
+      </div>
+    </BlockViewerContext.Provider>
+  )
+}
+
+function BlockViewerToolbar() {
+  const { setView, item, resizablePanelRef, style } = useBlockViewer()
+  const { copyToClipboard, isCopied } = useCopyToClipboard()
+
+  return (
+    <div className="flex w-full items-center gap-2 md:pr-[14px]">
+      <Tabs
+        defaultValue="preview"
+        onValueChange={(value) => setView(value as "preview" | "code")}
+        className="hidden lg:flex"
+      >
+        <TabsList className="h-7 items-center rounded-md p-0 px-[calc(theme(spacing.1)_-_2px)] py-[theme(spacing.1)]">
+          <TabsTrigger
+            value="preview"
+            className="h-[1.45rem] rounded-sm px-2 text-xs"
+          >
+            Preview
+          </TabsTrigger>
+          <TabsTrigger
+            value="code"
+            className="h-[1.45rem] rounded-sm px-2 text-xs"
+          >
+            Code
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Separator orientation="vertical" className="mx-2 hidden h-4 lg:flex" />
+      <a
+        href={`#${item.name}`}
+        className="text-sm font-medium underline-offset-2 hover:underline"
+      >
+        {item.description}
+      </a>
+      <div className="ml-auto hidden items-center gap-2 md:flex">
+        <div className="hidden h-7 items-center gap-1.5 rounded-md border p-[2px] shadow-none lg:flex">
+          <ToggleGroup
+            type="single"
+            defaultValue="100"
+            onValueChange={(value) => {
+              if (resizablePanelRef?.current) {
+                resizablePanelRef.current.resize(parseInt(value))
+              }
+            }}
+          >
+            <ToggleGroupItem
+              value="100"
+              className="h-[22px] w-[22px] min-w-0 rounded-sm p-0"
+              title="Desktop"
+            >
+              <Monitor className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="60"
+              className="h-[22px] w-[22px] min-w-0 rounded-sm p-0"
+              title="Tablet"
+            >
+              <Tablet className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="30"
+              className="h-[22px] w-[22px] min-w-0 rounded-sm p-0"
+              title="Mobile"
+            >
+              <Smartphone className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <Separator orientation="vertical" className="h-4" />
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-[22px] w-[22px] rounded-sm p-0"
+              asChild
+              title="Open in New Tab"
+            >
+              <Link href={`/view/styles/${style}/${item.name}`} target="_blank">
+                <span className="sr-only">Open in New Tab</span>
+                <Fullscreen className="h-3.5 w-3.5" />
+              </Link>
+            </Button>
+          </ToggleGroup>
+        </div>
+        <Separator orientation="vertical" className="mx-1 hidden h-4 md:flex" />
+        <div className="flex h-7 items-center gap-1 rounded-md border p-[2px]">
+          <Button
+            variant="ghost"
+            className="hidden h-[22px] w-auto gap-1 rounded-sm px-2 md:flex lg:w-auto"
+            size="sm"
+            onClick={() => {
+              copyToClipboard(`npx shadcn@latest add ${item.name}`)
+            }}
+          >
+            {isCopied ? <Check /> : <Terminal />}
+            <span className="hidden lg:inline">npx shadcn add {item.name}</span>
+          </Button>
+        </div>
+        <Separator orientation="vertical" className="mx-1 hidden h-4 xl:flex" />
+        <V0Button
+          className="hidden shadow-none sm:flex"
+          id={`v0-button-${item.name}`}
+          name={`${item.name}`}
+        />
+      </div>
+    </div>
+  )
+}
+
+function BlockViewerView() {
+  const { item, style, resizablePanelRef } = useBlockViewer()
+
+  return (
+    <div className="group-data-[view=code]/block-view-wrapper:hidden md:h-[--height]">
+      <div className="grid w-full gap-4">
+        <ResizablePanelGroup direction="horizontal" className="relative z-10">
+          <ResizablePanel
+            ref={resizablePanelRef}
+            className="relative aspect-[4/2.5] rounded-xl border bg-background md:aspect-auto"
+            defaultSize={100}
+            minSize={30}
+          >
+            <Image
+              src={`/r/styles/${style}/${item.name}-light.png`}
+              alt={item.name}
+              data-block={item.name}
+              width={1440}
+              height={900}
+              className="object-cover dark:hidden md:hidden md:dark:hidden"
+            />
+            <Image
+              src={`/r/styles/${style}/${item.name}-dark.png`}
+              alt={item.name}
+              data-block={item.name}
+              width={1440}
+              height={900}
+              className="hidden object-cover dark:block md:hidden md:dark:hidden"
+            />
+            <iframe
+              src={`/view/styles/${style}/${item.name}`}
+              height={item.meta?.iframeHeight ?? 930}
+              className="relative z-20 hidden w-full bg-background md:block"
+            />
+          </ResizablePanel>
+          <ResizableHandle className="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 md:block" />
+          <ResizablePanel defaultSize={0} minSize={0} />
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  )
+}
+
+function BlockViewerCode() {
+  const { activeFile, highlightedFiles } = useBlockViewer()
+
+  const file = React.useMemo(() => {
+    return highlightedFiles?.find((file) => file.target === activeFile)
+  }, [highlightedFiles, activeFile])
+
+  if (!file) {
+    return null
+  }
+
+  return (
+    <div className="mr-[14px] flex overflow-hidden rounded-xl bg-zinc-950 text-white group-data-[view=preview]/block-view-wrapper:hidden md:h-[--height]">
+      <div className="w-[280px]">
+        <BlockViewerFileTree />
+      </div>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="flex h-12 items-center gap-2 border-b border-zinc-700 bg-zinc-900 px-4 text-sm font-medium">
+          <File className="size-4" />
+          {file.target}
+          <div className="ml-auto flex items-center gap-2">
+            <BlockCopyCodeButton />
+          </div>
+        </div>
+        <div
+          key={file?.path}
+          data-rehype-pretty-code-fragment
+          dangerouslySetInnerHTML={{ __html: file?.highlightedContent ?? "" }}
+          className="relative flex-1 overflow-hidden after:absolute after:inset-y-0 after:left-0 after:w-10 after:bg-zinc-950 [&_.line:before]:sticky [&_.line:before]:left-2 [&_.line:before]:z-10 [&_.line:before]:translate-y-[-1px] [&_.line:before]:pr-1 [&_pre]:h-[--height] [&_pre]:overflow-auto [&_pre]:!bg-transparent [&_pre]:pb-20 [&_pre]:pt-4 [&_pre]:font-mono [&_pre]:text-sm [&_pre]:leading-relaxed"
+        />
+      </div>
+    </div>
+  )
+}
+
+export function BlockViewerFileTree() {
+  const { tree } = useBlockViewer()
+
+  if (!tree) {
+    return null
+  }
+
+  return (
+    <SidebarProvider className="flex !min-h-full flex-col">
+      <Sidebar
+        collapsible="none"
+        className="w-full flex-1 border-r border-zinc-700 bg-zinc-900 text-white"
+      >
+        <SidebarGroupLabel className="h-12 rounded-none border-b border-zinc-700 px-4 text-sm text-white">
+          Files
+        </SidebarGroupLabel>
+        <SidebarGroup className="p-0">
+          <SidebarGroupContent>
+            <SidebarMenu className="gap-1.5">
+              {tree.map((file, index) => (
+                <Tree key={index} item={file} index={1} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
+
+function Tree({ item, index }: { item: FileTree; index: number }) {
+  const { activeFile, setActiveFile } = useBlockViewer()
+
+  if (!item.children) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          isActive={item.path === activeFile}
+          onClick={() => item.path && setActiveFile(item.path)}
+          className="whitespace-nowrap rounded-none pl-[--index] hover:bg-zinc-700 hover:text-white focus:bg-zinc-700 focus:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white"
+          data-index={index}
+          style={
+            {
+              "--index": `${index * (index === 2 ? 1.2 : 1.3)}rem`,
+            } as React.CSSProperties
+          }
+        >
+          <ChevronRight className="invisible" />
+          <File className="h-4 w-4" />
+          {item.name}
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    )
+  }
+
+  return (
+    <SidebarMenuItem>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen
+      >
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton
+            className="whitespace-nowrap rounded-none pl-[--index] hover:bg-zinc-700 hover:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white data-[state=open]:hover:bg-zinc-700 data-[state=open]:hover:text-white"
+            style={
+              {
+                "--index": `${index * (index === 1 ? 1 : 1.2)}rem`,
+              } as React.CSSProperties
+            }
+          >
+            <ChevronRight className="h-4 w-4 transition-transform" />
+            <Folder className="h-4 w-4" />
+            {item.name}
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub className="m-0 w-full border-none p-0">
+            {item.children.map((subItem, key) => (
+              <Tree key={key} item={subItem} index={index + 1} />
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarMenuItem>
+  )
+}
+
+function BlockCopyCodeButton() {
+  const { activeFile, item } = useBlockViewer()
+  const { copyToClipboard, isCopied } = useCopyToClipboard()
+
+  const file = React.useMemo(() => {
+    return item.files?.find((file) => file.target === activeFile)
+  }, [activeFile, item.files])
+
+  const content = file?.content
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <Button
+      onClick={() => {
+        copyToClipboard(content)
+        trackEvent({
+          name: "copy_block_code",
+          properties: {
+            name: item.name,
+            file: file.path,
+          },
+        })
+      }}
+      className="h-7 w-7 shrink-0 rounded-lg p-0 hover:bg-zinc-700 hover:text-white focus:bg-zinc-700 focus:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white [&>svg]:size-3"
+      variant="ghost"
+    >
+      {isCopied ? <Check /> : <Clipboard />}
+    </Button>
+  )
+}
+
+function BlockViewer({
+  item,
+  tree,
+  highlightedFiles,
+  ...props
+}: Pick<BlockViewerContext, "item" | "tree" | "highlightedFiles">) {
+  return (
+    <BlockViewerProvider
+      item={item}
+      tree={tree}
+      highlightedFiles={highlightedFiles}
+      {...props}
+    >
+      <BlockViewerToolbar />
+      <BlockViewerView />
+      <BlockViewerCode />
+    </BlockViewerProvider>
+  )
+}
+
+export { BlockViewer }
diff --git a/apps/www/components/block-wrapper.tsx b/apps/www/components/block-wrapper.tsx
deleted file mode 100644
index 088053daf80..00000000000
--- a/apps/www/components/block-wrapper.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { AnimatePresence, motion } from "framer-motion"
-
-import { useLiftMode } from "@/hooks/use-lift-mode"
-import { Block } from "@/registry/schema"
-
-export function BlockWrapper({
-  block,
-  children,
-}: React.PropsWithChildren<{ block: Block }>) {
-  const { isLiftMode } = useLiftMode(block.name)
-
-  React.useEffect(() => {
-    const components = document.querySelectorAll("[x-chunk]")
-    block.chunks?.map((chunk, index) => {
-      const $chunk = document.querySelector<HTMLElement>(
-        `[x-chunk="${chunk.name}"]`
-      )
-      const $wrapper = document.querySelector<HTMLElement>(
-        `[x-chunk-container="${chunk.name}"]`
-      )
-
-      const $component = components[index]
-
-      if (!$chunk || !$component) {
-        return
-      }
-
-      const position = $component.getBoundingClientRect()
-      $chunk.style.zIndex = "40"
-      // $chunk.style.position = "absolute"
-      // $chunk.style.top = `${position.top}px`
-      // $chunk.style.left = `${position.left}px`
-      $chunk.style.width = `${position.width}px`
-      $chunk.style.height = `${position.height}px`
-
-      if ($wrapper) {
-        $wrapper.style.zIndex = "40"
-        $wrapper.style.position = "absolute"
-        $wrapper.style.top = `${position.top}px`
-        $wrapper.style.left = `${position.left}px`
-        $wrapper.style.width = `${position.width}px`
-        $wrapper.style.height = `${position.height}px`
-      }
-    })
-  }, [block.chunks, isLiftMode])
-
-  return (
-    <>
-      {children}
-      <AnimatePresence>
-        {isLiftMode && (
-          <motion.div
-            className="absolute inset-0 z-30 bg-background/90 fill-mode-backwards"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{
-              opacity: 0,
-              transition: { ease: "easeOut", duration: 0.38 },
-            }}
-            transition={{ ease: "easeOut", duration: 0.2, delay: 0.18 }}
-          />
-        )}
-      </AnimatePresence>
-    </>
-  )
-}
diff --git a/apps/www/components/blocks-nav.tsx b/apps/www/components/blocks-nav.tsx
new file mode 100644
index 00000000000..4248667fd35
--- /dev/null
+++ b/apps/www/components/blocks-nav.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
+import { registryCategories } from "@/registry/registry-categories"
+
+export function BlocksNav() {
+  const pathname = usePathname()
+
+  return (
+    <div className="relative overflow-hidden">
+      <ScrollArea className="max-w-none">
+        <div className="flex items-center">
+          <BlocksNavLink
+            category={{ name: "Featured", slug: "", hidden: false }}
+            isActive={pathname === "/blocks"}
+          />
+          {registryCategories.map((category) => (
+            <BlocksNavLink
+              key={category.slug}
+              category={category}
+              isActive={pathname === `/blocks/${category.slug}`}
+            />
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" className="invisible" />
+      </ScrollArea>
+    </div>
+  )
+}
+
+function BlocksNavLink({
+  category,
+  isActive,
+}: {
+  category: (typeof registryCategories)[number]
+  isActive: boolean
+}) {
+  if (category.hidden) {
+    return null
+  }
+
+  return (
+    <Link
+      href={`/blocks/${category.slug}`}
+      key={category.slug}
+      className="flex h-7 shrink-0 items-center justify-center whitespace-nowrap rounded-full px-4 text-center text-sm font-medium text-muted-foreground transition-colors hover:text-foreground data-[active=true]:bg-muted data-[active=true]:text-foreground"
+      data-active={isActive}
+    >
+      {category.name}
+    </Link>
+  )
+}
diff --git a/apps/www/components/callout.tsx b/apps/www/components/callout.tsx
index 848d8717b21..34a9f23e72b 100644
--- a/apps/www/components/callout.tsx
+++ b/apps/www/components/callout.tsx
@@ -1,18 +1,19 @@
+import { cn } from "@/lib/utils"
 import {
   Alert,
   AlertDescription,
   AlertTitle,
 } from "@/registry/new-york/ui/alert"
 
-interface CalloutProps {
-  icon?: string
-  title?: string
-  children?: React.ReactNode
-}
-
-export function Callout({ title, children, icon, ...props }: CalloutProps) {
+export function Callout({
+  title,
+  children,
+  icon,
+  className,
+  ...props
+}: React.ComponentProps<typeof Alert> & { icon?: string }) {
   return (
-    <Alert {...props}>
+    <Alert className={cn("bg-muted/50", className)} {...props}>
       {icon && <span className="mr-4 text-2xl">{icon}</span>}
       {title && <AlertTitle>{title}</AlertTitle>}
       <AlertDescription>{children}</AlertDescription>
diff --git a/apps/www/components/cards/activity-goal.tsx b/apps/www/components/cards/activity-goal.tsx
new file mode 100644
index 00000000000..8f01a6bc95e
--- /dev/null
+++ b/apps/www/components/cards/activity-goal.tsx
@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Bar, BarChart } from "recharts"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart"
+
+const data = [
+  {
+    goal: 400,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 239,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 349,
+  },
+]
+
+const chartConfig = {
+  goal: {
+    label: "Goal",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export function CardsActivityGoal() {
+  const [goal, setGoal] = React.useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-4">
+        <CardTitle>Move Goal</CardTitle>
+        <CardDescription>Set your daily activity goal.</CardDescription>
+      </CardHeader>
+      <CardContent className="pb-2">
+        <div className="flex items-center justify-center space-x-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 shrink-0 rounded-full"
+            onClick={() => onClick(-10)}
+            disabled={goal <= 200}
+          >
+            <Minus />
+            <span className="sr-only">Decrease</span>
+          </Button>
+          <div className="flex-1 text-center">
+            <div className="text-5xl font-bold tracking-tighter">{goal}</div>
+            <div className="text-[0.70rem] uppercase text-muted-foreground">
+              Calories/day
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 shrink-0 rounded-full"
+            onClick={() => onClick(10)}
+            disabled={goal >= 400}
+          >
+            <Plus />
+            <span className="sr-only">Increase</span>
+          </Button>
+        </div>
+        <div className="my-3 h-[60px]">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-full w-full"
+          >
+            <BarChart data={data}>
+              <Bar dataKey="goal" radius={4} fill="var(--color-goal)" />
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Set Goal</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/example/cards/calendar.tsx b/apps/www/components/cards/calendar.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/cards/calendar.tsx
rename to apps/www/components/cards/calendar.tsx
diff --git a/apps/www/components/cards/chat.tsx b/apps/www/components/cards/chat.tsx
new file mode 100644
index 00000000000..61bb2517c89
--- /dev/null
+++ b/apps/www/components/cards/chat.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { Check, Plus, Send } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/registry/new-york/ui/card"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/new-york/ui/tooltip"
+
+const users = [
+  {
+    name: "Olivia Martin",
+    email: "m@example.com",
+    avatar: "/avatars/01.png",
+  },
+  {
+    name: "Isabella Nguyen",
+    email: "isabella.nguyen@email.com",
+    avatar: "/avatars/03.png",
+  },
+  {
+    name: "Emma Wilson",
+    email: "emma@example.com",
+    avatar: "/avatars/05.png",
+  },
+  {
+    name: "Jackson Lee",
+    email: "lee@example.com",
+    avatar: "/avatars/02.png",
+  },
+  {
+    name: "William Kim",
+    email: "will@email.com",
+    avatar: "/avatars/04.png",
+  },
+] as const
+
+type User = (typeof users)[number]
+
+export function CardsChat() {
+  const [open, setOpen] = React.useState(false)
+  const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
+
+  const [messages, setMessages] = React.useState([
+    {
+      role: "agent",
+      content: "Hi, how can I help you today?",
+    },
+    {
+      role: "user",
+      content: "Hey, I'm having trouble with my account.",
+    },
+    {
+      role: "agent",
+      content: "What seems to be the problem?",
+    },
+    {
+      role: "user",
+      content: "I can't log in.",
+    },
+  ])
+  const [input, setInput] = React.useState("")
+  const inputLength = input.trim().length
+
+  return (
+    <>
+      <Card>
+        <CardHeader className="flex flex-row items-center">
+          <div className="flex items-center space-x-4">
+            <Avatar>
+              <AvatarImage src="/avatars/01.png" alt="Image" />
+              <AvatarFallback>OM</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">Sofia Davis</p>
+              <p className="text-sm text-muted-foreground">m@example.com</p>
+            </div>
+          </div>
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon"
+                  variant="outline"
+                  className="ml-auto rounded-full"
+                  onClick={() => setOpen(true)}
+                >
+                  <Plus />
+                  <span className="sr-only">New message</span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent sideOffset={10}>New message</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {messages.map((message, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
+                  message.role === "user"
+                    ? "ml-auto bg-primary text-primary-foreground"
+                    : "bg-muted"
+                )}
+              >
+                {message.content}
+              </div>
+            ))}
+          </div>
+        </CardContent>
+        <CardFooter>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              if (inputLength === 0) return
+              setMessages([
+                ...messages,
+                {
+                  role: "user",
+                  content: input,
+                },
+              ])
+              setInput("")
+            }}
+            className="flex w-full items-center space-x-2"
+          >
+            <Input
+              id="message"
+              placeholder="Type your message..."
+              className="flex-1"
+              autoComplete="off"
+              value={input}
+              onChange={(event) => setInput(event.target.value)}
+            />
+            <Button type="submit" size="icon" disabled={inputLength === 0}>
+              <Send />
+              <span className="sr-only">Send</span>
+            </Button>
+          </form>
+        </CardFooter>
+      </Card>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="gap-0 p-0 outline-none">
+          <DialogHeader className="px-4 pb-4 pt-5">
+            <DialogTitle>New message</DialogTitle>
+            <DialogDescription>
+              Invite a user to this thread. This will create a new group
+              message.
+            </DialogDescription>
+          </DialogHeader>
+          <Command className="overflow-hidden rounded-t-none border-t bg-transparent">
+            <CommandInput placeholder="Search user..." />
+            <CommandList>
+              <CommandEmpty>No users found.</CommandEmpty>
+              <CommandGroup className="p-2">
+                {users.map((user) => (
+                  <CommandItem
+                    key={user.email}
+                    className="flex items-center px-2"
+                    onSelect={() => {
+                      if (selectedUsers.includes(user)) {
+                        return setSelectedUsers(
+                          selectedUsers.filter(
+                            (selectedUser) => selectedUser !== user
+                          )
+                        )
+                      }
+
+                      return setSelectedUsers(
+                        [...users].filter((u) =>
+                          [...selectedUsers, user].includes(u)
+                        )
+                      )
+                    }}
+                  >
+                    <Avatar>
+                      <AvatarImage src={user.avatar} alt="Image" />
+                      <AvatarFallback>{user.name[0]}</AvatarFallback>
+                    </Avatar>
+                    <div className="ml-2">
+                      <p className="text-sm font-medium leading-none">
+                        {user.name}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {user.email}
+                      </p>
+                    </div>
+                    {selectedUsers.includes(user) ? (
+                      <Check className="ml-auto flex h-5 w-5 text-primary" />
+                    ) : null}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+          <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
+            {selectedUsers.length > 0 ? (
+              <div className="flex -space-x-2 overflow-hidden">
+                {selectedUsers.map((user) => (
+                  <Avatar
+                    key={user.email}
+                    className="inline-block border-2 border-background"
+                  >
+                    <AvatarImage src={user.avatar} />
+                    <AvatarFallback>{user.name[0]}</AvatarFallback>
+                  </Avatar>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                Select users to add to this thread.
+              </p>
+            )}
+            <Button
+              disabled={selectedUsers.length < 2}
+              onClick={() => {
+                setOpen(false)
+              }}
+            >
+              Continue
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/www/registry/new-york/example/cards/cookie-settings.tsx b/apps/www/components/cards/cookie-settings.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/cards/cookie-settings.tsx
rename to apps/www/components/cards/cookie-settings.tsx
diff --git a/apps/www/components/cards/create-account.tsx b/apps/www/components/cards/create-account.tsx
new file mode 100644
index 00000000000..566f9b46244
--- /dev/null
+++ b/apps/www/components/cards/create-account.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { Icons } from "@/components/icons"
+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 function CardsCreateAccount() {
+  return (
+    <Card>
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl">Create an account</CardTitle>
+        <CardDescription>
+          Enter your email below to create your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="grid grid-cols-2 gap-6">
+          <Button variant="outline">
+            <Icons.gitHub />
+            GitHub
+          </Button>
+          <Button variant="outline">
+            <Icons.google />
+            Google
+          </Button>
+        </div>
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-card px-2 text-muted-foreground">
+              Or continue with
+            </span>
+          </div>
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Create account</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/components/cards/data-table.tsx b/apps/www/components/cards/data-table.tsx
new file mode 100644
index 00000000000..d712100d8e5
--- /dev/null
+++ b/apps/www/components/cards/data-table.tsx
@@ -0,0 +1,325 @@
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Input } from "@/registry/new-york/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/ui/table"
+
+const data: Payment[] = [
+  {
+    id: "m5gr84i9",
+    amount: 316,
+    status: "success",
+    email: "ken99@example.com",
+  },
+  {
+    id: "3u1reuv4",
+    amount: 242,
+    status: "success",
+    email: "Abe45@example.com",
+  },
+  {
+    id: "derv1ws0",
+    amount: 837,
+    status: "processing",
+    email: "Monserrat44@example.com",
+  },
+  {
+    id: "bhqecj4p",
+    amount: 721,
+    status: "failed",
+    email: "carmella@example.com",
+  },
+]
+
+export type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <div className="capitalize">{row.getValue("status")}</div>
+    ),
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <ArrowUpDown />
+        </Button>
+      )
+    },
+    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
+  },
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"))
+
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount)
+
+      return <div className="text-right font-medium">{formatted}</div>
+    },
+  },
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(payment.id)}
+            >
+              Copy payment ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>View customer</DropdownMenuItem>
+            <DropdownMenuItem>View payment details</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]
+
+export function CardsDataTable() {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-xl">Payments</CardTitle>
+        <CardDescription>Manage your payments.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="mb-4 flex items-center gap-4">
+          <Input
+            placeholder="Filter emails..."
+            value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+            onChange={(event) =>
+              table.getColumn("email")?.setFilterValue(event.target.value)
+            }
+            className="max-w-sm"
+          />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="ml-auto">
+                Columns <ChevronDown />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) =>
+                        column.toggleVisibility(!!value)
+                      }
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <div className="overflow-hidden rounded-md border">
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <TableHead
+                        key={header.id}
+                        className="[&:has([role=checkbox])]:pl-3"
+                      >
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                      </TableHead>
+                    )
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        className="[&:has([role=checkbox])]:pl-3"
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+        <div className="flex items-center justify-end space-x-2 pt-4">
+          <div className="flex-1 text-sm text-muted-foreground">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+          <div className="space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/components/cards/index.tsx b/apps/www/components/cards/index.tsx
new file mode 100644
index 00000000000..b3df1daf6f8
--- /dev/null
+++ b/apps/www/components/cards/index.tsx
@@ -0,0 +1,63 @@
+import { CardsActivityGoal } from "@/components/cards/activity-goal"
+import { CardsCalendar } from "@/components/cards/calendar"
+import { CardsChat } from "@/components/cards/chat"
+import { CardsCookieSettings } from "@/components/cards/cookie-settings"
+import { CardsCreateAccount } from "@/components/cards/create-account"
+import { CardsDataTable } from "@/components/cards/data-table"
+import { CardsMetric } from "@/components/cards/metric"
+import { CardsPaymentMethod } from "@/components/cards/payment-method"
+import { CardsReportIssue } from "@/components/cards/report-issue"
+import { CardsShare } from "@/components/cards/share"
+import { CardsStats } from "@/components/cards/stats"
+import { CardsTeamMembers } from "@/components/cards/team-members"
+
+export function CardsDemo() {
+  return (
+    <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
+      <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
+        <CardsStats />
+        <div className="grid gap-1 sm:grid-cols-[260px_1fr] md:hidden">
+          <CardsCalendar />
+          <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
+            <CardsActivityGoal />
+          </div>
+          <div className="pt-3 sm:col-span-2 xl:pt-4">
+            <CardsMetric />
+          </div>
+        </div>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+          <div className="space-y-4 xl:space-y-4">
+            <CardsTeamMembers />
+            <CardsCookieSettings />
+            <CardsPaymentMethod />
+          </div>
+          <div className="space-y-4 xl:space-y-4">
+            <CardsChat />
+            <CardsCreateAccount />
+            <div className="hidden xl:block">
+              <CardsReportIssue />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
+        <div className="hidden gap-1 sm:grid-cols-[260px_1fr] md:grid">
+          <CardsCalendar />
+          <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
+            <CardsActivityGoal />
+          </div>
+          <div className="pt-3 sm:col-span-2 xl:pt-3">
+            <CardsMetric />
+          </div>
+        </div>
+        <div className="hidden md:block">
+          <CardsDataTable />
+        </div>
+        <CardsShare />
+        <div className="xl:hidden">
+          <CardsReportIssue />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/components/cards/metric.tsx b/apps/www/components/cards/metric.tsx
new file mode 100644
index 00000000000..e25f005c719
--- /dev/null
+++ b/apps/www/components/cards/metric.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { Line, LineChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+const data = [
+  {
+    average: 400,
+    today: 240,
+  },
+  {
+    average: 300,
+    today: 139,
+  },
+  {
+    average: 200,
+    today: 980,
+  },
+  {
+    average: 278,
+    today: 390,
+  },
+  {
+    average: 189,
+    today: 480,
+  },
+  {
+    average: 239,
+    today: 380,
+  },
+  {
+    average: 349,
+    today: 430,
+  },
+]
+
+const chartConfig = {
+  today: {
+    label: "Today",
+    color: "hsl(var(--primary))",
+  },
+  average: {
+    label: "Average",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export function CardsMetric() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Exercise Minutes</CardTitle>
+        <CardDescription>
+          Your exercise minutes are ahead of where you normally are.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-4">
+        <ChartContainer config={chartConfig} className="w-full md:h-[200px]">
+          <LineChart
+            data={data}
+            margin={{
+              top: 5,
+              right: 10,
+              left: 10,
+              bottom: 0,
+            }}
+          >
+            <Line
+              type="monotone"
+              strokeWidth={2}
+              dataKey="average"
+              stroke="var(--color-average)"
+              strokeOpacity={0.5}
+              activeDot={{
+                r: 6,
+                fill: "var(--color-average)",
+              }}
+            />
+            <Line
+              type="monotone"
+              dataKey="today"
+              strokeWidth={2}
+              stroke="var(--color-today)"
+              activeDot={{
+                r: 8,
+                style: { fill: "var(--color-today)" },
+              }}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/example/cards/payment-method.tsx b/apps/www/components/cards/payment-method.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/cards/payment-method.tsx
rename to apps/www/components/cards/payment-method.tsx
diff --git a/apps/www/components/cards/report-issue.tsx b/apps/www/components/cards/report-issue.tsx
new file mode 100644
index 00000000000..4a58245e553
--- /dev/null
+++ b/apps/www/components/cards/report-issue.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import * as React from "react"
+
+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"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+import { Textarea } from "@/registry/new-york/ui/textarea"
+
+export function CardsReportIssue() {
+  const id = React.useId()
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Report an issue</CardTitle>
+        <CardDescription>
+          What area are you having problems with?
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="grid gap-2">
+            <Label htmlFor={`area-${id}`}>Area</Label>
+            <Select defaultValue="billing">
+              <SelectTrigger id={`area-${id}`} aria-label="Area">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="team">Team</SelectItem>
+                <SelectItem value="billing">Billing</SelectItem>
+                <SelectItem value="account">Account</SelectItem>
+                <SelectItem value="deployments">Deployments</SelectItem>
+                <SelectItem value="support">Support</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor={`security-level-${id}`}>Security Level</Label>
+            <Select defaultValue="2">
+              <SelectTrigger
+                id={`security-level-${id}`}
+                className="line-clamp-1 w-full truncate"
+                aria-label="Security Level"
+              >
+                <SelectValue placeholder="Select level" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">Severity 1 (Highest)</SelectItem>
+                <SelectItem value="2">Severity 2</SelectItem>
+                <SelectItem value="3">Severity 3</SelectItem>
+                <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor={`subject-${id}`}>Subject</Label>
+          <Input id={`subject-${id}`} placeholder="I need help with..." />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor={`description-${id}`}>Description</Label>
+          <Textarea
+            id={`description-${id}`}
+            placeholder="Please include all information relevant to your issue."
+          />
+        </div>
+      </CardContent>
+      <CardFooter className="justify-between space-x-2">
+        <Button variant="ghost" size="sm">
+          Cancel
+        </Button>
+        <Button size="sm">Submit</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/components/cards/share.tsx b/apps/www/components/cards/share.tsx
new file mode 100644
index 00000000000..2410401c90e
--- /dev/null
+++ b/apps/www/components/cards/share.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+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"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+import { Separator } from "@/registry/new-york/ui/separator"
+
+export function CardsShare() {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle>Share this document</CardTitle>
+        <CardDescription>
+          Anyone with the link can view this document.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex space-x-2">
+          <Label htmlFor="link" className="sr-only">
+            Link
+          </Label>
+          <Input
+            id="link"
+            value="http://example.com/link/to/document"
+            readOnly
+          />
+          <Button className="shrink-0">Copy Link</Button>
+        </div>
+        <Separator className="my-4" />
+        <div className="space-y-4">
+          <div className="text-sm font-medium">People with access</div>
+          <div className="grid gap-6">
+            <div className="flex items-center justify-between space-x-4">
+              <div className="flex items-center space-x-4">
+                <Avatar>
+                  <AvatarImage src="/avatars/03.png" alt="Image" />
+                  <AvatarFallback>OM</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-medium leading-none">
+                    Olivia Martin
+                  </p>
+                  <p className="text-sm text-muted-foreground">m@example.com</p>
+                </div>
+              </div>
+              <Select defaultValue="edit">
+                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="edit">Can edit</SelectItem>
+                  <SelectItem value="view">Can view</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+              <div className="flex items-center space-x-4">
+                <Avatar>
+                  <AvatarImage src="/avatars/05.png" alt="Image" />
+                  <AvatarFallback>IN</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-medium leading-none">
+                    Isabella Nguyen
+                  </p>
+                  <p className="text-sm text-muted-foreground">b@example.com</p>
+                </div>
+              </div>
+              <Select defaultValue="view">
+                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="edit">Can edit</SelectItem>
+                  <SelectItem value="view">Can view</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+              <div className="flex items-center space-x-4">
+                <Avatar>
+                  <AvatarImage src="/avatars/01.png" alt="Image" />
+                  <AvatarFallback>SD</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-medium leading-none">
+                    Sofia Davis
+                  </p>
+                  <p className="text-sm text-muted-foreground">p@example.com</p>
+                </div>
+              </div>
+              <Select defaultValue="view">
+                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="edit">Can edit</SelectItem>
+                  <SelectItem value="view">Can view</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/components/cards/stats.tsx b/apps/www/components/cards/stats.tsx
new file mode 100644
index 00000000000..d50ad2d24c8
--- /dev/null
+++ b/apps/www/components/cards/stats.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import { Bar, BarChart, Line, LineChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart"
+
+const data = [
+  {
+    revenue: 10400,
+    subscription: 240,
+  },
+  {
+    revenue: 14405,
+    subscription: 300,
+  },
+  {
+    revenue: 9400,
+    subscription: 200,
+  },
+  {
+    revenue: 8200,
+    subscription: 278,
+  },
+  {
+    revenue: 7000,
+    subscription: 189,
+  },
+  {
+    revenue: 9600,
+    subscription: 239,
+  },
+  {
+    revenue: 11244,
+    subscription: 278,
+  },
+  {
+    revenue: 26475,
+    subscription: 189,
+  },
+]
+
+const chartConfig = {
+  revenue: {
+    label: "Revenue",
+    color: "hsl(var(--primary))",
+  },
+  subscription: {
+    label: "Subscriptions",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export function CardsStats() {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-normal">Total Revenue</CardTitle>
+        </CardHeader>
+        <CardContent className="pb-0">
+          <div className="text-2xl font-bold">$15,231.89</div>
+          <p className="text-xs text-muted-foreground">
+            +20.1% from last month
+          </p>
+          <ChartContainer config={chartConfig} className="h-[80px] w-full">
+            <LineChart
+              data={data}
+              margin={{
+                top: 5,
+                right: 10,
+                left: 10,
+                bottom: 0,
+              }}
+            >
+              <Line
+                type="monotone"
+                strokeWidth={2}
+                dataKey="revenue"
+                stroke="var(--color-revenue)"
+                activeDot={{
+                  r: 6,
+                }}
+              />
+            </LineChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-normal">Subscriptions</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">+2350</div>
+          <p className="text-xs text-muted-foreground">
+            +180.1% from last month
+          </p>
+          <ChartContainer config={chartConfig} className="mt-2 h-[80px] w-full">
+            <BarChart data={data}>
+              <Bar
+                dataKey="subscription"
+                fill="var(--color-subscription)"
+                radius={4}
+              />
+            </BarChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/www/components/cards/team-members.tsx b/apps/www/components/cards/team-members.tsx
new file mode 100644
index 00000000000..fc834a21040
--- /dev/null
+++ b/apps/www/components/cards/team-members.tsx
@@ -0,0 +1,206 @@
+"use client"
+
+import { ChevronDown } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export function CardsTeamMembers() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Team Members</CardTitle>
+        <CardDescription>
+          Invite your team members to collaborate.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <div className="flex items-center justify-between space-x-4">
+          <div className="flex items-center space-x-4">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src="/avatars/01.png" alt="Image" />
+              <AvatarFallback>OM</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">Sofia Davis</p>
+              <p className="text-sm text-muted-foreground">m@example.com</p>
+            </div>
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="ml-auto">
+                Owner <ChevronDown className="text-muted-foreground" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="end">
+              <Command>
+                <CommandInput placeholder="Select new role..." />
+                <CommandList>
+                  <CommandEmpty>No roles found.</CommandEmpty>
+                  <CommandGroup>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Viewer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view and comment.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Developer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and edit.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Billing</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and manage billing.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Owner</p>
+                      <p className="text-sm text-muted-foreground">
+                        Admin-level access to all resources.
+                      </p>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex items-center justify-between space-x-4">
+          <div className="flex items-center space-x-4">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src="/avatars/02.png" alt="Image" />
+              <AvatarFallback>JL</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">Jackson Lee</p>
+              <p className="text-sm text-muted-foreground">p@example.com</p>
+            </div>
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="ml-auto">
+                Member <ChevronDown className="text-muted-foreground" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="end">
+              <Command>
+                <CommandInput placeholder="Select new role..." />
+                <CommandList>
+                  <CommandEmpty>No roles found.</CommandEmpty>
+                  <CommandGroup className="p-1.5">
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Viewer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view and comment.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Developer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and edit.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Billing</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and manage billing.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Owner</p>
+                      <p className="text-sm text-muted-foreground">
+                        Admin-level access to all resources.
+                      </p>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex items-center justify-between space-x-4">
+          <div className="flex items-center space-x-4">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src="/avatars/03.png" alt="Image" />
+              <AvatarFallback>IN</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">
+                Isabella Nguyen
+              </p>
+              <p className="text-sm text-muted-foreground">i@example.com</p>
+            </div>
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="ml-auto">
+                Member <ChevronDown className="text-muted-foreground" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="end">
+              <Command>
+                <CommandInput placeholder="Select new role..." />
+                <CommandList>
+                  <CommandEmpty>No roles found.</CommandEmpty>
+                  <CommandGroup className="p-1.5">
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Viewer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view and comment.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Developer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and edit.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Billing</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and manage billing.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Owner</p>
+                      <p className="text-sm text-muted-foreground">
+                        Admin-level access to all resources.
+                      </p>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/components/chart-code-viewer.tsx b/apps/www/components/chart-code-viewer.tsx
index 5806fe265af..1d6a3a06c7c 100644
--- a/apps/www/components/chart-code-viewer.tsx
+++ b/apps/www/components/chart-code-viewer.tsx
@@ -3,7 +3,8 @@ import * as React from "react"
 import { cn } from "@/lib/utils"
 import { useMediaQuery } from "@/hooks/use-media-query"
 import { useThemesConfig } from "@/hooks/use-themes-config"
-import { BlockCopyButton } from "@/components/block-copy-button"
+import { ChartCopyButton } from "@/components/chart-copy-button"
+import { Chart } from "@/components/chart-display"
 import { V0Button } from "@/components/v0-button"
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -18,13 +19,14 @@ import {
   TabsList,
   TabsTrigger,
 } from "@/registry/new-york/ui/tabs"
-import { Block } from "@/registry/schema"
 
 export function ChartCodeViewer({
   chart,
   className,
   children,
-}: { chart: Block } & React.ComponentProps<"div">) {
+}: {
+  chart: Chart
+} & React.ComponentProps<"div">) {
   const [tab, setTab] = React.useState("code")
   const { themesConfig } = useThemesConfig()
   const isDesktop = useMediaQuery("(min-width: 768px)")
@@ -85,25 +87,20 @@ ${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
           </TabsList>
           {tab === "code" && (
             <div className="ml-auto flex items-center justify-center gap-2">
-              <BlockCopyButton
+              <ChartCopyButton
                 event="copy_chart_code"
                 name={chart.name}
-                code={chart.code}
+                code={chart.files?.[0]?.content ?? ""}
               />
               <V0Button
                 id={`v0-button-${chart.name}`}
-                block={{
-                  name: chart.name,
-                  description: chart.description || "Edit in v0",
-                  code: chart.code,
-                  style: "default",
-                }}
+                name={chart.name}
                 className="h-7"
               />
             </div>
           )}
           {tab === "theme" && (
-            <BlockCopyButton
+            <ChartCopyButton
               event="copy_chart_theme"
               name={chart.name}
               code={themeCode}
diff --git a/apps/www/components/chart-copy-button.tsx b/apps/www/components/chart-copy-button.tsx
new file mode 100644
index 00000000000..7bca49aaa39
--- /dev/null
+++ b/apps/www/components/chart-copy-button.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ClipboardIcon } from "lucide-react"
+
+import { Event, trackEvent } from "@/lib/events"
+import { cn } from "@/lib/utils"
+import { Button, ButtonProps } from "@/registry/new-york/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york/ui/tooltip"
+
+export function ChartCopyButton({
+  event,
+  name,
+  code,
+  className,
+  ...props
+}: {
+  event: Event["name"]
+  name: string
+  code: string
+} & ButtonProps) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 2000)
+  }, [hasCopied])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          size="icon"
+          variant="outline"
+          className={cn(
+            "[&_svg]-h-3.5 h-7 w-7 rounded-[6px] [&_svg]:w-3.5",
+            className
+          )}
+          onClick={() => {
+            navigator.clipboard.writeText(code)
+            trackEvent({
+              name: event,
+              properties: {
+                name,
+              },
+            })
+            setHasCopied(true)
+          }}
+          {...props}
+        >
+          <span className="sr-only">Copy</span>
+          {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent className="bg-black text-white">Copy code</TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/www/components/chart-display.tsx b/apps/www/components/chart-display.tsx
index 4945a60bd1a..6bfb9e820f8 100644
--- a/apps/www/components/chart-display.tsx
+++ b/apps/www/components/chart-display.tsx
@@ -1,19 +1,27 @@
-import { getBlock } from "@/lib/blocks"
+import * as React from "react"
+import { registryItemSchema } from "shadcn/schema"
+import { z } from "zod"
+
+import { highlightCode } from "@/lib/highlight-code"
+import { getRegistryItem } from "@/lib/registry"
 import { cn } from "@/lib/utils"
 import { ChartToolbar } from "@/components/chart-toolbar"
 
+export type Chart = z.infer<typeof registryItemSchema> & {
+  highlightedCode: string
+}
+
 export async function ChartDisplay({
   name,
   children,
   className,
 }: { name: string } & React.ComponentProps<"div">) {
-  const chart = await getBlock(name)
-
-  // Cannot (and don't need to) pass to the client.
-  delete chart?.component
-  delete chart?.chunks
+  const chart = await getCachedRegistryItem(name)
+  const highlightedCode = await getChartHighlightedCode(
+    chart?.files?.[0]?.content ?? ""
+  )
 
-  if (!chart) {
+  if (!chart || !highlightedCode) {
     return null
   }
 
@@ -25,7 +33,7 @@ export async function ChartDisplay({
       )}
     >
       <ChartToolbar
-        chart={chart}
+        chart={{ ...chart, highlightedCode }}
         className="relative z-20 flex justify-end border-b bg-card px-3 py-2.5 text-card-foreground"
       >
         {children}
@@ -36,3 +44,11 @@ export async function ChartDisplay({
     </div>
   )
 }
+
+const getCachedRegistryItem = React.cache(async (name: string) => {
+  return await getRegistryItem(name)
+})
+
+const getChartHighlightedCode = React.cache(async (content: string) => {
+  return await highlightCode(content)
+})
diff --git a/apps/www/components/chart-toolbar.tsx b/apps/www/components/chart-toolbar.tsx
index bd7b07b4c45..34fe566f7e8 100644
--- a/apps/www/components/chart-toolbar.tsx
+++ b/apps/www/components/chart-toolbar.tsx
@@ -1,10 +1,8 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { BlockCopyButton } from "@/components/block-copy-button"
 import { ChartCodeViewer } from "@/components/chart-code-viewer"
 import { Separator } from "@/registry/new-york/ui/separator"
-import { Block } from "@/registry/schema"
 
 import "@/styles/mdx.css"
 import {
@@ -17,21 +15,26 @@ import {
   Radar,
 } from "lucide-react"
 
+import { ChartCopyButton } from "@/components/chart-copy-button"
+import { Chart } from "@/components/chart-display"
+
 export function ChartToolbar({
   chart,
   className,
   children,
-}: { chart: Block } & React.ComponentProps<"div">) {
+}: {
+  chart: Chart
+} & React.ComponentProps<"div">) {
   return (
     <div className={cn("flex items-center gap-2", className)}>
       <div className="flex items-center gap-1.5 pl-1 text-[13px] text-muted-foreground [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]">
         <ChartTitle chart={chart} />
       </div>
       <div className="ml-auto flex items-center gap-2 [&>form]:flex">
-        <BlockCopyButton
+        <ChartCopyButton
           event="copy_chart_code"
           name={chart.name}
-          code={chart.code}
+          code={chart.files?.[0]?.content ?? ""}
           className="[&_svg]-h-3 h-6 w-6 rounded-[6px] bg-transparent text-foreground shadow-none hover:bg-muted dark:text-foreground [&_svg]:w-3"
         />
         <Separator orientation="vertical" className="mx-0 hidden h-4 md:flex" />
@@ -41,14 +44,14 @@ export function ChartToolbar({
   )
 }
 
-function ChartTitle({ chart }: { chart: Block }) {
-  const { subcategory } = chart
+function ChartTitle({ chart }: { chart: Chart }) {
+  const { categories } = chart
 
-  if (!subcategory) {
+  if (!categories?.length) {
     return null
   }
 
-  if (subcategory === "Line") {
+  if (categories.includes("charts-line")) {
     return (
       <>
         <LineChart /> Chart
@@ -56,7 +59,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Bar") {
+  if (categories.includes("charts-bar")) {
     return (
       <>
         <BarChartBig /> Chart
@@ -64,7 +67,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Pie") {
+  if (categories.includes("charts-pie")) {
     return (
       <>
         <PieChart /> Chart
@@ -72,7 +75,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Area") {
+  if (categories.includes("charts-area")) {
     return (
       <>
         <AreaChart /> Chart
@@ -80,7 +83,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Radar") {
+  if (categories.includes("charts-radar")) {
     return (
       <>
         <Hexagon /> Chart
@@ -88,7 +91,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Radial") {
+  if (categories.includes("charts-radial")) {
     return (
       <>
         <Radar /> Chart
@@ -96,7 +99,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Tooltip") {
+  if (categories.includes("charts-tooltip")) {
     return (
       <>
         <MousePointer2 />
@@ -105,5 +108,5 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  return subcategory
+  return categories[0]
 }
diff --git a/apps/www/components/charts-nav.tsx b/apps/www/components/charts-nav.tsx
index b2cbd9f10a7..5e3c43de895 100644
--- a/apps/www/components/charts-nav.tsx
+++ b/apps/www/components/charts-nav.tsx
@@ -7,6 +7,10 @@ import { cn } from "@/lib/utils"
 import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
 
 const links = [
+  {
+    name: "All Charts",
+    href: "/charts",
+  },
   {
     name: "Area Chart",
     href: "/charts#area-chart",
@@ -51,10 +55,10 @@ export function ChartsNav({
             href={example.href}
             key={example.href}
             className={cn(
-              "flex h-7 shrink-0 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary",
+              "flex h-7 shrink-0 items-center justify-center rounded-full px-4 text-center text-sm font-medium transition-colors hover:text-primary",
               pathname?.startsWith(example.href) ||
-                (index === 0 && pathname === "/")
-                ? "bg-muted font-medium text-primary"
+                (index === 0 && pathname === "/charts")
+                ? "bg-muted text-primary"
                 : "text-muted-foreground"
             )}
           >
diff --git a/apps/www/components/code-block-command.tsx b/apps/www/components/code-block-command.tsx
new file mode 100644
index 00000000000..854aa220950
--- /dev/null
+++ b/apps/www/components/code-block-command.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ClipboardIcon } from "lucide-react"
+
+import { NpmCommands } from "@/types/unist"
+import { useConfig } from "@/hooks/use-config"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Tabs } from "@/registry/default/ui/tabs"
+import { Button } from "@/registry/new-york/ui/button"
+import { TabsContent, TabsList, TabsTrigger } from "@/registry/new-york/ui/tabs"
+
+export function CodeBlockCommand({
+  __npmCommand__,
+  __yarnCommand__,
+  __pnpmCommand__,
+  __bunCommand__,
+}: React.ComponentProps<"pre"> & NpmCommands) {
+  const [config, setConfig] = useConfig()
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const packageManager = config.packageManager || "pnpm"
+  const tabs = React.useMemo(() => {
+    return {
+      pnpm: __pnpmCommand__,
+      npm: __npmCommand__,
+      yarn: __yarnCommand__,
+      bun: __bunCommand__,
+    }
+  }, [__npmCommand__, __pnpmCommand__, __yarnCommand__, __bunCommand__])
+
+  const copyCommand = React.useCallback(() => {
+    const command = tabs[packageManager]
+
+    if (!command) {
+      return
+    }
+
+    copyToClipboardWithMeta(command, {
+      name: "copy_npm_command",
+      properties: {
+        command,
+        pm: packageManager,
+      },
+    })
+    setHasCopied(true)
+  }, [packageManager, tabs])
+
+  return (
+    <div className="relative mt-6 max-h-[650px] overflow-x-auto rounded-xl bg-zinc-950 dark:bg-zinc-900">
+      <Tabs
+        value={packageManager}
+        onValueChange={(value) => {
+          setConfig({
+            ...config,
+            packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
+          })
+        }}
+      >
+        <div className="flex items-center justify-between border-b border-zinc-800 bg-zinc-900 px-3 pt-2.5">
+          <TabsList className="h-7 translate-y-[2px] gap-3 bg-transparent p-0 pl-1">
+            {Object.entries(tabs).map(([key, value]) => {
+              return (
+                <TabsTrigger
+                  key={key}
+                  value={key}
+                  className="rounded-none border-b border-transparent bg-transparent p-0 pb-1.5 font-mono text-zinc-400 data-[state=active]:border-b-zinc-50 data-[state=active]:bg-transparent data-[state=active]:text-zinc-50"
+                >
+                  {key}
+                </TabsTrigger>
+              )
+            })}
+          </TabsList>
+        </div>
+        <div className="overflow-x-auto">
+          {Object.entries(tabs).map(([key, value]) => {
+            return (
+              <TabsContent key={key} value={key} className="mt-0">
+                <pre className="px-4 py-5">
+                  <code
+                    className="relative font-mono text-sm leading-none"
+                    data-language="bash"
+                  >
+                    {value}
+                  </code>
+                </pre>
+              </TabsContent>
+            )
+          })}
+        </div>
+      </Tabs>
+      <Button
+        size="icon"
+        variant="ghost"
+        className="absolute right-2.5 top-2 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3"
+        onClick={copyCommand}
+      >
+        <span className="sr-only">Copy</span>
+        {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/www/components/code-tabs.tsx b/apps/www/components/code-tabs.tsx
new file mode 100644
index 00000000000..79655cf519c
--- /dev/null
+++ b/apps/www/components/code-tabs.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+
+import { useConfig } from "@/hooks/use-config"
+import { Tabs } from "@/registry/default/ui/tabs"
+
+export function CodeTabs({ children }: React.ComponentProps<typeof Tabs>) {
+  const [config, setConfig] = useConfig()
+
+  const installationType = React.useMemo(() => {
+    return config.installationType || "cli"
+  }, [config])
+
+  return (
+    <Tabs
+      value={installationType}
+      onValueChange={(value) =>
+        setConfig({ ...config, installationType: value as "cli" | "manual" })
+      }
+      className="relative mt-6 w-full"
+    >
+      {children}
+    </Tabs>
+  )
+}
diff --git a/apps/www/components/color.tsx b/apps/www/components/color.tsx
index f4af2889bc4..fffca62c60d 100644
--- a/apps/www/components/color.tsx
+++ b/apps/www/components/color.tsx
@@ -7,7 +7,6 @@ import { type Color } from "@/lib/colors"
 import { trackEvent } from "@/lib/events"
 import { useColors } from "@/hooks/use-colors"
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
-import { copyToClipboardWithMeta } from "@/components/copy-button"
 
 export function Color({ color }: { color: Color }) {
   const { format } = useColors()
diff --git a/apps/www/components/command-menu.tsx b/apps/www/components/command-menu.tsx
index 6ffed599821..bbcddc9e8c8 100644
--- a/apps/www/components/command-menu.tsx
+++ b/apps/www/components/command-menu.tsx
@@ -3,13 +3,7 @@
 import * as React from "react"
 import { useRouter } from "next/navigation"
 import { type DialogProps } from "@radix-ui/react-dialog"
-import {
-  CircleIcon,
-  FileIcon,
-  LaptopIcon,
-  MoonIcon,
-  SunIcon,
-} from "@radix-ui/react-icons"
+import { Circle, File, Laptop, Moon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { docsConfig } from "@/config/docs"
@@ -61,7 +55,7 @@ export function CommandMenu({ ...props }: DialogProps) {
       <Button
         variant="outline"
         className={cn(
-          "relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
+          "relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64"
         )}
         onClick={() => setOpen(true)}
         {...props}
@@ -87,7 +81,7 @@ export function CommandMenu({ ...props }: DialogProps) {
                     runCommand(() => router.push(navItem.href as string))
                   }}
                 >
-                  <FileIcon className="mr-2 h-4 w-4" />
+                  <File />
                   {navItem.title}
                 </CommandItem>
               ))}
@@ -103,7 +97,7 @@ export function CommandMenu({ ...props }: DialogProps) {
                   }}
                 >
                   <div className="mr-2 flex h-4 w-4 items-center justify-center">
-                    <CircleIcon className="h-3 w-3" />
+                    <Circle className="h-3 w-3" />
                   </div>
                   {navItem.title}
                 </CommandItem>
@@ -113,15 +107,15 @@ export function CommandMenu({ ...props }: DialogProps) {
           <CommandSeparator />
           <CommandGroup heading="Theme">
             <CommandItem onSelect={() => runCommand(() => setTheme("light"))}>
-              <SunIcon className="mr-2 h-4 w-4" />
+              <Sun />
               Light
             </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme("dark"))}>
-              <MoonIcon className="mr-2 h-4 w-4" />
+              <Moon />
               Dark
             </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme("system"))}>
-              <LaptopIcon className="mr-2 h-4 w-4" />
+              <Laptop />
               System
             </CommandItem>
           </CommandGroup>
diff --git a/apps/www/components/component-preview.tsx b/apps/www/components/component-preview.tsx
index f21523ee41b..b0e8105e726 100644
--- a/apps/www/components/component-preview.tsx
+++ b/apps/www/components/component-preview.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import Image from "next/image"
 import { Index } from "@/__registry__"
 
 import { cn } from "@/lib/utils"
@@ -25,10 +26,12 @@ interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   align?: "center" | "start" | "end"
   description?: string
   hideCode?: boolean
+  type?: "block" | "component" | "example"
 }
 
 export function ComponentPreview({
   name,
+  type,
   children,
   className,
   extractClassname,
@@ -73,6 +76,33 @@ export function ComponentPreview({
     }
   }, [Code])
 
+  if (type === "block") {
+    return (
+      <div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border">
+        <Image
+          src={`/r/styles/${config.style}/${name}-light.png`}
+          alt={name}
+          width={1440}
+          height={900}
+          className="absolute left-0 top-0 z-20 w-[970px] max-w-none bg-background dark:hidden sm:w-[1280px] md:hidden md:dark:hidden"
+        />
+        <Image
+          src={`/r/styles/${config.style}/${name}-dark.png`}
+          alt={name}
+          width={1440}
+          height={900}
+          className="absolute left-0 top-0 z-20 hidden w-[970px] max-w-none bg-background dark:block sm:w-[1280px] md:hidden md:dark:hidden"
+        />
+        <div className="absolute inset-0 hidden w-[1600px] bg-background md:block">
+          <iframe
+            src={`/view/styles/${config.style}/${name}`}
+            className="size-full"
+          />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div
       className={cn("group relative my-4 flex flex-col space-y-2", className)}
@@ -101,16 +131,7 @@ export function ComponentPreview({
           <div className="flex items-center justify-between p-4">
             <StyleSwitcher />
             <div className="flex items-center gap-2">
-              {config.style === "default" && description ? (
-                <V0Button
-                  block={{
-                    code: codeString,
-                    name,
-                    style: config.style,
-                    description,
-                  }}
-                />
-              ) : null}
+              {description ? <V0Button name={name} /> : null}
               <CopyButton
                 value={codeString}
                 variant="outline"
diff --git a/apps/www/components/docs-nav.tsx b/apps/www/components/docs-nav.tsx
new file mode 100644
index 00000000000..b6ff7a4c5f2
--- /dev/null
+++ b/apps/www/components/docs-nav.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { SidebarNavItem } from "types/nav"
+
+import { type DocsConfig } from "@/config/docs"
+import { cn } from "@/lib/utils"
+
+export function DocsNav({ config }: { config: DocsConfig }) {
+  const pathname = usePathname()
+
+  const items = config.sidebarNav
+
+  return items.length ? (
+    <div className="flex flex-col gap-6">
+      {items.map((item, index) => (
+        <div key={index} className="flex flex-col gap-1">
+          <h4 className="rounded-md px-2 py-1 text-sm font-medium">
+            {item.title}{" "}
+            {item.label && (
+              <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs font-normal leading-none text-[#000000] no-underline group-hover:no-underline">
+                {item.label}
+              </span>
+            )}
+          </h4>
+          {item?.items?.length && (
+            <DocsNavItems items={item.items} pathname={pathname} />
+          )}
+        </div>
+      ))}
+    </div>
+  ) : null
+}
+
+function DocsNavItems({
+  items,
+  pathname,
+}: {
+  items: SidebarNavItem[]
+  pathname: string | null
+}) {
+  return items?.length ? (
+    <div className="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
+      {items.map((item, index) =>
+        item.href && !item.disabled ? (
+          <Link
+            key={index}
+            href={item.href}
+            className={cn(
+              "group relative flex h-8 w-full items-center rounded-lg px-2 after:absolute after:inset-x-0 after:inset-y-[-2px]  after:rounded-lg hover:bg-accent hover:text-accent-foreground ",
+              item.disabled && "cursor-not-allowed opacity-60",
+              pathname === item.href
+                ? "bg-accent font-medium text-accent-foreground"
+                : "font-normal text-foreground"
+            )}
+            target={item.external ? "_blank" : ""}
+            rel={item.external ? "noreferrer" : ""}
+          >
+            {item.title}
+            {item.label && (
+              <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
+                {item.label}
+              </span>
+            )}
+          </Link>
+        ) : (
+          <span
+            key={index}
+            className={cn(
+              "flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline",
+              item.disabled && "cursor-not-allowed opacity-60"
+            )}
+          >
+            {item.title}
+            {item.label && (
+              <span className="ml-2 rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none text-muted-foreground no-underline group-hover:no-underline">
+                {item.label}
+              </span>
+            )}
+          </span>
+        )
+      )}
+    </div>
+  ) : null
+}
diff --git a/apps/www/components/examples-nav.tsx b/apps/www/components/examples-nav.tsx
index 95d65531198..aad5337e9cd 100644
--- a/apps/www/components/examples-nav.tsx
+++ b/apps/www/components/examples-nav.tsx
@@ -2,7 +2,6 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { ArrowRightIcon } from "@radix-ui/react-icons"
 
 import { cn } from "@/lib/utils"
 import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
@@ -12,41 +11,43 @@ const examples = [
     name: "Mail",
     href: "/examples/mail",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
+    hidden: false,
   },
   {
     name: "Dashboard",
     href: "/examples/dashboard",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard",
-  },
-  {
-    name: "Cards",
-    href: "/examples/cards",
-    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/cards",
+    hidden: false,
   },
   {
     name: "Tasks",
     href: "/examples/tasks",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/tasks",
+    hidden: false,
   },
   {
     name: "Playground",
     href: "/examples/playground",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/playground",
+    hidden: false,
   },
   {
     name: "Forms",
     href: "/examples/forms",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/forms",
+    hidden: false,
   },
   {
     name: "Music",
     href: "/examples/music",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/music",
+    hidden: false,
   },
   {
     name: "Authentication",
     href: "/examples/authentication",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/authentication",
+    hidden: false,
   },
 ]
 
@@ -58,21 +59,17 @@ export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
   return (
     <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, index) => (
-            <Link
-              href={example.href}
+        <div className={cn("flex items-center", className)} {...props}>
+          <ExampleLink
+            example={{ name: "Examples", href: "/", code: "", hidden: false }}
+            isActive={pathname === "/"}
+          />
+          {examples.map((example) => (
+            <ExampleLink
               key={example.href}
-              className={cn(
-                "flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary",
-                pathname?.startsWith(example.href) ||
-                  (index === 0 && pathname === "/")
-                  ? "bg-muted font-medium text-primary"
-                  : "text-muted-foreground"
-              )}
-            >
-              {example.name}
-            </Link>
+              example={example}
+              isActive={pathname?.startsWith(example.href) ?? false}
+            />
           ))}
         </div>
         <ScrollBar orientation="horizontal" className="invisible" />
@@ -81,26 +78,25 @@ export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
   )
 }
 
-interface ExampleCodeLinkProps {
-  pathname: string | null
-}
-
-export function ExampleCodeLink({ pathname }: ExampleCodeLinkProps) {
-  const example = examples.find((example) => pathname?.startsWith(example.href))
-
-  if (!example?.code) {
+function ExampleLink({
+  example,
+  isActive,
+}: {
+  example: (typeof examples)[number]
+  isActive: boolean
+}) {
+  if (example.hidden) {
     return null
   }
 
   return (
     <Link
-      href={example?.code}
-      target="_blank"
-      rel="nofollow"
-      className="absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-medium md:flex"
+      href={example.href}
+      key={example.href}
+      className="flex h-7 items-center justify-center rounded-full px-4 text-center text-sm font-medium text-muted-foreground transition-colors hover:text-primary data-[active=true]:bg-muted data-[active=true]:text-primary"
+      data-active={isActive}
     >
-      View code
-      <ArrowRightIcon className="ml-1 h-4 w-4" />
+      {example.name}
     </Link>
   )
 }
diff --git a/apps/www/components/icons.tsx b/apps/www/components/icons.tsx
index 327ff5e3b26..ae29ba451ce 100644
--- a/apps/www/components/icons.tsx
+++ b/apps/www/components/icons.tsx
@@ -13,7 +13,7 @@ export const Icons = {
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth="16"
+        strokeWidth="32"
       />
       <line
         x1="192"
@@ -24,7 +24,7 @@ export const Icons = {
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth="16"
+        strokeWidth="32"
       />
     </svg>
   ),
diff --git a/apps/www/components/main-nav.tsx b/apps/www/components/main-nav.tsx
index efa14264908..2332c9e901e 100644
--- a/apps/www/components/main-nav.tsx
+++ b/apps/www/components/main-nav.tsx
@@ -12,18 +12,20 @@ export function MainNav() {
 
   return (
     <div className="mr-4 hidden md:flex">
-      <Link href="/" className="mr-4 flex items-center space-x-2 lg:mr-6">
+      <Link href="/" className="mr-4 flex items-center gap-2 lg:mr-6">
         <Icons.logo className="h-6 w-6" />
         <span className="hidden font-bold lg:inline-block">
           {siteConfig.name}
         </span>
       </Link>
-      <nav className="flex items-center gap-4 text-sm lg:gap-6">
+      <nav className="flex items-center gap-4 text-sm xl:gap-6">
         <Link
-          href="/docs"
+          href="/docs/installation"
           className={cn(
             "transition-colors hover:text-foreground/80",
-            pathname === "/docs" ? "text-foreground" : "text-foreground/60"
+            pathname === "/docs/installation"
+              ? "text-foreground"
+              : "text-foreground/80"
           )}
         >
           Docs
@@ -35,7 +37,7 @@ export function MainNav() {
             pathname?.startsWith("/docs/components") &&
               !pathname?.startsWith("/docs/component/chart")
               ? "text-foreground"
-              : "text-foreground/60"
+              : "text-foreground/80"
           )}
         >
           Components
@@ -46,7 +48,7 @@ export function MainNav() {
             "transition-colors hover:text-foreground/80",
             pathname?.startsWith("/blocks")
               ? "text-foreground"
-              : "text-foreground/60"
+              : "text-foreground/80"
           )}
         >
           Blocks
@@ -58,7 +60,7 @@ export function MainNav() {
             pathname?.startsWith("/docs/component/chart") ||
               pathname?.startsWith("/charts")
               ? "text-foreground"
-              : "text-foreground/60"
+              : "text-foreground/80"
           )}
         >
           Charts
@@ -69,29 +71,18 @@ export function MainNav() {
             "transition-colors hover:text-foreground/80",
             pathname?.startsWith("/themes")
               ? "text-foreground"
-              : "text-foreground/60"
+              : "text-foreground/80"
           )}
         >
           Themes
         </Link>
-        <Link
-          href="/examples"
-          className={cn(
-            "transition-colors hover:text-foreground/80",
-            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/60"
+              : "text-foreground/80"
           )}
         >
           Colors
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
index 50649437cef..f56f99d8170 100644
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -11,7 +11,9 @@ import { Event } from "@/lib/events"
 import { cn } from "@/lib/utils"
 import { useConfig } from "@/hooks/use-config"
 import { Callout } from "@/components/callout"
+import { CodeBlockCommand } from "@/components/code-block-command"
 import { CodeBlockWrapper } from "@/components/code-block-wrapper"
+import { CodeTabs } from "@/components/code-tabs"
 import { ComponentExample } from "@/components/component-example"
 import { ComponentPreview } from "@/components/component-preview"
 import { ComponentSource } from "@/components/component-source"
@@ -30,6 +32,7 @@ import {
   AlertTitle,
 } from "@/registry/new-york/ui/alert"
 import { AspectRatio } from "@/registry/new-york/ui/aspect-ratio"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Tabs,
   TabsContent,
@@ -46,6 +49,7 @@ const components = {
   Alert,
   AlertTitle,
   AlertDescription,
+  Button,
   h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
     <h1
       className={cn(
@@ -58,7 +62,7 @@ const components = {
   h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
     <h2
       className={cn(
-        "font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0",
+        "font-heading mt-16 scroll-m-20 border-b pb-4 text-xl font-semibold tracking-tight first:mt-0",
         className
       )}
       {...props}
@@ -67,7 +71,7 @@ const components = {
   h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
     <h3
       className={cn(
-        "font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
+        "font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
         className
       )}
       {...props}
@@ -108,10 +112,13 @@ const components = {
   ),
   p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
     <p
-      className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
+      className={cn("leading-[1.65rem] [&:not(:first-child)]:mt-6", className)}
       {...props}
     />
   ),
+  strong: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <strong className={cn("font-semibold", className)} {...props} />
+  ),
   ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
     <ul className={cn("my-6 ml-6 list-disc", className)} {...props} />
   ),
@@ -139,20 +146,26 @@ const components = {
     <hr className="my-4 md:my-8" {...props} />
   ),
   table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
-    <div className="my-6 w-full overflow-y-auto rounded-lg">
+    <div className="my-6 w-full overflow-y-auto">
       <table
-        className={cn("w-full overflow-hidden rounded-lg", className)}
+        className={cn(
+          "relative w-full overflow-hidden border-none text-sm",
+          className
+        )}
         {...props}
       />
     </div>
   ),
   tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
-    <tr className={cn("m-0 border-t p-0", className)} {...props} />
+    <tr
+      className={cn("last:border-b-none m-0 border-b", className)}
+      {...props}
+    />
   ),
   th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
     <th
       className={cn(
-        "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+        "px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
         className
       )}
       {...props}
@@ -161,7 +174,7 @@ const components = {
   td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
     <td
       className={cn(
-        "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+        "px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
         className
       )}
       {...props}
@@ -186,16 +199,30 @@ const components = {
     __src__?: string
     __event__?: Event["name"]
   } & NpmCommands) => {
+    const isNpmCommand =
+      __npmCommand__ && __yarnCommand__ && __pnpmCommand__ && __bunCommand__
+
+    if (isNpmCommand) {
+      return (
+        <CodeBlockCommand
+          __npmCommand__={__npmCommand__}
+          __yarnCommand__={__yarnCommand__}
+          __pnpmCommand__={__pnpmCommand__}
+          __bunCommand__={__bunCommand__}
+        />
+      )
+    }
+
     return (
       <StyleWrapper styleName={__style__}>
         <pre
           className={cn(
-            "mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900",
+            "mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-xl bg-zinc-950 py-4 dark:bg-zinc-900",
             className
           )}
           {...props}
         />
-        {__rawString__ && !__npmCommand__ && (
+        {__rawString__ && (
           <CopyButton
             value={__rawString__}
             src={__src__}
@@ -203,20 +230,6 @@ const components = {
             className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
           />
         )}
-        {__npmCommand__ &&
-          __yarnCommand__ &&
-          __pnpmCommand__ &&
-          __bunCommand__ && (
-            <CopyNpmCommandButton
-              commands={{
-                __npmCommand__,
-                __yarnCommand__,
-                __pnpmCommand__,
-                __bunCommand__,
-              }}
-              className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
-            />
-          )}
       </StyleWrapper>
     )
   },
@@ -238,6 +251,7 @@ const components = {
   CodeBlockWrapper: ({ ...props }) => (
     <CodeBlockWrapper className="rounded-md border" {...props} />
   ),
+  CodeTabs,
   Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
     <h3
       className={cn(
@@ -249,7 +263,7 @@ const components = {
   ),
   Steps: ({ ...props }) => (
     <div
-      className="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]"
+      className="[&>h3]:step steps mb-12 [counter-reset:step] md:ml-4 md:border-l md:pl-8"
       {...props}
     />
   ),
diff --git a/apps/www/components/mobile-nav.tsx b/apps/www/components/mobile-nav.tsx
index 7880d479f87..6801e0d17c8 100644
--- a/apps/www/components/mobile-nav.tsx
+++ b/apps/www/components/mobile-nav.tsx
@@ -3,68 +3,58 @@
 import * as React from "react"
 import Link, { LinkProps } from "next/link"
 import { useRouter } from "next/navigation"
-import { ViewVerticalIcon } from "@radix-ui/react-icons"
 
 import { docsConfig } from "@/config/docs"
-import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
-import { Icons } from "@/components/icons"
+import { useMetaColor } from "@/hooks/use-meta-color"
 import { Button } from "@/registry/new-york/ui/button"
-import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
 
 export function MobileNav() {
   const [open, setOpen] = React.useState(false)
+  const { setMetaColor, metaColor } = useMetaColor()
+
+  const onOpenChange = React.useCallback(
+    (open: boolean) => {
+      setOpen(open)
+      setMetaColor(open ? "#09090b" : metaColor)
+    },
+    [setMetaColor, metaColor]
+  )
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerTrigger asChild>
         <Button
           variant="ghost"
-          className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+          className="h-8 w-full gap-4 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
         >
           <svg
-            strokeWidth="1.5"
-            viewBox="0 0 24 24"
-            fill="none"
             xmlns="http://www.w3.org/2000/svg"
-            className="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            stroke="currentColor"
+            className="!size-6"
           >
             <path
-              d="M3 5H11"
-              stroke="currentColor"
-              strokeWidth="1.5"
               strokeLinecap="round"
               strokeLinejoin="round"
-            ></path>
-            <path
-              d="M3 12H16"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            ></path>
-            <path
-              d="M3 19H21"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            ></path>
+              d="M3.75 9h16.5m-16.5 6.75h16.5"
+            />
           </svg>
           <span className="sr-only">Toggle Menu</span>
+          <span className="flex h-8 flex-1 items-center justify-between rounded-md border bg-muted/50 px-2 text-sm font-normal text-muted-foreground shadow-none">
+            Search documentation...
+          </span>
         </Button>
-      </SheetTrigger>
-      <SheetContent side="left" className="pr-0">
-        <MobileLink
-          href="/"
-          className="flex items-center"
-          onOpenChange={setOpen}
-        >
-          <Icons.logo className="mr-2 h-4 w-4" />
-          <span className="font-bold">{siteConfig.name}</span>
-        </MobileLink>
-        <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+      </DrawerTrigger>
+      <DrawerContent className="max-h-[80svh] p-0">
+        <div className="overflow-auto p-6">
           <div className="flex flex-col space-y-3">
             {docsConfig.mainNav?.map(
               (item) =>
@@ -81,8 +71,8 @@ export function MobileNav() {
           </div>
           <div className="flex flex-col space-y-2">
             {docsConfig.sidebarNav.map((item, index) => (
-              <div key={index} className="flex flex-col space-y-3 pt-6">
-                <h4 className="font-medium">{item.title}</h4>
+              <div key={index} className="flex flex-col gap-4 pt-6">
+                <h4 className="text-xl font-medium">{item.title}</h4>
                 {item?.items?.length &&
                   item.items.map((item) => (
                     <React.Fragment key={item.href}>
@@ -91,7 +81,7 @@ export function MobileNav() {
                           <MobileLink
                             href={item.href}
                             onOpenChange={setOpen}
-                            className="text-muted-foreground"
+                            className="opacity-80"
                           >
                             {item.title}
                             {item.label && (
@@ -108,9 +98,9 @@ export function MobileNav() {
               </div>
             ))}
           </div>
-        </ScrollArea>
-      </SheetContent>
-    </Sheet>
+        </div>
+      </DrawerContent>
+    </Drawer>
   )
 }
 
@@ -135,7 +125,7 @@ function MobileLink({
         router.push(href.toString())
         onOpenChange?.(false)
       }}
-      className={cn(className)}
+      className={cn("text-[1.15rem]", className)}
       {...props}
     >
       {children}
diff --git a/apps/www/components/mode-switcher.tsx b/apps/www/components/mode-switcher.tsx
new file mode 100644
index 00000000000..151676d0fcd
--- /dev/null
+++ b/apps/www/components/mode-switcher.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+import { MoonIcon, SunIcon } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { META_THEME_COLORS } from "@/config/site"
+import { useMetaColor } from "@/hooks/use-meta-color"
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ModeSwitcher() {
+  const { setTheme, resolvedTheme } = useTheme()
+  const { setMetaColor } = useMetaColor()
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+    setMetaColor(
+      resolvedTheme === "dark"
+        ? META_THEME_COLORS.light
+        : META_THEME_COLORS.dark
+    )
+  }, [resolvedTheme, setTheme, setMetaColor])
+
+  return (
+    <Button
+      variant="ghost"
+      className="group/toggle h-8 w-8 px-0"
+      onClick={toggleTheme}
+    >
+      <SunIcon className="hidden [html.dark_&]:block" />
+      <MoonIcon className="hidden [html.light_&]:block" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
diff --git a/apps/www/components/mode-toggle.tsx b/apps/www/components/mode-toggle.tsx
index f5a8af9c339..04beb8748f2 100644
--- a/apps/www/components/mode-toggle.tsx
+++ b/apps/www/components/mode-toggle.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { MoonIcon, SunIcon } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { Button } from "@/registry/new-york/ui/button"
diff --git a/apps/www/components/open-in-v0-cta.tsx b/apps/www/components/open-in-v0-cta.tsx
index 5ad3c5d43e7..d064f238efa 100644
--- a/apps/www/components/open-in-v0-cta.tsx
+++ b/apps/www/components/open-in-v0-cta.tsx
@@ -12,7 +12,7 @@ export function OpenInV0Cta({ className }: React.ComponentProps<"div">) {
       )}
     >
       <div className="text-balance text-lg font-semibold leading-tight group-hover:underline">
-        Bring your app built with shadcn to life on Vercel
+        Deploy your shadcn/ui app on Vercel
       </div>
       <div>Trusted by OpenAI, Sonos, Chick-fil-A, and more.</div>
       <div>
diff --git a/apps/www/components/page-header.tsx b/apps/www/components/page-header.tsx
index 5aab0882f0c..40f94c57942 100644
--- a/apps/www/components/page-header.tsx
+++ b/apps/www/components/page-header.tsx
@@ -6,14 +6,12 @@ function PageHeader({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <section
-      className={cn(
-        "mx-auto flex flex-col items-start gap-2 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10",
-        className
-      )}
-      {...props}
-    >
-      {children}
+    <section className={cn("border-grid border-b", className)} {...props}>
+      <div className="container-wrapper">
+        <div className="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
+          {children}
+        </div>
+      </div>
     </section>
   )
 }
@@ -25,7 +23,7 @@ function PageHeaderHeading({
   return (
     <h1
       className={cn(
-        "text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]",
+        "text-2xl font-bold leading-tight tracking-tighter sm:text-3xl md:text-4xl lg:leading-[1.1]",
         className
       )}
       {...props}
@@ -40,7 +38,7 @@ function PageHeaderDescription({
   return (
     <p
       className={cn(
-        "text-balance max-w-2xl text-lg font-light text-foreground",
+        "max-w-2xl text-balance text-base font-light text-foreground sm:text-lg",
         className
       )}
       {...props}
@@ -55,7 +53,7 @@ function PageActions({
   return (
     <div
       className={cn(
-        "flex w-full items-center justify-start gap-2 py-2",
+        "flex w-full items-center justify-start gap-2 pt-2",
         className
       )}
       {...props}
diff --git a/apps/www/components/pager.tsx b/apps/www/components/pager.tsx
index 61aa58edfbb..bb304120353 100644
--- a/apps/www/components/pager.tsx
+++ b/apps/www/components/pager.tsx
@@ -1,11 +1,10 @@
 import Link from "next/link"
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
 import { Doc } from "contentlayer/generated"
+import { ChevronLeft, ChevronRight } from "lucide-react"
 import { NavItem, NavItemWithChildren } from "types/nav"
 
 import { docsConfig } from "@/config/docs"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 
 interface DocsPagerProps {
   doc: Doc
@@ -21,22 +20,20 @@ export function DocsPager({ doc }: DocsPagerProps) {
   return (
     <div className="flex flex-row items-center justify-between">
       {pager?.prev?.href && (
-        <Link
-          href={pager.prev.href}
-          className={buttonVariants({ variant: "outline" })}
-        >
-          <ChevronLeftIcon className="mr-2 h-4 w-4" />
-          {pager.prev.title}
-        </Link>
+        <Button variant="ghost" asChild>
+          <Link href={pager.prev.href}>
+            <ChevronLeft />
+            {pager.prev.title}
+          </Link>
+        </Button>
       )}
       {pager?.next?.href && (
-        <Link
-          href={pager.next.href}
-          className={cn(buttonVariants({ variant: "outline" }), "ml-auto")}
-        >
-          {pager.next.title}
-          <ChevronRightIcon className="ml-2 h-4 w-4" />
-        </Link>
+        <Button variant="ghost" className="ml-auto" asChild>
+          <Link href={pager.next.href}>
+            {pager.next.title}
+            <ChevronRight />
+          </Link>
+        </Button>
       )}
     </div>
   )
diff --git a/apps/www/components/project-add-button.tsx b/apps/www/components/project-add-button.tsx
new file mode 100644
index 00000000000..6fb4933d58a
--- /dev/null
+++ b/apps/www/components/project-add-button.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { Check, PlusCircle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { useProject } from "@/hooks/use-project"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york/ui/tooltip"
+
+export function ProjectAddButton({
+  name,
+  className,
+  ...props
+}: React.ComponentProps<typeof Button> & { name: string }) {
+  const { addBlock, isAdded } = useProject()
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn("rounded-sm", className)}
+          onClick={() => {
+            addBlock(name)
+          }}
+          {...props}
+        >
+          {isAdded ? <Check /> : <PlusCircle />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent sideOffset={10}>Add to Project</TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/www/components/providers.tsx b/apps/www/components/providers.tsx
index 9b4b0b88583..fa680e71d76 100644
--- a/apps/www/components/providers.tsx
+++ b/apps/www/components/providers.tsx
@@ -3,11 +3,13 @@
 import * as React from "react"
 import { Provider as JotaiProvider } from "jotai"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { ThemeProviderProps } from "next-themes/dist/types"
 
 import { TooltipProvider } from "@/registry/new-york/ui/tooltip"
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
   return (
     <JotaiProvider>
       <NextThemesProvider {...props}>
diff --git a/apps/www/components/sidebar-nav.tsx b/apps/www/components/sidebar-nav.tsx
deleted file mode 100644
index 747a9670e3b..00000000000
--- a/apps/www/components/sidebar-nav.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { usePathname } from "next/navigation"
-import { SidebarNavItem } from "types/nav"
-
-import { type DocsConfig } from "@/config/docs"
-import { cn } from "@/lib/utils"
-
-export interface DocsSidebarNavProps {
-  config: DocsConfig
-}
-
-export function DocsSidebarNav({ config }: DocsSidebarNavProps) {
-  const pathname = usePathname()
-
-  const items = pathname?.startsWith("/charts")
-    ? config.chartsNav
-    : config.sidebarNav
-
-  return items.length ? (
-    <div className="w-full">
-      {items.map((item, index) => (
-        <div key={index} className={cn("pb-4")}>
-          <h4 className="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
-            {item.title}
-          </h4>
-          {item?.items?.length && (
-            <DocsSidebarNavItems items={item.items} pathname={pathname} />
-          )}
-        </div>
-      ))}
-    </div>
-  ) : null
-}
-
-interface DocsSidebarNavItemsProps {
-  items: SidebarNavItem[]
-  pathname: string | null
-}
-
-export function DocsSidebarNavItems({
-  items,
-  pathname,
-}: DocsSidebarNavItemsProps) {
-  return items?.length ? (
-    <div className="grid grid-flow-row auto-rows-max text-sm">
-      {items.map((item, index) =>
-        item.href && !item.disabled ? (
-          <Link
-            key={index}
-            href={item.href}
-            className={cn(
-              "group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline",
-              item.disabled && "cursor-not-allowed opacity-60",
-              pathname === item.href
-                ? "font-medium text-foreground"
-                : "text-muted-foreground"
-            )}
-            target={item.external ? "_blank" : ""}
-            rel={item.external ? "noreferrer" : ""}
-          >
-            {item.title}
-            {item.label && (
-              <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                {item.label}
-              </span>
-            )}
-          </Link>
-        ) : (
-          <span
-            key={index}
-            className={cn(
-              "flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline",
-              item.disabled && "cursor-not-allowed opacity-60"
-            )}
-          >
-            {item.title}
-            {item.label && (
-              <span className="ml-2 rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none text-muted-foreground no-underline group-hover:no-underline">
-                {item.label}
-              </span>
-            )}
-          </span>
-        )
-      )}
-    </div>
-  ) : null
-}
diff --git a/apps/www/components/site-footer.tsx b/apps/www/components/site-footer.tsx
index 9c10db3b7e8..697640a4d05 100644
--- a/apps/www/components/site-footer.tsx
+++ b/apps/www/components/site-footer.tsx
@@ -2,29 +2,31 @@ import { siteConfig } from "@/config/site"
 
 export function SiteFooter() {
   return (
-    <footer className="py-6 md:px-8 md:py-0">
-      <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-        <p className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
-          Built by{" "}
-          <a
-            href={siteConfig.links.twitter}
-            target="_blank"
-            rel="noreferrer"
-            className="font-medium underline underline-offset-4"
-          >
-            shadcn
-          </a>
-          . The source code is available on{" "}
-          <a
-            href={siteConfig.links.github}
-            target="_blank"
-            rel="noreferrer"
-            className="font-medium underline underline-offset-4"
-          >
-            GitHub
-          </a>
-          .
-        </p>
+    <footer className="border-grid border-t py-6 md:py-0">
+      <div className="container-wrapper">
+        <div className="container py-4">
+          <div className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
+            Built by{" "}
+            <a
+              href={siteConfig.links.twitter}
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              shadcn
+            </a>
+            . The source code is available on{" "}
+            <a
+              href={siteConfig.links.github}
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              GitHub
+            </a>
+            .
+          </div>
+        </div>
       </div>
     </footer>
   )
diff --git a/apps/www/components/site-header.tsx b/apps/www/components/site-header.tsx
index 42ddd2ad4b2..de92e792cd1 100644
--- a/apps/www/components/site-header.tsx
+++ b/apps/www/components/site-header.tsx
@@ -1,61 +1,43 @@
 import Link from "next/link"
 
 import { siteConfig } from "@/config/site"
-import { cn } from "@/lib/utils"
 import { CommandMenu } from "@/components/command-menu"
 import { Icons } from "@/components/icons"
 import { MainNav } from "@/components/main-nav"
 import { MobileNav } from "@/components/mobile-nav"
-import { ModeToggle } from "@/components/mode-toggle"
-import { buttonVariants } from "@/registry/new-york/ui/button"
+import { ModeSwitcher } from "@/components/mode-switcher"
+import { Button } from "@/registry/new-york/ui/button"
 
 export function SiteHeader() {
   return (
-    <header className="sticky top-0 z-50 w-full border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-14 max-w-screen-2xl items-center">
-        <MainNav />
-        <MobileNav />
-        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
-          <div className="w-full flex-1 md:w-auto md:flex-none">
-            <CommandMenu />
-          </div>
-          <nav className="flex items-center">
-            <Link
-              href={siteConfig.links.github}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div
-                className={cn(
-                  buttonVariants({
-                    variant: "ghost",
-                  }),
-                  "h-8 w-8 px-0"
-                )}
-              >
-                <Icons.gitHub className="h-4 w-4" />
-                <span className="sr-only">GitHub</span>
-              </div>
-            </Link>
-            <Link
-              href={siteConfig.links.twitter}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div
-                className={cn(
-                  buttonVariants({
-                    variant: "ghost",
-                  }),
-                  "h-8 w-8 px-0"
-                )}
+    <header className="border-grid sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container-wrapper">
+        <div className="container flex h-14 items-center gap-2 md:gap-4">
+          <MainNav />
+          <MobileNav />
+          <div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
+            <div className="hidden w-full flex-1 md:flex md:w-auto md:flex-none">
+              <CommandMenu />
+            </div>
+            <nav className="flex items-center gap-0.5">
+              <Button
+                asChild
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 px-0"
               >
-                <Icons.twitter className="h-3 w-3 fill-current" />
-                <span className="sr-only">Twitter</span>
-              </div>
-            </Link>
-            <ModeToggle />
-          </nav>
+                <Link
+                  href={siteConfig.links.github}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <Icons.gitHub className="h-4 w-4" />
+                  <span className="sr-only">GitHub</span>
+                </Link>
+              </Button>
+              <ModeSwitcher />
+            </nav>
+          </div>
         </div>
       </div>
     </header>
diff --git a/apps/www/components/tailwind-indicator.tsx b/apps/www/components/tailwind-indicator.tsx
index 535e074233d..d63dcf7687e 100644
--- a/apps/www/components/tailwind-indicator.tsx
+++ b/apps/www/components/tailwind-indicator.tsx
@@ -2,7 +2,10 @@ export function TailwindIndicator() {
   if (process.env.NODE_ENV === "production") return null
 
   return (
-    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
+    <div
+      data-tailwind-indicator=""
+      className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"
+    >
       <div className="block sm:hidden">xs</div>
       <div className="hidden sm:block md:hidden">sm</div>
       <div className="hidden md:block lg:hidden">md</div>
diff --git a/apps/www/components/theme-customizer.tsx b/apps/www/components/theme-customizer.tsx
index efbc66d6c29..a454fb81b4f 100644
--- a/apps/www/components/theme-customizer.tsx
+++ b/apps/www/components/theme-customizer.tsx
@@ -1,15 +1,8 @@
 "use client"
 
 import * as React from "react"
-import {
-  CheckIcon,
-  CopyIcon,
-  InfoCircledIcon,
-  MoonIcon,
-  ResetIcon,
-  SunIcon,
-} from "@radix-ui/react-icons"
-import template from "lodash.template"
+import template from "lodash/template"
+import { Check, ClipboardIcon, Copy } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { cn } from "@/lib/utils"
@@ -28,6 +21,9 @@ import {
 import {
   Drawer,
   DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
   DrawerTrigger,
 } from "@/registry/new-york/ui/drawer"
 import { Label } from "@/registry/new-york/ui/label"
@@ -36,15 +32,28 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/registry/new-york/ui/popover"
+import { Separator } from "@/registry/new-york/ui/separator"
 import { Skeleton } from "@/registry/new-york/ui/skeleton"
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/ui/tooltip"
-import { BaseColor, baseColors } from "@/registry/registry-base-colors"
+  BaseColor,
+  baseColors,
+  baseColorsOKLCH,
+} from "@/registry/registry-base-colors"
 
 import "@/styles/mdx.css"
+import { toast } from "sonner"
+
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york/ui/tabs"
+
+interface BaseColorOKLCH {
+  light: Record<string, string>
+  dark: Record<string, string>
+}
 
 export function ThemeCustomizer() {
   const [config, setConfig] = useConfig()
@@ -79,86 +88,15 @@ export function ThemeCustomizer() {
             <Customizer />
           </PopoverContent>
         </Popover>
-        <div className="ml-2 hidden items-center gap-0.5">
-          {mounted ? (
-            <>
-              {["zinc", "rose", "blue", "green", "orange"].map((color) => {
-                const baseColor = baseColors.find(
-                  (baseColor) => baseColor.name === color
-                )
-                const isActive = config.theme === color
-
-                if (!baseColor) {
-                  return null
-                }
-
-                return (
-                  <Tooltip key={baseColor.name}>
-                    <TooltipTrigger asChild>
-                      <button
-                        onClick={() =>
-                          setConfig({
-                            ...config,
-                            theme: baseColor.name,
-                          })
-                        }
-                        className={cn(
-                          "flex h-8 w-8 items-center justify-center rounded-full border-2 text-xs",
-                          isActive
-                            ? "border-[--theme-primary]"
-                            : "border-transparent"
-                        )}
-                        style={
-                          {
-                            "--theme-primary": `hsl(${
-                              baseColor?.activeColor[
-                                mode === "dark" ? "dark" : "light"
-                              ]
-                            })`,
-                          } as React.CSSProperties
-                        }
-                      >
-                        <span
-                          className={cn(
-                            "flex h-5 w-5 items-center justify-center rounded-full bg-[--theme-primary]"
-                          )}
-                        >
-                          {isActive && (
-                            <CheckIcon className="h-4 w-4 text-white" />
-                          )}
-                        </span>
-                        <span className="sr-only">{baseColor.label}</span>
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent
-                      align="center"
-                      className="rounded-[0.5rem] bg-zinc-900 text-zinc-50"
-                    >
-                      {baseColor.label}
-                    </TooltipContent>
-                  </Tooltip>
-                )
-              })}
-            </>
-          ) : (
-            <div className="mr-1 flex items-center gap-4">
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-            </div>
-          )}
-        </div>
       </div>
       <CopyCodeButton variant="ghost" size="sm" className="[&_svg]:hidden" />
     </div>
   )
 }
 
-function Customizer() {
+export function Customizer() {
   const [mounted, setMounted] = React.useState(false)
-  const { setTheme: setMode, resolvedTheme: mode } = useTheme()
+  const { resolvedTheme: mode } = useTheme()
   const [config, setConfig] = useConfig()
 
   React.useEffect(() => {
@@ -166,140 +104,66 @@ function Customizer() {
   }, [])
 
   return (
-    <ThemeWrapper
-      defaultTheme="zinc"
-      className="flex flex-col space-y-4 md:space-y-6"
-    >
-      <div className="flex items-start pt-4 md:pt-0">
-        <div className="space-y-1 pr-2">
-          <div className="font-semibold leading-none tracking-tight">
-            Customize
-          </div>
-          <div className="text-xs text-muted-foreground">
-            Pick a style and color for your components.
-          </div>
-        </div>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="ml-auto rounded-[0.5rem]"
-          onClick={() => {
-            setConfig({
-              ...config,
-              theme: "zinc",
-              radius: 0.5,
-            })
-          }}
-        >
-          <ResetIcon />
-          <span className="sr-only">Reset</span>
-        </Button>
-      </div>
-      <div className="flex flex-1 flex-col space-y-4 md:space-y-6">
-        <div className="space-y-1.5">
-          <div className="flex w-full items-center">
-            <Label className="text-xs">Style</Label>
-            <Popover>
-              <PopoverTrigger>
-                <InfoCircledIcon className="ml-1 h-3 w-3" />
-                <span className="sr-only">About styles</span>
-              </PopoverTrigger>
-              <PopoverContent
-                className="space-y-3 rounded-[0.5rem] text-sm"
-                side="right"
-                align="start"
-                alignOffset={-20}
-              >
-                <p className="font-medium">
-                  What is the difference between the New York and Default style?
-                </p>
-                <p>
-                  A style comes with its own set of components, animations,
-                  icons and more.
-                </p>
-                <p>
-                  The <span className="font-medium">Default</span> style has
-                  larger inputs, uses lucide-react for icons and
-                  tailwindcss-animate for animations.
-                </p>
-                <p>
-                  The <span className="font-medium">New York</span> style ships
-                  with smaller buttons and cards with shadows. It uses icons
-                  from Radix Icons.
-                </p>
-              </PopoverContent>
-            </Popover>
-          </div>
-          <div className="grid grid-cols-3 gap-2">
-            <Button
-              variant={"outline"}
-              size="sm"
-              onClick={() => setConfig({ ...config, style: "default" })}
-              className={cn(
-                config.style === "default" && "border-2 border-primary"
-              )}
-            >
-              Default
-            </Button>
-            <Button
-              variant={"outline"}
-              size="sm"
-              onClick={() => setConfig({ ...config, style: "new-york" })}
-              className={cn(
-                config.style === "new-york" && "border-2 border-primary"
-              )}
-            >
-              New York
-            </Button>
-          </div>
-        </div>
-        <div className="space-y-1.5">
-          <Label className="text-xs">Color</Label>
-          <div className="grid grid-cols-3 gap-2">
-            {baseColors.map((theme) => {
-              const isActive = config.theme === theme.name
+    <ThemeWrapper defaultTheme="zinc">
+      <div className="grid w-full flex-1 grid-cols-2 flex-wrap items-start gap-2 sm:flex sm:items-center md:gap-6">
+        <div className="flex flex-col gap-2">
+          <Label className="sr-only text-xs">Color</Label>
+          <div className="flex flex-wrap gap-1 md:gap-2">
+            {baseColors
+              .filter(
+                (theme) =>
+                  !["slate", "stone", "gray", "neutral"].includes(theme.name)
+              )
+              .map((theme) => {
+                const isActive = config.theme === theme.name
 
-              return mounted ? (
-                <Button
-                  variant={"outline"}
-                  size="sm"
-                  key={theme.name}
-                  onClick={() => {
-                    setConfig({
-                      ...config,
-                      theme: theme.name,
-                    })
-                  }}
-                  className={cn(
-                    "justify-start",
-                    isActive && "border-2 border-primary"
-                  )}
-                  style={
-                    {
-                      "--theme-primary": `hsl(${
-                        theme?.activeColor[mode === "dark" ? "dark" : "light"]
-                      })`,
-                    } as React.CSSProperties
-                  }
-                >
-                  <span
+                return mounted ? (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    key={theme.name}
+                    onClick={() => {
+                      setConfig({
+                        ...config,
+                        theme: theme.name,
+                      })
+                    }}
                     className={cn(
-                      "mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]"
+                      "w-[32px] rounded-lg lg:px-2.5 xl:w-[86px]",
+                      isActive && "border-primary/50 ring-[2px] ring-primary/30"
                     )}
+                    style={
+                      {
+                        "--theme-primary": `hsl(${
+                          theme?.activeColor[mode === "dark" ? "dark" : "light"]
+                        })`,
+                      } as React.CSSProperties
+                    }
                   >
-                    {isActive && <CheckIcon className="h-4 w-4 text-white" />}
-                  </span>
-                  {theme.label}
-                </Button>
-              ) : (
-                <Skeleton className="h-8 w-full" key={theme.name} />
-              )
-            })}
+                    <span
+                      className={cn(
+                        "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[--theme-primary]"
+                      )}
+                    >
+                      {isActive && <Check className="!size-2.5 text-white" />}
+                    </span>
+                    <span className="hidden xl:block">
+                      {theme.label === "Zinc" ? "Default" : theme.label}
+                    </span>
+                  </Button>
+                ) : (
+                  <Skeleton
+                    className="h-8 w-[32px] xl:w-[86px]"
+                    key={theme.name}
+                  />
+                )
+              })}
           </div>
         </div>
-        <div className="space-y-1.5">
-          <Label className="text-xs">Radius</Label>
-          <div className="grid grid-cols-5 gap-2">
+        <Separator orientation="vertical" className="hidden h-6 sm:block" />
+        <div className="flex flex-col gap-2">
+          <Label className="sr-only text-xs">Radius</Label>
+          <div className="flex flex-wrap gap-1 md:gap-2">
             {["0", "0.3", "0.5", "0.75", "1.0"].map((value) => {
               return (
                 <Button
@@ -313,8 +177,9 @@ function Customizer() {
                     })
                   }}
                   className={cn(
+                    "w-[40px] rounded-lg",
                     config.radius === parseFloat(value) &&
-                      "border-2 border-primary"
+                      "border-primary/50 ring-[2px] ring-primary/30"
                   )}
                 >
                   {value}
@@ -323,85 +188,50 @@ function Customizer() {
             })}
           </div>
         </div>
-        <div className="space-y-1.5">
-          <Label className="text-xs">Mode</Label>
-          <div className="grid grid-cols-3 gap-2">
-            {mounted ? (
-              <>
-                <Button
-                  variant={"outline"}
-                  size="sm"
-                  onClick={() => setMode("light")}
-                  className={cn(mode === "light" && "border-2 border-primary")}
-                >
-                  <SunIcon className="mr-1 -translate-x-1" />
-                  Light
-                </Button>
-                <Button
-                  variant={"outline"}
-                  size="sm"
-                  onClick={() => setMode("dark")}
-                  className={cn(mode === "dark" && "border-2 border-primary")}
-                >
-                  <MoonIcon className="mr-1 -translate-x-1" />
-                  Dark
-                </Button>
-              </>
-            ) : (
-              <>
-                <Skeleton className="h-8 w-full" />
-                <Skeleton className="h-8 w-full" />
-              </>
-            )}
-          </div>
+        <div className="flex gap-2 sm:ml-auto">
+          <CopyCodeButton />
         </div>
       </div>
     </ThemeWrapper>
   )
 }
 
-function CopyCodeButton({
+export function CopyCodeButton({
   className,
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const [config] = useConfig()
-  const activeTheme = baseColors.find((theme) => theme.name === config.theme)
-  const [hasCopied, setHasCopied] = React.useState(false)
-
-  React.useEffect(() => {
-    setTimeout(() => {
-      setHasCopied(false)
-    }, 2000)
-  }, [hasCopied])
-
   return (
     <>
-      {activeTheme && (
-        <Button
-          onClick={() => {
-            copyToClipboardWithMeta(getThemeCode(activeTheme, config.radius), {
-              name: "copy_theme_code",
-              properties: {
-                theme: activeTheme.name,
-                radius: config.radius,
-              },
-            })
-            setHasCopied(true)
-          }}
-          className={cn("md:hidden", className)}
-          {...props}
-        >
-          {hasCopied ? (
-            <CheckIcon className="mr-2 h-4 w-4" />
-          ) : (
-            <CopyIcon className="mr-2 h-4 w-4" />
-          )}
-          Copy code
-        </Button>
-      )}
+      <Drawer>
+        <DrawerTrigger asChild>
+          <Button
+            className={cn("h-8 rounded-lg shadow-none sm:hidden", className)}
+            {...props}
+          >
+            Copy
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Theme</DrawerTitle>
+            <DrawerDescription>
+              Copy and paste the following code into your CSS file.
+            </DrawerDescription>
+          </DrawerHeader>
+          <ThemeWrapper defaultTheme="zinc" className="relative px-6">
+            <CustomizerCode />
+          </ThemeWrapper>
+        </DrawerContent>
+      </Drawer>
       <Dialog>
         <DialogTrigger asChild>
-          <Button className={cn("hidden md:flex", className)} {...props}>
+          <Button
+            className={cn(
+              "hidden h-8 rounded-lg shadow-none sm:flex",
+              className
+            )}
+            {...props}
+          >
             Copy code
           </Button>
         </DialogTrigger>
@@ -414,32 +244,6 @@ function CopyCodeButton({
           </DialogHeader>
           <ThemeWrapper defaultTheme="zinc" className="relative">
             <CustomizerCode />
-            {activeTheme && (
-              <Button
-                size="sm"
-                onClick={() => {
-                  copyToClipboardWithMeta(
-                    getThemeCode(activeTheme, config.radius),
-                    {
-                      name: "copy_theme_code",
-                      properties: {
-                        theme: activeTheme.name,
-                        radius: config.radius,
-                      },
-                    }
-                  )
-                  setHasCopied(true)
-                }}
-                className="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground"
-              >
-                {hasCopied ? (
-                  <CheckIcon className="mr-2 h-4 w-4" />
-                ) : (
-                  <CopyIcon className="mr-2 h-4 w-4" />
-                )}
-                Copy
-              </Button>
-            )}
           </ThemeWrapper>
         </DialogContent>
       </Dialog>
@@ -449,168 +253,269 @@ function CopyCodeButton({
 
 function CustomizerCode() {
   const [config] = useConfig()
-  const activeTheme = baseColors.find((theme) => theme.name === config.theme)
+  const [hasCopied, setHasCopied] = React.useState(false)
+  const [themeVersion, setThemeVersion] = React.useState("v4")
+  const activeTheme = React.useMemo(
+    () => baseColors.find((theme) => theme.name === config.theme),
+    [config.theme]
+  )
+  const activeThemeOKLCH = React.useMemo(
+    () => baseColorsOKLCH[config.theme as keyof typeof baseColorsOKLCH],
+    [config.theme]
+  )
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      setTimeout(() => {
+        setHasCopied(false)
+      }, 2000)
+    }
+  }, [hasCopied])
 
   return (
     <ThemeWrapper defaultTheme="zinc" className="relative space-y-4">
-      <div data-rehype-pretty-code-fragment="">
-        <pre className="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
-          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
-            <span className="line text-white">@layer base &#123;</span>
-            <span className="line text-white">&nbsp;&nbsp;:root &#123;</span>
-            <span className="line text-white">
-              &nbsp;&nbsp;&nbsp;&nbsp;--background:{" "}
-              {activeTheme?.cssVars.light["background"]};
-            </span>
-            <span className="line text-white">
-              &nbsp;&nbsp;&nbsp;&nbsp;--foreground:{" "}
-              {activeTheme?.cssVars.light["foreground"]};
-            </span>
-            {[
-              "card",
-              "popover",
-              "primary",
-              "secondary",
-              "muted",
-              "accent",
-              "destructive",
-            ].map((prefix) => (
-              <>
+      <Tabs value={themeVersion} onValueChange={setThemeVersion}>
+        <div className="flex items-center justify-between">
+          <TabsList>
+            <TabsTrigger value="v4">Tailwind v4</TabsTrigger>
+            <TabsTrigger value="v3">v3</TabsTrigger>
+          </TabsList>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              copyToClipboardWithMeta(
+                themeVersion === "v3"
+                  ? getThemeCode(activeTheme, config.radius)
+                  : getThemeCodeOKLCH(activeThemeOKLCH, config.radius),
+                {
+                  name: "copy_theme_code",
+                  properties: {
+                    theme: config.theme,
+                    radius: config.radius,
+                  },
+                }
+              )
+              setHasCopied(true)
+            }}
+            className="absolute right-0 top-0 shadow-none"
+          >
+            {hasCopied ? <Check /> : <ClipboardIcon />}
+            Copy
+          </Button>
+        </div>
+        <TabsContent value="v4">
+          <div data-rehype-pretty-code-fragment="">
+            <pre className="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
+              <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
+                <span className="line text-white">&nbsp;:root &#123;</span>
                 <span className="line text-white">
-                  &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
-                  {
-                    activeTheme?.cssVars.light[
-                      prefix as keyof typeof activeTheme.cssVars.light
-                    ]
-                  }
-                  ;
+                  &nbsp;&nbsp;&nbsp;--radius: {config.radius}rem;
                 </span>
+                {Object.entries(activeThemeOKLCH?.light).map(([key, value]) => (
+                  <span className="line text-white" key={key}>
+                    &nbsp;&nbsp;&nbsp;--{key}: {value};
+                  </span>
+                ))}
+                <span className="line text-white">&nbsp;&#125;</span>
+                <span className="line text-white">&nbsp;</span>
+                <span className="line text-white">&nbsp;.dark &#123;</span>
+                {Object.entries(activeThemeOKLCH?.dark).map(([key, value]) => (
+                  <span className="line text-white" key={key}>
+                    &nbsp;&nbsp;&nbsp;--{key}: {value};
+                  </span>
+                ))}
+                <span className="line text-white">&nbsp;&#125;</span>
+              </code>
+            </pre>
+          </div>
+        </TabsContent>
+        <TabsContent value="v3">
+          <div data-rehype-pretty-code-fragment="">
+            <pre className="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
+              <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
+                <span className="line text-white">@layer base &#123;</span>
                 <span className="line text-white">
-                  &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}-foreground:{" "}
-                  {
-                    activeTheme?.cssVars.light[
-                      `${prefix}-foreground` as keyof typeof activeTheme.cssVars.light
-                    ]
-                  }
-                  ;
+                  &nbsp;&nbsp;:root &#123;
                 </span>
-              </>
-            ))}
-            <span className="line text-white">
-              &nbsp;&nbsp;&nbsp;&nbsp;--border:{" "}
-              {activeTheme?.cssVars.light["border"]};
-            </span>
-            <span className="line text-white">
-              &nbsp;&nbsp;&nbsp;&nbsp;--input:{" "}
-              {activeTheme?.cssVars.light["input"]};
-            </span>
-            <span className="line text-white">
-              &nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
-              {activeTheme?.cssVars.light["ring"]};
-            </span>
-            <span className="line text-white">
-              &nbsp;&nbsp;&nbsp;&nbsp;--radius: {config.radius}rem;
-            </span>
-            {["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
-              (prefix) => (
-                <>
-                  <span className="line text-white">
-                    &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
-                    {
-                      activeTheme?.cssVars.light[
-                        prefix as keyof typeof activeTheme.cssVars.light
-                      ]
-                    }
-                    ;
-                  </span>
-                </>
-              )
-            )}
-            <span className="line text-white">&nbsp;&nbsp;&#125;</span>
-            <span className="line text-white">&nbsp;</span>
-            <span className="line text-white">&nbsp;&nbsp;.dark &#123;</span>
-            <span className="line text-white">
-              &nbsp;&nbsp;&nbsp;&nbsp;--background:{" "}
-              {activeTheme?.cssVars.dark["background"]};
-            </span>
-            <span className="line text-white">
-              &nbsp;&nbsp;&nbsp;&nbsp;--foreground:{" "}
-              {activeTheme?.cssVars.dark["foreground"]};
-            </span>
-            {[
-              "card",
-              "popover",
-              "primary",
-              "secondary",
-              "muted",
-              "accent",
-              "destructive",
-            ].map((prefix) => (
-              <>
                 <span className="line text-white">
-                  &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
-                  {
-                    activeTheme?.cssVars.dark[
-                      prefix as keyof typeof activeTheme.cssVars.dark
-                    ]
-                  }
-                  ;
+                  &nbsp;&nbsp;&nbsp;&nbsp;--background:{" "}
+                  {activeTheme?.cssVars.light["background"]};
                 </span>
                 <span className="line text-white">
-                  &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}-foreground:{" "}
-                  {
-                    activeTheme?.cssVars.dark[
-                      `${prefix}-foreground` as keyof typeof activeTheme.cssVars.dark
-                    ]
-                  }
-                  ;
+                  &nbsp;&nbsp;&nbsp;&nbsp;--foreground:{" "}
+                  {activeTheme?.cssVars.light["foreground"]};
                 </span>
-              </>
-            ))}
-            <span className="line text-white">
-              &nbsp;&nbsp;&nbsp;&nbsp;--border:{" "}
-              {activeTheme?.cssVars.dark["border"]};
-            </span>
-            <span className="line text-white">
-              &nbsp;&nbsp;&nbsp;&nbsp;--input:{" "}
-              {activeTheme?.cssVars.dark["input"]};
-            </span>
-            <span className="line text-white">
-              &nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
-              {activeTheme?.cssVars.dark["ring"]};
-            </span>
-            {["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
-              (prefix) => (
-                <>
-                  <span className="line text-white">
-                    &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
-                    {
-                      activeTheme?.cssVars.dark[
-                        prefix as keyof typeof activeTheme.cssVars.dark
-                      ]
-                    }
-                    ;
-                  </span>
-                </>
-              )
-            )}
-            <span className="line text-white">&nbsp;&nbsp;&#125;</span>
-            <span className="line text-white">&#125;</span>
-          </code>
-        </pre>
-      </div>
+                {[
+                  "card",
+                  "popover",
+                  "primary",
+                  "secondary",
+                  "muted",
+                  "accent",
+                  "destructive",
+                ].map((prefix) => (
+                  <>
+                    <span className="line text-white">
+                      &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                      {
+                        activeTheme?.cssVars.light[
+                          prefix as keyof typeof activeTheme.cssVars.light
+                        ]
+                      }
+                      ;
+                    </span>
+                    <span className="line text-white">
+                      &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}-foreground:{" "}
+                      {
+                        activeTheme?.cssVars.light[
+                          `${prefix}-foreground` as keyof typeof activeTheme.cssVars.light
+                        ]
+                      }
+                      ;
+                    </span>
+                  </>
+                ))}
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--border:{" "}
+                  {activeTheme?.cssVars.light["border"]};
+                </span>
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--input:{" "}
+                  {activeTheme?.cssVars.light["input"]};
+                </span>
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
+                  {activeTheme?.cssVars.light["ring"]};
+                </span>
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--radius: {config.radius}rem;
+                </span>
+                {["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
+                  (prefix) => (
+                    <>
+                      <span className="line text-white">
+                        &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                        {
+                          activeTheme?.cssVars.light[
+                            prefix as keyof typeof activeTheme.cssVars.light
+                          ]
+                        }
+                        ;
+                      </span>
+                    </>
+                  )
+                )}
+                <span className="line text-white">&nbsp;&nbsp;&#125;</span>
+                <span className="line text-white">&nbsp;</span>
+                <span className="line text-white">
+                  &nbsp;&nbsp;.dark &#123;
+                </span>
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--background:{" "}
+                  {activeTheme?.cssVars.dark["background"]};
+                </span>
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--foreground:{" "}
+                  {activeTheme?.cssVars.dark["foreground"]};
+                </span>
+                {[
+                  "card",
+                  "popover",
+                  "primary",
+                  "secondary",
+                  "muted",
+                  "accent",
+                  "destructive",
+                ].map((prefix) => (
+                  <>
+                    <span className="line text-white">
+                      &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                      {
+                        activeTheme?.cssVars.dark[
+                          prefix as keyof typeof activeTheme.cssVars.dark
+                        ]
+                      }
+                      ;
+                    </span>
+                    <span className="line text-white">
+                      &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}-foreground:{" "}
+                      {
+                        activeTheme?.cssVars.dark[
+                          `${prefix}-foreground` as keyof typeof activeTheme.cssVars.dark
+                        ]
+                      }
+                      ;
+                    </span>
+                  </>
+                ))}
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--border:{" "}
+                  {activeTheme?.cssVars.dark["border"]};
+                </span>
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--input:{" "}
+                  {activeTheme?.cssVars.dark["input"]};
+                </span>
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
+                  {activeTheme?.cssVars.dark["ring"]};
+                </span>
+                {["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
+                  (prefix) => (
+                    <>
+                      <span className="line text-white">
+                        &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                        {
+                          activeTheme?.cssVars.dark[
+                            prefix as keyof typeof activeTheme.cssVars.dark
+                          ]
+                        }
+                        ;
+                      </span>
+                    </>
+                  )
+                )}
+                <span className="line text-white">&nbsp;&nbsp;&#125;</span>
+                <span className="line text-white">&#125;</span>
+              </code>
+            </pre>
+          </div>
+        </TabsContent>
+      </Tabs>
     </ThemeWrapper>
   )
 }
 
-function getThemeCode(theme: BaseColor, radius: number) {
+function getThemeCodeOKLCH(theme: BaseColorOKLCH | undefined, radius: number) {
+  if (!theme) {
+    return ""
+  }
+
+  const rootSection =
+    ":root {\n  --radius: " +
+    radius +
+    "rem;\n" +
+    Object.entries(theme.light)
+      .map((entry) => "  --" + entry[0] + ": " + entry[1] + ";")
+      .join("\n") +
+    "\n}\n\n.dark {\n" +
+    Object.entries(theme.dark)
+      .map((entry) => "  --" + entry[0] + ": " + entry[1] + ";")
+      .join("\n") +
+    "\n}\n"
+
+  return rootSection
+}
+
+function getThemeCode(theme: BaseColor | undefined, radius: number) {
   if (!theme) {
     return ""
   }
 
   return template(BASE_STYLES_WITH_VARIABLES)({
     colors: theme.cssVars,
-    radius,
+    radius: radius.toString(),
   })
 }
 
diff --git a/apps/www/components/v0-button.tsx b/apps/www/components/v0-button.tsx
index c84b582703f..d101b4848f1 100644
--- a/apps/www/components/v0-button.tsx
+++ b/apps/www/components/v0-button.tsx
@@ -14,7 +14,6 @@ import {
   TooltipTrigger,
 } from "@/registry/new-york/ui/tooltip"
 import { Style } from "@/registry/registry-styles"
-import { Block } from "@/registry/schema"
 
 type Size = "default" | "icon"
 
@@ -48,13 +47,13 @@ function V0Tooltip({
 }
 
 export function V0Button({
-  block,
+  name,
   size = "default",
   disabled,
   className,
   ...props
 }: {
-  block: Pick<Block, "name" | "description" | "code" | "style">
+  name: string
   size?: Size
 } & ButtonProps) {
   const [url, setUrl] = React.useState("https://ui.shadcn.com")
@@ -63,51 +62,12 @@ export function V0Button({
     setUrl(window.location.href)
   }, [])
 
-  if (block.style === "new-york") {
-    return (
-      <V0Tooltip size={size} style={block.style}>
-        <Button
-          aria-label="Open in v0"
-          className={cn(
-            "z-50 h-[calc(theme(spacing.7)_-_1px)] gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black",
-            size === "icon" && "h-7 w-7 p-0",
-            className
-          )}
-          onClick={() => {
-            toast("New York not available.", {
-              description: (
-                <div className="flex items-center">
-                  Only the Default style is available in{" "}
-                  <V0Logo className="ml-1 text-foreground" aria-label="v0" />.
-                </div>
-              ),
-            })
-          }}
-          disabled={
-            block.style === "new-york" && size === "icon" ? true : disabled
-          }
-          {...props}
-        >
-          {size === "icon" ? (
-            <V0Logo className="h-4 w-4" />
-          ) : (
-            <>
-              Open in <V0Logo />
-            </>
-          )}
-        </Button>
-      </V0Tooltip>
-    )
-  }
   return (
     <form
       action={async () => {
         try {
           const result = await editInV0({
-            name: block.name,
-            description: block.description || "",
-            code: block.code,
-            style: block.style,
+            name,
             url,
           })
 
@@ -142,7 +102,7 @@ function Form({
   size = "default",
   className,
   ...props
-}: Omit<React.ComponentProps<typeof V0Button>, "block">) {
+}: Omit<React.ComponentProps<typeof V0Button>, "name">) {
   const { pending } = useFormStatus()
 
   return (
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index aa4ebcc0b3b..83e65611e89 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -8,6 +8,10 @@ export interface DocsConfig {
 
 export const docsConfig: DocsConfig = {
   mainNav: [
+    {
+      title: "Home",
+      href: "/",
+    },
     {
       title: "Documentation",
       href: "/docs",
@@ -28,10 +32,6 @@ export const docsConfig: DocsConfig = {
       title: "Themes",
       href: "/themes",
     },
-    {
-      title: "Examples",
-      href: "/examples",
-    },
     {
       title: "Colors",
       href: "/colors",
@@ -69,7 +69,22 @@ export const docsConfig: DocsConfig = {
         {
           title: "CLI",
           href: "/docs/cli",
-          label: "Updated",
+          items: [],
+        },
+        {
+          title: "Monorepo",
+          href: "/docs/monorepo",
+          items: [],
+        },
+        {
+          title: "Tailwind v4",
+          href: "/docs/tailwind-v4",
+          items: [],
+          label: "New",
+        },
+        {
+          title: "Next.js 15 + React 19",
+          href: "/docs/react-19",
           items: [],
         },
         {
@@ -81,7 +96,11 @@ export const docsConfig: DocsConfig = {
           title: "Open in v0",
           href: "/docs/v0",
           items: [],
-          label: "New",
+        },
+        {
+          title: "Blocks",
+          href: "/docs/blocks",
+          items: [],
         },
         {
           title: "Figma",
@@ -108,6 +127,16 @@ export const docsConfig: DocsConfig = {
           href: "/docs/installation/vite",
           items: [],
         },
+        {
+          title: "Laravel",
+          href: "/docs/installation/laravel",
+          items: [],
+        },
+        {
+          title: "React Router",
+          href: "/docs/installation/react-router",
+          items: [],
+        },
         {
           title: "Remix",
           href: "/docs/installation/remix",
@@ -119,13 +148,13 @@ export const docsConfig: DocsConfig = {
           items: [],
         },
         {
-          title: "Laravel",
-          href: "/docs/installation/laravel",
+          title: "Tanstack Start",
+          href: "/docs/installation/tanstack",
           items: [],
         },
         {
-          title: "Gatsby",
-          href: "/docs/installation/gatsby",
+          title: "Tanstack Router",
+          href: "/docs/installation/tanstack-router",
           items: [],
         },
         {
@@ -328,6 +357,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/sheet",
           items: [],
         },
+        {
+          title: "Sidebar",
+          href: "/docs/components/sidebar",
+          items: [],
+        },
         {
           title: "Skeleton",
           href: "/docs/components/skeleton",
@@ -385,6 +419,47 @@ export const docsConfig: DocsConfig = {
         },
       ],
     },
+    {
+      title: "Registry",
+      label: "New",
+      items: [
+        {
+          title: "Introduction",
+          href: "/docs/registry",
+          items: [],
+        },
+        {
+          title: "Getting Started",
+          href: "/docs/registry/getting-started",
+          items: [],
+        },
+        {
+          title: "Examples",
+          href: "/docs/registry/examples",
+          items: [],
+        },
+        {
+          title: "Open in v0",
+          href: "/docs/registry/open-in-v0",
+          items: [],
+        },
+        {
+          title: "FAQ",
+          href: "/docs/registry/faq",
+          items: [],
+        },
+        {
+          title: "registry.json",
+          href: "/docs/registry/registry-json",
+          items: [],
+        },
+        {
+          title: "registry-item.json",
+          href: "/docs/registry/registry-item-json",
+          items: [],
+        },
+      ],
+    },
   ],
   chartsNav: [
     {
diff --git a/apps/www/config/site.ts b/apps/www/config/site.ts
index 76c0b1f7b89..fe6e43eef65 100644
--- a/apps/www/config/site.ts
+++ b/apps/www/config/site.ts
@@ -3,7 +3,7 @@ export const siteConfig = {
   url: "https://ui.shadcn.com",
   ogImage: "https://ui.shadcn.com/og.jpg",
   description:
-    "Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.",
+    "A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.",
   links: {
     twitter: "https://twitter.com/shadcn",
     github: "https://github.com/shadcn-ui/ui",
@@ -11,3 +11,8 @@ export const siteConfig = {
 }
 
 export type SiteConfig = typeof siteConfig
+
+export const META_THEME_COLORS = {
+  light: "#ffffff",
+  dark: "#09090b",
+}
diff --git a/apps/www/content/docs/blocks.mdx b/apps/www/content/docs/blocks.mdx
new file mode 100644
index 00000000000..84c27009ac8
--- /dev/null
+++ b/apps/www/content/docs/blocks.mdx
@@ -0,0 +1,238 @@
+---
+title: Add a block
+description: Contribute components to the blocks library.
+---
+
+We are inviting the community to contribute to the [blocks library](/blocks). Share your components and blocks with other developers and help build a library of high-quality, reusable components.
+
+We'd love to see all types of blocks: applications, marketing, products, and more.
+
+## Setup your workspace
+
+<Steps>
+
+### Fork the repository
+
+```bash
+git clone https://github.com/shadcn-ui/ui.git
+```
+
+### Create a new branch
+
+```bash
+git checkout -b username/my-new-block
+```
+
+### Install dependencies
+
+```bash
+pnpm install
+```
+
+### Start the dev server
+
+```bash
+pnpm www:dev
+```
+
+</Steps>
+
+## Add a block
+
+A block can be a single component (eg. a variation of a ui component) or a complex component (eg. a dashboard) with multiple components, hooks, and utils.
+
+<Steps>
+
+### Create a new block
+
+Create a new folder in the `apps/www/registry/new-york/blocks` directory. Make sure the folder is named in kebab-case and under `new-york`.
+
+```txt
+apps
+└── www
+    └── registry
+        └── new-york
+            └── blocks
+                └── dashboard-01
+```
+
+<Callout className="mt-6">
+
+**Note:** The build script will take care of building the block for the `default` style.
+
+</Callout>
+
+### Add your block files
+
+Add your files to the block folder. Here is an example of a block with a page, components, hooks, and utils.
+
+```txt
+dashboard-01
+└── page.tsx
+└── components
+    └── hello-world.tsx
+    └── example-card.tsx
+└── hooks
+    └── use-hello-world.ts
+└── lib
+    └── format-date.ts
+```
+
+<Callout className="mt-6">
+
+**Note:** You can start with one file and add more files later.
+
+</Callout>
+
+</Steps>
+
+## Add your block to the registry
+
+<Steps>
+
+### Add your block definition to `registry-blocks.tsx`
+
+To add your block to the registry, you need to add your block definition to `registry-blocks.ts`.
+
+This follows the registry schema at [https://ui.shadcn.com/schema/registry-item.json](https://ui.shadcn.com/schema/registry-item.json).
+
+```tsx title="apps/www/registry/registry-blocks.tsx"
+export const blocks = [
+  // ...
+  {
+    name: "dashboard-01",
+    author: "shadcn (https://ui.shadcn.com)",
+    title: "Dashboard",
+    description: "A simple dashboard with a hello world component.",
+    type: "registry:block",
+    registryDependencies: ["input", "button", "card"],
+    dependencies: ["zod"],
+    files: [
+      {
+        path: "blocks/dashboard-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/dashboard-01/components/hello-world.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/components/example-card.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/dashboard-01/hooks/use-hello-world.ts",
+        type: "registry:hook",
+      },
+      {
+        path: "blocks/dashboard-01/lib/format-date.ts",
+        type: "registry:lib",
+      },
+    ],
+    categories: ["dashboard"],
+  },
+]
+```
+
+Make sure you add a name, description, type, registryDependencies, dependencies, files, and categories. We'll go over each of these in more detail in the schema docs (coming soon).
+
+### Run the build script
+
+```bash
+pnpm registry:build
+```
+
+<Callout className="mt-6">
+
+**Note:** you do not need to run this script for every change. You only need to run it when you update the block definition.
+
+</Callout>
+
+### View your block
+
+Once the build script is finished, you can view your block at `http://localhost:3333/blocks/[CATEGORY]` or a full screen preview at `http://localhost:3333/view/styles/new-york/dashboard-01`.
+
+<Image
+  src="/images/block-preview-light.png"
+  width="1432"
+  height="960"
+  alt="Block preview"
+  className="border dark:hidden shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+/>
+<Image
+  src="/images/block-preview-dark.png"
+  width="1432"
+  height="960"
+  alt="Block preview"
+  className="border hidden dark:block shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+/>
+
+### Build your block
+
+You can now build your block by editing the files in the block folder and viewing the changes in the browser.
+
+If you add more files, make sure to add them to the `files` array in the block definition.
+
+</Steps>
+
+## Publish your block
+
+Once you're ready to publish your block, you can submit a pull request to the main repository.
+
+<Steps>
+
+### Run the build script
+
+```bash
+pnpm registry:build
+```
+
+### Capture a screenshot
+
+```bash
+pnpm registry:capture
+```
+
+<Callout className="mt-6">
+
+**Note:** If you've run the capture script before, you might need to delete the existing screenshots (both light and dark) at `apps/www/public/r/styles/new-york` and run the script again.
+
+</Callout>
+
+### Submit a pull request
+
+Commit your changes and submit a pull request to the main repository.
+
+Your block will be reviewed and merged. Once merged it will be published to the website and available to be installed via the CLI.
+
+</Steps>
+
+## Categories
+
+The `categories` property is used to organize your block in the registry.
+
+### Add a category
+
+If you need to add a new category, you can do so by adding it to the `registryCategories` array in `apps/www/registry/registry-categories.ts`.
+
+```tsx title="apps/www/registry/registry-categories.ts"
+export const registryCategories = [
+  // ...
+  {
+    name: "Input",
+    slug: "input",
+    hidden: false,
+  },
+]
+```
+
+## Guidelines
+
+Here are some guidelines to follow when contributing to the blocks library.
+
+- The following properties are required for the block definition: `name`, `description`, `type`, `files`, and `categories`.
+- Make sure to list all registry dependencies in `registryDependencies`. A registry dependency is the name of the component in the registry eg. `input`, `button`, `card`, etc.
+- Make sure to list all dependencies in `dependencies`. A dependency is the name of the package in the registry eg. `zod`, `sonner`, etc.
+- If your block has a page (optional), it should be the first entry in the `files` array and it should have a `target` property. This helps the CLI place the page in the correct location for file-based routing.
+- **Imports should always use the `@/registry` path.** eg. `import { Input } from "@/registry/new-york/input"`
diff --git a/apps/www/content/docs/changelog.mdx b/apps/www/content/docs/changelog.mdx
index 1a30b1c1511..622be8300f9 100644
--- a/apps/www/content/docs/changelog.mdx
+++ b/apps/www/content/docs/changelog.mdx
@@ -321,7 +321,7 @@ I've been working on a new CLI for the past few weeks. It's a complete rewrite.
 ### `init`
 
 ```bash
-npx shadcn-ui@latest init
+npx shadcn@latest init
 ```
 
 When you run the `init` command, you will be asked a few questions to configure `components.json`:
@@ -363,7 +363,7 @@ This means you can now use the CLI with any directory structure including `src`
 ### `add`
 
 ```bash
-npx shadcn-ui@latest add
+npx shadcn@latest add
 ```
 
 The `add` command is now much more capable. You can now add UI components but also import more complex components (coming soon).
@@ -373,7 +373,7 @@ The CLI will automatically resolve all components and dependencies, format them
 ### `diff` (experimental)
 
 ```bash
-npx shadcn-ui diff
+npx shadcn diff
 ```
 
 We're also introducing a new `diff` command to help you keep track of upstream updates.
@@ -383,7 +383,7 @@ You can use this command to see what has changed in the upstream repository and
 Run the `diff` command to get a list of components that have updates available:
 
 ```bash
-npx shadcn-ui diff
+npx shadcn diff
 ```
 
 ```txt
@@ -398,7 +398,7 @@ The following components have updates available:
 Then run `diff [component]` to see the changes:
 
 ```bash
-npx shadcn-ui diff alert
+npx shadcn diff alert
 ```
 
 ```diff /pl-12/
diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx
index ce60871c8c5..c28f830ca1b 100644
--- a/apps/www/content/docs/cli.mdx
+++ b/apps/www/content/docs/cli.mdx
@@ -1,32 +1,18 @@
 ---
-title: CLI
-description: Use the CLI to add components to your project.
+title: shadcn
+description: Use the shadcn CLI to add components to your project.
 ---
 
-<Callout>
-
-**Note:** We just released a new `shadcn` CLI. See the [changelog](/docs/changelog) for more information.
-
-</Callout>
-
 ## init
 
 Use the `init` command to initialize configuration and dependencies for a new project.
 
-The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.
+The `init` command installs dependencies, adds the `cn` util and configures CSS variables for the project.
 
 ```bash
 npx shadcn@latest init
 ```
 
-You will be asked a few questions to configure `components.json`:
-
-```txt showLineNumbers
-Which style would you like to use? › New York
-Which color would you like to use as base color? › Zinc
-Do you want to use CSS variables for colors? › no / yes
-```
-
 ### Options
 
 ```txt
@@ -38,11 +24,16 @@ Arguments:
   components         the components to add or a url to the component.
 
 Options:
-  -d, --defaults    use default values i.e new-york, zinc and css variables. (default: false)
-  -f, --force       force overwrite of existing components.json. (default: false)
-  -y, --yes         skip confirmation prompt. (default: false)
-  -c, --cwd <cwd>   the working directory. defaults to the current directory.
-  -h, --help       display help for command
+  -y, --yes           skip confirmation prompt. (default: true)
+  -d, --defaults,     use default configuration. (default: false)
+  -f, --force         force overwrite of existing configuration. (default: false)
+  -c, --cwd <cwd>     the working directory. defaults to the current directory. (default: "/Users/shadcn/Desktop")
+  -s, --silent        mute output. (default: false)
+  --src-dir           use the src directory when creating a new project. (default: false)
+  --no-src-dir        do not use the src directory when creating a new project.
+  --css-variables     use css variables for theming. (default: true)
+  --no-css-variables  do not use css variables for theming.
+  -h, --help          display help for command
 ```
 
 ## add
@@ -53,24 +44,6 @@ Use the `add` command to add components and dependencies to your project.
 npx shadcn@latest add [component]
 ```
 
-You will be presented with a list of components to choose from:
-
-```txt
-Which components would you like to add? › Space to select. A to toggle all.
-Enter to submit.
-
-◯  accordion
-◯  alert
-◯  alert-dialog
-◯  aspect-ratio
-◯  avatar
-◯  badge
-◯  button
-◯  calendar
-◯  card
-◯  checkbox
-```
-
 ### Options
 
 ```txt
@@ -82,23 +55,48 @@ Arguments:
   components         the components to add or a url to the component.
 
 Options:
-  -y, --yes          skip confirmation prompt. (default: false)
-  -o, --overwrite    overwrite existing files. (default: false)
-  -c, --cwd <cwd>    the working directory. defaults to the current directory.
-  -p, --path <path>  the path to add the component to.
-  -h, --help         display help for command
+  -y, --yes           skip confirmation prompt. (default: false)
+  -o, --overwrite     overwrite existing files. (default: false)
+  -c, --cwd <cwd>     the working directory. defaults to the current directory. (default: "/Users/shadcn/Desktop")
+  -a, --all           add all available components (default: false)
+  -p, --path <path>   the path to add the component to.
+  -s, --silent        mute output. (default: false)
+  --src-dir           use the src directory when creating a new project. (default: false)
+  --no-src-dir        do not use the src directory when creating a new project.
+  --css-variables     use css variables for theming. (default: true)
+  --no-css-variables  do not use css variables for theming.
+  -h, --help          display help for command
 ```
 
-## Monorepo
+## build
 
-In a monorepo, you can specify the path to your workspace with the `-c` or `--cwd` option.
+Use the `build` command to generate the registry JSON files.
 
 ```bash
-npx shadcn@latest init -c ./apps/www
+npx shadcn@latest build
+```
+
+This command reads the `registry.json` file and generates the registry JSON files in the `public/r` directory.
+
+### Options
+
+```txt
+Usage: shadcn build [options] [registry]
+
+build components for a shadcn registry
+
+Arguments:
+  registry             path to registry.json file (default: "./registry.json")
+
+Options:
+  -o, --output <path>  destination directory for json files (default: "./public/r")
+  -c, --cwd <cwd>      the working directory. defaults to the current directory. (default:
+                       "/Users/shadcn/Code/shadcn/ui/packages/shadcn")
+  -h, --help           display help for command
 ```
 
-or
+To customize the output directory, use the `--output` option.
 
 ```bash
-npx shadcn@latest add alert-dialog -c ./apps/www
+npx shadcn@latest build --output ./public/registry
 ```
diff --git a/apps/www/content/docs/components-json.mdx b/apps/www/content/docs/components-json.mdx
index a998e496542..1cd3fbce235 100644
--- a/apps/www/content/docs/components-json.mdx
+++ b/apps/www/content/docs/components-json.mdx
@@ -37,11 +37,11 @@ The style for your components. **This cannot be changed after initialization.**
 
 ```json title="components.json"
 {
-  "style": "default" | "new-york"
+  "style": "new-york"
 }
 ```
 
-<ComponentPreview name="card-with-form" />
+The `default` style has been deprecated. Use the `new-york` style instead.
 
 ## tailwind
 
@@ -51,7 +51,7 @@ See the <Link href="/docs/installation">installation section</Link> for how to s
 
 ### tailwind.config
 
-Path to where your `tailwind.config.js` file is located.
+Path to where your `tailwind.config.js` file is located. **For Tailwind CSS v4, leave this blank.**
 
 ```json title="components.json"
 {
diff --git a/apps/www/content/docs/components/accordion.mdx b/apps/www/content/docs/components/accordion.mdx
index ae1c314a15e..311456e4e4c 100644
--- a/apps/www/content/docs/components/accordion.mdx
+++ b/apps/www/content/docs/components/accordion.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -78,7 +78,7 @@ module.exports = {
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/alert-dialog.mdx b/apps/www/content/docs/components/alert-dialog.mdx
index cfcf4c95e5b..187528f0b33 100644
--- a/apps/www/content/docs/components/alert-dialog.mdx
+++ b/apps/www/content/docs/components/alert-dialog.mdx
@@ -16,7 +16,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -50,7 +50,7 @@ npm install @radix-ui/react-alert-dialog
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/alert.mdx b/apps/www/content/docs/components/alert.mdx
index 7d32e75b2ee..ad40fa8de1d 100644
--- a/apps/www/content/docs/components/alert.mdx
+++ b/apps/www/content/docs/components/alert.mdx
@@ -12,7 +12,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add alert
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/aspect-ratio.mdx b/apps/www/content/docs/components/aspect-ratio.mdx
index 5b9fc79eff3..7698a1f0704 100644
--- a/apps/www/content/docs/components/aspect-ratio.mdx
+++ b/apps/www/content/docs/components/aspect-ratio.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-aspect-ratio
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
index 454a31fb338..7e801e97a2b 100644
--- a/apps/www/content/docs/components/avatar.mdx
+++ b/apps/www/content/docs/components/avatar.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-avatar
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/badge.mdx b/apps/www/content/docs/components/badge.mdx
index 2053be1200b..a8f7be69d6f 100644
--- a/apps/www/content/docs/components/badge.mdx
+++ b/apps/www/content/docs/components/badge.mdx
@@ -12,7 +12,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add badge
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/breadcrumb.mdx b/apps/www/content/docs/components/breadcrumb.mdx
index 90abd33b65a..84a791ba865 100644
--- a/apps/www/content/docs/components/breadcrumb.mdx
+++ b/apps/www/content/docs/components/breadcrumb.mdx
@@ -12,7 +12,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add breadcrumb
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx
index 966be5fc90d..4d3b617406e 100644
--- a/apps/www/content/docs/components/button.mdx
+++ b/apps/www/content/docs/components/button.mdx
@@ -9,7 +9,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -43,7 +43,7 @@ npm install @radix-ui/react-slot
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
@@ -134,3 +134,17 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
   name="button-as-child"
   description="A button wrapping a custom Link component"
 />
+
+## Changelog
+
+### 2024-10-16 Classes for icons
+
+Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the button to automatically style icon inside the button.
+
+Add the following classes to the `cva` call in your `button.tsx` file.
+
+```diff showLineNumbers title="button.tsx"
+const buttonVariants = cva(
+  "inline-flex ... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+)
+```
diff --git a/apps/www/content/docs/components/calendar.mdx b/apps/www/content/docs/components/calendar.mdx
index d4a7a40980e..49a1157ec3a 100644
--- a/apps/www/content/docs/components/calendar.mdx
+++ b/apps/www/content/docs/components/calendar.mdx
@@ -18,7 +18,7 @@ The `Calendar` component is built on top of [React DayPicker](https://react-day-
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -56,7 +56,7 @@ The `Calendar` component uses the `Button` component. Make sure you have it inst
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
@@ -88,3 +88,14 @@ You can use the `<Calendar>` component to build a date picker. See the [Date Pic
 ### Form
 
 <ComponentPreview name="calendar-form" />
+
+## Changelog
+
+### 11-03-2024 day_outside color
+
+- Changed the color of the `day_outside` class to the following to improve contrast:
+
+  ```tsx showLineNumbers title="calendar.tsx"
+  "day_outside:
+        "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+  ```
diff --git a/apps/www/content/docs/components/card.mdx b/apps/www/content/docs/components/card.mdx
index 78ddec27166..fa1d7b85cdd 100644
--- a/apps/www/content/docs/components/card.mdx
+++ b/apps/www/content/docs/components/card.mdx
@@ -8,7 +8,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add card
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
@@ -72,3 +72,35 @@ import {
   name="card-demo"
   description="A card showing notifications settings."
 />
+
+## Changelog
+
+### 11-03-2024 a11y for title and description
+
+- Changed the `CardTitle` and `CardDescription` components to use `div` instead of `h3` and `p` to improve accessibility.
+
+```tsx showLineNumbers title="card.tsx"
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+```
diff --git a/apps/www/content/docs/components/carousel.mdx b/apps/www/content/docs/components/carousel.mdx
index ebda81c5520..f2ca47d2539 100644
--- a/apps/www/content/docs/components/carousel.mdx
+++ b/apps/www/content/docs/components/carousel.mdx
@@ -19,7 +19,7 @@ The carousel component is built using the [Embla Carousel](https://www.embla-car
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -54,7 +54,7 @@ npm install embla-carousel-react
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/chart.mdx b/apps/www/content/docs/components/chart.mdx
index 21df395476c..2a228e7467f 100644
--- a/apps/www/content/docs/components/chart.mdx
+++ b/apps/www/content/docs/components/chart.mdx
@@ -4,6 +4,12 @@ description: Beautiful charts. Built using Recharts. Copy and paste into your ap
 component: true
 ---
 
+<Callout className="mb-6">
+
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
+
+</Callout>
+
 <ComponentPreview
   name="chart-bar-interactive"
   className="-mt-4 [&_.preview]:p-0 [&_.preview]:border-t [&_.preview>div]:shadow-none [&_.preview>div]:border-none [&_.preview>div]:w-full [&_.preview]:lg:min-h-[404px]"
@@ -47,11 +53,11 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 
 <Callout className="mt-4">
 
-**Note:** If you are trying to use charts with **React 19** or the **Next.js 15**, you will need the [recharts@alpha](https://github.com/recharts/recharts/releases/tag/v2.13.0-alpha.4) release currently.
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
 
 </Callout>
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -133,7 +139,7 @@ npm install recharts
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Your First Chart
 
diff --git a/apps/www/content/docs/components/checkbox.mdx b/apps/www/content/docs/components/checkbox.mdx
index dd52022fb14..77c3882fbcf 100644
--- a/apps/www/content/docs/components/checkbox.mdx
+++ b/apps/www/content/docs/components/checkbox.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-checkbox
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/collapsible.mdx b/apps/www/content/docs/components/collapsible.mdx
index 6f9bfce7317..5e430816614 100644
--- a/apps/www/content/docs/components/collapsible.mdx
+++ b/apps/www/content/docs/components/collapsible.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-collapsible
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx
index 354760517fe..ec38d6005d2 100644
--- a/apps/www/content/docs/components/command.mdx
+++ b/apps/www/content/docs/components/command.mdx
@@ -19,7 +19,7 @@ The `<Command />` component uses the [`cmdk`](https://cmdk.paco.me) component by
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -53,7 +53,7 @@ npm install cmdk
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
@@ -136,3 +136,27 @@ export function CommandMenu() {
 ### Combobox
 
 You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
+
+## Changelog
+
+### 2024-10-25 Classes for icons
+
+Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<CommandItem />` to automatically style icon inside.
+
+Add the following classes to the `cva` call in your `command.tsx` file.
+
+```tsx showLineNumbers title="command.tsx"
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+```
diff --git a/apps/www/content/docs/components/context-menu.mdx b/apps/www/content/docs/components/context-menu.mdx
index 2a0f1b789ad..ed720a383b3 100644
--- a/apps/www/content/docs/components/context-menu.mdx
+++ b/apps/www/content/docs/components/context-menu.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-context-menu
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/data-table.mdx b/apps/www/content/docs/components/data-table.mdx
index c3e1f01e026..965f5feceb7 100644
--- a/apps/www/content/docs/components/data-table.mdx
+++ b/apps/www/content/docs/components/data-table.mdx
@@ -6,7 +6,7 @@ links:
   doc: https://tanstack.com/table/v8/docs/introduction
 ---
 
-<ComponentPreview name="data-table-demo" />
+<ComponentPreview name="data-table-demo" className="[&_.preview]:items-start" />
 
 ## Introduction
 
@@ -185,7 +185,7 @@ export function DataTable<TData, TValue>({
   })
 
   return (
-    <div className="rounded-md border">
+    <div className="overflow-hidden rounded-md border">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -425,7 +425,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           { // .... }
         </Table>
@@ -499,7 +499,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -602,7 +602,7 @@ export function DataTable<TData, TValue>({
           className="max-w-sm"
         />
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -715,7 +715,7 @@ export function DataTable<TData, TValue>({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -805,7 +805,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table />
       </div>
     </div>
diff --git a/apps/www/content/docs/components/dialog.mdx b/apps/www/content/docs/components/dialog.mdx
index 85df8727f04..f3fd2522cf6 100644
--- a/apps/www/content/docs/components/dialog.mdx
+++ b/apps/www/content/docs/components/dialog.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-dialog
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/drawer.mdx b/apps/www/content/docs/components/drawer.mdx
index 445a8ced4af..d9456eae260 100644
--- a/apps/www/content/docs/components/drawer.mdx
+++ b/apps/www/content/docs/components/drawer.mdx
@@ -3,7 +3,7 @@ title: Drawer
 description: A drawer component for React.
 component: true
 links:
-  doc: https://github.com/emilkowalski/vaul
+  doc: https://vaul.emilkowal.ski/getting-started
 ---
 
 <ComponentPreview name="drawer-demo" description="A drawer component." />
@@ -14,7 +14,7 @@ Drawer is built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilk
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install vaul
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/dropdown-menu.mdx b/apps/www/content/docs/components/dropdown-menu.mdx
index d70411608a2..a6e19622d9a 100644
--- a/apps/www/content/docs/components/dropdown-menu.mdx
+++ b/apps/www/content/docs/components/dropdown-menu.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-dropdown-menu
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
@@ -93,3 +93,50 @@ import {
   name="dropdown-menu-radio-group"
   description="A dropdown menu with radio items."
 />
+
+## Changelog
+
+### 2024-10-16 Classes for icons
+
+Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `DropdownMenuItem` to automatically style icon inside the dropdown menu item.
+
+Add the following classes to the `DropdownMenuItem` in your `dropdown-menu.tsx` file.
+
+```diff showLineNumbers title="dropdown-menu.tsx"
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative ... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+```
+
+### 2024-10-25 Classes for `<DropdownMenuSubTrigger />`
+
+Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<DropdownMenuSubTrigger />` to automatically style icon inside.
+
+Add the following classes to the `cva` call in your `dropdown-menu.tsx` file.
+
+```tsx title="dropdown-menu.tsx"
+<DropdownMenuPrimitive.SubTrigger
+  ref={ref}
+  className={cn(
+    "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+>
+  {/* ... */}
+</DropdownMenuPrimitive.SubTrigger>
+```
diff --git a/apps/www/content/docs/components/form.mdx b/apps/www/content/docs/components/form.mdx
index 0582b7eee8d..87756d55a4d 100644
--- a/apps/www/content/docs/components/form.mdx
+++ b/apps/www/content/docs/components/form.mdx
@@ -75,7 +75,7 @@ const form = useForm()
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -115,7 +115,7 @@ npm install @radix-ui/react-label @radix-ui/react-slot react-hook-form @hookform
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/hover-card.mdx b/apps/www/content/docs/components/hover-card.mdx
index 152d26b82ca..b87b5cc164a 100644
--- a/apps/www/content/docs/components/hover-card.mdx
+++ b/apps/www/content/docs/components/hover-card.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-hover-card
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/input-otp.mdx b/apps/www/content/docs/components/input-otp.mdx
index fbc46fa4f42..99f147c1878 100644
--- a/apps/www/content/docs/components/input-otp.mdx
+++ b/apps/www/content/docs/components/input-otp.mdx
@@ -14,7 +14,7 @@ Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input-
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -100,7 +100,7 @@ module.exports = {
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/input.mdx b/apps/www/content/docs/components/input.mdx
index 49d6ddf71ca..70eef4b352c 100644
--- a/apps/www/content/docs/components/input.mdx
+++ b/apps/www/content/docs/components/input.mdx
@@ -12,7 +12,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add input
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/label.mdx b/apps/www/content/docs/components/label.mdx
index 96d78882593..6b53c2a359f 100644
--- a/apps/www/content/docs/components/label.mdx
+++ b/apps/www/content/docs/components/label.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-label
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/menubar.mdx b/apps/www/content/docs/components/menubar.mdx
index f8df5e7b91e..1590ccfe4cc 100644
--- a/apps/www/content/docs/components/menubar.mdx
+++ b/apps/www/content/docs/components/menubar.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-menubar
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/navigation-menu.mdx b/apps/www/content/docs/components/navigation-menu.mdx
index 1c588100ad6..25345dc1a3e 100644
--- a/apps/www/content/docs/components/navigation-menu.mdx
+++ b/apps/www/content/docs/components/navigation-menu.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-navigation-menu
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/pagination.mdx b/apps/www/content/docs/components/pagination.mdx
index d264dda7731..9e564d7ae6d 100644
--- a/apps/www/content/docs/components/pagination.mdx
+++ b/apps/www/content/docs/components/pagination.mdx
@@ -11,7 +11,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -39,7 +39,7 @@ npx shadcn@latest add pagination
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/popover.mdx b/apps/www/content/docs/components/popover.mdx
index 13f9f37597e..ee7604d2db9 100644
--- a/apps/www/content/docs/components/popover.mdx
+++ b/apps/www/content/docs/components/popover.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-popover
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/progress.mdx b/apps/www/content/docs/components/progress.mdx
index bc60ee031fb..28dc665771f 100644
--- a/apps/www/content/docs/components/progress.mdx
+++ b/apps/www/content/docs/components/progress.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-progress
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/radio-group.mdx b/apps/www/content/docs/components/radio-group.mdx
index 68f7d2e9d88..edcef2f91e2 100644
--- a/apps/www/content/docs/components/radio-group.mdx
+++ b/apps/www/content/docs/components/radio-group.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-radio-group
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/resizable.mdx b/apps/www/content/docs/components/resizable.mdx
index d3acfe40928..63d4a730c4b 100644
--- a/apps/www/content/docs/components/resizable.mdx
+++ b/apps/www/content/docs/components/resizable.mdx
@@ -18,7 +18,7 @@ The `Resizable` component is built on top of [react-resizable-panels](https://gi
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -52,7 +52,7 @@ npm install react-resizable-panels
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/scroll-area.mdx b/apps/www/content/docs/components/scroll-area.mdx
index 0206731e05a..8484b4b6c9b 100644
--- a/apps/www/content/docs/components/scroll-area.mdx
+++ b/apps/www/content/docs/components/scroll-area.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-scroll-area
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx
index b75c72cfae2..d81504a7df9 100644
--- a/apps/www/content/docs/components/select.mdx
+++ b/apps/www/content/docs/components/select.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-select
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/separator.mdx b/apps/www/content/docs/components/separator.mdx
index 19a16af2335..92a3f5bd0b8 100644
--- a/apps/www/content/docs/components/separator.mdx
+++ b/apps/www/content/docs/components/separator.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -44,7 +44,7 @@ npm install @radix-ui/react-separator
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/sheet.mdx b/apps/www/content/docs/components/sheet.mdx
index 5a31cc1f4e1..dee65702626 100644
--- a/apps/www/content/docs/components/sheet.mdx
+++ b/apps/www/content/docs/components/sheet.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-dialog
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ### Usage
 
diff --git a/apps/www/content/docs/components/sidebar.mdx b/apps/www/content/docs/components/sidebar.mdx
new file mode 100644
index 00000000000..ed021118e96
--- /dev/null
+++ b/apps/www/content/docs/components/sidebar.mdx
@@ -0,0 +1,1394 @@
+---
+title: Sidebar
+description: A composable, themeable and customizable sidebar component.
+component: true
+---
+
+<figure className="flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-07"
+    title="Sidebar"
+    type="block"
+    description="A composable, themeable and customizable sidebar component built using shadcn/ui"
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar that collapses to icons.
+  </figcaption>
+</figure>
+
+Sidebars are one of the most complex components to build. They are central
+to any application and often contain a lot of moving parts.
+
+I don't like building sidebars. So I built 30+ of them. All kinds of
+configurations. Then I extracted the core components into `sidebar.tsx`.
+
+We now have a solid foundation to build on top of. Composable. Themeable.
+Customizable.
+
+[Browse the Blocks Library](/blocks).
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Run the following command to install `sidebar.tsx`</Step>
+
+```bash
+npx shadcn@latest add sidebar
+```
+
+<Step>Add the following colors to your CSS file</Step>
+
+The command above should install the colors for you. If not, copy and paste the following in your CSS file.
+
+We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
+
+```css title="app/globals.css"
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="sidebar" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Add the following colors to your CSS file</Step>
+
+We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
+
+```css title="app/globals.css"
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+```
+
+<Step>Add the Sidebar tailwind config into `tailwind.config.js`</Step>
+
+Add the following object in the `theme.extend.colors` section of your `tailwind.config.js` file
+this config enable sidebar related style utilities like bg-sidebar
+
+```javascript title="tailwind.config.js"
+// ...
+sidebar: {
+  DEFAULT: 'hsl(var(--sidebar-background))',
+  foreground: 'hsl(var(--sidebar-foreground))',
+  primary: 'hsl(var(--sidebar-primary))',
+  'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  accent: 'hsl(var(--sidebar-accent))',
+  'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  border: 'hsl(var(--sidebar-border))',
+  ring: 'hsl(var(--sidebar-ring))',
+},
+// ...
+```
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Structure
+
+A `Sidebar` component is composed of the following parts:
+
+- `SidebarProvider` - Handles collapsible state.
+- `Sidebar` - The sidebar container.
+- `SidebarHeader` and `SidebarFooter` - Sticky at the top and bottom of the sidebar.
+- `SidebarContent` - Scrollable content.
+- `SidebarGroup` - Section within the `SidebarContent`.
+- `SidebarTrigger` - Trigger for the `Sidebar`.
+
+<Image
+  src="/images/sidebar-structure.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  className="border dark:hidden rounded-lg overflow-hidden mt-6 w-full"
+/>
+<Image
+  src="/images/sidebar-structure-dark.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  className="border hidden dark:block rounded-lg overflow-hidden mt-6 w-full"
+/>
+
+## Usage
+
+```tsx showLineNumbers title="app/layout.tsx"
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+```
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+} from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarHeader />
+      <SidebarContent>
+        <SidebarGroup />
+        <SidebarGroup />
+      </SidebarContent>
+      <SidebarFooter />
+    </Sidebar>
+  )
+}
+```
+
+## Your First Sidebar
+
+Let's start with the most basic sidebar. A collapsible sidebar with a menu.
+
+<Steps>
+
+<Step>
+  Add a `SidebarProvider` and `SidebarTrigger` at the root of your application.
+</Step>
+
+```tsx showLineNumbers title="app/layout.tsx"
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+```
+
+<Step>Create a new sidebar component at `components/app-sidebar.tsx`.</Step>
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+import { Sidebar, SidebarContent } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent />
+    </Sidebar>
+  )
+}
+```
+
+<Step>Now, let's add a `SidebarMenu` to the sidebar.</Step>
+
+We'll use the `SidebarMenu` component in a `SidebarGroup`.
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+// Menu items.
+const items = [
+  {
+    title: "Home",
+    url: "#",
+    icon: Home,
+  },
+  {
+    title: "Inbox",
+    url: "#",
+    icon: Inbox,
+  },
+  {
+    title: "Calendar",
+    url: "#",
+    icon: Calendar,
+  },
+  {
+    title: "Search",
+    url: "#",
+    icon: Search,
+  },
+  {
+    title: "Settings",
+    url: "#",
+    icon: Settings,
+  },
+]
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
+```
+
+<Step>You've created your first sidebar.</Step>
+
+<figure className="flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-demo"
+    title="Sidebar"
+    type="block"
+    description="Your first sidebar."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    Your first sidebar.
+  </figcaption>
+</figure>
+
+</Steps>
+
+## Components
+
+The components in `sidebar.tsx` are built to be composable i.e you build your sidebar by putting the provided components together. They also compose well with other shadcn/ui components such as `DropdownMenu`, `Collapsible` or `Dialog` etc.
+
+**If you need to change the code in `sidebar.tsx`, you are encouraged to do so. The code is yours. Use `sidebar.tsx` as a starting point and build your own.**
+
+In the next sections, we'll go over each component and how to use them.
+
+## SidebarProvider
+
+The `SidebarProvider` component is used to provide the sidebar context to the `Sidebar` component. You should always wrap your application in a `SidebarProvider` component.
+
+### Props
+
+| Name           | Type                      | Description                                  |
+| -------------- | ------------------------- | -------------------------------------------- |
+| `defaultOpen`  | `boolean`                 | Default open state of the sidebar.           |
+| `open`         | `boolean`                 | Open state of the sidebar (controlled).      |
+| `onOpenChange` | `(open: boolean) => void` | Sets open state of the sidebar (controlled). |
+
+### Width
+
+If you have a single sidebar in your application, you can use the `SIDEBAR_WIDTH` and `SIDEBAR_WIDTH_MOBILE` variables in `sidebar.tsx` to set the width of the sidebar.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+```
+
+For multiple sidebars in your application, you can use the `style` prop to set the width of the sidebar.
+
+To set the width of the sidebar, you can use the `--sidebar-width` and `--sidebar-width-mobile` CSS variables in the `style` prop.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+<SidebarProvider
+  style={{
+    "--sidebar-width": "20rem",
+    "--sidebar-width-mobile": "20rem",
+  }}
+>
+  <Sidebar />
+</SidebarProvider>
+```
+
+This will handle the width of the sidebar but also the layout spacing.
+
+### Keyboard Shortcut
+
+The `SIDEBAR_KEYBOARD_SHORTCUT` variable is used to set the keyboard shortcut used to open and close the sidebar.
+
+To trigger the sidebar, you use the `cmd+b` keyboard shortcut on Mac and `ctrl+b` on Windows.
+
+You can change the keyboard shortcut by updating the `SIDEBAR_KEYBOARD_SHORTCUT` variable.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+```
+
+### Persisted State
+
+The `SidebarProvider` supports persisting the sidebar state across page reloads and server-side rendering. It uses cookies to store the current state of the sidebar. When the sidebar state changes, a default cookie named `sidebar_state` is set with the current open/closed state. This cookie is then read on subsequent page loads to restore the sidebar state.
+
+To persist sidebar state in Next.js, set up your `SidebarProvider` in `app/layout.tsx` like this:
+
+```tsx showLineNumbers title="app/layout.tsx"
+import { cookies } from "next/headers"
+
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export async function Layout({ children }: { children: React.ReactNode }) {
+  const cookieStore = await cookies()
+  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true"
+
+  return (
+    <SidebarProvider defaultOpen={defaultOpen}>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+```
+
+You can change the name of the cookie by updating the `SIDEBAR_COOKIE_NAME` variable in `sidebar.tsx`.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+```
+
+## Sidebar
+
+The main `Sidebar` component used to render a collapsible sidebar.
+
+```tsx showLineNumbers
+import { Sidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return <Sidebar />
+}
+```
+
+### Props
+
+| Property      | Type                              | Description                       |
+| ------------- | --------------------------------- | --------------------------------- |
+| `side`        | `left` or `right`                 | The side of the sidebar.          |
+| `variant`     | `sidebar`, `floating`, or `inset` | The variant of the sidebar.       |
+| `collapsible` | `offcanvas`, `icon`, or `none`    | Collapsible state of the sidebar. |
+
+### side
+
+Use the `side` prop to change the side of the sidebar.
+
+Available options are `left` and `right`.
+
+```tsx showLineNumbers
+import { Sidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return <Sidebar side="left | right" />
+}
+```
+
+### variant
+
+Use the `variant` prop to change the variant of the sidebar.
+
+Available options are `sidebar`, `floating` and `inset`.
+
+```tsx showLineNumbers
+import { Sidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return <Sidebar variant="sidebar | floating | inset" />
+}
+```
+
+<Callout>
+  **Note:** If you use the `inset` variant, remember to wrap your main content
+  in a `SidebarInset` component.
+</Callout>
+
+```tsx showLineNumbers
+<SidebarProvider>
+  <Sidebar variant="inset" />
+  <SidebarInset>
+    <main>{children}</main>
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### collapsible
+
+Use the `collapsible` prop to make the sidebar collapsible.
+
+Available options are `offcanvas`, `icon` and `none`.
+
+```tsx showLineNumbers
+import { Sidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return <Sidebar collapsible="offcanvas | icon | none" />
+}
+```
+
+| Prop        | Description                                                  |
+| ----------- | ------------------------------------------------------------ |
+| `offcanvas` | A collapsible sidebar that slides in from the left or right. |
+| `icon`      | A sidebar that collapses to icons.                           |
+| `none`      | A non-collapsible sidebar.                                   |
+
+## useSidebar
+
+The `useSidebar` hook is used to control the sidebar.
+
+```tsx showLineNumbers
+import { useSidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  const {
+    state,
+    open,
+    setOpen,
+    openMobile,
+    setOpenMobile,
+    isMobile,
+    toggleSidebar,
+  } = useSidebar()
+}
+```
+
+| Property        | Type                      | Description                                   |
+| --------------- | ------------------------- | --------------------------------------------- |
+| `state`         | `expanded` or `collapsed` | The current state of the sidebar.             |
+| `open`          | `boolean`                 | Whether the sidebar is open.                  |
+| `setOpen`       | `(open: boolean) => void` | Sets the open state of the sidebar.           |
+| `openMobile`    | `boolean`                 | Whether the sidebar is open on mobile.        |
+| `setOpenMobile` | `(open: boolean) => void` | Sets the open state of the sidebar on mobile. |
+| `isMobile`      | `boolean`                 | Whether the sidebar is on mobile.             |
+| `toggleSidebar` | `() => void`              | Toggles the sidebar. Desktop and mobile.      |
+
+## SidebarHeader
+
+Use the `SidebarHeader` component to add a sticky header to the sidebar.
+
+The following example adds a `<DropdownMenu>` to the `SidebarHeader`.
+
+<figure className="flex flex-col gap-4 mt-6">
+  <ComponentPreview
+    name="sidebar-header"
+    title="Sidebar"
+    type="block"
+    description="A sidebar header with a dropdown menu."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar header with a dropdown menu.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+<Sidebar>
+  <SidebarHeader>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton>
+              Select Workspace
+              <ChevronDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-[--radix-popper-anchor-width]">
+            <DropdownMenuItem>
+              <span>Acme Inc</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <span>Acme Corp.</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarHeader>
+</Sidebar>
+```
+
+## SidebarFooter
+
+Use the `SidebarFooter` component to add a sticky footer to the sidebar.
+
+The following example adds a `<DropdownMenu>` to the `SidebarFooter`.
+
+<figure className="flex flex-col gap-4 mt-6">
+  <ComponentPreview
+    name="sidebar-footer"
+    title="Sidebar"
+    type="block"
+    description="A sidebar footer with a dropdown menu."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar footer with a dropdown menu.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+export function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader />
+        <SidebarContent />
+        <SidebarFooter>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton>
+                    <User2 /> Username
+                    <ChevronUp className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  side="top"
+                  className="w-[--radix-popper-anchor-width]"
+                >
+                  <DropdownMenuItem>
+                    <span>Account</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Billing</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Sign out</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
+```
+
+## SidebarContent
+
+The `SidebarContent` component is used to wrap the content of the sidebar. This is where you add your `SidebarGroup` components. It is scrollable.
+
+```tsx showLineNumbers
+import { Sidebar, SidebarContent } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup />
+        <SidebarGroup />
+      </SidebarContent>
+    </Sidebar>
+  )
+}
+```
+
+## SidebarGroup
+
+Use the `SidebarGroup` component to create a section within the sidebar.
+
+A `SidebarGroup` has a `SidebarGroupLabel`, a `SidebarGroupContent` and an optional `SidebarGroupAction`.
+
+<figure className="flex flex-col gap-4 mt-6">
+  <ComponentPreview
+    name="sidebar-group"
+    title="Sidebar Group"
+    type="block"
+    description="A sidebar group."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar group.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+import { Sidebar, SidebarContent, SidebarGroup } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupAction>
+            <Plus /> <span className="sr-only">Add Project</span>
+          </SidebarGroupAction>
+          <SidebarGroupContent></SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
+```
+
+## Collapsible SidebarGroup
+
+To make a `SidebarGroup` collapsible, wrap it in a `Collapsible`.
+
+<figure className="flex flex-col gap-4 mt-6">
+  <ComponentPreview
+    name="sidebar-group-collapsible"
+    title="Sidebar Group"
+    type="block"
+    description="A collapsible sidebar group."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A collapsible sidebar group.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+export function AppSidebar() {
+  return (
+    <Collapsible defaultOpen className="group/collapsible">
+      <SidebarGroup>
+        <SidebarGroupLabel asChild>
+          <CollapsibleTrigger>
+            Help
+            <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+          </CollapsibleTrigger>
+        </SidebarGroupLabel>
+        <CollapsibleContent>
+          <SidebarGroupContent />
+        </CollapsibleContent>
+      </SidebarGroup>
+    </Collapsible>
+  )
+}
+```
+
+<Callout>
+  **Note:** We wrap the `CollapsibleTrigger` in a `SidebarGroupLabel` to render
+  a button.
+</Callout>
+
+## SidebarGroupAction
+
+Use the `SidebarGroupAction` component to add an action button to the `SidebarGroup`.
+
+```tsx showLineNumbers {5-7}
+export function AppSidebar() {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel asChild>Projects</SidebarGroupLabel>
+      <SidebarGroupAction title="Add Project">
+        <Plus /> <span className="sr-only">Add Project</span>
+      </SidebarGroupAction>
+      <SidebarGroupContent />
+    </SidebarGroup>
+  )
+}
+```
+
+<figure className="flex flex-col gap-4">
+  <ComponentPreview
+    name="sidebar-group-action"
+    title="Sidebar Group"
+    type="block"
+    description="A sidebar group with an action button."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar group with an action button.
+  </figcaption>
+</figure>
+
+## SidebarMenu
+
+The `SidebarMenu` component is used for building a menu within a `SidebarGroup`.
+
+A `SidebarMenu` component is composed of `SidebarMenuItem`, `SidebarMenuButton`, `<SidebarMenuAction />` and `<SidebarMenuSub />` components.
+
+<Image
+  src="/images/sidebar-menu.png"
+  width="716"
+  height="420"
+  alt="Sidebar Menu"
+  className="border dark:hidden rounded-lg overflow-hidden mt-6 w-full"
+/>
+<Image
+  src="/images/sidebar-menu-dark.png"
+  width="716"
+  height="420"
+  alt="Sidebar Menu"
+  className="border hidden dark:block rounded-lg overflow-hidden mt-6 w-full"
+/>
+
+Here's an example of a `SidebarMenu` component rendering a list of projects.
+
+<figure className="flex flex-col gap-4 mt-6">
+  <ComponentPreview
+    name="sidebar-menu"
+    title="Sidebar Menu"
+    type="block"
+    description="A sidebar menu with a list of projects."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar menu with a list of projects.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+<Sidebar>
+  <SidebarContent>
+    <SidebarGroup>
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {projects.map((project) => (
+            <SidebarMenuItem key={project.name}>
+              <SidebarMenuButton asChild>
+                <a href={project.url}>
+                  <project.icon />
+                  <span>{project.name}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  </SidebarContent>
+</Sidebar>
+```
+
+## SidebarMenuButton
+
+The `SidebarMenuButton` component is used to render a menu button within a `SidebarMenuItem`.
+
+### Link or Anchor
+
+By default, the `SidebarMenuButton` renders a button but you can use the `asChild` prop to render a different component such as a `Link` or an `a` tag.
+
+```tsx showLineNumbers
+<SidebarMenuButton asChild>
+  <a href="#">Home</a>
+</SidebarMenuButton>
+```
+
+### Icon and Label
+
+You can render an icon and a truncated label inside the button. Remember to wrap the label in a `<span>`.
+
+```tsx showLineNumbers
+<SidebarMenuButton asChild>
+  <a href="#">
+    <Home />
+    <span>Home</span>
+  </a>
+</SidebarMenuButton>
+```
+
+### isActive
+
+Use the `isActive` prop to mark a menu item as active.
+
+```tsx showLineNumbers
+<SidebarMenuButton asChild isActive>
+  <a href="#">Home</a>
+</SidebarMenuButton>
+```
+
+## SidebarMenuAction
+
+The `SidebarMenuAction` component is used to render a menu action within a `SidebarMenuItem`.
+
+This button works independently of the `SidebarMenuButton` i.e you can have the `<SidebarMenuButton />` as a clickable link and the `<SidebarMenuAction />` as a button.
+
+```tsx showLineNumbers
+<SidebarMenuItem>
+  <SidebarMenuButton asChild>
+    <a href="#">
+      <Home />
+      <span>Home</span>
+    </a>
+  </SidebarMenuButton>
+  <SidebarMenuAction>
+    <Plus /> <span className="sr-only">Add Project</span>
+  </SidebarMenuAction>
+</SidebarMenuItem>
+```
+
+### DropdownMenu
+
+Here's an example of a `SidebarMenuAction` component rendering a `DropdownMenu`.
+
+<figure className="flex flex-col gap-4 mt-6">
+  <ComponentPreview
+    name="sidebar-menu-action"
+    title="Sidebar Menu Action"
+    type="block"
+    description="A sidebar menu action with a dropdown menu."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar menu action with a dropdown menu.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+<SidebarMenuItem>
+  <SidebarMenuButton asChild>
+    <a href="#">
+      <Home />
+      <span>Home</span>
+    </a>
+  </SidebarMenuButton>
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <SidebarMenuAction>
+        <MoreHorizontal />
+      </SidebarMenuAction>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent side="right" align="start">
+      <DropdownMenuItem>
+        <span>Edit Project</span>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <span>Delete Project</span>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</SidebarMenuItem>
+```
+
+## SidebarMenuSub
+
+The `SidebarMenuSub` component is used to render a submenu within a `SidebarMenu`.
+
+Use `<SidebarMenuSubItem />` and `<SidebarMenuSubButton />` to render a submenu item.
+
+<figure className="flex flex-col gap-4 mt-6">
+  <ComponentPreview
+    name="sidebar-menu-sub"
+    title="Sidebar Menu Sub"
+    type="block"
+    description="A sidebar menu sub."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar menu with a submenu.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+<SidebarMenuItem>
+  <SidebarMenuButton />
+  <SidebarMenuSub>
+    <SidebarMenuSubItem>
+      <SidebarMenuSubButton />
+    </SidebarMenuSubItem>
+    <SidebarMenuSubItem>
+      <SidebarMenuSubButton />
+    </SidebarMenuSubItem>
+  </SidebarMenuSub>
+</SidebarMenuItem>
+```
+
+## Collapsible SidebarMenu
+
+To make a `SidebarMenu` component collapsible, wrap it and the `SidebarMenuSub` components in a `Collapsible`.
+
+<figure className="flex flex-col gap-4 mt-6">
+  <ComponentPreview
+    name="sidebar-menu-collapsible"
+    title="Sidebar Menu"
+    type="block"
+    description="A collapsible sidebar menu."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A collapsible sidebar menu.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+<SidebarMenu>
+  <Collapsible defaultOpen className="group/collapsible">
+    <SidebarMenuItem>
+      <CollapsibleTrigger asChild>
+        <SidebarMenuButton />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <SidebarMenuSub>
+          <SidebarMenuSubItem />
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </SidebarMenuItem>
+  </Collapsible>
+</SidebarMenu>
+```
+
+## SidebarMenuBadge
+
+The `SidebarMenuBadge` component is used to render a badge within a `SidebarMenuItem`.
+
+<figure className="flex flex-col gap-4 mt-6">
+  <ComponentPreview
+    name="sidebar-menu-badge"
+    title="Sidebar Menu Badge"
+    type="block"
+    description="A sidebar menu badge."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar menu with a badge.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+<SidebarMenuItem>
+  <SidebarMenuButton />
+  <SidebarMenuBadge>24</SidebarMenuBadge>
+</SidebarMenuItem>
+```
+
+## SidebarMenuSkeleton
+
+The `SidebarMenuSkeleton` component is used to render a skeleton for a `SidebarMenu`. You can use this to show a loading state when using React Server Components, SWR or react-query.
+
+```tsx showLineNumbers
+function NavProjectsSkeleton() {
+  return (
+    <SidebarMenu>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <SidebarMenuItem key={index}>
+          <SidebarMenuSkeleton />
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+```
+
+## SidebarSeparator
+
+The `SidebarSeparator` component is used to render a separator within a `Sidebar`.
+
+```tsx showLineNumbers
+<Sidebar>
+  <SidebarHeader />
+  <SidebarSeparator />
+  <SidebarContent>
+    <SidebarGroup />
+    <SidebarSeparator />
+    <SidebarGroup />
+  </SidebarContent>
+</Sidebar>
+```
+
+## SidebarTrigger
+
+Use the `SidebarTrigger` component to render a button that toggles the sidebar.
+
+The `SidebarTrigger` component must be used within a `SidebarProvider`.
+
+```tsx showLineNumbers
+<SidebarProvider>
+  <Sidebar />
+  <main>
+    <SidebarTrigger />
+  </main>
+</SidebarProvider>
+```
+
+### Custom Trigger
+
+To create a custom trigger, you can use the `useSidebar` hook.
+
+```tsx showLineNumbers
+import { useSidebar } from "@/components/ui/sidebar"
+
+export function CustomTrigger() {
+  const { toggleSidebar } = useSidebar()
+
+  return <button onClick={toggleSidebar}>Toggle Sidebar</button>
+}
+```
+
+## SidebarRail
+
+The `SidebarRail` component is used to render a rail within a `Sidebar`. This rail can be used to toggle the sidebar.
+
+```tsx showLineNumbers
+<Sidebar>
+  <SidebarHeader />
+  <SidebarContent>
+    <SidebarGroup />
+  </SidebarContent>
+  <SidebarFooter />
+  <SidebarRail />
+</Sidebar>
+```
+
+## Data Fetching
+
+### React Server Components
+
+Here's an example of a `SidebarMenu` component rendering a list of projects using React Server Components.
+
+<figure className="flex flex-col gap-4 mt-6">
+  <ComponentPreview
+    name="sidebar-rsc"
+    title="Sidebar Menu RSC"
+    type="block"
+    description="A sidebar menu using React Server Components."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A sidebar menu using React Server Components.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers {6} title="Skeleton to show loading state."
+function NavProjectsSkeleton() {
+  return (
+    <SidebarMenu>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <SidebarMenuItem key={index}>
+          <SidebarMenuSkeleton showIcon />
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+```
+
+```tsx showLineNumbers {2} title="Server component fetching data."
+async function NavProjects() {
+  const projects = await fetchProjects()
+
+  return (
+    <SidebarMenu>
+      {projects.map((project) => (
+        <SidebarMenuItem key={project.name}>
+          <SidebarMenuButton asChild>
+            <a href={project.url}>
+              <project.icon />
+              <span>{project.name}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+```
+
+```tsx showLineNumbers {8-10} title="Usage with React Suspense."
+function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <React.Suspense fallback={<NavProjectsSkeleton />}>
+              <NavProjects />
+            </React.Suspense>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
+```
+
+### SWR and React Query
+
+You can use the same approach with [SWR](https://swr.vercel.app/) or [react-query](https://tanstack.com/query/latest/docs/framework/react/overview).
+
+```tsx showLineNumbers title="SWR"
+function NavProjects() {
+  const { data, isLoading } = useSWR("/api/projects", fetcher)
+
+  if (isLoading) {
+    return (
+      <SidebarMenu>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <SidebarMenuItem key={index}>
+            <SidebarMenuSkeleton showIcon />
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    )
+  }
+
+  if (!data) {
+    return ...
+  }
+
+  return (
+    <SidebarMenu>
+      {data.map((project) => (
+        <SidebarMenuItem key={project.name}>
+          <SidebarMenuButton asChild>
+            <a href={project.url}>
+              <project.icon />
+              <span>{project.name}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+```
+
+```tsx showLineNumbers title="React Query"
+function NavProjects() {
+  const { data, isLoading } = useQuery()
+
+  if (isLoading) {
+    return (
+      <SidebarMenu>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <SidebarMenuItem key={index}>
+            <SidebarMenuSkeleton showIcon />
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    )
+  }
+
+  if (!data) {
+    return ...
+  }
+
+  return (
+    <SidebarMenu>
+      {data.map((project) => (
+        <SidebarMenuItem key={project.name}>
+          <SidebarMenuButton asChild>
+            <a href={project.url}>
+              <project.icon />
+              <span>{project.name}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+```
+
+## Controlled Sidebar
+
+Use the `open` and `onOpenChange` props to control the sidebar.
+
+<figure className="flex flex-col gap-4 mt-6">
+  <ComponentPreview
+    name="sidebar-controlled"
+    title="Sidebar Controlled"
+    type="block"
+    description="A controlled sidebar."
+    className="w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    A controlled sidebar.
+  </figcaption>
+</figure>
+
+```tsx showLineNumbers
+export function AppSidebar() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <SidebarProvider open={open} onOpenChange={setOpen}>
+      <Sidebar />
+    </SidebarProvider>
+  )
+}
+```
+
+## Theming
+
+We use the following CSS variables to theme the sidebar.
+
+```css
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 0 0% 98%;
+    --sidebar-primary-foreground: 240 5.9% 10%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+```
+
+**We intentionally use different variables for the sidebar and the rest of the application** to make it easy to have a sidebar that is styled differently from the rest of the application. Think a sidebar with a darker shade from the main application.
+
+## Styling
+
+Here are some tips for styling the sidebar based on different states.
+
+- **Styling an element based on the sidebar collapsible state.** The following will hide the `SidebarGroup` when the sidebar is in `icon` mode.
+
+```tsx
+<Sidebar collapsible="icon">
+  <SidebarContent>
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden" />
+  </SidebarContent>
+</Sidebar>
+```
+
+- **Styling a menu action based on the menu button active state.** The following will force the menu action to be visible when the menu button is active.
+
+```tsx
+<SidebarMenuItem>
+  <SidebarMenuButton />
+  <SidebarMenuAction className="peer-data-[active=true]/menu-button:opacity-100" />
+</SidebarMenuItem>
+```
+
+You can find more tips on using states for styling in this [Twitter thread](https://x.com/shadcn/status/1842329158879420864).
+
+## Changelog
+
+### 2024-10-30 Cookie handling in setOpen
+
+- [#5593](https://github.com/shadcn-ui/ui/pull/5593) - Improved setOpen callback logic in `<SidebarProvider>`.
+
+Update the `setOpen` callback in `<SidebarProvider>` as follows:
+
+```tsx showLineNumbers
+const setOpen = React.useCallback(
+  (value: boolean | ((value: boolean) => boolean)) => {
+    const openState = typeof value === "function" ? value(open) : value
+    if (setOpenProp) {
+      setOpenProp(openState)
+    } else {
+      _setOpen(openState)
+    }
+
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  },
+  [setOpenProp, open]
+)
+```
+
+### 2024-10-21 Fixed `text-sidebar-foreground`
+
+- [#5491](https://github.com/shadcn-ui/ui/pull/5491) - Moved `text-sidebar-foreground` from `<SidebarProvider>` to `<Sidebar>` component.
+
+### 2024-10-20 Typo in `useSidebar` hook.
+
+Fixed typo in `useSidebar` hook.
+
+```diff showLineNumbers title="sidebar.tsx"
+-  throw new Error("useSidebar must be used within a Sidebar.")
++  throw new Error("useSidebar must be used within a SidebarProvider.")
+```
diff --git a/apps/www/content/docs/components/skeleton.mdx b/apps/www/content/docs/components/skeleton.mdx
index 321be87112b..42429f581a1 100644
--- a/apps/www/content/docs/components/skeleton.mdx
+++ b/apps/www/content/docs/components/skeleton.mdx
@@ -8,7 +8,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add skeleton
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/slider.mdx b/apps/www/content/docs/components/slider.mdx
index 2adebc829d2..f68c7239db2 100644
--- a/apps/www/content/docs/components/slider.mdx
+++ b/apps/www/content/docs/components/slider.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-slider
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/sonner.mdx b/apps/www/content/docs/components/sonner.mdx
index 79bdcb5716f..a3898bc6f60 100644
--- a/apps/www/content/docs/components/sonner.mdx
+++ b/apps/www/content/docs/components/sonner.mdx
@@ -14,7 +14,7 @@ Sonner is built and maintained by [emilkowalski\_](https://twitter.com/emilkowal
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -88,7 +88,7 @@ export default function RootLayout({ children }) {
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx
index 26414944bb3..9a751576c0d 100644
--- a/apps/www/content/docs/components/switch.mdx
+++ b/apps/www/content/docs/components/switch.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-switch
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/table.mdx b/apps/www/content/docs/components/table.mdx
index 7d516089b84..0c281351e91 100644
--- a/apps/www/content/docs/components/table.mdx
+++ b/apps/www/content/docs/components/table.mdx
@@ -8,7 +8,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add table
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/tabs.mdx b/apps/www/content/docs/components/tabs.mdx
index 8a886d77492..83807abefb1 100644
--- a/apps/www/content/docs/components/tabs.mdx
+++ b/apps/www/content/docs/components/tabs.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-tabs
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/textarea.mdx b/apps/www/content/docs/components/textarea.mdx
index a63b8e62ceb..58b0ebfb39b 100644
--- a/apps/www/content/docs/components/textarea.mdx
+++ b/apps/www/content/docs/components/textarea.mdx
@@ -8,7 +8,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add textarea
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/toast.mdx b/apps/www/content/docs/components/toast.mdx
index 87b6c45decc..0790c9b12ac 100644
--- a/apps/www/content/docs/components/toast.mdx
+++ b/apps/www/content/docs/components/toast.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -97,7 +97,7 @@ export default function RootLayout({ children }) {
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/toggle-group.mdx b/apps/www/content/docs/components/toggle-group.mdx
index dea014fb8d2..53734afa854 100644
--- a/apps/www/content/docs/components/toggle-group.mdx
+++ b/apps/www/content/docs/components/toggle-group.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-toggle-group
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/toggle.mdx b/apps/www/content/docs/components/toggle.mdx
index 132a597b989..56696b0fe80 100644
--- a/apps/www/content/docs/components/toggle.mdx
+++ b/apps/www/content/docs/components/toggle.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-toggle
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/tooltip.mdx b/apps/www/content/docs/components/tooltip.mdx
index b88d5a9356d..bce711b8c23 100644
--- a/apps/www/content/docs/components/tooltip.mdx
+++ b/apps/www/content/docs/components/tooltip.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-tooltip
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/dark-mode/next.mdx b/apps/www/content/docs/dark-mode/next.mdx
index 175014c4ec8..0b8180f4f34 100644
--- a/apps/www/content/docs/dark-mode/next.mdx
+++ b/apps/www/content/docs/dark-mode/next.mdx
@@ -22,18 +22,20 @@ npm install next-themes
 
 import * as React from "react"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { type ThemeProviderProps } from "next-themes/dist/types"
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }
 ```
 
 ### Wrap your root layout
 
-Add the `ThemeProvider` to your root layout.
+Add the `ThemeProvider` to your root layout and add the `suppressHydrationWarning` prop to the `html` tag.
 
-```tsx {1,9-11} title="app/layout.tsx"
+```tsx {1,6,9-14,16} title="app/layout.tsx"
 import { ThemeProvider } from "@/components/theme-provider"
 
 export default function RootLayout({ children }: RootLayoutProps) {
diff --git a/apps/www/content/docs/figma.mdx b/apps/www/content/docs/figma.mdx
index 92f5400e15b..40d119ae58c 100644
--- a/apps/www/content/docs/figma.mdx
+++ b/apps/www/content/docs/figma.mdx
@@ -3,15 +3,11 @@ title: Figma
 description: Every component recreated in Figma. With customizable props, typography and icons.
 ---
 
-The Figma UI Kit is open sourced by [Pietro Schirano](https://twitter.com/skirano).
+## Paid
 
-<AspectRatio ratio={16 / 9} className="w-full mt-4">
-  <iframe
-    src="https://embed.figma.com/file/1203061493325953101/hf_embed?community_viewer=true&embed_host=shadcn&hub_file_id=1203061493325953101&kind=&viewer=1"
-    className="h-full w-full overflow-hidden rounded-lg border bg-muted"
-  />
-</AspectRatio>
+- [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.
 
-## Grab a copy
+## Free
 
-https://www.figma.com/community/file/1203061493325953101
+- [shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
+- [Obra shadcn/ui](https://www.figma.com/community/file/1514746685758799870/obra-shadcn-ui) by [Obra Studio](https://https://obra.studio/) - Carefully crafted kit designed in the philosophy of shadcn, tracks v4, MIT licensed
diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx
index 826f0bcc822..b35634805ed 100644
--- a/apps/www/content/docs/index.mdx
+++ b/apps/www/content/docs/index.mdx
@@ -1,67 +1,77 @@
 ---
 title: Introduction
-description: Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
+description: shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.
 ---
 
-This is **NOT** a component library. It's a collection of re-usable components that you can copy and paste into your apps.
+**This is not a component library. It is how you build your component library.**
 
-**What do you mean by not a component library?**
+You know how most traditional component libraries work: you install a package from NPM, import the components, and use them in your app.
 
-I mean you do not install it as a dependency. It is not available or distributed via npm.
+This approach works well until you need to customize a component to fit your design system or require one that isn’t included in the library. **Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.**
 
-Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.
+This is what shadcn/ui aims to solve. It is built around the following principles:
 
-_Use this as a reference to build your own component libraries._
+- **Open Code:** The top layer of your component code is open for modification.
+- **Composition:** Every component uses a common, composable interface, making them predictable.
+- **Distribution:** A flat-file schema and command-line tool make it easy to distribute components.
+- **Beautiful Defaults:** Carefully chosen default styles, so you get great design out-of-the-box.
+- **AI-Ready:** Open code for LLMs to read, understand, and improve.
 
-## FAQ
+## Open Code
 
-<Accordion type="multiple">
+shadcn/ui hands you the actual component code. You have full control to customize and extend the components to your needs. This means:
 
-<AccordionItem value="faq-1">
-	<AccordionTrigger>
-		Why copy/paste and not packaged as a dependency?
-	</AccordionTrigger>
-	<AccordionContent>
-The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled.
+- **Full Transparency:** You see exactly how each component is built.
+- **Easy Customization:** Modify any part of a component to fit your design and functionality requirements.
+- **AI Integration:** Access to the code makes it straightforward for LLMs to read, understand, and even improve your components.
 
-Start with some sensible defaults, then customize the components to your needs.
+_In a typical library, if you need to change a button’s behavior, you have to override styles or wrap the component. With shadcn/ui, you simply edit the button code directly._
 
-One of the drawbacks of packaging the components in an npm package is that the style is coupled with the implementation. _The design of your components should be separate from their implementation._
+<Accordion collapsible>
+  <AccordionItem value="faq-1" className="border-none">
+    <AccordionTrigger>
+      How do I pull upstream updates in an Open Code approach?
+    </AccordionTrigger>
+    <AccordionContent>
+      <p>
+        shadcn/ui follows a headless component architecture. This means the core
+        of your app can receive fixes by updating your dependencies, for
+        instance, radix-ui or input-otp.
+      </p>
+      <p className="mt-4">
+        The topmost layer, i.e., the one closest to your design system, is not
+        coupled with the implementation of the library. It stays open for
+        modification.
+      </p>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
 
-</AccordionContent>
-</AccordionItem>
+## Composition
 
-<AccordionItem value="faq-2">
-  <AccordionTrigger>
-    Do you plan to publish it as an npm package?
-  </AccordionTrigger>
-  <AccordionContent>
-    No. I have no plans to publish it as an npm package.
-  </AccordionContent>
-</AccordionItem>
+Every component in shadcn/ui shares a common, composable interface. **If a component does not exist, we bring it in, make it composable, and adjust its style to match and work with the rest of the design system.**
 
-<AccordionItem value="faq-3">
-<AccordionTrigger>
-Which frameworks are supported?
-</AccordionTrigger>
-<AccordionContent>
+_A shared, composable interface means it's predictable for both your team and LLMs. You are not learning different APIs for every new component. Even for third-party ones._
 
-You can use any framework that supports React. [Next.js](https://ui.shadcn.com/docs/installation/next), [Astro](https://ui.shadcn.com/docs/installation/astro), [Remix](https://ui.shadcn.com/docs/installation/remix), [Gatsby](https://ui.shadcn.com/docs/installation/gatsby) etc.
+## Distribution
 
-</AccordionContent>
-</AccordionItem>
+shadcn/ui is also a code distribution system. It defines a schema for components and a CLI to distribute them.
 
-<AccordionItem value="faq-4">
-	<AccordionTrigger>
-	Can I use this in my project?
-	</AccordionTrigger>
-	<AccordionContent>
-Yes. Free to use for personal and commercial projects. No attribution required.
+- **Schema:** A flat-file structure that defines the components, their dependencies, and properties.
+- **CLI:** A command-line tool to distribute and install components across projects with cross-framework support.
 
-But hey, let me know if you do. I'd love to see what you build.
+_You can use the schema to distribute your components to other projects or have AI generate completely new components based on existing schema._
 
-    </AccordionContent>
+## Beautiful Defaults
 
-</AccordionItem>
+shadcn/ui comes with a large collection of components that have carefully chosen default styles. They are designed to look good on their own and to work well together as a consistent system:
 
-</Accordion>
+- **Good Out-of-the-Box:** Your UI has a clean and minimal look without extra work.
+- **Unified Design:** Components naturally fit with one another. Each component is built to match the others, keeping your UI consistent.
+- **Easily Customizable:** If you want to change something, it's simple to override and extend the defaults.
+
+## AI-Ready
+
+The design of shadcn/ui makes it easy for AI tools to work with your code. Its open code and consistent API allow AI models to read, understand, and even generate new components.
+
+_An AI model can learn how your components work and suggest improvements or even create new components that integrate with your existing design._
diff --git a/apps/www/content/docs/installation/astro.mdx b/apps/www/content/docs/installation/astro.mdx
index 6f1e47db509..6ab9f227800 100644
--- a/apps/www/content/docs/installation/astro.mdx
+++ b/apps/www/content/docs/installation/astro.mdx
@@ -1,8 +1,13 @@
 ---
 title: Astro
-description: Install and configure Astro.
+description: Install and configure shadcn/ui for Astro
 ---
 
+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Note:** The following guide is for Tailwind v4. If you are using Tailwind
+  v3, use `shadcn@2.3.0`.
+</Callout>
+
 <Steps>
 
 ### Create project
@@ -10,72 +15,7 @@ description: Install and configure Astro.
 Start by creating a new Astro project:
 
 ```bash
-npm create astro@latest
-```
-
-### Configure your Astro project
-
-You will be asked a few questions to configure your project:
-
-```txt showLineNumbers
-- Where should we create your new project? ./your-app-name
-- How would you like to start your new project? Choose a template
-- Do you plan to write TypeScript? Yes
-- How strict should TypeScript be? Strict
-- Install dependencies? Yes
-- Initialize a new git repository? (optional) Yes/No
-```
-
-### Add React to your project
-
-Install React using the Astro CLI:
-
-```bash
-npx astro add react
-```
-
-<Callout className="mt-4">
-
-Answer `Yes` to all the question prompted by the CLI when installing React.
-
-</Callout>
-
-### Add Tailwind CSS to your project
-
-```bash
-npx astro add tailwind
-```
-
-<Step>Create a `styles/globals.css` file in the `src` folder.</Step>
-
-```css title="styles/globals.css" showLineNumbers
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-<Step>Import the `globals.css` file</Step>
-
-Import the `styles/globals.css` file in the `src/pages/index.astro` file:
-
-```ts title="src/pages/index.astro" showLineNumbers
----
-import '@/styles/globals.css'
----
-```
-
-<Step>Update `astro.config.mjs` and set `applyBaseStyles` to `false`</Step>
-
-To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `globals.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`.
-
-```js title="astro.config.mjs" {3-5} showLineNumbers
-export default defineConfig({
-  integrations: [
-    tailwind({
-      applyBaseStyles: false,
-    }),
-  ],
-})
+npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
 ```
 
 ### Edit tsconfig.json file
@@ -105,7 +45,7 @@ Run the `shadcn` init command to setup your project:
 npx shadcn@latest init
 ```
 
-### That's it
+### Add Components
 
 You can now start adding components to your project.
 
@@ -115,17 +55,24 @@ npx shadcn@latest add button
 
 The command above will add the `Button` component to your project. You can then import it like this:
 
-```astro {2,10} showLineNumbers
+```astro title="src/pages/index.astro" {2,16} showLineNumbers
 ---
 import { Button } from "@/components/ui/button"
 ---
 
 <html lang="en">
 	<head>
-		<title>Astro</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro + TailwindCSS</title>
 	</head>
+
 	<body>
-		<Button>Hello World</Button>
+		<div class="grid place-items-center h-screen content-center">
+			<Button>Button</Button>
+		</div>
 	</body>
 </html>
 ```
diff --git a/apps/www/content/docs/installation/gatsby.mdx b/apps/www/content/docs/installation/gatsby.mdx
index 9e6364b3873..9b6dbf9ff2d 100644
--- a/apps/www/content/docs/installation/gatsby.mdx
+++ b/apps/www/content/docs/installation/gatsby.mdx
@@ -3,6 +3,12 @@ title: Gatsby
 description: Install and configure Gatsby.
 ---
 
+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Update:** We have added full support for React 19 and Tailwind v4 in the
+  `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
+  information.
+</Callout>
+
 <Steps>
 
 ### Create project
@@ -73,7 +79,7 @@ export const onCreateWebpackConfig = ({ actions }) => {
 
 ### Run the CLI
 
-Run the `shadcn-ui` init command to setup your project:
+Run the `shadcn` init command to setup your project:
 
 ```bash
 npx shadcn@latest init
diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx
index c1adfdc0326..0cd21b1f6ff 100644
--- a/apps/www/content/docs/installation/index.mdx
+++ b/apps/www/content/docs/installation/index.mdx
@@ -32,18 +32,28 @@ description: How to install dependencies and structure your app.
     </svg>
     <p className="font-medium mt-2">Vite</p>
   </LinkedCard>
-  <LinkedCard href="/docs/installation/remix">
+  <LinkedCard href="/docs/installation/laravel">
     <svg
       role="img"
-      viewBox="0 0 24 24"
+      viewBox="0 0 62 65"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+    >
+      <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" />
+    </svg>
+    <p className="font-medium mt-2">Laravel</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/react-router">
+    <svg
       xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
       className="w-10 h-10"
       fill="currentColor"
     >
-      <title>Remix</title>
-      <path d="M21.511 18.508c.216 2.773.216 4.073.216 5.492H15.31c0-.309.006-.592.011-.878.018-.892.036-1.821-.109-3.698-.19-2.747-1.374-3.358-3.55-3.358H1.574v-5h10.396c2.748 0 4.122-.835 4.122-3.049 0-1.946-1.374-3.125-4.122-3.125H1.573V0h11.541c6.221 0 9.313 2.938 9.313 7.632 0 3.511-2.176 5.8-5.114 6.182 2.48.497 3.93 1.909 4.198 4.694ZM1.573 24v-3.727h6.784c1.133 0 1.379.84 1.379 1.342V24Z" />
+      <path d="M12.118 5.466a2.306 2.306 0 0 0-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 0 0-1.613-.73zm-4.785 4.36a2.145 2.145 0 0 0-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 0 0-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z" />
     </svg>
-    <p className="font-medium mt-2">Remix</p>
+    <p className="font-medium mt-2">React Router</p>
   </LinkedCard>
   <LinkedCard href="/docs/installation/astro">
     <svg
@@ -61,17 +71,27 @@ description: How to install dependencies and structure your app.
     </svg>
     <p className="font-medium mt-2">Astro</p>
   </LinkedCard>
-  <LinkedCard href="/docs/installation/laravel">
+  <LinkedCard href="/docs/installation/tanstack">
     <svg
-      role="img"
-      viewBox="0 0 62 65"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className="w-10 h-10"
       fill="currentColor"
+    >
+      <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
+    </svg>
+    <p className="font-medium mt-2">TanStack Start</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/tanstack-router">
+    <svg
       xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
       className="w-10 h-10"
+      fill="currentColor"
     >
-      <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" />
+      <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
     </svg>
-    <p className="font-medium mt-2">Laravel</p>
+    <p className="font-medium mt-2">TanStack Router</p>
   </LinkedCard>
   <LinkedCard href="/docs/installation/gatsby">
     <svg
diff --git a/apps/www/content/docs/installation/laravel.mdx b/apps/www/content/docs/installation/laravel.mdx
index 18645c3181c..612f0ee8090 100644
--- a/apps/www/content/docs/installation/laravel.mdx
+++ b/apps/www/content/docs/installation/laravel.mdx
@@ -1,8 +1,13 @@
 ---
 title: Laravel
-description: Install and configure Laravel with Inertia
+description: Install and configure shadcn/ui for Laravel
 ---
 
+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Note:** The following guide is for Tailwind v4. If you are using Tailwind
+  v3, use `shadcn@2.3.0`.
+</Callout>
+
 <Steps>
 
 ### Create project
@@ -10,47 +15,31 @@ description: Install and configure Laravel with Inertia
 Start by creating a new Laravel project with Inertia and React using the laravel installer `laravel new my-app`:
 
 ```bash
-laravel new my-app --typescript --breeze --stack=react --git --no-interaction
-```
-
-### Run the CLI
-
-Run the `shadcn` init command to setup your project:
-
-```bash
-npx shadcn@latest init
+laravel new my-app --react
 ```
 
-### Configure components.json
-
-You will be asked a few questions to configure `components.json`:
-
-```txt showLineNumbers
-Which style would you like to use?
-Which color would you like to use as base color?
-Do you want to use CSS variables for colors? › yes
-```
-
-### That's it
+### Add Components
 
 You can now start adding components to your project.
 
 ```bash
-npx shadcn@latest add button
+npx shadcn@latest add switch
 ```
 
-The command above will add the `Button` component to your project. You can then import it like this:
+The command above will add the `Switch` component to `resources/js/components/ui/switch.tsx`. You can then import it like this:
 
 ```tsx {1,6} showLineNumbers
-import { Button } from "@/Components/ui/button"
+import { Switch } from "@/components/ui/switch"
 
-export default function Home() {
+const MyPage = () => {
   return (
     <div>
-      <Button>Click me</Button>
+      <Switch />
     </div>
   )
 }
+
+export default MyPage
 ```
 
 </Steps>
diff --git a/apps/www/content/docs/installation/manual.mdx b/apps/www/content/docs/installation/manual.mdx
index 4625b2cde47..ad775bdb827 100644
--- a/apps/www/content/docs/installation/manual.mdx
+++ b/apps/www/content/docs/installation/manual.mdx
@@ -16,28 +16,14 @@ 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
-```
-
-### Add icon library
-
-If you're using the `default` style, install `lucide-react`:
-
-```bash
-npm install lucide-react
-```
-
-If you're using the `new-york` style, install `@radix-ui/react-icons`:
-
-```bash
-npm install @radix-ui/react-icons
+npm install class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
 ```
 
 ### Configure path aliases
 
-I use the `@` alias. This is how I configure it in tsconfig.json:
+Configure the path aliases in your `tsconfig.json` file.
 
-```json {3-6} title="tsconfig.json"
+```json {3-6} title="tsconfig.json" showLineNumbers
 {
   "compilerOptions": {
     "baseUrl": ".",
@@ -50,184 +36,139 @@ I use the `@` alias. This is how I configure it in tsconfig.json:
 
 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))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        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")],
-}
-```
-
 ### Configure styles
 
 Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).
 
-```css title="globals.css"
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :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%;
+```css showLineNumbers title="src/styles/globals.css"
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
 
-    --ring: 216 34% 17%;
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
 
-    --radius: 0.5rem;
-  }
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border outline-ring/50;
   }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
 ```
 
 ### Add a cn helper
 
-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"
+```ts showLineNumbers title="lib/utils.ts"
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
@@ -236,6 +177,34 @@ 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": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "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.
diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx
index e9923e2541b..e5d4a2b38d4 100644
--- a/apps/www/content/docs/installation/next.mdx
+++ b/apps/www/content/docs/installation/next.mdx
@@ -1,8 +1,13 @@
 ---
 title: Next.js
-description: Install and configure Next.js.
+description: Install and configure shadcn/ui for Next.js.
 ---
 
+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Note:** The following guide is for Tailwind v4. If you are using Tailwind
+  v3, use `shadcn@2.3.0`.
+</Callout>
+
 <Steps>
 
 ### Create project
@@ -13,27 +18,9 @@ Run the `init` command to create a new Next.js project or to setup an existing o
 npx shadcn@latest init
 ```
 
-<Callout className="mt-4">
-
-You can use the `-d` flag for defaults i.e `new-york`, `zinc` and `yes` for the css variables.
-
-```bash
-npx shadcn@latest init -d
-```
-
-</Callout>
-
-### Configure components.json
-
-You will be asked a few questions to configure `components.json`:
-
-```txt showLineNumbers
-Which style would you like to use? › New York
-Which color would you like to use as base color? › Zinc
-Do you want to use CSS variables for colors? › no / yes
-```
+Choose between a Next.js project or a Monorepo.
 
-### That's it
+### Add Components
 
 You can now start adding components to your project.
 
diff --git a/apps/www/content/docs/installation/react-router.mdx b/apps/www/content/docs/installation/react-router.mdx
new file mode 100644
index 00000000000..5493289d7d4
--- /dev/null
+++ b/apps/www/content/docs/installation/react-router.mdx
@@ -0,0 +1,53 @@
+---
+title: React Router
+description: Install and configure shadcn/ui for React Router.
+---
+
+<Steps>
+
+### Create project
+
+```bash
+npx create-react-router@latest my-app
+```
+
+### Run the CLI
+
+Run the `shadcn` init command to setup your project:
+
+```bash
+npx shadcn@latest init
+```
+
+### Add Components
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@latest add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx showLineNumbers title="app/routes/home.tsx"
+import { Button } from "~/components/ui/button"
+
+import type { Route } from "./+types/home"
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "New React Router App" },
+    { name: "description", content: "Welcome to React Router!" },
+  ]
+}
+
+export default function Home() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-svh">
+      <Button>Click me</Button>
+    </div>
+  )
+}
+```
+
+</Steps>
diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx
index 170d20a8a44..dc60d2581a3 100644
--- a/apps/www/content/docs/installation/remix.mdx
+++ b/apps/www/content/docs/installation/remix.mdx
@@ -1,8 +1,19 @@
 ---
 title: Remix
-description: Install and configure Remix.
+description: Install and configure shadcn/ui for Remix.
 ---
 
+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Note:** The following guide is for Tailwind v4. If you are using Tailwind
+  v3, use `shadcn@2.3.0`.
+</Callout>
+
+<Callout>
+
+**Note:** This guide is for Remix. For React Router, see the [React Router](/docs/installation/react-router) guide.
+
+</Callout>
+
 <Steps>
 
 ### Create project
@@ -15,7 +26,7 @@ npx create-remix@latest my-app
 
 ### Run the CLI
 
-Run the `shadcn-ui` init command to setup your project:
+Run the `shadcn` init command to setup your project:
 
 ```bash
 npx shadcn@latest init
@@ -47,7 +58,7 @@ Do you want to use CSS variables for colors? › no / yes
 ### Install Tailwind CSS
 
 ```bash
-npm add -D tailwindcss@latest autoprefixer@latest
+npm install -D tailwindcss@latest autoprefixer@latest
 ```
 
 Then we create a `postcss.config.js` file:
diff --git a/apps/www/content/docs/installation/tanstack-router.mdx b/apps/www/content/docs/installation/tanstack-router.mdx
new file mode 100644
index 00000000000..7bca31659c3
--- /dev/null
+++ b/apps/www/content/docs/installation/tanstack-router.mdx
@@ -0,0 +1,44 @@
+---
+title: TanStack Router
+description: Install and configure shadcn/ui for TanStack Router.
+---
+
+<Steps>
+
+### Create project
+
+Start by creating a new TanStack Router project:
+
+```bash
+npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
+```
+
+### Add Components
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@canary add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx title="src/routes/index.tsx" showLineNumbers {3,12}
+import { createFileRoute } from "@tanstack/react-router"
+
+import { Button } from "@/components/ui/button"
+
+export const Route = createFileRoute("/")({
+  component: App,
+})
+
+function App() {
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+```
+
+</Steps>
diff --git a/apps/www/content/docs/installation/tanstack.mdx b/apps/www/content/docs/installation/tanstack.mdx
new file mode 100644
index 00000000000..b91e056e75e
--- /dev/null
+++ b/apps/www/content/docs/installation/tanstack.mdx
@@ -0,0 +1,132 @@
+---
+title: TanStack Start
+description: Install and configure shadcn/ui for TanStack Start.
+---
+
+<Steps>
+
+### Create project
+
+Start by creating a new TanStack Start project by following the [Build a Project from Scratch](https://tanstack.com/start/latest/docs/framework/react/build-from-scratch) guide on the TanStack Start website.
+
+**Do not add Tailwind yet. We'll install Tailwind v4 in the next step.**
+
+### Add Tailwind
+
+Install `tailwindcss` and its dependencies.
+
+```bash
+npm install tailwindcss @tailwindcss/postcss postcss
+```
+
+### Create postcss.config.ts
+
+Create a `postcss.config.ts` file at the root of your project.
+
+```ts title="postcss.config.ts" showLineNumbers
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}
+```
+
+### Create `app/styles/app.css`
+
+Create an `app.css` file in the `app/styles` directory and import `tailwindcss`
+
+```css title="app/styles/app.css"
+@import "tailwindcss" source("../");
+```
+
+### Import `app.css`
+
+```tsx title="app/routes/__root.tsx" showLineNumbers {5,21-26} showLineNumbers
+import type { ReactNode } from "react"
+import { Outlet, createRootRoute } from "@tanstack/react-router"
+import { Meta, Scripts } from "@tanstack/start"
+
+import appCss from "@/styles/app.css?url"
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: "utf-8",
+      },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+      {
+        title: "TanStack Start Starter",
+      },
+    ],
+    links: [
+      {
+        rel: "stylesheet",
+        href: appCss,
+      },
+    ],
+  }),
+  component: RootComponent,
+})
+```
+
+### Edit tsconfig.json file
+
+Add the following code to the `tsconfig.json` file to resolve paths.
+
+```ts title="tsconfig.json" showLineNumbers {9-12}
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ES2022",
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./app/*"]
+    }
+  }
+}
+```
+
+### Run the CLI
+
+Run the `shadcn` init command to setup your project:
+
+```bash
+npx shadcn@canary init
+```
+
+This will create a `components.json` file in the root of your project and configure CSS variables inside `app/styles/app.css`.
+
+### That's it
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@canary add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx title="app/routes/index.tsx" showLineNumbers {1,6}
+import { Button } from "@/components/ui/button"
+
+function Home() {
+  const router = useRouter()
+  const state = Route.useLoaderData()
+
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+```
+
+</Steps>
diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx
index 3dcfb4f4f76..3d8bc3cd02a 100644
--- a/apps/www/content/docs/installation/vite.mdx
+++ b/apps/www/content/docs/installation/vite.mdx
@@ -1,26 +1,33 @@
 ---
 title: Vite
-description: Install and configure Vite.
+description: Install and configure shadcn/ui for Vite.
 ---
 
+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Note:** The following guide is for Tailwind v4. If you are using Tailwind
+  v3, use `shadcn@2.3.0`.
+</Callout>
+
 <Steps>
 
 ### Create project
 
-Start by creating a new React project using `vite`:
+Start by creating a new React project using `vite`. Select the **React + TypeScript** template:
 
 ```bash
 npm create vite@latest
 ```
 
-### Add Tailwind and its configuration
-
-Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files:
+### Add Tailwind CSS
 
 ```bash
-npm install -D tailwindcss postcss autoprefixer
+npm install tailwindcss @tailwindcss/vite
+```
 
-npx tailwindcss init -p
+Replace everything in `src/index.css` with the following:
+
+```css title="src/index.css"
+@import "tailwindcss";
 ```
 
 ### Edit tsconfig.json file
@@ -70,20 +77,21 @@ Add the following code to the `tsconfig.app.json` file to resolve paths, for you
 
 ### Update vite.config.ts
 
-Add the following code to the vite.config.ts so your app can resolve paths without error
+Add the following code to the vite.config.ts so your app can resolve paths without error:
 
 ```bash
-# (so you can import "path" without error)
-npm i -D @types/node
+npm install -D @types/node
 ```
 
-```typescript
+```typescript title="vite.config.ts" showLineNumbers {1,2,8-13}
 import path from "path"
+import tailwindcss from "@tailwindcss/vite"
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
 
+// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
@@ -94,23 +102,19 @@ export default defineConfig({
 
 ### Run the CLI
 
-Run the `shadcn-ui` init command to setup your project:
+Run the `shadcn` init command to setup your project:
 
 ```bash
 npx shadcn@latest init
 ```
 
-### Configure components.json
-
-You will be asked a few questions to configure `components.json`:
+You will be asked a few questions to configure `components.json`.
 
-```txt showLineNumbers
-Which style would you like to use? › New York
-Which color would you like to use as base color? › Zinc
-Do you want to use CSS variables for colors? › no / yes
+```txt
+Which color would you like to use as base color? › Neutral
 ```
 
-### That's it
+### Add Components
 
 You can now start adding components to your project.
 
@@ -120,16 +124,18 @@ npx shadcn@latest add button
 
 The command above will add the `Button` component to your project. You can then import it like this:
 
-```tsx {1,6} showLineNumbers
+```tsx showLineNumbers title="src/App.tsx"
 import { Button } from "@/components/ui/button"
 
-export default function Home() {
+function App() {
   return (
-    <div>
+    <div className="flex flex-col items-center justify-center min-h-svh">
       <Button>Click me</Button>
     </div>
   )
 }
+
+export default App
 ```
 
 </Steps>
diff --git a/apps/www/content/docs/monorepo.mdx b/apps/www/content/docs/monorepo.mdx
new file mode 100644
index 00000000000..7186473340b
--- /dev/null
+++ b/apps/www/content/docs/monorepo.mdx
@@ -0,0 +1,229 @@
+---
+title: Monorepo
+description: Using shadcn/ui components and CLI in a monorepo.
+---
+
+Until now, using shadcn/ui in a monorepo was a bit of a pain. You could add
+components using the CLI, but you had to manage where the components
+were installed and manually fix import paths.
+
+With the new monorepo support in the CLI, we've made it a lot easier to use
+shadcn/ui in a monorepo.
+
+The CLI now understands the monorepo structure and will install the components,
+dependencies and registry dependencies to the correct paths and handle imports
+for you.
+
+## Getting started
+
+<Steps>
+
+### Create a new monorepo project
+
+To create a new monorepo project, run the `init` command. You will be prompted
+to select the type of project you are creating.
+
+```bash
+npx shadcn@canary init
+```
+
+Select the `Next.js (Monorepo)` option.
+
+```bash
+? Would you like to start a new project?
+    Next.js
+❯   Next.js (Monorepo)
+```
+
+This will create a new monorepo project with two workspaces: `web` and `ui`,
+and [Turborepo](https://turbo.build/repo/docs) as the build system.
+
+Everything is set up for you, so you can start adding components to your project.
+
+Note: The monorepo uses React 19 and Tailwind CSS v4.
+
+### Add components to your project
+
+To add components to your project, run the `add` command **in the path of your app**.
+
+```bash
+cd apps/web
+```
+
+```bash
+npx shadcn@canary add [COMPONENT]
+```
+
+The CLI will figure out what type of component you are adding and install the
+correct files to the correct path.
+
+For example, if you run `npx shadcn@canary add button`, the CLI will install the button component under `packages/ui` and update the import path for components in `apps/web`.
+
+If you run `npx shadcn@canary add login-01`, the CLI will install the `button`, `label`, `input` and `card` components under `packages/ui` and the `login-form` component under `apps/web/components`.
+
+### Importing components
+
+You can import components from the `@workspace/ui` package as follows:
+
+```tsx
+import { Button } from "@workspace/ui/components/button"
+```
+
+You can also import hooks and utilities from the `@workspace/ui` package.
+
+```tsx
+import { useTheme } from "@workspace/ui/hooks/use-theme"
+import { cn } from "@workspace/ui/lib/utils"
+```
+
+</Steps>
+
+## File Structure
+
+When you create a new monorepo project, the CLI will create the following file structure:
+
+```txt
+apps
+└── web         # Your app goes here.
+    ├── app
+    │   └── page.tsx
+    ├── components
+    │   └── login-form.tsx
+    ├── components.json
+    └── package.json
+packages
+└── ui          # Your components and dependencies are installed here.
+    ├── src
+    │   ├── components
+    │   │   └── button.tsx
+    │   ├── hooks
+    │   ├── lib
+    │   │   └── utils.ts
+    │   └── styles
+    │       └── globals.css
+    ├── components.json
+    └── package.json
+package.json
+turbo.json
+```
+
+## Requirements
+
+1. Every workspace must have a `components.json` file. A `package.json` file tells npm how to install the dependencies. A `components.json` file tells the CLI how and where to install components.
+
+2. The `components.json` file must properly define aliases for the workspace. This tells the CLI how to import components, hooks, utilities, etc.
+
+<Tabs defaultValue="v4">
+
+<TabsList>
+  <TabsTrigger value="v4">Tailwind CSS v4</TabsTrigger>
+  <TabsTrigger value="v3">Tailwind CSS v3</TabsTrigger>
+</TabsList>
+
+<TabsContent value="v4">
+
+```json showLineNumbers title="apps/web/components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}
+```
+
+```json showLineNumbers title="packages/ui/components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@workspace/ui/components",
+    "utils": "@workspace/ui/lib/utils",
+    "hooks": "@workspace/ui/hooks",
+    "lib": "@workspace/ui/lib",
+    "ui": "@workspace/ui/components"
+  }
+}
+```
+
+</TabsContent>
+
+<TabsContent value="v3">
+
+```json showLineNumbers title="apps/web/components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "../../packages/ui/tailwind.config.ts",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}
+```
+
+```json showLineNumbers title="packages/ui/components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@workspace/ui/components",
+    "utils": "@workspace/ui/lib/utils",
+    "hooks": "@workspace/ui/hooks",
+    "lib": "@workspace/ui/lib",
+    "ui": "@workspace/ui/components"
+  }
+}
+```
+
+</TabsContent>
+
+</Tabs>
+
+3. Ensure you have the same `style`, `iconLibrary` and `baseColor` in both `components.json` files.
+
+4. **For Tailwind CSS v4, leave the `tailwind` config empty in the `components.json` file.**
+
+By following these requirements, the CLI will be able to install ui components, blocks, libs and hooks to the correct paths and handle imports for you.
diff --git a/apps/www/content/docs/react-19.mdx b/apps/www/content/docs/react-19.mdx
new file mode 100644
index 00000000000..76177caaf32
--- /dev/null
+++ b/apps/www/content/docs/react-19.mdx
@@ -0,0 +1,174 @@
+---
+title: Next.js 15 + React 19
+description: Using shadcn/ui with Next.js 15 and React 19.
+---
+
+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Update:** We have added full support for React 19 and Tailwind v4 in the
+  `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
+  information.
+</Callout>
+
+<Callout>
+  **The following guide applies to any framework that supports React 19**. I
+  titled this page "Next.js 15 + React 19" to help people upgrading to Next.js
+  15 find it. We are working with package maintainers to help upgrade to React
+  19.
+</Callout>
+
+## TL;DR
+
+If you're using `npm`, you can install shadcn/ui dependencies with a flag. The `shadcn` CLI will prompt you to select a flag when you run it. No flags required for pnpm, bun, or yarn.
+
+See [Upgrade Status](#upgrade-status) for the status of React 19 support for each package.
+
+## What's happening?
+
+React 19 is now [rc](https://www.npmjs.com/package/react?activeTab=versions) and is [tested and supported in the latest Next.js 15 release](https://nextjs.org/blog/next-15#react-19).
+
+To support React 19, package maintainers will need to test and update their packages to include React 19 as a peer dependency. This is [already](https://github.com/radix-ui/primitives/pull/2952) [in](https://github.com/pacocoursey/cmdk/pull/318) [progress](https://github.com/emilkowalski/vaul/pull/498).
+
+```diff /^19.0/
+"peerDependencies": {
+-  "react": "^16.8 || ^17.0 || ^18.0",
++  "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
+-  "react-dom": "^16.8 || ^17.0 || ^18.0"
++  "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
+},
+```
+
+<Callout>
+  You can check if a package lists React 19 as a peer dependency by running
+  `npm info <package> peerDependencies`.
+</Callout>
+
+In the meantime, if you are installing a package that **does not** list React 19 as a peer dependency, you will see an error message like this:
+
+```bash
+npm error code ERESOLVE
+npm error ERESOLVE unable to resolve dependency tree
+npm error
+npm error While resolving: my-app@0.1.0
+npm error Found: react@19.0.0-rc-69d4b800-20241021
+npm error node_modules/react
+npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project
+```
+
+<Callout>
+  **Note:** This is npm only. PNPM and Bun will only show a silent warning.
+</Callout>
+
+## How to fix this
+
+### Solution 1: `--force` or `--legacy-peer-deps`
+
+You can force install a package with the `--force` or the `--legacy-peer-deps` flag.
+
+```bash
+npm i <package> --force
+
+npm i <package> --legacy-peer-deps
+```
+
+This will install the package and ignore the peer dependency warnings.
+
+<Accordion type="multiple">
+  <AccordionItem value="flags">
+    <AccordionTrigger className="font-medium">
+      What do the `--force` and `--legacy-peer-deps` flag do?
+    </AccordionTrigger>
+    <AccordionContent className="[&_ul]:mt-0">
+
+      - `--force`: Ignores and overrides any dependency conflicts, forcing the
+        installation of packages.
+      - `--legacy-peer-deps`: Skips strict peer dependency checks, allowing
+        installation of packages with unmet peer dependencies to avoid errors.
+
+    </AccordionContent>
+
+  </AccordionItem>
+</Accordion>
+
+### Solution 2: Use React 18
+
+You can downgrade `react` and `react-dom` to version 18, which is compatible with the package you are installing and upgrade when the dependency is updated.
+
+```bash
+npm i react@18 react-dom@18
+```
+
+Whichever solution you choose, make sure you test your app thoroughly to ensure
+there are no regressions.
+
+## Using shadcn/ui on Next.js 15
+
+### Using pnpm, bun, or yarn
+
+Follow the instructions in the [installation guide](/docs/installation/next) to install shadcn/ui. No flags are needed.
+
+### Using npm
+
+When you run `npx shadcn@latest init -d`, you will be prompted to select an option to resolve the peer dependency issues.
+
+```bash
+It looks like you are using React 19.
+Some packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).
+
+? How would you like to proceed? › - Use arrow-keys. Return to submit.
+❯   Use --force
+    Use --legacy-peer-deps
+```
+
+You can then run the command with the flag you choose.
+
+## Adding components
+
+The process for adding components is the same as above. Select a flag to resolve the peer dependency issues.
+
+**Remember to always test your app after installing new dependencies.**
+
+## Upgrade Status
+
+To make it easy for you track the progress of the upgrade, I've created a table below with React 19 support status for the shadcn/ui dependencies.
+
+- ✅ - Works with React 19 using npm, pnpm, and bun.
+- 🚧 - Works with React 19 using pnpm and bun. Requires flag for npm. PR is in progress.
+
+| Package                                                                            | Status | Note                                                        |
+| ---------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------- |
+| [radix-ui](https://www.npmjs.com/package/@radix-ui/react-icons)                    | ✅     |                                                             |
+| [lucide-react](https://www.npmjs.com/package/lucide-react)                         | ✅     |                                                             |
+| [class-variance-authority](https://www.npmjs.com/package/class-variance-authority) | ✅     | Does not list React 19 as a peer dependency.                |
+| [tailwindcss-animate](https://www.npmjs.com/package/tailwindcss-animate)           | ✅     | Does not list React 19 as a peer dependency.                |
+| [embla-carousel-react](https://www.npmjs.com/package/embla-carousel-react)         | ✅     |                                                             |
+| [recharts](https://www.npmjs.com/package/recharts)                                 | ✅     | See note [below](#recharts)                                 |
+| [react-hook-form](https://www.npmjs.com/package/react-hook-form)                   | ✅     |                                                             |
+| [react-resizable-panels](https://www.npmjs.com/package/react-resizable-panels)     | ✅     |                                                             |
+| [sonner](https://www.npmjs.com/package/sonner)                                     | ✅     |                                                             |
+| [react-day-picker](https://www.npmjs.com/package/react-day-picker)                 | ✅     | Works with flag for npm. Work to upgrade to v9 in progress. |
+| [input-otp](https://www.npmjs.com/package/input-otp)                               | ✅     |                                                             |
+| [vaul](https://www.npmjs.com/package/vaul)                                         | ✅     |                                                             |
+| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons)       | 🚧     | See [PR #194](https://github.com/radix-ui/icons/pull/194)   |
+| [cmdk](https://www.npmjs.com/package/cmdk)                                         | ✅     |                                                             |
+
+If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub.
+
+## Recharts
+
+To use recharts with React 19, you will need to override the `react-is` dependency.
+
+<Steps>
+
+<Step>Add the following to your `package.json`</Step>
+
+```json title="package.json"
+"overrides": {
+  "react-is": "^19.0.0-rc-69d4b800-20241021"
+}
+```
+
+Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example.
+
+<Step>Run `npm install --legacy-peer-deps`</Step>
+
+</Steps>
diff --git a/apps/www/content/docs/registry/examples.mdx b/apps/www/content/docs/registry/examples.mdx
new file mode 100644
index 00000000000..248fb55530c
--- /dev/null
+++ b/apps/www/content/docs/registry/examples.mdx
@@ -0,0 +1,356 @@
+---
+title: Examples
+description: "Examples of registry items: styles, components, css vars, etc."
+---
+
+## registry:style
+
+### Custom style that extends shadcn/ui
+
+The following registry item is a custom style that extends shadcn/ui. On `npx shadcn init`, it will:
+
+- Install `@tabler/icons-react` as a dependency.
+- Add the `login-01` block and `calendar` component to the project.
+- Add the `editor` from a remote registry.
+- Set the `font-sans` variable to `Inter, sans-serif`.
+- Install a `brand` color in light and dark mode.
+
+```json title="example-style.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "example-style",
+  "type": "registry:style",
+  "dependencies": ["@tabler/icons-react"],
+  "registryDependencies": [
+    "login-01",
+    "calendar",
+    "https://example.com/r/editor.json"
+  ],
+  "cssVars": {
+    "theme": {
+      "font-sans": "Inter, sans-serif"
+    },
+    "light": {
+      "brand": "20 14.3% 4.1%"
+    },
+    "dark": {
+      "brand": "20 14.3% 4.1%"
+    }
+  }
+}
+```
+
+### Custom style from scratch
+
+The following registry item is a custom style that doesn't extend shadcn/ui. See the `extends: none` field.
+
+It can be used to create a new style from scratch i.e custom components, css vars, dependencies, etc.
+
+On `npx shadcn add`, the following will:
+
+- Install `tailwind-merge` and `clsx` as dependencies.
+- Add the `utils` registry item from the shadcn/ui registry.
+- Add the `button`, `input`, `label`, and `select` components from a remote registry.
+- Install new css vars: `main`, `bg`, `border`, `text`, `ring`.
+
+```json title="example-style.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "extends": "none",
+  "name": "new-style",
+  "type": "registry:style",
+  "dependencies": ["tailwind-merge", "clsx"],
+  "registryDependencies": [
+    "utils",
+    "https://example.com/r/button.json",
+    "https://example.com/r/input.json",
+    "https://example.com/r/label.json",
+    "https://example.com/r/select.json"
+  ],
+  "cssVars": {
+    "theme": {
+      "font-sans": "Inter, sans-serif",
+    }
+    "light": {
+      "main": "#88aaee",
+      "bg": "#dfe5f2",
+      "border": "#000",
+      "text": "#000",
+      "ring": "#000",
+    },
+    "dark": {
+      "main": "#88aaee",
+      "bg": "#272933",
+      "border": "#000",
+      "text": "#e6e6e6",
+      "ring": "#fff",
+    }
+  }
+}
+```
+
+## registry:theme
+
+### Custom theme
+
+```json title="example-theme.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-theme",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)",
+      "primary": "oklch(0.546 0.245 262.881)",
+      "primary-foreground": "oklch(0.97 0.014 254.604)",
+      "ring": "oklch(0.746 0.16 232.661)",
+      "sidebar-primary": "oklch(0.546 0.245 262.881)",
+      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
+      "sidebar-ring": "oklch(0.746 0.16 232.661)"
+    },
+    "dark": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)",
+      "primary": "oklch(0.707 0.165 254.624)",
+      "primary-foreground": "oklch(0.97 0.014 254.604)",
+      "ring": "oklch(0.707 0.165 254.624)",
+      "sidebar-primary": "oklch(0.707 0.165 254.624)",
+      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
+      "sidebar-ring": "oklch(0.707 0.165 254.624)"
+    }
+  }
+}
+```
+
+### Custom colors
+
+The following style will init using shadcn/ui defaults and then add a custom `brand` color.
+
+```json title="example-style.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-style",
+  "type": "registry:style",
+  "cssVars": {
+    "light": {
+      "brand": "oklch(0.99 0.00 0)"
+    },
+    "dark": {
+      "brand": "oklch(0.14 0.00 286)"
+    }
+  }
+}
+```
+
+## registry:block
+
+### Custom block
+
+This blocks installs the `login-01` block from the shadcn/ui registry.
+
+```json title="login-01.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-01",
+  "type": "registry:block",
+  "description": "A simple login form.",
+  "registryDependencies": ["button", "card", "input", "label"],
+  "files": [
+    {
+      "path": "blocks/login-01/page.tsx",
+      "content": "import { LoginForm } ...",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-01/components/login-form.tsx",
+      "content": "...",
+      "type": "registry:component"
+    }
+  ]
+}
+```
+
+### Install a block and override primitives
+
+You can install a block fromt the shadcn/ui registry and override the primitives using your custom ones.
+
+On `npx shadcn add`, the following will:
+
+- Add the `login-01` block from the shadcn/ui registry.
+- Override the `button`, `input`, and `label` primitives with the ones from the remote registry.
+
+```json title="example-style.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-login",
+  "type": "registry:block",
+  "registryDependencies": [
+    "login-01",
+    "https://example.com/r/button.json",
+    "https://example.com/r/input.json",
+    "https://example.com/r/label.json"
+  ]
+}
+```
+
+## CSS Variables
+
+### Custom Theme Variables
+
+Add custom theme variables to the `theme` object.
+
+```json title="example-theme.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-theme",
+  "type": "registry:theme",
+  "cssVars": {
+    "theme": {
+      "font-heading": "Inter, sans-serif",
+      "shadow-card": "0 0 0 1px rgba(0, 0, 0, 0.1)"
+    }
+  }
+}
+```
+
+### Override Tailwind CSS variables
+
+```json title="example-theme.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-theme",
+  "type": "registry:theme",
+  "cssVars": {
+    "theme": {
+      "spacing": "0.2rem",
+      "breakpoint-sm": "640px",
+      "breakpoint-md": "768px",
+      "breakpoint-lg": "1024px",
+      "breakpoint-xl": "1280px",
+      "breakpoint-2xl": "1536px"
+    }
+  }
+}
+```
+
+## Add custom CSS
+
+### Base styles
+
+```json title="example-base.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-style",
+  "type": "registry:style",
+  "css": {
+    "@layer base": {
+      "h1": {
+        "font-size": "var(--text-2xl)"
+      },
+      "h2": {
+        "font-size": "var(--text-xl)"
+      }
+    }
+  }
+}
+```
+
+### Components
+
+```json title="example-card.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-card",
+  "type": "registry:component",
+  "css": {
+    "@layer components": {
+      "card": {
+        "background-color": "var(--color-white)",
+        "border-radius": "var(--rounded-lg)",
+        "padding": "var(--spacing-6)",
+        "box-shadow": "var(--shadow-xl)"
+      }
+    }
+  }
+}
+```
+
+## Add custom utilities
+
+### Simple utility
+
+```json title="example-component.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-component",
+  "type": "registry:component",
+  "css": {
+    "@utility content-auto": {
+      "content-visibility": "auto"
+    }
+  }
+}
+```
+
+### Complex utility
+
+```json title="example-utility.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-component",
+  "type": "registry:component",
+  "css": {
+    "@utility scrollbar-hidden": {
+      "scrollbar-hidden": {
+        "&::-webkit-scrollbar": {
+          "display": "none"
+        }
+      }
+    }
+  }
+}
+```
+
+### Functional utilities
+
+```json title="example-functional.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-component",
+  "type": "registry:component",
+  "css": {
+    "@utility tab-*": {
+      "tab-size": "var(--tab-size-*)"
+    }
+  }
+}
+```
+
+## Add custom animations
+
+Note: you need to define both `@keyframes` in css and `theme` in cssVars to use animations.
+
+```json title="example-component.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-component",
+  "type": "registry:component",
+  "cssVars": {
+    "theme": {
+      "--animate-wiggle": "wiggle 1s ease-in-out infinite"
+    }
+  },
+  "css": {
+    "@keyframes wiggle": {
+      "0%, 100%": {
+        "transform": "rotate(-3deg)"
+      },
+      "50%": {
+        "transform": "rotate(3deg)"
+      }
+    }
+  }
+}
+```
diff --git a/apps/www/content/docs/registry/faq.mdx b/apps/www/content/docs/registry/faq.mdx
new file mode 100644
index 00000000000..0e51058fbf8
--- /dev/null
+++ b/apps/www/content/docs/registry/faq.mdx
@@ -0,0 +1,200 @@
+---
+title: FAQ
+description: Frequently asked questions about running a registry.
+---
+
+## Frequently asked questions
+
+### What does a complex component look like?
+
+Here's an example of a complex component that installs a page, two components, a hook, a format-date utils and a config file.
+
+```json showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    {
+      "path": "registry/new-york/hello-world/page.tsx",
+      "type": "registry:page",
+      "target": "app/hello/page.tsx"
+    },
+    {
+      "path": "registry/new-york/hello-world/components/hello-world.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york/hello-world/components/formatted-message.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york/hello-world/hooks/use-hello.ts",
+      "type": "registry:hook"
+    },
+    {
+      "path": "registry/new-york/hello-world/lib/format-date.ts",
+      "type": "registry:utils"
+    },
+    {
+      "path": "registry/new-york/hello-world/hello.config.ts",
+      "type": "registry:file",
+      "target": "~/hello.config.ts"
+    }
+  ]
+}
+```
+
+### How do I add a new Tailwind color?
+
+<Tabs defaultValue="v4">
+
+<TabsList>
+  <TabsTrigger value="v4">Tailwind CSS v4</TabsTrigger>
+  <TabsTrigger value="v3">Tailwind CSS v3</TabsTrigger>
+</TabsList>
+
+<TabsContent value="v4">
+
+To add a new color you need to add it to `cssVars` under `light` and `dark` keys.
+
+```json showLineNumbers {10-18}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    // ...
+  ],
+  "cssVars": {
+    "light": {
+      "brand-background": "20 14.3% 4.1%",
+      "brand-accent": "20 14.3% 4.1%"
+    },
+    "dark": {
+      "brand-background": "20 14.3% 4.1%",
+      "brand-accent": "20 14.3% 4.1%"
+    }
+  }
+}
+```
+
+The CLI will update the project CSS file. Once updated, the new colors will be available to be used as utility classes: `bg-brand` and `text-brand-accent`.
+
+</TabsContent>
+
+<TabsContent value="v3">
+
+To add a new color you need to add it to `cssVars` and `tailwind.config.theme.extend.colors`.
+
+```json showLineNumbers {10-19} {24-29}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    // ...
+  ],
+  "cssVars": {
+    "light": {
+      "brand-background": "20 14.3% 4.1%",
+      "brand-accent": "20 14.3% 4.1%"
+    },
+    "dark": {
+      "brand-background": "20 14.3% 4.1%",
+      "brand-accent": "20 14.3% 4.1%"
+    }
+  },
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "brand": {
+              "DEFAULT": "hsl(var(--brand-background))",
+              "accent": "hsl(var(--brand-accent))"
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+The CLI will update the project CSS file and tailwind.config.js file. Once updated, the new colors will be available to be used as utility classes: `bg-brand` and `text-brand-accent`.
+
+</TabsContent>
+</Tabs>
+
+### How do I add or override a Tailwind theme variable?
+
+<Tabs defaultValue="v4">
+
+<TabsList>
+  <TabsTrigger value="v4">Tailwind CSS v4</TabsTrigger>
+  <TabsTrigger value="v3">Tailwind CSS v3</TabsTrigger>
+</TabsList>
+
+<TabsContent value="v4">
+
+To add or override a theme variable you add it to `cssVars.theme` under the key you want to add or override.
+
+```json showLineNumbers {10-15}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    // ...
+  ],
+  "cssVars": {
+    "theme": {
+      "text-base": "3rem",
+      "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "font-heading": "Poppins, sans-serif"
+    }
+  }
+}
+```
+
+</TabsContent>
+
+<TabsContent value="v3">
+
+To override a theme variable you add it to `tailwind.config.theme.extend` under the key you want to override.
+
+```json showLineNumbers {14-22}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "title": "Hello World",
+  "type": "registry:block",
+  "description": "A complex hello world component",
+  "files": [
+    // ...
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "text": {
+            "base": "3rem"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+</TabsContent>
+</Tabs>
diff --git a/apps/www/content/docs/registry/getting-started.mdx b/apps/www/content/docs/registry/getting-started.mdx
new file mode 100644
index 00000000000..3834390fc81
--- /dev/null
+++ b/apps/www/content/docs/registry/getting-started.mdx
@@ -0,0 +1,201 @@
+---
+title: Getting Started
+description: Learn how to get setup and run your own component registry.
+---
+
+This guide will walk you through the process of setting up your own component registry.
+
+It assumes you already have a project with components and would like to turn it into a registry.
+
+If you're starting a new registry project, you can use the [registry template](https://github.com/shadcn-ui/registry-template) as a starting point. We have already configured it for you.
+
+## registry.json
+
+The `registry.json` file is only required if you're using the `shadcn` CLI to build your registry.
+
+If you're using a different build system, you can skip this step as long as your build system produces valid JSON files that conform to the [registry-item schema specification](/docs/registry/registry-item-json).
+
+<Steps>
+
+### Add a registry.json file
+
+Create a `registry.json` file in the root of your project. Your project can be a Next.js, Remix, Vite, or any other project that supports React.
+
+```json title="registry.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "acme",
+  "homepage": "https://acme.com",
+  "items": [
+    // ...
+  ]
+}
+```
+
+This `registry.json` file must conform to the [registry schema specification](/docs/registry/registry-json).
+
+</Steps>
+
+## Add a registry item
+
+<Steps>
+
+### Create your component
+
+Add your first component. Here's an example of a simple `<HelloWorld />` component:
+
+```tsx title="registry/new-york/hello-world/hello-world.tsx" showLineNumbers
+import { Button } from "@/components/ui/button"
+
+export function HelloWorld() {
+  return <Button>Hello World</Button>
+}
+```
+
+<Callout className="mt-6">
+  **Note:** This example places the component in the `registry/new-york`
+  directory. You can place it anywhere in your project as long as you set the
+  correct path in the `registry.json` file and you follow the `registry/[NAME]`
+  directory structure.
+</Callout>
+
+```txt
+registry
+└── new-york
+    └── hello-world
+        └── hello-world.tsx
+```
+
+<Callout className="mt-6 [&_[data-rehype-pretty-code-title]]:pt-1 [&_pre]:mb-0">
+  **Important:** If you're placing your component in a custom directory, make
+  sure it is configured in your `tailwind.config.ts` file.
+
+```ts showLineNumbers
+// tailwind.config.ts
+export default {
+  content: ["./registry/**/*.{js,ts,jsx,tsx}"],
+}
+```
+
+</Callout>
+
+### Add your component to the registry
+
+To add your component to the registry, you need to add your component definition to `registry.json`.
+
+```json title="registry.json" showLineNumbers {6-17}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "acme",
+  "homepage": "https://acme.com",
+  "items": [
+    {
+      "name": "hello-world",
+      "type": "registry:block",
+      "title": "Hello World",
+      "description": "A simple hello world component.",
+      "files": [
+        {
+          "path": "registry/new-york/hello-world/hello-world.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
+```
+
+You define your registry item by adding a `name`, `type`, `title`, `description` and `files`.
+
+For every file you add, you must specify the `path` and `type` of the file. The `path` is the relative path to the file from the root of your project. The `type` is the type of the file.
+
+You can read more about the registry item schema and file types in the [registry item schema docs](/docs/registry/registry-item-json).
+
+</Steps>
+
+## Build your registry
+
+<Steps>
+
+### Install the shadcn CLI
+
+Note: the `build` command is currently only available in the `shadcn@canary` version of the CLI.
+
+```bash
+npm install shadcn@canary
+```
+
+### Add a build script
+
+Add a `registry:build` script to your `package.json` file.
+
+```json title="package.json" showLineNumbers
+{
+  "scripts": {
+    "registry:build": "shadcn build"
+  }
+}
+```
+
+### Run the build script
+
+Run the build script to generate the registry JSON files.
+
+```bash
+npm run registry:build
+```
+
+<Callout className="mt-6">
+  **Note:** By default, the build script will generate the registry JSON files
+  in `public/r` e.g `public/r/hello-world.json`.
+
+You can change the output directory by passing the `--output` option. See the [shadcn build command](/docs/cli#build) for more information.
+
+</Callout>
+
+</Steps>
+
+## Serve your registry
+
+If you're running your registry on Next.js, you can now serve your registry by running the `next` server. The command might differ for other frameworks.
+
+```bash
+npm run dev
+```
+
+Your files will now be served at `http://localhost:3000/r/[NAME].json` eg. `http://localhost:3000/r/hello-world.json`.
+
+## Publish your registry
+
+To make your registry available to other developers, you can publish it by deploying your project to a public URL.
+
+## Adding Auth
+
+The `shadcn` CLI does not offer a built-in way to add auth to your registry. We recommend handling authorization on your registry server.
+
+A common simple approach is to use a `token` query parameter to authenticate requests to your registry. e.g. `http://localhost:3000/r/hello-world.json?token=[SECURE_TOKEN_HERE]`.
+
+Use the secure token to authenticate requests and return a 401 Unauthorized response if the token is invalid. Both the `shadcn` CLI and `Open in v0` will handle the 401 response and display a message to the user.
+
+<Callout className="mt-6">
+  **Note:** Make sure to encrypt and expire tokens.
+</Callout>
+
+## Guidelines
+
+Here are some guidelines to follow when building components for a registry.
+
+- Place your registry item in the `registry/[STYLE]/[NAME]` directory. I'm using `new-york` as an example. It can be anything you want as long as it's nested under the `registry` directory.
+- The following properties are required for the block definition: `name`, `description`, `type` and `files`.
+- Make sure to list all registry dependencies in `registryDependencies`. A registry dependency is the name of the component in the registry eg. `input`, `button`, `card`, etc or a URL to a registry item eg. `http://localhost:3000/r/editor.json`.
+- Make sure to list all dependencies in `dependencies`. A dependency is the name of the package in the registry eg. `zod`, `sonner`, etc. To set a version, you can use the `name@version` format eg. `zod@^3.20.0`.
+- **Imports should always use the `@/registry` path.** eg. `import { HelloWorld } from "@/registry/new-york/hello-world/hello-world"`
+- Ideally, place your files within a registry item in `components`, `hooks`, `lib` directories.
+
+## Install using the CLI
+
+To install a registry item using the `shadcn` CLI, use the `add` command followed by the URL of the registry item.
+
+```bash
+npx shadcn@latest add http://localhost:3000/r/hello-world.json
+```
diff --git a/apps/www/content/docs/registry/index.mdx b/apps/www/content/docs/registry/index.mdx
new file mode 100644
index 00000000000..7a681499c8b
--- /dev/null
+++ b/apps/www/content/docs/registry/index.mdx
@@ -0,0 +1,40 @@
+---
+title: Registry
+description: Run your own component registry.
+---
+
+<Callout>
+  **Note:** This feature is currently experimental. Help us improve it by
+  testing it out and sending feedback. If you have any questions, please [reach
+  out to us](https://github.com/shadcn-ui/ui/discussions).
+</Callout>
+
+You can use the `shadcn` CLI to run your own component registry. Running your own registry allows you to distribute your custom components, hooks, pages, and other files to any React project.
+
+<figure className="flex flex-col gap-4">
+  <Image
+    src="/images/registry-light.png"
+    width="1432"
+    height="960"
+    alt="Registry"
+    className="border dark:hidden shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+  />
+  <Image
+    src="/images/registry-dark.png"
+    width="1432"
+    height="960"
+    alt="Registry"
+    className="border hidden dark:block shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+  />
+  <figcaption className="text-center text-sm text-gray-500">
+    Distribute code to any React project.
+  </figcaption>
+</figure>
+
+Registry items are automatically compatible with the `shadcn` CLI and `Open in v0`.
+
+## Requirements
+
+You are free to design and host your custom registry as you see fit. The only requirement is that your registry items must be valid JSON files that conform to the [registry-item schema specification](/docs/registry/registry-item-json).
+
+If you'd like to see an example of a registry, we have a [template project](https://github.com/shadcn-ui/registry-template) for you to use as a starting point.
diff --git a/apps/www/content/docs/registry/open-in-v0.mdx b/apps/www/content/docs/registry/open-in-v0.mdx
new file mode 100644
index 00000000000..3feda2ee71c
--- /dev/null
+++ b/apps/www/content/docs/registry/open-in-v0.mdx
@@ -0,0 +1,64 @@
+---
+title: Open in v0
+description: Integrate your registry with Open in v0.
+---
+
+If your registry is hosted and publicly accessible via a URL, you can open a registry item in v0 by using the `https://v0.dev/chat/api/open?url=[URL]` endpoint.
+
+eg. [https://v0.dev/chat/api/open?url=https://ui.shadcn.com/r/styles/new-york/login-01.json](https://v0.dev/chat/api/open?url=https://ui.shadcn.com/r/styles/new-york/login-01.json)
+
+<Callout className="mt-6">
+  **Note:** The `Open in v0` button does not support `cssVars` and `tailwind`
+  properties.
+</Callout>
+
+## Button
+
+See [Build your Open in v0 button](https://v0.dev/chat/button) for more information on how to build your own `Open in v0` button.
+
+Here's a simple example of how to add a `Open in v0` button to your site.
+
+```jsx
+import { Button } from "@/components/ui/button"
+
+export function OpenInV0Button({ url }: { url: string }) {
+  return (
+    <Button
+      aria-label="Open in v0"
+      className="h-8 gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black"
+      asChild
+    >
+      <a
+        href={`https://v0.dev/chat/api/open?url=${url}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        Open in{" "}
+        <svg
+          viewBox="0 0 40 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5 text-current"
+        >
+          <path
+            d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
+            fill="currentColor"
+          ></path>
+          <path
+            d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </a>
+    </Button>
+  )
+}
+```
+
+```jsx
+<OpenInV0Button url="https://example.com/r/hello-world.json" />
+```
+
+## Authentication
+
+See the [Adding Auth](/docs/registry/getting-started#adding-auth) section for more information on how to authenticate requests to your registry and Open in v0.
diff --git a/apps/www/content/docs/registry/registry-item-json.mdx b/apps/www/content/docs/registry/registry-item-json.mdx
new file mode 100644
index 00000000000..b8bf5acdecf
--- /dev/null
+++ b/apps/www/content/docs/registry/registry-item-json.mdx
@@ -0,0 +1,324 @@
+---
+title: registry-item.json
+description: Specification for registry items.
+---
+
+The `registry-item.json` schema is used to define your custom registry items.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hello-world",
+  "type": "registry:block",
+  "title": "Hello World",
+  "description": "A simple hello world component.",
+  "files": [
+    {
+      "path": "registry/new-york/hello-world/hello-world.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york/hello-world/use-hello-world.ts",
+      "type": "registry:hook"
+    }
+  ],
+  "cssVars": {
+    "theme": {
+      "font-heading": "Poppins, sans-serif"
+    },
+    "light": {
+      "brand": "20 14.3% 4.1%"
+    },
+    "dark": {
+      "brand": "20 14.3% 4.1%"
+    }
+  }
+}
+```
+
+<div className="flex gap-2 items-center mt-6">
+  <Link href="/docs/registry/examples">See more examples</Link>
+</div>
+
+## Definitions
+
+You can see the JSON Schema for `registry-item.json` [here](https://ui.shadcn.com/schema/registry-item.json).
+
+### $schema
+
+The `$schema` property is used to specify the schema for the `registry-item.json` file.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}
+```
+
+### name
+
+The name of the item. This is used to identify the item in the registry. It should be unique for your registry.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "name": "hello-world"
+}
+```
+
+### title
+
+A human-readable title for your registry item. Keep it short and descriptive.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "title": "Hello World"
+}
+```
+
+### description
+
+A description of your registry item. This can be longer and more detailed than the `title`.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "description": "A simple hello world component."
+}
+```
+
+### type
+
+The `type` property is used to specify the type of your registry item. This is used to determine the type and target path of the item when resolved for a project.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "type": "registry:block"
+}
+```
+
+The following types are supported:
+
+| Type                 | Description                                      |
+| -------------------- | ------------------------------------------------ |
+| `registry:block`     | Use for complex components with multiple files.  |
+| `registry:component` | Use for simple components.                       |
+| `registry:lib`       | Use for lib and utils.                           |
+| `registry:hook`      | Use for hooks.                                   |
+| `registry:ui`        | Use for UI components and single-file primitives |
+| `registry:page`      | Use for page or file-based routes.               |
+| `registry:file`      | Use for miscellaneous files.                     |
+| `registry:style`     | Use for registry styles. eg. `new-york`          |
+| `registry:theme`     | Use for themes.                                  |
+
+### author
+
+The `author` property is used to specify the author of the registry item.
+
+It can be unique to the registry item or the same as the author of the registry.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "author": "John Doe <john@doe.com>"
+}
+```
+
+### dependencies
+
+The `dependencies` property is used to specify the dependencies of your registry item. This is for `npm` packages.
+
+Use `@version` to specify the version of your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "dependencies": [
+    "@radix-ui/react-accordion",
+    "zod",
+    "lucide-react",
+    "name@1.0.2"
+  ]
+}
+```
+
+### registryDependencies
+
+Used for registry dependencies. Can be names or URLs. Use the name of the item to reference shadcn/ui components and urls to reference other registries.
+
+- For `shadcn/ui` registry items such as `button`, `input`, `select`, etc use the name eg. `['button', 'input', 'select']`.
+- For custom registry items use the URL of the registry item eg. `['https://example.com/r/hello-world.json']`.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "registryDependencies": [
+    "button",
+    "input",
+    "select",
+    "https://example.com/r/editor.json"
+  ]
+}
+```
+
+Note: The CLI will automatically resolve remote registry dependencies.
+
+### files
+
+The `files` property is used to specify the files of your registry item. Each file has a `path`, `type` and `target` (optional) property.
+
+**The `target` property is required for `registry:page` and `registry:file` types.**
+
+```json title="registry-item.json" showLineNumbers
+{
+  "files": [
+    {
+      "path": "registry/new-york/hello-world/page.tsx",
+      "type": "registry:page",
+      "target": "app/hello/page.tsx"
+    },
+    {
+      "path": "registry/new-york/hello-world/hello-world.tsx",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york/hello-world/use-hello-world.ts",
+      "type": "registry:hook"
+    },
+    {
+      "path": "registry/new-york/hello-world/.env",
+      "type": "registry:file",
+      "target": "~/.env"
+    }
+  ]
+}
+```
+
+#### path
+
+The `path` property is used to specify the path to the file in your registry. This path is used by the build script to parse, transform and build the registry JSON payload.
+
+#### type
+
+The `type` property is used to specify the type of the file. See the [type](#type) section for more information.
+
+#### target
+
+The `target` property is used to indicate where the file should be placed in a project. This is optional and only required for `registry:page` and `registry:file` types.
+
+By default, the `shadcn` cli will read a project's `components.json` file to determine the target path. For some files, such as routes or config you can specify the target path manually.
+
+Use `~` to refer to the root of the project e.g `~/foo.config.js`.
+
+### tailwind
+
+**DEPRECATED:** Use `cssVars.theme` instead for Tailwind v4 projects.
+
+The `tailwind` property is used for tailwind configuration such as `theme`, `plugins` and `content`.
+
+You can use the `tailwind.config` property to add colors, animations and plugins to your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "brand": "hsl(var(--brand))"
+          },
+          "keyframes": {
+            "wiggle": {
+              "0%, 100%": { "transform": "rotate(-3deg)" },
+              "50%": { "transform": "rotate(3deg)" }
+            }
+          },
+          "animation": {
+            "wiggle": "wiggle 1s ease-in-out infinite"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### cssVars
+
+Use to define CSS variables for your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "cssVars": {
+    "theme": {
+      "font-heading": "Poppins, sans-serif"
+    },
+    "light": {
+      "brand": "20 14.3% 4.1%",
+      "radius": "0.5rem"
+    },
+    "dark": {
+      "brand": "20 14.3% 4.1%"
+    }
+  }
+}
+```
+
+### css
+
+Use `css` to add new rules to the project's CSS file eg. `@layer base`, `@layer components`, `@utility`, `@keyframes`, etc.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "css": {
+    "@layer base": {
+      "body": {
+        "font-size": "var(--text-base)",
+        "line-height": "1.5"
+      }
+    },
+    "@layer components": {
+      "button": {
+        "background-color": "var(--color-primary)",
+        "color": "var(--color-white)"
+      }
+    },
+    "@utility text-magic": {
+      "font-size": "var(--text-base)",
+      "line-height": "1.5"
+    },
+    "@keyframes wiggle": {
+      "0%, 100%": {
+        "transform": "rotate(-3deg)"
+      },
+      "50%": {
+        "transform": "rotate(3deg)"
+      }
+    }
+  }
+}
+```
+
+### docs
+
+Use `docs` to show custom documentation or message when installing your registry item via the CLI.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "docs": "Remember to add the FOO_BAR environment variable to your .env file."
+}
+```
+
+### categories
+
+Use `categories` to organize your registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "categories": ["sidebar", "dashboard"]
+}
+```
+
+### meta
+
+Use `meta` to add additional metadata to your registry item. You can add any key/value pair that you want to be available to the registry item.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "meta": { "foo": "bar" }
+}
+```
diff --git a/apps/www/content/docs/registry/registry-json.mdx b/apps/www/content/docs/registry/registry-json.mdx
new file mode 100644
index 00000000000..055eb0236b4
--- /dev/null
+++ b/apps/www/content/docs/registry/registry-json.mdx
@@ -0,0 +1,87 @@
+---
+title: registry.json
+description: Schema for running your own component registry.
+---
+
+The `registry.json` schema is used to define your custom component registry.
+
+```json title="registry.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "shadcn",
+  "homepage": "https://ui.shadcn.com",
+  "items": [
+    {
+      "name": "hello-world",
+      "type": "registry:block",
+      "title": "Hello World",
+      "description": "A simple hello world component.",
+      "files": [
+        {
+          "path": "registry/new-york/hello-world/hello-world.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Definitions
+
+You can see the JSON Schema for `registry.json` [here](https://ui.shadcn.com/schema/registry.json).
+
+### $schema
+
+The `$schema` property is used to specify the schema for the `registry.json` file.
+
+```json title="registry.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json"
+}
+```
+
+### name
+
+The `name` property is used to specify the name of your registry. This is used for data attributes and other metadata.
+
+```json title="registry.json" showLineNumbers
+{
+  "name": "acme"
+}
+```
+
+### homepage
+
+The homepage of your registry. This is used for data attributes and other metadata.
+
+```json title="registry.json" showLineNumbers
+{
+  "homepage": "https://acme.com"
+}
+```
+
+### items
+
+The `items` in your registry. Each item must implement the [registry-item schema specification](https://ui.shadcn.com/schema/registry-item.json).
+
+```json title="registry.json" showLineNumbers
+{
+  "items": [
+    {
+      "name": "hello-world",
+      "type": "registry:block",
+      "title": "Hello World",
+      "description": "A simple hello world component.",
+      "files": [
+        {
+          "path": "registry/new-york/hello-world/hello-world.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
+```
+
+See the [registry-item schema documentation](/docs/registry/registry-item-json) for more information.
diff --git a/apps/www/content/docs/tailwind-v4.mdx b/apps/www/content/docs/tailwind-v4.mdx
new file mode 100644
index 00000000000..307bd973317
--- /dev/null
+++ b/apps/www/content/docs/tailwind-v4.mdx
@@ -0,0 +1,349 @@
+---
+title: Tailwind v4
+description: How to use shadcn/ui with Tailwind v4 and React 19.
+---
+
+It’s here! Tailwind v4 and React 19. Ready for you to try out. You can start using it today.
+
+<div className="flex gap-2 items-center mt-6">
+  <Button asChild size="sm" className="rounded-lg">
+    <a href="#try-it-out">Get Started</a>
+  </Button>
+  <Button asChild size="sm" variant="outline" className="rounded-lg">
+    <a href="https://v4.shadcn.com" target="_blank" rel="noopener noreferrer">
+      See Demo
+    </a>
+  </Button>
+</div>
+
+## What's New
+
+- The CLI can now initialize projects with Tailwind v4.
+- Full support for the new `@theme` directive and `@theme inline` option.
+- All components are updated for Tailwind v4 and React 19.
+- We’ve removed the forwardRefs and adjusted the types.
+- Every primitive now has a `data-slot` attribute for styling.
+- We've fixed and cleaned up the style of the components.
+- We're deprecating the `toast` component in favor of `sonner`.
+- Buttons now use the default cursor.
+- We're deprecating the `default` style. New projects will use `new-york`.
+- HSL colors are now converted to OKLCH.
+
+**Note: this is non-breaking. Your existing apps with Tailwind v3 and React 18 will still work. When you add new components, they'll still be in v3 and React 18 until you upgrade. Only new projects start with Tailwind v4 and React 19.**
+
+## See it Live
+
+I put together a demo with all the updated components here: https://v4.shadcn.com
+
+Take a look and test the components. If you find any bugs, please let me know on [GitHub](https://github.com/shadcn-ui/ui).
+
+## Try It Out
+
+You can test Tailwind v4 + React 19 today using the `canary` release of the CLI. See the framework specific guides below for how to get started.
+
+<div className="grid sm:grid-cols-2 gap-4 mt-8 sm:gap-6">
+  <LinkedCard href="/docs/installation/next">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+      fill="currentColor"
+    >
+      <title>Next.js</title>
+      <path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z" />
+    </svg>
+    <p className="font-medium mt-2">Next.js</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/vite">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+      fill="currentColor"
+    >
+      <title>Vite</title>
+      <path d="m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808 0 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z" />
+    </svg>
+    <p className="font-medium mt-2">Vite</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/laravel">
+    <svg
+      role="img"
+      viewBox="0 0 62 65"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+    >
+      <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" />
+    </svg>
+    <p className="font-medium mt-2">Laravel</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/react-router">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className="w-10 h-10"
+      fill="currentColor"
+    >
+      <path d="M12.118 5.466a2.306 2.306 0 0 0-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 0 0-1.613-.73zm-4.785 4.36a2.145 2.145 0 0 0-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 0 0-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z" />
+    </svg>
+    <p className="font-medium mt-2">React Router</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/astro">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+      fill="currentColor"
+    >
+      <title>Astro</title>
+      <path
+        d="M16.074 16.86C15.354 17.476 13.917 17.895 12.262 17.895C10.23 17.895 8.527 17.263 8.075 16.412C7.914 16.9 7.877 17.458 7.877 17.814C7.877 17.814 7.771 19.564 8.988 20.782C8.988 20.15 9.501 19.637 10.133 19.637C11.216 19.637 11.215 20.582 11.214 21.349V21.418C11.214 22.582 11.925 23.579 12.937 24C12.7812 23.6794 12.7005 23.3275 12.701 22.971C12.701 21.861 13.353 21.448 14.111 20.968C14.713 20.585 15.383 20.161 15.844 19.308C16.0926 18.8493 16.2225 18.3357 16.222 17.814C16.2221 17.4903 16.1722 17.1685 16.074 16.86ZM15.551 0.6C15.747 0.844 15.847 1.172 16.047 1.829L20.415 16.176C18.7743 15.3246 17.0134 14.7284 15.193 14.408L12.35 4.8C12.3273 4.72337 12.2803 4.65616 12.2162 4.60844C12.152 4.56072 12.0742 4.53505 11.9943 4.53528C11.9143 4.5355 11.8366 4.56161 11.7727 4.60969C11.7089 4.65777 11.6623 4.72524 11.64 4.802L8.83 14.405C7.00149 14.724 5.23264 15.3213 3.585 16.176L7.974 1.827C8.174 1.171 8.274 0.843 8.471 0.6C8.64406 0.385433 8.86922 0.218799 9.125 0.116C9.415 0 9.757 0 10.443 0H13.578C14.264 0 14.608 0 14.898 0.117C15.1529 0.219851 15.3783 0.386105 15.551 0.6Z"
+        fill="currentColor"
+      />
+    </svg>
+    <p className="font-medium mt-2">Astro</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/tanstack">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className="w-10 h-10"
+      fill="currentColor"
+    >
+      <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
+    </svg>
+    <p className="font-medium mt-2">TanStack Start</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/gatsby">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+      fill="currentColor"
+    >
+      <title>Gatsby</title>
+      <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 2.571c3.171 0 5.915 1.543 7.629 3.858l-1.286 1.115C16.886 5.572 14.571 4.286 12 4.286c-3.343 0-6.171 2.143-7.286 5.143l9.857 9.857c2.486-.857 4.373-3 4.973-5.572h-4.115V12h6c0 4.457-3.172 8.228-7.372 9.17L2.83 9.944C3.772 5.743 7.543 2.57 12 2.57zm-9.429 9.6l9.344 9.258c-2.4-.086-4.801-.943-6.601-2.743-1.8-1.8-2.743-4.201-2.743-6.515z" />
+    </svg>
+    <p className="font-medium mt-2">Gatsby</p>
+  </LinkedCard>
+  <LinkedCard href="/docs/installation/manual">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+      fill="currentColor"
+    >
+      <title>React</title>
+      <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
+    </svg>
+    <p className="font-medium mt-2">Manual</p>
+  </LinkedCard>
+</div>
+
+## Upgrade Your Project
+
+<Callout className="bg-blue-50 mt-6 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Important:** Before upgrading, please read the [Tailwind v4 Compatibility
+  Docs](https://tailwindcss.com/docs/compatibility) and make sure your project
+  is ready for the upgrade. Tailwind v4 uses bleeding-edge browser features and
+  is designed for modern browsers.
+</Callout>
+
+One of the major advantages of using `shadcn/ui` is that the code you end up with is exactly what you'd write yourself. There are no hidden abstractions.
+
+This means when a dependency has a new release, you can just follow the official upgrade paths.
+
+Here's how to upgrade your existing projects (full docs are on the way):
+
+### 1. Follow the Tailwind v4 Upgrade Guide
+
+- Upgrade to Tailwind v4 by following the official upgrade guide: https://tailwindcss.com/docs/upgrade-guide
+- Use the `@tailwindcss/upgrade@next` codemod to remove deprecated utility classes and update tailwind config.
+
+### 2. Update your CSS variables
+
+The codemod will migrate your CSS variables as references under the `@theme` directive.
+
+```css showLineNumbers
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+  }
+}
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+}
+```
+
+This works. But to make it easier to work with colors and other variables, we'll need to move the `hsl` wrappers and use `@theme inline`.
+
+Here's how you do it:
+
+1. Move `:root` and `.dark` out of the `@layer` base.
+2. Wrap the color values in `hsl()`
+3. Add the `inline` option to `@theme` i.e `@theme inline`
+4. Remove the `hsl()` wrappers from `@theme`
+
+```css showLineNumbers
+:root {
+  --background: hsl(0 0% 100%); // <-- Wrap in hsl
+  --foreground: hsl(0 0% 3.9%);
+}
+
+.dark {
+  --background: hsl(0 0% 3.9%); // <-- Wrap in hsl
+  --foreground: hsl(0 0% 98%);
+}
+
+@theme inline {
+  --color-background: var(--background); // <-- Remove hsl
+  --color-foreground: var(--foreground);
+}
+```
+
+This change makes it much simpler to access your theme variables in both utility classes and outside of CSS for eg. using color values in JavaScript.
+
+### 3. Update colors for charts
+
+Now that the theme colors come with `hsl()`, you can remove the wrapper in your `chartConfig`:
+
+```diff
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+-    color: "hsl(var(--chart-1))",
++    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+-   color: "hsl(var(--chart-2))",
++   color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+```
+
+### 4. Use new `size-*` utility
+
+The new `size-*` utility (added in Tailwind v3.4), is now fully supported by `tailwind-merge`. You can replace `w-* h-*` with the new `size-*` utility:
+
+```diff
+- w-4 h-4
++ size-4
+```
+
+### 5. Update your dependencies
+
+```bash
+pnpm up "@radix-ui/*" cmdk lucide-react recharts tailwind-merge clsx --latest
+```
+
+### 6. Remove forwardRef
+
+You can use the `remove-forward-ref` codemod to migrate your `forwardRef` to props or manually update the primitives.
+
+For the codemod, see https://github.com/reactjs/react-codemod#remove-forward-ref.
+
+If you want to do it manually, here's how to do it step by step:
+
+1. Replace `React.forwardRef<...>` with `React.ComponentProps<...>`
+2. Remove `ref={ref}` from the component.
+3. Add a `data-slot` attribute. This will come in handy for styling with Tailwind.
+4. You can optionally convert to a named function and remove the `displayName`.
+
+#### Before
+
+```tsx showLineNumbers
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b last:border-b-0", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+```
+
+#### After
+
+```tsx showLineNumbers
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+```
+
+## Changelog
+
+### March 19, 2025 - Deprecate `tailwindcss-animate`
+
+We've deprecated `tailwindcss-animate` in favor of `tw-animate-css`.
+
+New project will have `tw-animate-css` installed by default.
+
+For existing projects, follow the steps below to migrate.
+
+1. Remove `tailwindcss-animate` from your dependencies.
+2. Remove the `@plugin 'tailwindcss-animate'` from your globals.css file.
+3. Install `tw-animate-css` as a dev dependency.
+4. Add the `@import "tw-animate-css"` to your globals.css file.
+
+```diff showLineNumbers
+- @plugin 'tailwindcss-animate';
++ @import "tw-animate-css";
+```
+
+### March 12, 2025 - New Dark Mode Colors
+
+We've revisted the dark mode colors and updated them to be more accessible.
+
+If you're running an existing Tailwind v4 project (**not an upgraded one**[^1]), you can update your components to use the new dark mode colors by re-adding your components using the CLI[^2].
+
+<Steps>
+
+<Step>Commit any changes</Step>
+
+**The CLI will overwrite your existing components.** We recommend committing any changes you've made to your components before running the CLI.
+
+```bash
+git add .
+git commit -m "..."
+```
+
+<Step>Update components</Step>
+
+```bash
+npx shadcn@latest add --all --overwrite
+```
+
+<Step>Update colors</Step>
+
+Update the dark mode colors in your `globals.css` file to new OKLCH colors. See the [Base Colors](/docs/theming#base-colors) reference for a list of colors.
+
+<Step>Review changes</Step>
+
+Review and re-apply any changes you made to your components.
+
+</Steps>
+
+[^1]: Upgraded projects are not affected by this change. You can continue using the old dark mode colors.
+[^2]: Updating your components will overwrite your existing components.
diff --git a/apps/www/content/docs/theming.mdx b/apps/www/content/docs/theming.mdx
index bb168de19ef..ef260ff8b8c 100644
--- a/apps/www/content/docs/theming.mdx
+++ b/apps/www/content/docs/theming.mdx
@@ -1,61 +1,69 @@
 ---
 title: Theming
-description: Using CSS Variables or Tailwind CSS for theming.
+description: Using CSS Variables and color utilities for theming.
 ---
 
-You can choose between using CSS variables or Tailwind CSS utility classes for theming.
+You can choose between using CSS variables (recommended) or utility classes for theming.
 
-## Utility classes
+## CSS Variables
 
-```tsx /bg-zinc-950/ /text-zinc-50/ /dark:bg-white/ /dark:text-zinc-950/
-<div className="bg-zinc-950 dark:bg-white" />
+```tsx /bg-background/ /text-foreground/
+<div className="bg-background text-foreground" />
 ```
 
-To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file.
+To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file.
 
 ```json {8} title="components.json"
 {
   "style": "default",
   "rsc": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "app/globals.css",
-    "baseColor": "slate",
-    "cssVariables": false
+    "baseColor": "neutral",
+    "cssVariables": true
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
-  }
+    "utils": "@/lib/utils",
+    "ui": "@/registry/new-york-v4/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
 }
 ```
 
-## CSS Variables
+## Utility classes
 
-```tsx /bg-background/ /text-foreground/
-<div className="bg-background text-foreground" />
+```tsx /bg-zinc-950/ /text-zinc-50/ /dark:bg-white/ /dark:text-zinc-950/
+<div className="bg-zinc-950 dark:bg-white" />
 ```
 
-To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file.
+To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file.
 
 ```json {8} title="components.json"
 {
   "style": "default",
   "rsc": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "app/globals.css",
     "baseColor": "slate",
-    "cssVariables": true
+    "cssVariables": false
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
-  }
+    "utils": "@/lib/utils",
+    "ui": "@/registry/new-york-v4/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
 }
 ```
 
-### Convention
+## Convention
 
 We use a simple `background` and `foreground` convention for colors. The `background` variable is used for the background color of the component and the `foreground` variable is used for the text color.
 
@@ -68,123 +76,487 @@ The `background` suffix is omitted when the variable is used for the background
 Given the following CSS variables:
 
 ```css
---primary: 222.2 47.4% 11.2%;
---primary-foreground: 210 40% 98%;
+--primary: oklch(0.205 0 0);
+--primary-foreground: oklch(0.985 0 0);
 ```
 
-The `background` color of the following component will be `hsl(var(--primary))` and the `foreground` color will be `hsl(var(--primary-foreground))`.
+The `background` color of the following component will be `var(--primary)` and the `foreground` color will be `var(--primary-foreground)`.
 
 ```tsx
 <div className="bg-primary text-primary-foreground">Hello</div>
 ```
 
-<Callout>
-
-**CSS variables must be defined without color space function**. See the [Tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables) for more information.
-
-</Callout>
-
-### List of variables
+## List of variables
 
 Here's the list of variables available for customization:
 
-<Steps>
+```css title="app/globals.css"
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
 
-```css title="Default background color of <body />...etc"
---background: 0 0% 100%;
---foreground: 222.2 47.4% 11.2%;
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
+}
 ```
 
-```css title="Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
---muted: 210 40% 96.1%;
---muted-foreground: 215.4 16.3% 46.9%;
-```
+## Adding new colors
 
-```css title="Background color for <Card />"
---card: 0 0% 100%;
---card-foreground: 222.2 47.4% 11.2%;
-```
+To add new colors, you need to add them to your CSS file and to your `tailwind.config.js` file.
 
-```css title="Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
---popover: 0 0% 100%;
---popover-foreground: 222.2 47.4% 11.2%;
-```
+```css title="app/globals.css"
+:root {
+  --warning: oklch(0.84 0.16 84);
+  --warning-foreground: oklch(0.28 0.07 46);
+}
 
-```css title="Default border color"
---border: 214.3 31.8% 91.4%;
-```
+.dark {
+  --warning: oklch(0.41 0.11 46);
+  --warning-foreground: oklch(0.99 0.02 95);
+}
 
-```css title="Border color for inputs such as <Input />, <Select />, <Textarea />"
---input: 214.3 31.8% 91.4%;
+@theme inline {
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+}
 ```
 
-```css title="Primary colors for <Button />"
---primary: 222.2 47.4% 11.2%;
---primary-foreground: 210 40% 98%;
-```
+You can now use the `warning` utility class in your components.
 
-```css title="Secondary colors for <Button />"
---secondary: 210 40% 96.1%;
---secondary-foreground: 222.2 47.4% 11.2%;
+```tsx /bg-warning/ /text-warning-foreground/
+<div className="bg-warning text-warning-foreground" />
 ```
 
-```css title="Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
---accent: 210 40% 96.1%;
---accent-foreground: 222.2 47.4% 11.2%;
-```
+## Other color formats
 
-```css title="Used for destructive actions such as <Button variant="destructive">"
---destructive: 0 100% 50%;
---destructive-foreground: 210 40% 98%;
-```
+See the [Tailwind CSS documentation](https://tailwindcss.com/docs/colors) for more information on using colors in Tailwind CSS.
 
-```css title="Used for focus ring"
---ring: 215 20.2% 65.1%;
-```
+## Base Colors
 
-```css title="Border radius for card, input and buttons"
---radius: 0.5rem;
-```
+For reference, here's a list of the base colors that are available.
 
-</Steps>
+### Stone
 
-### Adding new colors
+```css title="app/globals.css"
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.216 0.006 56.043);
+  --primary-foreground: oklch(0.985 0.001 106.423);
+  --secondary: oklch(0.97 0.001 106.424);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.216 0.006 56.043);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+}
 
-To add new colors, you need to add them to your CSS file and to your `tailwind.config.js` file.
+.dark {
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.923 0.003 48.717);
+  --primary-foreground: oklch(0.216 0.006 56.043);
+  --secondary: oklch(0.268 0.007 34.298);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+}
+```
+
+### Zinc
 
 ```css title="app/globals.css"
 :root {
-  --warning: 38 92% 50%;
-  --warning-foreground: 48 96% 89%;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
 .dark {
-  --warning: 48 96% 89%;
-  --warning-foreground: 38 92% 50%;
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 ```
 
-```js {5-6} title="tailwind.config.js"
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        warning: "hsl(var(--warning))",
-        "warning-foreground": "hsl(var(--warning-foreground))",
-      },
-    },
-  },
+### Neutral
+
+```css title="app/globals.css"
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 ```
 
-You can now use the `warning` utility class in your components.
+### Gray
 
-```tsx /bg-warning/ /text-warning-foreground/
-<div className="bg-warning text-warning-foreground" />
+```css title="app/globals.css"
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.13 0.028 261.692);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.13 0.028 261.692);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.13 0.028 261.692);
+  --primary: oklch(0.21 0.034 264.665);
+  --primary-foreground: oklch(0.985 0.002 247.839);
+  --secondary: oklch(0.967 0.003 264.542);
+  --secondary-foreground: oklch(0.21 0.034 264.665);
+  --muted: oklch(0.967 0.003 264.542);
+  --muted-foreground: oklch(0.551 0.027 264.364);
+  --accent: oklch(0.967 0.003 264.542);
+  --accent-foreground: oklch(0.21 0.034 264.665);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.928 0.006 264.531);
+  --input: oklch(0.928 0.006 264.531);
+  --ring: oklch(0.707 0.022 261.325);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.002 247.839);
+  --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --sidebar-primary: oklch(0.21 0.034 264.665);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.967 0.003 264.542);
+  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+  --sidebar-border: oklch(0.928 0.006 264.531);
+  --sidebar-ring: oklch(0.707 0.022 261.325);
+}
+
+.dark {
+  --background: oklch(0.13 0.028 261.692);
+  --foreground: oklch(0.985 0.002 247.839);
+  --card: oklch(0.21 0.034 264.665);
+  --card-foreground: oklch(0.985 0.002 247.839);
+  --popover: oklch(0.21 0.034 264.665);
+  --popover-foreground: oklch(0.985 0.002 247.839);
+  --primary: oklch(0.928 0.006 264.531);
+  --primary-foreground: oklch(0.21 0.034 264.665);
+  --secondary: oklch(0.278 0.033 256.848);
+  --secondary-foreground: oklch(0.985 0.002 247.839);
+  --muted: oklch(0.278 0.033 256.848);
+  --muted-foreground: oklch(0.707 0.022 261.325);
+  --accent: oklch(0.278 0.033 256.848);
+  --accent-foreground: oklch(0.985 0.002 247.839);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.034 264.665);
+  --sidebar-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.278 0.033 256.848);
+  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
 ```
 
-### Other color formats
+### Slate
 
-I recommend using [HSL colors](https://www.smashingmagazine.com/2021/07/hsl-colors-css/) for theming but you can also use other color formats if you prefer.
+```css title="app/globals.css"
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
 
-See the [Tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables) for more information on using `rgb`, `rgba` or `hsl` colors.
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+```
diff --git a/apps/www/contentlayer.config.js b/apps/www/contentlayer.config.js
index f86f4f8f261..147105797c4 100644
--- a/apps/www/contentlayer.config.js
+++ b/apps/www/contentlayer.config.js
@@ -1,5 +1,4 @@
-import path from "path"
-import { getHighlighter, loadTheme } from "@shikijs/compat"
+import { getHighlighter } from "@shikijs/compat"
 import {
   defineDocumentType,
   defineNestedType,
@@ -114,12 +113,8 @@ export default makeSource({
       [
         rehypePrettyCode,
         {
-          getHighlighter: async () => {
-            const theme = await loadTheme(
-              path.join(process.cwd(), "/lib/highlighter-theme.json")
-            )
-            return await getHighlighter({ theme })
-          },
+          theme: "github-dark-default",
+          getHighlighter,
           onVisitLine(node) {
             // Prevent lines from collapsing in `display: grid` mode, and allow empty
             // lines to be copy/pasted
diff --git a/apps/www/hooks/use-config.ts b/apps/www/hooks/use-config.ts
index 1fd3549f906..e86324b3c68 100644
--- a/apps/www/hooks/use-config.ts
+++ b/apps/www/hooks/use-config.ts
@@ -8,12 +8,16 @@ type Config = {
   style: Style["name"]
   theme: BaseColor["name"]
   radius: number
+  packageManager: "npm" | "yarn" | "pnpm" | "bun"
+  installationType: "cli" | "manual"
 }
 
 const configAtom = atomWithStorage<Config>("config", {
-  style: "default",
+  style: "new-york",
   theme: "zinc",
   radius: 0.5,
+  packageManager: "pnpm",
+  installationType: "cli",
 })
 
 export function useConfig() {
diff --git a/apps/www/hooks/use-copy-to-clipboard.ts b/apps/www/hooks/use-copy-to-clipboard.ts
index e66bcd465fe..beaf8a8908e 100644
--- a/apps/www/hooks/use-copy-to-clipboard.ts
+++ b/apps/www/hooks/use-copy-to-clipboard.ts
@@ -12,7 +12,7 @@ export function useCopyToClipboard({
   const [isCopied, setIsCopied] = React.useState(false)
 
   const copyToClipboard = (value: string) => {
-    if (typeof window === "undefined" || !navigator.clipboard.writeText) {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
       return
     }
 
diff --git a/apps/www/hooks/use-meta-color.ts b/apps/www/hooks/use-meta-color.ts
new file mode 100644
index 00000000000..ec52514b1e8
--- /dev/null
+++ b/apps/www/hooks/use-meta-color.ts
@@ -0,0 +1,25 @@
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { META_THEME_COLORS } from "@/config/site"
+
+export function useMetaColor() {
+  const { resolvedTheme } = useTheme()
+
+  const metaColor = React.useMemo(() => {
+    return resolvedTheme !== "dark"
+      ? META_THEME_COLORS.light
+      : META_THEME_COLORS.dark
+  }, [resolvedTheme])
+
+  const setMetaColor = React.useCallback((color: string) => {
+    document
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute("content", color)
+  }, [])
+
+  return {
+    metaColor,
+    setMetaColor,
+  }
+}
diff --git a/apps/www/hooks/use-project.ts b/apps/www/hooks/use-project.ts
new file mode 100644
index 00000000000..4f903ea868c
--- /dev/null
+++ b/apps/www/hooks/use-project.ts
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { useAtom } from "jotai"
+import { atomWithStorage } from "jotai/utils"
+
+type Project = {
+  blocks: string[]
+}
+
+const projectAtom = atomWithStorage<Project>("project", {
+  blocks: [],
+})
+
+export function useProject() {
+  const [isAdded, setIsAdded] = React.useState(false)
+  const [project, setProject] = useAtom(projectAtom)
+
+  const addBlock = React.useCallback((block: string) => {
+    setProject((prev) => {
+      if (prev.blocks.includes(block)) {
+        return prev
+      }
+      return { ...prev, blocks: [...prev.blocks, block] }
+    })
+    setIsAdded(true)
+
+    setTimeout(() => {
+      setIsAdded(false)
+    }, 2000)
+  }, [])
+
+  const removeBlock = React.useCallback((block: string) => {
+    setProject((prev) => ({
+      ...prev,
+      blocks: prev.blocks.filter((b) => b !== block),
+    }))
+  }, [])
+
+  const hasBlock = React.useCallback((block: string) => {
+    return project.blocks.includes(block)
+  }, [])
+
+  const resetProject = React.useCallback(() => {
+    setProject({ blocks: [] })
+  }, [])
+
+  return { project, addBlock, removeBlock, resetProject, hasBlock, isAdded }
+}
diff --git a/apps/www/hooks/use-themes-config.ts b/apps/www/hooks/use-themes-config.ts
index 9df09eb021b..8e8cd28e447 100644
--- a/apps/www/hooks/use-themes-config.ts
+++ b/apps/www/hooks/use-themes-config.ts
@@ -7,7 +7,7 @@ type ThemesConfig = {
   activeTheme: Theme
 }
 
-const configAtom = atomWithStorage<ThemesConfig>("themes:config", {
+const configAtom = atomWithStorage<ThemesConfig>("themes:config2", {
   activeTheme: THEMES[0],
 })
 
diff --git a/apps/www/lib/blocks.ts b/apps/www/lib/blocks.ts
index 3c4ecf7d573..6760fbdd330 100644
--- a/apps/www/lib/blocks.ts
+++ b/apps/www/lib/blocks.ts
@@ -1,148 +1,30 @@
 "use server"
 
-import { promises as fs } from "fs"
-import { tmpdir } from "os"
-import path from "path"
-import { Index } from "@/__registry__"
-import { Project, ScriptKind, SourceFile, SyntaxKind } from "ts-morph"
+import { registryItemSchema } from "shadcn/schema"
 import { z } from "zod"
 
-import { highlightCode } from "@/lib/highlight-code"
 import { Style } from "@/registry/registry-styles"
-import { BlockChunk, blockSchema, registryEntrySchema } from "@/registry/schema"
-
-const DEFAULT_BLOCKS_STYLE = "default" satisfies Style["name"]
-
-const project = new Project({
-  compilerOptions: {},
-})
 
 export async function getAllBlockIds(
-  style: Style["name"] = DEFAULT_BLOCKS_STYLE
-) {
-  const blocks = await _getAllBlocks(style)
-  return blocks.map((block) => block.name)
-}
-
-export async function getBlock(
-  name: string,
-  style: Style["name"] = DEFAULT_BLOCKS_STYLE
-) {
-  const entry = Index[style][name]
-
-  const content = await _getBlockContent(name, style)
-
-  const chunks = await Promise.all(
-    entry.chunks?.map(async (chunk: BlockChunk) => {
-      const code = await readFile(chunk.file)
-
-      const tempFile = await createTempSourceFile(`${chunk.name}.tsx`)
-      const sourceFile = project.createSourceFile(tempFile, code, {
-        scriptKind: ScriptKind.TSX,
-      })
-
-      sourceFile
-        .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
-        .filter((node) => {
-          return node.getAttribute("x-chunk") !== undefined
-        })
-        ?.map((component) => {
-          component
-            .getAttribute("x-chunk")
-            ?.asKind(SyntaxKind.JsxAttribute)
-            ?.remove()
-        })
-
-      return {
-        ...chunk,
-        code: sourceFile
-          .getText()
-          .replaceAll(`@/registry/${style}/`, "@/components/"),
-      }
-    })
-  )
-
-  return blockSchema.parse({
-    style,
-    highlightedCode: content.code ? await highlightCode(content.code) : "",
-    ...entry,
-    ...content,
-    chunks,
-    type: "registry:block",
-  })
-}
-
-async function _getAllBlocks(style: Style["name"] = DEFAULT_BLOCKS_STYLE) {
-  const index = z.record(registryEntrySchema).parse(Index[style])
-
-  return Object.values(index).filter((block) => block.type === "registry:block")
-}
-
-async function _getBlockCode(
-  name: string,
-  style: Style["name"] = DEFAULT_BLOCKS_STYLE
-) {
-  const entry = Index[style][name]
-  if (!entry) {
-    console.error(`Block ${name} not found in style ${style}`)
-    return ""
-  }
-  const block = registryEntrySchema.parse(entry)
-
-  if (!block.source) {
-    return ""
-  }
-
-  return await readFile(block.source)
-}
-
-async function readFile(source: string) {
-  const filepath = path.join(process.cwd(), source)
-  return await fs.readFile(filepath, "utf-8")
-}
-
-async function createTempSourceFile(filename: string) {
-  const dir = await fs.mkdtemp(path.join(tmpdir(), "codex-"))
-  return path.join(dir, filename)
-}
-
-async function _getBlockContent(name: string, style: Style["name"]) {
-  const raw = await _getBlockCode(name, style)
-
-  const tempFile = await createTempSourceFile(`${name}.tsx`)
-  const sourceFile = project.createSourceFile(tempFile, raw, {
-    scriptKind: ScriptKind.TSX,
-  })
-
-  // Extract meta.
-  const iframeHeight = _extractVariable(sourceFile, "iframeHeight")
-  const containerClassName = _extractVariable(sourceFile, "containerClassName")
-
-  // Format the code.
-  let code = sourceFile.getText()
-  code = code.replaceAll(`@/registry/${style}/`, "@/components/")
-  code = code.replaceAll("export default", "export")
-
-  return {
-    code,
-    container: {
-      height: iframeHeight,
-      className: containerClassName,
-    },
-  }
-}
-
-function _extractVariable(sourceFile: SourceFile, name: string) {
-  const variable = sourceFile.getVariableDeclaration(name)
-  if (!variable) {
-    return null
-  }
-
-  const value = variable
-    .getInitializerIfKindOrThrow(SyntaxKind.StringLiteral)
-    .getLiteralValue()
-
-  variable.remove()
-
-  return value
+  types: z.infer<typeof registryItemSchema>["type"][] = [
+    "registry:block",
+    "registry:internal",
+  ],
+  categories: string[] = [],
+  style: Style["name"] = "new-york"
+): Promise<string[]> {
+  const { Index } = await import("@/__registry__")
+  const index = z.record(registryItemSchema).parse(Index[style])
+
+  return Object.values(index)
+    .filter(
+      (block) =>
+        types.includes(block.type) &&
+        (categories.length === 0 ||
+          block.categories?.some((category) =>
+            categories.includes(category)
+          )) &&
+        !block.name.startsWith("chart-")
+    )
+    .map((block) => block.name)
 }
diff --git a/apps/www/lib/colors.ts b/apps/www/lib/colors.ts
index 74709c4f11f..42f07264fd7 100644
--- a/apps/www/lib/colors.ts
+++ b/apps/www/lib/colors.ts
@@ -11,6 +11,7 @@ const colorSchema = z.object({
   rgb: z.string(),
   hsl: z.string(),
   foreground: z.string(),
+  oklch: z.string(),
 })
 
 const colorPaletteSchema = z.object({
@@ -26,6 +27,7 @@ export function getColorFormat(color: Color) {
     hex: color.hex,
     rgb: color.rgb,
     hsl: color.hsl,
+    oklch: color.oklch,
   }
 }
 
@@ -57,6 +59,10 @@ export function getColors() {
                 /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
                 "$1 $2 $3"
               ),
+              oklch: color.oklch.replace(
+                /^oklch\(([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\)$/,
+                "$1 $2 $3"
+              ),
               foreground: getForegroundFromBackground(rgb),
             }
           }),
diff --git a/apps/www/lib/fonts.ts b/apps/www/lib/fonts.ts
index 297b0b3acb7..ed245edf98d 100644
--- a/apps/www/lib/fonts.ts
+++ b/apps/www/lib/fonts.ts
@@ -1,15 +1,6 @@
-// import { JetBrains_Mono as FontMono, Inter as FontSans } from "next/font/google"
-import { JetBrains_Mono as FontMono } from "next/font/google"
-// import { GeistMono } from "geist/font/mono"
+import { GeistMono } from "geist/font/mono"
 import { GeistSans } from "geist/font/sans"
 
-// export const fontSans = FontSans({
-//   subsets: ["latin"],
-//   variable: "--font-sans",
-// })
 export const fontSans = GeistSans
 
-export const fontMono = FontMono({
-  subsets: ["latin"],
-  variable: "--font-mono",
-})
+export const fontMono = GeistMono
diff --git a/apps/www/lib/highlight-code.ts b/apps/www/lib/highlight-code.ts
index 447d05fc69e..acc235f2d44 100644
--- a/apps/www/lib/highlight-code.ts
+++ b/apps/www/lib/highlight-code.ts
@@ -1,10 +1,8 @@
-"use server"
-
 import { codeToHtml } from "shiki"
 
 export async function highlightCode(code: string) {
-  const html = codeToHtml(code, {
-    lang: "typescript",
+  const html = await codeToHtml(code, {
+    lang: "jsx",
     theme: "github-dark-default",
     transformers: [
       {
diff --git a/apps/www/lib/registry.test.ts b/apps/www/lib/registry.test.ts
new file mode 100644
index 00000000000..c7808422533
--- /dev/null
+++ b/apps/www/lib/registry.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest"
+
+import { createFileTreeForRegistryItemFiles } from "@/lib/registry"
+
+describe("createFileTreeForRegistryItemFiles", () => {
+  it("should create a nested file tree structure", async () => {
+    const files = [
+      { path: "page.tsx" },
+      { path: "components/foo.tsx" },
+      { path: "components/baz.tsx" },
+      { path: "components/boo/quip.tsx" },
+    ]
+
+    const expectedOutput = [
+      { name: "page.tsx", path: "page.tsx" },
+      {
+        name: "components",
+        children: [
+          { name: "foo.tsx", path: "components/foo.tsx" },
+          { name: "baz.tsx", path: "components/baz.tsx" },
+          {
+            name: "boo",
+            children: [{ name: "quip.tsx", path: "components/boo/quip.tsx" }],
+          },
+        ],
+      },
+    ]
+
+    const result = await createFileTreeForRegistryItemFiles(files)
+    expect(result).toEqual(expectedOutput)
+  })
+
+  it("should return an empty array for empty input", async () => {
+    const result = await createFileTreeForRegistryItemFiles([])
+    expect(result).toEqual([])
+  })
+})
diff --git a/apps/www/lib/registry.ts b/apps/www/lib/registry.ts
new file mode 100644
index 00000000000..0186a12a8f6
--- /dev/null
+++ b/apps/www/lib/registry.ts
@@ -0,0 +1,274 @@
+import { promises as fs } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import { Index } from "@/__registry__"
+import { registryItemFileSchema, registryItemSchema } from "shadcn/schema"
+import { Project, ScriptKind, SourceFile, SyntaxKind } from "ts-morph"
+import { z } from "zod"
+
+import { Style } from "@/registry/registry-styles"
+
+export const DEFAULT_REGISTRY_STYLE = "new-york" satisfies Style["name"]
+
+const memoizedIndex: typeof Index = Object.fromEntries(
+  Object.entries(Index).map(([style, items]) => [style, { ...items }])
+)
+
+export function getRegistryComponent(
+  name: string,
+  style: Style["name"] = DEFAULT_REGISTRY_STYLE
+) {
+  return memoizedIndex[style][name]?.component
+}
+
+export async function getRegistryItem(
+  name: string,
+  style: Style["name"] = DEFAULT_REGISTRY_STYLE
+) {
+  const item = memoizedIndex[style][name]
+
+  if (!item) {
+    return null
+  }
+
+  // Convert all file paths to object.
+  // TODO: remove when we migrate to new registry.
+  item.files = item.files.map((file: unknown) =>
+    typeof file === "string" ? { path: file } : file
+  )
+
+  // Fail early before doing expensive file operations.
+  const result = registryItemSchema.safeParse(item)
+  if (!result.success) {
+    return null
+  }
+
+  let files: typeof result.data.files = []
+  for (const file of item.files) {
+    const content = await getFileContent(file)
+    const relativePath = path.relative(process.cwd(), file.path)
+
+    files.push({
+      ...file,
+      path: relativePath,
+      content,
+    })
+  }
+
+  // Get meta.
+  // Assume the first file is the main file.
+  // const meta = await getFileMeta(files[0].path)
+
+  // Fix file paths.
+  files = fixFilePaths(files)
+
+  const parsed = registryItemSchema.safeParse({
+    ...result.data,
+    files,
+    // meta,
+  })
+
+  if (!parsed.success) {
+    console.error(parsed.error.message)
+    return null
+  }
+
+  return parsed.data
+}
+
+async function getFileContent(file: z.infer<typeof registryItemFileSchema>) {
+  const raw = await fs.readFile(file.path, "utf-8")
+
+  const project = new Project({
+    compilerOptions: {},
+  })
+
+  const tempFile = await createTempSourceFile(file.path)
+  const sourceFile = project.createSourceFile(tempFile, raw, {
+    scriptKind: ScriptKind.TSX,
+  })
+
+  // Remove meta variables.
+  removeVariable(sourceFile, "iframeHeight")
+  removeVariable(sourceFile, "containerClassName")
+  removeVariable(sourceFile, "description")
+
+  let code = sourceFile.getFullText()
+
+  // Some registry items uses default export.
+  // We want to use named export instead.
+  // TODO: do we really need this? - @shadcn.
+  if (file.type !== "registry:page") {
+    code = code.replaceAll("export default", "export")
+  }
+
+  // Fix imports.
+  code = fixImport(code)
+
+  return code
+}
+
+async function getFileMeta(filePath: string) {
+  const raw = await fs.readFile(filePath, "utf-8")
+
+  const project = new Project({
+    compilerOptions: {},
+  })
+
+  const tempFile = await createTempSourceFile(filePath)
+  const sourceFile = project.createSourceFile(tempFile, raw, {
+    scriptKind: ScriptKind.TSX,
+  })
+
+  const iframeHeight = extractVariable(sourceFile, "iframeHeight")
+  const containerClassName = extractVariable(sourceFile, "containerClassName")
+  const description = extractVariable(sourceFile, "description")
+
+  return {
+    iframeHeight,
+    containerClassName,
+    description,
+  }
+}
+
+function getFileTarget(file: z.infer<typeof registryItemFileSchema>) {
+  let target = file.target
+
+  if (!target || target === "") {
+    const fileName = file.path.split("/").pop()
+    if (
+      file.type === "registry:block" ||
+      file.type === "registry:component" ||
+      file.type === "registry:example"
+    ) {
+      target = `components/${fileName}`
+    }
+
+    if (file.type === "registry:ui") {
+      target = `components/ui/${fileName}`
+    }
+
+    if (file.type === "registry:hook") {
+      target = `hooks/${fileName}`
+    }
+
+    if (file.type === "registry:lib") {
+      target = `lib/${fileName}`
+    }
+  }
+
+  return target ?? ""
+}
+
+async function createTempSourceFile(filename: string) {
+  const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-"))
+  return path.join(dir, filename)
+}
+
+function removeVariable(sourceFile: SourceFile, name: string) {
+  sourceFile.getVariableDeclaration(name)?.remove()
+}
+
+function extractVariable(sourceFile: SourceFile, name: string) {
+  const variable = sourceFile.getVariableDeclaration(name)
+  if (!variable) {
+    return null
+  }
+
+  const value = variable
+    .getInitializerIfKindOrThrow(SyntaxKind.StringLiteral)
+    .getLiteralValue()
+
+  variable.remove()
+
+  return value
+}
+
+function fixFilePaths(files: z.infer<typeof registryItemSchema>["files"]) {
+  if (!files) {
+    return []
+  }
+
+  // Resolve all paths relative to the first file's directory.
+  const firstFilePath = files[0].path
+  const firstFilePathDir = path.dirname(firstFilePath)
+
+  return files.map((file) => {
+    return {
+      ...file,
+      path: path.relative(firstFilePathDir, file.path),
+      target: getFileTarget(file),
+    }
+  })
+}
+
+export function fixImport(content: string) {
+  const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
+
+  const replacement = (
+    match: string,
+    path: string,
+    type: string,
+    component: string
+  ) => {
+    if (type.endsWith("components")) {
+      return `@/components/${component}`
+    } else if (type.endsWith("ui")) {
+      return `@/components/ui/${component}`
+    } else if (type.endsWith("hooks")) {
+      return `@/hooks/${component}`
+    } else if (type.endsWith("lib")) {
+      return `@/lib/${component}`
+    }
+
+    return match
+  }
+
+  return content.replace(regex, replacement)
+}
+
+export type FileTree = {
+  name: string
+  path?: string
+  children?: FileTree[]
+}
+
+export function createFileTreeForRegistryItemFiles(
+  files: Array<{ path: string; target?: string }>
+) {
+  const root: FileTree[] = []
+
+  for (const file of files) {
+    const path = file.target ?? file.path
+    const parts = path.split("/")
+    let currentLevel = root
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isFile = i === parts.length - 1
+      const existingNode = currentLevel.find((node) => node.name === part)
+
+      if (existingNode) {
+        if (isFile) {
+          // Update existing file node with full path
+          existingNode.path = path
+        } else {
+          // Move to next level in the tree
+          currentLevel = existingNode.children!
+        }
+      } else {
+        const newNode: FileTree = isFile
+          ? { name: part, path }
+          : { name: part, children: [] }
+
+        currentLevel.push(newNode)
+
+        if (!isFile) {
+          currentLevel = newNode.children!
+        }
+      }
+    }
+  }
+
+  return root
+}
diff --git a/apps/www/lib/rehype-component.ts b/apps/www/lib/rehype-component.ts
index 40451f56cb8..c43aa8d8721 100644
--- a/apps/www/lib/rehype-component.ts
+++ b/apps/www/lib/rehype-component.ts
@@ -33,21 +33,24 @@ export function rehypeComponent() {
             let src: string
 
             if (srcPath) {
-              src = srcPath
+              src = path.join(process.cwd(), srcPath)
             } else {
               const component = Index[style.name][name]
               src = fileName
-                ? component.files.find((file: string) => {
-                    return (
-                      file.endsWith(`${fileName}.tsx`) ||
-                      file.endsWith(`${fileName}.ts`)
-                    )
-                  }) || component.files[0]
-                : component.files[0]
+                ? component.files.find((file: unknown) => {
+                    if (typeof file === "string") {
+                      return (
+                        file.endsWith(`${fileName}.tsx`) ||
+                        file.endsWith(`${fileName}.ts`)
+                      )
+                    }
+                    return false
+                  }) || component.files[0]?.path
+                : component.files[0]?.path
             }
 
             // Read the source file.
-            const filePath = path.join(process.cwd(), src)
+            const filePath = src
             let source = fs.readFileSync(filePath, "utf8")
 
             // Replace imports.
@@ -106,10 +109,10 @@ export function rehypeComponent() {
         try {
           for (const style of styles) {
             const component = Index[style.name][name]
-            const src = component.files[0]
+            const src = component.files[0]?.path
 
             // Read the source file.
-            const filePath = path.join(process.cwd(), src)
+            const filePath = src
             let source = fs.readFileSync(filePath, "utf8")
 
             // Replace imports.
diff --git a/apps/www/lib/rehype-npm-command.ts b/apps/www/lib/rehype-npm-command.ts
index 68157b66e4c..ee163bc5669 100644
--- a/apps/www/lib/rehype-npm-command.ts
+++ b/apps/www/lib/rehype-npm-command.ts
@@ -26,7 +26,7 @@ export function rehypeNpmCommand() {
         )
       }
 
-      // npx create.
+      // npx create-.
       if (node.properties?.["__rawString__"]?.startsWith("npx create-")) {
         const npmCommand = node.properties?.["__rawString__"]
         node.properties["__npmCommand__"] = npmCommand
@@ -44,6 +44,24 @@ export function rehypeNpmCommand() {
         )
       }
 
+      // npm create.
+      if (node.properties?.["__rawString__"]?.startsWith("npm create")) {
+        const npmCommand = node.properties?.["__rawString__"]
+        node.properties["__npmCommand__"] = npmCommand
+        node.properties["__yarnCommand__"] = npmCommand.replace(
+          "npm create",
+          "yarn create"
+        )
+        node.properties["__pnpmCommand__"] = npmCommand.replace(
+          "npm create",
+          "pnpm create"
+        )
+        node.properties["__bunCommand__"] = npmCommand.replace(
+          "npm create",
+          "bun create"
+        )
+      }
+
       // npx.
       if (
         node.properties?.["__rawString__"]?.startsWith("npx") &&
@@ -61,6 +79,21 @@ export function rehypeNpmCommand() {
           "bunx --bun"
         )
       }
+
+      // npm run.
+      if (node.properties?.["__rawString__"]?.startsWith("npm run")) {
+        const npmCommand = node.properties?.["__rawString__"]
+        node.properties["__npmCommand__"] = npmCommand
+        node.properties["__yarnCommand__"] = npmCommand.replace(
+          "npm run",
+          "yarn"
+        )
+        node.properties["__pnpmCommand__"] = npmCommand.replace(
+          "npm run",
+          "pnpm"
+        )
+        node.properties["__bunCommand__"] = npmCommand.replace("npm run", "bun")
+      }
     })
   }
 }
diff --git a/apps/www/lib/themes.ts b/apps/www/lib/themes.ts
index 44398f11b7b..2b589938b3b 100644
--- a/apps/www/lib/themes.ts
+++ b/apps/www/lib/themes.ts
@@ -1,6 +1,73 @@
 import { themeColorsToCssVariables } from "@/lib/charts"
 
 const _THEMES = [
+  {
+    name: "Sapphire",
+    id: "default-sapphire",
+    colors: {
+      background: "0 0% 100%",
+      foreground: "222.2 84% 4.9%",
+      card: "0 0% 100%",
+      cardForeground: "222.2 84% 4.9%",
+      popover: "0 0% 100%",
+      popoverForeground: "222.2 84% 4.9%",
+      primary: "221.2 83.2% 53.3%",
+      primaryForeground: "210 40% 98%",
+      secondary: "210 40% 96.1%",
+      secondaryForeground: "222.2 47.4% 11.2%",
+      muted: "210 40% 96.1%",
+      mutedForeground: "215.4 16.3% 44%",
+      accent: "210 40% 96.1%",
+      accentForeground: "222.2 47.4% 11.2%",
+      destructive: "0 72% 51%",
+      destructiveForeground: "210 40% 98%",
+      border: "214.3 31.8% 91.4%",
+      input: "214.3 31.8% 91.4%",
+      ring: "221.2 83.2% 53.3%",
+      "chart-1": "221.2 83.2% 53.3%",
+      "chart-2": "212 95% 68%",
+      "chart-3": "216 92% 60%",
+      "chart-4": "210 98% 78%",
+      "chart-5": "212 97% 87%",
+    },
+    colorsDark: {
+      background: "240 10% 3.9%",
+      foreground: "0 0% 98%",
+      card: "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      popover: "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      primary: "221.2 83.2% 53.3%",
+      primaryForeground: "210 40% 98%",
+      secondary: "210 40% 96.1%",
+      secondaryForeground: "222.2 47.4% 11.2%",
+      muted: "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      accent: "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      destructive: "0 72% 51%",
+      destructiveForeground: "210 40% 98%",
+      border: "240 3.7% 15.9%",
+      input: "240 3.7% 15.9%",
+      ring: "221.2 83.2% 53.3%",
+      "chart-1": "221.2 83.2% 53.3%",
+      "chart-2": "212 95% 68%",
+      "chart-3": "216 92% 60%",
+      "chart-4": "210 98% 78%",
+      "chart-5": "212 97% 87%",
+    },
+    fontFamily: {
+      heading: {
+        name: "Inter",
+        type: "sans-serif",
+      },
+      body: {
+        name: "Inter",
+        type: "sans-serif",
+      },
+    },
+    radius: 0.5,
+  },
   {
     name: "Default",
     id: "default-shadcn",
@@ -135,73 +202,6 @@ const _THEMES = [
     },
     radius: 0.5,
   },
-  {
-    name: "Sapphire",
-    id: "default-sapphire",
-    colors: {
-      background: "0 0% 100%",
-      foreground: "222.2 84% 4.9%",
-      card: "0 0% 100%",
-      cardForeground: "222.2 84% 4.9%",
-      popover: "0 0% 100%",
-      popoverForeground: "222.2 84% 4.9%",
-      primary: "221.2 83.2% 53.3%",
-      primaryForeground: "210 40% 98%",
-      secondary: "210 40% 96.1%",
-      secondaryForeground: "222.2 47.4% 11.2%",
-      muted: "210 40% 96.1%",
-      mutedForeground: "215.4 16.3% 44%",
-      accent: "210 40% 96.1%",
-      accentForeground: "222.2 47.4% 11.2%",
-      destructive: "0 72% 51%",
-      destructiveForeground: "210 40% 98%",
-      border: "214.3 31.8% 91.4%",
-      input: "214.3 31.8% 91.4%",
-      ring: "221.2 83.2% 53.3%",
-      "chart-1": "221.2 83.2% 53.3%",
-      "chart-2": "212 95% 68%",
-      "chart-3": "216 92% 60%",
-      "chart-4": "210 98% 78%",
-      "chart-5": "212 97% 87%",
-    },
-    colorsDark: {
-      background: "240 10% 3.9%",
-      foreground: "0 0% 98%",
-      card: "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      popover: "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      primary: "221.2 83.2% 53.3%",
-      primaryForeground: "210 40% 98%",
-      secondary: "210 40% 96.1%",
-      secondaryForeground: "222.2 47.4% 11.2%",
-      muted: "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      accent: "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      destructive: "0 72% 51%",
-      destructiveForeground: "210 40% 98%",
-      border: "240 3.7% 15.9%",
-      input: "240 3.7% 15.9%",
-      ring: "221.2 83.2% 53.3%",
-      "chart-1": "221.2 83.2% 53.3%",
-      "chart-2": "212 95% 68%",
-      "chart-3": "216 92% 60%",
-      "chart-4": "210 98% 78%",
-      "chart-5": "212 97% 87%",
-    },
-    fontFamily: {
-      heading: {
-        name: "Inter",
-        type: "sans-serif",
-      },
-      body: {
-        name: "Inter",
-        type: "sans-serif",
-      },
-    },
-    radius: 0.5,
-  },
   {
     name: "Ruby",
     id: "default-ruby",
diff --git a/apps/www/next.config.mjs b/apps/www/next.config.mjs
index 7f05ffdf9cf..d4d888e980e 100644
--- a/apps/www/next.config.mjs
+++ b/apps/www/next.config.mjs
@@ -2,6 +2,11 @@ import { createContentlayerPlugin } from "next-contentlayer2"
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  experimental: {
+    outputFileTracingIncludes: {
+      "/blocks/*": ["./registry/**/*"],
+    },
+  },
   reactStrictMode: true,
   swcMinify: true,
   images: {
@@ -53,6 +58,16 @@ const nextConfig = {
         destination: "/docs/components/form",
         permanent: false,
       },
+      {
+        source: "/sidebar",
+        destination: "/docs/components/sidebar",
+        permanent: true,
+      },
+      {
+        source: "/react-19",
+        destination: "/docs/react-19",
+        permanent: true,
+      },
     ]
   },
 }
diff --git a/apps/www/package.json b/apps/www/package.json
index 53529b19b79..6085ba2126b 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -5,8 +5,10 @@
   "type": "module",
   "scripts": {
     "dev": "next dev -p 3333",
-    "build": "contentlayer2 build && pnpm build:registry && next build",
+    "build": "pnpm --filter=shadcn build && contentlayer2 build && pnpm build:registry && next build",
     "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --loglevel silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache",
+    "registry:build": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --loglevel silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache",
+    "registry:capture": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/capture-registry.mts",
     "build:docs": "contentlayer2 build",
     "seed:tasks": "tsx --tsconfig ./tsconfig.scripts.json ./app/(app)/examples/tasks/data/seed.ts",
     "start": "next start -p 3333",
@@ -18,6 +20,11 @@
     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@faker-js/faker": "^8.2.0",
     "@hookform/resolvers": "^3.1.0",
     "@radix-ui/react-accessible-icon": "^1.0.3",
@@ -39,7 +46,7 @@
     "@radix-ui/react-portal": "^1.0.4",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.4",
+    "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
@@ -50,10 +57,12 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-table": "^8.9.1",
     "@vercel/analytics": "^1.2.2",
     "@vercel/og": "^0.0.21",
     "change-case": "^5.4.4",
+    "chrono-node": "^2.8.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "cmdk": "^1.0.0",
@@ -65,35 +74,37 @@
     "geist": "^1.2.2",
     "input-otp": "^1.2.2",
     "jotai": "^2.1.0",
-    "lodash.template": "^4.5.0",
-    "lucide-react": "0.359.0",
+    "little-date": "^1.0.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "0.477.0",
     "markdown-wasm": "^1.2.0",
     "next": "14.3.0-canary.43",
     "next-contentlayer2": "^0.4.6",
-    "next-themes": "^0.2.1",
+    "next-themes": "^0.4.3",
     "react": "^18.2.0",
-    "react-day-picker": "^8.7.1",
+    "react-day-picker": "^9.7.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.2",
     "react-resizable-panels": "^2.0.22",
     "react-wrap-balancer": "^0.4.1",
     "recharts": "2.12.7",
-    "sharp": "^0.31.3",
+    "shadcn": "3.3.1",
+    "sharp": "^0.32.6",
     "sonner": "^1.2.3",
     "swr": "2.2.6-beta.3",
     "tailwind-merge": "^1.12.0",
     "ts-morph": "^22.0.0",
-    "vaul": "0.9.0",
+    "vaul": "1.1.1",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@shikijs/compat": "^1.1.7",
-    "@types/lodash.template": "^4.5.1",
+    "@types/lodash": "^4.17.7",
     "@types/node": "^17.0.45",
     "@types/react": "^18.2.65",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18.2.22",
-    "esbuild": "^0.17.19",
+    "esbuild": "^0.25.0",
     "eslint": "^8.41.0",
     "mdast-util-toc": "^6.1.1",
     "postcss": "^8.4.24",
@@ -103,10 +114,10 @@
     "rehype-slug": "^5.1.0",
     "remark": "^14.0.3",
     "remark-code-import": "^1.2.0",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "rimraf": "^4.1.3",
     "shiki": "^1.10.1",
-    "tailwindcss": "3.3.7",
+    "tailwindcss": "3.4.6",
     "typescript": "^5.5.3",
     "unist-builder": "3.0.0",
     "unist-util-visit": "^4.1.2"
diff --git a/apps/www/public/avatars/shadcn.jpg b/apps/www/public/avatars/shadcn.jpg
new file mode 100644
index 00000000000..7d3b7a4dab8
Binary files /dev/null and b/apps/www/public/avatars/shadcn.jpg differ
diff --git a/apps/www/public/examples/cards-dark.png b/apps/www/public/examples/cards-dark.png
index 47f183e7246..64d2c141d51 100644
Binary files a/apps/www/public/examples/cards-dark.png and b/apps/www/public/examples/cards-dark.png differ
diff --git a/apps/www/public/examples/cards-light.png b/apps/www/public/examples/cards-light.png
index 5dea3794e06..f666601c1ca 100644
Binary files a/apps/www/public/examples/cards-light.png and b/apps/www/public/examples/cards-light.png differ
diff --git a/apps/www/public/favicon-16x16.png b/apps/www/public/favicon-16x16.png
index 0840dbf2923..d2ad2370f82 100644
Binary files a/apps/www/public/favicon-16x16.png and b/apps/www/public/favicon-16x16.png differ
diff --git a/apps/www/public/favicon-32x32.png b/apps/www/public/favicon-32x32.png
index aeb876e7f70..2aaeed4bb1e 100644
Binary files a/apps/www/public/favicon-32x32.png and b/apps/www/public/favicon-32x32.png differ
diff --git a/apps/www/public/favicon.ico b/apps/www/public/favicon.ico
index 2f96628df66..f4f7adbb9f0 100644
Binary files a/apps/www/public/favicon.ico and b/apps/www/public/favicon.ico differ
diff --git a/apps/www/public/images/block-preview-dark.png b/apps/www/public/images/block-preview-dark.png
new file mode 100644
index 00000000000..61e8b0b9f7d
Binary files /dev/null and b/apps/www/public/images/block-preview-dark.png differ
diff --git a/apps/www/public/images/block-preview-light.png b/apps/www/public/images/block-preview-light.png
new file mode 100644
index 00000000000..03c1d608a7b
Binary files /dev/null and b/apps/www/public/images/block-preview-light.png differ
diff --git a/apps/www/public/images/registry-dark.png b/apps/www/public/images/registry-dark.png
new file mode 100644
index 00000000000..6028eaee140
Binary files /dev/null and b/apps/www/public/images/registry-dark.png differ
diff --git a/apps/www/public/images/registry-light.png b/apps/www/public/images/registry-light.png
new file mode 100644
index 00000000000..6d41e915017
Binary files /dev/null and b/apps/www/public/images/registry-light.png differ
diff --git a/apps/www/public/images/sidebar-menu-dark.png b/apps/www/public/images/sidebar-menu-dark.png
new file mode 100644
index 00000000000..e21b25420af
Binary files /dev/null and b/apps/www/public/images/sidebar-menu-dark.png differ
diff --git a/apps/www/public/images/sidebar-menu.png b/apps/www/public/images/sidebar-menu.png
new file mode 100644
index 00000000000..b7ff06ddfdb
Binary files /dev/null and b/apps/www/public/images/sidebar-menu.png differ
diff --git a/apps/www/public/images/sidebar-structure-dark.png b/apps/www/public/images/sidebar-structure-dark.png
new file mode 100644
index 00000000000..8806dd2511f
Binary files /dev/null and b/apps/www/public/images/sidebar-structure-dark.png differ
diff --git a/apps/www/public/images/sidebar-structure.png b/apps/www/public/images/sidebar-structure.png
new file mode 100644
index 00000000000..6c91f670623
Binary files /dev/null and b/apps/www/public/images/sidebar-structure.png differ
diff --git a/apps/www/public/r/colors/gray.json b/apps/www/public/r/colors/gray.json
index 9cba353ed91..93a36e062eb 100644
--- a/apps/www/public/r/colors/gray.json
+++ b/apps/www/public/r/colors/gray.json
@@ -97,6 +97,75 @@
       "chart-5": "340 75% 55%"
     }
   },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.13 0.028 261.692)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.13 0.028 261.692)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.13 0.028 261.692)",
+      "primary": "oklch(0.21 0.034 264.665)",
+      "primary-foreground": "oklch(0.985 0.002 247.839)",
+      "secondary": "oklch(0.967 0.003 264.542)",
+      "secondary-foreground": "oklch(0.21 0.034 264.665)",
+      "muted": "oklch(0.967 0.003 264.542)",
+      "muted-foreground": "oklch(0.551 0.027 264.364)",
+      "accent": "oklch(0.967 0.003 264.542)",
+      "accent-foreground": "oklch(0.21 0.034 264.665)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.928 0.006 264.531)",
+      "input": "oklch(0.928 0.006 264.531)",
+      "ring": "oklch(0.707 0.022 261.325)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0.002 247.839)",
+      "sidebar-foreground": "oklch(0.13 0.028 261.692)",
+      "sidebar-primary": "oklch(0.21 0.034 264.665)",
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-accent": "oklch(0.967 0.003 264.542)",
+      "sidebar-accent-foreground": "oklch(0.21 0.034 264.665)",
+      "sidebar-border": "oklch(0.928 0.006 264.531)",
+      "sidebar-ring": "oklch(0.707 0.022 261.325)"
+    },
+    "dark": {
+      "background": "oklch(0.13 0.028 261.692)",
+      "foreground": "oklch(0.985 0.002 247.839)",
+      "card": "oklch(0.21 0.034 264.665)",
+      "card-foreground": "oklch(0.985 0.002 247.839)",
+      "popover": "oklch(0.21 0.034 264.665)",
+      "popover-foreground": "oklch(0.985 0.002 247.839)",
+      "primary": "oklch(0.928 0.006 264.531)",
+      "primary-foreground": "oklch(0.21 0.034 264.665)",
+      "secondary": "oklch(0.278 0.033 256.848)",
+      "secondary-foreground": "oklch(0.985 0.002 247.839)",
+      "muted": "oklch(0.278 0.033 256.848)",
+      "muted-foreground": "oklch(0.707 0.022 261.325)",
+      "accent": "oklch(0.278 0.033 256.848)",
+      "accent-foreground": "oklch(0.985 0.002 247.839)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.551 0.027 264.364)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.21 0.034 264.665)",
+      "sidebar-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-accent": "oklch(0.278 0.033 256.848)",
+      "sidebar-accent-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.551 0.027 264.364)"
+    }
+  },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n    --ring: 224 71.4% 4.1%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --ring: 216 12.2% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
\ No newline at end of file
diff --git a/apps/www/public/r/colors/index.json b/apps/www/public/r/colors/index.json
index c25158efb11..c06c452a3ff 100644
--- a/apps/www/public/r/colors/index.json
+++ b/apps/www/public/r/colors/index.json
@@ -6,6 +6,7 @@
     "hex": "#000000",
     "rgb": "rgb(0,0,0)",
     "hsl": "hsl(0,0%,0%)",
+    "oklch": "oklch(0.00,0.00,0)",
     "rgbChannel": "0 0 0",
     "hslChannel": "0 0% 0%"
   },
@@ -13,6 +14,7 @@
     "hex": "#ffffff",
     "rgb": "rgb(255,255,255)",
     "hsl": "hsl(0,0%,100%)",
+    "oklch": "oklch(1.00,0.00,0)",
     "rgbChannel": "255 255 255",
     "hslChannel": "0 0% 100%"
   },
@@ -22,6 +24,7 @@
       "hex": "#f8fafc",
       "rgb": "rgb(248,250,252)",
       "hsl": "hsl(210,40%,98%)",
+      "oklch": "oklch(0.98,0.00,248)",
       "rgbChannel": "248 250 252",
       "hslChannel": "210 40% 98%"
     },
@@ -30,6 +33,7 @@
       "hex": "#f1f5f9",
       "rgb": "rgb(241,245,249)",
       "hsl": "hsl(210,40%,96.1%)",
+      "oklch": "oklch(0.97,0.01,248)",
       "rgbChannel": "241 245 249",
       "hslChannel": "210 40% 96.1%"
     },
@@ -38,6 +42,7 @@
       "hex": "#e2e8f0",
       "rgb": "rgb(226,232,240)",
       "hsl": "hsl(214.3,31.8%,91.4%)",
+      "oklch": "oklch(0.93,0.01,256)",
       "rgbChannel": "226 232 240",
       "hslChannel": "214.3 31.8% 91.4%"
     },
@@ -46,6 +51,7 @@
       "hex": "#cbd5e1",
       "rgb": "rgb(203,213,225)",
       "hsl": "hsl(212.7,26.8%,83.9%)",
+      "oklch": "oklch(0.87,0.02,253)",
       "rgbChannel": "203 213 225",
       "hslChannel": "212.7 26.8% 83.9%"
     },
@@ -54,6 +60,7 @@
       "hex": "#94a3b8",
       "rgb": "rgb(148,163,184)",
       "hsl": "hsl(215,20.2%,65.1%)",
+      "oklch": "oklch(0.71,0.04,257)",
       "rgbChannel": "148 163 184",
       "hslChannel": "215 20.2% 65.1%"
     },
@@ -62,6 +69,7 @@
       "hex": "#64748b",
       "rgb": "rgb(100,116,139)",
       "hsl": "hsl(215.4,16.3%,46.9%)",
+      "oklch": "oklch(0.55,0.04,257)",
       "rgbChannel": "100 116 139",
       "hslChannel": "215.4 16.3% 46.9%"
     },
@@ -70,6 +78,7 @@
       "hex": "#475569",
       "rgb": "rgb(71,85,105)",
       "hsl": "hsl(215.3,19.3%,34.5%)",
+      "oklch": "oklch(0.45,0.04,257)",
       "rgbChannel": "71 85 105",
       "hslChannel": "215.3 19.3% 34.5%"
     },
@@ -78,6 +87,7 @@
       "hex": "#334155",
       "rgb": "rgb(51,65,85)",
       "hsl": "hsl(215.3,25%,26.7%)",
+      "oklch": "oklch(0.37,0.04,257)",
       "rgbChannel": "51 65 85",
       "hslChannel": "215.3 25% 26.7%"
     },
@@ -86,6 +96,7 @@
       "hex": "#1e293b",
       "rgb": "rgb(30,41,59)",
       "hsl": "hsl(217.2,32.6%,17.5%)",
+      "oklch": "oklch(0.28,0.04,260)",
       "rgbChannel": "30 41 59",
       "hslChannel": "217.2 32.6% 17.5%"
     },
@@ -94,6 +105,7 @@
       "hex": "#0f172a",
       "rgb": "rgb(15,23,42)",
       "hsl": "hsl(222.2,47.4%,11.2%)",
+      "oklch": "oklch(0.21,0.04,266)",
       "rgbChannel": "15 23 42",
       "hslChannel": "222.2 47.4% 11.2%"
     },
@@ -102,6 +114,7 @@
       "hex": "#020617",
       "rgb": "rgb(2,6,23)",
       "hsl": "hsl(222.2,84%,4.9%)",
+      "oklch": "oklch(0.13,0.04,265)",
       "rgbChannel": "2 6 23",
       "hslChannel": "222.2 84% 4.9%"
     }
@@ -112,6 +125,7 @@
       "hex": "#f9fafb",
       "rgb": "rgb(249,250,251)",
       "hsl": "hsl(210,20%,98%)",
+      "oklch": "oklch(0.98,0.00,248)",
       "rgbChannel": "249 250 251",
       "hslChannel": "210 20% 98%"
     },
@@ -120,6 +134,7 @@
       "hex": "#f3f4f6",
       "rgb": "rgb(243,244,246)",
       "hsl": "hsl(220,14.3%,95.9%)",
+      "oklch": "oklch(0.97,0.00,265)",
       "rgbChannel": "243 244 246",
       "hslChannel": "220 14.3% 95.9%"
     },
@@ -128,6 +143,7 @@
       "hex": "#e5e7eb",
       "rgb": "rgb(229,231,235)",
       "hsl": "hsl(220,13%,91%)",
+      "oklch": "oklch(0.93,0.01,265)",
       "rgbChannel": "229 231 235",
       "hslChannel": "220 13% 91%"
     },
@@ -136,6 +152,7 @@
       "hex": "#d1d5db",
       "rgb": "rgb(209,213,219)",
       "hsl": "hsl(216,12.2%,83.9%)",
+      "oklch": "oklch(0.87,0.01,258)",
       "rgbChannel": "209 213 219",
       "hslChannel": "216 12.2% 83.9%"
     },
@@ -144,6 +161,7 @@
       "hex": "#9ca3af",
       "rgb": "rgb(156,163,175)",
       "hsl": "hsl(217.9,10.6%,64.9%)",
+      "oklch": "oklch(0.71,0.02,261)",
       "rgbChannel": "156 163 175",
       "hslChannel": "217.9 10.6% 64.9%"
     },
@@ -152,6 +170,7 @@
       "hex": "#6b7280",
       "rgb": "rgb(107,114,128)",
       "hsl": "hsl(220,8.9%,46.1%)",
+      "oklch": "oklch(0.55,0.02,264)",
       "rgbChannel": "107 114 128",
       "hslChannel": "220 8.9% 46.1%"
     },
@@ -160,6 +179,7 @@
       "hex": "#4b5563",
       "rgb": "rgb(75,85,99)",
       "hsl": "hsl(215,13.8%,34.1%)",
+      "oklch": "oklch(0.45,0.03,257)",
       "rgbChannel": "75 85 99",
       "hslChannel": "215 13.8% 34.1%"
     },
@@ -168,6 +188,7 @@
       "hex": "#374151",
       "rgb": "rgb(55,65,81)",
       "hsl": "hsl(216.9,19.1%,26.7%)",
+      "oklch": "oklch(0.37,0.03,260)",
       "rgbChannel": "55 65 81",
       "hslChannel": "216.9 19.1% 26.7%"
     },
@@ -176,6 +197,7 @@
       "hex": "#1f2937",
       "rgb": "rgb(31,41,55)",
       "hsl": "hsl(215,27.9%,16.9%)",
+      "oklch": "oklch(0.28,0.03,257)",
       "rgbChannel": "31 41 55",
       "hslChannel": "215 27.9% 16.9%"
     },
@@ -184,6 +206,7 @@
       "hex": "#111827",
       "rgb": "rgb(17,24,39)",
       "hsl": "hsl(220.9,39.3%,11%)",
+      "oklch": "oklch(0.21,0.03,265)",
       "rgbChannel": "17 24 39",
       "hslChannel": "220.9 39.3% 11%"
     },
@@ -192,6 +215,7 @@
       "hex": "#030712",
       "rgb": "rgb(3,7,18)",
       "hsl": "hsl(224,71.4%,4.1%)",
+      "oklch": "oklch(0.13,0.03,262)",
       "rgbChannel": "3 7 18",
       "hslChannel": "224 71.4% 4.1%"
     }
@@ -202,6 +226,7 @@
       "hex": "#fafafa",
       "rgb": "rgb(250,250,250)",
       "hsl": "hsl(0,0%,98%)",
+      "oklch": "oklch(0.99,0.00,0)",
       "rgbChannel": "250 250 250",
       "hslChannel": "0 0% 98%"
     },
@@ -210,6 +235,7 @@
       "hex": "#f4f4f5",
       "rgb": "rgb(244,244,245)",
       "hsl": "hsl(240,4.8%,95.9%)",
+      "oklch": "oklch(0.97,0.00,286)",
       "rgbChannel": "244 244 245",
       "hslChannel": "240 4.8% 95.9%"
     },
@@ -218,6 +244,7 @@
       "hex": "#e4e4e7",
       "rgb": "rgb(228,228,231)",
       "hsl": "hsl(240,5.9%,90%)",
+      "oklch": "oklch(0.92,0.00,286)",
       "rgbChannel": "228 228 231",
       "hslChannel": "240 5.9% 90%"
     },
@@ -226,6 +253,7 @@
       "hex": "#d4d4d8",
       "rgb": "rgb(212,212,216)",
       "hsl": "hsl(240,4.9%,83.9%)",
+      "oklch": "oklch(0.87,0.01,286)",
       "rgbChannel": "212 212 216",
       "hslChannel": "240 4.9% 83.9%"
     },
@@ -234,6 +262,7 @@
       "hex": "#a1a1aa",
       "rgb": "rgb(161,161,170)",
       "hsl": "hsl(240,5%,64.9%)",
+      "oklch": "oklch(0.71,0.01,286)",
       "rgbChannel": "161 161 170",
       "hslChannel": "240 5% 64.9%"
     },
@@ -242,6 +271,7 @@
       "hex": "#71717a",
       "rgb": "rgb(113,113,122)",
       "hsl": "hsl(240,3.8%,46.1%)",
+      "oklch": "oklch(0.55,0.01,286)",
       "rgbChannel": "113 113 122",
       "hslChannel": "240 3.8% 46.1%"
     },
@@ -250,6 +280,7 @@
       "hex": "#52525b",
       "rgb": "rgb(82,82,91)",
       "hsl": "hsl(240,5.2%,33.9%)",
+      "oklch": "oklch(0.44,0.01,286)",
       "rgbChannel": "82 82 91",
       "hslChannel": "240 5.2% 33.9%"
     },
@@ -258,6 +289,7 @@
       "hex": "#3f3f46",
       "rgb": "rgb(63,63,70)",
       "hsl": "hsl(240,5.3%,26.1%)",
+      "oklch": "oklch(0.37,0.01,286)",
       "rgbChannel": "63 63 70",
       "hslChannel": "240 5.3% 26.1%"
     },
@@ -266,6 +298,7 @@
       "hex": "#27272a",
       "rgb": "rgb(39,39,42)",
       "hsl": "hsl(240,3.7%,15.9%)",
+      "oklch": "oklch(0.27,0.01,286)",
       "rgbChannel": "39 39 42",
       "hslChannel": "240 3.7% 15.9%"
     },
@@ -274,6 +307,7 @@
       "hex": "#18181b",
       "rgb": "rgb(24,24,27)",
       "hsl": "hsl(240,5.9%,10%)",
+      "oklch": "oklch(0.21,0.01,286)",
       "rgbChannel": "24 24 27",
       "hslChannel": "240 5.9% 10%"
     },
@@ -282,6 +316,7 @@
       "hex": "#09090b",
       "rgb": "rgb(9,9,11)",
       "hsl": "hsl(240,10%,3.9%)",
+      "oklch": "oklch(0.14,0.00,286)",
       "rgbChannel": "9 9 11",
       "hslChannel": "240 10% 3.9%"
     }
@@ -292,6 +327,7 @@
       "hex": "#fafafa",
       "rgb": "rgb(250,250,250)",
       "hsl": "hsl(0,0%,98%)",
+      "oklch": "oklch(0.99,0.00,0)",
       "rgbChannel": "250 250 250",
       "hslChannel": "0 0% 98%"
     },
@@ -300,6 +336,7 @@
       "hex": "#f5f5f5",
       "rgb": "rgb(245,245,245)",
       "hsl": "hsl(0,0%,96.1%)",
+      "oklch": "oklch(0.97,0.00,0)",
       "rgbChannel": "245 245 245",
       "hslChannel": "0 0% 96.1%"
     },
@@ -308,6 +345,7 @@
       "hex": "#e5e5e5",
       "rgb": "rgb(229,229,229)",
       "hsl": "hsl(0,0%,89.8%)",
+      "oklch": "oklch(0.92,0.00,0)",
       "rgbChannel": "229 229 229",
       "hslChannel": "0 0% 89.8%"
     },
@@ -316,6 +354,7 @@
       "hex": "#d4d4d4",
       "rgb": "rgb(212,212,212)",
       "hsl": "hsl(0,0%,83.1%)",
+      "oklch": "oklch(0.87,0.00,0)",
       "rgbChannel": "212 212 212",
       "hslChannel": "0 0% 83.1%"
     },
@@ -324,6 +363,7 @@
       "hex": "#a3a3a3",
       "rgb": "rgb(163,163,163)",
       "hsl": "hsl(0,0%,63.9%)",
+      "oklch": "oklch(0.72,0.00,0)",
       "rgbChannel": "163 163 163",
       "hslChannel": "0 0% 63.9%"
     },
@@ -332,6 +372,7 @@
       "hex": "#737373",
       "rgb": "rgb(115,115,115)",
       "hsl": "hsl(0,0%,45.1%)",
+      "oklch": "oklch(0.56,0.00,0)",
       "rgbChannel": "115 115 115",
       "hslChannel": "0 0% 45.1%"
     },
@@ -340,6 +381,7 @@
       "hex": "#525252",
       "rgb": "rgb(82,82,82)",
       "hsl": "hsl(0,0%,32.2%)",
+      "oklch": "oklch(0.44,0.00,0)",
       "rgbChannel": "82 82 82",
       "hslChannel": "0 0% 32.2%"
     },
@@ -348,6 +390,7 @@
       "hex": "#404040",
       "rgb": "rgb(64,64,64)",
       "hsl": "hsl(0,0%,25.1%)",
+      "oklch": "oklch(0.37,0.00,0)",
       "rgbChannel": "64 64 64",
       "hslChannel": "0 0% 25.1%"
     },
@@ -356,6 +399,7 @@
       "hex": "#262626",
       "rgb": "rgb(38,38,38)",
       "hsl": "hsl(0,0%,14.9%)",
+      "oklch": "oklch(0.27,0.00,0)",
       "rgbChannel": "38 38 38",
       "hslChannel": "0 0% 14.9%"
     },
@@ -364,6 +408,7 @@
       "hex": "#171717",
       "rgb": "rgb(23,23,23)",
       "hsl": "hsl(0,0%,9%)",
+      "oklch": "oklch(0.20,0.00,0)",
       "rgbChannel": "23 23 23",
       "hslChannel": "0 0% 9%"
     },
@@ -372,6 +417,7 @@
       "hex": "#0a0a0a",
       "rgb": "rgb(10,10,10)",
       "hsl": "hsl(0,0%,3.9%)",
+      "oklch": "oklch(0.14,0.00,0)",
       "rgbChannel": "10 10 10",
       "hslChannel": "0 0% 3.9%"
     }
@@ -382,6 +428,7 @@
       "hex": "#fafaf9",
       "rgb": "rgb(250,250,249)",
       "hsl": "hsl(60,9.1%,97.8%)",
+      "oklch": "oklch(0.98,0.00,106)",
       "rgbChannel": "250 250 249",
       "hslChannel": "60 9.1% 97.8%"
     },
@@ -390,6 +437,7 @@
       "hex": "#f5f5f4",
       "rgb": "rgb(245,245,244)",
       "hsl": "hsl(60,4.8%,95.9%)",
+      "oklch": "oklch(0.97,0.00,106)",
       "rgbChannel": "245 245 244",
       "hslChannel": "60 4.8% 95.9%"
     },
@@ -398,6 +446,7 @@
       "hex": "#e7e5e4",
       "rgb": "rgb(231,229,228)",
       "hsl": "hsl(20,5.9%,90%)",
+      "oklch": "oklch(0.92,0.00,49)",
       "rgbChannel": "231 229 228",
       "hslChannel": "20 5.9% 90%"
     },
@@ -406,6 +455,7 @@
       "hex": "#d6d3d1",
       "rgb": "rgb(214,211,209)",
       "hsl": "hsl(24,5.7%,82.9%)",
+      "oklch": "oklch(0.87,0.00,56)",
       "rgbChannel": "214 211 209",
       "hslChannel": "24 5.7% 82.9%"
     },
@@ -414,6 +464,7 @@
       "hex": "#a8a29e",
       "rgb": "rgb(168,162,158)",
       "hsl": "hsl(24,5.4%,63.9%)",
+      "oklch": "oklch(0.72,0.01,56)",
       "rgbChannel": "168 162 158",
       "hslChannel": "24 5.4% 63.9%"
     },
@@ -422,6 +473,7 @@
       "hex": "#78716c",
       "rgb": "rgb(120,113,108)",
       "hsl": "hsl(25,5.3%,44.7%)",
+      "oklch": "oklch(0.55,0.01,58)",
       "rgbChannel": "120 113 108",
       "hslChannel": "25 5.3% 44.7%"
     },
@@ -430,6 +482,7 @@
       "hex": "#57534e",
       "rgb": "rgb(87,83,78)",
       "hsl": "hsl(33.3,5.5%,32.4%)",
+      "oklch": "oklch(0.44,0.01,74)",
       "rgbChannel": "87 83 78",
       "hslChannel": "33.3 5.5% 32.4%"
     },
@@ -438,6 +491,7 @@
       "hex": "#44403c",
       "rgb": "rgb(68,64,60)",
       "hsl": "hsl(30,6.3%,25.1%)",
+      "oklch": "oklch(0.37,0.01,68)",
       "rgbChannel": "68 64 60",
       "hslChannel": "30 6.3% 25.1%"
     },
@@ -446,6 +500,7 @@
       "hex": "#292524",
       "rgb": "rgb(41,37,36)",
       "hsl": "hsl(12,6.5%,15.1%)",
+      "oklch": "oklch(0.27,0.01,34)",
       "rgbChannel": "41 37 36",
       "hslChannel": "12 6.5% 15.1%"
     },
@@ -454,6 +509,7 @@
       "hex": "#1c1917",
       "rgb": "rgb(28,25,23)",
       "hsl": "hsl(24,9.8%,10%)",
+      "oklch": "oklch(0.22,0.01,56)",
       "rgbChannel": "28 25 23",
       "hslChannel": "24 9.8% 10%"
     },
@@ -462,6 +518,7 @@
       "hex": "#0c0a09",
       "rgb": "rgb(12,10,9)",
       "hsl": "hsl(20,14.3%,4.1%)",
+      "oklch": "oklch(0.15,0.00,49)",
       "rgbChannel": "12 10 9",
       "hslChannel": "20 14.3% 4.1%"
     }
@@ -472,6 +529,7 @@
       "hex": "#fef2f2",
       "rgb": "rgb(254,242,242)",
       "hsl": "hsl(0,85.7%,97.3%)",
+      "oklch": "oklch(0.97,0.01,17)",
       "rgbChannel": "254 242 242",
       "hslChannel": "0 85.7% 97.3%"
     },
@@ -480,6 +538,7 @@
       "hex": "#fee2e2",
       "rgb": "rgb(254,226,226)",
       "hsl": "hsl(0,93.3%,94.1%)",
+      "oklch": "oklch(0.94,0.03,18)",
       "rgbChannel": "254 226 226",
       "hslChannel": "0 93.3% 94.1%"
     },
@@ -488,6 +547,7 @@
       "hex": "#fecaca",
       "rgb": "rgb(254,202,202)",
       "hsl": "hsl(0,96.3%,89.4%)",
+      "oklch": "oklch(0.88,0.06,18)",
       "rgbChannel": "254 202 202",
       "hslChannel": "0 96.3% 89.4%"
     },
@@ -496,6 +556,7 @@
       "hex": "#fca5a5",
       "rgb": "rgb(252,165,165)",
       "hsl": "hsl(0,93.5%,81.8%)",
+      "oklch": "oklch(0.81,0.10,20)",
       "rgbChannel": "252 165 165",
       "hslChannel": "0 93.5% 81.8%"
     },
@@ -504,6 +565,7 @@
       "hex": "#f87171",
       "rgb": "rgb(248,113,113)",
       "hsl": "hsl(0,90.6%,70.8%)",
+      "oklch": "oklch(0.71,0.17,22)",
       "rgbChannel": "248 113 113",
       "hslChannel": "0 90.6% 70.8%"
     },
@@ -512,6 +574,7 @@
       "hex": "#ef4444",
       "rgb": "rgb(239,68,68)",
       "hsl": "hsl(0,84.2%,60.2%)",
+      "oklch": "oklch(0.64,0.21,25)",
       "rgbChannel": "239 68 68",
       "hslChannel": "0 84.2% 60.2%"
     },
@@ -520,6 +583,7 @@
       "hex": "#dc2626",
       "rgb": "rgb(220,38,38)",
       "hsl": "hsl(0,72.2%,50.6%)",
+      "oklch": "oklch(0.58,0.22,27)",
       "rgbChannel": "220 38 38",
       "hslChannel": "0 72.2% 50.6%"
     },
@@ -528,6 +592,7 @@
       "hex": "#b91c1c",
       "rgb": "rgb(185,28,28)",
       "hsl": "hsl(0,73.7%,41.8%)",
+      "oklch": "oklch(0.51,0.19,28)",
       "rgbChannel": "185 28 28",
       "hslChannel": "0 73.7% 41.8%"
     },
@@ -536,6 +601,7 @@
       "hex": "#991b1b",
       "rgb": "rgb(153,27,27)",
       "hsl": "hsl(0,70%,35.3%)",
+      "oklch": "oklch(0.44,0.16,27)",
       "rgbChannel": "153 27 27",
       "hslChannel": "0 70% 35.3%"
     },
@@ -544,6 +610,7 @@
       "hex": "#7f1d1d",
       "rgb": "rgb(127,29,29)",
       "hsl": "hsl(0,62.8%,30.6%)",
+      "oklch": "oklch(0.40,0.13,26)",
       "rgbChannel": "127 29 29",
       "hslChannel": "0 62.8% 30.6%"
     },
@@ -552,6 +619,7 @@
       "hex": "#450a0a",
       "rgb": "rgb(69,10,10)",
       "hsl": "hsl(0,74.7%,15.5%)",
+      "oklch": "oklch(0.26,0.09,26)",
       "rgbChannel": "69 10 10",
       "hslChannel": "0 74.7% 15.5%"
     }
@@ -562,6 +630,7 @@
       "hex": "#fff7ed",
       "rgb": "rgb(255,247,237)",
       "hsl": "hsl(33.3,100%,96.5%)",
+      "oklch": "oklch(0.98,0.02,74)",
       "rgbChannel": "255 247 237",
       "hslChannel": "33.3 100% 96.5%"
     },
@@ -570,6 +639,7 @@
       "hex": "#ffedd5",
       "rgb": "rgb(255,237,213)",
       "hsl": "hsl(34.3,100%,91.8%)",
+      "oklch": "oklch(0.95,0.04,75)",
       "rgbChannel": "255 237 213",
       "hslChannel": "34.3 100% 91.8%"
     },
@@ -578,6 +648,7 @@
       "hex": "#fed7aa",
       "rgb": "rgb(254,215,170)",
       "hsl": "hsl(32.1,97.7%,83.1%)",
+      "oklch": "oklch(0.90,0.07,71)",
       "rgbChannel": "254 215 170",
       "hslChannel": "32.1 97.7% 83.1%"
     },
@@ -586,6 +657,7 @@
       "hex": "#fdba74",
       "rgb": "rgb(253,186,116)",
       "hsl": "hsl(30.7,97.2%,72.4%)",
+      "oklch": "oklch(0.84,0.12,66)",
       "rgbChannel": "253 186 116",
       "hslChannel": "30.7 97.2% 72.4%"
     },
@@ -594,6 +666,7 @@
       "hex": "#fb923c",
       "rgb": "rgb(251,146,60)",
       "hsl": "hsl(27,96%,61%)",
+      "oklch": "oklch(0.76,0.16,56)",
       "rgbChannel": "251 146 60",
       "hslChannel": "27 96% 61%"
     },
@@ -602,6 +675,7 @@
       "hex": "#f97316",
       "rgb": "rgb(249,115,22)",
       "hsl": "hsl(24.6,95%,53.1%)",
+      "oklch": "oklch(0.70,0.19,48)",
       "rgbChannel": "249 115 22",
       "hslChannel": "24.6 95% 53.1%"
     },
@@ -610,6 +684,7 @@
       "hex": "#ea580c",
       "rgb": "rgb(234,88,12)",
       "hsl": "hsl(20.5,90.2%,48.2%)",
+      "oklch": "oklch(0.65,0.19,41)",
       "rgbChannel": "234 88 12",
       "hslChannel": "20.5 90.2% 48.2%"
     },
@@ -618,6 +693,7 @@
       "hex": "#c2410c",
       "rgb": "rgb(194,65,12)",
       "hsl": "hsl(17.5,88.3%,40.4%)",
+      "oklch": "oklch(0.55,0.17,38)",
       "rgbChannel": "194 65 12",
       "hslChannel": "17.5 88.3% 40.4%"
     },
@@ -626,6 +702,7 @@
       "hex": "#9a3412",
       "rgb": "rgb(154,52,18)",
       "hsl": "hsl(15,79.1%,33.7%)",
+      "oklch": "oklch(0.47,0.14,37)",
       "rgbChannel": "154 52 18",
       "hslChannel": "15 79.1% 33.7%"
     },
@@ -634,6 +711,7 @@
       "hex": "#7c2d12",
       "rgb": "rgb(124,45,18)",
       "hsl": "hsl(15.3,74.6%,27.8%)",
+      "oklch": "oklch(0.41,0.12,38)",
       "rgbChannel": "124 45 18",
       "hslChannel": "15.3 74.6% 27.8%"
     },
@@ -642,6 +720,7 @@
       "hex": "#431407",
       "rgb": "rgb(67,20,7)",
       "hsl": "hsl(13,81.1%,14.5%)",
+      "oklch": "oklch(0.27,0.08,36)",
       "rgbChannel": "67 20 7",
       "hslChannel": "13 81.1% 14.5%"
     }
@@ -652,6 +731,7 @@
       "hex": "#fffbeb",
       "rgb": "rgb(255,251,235)",
       "hsl": "hsl(48,100%,96.1%)",
+      "oklch": "oklch(0.99,0.02,95)",
       "rgbChannel": "255 251 235",
       "hslChannel": "48 100% 96.1%"
     },
@@ -660,6 +740,7 @@
       "hex": "#fef3c7",
       "rgb": "rgb(254,243,199)",
       "hsl": "hsl(48,96.5%,88.8%)",
+      "oklch": "oklch(0.96,0.06,96)",
       "rgbChannel": "254 243 199",
       "hslChannel": "48 96.5% 88.8%"
     },
@@ -668,6 +749,7 @@
       "hex": "#fde68a",
       "rgb": "rgb(253,230,138)",
       "hsl": "hsl(48,96.6%,76.7%)",
+      "oklch": "oklch(0.92,0.12,96)",
       "rgbChannel": "253 230 138",
       "hslChannel": "48 96.6% 76.7%"
     },
@@ -676,6 +758,7 @@
       "hex": "#fcd34d",
       "rgb": "rgb(252,211,77)",
       "hsl": "hsl(45.9,96.7%,64.5%)",
+      "oklch": "oklch(0.88,0.15,92)",
       "rgbChannel": "252 211 77",
       "hslChannel": "45.9 96.7% 64.5%"
     },
@@ -684,6 +767,7 @@
       "hex": "#fbbf24",
       "rgb": "rgb(251,191,36)",
       "hsl": "hsl(43.3,96.4%,56.3%)",
+      "oklch": "oklch(0.84,0.16,84)",
       "rgbChannel": "251 191 36",
       "hslChannel": "43.3 96.4% 56.3%"
     },
@@ -692,6 +776,7 @@
       "hex": "#f59e0b",
       "rgb": "rgb(245,158,11)",
       "hsl": "hsl(37.7,92.1%,50.2%)",
+      "oklch": "oklch(0.77,0.16,70)",
       "rgbChannel": "245 158 11",
       "hslChannel": "37.7 92.1% 50.2%"
     },
@@ -700,6 +785,7 @@
       "hex": "#d97706",
       "rgb": "rgb(217,119,6)",
       "hsl": "hsl(32.1,94.6%,43.7%)",
+      "oklch": "oklch(0.67,0.16,58)",
       "rgbChannel": "217 119 6",
       "hslChannel": "32.1 94.6% 43.7%"
     },
@@ -708,6 +794,7 @@
       "hex": "#b45309",
       "rgb": "rgb(180,83,9)",
       "hsl": "hsl(26,90.5%,37.1%)",
+      "oklch": "oklch(0.56,0.15,49)",
       "rgbChannel": "180 83 9",
       "hslChannel": "26 90.5% 37.1%"
     },
@@ -716,6 +803,7 @@
       "hex": "#92400e",
       "rgb": "rgb(146,64,14)",
       "hsl": "hsl(22.7,82.5%,31.4%)",
+      "oklch": "oklch(0.47,0.12,46)",
       "rgbChannel": "146 64 14",
       "hslChannel": "22.7 82.5% 31.4%"
     },
@@ -724,6 +812,7 @@
       "hex": "#78350f",
       "rgb": "rgb(120,53,15)",
       "hsl": "hsl(21.7,77.8%,26.5%)",
+      "oklch": "oklch(0.41,0.11,46)",
       "rgbChannel": "120 53 15",
       "hslChannel": "21.7 77.8% 26.5%"
     },
@@ -732,6 +821,7 @@
       "hex": "#451a03",
       "rgb": "rgb(69,26,3)",
       "hsl": "hsl(20.9,91.7%,14.1%)",
+      "oklch": "oklch(0.28,0.07,46)",
       "rgbChannel": "69 26 3",
       "hslChannel": "20.9 91.7% 14.1%"
     }
@@ -742,6 +832,7 @@
       "hex": "#fefce8",
       "rgb": "rgb(254,252,232)",
       "hsl": "hsl(54.5,91.7%,95.3%)",
+      "oklch": "oklch(0.99,0.03,102)",
       "rgbChannel": "254 252 232",
       "hslChannel": "54.5 91.7% 95.3%"
     },
@@ -750,6 +841,7 @@
       "hex": "#fef9c3",
       "rgb": "rgb(254,249,195)",
       "hsl": "hsl(54.9,96.7%,88%)",
+      "oklch": "oklch(0.97,0.07,103)",
       "rgbChannel": "254 249 195",
       "hslChannel": "54.9 96.7% 88%"
     },
@@ -758,6 +850,7 @@
       "hex": "#fef08a",
       "rgb": "rgb(254,240,138)",
       "hsl": "hsl(52.8,98.3%,76.9%)",
+      "oklch": "oklch(0.95,0.12,102)",
       "rgbChannel": "254 240 138",
       "hslChannel": "52.8 98.3% 76.9%"
     },
@@ -766,6 +859,7 @@
       "hex": "#fde047",
       "rgb": "rgb(253,224,71)",
       "hsl": "hsl(50.4,97.8%,63.5%)",
+      "oklch": "oklch(0.91,0.17,98)",
       "rgbChannel": "253 224 71",
       "hslChannel": "50.4 97.8% 63.5%"
     },
@@ -774,6 +868,7 @@
       "hex": "#facc15",
       "rgb": "rgb(250,204,21)",
       "hsl": "hsl(47.9,95.8%,53.1%)",
+      "oklch": "oklch(0.86,0.17,92)",
       "rgbChannel": "250 204 21",
       "hslChannel": "47.9 95.8% 53.1%"
     },
@@ -782,6 +877,7 @@
       "hex": "#eab308",
       "rgb": "rgb(234,179,8)",
       "hsl": "hsl(45.4,93.4%,47.5%)",
+      "oklch": "oklch(0.80,0.16,86)",
       "rgbChannel": "234 179 8",
       "hslChannel": "45.4 93.4% 47.5%"
     },
@@ -790,6 +886,7 @@
       "hex": "#ca8a04",
       "rgb": "rgb(202,138,4)",
       "hsl": "hsl(40.6,96.1%,40.4%)",
+      "oklch": "oklch(0.68,0.14,76)",
       "rgbChannel": "202 138 4",
       "hslChannel": "40.6 96.1% 40.4%"
     },
@@ -798,6 +895,7 @@
       "hex": "#a16207",
       "rgb": "rgb(161,98,7)",
       "hsl": "hsl(35.5,91.7%,32.9%)",
+      "oklch": "oklch(0.55,0.12,66)",
       "rgbChannel": "161 98 7",
       "hslChannel": "35.5 91.7% 32.9%"
     },
@@ -806,6 +904,7 @@
       "hex": "#854d0e",
       "rgb": "rgb(133,77,14)",
       "hsl": "hsl(31.8,81%,28.8%)",
+      "oklch": "oklch(0.48,0.10,62)",
       "rgbChannel": "133 77 14",
       "hslChannel": "31.8 81% 28.8%"
     },
@@ -814,6 +913,7 @@
       "hex": "#713f12",
       "rgb": "rgb(113,63,18)",
       "hsl": "hsl(28.4,72.5%,25.7%)",
+      "oklch": "oklch(0.42,0.09,58)",
       "rgbChannel": "113 63 18",
       "hslChannel": "28.4 72.5% 25.7%"
     },
@@ -822,6 +922,7 @@
       "hex": "#422006",
       "rgb": "rgb(66,32,6)",
       "hsl": "hsl(26,83.3%,14.1%)",
+      "oklch": "oklch(0.29,0.06,54)",
       "rgbChannel": "66 32 6",
       "hslChannel": "26 83.3% 14.1%"
     }
@@ -832,6 +933,7 @@
       "hex": "#f7fee7",
       "rgb": "rgb(247,254,231)",
       "hsl": "hsl(78.3,92%,95.1%)",
+      "oklch": "oklch(0.99,0.03,121)",
       "rgbChannel": "247 254 231",
       "hslChannel": "78.3 92% 95.1%"
     },
@@ -840,6 +942,7 @@
       "hex": "#ecfccb",
       "rgb": "rgb(236,252,203)",
       "hsl": "hsl(79.6,89.1%,89.2%)",
+      "oklch": "oklch(0.97,0.07,122)",
       "rgbChannel": "236 252 203",
       "hslChannel": "79.6 89.1% 89.2%"
     },
@@ -848,6 +951,7 @@
       "hex": "#d9f99d",
       "rgb": "rgb(217,249,157)",
       "hsl": "hsl(80.9,88.5%,79.6%)",
+      "oklch": "oklch(0.94,0.12,124)",
       "rgbChannel": "217 249 157",
       "hslChannel": "80.9 88.5% 79.6%"
     },
@@ -856,6 +960,7 @@
       "hex": "#bef264",
       "rgb": "rgb(190,242,100)",
       "hsl": "hsl(82,84.5%,67.1%)",
+      "oklch": "oklch(0.90,0.18,127)",
       "rgbChannel": "190 242 100",
       "hslChannel": "82 84.5% 67.1%"
     },
@@ -864,6 +969,7 @@
       "hex": "#a3e635",
       "rgb": "rgb(163,230,53)",
       "hsl": "hsl(82.7,78%,55.5%)",
+      "oklch": "oklch(0.85,0.21,129)",
       "rgbChannel": "163 230 53",
       "hslChannel": "82.7 78% 55.5%"
     },
@@ -872,6 +978,7 @@
       "hex": "#84cc16",
       "rgb": "rgb(132,204,22)",
       "hsl": "hsl(83.7,80.5%,44.3%)",
+      "oklch": "oklch(0.77,0.20,131)",
       "rgbChannel": "132 204 22",
       "hslChannel": "83.7 80.5% 44.3%"
     },
@@ -880,6 +987,7 @@
       "hex": "#65a30d",
       "rgb": "rgb(101,163,13)",
       "hsl": "hsl(84.8,85.2%,34.5%)",
+      "oklch": "oklch(0.65,0.18,132)",
       "rgbChannel": "101 163 13",
       "hslChannel": "84.8 85.2% 34.5%"
     },
@@ -888,6 +996,7 @@
       "hex": "#4d7c0f",
       "rgb": "rgb(77,124,15)",
       "hsl": "hsl(85.9,78.4%,27.3%)",
+      "oklch": "oklch(0.53,0.14,132)",
       "rgbChannel": "77 124 15",
       "hslChannel": "85.9 78.4% 27.3%"
     },
@@ -896,6 +1005,7 @@
       "hex": "#3f6212",
       "rgb": "rgb(63,98,18)",
       "hsl": "hsl(86.3,69%,22.7%)",
+      "oklch": "oklch(0.45,0.11,131)",
       "rgbChannel": "63 98 18",
       "hslChannel": "86.3 69% 22.7%"
     },
@@ -904,6 +1014,7 @@
       "hex": "#365314",
       "rgb": "rgb(54,83,20)",
       "hsl": "hsl(87.6,61.2%,20.2%)",
+      "oklch": "oklch(0.41,0.10,131)",
       "rgbChannel": "54 83 20",
       "hslChannel": "87.6 61.2% 20.2%"
     },
@@ -912,6 +1023,7 @@
       "hex": "#1a2e05",
       "rgb": "rgb(26,46,5)",
       "hsl": "hsl(89.3,80.4%,10%)",
+      "oklch": "oklch(0.27,0.07,132)",
       "rgbChannel": "26 46 5",
       "hslChannel": "89.3 80.4% 10%"
     }
@@ -922,6 +1034,7 @@
       "hex": "#f0fdf4",
       "rgb": "rgb(240,253,244)",
       "hsl": "hsl(138.5,76.5%,96.7%)",
+      "oklch": "oklch(0.98,0.02,156)",
       "rgbChannel": "240 253 244",
       "hslChannel": "138.5 76.5% 96.7%"
     },
@@ -930,6 +1043,7 @@
       "hex": "#dcfce7",
       "rgb": "rgb(220,252,231)",
       "hsl": "hsl(140.6,84.2%,92.5%)",
+      "oklch": "oklch(0.96,0.04,157)",
       "rgbChannel": "220 252 231",
       "hslChannel": "140.6 84.2% 92.5%"
     },
@@ -938,6 +1052,7 @@
       "hex": "#bbf7d0",
       "rgb": "rgb(187,247,208)",
       "hsl": "hsl(141,78.9%,85.1%)",
+      "oklch": "oklch(0.93,0.08,156)",
       "rgbChannel": "187 247 208",
       "hslChannel": "141 78.9% 85.1%"
     },
@@ -946,6 +1061,7 @@
       "hex": "#86efac",
       "rgb": "rgb(134,239,172)",
       "hsl": "hsl(141.7,76.6%,73.1%)",
+      "oklch": "oklch(0.87,0.14,154)",
       "rgbChannel": "134 239 172",
       "hslChannel": "141.7 76.6% 73.1%"
     },
@@ -954,6 +1070,7 @@
       "hex": "#4ade80",
       "rgb": "rgb(74,222,128)",
       "hsl": "hsl(141.9,69.2%,58%)",
+      "oklch": "oklch(0.80,0.18,152)",
       "rgbChannel": "74 222 128",
       "hslChannel": "141.9 69.2% 58%"
     },
@@ -962,6 +1079,7 @@
       "hex": "#22c55e",
       "rgb": "rgb(34,197,94)",
       "hsl": "hsl(142.1,70.6%,45.3%)",
+      "oklch": "oklch(0.72,0.19,150)",
       "rgbChannel": "34 197 94",
       "hslChannel": "142.1 70.6% 45.3%"
     },
@@ -970,6 +1088,7 @@
       "hex": "#16a34a",
       "rgb": "rgb(22,163,74)",
       "hsl": "hsl(142.1,76.2%,36.3%)",
+      "oklch": "oklch(0.63,0.17,149)",
       "rgbChannel": "22 163 74",
       "hslChannel": "142.1 76.2% 36.3%"
     },
@@ -978,6 +1097,7 @@
       "hex": "#15803d",
       "rgb": "rgb(21,128,61)",
       "hsl": "hsl(142.4,71.8%,29.2%)",
+      "oklch": "oklch(0.53,0.14,150)",
       "rgbChannel": "21 128 61",
       "hslChannel": "142.4 71.8% 29.2%"
     },
@@ -986,6 +1106,7 @@
       "hex": "#166534",
       "rgb": "rgb(22,101,52)",
       "hsl": "hsl(142.8,64.2%,24.1%)",
+      "oklch": "oklch(0.45,0.11,151)",
       "rgbChannel": "22 101 52",
       "hslChannel": "142.8 64.2% 24.1%"
     },
@@ -994,6 +1115,7 @@
       "hex": "#14532d",
       "rgb": "rgb(20,83,45)",
       "hsl": "hsl(143.8,61.2%,20.2%)",
+      "oklch": "oklch(0.39,0.09,153)",
       "rgbChannel": "20 83 45",
       "hslChannel": "143.8 61.2% 20.2%"
     },
@@ -1002,6 +1124,7 @@
       "hex": "#052e16",
       "rgb": "rgb(5,46,22)",
       "hsl": "hsl(144.9,80.4%,10%)",
+      "oklch": "oklch(0.27,0.06,153)",
       "rgbChannel": "5 46 22",
       "hslChannel": "144.9 80.4% 10%"
     }
@@ -1012,6 +1135,7 @@
       "hex": "#ecfdf5",
       "rgb": "rgb(236,253,245)",
       "hsl": "hsl(151.8,81%,95.9%)",
+      "oklch": "oklch(0.98,0.02,166)",
       "rgbChannel": "236 253 245",
       "hslChannel": "151.8 81% 95.9%"
     },
@@ -1020,6 +1144,7 @@
       "hex": "#d1fae5",
       "rgb": "rgb(209,250,229)",
       "hsl": "hsl(149.3,80.4%,90%)",
+      "oklch": "oklch(0.95,0.05,163)",
       "rgbChannel": "209 250 229",
       "hslChannel": "149.3 80.4% 90%"
     },
@@ -1028,6 +1153,7 @@
       "hex": "#a7f3d0",
       "rgb": "rgb(167,243,208)",
       "hsl": "hsl(152.4,76%,80.4%)",
+      "oklch": "oklch(0.90,0.09,164)",
       "rgbChannel": "167 243 208",
       "hslChannel": "152.4 76% 80.4%"
     },
@@ -1036,6 +1162,7 @@
       "hex": "#6ee7b7",
       "rgb": "rgb(110,231,183)",
       "hsl": "hsl(156.2,71.6%,66.9%)",
+      "oklch": "oklch(0.85,0.13,165)",
       "rgbChannel": "110 231 183",
       "hslChannel": "156.2 71.6% 66.9%"
     },
@@ -1044,6 +1171,7 @@
       "hex": "#34d399",
       "rgb": "rgb(52,211,153)",
       "hsl": "hsl(158.1,64.4%,51.6%)",
+      "oklch": "oklch(0.77,0.15,163)",
       "rgbChannel": "52 211 153",
       "hslChannel": "158.1 64.4% 51.6%"
     },
@@ -1052,6 +1180,7 @@
       "hex": "#10b981",
       "rgb": "rgb(16,185,129)",
       "hsl": "hsl(160.1,84.1%,39.4%)",
+      "oklch": "oklch(0.70,0.15,162)",
       "rgbChannel": "16 185 129",
       "hslChannel": "160.1 84.1% 39.4%"
     },
@@ -1060,6 +1189,7 @@
       "hex": "#059669",
       "rgb": "rgb(5,150,105)",
       "hsl": "hsl(161.4,93.5%,30.4%)",
+      "oklch": "oklch(0.60,0.13,163)",
       "rgbChannel": "5 150 105",
       "hslChannel": "161.4 93.5% 30.4%"
     },
@@ -1068,6 +1198,7 @@
       "hex": "#047857",
       "rgb": "rgb(4,120,87)",
       "hsl": "hsl(162.9,93.5%,24.3%)",
+      "oklch": "oklch(0.51,0.10,166)",
       "rgbChannel": "4 120 87",
       "hslChannel": "162.9 93.5% 24.3%"
     },
@@ -1076,6 +1207,7 @@
       "hex": "#065f46",
       "rgb": "rgb(6,95,70)",
       "hsl": "hsl(163.1,88.1%,19.8%)",
+      "oklch": "oklch(0.43,0.09,167)",
       "rgbChannel": "6 95 70",
       "hslChannel": "163.1 88.1% 19.8%"
     },
@@ -1084,6 +1216,7 @@
       "hex": "#064e3b",
       "rgb": "rgb(6,78,59)",
       "hsl": "hsl(164.2,85.7%,16.5%)",
+      "oklch": "oklch(0.38,0.07,169)",
       "rgbChannel": "6 78 59",
       "hslChannel": "164.2 85.7% 16.5%"
     },
@@ -1092,6 +1225,7 @@
       "hex": "#022c22",
       "rgb": "rgb(2,44,34)",
       "hsl": "hsl(165.7,91.3%,9%)",
+      "oklch": "oklch(0.26,0.05,173)",
       "rgbChannel": "2 44 34",
       "hslChannel": "165.7 91.3% 9%"
     }
@@ -1102,6 +1236,7 @@
       "hex": "#f0fdfa",
       "rgb": "rgb(240,253,250)",
       "hsl": "hsl(166.2,76.5%,96.7%)",
+      "oklch": "oklch(0.98,0.01,181)",
       "rgbChannel": "240 253 250",
       "hslChannel": "166.2 76.5% 96.7%"
     },
@@ -1110,6 +1245,7 @@
       "hex": "#ccfbf1",
       "rgb": "rgb(204,251,241)",
       "hsl": "hsl(167.2,85.5%,89.2%)",
+      "oklch": "oklch(0.95,0.05,181)",
       "rgbChannel": "204 251 241",
       "hslChannel": "167.2 85.5% 89.2%"
     },
@@ -1118,6 +1254,7 @@
       "hex": "#99f6e4",
       "rgb": "rgb(153,246,228)",
       "hsl": "hsl(168.4,83.8%,78.2%)",
+      "oklch": "oklch(0.91,0.09,180)",
       "rgbChannel": "153 246 228",
       "hslChannel": "168.4 83.8% 78.2%"
     },
@@ -1126,6 +1263,7 @@
       "hex": "#5eead4",
       "rgb": "rgb(94,234,212)",
       "hsl": "hsl(170.6,76.9%,64.3%)",
+      "oklch": "oklch(0.85,0.13,181)",
       "rgbChannel": "94 234 212",
       "hslChannel": "170.6 76.9% 64.3%"
     },
@@ -1134,6 +1272,7 @@
       "hex": "#2dd4bf",
       "rgb": "rgb(45,212,191)",
       "hsl": "hsl(172.5,66%,50.4%)",
+      "oklch": "oklch(0.78,0.13,182)",
       "rgbChannel": "45 212 191",
       "hslChannel": "172.5 66% 50.4%"
     },
@@ -1142,6 +1281,7 @@
       "hex": "#14b8a6",
       "rgb": "rgb(20,184,166)",
       "hsl": "hsl(173.4,80.4%,40%)",
+      "oklch": "oklch(0.70,0.12,183)",
       "rgbChannel": "20 184 166",
       "hslChannel": "173.4 80.4% 40%"
     },
@@ -1150,6 +1290,7 @@
       "hex": "#0d9488",
       "rgb": "rgb(13,148,136)",
       "hsl": "hsl(174.7,83.9%,31.6%)",
+      "oklch": "oklch(0.60,0.10,185)",
       "rgbChannel": "13 148 136",
       "hslChannel": "174.7 83.9% 31.6%"
     },
@@ -1158,6 +1299,7 @@
       "hex": "#0f766e",
       "rgb": "rgb(15,118,110)",
       "hsl": "hsl(175.3,77.4%,26.1%)",
+      "oklch": "oklch(0.51,0.09,186)",
       "rgbChannel": "15 118 110",
       "hslChannel": "175.3 77.4% 26.1%"
     },
@@ -1166,6 +1308,7 @@
       "hex": "#115e59",
       "rgb": "rgb(17,94,89)",
       "hsl": "hsl(176.1,69.4%,21.8%)",
+      "oklch": "oklch(0.44,0.07,188)",
       "rgbChannel": "17 94 89",
       "hslChannel": "176.1 69.4% 21.8%"
     },
@@ -1174,6 +1317,7 @@
       "hex": "#134e4a",
       "rgb": "rgb(19,78,74)",
       "hsl": "hsl(175.9,60.8%,19%)",
+      "oklch": "oklch(0.39,0.06,188)",
       "rgbChannel": "19 78 74",
       "hslChannel": "175.9 60.8% 19%"
     },
@@ -1182,6 +1326,7 @@
       "hex": "#042f2e",
       "rgb": "rgb(4,47,46)",
       "hsl": "hsl(178.6,84.3%,10%)",
+      "oklch": "oklch(0.28,0.04,193)",
       "rgbChannel": "4 47 46",
       "hslChannel": "178.6 84.3% 10%"
     }
@@ -1192,6 +1337,7 @@
       "hex": "#ecfeff",
       "rgb": "rgb(236,254,255)",
       "hsl": "hsl(183.2,100%,96.3%)",
+      "oklch": "oklch(0.98,0.02,201)",
       "rgbChannel": "236 254 255",
       "hslChannel": "183.2 100% 96.3%"
     },
@@ -1200,6 +1346,7 @@
       "hex": "#cffafe",
       "rgb": "rgb(207,250,254)",
       "hsl": "hsl(185.1,95.9%,90.4%)",
+      "oklch": "oklch(0.96,0.04,203)",
       "rgbChannel": "207 250 254",
       "hslChannel": "185.1 95.9% 90.4%"
     },
@@ -1208,6 +1355,7 @@
       "hex": "#a5f3fc",
       "rgb": "rgb(165,243,252)",
       "hsl": "hsl(186.2,93.5%,81.8%)",
+      "oklch": "oklch(0.92,0.08,205)",
       "rgbChannel": "165 243 252",
       "hslChannel": "186.2 93.5% 81.8%"
     },
@@ -1216,6 +1364,7 @@
       "hex": "#67e8f9",
       "rgb": "rgb(103,232,249)",
       "hsl": "hsl(187,92.4%,69%)",
+      "oklch": "oklch(0.87,0.12,207)",
       "rgbChannel": "103 232 249",
       "hslChannel": "187 92.4% 69%"
     },
@@ -1224,6 +1373,7 @@
       "hex": "#22d3ee",
       "rgb": "rgb(34,211,238)",
       "hsl": "hsl(187.9,85.7%,53.3%)",
+      "oklch": "oklch(0.80,0.13,212)",
       "rgbChannel": "34 211 238",
       "hslChannel": "187.9 85.7% 53.3%"
     },
@@ -1232,6 +1382,7 @@
       "hex": "#06b6d4",
       "rgb": "rgb(6,182,212)",
       "hsl": "hsl(188.7,94.5%,42.7%)",
+      "oklch": "oklch(0.71,0.13,215)",
       "rgbChannel": "6 182 212",
       "hslChannel": "188.7 94.5% 42.7%"
     },
@@ -1240,6 +1391,7 @@
       "hex": "#0891b2",
       "rgb": "rgb(8,145,178)",
       "hsl": "hsl(191.6,91.4%,36.5%)",
+      "oklch": "oklch(0.61,0.11,222)",
       "rgbChannel": "8 145 178",
       "hslChannel": "191.6 91.4% 36.5%"
     },
@@ -1248,6 +1400,7 @@
       "hex": "#0e7490",
       "rgb": "rgb(14,116,144)",
       "hsl": "hsl(192.9,82.3%,31%)",
+      "oklch": "oklch(0.52,0.09,223)",
       "rgbChannel": "14 116 144",
       "hslChannel": "192.9 82.3% 31%"
     },
@@ -1256,6 +1409,7 @@
       "hex": "#155e75",
       "rgb": "rgb(21,94,117)",
       "hsl": "hsl(194.4,69.6%,27.1%)",
+      "oklch": "oklch(0.45,0.08,224)",
       "rgbChannel": "21 94 117",
       "hslChannel": "194.4 69.6% 27.1%"
     },
@@ -1264,6 +1418,7 @@
       "hex": "#164e63",
       "rgb": "rgb(22,78,99)",
       "hsl": "hsl(196.4,63.6%,23.7%)",
+      "oklch": "oklch(0.40,0.07,227)",
       "rgbChannel": "22 78 99",
       "hslChannel": "196.4 63.6% 23.7%"
     },
@@ -1272,6 +1427,7 @@
       "hex": "#083344",
       "rgb": "rgb(8,51,68)",
       "hsl": "hsl(197,78.9%,14.9%)",
+      "oklch": "oklch(0.30,0.05,230)",
       "rgbChannel": "8 51 68",
       "hslChannel": "197 78.9% 14.9%"
     }
@@ -1282,6 +1438,7 @@
       "hex": "#f0f9ff",
       "rgb": "rgb(240,249,255)",
       "hsl": "hsl(204,100%,97.1%)",
+      "oklch": "oklch(0.98,0.01,237)",
       "rgbChannel": "240 249 255",
       "hslChannel": "204 100% 97.1%"
     },
@@ -1290,6 +1447,7 @@
       "hex": "#e0f2fe",
       "rgb": "rgb(224,242,254)",
       "hsl": "hsl(204,93.8%,93.7%)",
+      "oklch": "oklch(0.95,0.03,237)",
       "rgbChannel": "224 242 254",
       "hslChannel": "204 93.8% 93.7%"
     },
@@ -1298,6 +1456,7 @@
       "hex": "#bae6fd",
       "rgb": "rgb(186,230,253)",
       "hsl": "hsl(200.6,94.4%,86.1%)",
+      "oklch": "oklch(0.90,0.06,231)",
       "rgbChannel": "186 230 253",
       "hslChannel": "200.6 94.4% 86.1%"
     },
@@ -1306,6 +1465,7 @@
       "hex": "#7dd3fc",
       "rgb": "rgb(125,211,252)",
       "hsl": "hsl(199.4,95.5%,73.9%)",
+      "oklch": "oklch(0.83,0.10,230)",
       "rgbChannel": "125 211 252",
       "hslChannel": "199.4 95.5% 73.9%"
     },
@@ -1314,6 +1474,7 @@
       "hex": "#38bdf8",
       "rgb": "rgb(56,189,248)",
       "hsl": "hsl(198.4,93.2%,59.6%)",
+      "oklch": "oklch(0.75,0.14,233)",
       "rgbChannel": "56 189 248",
       "hslChannel": "198.4 93.2% 59.6%"
     },
@@ -1322,6 +1483,7 @@
       "hex": "#0ea5e9",
       "rgb": "rgb(14,165,233)",
       "hsl": "hsl(198.6,88.7%,48.4%)",
+      "oklch": "oklch(0.68,0.15,237)",
       "rgbChannel": "14 165 233",
       "hslChannel": "198.6 88.7% 48.4%"
     },
@@ -1330,6 +1492,7 @@
       "hex": "#0284c7",
       "rgb": "rgb(2,132,199)",
       "hsl": "hsl(200.4,98%,39.4%)",
+      "oklch": "oklch(0.59,0.14,242)",
       "rgbChannel": "2 132 199",
       "hslChannel": "200.4 98% 39.4%"
     },
@@ -1338,6 +1501,7 @@
       "hex": "#0369a1",
       "rgb": "rgb(3,105,161)",
       "hsl": "hsl(201.3,96.3%,32.2%)",
+      "oklch": "oklch(0.50,0.12,243)",
       "rgbChannel": "3 105 161",
       "hslChannel": "201.3 96.3% 32.2%"
     },
@@ -1346,6 +1510,7 @@
       "hex": "#075985",
       "rgb": "rgb(7,89,133)",
       "hsl": "hsl(201,90%,27.5%)",
+      "oklch": "oklch(0.44,0.10,241)",
       "rgbChannel": "7 89 133",
       "hslChannel": "201 90% 27.5%"
     },
@@ -1354,6 +1519,7 @@
       "hex": "#0c4a6e",
       "rgb": "rgb(12,74,110)",
       "hsl": "hsl(202,80.3%,23.9%)",
+      "oklch": "oklch(0.39,0.08,241)",
       "rgbChannel": "12 74 110",
       "hslChannel": "202 80.3% 23.9%"
     },
@@ -1362,6 +1528,7 @@
       "hex": "#082f49",
       "rgb": "rgb(8,47,73)",
       "hsl": "hsl(204,80.2%,15.9%)",
+      "oklch": "oklch(0.29,0.06,243)",
       "rgbChannel": "8 47 73",
       "hslChannel": "204 80.2% 15.9%"
     }
@@ -1372,6 +1539,7 @@
       "hex": "#eff6ff",
       "rgb": "rgb(239,246,255)",
       "hsl": "hsl(213.8,100%,96.9%)",
+      "oklch": "oklch(0.97,0.01,255)",
       "rgbChannel": "239 246 255",
       "hslChannel": "213.8 100% 96.9%"
     },
@@ -1380,6 +1548,7 @@
       "hex": "#dbeafe",
       "rgb": "rgb(219,234,254)",
       "hsl": "hsl(214.3,94.6%,92.7%)",
+      "oklch": "oklch(0.93,0.03,256)",
       "rgbChannel": "219 234 254",
       "hslChannel": "214.3 94.6% 92.7%"
     },
@@ -1388,6 +1557,7 @@
       "hex": "#bfdbfe",
       "rgb": "rgb(191,219,254)",
       "hsl": "hsl(213.3,96.9%,87.3%)",
+      "oklch": "oklch(0.88,0.06,254)",
       "rgbChannel": "191 219 254",
       "hslChannel": "213.3 96.9% 87.3%"
     },
@@ -1396,6 +1566,7 @@
       "hex": "#93c5fd",
       "rgb": "rgb(147,197,253)",
       "hsl": "hsl(211.7,96.4%,78.4%)",
+      "oklch": "oklch(0.81,0.10,252)",
       "rgbChannel": "147 197 253",
       "hslChannel": "211.7 96.4% 78.4%"
     },
@@ -1404,6 +1575,7 @@
       "hex": "#60a5fa",
       "rgb": "rgb(96,165,250)",
       "hsl": "hsl(213.1,93.9%,67.8%)",
+      "oklch": "oklch(0.71,0.14,255)",
       "rgbChannel": "96 165 250",
       "hslChannel": "213.1 93.9% 67.8%"
     },
@@ -1412,6 +1584,7 @@
       "hex": "#3b82f6",
       "rgb": "rgb(59,130,246)",
       "hsl": "hsl(217.2,91.2%,59.8%)",
+      "oklch": "oklch(0.62,0.19,260)",
       "rgbChannel": "59 130 246",
       "hslChannel": "217.2 91.2% 59.8%"
     },
@@ -1420,6 +1593,7 @@
       "hex": "#2563eb",
       "rgb": "rgb(37,99,235)",
       "hsl": "hsl(221.2,83.2%,53.3%)",
+      "oklch": "oklch(0.55,0.22,263)",
       "rgbChannel": "37 99 235",
       "hslChannel": "221.2 83.2% 53.3%"
     },
@@ -1428,6 +1602,7 @@
       "hex": "#1d4ed8",
       "rgb": "rgb(29,78,216)",
       "hsl": "hsl(224.3,76.3%,48%)",
+      "oklch": "oklch(0.49,0.22,264)",
       "rgbChannel": "29 78 216",
       "hslChannel": "224.3 76.3% 48%"
     },
@@ -1436,6 +1611,7 @@
       "hex": "#1e40af",
       "rgb": "rgb(30,64,175)",
       "hsl": "hsl(225.9,70.7%,40.2%)",
+      "oklch": "oklch(0.42,0.18,266)",
       "rgbChannel": "30 64 175",
       "hslChannel": "225.9 70.7% 40.2%"
     },
@@ -1444,6 +1620,7 @@
       "hex": "#1e3a8a",
       "rgb": "rgb(30,58,138)",
       "hsl": "hsl(224.4,64.3%,32.9%)",
+      "oklch": "oklch(0.38,0.14,266)",
       "rgbChannel": "30 58 138",
       "hslChannel": "224.4 64.3% 32.9%"
     },
@@ -1452,6 +1629,7 @@
       "hex": "#172554",
       "rgb": "rgb(23,37,84)",
       "hsl": "hsl(226.2,57%,21%)",
+      "oklch": "oklch(0.28,0.09,268)",
       "rgbChannel": "23 37 84",
       "hslChannel": "226.2 57% 21%"
     }
@@ -1462,6 +1640,7 @@
       "hex": "#eef2ff",
       "rgb": "rgb(238,242,255)",
       "hsl": "hsl(225.9,100%,96.7%)",
+      "oklch": "oklch(0.96,0.02,272)",
       "rgbChannel": "238 242 255",
       "hslChannel": "225.9 100% 96.7%"
     },
@@ -1470,6 +1649,7 @@
       "hex": "#e0e7ff",
       "rgb": "rgb(224,231,255)",
       "hsl": "hsl(226.5,100%,93.9%)",
+      "oklch": "oklch(0.93,0.03,273)",
       "rgbChannel": "224 231 255",
       "hslChannel": "226.5 100% 93.9%"
     },
@@ -1478,6 +1658,7 @@
       "hex": "#c7d2fe",
       "rgb": "rgb(199,210,254)",
       "hsl": "hsl(228,96.5%,88.8%)",
+      "oklch": "oklch(0.87,0.06,274)",
       "rgbChannel": "199 210 254",
       "hslChannel": "228 96.5% 88.8%"
     },
@@ -1486,6 +1667,7 @@
       "hex": "#a5b4fc",
       "rgb": "rgb(165,180,252)",
       "hsl": "hsl(229.7,93.5%,81.8%)",
+      "oklch": "oklch(0.79,0.10,275)",
       "rgbChannel": "165 180 252",
       "hslChannel": "229.7 93.5% 81.8%"
     },
@@ -1494,6 +1676,7 @@
       "hex": "#818cf8",
       "rgb": "rgb(129,140,248)",
       "hsl": "hsl(234.5,89.5%,73.9%)",
+      "oklch": "oklch(0.68,0.16,277)",
       "rgbChannel": "129 140 248",
       "hslChannel": "234.5 89.5% 73.9%"
     },
@@ -1502,6 +1685,7 @@
       "hex": "#6366f1",
       "rgb": "rgb(99,102,241)",
       "hsl": "hsl(238.7,83.5%,66.7%)",
+      "oklch": "oklch(0.59,0.20,277)",
       "rgbChannel": "99 102 241",
       "hslChannel": "238.7 83.5% 66.7%"
     },
@@ -1510,6 +1694,7 @@
       "hex": "#4f46e5",
       "rgb": "rgb(79,70,229)",
       "hsl": "hsl(243.4,75.4%,58.6%)",
+      "oklch": "oklch(0.51,0.23,277)",
       "rgbChannel": "79 70 229",
       "hslChannel": "243.4 75.4% 58.6%"
     },
@@ -1518,6 +1703,7 @@
       "hex": "#4338ca",
       "rgb": "rgb(67,56,202)",
       "hsl": "hsl(244.5,57.9%,50.6%)",
+      "oklch": "oklch(0.46,0.21,277)",
       "rgbChannel": "67 56 202",
       "hslChannel": "244.5 57.9% 50.6%"
     },
@@ -1526,6 +1712,7 @@
       "hex": "#3730a3",
       "rgb": "rgb(55,48,163)",
       "hsl": "hsl(243.7,54.5%,41.4%)",
+      "oklch": "oklch(0.40,0.18,277)",
       "rgbChannel": "55 48 163",
       "hslChannel": "243.7 54.5% 41.4%"
     },
@@ -1534,6 +1721,7 @@
       "hex": "#312e81",
       "rgb": "rgb(49,46,129)",
       "hsl": "hsl(242.2,47.4%,34.3%)",
+      "oklch": "oklch(0.36,0.14,279)",
       "rgbChannel": "49 46 129",
       "hslChannel": "242.2 47.4% 34.3%"
     },
@@ -1542,6 +1730,7 @@
       "hex": "#1e1b4b",
       "rgb": "rgb(30,27,75)",
       "hsl": "hsl(243.8,47.1%,20%)",
+      "oklch": "oklch(0.26,0.09,281)",
       "rgbChannel": "30 27 75",
       "hslChannel": "243.8 47.1% 20%"
     }
@@ -1552,6 +1741,7 @@
       "hex": "#f5f3ff",
       "rgb": "rgb(245,243,255)",
       "hsl": "hsl(250,100%,97.6%)",
+      "oklch": "oklch(0.97,0.02,294)",
       "rgbChannel": "245 243 255",
       "hslChannel": "250 100% 97.6%"
     },
@@ -1560,6 +1750,7 @@
       "hex": "#ede9fe",
       "rgb": "rgb(237,233,254)",
       "hsl": "hsl(251.4,91.3%,95.5%)",
+      "oklch": "oklch(0.94,0.03,295)",
       "rgbChannel": "237 233 254",
       "hslChannel": "251.4 91.3% 95.5%"
     },
@@ -1568,6 +1759,7 @@
       "hex": "#ddd6fe",
       "rgb": "rgb(221,214,254)",
       "hsl": "hsl(250.5,95.2%,91.8%)",
+      "oklch": "oklch(0.89,0.05,293)",
       "rgbChannel": "221 214 254",
       "hslChannel": "250.5 95.2% 91.8%"
     },
@@ -1576,6 +1768,7 @@
       "hex": "#c4b5fd",
       "rgb": "rgb(196,181,253)",
       "hsl": "hsl(252.5,94.7%,85.1%)",
+      "oklch": "oklch(0.81,0.10,294)",
       "rgbChannel": "196 181 253",
       "hslChannel": "252.5 94.7% 85.1%"
     },
@@ -1584,6 +1777,7 @@
       "hex": "#a78bfa",
       "rgb": "rgb(167,139,250)",
       "hsl": "hsl(255.1,91.7%,76.3%)",
+      "oklch": "oklch(0.71,0.16,294)",
       "rgbChannel": "167 139 250",
       "hslChannel": "255.1 91.7% 76.3%"
     },
@@ -1592,6 +1786,7 @@
       "hex": "#8b5cf6",
       "rgb": "rgb(139,92,246)",
       "hsl": "hsl(258.3,89.5%,66.3%)",
+      "oklch": "oklch(0.61,0.22,293)",
       "rgbChannel": "139 92 246",
       "hslChannel": "258.3 89.5% 66.3%"
     },
@@ -1600,6 +1795,7 @@
       "hex": "#7c3aed",
       "rgb": "rgb(124,58,237)",
       "hsl": "hsl(262.1,83.3%,57.8%)",
+      "oklch": "oklch(0.54,0.25,293)",
       "rgbChannel": "124 58 237",
       "hslChannel": "262.1 83.3% 57.8%"
     },
@@ -1608,6 +1804,7 @@
       "hex": "#6d28d9",
       "rgb": "rgb(109,40,217)",
       "hsl": "hsl(263.4,70%,50.4%)",
+      "oklch": "oklch(0.49,0.24,293)",
       "rgbChannel": "109 40 217",
       "hslChannel": "263.4 70% 50.4%"
     },
@@ -1616,6 +1813,7 @@
       "hex": "#5b21b6",
       "rgb": "rgb(91,33,182)",
       "hsl": "hsl(263.4,69.3%,42.2%)",
+      "oklch": "oklch(0.43,0.21,293)",
       "rgbChannel": "91 33 182",
       "hslChannel": "263.4 69.3% 42.2%"
     },
@@ -1624,6 +1822,7 @@
       "hex": "#4c1d95",
       "rgb": "rgb(76,29,149)",
       "hsl": "hsl(263.5,67.4%,34.9%)",
+      "oklch": "oklch(0.38,0.18,294)",
       "rgbChannel": "76 29 149",
       "hslChannel": "263.5 67.4% 34.9%"
     },
@@ -1632,6 +1831,7 @@
       "hex": "#1e1b4b",
       "rgb": "rgb(46,16,101)",
       "hsl": "hsl(261.2,72.6%,22.9%)",
+      "oklch": "oklch(0.28,0.14,291)",
       "rgbChannel": "46 16 101",
       "hslChannel": "261.2 72.6% 22.9%"
     }
@@ -1642,6 +1842,7 @@
       "hex": "#faf5ff",
       "rgb": "rgb(250,245,255)",
       "hsl": "hsl(270,100%,98%)",
+      "oklch": "oklch(0.98,0.01,308)",
       "rgbChannel": "250 245 255",
       "hslChannel": "270 100% 98%"
     },
@@ -1650,6 +1851,7 @@
       "hex": "#f3e8ff",
       "rgb": "rgb(243,232,255)",
       "hsl": "hsl(268.7,100%,95.5%)",
+      "oklch": "oklch(0.95,0.03,307)",
       "rgbChannel": "243 232 255",
       "hslChannel": "268.7 100% 95.5%"
     },
@@ -1658,6 +1860,7 @@
       "hex": "#e9d5ff",
       "rgb": "rgb(233,213,255)",
       "hsl": "hsl(268.6,100%,91.8%)",
+      "oklch": "oklch(0.90,0.06,307)",
       "rgbChannel": "233 213 255",
       "hslChannel": "268.6 100% 91.8%"
     },
@@ -1666,6 +1869,7 @@
       "hex": "#d8b4fe",
       "rgb": "rgb(216,180,254)",
       "hsl": "hsl(269.2,97.4%,85.1%)",
+      "oklch": "oklch(0.83,0.11,306)",
       "rgbChannel": "216 180 254",
       "hslChannel": "269.2 97.4% 85.1%"
     },
@@ -1674,6 +1878,7 @@
       "hex": "#c084fc",
       "rgb": "rgb(192,132,252)",
       "hsl": "hsl(270,95.2%,75.3%)",
+      "oklch": "oklch(0.72,0.18,306)",
       "rgbChannel": "192 132 252",
       "hslChannel": "270 95.2% 75.3%"
     },
@@ -1682,6 +1887,7 @@
       "hex": "#a855f7",
       "rgb": "rgb(168,85,247)",
       "hsl": "hsl(270.7,91%,65.1%)",
+      "oklch": "oklch(0.63,0.23,304)",
       "rgbChannel": "168 85 247",
       "hslChannel": "270.7 91% 65.1%"
     },
@@ -1690,6 +1896,7 @@
       "hex": "#9333ea",
       "rgb": "rgb(147,51,234)",
       "hsl": "hsl(271.5,81.3%,55.9%)",
+      "oklch": "oklch(0.56,0.25,302)",
       "rgbChannel": "147 51 234",
       "hslChannel": "271.5 81.3% 55.9%"
     },
@@ -1698,6 +1905,7 @@
       "hex": "#7e22ce",
       "rgb": "rgb(126,34,206)",
       "hsl": "hsl(272.1,71.7%,47.1%)",
+      "oklch": "oklch(0.50,0.24,302)",
       "rgbChannel": "126 34 206",
       "hslChannel": "272.1 71.7% 47.1%"
     },
@@ -1706,6 +1914,7 @@
       "hex": "#6b21a8",
       "rgb": "rgb(107,33,168)",
       "hsl": "hsl(272.9,67.2%,39.4%)",
+      "oklch": "oklch(0.44,0.20,304)",
       "rgbChannel": "107 33 168",
       "hslChannel": "272.9 67.2% 39.4%"
     },
@@ -1714,6 +1923,7 @@
       "hex": "#581c87",
       "rgb": "rgb(88,28,135)",
       "hsl": "hsl(273.6,65.6%,32%)",
+      "oklch": "oklch(0.38,0.17,305)",
       "rgbChannel": "88 28 135",
       "hslChannel": "273.6 65.6% 32%"
     },
@@ -1722,6 +1932,7 @@
       "hex": "#3b0764",
       "rgb": "rgb(59,7,100)",
       "hsl": "hsl(273.5,86.9%,21%)",
+      "oklch": "oklch(0.29,0.14,303)",
       "rgbChannel": "59 7 100",
       "hslChannel": "273.5 86.9% 21%"
     }
@@ -1732,6 +1943,7 @@
       "hex": "#fdf4ff",
       "rgb": "rgb(253,244,255)",
       "hsl": "hsl(289.1,100%,97.8%)",
+      "oklch": "oklch(0.98,0.02,320)",
       "rgbChannel": "253 244 255",
       "hslChannel": "289.1 100% 97.8%"
     },
@@ -1740,6 +1952,7 @@
       "hex": "#fae8ff",
       "rgb": "rgb(250,232,255)",
       "hsl": "hsl(287,100%,95.5%)",
+      "oklch": "oklch(0.95,0.04,319)",
       "rgbChannel": "250 232 255",
       "hslChannel": "287 100% 95.5%"
     },
@@ -1748,6 +1961,7 @@
       "hex": "#f5d0fe",
       "rgb": "rgb(245,208,254)",
       "hsl": "hsl(288.3,95.8%,90.6%)",
+      "oklch": "oklch(0.90,0.07,320)",
       "rgbChannel": "245 208 254",
       "hslChannel": "288.3 95.8% 90.6%"
     },
@@ -1756,6 +1970,7 @@
       "hex": "#f0abfc",
       "rgb": "rgb(240,171,252)",
       "hsl": "hsl(291.1,93.1%,82.9%)",
+      "oklch": "oklch(0.83,0.13,321)",
       "rgbChannel": "240 171 252",
       "hslChannel": "291.1 93.1% 82.9%"
     },
@@ -1764,6 +1979,7 @@
       "hex": "#e879f9",
       "rgb": "rgb(232,121,249)",
       "hsl": "hsl(292,91.4%,72.5%)",
+      "oklch": "oklch(0.75,0.21,322)",
       "rgbChannel": "232 121 249",
       "hslChannel": "292 91.4% 72.5%"
     },
@@ -1772,6 +1988,7 @@
       "hex": "#d946ef",
       "rgb": "rgb(217,70,239)",
       "hsl": "hsl(292.2,84.1%,60.6%)",
+      "oklch": "oklch(0.67,0.26,322)",
       "rgbChannel": "217 70 239",
       "hslChannel": "292.2 84.1% 60.6%"
     },
@@ -1780,6 +1997,7 @@
       "hex": "#c026d3",
       "rgb": "rgb(192,38,211)",
       "hsl": "hsl(293.4,69.5%,48.8%)",
+      "oklch": "oklch(0.59,0.26,323)",
       "rgbChannel": "192 38 211",
       "hslChannel": "293.4 69.5% 48.8%"
     },
@@ -1788,6 +2006,7 @@
       "hex": "#a21caf",
       "rgb": "rgb(162,28,175)",
       "hsl": "hsl(294.7,72.4%,39.8%)",
+      "oklch": "oklch(0.52,0.23,324)",
       "rgbChannel": "162 28 175",
       "hslChannel": "294.7 72.4% 39.8%"
     },
@@ -1796,6 +2015,7 @@
       "hex": "#86198f",
       "rgb": "rgb(134,25,143)",
       "hsl": "hsl(295.4,70.2%,32.9%)",
+      "oklch": "oklch(0.45,0.19,325)",
       "rgbChannel": "134 25 143",
       "hslChannel": "295.4 70.2% 32.9%"
     },
@@ -1804,6 +2024,7 @@
       "hex": "#701a75",
       "rgb": "rgb(112,26,117)",
       "hsl": "hsl(296.7,63.6%,28%)",
+      "oklch": "oklch(0.40,0.16,326)",
       "rgbChannel": "112 26 117",
       "hslChannel": "296.7 63.6% 28%"
     },
@@ -1812,6 +2033,7 @@
       "hex": "#4a044e",
       "rgb": "rgb(74,4,78)",
       "hsl": "hsl(296.8,90.2%,16.1%)",
+      "oklch": "oklch(0.29,0.13,326)",
       "rgbChannel": "74 4 78",
       "hslChannel": "296.8 90.2% 16.1%"
     }
@@ -1822,6 +2044,7 @@
       "hex": "#fdf2f8",
       "rgb": "rgb(253,242,248)",
       "hsl": "hsl(327.3,73.3%,97.1%)",
+      "oklch": "oklch(0.97,0.01,343)",
       "rgbChannel": "253 242 248",
       "hslChannel": "327.3 73.3% 97.1%"
     },
@@ -1830,6 +2053,7 @@
       "hex": "#fce7f3",
       "rgb": "rgb(252,231,243)",
       "hsl": "hsl(325.7,77.8%,94.7%)",
+      "oklch": "oklch(0.95,0.03,342)",
       "rgbChannel": "252 231 243",
       "hslChannel": "325.7 77.8% 94.7%"
     },
@@ -1838,6 +2062,7 @@
       "hex": "#fbcfe8",
       "rgb": "rgb(251,207,232)",
       "hsl": "hsl(325.9,84.6%,89.8%)",
+      "oklch": "oklch(0.90,0.06,343)",
       "rgbChannel": "251 207 232",
       "hslChannel": "325.9 84.6% 89.8%"
     },
@@ -1846,6 +2071,7 @@
       "hex": "#f9a8d4",
       "rgb": "rgb(249,168,212)",
       "hsl": "hsl(327.4,87.1%,81.8%)",
+      "oklch": "oklch(0.82,0.11,346)",
       "rgbChannel": "249 168 212",
       "hslChannel": "327.4 87.1% 81.8%"
     },
@@ -1854,6 +2080,7 @@
       "hex": "#f472b6",
       "rgb": "rgb(244,114,182)",
       "hsl": "hsl(328.6,85.5%,70.2%)",
+      "oklch": "oklch(0.73,0.18,350)",
       "rgbChannel": "244 114 182",
       "hslChannel": "328.6 85.5% 70.2%"
     },
@@ -1862,6 +2089,7 @@
       "hex": "#ec4899",
       "rgb": "rgb(236,72,153)",
       "hsl": "hsl(330.4,81.2%,60.4%)",
+      "oklch": "oklch(0.66,0.21,354)",
       "rgbChannel": "236 72 153",
       "hslChannel": "330.4 81.2% 60.4%"
     },
@@ -1870,6 +2098,7 @@
       "hex": "#db2777",
       "rgb": "rgb(219,39,119)",
       "hsl": "hsl(333.3,71.4%,50.6%)",
+      "oklch": "oklch(0.59,0.22,1)",
       "rgbChannel": "219 39 119",
       "hslChannel": "333.3 71.4% 50.6%"
     },
@@ -1878,6 +2107,7 @@
       "hex": "#be185d",
       "rgb": "rgb(190,24,93)",
       "hsl": "hsl(335.1,77.6%,42%)",
+      "oklch": "oklch(0.52,0.20,4)",
       "rgbChannel": "190 24 93",
       "hslChannel": "335.1 77.6% 42%"
     },
@@ -1886,6 +2116,7 @@
       "hex": "#9d174d",
       "rgb": "rgb(157,23,77)",
       "hsl": "hsl(335.8,74.4%,35.3%)",
+      "oklch": "oklch(0.46,0.17,4)",
       "rgbChannel": "157 23 77",
       "hslChannel": "335.8 74.4% 35.3%"
     },
@@ -1894,6 +2125,7 @@
       "hex": "#831843",
       "rgb": "rgb(131,24,67)",
       "hsl": "hsl(335.9,69%,30.4%)",
+      "oklch": "oklch(0.41,0.14,2)",
       "rgbChannel": "131 24 67",
       "hslChannel": "335.9 69% 30.4%"
     },
@@ -1902,6 +2134,7 @@
       "hex": "#500724",
       "rgb": "rgb(80,7,36)",
       "hsl": "hsl(336.2,83.9%,17.1%)",
+      "oklch": "oklch(0.28,0.10,4)",
       "rgbChannel": "80 7 36",
       "hslChannel": "336.2 83.9% 17.1%"
     }
@@ -1912,6 +2145,7 @@
       "hex": "#fff1f2",
       "rgb": "rgb(255,241,242)",
       "hsl": "hsl(355.7,100%,97.3%)",
+      "oklch": "oklch(0.97,0.02,12)",
       "rgbChannel": "255 241 242",
       "hslChannel": "355.7 100% 97.3%"
     },
@@ -1920,6 +2154,7 @@
       "hex": "#ffe4e6",
       "rgb": "rgb(255,228,230)",
       "hsl": "hsl(355.6,100%,94.7%)",
+      "oklch": "oklch(0.94,0.03,13)",
       "rgbChannel": "255 228 230",
       "hslChannel": "355.6 100% 94.7%"
     },
@@ -1928,6 +2163,7 @@
       "hex": "#fecdd3",
       "rgb": "rgb(254,205,211)",
       "hsl": "hsl(352.7,96.1%,90%)",
+      "oklch": "oklch(0.89,0.06,10)",
       "rgbChannel": "254 205 211",
       "hslChannel": "352.7 96.1% 90%"
     },
@@ -1936,6 +2172,7 @@
       "hex": "#fda4af",
       "rgb": "rgb(253,164,175)",
       "hsl": "hsl(352.6,95.7%,81.8%)",
+      "oklch": "oklch(0.81,0.11,12)",
       "rgbChannel": "253 164 175",
       "hslChannel": "352.6 95.7% 81.8%"
     },
@@ -1944,6 +2181,7 @@
       "hex": "#fb7185",
       "rgb": "rgb(251,113,133)",
       "hsl": "hsl(351.3,94.5%,71.4%)",
+      "oklch": "oklch(0.72,0.17,13)",
       "rgbChannel": "251 113 133",
       "hslChannel": "351.3 94.5% 71.4%"
     },
@@ -1952,6 +2190,7 @@
       "hex": "#f43f5e",
       "rgb": "rgb(244,63,94)",
       "hsl": "hsl(349.7,89.2%,60.2%)",
+      "oklch": "oklch(0.65,0.22,16)",
       "rgbChannel": "244 63 94",
       "hslChannel": "349.7 89.2% 60.2%"
     },
@@ -1960,6 +2199,7 @@
       "hex": "#e11d48",
       "rgb": "rgb(225,29,72)",
       "hsl": "hsl(346.8,77.2%,49.8%)",
+      "oklch": "oklch(0.59,0.22,18)",
       "rgbChannel": "225 29 72",
       "hslChannel": "346.8 77.2% 49.8%"
     },
@@ -1968,6 +2208,7 @@
       "hex": "#be123c",
       "rgb": "rgb(190,18,60)",
       "hsl": "hsl(345.3,82.7%,40.8%)",
+      "oklch": "oklch(0.51,0.20,17)",
       "rgbChannel": "190 18 60",
       "hslChannel": "345.3 82.7% 40.8%"
     },
@@ -1976,6 +2217,7 @@
       "hex": "#9f1239",
       "rgb": "rgb(159,18,57)",
       "hsl": "hsl(343.4,79.7%,34.7%)",
+      "oklch": "oklch(0.45,0.17,14)",
       "rgbChannel": "159 18 57",
       "hslChannel": "343.4 79.7% 34.7%"
     },
@@ -1984,6 +2226,7 @@
       "hex": "#881337",
       "rgb": "rgb(136,19,55)",
       "hsl": "hsl(341.5,75.5%,30.4%)",
+      "oklch": "oklch(0.41,0.15,10)",
       "rgbChannel": "136 19 55",
       "hslChannel": "341.5 75.5% 30.4%"
     },
@@ -1992,6 +2235,7 @@
       "hex": "#4c0519",
       "rgb": "rgb(76,5,25)",
       "hsl": "hsl(343.1,87.7%,15.9%)",
+      "oklch": "oklch(0.27,0.10,12)",
       "rgbChannel": "76 5 25",
       "hslChannel": "343.1 87.7% 15.9%"
     }
diff --git a/apps/www/public/r/colors/neutral.json b/apps/www/public/r/colors/neutral.json
index 71688eaf945..56267dfb4a8 100644
--- a/apps/www/public/r/colors/neutral.json
+++ b/apps/www/public/r/colors/neutral.json
@@ -97,6 +97,75 @@
       "chart-5": "340 75% 55%"
     }
   },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.145 0 0)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.145 0 0)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.145 0 0)",
+      "primary": "oklch(0.205 0 0)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.97 0 0)",
+      "secondary-foreground": "oklch(0.205 0 0)",
+      "muted": "oklch(0.97 0 0)",
+      "muted-foreground": "oklch(0.556 0 0)",
+      "accent": "oklch(0.97 0 0)",
+      "accent-foreground": "oklch(0.205 0 0)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.922 0 0)",
+      "input": "oklch(0.922 0 0)",
+      "ring": "oklch(0.708 0 0)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.145 0 0)",
+      "sidebar-primary": "oklch(0.205 0 0)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.97 0 0)",
+      "sidebar-accent-foreground": "oklch(0.205 0 0)",
+      "sidebar-border": "oklch(0.922 0 0)",
+      "sidebar-ring": "oklch(0.708 0 0)"
+    },
+    "dark": {
+      "background": "oklch(0.145 0 0)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.205 0 0)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.205 0 0)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.922 0 0)",
+      "primary-foreground": "oklch(0.205 0 0)",
+      "secondary": "oklch(0.269 0 0)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.269 0 0)",
+      "muted-foreground": "oklch(0.708 0 0)",
+      "accent": "oklch(0.269 0 0)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.556 0 0)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.205 0 0)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.269 0 0)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.556 0 0)"
+    }
+  },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n    --ring: 0 0% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n    --ring: 0 0% 83.1%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
\ No newline at end of file
diff --git a/apps/www/public/r/colors/slate.json b/apps/www/public/r/colors/slate.json
index cb5f964c952..88c6ca0f4a8 100644
--- a/apps/www/public/r/colors/slate.json
+++ b/apps/www/public/r/colors/slate.json
@@ -97,6 +97,75 @@
       "chart-5": "340 75% 55%"
     }
   },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.129 0.042 264.695)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.129 0.042 264.695)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.129 0.042 264.695)",
+      "primary": "oklch(0.208 0.042 265.755)",
+      "primary-foreground": "oklch(0.984 0.003 247.858)",
+      "secondary": "oklch(0.968 0.007 247.896)",
+      "secondary-foreground": "oklch(0.208 0.042 265.755)",
+      "muted": "oklch(0.968 0.007 247.896)",
+      "muted-foreground": "oklch(0.554 0.046 257.417)",
+      "accent": "oklch(0.968 0.007 247.896)",
+      "accent-foreground": "oklch(0.208 0.042 265.755)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.929 0.013 255.508)",
+      "input": "oklch(0.929 0.013 255.508)",
+      "ring": "oklch(0.704 0.04 256.788)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.984 0.003 247.858)",
+      "sidebar-foreground": "oklch(0.129 0.042 264.695)",
+      "sidebar-primary": "oklch(0.208 0.042 265.755)",
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-accent": "oklch(0.968 0.007 247.896)",
+      "sidebar-accent-foreground": "oklch(0.208 0.042 265.755)",
+      "sidebar-border": "oklch(0.929 0.013 255.508)",
+      "sidebar-ring": "oklch(0.704 0.04 256.788)"
+    },
+    "dark": {
+      "background": "oklch(0.129 0.042 264.695)",
+      "foreground": "oklch(0.984 0.003 247.858)",
+      "card": "oklch(0.208 0.042 265.755)",
+      "card-foreground": "oklch(0.984 0.003 247.858)",
+      "popover": "oklch(0.208 0.042 265.755)",
+      "popover-foreground": "oklch(0.984 0.003 247.858)",
+      "primary": "oklch(0.929 0.013 255.508)",
+      "primary-foreground": "oklch(0.208 0.042 265.755)",
+      "secondary": "oklch(0.279 0.041 260.031)",
+      "secondary-foreground": "oklch(0.984 0.003 247.858)",
+      "muted": "oklch(0.279 0.041 260.031)",
+      "muted-foreground": "oklch(0.704 0.04 256.788)",
+      "accent": "oklch(0.279 0.041 260.031)",
+      "accent-foreground": "oklch(0.984 0.003 247.858)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.551 0.027 264.364)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.208 0.042 265.755)",
+      "sidebar-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-accent": "oklch(0.279 0.041 260.031)",
+      "sidebar-accent-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.551 0.027 264.364)"
+    }
+  },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
\ No newline at end of file
diff --git a/apps/www/public/r/colors/stone.json b/apps/www/public/r/colors/stone.json
index 4a793b87389..2648208dce4 100644
--- a/apps/www/public/r/colors/stone.json
+++ b/apps/www/public/r/colors/stone.json
@@ -97,6 +97,75 @@
       "chart-5": "340 75% 55%"
     }
   },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.147 0.004 49.25)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.147 0.004 49.25)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.147 0.004 49.25)",
+      "primary": "oklch(0.216 0.006 56.043)",
+      "primary-foreground": "oklch(0.985 0.001 106.423)",
+      "secondary": "oklch(0.97 0.001 106.424)",
+      "secondary-foreground": "oklch(0.216 0.006 56.043)",
+      "muted": "oklch(0.97 0.001 106.424)",
+      "muted-foreground": "oklch(0.553 0.013 58.071)",
+      "accent": "oklch(0.97 0.001 106.424)",
+      "accent-foreground": "oklch(0.216 0.006 56.043)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.923 0.003 48.717)",
+      "input": "oklch(0.923 0.003 48.717)",
+      "ring": "oklch(0.709 0.01 56.259)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0.001 106.423)",
+      "sidebar-foreground": "oklch(0.147 0.004 49.25)",
+      "sidebar-primary": "oklch(0.216 0.006 56.043)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.97 0.001 106.424)",
+      "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)",
+      "sidebar-border": "oklch(0.923 0.003 48.717)",
+      "sidebar-ring": "oklch(0.709 0.01 56.259)"
+    },
+    "dark": {
+      "background": "oklch(0.147 0.004 49.25)",
+      "foreground": "oklch(0.985 0.001 106.423)",
+      "card": "oklch(0.216 0.006 56.043)",
+      "card-foreground": "oklch(0.985 0.001 106.423)",
+      "popover": "oklch(0.216 0.006 56.043)",
+      "popover-foreground": "oklch(0.985 0.001 106.423)",
+      "primary": "oklch(0.923 0.003 48.717)",
+      "primary-foreground": "oklch(0.216 0.006 56.043)",
+      "secondary": "oklch(0.268 0.007 34.298)",
+      "secondary-foreground": "oklch(0.985 0.001 106.423)",
+      "muted": "oklch(0.268 0.007 34.298)",
+      "muted-foreground": "oklch(0.709 0.01 56.259)",
+      "accent": "oklch(0.268 0.007 34.298)",
+      "accent-foreground": "oklch(0.985 0.001 106.423)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.553 0.013 58.071)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.216 0.006 56.043)",
+      "sidebar-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.268 0.007 34.298)",
+      "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.553 0.013 58.071)"
+    }
+  },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n    --ring: 20 14.3% 4.1%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n    --ring: 24 5.7% 82.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
\ No newline at end of file
diff --git a/apps/www/public/r/colors/zinc.json b/apps/www/public/r/colors/zinc.json
index c2f6a18e698..89321e847cf 100644
--- a/apps/www/public/r/colors/zinc.json
+++ b/apps/www/public/r/colors/zinc.json
@@ -97,6 +97,75 @@
       "chart-5": "340 75% 55%"
     }
   },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.141 0.005 285.823)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.141 0.005 285.823)",
+      "primary": "oklch(0.21 0.006 285.885)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.967 0.001 286.375)",
+      "secondary-foreground": "oklch(0.21 0.006 285.885)",
+      "muted": "oklch(0.967 0.001 286.375)",
+      "muted-foreground": "oklch(0.552 0.016 285.938)",
+      "accent": "oklch(0.967 0.001 286.375)",
+      "accent-foreground": "oklch(0.21 0.006 285.885)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.92 0.004 286.32)",
+      "input": "oklch(0.92 0.004 286.32)",
+      "ring": "oklch(0.705 0.015 286.067)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
+      "sidebar-primary": "oklch(0.21 0.006 285.885)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.967 0.001 286.375)",
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+      "sidebar-border": "oklch(0.92 0.004 286.32)",
+      "sidebar-ring": "oklch(0.705 0.015 286.067)"
+    },
+    "dark": {
+      "background": "oklch(0.141 0.005 285.823)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.21 0.006 285.885)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.21 0.006 285.885)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.92 0.004 286.32)",
+      "primary-foreground": "oklch(0.21 0.006 285.885)",
+      "secondary": "oklch(0.274 0.006 286.033)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.274 0.006 286.033)",
+      "muted-foreground": "oklch(0.705 0.015 286.067)",
+      "accent": "oklch(0.274 0.006 286.033)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.552 0.016 285.938)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.21 0.006 285.885)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.274 0.006 286.033)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.552 0.016 285.938)"
+    }
+  },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n    --ring: 240 10% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n    --ring: 240 4.9% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
\ No newline at end of file
diff --git a/apps/www/public/r/icons/index.json b/apps/www/public/r/icons/index.json
new file mode 100644
index 00000000000..bf65dca463d
--- /dev/null
+++ b/apps/www/public/r/icons/index.json
@@ -0,0 +1,150 @@
+{
+  "AlertCircle": {
+    "lucide": "AlertCircle",
+    "radix": "ExclamationTriangleIcon"
+  },
+  "ArrowLeft": {
+    "lucide": "ArrowLeft",
+    "radix": "ArrowLeftIcon"
+  },
+  "ArrowRight": {
+    "lucide": "ArrowRight",
+    "radix": "ArrowRightIcon"
+  },
+  "ArrowUpDown": {
+    "lucide": "ArrowUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "BellRing": {
+    "lucide": "BellRing",
+    "radix": "BellIcon"
+  },
+  "Bold": {
+    "lucide": "Bold",
+    "radix": "FontBoldIcon"
+  },
+  "Calculator": {
+    "lucide": "Calculator",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "Calendar": {
+    "lucide": "Calendar",
+    "radix": "CalendarIcon"
+  },
+  "Check": {
+    "lucide": "Check",
+    "radix": "CheckIcon"
+  },
+  "ChevronDown": {
+    "lucide": "ChevronDown",
+    "radix": "ChevronDownIcon"
+  },
+  "ChevronLeft": {
+    "lucide": "ChevronLeft",
+    "radix": "ChevronLeftIcon"
+  },
+  "ChevronRight": {
+    "lucide": "ChevronRight",
+    "radix": "ChevronRightIcon"
+  },
+  "ChevronUp": {
+    "lucide": "ChevronUp",
+    "radix": "ChevronUpIcon"
+  },
+  "ChevronsUpDown": {
+    "lucide": "ChevronsUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "Circle": {
+    "lucide": "Circle",
+    "radix": "DotFilledIcon"
+  },
+  "Copy": {
+    "lucide": "Copy",
+    "radix": "CopyIcon"
+  },
+  "CreditCard": {
+    "lucide": "CreditCard",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "GripVertical": {
+    "lucide": "GripVertical",
+    "radix": "DragHandleDots2Icon"
+  },
+  "Italic": {
+    "lucide": "Italic",
+    "radix": "FontItalicIcon"
+  },
+  "Loader2": {
+    "lucide": "Loader2",
+    "radix": "ReloadIcon"
+  },
+  "Mail": {
+    "lucide": "Mail",
+    "radix": "EnvelopeClosedIcon"
+  },
+  "MailOpen": {
+    "lucide": "MailOpen",
+    "radix": "EnvelopeOpenIcon"
+  },
+  "Minus": {
+    "lucide": "Minus",
+    "radix": "MinusIcon"
+  },
+  "Moon": {
+    "lucide": "Moon",
+    "radix": "MoonIcon"
+  },
+  "MoreHorizontal": {
+    "lucide": "MoreHorizontal",
+    "radix": "DotsHorizontalIcon"
+  },
+  "PanelLeft": {
+    "lucide": "PanelLeft",
+    "radix": "ViewVerticalIcon"
+  },
+  "Plus": {
+    "lucide": "Plus",
+    "radix": "PlusIcon"
+  },
+  "Search": {
+    "lucide": "Search",
+    "radix": "MagnifyingGlassIcon"
+  },
+  "Send": {
+    "lucide": "Send",
+    "radix": "PaperPlaneIcon"
+  },
+  "Settings": {
+    "lucide": "Settings",
+    "radix": "GearIcon"
+  },
+  "Slash": {
+    "lucide": "Slash",
+    "radix": "SlashIcon"
+  },
+  "Smile": {
+    "lucide": "Smile",
+    "radix": "FaceIcon"
+  },
+  "Sun": {
+    "lucide": "Sun",
+    "radix": "SunIcon"
+  },
+  "Terminal": {
+    "lucide": "Terminal",
+    "radix": "RocketIcon"
+  },
+  "Underline": {
+    "lucide": "Underline",
+    "radix": "UnderlineIcon"
+  },
+  "User": {
+    "lucide": "User",
+    "radix": "PersonIcon"
+  },
+  "X": {
+    "lucide": "X",
+    "radix": "Cross2Icon"
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json
index 1ef665d4f6e..0e193077ef0 100644
--- a/apps/www/public/r/index.json
+++ b/apps/www/public/r/index.json
@@ -97,6 +97,9 @@
   {
     "name": "badge",
     "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-slot"
+    ],
     "files": [
       {
         "path": "ui/badge.tsx",
@@ -134,7 +137,7 @@
     "name": "calendar",
     "type": "registry:ui",
     "dependencies": [
-      "react-day-picker@8.10.1",
+      "react-day-picker@latest",
       "date-fns"
     ],
     "registryDependencies": [
@@ -177,7 +180,7 @@
     "name": "chart",
     "type": "registry:ui",
     "dependencies": [
-      "recharts",
+      "recharts@2.15.4",
       "lucide-react"
     ],
     "registryDependencies": [
@@ -220,7 +223,7 @@
     "name": "command",
     "type": "registry:ui",
     "dependencies": [
-      "cmdk@1.0.0"
+      "cmdk"
     ],
     "registryDependencies": [
       "dialog"
@@ -498,6 +501,72 @@
       }
     ]
   },
+  {
+    "name": "sidebar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@radix-ui/react-slot",
+      "class-variance-authority",
+      "lucide-react"
+    ],
+    "registryDependencies": [
+      "button",
+      "separator",
+      "sheet",
+      "tooltip",
+      "input",
+      "use-mobile",
+      "skeleton"
+    ],
+    "files": [
+      {
+        "path": "ui/sidebar.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "tailwind": {
+      "config": {
+        "theme": {
+          "extend": {
+            "colors": {
+              "sidebar": {
+                "DEFAULT": "hsl(var(--sidebar-background))",
+                "foreground": "hsl(var(--sidebar-foreground))",
+                "primary": "hsl(var(--sidebar-primary))",
+                "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                "accent": "hsl(var(--sidebar-accent))",
+                "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                "border": "hsl(var(--sidebar-border))",
+                "ring": "hsl(var(--sidebar-ring))"
+              }
+            }
+          }
+        }
+      }
+    },
+    "cssVars": {
+      "light": {
+        "sidebar-background": "0 0% 98%",
+        "sidebar-foreground": "240 5.3% 26.1%",
+        "sidebar-primary": "240 5.9% 10%",
+        "sidebar-primary-foreground": "0 0% 98%",
+        "sidebar-accent": "240 4.8% 95.9%",
+        "sidebar-accent-foreground": "240 5.9% 10%",
+        "sidebar-border": "220 13% 91%",
+        "sidebar-ring": "217.2 91.2% 59.8%"
+      },
+      "dark": {
+        "sidebar-background": "240 5.9% 10%",
+        "sidebar-foreground": "240 4.8% 95.9%",
+        "sidebar-primary": "224.3 76.3% 48%",
+        "sidebar-primary-foreground": "0 0% 100%",
+        "sidebar-accent": "240 3.7% 15.9%",
+        "sidebar-accent-foreground": "240 4.8% 95.9%",
+        "sidebar-border": "240 3.7% 15.9%",
+        "sidebar-ring": "217.2 91.2% 59.8%"
+      }
+    }
+  },
   {
     "name": "skeleton",
     "type": "registry:ui",
diff --git a/apps/www/public/r/styles/default/accordion-demo.json b/apps/www/public/r/styles/default/accordion-demo.json
new file mode 100644
index 00000000000..9c17049d880
--- /dev/null
+++ b/apps/www/public/r/styles/default/accordion-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "accordion"
+  ],
+  "files": [
+    {
+      "path": "examples/accordion-demo.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport default function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other\n          components&apos; aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It&apos;s animated by default, but you can disable it if you\n          prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/accordion.json b/apps/www/public/r/styles/default/accordion.json
index a2acccaaa2e..bdf7c13c60f 100644
--- a/apps/www/public/r/styles/default/accordion.json
+++ b/apps/www/public/r/styles/default/accordion.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "accordion",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-accordion"
   ],
diff --git a/apps/www/public/r/styles/default/alert-demo.json b/apps/www/public/r/styles/default/alert-demo.json
new file mode 100644
index 00000000000..7f6b865cc94
--- /dev/null
+++ b/apps/www/public/r/styles/default/alert-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertDemo() {\n  return (\n    <Alert>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/alert-destructive.json b/apps/www/public/r/styles/default/alert-destructive.json
new file mode 100644
index 00000000000..490ed8667f3
--- /dev/null
+++ b/apps/www/public/r/styles/default/alert-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-destructive.tsx",
+      "content": "import { AlertCircle } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertDestructive() {\n  return (\n    <Alert variant=\"destructive\">\n      <AlertCircle className=\"h-4 w-4\" />\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>\n        Your session has expired. Please log in again.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/alert-dialog-demo.json b/apps/www/public/r/styles/default/alert-dialog-demo.json
new file mode 100644
index 00000000000..8a52874789e
--- /dev/null
+++ b/apps/www/public/r/styles/default/alert-dialog-demo.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert-dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-dialog-demo.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/alert-dialog.json b/apps/www/public/r/styles/default/alert-dialog.json
index 2ebbd57292b..8189458f19b 100644
--- a/apps/www/public/r/styles/default/alert-dialog.json
+++ b/apps/www/public/r/styles/default/alert-dialog.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "alert-dialog",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-alert-dialog"
   ],
diff --git a/apps/www/public/r/styles/default/alert.json b/apps/www/public/r/styles/default/alert.json
index c43687c9bbb..300523eed7a 100644
--- a/apps/www/public/r/styles/default/alert.json
+++ b/apps/www/public/r/styles/default/alert.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "alert",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/alert.tsx",
diff --git a/apps/www/public/r/styles/default/aspect-ratio-demo.json b/apps/www/public/r/styles/default/aspect-ratio-demo.json
new file mode 100644
index 00000000000..1986b6fac1b
--- /dev/null
+++ b/apps/www/public/r/styles/default/aspect-ratio-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "examples/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/aspect-ratio.json b/apps/www/public/r/styles/default/aspect-ratio.json
index e0f156b809e..511410bb571 100644
--- a/apps/www/public/r/styles/default/aspect-ratio.json
+++ b/apps/www/public/r/styles/default/aspect-ratio.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "aspect-ratio",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-aspect-ratio"
   ],
diff --git a/apps/www/public/r/styles/default/authentication-01.json b/apps/www/public/r/styles/default/authentication-01.json
deleted file mode 100644
index b31b3f1312a..00000000000
--- a/apps/www/public/r/styles/default/authentication-01.json
+++ /dev/null
@@ -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": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/authentication-02.json b/apps/www/public/r/styles/default/authentication-02.json
deleted file mode 100644
index 3c0222bfed4..00000000000
--- a/apps/www/public/r/styles/default/authentication-02.json
+++ /dev/null
@@ -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": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/authentication-03.json b/apps/www/public/r/styles/default/authentication-03.json
deleted file mode 100644
index 5fb2e981f86..00000000000
--- a/apps/www/public/r/styles/default/authentication-03.json
+++ /dev/null
@@ -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": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/authentication-04.json b/apps/www/public/r/styles/default/authentication-04.json
deleted file mode 100644
index a77344d1581..00000000000
--- a/apps/www/public/r/styles/default/authentication-04.json
+++ /dev/null
@@ -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": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/avatar-demo.json b/apps/www/public/r/styles/default/avatar-demo.json
new file mode 100644
index 00000000000..9e5ccb06543
--- /dev/null
+++ b/apps/www/public/r/styles/default/avatar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "examples/avatar-demo.tsx",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/avatar.json b/apps/www/public/r/styles/default/avatar.json
index 27c3a8cb58a..7215ea17062 100644
--- a/apps/www/public/r/styles/default/avatar.json
+++ b/apps/www/public/r/styles/default/avatar.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "avatar",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-avatar"
   ],
diff --git a/apps/www/public/r/styles/default/badge-demo.json b/apps/www/public/r/styles/default/badge-demo.json
new file mode 100644
index 00000000000..058cb863546
--- /dev/null
+++ b/apps/www/public/r/styles/default/badge-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-demo.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/badge-destructive.json b/apps/www/public/r/styles/default/badge-destructive.json
new file mode 100644
index 00000000000..a1c713208d4
--- /dev/null
+++ b/apps/www/public/r/styles/default/badge-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/badge-outline.json b/apps/www/public/r/styles/default/badge-outline.json
new file mode 100644
index 00000000000..db35e6df38f
--- /dev/null
+++ b/apps/www/public/r/styles/default/badge-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-outline.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/badge-secondary.json b/apps/www/public/r/styles/default/badge-secondary.json
new file mode 100644
index 00000000000..9eb9ee2929f
--- /dev/null
+++ b/apps/www/public/r/styles/default/badge-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-secondary",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/badge.json b/apps/www/public/r/styles/default/badge.json
index 315277d30f8..afe0f305466 100644
--- a/apps/www/public/r/styles/default/badge.json
+++ b/apps/www/public/r/styles/default/badge.json
@@ -1,6 +1,11 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "badge",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
   "files": [
     {
       "path": "ui/badge.tsx",
diff --git a/apps/www/public/r/styles/default/breadcrumb-demo.json b/apps/www/public/r/styles/default/breadcrumb-demo.json
new file mode 100644
index 00000000000..d424b97255e
--- /dev/null
+++ b/apps/www/public/r/styles/default/breadcrumb-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-demo.tsx",
+      "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/breadcrumb-dropdown.json b/apps/www/public/r/styles/default/breadcrumb-dropdown.json
new file mode 100644
index 00000000000..428279ddf7a
--- /dev/null
+++ b/apps/www/public/r/styles/default/breadcrumb-dropdown.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-dropdown",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-dropdown.tsx",
+      "content": "import { ChevronDown, Slash } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              Components\n              <ChevronDown className=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/breadcrumb-ellipsis.json b/apps/www/public/r/styles/default/breadcrumb-ellipsis.json
new file mode 100644
index 00000000000..57056e9c439
--- /dev/null
+++ b/apps/www/public/r/styles/default/breadcrumb-ellipsis.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-ellipsis",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-ellipsis.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbEllipsis />\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/breadcrumb-link.json b/apps/www/public/r/styles/default/breadcrumb-link.json
new file mode 100644
index 00000000000..120f04169c7
--- /dev/null
+++ b/apps/www/public/r/styles/default/breadcrumb-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-link",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-link.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink>\n            <Link href=\"/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/breadcrumb-responsive.json b/apps/www/public/r/styles/default/breadcrumb-responsive.json
new file mode 100644
index 00000000000..3ffc728ccb8
--- /dev/null
+++ b/apps/www/public/r/styles/default/breadcrumb-responsive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-responsive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nconst items = [\n  { href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Documentation\" },\n  { href: \"#\", label: \"Building Your Application\" },\n  { href: \"#\", label: \"Data Fetching\" },\n  { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        {items.length > ITEMS_TO_DISPLAY ? (\n          <>\n            <BreadcrumbItem>\n              {isDesktop ? (\n                <DropdownMenu open={open} onOpenChange={setOpen}>\n                  <DropdownMenuTrigger\n                    className=\"flex items-center gap-1\"\n                    aria-label=\"Toggle menu\"\n                  >\n                    <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                    {items.slice(1, -2).map((item, index) => (\n                      <DropdownMenuItem key={index}>\n                        <Link href={item.href ? item.href : \"#\"}>\n                          {item.label}\n                        </Link>\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              ) : (\n                <Drawer open={open} onOpenChange={setOpen}>\n                  <DrawerTrigger aria-label=\"Toggle Menu\">\n                    <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                  </DrawerTrigger>\n                  <DrawerContent>\n                    <DrawerHeader className=\"text-left\">\n                      <DrawerTitle>Navigate to</DrawerTitle>\n                      <DrawerDescription>\n                        Select a page to navigate to.\n                      </DrawerDescription>\n                    </DrawerHeader>\n                    <div className=\"grid gap-1 px-4\">\n                      {items.slice(1, -2).map((item, index) => (\n                        <Link\n                          key={index}\n                          href={item.href ? item.href : \"#\"}\n                          className=\"py-1 text-sm\"\n                        >\n                          {item.label}\n                        </Link>\n                      ))}\n                    </div>\n                    <DrawerFooter className=\"pt-4\">\n                      <DrawerClose asChild>\n                        <Button variant=\"outline\">Close</Button>\n                      </DrawerClose>\n                    </DrawerFooter>\n                  </DrawerContent>\n                </Drawer>\n              )}\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n          </>\n        ) : null}\n        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n          <BreadcrumbItem key={index}>\n            {item.href ? (\n              <>\n                <BreadcrumbLink\n                  asChild\n                  className=\"max-w-20 truncate md:max-w-none\"\n                >\n                  <Link href={item.href}>{item.label}</Link>\n                </BreadcrumbLink>\n                <BreadcrumbSeparator />\n              </>\n            ) : (\n              <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                {item.label}\n              </BreadcrumbPage>\n            )}\n          </BreadcrumbItem>\n        ))}\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/breadcrumb-separator.json b/apps/www/public/r/styles/default/breadcrumb-separator.json
new file mode 100644
index 00000000000..409c3ff22be
--- /dev/null
+++ b/apps/www/public/r/styles/default/breadcrumb-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-separator",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-separator.tsx",
+      "content": "import { Slash } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/breadcrumb.json b/apps/www/public/r/styles/default/breadcrumb.json
index 78dceea917e..1dfdd056650 100644
--- a/apps/www/public/r/styles/default/breadcrumb.json
+++ b/apps/www/public/r/styles/default/breadcrumb.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "breadcrumb",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\"> & {\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    {...props}\n  />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & {\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:size-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\"> & {\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    {...props}\n  />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & {\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:w-3.5 [&>svg]:h-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/button-as-child.json b/apps/www/public/r/styles/default/button-as-child.json
new file mode 100644
index 00000000000..4d8e110e2b3
--- /dev/null
+++ b/apps/www/public/r/styles/default/button-as-child.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-as-child",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-as-child.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonAsChild() {\n  return (\n    <Button asChild>\n      <Link href=\"/login\">Login</Link>\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/button-demo.json b/apps/www/public/r/styles/default/button-demo.json
new file mode 100644
index 00000000000..c0887f83c8a
--- /dev/null
+++ b/apps/www/public/r/styles/default/button-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/button-destructive.json b/apps/www/public/r/styles/default/button-destructive.json
new file mode 100644
index 00000000000..6b960e591e2
--- /dev/null
+++ b/apps/www/public/r/styles/default/button-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-destructive.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/button-ghost.json b/apps/www/public/r/styles/default/button-ghost.json
new file mode 100644
index 00000000000..c3de5ec8640
--- /dev/null
+++ b/apps/www/public/r/styles/default/button-ghost.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-ghost",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-ghost.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/button-icon.json b/apps/www/public/r/styles/default/button-icon.json
new file mode 100644
index 00000000000..5e46a482581
--- /dev/null
+++ b/apps/www/public/r/styles/default/button-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-icon",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-icon.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <ChevronRight />\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/button-link.json b/apps/www/public/r/styles/default/button-link.json
new file mode 100644
index 00000000000..77f8b8b2b66
--- /dev/null
+++ b/apps/www/public/r/styles/default/button-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-link",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-link.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/button-loading.json b/apps/www/public/r/styles/default/button-loading.json
new file mode 100644
index 00000000000..26b7eafc49f
--- /dev/null
+++ b/apps/www/public/r/styles/default/button-loading.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-loading",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/button-outline.json b/apps/www/public/r/styles/default/button-outline.json
new file mode 100644
index 00000000000..77aef187ddb
--- /dev/null
+++ b/apps/www/public/r/styles/default/button-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-outline.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/button-secondary.json b/apps/www/public/r/styles/default/button-secondary.json
new file mode 100644
index 00000000000..c9783a99f10
--- /dev/null
+++ b/apps/www/public/r/styles/default/button-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-secondary",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-secondary.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/button-with-icon.json b/apps/www/public/r/styles/default/button-with-icon.json
new file mode 100644
index 00000000000..b7b4ba4a767
--- /dev/null
+++ b/apps/www/public/r/styles/default/button-with-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-with-icon",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-with-icon.tsx",
+      "content": "import { Mail } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button>\n      <Mail /> Login with Email\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/button.json b/apps/www/public/r/styles/default/button.json
index c18de3052c4..1f2df4e6c27 100644
--- a/apps/www/public/r/styles/default/button.json
+++ b/apps/www/public/r/styles/default/button.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "button",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/button.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/calendar-01.json b/apps/www/public/r/styles/default/calendar-01.json
new file mode 100644
index 00000000000..5055c73ceee
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-01.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-02.json b/apps/www/public/r/styles/default/calendar-02.json
new file mode 100644
index 00000000000..fe9bf781cea
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-02.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-03.json b/apps/www/public/r/styles/default/calendar-03.json
new file mode 100644
index 00000000000..722062cf86d
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-03.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-04.json b/apps/www/public/r/styles/default/calendar-04.json
new file mode 100644
index 00000000000..4a238ea4a39
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-04.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-05.json b/apps/www/public/r/styles/default/calendar-05.json
new file mode 100644
index 00000000000..70aecb22a7e
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-05.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-06.json b/apps/www/public/r/styles/default/calendar-06.json
new file mode 100644
index 00000000000..a6486cb573a
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-06.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-07.json b/apps/www/public/r/styles/default/calendar-07.json
new file mode 100644
index 00000000000..e8558053baa
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-07.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-08.json b/apps/www/public/r/styles/default/calendar-08.json
new file mode 100644
index 00000000000..c4f47ebea31
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-08.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-09.json b/apps/www/public/r/styles/default/calendar-09.json
new file mode 100644
index 00000000000..109eb92cbe2
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-09.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-10.json b/apps/www/public/r/styles/default/calendar-10.json
new file mode 100644
index 00000000000..1851e7ead5e
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-10.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader className=\"relative\">\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          className=\"absolute right-4 top-4\"\n          onClick={() => {\n            setMonth(new Date())\n            setDate(new Date())\n          }}\n        >\n          Today\n        </Button>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-11.json b/apps/www/public/r/styles/default/calendar-11.json
new file mode 100644
index 00000000000..5807637528f
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-11.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-12.json b/apps/www/public/r/styles/default/calendar-12.json
new file mode 100644
index 00000000000..4b4034cb7f2
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-12.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"relative border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <Select\n          value={locale}\n          onValueChange={(value) =>\n            setLocale(value as keyof typeof localizedStrings)\n          }\n        >\n          <SelectTrigger className=\"absolute right-4 top-4 w-[100px]\">\n            <SelectValue placeholder=\"Language\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\">\n            <SelectItem value=\"es\">Español</SelectItem>\n            <SelectItem value=\"en\">English</SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"pt-4\">\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-13.json b/apps/www/public/r/styles/default/calendar-13.json
new file mode 100644
index 00000000000..f772b672f48
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-13.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-14.json b/apps/www/public/r/styles/default/calendar-14.json
new file mode 100644
index 00000000000..132c490637d
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-14.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-15.json b/apps/www/public/r/styles/default/calendar-15.json
new file mode 100644
index 00000000000..aaf941d6472
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-15.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-16.json b/apps/www/public/r/styles/default/calendar-16.json
new file mode 100644
index 00000000000..19c92ec665e
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-16.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-17.json b/apps/www/public/r/styles/default/calendar-17.json
new file mode 100644
index 00000000000..9fee2d25b38
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-17.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:2.8rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-18.json b/apps/www/public/r/styles/default/calendar-18.json
new file mode 100644
index 00000000000..c9fa9d20c1d
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-18.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-19.json b/apps/www/public/r/styles/default/calendar-19.json
new file mode 100644
index 00000000000..197ccf33f73
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-19.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:2.375rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 pb-0 pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-20.json b/apps/www/public/r/styles/default/calendar-20.json
new file mode 100644
index 00000000000..280a23e319a
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-20.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute\n      .toString()\n      .padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t !py-5 px-6 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-21.json b/apps/www/public/r/styles/default/calendar-21.json
new file mode 100644
index 00000000000..e75290eea68
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-21.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/default/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-22.json b/apps/www/public/r/styles/default/calendar-22.json
new file mode 100644
index 00000000000..8a83ac97d94
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-22.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-23.json b/apps/www/public/r/styles/default/calendar-23.json
new file mode 100644
index 00000000000..a87121360e4
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-23.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-24.json b/apps/www/public/r/styles/default/calendar-24.json
new file mode 100644
index 00000000000..994c70a2119
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-24.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-25.json b/apps/www/public/r/styles/default/calendar-25.json
new file mode 100644
index 00000000000..7b7ccd9a1ec
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-25.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-26.json b/apps/www/public/r/styles/default/calendar-26.json
new file mode 100644
index 00000000000..c3a2ec7784e
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-26.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-27.json b/apps/www/public/r/styles/default/calendar-27.json
new file mode 100644
index 00000000000..be7ad4f5928
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-27.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--primary))\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"@md/card:grid relative flex flex-col border-b\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"absolute right-4 top-4\">\n              <CalendarIcon />\n              {range?.from && range?.to\n                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                : \"June 2025\"}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              className=\"w-full\"\n              mode=\"range\"\n              defaultMonth={range?.from}\n              selected={range}\n              onSelect={setRange}\n              disableNavigation\n              startMonth={range?.from}\n              fixedWeeks\n              showOutsideDays\n              disabled={{\n                after: new Date(2025, 5, 31),\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t pt-6\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-28.json b/apps/www/public/r/styles/default/calendar-28.json
new file mode 100644
index 00000000000..2d0bf94cc95
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-28.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-29.json b/apps/www/public/r/styles/default/calendar-29.json
new file mode 100644
index 00000000000..1d81663cdce
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-29.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-30.json b/apps/www/public/r/styles/default/calendar-30.json
new file mode 100644
index 00000000000..4297f6e8feb
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-30.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-31.json b/apps/www/public/r/styles/default/calendar-31.json
new file mode 100644
index 00000000000..34b2aecb5c9
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-31.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-6 w-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-32.json b/apps/www/public/r/styles/default/calendar-32.json
new file mode 100644
index 00000000000..f0a8ca3703a
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-32.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-demo.json b/apps/www/public/r/styles/default/calendar-demo.json
new file mode 100644
index 00000000000..7d9622e097d
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border\"\n    />\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar-form.json b/apps/www/public/r/styles/default/calendar-form.json
new file mode 100644
index 00000000000..adc13f16dac
--- /dev/null
+++ b/apps/www/public/r/styles/default/calendar-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/calendar.json b/apps/www/public/r/styles/default/calendar.json
index edbb6230612..e492d9aa27e 100644
--- a/apps/www/public/r/styles/default/calendar.json
+++ b/apps/www/public/r/styles/default/calendar.json
@@ -1,8 +1,10 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "calendar",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "react-day-picker@8.10.1",
+    "react-day-picker@latest",
     "date-fns"
   ],
   "registryDependencies": [
@@ -11,7 +13,7 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"bg-popover absolute inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-[--cell-size] select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-muted-foreground select-none text-[0.8rem]\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"bg-accent rounded-l-md\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"bg-accent rounded-r-md\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-[--cell-size] items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/card-demo.json b/apps/www/public/r/styles/default/card-demo.json
new file mode 100644
index 00000000000..ba8d828cda9
--- /dev/null
+++ b/apps/www/public/r/styles/default/card-demo.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "button",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "examples/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { 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 { Switch } from \"@/registry/default/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/card-with-form.json b/apps/www/public/r/styles/default/card-with-form.json
new file mode 100644
index 00000000000..1a468d3c1aa
--- /dev/null
+++ b/apps/www/public/r/styles/default/card-with-form.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-with-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/card-with-form.tsx",
+      "content": "import * as React from \"react\"\n\nimport { 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\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function CardWithForm() {\n  return (\n    <Card className=\"w-[350px]\">\n      <CardHeader>\n        <CardTitle>Create project</CardTitle>\n        <CardDescription>Deploy your new project in one-click.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <div className=\"grid w-full items-center gap-4\">\n            <div className=\"flex flex-col space-y-1.5\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" placeholder=\"Name of your project\" />\n            </div>\n            <div className=\"flex flex-col space-y-1.5\">\n              <Label htmlFor=\"framework\">Framework</Label>\n              <Select>\n                <SelectTrigger id=\"framework\">\n                  <SelectValue placeholder=\"Select\" />\n                </SelectTrigger>\n                <SelectContent position=\"popper\">\n                  <SelectItem value=\"next\">Next.js</SelectItem>\n                  <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                  <SelectItem value=\"astro\">Astro</SelectItem>\n                  <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex justify-between\">\n        <Button variant=\"outline\">Cancel</Button>\n        <Button>Deploy</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/card.json b/apps/www/public/r/styles/default/card.json
index 8cdcab2ddf5..614194e24a6 100644
--- a/apps/www/public/r/styles/default/card.json
+++ b/apps/www/public/r/styles/default/card.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "card",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/carousel-api.json b/apps/www/public/r/styles/default/carousel-api.json
new file mode 100644
index 00000000000..6f7478939cf
--- /dev/null
+++ b/apps/www/public/r/styles/default/carousel-api.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-api",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-api.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) {\n      return\n    }\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap() + 1)\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1)\n    })\n  }, [api])\n\n  return (\n    <div className=\"mx-auto max-w-xs\">\n      <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious />\n        <CarouselNext />\n      </Carousel>\n      <div className=\"py-2 text-center text-sm text-muted-foreground\">\n        Slide {current} of {count}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/carousel-demo.json b/apps/www/public/r/styles/default/carousel-demo.json
new file mode 100644
index 00000000000..98b713af0c5
--- /dev/null
+++ b/apps/www/public/r/styles/default/carousel-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/carousel-orientation.json b/apps/www/public/r/styles/default/carousel-orientation.json
new file mode 100644
index 00000000000..efe1c8c8f87
--- /dev/null
+++ b/apps/www/public/r/styles/default/carousel-orientation.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-orientation",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselOrientation() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      orientation=\"vertical\"\n      className=\"w-full max-w-xs\"\n    >\n      <CarouselContent className=\"-mt-1 h-[200px]\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/carousel-plugin.json b/apps/www/public/r/styles/default/carousel-plugin.json
new file mode 100644
index 00000000000..43f8ce795e4
--- /dev/null
+++ b/apps/www/public/r/styles/default/carousel-plugin.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-plugin",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-plugin.tsx",
+      "content": "import * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselPlugin() {\n  const plugin = React.useRef(\n    Autoplay({ delay: 2000, stopOnInteraction: true })\n  )\n\n  return (\n    <Carousel\n      plugins={[plugin.current]}\n      className=\"w-full max-w-xs\"\n      onMouseEnter={plugin.current.stop}\n      onMouseLeave={plugin.current.reset}\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/carousel-size.json b/apps/www/public/r/styles/default/carousel-size.json
new file mode 100644
index 00000000000..b006b78c097
--- /dev/null
+++ b/apps/www/public/r/styles/default/carousel-size.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-size",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-size.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselSize() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      className=\"w-full max-w-sm\"\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/carousel-spacing.json b/apps/www/public/r/styles/default/carousel-spacing.json
new file mode 100644
index 00000000000..1287dcd4029
--- /dev/null
+++ b/apps/www/public/r/styles/default/carousel-spacing.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-spacing",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-spacing.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselSpacing() {\n  return (\n    <Carousel className=\"w-full max-w-sm\">\n      <CarouselContent className=\"-ml-1\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/carousel.json b/apps/www/public/r/styles/default/carousel.json
index d6fd613fc16..b98a95cc334 100644
--- a/apps/www/public/r/styles/default/carousel.json
+++ b/apps/www/public/r/styles/default/carousel.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "carousel",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "embla-carousel-react"
   ],
diff --git a/apps/www/public/r/styles/default/chart-area-axes.json b/apps/www/public/r/styles/default/chart-area-axes.json
index 42c2e0b7a71..85179b8a27d 100644
--- a/apps/www/public/r/styles/default/chart-area-axes.json
+++ b/apps/www/public/r/styles/default/chart-area-axes.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-axes",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-axes.tsx",
+      "path": "charts/chart-area-axes.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Axes</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -20,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={3}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-area-default.json b/apps/www/public/r/styles/default/chart-area-default.json
index 8535d47671a..cf4571ccb11 100644
--- a/apps/www/public/r/styles/default/chart-area-default.json
+++ b/apps/www/public/r/styles/default/chart-area-default.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-default",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-default.tsx",
+      "path": "charts/chart-area-default.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-area-gradient.json b/apps/www/public/r/styles/default/chart-area-gradient.json
index 2f016098c1a..e6b79ca9898 100644
--- a/apps/www/public/r/styles/default/chart-area-gradient.json
+++ b/apps/www/public/r/styles/default/chart-area-gradient.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-gradient",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-gradient.tsx",
+      "path": "charts/chart-area-gradient.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Gradient</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-area-icons.json b/apps/www/public/r/styles/default/chart-area-icons.json
index 90474e03683..887d10e645f 100644
--- a/apps/www/public/r/styles/default/chart-area-icons.json
+++ b/apps/www/public/r/styles/default/chart-area-icons.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-icons",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-icons.tsx",
+      "path": "charts/chart-area-icons.tsx",
       "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: TrendingDown,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: TrendingUp,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-area-interactive.json b/apps/www/public/r/styles/default/chart-area-interactive.json
index fff9020a26d..373a7cf5d72 100644
--- a/apps/www/public/r/styles/default/chart-area-interactive.json
+++ b/apps/www/public/r/styles/default/chart-area-interactive.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-interactive",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart",
@@ -8,9 +10,14 @@
   ],
   "files": [
     {
-      "path": "block/chart-area-interactive.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const now = new Date()\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    now.setDate(now.getDate() - daysToSubtract)\n    return date >= now\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n        <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n          <CardTitle>Area Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <Select value={timeRange} onValueChange={setTimeRange}>\n          <SelectTrigger\n            className=\"w-[160px] rounded-lg sm:ml-auto\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Last 3 months\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90d\" className=\"rounded-lg\">\n              Last 3 months\n            </SelectItem>\n            <SelectItem value=\"30d\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7d\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
+      "path": "charts/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n        <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n          <CardTitle>Area Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <Select value={timeRange} onValueChange={setTimeRange}>\n          <SelectTrigger\n            className=\"w-[160px] rounded-lg sm:ml-auto\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Last 3 months\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90d\" className=\"rounded-lg\">\n              Last 3 months\n            </SelectItem>\n            <SelectItem value=\"30d\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7d\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-area-legend.json b/apps/www/public/r/styles/default/chart-area-legend.json
index 8b20dea57ba..7c863893cc4 100644
--- a/apps/www/public/r/styles/default/chart-area-legend.json
+++ b/apps/www/public/r/styles/default/chart-area-legend.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-legend",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-legend.tsx",
+      "path": "charts/chart-area-legend.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-area-linear.json b/apps/www/public/r/styles/default/chart-area-linear.json
index 69ef62e01d3..cd3572fbbb0 100644
--- a/apps/www/public/r/styles/default/chart-area-linear.json
+++ b/apps/www/public/r/styles/default/chart-area-linear.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-linear",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-linear.tsx",
+      "path": "charts/chart-area-linear.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Linear</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"linear\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-area-stacked-expand.json b/apps/www/public/r/styles/default/chart-area-stacked-expand.json
index 63846d6d973..ca7759f8f74 100644
--- a/apps/www/public/r/styles/default/chart-area-stacked-expand.json
+++ b/apps/www/public/r/styles/default/chart-area-stacked-expand.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-stacked-expand",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked-expand.tsx",
+      "path": "charts/chart-area-stacked-expand.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n  { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n  { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n  { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n  { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n  { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-3))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n              top: 12,\n            }}\n            stackOffset=\"expand\"\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"other\"\n              type=\"natural\"\n              fill=\"var(--color-other)\"\n              fillOpacity={0.1}\n              stroke=\"var(--color-other)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-area-stacked.json b/apps/www/public/r/styles/default/chart-area-stacked.json
index 2546a62383d..03c4b4a49ac 100644
--- a/apps/www/public/r/styles/default/chart-area-stacked.json
+++ b/apps/www/public/r/styles/default/chart-area-stacked.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-stacked",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked.tsx",
+      "path": "charts/chart-area-stacked.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-area-step.json b/apps/www/public/r/styles/default/chart-area-step.json
index 36794b3c74b..f3f7669fee5 100644
--- a/apps/www/public/r/styles/default/chart-area-step.json
+++ b/apps/www/public/r/styles/default/chart-area-step.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-step",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-step.tsx",
+      "path": "charts/chart-area-step.tsx",
       "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Activity,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Step</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"step\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-active.json b/apps/www/public/r/styles/default/chart-bar-active.json
index a5289debd0a..ec620c182d3 100644
--- a/apps/www/public/r/styles/default/chart-bar-active.json
+++ b/apps/www/public/r/styles/default/chart-bar-active.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-active",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-active.tsx",
+      "path": "charts/chart-bar-active.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              activeIndex={2}\n              activeBar={({ ...props }) => {\n                return (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                )\n              }}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-default.json b/apps/www/public/r/styles/default/chart-bar-default.json
index 5399c47dd60..210fe173873 100644
--- a/apps/www/public/r/styles/default/chart-bar-default.json
+++ b/apps/www/public/r/styles/default/chart-bar-default.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-default",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-default.tsx",
+      "path": "charts/chart-bar-default.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-demo-axis.json b/apps/www/public/r/styles/default/chart-bar-demo-axis.json
new file mode 100644
index 00000000000..6add2c70a11
--- /dev/null
+++ b/apps/www/public/r/styles/default/chart-bar-demo-axis.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-axis",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-axis.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-demo-grid.json b/apps/www/public/r/styles/default/chart-bar-demo-grid.json
new file mode 100644
index 00000000000..368bb078db6
--- /dev/null
+++ b/apps/www/public/r/styles/default/chart-bar-demo-grid.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-grid",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-grid.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-demo-legend.json b/apps/www/public/r/styles/default/chart-bar-demo-legend.json
new file mode 100644
index 00000000000..a7853f4dbed
--- /dev/null
+++ b/apps/www/public/r/styles/default/chart-bar-demo-legend.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-legend",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-legend.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <ChartLegend content={<ChartLegendContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-demo-tooltip.json b/apps/www/public/r/styles/default/chart-bar-demo-tooltip.json
new file mode 100644
index 00000000000..9e3b84fe5bb
--- /dev/null
+++ b/apps/www/public/r/styles/default/chart-bar-demo-tooltip.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-tooltip",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-tooltip.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-demo.json b/apps/www/public/r/styles/default/chart-bar-demo.json
new file mode 100644
index 00000000000..874bc171a73
--- /dev/null
+++ b/apps/www/public/r/styles/default/chart-bar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-horizontal.json b/apps/www/public/r/styles/default/chart-bar-horizontal.json
index 448edb595b3..3007640c409 100644
--- a/apps/www/public/r/styles/default/chart-bar-horizontal.json
+++ b/apps/www/public/r/styles/default/chart-bar-horizontal.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-horizontal",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-horizontal.tsx",
+      "path": "charts/chart-bar-horizontal.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Horizontal</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: -20,\n            }}\n          >\n            <XAxis type=\"number\" dataKey=\"desktop\" hide />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-interactive.json b/apps/www/public/r/styles/default/chart-bar-interactive.json
index 18f80222e03..3e648258779 100644
--- a/apps/www/public/r/styles/default/chart-bar-interactive.json
+++ b/apps/www/public/r/styles/default/chart-bar-interactive.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-interactive",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-interactive.tsx",
+      "path": "charts/chart-bar-interactive.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Bar Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-label-custom.json b/apps/www/public/r/styles/default/chart-bar-label-custom.json
index c7b46ce8e8e..bfe8f9f7f60 100644
--- a/apps/www/public/r/styles/default/chart-bar-label-custom.json
+++ b/apps/www/public/r/styles/default/chart-bar-label-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-label-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label-custom.tsx",
+      "path": "charts/chart-bar-label-custom.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  label: {\n    color: \"hsl(var(--background))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              right: 16,\n            }}\n          >\n            <CartesianGrid horizontal={false} />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n              hide\n            />\n            <XAxis dataKey=\"desktop\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Bar\n              dataKey=\"desktop\"\n              layout=\"vertical\"\n              fill=\"var(--color-desktop)\"\n              radius={4}\n            >\n              <LabelList\n                dataKey=\"month\"\n                position=\"insideLeft\"\n                offset={8}\n                className=\"fill-[--color-label]\"\n                fontSize={12}\n              />\n              <LabelList\n                dataKey=\"desktop\"\n                position=\"right\"\n                offset={8}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-label.json b/apps/www/public/r/styles/default/chart-bar-label.json
index 99981416ecf..dee2deb3447 100644
--- a/apps/www/public/r/styles/default/chart-bar-label.json
+++ b/apps/www/public/r/styles/default/chart-bar-label.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-label",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label.tsx",
+      "path": "charts/chart-bar-label.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-mixed.json b/apps/www/public/r/styles/default/chart-bar-mixed.json
index f6e9ee2a643..566289d744d 100644
--- a/apps/www/public/r/styles/default/chart-bar-mixed.json
+++ b/apps/www/public/r/styles/default/chart-bar-mixed.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-mixed",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-mixed.tsx",
+      "path": "charts/chart-bar-mixed.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Mixed</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: 0,\n            }}\n          >\n            <YAxis\n              dataKey=\"browser\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <XAxis dataKey=\"visitors\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-multiple.json b/apps/www/public/r/styles/default/chart-bar-multiple.json
index 647d04fc346..807fe6dd0d3 100644
--- a/apps/www/public/r/styles/default/chart-bar-multiple.json
+++ b/apps/www/public/r/styles/default/chart-bar-multiple.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-multiple",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-multiple.tsx",
+      "path": "charts/chart-bar-multiple.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dashed\" />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n            <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-negative.json b/apps/www/public/r/styles/default/chart-bar-negative.json
index b64c5ce3d0c..cfd11cb0038 100644
--- a/apps/www/public/r/styles/default/chart-bar-negative.json
+++ b/apps/www/public/r/styles/default/chart-bar-negative.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-negative",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-negative.tsx",
+      "path": "charts/chart-bar-negative.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 205 },\n  { month: \"March\", visitors: -207 },\n  { month: \"April\", visitors: 173 },\n  { month: \"May\", visitors: -209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Negative</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel hideIndicator />}\n            />\n            <Bar dataKey=\"visitors\">\n              <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n              {chartData.map((item) => (\n                <Cell\n                  key={item.month}\n                  fill={\n                    item.visitors > 0\n                      ? \"hsl(var(--chart-1))\"\n                      : \"hsl(var(--chart-2))\"\n                  }\n                />\n              ))}\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-stacked.json b/apps/www/public/r/styles/default/chart-bar-stacked.json
index d48e1be908f..d4cc7b9b606 100644
--- a/apps/www/public/r/styles/default/chart-bar-stacked.json
+++ b/apps/www/public/r/styles/default/chart-bar-stacked.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-stacked",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-stacked.tsx",
+      "path": "charts/chart-bar-stacked.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            <Bar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              fill=\"var(--color-desktop)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"mobile\"\n              stackId=\"a\"\n              fill=\"var(--color-mobile)\"\n              radius={[4, 4, 0, 0]}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-line-default.json b/apps/www/public/r/styles/default/chart-line-default.json
index 6bc6157e3c1..703b63e7d89 100644
--- a/apps/www/public/r/styles/default/chart-line-default.json
+++ b/apps/www/public/r/styles/default/chart-line-default.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-default",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-default.tsx",
+      "path": "charts/chart-line-default.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-line-dots-colors.json b/apps/www/public/r/styles/default/chart-line-dots-colors.json
index 2d7df7724ab..4790face28b 100644
--- a/apps/www/public/r/styles/default/chart-line-dots-colors.json
+++ b/apps/www/public/r/styles/default/chart-line-dots-colors.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-dots-colors",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-colors.tsx",
+      "path": "charts/chart-line-dots-colors.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots Colors</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={({ payload, ...props }) => {\n                return (\n                  <Dot\n                    key={payload.browser}\n                    r={5}\n                    cx={props.cx}\n                    cy={props.cy}\n                    fill={payload.fill}\n                    stroke={payload.fill}\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-line-dots-custom.json b/apps/www/public/r/styles/default/chart-line-dots-custom.json
index 3625752591e..64e9be72505 100644
--- a/apps/www/public/r/styles/default/chart-line-dots-custom.json
+++ b/apps/www/public/r/styles/default/chart-line-dots-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-dots-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-custom.tsx",
+      "path": "charts/chart-line-dots-custom.tsx",
       "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={({ cx, cy, payload }) => {\n                const r = 24\n                return (\n                  <GitCommitVertical\n                    key={payload.month}\n                    x={cx - r / 2}\n                    y={cy - r / 2}\n                    width={r}\n                    height={r}\n                    fill=\"hsl(var(--background))\"\n                    stroke=\"var(--color-desktop)\"\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-line-dots.json b/apps/www/public/r/styles/default/chart-line-dots.json
index e544319b95d..8e29e33b22f 100644
--- a/apps/www/public/r/styles/default/chart-line-dots.json
+++ b/apps/www/public/r/styles/default/chart-line-dots.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-dots",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots.tsx",
+      "path": "charts/chart-line-dots.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-line-interactive.json b/apps/www/public/r/styles/default/chart-line-interactive.json
index c16ec4704eb..61d55391622 100644
--- a/apps/www/public/r/styles/default/chart-line-interactive.json
+++ b/apps/www/public/r/styles/default/chart-line-interactive.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-interactive",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-interactive.tsx",
+      "path": "charts/chart-line-interactive.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Line Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Line\n              dataKey={activeChart}\n              type=\"monotone\"\n              stroke={`var(--color-${activeChart})`}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-line-label-custom.json b/apps/www/public/r/styles/default/chart-line-label-custom.json
index c0e21b612f1..8ba3b1a2d5d 100644
--- a/apps/www/public/r/styles/default/chart-line-label-custom.json
+++ b/apps/www/public/r/styles/default/chart-line-label-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-label-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label-custom.tsx",
+      "path": "charts/chart-line-label-custom.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-visitors)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n                dataKey=\"browser\"\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-line-label.json b/apps/www/public/r/styles/default/chart-line-label.json
index 6a9632281a5..f4bbfc668cf 100644
--- a/apps/www/public/r/styles/default/chart-line-label.json
+++ b/apps/www/public/r/styles/default/chart-line-label.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-label",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label.tsx",
+      "path": "charts/chart-line-label.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-line-linear.json b/apps/www/public/r/styles/default/chart-line-linear.json
index 8d4272aaa29..c43167f8c86 100644
--- a/apps/www/public/r/styles/default/chart-line-linear.json
+++ b/apps/www/public/r/styles/default/chart-line-linear.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-linear",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-linear.tsx",
+      "path": "charts/chart-line-linear.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Linear</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"linear\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-line-multiple.json b/apps/www/public/r/styles/default/chart-line-multiple.json
index b3d222d1ea8..495b9bc9983 100644
--- a/apps/www/public/r/styles/default/chart-line-multiple.json
+++ b/apps/www/public/r/styles/default/chart-line-multiple.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-multiple",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-multiple.tsx",
+      "path": "charts/chart-line-multiple.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Line\n              dataKey=\"desktop\"\n              type=\"monotone\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n            <Line\n              dataKey=\"mobile\"\n              type=\"monotone\"\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-line-step.json b/apps/www/public/r/styles/default/chart-line-step.json
index d9f506fef3c..7f5b9b0771c 100644
--- a/apps/www/public/r/styles/default/chart-line-step.json
+++ b/apps/www/public/r/styles/default/chart-line-step.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-step",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-step.tsx",
+      "path": "charts/chart-line-step.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Step</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"step\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-donut-active.json b/apps/www/public/r/styles/default/chart-pie-donut-active.json
index b6011078bcc..1b4fd6de76c 100644
--- a/apps/www/public/r/styles/default/chart-pie-donut-active.json
+++ b/apps/www/public/r/styles/default/chart-pie-donut-active.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-donut-active",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-active.tsx",
+      "path": "charts/chart-pie-donut-active.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={0}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <Sector {...props} outerRadius={outerRadius + 10} />\n              )}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-donut-text.json b/apps/www/public/r/styles/default/chart-pie-donut-text.json
index 16933522160..ce74312b0b5 100644
--- a/apps/www/public/r/styles/default/chart-pie-donut-text.json
+++ b/apps/www/public/r/styles/default/chart-pie-donut-text.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-donut-text",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-text.tsx",
+      "path": "charts/chart-pie-donut-text.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = React.useMemo(() => {\n    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut with Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-donut.json b/apps/www/public/r/styles/default/chart-pie-donut.json
index d620e084068..1c579a18bc6 100644
--- a/apps/www/public/r/styles/default/chart-pie-donut.json
+++ b/apps/www/public/r/styles/default/chart-pie-donut.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-donut",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut.tsx",
+      "path": "charts/chart-pie-donut.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-interactive.json b/apps/www/public/r/styles/default/chart-pie-interactive.json
index e22791c4d90..b8896a0321d 100644
--- a/apps/www/public/r/styles/default/chart-pie-interactive.json
+++ b/apps/www/public/r/styles/default/chart-pie-interactive.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-interactive",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-interactive.tsx",
+      "path": "charts/chart-pie-interactive.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const id = \"pie-interactive\"\n  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n  const activeIndex = React.useMemo(\n    () => desktopData.findIndex((item) => item.month === activeMonth),\n    [activeMonth]\n  )\n  const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n  return (\n    <Card data-chart={id} className=\"flex flex-col\">\n      <ChartStyle id={id} config={chartConfig} />\n      <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n        <div className=\"grid gap-1\">\n          <CardTitle>Pie Chart - Interactive</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </div>\n        <Select value={activeMonth} onValueChange={setActiveMonth}>\n          <SelectTrigger\n            className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\" className=\"rounded-xl\">\n            {months.map((key) => {\n              const config = chartConfig[key as keyof typeof chartConfig]\n\n              if (!config) {\n                return null\n              }\n\n              return (\n                <SelectItem\n                  key={key}\n                  value={key}\n                  className=\"rounded-lg [&_span]:flex\"\n                >\n                  <div className=\"flex items-center gap-2 text-xs\">\n                    <span\n                      className=\"flex h-3 w-3 shrink-0 rounded-sm\"\n                      style={{\n                        backgroundColor: `var(--color-${key})`,\n                      }}\n                    />\n                    {config?.label}\n                  </div>\n                </SelectItem>\n              )\n            })}\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 justify-center pb-0\">\n        <ChartContainer\n          id={id}\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[300px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={desktopData}\n              dataKey=\"desktop\"\n              nameKey=\"month\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={activeIndex}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <g>\n                  <Sector {...props} outerRadius={outerRadius + 10} />\n                  <Sector\n                    {...props}\n                    outerRadius={outerRadius + 25}\n                    innerRadius={outerRadius + 12}\n                  />\n                </g>\n              )}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {desktopData[activeIndex].desktop.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-label-custom.json b/apps/www/public/r/styles/default/chart-pie-label-custom.json
index d4e0f6d392a..99625f9259d 100644
--- a/apps/www/public/r/styles/default/chart-pie-label-custom.json
+++ b/apps/www/public/r/styles/default/chart-pie-label-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-label-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label-custom.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {`${\n                      chartConfig[payload.browser as keyof typeof chartConfig]\n                        ?.label\n                    } (${payload.visitors})`}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "path": "charts/chart-pie-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] px-0\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {payload.visitors}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-label-list.json b/apps/www/public/r/styles/default/chart-pie-label-list.json
index 429f01a4eda..6581bc115c7 100644
--- a/apps/www/public/r/styles/default/chart-pie-label-list.json
+++ b/apps/www/public/r/styles/default/chart-pie-label-list.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-label-list",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label-list.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label List</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\">\n              <LabelList\n                dataKey=\"browser\"\n                className=\"fill-background\"\n                stroke=\"none\"\n                fontSize={12}\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "path": "charts/chart-pie-label-list.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label List</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\">\n              <LabelList\n                dataKey=\"browser\"\n                className=\"fill-background\"\n                stroke=\"none\"\n                fontSize={12}\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-label.json b/apps/www/public/r/styles/default/chart-pie-label.json
index 08b2fa3dbdc..384cd2b15d7 100644
--- a/apps/www/public/r/styles/default/chart-pie-label.json
+++ b/apps/www/public/r/styles/default/chart-pie-label.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-label",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label.tsx",
+      "path": "charts/chart-pie-label.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n        >\n          <PieChart>\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-legend.json b/apps/www/public/r/styles/default/chart-pie-legend.json
index ee41a87f7e9..ba6265945c6 100644
--- a/apps/www/public/r/styles/default/chart-pie-legend.json
+++ b/apps/www/public/r/styles/default/chart-pie-legend.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-legend",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-legend.tsx",
+      "path": "charts/chart-pie-legend.tsx",
       "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[300px]\"\n        >\n          <PieChart>\n            <Pie data={chartData} dataKey=\"visitors\" />\n            <ChartLegend\n              content={<ChartLegendContent nameKey=\"browser\" />}\n              className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-separator-none.json b/apps/www/public/r/styles/default/chart-pie-separator-none.json
index b2dc02c0dfc..a0b1109068f 100644
--- a/apps/www/public/r/styles/default/chart-pie-separator-none.json
+++ b/apps/www/public/r/styles/default/chart-pie-separator-none.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-separator-none",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-separator-none.tsx",
+      "path": "charts/chart-pie-separator-none.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Separator None</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              stroke=\"0\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-simple.json b/apps/www/public/r/styles/default/chart-pie-simple.json
index 20099f314fe..d95001a6440 100644
--- a/apps/www/public/r/styles/default/chart-pie-simple.json
+++ b/apps/www/public/r/styles/default/chart-pie-simple.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-simple",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-simple.tsx",
+      "path": "charts/chart-pie-simple.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-stacked.json b/apps/www/public/r/styles/default/chart-pie-stacked.json
index a8d9869e07e..8c088e244d6 100644
--- a/apps/www/public/r/styles/default/chart-pie-stacked.json
+++ b/apps/www/public/r/styles/default/chart-pie-stacked.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-stacked",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-stacked.tsx",
+      "path": "charts/chart-pie-stacked.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n  { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n  { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n  { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n  { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n  { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelKey=\"visitors\"\n                  nameKey=\"month\"\n                  indicator=\"line\"\n                  labelFormatter={(_, payload) => {\n                    return chartConfig[\n                      payload?.[0].dataKey as keyof typeof chartConfig\n                    ].label\n                  }}\n                />\n              }\n            />\n            <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n            <Pie\n              data={mobileData}\n              dataKey=\"mobile\"\n              innerRadius={70}\n              outerRadius={90}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-default.json b/apps/www/public/r/styles/default/chart-radar-default.json
index 24ed92b5475..ac0f427b4b5 100644
--- a/apps/www/public/r/styles/default/chart-radar-default.json
+++ b/apps/www/public/r/styles/default/chart-radar-default.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-default",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-default.tsx",
+      "path": "charts/chart-radar-default.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-dots.json b/apps/www/public/r/styles/default/chart-radar-dots.json
index be6a841b120..8730564bd48 100644
--- a/apps/www/public/r/styles/default/chart-radar-dots.json
+++ b/apps/www/public/r/styles/default/chart-radar-dots.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-dots",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-dots.tsx",
+      "path": "charts/chart-radar-dots.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Dots</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-grid-circle-fill.json b/apps/www/public/r/styles/default/chart-radar-grid-circle-fill.json
index 5690ae66e92..6a3a5d08eaa 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-circle-fill.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-circle-fill.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-circle-fill",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-fill.tsx",
+      "path": "charts/chart-radar-grid-circle-fill.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarGrid\n              className=\"fill-[--color-desktop] opacity-20\"\n              gridType=\"circle\"\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-grid-circle-no-lines.json b/apps/www/public/r/styles/default/chart-radar-grid-circle-no-lines.json
index 30fc169cee3..e8da03e0ab2 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-circle-no-lines.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-circle-no-lines.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-circle-no-lines",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-no-lines.tsx",
+      "path": "charts/chart-radar-grid-circle-no-lines.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" radialLines={false} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-grid-circle.json b/apps/www/public/r/styles/default/chart-radar-grid-circle.json
index 536f652cbe1..5d1f2358b3a 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-circle.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-circle.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-circle",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle.tsx",
+      "path": "charts/chart-radar-grid-circle.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-grid-custom.json b/apps/www/public/r/styles/default/chart-radar-grid-custom.json
index ce5acf98d0f..d99c9a4e3c7 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-custom.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-custom.tsx",
+      "path": "charts/chart-radar-grid-custom.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Custom</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-grid-fill.json b/apps/www/public/r/styles/default/chart-radar-grid-fill.json
index 14032a76258..f5a0a98f36c 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-fill.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-fill.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-fill",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-fill.tsx",
+      "path": "charts/chart-radar-grid-fill.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-grid-none.json b/apps/www/public/r/styles/default/chart-radar-grid-none.json
index 344e11c1df7..7df63595546 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-none.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-none.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-none",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-none.tsx",
+      "path": "charts/chart-radar-grid-none.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid None</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-icons.json b/apps/www/public/r/styles/default/chart-radar-icons.json
index 44dac93ccab..b34dcf1e49c 100644
--- a/apps/www/public/r/styles/default/chart-radar-icons.json
+++ b/apps/www/public/r/styles/default/chart-radar-icons.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-icons",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-icons.tsx",
+      "path": "charts/chart-radar-icons.tsx",
       "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: ArrowDownFromLine,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: ArrowUpFromLine,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-label-custom.json b/apps/www/public/r/styles/default/chart-radar-label-custom.json
index 43a6a40e06d..07b3ab6b30b 100644
--- a/apps/www/public/r/styles/default/chart-radar-label-custom.json
+++ b/apps/www/public/r/styles/default/chart-radar-label-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-label-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-label-custom.tsx",
+      "path": "charts/chart-radar-label-custom.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Custom Label</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: 10,\n              right: 10,\n              bottom: 10,\n              left: 10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis\n              dataKey=\"month\"\n              tick={({ x, y, textAnchor, value, index, ...props }) => {\n                const data = chartData[index]\n\n                return (\n                  <text\n                    x={x}\n                    y={index === 0 ? y - 10 : y}\n                    textAnchor={textAnchor}\n                    fontSize={13}\n                    fontWeight={500}\n                    {...props}\n                  >\n                    <tspan>{data.desktop}</tspan>\n                    <tspan className=\"fill-muted-foreground\">/</tspan>\n                    <tspan>{data.mobile}</tspan>\n                    <tspan\n                      x={x}\n                      dy={\"1rem\"}\n                      fontSize={12}\n                      className=\"fill-muted-foreground\"\n                    >\n                      {data.month}\n                    </tspan>\n                  </text>\n                )\n              }}\n            />\n\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-legend.json b/apps/www/public/r/styles/default/chart-radar-legend.json
index d4769b14ea3..e16aae47173 100644
--- a/apps/www/public/r/styles/default/chart-radar-legend.json
+++ b/apps/www/public/r/styles/default/chart-radar-legend.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-legend",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-legend.tsx",
+      "path": "charts/chart-radar-legend.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-lines-only.json b/apps/www/public/r/styles/default/chart-radar-lines-only.json
index 7c619ec9c2e..c516ae33415 100644
--- a/apps/www/public/r/styles/default/chart-radar-lines-only.json
+++ b/apps/www/public/r/styles/default/chart-radar-lines-only.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-lines-only",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-lines-only.tsx",
+      "path": "charts/chart-radar-lines-only.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 160 },\n  { month: \"February\", desktop: 185, mobile: 170 },\n  { month: \"March\", desktop: 207, mobile: 180 },\n  { month: \"April\", desktop: 173, mobile: 160 },\n  { month: \"May\", desktop: 160, mobile: 190 },\n  { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Lines Only</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid radialLines={false} />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0}\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n            />\n            <Radar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0}\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-multiple.json b/apps/www/public/r/styles/default/chart-radar-multiple.json
index 2b77ea6f74a..cf239dfdd9d 100644
--- a/apps/www/public/r/styles/default/chart-radar-multiple.json
+++ b/apps/www/public/r/styles/default/chart-radar-multiple.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-multiple",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-multiple.tsx",
+      "path": "charts/chart-radar-multiple.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Multiple</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radar-radius.json b/apps/www/public/r/styles/default/chart-radar-radius.json
index 86d1e84c61f..308b34b2f98 100644
--- a/apps/www/public/r/styles/default/chart-radar-radius.json
+++ b/apps/www/public/r/styles/default/chart-radar-radius.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-radius",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-radius.tsx",
+      "path": "charts/chart-radar-radius.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"hsla(var(--foreground))\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radial-grid.json b/apps/www/public/r/styles/default/chart-radial-grid.json
index e12c8390309..fdc8877c8fd 100644
--- a/apps/www/public/r/styles/default/chart-radial-grid.json
+++ b/apps/www/public/r/styles/default/chart-radial-grid.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-grid",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-grid.tsx",
+      "path": "charts/chart-radial-grid.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Grid</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <RadialBar dataKey=\"visitors\" />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radial-label.json b/apps/www/public/r/styles/default/chart-radial-label.json
index 86242ce62a7..db19930aa1e 100644
--- a/apps/www/public/r/styles/default/chart-radial-label.json
+++ b/apps/www/public/r/styles/default/chart-radial-label.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-label",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-label.tsx",
+      "path": "charts/chart-radial-label.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={-90}\n            endAngle={380}\n            innerRadius={30}\n            outerRadius={110}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background>\n              <LabelList\n                position=\"insideStart\"\n                dataKey=\"browser\"\n                className=\"fill-white capitalize mix-blend-luminosity\"\n                fontSize={11}\n              />\n            </RadialBar>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radial-shape.json b/apps/www/public/r/styles/default/chart-radial-shape.json
index 431807bb9c7..68e76df2201 100644
--- a/apps/www/public/r/styles/default/chart-radial-shape.json
+++ b/apps/www/public/r/styles/default/chart-radial-shape.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-shape",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-shape.tsx",
+      "path": "charts/chart-radial-shape.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Shape</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={100}\n            innerRadius={80}\n            outerRadius={140}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radial-simple.json b/apps/www/public/r/styles/default/chart-radial-simple.json
index 3352a4bfca2..876e0bef149 100644
--- a/apps/www/public/r/styles/default/chart-radial-simple.json
+++ b/apps/www/public/r/styles/default/chart-radial-simple.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-simple",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-simple.tsx",
+      "path": "charts/chart-radial-simple.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radial-stacked.json b/apps/www/public/r/styles/default/chart-radial-stacked.json
index 38a42847df5..0855824bc66 100644
--- a/apps/www/public/r/styles/default/chart-radial-stacked.json
+++ b/apps/www/public/r/styles/default/chart-radial-stacked.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-stacked",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-stacked.tsx",
+      "path": "charts/chart-radial-stacked.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 items-center pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={180}\n            innerRadius={80}\n            outerRadius={130}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) - 16}\n                          className=\"fill-foreground text-2xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 4}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n            <RadialBar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              cornerRadius={5}\n              fill=\"var(--color-desktop)\"\n              className=\"stroke-transparent stroke-2\"\n            />\n            <RadialBar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              stackId=\"a\"\n              cornerRadius={5}\n              className=\"stroke-transparent stroke-2\"\n            />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-radial-text.json b/apps/www/public/r/styles/default/chart-radial-text.json
index ca57e0ddd8e..7b4f9e76a12 100644
--- a/apps/www/public/r/styles/default/chart-radial-text.json
+++ b/apps/www/public/r/styles/default/chart-radial-text.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-text",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-text.tsx",
+      "path": "charts/chart-radial-text.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={0}\n            endAngle={250}\n            innerRadius={80}\n            outerRadius={110}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-tooltip-advanced.json b/apps/www/public/r/styles/default/chart-tooltip-advanced.json
index a6e616dd36d..2fd7550c17d 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-advanced.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-advanced.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-advanced",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-advanced.tsx",
+      "path": "charts/chart-tooltip-advanced.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Advanced</CardTitle>\n        <CardDescription>\n          Tooltip with custom formatter and total.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  className=\"w-[180px]\"\n                  formatter={(value, name, item, index) => (\n                    <>\n                      <div\n                        className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                        style={\n                          {\n                            \"--color-bg\": `var(--color-${name})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                      {/* Add this after the last item */}\n                      {index === 1 && (\n                        <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n                          Total\n                          <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                            {item.payload.running + item.payload.swimming}\n                            <span className=\"font-normal text-muted-foreground\">\n                              kcal\n                            </span>\n                          </div>\n                        </div>\n                      )}\n                    </>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-tooltip-default.json b/apps/www/public/r/styles/default/chart-tooltip-default.json
index 18166e9775a..72f48f539b5 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-default.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-default.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-default",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-default.tsx",
+      "path": "charts/chart-tooltip-default.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Default</CardTitle>\n        <CardDescription>\n          Default tooltip with ChartTooltipContent.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-tooltip-demo.json b/apps/www/public/r/styles/default/chart-tooltip-demo.json
new file mode 100644
index 00000000000..7acfa77afcb
--- /dev/null
+++ b/apps/www/public/r/styles/default/chart-tooltip-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-tooltip-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute left-[-35px] top-[45px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute left-[5px] top-[50px] z-10\"\n        >\n          <g clip-path=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute left-[122px] top-[0px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute left-[85px] top-[10px] z-10 -scale-x-100\"\n        >\n          <g clip-path=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"!hidden md:!flex\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"!items-start !justify-start\">\n        <div className=\"absolute left-[50px] top-[60px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute left-[30px] top-[38px] z-10 rotate-[-40deg]\"\n        >\n          <g clip-path=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              <>\n                {!hideIndicator && (\n                  <div\n                    className={cn(\n                      \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                      {\n                        \"h-2.5 w-2.5\": indicator === \"dot\",\n                        \"w-1\": indicator === \"line\",\n                        \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                          indicator === \"dashed\",\n                        \"my-0.5\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\n                    }\n                  />\n                )}\n                <div\n                  className={cn(\n                    \"flex flex-1 justify-between leading-none\",\n                    nestLabel ? \"items-end\" : \"items-center\"\n                  )}\n                >\n                  <div className=\"grid gap-1.5\">\n                    {nestLabel ? tooltipLabel : null}\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                  </div>\n                  <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-tooltip-formatter.json b/apps/www/public/r/styles/default/chart-tooltip-formatter.json
index 6b4f269c2b0..39d76676afa 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-formatter.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-formatter.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-formatter",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-formatter.tsx",
+      "path": "charts/chart-tooltip-formatter.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Formatter</CardTitle>\n        <CardDescription>Tooltip with custom formatter .</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  formatter={(value, name) => (\n                    <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-tooltip-icons.json b/apps/www/public/r/styles/default/chart-tooltip-icons.json
index 19cefeb3db5..4ba931c92cb 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-icons.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-icons.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-icons",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-icons.tsx",
+      "path": "charts/chart-tooltip-icons.tsx",
       "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Footprints,\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n    icon: Waves,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Icons</CardTitle>\n        <CardDescription>Tooltip with icons.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-tooltip-indicator-line.json b/apps/www/public/r/styles/default/chart-tooltip-indicator-line.json
index f0b73253b10..b029d08ded0 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-indicator-line.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-indicator-line.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-indicator-line",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-line.tsx",
+      "path": "charts/chart-tooltip-indicator-line.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Line Indicator</CardTitle>\n        <CardDescription>Tooltip with line indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent indicator=\"line\" />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-tooltip-indicator-none.json b/apps/www/public/r/styles/default/chart-tooltip-indicator-none.json
index e2b18711dc9..dbf4c93933f 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-indicator-none.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-indicator-none.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-indicator-none",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-none.tsx",
+      "path": "charts/chart-tooltip-indicator-none.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Indicator</CardTitle>\n        <CardDescription>Tooltip with no indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-tooltip-label-custom.json b/apps/www/public/r/styles/default/chart-tooltip-label-custom.json
index 60860b332a3..092b4c55540 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-label-custom.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-label-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-label-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-custom.tsx",
+      "path": "charts/chart-tooltip-label-custom.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  activities: {\n    label: \"Activities\",\n  },\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Custom label</CardTitle>\n        <CardDescription>\n          Tooltip with custom label from chartConfig.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent labelKey=\"activities\" indicator=\"line\" />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-tooltip-label-formatter.json b/apps/www/public/r/styles/default/chart-tooltip-label-formatter.json
index 8189c9392f3..9ce9fe86444 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-label-formatter.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-label-formatter.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-label-formatter",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-formatter.tsx",
+      "path": "charts/chart-tooltip-label-formatter.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Label Formatter</CardTitle>\n        <CardDescription>Tooltip with label formatter.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      day: \"numeric\",\n                      month: \"long\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-tooltip-label-none.json b/apps/www/public/r/styles/default/chart-tooltip-label-none.json
index f0d58e01212..a50fb4948e0 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-label-none.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-label-none.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-label-none",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-none.tsx",
+      "path": "charts/chart-tooltip-label-none.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Label</CardTitle>\n        <CardDescription>Tooltip with no label.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart.json b/apps/www/public/r/styles/default/chart.json
index 66759f77e9b..2104bc3d339 100644
--- a/apps/www/public/r/styles/default/chart.json
+++ b/apps/www/public/r/styles/default/chart.json
@@ -1,8 +1,10 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "recharts",
+    "recharts@2.15.4",
     "lucide-react"
   ],
   "registryDependencies": [
@@ -11,7 +13,7 @@
   "files": [
     {
       "path": "ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nconst ChartContainer = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    config: ChartConfig\n    children: React.ComponentProps<\n      typeof RechartsPrimitive.ResponsiveContainer\n    >[\"children\"]\n  }\n>(({ id, className, children, config, ...props }, ref) => {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        ref={ref}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([_, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n    React.ComponentProps<\"div\"> & {\n      hideLabel?: boolean\n      hideIndicator?: boolean\n      indicator?: \"line\" | \"dot\" | \"dashed\"\n      nameKey?: string\n      labelKey?: string\n    }\n>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) {\n        return null\n      }\n\n      const [item] = payload\n      const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n      const itemConfig = getPayloadConfigFromPayload(config, item, key)\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label\n\n      if (labelFormatter) {\n        return (\n          <div className={cn(\"font-medium\", labelClassName)}>\n            {labelFormatter(value, payload)}\n          </div>\n        )\n      }\n\n      if (!value) {\n        return null\n      }\n\n      return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n    }, [\n      label,\n      labelFormatter,\n      payload,\n      hideLabel,\n      labelClassName,\n      config,\n      labelKey,\n    ])\n\n    if (!active || !payload?.length) {\n      return null\n    }\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n          className\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload.map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    )\n  }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> &\n    Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n      hideIcon?: boolean\n      nameKey?: string\n    }\n>(\n  (\n    { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    if (!payload?.length) {\n      return null\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center gap-4\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className\n        )}\n      >\n        {payload.map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n      </div>\n    )\n  }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nconst ChartContainer = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    config: ChartConfig\n    children: React.ComponentProps<\n      typeof RechartsPrimitive.ResponsiveContainer\n    >[\"children\"]\n  }\n>(({ id, className, children, config, ...props }, ref) => {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        ref={ref}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n    React.ComponentProps<\"div\"> & {\n      hideLabel?: boolean\n      hideIndicator?: boolean\n      indicator?: \"line\" | \"dot\" | \"dashed\"\n      nameKey?: string\n      labelKey?: string\n    }\n>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) {\n        return null\n      }\n\n      const [item] = payload\n      const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n      const itemConfig = getPayloadConfigFromPayload(config, item, key)\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label\n\n      if (labelFormatter) {\n        return (\n          <div className={cn(\"font-medium\", labelClassName)}>\n            {labelFormatter(value, payload)}\n          </div>\n        )\n      }\n\n      if (!value) {\n        return null\n      }\n\n      return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n    }, [\n      label,\n      labelFormatter,\n      payload,\n      hideLabel,\n      labelClassName,\n      config,\n      labelKey,\n    ])\n\n    if (!active || !payload?.length) {\n      return null\n    }\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n          className\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload.map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    )\n  }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> &\n    Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n      hideIcon?: boolean\n      nameKey?: string\n    }\n>(\n  (\n    { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    if (!payload?.length) {\n      return null\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center gap-4\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className\n        )}\n      >\n        {payload.map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n      </div>\n    )\n  }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/charts-01.json b/apps/www/public/r/styles/default/charts-01.json
deleted file mode 100644
index 3f27e048f2d..00000000000
--- a/apps/www/public/r/styles/default/charts-01.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "charts-01",
-  "type": "registry:block",
-  "registryDependencies": [
-    "chart"
-  ],
-  "files": [
-    {
-      "path": "block/charts-01.tsx",
-      "content": "\"use client\"\n\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  LabelList,\n  Line,\n  LineChart,\n  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\n  Rectangle,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nexport default function Charts() {\n  return (\n    <div className=\"chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8\">\n      <div className=\"grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]\">\n        <Card\n          x-chunk=\"A bar chart showing the number of steps you have walked in the past 7 days.\"\n          className=\"lg:max-w-md\"\n        >\n          <CardHeader className=\"space-y-0 pb-2\">\n            <CardDescription>Today</CardDescription>\n            <CardTitle className=\"text-4xl tabular-nums\">\n              12,584{\" \"}\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                steps\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: -4,\n                  right: -4,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={5}\n                  fillOpacity={0.6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <ChartTooltip\n                  defaultIndex={2}\n                  content={\n                    <ChartTooltipContent\n                      hideIndicator\n                      labelFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                          day: \"numeric\",\n                          month: \"long\",\n                          year: \"numeric\",\n                        })\n                      }}\n                    />\n                  }\n                  cursor={false}\n                />\n                <ReferenceLine\n                  y={1200}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeDasharray=\"3 3\"\n                  strokeWidth={1}\n                >\n                  <Label\n                    position=\"insideBottomLeft\"\n                    value=\"Average Steps\"\n                    offset={10}\n                    fill=\"hsl(var(--foreground))\"\n                  />\n                  <Label\n                    position=\"insideTopLeft\"\n                    value=\"12,343\"\n                    className=\"text-lg\"\n                    fill=\"hsl(var(--foreground))\"\n                    offset={10}\n                    startOffset={100}\n                  />\n                </ReferenceLine>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex-col items-start gap-1\">\n            <CardDescription>\n              Over the past 7 days, you have walked{\" \"}\n              <span className=\"font-medium text-foreground\">53,305</span> steps.\n            </CardDescription>\n            <CardDescription>\n              You need{\" \"}\n              <span className=\"font-medium text-foreground\">12,584</span> more\n              steps to reach your goal.\n            </CardDescription>\n          </CardFooter>\n        </Card>\n        <Card\n          x-chunk=\"A line chart showing the resting heart rate for the past 7 days.\"\n          className=\"flex flex-col lg:max-w-md\"\n        >\n          <CardHeader className=\"flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1\">\n            <div>\n              <CardDescription>Resting HR</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                62\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  bpm\n                </span>\n              </CardTitle>\n            </div>\n            <div>\n              <CardDescription>Variability</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                35\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  ms\n                </span>\n              </CardTitle>\n            </div>\n          </CardHeader>\n          <CardContent className=\"flex flex-1 items-center\">\n            <ChartContainer\n              config={{\n                resting: {\n                  label: \"Resting\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"w-full\"\n            >\n              <LineChart\n                accessibilityLayer\n                margin={{\n                  left: 14,\n                  right: 14,\n                  top: 10,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    resting: 72,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    resting: 35,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    resting: 52,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    resting: 70,\n                  },\n                ]}\n              >\n                <CartesianGrid\n                  strokeDasharray=\"4 4\"\n                  vertical={false}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeOpacity={0.5}\n                />\n                <YAxis hide domain={[\"dataMin - 10\", \"dataMax + 10\"]} />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={8}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <Line\n                  dataKey=\"resting\"\n                  type=\"natural\"\n                  fill=\"var(--color-resting)\"\n                  stroke=\"var(--color-resting)\"\n                  strokeWidth={2}\n                  dot={false}\n                  activeDot={{\n                    fill: \"var(--color-resting)\",\n                    stroke: \"var(--color-resting)\",\n                    r: 4,\n                  }}\n                />\n                <ChartTooltip\n                  content={\n                    <ChartTooltipContent\n                      indicator=\"line\"\n                      labelFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                          day: \"numeric\",\n                          month: \"long\",\n                          year: \"numeric\",\n                        })\n                      }}\n                    />\n                  }\n                  cursor={false}\n                />\n              </LineChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6 lg:max-w-[20rem]\">\n        <Card\n          x-chunk=\"Two horizontal bar charts showing total steps taken during the current year and last year.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader>\n            <CardTitle>Progress</CardTitle>\n            <CardDescription>\n              You're average more steps a day this year than last year.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"grid gap-4\">\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                12,453\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--chart-1))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2024\",\n                      steps: 12435,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"white\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                10,103\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--muted))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2023\",\n                      steps: 10103,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"hsl(var(--muted-foreground))\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing the walking and running distance for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Walking Distance</CardTitle>\n            <CardDescription>\n              Over the last 7 days, your distance walked and run was 12.5 miles\n              per day.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-0\">\n            <div className=\"flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none\">\n              12.5\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                miles/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[72px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing move, exercise, and stand progress.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4 pb-2\">\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"h-[140px] w-full\"\n            >\n              <BarChart\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    label: \"8/12 hr\",\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    label: \"46/60 min\",\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    label: \"245/360 kcal\",\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                layout=\"vertical\"\n                barSize={32}\n                barGap={2}\n              >\n                <XAxis type=\"number\" dataKey=\"value\" hide />\n                <YAxis\n                  dataKey=\"activity\"\n                  type=\"category\"\n                  tickLine={false}\n                  tickMargin={4}\n                  axisLine={false}\n                  className=\"capitalize\"\n                />\n                <Bar dataKey=\"value\" radius={5}>\n                  <LabelList\n                    position=\"insideLeft\"\n                    dataKey=\"label\"\n                    fill=\"white\"\n                    offset={8}\n                    fontSize={12}\n                  />\n                </Bar>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex flex-row border-t p-4\">\n            <div className=\"flex w-full items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  562\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  73\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  14\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n          </CardFooter>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6\">\n        <Card\n          x-chunk=\"A radial bar chart showing the percentage of time spent moving, exercising, and standing.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4\">\n            <div className=\"grid items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  562/600\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  73/120\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  8/12\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"mx-auto aspect-square w-full max-w-[80%]\"\n            >\n              <RadialBarChart\n                margin={{\n                  left: -10,\n                  right: -10,\n                  top: -10,\n                  bottom: -10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                innerRadius=\"20%\"\n                barSize={24}\n                startAngle={90}\n                endAngle={450}\n              >\n                <PolarAngleAxis\n                  type=\"number\"\n                  domain={[0, 100]}\n                  dataKey=\"value\"\n                  tick={false}\n                />\n                <RadialBar dataKey=\"value\" background cornerRadius={5} />\n              </RadialBarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing active energy in the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Active Energy</CardTitle>\n            <CardDescription>\n              You're burning an average of 754 calories per day. Good job!\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-2\">\n            <div className=\"flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none\">\n              1,254\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                kcal/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                calories: {\n                  label: \"Calories\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[64px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    calories: 354,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    calories: 514,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    calories: 345,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    calories: 734,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    calories: 645,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    calories: 456,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    calories: 345,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"calories\"\n                  fill=\"var(--color-calories)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"An area chart showing the time spent in bed for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"space-y-0 pb-0\">\n            <CardDescription>Time in Bed</CardDescription>\n            <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n              8\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                hr\n              </span>\n              35\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                min\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"p-0\">\n            <ChartContainer\n              config={{\n                time: {\n                  label: \"Time\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n              }}\n            >\n              <AreaChart\n                accessibilityLayer\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    time: 8.5,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    time: 7.2,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    time: 6.2,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    time: 5.2,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    time: 7.0,\n                  },\n                ]}\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n              >\n                <XAxis dataKey=\"date\" hide />\n                <YAxis domain={[\"dataMin - 5\", \"dataMax + 2\"]} hide />\n                <defs>\n                  <linearGradient id=\"fillTime\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop\n                      offset=\"5%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.8}\n                    />\n                    <stop\n                      offset=\"95%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.1}\n                    />\n                  </linearGradient>\n                </defs>\n                <Area\n                  dataKey=\"time\"\n                  type=\"natural\"\n                  fill=\"url(#fillTime)\"\n                  fillOpacity={0.4}\n                  stroke=\"var(--color-time)\"\n                />\n                <ChartTooltip\n                  cursor={false}\n                  content={<ChartTooltipContent hideLabel />}\n                  formatter={(value) => (\n                    <div className=\"flex min-w-[120px] items-center text-xs text-muted-foreground\">\n                      Time in bed\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          hr\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              </AreaChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/checkbox-demo.json b/apps/www/public/r/styles/default/checkbox-demo.json
new file mode 100644
index 00000000000..55db0158863
--- /dev/null
+++ b/apps/www/public/r/styles/default/checkbox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nexport default function CheckboxDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <label\n        htmlFor=\"terms\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/checkbox-disabled.json b/apps/www/public/r/styles/default/checkbox-disabled.json
new file mode 100644
index 00000000000..5a7a880c783
--- /dev/null
+++ b/apps/www/public/r/styles/default/checkbox-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-disabled.tsx",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms2\" disabled />\n      <label\n        htmlFor=\"terms2\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/checkbox-form-multiple.json b/apps/www/public/r/styles/default/checkbox-form-multiple.json
new file mode 100644
index 00000000000..b768e081cf4
--- /dev/null
+++ b/apps/www/public/r/styles/default/checkbox-form-multiple.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-multiple",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-multiple.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\n\nconst items = [\n  {\n    id: \"recents\",\n    label: \"Recents\",\n  },\n  {\n    id: \"home\",\n    label: \"Home\",\n  },\n  {\n    id: \"applications\",\n    label: \"Applications\",\n  },\n  {\n    id: \"desktop\",\n    label: \"Desktop\",\n  },\n  {\n    id: \"downloads\",\n    label: \"Downloads\",\n  },\n  {\n    id: \"documents\",\n    label: \"Documents\",\n  },\n] as const\n\nconst FormSchema = z.object({\n  items: z.array(z.string()).refine((value) => value.some((item) => item), {\n    message: \"You have to select at least one item.\",\n  }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      items: [\"recents\", \"home\"],\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"items\"\n          render={() => (\n            <FormItem>\n              <div className=\"mb-4\">\n                <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                <FormDescription>\n                  Select the items you want to display in the sidebar.\n                </FormDescription>\n              </div>\n              {items.map((item) => (\n                <FormField\n                  key={item.id}\n                  control={form.control}\n                  name=\"items\"\n                  render={({ field }) => {\n                    return (\n                      <FormItem\n                        key={item.id}\n                        className=\"flex flex-row items-start space-x-3 space-y-0\"\n                      >\n                        <FormControl>\n                          <Checkbox\n                            checked={field.value?.includes(item.id)}\n                            onCheckedChange={(checked) => {\n                              return checked\n                                ? field.onChange([...field.value, item.id])\n                                : field.onChange(\n                                    field.value?.filter(\n                                      (value) => value !== item.id\n                                    )\n                                  )\n                            }}\n                          />\n                        </FormControl>\n                        <FormLabel className=\"font-normal\">\n                          {item.label}\n                        </FormLabel>\n                      </FormItem>\n                    )\n                  }}\n                />\n              ))}\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/checkbox-form-single.json b/apps/www/public/r/styles/default/checkbox-form-single.json
new file mode 100644
index 00000000000..c912bc018f3
--- /dev/null
+++ b/apps/www/public/r/styles/default/checkbox-form-single.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-single",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-single.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/default/ui/form\"\n\nconst FormSchema = z.object({\n  mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      mobile: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"mobile\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4\">\n              <FormControl>\n                <Checkbox\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <div className=\"space-y-1 leading-none\">\n                <FormLabel>\n                  Use different settings for my mobile devices\n                </FormLabel>\n                <FormDescription>\n                  You can manage your mobile notifications in the{\" \"}\n                  <Link href=\"/examples/forms\">mobile settings</Link> page.\n                </FormDescription>\n              </div>\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/checkbox-with-text.json b/apps/www/public/r/styles/default/checkbox-with-text.json
new file mode 100644
index 00000000000..5539ed11723
--- /dev/null
+++ b/apps/www/public/r/styles/default/checkbox-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-with-text.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n  return (\n    <div className=\"items-top flex space-x-2\">\n      <Checkbox id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-sm text-muted-foreground\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/checkbox.json b/apps/www/public/r/styles/default/checkbox.json
index 8568163d997..5c4b6ed2f60 100644
--- a/apps/www/public/r/styles/default/checkbox.json
+++ b/apps/www/public/r/styles/default/checkbox.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "checkbox",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-checkbox"
   ],
diff --git a/apps/www/public/r/styles/default/collapsible-demo.json b/apps/www/public/r/styles/default/collapsible-demo.json
new file mode 100644
index 00000000000..50c1ba8b140
--- /dev/null
+++ b/apps/www/public/r/styles/default/collapsible-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "examples/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/collapsible.json b/apps/www/public/r/styles/default/collapsible.json
index b1affc13364..65fdab451c0 100644
--- a/apps/www/public/r/styles/default/collapsible.json
+++ b/apps/www/public/r/styles/default/collapsible.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "collapsible",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-collapsible"
   ],
diff --git a/apps/www/public/r/styles/default/combobox-demo.json b/apps/www/public/r/styles/default/combobox-demo.json
new file mode 100644
index 00000000000..4854fe2eec6
--- /dev/null
+++ b/apps/www/public/r/styles/default/combobox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport default function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/combobox-dropdown-menu.json b/apps/www/public/r/styles/default/combobox-dropdown-menu.json
new file mode 100644
index 00000000000..ae688cc0581
--- /dev/null
+++ b/apps/www/public/r/styles/default/combobox-dropdown-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-dropdown-menu",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "dropdown-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nconst labels = [\n  \"feature\",\n  \"bug\",\n  \"enhancement\",\n  \"documentation\",\n  \"design\",\n  \"question\",\n  \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n  const [label, setLabel] = React.useState(\"feature\")\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n      <p className=\"text-sm font-medium leading-none\">\n        <span className=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">Create a new project</span>\n      </p>\n      <DropdownMenu open={open} onOpenChange={setOpen}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <MoreHorizontal />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n          <DropdownMenuLabel>Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <User />\n              Assign to...\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Calendar />\n              Set due date...\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <Tags />\n                Apply label\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"p-0\">\n                <Command>\n                  <CommandInput\n                    placeholder=\"Filter label...\"\n                    autoFocus={true}\n                  />\n                  <CommandList>\n                    <CommandEmpty>No label found.</CommandEmpty>\n                    <CommandGroup>\n                      {labels.map((label) => (\n                        <CommandItem\n                          key={label}\n                          value={label}\n                          onSelect={(value) => {\n                            setLabel(value)\n                            setOpen(false)\n                          }}\n                        >\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                  </CommandList>\n                </Command>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"text-red-600\">\n              <Trash />\n              Delete\n              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/combobox-form.json b/apps/www/public/r/styles/default/combobox-form.json
new file mode 100644
index 00000000000..02525ed9bb3
--- /dev/null
+++ b/apps/www/public/r/styles/default/combobox-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst languages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n  language: z.string({\n    required_error: \"Please select a language.\",\n  }),\n})\n\nexport default function ComboboxForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"language\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Language</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      className={cn(\n                        \"w-[200px] justify-between\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value\n                        ? languages.find(\n                            (language) => language.value === field.value\n                          )?.label\n                        : \"Select language\"}\n                      <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-[200px] p-0\">\n                  <Command>\n                    <CommandInput placeholder=\"Search language...\" />\n                    <CommandList>\n                      <CommandEmpty>No language found.</CommandEmpty>\n                      <CommandGroup>\n                        {languages.map((language) => (\n                          <CommandItem\n                            value={language.label}\n                            key={language.value}\n                            onSelect={() => {\n                              form.setValue(\"language\", language.value)\n                            }}\n                          >\n                            {language.label}\n                            <Check\n                              className={cn(\n                                \"ml-auto\",\n                                language.value === field.value\n                                  ? \"opacity-100\"\n                                  : \"opacity-0\"\n                              )}\n                            />\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                This is the language that will be used in the dashboard.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/combobox-popover.json b/apps/www/public/r/styles/default/combobox-popover.json
new file mode 100644
index 00000000000..42963c8ae09
--- /dev/null
+++ b/apps/www/public/r/styles/default/combobox-popover.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-popover",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "combobox",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  LucideIcon,\n  XCircle,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n  icon: LucideIcon\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n    icon: HelpCircle,\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n    icon: Circle,\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n    icon: ArrowUpCircle,\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n    icon: CheckCircle2,\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n    icon: XCircle,\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-sm text-muted-foreground\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"w-[150px] justify-start\"\n          >\n            {selectedStatus ? (\n              <>\n                <selectedStatus.icon className=\"mr-2 h-4 w-4 shrink-0\" />\n                {selectedStatus.label}\n              </>\n            ) : (\n              <>+ Set status</>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    <status.icon\n                      className={cn(\n                        \"mr-2 h-4 w-4\",\n                        status.value === selectedStatus?.value\n                          ? \"opacity-100\"\n                          : \"opacity-40\"\n                      )}\n                    />\n                    <span>{status.label}</span>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/combobox-responsive.json b/apps/www/public/r/styles/default/combobox-responsive.json
new file mode 100644
index 00000000000..bde716e46a4
--- /dev/null
+++ b/apps/www/public/r/styles/default/combobox-responsive.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-responsive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "combobox",
+    "popover",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboBoxResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  if (isDesktop) {\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </PopoverContent>\n      </Popover>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mt-4 border-t\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction StatusList({\n  setOpen,\n  setSelectedStatus,\n}: {\n  setOpen: (open: boolean) => void\n  setSelectedStatus: (status: Status | null) => void\n}) {\n  return (\n    <Command>\n      <CommandInput placeholder=\"Filter status...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup>\n          {statuses.map((status) => (\n            <CommandItem\n              key={status.value}\n              value={status.value}\n              onSelect={(value) => {\n                setSelectedStatus(\n                  statuses.find((priority) => priority.value === value) || null\n                )\n                setOpen(false)\n              }}\n            >\n              {status.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/command-demo.json b/apps/www/public/r/styles/default/command-demo.json
new file mode 100644
index 00000000000..1f4ad1310dd
--- /dev/null
+++ b/apps/www/public/r/styles/default/command-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/command-demo.tsx",
+      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\"\n\nexport default function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/command-dialog.json b/apps/www/public/r/styles/default/command-dialog.json
new file mode 100644
index 00000000000..0aae35fc4f2
--- /dev/null
+++ b/apps/www/public/r/styles/default/command-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-dialog",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/command-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\"\n\nexport default function CommandDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <p className=\"text-sm text-muted-foreground\">\n        Press{\" \"}\n        <kbd className=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/command.json b/apps/www/public/r/styles/default/command.json
index dd5172e82dc..0304943fb75 100644
--- a/apps/www/public/r/styles/default/command.json
+++ b/apps/www/public/r/styles/default/command.json
@@ -1,8 +1,10 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "command",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "cmdk@1.0.0"
+    "cmdk"
   ],
   "registryDependencies": [
     "dialog"
@@ -10,7 +12,7 @@
   "files": [
     {
       "path": "ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/default/ui/dialog\"\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/default/ui/dialog\"\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/context-menu-demo.json b/apps/www/public/r/styles/default/context-menu-demo.json
new file mode 100644
index 00000000000..e5856661fa7
--- /dev/null
+++ b/apps/www/public/r/styles/default/context-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "context-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/context-menu-demo.tsx",
+      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nexport default function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/context-menu.json b/apps/www/public/r/styles/default/context-menu.json
index 25c44341836..7e16417c76d 100644
--- a/apps/www/public/r/styles/default/context-menu.json
+++ b/apps/www/public/r/styles/default/context-menu.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "context-menu",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-context-menu"
   ],
   "files": [
     {
       "path": "ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/dashboard-01.json b/apps/www/public/r/styles/default/dashboard-01.json
index ce05767c8f2..9bde5db6e6f 100644
--- a/apps/www/public/r/styles/default/dashboard-01.json
+++ b/apps/www/public/r/styles/default/dashboard-01.json
@@ -1,18 +1,107 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "dashboard-01",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A dashboard with sidebar, charts and data table.",
+  "dependencies": [
+    "@dnd-kit/core",
+    "@dnd-kit/modifiers",
+    "@dnd-kit/sortable",
+    "@dnd-kit/utilities",
+    "@tanstack/react-table",
+    "zod"
+  ],
   "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "chart",
+    "card",
+    "select",
+    "tabs",
+    "table",
+    "toggle-group",
+    "badge",
     "button",
+    "checkbox",
     "dropdown-menu",
+    "drawer",
     "input",
-    "sheet"
+    "avatar",
+    "sheet",
+    "sonner"
   ],
   "files": [
     {
-      "path": "block/dashboard-01.tsx",
-      "content": "import Link from \"next/link\"\nimport {\n  Activity,\n  ArrowUpRight,\n  CircleUser,\n  CreditCard,\n  DollarSign,\n  Menu,\n  Package2,\n  Search,\n  Users,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Badge } from \"@/registry/default/ui/badge\"\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 {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <nav className=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Analytics\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Analytics\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <main className=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n        <div className=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n          <Card x-chunk=\"A card showing the total revenue in USD and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Total Revenue\n              </CardTitle>\n              <DollarSign className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">$45,231.89</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +20.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total subscriptions and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Subscriptions\n              </CardTitle>\n              <Users className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+2350</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +180.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total sales and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Sales</CardTitle>\n              <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+12,234</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +19% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total active users and the percentage difference from last hour.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Active Now</CardTitle>\n              <Activity className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+573</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +201 since last hour\n              </p>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n          <Card\n            className=\"xl:col-span-2\"\n            x-chunk=\"A card showing a table of recent transactions with a link to view all transactions.\"\n          >\n            <CardHeader className=\"flex flex-row items-center\">\n              <div className=\"grid gap-2\">\n                <CardTitle>Transactions</CardTitle>\n                <CardDescription>\n                  Recent transactions from your store.\n                </CardDescription>\n              </div>\n              <Button asChild size=\"sm\" className=\"ml-auto gap-1\">\n                <Link href=\"#\">\n                  View All\n                  <ArrowUpRight className=\"h-4 w-4\" />\n                </Link>\n              </Button>\n            </CardHeader>\n            <CardContent>\n              <Table>\n                <TableHeader>\n                  <TableRow>\n                    <TableHead>Customer</TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Type\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Status\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Date\n                    </TableHead>\n                    <TableHead className=\"text-right\">Amount</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-23\n                    </TableCell>\n                    <TableCell className=\"text-right\">$250.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Olivia Smith</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        olivia@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Refund\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Declined\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-24\n                    </TableCell>\n                    <TableCell className=\"text-right\">$150.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Noah Williams</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        noah@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Subscription\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-25\n                    </TableCell>\n                    <TableCell className=\"text-right\">$350.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Emma Brown</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        emma@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-26\n                    </TableCell>\n                    <TableCell className=\"text-right\">$450.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-27\n                    </TableCell>\n                    <TableCell className=\"text-right\">$550.00</TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing a list of recent sales with customer names and email addresses.\">\n            <CardHeader>\n              <CardTitle>Recent Sales</CardTitle>\n            </CardHeader>\n            <CardContent className=\"grid gap-8\">\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                  <AvatarFallback>OM</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Olivia Martin\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    olivia.martin@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$1,999.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                  <AvatarFallback>JL</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Jackson Lee\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    jackson.lee@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                  <AvatarFallback>IN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Isabella Nguyen\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    isabella.nguyen@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$299.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                  <AvatarFallback>WK</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    William Kim\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    will@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$99.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                  <AvatarFallback>SD</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Sofia Davis\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    sofia.davis@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </main>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
+      "path": "blocks/dashboard-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/dashboard-01/components/app-sidebar\"\nimport { ChartAreaInteractive } from \"@/registry/default/blocks/dashboard-01/components/chart-area-interactive\"\nimport { DataTable } from \"@/registry/default/blocks/dashboard-01/components/data-table\"\nimport { SectionCards } from \"@/registry/default/blocks/dashboard-01/components/section-cards\"\nimport { SiteHeader } from \"@/registry/default/blocks/dashboard-01/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/default/ui/sidebar\"\n\nimport data from \"./data.json\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar variant=\"inset\" />\n      <SidebarInset>\n        <SiteHeader />\n        <div className=\"flex flex-1 flex-col\">\n          <div className=\"@container/main flex flex-1 flex-col gap-2\">\n            <div className=\"flex flex-col gap-4 py-4 md:gap-6 md:py-6\">\n              <SectionCards />\n              <div className=\"px-4 lg:px-6\">\n                <ChartAreaInteractive />\n              </div>\n              <DataTable data={data} />\n            </div>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/dashboard-01/data.json",
+      "content": "[\n  {\n    \"id\": 1,\n    \"header\": \"Cover page\",\n    \"type\": \"Cover page\",\n    \"status\": \"In Process\",\n    \"target\": \"18\",\n    \"limit\": \"5\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 2,\n    \"header\": \"Table of contents\",\n    \"type\": \"Table of contents\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 3,\n    \"header\": \"Executive summary\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"10\",\n    \"limit\": \"13\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 4,\n    \"header\": \"Technical approach\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"27\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 5,\n    \"header\": \"Design\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"2\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 6,\n    \"header\": \"Capabilities\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"20\",\n    \"limit\": \"8\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 7,\n    \"header\": \"Integration with existing systems\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 8,\n    \"header\": \"Innovation and Advantages\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"25\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 9,\n    \"header\": \"Overview of EMR's Innovative Solutions\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"7\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 10,\n    \"header\": \"Advanced Algorithms and Machine Learning\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 11,\n    \"header\": \"Adaptive Communication Protocols\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"9\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 12,\n    \"header\": \"Advantages Over Current Technologies\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"0\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 13,\n    \"header\": \"Past Performance\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 14,\n    \"header\": \"Customer Feedback and Satisfaction Levels\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"34\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 15,\n    \"header\": \"Implementation Challenges and Solutions\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"3\",\n    \"limit\": \"35\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 16,\n    \"header\": \"Security Measures and Data Protection Policies\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"6\",\n    \"limit\": \"36\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 17,\n    \"header\": \"Scalability and Future Proofing\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"4\",\n    \"limit\": \"37\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 18,\n    \"header\": \"Cost-Benefit Analysis\",\n    \"type\": \"Plain language\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"38\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 19,\n    \"header\": \"User Training and Onboarding Experience\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"17\",\n    \"limit\": \"39\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 20,\n    \"header\": \"Future Development Roadmap\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"11\",\n    \"limit\": \"40\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 21,\n    \"header\": \"System Architecture Overview\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"24\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Maya Johnson\"\n  },\n  {\n    \"id\": 22,\n    \"header\": \"Risk Management Plan\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Carlos Rodriguez\"\n  },\n  {\n    \"id\": 23,\n    \"header\": \"Compliance Documentation\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"31\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Sarah Chen\"\n  },\n  {\n    \"id\": 24,\n    \"header\": \"API Documentation\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"8\",\n    \"limit\": \"12\",\n    \"reviewer\": \"Raj Patel\"\n  },\n  {\n    \"id\": 25,\n    \"header\": \"User Interface Mockups\",\n    \"type\": \"Visual\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Leila Ahmadi\"\n  },\n  {\n    \"id\": 26,\n    \"header\": \"Database Schema\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Thomas Wilson\"\n  },\n  {\n    \"id\": 27,\n    \"header\": \"Testing Methodology\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 28,\n    \"header\": \"Deployment Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 29,\n    \"header\": \"Budget Breakdown\",\n    \"type\": \"Financial\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 30,\n    \"header\": \"Market Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Sophia Martinez\"\n  },\n  {\n    \"id\": 31,\n    \"header\": \"Competitor Comparison\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 32,\n    \"header\": \"Maintenance Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Alex Thompson\"\n  },\n  {\n    \"id\": 33,\n    \"header\": \"User Personas\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Nina Patel\"\n  },\n  {\n    \"id\": 34,\n    \"header\": \"Accessibility Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 35,\n    \"header\": \"Performance Metrics\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"David Kim\"\n  },\n  {\n    \"id\": 36,\n    \"header\": \"Disaster Recovery Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 37,\n    \"header\": \"Third-party Integrations\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 38,\n    \"header\": \"User Feedback Summary\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 39,\n    \"header\": \"Localization Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"12\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Maria Garcia\"\n  },\n  {\n    \"id\": 40,\n    \"header\": \"Mobile Compatibility\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"James Wilson\"\n  },\n  {\n    \"id\": 41,\n    \"header\": \"Data Migration Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 42,\n    \"header\": \"Quality Assurance Protocols\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Priya Singh\"\n  },\n  {\n    \"id\": 43,\n    \"header\": \"Stakeholder Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"11\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 44,\n    \"header\": \"Environmental Impact Assessment\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 45,\n    \"header\": \"Intellectual Property Rights\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Sarah Johnson\"\n  },\n  {\n    \"id\": 46,\n    \"header\": \"Customer Support Framework\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 47,\n    \"header\": \"Version Control Strategy\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 48,\n    \"header\": \"Continuous Integration Pipeline\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Michael Chen\"\n  },\n  {\n    \"id\": 49,\n    \"header\": \"Regulatory Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 50,\n    \"header\": \"User Authentication System\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 51,\n    \"header\": \"Data Analytics Framework\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 52,\n    \"header\": \"Cloud Infrastructure\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 53,\n    \"header\": \"Network Security Measures\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Lisa Wong\"\n  },\n  {\n    \"id\": 54,\n    \"header\": \"Project Timeline\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 55,\n    \"header\": \"Resource Allocation\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 56,\n    \"header\": \"Team Structure and Roles\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 57,\n    \"header\": \"Communication Protocols\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 58,\n    \"header\": \"Success Metrics\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 59,\n    \"header\": \"Internationalization Support\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 60,\n    \"header\": \"Backup and Recovery Procedures\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 61,\n    \"header\": \"Monitoring and Alerting System\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Daniel Park\"\n  },\n  {\n    \"id\": 62,\n    \"header\": \"Code Review Guidelines\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 63,\n    \"header\": \"Documentation Standards\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 64,\n    \"header\": \"Release Management Process\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 65,\n    \"header\": \"Feature Prioritization Matrix\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Emma Davis\"\n  },\n  {\n    \"id\": 66,\n    \"header\": \"Technical Debt Assessment\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 67,\n    \"header\": \"Capacity Planning\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 68,\n    \"header\": \"Service Level Agreements\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Assign reviewer\"\n  }\n]\n",
+      "type": "registry:file",
+      "target": "app/dashboard/data.json"
+    },
+    {
+      "path": "blocks/dashboard-01/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpCircleIcon,\n  BarChartIcon,\n  CameraIcon,\n  ClipboardListIcon,\n  DatabaseIcon,\n  FileCodeIcon,\n  FileIcon,\n  FileTextIcon,\n  FolderIcon,\n  HelpCircleIcon,\n  LayoutDashboardIcon,\n  ListIcon,\n  SearchIcon,\n  SettingsIcon,\n  UsersIcon,\n} from \"lucide-react\"\n\nimport { NavDocuments } from \"@/registry/default/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/default/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/default/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/default/blocks/dashboard-01/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Dashboard\",\n      url: \"#\",\n      icon: LayoutDashboardIcon,\n    },\n    {\n      title: \"Lifecycle\",\n      url: \"#\",\n      icon: ListIcon,\n    },\n    {\n      title: \"Analytics\",\n      url: \"#\",\n      icon: BarChartIcon,\n    },\n    {\n      title: \"Projects\",\n      url: \"#\",\n      icon: FolderIcon,\n    },\n    {\n      title: \"Team\",\n      url: \"#\",\n      icon: UsersIcon,\n    },\n  ],\n  navClouds: [\n    {\n      title: \"Capture\",\n      icon: CameraIcon,\n      isActive: true,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Proposal\",\n      icon: FileTextIcon,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Prompts\",\n      icon: FileCodeIcon,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: SettingsIcon,\n    },\n    {\n      title: \"Get Help\",\n      url: \"#\",\n      icon: HelpCircleIcon,\n    },\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: SearchIcon,\n    },\n  ],\n  documents: [\n    {\n      name: \"Data Library\",\n      url: \"#\",\n      icon: DatabaseIcon,\n    },\n    {\n      name: \"Reports\",\n      url: \"#\",\n      icon: ClipboardListIcon,\n    },\n    {\n      name: \"Word Assistant\",\n      url: \"#\",\n      icon: FileIcon,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              asChild\n              className=\"data-[slot=sidebar-menu-button]:!p-1.5\"\n            >\n              <a href=\"#\">\n                <ArrowUpCircleIcon className=\"h-5 w-5\" />\n                <span className=\"text-base font-semibold\">Acme Inc.</span>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavDocuments items={data.documents} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/default/hooks/use-mobile\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const isMobile = useIsMobile()\n  const [timeRange, setTimeRange] = React.useState(\"30d\")\n\n  React.useEffect(() => {\n    if (isMobile) {\n      setTimeRange(\"7d\")\n    }\n  }, [isMobile])\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"@container/card\">\n      <CardHeader className=\"relative\">\n        <CardTitle>Total Visitors</CardTitle>\n        <CardDescription>\n          <span className=\"@[540px]/card:block hidden\">\n            Total for the last 3 months\n          </span>\n          <span className=\"@[540px]/card:hidden\">Last 3 months</span>\n        </CardDescription>\n        <div className=\"absolute right-4 top-4\">\n          <ToggleGroup\n            type=\"single\"\n            value={timeRange}\n            onValueChange={setTimeRange}\n            variant=\"outline\"\n            className=\"@[767px]/card:flex hidden\"\n          >\n            <ToggleGroupItem value=\"90d\" className=\"h-8 px-2.5\">\n              Last 3 months\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"30d\" className=\"h-8 px-2.5\">\n              Last 30 days\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"7d\" className=\"h-8 px-2.5\">\n              Last 7 days\n            </ToggleGroupItem>\n          </ToggleGroup>\n          <Select value={timeRange} onValueChange={setTimeRange}>\n            <SelectTrigger\n              className=\"@[767px]/card:hidden flex w-40\"\n              aria-label=\"Select a value\"\n            >\n              <SelectValue placeholder=\"Last 3 months\" />\n            </SelectTrigger>\n            <SelectContent className=\"rounded-xl\">\n              <SelectItem value=\"90d\" className=\"rounded-lg\">\n                Last 3 months\n              </SelectItem>\n              <SelectItem value=\"30d\" className=\"rounded-lg\">\n                Last 30 days\n              </SelectItem>\n              <SelectItem value=\"7d\" className=\"rounded-lg\">\n                Last 7 days\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={1.0}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/data-table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  SortableContext,\n  arrayMove,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  Row,\n  SortingState,\n  VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport {\n  CheckCircle2Icon,\n  CheckCircleIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsLeftIcon,\n  ChevronsRightIcon,\n  ColumnsIcon,\n  GripVerticalIcon,\n  LoaderIcon,\n  MoreVerticalIcon,\n  PlusIcon,\n  TrendingUpIcon,\n} from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/default/hooks/use-mobile\"\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <GripVerticalIcon className=\"size-3 text-muted-foreground\" />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge\n        variant=\"outline\"\n        className=\"flex gap-1 px-1.5 text-muted-foreground [&_svg]:size-3\"\n      >\n        {row.original.status === \"Done\" ? (\n          <CheckCircle2Icon className=\"text-green-500 dark:text-green-400\" />\n        ) : (\n          <LoaderIcon />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"h-8 w-40\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n              <SelectItem value=\"Jamik Tashpulatov\">\n                Jamik Tashpulatov\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"flex size-8 text-muted-foreground data-[state=open]:bg-muted\"\n            size=\"icon\"\n          >\n            <MoreVerticalIcon />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"flex w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"@4xl/main:hidden flex w-fit\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"outline\">Outline</SelectItem>\n            <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n            <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n            <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"@4xl/main:flex hidden\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\" className=\"gap-1\">\n            Past Performance{\" \"}\n            <Badge\n              variant=\"secondary\"\n              className=\"flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30\"\n            >\n              3\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\" className=\"gap-1\">\n            Key Personnel{\" \"}\n            <Badge\n              variant=\"secondary\"\n              className=\"flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30\"\n            >\n              2\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <ColumnsIcon />\n                <span className=\"hidden lg:inline\">Customize Columns</span>\n                <span className=\"lg:hidden\">Columns</span>\n                <ChevronDownIcon />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <PlusIcon />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  {[10, 20, 30, 40, 50].map((pageSize) => (\n                    <SelectItem key={pageSize} value={`${pageSize}`}>\n                      {pageSize}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <ChevronsLeftIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <ChevronLeftIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <ChevronRightIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <ChevronsRightIcon />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </SheetTrigger>\n      <SheetContent side=\"right\" className=\"flex flex-col\">\n        <SheetHeader className=\"gap-1\">\n          <SheetTitle>{item.header}</SheetTitle>\n          <SheetDescription>\n            Showing total visitors for the last 6 months\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto py-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 font-medium leading-none\">\n                  Trending up by 5.2% this month{\" \"}\n                  <TrendingUpIcon className=\"size-4\" />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Table of Contents\">\n                      Table of Contents\n                    </SelectItem>\n                    <SelectItem value=\"Executive Summary\">\n                      Executive Summary\n                    </SelectItem>\n                    <SelectItem value=\"Technical Approach\">\n                      Technical Approach\n                    </SelectItem>\n                    <SelectItem value=\"Design\">Design</SelectItem>\n                    <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                    <SelectItem value=\"Focus Documents\">\n                      Focus Documents\n                    </SelectItem>\n                    <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                    <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Done\">Done</SelectItem>\n                    <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                    <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                  <SelectItem value=\"Jamik Tashpulatov\">\n                    Jamik Tashpulatov\n                  </SelectItem>\n                  <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <SheetFooter className=\"mt-auto flex gap-2 sm:flex-col sm:space-x-0\">\n          <Button className=\"w-full\">Submit</Button>\n          <SheetClose asChild>\n            <Button variant=\"outline\" className=\"w-full\">\n              Done\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-documents.tsx",
+      "content": "\"use client\"\n\nimport {\n  FolderIcon,\n  MoreHorizontalIcon,\n  ShareIcon,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"rounded-sm data-[state=open]:bg-accent\"\n                >\n                  <MoreHorizontalIcon />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <FolderIcon />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ShareIcon />\n                  <span>Share</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontalIcon className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { MailIcon, PlusCircleIcon, type LucideIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <PlusCircleIcon />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"h-9 w-9 shrink-0 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <MailIcon />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon && <item.icon />}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BellIcon,\n  CreditCardIcon,\n  LogOutIcon,\n  MoreVerticalIcon,\n  UserCircleIcon,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {user.email}\n                </span>\n              </div>\n              <MoreVerticalIcon className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <UserCircleIcon />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCardIcon />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <BellIcon />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOutIcon />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/section-cards.tsx",
+      "content": "import { TrendingDownIcon, TrendingUpIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:shadow-xs @xl/main:grid-cols-2 @5xl/main:grid-cols-4 grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card lg:px-6\">\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            $1,250.00\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +12.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            1,234\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingDownIcon className=\"size-3\" />\n              -20%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period <TrendingDownIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            45,678\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +12.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            4.5%\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +4.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/site-header.tsx",
+      "content": "import { Separator } from \"@/registry/default/ui/separator\"\nimport { SidebarTrigger } from \"@/registry/default/ui/sidebar\"\n\nexport function SiteHeader() {\n  return (\n    <header className=\"group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear\">\n      <div className=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\n        <SidebarTrigger className=\"-ml-1\" />\n        <Separator\n          orientation=\"vertical\"\n          className=\"mx-2 data-[orientation=vertical]:h-4\"\n        />\n        <h1 className=\"text-base font-medium\">Documents</h1>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-02.json b/apps/www/public/r/styles/default/dashboard-02.json
deleted file mode 100644
index 77053d542ae..00000000000
--- a/apps/www/public/r/styles/default/dashboard-02.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "dashboard-02",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-02.tsx",
-      "content": "import Link from \"next/link\"\nimport {\n  Bell,\n  CircleUser,\n  Home,\n  LineChart,\n  Menu,\n  Package,\n  Package2,\n  Search,\n  ShoppingCart,\n  Users,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\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 {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n      <div className=\"hidden border-r bg-muted/40 md:block\">\n        <div className=\"flex h-full max-h-screen flex-col gap-2\">\n          <div className=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n            <Link href=\"/\" className=\"flex items-center gap-2 font-semibold\">\n              <Package2 className=\"h-6 w-6\" />\n              <span className=\"\">Acme Inc</span>\n            </Link>\n            <Button variant=\"outline\" size=\"icon\" className=\"ml-auto h-8 w-8\">\n              <Bell className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle notifications</span>\n            </Button>\n          </div>\n          <div className=\"flex-1\">\n            <nav className=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Home className=\"h-4 w-4\" />\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <ShoppingCart className=\"h-4 w-4\" />\n                Orders\n                <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n              >\n                <Package className=\"h-4 w-4\" />\n                Products{\" \"}\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Users className=\"h-4 w-4\" />\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <LineChart className=\"h-4 w-4\" />\n                Analytics\n              </Link>\n            </nav>\n          </div>\n          <div className=\"mt-auto p-4\">\n            <Card x-chunk=\"A card with a call to action\">\n              <CardHeader className=\"p-2 pt-0 md:p-4\">\n                <CardTitle>Upgrade to Pro</CardTitle>\n                <CardDescription>\n                  Unlock all features and get unlimited access to our support\n                  team.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"p-2 pt-0 md:p-4 md:pt-0\">\n                <Button size=\"sm\" className=\"w-full\">\n                  Upgrade\n                </Button>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n      <div className=\"flex flex-col\">\n        <header className=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"shrink-0 md:hidden\"\n              >\n                <Menu className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle navigation menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"flex flex-col\">\n              <nav className=\"grid gap-2 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-2 text-lg font-semibold\"\n                >\n                  <Package2 className=\"h-6 w-6\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                  <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                    6\n                  </Badge>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Analytics\n                </Link>\n              </nav>\n              <div className=\"mt-auto\">\n                <Card>\n                  <CardHeader>\n                    <CardTitle>Upgrade to Pro</CardTitle>\n                    <CardDescription>\n                      Unlock all features and get unlimited access to our\n                      support team.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Button size=\"sm\" className=\"w-full\">\n                      Upgrade\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </SheetContent>\n          </Sheet>\n          <div className=\"w-full flex-1\">\n            <form>\n              <div className=\"relative\">\n                <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n                <Input\n                  type=\"search\"\n                  placeholder=\"Search products...\"\n                  className=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n                />\n              </div>\n            </form>\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n          <div className=\"flex items-center\">\n            <h1 className=\"text-lg font-semibold md:text-2xl\">Inventory</h1>\n          </div>\n          <div\n            x-chunk=\"An empty state showing no products with a heading, description and a call to action to add a product.\"\n            className=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\"\n          >\n            <div className=\"flex flex-col items-center gap-1 text-center\">\n              <h3 className=\"text-2xl font-bold tracking-tight\">\n                You have no products\n              </h3>\n              <p className=\"text-sm text-muted-foreground\">\n                You can start selling as soon as you add a product.\n              </p>\n              <Button className=\"mt-4\">Add Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-03.json b/apps/www/public/r/styles/default/dashboard-03.json
deleted file mode 100644
index 4389a9d1d74..00000000000
--- a/apps/www/public/r/styles/default/dashboard-03.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "dashboard-03",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "button",
-    "drawer",
-    "input",
-    "label",
-    "select",
-    "textarea",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-03.tsx",
-      "content": "import {\n  Bird,\n  Book,\n  Bot,\n  Code2,\n  CornerDownLeft,\n  LifeBuoy,\n  Mic,\n  Paperclip,\n  Rabbit,\n  Settings,\n  Settings2,\n  Share,\n  SquareTerminal,\n  SquareUser,\n  Triangle,\n  Turtle,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid h-screen w-full pl-[56px]\">\n      <aside className=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n        <div className=\"border-b p-2\">\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n            <Triangle className=\"size-5 fill-foreground\" />\n          </Button>\n        </div>\n        <nav className=\"grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Playground\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Models\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              API\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Help\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col\">\n        <header className=\"sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4\">\n          <h1 className=\"text-xl font-semibold\">Playground</h1>\n          <Drawer>\n            <DrawerTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\">\n                <Settings className=\"size-4\" />\n                <span className=\"sr-only\">Settings</span>\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"max-h-[80vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Configuration</DrawerTitle>\n                <DrawerDescription>\n                  Configure the settings for the model and messages.\n                </DrawerDescription>\n              </DrawerHeader>\n              <form className=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Settings\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"model\">Model</Label>\n                    <Select>\n                      <SelectTrigger\n                        id=\"model\"\n                        className=\"items-start [&_[data-description]]:hidden\"\n                      >\n                        <SelectValue placeholder=\"Select a model\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"genesis\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Rabbit className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Genesis\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Our fastest model for general use cases.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"explorer\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Bird className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Explorer\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Performance and speed for efficiency.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"quantum\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Turtle className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Quantum\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                The most powerful model for complex\n                                computations.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"temperature\">Temperature</Label>\n                    <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </fieldset>\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Messages\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"role\">Role</Label>\n                    <Select defaultValue=\"system\">\n                      <SelectTrigger>\n                        <SelectValue placeholder=\"Select a role\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"system\">System</SelectItem>\n                        <SelectItem value=\"user\">User</SelectItem>\n                        <SelectItem value=\"assistant\">Assistant</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"content\">Content</Label>\n                    <Textarea id=\"content\" placeholder=\"You are a...\" />\n                  </div>\n                </fieldset>\n              </form>\n            </DrawerContent>\n          </Drawer>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"ml-auto gap-1.5 text-sm\"\n          >\n            <Share className=\"size-3.5\" />\n            Share\n          </Button>\n        </header>\n        <main className=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n          <div\n            className=\"relative hidden flex-col items-start gap-8 md:flex\"\n            x-chunk=\"A settings form a configuring an AI model and messages.\"\n          >\n            <form className=\"grid w-full items-start gap-6\">\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      className=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              The most powerful model for complex computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </div>\n              </fieldset>\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"role\">Role</Label>\n                  <Select defaultValue=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">System</SelectItem>\n                      <SelectItem value=\"user\">User</SelectItem>\n                      <SelectItem value=\"assistant\">Assistant</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"content\">Content</Label>\n                  <Textarea\n                    id=\"content\"\n                    placeholder=\"You are a...\"\n                    className=\"min-h-[9.5rem]\"\n                  />\n                </div>\n              </fieldset>\n            </form>\n          </div>\n          <div className=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n            <Badge variant=\"outline\" className=\"absolute right-3 top-3\">\n              Output\n            </Badge>\n            <div className=\"flex-1\" />\n            <form\n              className=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\"\n              x-chunk=\"A form for sending a message to an AI chatbot. The form has a textarea and buttons to upload files and record audio.\"\n            >\n              <Label htmlFor=\"message\" className=\"sr-only\">\n                Message\n              </Label>\n              <Textarea\n                id=\"message\"\n                placeholder=\"Type your message here...\"\n                className=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n              />\n              <div className=\"flex items-center p-3 pt-0\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip className=\"size-4\" />\n                      <span className=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Attach File</TooltipContent>\n                </Tooltip>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic className=\"size-4\" />\n                      <span className=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Use Microphone</TooltipContent>\n                </Tooltip>\n                <Button type=\"submit\" size=\"sm\" className=\"ml-auto gap-1.5\">\n                  Send Message\n                  <CornerDownLeft className=\"size-3.5\" />\n                </Button>\n              </div>\n            </form>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-04.json b/apps/www/public/r/styles/default/dashboard-04.json
deleted file mode 100644
index dcc13f46511..00000000000
--- a/apps/www/public/r/styles/default/dashboard-04.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "dashboard-04",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "dropdown-menu",
-    "input"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-04.tsx",
-      "content": "import Link from \"next/link\"\nimport { CircleUser, Menu, Package2, Search } from \"lucide-react\"\n\nimport { 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 { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <nav className=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Settings\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Settings\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <main className=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n        <div className=\"mx-auto grid w-full max-w-6xl gap-2\">\n          <h1 className=\"text-3xl font-semibold\">Settings</h1>\n        </div>\n        <div className=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n          <nav\n            className=\"grid gap-4 text-sm text-muted-foreground\"\n            x-chunk=\"A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings.\"\n            x-chunk-container=\"chunk-container after:right-0\"\n          >\n            <Link href=\"#\" className=\"font-semibold text-primary\">\n              General\n            </Link>\n            <Link href=\"#\">Security</Link>\n            <Link href=\"#\">Integrations</Link>\n            <Link href=\"#\">Support</Link>\n            <Link href=\"#\">Organizations</Link>\n            <Link href=\"#\">Advanced</Link>\n          </nav>\n          <div className=\"grid gap-6\">\n            <Card x-chunk=\"A form to update the store name.\">\n              <CardHeader>\n                <CardTitle>Store Name</CardTitle>\n                <CardDescription>\n                  Used to identify your store in the marketplace.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Input placeholder=\"Store Name\" />\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n            <Card x-chunk=\"A form to update the plugins directory with a checkbox to allow administrators to change the directory.\">\n              <CardHeader>\n                <CardTitle>Plugins Directory</CardTitle>\n                <CardDescription>\n                  The directory within your project, in which your plugins are\n                  located.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form className=\"flex flex-col gap-4\">\n                  <Input\n                    placeholder=\"Project Name\"\n                    defaultValue=\"/content/plugins\"\n                  />\n                  <div className=\"flex items-center space-x-2\">\n                    <Checkbox id=\"include\" defaultChecked />\n                    <label\n                      htmlFor=\"include\"\n                      className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                    >\n                      Allow administrators to change the directory.\n                    </label>\n                  </div>\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n          </div>\n        </div>\n      </main>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-05.json b/apps/www/public/r/styles/default/dashboard-05.json
deleted file mode 100644
index de850a63d8c..00000000000
--- a/apps/www/public/r/styles/default/dashboard-05.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "dashboard-05",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "pagination",
-    "progress",
-    "separator",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-05.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { 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 {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\"\nimport { Progress } from \"@/registry/default/ui/progress\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Orders</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n          <div className=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n            <div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n              <Card\n                className=\"sm:col-span-2\"\n                x-chunk=\"A card for an orders dashboard with a description and a button to create a new order.\"\n              >\n                <CardHeader className=\"pb-3\">\n                  <CardTitle>Your Orders</CardTitle>\n                  <CardDescription className=\"max-w-lg text-balance leading-relaxed\">\n                    Introducing Our Dynamic Orders Dashboard for Seamless\n                    Management and Insightful Analysis.\n                  </CardDescription>\n                </CardHeader>\n                <CardFooter>\n                  <Button>Create New Order</Button>\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Week</CardDescription>\n                  <CardTitle className=\"text-4xl\">$1,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +25% from last week\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={25} aria-label=\"25% increase\" />\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Month</CardDescription>\n                  <CardTitle className=\"text-4xl\">$5,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +10% from last month\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={12} aria-label=\"12% increase\" />\n                </CardFooter>\n              </Card>\n            </div>\n            <Tabs defaultValue=\"week\">\n              <div className=\"flex items-center\">\n                <TabsList>\n                  <TabsTrigger value=\"week\">Week</TabsTrigger>\n                  <TabsTrigger value=\"month\">Month</TabsTrigger>\n                  <TabsTrigger value=\"year\">Year</TabsTrigger>\n                </TabsList>\n                <div className=\"ml-auto flex items-center gap-2\">\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        size=\"sm\"\n                        className=\"h-7 gap-1 text-sm\"\n                      >\n                        <ListFilter className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only sm:not-sr-only\">Filter</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuCheckboxItem checked>\n                        Fulfilled\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Declined\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Refunded\n                      </DropdownMenuCheckboxItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    className=\"h-7 gap-1 text-sm\"\n                  >\n                    <File className=\"h-3.5 w-3.5\" />\n                    <span className=\"sr-only sm:not-sr-only\">Export</span>\n                  </Button>\n                </div>\n              </div>\n              <TabsContent value=\"week\">\n                <Card x-chunk=\"A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.\">\n                  <CardHeader className=\"px-7\">\n                    <CardTitle>Orders</CardTitle>\n                    <CardDescription>\n                      Recent orders from your store.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead>Customer</TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Type\n                          </TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Status\n                          </TableHead>\n                          <TableHead className=\"hidden md:table-cell\">\n                            Date\n                          </TableHead>\n                          <TableHead className=\"text-right\">Amount</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow className=\"bg-accent\">\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Noah Williams</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              noah@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Subscription\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-25\n                          </TableCell>\n                          <TableCell className=\"text-right\">$350.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                </Card>\n              </TabsContent>\n            </Tabs>\n          </div>\n          <div>\n            <Card\n              className=\"overflow-hidden\"\n              x-chunk=\"An order details card with order details, shipping information, customer information and payment information.\"\n            >\n              <CardHeader className=\"flex flex-row items-start bg-muted/50\">\n                <div className=\"grid gap-0.5\">\n                  <CardTitle className=\"group flex items-center gap-2 text-lg\">\n                    Order Oe31b70H\n                    <Button\n                      size=\"icon\"\n                      variant=\"outline\"\n                      className=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                    >\n                      <Copy className=\"h-3 w-3\" />\n                      <span className=\"sr-only\">Copy Order ID</span>\n                    </Button>\n                  </CardTitle>\n                  <CardDescription>Date: November 23, 2023</CardDescription>\n                </div>\n                <div className=\"ml-auto flex items-center gap-1\">\n                  <Button size=\"sm\" variant=\"outline\" className=\"h-8 gap-1\">\n                    <Truck className=\"h-3.5 w-3.5\" />\n                    <span className=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                      Track Order\n                    </span>\n                  </Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-8 w-8\">\n                        <MoreVertical className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">More</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuItem>Edit</DropdownMenuItem>\n                      <DropdownMenuItem>Export</DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>Trash</DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </div>\n              </CardHeader>\n              <CardContent className=\"p-6 text-sm\">\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Order Details</div>\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Glimmer Lamps x <span>2</span>\n                      </span>\n                      <span>$250.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Aqua Filters x <span>1</span>\n                      </span>\n                      <span>$49.00</span>\n                    </li>\n                  </ul>\n                  <Separator className=\"my-2\" />\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Subtotal</span>\n                      <span>$299.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Shipping</span>\n                      <span>$5.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Tax</span>\n                      <span>$25.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between font-semibold\">\n                      <span className=\"text-muted-foreground\">Total</span>\n                      <span>$329.00</span>\n                    </li>\n                  </ul>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <div className=\"font-semibold\">Shipping Information</div>\n                    <address className=\"grid gap-0.5 not-italic text-muted-foreground\">\n                      <span>Liam Johnson</span>\n                      <span>1234 Main St.</span>\n                      <span>Anytown, CA 12345</span>\n                    </address>\n                  </div>\n                  <div className=\"grid auto-rows-max gap-3\">\n                    <div className=\"font-semibold\">Billing Information</div>\n                    <div className=\"text-muted-foreground\">\n                      Same as shipping address\n                    </div>\n                  </div>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Customer Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Customer</dt>\n                      <dd>Liam Johnson</dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Email</dt>\n                      <dd>\n                        <a href=\"mailto:\">liam@acme.com</a>\n                      </dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Phone</dt>\n                      <dd>\n                        <a href=\"tel:\">+1 234 567 890</a>\n                      </dd>\n                    </div>\n                  </dl>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Payment Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"flex items-center gap-1 text-muted-foreground\">\n                        <CreditCard className=\"h-4 w-4\" />\n                        Visa\n                      </dt>\n                      <dd>**** **** **** 4532</dd>\n                    </div>\n                  </dl>\n                </div>\n              </CardContent>\n              <CardFooter className=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n                <div className=\"text-xs text-muted-foreground\">\n                  Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n                </div>\n                <Pagination className=\"ml-auto mr-0 w-auto\">\n                  <PaginationContent>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronLeft className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Previous Order</span>\n                      </Button>\n                    </PaginationItem>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronRight className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Next Order</span>\n                      </Button>\n                    </PaginationItem>\n                  </PaginationContent>\n                </Pagination>\n              </CardFooter>\n            </Card>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-06.json b/apps/www/public/r/styles/default/dashboard-06.json
deleted file mode 100644
index 64efad051a1..00000000000
--- a/apps/www/public/r/styles/default/dashboard-06.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "dashboard-06",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-06.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { 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 {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>All Products</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <Tabs defaultValue=\"all\">\n            <div className=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"all\">All</TabsTrigger>\n                <TabsTrigger value=\"active\">Active</TabsTrigger>\n                <TabsTrigger value=\"draft\">Draft</TabsTrigger>\n                <TabsTrigger value=\"archived\" className=\"hidden sm:flex\">\n                  Archived\n                </TabsTrigger>\n              </TabsList>\n              <div className=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"outline\" size=\"sm\" className=\"h-8 gap-1\">\n                      <ListFilter className=\"h-3.5 w-3.5\" />\n                      <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                        Filter\n                      </span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuCheckboxItem checked>\n                      Active\n                    </DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>\n                      Archived\n                    </DropdownMenuCheckboxItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button size=\"sm\" variant=\"outline\" className=\"h-8 gap-1\">\n                  <File className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Export\n                  </span>\n                </Button>\n                <Button size=\"sm\" className=\"h-8 gap-1\">\n                  <PlusCircle className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Add Product\n                  </span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"all\">\n              <Card x-chunk=\"A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.\">\n                <CardHeader>\n                  <CardTitle>Products</CardTitle>\n                  <CardDescription>\n                    Manage your products and view their sales performance.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead className=\"hidden w-[100px] sm:table-cell\">\n                          <span className=\"sr-only\">Image</span>\n                        </TableHead>\n                        <TableHead>Name</TableHead>\n                        <TableHead>Status</TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Price\n                        </TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Total Sales\n                        </TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Created at\n                        </TableHead>\n                        <TableHead>\n                          <span className=\"sr-only\">Actions</span>\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Laser Lemonade Machine\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Draft</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $499.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          25\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-07-12 10:42 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Hypernova Headphones\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $129.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          100\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-10-18 03:21 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          AeroGlow Desk Lamp\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $39.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          50\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-11-29 08:15 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          TechTonic Energy Drink\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"secondary\">Draft</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $2.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          0\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-12-25 11:59 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Gamer Gear Pro Controller\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $59.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          75\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-01-01 12:00 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Luminous VR Headset\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $199.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          30\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-02-14 02:14 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter>\n                  <div className=\"text-xs text-muted-foreground\">\n                    Showing <strong>1-10</strong> of <strong>32</strong>{\" \"}\n                    products\n                  </div>\n                </CardFooter>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-07.json b/apps/www/public/r/styles/default/dashboard-07.json
deleted file mode 100644
index 6dee0025780..00000000000
--- a/apps/www/public/r/styles/default/dashboard-07.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "dashboard-07",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "pagination",
-    "progress",
-    "separator",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-07.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { 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 {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Edit Product</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <div className=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n            <div className=\"flex items-center gap-4\">\n              <Button variant=\"outline\" size=\"icon\" className=\"h-7 w-7\">\n                <ChevronLeft className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Back</span>\n              </Button>\n              <h1 className=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n                Pro Controller\n              </h1>\n              <Badge variant=\"outline\" className=\"ml-auto sm:ml-0\">\n                In stock\n              </Badge>\n              <div className=\"hidden items-center gap-2 md:ml-auto md:flex\">\n                <Button variant=\"outline\" size=\"sm\">\n                  Discard\n                </Button>\n                <Button size=\"sm\">Save Product</Button>\n              </div>\n            </div>\n            <div className=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n              <div className=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product details\">\n                  <CardHeader>\n                    <CardTitle>Product Details</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"name\">Name</Label>\n                        <Input\n                          id=\"name\"\n                          type=\"text\"\n                          className=\"w-full\"\n                          defaultValue=\"Gamer Gear Pro Controller\"\n                        />\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"description\">Description</Label>\n                        <Textarea\n                          id=\"description\"\n                          defaultValue=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                          className=\"min-h-32\"\n                        />\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product stock and variants\">\n                  <CardHeader>\n                    <CardTitle>Stock</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead className=\"w-[100px]\">SKU</TableHead>\n                          <TableHead>Stock</TableHead>\n                          <TableHead>Price</TableHead>\n                          <TableHead className=\"w-[100px]\">Size</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-001\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-1\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-1\"\n                              type=\"number\"\n                              defaultValue=\"100\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-1\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-1\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-002\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-2\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-2\"\n                              type=\"number\"\n                              defaultValue=\"143\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-2\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-2\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"m\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-003\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-3\"\n                              type=\"number\"\n                              defaultValue=\"32\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"price-3\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                  <CardFooter className=\"justify-center border-t p-4\">\n                    <Button size=\"sm\" variant=\"ghost\" className=\"gap-1\">\n                      <PlusCircle className=\"h-3.5 w-3.5\" />\n                      Add Variant\n                    </Button>\n                  </CardFooter>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product category and subcategory\">\n                  <CardHeader>\n                    <CardTitle>Product Category</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6 sm:grid-cols-3\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"category\">Category</Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"category\"\n                            aria-label=\"Select category\"\n                          >\n                            <SelectValue placeholder=\"Select category\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"clothing\">Clothing</SelectItem>\n                            <SelectItem value=\"electronics\">\n                              Electronics\n                            </SelectItem>\n                            <SelectItem value=\"accessories\">\n                              Accessories\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"subcategory\">\n                          Subcategory (optional)\n                        </Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"subcategory\"\n                            aria-label=\"Select subcategory\"\n                          >\n                            <SelectValue placeholder=\"Select subcategory\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"t-shirts\">T-Shirts</SelectItem>\n                            <SelectItem value=\"hoodies\">Hoodies</SelectItem>\n                            <SelectItem value=\"sweatshirts\">\n                              Sweatshirts\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              </div>\n              <div className=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product status\">\n                  <CardHeader>\n                    <CardTitle>Product Status</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"status\">Status</Label>\n                        <Select>\n                          <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                            <SelectValue placeholder=\"Select status\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"draft\">Draft</SelectItem>\n                            <SelectItem value=\"published\">Active</SelectItem>\n                            <SelectItem value=\"archived\">Archived</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card\n                  className=\"overflow-hidden\"\n                  x-chunk=\"A card with a form to upload product images\"\n                >\n                  <CardHeader>\n                    <CardTitle>Product Images</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-2\">\n                      <Image\n                        alt=\"Product image\"\n                        className=\"aspect-square w-full rounded-md object-cover\"\n                        height=\"300\"\n                        src=\"/placeholder.svg\"\n                        width=\"300\"\n                      />\n                      <div className=\"grid grid-cols-3 gap-2\">\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button className=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                          <Upload className=\"h-4 w-4 text-muted-foreground\" />\n                          <span className=\"sr-only\">Upload</span>\n                        </button>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a call to action to archive the product\">\n                  <CardHeader>\n                    <CardTitle>Archive Product</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div></div>\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Archive Product\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-center gap-2 md:hidden\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">Save Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/data-table-demo.json b/apps/www/public/r/styles/default/data-table-demo.json
new file mode 100644
index 00000000000..8daeb06eca2
--- /dev/null
+++ b/apps/www/public/r/styles/default/data-table-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-table-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "data-table"
+  ],
+  "files": [
+    {
+      "path": "examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  SortingState,\n  VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst data: Payment[] = [\n  {\n    id: \"m5gr84i9\",\n    amount: 316,\n    status: \"success\",\n    email: \"ken99@example.com\",\n  },\n  {\n    id: \"3u1reuv4\",\n    amount: 242,\n    status: \"success\",\n    email: \"Abe45@example.com\",\n  },\n  {\n    id: \"derv1ws0\",\n    amount: 837,\n    status: \"processing\",\n    email: \"Monserrat44@example.com\",\n  },\n  {\n    id: \"5kma53ae\",\n    amount: 874,\n    status: \"success\",\n    email: \"Silas22@example.com\",\n  },\n  {\n    id: \"bhqecj4p\",\n    amount: 721,\n    status: \"failed\",\n    email: \"carmella@example.com\",\n  },\n]\n\nexport type Payment = {\n  id: string\n  amount: number\n  status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n  email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n    ),\n  },\n  {\n    accessorKey: \"email\",\n    header: ({ column }) => {\n      return (\n        <Button\n          variant=\"ghost\"\n          onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n        >\n          Email\n          <ArrowUpDown />\n        </Button>\n      )\n    },\n    cell: ({ row }) => <div className=\"lowercase\">{row.getValue(\"email\")}</div>,\n  },\n  {\n    accessorKey: \"amount\",\n    header: () => <div className=\"text-right\">Amount</div>,\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"amount\"))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n\n      return <div className=\"text-right font-medium\">{formatted}</div>\n    },\n  },\n  {\n    id: \"actions\",\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" className=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem\n              onClick={() => navigator.clipboard.writeText(payment.id)}\n            >\n              Copy payment ID\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>View customer</DropdownMenuItem>\n            <DropdownMenuItem>View payment details</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      )\n    },\n  },\n]\n\nexport default function DataTableDemo() {\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [rowSelection, setRowSelection] = React.useState({})\n\n  const table = useReactTable({\n    data,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n  })\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-center py-4\">\n        <Input\n          placeholder=\"Filter emails...\"\n          value={(table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"}\n          onChange={(event) =>\n            table.getColumn(\"email\")?.setFilterValue(event.target.value)\n          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDown />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {table\n              .getAllColumns()\n              .filter((column) => column.getCanHide())\n              .map((column) => {\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    className=\"capitalize\"\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {column.id}\n                  </DropdownMenuCheckboxItem>\n                )\n              })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex items-center justify-end space-x-2 py-4\">\n        <div className=\"flex-1 text-sm text-muted-foreground\">\n          {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n          {table.getFilteredRowModel().rows.length} row(s) selected.\n        </div>\n        <div className=\"space-x-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            Previous\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            Next\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/date-picker-demo.json b/apps/www/public/r/styles/default/date-picker-demo.json
new file mode 100644
index 00000000000..2fbcbf66ce4
--- /dev/null
+++ b/apps/www/public/r/styles/default/date-picker-demo.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[280px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/date-picker-form.json b/apps/www/public/r/styles/default/date-picker-form.json
new file mode 100644
index 00000000000..2f4a593f8a6
--- /dev/null
+++ b/apps/www/public/r/styles/default/date-picker-form.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function DatePickerForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/date-picker-with-presets.json b/apps/www/public/r/styles/default/date-picker-with-presets.json
new file mode 100644
index 00000000000..21a33a4230c
--- /dev/null
+++ b/apps/www/public/r/styles/default/date-picker-with-presets.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-presets",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-presets.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function DatePickerWithPresets() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[280px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"flex w-auto flex-col space-y-2 p-2\">\n        <Select\n          onValueChange={(value) =>\n            setDate(addDays(new Date(), parseInt(value)))\n          }\n        >\n          <SelectTrigger>\n            <SelectValue placeholder=\"Select\" />\n          </SelectTrigger>\n          <SelectContent position=\"popper\">\n            <SelectItem value=\"0\">Today</SelectItem>\n            <SelectItem value=\"1\">Tomorrow</SelectItem>\n            <SelectItem value=\"3\">In 3 days</SelectItem>\n            <SelectItem value=\"7\">In a week</SelectItem>\n          </SelectContent>\n        </Select>\n        <div className=\"rounded-md border\">\n          <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/date-picker-with-range.json b/apps/www/public/r/styles/default/date-picker-with-range.json
new file mode 100644
index 00000000000..a46e4127757
--- /dev/null
+++ b/apps/www/public/r/styles/default/date-picker-with-range.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-range",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-range.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function DatePickerWithRange({\n  className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(2022, 0, 20),\n    to: addDays(new Date(2022, 0, 20), 20),\n  })\n\n  return (\n    <div className={cn(\"grid gap-2\", className)}>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id=\"date\"\n            variant={\"outline\"}\n            className={cn(\n              \"w-[300px] justify-start text-left font-normal\",\n              !date && \"text-muted-foreground\"\n            )}\n          >\n            <CalendarIcon />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            initialFocus\n            mode=\"range\"\n            defaultMonth={date?.from}\n            selected={date}\n            onSelect={setDate}\n            numberOfMonths={2}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dialog-close-button.json b/apps/www/public/r/styles/default/dialog-close-button.json
new file mode 100644
index 00000000000..fd434159dd5
--- /dev/null
+++ b/apps/www/public/r/styles/default/dialog-close-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-close-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-close-button.tsx",
+      "content": "import { Copy } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function DialogCloseButton() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Share</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share link</DialogTitle>\n          <DialogDescription>\n            Anyone who has this link will be able to view this.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex items-center space-x-2\">\n          <div className=\"grid flex-1 gap-2\">\n            <Label htmlFor=\"link\" className=\"sr-only\">\n              Link\n            </Label>\n            <Input\n              id=\"link\"\n              defaultValue=\"https://ui.shadcn.com/docs/installation\"\n              readOnly\n            />\n          </div>\n          <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n            <span className=\"sr-only\">Copy</span>\n            <Copy />\n          </Button>\n        </div>\n        <DialogFooter className=\"sm:justify-start\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"secondary\">\n              Close\n            </Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dialog-demo.json b/apps/www/public/r/styles/default/dialog-demo.json
new file mode 100644
index 00000000000..8ee6c854989
--- /dev/null
+++ b/apps/www/public/r/styles/default/dialog-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input\n              id=\"name\"\n              defaultValue=\"Pedro Duarte\"\n              className=\"col-span-3\"\n            />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input\n              id=\"username\"\n              defaultValue=\"@peduarte\"\n              className=\"col-span-3\"\n            />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dialog.json b/apps/www/public/r/styles/default/dialog.json
index ad890398b79..9bd36471525 100644
--- a/apps/www/public/r/styles/default/dialog.json
+++ b/apps/www/public/r/styles/default/dialog.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "dialog",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/drawer-demo.json b/apps/www/public/r/styles/default/drawer-demo.json
new file mode 100644
index 00000000000..8dd069d192f
--- /dev/null
+++ b/apps/www/public/r/styles/default/drawer-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport default function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/drawer-dialog.json b/apps/www/public/r/styles/default/drawer-dialog.json
new file mode 100644
index 00000000000..6838981a3a1
--- /dev/null
+++ b/apps/www/public/r/styles/default/drawer-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-dialog",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "drawer",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-dialog.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Edit Profile</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you're done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-4\", className)}>\n      <div className=\"grid gap-2\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-2\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/drawer.json b/apps/www/public/r/styles/default/drawer.json
index 6e23d8aa8f5..4ea15139020 100644
--- a/apps/www/public/r/styles/default/drawer.json
+++ b/apps/www/public/r/styles/default/drawer.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "drawer",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "vaul",
     "@radix-ui/react-dialog"
diff --git a/apps/www/public/r/styles/default/dropdown-menu-checkboxes.json b/apps/www/public/r/styles/default/dropdown-menu-checkboxes.json
new file mode 100644
index 00000000000..3c657ea94cc
--- /dev/null
+++ b/apps/www/public/r/styles/default/dropdown-menu-checkboxes.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-checkboxes",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-checkboxes.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\ntype Checked = DropdownMenuCheckboxItemProps[\"checked\"]\n\nexport default function DropdownMenuCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n  const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuCheckboxItem\n          checked={showStatusBar}\n          onCheckedChange={setShowStatusBar}\n        >\n          Status Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showActivityBar}\n          onCheckedChange={setShowActivityBar}\n          disabled\n        >\n          Activity Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showPanel}\n          onCheckedChange={setShowPanel}\n        >\n          Panel\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dropdown-menu-demo.json b/apps/www/public/r/styles/default/dropdown-menu-demo.json
new file mode 100644
index 00000000000..b6337201c6c
--- /dev/null
+++ b/apps/www/public/r/styles/default/dropdown-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-demo.tsx",
+      "content": "import {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User />\n            <span>Profile</span>\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <CreditCard />\n            <span>Billing</span>\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Settings />\n            <span>Settings</span>\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Keyboard />\n            <span>Keyboard shortcuts</span>\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Users />\n            <span>Team</span>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <UserPlus />\n              <span>Invite users</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>\n                  <Mail />\n                  <span>Email</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <MessageSquare />\n                  <span>Message</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <PlusCircle />\n                  <span>More...</span>\n                </DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            <Plus />\n            <span>New Team</span>\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <Github />\n          <span>GitHub</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <LifeBuoy />\n          <span>Support</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem disabled>\n          <Cloud />\n          <span>API</span>\n        </DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOut />\n          <span>Log out</span>\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dropdown-menu-radio-group.json b/apps/www/public/r/styles/default/dropdown-menu-radio-group.json
new file mode 100644
index 00000000000..39edac72f3d
--- /dev/null
+++ b/apps/www/public/r/styles/default/dropdown-menu-radio-group.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-radio-group",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function DropdownMenuRadioGroupDemo() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>\n          <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"bottom\">Bottom</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"right\">Right</DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dropdown-menu.json b/apps/www/public/r/styles/default/dropdown-menu.json
index ddc86171061..52bf6a0befa 100644
--- a/apps/www/public/r/styles/default/dropdown-menu.json
+++ b/apps/www/public/r/styles/default/dropdown-menu.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "dropdown-menu",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-dropdown-menu"
   ],
   "files": [
     {
       "path": "ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/form.json b/apps/www/public/r/styles/default/form.json
index 0618a34a4b0..6e02cdc914f 100644
--- a/apps/www/public/r/styles/default/form.json
+++ b/apps/www/public/r/styles/default/form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "form",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-label",
     "@radix-ui/react-slot",
@@ -15,7 +17,7 @@
   "files": [
     {
       "path": "ui/form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  ControllerProps,\n  FieldPath,\n  FieldValues,\n  FormProvider,\n  useFormContext,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message) : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-sm font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-sm font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/hover-card-demo.json b/apps/www/public/r/styles/default/hover-card-demo.json
new file mode 100644
index 00000000000..1507f638374
--- /dev/null
+++ b/apps/www/public/r/styles/default/hover-card-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "hover-card"
+  ],
+  "files": [
+    {
+      "path": "examples/hover-card-demo.tsx",
+      "content": "import { CalendarDays } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarDays className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-muted-foreground\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/hover-card.json b/apps/www/public/r/styles/default/hover-card.json
index c6e7a832ce7..0bbe76aa4bd 100644
--- a/apps/www/public/r/styles/default/hover-card.json
+++ b/apps/www/public/r/styles/default/hover-card.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hover-card",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-hover-card"
   ],
   "files": [
     {
       "path": "ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/index.json b/apps/www/public/r/styles/default/index.json
index d13e4c8203a..924399da430 100644
--- a/apps/www/public/r/styles/default/index.json
+++ b/apps/www/public/r/styles/default/index.json
@@ -1,6 +1,8 @@
 {
-  "name": "default",
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
   "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "tailwindcss-animate",
     "class-variance-authority",
@@ -9,6 +11,7 @@
   "registryDependencies": [
     "utils"
   ],
+  "files": [],
   "tailwind": {
     "config": {
       "plugins": [
@@ -16,6 +19,5 @@
       ]
     }
   },
-  "cssVars": {},
-  "files": []
+  "cssVars": {}
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-demo.json b/apps/www/public/r/styles/default/input-demo.json
new file mode 100644
index 00000000000..df56c06cc1c
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-demo.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-disabled.json b/apps/www/public/r/styles/default/input-disabled.json
new file mode 100644
index 00000000000..10b9e1cae4f
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-disabled.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputDisabled() {\n  return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-file.json b/apps/www/public/r/styles/default/input-file.json
new file mode 100644
index 00000000000..970ddcfba58
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-file.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-file",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-file.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function InputFile() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"picture\">Picture</Label>\n      <Input id=\"picture\" type=\"file\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-form.json b/apps/www/public/r/styles/default/input-form.json
new file mode 100644
index 00000000000..53a2a168b5c
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nconst FormSchema = z.object({\n  username: z.string().min(2, {\n    message: \"Username must be at least 2 characters.\",\n  }),\n})\n\nexport default function InputForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      username: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-otp-controlled.json b/apps/www/public/r/styles/default/input-otp-controlled.json
new file mode 100644
index 00000000000..b4a012645f1
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-otp-controlled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-controlled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport default function InputOTPControlled() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <div className=\"space-y-2\">\n      <InputOTP\n        maxLength={6}\n        value={value}\n        onChange={(value) => setValue(value)}\n      >\n        <InputOTPGroup>\n          <InputOTPSlot index={0} />\n          <InputOTPSlot index={1} />\n          <InputOTPSlot index={2} />\n          <InputOTPSlot index={3} />\n          <InputOTPSlot index={4} />\n          <InputOTPSlot index={5} />\n        </InputOTPGroup>\n      </InputOTP>\n      <div className=\"text-center text-sm\">\n        {value === \"\" ? (\n          <>Enter your one-time password.</>\n        ) : (\n          <>You entered: {value}</>\n        )}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-otp-demo.json b/apps/www/public/r/styles/default/input-otp-demo.json
new file mode 100644
index 00000000000..9bd8b8eae67
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-otp-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-demo.tsx",
+      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-otp-form.json b/apps/www/public/r/styles/default/input-otp-form.json
new file mode 100644
index 00000000000..ce849e1ec92
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-otp-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nconst FormSchema = z.object({\n  pin: z.string().min(6, {\n    message: \"Your one-time password must be 6 characters.\",\n  }),\n})\n\nexport default function InputOTPForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      pin: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"pin\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>One-Time Password</FormLabel>\n              <FormControl>\n                <InputOTP maxLength={6} {...field}>\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormControl>\n              <FormDescription>\n                Please enter the one-time password sent to your phone.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-otp-pattern.json b/apps/www/public/r/styles/default/input-otp-pattern.json
new file mode 100644
index 00000000000..db857852de5
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-otp-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-pattern",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-pattern.tsx",
+      "content": "import { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport default function InputOTPPattern() {\n  return (\n    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-otp-separator.json b/apps/www/public/r/styles/default/input-otp-separator.json
new file mode 100644
index 00000000000..6c19fca338b
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-otp-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-separator",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-separator.tsx",
+      "content": "import React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport default function InputOTPWithSeparator() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-otp.json b/apps/www/public/r/styles/default/input-otp.json
index f35cc7cef5e..93a19b5dc3d 100644
--- a/apps/www/public/r/styles/default/input-otp.json
+++ b/apps/www/public/r/styles/default/input-otp.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "input-otp",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "input-otp"
   ],
diff --git a/apps/www/public/r/styles/default/input-with-button.json b/apps/www/public/r/styles/default/input-with-button.json
new file mode 100644
index 00000000000..9017dd28126
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-with-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-button.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputWithButton() {\n  return (\n    <div className=\"flex w-full max-w-sm items-center space-x-2\">\n      <Input type=\"email\" placeholder=\"Email\" />\n      <Button type=\"submit\">Subscribe</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-with-label.json b/apps/www/public/r/styles/default/input-with-label.json
new file mode 100644
index 00000000000..1ff7204c162
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-with-label.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-label",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-label.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function InputWithLabel() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email\">Email</Label>\n      <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input-with-text.json b/apps/www/public/r/styles/default/input-with-text.json
new file mode 100644
index 00000000000..032d6bed937
--- /dev/null
+++ b/apps/www/public/r/styles/default/input-with-text.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-text.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function InputWithText() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email-2\">Email</Label>\n      <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n      <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/input.json b/apps/www/public/r/styles/default/input.json
index 24dcd50e3c1..c91c1d3de85 100644
--- a/apps/www/public/r/styles/default/input.json
+++ b/apps/www/public/r/styles/default/input.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "input",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/input.tsx",
-      "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-sm 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\",\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\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",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/label-demo.json b/apps/www/public/r/styles/default/label-demo.json
new file mode 100644
index 00000000000..e5b9008d45c
--- /dev/null
+++ b/apps/www/public/r/styles/default/label-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/label.json b/apps/www/public/r/styles/default/label.json
index 44a111a2e9e..9731d7b73a3 100644
--- a/apps/www/public/r/styles/default/label.json
+++ b/apps/www/public/r/styles/default/label.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "label",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-label"
   ],
diff --git a/apps/www/public/r/styles/default/login-01.json b/apps/www/public/r/styles/default/login-01.json
index 202a84c87a7..b291727d162 100644
--- a/apps/www/public/r/styles/default/login-01.json
+++ b/apps/www/public/r/styles/default/login-01.json
@@ -1,6 +1,9 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "login-01",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple login form.",
   "registryDependencies": [
     "button",
     "card",
@@ -9,15 +12,20 @@
   ],
   "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",
+      "path": "blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/default/blocks/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",
-      "type": "registry:component"
+      "path": "blocks/login-01/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>\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": ""
     }
+  ],
+  "categories": [
+    "authentication",
+    "login"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/login-02.json b/apps/www/public/r/styles/default/login-02.json
new file mode 100644
index 00000000000..1a2b026550f
--- /dev/null
+++ b/apps/www/public/r/styles/default/login-02.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/default/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/login-03.json b/apps/www/public/r/styles/default/login-03.json
new file mode 100644
index 00000000000..da402b8b74f
--- /dev/null
+++ b/apps/www/public/r/styles/default/login-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/default/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/login-04.json b/apps/www/public/r/styles/default/login-04.json
new file mode 100644
index 00000000000..931d3d0d587
--- /dev/null
+++ b/apps/www/public/r/styles/default/login-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/default/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-04/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Card, CardContent } 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.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\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                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 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              <div className=\"grid grid-cols-3 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                  <span className=\"sr-only\">Login with Apple</span>\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                  <span className=\"sr-only\">Login with Google</span>\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=\"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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\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          <div className=\"relative hidden bg-muted md: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        </CardContent>\n      </Card>\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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/login-05.json b/apps/www/public/r/styles/default/login-05.json
new file mode 100644
index 00000000000..041b51d88be
--- /dev/null
+++ b/apps/www/public/r/styles/default/login-05.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/default/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/menubar-demo.json b/apps/www/public/r/styles/default/menubar-demo.json
new file mode 100644
index 00000000000..ae80b235d63
--- /dev/null
+++ b/apps/www/public/r/styles/default/menubar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "menubar"
+  ],
+  "files": [
+    {
+      "path": "examples/menubar-demo.tsx",
+      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/default/ui/menubar\"\n\nexport default function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/menubar.json b/apps/www/public/r/styles/default/menubar.json
index e482f1c0ea2..7e07ef6e615 100644
--- a/apps/www/public/r/styles/default/menubar.json
+++ b/apps/www/public/r/styles/default/menubar.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "menubar",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-menubar"
   ],
   "files": [
     {
       "path": "ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"flex h-10 items-center space-x-1 rounded-md border bg-background p-1\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n    ref\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarPortal,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarGroup,\n  MenubarSub,\n  MenubarShortcut,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup {...props} />\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"flex h-10 items-center space-x-1 rounded-md border bg-background p-1\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n    ref\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarPortal,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarGroup,\n  MenubarSub,\n  MenubarShortcut,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/mode-toggle.json b/apps/www/public/r/styles/default/mode-toggle.json
new file mode 100644
index 00000000000..b81685120fb
--- /dev/null
+++ b/apps/www/public/r/styles/default/mode-toggle.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mode-toggle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n  const { setTheme } = useTheme()\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"icon\">\n          <Sun className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n          <Moon className=\"absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n          <span className=\"sr-only\">Toggle theme</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n          Light\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n          Dark\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n          System\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/navigation-menu-demo.json b/apps/www/public/r/styles/default/navigation-menu-demo.json
new file mode 100644
index 00000000000..ec250b62a50
--- /dev/null
+++ b/apps/www/public/r/styles/default/navigation-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/default/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <Icons.logo className=\"h-6 w-6\" />\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\n                      Beautifully designed components that you can copy and\n                      paste into your apps. Accessible. Customizable. Open\n                      Source.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nconst ListItem = React.forwardRef<\n  React.ElementRef<\"a\">,\n  React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          ref={ref}\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"text-sm font-medium leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/navigation-menu.json b/apps/www/public/r/styles/default/navigation-menu.json
index dda2951c12c..42539c27559 100644
--- a/apps/www/public/r/styles/default/navigation-menu.json
+++ b/apps/www/public/r/styles/default/navigation-menu.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "navigation-menu",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-navigation-menu"
   ],
   "files": [
     {
       "path": "ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center space-x-1\",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDown\n      className=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto \",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n",
+      "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center space-x-1\",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDown\n      className=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto \",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/pagination-demo.json b/apps/www/public/r/styles/default/pagination-demo.json
new file mode 100644
index 00000000000..9081ba92302
--- /dev/null
+++ b/apps/www/public/r/styles/default/pagination-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "pagination"
+  ],
+  "files": [
+    {
+      "path": "examples/pagination-demo.tsx",
+      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\"\n\nexport default function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/pagination.json b/apps/www/public/r/styles/default/pagination.json
index d1240895b11..536c5d24ae4 100644
--- a/apps/www/public/r/styles/default/pagination.json
+++ b/apps/www/public/r/styles/default/pagination.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "pagination",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "button"
   ],
diff --git a/apps/www/public/r/styles/default/popover-demo.json b/apps/www/public/r/styles/default/popover-demo.json
new file mode 100644
index 00000000000..c602f263f65
--- /dev/null
+++ b/apps/www/public/r/styles/default/popover-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/popover-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/popover.json b/apps/www/public/r/styles/default/popover.json
index b1b3e4283a3..3ed248ca8a4 100644
--- a/apps/www/public/r/styles/default/popover.json
+++ b/apps/www/public/r/styles/default/popover.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "popover",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-popover"
   ],
   "files": [
     {
       "path": "ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/progress-demo.json b/apps/www/public/r/styles/default/progress-demo.json
new file mode 100644
index 00000000000..e66a5a9ffda
--- /dev/null
+++ b/apps/www/public/r/styles/default/progress-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "progress"
+  ],
+  "files": [
+    {
+      "path": "examples/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/default/ui/progress\"\n\nexport default function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/progress.json b/apps/www/public/r/styles/default/progress.json
index 44b04f655c1..ca2d331b1cd 100644
--- a/apps/www/public/r/styles/default/progress.json
+++ b/apps/www/public/r/styles/default/progress.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "progress",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-progress"
   ],
diff --git a/apps/www/public/r/styles/default/radio-group-demo.json b/apps/www/public/r/styles/default/radio-group-demo.json
new file mode 100644
index 00000000000..b0a46d81cd5
--- /dev/null
+++ b/apps/www/public/r/styles/default/radio-group-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/radio-group-form.json b/apps/www/public/r/styles/default/radio-group-form.json
new file mode 100644
index 00000000000..a73222ff6c7
--- /dev/null
+++ b/apps/www/public/r/styles/default/radio-group-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "radio-group",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\"\n\nconst FormSchema = z.object({\n  type: z.enum([\"all\", \"mentions\", \"none\"], {\n    required_error: \"You need to select a notification type.\",\n  }),\n})\n\nexport default function RadioGroupForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"type\"\n          render={({ field }) => (\n            <FormItem className=\"space-y-3\">\n              <FormLabel>Notify me about...</FormLabel>\n              <FormControl>\n                <RadioGroup\n                  onValueChange={field.onChange}\n                  defaultValue={field.value}\n                  className=\"flex flex-col space-y-1\"\n                >\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"all\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      All new messages\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"mentions\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      Direct messages and mentions\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"none\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">Nothing</FormLabel>\n                  </FormItem>\n                </RadioGroup>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/radio-group.json b/apps/www/public/r/styles/default/radio-group.json
index d65fc13ceed..f2225d2a30a 100644
--- a/apps/www/public/r/styles/default/radio-group.json
+++ b/apps/www/public/r/styles/default/radio-group.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "radio-group",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-radio-group"
   ],
diff --git a/apps/www/public/r/styles/default/registry.json b/apps/www/public/r/styles/default/registry.json
new file mode 100644
index 00000000000..0924ef2cb47
--- /dev/null
+++ b/apps/www/public/r/styles/default/registry.json
@@ -0,0 +1,6942 @@
+{
+  "name": "shadcn/ui",
+  "homepage": "https://ui.shadcn.com",
+  "items": [
+    {
+      "name": "index",
+      "type": "registry:style",
+      "dependencies": [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "utils"
+      ],
+      "files": [],
+      "tailwind": {
+        "config": {
+          "plugins": [
+            "require(\"tailwindcss-animate\")"
+          ]
+        }
+      },
+      "cssVars": {}
+    },
+    {
+      "name": "style",
+      "type": "registry:style",
+      "dependencies": [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "utils"
+      ],
+      "files": [],
+      "tailwind": {
+        "config": {
+          "plugins": [
+            "require(\"tailwindcss-animate\")"
+          ]
+        }
+      },
+      "cssVars": {}
+    },
+    {
+      "name": "accordion",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-accordion"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/accordion.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "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"
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "alert",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/alert.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-alert-dialog"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/alert-dialog.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-aspect-ratio"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/aspect-ratio.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "avatar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/avatar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/badge.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/breadcrumb.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/button.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar",
+      "type": "registry:ui",
+      "dependencies": [
+        "react-day-picker@latest",
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/calendar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/card.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel",
+      "type": "registry:ui",
+      "dependencies": [
+        "embla-carousel-react"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/carousel.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart",
+      "type": "registry:ui",
+      "dependencies": [
+        "recharts@2.15.4",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "card"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/chart.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/checkbox.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "collapsible",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/collapsible.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command",
+      "type": "registry:ui",
+      "dependencies": [
+        "cmdk"
+      ],
+      "registryDependencies": [
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/command.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "context-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-context-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/context-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/dialog.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer",
+      "type": "registry:ui",
+      "dependencies": [
+        "vaul",
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/drawer.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/dropdown-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "form",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label",
+        "@radix-ui/react-slot",
+        "@hookform/resolvers",
+        "zod",
+        "react-hook-form"
+      ],
+      "registryDependencies": [
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/form.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "hover-card",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-hover-card"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/hover-card.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/input.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp",
+      "type": "registry:ui",
+      "dependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/input-otp.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/label.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "menubar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-menubar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/menubar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-navigation-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/navigation-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "pagination",
+      "type": "registry:ui",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/pagination.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "popover",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-popover"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/popover.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-progress"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/progress.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/radio-group.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable",
+      "type": "registry:ui",
+      "dependencies": [
+        "react-resizable-panels"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/resizable.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/scroll-area.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-select"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/select.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "separator",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-separator"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/separator.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/sheet.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "separator",
+        "sheet",
+        "tooltip",
+        "input",
+        "use-mobile",
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/sidebar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "colors": {
+                "sidebar": {
+                  "DEFAULT": "hsl(var(--sidebar-background))",
+                  "foreground": "hsl(var(--sidebar-foreground))",
+                  "primary": "hsl(var(--sidebar-primary))",
+                  "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                  "accent": "hsl(var(--sidebar-accent))",
+                  "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                  "border": "hsl(var(--sidebar-border))",
+                  "ring": "hsl(var(--sidebar-ring))"
+                }
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "sidebar-background": "0 0% 98%",
+          "sidebar-foreground": "240 5.3% 26.1%",
+          "sidebar-primary": "240 5.9% 10%",
+          "sidebar-primary-foreground": "0 0% 98%",
+          "sidebar-accent": "240 4.8% 95.9%",
+          "sidebar-accent-foreground": "240 5.9% 10%",
+          "sidebar-border": "220 13% 91%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        },
+        "dark": {
+          "sidebar-background": "240 5.9% 10%",
+          "sidebar-foreground": "240 4.8% 95.9%",
+          "sidebar-primary": "224.3 76.3% 48%",
+          "sidebar-primary-foreground": "0 0% 100%",
+          "sidebar-accent": "240 3.7% 15.9%",
+          "sidebar-accent-foreground": "240 4.8% 95.9%",
+          "sidebar-border": "240 3.7% 15.9%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        }
+      }
+    },
+    {
+      "name": "skeleton",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/skeleton.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "slider",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slider"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/slider.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sonner",
+      "type": "registry:ui",
+      "dependencies": [
+        "sonner",
+        "next-themes"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/sonner.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-switch"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/switch.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "table",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/table.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tabs",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/tabs.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/default/ui/textarea.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toast"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/toast.tsx",
+          "type": "registry:ui",
+          "target": ""
+        },
+        {
+          "path": "registry/default/hooks/use-toast.ts",
+          "type": "registry:hook",
+          "target": ""
+        },
+        {
+          "path": "registry/default/ui/toaster.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/toggle.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toggle-group"
+      ],
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/toggle-group.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tooltip",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/tooltip.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dashboard-01",
+      "type": "registry:block",
+      "description": "A dashboard with sidebar, charts and data table.",
+      "dependencies": [
+        "@dnd-kit/core",
+        "@dnd-kit/modifiers",
+        "@dnd-kit/sortable",
+        "@dnd-kit/utilities",
+        "@tanstack/react-table",
+        "zod"
+      ],
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "chart",
+        "card",
+        "select",
+        "tabs",
+        "table",
+        "toggle-group",
+        "badge",
+        "button",
+        "checkbox",
+        "dropdown-menu",
+        "drawer",
+        "input",
+        "avatar",
+        "sheet",
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/dashboard-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/data.json",
+          "type": "registry:file",
+          "target": "app/dashboard/data.json"
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/chart-area-interactive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/data-table.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/nav-documents.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/section-cards.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/dashboard-01/components/site-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-01",
+      "type": "registry:block",
+      "description": "A simple sidebar with navigation grouped by section.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-01/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-01/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-01/components/version-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-02",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible sections.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-02/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-02/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-02/components/version-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-03",
+      "type": "registry:block",
+      "description": "A sidebar with submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-03/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-04",
+      "type": "registry:block",
+      "description": "A floating sidebar with submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-04/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-05",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-05/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-05/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-06",
+      "type": "registry:block",
+      "description": "A sidebar with submenus as dropdowns.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-06/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-06/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-06/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-07",
+      "type": "registry:block",
+      "description": "A sidebar that collapses to icons.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-07/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-07/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-07/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-07/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-07/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-07/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-08",
+      "type": "registry:block",
+      "description": "An inset sidebar with secondary navigation.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-08/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-08/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-08/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-08/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-08/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-08/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-09",
+      "type": "registry:block",
+      "description": "Collapsible nested sidebars.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-09/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-09/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-09/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-10",
+      "type": "registry:block",
+      "description": "A sidebar in a popover.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-10/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/nav-actions.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/nav-favorites.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/nav-workspaces.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-10/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-11",
+      "type": "registry:block",
+      "description": "A sidebar with a collapsible file tree.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-11/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-11/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-12",
+      "type": "registry:block",
+      "description": "A sidebar with a calendar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-12/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-12/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-12/components/calendars.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-12/components/date-picker.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-12/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-13",
+      "type": "registry:block",
+      "description": "A sidebar in a dialog.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "button",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-13/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-13/components/settings-dialog.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-14",
+      "type": "registry:block",
+      "description": "A sidebar on the right.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-14/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-14/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-15",
+      "type": "registry:block",
+      "description": "A left and right sidebar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-15/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/calendars.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/date-picker.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/nav-favorites.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/nav-workspaces.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/sidebar-left.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/sidebar-right.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-15/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-16",
+      "type": "registry:block",
+      "description": "A sidebar with a sticky site header.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/sidebar-16/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/blocks/sidebar-16/components/site-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "login-01",
+      "type": "registry:block",
+      "description": "A simple login form.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/login-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/login-01/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-02",
+      "type": "registry:block",
+      "description": "A two column login page with a cover image.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/login-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/login-02/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-03",
+      "type": "registry:block",
+      "description": "A login page with a muted background color.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/login-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/login-03/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-04",
+      "type": "registry:block",
+      "description": "A login page with form and image.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/login-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/login-04/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-05",
+      "type": "registry:block",
+      "description": "A simple email-only login page.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/login-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/default/blocks/login-05/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "calendar-01",
+      "type": "registry:block",
+      "description": "A simple calendar.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-01.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-02",
+      "type": "registry:block",
+      "description": "Multiple months with single selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-02.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-03",
+      "type": "registry:block",
+      "description": "Multiple months with multiple selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-03.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-04",
+      "type": "registry:block",
+      "description": "Single month with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-04.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-05",
+      "type": "registry:block",
+      "description": "Multiple months with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-05.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-06",
+      "type": "registry:block",
+      "description": "Range selection with minimum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-06.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-07",
+      "type": "registry:block",
+      "description": "Range selection with minimum and maximum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-07.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-08",
+      "type": "registry:block",
+      "description": "Calendar with disabled days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-08.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-09",
+      "type": "registry:block",
+      "description": "Calendar with disabled weekends",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-09.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-10",
+      "type": "registry:block",
+      "description": "Today button",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-10.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-11",
+      "type": "registry:block",
+      "description": "Start and end of month",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-11.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-12",
+      "type": "registry:block",
+      "description": "Localized calendar",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-12.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-13",
+      "type": "registry:block",
+      "description": "With Month and Year Dropdown",
+      "registryDependencies": [
+        "calendar",
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-13.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-14",
+      "type": "registry:block",
+      "description": "With Booked/Unavailable Days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-14.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-15",
+      "type": "registry:block",
+      "description": "With Week Numbers",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-15.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-16",
+      "type": "registry:block",
+      "description": "With time picker",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-16.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-17",
+      "type": "registry:block",
+      "description": "With time picker inline",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-17.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-18",
+      "type": "registry:block",
+      "description": "Variable size",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-18.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-19",
+      "type": "registry:block",
+      "description": "With presets",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-19.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-20",
+      "type": "registry:block",
+      "description": "With time presets",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-20.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-21",
+      "type": "registry:block",
+      "description": "Custom days and formatters",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-21.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-22",
+      "type": "registry:block",
+      "description": "Date picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-22.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-23",
+      "type": "registry:block",
+      "description": "Date range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-23.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-24",
+      "type": "registry:block",
+      "description": "Date and Time picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-24.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-25",
+      "type": "registry:block",
+      "description": "Date and Time range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-25.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-26",
+      "type": "registry:block",
+      "description": "Date range picker with time",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-26.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-27",
+      "type": "registry:block",
+      "description": "Chart filter",
+      "registryDependencies": [
+        "calendar",
+        "chart",
+        "card",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-27.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-28",
+      "type": "registry:block",
+      "description": "Input with date picker",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-28.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-29",
+      "type": "registry:block",
+      "description": "Natural language date picker",
+      "dependencies": [
+        "chrono-node"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-29.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-30",
+      "type": "registry:block",
+      "description": "With little-date",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-30.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-31",
+      "type": "registry:block",
+      "description": "With event slots",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-31.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "700px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-32",
+      "type": "registry:block",
+      "description": "Date picker in a drawer",
+      "registryDependencies": [
+        "calendar",
+        "button",
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/default/blocks/calendar-32.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "chart-area-axes",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-axes.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-gradient",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-gradient.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-interactive.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-linear",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-linear.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-stacked-expand",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-stacked-expand.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-step",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-area-step.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-bar-active",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-active.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-horizontal",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-horizontal.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-mixed",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-mixed.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-negative",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-negative.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-bar-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-line-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots-colors",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-dots-colors.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-dots-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-dots.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-linear",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-linear.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-step",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-line-step.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-pie-donut-active",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-donut-active.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-donut-text",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-donut-text.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-donut",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-donut.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label-list",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-label-list.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-separator-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-separator-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-simple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-simple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-pie-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-radar-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-dots",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-dots.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle-fill",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-circle-fill.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle-no-lines",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-circle-no-lines.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-circle.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-fill",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-fill.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-grid-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-lines-only",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-lines-only.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-radius",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radar-radius.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radial-grid",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-grid.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-shape",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-shape.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-simple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-simple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-text",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-radial-text.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-tooltip-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-indicator-line",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-indicator-line.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-indicator-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-indicator-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-label-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-formatter",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-label-formatter.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-formatter",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-formatter.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-advanced",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/default/charts/chart-tooltip-advanced.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "utils",
+      "type": "registry:lib",
+      "dependencies": [
+        "clsx",
+        "tailwind-merge"
+      ],
+      "files": [
+        {
+          "path": "registry/default/lib/utils.ts",
+          "type": "registry:lib",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "use-mobile",
+      "type": "registry:hook",
+      "files": [
+        {
+          "path": "registry/default/hooks/use-mobile.tsx",
+          "type": "registry:hook",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "use-toast",
+      "type": "registry:hook",
+      "files": [
+        {
+          "path": "registry/default/hooks/use-toast.ts",
+          "type": "registry:hook",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "theme-daylight",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "36 39% 88%",
+          "foreground": "36 45% 15%",
+          "primary": "36 45% 70%",
+          "primary-foreground": "36 45% 11%",
+          "secondary": "40 35% 77%",
+          "secondary-foreground": "36 45% 25%",
+          "accent": "36 64% 57%",
+          "accent-foreground": "36 72% 17%",
+          "destructive": "0 84% 37%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "36 33% 75%",
+          "muted-foreground": "36 45% 25%",
+          "card": "36 46% 82%",
+          "card-foreground": "36 45% 20%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "border": "36 45% 60%",
+          "input": "36 45% 60%",
+          "ring": "36 45% 30%",
+          "chart-1": "25 34% 28%",
+          "chart-2": "26 36% 34%",
+          "chart-3": "28 40% 40%",
+          "chart-4": "31 41% 48%",
+          "chart-5": "35 43% 53%"
+        },
+        "dark": {
+          "background": "36 39% 88%",
+          "foreground": "36 45% 15%",
+          "primary": "36 45% 70%",
+          "primary-foreground": "36 45% 11%",
+          "secondary": "40 35% 77%",
+          "secondary-foreground": "36 45% 25%",
+          "accent": "36 64% 57%",
+          "accent-foreground": "36 72% 17%",
+          "destructive": "0 84% 37%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "36 33% 75%",
+          "muted-foreground": "36 45% 25%",
+          "card": "36 46% 82%",
+          "card-foreground": "36 45% 20%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "border": "36 45% 60%",
+          "input": "36 45% 60%",
+          "ring": "36 45% 30%",
+          "chart-1": "25 34% 28%",
+          "chart-2": "26 36% 34%",
+          "chart-3": "28 40% 40%",
+          "chart-4": "31 41% 48%",
+          "chart-5": "35 43% 53%"
+        }
+      }
+    },
+    {
+      "name": "theme-midnight",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "240 5% 6%",
+          "foreground": "60 5% 90%",
+          "primary": "240 0% 90%",
+          "primary-foreground": "60 0% 0%",
+          "secondary": "240 4% 15%",
+          "secondary-foreground": "60 5% 85%",
+          "accent": "240 0% 13%",
+          "accent-foreground": "60 0% 100%",
+          "destructive": "0 60% 50%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "240 5% 25%",
+          "muted-foreground": "60 5% 85%",
+          "card": "240 4% 10%",
+          "card-foreground": "60 5% 90%",
+          "popover": "240 5% 15%",
+          "popover-foreground": "60 5% 85%",
+          "border": "240 6% 20%",
+          "input": "240 6% 20%",
+          "ring": "240 5% 90%",
+          "chart-1": "359 2% 90%",
+          "chart-2": "240 1% 74%",
+          "chart-3": "240 1% 58%",
+          "chart-4": "240 1% 42%",
+          "chart-5": "240 2% 26%"
+        },
+        "dark": {
+          "background": "240 5% 6%",
+          "foreground": "60 5% 90%",
+          "primary": "240 0% 90%",
+          "primary-foreground": "60 0% 0%",
+          "secondary": "240 4% 15%",
+          "secondary-foreground": "60 5% 85%",
+          "accent": "240 0% 13%",
+          "accent-foreground": "60 0% 100%",
+          "destructive": "0 60% 50%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "240 5% 25%",
+          "muted-foreground": "60 5% 85%",
+          "card": "240 4% 10%",
+          "card-foreground": "60 5% 90%",
+          "popover": "240 5% 15%",
+          "popover-foreground": "60 5% 85%",
+          "border": "240 6% 20%",
+          "input": "240 6% 20%",
+          "ring": "240 5% 90%",
+          "chart-1": "359 2% 90%",
+          "chart-2": "240 1% 74%",
+          "chart-3": "240 1% 58%",
+          "chart-4": "240 1% 42%",
+          "chart-5": "240 2% 26%"
+        }
+      }
+    },
+    {
+      "name": "theme-emerald",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "0 0% 100%",
+          "foreground": "240 10% 3.9%",
+          "card": "0 0% 100%",
+          "card-foreground": "240 10% 3.9%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "primary": "142 86% 28%",
+          "primary-foreground": "356 29% 98%",
+          "secondary": "240 4.8% 95.9%",
+          "secondary-foreground": "240 5.9% 10%",
+          "muted": "240 4.8% 95.9%",
+          "muted-foreground": "240 3.8% 45%",
+          "accent": "240 4.8% 95.9%",
+          "accent-foreground": "240 5.9% 10%",
+          "destructive": "0 72% 51%",
+          "destructive-foreground": "0 0% 98%",
+          "border": "240 5.9% 90%",
+          "input": "240 5.9% 90%",
+          "ring": "142 86% 28%",
+          "chart-1": "139 65% 20%",
+          "chart-2": "140 74% 44%",
+          "chart-3": "142 88% 28%",
+          "chart-4": "137 55% 15%",
+          "chart-5": "141 40% 9%"
+        },
+        "dark": {
+          "background": "240 10% 3.9%",
+          "foreground": "0 0% 98%",
+          "card": "240 10% 3.9%",
+          "card-foreground": "0 0% 98%",
+          "popover": "240 10% 3.9%",
+          "popover-foreground": "0 0% 98%",
+          "primary": "142 86% 28%",
+          "primary-foreground": "356 29% 98%",
+          "secondary": "240 4.8% 95.9%",
+          "secondary-foreground": "240 5.9% 10%",
+          "muted": "240 3.7% 15.9%",
+          "muted-foreground": "240 5% 64.9%",
+          "accent": "240 3.7% 15.9%",
+          "accent-foreground": "0 0% 98%",
+          "destructive": "0 72% 51%",
+          "destructive-foreground": "0 0% 98%",
+          "border": "240 3.7% 15.9%",
+          "input": "240 3.7% 15.9%",
+          "ring": "142 86% 28%",
+          "chart-1": "142 88% 28%",
+          "chart-2": "139 65% 20%",
+          "chart-3": "140 74% 24%",
+          "chart-4": "137 55% 15%",
+          "chart-5": "141 40% 9%"
+        }
+      }
+    },
+    {
+      "name": "sink",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "accordion",
+        "alert",
+        "alert-dialog",
+        "aspect-ratio",
+        "avatar",
+        "badge",
+        "breadcrumb",
+        "button",
+        "calendar",
+        "card",
+        "carousel",
+        "chart",
+        "checkbox",
+        "collapsible",
+        "command",
+        "context-menu",
+        "dialog",
+        "drawer",
+        "dropdown-menu",
+        "hover-card",
+        "input",
+        "input-otp",
+        "label",
+        "menubar",
+        "navigation-menu",
+        "pagination",
+        "popover",
+        "progress",
+        "radio-group",
+        "resizable",
+        "scroll-area",
+        "select",
+        "separator",
+        "sheet",
+        "sidebar",
+        "skeleton",
+        "slider",
+        "sonner",
+        "switch",
+        "table",
+        "tabs",
+        "textarea",
+        "toast",
+        "toggle",
+        "toggle-group",
+        "tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sink/page.tsx",
+          "type": "registry:page",
+          "target": "app/sink/page.tsx"
+        },
+        {
+          "path": "registry/default/internal/sink/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/component-wrapper.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/accordion-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/alert-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/alert-dialog-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/aspect-ratio-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/avatar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/badge-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/breadcrumb-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/calendar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/card-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/carousel-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/checkbox-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/collapsible-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/combobox-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/command-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/context-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/date-picker-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/dialog-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/drawer-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/dropdown-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/hover-card-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/input-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/input-otp-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/label-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/menubar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/navigation-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/pagination-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/popover-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/progress-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/radio-group-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/resizable-handle.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/scroll-area-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/select-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/separator-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/sheet-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/skeleton-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/slider-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/sonner-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/switch-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/table-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/tabs-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/textarea-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toast-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toggle-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toggle-group-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/tooltip-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/badge-destructive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/badge-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/badge-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-destructive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-ghost.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-link.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-loading.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/button-with-icon.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toggle-disabled.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toggle-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/default/internal/sink/components/toggle-with-text.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-demo",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-header",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-footer",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-footer.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-group.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-group-collapsible.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-group-action.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-menu.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-menu-action.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-sub",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-menu-sub.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-menu-collapsible.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-badge",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-menu-badge.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-rsc",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-rsc.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-controlled",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-controlled.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-01",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-01.tsx",
+          "type": "registry:component",
+          "target": "components/sidebar-01.tsx"
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-02",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-02.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-03",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-03.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-04",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-04.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-05",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-05.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-06",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-06.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-07",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-07.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-08",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-08.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-09",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-09.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-10",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-10.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-11",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-11.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-12",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-12.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-13",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "button",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-13.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-14",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-14.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-15",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/sidebar-15.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-login-01",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/internal/login-01.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "accordion-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "accordion"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/alert-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/alert-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert-dialog",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/alert-dialog-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "aspect-ratio"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/aspect-ratio-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "avatar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/avatar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/badge-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/badge-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/badge-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-secondary",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/badge-secondary.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-separator",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-separator.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-dropdown",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-dropdown.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-ellipsis",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-ellipsis.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-link",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-link.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-responsive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/breadcrumb-responsive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/button-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-secondary",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/button-secondary.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/button-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/button-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-ghost",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/button-ghost.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-link",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/button-link.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-with-icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/button-with-icon.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-loading",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/button-loading.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/button-icon.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-as-child",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/button-as-child.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/calendar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "calendar",
+        "form",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/calendar-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "card",
+        "button",
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/card-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card-with-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/card-with-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-size",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-size.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-spacing",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-spacing.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-orientation",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-orientation.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-api",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-api.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-plugin",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/carousel-plugin.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/checkbox-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/checkbox-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-multiple",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/checkbox-form-multiple.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-single",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/checkbox-form-single.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/checkbox-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "collapsible-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/collapsible-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/combobox-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-dropdown-menu",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "dropdown-menu",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/combobox-dropdown-menu.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/combobox-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-popover",
+      "type": "registry:example",
+      "registryDependencies": [
+        "combobox",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/combobox-popover.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-responsive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "combobox",
+        "popover",
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/combobox-responsive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/command-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/command-dialog.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "context-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "context-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/context-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "data-table-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "data-table"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/data-table-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-demo",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/date-picker-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-form",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "form",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/date-picker-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-presets",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/date-picker-with-presets.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-range",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/date-picker-with-range.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/dialog-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog-close-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dialog",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/dialog-close-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/drawer-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "drawer",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/drawer-dialog.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/dropdown-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-checkboxes",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/dropdown-menu-checkboxes.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-radio-group",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/dropdown-menu-radio-group.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "hover-card-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "hover-card"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/hover-card-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-file",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-file.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-with-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-label",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-with-label.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-otp-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-pattern",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-otp-pattern.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-separator",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-otp-separator.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-controlled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-otp-controlled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/input-otp-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "label-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/label-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "menubar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "menubar"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/menubar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "navigation-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/navigation-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "pagination-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "pagination"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/pagination-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "popover-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/popover-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "progress-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "progress"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/progress-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/radio-group-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "radio-group",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/radio-group-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/resizable-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo-with-handle",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/resizable-demo-with-handle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-vertical",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/resizable-vertical.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-handle",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/resizable-handle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/scroll-area-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-horizontal-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/scroll-area-horizontal-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/select-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-scrollable",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/select-scrollable.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/select-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "separator-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/separator-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sheet"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/sheet-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet-side",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sheet"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/sheet-side.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "skeleton-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/skeleton-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "skeleton-card",
+      "type": "registry:example",
+      "registryDependencies": [
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/skeleton-card.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "slider-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "slider"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/slider-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sonner-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/sonner-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/switch-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "switch",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/switch-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "table-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "table"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/table-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tabs-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/tabs-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-with-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-label",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-with-label.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/textarea-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toast"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toast-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toast"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toast-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-simple",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toast"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toast-simple.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-with-action",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toast"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toast-with-action.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-with-title",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toast"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toast-with-title.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-lg",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-lg.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-sm",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-sm.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-single",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-group-single.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-lg",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-lg.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-sm",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-sm.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/toggle-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tooltip-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/tooltip-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-blockquote",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-blockquote.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h1",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-h1.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h2",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-h2.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h3",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-h3.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h4",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-h4.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-inline-code",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-inline-code.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-large",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-large.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-lead",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-lead.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-list",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-list.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-muted",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-muted.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-p",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-p.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-small",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-small.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-table",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/typography-table.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "mode-toggle",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/mode-toggle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-bar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-grid",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-bar-demo-grid.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-axis",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-bar-demo-axis.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-tooltip",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-bar-demo-tooltip.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-legend",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-bar-demo-legend.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-tooltip-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/default/examples/chart-tooltip-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/resizable-demo-with-handle.json b/apps/www/public/r/styles/default/resizable-demo-with-handle.json
new file mode 100644
index 00000000000..d3b07efa5a7
--- /dev/null
+++ b/apps/www/public/r/styles/default/resizable-demo-with-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo-with-handle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo-with-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle withHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/resizable-demo.json b/apps/www/public/r/styles/default/resizable-demo.json
new file mode 100644
index 00000000000..dcfe32996ea
--- /dev/null
+++ b/apps/www/public/r/styles/default/resizable-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/resizable-handle.json b/apps/www/public/r/styles/default/resizable-handle.json
new file mode 100644
index 00000000000..93e348126b0
--- /dev/null
+++ b/apps/www/public/r/styles/default/resizable-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-handle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/resizable-vertical.json b/apps/www/public/r/styles/default/resizable-vertical.json
new file mode 100644
index 00000000000..27dbae3fc4c
--- /dev/null
+++ b/apps/www/public/r/styles/default/resizable-vertical.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-vertical",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-vertical.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"vertical\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Header</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/resizable.json b/apps/www/public/r/styles/default/resizable.json
index 9b0f3007fac..31be59446fd 100644
--- a/apps/www/public/r/styles/default/resizable.json
+++ b/apps/www/public/r/styles/default/resizable.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "resizable",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "react-resizable-panels"
   ],
diff --git a/apps/www/public/r/styles/default/scroll-area-demo.json b/apps/www/public/r/styles/default/scroll-area-demo.json
new file mode 100644
index 00000000000..d2b3cd84aaa
--- /dev/null
+++ b/apps/www/public/r/styles/default/scroll-area-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport default function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {tags.map((tag) => (\n          <>\n            <div key={tag} className=\"text-sm\">\n              {tag}\n            </div>\n            <Separator className=\"my-2\" />\n          </>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/scroll-area-horizontal-demo.json b/apps/www/public/r/styles/default/scroll-area-horizontal-demo.json
new file mode 100644
index 00000000000..8103b7c35be
--- /dev/null
+++ b/apps/www/public/r/styles/default/scroll-area-horizontal-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-horizontal-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-horizontal-demo.tsx",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { ScrollArea, ScrollBar } from \"@/registry/default/ui/scroll-area\"\n\nexport interface Artwork {\n  artist: string\n  art: string\n}\n\nexport const works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n  return (\n    <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n      <div className=\"flex w-max space-x-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <Image\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n              Photo by{\" \"}\n              <span className=\"font-semibold text-foreground\">\n                {artwork.artist}\n              </span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/scroll-area.json b/apps/www/public/r/styles/default/scroll-area.json
index 7b82ec79c85..204354cf430 100644
--- a/apps/www/public/r/styles/default/scroll-area.json
+++ b/apps/www/public/r/styles/default/scroll-area.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "scroll-area",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-scroll-area"
   ],
diff --git a/apps/www/public/r/styles/default/select-demo.json b/apps/www/public/r/styles/default/select-demo.json
new file mode 100644
index 00000000000..66817c2f057
--- /dev/null
+++ b/apps/www/public/r/styles/default/select-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/select-form.json b/apps/www/public/r/styles/default/select-form.json
new file mode 100644
index 00000000000..bbd6dd42688
--- /dev/null
+++ b/apps/www/public/r/styles/default/select-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-form.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst FormSchema = z.object({\n  email: z\n    .string({\n      required_error: \"Please select an email to display.\",\n    })\n    .email(),\n})\n\nexport default function SelectForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <FormControl>\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a verified email to display\" />\n                  </SelectTrigger>\n                </FormControl>\n                <SelectContent>\n                  <SelectItem value=\"m@example.com\">m@example.com</SelectItem>\n                  <SelectItem value=\"m@google.com\">m@google.com</SelectItem>\n                  <SelectItem value=\"m@support.com\">m@support.com</SelectItem>\n                </SelectContent>\n              </Select>\n              <FormDescription>\n                You can manage email addresses in your{\" \"}\n                <Link href=\"/examples/forms\">email settings</Link>.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/select-scrollable.json b/apps/www/public/r/styles/default/select-scrollable.json
new file mode 100644
index 00000000000..2d9c87862f2
--- /dev/null
+++ b/apps/www/public/r/styles/default/select-scrollable.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-scrollable",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-scrollable.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function SelectScrollable() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[280px]\">\n        <SelectValue placeholder=\"Select a timezone\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>North America</SelectLabel>\n          <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n          <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n          <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n          <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n          <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n          <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Europe & Africa</SelectLabel>\n          <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n          <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n          <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n          <SelectItem value=\"west\">\n            Western European Summer Time (WEST)\n          </SelectItem>\n          <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n          <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Asia</SelectLabel>\n          <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n          <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n          <SelectItem value=\"cst_china\">China Standard Time (CST)</SelectItem>\n          <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n          <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n          <SelectItem value=\"ist_indonesia\">\n            Indonesia Central Standard Time (WITA)\n          </SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Australia & Pacific</SelectLabel>\n          <SelectItem value=\"awst\">\n            Australian Western Standard Time (AWST)\n          </SelectItem>\n          <SelectItem value=\"acst\">\n            Australian Central Standard Time (ACST)\n          </SelectItem>\n          <SelectItem value=\"aest\">\n            Australian Eastern Standard Time (AEST)\n          </SelectItem>\n          <SelectItem value=\"nzst\">New Zealand Standard Time (NZST)</SelectItem>\n          <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>South America</SelectLabel>\n          <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n          <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n          <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n          <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/select.json b/apps/www/public/r/styles/default/select.json
index 94f751eb5a2..f9531c885cc 100644
--- a/apps/www/public/r/styles/default/select.json
+++ b/apps/www/public/r/styles/default/select.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "select",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-select"
   ],
   "files": [
     {
       "path": "ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronUp className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronDown className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronUp className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronDown className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/separator-demo.json b/apps/www/public/r/styles/default/separator-demo.json
new file mode 100644
index 00000000000..fb8337b26a9
--- /dev/null
+++ b/apps/www/public/r/styles/default/separator-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "examples/separator-demo.tsx",
+      "content": "import { Separator } from \"@/registry/default/ui/separator\"\n\nexport default function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/separator.json b/apps/www/public/r/styles/default/separator.json
index 1372f3ac09d..e3ae2c55692 100644
--- a/apps/www/public/r/styles/default/separator.json
+++ b/apps/www/public/r/styles/default/separator.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "separator",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-separator"
   ],
diff --git a/apps/www/public/r/styles/default/sheet-demo.json b/apps/www/public/r/styles/default/sheet-demo.json
new file mode 100644
index 00000000000..5737a71d6d0
--- /dev/null
+++ b/apps/www/public/r/styles/default/sheet-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "examples/sheet-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nexport default function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sheet-side.json b/apps/www/public/r/styles/default/sheet-side.json
new file mode 100644
index 00000000000..53e6322d87f
--- /dev/null
+++ b/apps/www/public/r/styles/default/sheet-side.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-side",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "examples/sheet-side.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger asChild>\n            <Button variant=\"outline\">{side}</Button>\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you're done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose asChild>\n                <Button type=\"submit\">Save changes</Button>\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sheet.json b/apps/www/public/r/styles/default/sheet.json
index 9d229080436..e58b847ad5e 100644
--- a/apps/www/public/r/styles/default/sheet.json
+++ b/apps/www/public/r/styles/default/sheet.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "sheet",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
diff --git a/apps/www/public/r/styles/default/sidebar-01.json b/apps/www/public/r/styles/default/sidebar-01.json
index 54fc1db7de6..524a8fcf36f 100644
--- a/apps/www/public/r/styles/default/sidebar-01.json
+++ b/apps/www/public/r/styles/default/sidebar-01.json
@@ -1,72 +1,44 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "sidebar-01",
   "type": "registry:block",
-  "description": "A collapsible sidebar with workspace switcher, main navigation, secondary navigation, project navigation, and user navigation.",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple sidebar with navigation grouped by section.",
   "registryDependencies": [
-    "avatar",
-    "button",
-    "collapsible",
-    "dropdown-menu",
-    "drawer",
+    "sidebar",
+    "breadcrumb",
     "separator",
-    "input",
-    "popover",
-    "sheet",
-    "progress",
-    "card",
-    "use-mobile"
+    "label",
+    "dropdown-menu"
   ],
   "files": [
     {
-      "path": "block/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/default/block/sidebar-01/components/app-sidebar\"\nimport {\n  SidebarLayout,\n  SidebarTrigger,\n} from \"@/registry/default/block/sidebar-01/ui/sidebar\"\n\nexport default async function Page() {\n  const { cookies } = await import(\"next/headers\")\n  return (\n    <SidebarLayout\n      defaultOpen={cookies().get(\"sidebar:state\")?.value === \"true\"}\n    >\n      <AppSidebar />\n      <main className=\"flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out\">\n        <div className=\"h-full rounded-md border-2 border-dashed p-2\">\n          <SidebarTrigger />\n        </div>\n      </main>\n    </SidebarLayout>\n  )\n}\n",
+      "path": "blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-01/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport {\n  Atom,\n  Bird,\n  BookOpen,\n  Bot,\n  Code2,\n  Eclipse,\n  Frame,\n  History,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Rabbit,\n  Send,\n  Settings2,\n  SquareTerminal,\n  Star,\n  Turtle,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/block/sidebar-01/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/block/sidebar-01/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/default/block/sidebar-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/default/block/sidebar-01/components/nav-user\"\nimport { StorageCard } from \"@/registry/default/block/sidebar-01/components/storage-card\"\nimport { TeamSwitcher } from \"@/registry/default/block/sidebar-01/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarItem,\n  SidebarLabel,\n} from \"@/registry/default/block/sidebar-01/ui/sidebar\"\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Atom,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: Eclipse,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Rabbit,\n      plan: \"Free\",\n    },\n  ],\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n          icon: History,\n          description: \"View your recent prompts\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n          icon: Star,\n          description: \"Browse your starred prompts\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n          icon: Settings2,\n          description: \"Configure your playground\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n          icon: Rabbit,\n          description: \"Our fastest model for general use cases.\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n          icon: Bird,\n          description: \"Performance and speed for efficiency.\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n          icon: Turtle,\n          description: \"The most powerful model for complex computations.\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API\",\n      url: \"#\",\n      icon: Code2,\n      items: [\n        {\n          title: \"Chat\",\n          url: \"#\",\n        },\n        {\n          title: \"Completion\",\n          url: \"#\",\n        },\n        {\n          title: \"Images\",\n          url: \"#\",\n        },\n        {\n          title: \"Video\",\n          url: \"#\",\n        },\n        {\n          title: \"Speech\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n  searchResults: [\n    {\n      title: \"Routing Fundamentals\",\n      teaser:\n        \"The skeleton of every application is routing. This page will introduce you to the fundamental concepts of routing for the web and how to handle routing in Next.js.\",\n      url: \"#\",\n    },\n    {\n      title: \"Layouts and Templates\",\n      teaser:\n        \"The special files layout.js and template.js allow you to create UI that is shared between routes. This page will guide you through how and when to use these special files.\",\n      url: \"#\",\n    },\n    {\n      title: \"Data Fetching, Caching, and Revalidating\",\n      teaser:\n        \"Data fetching is a core part of any application. This page goes through how you can fetch, cache, and revalidate data in React and Next.js.\",\n      url: \"#\",\n    },\n    {\n      title: \"Server and Client Composition Patterns\",\n      teaser:\n        \"When building React applications, you will need to consider what parts of your application should be rendered on the server or the client. \",\n      url: \"#\",\n    },\n    {\n      title: \"Server Actions and Mutations\",\n      teaser:\n        \"Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.\",\n      url: \"#\",\n    },\n  ],\n}\n\nexport function AppSidebar() {\n  return (\n    <Sidebar>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarItem>\n          <SidebarLabel>Platform</SidebarLabel>\n          <NavMain items={data.navMain} searchResults={data.searchResults} />\n        </SidebarItem>\n        <SidebarItem>\n          <SidebarLabel>Projects</SidebarLabel>\n          <NavProjects projects={data.projects} />\n        </SidebarItem>\n        <SidebarItem className=\"mt-auto\">\n          <SidebarLabel>Help</SidebarLabel>\n          <NavSecondary items={data.navSecondary} />\n        </SidebarItem>\n        <SidebarItem>\n          <StorageCard />\n        </SidebarItem>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
-      "type": "registry:component"
+      "path": "blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/default/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/default/blocks/sidebar-01/components/version-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        {/* We create a SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <SidebarGroup key={item.title}>\n            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {item.items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild isActive={item.isActive}>\n                      <a href={item.url}>{item.title}</a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { ChevronRight, Search, type LucideIcon } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/default/hooks/use-mobile\"\nimport { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nexport function NavMain({\n  className,\n  items,\n  searchResults,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n  searchResults: React.ComponentProps<typeof SidebarSearch>[\"results\"]\n} & React.ComponentProps<\"ul\">) {\n  return (\n    <ul className={cn(\"grid gap-0.5\", className)}>\n      <li>\n        <SidebarSearch results={searchResults} />\n      </li>\n      {items.map((item) => (\n        <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n          <li>\n            <div className=\"relative flex items-center\">\n              <Link\n                href={item.url}\n                className=\"min-w-8 flex h-8 flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n              >\n                <item.icon className=\"h-4 w-4 shrink-0\" />\n                <div className=\"flex flex-1 overflow-hidden\">\n                  <div className=\"line-clamp-1 pr-6\">{item.title}</div>\n                </div>\n              </Link>\n              <CollapsibleTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  className=\"absolute right-1 h-6 w-6 rounded-md p-0 ring-ring transition-all focus-visible:ring-2 data-[state=open]:rotate-90\"\n                >\n                  <ChevronRight className=\"h-4 w-4 text-muted-foreground\" />\n                  <span className=\"sr-only\">Toggle</span>\n                </Button>\n              </CollapsibleTrigger>\n            </div>\n            <CollapsibleContent className=\"px-4 py-0.5\">\n              <ul className=\"grid border-l px-2\">\n                {item.items?.map((subItem) => (\n                  <li key={subItem.title}>\n                    <Link\n                      href={subItem.url}\n                      className=\"min-w-8 flex h-8 items-center gap-2 overflow-hidden rounded-md px-2 text-sm font-medium text-muted-foreground ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n                    >\n                      <div className=\"line-clamp-1\">{subItem.title}</div>\n                    </Link>\n                  </li>\n                ))}\n              </ul>\n            </CollapsibleContent>\n          </li>\n        </Collapsible>\n      ))}\n    </ul>\n  )\n}\n\nfunction SidebarSearch({\n  results,\n}: {\n  results: {\n    title: string\n    teaser: string\n    url: string\n  }[]\n}) {\n  const isMobile = useIsMobile()\n\n  if (isMobile) {\n    return (\n      <Drawer>\n        <DrawerTrigger className=\"min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\">\n          <Search className=\"h-4 w-4 shrink-0\" />\n          <div className=\"flex flex-1 overflow-hidden\">\n            <div className=\"line-clamp-1 pr-6\">Search</div>\n          </div>\n        </DrawerTrigger>\n        <DrawerContent>\n          <form>\n            <div className=\"border-b p-2.5\">\n              <Input\n                type=\"search\"\n                placeholder=\"Search...\"\n                className=\"h-8 rounded-sm shadow-none focus-visible:ring-0\"\n              />\n            </div>\n          </form>\n          <div className=\"grid gap-1 p-1.5 text-sm\">\n            {results.map((result) => (\n              <Link\n                href={result.url}\n                key={result.title}\n                className=\"rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n              >\n                <div className=\"font-medium\">{result.title}</div>\n                <div className=\"line-clamp-2 text-muted-foreground\">\n                  {result.teaser}\n                </div>\n              </Link>\n            ))}\n            <Separator className=\"my-1.5\" />\n            <Link\n              href=\"#\"\n              className=\"rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2\"\n            >\n              See all results\n            </Link>\n          </div>\n        </DrawerContent>\n      </Drawer>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger className=\"min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\">\n        <Search className=\"h-4 w-4 shrink-0\" />\n        <div className=\"flex flex-1 overflow-hidden\">\n          <div className=\"line-clamp-1 pr-6\">Search</div>\n        </div>\n      </PopoverTrigger>\n      <PopoverContent\n        side=\"right\"\n        align=\"start\"\n        sideOffset={4}\n        className=\"w-96 p-0\"\n      >\n        <form>\n          <div className=\"border-b p-2.5\">\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"h-8 rounded-sm shadow-none focus-visible:ring-0\"\n            />\n          </div>\n        </form>\n        <div className=\"grid gap-1 p-1.5 text-sm\">\n          {results.map((result) => (\n            <Link\n              href={result.url}\n              key={result.title}\n              className=\"rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n            >\n              <div className=\"font-medium\">{result.title}</div>\n              <div className=\"line-clamp-2 text-muted-foreground\">\n                {result.teaser}\n              </div>\n            </Link>\n          ))}\n          <Separator className=\"my-1.5\" />\n          <Link\n            href=\"#\"\n            className=\"rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2\"\n          >\n            See all results\n          </Link>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
-      "type": "registry:component"
+      "path": "blocks/sidebar-01/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-01/components/nav-projects.tsx",
-      "content": "import Link from \"next/link\"\nimport { MoreHorizontal, PlusSquare, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function NavProjects({\n  projects,\n  className,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentProps<\"ul\">) {\n  return (\n    <ul className={cn(\"grid gap-0.5\", className)}>\n      {projects.map((item) => (\n        <li\n          key={item.name}\n          className=\"has-[[data-state=open]]:bg-accent has-[[data-state=open]]:text-accent-foreground group relative rounded-md hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Link\n            href={item.url}\n            className=\"flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n          >\n            <item.icon className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n            <div className=\"line-clamp-1 grow overflow-hidden pr-6 font-medium\">\n              {item.name}\n            </div>\n          </Link>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                className=\"peer absolute right-1 top-0.5 h-6 w-6 shrink-0 rounded-md bg-accent p-0 text-accent-foreground opacity-0 ring-ring transition-all focus-visible:ring-2 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100\"\n              >\n                <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n                <span className=\"sr-only\">Toggle</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side=\"right\" align=\"start\" sideOffset={20}>\n              <DropdownMenuItem>Share</DropdownMenuItem>\n              <DropdownMenuItem>Rename</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </li>\n      ))}\n      <li>\n        <button className=\"flex h-7 w-full items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-left text-xs ring-ring transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2\">\n          <PlusSquare className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n          <div className=\"line-clamp-1 overflow-hidden font-medium text-muted-foreground\">\n            Add Project\n          </div>\n        </button>\n      </li>\n    </ul>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "path": "block/sidebar-01/components/nav-secondary.tsx",
-      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\n\nexport function NavSecondary({\n  className,\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n} & React.ComponentProps<\"ul\">) {\n  if (!items?.length) {\n    return null\n  }\n\n  return (\n    <ul className={cn(\"grid gap-0.5\", className)}>\n      {items.map((item) => (\n        <li key={item.title}>\n          <Link\n            href={item.url}\n            className=\"flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2\"\n          >\n            <item.icon className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n            <div className=\"line-clamp-1 grow overflow-hidden pr-6 font-medium text-muted-foreground\">\n              {item.title}\n            </div>\n          </Link>\n        </li>\n      ))}\n    </ul>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "path": "block/sidebar-01/components/nav-user.tsx",
-      "content": "import {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger className=\"w-full rounded-md outline-none ring-ring hover:bg-accent focus-visible:ring-2 data-[state=open]:bg-accent\">\n        <div className=\"flex items-center gap-2 px-2 py-1.5 text-left text-sm transition-all\">\n          <Avatar className=\"h-7 w-7 rounded-md border\">\n            <AvatarImage\n              src={user.avatar}\n              alt={user.name}\n              className=\"animate-in fade-in-50 zoom-in-90\"\n            />\n            <AvatarFallback className=\"rounded-md\">CN</AvatarFallback>\n          </Avatar>\n          <div className=\"grid flex-1 leading-none\">\n            <div className=\"font-medium\">{user.name}</div>\n            <div className=\"overflow-hidden text-xs text-muted-foreground\">\n              <div className=\"line-clamp-1\">{user.email}</div>\n            </div>\n          </div>\n          <ChevronsUpDown className=\"ml-auto mr-0.5 h-4 w-4 text-muted-foreground/50\" />\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"w-56\"\n        align=\"end\"\n        side=\"right\"\n        sideOffset={4}\n      >\n        <DropdownMenuLabel className=\"p-0 font-normal\">\n          <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm transition-all\">\n            <Avatar className=\"h-7 w-7 rounded-md\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1\">\n              <div className=\"font-medium\">{user.name}</div>\n              <div className=\"overflow-hidden text-xs text-muted-foreground\">\n                <div className=\"line-clamp-1\">{user.email}</div>\n              </div>\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem className=\"gap-2\">\n            <BadgeCheck className=\"h-4 w-4 text-muted-foreground\" />\n            Account\n          </DropdownMenuItem>\n          <DropdownMenuItem className=\"gap-2\">\n            <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem className=\"gap-2\">\n            <Bell className=\"h-4 w-4 text-muted-foreground\" />\n            Notifications\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"gap-2\">\n          <LogOut className=\"h-4 w-4 text-muted-foreground\" />\n          Log out\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "path": "block/sidebar-01/components/storage-card.tsx",
-      "content": "import { Database } from \"lucide-react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport { Progress } from \"@/registry/default/ui/progress\"\n\nexport function StorageCard() {\n  return (\n    <Card className=\"rounded-md text-xs shadow-sm\">\n      <CardContent className=\"flex items-start gap-2.5 p-2.5\">\n        <div className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-accent text-accent-foreground\">\n          <Database className=\"h-5 w-5 text-muted-foreground\" />\n        </div>\n        <div className=\"grid flex-1 gap-1\">\n          <p className=\"font-medium\">Running out of space?</p>\n          <p className=\"text-muted-foreground\">79.2 GB / 100 GB used</p>\n          <Progress\n            value={79.2}\n            className=\"mt-1\"\n            aria-label=\"79.2 GB / 100 GB used\"\n          />\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "path": "block/sidebar-01/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger className=\"w-full rounded-md ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 data-[state=open]:bg-accent\">\n        <div className=\"flex items-center gap-1.5 overflow-hidden px-2 py-1.5 text-left text-sm transition-all\">\n          <div className=\"flex h-5 w-5 items-center justify-center rounded-sm bg-primary text-primary-foreground\">\n            <activeTeam.logo className=\"h-3.5 w-3.5 shrink-0\" />\n          </div>\n          <div className=\"line-clamp-1 flex-1 pr-2 font-medium\">\n            {activeTeam.name}\n          </div>\n          <ChevronsUpDown className=\"ml-auto h-4 w-4 text-muted-foreground/50\" />\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"w-64\"\n        align=\"start\"\n        side=\"right\"\n        sideOffset={4}\n      >\n        <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n          Teams\n        </DropdownMenuLabel>\n        {teams.map((team, index) => (\n          <DropdownMenuItem\n            key={team.name}\n            onClick={() => setActiveTeam(team)}\n            className=\"items-start gap-2 px-1.5\"\n          >\n            <div className=\"flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground\">\n              <team.logo className=\"h-5 w-5 shrink-0\" />\n            </div>\n            <div className=\"grid flex-1 leading-tight\">\n              <div className=\"line-clamp-1 font-medium\">{team.name}</div>\n              <div className=\"overflow-hidden text-xs text-muted-foreground\">\n                <div className=\"line-clamp-1\">{team.plan}</div>\n              </div>\n            </div>\n            <DropdownMenuShortcut className=\"self-center\">\n              ⌘{index + 1}\n            </DropdownMenuShortcut>\n          </DropdownMenuItem>\n        ))}\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"gap-2 px-1.5\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-md border bg-background\">\n            <Plus className=\"h-5 w-5\" />\n          </div>\n          <div className=\"font-medium text-muted-foreground\">Add workspace</div>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "path": "block/sidebar-01/hooks/use-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nexport function useSidebar() {\n  const [state, setState] = React.useState<\"closed\" | \"open\">(\"open\")\n\n  return {\n    open: state === \"open\",\n    onOpenChange: (open: boolean) => setState(open ? \"open\" : \"closed\"),\n  }\n}\n",
-      "type": "registry:hook"
-    },
-    {
-      "path": "block/sidebar-01/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/default/hooks/use-mobile\"\nimport { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Sheet, SheetContent } from \"@/registry/default/ui/sheet\"\n\nexport const SIDEBAR_STATE_COOKIE = \"sidebar:state\"\n\ntype SidebarContext = {\n  state: \"open\" | \"closed\"\n  open: boolean\n  onOpenChange: (open: boolean) => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext>({\n  state: \"open\",\n  open: true,\n  onOpenChange: () => {},\n})\n\nfunction useSidebar() {\n  return React.useContext(SidebarContext)\n}\n\nconst SidebarLayout = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean\n  }\n>(({ defaultOpen, className, ...props }, ref) => {\n  const [open, setOpen] = React.useState(defaultOpen ?? true)\n\n  const onOpenChange = React.useCallback((open: boolean) => {\n    setOpen(open)\n    document.cookie = `${SIDEBAR_STATE_COOKIE}=${open}; path=/; max-age=${\n      60 * 60 * 24 * 7\n    }`\n  }, [])\n\n  const state = open ? \"open\" : \"closed\"\n\n  return (\n    <SidebarContext.Provider value={{ state, open, onOpenChange }}>\n      <div\n        ref={ref}\n        data-sidebar={state}\n        style={\n          {\n            \"--sidebar-width\": \"16rem\",\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"flex min-h-screen bg-accent/50 pl-0 transition-all duration-300 ease-in-out data-[sidebar=closed]:pl-0 sm:pl-[--sidebar-width]\",\n          className\n        )}\n        {...props}\n      />\n    </SidebarContext.Provider>\n  )\n})\nSidebarLayout.displayName = \"SidebarLayout\"\n\nconst SidebarTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n  const { open, onOpenChange } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"h-8 w-8\", className)}\n      onClick={() => onOpenChange(!open)}\n      {...props}\n    >\n      <PanelLeft className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst Sidebar = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, children }, ref) => {\n    const isMobile = useIsMobile()\n    const { open, onOpenChange } = useSidebar()\n\n    const sidebar = (\n      <div\n        ref={ref}\n        className={cn(\"flex h-full flex-col border-r bg-background\", className)}\n      >\n        {children}\n      </div>\n    )\n\n    if (isMobile) {\n      return (\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetContent\n            className=\"w-[260px] p-0 md:w-[--sidebar-width] [&>button]:hidden\"\n            side=\"left\"\n          >\n            {sidebar}\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]\">\n        {sidebar}\n      </aside>\n    )\n  }\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center border-b px-2.5 py-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center border-t px-2.5 py-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-1 flex-col gap-5 overflow-auto py-4\", className)}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div ref={ref} className={cn(\"grid gap-2 px-2.5\", className)} {...props} />\n  )\n})\nSidebarItem.displayName = \"SidebarItem\"\n\nconst SidebarLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"px-1.5 text-xs font-medium text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarLabel.displayName = \"SidebarLabel\"\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarItem,\n  SidebarLabel,\n  SidebarLayout,\n  SidebarTrigger,\n  useSidebar,\n}\n",
-      "type": "registry:ui"
+      "path": "blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-semibold\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width]\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-02.json b/apps/www/public/r/styles/default/sidebar-02.json
new file mode 100644
index 00000000000..17e57a6779e
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-02.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with collapsible sections.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/default/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/default/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-semibold\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width]\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-03.json b/apps/www/public/r/styles/default/sidebar-03.json
new file mode 100644
index 00000000000..96d29748843
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-03.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-04.json b/apps/www/public/r/styles/default/sidebar-04.json
new file mode 100644
index 00000000000..291610e4144
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-04.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A floating sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-05.json b/apps/www/public/r/styles/default/sidebar-05.json
new file mode 100644
index 00000000000..2bdd45fccac
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-05.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with collapsible submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/default/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                      <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-05/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-06.json b/apps/www/public/r/styles/default/sidebar-06.json
new file mode 100644
index 00000000000..d09ac9c388f
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-06.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with submenus as dropdowns.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { MoreHorizontal, type LucideIcon } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup>\n      <SidebarMenu>\n        {items.map((item) => (\n          <DropdownMenu key={item.title}>\n            <SidebarMenuItem>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  {item.title} <MoreHorizontal className=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              {item.items?.length ? (\n                <DropdownMenuContent\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align={isMobile ? \"end\" : \"start\"}\n                  className=\"min-w-56 rounded-lg\"\n                >\n                  {item.items.map((item) => (\n                    <DropdownMenuItem asChild key={item.title}>\n                      <a href={item.url}>{item.title}</a>\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              ) : null}\n            </SidebarMenuItem>\n          </DropdownMenu>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { SidebarInput } from \"@/registry/default/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"shadow-none\">\n      <form>\n        <CardHeader className=\"p-4 pb-0\">\n          <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n          <CardDescription>\n            Opt-in to receive updates and news about the sidebar.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"grid gap-2.5 p-4\">\n          <SidebarInput type=\"email\" placeholder=\"Email\" />\n          <Button\n            className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n            size=\"sm\"\n          >\n            Subscribe\n          </Button>\n        </CardContent>\n      </form>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-07.json b/apps/www/public/r/styles/default/sidebar-07.json
new file mode 100644
index 00000000000..7c87e79be78
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-07.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar that collapses to icons.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/default/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">\n                  {activeTeam.name}\n                </span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-08.json b/apps/www/public/r/styles/default/sidebar-08.json
new file mode 100644
index 00000000000..cf9ab0e04af
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-08.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "An inset sidebar with secondary navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/default/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-09.json b/apps/www/public/r/styles/default/sidebar-09.json
new file mode 100644
index 00000000000..d6d99b4a8b7
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-09.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Collapsible nested sidebars.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\n\nimport { NavUser } from \"@/registry/default/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-10.json b/apps/www/public/r/styles/default/sidebar-10.json
new file mode 100644
index 00000000000..fa4fa7b621a
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-10.json
@@ -0,0 +1,69 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar in a popover.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/default/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/default/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/default/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/default/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/default/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/default/blocks/sidebar-10/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: Settings2,\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: Link,\n    },\n    {\n      label: \"Duplicate\",\n      icon: Copy,\n    },\n    {\n      label: \"Move to\",\n      icon: CornerUpRight,\n    },\n    {\n      label: \"Move to Trash\",\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: CornerUpLeft,\n    },\n    {\n      label: \"View analytics\",\n      icon: LineChart,\n    },\n    {\n      label: \"Version History\",\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: \"Show delete pages\",\n      icon: Trash,\n    },\n    {\n      label: \"Notifications\",\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: ArrowUp,\n    },\n    {\n      label: \"Export\",\n      icon: ArrowDown,\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-11.json b/apps/www/public/r/styles/default/sidebar-11.json
new file mode 100644
index 00000000000..f10a5efa724
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-11.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a collapsible file tree.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <File />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <File />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton>\n            <ChevronRight className=\"transition-transform\" />\n            <Folder />\n            {name}\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-12.json b/apps/www/public/r/styles/default/sidebar-12.json
new file mode 100644
index 00000000000..d96f1ecc124
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-12.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a calendar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/default/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/default/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-13.json b/apps/www/public/r/styles/default/sidebar-13.json
new file mode 100644
index 00000000000..9cf2bc9ee1b
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-13.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar in a dialog.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"@/registry/default/blocks/sidebar-13/components/settings-dialog\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-14.json b/apps/www/public/r/styles/default/sidebar-14.json
new file mode 100644
index 00000000000..34242fd92f4
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-14.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar on the right.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-15.json b/apps/www/public/r/styles/default/sidebar-15.json
new file mode 100644
index 00000000000..6c3b413772b
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-15.json
@@ -0,0 +1,89 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A left and right sidebar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"@/registry/default/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/default/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-15/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/default/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/default/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/default/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/default/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/default/blocks/sidebar-15/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function SidebarLeft({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/default/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/default/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-16.json b/apps/www/public/r/styles/default/sidebar-16.json
new file mode 100644
index 00000000000..53626d1ef70
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-16.json
@@ -0,0 +1,71 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/default/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(theme(spacing.14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/default/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-[--header-height] !h-[calc(100svh-var(--header-height))]\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { SidebarInput } from \"@/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <div className=\"relative\">\n        <Label htmlFor=\"search\" className=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Type to search...\"\n          className=\"h-8 pl-7\"\n        />\n        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/default/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport { useSidebar } from \"@/registry/default/ui/sidebar\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"flex sticky top-0 z-50 w-full items-center border-b bg-background\">\n      <div className=\"flex h-[--header-height] w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <SidebarIcon />\n        </Button>\n        <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-controlled.json b/apps/www/public/r/styles/default/sidebar-controlled.json
new file mode 100644
index 00000000000..f2be2062be4
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-controlled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <SidebarProvider open={open} onOpenChange={setOpen}>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center h-12 px-4 justify-between\">\n          <Button\n            onClick={() => setOpen((open) => !open)}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            {open ? <PanelLeftClose /> : <PanelLeftOpen />}\n            <span>{open ? \"Close\" : \"Open\"} Sidebar</span>\n          </Button>\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-demo.json b/apps/www/public/r/styles/default/sidebar-demo.json
new file mode 100644
index 00000000000..3bce491bb54
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Calendar, Home, Inbox, Search, Settings } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\n// Menu items.\nconst items = [\n  {\n    title: \"Home\",\n    url: \"#\",\n    icon: Home,\n  },\n  {\n    title: \"Inbox\",\n    url: \"#\",\n    icon: Inbox,\n  },\n  {\n    title: \"Calendar\",\n    url: \"#\",\n    icon: Calendar,\n  },\n  {\n    title: \"Search\",\n    url: \"#\",\n    icon: Search,\n  },\n  {\n    title: \"Settings\",\n    url: \"#\",\n    icon: Settings,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Application</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-footer.json b/apps/www/public/r/styles/default/sidebar-footer.json
new file mode 100644
index 00000000000..762076b51de
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-footer.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-footer.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, ChevronUp, User2 } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader />\n        <SidebarContent />\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Username\n                    <ChevronUp className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  side=\"top\"\n                  className=\"w-[--radix-popper-anchor-width]\"\n                >\n                  <DropdownMenuItem>\n                    <span>Account</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Billing</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Sign out</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-group-action.json b/apps/www/public/r/styles/default/sidebar-group-action.json
new file mode 100644
index 00000000000..4207e23e88b
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-group-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-action.tsx",
+      "content": "\"use client\"\n\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from \"lucide-react\"\nimport { Toaster, toast } from \"sonner\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Toaster\n        position=\"bottom-left\"\n        toastOptions={{\n          className: \"ml-[160px]\",\n        }}\n      />\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupAction\n              title=\"Add Project\"\n              onClick={() => toast(\"You clicked the group action!\")}\n            >\n              <Plus /> <span className=\"sr-only\">Add Project</span>\n            </SidebarGroupAction>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <Frame />\n                      <span>Design Engineering</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <PieChart />\n                      <span>Sales & Marketing</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <Map />\n                      <span>Travel</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-group-collapsible.json b/apps/www/public/r/styles/default/sidebar-group-collapsible.json
new file mode 100644
index 00000000000..2fe54a6d844
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-group-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <Collapsible defaultOpen className=\"group/collapsible\">\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  Help\n                  <ChevronDown className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <LifeBuoy />\n                        Support\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <Send />\n                        Feedback\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-group.json b/apps/www/public/r/styles/default/sidebar-group.json
new file mode 100644
index 00000000000..f346ded36ed
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-group.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group.tsx",
+      "content": "\"use client\"\n\nimport { LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Help</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <LifeBuoy />\n                    Support\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <Send />\n                    Feedback\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-header.json b/apps/www/public/r/styles/default/sidebar-header.json
new file mode 100644
index 00000000000..a5efdcb83bb
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-header.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-header.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Select Workspace\n                    <ChevronDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent className=\"w-[--radix-popper-anchor-width]\">\n                  <DropdownMenuItem>\n                    <span>Acme Inc</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Acme Corp.</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-menu-action.json b/apps/www/public/r/styles/default/sidebar-menu-action.json
new file mode 100644
index 00000000000..8ac46a44658
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-menu-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-action.tsx",
+      "content": "\"use client\"\n\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project, index) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction>\n                          <MoreHorizontal />\n                          <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuItem>\n                          <span>Edit Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <span>Delete Project</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-menu-badge.json b/apps/www/public/r/styles/default/sidebar-menu-badge.json
new file mode 100644
index 00000000000..13bc9d40eb9
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-menu-badge.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-badge.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n    badge: \"8\",\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-menu-collapsible.json b/apps/www/public/r/styles/default/sidebar-menu-collapsible.json
new file mode 100644
index 00000000000..c08d9f66151
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-menu-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <Collapsible\n                    key={index}\n                    className=\"group/collapsible\"\n                    defaultOpen={index === 0}\n                  >\n                    <SidebarMenuItem>\n                      <CollapsibleTrigger asChild>\n                        <SidebarMenuButton>\n                          <span>{item.title}</span>\n                          <ChevronRight className=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem, subIndex) => (\n                            <SidebarMenuSubItem key={subIndex}>\n                              <SidebarMenuSubButton asChild>\n                                <a href={subItem.url}>\n                                  <span>{subItem.title}</span>\n                                </a>\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </SidebarMenuItem>\n                  </Collapsible>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-menu-sub.json b/apps/www/public/r/styles/default/sidebar-menu-sub.json
new file mode 100644
index 00000000000..33f48962040
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-menu-sub.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-sub.tsx",
+      "content": "\"use client\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <SidebarMenuItem key={index}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuSub>\n                      {item.items.map((subItem, subIndex) => (\n                        <SidebarMenuSubItem key={subIndex}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-menu.json b/apps/www/public/r/styles/default/sidebar-menu.json
new file mode 100644
index 00000000000..41f54b6f1e9
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-menu.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-rsc.json b/apps/www/public/r/styles/default/sidebar-rsc.json
new file mode 100644
index 00000000000..f9dd25279b3
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-rsc.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-rsc.tsx",
+      "content": "import * as React from \"react\"\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarProvider,\n} from \"@/registry/default/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n    badge: \"8\",\n  },\n]\n\n// Dummy fetch function\nasync function fetchProjects() {\n  await new Promise((resolve) => setTimeout(resolve, 3000))\n  return projects\n}\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <React.Suspense fallback={<NavProjectsSkeleton />}>\n                <NavProjects />\n              </React.Suspense>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n\nfunction NavProjectsSkeleton() {\n  return (\n    <SidebarMenu>\n      {Array.from({ length: 5 }).map((_, index) => (\n        <SidebarMenuItem key={index}>\n          <SidebarMenuSkeleton showIcon />\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nasync function NavProjects() {\n  const projects = await fetchProjects()\n\n  return (\n    <SidebarMenu>\n      {projects.map((project) => (\n        <SidebarMenuItem key={project.name}>\n          <SidebarMenuButton asChild>\n            <a href={project.url}>\n              <project.icon />\n              <span>{project.name}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar.json b/apps/www/public/r/styles/default/sidebar.json
new file mode 100644
index 00000000000..8b06dea10ad
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "separator",
+    "sheet",
+    "tooltip",
+    "input",
+    "use-mobile",
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "ui/sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/default/hooks/use-mobile\"\nimport { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/default/ui/sheet\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = React.useState(false)\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === \"function\" ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n\n        // This sets the cookie to keep the sidebar state.\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      },\n      [setOpenProp, open]\n    )\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener(\"keydown\", handleKeyDown)\n      return () => window.removeEventListener(\"keydown\", handleKeyDown)\n    }, [toggleSidebar])\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? \"expanded\" : \"collapsed\"\n\n    const contextValue = React.useMemo<SidebarContextProps>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH,\n                \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as React.CSSProperties\n            }\n            className={cn(\n              \"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar\",\n              className\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  }\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\nconst Sidebar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    side?: \"left\" | \"right\"\n    variant?: \"sidebar\" | \"floating\" | \"inset\"\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  }\n>(\n  (\n    {\n      side = \"left\",\n      variant = \"sidebar\",\n      collapsible = \"offcanvas\",\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n    if (collapsible === \"none\") {\n      return (\n        <div\n          className={cn(\n            \"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground\",\n            className\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </div>\n      )\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n              } as React.CSSProperties\n            }\n            side={side}\n          >\n            <SheetHeader className=\"sr-only\">\n              <SheetTitle>Sidebar</SheetTitle>\n              <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n            </SheetHeader>\n            <div className=\"flex h-full w-full flex-col\">{children}</div>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-sidebar-foreground md:block\"\n        data-state={state}\n        data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n        data-variant={variant}\n        data-side={side}\n      >\n        {/* This is what handles the sidebar gap on desktop */}\n        <div\n          className={cn(\n            \"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\n            \"group-data-[collapsible=offcanvas]:w-0\",\n            \"group-data-[side=right]:rotate-180\",\n            variant === \"floating\" || variant === \"inset\"\n              ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n              : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\"\n          )}\n        />\n        <div\n          className={cn(\n            \"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\n            side === \"left\"\n              ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n              : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n            // Adjust the padding for floating and inset variants.\n            variant === \"floating\" || variant === \"inset\"\n              ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n              : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n            className\n          )}\n          {...props}\n        >\n          <div\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n  React.ElementRef<typeof Button>,\n  React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"h-7 w-7\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <PanelLeft />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst SidebarRail = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      ref={ref}\n      data-sidebar=\"rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarRail.displayName = \"SidebarRail\"\n\nconst SidebarInset = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"main\">\n>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = \"SidebarInset\"\n\nconst SidebarInput = React.forwardRef<\n  React.ElementRef<typeof Input>,\n  React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      className={cn(\n        \"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = \"SidebarInput\"\n\nconst SidebarHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarSeparator = React.forwardRef<\n  React.ElementRef<typeof Separator>,\n  React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n})\nSidebarSeparator.displayName = \"SidebarSeparator\"\n\nconst SidebarContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = \"SidebarGroup\"\n\nconst SidebarGroupLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"div\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\n\nconst SidebarGroupAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = \"SidebarGroupAction\"\n\nconst SidebarGroupContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"group-content\"\n    className={cn(\"w-full text-sm\", className)}\n    {...props}\n  />\n))\nSidebarGroupContent.displayName = \"SidebarGroupContent\"\n\nconst SidebarMenu = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu\"\n    className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n    {...props}\n  />\n))\nSidebarMenu.displayName = \"SidebarMenu\"\n\nconst SidebarMenuItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    data-sidebar=\"menu-item\"\n    className={cn(\"group/menu-item relative\", className)}\n    {...props}\n  />\n))\nSidebarMenuItem.displayName = \"SidebarMenuItem\"\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = \"default\",\n      size = \"default\",\n      tooltip,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : \"button\"\n    const { isMobile, state } = useSidebar()\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n        {...props}\n      />\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === \"string\") {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== \"collapsed\" || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    )\n  }\n)\nSidebarMenuButton.displayName = \"SidebarMenuButton\"\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = \"SidebarMenuAction\"\n\nconst SidebarMenuBadge = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"menu-badge\"\n    className={cn(\n      \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground\",\n      \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className\n    )}\n    {...props}\n  />\n))\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\"\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-[--skeleton-width] flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\n\nconst SidebarMenuSub = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu-sub\"\n    className={cn(\n      \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className\n    )}\n    {...props}\n  />\n))\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\n\nconst SidebarMenuSubItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<\"a\"> & {\n    asChild?: boolean\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "sidebar": {
+              "DEFAULT": "hsl(var(--sidebar-background))",
+              "foreground": "hsl(var(--sidebar-foreground))",
+              "primary": "hsl(var(--sidebar-primary))",
+              "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+              "accent": "hsl(var(--sidebar-accent))",
+              "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+              "border": "hsl(var(--sidebar-border))",
+              "ring": "hsl(var(--sidebar-ring))"
+            }
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "sidebar-background": "0 0% 98%",
+      "sidebar-foreground": "240 5.3% 26.1%",
+      "sidebar-primary": "240 5.9% 10%",
+      "sidebar-primary-foreground": "0 0% 98%",
+      "sidebar-accent": "240 4.8% 95.9%",
+      "sidebar-accent-foreground": "240 5.9% 10%",
+      "sidebar-border": "220 13% 91%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    },
+    "dark": {
+      "sidebar-background": "240 5.9% 10%",
+      "sidebar-foreground": "240 4.8% 95.9%",
+      "sidebar-primary": "224.3 76.3% 48%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "240 3.7% 15.9%",
+      "sidebar-accent-foreground": "240 4.8% 95.9%",
+      "sidebar-border": "240 3.7% 15.9%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sink.json b/apps/www/public/r/styles/default/sink.json
new file mode 100644
index 00000000000..b99700b7fab
--- /dev/null
+++ b/apps/www/public/r/styles/default/sink.json
@@ -0,0 +1,452 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sink",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "accordion",
+    "alert",
+    "alert-dialog",
+    "aspect-ratio",
+    "avatar",
+    "badge",
+    "breadcrumb",
+    "button",
+    "calendar",
+    "card",
+    "carousel",
+    "chart",
+    "checkbox",
+    "collapsible",
+    "command",
+    "context-menu",
+    "dialog",
+    "drawer",
+    "dropdown-menu",
+    "hover-card",
+    "input",
+    "input-otp",
+    "label",
+    "menubar",
+    "navigation-menu",
+    "pagination",
+    "popover",
+    "progress",
+    "radio-group",
+    "resizable",
+    "scroll-area",
+    "select",
+    "separator",
+    "sheet",
+    "sidebar",
+    "skeleton",
+    "slider",
+    "sonner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "toast",
+    "toggle",
+    "toggle-group",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "internal/sink/page.tsx",
+      "content": "import { AccordionDemo } from \"@/registry/default/internal/sink/components/accordion-demo\"\nimport { AlertDemo } from \"@/registry/default/internal/sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/registry/default/internal/sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/registry/default/internal/sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/registry/default/internal/sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/registry/default/internal/sink/components/avatar-demo\"\nimport { BadgeDemo } from \"@/registry/default/internal/sink/components/badge-demo\"\nimport { BadgeDestructive } from \"@/registry/default/internal/sink/components/badge-destructive\"\nimport { BadgeOutline } from \"@/registry/default/internal/sink/components/badge-outline\"\nimport { BadgeSecondary } from \"@/registry/default/internal/sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/registry/default/internal/sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/registry/default/internal/sink/components/button-demo\"\nimport { ButtonDestructive } from \"@/registry/default/internal/sink/components/button-destructive\"\nimport { ButtonGhost } from \"@/registry/default/internal/sink/components/button-ghost\"\nimport { ButtonLink } from \"@/registry/default/internal/sink/components/button-link\"\nimport { ButtonLoading } from \"@/registry/default/internal/sink/components/button-loading\"\nimport { ButtonOutline } from \"@/registry/default/internal/sink/components/button-outline\"\nimport { ButtonSecondary } from \"@/registry/default/internal/sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/registry/default/internal/sink/components/button-with-icon\"\nimport { CalendarDemo } from \"@/registry/default/internal/sink/components/calendar-demo\"\nimport { CardDemo } from \"@/registry/default/internal/sink/components/card-demo\"\nimport { CarouselDemo } from \"@/registry/default/internal/sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/registry/default/internal/sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/registry/default/internal/sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/registry/default/internal/sink/components/combobox-demo\"\nimport { CommandDemo } from \"@/registry/default/internal/sink/components/command-demo\"\nimport { ComponentWrapper } from \"@/registry/default/internal/sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/registry/default/internal/sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/registry/default/internal/sink/components/date-picker-demo\"\nimport { DialogDemo } from \"@/registry/default/internal/sink/components/dialog-demo\"\nimport { DrawerDemo } from \"@/registry/default/internal/sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/registry/default/internal/sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/registry/default/internal/sink/components/hover-card-demo\"\nimport { InputDemo } from \"@/registry/default/internal/sink/components/input-demo\"\nimport { InputOTPDemo } from \"@/registry/default/internal/sink/components/input-otp-demo\"\nimport { LabelDemo } from \"@/registry/default/internal/sink/components/label-demo\"\nimport { MenubarDemo } from \"@/registry/default/internal/sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/registry/default/internal/sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/registry/default/internal/sink/components/pagination-demo\"\nimport { PopoverDemo } from \"@/registry/default/internal/sink/components/popover-demo\"\nimport { ProgressDemo } from \"@/registry/default/internal/sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/registry/default/internal/sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/registry/default/internal/sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/registry/default/internal/sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/registry/default/internal/sink/components/select-demo\"\nimport { SeparatorDemo } from \"@/registry/default/internal/sink/components/separator-demo\"\nimport { SheetDemo } from \"@/registry/default/internal/sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/registry/default/internal/sink/components/skeleton-demo\"\nimport { SliderDemo } from \"@/registry/default/internal/sink/components/slider-demo\"\nimport { SonnerDemo } from \"@/registry/default/internal/sink/components/sonner-demo\"\nimport { SwitchDemo } from \"@/registry/default/internal/sink/components/switch-demo\"\nimport { TableDemo } from \"@/registry/default/internal/sink/components/table-demo\"\nimport { TabsDemo } from \"@/registry/default/internal/sink/components/tabs-demo\"\nimport { TextareaDemo } from \"@/registry/default/internal/sink/components/textarea-demo\"\nimport { ToastDemo } from \"@/registry/default/internal/sink/components/toast-demo\"\nimport { ToggleDemo } from \"@/registry/default/internal/sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/registry/default/internal/sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/registry/default/internal/sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/registry/default/internal/sink/components/toggle-outline\"\nimport { ToggleWithText } from \"@/registry/default/internal/sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/registry/default/internal/sink/components/tooltip-demo\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function SinkPage() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n            <ComponentWrapper name=\"Accordion\">\n              <AccordionDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Alert\">\n              <AlertDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AlertDialog\">\n              <AlertDialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AspectRatio\">\n              <AspectRatioDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Avatar\">\n              <AvatarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Badge\">\n              <BadgeDemo />\n              <BadgeDestructive />\n              <BadgeOutline />\n              <BadgeSecondary />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Breadcrumb\">\n              <BreadcrumbDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Button\">\n              <div className=\"flex items-center gap-2\">\n                <ButtonDemo />\n                <ButtonDestructive />\n                <ButtonGhost />\n                <ButtonLink />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonLoading />\n                <ButtonOutline />\n                <ButtonSecondary />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonWithIcon />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Calendar\">\n              <CalendarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Card\">\n              <CardDemo className=\"w-full\" />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Carousel\"\n              className=\"[&_.max-w-xs]:max-w-[70%]\"\n            >\n              <CarouselDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Checkbox\">\n              <CheckboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Collapsible\">\n              <CollapsibleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Combobox\">\n              <ComboboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Command\"\n              className=\"[&_[cmdk-root]]:md:min-w-max\"\n            >\n              <CommandDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ContextMenu\">\n              <ContextMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DatePicker\">\n              <DatePickerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Dialog\">\n              <DialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Drawer\">\n              <DrawerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DropdownMenu\">\n              <DropdownMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"HoverCard\">\n              <HoverCardDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Input\">\n              <InputDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"InputOTP\">\n              <InputOTPDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Label\">\n              <LabelDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Menubar\">\n              <MenubarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"NavigationMenu\" className=\"col-span-2\">\n              <NavigationMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Pagination\">\n              <PaginationDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Popover\">\n              <PopoverDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Progress\">\n              <ProgressDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"RadioGroup\">\n              <RadioGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Resizable\" className=\"col-span-2\">\n              <ResizableHandleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ScrollArea\">\n              <ScrollAreaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Select\">\n              <SelectDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Separator\">\n              <SeparatorDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sheet\">\n              <SheetDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Skeleton\">\n              <SkeletonDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Slider\">\n              <SliderDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sonner\">\n              <SonnerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Switch\">\n              <SwitchDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Table\" className=\"col-span-2\">\n              <TableDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tabs\">\n              <TabsDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Textarea\">\n              <TextareaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toast\">\n              <ToastDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toggle\">\n              <div className=\"flex items-center gap-2\">\n                <ToggleDemo />\n                <ToggleDisabled />\n                <ToggleOutline />\n                <ToggleWithText />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ToggleGroup\">\n              <ToggleGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tooltip\">\n              <TooltipDemo />\n            </ComponentWrapper>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/sink/page.tsx"
+    },
+    {
+      "path": "internal/sink/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/default/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/component-wrapper.tsx",
+      "content": "import { cn } from \"@/registry/default/lib/utils\"\n\nexport function ComponentWrapper({\n  className,\n  name,\n  children,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n  return (\n    <div\n      className={cn(\"flex w-full flex-col rounded-lg border\", className)}\n      {...props}\n    >\n      <div className=\"border-b px-4 py-3\">\n        <div className=\"text-sm font-medium\">{name}</div>\n      </div>\n      <div className=\"flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full\">\n        {children}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">\n                  {activeTeam.name}\n                </span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/accordion-demo.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other\n          components&apos; aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport function AlertDemo() {\n  return (\n    <Alert>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-dialog-demo.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/avatar-demo.tsx",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-demo.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/breadcrumb-demo.tsx",
+      "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { 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 { Switch } from \"@/registry/default/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nexport function CheckboxDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <label\n        htmlFor=\"terms\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nexport function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/command-demo.tsx",
+      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\"\n\nexport function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/context-menu-demo.tsx",
+      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dialog-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Email</DropdownMenuItem>\n                <DropdownMenuItem>Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\"\n\nexport function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-muted-foreground\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-demo.tsx",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-otp-demo.tsx",
+      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/menubar-demo.tsx",
+      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/default/ui/menubar\"\n\nexport function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/default/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport function NavigationMenuDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\n                      Beautifully designed components built with Radix UI and\n                      Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nconst ListItem = React.forwardRef<\n  React.ElementRef<\"a\">,\n  React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          ref={ref}\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"text-sm font-medium leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/pagination-demo.tsx",
+      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\"\n\nexport function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/popover-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/default/ui/progress\"\n\nexport function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/resizable-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/separator-demo.tsx",
+      "content": "import { Separator } from \"@/registry/default/ui/separator\"\n\nexport function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sheet-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nexport function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nexport function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/switch-demo.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/table-demo.tsx",
+      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tabs-demo.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\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nexport function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsList className=\"grid w-full grid-cols-2\">\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Account</CardTitle>\n            <CardDescription>\n              Make changes to your account here. Click save when you're done.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"username\">Username</Label>\n              <Input id=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save changes</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Password</CardTitle>\n            <CardDescription>\n              Change your password here. After saving, you'll be logged out.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"current\">Current password</Label>\n              <Input id=\"current\" type=\"password\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"new\">New password</Label>\n              <Input id=\"new\" type=\"password\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save password</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { ToastAction } from \"@/registry/default/ui/toast\"\n\nexport function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-outline.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-destructive.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-ghost.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-link.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-outline.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-secondary.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-with-icon.tsx",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonWithIcon() {\n  return (\n    <Button>\n      <MailOpen /> Login with Email\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/skeleton-card.json b/apps/www/public/r/styles/default/skeleton-card.json
new file mode 100644
index 00000000000..e9214815568
--- /dev/null
+++ b/apps/www/public/r/styles/default/skeleton-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-card",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "examples/skeleton-card.tsx",
+      "content": "import { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nexport default function SkeletonCard() {\n  return (\n    <div className=\"flex flex-col space-y-3\">\n      <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/skeleton-demo.json b/apps/www/public/r/styles/default/skeleton-demo.json
new file mode 100644
index 00000000000..77baa4a7153
--- /dev/null
+++ b/apps/www/public/r/styles/default/skeleton-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "examples/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/skeleton.json b/apps/www/public/r/styles/default/skeleton.json
index 55fa9751f7f..62844a6a05c 100644
--- a/apps/www/public/r/styles/default/skeleton.json
+++ b/apps/www/public/r/styles/default/skeleton.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "skeleton",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/skeleton.tsx",
diff --git a/apps/www/public/r/styles/default/slider-demo.json b/apps/www/public/r/styles/default/slider-demo.json
new file mode 100644
index 00000000000..042dd2100cf
--- /dev/null
+++ b/apps/www/public/r/styles/default/slider-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "slider"
+  ],
+  "files": [
+    {
+      "path": "examples/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/slider.json b/apps/www/public/r/styles/default/slider.json
index 967dc0a0f49..a6b7d0381b1 100644
--- a/apps/www/public/r/styles/default/slider.json
+++ b/apps/www/public/r/styles/default/slider.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "slider",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-slider"
   ],
diff --git a/apps/www/public/r/styles/default/sonner-demo.json b/apps/www/public/r/styles/default/sonner-demo.json
new file mode 100644
index 00000000000..9e0db7d411a
--- /dev/null
+++ b/apps/www/public/r/styles/default/sonner-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "examples/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sonner.json b/apps/www/public/r/styles/default/sonner.json
index ffb2dc69025..88ac39ce6d4 100644
--- a/apps/www/public/r/styles/default/sonner.json
+++ b/apps/www/public/r/styles/default/sonner.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "sonner",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "sonner",
     "next-themes"
diff --git a/apps/www/public/r/styles/default/style.json b/apps/www/public/r/styles/default/style.json
new file mode 100644
index 00000000000..f561eb73e3d
--- /dev/null
+++ b/apps/www/public/r/styles/default/style.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {}
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/switch-demo.json b/apps/www/public/r/styles/default/switch-demo.json
new file mode 100644
index 00000000000..98d34cb40da
--- /dev/null
+++ b/apps/www/public/r/styles/default/switch-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "examples/switch-demo.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/switch-form.json b/apps/www/public/r/styles/default/switch-form.json
new file mode 100644
index 00000000000..fbb5832653d
--- /dev/null
+++ b/apps/www/public/r/styles/default/switch-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "switch",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/switch-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/default/ui/form\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nconst FormSchema = z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      security_emails: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full space-y-6\">\n        <div>\n          <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n          <div className=\"space-y-4\">\n            <FormField\n              control={form.control}\n              name=\"marketing_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel className=\"text-base\">\n                      Marketing emails\n                    </FormLabel>\n                    <FormDescription>\n                      Receive emails about new products, features, and more.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n            <FormField\n              control={form.control}\n              name=\"security_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel className=\"text-base\">Security emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about your account security.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                      disabled\n                      aria-readonly\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n          </div>\n        </div>\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/switch.json b/apps/www/public/r/styles/default/switch.json
index 33ad9c7b5de..e8b511d1a3c 100644
--- a/apps/www/public/r/styles/default/switch.json
+++ b/apps/www/public/r/styles/default/switch.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "switch",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-switch"
   ],
diff --git a/apps/www/public/r/styles/default/table-demo.json b/apps/www/public/r/styles/default/table-demo.json
new file mode 100644
index 00000000000..a88c40c45f8
--- /dev/null
+++ b/apps/www/public/r/styles/default/table-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "table"
+  ],
+  "files": [
+    {
+      "path": "examples/table-demo.tsx",
+      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/table.json b/apps/www/public/r/styles/default/table.json
index 8222ef1a3e9..d4e3fba9747 100644
--- a/apps/www/public/r/styles/default/table.json
+++ b/apps/www/public/r/styles/default/table.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "table",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/table.tsx",
diff --git a/apps/www/public/r/styles/default/tabs-demo.json b/apps/www/public/r/styles/default/tabs-demo.json
new file mode 100644
index 00000000000..45b5898cff3
--- /dev/null
+++ b/apps/www/public/r/styles/default/tabs-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "tabs"
+  ],
+  "files": [
+    {
+      "path": "examples/tabs-demo.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\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nexport default function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsList className=\"grid w-full grid-cols-2\">\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Account</CardTitle>\n            <CardDescription>\n              Make changes to your account here. Click save when you're done.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"username\">Username</Label>\n              <Input id=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save changes</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Password</CardTitle>\n            <CardDescription>\n              Change your password here. After saving, you'll be logged out.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"current\">Current password</Label>\n              <Input id=\"current\" type=\"password\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"new\">New password</Label>\n              <Input id=\"new\" type=\"password\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save password</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/tabs.json b/apps/www/public/r/styles/default/tabs.json
index 9815329ffef..b5f9dc21b74 100644
--- a/apps/www/public/r/styles/default/tabs.json
+++ b/apps/www/public/r/styles/default/tabs.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "tabs",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-tabs"
   ],
diff --git a/apps/www/public/r/styles/default/textarea-demo.json b/apps/www/public/r/styles/default/textarea-demo.json
new file mode 100644
index 00000000000..e75806c86ea
--- /dev/null
+++ b/apps/www/public/r/styles/default/textarea-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/textarea-disabled.json b/apps/www/public/r/styles/default/textarea-disabled.json
new file mode 100644
index 00000000000..dceb48048b1
--- /dev/null
+++ b/apps/www/public/r/styles/default/textarea-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-disabled.tsx",
+      "content": "import { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function TextareaDisabled() {\n  return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/textarea-form.json b/apps/www/public/r/styles/default/textarea-form.json
new file mode 100644
index 00000000000..1cd07e809af
--- /dev/null
+++ b/apps/www/public/r/styles/default/textarea-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nconst FormSchema = z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: \"Bio must be at least 10 characters.\",\n    })\n    .max(160, {\n      message: \"Bio must not be longer than 30 characters.\",\n    }),\n})\n\nexport default function TextareaForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"bio\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Bio</FormLabel>\n              <FormControl>\n                <Textarea\n                  placeholder=\"Tell us a little bit about yourself\"\n                  className=\"resize-none\"\n                  {...field}\n                />\n              </FormControl>\n              <FormDescription>\n                You can <span>@mention</span> other users and organizations.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/textarea-with-button.json b/apps/www/public/r/styles/default/textarea-with-button.json
new file mode 100644
index 00000000000..2f3395d55e8
--- /dev/null
+++ b/apps/www/public/r/styles/default/textarea-with-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-button.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function TextareaWithButton() {\n  return (\n    <div className=\"grid w-full gap-2\">\n      <Textarea placeholder=\"Type your message here.\" />\n      <Button>Send message</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/textarea-with-label.json b/apps/www/public/r/styles/default/textarea-with-label.json
new file mode 100644
index 00000000000..af928655d80
--- /dev/null
+++ b/apps/www/public/r/styles/default/textarea-with-label.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-label",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-label.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function TextareaWithLabel() {\n  return (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message\">Your message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/textarea-with-text.json b/apps/www/public/r/styles/default/textarea-with-text.json
new file mode 100644
index 00000000000..26ff48efc90
--- /dev/null
+++ b/apps/www/public/r/styles/default/textarea-with-text.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-text.tsx",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function TextareaWithText() {\n  return (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message-2\">Your Message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n      <p className=\"text-sm text-muted-foreground\">\n        Your message will be copied to the support team.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/textarea.json b/apps/www/public/r/styles/default/textarea.json
index ae74544af29..b27c54892b1 100644
--- a/apps/www/public/r/styles/default/textarea.json
+++ b/apps/www/public/r/styles/default/textarea.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "textarea",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/textarea.tsx",
-      "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-sm 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\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
+      "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",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/theme-daylight.json b/apps/www/public/r/styles/default/theme-daylight.json
index a6f4f110894..56d374c2c52 100644
--- a/apps/www/public/r/styles/default/theme-daylight.json
+++ b/apps/www/public/r/styles/default/theme-daylight.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "theme-daylight",
   "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
   "cssVars": {
     "light": {
       "background": "36 39% 88%",
diff --git a/apps/www/public/r/styles/default/theme-emerald.json b/apps/www/public/r/styles/default/theme-emerald.json
index daae3354771..dd11b1ab9e1 100644
--- a/apps/www/public/r/styles/default/theme-emerald.json
+++ b/apps/www/public/r/styles/default/theme-emerald.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "theme-emerald",
   "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
   "cssVars": {
     "light": {
       "background": "0 0% 100%",
diff --git a/apps/www/public/r/styles/default/theme-midnight.json b/apps/www/public/r/styles/default/theme-midnight.json
index af39a8a05d3..65dfce822e5 100644
--- a/apps/www/public/r/styles/default/theme-midnight.json
+++ b/apps/www/public/r/styles/default/theme-midnight.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "theme-midnight",
   "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
   "cssVars": {
     "light": {
       "background": "240 5% 6%",
diff --git a/apps/www/public/r/styles/default/toast-demo.json b/apps/www/public/r/styles/default/toast-demo.json
new file mode 100644
index 00000000000..405385e5a12
--- /dev/null
+++ b/apps/www/public/r/styles/default/toast-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { ToastAction } from \"@/registry/default/ui/toast\"\n\nexport default function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toast-destructive.json b/apps/www/public/r/styles/default/toast-destructive.json
new file mode 100644
index 00000000000..e67ecccc640
--- /dev/null
+++ b/apps/www/public/r/styles/default/toast-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-destructive.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { ToastAction } from \"@/registry/default/ui/toast\"\n\nexport default function ToastDestructive() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          variant: \"destructive\",\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toast-simple.json b/apps/www/public/r/styles/default/toast-simple.json
new file mode 100644
index 00000000000..bd0535467be
--- /dev/null
+++ b/apps/www/public/r/styles/default/toast-simple.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-simple",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-simple.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ToastSimple() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          description: \"Your message has been sent.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toast-with-action.json b/apps/www/public/r/styles/default/toast-with-action.json
new file mode 100644
index 00000000000..98976606738
--- /dev/null
+++ b/apps/www/public/r/styles/default/toast-with-action.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-action",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-action.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { ToastAction } from \"@/registry/default/ui/toast\"\n\nexport default function ToastWithAction() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toast-with-title.json b/apps/www/public/r/styles/default/toast-with-title.json
new file mode 100644
index 00000000000..c9bf06dd820
--- /dev/null
+++ b/apps/www/public/r/styles/default/toast-with-title.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-title",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-title.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ToastWithTitle() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toast.json b/apps/www/public/r/styles/default/toast.json
index b63de369762..61b4048cb2a 100644
--- a/apps/www/public/r/styles/default/toast.json
+++ b/apps/www/public/r/styles/default/toast.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "toast",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-toast"
   ],
@@ -8,17 +10,20 @@
     {
       "path": "ui/toast.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Viewport\n    ref={ref}\n    className={cn(\n      \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n      className\n    )}\n    {...props}\n  />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n  \"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n  {\n    variants: {\n      variant: {\n        default: \"border bg-background text-foreground\",\n        destructive:\n          \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Toast = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n  return (\n    <ToastPrimitives.Root\n      ref={ref}\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Action>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Action\n    ref={ref}\n    className={cn(\n      \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive\",\n      className\n    )}\n    {...props}\n  />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Close>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Close\n    ref={ref}\n    className={cn(\n      \"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"h-4 w-4\" />\n  </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Title>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Title\n    ref={ref}\n    className={cn(\"text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Description>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Description\n    ref={ref}\n    className={cn(\"text-sm opacity-90\", className)}\n    {...props}\n  />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n  type ToastProps,\n  type ToastActionElement,\n  ToastProvider,\n  ToastViewport,\n  Toast,\n  ToastTitle,\n  ToastDescription,\n  ToastClose,\n  ToastAction,\n}\n",
-      "type": "registry:ui"
+      "type": "registry:ui",
+      "target": ""
     },
     {
       "path": "hooks/use-toast.ts",
       "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/default/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { useToast, toast }\n",
-      "type": "registry:hook"
+      "type": "registry:hook",
+      "target": ""
     },
     {
       "path": "ui/toaster.tsx",
       "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from \"@/registry/default/ui/toast\"\n\nexport function Toaster() {\n  const { toasts } = useToast()\n\n  return (\n    <ToastProvider>\n      {toasts.map(function ({ id, title, description, action, ...props }) {\n        return (\n          <Toast key={id} {...props}>\n            <div className=\"grid gap-1\">\n              {title && <ToastTitle>{title}</ToastTitle>}\n              {description && (\n                <ToastDescription>{description}</ToastDescription>\n              )}\n            </div>\n            {action}\n            <ToastClose />\n          </Toast>\n        )\n      })}\n      <ToastViewport />\n    </ToastProvider>\n  )\n}\n",
-      "type": "registry:ui"
+      "type": "registry:ui",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-demo.json b/apps/www/public/r/styles/default/toggle-demo.json
new file mode 100644
index 00000000000..bf5e9a8cc38
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle bold\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-disabled.json b/apps/www/public/r/styles/default/toggle-disabled.json
new file mode 100644
index 00000000000..aa1bd211e46
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle underline\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-group-demo.json b/apps/www/public/r/styles/default/toggle-group-demo.json
new file mode 100644
index 00000000000..2d9cb3d314a
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-group-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-group-disabled.json b/apps/www/public/r/styles/default/toggle-group-disabled.json
new file mode 100644
index 00000000000..a9fb4c6c901
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-group-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-disabled.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup disabled type=\"single\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-group-lg.json b/apps/www/public/r/styles/default/toggle-group-lg.json
new file mode 100644
index 00000000000..ed667df76fe
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-group-lg.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-lg",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-lg.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup size={\"lg\"} type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-group-outline.json b/apps/www/public/r/styles/default/toggle-group-outline.json
new file mode 100644
index 00000000000..381cb5633a2
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-group-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-outline.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup variant=\"outline\" type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-group-single.json b/apps/www/public/r/styles/default/toggle-group-single.json
new file mode 100644
index 00000000000..70566d9415c
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-group-single.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-single",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-single.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"single\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-group-sm.json b/apps/www/public/r/styles/default/toggle-group-sm.json
new file mode 100644
index 00000000000..feebc156e0d
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-group-sm.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-sm",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-sm.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup size={\"sm\"} type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-group.json b/apps/www/public/r/styles/default/toggle-group.json
index af0606c75fd..c1092cab774 100644
--- a/apps/www/public/r/styles/default/toggle-group.json
+++ b/apps/www/public/r/styles/default/toggle-group.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "toggle-group",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-toggle-group"
   ],
diff --git a/apps/www/public/r/styles/default/toggle-lg.json b/apps/www/public/r/styles/default/toggle-lg.json
new file mode 100644
index 00000000000..e8d521a6675
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-lg.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-lg",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-lg.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleLg() {\n  return (\n    <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-outline.json b/apps/www/public/r/styles/default/toggle-outline.json
new file mode 100644
index 00000000000..4c778f44c69
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-sm.json b/apps/www/public/r/styles/default/toggle-sm.json
new file mode 100644
index 00000000000..d2f444a703d
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-sm.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-sm",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-sm.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleSm() {\n  return (\n    <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-with-text.json b/apps/www/public/r/styles/default/toggle-with-text.json
new file mode 100644
index 00000000000..a26d7668696
--- /dev/null
+++ b/apps/www/public/r/styles/default/toggle-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle.json b/apps/www/public/r/styles/default/toggle.json
index 85ea4cfe50a..a913fa84553 100644
--- a/apps/www/public/r/styles/default/toggle.json
+++ b/apps/www/public/r/styles/default/toggle.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "toggle",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-toggle"
   ],
   "files": [
     {
       "path": "ui/toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-3\",\n        sm: \"h-9 px-2.5\",\n        lg: \"h-11 px-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-3 min-w-10\",\n        sm: \"h-9 px-2.5 min-w-9\",\n        lg: \"h-11 px-5 min-w-11\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/tooltip-demo.json b/apps/www/public/r/styles/default/tooltip-demo.json
new file mode 100644
index 00000000000..8deb3757c3e
--- /dev/null
+++ b/apps/www/public/r/styles/default/tooltip-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "examples/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/tooltip.json b/apps/www/public/r/styles/default/tooltip.json
index 54f6d41ef1d..c56aff63b16 100644
--- a/apps/www/public/r/styles/default/tooltip.json
+++ b/apps/www/public/r/styles/default/tooltip.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "tooltip",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-tooltip"
   ],
   "files": [
     {
       "path": "ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/typography-blockquote.json b/apps/www/public/r/styles/default/typography-blockquote.json
new file mode 100644
index 00000000000..7afcb802cdf
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-blockquote.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-blockquote",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-blockquote.tsx",
+      "content": "export default function TypographyBlockquote() {\n  return (\n    <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n      they should pay for the privilege.\"\n    </blockquote>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-demo.json b/apps/www/public/r/styles/default/typography-demo.json
new file mode 100644
index 00000000000..c5ae2e8b977
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-demo.tsx",
+      "content": "export default function TypographyDemo() {\n  return (\n    <div>\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n        The Joke Tax Chronicles\n      </h1>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </p>\n      <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n        The King's Plan\n      </h2>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king thought long and hard, and finally came up with{\" \"}\n        <a\n          href=\"#\"\n          className=\"font-medium text-primary underline underline-offset-4\"\n        >\n          a brilliant plan\n        </a>\n        : he would tax the jokes in the kingdom.\n      </p>\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n        \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n        that they should pay for the privilege.\"\n      </blockquote>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The Joke Tax\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king's subjects were not amused. They grumbled and complained, but\n        the king was firm:\n      </p>\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king's\n        foolishness get him down: a court jester named Jokester.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        Jokester's Revolt\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king's pillow, in his soup,\n        even in the royal toilet. The king was furious, but he couldn't seem to\n        stop Jokester.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn't help but laugh. And\n        once they started laughing, they couldn't stop.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The People's Rebellion\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </p>\n      <div className=\"my-6 w-full overflow-y-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                King's Treasury\n              </th>\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                People's happiness\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Empty\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Overflowing\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Modest\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Satisfied\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Full\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Ecstatic\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-h1.json b/apps/www/public/r/styles/default/typography-h1.json
new file mode 100644
index 00000000000..0c282dda464
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-h1.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h1",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h1.tsx",
+      "content": "export default function TypographyH1() {\n  return (\n    <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      Taxing Laughter: The Joke Tax Chronicles\n    </h1>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-h2.json b/apps/www/public/r/styles/default/typography-h2.json
new file mode 100644
index 00000000000..eb42b1c4142
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-h2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h2",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h2.tsx",
+      "content": "export default function TypographyH2() {\n  return (\n    <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n      The People of the Kingdom\n    </h2>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-h3.json b/apps/www/public/r/styles/default/typography-h3.json
new file mode 100644
index 00000000000..946cf24167a
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-h3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h3",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h3.tsx",
+      "content": "export default function TypographyH3() {\n  return (\n    <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-h4.json b/apps/www/public/r/styles/default/typography-h4.json
new file mode 100644
index 00000000000..bbd61e8a255
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-h4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h4",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h4.tsx",
+      "content": "export default function TypographyH4() {\n  return (\n    <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n      People stopped telling jokes\n    </h4>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-inline-code.json b/apps/www/public/r/styles/default/typography-inline-code.json
new file mode 100644
index 00000000000..edcf52f8b4a
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-inline-code.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-inline-code",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-inline-code.tsx",
+      "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n      @radix-ui/react-alert-dialog\n    </code>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-large.json b/apps/www/public/r/styles/default/typography-large.json
new file mode 100644
index 00000000000..fba10786a01
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-large.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-large",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-large.tsx",
+      "content": "export default function TypographyLarge() {\n  return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-lead.json b/apps/www/public/r/styles/default/typography-lead.json
new file mode 100644
index 00000000000..c38d1ef4a04
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-lead.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-lead",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-lead.tsx",
+      "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-xl text-muted-foreground\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-list.json b/apps/www/public/r/styles/default/typography-list.json
new file mode 100644
index 00000000000..397d847ec2b
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-list.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-list",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-list.tsx",
+      "content": "export default function TypographyList() {\n  return (\n    <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-muted.json b/apps/www/public/r/styles/default/typography-muted.json
new file mode 100644
index 00000000000..786c2904577
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-muted.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-muted",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-muted.tsx",
+      "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-p.json b/apps/www/public/r/styles/default/typography-p.json
new file mode 100644
index 00000000000..eb9a367fb1a
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-p.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-p",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-p.tsx",
+      "content": "export default function TypographyP() {\n  return (\n    <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error of\n      his ways and repealed the joke tax.\n    </p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-small.json b/apps/www/public/r/styles/default/typography-small.json
new file mode 100644
index 00000000000..f9cebba93fd
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-small.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-small",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-small.tsx",
+      "content": "export default function TypographySmall() {\n  return (\n    <small className=\"text-sm font-medium leading-none\">Email address</small>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-table.json b/apps/www/public/r/styles/default/typography-table.json
new file mode 100644
index 00000000000..af19b2b08f1
--- /dev/null
+++ b/apps/www/public/r/styles/default/typography-table.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-table",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-table.tsx",
+      "content": "export default function TypographyTable() {\n  return (\n    <div className=\"my-6 w-full overflow-y-auto\">\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              King's Treasury\n            </th>\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Empty\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Overflowing\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Modest\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Satisfied\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Full\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/use-mobile.json b/apps/www/public/r/styles/default/use-mobile.json
index a6f06c518ea..50fc54a1982 100644
--- a/apps/www/public/r/styles/default/use-mobile.json
+++ b/apps/www/public/r/styles/default/use-mobile.json
@@ -1,11 +1,14 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "use-mobile",
   "type": "registry:hook",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "hooks/use-mobile.tsx",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return isMobile\n}\n",
-      "type": "registry:hook"
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "type": "registry:hook",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/use-toast.json b/apps/www/public/r/styles/default/use-toast.json
index 5bc9d30e230..2849dd851df 100644
--- a/apps/www/public/r/styles/default/use-toast.json
+++ b/apps/www/public/r/styles/default/use-toast.json
@@ -1,11 +1,14 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "use-toast",
   "type": "registry:hook",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "hooks/use-toast.ts",
       "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/default/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { useToast, toast }\n",
-      "type": "registry:hook"
+      "type": "registry:hook",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/utils.json b/apps/www/public/r/styles/default/utils.json
index 987ce3b08f1..0af1ec0d616 100644
--- a/apps/www/public/r/styles/default/utils.json
+++ b/apps/www/public/r/styles/default/utils.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "utils",
   "type": "registry:lib",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "clsx",
     "tailwind-merge"
@@ -9,7 +11,8 @@
     {
       "path": "lib/utils.ts",
       "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
-      "type": "registry:lib"
+      "type": "registry:lib",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-login-01.json b/apps/www/public/r/styles/default/v0-login-01.json
new file mode 100644
index 00000000000..f01c3f77bb6
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-login-01.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-login-01",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "internal/login-01.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-screen w-full items-center justify-center px-4\">\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\n                  href=\"#\"\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        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-01.json b/apps/www/public/r/styles/default/v0-sidebar-01.json
new file mode 100644
index 00000000000..9de56de16bd
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-01.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-01",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <GalleryVerticalEnd className=\"size-4\" />\n                    </div>\n                    <div className=\"flex flex-col gap-0.5 leading-none\">\n                      <span className=\"font-semibold\">Documentation</span>\n                      <span className=\"\">v{selectedVersion}</span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n                >\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <Check className=\"ml-auto\" />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {/* We create a SidebarGroup for each parent. */}\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((item) => (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton asChild isActive={item.isActive}>\n                        <a href={item.url}>{item.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": "components/sidebar-01.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-02.json b/apps/www/public/r/styles/default/v0-sidebar-02.json
new file mode 100644
index 00000000000..804787539b9
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-02.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-02",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  GalleryVerticalEnd,\n  Search,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <GalleryVerticalEnd className=\"size-4\" />\n                    </div>\n                    <div className=\"flex flex-col gap-0.5 leading-none\">\n                      <span className=\"font-semibold\">Documentation</span>\n                      <span className=\"\">v{selectedVersion}</span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n                >\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <Check className=\"ml-auto\" />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent className=\"gap-0\">\n          {/* We create a collapsible SidebarGroup for each parent. */}\n          {data.navMain.map((item) => (\n            <Collapsible\n              key={item.title}\n              title={item.title}\n              defaultOpen\n              className=\"group/collapsible\"\n            >\n              <SidebarGroup>\n                <SidebarGroupLabel\n                  asChild\n                  className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <CollapsibleTrigger>\n                    {item.title}{\" \"}\n                    <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                  </CollapsibleTrigger>\n                </SidebarGroupLabel>\n                <CollapsibleContent>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      {item.items.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                          <SidebarMenuButton asChild isActive={item.isActive}>\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </CollapsibleContent>\n              </SidebarGroup>\n            </Collapsible>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-03.json b/apps/www/public/r/styles/default/v0-sidebar-03.json
new file mode 100644
index 00000000000..ee5bd16496f
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-03.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-03",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-04.json b/apps/www/public/r/styles/default/v0-sidebar-04.json
new file mode 100644
index 00000000000..667d7352121
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-04.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-04",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu className=\"gap-2\">\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-05.json b/apps/www/public/r/styles/default/v0-sidebar-05.json
new file mode 100644
index 00000000000..94c9be19b61
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-05.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-05",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-05.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item, index) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={index === 1}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger asChild>\n                      <SidebarMenuButton>\n                        {item.title}{\" \"}\n                        <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                        <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                      </SidebarMenuButton>\n                    </CollapsibleTrigger>\n                    {item.items?.length ? (\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((item) => (\n                            <SidebarMenuSubItem key={item.title}>\n                              <SidebarMenuSubButton\n                                asChild\n                                isActive={item.isActive}\n                              >\n                                <a href={item.url}>{item.title}</a>\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-06.json b/apps/www/public/r/styles/default/v0-sidebar-06.json
new file mode 100644
index 00000000000..81e033e09bb
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-06.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-06",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-06.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd, MoreHorizontal } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title} <MoreHorizontal className=\"ml-auto\" />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent\n                        side=\"bottom\"\n                        align=\"end\"\n                        className=\"min-w-56 rounded-lg\"\n                      >\n                        {item.items.map((item) => (\n                          <DropdownMenuItem asChild key={item.title}>\n                            <a href={item.url}>{item.title}</a>\n                          </DropdownMenuItem>\n                        ))}\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <div className=\"p-1\">\n            <Card className=\"shadow-none\">\n              <form>\n                <CardHeader className=\"p-4 pb-0\">\n                  <CardTitle className=\"text-sm\">\n                    Subscribe to our newsletter\n                  </CardTitle>\n                  <CardDescription>\n                    Opt-in to receive updates and news about the sidebar.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent className=\"grid gap-2.5 p-4\">\n                  <SidebarInput type=\"email\" placeholder=\"Email\" />\n                  <Button\n                    className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                    size=\"sm\"\n                  >\n                    Subscribe\n                  </Button>\n                </CardContent>\n              </form>\n            </Card>\n          </div>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-07.json b/apps/www/public/r/styles/default/v0-sidebar-07.json
new file mode 100644
index 00000000000..c17bb33d270
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-07.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-07",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport default function Page() {\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <activeTeam.logo className=\"size-4\" />\n                    </div>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                    Teams\n                  </DropdownMenuLabel>\n                  {data.teams.map((team, index) => (\n                    <DropdownMenuItem\n                      key={team.name}\n                      onClick={() => setActiveTeam(team)}\n                      className=\"gap-2 p-2\"\n                    >\n                      <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                        <team.logo className=\"size-4 shrink-0\" />\n                      </div>\n                      {team.name}\n                      <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                    </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                    <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                      <Plus className=\"size-4\" />\n                    </div>\n                    <div className=\"font-medium text-muted-foreground\">\n                      Add team\n                    </div>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger asChild>\n                      <SidebarMenuButton tooltip={item.title}>\n                        {item.icon && <item.icon />}\n                        <span>{item.title}</span>\n                        <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                      </SidebarMenuButton>\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>\n                                <span>{subItem.title}</span>\n                              </a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      <item.icon />\n                      <span>{item.name}</span>\n                    </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuAction showOnHover>\n                        <MoreHorizontal />\n                        <span className=\"sr-only\">More</span>\n                      </SidebarMenuAction>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      className=\"w-48 rounded-lg\"\n                      side=\"bottom\"\n                      align=\"end\"\n                    >\n                      <DropdownMenuItem>\n                        <Folder className=\"text-muted-foreground\" />\n                        <span>View Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Forward className=\"text-muted-foreground\" />\n                        <span>Share Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <Trash2 className=\"text-muted-foreground\" />\n                        <span>Delete Project</span>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </SidebarMenuItem>\n              ))}\n              <SidebarMenuItem>\n                <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar className=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side=\"bottom\"\n                  align=\"end\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                    <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <Sparkles />\n                      Upgrade to Pro\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <BadgeCheck />\n                      Account\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <CreditCard />\n                      Billing\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <Bell />\n                      Notifications\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <LogOut />\n                    Log out\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-08.json b/apps/www/public/r/styles/default/v0-sidebar-08.json
new file mode 100644
index 00000000000..a786f68a4ba
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-08.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-08",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-08.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Frame,\n  LifeBuoy,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n  Settings2,\n  Share,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton asChild tooltip={item.title}>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <ChevronRight />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      <item.icon />\n                      <span>{item.name}</span>\n                    </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuAction showOnHover>\n                        <MoreHorizontal />\n                        <span className=\"sr-only\">More</span>\n                      </SidebarMenuAction>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      className=\"w-48\"\n                      side=\"bottom\"\n                      align=\"end\"\n                    >\n                      <DropdownMenuItem>\n                        <Folder className=\"text-muted-foreground\" />\n                        <span>View Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Share className=\"text-muted-foreground\" />\n                        <span>Share Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <Trash2 className=\"text-muted-foreground\" />\n                        <span>Delete Project</span>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </SidebarMenuItem>\n              ))}\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar className=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side=\"bottom\"\n                  align=\"end\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                    <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <Sparkles />\n                      Upgrade to Pro\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <BadgeCheck />\n                      Account\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <CreditCard />\n                      Billing\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <Bell />\n                      Notifications\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <LogOut />\n                    Log out\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-09.json b/apps/www/public/r/styles/default/v0-sidebar-09.json
new file mode 100644
index 00000000000..f491e5bda3a
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-09.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-09",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveX,\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  File,\n  Inbox,\n  LogOut,\n  Send,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\nimport { Switch } from \"@/components/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-10.json b/apps/www/public/r/styles/default/v0-sidebar-10.json
new file mode 100644
index 00000000000..023503a20d2
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-10.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-10",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowUpRight,\n  AudioWaveform,\n  Bell,\n  Blocks,\n  Calendar,\n  ChevronDown,\n  ChevronRight,\n  Command,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  Home,\n  Inbox,\n  LineChart,\n  Link,\n  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  Star,\n  StarOff,\n  Trash,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n  actions: [\n    [\n      {\n        label: \"Customize Page\",\n        icon: Settings2,\n      },\n      {\n        label: \"Turn into wiki\",\n        icon: FileText,\n      },\n    ],\n    [\n      {\n        label: \"Copy Link\",\n        icon: Link,\n      },\n      {\n        label: \"Duplicate\",\n        icon: Copy,\n      },\n      {\n        label: \"Move to\",\n        icon: CornerUpRight,\n      },\n      {\n        label: \"Move to Trash\",\n        icon: Trash2,\n      },\n    ],\n    [\n      {\n        label: \"Undo\",\n        icon: CornerUpLeft,\n      },\n      {\n        label: \"View analytics\",\n        icon: LineChart,\n      },\n      {\n        label: \"Version History\",\n        icon: GalleryVerticalEnd,\n      },\n      {\n        label: \"Show delete pages\",\n        icon: Trash,\n      },\n      {\n        label: \"Notifications\",\n        icon: Bell,\n      },\n    ],\n    [\n      {\n        label: \"Import\",\n        icon: ArrowUp,\n      },\n      {\n        label: \"Export\",\n        icon: ArrowDown,\n      },\n    ],\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions actions={data.actions} />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction NavActions({\n  actions,\n}: {\n  actions: {\n    label: string\n    icon: LucideIcon\n  }[][]\n}) {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {actions.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n\nfunction NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nfunction NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nfunction NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-11.json b/apps/www/public/r/styles/default/v0-sidebar-11.json
new file mode 100644
index 00000000000..5802b1f6882
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-11.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-11",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-11.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <File />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <File />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton>\n            <ChevronRight className=\"transition-transform\" />\n            <Folder />\n            {name}\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-12.json b/apps/www/public/r/styles/default/v0-sidebar-12.json
new file mode 100644
index 00000000000..f8e7fafab62
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-12.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-12",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BadgeCheck,\n  Bell,\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Plus,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n\nfunction DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-13.json b/apps/www/public/r/styles/default/v0-sidebar-13.json
new file mode 100644
index 00000000000..31b570c8d9b
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-13.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-13",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n\nfunction SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-14.json b/apps/www/public/r/styles/default/v0-sidebar-14.json
new file mode 100644
index 00000000000..55b512fc163
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-14.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-14",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-14.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-15.json b/apps/www/public/r/styles/default/v0-sidebar-15.json
new file mode 100644
index 00000000000..e46c60f1da2
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-15.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-15",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpRight,\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  Blocks,\n  CalendarIcon,\n  Check,\n  ChevronDown,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Home,\n  Inbox,\n  Link,\n  LogOut,\n  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  StarOff,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst sidebarLeftData = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: CalendarIcon,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\n// This is sample data.\nconst sidebarRightData = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n\nfunction SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={sidebarLeftData.teams} />\n        <NavMain items={sidebarLeftData.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={sidebarLeftData.favorites} />\n        <NavWorkspaces workspaces={sidebarLeftData.workspaces} />\n        <NavSecondary\n          items={sidebarLeftData.navSecondary}\n          className=\"mt-auto\"\n        />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={sidebarRightData.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={sidebarRightData.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n\nfunction Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n\nfunction DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nfunction NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nfunction NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nfunction NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-16.json b/apps/www/public/r/styles/default/v0-sidebar-16.json
new file mode 100644
index 00000000000..649658c0552
--- /dev/null
+++ b/apps/www/public/r/styles/default/v0-sidebar-16.json
@@ -0,0 +1,23 @@
+{
+  "name": "v0-sidebar-16",
+  "type": "registry:block",
+  "description": "An inset sidebar with site header navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "navigation-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "v0/sidebar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport {\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Frame,\n  LifeBuoy,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n  Settings2,\n  Share,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\nconst HEADER_HEIGHT = \"4rem\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function Page() {\n  const [open, setOpen] = React.useState(true)\n  const { isMobile } = useSidebar()\n\n  return (\n    <div\n      style={\n        {\n          \"--header-height\": HEADER_HEIGHT,\n        } as React.CSSProperties\n      }\n    >\n      <header className=\"sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20\">\n        <div className=\"flex items-center gap-2 w-full\">\n          <Button\n            className=\"hidden md:flex\"\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => setOpen(!open)}\n          >\n            <Sidebar />\n          </Button>\n\n          <div className=\"mx-auto flex items-center gap-2\">\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <Command className=\"size-4\" />\n            </div>\n            <Separator orientation=\"vertical\" className=\"ml-4 h-4\" />\n            <NavigationMenu>\n              <NavigationMenuList>\n                <NavigationMenuItem>\n                  <NavigationMenuTrigger className=\"bg-sidebar\">\n                    Getting started\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                      <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                          <a\n                            className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                            href=\"/\"\n                          >\n                            <Icons.logo className=\"h-6 w-6\" />\n                            <div className=\"mb-2 mt-4 text-lg font-medium\">\n                              shadcn/ui\n                            </div>\n                            <p className=\"text-sm leading-tight text-muted-foreground\">\n                              Beautifully designed components built with Radix\n                              UI and Tailwind CSS.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Introduction\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              Re-usable components built using Radix UI and\n                              Tailwind CSS.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Installation\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              How to install dependencies and structure your\n                              app.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Typography\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              Styles for headings, paragraphs, lists...etc\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                  <NavigationMenuTrigger className=\"bg-sidebar\">\n                    Components\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                      {components.map((component) => (\n                        <li>\n                          <NavigationMenuLink key={component.title} asChild>\n                            <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                              <div className=\"text-sm font-medium leading-none\">\n                                {component.title}\n                              </div>\n                              <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                                {component.description}\n                              </p>\n                            </a>\n                          </NavigationMenuLink>\n                        </li>\n                      ))}\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                  <Link href=\"/docs\" legacyBehavior passHref>\n                    <NavigationMenuLink\n                      className={cn(navigationMenuTriggerStyle(), \"bg-sidebar\")}\n                    >\n                      Documentation\n                    </NavigationMenuLink>\n                  </Link>\n                </NavigationMenuItem>\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n      </header>\n      <SidebarProvider open={open} onOpenChange={setOpen}>\n        <Sidebar\n          className=\"top-[--header-height] pb-[--header-height]\"\n          variant=\"inset\"\n        >\n          <SidebarHeader>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton size=\"lg\" asChild>\n                  <a href=\"#\">\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <Command className=\"size-4\" />\n                    </div>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">Acme Inc</span>\n                      <span className=\"truncate text-xs\">Enterprise</span>\n                    </div>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarHeader>\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupLabel>Platform</SidebarGroupLabel>\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <Collapsible\n                    key={item.title}\n                    asChild\n                    defaultOpen={item.isActive}\n                  >\n                    <SidebarMenuItem>\n                      <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                          <item.icon />\n                          <span>{item.title}</span>\n                        </a>\n                      </SidebarMenuButton>\n                      {item.items?.length ? (\n                        <>\n                          <CollapsibleTrigger asChild>\n                            <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                              <ChevronRight />\n                              <span className=\"sr-only\">Toggle</span>\n                            </SidebarMenuAction>\n                          </CollapsibleTrigger>\n                          <CollapsibleContent>\n                            <SidebarMenuSub>\n                              {item.items?.map((subItem) => (\n                                <SidebarMenuSubItem key={subItem.title}>\n                                  <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                      <span>{subItem.title}</span>\n                                    </a>\n                                  </SidebarMenuSubButton>\n                                </SidebarMenuSubItem>\n                              ))}\n                            </SidebarMenuSub>\n                          </CollapsibleContent>\n                        </>\n                      ) : null}\n                    </SidebarMenuItem>\n                  </Collapsible>\n                ))}\n              </SidebarMenu>\n            </SidebarGroup>\n            <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n              <SidebarGroupLabel>Projects</SidebarGroupLabel>\n              <SidebarMenu>\n                {data.projects.map((item) => (\n                  <SidebarMenuItem key={item.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                          <MoreHorizontal />\n                          <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                      >\n                        <DropdownMenuItem>\n                          <Folder className=\"text-muted-foreground\" />\n                          <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <Share className=\"text-muted-foreground\" />\n                          <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                          <Trash2 className=\"text-muted-foreground\" />\n                          <span>Delete Project</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </SidebarMenuItem>\n                ))}\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <MoreHorizontal />\n                    <span>More</span>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroup>\n            <SidebarGroup className=\"mt-auto\">\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {data.navSecondary.map((item) => (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                          <item.icon />\n                          <span>{item.title}</span>\n                        </a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n          <SidebarFooter>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                    >\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                      <ChevronsUpDown className=\"ml-auto size-4\" />\n                    </SidebarMenuButton>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent\n                    className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                    side={isMobile ? \"bottom\" : \"right\"}\n                    align=\"end\"\n                    sideOffset={4}\n                  >\n                    <DropdownMenuLabel className=\"p-0 font-normal\">\n                      <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                          <AvatarImage\n                            src={data.user.avatar}\n                            alt={data.user.name}\n                          />\n                          <AvatarFallback className=\"rounded-lg\">\n                            CN\n                          </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                          <span className=\"truncate font-semibold\">\n                            {data.user.name}\n                          </span>\n                          <span className=\"truncate text-xs\">\n                            {data.user.email}\n                          </span>\n                        </div>\n                      </div>\n                    </DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                      </DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                      </DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <LogOut />\n                      Log out\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarFooter>\n        </Sidebar>\n\n        <SidebarInset>\n          <header className=\" flex shrink-0 items-center gap-2 border-b py-2\">\n            <div className=\"flex items-center gap-2 px-4 py-2\">\n              <div className=\"flex md:hidden items-center gap-2\">\n                <SidebarTrigger />\n                <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n              </div>\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem className=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Building Your Application\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator className=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div className=\"flex flex-1 flex-col gap-4 p-4\">\n            <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            </div>\n            <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n          </div>\n        </SidebarInset>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:block",
+      "target": "components/sidebar-16.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/accordion-demo.json b/apps/www/public/r/styles/new-york-v4/accordion-demo.json
new file mode 100644
index 00000000000..606f1112700
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/accordion-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "accordion"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/accordion-demo.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york-v4/ui/accordion\"\n\nexport default function AccordionDemo() {\n  return (\n    <Accordion\n      type=\"single\"\n      collapsible\n      className=\"w-full\"\n      defaultValue=\"item-1\"\n    >\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Product Information</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            Our flagship product combines cutting-edge technology with sleek\n            design. Built with premium materials, it offers unparalleled\n            performance and reliability.\n          </p>\n          <p>\n            Key features include advanced processing capabilities, and an\n            intuitive user interface designed for both beginners and experts.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Shipping Details</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We offer worldwide shipping through trusted courier partners.\n            Standard delivery takes 3-5 business days, while express shipping\n            ensures delivery within 1-2 business days.\n          </p>\n          <p>\n            All orders are carefully packaged and fully insured. Track your\n            shipment in real-time through our dedicated tracking portal.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Return Policy</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We stand behind our products with a comprehensive 30-day return\n            policy. If you&apos;re not completely satisfied, simply return the\n            item in its original condition.\n          </p>\n          <p>\n            Our hassle-free return process includes free return shipping and\n            full refunds processed within 48 hours of receiving the returned\n            item.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/accordion.json b/apps/www/public/r/styles/new-york-v4/accordion.json
new file mode 100644
index 00000000000..2a03bbc62aa
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/accordion.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-accordion"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/accordion.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-b last:border-b-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n    >\n      <div className={cn(\"pt-0 pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/alert-demo.json b/apps/www/public/r/styles/new-york-v4/alert-demo.json
new file mode 100644
index 00000000000..d9103a817d9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/alert-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/alert-demo.tsx",
+      "content": "import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york-v4/ui/alert\"\n\nexport default function AlertDemo() {\n  return (\n    <div className=\"grid w-full max-w-xl items-start gap-4\">\n      <Alert>\n        <CheckCircle2Icon />\n        <AlertTitle>Success! Your changes have been saved</AlertTitle>\n        <AlertDescription>\n          This is an alert with icon, title and description.\n        </AlertDescription>\n      </Alert>\n      <Alert>\n        <PopcornIcon />\n        <AlertTitle>\n          This Alert has a title and an icon. No description.\n        </AlertTitle>\n      </Alert>\n      <Alert variant=\"destructive\">\n        <AlertCircleIcon />\n        <AlertTitle>Unable to process your payment.</AlertTitle>\n        <AlertDescription>\n          <p>Please verify your billing information and try again.</p>\n          <ul className=\"list-inside list-disc text-sm\">\n            <li>Check your card details</li>\n            <li>Ensure sufficient funds</li>\n            <li>Verify billing address</li>\n          </ul>\n        </AlertDescription>\n      </Alert>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/alert-destructive.json b/apps/www/public/r/styles/new-york-v4/alert-destructive.json
new file mode 100644
index 00000000000..29e0efd7bbd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/alert-destructive.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-destructive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/alert-destructive.tsx",
+      "content": "import { AlertCircleIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york-v4/ui/alert\"\n\nexport default function AlertDestructive() {\n  return (\n    <Alert variant=\"destructive\">\n      <AlertCircleIcon />\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>\n        Your session has expired. Please log in again.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/alert-dialog-demo.json b/apps/www/public/r/styles/new-york-v4/alert-dialog-demo.json
new file mode 100644
index 00000000000..2dc499b79a4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/alert-dialog-demo.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "alert-dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/alert-dialog-demo.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/new-york-v4/ui/alert-dialog\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/alert-dialog.json b/apps/www/public/r/styles/new-york-v4/alert-dialog.json
new file mode 100644
index 00000000000..109140366c8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/alert-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-alert-dialog"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/alert-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"text-lg font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return (\n    <AlertDialogPrimitive.Action\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/alert.json b/apps/www/public/r/styles/new-york-v4/alert.json
new file mode 100644
index 00000000000..270b4381216
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/alert.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/alert.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/aspect-ratio-demo.json b/apps/www/public/r/styles/new-york-v4/aspect-ratio-demo.json
new file mode 100644
index 00000000000..7ba6042b664
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/aspect-ratio-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/new-york-v4/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale\"\n      />\n    </AspectRatio>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/aspect-ratio.json b/apps/www/public/r/styles/new-york-v4/aspect-ratio.json
new file mode 100644
index 00000000000..5d7e39d26a0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/aspect-ratio.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/aspect-ratio.tsx",
+      "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nfunction AspectRatio({\n  ...props\n}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {\n  return <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" {...props} />\n}\n\nexport { AspectRatio }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/avatar-demo.json b/apps/www/public/r/styles/new-york-v4/avatar-demo.json
new file mode 100644
index 00000000000..a0545ee7872
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/avatar-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/avatar-demo.tsx",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\n\nexport default function AvatarDemo() {\n  return (\n    <div className=\"flex flex-row flex-wrap items-center gap-12\">\n      <Avatar>\n        <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n        <AvatarFallback>CN</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"rounded-lg\">\n        <AvatarImage\n          src=\"https://github.com/evilrabbit.png\"\n          alt=\"@evilrabbit\"\n        />\n        <AvatarFallback>ER</AvatarFallback>\n      </Avatar>\n      <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/leerob.png\" alt=\"@leerob\" />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/avatar.json b/apps/www/public/r/styles/new-york-v4/avatar.json
new file mode 100644
index 00000000000..ec90b1573e7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/avatar.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/avatar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn(\n        \"relative flex size-8 shrink-0 overflow-hidden rounded-full\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\"aspect-square size-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted flex size-full items-center justify-center rounded-full\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/badge-demo.json b/apps/www/public/r/styles/new-york-v4/badge-demo.json
new file mode 100644
index 00000000000..06bb9603f12
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/badge-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/badge-demo.tsx",
+      "content": "import { AlertCircleIcon, BadgeCheckIcon, CheckIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\n\nexport default function BadgeDemo() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"flex w-full flex-wrap gap-2\">\n        <Badge>Badge</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n      </div>\n      <div className=\"flex w-full flex-wrap gap-2\">\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-500 text-white dark:bg-blue-600\"\n        >\n          <BadgeCheckIcon />\n          Verified\n        </Badge>\n        <Badge className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\">\n          8\n        </Badge>\n        <Badge\n          className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\"\n          variant=\"destructive\"\n        >\n          99\n        </Badge>\n        <Badge\n          className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\"\n          variant=\"outline\"\n        >\n          20+\n        </Badge>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/badge-destructive.json b/apps/www/public/r/styles/new-york-v4/badge-destructive.json
new file mode 100644
index 00000000000..6f3bcc19bdd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/badge-destructive.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-destructive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/registry/new-york-v4/ui/badge\"\n\nexport default function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/badge-outline.json b/apps/www/public/r/styles/new-york-v4/badge-outline.json
new file mode 100644
index 00000000000..4b52f9a0d82
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/badge-outline.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-outline",
+  "type": "registry:example",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/badge-outline.tsx",
+      "content": "import { Badge } from \"@/registry/new-york-v4/ui/badge\"\n\nexport default function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/badge-secondary.json b/apps/www/public/r/styles/new-york-v4/badge-secondary.json
new file mode 100644
index 00000000000..171411f27df
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/badge-secondary.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-secondary",
+  "type": "registry:example",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/registry/new-york-v4/ui/badge\"\n\nexport default function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/badge.json b/apps/www/public/r/styles/new-york-v4/badge.json
new file mode 100644
index 00000000000..02a7d530efb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/badge.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/badge.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/breadcrumb-demo.json b/apps/www/public/r/styles/new-york-v4/breadcrumb-demo.json
new file mode 100644
index 00000000000..3e40b2447d9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/breadcrumb-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-demo.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"size-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/breadcrumb-dropdown.json b/apps/www/public/r/styles/new-york-v4/breadcrumb-dropdown.json
new file mode 100644
index 00000000000..c85616a748e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/breadcrumb-dropdown.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-dropdown",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-dropdown.tsx",
+      "content": "import Link from \"next/link\"\nimport { ChevronDownIcon, SlashIcon } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\">\n              Components\n              <ChevronDownIcon />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/breadcrumb-ellipsis.json b/apps/www/public/r/styles/new-york-v4/breadcrumb-ellipsis.json
new file mode 100644
index 00000000000..1ae3f8b0744
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/breadcrumb-ellipsis.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-ellipsis",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-ellipsis.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbEllipsis />\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/breadcrumb-link.json b/apps/www/public/r/styles/new-york-v4/breadcrumb-link.json
new file mode 100644
index 00000000000..86e07ee4b71
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/breadcrumb-link.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-link",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-link.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/breadcrumb-responsive.json b/apps/www/public/r/styles/new-york-v4/breadcrumb-responsive.json
new file mode 100644
index 00000000000..e4ad7d06ce9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/breadcrumb-responsive.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-responsive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nconst items = [\n  { href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Documentation\" },\n  { href: \"#\", label: \"Building Your Application\" },\n  { href: \"#\", label: \"Data Fetching\" },\n  { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href={items[0].href ?? \"/\"}>{items[0].label}</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        {items.length > ITEMS_TO_DISPLAY ? (\n          <>\n            <BreadcrumbItem>\n              {isDesktop ? (\n                <DropdownMenu open={open} onOpenChange={setOpen}>\n                  <DropdownMenuTrigger\n                    className=\"flex items-center gap-1\"\n                    aria-label=\"Toggle menu\"\n                  >\n                    <BreadcrumbEllipsis className=\"size-4\" />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                    {items.slice(1, -2).map((item, index) => (\n                      <DropdownMenuItem key={index}>\n                        <Link href={item.href ? item.href : \"#\"}>\n                          {item.label}\n                        </Link>\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              ) : (\n                <Drawer open={open} onOpenChange={setOpen}>\n                  <DrawerTrigger aria-label=\"Toggle Menu\">\n                    <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                  </DrawerTrigger>\n                  <DrawerContent>\n                    <DrawerHeader className=\"text-left\">\n                      <DrawerTitle>Navigate to</DrawerTitle>\n                      <DrawerDescription>\n                        Select a page to navigate to.\n                      </DrawerDescription>\n                    </DrawerHeader>\n                    <div className=\"grid gap-1 px-4\">\n                      {items.slice(1, -2).map((item, index) => (\n                        <Link\n                          key={index}\n                          href={item.href ? item.href : \"#\"}\n                          className=\"py-1 text-sm\"\n                        >\n                          {item.label}\n                        </Link>\n                      ))}\n                    </div>\n                    <DrawerFooter className=\"pt-4\">\n                      <DrawerClose asChild>\n                        <Button variant=\"outline\">Close</Button>\n                      </DrawerClose>\n                    </DrawerFooter>\n                  </DrawerContent>\n                </Drawer>\n              )}\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n          </>\n        ) : null}\n        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n          <BreadcrumbItem key={index}>\n            {item.href ? (\n              <>\n                <BreadcrumbLink\n                  asChild\n                  className=\"max-w-20 truncate md:max-w-none\"\n                >\n                  <Link href={item.href}>{item.label}</Link>\n                </BreadcrumbLink>\n                <BreadcrumbSeparator />\n              </>\n            ) : (\n              <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                {item.label}\n              </BreadcrumbPage>\n            )}\n          </BreadcrumbItem>\n        ))}\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/breadcrumb-separator.json b/apps/www/public/r/styles/new-york-v4/breadcrumb-separator.json
new file mode 100644
index 00000000000..b30556e7b81
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/breadcrumb-separator.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-separator",
+  "type": "registry:example",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/breadcrumb-separator.tsx",
+      "content": "import Link from \"next/link\"\nimport { SlashIcon } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/breadcrumb.json b/apps/www/public/r/styles/new-york-v4/breadcrumb.json
new file mode 100644
index 00000000000..9558777aa91
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/breadcrumb.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/breadcrumb.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/button-as-child.json b/apps/www/public/r/styles/new-york-v4/button-as-child.json
new file mode 100644
index 00000000000..8ca59f2dfde
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/button-as-child.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-as-child",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-as-child.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonAsChild() {\n  return (\n    <Button asChild>\n      <Link href=\"/login\">Login</Link>\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/button-demo.json b/apps/www/public/r/styles/new-york-v4/button-demo.json
new file mode 100644
index 00000000000..758e4e81840
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/button-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonDemo() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2 md:flex-row\">\n      <Button>Button</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/button-destructive.json b/apps/www/public/r/styles/new-york-v4/button-destructive.json
new file mode 100644
index 00000000000..c73853664e5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/button-destructive.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-destructive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-destructive.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/button-ghost.json b/apps/www/public/r/styles/new-york-v4/button-ghost.json
new file mode 100644
index 00000000000..ca3060209a7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/button-ghost.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-ghost",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-ghost.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/button-icon.json b/apps/www/public/r/styles/new-york-v4/button-icon.json
new file mode 100644
index 00000000000..3d2f7cead36
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/button-icon.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-icon",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-icon.tsx",
+      "content": "import { ChevronRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"secondary\" size=\"icon\" className=\"size-8\">\n      <ChevronRightIcon />\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/button-link.json b/apps/www/public/r/styles/new-york-v4/button-link.json
new file mode 100644
index 00000000000..3bf41507bf8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/button-link.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-link",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-link.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/button-loading.json b/apps/www/public/r/styles/new-york-v4/button-loading.json
new file mode 100644
index 00000000000..f4b07f1bbe4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/button-loading.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-loading",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-loading.tsx",
+      "content": "import { Loader2Icon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button size=\"sm\" disabled>\n      <Loader2Icon className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/button-outline.json b/apps/www/public/r/styles/new-york-v4/button-outline.json
new file mode 100644
index 00000000000..aa16b60ea3b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/button-outline.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-outline",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-outline.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/button-secondary.json b/apps/www/public/r/styles/new-york-v4/button-secondary.json
new file mode 100644
index 00000000000..b97902f2d09
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/button-secondary.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-secondary",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-secondary.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/button-with-icon.json b/apps/www/public/r/styles/new-york-v4/button-with-icon.json
new file mode 100644
index 00000000000..8e69cf504cb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/button-with-icon.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-with-icon",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/button-with-icon.tsx",
+      "content": "import { IconGitBranch } from \"@tabler/icons-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button variant=\"outline\" size=\"sm\">\n      <IconGitBranch /> New Branch\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/button.json b/apps/www/public/r/styles/new-york-v4/button.json
new file mode 100644
index 00000000000..b50fc663252
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/button.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/button.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-01.json b/apps/www/public/r/styles/new-york-v4/calendar-01.json
new file mode 100644
index 00000000000..ae26b270f13
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-01.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-02.json b/apps/www/public/r/styles/new-york-v4/calendar-02.json
new file mode 100644
index 00000000000..1de8d714eda
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-02.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-03.json b/apps/www/public/r/styles/new-york-v4/calendar-03.json
new file mode 100644
index 00000000000..6777fdaf508
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-03.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-04.json b/apps/www/public/r/styles/new-york-v4/calendar-04.json
new file mode 100644
index 00000000000..ae12a614610
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-04.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-05.json b/apps/www/public/r/styles/new-york-v4/calendar-05.json
new file mode 100644
index 00000000000..d64891b0f71
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-05.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-06.json b/apps/www/public/r/styles/new-york-v4/calendar-06.json
new file mode 100644
index 00000000000..0826945ec38
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-06.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-07.json b/apps/www/public/r/styles/new-york-v4/calendar-07.json
new file mode 100644
index 00000000000..0d7bfb1a8cf
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-07.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-08.json b/apps/www/public/r/styles/new-york-v4/calendar-08.json
new file mode 100644
index 00000000000..d5088b71f85
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-08.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-09.json b/apps/www/public/r/styles/new-york-v4/calendar-09.json
new file mode 100644
index 00000000000..fe6a2830f9c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-09.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-10.json b/apps/www/public/r/styles/new-york-v4/calendar-10.json
new file mode 100644
index 00000000000..314cca76a01
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-10.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <CardAction>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => {\n              setMonth(new Date())\n              setDate(new Date())\n            }}\n          >\n            Today\n          </Button>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-11.json b/apps/www/public/r/styles/new-york-v4/calendar-11.json
new file mode 100644
index 00000000000..29a4e325075
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-11.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-12.json b/apps/www/public/r/styles/new-york-v4/calendar-12.json
new file mode 100644
index 00000000000..11ce1eb5e2e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-12.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <CardAction>\n          <Select\n            value={locale}\n            onValueChange={(value) =>\n              setLocale(value as keyof typeof localizedStrings)\n            }\n          >\n            <SelectTrigger className=\"w-[100px]\">\n              <SelectValue placeholder=\"Language\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"es\">Español</SelectItem>\n              <SelectItem value=\"en\">English</SelectItem>\n            </SelectContent>\n          </Select>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-13.json b/apps/www/public/r/styles/new-york-v4/calendar-13.json
new file mode 100644
index 00000000000..121ef9abb13
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-13.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger\n            id=\"dropdown\"\n            size=\"sm\"\n            className=\"bg-background w-full\"\n          >\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-14.json b/apps/www/public/r/styles/new-york-v4/calendar-14.json
new file mode 100644
index 00000000000..2508f75d753
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-14.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-15.json b/apps/www/public/r/styles/new-york-v4/calendar-15.json
new file mode 100644
index 00000000000..31c7c60a318
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-15.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-16.json b/apps/www/public/r/styles/new-york-v4/calendar-16.json
new file mode 100644
index 00000000000..1f660e58576
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-16.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 !pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-17.json b/apps/www/public/r/styles/new-york-v4/calendar-17.json
new file mode 100644
index 00000000000..4547a55a954
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-17.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:--spacing(10.5)]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex gap-2 border-t px-4 !pt-4 *:[div]:w-full\">\n        <div>\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div>\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-18.json b/apps/www/public/r/styles/new-york-v4/calendar-18.json
new file mode 100644
index 00000000000..04c58b7ee53
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-18.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-19.json b/apps/www/public/r/styles/new-york-v4/calendar-19.json
new file mode 100644
index 00000000000..16eb47d1876
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-19.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:--spacing(9.5)]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 !pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-20.json b/apps/www/public/r/styles/new-york-v4/calendar-20.json
new file mode 100644
index 00000000000..f5c631564ea
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-20.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute.toString().padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-t-0 md:border-l\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t px-6 !py-5 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-21.json b/apps/www/public/r/styles/new-york-v4/calendar-21.json
new file mode 100644
index 00000000000..8773d411e6a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-21.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:--spacing(11)] md:[--cell-size:--spacing(13)]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-22.json b/apps/www/public/r/styles/new-york-v4/calendar-22.json
new file mode 100644
index 00000000000..ca4aeed570e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-22.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-23.json b/apps/www/public/r/styles/new-york-v4/calendar-23.json
new file mode 100644
index 00000000000..838068b6c23
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-23.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-24.json b/apps/www/public/r/styles/new-york-v4/calendar-24.json
new file mode 100644
index 00000000000..e637869404f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-24.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date-picker\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time-picker\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time-picker\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-25.json b/apps/www/public/r/styles/new-york-v4/calendar-25.json
new file mode 100644
index 00000000000..18e56c8c288
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-25.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-26.json b/apps/www/public/r/styles/new-york-v4/calendar-26.json
new file mode 100644
index 00000000000..230a4460a3b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-26.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-27.json b/apps/www/public/r/styles/new-york-v4/calendar-27.json
new file mode 100644
index 00000000000..0d622255118
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-27.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--color-primary)\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"flex flex-col border-b @md/card:grid\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <CardAction className=\"mt-2 @md/card:mt-0\">\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <CalendarIcon />\n                {range?.from && range?.to\n                  ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                  : \"June 2025\"}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n              <Calendar\n                className=\"w-full\"\n                mode=\"range\"\n                defaultMonth={range?.from}\n                selected={range}\n                onSelect={setRange}\n                disableNavigation\n                startMonth={range?.from}\n                fixedWeeks\n                showOutsideDays\n                disabled={{\n                  after: new Date(2025, 5, 31),\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </CardAction>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-28.json b/apps/www/public/r/styles/new-york-v4/calendar-28.json
new file mode 100644
index 00000000000..ae149ae0c6f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-28.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-29.json b/apps/www/public/r/styles/new-york-v4/calendar-29.json
new file mode 100644
index 00000000000..df3d5743609
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-29.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-30.json b/apps/www/public/r/styles/new-york-v4/calendar-30.json
new file mode 100644
index 00000000000..1aaaac6a11b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-30.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-31.json b/apps/www/public/r/styles/new-york-v4/calendar-31.json
new file mode 100644
index 00000000000..03e2f971d67
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-31.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 !pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"size-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-32.json b/apps/www/public/r/styles/new-york-v4/calendar-32.json
new file mode 100644
index 00000000000..f231548786b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-32.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-demo.json b/apps/www/public/r/styles/new-york-v4/calendar-demo.json
new file mode 100644
index 00000000000..6e51dd80837
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\n\nexport default function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow-sm\"\n      captionLayout=\"dropdown\"\n    />\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-form.json b/apps/www/public/r/styles/new-york-v4/calendar-form.json
new file mode 100644
index 00000000000..62fabe3d69e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/calendar-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    captionLayout=\"dropdown\"\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar-hijri.json b/apps/www/public/r/styles/new-york-v4/calendar-hijri.json
new file mode 100644
index 00000000000..d317bd4cab4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar-hijri.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-hijri",
+  "type": "registry:example",
+  "description": "A Persian calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/calendar-hijri.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, getDefaultClassNames } from \"react-day-picker\"\nimport { DayPicker } from \"react-day-picker/persian\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function CalendarHijri() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n\n// ----------------------------------------------------------------------------\n// The code below is for this example only.\n// For your own calendar, you would edit the calendar.tsx component directly.\n// ----------------------------------------------------------------------------\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/calendar.json b/apps/www/public/r/styles/new-york-v4/calendar.json
new file mode 100644
index 00000000000..267198d6231
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/calendar.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar",
+  "type": "registry:ui",
+  "dependencies": [
+    "react-day-picker@latest",
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/calendar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/card-demo.json b/apps/www/public/r/styles/new-york-v4/card-demo.json
new file mode 100644
index 00000000000..5c4bb4042be
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/card-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "card",
+    "button",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/card-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function CardDemo() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Login to your account</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account\n        </CardDescription>\n        <CardAction>\n          <Button variant=\"link\">Sign Up</Button>\n        </CardAction>\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          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2\">\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      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/card-with-form.json b/apps/www/public/r/styles/new-york-v4/card-with-form.json
new file mode 100644
index 00000000000..818ad3cdc2b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/card-with-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-with-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/card-with-form.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function CardWithForm() {\n  return (\n    <Card className=\"w-[350px]\">\n      <CardHeader>\n        <CardTitle>Create project</CardTitle>\n        <CardDescription>Deploy your new project in one-click.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <div className=\"grid w-full items-center gap-6\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" placeholder=\"Name of your project\" />\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"framework\">Framework</Label>\n              <Select>\n                <SelectTrigger id=\"framework\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select\" />\n                </SelectTrigger>\n                <SelectContent position=\"popper\">\n                  <SelectItem value=\"next\">Next.js</SelectItem>\n                  <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                  <SelectItem value=\"astro\">Astro</SelectItem>\n                  <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex justify-between\">\n        <Button variant=\"outline\">Cancel</Button>\n        <Button>Deploy</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/card.json b/apps/www/public/r/styles/new-york-v4/card.json
new file mode 100644
index 00000000000..f9ae12ebd1c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/card.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/card.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/carousel-api.json b/apps/www/public/r/styles/new-york-v4/carousel-api.json
new file mode 100644
index 00000000000..b6eb062e4e7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/carousel-api.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-api",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-api.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) {\n      return\n    }\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap() + 1)\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1)\n    })\n  }, [api])\n\n  return (\n    <div className=\"mx-auto max-w-xs\">\n      <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious />\n        <CarouselNext />\n      </Carousel>\n      <div className=\"text-muted-foreground py-2 text-center text-sm\">\n        Slide {current} of {count}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/carousel-demo.json b/apps/www/public/r/styles/new-york-v4/carousel-demo.json
new file mode 100644
index 00000000000..8109d5bbd96
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/carousel-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/carousel-orientation.json b/apps/www/public/r/styles/new-york-v4/carousel-orientation.json
new file mode 100644
index 00000000000..83ebb7d05e5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/carousel-orientation.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-orientation",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselOrientation() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      orientation=\"vertical\"\n      className=\"w-full max-w-xs\"\n    >\n      <CarouselContent className=\"-mt-1 h-[200px]\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/carousel-plugin.json b/apps/www/public/r/styles/new-york-v4/carousel-plugin.json
new file mode 100644
index 00000000000..3640307af7e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/carousel-plugin.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-plugin",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-plugin.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselPlugin() {\n  const plugin = React.useRef(\n    Autoplay({ delay: 2000, stopOnInteraction: true })\n  )\n\n  return (\n    <Carousel\n      plugins={[plugin.current]}\n      className=\"w-full max-w-xs\"\n      onMouseEnter={plugin.current.stop}\n      onMouseLeave={plugin.current.reset}\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/carousel-size.json b/apps/www/public/r/styles/new-york-v4/carousel-size.json
new file mode 100644
index 00000000000..57da366e1d8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/carousel-size.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-size",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-size.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselSize() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      className=\"w-full max-w-sm\"\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/carousel-spacing.json b/apps/www/public/r/styles/new-york-v4/carousel-spacing.json
new file mode 100644
index 00000000000..2ca7c7e42e5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/carousel-spacing.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-spacing",
+  "type": "registry:example",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/carousel-spacing.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselSpacing() {\n  return (\n    <Carousel className=\"w-full max-w-sm\">\n      <CarouselContent className=\"-ml-1\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/carousel.json b/apps/www/public/r/styles/new-york-v4/carousel.json
new file mode 100644
index 00000000000..9da591edb44
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/carousel.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel",
+  "type": "registry:ui",
+  "dependencies": [
+    "embla-carousel-react"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/carousel.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-area-axes.json b/apps/www/public/r/styles/new-york-v4/chart-area-axes.json
new file mode 100644
index 00000000000..46b24f76075
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-area-axes.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-axes",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-axes.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with axes\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaAxes() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Axes</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -20,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={3}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-area-default.json b/apps/www/public/r/styles/new-york-v4/chart-area-default.json
new file mode 100644
index 00000000000..3fd13fa8f53
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-area-default.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-area-gradient.json b/apps/www/public/r/styles/new-york-v4/chart-area-gradient.json
new file mode 100644
index 00000000000..a883b39b66d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-area-gradient.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-gradient",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-gradient.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with gradient fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaGradient() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Gradient</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-area-icons.json b/apps/www/public/r/styles/new-york-v4/chart-area-icons.json
new file mode 100644
index 00000000000..ce943df1f5c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-area-icons.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-icons",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-icons.tsx",
+      "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: TrendingDown,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n    icon: TrendingUp,\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaIcons() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-area-interactive.json b/apps/www/public/r/styles/new-york-v4/chart-area-interactive.json
new file mode 100644
index 00000000000..b72864800ee
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-area-interactive.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-interactive",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"pt-0\">\n      <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n        <div className=\"grid flex-1 gap-1\">\n          <CardTitle>Area Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <Select value={timeRange} onValueChange={setTimeRange}>\n          <SelectTrigger\n            className=\"hidden w-[160px] rounded-lg sm:ml-auto sm:flex\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Last 3 months\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90d\" className=\"rounded-lg\">\n              Last 3 months\n            </SelectItem>\n            <SelectItem value=\"30d\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7d\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-area-legend.json b/apps/www/public/r/styles/new-york-v4/chart-area-legend.json
new file mode 100644
index 00000000000..93298a47ba3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-area-legend.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-legend",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaLegend() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-area-linear.json b/apps/www/public/r/styles/new-york-v4/chart-area-linear.json
new file mode 100644
index 00000000000..ae1ab901eb7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-area-linear.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-linear",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaLinear() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Linear</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"linear\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-area-stacked-expand.json b/apps/www/public/r/styles/new-york-v4/chart-area-stacked-expand.json
new file mode 100644
index 00000000000..0881f0bcd6c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-area-stacked-expand.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-stacked-expand",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-stacked-expand.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart with expand stacking\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n  { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n  { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n  { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n  { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n  { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-3)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStackedExpand() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n              top: 12,\n            }}\n            stackOffset=\"expand\"\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"other\"\n              type=\"natural\"\n              fill=\"var(--color-other)\"\n              fillOpacity={0.1}\n              stroke=\"var(--color-other)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-area-stacked.json b/apps/www/public/r/styles/new-york-v4/chart-area-stacked.json
new file mode 100644
index 00000000000..958bb0fcba2
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-area-stacked.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-stacked",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStacked() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-area-step.json b/apps/www/public/r/styles/new-york-v4/chart-area-step.json
new file mode 100644
index 00000000000..ec978d8eeac
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-area-step.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-area-step",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-area-step.tsx",
+      "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A step area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: Activity,\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStep() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Step</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"step\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-active.json b/apps/www/public/r/styles/new-york-v4/chart-bar-active.json
new file mode 100644
index 00000000000..e0816aec316
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-active.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-active",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarActive() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              activeIndex={2}\n              activeBar={({ ...props }) => {\n                return (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                )\n              }}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-default.json b/apps/www/public/r/styles/new-york-v4/chart-bar-default.json
new file mode 100644
index 00000000000..a7ef669ffed
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-default.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-demo-axis.json b/apps/www/public/r/styles/new-york-v4/chart-bar-demo-axis.json
new file mode 100644
index 00000000000..1dcd26b1078
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-demo-axis.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-axis",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-bar-demo-axis.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york-v4/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-demo-grid.json b/apps/www/public/r/styles/new-york-v4/chart-bar-demo-grid.json
new file mode 100644
index 00000000000..2715c8aec50
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-demo-grid.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-grid",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-bar-demo-grid.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york-v4/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-demo-legend.json b/apps/www/public/r/styles/new-york-v4/chart-bar-demo-legend.json
new file mode 100644
index 00000000000..3688a3f9cde
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-demo-legend.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-legend",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-bar-demo-legend.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <ChartLegend content={<ChartLegendContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-demo-tooltip.json b/apps/www/public/r/styles/new-york-v4/chart-bar-demo-tooltip.json
new file mode 100644
index 00000000000..d5db6470d3e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-demo-tooltip.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-tooltip",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-bar-demo-tooltip.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-demo.json b/apps/www/public/r/styles/new-york-v4/chart-bar-demo.json
new file mode 100644
index 00000000000..472136ae609
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-demo.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-bar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york-v4/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-horizontal.json b/apps/www/public/r/styles/new-york-v4/chart-bar-horizontal.json
new file mode 100644
index 00000000000..27a5bfb0aa1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-horizontal.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-horizontal",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-horizontal.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A horizontal bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarHorizontal() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Horizontal</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: -20,\n            }}\n          >\n            <XAxis type=\"number\" dataKey=\"desktop\" hide />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-interactive.json b/apps/www/public/r/styles/new-york-v4/chart-bar-interactive.json
new file mode 100644
index 00000000000..953a1bbade4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-interactive.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-interactive",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An interactive bar chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-2)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarInteractive() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card className=\"py-0\">\n      <CardHeader className=\"flex flex-col items-stretch border-b !p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0\">\n          <CardTitle>Bar Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-muted-foreground text-xs\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg leading-none font-bold sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-label-custom.json b/apps/www/public/r/styles/new-york-v4/chart-bar-label-custom.json
new file mode 100644
index 00000000000..e2a37f557ec
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-label-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-label-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-2)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n  label: {\n    color: \"var(--background)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarLabelCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              right: 16,\n            }}\n          >\n            <CartesianGrid horizontal={false} />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n              hide\n            />\n            <XAxis dataKey=\"desktop\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Bar\n              dataKey=\"desktop\"\n              layout=\"vertical\"\n              fill=\"var(--color-desktop)\"\n              radius={4}\n            >\n              <LabelList\n                dataKey=\"month\"\n                position=\"insideLeft\"\n                offset={8}\n                className=\"fill-(--color-label)\"\n                fontSize={12}\n              />\n              <LabelList\n                dataKey=\"desktop\"\n                position=\"right\"\n                offset={8}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-label.json b/apps/www/public/r/styles/new-york-v4/chart-bar-label.json
new file mode 100644
index 00000000000..f6c790f94b9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-label.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-label",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarLabel() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-mixed.json b/apps/www/public/r/styles/new-york-v4/chart-bar-mixed.json
new file mode 100644
index 00000000000..f2dfa0e46de
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-mixed.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-mixed",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-mixed.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A mixed bar chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarMixed() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Mixed</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: 0,\n            }}\n          >\n            <YAxis\n              dataKey=\"browser\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <XAxis dataKey=\"visitors\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-multiple.json b/apps/www/public/r/styles/new-york-v4/chart-bar-multiple.json
new file mode 100644
index 00000000000..f0774b35e5c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-multiple.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-multiple",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarMultiple() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dashed\" />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n            <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-negative.json b/apps/www/public/r/styles/new-york-v4/chart-bar-negative.json
new file mode 100644
index 00000000000..ca76ad01ef5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-negative.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-negative",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-negative.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with negative values\"\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 205 },\n  { month: \"March\", visitors: -207 },\n  { month: \"April\", visitors: 173 },\n  { month: \"May\", visitors: -209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarNegative() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Negative</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel hideIndicator />}\n            />\n            <Bar dataKey=\"visitors\">\n              <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n              {chartData.map((item) => (\n                <Cell\n                  key={item.month}\n                  fill={item.visitors > 0 ? \"var(--chart-1)\" : \"var(--chart-2)\"}\n                />\n              ))}\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-bar-stacked.json b/apps/www/public/r/styles/new-york-v4/chart-bar-stacked.json
new file mode 100644
index 00000000000..e05119bf803
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-bar-stacked.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-stacked",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-bar-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarStacked() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            <Bar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              fill=\"var(--color-desktop)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"mobile\"\n              stackId=\"a\"\n              fill=\"var(--color-mobile)\"\n              radius={[4, 4, 0, 0]}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-line-default.json b/apps/www/public/r/styles/new-york-v4/chart-line-default.json
new file mode 100644
index 00000000000..61851b481a7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-line-default.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-line-dots-colors.json b/apps/www/public/r/styles/new-york-v4/chart-line-dots-colors.json
new file mode 100644
index 00000000000..1079c6f20e7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-line-dots-colors.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots-colors",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-dots-colors.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots and colors\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-2)\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDotsColors() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots Colors</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={({ payload, ...props }) => {\n                return (\n                  <Dot\n                    key={payload.browser}\n                    r={5}\n                    cx={props.cx}\n                    cy={props.cy}\n                    fill={payload.fill}\n                    stroke={payload.fill}\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-line-dots-custom.json b/apps/www/public/r/styles/new-york-v4/chart-line-dots-custom.json
new file mode 100644
index 00000000000..c4344b35351
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-line-dots-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-dots-custom.tsx",
+      "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with custom dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDotsCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={({ cx, cy, payload }) => {\n                const r = 24\n                return (\n                  <GitCommitVertical\n                    key={payload.month}\n                    x={cx - r / 2}\n                    y={cy - r / 2}\n                    width={r}\n                    height={r}\n                    fill=\"hsl(var(--background))\"\n                    stroke=\"var(--color-desktop)\"\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-line-dots.json b/apps/www/public/r/styles/new-york-v4/chart-line-dots.json
new file mode 100644
index 00000000000..5a394829c62
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-line-dots.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-dots",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDots() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-line-interactive.json b/apps/www/public/r/styles/new-york-v4/chart-line-interactive.json
new file mode 100644
index 00000000000..05047d69800
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-line-interactive.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-interactive",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An interactive line chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineInteractive() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card className=\"py-4 sm:py-0\">\n      <CardHeader className=\"flex flex-col items-stretch border-b !p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 pb-3 sm:pb-0\">\n          <CardTitle>Line Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-muted-foreground text-xs\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg leading-none font-bold sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Line\n              dataKey={activeChart}\n              type=\"monotone\"\n              stroke={`var(--color-${activeChart})`}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-line-label-custom.json b/apps/www/public/r/styles/new-york-v4/chart-line-label-custom.json
new file mode 100644
index 00000000000..ce4b2866baa
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-line-label-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-label-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-2)\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLabelCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-visitors)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n                dataKey=\"browser\"\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-line-label.json b/apps/www/public/r/styles/new-york-v4/chart-line-label.json
new file mode 100644
index 00000000000..c9c682b1bb6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-line-label.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-label",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLabel() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-line-linear.json b/apps/www/public/r/styles/new-york-v4/chart-line-linear.json
new file mode 100644
index 00000000000..53fca61781f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-line-linear.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-linear",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-linear.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLinear() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Linear</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"linear\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-line-multiple.json b/apps/www/public/r/styles/new-york-v4/chart-line-multiple.json
new file mode 100644
index 00000000000..ac4fd35301d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-line-multiple.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-multiple",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineMultiple() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Line\n              dataKey=\"desktop\"\n              type=\"monotone\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n            <Line\n              dataKey=\"mobile\"\n              type=\"monotone\"\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-line-step.json b/apps/www/public/r/styles/new-york-v4/chart-line-step.json
new file mode 100644
index 00000000000..643baed9f75
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-line-step.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line-step",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-line-step.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with step\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineStep() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Step</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"step\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-pie-donut-active.json b/apps/www/public/r/styles/new-york-v4/chart-pie-donut-active.json
new file mode 100644
index 00000000000..ec45b95d573
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-pie-donut-active.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut-active",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-donut-active.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonutActive() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={0}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <Sector {...props} outerRadius={outerRadius + 10} />\n              )}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-pie-donut-text.json b/apps/www/public/r/styles/new-york-v4/chart-pie-donut-text.json
new file mode 100644
index 00000000000..572d6b41147
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-pie-donut-text.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut-text",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-donut-text.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with text\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonutText() {\n  const totalVisitors = React.useMemo(() => {\n    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut with Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-pie-donut.json b/apps/www/public/r/styles/new-york-v4/chart-pie-donut.json
new file mode 100644
index 00000000000..ac6ae021db3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-pie-donut.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-donut",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-donut.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonut() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-pie-interactive.json b/apps/www/public/r/styles/new-york-v4/chart-pie-interactive.json
new file mode 100644
index 00000000000..62038382f89
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-pie-interactive.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-interactive",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport const description = \"An interactive pie chart\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"var(--chart-1)\",\n  },\n  february: {\n    label: \"February\",\n    color: \"var(--chart-2)\",\n  },\n  march: {\n    label: \"March\",\n    color: \"var(--chart-3)\",\n  },\n  april: {\n    label: \"April\",\n    color: \"var(--chart-4)\",\n  },\n  may: {\n    label: \"May\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieInteractive() {\n  const id = \"pie-interactive\"\n  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n  const activeIndex = React.useMemo(\n    () => desktopData.findIndex((item) => item.month === activeMonth),\n    [activeMonth]\n  )\n  const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n  return (\n    <Card data-chart={id} className=\"flex flex-col\">\n      <ChartStyle id={id} config={chartConfig} />\n      <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n        <div className=\"grid gap-1\">\n          <CardTitle>Pie Chart - Interactive</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </div>\n        <Select value={activeMonth} onValueChange={setActiveMonth}>\n          <SelectTrigger\n            className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\" className=\"rounded-xl\">\n            {months.map((key) => {\n              const config = chartConfig[key as keyof typeof chartConfig]\n\n              if (!config) {\n                return null\n              }\n\n              return (\n                <SelectItem\n                  key={key}\n                  value={key}\n                  className=\"rounded-lg [&_span]:flex\"\n                >\n                  <div className=\"flex items-center gap-2 text-xs\">\n                    <span\n                      className=\"flex h-3 w-3 shrink-0 rounded-xs\"\n                      style={{\n                        backgroundColor: `var(--color-${key})`,\n                      }}\n                    />\n                    {config?.label}\n                  </div>\n                </SelectItem>\n              )\n            })}\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 justify-center pb-0\">\n        <ChartContainer\n          id={id}\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[300px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={desktopData}\n              dataKey=\"desktop\"\n              nameKey=\"month\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={activeIndex}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <g>\n                  <Sector {...props} outerRadius={outerRadius + 10} />\n                  <Sector\n                    {...props}\n                    outerRadius={outerRadius + 25}\n                    innerRadius={outerRadius + 12}\n                  />\n                </g>\n              )}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {desktopData[activeIndex].desktop.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-pie-label-custom.json b/apps/www/public/r/styles/new-york-v4/chart-pie-label-custom.json
new file mode 100644
index 00000000000..b1dc9a37de2
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-pie-label-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabelCustom() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] px-0\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {payload.visitors}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-pie-label-list.json b/apps/www/public/r/styles/new-york-v4/chart-pie-label-list.json
new file mode 100644
index 00000000000..72e27f1c4fc
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-pie-label-list.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label-list",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-label-list.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label list\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabelList() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label List</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"[&_.recharts-text]:fill-background mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\">\n              <LabelList\n                dataKey=\"browser\"\n                className=\"fill-background\"\n                stroke=\"none\"\n                fontSize={12}\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-pie-label.json b/apps/www/public/r/styles/new-york-v4/chart-pie-label.json
new file mode 100644
index 00000000000..f34aa4fd95e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-pie-label.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-label",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabel() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0\"\n        >\n          <PieChart>\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-pie-legend.json b/apps/www/public/r/styles/new-york-v4/chart-pie-legend.json
new file mode 100644
index 00000000000..5302bb37ac6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-pie-legend.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-legend",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-legend.tsx",
+      "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a legend\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLegend() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[300px]\"\n        >\n          <PieChart>\n            <Pie data={chartData} dataKey=\"visitors\" />\n            <ChartLegend\n              content={<ChartLegendContent nameKey=\"browser\" />}\n              className=\"-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-pie-separator-none.json b/apps/www/public/r/styles/new-york-v4/chart-pie-separator-none.json
new file mode 100644
index 00000000000..3792d9c3b98
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-pie-separator-none.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-separator-none",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-separator-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with no separator\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieSeparatorNone() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Separator None</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              stroke=\"0\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-pie-simple.json b/apps/www/public/r/styles/new-york-v4/chart-pie-simple.json
new file mode 100644
index 00000000000..16d6012d124
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-pie-simple.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-simple",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple pie chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieSimple() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-pie-stacked.json b/apps/www/public/r/styles/new-york-v4/chart-pie-stacked.json
new file mode 100644
index 00000000000..f65e0a3be6c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-pie-stacked.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-pie-stacked",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-pie-stacked.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with stacked sections\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n  { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n  { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n  { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n  { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n  { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"var(--chart-1)\",\n  },\n  february: {\n    label: \"February\",\n    color: \"var(--chart-2)\",\n  },\n  march: {\n    label: \"March\",\n    color: \"var(--chart-3)\",\n  },\n  april: {\n    label: \"April\",\n    color: \"var(--chart-4)\",\n  },\n  may: {\n    label: \"May\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieStacked() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelKey=\"visitors\"\n                  nameKey=\"month\"\n                  indicator=\"line\"\n                  labelFormatter={(_, payload) => {\n                    return chartConfig[\n                      payload?.[0].dataKey as keyof typeof chartConfig\n                    ].label\n                  }}\n                />\n              }\n            />\n            <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n            <Pie\n              data={mobileData}\n              dataKey=\"mobile\"\n              innerRadius={70}\n              outerRadius={90}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-default.json b/apps/www/public/r/styles/new-york-v4/chart-radar-default.json
new file mode 100644
index 00000000000..8df06687734
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-default.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-default.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarDefault() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-dots.json b/apps/www/public/r/styles/new-york-v4/chart-radar-dots.json
new file mode 100644
index 00000000000..a38aaa0237d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-dots.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-dots",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-dots.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarDots() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Dots</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json
new file mode 100644
index 00000000000..95a9fb43d7c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-fill",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleFill() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarGrid\n              className=\"fill-(--color-desktop) opacity-20\"\n              gridType=\"circle\"\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json
new file mode 100644
index 00000000000..50de824ad67
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle-no-lines",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleNoLines() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" radialLines={false} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-grid-circle.json b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-circle.json
new file mode 100644
index 00000000000..ed57385fe0a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-circle.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-circle",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-circle.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircle() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-grid-custom.json b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-custom.json
new file mode 100644
index 00000000000..3c12f9fbee7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCustom() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Custom</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-grid-fill.json b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-fill.json
new file mode 100644
index 00000000000..2a71e2c79fe
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-fill.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-fill",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-fill.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid filled\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridFill() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid className=\"fill-(--color-desktop) opacity-20\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-grid-none.json b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-none.json
new file mode 100644
index 00000000000..b2d43da2c86
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-grid-none.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-grid-none",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-grid-none.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with no grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridNone() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid None</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-icons.json b/apps/www/public/r/styles/new-york-v4/chart-radar-icons.json
new file mode 100644
index 00000000000..e4d189c18d4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-icons.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-icons",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-icons.tsx",
+      "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: ArrowDownFromLine,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n    icon: ArrowUpFromLine,\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarIcons() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-label-custom.json b/apps/www/public/r/styles/new-york-v4/chart-radar-label-custom.json
new file mode 100644
index 00000000000..289b36bda0e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-label-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-label-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLabelCustom() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Custom Label</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: 10,\n              right: 10,\n              bottom: 10,\n              left: 10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis\n              dataKey=\"month\"\n              tick={({ x, y, textAnchor, value, index, ...props }) => {\n                const data = chartData[index]\n\n                return (\n                  <text\n                    x={x}\n                    y={index === 0 ? y - 10 : y}\n                    textAnchor={textAnchor}\n                    fontSize={13}\n                    fontWeight={500}\n                    {...props}\n                  >\n                    <tspan>{data.desktop}</tspan>\n                    <tspan className=\"fill-muted-foreground\">/</tspan>\n                    <tspan>{data.mobile}</tspan>\n                    <tspan\n                      x={x}\n                      dy={\"1rem\"}\n                      fontSize={12}\n                      className=\"fill-muted-foreground\"\n                    >\n                      {data.month}\n                    </tspan>\n                  </text>\n                )\n              }}\n            />\n\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-legend.json b/apps/www/public/r/styles/new-york-v4/chart-radar-legend.json
new file mode 100644
index 00000000000..fd34d06186a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-legend.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-legend",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-legend.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLegend() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-lines-only.json b/apps/www/public/r/styles/new-york-v4/chart-radar-lines-only.json
new file mode 100644
index 00000000000..93ea203a121
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-lines-only.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-lines-only",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-lines-only.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with lines only\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 160 },\n  { month: \"February\", desktop: 185, mobile: 170 },\n  { month: \"March\", desktop: 207, mobile: 180 },\n  { month: \"April\", desktop: 173, mobile: 160 },\n  { month: \"May\", desktop: 160, mobile: 190 },\n  { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLinesOnly() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Lines Only</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid radialLines={false} />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0}\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n            />\n            <Radar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0}\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-multiple.json b/apps/www/public/r/styles/new-york-v4/chart-radar-multiple.json
new file mode 100644
index 00000000000..75adfea85ef
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-multiple.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-multiple",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-multiple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with multiple data\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarMultiple() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Multiple</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radar-radius.json b/apps/www/public/r/styles/new-york-v4/chart-radar-radius.json
new file mode 100644
index 00000000000..c0abb76d53a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radar-radius.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radar-radius",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radar-radius.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a radius axis\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarRadius() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"hsla(var(--foreground))\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radial-grid.json b/apps/www/public/r/styles/new-york-v4/chart-radial-grid.json
new file mode 100644
index 00000000000..6afbeb0b04e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radial-grid.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-grid",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-grid.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a grid\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialGrid() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Grid</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <RadialBar dataKey=\"visitors\" />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radial-label.json b/apps/www/public/r/styles/new-york-v4/chart-radial-label.json
new file mode 100644
index 00000000000..fb33f244082
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radial-label.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-label",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-label.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialLabel() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={-90}\n            endAngle={380}\n            innerRadius={30}\n            outerRadius={110}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background>\n              <LabelList\n                position=\"insideStart\"\n                dataKey=\"browser\"\n                className=\"fill-white capitalize mix-blend-luminosity\"\n                fontSize={11}\n              />\n            </RadialBar>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radial-shape.json b/apps/www/public/r/styles/new-york-v4/chart-radial-shape.json
new file mode 100644
index 00000000000..7a698348495
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radial-shape.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-shape",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-shape.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a custom shape\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialShape() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Shape</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={100}\n            innerRadius={80}\n            outerRadius={140}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radial-simple.json b/apps/www/public/r/styles/new-york-v4/chart-radial-simple.json
new file mode 100644
index 00000000000..2df2df2318f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radial-simple.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-simple",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-simple.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialSimple() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radial-stacked.json b/apps/www/public/r/styles/new-york-v4/chart-radial-stacked.json
new file mode 100644
index 00000000000..727525264cf
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radial-stacked.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-stacked",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-stacked.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with stacked sections\"\n\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialStacked() {\n  const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 items-center pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={180}\n            innerRadius={80}\n            outerRadius={130}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) - 16}\n                          className=\"fill-foreground text-2xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 4}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n            <RadialBar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              cornerRadius={5}\n              fill=\"var(--color-desktop)\"\n              className=\"stroke-transparent stroke-2\"\n            />\n            <RadialBar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              stackId=\"a\"\n              cornerRadius={5}\n              className=\"stroke-transparent stroke-2\"\n            />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-radial-text.json b/apps/www/public/r/styles/new-york-v4/chart-radial-text.json
new file mode 100644
index 00000000000..fddbc36c401
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-radial-text.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-radial-text",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-radial-text.tsx",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with text\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialText() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={0}\n            endAngle={250}\n            innerRadius={80}\n            outerRadius={110}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-tooltip-advanced.json b/apps/www/public/r/styles/new-york-v4/chart-tooltip-advanced.json
new file mode 100644
index 00000000000..05abfc3e43c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-tooltip-advanced.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-advanced",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-advanced.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipAdvanced() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Advanced</CardTitle>\n        <CardDescription>\n          Tooltip with custom formatter and total.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  className=\"w-[180px]\"\n                  formatter={(value, name, item, index) => (\n                    <>\n                      <div\n                        className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)\"\n                        style={\n                          {\n                            \"--color-bg\": `var(--color-${name})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                        {value}\n                        <span className=\"text-muted-foreground font-normal\">\n                          kcal\n                        </span>\n                      </div>\n                      {/* Add this after the last item */}\n                      {index === 1 && (\n                        <div className=\"text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium\">\n                          Total\n                          <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                            {item.payload.running + item.payload.swimming}\n                            <span className=\"text-muted-foreground font-normal\">\n                              kcal\n                            </span>\n                          </div>\n                        </div>\n                      )}\n                    </>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-tooltip-default.json b/apps/www/public/r/styles/new-york-v4/chart-tooltip-default.json
new file mode 100644
index 00000000000..be2e0a6033b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-tooltip-default.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-default.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\nexport const iframeHeight = \"600px\"\nexport const containerClassName =\n  \"[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Default</CardTitle>\n        <CardDescription>\n          Default tooltip with ChartTooltipContent.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-tooltip-demo.json b/apps/www/public/r/styles/new-york-v4/chart-tooltip-demo.json
new file mode 100644
index 00000000000..9a217665394
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-tooltip-demo.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-demo",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/chart-tooltip-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute top-[45px] left-[-35px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute top-[50px] left-[5px] z-10\"\n        >\n          <g clipPath=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute top-[0px] left-[122px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute top-[10px] left-[85px] z-10 -scale-x-100\"\n        >\n          <g clipPath=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"!hidden md:!flex\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"!items-start !justify-start\">\n        <div className=\"absolute top-[60px] left-[50px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute top-[38px] left-[30px] z-10 rotate-[-40deg]\"\n        >\n          <g clipPath=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              <>\n                {!hideIndicator && (\n                  <div\n                    className={cn(\n                      \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                      {\n                        \"h-2.5 w-2.5\": indicator === \"dot\",\n                        \"w-1\": indicator === \"line\",\n                        \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                          indicator === \"dashed\",\n                        \"my-0.5\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\n                    }\n                  />\n                )}\n                <div\n                  className={cn(\n                    \"flex flex-1 justify-between leading-none\",\n                    nestLabel ? \"items-end\" : \"items-center\"\n                  )}\n                >\n                  <div className=\"grid gap-1.5\">\n                    {nestLabel ? tooltipLabel : null}\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                  </div>\n                  <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-tooltip-formatter.json b/apps/www/public/r/styles/new-york-v4/chart-tooltip-formatter.json
new file mode 100644
index 00000000000..9062606673e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-tooltip-formatter.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-formatter",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipFormatter() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Formatter</CardTitle>\n        <CardDescription>Tooltip with custom formatter .</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  formatter={(value, name) => (\n                    <div className=\"text-muted-foreground flex min-w-[130px] items-center text-xs\">\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                        {value}\n                        <span className=\"text-muted-foreground font-normal\">\n                          kcal\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-tooltip-icons.json b/apps/www/public/r/styles/new-york-v4/chart-tooltip-icons.json
new file mode 100644
index 00000000000..419ae3a6e58
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-tooltip-icons.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-icons",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-icons.tsx",
+      "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n    icon: Footprints,\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n    icon: Waves,\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipIcons() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Icons</CardTitle>\n        <CardDescription>Tooltip with icons.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-tooltip-indicator-line.json b/apps/www/public/r/styles/new-york-v4/chart-tooltip-indicator-line.json
new file mode 100644
index 00000000000..19a90b21061
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-tooltip-indicator-line.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-line",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-indicator-line.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\nexport const iframeHeight = \"600px\"\nexport const containerClassName =\n  \"[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipIndicatorLine() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Line Indicator</CardTitle>\n        <CardDescription>Tooltip with line indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent indicator=\"line\" />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-tooltip-indicator-none.json b/apps/www/public/r/styles/new-york-v4/chart-tooltip-indicator-none.json
new file mode 100644
index 00000000000..35a03b44cc9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-tooltip-indicator-none.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-indicator-none",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-indicator-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipIndicatorNone() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Indicator</CardTitle>\n        <CardDescription>Tooltip with no indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-tooltip-label-custom.json b/apps/www/public/r/styles/new-york-v4/chart-tooltip-label-custom.json
new file mode 100644
index 00000000000..d98b6266549
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-tooltip-label-custom.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-custom",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-label-custom.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  activities: {\n    label: \"Activities\",\n  },\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipLabelCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Custom label</CardTitle>\n        <CardDescription>\n          Tooltip with custom label from chartConfig.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent labelKey=\"activities\" indicator=\"line\" />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-tooltip-label-formatter.json b/apps/www/public/r/styles/new-york-v4/chart-tooltip-label-formatter.json
new file mode 100644
index 00000000000..7a23d021f82
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-tooltip-label-formatter.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-formatter",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-label-formatter.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipLabelFormatter() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Label Formatter</CardTitle>\n        <CardDescription>Tooltip with label formatter.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      day: \"numeric\",\n                      month: \"long\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart-tooltip-label-none.json b/apps/www/public/r/styles/new-york-v4/chart-tooltip-label-none.json
new file mode 100644
index 00000000000..506a57017cc
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart-tooltip-label-none.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-label-none",
+  "type": "registry:block",
+  "registryDependencies": [
+    "card",
+    "chart"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/charts/chart-tooltip-label-none.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipLabelNone() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Label</CardTitle>\n        <CardDescription>Tooltip with no label.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/chart.json b/apps/www/public/r/styles/new-york-v4/chart.json
new file mode 100644
index 00000000000..c2b5f3d6d09
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/chart.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart",
+  "type": "registry:ui",
+  "dependencies": [
+    "recharts@2.15.4",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "card"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/chart.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n          const indicatorColor = color || item.payload.fill || item.color\n\n          return (\n            <div\n              key={item.dataKey}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                formatter(item.value, item.name, item, index, item.payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\n                          \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                          {\n                            \"h-2.5 w-2.5\": indicator === \"dot\",\n                            \"w-1\": indicator === \"line\",\n                            \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                              indicator === \"dashed\",\n                            \"my-0.5\": nestLabel && indicator === \"dashed\",\n                          }\n                        )}\n                        style={\n                          {\n                            \"--color-bg\": indicatorColor,\n                            \"--color-border\": indicatorColor,\n                          } as React.CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\n                      \"flex flex-1 justify-between leading-none\",\n                      nestLabel ? \"items-end\" : \"items-center\"\n                    )}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">\n                        {itemConfig?.label || item.name}\n                      </span>\n                    </div>\n                    {item.value && (\n                      <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                        {item.value.toLocaleString()}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload.map((item) => {\n        const key = `${nameKey || item.dataKey || \"value\"}`\n        const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n        return (\n          <div\n            key={item.value}\n            className={cn(\n              \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n            )}\n          >\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                style={{\n                  backgroundColor: item.color,\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/checkbox-demo.json b/apps/www/public/r/styles/new-york-v4/checkbox-demo.json
new file mode 100644
index 00000000000..13da6e342fb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/checkbox-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function CheckboxDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex items-center gap-3\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n      <div className=\"flex items-start gap-3\">\n        <Checkbox id=\"terms-2\" defaultChecked />\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"terms-2\">Accept terms and conditions</Label>\n          <p className=\"text-muted-foreground text-sm\">\n            By clicking this checkbox, you agree to the terms and conditions.\n          </p>\n        </div>\n      </div>\n      <div className=\"flex items-start gap-3\">\n        <Checkbox id=\"toggle\" disabled />\n        <Label htmlFor=\"toggle\">Enable notifications</Label>\n      </div>\n      <Label className=\"hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950\">\n        <Checkbox\n          id=\"toggle-2\"\n          defaultChecked\n          className=\"data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700\"\n        />\n        <div className=\"grid gap-1.5 font-normal\">\n          <p className=\"text-sm leading-none font-medium\">\n            Enable notifications\n          </p>\n          <p className=\"text-muted-foreground text-sm\">\n            You can enable or disable notifications at any time.\n          </p>\n        </div>\n      </Label>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/checkbox-disabled.json b/apps/www/public/r/styles/new-york-v4/checkbox-disabled.json
new file mode 100644
index 00000000000..2f4f3400210
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/checkbox-disabled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-disabled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/checkbox-disabled.tsx",
+      "content": "import { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms2\" disabled />\n      <label\n        htmlFor=\"terms2\"\n        className=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/checkbox-form-multiple.json b/apps/www/public/r/styles/new-york-v4/checkbox-form-multiple.json
new file mode 100644
index 00000000000..9e763949a44
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/checkbox-form-multiple.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-multiple",
+  "type": "registry:example",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/checkbox-form-multiple.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\n\nconst items = [\n  {\n    id: \"recents\",\n    label: \"Recents\",\n  },\n  {\n    id: \"home\",\n    label: \"Home\",\n  },\n  {\n    id: \"applications\",\n    label: \"Applications\",\n  },\n  {\n    id: \"desktop\",\n    label: \"Desktop\",\n  },\n  {\n    id: \"downloads\",\n    label: \"Downloads\",\n  },\n  {\n    id: \"documents\",\n    label: \"Documents\",\n  },\n] as const\n\nconst FormSchema = z.object({\n  items: z.array(z.string()).refine((value) => value.some((item) => item), {\n    message: \"You have to select at least one item.\",\n  }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      items: [\"recents\", \"home\"],\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"items\"\n          render={() => (\n            <FormItem>\n              <div className=\"mb-4\">\n                <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                <FormDescription>\n                  Select the items you want to display in the sidebar.\n                </FormDescription>\n              </div>\n              {items.map((item) => (\n                <FormField\n                  key={item.id}\n                  control={form.control}\n                  name=\"items\"\n                  render={({ field }) => {\n                    return (\n                      <FormItem\n                        key={item.id}\n                        className=\"flex flex-row items-center gap-2\"\n                      >\n                        <FormControl>\n                          <Checkbox\n                            checked={field.value?.includes(item.id)}\n                            onCheckedChange={(checked) => {\n                              return checked\n                                ? field.onChange([...field.value, item.id])\n                                : field.onChange(\n                                    field.value?.filter(\n                                      (value) => value !== item.id\n                                    )\n                                  )\n                            }}\n                          />\n                        </FormControl>\n                        <FormLabel className=\"text-sm font-normal\">\n                          {item.label}\n                        </FormLabel>\n                      </FormItem>\n                    )\n                  }}\n                />\n              ))}\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/checkbox-form-single.json b/apps/www/public/r/styles/new-york-v4/checkbox-form-single.json
new file mode 100644
index 00000000000..df668fb5145
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/checkbox-form-single.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-single",
+  "type": "registry:example",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/checkbox-form-single.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/new-york-v4/ui/form\"\n\nconst FormSchema = z.object({\n  mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      mobile: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form\n        onSubmit={form.handleSubmit(onSubmit)}\n        className=\"flex flex-col items-start gap-4\"\n      >\n        <FormField\n          control={form.control}\n          name=\"mobile\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-row items-start gap-2 rounded-md border p-4 shadow-sm\">\n              <FormControl>\n                <Checkbox\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <div className=\"space-y-1 leading-none\">\n                <FormLabel>\n                  Use different settings for my mobile devices\n                </FormLabel>\n                <FormDescription>\n                  You can manage your mobile notifications in the{\" \"}\n                  <Link href=\"/examples/forms\">mobile settings</Link> page.\n                </FormDescription>\n              </div>\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/checkbox-with-text.json b/apps/www/public/r/styles/new-york-v4/checkbox-with-text.json
new file mode 100644
index 00000000000..c4f53ca229d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/checkbox-with-text.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-with-text",
+  "type": "registry:example",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/checkbox-with-text.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n  return (\n    <div className=\"items-top flex gap-2\">\n      <Checkbox id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-muted-foreground text-sm\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/checkbox.json b/apps/www/public/r/styles/new-york-v4/checkbox.json
new file mode 100644
index 00000000000..efc86def356
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/checkbox.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-checkbox"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/checkbox.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current transition-none\"\n      >\n        <CheckIcon className=\"size-3.5\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/collapsible-demo.json b/apps/www/public/r/styles/new-york-v4/collapsible-demo.json
new file mode 100644
index 00000000000..cc97346e13e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/collapsible-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"flex w-[350px] flex-col gap-2\"\n    >\n      <div className=\"flex items-center justify-between gap-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n            <ChevronsUpDown />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"flex flex-col gap-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/collapsible.json b/apps/www/public/r/styles/new-york-v4/collapsible.json
new file mode 100644
index 00000000000..3dc6db7ab79
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/collapsible.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/collapsible.tsx",
+      "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nfunction Collapsible({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      data-slot=\"collapsible-content\"\n      {...props}\n    />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/combobox-demo.json b/apps/www/public/r/styles/new-york-v4/combobox-demo.json
new file mode 100644
index 00000000000..c1850b1ce49
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/combobox-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport default function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/combobox-dropdown-menu.json b/apps/www/public/r/styles/new-york-v4/combobox-dropdown-menu.json
new file mode 100644
index 00000000000..fe7126312d2
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/combobox-dropdown-menu.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-dropdown-menu",
+  "type": "registry:example",
+  "registryDependencies": [
+    "command",
+    "dropdown-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/combobox-dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nconst labels = [\n  \"feature\",\n  \"bug\",\n  \"enhancement\",\n  \"documentation\",\n  \"design\",\n  \"question\",\n  \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n  const [label, setLabel] = React.useState(\"feature\")\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n      <p className=\"text-sm leading-none font-medium\">\n        <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">Create a new project</span>\n      </p>\n      <DropdownMenu open={open} onOpenChange={setOpen}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <MoreHorizontal />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n          <DropdownMenuLabel>Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Assign to...</DropdownMenuItem>\n            <DropdownMenuItem>Set due date...</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"p-0\">\n                <Command>\n                  <CommandInput\n                    placeholder=\"Filter label...\"\n                    autoFocus={true}\n                    className=\"h-9\"\n                  />\n                  <CommandList>\n                    <CommandEmpty>No label found.</CommandEmpty>\n                    <CommandGroup>\n                      {labels.map((label) => (\n                        <CommandItem\n                          key={label}\n                          value={label}\n                          onSelect={(value) => {\n                            setLabel(value)\n                            setOpen(false)\n                          }}\n                        >\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                  </CommandList>\n                </Command>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"text-red-600\">\n              Delete\n              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/combobox-form.json b/apps/www/public/r/styles/new-york-v4/combobox-form.json
new file mode 100644
index 00000000000..1e87981d65a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/combobox-form.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "command",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/combobox-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst languages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n  language: z.string({\n    required_error: \"Please select a language.\",\n  }),\n})\n\nexport default function ComboboxForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"language\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Language</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      className={cn(\n                        \"w-[200px] justify-between\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value\n                        ? languages.find(\n                            (language) => language.value === field.value\n                          )?.label\n                        : \"Select language\"}\n                      <ChevronsUpDown className=\"opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-[200px] p-0\">\n                  <Command>\n                    <CommandInput\n                      placeholder=\"Search framework...\"\n                      className=\"h-9\"\n                    />\n                    <CommandList>\n                      <CommandEmpty>No framework found.</CommandEmpty>\n                      <CommandGroup>\n                        {languages.map((language) => (\n                          <CommandItem\n                            value={language.label}\n                            key={language.value}\n                            onSelect={() => {\n                              form.setValue(\"language\", language.value)\n                            }}\n                          >\n                            {language.label}\n                            <Check\n                              className={cn(\n                                \"ml-auto\",\n                                language.value === field.value\n                                  ? \"opacity-100\"\n                                  : \"opacity-0\"\n                              )}\n                            />\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                This is the language that will be used in the dashboard.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/combobox-popover.json b/apps/www/public/r/styles/new-york-v4/combobox-popover.json
new file mode 100644
index 00000000000..99c1975d7b0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/combobox-popover.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-popover",
+  "type": "registry:example",
+  "registryDependencies": [
+    "combobox",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/combobox-popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/combobox-responsive.json b/apps/www/public/r/styles/new-york-v4/combobox-responsive.json
new file mode 100644
index 00000000000..7f43fdc4a1e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/combobox-responsive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-responsive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "combobox",
+    "popover",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/combobox-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboBoxResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  if (isDesktop) {\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </PopoverContent>\n      </Popover>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mt-4 border-t\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction StatusList({\n  setOpen,\n  setSelectedStatus,\n}: {\n  setOpen: (open: boolean) => void\n  setSelectedStatus: (status: Status | null) => void\n}) {\n  return (\n    <Command>\n      <CommandInput placeholder=\"Filter status...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup>\n          {statuses.map((status) => (\n            <CommandItem\n              key={status.value}\n              value={status.value}\n              onSelect={(value) => {\n                setSelectedStatus(\n                  statuses.find((priority) => priority.value === value) || null\n                )\n                setOpen(false)\n              }}\n            >\n              {status.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/command-demo.json b/apps/www/public/r/styles/new-york-v4/command-demo.json
new file mode 100644
index 00000000000..a2240639f5b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/command-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/command-demo.tsx",
+      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york-v4/ui/command\"\n\nexport default function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/command-dialog.json b/apps/www/public/r/styles/new-york-v4/command-dialog.json
new file mode 100644
index 00000000000..4851ce87e39
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/command-dialog.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-dialog",
+  "type": "registry:example",
+  "registryDependencies": [
+    "command",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/command-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york-v4/ui/command\"\n\nexport default function CommandDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <p className=\"text-muted-foreground text-sm\">\n        Press{\" \"}\n        <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/command.json b/apps/www/public/r/styles/new-york-v4/command.json
new file mode 100644
index 00000000000..ff5dd783b78
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/command.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command",
+  "type": "registry:ui",
+  "dependencies": [
+    "cmdk"
+  ],
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/command.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/new-york-v4/ui/dialog\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-9 items-center gap-2 border-b px-3\"\n    >\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/context-menu-demo.json b/apps/www/public/r/styles/new-york-v4/context-menu-demo.json
new file mode 100644
index 00000000000..3f7da90d437
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/context-menu-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "context-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/context-menu-demo.tsx",
+      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/new-york-v4/ui/context-menu\"\n\nexport default function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-52\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-44\">\n            <ContextMenuItem>Save Page...</ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/context-menu.json b/apps/www/public/r/styles/new-york-v4/context-menu.json
new file mode 100644
index 00000000000..94bc5d0b77e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/context-menu.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-context-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/context-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/dashboard-01-dark.png b/apps/www/public/r/styles/new-york-v4/dashboard-01-dark.png
new file mode 100644
index 00000000000..eb91077a53d
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/dashboard-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/dashboard-01-light.png b/apps/www/public/r/styles/new-york-v4/dashboard-01-light.png
new file mode 100644
index 00000000000..66206ed6a01
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/dashboard-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/dashboard-01.json b/apps/www/public/r/styles/new-york-v4/dashboard-01.json
new file mode 100644
index 00000000000..537a06053d6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/dashboard-01.json
@@ -0,0 +1,101 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dashboard-01",
+  "type": "registry:block",
+  "description": "A dashboard with sidebar, charts and data table.",
+  "dependencies": [
+    "@dnd-kit/core",
+    "@dnd-kit/modifiers",
+    "@dnd-kit/sortable",
+    "@dnd-kit/utilities",
+    "@tanstack/react-table",
+    "zod",
+    "@tabler/icons-react"
+  ],
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "chart",
+    "card",
+    "select",
+    "tabs",
+    "table",
+    "toggle-group",
+    "badge",
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "drawer",
+    "input",
+    "avatar",
+    "sheet",
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/dashboard-01/components/app-sidebar\"\nimport { ChartAreaInteractive } from \"@/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive\"\nimport { DataTable } from \"@/registry/new-york-v4/blocks/dashboard-01/components/data-table\"\nimport { SectionCards } from \"@/registry/new-york-v4/blocks/dashboard-01/components/section-cards\"\nimport { SiteHeader } from \"@/registry/new-york-v4/blocks/dashboard-01/components/site-header\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nimport data from \"./data.json\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"calc(var(--spacing) * 72)\",\n          \"--header-height\": \"calc(var(--spacing) * 12)\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar variant=\"inset\" />\n      <SidebarInset>\n        <SiteHeader />\n        <div className=\"flex flex-1 flex-col\">\n          <div className=\"@container/main flex flex-1 flex-col gap-2\">\n            <div className=\"flex flex-col gap-4 py-4 md:gap-6 md:py-6\">\n              <SectionCards />\n              <div className=\"px-4 lg:px-6\">\n                <ChartAreaInteractive />\n              </div>\n              <DataTable data={data} />\n            </div>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/data.json",
+      "content": "[\n  {\n    \"id\": 1,\n    \"header\": \"Cover page\",\n    \"type\": \"Cover page\",\n    \"status\": \"In Process\",\n    \"target\": \"18\",\n    \"limit\": \"5\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 2,\n    \"header\": \"Table of contents\",\n    \"type\": \"Table of contents\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 3,\n    \"header\": \"Executive summary\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"10\",\n    \"limit\": \"13\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 4,\n    \"header\": \"Technical approach\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"27\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 5,\n    \"header\": \"Design\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"2\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 6,\n    \"header\": \"Capabilities\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"20\",\n    \"limit\": \"8\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 7,\n    \"header\": \"Integration with existing systems\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 8,\n    \"header\": \"Innovation and Advantages\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"25\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 9,\n    \"header\": \"Overview of EMR's Innovative Solutions\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"7\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 10,\n    \"header\": \"Advanced Algorithms and Machine Learning\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 11,\n    \"header\": \"Adaptive Communication Protocols\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"9\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 12,\n    \"header\": \"Advantages Over Current Technologies\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"0\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 13,\n    \"header\": \"Past Performance\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 14,\n    \"header\": \"Customer Feedback and Satisfaction Levels\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"34\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 15,\n    \"header\": \"Implementation Challenges and Solutions\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"3\",\n    \"limit\": \"35\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 16,\n    \"header\": \"Security Measures and Data Protection Policies\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"6\",\n    \"limit\": \"36\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 17,\n    \"header\": \"Scalability and Future Proofing\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"4\",\n    \"limit\": \"37\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 18,\n    \"header\": \"Cost-Benefit Analysis\",\n    \"type\": \"Plain language\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"38\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 19,\n    \"header\": \"User Training and Onboarding Experience\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"17\",\n    \"limit\": \"39\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 20,\n    \"header\": \"Future Development Roadmap\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"11\",\n    \"limit\": \"40\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 21,\n    \"header\": \"System Architecture Overview\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"24\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Maya Johnson\"\n  },\n  {\n    \"id\": 22,\n    \"header\": \"Risk Management Plan\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Carlos Rodriguez\"\n  },\n  {\n    \"id\": 23,\n    \"header\": \"Compliance Documentation\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"31\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Sarah Chen\"\n  },\n  {\n    \"id\": 24,\n    \"header\": \"API Documentation\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"8\",\n    \"limit\": \"12\",\n    \"reviewer\": \"Raj Patel\"\n  },\n  {\n    \"id\": 25,\n    \"header\": \"User Interface Mockups\",\n    \"type\": \"Visual\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Leila Ahmadi\"\n  },\n  {\n    \"id\": 26,\n    \"header\": \"Database Schema\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Thomas Wilson\"\n  },\n  {\n    \"id\": 27,\n    \"header\": \"Testing Methodology\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 28,\n    \"header\": \"Deployment Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 29,\n    \"header\": \"Budget Breakdown\",\n    \"type\": \"Financial\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 30,\n    \"header\": \"Market Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Sophia Martinez\"\n  },\n  {\n    \"id\": 31,\n    \"header\": \"Competitor Comparison\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 32,\n    \"header\": \"Maintenance Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Alex Thompson\"\n  },\n  {\n    \"id\": 33,\n    \"header\": \"User Personas\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Nina Patel\"\n  },\n  {\n    \"id\": 34,\n    \"header\": \"Accessibility Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 35,\n    \"header\": \"Performance Metrics\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"David Kim\"\n  },\n  {\n    \"id\": 36,\n    \"header\": \"Disaster Recovery Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 37,\n    \"header\": \"Third-party Integrations\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 38,\n    \"header\": \"User Feedback Summary\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 39,\n    \"header\": \"Localization Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"12\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Maria Garcia\"\n  },\n  {\n    \"id\": 40,\n    \"header\": \"Mobile Compatibility\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"James Wilson\"\n  },\n  {\n    \"id\": 41,\n    \"header\": \"Data Migration Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 42,\n    \"header\": \"Quality Assurance Protocols\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Priya Singh\"\n  },\n  {\n    \"id\": 43,\n    \"header\": \"Stakeholder Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"11\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 44,\n    \"header\": \"Environmental Impact Assessment\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 45,\n    \"header\": \"Intellectual Property Rights\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Sarah Johnson\"\n  },\n  {\n    \"id\": 46,\n    \"header\": \"Customer Support Framework\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 47,\n    \"header\": \"Version Control Strategy\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 48,\n    \"header\": \"Continuous Integration Pipeline\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Michael Chen\"\n  },\n  {\n    \"id\": 49,\n    \"header\": \"Regulatory Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 50,\n    \"header\": \"User Authentication System\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 51,\n    \"header\": \"Data Analytics Framework\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 52,\n    \"header\": \"Cloud Infrastructure\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 53,\n    \"header\": \"Network Security Measures\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Lisa Wong\"\n  },\n  {\n    \"id\": 54,\n    \"header\": \"Project Timeline\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 55,\n    \"header\": \"Resource Allocation\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 56,\n    \"header\": \"Team Structure and Roles\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 57,\n    \"header\": \"Communication Protocols\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 58,\n    \"header\": \"Success Metrics\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 59,\n    \"header\": \"Internationalization Support\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 60,\n    \"header\": \"Backup and Recovery Procedures\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 61,\n    \"header\": \"Monitoring and Alerting System\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Daniel Park\"\n  },\n  {\n    \"id\": 62,\n    \"header\": \"Code Review Guidelines\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 63,\n    \"header\": \"Documentation Standards\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 64,\n    \"header\": \"Release Management Process\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 65,\n    \"header\": \"Feature Prioritization Matrix\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Emma Davis\"\n  },\n  {\n    \"id\": 66,\n    \"header\": \"Technical Debt Assessment\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 67,\n    \"header\": \"Capacity Planning\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 68,\n    \"header\": \"Service Level Agreements\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Assign reviewer\"\n  }\n]\n",
+      "type": "registry:file",
+      "target": "app/dashboard/data.json"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  IconCamera,\n  IconChartBar,\n  IconDashboard,\n  IconDatabase,\n  IconFileAi,\n  IconFileDescription,\n  IconFileWord,\n  IconFolder,\n  IconHelp,\n  IconInnerShadowTop,\n  IconListDetails,\n  IconReport,\n  IconSearch,\n  IconSettings,\n  IconUsers,\n} from \"@tabler/icons-react\"\n\nimport { NavDocuments } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Dashboard\",\n      url: \"#\",\n      icon: IconDashboard,\n    },\n    {\n      title: \"Lifecycle\",\n      url: \"#\",\n      icon: IconListDetails,\n    },\n    {\n      title: \"Analytics\",\n      url: \"#\",\n      icon: IconChartBar,\n    },\n    {\n      title: \"Projects\",\n      url: \"#\",\n      icon: IconFolder,\n    },\n    {\n      title: \"Team\",\n      url: \"#\",\n      icon: IconUsers,\n    },\n  ],\n  navClouds: [\n    {\n      title: \"Capture\",\n      icon: IconCamera,\n      isActive: true,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Proposal\",\n      icon: IconFileDescription,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Prompts\",\n      icon: IconFileAi,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: IconSettings,\n    },\n    {\n      title: \"Get Help\",\n      url: \"#\",\n      icon: IconHelp,\n    },\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: IconSearch,\n    },\n  ],\n  documents: [\n    {\n      name: \"Data Library\",\n      url: \"#\",\n      icon: IconDatabase,\n    },\n    {\n      name: \"Reports\",\n      url: \"#\",\n      icon: IconReport,\n    },\n    {\n      name: \"Word Assistant\",\n      url: \"#\",\n      icon: IconFileWord,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              asChild\n              className=\"data-[slot=sidebar-menu-button]:!p-1.5\"\n            >\n              <a href=\"#\">\n                <IconInnerShadowTop className=\"!size-5\" />\n                <span className=\"text-base font-semibold\">Acme Inc.</span>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavDocuments items={data.documents} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const isMobile = useIsMobile()\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  React.useEffect(() => {\n    if (isMobile) {\n      setTimeRange(\"7d\")\n    }\n  }, [isMobile])\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"@container/card\">\n      <CardHeader>\n        <CardTitle>Total Visitors</CardTitle>\n        <CardDescription>\n          <span className=\"hidden @[540px]/card:block\">\n            Total for the last 3 months\n          </span>\n          <span className=\"@[540px]/card:hidden\">Last 3 months</span>\n        </CardDescription>\n        <CardAction>\n          <ToggleGroup\n            type=\"single\"\n            value={timeRange}\n            onValueChange={setTimeRange}\n            variant=\"outline\"\n            className=\"hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex\"\n          >\n            <ToggleGroupItem value=\"90d\">Last 3 months</ToggleGroupItem>\n            <ToggleGroupItem value=\"30d\">Last 30 days</ToggleGroupItem>\n            <ToggleGroupItem value=\"7d\">Last 7 days</ToggleGroupItem>\n          </ToggleGroup>\n          <Select value={timeRange} onValueChange={setTimeRange}>\n            <SelectTrigger\n              className=\"flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden\"\n              size=\"sm\"\n              aria-label=\"Select a value\"\n            >\n              <SelectValue placeholder=\"Last 3 months\" />\n            </SelectTrigger>\n            <SelectContent className=\"rounded-xl\">\n              <SelectItem value=\"90d\" className=\"rounded-lg\">\n                Last 3 months\n              </SelectItem>\n              <SelectItem value=\"30d\" className=\"rounded-lg\">\n                Last 30 days\n              </SelectItem>\n              <SelectItem value=\"7d\" className=\"rounded-lg\">\n                Last 7 days\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </CardAction>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={1.0}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronsLeft,\n  IconChevronsRight,\n  IconCircleCheckFilled,\n  IconDotsVertical,\n  IconGripVertical,\n  IconLayoutColumns,\n  IconLoader,\n  IconPlus,\n  IconTrendingUp,\n} from \"@tabler/icons-react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  Row,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york-v4/ui/tabs\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconGripVertical className=\"text-muted-foreground size-3\" />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconCircleCheckFilled className=\"fill-green-500 dark:fill-green-400\" />\n        ) : (\n          <IconLoader />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n              <SelectItem value=\"Jamik Tashpulatov\">\n                Jamik Tashpulatov\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"data-[state=open]:bg-muted text-muted-foreground flex size-8\"\n            size=\"icon\"\n          >\n            <IconDotsVertical />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"outline\">Outline</SelectItem>\n            <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n            <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n            <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconLayoutColumns />\n                <span className=\"hidden lg:inline\">Customize Columns</span>\n                <span className=\"lg:hidden\">Columns</span>\n                <IconChevronDown />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlus />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  {[10, 20, 30, 40, 50].map((pageSize) => (\n                    <SelectItem key={pageSize} value={`${pageSize}`}>\n                      {pageSize}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconChevronsLeft />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconChevronLeft />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconChevronRight />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconChevronsRight />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconTrendingUp className=\"size-4\" />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Table of Contents\">\n                      Table of Contents\n                    </SelectItem>\n                    <SelectItem value=\"Executive Summary\">\n                      Executive Summary\n                    </SelectItem>\n                    <SelectItem value=\"Technical Approach\">\n                      Technical Approach\n                    </SelectItem>\n                    <SelectItem value=\"Design\">Design</SelectItem>\n                    <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                    <SelectItem value=\"Focus Documents\">\n                      Focus Documents\n                    </SelectItem>\n                    <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                    <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Done\">Done</SelectItem>\n                    <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                    <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                  <SelectItem value=\"Jamik Tashpulatov\">\n                    Jamik Tashpulatov\n                  </SelectItem>\n                  <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx",
+      "content": "\"use client\"\n\nimport {\n  IconDots,\n  IconFolder,\n  IconShare3,\n  IconTrash,\n  type Icon,\n} from \"@tabler/icons-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: Icon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"data-[state=open]:bg-accent rounded-sm\"\n                >\n                  <IconDots />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconFolder />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconShare3 />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconTrash />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconDots className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { IconCirclePlusFilled, IconMail, type Icon } from \"@tabler/icons-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: Icon\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconCirclePlusFilled />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconMail />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon && <item.icon />}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Icon } from \"@tabler/icons-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: Icon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  IconCreditCard,\n  IconDotsVertical,\n  IconLogout,\n  IconNotification,\n  IconUserCircle,\n} from \"@tabler/icons-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  {user.email}\n                </span>\n              </div>\n              <IconDotsVertical className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"text-muted-foreground truncate text-xs\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconUserCircle />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconCreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconNotification />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconLogout />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx",
+      "content": "import { IconTrendingDown, IconTrendingUp } from \"@tabler/icons-react\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingDown />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period <IconTrendingDown className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/dashboard-01/components/site-header.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport { SidebarTrigger } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SiteHeader() {\n  return (\n    <header className=\"flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)\">\n      <div className=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\n        <SidebarTrigger className=\"-ml-1\" />\n        <Separator\n          orientation=\"vertical\"\n          className=\"mx-2 data-[orientation=vertical]:h-4\"\n        />\n        <h1 className=\"text-base font-medium\">Documents</h1>\n        <div className=\"ml-auto flex items-center gap-2\">\n          <Button variant=\"ghost\" asChild size=\"sm\" className=\"hidden sm:flex\">\n            <a\n              href=\"https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard\"\n              rel=\"noopener noreferrer\"\n              target=\"_blank\"\n              className=\"dark:text-foreground\"\n            >\n              GitHub\n            </a>\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "1000px"
+  },
+  "categories": [
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/data-table-demo.json b/apps/www/public/r/styles/new-york-v4/data-table-demo.json
new file mode 100644
index 00000000000..0bf652ccbd5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/data-table-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-table-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "data-table"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\n\nconst data: Payment[] = [\n  {\n    id: \"m5gr84i9\",\n    amount: 316,\n    status: \"success\",\n    email: \"ken99@example.com\",\n  },\n  {\n    id: \"3u1reuv4\",\n    amount: 242,\n    status: \"success\",\n    email: \"Abe45@example.com\",\n  },\n  {\n    id: \"derv1ws0\",\n    amount: 837,\n    status: \"processing\",\n    email: \"Monserrat44@example.com\",\n  },\n  {\n    id: \"5kma53ae\",\n    amount: 874,\n    status: \"success\",\n    email: \"Silas22@example.com\",\n  },\n  {\n    id: \"bhqecj4p\",\n    amount: 721,\n    status: \"failed\",\n    email: \"carmella@example.com\",\n  },\n]\n\nexport type Payment = {\n  id: string\n  amount: number\n  status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n  email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n    ),\n  },\n  {\n    accessorKey: \"email\",\n    header: ({ column }) => {\n      return (\n        <Button\n          variant=\"ghost\"\n          onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n        >\n          Email\n          <ArrowUpDown />\n        </Button>\n      )\n    },\n    cell: ({ row }) => <div className=\"lowercase\">{row.getValue(\"email\")}</div>,\n  },\n  {\n    accessorKey: \"amount\",\n    header: () => <div className=\"text-right\">Amount</div>,\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"amount\"))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n\n      return <div className=\"text-right font-medium\">{formatted}</div>\n    },\n  },\n  {\n    id: \"actions\",\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" className=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem\n              onClick={() => navigator.clipboard.writeText(payment.id)}\n            >\n              Copy payment ID\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>View customer</DropdownMenuItem>\n            <DropdownMenuItem>View payment details</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      )\n    },\n  },\n]\n\nexport default function DataTableDemo() {\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [rowSelection, setRowSelection] = React.useState({})\n\n  const table = useReactTable({\n    data,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n  })\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-center py-4\">\n        <Input\n          placeholder=\"Filter emails...\"\n          value={(table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"}\n          onChange={(event) =>\n            table.getColumn(\"email\")?.setFilterValue(event.target.value)\n          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDown />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {table\n              .getAllColumns()\n              .filter((column) => column.getCanHide())\n              .map((column) => {\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    className=\"capitalize\"\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {column.id}\n                  </DropdownMenuCheckboxItem>\n                )\n              })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex items-center justify-end space-x-2 py-4\">\n        <div className=\"text-muted-foreground flex-1 text-sm\">\n          {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n          {table.getFilteredRowModel().rows.length} row(s) selected.\n        </div>\n        <div className=\"space-x-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            Previous\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            Next\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/date-picker-demo.json b/apps/www/public/r/styles/new-york-v4/date-picker-demo.json
new file mode 100644
index 00000000000..faf03d2c85d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/date-picker-demo.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-demo",
+  "type": "registry:example",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/date-picker-form.json b/apps/www/public/r/styles/new-york-v4/date-picker-form.json
new file mode 100644
index 00000000000..0fb3b0c5aaa
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/date-picker-form.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-form",
+  "type": "registry:example",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/date-picker-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function DatePickerForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    captionLayout=\"dropdown\"\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/date-picker-with-presets.json b/apps/www/public/r/styles/new-york-v4/date-picker-with-presets.json
new file mode 100644
index 00000000000..cadcb13e51e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/date-picker-with-presets.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-presets",
+  "type": "registry:example",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/date-picker-with-presets.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function DatePickerWithPresets() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"flex w-auto flex-col space-y-2 p-2\"\n      >\n        <Select\n          onValueChange={(value) =>\n            setDate(addDays(new Date(), parseInt(value)))\n          }\n        >\n          <SelectTrigger>\n            <SelectValue placeholder=\"Select\" />\n          </SelectTrigger>\n          <SelectContent position=\"popper\">\n            <SelectItem value=\"0\">Today</SelectItem>\n            <SelectItem value=\"1\">Tomorrow</SelectItem>\n            <SelectItem value=\"3\">In 3 days</SelectItem>\n            <SelectItem value=\"7\">In a week</SelectItem>\n          </SelectContent>\n        </Select>\n        <div className=\"rounded-md border\">\n          <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/date-picker-with-range.json b/apps/www/public/r/styles/new-york-v4/date-picker-with-range.json
new file mode 100644
index 00000000000..6a44012fdfe
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/date-picker-with-range.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-range",
+  "type": "registry:example",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/date-picker-with-range.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function DatePickerWithRange({\n  className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(2022, 0, 20),\n    to: addDays(new Date(2022, 0, 20), 20),\n  })\n\n  return (\n    <div className={cn(\"grid gap-2\", className)}>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id=\"date\"\n            variant={\"outline\"}\n            className={cn(\n              \"w-[300px] justify-start text-left font-normal\",\n              !date && \"text-muted-foreground\"\n            )}\n          >\n            <CalendarIcon />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            initialFocus\n            mode=\"range\"\n            defaultMonth={date?.from}\n            selected={date}\n            onSelect={setDate}\n            numberOfMonths={2}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/dialog-close-button.json b/apps/www/public/r/styles/new-york-v4/dialog-close-button.json
new file mode 100644
index 00000000000..d5a4e9fe404
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/dialog-close-button.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-close-button",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dialog-close-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function DialogCloseButton() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Share</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share link</DialogTitle>\n          <DialogDescription>\n            Anyone who has this link will be able to view this.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex items-center gap-2\">\n          <div className=\"grid flex-1 gap-2\">\n            <Label htmlFor=\"link\" className=\"sr-only\">\n              Link\n            </Label>\n            <Input\n              id=\"link\"\n              defaultValue=\"https://ui.shadcn.com/docs/installation\"\n              readOnly\n            />\n          </div>\n        </div>\n        <DialogFooter className=\"sm:justify-start\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"secondary\">\n              Close\n            </Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/dialog-demo.json b/apps/www/public/r/styles/new-york-v4/dialog-demo.json
new file mode 100644
index 00000000000..15219db0ba3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/dialog-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dialog-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/dialog.json b/apps/www/public/r/styles/new-york-v4/dialog.json
new file mode 100644
index 00000000000..cc3c50efaf6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/dialog.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/drawer-demo.json b/apps/www/public/r/styles/new-york-v4/drawer-demo.json
new file mode 100644
index 00000000000..de47851d793
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/drawer-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport default function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/drawer-dialog.json b/apps/www/public/r/styles/new-york-v4/drawer-dialog.json
new file mode 100644
index 00000000000..cefe9c50226
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/drawer-dialog.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-dialog",
+  "type": "registry:example",
+  "registryDependencies": [
+    "drawer",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/drawer-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Edit Profile</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/drawer.json b/apps/www/public/r/styles/new-york-v4/drawer.json
new file mode 100644
index 00000000000..b3641635d0e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/drawer.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer",
+  "type": "registry:ui",
+  "dependencies": [
+    "vaul",
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/drawer.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/dropdown-menu-checkboxes.json b/apps/www/public/r/styles/new-york-v4/dropdown-menu-checkboxes.json
new file mode 100644
index 00000000000..68fd7b65cba
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/dropdown-menu-checkboxes.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-checkboxes",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dropdown-menu",
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dropdown-menu-checkboxes.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\ntype Checked = DropdownMenuCheckboxItemProps[\"checked\"]\n\nexport default function DropdownMenuCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n  const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuCheckboxItem\n          checked={showStatusBar}\n          onCheckedChange={setShowStatusBar}\n        >\n          Status Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showActivityBar}\n          onCheckedChange={setShowActivityBar}\n          disabled\n        >\n          Activity Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showPanel}\n          onCheckedChange={setShowPanel}\n        >\n          Panel\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/dropdown-menu-demo.json b/apps/www/public/r/styles/new-york-v4/dropdown-menu-demo.json
new file mode 100644
index 00000000000..0f2683f81f7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/dropdown-menu-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\" align=\"start\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Email</DropdownMenuItem>\n                <DropdownMenuItem>Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/dropdown-menu-radio-group.json b/apps/www/public/r/styles/new-york-v4/dropdown-menu-radio-group.json
new file mode 100644
index 00000000000..62588064aa6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/dropdown-menu-radio-group.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-radio-group",
+  "type": "registry:example",
+  "registryDependencies": [
+    "dropdown-menu",
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/dropdown-menu-radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function DropdownMenuRadioGroupDemo() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>\n          <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"bottom\">Bottom</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"right\">Right</DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/dropdown-menu.json b/apps/www/public/r/styles/new-york-v4/dropdown-menu.json
new file mode 100644
index 00000000000..7d073ba0c19
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/dropdown-menu.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/form.json b/apps/www/public/r/styles/new-york-v4/form.json
new file mode 100644
index 00000000000..b8b5dd38e48
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/form.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "form",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-label",
+    "@radix-ui/react-slot",
+    "@hookform/resolvers",
+    "zod",
+    "react-hook-form"
+  ],
+  "registryDependencies": [
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/form.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState } = useFormContext()\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : props.children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-destructive text-sm\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/hover-card-demo.json b/apps/www/public/r/styles/new-york-v4/hover-card-demo.json
new file mode 100644
index 00000000000..b729ec1892a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/hover-card-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "hover-card"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york-v4/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between gap-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"text-muted-foreground text-xs\">\n              Joined December 2021\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/hover-card.json b/apps/www/public/r/styles/new-york-v4/hover-card.json
new file mode 100644
index 00000000000..fdb336fe7fd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/hover-card.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-hover-card"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/hover-card.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/index.json b/apps/www/public/r/styles/new-york-v4/index.json
new file mode 100644
index 00000000000..3a8ab076873
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/index.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "type": "registry:style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "devDependencies": [
+    "tw-animate-css"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {}
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-demo.json b/apps/www/public/r/styles/new-york-v4/input-demo.json
new file mode 100644
index 00000000000..c717e5f907a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-demo.tsx",
+      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport default function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-disabled.json b/apps/www/public/r/styles/new-york-v4/input-disabled.json
new file mode 100644
index 00000000000..14173b3f1d1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-disabled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-disabled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-disabled.tsx",
+      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport default function InputDisabled() {\n  return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-file.json b/apps/www/public/r/styles/new-york-v4/input-file.json
new file mode 100644
index 00000000000..5be7bf1ac0b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-file.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-file",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-file.tsx",
+      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function InputFile() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\n      <Label htmlFor=\"picture\">Picture</Label>\n      <Input id=\"picture\" type=\"file\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-form.json b/apps/www/public/r/styles/new-york-v4/input-form.json
new file mode 100644
index 00000000000..d39dd1de864
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input",
+    "button",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nconst FormSchema = z.object({\n  username: z.string().min(2, {\n    message: \"Username must be at least 2 characters.\",\n  }),\n})\n\nexport default function InputForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      username: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-otp-controlled.json b/apps/www/public/r/styles/new-york-v4/input-otp-controlled.json
new file mode 100644
index 00000000000..7da3e484629
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-otp-controlled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-controlled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-otp-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york-v4/ui/input-otp\"\n\nexport default function InputOTPControlled() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <div className=\"space-y-2\">\n      <InputOTP\n        maxLength={6}\n        value={value}\n        onChange={(value) => setValue(value)}\n      >\n        <InputOTPGroup>\n          <InputOTPSlot index={0} />\n          <InputOTPSlot index={1} />\n          <InputOTPSlot index={2} />\n          <InputOTPSlot index={3} />\n          <InputOTPSlot index={4} />\n          <InputOTPSlot index={5} />\n        </InputOTPGroup>\n      </InputOTP>\n      <div className=\"text-center text-sm\">\n        {value === \"\" ? (\n          <>Enter your one-time password.</>\n        ) : (\n          <>You entered: {value}</>\n        )}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-otp-demo.json b/apps/www/public/r/styles/new-york-v4/input-otp-demo.json
new file mode 100644
index 00000000000..15979ff8f00
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-otp-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-otp-demo.tsx",
+      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york-v4/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-otp-form.json b/apps/www/public/r/styles/new-york-v4/input-otp-form.json
new file mode 100644
index 00000000000..fc660ffe7d9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-otp-form.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input-otp",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-otp-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york-v4/ui/input-otp\"\n\nconst FormSchema = z.object({\n  pin: z.string().min(6, {\n    message: \"Your one-time password must be 6 characters.\",\n  }),\n})\n\nexport default function InputOTPForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      pin: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"pin\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>One-Time Password</FormLabel>\n              <FormControl>\n                <InputOTP maxLength={6} {...field}>\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormControl>\n              <FormDescription>\n                Please enter the one-time password sent to your phone.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-otp-pattern.json b/apps/www/public/r/styles/new-york-v4/input-otp-pattern.json
new file mode 100644
index 00000000000..ddc9a0f9a6c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-otp-pattern.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-pattern",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-otp-pattern.tsx",
+      "content": "\"use client\"\n\nimport { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york-v4/ui/input-otp\"\n\nexport default function InputOTPPattern() {\n  return (\n    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-otp-separator.json b/apps/www/public/r/styles/new-york-v4/input-otp-separator.json
new file mode 100644
index 00000000000..d9e33e2ee46
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-otp-separator.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-separator",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-otp-separator.tsx",
+      "content": "import React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york-v4/ui/input-otp\"\n\nexport default function InputOTPWithSeparator() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-otp.json b/apps/www/public/r/styles/new-york-v4/input-otp.json
new file mode 100644
index 00000000000..bbb18126b8d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-otp.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp",
+  "type": "registry:ui",
+  "dependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/input-otp.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { MinusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"flex items-center gap-2 has-disabled:opacity-50\",\n        containerClassName\n      )}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-with-button.json b/apps/www/public/r/styles/new-york-v4/input-with-button.json
new file mode 100644
index 00000000000..5a8d97f73a5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-with-button.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-button",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-with-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport default function InputWithButton() {\n  return (\n    <div className=\"flex w-full max-w-sm items-center gap-2\">\n      <Input type=\"email\" placeholder=\"Email\" />\n      <Button type=\"submit\" variant=\"outline\">\n        Subscribe\n      </Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-with-label.json b/apps/www/public/r/styles/new-york-v4/input-with-label.json
new file mode 100644
index 00000000000..84506bb7010
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-with-label.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-label",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-with-label.tsx",
+      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function InputWithLabel() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\n      <Label htmlFor=\"email\">Email</Label>\n      <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input-with-text.json b/apps/www/public/r/styles/new-york-v4/input-with-text.json
new file mode 100644
index 00000000000..e6c1eac116f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-text",
+  "type": "registry:example",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/input-with-text.tsx",
+      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function InputWithText() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\n      <Label htmlFor=\"email-2\">Email</Label>\n      <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n      <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/input.json b/apps/www/public/r/styles/new-york-v4/input.json
new file mode 100644
index 00000000000..0236c3d891b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/input.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/input.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n        \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/label-demo.json b/apps/www/public/r/styles/new-york-v4/label-demo.json
new file mode 100644
index 00000000000..b5f31b1cf73
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/label-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/label.json b/apps/www/public/r/styles/new-york-v4/label.json
new file mode 100644
index 00000000000..e76b83242fb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/label.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/label.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/login-01-dark.png b/apps/www/public/r/styles/new-york-v4/login-01-dark.png
new file mode 100644
index 00000000000..7aa27e6caac
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/login-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/login-01-light.png b/apps/www/public/r/styles/new-york-v4/login-01-light.png
new file mode 100644
index 00000000000..1fc0832f460
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/login-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/login-01.json b/apps/www/public/r/styles/new-york-v4/login-01.json
new file mode 100644
index 00000000000..24e841db344
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/login-01.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-01",
+  "type": "registry:block",
+  "description": "A simple login form.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york-v4/blocks/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": "registry/new-york-v4/blocks/login-01/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle>Login to your account</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-3\">\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-3\">\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              <div className=\"flex flex-col gap-3\">\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>\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"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/login-02-dark.png b/apps/www/public/r/styles/new-york-v4/login-02-dark.png
new file mode 100644
index 00000000000..5a3e0a1d573
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/login-02-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/login-02-light.png b/apps/www/public/r/styles/new-york-v4/login-02-light.png
new file mode 100644
index 00000000000..d4736ed5bf5
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/login-02-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/login-02.json b/apps/www/public/r/styles/new-york-v4/login-02.json
new file mode 100644
index 00000000000..28b23deaa9d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/login-02.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-02",
+  "type": "registry:block",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york-v4/blocks/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=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\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=\"bg-muted relative hidden 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": "registry/new-york-v4/blocks/login-02/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"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-muted-foreground text-sm text-balance\">\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-3\">\n          <Label htmlFor=\"email\">Email</Label>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-3\">\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=\"after:border-border 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\">\n          <span className=\"bg-background text-muted-foreground relative z-10 px-2\">\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"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/login-03-dark.png b/apps/www/public/r/styles/new-york-v4/login-03-dark.png
new file mode 100644
index 00000000000..64681875bb6
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/login-03-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/login-03-light.png b/apps/www/public/r/styles/new-york-v4/login-03-light.png
new file mode 100644
index 00000000000..098107ef5f2
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/login-03-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/login-03.json b/apps/www/public/r/styles/new-york-v4/login-03.json
new file mode 100644
index 00000000000..9ceac8ae326
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/login-03.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-03",
+  "type": "registry:block",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york-v4/blocks/login-03/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 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=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\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": "registry/new-york-v4/blocks/login-03/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"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=\"after:border-border 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\">\n                <span className=\"bg-card text-muted-foreground relative z-10 px-2\">\n                  Or continue with\n                </span>\n              </div>\n              <div className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\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-3\">\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-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4\">\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"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/login-04-dark.png b/apps/www/public/r/styles/new-york-v4/login-04-dark.png
new file mode 100644
index 00000000000..fbe2439d6e0
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/login-04-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/login-04-light.png b/apps/www/public/r/styles/new-york-v4/login-04-light.png
new file mode 100644
index 00000000000..21243713e21
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/login-04-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/login-04.json b/apps/www/public/r/styles/new-york-v4/login-04.json
new file mode 100644
index 00000000000..c84837cbf40
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/login-04.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-04",
+  "type": "registry:block",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york-v4/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/login-04/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <div className=\"grid gap-3\">\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-3\">\n                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 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=\"after:border-border 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\">\n                <span className=\"bg-card text-muted-foreground relative z-10 px-2\">\n                  Or continue with\n                </span>\n              </div>\n              <div className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\" 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                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\" 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                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\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          <div className=\"bg-muted relative hidden md: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        </CardContent>\n      </Card>\n      <div className=\"text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4\">\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"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/login-05-dark.png b/apps/www/public/r/styles/new-york-v4/login-05-dark.png
new file mode 100644
index 00000000000..d25a87a1cc4
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/login-05-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/login-05-light.png b/apps/www/public/r/styles/new-york-v4/login-05-light.png
new file mode 100644
index 00000000000..e69504ca94d
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/login-05-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/login-05.json b/apps/www/public/r/styles/new-york-v4/login-05.json
new file mode 100644
index 00000000000..535f1deb92a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/login-05.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-05",
+  "type": "registry:block",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york-v4/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 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": "registry/new-york-v4/blocks/login-05/components/login-form.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"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 size-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-3\">\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=\"after:border-border 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\">\n            <span className=\"bg-background text-muted-foreground relative z-10 px-2\">\n              Or\n            </span>\n          </div>\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            <Button variant=\"outline\" type=\"button\" 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\" type=\"button\" 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-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4\">\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"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/menubar-demo.json b/apps/www/public/r/styles/new-york-v4/menubar-demo.json
new file mode 100644
index 00000000000..f50c19c843b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/menubar-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "menubar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/menubar-demo.tsx",
+      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/new-york-v4/ui/menubar\"\n\nexport default function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/menubar.json b/apps/www/public/r/styles/new-york-v4/menubar.json
new file mode 100644
index 00000000000..0b31aae494f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/menubar.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-menubar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/menubar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/mode-toggle.json b/apps/www/public/r/styles/new-york-v4/mode-toggle.json
new file mode 100644
index 00000000000..00c5a512cf1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/mode-toggle.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mode-toggle",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n  const { setTheme } = useTheme()\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"icon\">\n          <Sun className=\"h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90\" />\n          <Moon className=\"absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0\" />\n          <span className=\"sr-only\">Toggle theme</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n          Light\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n          Dark\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n          System\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/navigation-menu-demo.json b/apps/www/public/r/styles/new-york-v4/navigation-menu-demo.json
new file mode 100644
index 00000000000..1a20c52eeb3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/navigation-menu-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport { CircleCheckIcon, CircleHelpIcon, CircleIcon } from \"lucide-react\"\n\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/new-york-v4/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuDemo() {\n  return (\n    <NavigationMenu viewport={false}>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Home</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <div className=\"mt-4 mb-2 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-muted-foreground text-sm leading-tight\">\n                      Beautifully designed components built with Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>\n            <Link href=\"/docs\">Docs</Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>List</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[300px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Components</div>\n                    <div className=\"text-muted-foreground\">\n                      Browse all components in the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Documentation</div>\n                    <div className=\"text-muted-foreground\">\n                      Learn how to use the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Blog</div>\n                    <div className=\"text-muted-foreground\">\n                      Read our latest blog posts.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Simple</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Components</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Documentation</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Blocks</Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleHelpIcon />\n                    Backlog\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleIcon />\n                    To Do\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleCheckIcon />\n                    Done\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"text-sm leading-none font-medium\">{title}</div>\n          <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n            {children}\n          </p>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/navigation-menu.json b/apps/www/public/r/styles/new-york-v4/navigation-menu.json
new file mode 100644
index 00000000000..3305955ec09
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/navigation-menu.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/navigation-menu.tsx",
+      "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/pagination-demo.json b/apps/www/public/r/styles/new-york-v4/pagination-demo.json
new file mode 100644
index 00000000000..e2b954defd1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/pagination-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "pagination"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/pagination-demo.tsx",
+      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/new-york-v4/ui/pagination\"\n\nexport default function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/pagination.json b/apps/www/public/r/styles/new-york-v4/pagination.json
new file mode 100644
index 00000000000..18d91f44431
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/pagination.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination",
+  "type": "registry:ui",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/pagination.tsx",
+      "content": "import * as React from \"react\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  MoreHorizontalIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">Previous</span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/popover-demo.json b/apps/www/public/r/styles/new-york-v4/popover-demo.json
new file mode 100644
index 00000000000..3dbeb5ac783
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/popover-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/popover-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"leading-none font-medium\">Dimensions</h4>\n            <p className=\"text-muted-foreground text-sm\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/popover.json b/apps/www/public/r/styles/new-york-v4/popover.json
new file mode 100644
index 00000000000..b56fa05252e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/popover.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-popover"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/products-01.json b/apps/www/public/r/styles/new-york-v4/products-01.json
new file mode 100644
index 00000000000..827f9273a21
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/products-01.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "products-01",
+  "type": "registry:block",
+  "description": "A table of products",
+  "registryDependencies": [
+    "checkbox",
+    "badge",
+    "button",
+    "dropdown-menu",
+    "pagination",
+    "table",
+    "tabs",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/products-01/page.tsx",
+      "content": "import { ProductsTable } from \"@/registry/new-york-v4/blocks/products-01/components/products-table\"\n\n// Load from database.\nconst products = [\n  {\n    id: \"1\",\n    name: \"BJÖRKSNÄS Dining Table\",\n    price: 599.99,\n    stock: 12,\n    dateAdded: \"2023-06-15\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"2\",\n    name: \"POÄNG Armchair\",\n    price: 249.99,\n    stock: 28,\n    dateAdded: \"2023-07-22\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"3\",\n    name: \"MALM Bed Frame\",\n    price: 399.99,\n    stock: 15,\n    dateAdded: \"2023-08-05\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"4\",\n    name: \"KALLAX Shelf Unit\",\n    price: 179.99,\n    stock: 32,\n    dateAdded: \"2023-09-12\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"5\",\n    name: \"STOCKHOLM Rug\",\n    price: 299.99,\n    stock: 8,\n    dateAdded: \"2023-10-18\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"6\",\n    name: \"KIVIK Sofa\",\n    price: 899.99,\n    stock: 6,\n    dateAdded: \"2023-11-02\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"7\",\n    name: \"LISABO Coffee Table\",\n    price: 149.99,\n    stock: 22,\n    dateAdded: \"2023-11-29\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"8\",\n    name: \"HEMNES Bookcase\",\n    price: 249.99,\n    stock: 17,\n    dateAdded: \"2023-12-10\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"9\",\n    name: \"EKEDALEN Dining Chairs (Set of 2)\",\n    price: 199.99,\n    stock: 14,\n    dateAdded: \"2024-01-05\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"10\",\n    name: \"FRIHETEN Sleeper Sofa\",\n    price: 799.99,\n    stock: 9,\n    dateAdded: \"2024-01-18\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"11\",\n    name: \"NORDEN Extendable Table\",\n    price: 499.99,\n    stock: 11,\n    dateAdded: \"2024-01-25\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"12\",\n    name: \"BILLY Bookcase\",\n    price: 129.99,\n    stock: 42,\n    dateAdded: \"2024-02-03\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"13\",\n    name: \"STRANDMON Wing Chair\",\n    price: 349.99,\n    stock: 16,\n    dateAdded: \"2024-02-12\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"14\",\n    name: \"MALM Dresser\",\n    price: 279.99,\n    stock: 19,\n    dateAdded: \"2024-02-27\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"15\",\n    name: \"BRIMNES TV Unit\",\n    price: 149.99,\n    stock: 23,\n    dateAdded: \"2024-03-08\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"16\",\n    name: \"SÖDERHAMN Sectional Sofa\",\n    price: 1299.99,\n    stock: 5,\n    dateAdded: \"2024-03-15\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"17\",\n    name: \"BEKANT Desk\",\n    price: 249.99,\n    stock: 18,\n    dateAdded: \"2024-03-22\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"18\",\n    name: \"IVAR Storage System\",\n    price: 199.99,\n    stock: 14,\n    dateAdded: \"2024-04-01\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"19\",\n    name: \"RIBBA Picture Frame Set\",\n    price: 49.99,\n    stock: 36,\n    dateAdded: \"2024-04-09\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"20\",\n    name: \"EKTORP Loveseat\",\n    price: 499.99,\n    stock: 12,\n    dateAdded: \"2024-04-15\",\n    status: \"In Stock\",\n  },\n]\n\nexport default function ProductsPage() {\n  return (\n    <div className=\"flex h-full flex-1 flex-col gap-4 rounded-xl p-4\">\n      <ProductsTable products={products} />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/products/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/products-01/components/products-table.tsx",
+      "content": "import {\n  ArrowUpDownIcon,\n  EllipsisVerticalIcon,\n  ListFilterIcon,\n  PlusIcon,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/new-york-v4/ui/pagination\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/new-york-v4/ui/tabs\"\n\nexport function ProductsTable({\n  products,\n}: {\n  products: {\n    id: string\n    name: string\n    price: number\n    stock: number\n    dateAdded: string\n    status: string\n  }[]\n}) {\n  return (\n    <div className=\"flex w-full flex-col gap-4\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <Tabs defaultValue=\"all\">\n          <TabsList>\n            <TabsTrigger value=\"all\">All Products</TabsTrigger>\n            <TabsTrigger value=\"in-stock\">In Stock</TabsTrigger>\n            <TabsTrigger value=\"low-stock\">Low Stock</TabsTrigger>\n            <TabsTrigger value=\"archived\">Archived</TabsTrigger>\n            <TabsTrigger value=\"add-product\" asChild>\n              <button>\n                <PlusIcon />\n              </button>\n            </TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <div className=\"flex items-center gap-2 **:data-[slot=button]:size-8 **:data-[slot=select-trigger]:h-8\">\n          <Select defaultValue=\"all\">\n            <SelectTrigger>\n              <span className=\"text-muted-foreground text-sm\">Category:</span>\n              <SelectValue placeholder=\"Select a product\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"in-stock\">In Stock</SelectItem>\n              <SelectItem value=\"low-stock\">Low Stock</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectContent>\n          </Select>\n          <Select defaultValue=\"all\">\n            <SelectTrigger>\n              <span className=\"text-muted-foreground text-sm\">Price:</span>\n              <SelectValue placeholder=\"Select a product\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">$100-$200</SelectItem>\n              <SelectItem value=\"in-stock\">$200-$300</SelectItem>\n              <SelectItem value=\"low-stock\">$300-$400</SelectItem>\n              <SelectItem value=\"archived\">$400-$500</SelectItem>\n            </SelectContent>\n          </Select>\n          <Select defaultValue=\"all\">\n            <SelectTrigger>\n              <span className=\"text-muted-foreground text-sm\">Status:</span>\n              <SelectValue placeholder=\"Select a product\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">In Stock</SelectItem>\n              <SelectItem value=\"in-stock\">Low Stock</SelectItem>\n              <SelectItem value=\"low-stock\">Archived</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"icon\">\n            <ListFilterIcon />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <ArrowUpDownIcon />\n          </Button>\n        </div>\n      </div>\n      <div className=\"rounded-lg\">\n        <Table>\n          <TableHeader className=\"bg-muted/50\">\n            <TableRow className=\"!border-0\">\n              <TableHead className=\"w-12 rounded-l-lg px-4\">\n                <Checkbox />\n              </TableHead>\n              <TableHead>Product</TableHead>\n              <TableHead className=\"text-right\">Price</TableHead>\n              <TableHead className=\"text-right\">Stock</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead>Date Added</TableHead>\n              <TableHead className=\"rounded-r-lg\" />\n            </TableRow>\n          </TableHeader>\n          <TableBody className=\"**:data-[slot=table-cell]:py-2.5\">\n            {products.map((product) => (\n              <TableRow key={product.id}>\n                <TableCell className=\"px-4\">\n                  <Checkbox />\n                </TableCell>\n                <TableCell className=\"font-medium\">{product.name}</TableCell>\n                <TableCell className=\"text-right\">\n                  ${product.price.toFixed(2)}\n                </TableCell>\n                <TableCell className=\"text-right\">{product.stock}</TableCell>\n                <TableCell>\n                  <Badge\n                    variant=\"secondary\"\n                    className={\n                      product.status === \"Low Stock\"\n                        ? \"border-orange-500 bg-transparent text-orange-500 dark:border-orange-500 dark:bg-transparent dark:text-orange-500\"\n                        : \"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100\"\n                    }\n                  >\n                    {product.status}\n                  </Badge>\n                </TableCell>\n                <TableCell>\n                  {new Date(product.dateAdded).toLocaleDateString(\"en-US\", {\n                    month: \"long\",\n                    day: \"numeric\",\n                    year: \"numeric\",\n                  })}\n                </TableCell>\n                <TableCell>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\" className=\"size-6\">\n                        <EllipsisVerticalIcon />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuItem>Edit</DropdownMenuItem>\n                      <DropdownMenuItem variant=\"destructive\">\n                        Delete\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex justify-end\">\n        <Pagination>\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationLink href=\"#\" isActive>\n                2\n              </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext href=\"#\" />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/progress-demo.json b/apps/www/public/r/styles/new-york-v4/progress-demo.json
new file mode 100644
index 00000000000..8bf70ae396d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/progress-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "progress"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/new-york-v4/ui/progress\"\n\nexport default function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/progress.json b/apps/www/public/r/styles/new-york-v4/progress.json
new file mode 100644
index 00000000000..20f1d946c02
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/progress.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-progress"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/progress.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary h-full w-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/radio-group-demo.json b/apps/www/public/r/styles/new-york-v4/radio-group-demo.json
new file mode 100644
index 00000000000..11c0c89259c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/radio-group-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center gap-3\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/radio-group-form.json b/apps/www/public/r/styles/new-york-v4/radio-group-form.json
new file mode 100644
index 00000000000..49171cd1025
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/radio-group-form.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "radio-group",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/radio-group-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\n\nconst FormSchema = z.object({\n  type: z.enum([\"all\", \"mentions\", \"none\"], {\n    required_error: \"You need to select a notification type.\",\n  }),\n})\n\nexport default function RadioGroupForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"type\"\n          render={({ field }) => (\n            <FormItem className=\"space-y-3\">\n              <FormLabel>Notify me about...</FormLabel>\n              <FormControl>\n                <RadioGroup\n                  onValueChange={field.onChange}\n                  defaultValue={field.value}\n                  className=\"flex flex-col\"\n                >\n                  <FormItem className=\"flex items-center gap-3\">\n                    <FormControl>\n                      <RadioGroupItem value=\"all\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      All new messages\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center gap-3\">\n                    <FormControl>\n                      <RadioGroupItem value=\"mentions\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      Direct messages and mentions\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center gap-3\">\n                    <FormControl>\n                      <RadioGroupItem value=\"none\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">Nothing</FormLabel>\n                  </FormItem>\n                </RadioGroup>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/radio-group.json b/apps/www/public/r/styles/new-york-v4/radio-group.json
new file mode 100644
index 00000000000..bcf327f7328
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/radio-group.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-radio-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon className=\"fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/registry.json b/apps/www/public/r/styles/new-york-v4/registry.json
new file mode 100644
index 00000000000..6dce8b7b73c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/registry.json
@@ -0,0 +1,5968 @@
+{
+  "name": "shadcn/ui",
+  "homepage": "https://ui.shadcn.com",
+  "items": [
+    {
+      "name": "index",
+      "type": "registry:style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "devDependencies": [
+        "tw-animate-css"
+      ],
+      "registryDependencies": [
+        "utils"
+      ],
+      "files": [],
+      "cssVars": {}
+    },
+    {
+      "name": "style",
+      "type": "registry:style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "devDependencies": [
+        "tw-animate-css"
+      ],
+      "registryDependencies": [
+        "utils"
+      ],
+      "files": [],
+      "cssVars": {}
+    },
+    {
+      "name": "accordion",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-accordion"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/accordion.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "alert",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/alert.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-alert-dialog"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/alert-dialog.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-aspect-ratio"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/aspect-ratio.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "avatar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/avatar.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "badge",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/badge.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/breadcrumb.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/button.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "calendar",
+      "type": "registry:ui",
+      "dependencies": [
+        "react-day-picker@latest",
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/calendar.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/card.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "carousel",
+      "type": "registry:ui",
+      "dependencies": [
+        "embla-carousel-react"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/carousel.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "chart",
+      "type": "registry:ui",
+      "dependencies": [
+        "recharts@2.15.4",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/chart.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "checkbox",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/checkbox.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "collapsible",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/collapsible.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "command",
+      "type": "registry:ui",
+      "dependencies": [
+        "cmdk"
+      ],
+      "registryDependencies": [
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/command.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "context-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-context-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/context-menu.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "dialog",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/dialog.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "drawer",
+      "type": "registry:ui",
+      "dependencies": [
+        "vaul",
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/drawer.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/dropdown-menu.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "form",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label",
+        "@radix-ui/react-slot",
+        "@hookform/resolvers",
+        "zod",
+        "react-hook-form"
+      ],
+      "registryDependencies": [
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/form.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "hover-card",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-hover-card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/hover-card.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "input",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/input.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "input-otp",
+      "type": "registry:ui",
+      "dependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/input-otp.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/label.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "menubar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-menubar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/menubar.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-navigation-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/navigation-menu.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "pagination",
+      "type": "registry:ui",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/pagination.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "popover",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/popover.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-progress"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/progress.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "radio-group",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/radio-group.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "resizable",
+      "type": "registry:ui",
+      "dependencies": [
+        "react-resizable-panels"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/resizable.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "scroll-area",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/scroll-area.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "select",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/select.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "separator",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/separator.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "sheet",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/sheet.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "sidebar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "separator",
+        "sheet",
+        "tooltip",
+        "input",
+        "use-mobile",
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/sidebar.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "colors": {
+                "sidebar": {
+                  "DEFAULT": "hsl(var(--sidebar-background))",
+                  "foreground": "hsl(var(--sidebar-foreground))",
+                  "primary": "hsl(var(--sidebar-primary))",
+                  "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                  "accent": "hsl(var(--sidebar-accent))",
+                  "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                  "border": "hsl(var(--sidebar-border))",
+                  "ring": "hsl(var(--sidebar-ring))"
+                }
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "sidebar-background": "0 0% 98%",
+          "sidebar-foreground": "240 5.3% 26.1%",
+          "sidebar-primary": "240 5.9% 10%",
+          "sidebar-primary-foreground": "0 0% 98%",
+          "sidebar-accent": "240 4.8% 95.9%",
+          "sidebar-accent-foreground": "240 5.9% 10%",
+          "sidebar-border": "220 13% 91%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        },
+        "dark": {
+          "sidebar-background": "240 5.9% 10%",
+          "sidebar-foreground": "240 4.8% 95.9%",
+          "sidebar-primary": "224.3 76.3% 48%",
+          "sidebar-primary-foreground": "0 0% 100%",
+          "sidebar-accent": "240 3.7% 15.9%",
+          "sidebar-accent-foreground": "240 4.8% 95.9%",
+          "sidebar-border": "240 3.7% 15.9%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        }
+      }
+    },
+    {
+      "name": "skeleton",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/skeleton.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "slider",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slider"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/slider.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "sonner",
+      "type": "registry:ui",
+      "dependencies": [
+        "sonner",
+        "next-themes"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/sonner.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "switch",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/switch.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "table",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/table.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "tabs",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/tabs.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "textarea",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/textarea.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "toggle",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/toggle.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toggle-group"
+      ],
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/toggle-group.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "tooltip",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/ui/tooltip.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "dashboard-01",
+      "type": "registry:block",
+      "description": "A dashboard with sidebar, charts and data table.",
+      "dependencies": [
+        "@dnd-kit/core",
+        "@dnd-kit/modifiers",
+        "@dnd-kit/sortable",
+        "@dnd-kit/utilities",
+        "@tanstack/react-table",
+        "zod",
+        "@tabler/icons-react"
+      ],
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "chart",
+        "card",
+        "select",
+        "tabs",
+        "table",
+        "toggle-group",
+        "badge",
+        "button",
+        "checkbox",
+        "dropdown-menu",
+        "drawer",
+        "input",
+        "avatar",
+        "sheet",
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/data.json",
+          "type": "registry:file",
+          "target": "app/dashboard/data.json"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/dashboard-01/components/site-header.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "1000px"
+      },
+      "categories": [
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-01",
+      "type": "registry:block",
+      "description": "A simple sidebar with navigation grouped by section.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-02",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible sections.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-03",
+      "type": "registry:block",
+      "description": "A sidebar with submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-04",
+      "type": "registry:block",
+      "description": "A floating sidebar with submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-05",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-05/components/search-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-06",
+      "type": "registry:block",
+      "description": "A sidebar with submenus as dropdowns.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-07",
+      "type": "registry:block",
+      "description": "A sidebar that collapses to icons.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-08",
+      "type": "registry:block",
+      "description": "An inset sidebar with secondary navigation.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-09",
+      "type": "registry:block",
+      "description": "Collapsible nested sidebars.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-09/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-09/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-10",
+      "type": "registry:block",
+      "description": "A sidebar in a popover.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-favorites.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-11",
+      "type": "registry:block",
+      "description": "A sidebar with a collapsible file tree.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-11/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-11/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-12",
+      "type": "registry:block",
+      "description": "A sidebar with a calendar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-13",
+      "type": "registry:block",
+      "description": "A sidebar in a dialog.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "button",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-13/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-14",
+      "type": "registry:block",
+      "description": "A sidebar on the right.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-14/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-14/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-15",
+      "type": "registry:block",
+      "description": "A left and right sidebar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-favorites.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-left.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-16",
+      "type": "registry:block",
+      "description": "A sidebar with a sticky site header.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "login-01",
+      "type": "registry:block",
+      "description": "A simple login form.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-01/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-02",
+      "type": "registry:block",
+      "description": "A two column login page with a cover image.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-02/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-03",
+      "type": "registry:block",
+      "description": "A login page with a muted background color.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-03/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-04",
+      "type": "registry:block",
+      "description": "A login page with form and image.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-04/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-05",
+      "type": "registry:block",
+      "description": "A simple email-only login page.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/login-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york-v4/blocks/login-05/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "calendar-01",
+      "type": "registry:block",
+      "description": "A simple calendar.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-01.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-02",
+      "type": "registry:block",
+      "description": "Multiple months with single selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-02.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-03",
+      "type": "registry:block",
+      "description": "Multiple months with multiple selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-03.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-04",
+      "type": "registry:block",
+      "description": "Single month with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-04.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-05",
+      "type": "registry:block",
+      "description": "Multiple months with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-05.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-06",
+      "type": "registry:block",
+      "description": "Range selection with minimum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-06.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-07",
+      "type": "registry:block",
+      "description": "Range selection with minimum and maximum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-07.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-08",
+      "type": "registry:block",
+      "description": "Calendar with disabled days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-08.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-09",
+      "type": "registry:block",
+      "description": "Calendar with disabled weekends",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-09.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-10",
+      "type": "registry:block",
+      "description": "Today button",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-10.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-11",
+      "type": "registry:block",
+      "description": "Start and end of month",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-11.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-12",
+      "type": "registry:block",
+      "description": "Localized calendar",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-12.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-13",
+      "type": "registry:block",
+      "description": "With Month and Year Dropdown",
+      "registryDependencies": [
+        "calendar",
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-13.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-14",
+      "type": "registry:block",
+      "description": "With Booked/Unavailable Days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-14.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-15",
+      "type": "registry:block",
+      "description": "With Week Numbers",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-15.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-16",
+      "type": "registry:block",
+      "description": "With time picker",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-16.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-17",
+      "type": "registry:block",
+      "description": "With time picker inline",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-17.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-18",
+      "type": "registry:block",
+      "description": "Variable size",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-18.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-19",
+      "type": "registry:block",
+      "description": "With presets",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-19.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-20",
+      "type": "registry:block",
+      "description": "With time presets",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-20.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-21",
+      "type": "registry:block",
+      "description": "Custom days and formatters",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-21.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-22",
+      "type": "registry:block",
+      "description": "Date picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-22.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-23",
+      "type": "registry:block",
+      "description": "Date range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-23.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-24",
+      "type": "registry:block",
+      "description": "Date and Time picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-24.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-25",
+      "type": "registry:block",
+      "description": "Date and Time range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-25.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-26",
+      "type": "registry:block",
+      "description": "Date range picker with time",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-26.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-27",
+      "type": "registry:block",
+      "description": "Chart filter",
+      "registryDependencies": [
+        "calendar",
+        "chart",
+        "card",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-27.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-28",
+      "type": "registry:block",
+      "description": "Input with date picker",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-28.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-29",
+      "type": "registry:block",
+      "description": "Natural language date picker",
+      "dependencies": [
+        "chrono-node"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-29.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-30",
+      "type": "registry:block",
+      "description": "With little-date",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-30.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-31",
+      "type": "registry:block",
+      "description": "With event slots",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-31.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "700px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-32",
+      "type": "registry:block",
+      "description": "Date picker in a drawer",
+      "registryDependencies": [
+        "calendar",
+        "button",
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/blocks/calendar-32.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "chart-area-axes",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-axes.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-gradient",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-gradient.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-icons.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-interactive.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-legend.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-linear",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-linear.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-stacked-expand",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-stacked-expand.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-step",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-area-step.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-bar-active",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-active.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-horizontal",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-horizontal.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-interactive.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-mixed",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-mixed.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-multiple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-negative",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-negative.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-bar-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-line-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots-colors",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-dots-colors.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-dots-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-dots.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-interactive.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-linear",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-linear.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-multiple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-step",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-line-step.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-pie-donut-active",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-donut-active.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-donut-text",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-donut-text.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-donut",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-donut.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-interactive.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label-list",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-label-list.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-legend.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-separator-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-separator-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-simple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-simple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-pie-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-radar-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-dots",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-dots.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle-fill",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle-no-lines",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-circle.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-fill",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-fill.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-grid-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-icons.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-legend.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-lines-only",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-lines-only.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-multiple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-radius",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radar-radius.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radial-grid",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-grid.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-label.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-shape",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-shape.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-simple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-simple.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-stacked.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-text",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-radial-text.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-tooltip-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-default.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-indicator-line",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-indicator-line.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-indicator-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-indicator-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-label-none.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-label-custom.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-formatter",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-label-formatter.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-formatter",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-formatter.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-icons.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-advanced",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/charts/chart-tooltip-advanced.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "utils",
+      "type": "registry:lib",
+      "dependencies": [
+        "clsx",
+        "tailwind-merge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/lib/utils.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
+    {
+      "name": "use-mobile",
+      "type": "registry:hook",
+      "files": [
+        {
+          "path": "registry/new-york-v4/hooks/use-mobile.ts",
+          "type": "registry:hook"
+        }
+      ]
+    },
+    {
+      "name": "theme-stone",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.147 0.004 49.25)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.147 0.004 49.25)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.147 0.004 49.25)",
+          "primary": "oklch(0.216 0.006 56.043)",
+          "primary-foreground": "oklch(0.985 0.001 106.423)",
+          "secondary": "oklch(0.97 0.001 106.424)",
+          "secondary-foreground": "oklch(0.216 0.006 56.043)",
+          "muted": "oklch(0.97 0.001 106.424)",
+          "muted-foreground": "oklch(0.553 0.013 58.071)",
+          "accent": "oklch(0.97 0.001 106.424)",
+          "accent-foreground": "oklch(0.216 0.006 56.043)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.923 0.003 48.717)",
+          "input": "oklch(0.923 0.003 48.717)",
+          "ring": "oklch(0.709 0.01 56.259)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0.001 106.423)",
+          "sidebar-foreground": "oklch(0.147 0.004 49.25)",
+          "sidebar-primary": "oklch(0.216 0.006 56.043)",
+          "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-accent": "oklch(0.97 0.001 106.424)",
+          "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)",
+          "sidebar-border": "oklch(0.923 0.003 48.717)",
+          "sidebar-ring": "oklch(0.709 0.01 56.259)"
+        },
+        "dark": {
+          "background": "oklch(0.147 0.004 49.25)",
+          "foreground": "oklch(0.985 0.001 106.423)",
+          "card": "oklch(0.216 0.006 56.043)",
+          "card-foreground": "oklch(0.985 0.001 106.423)",
+          "popover": "oklch(0.216 0.006 56.043)",
+          "popover-foreground": "oklch(0.985 0.001 106.423)",
+          "primary": "oklch(0.923 0.003 48.717)",
+          "primary-foreground": "oklch(0.216 0.006 56.043)",
+          "secondary": "oklch(0.268 0.007 34.298)",
+          "secondary-foreground": "oklch(0.985 0.001 106.423)",
+          "muted": "oklch(0.268 0.007 34.298)",
+          "muted-foreground": "oklch(0.709 0.01 56.259)",
+          "accent": "oklch(0.268 0.007 34.298)",
+          "accent-foreground": "oklch(0.985 0.001 106.423)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.553 0.013 58.071)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.216 0.006 56.043)",
+          "sidebar-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-accent": "oklch(0.268 0.007 34.298)",
+          "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.553 0.013 58.071)"
+        }
+      }
+    },
+    {
+      "name": "theme-zinc",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.141 0.005 285.823)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.141 0.005 285.823)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.141 0.005 285.823)",
+          "primary": "oklch(0.21 0.006 285.885)",
+          "primary-foreground": "oklch(0.985 0 0)",
+          "secondary": "oklch(0.967 0.001 286.375)",
+          "secondary-foreground": "oklch(0.21 0.006 285.885)",
+          "muted": "oklch(0.967 0.001 286.375)",
+          "muted-foreground": "oklch(0.552 0.016 285.938)",
+          "accent": "oklch(0.967 0.001 286.375)",
+          "accent-foreground": "oklch(0.21 0.006 285.885)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.92 0.004 286.32)",
+          "input": "oklch(0.92 0.004 286.32)",
+          "ring": "oklch(0.705 0.015 286.067)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0 0)",
+          "sidebar-foreground": "oklch(0.141 0.005 285.823)",
+          "sidebar-primary": "oklch(0.21 0.006 285.885)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.967 0.001 286.375)",
+          "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+          "sidebar-border": "oklch(0.92 0.004 286.32)",
+          "sidebar-ring": "oklch(0.705 0.015 286.067)"
+        },
+        "dark": {
+          "background": "oklch(0.141 0.005 285.823)",
+          "foreground": "oklch(0.985 0 0)",
+          "card": "oklch(0.21 0.006 285.885)",
+          "card-foreground": "oklch(0.985 0 0)",
+          "popover": "oklch(0.21 0.006 285.885)",
+          "popover-foreground": "oklch(0.985 0 0)",
+          "primary": "oklch(0.92 0.004 286.32)",
+          "primary-foreground": "oklch(0.21 0.006 285.885)",
+          "secondary": "oklch(0.274 0.006 286.033)",
+          "secondary-foreground": "oklch(0.985 0 0)",
+          "muted": "oklch(0.274 0.006 286.033)",
+          "muted-foreground": "oklch(0.705 0.015 286.067)",
+          "accent": "oklch(0.274 0.006 286.033)",
+          "accent-foreground": "oklch(0.985 0 0)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.552 0.016 285.938)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.21 0.006 285.885)",
+          "sidebar-foreground": "oklch(0.985 0 0)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.274 0.006 286.033)",
+          "sidebar-accent-foreground": "oklch(0.985 0 0)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.552 0.016 285.938)"
+        }
+      }
+    },
+    {
+      "name": "theme-neutral",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.145 0 0)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.145 0 0)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.145 0 0)",
+          "primary": "oklch(0.205 0 0)",
+          "primary-foreground": "oklch(0.985 0 0)",
+          "secondary": "oklch(0.97 0 0)",
+          "secondary-foreground": "oklch(0.205 0 0)",
+          "muted": "oklch(0.97 0 0)",
+          "muted-foreground": "oklch(0.556 0 0)",
+          "accent": "oklch(0.97 0 0)",
+          "accent-foreground": "oklch(0.205 0 0)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.922 0 0)",
+          "input": "oklch(0.922 0 0)",
+          "ring": "oklch(0.708 0 0)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0 0)",
+          "sidebar-foreground": "oklch(0.145 0 0)",
+          "sidebar-primary": "oklch(0.205 0 0)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.97 0 0)",
+          "sidebar-accent-foreground": "oklch(0.205 0 0)",
+          "sidebar-border": "oklch(0.922 0 0)",
+          "sidebar-ring": "oklch(0.708 0 0)"
+        },
+        "dark": {
+          "background": "oklch(0.145 0 0)",
+          "foreground": "oklch(0.985 0 0)",
+          "card": "oklch(0.205 0 0)",
+          "card-foreground": "oklch(0.985 0 0)",
+          "popover": "oklch(0.205 0 0)",
+          "popover-foreground": "oklch(0.985 0 0)",
+          "primary": "oklch(0.922 0 0)",
+          "primary-foreground": "oklch(0.205 0 0)",
+          "secondary": "oklch(0.269 0 0)",
+          "secondary-foreground": "oklch(0.985 0 0)",
+          "muted": "oklch(0.269 0 0)",
+          "muted-foreground": "oklch(0.708 0 0)",
+          "accent": "oklch(0.269 0 0)",
+          "accent-foreground": "oklch(0.985 0 0)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.556 0 0)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.205 0 0)",
+          "sidebar-foreground": "oklch(0.985 0 0)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0 0)",
+          "sidebar-accent": "oklch(0.269 0 0)",
+          "sidebar-accent-foreground": "oklch(0.985 0 0)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.556 0 0)"
+        }
+      }
+    },
+    {
+      "name": "theme-gray",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.13 0.028 261.692)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.13 0.028 261.692)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.13 0.028 261.692)",
+          "primary": "oklch(0.21 0.034 264.665)",
+          "primary-foreground": "oklch(0.985 0.002 247.839)",
+          "secondary": "oklch(0.967 0.003 264.542)",
+          "secondary-foreground": "oklch(0.21 0.034 264.665)",
+          "muted": "oklch(0.967 0.003 264.542)",
+          "muted-foreground": "oklch(0.551 0.027 264.364)",
+          "accent": "oklch(0.967 0.003 264.542)",
+          "accent-foreground": "oklch(0.21 0.034 264.665)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.928 0.006 264.531)",
+          "input": "oklch(0.928 0.006 264.531)",
+          "ring": "oklch(0.707 0.022 261.325)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.985 0.002 247.839)",
+          "sidebar-foreground": "oklch(0.13 0.028 261.692)",
+          "sidebar-primary": "oklch(0.21 0.034 264.665)",
+          "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-accent": "oklch(0.967 0.003 264.542)",
+          "sidebar-accent-foreground": "oklch(0.21 0.034 264.665)",
+          "sidebar-border": "oklch(0.928 0.006 264.531)",
+          "sidebar-ring": "oklch(0.707 0.022 261.325)"
+        },
+        "dark": {
+          "background": "oklch(0.13 0.028 261.692)",
+          "foreground": "oklch(0.985 0.002 247.839)",
+          "card": "oklch(0.21 0.034 264.665)",
+          "card-foreground": "oklch(0.985 0.002 247.839)",
+          "popover": "oklch(0.21 0.034 264.665)",
+          "popover-foreground": "oklch(0.985 0.002 247.839)",
+          "primary": "oklch(0.928 0.006 264.531)",
+          "primary-foreground": "oklch(0.21 0.034 264.665)",
+          "secondary": "oklch(0.278 0.033 256.848)",
+          "secondary-foreground": "oklch(0.985 0.002 247.839)",
+          "muted": "oklch(0.278 0.033 256.848)",
+          "muted-foreground": "oklch(0.707 0.022 261.325)",
+          "accent": "oklch(0.278 0.033 256.848)",
+          "accent-foreground": "oklch(0.985 0.002 247.839)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.551 0.027 264.364)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.21 0.034 264.665)",
+          "sidebar-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-accent": "oklch(0.278 0.033 256.848)",
+          "sidebar-accent-foreground": "oklch(0.985 0.002 247.839)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.551 0.027 264.364)"
+        }
+      }
+    },
+    {
+      "name": "theme-slate",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "oklch(1 0 0)",
+          "foreground": "oklch(0.129 0.042 264.695)",
+          "card": "oklch(1 0 0)",
+          "card-foreground": "oklch(0.129 0.042 264.695)",
+          "popover": "oklch(1 0 0)",
+          "popover-foreground": "oklch(0.129 0.042 264.695)",
+          "primary": "oklch(0.208 0.042 265.755)",
+          "primary-foreground": "oklch(0.984 0.003 247.858)",
+          "secondary": "oklch(0.968 0.007 247.896)",
+          "secondary-foreground": "oklch(0.208 0.042 265.755)",
+          "muted": "oklch(0.968 0.007 247.896)",
+          "muted-foreground": "oklch(0.554 0.046 257.417)",
+          "accent": "oklch(0.968 0.007 247.896)",
+          "accent-foreground": "oklch(0.208 0.042 265.755)",
+          "destructive": "oklch(0.577 0.245 27.325)",
+          "border": "oklch(0.929 0.013 255.508)",
+          "input": "oklch(0.929 0.013 255.508)",
+          "ring": "oklch(0.704 0.04 256.788)",
+          "chart-1": "oklch(0.646 0.222 41.116)",
+          "chart-2": "oklch(0.6 0.118 184.704)",
+          "chart-3": "oklch(0.398 0.07 227.392)",
+          "chart-4": "oklch(0.828 0.189 84.429)",
+          "chart-5": "oklch(0.769 0.188 70.08)",
+          "radius": "0.625rem",
+          "sidebar": "oklch(0.984 0.003 247.858)",
+          "sidebar-foreground": "oklch(0.129 0.042 264.695)",
+          "sidebar-primary": "oklch(0.208 0.042 265.755)",
+          "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-accent": "oklch(0.968 0.007 247.896)",
+          "sidebar-accent-foreground": "oklch(0.208 0.042 265.755)",
+          "sidebar-border": "oklch(0.929 0.013 255.508)",
+          "sidebar-ring": "oklch(0.704 0.04 256.788)"
+        },
+        "dark": {
+          "background": "oklch(0.129 0.042 264.695)",
+          "foreground": "oklch(0.984 0.003 247.858)",
+          "card": "oklch(0.208 0.042 265.755)",
+          "card-foreground": "oklch(0.984 0.003 247.858)",
+          "popover": "oklch(0.208 0.042 265.755)",
+          "popover-foreground": "oklch(0.984 0.003 247.858)",
+          "primary": "oklch(0.929 0.013 255.508)",
+          "primary-foreground": "oklch(0.208 0.042 265.755)",
+          "secondary": "oklch(0.279 0.041 260.031)",
+          "secondary-foreground": "oklch(0.984 0.003 247.858)",
+          "muted": "oklch(0.279 0.041 260.031)",
+          "muted-foreground": "oklch(0.704 0.04 256.788)",
+          "accent": "oklch(0.279 0.041 260.031)",
+          "accent-foreground": "oklch(0.984 0.003 247.858)",
+          "destructive": "oklch(0.704 0.191 22.216)",
+          "border": "oklch(1 0 0 / 10%)",
+          "input": "oklch(1 0 0 / 15%)",
+          "ring": "oklch(0.551 0.027 264.364)",
+          "chart-1": "oklch(0.488 0.243 264.376)",
+          "chart-2": "oklch(0.696 0.17 162.48)",
+          "chart-3": "oklch(0.769 0.188 70.08)",
+          "chart-4": "oklch(0.627 0.265 303.9)",
+          "chart-5": "oklch(0.645 0.246 16.439)",
+          "sidebar": "oklch(0.208 0.042 265.755)",
+          "sidebar-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-primary": "oklch(0.488 0.243 264.376)",
+          "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-accent": "oklch(0.279 0.041 260.031)",
+          "sidebar-accent-foreground": "oklch(0.984 0.003 247.858)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.551 0.027 264.364)"
+        }
+      }
+    },
+    {
+      "name": "accordion-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "accordion"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/accordion-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "alert-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/alert-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "alert-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/alert-destructive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert-dialog",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/alert-dialog-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "aspect-ratio"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/aspect-ratio-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "avatar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/avatar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-destructive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "badge-secondary",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/badge-secondary.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-separator",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-separator.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-dropdown",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-dropdown.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-ellipsis",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-ellipsis.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-link",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-link.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-responsive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/breadcrumb-responsive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-secondary",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-secondary.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-destructive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-ghost",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-ghost.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-link",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-link.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-with-icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-with-icon.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-loading",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-loading.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-icon.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "button-as-child",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/button-as-child.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "calendar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/calendar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "calendar-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "calendar",
+        "form",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/calendar-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "card-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "card",
+        "button",
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/card-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "card-with-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/card-with-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-size",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-size.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-spacing",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-spacing.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-orientation",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-orientation.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-api",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-api.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "carousel-plugin",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/carousel-plugin.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-multiple",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-form-multiple.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-single",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-form-single.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "checkbox-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/checkbox-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "collapsible-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/collapsible-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-dropdown-menu",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "dropdown-menu",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-dropdown-menu.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-popover",
+      "type": "registry:example",
+      "registryDependencies": [
+        "combobox",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-popover.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "combobox-responsive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "combobox",
+        "popover",
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/combobox-responsive.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "command-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/command-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "command-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/command-dialog.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "context-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "context-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/context-menu-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "data-table-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "data-table"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/data-table-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-demo",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-form",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "form",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-presets",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-with-presets.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-range",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/date-picker-with-range.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dialog-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dialog-close-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dialog",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dialog-close-button.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "drawer-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/drawer-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "drawer-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "drawer",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/drawer-dialog.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-checkboxes",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-checkboxes.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-radio-group",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/dropdown-menu-radio-group.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "hover-card-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "hover-card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/hover-card-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-file",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-file.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-with-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-with-button.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-with-label",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-with-label.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-pattern",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-pattern.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-separator",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-separator.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-controlled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-controlled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "input-otp-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/input-otp-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "label-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/label-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "menubar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "menubar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/menubar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "navigation-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/navigation-menu-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "pagination-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "pagination"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/pagination-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "popover-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/popover-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "progress-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "progress"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/progress-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "radio-group-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/radio-group-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "radio-group-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "radio-group",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/radio-group-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo-with-handle",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-demo-with-handle.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-vertical",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-vertical.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "resizable-handle",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/resizable-handle.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/scroll-area-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-horizontal-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "select-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/select-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "select-scrollable",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/select-scrollable.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "select-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/select-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "separator-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/separator-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "sheet-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sheet"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/sheet-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "sheet-side",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sheet"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/sheet-side.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "skeleton-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/skeleton-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "skeleton-card",
+      "type": "registry:example",
+      "registryDependencies": [
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/skeleton-card.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "slider-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "slider"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/slider-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "sonner-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/sonner-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "switch-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/switch-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "switch-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "switch",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/switch-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "table-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "table"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/table-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "tabs-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/tabs-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-form.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-with-button.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-label",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-with-label.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/textarea-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-lg",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-lg.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-sm",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-sm.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-single",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-group-single.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-lg",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-lg.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-outline.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-sm",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-sm.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "toggle-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/toggle-with-text.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "tooltip-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/tooltip-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-blockquote",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-blockquote.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h1",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h1.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h2",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h2.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h3",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h3.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-h4",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-h4.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-inline-code",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-inline-code.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-large",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-large.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-lead",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-lead.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-list",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-list.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-muted",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-muted.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-p",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-p.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-small",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-small.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "typography-table",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/typography-table.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "mode-toggle",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/mode-toggle.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-grid",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-grid.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-axis",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-axis.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-tooltip",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-tooltip.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-legend",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-bar-demo-legend.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "chart-tooltip-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/chart-tooltip-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "calendar-hijri",
+      "type": "registry:example",
+      "description": "A Persian calendar.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york-v4/examples/calendar-hijri.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "sidebar-demo",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-demo.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-header",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-header.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-footer",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-footer.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-group.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-group-collapsible.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-group-action.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-action.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-sub",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-sub.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-collapsible.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-badge",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-menu-badge.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-rsc",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-rsc.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sidebar-controlled",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york-v4/internal/sidebar-controlled.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/resizable-demo-with-handle.json b/apps/www/public/r/styles/new-york-v4/resizable-demo-with-handle.json
new file mode 100644
index 00000000000..5a98195c89b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/resizable-demo-with-handle.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo-with-handle",
+  "type": "registry:example",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/resizable-demo-with-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle withHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/resizable-demo.json b/apps/www/public/r/styles/new-york-v4/resizable-demo.json
new file mode 100644
index 00000000000..6b72a52f793
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/resizable-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/resizable-demo.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/resizable-handle.json b/apps/www/public/r/styles/new-york-v4/resizable-handle.json
new file mode 100644
index 00000000000..7932b90e1b9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/resizable-handle.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-handle",
+  "type": "registry:example",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/resizable-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/resizable-vertical.json b/apps/www/public/r/styles/new-york-v4/resizable-vertical.json
new file mode 100644
index 00000000000..9e543d0b32e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/resizable-vertical.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-vertical",
+  "type": "registry:example",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/resizable-vertical.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"vertical\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Header</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/resizable.json b/apps/www/public/r/styles/new-york-v4/resizable.json
new file mode 100644
index 00000000000..2a878090bee
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/resizable.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable",
+  "type": "registry:ui",
+  "dependencies": [
+    "react-resizable-panels"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/resizable.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/scroll-area-demo.json b/apps/www/public/r/styles/new-york-v4/scroll-area-demo.json
new file mode 100644
index 00000000000..12407200edf
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/scroll-area-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/new-york-v4/ui/scroll-area\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport default function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n        {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/scroll-area-horizontal-demo.json b/apps/www/public/r/styles/new-york-v4/scroll-area-horizontal-demo.json
new file mode 100644
index 00000000000..4d81c2090b7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/scroll-area-horizontal-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-horizontal-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { ScrollArea, ScrollBar } from \"@/registry/new-york-v4/ui/scroll-area\"\n\nexport interface Artwork {\n  artist: string\n  art: string\n}\n\nexport const works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n  return (\n    <ScrollArea className=\"w-96 rounded-md border whitespace-nowrap\">\n      <div className=\"flex w-max space-x-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <Image\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n              Photo by{\" \"}\n              <span className=\"text-foreground font-semibold\">\n                {artwork.artist}\n              </span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/scroll-area.json b/apps/www/public/r/styles/new-york-v4/scroll-area.json
new file mode 100644
index 00000000000..15e1d8dc524
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/scroll-area.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-scroll-area"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/scroll-area.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none\",\n        orientation === \"vertical\" &&\n          \"h-full w-2.5 border-l border-l-transparent\",\n        orientation === \"horizontal\" &&\n          \"h-2.5 flex-col border-t border-t-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/select-demo.json b/apps/www/public/r/styles/new-york-v4/select-demo.json
new file mode 100644
index 00000000000..6daf5ebb1e3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/select-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/select-form.json b/apps/www/public/r/styles/new-york-v4/select-form.json
new file mode 100644
index 00000000000..7853e03aac5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/select-form.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/select-form.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst FormSchema = z.object({\n  email: z\n    .string({\n      required_error: \"Please select an email to display.\",\n    })\n    .email(),\n})\n\nexport default function SelectForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <FormControl>\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a verified email to display\" />\n                  </SelectTrigger>\n                </FormControl>\n                <SelectContent>\n                  <SelectItem value=\"m@example.com\">m@example.com</SelectItem>\n                  <SelectItem value=\"m@google.com\">m@google.com</SelectItem>\n                  <SelectItem value=\"m@support.com\">m@support.com</SelectItem>\n                </SelectContent>\n              </Select>\n              <FormDescription>\n                You can manage email addresses in your{\" \"}\n                <Link href=\"/examples/forms\">email settings</Link>.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/select-scrollable.json b/apps/www/public/r/styles/new-york-v4/select-scrollable.json
new file mode 100644
index 00000000000..ca789c68dda
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/select-scrollable.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-scrollable",
+  "type": "registry:example",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/select-scrollable.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport default function SelectScrollable() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[280px]\">\n        <SelectValue placeholder=\"Select a timezone\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>North America</SelectLabel>\n          <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n          <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n          <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n          <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n          <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n          <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Europe & Africa</SelectLabel>\n          <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n          <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n          <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n          <SelectItem value=\"west\">\n            Western European Summer Time (WEST)\n          </SelectItem>\n          <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n          <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Asia</SelectLabel>\n          <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n          <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n          <SelectItem value=\"cst_china\">China Standard Time (CST)</SelectItem>\n          <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n          <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n          <SelectItem value=\"ist_indonesia\">\n            Indonesia Central Standard Time (WITA)\n          </SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Australia & Pacific</SelectLabel>\n          <SelectItem value=\"awst\">\n            Australian Western Standard Time (AWST)\n          </SelectItem>\n          <SelectItem value=\"acst\">\n            Australian Central Standard Time (ACST)\n          </SelectItem>\n          <SelectItem value=\"aest\">\n            Australian Eastern Standard Time (AEST)\n          </SelectItem>\n          <SelectItem value=\"nzst\">New Zealand Standard Time (NZST)</SelectItem>\n          <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>South America</SelectLabel>\n          <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n          <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n          <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n          <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/select.json b/apps/www/public/r/styles/new-york-v4/select.json
new file mode 100644
index 00000000000..61fe928daad
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/select.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-select"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/select.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/separator-demo.json b/apps/www/public/r/styles/new-york-v4/separator-demo.json
new file mode 100644
index 00000000000..46d602553a3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/separator-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/separator-demo.tsx",
+      "content": "import { Separator } from \"@/registry/new-york-v4/ui/separator\"\n\nexport default function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm leading-none font-medium\">Radix Primitives</h4>\n        <p className=\"text-muted-foreground text-sm\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/separator.json b/apps/www/public/r/styles/new-york-v4/separator.json
new file mode 100644
index 00000000000..142446b9d0e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/separator.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-separator"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/separator.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sheet-demo.json b/apps/www/public/r/styles/new-york-v4/sheet-demo.json
new file mode 100644
index 00000000000..197f9c2a78c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sheet-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/sheet-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york-v4/ui/sheet\"\n\nexport default function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid flex-1 auto-rows-min gap-6 px-4\">\n          <div className=\"grid gap-3\">\n            <Label htmlFor=\"sheet-demo-name\">Name</Label>\n            <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n          </div>\n          <div className=\"grid gap-3\">\n            <Label htmlFor=\"sheet-demo-username\">Username</Label>\n            <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <Button type=\"submit\">Save changes</Button>\n          <SheetClose asChild>\n            <Button variant=\"outline\">Close</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sheet-side.json b/apps/www/public/r/styles/new-york-v4/sheet-side.json
new file mode 100644
index 00000000000..54ccafc68cc
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sheet-side.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-side",
+  "type": "registry:example",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/sheet-side.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york-v4/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger asChild>\n            <Button variant=\"outline\">{side}</Button>\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you're done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose asChild>\n                <Button type=\"submit\">Save changes</Button>\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sheet.json b/apps/www/public/r/styles/new-york-v4/sheet.json
new file mode 100644
index 00000000000..f65d26a3058
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sheet.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/sheet.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n          <XIcon className=\"size-4\" />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-01-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-01-dark.png
new file mode 100644
index 00000000000..5100697781c
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-01-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-01-light.png
new file mode 100644
index 00000000000..c5ff78ae9d3
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-01.json b/apps/www/public/r/styles/new-york-v4/sidebar-01.json
new file mode 100644
index 00000000000..aac96cb9529
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-01.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-01",
+  "type": "registry:block",
+  "description": "A simple sidebar with navigation grouped by section.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-01/components/version-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        {/* We create a SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <SidebarGroup key={item.title}>\n            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {item.items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild isActive={item.isActive}>\n                      <a href={item.url}>{item.title}</a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-01/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-02-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-02-dark.png
new file mode 100644
index 00000000000..1372d0985bd
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-02-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-02-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-02-light.png
new file mode 100644
index 00000000000..7d6896c28cc
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-02-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-02.json b/apps/www/public/r/styles/new-york-v4/sidebar-02.json
new file mode 100644
index 00000000000..05dbf8bde7b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-02.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-02",
+  "type": "registry:block",
+  "description": "A sidebar with collapsible sections.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-02/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-03-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-03-dark.png
new file mode 100644
index 00000000000..b76119dcc5a
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-03-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-03-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-03-light.png
new file mode 100644
index 00000000000..9f90424f7d9
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-03-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-03.json b/apps/www/public/r/styles/new-york-v4/sidebar-03.json
new file mode 100644
index 00000000000..516dd720a56
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-03.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-03",
+  "type": "registry:block",
+  "description": "A sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-04-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-04-dark.png
new file mode 100644
index 00000000000..a4eab4ac94a
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-04-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-04-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-04-light.png
new file mode 100644
index 00000000000..34d86af306b
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-04-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-04.json b/apps/www/public/r/styles/new-york-v4/sidebar-04.json
new file mode 100644
index 00000000000..ec4e3876bb8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-04.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-04",
+  "type": "registry:block",
+  "description": "A floating sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-05-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-05-dark.png
new file mode 100644
index 00000000000..3a22cc74204
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-05-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-05-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-05-light.png
new file mode 100644
index 00000000000..2a5b9be5f31
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-05-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-05.json b/apps/www/public/r/styles/new-york-v4/sidebar-05.json
new file mode 100644
index 00000000000..5d8620f9882
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-05.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-05",
+  "type": "registry:block",
+  "description": "A sidebar with collapsible submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                      <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-05/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-06-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-06-dark.png
new file mode 100644
index 00000000000..df9e5c0e4d1
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-06-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-06-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-06-light.png
new file mode 100644
index 00000000000..bc5aa641e35
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-06-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-06.json b/apps/www/public/r/styles/new-york-v4/sidebar-06.json
new file mode 100644
index 00000000000..bae44a0cdc0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-06.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-06",
+  "type": "registry:block",
+  "description": "A sidebar with submenus as dropdowns.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { MoreHorizontal, type LucideIcon } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup>\n      <SidebarMenu>\n        {items.map((item) => (\n          <DropdownMenu key={item.title}>\n            <SidebarMenuItem>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  {item.title} <MoreHorizontal className=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              {item.items?.length ? (\n                <DropdownMenuContent\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align={isMobile ? \"end\" : \"start\"}\n                  className=\"min-w-56 rounded-lg\"\n                >\n                  {item.items.map((item) => (\n                    <DropdownMenuItem asChild key={item.title}>\n                      <a href={item.url}>{item.title}</a>\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              ) : null}\n            </SidebarMenuItem>\n          </DropdownMenu>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { SidebarInput } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button\n              className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\"\n              size=\"sm\"\n            >\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-07-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-07-dark.png
new file mode 100644
index 00000000000..13da5e56934
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-07-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-07-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-07-light.png
new file mode 100644
index 00000000000..5cdd9d3f4fb
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-07-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-07.json b/apps/www/public/r/styles/new-york-v4/sidebar-07.json
new file mode 100644
index 00000000000..46a4961b0a7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-07.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-07",
+  "type": "registry:block",
+  "description": "A sidebar that collapses to icons.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york-v4/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  <team.logo className=\"size-3.5 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-08-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-08-dark.png
new file mode 100644
index 00000000000..86cd9c1396f
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-08-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-08-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-08-light.png
new file mode 100644
index 00000000000..8492135e7bb
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-08-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-08.json b/apps/www/public/r/styles/new-york-v4/sidebar-08.json
new file mode 100644
index 00000000000..823a747474f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-08.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-08",
+  "type": "registry:block",
+  "description": "An inset sidebar with secondary navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-09-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-09-dark.png
new file mode 100644
index 00000000000..91deaefc071
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-09-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-09-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-09-light.png
new file mode 100644
index 00000000000..1619c660efe
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-09-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-09.json b/apps/www/public/r/styles/new-york-v4/sidebar-09.json
new file mode 100644
index 00000000000..7554476eafd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-09.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-09",
+  "type": "registry:block",
+  "description": "Collapsible nested sidebars.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\n\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-10-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-10-dark.png
new file mode 100644
index 00000000000..a20b5fadc60
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-10-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-10-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-10-light.png
new file mode 100644
index 00000000000..5cac5da365f
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-10-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-10.json b/apps/www/public/r/styles/new-york-v4/sidebar-10.json
new file mode 100644
index 00000000000..54163e38d1d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-10.json
@@ -0,0 +1,61 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-10",
+  "type": "registry:block",
+  "description": "A sidebar in a popover.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-10/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: Settings2,\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: Link,\n    },\n    {\n      label: \"Duplicate\",\n      icon: Copy,\n    },\n    {\n      label: \"Move to\",\n      icon: CornerUpRight,\n    },\n    {\n      label: \"Move to Trash\",\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: CornerUpLeft,\n    },\n    {\n      label: \"View analytics\",\n      icon: LineChart,\n    },\n    {\n      label: \"Version History\",\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: \"Show delete pages\",\n      icon: Trash,\n    },\n    {\n      label: \"Notifications\",\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: ArrowUp,\n    },\n    {\n      label: \"Export\",\n      icon: ArrowDown,\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"data-[state=open]:bg-accent h-7 w-7\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-11-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-11-dark.png
new file mode 100644
index 00000000000..818c4e165be
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-11-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-11-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-11-light.png
new file mode 100644
index 00000000000..9e26a3c2e83
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-11-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-11.json b/apps/www/public/r/styles/new-york-v4/sidebar-11.json
new file mode 100644
index 00000000000..ed301dff865
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-11.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-11",
+  "type": "registry:block",
+  "description": "A sidebar with a collapsible file tree.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <File />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <File />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton>\n            <ChevronRight className=\"transition-transform\" />\n            <Folder />\n            {name}\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-12-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-12-dark.png
new file mode 100644
index 00000000000..9ffab436557
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-12-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-12-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-12-light.png
new file mode 100644
index 00000000000..a84d1bee91c
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-12-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-12.json b/apps/www/public/r/styles/new-york-v4/sidebar-12.json
new file mode 100644
index 00000000000..270b4aff1bc
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-12.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-12",
+  "type": "registry:block",
+  "description": "A sidebar with a calendar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york-v4/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york-v4/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-13-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-13-dark.png
new file mode 100644
index 00000000000..ea11e3fee8f
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-13-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-13-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-13-light.png
new file mode 100644
index 00000000000..6fba44eb93a
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-13-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-13.json b/apps/www/public/r/styles/new-york-v4/sidebar-13.json
new file mode 100644
index 00000000000..3ffc740c57c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-13.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-13",
+  "type": "registry:block",
+  "description": "A sidebar in a dialog.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"@/registry/new-york-v4/blocks/sidebar-13/components/settings-dialog\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-14-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-14-dark.png
new file mode 100644
index 00000000000..fea4f9d9480
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-14-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-14-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-14-light.png
new file mode 100644
index 00000000000..edf7500721a
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-14-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-14.json b/apps/www/public/r/styles/new-york-v4/sidebar-14.json
new file mode 100644
index 00000000000..9e81550049c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-14.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-14",
+  "type": "registry:block",
+  "description": "A sidebar on the right.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-15-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-15-dark.png
new file mode 100644
index 00000000000..0a8522cef9d
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-15-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-15-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-15-light.png
new file mode 100644
index 00000000000..428f99cfe22
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-15-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-15.json b/apps/www/public/r/styles/new-york-v4/sidebar-15.json
new file mode 100644
index 00000000000..88921f299f0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-15.json
@@ -0,0 +1,78 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-15",
+  "type": "registry:block",
+  "description": "A left and right sidebar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-15/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function SidebarLeft({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york-v4/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york-v4/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-16-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-16-dark.png
new file mode 100644
index 00000000000..fa8a3ecd22f
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-16-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-16-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-16-light.png
new file mode 100644
index 00000000000..f5bb33f4580
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-16-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-16.json b/apps/www/public/r/styles/new-york-v4/sidebar-16.json
new file mode 100644
index 00000000000..f1c218419b7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-16.json
@@ -0,0 +1,63 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-16",
+  "type": "registry:block",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/new-york-v4/blocks/sidebar-16/components/site-header\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { SidebarInput } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <div className=\"relative\">\n        <Label htmlFor=\"search\" className=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Type to search...\"\n          className=\"h-8 pl-7\"\n        />\n        <Search className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\" />\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport { useSidebar } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <SidebarIcon />\n        </Button>\n        <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-controlled-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-controlled-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-controlled-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-controlled-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-controlled-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-controlled-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-controlled.json b/apps/www/public/r/styles/new-york-v4/sidebar-controlled.json
new file mode 100644
index 00000000000..f59c0b6cf88
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-controlled.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  FrameIcon,\n  LifeBuoyIcon,\n  MapIcon,\n  PanelLeftCloseIcon,\n  PanelLeftOpenIcon,\n  PieChartIcon,\n  SendIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: FrameIcon,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChartIcon,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: MapIcon,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoyIcon,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: SendIcon,\n  },\n]\n\nexport default function AppSidebar() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <SidebarProvider open={open} onOpenChange={setOpen}>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-12 items-center justify-between px-4\">\n          <Button\n            onClick={() => setOpen((open) => !open)}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            {open ? <PanelLeftCloseIcon /> : <PanelLeftOpenIcon />}\n            <span>{open ? \"Close\" : \"Open\"} Sidebar</span>\n          </Button>\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-demo-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-demo-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-demo-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-demo-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-demo-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-demo-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-demo.json b/apps/www/public/r/styles/new-york-v4/sidebar-demo.json
new file mode 100644
index 00000000000..55f0988b8e9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-demo.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-demo.tsx",
+      "content": "\"use client\"\n\nimport {\n  CalendarIcon,\n  HomeIcon,\n  InboxIcon,\n  SearchIcon,\n  SettingsIcon,\n} from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// Menu items.\nconst items = [\n  {\n    title: \"Home\",\n    url: \"#\",\n    icon: HomeIcon,\n  },\n  {\n    title: \"Inbox\",\n    url: \"#\",\n    icon: InboxIcon,\n  },\n  {\n    title: \"Calendar\",\n    url: \"#\",\n    icon: CalendarIcon,\n  },\n  {\n    title: \"Search\",\n    url: \"#\",\n    icon: SearchIcon,\n  },\n  {\n    title: \"Settings\",\n    url: \"#\",\n    icon: SettingsIcon,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Application</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-12 items-center justify-between px-4\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-footer-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-footer-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-footer-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-footer-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-footer-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-footer-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-footer.json b/apps/www/public/r/styles/new-york-v4/sidebar-footer.json
new file mode 100644
index 00000000000..27fa8d69359
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-footer.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-footer.tsx",
+      "content": "\"use client\"\n\nimport { ChevronUpIcon } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader />\n        <SidebarContent />\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Username\n                    <ChevronUpIcon className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  side=\"top\"\n                  className=\"w-(--radix-popper-anchor-width)\"\n                >\n                  <DropdownMenuItem>\n                    <span>Account</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Billing</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Sign out</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-12 items-center justify-between px-4\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-group-action-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-group-action-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-group-action-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-group-action-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-group-action-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-group-action-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-group-action.json b/apps/www/public/r/styles/new-york-v4/sidebar-group-action.json
new file mode 100644
index 00000000000..d717587d61a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-group-action.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-group-action.tsx",
+      "content": "\"use client\"\n\nimport { FrameIcon, MapIcon, PieChartIcon, PlusIcon } from \"lucide-react\"\nimport { toast, Toaster } from \"sonner\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Toaster\n        position=\"bottom-left\"\n        toastOptions={{\n          className: \"ml-[160px]\",\n        }}\n      />\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupAction\n              title=\"Add Project\"\n              onClick={() => toast(\"You clicked the group action!\")}\n            >\n              <PlusIcon /> <span className=\"sr-only\">Add Project</span>\n            </SidebarGroupAction>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <FrameIcon />\n                      <span>Design Engineering</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <PieChartIcon />\n                      <span>Sales & Marketing</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <MapIcon />\n                      <span>Travel</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-group-collapsible-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-group-collapsible-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-group-collapsible-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-group-collapsible-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-group-collapsible-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-group-collapsible-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-group-collapsible.json b/apps/www/public/r/styles/new-york-v4/sidebar-group-collapsible.json
new file mode 100644
index 00000000000..ab70fb0f1e8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-group-collapsible.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-group-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon, LifeBuoyIcon, SendIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <Collapsible defaultOpen className=\"group/collapsible\">\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  Help\n                  <ChevronDownIcon className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <LifeBuoyIcon />\n                        Support\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <SendIcon />\n                        Feedback\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-group-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-group-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-group-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-group-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-group-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-group-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-group.json b/apps/www/public/r/styles/new-york-v4/sidebar-group.json
new file mode 100644
index 00000000000..5e42e32aacb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-group.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-group.tsx",
+      "content": "\"use client\"\n\nimport { LifeBuoyIcon, SendIcon } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Help</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <LifeBuoyIcon />\n                    Support\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <SendIcon />\n                    Feedback\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-header-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-header-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-header-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-header-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-header-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-header-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-header.json b/apps/www/public/r/styles/new-york-v4/sidebar-header.json
new file mode 100644
index 00000000000..c3d589f9fce
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-header.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-header.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Select Workspace\n                    <ChevronDownIcon className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent className=\"w-(--radix-popper-anchor-width)\">\n                  <DropdownMenuItem>\n                    <span>Acme Inc</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Acme Corp.</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-12 items-center justify-between px-4\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-action-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-menu-action-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-menu-action-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-action-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-menu-action-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-menu-action-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-action.json b/apps/www/public/r/styles/new-york-v4/sidebar-menu-action.json
new file mode 100644
index 00000000000..3152f2fd5fd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-menu-action.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-menu-action.tsx",
+      "content": "\"use client\"\n\nimport {\n  FrameIcon,\n  LifeBuoyIcon,\n  MapIcon,\n  MoreHorizontalIcon,\n  PieChartIcon,\n  SendIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: FrameIcon,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChartIcon,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: MapIcon,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoyIcon,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: SendIcon,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction>\n                          <MoreHorizontalIcon />\n                          <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuItem>\n                          <span>Edit Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <span>Delete Project</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-badge-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-menu-badge-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-menu-badge-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-badge-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-menu-badge-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-menu-badge-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-badge.json b/apps/www/public/r/styles/new-york-v4/sidebar-menu-badge.json
new file mode 100644
index 00000000000..d5017633b77
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-menu-badge.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-menu-badge.tsx",
+      "content": "\"use client\"\n\nimport {\n  FrameIcon,\n  LifeBuoyIcon,\n  MapIcon,\n  PieChartIcon,\n  SendIcon,\n} from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: FrameIcon,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChartIcon,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: MapIcon,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoyIcon,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: SendIcon,\n    badge: \"8\",\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-collapsible-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-menu-collapsible-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-menu-collapsible-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-collapsible-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-menu-collapsible-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-menu-collapsible-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-collapsible.json b/apps/www/public/r/styles/new-york-v4/sidebar-menu-collapsible.json
new file mode 100644
index 00000000000..e9d07dcb670
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-menu-collapsible.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-menu-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRightIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <Collapsible\n                    key={index}\n                    className=\"group/collapsible\"\n                    defaultOpen={index === 0}\n                  >\n                    <SidebarMenuItem>\n                      <CollapsibleTrigger asChild>\n                        <SidebarMenuButton>\n                          <span>{item.title}</span>\n                          <ChevronRightIcon className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem, subIndex) => (\n                            <SidebarMenuSubItem key={subIndex}>\n                              <SidebarMenuSubButton asChild>\n                                <a href={subItem.url}>\n                                  <span>{subItem.title}</span>\n                                </a>\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </SidebarMenuItem>\n                  </Collapsible>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-menu-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-menu-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-menu-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-menu-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-sub-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-menu-sub-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-menu-sub-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-sub-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-menu-sub-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-menu-sub-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu-sub.json b/apps/www/public/r/styles/new-york-v4/sidebar-menu-sub.json
new file mode 100644
index 00000000000..2523f4d5d55
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-menu-sub.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-menu-sub.tsx",
+      "content": "\"use client\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <SidebarMenuItem key={index}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuSub>\n                      {item.items.map((subItem, subIndex) => (\n                        <SidebarMenuSubItem key={subIndex}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-menu.json b/apps/www/public/r/styles/new-york-v4/sidebar-menu.json
new file mode 100644
index 00000000000..0369474ecae
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-menu.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-menu.tsx",
+      "content": "\"use client\"\n\nimport {\n  FrameIcon,\n  LifeBuoyIcon,\n  MapIcon,\n  PieChartIcon,\n  SendIcon,\n} from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: FrameIcon,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChartIcon,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: MapIcon,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoyIcon,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: SendIcon,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-rsc-dark.png b/apps/www/public/r/styles/new-york-v4/sidebar-rsc-dark.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-rsc-dark.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-rsc-light.png b/apps/www/public/r/styles/new-york-v4/sidebar-rsc-light.png
new file mode 100644
index 00000000000..73911b7a100
Binary files /dev/null and b/apps/www/public/r/styles/new-york-v4/sidebar-rsc-light.png differ
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar-rsc.json b/apps/www/public/r/styles/new-york-v4/sidebar-rsc.json
new file mode 100644
index 00000000000..e6e437fe40b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar-rsc.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "registry/new-york-v4/internal/sidebar-rsc.tsx",
+      "content": "import * as React from \"react\"\nimport {\n  FrameIcon,\n  LifeBuoyIcon,\n  MapIcon,\n  PieChartIcon,\n  SendIcon,\n} from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: FrameIcon,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChartIcon,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: MapIcon,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoyIcon,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: SendIcon,\n    badge: \"8\",\n  },\n]\n\n// Dummy fetch function\nasync function fetchProjects() {\n  await new Promise((resolve) => setTimeout(resolve, 3000))\n  return projects\n}\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <React.Suspense fallback={<NavProjectsSkeleton />}>\n                <NavProjects />\n              </React.Suspense>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n\nfunction NavProjectsSkeleton() {\n  return (\n    <SidebarMenu>\n      {Array.from({ length: 5 }).map((_, index) => (\n        <SidebarMenuItem key={index}>\n          <SidebarMenuSkeleton showIcon />\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nasync function NavProjects() {\n  const projects = await fetchProjects()\n\n  return (\n    <SidebarMenu>\n      {projects.map((project) => (\n        <SidebarMenuItem key={project.name}>\n          <SidebarMenuButton asChild>\n            <a href={project.url}>\n              <project.icon />\n              <span>{project.name}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sidebar.json b/apps/www/public/r/styles/new-york-v4/sidebar.json
new file mode 100644
index 00000000000..9b23f4dabb1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sidebar.json
@@ -0,0 +1,68 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-slot",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "separator",
+    "sheet",
+    "tooltip",
+    "input",
+    "use-mobile",
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, VariantProps } from \"class-variance-authority\"\nimport { PanelLeftIcon } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/new-york-v4/ui/sheet\"\nimport { Skeleton } from \"@/registry/new-york-v4/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york-v4/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          data-slot=\"sidebar-wrapper\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH,\n              \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn(\n            \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"size-7\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col\",\n        \"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "sidebar": {
+              "DEFAULT": "hsl(var(--sidebar-background))",
+              "foreground": "hsl(var(--sidebar-foreground))",
+              "primary": "hsl(var(--sidebar-primary))",
+              "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+              "accent": "hsl(var(--sidebar-accent))",
+              "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+              "border": "hsl(var(--sidebar-border))",
+              "ring": "hsl(var(--sidebar-ring))"
+            }
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "sidebar-background": "0 0% 98%",
+      "sidebar-foreground": "240 5.3% 26.1%",
+      "sidebar-primary": "240 5.9% 10%",
+      "sidebar-primary-foreground": "0 0% 98%",
+      "sidebar-accent": "240 4.8% 95.9%",
+      "sidebar-accent-foreground": "240 5.9% 10%",
+      "sidebar-border": "220 13% 91%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    },
+    "dark": {
+      "sidebar-background": "240 5.9% 10%",
+      "sidebar-foreground": "240 4.8% 95.9%",
+      "sidebar-primary": "224.3 76.3% 48%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "240 3.7% 15.9%",
+      "sidebar-accent-foreground": "240 4.8% 95.9%",
+      "sidebar-border": "240 3.7% 15.9%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/skeleton-card.json b/apps/www/public/r/styles/new-york-v4/skeleton-card.json
new file mode 100644
index 00000000000..2a8d4c3ecb8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/skeleton-card.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-card",
+  "type": "registry:example",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/skeleton-card.tsx",
+      "content": "import { Skeleton } from \"@/registry/new-york-v4/ui/skeleton\"\n\nexport default function SkeletonCard() {\n  return (\n    <div className=\"flex flex-col space-y-3\">\n      <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/skeleton-demo.json b/apps/www/public/r/styles/new-york-v4/skeleton-demo.json
new file mode 100644
index 00000000000..0ba510b319b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/skeleton-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/registry/new-york-v4/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/skeleton.json b/apps/www/public/r/styles/new-york-v4/skeleton.json
new file mode 100644
index 00000000000..1366dfca1de
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/skeleton.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/skeleton.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-accent animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/slider-demo.json b/apps/www/public/r/styles/new-york-v4/slider-demo.json
new file mode 100644
index 00000000000..8a3c88778ce
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/slider-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "slider"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/new-york-v4/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/slider.json b/apps/www/public/r/styles/new-york-v4/slider.json
new file mode 100644
index 00000000000..8e7f7d715ed
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/slider.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-slider"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/slider.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          \"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\"\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn(\n            \"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n          )}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sonner-demo.json b/apps/www/public/r/styles/new-york-v4/sonner-demo.json
new file mode 100644
index 00000000000..247ab8b6f15
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sonner-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/sonner.json b/apps/www/public/r/styles/new-york-v4/sonner.json
new file mode 100644
index 00000000000..d32332493fa
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/sonner.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner",
+  "type": "registry:ui",
+  "dependencies": [
+    "sonner",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/sonner.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, ToasterProps } from \"sonner\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/style.json b/apps/www/public/r/styles/new-york-v4/style.json
new file mode 100644
index 00000000000..4158000a12c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/style.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "type": "registry:style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "devDependencies": [
+    "tw-animate-css"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {}
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/switch-demo.json b/apps/www/public/r/styles/new-york-v4/switch-demo.json
new file mode 100644
index 00000000000..a2acb2d16db
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/switch-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/switch-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nexport default function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/switch-form.json b/apps/www/public/r/styles/new-york-v4/switch-form.json
new file mode 100644
index 00000000000..662fd75d1aa
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/switch-form.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "switch",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/switch-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/new-york-v4/ui/form\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst FormSchema = z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      security_emails: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full space-y-6\">\n        <div>\n          <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n          <div className=\"space-y-4\">\n            <FormField\n              control={form.control}\n              name=\"marketing_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel>Marketing emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about new products, features, and more.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n            <FormField\n              control={form.control}\n              name=\"security_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel>Security emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about your account security.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                      disabled\n                      aria-readonly\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n          </div>\n        </div>\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/switch.json b/apps/www/public/r/styles/new-york-v4/switch.json
new file mode 100644
index 00000000000..5ff1dfb8355
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/switch.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-switch"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/switch.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Switch({\n  className,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/table-demo.json b/apps/www/public/r/styles/new-york-v4/table-demo.json
new file mode 100644
index 00000000000..c8aa2136a39
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/table-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "table"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/table-demo.tsx",
+      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/table.json b/apps/www/public/r/styles/new-york-v4/table.json
new file mode 100644
index 00000000000..b38cef79f2c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/table.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/tabs-demo.json b/apps/www/public/r/styles/new-york-v4/tabs-demo.json
new file mode 100644
index 00000000000..a098a4cfec6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/tabs-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "tabs"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/tabs-demo.tsx",
+      "content": "import { AppWindowIcon, CodeIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york-v4/ui/tabs\"\n\nexport default function TabsDemo() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-6\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n        </TabsList>\n        <TabsContent value=\"account\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Account</CardTitle>\n              <CardDescription>\n                Make changes to your account here. Click save when you&apos;re\n                done.\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-6\">\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-name\">Name</Label>\n                <Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </div>\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-username\">Username</Label>\n                <Input id=\"tabs-demo-username\" defaultValue=\"@peduarte\" />\n              </div>\n            </CardContent>\n            <CardFooter>\n              <Button>Save changes</Button>\n            </CardFooter>\n          </Card>\n        </TabsContent>\n        <TabsContent value=\"password\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Password</CardTitle>\n              <CardDescription>\n                Change your password here. After saving, you&apos;ll be logged\n                out.\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-6\">\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-current\">Current password</Label>\n                <Input id=\"tabs-demo-current\" type=\"password\" />\n              </div>\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-new\">New password</Label>\n                <Input id=\"tabs-demo-new\" type=\"password\" />\n              </div>\n            </CardContent>\n            <CardFooter>\n              <Button>Save password</Button>\n            </CardFooter>\n          </Card>\n        </TabsContent>\n      </Tabs>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/tabs.json b/apps/www/public/r/styles/new-york-v4/tabs.json
new file mode 100644
index 00000000000..09a67e54187
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/tabs.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-tabs"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/tabs.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsList({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn(\n        \"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/textarea-demo.json b/apps/www/public/r/styles/new-york-v4/textarea-demo.json
new file mode 100644
index 00000000000..67096325ebb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/textarea-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/textarea-disabled.json b/apps/www/public/r/styles/new-york-v4/textarea-disabled.json
new file mode 100644
index 00000000000..c9bbb6e735b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/textarea-disabled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-disabled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-disabled.tsx",
+      "content": "import { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaDisabled() {\n  return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/textarea-form.json b/apps/www/public/r/styles/new-york-v4/textarea-form.json
new file mode 100644
index 00000000000..b832247edc7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/textarea-form.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-form",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york-v4/ui/form\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nconst FormSchema = z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: \"Bio must be at least 10 characters.\",\n    })\n    .max(160, {\n      message: \"Bio must not be longer than 30 characters.\",\n    }),\n})\n\nexport default function TextareaForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"bio\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Bio</FormLabel>\n              <FormControl>\n                <Textarea\n                  placeholder=\"Tell us a little bit about yourself\"\n                  className=\"resize-none\"\n                  {...field}\n                />\n              </FormControl>\n              <FormDescription>\n                You can <span>@mention</span> other users and organizations.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/textarea-with-button.json b/apps/www/public/r/styles/new-york-v4/textarea-with-button.json
new file mode 100644
index 00000000000..24b960cb356
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/textarea-with-button.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-button",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-with-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaWithButton() {\n  return (\n    <div className=\"grid w-full gap-2\">\n      <Textarea placeholder=\"Type your message here.\" />\n      <Button>Send message</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/textarea-with-label.json b/apps/www/public/r/styles/new-york-v4/textarea-with-label.json
new file mode 100644
index 00000000000..a75ff457f31
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/textarea-with-label.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-label",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-with-label.tsx",
+      "content": "import { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaWithLabel() {\n  return (\n    <div className=\"grid w-full gap-3\">\n      <Label htmlFor=\"message\">Your message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/textarea-with-text.json b/apps/www/public/r/styles/new-york-v4/textarea-with-text.json
new file mode 100644
index 00000000000..915252f6033
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/textarea-with-text.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-text",
+  "type": "registry:example",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/textarea-with-text.tsx",
+      "content": "import { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaWithText() {\n  return (\n    <div className=\"grid w-full gap-3\">\n      <Label htmlFor=\"message-2\">Your Message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n      <p className=\"text-muted-foreground text-sm\">\n        Your message will be copied to the support team.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/textarea.json b/apps/www/public/r/styles/new-york-v4/textarea.json
new file mode 100644
index 00000000000..fb648e5c81a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/textarea.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/textarea.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/theme-gray.json b/apps/www/public/r/styles/new-york-v4/theme-gray.json
new file mode 100644
index 00000000000..c3f9d2c8a7d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/theme-gray.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-gray",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.13 0.028 261.692)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.13 0.028 261.692)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.13 0.028 261.692)",
+      "primary": "oklch(0.21 0.034 264.665)",
+      "primary-foreground": "oklch(0.985 0.002 247.839)",
+      "secondary": "oklch(0.967 0.003 264.542)",
+      "secondary-foreground": "oklch(0.21 0.034 264.665)",
+      "muted": "oklch(0.967 0.003 264.542)",
+      "muted-foreground": "oklch(0.551 0.027 264.364)",
+      "accent": "oklch(0.967 0.003 264.542)",
+      "accent-foreground": "oklch(0.21 0.034 264.665)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.928 0.006 264.531)",
+      "input": "oklch(0.928 0.006 264.531)",
+      "ring": "oklch(0.707 0.022 261.325)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0.002 247.839)",
+      "sidebar-foreground": "oklch(0.13 0.028 261.692)",
+      "sidebar-primary": "oklch(0.21 0.034 264.665)",
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-accent": "oklch(0.967 0.003 264.542)",
+      "sidebar-accent-foreground": "oklch(0.21 0.034 264.665)",
+      "sidebar-border": "oklch(0.928 0.006 264.531)",
+      "sidebar-ring": "oklch(0.707 0.022 261.325)"
+    },
+    "dark": {
+      "background": "oklch(0.13 0.028 261.692)",
+      "foreground": "oklch(0.985 0.002 247.839)",
+      "card": "oklch(0.21 0.034 264.665)",
+      "card-foreground": "oklch(0.985 0.002 247.839)",
+      "popover": "oklch(0.21 0.034 264.665)",
+      "popover-foreground": "oklch(0.985 0.002 247.839)",
+      "primary": "oklch(0.928 0.006 264.531)",
+      "primary-foreground": "oklch(0.21 0.034 264.665)",
+      "secondary": "oklch(0.278 0.033 256.848)",
+      "secondary-foreground": "oklch(0.985 0.002 247.839)",
+      "muted": "oklch(0.278 0.033 256.848)",
+      "muted-foreground": "oklch(0.707 0.022 261.325)",
+      "accent": "oklch(0.278 0.033 256.848)",
+      "accent-foreground": "oklch(0.985 0.002 247.839)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.551 0.027 264.364)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.21 0.034 264.665)",
+      "sidebar-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-accent": "oklch(0.278 0.033 256.848)",
+      "sidebar-accent-foreground": "oklch(0.985 0.002 247.839)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.551 0.027 264.364)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/theme-neutral.json b/apps/www/public/r/styles/new-york-v4/theme-neutral.json
new file mode 100644
index 00000000000..6c7ecbe8502
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/theme-neutral.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-neutral",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.145 0 0)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.145 0 0)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.145 0 0)",
+      "primary": "oklch(0.205 0 0)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.97 0 0)",
+      "secondary-foreground": "oklch(0.205 0 0)",
+      "muted": "oklch(0.97 0 0)",
+      "muted-foreground": "oklch(0.556 0 0)",
+      "accent": "oklch(0.97 0 0)",
+      "accent-foreground": "oklch(0.205 0 0)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.922 0 0)",
+      "input": "oklch(0.922 0 0)",
+      "ring": "oklch(0.708 0 0)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.145 0 0)",
+      "sidebar-primary": "oklch(0.205 0 0)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.97 0 0)",
+      "sidebar-accent-foreground": "oklch(0.205 0 0)",
+      "sidebar-border": "oklch(0.922 0 0)",
+      "sidebar-ring": "oklch(0.708 0 0)"
+    },
+    "dark": {
+      "background": "oklch(0.145 0 0)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.205 0 0)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.205 0 0)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.922 0 0)",
+      "primary-foreground": "oklch(0.205 0 0)",
+      "secondary": "oklch(0.269 0 0)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.269 0 0)",
+      "muted-foreground": "oklch(0.708 0 0)",
+      "accent": "oklch(0.269 0 0)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.556 0 0)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.205 0 0)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.269 0 0)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.556 0 0)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/theme-slate.json b/apps/www/public/r/styles/new-york-v4/theme-slate.json
new file mode 100644
index 00000000000..1eaa08d050f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/theme-slate.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-slate",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.129 0.042 264.695)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.129 0.042 264.695)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.129 0.042 264.695)",
+      "primary": "oklch(0.208 0.042 265.755)",
+      "primary-foreground": "oklch(0.984 0.003 247.858)",
+      "secondary": "oklch(0.968 0.007 247.896)",
+      "secondary-foreground": "oklch(0.208 0.042 265.755)",
+      "muted": "oklch(0.968 0.007 247.896)",
+      "muted-foreground": "oklch(0.554 0.046 257.417)",
+      "accent": "oklch(0.968 0.007 247.896)",
+      "accent-foreground": "oklch(0.208 0.042 265.755)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.929 0.013 255.508)",
+      "input": "oklch(0.929 0.013 255.508)",
+      "ring": "oklch(0.704 0.04 256.788)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.984 0.003 247.858)",
+      "sidebar-foreground": "oklch(0.129 0.042 264.695)",
+      "sidebar-primary": "oklch(0.208 0.042 265.755)",
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-accent": "oklch(0.968 0.007 247.896)",
+      "sidebar-accent-foreground": "oklch(0.208 0.042 265.755)",
+      "sidebar-border": "oklch(0.929 0.013 255.508)",
+      "sidebar-ring": "oklch(0.704 0.04 256.788)"
+    },
+    "dark": {
+      "background": "oklch(0.129 0.042 264.695)",
+      "foreground": "oklch(0.984 0.003 247.858)",
+      "card": "oklch(0.208 0.042 265.755)",
+      "card-foreground": "oklch(0.984 0.003 247.858)",
+      "popover": "oklch(0.208 0.042 265.755)",
+      "popover-foreground": "oklch(0.984 0.003 247.858)",
+      "primary": "oklch(0.929 0.013 255.508)",
+      "primary-foreground": "oklch(0.208 0.042 265.755)",
+      "secondary": "oklch(0.279 0.041 260.031)",
+      "secondary-foreground": "oklch(0.984 0.003 247.858)",
+      "muted": "oklch(0.279 0.041 260.031)",
+      "muted-foreground": "oklch(0.704 0.04 256.788)",
+      "accent": "oklch(0.279 0.041 260.031)",
+      "accent-foreground": "oklch(0.984 0.003 247.858)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.551 0.027 264.364)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.208 0.042 265.755)",
+      "sidebar-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-accent": "oklch(0.279 0.041 260.031)",
+      "sidebar-accent-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.551 0.027 264.364)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/theme-stone.json b/apps/www/public/r/styles/new-york-v4/theme-stone.json
new file mode 100644
index 00000000000..04c599678c3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/theme-stone.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-stone",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.147 0.004 49.25)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.147 0.004 49.25)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.147 0.004 49.25)",
+      "primary": "oklch(0.216 0.006 56.043)",
+      "primary-foreground": "oklch(0.985 0.001 106.423)",
+      "secondary": "oklch(0.97 0.001 106.424)",
+      "secondary-foreground": "oklch(0.216 0.006 56.043)",
+      "muted": "oklch(0.97 0.001 106.424)",
+      "muted-foreground": "oklch(0.553 0.013 58.071)",
+      "accent": "oklch(0.97 0.001 106.424)",
+      "accent-foreground": "oklch(0.216 0.006 56.043)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.923 0.003 48.717)",
+      "input": "oklch(0.923 0.003 48.717)",
+      "ring": "oklch(0.709 0.01 56.259)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0.001 106.423)",
+      "sidebar-foreground": "oklch(0.147 0.004 49.25)",
+      "sidebar-primary": "oklch(0.216 0.006 56.043)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.97 0.001 106.424)",
+      "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)",
+      "sidebar-border": "oklch(0.923 0.003 48.717)",
+      "sidebar-ring": "oklch(0.709 0.01 56.259)"
+    },
+    "dark": {
+      "background": "oklch(0.147 0.004 49.25)",
+      "foreground": "oklch(0.985 0.001 106.423)",
+      "card": "oklch(0.216 0.006 56.043)",
+      "card-foreground": "oklch(0.985 0.001 106.423)",
+      "popover": "oklch(0.216 0.006 56.043)",
+      "popover-foreground": "oklch(0.985 0.001 106.423)",
+      "primary": "oklch(0.923 0.003 48.717)",
+      "primary-foreground": "oklch(0.216 0.006 56.043)",
+      "secondary": "oklch(0.268 0.007 34.298)",
+      "secondary-foreground": "oklch(0.985 0.001 106.423)",
+      "muted": "oklch(0.268 0.007 34.298)",
+      "muted-foreground": "oklch(0.709 0.01 56.259)",
+      "accent": "oklch(0.268 0.007 34.298)",
+      "accent-foreground": "oklch(0.985 0.001 106.423)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.553 0.013 58.071)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.216 0.006 56.043)",
+      "sidebar-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.268 0.007 34.298)",
+      "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.553 0.013 58.071)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/theme-zinc.json b/apps/www/public/r/styles/new-york-v4/theme-zinc.json
new file mode 100644
index 00000000000..a063a4ba15f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/theme-zinc.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-zinc",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.141 0.005 285.823)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.141 0.005 285.823)",
+      "primary": "oklch(0.21 0.006 285.885)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.967 0.001 286.375)",
+      "secondary-foreground": "oklch(0.21 0.006 285.885)",
+      "muted": "oklch(0.967 0.001 286.375)",
+      "muted-foreground": "oklch(0.552 0.016 285.938)",
+      "accent": "oklch(0.967 0.001 286.375)",
+      "accent-foreground": "oklch(0.21 0.006 285.885)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.92 0.004 286.32)",
+      "input": "oklch(0.92 0.004 286.32)",
+      "ring": "oklch(0.705 0.015 286.067)",
+      "chart-1": "oklch(0.646 0.222 41.116)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 70.08)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
+      "sidebar-primary": "oklch(0.21 0.006 285.885)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.967 0.001 286.375)",
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+      "sidebar-border": "oklch(0.92 0.004 286.32)",
+      "sidebar-ring": "oklch(0.705 0.015 286.067)"
+    },
+    "dark": {
+      "background": "oklch(0.141 0.005 285.823)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.21 0.006 285.885)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.21 0.006 285.885)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.92 0.004 286.32)",
+      "primary-foreground": "oklch(0.21 0.006 285.885)",
+      "secondary": "oklch(0.274 0.006 286.033)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.274 0.006 286.033)",
+      "muted-foreground": "oklch(0.705 0.015 286.067)",
+      "accent": "oklch(0.274 0.006 286.033)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.552 0.016 285.938)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 70.08)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "sidebar": "oklch(0.21 0.006 285.885)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.274 0.006 286.033)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.552 0.016 285.938)"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toast-demo.json b/apps/www/public/r/styles/new-york-v4/toast-demo.json
new file mode 100644
index 00000000000..ad4b694f027
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toast-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york-v4/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ToastAction } from \"@/registry/new-york-v4/ui/toast\"\n\nexport default function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toast-destructive.json b/apps/www/public/r/styles/new-york-v4/toast-destructive.json
new file mode 100644
index 00000000000..aab568bd853
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toast-destructive.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-destructive",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toast-destructive.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york-v4/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ToastAction } from \"@/registry/new-york-v4/ui/toast\"\n\nexport default function ToastDestructive() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          variant: \"destructive\",\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toast-simple.json b/apps/www/public/r/styles/new-york-v4/toast-simple.json
new file mode 100644
index 00000000000..a8ec04b1710
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toast-simple.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-simple",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toast-simple.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york-v4/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ToastSimple() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          description: \"Your message has been sent.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toast-with-action.json b/apps/www/public/r/styles/new-york-v4/toast-with-action.json
new file mode 100644
index 00000000000..d4603252b6d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toast-with-action.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-action",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toast-with-action.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york-v4/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ToastAction } from \"@/registry/new-york-v4/ui/toast\"\n\nexport default function ToastWithAction() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toast-with-title.json b/apps/www/public/r/styles/new-york-v4/toast-with-title.json
new file mode 100644
index 00000000000..5e996b85e23
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toast-with-title.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-title",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toast-with-title.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york-v4/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport default function ToastWithTitle() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-demo.json b/apps/www/public/r/styles/new-york-v4/toggle-demo.json
new file mode 100644
index 00000000000..b40477e66d5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-disabled.json b/apps/www/public/r/styles/new-york-v4/toggle-disabled.json
new file mode 100644
index 00000000000..211dd472c51
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-disabled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-disabled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-group-demo.json b/apps/www/public/r/styles/new-york-v4/toggle-group-demo.json
new file mode 100644
index 00000000000..6b73b9c28a3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-group-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup variant=\"outline\" type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-group-disabled.json b/apps/www/public/r/styles/new-york-v4/toggle-group-disabled.json
new file mode 100644
index 00000000000..68b3c94e935
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-group-disabled.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-disabled",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-disabled.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" disabled>\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-group-lg.json b/apps/www/public/r/styles/new-york-v4/toggle-group-lg.json
new file mode 100644
index 00000000000..cf060cbfe67
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-group-lg.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-lg",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-lg.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" size=\"lg\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-group-outline.json b/apps/www/public/r/styles/new-york-v4/toggle-group-outline.json
new file mode 100644
index 00000000000..c5b5032dc33
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-group-outline.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-outline",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-outline.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"outline\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-group-single.json b/apps/www/public/r/styles/new-york-v4/toggle-group-single.json
new file mode 100644
index 00000000000..d2ee37c8d06
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-group-single.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-single",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-single.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"single\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-group-sm.json b/apps/www/public/r/styles/new-york-v4/toggle-group-sm.json
new file mode 100644
index 00000000000..a17d823104f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-group-sm.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-sm",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-group-sm.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"single\" size=\"sm\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-group.json b/apps/www/public/r/styles/new-york-v4/toggle-group.json
new file mode 100644
index 00000000000..a8186217880
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-group.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-toggle-group"
+  ],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/toggle-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/new-york-v4/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        \"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-lg.json b/apps/www/public/r/styles/new-york-v4/toggle-lg.json
new file mode 100644
index 00000000000..4f5991c5fcd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-lg.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-lg",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-lg.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleLg() {\n  return (\n    <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-outline.json b/apps/www/public/r/styles/new-york-v4/toggle-outline.json
new file mode 100644
index 00000000000..5109ea28f0a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-outline.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-outline",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-sm.json b/apps/www/public/r/styles/new-york-v4/toggle-sm.json
new file mode 100644
index 00000000000..214e0156d09
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-sm.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-sm",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-sm.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleSm() {\n  return (\n    <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle-with-text.json b/apps/www/public/r/styles/new-york-v4/toggle-with-text.json
new file mode 100644
index 00000000000..e8bd5b3af65
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle-with-text.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-with-text",
+  "type": "registry:example",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/toggle.json b/apps/www/public/r/styles/new-york-v4/toggle.json
new file mode 100644
index 00000000000..4fcebb95176
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/toggle.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-2 min-w-9\",\n        sm: \"h-8 px-1.5 min-w-8\",\n        lg: \"h-10 px-2.5 min-w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/tooltip-demo.json b/apps/www/public/r/styles/new-york-v4/tooltip-demo.json
new file mode 100644
index 00000000000..ee55350c6e8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/tooltip-demo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york-v4/ui/tooltip\"\n\nexport default function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button variant=\"outline\">Hover</Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/tooltip.json b/apps/www/public/r/styles/new-york-v4/tooltip.json
new file mode 100644
index 00000000000..ea2d1028513
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/tooltip.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip",
+  "type": "registry:ui",
+  "dependencies": [
+    "@radix-ui/react-tooltip"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/ui/tooltip.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-blockquote.json b/apps/www/public/r/styles/new-york-v4/typography-blockquote.json
new file mode 100644
index 00000000000..a75cd594721
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-blockquote.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-blockquote",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-blockquote.tsx",
+      "content": "export default function TypographyBlockquote() {\n  return (\n    <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n      &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so\n      it&apos;s only fair that they should pay for the privilege.&quot;\n    </blockquote>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-demo.json b/apps/www/public/r/styles/new-york-v4/typography-demo.json
new file mode 100644
index 00000000000..a5fb70e480d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-demo.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-demo",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-demo.tsx",
+      "content": "export default function TypographyDemo() {\n  return (\n    <div>\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight text-balance\">\n        Taxing Laughter: The Joke Tax Chronicles\n      </h1>\n      <p className=\"text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </p>\n      <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n        The King&apos;s Plan\n      </h2>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king thought long and hard, and finally came up with{\" \"}\n        <a\n          href=\"#\"\n          className=\"text-primary font-medium underline underline-offset-4\"\n        >\n          a brilliant plan\n        </a>\n        : he would tax the jokes in the kingdom.\n      </p>\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n        &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so\n        it&apos;s only fair that they should pay for the privilege.&quot;\n      </blockquote>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The Joke Tax\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king&apos;s subjects were not amused. They grumbled and complained,\n        but the king was firm:\n      </p>\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king&apos;s\n        foolishness get him down: a court jester named Jokester.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        Jokester&apos;s Revolt\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king&apos;s pillow, in his\n        soup, even in the royal toilet. The king was furious, but he\n        couldn&apos;t seem to stop Jokester.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn&apos;t help but laugh.\n        And once they started laughing, they couldn&apos;t stop.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The People&apos;s Rebellion\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </p>\n      <div className=\"my-6 w-full overflow-y-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                King&apos;s Treasury\n              </th>\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                People&apos;s happiness\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Empty\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Overflowing\n              </td>\n            </tr>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Modest\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Satisfied\n              </td>\n            </tr>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Full\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Ecstatic\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-h1.json b/apps/www/public/r/styles/new-york-v4/typography-h1.json
new file mode 100644
index 00000000000..85271afcaab
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-h1.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h1",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-h1.tsx",
+      "content": "export default function TypographyH1() {\n  return (\n    <h1 className=\"scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance\">\n      Taxing Laughter: The Joke Tax Chronicles\n    </h1>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-h2.json b/apps/www/public/r/styles/new-york-v4/typography-h2.json
new file mode 100644
index 00000000000..633c1dab27d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-h2.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h2",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-h2.tsx",
+      "content": "export default function TypographyH2() {\n  return (\n    <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n      The People of the Kingdom\n    </h2>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-h3.json b/apps/www/public/r/styles/new-york-v4/typography-h3.json
new file mode 100644
index 00000000000..91f92fcb7a6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-h3.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h3",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-h3.tsx",
+      "content": "export default function TypographyH3() {\n  return (\n    <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-h4.json b/apps/www/public/r/styles/new-york-v4/typography-h4.json
new file mode 100644
index 00000000000..ca51847a8ea
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-h4.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h4",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-h4.tsx",
+      "content": "export default function TypographyH4() {\n  return (\n    <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n      People stopped telling jokes\n    </h4>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-inline-code.json b/apps/www/public/r/styles/new-york-v4/typography-inline-code.json
new file mode 100644
index 00000000000..fb672846990
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-inline-code.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-inline-code",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-inline-code.tsx",
+      "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n      @radix-ui/react-alert-dialog\n    </code>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-large.json b/apps/www/public/r/styles/new-york-v4/typography-large.json
new file mode 100644
index 00000000000..5927c1c95b4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-large.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-large",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-large.tsx",
+      "content": "export default function TypographyLarge() {\n  return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-lead.json b/apps/www/public/r/styles/new-york-v4/typography-lead.json
new file mode 100644
index 00000000000..798e2d7c54a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-lead.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-lead",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-lead.tsx",
+      "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-muted-foreground text-xl\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-list.json b/apps/www/public/r/styles/new-york-v4/typography-list.json
new file mode 100644
index 00000000000..4cdae3e597c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-list.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-list",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-list.tsx",
+      "content": "export default function TypographyList() {\n  return (\n    <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-muted.json b/apps/www/public/r/styles/new-york-v4/typography-muted.json
new file mode 100644
index 00000000000..2d0f8258d5a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-muted.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-muted",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-muted.tsx",
+      "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-p.json b/apps/www/public/r/styles/new-york-v4/typography-p.json
new file mode 100644
index 00000000000..fb0bfe4d333
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-p.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-p",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-p.tsx",
+      "content": "export default function TypographyP() {\n  return (\n    <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error of\n      his ways and repealed the joke tax.\n    </p>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-small.json b/apps/www/public/r/styles/new-york-v4/typography-small.json
new file mode 100644
index 00000000000..0a3c04d5df5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-small.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-small",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-small.tsx",
+      "content": "export default function TypographySmall() {\n  return (\n    <small className=\"text-sm leading-none font-medium\">Email address</small>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/typography-table.json b/apps/www/public/r/styles/new-york-v4/typography-table.json
new file mode 100644
index 00000000000..1f5995eb2f0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/typography-table.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-table",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "registry/new-york-v4/examples/typography-table.tsx",
+      "content": "export default function TypographyTable() {\n  return (\n    <div className=\"my-6 w-full overflow-y-auto\">\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              King's Treasury\n            </th>\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Empty\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Overflowing\n            </td>\n          </tr>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Modest\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Satisfied\n            </td>\n          </tr>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Full\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/use-mobile.json b/apps/www/public/r/styles/new-york-v4/use-mobile.json
new file mode 100644
index 00000000000..a5bed5f5550
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/use-mobile.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-mobile",
+  "type": "registry:hook",
+  "files": [
+    {
+      "path": "registry/new-york-v4/hooks/use-mobile.ts",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "type": "registry:hook"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york-v4/utils.json b/apps/www/public/r/styles/new-york-v4/utils.json
new file mode 100644
index 00000000000..3e3c81192b2
--- /dev/null
+++ b/apps/www/public/r/styles/new-york-v4/utils.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "utils",
+  "type": "registry:lib",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "registry/new-york-v4/lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/accordion-demo.json b/apps/www/public/r/styles/new-york/accordion-demo.json
new file mode 100644
index 00000000000..74706892e94
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/accordion-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "accordion"
+  ],
+  "files": [
+    {
+      "path": "examples/accordion-demo.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york/ui/accordion\"\n\nexport default function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other\n          components&apos; aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/accordion.json b/apps/www/public/r/styles/new-york/accordion.json
index 200e7fea432..07752037905 100644
--- a/apps/www/public/r/styles/new-york/accordion.json
+++ b/apps/www/public/r/styles/new-york/accordion.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "accordion",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-accordion"
   ],
   "files": [
     {
       "path": "ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/alert-demo.json b/apps/www/public/r/styles/new-york/alert-demo.json
new file mode 100644
index 00000000000..2c7d9f19f1d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/alert-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default function AlertDemo() {\n  return (\n    <Alert>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/alert-destructive.json b/apps/www/public/r/styles/new-york/alert-destructive.json
new file mode 100644
index 00000000000..d14ba20ff59
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/alert-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-destructive.tsx",
+      "content": "import { AlertCircle } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default function AlertDestructive() {\n  return (\n    <Alert variant=\"destructive\">\n      <AlertCircle className=\"h-4 w-4\" />\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>\n        Your session has expired. Please log in again.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/alert-dialog-demo.json b/apps/www/public/r/styles/new-york/alert-dialog-demo.json
new file mode 100644
index 00000000000..ef61da14469
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/alert-dialog-demo.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "alert-dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/alert-dialog-demo.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/new-york/ui/alert-dialog\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/alert-dialog.json b/apps/www/public/r/styles/new-york/alert-dialog.json
index f8b7b587dad..4a1a1020407 100644
--- a/apps/www/public/r/styles/new-york/alert-dialog.json
+++ b/apps/www/public/r/styles/new-york/alert-dialog.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "alert-dialog",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-alert-dialog"
   ],
diff --git a/apps/www/public/r/styles/new-york/alert.json b/apps/www/public/r/styles/new-york/alert.json
index 3ab155cf268..eda4b86fec4 100644
--- a/apps/www/public/r/styles/new-york/alert.json
+++ b/apps/www/public/r/styles/new-york/alert.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "alert",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/alert.tsx",
diff --git a/apps/www/public/r/styles/new-york/app-01-dark.png b/apps/www/public/r/styles/new-york/app-01-dark.png
new file mode 100644
index 00000000000..1e509caa6c0
Binary files /dev/null and b/apps/www/public/r/styles/new-york/app-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/app-01-light.png b/apps/www/public/r/styles/new-york/app-01-light.png
new file mode 100644
index 00000000000..8fd7d6cabf3
Binary files /dev/null and b/apps/www/public/r/styles/new-york/app-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/app-01.json b/apps/www/public/r/styles/new-york/app-01.json
new file mode 100644
index 00000000000..cab8dd0b316
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/app-01.json
@@ -0,0 +1,74 @@
+{
+  "name": "app-01",
+  "type": "registry:block",
+  "description": "A simple task app.",
+  "dependencies": [
+    "swr"
+  ],
+  "registryDependencies": [
+    "card",
+    "input",
+    "button",
+    "skeleton",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/app-01/page.tsx",
+      "content": "import { AddTaskForm } from \"@/registry/new-york/blocks/app-01/components/add-task-form\"\nimport { TasksList } from \"@/registry/new-york/blocks/app-01/components/tasks-list\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\n\nexport default function AppPage() {\n  return (\n    <div className=\"h-screen flex flex-col items-center justify-center\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Add Task</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <TasksList />\n        </CardContent>\n        <CardFooter>\n          <AddTaskForm />\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/page.tsx"
+    },
+    {
+      "path": "blocks/app-01/api/tasks/route.ts",
+      "content": "import { NextResponse } from \"next/server\"\n\nimport { API_URL } from \"@/registry/new-york/blocks/app-01/lib/constants\"\n\nexport async function GET() {\n  const response = await fetch(API_URL)\n  const data = await response.json()\n  return NextResponse.json(data)\n}\n",
+      "type": "registry:page",
+      "target": "app/api/tasks/route.ts"
+    },
+    {
+      "path": "blocks/app-01/components/add-task-form.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { SubmitButton } from \"@/registry/new-york/blocks/app-01/components/submit-button\"\nimport { useTasks } from \"@/registry/new-york/blocks/app-01/hooks/use-tasks\"\nimport { saveTask } from \"@/registry/new-york/blocks/app-01/lib/actions\"\nimport { Input } from \"@/registry/new-york/ui/input\"\n\nexport function AddTaskForm() {\n  const { mutate } = useTasks()\n  const formRef = React.useRef<HTMLFormElement>(null)\n\n  return (\n    <form\n      action={async (formData) => {\n        await saveTask(formData)\n        void mutate()\n        formRef.current?.reset()\n      }}\n      className=\"w-full\"\n      ref={formRef}\n    >\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"name\" className=\"sr-only\">\n          Task Name\n        </Label>\n        <Input\n          type=\"text\"\n          name=\"name\"\n          required\n          autoComplete=\"off\"\n          placeholder=\"Remember the milk\"\n        />\n        <SubmitButton className=\"w-full\">Add Task</SubmitButton>\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/components/submit-button.tsx",
+      "content": "\"use client\"\n\nimport { Loader2 } from \"lucide-react\"\nimport { useFormStatus } from \"react-dom\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function SubmitButton({\n  children,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { pending } = useFormStatus()\n\n  return (\n    <Button type=\"submit\" disabled={pending} {...props}>\n      {pending && <Loader2 className=\"animate-spin\" />}\n      {children}\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/components/tasks-list.tsx",
+      "content": "\"use client\"\n\nimport { useTasks } from \"@/registry/new-york/blocks/app-01/hooks/use-tasks\"\nimport { Skeleton } from \"@/registry/new-york/ui/skeleton\"\n\nexport function TasksList() {\n  const { tasks, isLoading } = useTasks()\n\n  if (isLoading)\n    return (\n      <div className=\"grid gap-2\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <Skeleton className=\"h-5 w-full\" key={index} />\n        ))}\n      </div>\n    )\n\n  return (\n    <div className=\"grid gap-2\">\n      {tasks.map((task, index) => (\n        <div key={index} className=\"h-5 text-sm\">\n          {task}\n        </div>\n      ))}\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/hooks/use-tasks.ts",
+      "content": "\"use client\"\n\nimport useSWR from \"swr\"\n\nimport { API_URL } from \"@/registry/new-york/blocks/app-01/lib/constants\"\n\nexport function useTasks() {\n  const { data, isLoading, mutate } = useSWR<{ tasks: string[] }>(\n    \"/api/tasks\",\n    async () => {\n      const response = await fetch(API_URL)\n      return response.json()\n    }\n  )\n\n  return { tasks: data?.tasks || [], isLoading, mutate }\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/lib/constants.ts",
+      "content": "export const API_URL = \"https://api.npoint.io/40ac2c2a67c912fa2120\"\n",
+      "type": "registry:lib",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/lib/actions.ts",
+      "content": "\"use server\"\n\nimport { API_URL } from \"@/registry/new-york/blocks/app-01/lib/constants\"\n\nexport async function saveTask(formData: FormData) {\n  const name = formData.get(\"name\")\n\n  // Get current tasks\n  const response = await fetch(API_URL)\n  const data = await response.json()\n  const tasks = data.tasks || []\n\n  // Add new task to array\n  tasks.push(name)\n\n  // Save updated tasks array\n  await fetch(API_URL, {\n    method: \"POST\",\n    body: JSON.stringify({ tasks }),\n  })\n\n  return { success: true }\n}\n",
+      "type": "registry:lib",
+      "target": ""
+    }
+  ],
+  "cssVars": {
+    "light": {
+      "primary": "224.3 76.3% 48%",
+      "primary-foreground": "0 0% 100%"
+    }
+  },
+  "categories": [
+    "apps"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/aspect-ratio-demo.json b/apps/www/public/r/styles/new-york/aspect-ratio-demo.json
new file mode 100644
index 00000000000..73e5f507237
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/aspect-ratio-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "examples/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/new-york/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/aspect-ratio.json b/apps/www/public/r/styles/new-york/aspect-ratio.json
index e0f156b809e..511410bb571 100644
--- a/apps/www/public/r/styles/new-york/aspect-ratio.json
+++ b/apps/www/public/r/styles/new-york/aspect-ratio.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "aspect-ratio",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-aspect-ratio"
   ],
diff --git a/apps/www/public/r/styles/new-york/authentication-01.json b/apps/www/public/r/styles/new-york/authentication-01.json
deleted file mode 100644
index b7ebfa2259e..00000000000
--- a/apps/www/public/r/styles/new-york/authentication-01.json
+++ /dev/null
@@ -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": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/authentication-02.json b/apps/www/public/r/styles/new-york/authentication-02.json
deleted file mode 100644
index e3ffcfe4f78..00000000000
--- a/apps/www/public/r/styles/new-york/authentication-02.json
+++ /dev/null
@@ -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": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/authentication-03.json b/apps/www/public/r/styles/new-york/authentication-03.json
deleted file mode 100644
index 1e3fe071a0b..00000000000
--- a/apps/www/public/r/styles/new-york/authentication-03.json
+++ /dev/null
@@ -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": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/authentication-04.json b/apps/www/public/r/styles/new-york/authentication-04.json
deleted file mode 100644
index 4ff69fe72c5..00000000000
--- a/apps/www/public/r/styles/new-york/authentication-04.json
+++ /dev/null
@@ -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": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/avatar-demo.json b/apps/www/public/r/styles/new-york/avatar-demo.json
new file mode 100644
index 00000000000..97873f88ec0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/avatar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "examples/avatar-demo.tsx",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\n\nexport default function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/avatar.json b/apps/www/public/r/styles/new-york/avatar.json
index 27c3a8cb58a..7215ea17062 100644
--- a/apps/www/public/r/styles/new-york/avatar.json
+++ b/apps/www/public/r/styles/new-york/avatar.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "avatar",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-avatar"
   ],
diff --git a/apps/www/public/r/styles/new-york/badge-demo.json b/apps/www/public/r/styles/new-york/badge-demo.json
new file mode 100644
index 00000000000..ee4847c1965
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/badge-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-demo.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/badge-destructive.json b/apps/www/public/r/styles/new-york/badge-destructive.json
new file mode 100644
index 00000000000..9df79546f45
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/badge-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/badge-outline.json b/apps/www/public/r/styles/new-york/badge-outline.json
new file mode 100644
index 00000000000..5920bc4d0f7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/badge-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-outline.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/badge-secondary.json b/apps/www/public/r/styles/new-york/badge-secondary.json
new file mode 100644
index 00000000000..438168e5033
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/badge-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-secondary",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "examples/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/badge.json b/apps/www/public/r/styles/new-york/badge.json
index bd18ab48130..91a9042fe5c 100644
--- a/apps/www/public/r/styles/new-york/badge.json
+++ b/apps/www/public/r/styles/new-york/badge.json
@@ -1,6 +1,11 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "badge",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
   "files": [
     {
       "path": "ui/badge.tsx",
diff --git a/apps/www/public/r/styles/new-york/breadcrumb-demo.json b/apps/www/public/r/styles/new-york/breadcrumb-demo.json
new file mode 100644
index 00000000000..c198e3d8453
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/breadcrumb-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-demo.tsx",
+      "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/breadcrumb-dropdown.json b/apps/www/public/r/styles/new-york/breadcrumb-dropdown.json
new file mode 100644
index 00000000000..4b486fcdd47
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/breadcrumb-dropdown.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-dropdown",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-dropdown.tsx",
+      "content": "import { ChevronDown, Slash } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              Components\n              <ChevronDown />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/breadcrumb-ellipsis.json b/apps/www/public/r/styles/new-york/breadcrumb-ellipsis.json
new file mode 100644
index 00000000000..300002b0fff
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/breadcrumb-ellipsis.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-ellipsis",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-ellipsis.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbEllipsis />\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/breadcrumb-link.json b/apps/www/public/r/styles/new-york/breadcrumb-link.json
new file mode 100644
index 00000000000..9e8b4df06d8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/breadcrumb-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-link",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-link.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink>\n            <Link href=\"/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/breadcrumb-responsive.json b/apps/www/public/r/styles/new-york/breadcrumb-responsive.json
new file mode 100644
index 00000000000..78bbded7da6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/breadcrumb-responsive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-responsive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nconst items = [\n  { href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Documentation\" },\n  { href: \"#\", label: \"Building Your Application\" },\n  { href: \"#\", label: \"Data Fetching\" },\n  { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        {items.length > ITEMS_TO_DISPLAY ? (\n          <>\n            <BreadcrumbItem>\n              {isDesktop ? (\n                <DropdownMenu open={open} onOpenChange={setOpen}>\n                  <DropdownMenuTrigger\n                    className=\"flex items-center gap-1\"\n                    aria-label=\"Toggle menu\"\n                  >\n                    <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                    {items.slice(1, -2).map((item, index) => (\n                      <DropdownMenuItem key={index}>\n                        <Link href={item.href ? item.href : \"#\"}>\n                          {item.label}\n                        </Link>\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              ) : (\n                <Drawer open={open} onOpenChange={setOpen}>\n                  <DrawerTrigger aria-label=\"Toggle Menu\">\n                    <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                  </DrawerTrigger>\n                  <DrawerContent>\n                    <DrawerHeader className=\"text-left\">\n                      <DrawerTitle>Navigate to</DrawerTitle>\n                      <DrawerDescription>\n                        Select a page to navigate to.\n                      </DrawerDescription>\n                    </DrawerHeader>\n                    <div className=\"grid gap-1 px-4\">\n                      {items.slice(1, -2).map((item, index) => (\n                        <Link\n                          key={index}\n                          href={item.href ? item.href : \"#\"}\n                          className=\"py-1 text-sm\"\n                        >\n                          {item.label}\n                        </Link>\n                      ))}\n                    </div>\n                    <DrawerFooter className=\"pt-4\">\n                      <DrawerClose asChild>\n                        <Button variant=\"outline\">Close</Button>\n                      </DrawerClose>\n                    </DrawerFooter>\n                  </DrawerContent>\n                </Drawer>\n              )}\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n          </>\n        ) : null}\n        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n          <BreadcrumbItem key={index}>\n            {item.href ? (\n              <>\n                <BreadcrumbLink\n                  asChild\n                  className=\"max-w-20 truncate md:max-w-none\"\n                >\n                  <Link href={item.href}>{item.label}</Link>\n                </BreadcrumbLink>\n                <BreadcrumbSeparator />\n              </>\n            ) : (\n              <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                {item.label}\n              </BreadcrumbPage>\n            )}\n          </BreadcrumbItem>\n        ))}\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/breadcrumb-separator.json b/apps/www/public/r/styles/new-york/breadcrumb-separator.json
new file mode 100644
index 00000000000..5bede98f278
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/breadcrumb-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-separator",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "examples/breadcrumb-separator.tsx",
+      "content": "import { Slash } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/breadcrumb.json b/apps/www/public/r/styles/new-york/breadcrumb.json
index 23caf5610de..1dfdd056650 100644
--- a/apps/www/public/r/styles/new-york/breadcrumb.json
+++ b/apps/www/public/r/styles/new-york/breadcrumb.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "breadcrumb",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { ChevronRightIcon, DotsHorizontalIcon } from \"@radix-ui/react-icons\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\"> & {\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    {...props}\n  />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & {\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:size-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRightIcon />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <DotsHorizontalIcon className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\"> & {\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    {...props}\n  />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & {\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:w-3.5 [&>svg]:h-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/button-01-dark.png b/apps/www/public/r/styles/new-york/button-01-dark.png
new file mode 100644
index 00000000000..211238839bb
Binary files /dev/null and b/apps/www/public/r/styles/new-york/button-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/button-01-light.png b/apps/www/public/r/styles/new-york/button-01-light.png
new file mode 100644
index 00000000000..b46751b1ea7
Binary files /dev/null and b/apps/www/public/r/styles/new-york/button-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/button-01.json b/apps/www/public/r/styles/new-york/button-01.json
new file mode 100644
index 00000000000..2b3fe8ab6c9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-01.json
@@ -0,0 +1,25 @@
+{
+  "name": "button-01",
+  "type": "registry:block",
+  "description": "A simple button.",
+  "files": [
+    {
+      "path": "blocks/button-01/page.tsx",
+      "content": "import { AmazingButton } from \"@/registry/new-york/blocks/button-01/components/amazing-button\"\n\nexport default function Page() {\n  return (\n    <div className=\"h-svh flex items-center justify-center\">\n      <AmazingButton />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/page.tsx"
+    },
+    {
+      "path": "blocks/button-01/components/amazing-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function AmazingButton() {\n  return (\n    <Button className=\"bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white\">\n      Amazing Button\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "300px"
+  },
+  "categories": [
+    "misc"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button-as-child.json b/apps/www/public/r/styles/new-york/button-as-child.json
new file mode 100644
index 00000000000..dda54019cc0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-as-child.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-as-child",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-as-child.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonAsChild() {\n  return (\n    <Button asChild>\n      <Link href=\"/login\">Login</Link>\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button-demo.json b/apps/www/public/r/styles/new-york/button-demo.json
new file mode 100644
index 00000000000..c68f3015504
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button-destructive.json b/apps/www/public/r/styles/new-york/button-destructive.json
new file mode 100644
index 00000000000..9a4bd7a6e23
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-destructive.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button-ghost.json b/apps/www/public/r/styles/new-york/button-ghost.json
new file mode 100644
index 00000000000..17a1aba9104
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-ghost.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-ghost",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-ghost.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button-icon.json b/apps/www/public/r/styles/new-york/button-icon.json
new file mode 100644
index 00000000000..5d25d884f16
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-icon",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-icon.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <ChevronRight />\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button-link.json b/apps/www/public/r/styles/new-york/button-link.json
new file mode 100644
index 00000000000..01b102b7d07
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-link.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-link",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-link.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button-loading.json b/apps/www/public/r/styles/new-york/button-loading.json
new file mode 100644
index 00000000000..64b34de52a8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-loading.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-loading",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button-outline.json b/apps/www/public/r/styles/new-york/button-outline.json
new file mode 100644
index 00000000000..8e3df0be852
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-outline.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button-secondary.json b/apps/www/public/r/styles/new-york/button-secondary.json
new file mode 100644
index 00000000000..19a96ea9eca
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-secondary.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-secondary",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-secondary.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button-with-icon.json b/apps/www/public/r/styles/new-york/button-with-icon.json
new file mode 100644
index 00000000000..c90290dbf34
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-with-icon.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-with-icon",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/button-with-icon.tsx",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button>\n      <MailOpen /> Login with Email\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button.json b/apps/www/public/r/styles/new-york/button.json
index 000c42228d3..62957780d39 100644
--- a/apps/www/public/r/styles/new-york/button.json
+++ b/apps/www/public/r/styles/new-york/button.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "button",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/button.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/calendar-01.json b/apps/www/public/r/styles/new-york/calendar-01.json
new file mode 100644
index 00000000000..3429d8ff75c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-01.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple calendar.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar01() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-02.json b/apps/www/public/r/styles/new-york/calendar-02.json
new file mode 100644
index 00000000000..dbf49a6a422
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-02.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with single selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar02() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-03.json b/apps/www/public/r/styles/new-york/calendar-03.json
new file mode 100644
index 00000000000..9eac847c94b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-03.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with multiple selection.",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar03() {\n  const [dates, setDates] = React.useState<Date[]>([\n    new Date(2025, 5, 12),\n    new Date(2025, 6, 24),\n  ])\n\n  return (\n    <Calendar\n      mode=\"multiple\"\n      numberOfMonths={2}\n      defaultMonth={dates[0]}\n      required\n      selected={dates}\n      onSelect={setDates}\n      max={5}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-04.json b/apps/www/public/r/styles/new-york/calendar-04.json
new file mode 100644
index 00000000000..ac46925d135
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-04.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Single month with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar04() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 9),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-05.json b/apps/www/public/r/styles/new-york/calendar-05.json
new file mode 100644
index 00000000000..1a3cc272a71
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-05.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Multiple months with range selection",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-05.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar05() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 6, 15),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-06.json b/apps/www/public/r/styles/new-york/calendar-06.json
new file mode 100644
index 00000000000..3c93a8f865f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-06.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-06.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar06() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 26),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={1}\n        min={5}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        A minimum of 5 days is required\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-07.json b/apps/www/public/r/styles/new-york/calendar-07.json
new file mode 100644
index 00000000000..8143508a202
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-07.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Range selection with minimum and maximum days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar07() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 18),\n    to: new Date(2025, 6, 7),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        defaultMonth={dateRange?.from}\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        min={2}\n        max={20}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        Your stay must be between 2 and 20 nights\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-08.json b/apps/www/public/r/styles/new-york/calendar-08.json
new file mode 100644
index 00000000000..1882fb4e2bd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-08.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-08.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar08() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={{\n        before: new Date(2025, 5, 12),\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-09.json b/apps/www/public/r/styles/new-york/calendar-09.json
new file mode 100644
index 00000000000..64a29e68dc7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-09.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Calendar with disabled weekends",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar09() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={dateRange?.from}\n      selected={dateRange}\n      onSelect={setDateRange}\n      numberOfMonths={2}\n      disabled={{ dayOfWeek: [0, 6] }}\n      className=\"rounded-lg border shadow-sm\"\n      excludeDisabled\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-10.json b/apps/www/public/r/styles/new-york/calendar-10.json
new file mode 100644
index 00000000000..d91ca5e115d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-10.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Today button",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar10() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Card>\n      <CardHeader className=\"relative\">\n        <CardTitle>Appointment</CardTitle>\n        <CardDescription>Find a date</CardDescription>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          className=\"absolute right-4 top-4\"\n          onClick={() => {\n            setMonth(new Date())\n            setDate(new Date())\n          }}\n        >\n          Today\n        </Button>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-11.json b/apps/www/public/r/styles/new-york/calendar-11.json
new file mode 100644
index 00000000000..16f7b180852
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-11.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Start and end of month",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-11.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar11() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 17),\n    to: new Date(2025, 5, 20),\n  })\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-2\">\n      <Calendar\n        mode=\"range\"\n        selected={dateRange}\n        onSelect={setDateRange}\n        numberOfMonths={2}\n        startMonth={new Date(2025, 5, 1)}\n        endMonth={new Date(2025, 6, 31)}\n        disableNavigation\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"text-muted-foreground text-center text-xs\">\n        We are open in June and July only.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-12.json b/apps/www/public/r/styles/new-york/calendar-12.json
new file mode 100644
index 00000000000..ea591262f41
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-12.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Localized calendar",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\nimport { enUS, es } from \"react-day-picker/locale\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nconst localizedStrings = {\n  en: {\n    title: \"Book an appointment\",\n    description: \"Select the dates for your appointment\",\n  },\n  es: {\n    title: \"Reserva una cita\",\n    description: \"Selecciona las fechas para tu cita\",\n  },\n} as const\n\nexport default function Calendar12() {\n  const [locale, setLocale] =\n    React.useState<keyof typeof localizedStrings>(\"es\")\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 8, 9),\n    to: new Date(2025, 8, 17),\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"relative border-b\">\n        <CardTitle>{localizedStrings[locale].title}</CardTitle>\n        <CardDescription>\n          {localizedStrings[locale].description}\n        </CardDescription>\n        <Select\n          value={locale}\n          onValueChange={(value) =>\n            setLocale(value as keyof typeof localizedStrings)\n          }\n        >\n          <SelectTrigger className=\"absolute right-4 top-4 w-[100px]\">\n            <SelectValue placeholder=\"Language\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\">\n            <SelectItem value=\"es\">Español</SelectItem>\n            <SelectItem value=\"en\">English</SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"pt-4\">\n        <Calendar\n          mode=\"range\"\n          selected={dateRange}\n          onSelect={setDateRange}\n          defaultMonth={dateRange?.from}\n          numberOfMonths={2}\n          locale={locale === \"es\" ? es : enUS}\n          className=\"bg-transparent p-0\"\n          buttonVariant=\"outline\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-13.json b/apps/www/public/r/styles/new-york/calendar-13.json
new file mode 100644
index 00000000000..48686de333e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-13.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Month and Year Dropdown",
+  "registryDependencies": [
+    "calendar",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function Calendar13() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    )\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger id=\"dropdown\" className=\"bg-background w-full\">\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-14.json b/apps/www/public/r/styles/new-york/calendar-14.json
new file mode 100644
index 00000000000..08268bb603b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-14.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Booked/Unavailable Days",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-14.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar14() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const bookedDates = Array.from(\n    { length: 12 },\n    (_, i) => new Date(2025, 5, 15 + i)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      disabled={bookedDates}\n      modifiers={{\n        booked: bookedDates,\n      }}\n      modifiersClassNames={{\n        booked: \"[&>button]:line-through opacity-100\",\n      }}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-15.json b/apps/www/public/r/styles/new-york/calendar-15.json
new file mode 100644
index 00000000000..4e0c8d11fd3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-15.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With Week Numbers",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar15() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n      showWeekNumber\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-16.json b/apps/www/public/r/styles/new-york/calendar-16.json
new file mode 100644
index 00000000000..b9ed7abaebf
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-16.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Clock2Icon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } 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 Calendar16() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-6 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-from\">Start Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-from\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"10:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n        <div className=\"flex w-full flex-col gap-3\">\n          <Label htmlFor=\"time-to\">End Time</Label>\n          <div className=\"relative flex w-full items-center gap-2\">\n            <Clock2Icon className=\"text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none\" />\n            <Input\n              id=\"time-to\"\n              type=\"time\"\n              step=\"1\"\n              defaultValue=\"12:30:00\"\n              className=\"appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-17.json b/apps/www/public/r/styles/new-york/calendar-17.json
new file mode 100644
index 00000000000..ade5449c4a4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-17.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-17",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time picker inline",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-17.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } 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 Calendar17() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0 [--cell-size:2.8rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-from\" className=\"sr-only\">\n            Start Time\n          </Label>\n          <Input\n            id=\"time-from\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <span>-</span>\n        <div className=\"flex-1\">\n          <Label htmlFor=\"time-to\" className=\"sr-only\">\n            End Time\n          </Label>\n          <Input\n            id=\"time-to\"\n            type=\"time\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-18.json b/apps/www/public/r/styles/new-york/calendar-18.json
new file mode 100644
index 00000000000..cbbeaa7e065
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-18.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-18",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Variable size",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-18.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar18() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      buttonVariant=\"ghost\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-19.json b/apps/www/public/r/styles/new-york/calendar-19.json
new file mode 100644
index 00000000000..c514d38355d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-19.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-19",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With presets",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-19.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar19() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"max-w-[300px] py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={date}\n          className=\"bg-transparent p-0 [--cell-size:2.375rem]\"\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-wrap gap-2 border-t px-4 pb-0 pt-4\">\n        {[\n          { label: \"Today\", value: 0 },\n          { label: \"Tomorrow\", value: 1 },\n          { label: \"In 3 days\", value: 3 },\n          { label: \"In a week\", value: 7 },\n          { label: \"In 2 weeks\", value: 14 },\n        ].map((preset) => (\n          <Button\n            key={preset.value}\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-1\"\n            onClick={() => {\n              const newDate = addDays(new Date(), preset.value)\n              setDate(newDate)\n            }}\n          >\n            {preset.label}\n          </Button>\n        ))}\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-20.json b/apps/www/public/r/styles/new-york/calendar-20.json
new file mode 100644
index 00000000000..4429f6dd877
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-20.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-20",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With time presets",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-20.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nexport default function Calendar20() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n  const [selectedTime, setSelectedTime] = React.useState<string | null>(\"10:00\")\n  const timeSlots = Array.from({ length: 37 }, (_, i) => {\n    const totalMinutes = i * 15\n    const hour = Math.floor(totalMinutes / 60) + 9\n    const minute = totalMinutes % 60\n    return `${hour.toString().padStart(2, \"0\")}:${minute\n      .toString()\n      .padStart(2, \"0\")}`\n  })\n\n  const bookedDates = Array.from(\n    { length: 3 },\n    (_, i) => new Date(2025, 5, 17 + i)\n  )\n\n  return (\n    <Card className=\"gap-0 p-0\">\n      <CardContent className=\"relative p-0 md:pr-48\">\n        <div className=\"p-6\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={date}\n            disabled={bookedDates}\n            showOutsideDays={false}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n            className=\"bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]\"\n            formatters={{\n              formatWeekdayName: (date) => {\n                return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n              },\n            }}\n          />\n        </div>\n        <div className=\"no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0\">\n          <div className=\"grid gap-2\">\n            {timeSlots.map((time) => (\n              <Button\n                key={time}\n                variant={selectedTime === time ? \"default\" : \"outline\"}\n                onClick={() => setSelectedTime(time)}\n                className=\"w-full shadow-none\"\n              >\n                {time}\n              </Button>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-4 border-t !py-5 px-6 md:flex-row\">\n        <div className=\"text-sm\">\n          {date && selectedTime ? (\n            <>\n              Your meeting is booked for{\" \"}\n              <span className=\"font-medium\">\n                {\" \"}\n                {date?.toLocaleDateString(\"en-US\", {\n                  weekday: \"long\",\n                  day: \"numeric\",\n                  month: \"long\",\n                })}{\" \"}\n              </span>\n              at <span className=\"font-medium\">{selectedTime}</span>.\n            </>\n          ) : (\n            <>Select a date and time for your meeting.</>\n          )}\n        </div>\n        <Button\n          disabled={!date || !selectedTime}\n          className=\"w-full md:ml-auto md:w-auto\"\n          variant=\"outline\"\n        >\n          Continue\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-21.json b/apps/www/public/r/styles/new-york/calendar-21.json
new file mode 100644
index 00000000000..4e085b2e01f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-21.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-21",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Custom days and formatters",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-21.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar, CalendarDayButton } from \"@/registry/new-york/ui/calendar\"\n\nexport default function Calendar21() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 12),\n    to: new Date(2025, 5, 17),\n  })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      defaultMonth={range?.from}\n      selected={range}\n      onSelect={setRange}\n      numberOfMonths={1}\n      captionLayout=\"dropdown\"\n      className=\"rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]\"\n      formatters={{\n        formatMonthDropdown: (date) => {\n          return date.toLocaleString(\"default\", { month: \"long\" })\n        },\n      }}\n      components={{\n        DayButton: ({ children, modifiers, day, ...props }) => {\n          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6\n\n          return (\n            <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n              {children}\n              {!modifiers.outside && <span>{isWeekend ? \"$220\" : \"$100\"}</span>}\n            </CalendarDayButton>\n          )\n        },\n      }}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-22.json b/apps/www/public/r/styles/new-york/calendar-22.json
new file mode 100644
index 00000000000..d9af6df607a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-22.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-22",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-22.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar22() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-23.json b/apps/www/public/r/styles/new-york/calendar-23.json
new file mode 100644
index 00000000000..a8d3e19af90
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-23.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-23",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-23.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar23() {\n  const [range, setRange] = React.useState<DateRange | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-24.json b/apps/www/public/r/styles/new-york/calendar-24.json
new file mode 100644
index 00000000000..2733e739775
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-24.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-24",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-24.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar24() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-25.json b/apps/www/public/r/styles/new-york/calendar-25.json
new file mode 100644
index 00000000000..92aa408dfee
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-25.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-25",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date and Time range picker",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-25.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar25() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date\"\n              className=\"w-full justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-26.json b/apps/www/public/r/styles/new-york/calendar-26.json
new file mode 100644
index 00000000000..790ab1dd0f1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-26.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-26",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date range picker with time",
+  "registryDependencies": [
+    "calendar",
+    "popover",
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-26.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-27.json b/apps/www/public/r/styles/new-york/calendar-27.json
new file mode 100644
index 00000000000..20781d5bf31
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-27.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-27",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Chart filter",
+  "registryDependencies": [
+    "calendar",
+    "chart",
+    "card",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-27.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--primary))\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"@md/card:grid relative flex flex-col border-b\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"absolute right-4 top-4\">\n              <CalendarIcon />\n              {range?.from && range?.to\n                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                : \"June 2025\"}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              className=\"w-full\"\n              mode=\"range\"\n              defaultMonth={range?.from}\n              selected={range}\n              onSelect={setRange}\n              disableNavigation\n              startMonth={range?.from}\n              fixedWeeks\n              showOutsideDays\n              disabled={{\n                after: new Date(2025, 5, 31),\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t pt-6\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-28.json b/apps/www/public/r/styles/new-york/calendar-28.json
new file mode 100644
index 00000000000..7dd46474a72
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-28.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-28",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Input with date picker",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-28.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nfunction isValidDate(date: Date | undefined) {\n  if (!date) {\n    return false\n  }\n  return !isNaN(date.getTime())\n}\n\nexport default function Calendar28() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n  const [value, setValue] = React.useState(formatDate(date))\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Subscription Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"June 01, 2025\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            const date = new Date(e.target.value)\n            setValue(e.target.value)\n            if (isValidDate(date)) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-auto overflow-hidden p-0\"\n            align=\"end\"\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-29.json b/apps/www/public/r/styles/new-york/calendar-29.json
new file mode 100644
index 00000000000..8abbeb587e4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-29.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-29",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Natural language date picker",
+  "dependencies": [
+    "chrono-node"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-29.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { parseDate } from \"chrono-node\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\"\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  })\n}\n\nexport default function Calendar29() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"In 2 days\")\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  )\n  const [month, setMonth] = React.useState<Date | undefined>(date)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value)\n            const date = parseDate(e.target.value)\n            if (date) {\n              setDate(date)\n              setMonth(date)\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault()\n              setOpen(true)\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date)\n                setValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-30.json b/apps/www/public/r/styles/new-york/calendar-30.json
new file mode 100644
index 00000000000..db134b9b347
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-30.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-30",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With little-date",
+  "registryDependencies": [
+    "calendar",
+    "input",
+    "label",
+    "popover",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-30.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function Calendar30() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 4),\n    to: new Date(2025, 5, 10),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"dates\" className=\"px-1\">\n        Select your stay\n      </Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"dates\"\n            className=\"w-56 justify-between font-normal\"\n          >\n            {range?.from && range?.to\n              ? formatDateRange(range.from, range.to, {\n                  includeTime: false,\n                })\n              : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            selected={range}\n            captionLayout=\"dropdown\"\n            onSelect={(range) => {\n              setRange(range)\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-31.json b/apps/www/public/r/styles/new-york/calendar-31.json
new file mode 100644
index 00000000000..00f7278c51b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-31.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-31",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "With event slots",
+  "registryDependencies": [
+    "calendar",
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-31.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatDateRange } from \"little-date\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york/ui/card\"\n\nconst events = [\n  {\n    title: \"Team Sync Meeting\",\n    from: \"2025-06-12T09:00:00\",\n    to: \"2025-06-12T10:00:00\",\n  },\n  {\n    title: \"Design Review\",\n    from: \"2025-06-12T11:30:00\",\n    to: \"2025-06-12T12:30:00\",\n  },\n  {\n    title: \"Client Presentation\",\n    from: \"2025-06-12T14:00:00\",\n    to: \"2025-06-12T15:00:00\",\n  },\n]\n\nexport default function Calendar31() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <Card className=\"w-fit py-4\">\n      <CardContent className=\"px-4\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          className=\"bg-transparent p-0\"\n          required\n        />\n      </CardContent>\n      <CardFooter className=\"flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4\">\n        <div className=\"flex w-full items-center justify-between px-1\">\n          <div className=\"text-sm font-medium\">\n            {date?.toLocaleDateString(\"en-US\", {\n              day: \"numeric\",\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-6 w-6\"\n            title=\"Add Event\"\n          >\n            <PlusIcon />\n            <span className=\"sr-only\">Add Event</span>\n          </Button>\n        </div>\n        <div className=\"flex w-full flex-col gap-2\">\n          {events.map((event) => (\n            <div\n              key={event.title}\n              className=\"bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full\"\n            >\n              <div className=\"font-medium\">{event.title}</div>\n              <div className=\"text-muted-foreground text-xs\">\n                {formatDateRange(new Date(event.from), new Date(event.to))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "700px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-32.json b/apps/www/public/r/styles/new-york/calendar-32.json
new file mode 100644
index 00000000000..610b102bc9a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-32.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-32",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Date picker in a drawer",
+  "registryDependencies": [
+    "calendar",
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "blocks/calendar-32.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarPlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function Calendar32() {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <CalendarPlusIcon />\n          </Button>\n        </DrawerTrigger>\n        <DrawerContent className=\"w-auto overflow-hidden p-0\">\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Select date</DrawerTitle>\n            <DrawerDescription>Set your date of birth</DrawerDescription>\n          </DrawerHeader>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date)\n              setOpen(false)\n            }}\n            className=\"mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]\"\n          />\n        </DrawerContent>\n      </Drawer>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        This example works best on mobile.\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "600px",
+    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+    "mobile": "component"
+  },
+  "categories": [
+    "calendar",
+    "date"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-demo.json b/apps/www/public/r/styles/new-york/calendar-demo.json
new file mode 100644
index 00000000000..361fcd28dae
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport default function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow\"\n    />\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar-form.json b/apps/www/public/r/styles/new-york/calendar-form.json
new file mode 100644
index 00000000000..3f1a22cb414
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/calendar-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/calendar-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/calendar.json b/apps/www/public/r/styles/new-york/calendar.json
index 2078a379618..e492d9aa27e 100644
--- a/apps/www/public/r/styles/new-york/calendar.json
+++ b/apps/www/public/r/styles/new-york/calendar.json
@@ -1,8 +1,10 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "calendar",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "react-day-picker@8.10.1",
+    "react-day-picker@latest",
     "date-fns"
   ],
   "registryDependencies": [
@@ -11,7 +13,7 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"bg-popover absolute inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-[--cell-size] select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-muted-foreground select-none text-[0.8rem]\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"bg-accent rounded-l-md\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"bg-accent rounded-r-md\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-[--cell-size] items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/card-demo.json b/apps/www/public/r/styles/new-york/card-demo.json
new file mode 100644
index 00000000000..6c1b84a38b1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/card-demo.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "card",
+    "button",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "examples/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { 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 { Switch } from \"@/registry/new-york/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/card-with-form.json b/apps/www/public/r/styles/new-york/card-with-form.json
new file mode 100644
index 00000000000..396d3554cc3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/card-with-form.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-with-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/card-with-form.tsx",
+      "content": "import * as React from \"react\"\n\nimport { 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\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function CardWithForm() {\n  return (\n    <Card className=\"w-[350px]\">\n      <CardHeader>\n        <CardTitle>Create project</CardTitle>\n        <CardDescription>Deploy your new project in one-click.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <div className=\"grid w-full items-center gap-4\">\n            <div className=\"flex flex-col space-y-1.5\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" placeholder=\"Name of your project\" />\n            </div>\n            <div className=\"flex flex-col space-y-1.5\">\n              <Label htmlFor=\"framework\">Framework</Label>\n              <Select>\n                <SelectTrigger id=\"framework\">\n                  <SelectValue placeholder=\"Select\" />\n                </SelectTrigger>\n                <SelectContent position=\"popper\">\n                  <SelectItem value=\"next\">Next.js</SelectItem>\n                  <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                  <SelectItem value=\"astro\">Astro</SelectItem>\n                  <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex justify-between\">\n        <Button variant=\"outline\">Cancel</Button>\n        <Button>Deploy</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/card.json b/apps/www/public/r/styles/new-york/card.json
index 31436e3e6f6..ba037ae57b8 100644
--- a/apps/www/public/r/styles/new-york/card.json
+++ b/apps/www/public/r/styles/new-york/card.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "card",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/carousel-api.json b/apps/www/public/r/styles/new-york/carousel-api.json
new file mode 100644
index 00000000000..74167edcac4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/carousel-api.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-api",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-api.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) {\n      return\n    }\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap() + 1)\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1)\n    })\n  }, [api])\n\n  return (\n    <div className=\"mx-auto max-w-xs\">\n      <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious />\n        <CarouselNext />\n      </Carousel>\n      <div className=\"py-2 text-center text-sm text-muted-foreground\">\n        Slide {current} of {count}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/carousel-demo.json b/apps/www/public/r/styles/new-york/carousel-demo.json
new file mode 100644
index 00000000000..4bdb332b27e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/carousel-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/carousel-orientation.json b/apps/www/public/r/styles/new-york/carousel-orientation.json
new file mode 100644
index 00000000000..1dc8eebf7c4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/carousel-orientation.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-orientation",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-orientation.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselOrientation() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      orientation=\"vertical\"\n      className=\"w-full max-w-xs\"\n    >\n      <CarouselContent className=\"-mt-1 h-[200px]\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/carousel-plugin.json b/apps/www/public/r/styles/new-york/carousel-plugin.json
new file mode 100644
index 00000000000..cc29a0053de
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/carousel-plugin.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-plugin",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-plugin.tsx",
+      "content": "import * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselPlugin() {\n  const plugin = React.useRef(\n    Autoplay({ delay: 2000, stopOnInteraction: true })\n  )\n\n  return (\n    <Carousel\n      plugins={[plugin.current]}\n      className=\"w-full max-w-xs\"\n      onMouseEnter={plugin.current.stop}\n      onMouseLeave={plugin.current.reset}\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/carousel-size.json b/apps/www/public/r/styles/new-york/carousel-size.json
new file mode 100644
index 00000000000..6d890f1a5f5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/carousel-size.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-size",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-size.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselSize() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      className=\"w-full max-w-sm\"\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/carousel-spacing.json b/apps/www/public/r/styles/new-york/carousel-spacing.json
new file mode 100644
index 00000000000..a3d693b310c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/carousel-spacing.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-spacing",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "examples/carousel-spacing.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport default function CarouselSpacing() {\n  return (\n    <Carousel className=\"w-full max-w-sm\">\n      <CarouselContent className=\"-ml-1\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/carousel.json b/apps/www/public/r/styles/new-york/carousel.json
index 84f8290c59e..6151aa3e483 100644
--- a/apps/www/public/r/styles/new-york/carousel.json
+++ b/apps/www/public/r/styles/new-york/carousel.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "carousel",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "embla-carousel-react"
   ],
@@ -10,7 +12,7 @@
   "files": [
     {
       "path": "ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = \"horizontal\",\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n      },\n      plugins\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n    const onSelect = React.useCallback((api: CarouselApi) => {\n      if (!api) {\n        return\n      }\n\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev()\n    }, [api])\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext()\n    }, [api])\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === \"ArrowLeft\") {\n          event.preventDefault()\n          scrollPrev()\n        } else if (event.key === \"ArrowRight\") {\n          event.preventDefault()\n          scrollNext()\n        }\n      },\n      [scrollPrev, scrollNext]\n    )\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return\n      }\n\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) {\n        return\n      }\n\n      onSelect(api)\n      api.on(\"reInit\", onSelect)\n      api.on(\"select\", onSelect)\n\n      return () => {\n        api?.off(\"select\", onSelect)\n      }\n    }, [api, onSelect])\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api: api,\n          opts,\n          orientation:\n            orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\n        }}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    )\n  }\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\">\n      <div\n        ref={ref}\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute  h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-left-12 top-1/2 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeftIcon className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-right-12 top-1/2 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRightIcon className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = \"horizontal\",\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n      },\n      plugins\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n    const onSelect = React.useCallback((api: CarouselApi) => {\n      if (!api) {\n        return\n      }\n\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev()\n    }, [api])\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext()\n    }, [api])\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === \"ArrowLeft\") {\n          event.preventDefault()\n          scrollPrev()\n        } else if (event.key === \"ArrowRight\") {\n          event.preventDefault()\n          scrollNext()\n        }\n      },\n      [scrollPrev, scrollNext]\n    )\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return\n      }\n\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) {\n        return\n      }\n\n      onSelect(api)\n      api.on(\"reInit\", onSelect)\n      api.on(\"select\", onSelect)\n\n      return () => {\n        api?.off(\"select\", onSelect)\n      }\n    }, [api, onSelect])\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api: api,\n          opts,\n          orientation:\n            orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\n        }}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    )\n  }\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\">\n      <div\n        ref={ref}\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute  h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-left-12 top-1/2 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-right-12 top-1/2 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/chart-area-axes.json b/apps/www/public/r/styles/new-york/chart-area-axes.json
index 69d6fc397c0..3a918c41da2 100644
--- a/apps/www/public/r/styles/new-york/chart-area-axes.json
+++ b/apps/www/public/r/styles/new-york/chart-area-axes.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-axes",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-axes.tsx",
+      "path": "charts/chart-area-axes.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Axes</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -20,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={3}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-area-default.json b/apps/www/public/r/styles/new-york/chart-area-default.json
index bad215614a3..0e00173d5c6 100644
--- a/apps/www/public/r/styles/new-york/chart-area-default.json
+++ b/apps/www/public/r/styles/new-york/chart-area-default.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-default",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-default.tsx",
+      "path": "charts/chart-area-default.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-area-gradient.json b/apps/www/public/r/styles/new-york/chart-area-gradient.json
index ae2381f1621..ad50586d5a7 100644
--- a/apps/www/public/r/styles/new-york/chart-area-gradient.json
+++ b/apps/www/public/r/styles/new-york/chart-area-gradient.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-gradient",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-gradient.tsx",
+      "path": "charts/chart-area-gradient.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Gradient</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-area-icons.json b/apps/www/public/r/styles/new-york/chart-area-icons.json
index a49b5fa1f84..b93f86af9f4 100644
--- a/apps/www/public/r/styles/new-york/chart-area-icons.json
+++ b/apps/www/public/r/styles/new-york/chart-area-icons.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-icons",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-icons.tsx",
+      "path": "charts/chart-area-icons.tsx",
       "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: TrendingDown,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: TrendingUp,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-area-interactive.json b/apps/www/public/r/styles/new-york/chart-area-interactive.json
index 69928671301..e84fcfe99f4 100644
--- a/apps/www/public/r/styles/new-york/chart-area-interactive.json
+++ b/apps/www/public/r/styles/new-york/chart-area-interactive.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-interactive",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart",
@@ -8,9 +10,14 @@
   ],
   "files": [
     {
-      "path": "block/chart-area-interactive.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const now = new Date()\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    now.setDate(now.getDate() - daysToSubtract)\n    return date >= now\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n        <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n          <CardTitle>Area Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <Select value={timeRange} onValueChange={setTimeRange}>\n          <SelectTrigger\n            className=\"w-[160px] rounded-lg sm:ml-auto\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Last 3 months\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90d\" className=\"rounded-lg\">\n              Last 3 months\n            </SelectItem>\n            <SelectItem value=\"30d\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7d\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
+      "path": "charts/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n        <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n          <CardTitle>Area Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <Select value={timeRange} onValueChange={setTimeRange}>\n          <SelectTrigger\n            className=\"w-[160px] rounded-lg sm:ml-auto\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Last 3 months\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90d\" className=\"rounded-lg\">\n              Last 3 months\n            </SelectItem>\n            <SelectItem value=\"30d\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7d\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-area-legend.json b/apps/www/public/r/styles/new-york/chart-area-legend.json
index 1ba6488c396..c2071788d71 100644
--- a/apps/www/public/r/styles/new-york/chart-area-legend.json
+++ b/apps/www/public/r/styles/new-york/chart-area-legend.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-legend",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-legend.tsx",
+      "path": "charts/chart-area-legend.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-area-linear.json b/apps/www/public/r/styles/new-york/chart-area-linear.json
index 5ec8d14a048..688afc066a9 100644
--- a/apps/www/public/r/styles/new-york/chart-area-linear.json
+++ b/apps/www/public/r/styles/new-york/chart-area-linear.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-linear",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-linear.tsx",
+      "path": "charts/chart-area-linear.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Linear</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"linear\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-area-stacked-expand.json b/apps/www/public/r/styles/new-york/chart-area-stacked-expand.json
index 74bef263949..91feaf37204 100644
--- a/apps/www/public/r/styles/new-york/chart-area-stacked-expand.json
+++ b/apps/www/public/r/styles/new-york/chart-area-stacked-expand.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-stacked-expand",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked-expand.tsx",
+      "path": "charts/chart-area-stacked-expand.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n  { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n  { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n  { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n  { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n  { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-3))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n              top: 12,\n            }}\n            stackOffset=\"expand\"\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"other\"\n              type=\"natural\"\n              fill=\"var(--color-other)\"\n              fillOpacity={0.1}\n              stroke=\"var(--color-other)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-area-stacked.json b/apps/www/public/r/styles/new-york/chart-area-stacked.json
index 7b984455b49..ef67ea3e885 100644
--- a/apps/www/public/r/styles/new-york/chart-area-stacked.json
+++ b/apps/www/public/r/styles/new-york/chart-area-stacked.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-stacked",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked.tsx",
+      "path": "charts/chart-area-stacked.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-area-step.json b/apps/www/public/r/styles/new-york/chart-area-step.json
index eb740e8b9fb..6dc2d8efe44 100644
--- a/apps/www/public/r/styles/new-york/chart-area-step.json
+++ b/apps/www/public/r/styles/new-york/chart-area-step.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-area-step",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-step.tsx",
+      "path": "charts/chart-area-step.tsx",
       "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Activity,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Step</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"step\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-active.json b/apps/www/public/r/styles/new-york/chart-bar-active.json
index c373e0bc156..a7210f2f5d8 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-active.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-active.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-active",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-active.tsx",
+      "path": "charts/chart-bar-active.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              activeIndex={2}\n              activeBar={({ ...props }) => {\n                return (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                )\n              }}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-default.json b/apps/www/public/r/styles/new-york/chart-bar-default.json
index d1f12a587c9..179af19cd90 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-default.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-default.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-default",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-default.tsx",
+      "path": "charts/chart-bar-default.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-demo-axis.json b/apps/www/public/r/styles/new-york/chart-bar-demo-axis.json
new file mode 100644
index 00000000000..be930f91aeb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/chart-bar-demo-axis.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-axis",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-axis.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-demo-grid.json b/apps/www/public/r/styles/new-york/chart-bar-demo-grid.json
new file mode 100644
index 00000000000..77538b2465f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/chart-bar-demo-grid.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-grid",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-grid.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-demo-legend.json b/apps/www/public/r/styles/new-york/chart-bar-demo-legend.json
new file mode 100644
index 00000000000..8c8a9a0e8fe
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/chart-bar-demo-legend.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-legend",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-legend.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <ChartLegend content={<ChartLegendContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-demo-tooltip.json b/apps/www/public/r/styles/new-york/chart-bar-demo-tooltip.json
new file mode 100644
index 00000000000..87705dc8739
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/chart-bar-demo-tooltip.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo-tooltip",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo-tooltip.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-demo.json b/apps/www/public/r/styles/new-york/chart-bar-demo.json
new file mode 100644
index 00000000000..6557b543280
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/chart-bar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-bar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-bar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-horizontal.json b/apps/www/public/r/styles/new-york/chart-bar-horizontal.json
index 2b77781d988..0247254f219 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-horizontal.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-horizontal.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-horizontal",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-horizontal.tsx",
+      "path": "charts/chart-bar-horizontal.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Horizontal</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: -20,\n            }}\n          >\n            <XAxis type=\"number\" dataKey=\"desktop\" hide />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-interactive.json b/apps/www/public/r/styles/new-york/chart-bar-interactive.json
index d25b28e849d..44b072947e5 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-interactive.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-interactive.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-interactive",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-interactive.tsx",
+      "path": "charts/chart-bar-interactive.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Bar Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-label-custom.json b/apps/www/public/r/styles/new-york/chart-bar-label-custom.json
index df5566620fa..bc03827c278 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-label-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-label-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-label-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label-custom.tsx",
+      "path": "charts/chart-bar-label-custom.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  label: {\n    color: \"hsl(var(--background))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              right: 16,\n            }}\n          >\n            <CartesianGrid horizontal={false} />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n              hide\n            />\n            <XAxis dataKey=\"desktop\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Bar\n              dataKey=\"desktop\"\n              layout=\"vertical\"\n              fill=\"var(--color-desktop)\"\n              radius={4}\n            >\n              <LabelList\n                dataKey=\"month\"\n                position=\"insideLeft\"\n                offset={8}\n                className=\"fill-[--color-label]\"\n                fontSize={12}\n              />\n              <LabelList\n                dataKey=\"desktop\"\n                position=\"right\"\n                offset={8}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-label.json b/apps/www/public/r/styles/new-york/chart-bar-label.json
index 8e0f60e14f9..4a236c9316e 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-label.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-label.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-label",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label.tsx",
+      "path": "charts/chart-bar-label.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-mixed.json b/apps/www/public/r/styles/new-york/chart-bar-mixed.json
index 7bd8637bc2d..36a77415d7c 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-mixed.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-mixed.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-mixed",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-mixed.tsx",
+      "path": "charts/chart-bar-mixed.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Mixed</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: 0,\n            }}\n          >\n            <YAxis\n              dataKey=\"browser\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <XAxis dataKey=\"visitors\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-multiple.json b/apps/www/public/r/styles/new-york/chart-bar-multiple.json
index 2da7ae65b9f..4e100e2a68c 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-multiple.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-multiple.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-multiple",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-multiple.tsx",
+      "path": "charts/chart-bar-multiple.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dashed\" />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n            <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-negative.json b/apps/www/public/r/styles/new-york/chart-bar-negative.json
index 8f07643ac27..fffb5c7f2cc 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-negative.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-negative.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-negative",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-negative.tsx",
+      "path": "charts/chart-bar-negative.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 205 },\n  { month: \"March\", visitors: -207 },\n  { month: \"April\", visitors: 173 },\n  { month: \"May\", visitors: -209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Negative</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel hideIndicator />}\n            />\n            <Bar dataKey=\"visitors\">\n              <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n              {chartData.map((item) => (\n                <Cell\n                  key={item.month}\n                  fill={\n                    item.visitors > 0\n                      ? \"hsl(var(--chart-1))\"\n                      : \"hsl(var(--chart-2))\"\n                  }\n                />\n              ))}\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-stacked.json b/apps/www/public/r/styles/new-york/chart-bar-stacked.json
index 0997886d2db..7c8ede31179 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-stacked.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-stacked.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-bar-stacked",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-stacked.tsx",
+      "path": "charts/chart-bar-stacked.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            <Bar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              fill=\"var(--color-desktop)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"mobile\"\n              stackId=\"a\"\n              fill=\"var(--color-mobile)\"\n              radius={[4, 4, 0, 0]}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-line-default.json b/apps/www/public/r/styles/new-york/chart-line-default.json
index 1339ff3debc..9cf435e22fd 100644
--- a/apps/www/public/r/styles/new-york/chart-line-default.json
+++ b/apps/www/public/r/styles/new-york/chart-line-default.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-default",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-default.tsx",
+      "path": "charts/chart-line-default.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-line-dots-colors.json b/apps/www/public/r/styles/new-york/chart-line-dots-colors.json
index 568eda6a914..96c75f2d1c1 100644
--- a/apps/www/public/r/styles/new-york/chart-line-dots-colors.json
+++ b/apps/www/public/r/styles/new-york/chart-line-dots-colors.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-dots-colors",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-colors.tsx",
+      "path": "charts/chart-line-dots-colors.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots Colors</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={({ payload, ...props }) => {\n                return (\n                  <Dot\n                    key={payload.browser}\n                    r={5}\n                    cx={props.cx}\n                    cy={props.cy}\n                    fill={payload.fill}\n                    stroke={payload.fill}\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-line-dots-custom.json b/apps/www/public/r/styles/new-york/chart-line-dots-custom.json
index f71f22ac2e6..61ca9189f4a 100644
--- a/apps/www/public/r/styles/new-york/chart-line-dots-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-line-dots-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-dots-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-custom.tsx",
+      "path": "charts/chart-line-dots-custom.tsx",
       "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={({ cx, cy, payload }) => {\n                const r = 24\n                return (\n                  <GitCommitVertical\n                    key={payload.month}\n                    x={cx - r / 2}\n                    y={cy - r / 2}\n                    width={r}\n                    height={r}\n                    fill=\"hsl(var(--background))\"\n                    stroke=\"var(--color-desktop)\"\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-line-dots.json b/apps/www/public/r/styles/new-york/chart-line-dots.json
index a7e10abdd1f..30dc6b15e7c 100644
--- a/apps/www/public/r/styles/new-york/chart-line-dots.json
+++ b/apps/www/public/r/styles/new-york/chart-line-dots.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-dots",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots.tsx",
+      "path": "charts/chart-line-dots.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-line-interactive.json b/apps/www/public/r/styles/new-york/chart-line-interactive.json
index 8ecade783d4..ca50122446a 100644
--- a/apps/www/public/r/styles/new-york/chart-line-interactive.json
+++ b/apps/www/public/r/styles/new-york/chart-line-interactive.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-interactive",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-interactive.tsx",
+      "path": "charts/chart-line-interactive.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Line Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Line\n              dataKey={activeChart}\n              type=\"monotone\"\n              stroke={`var(--color-${activeChart})`}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-line-label-custom.json b/apps/www/public/r/styles/new-york/chart-line-label-custom.json
index 5dbe246e6fa..2ab577700e3 100644
--- a/apps/www/public/r/styles/new-york/chart-line-label-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-line-label-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-label-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label-custom.tsx",
+      "path": "charts/chart-line-label-custom.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-visitors)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n                dataKey=\"browser\"\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-line-label.json b/apps/www/public/r/styles/new-york/chart-line-label.json
index fa75bd9b986..e179dbda377 100644
--- a/apps/www/public/r/styles/new-york/chart-line-label.json
+++ b/apps/www/public/r/styles/new-york/chart-line-label.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-label",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label.tsx",
+      "path": "charts/chart-line-label.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-line-linear.json b/apps/www/public/r/styles/new-york/chart-line-linear.json
index 7181a9ce351..489b6b61970 100644
--- a/apps/www/public/r/styles/new-york/chart-line-linear.json
+++ b/apps/www/public/r/styles/new-york/chart-line-linear.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-linear",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-linear.tsx",
+      "path": "charts/chart-line-linear.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Linear</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"linear\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-line-multiple.json b/apps/www/public/r/styles/new-york/chart-line-multiple.json
index c715bc07673..9256347a4d4 100644
--- a/apps/www/public/r/styles/new-york/chart-line-multiple.json
+++ b/apps/www/public/r/styles/new-york/chart-line-multiple.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-multiple",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-multiple.tsx",
+      "path": "charts/chart-line-multiple.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Line\n              dataKey=\"desktop\"\n              type=\"monotone\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n            <Line\n              dataKey=\"mobile\"\n              type=\"monotone\"\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-line-step.json b/apps/www/public/r/styles/new-york/chart-line-step.json
index 2d741ca400e..1c501018b62 100644
--- a/apps/www/public/r/styles/new-york/chart-line-step.json
+++ b/apps/www/public/r/styles/new-york/chart-line-step.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-line-step",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-step.tsx",
+      "path": "charts/chart-line-step.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Step</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"step\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-donut-active.json b/apps/www/public/r/styles/new-york/chart-pie-donut-active.json
index 793029f6d5e..413f21c983f 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-donut-active.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-donut-active.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-donut-active",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-active.tsx",
+      "path": "charts/chart-pie-donut-active.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={0}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <Sector {...props} outerRadius={outerRadius + 10} />\n              )}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-donut-text.json b/apps/www/public/r/styles/new-york/chart-pie-donut-text.json
index 88b8235067a..df73f7a9f6d 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-donut-text.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-donut-text.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-donut-text",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-text.tsx",
+      "path": "charts/chart-pie-donut-text.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = React.useMemo(() => {\n    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut with Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-donut.json b/apps/www/public/r/styles/new-york/chart-pie-donut.json
index 78248eafa7e..49a4602532a 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-donut.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-donut.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-donut",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut.tsx",
+      "path": "charts/chart-pie-donut.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-interactive.json b/apps/www/public/r/styles/new-york/chart-pie-interactive.json
index d1186b5c3c0..b187958a243 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-interactive.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-interactive.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-interactive",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-interactive.tsx",
+      "path": "charts/chart-pie-interactive.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const id = \"pie-interactive\"\n  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n  const activeIndex = React.useMemo(\n    () => desktopData.findIndex((item) => item.month === activeMonth),\n    [activeMonth]\n  )\n  const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n  return (\n    <Card data-chart={id} className=\"flex flex-col\">\n      <ChartStyle id={id} config={chartConfig} />\n      <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n        <div className=\"grid gap-1\">\n          <CardTitle>Pie Chart - Interactive</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </div>\n        <Select value={activeMonth} onValueChange={setActiveMonth}>\n          <SelectTrigger\n            className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\" className=\"rounded-xl\">\n            {months.map((key) => {\n              const config = chartConfig[key as keyof typeof chartConfig]\n\n              if (!config) {\n                return null\n              }\n\n              return (\n                <SelectItem\n                  key={key}\n                  value={key}\n                  className=\"rounded-lg [&_span]:flex\"\n                >\n                  <div className=\"flex items-center gap-2 text-xs\">\n                    <span\n                      className=\"flex h-3 w-3 shrink-0 rounded-sm\"\n                      style={{\n                        backgroundColor: `var(--color-${key})`,\n                      }}\n                    />\n                    {config?.label}\n                  </div>\n                </SelectItem>\n              )\n            })}\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 justify-center pb-0\">\n        <ChartContainer\n          id={id}\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[300px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={desktopData}\n              dataKey=\"desktop\"\n              nameKey=\"month\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={activeIndex}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <g>\n                  <Sector {...props} outerRadius={outerRadius + 10} />\n                  <Sector\n                    {...props}\n                    outerRadius={outerRadius + 25}\n                    innerRadius={outerRadius + 12}\n                  />\n                </g>\n              )}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {desktopData[activeIndex].desktop.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-label-custom.json b/apps/www/public/r/styles/new-york/chart-pie-label-custom.json
index b614044aa97..404db825ffe 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-label-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-label-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-label-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label-custom.tsx",
+      "path": "charts/chart-pie-label-custom.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] px-0\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {payload.visitors}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-label-list.json b/apps/www/public/r/styles/new-york/chart-pie-label-list.json
index e08aa99a721..63853f9d99b 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-label-list.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-label-list.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-label-list",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label-list.tsx",
+      "path": "charts/chart-pie-label-list.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label List</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\">\n              <LabelList\n                dataKey=\"browser\"\n                className=\"fill-background\"\n                stroke=\"none\"\n                fontSize={12}\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-label.json b/apps/www/public/r/styles/new-york/chart-pie-label.json
index 6fe8a48dad3..f9cf0efc912 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-label.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-label.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-label",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label.tsx",
+      "path": "charts/chart-pie-label.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n        >\n          <PieChart>\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-legend.json b/apps/www/public/r/styles/new-york/chart-pie-legend.json
index fcbd808ba2e..d29f2051c58 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-legend.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-legend.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-legend",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-legend.tsx",
+      "path": "charts/chart-pie-legend.tsx",
       "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[300px]\"\n        >\n          <PieChart>\n            <Pie data={chartData} dataKey=\"visitors\" />\n            <ChartLegend\n              content={<ChartLegendContent nameKey=\"browser\" />}\n              className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-separator-none.json b/apps/www/public/r/styles/new-york/chart-pie-separator-none.json
index d44a1fcf4a8..0535070416b 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-separator-none.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-separator-none.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-separator-none",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-separator-none.tsx",
+      "path": "charts/chart-pie-separator-none.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Separator None</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              stroke=\"0\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-simple.json b/apps/www/public/r/styles/new-york/chart-pie-simple.json
index 60d21b039b9..d63d58ff0dd 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-simple.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-simple.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-simple",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-simple.tsx",
+      "path": "charts/chart-pie-simple.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-stacked.json b/apps/www/public/r/styles/new-york/chart-pie-stacked.json
index 47809454ebd..35c284368b9 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-stacked.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-stacked.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-pie-stacked",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-stacked.tsx",
+      "path": "charts/chart-pie-stacked.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n  { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n  { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n  { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n  { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n  { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelKey=\"visitors\"\n                  nameKey=\"month\"\n                  indicator=\"line\"\n                  labelFormatter={(_, payload) => {\n                    return chartConfig[\n                      payload?.[0].dataKey as keyof typeof chartConfig\n                    ].label\n                  }}\n                />\n              }\n            />\n            <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n            <Pie\n              data={mobileData}\n              dataKey=\"mobile\"\n              innerRadius={70}\n              outerRadius={90}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-default.json b/apps/www/public/r/styles/new-york/chart-radar-default.json
index 91e113009b7..20f8b2519bc 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-default.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-default.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-default",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-default.tsx",
+      "path": "charts/chart-radar-default.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-dots.json b/apps/www/public/r/styles/new-york/chart-radar-dots.json
index 22c4edd0c12..67c8a38cd93 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-dots.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-dots.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-dots",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-dots.tsx",
+      "path": "charts/chart-radar-dots.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Dots</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-grid-circle-fill.json b/apps/www/public/r/styles/new-york/chart-radar-grid-circle-fill.json
index 4e97161df8e..45901d23a2f 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-circle-fill.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-circle-fill.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-circle-fill",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-fill.tsx",
+      "path": "charts/chart-radar-grid-circle-fill.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarGrid\n              className=\"fill-[--color-desktop] opacity-20\"\n              gridType=\"circle\"\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-grid-circle-no-lines.json b/apps/www/public/r/styles/new-york/chart-radar-grid-circle-no-lines.json
index 146b9f9a82f..89926c5f797 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-circle-no-lines.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-circle-no-lines.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-circle-no-lines",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-no-lines.tsx",
+      "path": "charts/chart-radar-grid-circle-no-lines.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" radialLines={false} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-grid-circle.json b/apps/www/public/r/styles/new-york/chart-radar-grid-circle.json
index 35d9f9166a8..6ded1907e52 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-circle.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-circle.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-circle",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle.tsx",
+      "path": "charts/chart-radar-grid-circle.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-grid-custom.json b/apps/www/public/r/styles/new-york/chart-radar-grid-custom.json
index 15b6f6db6cb..9ab1f99292c 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-custom.tsx",
+      "path": "charts/chart-radar-grid-custom.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Custom</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-grid-fill.json b/apps/www/public/r/styles/new-york/chart-radar-grid-fill.json
index 46fd63445d8..8c46b14cb1f 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-fill.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-fill.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-fill",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-fill.tsx",
+      "path": "charts/chart-radar-grid-fill.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-grid-none.json b/apps/www/public/r/styles/new-york/chart-radar-grid-none.json
index 449a77d1e3b..52d7059718a 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-none.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-none.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-grid-none",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-none.tsx",
+      "path": "charts/chart-radar-grid-none.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid None</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-icons.json b/apps/www/public/r/styles/new-york/chart-radar-icons.json
index b47caa7e838..1f26249e8a6 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-icons.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-icons.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-icons",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-icons.tsx",
+      "path": "charts/chart-radar-icons.tsx",
       "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: ArrowDownFromLine,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: ArrowUpFromLine,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-label-custom.json b/apps/www/public/r/styles/new-york/chart-radar-label-custom.json
index ea61128270c..8635bbbbc90 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-label-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-label-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-label-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-label-custom.tsx",
+      "path": "charts/chart-radar-label-custom.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Custom Label</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: 10,\n              right: 10,\n              bottom: 10,\n              left: 10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis\n              dataKey=\"month\"\n              tick={({ x, y, textAnchor, value, index, ...props }) => {\n                const data = chartData[index]\n\n                return (\n                  <text\n                    x={x}\n                    y={index === 0 ? y - 10 : y}\n                    textAnchor={textAnchor}\n                    fontSize={13}\n                    fontWeight={500}\n                    {...props}\n                  >\n                    <tspan>{data.desktop}</tspan>\n                    <tspan className=\"fill-muted-foreground\">/</tspan>\n                    <tspan>{data.mobile}</tspan>\n                    <tspan\n                      x={x}\n                      dy={\"1rem\"}\n                      fontSize={12}\n                      className=\"fill-muted-foreground\"\n                    >\n                      {data.month}\n                    </tspan>\n                  </text>\n                )\n              }}\n            />\n\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-legend.json b/apps/www/public/r/styles/new-york/chart-radar-legend.json
index 4af32f0cab0..fbb03660943 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-legend.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-legend.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-legend",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-legend.tsx",
+      "path": "charts/chart-radar-legend.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-lines-only.json b/apps/www/public/r/styles/new-york/chart-radar-lines-only.json
index f3f747178e8..768b2947042 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-lines-only.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-lines-only.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-lines-only",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-lines-only.tsx",
+      "path": "charts/chart-radar-lines-only.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 160 },\n  { month: \"February\", desktop: 185, mobile: 170 },\n  { month: \"March\", desktop: 207, mobile: 180 },\n  { month: \"April\", desktop: 173, mobile: 160 },\n  { month: \"May\", desktop: 160, mobile: 190 },\n  { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Lines Only</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid radialLines={false} />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0}\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n            />\n            <Radar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0}\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-multiple.json b/apps/www/public/r/styles/new-york/chart-radar-multiple.json
index c05641fe3f0..46914049534 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-multiple.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-multiple.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-multiple",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-multiple.tsx",
+      "path": "charts/chart-radar-multiple.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Multiple</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radar-radius.json b/apps/www/public/r/styles/new-york/chart-radar-radius.json
index eebdfd7e8da..1d07512e9ec 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-radius.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-radius.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radar-radius",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-radius.tsx",
+      "path": "charts/chart-radar-radius.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"hsla(var(--foreground))\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radial-grid.json b/apps/www/public/r/styles/new-york/chart-radial-grid.json
index bae3cc78e18..c6c1feafb5b 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-grid.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-grid.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-grid",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-grid.tsx",
+      "path": "charts/chart-radial-grid.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Grid</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <RadialBar dataKey=\"visitors\" />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radial-label.json b/apps/www/public/r/styles/new-york/chart-radial-label.json
index f0744537be2..35e5f267ad2 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-label.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-label.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-label",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-label.tsx",
+      "path": "charts/chart-radial-label.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={-90}\n            endAngle={380}\n            innerRadius={30}\n            outerRadius={110}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background>\n              <LabelList\n                position=\"insideStart\"\n                dataKey=\"browser\"\n                className=\"fill-white capitalize mix-blend-luminosity\"\n                fontSize={11}\n              />\n            </RadialBar>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radial-shape.json b/apps/www/public/r/styles/new-york/chart-radial-shape.json
index 36164b813ae..5ba9062e753 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-shape.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-shape.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-shape",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-shape.tsx",
+      "path": "charts/chart-radial-shape.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Shape</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={100}\n            innerRadius={80}\n            outerRadius={140}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radial-simple.json b/apps/www/public/r/styles/new-york/chart-radial-simple.json
index 198ecd6db99..ed41c67cc07 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-simple.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-simple.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-simple",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-simple.tsx",
+      "path": "charts/chart-radial-simple.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radial-stacked.json b/apps/www/public/r/styles/new-york/chart-radial-stacked.json
index 279e8ebb92c..5037a16de9b 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-stacked.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-stacked.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-stacked",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-stacked.tsx",
+      "path": "charts/chart-radial-stacked.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 items-center pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={180}\n            innerRadius={80}\n            outerRadius={130}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) - 16}\n                          className=\"fill-foreground text-2xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 4}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n            <RadialBar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              cornerRadius={5}\n              fill=\"var(--color-desktop)\"\n              className=\"stroke-transparent stroke-2\"\n            />\n            <RadialBar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              stackId=\"a\"\n              cornerRadius={5}\n              className=\"stroke-transparent stroke-2\"\n            />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-radial-text.json b/apps/www/public/r/styles/new-york/chart-radial-text.json
index decd7bd17d9..002fddeb46b 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-text.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-text.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-radial-text",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-text.tsx",
+      "path": "charts/chart-radial-text.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={0}\n            endAngle={250}\n            innerRadius={80}\n            outerRadius={110}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-radial"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-advanced.json b/apps/www/public/r/styles/new-york/chart-tooltip-advanced.json
index c3573fe77d5..e08e7ac98c7 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-advanced.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-advanced.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-advanced",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-advanced.tsx",
+      "path": "charts/chart-tooltip-advanced.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Advanced</CardTitle>\n        <CardDescription>\n          Tooltip with custom formatter and total.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  className=\"w-[180px]\"\n                  formatter={(value, name, item, index) => (\n                    <>\n                      <div\n                        className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                        style={\n                          {\n                            \"--color-bg\": `var(--color-${name})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                      {/* Add this after the last item */}\n                      {index === 1 && (\n                        <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n                          Total\n                          <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                            {item.payload.running + item.payload.swimming}\n                            <span className=\"font-normal text-muted-foreground\">\n                              kcal\n                            </span>\n                          </div>\n                        </div>\n                      )}\n                    </>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-default.json b/apps/www/public/r/styles/new-york/chart-tooltip-default.json
index f77495a6ef6..e7a8de1ccb0 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-default.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-default.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-default",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-default.tsx",
+      "path": "charts/chart-tooltip-default.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Default</CardTitle>\n        <CardDescription>\n          Default tooltip with ChartTooltipContent.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-demo.json b/apps/www/public/r/styles/new-york/chart-tooltip-demo.json
new file mode 100644
index 00000000000..7acfa77afcb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-tooltip-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/chart-tooltip-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute left-[-35px] top-[45px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute left-[5px] top-[50px] z-10\"\n        >\n          <g clip-path=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute left-[122px] top-[0px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute left-[85px] top-[10px] z-10 -scale-x-100\"\n        >\n          <g clip-path=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"!hidden md:!flex\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"!items-start !justify-start\">\n        <div className=\"absolute left-[50px] top-[60px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute left-[30px] top-[38px] z-10 rotate-[-40deg]\"\n        >\n          <g clip-path=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              <>\n                {!hideIndicator && (\n                  <div\n                    className={cn(\n                      \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                      {\n                        \"h-2.5 w-2.5\": indicator === \"dot\",\n                        \"w-1\": indicator === \"line\",\n                        \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                          indicator === \"dashed\",\n                        \"my-0.5\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\n                    }\n                  />\n                )}\n                <div\n                  className={cn(\n                    \"flex flex-1 justify-between leading-none\",\n                    nestLabel ? \"items-end\" : \"items-center\"\n                  )}\n                >\n                  <div className=\"grid gap-1.5\">\n                    {nestLabel ? tooltipLabel : null}\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                  </div>\n                  <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-formatter.json b/apps/www/public/r/styles/new-york/chart-tooltip-formatter.json
index f5ac3f84ccd..a6672e655cd 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-formatter.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-formatter.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-formatter",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-formatter.tsx",
+      "path": "charts/chart-tooltip-formatter.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Formatter</CardTitle>\n        <CardDescription>Tooltip with custom formatter .</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  formatter={(value, name) => (\n                    <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-icons.json b/apps/www/public/r/styles/new-york/chart-tooltip-icons.json
index f0e45937350..3eb9270c757 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-icons.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-icons.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-icons",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-icons.tsx",
+      "path": "charts/chart-tooltip-icons.tsx",
       "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Footprints,\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n    icon: Waves,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Icons</CardTitle>\n        <CardDescription>Tooltip with icons.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-indicator-line.json b/apps/www/public/r/styles/new-york/chart-tooltip-indicator-line.json
index ba813faf788..3306b5046c5 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-indicator-line.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-indicator-line.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-indicator-line",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-line.tsx",
+      "path": "charts/chart-tooltip-indicator-line.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Line Indicator</CardTitle>\n        <CardDescription>Tooltip with line indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent indicator=\"line\" />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-indicator-none.json b/apps/www/public/r/styles/new-york/chart-tooltip-indicator-none.json
index 5d4cbec8c8d..5996f51a354 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-indicator-none.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-indicator-none.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-indicator-none",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-none.tsx",
+      "path": "charts/chart-tooltip-indicator-none.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Indicator</CardTitle>\n        <CardDescription>Tooltip with no indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-label-custom.json b/apps/www/public/r/styles/new-york/chart-tooltip-label-custom.json
index b21637216ed..1afded6be91 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-label-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-label-custom.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-label-custom",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-custom.tsx",
+      "path": "charts/chart-tooltip-label-custom.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  activities: {\n    label: \"Activities\",\n  },\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Custom label</CardTitle>\n        <CardDescription>\n          Tooltip with custom label from chartConfig.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent labelKey=\"activities\" indicator=\"line\" />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-label-formatter.json b/apps/www/public/r/styles/new-york/chart-tooltip-label-formatter.json
index a9f07f454e0..bf7106c8ce3 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-label-formatter.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-label-formatter.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-label-formatter",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-formatter.tsx",
+      "path": "charts/chart-tooltip-label-formatter.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Label Formatter</CardTitle>\n        <CardDescription>Tooltip with label formatter.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      day: \"numeric\",\n                      month: \"long\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-label-none.json b/apps/www/public/r/styles/new-york/chart-tooltip-label-none.json
index b889108967b..0ceb55f572c 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-label-none.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-label-none.json
@@ -1,16 +1,22 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart-tooltip-label-none",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-none.tsx",
+      "path": "charts/chart-tooltip-label-none.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Label</CardTitle>\n        <CardDescription>Tooltip with no label.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart.json b/apps/www/public/r/styles/new-york/chart.json
index 11e02bac295..2104bc3d339 100644
--- a/apps/www/public/r/styles/new-york/chart.json
+++ b/apps/www/public/r/styles/new-york/chart.json
@@ -1,8 +1,10 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "chart",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "recharts",
+    "recharts@2.15.4",
     "lucide-react"
   ],
   "registryDependencies": [
@@ -11,7 +13,7 @@
   "files": [
     {
       "path": "ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport {\n  NameType,\n  Payload,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nconst ChartContainer = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    config: ChartConfig\n    children: React.ComponentProps<\n      typeof RechartsPrimitive.ResponsiveContainer\n    >[\"children\"]\n  }\n>(({ id, className, children, config, ...props }, ref) => {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        ref={ref}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([_, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n    React.ComponentProps<\"div\"> & {\n      hideLabel?: boolean\n      hideIndicator?: boolean\n      indicator?: \"line\" | \"dot\" | \"dashed\"\n      nameKey?: string\n      labelKey?: string\n    }\n>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) {\n        return null\n      }\n\n      const [item] = payload\n      const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n      const itemConfig = getPayloadConfigFromPayload(config, item, key)\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label\n\n      if (labelFormatter) {\n        return (\n          <div className={cn(\"font-medium\", labelClassName)}>\n            {labelFormatter(value, payload)}\n          </div>\n        )\n      }\n\n      if (!value) {\n        return null\n      }\n\n      return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n    }, [\n      label,\n      labelFormatter,\n      payload,\n      hideLabel,\n      labelClassName,\n      config,\n      labelKey,\n    ])\n\n    if (!active || !payload?.length) {\n      return null\n    }\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n          className\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload.map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    )\n  }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> &\n    Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n      hideIcon?: boolean\n      nameKey?: string\n    }\n>(\n  (\n    { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    if (!payload?.length) {\n      return null\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center gap-4\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className\n        )}\n      >\n        {payload.map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n      </div>\n    )\n  }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nconst ChartContainer = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    config: ChartConfig\n    children: React.ComponentProps<\n      typeof RechartsPrimitive.ResponsiveContainer\n    >[\"children\"]\n  }\n>(({ id, className, children, config, ...props }, ref) => {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        ref={ref}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n    React.ComponentProps<\"div\"> & {\n      hideLabel?: boolean\n      hideIndicator?: boolean\n      indicator?: \"line\" | \"dot\" | \"dashed\"\n      nameKey?: string\n      labelKey?: string\n    }\n>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) {\n        return null\n      }\n\n      const [item] = payload\n      const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n      const itemConfig = getPayloadConfigFromPayload(config, item, key)\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label\n\n      if (labelFormatter) {\n        return (\n          <div className={cn(\"font-medium\", labelClassName)}>\n            {labelFormatter(value, payload)}\n          </div>\n        )\n      }\n\n      if (!value) {\n        return null\n      }\n\n      return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n    }, [\n      label,\n      labelFormatter,\n      payload,\n      hideLabel,\n      labelClassName,\n      config,\n      labelKey,\n    ])\n\n    if (!active || !payload?.length) {\n      return null\n    }\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n          className\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload.map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    )\n  }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> &\n    Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n      hideIcon?: boolean\n      nameKey?: string\n    }\n>(\n  (\n    { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    if (!payload?.length) {\n      return null\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center gap-4\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className\n        )}\n      >\n        {payload.map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n      </div>\n    )\n  }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/charts-01.json b/apps/www/public/r/styles/new-york/charts-01.json
deleted file mode 100644
index 9a8db19f3cc..00000000000
--- a/apps/www/public/r/styles/new-york/charts-01.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "charts-01",
-  "type": "registry:block",
-  "registryDependencies": [
-    "chart"
-  ],
-  "files": [
-    {
-      "path": "block/charts-01.tsx",
-      "content": "\"use client\"\n\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  LabelList,\n  Line,\n  LineChart,\n  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\n  Rectangle,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york//ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york//ui/chart\"\nimport { Separator } from \"@/registry/new-york//ui/separator\"\n\nexport default function Charts() {\n  return (\n    <div className=\"chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8\">\n      <div className=\"grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]\">\n        <Card\n          x-chunk=\"A bar chart showing the number of steps you have walked in the past 7 days.\"\n          className=\"lg:max-w-md\"\n        >\n          <CardHeader className=\"space-y-0 pb-2\">\n            <CardDescription>Today</CardDescription>\n            <CardTitle className=\"text-4xl tabular-nums\">\n              12,584{\" \"}\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                steps\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: -4,\n                  right: -4,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={5}\n                  fillOpacity={0.6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <ChartTooltip\n                  defaultIndex={2}\n                  content={\n                    <ChartTooltipContent\n                      hideIndicator\n                      labelFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                          day: \"numeric\",\n                          month: \"long\",\n                          year: \"numeric\",\n                        })\n                      }}\n                    />\n                  }\n                  cursor={false}\n                />\n                <ReferenceLine\n                  y={1200}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeDasharray=\"3 3\"\n                  strokeWidth={1}\n                >\n                  <Label\n                    position=\"insideBottomLeft\"\n                    value=\"Average Steps\"\n                    offset={10}\n                    fill=\"hsl(var(--foreground))\"\n                  />\n                  <Label\n                    position=\"insideTopLeft\"\n                    value=\"12,343\"\n                    className=\"text-lg\"\n                    fill=\"hsl(var(--foreground))\"\n                    offset={10}\n                    startOffset={100}\n                  />\n                </ReferenceLine>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex-col items-start gap-1\">\n            <CardDescription>\n              Over the past 7 days, you have walked{\" \"}\n              <span className=\"font-medium text-foreground\">53,305</span> steps.\n            </CardDescription>\n            <CardDescription>\n              You need{\" \"}\n              <span className=\"font-medium text-foreground\">12,584</span> more\n              steps to reach your goal.\n            </CardDescription>\n          </CardFooter>\n        </Card>\n        <Card\n          x-chunk=\"A line chart showing the resting heart rate for the past 7 days.\"\n          className=\"flex flex-col lg:max-w-md\"\n        >\n          <CardHeader className=\"flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1\">\n            <div>\n              <CardDescription>Resting HR</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                62\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  bpm\n                </span>\n              </CardTitle>\n            </div>\n            <div>\n              <CardDescription>Variability</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                35\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  ms\n                </span>\n              </CardTitle>\n            </div>\n          </CardHeader>\n          <CardContent className=\"flex flex-1 items-center\">\n            <ChartContainer\n              config={{\n                resting: {\n                  label: \"Resting\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"w-full\"\n            >\n              <LineChart\n                accessibilityLayer\n                margin={{\n                  left: 14,\n                  right: 14,\n                  top: 10,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    resting: 72,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    resting: 35,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    resting: 52,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    resting: 70,\n                  },\n                ]}\n              >\n                <CartesianGrid\n                  strokeDasharray=\"4 4\"\n                  vertical={false}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeOpacity={0.5}\n                />\n                <YAxis hide domain={[\"dataMin - 10\", \"dataMax + 10\"]} />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={8}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <Line\n                  dataKey=\"resting\"\n                  type=\"natural\"\n                  fill=\"var(--color-resting)\"\n                  stroke=\"var(--color-resting)\"\n                  strokeWidth={2}\n                  dot={false}\n                  activeDot={{\n                    fill: \"var(--color-resting)\",\n                    stroke: \"var(--color-resting)\",\n                    r: 4,\n                  }}\n                />\n                <ChartTooltip\n                  content={\n                    <ChartTooltipContent\n                      indicator=\"line\"\n                      labelFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                          day: \"numeric\",\n                          month: \"long\",\n                          year: \"numeric\",\n                        })\n                      }}\n                    />\n                  }\n                  cursor={false}\n                />\n              </LineChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6 lg:max-w-[20rem]\">\n        <Card\n          x-chunk=\"Two horizontal bar charts showing total steps taken during the current year and last year.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader>\n            <CardTitle>Progress</CardTitle>\n            <CardDescription>\n              You're average more steps a day this year than last year.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"grid gap-4\">\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                12,453\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--chart-1))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2024\",\n                      steps: 12435,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"white\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                10,103\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--muted))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2023\",\n                      steps: 10103,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"hsl(var(--muted-foreground))\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing the walking and running distance for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Walking Distance</CardTitle>\n            <CardDescription>\n              Over the last 7 days, your distance walked and run was 12.5 miles\n              per day.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-0\">\n            <div className=\"flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none\">\n              12.5\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                miles/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[72px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing move, exercise, and stand progress.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4 pb-2\">\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"h-[140px] w-full\"\n            >\n              <BarChart\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    label: \"8/12 hr\",\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    label: \"46/60 min\",\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    label: \"245/360 kcal\",\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                layout=\"vertical\"\n                barSize={32}\n                barGap={2}\n              >\n                <XAxis type=\"number\" dataKey=\"value\" hide />\n                <YAxis\n                  dataKey=\"activity\"\n                  type=\"category\"\n                  tickLine={false}\n                  tickMargin={4}\n                  axisLine={false}\n                  className=\"capitalize\"\n                />\n                <Bar dataKey=\"value\" radius={5}>\n                  <LabelList\n                    position=\"insideLeft\"\n                    dataKey=\"label\"\n                    fill=\"white\"\n                    offset={8}\n                    fontSize={12}\n                  />\n                </Bar>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex flex-row border-t p-4\">\n            <div className=\"flex w-full items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  562\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  73\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  14\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n          </CardFooter>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6\">\n        <Card\n          x-chunk=\"A radial bar chart showing the percentage of time spent moving, exercising, and standing.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4\">\n            <div className=\"grid items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  562/600\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  73/120\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  8/12\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"mx-auto aspect-square w-full max-w-[80%]\"\n            >\n              <RadialBarChart\n                margin={{\n                  left: -10,\n                  right: -10,\n                  top: -10,\n                  bottom: -10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                innerRadius=\"20%\"\n                barSize={24}\n                startAngle={90}\n                endAngle={450}\n              >\n                <PolarAngleAxis\n                  type=\"number\"\n                  domain={[0, 100]}\n                  dataKey=\"value\"\n                  tick={false}\n                />\n                <RadialBar dataKey=\"value\" background cornerRadius={5} />\n              </RadialBarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing active energy in the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Active Energy</CardTitle>\n            <CardDescription>\n              You're burning an average of 754 calories per day. Good job!\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-2\">\n            <div className=\"flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none\">\n              1,254\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                kcal/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                calories: {\n                  label: \"Calories\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[64px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    calories: 354,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    calories: 514,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    calories: 345,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    calories: 734,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    calories: 645,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    calories: 456,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    calories: 345,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"calories\"\n                  fill=\"var(--color-calories)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"An area chart showing the time spent in bed for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"space-y-0 pb-0\">\n            <CardDescription>Time in Bed</CardDescription>\n            <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n              8\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                hr\n              </span>\n              35\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                min\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"p-0\">\n            <ChartContainer\n              config={{\n                time: {\n                  label: \"Time\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n              }}\n            >\n              <AreaChart\n                accessibilityLayer\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    time: 8.5,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    time: 7.2,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    time: 6.2,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    time: 5.2,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    time: 7.0,\n                  },\n                ]}\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n              >\n                <XAxis dataKey=\"date\" hide />\n                <YAxis domain={[\"dataMin - 5\", \"dataMax + 2\"]} hide />\n                <defs>\n                  <linearGradient id=\"fillTime\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop\n                      offset=\"5%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.8}\n                    />\n                    <stop\n                      offset=\"95%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.1}\n                    />\n                  </linearGradient>\n                </defs>\n                <Area\n                  dataKey=\"time\"\n                  type=\"natural\"\n                  fill=\"url(#fillTime)\"\n                  fillOpacity={0.4}\n                  stroke=\"var(--color-time)\"\n                />\n                <ChartTooltip\n                  cursor={false}\n                  content={<ChartTooltipContent hideLabel />}\n                  formatter={(value) => (\n                    <div className=\"flex min-w-[120px] items-center text-xs text-muted-foreground\">\n                      Time in bed\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          hr\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              </AreaChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/checkbox-demo.json b/apps/www/public/r/styles/new-york/checkbox-demo.json
new file mode 100644
index 00000000000..d780ca8ee4e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/checkbox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\n\nexport default function CheckboxDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <label\n        htmlFor=\"terms\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/checkbox-disabled.json b/apps/www/public/r/styles/new-york/checkbox-disabled.json
new file mode 100644
index 00000000000..63fbb74f208
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/checkbox-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-disabled.tsx",
+      "content": "import { Checkbox } from \"@/registry/new-york/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms2\" disabled />\n      <label\n        htmlFor=\"terms2\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/checkbox-form-multiple.json b/apps/www/public/r/styles/new-york/checkbox-form-multiple.json
new file mode 100644
index 00000000000..aec4fd0a88e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/checkbox-form-multiple.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-multiple",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-multiple.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\n\nconst items = [\n  {\n    id: \"recents\",\n    label: \"Recents\",\n  },\n  {\n    id: \"home\",\n    label: \"Home\",\n  },\n  {\n    id: \"applications\",\n    label: \"Applications\",\n  },\n  {\n    id: \"desktop\",\n    label: \"Desktop\",\n  },\n  {\n    id: \"downloads\",\n    label: \"Downloads\",\n  },\n  {\n    id: \"documents\",\n    label: \"Documents\",\n  },\n] as const\n\nconst FormSchema = z.object({\n  items: z.array(z.string()).refine((value) => value.some((item) => item), {\n    message: \"You have to select at least one item.\",\n  }),\n})\n\nexport default function CheckboxReactHookFormMultiple() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      items: [\"recents\", \"home\"],\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"items\"\n          render={() => (\n            <FormItem>\n              <div className=\"mb-4\">\n                <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                <FormDescription>\n                  Select the items you want to display in the sidebar.\n                </FormDescription>\n              </div>\n              {items.map((item) => (\n                <FormField\n                  key={item.id}\n                  control={form.control}\n                  name=\"items\"\n                  render={({ field }) => {\n                    return (\n                      <FormItem\n                        key={item.id}\n                        className=\"flex flex-row items-start space-x-3 space-y-0\"\n                      >\n                        <FormControl>\n                          <Checkbox\n                            checked={field.value?.includes(item.id)}\n                            onCheckedChange={(checked) => {\n                              return checked\n                                ? field.onChange([...field.value, item.id])\n                                : field.onChange(\n                                    field.value?.filter(\n                                      (value) => value !== item.id\n                                    )\n                                  )\n                            }}\n                          />\n                        </FormControl>\n                        <FormLabel className=\"text-sm font-normal\">\n                          {item.label}\n                        </FormLabel>\n                      </FormItem>\n                    )\n                  }}\n                />\n              ))}\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/checkbox-form-single.json b/apps/www/public/r/styles/new-york/checkbox-form-single.json
new file mode 100644
index 00000000000..e7c1120ec43
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/checkbox-form-single.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-form-single",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-form-single.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/new-york/ui/form\"\n\nconst FormSchema = z.object({\n  mobile: z.boolean().default(false).optional(),\n})\n\nexport default function CheckboxReactHookFormSingle() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      mobile: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"mobile\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow\">\n              <FormControl>\n                <Checkbox\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <div className=\"space-y-1 leading-none\">\n                <FormLabel>\n                  Use different settings for my mobile devices\n                </FormLabel>\n                <FormDescription>\n                  You can manage your mobile notifications in the{\" \"}\n                  <Link href=\"/examples/forms\">mobile settings</Link> page.\n                </FormDescription>\n              </div>\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/checkbox-with-text.json b/apps/www/public/r/styles/new-york/checkbox-with-text.json
new file mode 100644
index 00000000000..7381d8ab5b8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/checkbox-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/checkbox-with-text.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n  return (\n    <div className=\"items-top flex space-x-2\">\n      <Checkbox id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-sm text-muted-foreground\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/checkbox.json b/apps/www/public/r/styles/new-york/checkbox.json
index f2847a90507..44aa1437cae 100644
--- a/apps/www/public/r/styles/new-york/checkbox.json
+++ b/apps/www/public/r/styles/new-york/checkbox.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "checkbox",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-checkbox"
   ],
   "files": [
     {
       "path": "ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <CheckIcon className=\"h-4 w-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <Check className=\"h-4 w-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/collapsible-demo.json b/apps/www/public/r/styles/new-york/collapsible-demo.json
new file mode 100644
index 00000000000..1f7a69b0cfa
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/collapsible-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "examples/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/collapsible.json b/apps/www/public/r/styles/new-york/collapsible.json
index b1affc13364..65fdab451c0 100644
--- a/apps/www/public/r/styles/new-york/collapsible.json
+++ b/apps/www/public/r/styles/new-york/collapsible.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "collapsible",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-collapsible"
   ],
diff --git a/apps/www/public/r/styles/new-york/combobox-demo.json b/apps/www/public/r/styles/new-york/combobox-demo.json
new file mode 100644
index 00000000000..0e73cf1297b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/combobox-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport default function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/combobox-dropdown-menu.json b/apps/www/public/r/styles/new-york/combobox-dropdown-menu.json
new file mode 100644
index 00000000000..4da6e44f2b7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/combobox-dropdown-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-dropdown-menu",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "dropdown-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nconst labels = [\n  \"feature\",\n  \"bug\",\n  \"enhancement\",\n  \"documentation\",\n  \"design\",\n  \"question\",\n  \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n  const [label, setLabel] = React.useState(\"feature\")\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n      <p className=\"text-sm font-medium leading-none\">\n        <span className=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">Create a new project</span>\n      </p>\n      <DropdownMenu open={open} onOpenChange={setOpen}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <MoreHorizontal />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n          <DropdownMenuLabel>Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Assign to...</DropdownMenuItem>\n            <DropdownMenuItem>Set due date...</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"p-0\">\n                <Command>\n                  <CommandInput\n                    placeholder=\"Filter label...\"\n                    autoFocus={true}\n                    className=\"h-9\"\n                  />\n                  <CommandList>\n                    <CommandEmpty>No label found.</CommandEmpty>\n                    <CommandGroup>\n                      {labels.map((label) => (\n                        <CommandItem\n                          key={label}\n                          value={label}\n                          onSelect={(value) => {\n                            setLabel(value)\n                            setOpen(false)\n                          }}\n                        >\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                  </CommandList>\n                </Command>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"text-red-600\">\n              Delete\n              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/combobox-form.json b/apps/www/public/r/styles/new-york/combobox-form.json
new file mode 100644
index 00000000000..1457e2b84ca
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/combobox-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst languages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n  language: z.string({\n    required_error: \"Please select a language.\",\n  }),\n})\n\nexport default function ComboboxForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"language\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Language</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      className={cn(\n                        \"w-[200px] justify-between\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value\n                        ? languages.find(\n                            (language) => language.value === field.value\n                          )?.label\n                        : \"Select language\"}\n                      <ChevronsUpDown className=\"opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-[200px] p-0\">\n                  <Command>\n                    <CommandInput\n                      placeholder=\"Search framework...\"\n                      className=\"h-9\"\n                    />\n                    <CommandList>\n                      <CommandEmpty>No framework found.</CommandEmpty>\n                      <CommandGroup>\n                        {languages.map((language) => (\n                          <CommandItem\n                            value={language.label}\n                            key={language.value}\n                            onSelect={() => {\n                              form.setValue(\"language\", language.value)\n                            }}\n                          >\n                            {language.label}\n                            <Check\n                              className={cn(\n                                \"ml-auto\",\n                                language.value === field.value\n                                  ? \"opacity-100\"\n                                  : \"opacity-0\"\n                              )}\n                            />\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                This is the language that will be used in the dashboard.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/combobox-popover.json b/apps/www/public/r/styles/new-york/combobox-popover.json
new file mode 100644
index 00000000000..88c76531128
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/combobox-popover.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-popover",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "combobox",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-sm text-muted-foreground\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/combobox-responsive.json b/apps/www/public/r/styles/new-york/combobox-responsive.json
new file mode 100644
index 00000000000..7caf8bbb199
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/combobox-responsive.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-responsive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "combobox",
+    "popover",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/combobox-responsive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboBoxResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  if (isDesktop) {\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </PopoverContent>\n      </Popover>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mt-4 border-t\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction StatusList({\n  setOpen,\n  setSelectedStatus,\n}: {\n  setOpen: (open: boolean) => void\n  setSelectedStatus: (status: Status | null) => void\n}) {\n  return (\n    <Command>\n      <CommandInput placeholder=\"Filter status...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup>\n          {statuses.map((status) => (\n            <CommandItem\n              key={status.value}\n              value={status.value}\n              onSelect={(value) => {\n                setSelectedStatus(\n                  statuses.find((priority) => priority.value === value) || null\n                )\n                setOpen(false)\n              }}\n            >\n              {status.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/command-demo.json b/apps/www/public/r/styles/new-york/command-demo.json
new file mode 100644
index 00000000000..60c110558fe
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/command-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "examples/command-demo.tsx",
+      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york/ui/command\"\n\nexport default function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/command-dialog.json b/apps/www/public/r/styles/new-york/command-dialog.json
new file mode 100644
index 00000000000..7e6cd2de8b4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/command-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-dialog",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "command",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/command-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york/ui/command\"\n\nexport default function CommandDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <p className=\"text-sm text-muted-foreground\">\n        Press{\" \"}\n        <kbd className=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/command.json b/apps/www/public/r/styles/new-york/command.json
index b36aecd65ea..616c43a90e9 100644
--- a/apps/www/public/r/styles/new-york/command.json
+++ b/apps/www/public/r/styles/new-york/command.json
@@ -1,8 +1,10 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "command",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
-    "cmdk@1.0.0"
+    "cmdk"
   ],
   "registryDependencies": [
     "dialog"
@@ -10,7 +12,7 @@
   "files": [
     {
       "path": "ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { MagnifyingGlassIcon } from \"@radix-ui/react-icons\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/new-york/ui/dialog\"\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <MagnifyingGlassIcon className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/new-york/ui/dialog\"\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/context-menu-demo.json b/apps/www/public/r/styles/new-york/context-menu-demo.json
new file mode 100644
index 00000000000..94cf83a6982
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/context-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "context-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/context-menu-demo.tsx",
+      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/new-york/ui/context-menu\"\n\nexport default function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/context-menu.json b/apps/www/public/r/styles/new-york/context-menu.json
index 121d33b45ed..d23e982a6f7 100644
--- a/apps/www/public/r/styles/new-york/context-menu.json
+++ b/apps/www/public/r/styles/new-york/context-menu.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "context-menu",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-context-menu"
   ],
   "files": [
     {
       "path": "ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport {\n  CheckIcon,\n  ChevronRightIcon,\n  DotFilledIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <DotFilledIcon className=\"h-4 w-4 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-4 w-4 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/dashboard-01-dark.png b/apps/www/public/r/styles/new-york/dashboard-01-dark.png
new file mode 100644
index 00000000000..e5e3d644ec3
Binary files /dev/null and b/apps/www/public/r/styles/new-york/dashboard-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/dashboard-01-light.png b/apps/www/public/r/styles/new-york/dashboard-01-light.png
new file mode 100644
index 00000000000..5bbf9c21946
Binary files /dev/null and b/apps/www/public/r/styles/new-york/dashboard-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/dashboard-01.json b/apps/www/public/r/styles/new-york/dashboard-01.json
index bd9d5071fed..db4780f315f 100644
--- a/apps/www/public/r/styles/new-york/dashboard-01.json
+++ b/apps/www/public/r/styles/new-york/dashboard-01.json
@@ -1,18 +1,107 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "dashboard-01",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A dashboard with sidebar, charts and data table.",
+  "dependencies": [
+    "@dnd-kit/core",
+    "@dnd-kit/modifiers",
+    "@dnd-kit/sortable",
+    "@dnd-kit/utilities",
+    "@tanstack/react-table",
+    "zod"
+  ],
   "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "chart",
+    "card",
+    "select",
+    "tabs",
+    "table",
+    "toggle-group",
+    "badge",
     "button",
+    "checkbox",
     "dropdown-menu",
+    "drawer",
     "input",
-    "sheet"
+    "avatar",
+    "sheet",
+    "sonner"
   ],
   "files": [
     {
-      "path": "block/dashboard-01.tsx",
-      "content": "import Link from \"next/link\"\nimport {\n  Activity,\n  ArrowUpRight,\n  CircleUser,\n  CreditCard,\n  DollarSign,\n  Menu,\n  Package2,\n  Search,\n  Users,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Badge } from \"@/registry/new-york/ui/badge\"\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 {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <nav className=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Analytics\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Analytics\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <main className=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n        <div className=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n          <Card x-chunk=\"A card showing the total revenue in USD and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Total Revenue\n              </CardTitle>\n              <DollarSign className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">$45,231.89</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +20.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total subscriptions and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Subscriptions\n              </CardTitle>\n              <Users className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+2350</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +180.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total sales and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Sales</CardTitle>\n              <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+12,234</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +19% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total active users and the percentage difference from last hour.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Active Now</CardTitle>\n              <Activity className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+573</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +201 since last hour\n              </p>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n          <Card\n            className=\"xl:col-span-2\"\n            x-chunk=\"A card showing a table of recent transactions with a link to view all transactions.\"\n          >\n            <CardHeader className=\"flex flex-row items-center\">\n              <div className=\"grid gap-2\">\n                <CardTitle>Transactions</CardTitle>\n                <CardDescription>\n                  Recent transactions from your store.\n                </CardDescription>\n              </div>\n              <Button asChild size=\"sm\" className=\"ml-auto gap-1\">\n                <Link href=\"#\">\n                  View All\n                  <ArrowUpRight className=\"h-4 w-4\" />\n                </Link>\n              </Button>\n            </CardHeader>\n            <CardContent>\n              <Table>\n                <TableHeader>\n                  <TableRow>\n                    <TableHead>Customer</TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Type\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Status\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Date\n                    </TableHead>\n                    <TableHead className=\"text-right\">Amount</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-23\n                    </TableCell>\n                    <TableCell className=\"text-right\">$250.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Olivia Smith</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        olivia@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Refund\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Declined\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-24\n                    </TableCell>\n                    <TableCell className=\"text-right\">$150.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Noah Williams</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        noah@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Subscription\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-25\n                    </TableCell>\n                    <TableCell className=\"text-right\">$350.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Emma Brown</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        emma@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-26\n                    </TableCell>\n                    <TableCell className=\"text-right\">$450.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-27\n                    </TableCell>\n                    <TableCell className=\"text-right\">$550.00</TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing a list of recent sales with customer names and email addresses.\">\n            <CardHeader>\n              <CardTitle>Recent Sales</CardTitle>\n            </CardHeader>\n            <CardContent className=\"grid gap-8\">\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                  <AvatarFallback>OM</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Olivia Martin\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    olivia.martin@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$1,999.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                  <AvatarFallback>JL</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Jackson Lee\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    jackson.lee@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                  <AvatarFallback>IN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Isabella Nguyen\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    isabella.nguyen@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$299.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                  <AvatarFallback>WK</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    William Kim\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    will@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$99.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                  <AvatarFallback>SD</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Sofia Davis\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    sofia.davis@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </main>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
+      "path": "blocks/dashboard-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/dashboard-01/components/app-sidebar\"\nimport { ChartAreaInteractive } from \"@/registry/new-york/blocks/dashboard-01/components/chart-area-interactive\"\nimport { DataTable } from \"@/registry/new-york/blocks/dashboard-01/components/data-table\"\nimport { SectionCards } from \"@/registry/new-york/blocks/dashboard-01/components/section-cards\"\nimport { SiteHeader } from \"@/registry/new-york/blocks/dashboard-01/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/new-york/ui/sidebar\"\n\nimport data from \"./data.json\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar variant=\"inset\" />\n      <SidebarInset>\n        <SiteHeader />\n        <div className=\"flex flex-1 flex-col\">\n          <div className=\"@container/main flex flex-1 flex-col gap-2\">\n            <div className=\"flex flex-col gap-4 py-4 md:gap-6 md:py-6\">\n              <SectionCards />\n              <div className=\"px-4 lg:px-6\">\n                <ChartAreaInteractive />\n              </div>\n              <DataTable data={data} />\n            </div>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/dashboard-01/data.json",
+      "content": "[\n  {\n    \"id\": 1,\n    \"header\": \"Cover page\",\n    \"type\": \"Cover page\",\n    \"status\": \"In Process\",\n    \"target\": \"18\",\n    \"limit\": \"5\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 2,\n    \"header\": \"Table of contents\",\n    \"type\": \"Table of contents\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 3,\n    \"header\": \"Executive summary\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"10\",\n    \"limit\": \"13\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 4,\n    \"header\": \"Technical approach\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"27\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 5,\n    \"header\": \"Design\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"2\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 6,\n    \"header\": \"Capabilities\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"20\",\n    \"limit\": \"8\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 7,\n    \"header\": \"Integration with existing systems\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 8,\n    \"header\": \"Innovation and Advantages\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"25\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 9,\n    \"header\": \"Overview of EMR's Innovative Solutions\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"7\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 10,\n    \"header\": \"Advanced Algorithms and Machine Learning\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 11,\n    \"header\": \"Adaptive Communication Protocols\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"9\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 12,\n    \"header\": \"Advantages Over Current Technologies\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"0\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 13,\n    \"header\": \"Past Performance\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 14,\n    \"header\": \"Customer Feedback and Satisfaction Levels\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"34\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 15,\n    \"header\": \"Implementation Challenges and Solutions\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"3\",\n    \"limit\": \"35\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 16,\n    \"header\": \"Security Measures and Data Protection Policies\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"6\",\n    \"limit\": \"36\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 17,\n    \"header\": \"Scalability and Future Proofing\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"4\",\n    \"limit\": \"37\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 18,\n    \"header\": \"Cost-Benefit Analysis\",\n    \"type\": \"Plain language\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"38\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 19,\n    \"header\": \"User Training and Onboarding Experience\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"17\",\n    \"limit\": \"39\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 20,\n    \"header\": \"Future Development Roadmap\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"11\",\n    \"limit\": \"40\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 21,\n    \"header\": \"System Architecture Overview\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"24\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Maya Johnson\"\n  },\n  {\n    \"id\": 22,\n    \"header\": \"Risk Management Plan\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Carlos Rodriguez\"\n  },\n  {\n    \"id\": 23,\n    \"header\": \"Compliance Documentation\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"31\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Sarah Chen\"\n  },\n  {\n    \"id\": 24,\n    \"header\": \"API Documentation\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"8\",\n    \"limit\": \"12\",\n    \"reviewer\": \"Raj Patel\"\n  },\n  {\n    \"id\": 25,\n    \"header\": \"User Interface Mockups\",\n    \"type\": \"Visual\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Leila Ahmadi\"\n  },\n  {\n    \"id\": 26,\n    \"header\": \"Database Schema\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Thomas Wilson\"\n  },\n  {\n    \"id\": 27,\n    \"header\": \"Testing Methodology\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 28,\n    \"header\": \"Deployment Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 29,\n    \"header\": \"Budget Breakdown\",\n    \"type\": \"Financial\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 30,\n    \"header\": \"Market Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Sophia Martinez\"\n  },\n  {\n    \"id\": 31,\n    \"header\": \"Competitor Comparison\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 32,\n    \"header\": \"Maintenance Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Alex Thompson\"\n  },\n  {\n    \"id\": 33,\n    \"header\": \"User Personas\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Nina Patel\"\n  },\n  {\n    \"id\": 34,\n    \"header\": \"Accessibility Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 35,\n    \"header\": \"Performance Metrics\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"David Kim\"\n  },\n  {\n    \"id\": 36,\n    \"header\": \"Disaster Recovery Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 37,\n    \"header\": \"Third-party Integrations\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 38,\n    \"header\": \"User Feedback Summary\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 39,\n    \"header\": \"Localization Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"12\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Maria Garcia\"\n  },\n  {\n    \"id\": 40,\n    \"header\": \"Mobile Compatibility\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"James Wilson\"\n  },\n  {\n    \"id\": 41,\n    \"header\": \"Data Migration Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 42,\n    \"header\": \"Quality Assurance Protocols\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Priya Singh\"\n  },\n  {\n    \"id\": 43,\n    \"header\": \"Stakeholder Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"11\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 44,\n    \"header\": \"Environmental Impact Assessment\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 45,\n    \"header\": \"Intellectual Property Rights\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Sarah Johnson\"\n  },\n  {\n    \"id\": 46,\n    \"header\": \"Customer Support Framework\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 47,\n    \"header\": \"Version Control Strategy\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 48,\n    \"header\": \"Continuous Integration Pipeline\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Michael Chen\"\n  },\n  {\n    \"id\": 49,\n    \"header\": \"Regulatory Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 50,\n    \"header\": \"User Authentication System\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 51,\n    \"header\": \"Data Analytics Framework\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 52,\n    \"header\": \"Cloud Infrastructure\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 53,\n    \"header\": \"Network Security Measures\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Lisa Wong\"\n  },\n  {\n    \"id\": 54,\n    \"header\": \"Project Timeline\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 55,\n    \"header\": \"Resource Allocation\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 56,\n    \"header\": \"Team Structure and Roles\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 57,\n    \"header\": \"Communication Protocols\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 58,\n    \"header\": \"Success Metrics\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 59,\n    \"header\": \"Internationalization Support\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 60,\n    \"header\": \"Backup and Recovery Procedures\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 61,\n    \"header\": \"Monitoring and Alerting System\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Daniel Park\"\n  },\n  {\n    \"id\": 62,\n    \"header\": \"Code Review Guidelines\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 63,\n    \"header\": \"Documentation Standards\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 64,\n    \"header\": \"Release Management Process\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 65,\n    \"header\": \"Feature Prioritization Matrix\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Emma Davis\"\n  },\n  {\n    \"id\": 66,\n    \"header\": \"Technical Debt Assessment\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 67,\n    \"header\": \"Capacity Planning\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 68,\n    \"header\": \"Service Level Agreements\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Assign reviewer\"\n  }\n]\n",
+      "type": "registry:file",
+      "target": "app/dashboard/data.json"
+    },
+    {
+      "path": "blocks/dashboard-01/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpCircleIcon,\n  BarChartIcon,\n  CameraIcon,\n  ClipboardListIcon,\n  DatabaseIcon,\n  FileCodeIcon,\n  FileIcon,\n  FileTextIcon,\n  FolderIcon,\n  HelpCircleIcon,\n  LayoutDashboardIcon,\n  ListIcon,\n  SearchIcon,\n  SettingsIcon,\n  UsersIcon,\n} from \"lucide-react\"\n\nimport { NavDocuments } from \"@/registry/new-york/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/new-york/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/blocks/dashboard-01/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Dashboard\",\n      url: \"#\",\n      icon: LayoutDashboardIcon,\n    },\n    {\n      title: \"Lifecycle\",\n      url: \"#\",\n      icon: ListIcon,\n    },\n    {\n      title: \"Analytics\",\n      url: \"#\",\n      icon: BarChartIcon,\n    },\n    {\n      title: \"Projects\",\n      url: \"#\",\n      icon: FolderIcon,\n    },\n    {\n      title: \"Team\",\n      url: \"#\",\n      icon: UsersIcon,\n    },\n  ],\n  navClouds: [\n    {\n      title: \"Capture\",\n      icon: CameraIcon,\n      isActive: true,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Proposal\",\n      icon: FileTextIcon,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Prompts\",\n      icon: FileCodeIcon,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: SettingsIcon,\n    },\n    {\n      title: \"Get Help\",\n      url: \"#\",\n      icon: HelpCircleIcon,\n    },\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: SearchIcon,\n    },\n  ],\n  documents: [\n    {\n      name: \"Data Library\",\n      url: \"#\",\n      icon: DatabaseIcon,\n    },\n    {\n      name: \"Reports\",\n      url: \"#\",\n      icon: ClipboardListIcon,\n    },\n    {\n      name: \"Word Assistant\",\n      url: \"#\",\n      icon: FileIcon,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              asChild\n              className=\"data-[slot=sidebar-menu-button]:!p-1.5\"\n            >\n              <a href=\"#\">\n                <ArrowUpCircleIcon className=\"h-5 w-5\" />\n                <span className=\"text-base font-semibold\">Acme Inc.</span>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavDocuments items={data.documents} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const isMobile = useIsMobile()\n  const [timeRange, setTimeRange] = React.useState(\"30d\")\n\n  React.useEffect(() => {\n    if (isMobile) {\n      setTimeRange(\"7d\")\n    }\n  }, [isMobile])\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"@container/card\">\n      <CardHeader className=\"relative\">\n        <CardTitle>Total Visitors</CardTitle>\n        <CardDescription>\n          <span className=\"@[540px]/card:block hidden\">\n            Total for the last 3 months\n          </span>\n          <span className=\"@[540px]/card:hidden\">Last 3 months</span>\n        </CardDescription>\n        <div className=\"absolute right-4 top-4\">\n          <ToggleGroup\n            type=\"single\"\n            value={timeRange}\n            onValueChange={setTimeRange}\n            variant=\"outline\"\n            className=\"@[767px]/card:flex hidden\"\n          >\n            <ToggleGroupItem value=\"90d\" className=\"h-8 px-2.5\">\n              Last 3 months\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"30d\" className=\"h-8 px-2.5\">\n              Last 30 days\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"7d\" className=\"h-8 px-2.5\">\n              Last 7 days\n            </ToggleGroupItem>\n          </ToggleGroup>\n          <Select value={timeRange} onValueChange={setTimeRange}>\n            <SelectTrigger\n              className=\"@[767px]/card:hidden flex w-40\"\n              aria-label=\"Select a value\"\n            >\n              <SelectValue placeholder=\"Last 3 months\" />\n            </SelectTrigger>\n            <SelectContent className=\"rounded-xl\">\n              <SelectItem value=\"90d\" className=\"rounded-lg\">\n                Last 3 months\n              </SelectItem>\n              <SelectItem value=\"30d\" className=\"rounded-lg\">\n                Last 30 days\n              </SelectItem>\n              <SelectItem value=\"7d\" className=\"rounded-lg\">\n                Last 7 days\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={1.0}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/data-table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  SortableContext,\n  arrayMove,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  Row,\n  SortingState,\n  VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport {\n  CheckCircle2Icon,\n  CheckCircleIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsLeftIcon,\n  ChevronsRightIcon,\n  ColumnsIcon,\n  GripVerticalIcon,\n  LoaderIcon,\n  MoreVerticalIcon,\n  PlusIcon,\n  TrendingUpIcon,\n} from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <GripVerticalIcon className=\"size-3 text-muted-foreground\" />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge\n        variant=\"outline\"\n        className=\"flex gap-1 px-1.5 text-muted-foreground [&_svg]:size-3\"\n      >\n        {row.original.status === \"Done\" ? (\n          <CheckCircle2Icon className=\"text-green-500 dark:text-green-400\" />\n        ) : (\n          <LoaderIcon />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"h-8 w-40\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n              <SelectItem value=\"Jamik Tashpulatov\">\n                Jamik Tashpulatov\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"flex size-8 text-muted-foreground data-[state=open]:bg-muted\"\n            size=\"icon\"\n          >\n            <MoreVerticalIcon />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"flex w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"@4xl/main:hidden flex w-fit\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"outline\">Outline</SelectItem>\n            <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n            <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n            <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"@4xl/main:flex hidden\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\" className=\"gap-1\">\n            Past Performance{\" \"}\n            <Badge\n              variant=\"secondary\"\n              className=\"flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30\"\n            >\n              3\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\" className=\"gap-1\">\n            Key Personnel{\" \"}\n            <Badge\n              variant=\"secondary\"\n              className=\"flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30\"\n            >\n              2\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <ColumnsIcon />\n                <span className=\"hidden lg:inline\">Customize Columns</span>\n                <span className=\"lg:hidden\">Columns</span>\n                <ChevronDownIcon />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <PlusIcon />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  {[10, 20, 30, 40, 50].map((pageSize) => (\n                    <SelectItem key={pageSize} value={`${pageSize}`}>\n                      {pageSize}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <ChevronsLeftIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <ChevronLeftIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <ChevronRightIcon />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <ChevronsRightIcon />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </SheetTrigger>\n      <SheetContent side=\"right\" className=\"flex flex-col\">\n        <SheetHeader className=\"gap-1\">\n          <SheetTitle>{item.header}</SheetTitle>\n          <SheetDescription>\n            Showing total visitors for the last 6 months\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto py-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 font-medium leading-none\">\n                  Trending up by 5.2% this month{\" \"}\n                  <TrendingUpIcon className=\"size-4\" />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Table of Contents\">\n                      Table of Contents\n                    </SelectItem>\n                    <SelectItem value=\"Executive Summary\">\n                      Executive Summary\n                    </SelectItem>\n                    <SelectItem value=\"Technical Approach\">\n                      Technical Approach\n                    </SelectItem>\n                    <SelectItem value=\"Design\">Design</SelectItem>\n                    <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                    <SelectItem value=\"Focus Documents\">\n                      Focus Documents\n                    </SelectItem>\n                    <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                    <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Done\">Done</SelectItem>\n                    <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                    <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                  <SelectItem value=\"Jamik Tashpulatov\">\n                    Jamik Tashpulatov\n                  </SelectItem>\n                  <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <SheetFooter className=\"mt-auto flex gap-2 sm:flex-col sm:space-x-0\">\n          <Button className=\"w-full\">Submit</Button>\n          <SheetClose asChild>\n            <Button variant=\"outline\" className=\"w-full\">\n              Done\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-documents.tsx",
+      "content": "\"use client\"\n\nimport {\n  FolderIcon,\n  MoreHorizontalIcon,\n  ShareIcon,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"rounded-sm data-[state=open]:bg-accent\"\n                >\n                  <MoreHorizontalIcon />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <FolderIcon />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ShareIcon />\n                  <span>Share</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontalIcon className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { MailIcon, PlusCircleIcon, type LucideIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <PlusCircleIcon />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"h-9 w-9 shrink-0 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <MailIcon />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon && <item.icon />}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BellIcon,\n  CreditCardIcon,\n  LogOutIcon,\n  MoreVerticalIcon,\n  UserCircleIcon,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {user.email}\n                </span>\n              </div>\n              <MoreVerticalIcon className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <UserCircleIcon />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCardIcon />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <BellIcon />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOutIcon />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/section-cards.tsx",
+      "content": "import { TrendingDownIcon, TrendingUpIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:shadow-xs @xl/main:grid-cols-2 @5xl/main:grid-cols-4 grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card lg:px-6\">\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            $1,250.00\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +12.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            1,234\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingDownIcon className=\"size-3\" />\n              -20%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period <TrendingDownIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            45,678\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +12.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader className=\"relative\">\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"@[250px]/card:text-3xl text-2xl font-semibold tabular-nums\">\n            4.5%\n          </CardTitle>\n          <div className=\"absolute right-4 top-4\">\n            <Badge variant=\"outline\" className=\"flex gap-1 rounded-lg text-xs\">\n              <TrendingUpIcon className=\"size-3\" />\n              +4.5%\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance <TrendingUpIcon className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/dashboard-01/components/site-header.tsx",
+      "content": "import { Separator } from \"@/registry/new-york/ui/separator\"\nimport { SidebarTrigger } from \"@/registry/new-york/ui/sidebar\"\n\nexport function SiteHeader() {\n  return (\n    <header className=\"group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear\">\n      <div className=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\n        <SidebarTrigger className=\"-ml-1\" />\n        <Separator\n          orientation=\"vertical\"\n          className=\"mx-2 data-[orientation=vertical]:h-4\"\n        />\n        <h1 className=\"text-base font-medium\">Documents</h1>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component",
       "target": ""
     }
+  ],
+  "categories": [
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-02.json b/apps/www/public/r/styles/new-york/dashboard-02.json
deleted file mode 100644
index 6aa64154715..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-02.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "dashboard-02",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-02.tsx",
-      "content": "import Link from \"next/link\"\nimport {\n  Bell,\n  CircleUser,\n  Home,\n  LineChart,\n  Menu,\n  Package,\n  Package2,\n  Search,\n  ShoppingCart,\n  Users,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\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 {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n      <div className=\"hidden border-r bg-muted/40 md:block\">\n        <div className=\"flex h-full max-h-screen flex-col gap-2\">\n          <div className=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n            <Link href=\"/\" className=\"flex items-center gap-2 font-semibold\">\n              <Package2 className=\"h-6 w-6\" />\n              <span className=\"\">Acme Inc</span>\n            </Link>\n            <Button variant=\"outline\" size=\"icon\" className=\"ml-auto h-8 w-8\">\n              <Bell className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle notifications</span>\n            </Button>\n          </div>\n          <div className=\"flex-1\">\n            <nav className=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Home className=\"h-4 w-4\" />\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <ShoppingCart className=\"h-4 w-4\" />\n                Orders\n                <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n              >\n                <Package className=\"h-4 w-4\" />\n                Products{\" \"}\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Users className=\"h-4 w-4\" />\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <LineChart className=\"h-4 w-4\" />\n                Analytics\n              </Link>\n            </nav>\n          </div>\n          <div className=\"mt-auto p-4\">\n            <Card x-chunk=\"A card with a call to action\">\n              <CardHeader className=\"p-2 pt-0 md:p-4\">\n                <CardTitle>Upgrade to Pro</CardTitle>\n                <CardDescription>\n                  Unlock all features and get unlimited access to our support\n                  team.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"p-2 pt-0 md:p-4 md:pt-0\">\n                <Button size=\"sm\" className=\"w-full\">\n                  Upgrade\n                </Button>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n      <div className=\"flex flex-col\">\n        <header className=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"shrink-0 md:hidden\"\n              >\n                <Menu className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle navigation menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"flex flex-col\">\n              <nav className=\"grid gap-2 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-2 text-lg font-semibold\"\n                >\n                  <Package2 className=\"h-6 w-6\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                  <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                    6\n                  </Badge>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Analytics\n                </Link>\n              </nav>\n              <div className=\"mt-auto\">\n                <Card>\n                  <CardHeader>\n                    <CardTitle>Upgrade to Pro</CardTitle>\n                    <CardDescription>\n                      Unlock all features and get unlimited access to our\n                      support team.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Button size=\"sm\" className=\"w-full\">\n                      Upgrade\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </SheetContent>\n          </Sheet>\n          <div className=\"w-full flex-1\">\n            <form>\n              <div className=\"relative\">\n                <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n                <Input\n                  type=\"search\"\n                  placeholder=\"Search products...\"\n                  className=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n                />\n              </div>\n            </form>\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n          <div className=\"flex items-center\">\n            <h1 className=\"text-lg font-semibold md:text-2xl\">Inventory</h1>\n          </div>\n          <div\n            x-chunk=\"An empty state showing no products with a heading, description and a call to action to add a product.\"\n            className=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\"\n          >\n            <div className=\"flex flex-col items-center gap-1 text-center\">\n              <h3 className=\"text-2xl font-bold tracking-tight\">\n                You have no products\n              </h3>\n              <p className=\"text-sm text-muted-foreground\">\n                You can start selling as soon as you add a product.\n              </p>\n              <Button className=\"mt-4\">Add Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-03.json b/apps/www/public/r/styles/new-york/dashboard-03.json
deleted file mode 100644
index b5e28630d65..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-03.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "dashboard-03",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "button",
-    "drawer",
-    "input",
-    "label",
-    "select",
-    "textarea",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-03.tsx",
-      "content": "import {\n  Bird,\n  Book,\n  Bot,\n  Code2,\n  CornerDownLeft,\n  LifeBuoy,\n  Mic,\n  Paperclip,\n  Rabbit,\n  Settings,\n  Settings2,\n  Share,\n  SquareTerminal,\n  SquareUser,\n  Triangle,\n  Turtle,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid h-screen w-full pl-[53px]\">\n      <aside className=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n        <div className=\"border-b p-2\">\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n            <Triangle className=\"size-5 fill-foreground\" />\n          </Button>\n        </div>\n        <nav className=\"grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Playground\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Models\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              API\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Help\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col\">\n        <header className=\"sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4\">\n          <h1 className=\"text-xl font-semibold\">Playground</h1>\n          <Drawer>\n            <DrawerTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\">\n                <Settings className=\"size-4\" />\n                <span className=\"sr-only\">Settings</span>\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"max-h-[80vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Configuration</DrawerTitle>\n                <DrawerDescription>\n                  Configure the settings for the model and messages.\n                </DrawerDescription>\n              </DrawerHeader>\n              <form className=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Settings\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"model\">Model</Label>\n                    <Select>\n                      <SelectTrigger\n                        id=\"model\"\n                        className=\"items-start [&_[data-description]]:hidden\"\n                      >\n                        <SelectValue placeholder=\"Select a model\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"genesis\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Rabbit className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Genesis\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Our fastest model for general use cases.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"explorer\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Bird className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Explorer\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Performance and speed for efficiency.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"quantum\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Turtle className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Quantum\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                The most powerful model for complex\n                                computations.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"temperature\">Temperature</Label>\n                    <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </fieldset>\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Messages\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"role\">Role</Label>\n                    <Select defaultValue=\"system\">\n                      <SelectTrigger>\n                        <SelectValue placeholder=\"Select a role\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"system\">System</SelectItem>\n                        <SelectItem value=\"user\">User</SelectItem>\n                        <SelectItem value=\"assistant\">Assistant</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"content\">Content</Label>\n                    <Textarea id=\"content\" placeholder=\"You are a...\" />\n                  </div>\n                </fieldset>\n              </form>\n            </DrawerContent>\n          </Drawer>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"ml-auto gap-1.5 text-sm\"\n          >\n            <Share className=\"size-3.5\" />\n            Share\n          </Button>\n        </header>\n        <main className=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n          <div\n            className=\"relative hidden flex-col items-start gap-8 md:flex\"\n            x-chunk=\"A settings form a configuring an AI model and messages.\"\n          >\n            <form className=\"grid w-full items-start gap-6\">\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      className=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              The most powerful model for complex computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </div>\n              </fieldset>\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"role\">Role</Label>\n                  <Select defaultValue=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">System</SelectItem>\n                      <SelectItem value=\"user\">User</SelectItem>\n                      <SelectItem value=\"assistant\">Assistant</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"content\">Content</Label>\n                  <Textarea\n                    id=\"content\"\n                    placeholder=\"You are a...\"\n                    className=\"min-h-[9.5rem]\"\n                  />\n                </div>\n              </fieldset>\n            </form>\n          </div>\n          <div className=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n            <Badge variant=\"outline\" className=\"absolute right-3 top-3\">\n              Output\n            </Badge>\n            <div className=\"flex-1\" />\n            <form\n              className=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\"\n              x-chunk=\"A form for sending a message to an AI chatbot. The form has a textarea and buttons to upload files and record audio.\"\n            >\n              <Label htmlFor=\"message\" className=\"sr-only\">\n                Message\n              </Label>\n              <Textarea\n                id=\"message\"\n                placeholder=\"Type your message here...\"\n                className=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n              />\n              <div className=\"flex items-center p-3 pt-0\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip className=\"size-4\" />\n                      <span className=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Attach File</TooltipContent>\n                </Tooltip>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic className=\"size-4\" />\n                      <span className=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Use Microphone</TooltipContent>\n                </Tooltip>\n                <Button type=\"submit\" size=\"sm\" className=\"ml-auto gap-1.5\">\n                  Send Message\n                  <CornerDownLeft className=\"size-3.5\" />\n                </Button>\n              </div>\n            </form>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-04.json b/apps/www/public/r/styles/new-york/dashboard-04.json
deleted file mode 100644
index 6c6ad7fc652..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-04.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "dashboard-04",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "dropdown-menu",
-    "input"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-04.tsx",
-      "content": "import Link from \"next/link\"\nimport { CircleUser, Menu, Package2, Search } from \"lucide-react\"\n\nimport { 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 { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <nav className=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Settings\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Settings\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <main className=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n        <div className=\"mx-auto grid w-full max-w-6xl gap-2\">\n          <h1 className=\"text-3xl font-semibold\">Settings</h1>\n        </div>\n        <div className=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n          <nav\n            className=\"grid gap-4 text-sm text-muted-foreground\"\n            x-chunk=\"A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings.\"\n            x-chunk-container=\"chunk-container after:right-0\"\n          >\n            <Link href=\"#\" className=\"font-semibold text-primary\">\n              General\n            </Link>\n            <Link href=\"#\">Security</Link>\n            <Link href=\"#\">Integrations</Link>\n            <Link href=\"#\">Support</Link>\n            <Link href=\"#\">Organizations</Link>\n            <Link href=\"#\">Advanced</Link>\n          </nav>\n          <div className=\"grid gap-6\">\n            <Card x-chunk=\"A form to update the store name.\">\n              <CardHeader>\n                <CardTitle>Store Name</CardTitle>\n                <CardDescription>\n                  Used to identify your store in the marketplace.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Input placeholder=\"Store Name\" />\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n            <Card x-chunk=\"A form to update the plugins directory with a checkbox to allow administrators to change the directory.\">\n              <CardHeader>\n                <CardTitle>Plugins Directory</CardTitle>\n                <CardDescription>\n                  The directory within your project, in which your plugins are\n                  located.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form className=\"flex flex-col gap-4\">\n                  <Input\n                    placeholder=\"Project Name\"\n                    defaultValue=\"/content/plugins\"\n                  />\n                  <div className=\"flex items-center space-x-2\">\n                    <Checkbox id=\"include\" defaultChecked />\n                    <label\n                      htmlFor=\"include\"\n                      className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                    >\n                      Allow administrators to change the directory.\n                    </label>\n                  </div>\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n          </div>\n        </div>\n      </main>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-05.json b/apps/www/public/r/styles/new-york/dashboard-05.json
deleted file mode 100644
index 1504eaf2f16..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-05.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "dashboard-05",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "pagination",
-    "progress",
-    "separator",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-05.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { 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 {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/new-york/ui/pagination\"\nimport { Progress } from \"@/registry/new-york/ui/progress\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-4\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-4\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Orders</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n          <div className=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n            <div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n              <Card\n                className=\"sm:col-span-2\"\n                x-chunk=\"A card for an orders dashboard with a description and a button to create a new order.\"\n              >\n                <CardHeader className=\"pb-3\">\n                  <CardTitle>Your Orders</CardTitle>\n                  <CardDescription className=\"text-balance max-w-lg leading-relaxed\">\n                    Introducing Our Dynamic Orders Dashboard for Seamless\n                    Management and Insightful Analysis.\n                  </CardDescription>\n                </CardHeader>\n                <CardFooter>\n                  <Button>Create New Order</Button>\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Week</CardDescription>\n                  <CardTitle className=\"text-4xl\">$1,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +25% from last week\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={25} aria-label=\"25% increase\" />\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Month</CardDescription>\n                  <CardTitle className=\"text-4xl\">$5,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +10% from last month\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={12} aria-label=\"12% increase\" />\n                </CardFooter>\n              </Card>\n            </div>\n            <Tabs defaultValue=\"week\">\n              <div className=\"flex items-center\">\n                <TabsList>\n                  <TabsTrigger value=\"week\">Week</TabsTrigger>\n                  <TabsTrigger value=\"month\">Month</TabsTrigger>\n                  <TabsTrigger value=\"year\">Year</TabsTrigger>\n                </TabsList>\n                <div className=\"ml-auto flex items-center gap-2\">\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        size=\"sm\"\n                        className=\"h-7 gap-1 text-sm\"\n                      >\n                        <ListFilter className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only sm:not-sr-only\">Filter</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuCheckboxItem checked>\n                        Fulfilled\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Declined\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Refunded\n                      </DropdownMenuCheckboxItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    className=\"h-7 gap-1 text-sm\"\n                  >\n                    <File className=\"h-3.5 w-3.5\" />\n                    <span className=\"sr-only sm:not-sr-only\">Export</span>\n                  </Button>\n                </div>\n              </div>\n              <TabsContent value=\"week\">\n                <Card x-chunk=\"A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.\">\n                  <CardHeader className=\"px-7\">\n                    <CardTitle>Orders</CardTitle>\n                    <CardDescription>\n                      Recent orders from your store.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead>Customer</TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Type\n                          </TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Status\n                          </TableHead>\n                          <TableHead className=\"hidden md:table-cell\">\n                            Date\n                          </TableHead>\n                          <TableHead className=\"text-right\">Amount</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow className=\"bg-accent\">\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        {/* <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow> */}\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Noah Williams</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              noah@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Subscription\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-25\n                          </TableCell>\n                          <TableCell className=\"text-right\">$350.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                </Card>\n              </TabsContent>\n            </Tabs>\n          </div>\n          <div>\n            <Card\n              className=\"overflow-hidden\"\n              x-chunk=\"An order details card with order details, shipping information, customer information and payment information.\"\n            >\n              <CardHeader className=\"flex flex-row items-start bg-muted/50\">\n                <div className=\"grid gap-0.5\">\n                  <CardTitle className=\"group flex items-center gap-2 text-lg\">\n                    Order Oe31b70H\n                    <Button\n                      size=\"icon\"\n                      variant=\"outline\"\n                      className=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                    >\n                      <Copy className=\"h-3 w-3\" />\n                      <span className=\"sr-only\">Copy Order ID</span>\n                    </Button>\n                  </CardTitle>\n                  <CardDescription>Date: November 23, 2023</CardDescription>\n                </div>\n                <div className=\"ml-auto flex items-center gap-1\">\n                  <Button size=\"sm\" variant=\"outline\" className=\"h-8 gap-1\">\n                    <Truck className=\"h-3.5 w-3.5\" />\n                    <span className=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                      Track Order\n                    </span>\n                  </Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-8 w-8\">\n                        <MoreVertical className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">More</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuItem>Edit</DropdownMenuItem>\n                      <DropdownMenuItem>Export</DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>Trash</DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </div>\n              </CardHeader>\n              <CardContent className=\"p-6 text-sm\">\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Order Details</div>\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Glimmer Lamps x <span>2</span>\n                      </span>\n                      <span>$250.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Aqua Filters x <span>1</span>\n                      </span>\n                      <span>$49.00</span>\n                    </li>\n                  </ul>\n                  <Separator className=\"my-2\" />\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Subtotal</span>\n                      <span>$299.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Shipping</span>\n                      <span>$5.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Tax</span>\n                      <span>$25.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between font-semibold\">\n                      <span className=\"text-muted-foreground\">Total</span>\n                      <span>$329.00</span>\n                    </li>\n                  </ul>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <div className=\"font-semibold\">Shipping Information</div>\n                    <address className=\"grid gap-0.5 not-italic text-muted-foreground\">\n                      <span>Liam Johnson</span>\n                      <span>1234 Main St.</span>\n                      <span>Anytown, CA 12345</span>\n                    </address>\n                  </div>\n                  <div className=\"grid auto-rows-max gap-3\">\n                    <div className=\"font-semibold\">Billing Information</div>\n                    <div className=\"text-muted-foreground\">\n                      Same as shipping address\n                    </div>\n                  </div>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Customer Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Customer</dt>\n                      <dd>Liam Johnson</dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Email</dt>\n                      <dd>\n                        <a href=\"mailto:\">liam@acme.com</a>\n                      </dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Phone</dt>\n                      <dd>\n                        <a href=\"tel:\">+1 234 567 890</a>\n                      </dd>\n                    </div>\n                  </dl>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Payment Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"flex items-center gap-1 text-muted-foreground\">\n                        <CreditCard className=\"h-4 w-4\" />\n                        Visa\n                      </dt>\n                      <dd>**** **** **** 4532</dd>\n                    </div>\n                  </dl>\n                </div>\n              </CardContent>\n              <CardFooter className=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n                <div className=\"text-xs text-muted-foreground\">\n                  Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n                </div>\n                <Pagination className=\"ml-auto mr-0 w-auto\">\n                  <PaginationContent>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronLeft className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Previous Order</span>\n                      </Button>\n                    </PaginationItem>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronRight className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Next Order</span>\n                      </Button>\n                    </PaginationItem>\n                  </PaginationContent>\n                </Pagination>\n              </CardFooter>\n            </Card>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-06.json b/apps/www/public/r/styles/new-york/dashboard-06.json
deleted file mode 100644
index 97a0b3c6961..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-06.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "dashboard-06",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-06.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { 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 {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 py-4\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>All Products</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <Tabs defaultValue=\"all\">\n            <div className=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"all\">All</TabsTrigger>\n                <TabsTrigger value=\"active\">Active</TabsTrigger>\n                <TabsTrigger value=\"draft\">Draft</TabsTrigger>\n                <TabsTrigger value=\"archived\" className=\"hidden sm:flex\">\n                  Archived\n                </TabsTrigger>\n              </TabsList>\n              <div className=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"outline\" size=\"sm\" className=\"h-7 gap-1\">\n                      <ListFilter className=\"h-3.5 w-3.5\" />\n                      <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                        Filter\n                      </span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuCheckboxItem checked>\n                      Active\n                    </DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>\n                      Archived\n                    </DropdownMenuCheckboxItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button size=\"sm\" variant=\"outline\" className=\"h-7 gap-1\">\n                  <File className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Export\n                  </span>\n                </Button>\n                <Button size=\"sm\" className=\"h-7 gap-1\">\n                  <PlusCircle className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Add Product\n                  </span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"all\">\n              <Card x-chunk=\"A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.\">\n                <CardHeader>\n                  <CardTitle>Products</CardTitle>\n                  <CardDescription>\n                    Manage your products and view their sales performance.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead className=\"hidden w-[100px] sm:table-cell\">\n                          <span className=\"sr-only\">Image</span>\n                        </TableHead>\n                        <TableHead>Name</TableHead>\n                        <TableHead>Status</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Total Sales\n                        </TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Created at\n                        </TableHead>\n                        <TableHead>\n                          <span className=\"sr-only\">Actions</span>\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Laser Lemonade Machine\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Draft</Badge>\n                        </TableCell>\n                        <TableCell>$499.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          25\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-07-12 10:42 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Hypernova Headphones\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$129.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          100\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-10-18 03:21 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          AeroGlow Desk Lamp\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$39.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          50\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-11-29 08:15 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          TechTonic Energy Drink\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"secondary\">Draft</Badge>\n                        </TableCell>\n                        <TableCell>$2.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          0\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-12-25 11:59 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Gamer Gear Pro Controller\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$59.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          75\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-01-01 12:00 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Luminous VR Headset\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$199.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          30\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-02-14 02:14 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter>\n                  <div className=\"text-xs text-muted-foreground\">\n                    Showing <strong>1-10</strong> of <strong>32</strong>{\" \"}\n                    products\n                  </div>\n                </CardFooter>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-07.json b/apps/www/public/r/styles/new-york/dashboard-07.json
deleted file mode 100644
index 1618e7dfd18..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-07.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "dashboard-07",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "pagination",
-    "progress",
-    "separator",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-07.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { 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 {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 py-4\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Edit Product</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <div className=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n            <div className=\"flex items-center gap-4\">\n              <Button variant=\"outline\" size=\"icon\" className=\"h-7 w-7\">\n                <ChevronLeft className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Back</span>\n              </Button>\n              <h1 className=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n                Pro Controller\n              </h1>\n              <Badge variant=\"outline\" className=\"ml-auto sm:ml-0\">\n                In stock\n              </Badge>\n              <div className=\"hidden items-center gap-2 md:ml-auto md:flex\">\n                <Button variant=\"outline\" size=\"sm\">\n                  Discard\n                </Button>\n                <Button size=\"sm\">Save Product</Button>\n              </div>\n            </div>\n            <div className=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n              <div className=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product details\">\n                  <CardHeader>\n                    <CardTitle>Product Details</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"name\">Name</Label>\n                        <Input\n                          id=\"name\"\n                          type=\"text\"\n                          className=\"w-full\"\n                          defaultValue=\"Gamer Gear Pro Controller\"\n                        />\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"description\">Description</Label>\n                        <Textarea\n                          id=\"description\"\n                          defaultValue=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                          className=\"min-h-32\"\n                        />\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product stock and variants\">\n                  <CardHeader>\n                    <CardTitle>Stock</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead className=\"w-[100px]\">SKU</TableHead>\n                          <TableHead>Stock</TableHead>\n                          <TableHead>Price</TableHead>\n                          <TableHead className=\"w-[100px]\">Size</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-001\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-1\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-1\"\n                              type=\"number\"\n                              defaultValue=\"100\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-1\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-1\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-002\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-2\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-2\"\n                              type=\"number\"\n                              defaultValue=\"143\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-2\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-2\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"m\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-003\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-3\"\n                              type=\"number\"\n                              defaultValue=\"32\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"price-3\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                  <CardFooter className=\"justify-center border-t p-4\">\n                    <Button size=\"sm\" variant=\"ghost\" className=\"gap-1\">\n                      <PlusCircle className=\"h-3.5 w-3.5\" />\n                      Add Variant\n                    </Button>\n                  </CardFooter>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product category and subcategory\">\n                  <CardHeader>\n                    <CardTitle>Product Category</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6 sm:grid-cols-3\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"category\">Category</Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"category\"\n                            aria-label=\"Select category\"\n                          >\n                            <SelectValue placeholder=\"Select category\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"clothing\">Clothing</SelectItem>\n                            <SelectItem value=\"electronics\">\n                              Electronics\n                            </SelectItem>\n                            <SelectItem value=\"accessories\">\n                              Accessories\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"subcategory\">\n                          Subcategory (optional)\n                        </Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"subcategory\"\n                            aria-label=\"Select subcategory\"\n                          >\n                            <SelectValue placeholder=\"Select subcategory\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"t-shirts\">T-Shirts</SelectItem>\n                            <SelectItem value=\"hoodies\">Hoodies</SelectItem>\n                            <SelectItem value=\"sweatshirts\">\n                              Sweatshirts\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              </div>\n              <div className=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product status\">\n                  <CardHeader>\n                    <CardTitle>Product Status</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"status\">Status</Label>\n                        <Select>\n                          <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                            <SelectValue placeholder=\"Select status\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"draft\">Draft</SelectItem>\n                            <SelectItem value=\"published\">Active</SelectItem>\n                            <SelectItem value=\"archived\">Archived</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card\n                  className=\"overflow-hidden\"\n                  x-chunk=\"A card with a form to upload product images\"\n                >\n                  <CardHeader>\n                    <CardTitle>Product Images</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-2\">\n                      <Image\n                        alt=\"Product image\"\n                        className=\"aspect-square w-full rounded-md object-cover\"\n                        height=\"300\"\n                        src=\"/placeholder.svg\"\n                        width=\"300\"\n                      />\n                      <div className=\"grid grid-cols-3 gap-2\">\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button className=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                          <Upload className=\"h-4 w-4 text-muted-foreground\" />\n                          <span className=\"sr-only\">Upload</span>\n                        </button>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a call to action to archive the product\">\n                  <CardHeader>\n                    <CardTitle>Archive Product</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div></div>\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Archive Product\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-center gap-2 md:hidden\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">Save Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/data-table-demo.json b/apps/www/public/r/styles/new-york/data-table-demo.json
new file mode 100644
index 00000000000..e09d49409b3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/data-table-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-table-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "data-table"
+  ],
+  "files": [
+    {
+      "path": "examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  SortingState,\n  VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nconst data: Payment[] = [\n  {\n    id: \"m5gr84i9\",\n    amount: 316,\n    status: \"success\",\n    email: \"ken99@example.com\",\n  },\n  {\n    id: \"3u1reuv4\",\n    amount: 242,\n    status: \"success\",\n    email: \"Abe45@example.com\",\n  },\n  {\n    id: \"derv1ws0\",\n    amount: 837,\n    status: \"processing\",\n    email: \"Monserrat44@example.com\",\n  },\n  {\n    id: \"5kma53ae\",\n    amount: 874,\n    status: \"success\",\n    email: \"Silas22@example.com\",\n  },\n  {\n    id: \"bhqecj4p\",\n    amount: 721,\n    status: \"failed\",\n    email: \"carmella@example.com\",\n  },\n]\n\nexport type Payment = {\n  id: string\n  amount: number\n  status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n  email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n    ),\n  },\n  {\n    accessorKey: \"email\",\n    header: ({ column }) => {\n      return (\n        <Button\n          variant=\"ghost\"\n          onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n        >\n          Email\n          <ArrowUpDown />\n        </Button>\n      )\n    },\n    cell: ({ row }) => <div className=\"lowercase\">{row.getValue(\"email\")}</div>,\n  },\n  {\n    accessorKey: \"amount\",\n    header: () => <div className=\"text-right\">Amount</div>,\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"amount\"))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n\n      return <div className=\"text-right font-medium\">{formatted}</div>\n    },\n  },\n  {\n    id: \"actions\",\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" className=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem\n              onClick={() => navigator.clipboard.writeText(payment.id)}\n            >\n              Copy payment ID\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>View customer</DropdownMenuItem>\n            <DropdownMenuItem>View payment details</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      )\n    },\n  },\n]\n\nexport default function DataTableDemo() {\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [rowSelection, setRowSelection] = React.useState({})\n\n  const table = useReactTable({\n    data,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n  })\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-center py-4\">\n        <Input\n          placeholder=\"Filter emails...\"\n          value={(table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"}\n          onChange={(event) =>\n            table.getColumn(\"email\")?.setFilterValue(event.target.value)\n          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDown />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {table\n              .getAllColumns()\n              .filter((column) => column.getCanHide())\n              .map((column) => {\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    className=\"capitalize\"\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {column.id}\n                  </DropdownMenuCheckboxItem>\n                )\n              })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex items-center justify-end space-x-2 py-4\">\n        <div className=\"flex-1 text-sm text-muted-foreground\">\n          {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n          {table.getFilteredRowModel().rows.length} row(s) selected.\n        </div>\n        <div className=\"space-x-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            Previous\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            Next\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/date-picker-demo.json b/apps/www/public/r/styles/new-york/date-picker-demo.json
new file mode 100644
index 00000000000..cba98a1feb8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/date-picker-demo.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/date-picker-form.json b/apps/www/public/r/styles/new-york/date-picker-form.json
new file mode 100644
index 00000000000..0a1ad1ae805
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/date-picker-form.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function DatePickerForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/date-picker-with-presets.json b/apps/www/public/r/styles/new-york/date-picker-with-presets.json
new file mode 100644
index 00000000000..34ddf382588
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/date-picker-with-presets.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-presets",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-presets.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function DatePickerWithPresets() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"flex w-auto flex-col space-y-2 p-2\"\n      >\n        <Select\n          onValueChange={(value) =>\n            setDate(addDays(new Date(), parseInt(value)))\n          }\n        >\n          <SelectTrigger>\n            <SelectValue placeholder=\"Select\" />\n          </SelectTrigger>\n          <SelectContent position=\"popper\">\n            <SelectItem value=\"0\">Today</SelectItem>\n            <SelectItem value=\"1\">Tomorrow</SelectItem>\n            <SelectItem value=\"3\">In 3 days</SelectItem>\n            <SelectItem value=\"7\">In a week</SelectItem>\n          </SelectContent>\n        </Select>\n        <div className=\"rounded-md border\">\n          <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/date-picker-with-range.json b/apps/www/public/r/styles/new-york/date-picker-with-range.json
new file mode 100644
index 00000000000..e5cee0ece13
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/date-picker-with-range.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker-with-range",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/date-picker-with-range.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function DatePickerWithRange({\n  className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(2022, 0, 20),\n    to: addDays(new Date(2022, 0, 20), 20),\n  })\n\n  return (\n    <div className={cn(\"grid gap-2\", className)}>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id=\"date\"\n            variant={\"outline\"}\n            className={cn(\n              \"w-[300px] justify-start text-left font-normal\",\n              !date && \"text-muted-foreground\"\n            )}\n          >\n            <CalendarIcon />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            initialFocus\n            mode=\"range\"\n            defaultMonth={date?.from}\n            selected={date}\n            onSelect={setDate}\n            numberOfMonths={2}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dialog-close-button.json b/apps/www/public/r/styles/new-york/dialog-close-button.json
new file mode 100644
index 00000000000..79b413d16f3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/dialog-close-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-close-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-close-button.tsx",
+      "content": "import { Copy } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function DialogCloseButton() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Share</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share link</DialogTitle>\n          <DialogDescription>\n            Anyone who has this link will be able to view this.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex items-center space-x-2\">\n          <div className=\"grid flex-1 gap-2\">\n            <Label htmlFor=\"link\" className=\"sr-only\">\n              Link\n            </Label>\n            <Input\n              id=\"link\"\n              defaultValue=\"https://ui.shadcn.com/docs/installation\"\n              readOnly\n            />\n          </div>\n          <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n            <span className=\"sr-only\">Copy</span>\n            <Copy />\n          </Button>\n        </div>\n        <DialogFooter className=\"sm:justify-start\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"secondary\">\n              Close\n            </Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dialog-demo.json b/apps/www/public/r/styles/new-york/dialog-demo.json
new file mode 100644
index 00000000000..33b74e08a36
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/dialog-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/dialog-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dialog.json b/apps/www/public/r/styles/new-york/dialog.json
index ed3b300be20..46c640bb760 100644
--- a/apps/www/public/r/styles/new-york/dialog.json
+++ b/apps/www/public/r/styles/new-york/dialog.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "dialog",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <Cross2Icon className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/drawer-demo.json b/apps/www/public/r/styles/new-york/drawer-demo.json
new file mode 100644
index 00000000000..05d3f0f92c0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/drawer-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport default function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/drawer-dialog.json b/apps/www/public/r/styles/new-york/drawer-dialog.json
new file mode 100644
index 00000000000..9815b9cf867
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/drawer-dialog.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-dialog",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "drawer",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "examples/drawer-dialog.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Edit Profile</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you're done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-4\", className)}>\n      <div className=\"grid gap-2\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-2\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/drawer.json b/apps/www/public/r/styles/new-york/drawer.json
index 6e23d8aa8f5..4ea15139020 100644
--- a/apps/www/public/r/styles/new-york/drawer.json
+++ b/apps/www/public/r/styles/new-york/drawer.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "drawer",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "vaul",
     "@radix-ui/react-dialog"
diff --git a/apps/www/public/r/styles/new-york/dropdown-menu-checkboxes.json b/apps/www/public/r/styles/new-york/dropdown-menu-checkboxes.json
new file mode 100644
index 00000000000..66514082ea3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/dropdown-menu-checkboxes.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-checkboxes",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-checkboxes.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\ntype Checked = DropdownMenuCheckboxItemProps[\"checked\"]\n\nexport default function DropdownMenuCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)\n  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)\n  const [showPanel, setShowPanel] = React.useState<Checked>(false)\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuCheckboxItem\n          checked={showStatusBar}\n          onCheckedChange={setShowStatusBar}\n        >\n          Status Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showActivityBar}\n          onCheckedChange={setShowActivityBar}\n          disabled\n        >\n          Activity Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showPanel}\n          onCheckedChange={setShowPanel}\n        >\n          Panel\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dropdown-menu-demo.json b/apps/www/public/r/styles/new-york/dropdown-menu-demo.json
new file mode 100644
index 00000000000..aed315aacc6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/dropdown-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Email</DropdownMenuItem>\n                <DropdownMenuItem>Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dropdown-menu-radio-group.json b/apps/www/public/r/styles/new-york/dropdown-menu-radio-group.json
new file mode 100644
index 00000000000..10c15d9b4dc
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/dropdown-menu-radio-group.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-radio-group",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "dropdown-menu",
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/dropdown-menu-radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function DropdownMenuRadioGroupDemo() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>\n          <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"bottom\">Bottom</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"right\">Right</DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dropdown-menu.json b/apps/www/public/r/styles/new-york/dropdown-menu.json
index eda11f9fd3a..579b0b26175 100644
--- a/apps/www/public/r/styles/new-york/dropdown-menu.json
+++ b/apps/www/public/r/styles/new-york/dropdown-menu.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "dropdown-menu",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-dropdown-menu"
   ],
   "files": [
     {
       "path": "ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport {\n  CheckIcon,\n  ChevronRightIcon,\n  DotFilledIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <DotFilledIcon className=\"h-4 w-4 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/form.json b/apps/www/public/r/styles/new-york/form.json
index 07b3fb25248..c71038d1757 100644
--- a/apps/www/public/r/styles/new-york/form.json
+++ b/apps/www/public/r/styles/new-york/form.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "form",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-label",
     "@radix-ui/react-slot",
@@ -15,7 +17,7 @@
   "files": [
     {
       "path": "ui/form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  ControllerProps,\n  FieldPath,\n  FieldValues,\n  FormProvider,\n  useFormContext,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-[0.8rem] text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message) : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-[0.8rem] font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-[0.8rem] text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-[0.8rem] font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/hover-card-demo.json b/apps/www/public/r/styles/new-york/hover-card-demo.json
new file mode 100644
index 00000000000..0ad5c112367
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/hover-card-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "hover-card"
+  ],
+  "files": [
+    {
+      "path": "examples/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-muted-foreground\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/hover-card.json b/apps/www/public/r/styles/new-york/hover-card.json
index c6e7a832ce7..0bbe76aa4bd 100644
--- a/apps/www/public/r/styles/new-york/hover-card.json
+++ b/apps/www/public/r/styles/new-york/hover-card.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hover-card",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-hover-card"
   ],
   "files": [
     {
       "path": "ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/index.json b/apps/www/public/r/styles/new-york/index.json
index 8a9843ac17e..924399da430 100644
--- a/apps/www/public/r/styles/new-york/index.json
+++ b/apps/www/public/r/styles/new-york/index.json
@@ -1,15 +1,17 @@
 {
-  "name": "new-york",
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
   "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "tailwindcss-animate",
     "class-variance-authority",
-    "lucide-react",
-    "@radix-ui/react-icons"
+    "lucide-react"
   ],
   "registryDependencies": [
     "utils"
   ],
+  "files": [],
   "tailwind": {
     "config": {
       "plugins": [
@@ -17,6 +19,5 @@
       ]
     }
   },
-  "cssVars": {},
-  "files": []
+  "cssVars": {}
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-demo.json b/apps/www/public/r/styles/new-york/input-demo.json
new file mode 100644
index 00000000000..9bde26311d9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-demo.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\n\nexport default function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-disabled.json b/apps/www/public/r/styles/new-york/input-disabled.json
new file mode 100644
index 00000000000..7fe97a4962f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-disabled.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\n\nexport default function InputDisabled() {\n  return <Input disabled type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-file.json b/apps/www/public/r/styles/new-york/input-file.json
new file mode 100644
index 00000000000..363f7363df9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-file.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-file",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "examples/input-file.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function InputFile() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"picture\">Picture</Label>\n      <Input id=\"picture\" type=\"file\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-form.json b/apps/www/public/r/styles/new-york/input-form.json
new file mode 100644
index 00000000000..12dbeddcc50
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-form.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport { Input } from \"@/registry/new-york/ui/input\"\n\nconst FormSchema = z.object({\n  username: z.string().min(2, {\n    message: \"Username must be at least 2 characters.\",\n  }),\n})\n\nexport default function InputForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      username: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-otp-controlled.json b/apps/www/public/r/styles/new-york/input-otp-controlled.json
new file mode 100644
index 00000000000..3da231e20ff
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-otp-controlled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-controlled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nexport default function InputOTPControlled() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <div className=\"space-y-2\">\n      <InputOTP\n        maxLength={6}\n        value={value}\n        onChange={(value) => setValue(value)}\n      >\n        <InputOTPGroup>\n          <InputOTPSlot index={0} />\n          <InputOTPSlot index={1} />\n          <InputOTPSlot index={2} />\n          <InputOTPSlot index={3} />\n          <InputOTPSlot index={4} />\n          <InputOTPSlot index={5} />\n        </InputOTPGroup>\n      </InputOTP>\n      <div className=\"text-center text-sm\">\n        {value === \"\" ? (\n          <>Enter your one-time password.</>\n        ) : (\n          <>You entered: {value}</>\n        )}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-otp-demo.json b/apps/www/public/r/styles/new-york/input-otp-demo.json
new file mode 100644
index 00000000000..a0626b0856a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-otp-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-demo.tsx",
+      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nexport default function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-otp-form.json b/apps/www/public/r/styles/new-york/input-otp-form.json
new file mode 100644
index 00000000000..93ad4103e72
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-otp-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nconst FormSchema = z.object({\n  pin: z.string().min(6, {\n    message: \"Your one-time password must be 6 characters.\",\n  }),\n})\n\nexport default function InputOTPForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      pin: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"pin\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>One-Time Password</FormLabel>\n              <FormControl>\n                <InputOTP maxLength={6} {...field}>\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormControl>\n              <FormDescription>\n                Please enter the one-time password sent to your phone.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-otp-pattern.json b/apps/www/public/r/styles/new-york/input-otp-pattern.json
new file mode 100644
index 00000000000..0e099cc1444
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-otp-pattern.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-pattern",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-pattern.tsx",
+      "content": "import { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nexport default function InputOTPPattern() {\n  return (\n    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-otp-separator.json b/apps/www/public/r/styles/new-york/input-otp-separator.json
new file mode 100644
index 00000000000..ced94265245
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-otp-separator.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-separator",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "examples/input-otp-separator.tsx",
+      "content": "import React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nexport default function InputOTPWithSeparator() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-otp.json b/apps/www/public/r/styles/new-york/input-otp.json
index 45700c73f22..0ce810ae02d 100644
--- a/apps/www/public/r/styles/new-york/input-otp.json
+++ b/apps/www/public/r/styles/new-york/input-otp.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "input-otp",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "input-otp"
   ],
   "files": [
     {
       "path": "ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DashIcon } from \"@radix-ui/react-icons\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\n      \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n      containerClassName\n    )}\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-1 ring-ring\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <DashIcon />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Minus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\n      \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n      containerClassName\n    )}\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-1 ring-ring\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Minus />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/input-with-button.json b/apps/www/public/r/styles/new-york/input-with-button.json
new file mode 100644
index 00000000000..cd6eba8a71d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-with-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\n\nexport default function InputWithButton() {\n  return (\n    <div className=\"flex w-full max-w-sm items-center space-x-2\">\n      <Input type=\"email\" placeholder=\"Email\" />\n      <Button type=\"submit\">Subscribe</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-with-label.json b/apps/www/public/r/styles/new-york/input-with-label.json
new file mode 100644
index 00000000000..61c8e2dee9d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-with-label.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-label",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-label.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function InputWithLabel() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email\">Email</Label>\n      <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input-with-text.json b/apps/www/public/r/styles/new-york/input-with-text.json
new file mode 100644
index 00000000000..7ed9919ea6a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/input-with-text.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "input",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/input-with-text.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function InputWithText() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email-2\">Email</Label>\n      <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n      <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/input.json b/apps/www/public/r/styles/new-york/input.json
index 20ca4956eb6..0ca4eb918a2 100644
--- a/apps/www/public/r/styles/new-york/input.json
+++ b/apps/www/public/r/styles/new-york/input.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "input",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/input.tsx",
-      "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-sm 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\",\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\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",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/label-demo.json b/apps/www/public/r/styles/new-york/label-demo.json
new file mode 100644
index 00000000000..db9a98d6e3b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/label-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/label.json b/apps/www/public/r/styles/new-york/label.json
index 44a111a2e9e..9731d7b73a3 100644
--- a/apps/www/public/r/styles/new-york/label.json
+++ b/apps/www/public/r/styles/new-york/label.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "label",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-label"
   ],
diff --git a/apps/www/public/r/styles/new-york/login-01-dark.png b/apps/www/public/r/styles/new-york/login-01-dark.png
new file mode 100644
index 00000000000..c250316cccc
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/login-01-light.png b/apps/www/public/r/styles/new-york/login-01-light.png
new file mode 100644
index 00000000000..69e4efcc891
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/login-01.json b/apps/www/public/r/styles/new-york/login-01.json
index 55fb381613d..32a4f828434 100644
--- a/apps/www/public/r/styles/new-york/login-01.json
+++ b/apps/www/public/r/styles/new-york/login-01.json
@@ -1,6 +1,9 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "login-01",
   "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple login form.",
   "registryDependencies": [
     "button",
     "card",
@@ -9,15 +12,20 @@
   ],
   "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",
+      "path": "blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york/blocks/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",
-      "type": "registry:component"
+      "path": "blocks/login-01/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>\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": ""
     }
+  ],
+  "categories": [
+    "authentication",
+    "login"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/login-02-dark.png b/apps/www/public/r/styles/new-york/login-02-dark.png
new file mode 100644
index 00000000000..26a61e686bb
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-02-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/login-02-light.png b/apps/www/public/r/styles/new-york/login-02-light.png
new file mode 100644
index 00000000000..a5f7503403d
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-02-light.png differ
diff --git a/apps/www/public/r/styles/new-york/login-02.json b/apps/www/public/r/styles/new-york/login-02.json
new file mode 100644
index 00000000000..15c7f068219
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/login-02.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-02/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/login-03-dark.png b/apps/www/public/r/styles/new-york/login-03-dark.png
new file mode 100644
index 00000000000..430199c514f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-03-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/login-03-light.png b/apps/www/public/r/styles/new-york/login-03-light.png
new file mode 100644
index 00000000000..5df8b428540
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-03-light.png differ
diff --git a/apps/www/public/r/styles/new-york/login-03.json b/apps/www/public/r/styles/new-york/login-03.json
new file mode 100644
index 00000000000..384ca9a0819
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/login-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-03/page.tsx",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/login-04-dark.png b/apps/www/public/r/styles/new-york/login-04-dark.png
new file mode 100644
index 00000000000..11bb75052dd
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-04-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/login-04-light.png b/apps/www/public/r/styles/new-york/login-04-light.png
new file mode 100644
index 00000000000..d41f49a5bd0
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-04-light.png differ
diff --git a/apps/www/public/r/styles/new-york/login-04.json b/apps/www/public/r/styles/new-york/login-04.json
new file mode 100644
index 00000000000..cd33117a255
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/login-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "blocks/login-04/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Card, CardContent } 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.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\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                <div className=\"flex items-center\">\n                  <Label htmlFor=\"password\">Password</Label>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 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              <div className=\"grid grid-cols-3 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                  <span className=\"sr-only\">Login with Apple</span>\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                  <span className=\"sr-only\">Login with Google</span>\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=\"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\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\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          <div className=\"relative hidden bg-muted md: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        </CardContent>\n      </Card>\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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/login-05-dark.png b/apps/www/public/r/styles/new-york/login-05-dark.png
new file mode 100644
index 00000000000..fbd54d230bd
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-05-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/login-05-light.png b/apps/www/public/r/styles/new-york/login-05-light.png
new file mode 100644
index 00000000000..5799e89dc56
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-05-light.png differ
diff --git a/apps/www/public/r/styles/new-york/login-05.json b/apps/www/public/r/styles/new-york/login-05.json
new file mode 100644
index 00000000000..b1be986de5b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/login-05.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york/blocks/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": "blocks/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": ""
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/menubar-demo.json b/apps/www/public/r/styles/new-york/menubar-demo.json
new file mode 100644
index 00000000000..80ca3b848a0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/menubar-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "menubar"
+  ],
+  "files": [
+    {
+      "path": "examples/menubar-demo.tsx",
+      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/new-york/ui/menubar\"\n\nexport default function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/menubar.json b/apps/www/public/r/styles/new-york/menubar.json
index 967cb08ae04..87eb8707733 100644
--- a/apps/www/public/r/styles/new-york/menubar.json
+++ b/apps/www/public/r/styles/new-york/menubar.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "menubar",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-menubar"
   ],
   "files": [
     {
       "path": "ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  CheckIcon,\n  ChevronRightIcon,\n  DotFilledIcon,\n} from \"@radix-ui/react-icons\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n    ref\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <DotFilledIcon className=\"h-4 w-4 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarPortal,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarGroup,\n  MenubarSub,\n  MenubarShortcut,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup {...props} />\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n    ref\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Circle className=\"h-4 w-4 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarPortal,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarGroup,\n  MenubarSub,\n  MenubarShortcut,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/mode-toggle.json b/apps/www/public/r/styles/new-york/mode-toggle.json
new file mode 100644
index 00000000000..5d82bd958de
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/mode-toggle.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mode-toggle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/mode-toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n  const { setTheme } = useTheme()\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"icon\">\n          <Sun className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n          <Moon className=\"absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n          <span className=\"sr-only\">Toggle theme</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n          Light\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n          Dark\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n          System\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/navigation-menu-demo.json b/apps/www/public/r/styles/new-york/navigation-menu-demo.json
new file mode 100644
index 00000000000..b474ba02029
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/navigation-menu-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "examples/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/new-york/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <Icons.logo className=\"h-6 w-6\" />\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\n                      Beautifully designed components built with Radix UI and\n                      Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nconst ListItem = React.forwardRef<\n  React.ElementRef<\"a\">,\n  React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          ref={ref}\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"text-sm font-medium leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/navigation-menu.json b/apps/www/public/r/styles/new-york/navigation-menu.json
index 97ca99f2038..bb01c99a789 100644
--- a/apps/www/public/r/styles/new-york/navigation-menu.json
+++ b/apps/www/public/r/styles/new-york/navigation-menu.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "navigation-menu",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-navigation-menu"
   ],
   "files": [
     {
       "path": "ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center space-x-1\",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDownIcon\n      className=\"relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto \",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n",
+      "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center space-x-1\",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDown\n      className=\"relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto \",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/pagination-demo.json b/apps/www/public/r/styles/new-york/pagination-demo.json
new file mode 100644
index 00000000000..7048db45db0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/pagination-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "pagination"
+  ],
+  "files": [
+    {
+      "path": "examples/pagination-demo.tsx",
+      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/new-york/ui/pagination\"\n\nexport default function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/pagination.json b/apps/www/public/r/styles/new-york/pagination.json
index 1ed4a074f5b..55eff111fe1 100644
--- a/apps/www/public/r/styles/new-york/pagination.json
+++ b/apps/www/public/r/styles/new-york/pagination.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "pagination",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
       "path": "ui/pagination.tsx",
-      "content": "import * as React from \"react\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  DotsHorizontalIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\n  />\n)\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\"flex flex-row items-center gap-1\", className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? \"page\" : undefined}\n    className={cn(\n      buttonVariants({\n        variant: isActive ? \"outline\" : \"ghost\",\n        size,\n      }),\n      className\n    )}\n    {...props}\n  />\n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    size=\"default\"\n    className={cn(\"gap-1 pl-2.5\", className)}\n    {...props}\n  >\n    <ChevronLeftIcon className=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to next page\"\n    size=\"default\"\n    className={cn(\"gap-1 pr-2.5\", className)}\n    {...props}\n  >\n    <span>Next</span>\n    <ChevronRightIcon className=\"h-4 w-4\" />\n  </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <DotsHorizontalIcon className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\n  />\n)\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\"flex flex-row items-center gap-1\", className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? \"page\" : undefined}\n    className={cn(\n      buttonVariants({\n        variant: isActive ? \"outline\" : \"ghost\",\n        size,\n      }),\n      className\n    )}\n    {...props}\n  />\n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    size=\"default\"\n    className={cn(\"gap-1 pl-2.5\", className)}\n    {...props}\n  >\n    <ChevronLeft className=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to next page\"\n    size=\"default\"\n    className={cn(\"gap-1 pr-2.5\", className)}\n    {...props}\n  >\n    <span>Next</span>\n    <ChevronRight className=\"h-4 w-4\" />\n  </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/popover-demo.json b/apps/www/public/r/styles/new-york/popover-demo.json
new file mode 100644
index 00000000000..6d87bdeaae1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/popover-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "examples/popover-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/popover.json b/apps/www/public/r/styles/new-york/popover.json
index d4a618eeeee..47f9e82a30f 100644
--- a/apps/www/public/r/styles/new-york/popover.json
+++ b/apps/www/public/r/styles/new-york/popover.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "popover",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-popover"
   ],
   "files": [
     {
       "path": "ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/progress-demo.json b/apps/www/public/r/styles/new-york/progress-demo.json
new file mode 100644
index 00000000000..4ec56fd17c4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/progress-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "progress"
+  ],
+  "files": [
+    {
+      "path": "examples/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/new-york/ui/progress\"\n\nexport default function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/progress.json b/apps/www/public/r/styles/new-york/progress.json
index 6aa08a74b8a..cf128f72320 100644
--- a/apps/www/public/r/styles/new-york/progress.json
+++ b/apps/www/public/r/styles/new-york/progress.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "progress",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-progress"
   ],
diff --git a/apps/www/public/r/styles/new-york/radio-group-demo.json b/apps/www/public/r/styles/new-york/radio-group-demo.json
new file mode 100644
index 00000000000..2790d94f05b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/radio-group-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/new-york/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/radio-group-form.json b/apps/www/public/r/styles/new-york/radio-group-form.json
new file mode 100644
index 00000000000..980a6b01d71
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/radio-group-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "radio-group",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/radio-group-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/new-york/ui/radio-group\"\n\nconst FormSchema = z.object({\n  type: z.enum([\"all\", \"mentions\", \"none\"], {\n    required_error: \"You need to select a notification type.\",\n  }),\n})\n\nexport default function RadioGroupForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"type\"\n          render={({ field }) => (\n            <FormItem className=\"space-y-3\">\n              <FormLabel>Notify me about...</FormLabel>\n              <FormControl>\n                <RadioGroup\n                  onValueChange={field.onChange}\n                  defaultValue={field.value}\n                  className=\"flex flex-col space-y-1\"\n                >\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"all\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      All new messages\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"mentions\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      Direct messages and mentions\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center space-x-3 space-y-0\">\n                    <FormControl>\n                      <RadioGroupItem value=\"none\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">Nothing</FormLabel>\n                  </FormItem>\n                </RadioGroup>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/radio-group.json b/apps/www/public/r/styles/new-york/radio-group.json
index ae7c0c4bd50..329ad552700 100644
--- a/apps/www/public/r/styles/new-york/radio-group.json
+++ b/apps/www/public/r/styles/new-york/radio-group.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "radio-group",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-radio-group"
   ],
   "files": [
     {
       "path": "ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"grid gap-2\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n        <CheckIcon className=\"h-3.5 w-3.5 fill-primary\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"grid gap-2\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n        <Circle className=\"h-3.5 w-3.5 fill-primary\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/registry.json b/apps/www/public/r/styles/new-york/registry.json
new file mode 100644
index 00000000000..6272dddbece
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/registry.json
@@ -0,0 +1,6942 @@
+{
+  "name": "shadcn/ui",
+  "homepage": "https://ui.shadcn.com",
+  "items": [
+    {
+      "name": "index",
+      "type": "registry:style",
+      "dependencies": [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "utils"
+      ],
+      "files": [],
+      "tailwind": {
+        "config": {
+          "plugins": [
+            "require(\"tailwindcss-animate\")"
+          ]
+        }
+      },
+      "cssVars": {}
+    },
+    {
+      "name": "style",
+      "type": "registry:style",
+      "dependencies": [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "utils"
+      ],
+      "files": [],
+      "tailwind": {
+        "config": {
+          "plugins": [
+            "require(\"tailwindcss-animate\")"
+          ]
+        }
+      },
+      "cssVars": {}
+    },
+    {
+      "name": "accordion",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-accordion"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/accordion.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "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"
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "alert",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/alert.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-alert-dialog"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/alert-dialog.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-aspect-ratio"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/aspect-ratio.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "avatar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/avatar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/badge.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/breadcrumb.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/button.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar",
+      "type": "registry:ui",
+      "dependencies": [
+        "react-day-picker@latest",
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/calendar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/card.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel",
+      "type": "registry:ui",
+      "dependencies": [
+        "embla-carousel-react"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/carousel.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart",
+      "type": "registry:ui",
+      "dependencies": [
+        "recharts@2.15.4",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/chart.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/checkbox.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "collapsible",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/collapsible.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command",
+      "type": "registry:ui",
+      "dependencies": [
+        "cmdk"
+      ],
+      "registryDependencies": [
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/command.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "context-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-context-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/context-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/dialog.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer",
+      "type": "registry:ui",
+      "dependencies": [
+        "vaul",
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/drawer.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/dropdown-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "form",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label",
+        "@radix-ui/react-slot",
+        "@hookform/resolvers",
+        "zod",
+        "react-hook-form"
+      ],
+      "registryDependencies": [
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/form.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "hover-card",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-hover-card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/hover-card.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/input.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp",
+      "type": "registry:ui",
+      "dependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/input-otp.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/label.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "menubar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-menubar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/menubar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-navigation-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/navigation-menu.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "pagination",
+      "type": "registry:ui",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/pagination.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "popover",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/popover.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-progress"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/progress.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/radio-group.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable",
+      "type": "registry:ui",
+      "dependencies": [
+        "react-resizable-panels"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/resizable.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/scroll-area.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/select.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "separator",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/separator.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/sheet.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slot",
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "separator",
+        "sheet",
+        "tooltip",
+        "input",
+        "use-mobile",
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/sidebar.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "colors": {
+                "sidebar": {
+                  "DEFAULT": "hsl(var(--sidebar-background))",
+                  "foreground": "hsl(var(--sidebar-foreground))",
+                  "primary": "hsl(var(--sidebar-primary))",
+                  "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                  "accent": "hsl(var(--sidebar-accent))",
+                  "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                  "border": "hsl(var(--sidebar-border))",
+                  "ring": "hsl(var(--sidebar-ring))"
+                }
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "sidebar-background": "0 0% 98%",
+          "sidebar-foreground": "240 5.3% 26.1%",
+          "sidebar-primary": "240 5.9% 10%",
+          "sidebar-primary-foreground": "0 0% 98%",
+          "sidebar-accent": "240 4.8% 95.9%",
+          "sidebar-accent-foreground": "240 5.9% 10%",
+          "sidebar-border": "220 13% 91%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        },
+        "dark": {
+          "sidebar-background": "240 5.9% 10%",
+          "sidebar-foreground": "240 4.8% 95.9%",
+          "sidebar-primary": "224.3 76.3% 48%",
+          "sidebar-primary-foreground": "0 0% 100%",
+          "sidebar-accent": "240 3.7% 15.9%",
+          "sidebar-accent-foreground": "240 4.8% 95.9%",
+          "sidebar-border": "240 3.7% 15.9%",
+          "sidebar-ring": "217.2 91.2% 59.8%"
+        }
+      }
+    },
+    {
+      "name": "skeleton",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/skeleton.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "slider",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-slider"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/slider.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sonner",
+      "type": "registry:ui",
+      "dependencies": [
+        "sonner",
+        "next-themes"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/sonner.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/switch.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "table",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/table.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tabs",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/tabs.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "registry/new-york/ui/textarea.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toast"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/toast.tsx",
+          "type": "registry:ui",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/hooks/use-toast.ts",
+          "type": "registry:hook",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/ui/toaster.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/toggle.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-toggle-group"
+      ],
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/toggle-group.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tooltip",
+      "type": "registry:ui",
+      "dependencies": [
+        "@radix-ui/react-tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/ui/tooltip.tsx",
+          "type": "registry:ui",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dashboard-01",
+      "type": "registry:block",
+      "description": "A dashboard with sidebar, charts and data table.",
+      "dependencies": [
+        "@dnd-kit/core",
+        "@dnd-kit/modifiers",
+        "@dnd-kit/sortable",
+        "@dnd-kit/utilities",
+        "@tanstack/react-table",
+        "zod"
+      ],
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "chart",
+        "card",
+        "select",
+        "tabs",
+        "table",
+        "toggle-group",
+        "badge",
+        "button",
+        "checkbox",
+        "dropdown-menu",
+        "drawer",
+        "input",
+        "avatar",
+        "sheet",
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/dashboard-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/data.json",
+          "type": "registry:file",
+          "target": "app/dashboard/data.json"
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/chart-area-interactive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/data-table.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/nav-documents.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/section-cards.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/dashboard-01/components/site-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-01",
+      "type": "registry:block",
+      "description": "A simple sidebar with navigation grouped by section.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-01/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-01/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-01/components/version-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-02",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible sections.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-02/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-02/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-02/components/version-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-03",
+      "type": "registry:block",
+      "description": "A sidebar with submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-03/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-04",
+      "type": "registry:block",
+      "description": "A floating sidebar with submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-04/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-05",
+      "type": "registry:block",
+      "description": "A sidebar with collapsible submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-05/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-05/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-06",
+      "type": "registry:block",
+      "description": "A sidebar with submenus as dropdowns.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-06/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-06/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-06/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-07",
+      "type": "registry:block",
+      "description": "A sidebar that collapses to icons.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-07/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-07/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-07/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-07/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-07/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-07/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-08",
+      "type": "registry:block",
+      "description": "An inset sidebar with secondary navigation.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-08/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-08/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-08/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-08/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-08/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-08/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-09",
+      "type": "registry:block",
+      "description": "Collapsible nested sidebars.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-09/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-09/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-09/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-10",
+      "type": "registry:block",
+      "description": "A sidebar in a popover.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-10/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/nav-actions.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/nav-favorites.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/nav-workspaces.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-10/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-11",
+      "type": "registry:block",
+      "description": "A sidebar with a collapsible file tree.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-11/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-11/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-12",
+      "type": "registry:block",
+      "description": "A sidebar with a calendar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-12/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-12/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-12/components/calendars.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-12/components/date-picker.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-12/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-13",
+      "type": "registry:block",
+      "description": "A sidebar in a dialog.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "button",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-13/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-13/components/settings-dialog.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-14",
+      "type": "registry:block",
+      "description": "A sidebar on the right.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-14/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-14/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-15",
+      "type": "registry:block",
+      "description": "A left and right sidebar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-15/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/calendars.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/date-picker.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/nav-favorites.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/nav-workspaces.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/sidebar-left.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/sidebar-right.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-15/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "sidebar-16",
+      "type": "registry:block",
+      "description": "A sidebar with a sticky site header.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/sidebar-16/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/nav-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/search-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/blocks/sidebar-16/components/site-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "sidebar",
+        "dashboard"
+      ]
+    },
+    {
+      "name": "login-01",
+      "type": "registry:block",
+      "description": "A simple login form.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/login-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/login-01/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-02",
+      "type": "registry:block",
+      "description": "A two column login page with a cover image.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/login-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/login-02/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-03",
+      "type": "registry:block",
+      "description": "A login page with a muted background color.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/login-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/login-03/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-04",
+      "type": "registry:block",
+      "description": "A login page with form and image.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/login-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/login-04/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "login-05",
+      "type": "registry:block",
+      "description": "A simple email-only login page.",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/login-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/new-york/blocks/login-05/components/login-form.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "authentication",
+        "login"
+      ]
+    },
+    {
+      "name": "calendar-01",
+      "type": "registry:block",
+      "description": "A simple calendar.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-01.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-02",
+      "type": "registry:block",
+      "description": "Multiple months with single selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-02.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-03",
+      "type": "registry:block",
+      "description": "Multiple months with multiple selection.",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-03.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-04",
+      "type": "registry:block",
+      "description": "Single month with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-04.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-05",
+      "type": "registry:block",
+      "description": "Multiple months with range selection",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-05.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-06",
+      "type": "registry:block",
+      "description": "Range selection with minimum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-06.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-07",
+      "type": "registry:block",
+      "description": "Range selection with minimum and maximum days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-07.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-08",
+      "type": "registry:block",
+      "description": "Calendar with disabled days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-08.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-09",
+      "type": "registry:block",
+      "description": "Calendar with disabled weekends",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-09.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-10",
+      "type": "registry:block",
+      "description": "Today button",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-10.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-11",
+      "type": "registry:block",
+      "description": "Start and end of month",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-11.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-12",
+      "type": "registry:block",
+      "description": "Localized calendar",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-12.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-13",
+      "type": "registry:block",
+      "description": "With Month and Year Dropdown",
+      "registryDependencies": [
+        "calendar",
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-13.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-14",
+      "type": "registry:block",
+      "description": "With Booked/Unavailable Days",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-14.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-15",
+      "type": "registry:block",
+      "description": "With Week Numbers",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-15.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-16",
+      "type": "registry:block",
+      "description": "With time picker",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-16.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-17",
+      "type": "registry:block",
+      "description": "With time picker inline",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-17.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-18",
+      "type": "registry:block",
+      "description": "Variable size",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-18.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-19",
+      "type": "registry:block",
+      "description": "With presets",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-19.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-20",
+      "type": "registry:block",
+      "description": "With time presets",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-20.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-21",
+      "type": "registry:block",
+      "description": "Custom days and formatters",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-21.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-22",
+      "type": "registry:block",
+      "description": "Date picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-22.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-23",
+      "type": "registry:block",
+      "description": "Date range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-23.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-24",
+      "type": "registry:block",
+      "description": "Date and Time picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-24.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-25",
+      "type": "registry:block",
+      "description": "Date and Time range picker",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-25.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-26",
+      "type": "registry:block",
+      "description": "Date range picker with time",
+      "registryDependencies": [
+        "calendar",
+        "popover",
+        "button",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-26.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-27",
+      "type": "registry:block",
+      "description": "Chart filter",
+      "registryDependencies": [
+        "calendar",
+        "chart",
+        "card",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-27.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-28",
+      "type": "registry:block",
+      "description": "Input with date picker",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-28.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-29",
+      "type": "registry:block",
+      "description": "Natural language date picker",
+      "dependencies": [
+        "chrono-node"
+      ],
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-29.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-30",
+      "type": "registry:block",
+      "description": "With little-date",
+      "registryDependencies": [
+        "calendar",
+        "input",
+        "label",
+        "popover",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-30.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-31",
+      "type": "registry:block",
+      "description": "With event slots",
+      "registryDependencies": [
+        "calendar",
+        "card",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-31.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "700px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "calendar-32",
+      "type": "registry:block",
+      "description": "Date picker in a drawer",
+      "registryDependencies": [
+        "calendar",
+        "button",
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/calendar-32.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "meta": {
+        "iframeHeight": "600px",
+        "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+        "mobile": "component"
+      },
+      "categories": [
+        "calendar",
+        "date"
+      ]
+    },
+    {
+      "name": "chart-area-axes",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-axes.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-gradient",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-gradient.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-interactive.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-linear",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-linear.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-stacked-expand",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-stacked-expand.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-area-step",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-area-step.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-area"
+      ]
+    },
+    {
+      "name": "chart-bar-active",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-active.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-horizontal",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-horizontal.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-mixed",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-mixed.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-negative",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-negative.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-bar-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-bar-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-bar"
+      ]
+    },
+    {
+      "name": "chart-line-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots-colors",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-dots-colors.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-dots-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-dots",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-dots.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-linear",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-linear.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-line-step",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-line-step.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-line"
+      ]
+    },
+    {
+      "name": "chart-pie-donut-active",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-donut-active.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-donut-text",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-donut-text.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-donut",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-donut.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-interactive",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-interactive.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label-list",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-label-list.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-separator-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-separator-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-simple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-simple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-pie-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-pie-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-pie"
+      ]
+    },
+    {
+      "name": "chart-radar-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-dots",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-dots.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle-fill",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-circle-fill.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle-no-lines",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-circle-no-lines.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-circle",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-circle.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-fill",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-fill.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-grid-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-grid-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-legend",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-legend.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-lines-only",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-lines-only.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-multiple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-multiple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radar-radius",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radar-radius.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radar"
+      ]
+    },
+    {
+      "name": "chart-radial-grid",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-grid.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-label",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-label.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-shape",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-shape.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-simple",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-simple.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-stacked",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-stacked.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-radial-text",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-radial-text.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-radial"
+      ]
+    },
+    {
+      "name": "chart-tooltip-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-default.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-indicator-line",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-indicator-line.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-indicator-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-indicator-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-none",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-label-none.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-custom",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-label-custom.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-label-formatter",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-label-formatter.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-formatter",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-formatter.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-icons",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-icons.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "chart-tooltip-advanced",
+      "type": "registry:block",
+      "registryDependencies": [
+        "card",
+        "chart"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/charts/chart-tooltip-advanced.tsx",
+          "type": "registry:block",
+          "target": ""
+        }
+      ],
+      "categories": [
+        "charts",
+        "charts-tooltip"
+      ]
+    },
+    {
+      "name": "utils",
+      "type": "registry:lib",
+      "dependencies": [
+        "clsx",
+        "tailwind-merge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/lib/utils.ts",
+          "type": "registry:lib",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "use-mobile",
+      "type": "registry:hook",
+      "files": [
+        {
+          "path": "registry/new-york/hooks/use-mobile.tsx",
+          "type": "registry:hook",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "use-toast",
+      "type": "registry:hook",
+      "files": [
+        {
+          "path": "registry/new-york/hooks/use-toast.ts",
+          "type": "registry:hook",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "theme-daylight",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "36 39% 88%",
+          "foreground": "36 45% 15%",
+          "primary": "36 45% 70%",
+          "primary-foreground": "36 45% 11%",
+          "secondary": "40 35% 77%",
+          "secondary-foreground": "36 45% 25%",
+          "accent": "36 64% 57%",
+          "accent-foreground": "36 72% 17%",
+          "destructive": "0 84% 37%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "36 33% 75%",
+          "muted-foreground": "36 45% 25%",
+          "card": "36 46% 82%",
+          "card-foreground": "36 45% 20%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "border": "36 45% 60%",
+          "input": "36 45% 60%",
+          "ring": "36 45% 30%",
+          "chart-1": "25 34% 28%",
+          "chart-2": "26 36% 34%",
+          "chart-3": "28 40% 40%",
+          "chart-4": "31 41% 48%",
+          "chart-5": "35 43% 53%"
+        },
+        "dark": {
+          "background": "36 39% 88%",
+          "foreground": "36 45% 15%",
+          "primary": "36 45% 70%",
+          "primary-foreground": "36 45% 11%",
+          "secondary": "40 35% 77%",
+          "secondary-foreground": "36 45% 25%",
+          "accent": "36 64% 57%",
+          "accent-foreground": "36 72% 17%",
+          "destructive": "0 84% 37%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "36 33% 75%",
+          "muted-foreground": "36 45% 25%",
+          "card": "36 46% 82%",
+          "card-foreground": "36 45% 20%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "border": "36 45% 60%",
+          "input": "36 45% 60%",
+          "ring": "36 45% 30%",
+          "chart-1": "25 34% 28%",
+          "chart-2": "26 36% 34%",
+          "chart-3": "28 40% 40%",
+          "chart-4": "31 41% 48%",
+          "chart-5": "35 43% 53%"
+        }
+      }
+    },
+    {
+      "name": "theme-midnight",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "240 5% 6%",
+          "foreground": "60 5% 90%",
+          "primary": "240 0% 90%",
+          "primary-foreground": "60 0% 0%",
+          "secondary": "240 4% 15%",
+          "secondary-foreground": "60 5% 85%",
+          "accent": "240 0% 13%",
+          "accent-foreground": "60 0% 100%",
+          "destructive": "0 60% 50%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "240 5% 25%",
+          "muted-foreground": "60 5% 85%",
+          "card": "240 4% 10%",
+          "card-foreground": "60 5% 90%",
+          "popover": "240 5% 15%",
+          "popover-foreground": "60 5% 85%",
+          "border": "240 6% 20%",
+          "input": "240 6% 20%",
+          "ring": "240 5% 90%",
+          "chart-1": "359 2% 90%",
+          "chart-2": "240 1% 74%",
+          "chart-3": "240 1% 58%",
+          "chart-4": "240 1% 42%",
+          "chart-5": "240 2% 26%"
+        },
+        "dark": {
+          "background": "240 5% 6%",
+          "foreground": "60 5% 90%",
+          "primary": "240 0% 90%",
+          "primary-foreground": "60 0% 0%",
+          "secondary": "240 4% 15%",
+          "secondary-foreground": "60 5% 85%",
+          "accent": "240 0% 13%",
+          "accent-foreground": "60 0% 100%",
+          "destructive": "0 60% 50%",
+          "destructive-foreground": "0 0% 98%",
+          "muted": "240 5% 25%",
+          "muted-foreground": "60 5% 85%",
+          "card": "240 4% 10%",
+          "card-foreground": "60 5% 90%",
+          "popover": "240 5% 15%",
+          "popover-foreground": "60 5% 85%",
+          "border": "240 6% 20%",
+          "input": "240 6% 20%",
+          "ring": "240 5% 90%",
+          "chart-1": "359 2% 90%",
+          "chart-2": "240 1% 74%",
+          "chart-3": "240 1% 58%",
+          "chart-4": "240 1% 42%",
+          "chart-5": "240 2% 26%"
+        }
+      }
+    },
+    {
+      "name": "theme-emerald",
+      "type": "registry:theme",
+      "cssVars": {
+        "light": {
+          "background": "0 0% 100%",
+          "foreground": "240 10% 3.9%",
+          "card": "0 0% 100%",
+          "card-foreground": "240 10% 3.9%",
+          "popover": "0 0% 100%",
+          "popover-foreground": "240 10% 3.9%",
+          "primary": "142 86% 28%",
+          "primary-foreground": "356 29% 98%",
+          "secondary": "240 4.8% 95.9%",
+          "secondary-foreground": "240 5.9% 10%",
+          "muted": "240 4.8% 95.9%",
+          "muted-foreground": "240 3.8% 45%",
+          "accent": "240 4.8% 95.9%",
+          "accent-foreground": "240 5.9% 10%",
+          "destructive": "0 72% 51%",
+          "destructive-foreground": "0 0% 98%",
+          "border": "240 5.9% 90%",
+          "input": "240 5.9% 90%",
+          "ring": "142 86% 28%",
+          "chart-1": "139 65% 20%",
+          "chart-2": "140 74% 44%",
+          "chart-3": "142 88% 28%",
+          "chart-4": "137 55% 15%",
+          "chart-5": "141 40% 9%"
+        },
+        "dark": {
+          "background": "240 10% 3.9%",
+          "foreground": "0 0% 98%",
+          "card": "240 10% 3.9%",
+          "card-foreground": "0 0% 98%",
+          "popover": "240 10% 3.9%",
+          "popover-foreground": "0 0% 98%",
+          "primary": "142 86% 28%",
+          "primary-foreground": "356 29% 98%",
+          "secondary": "240 4.8% 95.9%",
+          "secondary-foreground": "240 5.9% 10%",
+          "muted": "240 3.7% 15.9%",
+          "muted-foreground": "240 5% 64.9%",
+          "accent": "240 3.7% 15.9%",
+          "accent-foreground": "0 0% 98%",
+          "destructive": "0 72% 51%",
+          "destructive-foreground": "0 0% 98%",
+          "border": "240 3.7% 15.9%",
+          "input": "240 3.7% 15.9%",
+          "ring": "142 86% 28%",
+          "chart-1": "142 88% 28%",
+          "chart-2": "139 65% 20%",
+          "chart-3": "140 74% 24%",
+          "chart-4": "137 55% 15%",
+          "chart-5": "141 40% 9%"
+        }
+      }
+    },
+    {
+      "name": "sink",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "accordion",
+        "alert",
+        "alert-dialog",
+        "aspect-ratio",
+        "avatar",
+        "badge",
+        "breadcrumb",
+        "button",
+        "calendar",
+        "card",
+        "carousel",
+        "chart",
+        "checkbox",
+        "collapsible",
+        "command",
+        "context-menu",
+        "dialog",
+        "drawer",
+        "dropdown-menu",
+        "hover-card",
+        "input",
+        "input-otp",
+        "label",
+        "menubar",
+        "navigation-menu",
+        "pagination",
+        "popover",
+        "progress",
+        "radio-group",
+        "resizable",
+        "scroll-area",
+        "select",
+        "separator",
+        "sheet",
+        "sidebar",
+        "skeleton",
+        "slider",
+        "sonner",
+        "switch",
+        "table",
+        "tabs",
+        "textarea",
+        "toast",
+        "toggle",
+        "toggle-group",
+        "tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sink/page.tsx",
+          "type": "registry:page",
+          "target": "app/sink/page.tsx"
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/app-sidebar.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/component-wrapper.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/nav-main.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/nav-projects.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/nav-user.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/team-switcher.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/accordion-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/alert-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/alert-dialog-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/aspect-ratio-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/avatar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/badge-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/breadcrumb-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/calendar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/card-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/carousel-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/checkbox-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/collapsible-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/combobox-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/command-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/context-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/date-picker-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/dialog-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/drawer-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/dropdown-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/hover-card-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/input-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/input-otp-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/label-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/menubar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/navigation-menu-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/pagination-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/popover-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/progress-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/radio-group-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/resizable-handle.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/scroll-area-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/select-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/separator-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/sheet-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/skeleton-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/slider-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/sonner-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/switch-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/table-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/tabs-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/textarea-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toast-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toggle-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toggle-group-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/tooltip-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/badge-destructive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/badge-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/badge-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-destructive.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-ghost.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-link.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-loading.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-secondary.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/button-with-icon.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toggle-disabled.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toggle-outline.tsx",
+          "type": "registry:component",
+          "target": ""
+        },
+        {
+          "path": "registry/new-york/internal/sink/components/toggle-with-text.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-demo",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-demo.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-header",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-header.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-footer",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-footer.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-group.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-group-collapsible.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-group-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-group-action.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-menu.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-action",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-menu-action.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-sub",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-menu-sub.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-collapsible",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-menu-collapsible.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-menu-badge",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-menu-badge.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-rsc",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-rsc.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sidebar-controlled",
+      "type": "registry:internal",
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-controlled.tsx",
+          "type": "registry:component",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-01",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-01.tsx",
+          "type": "registry:component",
+          "target": "components/sidebar-01.tsx"
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-02",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-02.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-03",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-03.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-04",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-04.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-05",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-05.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-06",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-06.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-07",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-07.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-08",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-08.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-09",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-09.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-10",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-10.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-11",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-11.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-12",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-12.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-13",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "button",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-13.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-14",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-14.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-sidebar-15",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/sidebar-15.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "v0-login-01",
+      "type": "registry:internal",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/internal/login-01.tsx",
+          "type": "registry:internal",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "accordion-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "accordion"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/accordion-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/alert-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/alert-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "alert-dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "alert-dialog",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/alert-dialog-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "aspect-ratio-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "aspect-ratio"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/aspect-ratio-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "avatar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/avatar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/badge-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/badge-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/badge-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "badge-secondary",
+      "type": "registry:example",
+      "registryDependencies": [
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/badge-secondary.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-separator",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-separator.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-dropdown",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-dropdown.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-ellipsis",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-ellipsis.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-link",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-link.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "breadcrumb-responsive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "breadcrumb"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/breadcrumb-responsive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-secondary",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-secondary.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-ghost",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-ghost.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-link",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-link.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-with-icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-with-icon.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-loading",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-loading.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-icon.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "button-as-child",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/button-as-child.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "calendar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/calendar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "calendar-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "calendar",
+        "form",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/calendar-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "card",
+        "button",
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/card-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "card-with-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/card-with-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-size",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-size.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-spacing",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-spacing.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-orientation",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-orientation.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-api",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-api.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "carousel-plugin",
+      "type": "registry:example",
+      "registryDependencies": [
+        "carousel"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/carousel-plugin.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/checkbox-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/checkbox-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-multiple",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/checkbox-form-multiple.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-form-single",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/checkbox-form-single.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "checkbox-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/checkbox-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "collapsible-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/collapsible-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/combobox-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-dropdown-menu",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "dropdown-menu",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/combobox-dropdown-menu.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/combobox-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-popover",
+      "type": "registry:example",
+      "registryDependencies": [
+        "combobox",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/combobox-popover.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "combobox-responsive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "combobox",
+        "popover",
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/combobox-responsive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/command-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "command-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "command",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/command-dialog.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "context-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "context-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/context-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "data-table-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "data-table"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/data-table-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-demo",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/date-picker-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-form",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "form",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/date-picker-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-presets",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/date-picker-with-presets.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "date-picker-with-range",
+      "type": "registry:example",
+      "dependencies": [
+        "date-fns"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/date-picker-with-range.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/dialog-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dialog-close-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dialog",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/dialog-close-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "drawer"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/drawer-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "drawer-dialog",
+      "type": "registry:example",
+      "registryDependencies": [
+        "drawer",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/drawer-dialog.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/dropdown-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-checkboxes",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "checkbox"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/dropdown-menu-checkboxes.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu-radio-group",
+      "type": "registry:example",
+      "registryDependencies": [
+        "dropdown-menu",
+        "radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/dropdown-menu-radio-group.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "hover-card-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "hover-card"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/hover-card-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-file",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-file.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-with-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-label",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-with-label.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-otp-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-pattern",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-otp-pattern.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-separator",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-otp-separator.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-controlled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-otp-controlled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "input-otp-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "input-otp",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/input-otp-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "label-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/label-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "menubar-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "menubar"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/menubar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "navigation-menu-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "navigation-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/navigation-menu-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "pagination-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "pagination"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/pagination-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "popover-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "popover"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/popover-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "progress-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "progress"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/progress-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "radio-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/radio-group-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "radio-group-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "radio-group",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/radio-group-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/resizable-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-demo-with-handle",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/resizable-demo-with-handle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-vertical",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/resizable-vertical.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "resizable-handle",
+      "type": "registry:example",
+      "registryDependencies": [
+        "resizable"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/resizable-handle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/scroll-area-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "scroll-area-horizontal-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/scroll-area-horizontal-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/select-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-scrollable",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/select-scrollable.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "select-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "select"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/select-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "separator-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "separator"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/separator-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sheet"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/sheet-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sheet-side",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sheet"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/sheet-side.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "skeleton-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/skeleton-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "skeleton-card",
+      "type": "registry:example",
+      "registryDependencies": [
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/skeleton-card.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "slider-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "slider"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/slider-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "sonner-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/sonner-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "switch"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/switch-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "switch-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "switch",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/switch-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "table-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "table"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/table-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tabs-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/tabs-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-form",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "form"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-form.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-button",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-with-button.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-label",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-with-label.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "textarea-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "textarea",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/textarea-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toast"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toast-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-destructive",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toast"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toast-destructive.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-simple",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toast"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toast-simple.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-with-action",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toast"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toast-with-action.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toast-with-title",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toast"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toast-with-title.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-lg",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-lg.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-sm",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-sm.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-single",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-group-single.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-disabled",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-disabled.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-lg",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-lg.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-outline",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-outline.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-sm",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-sm.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "toggle-with-text",
+      "type": "registry:example",
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/toggle-with-text.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "tooltip-demo",
+      "type": "registry:example",
+      "registryDependencies": [
+        "tooltip"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/examples/tooltip-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-blockquote",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-blockquote.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h1",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-h1.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h2",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-h2.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h3",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-h3.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-h4",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-h4.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-inline-code",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-inline-code.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-large",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-large.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-lead",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-lead.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-list",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-list.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-muted",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-muted.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-p",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-p.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-small",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-small.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "typography-table",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/typography-table.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "mode-toggle",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/mode-toggle.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-bar-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-grid",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-bar-demo-grid.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-axis",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-bar-demo-axis.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-tooltip",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-bar-demo-tooltip.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-bar-demo-legend",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-bar-demo-legend.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    },
+    {
+      "name": "chart-tooltip-demo",
+      "type": "registry:example",
+      "files": [
+        {
+          "path": "registry/new-york/examples/chart-tooltip-demo.tsx",
+          "type": "registry:example",
+          "target": ""
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/resizable-demo-with-handle.json b/apps/www/public/r/styles/new-york/resizable-demo-with-handle.json
new file mode 100644
index 00000000000..cd173919889
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/resizable-demo-with-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo-with-handle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo-with-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle withHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/resizable-demo.json b/apps/www/public/r/styles/new-york/resizable-demo.json
new file mode 100644
index 00000000000..2b0ae3c7fcd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/resizable-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-demo.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/resizable-handle.json b/apps/www/public/r/styles/new-york/resizable-handle.json
new file mode 100644
index 00000000000..92995edd87e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/resizable-handle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-handle",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport default function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/resizable-vertical.json b/apps/www/public/r/styles/new-york/resizable-vertical.json
new file mode 100644
index 00000000000..7cb4dc8b8fd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/resizable-vertical.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-vertical",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "examples/resizable-vertical.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"vertical\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Header</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/resizable.json b/apps/www/public/r/styles/new-york/resizable.json
index fa20e695437..31be59446fd 100644
--- a/apps/www/public/r/styles/new-york/resizable.json
+++ b/apps/www/public/r/styles/new-york/resizable.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "resizable",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "react-resizable-panels"
   ],
   "files": [
     {
       "path": "ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport { DragHandleDots2Icon } from \"@radix-ui/react-icons\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/scroll-area-demo.json b/apps/www/public/r/styles/new-york/scroll-area-demo.json
new file mode 100644
index 00000000000..1c04dc6d54b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/scroll-area-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/new-york/ui/scroll-area\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport default function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {tags.map((tag) => (\n          <>\n            <div key={tag} className=\"text-sm\">\n              {tag}\n            </div>\n            <Separator className=\"my-2\" />\n          </>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/scroll-area-horizontal-demo.json b/apps/www/public/r/styles/new-york/scroll-area-horizontal-demo.json
new file mode 100644
index 00000000000..afd14b32dc6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/scroll-area-horizontal-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-horizontal-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "examples/scroll-area-horizontal-demo.tsx",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { ScrollArea, ScrollBar } from \"@/registry/new-york/ui/scroll-area\"\n\nexport interface Artwork {\n  artist: string\n  art: string\n}\n\nexport const works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n  return (\n    <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n      <div className=\"flex w-max space-x-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <Image\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n              Photo by{\" \"}\n              <span className=\"font-semibold text-foreground\">\n                {artwork.artist}\n              </span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/scroll-area.json b/apps/www/public/r/styles/new-york/scroll-area.json
index 7b82ec79c85..204354cf430 100644
--- a/apps/www/public/r/styles/new-york/scroll-area.json
+++ b/apps/www/public/r/styles/new-york/scroll-area.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "scroll-area",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-scroll-area"
   ],
diff --git a/apps/www/public/r/styles/new-york/select-demo.json b/apps/www/public/r/styles/new-york/select-demo.json
new file mode 100644
index 00000000000..ca05559722c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/select-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/select-form.json b/apps/www/public/r/styles/new-york/select-form.json
new file mode 100644
index 00000000000..2cd053a4ec9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/select-form.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-form.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nconst FormSchema = z.object({\n  email: z\n    .string({\n      required_error: \"Please select an email to display.\",\n    })\n    .email(),\n})\n\nexport default function SelectForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <FormControl>\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a verified email to display\" />\n                  </SelectTrigger>\n                </FormControl>\n                <SelectContent>\n                  <SelectItem value=\"m@example.com\">m@example.com</SelectItem>\n                  <SelectItem value=\"m@google.com\">m@google.com</SelectItem>\n                  <SelectItem value=\"m@support.com\">m@support.com</SelectItem>\n                </SelectContent>\n              </Select>\n              <FormDescription>\n                You can manage email addresses in your{\" \"}\n                <Link href=\"/examples/forms\">email settings</Link>.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/select-scrollable.json b/apps/www/public/r/styles/new-york/select-scrollable.json
new file mode 100644
index 00000000000..5eb0fff7e97
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/select-scrollable.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-scrollable",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "examples/select-scrollable.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function SelectScrollable() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[280px]\">\n        <SelectValue placeholder=\"Select a timezone\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>North America</SelectLabel>\n          <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n          <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n          <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n          <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n          <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n          <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Europe & Africa</SelectLabel>\n          <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n          <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n          <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n          <SelectItem value=\"west\">\n            Western European Summer Time (WEST)\n          </SelectItem>\n          <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n          <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Asia</SelectLabel>\n          <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n          <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n          <SelectItem value=\"cst_china\">China Standard Time (CST)</SelectItem>\n          <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n          <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n          <SelectItem value=\"ist_indonesia\">\n            Indonesia Central Standard Time (WITA)\n          </SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Australia & Pacific</SelectLabel>\n          <SelectItem value=\"awst\">\n            Australian Western Standard Time (AWST)\n          </SelectItem>\n          <SelectItem value=\"acst\">\n            Australian Central Standard Time (ACST)\n          </SelectItem>\n          <SelectItem value=\"aest\">\n            Australian Eastern Standard Time (AEST)\n          </SelectItem>\n          <SelectItem value=\"nzst\">New Zealand Standard Time (NZST)</SelectItem>\n          <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>South America</SelectLabel>\n          <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n          <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n          <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n          <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/select.json b/apps/www/public/r/styles/new-york/select.json
index e998fc1a64a..24aabc92058 100644
--- a/apps/www/public/r/styles/new-york/select.json
+++ b/apps/www/public/r/styles/new-york/select.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "select",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-select"
   ],
   "files": [
     {
       "path": "ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  CaretSortIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n} from \"@radix-ui/react-icons\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <CaretSortIcon className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronUpIcon />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronDownIcon />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronUp className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronDown className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/separator-demo.json b/apps/www/public/r/styles/new-york/separator-demo.json
new file mode 100644
index 00000000000..a47307ada4b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/separator-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "examples/separator-demo.tsx",
+      "content": "import { Separator } from \"@/registry/new-york/ui/separator\"\n\nexport default function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/separator.json b/apps/www/public/r/styles/new-york/separator.json
index 1372f3ac09d..e3ae2c55692 100644
--- a/apps/www/public/r/styles/new-york/separator.json
+++ b/apps/www/public/r/styles/new-york/separator.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "separator",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-separator"
   ],
diff --git a/apps/www/public/r/styles/new-york/sheet-demo.json b/apps/www/public/r/styles/new-york/sheet-demo.json
new file mode 100644
index 00000000000..8b487305be7
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sheet-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "examples/sheet-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/ui/sheet\"\n\nexport default function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sheet-side.json b/apps/www/public/r/styles/new-york/sheet-side.json
new file mode 100644
index 00000000000..228df22713f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sheet-side.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-side",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "examples/sheet-side.tsx",
+      "content": "\"use client\"\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\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger asChild>\n            <Button variant=\"outline\">{side}</Button>\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you're done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose asChild>\n                <Button type=\"submit\">Save changes</Button>\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sheet.json b/apps/www/public/r/styles/new-york/sheet.json
index 39a262ba76b..ccfdba7ab2b 100644
--- a/apps/www/public/r/styles/new-york/sheet.json
+++ b/apps/www/public/r/styles/new-york/sheet.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "sheet",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n        <Cross2Icon className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n      {children}\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n      {children}\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/sidebar-01-dark.png b/apps/www/public/r/styles/new-york/sidebar-01-dark.png
new file mode 100644
index 00000000000..7b7cf8fa24c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-01-light.png b/apps/www/public/r/styles/new-york/sidebar-01-light.png
new file mode 100644
index 00000000000..d59e52ad973
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-01.json b/apps/www/public/r/styles/new-york/sidebar-01.json
index 3df756418e1..41242b93c49 100644
--- a/apps/www/public/r/styles/new-york/sidebar-01.json
+++ b/apps/www/public/r/styles/new-york/sidebar-01.json
@@ -1,72 +1,44 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "sidebar-01",
   "type": "registry:block",
-  "description": "A collapsible sidebar with workspace switcher, main navigation, secondary navigation, project navigation, and user navigation.",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A simple sidebar with navigation grouped by section.",
   "registryDependencies": [
-    "avatar",
-    "button",
-    "collapsible",
-    "dropdown-menu",
-    "drawer",
+    "sidebar",
+    "breadcrumb",
     "separator",
-    "input",
-    "popover",
-    "sheet",
-    "progress",
-    "card",
-    "use-mobile"
+    "label",
+    "dropdown-menu"
   ],
   "files": [
     {
-      "path": "block/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-01/components/app-sidebar\"\nimport {\n  SidebarLayout,\n  SidebarTrigger,\n} from \"@/registry/new-york/block/sidebar-01/ui/sidebar\"\n\nexport default async function Page() {\n  const { cookies } = await import(\"next/headers\")\n  return (\n    <SidebarLayout\n      defaultOpen={cookies().get(\"sidebar:state\")?.value === \"true\"}\n    >\n      <AppSidebar />\n      <main className=\"flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out\">\n        <div className=\"h-full rounded-md border-2 border-dashed p-2\">\n          <SidebarTrigger />\n        </div>\n      </main>\n    </SidebarLayout>\n  )\n}\n",
+      "path": "blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
-      "path": "block/sidebar-01/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport {\n  Atom,\n  Bird,\n  BookOpen,\n  Bot,\n  Code2,\n  Eclipse,\n  Frame,\n  History,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Rabbit,\n  Send,\n  Settings2,\n  SquareTerminal,\n  Star,\n  Turtle,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/block/sidebar-01/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/block/sidebar-01/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york/block/sidebar-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/block/sidebar-01/components/nav-user\"\nimport { StorageCard } from \"@/registry/new-york/block/sidebar-01/components/storage-card\"\nimport { TeamSwitcher } from \"@/registry/new-york/block/sidebar-01/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarItem,\n  SidebarLabel,\n} from \"@/registry/new-york/block/sidebar-01/ui/sidebar\"\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Atom,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: Eclipse,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Rabbit,\n      plan: \"Free\",\n    },\n  ],\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n          icon: History,\n          description: \"View your recent prompts\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n          icon: Star,\n          description: \"Browse your starred prompts\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n          icon: Settings2,\n          description: \"Configure your playground\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n          icon: Rabbit,\n          description: \"Our fastest model for general use cases.\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n          icon: Bird,\n          description: \"Performance and speed for efficiency.\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n          icon: Turtle,\n          description: \"The most powerful model for complex computations.\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API\",\n      url: \"#\",\n      icon: Code2,\n      items: [\n        {\n          title: \"Chat\",\n          url: \"#\",\n        },\n        {\n          title: \"Completion\",\n          url: \"#\",\n        },\n        {\n          title: \"Images\",\n          url: \"#\",\n        },\n        {\n          title: \"Video\",\n          url: \"#\",\n        },\n        {\n          title: \"Speech\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n  searchResults: [\n    {\n      title: \"Routing Fundamentals\",\n      teaser:\n        \"The skeleton of every application is routing. This page will introduce you to the fundamental concepts of routing for the web and how to handle routing in Next.js.\",\n      url: \"#\",\n    },\n    {\n      title: \"Layouts and Templates\",\n      teaser:\n        \"The special files layout.js and template.js allow you to create UI that is shared between routes. This page will guide you through how and when to use these special files.\",\n      url: \"#\",\n    },\n    {\n      title: \"Data Fetching, Caching, and Revalidating\",\n      teaser:\n        \"Data fetching is a core part of any application. This page goes through how you can fetch, cache, and revalidate data in React and Next.js.\",\n      url: \"#\",\n    },\n    {\n      title: \"Server and Client Composition Patterns\",\n      teaser:\n        \"When building React applications, you will need to consider what parts of your application should be rendered on the server or the client. \",\n      url: \"#\",\n    },\n    {\n      title: \"Server Actions and Mutations\",\n      teaser:\n        \"Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.\",\n      url: \"#\",\n    },\n  ],\n}\n\nexport function AppSidebar() {\n  return (\n    <Sidebar>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarItem>\n          <SidebarLabel>Platform</SidebarLabel>\n          <NavMain items={data.navMain} searchResults={data.searchResults} />\n        </SidebarItem>\n        <SidebarItem>\n          <SidebarLabel>Projects</SidebarLabel>\n          <NavProjects projects={data.projects} />\n        </SidebarItem>\n        <SidebarItem className=\"mt-auto\">\n          <SidebarLabel>Help</SidebarLabel>\n          <NavSecondary items={data.navSecondary} />\n        </SidebarItem>\n        <SidebarItem>\n          <StorageCard />\n        </SidebarItem>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
-      "type": "registry:component"
+      "path": "blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york/blocks/sidebar-01/components/version-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        {/* We create a SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <SidebarGroup key={item.title}>\n            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {item.items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild isActive={item.isActive}>\n                      <a href={item.url}>{item.title}</a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { ChevronRight, Search, type LucideIcon } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\nexport function NavMain({\n  className,\n  items,\n  searchResults,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n  searchResults: React.ComponentProps<typeof SidebarSearch>[\"results\"]\n} & React.ComponentProps<\"ul\">) {\n  return (\n    <ul className={cn(\"grid gap-0.5\", className)}>\n      <li>\n        <SidebarSearch results={searchResults} />\n      </li>\n      {items.map((item) => (\n        <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n          <li>\n            <div className=\"relative flex items-center\">\n              <Link\n                href={item.url}\n                className=\"min-w-8 flex h-8 flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n              >\n                <item.icon className=\"h-4 w-4 shrink-0\" />\n                <div className=\"flex flex-1 overflow-hidden\">\n                  <div className=\"line-clamp-1 pr-6\">{item.title}</div>\n                </div>\n              </Link>\n              <CollapsibleTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  className=\"absolute right-1 h-6 w-6 rounded-md p-0 ring-ring transition-all focus-visible:ring-2 data-[state=open]:rotate-90\"\n                >\n                  <ChevronRight className=\"h-4 w-4 text-muted-foreground\" />\n                  <span className=\"sr-only\">Toggle</span>\n                </Button>\n              </CollapsibleTrigger>\n            </div>\n            <CollapsibleContent className=\"px-4 py-0.5\">\n              <ul className=\"grid border-l px-2\">\n                {item.items?.map((subItem) => (\n                  <li key={subItem.title}>\n                    <Link\n                      href={subItem.url}\n                      className=\"min-w-8 flex h-8 items-center gap-2 overflow-hidden rounded-md px-2 text-sm font-medium text-muted-foreground ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n                    >\n                      <div className=\"line-clamp-1\">{subItem.title}</div>\n                    </Link>\n                  </li>\n                ))}\n              </ul>\n            </CollapsibleContent>\n          </li>\n        </Collapsible>\n      ))}\n    </ul>\n  )\n}\n\nfunction SidebarSearch({\n  results,\n}: {\n  results: {\n    title: string\n    teaser: string\n    url: string\n  }[]\n}) {\n  const isMobile = useIsMobile()\n\n  if (isMobile) {\n    return (\n      <Drawer>\n        <DrawerTrigger className=\"min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\">\n          <Search className=\"h-4 w-4 shrink-0\" />\n          <div className=\"flex flex-1 overflow-hidden\">\n            <div className=\"line-clamp-1 pr-6\">Search</div>\n          </div>\n        </DrawerTrigger>\n        <DrawerContent>\n          <form>\n            <div className=\"border-b p-2.5\">\n              <Input\n                type=\"search\"\n                placeholder=\"Search...\"\n                className=\"h-8 rounded-sm shadow-none focus-visible:ring-0\"\n              />\n            </div>\n          </form>\n          <div className=\"grid gap-1 p-1.5 text-sm\">\n            {results.map((result) => (\n              <Link\n                href={result.url}\n                key={result.title}\n                className=\"rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n              >\n                <div className=\"font-medium\">{result.title}</div>\n                <div className=\"line-clamp-2 text-muted-foreground\">\n                  {result.teaser}\n                </div>\n              </Link>\n            ))}\n            <Separator className=\"my-1.5\" />\n            <Link\n              href=\"#\"\n              className=\"rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2\"\n            >\n              See all results\n            </Link>\n          </div>\n        </DrawerContent>\n      </Drawer>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger className=\"min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\">\n        <Search className=\"h-4 w-4 shrink-0\" />\n        <div className=\"flex flex-1 overflow-hidden\">\n          <div className=\"line-clamp-1 pr-6\">Search</div>\n        </div>\n      </PopoverTrigger>\n      <PopoverContent\n        side=\"right\"\n        align=\"start\"\n        sideOffset={4}\n        className=\"w-96 p-0\"\n      >\n        <form>\n          <div className=\"border-b p-2.5\">\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"h-8 rounded-sm shadow-none focus-visible:ring-0\"\n            />\n          </div>\n        </form>\n        <div className=\"grid gap-1 p-1.5 text-sm\">\n          {results.map((result) => (\n            <Link\n              href={result.url}\n              key={result.title}\n              className=\"rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n            >\n              <div className=\"font-medium\">{result.title}</div>\n              <div className=\"line-clamp-2 text-muted-foreground\">\n                {result.teaser}\n              </div>\n            </Link>\n          ))}\n          <Separator className=\"my-1.5\" />\n          <Link\n            href=\"#\"\n            className=\"rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2\"\n          >\n            See all results\n          </Link>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
-      "type": "registry:component"
+      "path": "blocks/sidebar-01/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-01/components/nav-projects.tsx",
-      "content": "import Link from \"next/link\"\nimport { MoreHorizontal, PlusSquare, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport function NavProjects({\n  projects,\n  className,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentProps<\"ul\">) {\n  return (\n    <ul className={cn(\"grid gap-0.5\", className)}>\n      {projects.map((item) => (\n        <li\n          key={item.name}\n          className=\"has-[[data-state=open]]:bg-accent has-[[data-state=open]]:text-accent-foreground group relative rounded-md hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Link\n            href={item.url}\n            className=\"flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n          >\n            <item.icon className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n            <div className=\"line-clamp-1 grow overflow-hidden pr-6 font-medium\">\n              {item.name}\n            </div>\n          </Link>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                className=\"peer absolute right-1 top-0.5 h-6 w-6 shrink-0 rounded-md bg-accent p-0 text-accent-foreground opacity-0 ring-ring transition-all focus-visible:ring-2 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100\"\n              >\n                <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n                <span className=\"sr-only\">Toggle</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side=\"right\" align=\"start\" sideOffset={20}>\n              <DropdownMenuItem>Share</DropdownMenuItem>\n              <DropdownMenuItem>Rename</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </li>\n      ))}\n      <li>\n        <button className=\"flex h-7 w-full items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-left text-xs ring-ring transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2\">\n          <PlusSquare className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n          <div className=\"line-clamp-1 overflow-hidden font-medium text-muted-foreground\">\n            Add Project\n          </div>\n        </button>\n      </li>\n    </ul>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "path": "block/sidebar-01/components/nav-secondary.tsx",
-      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/new-york/lib/utils\"\n\nexport function NavSecondary({\n  className,\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n} & React.ComponentProps<\"ul\">) {\n  if (!items?.length) {\n    return null\n  }\n\n  return (\n    <ul className={cn(\"grid gap-0.5\", className)}>\n      {items.map((item) => (\n        <li key={item.title}>\n          <Link\n            href={item.url}\n            className=\"flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2\"\n          >\n            <item.icon className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n            <div className=\"line-clamp-1 grow overflow-hidden pr-6 font-medium text-muted-foreground\">\n              {item.title}\n            </div>\n          </Link>\n        </li>\n      ))}\n    </ul>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "path": "block/sidebar-01/components/nav-user.tsx",
-      "content": "import {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger className=\"w-full rounded-md outline-none ring-ring hover:bg-accent focus-visible:ring-2 data-[state=open]:bg-accent\">\n        <div className=\"flex items-center gap-2 px-2 py-1.5 text-left text-sm transition-all\">\n          <Avatar className=\"h-7 w-7 rounded-md border\">\n            <AvatarImage\n              src={user.avatar}\n              alt={user.name}\n              className=\"animate-in fade-in-50 zoom-in-90\"\n            />\n            <AvatarFallback className=\"rounded-md\">CN</AvatarFallback>\n          </Avatar>\n          <div className=\"grid flex-1 leading-none\">\n            <div className=\"font-medium\">{user.name}</div>\n            <div className=\"overflow-hidden text-xs text-muted-foreground\">\n              <div className=\"line-clamp-1\">{user.email}</div>\n            </div>\n          </div>\n          <ChevronsUpDown className=\"ml-auto mr-0.5 h-4 w-4 text-muted-foreground/50\" />\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"w-56\"\n        align=\"end\"\n        side=\"right\"\n        sideOffset={4}\n      >\n        <DropdownMenuLabel className=\"p-0 font-normal\">\n          <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm transition-all\">\n            <Avatar className=\"h-7 w-7 rounded-md\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1\">\n              <div className=\"font-medium\">{user.name}</div>\n              <div className=\"overflow-hidden text-xs text-muted-foreground\">\n                <div className=\"line-clamp-1\">{user.email}</div>\n              </div>\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem className=\"gap-2\">\n            <BadgeCheck className=\"h-4 w-4 text-muted-foreground\" />\n            Account\n          </DropdownMenuItem>\n          <DropdownMenuItem className=\"gap-2\">\n            <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem className=\"gap-2\">\n            <Bell className=\"h-4 w-4 text-muted-foreground\" />\n            Notifications\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"gap-2\">\n          <LogOut className=\"h-4 w-4 text-muted-foreground\" />\n          Log out\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "path": "block/sidebar-01/components/storage-card.tsx",
-      "content": "import { Database } from \"lucide-react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport { Progress } from \"@/registry/new-york/ui/progress\"\n\nexport function StorageCard() {\n  return (\n    <Card className=\"rounded-md text-xs shadow-sm\">\n      <CardContent className=\"flex items-start gap-2.5 p-2.5\">\n        <div className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-accent text-accent-foreground\">\n          <Database className=\"h-5 w-5 text-muted-foreground\" />\n        </div>\n        <div className=\"grid flex-1 gap-1\">\n          <p className=\"font-medium\">Running out of space?</p>\n          <p className=\"text-muted-foreground\">79.2 GB / 100 GB used</p>\n          <Progress\n            value={79.2}\n            className=\"mt-1\"\n            aria-label=\"79.2 GB / 100 GB used\"\n          />\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "path": "block/sidebar-01/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger className=\"w-full rounded-md ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 data-[state=open]:bg-accent\">\n        <div className=\"flex items-center gap-1.5 overflow-hidden px-2 py-1.5 text-left text-sm transition-all\">\n          <div className=\"flex h-5 w-5 items-center justify-center rounded-sm bg-primary text-primary-foreground\">\n            <activeTeam.logo className=\"h-3.5 w-3.5 shrink-0\" />\n          </div>\n          <div className=\"line-clamp-1 flex-1 pr-2 font-medium\">\n            {activeTeam.name}\n          </div>\n          <ChevronsUpDown className=\"ml-auto h-4 w-4 text-muted-foreground/50\" />\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"w-64\"\n        align=\"start\"\n        side=\"right\"\n        sideOffset={4}\n      >\n        <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n          Teams\n        </DropdownMenuLabel>\n        {teams.map((team, index) => (\n          <DropdownMenuItem\n            key={team.name}\n            onClick={() => setActiveTeam(team)}\n            className=\"items-start gap-2 px-1.5\"\n          >\n            <div className=\"flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground\">\n              <team.logo className=\"h-5 w-5 shrink-0\" />\n            </div>\n            <div className=\"grid flex-1 leading-tight\">\n              <div className=\"line-clamp-1 font-medium\">{team.name}</div>\n              <div className=\"overflow-hidden text-xs text-muted-foreground\">\n                <div className=\"line-clamp-1\">{team.plan}</div>\n              </div>\n            </div>\n            <DropdownMenuShortcut className=\"self-center\">\n              ⌘{index + 1}\n            </DropdownMenuShortcut>\n          </DropdownMenuItem>\n        ))}\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"gap-2 px-1.5\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-md border bg-background\">\n            <Plus className=\"h-5 w-5\" />\n          </div>\n          <div className=\"font-medium text-muted-foreground\">Add workspace</div>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
-      "type": "registry:component"
-    },
-    {
-      "path": "block/sidebar-01/hooks/use-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nexport function useSidebar() {\n  const [state, setState] = React.useState<\"closed\" | \"open\">(\"open\")\n\n  return {\n    open: state === \"open\",\n    onOpenChange: (open: boolean) => setState(open ? \"open\" : \"closed\"),\n  }\n}\n",
-      "type": "registry:hook"
-    },
-    {
-      "path": "block/sidebar-01/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Sheet, SheetContent } from \"@/registry/new-york/ui/sheet\"\n\nexport const SIDEBAR_STATE_COOKIE = \"sidebar:state\"\n\ntype SidebarContext = {\n  state: \"open\" | \"closed\"\n  open: boolean\n  onOpenChange: (open: boolean) => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext>({\n  state: \"open\",\n  open: true,\n  onOpenChange: () => {},\n})\n\nfunction useSidebar() {\n  return React.useContext(SidebarContext)\n}\n\nconst SidebarLayout = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean\n  }\n>(({ defaultOpen, className, ...props }, ref) => {\n  const [open, setOpen] = React.useState(defaultOpen ?? true)\n\n  const onOpenChange = React.useCallback((open: boolean) => {\n    setOpen(open)\n    document.cookie = `${SIDEBAR_STATE_COOKIE}=${open}; path=/; max-age=${\n      60 * 60 * 24 * 7\n    }`\n  }, [])\n\n  const state = open ? \"open\" : \"closed\"\n\n  return (\n    <SidebarContext.Provider value={{ state, open, onOpenChange }}>\n      <div\n        ref={ref}\n        data-sidebar={state}\n        style={\n          {\n            \"--sidebar-width\": \"16rem\",\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"flex min-h-screen bg-accent/50 pl-0 transition-all duration-300 ease-in-out data-[sidebar=closed]:pl-0 sm:pl-[--sidebar-width]\",\n          className\n        )}\n        {...props}\n      />\n    </SidebarContext.Provider>\n  )\n})\nSidebarLayout.displayName = \"SidebarLayout\"\n\nconst SidebarTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n  const { open, onOpenChange } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"h-8 w-8\", className)}\n      onClick={() => onOpenChange(!open)}\n      {...props}\n    >\n      <PanelLeft className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst Sidebar = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, children }, ref) => {\n    const isMobile = useIsMobile()\n    const { open, onOpenChange } = useSidebar()\n\n    const sidebar = (\n      <div\n        ref={ref}\n        className={cn(\"flex h-full flex-col border-r bg-background\", className)}\n      >\n        {children}\n      </div>\n    )\n\n    if (isMobile) {\n      return (\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetContent\n            className=\"w-[260px] p-0 md:w-[--sidebar-width] [&>button]:hidden\"\n            side=\"left\"\n          >\n            {sidebar}\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]\">\n        {sidebar}\n      </aside>\n    )\n  }\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center border-b px-2.5 py-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center border-t px-2.5 py-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-1 flex-col gap-5 overflow-auto py-4\", className)}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div ref={ref} className={cn(\"grid gap-2 px-2.5\", className)} {...props} />\n  )\n})\nSidebarItem.displayName = \"SidebarItem\"\n\nconst SidebarLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"px-1.5 text-xs font-medium text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarLabel.displayName = \"SidebarLabel\"\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarItem,\n  SidebarLabel,\n  SidebarLayout,\n  SidebarTrigger,\n  useSidebar,\n}\n",
-      "type": "registry:ui"
+      "path": "blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-semibold\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width]\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-02-dark.png b/apps/www/public/r/styles/new-york/sidebar-02-dark.png
new file mode 100644
index 00000000000..e92a167de03
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-02-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-02-light.png b/apps/www/public/r/styles/new-york/sidebar-02-light.png
new file mode 100644
index 00000000000..287bb936ca3
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-02-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-02.json b/apps/www/public/r/styles/new-york/sidebar-02.json
new file mode 100644
index 00000000000..e01efe1687b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-02.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-02",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with collapsible sections.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-semibold\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width]\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-03-dark.png b/apps/www/public/r/styles/new-york/sidebar-03-dark.png
new file mode 100644
index 00000000000..f8321378c15
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-03-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-03-light.png b/apps/www/public/r/styles/new-york/sidebar-03-light.png
new file mode 100644
index 00000000000..77643fccb73
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-03-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-03.json b/apps/www/public/r/styles/new-york/sidebar-03.json
new file mode 100644
index 00000000000..44bc1ae1df5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-03.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-03",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-04-dark.png b/apps/www/public/r/styles/new-york/sidebar-04-dark.png
new file mode 100644
index 00000000000..cfb5b162016
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-04-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-04-light.png b/apps/www/public/r/styles/new-york/sidebar-04-light.png
new file mode 100644
index 00000000000..07b0fa47a45
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-04-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-04.json b/apps/www/public/r/styles/new-york/sidebar-04.json
new file mode 100644
index 00000000000..afa3204958b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-04.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-04",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A floating sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-05-dark.png b/apps/www/public/r/styles/new-york/sidebar-05-dark.png
new file mode 100644
index 00000000000..893ef968f3e
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-05-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-05-light.png b/apps/www/public/r/styles/new-york/sidebar-05-light.png
new file mode 100644
index 00000000000..a3a88c38e8c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-05-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-05.json b/apps/www/public/r/styles/new-york/sidebar-05.json
new file mode 100644
index 00000000000..f8ba695087d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-05.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-05",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with collapsible submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                      <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-05/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-06-dark.png b/apps/www/public/r/styles/new-york/sidebar-06-dark.png
new file mode 100644
index 00000000000..0115ddb1200
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-06-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-06-light.png b/apps/www/public/r/styles/new-york/sidebar-06-light.png
new file mode 100644
index 00000000000..f36a857718f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-06-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-06.json b/apps/www/public/r/styles/new-york/sidebar-06.json
new file mode 100644
index 00000000000..a7d3cb8dcfd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-06.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-06",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with submenus as dropdowns.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-semibold\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { MoreHorizontal, type LucideIcon } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup>\n      <SidebarMenu>\n        {items.map((item) => (\n          <DropdownMenu key={item.title}>\n            <SidebarMenuItem>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  {item.title} <MoreHorizontal className=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              {item.items?.length ? (\n                <DropdownMenuContent\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align={isMobile ? \"end\" : \"start\"}\n                  className=\"min-w-56 rounded-lg\"\n                >\n                  {item.items.map((item) => (\n                    <DropdownMenuItem asChild key={item.title}>\n                      <a href={item.url}>{item.title}</a>\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              ) : null}\n            </SidebarMenuItem>\n          </DropdownMenu>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { 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 { SidebarInput } from \"@/registry/new-york/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"shadow-none\">\n      <form>\n        <CardHeader className=\"p-4 pb-0\">\n          <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n          <CardDescription>\n            Opt-in to receive updates and news about the sidebar.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"grid gap-2.5 p-4\">\n          <SidebarInput type=\"email\" placeholder=\"Email\" />\n          <Button\n            className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n            size=\"sm\"\n          >\n            Subscribe\n          </Button>\n        </CardContent>\n      </form>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-07-dark.png b/apps/www/public/r/styles/new-york/sidebar-07-dark.png
new file mode 100644
index 00000000000..43a9fb16d7a
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-07-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-07-light.png b/apps/www/public/r/styles/new-york/sidebar-07-light.png
new file mode 100644
index 00000000000..e66a7e58f9f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-07-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-07.json b/apps/www/public/r/styles/new-york/sidebar-07.json
new file mode 100644
index 00000000000..34f018610c8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-07.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-07",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar that collapses to icons.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">\n                  {activeTeam.name}\n                </span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-08-dark.png b/apps/www/public/r/styles/new-york/sidebar-08-dark.png
new file mode 100644
index 00000000000..6de2042e8e0
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-08-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-08-light.png b/apps/www/public/r/styles/new-york/sidebar-08-light.png
new file mode 100644
index 00000000000..8f36ab1d856
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-08-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-08.json b/apps/www/public/r/styles/new-york/sidebar-08.json
new file mode 100644
index 00000000000..3f8cd1240a3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-08.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-08",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "An inset sidebar with secondary navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-09-dark.png b/apps/www/public/r/styles/new-york/sidebar-09-dark.png
new file mode 100644
index 00000000000..80833544957
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-09-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-09-light.png b/apps/www/public/r/styles/new-york/sidebar-09-light.png
new file mode 100644
index 00000000000..7b2e848f66c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-09-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-09.json b/apps/www/public/r/styles/new-york/sidebar-09.json
new file mode 100644
index 00000000000..b27f41e0a22
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-09.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-09",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "Collapsible nested sidebars.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\n\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-10-dark.png b/apps/www/public/r/styles/new-york/sidebar-10-dark.png
new file mode 100644
index 00000000000..9ac92d8e32b
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-10-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-10-light.png b/apps/www/public/r/styles/new-york/sidebar-10-light.png
new file mode 100644
index 00000000000..4ba7a53a646
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-10-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-10.json b/apps/www/public/r/styles/new-york/sidebar-10.json
new file mode 100644
index 00000000000..9744bba01a5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-10.json
@@ -0,0 +1,69 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-10",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar in a popover.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/new-york/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/new-york/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-10/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: Settings2,\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: Link,\n    },\n    {\n      label: \"Duplicate\",\n      icon: Copy,\n    },\n    {\n      label: \"Move to\",\n      icon: CornerUpRight,\n    },\n    {\n      label: \"Move to Trash\",\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: CornerUpLeft,\n    },\n    {\n      label: \"View analytics\",\n      icon: LineChart,\n    },\n    {\n      label: \"Version History\",\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: \"Show delete pages\",\n      icon: Trash,\n    },\n    {\n      label: \"Notifications\",\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: ArrowUp,\n    },\n    {\n      label: \"Export\",\n      icon: ArrowDown,\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-11-dark.png b/apps/www/public/r/styles/new-york/sidebar-11-dark.png
new file mode 100644
index 00000000000..fe7240b71be
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-11-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-11-light.png b/apps/www/public/r/styles/new-york/sidebar-11-light.png
new file mode 100644
index 00000000000..abd19a6a76c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-11-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-11.json b/apps/www/public/r/styles/new-york/sidebar-11.json
new file mode 100644
index 00000000000..03b981fbba2
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-11.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-11",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a collapsible file tree.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <File />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <File />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton>\n            <ChevronRight className=\"transition-transform\" />\n            <Folder />\n            {name}\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-12-dark.png b/apps/www/public/r/styles/new-york/sidebar-12-dark.png
new file mode 100644
index 00000000000..9d6b6164c3c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-12-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-12-light.png b/apps/www/public/r/styles/new-york/sidebar-12-light.png
new file mode 100644
index 00000000000..b1fac8c4cf2
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-12-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-12.json b/apps/www/public/r/styles/new-york/sidebar-12.json
new file mode 100644
index 00000000000..b30585d1d27
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-12.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-12",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a calendar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-13-dark.png b/apps/www/public/r/styles/new-york/sidebar-13-dark.png
new file mode 100644
index 00000000000..34c2606f327
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-13-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-13-light.png b/apps/www/public/r/styles/new-york/sidebar-13-light.png
new file mode 100644
index 00000000000..cb5efd33e6a
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-13-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-13.json b/apps/www/public/r/styles/new-york/sidebar-13.json
new file mode 100644
index 00000000000..e67df343e94
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-13.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-13",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar in a dialog.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"@/registry/new-york/blocks/sidebar-13/components/settings-dialog\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-14-dark.png b/apps/www/public/r/styles/new-york/sidebar-14-dark.png
new file mode 100644
index 00000000000..ccbf36c07c5
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-14-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-14-light.png b/apps/www/public/r/styles/new-york/sidebar-14-light.png
new file mode 100644
index 00000000000..d19f20508a4
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-14-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-14.json b/apps/www/public/r/styles/new-york/sidebar-14.json
new file mode 100644
index 00000000000..4c7016ec026
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-14.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-14",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar on the right.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-15-dark.png b/apps/www/public/r/styles/new-york/sidebar-15-dark.png
new file mode 100644
index 00000000000..dc7d52abbdf
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-15-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-15-light.png b/apps/www/public/r/styles/new-york/sidebar-15-light.png
new file mode 100644
index 00000000000..6b89b39681d
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-15-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-15.json b/apps/www/public/r/styles/new-york/sidebar-15.json
new file mode 100644
index 00000000000..219a4b5ead2
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-15.json
@@ -0,0 +1,89 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-15",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A left and right sidebar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"@/registry/new-york/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/new-york/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-15/components/calendars.tsx",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/new-york/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-15/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function SidebarLeft({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky hidden lg:flex top-0 h-svh border-l\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-16-dark.png b/apps/www/public/r/styles/new-york/sidebar-16-dark.png
new file mode 100644
index 00000000000..a52e11ff9d4
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-16-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-16-light.png b/apps/www/public/r/styles/new-york/sidebar-16-light.png
new file mode 100644
index 00000000000..cd0f4559813
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-16-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-16.json b/apps/www/public/r/styles/new-york/sidebar-16.json
new file mode 100644
index 00000000000..67450cf3e5f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-16.json
@@ -0,0 +1,71 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-16",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/new-york/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(theme(spacing.14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-[--header-height] !h-[calc(100svh-var(--header-height))]\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/search-form.tsx",
+      "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport { SidebarInput } from \"@/registry/new-york/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <div className=\"relative\">\n        <Label htmlFor=\"search\" className=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Type to search...\"\n          className=\"h-8 pl-7\"\n        />\n        <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport { useSidebar } from \"@/registry/new-york/ui/sidebar\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"flex sticky top-0 z-50 w-full items-center border-b bg-background\">\n      <div className=\"flex h-[--header-height] w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <SidebarIcon />\n        </Button>\n        <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-controlled-dark.png b/apps/www/public/r/styles/new-york/sidebar-controlled-dark.png
new file mode 100644
index 00000000000..a5c90ec88e2
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-controlled-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-controlled-light.png b/apps/www/public/r/styles/new-york/sidebar-controlled-light.png
new file mode 100644
index 00000000000..37f9fb17103
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-controlled-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-controlled.json b/apps/www/public/r/styles/new-york/sidebar-controlled.json
new file mode 100644
index 00000000000..6d4aba2f626
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-controlled.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <SidebarProvider open={open} onOpenChange={setOpen}>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center h-12 px-4 justify-between\">\n          <Button\n            onClick={() => setOpen((open) => !open)}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            {open ? <PanelLeftClose /> : <PanelLeftOpen />}\n            <span>{open ? \"Close\" : \"Open\"} Sidebar</span>\n          </Button>\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-demo-dark.png b/apps/www/public/r/styles/new-york/sidebar-demo-dark.png
new file mode 100644
index 00000000000..66b72862973
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-demo-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-demo-light.png b/apps/www/public/r/styles/new-york/sidebar-demo-light.png
new file mode 100644
index 00000000000..c73e763cbe7
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-demo-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-demo.json b/apps/www/public/r/styles/new-york/sidebar-demo.json
new file mode 100644
index 00000000000..5a575c9ea38
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-demo.tsx",
+      "content": "\"use client\"\n\nimport { Calendar, Home, Inbox, Search, Settings } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// Menu items.\nconst items = [\n  {\n    title: \"Home\",\n    url: \"#\",\n    icon: Home,\n  },\n  {\n    title: \"Inbox\",\n    url: \"#\",\n    icon: Inbox,\n  },\n  {\n    title: \"Calendar\",\n    url: \"#\",\n    icon: Calendar,\n  },\n  {\n    title: \"Search\",\n    url: \"#\",\n    icon: Search,\n  },\n  {\n    title: \"Settings\",\n    url: \"#\",\n    icon: Settings,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Application</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-footer-dark.png b/apps/www/public/r/styles/new-york/sidebar-footer-dark.png
new file mode 100644
index 00000000000..590927dcc6f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-footer-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-footer-light.png b/apps/www/public/r/styles/new-york/sidebar-footer-light.png
new file mode 100644
index 00000000000..b12fea3ac92
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-footer-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-footer.json b/apps/www/public/r/styles/new-york/sidebar-footer.json
new file mode 100644
index 00000000000..3550b749ea6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-footer.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-footer.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, ChevronUp, User2 } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader />\n        <SidebarContent />\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Username\n                    <ChevronUp className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  side=\"top\"\n                  className=\"w-[--radix-popper-anchor-width]\"\n                >\n                  <DropdownMenuItem>\n                    <span>Account</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Billing</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Sign out</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-group-action-dark.png b/apps/www/public/r/styles/new-york/sidebar-group-action-dark.png
new file mode 100644
index 00000000000..169fe007c3f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-group-action-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-group-action-light.png b/apps/www/public/r/styles/new-york/sidebar-group-action-light.png
new file mode 100644
index 00000000000..e5b45c2bee6
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-group-action-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-group-action.json b/apps/www/public/r/styles/new-york/sidebar-group-action.json
new file mode 100644
index 00000000000..9e5d48f4510
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-group-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-action.tsx",
+      "content": "\"use client\"\n\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from \"lucide-react\"\nimport { Toaster, toast } from \"sonner\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Toaster\n        position=\"bottom-left\"\n        toastOptions={{\n          className: \"ml-[160px]\",\n        }}\n      />\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupAction\n              title=\"Add Project\"\n              onClick={() => toast(\"You clicked the group action!\")}\n            >\n              <Plus /> <span className=\"sr-only\">Add Project</span>\n            </SidebarGroupAction>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <Frame />\n                      <span>Design Engineering</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <PieChart />\n                      <span>Sales & Marketing</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton asChild>\n                    <a href=\"#\">\n                      <Map />\n                      <span>Travel</span>\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-group-collapsible-dark.png b/apps/www/public/r/styles/new-york/sidebar-group-collapsible-dark.png
new file mode 100644
index 00000000000..34ca14208cf
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-group-collapsible-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-group-collapsible-light.png b/apps/www/public/r/styles/new-york/sidebar-group-collapsible-light.png
new file mode 100644
index 00000000000..69997b2453d
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-group-collapsible-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-group-collapsible.json b/apps/www/public/r/styles/new-york/sidebar-group-collapsible.json
new file mode 100644
index 00000000000..bbd44b10334
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-group-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown, LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <Collapsible defaultOpen className=\"group/collapsible\">\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  Help\n                  <ChevronDown className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <LifeBuoy />\n                        Support\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <Send />\n                        Feedback\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-group-dark.png b/apps/www/public/r/styles/new-york/sidebar-group-dark.png
new file mode 100644
index 00000000000..5a292bdfb10
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-group-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-group-light.png b/apps/www/public/r/styles/new-york/sidebar-group-light.png
new file mode 100644
index 00000000000..2ea25ce315a
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-group-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-group.json b/apps/www/public/r/styles/new-york/sidebar-group.json
new file mode 100644
index 00000000000..1bddbeef77e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-group.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-group.tsx",
+      "content": "\"use client\"\n\nimport { LifeBuoy, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Help</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <LifeBuoy />\n                    Support\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <Send />\n                    Feedback\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-header-dark.png b/apps/www/public/r/styles/new-york/sidebar-header-dark.png
new file mode 100644
index 00000000000..4e83953edc7
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-header-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-header-light.png b/apps/www/public/r/styles/new-york/sidebar-header-light.png
new file mode 100644
index 00000000000..6af0e608d6c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-header-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-header.json b/apps/www/public/r/styles/new-york/sidebar-header.json
new file mode 100644
index 00000000000..79433884cf9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-header.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-header.tsx",
+      "content": "\"use client\"\n\nimport { ChevronDown } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                    Select Workspace\n                    <ChevronDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent className=\"w-[--radix-popper-anchor-width]\">\n                  <DropdownMenuItem>\n                    <span>Acme Inc</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <span>Acme Corp.</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex items-center justify-between px-4 h-12\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-action-dark.png b/apps/www/public/r/styles/new-york/sidebar-menu-action-dark.png
new file mode 100644
index 00000000000..6fe8c59cccf
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-menu-action-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-action-light.png b/apps/www/public/r/styles/new-york/sidebar-menu-action-light.png
new file mode 100644
index 00000000000..85f417f4690
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-menu-action-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-action.json b/apps/www/public/r/styles/new-york/sidebar-menu-action.json
new file mode 100644
index 00000000000..801f7a2e612
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-menu-action.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-action.tsx",
+      "content": "\"use client\"\n\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project, index) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction>\n                          <MoreHorizontal />\n                          <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuItem>\n                          <span>Edit Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <span>Delete Project</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-badge-dark.png b/apps/www/public/r/styles/new-york/sidebar-menu-badge-dark.png
new file mode 100644
index 00000000000..4d7b35fdffe
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-menu-badge-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-badge-light.png b/apps/www/public/r/styles/new-york/sidebar-menu-badge-light.png
new file mode 100644
index 00000000000..22ec06c9801
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-menu-badge-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-badge.json b/apps/www/public/r/styles/new-york/sidebar-menu-badge.json
new file mode 100644
index 00000000000..3f75b70d6ad
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-menu-badge.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-badge.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n    badge: \"8\",\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton\n                      asChild\n                      className=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                    >\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-collapsible-dark.png b/apps/www/public/r/styles/new-york/sidebar-menu-collapsible-dark.png
new file mode 100644
index 00000000000..809fa9b13fd
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-menu-collapsible-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-collapsible-light.png b/apps/www/public/r/styles/new-york/sidebar-menu-collapsible-light.png
new file mode 100644
index 00000000000..88209c7be73
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-menu-collapsible-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-collapsible.json b/apps/www/public/r/styles/new-york/sidebar-menu-collapsible.json
new file mode 100644
index 00000000000..2b5d48b6cfe
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-menu-collapsible.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-collapsible.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <Collapsible\n                    key={index}\n                    className=\"group/collapsible\"\n                    defaultOpen={index === 0}\n                  >\n                    <SidebarMenuItem>\n                      <CollapsibleTrigger asChild>\n                        <SidebarMenuButton>\n                          <span>{item.title}</span>\n                          <ChevronRight className=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                        </SidebarMenuButton>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem, subIndex) => (\n                            <SidebarMenuSubItem key={subIndex}>\n                              <SidebarMenuSubButton asChild>\n                                <a href={subItem.url}>\n                                  <span>{subItem.title}</span>\n                                </a>\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </SidebarMenuItem>\n                  </Collapsible>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-dark.png b/apps/www/public/r/styles/new-york/sidebar-menu-dark.png
new file mode 100644
index 00000000000..26fe7bc4fdc
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-menu-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-light.png b/apps/www/public/r/styles/new-york/sidebar-menu-light.png
new file mode 100644
index 00000000000..2672b17cd29
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-menu-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-sub-dark.png b/apps/www/public/r/styles/new-york/sidebar-menu-sub-dark.png
new file mode 100644
index 00000000000..34896191a4b
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-menu-sub-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-sub-light.png b/apps/www/public/r/styles/new-york/sidebar-menu-sub-light.png
new file mode 100644
index 00000000000..d6325ae695c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-menu-sub-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-sub.json b/apps/www/public/r/styles/new-york/sidebar-menu-sub.json
new file mode 100644
index 00000000000..d9c453cee13
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-menu-sub.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu-sub.tsx",
+      "content": "\"use client\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Getting Started\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Installation\",\n        url: \"#\",\n      },\n      {\n        title: \"Project Structure\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Building Your Application\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Routing\",\n        url: \"#\",\n      },\n      {\n        title: \"Data Fetching\",\n        url: \"#\",\n        isActive: true,\n      },\n      {\n        title: \"Rendering\",\n        url: \"#\",\n      },\n      {\n        title: \"Caching\",\n        url: \"#\",\n      },\n      {\n        title: \"Styling\",\n        url: \"#\",\n      },\n      {\n        title: \"Optimizing\",\n        url: \"#\",\n      },\n      {\n        title: \"Configuring\",\n        url: \"#\",\n      },\n      {\n        title: \"Testing\",\n        url: \"#\",\n      },\n      {\n        title: \"Authentication\",\n        url: \"#\",\n      },\n      {\n        title: \"Deploying\",\n        url: \"#\",\n      },\n      {\n        title: \"Upgrading\",\n        url: \"#\",\n      },\n      {\n        title: \"Examples\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"API Reference\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Components\",\n        url: \"#\",\n      },\n      {\n        title: \"File Conventions\",\n        url: \"#\",\n      },\n      {\n        title: \"Functions\",\n        url: \"#\",\n      },\n      {\n        title: \"next.config.js Options\",\n        url: \"#\",\n      },\n      {\n        title: \"CLI\",\n        url: \"#\",\n      },\n      {\n        title: \"Edge Runtime\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    title: \"Architecture\",\n    url: \"#\",\n    items: [\n      {\n        title: \"Accessibility\",\n        url: \"#\",\n      },\n      {\n        title: \"Fast Refresh\",\n        url: \"#\",\n      },\n      {\n        title: \"Next.js Compiler\",\n        url: \"#\",\n      },\n      {\n        title: \"Supported Browsers\",\n        url: \"#\",\n      },\n      {\n        title: \"Turbopack\",\n        url: \"#\",\n      },\n    ],\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {items.map((item, index) => (\n                  <SidebarMenuItem key={index}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <SidebarMenuSub>\n                      {item.items.map((subItem, subIndex) => (\n                        <SidebarMenuSubItem key={subIndex}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu.json b/apps/www/public/r/styles/new-york/sidebar-menu.json
new file mode 100644
index 00000000000..1211bd5864e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-menu.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-menu.tsx",
+      "content": "\"use client\"\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n  },\n]\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {projects.map((project) => (\n                  <SidebarMenuItem key={project.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={project.url}>\n                        <project.icon />\n                        <span>{project.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-rsc-dark.png b/apps/www/public/r/styles/new-york/sidebar-rsc-dark.png
new file mode 100644
index 00000000000..26fe7bc4fdc
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-rsc-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-rsc-light.png b/apps/www/public/r/styles/new-york/sidebar-rsc-light.png
new file mode 100644
index 00000000000..2672b17cd29
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-rsc-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-rsc.json b/apps/www/public/r/styles/new-york/sidebar-rsc.json
new file mode 100644
index 00000000000..ae8dd5bee3f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-rsc.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "internal/sidebar-rsc.tsx",
+      "content": "import * as React from \"react\"\nimport { Frame, LifeBuoy, Map, PieChart, Send } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarProvider,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst projects = [\n  {\n    name: \"Design Engineering\",\n    url: \"#\",\n    icon: Frame,\n    badge: \"24\",\n  },\n  {\n    name: \"Sales & Marketing\",\n    url: \"#\",\n    icon: PieChart,\n    badge: \"12\",\n  },\n  {\n    name: \"Travel\",\n    url: \"#\",\n    icon: Map,\n    badge: \"3\",\n  },\n  {\n    name: \"Support\",\n    url: \"#\",\n    icon: LifeBuoy,\n    badge: \"21\",\n  },\n  {\n    name: \"Feedback\",\n    url: \"#\",\n    icon: Send,\n    badge: \"8\",\n  },\n]\n\n// Dummy fetch function\nasync function fetchProjects() {\n  await new Promise((resolve) => setTimeout(resolve, 3000))\n  return projects\n}\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <React.Suspense fallback={<NavProjectsSkeleton />}>\n                <NavProjects />\n              </React.Suspense>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n\nfunction NavProjectsSkeleton() {\n  return (\n    <SidebarMenu>\n      {Array.from({ length: 5 }).map((_, index) => (\n        <SidebarMenuItem key={index}>\n          <SidebarMenuSkeleton showIcon />\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nasync function NavProjects() {\n  const projects = await fetchProjects()\n\n  return (\n    <SidebarMenu>\n      {projects.map((project) => (\n        <SidebarMenuItem key={project.name}>\n          <SidebarMenuButton asChild>\n            <a href={project.url}>\n              <project.icon />\n              <span>{project.name}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar.json b/apps/www/public/r/styles/new-york/sidebar.json
new file mode 100644
index 00000000000..1b3c7df50cb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar",
+  "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "@radix-ui/react-slot",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "separator",
+    "sheet",
+    "tooltip",
+    "input",
+    "use-mobile",
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "ui/sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\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 { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/new-york/ui/sheet\"\nimport { Skeleton } from \"@/registry/new-york/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = React.useState(false)\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === \"function\" ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n\n        // This sets the cookie to keep the sidebar state.\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      },\n      [setOpenProp, open]\n    )\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener(\"keydown\", handleKeyDown)\n      return () => window.removeEventListener(\"keydown\", handleKeyDown)\n    }, [toggleSidebar])\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? \"expanded\" : \"collapsed\"\n\n    const contextValue = React.useMemo<SidebarContextProps>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH,\n                \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as React.CSSProperties\n            }\n            className={cn(\n              \"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar\",\n              className\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  }\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\nconst Sidebar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    side?: \"left\" | \"right\"\n    variant?: \"sidebar\" | \"floating\" | \"inset\"\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  }\n>(\n  (\n    {\n      side = \"left\",\n      variant = \"sidebar\",\n      collapsible = \"offcanvas\",\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n    if (collapsible === \"none\") {\n      return (\n        <div\n          className={cn(\n            \"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground\",\n            className\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </div>\n      )\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n              } as React.CSSProperties\n            }\n            side={side}\n          >\n            <SheetHeader className=\"sr-only\">\n              <SheetTitle>Sidebar</SheetTitle>\n              <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n            </SheetHeader>\n            <div className=\"flex h-full w-full flex-col\">{children}</div>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-sidebar-foreground md:block\"\n        data-state={state}\n        data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n        data-variant={variant}\n        data-side={side}\n      >\n        {/* This is what handles the sidebar gap on desktop */}\n        <div\n          className={cn(\n            \"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\n            \"group-data-[collapsible=offcanvas]:w-0\",\n            \"group-data-[side=right]:rotate-180\",\n            variant === \"floating\" || variant === \"inset\"\n              ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n              : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\"\n          )}\n        />\n        <div\n          className={cn(\n            \"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\n            side === \"left\"\n              ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n              : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n            // Adjust the padding for floating and inset variants.\n            variant === \"floating\" || variant === \"inset\"\n              ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n              : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n            className\n          )}\n          {...props}\n        >\n          <div\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n  React.ElementRef<typeof Button>,\n  React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"h-7 w-7\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <PanelLeft />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst SidebarRail = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      ref={ref}\n      data-sidebar=\"rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarRail.displayName = \"SidebarRail\"\n\nconst SidebarInset = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"main\">\n>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = \"SidebarInset\"\n\nconst SidebarInput = React.forwardRef<\n  React.ElementRef<typeof Input>,\n  React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      className={cn(\n        \"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = \"SidebarInput\"\n\nconst SidebarHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarSeparator = React.forwardRef<\n  React.ElementRef<typeof Separator>,\n  React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n})\nSidebarSeparator.displayName = \"SidebarSeparator\"\n\nconst SidebarContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = \"SidebarGroup\"\n\nconst SidebarGroupLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"div\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\n\nconst SidebarGroupAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = \"SidebarGroupAction\"\n\nconst SidebarGroupContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"group-content\"\n    className={cn(\"w-full text-sm\", className)}\n    {...props}\n  />\n))\nSidebarGroupContent.displayName = \"SidebarGroupContent\"\n\nconst SidebarMenu = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu\"\n    className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n    {...props}\n  />\n))\nSidebarMenu.displayName = \"SidebarMenu\"\n\nconst SidebarMenuItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    data-sidebar=\"menu-item\"\n    className={cn(\"group/menu-item relative\", className)}\n    {...props}\n  />\n))\nSidebarMenuItem.displayName = \"SidebarMenuItem\"\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = \"default\",\n      size = \"default\",\n      tooltip,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : \"button\"\n    const { isMobile, state } = useSidebar()\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n        {...props}\n      />\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === \"string\") {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== \"collapsed\" || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    )\n  }\n)\nSidebarMenuButton.displayName = \"SidebarMenuButton\"\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = \"SidebarMenuAction\"\n\nconst SidebarMenuBadge = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"menu-badge\"\n    className={cn(\n      \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground\",\n      \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className\n    )}\n    {...props}\n  />\n))\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\"\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-[--skeleton-width] flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\n\nconst SidebarMenuSub = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu-sub\"\n    className={cn(\n      \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className\n    )}\n    {...props}\n  />\n))\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\n\nconst SidebarMenuSubItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<\"a\"> & {\n    asChild?: boolean\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "colors": {
+            "sidebar": {
+              "DEFAULT": "hsl(var(--sidebar-background))",
+              "foreground": "hsl(var(--sidebar-foreground))",
+              "primary": "hsl(var(--sidebar-primary))",
+              "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+              "accent": "hsl(var(--sidebar-accent))",
+              "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+              "border": "hsl(var(--sidebar-border))",
+              "ring": "hsl(var(--sidebar-ring))"
+            }
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "sidebar-background": "0 0% 98%",
+      "sidebar-foreground": "240 5.3% 26.1%",
+      "sidebar-primary": "240 5.9% 10%",
+      "sidebar-primary-foreground": "0 0% 98%",
+      "sidebar-accent": "240 4.8% 95.9%",
+      "sidebar-accent-foreground": "240 5.9% 10%",
+      "sidebar-border": "220 13% 91%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    },
+    "dark": {
+      "sidebar-background": "240 5.9% 10%",
+      "sidebar-foreground": "240 4.8% 95.9%",
+      "sidebar-primary": "224.3 76.3% 48%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "240 3.7% 15.9%",
+      "sidebar-accent-foreground": "240 4.8% 95.9%",
+      "sidebar-border": "240 3.7% 15.9%",
+      "sidebar-ring": "217.2 91.2% 59.8%"
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sink-dark.png b/apps/www/public/r/styles/new-york/sink-dark.png
new file mode 100644
index 00000000000..0b84c2ed939
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sink-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sink-light.png b/apps/www/public/r/styles/new-york/sink-light.png
new file mode 100644
index 00000000000..1c209b3082e
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sink-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sink.json b/apps/www/public/r/styles/new-york/sink.json
new file mode 100644
index 00000000000..dd7bdb1263a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sink.json
@@ -0,0 +1,452 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sink",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "accordion",
+    "alert",
+    "alert-dialog",
+    "aspect-ratio",
+    "avatar",
+    "badge",
+    "breadcrumb",
+    "button",
+    "calendar",
+    "card",
+    "carousel",
+    "chart",
+    "checkbox",
+    "collapsible",
+    "command",
+    "context-menu",
+    "dialog",
+    "drawer",
+    "dropdown-menu",
+    "hover-card",
+    "input",
+    "input-otp",
+    "label",
+    "menubar",
+    "navigation-menu",
+    "pagination",
+    "popover",
+    "progress",
+    "radio-group",
+    "resizable",
+    "scroll-area",
+    "select",
+    "separator",
+    "sheet",
+    "sidebar",
+    "skeleton",
+    "slider",
+    "sonner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "toast",
+    "toggle",
+    "toggle-group",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "internal/sink/page.tsx",
+      "content": "import { AccordionDemo } from \"@/registry/new-york/internal/sink/components/accordion-demo\"\nimport { AlertDemo } from \"@/registry/new-york/internal/sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/registry/new-york/internal/sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/registry/new-york/internal/sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/registry/new-york/internal/sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/registry/new-york/internal/sink/components/avatar-demo\"\nimport { BadgeDemo } from \"@/registry/new-york/internal/sink/components/badge-demo\"\nimport { BadgeDestructive } from \"@/registry/new-york/internal/sink/components/badge-destructive\"\nimport { BadgeOutline } from \"@/registry/new-york/internal/sink/components/badge-outline\"\nimport { BadgeSecondary } from \"@/registry/new-york/internal/sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/registry/new-york/internal/sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/registry/new-york/internal/sink/components/button-demo\"\nimport { ButtonDestructive } from \"@/registry/new-york/internal/sink/components/button-destructive\"\nimport { ButtonGhost } from \"@/registry/new-york/internal/sink/components/button-ghost\"\nimport { ButtonLink } from \"@/registry/new-york/internal/sink/components/button-link\"\nimport { ButtonLoading } from \"@/registry/new-york/internal/sink/components/button-loading\"\nimport { ButtonOutline } from \"@/registry/new-york/internal/sink/components/button-outline\"\nimport { ButtonSecondary } from \"@/registry/new-york/internal/sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/registry/new-york/internal/sink/components/button-with-icon\"\nimport { CalendarDemo } from \"@/registry/new-york/internal/sink/components/calendar-demo\"\nimport { CardDemo } from \"@/registry/new-york/internal/sink/components/card-demo\"\nimport { CarouselDemo } from \"@/registry/new-york/internal/sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/registry/new-york/internal/sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/registry/new-york/internal/sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/registry/new-york/internal/sink/components/combobox-demo\"\nimport { CommandDemo } from \"@/registry/new-york/internal/sink/components/command-demo\"\nimport { ComponentWrapper } from \"@/registry/new-york/internal/sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/registry/new-york/internal/sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/registry/new-york/internal/sink/components/date-picker-demo\"\nimport { DialogDemo } from \"@/registry/new-york/internal/sink/components/dialog-demo\"\nimport { DrawerDemo } from \"@/registry/new-york/internal/sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/registry/new-york/internal/sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/registry/new-york/internal/sink/components/hover-card-demo\"\nimport { InputDemo } from \"@/registry/new-york/internal/sink/components/input-demo\"\nimport { InputOTPDemo } from \"@/registry/new-york/internal/sink/components/input-otp-demo\"\nimport { LabelDemo } from \"@/registry/new-york/internal/sink/components/label-demo\"\nimport { MenubarDemo } from \"@/registry/new-york/internal/sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/registry/new-york/internal/sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/registry/new-york/internal/sink/components/pagination-demo\"\nimport { PopoverDemo } from \"@/registry/new-york/internal/sink/components/popover-demo\"\nimport { ProgressDemo } from \"@/registry/new-york/internal/sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/registry/new-york/internal/sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/registry/new-york/internal/sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/registry/new-york/internal/sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/registry/new-york/internal/sink/components/select-demo\"\nimport { SeparatorDemo } from \"@/registry/new-york/internal/sink/components/separator-demo\"\nimport { SheetDemo } from \"@/registry/new-york/internal/sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/registry/new-york/internal/sink/components/skeleton-demo\"\nimport { SliderDemo } from \"@/registry/new-york/internal/sink/components/slider-demo\"\nimport { SonnerDemo } from \"@/registry/new-york/internal/sink/components/sonner-demo\"\nimport { SwitchDemo } from \"@/registry/new-york/internal/sink/components/switch-demo\"\nimport { TableDemo } from \"@/registry/new-york/internal/sink/components/table-demo\"\nimport { TabsDemo } from \"@/registry/new-york/internal/sink/components/tabs-demo\"\nimport { TextareaDemo } from \"@/registry/new-york/internal/sink/components/textarea-demo\"\nimport { ToastDemo } from \"@/registry/new-york/internal/sink/components/toast-demo\"\nimport { ToggleDemo } from \"@/registry/new-york/internal/sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/registry/new-york/internal/sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/registry/new-york/internal/sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/registry/new-york/internal/sink/components/toggle-outline\"\nimport { ToggleWithText } from \"@/registry/new-york/internal/sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/registry/new-york/internal/sink/components/tooltip-demo\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function SinkPage() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n            <ComponentWrapper name=\"Accordion\">\n              <AccordionDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Alert\">\n              <AlertDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AlertDialog\">\n              <AlertDialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AspectRatio\">\n              <AspectRatioDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Avatar\">\n              <AvatarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Badge\">\n              <BadgeDemo />\n              <BadgeDestructive />\n              <BadgeOutline />\n              <BadgeSecondary />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Breadcrumb\">\n              <BreadcrumbDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Button\">\n              <div className=\"flex items-center gap-2\">\n                <ButtonDemo />\n                <ButtonDestructive />\n                <ButtonGhost />\n                <ButtonLink />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonLoading />\n                <ButtonOutline />\n                <ButtonSecondary />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonWithIcon />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Calendar\">\n              <CalendarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Card\">\n              <CardDemo className=\"w-full\" />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Carousel\"\n              className=\"[&_.max-w-xs]:max-w-[70%]\"\n            >\n              <CarouselDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Checkbox\">\n              <CheckboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Collapsible\">\n              <CollapsibleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Combobox\">\n              <ComboboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Command\"\n              className=\"[&_[cmdk-root]]:md:min-w-max\"\n            >\n              <CommandDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ContextMenu\">\n              <ContextMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DatePicker\">\n              <DatePickerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Dialog\">\n              <DialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Drawer\">\n              <DrawerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DropdownMenu\">\n              <DropdownMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"HoverCard\">\n              <HoverCardDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Input\">\n              <InputDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"InputOTP\">\n              <InputOTPDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Label\">\n              <LabelDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Menubar\">\n              <MenubarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"NavigationMenu\" className=\"col-span-2\">\n              <NavigationMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Pagination\">\n              <PaginationDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Popover\">\n              <PopoverDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Progress\">\n              <ProgressDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"RadioGroup\">\n              <RadioGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Resizable\" className=\"col-span-2\">\n              <ResizableHandleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ScrollArea\">\n              <ScrollAreaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Select\">\n              <SelectDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Separator\">\n              <SeparatorDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sheet\">\n              <SheetDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Skeleton\">\n              <SkeletonDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Slider\">\n              <SliderDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sonner\">\n              <SonnerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Switch\">\n              <SwitchDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Table\" className=\"col-span-2\">\n              <TableDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tabs\">\n              <TabsDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Textarea\">\n              <TextareaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toast\">\n              <ToastDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toggle\">\n              <div className=\"flex items-center gap-2\">\n                <ToggleDemo />\n                <ToggleDisabled />\n                <ToggleOutline />\n                <ToggleWithText />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ToggleGroup\">\n              <ToggleGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tooltip\">\n              <TooltipDemo />\n            </ComponentWrapper>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/sink/page.tsx"
+    },
+    {
+      "path": "internal/sink/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/component-wrapper.tsx",
+      "content": "import { cn } from \"@/registry/new-york/lib/utils\"\n\nexport function ComponentWrapper({\n  className,\n  name,\n  children,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n  return (\n    <div\n      className={cn(\"flex w-full flex-col rounded-lg border\", className)}\n      {...props}\n    >\n      <div className=\"border-b px-4 py-3\">\n        <div className=\"text-sm font-medium\">{name}</div>\n      </div>\n      <div className=\"flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full\">\n        {children}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">\n                  {activeTeam.name}\n                </span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/accordion-demo.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york/ui/accordion\"\n\nexport function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other\n          components&apos; aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport function AlertDemo() {\n  return (\n    <Alert>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/alert-dialog-demo.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/new-york/ui/alert-dialog\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/new-york/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/avatar-demo.tsx",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\n\nexport function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-demo.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/breadcrumb-demo.tsx",
+      "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/calendar-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow\"\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { 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 { Switch } from \"@/registry/new-york/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/carousel-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\n\nexport function CheckboxDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <label\n        htmlFor=\"terms\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\n\nexport function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/command-demo.tsx",
+      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york/ui/command\"\n\nexport function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/context-menu-demo.tsx",
+      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/new-york/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dialog-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/dropdown-menu-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Email</DropdownMenuItem>\n                <DropdownMenuItem>Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york/ui/hover-card\"\n\nexport function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-muted-foreground\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-demo.tsx",
+      "content": "import { Input } from \"@/registry/new-york/ui/input\"\n\nexport function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/input-otp-demo.tsx",
+      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nexport function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/label-demo.tsx",
+      "content": "import { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/menubar-demo.tsx",
+      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/new-york/ui/menubar\"\n\nexport function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/navigation-menu-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/new-york/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport function NavigationMenuDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\n                      Beautifully designed components built with Radix UI and\n                      Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nconst ListItem = React.forwardRef<\n  React.ElementRef<\"a\">,\n  React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          ref={ref}\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"text-sm font-medium leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  )\n})\nListItem.displayName = \"ListItem\"\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/pagination-demo.tsx",
+      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/new-york/ui/pagination\"\n\nexport function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/popover-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/progress-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/new-york/ui/progress\"\n\nexport function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/radio-group-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/new-york/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/resizable-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/scroll-area-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/new-york/ui/scroll-area\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/select-demo.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/separator-demo.tsx",
+      "content": "import { Separator } from \"@/registry/new-york/ui/separator\"\n\nexport function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sheet-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/ui/sheet\"\n\nexport function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/registry/new-york/ui/skeleton\"\n\nexport function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/new-york/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/switch-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\nexport function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/table-demo.tsx",
+      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tabs-demo.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\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\n\nexport function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsList className=\"grid w-full grid-cols-2\">\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Account</CardTitle>\n            <CardDescription>\n              Make changes to your account here. Click save when you're done.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"username\">Username</Label>\n              <Input id=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save changes</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Password</CardTitle>\n            <CardDescription>\n              Change your password here. After saving, you'll be logged out.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"current\">Current password</Label>\n              <Input id=\"current\" type=\"password\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"new\">New password</Label>\n              <Input id=\"new\" type=\"password\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save password</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/toast\"\n\nexport function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-destructive.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-outline.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/badge-secondary.tsx",
+      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-destructive.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-ghost.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-link.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-outline.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-secondary.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/button-with-icon.tsx",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonWithIcon() {\n  return (\n    <Button>\n      <MailOpen /> Login with Email\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/skeleton-card.json b/apps/www/public/r/styles/new-york/skeleton-card.json
new file mode 100644
index 00000000000..095afce7779
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/skeleton-card.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-card",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "examples/skeleton-card.tsx",
+      "content": "import { Skeleton } from \"@/registry/new-york/ui/skeleton\"\n\nexport default function SkeletonCard() {\n  return (\n    <div className=\"flex flex-col space-y-3\">\n      <Skeleton className=\"h-[125px] w-[250px] rounded-xl\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/skeleton-demo.json b/apps/www/public/r/styles/new-york/skeleton-demo.json
new file mode 100644
index 00000000000..7a8d561e1c0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/skeleton-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "examples/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/registry/new-york/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/skeleton.json b/apps/www/public/r/styles/new-york/skeleton.json
index 7f85bdb5d93..0be9dc2528e 100644
--- a/apps/www/public/r/styles/new-york/skeleton.json
+++ b/apps/www/public/r/styles/new-york/skeleton.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "skeleton",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/skeleton.tsx",
diff --git a/apps/www/public/r/styles/new-york/slider-demo.json b/apps/www/public/r/styles/new-york/slider-demo.json
new file mode 100644
index 00000000000..ead868d00bd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/slider-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "slider"
+  ],
+  "files": [
+    {
+      "path": "examples/slider-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/new-york/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport default function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/slider.json b/apps/www/public/r/styles/new-york/slider.json
index 2dd8a2a2cd6..f7afc1b8b5a 100644
--- a/apps/www/public/r/styles/new-york/slider.json
+++ b/apps/www/public/r/styles/new-york/slider.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "slider",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-slider"
   ],
diff --git a/apps/www/public/r/styles/new-york/sonner-demo.json b/apps/www/public/r/styles/new-york/sonner-demo.json
new file mode 100644
index 00000000000..986ad5ce068
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sonner-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "examples/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sonner.json b/apps/www/public/r/styles/new-york/sonner.json
index ffb2dc69025..88ac39ce6d4 100644
--- a/apps/www/public/r/styles/new-york/sonner.json
+++ b/apps/www/public/r/styles/new-york/sonner.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "sonner",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "sonner",
     "next-themes"
diff --git a/apps/www/public/r/styles/new-york/style.json b/apps/www/public/r/styles/new-york/style.json
new file mode 100644
index 00000000000..f561eb73e3d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/style.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "type": "registry:style",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {}
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/switch-demo.json b/apps/www/public/r/styles/new-york/switch-demo.json
new file mode 100644
index 00000000000..6015f972a78
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/switch-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "examples/switch-demo.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\nexport default function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/switch-form.json b/apps/www/public/r/styles/new-york/switch-form.json
new file mode 100644
index 00000000000..58661c13ae6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/switch-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "switch",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/switch-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/new-york/ui/form\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\nconst FormSchema = z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n})\n\nexport default function SwitchForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      security_emails: true,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full space-y-6\">\n        <div>\n          <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n          <div className=\"space-y-4\">\n            <FormField\n              control={form.control}\n              name=\"marketing_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel>Marketing emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about new products, features, and more.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n            <FormField\n              control={form.control}\n              name=\"security_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel>Security emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about your account security.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                      disabled\n                      aria-readonly\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n          </div>\n        </div>\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/switch.json b/apps/www/public/r/styles/new-york/switch.json
index 1288051e5ad..5494b27da69 100644
--- a/apps/www/public/r/styles/new-york/switch.json
+++ b/apps/www/public/r/styles/new-york/switch.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "switch",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-switch"
   ],
diff --git a/apps/www/public/r/styles/new-york/table-demo.json b/apps/www/public/r/styles/new-york/table-demo.json
new file mode 100644
index 00000000000..4f7437dd623
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/table-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "table"
+  ],
+  "files": [
+    {
+      "path": "examples/table-demo.tsx",
+      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/table.json b/apps/www/public/r/styles/new-york/table.json
index 5360a4ce492..924463428eb 100644
--- a/apps/www/public/r/styles/new-york/table.json
+++ b/apps/www/public/r/styles/new-york/table.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "table",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/table.tsx",
diff --git a/apps/www/public/r/styles/new-york/tabs-demo.json b/apps/www/public/r/styles/new-york/tabs-demo.json
new file mode 100644
index 00000000000..beca2797ef8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/tabs-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "tabs"
+  ],
+  "files": [
+    {
+      "path": "examples/tabs-demo.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\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\n\nexport default function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsList className=\"grid w-full grid-cols-2\">\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Account</CardTitle>\n            <CardDescription>\n              Make changes to your account here. Click save when you're done.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"username\">Username</Label>\n              <Input id=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save changes</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Password</CardTitle>\n            <CardDescription>\n              Change your password here. After saving, you'll be logged out.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"current\">Current password</Label>\n              <Input id=\"current\" type=\"password\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"new\">New password</Label>\n              <Input id=\"new\" type=\"password\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save password</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/tabs.json b/apps/www/public/r/styles/new-york/tabs.json
index a1fd9ffaf7f..5b1ea41f34f 100644
--- a/apps/www/public/r/styles/new-york/tabs.json
+++ b/apps/www/public/r/styles/new-york/tabs.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "tabs",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-tabs"
   ],
diff --git a/apps/www/public/r/styles/new-york/textarea-demo.json b/apps/www/public/r/styles/new-york/textarea-demo.json
new file mode 100644
index 00000000000..cce1041f0ae
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/textarea-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport default function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/textarea-disabled.json b/apps/www/public/r/styles/new-york/textarea-disabled.json
new file mode 100644
index 00000000000..6bedefdcb38
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/textarea-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-disabled.tsx",
+      "content": "import { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport default function TextareaDisabled() {\n  return <Textarea placeholder=\"Type your message here.\" disabled />\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/textarea-form.json b/apps/www/public/r/styles/new-york/textarea-form.json
new file mode 100644
index 00000000000..0db96a4c086
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/textarea-form.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-form",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "form"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-form.tsx",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nconst FormSchema = z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: \"Bio must be at least 10 characters.\",\n    })\n    .max(160, {\n      message: \"Bio must not be longer than 30 characters.\",\n    }),\n})\n\nexport default function TextareaForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"bio\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Bio</FormLabel>\n              <FormControl>\n                <Textarea\n                  placeholder=\"Tell us a little bit about yourself\"\n                  className=\"resize-none\"\n                  {...field}\n                />\n              </FormControl>\n              <FormDescription>\n                You can <span>@mention</span> other users and organizations.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/textarea-with-button.json b/apps/www/public/r/styles/new-york/textarea-with-button.json
new file mode 100644
index 00000000000..3535e7df1f5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/textarea-with-button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-button",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport default function TextareaWithButton() {\n  return (\n    <div className=\"grid w-full gap-2\">\n      <Textarea placeholder=\"Type your message here.\" />\n      <Button>Send message</Button>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/textarea-with-label.json b/apps/www/public/r/styles/new-york/textarea-with-label.json
new file mode 100644
index 00000000000..98cc1c85292
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/textarea-with-label.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-label",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-label.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport default function TextareaWithLabel() {\n  return (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message\">Your message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message\" />\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/textarea-with-text.json b/apps/www/public/r/styles/new-york/textarea-with-text.json
new file mode 100644
index 00000000000..a57d94b22fe
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/textarea-with-text.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "textarea",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "examples/textarea-with-text.tsx",
+      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport default function TextareaWithText() {\n  return (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message-2\">Your Message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n      <p className=\"text-sm text-muted-foreground\">\n        Your message will be copied to the support team.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/textarea.json b/apps/www/public/r/styles/new-york/textarea.json
index 33b528dc7f1..4e5f9b73afb 100644
--- a/apps/www/public/r/styles/new-york/textarea.json
+++ b/apps/www/public/r/styles/new-york/textarea.json
@@ -1,10 +1,12 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "textarea",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/textarea.tsx",
-      "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-sm 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\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
+      "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",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/theme-daylight.json b/apps/www/public/r/styles/new-york/theme-daylight.json
index a6f4f110894..56d374c2c52 100644
--- a/apps/www/public/r/styles/new-york/theme-daylight.json
+++ b/apps/www/public/r/styles/new-york/theme-daylight.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "theme-daylight",
   "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
   "cssVars": {
     "light": {
       "background": "36 39% 88%",
diff --git a/apps/www/public/r/styles/new-york/theme-emerald.json b/apps/www/public/r/styles/new-york/theme-emerald.json
index daae3354771..dd11b1ab9e1 100644
--- a/apps/www/public/r/styles/new-york/theme-emerald.json
+++ b/apps/www/public/r/styles/new-york/theme-emerald.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "theme-emerald",
   "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
   "cssVars": {
     "light": {
       "background": "0 0% 100%",
diff --git a/apps/www/public/r/styles/new-york/theme-midnight.json b/apps/www/public/r/styles/new-york/theme-midnight.json
index af39a8a05d3..65dfce822e5 100644
--- a/apps/www/public/r/styles/new-york/theme-midnight.json
+++ b/apps/www/public/r/styles/new-york/theme-midnight.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "theme-midnight",
   "type": "registry:theme",
+  "author": "shadcn (https://ui.shadcn.com)",
   "cssVars": {
     "light": {
       "background": "240 5% 6%",
diff --git a/apps/www/public/r/styles/new-york/toast-demo.json b/apps/www/public/r/styles/new-york/toast-demo.json
new file mode 100644
index 00000000000..0a68ab0928c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toast-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-demo.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/toast\"\n\nexport default function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toast-destructive.json b/apps/www/public/r/styles/new-york/toast-destructive.json
new file mode 100644
index 00000000000..aa3fd5fde32
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toast-destructive.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-destructive",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-destructive.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/toast\"\n\nexport default function ToastDestructive() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          variant: \"destructive\",\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toast-simple.json b/apps/www/public/r/styles/new-york/toast-simple.json
new file mode 100644
index 00000000000..246e45c9e6e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toast-simple.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-simple",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-simple.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ToastSimple() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          description: \"Your message has been sent.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toast-with-action.json b/apps/www/public/r/styles/new-york/toast-with-action.json
new file mode 100644
index 00000000000..1cd49357a47
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toast-with-action.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-action",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-action.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/toast\"\n\nexport default function ToastWithAction() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toast-with-title.json b/apps/www/public/r/styles/new-york/toast-with-title.json
new file mode 100644
index 00000000000..97433b3d0a4
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toast-with-title.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast-with-title",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "examples/toast-with-title.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ToastWithTitle() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Uh oh! Something went wrong.\",\n          description: \"There was a problem with your request.\",\n        })\n      }}\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toast.json b/apps/www/public/r/styles/new-york/toast.json
index 652407b812f..cee1ff52da0 100644
--- a/apps/www/public/r/styles/new-york/toast.json
+++ b/apps/www/public/r/styles/new-york/toast.json
@@ -1,24 +1,29 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "toast",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-toast"
   ],
   "files": [
     {
       "path": "ui/toast.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Viewport\n    ref={ref}\n    className={cn(\n      \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n      className\n    )}\n    {...props}\n  />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n  \"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n  {\n    variants: {\n      variant: {\n        default: \"border bg-background text-foreground\",\n        destructive:\n          \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Toast = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n  return (\n    <ToastPrimitives.Root\n      ref={ref}\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Action>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Action\n    ref={ref}\n    className={cn(\n      \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive\",\n      className\n    )}\n    {...props}\n  />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Close>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Close\n    ref={ref}\n    className={cn(\n      \"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <Cross2Icon className=\"h-4 w-4\" />\n  </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Title>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Title\n    ref={ref}\n    className={cn(\"text-sm font-semibold [&+div]:text-xs\", className)}\n    {...props}\n  />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Description>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Description\n    ref={ref}\n    className={cn(\"text-sm opacity-90\", className)}\n    {...props}\n  />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n  type ToastProps,\n  type ToastActionElement,\n  ToastProvider,\n  ToastViewport,\n  Toast,\n  ToastTitle,\n  ToastDescription,\n  ToastClose,\n  ToastAction,\n}\n",
-      "type": "registry:ui"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Viewport\n    ref={ref}\n    className={cn(\n      \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n      className\n    )}\n    {...props}\n  />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n  \"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n  {\n    variants: {\n      variant: {\n        default: \"border bg-background text-foreground\",\n        destructive:\n          \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Toast = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n  return (\n    <ToastPrimitives.Root\n      ref={ref}\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Action>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Action\n    ref={ref}\n    className={cn(\n      \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive\",\n      className\n    )}\n    {...props}\n  />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Close>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Close\n    ref={ref}\n    className={cn(\n      \"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"h-4 w-4\" />\n  </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Title>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Title\n    ref={ref}\n    className={cn(\"text-sm font-semibold [&+div]:text-xs\", className)}\n    {...props}\n  />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Description>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Description\n    ref={ref}\n    className={cn(\"text-sm opacity-90\", className)}\n    {...props}\n  />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n  type ToastProps,\n  type ToastActionElement,\n  ToastProvider,\n  ToastViewport,\n  Toast,\n  ToastTitle,\n  ToastDescription,\n  ToastClose,\n  ToastAction,\n}\n",
+      "type": "registry:ui",
+      "target": ""
     },
     {
       "path": "hooks/use-toast.ts",
       "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/new-york/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { useToast, toast }\n",
-      "type": "registry:hook"
+      "type": "registry:hook",
+      "target": ""
     },
     {
       "path": "ui/toaster.tsx",
       "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from \"@/registry/new-york/ui/toast\"\n\nexport function Toaster() {\n  const { toasts } = useToast()\n\n  return (\n    <ToastProvider>\n      {toasts.map(function ({ id, title, description, action, ...props }) {\n        return (\n          <Toast key={id} {...props}>\n            <div className=\"grid gap-1\">\n              {title && <ToastTitle>{title}</ToastTitle>}\n              {description && (\n                <ToastDescription>{description}</ToastDescription>\n              )}\n            </div>\n            {action}\n            <ToastClose />\n          </Toast>\n        )\n      })}\n      <ToastViewport />\n    </ToastProvider>\n  )\n}\n",
-      "type": "registry:ui"
+      "type": "registry:ui",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-demo.json b/apps/www/public/r/styles/new-york/toggle-demo.json
new file mode 100644
index 00000000000..d3ecc1a13d0
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-disabled.json b/apps/www/public/r/styles/new-york/toggle-disabled.json
new file mode 100644
index 00000000000..53b807abc2c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-group-demo.json b/apps/www/public/r/styles/new-york/toggle-group-demo.json
new file mode 100644
index 00000000000..f7e6be3e760
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-group-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-demo.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-group-disabled.json b/apps/www/public/r/styles/new-york/toggle-group-disabled.json
new file mode 100644
index 00000000000..d76c257a709
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-group-disabled.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-disabled",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-disabled.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" disabled>\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-group-lg.json b/apps/www/public/r/styles/new-york/toggle-group-lg.json
new file mode 100644
index 00000000000..bbc660f0cbe
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-group-lg.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-lg",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-lg.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" size=\"lg\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-group-outline.json b/apps/www/public/r/styles/new-york/toggle-group-outline.json
new file mode 100644
index 00000000000..bdf8147b091
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-group-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-outline.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"outline\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-group-single.json b/apps/www/public/r/styles/new-york/toggle-group-single.json
new file mode 100644
index 00000000000..2293a03ebae
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-group-single.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-single",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-single.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"single\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-group-sm.json b/apps/www/public/r/styles/new-york/toggle-group-sm.json
new file mode 100644
index 00000000000..da7100ecb06
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-group-sm.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-sm",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-group-sm.tsx",
+      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"single\" size=\"sm\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-group.json b/apps/www/public/r/styles/new-york/toggle-group.json
index 4ea4eb6707e..09f148971d6 100644
--- a/apps/www/public/r/styles/new-york/toggle-group.json
+++ b/apps/www/public/r/styles/new-york/toggle-group.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "toggle-group",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-toggle-group"
   ],
diff --git a/apps/www/public/r/styles/new-york/toggle-lg.json b/apps/www/public/r/styles/new-york/toggle-lg.json
new file mode 100644
index 00000000000..3bbd6af6c7c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-lg.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-lg",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-lg.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleLg() {\n  return (\n    <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-outline.json b/apps/www/public/r/styles/new-york/toggle-outline.json
new file mode 100644
index 00000000000..319d334fef1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-outline.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-outline",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-sm.json b/apps/www/public/r/styles/new-york/toggle-sm.json
new file mode 100644
index 00000000000..8a1292a43b8
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-sm.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-sm",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-sm.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleSm() {\n  return (\n    <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-with-text.json b/apps/www/public/r/styles/new-york/toggle-with-text.json
new file mode 100644
index 00000000000..b2e4dcbaabb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/toggle-with-text.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-with-text",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "examples/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle.json b/apps/www/public/r/styles/new-york/toggle.json
index b2a0c6af093..d04d330fe99 100644
--- a/apps/www/public/r/styles/new-york/toggle.json
+++ b/apps/www/public/r/styles/new-york/toggle.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "toggle",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-toggle"
   ],
   "files": [
     {
       "path": "ui/toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-3\",\n        sm: \"h-8 px-2\",\n        lg: \"h-10 px-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-2 min-w-9\",\n        sm: \"h-8 px-1.5 min-w-8\",\n        lg: \"h-10 px-2.5 min-w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/tooltip-demo.json b/apps/www/public/r/styles/new-york/tooltip-demo.json
new file mode 100644
index 00000000000..b889359b3ea
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/tooltip-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "examples/tooltip-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport default function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/tooltip.json b/apps/www/public/r/styles/new-york/tooltip.json
index fa164912929..57e3f906607 100644
--- a/apps/www/public/r/styles/new-york/tooltip.json
+++ b/apps/www/public/r/styles/new-york/tooltip.json
@@ -1,13 +1,15 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "tooltip",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-tooltip"
   ],
   "files": [
     {
       "path": "ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]\",\n        className\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/typography-blockquote.json b/apps/www/public/r/styles/new-york/typography-blockquote.json
new file mode 100644
index 00000000000..7afcb802cdf
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-blockquote.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-blockquote",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-blockquote.tsx",
+      "content": "export default function TypographyBlockquote() {\n  return (\n    <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n      they should pay for the privilege.\"\n    </blockquote>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-demo.json b/apps/www/public/r/styles/new-york/typography-demo.json
new file mode 100644
index 00000000000..c5ae2e8b977
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-demo.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-demo",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-demo.tsx",
+      "content": "export default function TypographyDemo() {\n  return (\n    <div>\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n        The Joke Tax Chronicles\n      </h1>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </p>\n      <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n        The King's Plan\n      </h2>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king thought long and hard, and finally came up with{\" \"}\n        <a\n          href=\"#\"\n          className=\"font-medium text-primary underline underline-offset-4\"\n        >\n          a brilliant plan\n        </a>\n        : he would tax the jokes in the kingdom.\n      </p>\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n        \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n        that they should pay for the privilege.\"\n      </blockquote>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The Joke Tax\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king's subjects were not amused. They grumbled and complained, but\n        the king was firm:\n      </p>\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king's\n        foolishness get him down: a court jester named Jokester.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        Jokester's Revolt\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king's pillow, in his soup,\n        even in the royal toilet. The king was furious, but he couldn't seem to\n        stop Jokester.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn't help but laugh. And\n        once they started laughing, they couldn't stop.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The People's Rebellion\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </p>\n      <div className=\"my-6 w-full overflow-y-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                King's Treasury\n              </th>\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                People's happiness\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Empty\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Overflowing\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Modest\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Satisfied\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Full\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Ecstatic\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-h1.json b/apps/www/public/r/styles/new-york/typography-h1.json
new file mode 100644
index 00000000000..0c282dda464
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-h1.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h1",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h1.tsx",
+      "content": "export default function TypographyH1() {\n  return (\n    <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      Taxing Laughter: The Joke Tax Chronicles\n    </h1>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-h2.json b/apps/www/public/r/styles/new-york/typography-h2.json
new file mode 100644
index 00000000000..eb42b1c4142
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-h2.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h2",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h2.tsx",
+      "content": "export default function TypographyH2() {\n  return (\n    <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n      The People of the Kingdom\n    </h2>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-h3.json b/apps/www/public/r/styles/new-york/typography-h3.json
new file mode 100644
index 00000000000..946cf24167a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-h3.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h3",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h3.tsx",
+      "content": "export default function TypographyH3() {\n  return (\n    <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-h4.json b/apps/www/public/r/styles/new-york/typography-h4.json
new file mode 100644
index 00000000000..bbd61e8a255
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-h4.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-h4",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-h4.tsx",
+      "content": "export default function TypographyH4() {\n  return (\n    <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n      People stopped telling jokes\n    </h4>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-inline-code.json b/apps/www/public/r/styles/new-york/typography-inline-code.json
new file mode 100644
index 00000000000..edcf52f8b4a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-inline-code.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-inline-code",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-inline-code.tsx",
+      "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n      @radix-ui/react-alert-dialog\n    </code>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-large.json b/apps/www/public/r/styles/new-york/typography-large.json
new file mode 100644
index 00000000000..fba10786a01
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-large.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-large",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-large.tsx",
+      "content": "export default function TypographyLarge() {\n  return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-lead.json b/apps/www/public/r/styles/new-york/typography-lead.json
new file mode 100644
index 00000000000..c38d1ef4a04
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-lead.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-lead",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-lead.tsx",
+      "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-xl text-muted-foreground\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-list.json b/apps/www/public/r/styles/new-york/typography-list.json
new file mode 100644
index 00000000000..397d847ec2b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-list.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-list",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-list.tsx",
+      "content": "export default function TypographyList() {\n  return (\n    <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-muted.json b/apps/www/public/r/styles/new-york/typography-muted.json
new file mode 100644
index 00000000000..786c2904577
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-muted.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-muted",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-muted.tsx",
+      "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-p.json b/apps/www/public/r/styles/new-york/typography-p.json
new file mode 100644
index 00000000000..eb9a367fb1a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-p.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-p",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-p.tsx",
+      "content": "export default function TypographyP() {\n  return (\n    <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error of\n      his ways and repealed the joke tax.\n    </p>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-small.json b/apps/www/public/r/styles/new-york/typography-small.json
new file mode 100644
index 00000000000..f9cebba93fd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-small.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-small",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-small.tsx",
+      "content": "export default function TypographySmall() {\n  return (\n    <small className=\"text-sm font-medium leading-none\">Email address</small>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-table.json b/apps/www/public/r/styles/new-york/typography-table.json
new file mode 100644
index 00000000000..af19b2b08f1
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/typography-table.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typography-table",
+  "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "files": [
+    {
+      "path": "examples/typography-table.tsx",
+      "content": "export default function TypographyTable() {\n  return (\n    <div className=\"my-6 w-full overflow-y-auto\">\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              King's Treasury\n            </th>\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Empty\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Overflowing\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Modest\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Satisfied\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Full\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/use-mobile.json b/apps/www/public/r/styles/new-york/use-mobile.json
index a6f06c518ea..50fc54a1982 100644
--- a/apps/www/public/r/styles/new-york/use-mobile.json
+++ b/apps/www/public/r/styles/new-york/use-mobile.json
@@ -1,11 +1,14 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "use-mobile",
   "type": "registry:hook",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "hooks/use-mobile.tsx",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return isMobile\n}\n",
-      "type": "registry:hook"
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "type": "registry:hook",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/use-toast.json b/apps/www/public/r/styles/new-york/use-toast.json
index e6799f3d61d..f216cba4243 100644
--- a/apps/www/public/r/styles/new-york/use-toast.json
+++ b/apps/www/public/r/styles/new-york/use-toast.json
@@ -1,11 +1,14 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "use-toast",
   "type": "registry:hook",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "hooks/use-toast.ts",
       "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/new-york/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { useToast, toast }\n",
-      "type": "registry:hook"
+      "type": "registry:hook",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/utils.json b/apps/www/public/r/styles/new-york/utils.json
index 987ce3b08f1..0af1ec0d616 100644
--- a/apps/www/public/r/styles/new-york/utils.json
+++ b/apps/www/public/r/styles/new-york/utils.json
@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "utils",
   "type": "registry:lib",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "clsx",
     "tailwind-merge"
@@ -9,7 +11,8 @@
     {
       "path": "lib/utils.ts",
       "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
-      "type": "registry:lib"
+      "type": "registry:lib",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-login-01-dark.png b/apps/www/public/r/styles/new-york/v0-login-01-dark.png
new file mode 100644
index 00000000000..a919e7811c2
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-login-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-login-01-light.png b/apps/www/public/r/styles/new-york/v0-login-01-light.png
new file mode 100644
index 00000000000..99e01a47d44
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-login-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-login-01.json b/apps/www/public/r/styles/new-york/v0-login-01.json
new file mode 100644
index 00000000000..f01c3f77bb6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-login-01.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-login-01",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "internal/login-01.tsx",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-screen w-full items-center justify-center px-4\">\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\n                  href=\"#\"\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        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-01-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-01-dark.png
new file mode 100644
index 00000000000..7b7cf8fa24c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-01-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-01-light.png
new file mode 100644
index 00000000000..d59e52ad973
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-01.json b/apps/www/public/r/styles/new-york/v0-sidebar-01.json
new file mode 100644
index 00000000000..9de56de16bd
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-01.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-01",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-01.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <GalleryVerticalEnd className=\"size-4\" />\n                    </div>\n                    <div className=\"flex flex-col gap-0.5 leading-none\">\n                      <span className=\"font-semibold\">Documentation</span>\n                      <span className=\"\">v{selectedVersion}</span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n                >\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <Check className=\"ml-auto\" />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {/* We create a SidebarGroup for each parent. */}\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((item) => (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton asChild isActive={item.isActive}>\n                        <a href={item.url}>{item.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:component",
+      "target": "components/sidebar-01.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-02-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-02-dark.png
new file mode 100644
index 00000000000..e92a167de03
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-02-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-02-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-02-light.png
new file mode 100644
index 00000000000..287bb936ca3
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-02-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-02.json b/apps/www/public/r/styles/new-york/v0-sidebar-02.json
new file mode 100644
index 00000000000..804787539b9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-02.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-02",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-02.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  GalleryVerticalEnd,\n  Search,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <GalleryVerticalEnd className=\"size-4\" />\n                    </div>\n                    <div className=\"flex flex-col gap-0.5 leading-none\">\n                      <span className=\"font-semibold\">Documentation</span>\n                      <span className=\"\">v{selectedVersion}</span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width]\"\n                  align=\"start\"\n                >\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <Check className=\"ml-auto\" />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent className=\"gap-0\">\n          {/* We create a collapsible SidebarGroup for each parent. */}\n          {data.navMain.map((item) => (\n            <Collapsible\n              key={item.title}\n              title={item.title}\n              defaultOpen\n              className=\"group/collapsible\"\n            >\n              <SidebarGroup>\n                <SidebarGroupLabel\n                  asChild\n                  className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <CollapsibleTrigger>\n                    {item.title}{\" \"}\n                    <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                  </CollapsibleTrigger>\n                </SidebarGroupLabel>\n                <CollapsibleContent>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      {item.items.map((item) => (\n                        <SidebarMenuItem key={item.title}>\n                          <SidebarMenuButton asChild isActive={item.isActive}>\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </CollapsibleContent>\n              </SidebarGroup>\n            </Collapsible>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-03-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-03-dark.png
new file mode 100644
index 00000000000..f8321378c15
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-03-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-03-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-03-light.png
new file mode 100644
index 00000000000..77643fccb73
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-03-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-03.json b/apps/www/public/r/styles/new-york/v0-sidebar-03.json
new file mode 100644
index 00000000000..ee5bd16496f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-03.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-03",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-03.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-04-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-04-dark.png
new file mode 100644
index 00000000000..cfb5b162016
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-04-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-04-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-04-light.png
new file mode 100644
index 00000000000..07b0fa47a45
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-04-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-04.json b/apps/www/public/r/styles/new-york/v0-sidebar-04.json
new file mode 100644
index 00000000000..667d7352121
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-04.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-04",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-04.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu className=\"gap-2\">\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-05-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-05-dark.png
new file mode 100644
index 00000000000..893ef968f3e
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-05-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-05-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-05-light.png
new file mode 100644
index 00000000000..a3a88c38e8c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-05-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-05.json b/apps/www/public/r/styles/new-york/v0-sidebar-05.json
new file mode 100644
index 00000000000..94c9be19b61
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-05.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-05",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-05.tsx",
+      "content": "import { GalleryVerticalEnd, Minus, Plus, Search } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Component() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <Search className=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item, index) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={index === 1}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger asChild>\n                      <SidebarMenuButton>\n                        {item.title}{\" \"}\n                        <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                        <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                      </SidebarMenuButton>\n                    </CollapsibleTrigger>\n                    {item.items?.length ? (\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((item) => (\n                            <SidebarMenuSubItem key={item.title}>\n                              <SidebarMenuSubButton\n                                asChild\n                                isActive={item.isActive}\n                              >\n                                <a href={item.url}>{item.title}</a>\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-06-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-06-dark.png
new file mode 100644
index 00000000000..0115ddb1200
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-06-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-06-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-06-light.png
new file mode 100644
index 00000000000..f36a857718f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-06-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-06.json b/apps/www/public/r/styles/new-york/v0-sidebar-06.json
new file mode 100644
index 00000000000..81e033e09bb
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-06.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-06",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-06.tsx",
+      "content": "\"use client\"\n\nimport { GalleryVerticalEnd, MoreHorizontal } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd className=\"size-4\" />\n                  </div>\n                  <div className=\"flex flex-col gap-0.5 leading-none\">\n                    <span className=\"font-semibold\">Documentation</span>\n                    <span className=\"\">v1.0.0</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title} <MoreHorizontal className=\"ml-auto\" />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent\n                        side=\"bottom\"\n                        align=\"end\"\n                        className=\"min-w-56 rounded-lg\"\n                      >\n                        {item.items.map((item) => (\n                          <DropdownMenuItem asChild key={item.title}>\n                            <a href={item.url}>{item.title}</a>\n                          </DropdownMenuItem>\n                        ))}\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <div className=\"p-1\">\n            <Card className=\"shadow-none\">\n              <form>\n                <CardHeader className=\"p-4 pb-0\">\n                  <CardTitle className=\"text-sm\">\n                    Subscribe to our newsletter\n                  </CardTitle>\n                  <CardDescription>\n                    Opt-in to receive updates and news about the sidebar.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent className=\"grid gap-2.5 p-4\">\n                  <SidebarInput type=\"email\" placeholder=\"Email\" />\n                  <Button\n                    className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n                    size=\"sm\"\n                  >\n                    Subscribe\n                  </Button>\n                </CardContent>\n              </form>\n            </Card>\n          </div>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-07-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-07-dark.png
new file mode 100644
index 00000000000..43a9fb16d7a
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-07-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-07-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-07-light.png
new file mode 100644
index 00000000000..e66a7e58f9f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-07-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-07.json b/apps/www/public/r/styles/new-york/v0-sidebar-07.json
new file mode 100644
index 00000000000..c17bb33d270
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-07.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-07",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-07.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport default function Page() {\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <activeTeam.logo className=\"size-4\" />\n                    </div>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side=\"bottom\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                    Teams\n                  </DropdownMenuLabel>\n                  {data.teams.map((team, index) => (\n                    <DropdownMenuItem\n                      key={team.name}\n                      onClick={() => setActiveTeam(team)}\n                      className=\"gap-2 p-2\"\n                    >\n                      <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                        <team.logo className=\"size-4 shrink-0\" />\n                      </div>\n                      {team.name}\n                      <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                    </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                    <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                      <Plus className=\"size-4\" />\n                    </div>\n                    <div className=\"font-medium text-muted-foreground\">\n                      Add team\n                    </div>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger asChild>\n                      <SidebarMenuButton tooltip={item.title}>\n                        {item.icon && <item.icon />}\n                        <span>{item.title}</span>\n                        <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                      </SidebarMenuButton>\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>\n                                <span>{subItem.title}</span>\n                              </a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      <item.icon />\n                      <span>{item.name}</span>\n                    </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuAction showOnHover>\n                        <MoreHorizontal />\n                        <span className=\"sr-only\">More</span>\n                      </SidebarMenuAction>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      className=\"w-48 rounded-lg\"\n                      side=\"bottom\"\n                      align=\"end\"\n                    >\n                      <DropdownMenuItem>\n                        <Folder className=\"text-muted-foreground\" />\n                        <span>View Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Forward className=\"text-muted-foreground\" />\n                        <span>Share Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <Trash2 className=\"text-muted-foreground\" />\n                        <span>Delete Project</span>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </SidebarMenuItem>\n              ))}\n              <SidebarMenuItem>\n                <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar className=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side=\"bottom\"\n                  align=\"end\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                    <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <Sparkles />\n                      Upgrade to Pro\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <BadgeCheck />\n                      Account\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <CreditCard />\n                      Billing\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <Bell />\n                      Notifications\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <LogOut />\n                    Log out\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-08-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-08-dark.png
new file mode 100644
index 00000000000..6de2042e8e0
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-08-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-08-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-08-light.png
new file mode 100644
index 00000000000..8f36ab1d856
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-08-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-08.json b/apps/www/public/r/styles/new-york/v0-sidebar-08.json
new file mode 100644
index 00000000000..a786f68a4ba
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-08.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-08",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-08.tsx",
+      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Frame,\n  LifeBuoy,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n  Settings2,\n  Share,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton asChild tooltip={item.title}>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <ChevronRight />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items?.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      <item.icon />\n                      <span>{item.name}</span>\n                    </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuAction showOnHover>\n                        <MoreHorizontal />\n                        <span className=\"sr-only\">More</span>\n                      </SidebarMenuAction>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      className=\"w-48\"\n                      side=\"bottom\"\n                      align=\"end\"\n                    >\n                      <DropdownMenuItem>\n                        <Folder className=\"text-muted-foreground\" />\n                        <span>View Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Share className=\"text-muted-foreground\" />\n                        <span>Share Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <Trash2 className=\"text-muted-foreground\" />\n                        <span>Delete Project</span>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </SidebarMenuItem>\n              ))}\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <MoreHorizontal />\n                  <span>More</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar className=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  side=\"bottom\"\n                  align=\"end\"\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"p-0 font-normal\">\n                    <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <Sparkles />\n                      Upgrade to Pro\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <BadgeCheck />\n                      Account\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <CreditCard />\n                      Billing\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <Bell />\n                      Notifications\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <LogOut />\n                    Log out\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-09-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-09-dark.png
new file mode 100644
index 00000000000..80833544957
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-09-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-09-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-09-light.png
new file mode 100644
index 00000000000..7b2e848f66c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-09-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-09.json b/apps/www/public/r/styles/new-york/v0-sidebar-09.json
new file mode 100644
index 00000000000..f491e5bda3a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-09.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-09",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-09.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveX,\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  File,\n  Inbox,\n  LogOut,\n  Send,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\nimport { Switch } from \"@/components/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-semibold\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-10-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-10-dark.png
new file mode 100644
index 00000000000..9ac92d8e32b
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-10-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-10-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-10-light.png
new file mode 100644
index 00000000000..4ba7a53a646
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-10-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-10.json b/apps/www/public/r/styles/new-york/v0-sidebar-10.json
new file mode 100644
index 00000000000..023503a20d2
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-10.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-10",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-10.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowUpRight,\n  AudioWaveform,\n  Bell,\n  Blocks,\n  Calendar,\n  ChevronDown,\n  ChevronRight,\n  Command,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  Home,\n  Inbox,\n  LineChart,\n  Link,\n  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  Star,\n  StarOff,\n  Trash,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n  actions: [\n    [\n      {\n        label: \"Customize Page\",\n        icon: Settings2,\n      },\n      {\n        label: \"Turn into wiki\",\n        icon: FileText,\n      },\n    ],\n    [\n      {\n        label: \"Copy Link\",\n        icon: Link,\n      },\n      {\n        label: \"Duplicate\",\n        icon: Copy,\n      },\n      {\n        label: \"Move to\",\n        icon: CornerUpRight,\n      },\n      {\n        label: \"Move to Trash\",\n        icon: Trash2,\n      },\n    ],\n    [\n      {\n        label: \"Undo\",\n        icon: CornerUpLeft,\n      },\n      {\n        label: \"View analytics\",\n        icon: LineChart,\n      },\n      {\n        label: \"Version History\",\n        icon: GalleryVerticalEnd,\n      },\n      {\n        label: \"Show delete pages\",\n        icon: Trash,\n      },\n      {\n        label: \"Notifications\",\n        icon: Bell,\n      },\n    ],\n    [\n      {\n        label: \"Import\",\n        icon: ArrowUp,\n      },\n      {\n        label: \"Export\",\n        icon: ArrowDown,\n      },\n    ],\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions actions={data.actions} />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction NavActions({\n  actions,\n}: {\n  actions: {\n    label: string\n    icon: LucideIcon\n  }[][]\n}) {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {actions.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n\nfunction NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nfunction NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nfunction NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-11-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-11-dark.png
new file mode 100644
index 00000000000..fe7240b71be
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-11-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-11-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-11-light.png
new file mode 100644
index 00000000000..abd19a6a76c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-11-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-11.json b/apps/www/public/r/styles/new-york/v0-sidebar-11.json
new file mode 100644
index 00000000000..5802b1f6882
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-11.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-11",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-11.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <File />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Tree({ item }: { item: string | any[] }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <File />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton>\n            <ChevronRight className=\"transition-transform\" />\n            <Folder />\n            {name}\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-12-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-12-dark.png
new file mode 100644
index 00000000000..9d6b6164c3c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-12-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-12-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-12-light.png
new file mode 100644
index 00000000000..b1fac8c4cf2
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-12-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-12.json b/apps/www/public/r/styles/new-york/v0-sidebar-12.json
new file mode 100644
index 00000000000..f8e7fafab62
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-12.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-12",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-12.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BadgeCheck,\n  Bell,\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Plus,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n\nfunction DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-13-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-13-dark.png
new file mode 100644
index 00000000000..34c2606f327
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-13-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-13-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-13-light.png
new file mode 100644
index 00000000000..cb5efd33e6a
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-13-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-13.json b/apps/www/public/r/styles/new-york/v0-sidebar-13.json
new file mode 100644
index 00000000000..31b570c8d9b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-13.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-13",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-13.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/components/ui/sidebar\"\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n\nfunction SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-14-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-14-dark.png
new file mode 100644
index 00000000000..ccbf36c07c5
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-14-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-14-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-14-light.png
new file mode 100644
index 00000000000..d19f20508a4
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-14-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-14.json b/apps/www/public/r/styles/new-york/v0-sidebar-14.json
new file mode 100644
index 00000000000..55b512fc163
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-14.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-14",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-14.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n\nfunction AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-15-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-15-dark.png
new file mode 100644
index 00000000000..dc7d52abbdf
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-15-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-15-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-15-light.png
new file mode 100644
index 00000000000..6b89b39681d
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-15-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-15.json b/apps/www/public/r/styles/new-york/v0-sidebar-15.json
new file mode 100644
index 00000000000..e46c60f1da2
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-15.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "v0-sidebar-15",
+  "type": "registry:internal",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "internal/sidebar-15.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpRight,\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  Blocks,\n  CalendarIcon,\n  Check,\n  ChevronDown,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Home,\n  Inbox,\n  Link,\n  LogOut,\n  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  StarOff,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst sidebarLeftData = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: CalendarIcon,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\n// This is sample data.\nconst sidebarRightData = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n\nfunction SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={sidebarLeftData.teams} />\n        <NavMain items={sidebarLeftData.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={sidebarLeftData.favorites} />\n        <NavWorkspaces workspaces={sidebarLeftData.workspaces} />\n        <NavSecondary\n          items={sidebarLeftData.navSecondary}\n          className=\"mt-auto\"\n        />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nfunction SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={sidebarRightData.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={sidebarRightData.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n\nfunction Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n\nfunction DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nfunction NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n\nfunction NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nfunction NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nfunction TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:internal",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-16.json b/apps/www/public/r/styles/new-york/v0-sidebar-16.json
new file mode 100644
index 00000000000..649658c0552
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-16.json
@@ -0,0 +1,23 @@
+{
+  "name": "v0-sidebar-16",
+  "type": "registry:block",
+  "description": "An inset sidebar with site header navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "navigation-menu",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "v0/sidebar-16.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport {\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Frame,\n  LifeBuoy,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n  Settings2,\n  Share,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\nconst HEADER_HEIGHT = \"4rem\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function Page() {\n  const [open, setOpen] = React.useState(true)\n  const { isMobile } = useSidebar()\n\n  return (\n    <div\n      style={\n        {\n          \"--header-height\": HEADER_HEIGHT,\n        } as React.CSSProperties\n      }\n    >\n      <header className=\"sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20\">\n        <div className=\"flex items-center gap-2 w-full\">\n          <Button\n            className=\"hidden md:flex\"\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => setOpen(!open)}\n          >\n            <Sidebar />\n          </Button>\n\n          <div className=\"mx-auto flex items-center gap-2\">\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <Command className=\"size-4\" />\n            </div>\n            <Separator orientation=\"vertical\" className=\"ml-4 h-4\" />\n            <NavigationMenu>\n              <NavigationMenuList>\n                <NavigationMenuItem>\n                  <NavigationMenuTrigger className=\"bg-sidebar\">\n                    Getting started\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                      <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                          <a\n                            className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                            href=\"/\"\n                          >\n                            <Icons.logo className=\"h-6 w-6\" />\n                            <div className=\"mb-2 mt-4 text-lg font-medium\">\n                              shadcn/ui\n                            </div>\n                            <p className=\"text-sm leading-tight text-muted-foreground\">\n                              Beautifully designed components built with Radix\n                              UI and Tailwind CSS.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Introduction\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              Re-usable components built using Radix UI and\n                              Tailwind CSS.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Installation\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              How to install dependencies and structure your\n                              app.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Typography\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              Styles for headings, paragraphs, lists...etc\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                  <NavigationMenuTrigger className=\"bg-sidebar\">\n                    Components\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                      {components.map((component) => (\n                        <li>\n                          <NavigationMenuLink key={component.title} asChild>\n                            <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                              <div className=\"text-sm font-medium leading-none\">\n                                {component.title}\n                              </div>\n                              <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                                {component.description}\n                              </p>\n                            </a>\n                          </NavigationMenuLink>\n                        </li>\n                      ))}\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                  <Link href=\"/docs\" legacyBehavior passHref>\n                    <NavigationMenuLink\n                      className={cn(navigationMenuTriggerStyle(), \"bg-sidebar\")}\n                    >\n                      Documentation\n                    </NavigationMenuLink>\n                  </Link>\n                </NavigationMenuItem>\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n      </header>\n      <SidebarProvider open={open} onOpenChange={setOpen}>\n        <Sidebar\n          className=\"top-[--header-height] pb-[--header-height]\"\n          variant=\"inset\"\n        >\n          <SidebarHeader>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton size=\"lg\" asChild>\n                  <a href=\"#\">\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <Command className=\"size-4\" />\n                    </div>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">Acme Inc</span>\n                      <span className=\"truncate text-xs\">Enterprise</span>\n                    </div>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarHeader>\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupLabel>Platform</SidebarGroupLabel>\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <Collapsible\n                    key={item.title}\n                    asChild\n                    defaultOpen={item.isActive}\n                  >\n                    <SidebarMenuItem>\n                      <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                          <item.icon />\n                          <span>{item.title}</span>\n                        </a>\n                      </SidebarMenuButton>\n                      {item.items?.length ? (\n                        <>\n                          <CollapsibleTrigger asChild>\n                            <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                              <ChevronRight />\n                              <span className=\"sr-only\">Toggle</span>\n                            </SidebarMenuAction>\n                          </CollapsibleTrigger>\n                          <CollapsibleContent>\n                            <SidebarMenuSub>\n                              {item.items?.map((subItem) => (\n                                <SidebarMenuSubItem key={subItem.title}>\n                                  <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                      <span>{subItem.title}</span>\n                                    </a>\n                                  </SidebarMenuSubButton>\n                                </SidebarMenuSubItem>\n                              ))}\n                            </SidebarMenuSub>\n                          </CollapsibleContent>\n                        </>\n                      ) : null}\n                    </SidebarMenuItem>\n                  </Collapsible>\n                ))}\n              </SidebarMenu>\n            </SidebarGroup>\n            <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n              <SidebarGroupLabel>Projects</SidebarGroupLabel>\n              <SidebarMenu>\n                {data.projects.map((item) => (\n                  <SidebarMenuItem key={item.name}>\n                    <SidebarMenuButton asChild>\n                      <a href={item.url}>\n                        <item.icon />\n                        <span>{item.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                          <MoreHorizontal />\n                          <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                      >\n                        <DropdownMenuItem>\n                          <Folder className=\"text-muted-foreground\" />\n                          <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <Share className=\"text-muted-foreground\" />\n                          <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                          <Trash2 className=\"text-muted-foreground\" />\n                          <span>Delete Project</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </SidebarMenuItem>\n                ))}\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <MoreHorizontal />\n                    <span>More</span>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroup>\n            <SidebarGroup className=\"mt-auto\">\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {data.navSecondary.map((item) => (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                          <item.icon />\n                          <span>{item.title}</span>\n                        </a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n          <SidebarFooter>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                    >\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                      <ChevronsUpDown className=\"ml-auto size-4\" />\n                    </SidebarMenuButton>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent\n                    className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                    side={isMobile ? \"bottom\" : \"right\"}\n                    align=\"end\"\n                    sideOffset={4}\n                  >\n                    <DropdownMenuLabel className=\"p-0 font-normal\">\n                      <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                        <Avatar className=\"h-8 w-8 rounded-lg\">\n                          <AvatarImage\n                            src={data.user.avatar}\n                            alt={data.user.name}\n                          />\n                          <AvatarFallback className=\"rounded-lg\">\n                            CN\n                          </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                          <span className=\"truncate font-semibold\">\n                            {data.user.name}\n                          </span>\n                          <span className=\"truncate text-xs\">\n                            {data.user.email}\n                          </span>\n                        </div>\n                      </div>\n                    </DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                      </DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                      </DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <LogOut />\n                      Log out\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarFooter>\n        </Sidebar>\n\n        <SidebarInset>\n          <header className=\" flex shrink-0 items-center gap-2 border-b py-2\">\n            <div className=\"flex items-center gap-2 px-4 py-2\">\n              <div className=\"flex md:hidden items-center gap-2\">\n                <SidebarTrigger />\n                <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n              </div>\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem className=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Building Your Application\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator className=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div className=\"flex flex-1 flex-col gap-4 p-4\">\n            <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            </div>\n            <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n          </div>\n        </SidebarInset>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:block",
+      "target": "components/sidebar-16.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/registry.json b/apps/www/public/registry.json
new file mode 100644
index 00000000000..ce32326b04e
--- /dev/null
+++ b/apps/www/public/registry.json
@@ -0,0 +1,136 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string"
+    },
+    "type": {
+      "type": "string",
+      "enum": [
+        "registry:lib",
+        "registry:block",
+        "registry:component",
+        "registry:ui",
+        "registry:hook",
+        "registry:theme",
+        "registry:page",
+        "registry:file"
+      ]
+    },
+    "description": {
+      "type": "string"
+    },
+    "title": {
+      "type": "string"
+    },
+    "author": {
+      "type": "string"
+    },
+    "dependencies": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "devDependencies": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "registryDependencies": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "files": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "path": {
+            "type": "string"
+          },
+          "content": {
+            "type": "string"
+          },
+          "type": {
+            "type": "string",
+            "enum": [
+              "registry:lib",
+              "registry:block",
+              "registry:component",
+              "registry:ui",
+              "registry:hook",
+              "registry:theme",
+              "registry:page"
+            ]
+          },
+          "target": {
+            "type": "string"
+          }
+        },
+        "required": ["path", "type"]
+      }
+    },
+    "tailwind": {
+      "type": "object",
+      "properties": {
+        "config": {
+          "type": "object",
+          "properties": {
+            "content": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "theme": {
+              "type": "object",
+              "additionalProperties": true
+            },
+            "plugins": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    },
+    "cssVars": {
+      "type": "object",
+      "properties": {
+        "light": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "dark": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "meta": {
+      "type": "object",
+      "additionalProperties": true
+    },
+    "docs": {
+      "type": "string"
+    },
+    "categories": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    }
+  },
+  "required": ["name", "type"]
+}
diff --git a/apps/www/public/registry/index.json b/apps/www/public/registry/index.json
index 5d7aca8c26d..b8d6edd8611 100644
--- a/apps/www/public/registry/index.json
+++ b/apps/www/public/registry/index.json
@@ -79,7 +79,7 @@
   {
     "name": "calendar",
     "dependencies": [
-      "react-day-picker@8.10.1",
+      "react-day-picker",
       "date-fns"
     ],
     "registryDependencies": [
diff --git a/apps/www/public/registry/styles/default/calendar.json b/apps/www/public/registry/styles/default/calendar.json
index 39f3dff8770..70d5d5800a4 100644
--- a/apps/www/public/registry/styles/default/calendar.json
+++ b/apps/www/public/registry/styles/default/calendar.json
@@ -1,7 +1,7 @@
 {
   "name": "calendar",
   "dependencies": [
-    "react-day-picker@8.10.1",
+    "react-day-picker",
     "date-fns"
   ],
   "registryDependencies": [
diff --git a/apps/www/public/registry/styles/new-york/calendar.json b/apps/www/public/registry/styles/new-york/calendar.json
index 2c13e2ba392..3ae66a66506 100644
--- a/apps/www/public/registry/styles/new-york/calendar.json
+++ b/apps/www/public/registry/styles/new-york/calendar.json
@@ -1,7 +1,7 @@
 {
   "name": "calendar",
   "dependencies": [
-    "react-day-picker@8.10.1",
+    "react-day-picker",
     "date-fns"
   ],
   "registryDependencies": [
diff --git a/apps/www/public/schema.json b/apps/www/public/schema.json
index 4d3e0ae64d9..e5c9496f1ba 100644
--- a/apps/www/public/schema.json
+++ b/apps/www/public/schema.json
@@ -33,6 +33,9 @@
     "tsx": {
       "type": "boolean"
     },
+    "iconLibrary": {
+      "type": "string"
+    },
     "aliases": {
       "type": "object",
       "properties": {
@@ -53,6 +56,42 @@
         }
       },
       "required": ["utils", "components"]
+    },
+    "registries": {
+      "type": "object",
+      "patternProperties": {
+        "^@": {
+          "oneOf": [
+            {
+              "type": "string",
+              "pattern": "\\{name\\}"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "url": {
+                  "type": "string",
+                  "pattern": "\\{name\\}"
+                },
+                "params": {
+                  "type": "object",
+                  "additionalProperties": {
+                    "type": "string"
+                  }
+                },
+                "headers": {
+                  "type": "object",
+                  "additionalProperties": {
+                    "type": "string"
+                  }
+                }
+              },
+              "required": ["url"]
+            }
+          ]
+        }
+      },
+      "additionalProperties": false
     }
   },
   "required": ["style", "tailwind", "rsc", "aliases"]
diff --git a/apps/www/public/schema/registry-item.json b/apps/www/public/schema/registry-item.json
new file mode 100644
index 00000000000..18e03d59bf3
--- /dev/null
+++ b/apps/www/public/schema/registry-item.json
@@ -0,0 +1,214 @@
+{
+  "$schema": "https://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the item. This is used to identify the item in the registry. It should be unique for your registry."
+    },
+    "type": {
+      "type": "string",
+      "enum": [
+        "registry:lib",
+        "registry:block",
+        "registry:component",
+        "registry:ui",
+        "registry:hook",
+        "registry:theme",
+        "registry:page",
+        "registry:file",
+        "registry:style"
+      ],
+      "description": "The type of the item. This is used to determine the type and target path of the item when resolved for a project."
+    },
+    "description": {
+      "type": "string",
+      "description": "The description of the item. This is used to provide a brief overview of the item."
+    },
+    "title": {
+      "type": "string",
+      "description": "The human-readable title for your registry item. Keep it short and descriptive."
+    },
+    "author": {
+      "type": "string",
+      "description": "The author of the item. Recommended format: username <url>"
+    },
+    "dependencies": {
+      "type": "array",
+      "description": "An array of NPM dependencies required by the registry item.",
+      "items": {
+        "type": "string"
+      }
+    },
+    "devDependencies": {
+      "type": "array",
+      "description": "An array of NPM dev dependencies required by the registry item.",
+      "items": {
+        "type": "string"
+      }
+    },
+    "registryDependencies": {
+      "type": "array",
+      "description": "An array of registry items that this item depends on. Use the name of the item to reference shadcn/ui components and urls to reference other registries.",
+      "items": {
+        "type": "string"
+      }
+    },
+    "files": {
+      "type": "array",
+      "description": "The main payload of the registry item. This is an array of files that are part of the registry item. Each file is an object with a path, content, type, and target.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "path": {
+            "type": "string",
+            "description": "The path to the file relative to the registry root."
+          },
+          "content": {
+            "type": "string",
+            "description": "The content of the file."
+          },
+          "type": {
+            "type": "string",
+            "enum": [
+              "registry:lib",
+              "registry:block",
+              "registry:component",
+              "registry:ui",
+              "registry:hook",
+              "registry:theme",
+              "registry:page",
+              "registry:file",
+              "registry:style"
+            ],
+            "description": "The type of the file. This is used to determine the type of the file when resolved for a project."
+          },
+          "target": {
+            "type": "string",
+            "description": "The target path of the file. This is the path to the file in the project."
+          }
+        },
+        "if": {
+          "properties": {
+            "type": {
+              "enum": ["registry:file", "registry:page"]
+            }
+          }
+        },
+        "then": {
+          "required": ["path", "type", "target"]
+        },
+        "else": {
+          "required": ["path", "type"]
+        }
+      }
+    },
+    "tailwind": {
+      "type": "object",
+      "description": "The tailwind configuration for the registry item. This is an object with a config property. Use cssVars for Tailwind v4 projects.",
+      "properties": {
+        "config": {
+          "type": "object",
+          "properties": {
+            "content": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "theme": {
+              "type": "object",
+              "additionalProperties": true
+            },
+            "plugins": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    },
+    "cssVars": {
+      "type": "object",
+      "description": "The css variables for the registry item. This will be merged with the project's css variables.",
+      "properties": {
+        "theme": {
+          "type": "object",
+          "description": "CSS variables for the @theme directive. For Tailwind v4 projects only. Use tailwind for older projects.",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "light": {
+          "type": "object",
+          "description": "CSS variables for the light theme.",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "dark": {
+          "type": "object",
+          "description": "CSS variables for the dark theme.",
+          "additionalProperties": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "css": {
+      "type": "object",
+      "description": "CSS definitions to be added to the project's CSS file. Supports at-rules, selectors, nested rules, utilities, layers, and more.",
+      "additionalProperties": {
+        "oneOf": [
+          {
+            "type": "string",
+            "description": "Direct CSS string (e.g., 'font-family: sans-serif; line-height: 1.5;')"
+          },
+          {
+            "type": "object",
+            "description": "CSS properties or nested selectors",
+            "additionalProperties": {
+              "oneOf": [
+                {
+                  "type": "string",
+                  "description": "CSS property value (e.g., 'blue', 'var(--color-primary)')"
+                },
+                {
+                  "type": "object",
+                  "description": "Nested selector or rule with properties",
+                  "additionalProperties": {
+                    "type": "string",
+                    "description": "CSS property value for nested rule"
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    },
+    "meta": {
+      "type": "object",
+      "description": "Additional metadata for the registry item. This is an object with any key value pairs.",
+      "additionalProperties": true
+    },
+    "docs": {
+      "type": "string",
+      "description": "The documentation for the registry item. This is a markdown string."
+    },
+    "categories": {
+      "type": "array",
+      "items": {
+        "type": "string",
+        "description": "The categories of the registry item. This is an array of strings."
+      }
+    },
+    "extends": {
+      "type": "string",
+      "description": "The name of the registry item to extend. This is used to extend the base shadcn/ui style. Set to none to start fresh. This is available for registry:style items only."
+    }
+  },
+  "required": ["name", "type"]
+}
diff --git a/apps/www/public/schema/registry.json b/apps/www/public/schema/registry.json
new file mode 100644
index 00000000000..6f21ab4b24e
--- /dev/null
+++ b/apps/www/public/schema/registry.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://json-schema.org/draft-07/schema#",
+  "description": "A shadcn registry of components, hooks, pages, etc.",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string"
+    },
+    "homepage": {
+      "type": "string"
+    },
+    "items": {
+      "type": "array",
+      "items": {
+        "$ref": "https://ui.shadcn.com/schema/registry-item.json"
+      }
+    }
+  },
+  "required": ["name", "homepage", "items"],
+  "uniqueItems": true,
+  "minItems": 1
+}
diff --git a/apps/www/registry/default/block/authentication-01.tsx b/apps/www/registry/default/block/authentication-01.tsx
deleted file mode 100644
index ad62585fa44..00000000000
--- a/apps/www/registry/default/block/authentication-01.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/registry/default/block/authentication-02.tsx b/apps/www/registry/default/block/authentication-02.tsx
deleted file mode 100644
index b4ccaddd92b..00000000000
--- a/apps/www/registry/default/block/authentication-02.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/registry/default/block/authentication-03.tsx b/apps/www/registry/default/block/authentication-03.tsx
deleted file mode 100644
index 65e7c939a7a..00000000000
--- a/apps/www/registry/default/block/authentication-03.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/registry/default/block/authentication-04.tsx b/apps/www/registry/default/block/authentication-04.tsx
deleted file mode 100644
index 1ccce939230..00000000000
--- a/apps/www/registry/default/block/authentication-04.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/registry/default/block/chart-area-interactive.tsx b/apps/www/registry/default/block/chart-area-interactive.tsx
deleted file mode 100644
index 3044b7357a6..00000000000
--- a/apps/www/registry/default/block/chart-area-interactive.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-
-export const description = "An interactive area chart"
-
-const chartData = [
-  { date: "2024-04-01", desktop: 222, mobile: 150 },
-  { date: "2024-04-02", desktop: 97, mobile: 180 },
-  { date: "2024-04-03", desktop: 167, mobile: 120 },
-  { date: "2024-04-04", desktop: 242, mobile: 260 },
-  { date: "2024-04-05", desktop: 373, mobile: 290 },
-  { date: "2024-04-06", desktop: 301, mobile: 340 },
-  { date: "2024-04-07", desktop: 245, mobile: 180 },
-  { date: "2024-04-08", desktop: 409, mobile: 320 },
-  { date: "2024-04-09", desktop: 59, mobile: 110 },
-  { date: "2024-04-10", desktop: 261, mobile: 190 },
-  { date: "2024-04-11", desktop: 327, mobile: 350 },
-  { date: "2024-04-12", desktop: 292, mobile: 210 },
-  { date: "2024-04-13", desktop: 342, mobile: 380 },
-  { date: "2024-04-14", desktop: 137, mobile: 220 },
-  { date: "2024-04-15", desktop: 120, mobile: 170 },
-  { date: "2024-04-16", desktop: 138, mobile: 190 },
-  { date: "2024-04-17", desktop: 446, mobile: 360 },
-  { date: "2024-04-18", desktop: 364, mobile: 410 },
-  { date: "2024-04-19", desktop: 243, mobile: 180 },
-  { date: "2024-04-20", desktop: 89, mobile: 150 },
-  { date: "2024-04-21", desktop: 137, mobile: 200 },
-  { date: "2024-04-22", desktop: 224, mobile: 170 },
-  { date: "2024-04-23", desktop: 138, mobile: 230 },
-  { date: "2024-04-24", desktop: 387, mobile: 290 },
-  { date: "2024-04-25", desktop: 215, mobile: 250 },
-  { date: "2024-04-26", desktop: 75, mobile: 130 },
-  { date: "2024-04-27", desktop: 383, mobile: 420 },
-  { date: "2024-04-28", desktop: 122, mobile: 180 },
-  { date: "2024-04-29", desktop: 315, mobile: 240 },
-  { date: "2024-04-30", desktop: 454, mobile: 380 },
-  { date: "2024-05-01", desktop: 165, mobile: 220 },
-  { date: "2024-05-02", desktop: 293, mobile: 310 },
-  { date: "2024-05-03", desktop: 247, mobile: 190 },
-  { date: "2024-05-04", desktop: 385, mobile: 420 },
-  { date: "2024-05-05", desktop: 481, mobile: 390 },
-  { date: "2024-05-06", desktop: 498, mobile: 520 },
-  { date: "2024-05-07", desktop: 388, mobile: 300 },
-  { date: "2024-05-08", desktop: 149, mobile: 210 },
-  { date: "2024-05-09", desktop: 227, mobile: 180 },
-  { date: "2024-05-10", desktop: 293, mobile: 330 },
-  { date: "2024-05-11", desktop: 335, mobile: 270 },
-  { date: "2024-05-12", desktop: 197, mobile: 240 },
-  { date: "2024-05-13", desktop: 197, mobile: 160 },
-  { date: "2024-05-14", desktop: 448, mobile: 490 },
-  { date: "2024-05-15", desktop: 473, mobile: 380 },
-  { date: "2024-05-16", desktop: 338, mobile: 400 },
-  { date: "2024-05-17", desktop: 499, mobile: 420 },
-  { date: "2024-05-18", desktop: 315, mobile: 350 },
-  { date: "2024-05-19", desktop: 235, mobile: 180 },
-  { date: "2024-05-20", desktop: 177, mobile: 230 },
-  { date: "2024-05-21", desktop: 82, mobile: 140 },
-  { date: "2024-05-22", desktop: 81, mobile: 120 },
-  { date: "2024-05-23", desktop: 252, mobile: 290 },
-  { date: "2024-05-24", desktop: 294, mobile: 220 },
-  { date: "2024-05-25", desktop: 201, mobile: 250 },
-  { date: "2024-05-26", desktop: 213, mobile: 170 },
-  { date: "2024-05-27", desktop: 420, mobile: 460 },
-  { date: "2024-05-28", desktop: 233, mobile: 190 },
-  { date: "2024-05-29", desktop: 78, mobile: 130 },
-  { date: "2024-05-30", desktop: 340, mobile: 280 },
-  { date: "2024-05-31", desktop: 178, mobile: 230 },
-  { date: "2024-06-01", desktop: 178, mobile: 200 },
-  { date: "2024-06-02", desktop: 470, mobile: 410 },
-  { date: "2024-06-03", desktop: 103, mobile: 160 },
-  { date: "2024-06-04", desktop: 439, mobile: 380 },
-  { date: "2024-06-05", desktop: 88, mobile: 140 },
-  { date: "2024-06-06", desktop: 294, mobile: 250 },
-  { date: "2024-06-07", desktop: 323, mobile: 370 },
-  { date: "2024-06-08", desktop: 385, mobile: 320 },
-  { date: "2024-06-09", desktop: 438, mobile: 480 },
-  { date: "2024-06-10", desktop: 155, mobile: 200 },
-  { date: "2024-06-11", desktop: 92, mobile: 150 },
-  { date: "2024-06-12", desktop: 492, mobile: 420 },
-  { date: "2024-06-13", desktop: 81, mobile: 130 },
-  { date: "2024-06-14", desktop: 426, mobile: 380 },
-  { date: "2024-06-15", desktop: 307, mobile: 350 },
-  { date: "2024-06-16", desktop: 371, mobile: 310 },
-  { date: "2024-06-17", desktop: 475, mobile: 520 },
-  { date: "2024-06-18", desktop: 107, mobile: 170 },
-  { date: "2024-06-19", desktop: 341, mobile: 290 },
-  { date: "2024-06-20", desktop: 408, mobile: 450 },
-  { date: "2024-06-21", desktop: 169, mobile: 210 },
-  { date: "2024-06-22", desktop: 317, mobile: 270 },
-  { date: "2024-06-23", desktop: 480, mobile: 530 },
-  { date: "2024-06-24", desktop: 132, mobile: 180 },
-  { date: "2024-06-25", desktop: 141, mobile: 190 },
-  { date: "2024-06-26", desktop: 434, mobile: 380 },
-  { date: "2024-06-27", desktop: 448, mobile: 490 },
-  { date: "2024-06-28", desktop: 149, mobile: 200 },
-  { date: "2024-06-29", desktop: 103, mobile: 160 },
-  { date: "2024-06-30", desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  desktop: {
-    label: "Desktop",
-    color: "hsl(var(--chart-1))",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  const [timeRange, setTimeRange] = React.useState("90d")
-
-  const filteredData = chartData.filter((item) => {
-    const date = new Date(item.date)
-    const now = new Date()
-    let daysToSubtract = 90
-    if (timeRange === "30d") {
-      daysToSubtract = 30
-    } else if (timeRange === "7d") {
-      daysToSubtract = 7
-    }
-    now.setDate(now.getDate() - daysToSubtract)
-    return date >= now
-  })
-
-  return (
-    <Card>
-      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
-        <div className="grid flex-1 gap-1 text-center sm:text-left">
-          <CardTitle>Area Chart - Interactive</CardTitle>
-          <CardDescription>
-            Showing total visitors for the last 3 months
-          </CardDescription>
-        </div>
-        <Select value={timeRange} onValueChange={setTimeRange}>
-          <SelectTrigger
-            className="w-[160px] rounded-lg sm:ml-auto"
-            aria-label="Select a value"
-          >
-            <SelectValue placeholder="Last 3 months" />
-          </SelectTrigger>
-          <SelectContent className="rounded-xl">
-            <SelectItem value="90d" className="rounded-lg">
-              Last 3 months
-            </SelectItem>
-            <SelectItem value="30d" className="rounded-lg">
-              Last 30 days
-            </SelectItem>
-            <SelectItem value="7d" className="rounded-lg">
-              Last 7 days
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </CardHeader>
-      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
-        <ChartContainer
-          config={chartConfig}
-          className="aspect-auto h-[250px] w-full"
-        >
-          <AreaChart data={filteredData}>
-            <defs>
-              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-            </defs>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              minTickGap={32}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                return date.toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                })
-              }}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={
-                <ChartTooltipContent
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }}
-                  indicator="dot"
-                />
-              }
-            />
-            <Area
-              dataKey="mobile"
-              type="natural"
-              fill="url(#fillMobile)"
-              stroke="var(--color-mobile)"
-              stackId="a"
-            />
-            <Area
-              dataKey="desktop"
-              type="natural"
-              fill="url(#fillDesktop)"
-              stroke="var(--color-desktop)"
-              stackId="a"
-            />
-            <ChartLegend content={<ChartLegendContent />} />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/chart-pie-label-custom.tsx b/apps/www/registry/default/block/chart-pie-label-custom.tsx
deleted file mode 100644
index 647712d505b..00000000000
--- a/apps/www/registry/default/block/chart-pie-label-custom.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client"
-
-import { TrendingUp } from "lucide-react"
-import { Pie, PieChart } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-
-export const description = "A pie chart with a custom label"
-
-const chartData = [
-  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
-  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
-  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-  { browser: "other", visitors: 90, fill: "var(--color-other)" },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  chrome: {
-    label: "Chrome",
-    color: "hsl(var(--chart-1))",
-  },
-  safari: {
-    label: "Safari",
-    color: "hsl(var(--chart-2))",
-  },
-  firefox: {
-    label: "Firefox",
-    color: "hsl(var(--chart-3))",
-  },
-  edge: {
-    label: "Edge",
-    color: "hsl(var(--chart-4))",
-  },
-  other: {
-    label: "Other",
-    color: "hsl(var(--chart-5))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card className="flex flex-col">
-      <CardHeader className="items-center pb-0">
-        <CardTitle>Pie Chart - Custom Label</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent className="flex-1 pb-0">
-        <ChartContainer
-          config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
-        >
-          <PieChart>
-            <ChartTooltip
-              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
-            />
-            <Pie
-              data={chartData}
-              dataKey="visitors"
-              labelLine={false}
-              label={({ payload, ...props }) => {
-                return (
-                  <text
-                    cx={props.cx}
-                    cy={props.cy}
-                    x={props.x}
-                    y={props.y}
-                    textAnchor={props.textAnchor}
-                    dominantBaseline={props.dominantBaseline}
-                    fill="hsla(var(--foreground))"
-                  >
-                    {`${
-                      chartConfig[payload.browser as keyof typeof chartConfig]
-                        ?.label
-                    } (${payload.visitors})`}
-                  </text>
-                )
-              }}
-              nameKey="browser"
-            />
-          </PieChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col gap-2 text-sm">
-        <div className="flex items-center gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-        </div>
-        <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/chart-pie-label-list.tsx b/apps/www/registry/default/block/chart-pie-label-list.tsx
deleted file mode 100644
index fa5f0038ce6..00000000000
--- a/apps/www/registry/default/block/chart-pie-label-list.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client"
-
-import { TrendingUp } from "lucide-react"
-import { LabelList, Pie, PieChart } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-
-export const description = "A pie chart with a label list"
-
-const chartData = [
-  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
-  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
-  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-  { browser: "other", visitors: 90, fill: "var(--color-other)" },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  chrome: {
-    label: "Chrome",
-    color: "hsl(var(--chart-1))",
-  },
-  safari: {
-    label: "Safari",
-    color: "hsl(var(--chart-2))",
-  },
-  firefox: {
-    label: "Firefox",
-    color: "hsl(var(--chart-3))",
-  },
-  edge: {
-    label: "Edge",
-    color: "hsl(var(--chart-4))",
-  },
-  other: {
-    label: "Other",
-    color: "hsl(var(--chart-5))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card className="flex flex-col">
-      <CardHeader className="items-center pb-0">
-        <CardTitle>Pie Chart - Label List</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent className="flex-1 pb-0">
-        <ChartContainer
-          config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
-        >
-          <PieChart>
-            <ChartTooltip
-              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
-            />
-            <Pie data={chartData} dataKey="visitors">
-              <LabelList
-                dataKey="browser"
-                className="fill-background"
-                stroke="none"
-                fontSize={12}
-                formatter={(value: keyof typeof chartConfig) =>
-                  chartConfig[value]?.label
-                }
-              />
-            </Pie>
-          </PieChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col gap-2 text-sm">
-        <div className="flex items-center gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-        </div>
-        <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/chart-tooltip-default.tsx b/apps/www/registry/default/block/chart-tooltip-default.tsx
deleted file mode 100644
index a4951569374..00000000000
--- a/apps/www/registry/default/block/chart-tooltip-default.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-
-export const description = "A stacked bar chart with a legend"
-
-const chartData = [
-  { date: "2024-07-15", running: 450, swimming: 300 },
-  { date: "2024-07-16", running: 380, swimming: 420 },
-  { date: "2024-07-17", running: 520, swimming: 120 },
-  { date: "2024-07-18", running: 140, swimming: 550 },
-  { date: "2024-07-19", running: 600, swimming: 350 },
-  { date: "2024-07-20", running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-  running: {
-    label: "Running",
-    color: "hsl(var(--chart-1))",
-  },
-  swimming: {
-    label: "Swimming",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Tooltip - Default</CardTitle>
-        <CardDescription>
-          Default tooltip with ChartTooltipContent.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <BarChart accessibilityLayer data={chartData}>
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <Bar
-              dataKey="running"
-              stackId="a"
-              fill="var(--color-running)"
-              radius={[0, 0, 4, 4]}
-            />
-            <Bar
-              dataKey="swimming"
-              stackId="a"
-              fill="var(--color-swimming)"
-              radius={[4, 4, 0, 0]}
-            />
-            <ChartTooltip
-              content={<ChartTooltipContent />}
-              cursor={false}
-              defaultIndex={1}
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/chart-tooltip-indicator-line.tsx b/apps/www/registry/default/block/chart-tooltip-indicator-line.tsx
deleted file mode 100644
index c5cc9a676dc..00000000000
--- a/apps/www/registry/default/block/chart-tooltip-indicator-line.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-
-export const description = "A stacked bar chart with a legend"
-
-const chartData = [
-  { date: "2024-07-15", running: 450, swimming: 300 },
-  { date: "2024-07-16", running: 380, swimming: 420 },
-  { date: "2024-07-17", running: 520, swimming: 120 },
-  { date: "2024-07-18", running: 140, swimming: 550 },
-  { date: "2024-07-19", running: 600, swimming: 350 },
-  { date: "2024-07-20", running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-  running: {
-    label: "Running",
-    color: "hsl(var(--chart-1))",
-  },
-  swimming: {
-    label: "Swimming",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Tooltip - Line Indicator</CardTitle>
-        <CardDescription>Tooltip with line indicator.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <BarChart accessibilityLayer data={chartData}>
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <Bar
-              dataKey="running"
-              stackId="a"
-              fill="var(--color-running)"
-              radius={[0, 0, 4, 4]}
-            />
-            <Bar
-              dataKey="swimming"
-              stackId="a"
-              fill="var(--color-swimming)"
-              radius={[4, 4, 0, 0]}
-            />
-            <ChartTooltip
-              content={<ChartTooltipContent indicator="line" />}
-              cursor={false}
-              defaultIndex={1}
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-0.tsx b/apps/www/registry/default/block/charts-01-chunk-0.tsx
deleted file mode 100644
index f854ced977e..00000000000
--- a/apps/www/registry/default/block/charts-01-chunk-0.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client"
-
-import { Bar, BarChart, Label, Rectangle, ReferenceLine, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
-      <CardHeader className="space-y-0 pb-2">
-        <CardDescription>Today</CardDescription>
-        <CardTitle className="text-4xl tabular-nums">
-          12,584{" "}
-          <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-            steps
-          </span>
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer
-          config={{
-            steps: {
-              label: "Steps",
-              color: "hsl(var(--chart-1))",
-            },
-          }}
-        >
-          <BarChart
-            accessibilityLayer
-            margin={{
-              left: -4,
-              right: -4,
-            }}
-            data={[
-              {
-                date: "2024-01-01",
-                steps: 2000,
-              },
-              {
-                date: "2024-01-02",
-                steps: 2100,
-              },
-              {
-                date: "2024-01-03",
-                steps: 2200,
-              },
-              {
-                date: "2024-01-04",
-                steps: 1300,
-              },
-              {
-                date: "2024-01-05",
-                steps: 1400,
-              },
-              {
-                date: "2024-01-06",
-                steps: 2500,
-              },
-              {
-                date: "2024-01-07",
-                steps: 1600,
-              },
-            ]}
-          >
-            <Bar
-              dataKey="steps"
-              fill="var(--color-steps)"
-              radius={5}
-              fillOpacity={0.6}
-              activeBar={<Rectangle fillOpacity={0.8} />}
-            />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={4}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <ChartTooltip
-              defaultIndex={2}
-              content={
-                <ChartTooltipContent
-                  hideIndicator
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      day: "numeric",
-                      month: "long",
-                      year: "numeric",
-                    })
-                  }}
-                />
-              }
-              cursor={false}
-            />
-            <ReferenceLine
-              y={1200}
-              stroke="hsl(var(--muted-foreground))"
-              strokeDasharray="3 3"
-              strokeWidth={1}
-            >
-              <Label
-                position="insideBottomLeft"
-                value="Average Steps"
-                offset={10}
-                fill="hsl(var(--foreground))"
-              />
-              <Label
-                position="insideTopLeft"
-                value="12,343"
-                className="text-lg"
-                fill="hsl(var(--foreground))"
-                offset={10}
-                startOffset={100}
-              />
-            </ReferenceLine>
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col items-start gap-1">
-        <CardDescription>
-          Over the past 7 days, you have walked{" "}
-          <span className="font-medium text-foreground">53,305</span> steps.
-        </CardDescription>
-        <CardDescription>
-          You need <span className="font-medium text-foreground">12,584</span>{" "}
-          more steps to reach your goal.
-        </CardDescription>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-1.tsx b/apps/www/registry/default/block/charts-01-chunk-1.tsx
deleted file mode 100644
index c949cc06b77..00000000000
--- a/apps/www/registry/default/block/charts-01-chunk-1.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-"use client"
-
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
-      <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
-        <div>
-          <CardDescription>Resting HR</CardDescription>
-          <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-            62
-            <span className="text-sm font-normal tracking-normal text-muted-foreground">
-              bpm
-            </span>
-          </CardTitle>
-        </div>
-        <div>
-          <CardDescription>Variability</CardDescription>
-          <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-            35
-            <span className="text-sm font-normal tracking-normal text-muted-foreground">
-              ms
-            </span>
-          </CardTitle>
-        </div>
-      </CardHeader>
-      <CardContent className="flex flex-1 items-center">
-        <ChartContainer
-          config={{
-            resting: {
-              label: "Resting",
-              color: "hsl(var(--chart-1))",
-            },
-          }}
-          className="w-full"
-        >
-          <LineChart
-            accessibilityLayer
-            margin={{
-              left: 14,
-              right: 14,
-              top: 10,
-            }}
-            data={[
-              {
-                date: "2024-01-01",
-                resting: 62,
-              },
-              {
-                date: "2024-01-02",
-                resting: 72,
-              },
-              {
-                date: "2024-01-03",
-                resting: 35,
-              },
-              {
-                date: "2024-01-04",
-                resting: 62,
-              },
-              {
-                date: "2024-01-05",
-                resting: 52,
-              },
-              {
-                date: "2024-01-06",
-                resting: 62,
-              },
-              {
-                date: "2024-01-07",
-                resting: 70,
-              },
-            ]}
-          >
-            <CartesianGrid
-              strokeDasharray="4 4"
-              vertical={false}
-              stroke="hsl(var(--muted-foreground))"
-              strokeOpacity={0.5}
-            />
-            <YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <Line
-              dataKey="resting"
-              type="natural"
-              fill="var(--color-resting)"
-              stroke="var(--color-resting)"
-              strokeWidth={2}
-              dot={false}
-              activeDot={{
-                fill: "var(--color-resting)",
-                stroke: "var(--color-resting)",
-                r: 4,
-              }}
-            />
-            <ChartTooltip
-              content={
-                <ChartTooltipContent
-                  indicator="line"
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      day: "numeric",
-                      month: "long",
-                      year: "numeric",
-                    })
-                  }}
-                />
-              }
-              cursor={false}
-            />
-          </LineChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-2.tsx b/apps/www/registry/default/block/charts-01-chunk-2.tsx
deleted file mode 100644
index f233b2facc1..00000000000
--- a/apps/www/registry/default/block/charts-01-chunk-2.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client"
-
-import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { ChartContainer } from "@/registry/default/ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-2">
-      <CardHeader>
-        <CardTitle>Progress</CardTitle>
-        <CardDescription>
-          You're average more steps a day this year than last year.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="grid auto-rows-min gap-2">
-          <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-            12,453
-            <span className="text-sm font-normal text-muted-foreground">
-              steps/day
-            </span>
-          </div>
-          <ChartContainer
-            config={{
-              steps: {
-                label: "Steps",
-                color: "hsl(var(--chart-1))",
-              },
-            }}
-            className="aspect-auto h-[32px] w-full"
-          >
-            <BarChart
-              accessibilityLayer
-              layout="vertical"
-              margin={{
-                left: 0,
-                top: 0,
-                right: 0,
-                bottom: 0,
-              }}
-              data={[
-                {
-                  date: "2024",
-                  steps: 12435,
-                },
-              ]}
-            >
-              <Bar
-                dataKey="steps"
-                fill="var(--color-steps)"
-                radius={4}
-                barSize={32}
-              >
-                <LabelList
-                  position="insideLeft"
-                  dataKey="date"
-                  offset={8}
-                  fontSize={12}
-                  fill="white"
-                />
-              </Bar>
-              <YAxis dataKey="date" type="category" tickCount={1} hide />
-              <XAxis dataKey="steps" type="number" hide />
-            </BarChart>
-          </ChartContainer>
-        </div>
-        <div className="grid auto-rows-min gap-2">
-          <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-            10,103
-            <span className="text-sm font-normal text-muted-foreground">
-              steps/day
-            </span>
-          </div>
-          <ChartContainer
-            config={{
-              steps: {
-                label: "Steps",
-                color: "hsl(var(--muted))",
-              },
-            }}
-            className="aspect-auto h-[32px] w-full"
-          >
-            <BarChart
-              accessibilityLayer
-              layout="vertical"
-              margin={{
-                left: 0,
-                top: 0,
-                right: 0,
-                bottom: 0,
-              }}
-              data={[
-                {
-                  date: "2023",
-                  steps: 10103,
-                },
-              ]}
-            >
-              <Bar
-                dataKey="steps"
-                fill="var(--color-steps)"
-                radius={4}
-                barSize={32}
-              >
-                <LabelList
-                  position="insideLeft"
-                  dataKey="date"
-                  offset={8}
-                  fontSize={12}
-                  fill="hsl(var(--muted-foreground))"
-                />
-              </Bar>
-              <YAxis dataKey="date" type="category" tickCount={1} hide />
-              <XAxis dataKey="steps" type="number" hide />
-            </BarChart>
-          </ChartContainer>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-3.tsx b/apps/www/registry/default/block/charts-01-chunk-3.tsx
deleted file mode 100644
index 44d408b7848..00000000000
--- a/apps/www/registry/default/block/charts-01-chunk-3.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client"
-
-import { Bar, BarChart, Rectangle, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { ChartContainer } from "@/registry/default/ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-3">
-      <CardHeader className="p-4 pb-0">
-        <CardTitle>Walking Distance</CardTitle>
-        <CardDescription>
-          Over the last 7 days, your distance walked and run was 12.5 miles per
-          day.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
-        <div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
-          12.5
-          <span className="text-sm font-normal text-muted-foreground">
-            miles/day
-          </span>
-        </div>
-        <ChartContainer
-          config={{
-            steps: {
-              label: "Steps",
-              color: "hsl(var(--chart-1))",
-            },
-          }}
-          className="ml-auto w-[72px]"
-        >
-          <BarChart
-            accessibilityLayer
-            margin={{
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-            }}
-            data={[
-              {
-                date: "2024-01-01",
-                steps: 2000,
-              },
-              {
-                date: "2024-01-02",
-                steps: 2100,
-              },
-              {
-                date: "2024-01-03",
-                steps: 2200,
-              },
-              {
-                date: "2024-01-04",
-                steps: 1300,
-              },
-              {
-                date: "2024-01-05",
-                steps: 1400,
-              },
-              {
-                date: "2024-01-06",
-                steps: 2500,
-              },
-              {
-                date: "2024-01-07",
-                steps: 1600,
-              },
-            ]}
-          >
-            <Bar
-              dataKey="steps"
-              fill="var(--color-steps)"
-              radius={2}
-              fillOpacity={0.2}
-              activeIndex={6}
-              activeBar={<Rectangle fillOpacity={0.8} />}
-            />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={4}
-              hide
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-4.tsx b/apps/www/registry/default/block/charts-01-chunk-4.tsx
deleted file mode 100644
index 5ac2c7c52a2..00000000000
--- a/apps/www/registry/default/block/charts-01-chunk-4.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client"
-
-import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts"
-
-import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
-import { ChartContainer } from "@/registry/default/ui/chart"
-import { Separator } from "@/registry/default/ui/separator"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-4">
-      <CardContent className="flex gap-4 p-4 pb-2">
-        <ChartContainer
-          config={{
-            move: {
-              label: "Move",
-              color: "hsl(var(--chart-1))",
-            },
-            stand: {
-              label: "Stand",
-              color: "hsl(var(--chart-2))",
-            },
-            exercise: {
-              label: "Exercise",
-              color: "hsl(var(--chart-3))",
-            },
-          }}
-          className="h-[140px] w-full"
-        >
-          <BarChart
-            margin={{
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 10,
-            }}
-            data={[
-              {
-                activity: "stand",
-                value: (8 / 12) * 100,
-                label: "8/12 hr",
-                fill: "var(--color-stand)",
-              },
-              {
-                activity: "exercise",
-                value: (46 / 60) * 100,
-                label: "46/60 min",
-                fill: "var(--color-exercise)",
-              },
-              {
-                activity: "move",
-                value: (245 / 360) * 100,
-                label: "245/360 kcal",
-                fill: "var(--color-move)",
-              },
-            ]}
-            layout="vertical"
-            barSize={32}
-            barGap={2}
-          >
-            <XAxis type="number" dataKey="value" hide />
-            <YAxis
-              dataKey="activity"
-              type="category"
-              tickLine={false}
-              tickMargin={4}
-              axisLine={false}
-              className="capitalize"
-            />
-            <Bar dataKey="value" radius={5}>
-              <LabelList
-                position="insideLeft"
-                dataKey="label"
-                fill="white"
-                offset={8}
-                fontSize={12}
-              />
-            </Bar>
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex flex-row border-t p-4">
-        <div className="flex w-full items-center gap-2">
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-xs text-muted-foreground">Move</div>
-            <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-              562
-              <span className="text-sm font-normal text-muted-foreground">
-                kcal
-              </span>
-            </div>
-          </div>
-          <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-xs text-muted-foreground">Exercise</div>
-            <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-              73
-              <span className="text-sm font-normal text-muted-foreground">
-                min
-              </span>
-            </div>
-          </div>
-          <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-xs text-muted-foreground">Stand</div>
-            <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-              14
-              <span className="text-sm font-normal text-muted-foreground">
-                hr
-              </span>
-            </div>
-          </div>
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-5.tsx b/apps/www/registry/default/block/charts-01-chunk-5.tsx
deleted file mode 100644
index d7ef4ab46dc..00000000000
--- a/apps/www/registry/default/block/charts-01-chunk-5.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client"
-
-import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts"
-
-import { Card, CardContent } from "@/registry/default/ui/card"
-import { ChartContainer } from "@/registry/default/ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-5">
-      <CardContent className="flex gap-4 p-4">
-        <div className="grid items-center gap-2">
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-sm text-muted-foreground">Move</div>
-            <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-              562/600
-              <span className="text-sm font-normal text-muted-foreground">
-                kcal
-              </span>
-            </div>
-          </div>
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-sm text-muted-foreground">Exercise</div>
-            <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-              73/120
-              <span className="text-sm font-normal text-muted-foreground">
-                min
-              </span>
-            </div>
-          </div>
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-sm text-muted-foreground">Stand</div>
-            <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-              8/12
-              <span className="text-sm font-normal text-muted-foreground">
-                hr
-              </span>
-            </div>
-          </div>
-        </div>
-        <ChartContainer
-          config={{
-            move: {
-              label: "Move",
-              color: "hsl(var(--chart-1))",
-            },
-            exercise: {
-              label: "Exercise",
-              color: "hsl(var(--chart-2))",
-            },
-            stand: {
-              label: "Stand",
-              color: "hsl(var(--chart-3))",
-            },
-          }}
-          className="mx-auto aspect-square w-full max-w-[80%]"
-        >
-          <RadialBarChart
-            margin={{
-              left: -10,
-              right: -10,
-              top: -10,
-              bottom: -10,
-            }}
-            data={[
-              {
-                activity: "stand",
-                value: (8 / 12) * 100,
-                fill: "var(--color-stand)",
-              },
-              {
-                activity: "exercise",
-                value: (46 / 60) * 100,
-                fill: "var(--color-exercise)",
-              },
-              {
-                activity: "move",
-                value: (245 / 360) * 100,
-                fill: "var(--color-move)",
-              },
-            ]}
-            innerRadius="20%"
-            barSize={24}
-            startAngle={90}
-            endAngle={450}
-          >
-            <PolarAngleAxis
-              type="number"
-              domain={[0, 100]}
-              dataKey="value"
-              tick={false}
-            />
-            <RadialBar dataKey="value" background cornerRadius={5} />
-          </RadialBarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-6.tsx b/apps/www/registry/default/block/charts-01-chunk-6.tsx
deleted file mode 100644
index 27fed222a5c..00000000000
--- a/apps/www/registry/default/block/charts-01-chunk-6.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client"
-
-import { Bar, BarChart, Rectangle, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { ChartContainer } from "@/registry/default/ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-6">
-      <CardHeader className="p-4 pb-0">
-        <CardTitle>Active Energy</CardTitle>
-        <CardDescription>
-          You're burning an average of 754 calories per day. Good job!
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
-        <div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
-          1,254
-          <span className="text-sm font-normal text-muted-foreground">
-            kcal/day
-          </span>
-        </div>
-        <ChartContainer
-          config={{
-            calories: {
-              label: "Calories",
-              color: "hsl(var(--chart-1))",
-            },
-          }}
-          className="ml-auto w-[64px]"
-        >
-          <BarChart
-            accessibilityLayer
-            margin={{
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-            }}
-            data={[
-              {
-                date: "2024-01-01",
-                calories: 354,
-              },
-              {
-                date: "2024-01-02",
-                calories: 514,
-              },
-              {
-                date: "2024-01-03",
-                calories: 345,
-              },
-              {
-                date: "2024-01-04",
-                calories: 734,
-              },
-              {
-                date: "2024-01-05",
-                calories: 645,
-              },
-              {
-                date: "2024-01-06",
-                calories: 456,
-              },
-              {
-                date: "2024-01-07",
-                calories: 345,
-              },
-            ]}
-          >
-            <Bar
-              dataKey="calories"
-              fill="var(--color-calories)"
-              radius={2}
-              fillOpacity={0.2}
-              activeIndex={6}
-              activeBar={<Rectangle fillOpacity={0.8} />}
-            />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={4}
-              hide
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-7.tsx b/apps/www/registry/default/block/charts-01-chunk-7.tsx
deleted file mode 100644
index e3b58ee8f6b..00000000000
--- a/apps/www/registry/default/block/charts-01-chunk-7.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-"use client"
-
-import { Area, AreaChart, XAxis, YAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-7">
-      <CardHeader className="space-y-0 pb-0">
-        <CardDescription>Time in Bed</CardDescription>
-        <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-          8
-          <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-            hr
-          </span>
-          35
-          <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-            min
-          </span>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="p-0">
-        <ChartContainer
-          config={{
-            time: {
-              label: "Time",
-              color: "hsl(var(--chart-2))",
-            },
-          }}
-        >
-          <AreaChart
-            accessibilityLayer
-            data={[
-              {
-                date: "2024-01-01",
-                time: 8.5,
-              },
-              {
-                date: "2024-01-02",
-                time: 7.2,
-              },
-              {
-                date: "2024-01-03",
-                time: 8.1,
-              },
-              {
-                date: "2024-01-04",
-                time: 6.2,
-              },
-              {
-                date: "2024-01-05",
-                time: 5.2,
-              },
-              {
-                date: "2024-01-06",
-                time: 8.1,
-              },
-              {
-                date: "2024-01-07",
-                time: 7.0,
-              },
-            ]}
-            margin={{
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-            }}
-          >
-            <XAxis dataKey="date" hide />
-            <YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
-            <defs>
-              <linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-time)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-time)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-            </defs>
-            <Area
-              dataKey="time"
-              type="natural"
-              fill="url(#fillTime)"
-              fillOpacity={0.4}
-              stroke="var(--color-time)"
-            />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel />}
-              formatter={(value) => (
-                <div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
-                  Time in bed
-                  <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
-                    {value}
-                    <span className="font-normal text-muted-foreground">
-                      hr
-                    </span>
-                  </div>
-                </div>
-              )}
-            />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01.tsx b/apps/www/registry/default/block/charts-01.tsx
deleted file mode 100644
index cfad88650a1..00000000000
--- a/apps/www/registry/default/block/charts-01.tsx
+++ /dev/null
@@ -1,895 +0,0 @@
-"use client"
-
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Label,
-  LabelList,
-  Line,
-  LineChart,
-  PolarAngleAxis,
-  RadialBar,
-  RadialBarChart,
-  Rectangle,
-  ReferenceLine,
-  XAxis,
-  YAxis,
-} from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/default/ui/chart"
-import { Separator } from "@/registry/default/ui/separator"
-
-export const description = "A collection of health charts."
-
-export const iframeHeight = "900px"
-
-export const containerClassName = "min-h-screen py-12"
-
-export default function Charts() {
-  return (
-    <div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
-      <div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
-        <Card
-          x-chunk="A bar chart showing the number of steps you have walked in the past 7 days."
-          className="lg:max-w-md"
-        >
-          <CardHeader className="space-y-0 pb-2">
-            <CardDescription>Today</CardDescription>
-            <CardTitle className="text-4xl tabular-nums">
-              12,584{" "}
-              <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-                steps
-              </span>
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ChartContainer
-              config={{
-                steps: {
-                  label: "Steps",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-            >
-              <BarChart
-                accessibilityLayer
-                margin={{
-                  left: -4,
-                  right: -4,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    steps: 2000,
-                  },
-                  {
-                    date: "2024-01-02",
-                    steps: 2100,
-                  },
-                  {
-                    date: "2024-01-03",
-                    steps: 2200,
-                  },
-                  {
-                    date: "2024-01-04",
-                    steps: 1300,
-                  },
-                  {
-                    date: "2024-01-05",
-                    steps: 1400,
-                  },
-                  {
-                    date: "2024-01-06",
-                    steps: 2500,
-                  },
-                  {
-                    date: "2024-01-07",
-                    steps: 1600,
-                  },
-                ]}
-              >
-                <Bar
-                  dataKey="steps"
-                  fill="var(--color-steps)"
-                  radius={5}
-                  fillOpacity={0.6}
-                  activeBar={<Rectangle fillOpacity={0.8} />}
-                />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={4}
-                  tickFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      weekday: "short",
-                    })
-                  }}
-                />
-                <ChartTooltip
-                  defaultIndex={2}
-                  content={
-                    <ChartTooltipContent
-                      hideIndicator
-                      labelFormatter={(value) => {
-                        return new Date(value).toLocaleDateString("en-US", {
-                          day: "numeric",
-                          month: "long",
-                          year: "numeric",
-                        })
-                      }}
-                    />
-                  }
-                  cursor={false}
-                />
-                <ReferenceLine
-                  y={1200}
-                  stroke="hsl(var(--muted-foreground))"
-                  strokeDasharray="3 3"
-                  strokeWidth={1}
-                >
-                  <Label
-                    position="insideBottomLeft"
-                    value="Average Steps"
-                    offset={10}
-                    fill="hsl(var(--foreground))"
-                  />
-                  <Label
-                    position="insideTopLeft"
-                    value="12,343"
-                    className="text-lg"
-                    fill="hsl(var(--foreground))"
-                    offset={10}
-                    startOffset={100}
-                  />
-                </ReferenceLine>
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-          <CardFooter className="flex-col items-start gap-1">
-            <CardDescription>
-              Over the past 7 days, you have walked{" "}
-              <span className="font-medium text-foreground">53,305</span> steps.
-            </CardDescription>
-            <CardDescription>
-              You need{" "}
-              <span className="font-medium text-foreground">12,584</span> more
-              steps to reach your goal.
-            </CardDescription>
-          </CardFooter>
-        </Card>
-        <Card
-          x-chunk="A line chart showing the resting heart rate for the past 7 days."
-          className="flex flex-col lg:max-w-md"
-        >
-          <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
-            <div>
-              <CardDescription>Resting HR</CardDescription>
-              <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                62
-                <span className="text-sm font-normal tracking-normal text-muted-foreground">
-                  bpm
-                </span>
-              </CardTitle>
-            </div>
-            <div>
-              <CardDescription>Variability</CardDescription>
-              <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-                35
-                <span className="text-sm font-normal tracking-normal text-muted-foreground">
-                  ms
-                </span>
-              </CardTitle>
-            </div>
-          </CardHeader>
-          <CardContent className="flex flex-1 items-center">
-            <ChartContainer
-              config={{
-                resting: {
-                  label: "Resting",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-              className="w-full"
-            >
-              <LineChart
-                accessibilityLayer
-                margin={{
-                  left: 14,
-                  right: 14,
-                  top: 10,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    resting: 62,
-                  },
-                  {
-                    date: "2024-01-02",
-                    resting: 72,
-                  },
-                  {
-                    date: "2024-01-03",
-                    resting: 35,
-                  },
-                  {
-                    date: "2024-01-04",
-                    resting: 62,
-                  },
-                  {
-                    date: "2024-01-05",
-                    resting: 52,
-                  },
-                  {
-                    date: "2024-01-06",
-                    resting: 62,
-                  },
-                  {
-                    date: "2024-01-07",
-                    resting: 70,
-                  },
-                ]}
-              >
-                <CartesianGrid
-                  strokeDasharray="4 4"
-                  vertical={false}
-                  stroke="hsl(var(--muted-foreground))"
-                  strokeOpacity={0.5}
-                />
-                <YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={8}
-                  tickFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      weekday: "short",
-                    })
-                  }}
-                />
-                <Line
-                  dataKey="resting"
-                  type="natural"
-                  fill="var(--color-resting)"
-                  stroke="var(--color-resting)"
-                  strokeWidth={2}
-                  dot={false}
-                  activeDot={{
-                    fill: "var(--color-resting)",
-                    stroke: "var(--color-resting)",
-                    r: 4,
-                  }}
-                />
-                <ChartTooltip
-                  content={
-                    <ChartTooltipContent
-                      indicator="line"
-                      labelFormatter={(value) => {
-                        return new Date(value).toLocaleDateString("en-US", {
-                          day: "numeric",
-                          month: "long",
-                          year: "numeric",
-                        })
-                      }}
-                    />
-                  }
-                  cursor={false}
-                />
-              </LineChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-      </div>
-      <div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
-        <Card
-          x-chunk="Two horizontal bar charts showing total steps taken during the current year and last year."
-          className="max-w-xs"
-        >
-          <CardHeader>
-            <CardTitle>Progress</CardTitle>
-            <CardDescription>
-              You're average more steps a day this year than last year.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="grid gap-4">
-            <div className="grid auto-rows-min gap-2">
-              <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                12,453
-                <span className="text-sm font-normal text-muted-foreground">
-                  steps/day
-                </span>
-              </div>
-              <ChartContainer
-                config={{
-                  steps: {
-                    label: "Steps",
-                    color: "hsl(var(--chart-1))",
-                  },
-                }}
-                className="aspect-auto h-[32px] w-full"
-              >
-                <BarChart
-                  accessibilityLayer
-                  layout="vertical"
-                  margin={{
-                    left: 0,
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                  }}
-                  data={[
-                    {
-                      date: "2024",
-                      steps: 12435,
-                    },
-                  ]}
-                >
-                  <Bar
-                    dataKey="steps"
-                    fill="var(--color-steps)"
-                    radius={4}
-                    barSize={32}
-                  >
-                    <LabelList
-                      position="insideLeft"
-                      dataKey="date"
-                      offset={8}
-                      fontSize={12}
-                      fill="white"
-                    />
-                  </Bar>
-                  <YAxis dataKey="date" type="category" tickCount={1} hide />
-                  <XAxis dataKey="steps" type="number" hide />
-                </BarChart>
-              </ChartContainer>
-            </div>
-            <div className="grid auto-rows-min gap-2">
-              <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                10,103
-                <span className="text-sm font-normal text-muted-foreground">
-                  steps/day
-                </span>
-              </div>
-              <ChartContainer
-                config={{
-                  steps: {
-                    label: "Steps",
-                    color: "hsl(var(--muted))",
-                  },
-                }}
-                className="aspect-auto h-[32px] w-full"
-              >
-                <BarChart
-                  accessibilityLayer
-                  layout="vertical"
-                  margin={{
-                    left: 0,
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                  }}
-                  data={[
-                    {
-                      date: "2023",
-                      steps: 10103,
-                    },
-                  ]}
-                >
-                  <Bar
-                    dataKey="steps"
-                    fill="var(--color-steps)"
-                    radius={4}
-                    barSize={32}
-                  >
-                    <LabelList
-                      position="insideLeft"
-                      dataKey="date"
-                      offset={8}
-                      fontSize={12}
-                      fill="hsl(var(--muted-foreground))"
-                    />
-                  </Bar>
-                  <YAxis dataKey="date" type="category" tickCount={1} hide />
-                  <XAxis dataKey="steps" type="number" hide />
-                </BarChart>
-              </ChartContainer>
-            </div>
-          </CardContent>
-        </Card>
-        <Card
-          x-chunk="A bar chart showing the walking and running distance for the past 7 days."
-          className="max-w-xs"
-        >
-          <CardHeader className="p-4 pb-0">
-            <CardTitle>Walking Distance</CardTitle>
-            <CardDescription>
-              Over the last 7 days, your distance walked and run was 12.5 miles
-              per day.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
-            <div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
-              12.5
-              <span className="text-sm font-normal text-muted-foreground">
-                miles/day
-              </span>
-            </div>
-            <ChartContainer
-              config={{
-                steps: {
-                  label: "Steps",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-              className="ml-auto w-[72px]"
-            >
-              <BarChart
-                accessibilityLayer
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 0,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    steps: 2000,
-                  },
-                  {
-                    date: "2024-01-02",
-                    steps: 2100,
-                  },
-                  {
-                    date: "2024-01-03",
-                    steps: 2200,
-                  },
-                  {
-                    date: "2024-01-04",
-                    steps: 1300,
-                  },
-                  {
-                    date: "2024-01-05",
-                    steps: 1400,
-                  },
-                  {
-                    date: "2024-01-06",
-                    steps: 2500,
-                  },
-                  {
-                    date: "2024-01-07",
-                    steps: 1600,
-                  },
-                ]}
-              >
-                <Bar
-                  dataKey="steps"
-                  fill="var(--color-steps)"
-                  radius={2}
-                  fillOpacity={0.2}
-                  activeIndex={6}
-                  activeBar={<Rectangle fillOpacity={0.8} />}
-                />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={4}
-                  hide
-                />
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-        <Card
-          x-chunk="A bar chart showing move, exercise, and stand progress."
-          className="max-w-xs"
-        >
-          <CardContent className="flex gap-4 p-4 pb-2">
-            <ChartContainer
-              config={{
-                move: {
-                  label: "Move",
-                  color: "hsl(var(--chart-1))",
-                },
-                stand: {
-                  label: "Stand",
-                  color: "hsl(var(--chart-2))",
-                },
-                exercise: {
-                  label: "Exercise",
-                  color: "hsl(var(--chart-3))",
-                },
-              }}
-              className="h-[140px] w-full"
-            >
-              <BarChart
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 10,
-                }}
-                data={[
-                  {
-                    activity: "stand",
-                    value: (8 / 12) * 100,
-                    label: "8/12 hr",
-                    fill: "var(--color-stand)",
-                  },
-                  {
-                    activity: "exercise",
-                    value: (46 / 60) * 100,
-                    label: "46/60 min",
-                    fill: "var(--color-exercise)",
-                  },
-                  {
-                    activity: "move",
-                    value: (245 / 360) * 100,
-                    label: "245/360 kcal",
-                    fill: "var(--color-move)",
-                  },
-                ]}
-                layout="vertical"
-                barSize={32}
-                barGap={2}
-              >
-                <XAxis type="number" dataKey="value" hide />
-                <YAxis
-                  dataKey="activity"
-                  type="category"
-                  tickLine={false}
-                  tickMargin={4}
-                  axisLine={false}
-                  className="capitalize"
-                />
-                <Bar dataKey="value" radius={5}>
-                  <LabelList
-                    position="insideLeft"
-                    dataKey="label"
-                    fill="white"
-                    offset={8}
-                    fontSize={12}
-                  />
-                </Bar>
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-          <CardFooter className="flex flex-row border-t p-4">
-            <div className="flex w-full items-center gap-2">
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-xs text-muted-foreground">Move</div>
-                <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  562
-                  <span className="text-sm font-normal text-muted-foreground">
-                    kcal
-                  </span>
-                </div>
-              </div>
-              <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-xs text-muted-foreground">Exercise</div>
-                <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  73
-                  <span className="text-sm font-normal text-muted-foreground">
-                    min
-                  </span>
-                </div>
-              </div>
-              <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-xs text-muted-foreground">Stand</div>
-                <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-                  14
-                  <span className="text-sm font-normal text-muted-foreground">
-                    hr
-                  </span>
-                </div>
-              </div>
-            </div>
-          </CardFooter>
-        </Card>
-      </div>
-      <div className="grid w-full flex-1 gap-6">
-        <Card
-          x-chunk="A radial bar chart showing the percentage of time spent moving, exercising, and standing."
-          className="max-w-xs"
-        >
-          <CardContent className="flex gap-4 p-4">
-            <div className="grid items-center gap-2">
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-sm text-muted-foreground">Move</div>
-                <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                  562/600
-                  <span className="text-sm font-normal text-muted-foreground">
-                    kcal
-                  </span>
-                </div>
-              </div>
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-sm text-muted-foreground">Exercise</div>
-                <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                  73/120
-                  <span className="text-sm font-normal text-muted-foreground">
-                    min
-                  </span>
-                </div>
-              </div>
-              <div className="grid flex-1 auto-rows-min gap-0.5">
-                <div className="text-sm text-muted-foreground">Stand</div>
-                <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-                  8/12
-                  <span className="text-sm font-normal text-muted-foreground">
-                    hr
-                  </span>
-                </div>
-              </div>
-            </div>
-            <ChartContainer
-              config={{
-                move: {
-                  label: "Move",
-                  color: "hsl(var(--chart-1))",
-                },
-                exercise: {
-                  label: "Exercise",
-                  color: "hsl(var(--chart-2))",
-                },
-                stand: {
-                  label: "Stand",
-                  color: "hsl(var(--chart-3))",
-                },
-              }}
-              className="mx-auto aspect-square w-full max-w-[80%]"
-            >
-              <RadialBarChart
-                margin={{
-                  left: -10,
-                  right: -10,
-                  top: -10,
-                  bottom: -10,
-                }}
-                data={[
-                  {
-                    activity: "stand",
-                    value: (8 / 12) * 100,
-                    fill: "var(--color-stand)",
-                  },
-                  {
-                    activity: "exercise",
-                    value: (46 / 60) * 100,
-                    fill: "var(--color-exercise)",
-                  },
-                  {
-                    activity: "move",
-                    value: (245 / 360) * 100,
-                    fill: "var(--color-move)",
-                  },
-                ]}
-                innerRadius="20%"
-                barSize={24}
-                startAngle={90}
-                endAngle={450}
-              >
-                <PolarAngleAxis
-                  type="number"
-                  domain={[0, 100]}
-                  dataKey="value"
-                  tick={false}
-                />
-                <RadialBar dataKey="value" background cornerRadius={5} />
-              </RadialBarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-        <Card
-          x-chunk="A bar chart showing active energy in the past 7 days."
-          className="max-w-xs"
-        >
-          <CardHeader className="p-4 pb-0">
-            <CardTitle>Active Energy</CardTitle>
-            <CardDescription>
-              You're burning an average of 754 calories per day. Good job!
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
-            <div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
-              1,254
-              <span className="text-sm font-normal text-muted-foreground">
-                kcal/day
-              </span>
-            </div>
-            <ChartContainer
-              config={{
-                calories: {
-                  label: "Calories",
-                  color: "hsl(var(--chart-1))",
-                },
-              }}
-              className="ml-auto w-[64px]"
-            >
-              <BarChart
-                accessibilityLayer
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 0,
-                }}
-                data={[
-                  {
-                    date: "2024-01-01",
-                    calories: 354,
-                  },
-                  {
-                    date: "2024-01-02",
-                    calories: 514,
-                  },
-                  {
-                    date: "2024-01-03",
-                    calories: 345,
-                  },
-                  {
-                    date: "2024-01-04",
-                    calories: 734,
-                  },
-                  {
-                    date: "2024-01-05",
-                    calories: 645,
-                  },
-                  {
-                    date: "2024-01-06",
-                    calories: 456,
-                  },
-                  {
-                    date: "2024-01-07",
-                    calories: 345,
-                  },
-                ]}
-              >
-                <Bar
-                  dataKey="calories"
-                  fill="var(--color-calories)"
-                  radius={2}
-                  fillOpacity={0.2}
-                  activeIndex={6}
-                  activeBar={<Rectangle fillOpacity={0.8} />}
-                />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={4}
-                  hide
-                />
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-        <Card
-          x-chunk="An area chart showing the time spent in bed for the past 7 days."
-          className="max-w-xs"
-        >
-          <CardHeader className="space-y-0 pb-0">
-            <CardDescription>Time in Bed</CardDescription>
-            <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-              8
-              <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-                hr
-              </span>
-              35
-              <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-                min
-              </span>
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-0">
-            <ChartContainer
-              config={{
-                time: {
-                  label: "Time",
-                  color: "hsl(var(--chart-2))",
-                },
-              }}
-            >
-              <AreaChart
-                accessibilityLayer
-                data={[
-                  {
-                    date: "2024-01-01",
-                    time: 8.5,
-                  },
-                  {
-                    date: "2024-01-02",
-                    time: 7.2,
-                  },
-                  {
-                    date: "2024-01-03",
-                    time: 8.1,
-                  },
-                  {
-                    date: "2024-01-04",
-                    time: 6.2,
-                  },
-                  {
-                    date: "2024-01-05",
-                    time: 5.2,
-                  },
-                  {
-                    date: "2024-01-06",
-                    time: 8.1,
-                  },
-                  {
-                    date: "2024-01-07",
-                    time: 7.0,
-                  },
-                ]}
-                margin={{
-                  left: 0,
-                  right: 0,
-                  top: 0,
-                  bottom: 0,
-                }}
-              >
-                <XAxis dataKey="date" hide />
-                <YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
-                <defs>
-                  <linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
-                    <stop
-                      offset="5%"
-                      stopColor="var(--color-time)"
-                      stopOpacity={0.8}
-                    />
-                    <stop
-                      offset="95%"
-                      stopColor="var(--color-time)"
-                      stopOpacity={0.1}
-                    />
-                  </linearGradient>
-                </defs>
-                <Area
-                  dataKey="time"
-                  type="natural"
-                  fill="url(#fillTime)"
-                  fillOpacity={0.4}
-                  stroke="var(--color-time)"
-                />
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent hideLabel />}
-                  formatter={(value) => (
-                    <div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
-                      Time in bed
-                      <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
-                        {value}
-                        <span className="font-normal text-muted-foreground">
-                          hr
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                />
-              </AreaChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01-chunk-0.tsx b/apps/www/registry/default/block/dashboard-01-chunk-0.tsx
deleted file mode 100644
index 4fe27e7c82f..00000000000
--- a/apps/www/registry/default/block/dashboard-01-chunk-0.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client"
-
-import { DollarSign } from "lucide-react"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-01-chunk-0">
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
-        <DollarSign className="h-4 w-4 text-muted-foreground" />
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">$45,231.89</div>
-        <p className="text-xs text-muted-foreground">+20.1% from last month</p>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01-chunk-1.tsx b/apps/www/registry/default/block/dashboard-01-chunk-1.tsx
deleted file mode 100644
index ec3ac821535..00000000000
--- a/apps/www/registry/default/block/dashboard-01-chunk-1.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client"
-
-import { Users } from "lucide-react"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-01-chunk-1">
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
-        <Users className="h-4 w-4 text-muted-foreground" />
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">+2350</div>
-        <p className="text-xs text-muted-foreground">+180.1% from last month</p>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01-chunk-2.tsx b/apps/www/registry/default/block/dashboard-01-chunk-2.tsx
deleted file mode 100644
index 312104c53f2..00000000000
--- a/apps/www/registry/default/block/dashboard-01-chunk-2.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client"
-
-import { CreditCard } from "lucide-react"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-01-chunk-2">
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Sales</CardTitle>
-        <CreditCard className="h-4 w-4 text-muted-foreground" />
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">+12,234</div>
-        <p className="text-xs text-muted-foreground">+19% from last month</p>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01-chunk-3.tsx b/apps/www/registry/default/block/dashboard-01-chunk-3.tsx
deleted file mode 100644
index 43252bbc4dd..00000000000
--- a/apps/www/registry/default/block/dashboard-01-chunk-3.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client"
-
-import { Activity } from "lucide-react"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-01-chunk-3">
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-        <Activity className="h-4 w-4 text-muted-foreground" />
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">+573</div>
-        <p className="text-xs text-muted-foreground">+201 since last hour</p>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01-chunk-4.tsx b/apps/www/registry/default/block/dashboard-01-chunk-4.tsx
deleted file mode 100644
index 59b3088227a..00000000000
--- a/apps/www/registry/default/block/dashboard-01-chunk-4.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { ArrowUpRight } from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-
-export default function Component() {
-  return (
-    <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
-      <CardHeader className="flex flex-row items-center">
-        <div className="grid gap-2">
-          <CardTitle>Transactions</CardTitle>
-          <CardDescription>
-            Recent transactions from your store.
-          </CardDescription>
-        </div>
-        <Button asChild size="sm" className="ml-auto gap-1">
-          <Link href="#">
-            View All
-            <ArrowUpRight className="h-4 w-4" />
-          </Link>
-        </Button>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Customer</TableHead>
-              <TableHead className="hidden xl:table-column">Type</TableHead>
-              <TableHead className="hidden xl:table-column">Status</TableHead>
-              <TableHead className="hidden xl:table-column">Date</TableHead>
-              <TableHead className="text-right">Amount</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Liam Johnson</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  liam@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden xl:table-column">Sale</TableCell>
-              <TableCell className="hidden xl:table-column">
-                <Badge className="text-xs" variant="outline">
-                  Approved
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                2023-06-23
-              </TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Olivia Smith</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  olivia@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden xl:table-column">Refund</TableCell>
-              <TableCell className="hidden xl:table-column">
-                <Badge className="text-xs" variant="outline">
-                  Declined
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                2023-06-24
-              </TableCell>
-              <TableCell className="text-right">$150.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Noah Williams</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  noah@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden xl:table-column">
-                Subscription
-              </TableCell>
-              <TableCell className="hidden xl:table-column">
-                <Badge className="text-xs" variant="outline">
-                  Approved
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                2023-06-25
-              </TableCell>
-              <TableCell className="text-right">$350.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Emma Brown</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  emma@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden xl:table-column">Sale</TableCell>
-              <TableCell className="hidden xl:table-column">
-                <Badge className="text-xs" variant="outline">
-                  Approved
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                2023-06-26
-              </TableCell>
-              <TableCell className="text-right">$450.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Liam Johnson</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  liam@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden xl:table-column">Sale</TableCell>
-              <TableCell className="hidden xl:table-column">
-                <Badge className="text-xs" variant="outline">
-                  Approved
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                2023-06-27
-              </TableCell>
-              <TableCell className="text-right">$550.00</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01-chunk-5.tsx b/apps/www/registry/default/block/dashboard-01-chunk-5.tsx
deleted file mode 100644
index af5efea9b7b..00000000000
--- a/apps/www/registry/default/block/dashboard-01-chunk-5.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-"use client"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-01-chunk-5">
-      <CardHeader>
-        <CardTitle>Recent Sales</CardTitle>
-      </CardHeader>
-      <CardContent className="grid gap-8">
-        <div className="flex items-center gap-4">
-          <Avatar className="hidden h-9 w-9 sm:flex">
-            <AvatarImage src="/avatars/01.png" alt="Avatar" />
-            <AvatarFallback>OM</AvatarFallback>
-          </Avatar>
-          <div className="grid gap-1">
-            <p className="text-sm font-medium leading-none">Olivia Martin</p>
-            <p className="text-sm text-muted-foreground">
-              olivia.martin@email.com
-            </p>
-          </div>
-          <div className="ml-auto font-medium">+$1,999.00</div>
-        </div>
-        <div className="flex items-center gap-4">
-          <Avatar className="hidden h-9 w-9 sm:flex">
-            <AvatarImage src="/avatars/02.png" alt="Avatar" />
-            <AvatarFallback>JL</AvatarFallback>
-          </Avatar>
-          <div className="grid gap-1">
-            <p className="text-sm font-medium leading-none">Jackson Lee</p>
-            <p className="text-sm text-muted-foreground">
-              jackson.lee@email.com
-            </p>
-          </div>
-          <div className="ml-auto font-medium">+$39.00</div>
-        </div>
-        <div className="flex items-center gap-4">
-          <Avatar className="hidden h-9 w-9 sm:flex">
-            <AvatarImage src="/avatars/03.png" alt="Avatar" />
-            <AvatarFallback>IN</AvatarFallback>
-          </Avatar>
-          <div className="grid gap-1">
-            <p className="text-sm font-medium leading-none">Isabella Nguyen</p>
-            <p className="text-sm text-muted-foreground">
-              isabella.nguyen@email.com
-            </p>
-          </div>
-          <div className="ml-auto font-medium">+$299.00</div>
-        </div>
-        <div className="flex items-center gap-4">
-          <Avatar className="hidden h-9 w-9 sm:flex">
-            <AvatarImage src="/avatars/04.png" alt="Avatar" />
-            <AvatarFallback>WK</AvatarFallback>
-          </Avatar>
-          <div className="grid gap-1">
-            <p className="text-sm font-medium leading-none">William Kim</p>
-            <p className="text-sm text-muted-foreground">will@email.com</p>
-          </div>
-          <div className="ml-auto font-medium">+$99.00</div>
-        </div>
-        <div className="flex items-center gap-4">
-          <Avatar className="hidden h-9 w-9 sm:flex">
-            <AvatarImage src="/avatars/05.png" alt="Avatar" />
-            <AvatarFallback>SD</AvatarFallback>
-          </Avatar>
-          <div className="grid gap-1">
-            <p className="text-sm font-medium leading-none">Sofia Davis</p>
-            <p className="text-sm text-muted-foreground">
-              sofia.davis@email.com
-            </p>
-          </div>
-          <div className="ml-auto font-medium">+$39.00</div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01.tsx b/apps/www/registry/default/block/dashboard-01.tsx
deleted file mode 100644
index 430bae9b200..00000000000
--- a/apps/www/registry/default/block/dashboard-01.tsx
+++ /dev/null
@@ -1,458 +0,0 @@
-import Link from "next/link"
-import {
-  Activity,
-  ArrowUpRight,
-  CircleUser,
-  CreditCard,
-  DollarSign,
-  Menu,
-  Package2,
-  Search,
-  Users,
-} from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-import { Badge } from "@/registry/default/ui/badge"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-
-export const description =
-  "An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image."
-
-export const iframeHeight = "825px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col">
-      <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
-        <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-          <Link
-            href="#"
-            className="flex items-center gap-2 text-lg font-semibold md:text-base"
-          >
-            <Package2 className="h-6 w-6" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Link
-            href="#"
-            className="text-foreground transition-colors hover:text-foreground"
-          >
-            Dashboard
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Orders
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Products
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Customers
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Analytics
-          </Link>
-        </nav>
-        <Sheet>
-          <SheetTrigger asChild>
-            <Button
-              variant="outline"
-              size="icon"
-              className="shrink-0 md:hidden"
-            >
-              <Menu className="h-5 w-5" />
-              <span className="sr-only">Toggle navigation menu</span>
-            </Button>
-          </SheetTrigger>
-          <SheetContent side="left">
-            <nav className="grid gap-6 text-lg font-medium">
-              <Link
-                href="#"
-                className="flex items-center gap-2 text-lg font-semibold"
-              >
-                <Package2 className="h-6 w-6" />
-                <span className="sr-only">Acme Inc</span>
-              </Link>
-              <Link href="#" className="hover:text-foreground">
-                Dashboard
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Orders
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Products
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Customers
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Analytics
-              </Link>
-            </nav>
-          </SheetContent>
-        </Sheet>
-        <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
-          <form className="ml-auto flex-1 sm:flex-initial">
-            <div className="relative">
-              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input
-                type="search"
-                placeholder="Search products..."
-                className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
-              />
-            </div>
-          </form>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" size="icon" className="rounded-full">
-                <CircleUser className="h-5 w-5" />
-                <span className="sr-only">Toggle user menu</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </header>
-      <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
-        <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-          <Card x-chunk="A card showing the total revenue in USD and the percentage difference from last month.">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Total Revenue
-              </CardTitle>
-              <DollarSign className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">$45,231.89</div>
-              <p className="text-xs text-muted-foreground">
-                +20.1% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card x-chunk="A card showing the total subscriptions and the percentage difference from last month.">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Subscriptions
-              </CardTitle>
-              <Users className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">+2350</div>
-              <p className="text-xs text-muted-foreground">
-                +180.1% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card x-chunk="A card showing the total sales and the percentage difference from last month.">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Sales</CardTitle>
-              <CreditCard className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">+12,234</div>
-              <p className="text-xs text-muted-foreground">
-                +19% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card x-chunk="A card showing the total active users and the percentage difference from last hour.">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-              <Activity className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">+573</div>
-              <p className="text-xs text-muted-foreground">
-                +201 since last hour
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-        <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-          <Card
-            className="xl:col-span-2"
-            x-chunk="A card showing a table of recent transactions with a link to view all transactions."
-          >
-            <CardHeader className="flex flex-row items-center">
-              <div className="grid gap-2">
-                <CardTitle>Transactions</CardTitle>
-                <CardDescription>
-                  Recent transactions from your store.
-                </CardDescription>
-              </div>
-              <Button asChild size="sm" className="ml-auto gap-1">
-                <Link href="#">
-                  View All
-                  <ArrowUpRight className="h-4 w-4" />
-                </Link>
-              </Button>
-            </CardHeader>
-            <CardContent>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Customer</TableHead>
-                    <TableHead className="hidden xl:table-column">
-                      Type
-                    </TableHead>
-                    <TableHead className="hidden xl:table-column">
-                      Status
-                    </TableHead>
-                    <TableHead className="hidden xl:table-column">
-                      Date
-                    </TableHead>
-                    <TableHead className="text-right">Amount</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Liam Johnson</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        liam@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Sale
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-23
-                    </TableCell>
-                    <TableCell className="text-right">$250.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Olivia Smith</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        olivia@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Refund
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Declined
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-24
-                    </TableCell>
-                    <TableCell className="text-right">$150.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Noah Williams</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        noah@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Subscription
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-25
-                    </TableCell>
-                    <TableCell className="text-right">$350.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Emma Brown</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        emma@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Sale
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-26
-                    </TableCell>
-                    <TableCell className="text-right">$450.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Liam Johnson</div>
-                      <div className="hidden text-sm text-muted-foreground md:inline">
-                        liam@example.com
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      Sale
-                    </TableCell>
-                    <TableCell className="hidden xl:table-column">
-                      <Badge className="text-xs" variant="outline">
-                        Approved
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                      2023-06-27
-                    </TableCell>
-                    <TableCell className="text-right">$550.00</TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-          <Card x-chunk="A card showing a list of recent sales with customer names and email addresses.">
-            <CardHeader>
-              <CardTitle>Recent Sales</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-8">
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/01.png" alt="Avatar" />
-                  <AvatarFallback>OM</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Olivia Martin
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    olivia.martin@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$1,999.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/02.png" alt="Avatar" />
-                  <AvatarFallback>JL</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Jackson Lee
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    jackson.lee@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$39.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/03.png" alt="Avatar" />
-                  <AvatarFallback>IN</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Isabella Nguyen
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    isabella.nguyen@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$299.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/04.png" alt="Avatar" />
-                  <AvatarFallback>WK</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    William Kim
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    will@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$99.00</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <Avatar className="hidden h-9 w-9 sm:flex">
-                  <AvatarImage src="/avatars/05.png" alt="Avatar" />
-                  <AvatarFallback>SD</AvatarFallback>
-                </Avatar>
-                <div className="grid gap-1">
-                  <p className="text-sm font-medium leading-none">
-                    Sofia Davis
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    sofia.davis@email.com
-                  </p>
-                </div>
-                <div className="ml-auto font-medium">+$39.00</div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </main>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-02-chunk-0.tsx b/apps/www/registry/default/block/dashboard-02-chunk-0.tsx
deleted file mode 100644
index de9cf4fa936..00000000000
--- a/apps/www/registry/default/block/dashboard-02-chunk-0.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-02-chunk-0">
-      <CardHeader className="p-2 pt-0 md:p-4">
-        <CardTitle>Upgrade to Pro</CardTitle>
-        <CardDescription>
-          Unlock all features and get unlimited access to our support team.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
-        <Button size="sm" className="w-full">
-          Upgrade
-        </Button>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-02-chunk-1.tsx b/apps/www/registry/default/block/dashboard-02-chunk-1.tsx
deleted file mode 100644
index 63cf0f308b8..00000000000
--- a/apps/www/registry/default/block/dashboard-02-chunk-1.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function Component() {
-  return (
-    <div
-      className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-      x-chunk="dashboard-02-chunk-1"
-    >
-      <div className="flex flex-col items-center gap-1 text-center">
-        <h3 className="text-2xl font-bold tracking-tight">
-          You have no products
-        </h3>
-        <p className="text-sm text-muted-foreground">
-          You can start selling as soon as you add a product.
-        </p>
-        <Button className="mt-4">Add Product</Button>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-02.tsx b/apps/www/registry/default/block/dashboard-02.tsx
deleted file mode 100644
index f9224b5257f..00000000000
--- a/apps/www/registry/default/block/dashboard-02.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import Link from "next/link"
-import {
-  Bell,
-  CircleUser,
-  Home,
-  LineChart,
-  Menu,
-  Package,
-  Package2,
-  Search,
-  ShoppingCart,
-  Users,
-} from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-
-export const description =
-  "A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action."
-
-export const iframeHeight = "800px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-      <div className="hidden border-r bg-muted/40 md:block">
-        <div className="flex h-full max-h-screen flex-col gap-2">
-          <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
-            <Link href="/" className="flex items-center gap-2 font-semibold">
-              <Package2 className="h-6 w-6" />
-              <span className="">Acme Inc</span>
-            </Link>
-            <Button variant="outline" size="icon" className="ml-auto h-8 w-8">
-              <Bell className="h-4 w-4" />
-              <span className="sr-only">Toggle notifications</span>
-            </Button>
-          </div>
-          <div className="flex-1">
-            <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <Home className="h-4 w-4" />
-                Dashboard
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <ShoppingCart className="h-4 w-4" />
-                Orders
-                <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
-                  6
-                </Badge>
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
-              >
-                <Package className="h-4 w-4" />
-                Products{" "}
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <Users className="h-4 w-4" />
-                Customers
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <LineChart className="h-4 w-4" />
-                Analytics
-              </Link>
-            </nav>
-          </div>
-          <div className="mt-auto p-4">
-            <Card x-chunk="A card with a call to action">
-              <CardHeader className="p-2 pt-0 md:p-4">
-                <CardTitle>Upgrade to Pro</CardTitle>
-                <CardDescription>
-                  Unlock all features and get unlimited access to our support
-                  team.
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
-                <Button size="sm" className="w-full">
-                  Upgrade
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-col">
-        <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="shrink-0 md:hidden"
-              >
-                <Menu className="h-5 w-5" />
-                <span className="sr-only">Toggle navigation menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="flex flex-col">
-              <nav className="grid gap-2 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="flex items-center gap-2 text-lg font-semibold"
-                >
-                  <Package2 className="h-6 w-6" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                  <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
-                    6
-                  </Badge>
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <Users className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Analytics
-                </Link>
-              </nav>
-              <div className="mt-auto">
-                <Card>
-                  <CardHeader>
-                    <CardTitle>Upgrade to Pro</CardTitle>
-                    <CardDescription>
-                      Unlock all features and get unlimited access to our
-                      support team.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Button size="sm" className="w-full">
-                      Upgrade
-                    </Button>
-                  </CardContent>
-                </Card>
-              </div>
-            </SheetContent>
-          </Sheet>
-          <div className="w-full flex-1">
-            <form>
-              <div className="relative">
-                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-                <Input
-                  type="search"
-                  placeholder="Search products..."
-                  className="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
-                />
-              </div>
-            </form>
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" size="icon" className="rounded-full">
-                <CircleUser className="h-5 w-5" />
-                <span className="sr-only">Toggle user menu</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
-          <div className="flex items-center">
-            <h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
-          </div>
-          <div
-            x-chunk="An empty state showing no products with a heading, description and a call to action to add a product."
-            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-          >
-            <div className="flex flex-col items-center gap-1 text-center">
-              <h3 className="text-2xl font-bold tracking-tight">
-                You have no products
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                You can start selling as soon as you add a product.
-              </p>
-              <Button className="mt-4">Add Product</Button>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-03-chunk-0.tsx b/apps/www/registry/default/block/dashboard-03-chunk-0.tsx
deleted file mode 100644
index 54bf64ef1b3..00000000000
--- a/apps/www/registry/default/block/dashboard-03-chunk-0.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client"
-
-import { Bird, Rabbit, Turtle } from "lucide-react"
-
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-import { Textarea } from "@/registry/default/ui/textarea"
-
-export default function Component() {
-  return (
-    <div
-      className="relative hidden flex-col items-start gap-8 md:flex"
-      x-chunk="dashboard-03-chunk-0"
-    >
-      <form className="grid w-full items-start gap-6">
-        <fieldset className="grid gap-6 rounded-lg border p-4">
-          <legend className="-ml-1 px-1 text-sm font-medium">Settings</legend>
-          <div className="grid gap-3">
-            <Label htmlFor="model">Model</Label>
-            <Select>
-              <SelectTrigger
-                id="model"
-                className="items-start [&_[data-description]]:hidden"
-              >
-                <SelectValue placeholder="Select a model" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="genesis">
-                  <div className="flex items-start gap-3 text-muted-foreground">
-                    <Rabbit className="size-5" />
-                    <div className="grid gap-0.5">
-                      <p>
-                        Neural{" "}
-                        <span className="font-medium text-foreground">
-                          Genesis
-                        </span>
-                      </p>
-                      <p className="text-xs" data-description>
-                        Our fastest model for general use cases.
-                      </p>
-                    </div>
-                  </div>
-                </SelectItem>
-                <SelectItem value="explorer">
-                  <div className="flex items-start gap-3 text-muted-foreground">
-                    <Bird className="size-5" />
-                    <div className="grid gap-0.5">
-                      <p>
-                        Neural{" "}
-                        <span className="font-medium text-foreground">
-                          Explorer
-                        </span>
-                      </p>
-                      <p className="text-xs" data-description>
-                        Performance and speed for efficiency.
-                      </p>
-                    </div>
-                  </div>
-                </SelectItem>
-                <SelectItem value="quantum">
-                  <div className="flex items-start gap-3 text-muted-foreground">
-                    <Turtle className="size-5" />
-                    <div className="grid gap-0.5">
-                      <p>
-                        Neural{" "}
-                        <span className="font-medium text-foreground">
-                          Quantum
-                        </span>
-                      </p>
-                      <p className="text-xs" data-description>
-                        The most powerful model for complex computations.
-                      </p>
-                    </div>
-                  </div>
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="grid gap-3">
-            <Label htmlFor="temperature">Temperature</Label>
-            <Input id="temperature" type="number" placeholder="0.4" />
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div className="grid gap-3">
-              <Label htmlFor="top-p">Top P</Label>
-              <Input id="top-p" type="number" placeholder="0.7" />
-            </div>
-            <div className="grid gap-3">
-              <Label htmlFor="top-k">Top K</Label>
-              <Input id="top-k" type="number" placeholder="0.0" />
-            </div>
-          </div>
-        </fieldset>
-        <fieldset className="grid gap-6 rounded-lg border p-4">
-          <legend className="-ml-1 px-1 text-sm font-medium">Messages</legend>
-          <div className="grid gap-3">
-            <Label htmlFor="role">Role</Label>
-            <Select defaultValue="system">
-              <SelectTrigger>
-                <SelectValue placeholder="Select a role" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="system">System</SelectItem>
-                <SelectItem value="user">User</SelectItem>
-                <SelectItem value="assistant">Assistant</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="grid gap-3">
-            <Label htmlFor="content">Content</Label>
-            <Textarea
-              id="content"
-              placeholder="You are a..."
-              className="min-h-[9.5rem]"
-            />
-          </div>
-        </fieldset>
-      </form>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-03-chunk-1.tsx b/apps/www/registry/default/block/dashboard-03-chunk-1.tsx
deleted file mode 100644
index d6fb596f282..00000000000
--- a/apps/www/registry/default/block/dashboard-03-chunk-1.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client"
-
-import { CornerDownLeft, Mic, Paperclip } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import { Label } from "@/registry/default/ui/label"
-import { Textarea } from "@/registry/default/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/default/ui/tooltip"
-
-export default function Component() {
-  return (
-    <form
-      className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
-      x-chunk="dashboard-03-chunk-1"
-    >
-      <Label htmlFor="message" className="sr-only">
-        Message
-      </Label>
-      <Textarea
-        id="message"
-        placeholder="Type your message here..."
-        className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
-      />
-      <div className="flex items-center p-3 pt-0">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <Paperclip className="size-4" />
-              <span className="sr-only">Attach file</span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="top">Attach File</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <Mic className="size-4" />
-              <span className="sr-only">Use Microphone</span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="top">Use Microphone</TooltipContent>
-        </Tooltip>
-        <Button type="submit" size="sm" className="ml-auto gap-1.5">
-          Send Message
-          <CornerDownLeft className="size-3.5" />
-        </Button>
-      </div>
-    </form>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-03.tsx b/apps/www/registry/default/block/dashboard-03.tsx
deleted file mode 100644
index 8b8ba39e308..00000000000
--- a/apps/www/registry/default/block/dashboard-03.tsx
+++ /dev/null
@@ -1,464 +0,0 @@
-import {
-  Bird,
-  Book,
-  Bot,
-  Code2,
-  CornerDownLeft,
-  LifeBuoy,
-  Mic,
-  Paperclip,
-  Rabbit,
-  Settings,
-  Settings2,
-  Share,
-  SquareTerminal,
-  SquareUser,
-  Triangle,
-  Turtle,
-} from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/default/ui/drawer"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-import { Textarea } from "@/registry/default/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/default/ui/tooltip"
-
-export const description =
-  "An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages."
-
-export const iframeHeight = "740px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="grid h-screen w-full pl-[56px]">
-      <aside className="inset-y fixed  left-0 z-20 flex h-full flex-col border-r">
-        <div className="border-b p-2">
-          <Button variant="outline" size="icon" aria-label="Home">
-            <Triangle className="size-5 fill-foreground" />
-          </Button>
-        </div>
-        <nav className="grid gap-1 p-2">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg bg-muted"
-                aria-label="Playground"
-              >
-                <SquareTerminal className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Playground
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="Models"
-              >
-                <Bot className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Models
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="API"
-              >
-                <Code2 className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              API
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="Documentation"
-              >
-                <Book className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Documentation
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="rounded-lg"
-                aria-label="Settings"
-              >
-                <Settings2 className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Settings
-            </TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto grid gap-1 p-2">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="mt-auto rounded-lg"
-                aria-label="Help"
-              >
-                <LifeBuoy className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Help
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="mt-auto rounded-lg"
-                aria-label="Account"
-              >
-                <SquareUser className="size-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={5}>
-              Account
-            </TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col">
-        <header className="sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4">
-          <h1 className="text-xl font-semibold">Playground</h1>
-          <Drawer>
-            <DrawerTrigger asChild>
-              <Button variant="ghost" size="icon" className="md:hidden">
-                <Settings className="size-4" />
-                <span className="sr-only">Settings</span>
-              </Button>
-            </DrawerTrigger>
-            <DrawerContent className="max-h-[80vh]">
-              <DrawerHeader>
-                <DrawerTitle>Configuration</DrawerTitle>
-                <DrawerDescription>
-                  Configure the settings for the model and messages.
-                </DrawerDescription>
-              </DrawerHeader>
-              <form className="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
-                <fieldset className="grid gap-6 rounded-lg border p-4">
-                  <legend className="-ml-1 px-1 text-sm font-medium">
-                    Settings
-                  </legend>
-                  <div className="grid gap-3">
-                    <Label htmlFor="model">Model</Label>
-                    <Select>
-                      <SelectTrigger
-                        id="model"
-                        className="items-start [&_[data-description]]:hidden"
-                      >
-                        <SelectValue placeholder="Select a model" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="genesis">
-                          <div className="flex items-start gap-3 text-muted-foreground">
-                            <Rabbit className="size-5" />
-                            <div className="grid gap-0.5">
-                              <p>
-                                Neural{" "}
-                                <span className="font-medium text-foreground">
-                                  Genesis
-                                </span>
-                              </p>
-                              <p className="text-xs" data-description>
-                                Our fastest model for general use cases.
-                              </p>
-                            </div>
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="explorer">
-                          <div className="flex items-start gap-3 text-muted-foreground">
-                            <Bird className="size-5" />
-                            <div className="grid gap-0.5">
-                              <p>
-                                Neural{" "}
-                                <span className="font-medium text-foreground">
-                                  Explorer
-                                </span>
-                              </p>
-                              <p className="text-xs" data-description>
-                                Performance and speed for efficiency.
-                              </p>
-                            </div>
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="quantum">
-                          <div className="flex items-start gap-3 text-muted-foreground">
-                            <Turtle className="size-5" />
-                            <div className="grid gap-0.5">
-                              <p>
-                                Neural{" "}
-                                <span className="font-medium text-foreground">
-                                  Quantum
-                                </span>
-                              </p>
-                              <p className="text-xs" data-description>
-                                The most powerful model for complex
-                                computations.
-                              </p>
-                            </div>
-                          </div>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="temperature">Temperature</Label>
-                    <Input id="temperature" type="number" placeholder="0.4" />
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-p">Top P</Label>
-                    <Input id="top-p" type="number" placeholder="0.7" />
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-k">Top K</Label>
-                    <Input id="top-k" type="number" placeholder="0.0" />
-                  </div>
-                </fieldset>
-                <fieldset className="grid gap-6 rounded-lg border p-4">
-                  <legend className="-ml-1 px-1 text-sm font-medium">
-                    Messages
-                  </legend>
-                  <div className="grid gap-3">
-                    <Label htmlFor="role">Role</Label>
-                    <Select defaultValue="system">
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a role" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="system">System</SelectItem>
-                        <SelectItem value="user">User</SelectItem>
-                        <SelectItem value="assistant">Assistant</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="content">Content</Label>
-                    <Textarea id="content" placeholder="You are a..." />
-                  </div>
-                </fieldset>
-              </form>
-            </DrawerContent>
-          </Drawer>
-          <Button
-            variant="outline"
-            size="sm"
-            className="ml-auto gap-1.5 text-sm"
-          >
-            <Share className="size-3.5" />
-            Share
-          </Button>
-        </header>
-        <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
-          <div
-            className="relative hidden flex-col items-start gap-8 md:flex"
-            x-chunk="A settings form a configuring an AI model and messages."
-          >
-            <form className="grid w-full items-start gap-6">
-              <fieldset className="grid gap-6 rounded-lg border p-4">
-                <legend className="-ml-1 px-1 text-sm font-medium">
-                  Settings
-                </legend>
-                <div className="grid gap-3">
-                  <Label htmlFor="model">Model</Label>
-                  <Select>
-                    <SelectTrigger
-                      id="model"
-                      className="items-start [&_[data-description]]:hidden"
-                    >
-                      <SelectValue placeholder="Select a model" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="genesis">
-                        <div className="flex items-start gap-3 text-muted-foreground">
-                          <Rabbit className="size-5" />
-                          <div className="grid gap-0.5">
-                            <p>
-                              Neural{" "}
-                              <span className="font-medium text-foreground">
-                                Genesis
-                              </span>
-                            </p>
-                            <p className="text-xs" data-description>
-                              Our fastest model for general use cases.
-                            </p>
-                          </div>
-                        </div>
-                      </SelectItem>
-                      <SelectItem value="explorer">
-                        <div className="flex items-start gap-3 text-muted-foreground">
-                          <Bird className="size-5" />
-                          <div className="grid gap-0.5">
-                            <p>
-                              Neural{" "}
-                              <span className="font-medium text-foreground">
-                                Explorer
-                              </span>
-                            </p>
-                            <p className="text-xs" data-description>
-                              Performance and speed for efficiency.
-                            </p>
-                          </div>
-                        </div>
-                      </SelectItem>
-                      <SelectItem value="quantum">
-                        <div className="flex items-start gap-3 text-muted-foreground">
-                          <Turtle className="size-5" />
-                          <div className="grid gap-0.5">
-                            <p>
-                              Neural{" "}
-                              <span className="font-medium text-foreground">
-                                Quantum
-                              </span>
-                            </p>
-                            <p className="text-xs" data-description>
-                              The most powerful model for complex computations.
-                            </p>
-                          </div>
-                        </div>
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="temperature">Temperature</Label>
-                  <Input id="temperature" type="number" placeholder="0.4" />
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-p">Top P</Label>
-                    <Input id="top-p" type="number" placeholder="0.7" />
-                  </div>
-                  <div className="grid gap-3">
-                    <Label htmlFor="top-k">Top K</Label>
-                    <Input id="top-k" type="number" placeholder="0.0" />
-                  </div>
-                </div>
-              </fieldset>
-              <fieldset className="grid gap-6 rounded-lg border p-4">
-                <legend className="-ml-1 px-1 text-sm font-medium">
-                  Messages
-                </legend>
-                <div className="grid gap-3">
-                  <Label htmlFor="role">Role</Label>
-                  <Select defaultValue="system">
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a role" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="system">System</SelectItem>
-                      <SelectItem value="user">User</SelectItem>
-                      <SelectItem value="assistant">Assistant</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="content">Content</Label>
-                  <Textarea
-                    id="content"
-                    placeholder="You are a..."
-                    className="min-h-[9.5rem]"
-                  />
-                </div>
-              </fieldset>
-            </form>
-          </div>
-          <div className="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
-            <Badge variant="outline" className="absolute right-3 top-3">
-              Output
-            </Badge>
-            <div className="flex-1" />
-            <form
-              className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
-              x-chunk="A form for sending a message to an AI chatbot. The form has a textarea and buttons to upload files and record audio."
-            >
-              <Label htmlFor="message" className="sr-only">
-                Message
-              </Label>
-              <Textarea
-                id="message"
-                placeholder="Type your message here..."
-                className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
-              />
-              <div className="flex items-center p-3 pt-0">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="ghost" size="icon">
-                      <Paperclip className="size-4" />
-                      <span className="sr-only">Attach file</span>
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">Attach File</TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="ghost" size="icon">
-                      <Mic className="size-4" />
-                      <span className="sr-only">Use Microphone</span>
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">Use Microphone</TooltipContent>
-                </Tooltip>
-                <Button type="submit" size="sm" className="ml-auto gap-1.5">
-                  Send Message
-                  <CornerDownLeft className="size-3.5" />
-                </Button>
-              </div>
-            </form>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-04-chunk-0.tsx b/apps/www/registry/default/block/dashboard-04-chunk-0.tsx
deleted file mode 100644
index 406f27e0896..00000000000
--- a/apps/www/registry/default/block/dashboard-04-chunk-0.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client"
-
-import Link from "next/link"
-
-export default function Component() {
-  return (
-    <nav
-      className="grid gap-4 text-sm text-muted-foreground"
-      x-chunk="dashboard-04-chunk-0"
-    >
-      <Link href="#" className="font-semibold text-primary">
-        General
-      </Link>
-      <Link href="#">Security</Link>
-      <Link href="#">Integrations</Link>
-      <Link href="#">Support</Link>
-      <Link href="#">Organizations</Link>
-      <Link href="#">Advanced</Link>
-    </nav>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-04-chunk-1.tsx b/apps/www/registry/default/block/dashboard-04-chunk-1.tsx
deleted file mode 100644
index 1572ff5d51d..00000000000
--- a/apps/www/registry/default/block/dashboard-04-chunk-1.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client"
-
-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"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-04-chunk-1">
-      <CardHeader>
-        <CardTitle>Store Name</CardTitle>
-        <CardDescription>
-          Used to identify your store in the marketplace.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <Input placeholder="Store Name" />
-        </form>
-      </CardContent>
-      <CardFooter className="border-t px-6 py-4">
-        <Button>Save</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-04-chunk-2.tsx b/apps/www/registry/default/block/dashboard-04-chunk-2.tsx
deleted file mode 100644
index e3011466e0a..00000000000
--- a/apps/www/registry/default/block/dashboard-04-chunk-2.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Checkbox } from "@/registry/default/ui/checkbox"
-import { Input } from "@/registry/default/ui/input"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-04-chunk-2">
-      <CardHeader>
-        <CardTitle>Plugins Directory</CardTitle>
-        <CardDescription>
-          The directory within your project, in which your plugins are located.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form className="flex flex-col gap-4">
-          <Input placeholder="Project Name" defaultValue="/content/plugins" />
-          <div className="flex items-center space-x-2">
-            <Checkbox id="include" defaultChecked />
-            <label
-              htmlFor="include"
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              Allow administrators to change the directory.
-            </label>
-          </div>
-        </form>
-      </CardContent>
-      <CardFooter className="border-t px-6 py-4">
-        <Button>Save</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-04.tsx b/apps/www/registry/default/block/dashboard-04.tsx
deleted file mode 100644
index d375d6b6d86..00000000000
--- a/apps/www/registry/default/block/dashboard-04.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import Link from "next/link"
-import { CircleUser, Menu, Package2, Search } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Checkbox } from "@/registry/default/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-
-export const description =
-  "A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings."
-
-export const iframeHeight = "780px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col">
-      <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
-        <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-          <Link
-            href="#"
-            className="flex items-center gap-2 text-lg font-semibold md:text-base"
-          >
-            <Package2 className="h-6 w-6" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Dashboard
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Orders
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Products
-          </Link>
-          <Link
-            href="#"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Customers
-          </Link>
-          <Link
-            href="#"
-            className="text-foreground transition-colors hover:text-foreground"
-          >
-            Settings
-          </Link>
-        </nav>
-        <Sheet>
-          <SheetTrigger asChild>
-            <Button
-              variant="outline"
-              size="icon"
-              className="shrink-0 md:hidden"
-            >
-              <Menu className="h-5 w-5" />
-              <span className="sr-only">Toggle navigation menu</span>
-            </Button>
-          </SheetTrigger>
-          <SheetContent side="left">
-            <nav className="grid gap-6 text-lg font-medium">
-              <Link
-                href="#"
-                className="flex items-center gap-2 text-lg font-semibold"
-              >
-                <Package2 className="h-6 w-6" />
-                <span className="sr-only">Acme Inc</span>
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Dashboard
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Orders
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Products
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Customers
-              </Link>
-              <Link href="#" className="hover:text-foreground">
-                Settings
-              </Link>
-            </nav>
-          </SheetContent>
-        </Sheet>
-        <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
-          <form className="ml-auto flex-1 sm:flex-initial">
-            <div className="relative">
-              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input
-                type="search"
-                placeholder="Search products..."
-                className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
-              />
-            </div>
-          </form>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" size="icon" className="rounded-full">
-                <CircleUser className="h-5 w-5" />
-                <span className="sr-only">Toggle user menu</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </header>
-      <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
-        <div className="mx-auto grid w-full max-w-6xl gap-2">
-          <h1 className="text-3xl font-semibold">Settings</h1>
-        </div>
-        <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
-          <nav
-            className="grid gap-4 text-sm text-muted-foreground"
-            x-chunk="A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings."
-            x-chunk-container="chunk-container after:right-0"
-          >
-            <Link href="#" className="font-semibold text-primary">
-              General
-            </Link>
-            <Link href="#">Security</Link>
-            <Link href="#">Integrations</Link>
-            <Link href="#">Support</Link>
-            <Link href="#">Organizations</Link>
-            <Link href="#">Advanced</Link>
-          </nav>
-          <div className="grid gap-6">
-            <Card x-chunk="A form to update the store name.">
-              <CardHeader>
-                <CardTitle>Store Name</CardTitle>
-                <CardDescription>
-                  Used to identify your store in the marketplace.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <form>
-                  <Input placeholder="Store Name" />
-                </form>
-              </CardContent>
-              <CardFooter className="border-t px-6 py-4">
-                <Button>Save</Button>
-              </CardFooter>
-            </Card>
-            <Card x-chunk="A form to update the plugins directory with a checkbox to allow administrators to change the directory.">
-              <CardHeader>
-                <CardTitle>Plugins Directory</CardTitle>
-                <CardDescription>
-                  The directory within your project, in which your plugins are
-                  located.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <form className="flex flex-col gap-4">
-                  <Input
-                    placeholder="Project Name"
-                    defaultValue="/content/plugins"
-                  />
-                  <div className="flex items-center space-x-2">
-                    <Checkbox id="include" defaultChecked />
-                    <label
-                      htmlFor="include"
-                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                    >
-                      Allow administrators to change the directory.
-                    </label>
-                  </div>
-                </form>
-              </CardContent>
-              <CardFooter className="border-t px-6 py-4">
-                <Button>Save</Button>
-              </CardFooter>
-            </Card>
-          </div>
-        </div>
-      </main>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-05-chunk-0.tsx b/apps/www/registry/default/block/dashboard-05-chunk-0.tsx
deleted file mode 100644
index 2fd31e9eab7..00000000000
--- a/apps/www/registry/default/block/dashboard-05-chunk-0.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-
-export default function Component() {
-  return (
-    <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
-      <CardHeader className="pb-3">
-        <CardTitle>Your Orders</CardTitle>
-        <CardDescription className="max-w-lg text-balance leading-relaxed">
-          Introducing Our Dynamic Orders Dashboard for Seamless Management and
-          Insightful Analysis.
-        </CardDescription>
-      </CardHeader>
-      <CardFooter>
-        <Button>Create New Order</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-05-chunk-1.tsx b/apps/www/registry/default/block/dashboard-05-chunk-1.tsx
deleted file mode 100644
index 32589143461..00000000000
--- a/apps/www/registry/default/block/dashboard-05-chunk-1.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Progress } from "@/registry/default/ui/progress"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-05-chunk-1">
-      <CardHeader className="pb-2">
-        <CardDescription>This Week</CardDescription>
-        <CardTitle className="text-4xl">$1,329</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="text-xs text-muted-foreground">+25% from last week</div>
-      </CardContent>
-      <CardFooter>
-        <Progress value={25} aria-label="25% increase" />
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-05-chunk-2.tsx b/apps/www/registry/default/block/dashboard-05-chunk-2.tsx
deleted file mode 100644
index 7fdf1ccbd29..00000000000
--- a/apps/www/registry/default/block/dashboard-05-chunk-2.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Progress } from "@/registry/default/ui/progress"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-05-chunk-2">
-      <CardHeader className="pb-2">
-        <CardDescription>This Month</CardDescription>
-        <CardTitle className="text-4xl">$5,329</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="text-xs text-muted-foreground">
-          +10% from last month
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Progress value={12} aria-label="12% increase" />
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-05-chunk-3.tsx b/apps/www/registry/default/block/dashboard-05-chunk-3.tsx
deleted file mode 100644
index 91cb414544b..00000000000
--- a/apps/www/registry/default/block/dashboard-05-chunk-3.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-"use client"
-
-import { Badge } from "@/registry/default/ui/badge"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-05-chunk-3">
-      <CardHeader className="px-7">
-        <CardTitle>Orders</CardTitle>
-        <CardDescription>Recent orders from your store.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Customer</TableHead>
-              <TableHead className="hidden sm:table-cell">Type</TableHead>
-              <TableHead className="hidden sm:table-cell">Status</TableHead>
-              <TableHead className="hidden md:table-cell">Date</TableHead>
-              <TableHead className="text-right">Amount</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow className="bg-accent">
-              <TableCell>
-                <div className="font-medium">Liam Johnson</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  liam@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Sale</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="secondary">
-                  Fulfilled
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Olivia Smith</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  olivia@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Refund</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="outline">
-                  Declined
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
-              <TableCell className="text-right">$150.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Noah Williams</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  noah@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">
-                Subscription
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="secondary">
-                  Fulfilled
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-25</TableCell>
-              <TableCell className="text-right">$350.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Emma Brown</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  emma@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Sale</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="secondary">
-                  Fulfilled
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
-              <TableCell className="text-right">$450.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Liam Johnson</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  liam@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Sale</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="secondary">
-                  Fulfilled
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Liam Johnson</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  liam@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Sale</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="secondary">
-                  Fulfilled
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Olivia Smith</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  olivia@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Refund</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="outline">
-                  Declined
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
-              <TableCell className="text-right">$150.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Emma Brown</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  emma@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Sale</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="secondary">
-                  Fulfilled
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
-              <TableCell className="text-right">$450.00</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-05-chunk-4.tsx b/apps/www/registry/default/block/dashboard-05-chunk-4.tsx
deleted file mode 100644
index 14236a63a1c..00000000000
--- a/apps/www/registry/default/block/dashboard-05-chunk-4.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-"use client"
-
-import {
-  ChevronLeft,
-  ChevronRight,
-  Copy,
-  CreditCard,
-  MoreVertical,
-  Truck,
-} from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-} from "@/registry/default/ui/pagination"
-import { Separator } from "@/registry/default/ui/separator"
-
-export default function Component() {
-  return (
-    <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
-      <CardHeader className="flex flex-row items-start bg-muted/50">
-        <div className="grid gap-0.5">
-          <CardTitle className="group flex items-center gap-2 text-lg">
-            Order Oe31b70H
-            <Button
-              size="icon"
-              variant="outline"
-              className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
-            >
-              <Copy className="h-3 w-3" />
-              <span className="sr-only">Copy Order ID</span>
-            </Button>
-          </CardTitle>
-          <CardDescription>Date: November 23, 2023</CardDescription>
-        </div>
-        <div className="ml-auto flex items-center gap-1">
-          <Button size="sm" variant="outline" className="h-8 gap-1">
-            <Truck className="h-3.5 w-3.5" />
-            <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-              Track Order
-            </span>
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="icon" variant="outline" className="h-8 w-8">
-                <MoreVertical className="h-3.5 w-3.5" />
-                <span className="sr-only">More</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem>Edit</DropdownMenuItem>
-              <DropdownMenuItem>Export</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Trash</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </CardHeader>
-      <CardContent className="p-6 text-sm">
-        <div className="grid gap-3">
-          <div className="font-semibold">Order Details</div>
-          <ul className="grid gap-3">
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">
-                Glimmer Lamps x <span>2</span>
-              </span>
-              <span>$250.00</span>
-            </li>
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">
-                Aqua Filters x <span>1</span>
-              </span>
-              <span>$49.00</span>
-            </li>
-          </ul>
-          <Separator className="my-2" />
-          <ul className="grid gap-3">
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">Subtotal</span>
-              <span>$299.00</span>
-            </li>
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">Shipping</span>
-              <span>$5.00</span>
-            </li>
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">Tax</span>
-              <span>$25.00</span>
-            </li>
-            <li className="flex items-center justify-between font-semibold">
-              <span className="text-muted-foreground">Total</span>
-              <span>$329.00</span>
-            </li>
-          </ul>
-        </div>
-        <Separator className="my-4" />
-        <div className="grid grid-cols-2 gap-4">
-          <div className="grid gap-3">
-            <div className="font-semibold">Shipping Information</div>
-            <address className="grid gap-0.5 not-italic text-muted-foreground">
-              <span>Liam Johnson</span>
-              <span>1234 Main St.</span>
-              <span>Anytown, CA 12345</span>
-            </address>
-          </div>
-          <div className="grid auto-rows-max gap-3">
-            <div className="font-semibold">Billing Information</div>
-            <div className="text-muted-foreground">
-              Same as shipping address
-            </div>
-          </div>
-        </div>
-        <Separator className="my-4" />
-        <div className="grid gap-3">
-          <div className="font-semibold">Customer Information</div>
-          <dl className="grid gap-3">
-            <div className="flex items-center justify-between">
-              <dt className="text-muted-foreground">Customer</dt>
-              <dd>Liam Johnson</dd>
-            </div>
-            <div className="flex items-center justify-between">
-              <dt className="text-muted-foreground">Email</dt>
-              <dd>
-                <a href="mailto:">liam@acme.com</a>
-              </dd>
-            </div>
-            <div className="flex items-center justify-between">
-              <dt className="text-muted-foreground">Phone</dt>
-              <dd>
-                <a href="tel:">+1 234 567 890</a>
-              </dd>
-            </div>
-          </dl>
-        </div>
-        <Separator className="my-4" />
-        <div className="grid gap-3">
-          <div className="font-semibold">Payment Information</div>
-          <dl className="grid gap-3">
-            <div className="flex items-center justify-between">
-              <dt className="flex items-center gap-1 text-muted-foreground">
-                <CreditCard className="h-4 w-4" />
-                Visa
-              </dt>
-              <dd>**** **** **** 4532</dd>
-            </div>
-          </dl>
-        </div>
-      </CardContent>
-      <CardFooter className="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
-        <div className="text-xs text-muted-foreground">
-          Updated <time dateTime="2023-11-23">November 23, 2023</time>
-        </div>
-        <Pagination className="ml-auto mr-0 w-auto">
-          <PaginationContent>
-            <PaginationItem>
-              <Button size="icon" variant="outline" className="h-6 w-6">
-                <ChevronLeft className="h-3.5 w-3.5" />
-                <span className="sr-only">Previous Order</span>
-              </Button>
-            </PaginationItem>
-            <PaginationItem>
-              <Button size="icon" variant="outline" className="h-6 w-6">
-                <ChevronRight className="h-3.5 w-3.5" />
-                <span className="sr-only">Next Order</span>
-              </Button>
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-05.tsx b/apps/www/registry/default/block/dashboard-05.tsx
deleted file mode 100644
index ac80bc89aca..00000000000
--- a/apps/www/registry/default/block/dashboard-05.tsx
+++ /dev/null
@@ -1,726 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-import {
-  ChevronLeft,
-  ChevronRight,
-  Copy,
-  CreditCard,
-  File,
-  Home,
-  LineChart,
-  ListFilter,
-  MoreVertical,
-  Package,
-  Package2,
-  PanelLeft,
-  Search,
-  Settings,
-  ShoppingCart,
-  Truck,
-  Users2,
-} from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-} from "@/registry/default/ui/pagination"
-import { Progress } from "@/registry/default/ui/progress"
-import { Separator } from "@/registry/default/ui/separator"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/default/ui/tabs"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/default/ui/tooltip"
-
-export const description =
-  "An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information."
-
-export const iframeHeight = "1112px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col bg-muted/40">
-      <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
-        <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Link
-            href="#"
-            className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
-          >
-            <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Home className="h-5 w-5" />
-                <span className="sr-only">Dashboard</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Dashboard</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <ShoppingCart className="h-5 w-5" />
-                <span className="sr-only">Orders</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Orders</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Package className="h-5 w-5" />
-                <span className="sr-only">Products</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Products</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Users2 className="h-5 w-5" />
-                <span className="sr-only">Customers</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Customers</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <LineChart className="h-5 w-5" />
-                <span className="sr-only">Analytics</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Analytics</TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Settings className="h-5 w-5" />
-                <span className="sr-only">Settings</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Settings</TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button size="icon" variant="outline" className="sm:hidden">
-                <PanelLeft className="h-5 w-5" />
-                <span className="sr-only">Toggle Menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="sm:max-w-xs">
-              <nav className="grid gap-6 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
-                >
-                  <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Users2 className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Settings
-                </Link>
-              </nav>
-            </SheetContent>
-          </Sheet>
-          <Breadcrumb className="hidden md:flex">
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Dashboard</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Orders</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>Recent Orders</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="relative ml-auto flex-1 md:grow-0">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
-            />
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="overflow-hidden rounded-full"
-              >
-                <Image
-                  src="/placeholder-user.jpg"
-                  width={36}
-                  height={36}
-                  alt="Avatar"
-                  className="overflow-hidden rounded-full"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
-          <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
-            <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
-              <Card
-                className="sm:col-span-2"
-                x-chunk="A card for an orders dashboard with a description and a button to create a new order."
-              >
-                <CardHeader className="pb-3">
-                  <CardTitle>Your Orders</CardTitle>
-                  <CardDescription className="max-w-lg text-balance leading-relaxed">
-                    Introducing Our Dynamic Orders Dashboard for Seamless
-                    Management and Insightful Analysis.
-                  </CardDescription>
-                </CardHeader>
-                <CardFooter>
-                  <Button>Create New Order</Button>
-                </CardFooter>
-              </Card>
-              <Card x-chunk="A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.">
-                <CardHeader className="pb-2">
-                  <CardDescription>This Week</CardDescription>
-                  <CardTitle className="text-4xl">$1,329</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="text-xs text-muted-foreground">
-                    +25% from last week
-                  </div>
-                </CardContent>
-                <CardFooter>
-                  <Progress value={25} aria-label="25% increase" />
-                </CardFooter>
-              </Card>
-              <Card x-chunk="A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.">
-                <CardHeader className="pb-2">
-                  <CardDescription>This Month</CardDescription>
-                  <CardTitle className="text-4xl">$5,329</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="text-xs text-muted-foreground">
-                    +10% from last month
-                  </div>
-                </CardContent>
-                <CardFooter>
-                  <Progress value={12} aria-label="12% increase" />
-                </CardFooter>
-              </Card>
-            </div>
-            <Tabs defaultValue="week">
-              <div className="flex items-center">
-                <TabsList>
-                  <TabsTrigger value="week">Week</TabsTrigger>
-                  <TabsTrigger value="month">Month</TabsTrigger>
-                  <TabsTrigger value="year">Year</TabsTrigger>
-                </TabsList>
-                <div className="ml-auto flex items-center gap-2">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="h-7 gap-1 text-sm"
-                      >
-                        <ListFilter className="h-3.5 w-3.5" />
-                        <span className="sr-only sm:not-sr-only">Filter</span>
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuLabel>Filter by</DropdownMenuLabel>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuCheckboxItem checked>
-                        Fulfilled
-                      </DropdownMenuCheckboxItem>
-                      <DropdownMenuCheckboxItem>
-                        Declined
-                      </DropdownMenuCheckboxItem>
-                      <DropdownMenuCheckboxItem>
-                        Refunded
-                      </DropdownMenuCheckboxItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    className="h-7 gap-1 text-sm"
-                  >
-                    <File className="h-3.5 w-3.5" />
-                    <span className="sr-only sm:not-sr-only">Export</span>
-                  </Button>
-                </div>
-              </div>
-              <TabsContent value="week">
-                <Card x-chunk="A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.">
-                  <CardHeader className="px-7">
-                    <CardTitle>Orders</CardTitle>
-                    <CardDescription>
-                      Recent orders from your store.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead>Customer</TableHead>
-                          <TableHead className="hidden sm:table-cell">
-                            Type
-                          </TableHead>
-                          <TableHead className="hidden sm:table-cell">
-                            Status
-                          </TableHead>
-                          <TableHead className="hidden md:table-cell">
-                            Date
-                          </TableHead>
-                          <TableHead className="text-right">Amount</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        <TableRow className="bg-accent">
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Olivia Smith</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              olivia@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Refund
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="outline">
-                              Declined
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-24
-                          </TableCell>
-                          <TableCell className="text-right">$150.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Noah Williams</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              noah@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Subscription
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-25
-                          </TableCell>
-                          <TableCell className="text-right">$350.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Emma Brown</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              emma@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-26
-                          </TableCell>
-                          <TableCell className="text-right">$450.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Olivia Smith</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              olivia@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Refund
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="outline">
-                              Declined
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-24
-                          </TableCell>
-                          <TableCell className="text-right">$150.00</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Emma Brown</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              emma@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-26
-                          </TableCell>
-                          <TableCell className="text-right">$450.00</TableCell>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </CardContent>
-                </Card>
-              </TabsContent>
-            </Tabs>
-          </div>
-          <div>
-            <Card
-              className="overflow-hidden"
-              x-chunk="An order details card with order details, shipping information, customer information and payment information."
-            >
-              <CardHeader className="flex flex-row items-start bg-muted/50">
-                <div className="grid gap-0.5">
-                  <CardTitle className="group flex items-center gap-2 text-lg">
-                    Order Oe31b70H
-                    <Button
-                      size="icon"
-                      variant="outline"
-                      className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
-                    >
-                      <Copy className="h-3 w-3" />
-                      <span className="sr-only">Copy Order ID</span>
-                    </Button>
-                  </CardTitle>
-                  <CardDescription>Date: November 23, 2023</CardDescription>
-                </div>
-                <div className="ml-auto flex items-center gap-1">
-                  <Button size="sm" variant="outline" className="h-8 gap-1">
-                    <Truck className="h-3.5 w-3.5" />
-                    <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-                      Track Order
-                    </span>
-                  </Button>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button size="icon" variant="outline" className="h-8 w-8">
-                        <MoreVertical className="h-3.5 w-3.5" />
-                        <span className="sr-only">More</span>
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuItem>Edit</DropdownMenuItem>
-                      <DropdownMenuItem>Export</DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem>Trash</DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-              </CardHeader>
-              <CardContent className="p-6 text-sm">
-                <div className="grid gap-3">
-                  <div className="font-semibold">Order Details</div>
-                  <ul className="grid gap-3">
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">
-                        Glimmer Lamps x <span>2</span>
-                      </span>
-                      <span>$250.00</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">
-                        Aqua Filters x <span>1</span>
-                      </span>
-                      <span>$49.00</span>
-                    </li>
-                  </ul>
-                  <Separator className="my-2" />
-                  <ul className="grid gap-3">
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">Subtotal</span>
-                      <span>$299.00</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">Shipping</span>
-                      <span>$5.00</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-muted-foreground">Tax</span>
-                      <span>$25.00</span>
-                    </li>
-                    <li className="flex items-center justify-between font-semibold">
-                      <span className="text-muted-foreground">Total</span>
-                      <span>$329.00</span>
-                    </li>
-                  </ul>
-                </div>
-                <Separator className="my-4" />
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-3">
-                    <div className="font-semibold">Shipping Information</div>
-                    <address className="grid gap-0.5 not-italic text-muted-foreground">
-                      <span>Liam Johnson</span>
-                      <span>1234 Main St.</span>
-                      <span>Anytown, CA 12345</span>
-                    </address>
-                  </div>
-                  <div className="grid auto-rows-max gap-3">
-                    <div className="font-semibold">Billing Information</div>
-                    <div className="text-muted-foreground">
-                      Same as shipping address
-                    </div>
-                  </div>
-                </div>
-                <Separator className="my-4" />
-                <div className="grid gap-3">
-                  <div className="font-semibold">Customer Information</div>
-                  <dl className="grid gap-3">
-                    <div className="flex items-center justify-between">
-                      <dt className="text-muted-foreground">Customer</dt>
-                      <dd>Liam Johnson</dd>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <dt className="text-muted-foreground">Email</dt>
-                      <dd>
-                        <a href="mailto:">liam@acme.com</a>
-                      </dd>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <dt className="text-muted-foreground">Phone</dt>
-                      <dd>
-                        <a href="tel:">+1 234 567 890</a>
-                      </dd>
-                    </div>
-                  </dl>
-                </div>
-                <Separator className="my-4" />
-                <div className="grid gap-3">
-                  <div className="font-semibold">Payment Information</div>
-                  <dl className="grid gap-3">
-                    <div className="flex items-center justify-between">
-                      <dt className="flex items-center gap-1 text-muted-foreground">
-                        <CreditCard className="h-4 w-4" />
-                        Visa
-                      </dt>
-                      <dd>**** **** **** 4532</dd>
-                    </div>
-                  </dl>
-                </div>
-              </CardContent>
-              <CardFooter className="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
-                <div className="text-xs text-muted-foreground">
-                  Updated <time dateTime="2023-11-23">November 23, 2023</time>
-                </div>
-                <Pagination className="ml-auto mr-0 w-auto">
-                  <PaginationContent>
-                    <PaginationItem>
-                      <Button size="icon" variant="outline" className="h-6 w-6">
-                        <ChevronLeft className="h-3.5 w-3.5" />
-                        <span className="sr-only">Previous Order</span>
-                      </Button>
-                    </PaginationItem>
-                    <PaginationItem>
-                      <Button size="icon" variant="outline" className="h-6 w-6">
-                        <ChevronRight className="h-3.5 w-3.5" />
-                        <span className="sr-only">Next Order</span>
-                      </Button>
-                    </PaginationItem>
-                  </PaginationContent>
-                </Pagination>
-              </CardFooter>
-            </Card>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-06-chunk-0.tsx b/apps/www/registry/default/block/dashboard-06-chunk-0.tsx
deleted file mode 100644
index 810e0505a64..00000000000
--- a/apps/www/registry/default/block/dashboard-06-chunk-0.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-"use client"
-
-import Image from "next/image"
-import { MoreHorizontal } from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-06-chunk-0">
-      <CardHeader>
-        <CardTitle>Products</CardTitle>
-        <CardDescription>
-          Manage your products and view their sales performance.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="hidden w-[100px] sm:table-cell">
-                <span className="sr-only">Image</span>
-              </TableHead>
-              <TableHead>Name</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead className="hidden md:table-cell">Price</TableHead>
-              <TableHead className="hidden md:table-cell">
-                Total Sales
-              </TableHead>
-              <TableHead className="hidden md:table-cell">Created at</TableHead>
-              <TableHead>
-                <span className="sr-only">Actions</span>
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                Laser Lemonade Machine
-              </TableCell>
-              <TableCell>
-                <Badge variant="outline">Draft</Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">$499.99</TableCell>
-              <TableCell className="hidden md:table-cell">25</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-07-12 10:42 AM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                Hypernova Headphones
-              </TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">$129.99</TableCell>
-              <TableCell className="hidden md:table-cell">100</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-10-18 03:21 PM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">AeroGlow Desk Lamp</TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">$39.99</TableCell>
-              <TableCell className="hidden md:table-cell">50</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-11-29 08:15 AM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                TechTonic Energy Drink
-              </TableCell>
-              <TableCell>
-                <Badge variant="secondary">Draft</Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">$2.99</TableCell>
-              <TableCell className="hidden md:table-cell">0</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-12-25 11:59 PM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                Gamer Gear Pro Controller
-              </TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">$59.99</TableCell>
-              <TableCell className="hidden md:table-cell">75</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2024-01-01 12:00 AM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">Luminous VR Headset</TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">$199.99</TableCell>
-              <TableCell className="hidden md:table-cell">30</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2024-02-14 02:14 PM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-      <CardFooter>
-        <div className="text-xs text-muted-foreground">
-          Showing <strong>1-10</strong> of <strong>32</strong> products
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-06.tsx b/apps/www/registry/default/block/dashboard-06.tsx
deleted file mode 100644
index a5ac9b8f720..00000000000
--- a/apps/www/registry/default/block/dashboard-06.tsx
+++ /dev/null
@@ -1,637 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-import {
-  File,
-  Home,
-  LineChart,
-  ListFilter,
-  MoreHorizontal,
-  Package,
-  Package2,
-  PanelLeft,
-  PlusCircle,
-  Search,
-  Settings,
-  ShoppingCart,
-  Users2,
-} from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/default/ui/tabs"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/default/ui/tooltip"
-
-export const description =
-  "An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions."
-
-export const iframeHeight = "938px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col bg-muted/40">
-      <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
-        <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Link
-            href="#"
-            className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
-          >
-            <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Home className="h-5 w-5" />
-                <span className="sr-only">Dashboard</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Dashboard</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <ShoppingCart className="h-5 w-5" />
-                <span className="sr-only">Orders</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Orders</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Package className="h-5 w-5" />
-                <span className="sr-only">Products</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Products</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Users2 className="h-5 w-5" />
-                <span className="sr-only">Customers</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Customers</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <LineChart className="h-5 w-5" />
-                <span className="sr-only">Analytics</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Analytics</TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Settings className="h-5 w-5" />
-                <span className="sr-only">Settings</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Settings</TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button size="icon" variant="outline" className="sm:hidden">
-                <PanelLeft className="h-5 w-5" />
-                <span className="sr-only">Toggle Menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="sm:max-w-xs">
-              <nav className="grid gap-6 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
-                >
-                  <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Users2 className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Settings
-                </Link>
-              </nav>
-            </SheetContent>
-          </Sheet>
-          <Breadcrumb className="hidden md:flex">
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Dashboard</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Products</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>All Products</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="relative ml-auto flex-1 md:grow-0">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
-            />
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="overflow-hidden rounded-full"
-              >
-                <Image
-                  src="/placeholder-user.jpg"
-                  width={36}
-                  height={36}
-                  alt="Avatar"
-                  className="overflow-hidden rounded-full"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
-          <Tabs defaultValue="all">
-            <div className="flex items-center">
-              <TabsList>
-                <TabsTrigger value="all">All</TabsTrigger>
-                <TabsTrigger value="active">Active</TabsTrigger>
-                <TabsTrigger value="draft">Draft</TabsTrigger>
-                <TabsTrigger value="archived" className="hidden sm:flex">
-                  Archived
-                </TabsTrigger>
-              </TabsList>
-              <div className="ml-auto flex items-center gap-2">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm" className="h-8 gap-1">
-                      <ListFilter className="h-3.5 w-3.5" />
-                      <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                        Filter
-                      </span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuCheckboxItem checked>
-                      Active
-                    </DropdownMenuCheckboxItem>
-                    <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>
-                    <DropdownMenuCheckboxItem>
-                      Archived
-                    </DropdownMenuCheckboxItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-                <Button size="sm" variant="outline" className="h-8 gap-1">
-                  <File className="h-3.5 w-3.5" />
-                  <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                    Export
-                  </span>
-                </Button>
-                <Button size="sm" className="h-8 gap-1">
-                  <PlusCircle className="h-3.5 w-3.5" />
-                  <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-                    Add Product
-                  </span>
-                </Button>
-              </div>
-            </div>
-            <TabsContent value="all">
-              <Card x-chunk="A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.">
-                <CardHeader>
-                  <CardTitle>Products</CardTitle>
-                  <CardDescription>
-                    Manage your products and view their sales performance.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="hidden w-[100px] sm:table-cell">
-                          <span className="sr-only">Image</span>
-                        </TableHead>
-                        <TableHead>Name</TableHead>
-                        <TableHead>Status</TableHead>
-                        <TableHead className="hidden md:table-cell">
-                          Price
-                        </TableHead>
-                        <TableHead className="hidden md:table-cell">
-                          Total Sales
-                        </TableHead>
-                        <TableHead className="hidden md:table-cell">
-                          Created at
-                        </TableHead>
-                        <TableHead>
-                          <span className="sr-only">Actions</span>
-                        </TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Laser Lemonade Machine
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Draft</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $499.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          25
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-07-12 10:42 AM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Hypernova Headphones
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $129.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          100
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-10-18 03:21 PM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          AeroGlow Desk Lamp
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $39.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          50
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-11-29 08:15 AM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          TechTonic Energy Drink
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="secondary">Draft</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $2.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          0
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2023-12-25 11:59 PM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Gamer Gear Pro Controller
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $59.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          75
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2024-01-01 12:00 AM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell className="hidden sm:table-cell">
-                          <Image
-                            alt="Product image"
-                            className="aspect-square rounded-md object-cover"
-                            height="64"
-                            src="/placeholder.svg"
-                            width="64"
-                          />
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          Luminous VR Headset
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">Active</Badge>
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          $199.99
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          30
-                        </TableCell>
-                        <TableCell className="hidden md:table-cell">
-                          2024-02-14 02:14 PM
-                        </TableCell>
-                        <TableCell>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                aria-haspopup="true"
-                                size="icon"
-                                variant="ghost"
-                              >
-                                <MoreHorizontal className="h-4 w-4" />
-                                <span className="sr-only">Toggle menu</span>
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                              <DropdownMenuItem>Edit</DropdownMenuItem>
-                              <DropdownMenuItem>Delete</DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </TableCell>
-                      </TableRow>
-                    </TableBody>
-                  </Table>
-                </CardContent>
-                <CardFooter>
-                  <div className="text-xs text-muted-foreground">
-                    Showing <strong>1-10</strong> of <strong>32</strong>{" "}
-                    products
-                  </div>
-                </CardFooter>
-              </Card>
-            </TabsContent>
-          </Tabs>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-07-chunk-0.tsx b/apps/www/registry/default/block/dashboard-07-chunk-0.tsx
deleted file mode 100644
index 7722f9d0437..00000000000
--- a/apps/www/registry/default/block/dashboard-07-chunk-0.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client"
-
-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"
-import { Textarea } from "@/registry/default/ui/textarea"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-07-chunk-0">
-      <CardHeader>
-        <CardTitle>Product Details</CardTitle>
-        <CardDescription>
-          Lipsum dolor sit amet, consectetur adipiscing elit
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-6">
-          <div className="grid gap-3">
-            <Label htmlFor="name">Name</Label>
-            <Input
-              id="name"
-              type="text"
-              className="w-full"
-              defaultValue="Gamer Gear Pro Controller"
-            />
-          </div>
-          <div className="grid gap-3">
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
-              className="min-h-32"
-            />
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-07-chunk-1.tsx b/apps/www/registry/default/block/dashboard-07-chunk-1.tsx
deleted file mode 100644
index c9999aeebba..00000000000
--- a/apps/www/registry/default/block/dashboard-07-chunk-1.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client"
-
-import { PlusCircle } from "lucide-react"
-
-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"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/default/ui/toggle-group"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-07-chunk-1">
-      <CardHeader>
-        <CardTitle>Stock</CardTitle>
-        <CardDescription>
-          Lipsum dolor sit amet, consectetur adipiscing elit
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[100px]">SKU</TableHead>
-              <TableHead>Stock</TableHead>
-              <TableHead>Price</TableHead>
-              <TableHead className="w-[100px]">Size</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell className="font-semibold">GGPC-001</TableCell>
-              <TableCell>
-                <Label htmlFor="stock-1" className="sr-only">
-                  Stock
-                </Label>
-                <Input id="stock-1" type="number" defaultValue="100" />
-              </TableCell>
-              <TableCell>
-                <Label htmlFor="price-1" className="sr-only">
-                  Price
-                </Label>
-                <Input id="price-1" type="number" defaultValue="99.99" />
-              </TableCell>
-              <TableCell>
-                <ToggleGroup type="single" defaultValue="s" variant="outline">
-                  <ToggleGroupItem value="s">S</ToggleGroupItem>
-                  <ToggleGroupItem value="m">M</ToggleGroupItem>
-                  <ToggleGroupItem value="l">L</ToggleGroupItem>
-                </ToggleGroup>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="font-semibold">GGPC-002</TableCell>
-              <TableCell>
-                <Label htmlFor="stock-2" className="sr-only">
-                  Stock
-                </Label>
-                <Input id="stock-2" type="number" defaultValue="143" />
-              </TableCell>
-              <TableCell>
-                <Label htmlFor="price-2" className="sr-only">
-                  Price
-                </Label>
-                <Input id="price-2" type="number" defaultValue="99.99" />
-              </TableCell>
-              <TableCell>
-                <ToggleGroup type="single" defaultValue="m" variant="outline">
-                  <ToggleGroupItem value="s">S</ToggleGroupItem>
-                  <ToggleGroupItem value="m">M</ToggleGroupItem>
-                  <ToggleGroupItem value="l">L</ToggleGroupItem>
-                </ToggleGroup>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="font-semibold">GGPC-003</TableCell>
-              <TableCell>
-                <Label htmlFor="stock-3" className="sr-only">
-                  Stock
-                </Label>
-                <Input id="stock-3" type="number" defaultValue="32" />
-              </TableCell>
-              <TableCell>
-                <Label htmlFor="price-3" className="sr-only">
-                  Stock
-                </Label>
-                <Input id="price-3" type="number" defaultValue="99.99" />
-              </TableCell>
-              <TableCell>
-                <ToggleGroup type="single" defaultValue="s" variant="outline">
-                  <ToggleGroupItem value="s">S</ToggleGroupItem>
-                  <ToggleGroupItem value="m">M</ToggleGroupItem>
-                  <ToggleGroupItem value="l">L</ToggleGroupItem>
-                </ToggleGroup>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-      <CardFooter className="justify-center border-t p-4">
-        <Button size="sm" variant="ghost" className="gap-1">
-          <PlusCircle className="h-3.5 w-3.5" />
-          Add Variant
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-07-chunk-2.tsx b/apps/www/registry/default/block/dashboard-07-chunk-2.tsx
deleted file mode 100644
index 09283164fe4..00000000000
--- a/apps/www/registry/default/block/dashboard-07-chunk-2.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Label } from "@/registry/default/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-07-chunk-2">
-      <CardHeader>
-        <CardTitle>Product Category</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-6 sm:grid-cols-3">
-          <div className="grid gap-3">
-            <Label htmlFor="category">Category</Label>
-            <Select>
-              <SelectTrigger id="category" aria-label="Select category">
-                <SelectValue placeholder="Select category" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="clothing">Clothing</SelectItem>
-                <SelectItem value="electronics">Electronics</SelectItem>
-                <SelectItem value="accessories">Accessories</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="grid gap-3">
-            <Label htmlFor="subcategory">Subcategory (optional)</Label>
-            <Select>
-              <SelectTrigger id="subcategory" aria-label="Select subcategory">
-                <SelectValue placeholder="Select subcategory" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="t-shirts">T-Shirts</SelectItem>
-                <SelectItem value="hoodies">Hoodies</SelectItem>
-                <SelectItem value="sweatshirts">Sweatshirts</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-07-chunk-3.tsx b/apps/www/registry/default/block/dashboard-07-chunk-3.tsx
deleted file mode 100644
index 33e68377a1f..00000000000
--- a/apps/www/registry/default/block/dashboard-07-chunk-3.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Label } from "@/registry/default/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-07-chunk-3">
-      <CardHeader>
-        <CardTitle>Product Status</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-6">
-          <div className="grid gap-3">
-            <Label htmlFor="status">Status</Label>
-            <Select>
-              <SelectTrigger id="status" aria-label="Select status">
-                <SelectValue placeholder="Select status" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="draft">Draft</SelectItem>
-                <SelectItem value="published">Active</SelectItem>
-                <SelectItem value="archived">Archived</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-07-chunk-4.tsx b/apps/www/registry/default/block/dashboard-07-chunk-4.tsx
deleted file mode 100644
index 824ecd44628..00000000000
--- a/apps/www/registry/default/block/dashboard-07-chunk-4.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client"
-
-import Image from "next/image"
-import { Upload } from "lucide-react"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-
-export default function Component() {
-  return (
-    <Card className="overflow-hidden" x-chunk="dashboard-07-chunk-4">
-      <CardHeader>
-        <CardTitle>Product Images</CardTitle>
-        <CardDescription>
-          Lipsum dolor sit amet, consectetur adipiscing elit
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-2">
-          <Image
-            alt="Product image"
-            className="aspect-square w-full rounded-md object-cover"
-            height="300"
-            src="/placeholder.svg"
-            width="300"
-          />
-          <div className="grid grid-cols-3 gap-2">
-            <button>
-              <Image
-                alt="Product image"
-                className="aspect-square w-full rounded-md object-cover"
-                height="84"
-                src="/placeholder.svg"
-                width="84"
-              />
-            </button>
-            <button>
-              <Image
-                alt="Product image"
-                className="aspect-square w-full rounded-md object-cover"
-                height="84"
-                src="/placeholder.svg"
-                width="84"
-              />
-            </button>
-            <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
-              <Upload className="h-4 w-4 text-muted-foreground" />
-              <span className="sr-only">Upload</span>
-            </button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-07-chunk-5.tsx b/apps/www/registry/default/block/dashboard-07-chunk-5.tsx
deleted file mode 100644
index 0a83a596346..00000000000
--- a/apps/www/registry/default/block/dashboard-07-chunk-5.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-07-chunk-5">
-      <CardHeader>
-        <CardTitle>Archive Product</CardTitle>
-        <CardDescription>
-          Lipsum dolor sit amet, consectetur adipiscing elit.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div></div>
-        <Button size="sm" variant="secondary">
-          Archive Product
-        </Button>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-07.tsx b/apps/www/registry/default/block/dashboard-07.tsx
deleted file mode 100644
index 0160ce62bfc..00000000000
--- a/apps/www/registry/default/block/dashboard-07.tsx
+++ /dev/null
@@ -1,610 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-import {
-  ChevronLeft,
-  Home,
-  LineChart,
-  Package,
-  Package2,
-  PanelLeft,
-  PlusCircle,
-  Search,
-  Settings,
-  ShoppingCart,
-  Upload,
-  Users2,
-} from "lucide-react"
-
-import { Badge } from "@/registry/default/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-import { Textarea } from "@/registry/default/ui/textarea"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/default/ui/toggle-group"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/default/ui/tooltip"
-
-export const description =
-  "A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images."
-
-export const iframeHeight = "1200px"
-
-export const containerClassName = "w-full h-full"
-
-export default function Dashboard() {
-  return (
-    <div className="flex min-h-screen w-full flex-col bg-muted/40">
-      <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
-        <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Link
-            href="#"
-            className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
-          >
-            <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
-            <span className="sr-only">Acme Inc</span>
-          </Link>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Home className="h-5 w-5" />
-                <span className="sr-only">Dashboard</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Dashboard</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <ShoppingCart className="h-5 w-5" />
-                <span className="sr-only">Orders</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Orders</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Package className="h-5 w-5" />
-                <span className="sr-only">Products</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Products</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Users2 className="h-5 w-5" />
-                <span className="sr-only">Customers</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Customers</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <LineChart className="h-5 w-5" />
-                <span className="sr-only">Analytics</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Analytics</TooltipContent>
-          </Tooltip>
-        </nav>
-        <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href="#"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-              >
-                <Settings className="h-5 w-5" />
-                <span className="sr-only">Settings</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">Settings</TooltipContent>
-          </Tooltip>
-        </nav>
-      </aside>
-      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button size="icon" variant="outline" className="sm:hidden">
-                <PanelLeft className="h-5 w-5" />
-                <span className="sr-only">Toggle Menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="sm:max-w-xs">
-              <nav className="grid gap-6 text-lg font-medium">
-                <Link
-                  href="#"
-                  className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
-                >
-                  <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
-                  <span className="sr-only">Acme Inc</span>
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Home className="h-5 w-5" />
-                  Dashboard
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <Users2 className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Settings
-                </Link>
-              </nav>
-            </SheetContent>
-          </Sheet>
-          <Breadcrumb className="hidden md:flex">
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Dashboard</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link href="#">Products</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>Edit Product</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="relative ml-auto flex-1 md:grow-0">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
-            />
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="overflow-hidden rounded-full"
-              >
-                <Image
-                  src="/placeholder-user.jpg"
-                  width={36}
-                  height={36}
-                  alt="Avatar"
-                  className="overflow-hidden rounded-full"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </header>
-        <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
-          <div className="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
-            <div className="flex items-center gap-4">
-              <Button variant="outline" size="icon" className="h-7 w-7">
-                <ChevronLeft className="h-4 w-4" />
-                <span className="sr-only">Back</span>
-              </Button>
-              <h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
-                Pro Controller
-              </h1>
-              <Badge variant="outline" className="ml-auto sm:ml-0">
-                In stock
-              </Badge>
-              <div className="hidden items-center gap-2 md:ml-auto md:flex">
-                <Button variant="outline" size="sm">
-                  Discard
-                </Button>
-                <Button size="sm">Save Product</Button>
-              </div>
-            </div>
-            <div className="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
-              <div className="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
-                <Card x-chunk="A card with a form to edit the product details">
-                  <CardHeader>
-                    <CardTitle>Product Details</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-6">
-                      <div className="grid gap-3">
-                        <Label htmlFor="name">Name</Label>
-                        <Input
-                          id="name"
-                          type="text"
-                          className="w-full"
-                          defaultValue="Gamer Gear Pro Controller"
-                        />
-                      </div>
-                      <div className="grid gap-3">
-                        <Label htmlFor="description">Description</Label>
-                        <Textarea
-                          id="description"
-                          defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
-                          className="min-h-32"
-                        />
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-                <Card x-chunk="A card with a form to edit the product stock and variants">
-                  <CardHeader>
-                    <CardTitle>Stock</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead className="w-[100px]">SKU</TableHead>
-                          <TableHead>Stock</TableHead>
-                          <TableHead>Price</TableHead>
-                          <TableHead className="w-[100px]">Size</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        <TableRow>
-                          <TableCell className="font-semibold">
-                            GGPC-001
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="stock-1" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="stock-1"
-                              type="number"
-                              defaultValue="100"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="price-1" className="sr-only">
-                              Price
-                            </Label>
-                            <Input
-                              id="price-1"
-                              type="number"
-                              defaultValue="99.99"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <ToggleGroup
-                              type="single"
-                              defaultValue="s"
-                              variant="outline"
-                            >
-                              <ToggleGroupItem value="s">S</ToggleGroupItem>
-                              <ToggleGroupItem value="m">M</ToggleGroupItem>
-                              <ToggleGroupItem value="l">L</ToggleGroupItem>
-                            </ToggleGroup>
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-semibold">
-                            GGPC-002
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="stock-2" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="stock-2"
-                              type="number"
-                              defaultValue="143"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="price-2" className="sr-only">
-                              Price
-                            </Label>
-                            <Input
-                              id="price-2"
-                              type="number"
-                              defaultValue="99.99"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <ToggleGroup
-                              type="single"
-                              defaultValue="m"
-                              variant="outline"
-                            >
-                              <ToggleGroupItem value="s">S</ToggleGroupItem>
-                              <ToggleGroupItem value="m">M</ToggleGroupItem>
-                              <ToggleGroupItem value="l">L</ToggleGroupItem>
-                            </ToggleGroup>
-                          </TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell className="font-semibold">
-                            GGPC-003
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="stock-3" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="stock-3"
-                              type="number"
-                              defaultValue="32"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <Label htmlFor="price-3" className="sr-only">
-                              Stock
-                            </Label>
-                            <Input
-                              id="price-3"
-                              type="number"
-                              defaultValue="99.99"
-                            />
-                          </TableCell>
-                          <TableCell>
-                            <ToggleGroup
-                              type="single"
-                              defaultValue="s"
-                              variant="outline"
-                            >
-                              <ToggleGroupItem value="s">S</ToggleGroupItem>
-                              <ToggleGroupItem value="m">M</ToggleGroupItem>
-                              <ToggleGroupItem value="l">L</ToggleGroupItem>
-                            </ToggleGroup>
-                          </TableCell>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </CardContent>
-                  <CardFooter className="justify-center border-t p-4">
-                    <Button size="sm" variant="ghost" className="gap-1">
-                      <PlusCircle className="h-3.5 w-3.5" />
-                      Add Variant
-                    </Button>
-                  </CardFooter>
-                </Card>
-                <Card x-chunk="A card with a form to edit the product category and subcategory">
-                  <CardHeader>
-                    <CardTitle>Product Category</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-6 sm:grid-cols-3">
-                      <div className="grid gap-3">
-                        <Label htmlFor="category">Category</Label>
-                        <Select>
-                          <SelectTrigger
-                            id="category"
-                            aria-label="Select category"
-                          >
-                            <SelectValue placeholder="Select category" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="clothing">Clothing</SelectItem>
-                            <SelectItem value="electronics">
-                              Electronics
-                            </SelectItem>
-                            <SelectItem value="accessories">
-                              Accessories
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                      <div className="grid gap-3">
-                        <Label htmlFor="subcategory">
-                          Subcategory (optional)
-                        </Label>
-                        <Select>
-                          <SelectTrigger
-                            id="subcategory"
-                            aria-label="Select subcategory"
-                          >
-                            <SelectValue placeholder="Select subcategory" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="t-shirts">T-Shirts</SelectItem>
-                            <SelectItem value="hoodies">Hoodies</SelectItem>
-                            <SelectItem value="sweatshirts">
-                              Sweatshirts
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-              <div className="grid auto-rows-max items-start gap-4 lg:gap-8">
-                <Card x-chunk="A card with a form to edit the product status">
-                  <CardHeader>
-                    <CardTitle>Product Status</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-6">
-                      <div className="grid gap-3">
-                        <Label htmlFor="status">Status</Label>
-                        <Select>
-                          <SelectTrigger id="status" aria-label="Select status">
-                            <SelectValue placeholder="Select status" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="draft">Draft</SelectItem>
-                            <SelectItem value="published">Active</SelectItem>
-                            <SelectItem value="archived">Archived</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-                <Card
-                  className="overflow-hidden"
-                  x-chunk="A card with a form to upload product images"
-                >
-                  <CardHeader>
-                    <CardTitle>Product Images</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid gap-2">
-                      <Image
-                        alt="Product image"
-                        className="aspect-square w-full rounded-md object-cover"
-                        height="300"
-                        src="/placeholder.svg"
-                        width="300"
-                      />
-                      <div className="grid grid-cols-3 gap-2">
-                        <button>
-                          <Image
-                            alt="Product image"
-                            className="aspect-square w-full rounded-md object-cover"
-                            height="84"
-                            src="/placeholder.svg"
-                            width="84"
-                          />
-                        </button>
-                        <button>
-                          <Image
-                            alt="Product image"
-                            className="aspect-square w-full rounded-md object-cover"
-                            height="84"
-                            src="/placeholder.svg"
-                            width="84"
-                          />
-                        </button>
-                        <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
-                          <Upload className="h-4 w-4 text-muted-foreground" />
-                          <span className="sr-only">Upload</span>
-                        </button>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-                <Card x-chunk="A card with a call to action to archive the product">
-                  <CardHeader>
-                    <CardTitle>Archive Product</CardTitle>
-                    <CardDescription>
-                      Lipsum dolor sit amet, consectetur adipiscing elit.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div></div>
-                    <Button size="sm" variant="secondary">
-                      Archive Product
-                    </Button>
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
-            <div className="flex items-center justify-center gap-2 md:hidden">
-              <Button variant="outline" size="sm">
-                Discard
-              </Button>
-              <Button size="sm">Save Product</Button>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/block/login-01/components/login-form.tsx b/apps/www/registry/default/block/login-01/components/login-form.tsx
deleted file mode 100644
index e5504442469..00000000000
--- a/apps/www/registry/default/block/login-01/components/login-form.tsx
+++ /dev/null
@@ -1,59 +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 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>
-  )
-}
diff --git a/apps/www/registry/default/block/login-01/page.tsx b/apps/www/registry/default/block/login-01/page.tsx
deleted file mode 100644
index 09809062ff2..00000000000
--- a/apps/www/registry/default/block/login-01/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { LoginForm } from "@/registry/default/block/login-01/components/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>
-  )
-}
diff --git a/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx
deleted file mode 100644
index 2c936c91541..00000000000
--- a/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-"use client"
-
-import {
-  Atom,
-  Bird,
-  BookOpen,
-  Bot,
-  Code2,
-  Eclipse,
-  Frame,
-  History,
-  LifeBuoy,
-  Map,
-  PieChart,
-  Rabbit,
-  Send,
-  Settings2,
-  SquareTerminal,
-  Star,
-  Turtle,
-} from "lucide-react"
-
-import { NavMain } from "@/registry/default/block/sidebar-01/components/nav-main"
-import { NavProjects } from "@/registry/default/block/sidebar-01/components/nav-projects"
-import { NavSecondary } from "@/registry/default/block/sidebar-01/components/nav-secondary"
-import { NavUser } from "@/registry/default/block/sidebar-01/components/nav-user"
-import { StorageCard } from "@/registry/default/block/sidebar-01/components/storage-card"
-import { TeamSwitcher } from "@/registry/default/block/sidebar-01/components/team-switcher"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarItem,
-  SidebarLabel,
-} from "@/registry/default/block/sidebar-01/ui/sidebar"
-
-export const iframeHeight = "870px"
-
-export const containerClassName = "w-full h-full"
-
-const data = {
-  teams: [
-    {
-      name: "Acme Inc",
-      logo: Atom,
-      plan: "Enterprise",
-    },
-    {
-      name: "Acme Corp.",
-      logo: Eclipse,
-      plan: "Startup",
-    },
-    {
-      name: "Evil Corp.",
-      logo: Rabbit,
-      plan: "Free",
-    },
-  ],
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.jpg",
-  },
-  navMain: [
-    {
-      title: "Playground",
-      url: "#",
-      icon: SquareTerminal,
-      isActive: true,
-      items: [
-        {
-          title: "History",
-          url: "#",
-          icon: History,
-          description: "View your recent prompts",
-        },
-        {
-          title: "Starred",
-          url: "#",
-          icon: Star,
-          description: "Browse your starred prompts",
-        },
-        {
-          title: "Settings",
-          url: "#",
-          icon: Settings2,
-          description: "Configure your playground",
-        },
-      ],
-    },
-    {
-      title: "Models",
-      url: "#",
-      icon: Bot,
-      items: [
-        {
-          title: "Genesis",
-          url: "#",
-          icon: Rabbit,
-          description: "Our fastest model for general use cases.",
-        },
-        {
-          title: "Explorer",
-          url: "#",
-          icon: Bird,
-          description: "Performance and speed for efficiency.",
-        },
-        {
-          title: "Quantum",
-          url: "#",
-          icon: Turtle,
-          description: "The most powerful model for complex computations.",
-        },
-      ],
-    },
-    {
-      title: "Documentation",
-      url: "#",
-      icon: BookOpen,
-      items: [
-        {
-          title: "Introduction",
-          url: "#",
-        },
-        {
-          title: "Get Started",
-          url: "#",
-        },
-        {
-          title: "Tutorials",
-          url: "#",
-        },
-        {
-          title: "Changelog",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "API",
-      url: "#",
-      icon: Code2,
-      items: [
-        {
-          title: "Chat",
-          url: "#",
-        },
-        {
-          title: "Completion",
-          url: "#",
-        },
-        {
-          title: "Images",
-          url: "#",
-        },
-        {
-          title: "Video",
-          url: "#",
-        },
-        {
-          title: "Speech",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Settings",
-      url: "#",
-      icon: Settings2,
-      items: [
-        {
-          title: "General",
-          url: "#",
-        },
-        {
-          title: "Team",
-          url: "#",
-        },
-        {
-          title: "Billing",
-          url: "#",
-        },
-        {
-          title: "Limits",
-          url: "#",
-        },
-      ],
-    },
-  ],
-
-  navSecondary: [
-    {
-      title: "Support",
-      url: "#",
-      icon: LifeBuoy,
-    },
-    {
-      title: "Feedback",
-      url: "#",
-      icon: Send,
-    },
-  ],
-  projects: [
-    {
-      name: "Design Engineering",
-      url: "#",
-      icon: Frame,
-    },
-    {
-      name: "Sales & Marketing",
-      url: "#",
-      icon: PieChart,
-    },
-    {
-      name: "Travel",
-      url: "#",
-      icon: Map,
-    },
-  ],
-  searchResults: [
-    {
-      title: "Routing Fundamentals",
-      teaser:
-        "The skeleton of every application is routing. This page will introduce you to the fundamental concepts of routing for the web and how to handle routing in Next.js.",
-      url: "#",
-    },
-    {
-      title: "Layouts and Templates",
-      teaser:
-        "The special files layout.js and template.js allow you to create UI that is shared between routes. This page will guide you through how and when to use these special files.",
-      url: "#",
-    },
-    {
-      title: "Data Fetching, Caching, and Revalidating",
-      teaser:
-        "Data fetching is a core part of any application. This page goes through how you can fetch, cache, and revalidate data in React and Next.js.",
-      url: "#",
-    },
-    {
-      title: "Server and Client Composition Patterns",
-      teaser:
-        "When building React applications, you will need to consider what parts of your application should be rendered on the server or the client. ",
-      url: "#",
-    },
-    {
-      title: "Server Actions and Mutations",
-      teaser:
-        "Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.",
-      url: "#",
-    },
-  ],
-}
-
-export function AppSidebar() {
-  return (
-    <Sidebar>
-      <SidebarHeader>
-        <TeamSwitcher teams={data.teams} />
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarItem>
-          <SidebarLabel>Platform</SidebarLabel>
-          <NavMain items={data.navMain} searchResults={data.searchResults} />
-        </SidebarItem>
-        <SidebarItem>
-          <SidebarLabel>Projects</SidebarLabel>
-          <NavProjects projects={data.projects} />
-        </SidebarItem>
-        <SidebarItem className="mt-auto">
-          <SidebarLabel>Help</SidebarLabel>
-          <NavSecondary items={data.navSecondary} />
-        </SidebarItem>
-        <SidebarItem>
-          <StorageCard />
-        </SidebarItem>
-      </SidebarContent>
-      <SidebarFooter>
-        <NavUser user={data.user} />
-      </SidebarFooter>
-    </Sidebar>
-  )
-}
diff --git a/apps/www/registry/default/block/sidebar-01/components/nav-main.tsx b/apps/www/registry/default/block/sidebar-01/components/nav-main.tsx
deleted file mode 100644
index a3b214f85ec..00000000000
--- a/apps/www/registry/default/block/sidebar-01/components/nav-main.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { ChevronRight, Search, type LucideIcon } from "lucide-react"
-
-import { useIsMobile } from "@/registry/default/hooks/use-mobile"
-import { cn } from "@/registry/default/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/default/ui/collapsible"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerTrigger,
-} from "@/registry/default/ui/drawer"
-import { Input } from "@/registry/default/ui/input"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-import { Separator } from "@/registry/default/ui/separator"
-
-export function NavMain({
-  className,
-  items,
-  searchResults,
-}: {
-  items: {
-    title: string
-    url: string
-    icon: LucideIcon
-    isActive?: boolean
-    items?: {
-      title: string
-      url: string
-    }[]
-  }[]
-  searchResults: React.ComponentProps<typeof SidebarSearch>["results"]
-} & React.ComponentProps<"ul">) {
-  return (
-    <ul className={cn("grid gap-0.5", className)}>
-      <li>
-        <SidebarSearch results={searchResults} />
-      </li>
-      {items.map((item) => (
-        <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
-          <li>
-            <div className="relative flex items-center">
-              <Link
-                href={item.url}
-                className="min-w-8 flex h-8 flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-              >
-                <item.icon className="h-4 w-4 shrink-0" />
-                <div className="flex flex-1 overflow-hidden">
-                  <div className="line-clamp-1 pr-6">{item.title}</div>
-                </div>
-              </Link>
-              <CollapsibleTrigger asChild>
-                <Button
-                  variant="ghost"
-                  className="absolute right-1 h-6 w-6 rounded-md p-0 ring-ring transition-all focus-visible:ring-2 data-[state=open]:rotate-90"
-                >
-                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                  <span className="sr-only">Toggle</span>
-                </Button>
-              </CollapsibleTrigger>
-            </div>
-            <CollapsibleContent className="px-4 py-0.5">
-              <ul className="grid border-l px-2">
-                {item.items?.map((subItem) => (
-                  <li key={subItem.title}>
-                    <Link
-                      href={subItem.url}
-                      className="min-w-8 flex h-8 items-center gap-2 overflow-hidden rounded-md px-2 text-sm font-medium text-muted-foreground ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-                    >
-                      <div className="line-clamp-1">{subItem.title}</div>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </CollapsibleContent>
-          </li>
-        </Collapsible>
-      ))}
-    </ul>
-  )
-}
-
-function SidebarSearch({
-  results,
-}: {
-  results: {
-    title: string
-    teaser: string
-    url: string
-  }[]
-}) {
-  const isMobile = useIsMobile()
-
-  if (isMobile) {
-    return (
-      <Drawer>
-        <DrawerTrigger className="min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground">
-          <Search className="h-4 w-4 shrink-0" />
-          <div className="flex flex-1 overflow-hidden">
-            <div className="line-clamp-1 pr-6">Search</div>
-          </div>
-        </DrawerTrigger>
-        <DrawerContent>
-          <form>
-            <div className="border-b p-2.5">
-              <Input
-                type="search"
-                placeholder="Search..."
-                className="h-8 rounded-sm shadow-none focus-visible:ring-0"
-              />
-            </div>
-          </form>
-          <div className="grid gap-1 p-1.5 text-sm">
-            {results.map((result) => (
-              <Link
-                href={result.url}
-                key={result.title}
-                className="rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-              >
-                <div className="font-medium">{result.title}</div>
-                <div className="line-clamp-2 text-muted-foreground">
-                  {result.teaser}
-                </div>
-              </Link>
-            ))}
-            <Separator className="my-1.5" />
-            <Link
-              href="#"
-              className="rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2"
-            >
-              See all results
-            </Link>
-          </div>
-        </DrawerContent>
-      </Drawer>
-    )
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger className="min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground">
-        <Search className="h-4 w-4 shrink-0" />
-        <div className="flex flex-1 overflow-hidden">
-          <div className="line-clamp-1 pr-6">Search</div>
-        </div>
-      </PopoverTrigger>
-      <PopoverContent
-        side="right"
-        align="start"
-        sideOffset={4}
-        className="w-96 p-0"
-      >
-        <form>
-          <div className="border-b p-2.5">
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="h-8 rounded-sm shadow-none focus-visible:ring-0"
-            />
-          </div>
-        </form>
-        <div className="grid gap-1 p-1.5 text-sm">
-          {results.map((result) => (
-            <Link
-              href={result.url}
-              key={result.title}
-              className="rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-            >
-              <div className="font-medium">{result.title}</div>
-              <div className="line-clamp-2 text-muted-foreground">
-                {result.teaser}
-              </div>
-            </Link>
-          ))}
-          <Separator className="my-1.5" />
-          <Link
-            href="#"
-            className="rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2"
-          >
-            See all results
-          </Link>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx b/apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx
deleted file mode 100644
index fd9b7cfbc72..00000000000
--- a/apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import Link from "next/link"
-import { MoreHorizontal, PlusSquare, type LucideIcon } from "lucide-react"
-
-import { cn } from "@/registry/default/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-export function NavProjects({
-  projects,
-  className,
-}: {
-  projects: {
-    name: string
-    url: string
-    icon: LucideIcon
-  }[]
-} & React.ComponentProps<"ul">) {
-  return (
-    <ul className={cn("grid gap-0.5", className)}>
-      {projects.map((item) => (
-        <li
-          key={item.name}
-          className="has-[[data-state=open]]:bg-accent has-[[data-state=open]]:text-accent-foreground group relative rounded-md hover:bg-accent hover:text-accent-foreground"
-        >
-          <Link
-            href={item.url}
-            className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-          >
-            <item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
-            <div className="line-clamp-1 grow overflow-hidden pr-6 font-medium">
-              {item.name}
-            </div>
-          </Link>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                className="peer absolute right-1 top-0.5 h-6 w-6 shrink-0 rounded-md bg-accent p-0 text-accent-foreground opacity-0 ring-ring transition-all focus-visible:ring-2 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100"
-              >
-                <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
-                <span className="sr-only">Toggle</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent side="right" align="start" sideOffset={20}>
-              <DropdownMenuItem>Share</DropdownMenuItem>
-              <DropdownMenuItem>Rename</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Archive</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </li>
-      ))}
-      <li>
-        <button className="flex h-7 w-full items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-left text-xs ring-ring transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2">
-          <PlusSquare className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
-          <div className="line-clamp-1 overflow-hidden font-medium text-muted-foreground">
-            Add Project
-          </div>
-        </button>
-      </li>
-    </ul>
-  )
-}
diff --git a/apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx b/apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx
deleted file mode 100644
index 6da69097471..00000000000
--- a/apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { type LucideIcon } from "lucide-react"
-
-import { cn } from "@/registry/default/lib/utils"
-
-export function NavSecondary({
-  className,
-  items,
-}: {
-  items: {
-    title: string
-    url: string
-    icon: LucideIcon
-    items?: {
-      title: string
-      url: string
-    }[]
-  }[]
-} & React.ComponentProps<"ul">) {
-  if (!items?.length) {
-    return null
-  }
-
-  return (
-    <ul className={cn("grid gap-0.5", className)}>
-      {items.map((item) => (
-        <li key={item.title}>
-          <Link
-            href={item.url}
-            className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2"
-          >
-            <item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
-            <div className="line-clamp-1 grow overflow-hidden pr-6 font-medium text-muted-foreground">
-              {item.title}
-            </div>
-          </Link>
-        </li>
-      ))}
-    </ul>
-  )
-}
diff --git a/apps/www/registry/default/block/sidebar-01/components/nav-user.tsx b/apps/www/registry/default/block/sidebar-01/components/nav-user.tsx
deleted file mode 100644
index 82955e5a439..00000000000
--- a/apps/www/registry/default/block/sidebar-01/components/nav-user.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import {
-  BadgeCheck,
-  Bell,
-  ChevronsUpDown,
-  CreditCard,
-  LogOut,
-} from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-export function NavUser({
-  user,
-}: {
-  user: {
-    name: string
-    email: string
-    avatar: string
-  }
-}) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger className="w-full rounded-md outline-none ring-ring hover:bg-accent focus-visible:ring-2 data-[state=open]:bg-accent">
-        <div className="flex items-center gap-2 px-2 py-1.5 text-left text-sm transition-all">
-          <Avatar className="h-7 w-7 rounded-md border">
-            <AvatarImage
-              src={user.avatar}
-              alt={user.name}
-              className="animate-in fade-in-50 zoom-in-90"
-            />
-            <AvatarFallback className="rounded-md">CN</AvatarFallback>
-          </Avatar>
-          <div className="grid flex-1 leading-none">
-            <div className="font-medium">{user.name}</div>
-            <div className="overflow-hidden text-xs text-muted-foreground">
-              <div className="line-clamp-1">{user.email}</div>
-            </div>
-          </div>
-          <ChevronsUpDown className="ml-auto mr-0.5 h-4 w-4 text-muted-foreground/50" />
-        </div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-56"
-        align="end"
-        side="right"
-        sideOffset={4}
-      >
-        <DropdownMenuLabel className="p-0 font-normal">
-          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm transition-all">
-            <Avatar className="h-7 w-7 rounded-md">
-              <AvatarImage src={user.avatar} alt={user.name} />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
-            <div className="grid flex-1">
-              <div className="font-medium">{user.name}</div>
-              <div className="overflow-hidden text-xs text-muted-foreground">
-                <div className="line-clamp-1">{user.email}</div>
-              </div>
-            </div>
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem className="gap-2">
-            <BadgeCheck className="h-4 w-4 text-muted-foreground" />
-            Account
-          </DropdownMenuItem>
-          <DropdownMenuItem className="gap-2">
-            <CreditCard className="h-4 w-4 text-muted-foreground" />
-            Billing
-          </DropdownMenuItem>
-          <DropdownMenuItem className="gap-2">
-            <Bell className="h-4 w-4 text-muted-foreground" />
-            Notifications
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem className="gap-2">
-          <LogOut className="h-4 w-4 text-muted-foreground" />
-          Log out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/apps/www/registry/default/block/sidebar-01/components/storage-card.tsx b/apps/www/registry/default/block/sidebar-01/components/storage-card.tsx
deleted file mode 100644
index 714c1c16264..00000000000
--- a/apps/www/registry/default/block/sidebar-01/components/storage-card.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Database } from "lucide-react"
-
-import { Card, CardContent } from "@/registry/default/ui/card"
-import { Progress } from "@/registry/default/ui/progress"
-
-export function StorageCard() {
-  return (
-    <Card className="rounded-md text-xs shadow-sm">
-      <CardContent className="flex items-start gap-2.5 p-2.5">
-        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-accent text-accent-foreground">
-          <Database className="h-5 w-5 text-muted-foreground" />
-        </div>
-        <div className="grid flex-1 gap-1">
-          <p className="font-medium">Running out of space?</p>
-          <p className="text-muted-foreground">79.2 GB / 100 GB used</p>
-          <Progress
-            value={79.2}
-            className="mt-1"
-            aria-label="79.2 GB / 100 GB used"
-          />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/sidebar-01/components/team-switcher.tsx b/apps/www/registry/default/block/sidebar-01/components/team-switcher.tsx
deleted file mode 100644
index 48e2da68c48..00000000000
--- a/apps/www/registry/default/block/sidebar-01/components/team-switcher.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronsUpDown, Plus } from "lucide-react"
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-export function TeamSwitcher({
-  teams,
-}: {
-  teams: {
-    name: string
-    logo: React.ElementType
-    plan: string
-  }[]
-}) {
-  const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger className="w-full rounded-md ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 data-[state=open]:bg-accent">
-        <div className="flex items-center gap-1.5 overflow-hidden px-2 py-1.5 text-left text-sm transition-all">
-          <div className="flex h-5 w-5 items-center justify-center rounded-sm bg-primary text-primary-foreground">
-            <activeTeam.logo className="h-3.5 w-3.5 shrink-0" />
-          </div>
-          <div className="line-clamp-1 flex-1 pr-2 font-medium">
-            {activeTeam.name}
-          </div>
-          <ChevronsUpDown className="ml-auto h-4 w-4 text-muted-foreground/50" />
-        </div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-64"
-        align="start"
-        side="right"
-        sideOffset={4}
-      >
-        <DropdownMenuLabel className="text-xs text-muted-foreground">
-          Teams
-        </DropdownMenuLabel>
-        {teams.map((team, index) => (
-          <DropdownMenuItem
-            key={team.name}
-            onClick={() => setActiveTeam(team)}
-            className="items-start gap-2 px-1.5"
-          >
-            <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground">
-              <team.logo className="h-5 w-5 shrink-0" />
-            </div>
-            <div className="grid flex-1 leading-tight">
-              <div className="line-clamp-1 font-medium">{team.name}</div>
-              <div className="overflow-hidden text-xs text-muted-foreground">
-                <div className="line-clamp-1">{team.plan}</div>
-              </div>
-            </div>
-            <DropdownMenuShortcut className="self-center">
-              ⌘{index + 1}
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-        ))}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem className="gap-2 px-1.5">
-          <div className="flex h-8 w-8 items-center justify-center rounded-md border bg-background">
-            <Plus className="h-5 w-5" />
-          </div>
-          <div className="font-medium text-muted-foreground">Add workspace</div>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/apps/www/registry/default/block/sidebar-01/hooks/use-sidebar.tsx b/apps/www/registry/default/block/sidebar-01/hooks/use-sidebar.tsx
deleted file mode 100644
index 61208293d61..00000000000
--- a/apps/www/registry/default/block/sidebar-01/hooks/use-sidebar.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-export function useSidebar() {
-  const [state, setState] = React.useState<"closed" | "open">("open")
-
-  return {
-    open: state === "open",
-    onOpenChange: (open: boolean) => setState(open ? "open" : "closed"),
-  }
-}
diff --git a/apps/www/registry/default/block/sidebar-01/page.tsx b/apps/www/registry/default/block/sidebar-01/page.tsx
deleted file mode 100644
index 335bb25e163..00000000000
--- a/apps/www/registry/default/block/sidebar-01/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { AppSidebar } from "@/registry/default/block/sidebar-01/components/app-sidebar"
-import {
-  SidebarLayout,
-  SidebarTrigger,
-} from "@/registry/default/block/sidebar-01/ui/sidebar"
-
-export const iframeHeight = "870px"
-
-export const containerClassName = "w-full h-full"
-
-export default async function Page() {
-  const { cookies } = await import("next/headers")
-  return (
-    <SidebarLayout
-      defaultOpen={cookies().get("sidebar:state")?.value === "true"}
-    >
-      <AppSidebar />
-      <main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
-        <div className="h-full rounded-md border-2 border-dashed p-2">
-          <SidebarTrigger />
-        </div>
-      </main>
-    </SidebarLayout>
-  )
-}
diff --git a/apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx b/apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx
deleted file mode 100644
index e9037f34bdc..00000000000
--- a/apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { PanelLeft } from "lucide-react"
-
-import { useIsMobile } from "@/registry/default/hooks/use-mobile"
-import { cn } from "@/registry/default/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import { Sheet, SheetContent } from "@/registry/default/ui/sheet"
-
-export const SIDEBAR_STATE_COOKIE = "sidebar:state"
-
-type SidebarContext = {
-  state: "open" | "closed"
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}
-
-const SidebarContext = React.createContext<SidebarContext>({
-  state: "open",
-  open: true,
-  onOpenChange: () => {},
-})
-
-function useSidebar() {
-  return React.useContext(SidebarContext)
-}
-
-const SidebarLayout = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean
-  }
->(({ defaultOpen, className, ...props }, ref) => {
-  const [open, setOpen] = React.useState(defaultOpen ?? true)
-
-  const onOpenChange = React.useCallback((open: boolean) => {
-    setOpen(open)
-    document.cookie = `${SIDEBAR_STATE_COOKIE}=${open}; path=/; max-age=${
-      60 * 60 * 24 * 7
-    }`
-  }, [])
-
-  const state = open ? "open" : "closed"
-
-  return (
-    <SidebarContext.Provider value={{ state, open, onOpenChange }}>
-      <div
-        ref={ref}
-        data-sidebar={state}
-        style={
-          {
-            "--sidebar-width": "16rem",
-          } as React.CSSProperties
-        }
-        className={cn(
-          "flex min-h-screen bg-accent/50 pl-0 transition-all duration-300 ease-in-out data-[sidebar=closed]:pl-0 sm:pl-[--sidebar-width]",
-          className
-        )}
-        {...props}
-      />
-    </SidebarContext.Provider>
-  )
-})
-SidebarLayout.displayName = "SidebarLayout"
-
-const SidebarTrigger = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
-  const { open, onOpenChange } = useSidebar()
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      className={cn("h-8 w-8", className)}
-      onClick={() => onOpenChange(!open)}
-      {...props}
-    >
-      <PanelLeft className="h-4 w-4" />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-})
-SidebarTrigger.displayName = "SidebarTrigger"
-
-const Sidebar = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, children }, ref) => {
-    const isMobile = useIsMobile()
-    const { open, onOpenChange } = useSidebar()
-
-    const sidebar = (
-      <div
-        ref={ref}
-        className={cn("flex h-full flex-col border-r bg-background", className)}
-      >
-        {children}
-      </div>
-    )
-
-    if (isMobile) {
-      return (
-        <Sheet open={open} onOpenChange={onOpenChange}>
-          <SheetContent
-            className="w-[260px] p-0 md:w-[--sidebar-width] [&>button]:hidden"
-            side="left"
-          >
-            {sidebar}
-          </SheetContent>
-        </Sheet>
-      )
-    }
-
-    return (
-      <aside className="fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]">
-        {sidebar}
-      </aside>
-    )
-  }
-)
-Sidebar.displayName = "Sidebar"
-
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn("flex items-center border-b px-2.5 py-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarHeader.displayName = "SidebarHeader"
-
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn("flex items-center border-t px-2.5 py-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarFooter.displayName = "SidebarFooter"
-
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn("flex flex-1 flex-col gap-5 overflow-auto py-4", className)}
-      {...props}
-    />
-  )
-})
-SidebarContent.displayName = "SidebarContent"
-
-const SidebarItem = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div ref={ref} className={cn("grid gap-2 px-2.5", className)} {...props} />
-  )
-})
-SidebarItem.displayName = "SidebarItem"
-
-const SidebarLabel = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "px-1.5 text-xs font-medium text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarLabel.displayName = "SidebarLabel"
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarItem,
-  SidebarLabel,
-  SidebarLayout,
-  SidebarTrigger,
-  useSidebar,
-}
diff --git a/apps/www/registry/default/blocks/calendar-01.tsx b/apps/www/registry/default/blocks/calendar-01.tsx
new file mode 100644
index 00000000000..7c254e7a0f8
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-01.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar01() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-02.tsx b/apps/www/registry/default/blocks/calendar-02.tsx
new file mode 100644
index 00000000000..a3c937ecbaa
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-02.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar02() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      numberOfMonths={2}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-03.tsx b/apps/www/registry/default/blocks/calendar-03.tsx
new file mode 100644
index 00000000000..89de91fafb3
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-03.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar03() {
+  const [dates, setDates] = React.useState<Date[]>([
+    new Date(2025, 5, 12),
+    new Date(2025, 6, 24),
+  ])
+
+  return (
+    <Calendar
+      mode="multiple"
+      numberOfMonths={2}
+      defaultMonth={dates[0]}
+      required
+      selected={dates}
+      onSelect={setDates}
+      max={5}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-04.tsx b/apps/www/registry/default/blocks/calendar-04.tsx
new file mode 100644
index 00000000000..86d58b8c98a
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-04.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar04() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 9),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-05.tsx b/apps/www/registry/default/blocks/calendar-05.tsx
new file mode 100644
index 00000000000..b6a13b61c4f
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-05.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar05() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 6, 15),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-06.tsx b/apps/www/registry/default/blocks/calendar-06.tsx
new file mode 100644
index 00000000000..5c61050a69d
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-06.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar06() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={1}
+        min={5}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        A minimum of 5 days is required
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-07.tsx b/apps/www/registry/default/blocks/calendar-07.tsx
new file mode 100644
index 00000000000..3f46a659e02
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-07.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar07() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 18),
+    to: new Date(2025, 6, 7),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        min={2}
+        max={20}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        Your stay must be between 2 and 20 nights
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-08.tsx b/apps/www/registry/default/blocks/calendar-08.tsx
new file mode 100644
index 00000000000..93a90ff4e85
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-08.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar08() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={{
+        before: new Date(2025, 5, 12),
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-09.tsx b/apps/www/registry/default/blocks/calendar-09.tsx
new file mode 100644
index 00000000000..182d7f2bb9f
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-09.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar09() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      disabled={{ dayOfWeek: [0, 6] }}
+      className="rounded-lg border shadow-sm"
+      excludeDisabled
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-10.tsx b/apps/www/registry/default/blocks/calendar-10.tsx
new file mode 100644
index 00000000000..592c66ded3b
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-10.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+
+export default function Calendar10() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Card>
+      <CardHeader className="relative">
+        <CardTitle>Appointment</CardTitle>
+        <CardDescription>Find a date</CardDescription>
+        <Button
+          size="sm"
+          variant="outline"
+          className="absolute right-4 top-4"
+          onClick={() => {
+            setMonth(new Date())
+            setDate(new Date())
+          }}
+        >
+          Today
+        </Button>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="single"
+          month={month}
+          onMonthChange={setMonth}
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-11.tsx b/apps/www/registry/default/blocks/calendar-11.tsx
new file mode 100644
index 00000000000..dfad509ae13
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-11.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar11() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        startMonth={new Date(2025, 5, 1)}
+        endMonth={new Date(2025, 6, 31)}
+        disableNavigation
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        We are open in June and July only.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-12.tsx b/apps/www/registry/default/blocks/calendar-12.tsx
new file mode 100644
index 00000000000..0e3dda96324
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-12.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+import { enUS, es } from "react-day-picker/locale"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+const localizedStrings = {
+  en: {
+    title: "Book an appointment",
+    description: "Select the dates for your appointment",
+  },
+  es: {
+    title: "Reserva una cita",
+    description: "Selecciona las fechas para tu cita",
+  },
+} as const
+
+export default function Calendar12() {
+  const [locale, setLocale] =
+    React.useState<keyof typeof localizedStrings>("es")
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 8, 9),
+    to: new Date(2025, 8, 17),
+  })
+
+  return (
+    <Card>
+      <CardHeader className="relative border-b">
+        <CardTitle>{localizedStrings[locale].title}</CardTitle>
+        <CardDescription>
+          {localizedStrings[locale].description}
+        </CardDescription>
+        <Select
+          value={locale}
+          onValueChange={(value) =>
+            setLocale(value as keyof typeof localizedStrings)
+          }
+        >
+          <SelectTrigger className="absolute right-4 top-4 w-[100px]">
+            <SelectValue placeholder="Language" />
+          </SelectTrigger>
+          <SelectContent align="end">
+            <SelectItem value="es">Español</SelectItem>
+            <SelectItem value="en">English</SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <Calendar
+          mode="range"
+          selected={dateRange}
+          onSelect={setDateRange}
+          defaultMonth={dateRange?.from}
+          numberOfMonths={2}
+          locale={locale === "es" ? es : enUS}
+          className="bg-transparent p-0"
+          buttonVariant="outline"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-13.tsx b/apps/www/registry/default/blocks/calendar-13.tsx
new file mode 100644
index 00000000000..047d67fa6cb
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-13.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+export default function Calendar13() {
+  const [dropdown, setDropdown] =
+    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
+      "dropdown"
+    )
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        captionLayout={dropdown}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="dropdown" className="px-1">
+          Dropdown
+        </Label>
+        <Select
+          value={dropdown}
+          onValueChange={(value) =>
+            setDropdown(
+              value as React.ComponentProps<typeof Calendar>["captionLayout"]
+            )
+          }
+        >
+          <SelectTrigger id="dropdown" className="bg-background w-full">
+            <SelectValue placeholder="Dropdown" />
+          </SelectTrigger>
+          <SelectContent align="center">
+            <SelectItem value="dropdown">Month and Year</SelectItem>
+            <SelectItem value="dropdown-months">Month Only</SelectItem>
+            <SelectItem value="dropdown-years">Year Only</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-14.tsx b/apps/www/registry/default/blocks/calendar-14.tsx
new file mode 100644
index 00000000000..e1d53f1a7dc
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-14.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar14() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const bookedDates = Array.from(
+    { length: 12 },
+    (_, i) => new Date(2025, 5, 15 + i)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={bookedDates}
+      modifiers={{
+        booked: bookedDates,
+      }}
+      modifiersClassNames={{
+        booked: "[&>button]:line-through opacity-100",
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-15.tsx b/apps/www/registry/default/blocks/calendar-15.tsx
new file mode 100644
index 00000000000..6fec6f59a05
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-15.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar15() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+      showWeekNumber
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-16.tsx b/apps/www/registry/default/blocks/calendar-16.tsx
new file mode 100644
index 00000000000..d21aa9fcabb
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-16.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Clock2Icon } from "lucide-react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar16() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col gap-6 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-from">Start Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-from"
+              type="time"
+              step="1"
+              defaultValue="10:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-to">End Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-to"
+              type="time"
+              step="1"
+              defaultValue="12:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-17.tsx b/apps/www/registry/default/blocks/calendar-17.tsx
new file mode 100644
index 00000000000..bd66aeb3d26
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-17.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar17() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0 [--cell-size:2.8rem]"
+        />
+      </CardContent>
+      <CardFooter className="*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4">
+        <div className="flex-1">
+          <Label htmlFor="time-from" className="sr-only">
+            Start Time
+          </Label>
+          <Input
+            id="time-from"
+            type="time"
+            step="1"
+            defaultValue="10:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <span>-</span>
+        <div className="flex-1">
+          <Label htmlFor="time-to" className="sr-only">
+            End Time
+          </Label>
+          <Input
+            id="time-to"
+            type="time"
+            step="1"
+            defaultValue="12:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-18.tsx b/apps/www/registry/default/blocks/calendar-18.tsx
new file mode 100644
index 00000000000..950983dfa3a
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-18.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export default function Calendar18() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      buttonVariant="ghost"
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-19.tsx b/apps/www/registry/default/blocks/calendar-19.tsx
new file mode 100644
index 00000000000..c9bff184e89
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-19.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { addDays } from "date-fns"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+export default function Calendar19() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="max-w-[300px] py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          defaultMonth={date}
+          className="bg-transparent p-0 [--cell-size:2.375rem]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t px-4 pb-0 pt-4">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-20.tsx b/apps/www/registry/default/blocks/calendar-20.tsx
new file mode 100644
index 00000000000..e9ba34fc43c
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-20.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+export default function Calendar20() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00")
+  const timeSlots = Array.from({ length: 37 }, (_, i) => {
+    const totalMinutes = i * 15
+    const hour = Math.floor(totalMinutes / 60) + 9
+    const minute = totalMinutes % 60
+    return `${hour.toString().padStart(2, "0")}:${minute
+      .toString()
+      .padStart(2, "0")}`
+  })
+
+  const bookedDates = Array.from(
+    { length: 3 },
+    (_, i) => new Date(2025, 5, 17 + i)
+  )
+
+  return (
+    <Card className="gap-0 p-0">
+      <CardContent className="relative p-0 md:pr-48">
+        <div className="p-6">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            defaultMonth={date}
+            disabled={bookedDates}
+            showOutsideDays={false}
+            modifiers={{
+              booked: bookedDates,
+            }}
+            modifiersClassNames={{
+              booked: "[&>button]:line-through opacity-100",
+            }}
+            className="bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]"
+            formatters={{
+              formatWeekdayName: (date) => {
+                return date.toLocaleString("en-US", { weekday: "short" })
+              },
+            }}
+          />
+        </div>
+        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0">
+          <div className="grid gap-2">
+            {timeSlots.map((time) => (
+              <Button
+                key={time}
+                variant={selectedTime === time ? "default" : "outline"}
+                onClick={() => setSelectedTime(time)}
+                className="w-full shadow-none"
+              >
+                {time}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-4 border-t !py-5 px-6 md:flex-row">
+        <div className="text-sm">
+          {date && selectedTime ? (
+            <>
+              Your meeting is booked for{" "}
+              <span className="font-medium">
+                {" "}
+                {date?.toLocaleDateString("en-US", {
+                  weekday: "long",
+                  day: "numeric",
+                  month: "long",
+                })}{" "}
+              </span>
+              at <span className="font-medium">{selectedTime}</span>.
+            </>
+          ) : (
+            <>Select a date and time for your meeting.</>
+          )}
+        </div>
+        <Button
+          disabled={!date || !selectedTime}
+          className="w-full md:ml-auto md:w-auto"
+          variant="outline"
+        >
+          Continue
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-21.tsx b/apps/www/registry/default/blocks/calendar-21.tsx
new file mode 100644
index 00000000000..4762f22b32c
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-21.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { DateRange } from "react-day-picker"
+
+import { Calendar, CalendarDayButton } from "@/registry/default/ui/calendar"
+
+export default function Calendar21() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 17),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={range?.from}
+      selected={range}
+      onSelect={setRange}
+      numberOfMonths={1}
+      captionLayout="dropdown"
+      className="rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      formatters={{
+        formatMonthDropdown: (date) => {
+          return date.toLocaleString("default", { month: "long" })
+        },
+      }}
+      components={{
+        DayButton: ({ children, modifiers, day, ...props }) => {
+          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+          return (
+            <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+              {children}
+              {!modifiers.outside && <span>{isWeekend ? "$220" : "$100"}</span>}
+            </CalendarDayButton>
+          )
+        },
+      }}
+    />
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-22.tsx b/apps/www/registry/default/blocks/calendar-22.tsx
new file mode 100644
index 00000000000..b1846847620
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-22.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar22() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-23.tsx b/apps/www/registry/default/blocks/calendar-23.tsx
new file mode 100644
index 00000000000..a1110c054ac
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-23.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar23() {
+  const [range, setRange] = React.useState<DateRange | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-24.tsx b/apps/www/registry/default/blocks/calendar-24.tsx
new file mode 100644
index 00000000000..19f1fd0d036
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-24.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar24() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-32 justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="time" className="px-1">
+          Time
+        </Label>
+        <Input
+          type="time"
+          id="time"
+          step="1"
+          defaultValue="10:30:00"
+          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-25.tsx b/apps/www/registry/default/blocks/calendar-25.tsx
new file mode 100644
index 00000000000..bf01d207c38
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-25.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar25() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-full justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-26.tsx b/apps/www/registry/default/blocks/calendar-26.tsx
new file mode 100644
index 00000000000..20326233488
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-26.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar26() {
+  const [openFrom, setOpenFrom] = React.useState(false)
+  const [openTo, setOpenTo] = React.useState(false)
+  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [dateTo, setDateTo] = React.useState<Date | undefined>(
+    new Date("2025-06-03")
+  )
+
+  return (
+    <div className="flex w-full max-w-64 min-w-0 flex-col gap-6">
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-from" className="px-1">
+            Check-in
+          </Label>
+          <Popover open={openFrom} onOpenChange={setOpenFrom}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-from"
+                className="w-full justify-between font-normal"
+              >
+                {dateFrom
+                  ? dateFrom.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateFrom}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateFrom(date)
+                  setOpenFrom(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="invisible px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-to" className="px-1">
+            Check-out
+          </Label>
+          <Popover open={openTo} onOpenChange={setOpenTo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-to"
+                className="w-full justify-between font-normal"
+              >
+                {dateTo
+                  ? dateTo.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateTo}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateTo(date)
+                  setOpenTo(false)
+                }}
+                disabled={dateFrom && { before: dateFrom }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="invisible px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-27.tsx b/apps/www/registry/default/blocks/calendar-27.tsx
new file mode 100644
index 00000000000..ebc120422d9
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-27.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+const chartData = [
+  { date: "2025-06-01", visitors: 178 },
+  { date: "2025-06-02", visitors: 470 },
+  { date: "2025-06-03", visitors: 103 },
+  { date: "2025-06-04", visitors: 439 },
+  { date: "2025-06-05", visitors: 88 },
+  { date: "2025-06-06", visitors: 294 },
+  { date: "2025-06-07", visitors: 323 },
+  { date: "2025-06-08", visitors: 385 },
+  { date: "2025-06-09", visitors: 438 },
+  { date: "2025-06-10", visitors: 155 },
+  { date: "2025-06-11", visitors: 92 },
+  { date: "2025-06-12", visitors: 492 },
+  { date: "2025-06-13", visitors: 81 },
+  { date: "2025-06-14", visitors: 426 },
+  { date: "2025-06-15", visitors: 307 },
+  { date: "2025-06-16", visitors: 371 },
+  { date: "2025-06-17", visitors: 475 },
+  { date: "2025-06-18", visitors: 107 },
+  { date: "2025-06-19", visitors: 341 },
+  { date: "2025-06-20", visitors: 408 },
+  { date: "2025-06-21", visitors: 169 },
+  { date: "2025-06-22", visitors: 317 },
+  { date: "2025-06-23", visitors: 480 },
+  { date: "2025-06-24", visitors: 132 },
+  { date: "2025-06-25", visitors: 141 },
+  { date: "2025-06-26", visitors: 434 },
+  { date: "2025-06-27", visitors: 448 },
+  { date: "2025-06-28", visitors: 149 },
+  { date: "2025-06-29", visitors: 103 },
+  { date: "2025-06-30", visitors: 446 },
+]
+
+const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export default function Calendar27() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 5),
+    to: new Date(2025, 5, 20),
+  })
+  const filteredData = React.useMemo(() => {
+    if (!range?.from && !range?.to) {
+      return chartData
+    }
+
+    return chartData.filter((item) => {
+      const date = new Date(item.date)
+      return date >= range.from! && date <= range.to!
+    })
+  }, [range])
+
+  return (
+    <Card className="@container/card w-full max-w-xl">
+      <CardHeader className="@md/card:grid relative flex flex-col border-b">
+        <CardTitle>Web Analytics</CardTitle>
+        <CardDescription>
+          Showing total visitors for this month.
+        </CardDescription>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="absolute right-4 top-4">
+              <CalendarIcon />
+              {range?.from && range?.to
+                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+                : "June 2025"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              className="w-full"
+              mode="range"
+              defaultMonth={range?.from}
+              selected={range}
+              onSelect={setRange}
+              disableNavigation
+              startMonth={range?.from}
+              fixedWeeks
+              showOutsideDays
+              disabled={{
+                after: new Date(2025, 5, 31),
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+      <CardContent className="px-4">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={filteredData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={20}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="visitors"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey="visitors" fill={`var(--color-visitors)`} radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="border-t pt-6">
+        <div className="text-sm">
+          You had{" "}
+          <span className="font-semibold">{total.toLocaleString()}</span>{" "}
+          visitors for the month of June.
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-28.tsx b/apps/www/registry/default/blocks/calendar-28.tsx
new file mode 100644
index 00000000000..2cd72f75a1c
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-28.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+function isValidDate(date: Date | undefined) {
+  if (!date) {
+    return false
+  }
+  return !isNaN(date.getTime())
+}
+
+export default function Calendar28() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+  const [value, setValue] = React.useState(formatDate(date))
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Subscription Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="June 01, 2025"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            const date = new Date(e.target.value)
+            setValue(e.target.value)
+            if (isValidDate(date)) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto overflow-hidden p-0"
+            align="end"
+            alignOffset={-8}
+            sideOffset={10}
+          >
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-29.tsx b/apps/www/registry/default/blocks/calendar-29.tsx
new file mode 100644
index 00000000000..22af3602507
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-29.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { parseDate } from "chrono-node"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+export default function Calendar29() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("In 2 days")
+  const [date, setDate] = React.useState<Date | undefined>(
+    parseDate(value) || undefined
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Schedule Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="Tomorrow or next week"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            setValue(e.target.value)
+            const date = parseDate(e.target.value)
+            if (date) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="text-muted-foreground px-1 text-sm">
+        Your post will be published on{" "}
+        <span className="font-medium">{formatDate(date)}</span>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-30.tsx b/apps/www/registry/default/blocks/calendar-30.tsx
new file mode 100644
index 00000000000..5cb30d9841f
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-30.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function Calendar30() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? formatDateRange(range.from, range.to, {
+                  includeTime: false,
+                })
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-31.tsx b/apps/www/registry/default/blocks/calendar-31.tsx
new file mode 100644
index 00000000000..6c2c185df10
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-31.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
+
+const events = [
+  {
+    title: "Team Sync Meeting",
+    from: "2025-06-12T09:00:00",
+    to: "2025-06-12T10:00:00",
+  },
+  {
+    title: "Design Review",
+    from: "2025-06-12T11:30:00",
+    to: "2025-06-12T12:30:00",
+  },
+  {
+    title: "Client Presentation",
+    from: "2025-06-12T14:00:00",
+    to: "2025-06-12T15:00:00",
+  },
+]
+
+export default function Calendar31() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+          required
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full items-center justify-between px-1">
+          <div className="text-sm font-medium">
+            {date?.toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+            })}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            title="Add Event"
+          >
+            <PlusIcon />
+            <span className="sr-only">Add Event</span>
+          </Button>
+        </div>
+        <div className="flex w-full flex-col gap-2">
+          {events.map((event) => (
+            <div
+              key={event.title}
+              className="bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full"
+            >
+              <div className="font-medium">{event.title}</div>
+              <div className="text-muted-foreground text-xs">
+                {formatDateRange(new Date(event.from), new Date(event.to))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/calendar-32.tsx b/apps/www/registry/default/blocks/calendar-32.tsx
new file mode 100644
index 00000000000..afd47c1497f
--- /dev/null
+++ b/apps/www/registry/default/blocks/calendar-32.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { CalendarPlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/default/ui/drawer"
+import { Label } from "@/registry/default/ui/label"
+
+export default function Calendar32() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <CalendarPlusIcon />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="w-auto overflow-hidden p-0">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select date</DrawerTitle>
+            <DrawerDescription>Set your date of birth</DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
+          />
+        </DrawerContent>
+      </Drawer>
+      <div className="text-muted-foreground px-1 text-sm">
+        This example works best on mobile.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/dashboard-01/components/app-sidebar.tsx b/apps/www/registry/default/blocks/dashboard-01/components/app-sidebar.tsx
new file mode 100644
index 00000000000..669efbfe4a5
--- /dev/null
+++ b/apps/www/registry/default/blocks/dashboard-01/components/app-sidebar.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArrowUpCircleIcon,
+  BarChartIcon,
+  CameraIcon,
+  ClipboardListIcon,
+  DatabaseIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileTextIcon,
+  FolderIcon,
+  HelpCircleIcon,
+  LayoutDashboardIcon,
+  ListIcon,
+  SearchIcon,
+  SettingsIcon,
+  UsersIcon,
+} from "lucide-react"
+
+import { NavDocuments } from "@/registry/default/blocks/dashboard-01/components/nav-documents"
+import { NavMain } from "@/registry/default/blocks/dashboard-01/components/nav-main"
+import { NavSecondary } from "@/registry/default/blocks/dashboard-01/components/nav-secondary"
+import { NavUser } from "@/registry/default/blocks/dashboard-01/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Dashboard",
+      url: "#",
+      icon: LayoutDashboardIcon,
+    },
+    {
+      title: "Lifecycle",
+      url: "#",
+      icon: ListIcon,
+    },
+    {
+      title: "Analytics",
+      url: "#",
+      icon: BarChartIcon,
+    },
+    {
+      title: "Projects",
+      url: "#",
+      icon: FolderIcon,
+    },
+    {
+      title: "Team",
+      url: "#",
+      icon: UsersIcon,
+    },
+  ],
+  navClouds: [
+    {
+      title: "Capture",
+      icon: CameraIcon,
+      isActive: true,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Proposal",
+      icon: FileTextIcon,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Prompts",
+      icon: FileCodeIcon,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Settings",
+      url: "#",
+      icon: SettingsIcon,
+    },
+    {
+      title: "Get Help",
+      url: "#",
+      icon: HelpCircleIcon,
+    },
+    {
+      title: "Search",
+      url: "#",
+      icon: SearchIcon,
+    },
+  ],
+  documents: [
+    {
+      name: "Data Library",
+      url: "#",
+      icon: DatabaseIcon,
+    },
+    {
+      name: "Reports",
+      url: "#",
+      icon: ClipboardListIcon,
+    },
+    {
+      name: "Word Assistant",
+      url: "#",
+      icon: FileIcon,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="offcanvas" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              className="data-[slot=sidebar-menu-button]:!p-1.5"
+            >
+              <a href="#">
+                <ArrowUpCircleIcon className="h-5 w-5" />
+                <span className="text-base font-semibold">Acme Inc.</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavDocuments items={data.documents} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/dashboard-01/components/chart-area-interactive.tsx b/apps/www/registry/default/blocks/dashboard-01/components/chart-area-interactive.tsx
new file mode 100644
index 00000000000..1b77f6c4259
--- /dev/null
+++ b/apps/www/registry/default/blocks/dashboard-01/components/chart-area-interactive.tsx
@@ -0,0 +1,295 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import { useIsMobile } from "@/registry/default/hooks/use-mobile"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/default/ui/toggle-group"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaInteractive() {
+  const isMobile = useIsMobile()
+  const [timeRange, setTimeRange] = React.useState("30d")
+
+  React.useEffect(() => {
+    if (isMobile) {
+      setTimeRange("7d")
+    }
+  }, [isMobile])
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card className="@container/card">
+      <CardHeader className="relative">
+        <CardTitle>Total Visitors</CardTitle>
+        <CardDescription>
+          <span className="@[540px]/card:block hidden">
+            Total for the last 3 months
+          </span>
+          <span className="@[540px]/card:hidden">Last 3 months</span>
+        </CardDescription>
+        <div className="absolute right-4 top-4">
+          <ToggleGroup
+            type="single"
+            value={timeRange}
+            onValueChange={setTimeRange}
+            variant="outline"
+            className="@[767px]/card:flex hidden"
+          >
+            <ToggleGroupItem value="90d" className="h-8 px-2.5">
+              Last 3 months
+            </ToggleGroupItem>
+            <ToggleGroupItem value="30d" className="h-8 px-2.5">
+              Last 30 days
+            </ToggleGroupItem>
+            <ToggleGroupItem value="7d" className="h-8 px-2.5">
+              Last 7 days
+            </ToggleGroupItem>
+          </ToggleGroup>
+          <Select value={timeRange} onValueChange={setTimeRange}>
+            <SelectTrigger
+              className="@[767px]/card:hidden flex w-40"
+              aria-label="Select a value"
+            >
+              <SelectValue placeholder="Last 3 months" />
+            </SelectTrigger>
+            <SelectContent className="rounded-xl">
+              <SelectItem value="90d" className="rounded-lg">
+                Last 3 months
+              </SelectItem>
+              <SelectItem value="30d" className="rounded-lg">
+                Last 30 days
+              </SelectItem>
+              <SelectItem value="7d" className="rounded-lg">
+                Last 7 days
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={1.0}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/dashboard-01/components/data-table.tsx b/apps/www/registry/default/blocks/dashboard-01/components/data-table.tsx
new file mode 100644
index 00000000000..3cc784ddc2f
--- /dev/null
+++ b/apps/www/registry/default/blocks/dashboard-01/components/data-table.tsx
@@ -0,0 +1,823 @@
+"use client"
+
+import * as React from "react"
+import {
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type UniqueIdentifier,
+} from "@dnd-kit/core"
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  Row,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  CheckCircle2Icon,
+  CheckCircleIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  ColumnsIcon,
+  GripVerticalIcon,
+  LoaderIcon,
+  MoreVerticalIcon,
+  PlusIcon,
+  TrendingUpIcon,
+} from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { useIsMobile } from "@/registry/default/hooks/use-mobile"
+import { Badge } from "@/registry/default/ui/badge"
+import { Button } from "@/registry/default/ui/button"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+import { Checkbox } from "@/registry/default/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/default/ui/sheet"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/default/ui/table"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/default/ui/tabs"
+
+export const schema = z.object({
+  id: z.number(),
+  header: z.string(),
+  type: z.string(),
+  status: z.string(),
+  target: z.string(),
+  limit: z.string(),
+  reviewer: z.string(),
+})
+
+// Create a separate component for the drag handle
+function DragHandle({ id }: { id: number }) {
+  const { attributes, listeners } = useSortable({
+    id,
+  })
+
+  return (
+    <Button
+      {...attributes}
+      {...listeners}
+      variant="ghost"
+      size="icon"
+      className="size-7 text-muted-foreground hover:bg-transparent"
+    >
+      <GripVerticalIcon className="size-3 text-muted-foreground" />
+      <span className="sr-only">Drag to reorder</span>
+    </Button>
+  )
+}
+
+const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "drag",
+    header: () => null,
+    cell: ({ row }) => <DragHandle id={row.original.id} />,
+  },
+  {
+    id: "select",
+    header: ({ table }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "header",
+    header: "Header",
+    cell: ({ row }) => {
+      return <TableCellViewer item={row.original} />
+    },
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: "Section Type",
+    cell: ({ row }) => (
+      <div className="w-32">
+        <Badge variant="outline" className="px-1.5 text-muted-foreground">
+          {row.original.type}
+        </Badge>
+      </div>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <Badge
+        variant="outline"
+        className="flex gap-1 px-1.5 text-muted-foreground [&_svg]:size-3"
+      >
+        {row.original.status === "Done" ? (
+          <CheckCircle2Icon className="text-green-500 dark:text-green-400" />
+        ) : (
+          <LoaderIcon />
+        )}
+        {row.original.status}
+      </Badge>
+    ),
+  },
+  {
+    accessorKey: "target",
+    header: () => <div className="w-full text-right">Target</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: "Done",
+            error: "Error",
+          })
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-target`} className="sr-only">
+          Target
+        </Label>
+        <Input
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background"
+          defaultValue={row.original.target}
+          id={`${row.original.id}-target`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: "limit",
+    header: () => <div className="w-full text-right">Limit</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: "Done",
+            error: "Error",
+          })
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-limit`} className="sr-only">
+          Limit
+        </Label>
+        <Input
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background"
+          defaultValue={row.original.limit}
+          id={`${row.original.id}-limit`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: "reviewer",
+    header: "Reviewer",
+    cell: ({ row }) => {
+      const isAssigned = row.original.reviewer !== "Assign reviewer"
+
+      if (isAssigned) {
+        return row.original.reviewer
+      }
+
+      return (
+        <>
+          <Label htmlFor={`${row.original.id}-reviewer`} className="sr-only">
+            Reviewer
+          </Label>
+          <Select>
+            <SelectTrigger
+              className="h-8 w-40"
+              id={`${row.original.id}-reviewer`}
+            >
+              <SelectValue placeholder="Assign reviewer" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+              <SelectItem value="Jamik Tashpulatov">
+                Jamik Tashpulatov
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </>
+      )
+    },
+  },
+  {
+    id: "actions",
+    cell: () => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
+            size="icon"
+          >
+            <MoreVerticalIcon />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-32">
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+          <DropdownMenuItem>Make a copy</DropdownMenuItem>
+          <DropdownMenuItem>Favorite</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+  },
+]
+
+function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id: row.original.id,
+  })
+
+  return (
+    <TableRow
+      data-state={row.getIsSelected() && "selected"}
+      data-dragging={isDragging}
+      ref={setNodeRef}
+      className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition: transition,
+      }}
+    >
+      {row.getVisibleCells().map((cell) => (
+        <TableCell key={cell.id}>
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}
+
+export function DataTable({
+  data: initialData,
+}: {
+  data: z.infer<typeof schema>[]
+}) {
+  const [data, setData] = React.useState(() => initialData)
+  const [rowSelection, setRowSelection] = React.useState({})
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+  const sortableId = React.useId()
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  const dataIds = React.useMemo<UniqueIdentifier[]>(
+    () => data?.map(({ id }) => id) || [],
+    [data]
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination,
+    },
+    getRowId: (row) => row.id.toString(),
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  })
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (active && over && active.id !== over.id) {
+      setData((data) => {
+        const oldIndex = dataIds.indexOf(active.id)
+        const newIndex = dataIds.indexOf(over.id)
+        return arrayMove(data, oldIndex, newIndex)
+      })
+    }
+  }
+
+  return (
+    <Tabs
+      defaultValue="outline"
+      className="flex w-full flex-col justify-start gap-6"
+    >
+      <div className="flex items-center justify-between px-4 lg:px-6">
+        <Label htmlFor="view-selector" className="sr-only">
+          View
+        </Label>
+        <Select defaultValue="outline">
+          <SelectTrigger
+            className="@4xl/main:hidden flex w-fit"
+            id="view-selector"
+          >
+            <SelectValue placeholder="Select a view" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="outline">Outline</SelectItem>
+            <SelectItem value="past-performance">Past Performance</SelectItem>
+            <SelectItem value="key-personnel">Key Personnel</SelectItem>
+            <SelectItem value="focus-documents">Focus Documents</SelectItem>
+          </SelectContent>
+        </Select>
+        <TabsList className="@4xl/main:flex hidden">
+          <TabsTrigger value="outline">Outline</TabsTrigger>
+          <TabsTrigger value="past-performance" className="gap-1">
+            Past Performance{" "}
+            <Badge
+              variant="secondary"
+              className="flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30"
+            >
+              3
+            </Badge>
+          </TabsTrigger>
+          <TabsTrigger value="key-personnel" className="gap-1">
+            Key Personnel{" "}
+            <Badge
+              variant="secondary"
+              className="flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30"
+            >
+              2
+            </Badge>
+          </TabsTrigger>
+          <TabsTrigger value="focus-documents">Focus Documents</TabsTrigger>
+        </TabsList>
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm">
+                <ColumnsIcon />
+                <span className="hidden lg:inline">Customize Columns</span>
+                <span className="lg:hidden">Columns</span>
+                <ChevronDownIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              {table
+                .getAllColumns()
+                .filter(
+                  (column) =>
+                    typeof column.accessorFn !== "undefined" &&
+                    column.getCanHide()
+                )
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) =>
+                        column.toggleVisibility(!!value)
+                      }
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Button variant="outline" size="sm">
+            <PlusIcon />
+            <span className="hidden lg:inline">Add Section</span>
+          </Button>
+        </div>
+      </div>
+      <TabsContent
+        value="outline"
+        className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
+      >
+        <div className="overflow-hidden rounded-lg border">
+          <DndContext
+            collisionDetection={closestCenter}
+            modifiers={[restrictToVerticalAxis]}
+            onDragEnd={handleDragEnd}
+            sensors={sensors}
+            id={sortableId}
+          >
+            <Table>
+              <TableHeader className="sticky top-0 z-10 bg-muted">
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} colSpan={header.colSpan}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      )
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody className="**:data-[slot=table-cell]:first:w-8">
+                {table.getRowModel().rows?.length ? (
+                  <SortableContext
+                    items={dataIds}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {table.getRowModel().rows.map((row) => (
+                      <DraggableRow key={row.id} row={row} />
+                    ))}
+                  </SortableContext>
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      No results.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </DndContext>
+        </div>
+        <div className="flex items-center justify-between px-4">
+          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+          <div className="flex w-full items-center gap-8 lg:w-fit">
+            <div className="hidden items-center gap-2 lg:flex">
+              <Label htmlFor="rows-per-page" className="text-sm font-medium">
+                Rows per page
+              </Label>
+              <Select
+                value={`${table.getState().pagination.pageSize}`}
+                onValueChange={(value) => {
+                  table.setPageSize(Number(value))
+                }}
+              >
+                <SelectTrigger className="w-20" id="rows-per-page">
+                  <SelectValue
+                    placeholder={table.getState().pagination.pageSize}
+                  />
+                </SelectTrigger>
+                <SelectContent side="top">
+                  {[10, 20, 30, 40, 50].map((pageSize) => (
+                    <SelectItem key={pageSize} value={`${pageSize}`}>
+                      {pageSize}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex w-fit items-center justify-center text-sm font-medium">
+              Page {table.getState().pagination.pageIndex + 1} of{" "}
+              {table.getPageCount()}
+            </div>
+            <div className="ml-auto flex items-center gap-2 lg:ml-0">
+              <Button
+                variant="outline"
+                className="hidden h-8 w-8 p-0 lg:flex"
+                onClick={() => table.setPageIndex(0)}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to first page</span>
+                <ChevronsLeftIcon />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8"
+                size="icon"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to previous page</span>
+                <ChevronLeftIcon />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8"
+                size="icon"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to next page</span>
+                <ChevronRightIcon />
+              </Button>
+              <Button
+                variant="outline"
+                className="hidden size-8 lg:flex"
+                size="icon"
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to last page</span>
+                <ChevronsRightIcon />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </TabsContent>
+      <TabsContent
+        value="past-performance"
+        className="flex flex-col px-4 lg:px-6"
+      >
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+      <TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+      <TabsContent
+        value="focus-documents"
+        className="flex flex-col px-4 lg:px-6"
+      >
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+    </Tabs>
+  )
+}
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--primary)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
+  const isMobile = useIsMobile()
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="link" className="w-fit px-0 text-left text-foreground">
+          {item.header}
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="flex flex-col">
+        <SheetHeader className="gap-1">
+          <SheetTitle>{item.header}</SheetTitle>
+          <SheetDescription>
+            Showing total visitors for the last 6 months
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex flex-1 flex-col gap-4 overflow-y-auto py-4 text-sm">
+          {!isMobile && (
+            <>
+              <ChartContainer config={chartConfig}>
+                <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                    left: 0,
+                    right: 10,
+                  }}
+                >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                    dataKey="month"
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                    tickFormatter={(value) => value.slice(0, 3)}
+                    hide
+                  />
+                  <ChartTooltip
+                    cursor={false}
+                    content={<ChartTooltipContent indicator="dot" />}
+                  />
+                  <Area
+                    dataKey="mobile"
+                    type="natural"
+                    fill="var(--color-mobile)"
+                    fillOpacity={0.6}
+                    stroke="var(--color-mobile)"
+                    stackId="a"
+                  />
+                  <Area
+                    dataKey="desktop"
+                    type="natural"
+                    fill="var(--color-desktop)"
+                    fillOpacity={0.4}
+                    stroke="var(--color-desktop)"
+                    stackId="a"
+                  />
+                </AreaChart>
+              </ChartContainer>
+              <Separator />
+              <div className="grid gap-2">
+                <div className="flex gap-2 font-medium leading-none">
+                  Trending up by 5.2% this month{" "}
+                  <TrendingUpIcon className="size-4" />
+                </div>
+                <div className="text-muted-foreground">
+                  Showing total visitors for the last 6 months. This is just
+                  some random text to test the layout. It spans multiple lines
+                  and should wrap around.
+                </div>
+              </div>
+              <Separator />
+            </>
+          )}
+          <form className="flex flex-col gap-4">
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="header">Header</Label>
+              <Input id="header" defaultValue={item.header} />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="type">Type</Label>
+                <Select defaultValue={item.type}>
+                  <SelectTrigger id="type" className="w-full">
+                    <SelectValue placeholder="Select a type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Table of Contents">
+                      Table of Contents
+                    </SelectItem>
+                    <SelectItem value="Executive Summary">
+                      Executive Summary
+                    </SelectItem>
+                    <SelectItem value="Technical Approach">
+                      Technical Approach
+                    </SelectItem>
+                    <SelectItem value="Design">Design</SelectItem>
+                    <SelectItem value="Capabilities">Capabilities</SelectItem>
+                    <SelectItem value="Focus Documents">
+                      Focus Documents
+                    </SelectItem>
+                    <SelectItem value="Narrative">Narrative</SelectItem>
+                    <SelectItem value="Cover Page">Cover Page</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="status">Status</Label>
+                <Select defaultValue={item.status}>
+                  <SelectTrigger id="status" className="w-full">
+                    <SelectValue placeholder="Select a status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Done">Done</SelectItem>
+                    <SelectItem value="In Progress">In Progress</SelectItem>
+                    <SelectItem value="Not Started">Not Started</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="target">Target</Label>
+                <Input id="target" defaultValue={item.target} />
+              </div>
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="limit">Limit</Label>
+                <Input id="limit" defaultValue={item.limit} />
+              </div>
+            </div>
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="reviewer">Reviewer</Label>
+              <Select defaultValue={item.reviewer}>
+                <SelectTrigger id="reviewer" className="w-full">
+                  <SelectValue placeholder="Select a reviewer" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+                  <SelectItem value="Jamik Tashpulatov">
+                    Jamik Tashpulatov
+                  </SelectItem>
+                  <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </form>
+        </div>
+        <SheetFooter className="mt-auto flex gap-2 sm:flex-col sm:space-x-0">
+          <Button className="w-full">Submit</Button>
+          <SheetClose asChild>
+            <Button variant="outline" className="w-full">
+              Done
+            </Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/apps/www/registry/default/blocks/dashboard-01/components/nav-documents.tsx b/apps/www/registry/default/blocks/dashboard-01/components/nav-documents.tsx
new file mode 100644
index 00000000000..8dca2a5403d
--- /dev/null
+++ b/apps/www/registry/default/blocks/dashboard-01/components/nav-documents.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import {
+  FolderIcon,
+  MoreHorizontalIcon,
+  ShareIcon,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavDocuments({
+  items,
+}: {
+  items: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Documents</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction
+                  showOnHover
+                  className="rounded-sm data-[state=open]:bg-accent"
+                >
+                  <MoreHorizontalIcon />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-24 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <FolderIcon />
+                  <span>Open</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ShareIcon />
+                  <span>Share</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontalIcon className="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/dashboard-01/components/nav-main.tsx b/apps/www/registry/default/blocks/dashboard-01/components/nav-main.tsx
new file mode 100644
index 00000000000..9c32f65ba88
--- /dev/null
+++ b/apps/www/registry/default/blocks/dashboard-01/components/nav-main.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import { MailIcon, PlusCircleIcon, type LucideIcon } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupContent className="flex flex-col gap-2">
+        <SidebarMenu>
+          <SidebarMenuItem className="flex items-center gap-2">
+            <SidebarMenuButton
+              tooltip="Quick Create"
+              className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
+            >
+              <PlusCircleIcon />
+              <span>Quick Create</span>
+            </SidebarMenuButton>
+            <Button
+              size="icon"
+              className="h-9 w-9 shrink-0 group-data-[collapsible=icon]:opacity-0"
+              variant="outline"
+            >
+              <MailIcon />
+              <span className="sr-only">Inbox</span>
+            </Button>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton tooltip={item.title}>
+                {item.icon && <item.icon />}
+                <span>{item.title}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/dashboard-01/components/nav-secondary.tsx b/apps/www/registry/default/blocks/dashboard-01/components/nav-secondary.tsx
new file mode 100644
index 00000000000..a4dc62d28de
--- /dev/null
+++ b/apps/www/registry/default/blocks/dashboard-01/components/nav-secondary.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/dashboard-01/components/nav-user.tsx b/apps/www/registry/default/blocks/dashboard-01/components/nav-user.tsx
new file mode 100644
index 00000000000..8bc522afba0
--- /dev/null
+++ b/apps/www/registry/default/blocks/dashboard-01/components/nav-user.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import {
+  BellIcon,
+  CreditCardIcon,
+  LogOutIcon,
+  MoreVerticalIcon,
+  UserCircleIcon,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg grayscale">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <MoreVerticalIcon className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <UserCircleIcon />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCardIcon />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <BellIcon />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOutIcon />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/dashboard-01/components/section-cards.tsx b/apps/www/registry/default/blocks/dashboard-01/components/section-cards.tsx
new file mode 100644
index 00000000000..3281cb5e9ae
--- /dev/null
+++ b/apps/www/registry/default/blocks/dashboard-01/components/section-cards.tsx
@@ -0,0 +1,101 @@
+import { TrendingDownIcon, TrendingUpIcon } from "lucide-react"
+
+import { Badge } from "@/registry/default/ui/badge"
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+
+export function SectionCards() {
+  return (
+    <div className="*:data-[slot=card]:shadow-xs @xl/main:grid-cols-2 @5xl/main:grid-cols-4 grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card lg:px-6">
+      <Card className="@container/card">
+        <CardHeader className="relative">
+          <CardDescription>Total Revenue</CardDescription>
+          <CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
+            $1,250.00
+          </CardTitle>
+          <div className="absolute right-4 top-4">
+            <Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
+              <TrendingUpIcon className="size-3" />
+              +12.5%
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Trending up this month <TrendingUpIcon className="size-4" />
+          </div>
+          <div className="text-muted-foreground">
+            Visitors for the last 6 months
+          </div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader className="relative">
+          <CardDescription>New Customers</CardDescription>
+          <CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
+            1,234
+          </CardTitle>
+          <div className="absolute right-4 top-4">
+            <Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
+              <TrendingDownIcon className="size-3" />
+              -20%
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Down 20% this period <TrendingDownIcon className="size-4" />
+          </div>
+          <div className="text-muted-foreground">
+            Acquisition needs attention
+          </div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader className="relative">
+          <CardDescription>Active Accounts</CardDescription>
+          <CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
+            45,678
+          </CardTitle>
+          <div className="absolute right-4 top-4">
+            <Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
+              <TrendingUpIcon className="size-3" />
+              +12.5%
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Strong user retention <TrendingUpIcon className="size-4" />
+          </div>
+          <div className="text-muted-foreground">Engagement exceed targets</div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader className="relative">
+          <CardDescription>Growth Rate</CardDescription>
+          <CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
+            4.5%
+          </CardTitle>
+          <div className="absolute right-4 top-4">
+            <Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
+              <TrendingUpIcon className="size-3" />
+              +4.5%
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Steady performance <TrendingUpIcon className="size-4" />
+          </div>
+          <div className="text-muted-foreground">Meets growth projections</div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/dashboard-01/components/site-header.tsx b/apps/www/registry/default/blocks/dashboard-01/components/site-header.tsx
new file mode 100644
index 00000000000..2ed6e6abb55
--- /dev/null
+++ b/apps/www/registry/default/blocks/dashboard-01/components/site-header.tsx
@@ -0,0 +1,17 @@
+import { Separator } from "@/registry/default/ui/separator"
+import { SidebarTrigger } from "@/registry/default/ui/sidebar"
+
+export function SiteHeader() {
+  return (
+    <header className="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <SidebarTrigger className="-ml-1" />
+        <Separator
+          orientation="vertical"
+          className="mx-2 data-[orientation=vertical]:h-4"
+        />
+        <h1 className="text-base font-medium">Documents</h1>
+      </div>
+    </header>
+  )
+}
diff --git a/apps/www/registry/default/blocks/dashboard-01/data.json b/apps/www/registry/default/blocks/dashboard-01/data.json
new file mode 100644
index 00000000000..ec0873641b7
--- /dev/null
+++ b/apps/www/registry/default/blocks/dashboard-01/data.json
@@ -0,0 +1,614 @@
+[
+  {
+    "id": 1,
+    "header": "Cover page",
+    "type": "Cover page",
+    "status": "In Process",
+    "target": "18",
+    "limit": "5",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 2,
+    "header": "Table of contents",
+    "type": "Table of contents",
+    "status": "Done",
+    "target": "29",
+    "limit": "24",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 3,
+    "header": "Executive summary",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "10",
+    "limit": "13",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 4,
+    "header": "Technical approach",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "27",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 5,
+    "header": "Design",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "2",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 6,
+    "header": "Capabilities",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "20",
+    "limit": "8",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 7,
+    "header": "Integration with existing systems",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "19",
+    "limit": "21",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 8,
+    "header": "Innovation and Advantages",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "25",
+    "limit": "26",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 9,
+    "header": "Overview of EMR's Innovative Solutions",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "7",
+    "limit": "23",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 10,
+    "header": "Advanced Algorithms and Machine Learning",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "30",
+    "limit": "28",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 11,
+    "header": "Adaptive Communication Protocols",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "9",
+    "limit": "31",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 12,
+    "header": "Advantages Over Current Technologies",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "12",
+    "limit": "0",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 13,
+    "header": "Past Performance",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "33",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 14,
+    "header": "Customer Feedback and Satisfaction Levels",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "34",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 15,
+    "header": "Implementation Challenges and Solutions",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "3",
+    "limit": "35",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 16,
+    "header": "Security Measures and Data Protection Policies",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "6",
+    "limit": "36",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 17,
+    "header": "Scalability and Future Proofing",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "4",
+    "limit": "37",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 18,
+    "header": "Cost-Benefit Analysis",
+    "type": "Plain language",
+    "status": "Done",
+    "target": "14",
+    "limit": "38",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 19,
+    "header": "User Training and Onboarding Experience",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "17",
+    "limit": "39",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 20,
+    "header": "Future Development Roadmap",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "11",
+    "limit": "40",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 21,
+    "header": "System Architecture Overview",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "24",
+    "limit": "18",
+    "reviewer": "Maya Johnson"
+  },
+  {
+    "id": 22,
+    "header": "Risk Management Plan",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "22",
+    "reviewer": "Carlos Rodriguez"
+  },
+  {
+    "id": 23,
+    "header": "Compliance Documentation",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "31",
+    "limit": "27",
+    "reviewer": "Sarah Chen"
+  },
+  {
+    "id": 24,
+    "header": "API Documentation",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "8",
+    "limit": "12",
+    "reviewer": "Raj Patel"
+  },
+  {
+    "id": 25,
+    "header": "User Interface Mockups",
+    "type": "Visual",
+    "status": "In Process",
+    "target": "19",
+    "limit": "25",
+    "reviewer": "Leila Ahmadi"
+  },
+  {
+    "id": 26,
+    "header": "Database Schema",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "22",
+    "limit": "20",
+    "reviewer": "Thomas Wilson"
+  },
+  {
+    "id": 27,
+    "header": "Testing Methodology",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "17",
+    "limit": "14",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 28,
+    "header": "Deployment Strategy",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "26",
+    "limit": "30",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 29,
+    "header": "Budget Breakdown",
+    "type": "Financial",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 30,
+    "header": "Market Analysis",
+    "type": "Research",
+    "status": "Done",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Sophia Martinez"
+  },
+  {
+    "id": 31,
+    "header": "Competitor Comparison",
+    "type": "Research",
+    "status": "In Process",
+    "target": "21",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 32,
+    "header": "Maintenance Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "23",
+    "reviewer": "Alex Thompson"
+  },
+  {
+    "id": 33,
+    "header": "User Personas",
+    "type": "Research",
+    "status": "In Process",
+    "target": "27",
+    "limit": "24",
+    "reviewer": "Nina Patel"
+  },
+  {
+    "id": 34,
+    "header": "Accessibility Compliance",
+    "type": "Legal",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 35,
+    "header": "Performance Metrics",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "David Kim"
+  },
+  {
+    "id": 36,
+    "header": "Disaster Recovery Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 37,
+    "header": "Third-party Integrations",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 38,
+    "header": "User Feedback Summary",
+    "type": "Research",
+    "status": "Done",
+    "target": "20",
+    "limit": "15",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 39,
+    "header": "Localization Strategy",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "12",
+    "limit": "19",
+    "reviewer": "Maria Garcia"
+  },
+  {
+    "id": 40,
+    "header": "Mobile Compatibility",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "James Wilson"
+  },
+  {
+    "id": 41,
+    "header": "Data Migration Plan",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 42,
+    "header": "Quality Assurance Protocols",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Priya Singh"
+  },
+  {
+    "id": 43,
+    "header": "Stakeholder Analysis",
+    "type": "Research",
+    "status": "In Process",
+    "target": "11",
+    "limit": "14",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 44,
+    "header": "Environmental Impact Assessment",
+    "type": "Research",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 45,
+    "header": "Intellectual Property Rights",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "17",
+    "limit": "20",
+    "reviewer": "Sarah Johnson"
+  },
+  {
+    "id": 46,
+    "header": "Customer Support Framework",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 47,
+    "header": "Version Control Strategy",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 48,
+    "header": "Continuous Integration Pipeline",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Michael Chen"
+  },
+  {
+    "id": 49,
+    "header": "Regulatory Compliance",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 50,
+    "header": "User Authentication System",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 51,
+    "header": "Data Analytics Framework",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 52,
+    "header": "Cloud Infrastructure",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 53,
+    "header": "Network Security Measures",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Lisa Wong"
+  },
+  {
+    "id": 54,
+    "header": "Project Timeline",
+    "type": "Planning",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 55,
+    "header": "Resource Allocation",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 56,
+    "header": "Team Structure and Roles",
+    "type": "Planning",
+    "status": "Done",
+    "target": "20",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 57,
+    "header": "Communication Protocols",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 58,
+    "header": "Success Metrics",
+    "type": "Planning",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 59,
+    "header": "Internationalization Support",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 60,
+    "header": "Backup and Recovery Procedures",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 61,
+    "header": "Monitoring and Alerting System",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Daniel Park"
+  },
+  {
+    "id": 62,
+    "header": "Code Review Guidelines",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "12",
+    "limit": "15",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 63,
+    "header": "Documentation Standards",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 64,
+    "header": "Release Management Process",
+    "type": "Planning",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 65,
+    "header": "Feature Prioritization Matrix",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Emma Davis"
+  },
+  {
+    "id": 66,
+    "header": "Technical Debt Assessment",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 67,
+    "header": "Capacity Planning",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 68,
+    "header": "Service Level Agreements",
+    "type": "Legal",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Assign reviewer"
+  }
+]
diff --git a/apps/www/registry/default/blocks/dashboard-01/page.tsx b/apps/www/registry/default/blocks/dashboard-01/page.tsx
new file mode 100644
index 00000000000..083e2a7f012
--- /dev/null
+++ b/apps/www/registry/default/blocks/dashboard-01/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "@/registry/default/blocks/dashboard-01/components/app-sidebar"
+import { ChartAreaInteractive } from "@/registry/default/blocks/dashboard-01/components/chart-area-interactive"
+import { DataTable } from "@/registry/default/blocks/dashboard-01/components/data-table"
+import { SectionCards } from "@/registry/default/blocks/dashboard-01/components/section-cards"
+import { SiteHeader } from "@/registry/default/blocks/dashboard-01/components/site-header"
+import { SidebarInset, SidebarProvider } from "@/registry/default/ui/sidebar"
+
+import data from "./data.json"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+              <SectionCards />
+              <div className="px-4 lg:px-6">
+                <ChartAreaInteractive />
+              </div>
+              <DataTable data={data} />
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/login-01/components/login-form.tsx b/apps/www/registry/default/blocks/login-01/components/login-form.tsx
new file mode 100644
index 00000000000..d5a73214d54
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-01/components/login-form.tsx
@@ -0,0 +1,68 @@
+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>
+          <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>
+            <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>
+  )
+}
diff --git a/apps/www/registry/default/blocks/login-01/page.tsx b/apps/www/registry/default/blocks/login-01/page.tsx
new file mode 100644
index 00000000000..6e1c2cb4db1
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-01/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/default/blocks/login-01/components/login-form"
+
+export default function Page() {
+  return (
+    <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>
+  )
+}
diff --git a/apps/www/registry/default/blocks/login-02/components/login-form.tsx b/apps/www/registry/default/blocks/login-02/components/login-form.tsx
new file mode 100644
index 00000000000..d0c7f1923af
--- /dev/null
+++ b/apps/www/registry/default/blocks/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>
+  )
+}
diff --git a/apps/www/registry/default/blocks/login-02/page.tsx b/apps/www/registry/default/blocks/login-02/page.tsx
new file mode 100644
index 00000000000..56b73d32467
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-02/page.tsx
@@ -0,0 +1,32 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/default/blocks/login-02/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/registry/default/blocks/login-03/components/login-form.tsx b/apps/www/registry/default/blocks/login-03/components/login-form.tsx
new file mode 100644
index 00000000000..5198cf63782
--- /dev/null
+++ b/apps/www/registry/default/blocks/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>
+  )
+}
diff --git a/apps/www/registry/default/blocks/login-03/page.tsx b/apps/www/registry/default/blocks/login-03/page.tsx
new file mode 100644
index 00000000000..15a0ca451c8
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-03/page.tsx
@@ -0,0 +1,19 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/default/blocks/login-03/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/registry/default/blocks/login-04/components/login-form.tsx b/apps/www/registry/default/blocks/login-04/components/login-form.tsx
new file mode 100644
index 00000000000..fa72a5d4b74
--- /dev/null
+++ b/apps/www/registry/default/blocks/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>
+  )
+}
diff --git a/apps/www/registry/default/blocks/login-04/page.tsx b/apps/www/registry/default/blocks/login-04/page.tsx
new file mode 100644
index 00000000000..d302b4fa447
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-04/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/default/blocks/login-04/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/registry/default/blocks/login-05/components/login-form.tsx b/apps/www/registry/default/blocks/login-05/components/login-form.tsx
new file mode 100644
index 00000000000..43a11bd495e
--- /dev/null
+++ b/apps/www/registry/default/blocks/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>
+  )
+}
diff --git a/apps/www/registry/default/blocks/login-05/page.tsx b/apps/www/registry/default/blocks/login-05/page.tsx
new file mode 100644
index 00000000000..b9baa00d537
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-05/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/default/blocks/login-05/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-01/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-01/components/app-sidebar.tsx
new file mode 100644
index 00000000000..82613952bc0
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-01/components/app-sidebar.tsx
@@ -0,0 +1,182 @@
+import * as React from "react"
+
+import { SearchForm } from "@/registry/default/blocks/sidebar-01/components/search-form"
+import { VersionSwitcher } from "@/registry/default/blocks/sidebar-01/components/version-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <VersionSwitcher
+          versions={data.versions}
+          defaultVersion={data.versions[0]}
+        />
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent>
+        {/* We create a SidebarGroup for each parent. */}
+        {data.navMain.map((item) => (
+          <SidebarGroup key={item.title}>
+            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {item.items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild isActive={item.isActive}>
+                      <a href={item.url}>{item.title}</a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-01/components/search-form.tsx b/apps/www/registry/default/blocks/sidebar-01/components/search-form.tsx
new file mode 100644
index 00000000000..0126dc6e7e9
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-01/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/default/ui/label"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from "@/registry/default/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <SidebarInput
+            id="search"
+            placeholder="Search the docs..."
+            className="pl-8"
+          />
+          <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-01/components/version-switcher.tsx b/apps/www/registry/default/blocks/sidebar-01/components/version-switcher.tsx
new file mode 100644
index 00000000000..b448357a8b3
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-01/components/version-switcher.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function VersionSwitcher({
+  versions,
+  defaultVersion,
+}: {
+  versions: string[]
+  defaultVersion: string
+}) {
+  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd className="size-4" />
+              </div>
+              <div className="flex flex-col gap-0.5 leading-none">
+                <span className="font-semibold">Documentation</span>
+                <span className="">v{selectedVersion}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width]"
+            align="start"
+          >
+            {versions.map((version) => (
+              <DropdownMenuItem
+                key={version}
+                onSelect={() => setSelectedVersion(version)}
+              >
+                v{version}{" "}
+                {version === selectedVersion && <Check className="ml-auto" />}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-01/page.tsx b/apps/www/registry/default/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000000..090e3eb248d
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-01/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-01/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-02/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-02/components/app-sidebar.tsx
new file mode 100644
index 00000000000..1ad5860bb49
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-02/components/app-sidebar.tsx
@@ -0,0 +1,215 @@
+import * as React from "react"
+import { ChevronRight } from "lucide-react"
+
+import { SearchForm } from "@/registry/default/blocks/sidebar-02/components/search-form"
+import { VersionSwitcher } from "@/registry/default/blocks/sidebar-02/components/version-switcher"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <VersionSwitcher
+          versions={data.versions}
+          defaultVersion={data.versions[0]}
+        />
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="gap-0">
+        {/* We create a collapsible SidebarGroup for each parent. */}
+        {data.navMain.map((item) => (
+          <Collapsible
+            key={item.title}
+            title={item.title}
+            defaultOpen
+            className="group/collapsible"
+          >
+            <SidebarGroup>
+              <SidebarGroupLabel
+                asChild
+                className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {item.title}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {item.items.map((item) => (
+                      <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton asChild isActive={item.isActive}>
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        ))}
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-02/components/search-form.tsx b/apps/www/registry/default/blocks/sidebar-02/components/search-form.tsx
new file mode 100644
index 00000000000..0126dc6e7e9
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-02/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/default/ui/label"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from "@/registry/default/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <SidebarInput
+            id="search"
+            placeholder="Search the docs..."
+            className="pl-8"
+          />
+          <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-02/components/version-switcher.tsx b/apps/www/registry/default/blocks/sidebar-02/components/version-switcher.tsx
new file mode 100644
index 00000000000..b448357a8b3
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-02/components/version-switcher.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function VersionSwitcher({
+  versions,
+  defaultVersion,
+}: {
+  versions: string[]
+  defaultVersion: string
+}) {
+  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd className="size-4" />
+              </div>
+              <div className="flex flex-col gap-0.5 leading-none">
+                <span className="font-semibold">Documentation</span>
+                <span className="">v{selectedVersion}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width]"
+            align="start"
+          >
+            {versions.map((version) => (
+              <DropdownMenuItem
+                key={version}
+                onSelect={() => setSelectedVersion(version)}
+              >
+                v{version}{" "}
+                {version === selectedVersion && <Check className="ml-auto" />}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-02/page.tsx b/apps/www/registry/default/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000000..179af7cf288
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-02/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-02/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-03/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-03/components/app-sidebar.tsx
new file mode 100644
index 00000000000..473cb03f4e2
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-03/components/app-sidebar.tsx
@@ -0,0 +1,208 @@
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu>
+            {data.navMain.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild>
+                  <a href={item.url} className="font-medium">
+                    {item.title}
+                  </a>
+                </SidebarMenuButton>
+                {item.items?.length ? (
+                  <SidebarMenuSub>
+                    {item.items.map((item) => (
+                      <SidebarMenuSubItem key={item.title}>
+                        <SidebarMenuSubButton asChild isActive={item.isActive}>
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                ) : null}
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-03/page.tsx b/apps/www/registry/default/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000000..a3b34b10804
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-03/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-03/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+          <div className="flex items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-04/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-04/components/app-sidebar.tsx
new file mode 100644
index 00000000000..12be284e58c
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-04/components/app-sidebar.tsx
@@ -0,0 +1,206 @@
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar variant="floating" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu className="gap-2">
+            {data.navMain.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild>
+                  <a href={item.url} className="font-medium">
+                    {item.title}
+                  </a>
+                </SidebarMenuButton>
+                {item.items?.length ? (
+                  <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
+                    {item.items.map((item) => (
+                      <SidebarMenuSubItem key={item.title}>
+                        <SidebarMenuSubButton asChild isActive={item.isActive}>
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                ) : null}
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-04/page.tsx b/apps/www/registry/default/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000000..8a0dbbff759
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-04/page.tsx
@@ -0,0 +1,56 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-04/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "19rem",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-05/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-05/components/app-sidebar.tsx
new file mode 100644
index 00000000000..bb9b8a853f2
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-05/components/app-sidebar.tsx
@@ -0,0 +1,228 @@
+import * as React from "react"
+import { GalleryVerticalEnd, Minus, Plus } from "lucide-react"
+
+import { SearchForm } from "@/registry/default/blocks/sidebar-05/components/search-form"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu>
+            {data.navMain.map((item, index) => (
+              <Collapsible
+                key={item.title}
+                defaultOpen={index === 1}
+                className="group/collapsible"
+              >
+                <SidebarMenuItem>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuButton>
+                      {item.title}{" "}
+                      <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                      <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  {item.items?.length ? (
+                    <CollapsibleContent>
+                      <SidebarMenuSub>
+                        {item.items.map((item) => (
+                          <SidebarMenuSubItem key={item.title}>
+                            <SidebarMenuSubButton
+                              asChild
+                              isActive={item.isActive}
+                            >
+                              <a href={item.url}>{item.title}</a>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        ))}
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  ) : null}
+                </SidebarMenuItem>
+              </Collapsible>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-05/components/search-form.tsx b/apps/www/registry/default/blocks/sidebar-05/components/search-form.tsx
new file mode 100644
index 00000000000..0126dc6e7e9
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-05/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/default/ui/label"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from "@/registry/default/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <SidebarInput
+            id="search"
+            placeholder="Search the docs..."
+            className="pl-8"
+          />
+          <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-05/page.tsx b/apps/www/registry/default/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000000..3bfc7a8b3f1
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-05/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-05/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-06/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-06/components/app-sidebar.tsx
new file mode 100644
index 00000000000..b6e607ecb7e
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-06/components/app-sidebar.tsx
@@ -0,0 +1,179 @@
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { NavMain } from "@/registry/default/blocks/sidebar-06/components/nav-main"
+import { SidebarOptInForm } from "@/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+      </SidebarContent>
+      <SidebarFooter>
+        <div className="p-1">
+          <SidebarOptInForm />
+        </div>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-06/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-06/components/nav-main.tsx
new file mode 100644
index 00000000000..42fc952f33c
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-06/components/nav-main.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { MoreHorizontal, type LucideIcon } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup>
+      <SidebarMenu>
+        {items.map((item) => (
+          <DropdownMenu key={item.title}>
+            <SidebarMenuItem>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  {item.title} <MoreHorizontal className="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              {item.items?.length ? (
+                <DropdownMenuContent
+                  side={isMobile ? "bottom" : "right"}
+                  align={isMobile ? "end" : "start"}
+                  className="min-w-56 rounded-lg"
+                >
+                  {item.items.map((item) => (
+                    <DropdownMenuItem asChild key={item.title}>
+                      <a href={item.url}>{item.title}</a>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              ) : null}
+            </SidebarMenuItem>
+          </DropdownMenu>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/www/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
new file mode 100644
index 00000000000..a9111f3a15d
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { SidebarInput } from "@/registry/default/ui/sidebar"
+
+export function SidebarOptInForm() {
+  return (
+    <Card className="shadow-none">
+      <form>
+        <CardHeader className="p-4 pb-0">
+          <CardTitle className="text-sm">Subscribe to our newsletter</CardTitle>
+          <CardDescription>
+            Opt-in to receive updates and news about the sidebar.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-2.5 p-4">
+          <SidebarInput type="email" placeholder="Email" />
+          <Button
+            className="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none"
+            size="sm"
+          >
+            Subscribe
+          </Button>
+        </CardContent>
+      </form>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-06/page.tsx b/apps/www/registry/default/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000000..028a7ba6209
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-06/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-06/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-07/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-07/components/app-sidebar.tsx
new file mode 100644
index 00000000000..0d18496fb2e
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-07/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  GalleryVerticalEnd,
+  Map,
+  PieChart,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { NavMain } from "@/registry/default/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "@/registry/default/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "@/registry/default/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "@/registry/default/blocks/sidebar-07/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: GalleryVerticalEnd,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-07/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-07/components/nav-main.tsx
new file mode 100644
index 00000000000..0856dbceb07
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-07/components/nav-main.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible
+            key={item.title}
+            asChild
+            defaultOpen={item.isActive}
+            className="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton tooltip={item.title}>
+                  {item.icon && <item.icon />}
+                  <span>{item.title}</span>
+                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  {item.items?.map((subItem) => (
+                    <SidebarMenuSubItem key={subItem.title}>
+                      <SidebarMenuSubButton asChild>
+                        <a href={subItem.url}>
+                          <span>{subItem.title}</span>
+                        </a>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-07/components/nav-projects.tsx b/apps/www/registry/default/blocks/sidebar-07/components/nav-projects.tsx
new file mode 100644
index 00000000000..859912e1237
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-07/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  Forward,
+  MoreHorizontal,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Forward className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal className="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-07/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-07/components/nav-user.tsx
new file mode 100644
index 00000000000..e22c32af62e
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-07/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-07/components/team-switcher.tsx b/apps/www/registry/default/blocks/sidebar-07/components/team-switcher.tsx
new file mode 100644
index 00000000000..febc08a7730
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-07/components/team-switcher.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">
+                  {activeTeam.name}
+                </span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-07/page.tsx b/apps/www/registry/default/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000000..1627996458d
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-07/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-07/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-08/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-08/components/app-sidebar.tsx
new file mode 100644
index 00000000000..72f594843b6
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-08/components/app-sidebar.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import {
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  LifeBuoy,
+  Map,
+  PieChart,
+  Send,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { NavMain } from "@/registry/default/blocks/sidebar-08/components/nav-main"
+import { NavProjects } from "@/registry/default/blocks/sidebar-08/components/nav-projects"
+import { NavSecondary } from "@/registry/default/blocks/sidebar-08/components/nav-secondary"
+import { NavUser } from "@/registry/default/blocks/sidebar-08/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar variant="inset" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <Command className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">Acme Inc</span>
+                  <span className="truncate text-xs">Enterprise</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-08/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-08/components/nav-main.tsx
new file mode 100644
index 00000000000..10b836a2e3d
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-08/components/nav-main.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild tooltip={item.title}>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.items?.length ? (
+                <>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuAction className="data-[state=open]:rotate-90">
+                      <ChevronRight />
+                      <span className="sr-only">Toggle</span>
+                    </SidebarMenuAction>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.items?.map((subItem) => (
+                        <SidebarMenuSubItem key={subItem.title}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </>
+              ) : null}
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-08/components/nav-projects.tsx b/apps/www/registry/default/blocks/sidebar-08/components/nav-projects.tsx
new file mode 100644
index 00000000000..85caea25e0b
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-08/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  MoreHorizontal,
+  Share,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Share className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-08/components/nav-secondary.tsx b/apps/www/registry/default/blocks/sidebar-08/components/nav-secondary.tsx
new file mode 100644
index 00000000000..f15ddb7bb94
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-08/components/nav-secondary.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild size="sm">
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-08/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-08/components/nav-user.tsx
new file mode 100644
index 00000000000..e22c32af62e
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-08/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-08/page.tsx b/apps/www/registry/default/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000000..052b62b38cf
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-08/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-08/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-09/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-09/components/app-sidebar.tsx
new file mode 100644
index 00000000000..7a3ccfdd86e
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-09/components/app-sidebar.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { ArchiveX, Command, File, Inbox, Send, Trash2 } from "lucide-react"
+
+import { NavUser } from "@/registry/default/blocks/sidebar-09/components/nav-user"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+import { Switch } from "@/registry/default/ui/switch"
+
+// This is sample data
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      isActive: true,
+    },
+    {
+      title: "Drafts",
+      url: "#",
+      icon: File,
+      isActive: false,
+    },
+    {
+      title: "Sent",
+      url: "#",
+      icon: Send,
+      isActive: false,
+    },
+    {
+      title: "Junk",
+      url: "#",
+      icon: ArchiveX,
+      isActive: false,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+      isActive: false,
+    },
+  ],
+  mails: [
+    {
+      name: "William Smith",
+      email: "williamsmith@example.com",
+      subject: "Meeting Tomorrow",
+      date: "09:34 AM",
+      teaser:
+        "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.",
+    },
+    {
+      name: "Alice Smith",
+      email: "alicesmith@example.com",
+      subject: "Re: Project Update",
+      date: "Yesterday",
+      teaser:
+        "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.",
+    },
+    {
+      name: "Bob Johnson",
+      email: "bobjohnson@example.com",
+      subject: "Weekend Plans",
+      date: "2 days ago",
+      teaser:
+        "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?",
+    },
+    {
+      name: "Emily Davis",
+      email: "emilydavis@example.com",
+      subject: "Re: Question about Budget",
+      date: "2 days ago",
+      teaser:
+        "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?",
+    },
+    {
+      name: "Michael Wilson",
+      email: "michaelwilson@example.com",
+      subject: "Important Announcement",
+      date: "1 week ago",
+      teaser:
+        "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.",
+    },
+    {
+      name: "Sarah Brown",
+      email: "sarahbrown@example.com",
+      subject: "Re: Feedback on Proposal",
+      date: "1 week ago",
+      teaser:
+        "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?",
+    },
+    {
+      name: "David Lee",
+      email: "davidlee@example.com",
+      subject: "New Project Idea",
+      date: "1 week ago",
+      teaser:
+        "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?",
+    },
+    {
+      name: "Olivia Wilson",
+      email: "oliviawilson@example.com",
+      subject: "Vacation Plans",
+      date: "1 week ago",
+      teaser:
+        "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.",
+    },
+    {
+      name: "James Martin",
+      email: "jamesmartin@example.com",
+      subject: "Re: Conference Registration",
+      date: "1 week ago",
+      teaser:
+        "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.",
+    },
+    {
+      name: "Sophia White",
+      email: "sophiawhite@example.com",
+      subject: "Team Dinner",
+      date: "1 week ago",
+      teaser:
+        "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.",
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  // Note: I'm using state to show active item.
+  // IRL you should use the url/router.
+  const [activeItem, setActiveItem] = React.useState(data.navMain[0])
+  const [mails, setMails] = React.useState(data.mails)
+  const { setOpen } = useSidebar()
+
+  return (
+    <Sidebar
+      collapsible="icon"
+      className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
+      {...props}
+    >
+      {/* This is the first sidebar */}
+      {/* We disable collapsible and adjust width to icon. */}
+      {/* This will make the sidebar appear as icons. */}
+      <Sidebar
+        collapsible="none"
+        className="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
+      >
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <Command className="size-4" />
+                  </div>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">Acme Inc</span>
+                    <span className="truncate text-xs">Enterprise</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent className="px-1.5 md:px-0">
+              <SidebarMenu>
+                {data.navMain.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton
+                      tooltip={{
+                        children: item.title,
+                        hidden: false,
+                      }}
+                      onClick={() => {
+                        setActiveItem(item)
+                        const mail = data.mails.sort(() => Math.random() - 0.5)
+                        setMails(
+                          mail.slice(
+                            0,
+                            Math.max(5, Math.floor(Math.random() * 10) + 1)
+                          )
+                        )
+                        setOpen(true)
+                      }}
+                      isActive={activeItem?.title === item.title}
+                      className="px-2.5 md:px-2"
+                    >
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <NavUser user={data.user} />
+        </SidebarFooter>
+      </Sidebar>
+
+      {/* This is the second sidebar */}
+      {/* We disable collapsible and let it fill remaining space */}
+      <Sidebar collapsible="none" className="hidden flex-1 md:flex">
+        <SidebarHeader className="gap-3.5 border-b p-4">
+          <div className="flex w-full items-center justify-between">
+            <div className="text-base font-medium text-foreground">
+              {activeItem?.title}
+            </div>
+            <Label className="flex items-center gap-2 text-sm">
+              <span>Unreads</span>
+              <Switch className="shadow-none" />
+            </Label>
+          </div>
+          <SidebarInput placeholder="Type to search..." />
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup className="px-0">
+            <SidebarGroupContent>
+              {mails.map((mail) => (
+                <a
+                  href="#"
+                  key={mail.email}
+                  className="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                >
+                  <div className="flex w-full items-center gap-2">
+                    <span>{mail.name}</span>{" "}
+                    <span className="ml-auto text-xs">{mail.date}</span>
+                  </div>
+                  <span className="font-medium">{mail.subject}</span>
+                  <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
+                    {mail.teaser}
+                  </span>
+                </a>
+              ))}
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-09/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-09/components/nav-user.tsx
new file mode 100644
index 00000000000..03cae1fb290
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-09/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-09/page.tsx b/apps/www/registry/default/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000000..6ed155ad79d
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-09/page.tsx
@@ -0,0 +1,54 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-09/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "350px",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Inbox</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-10/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-10/components/app-sidebar.tsx
new file mode 100644
index 00000000000..180c8148abf
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-10/components/app-sidebar.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  Blocks,
+  Calendar,
+  Command,
+  Home,
+  Inbox,
+  MessageCircleQuestion,
+  Search,
+  Settings2,
+  Sparkles,
+  Trash2,
+} from "lucide-react"
+
+import { NavFavorites } from "@/registry/default/blocks/sidebar-10/components/nav-favorites"
+import { NavMain } from "@/registry/default/blocks/sidebar-10/components/nav-main"
+import { NavSecondary } from "@/registry/default/blocks/sidebar-10/components/nav-secondary"
+import { NavWorkspaces } from "@/registry/default/blocks/sidebar-10/components/nav-workspaces"
+import { TeamSwitcher } from "@/registry/default/blocks/sidebar-10/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: Command,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Search",
+      url: "#",
+      icon: Search,
+    },
+    {
+      title: "Ask AI",
+      url: "#",
+      icon: Sparkles,
+    },
+    {
+      title: "Home",
+      url: "#",
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      badge: "10",
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Calendar",
+      url: "#",
+      icon: Calendar,
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+    },
+    {
+      title: "Templates",
+      url: "#",
+      icon: Blocks,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+    },
+    {
+      title: "Help",
+      url: "#",
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: "Project Management & Task Tracking",
+      url: "#",
+      emoji: "📊",
+    },
+    {
+      name: "Family Recipe Collection & Meal Planning",
+      url: "#",
+      emoji: "🍳",
+    },
+    {
+      name: "Fitness Tracker & Workout Routines",
+      url: "#",
+      emoji: "💪",
+    },
+    {
+      name: "Book Notes & Reading List",
+      url: "#",
+      emoji: "📚",
+    },
+    {
+      name: "Sustainable Gardening Tips & Plant Care",
+      url: "#",
+      emoji: "🌱",
+    },
+    {
+      name: "Language Learning Progress & Resources",
+      url: "#",
+      emoji: "🗣️",
+    },
+    {
+      name: "Home Renovation Ideas & Budget Tracker",
+      url: "#",
+      emoji: "🏠",
+    },
+    {
+      name: "Personal Finance & Investment Portfolio",
+      url: "#",
+      emoji: "💰",
+    },
+    {
+      name: "Movie & TV Show Watchlist with Reviews",
+      url: "#",
+      emoji: "🎬",
+    },
+    {
+      name: "Daily Habit Tracker & Goal Setting",
+      url: "#",
+      emoji: "✅",
+    },
+  ],
+  workspaces: [
+    {
+      name: "Personal Life Management",
+      emoji: "🏠",
+      pages: [
+        {
+          name: "Daily Journal & Reflection",
+          url: "#",
+          emoji: "📔",
+        },
+        {
+          name: "Health & Wellness Tracker",
+          url: "#",
+          emoji: "🍏",
+        },
+        {
+          name: "Personal Growth & Learning Goals",
+          url: "#",
+          emoji: "🌟",
+        },
+      ],
+    },
+    {
+      name: "Professional Development",
+      emoji: "💼",
+      pages: [
+        {
+          name: "Career Objectives & Milestones",
+          url: "#",
+          emoji: "🎯",
+        },
+        {
+          name: "Skill Acquisition & Training Log",
+          url: "#",
+          emoji: "🧠",
+        },
+        {
+          name: "Networking Contacts & Events",
+          url: "#",
+          emoji: "🤝",
+        },
+      ],
+    },
+    {
+      name: "Creative Projects",
+      emoji: "🎨",
+      pages: [
+        {
+          name: "Writing Ideas & Story Outlines",
+          url: "#",
+          emoji: "✍️",
+        },
+        {
+          name: "Art & Design Portfolio",
+          url: "#",
+          emoji: "🖼️",
+        },
+        {
+          name: "Music Composition & Practice Log",
+          url: "#",
+          emoji: "🎵",
+        },
+      ],
+    },
+    {
+      name: "Home Management",
+      emoji: "🏡",
+      pages: [
+        {
+          name: "Household Budget & Expense Tracking",
+          url: "#",
+          emoji: "💰",
+        },
+        {
+          name: "Home Maintenance Schedule & Tasks",
+          url: "#",
+          emoji: "🔧",
+        },
+        {
+          name: "Family Calendar & Event Planning",
+          url: "#",
+          emoji: "📅",
+        },
+      ],
+    },
+    {
+      name: "Travel & Adventure",
+      emoji: "🧳",
+      pages: [
+        {
+          name: "Trip Planning & Itineraries",
+          url: "#",
+          emoji: "🗺️",
+        },
+        {
+          name: "Travel Bucket List & Inspiration",
+          url: "#",
+          emoji: "🌎",
+        },
+        {
+          name: "Travel Journal & Photo Gallery",
+          url: "#",
+          emoji: "📸",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar className="border-r-0" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+        <NavMain items={data.navMain} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavFavorites favorites={data.favorites} />
+        <NavWorkspaces workspaces={data.workspaces} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-10/components/nav-actions.tsx b/apps/www/registry/default/blocks/sidebar-10/components/nav-actions.tsx
new file mode 100644
index 00000000000..41613beb8aa
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-10/components/nav-actions.tsx
@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArrowDown,
+  ArrowUp,
+  Bell,
+  Copy,
+  CornerUpLeft,
+  CornerUpRight,
+  FileText,
+  GalleryVerticalEnd,
+  LineChart,
+  Link,
+  MoreHorizontal,
+  Settings2,
+  Star,
+  Trash,
+  Trash2,
+} from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+const data = [
+  [
+    {
+      label: "Customize Page",
+      icon: Settings2,
+    },
+    {
+      label: "Turn into wiki",
+      icon: FileText,
+    },
+  ],
+  [
+    {
+      label: "Copy Link",
+      icon: Link,
+    },
+    {
+      label: "Duplicate",
+      icon: Copy,
+    },
+    {
+      label: "Move to",
+      icon: CornerUpRight,
+    },
+    {
+      label: "Move to Trash",
+      icon: Trash2,
+    },
+  ],
+  [
+    {
+      label: "Undo",
+      icon: CornerUpLeft,
+    },
+    {
+      label: "View analytics",
+      icon: LineChart,
+    },
+    {
+      label: "Version History",
+      icon: GalleryVerticalEnd,
+    },
+    {
+      label: "Show delete pages",
+      icon: Trash,
+    },
+    {
+      label: "Notifications",
+      icon: Bell,
+    },
+  ],
+  [
+    {
+      label: "Import",
+      icon: ArrowUp,
+    },
+    {
+      label: "Export",
+      icon: ArrowDown,
+    },
+  ],
+]
+
+export function NavActions() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsOpen(true)
+  }, [])
+
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      <div className="hidden font-medium text-muted-foreground md:inline-block">
+        Edit Oct 08
+      </div>
+      <Button variant="ghost" size="icon" className="h-7 w-7">
+        <Star />
+      </Button>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 data-[state=open]:bg-accent"
+          >
+            <MoreHorizontal />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-56 overflow-hidden rounded-lg p-0"
+          align="end"
+        >
+          <Sidebar collapsible="none" className="bg-transparent">
+            <SidebarContent>
+              {data.map((group, index) => (
+                <SidebarGroup key={index} className="border-b last:border-none">
+                  <SidebarGroupContent className="gap-0">
+                    <SidebarMenu>
+                      {group.map((item, index) => (
+                        <SidebarMenuItem key={index}>
+                          <SidebarMenuButton>
+                            <item.icon /> <span>{item.label}</span>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              ))}
+            </SidebarContent>
+          </Sidebar>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-10/components/nav-favorites.tsx b/apps/www/registry/default/blocks/sidebar-10/components/nav-favorites.tsx
new file mode 100644
index 00000000000..6cdd8545398
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-10/components/nav-favorites.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import {
+  ArrowUpRight,
+  Link,
+  MoreHorizontal,
+  StarOff,
+  Trash2,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavFavorites({
+  favorites,
+}: {
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+      <SidebarMenu>
+        {favorites.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url} title={item.name}>
+                <span>{item.emoji}</span>
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-56 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <StarOff className="text-muted-foreground" />
+                  <span>Remove from Favorites</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link className="text-muted-foreground" />
+                  <span>Copy Link</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArrowUpRight className="text-muted-foreground" />
+                  <span>Open in New Tab</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-10/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-10/components/nav-main.tsx
new file mode 100644
index 00000000000..062803adb9b
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-10/components/nav-main.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton asChild isActive={item.isActive}>
+            <a href={item.url}>
+              <item.icon />
+              <span>{item.title}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-10/components/nav-secondary.tsx b/apps/www/registry/default/blocks/sidebar-10/components/nav-secondary.tsx
new file mode 100644
index 00000000000..e215151694d
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-10/components/nav-secondary.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: React.ReactNode
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-10/components/nav-workspaces.tsx b/apps/www/registry/default/blocks/sidebar-10/components/nav-workspaces.tsx
new file mode 100644
index 00000000000..74883dadeb6
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-10/components/nav-workspaces.tsx
@@ -0,0 +1,85 @@
+import { ChevronRight, MoreHorizontal, Plus } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavWorkspaces({
+  workspaces,
+}: {
+  workspaces: {
+    name: string
+    emoji: React.ReactNode
+    pages: {
+      name: string
+      emoji: React.ReactNode
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {workspaces.map((workspace) => (
+            <Collapsible key={workspace.name}>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <span>{workspace.emoji}</span>
+                    <span>{workspace.name}</span>
+                  </a>
+                </SidebarMenuButton>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuAction
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                    showOnHover
+                  >
+                    <ChevronRight />
+                  </SidebarMenuAction>
+                </CollapsibleTrigger>
+                <SidebarMenuAction showOnHover>
+                  <Plus />
+                </SidebarMenuAction>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {workspace.pages.map((page) => (
+                      <SidebarMenuSubItem key={page.name}>
+                        <SidebarMenuSubButton asChild>
+                          <a href="#">
+                            <span>{page.emoji}</span>
+                            <span>{page.name}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ))}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="text-sidebar-foreground/70">
+              <MoreHorizontal />
+              <span>More</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-10/components/team-switcher.tsx b/apps/www/registry/default/blocks/sidebar-10/components/team-switcher.tsx
new file mode 100644
index 00000000000..7401b625ba6
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-10/components/team-switcher.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className="w-fit px-1.5">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-3" />
+              </div>
+              <span className="truncate font-semibold">{activeTeam.name}</span>
+              <ChevronDown className="opacity-50" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-64 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-10/page.tsx b/apps/www/registry/default/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000000..a3570860058
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-10/page.tsx
@@ -0,0 +1,46 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-10/components/app-sidebar"
+import { NavActions } from "@/registry/default/blocks/sidebar-10/components/nav-actions"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-14 shrink-0 items-center gap-2">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+          <div className="ml-auto px-3">
+            <NavActions />
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-11/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-11/components/app-sidebar.tsx
new file mode 100644
index 00000000000..1e5d95bdc37
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-11/components/app-sidebar.tsx
@@ -0,0 +1,141 @@
+import * as React from "react"
+import { ChevronRight, File, Folder } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarRail,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  changes: [
+    {
+      file: "README.md",
+      state: "M",
+    },
+    {
+      file: "api/hello/route.ts",
+      state: "U",
+    },
+    {
+      file: "app/layout.tsx",
+      state: "M",
+    },
+  ],
+  tree: [
+    [
+      "app",
+      [
+        "api",
+        ["hello", ["route.ts"]],
+        "page.tsx",
+        "layout.tsx",
+        ["blog", ["page.tsx"]],
+      ],
+    ],
+    [
+      "components",
+      ["ui", "button.tsx", "card.tsx"],
+      "header.tsx",
+      "footer.tsx",
+    ],
+    ["lib", ["util.ts"]],
+    ["public", "favicon.ico", "vercel.svg"],
+    ".eslintrc.json",
+    ".gitignore",
+    "next.config.js",
+    "tailwind.config.js",
+    "package.json",
+    "README.md",
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Changes</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.changes.map((item, index) => (
+                <SidebarMenuItem key={index}>
+                  <SidebarMenuButton>
+                    <File />
+                    {item.file}
+                  </SidebarMenuButton>
+                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Files</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.tree.map((item, index) => (
+                <Tree key={index} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function Tree({ item }: { item: string | any[] }) {
+  const [name, ...items] = Array.isArray(item) ? item : [item]
+
+  if (!items.length) {
+    return (
+      <SidebarMenuButton
+        isActive={name === "button.tsx"}
+        className="data-[active=true]:bg-transparent"
+      >
+        <File />
+        {name}
+      </SidebarMenuButton>
+    )
+  }
+
+  return (
+    <SidebarMenuItem>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen={name === "components" || name === "ui"}
+      >
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton>
+            <ChevronRight className="transition-transform" />
+            <Folder />
+            {name}
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {items.map((subItem, index) => (
+              <Tree key={index} item={subItem} />
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarMenuItem>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-11/page.tsx b/apps/www/registry/default/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000000..3e60984c5eb
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-11/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-11/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">components</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">ui</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>button.tsx</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-12/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-12/components/app-sidebar.tsx
new file mode 100644
index 00000000000..82ea18d88e5
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-12/components/app-sidebar.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+
+import { Calendars } from "@/registry/default/blocks/sidebar-12/components/calendars"
+import { DatePicker } from "@/registry/default/blocks/sidebar-12/components/date-picker"
+import { NavUser } from "@/registry/default/blocks/sidebar-12/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  calendars: [
+    {
+      name: "My Calendars",
+      items: ["Personal", "Work", "Family"],
+    },
+    {
+      name: "Favorites",
+      items: ["Holidays", "Birthdays"],
+    },
+    {
+      name: "Other",
+      items: ["Travel", "Reminders", "Deadlines"],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
+        <NavUser user={data.user} />
+      </SidebarHeader>
+      <SidebarContent>
+        <DatePicker />
+        <SidebarSeparator className="mx-0" />
+        <Calendars calendars={data.calendars} />
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              <Plus />
+              <span>New Calendar</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-12/components/calendars.tsx b/apps/www/registry/default/blocks/sidebar-12/components/calendars.tsx
new file mode 100644
index 00000000000..96b36ad4462
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-12/components/calendars.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Check, ChevronRight } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from "@/registry/default/ui/sidebar"
+
+export function Calendars({
+  calendars,
+}: {
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}) {
+  return (
+    <>
+      {calendars.map((calendar, index) => (
+        <React.Fragment key={calendar.name}>
+          <SidebarGroup key={calendar.name} className="py-0">
+            <Collapsible
+              defaultOpen={index === 0}
+              className="group/collapsible"
+            >
+              <SidebarGroupLabel
+                asChild
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {calendar.name}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {calendar.items.map((item, index) => (
+                      <SidebarMenuItem key={item}>
+                        <SidebarMenuButton>
+                          <div
+                            data-active={index < 2}
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                          >
+                            <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                          </div>
+                          {item}
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </SidebarGroup>
+          <SidebarSeparator className="mx-0" />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-12/components/date-picker.tsx b/apps/www/registry/default/blocks/sidebar-12/components/date-picker.tsx
new file mode 100644
index 00000000000..5e2b6c7f056
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-12/components/date-picker.tsx
@@ -0,0 +1,15 @@
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from "@/registry/default/ui/sidebar"
+
+export function DatePicker() {
+  return (
+    <SidebarGroup className="px-0">
+      <SidebarGroupContent>
+        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-12/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-12/components/nav-user.tsx
new file mode 100644
index 00000000000..a0b0dcf2dbd
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-12/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-12/page.tsx b/apps/www/registry/default/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000000..ac96a460267
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-12/page.tsx
@@ -0,0 +1,41 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-12/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbPage>October 2024</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+            {Array.from({ length: 20 }).map((_, i) => (
+              <div key={i} className="aspect-square rounded-xl bg-muted/50" />
+            ))}
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-13/components/settings-dialog.tsx b/apps/www/registry/default/blocks/sidebar-13/components/settings-dialog.tsx
new file mode 100644
index 00000000000..e652ec962ce
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-13/components/settings-dialog.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import {
+  Bell,
+  Check,
+  Globe,
+  Home,
+  Keyboard,
+  Link,
+  Lock,
+  Menu,
+  MessageCircle,
+  Paintbrush,
+  Settings,
+  Video,
+} from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/default/ui/dialog"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+const data = {
+  nav: [
+    { name: "Notifications", icon: Bell },
+    { name: "Navigation", icon: Menu },
+    { name: "Home", icon: Home },
+    { name: "Appearance", icon: Paintbrush },
+    { name: "Messages & media", icon: MessageCircle },
+    { name: "Language & region", icon: Globe },
+    { name: "Accessibility", icon: Keyboard },
+    { name: "Mark as read", icon: Check },
+    { name: "Audio & video", icon: Video },
+    { name: "Connected accounts", icon: Link },
+    { name: "Privacy & visibility", icon: Lock },
+    { name: "Advanced", icon: Settings },
+  ],
+}
+
+export function SettingsDialog() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+        <DialogTitle className="sr-only">Settings</DialogTitle>
+        <DialogDescription className="sr-only">
+          Customize your settings here.
+        </DialogDescription>
+        <SidebarProvider className="items-start">
+          <Sidebar collapsible="none" className="hidden md:flex">
+            <SidebarContent>
+              <SidebarGroup>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {data.nav.map((item) => (
+                      <SidebarMenuItem key={item.name}>
+                        <SidebarMenuButton
+                          asChild
+                          isActive={item.name === "Messages & media"}
+                        >
+                          <a href="#">
+                            <item.icon />
+                            <span>{item.name}</span>
+                          </a>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            </SidebarContent>
+          </Sidebar>
+          <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+              <div className="flex items-center gap-2 px-4">
+                <Breadcrumb>
+                  <BreadcrumbList>
+                    <BreadcrumbItem className="hidden md:block">
+                      <BreadcrumbLink href="#">Settings</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator className="hidden md:block" />
+                    <BreadcrumbItem>
+                      <BreadcrumbPage>Messages & media</BreadcrumbPage>
+                    </BreadcrumbItem>
+                  </BreadcrumbList>
+                </Breadcrumb>
+              </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+              {Array.from({ length: 10 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="aspect-video max-w-3xl rounded-xl bg-muted/50"
+                />
+              ))}
+            </div>
+          </main>
+        </SidebarProvider>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-13/page.tsx b/apps/www/registry/default/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000000..7bebc464af7
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-13/page.tsx
@@ -0,0 +1,9 @@
+import { SettingsDialog } from "@/registry/default/blocks/sidebar-13/components/settings-dialog"
+
+export default function Page() {
+  return (
+    <div className="flex h-svh items-center justify-center">
+      <SettingsDialog />
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-14/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-14/components/app-sidebar.tsx
new file mode 100644
index 00000000000..dbb53de8615
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-14/components/app-sidebar.tsx
@@ -0,0 +1,197 @@
+import * as React from "react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url} className="font-medium">
+                      {item.title}
+                    </a>
+                  </SidebarMenuButton>
+                  {item.items?.length ? (
+                    <SidebarMenuSub>
+                      {item.items.map((item) => (
+                        <SidebarMenuSubItem key={item.title}>
+                          <SidebarMenuSubButton
+                            asChild
+                            isActive={item.isActive}
+                          >
+                            <a href={item.url}>{item.title}</a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  ) : null}
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-14/page.tsx b/apps/www/registry/default/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000000..a299c067deb
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-14/page.tsx
@@ -0,0 +1,48 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-14/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+      <AppSidebar side="right" />
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-15/components/calendars.tsx b/apps/www/registry/default/blocks/sidebar-15/components/calendars.tsx
new file mode 100644
index 00000000000..96b36ad4462
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/calendars.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Check, ChevronRight } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from "@/registry/default/ui/sidebar"
+
+export function Calendars({
+  calendars,
+}: {
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}) {
+  return (
+    <>
+      {calendars.map((calendar, index) => (
+        <React.Fragment key={calendar.name}>
+          <SidebarGroup key={calendar.name} className="py-0">
+            <Collapsible
+              defaultOpen={index === 0}
+              className="group/collapsible"
+            >
+              <SidebarGroupLabel
+                asChild
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {calendar.name}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {calendar.items.map((item, index) => (
+                      <SidebarMenuItem key={item}>
+                        <SidebarMenuButton>
+                          <div
+                            data-active={index < 2}
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                          >
+                            <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                          </div>
+                          {item}
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </SidebarGroup>
+          <SidebarSeparator className="mx-0" />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-15/components/date-picker.tsx b/apps/www/registry/default/blocks/sidebar-15/components/date-picker.tsx
new file mode 100644
index 00000000000..5e2b6c7f056
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/date-picker.tsx
@@ -0,0 +1,15 @@
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from "@/registry/default/ui/sidebar"
+
+export function DatePicker() {
+  return (
+    <SidebarGroup className="px-0">
+      <SidebarGroupContent>
+        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-15/components/nav-favorites.tsx b/apps/www/registry/default/blocks/sidebar-15/components/nav-favorites.tsx
new file mode 100644
index 00000000000..6cdd8545398
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/nav-favorites.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import {
+  ArrowUpRight,
+  Link,
+  MoreHorizontal,
+  StarOff,
+  Trash2,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavFavorites({
+  favorites,
+}: {
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+      <SidebarMenu>
+        {favorites.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url} title={item.name}>
+                <span>{item.emoji}</span>
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-56 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <StarOff className="text-muted-foreground" />
+                  <span>Remove from Favorites</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link className="text-muted-foreground" />
+                  <span>Copy Link</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArrowUpRight className="text-muted-foreground" />
+                  <span>Open in New Tab</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-15/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-15/components/nav-main.tsx
new file mode 100644
index 00000000000..062803adb9b
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/nav-main.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton asChild isActive={item.isActive}>
+            <a href={item.url}>
+              <item.icon />
+              <span>{item.title}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-15/components/nav-secondary.tsx b/apps/www/registry/default/blocks/sidebar-15/components/nav-secondary.tsx
new file mode 100644
index 00000000000..e215151694d
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/nav-secondary.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: React.ReactNode
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-15/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-15/components/nav-user.tsx
new file mode 100644
index 00000000000..a0b0dcf2dbd
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-15/components/nav-workspaces.tsx b/apps/www/registry/default/blocks/sidebar-15/components/nav-workspaces.tsx
new file mode 100644
index 00000000000..74883dadeb6
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/nav-workspaces.tsx
@@ -0,0 +1,85 @@
+import { ChevronRight, MoreHorizontal, Plus } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavWorkspaces({
+  workspaces,
+}: {
+  workspaces: {
+    name: string
+    emoji: React.ReactNode
+    pages: {
+      name: string
+      emoji: React.ReactNode
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {workspaces.map((workspace) => (
+            <Collapsible key={workspace.name}>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <span>{workspace.emoji}</span>
+                    <span>{workspace.name}</span>
+                  </a>
+                </SidebarMenuButton>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuAction
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                    showOnHover
+                  >
+                    <ChevronRight />
+                  </SidebarMenuAction>
+                </CollapsibleTrigger>
+                <SidebarMenuAction showOnHover>
+                  <Plus />
+                </SidebarMenuAction>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {workspace.pages.map((page) => (
+                      <SidebarMenuSubItem key={page.name}>
+                        <SidebarMenuSubButton asChild>
+                          <a href="#">
+                            <span>{page.emoji}</span>
+                            <span>{page.name}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ))}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="text-sidebar-foreground/70">
+              <MoreHorizontal />
+              <span>More</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-15/components/sidebar-left.tsx b/apps/www/registry/default/blocks/sidebar-15/components/sidebar-left.tsx
new file mode 100644
index 00000000000..9e512f857ca
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/sidebar-left.tsx
@@ -0,0 +1,278 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  Blocks,
+  Calendar,
+  Command,
+  Home,
+  Inbox,
+  MessageCircleQuestion,
+  Search,
+  Settings2,
+  Sparkles,
+  Trash2,
+} from "lucide-react"
+
+import { NavFavorites } from "@/registry/default/blocks/sidebar-15/components/nav-favorites"
+import { NavMain } from "@/registry/default/blocks/sidebar-15/components/nav-main"
+import { NavSecondary } from "@/registry/default/blocks/sidebar-15/components/nav-secondary"
+import { NavWorkspaces } from "@/registry/default/blocks/sidebar-15/components/nav-workspaces"
+import { TeamSwitcher } from "@/registry/default/blocks/sidebar-15/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: Command,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Search",
+      url: "#",
+      icon: Search,
+    },
+    {
+      title: "Ask AI",
+      url: "#",
+      icon: Sparkles,
+    },
+    {
+      title: "Home",
+      url: "#",
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      badge: "10",
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Calendar",
+      url: "#",
+      icon: Calendar,
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+    },
+    {
+      title: "Templates",
+      url: "#",
+      icon: Blocks,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+    },
+    {
+      title: "Help",
+      url: "#",
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: "Project Management & Task Tracking",
+      url: "#",
+      emoji: "📊",
+    },
+    {
+      name: "Family Recipe Collection & Meal Planning",
+      url: "#",
+      emoji: "🍳",
+    },
+    {
+      name: "Fitness Tracker & Workout Routines",
+      url: "#",
+      emoji: "💪",
+    },
+    {
+      name: "Book Notes & Reading List",
+      url: "#",
+      emoji: "📚",
+    },
+    {
+      name: "Sustainable Gardening Tips & Plant Care",
+      url: "#",
+      emoji: "🌱",
+    },
+    {
+      name: "Language Learning Progress & Resources",
+      url: "#",
+      emoji: "🗣️",
+    },
+    {
+      name: "Home Renovation Ideas & Budget Tracker",
+      url: "#",
+      emoji: "🏠",
+    },
+    {
+      name: "Personal Finance & Investment Portfolio",
+      url: "#",
+      emoji: "💰",
+    },
+    {
+      name: "Movie & TV Show Watchlist with Reviews",
+      url: "#",
+      emoji: "🎬",
+    },
+    {
+      name: "Daily Habit Tracker & Goal Setting",
+      url: "#",
+      emoji: "✅",
+    },
+  ],
+  workspaces: [
+    {
+      name: "Personal Life Management",
+      emoji: "🏠",
+      pages: [
+        {
+          name: "Daily Journal & Reflection",
+          url: "#",
+          emoji: "📔",
+        },
+        {
+          name: "Health & Wellness Tracker",
+          url: "#",
+          emoji: "🍏",
+        },
+        {
+          name: "Personal Growth & Learning Goals",
+          url: "#",
+          emoji: "🌟",
+        },
+      ],
+    },
+    {
+      name: "Professional Development",
+      emoji: "💼",
+      pages: [
+        {
+          name: "Career Objectives & Milestones",
+          url: "#",
+          emoji: "🎯",
+        },
+        {
+          name: "Skill Acquisition & Training Log",
+          url: "#",
+          emoji: "🧠",
+        },
+        {
+          name: "Networking Contacts & Events",
+          url: "#",
+          emoji: "🤝",
+        },
+      ],
+    },
+    {
+      name: "Creative Projects",
+      emoji: "🎨",
+      pages: [
+        {
+          name: "Writing Ideas & Story Outlines",
+          url: "#",
+          emoji: "✍️",
+        },
+        {
+          name: "Art & Design Portfolio",
+          url: "#",
+          emoji: "🖼️",
+        },
+        {
+          name: "Music Composition & Practice Log",
+          url: "#",
+          emoji: "🎵",
+        },
+      ],
+    },
+    {
+      name: "Home Management",
+      emoji: "🏡",
+      pages: [
+        {
+          name: "Household Budget & Expense Tracking",
+          url: "#",
+          emoji: "💰",
+        },
+        {
+          name: "Home Maintenance Schedule & Tasks",
+          url: "#",
+          emoji: "🔧",
+        },
+        {
+          name: "Family Calendar & Event Planning",
+          url: "#",
+          emoji: "📅",
+        },
+      ],
+    },
+    {
+      name: "Travel & Adventure",
+      emoji: "🧳",
+      pages: [
+        {
+          name: "Trip Planning & Itineraries",
+          url: "#",
+          emoji: "🗺️",
+        },
+        {
+          name: "Travel Bucket List & Inspiration",
+          url: "#",
+          emoji: "🌎",
+        },
+        {
+          name: "Travel Journal & Photo Gallery",
+          url: "#",
+          emoji: "📸",
+        },
+      ],
+    },
+  ],
+}
+
+export function SidebarLeft({
+  ...props
+}: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar className="border-r-0" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+        <NavMain items={data.navMain} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavFavorites favorites={data.favorites} />
+        <NavWorkspaces workspaces={data.workspaces} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-15/components/sidebar-right.tsx b/apps/www/registry/default/blocks/sidebar-15/components/sidebar-right.tsx
new file mode 100644
index 00000000000..9cb89c8cdab
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/sidebar-right.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+
+import { Calendars } from "@/registry/default/blocks/sidebar-15/components/calendars"
+import { DatePicker } from "@/registry/default/blocks/sidebar-15/components/date-picker"
+import { NavUser } from "@/registry/default/blocks/sidebar-15/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  calendars: [
+    {
+      name: "My Calendars",
+      items: ["Personal", "Work", "Family"],
+    },
+    {
+      name: "Favorites",
+      items: ["Holidays", "Birthdays"],
+    },
+    {
+      name: "Other",
+      items: ["Travel", "Reminders", "Deadlines"],
+    },
+  ],
+}
+
+export function SidebarRight({
+  ...props
+}: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar
+      collapsible="none"
+      className="sticky hidden lg:flex top-0 h-svh border-l"
+      {...props}
+    >
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
+        <NavUser user={data.user} />
+      </SidebarHeader>
+      <SidebarContent>
+        <DatePicker />
+        <SidebarSeparator className="mx-0" />
+        <Calendars calendars={data.calendars} />
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              <Plus />
+              <span>New Calendar</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-15/components/team-switcher.tsx b/apps/www/registry/default/blocks/sidebar-15/components/team-switcher.tsx
new file mode 100644
index 00000000000..7401b625ba6
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/team-switcher.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className="w-fit px-1.5">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-3" />
+              </div>
+              <span className="truncate font-semibold">{activeTeam.name}</span>
+              <ChevronDown className="opacity-50" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-64 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-15/page.tsx b/apps/www/registry/default/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000000..3bf6087ecee
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/page.tsx
@@ -0,0 +1,44 @@
+import { SidebarLeft } from "@/registry/default/blocks/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "@/registry/default/blocks/sidebar-15/components/sidebar-right"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarLeft />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+      <SidebarRight />
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-16/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-16/components/app-sidebar.tsx
new file mode 100644
index 00000000000..4214ec36f99
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-16/components/app-sidebar.tsx
@@ -0,0 +1,188 @@
+"use client"
+
+import * as React from "react"
+import {
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  LifeBuoy,
+  Map,
+  PieChart,
+  Send,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { NavMain } from "@/registry/default/blocks/sidebar-16/components/nav-main"
+import { NavProjects } from "@/registry/default/blocks/sidebar-16/components/nav-projects"
+import { NavSecondary } from "@/registry/default/blocks/sidebar-16/components/nav-secondary"
+import { NavUser } from "@/registry/default/blocks/sidebar-16/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar
+      className="top-[--header-height] !h-[calc(100svh-var(--header-height))]"
+      {...props}
+    >
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <Command className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">Acme Inc</span>
+                  <span className="truncate text-xs">Enterprise</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-16/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-16/components/nav-main.tsx
new file mode 100644
index 00000000000..10b836a2e3d
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-16/components/nav-main.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild tooltip={item.title}>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.items?.length ? (
+                <>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuAction className="data-[state=open]:rotate-90">
+                      <ChevronRight />
+                      <span className="sr-only">Toggle</span>
+                    </SidebarMenuAction>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.items?.map((subItem) => (
+                        <SidebarMenuSubItem key={subItem.title}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </>
+              ) : null}
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-16/components/nav-projects.tsx b/apps/www/registry/default/blocks/sidebar-16/components/nav-projects.tsx
new file mode 100644
index 00000000000..85caea25e0b
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-16/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  MoreHorizontal,
+  Share,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Share className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-16/components/nav-secondary.tsx b/apps/www/registry/default/blocks/sidebar-16/components/nav-secondary.tsx
new file mode 100644
index 00000000000..f15ddb7bb94
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-16/components/nav-secondary.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild size="sm">
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-16/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-16/components/nav-user.tsx
new file mode 100644
index 00000000000..e22c32af62e
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-16/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-16/components/search-form.tsx b/apps/www/registry/default/blocks/sidebar-16/components/search-form.tsx
new file mode 100644
index 00000000000..6f62031253d
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-16/components/search-form.tsx
@@ -0,0 +1,22 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/default/ui/label"
+import { SidebarInput } from "@/registry/default/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <div className="relative">
+        <Label htmlFor="search" className="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Type to search..."
+          className="h-8 pl-7"
+        />
+        <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+      </div>
+    </form>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-16/components/site-header.tsx b/apps/www/registry/default/blocks/sidebar-16/components/site-header.tsx
new file mode 100644
index 00000000000..355bd345ce1
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-16/components/site-header.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { SidebarIcon } from "lucide-react"
+
+import { SearchForm } from "@/registry/default/blocks/sidebar-16/components/search-form"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Button } from "@/registry/default/ui/button"
+import { Separator } from "@/registry/default/ui/separator"
+import { useSidebar } from "@/registry/default/ui/sidebar"
+
+export function SiteHeader() {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <header className="flex sticky top-0 z-50 w-full items-center border-b bg-background">
+      <div className="flex h-[--header-height] w-full items-center gap-2 px-4">
+        <Button
+          className="h-8 w-8"
+          variant="ghost"
+          size="icon"
+          onClick={toggleSidebar}
+        >
+          <SidebarIcon />
+        </Button>
+        <Separator orientation="vertical" className="mr-2 h-4" />
+        <Breadcrumb className="hidden sm:block">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <SearchForm className="w-full sm:ml-auto sm:w-auto" />
+      </div>
+    </header>
+  )
+}
diff --git a/apps/www/registry/default/blocks/sidebar-16/page.tsx b/apps/www/registry/default/blocks/sidebar-16/page.tsx
new file mode 100644
index 00000000000..01313fb14e9
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-16/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "@/registry/default/blocks/sidebar-16/components/app-sidebar"
+import { SiteHeader } from "@/registry/default/blocks/sidebar-16/components/site-header"
+import { SidebarInset, SidebarProvider } from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a header and a search form."
+
+export default function Page() {
+  return (
+    <div className="[--header-height:calc(theme(spacing.14))]">
+      <SidebarProvider className="flex flex-col">
+        <SiteHeader />
+        <div className="flex flex-1">
+          <AppSidebar />
+          <SidebarInset>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+              <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+              </div>
+              <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+          </SidebarInset>
+        </div>
+      </SidebarProvider>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-area-axes.tsx b/apps/www/registry/default/charts/chart-area-axes.tsx
new file mode 100644
index 00000000000..e6c173dcb5a
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-axes.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "An area chart with axes"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Axes</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: -20,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickCount={3}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-area-default.tsx b/apps/www/registry/default/charts/chart-area-default.tsx
new file mode 100644
index 00000000000..925eb60367f
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-default.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A simple area chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-area-gradient.tsx b/apps/www/registry/default/charts/chart-area-gradient.tsx
new file mode 100644
index 00000000000..0314f690fcd
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-gradient.tsx
@@ -0,0 +1,130 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "An area chart with gradient fill"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Gradient</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-area-icons.tsx b/apps/www/registry/default/charts/chart-area-icons.tsx
new file mode 100644
index 00000000000..05d2e4ef0b0
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-icons.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingDown, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "An area chart with icons"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+    icon: TrendingDown,
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+    icon: TrendingUp,
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Icons</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-area-interactive.tsx b/apps/www/registry/default/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000000..16cbcca59f1
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const [timeRange, setTimeRange] = React.useState("90d")
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card>
+      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
+        <div className="grid flex-1 gap-1 text-center sm:text-left">
+          <CardTitle>Area Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <Select value={timeRange} onValueChange={setTimeRange}>
+          <SelectTrigger
+            className="w-[160px] rounded-lg sm:ml-auto"
+            aria-label="Select a value"
+          >
+            <SelectValue placeholder="Last 3 months" />
+          </SelectTrigger>
+          <SelectContent className="rounded-xl">
+            <SelectItem value="90d" className="rounded-lg">
+              Last 3 months
+            </SelectItem>
+            <SelectItem value="30d" className="rounded-lg">
+              Last 30 days
+            </SelectItem>
+            <SelectItem value="7d" className="rounded-lg">
+              Last 7 days
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-area-legend.tsx b/apps/www/registry/default/charts/chart-area-legend.tsx
new file mode 100644
index 00000000000..9d7cfe3d1e2
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-legend.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "An area chart with a legend"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Legend</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-area-linear.tsx b/apps/www/registry/default/charts/chart-area-linear.tsx
new file mode 100644
index 00000000000..4e584179940
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-linear.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A linear area chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Linear</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dot" hideLabel />}
+            />
+            <Area
+              dataKey="desktop"
+              type="linear"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-area-stacked-expand.tsx b/apps/www/registry/default/charts/chart-area-stacked-expand.tsx
new file mode 100644
index 00000000000..ab66f895654
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-stacked-expand.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked area chart with expand stacking"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80, other: 45 },
+  { month: "February", desktop: 305, mobile: 200, other: 100 },
+  { month: "March", desktop: 237, mobile: 120, other: 150 },
+  { month: "April", desktop: 73, mobile: 190, other: 50 },
+  { month: "May", desktop: 209, mobile: 130, other: 100 },
+  { month: "June", desktop: 214, mobile: 140, other: 160 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-3))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Stacked Expanded</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+              top: 12,
+            }}
+            stackOffset="expand"
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="other"
+              type="natural"
+              fill="var(--color-other)"
+              fillOpacity={0.1}
+              stroke="var(--color-other)"
+              stackId="a"
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-area-stacked.tsx b/apps/www/registry/default/charts/chart-area-stacked.tsx
new file mode 100644
index 00000000000..3820dd7a7b2
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-stacked.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked area chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Stacked</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dot" />}
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-area-step.tsx b/apps/www/registry/default/charts/chart-area-step.tsx
new file mode 100644
index 00000000000..4ca6623d268
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-step.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { Activity, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A step area chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+    icon: Activity,
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Step</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Area
+              dataKey="desktop"
+              type="step"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-bar-active.tsx b/apps/www/registry/default/charts/chart-bar-active.tsx
new file mode 100644
index 00000000000..f1be5c77182
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-active.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A bar chart with an active bar"
+
+const chartData = [
+  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Active</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="browser"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) =>
+                chartConfig[value as keyof typeof chartConfig]?.label
+              }
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar
+              dataKey="visitors"
+              strokeWidth={2}
+              radius={8}
+              activeIndex={2}
+              activeBar={({ ...props }) => {
+                return (
+                  <Rectangle
+                    {...props}
+                    fillOpacity={0.8}
+                    stroke={props.payload.fill}
+                    strokeDasharray={4}
+                    strokeDashoffset={4}
+                  />
+                )
+              }}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-bar-default.tsx b/apps/www/registry/default/charts/chart-bar-default.tsx
new file mode 100644
index 00000000000..9fc5f15a157
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-default.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A bar chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-bar-horizontal.tsx b/apps/www/registry/default/charts/chart-bar-horizontal.tsx
new file mode 100644
index 00000000000..ac74114ceea
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-horizontal.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A horizontal bar chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Horizontal</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            margin={{
+              left: -20,
+            }}
+          >
+            <XAxis type="number" dataKey="desktop" hide />
+            <YAxis
+              dataKey="month"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={5} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-bar-interactive.tsx b/apps/www/registry/default/charts/chart-bar-interactive.tsx
new file mode 100644
index 00000000000..84bcc6a28c2
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-interactive.tsx
@@ -0,0 +1,221 @@
+"use client"
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "An interactive bar chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  views: {
+    label: "Page Views",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const [activeChart, setActiveChart] =
+    React.useState<keyof typeof chartConfig>("desktop")
+
+  const total = React.useMemo(
+    () => ({
+      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+    }),
+    []
+  )
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+          <CardTitle>Bar Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <div className="flex">
+          {["desktop", "mobile"].map((key) => {
+            const chart = key as keyof typeof chartConfig
+            return (
+              <button
+                key={chart}
+                data-active={activeChart === chart}
+                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                onClick={() => setActiveChart(chart)}
+              >
+                <span className="text-xs text-muted-foreground">
+                  {chartConfig[chart].label}
+                </span>
+                <span className="text-lg font-bold leading-none sm:text-3xl">
+                  {total[key as keyof typeof total].toLocaleString()}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-bar-label-custom.tsx b/apps/www/registry/default/charts/chart-bar-label-custom.tsx
new file mode 100644
index 00000000000..bd16655bc77
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-label-custom.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A bar chart with a custom label"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+  label: {
+    color: "hsl(var(--background))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Custom Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            margin={{
+              right: 16,
+            }}
+          >
+            <CartesianGrid horizontal={false} />
+            <YAxis
+              dataKey="month"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+              hide
+            />
+            <XAxis dataKey="desktop" type="number" hide />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Bar
+              dataKey="desktop"
+              layout="vertical"
+              fill="var(--color-desktop)"
+              radius={4}
+            >
+              <LabelList
+                dataKey="month"
+                position="insideLeft"
+                offset={8}
+                className="fill-[--color-label]"
+                fontSize={12}
+              />
+              <LabelList
+                dataKey="desktop"
+                position="right"
+                offset={8}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-bar-label.tsx b/apps/www/registry/default/charts/chart-bar-label.tsx
new file mode 100644
index 00000000000..c7ebea70e06
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-label.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A bar chart with a label"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 20,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
+              <LabelList
+                position="top"
+                offset={12}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-bar-mixed.tsx b/apps/www/registry/default/charts/chart-bar-mixed.tsx
new file mode 100644
index 00000000000..fa3beea6fc9
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-mixed.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A mixed bar chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Mixed</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            margin={{
+              left: 0,
+            }}
+          >
+            <YAxis
+              dataKey="browser"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) =>
+                chartConfig[value as keyof typeof chartConfig]?.label
+              }
+            />
+            <XAxis dataKey="visitors" type="number" hide />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="visitors" layout="vertical" radius={5} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-bar-multiple.tsx b/apps/www/registry/default/charts/chart-bar-multiple.tsx
new file mode 100644
index 00000000000..39b80fa76f1
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-multiple.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A multiple bar chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dashed" />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-bar-negative.tsx b/apps/www/registry/default/charts/chart-bar-negative.tsx
new file mode 100644
index 00000000000..f9e3b3e360b
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-negative.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A bar chart with negative values"
+
+const chartData = [
+  { month: "January", visitors: 186 },
+  { month: "February", visitors: 205 },
+  { month: "March", visitors: -207 },
+  { month: "April", visitors: 173 },
+  { month: "May", visitors: -209 },
+  { month: "June", visitors: 214 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Negative</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel hideIndicator />}
+            />
+            <Bar dataKey="visitors">
+              <LabelList position="top" dataKey="month" fillOpacity={1} />
+              {chartData.map((item) => (
+                <Cell
+                  key={item.month}
+                  fill={
+                    item.visitors > 0
+                      ? "hsl(var(--chart-1))"
+                      : "hsl(var(--chart-2))"
+                  }
+                />
+              ))}
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-bar-stacked.tsx b/apps/www/registry/default/charts/chart-bar-stacked.tsx
new file mode 100644
index 00000000000..211bfe6aeff
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-stacked.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="desktop"
+              stackId="a"
+              fill="var(--color-desktop)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="mobile"
+              stackId="a"
+              fill="var(--color-mobile)"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-line-default.tsx b/apps/www/registry/default/charts/chart-line-default.tsx
new file mode 100644
index 00000000000..24972697fc1
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-default.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A line chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-line-dots-colors.tsx b/apps/www/registry/default/charts/chart-line-dots-colors.tsx
new file mode 100644
index 00000000000..e568ddd9900
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-dots-colors.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Dot, Line, LineChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A line chart with dots and colors"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--chart-2))",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Dots Colors</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 24,
+              left: 24,
+              right: 24,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  indicator="line"
+                  nameKey="visitors"
+                  hideLabel
+                />
+              }
+            />
+            <Line
+              dataKey="visitors"
+              type="natural"
+              stroke="var(--color-visitors)"
+              strokeWidth={2}
+              dot={({ payload, ...props }) => {
+                return (
+                  <Dot
+                    key={payload.browser}
+                    r={5}
+                    cx={props.cx}
+                    cy={props.cy}
+                    fill={payload.fill}
+                    stroke={payload.fill}
+                  />
+                )
+              }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-line-dots-custom.tsx b/apps/www/registry/default/charts/chart-line-dots-custom.tsx
new file mode 100644
index 00000000000..4eae4da5759
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-dots-custom.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { GitCommitVertical, TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A line chart with custom dots"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Custom Dots</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={({ cx, cy, payload }) => {
+                const r = 24
+                return (
+                  <GitCommitVertical
+                    key={payload.month}
+                    x={cx - r / 2}
+                    y={cy - r / 2}
+                    width={r}
+                    height={r}
+                    fill="hsl(var(--background))"
+                    stroke="var(--color-desktop)"
+                  />
+                )
+              }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-line-dots.tsx b/apps/www/registry/default/charts/chart-line-dots.tsx
new file mode 100644
index 00000000000..d52f09148e6
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-dots.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A line chart with dots"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Dots</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={{
+                fill: "var(--color-desktop)",
+              }}
+              activeDot={{
+                r: 6,
+              }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-line-interactive.tsx b/apps/www/registry/default/charts/chart-line-interactive.tsx
new file mode 100644
index 00000000000..6f618200719
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-interactive.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "An interactive line chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  views: {
+    label: "Page Views",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const [activeChart, setActiveChart] =
+    React.useState<keyof typeof chartConfig>("desktop")
+
+  const total = React.useMemo(
+    () => ({
+      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+    }),
+    []
+  )
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+          <CardTitle>Line Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <div className="flex">
+          {["desktop", "mobile"].map((key) => {
+            const chart = key as keyof typeof chartConfig
+            return (
+              <button
+                key={chart}
+                data-active={activeChart === chart}
+                className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                onClick={() => setActiveChart(chart)}
+              >
+                <span className="text-xs text-muted-foreground">
+                  {chartConfig[chart].label}
+                </span>
+                <span className="text-lg font-bold leading-none sm:text-3xl">
+                  {total[key as keyof typeof total].toLocaleString()}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Line
+              dataKey={activeChart}
+              type="monotone"
+              stroke={`var(--color-${activeChart})`}
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-line-label-custom.tsx b/apps/www/registry/default/charts/chart-line-label-custom.tsx
new file mode 100644
index 00000000000..e6976bd892f
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-label-custom.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A line chart with a custom label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--chart-2))",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Custom Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 24,
+              left: 24,
+              right: 24,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  indicator="line"
+                  nameKey="visitors"
+                  hideLabel
+                />
+              }
+            />
+            <Line
+              dataKey="visitors"
+              type="natural"
+              stroke="var(--color-visitors)"
+              strokeWidth={2}
+              dot={{
+                fill: "var(--color-visitors)",
+              }}
+              activeDot={{
+                r: 6,
+              }}
+            >
+              <LabelList
+                position="top"
+                offset={12}
+                className="fill-foreground"
+                fontSize={12}
+                dataKey="browser"
+                formatter={(value: keyof typeof chartConfig) =>
+                  chartConfig[value]?.label
+                }
+              />
+            </Line>
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-line-label.tsx b/apps/www/registry/default/charts/chart-line-label.tsx
new file mode 100644
index 00000000000..159e1031761
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-label.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A line chart with a label"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 20,
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={{
+                fill: "var(--color-desktop)",
+              }}
+              activeDot={{
+                r: 6,
+              }}
+            >
+              <LabelList
+                position="top"
+                offset={12}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Line>
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-line-linear.tsx b/apps/www/registry/default/charts/chart-line-linear.tsx
new file mode 100644
index 00000000000..9d3e06f5e99
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-linear.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A linear line chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Linear</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="linear"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-line-multiple.tsx b/apps/www/registry/default/charts/chart-line-multiple.tsx
new file mode 100644
index 00000000000..61ea1d960fe
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-multiple.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A multiple line chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Line
+              dataKey="desktop"
+              type="monotone"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="mobile"
+              type="monotone"
+              stroke="var(--color-mobile)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-line-step.tsx b/apps/www/registry/default/charts/chart-line-step.tsx
new file mode 100644
index 00000000000..608bd5f628c
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-step.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A line chart with step"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Step</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="step"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-pie-donut-active.tsx b/apps/www/registry/default/charts/chart-pie-donut-active.tsx
new file mode 100644
index 00000000000..5a390419191
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-donut-active.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A donut chart with an active sector"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Donut Active</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+              strokeWidth={5}
+              activeIndex={0}
+              activeShape={({
+                outerRadius = 0,
+                ...props
+              }: PieSectorDataItem) => (
+                <Sector {...props} outerRadius={outerRadius + 10} />
+              )}
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-pie-donut-text.tsx b/apps/www/registry/default/charts/chart-pie-donut-text.tsx
new file mode 100644
index 00000000000..ff5391ab1d3
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-donut-text.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A donut chart with text"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 190, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const totalVisitors = React.useMemo(() => {
+    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+  }, [])
+
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Donut with Text</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-pie-donut.tsx b/apps/www/registry/default/charts/chart-pie-donut.tsx
new file mode 100644
index 00000000000..45d17ecdd27
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-donut.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A donut chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Donut</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-pie-interactive.tsx b/apps/www/registry/default/charts/chart-pie-interactive.tsx
new file mode 100644
index 00000000000..e1abb04262c
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-interactive.tsx
@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+export const description = "An interactive pie chart"
+
+const desktopData = [
+  { month: "january", desktop: 186, fill: "var(--color-january)" },
+  { month: "february", desktop: 305, fill: "var(--color-february)" },
+  { month: "march", desktop: 237, fill: "var(--color-march)" },
+  { month: "april", desktop: 173, fill: "var(--color-april)" },
+  { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+  },
+  mobile: {
+    label: "Mobile",
+  },
+  january: {
+    label: "January",
+    color: "hsl(var(--chart-1))",
+  },
+  february: {
+    label: "February",
+    color: "hsl(var(--chart-2))",
+  },
+  march: {
+    label: "March",
+    color: "hsl(var(--chart-3))",
+  },
+  april: {
+    label: "April",
+    color: "hsl(var(--chart-4))",
+  },
+  may: {
+    label: "May",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const id = "pie-interactive"
+  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
+
+  const activeIndex = React.useMemo(
+    () => desktopData.findIndex((item) => item.month === activeMonth),
+    [activeMonth]
+  )
+  const months = React.useMemo(() => desktopData.map((item) => item.month), [])
+
+  return (
+    <Card data-chart={id} className="flex flex-col">
+      <ChartStyle id={id} config={chartConfig} />
+      <CardHeader className="flex-row items-start space-y-0 pb-0">
+        <div className="grid gap-1">
+          <CardTitle>Pie Chart - Interactive</CardTitle>
+          <CardDescription>January - June 2024</CardDescription>
+        </div>
+        <Select value={activeMonth} onValueChange={setActiveMonth}>
+          <SelectTrigger
+            className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
+            aria-label="Select a value"
+          >
+            <SelectValue placeholder="Select month" />
+          </SelectTrigger>
+          <SelectContent align="end" className="rounded-xl">
+            {months.map((key) => {
+              const config = chartConfig[key as keyof typeof chartConfig]
+
+              if (!config) {
+                return null
+              }
+
+              return (
+                <SelectItem
+                  key={key}
+                  value={key}
+                  className="rounded-lg [&_span]:flex"
+                >
+                  <div className="flex items-center gap-2 text-xs">
+                    <span
+                      className="flex h-3 w-3 shrink-0 rounded-sm"
+                      style={{
+                        backgroundColor: `var(--color-${key})`,
+                      }}
+                    />
+                    {config?.label}
+                  </div>
+                </SelectItem>
+              )
+            })}
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="flex flex-1 justify-center pb-0">
+        <ChartContainer
+          id={id}
+          config={chartConfig}
+          className="mx-auto aspect-square w-full max-w-[300px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={desktopData}
+              dataKey="desktop"
+              nameKey="month"
+              innerRadius={60}
+              strokeWidth={5}
+              activeIndex={activeIndex}
+              activeShape={({
+                outerRadius = 0,
+                ...props
+              }: PieSectorDataItem) => (
+                <g>
+                  <Sector {...props} outerRadius={outerRadius + 10} />
+                  <Sector
+                    {...props}
+                    outerRadius={outerRadius + 25}
+                    innerRadius={outerRadius + 12}
+                  />
+                </g>
+              )}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {desktopData[activeIndex].desktop.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-pie-label-custom.tsx b/apps/www/registry/default/charts/chart-pie-label-custom.tsx
new file mode 100644
index 00000000000..4b8c616214e
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-label-custom.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A pie chart with a custom label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Custom Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] px-0"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              labelLine={false}
+              label={({ payload, ...props }) => {
+                return (
+                  <text
+                    cx={props.cx}
+                    cy={props.cy}
+                    x={props.x}
+                    y={props.y}
+                    textAnchor={props.textAnchor}
+                    dominantBaseline={props.dominantBaseline}
+                    fill="hsla(var(--foreground))"
+                  >
+                    {payload.visitors}
+                  </text>
+                )
+              }}
+              nameKey="browser"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-pie-label-list.tsx b/apps/www/registry/default/charts/chart-pie-label-list.tsx
new file mode 100644
index 00000000000..6b083fb02a1
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-label-list.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A pie chart with a label list"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Label List</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+            />
+            <Pie data={chartData} dataKey="visitors">
+              <LabelList
+                dataKey="browser"
+                className="fill-background"
+                stroke="none"
+                fontSize={12}
+                formatter={(value: keyof typeof chartConfig) =>
+                  chartConfig[value]?.label
+                }
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-pie-label.tsx b/apps/www/registry/default/charts/chart-pie-label.tsx
new file mode 100644
index 00000000000..26c294cd652
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-label.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A pie chart with a label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
+        >
+          <PieChart>
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <Pie data={chartData} dataKey="visitors" label nameKey="browser" />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-pie-legend.tsx b/apps/www/registry/default/charts/chart-pie-legend.tsx
new file mode 100644
index 00000000000..3e3d7534a82
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-legend.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A pie chart with a legend"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Legend</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[300px]"
+        >
+          <PieChart>
+            <Pie data={chartData} dataKey="visitors" />
+            <ChartLegend
+              content={<ChartLegendContent nameKey="browser" />}
+              className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-pie-separator-none.tsx b/apps/www/registry/default/charts/chart-pie-separator-none.tsx
new file mode 100644
index 00000000000..08ec2b56338
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-separator-none.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A pie chart with no separator"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Separator None</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              stroke="0"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-pie-simple.tsx b/apps/www/registry/default/charts/chart-pie-simple.tsx
new file mode 100644
index 00000000000..5108126f71f
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-simple.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A simple pie chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie data={chartData} dataKey="visitors" nameKey="browser" />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-pie-stacked.tsx b/apps/www/registry/default/charts/chart-pie-stacked.tsx
new file mode 100644
index 00000000000..db8b0efbbc2
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-stacked.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import * as React from "react"
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A pie chart with stacked sections"
+
+const desktopData = [
+  { month: "january", desktop: 186, fill: "var(--color-january)" },
+  { month: "february", desktop: 305, fill: "var(--color-february)" },
+  { month: "march", desktop: 237, fill: "var(--color-march)" },
+  { month: "april", desktop: 173, fill: "var(--color-april)" },
+  { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const mobileData = [
+  { month: "january", mobile: 80, fill: "var(--color-january)" },
+  { month: "february", mobile: 200, fill: "var(--color-february)" },
+  { month: "march", mobile: 120, fill: "var(--color-march)" },
+  { month: "april", mobile: 190, fill: "var(--color-april)" },
+  { month: "may", mobile: 130, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+  },
+  mobile: {
+    label: "Mobile",
+  },
+  january: {
+    label: "January",
+    color: "hsl(var(--chart-1))",
+  },
+  february: {
+    label: "February",
+    color: "hsl(var(--chart-2))",
+  },
+  march: {
+    label: "March",
+    color: "hsl(var(--chart-3))",
+  },
+  april: {
+    label: "April",
+    color: "hsl(var(--chart-4))",
+  },
+  may: {
+    label: "May",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Stacked</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  labelKey="visitors"
+                  nameKey="month"
+                  indicator="line"
+                  labelFormatter={(_, payload) => {
+                    return chartConfig[
+                      payload?.[0].dataKey as keyof typeof chartConfig
+                    ].label
+                  }}
+                />
+              }
+            />
+            <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
+            <Pie
+              data={mobileData}
+              dataKey="mobile"
+              innerRadius={70}
+              outerRadius={90}
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-default.tsx b/apps/www/registry/default/charts/chart-radar-default.tsx
new file mode 100644
index 00000000000..e4b41856847
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-default.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-dots.tsx b/apps/www/registry/default/charts/chart-radar-dots.tsx
new file mode 100644
index 00000000000..461a2295404
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-dots.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with dots"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center">
+        <CardTitle>Radar Chart - Dots</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-grid-circle-fill.tsx b/apps/www/registry/default/charts/chart-radar-grid-circle-fill.tsx
new file mode 100644
index 00000000000..0bed543195d
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-grid-circle-fill.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 285 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 203 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <PolarGrid
+              className="fill-[--color-desktop] opacity-20"
+              gridType="circle"
+            />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.5}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-grid-circle-no-lines.tsx b/apps/www/registry/default/charts/chart-radar-grid-circle-no-lines.tsx
new file mode 100644
index 00000000000..332a86b3cb3
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-grid-circle-no-lines.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 203 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid gridType="circle" radialLines={false} />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-grid-circle.tsx b/apps/www/registry/default/charts/chart-radar-grid-circle.tsx
new file mode 100644
index 00000000000..e6b3a569c46
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-grid-circle.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with a grid and circle"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Circle</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid gridType="circle" />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-grid-custom.tsx b/apps/www/registry/default/charts/chart-radar-grid-custom.tsx
new file mode 100644
index 00000000000..738d9f7c2a2
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-grid-custom.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with a custom grid"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Custom</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-grid-fill.tsx b/apps/www/registry/default/charts/chart-radar-grid-fill.tsx
new file mode 100644
index 00000000000..182b08f51a8
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-grid-fill.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with a grid filled"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 285 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 203 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Filled</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid className="fill-[--color-desktop] opacity-20" />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.5}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-grid-none.tsx b/apps/www/registry/default/charts/chart-radar-grid-none.tsx
new file mode 100644
index 00000000000..348075e8322
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-grid-none.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with no grid"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid None</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-icons.tsx b/apps/www/registry/default/charts/chart-radar-icons.tsx
new file mode 100644
index 00000000000..efbbf89c8ba
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-icons.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with icons"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+    icon: ArrowDownFromLine,
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+    icon: ArrowUpFromLine,
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Icons</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart
+            data={chartData}
+            margin={{
+              top: -40,
+              bottom: -10,
+            }}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+            <ChartLegend className="mt-8" content={<ChartLegendContent />} />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 pt-4 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-label-custom.tsx b/apps/www/registry/default/charts/chart-radar-label-custom.tsx
new file mode 100644
index 00000000000..4e65b8996dc
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-label-custom.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with a custom label"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Custom Label</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart
+            data={chartData}
+            margin={{
+              top: 10,
+              right: 10,
+              bottom: 10,
+              left: 10,
+            }}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis
+              dataKey="month"
+              tick={({ x, y, textAnchor, value, index, ...props }) => {
+                const data = chartData[index]
+
+                return (
+                  <text
+                    x={x}
+                    y={index === 0 ? y - 10 : y}
+                    textAnchor={textAnchor}
+                    fontSize={13}
+                    fontWeight={500}
+                    {...props}
+                  >
+                    <tspan>{data.desktop}</tspan>
+                    <tspan className="fill-muted-foreground">/</tspan>
+                    <tspan>{data.mobile}</tspan>
+                    <tspan
+                      x={x}
+                      dy={"1rem"}
+                      fontSize={12}
+                      className="fill-muted-foreground"
+                    >
+                      {data.month}
+                    </tspan>
+                  </text>
+                )
+              }}
+            />
+
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-legend.tsx b/apps/www/registry/default/charts/chart-radar-legend.tsx
new file mode 100644
index 00000000000..535bc82c07c
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-legend.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with a legend"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Legend</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart
+            data={chartData}
+            margin={{
+              top: -40,
+              bottom: -10,
+            }}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+            <ChartLegend className="mt-8" content={<ChartLegendContent />} />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 pt-4 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-lines-only.tsx b/apps/www/registry/default/charts/chart-radar-lines-only.tsx
new file mode 100644
index 00000000000..c6e0c52525e
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-lines-only.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with lines only"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 160 },
+  { month: "February", desktop: 185, mobile: 170 },
+  { month: "March", desktop: 207, mobile: 180 },
+  { month: "April", desktop: 173, mobile: 160 },
+  { month: "May", desktop: 160, mobile: 190 },
+  { month: "June", desktop: 174, mobile: 204 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Lines Only</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid radialLines={false} />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0}
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+            />
+            <Radar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              fillOpacity={0}
+              stroke="var(--color-mobile)"
+              strokeWidth={2}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-multiple.tsx b/apps/www/registry/default/charts/chart-radar-multiple.tsx
new file mode 100644
index 00000000000..2463d7ae313
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-multiple.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with multiple data"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Multiple</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radar-radius.tsx b/apps/www/registry/default/charts/chart-radar-radius.tsx
new file mode 100644
index 00000000000..22cbe8e1977
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-radius.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radar chart with a radius axis"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Radius Axis</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent indicator="line" labelKey="month" />
+              }
+            />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+            <PolarRadiusAxis
+              angle={60}
+              stroke="hsla(var(--foreground))"
+              orientation="middle"
+              axisLine={false}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radial-grid.tsx b/apps/www/registry/default/charts/chart-radial-grid.tsx
new file mode 100644
index 00000000000..cc91ba2c8b3
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-grid.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radial chart with a grid"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Grid</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel nameKey="browser" />}
+            />
+            <PolarGrid gridType="circle" />
+            <RadialBar dataKey="visitors" />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radial-label.tsx b/apps/www/registry/default/charts/chart-radial-label.tsx
new file mode 100644
index 00000000000..179a919f6c0
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-label.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radial chart with a label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            startAngle={-90}
+            endAngle={380}
+            innerRadius={30}
+            outerRadius={110}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel nameKey="browser" />}
+            />
+            <RadialBar dataKey="visitors" background>
+              <LabelList
+                position="insideStart"
+                dataKey="browser"
+                className="fill-white capitalize mix-blend-luminosity"
+                fontSize={11}
+              />
+            </RadialBar>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radial-shape.tsx b/apps/www/registry/default/charts/chart-radial-shape.tsx
new file mode 100644
index 00000000000..bd3754e986e
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-shape.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/default/ui/chart"
+
+export const description = "A radial chart with a custom shape"
+
+const chartData = [
+  { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Shape</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            endAngle={100}
+            innerRadius={80}
+            outerRadius={140}
+          >
+            <PolarGrid
+              gridType="circle"
+              radialLines={false}
+              stroke="none"
+              className="first:fill-muted last:fill-background"
+              polarRadius={[86, 74]}
+            />
+            <RadialBar dataKey="visitors" background />
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-4xl font-bold"
+                        >
+                          {chartData[0].visitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radial-simple.tsx b/apps/www/registry/default/charts/chart-radial-simple.tsx
new file mode 100644
index 00000000000..57a8030230c
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-simple.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radial chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel nameKey="browser" />}
+            />
+            <RadialBar dataKey="visitors" background />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radial-stacked.tsx b/apps/www/registry/default/charts/chart-radial-stacked.tsx
new file mode 100644
index 00000000000..a5b78f27fe5
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-stacked.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A radial chart with stacked sections"
+
+const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const totalVisitors = chartData[0].desktop + chartData[0].mobile
+
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Stacked</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-1 items-center pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square w-full max-w-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            endAngle={180}
+            innerRadius={80}
+            outerRadius={130}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) - 16}
+                          className="fill-foreground text-2xl font-bold"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 4}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+            <RadialBar
+              dataKey="desktop"
+              stackId="a"
+              cornerRadius={5}
+              fill="var(--color-desktop)"
+              className="stroke-transparent stroke-2"
+            />
+            <RadialBar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              stackId="a"
+              cornerRadius={5}
+              className="stroke-transparent stroke-2"
+            />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-radial-text.tsx b/apps/www/registry/default/charts/chart-radial-text.tsx
new file mode 100644
index 00000000000..a798f66121a
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-text.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/default/ui/chart"
+
+export const description = "A radial chart with text"
+
+const chartData = [
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Text</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            startAngle={0}
+            endAngle={250}
+            innerRadius={80}
+            outerRadius={110}
+          >
+            <PolarGrid
+              gridType="circle"
+              radialLines={false}
+              stroke="none"
+              className="first:fill-muted last:fill-background"
+              polarRadius={[86, 74]}
+            />
+            <RadialBar dataKey="visitors" background cornerRadius={10} />
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-4xl font-bold"
+                        >
+                          {chartData[0].visitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-tooltip-advanced.tsx b/apps/www/registry/default/charts/chart-tooltip-advanced.tsx
new file mode 100644
index 00000000000..7a700798212
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-advanced.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Advanced</CardTitle>
+        <CardDescription>
+          Tooltip with custom formatter and total.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  hideLabel
+                  className="w-[180px]"
+                  formatter={(value, name, item, index) => (
+                    <>
+                      <div
+                        className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
+                        style={
+                          {
+                            "--color-bg": `var(--color-${name})`,
+                          } as React.CSSProperties
+                        }
+                      />
+                      {chartConfig[name as keyof typeof chartConfig]?.label ||
+                        name}
+                      <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                        {value}
+                        <span className="font-normal text-muted-foreground">
+                          kcal
+                        </span>
+                      </div>
+                      {/* Add this after the last item */}
+                      {index === 1 && (
+                        <div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
+                          Total
+                          <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                            {item.payload.running + item.payload.swimming}
+                            <span className="font-normal text-muted-foreground">
+                              kcal
+                            </span>
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  )}
+                />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-tooltip-default.tsx b/apps/www/registry/default/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..e1ed0870752
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Default</CardTitle>
+        <CardDescription>
+          Default tooltip with ChartTooltipContent.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-tooltip-formatter.tsx b/apps/www/registry/default/charts/chart-tooltip-formatter.tsx
new file mode 100644
index 00000000000..8c1b6d7009a
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-formatter.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Formatter</CardTitle>
+        <CardDescription>Tooltip with custom formatter .</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  hideLabel
+                  formatter={(value, name) => (
+                    <div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
+                      {chartConfig[name as keyof typeof chartConfig]?.label ||
+                        name}
+                      <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                        {value}
+                        <span className="font-normal text-muted-foreground">
+                          kcal
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-tooltip-icons.tsx b/apps/www/registry/default/charts/chart-tooltip-icons.tsx
new file mode 100644
index 00000000000..a95db7a7b5f
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-icons.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Footprints, Waves } from "lucide-react"
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+    icon: Footprints,
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+    icon: Waves,
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Icons</CardTitle>
+        <CardDescription>Tooltip with icons.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent hideLabel />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-tooltip-indicator-line.tsx b/apps/www/registry/default/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..8f59a417cde
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-indicator-line.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Line Indicator</CardTitle>
+        <CardDescription>Tooltip with line indicator.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="line" />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-tooltip-indicator-none.tsx b/apps/www/registry/default/charts/chart-tooltip-indicator-none.tsx
new file mode 100644
index 00000000000..52c3790224f
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-indicator-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - No Indicator</CardTitle>
+        <CardDescription>Tooltip with no indicator.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent hideIndicator />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-tooltip-label-custom.tsx b/apps/www/registry/default/charts/chart-tooltip-label-custom.tsx
new file mode 100644
index 00000000000..ebd735e0753
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-label-custom.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  activities: {
+    label: "Activities",
+  },
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Custom label</CardTitle>
+        <CardDescription>
+          Tooltip with custom label from chartConfig.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent labelKey="activities" indicator="line" />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-tooltip-label-formatter.tsx b/apps/www/registry/default/charts/chart-tooltip-label-formatter.tsx
new file mode 100644
index 00000000000..ed1173c5b7b
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-label-formatter.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Label Formatter</CardTitle>
+        <CardDescription>Tooltip with label formatter.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      day: "numeric",
+                      month: "long",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/charts/chart-tooltip-label-none.tsx b/apps/www/registry/default/charts/chart-tooltip-label-none.tsx
new file mode 100644
index 00000000000..4aadf3fc795
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-label-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/default/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - No Label</CardTitle>
+        <CardDescription>Tooltip with no label.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent hideIndicator hideLabel />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/example/button-icon.tsx b/apps/www/registry/default/example/button-icon.tsx
deleted file mode 100644
index 1e790f85d4f..00000000000
--- a/apps/www/registry/default/example/button-icon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ChevronRight } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonIcon() {
-  return (
-    <Button variant="outline" size="icon">
-      <ChevronRight className="h-4 w-4" />
-    </Button>
-  )
-}
diff --git a/apps/www/registry/default/example/button-loading.tsx b/apps/www/registry/default/example/button-loading.tsx
deleted file mode 100644
index bdce9478b02..00000000000
--- a/apps/www/registry/default/example/button-loading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Loader2 } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonLoading() {
-  return (
-    <Button disabled>
-      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-      Please wait
-    </Button>
-  )
-}
diff --git a/apps/www/registry/default/example/button-with-icon.tsx b/apps/www/registry/default/example/button-with-icon.tsx
deleted file mode 100644
index fd4e39671d1..00000000000
--- a/apps/www/registry/default/example/button-with-icon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Mail } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonWithIcon() {
-  return (
-    <Button>
-      <Mail className="mr-2 h-4 w-4" /> Login with Email
-    </Button>
-  )
-}
diff --git a/apps/www/registry/default/example/card-demo.tsx b/apps/www/registry/default/example/card-demo.tsx
deleted file mode 100644
index 136f42ab848..00000000000
--- a/apps/www/registry/default/example/card-demo.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { BellRing, Check } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Switch } from "@/registry/default/ui/switch"
-
-const notifications = [
-  {
-    title: "Your call has been confirmed.",
-    description: "1 hour ago",
-  },
-  {
-    title: "You have a new message!",
-    description: "1 hour ago",
-  },
-  {
-    title: "Your subscription is expiring soon!",
-    description: "2 hours ago",
-  },
-]
-
-type CardProps = React.ComponentProps<typeof Card>
-
-export default function CardDemo({ className, ...props }: CardProps) {
-  return (
-    <Card className={cn("w-[380px]", className)} {...props}>
-      <CardHeader>
-        <CardTitle>Notifications</CardTitle>
-        <CardDescription>You have 3 unread messages.</CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className=" flex items-center space-x-4 rounded-md border p-4">
-          <BellRing />
-          <div className="flex-1 space-y-1">
-            <p className="text-sm font-medium leading-none">
-              Push Notifications
-            </p>
-            <p className="text-sm text-muted-foreground">
-              Send notifications to device.
-            </p>
-          </div>
-          <Switch />
-        </div>
-        <div>
-          {notifications.map((notification, index) => (
-            <div
-              key={index}
-              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
-            >
-              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
-              <div className="space-y-1">
-                <p className="text-sm font-medium leading-none">
-                  {notification.title}
-                </p>
-                <p className="text-sm text-muted-foreground">
-                  {notification.description}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">
-          <Check className="mr-2 h-4 w-4" /> Mark all as read
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/activity-goal.tsx b/apps/www/registry/default/example/cards/activity-goal.tsx
deleted file mode 100644
index be73bb2f6a4..00000000000
--- a/apps/www/registry/default/example/cards/activity-goal.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Minus, Plus } from "lucide-react"
-import { useTheme } from "next-themes"
-import { Bar, BarChart, ResponsiveContainer } from "recharts"
-
-import { useConfig } from "@/hooks/use-config"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { baseColors } from "@/registry/registry-base-colors"
-
-const data = [
-  {
-    goal: 400,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 239,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 349,
-  },
-]
-
-export function CardsActivityGoal() {
-  const { theme: mode } = useTheme()
-  const [config] = useConfig()
-
-  const baseColor = baseColors.find(
-    (baseColor) => baseColor.name === config.theme
-  )
-  const [goal, setGoal] = React.useState(350)
-
-  function onClick(adjustment: number) {
-    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
-  }
-
-  return (
-    <Card>
-      <CardHeader className="pb-4">
-        <CardTitle className="text-base">Move Goal</CardTitle>
-        <CardDescription>Set your daily activity goal.</CardDescription>
-      </CardHeader>
-      <CardContent className="pb-2">
-        <div className="flex items-center justify-center space-x-2">
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8 shrink-0 rounded-full"
-            onClick={() => onClick(-10)}
-            disabled={goal <= 200}
-          >
-            <Minus className="h-4 w-4" />
-            <span className="sr-only">Decrease</span>
-          </Button>
-          <div className="flex-1 text-center">
-            <div className="text-5xl font-bold tracking-tighter">{goal}</div>
-            <div className="text-[0.70rem] uppercase text-muted-foreground">
-              Calories/day
-            </div>
-          </div>
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8 shrink-0 rounded-full"
-            onClick={() => onClick(10)}
-            disabled={goal >= 400}
-          >
-            <Plus className="h-4 w-4" />
-            <span className="sr-only">Increase</span>
-          </Button>
-        </div>
-        <div className="my-3 h-[60px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={data}>
-              <Bar
-                dataKey="goal"
-                style={
-                  {
-                    fill: "var(--theme-primary)",
-                    opacity: 0.2,
-                    "--theme-primary": `hsl(${
-                      baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                        .primary
-                    })`,
-                  } as React.CSSProperties
-                }
-              />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Set Goal</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/calendar.tsx b/apps/www/registry/default/example/cards/calendar.tsx
deleted file mode 100644
index 39785387d89..00000000000
--- a/apps/www/registry/default/example/cards/calendar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client"
-
-import { addDays } from "date-fns"
-
-import { Calendar } from "@/registry/default/ui/calendar"
-import { Card, CardContent } from "@/registry/default/ui/card"
-
-const start = new Date(2023, 5, 5)
-
-export function CardsCalendar() {
-  return (
-    <Card className="max-w-[280px]">
-      <CardContent className="p-0">
-        <Calendar
-          numberOfMonths={1}
-          mode="range"
-          defaultMonth={start}
-          selected={{
-            from: start,
-            to: addDays(start, 8),
-          }}
-        />
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/chat.tsx b/apps/www/registry/default/example/cards/chat.tsx
deleted file mode 100644
index c45dcd6bd17..00000000000
--- a/apps/www/registry/default/example/cards/chat.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import * as React from "react"
-import { Check, Plus, Send } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/registry/default/ui/card"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/default/ui/command"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/registry/default/ui/dialog"
-import { Input } from "@/registry/default/ui/input"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/registry/default/ui/tooltip"
-
-const users = [
-  {
-    name: "Olivia Martin",
-    email: "m@example.com",
-    avatar: "/avatars/01.png",
-  },
-  {
-    name: "Isabella Nguyen",
-    email: "isabella.nguyen@email.com",
-    avatar: "/avatars/03.png",
-  },
-  {
-    name: "Emma Wilson",
-    email: "emma@example.com",
-    avatar: "/avatars/05.png",
-  },
-  {
-    name: "Jackson Lee",
-    email: "lee@example.com",
-    avatar: "/avatars/02.png",
-  },
-  {
-    name: "William Kim",
-    email: "will@email.com",
-    avatar: "/avatars/04.png",
-  },
-] as const
-
-type User = (typeof users)[number]
-
-export function CardsChat() {
-  const [open, setOpen] = React.useState(false)
-  const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
-
-  const [messages, setMessages] = React.useState([
-    {
-      role: "agent",
-      content: "Hi, how can I help you today?",
-    },
-    {
-      role: "user",
-      content: "Hey, I'm having trouble with my account.",
-    },
-    {
-      role: "agent",
-      content: "What seems to be the problem?",
-    },
-    {
-      role: "user",
-      content: "I can't log in.",
-    },
-  ])
-  const [input, setInput] = React.useState("")
-  const inputLength = input.trim().length
-
-  return (
-    <>
-      <Card>
-        <CardHeader className="flex flex-row items-center">
-          <div className="flex items-center space-x-4">
-            <Avatar>
-              <AvatarImage src="/avatars/01.png" alt="Image" />
-              <AvatarFallback>OM</AvatarFallback>
-            </Avatar>
-            <div>
-              <p className="text-sm font-medium leading-none">Sofia Davis</p>
-              <p className="text-sm text-muted-foreground">m@example.com</p>
-            </div>
-          </div>
-          <TooltipProvider delayDuration={0}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  size="icon"
-                  variant="outline"
-                  className="ml-auto rounded-full"
-                  onClick={() => setOpen(true)}
-                >
-                  <Plus className="h-4 w-4" />
-                  <span className="sr-only">New message</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent sideOffset={10}>New message</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            {messages.map((message, index) => (
-              <div
-                key={index}
-                className={cn(
-                  "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
-                  message.role === "user"
-                    ? "ml-auto bg-primary text-primary-foreground"
-                    : "bg-muted"
-                )}
-              >
-                {message.content}
-              </div>
-            ))}
-          </div>
-        </CardContent>
-        <CardFooter>
-          <form
-            onSubmit={(event) => {
-              event.preventDefault()
-              if (inputLength === 0) return
-              setMessages([
-                ...messages,
-                {
-                  role: "user",
-                  content: input,
-                },
-              ])
-              setInput("")
-            }}
-            className="flex w-full items-center space-x-2"
-          >
-            <Input
-              id="message"
-              placeholder="Type your message..."
-              className="flex-1"
-              autoComplete="off"
-              value={input}
-              onChange={(event) => setInput(event.target.value)}
-            />
-            <Button type="submit" size="icon" disabled={inputLength === 0}>
-              <Send className="h-4 w-4" />
-              <span className="sr-only">Send</span>
-            </Button>
-          </form>
-        </CardFooter>
-      </Card>
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="gap-0 p-0 outline-none">
-          <DialogHeader className="px-4 pb-4 pt-5">
-            <DialogTitle>New message</DialogTitle>
-            <DialogDescription>
-              Invite a user to this thread. This will create a new group
-              message.
-            </DialogDescription>
-          </DialogHeader>
-          <Command className="overflow-hidden rounded-t-none border-t">
-            <CommandInput placeholder="Search user..." />
-            <CommandList>
-              <CommandEmpty>No users found.</CommandEmpty>
-              <CommandGroup className="p-2">
-                {users.map((user) => (
-                  <CommandItem
-                    key={user.email}
-                    className="flex items-center px-2"
-                    onSelect={() => {
-                      if (selectedUsers.includes(user)) {
-                        return setSelectedUsers(
-                          selectedUsers.filter(
-                            (selectedUser) => selectedUser !== user
-                          )
-                        )
-                      }
-
-                      return setSelectedUsers(
-                        [...users].filter((u) =>
-                          [...selectedUsers, user].includes(u)
-                        )
-                      )
-                    }}
-                  >
-                    <Avatar>
-                      <AvatarImage src={user.avatar} alt="Image" />
-                      <AvatarFallback>{user.name[0]}</AvatarFallback>
-                    </Avatar>
-                    <div className="ml-2">
-                      <p className="text-sm font-medium leading-none">
-                        {user.name}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        {user.email}
-                      </p>
-                    </div>
-                    {selectedUsers.includes(user) ? (
-                      <Check className="ml-auto flex h-5 w-5 text-primary" />
-                    ) : null}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-          <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
-            {selectedUsers.length > 0 ? (
-              <div className="flex -space-x-2 overflow-hidden">
-                {selectedUsers.map((user) => (
-                  <Avatar
-                    key={user.email}
-                    className="inline-block border-2 border-background"
-                  >
-                    <AvatarImage src={user.avatar} />
-                    <AvatarFallback>{user.name[0]}</AvatarFallback>
-                  </Avatar>
-                ))}
-              </div>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                Select users to add to this thread.
-              </p>
-            )}
-            <Button
-              disabled={selectedUsers.length < 2}
-              onClick={() => {
-                setOpen(false)
-              }}
-            >
-              Continue
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/cookie-settings.tsx b/apps/www/registry/default/example/cards/cookie-settings.tsx
deleted file mode 100644
index 11e6df7fcde..00000000000
--- a/apps/www/registry/default/example/cards/cookie-settings.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Label } from "@/registry/default/ui/label"
-import { Switch } from "@/registry/default/ui/switch"
-
-export function CardsCookieSettings() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Cookie Settings</CardTitle>
-        <CardDescription>Manage your cookie settings here.</CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-6">
-        <div className="flex items-center justify-between space-x-4">
-          <Label htmlFor="necessary" className="flex flex-col space-y-1">
-            <span>Strictly Necessary</span>
-            <span className="text-xs font-normal leading-snug text-muted-foreground">
-              These cookies are essential in order to use the website and use
-              its features.
-            </span>
-          </Label>
-          <Switch id="necessary" defaultChecked aria-label="Necessary" />
-        </div>
-        <div className="flex items-center justify-between space-x-4">
-          <Label htmlFor="functional" className="flex flex-col space-y-1">
-            <span>Functional Cookies</span>
-            <span className="text-xs font-normal leading-snug text-muted-foreground">
-              These cookies allow the website to provide personalized
-              functionality.
-            </span>
-          </Label>
-          <Switch id="functional" aria-label="Functional" />
-        </div>
-        <div className="flex items-center justify-between space-x-4">
-          <Label htmlFor="performance" className="flex flex-col space-y-1">
-            <span>Performance Cookies</span>
-            <span className="text-xs font-normal leading-snug text-muted-foreground">
-              These cookies help to improve the performance of the website.
-            </span>
-          </Label>
-          <Switch id="performance" aria-label="Performance" />
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button variant="outline" className="w-full">
-          Save preferences
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/create-account.tsx b/apps/www/registry/default/example/cards/create-account.tsx
deleted file mode 100644
index ef7ef5b81ae..00000000000
--- a/apps/www/registry/default/example/cards/create-account.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client"
-
-import { Icons } from "@/components/icons"
-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 function CardsCreateAccount() {
-  return (
-    <Card>
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl">Create an account</CardTitle>
-        <CardDescription>
-          Enter your email below to create your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="grid grid-cols-2 gap-6">
-          <Button variant="outline">
-            <Icons.gitHub className="mr-2 h-4 w-4" />
-            Github
-          </Button>
-          <Button variant="outline">
-            <Icons.google className="mr-2 h-4 w-4" />
-            Google
-          </Button>
-        </div>
-        <div className="relative">
-          <div className="absolute inset-0 flex items-center">
-            <span className="w-full border-t" />
-          </div>
-          <div className="relative flex justify-center text-xs uppercase">
-            <span className="bg-background px-2 text-muted-foreground">
-              Or continue with
-            </span>
-          </div>
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="m@example.com" />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" />
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Create account</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/data-table.tsx b/apps/www/registry/default/example/cards/data-table.tsx
deleted file mode 100644
index cf58e890a57..00000000000
--- a/apps/www/registry/default/example/cards/data-table.tsx
+++ /dev/null
@@ -1,335 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  CaretSortIcon,
-  ChevronDownIcon,
-  DotsHorizontalIcon,
-} from "@radix-ui/react-icons"
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Checkbox } from "@/registry/default/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-
-const data: Payment[] = [
-  {
-    id: "m5gr84i9",
-    amount: 316,
-    status: "success",
-    email: "ken99@yahoo.com",
-  },
-  {
-    id: "3u1reuv4",
-    amount: 242,
-    status: "success",
-    email: "Abe45@gmail.com",
-  },
-  {
-    id: "derv1ws0",
-    amount: 837,
-    status: "processing",
-    email: "Monserrat44@gmail.com",
-  },
-  {
-    id: "5kma53ae",
-    amount: 874,
-    status: "success",
-    email: "Silas22@gmail.com",
-  },
-  {
-    id: "bhqecj4p",
-    amount: 721,
-    status: "failed",
-    email: "carmella@hotmail.com",
-  },
-]
-
-export type Payment = {
-  id: string
-  amount: number
-  status: "pending" | "processing" | "success" | "failed"
-  email: string
-}
-
-export const columns: ColumnDef<Payment>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => (
-      <div className="capitalize">{row.getValue("status")}</div>
-    ),
-  },
-  {
-    accessorKey: "email",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Email
-          <CaretSortIcon className="ml-2 h-4 w-4" />
-        </Button>
-      )
-    },
-    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue("amount"))
-
-      // Format the amount as a dollar amount
-      const formatted = new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-      }).format(amount)
-
-      return <div className="text-right font-medium">{formatted}</div>
-    },
-  },
-  {
-    id: "actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      const payment = row.original
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <DotsHorizontalIcon className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(payment.id)}
-            >
-              Copy payment ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>View customer</DropdownMenuItem>
-            <DropdownMenuItem>View payment details</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )
-    },
-  },
-]
-
-export function CardsDataTable() {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  })
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Payments</CardTitle>
-        <CardDescription>Manage your payments.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="mb-4 flex items-center gap-4">
-          <Input
-            placeholder="Filter emails..."
-            value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
-            onChange={(event) =>
-              table.getColumn("email")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm"
-          />
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="ml-auto">
-                Columns <ChevronDownIcon className="ml-2 h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {table
-                .getAllColumns()
-                .filter((column) => column.getCanHide())
-                .map((column) => {
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={column.id}
-                      className="capitalize"
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) =>
-                        column.toggleVisibility(!!value)
-                      }
-                    >
-                      {column.id}
-                    </DropdownMenuCheckboxItem>
-                  )
-                })}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead
-                        key={header.id}
-                        className="[&:has([role=checkbox])]:pl-3"
-                      >
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                      </TableHead>
-                    )
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell
-                        key={cell.id}
-                        className="[&:has([role=checkbox])]:pl-3"
-                      >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
-                    No results.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-        <div className="flex items-center justify-end space-x-2 pt-4">
-          <div className="flex-1 text-sm text-muted-foreground">
-            {table.getFilteredSelectedRowModel().rows.length} of{" "}
-            {table.getFilteredRowModel().rows.length} row(s) selected.
-          </div>
-          <div className="space-x-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => table.previousPage()}
-              disabled={!table.getCanPreviousPage()}
-            >
-              Previous
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => table.nextPage()}
-              disabled={!table.getCanNextPage()}
-            >
-              Next
-            </Button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/index.tsx b/apps/www/registry/default/example/cards/index.tsx
deleted file mode 100644
index 888fa37563c..00000000000
--- a/apps/www/registry/default/example/cards/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { CardsActivityGoal } from "@/registry/default/example/cards/activity-goal"
-import { CardsCalendar } from "@/registry/default/example/cards/calendar"
-import { CardsChat } from "@/registry/default/example/cards/chat"
-import { CardsCookieSettings } from "@/registry/default/example/cards/cookie-settings"
-import { CardsCreateAccount } from "@/registry/default/example/cards/create-account"
-import { CardsDataTable } from "@/registry/default/example/cards/data-table"
-import { CardsMetric } from "@/registry/default/example/cards/metric"
-import { CardsPaymentMethod } from "@/registry/default/example/cards/payment-method"
-import { CardsReportIssue } from "@/registry/default/example/cards/report-issue"
-import { CardsShare } from "@/registry/default/example/cards/share"
-import { CardsStats } from "@/registry/default/example/cards/stats"
-import { CardsTeamMembers } from "@/registry/default/example/cards/team-members"
-
-export default function CardsDemo() {
-  return (
-    <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
-      <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
-        <CardsStats />
-        <div className="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
-          <CardsCalendar />
-          <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-            <CardsActivityGoal />
-          </div>
-          <div className="pt-3 sm:col-span-2 xl:pt-4">
-            <CardsMetric />
-          </div>
-        </div>
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-          <div className="space-y-4 xl:space-y-4">
-            <CardsTeamMembers />
-            <CardsCookieSettings />
-            <CardsPaymentMethod />
-          </div>
-          <div className="space-y-4 xl:space-y-4">
-            <CardsChat />
-            <CardsCreateAccount />
-            <div className="hidden xl:block">
-              <CardsReportIssue />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
-        <div className="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
-          <CardsCalendar />
-          <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
-            <CardsActivityGoal />
-          </div>
-          <div className="pt-3 sm:col-span-2 xl:pt-3">
-            <CardsMetric />
-          </div>
-        </div>
-        <div className="hidden md:block">
-          <CardsDataTable />
-        </div>
-        <CardsShare />
-        <div className="xl:hidden">
-          <CardsReportIssue />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/metric.tsx b/apps/www/registry/default/example/cards/metric.tsx
deleted file mode 100644
index 1b6f1b3e40c..00000000000
--- a/apps/www/registry/default/example/cards/metric.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { useTheme } from "next-themes"
-import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts"
-
-import { useConfig } from "@/hooks/use-config"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { baseColors } from "@/registry/registry-base-colors"
-
-const data = [
-  {
-    average: 400,
-    today: 240,
-  },
-  {
-    average: 300,
-    today: 139,
-  },
-  {
-    average: 200,
-    today: 980,
-  },
-  {
-    average: 278,
-    today: 390,
-  },
-  {
-    average: 189,
-    today: 480,
-  },
-  {
-    average: 239,
-    today: 380,
-  },
-  {
-    average: 349,
-    today: 430,
-  },
-]
-
-export function CardsMetric() {
-  const { theme: mode } = useTheme()
-  const [config] = useConfig()
-
-  const baseColor = baseColors.find(
-    (baseColor) => baseColor.name === config.theme
-  )
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Exercise Minutes</CardTitle>
-        <CardDescription>
-          Your exercise minutes are ahead of where you normally are.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-4">
-        <div className="h-[200px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <LineChart
-              data={data}
-              margin={{
-                top: 5,
-                right: 10,
-                left: 10,
-                bottom: 0,
-              }}
-            >
-              <Tooltip
-                content={({ active, payload }) => {
-                  if (active && payload && payload.length) {
-                    return (
-                      <div className="rounded-lg border bg-background p-2 shadow-sm">
-                        <div className="grid grid-cols-2 gap-2">
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Average
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {payload[0].value}
-                            </span>
-                          </div>
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Today
-                            </span>
-                            <span className="font-bold">
-                              {payload[1].value}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    )
-                  }
-
-                  return null
-                }}
-              />
-              <Line
-                type="monotone"
-                strokeWidth={2}
-                dataKey="average"
-                activeDot={{
-                  r: 6,
-                  style: { fill: "var(--theme-primary)", opacity: 0.25 },
-                }}
-                style={
-                  {
-                    stroke: "var(--theme-primary)",
-                    opacity: 0.25,
-                    "--theme-primary": `hsl(${
-                      baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                        .primary
-                    })`,
-                  } as React.CSSProperties
-                }
-              />
-              <Line
-                type="monotone"
-                dataKey="today"
-                strokeWidth={2}
-                activeDot={{
-                  r: 8,
-                  style: { fill: "var(--theme-primary)" },
-                }}
-                style={
-                  {
-                    stroke: "var(--theme-primary)",
-                    "--theme-primary": `hsl(${
-                      baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                        .primary
-                    })`,
-                  } as React.CSSProperties
-                }
-              />
-            </LineChart>
-          </ResponsiveContainer>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/payment-method.tsx b/apps/www/registry/default/example/cards/payment-method.tsx
deleted file mode 100644
index 111afcf05b5..00000000000
--- a/apps/www/registry/default/example/cards/payment-method.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-"use client"
-
-import { Icons } from "@/components/icons"
-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"
-import { RadioGroup, RadioGroupItem } from "@/registry/default/ui/radio-group"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-
-export function CardsPaymentMethod() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Payment Method</CardTitle>
-        <CardDescription>
-          Add a new payment method to your account.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-6">
-        <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
-          <div>
-            <RadioGroupItem
-              value="card"
-              id="card"
-              className="peer sr-only"
-              aria-label="Card"
-            />
-            <Label
-              htmlFor="card"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                className="mb-3 h-6 w-6"
-              >
-                <rect width="20" height="14" x="2" y="5" rx="2" />
-                <path d="M2 10h20" />
-              </svg>
-              Card
-            </Label>
-          </div>
-
-          <div>
-            <RadioGroupItem
-              value="paypal"
-              id="paypal"
-              className="peer sr-only"
-              aria-label="Paypal"
-            />
-            <Label
-              htmlFor="paypal"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
-            >
-              <Icons.paypal className="mb-3 h-6 w-6" />
-              Paypal
-            </Label>
-          </div>
-
-          <div>
-            <RadioGroupItem
-              value="apple"
-              id="apple"
-              className="peer sr-only"
-              aria-label="Apple"
-            />
-            <Label
-              htmlFor="apple"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
-            >
-              <Icons.apple className="mb-3 h-6 w-6" />
-              Apple
-            </Label>
-          </div>
-        </RadioGroup>
-        <div className="grid gap-2">
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" placeholder="First Last" />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="city">City</Label>
-          <Input id="city" placeholder="" />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="number">Card number</Label>
-          <Input id="number" placeholder="" />
-        </div>
-        <div className="grid grid-cols-3 gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="month">Expires</Label>
-            <Select>
-              <SelectTrigger id="month" aria-label="Month">
-                <SelectValue placeholder="Month" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="1">January</SelectItem>
-                <SelectItem value="2">February</SelectItem>
-                <SelectItem value="3">March</SelectItem>
-                <SelectItem value="4">April</SelectItem>
-                <SelectItem value="5">May</SelectItem>
-                <SelectItem value="6">June</SelectItem>
-                <SelectItem value="7">July</SelectItem>
-                <SelectItem value="8">August</SelectItem>
-                <SelectItem value="9">September</SelectItem>
-                <SelectItem value="10">October</SelectItem>
-                <SelectItem value="11">November</SelectItem>
-                <SelectItem value="12">December</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="year">Year</Label>
-            <Select>
-              <SelectTrigger id="year" aria-label="Year">
-                <SelectValue placeholder="Year" />
-              </SelectTrigger>
-              <SelectContent>
-                {Array.from({ length: 10 }, (_, i) => (
-                  <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>
-                    {new Date().getFullYear() + i}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="cvc">CVC</Label>
-            <Input id="cvc" placeholder="CVC" />
-          </div>
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Continue</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/report-issue.tsx b/apps/www/registry/default/example/cards/report-issue.tsx
deleted file mode 100644
index c2bf1317318..00000000000
--- a/apps/www/registry/default/example/cards/report-issue.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-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"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-import { Textarea } from "@/registry/default/ui/textarea"
-
-export function CardsReportIssue() {
-  const id = React.useId()
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Report an issue</CardTitle>
-        <CardDescription>
-          What area are you having problems with?
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-6">
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="grid gap-2">
-            <Label htmlFor={`area-${id}`}>Area</Label>
-            <Select defaultValue="billing">
-              <SelectTrigger id={`area-${id}`} aria-label="Area">
-                <SelectValue placeholder="Select" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="team">Team</SelectItem>
-                <SelectItem value="billing">Billing</SelectItem>
-                <SelectItem value="account">Account</SelectItem>
-                <SelectItem value="deployments">Deployments</SelectItem>
-                <SelectItem value="support">Support</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor={`security-level-${id}`}>Security Level</Label>
-            <Select defaultValue="2">
-              <SelectTrigger
-                id={`security-level-${id}`}
-                className="line-clamp-1 w-full truncate"
-                aria-label="Security Level"
-              >
-                <SelectValue placeholder="Select level" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="1">Severity 1 (Highest)</SelectItem>
-                <SelectItem value="2">Severity 2</SelectItem>
-                <SelectItem value="3">Severity 3</SelectItem>
-                <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor={`subject-${id}`}>Subject</Label>
-          <Input id={`subject-${id}`} placeholder="I need help with..." />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor={`description-${id}`}>Description</Label>
-          <Textarea
-            id={`description-${id}`}
-            placeholder="Please include all information relevant to your issue."
-          />
-        </div>
-      </CardContent>
-      <CardFooter className="justify-between space-x-2">
-        <Button variant="ghost">Cancel</Button>
-        <Button>Submit</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/share.tsx b/apps/www/registry/default/example/cards/share.tsx
deleted file mode 100644
index e22c03f11ac..00000000000
--- a/apps/www/registry/default/example/cards/share.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-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"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-import { Separator } from "@/registry/default/ui/separator"
-
-export function CardsShare() {
-  return (
-    <Card>
-      <CardHeader className="pb-3">
-        <CardTitle>Share this document</CardTitle>
-        <CardDescription>
-          Anyone with the link can view this document.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="flex space-x-2">
-          <Label htmlFor="link" className="sr-only">
-            Link
-          </Label>
-          <Input
-            id="link"
-            value="http://example.com/link/to/document"
-            readOnly
-          />
-          <Button variant="secondary" className="shrink-0">
-            Copy Link
-          </Button>
-        </div>
-        <Separator className="my-4" />
-        <div className="space-y-4">
-          <h4 className="text-sm font-medium">People with access</h4>
-          <div className="grid gap-6">
-            <div className="flex items-center justify-between space-x-4">
-              <div className="flex items-center space-x-4">
-                <Avatar>
-                  <AvatarImage src="/avatars/03.png" alt="Image" />
-                  <AvatarFallback>OM</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-sm font-medium leading-none">
-                    Olivia Martin
-                  </p>
-                  <p className="text-sm text-muted-foreground">m@example.com</p>
-                </div>
-              </div>
-              <Select defaultValue="edit">
-                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                  <SelectValue placeholder="Select" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="edit">Can edit</SelectItem>
-                  <SelectItem value="view">Can view</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-              <div className="flex items-center space-x-4">
-                <Avatar>
-                  <AvatarImage src="/avatars/05.png" alt="Image" />
-                  <AvatarFallback>IN</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-sm font-medium leading-none">
-                    Isabella Nguyen
-                  </p>
-                  <p className="text-sm text-muted-foreground">b@example.com</p>
-                </div>
-              </div>
-              <Select defaultValue="view">
-                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                  <SelectValue placeholder="Select" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="edit">Can edit</SelectItem>
-                  <SelectItem value="view">Can view</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-              <div className="flex items-center space-x-4">
-                <Avatar>
-                  <AvatarImage src="/avatars/01.png" alt="Image" />
-                  <AvatarFallback>SD</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-sm font-medium leading-none">
-                    Sofia Davis
-                  </p>
-                  <p className="text-sm text-muted-foreground">p@example.com</p>
-                </div>
-              </div>
-              <Select defaultValue="view">
-                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                  <SelectValue placeholder="Select" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="edit">Can edit</SelectItem>
-                  <SelectItem value="view">Can view</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/stats.tsx b/apps/www/registry/default/example/cards/stats.tsx
deleted file mode 100644
index 32e58f1acde..00000000000
--- a/apps/www/registry/default/example/cards/stats.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { useTheme } from "next-themes"
-import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts"
-
-import { useConfig } from "@/hooks/use-config"
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { baseColors } from "@/registry/registry-base-colors"
-
-const data = [
-  {
-    revenue: 10400,
-    subscription: 240,
-  },
-  {
-    revenue: 14405,
-    subscription: 300,
-  },
-  {
-    revenue: 9400,
-    subscription: 200,
-  },
-  {
-    revenue: 8200,
-    subscription: 278,
-  },
-  {
-    revenue: 7000,
-    subscription: 189,
-  },
-  {
-    revenue: 9600,
-    subscription: 239,
-  },
-  {
-    revenue: 11244,
-    subscription: 278,
-  },
-  {
-    revenue: 26475,
-    subscription: 189,
-  },
-]
-
-export function CardsStats() {
-  const { theme: mode } = useTheme()
-  const [config] = useConfig()
-
-  const baseColor = baseColors.find(
-    (baseColor) => baseColor.name === config.theme
-  )
-
-  return (
-    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-base font-normal">Total Revenue</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold">$15,231.89</div>
-          <p className="text-xs text-muted-foreground">
-            +20.1% from last month
-          </p>
-          <div className="h-[80px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <LineChart
-                data={data}
-                margin={{
-                  top: 5,
-                  right: 10,
-                  left: 10,
-                  bottom: 0,
-                }}
-              >
-                <Line
-                  type="monotone"
-                  strokeWidth={2}
-                  dataKey="revenue"
-                  activeDot={{
-                    r: 6,
-                    style: { fill: "var(--theme-primary)", opacity: 0.25 },
-                  }}
-                  style={
-                    {
-                      stroke: "var(--theme-primary)",
-                      "--theme-primary": `hsl(${
-                        baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                          .primary
-                      })`,
-                    } as React.CSSProperties
-                  }
-                />
-              </LineChart>
-            </ResponsiveContainer>
-          </div>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-base font-normal">Subscriptions</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold">+2350</div>
-          <p className="text-xs text-muted-foreground">
-            +180.1% from last month
-          </p>
-          <div className="mt-4 h-[80px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={data}>
-                <Bar
-                  dataKey="subscription"
-                  style={
-                    {
-                      fill: "var(--theme-primary)",
-                      opacity: 1,
-                      "--theme-primary": `hsl(${
-                        baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                          .primary
-                      })`,
-                    } as React.CSSProperties
-                  }
-                />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/team-members.tsx b/apps/www/registry/default/example/cards/team-members.tsx
deleted file mode 100644
index 38162425436..00000000000
--- a/apps/www/registry/default/example/cards/team-members.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-"use client"
-
-import { ChevronDownIcon } from "@radix-ui/react-icons"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/default/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-
-export function CardsTeamMembers() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Team Members</CardTitle>
-        <CardDescription>
-          Invite your team members to collaborate.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-6">
-        <div className="flex items-center justify-between space-x-4">
-          <div className="flex items-center space-x-4">
-            <Avatar className="h-8 w-8">
-              <AvatarImage src="/avatars/01.png" alt="Image" />
-              <AvatarFallback>OM</AvatarFallback>
-            </Avatar>
-            <div>
-              <p className="text-sm font-medium leading-none">Sofia Davis</p>
-              <p className="text-sm text-muted-foreground">m@example.com</p>
-            </div>
-          </div>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="outline" size="sm" className="ml-auto">
-                Owner{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0" align="end">
-              <Command>
-                <CommandInput placeholder="Select new role..." />
-                <CommandList>
-                  <CommandEmpty>No roles found.</CommandEmpty>
-                  <CommandGroup>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Viewer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view and comment.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Developer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and edit.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Billing</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and manage billing.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Owner</p>
-                      <p className="text-sm text-muted-foreground">
-                        Admin-level access to all resources.
-                      </p>
-                    </CommandItem>
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-        </div>
-        <div className="flex items-center justify-between space-x-4">
-          <div className="flex items-center space-x-4">
-            <Avatar className="h-8 w-8">
-              <AvatarImage src="/avatars/02.png" alt="Image" />
-              <AvatarFallback>JL</AvatarFallback>
-            </Avatar>
-            <div>
-              <p className="text-sm font-medium leading-none">Jackson Lee</p>
-              <p className="text-sm text-muted-foreground">p@example.com</p>
-            </div>
-          </div>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="outline" size="sm" className="ml-auto">
-                Member{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0" align="end">
-              <Command>
-                <CommandInput placeholder="Select new role..." />
-                <CommandList>
-                  <CommandEmpty>No roles found.</CommandEmpty>
-                  <CommandGroup className="p-1.5">
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Viewer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view and comment.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Developer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and edit.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Billing</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and manage billing.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Owner</p>
-                      <p className="text-sm text-muted-foreground">
-                        Admin-level access to all resources.
-                      </p>
-                    </CommandItem>
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-        </div>
-        <div className="flex items-center justify-between space-x-4">
-          <div className="flex items-center space-x-4">
-            <Avatar className="h-8 w-8">
-              <AvatarImage src="/avatars/03.png" alt="Image" />
-              <AvatarFallback>IN</AvatarFallback>
-            </Avatar>
-            <div>
-              <p className="text-sm font-medium leading-none">
-                Isabella Nguyen
-              </p>
-              <p className="text-sm text-muted-foreground">i@example.com</p>
-            </div>
-          </div>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="outline" size="sm" className="ml-auto">
-                Member{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0" align="end">
-              <Command>
-                <CommandInput placeholder="Select new role..." />
-                <CommandList>
-                  <CommandEmpty>No roles found.</CommandEmpty>
-                  <CommandGroup className="p-1.5">
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Viewer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view and comment.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Developer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and edit.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Billing</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and manage billing.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Owner</p>
-                      <p className="text-sm text-muted-foreground">
-                        Admin-level access to all resources.
-                      </p>
-                    </CommandItem>
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/example/collapsible-demo.tsx b/apps/www/registry/default/example/collapsible-demo.tsx
deleted file mode 100644
index 345d54adc67..00000000000
--- a/apps/www/registry/default/example/collapsible-demo.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronsUpDown, Plus, X } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/default/ui/collapsible"
-
-export default function CollapsibleDemo() {
-  const [isOpen, setIsOpen] = React.useState(false)
-
-  return (
-    <Collapsible
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      className="w-[350px] space-y-2"
-    >
-      <div className="flex items-center justify-between space-x-4 px-4">
-        <h4 className="text-sm font-semibold">
-          @peduarte starred 3 repositories
-        </h4>
-        <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="sm" className="w-9 p-0">
-            <ChevronsUpDown className="h-4 w-4" />
-            <span className="sr-only">Toggle</span>
-          </Button>
-        </CollapsibleTrigger>
-      </div>
-      <div className="rounded-md border px-4 py-3 font-mono text-sm">
-        @radix-ui/primitives
-      </div>
-      <CollapsibleContent className="space-y-2">
-        <div className="rounded-md border px-4 py-3 font-mono text-sm">
-          @radix-ui/colors
-        </div>
-        <div className="rounded-md border px-4 py-3 font-mono text-sm">
-          @stitches/react
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  )
-}
diff --git a/apps/www/registry/default/example/combobox-demo.tsx b/apps/www/registry/default/example/combobox-demo.tsx
deleted file mode 100644
index 7c988850e61..00000000000
--- a/apps/www/registry/default/example/combobox-demo.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Check, ChevronsUpDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/default/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-
-const frameworks = [
-  {
-    value: "next.js",
-    label: "Next.js",
-  },
-  {
-    value: "sveltekit",
-    label: "SvelteKit",
-  },
-  {
-    value: "nuxt.js",
-    label: "Nuxt.js",
-  },
-  {
-    value: "remix",
-    label: "Remix",
-  },
-  {
-    value: "astro",
-    label: "Astro",
-  },
-]
-
-export default function ComboboxDemo() {
-  const [open, setOpen] = React.useState(false)
-  const [value, setValue] = React.useState("")
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-[200px] justify-between"
-        >
-          {value
-            ? frameworks.find((framework) => framework.value === value)?.label
-            : "Select framework..."}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandInput placeholder="Search framework..." />
-          <CommandList>
-            <CommandEmpty>No framework found.</CommandEmpty>
-            <CommandGroup>
-              {frameworks.map((framework) => (
-                <CommandItem
-                  key={framework.value}
-                  value={framework.value}
-                  onSelect={(currentValue) => {
-                    setValue(currentValue === value ? "" : currentValue)
-                    setOpen(false)
-                  }}
-                >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      value === framework.value ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                  {framework.label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/www/registry/default/example/combobox-dropdown-menu.tsx b/apps/www/registry/default/example/combobox-dropdown-menu.tsx
deleted file mode 100644
index de1a35afba8..00000000000
--- a/apps/www/registry/default/example/combobox-dropdown-menu.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Calendar, MoreHorizontal, Tags, Trash, User } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/default/ui/command"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-const labels = [
-  "feature",
-  "bug",
-  "enhancement",
-  "documentation",
-  "design",
-  "question",
-  "maintenance",
-]
-
-export default function ComboboxDropdownMenu() {
-  const [label, setLabel] = React.useState("feature")
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
-      <p className="text-sm font-medium leading-none">
-        <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
-          {label}
-        </span>
-        <span className="text-muted-foreground">Create a new project</span>
-      </p>
-      <DropdownMenu open={open} onOpenChange={setOpen}>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm">
-            <MoreHorizontal />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-[200px]">
-          <DropdownMenuLabel>Actions</DropdownMenuLabel>
-          <DropdownMenuGroup>
-            <DropdownMenuItem>
-              <User className="mr-2 h-4 w-4" />
-              Assign to...
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <Calendar className="mr-2 h-4 w-4" />
-              Set due date...
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger>
-                <Tags className="mr-2 h-4 w-4" />
-                Apply label
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent className="p-0">
-                <Command>
-                  <CommandInput
-                    placeholder="Filter label..."
-                    autoFocus={true}
-                  />
-                  <CommandList>
-                    <CommandEmpty>No label found.</CommandEmpty>
-                    <CommandGroup>
-                      {labels.map((label) => (
-                        <CommandItem
-                          key={label}
-                          value={label}
-                          onSelect={(value) => {
-                            setLabel(value)
-                            setOpen(false)
-                          }}
-                        >
-                          {label}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem className="text-red-600">
-              <Trash className="mr-2 h-4 w-4" />
-              Delete
-              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/example/combobox-form.tsx b/apps/www/registry/default/example/combobox-form.tsx
deleted file mode 100644
index c1cc6f03218..00000000000
--- a/apps/www/registry/default/example/combobox-form.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { Check, ChevronsUpDown } from "lucide-react"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { cn } from "@/lib/utils"
-import { toast } from "@/registry/default/hooks/use-toast"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/default/ui/command"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/default/ui/form"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-
-const languages = [
-  { label: "English", value: "en" },
-  { label: "French", value: "fr" },
-  { label: "German", value: "de" },
-  { label: "Spanish", value: "es" },
-  { label: "Portuguese", value: "pt" },
-  { label: "Russian", value: "ru" },
-  { label: "Japanese", value: "ja" },
-  { label: "Korean", value: "ko" },
-  { label: "Chinese", value: "zh" },
-] as const
-
-const FormSchema = z.object({
-  language: z.string({
-    required_error: "Please select a language.",
-  }),
-})
-
-export default function ComboboxForm() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-        <FormField
-          control={form.control}
-          name="language"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Language</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        "w-[200px] justify-between",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value
-                        ? languages.find(
-                            (language) => language.value === field.value
-                          )?.label
-                        : "Select language"}
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0">
-                  <Command>
-                    <CommandInput placeholder="Search language..." />
-                    <CommandList>
-                      <CommandEmpty>No language found.</CommandEmpty>
-                      <CommandGroup>
-                        {languages.map((language) => (
-                          <CommandItem
-                            value={language.label}
-                            key={language.value}
-                            onSelect={() => {
-                              form.setValue("language", language.value)
-                            }}
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-4 w-4",
-                                language.value === field.value
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            />
-                            {language.label}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-              <FormDescription>
-                This is the language that will be used in the dashboard.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
diff --git a/apps/www/registry/default/example/command-demo.tsx b/apps/www/registry/default/example/command-demo.tsx
deleted file mode 100644
index 8b8b50c86b1..00000000000
--- a/apps/www/registry/default/example/command-demo.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
-  Calculator,
-  Calendar,
-  CreditCard,
-  Settings,
-  Smile,
-  User,
-} from "lucide-react"
-
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "@/registry/default/ui/command"
-
-export default function CommandDemo() {
-  return (
-    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
-      <CommandInput placeholder="Type a command or search..." />
-      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
-        <CommandGroup heading="Suggestions">
-          <CommandItem>
-            <Calendar className="mr-2 h-4 w-4" />
-            <span>Calendar</span>
-          </CommandItem>
-          <CommandItem>
-            <Smile className="mr-2 h-4 w-4" />
-            <span>Search Emoji</span>
-          </CommandItem>
-          <CommandItem disabled>
-            <Calculator className="mr-2 h-4 w-4" />
-            <span>Calculator</span>
-          </CommandItem>
-        </CommandGroup>
-        <CommandSeparator />
-        <CommandGroup heading="Settings">
-          <CommandItem>
-            <User className="mr-2 h-4 w-4" />
-            <span>Profile</span>
-            <CommandShortcut>⌘P</CommandShortcut>
-          </CommandItem>
-          <CommandItem>
-            <CreditCard className="mr-2 h-4 w-4" />
-            <span>Billing</span>
-            <CommandShortcut>⌘B</CommandShortcut>
-          </CommandItem>
-          <CommandItem>
-            <Settings className="mr-2 h-4 w-4" />
-            <span>Settings</span>
-            <CommandShortcut>⌘S</CommandShortcut>
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  )
-}
diff --git a/apps/www/registry/default/example/command-dialog.tsx b/apps/www/registry/default/example/command-dialog.tsx
deleted file mode 100644
index 64c35c7166e..00000000000
--- a/apps/www/registry/default/example/command-dialog.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  Calculator,
-  Calendar,
-  CreditCard,
-  Settings,
-  Smile,
-  User,
-} from "lucide-react"
-
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "@/registry/default/ui/command"
-
-export default function CommandDialogDemo() {
-  const [open, setOpen] = React.useState(false)
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => document.removeEventListener("keydown", down)
-  }, [])
-
-  return (
-    <>
-      <p className="text-sm text-muted-foreground">
-        Press{" "}
-        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-          <span className="text-xs">⌘</span>J
-        </kbd>
-      </p>
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem>
-              <Calendar className="mr-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandItem>
-            <CommandItem>
-              <Smile className="mr-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandItem>
-            <CommandItem>
-              <Calculator className="mr-2 h-4 w-4" />
-              <span>Calculator</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading="Settings">
-            <CommandItem>
-              <User className="mr-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandShortcut>⌘P</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <CreditCard className="mr-2 h-4 w-4" />
-              <span>Billing</span>
-              <CommandShortcut>⌘B</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <Settings className="mr-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandShortcut>⌘S</CommandShortcut>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
-    </>
-  )
-}
diff --git a/apps/www/registry/default/example/data-table-demo.tsx b/apps/www/registry/default/example/data-table-demo.tsx
deleted file mode 100644
index f5fd232617a..00000000000
--- a/apps/www/registry/default/example/data-table-demo.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import { Checkbox } from "@/registry/default/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-
-const data: Payment[] = [
-  {
-    id: "m5gr84i9",
-    amount: 316,
-    status: "success",
-    email: "ken99@yahoo.com",
-  },
-  {
-    id: "3u1reuv4",
-    amount: 242,
-    status: "success",
-    email: "Abe45@gmail.com",
-  },
-  {
-    id: "derv1ws0",
-    amount: 837,
-    status: "processing",
-    email: "Monserrat44@gmail.com",
-  },
-  {
-    id: "5kma53ae",
-    amount: 874,
-    status: "success",
-    email: "Silas22@gmail.com",
-  },
-  {
-    id: "bhqecj4p",
-    amount: 721,
-    status: "failed",
-    email: "carmella@hotmail.com",
-  },
-]
-
-export type Payment = {
-  id: string
-  amount: number
-  status: "pending" | "processing" | "success" | "failed"
-  email: string
-}
-
-export const columns: ColumnDef<Payment>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => (
-      <div className="capitalize">{row.getValue("status")}</div>
-    ),
-  },
-  {
-    accessorKey: "email",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Email
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
-      )
-    },
-    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue("amount"))
-
-      // Format the amount as a dollar amount
-      const formatted = new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-      }).format(amount)
-
-      return <div className="text-right font-medium">{formatted}</div>
-    },
-  },
-  {
-    id: "actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      const payment = row.original
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(payment.id)}
-            >
-              Copy payment ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>View customer</DropdownMenuItem>
-            <DropdownMenuItem>View payment details</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )
-    },
-  },
-]
-
-export default function DataTableDemo() {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  })
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4">
-        <Input
-          placeholder="Filter emails..."
-          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
-          onChange={(event) =>
-            table.getColumn("email")?.setFilterValue(event.target.value)
-          }
-          className="max-w-sm"
-        />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="ml-auto">
-              Columns <ChevronDown className="ml-2 h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {table
-              .getAllColumns()
-              .filter((column) => column.getCanHide())
-              .map((column) => {
-                return (
-                  <DropdownMenuCheckboxItem
-                    key={column.id}
-                    className="capitalize"
-                    checked={column.getIsVisible()}
-                    onCheckedChange={(value) =>
-                      column.toggleVisibility(!!value)
-                    }
-                  >
-                    {column.id}
-                  </DropdownMenuCheckboxItem>
-                )
-              })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() && "selected"}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <div className="flex items-center justify-end space-x-2 py-4">
-        <div className="flex-1 text-sm text-muted-foreground">
-          {table.getFilteredSelectedRowModel().rows.length} of{" "}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
-        </div>
-        <div className="space-x-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            Previous
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            Next
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/example/date-picker-demo.tsx b/apps/www/registry/default/example/date-picker-demo.tsx
deleted file mode 100644
index d34cbe67763..00000000000
--- a/apps/www/registry/default/example/date-picker-demo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { format } from "date-fns"
-import { Calendar as CalendarIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import { Calendar } from "@/registry/default/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-
-export default function DatePickerDemo() {
-  const [date, setDate] = React.useState<Date>()
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          className={cn(
-            "w-[280px] justify-start text-left font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          {date ? format(date, "PPP") : <span>Pick a date</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0">
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          initialFocus
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/www/registry/default/example/date-picker-with-presets.tsx b/apps/www/registry/default/example/date-picker-with-presets.tsx
deleted file mode 100644
index 1e5cd1605a2..00000000000
--- a/apps/www/registry/default/example/date-picker-with-presets.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { addDays, format } from "date-fns"
-import { Calendar as CalendarIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import { Calendar } from "@/registry/default/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-
-export default function DatePickerWithPresets() {
-  const [date, setDate] = React.useState<Date>()
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          className={cn(
-            "w-[280px] justify-start text-left font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          {date ? format(date, "PPP") : <span>Pick a date</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="flex w-auto flex-col space-y-2 p-2">
-        <Select
-          onValueChange={(value) =>
-            setDate(addDays(new Date(), parseInt(value)))
-          }
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="Select" />
-          </SelectTrigger>
-          <SelectContent position="popper">
-            <SelectItem value="0">Today</SelectItem>
-            <SelectItem value="1">Tomorrow</SelectItem>
-            <SelectItem value="3">In 3 days</SelectItem>
-            <SelectItem value="7">In a week</SelectItem>
-          </SelectContent>
-        </Select>
-        <div className="rounded-md border">
-          <Calendar mode="single" selected={date} onSelect={setDate} />
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/www/registry/default/example/date-picker-with-range.tsx b/apps/www/registry/default/example/date-picker-with-range.tsx
deleted file mode 100644
index 4d88bcf0834..00000000000
--- a/apps/www/registry/default/example/date-picker-with-range.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { addDays, format } from "date-fns"
-import { Calendar as CalendarIcon } from "lucide-react"
-import { DateRange } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import { Calendar } from "@/registry/default/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-
-export default function DatePickerWithRange({
-  className,
-}: React.HTMLAttributes<HTMLDivElement>) {
-  const [date, setDate] = React.useState<DateRange | undefined>({
-    from: new Date(2022, 0, 20),
-    to: addDays(new Date(2022, 0, 20), 20),
-  })
-
-  return (
-    <div className={cn("grid gap-2", className)}>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            id="date"
-            variant={"outline"}
-            className={cn(
-              "w-[300px] justify-start text-left font-normal",
-              !date && "text-muted-foreground"
-            )}
-          >
-            <CalendarIcon className="mr-2 h-4 w-4" />
-            {date?.from ? (
-              date.to ? (
-                <>
-                  {format(date.from, "LLL dd, y")} -{" "}
-                  {format(date.to, "LLL dd, y")}
-                </>
-              ) : (
-                format(date.from, "LLL dd, y")
-              )
-            ) : (
-              <span>Pick a date</span>
-            )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
-          <Calendar
-            initialFocus
-            mode="range"
-            defaultMonth={date?.from}
-            selected={date}
-            onSelect={setDate}
-            numberOfMonths={2}
-          />
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/example/dialog-close-button.tsx b/apps/www/registry/default/example/dialog-close-button.tsx
deleted file mode 100644
index 826d0661328..00000000000
--- a/apps/www/registry/default/example/dialog-close-button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Copy } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/default/ui/dialog"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-
-export default function DialogCloseButton() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Share</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Share link</DialogTitle>
-          <DialogDescription>
-            Anyone who has this link will be able to view this.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex items-center space-x-2">
-          <div className="grid flex-1 gap-2">
-            <Label htmlFor="link" className="sr-only">
-              Link
-            </Label>
-            <Input
-              id="link"
-              defaultValue="https://ui.shadcn.com/docs/installation"
-              readOnly
-            />
-          </div>
-          <Button type="submit" size="sm" className="px-3">
-            <span className="sr-only">Copy</span>
-            <Copy className="h-4 w-4" />
-          </Button>
-        </div>
-        <DialogFooter className="sm:justify-start">
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/www/registry/default/example/drawer-demo.tsx b/apps/www/registry/default/example/drawer-demo.tsx
deleted file mode 100644
index 2c2038474f2..00000000000
--- a/apps/www/registry/default/example/drawer-demo.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from "react"
-import { Minus, Plus } from "lucide-react"
-import { Bar, BarChart, ResponsiveContainer } from "recharts"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/default/ui/drawer"
-
-const data = [
-  {
-    goal: 400,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 239,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 349,
-  },
-]
-
-export default function DrawerDemo() {
-  const [goal, setGoal] = React.useState(350)
-
-  function onClick(adjustment: number) {
-    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
-  }
-
-  return (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button variant="outline">Open Drawer</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <div className="mx-auto w-full max-w-sm">
-          <DrawerHeader>
-            <DrawerTitle>Move Goal</DrawerTitle>
-            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-          </DrawerHeader>
-          <div className="p-4 pb-0">
-            <div className="flex items-center justify-center space-x-2">
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-8 w-8 shrink-0 rounded-full"
-                onClick={() => onClick(-10)}
-                disabled={goal <= 200}
-              >
-                <Minus className="h-4 w-4" />
-                <span className="sr-only">Decrease</span>
-              </Button>
-              <div className="flex-1 text-center">
-                <div className="text-7xl font-bold tracking-tighter">
-                  {goal}
-                </div>
-                <div className="text-[0.70rem] uppercase text-muted-foreground">
-                  Calories/day
-                </div>
-              </div>
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-8 w-8 shrink-0 rounded-full"
-                onClick={() => onClick(10)}
-                disabled={goal >= 400}
-              >
-                <Plus className="h-4 w-4" />
-                <span className="sr-only">Increase</span>
-              </Button>
-            </div>
-            <div className="mt-3 h-[120px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={data}>
-                  <Bar
-                    dataKey="goal"
-                    style={
-                      {
-                        fill: "hsl(var(--foreground))",
-                        opacity: 0.9,
-                      } as React.CSSProperties
-                    }
-                  />
-                </BarChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-          <DrawerFooter>
-            <Button>Submit</Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  )
-}
diff --git a/apps/www/registry/default/example/dropdown-menu-demo.tsx b/apps/www/registry/default/example/dropdown-menu-demo.tsx
deleted file mode 100644
index 79b0895942a..00000000000
--- a/apps/www/registry/default/example/dropdown-menu-demo.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import {
-  Cloud,
-  CreditCard,
-  Github,
-  Keyboard,
-  LifeBuoy,
-  LogOut,
-  Mail,
-  MessageSquare,
-  Plus,
-  PlusCircle,
-  Settings,
-  User,
-  UserPlus,
-  Users,
-} from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-export default function DropdownMenuDemo() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <User className="mr-2 h-4 w-4" />
-            <span>Profile</span>
-            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <CreditCard className="mr-2 h-4 w-4" />
-            <span>Billing</span>
-            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <Settings className="mr-2 h-4 w-4" />
-            <span>Settings</span>
-            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <Keyboard className="mr-2 h-4 w-4" />
-            <span>Keyboard shortcuts</span>
-            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <Users className="mr-2 h-4 w-4" />
-            <span>Team</span>
-          </DropdownMenuItem>
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>
-              <UserPlus className="mr-2 h-4 w-4" />
-              <span>Invite users</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem>
-                  <Mail className="mr-2 h-4 w-4" />
-                  <span>Email</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <MessageSquare className="mr-2 h-4 w-4" />
-                  <span>Message</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>
-                  <PlusCircle className="mr-2 h-4 w-4" />
-                  <span>More...</span>
-                </DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          <DropdownMenuItem>
-            <Plus className="mr-2 h-4 w-4" />
-            <span>New Team</span>
-            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <Github className="mr-2 h-4 w-4" />
-          <span>GitHub</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <LifeBuoy className="mr-2 h-4 w-4" />
-          <span>Support</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem disabled>
-          <Cloud className="mr-2 h-4 w-4" />
-          <span>API</span>
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <LogOut className="mr-2 h-4 w-4" />
-          <span>Log out</span>
-          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/apps/www/registry/default/example/sonner-demo.tsx b/apps/www/registry/default/example/sonner-demo.tsx
deleted file mode 100644
index 1f61bdf185f..00000000000
--- a/apps/www/registry/default/example/sonner-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { toast } from "sonner"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function SonnerDemo() {
-  return (
-    <Button
-      variant="outline"
-      onClick={() =>
-        toast("Event has been created", {
-          description: "Sunday, December 03, 2023 at 9:00 AM",
-          action: {
-            label: "Undo",
-            onClick: () => console.log("Undo"),
-          },
-        })
-      }
-    >
-      Show Toast
-    </Button>
-  )
-}
diff --git a/apps/www/registry/default/example/toggle-with-text.tsx b/apps/www/registry/default/example/toggle-with-text.tsx
deleted file mode 100644
index dcca4113851..00000000000
--- a/apps/www/registry/default/example/toggle-with-text.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Italic } from "lucide-react"
-
-import { Toggle } from "@/registry/default/ui/toggle"
-
-export default function ToggleWithText() {
-  return (
-    <Toggle aria-label="Toggle italic">
-      <Italic className="mr-2 h-4 w-4" />
-      Italic
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/default/example/accordion-demo.tsx b/apps/www/registry/default/examples/accordion-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/accordion-demo.tsx
rename to apps/www/registry/default/examples/accordion-demo.tsx
diff --git a/apps/www/registry/default/example/alert-demo.tsx b/apps/www/registry/default/examples/alert-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/alert-demo.tsx
rename to apps/www/registry/default/examples/alert-demo.tsx
diff --git a/apps/www/registry/default/example/alert-destructive.tsx b/apps/www/registry/default/examples/alert-destructive.tsx
similarity index 100%
rename from apps/www/registry/default/example/alert-destructive.tsx
rename to apps/www/registry/default/examples/alert-destructive.tsx
diff --git a/apps/www/registry/default/example/alert-dialog-demo.tsx b/apps/www/registry/default/examples/alert-dialog-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/alert-dialog-demo.tsx
rename to apps/www/registry/default/examples/alert-dialog-demo.tsx
diff --git a/apps/www/registry/default/example/aspect-ratio-demo.tsx b/apps/www/registry/default/examples/aspect-ratio-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/aspect-ratio-demo.tsx
rename to apps/www/registry/default/examples/aspect-ratio-demo.tsx
diff --git a/apps/www/registry/default/example/avatar-demo.tsx b/apps/www/registry/default/examples/avatar-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/avatar-demo.tsx
rename to apps/www/registry/default/examples/avatar-demo.tsx
diff --git a/apps/www/registry/default/example/badge-demo.tsx b/apps/www/registry/default/examples/badge-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/badge-demo.tsx
rename to apps/www/registry/default/examples/badge-demo.tsx
diff --git a/apps/www/registry/default/example/badge-destructive.tsx b/apps/www/registry/default/examples/badge-destructive.tsx
similarity index 100%
rename from apps/www/registry/default/example/badge-destructive.tsx
rename to apps/www/registry/default/examples/badge-destructive.tsx
diff --git a/apps/www/registry/default/example/badge-outline.tsx b/apps/www/registry/default/examples/badge-outline.tsx
similarity index 100%
rename from apps/www/registry/default/example/badge-outline.tsx
rename to apps/www/registry/default/examples/badge-outline.tsx
diff --git a/apps/www/registry/default/example/badge-secondary.tsx b/apps/www/registry/default/examples/badge-secondary.tsx
similarity index 100%
rename from apps/www/registry/default/example/badge-secondary.tsx
rename to apps/www/registry/default/examples/badge-secondary.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-demo.tsx b/apps/www/registry/default/examples/breadcrumb-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-demo.tsx
rename to apps/www/registry/default/examples/breadcrumb-demo.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-dropdown.tsx b/apps/www/registry/default/examples/breadcrumb-dropdown.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-dropdown.tsx
rename to apps/www/registry/default/examples/breadcrumb-dropdown.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-ellipsis.tsx b/apps/www/registry/default/examples/breadcrumb-ellipsis.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-ellipsis.tsx
rename to apps/www/registry/default/examples/breadcrumb-ellipsis.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-link.tsx b/apps/www/registry/default/examples/breadcrumb-link.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-link.tsx
rename to apps/www/registry/default/examples/breadcrumb-link.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-responsive.tsx b/apps/www/registry/default/examples/breadcrumb-responsive.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-responsive.tsx
rename to apps/www/registry/default/examples/breadcrumb-responsive.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-separator.tsx b/apps/www/registry/default/examples/breadcrumb-separator.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-separator.tsx
rename to apps/www/registry/default/examples/breadcrumb-separator.tsx
diff --git a/apps/www/registry/default/example/button-as-child.tsx b/apps/www/registry/default/examples/button-as-child.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-as-child.tsx
rename to apps/www/registry/default/examples/button-as-child.tsx
diff --git a/apps/www/registry/default/example/button-demo.tsx b/apps/www/registry/default/examples/button-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-demo.tsx
rename to apps/www/registry/default/examples/button-demo.tsx
diff --git a/apps/www/registry/default/example/button-destructive.tsx b/apps/www/registry/default/examples/button-destructive.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-destructive.tsx
rename to apps/www/registry/default/examples/button-destructive.tsx
diff --git a/apps/www/registry/default/example/button-ghost.tsx b/apps/www/registry/default/examples/button-ghost.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-ghost.tsx
rename to apps/www/registry/default/examples/button-ghost.tsx
diff --git a/apps/www/registry/default/examples/button-icon.tsx b/apps/www/registry/default/examples/button-icon.tsx
new file mode 100644
index 00000000000..6b7a115d050
--- /dev/null
+++ b/apps/www/registry/default/examples/button-icon.tsx
@@ -0,0 +1,11 @@
+import { ChevronRight } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+
+export default function ButtonIcon() {
+  return (
+    <Button variant="outline" size="icon">
+      <ChevronRight />
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/example/button-link.tsx b/apps/www/registry/default/examples/button-link.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-link.tsx
rename to apps/www/registry/default/examples/button-link.tsx
diff --git a/apps/www/registry/default/examples/button-loading.tsx b/apps/www/registry/default/examples/button-loading.tsx
new file mode 100644
index 00000000000..7d459f01309
--- /dev/null
+++ b/apps/www/registry/default/examples/button-loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+
+export default function ButtonLoading() {
+  return (
+    <Button disabled>
+      <Loader2 className="animate-spin" />
+      Please wait
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/example/button-outline.tsx b/apps/www/registry/default/examples/button-outline.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-outline.tsx
rename to apps/www/registry/default/examples/button-outline.tsx
diff --git a/apps/www/registry/default/example/button-secondary.tsx b/apps/www/registry/default/examples/button-secondary.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-secondary.tsx
rename to apps/www/registry/default/examples/button-secondary.tsx
diff --git a/apps/www/registry/default/examples/button-with-icon.tsx b/apps/www/registry/default/examples/button-with-icon.tsx
new file mode 100644
index 00000000000..86b31786b3d
--- /dev/null
+++ b/apps/www/registry/default/examples/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { Mail } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+
+export default function ButtonWithIcon() {
+  return (
+    <Button>
+      <Mail /> Login with Email
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/example/calendar-demo.tsx b/apps/www/registry/default/examples/calendar-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/calendar-demo.tsx
rename to apps/www/registry/default/examples/calendar-demo.tsx
diff --git a/apps/www/registry/default/example/calendar-form.tsx b/apps/www/registry/default/examples/calendar-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/calendar-form.tsx
rename to apps/www/registry/default/examples/calendar-form.tsx
diff --git a/apps/www/registry/default/example/calendar-react-hook-form.tsx b/apps/www/registry/default/examples/calendar-react-hook-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/calendar-react-hook-form.tsx
rename to apps/www/registry/default/examples/calendar-react-hook-form.tsx
diff --git a/apps/www/registry/default/examples/card-demo.tsx b/apps/www/registry/default/examples/card-demo.tsx
new file mode 100644
index 00000000000..72758a6ae5a
--- /dev/null
+++ b/apps/www/registry/default/examples/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellRing, Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { Switch } from "@/registry/default/ui/switch"
+
+const notifications = [
+  {
+    title: "Your call has been confirmed.",
+    description: "1 hour ago",
+  },
+  {
+    title: "You have a new message!",
+    description: "1 hour ago",
+  },
+  {
+    title: "Your subscription is expiring soon!",
+    description: "2 hours ago",
+  },
+]
+
+type CardProps = React.ComponentProps<typeof Card>
+
+export default function CardDemo({ className, ...props }: CardProps) {
+  return (
+    <Card className={cn("w-[380px]", className)} {...props}>
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>You have 3 unread messages.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className=" flex items-center space-x-4 rounded-md border p-4">
+          <BellRing />
+          <div className="flex-1 space-y-1">
+            <p className="text-sm font-medium leading-none">
+              Push Notifications
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Send notifications to device.
+            </p>
+          </div>
+          <Switch />
+        </div>
+        <div>
+          {notifications.map((notification, index) => (
+            <div
+              key={index}
+              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+            >
+              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+              <div className="space-y-1">
+                <p className="text-sm font-medium leading-none">
+                  {notification.title}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {notification.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">
+          <Check /> Mark all as read
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/example/card-with-form.tsx b/apps/www/registry/default/examples/card-with-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/card-with-form.tsx
rename to apps/www/registry/default/examples/card-with-form.tsx
diff --git a/apps/www/registry/default/example/carousel-api.tsx b/apps/www/registry/default/examples/carousel-api.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-api.tsx
rename to apps/www/registry/default/examples/carousel-api.tsx
diff --git a/apps/www/registry/default/example/carousel-demo.tsx b/apps/www/registry/default/examples/carousel-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-demo.tsx
rename to apps/www/registry/default/examples/carousel-demo.tsx
diff --git a/apps/www/registry/default/example/carousel-orientation.tsx b/apps/www/registry/default/examples/carousel-orientation.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-orientation.tsx
rename to apps/www/registry/default/examples/carousel-orientation.tsx
diff --git a/apps/www/registry/default/example/carousel-plugin.tsx b/apps/www/registry/default/examples/carousel-plugin.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-plugin.tsx
rename to apps/www/registry/default/examples/carousel-plugin.tsx
diff --git a/apps/www/registry/default/example/carousel-size.tsx b/apps/www/registry/default/examples/carousel-size.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-size.tsx
rename to apps/www/registry/default/examples/carousel-size.tsx
diff --git a/apps/www/registry/default/example/carousel-spacing.tsx b/apps/www/registry/default/examples/carousel-spacing.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-spacing.tsx
rename to apps/www/registry/default/examples/carousel-spacing.tsx
diff --git a/apps/www/registry/default/example/chart-bar-demo-axis.tsx b/apps/www/registry/default/examples/chart-bar-demo-axis.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-bar-demo-axis.tsx
rename to apps/www/registry/default/examples/chart-bar-demo-axis.tsx
diff --git a/apps/www/registry/default/example/chart-bar-demo-grid.tsx b/apps/www/registry/default/examples/chart-bar-demo-grid.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-bar-demo-grid.tsx
rename to apps/www/registry/default/examples/chart-bar-demo-grid.tsx
diff --git a/apps/www/registry/default/example/chart-bar-demo-legend.tsx b/apps/www/registry/default/examples/chart-bar-demo-legend.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-bar-demo-legend.tsx
rename to apps/www/registry/default/examples/chart-bar-demo-legend.tsx
diff --git a/apps/www/registry/default/example/chart-bar-demo-tooltip.tsx b/apps/www/registry/default/examples/chart-bar-demo-tooltip.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-bar-demo-tooltip.tsx
rename to apps/www/registry/default/examples/chart-bar-demo-tooltip.tsx
diff --git a/apps/www/registry/default/example/chart-bar-demo.tsx b/apps/www/registry/default/examples/chart-bar-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-bar-demo.tsx
rename to apps/www/registry/default/examples/chart-bar-demo.tsx
diff --git a/apps/www/registry/default/example/chart-tooltip-demo.tsx b/apps/www/registry/default/examples/chart-tooltip-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-tooltip-demo.tsx
rename to apps/www/registry/default/examples/chart-tooltip-demo.tsx
diff --git a/apps/www/registry/default/example/checkbox-demo.tsx b/apps/www/registry/default/examples/checkbox-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/checkbox-demo.tsx
rename to apps/www/registry/default/examples/checkbox-demo.tsx
diff --git a/apps/www/registry/default/example/checkbox-disabled.tsx b/apps/www/registry/default/examples/checkbox-disabled.tsx
similarity index 100%
rename from apps/www/registry/default/example/checkbox-disabled.tsx
rename to apps/www/registry/default/examples/checkbox-disabled.tsx
diff --git a/apps/www/registry/default/example/checkbox-form-multiple.tsx b/apps/www/registry/default/examples/checkbox-form-multiple.tsx
similarity index 100%
rename from apps/www/registry/default/example/checkbox-form-multiple.tsx
rename to apps/www/registry/default/examples/checkbox-form-multiple.tsx
diff --git a/apps/www/registry/default/example/checkbox-form-single.tsx b/apps/www/registry/default/examples/checkbox-form-single.tsx
similarity index 100%
rename from apps/www/registry/default/example/checkbox-form-single.tsx
rename to apps/www/registry/default/examples/checkbox-form-single.tsx
diff --git a/apps/www/registry/default/example/checkbox-with-text.tsx b/apps/www/registry/default/examples/checkbox-with-text.tsx
similarity index 100%
rename from apps/www/registry/default/example/checkbox-with-text.tsx
rename to apps/www/registry/default/examples/checkbox-with-text.tsx
diff --git a/apps/www/registry/default/examples/collapsible-demo.tsx b/apps/www/registry/default/examples/collapsible-demo.tsx
new file mode 100644
index 00000000000..043e0ef76a9
--- /dev/null
+++ b/apps/www/registry/default/examples/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+
+export default function CollapsibleDemo() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="w-[350px] space-y-2"
+    >
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">
+          @peduarte starred 3 repositories
+        </h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm" className="w-9 p-0">
+            <ChevronsUpDown className="h-4 w-4" />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border px-4 py-3 font-mono text-sm">
+        @radix-ui/primitives
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-3 font-mono text-sm">
+          @radix-ui/colors
+        </div>
+        <div className="rounded-md border px-4 py-3 font-mono text-sm">
+          @stitches/react
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
diff --git a/apps/www/registry/default/examples/combobox-demo.tsx b/apps/www/registry/default/examples/combobox-demo.tsx
new file mode 100644
index 00000000000..edc8fca6c32
--- /dev/null
+++ b/apps/www/registry/default/examples/combobox-demo.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/default/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+const frameworks = [
+  {
+    value: "next.js",
+    label: "Next.js",
+  },
+  {
+    value: "sveltekit",
+    label: "SvelteKit",
+  },
+  {
+    value: "nuxt.js",
+    label: "Nuxt.js",
+  },
+  {
+    value: "remix",
+    label: "Remix",
+  },
+  {
+    value: "astro",
+    label: "Astro",
+  },
+]
+
+export default function ComboboxDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
+          <ChevronsUpDown className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  {framework.label}
+                  <Check
+                    className={cn(
+                      "ml-auto",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/default/examples/combobox-dropdown-menu.tsx b/apps/www/registry/default/examples/combobox-dropdown-menu.tsx
new file mode 100644
index 00000000000..52ade1b03e7
--- /dev/null
+++ b/apps/www/registry/default/examples/combobox-dropdown-menu.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import * as React from "react"
+import { Calendar, MoreHorizontal, Tags, Trash, User } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/default/ui/command"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+
+const labels = [
+  "feature",
+  "bug",
+  "enhancement",
+  "documentation",
+  "design",
+  "question",
+  "maintenance",
+]
+
+export default function ComboboxDropdownMenu() {
+  const [label, setLabel] = React.useState("feature")
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+      <p className="text-sm font-medium leading-none">
+        <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+          {label}
+        </span>
+        <span className="text-muted-foreground">Create a new project</span>
+      </p>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <MoreHorizontal />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[200px]">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <User />
+              Assign to...
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Calendar />
+              Set due date...
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <Tags />
+                Apply label
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="p-0">
+                <Command>
+                  <CommandInput
+                    placeholder="Filter label..."
+                    autoFocus={true}
+                  />
+                  <CommandList>
+                    <CommandEmpty>No label found.</CommandEmpty>
+                    <CommandGroup>
+                      {labels.map((label) => (
+                        <CommandItem
+                          key={label}
+                          value={label}
+                          onSelect={(value) => {
+                            setLabel(value)
+                            setOpen(false)
+                          }}
+                        >
+                          {label}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="text-red-600">
+              <Trash />
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/examples/combobox-form.tsx b/apps/www/registry/default/examples/combobox-form.tsx
new file mode 100644
index 00000000000..68216125361
--- /dev/null
+++ b/apps/www/registry/default/examples/combobox-form.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { toast } from "@/registry/default/hooks/use-toast"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/default/ui/command"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/default/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+const languages = [
+  { label: "English", value: "en" },
+  { label: "French", value: "fr" },
+  { label: "German", value: "de" },
+  { label: "Spanish", value: "es" },
+  { label: "Portuguese", value: "pt" },
+  { label: "Russian", value: "ru" },
+  { label: "Japanese", value: "ja" },
+  { label: "Korean", value: "ko" },
+  { label: "Chinese", value: "zh" },
+] as const
+
+const FormSchema = z.object({
+  language: z.string({
+    required_error: "Please select a language.",
+  }),
+})
+
+export default function ComboboxForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="language"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Language</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "w-[200px] justify-between",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value
+                        ? languages.find(
+                            (language) => language.value === field.value
+                          )?.label
+                        : "Select language"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-[200px] p-0">
+                  <Command>
+                    <CommandInput placeholder="Search language..." />
+                    <CommandList>
+                      <CommandEmpty>No language found.</CommandEmpty>
+                      <CommandGroup>
+                        {languages.map((language) => (
+                          <CommandItem
+                            value={language.label}
+                            key={language.value}
+                            onSelect={() => {
+                              form.setValue("language", language.value)
+                            }}
+                          >
+                            {language.label}
+                            <Check
+                              className={cn(
+                                "ml-auto",
+                                language.value === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                This is the language that will be used in the dashboard.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/registry/default/example/combobox-popover.tsx b/apps/www/registry/default/examples/combobox-popover.tsx
similarity index 100%
rename from apps/www/registry/default/example/combobox-popover.tsx
rename to apps/www/registry/default/examples/combobox-popover.tsx
diff --git a/apps/www/registry/default/example/combobox-responsive.tsx b/apps/www/registry/default/examples/combobox-responsive.tsx
similarity index 100%
rename from apps/www/registry/default/example/combobox-responsive.tsx
rename to apps/www/registry/default/examples/combobox-responsive.tsx
diff --git a/apps/www/registry/default/examples/command-demo.tsx b/apps/www/registry/default/examples/command-demo.tsx
new file mode 100644
index 00000000000..3dc6f1e4f43
--- /dev/null
+++ b/apps/www/registry/default/examples/command-demo.tsx
@@ -0,0 +1,62 @@
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/registry/default/ui/command"
+
+export default function CommandDemo() {
+  return (
+    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <Calendar />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <Smile />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem disabled>
+            <Calculator />
+            <span>Calculator</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <User />
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <CreditCard />
+            <span>Billing</span>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Settings />
+            <span>Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/apps/www/registry/default/examples/command-dialog.tsx b/apps/www/registry/default/examples/command-dialog.tsx
new file mode 100644
index 00000000000..d952cd79990
--- /dev/null
+++ b/apps/www/registry/default/examples/command-dialog.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react"
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/registry/default/ui/command"
+
+export default function CommandDialogDemo() {
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  return (
+    <>
+      <p className="text-sm text-muted-foreground">
+        Press{" "}
+        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+          <span className="text-xs">⌘</span>J
+        </kbd>
+      </p>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
+              <Calendar />
+              <span>Calendar</span>
+            </CommandItem>
+            <CommandItem>
+              <Smile />
+              <span>Search Emoji</span>
+            </CommandItem>
+            <CommandItem>
+              <Calculator />
+              <span>Calculator</span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem>
+              <User />
+              <span>Profile</span>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <CreditCard />
+              <span>Billing</span>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <Settings />
+              <span>Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}
diff --git a/apps/www/registry/default/example/context-menu-demo.tsx b/apps/www/registry/default/examples/context-menu-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/context-menu-demo.tsx
rename to apps/www/registry/default/examples/context-menu-demo.tsx
diff --git a/apps/www/registry/default/examples/data-table-demo.tsx b/apps/www/registry/default/examples/data-table-demo.tsx
new file mode 100644
index 00000000000..8de0e1b37dc
--- /dev/null
+++ b/apps/www/registry/default/examples/data-table-demo.tsx
@@ -0,0 +1,312 @@
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Checkbox } from "@/registry/default/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Input } from "@/registry/default/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/default/ui/table"
+
+const data: Payment[] = [
+  {
+    id: "m5gr84i9",
+    amount: 316,
+    status: "success",
+    email: "ken99@example.com",
+  },
+  {
+    id: "3u1reuv4",
+    amount: 242,
+    status: "success",
+    email: "Abe45@example.com",
+  },
+  {
+    id: "derv1ws0",
+    amount: 837,
+    status: "processing",
+    email: "Monserrat44@example.com",
+  },
+  {
+    id: "5kma53ae",
+    amount: 874,
+    status: "success",
+    email: "Silas22@example.com",
+  },
+  {
+    id: "bhqecj4p",
+    amount: 721,
+    status: "failed",
+    email: "carmella@example.com",
+  },
+]
+
+export type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <div className="capitalize">{row.getValue("status")}</div>
+    ),
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <ArrowUpDown />
+        </Button>
+      )
+    },
+    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
+  },
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"))
+
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount)
+
+      return <div className="text-right font-medium">{formatted}</div>
+    },
+  },
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(payment.id)}
+            >
+              Copy payment ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>View customer</DropdownMenuItem>
+            <DropdownMenuItem>View payment details</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]
+
+export default function DataTableDemo() {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center py-4">
+        <Input
+          placeholder="Filter emails..."
+          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Columns <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                )
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="overflow-hidden rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <div className="flex-1 text-sm text-muted-foreground">
+          {table.getFilteredSelectedRowModel().rows.length} of{" "}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </div>
+        <div className="space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/examples/date-picker-demo.tsx b/apps/www/registry/default/examples/date-picker-demo.tsx
new file mode 100644
index 00000000000..ff787b11093
--- /dev/null
+++ b/apps/www/registry/default/examples/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[280px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/default/example/date-picker-form.tsx b/apps/www/registry/default/examples/date-picker-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/date-picker-form.tsx
rename to apps/www/registry/default/examples/date-picker-form.tsx
diff --git a/apps/www/registry/default/examples/date-picker-with-presets.tsx b/apps/www/registry/default/examples/date-picker-with-presets.tsx
new file mode 100644
index 00000000000..ebd3aded98c
--- /dev/null
+++ b/apps/www/registry/default/examples/date-picker-with-presets.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+export default function DatePickerWithPresets() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[280px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="flex w-auto flex-col space-y-2 p-2">
+        <Select
+          onValueChange={(value) =>
+            setDate(addDays(new Date(), parseInt(value)))
+          }
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent position="popper">
+            <SelectItem value="0">Today</SelectItem>
+            <SelectItem value="1">Tomorrow</SelectItem>
+            <SelectItem value="3">In 3 days</SelectItem>
+            <SelectItem value="7">In a week</SelectItem>
+          </SelectContent>
+        </Select>
+        <div className="rounded-md border">
+          <Calendar mode="single" selected={date} onSelect={setDate} />
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/default/examples/date-picker-with-range.tsx b/apps/www/registry/default/examples/date-picker-with-range.tsx
new file mode 100644
index 00000000000..fadcd81ebfc
--- /dev/null
+++ b/apps/www/registry/default/examples/date-picker-with-range.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export default function DatePickerWithRange({
+  className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2022, 0, 20),
+    to: addDays(new Date(2022, 0, 20), 20),
+  })
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn(
+              "w-[300px] justify-start text-left font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "LLL dd, y")} -{" "}
+                  {format(date.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(date.from, "LLL dd, y")
+              )
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/examples/dialog-close-button.tsx b/apps/www/registry/default/examples/dialog-close-button.tsx
new file mode 100644
index 00000000000..b2f5726093d
--- /dev/null
+++ b/apps/www/registry/default/examples/dialog-close-button.tsx
@@ -0,0 +1,56 @@
+import { Copy } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/default/ui/dialog"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export default function DialogCloseButton() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Share</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share link</DialogTitle>
+          <DialogDescription>
+            Anyone who has this link will be able to view this.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center space-x-2">
+          <div className="grid flex-1 gap-2">
+            <Label htmlFor="link" className="sr-only">
+              Link
+            </Label>
+            <Input
+              id="link"
+              defaultValue="https://ui.shadcn.com/docs/installation"
+              readOnly
+            />
+          </div>
+          <Button type="submit" size="sm" className="px-3">
+            <span className="sr-only">Copy</span>
+            <Copy />
+          </Button>
+        </div>
+        <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/registry/default/example/dialog-demo.tsx b/apps/www/registry/default/examples/dialog-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/dialog-demo.tsx
rename to apps/www/registry/default/examples/dialog-demo.tsx
diff --git a/apps/www/registry/default/examples/drawer-demo.tsx b/apps/www/registry/default/examples/drawer-demo.tsx
new file mode 100644
index 00000000000..22827564540
--- /dev/null
+++ b/apps/www/registry/default/examples/drawer-demo.tsx
@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/default/ui/drawer"
+
+const data = [
+  {
+    goal: 400,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 239,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 349,
+  },
+]
+
+export default function DrawerDemo() {
+  const [goal, setGoal] = React.useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Move Goal</DrawerTitle>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 pb-0">
+            <div className="flex items-center justify-center space-x-2">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(-10)}
+                disabled={goal <= 200}
+              >
+                <Minus />
+                <span className="sr-only">Decrease</span>
+              </Button>
+              <div className="flex-1 text-center">
+                <div className="text-7xl font-bold tracking-tighter">
+                  {goal}
+                </div>
+                <div className="text-[0.70rem] uppercase text-muted-foreground">
+                  Calories/day
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(10)}
+                disabled={goal >= 400}
+              >
+                <Plus />
+                <span className="sr-only">Increase</span>
+              </Button>
+            </div>
+            <div className="mt-3 h-[120px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={data}>
+                  <Bar
+                    dataKey="goal"
+                    style={
+                      {
+                        fill: "hsl(var(--foreground))",
+                        opacity: 0.9,
+                      } as React.CSSProperties
+                    }
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/www/registry/default/example/drawer-dialog.tsx b/apps/www/registry/default/examples/drawer-dialog.tsx
similarity index 100%
rename from apps/www/registry/default/example/drawer-dialog.tsx
rename to apps/www/registry/default/examples/drawer-dialog.tsx
diff --git a/apps/www/registry/default/example/dropdown-menu-checkboxes.tsx b/apps/www/registry/default/examples/dropdown-menu-checkboxes.tsx
similarity index 100%
rename from apps/www/registry/default/example/dropdown-menu-checkboxes.tsx
rename to apps/www/registry/default/examples/dropdown-menu-checkboxes.tsx
diff --git a/apps/www/registry/default/examples/dropdown-menu-demo.tsx b/apps/www/registry/default/examples/dropdown-menu-demo.tsx
new file mode 100644
index 00000000000..d13ad9c0161
--- /dev/null
+++ b/apps/www/registry/default/examples/dropdown-menu-demo.tsx
@@ -0,0 +1,122 @@
+import {
+  Cloud,
+  CreditCard,
+  Github,
+  Keyboard,
+  LifeBuoy,
+  LogOut,
+  Mail,
+  MessageSquare,
+  Plus,
+  PlusCircle,
+  Settings,
+  User,
+  UserPlus,
+  Users,
+} from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+
+export default function DropdownMenuDemo() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <User />
+            <span>Profile</span>
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCard />
+            <span>Billing</span>
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings />
+            <span>Settings</span>
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Keyboard />
+            <span>Keyboard shortcuts</span>
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Users />
+            <span>Team</span>
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <UserPlus />
+              <span>Invite users</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>
+                  <Mail />
+                  <span>Email</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <MessageSquare />
+                  <span>Message</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <PlusCircle />
+                  <span>More...</span>
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            <Plus />
+            <span>New Team</span>
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Github />
+          <span>GitHub</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <LifeBuoy />
+          <span>Support</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem disabled>
+          <Cloud />
+          <span>API</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut />
+          <span>Log out</span>
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/www/registry/default/example/dropdown-menu-radio-group.tsx b/apps/www/registry/default/examples/dropdown-menu-radio-group.tsx
similarity index 100%
rename from apps/www/registry/default/example/dropdown-menu-radio-group.tsx
rename to apps/www/registry/default/examples/dropdown-menu-radio-group.tsx
diff --git a/apps/www/registry/default/example/hover-card-demo.tsx b/apps/www/registry/default/examples/hover-card-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/hover-card-demo.tsx
rename to apps/www/registry/default/examples/hover-card-demo.tsx
diff --git a/apps/www/registry/default/example/input-demo.tsx b/apps/www/registry/default/examples/input-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-demo.tsx
rename to apps/www/registry/default/examples/input-demo.tsx
diff --git a/apps/www/registry/default/example/input-disabled.tsx b/apps/www/registry/default/examples/input-disabled.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-disabled.tsx
rename to apps/www/registry/default/examples/input-disabled.tsx
diff --git a/apps/www/registry/default/example/input-file.tsx b/apps/www/registry/default/examples/input-file.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-file.tsx
rename to apps/www/registry/default/examples/input-file.tsx
diff --git a/apps/www/registry/default/example/input-form.tsx b/apps/www/registry/default/examples/input-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-form.tsx
rename to apps/www/registry/default/examples/input-form.tsx
diff --git a/apps/www/registry/default/example/input-otp-controlled.tsx b/apps/www/registry/default/examples/input-otp-controlled.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-otp-controlled.tsx
rename to apps/www/registry/default/examples/input-otp-controlled.tsx
diff --git a/apps/www/registry/default/example/input-otp-demo.tsx b/apps/www/registry/default/examples/input-otp-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-otp-demo.tsx
rename to apps/www/registry/default/examples/input-otp-demo.tsx
diff --git a/apps/www/registry/default/example/input-otp-form.tsx b/apps/www/registry/default/examples/input-otp-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-otp-form.tsx
rename to apps/www/registry/default/examples/input-otp-form.tsx
diff --git a/apps/www/registry/default/example/input-otp-pattern.tsx b/apps/www/registry/default/examples/input-otp-pattern.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-otp-pattern.tsx
rename to apps/www/registry/default/examples/input-otp-pattern.tsx
diff --git a/apps/www/registry/default/example/input-otp-separator.tsx b/apps/www/registry/default/examples/input-otp-separator.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-otp-separator.tsx
rename to apps/www/registry/default/examples/input-otp-separator.tsx
diff --git a/apps/www/registry/default/example/input-with-button.tsx b/apps/www/registry/default/examples/input-with-button.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-with-button.tsx
rename to apps/www/registry/default/examples/input-with-button.tsx
diff --git a/apps/www/registry/default/example/input-with-label.tsx b/apps/www/registry/default/examples/input-with-label.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-with-label.tsx
rename to apps/www/registry/default/examples/input-with-label.tsx
diff --git a/apps/www/registry/default/example/input-with-text.tsx b/apps/www/registry/default/examples/input-with-text.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-with-text.tsx
rename to apps/www/registry/default/examples/input-with-text.tsx
diff --git a/apps/www/registry/default/example/label-demo.tsx b/apps/www/registry/default/examples/label-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/label-demo.tsx
rename to apps/www/registry/default/examples/label-demo.tsx
diff --git a/apps/www/registry/default/example/menubar-demo.tsx b/apps/www/registry/default/examples/menubar-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/menubar-demo.tsx
rename to apps/www/registry/default/examples/menubar-demo.tsx
diff --git a/apps/www/registry/default/example/mode-toggle.tsx b/apps/www/registry/default/examples/mode-toggle.tsx
similarity index 100%
rename from apps/www/registry/default/example/mode-toggle.tsx
rename to apps/www/registry/default/examples/mode-toggle.tsx
diff --git a/apps/www/registry/default/example/navigation-menu-demo.tsx b/apps/www/registry/default/examples/navigation-menu-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/navigation-menu-demo.tsx
rename to apps/www/registry/default/examples/navigation-menu-demo.tsx
diff --git a/apps/www/registry/default/example/pagination-demo.tsx b/apps/www/registry/default/examples/pagination-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/pagination-demo.tsx
rename to apps/www/registry/default/examples/pagination-demo.tsx
diff --git a/apps/www/registry/default/example/popover-demo.tsx b/apps/www/registry/default/examples/popover-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/popover-demo.tsx
rename to apps/www/registry/default/examples/popover-demo.tsx
diff --git a/apps/www/registry/default/example/progress-demo.tsx b/apps/www/registry/default/examples/progress-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/progress-demo.tsx
rename to apps/www/registry/default/examples/progress-demo.tsx
diff --git a/apps/www/registry/default/example/radio-group-demo.tsx b/apps/www/registry/default/examples/radio-group-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/radio-group-demo.tsx
rename to apps/www/registry/default/examples/radio-group-demo.tsx
diff --git a/apps/www/registry/default/example/radio-group-form.tsx b/apps/www/registry/default/examples/radio-group-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/radio-group-form.tsx
rename to apps/www/registry/default/examples/radio-group-form.tsx
diff --git a/apps/www/registry/default/example/resizable-demo-with-handle.tsx b/apps/www/registry/default/examples/resizable-demo-with-handle.tsx
similarity index 100%
rename from apps/www/registry/default/example/resizable-demo-with-handle.tsx
rename to apps/www/registry/default/examples/resizable-demo-with-handle.tsx
diff --git a/apps/www/registry/default/example/resizable-demo.tsx b/apps/www/registry/default/examples/resizable-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/resizable-demo.tsx
rename to apps/www/registry/default/examples/resizable-demo.tsx
diff --git a/apps/www/registry/default/example/resizable-handle.tsx b/apps/www/registry/default/examples/resizable-handle.tsx
similarity index 100%
rename from apps/www/registry/default/example/resizable-handle.tsx
rename to apps/www/registry/default/examples/resizable-handle.tsx
diff --git a/apps/www/registry/default/example/resizable-vertical.tsx b/apps/www/registry/default/examples/resizable-vertical.tsx
similarity index 100%
rename from apps/www/registry/default/example/resizable-vertical.tsx
rename to apps/www/registry/default/examples/resizable-vertical.tsx
diff --git a/apps/www/registry/default/example/scroll-area-demo.tsx b/apps/www/registry/default/examples/scroll-area-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/scroll-area-demo.tsx
rename to apps/www/registry/default/examples/scroll-area-demo.tsx
diff --git a/apps/www/registry/default/example/scroll-area-horizontal-demo.tsx b/apps/www/registry/default/examples/scroll-area-horizontal-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/scroll-area-horizontal-demo.tsx
rename to apps/www/registry/default/examples/scroll-area-horizontal-demo.tsx
diff --git a/apps/www/registry/default/example/select-demo.tsx b/apps/www/registry/default/examples/select-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/select-demo.tsx
rename to apps/www/registry/default/examples/select-demo.tsx
diff --git a/apps/www/registry/default/example/select-form.tsx b/apps/www/registry/default/examples/select-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/select-form.tsx
rename to apps/www/registry/default/examples/select-form.tsx
diff --git a/apps/www/registry/default/example/select-scrollable.tsx b/apps/www/registry/default/examples/select-scrollable.tsx
similarity index 100%
rename from apps/www/registry/default/example/select-scrollable.tsx
rename to apps/www/registry/default/examples/select-scrollable.tsx
diff --git a/apps/www/registry/default/example/separator-demo.tsx b/apps/www/registry/default/examples/separator-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/separator-demo.tsx
rename to apps/www/registry/default/examples/separator-demo.tsx
diff --git a/apps/www/registry/default/example/sheet-demo.tsx b/apps/www/registry/default/examples/sheet-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/sheet-demo.tsx
rename to apps/www/registry/default/examples/sheet-demo.tsx
diff --git a/apps/www/registry/default/example/sheet-side.tsx b/apps/www/registry/default/examples/sheet-side.tsx
similarity index 100%
rename from apps/www/registry/default/example/sheet-side.tsx
rename to apps/www/registry/default/examples/sheet-side.tsx
diff --git a/apps/www/registry/default/example/skeleton-card.tsx b/apps/www/registry/default/examples/skeleton-card.tsx
similarity index 100%
rename from apps/www/registry/default/example/skeleton-card.tsx
rename to apps/www/registry/default/examples/skeleton-card.tsx
diff --git a/apps/www/registry/default/example/skeleton-demo.tsx b/apps/www/registry/default/examples/skeleton-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/skeleton-demo.tsx
rename to apps/www/registry/default/examples/skeleton-demo.tsx
diff --git a/apps/www/registry/default/example/slider-demo.tsx b/apps/www/registry/default/examples/slider-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/slider-demo.tsx
rename to apps/www/registry/default/examples/slider-demo.tsx
diff --git a/apps/www/registry/default/examples/sonner-demo.tsx b/apps/www/registry/default/examples/sonner-demo.tsx
new file mode 100644
index 00000000000..cba3b3aeec1
--- /dev/null
+++ b/apps/www/registry/default/examples/sonner-demo.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { toast } from "sonner"
+
+import { Button } from "@/registry/default/ui/button"
+
+export default function SonnerDemo() {
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast("Event has been created", {
+          description: "Sunday, December 03, 2023 at 9:00 AM",
+          action: {
+            label: "Undo",
+            onClick: () => console.log("Undo"),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/example/switch-demo.tsx b/apps/www/registry/default/examples/switch-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/switch-demo.tsx
rename to apps/www/registry/default/examples/switch-demo.tsx
diff --git a/apps/www/registry/default/example/switch-form.tsx b/apps/www/registry/default/examples/switch-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/switch-form.tsx
rename to apps/www/registry/default/examples/switch-form.tsx
diff --git a/apps/www/registry/default/example/table-demo.tsx b/apps/www/registry/default/examples/table-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/table-demo.tsx
rename to apps/www/registry/default/examples/table-demo.tsx
diff --git a/apps/www/registry/default/example/tabs-demo.tsx b/apps/www/registry/default/examples/tabs-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/tabs-demo.tsx
rename to apps/www/registry/default/examples/tabs-demo.tsx
diff --git a/apps/www/registry/default/example/textarea-demo.tsx b/apps/www/registry/default/examples/textarea-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-demo.tsx
rename to apps/www/registry/default/examples/textarea-demo.tsx
diff --git a/apps/www/registry/default/example/textarea-disabled.tsx b/apps/www/registry/default/examples/textarea-disabled.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-disabled.tsx
rename to apps/www/registry/default/examples/textarea-disabled.tsx
diff --git a/apps/www/registry/default/example/textarea-form.tsx b/apps/www/registry/default/examples/textarea-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-form.tsx
rename to apps/www/registry/default/examples/textarea-form.tsx
diff --git a/apps/www/registry/default/example/textarea-with-button.tsx b/apps/www/registry/default/examples/textarea-with-button.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-with-button.tsx
rename to apps/www/registry/default/examples/textarea-with-button.tsx
diff --git a/apps/www/registry/default/example/textarea-with-label.tsx b/apps/www/registry/default/examples/textarea-with-label.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-with-label.tsx
rename to apps/www/registry/default/examples/textarea-with-label.tsx
diff --git a/apps/www/registry/default/example/textarea-with-text.tsx b/apps/www/registry/default/examples/textarea-with-text.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-with-text.tsx
rename to apps/www/registry/default/examples/textarea-with-text.tsx
diff --git a/apps/www/registry/default/example/toast-demo.tsx b/apps/www/registry/default/examples/toast-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/toast-demo.tsx
rename to apps/www/registry/default/examples/toast-demo.tsx
diff --git a/apps/www/registry/default/example/toast-destructive.tsx b/apps/www/registry/default/examples/toast-destructive.tsx
similarity index 100%
rename from apps/www/registry/default/example/toast-destructive.tsx
rename to apps/www/registry/default/examples/toast-destructive.tsx
diff --git a/apps/www/registry/default/example/toast-simple.tsx b/apps/www/registry/default/examples/toast-simple.tsx
similarity index 100%
rename from apps/www/registry/default/example/toast-simple.tsx
rename to apps/www/registry/default/examples/toast-simple.tsx
diff --git a/apps/www/registry/default/example/toast-with-action.tsx b/apps/www/registry/default/examples/toast-with-action.tsx
similarity index 100%
rename from apps/www/registry/default/example/toast-with-action.tsx
rename to apps/www/registry/default/examples/toast-with-action.tsx
diff --git a/apps/www/registry/default/example/toast-with-title.tsx b/apps/www/registry/default/examples/toast-with-title.tsx
similarity index 100%
rename from apps/www/registry/default/example/toast-with-title.tsx
rename to apps/www/registry/default/examples/toast-with-title.tsx
diff --git a/apps/www/registry/default/example/toggle-demo.tsx b/apps/www/registry/default/examples/toggle-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-demo.tsx
rename to apps/www/registry/default/examples/toggle-demo.tsx
diff --git a/apps/www/registry/default/example/toggle-disabled.tsx b/apps/www/registry/default/examples/toggle-disabled.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-disabled.tsx
rename to apps/www/registry/default/examples/toggle-disabled.tsx
diff --git a/apps/www/registry/default/example/toggle-group-demo.tsx b/apps/www/registry/default/examples/toggle-group-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-demo.tsx
rename to apps/www/registry/default/examples/toggle-group-demo.tsx
diff --git a/apps/www/registry/default/example/toggle-group-disabled.tsx b/apps/www/registry/default/examples/toggle-group-disabled.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-disabled.tsx
rename to apps/www/registry/default/examples/toggle-group-disabled.tsx
diff --git a/apps/www/registry/default/example/toggle-group-lg.tsx b/apps/www/registry/default/examples/toggle-group-lg.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-lg.tsx
rename to apps/www/registry/default/examples/toggle-group-lg.tsx
diff --git a/apps/www/registry/default/example/toggle-group-outline.tsx b/apps/www/registry/default/examples/toggle-group-outline.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-outline.tsx
rename to apps/www/registry/default/examples/toggle-group-outline.tsx
diff --git a/apps/www/registry/default/example/toggle-group-single.tsx b/apps/www/registry/default/examples/toggle-group-single.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-single.tsx
rename to apps/www/registry/default/examples/toggle-group-single.tsx
diff --git a/apps/www/registry/default/example/toggle-group-sm.tsx b/apps/www/registry/default/examples/toggle-group-sm.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-sm.tsx
rename to apps/www/registry/default/examples/toggle-group-sm.tsx
diff --git a/apps/www/registry/default/example/toggle-lg.tsx b/apps/www/registry/default/examples/toggle-lg.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-lg.tsx
rename to apps/www/registry/default/examples/toggle-lg.tsx
diff --git a/apps/www/registry/default/example/toggle-outline.tsx b/apps/www/registry/default/examples/toggle-outline.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-outline.tsx
rename to apps/www/registry/default/examples/toggle-outline.tsx
diff --git a/apps/www/registry/default/example/toggle-sm.tsx b/apps/www/registry/default/examples/toggle-sm.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-sm.tsx
rename to apps/www/registry/default/examples/toggle-sm.tsx
diff --git a/apps/www/registry/default/examples/toggle-with-text.tsx b/apps/www/registry/default/examples/toggle-with-text.tsx
new file mode 100644
index 00000000000..43467f817cb
--- /dev/null
+++ b/apps/www/registry/default/examples/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/default/ui/toggle"
+
+export default function ToggleWithText() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Italic />
+      Italic
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/default/example/tooltip-demo.tsx b/apps/www/registry/default/examples/tooltip-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/tooltip-demo.tsx
rename to apps/www/registry/default/examples/tooltip-demo.tsx
diff --git a/apps/www/registry/default/example/typography-blockquote.tsx b/apps/www/registry/default/examples/typography-blockquote.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-blockquote.tsx
rename to apps/www/registry/default/examples/typography-blockquote.tsx
diff --git a/apps/www/registry/default/example/typography-demo.tsx b/apps/www/registry/default/examples/typography-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-demo.tsx
rename to apps/www/registry/default/examples/typography-demo.tsx
diff --git a/apps/www/registry/default/example/typography-h1.tsx b/apps/www/registry/default/examples/typography-h1.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-h1.tsx
rename to apps/www/registry/default/examples/typography-h1.tsx
diff --git a/apps/www/registry/new-york/example/typography-h2.tsx b/apps/www/registry/default/examples/typography-h2.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-h2.tsx
rename to apps/www/registry/default/examples/typography-h2.tsx
diff --git a/apps/www/registry/new-york/example/typography-h3.tsx b/apps/www/registry/default/examples/typography-h3.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-h3.tsx
rename to apps/www/registry/default/examples/typography-h3.tsx
diff --git a/apps/www/registry/new-york/example/typography-h4.tsx b/apps/www/registry/default/examples/typography-h4.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-h4.tsx
rename to apps/www/registry/default/examples/typography-h4.tsx
diff --git a/apps/www/registry/default/example/typography-inline-code.tsx b/apps/www/registry/default/examples/typography-inline-code.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-inline-code.tsx
rename to apps/www/registry/default/examples/typography-inline-code.tsx
diff --git a/apps/www/registry/new-york/example/typography-large.tsx b/apps/www/registry/default/examples/typography-large.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-large.tsx
rename to apps/www/registry/default/examples/typography-large.tsx
diff --git a/apps/www/registry/default/example/typography-lead.tsx b/apps/www/registry/default/examples/typography-lead.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-lead.tsx
rename to apps/www/registry/default/examples/typography-lead.tsx
diff --git a/apps/www/registry/new-york/example/typography-list.tsx b/apps/www/registry/default/examples/typography-list.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-list.tsx
rename to apps/www/registry/default/examples/typography-list.tsx
diff --git a/apps/www/registry/default/example/typography-muted.tsx b/apps/www/registry/default/examples/typography-muted.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-muted.tsx
rename to apps/www/registry/default/examples/typography-muted.tsx
diff --git a/apps/www/registry/new-york/example/typography-p.tsx b/apps/www/registry/default/examples/typography-p.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-p.tsx
rename to apps/www/registry/default/examples/typography-p.tsx
diff --git a/apps/www/registry/default/example/typography-small.tsx b/apps/www/registry/default/examples/typography-small.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-small.tsx
rename to apps/www/registry/default/examples/typography-small.tsx
diff --git a/apps/www/registry/default/example/typography-table.tsx b/apps/www/registry/default/examples/typography-table.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-table.tsx
rename to apps/www/registry/default/examples/typography-table.tsx
diff --git a/apps/www/registry/default/hooks/use-mobile.tsx b/apps/www/registry/default/hooks/use-mobile.tsx
index f2589b47133..2b0fe1dfef3 100644
--- a/apps/www/registry/default/hooks/use-mobile.tsx
+++ b/apps/www/registry/default/hooks/use-mobile.tsx
@@ -15,5 +15,5 @@ export function useIsMobile() {
     return () => mql.removeEventListener("change", onChange)
   }, [])
 
-  return isMobile
+  return !!isMobile
 }
diff --git a/apps/www/registry/default/internal/login-01.tsx b/apps/www/registry/default/internal/login-01.tsx
new file mode 100644
index 00000000000..ca91479d440
--- /dev/null
+++ b/apps/www/registry/default/internal/login-01.tsx
@@ -0,0 +1,68 @@
+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 simple login form."
+
+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">
+      <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>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-01.tsx b/apps/www/registry/default/internal/sidebar-01.tsx
new file mode 100644
index 00000000000..8dc79fb1166
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-01.tsx
@@ -0,0 +1,285 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Label } from "@/registry/default/ui/label"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description =
+  "A simple sidebar with navigation grouped by section."
+
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Component() {
+  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])
+
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                    size="lg"
+                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                    <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                      <GalleryVerticalEnd className="size-4" />
+                    </div>
+                    <div className="flex flex-col gap-0.5 leading-none">
+                      <span className="font-semibold">Documentation</span>
+                      <span className="">v{selectedVersion}</span>
+                    </div>
+                    <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width]"
+                  align="start"
+                >
+                  {data.versions.map((version) => (
+                    <DropdownMenuItem
+                      key={version}
+                      onSelect={() => setSelectedVersion(version)}
+                    >
+                      v{version}{" "}
+                      {version === selectedVersion && (
+                        <Check className="ml-auto" />
+                      )}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+          <form>
+            <SidebarGroup className="py-0">
+              <SidebarGroupContent className="relative">
+                <Label htmlFor="search" className="sr-only">
+                  Search
+                </Label>
+                <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+                />
+                <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </form>
+        </SidebarHeader>
+        <SidebarContent>
+          {/* We create a SidebarGroup for each parent. */}
+          {data.navMain.map((item) => (
+            <SidebarGroup key={item.title}>
+              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {item.items.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton asChild isActive={item.isActive}>
+                        <a href={item.url}>{item.title}</a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </SidebarContent>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-02.tsx b/apps/www/registry/default/internal/sidebar-02.tsx
new file mode 100644
index 00000000000..bfc097f3559
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-02.tsx
@@ -0,0 +1,323 @@
+"use client"
+
+import * as React from "react"
+import {
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  GalleryVerticalEnd,
+  Search,
+} from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Label } from "@/registry/default/ui/label"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with collapsible sections."
+
+// This is sample data.
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Component() {
+  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])
+
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                    size="lg"
+                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                    <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                      <GalleryVerticalEnd className="size-4" />
+                    </div>
+                    <div className="flex flex-col gap-0.5 leading-none">
+                      <span className="font-semibold">Documentation</span>
+                      <span className="">v{selectedVersion}</span>
+                    </div>
+                    <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width]"
+                  align="start"
+                >
+                  {data.versions.map((version) => (
+                    <DropdownMenuItem
+                      key={version}
+                      onSelect={() => setSelectedVersion(version)}
+                    >
+                      v{version}{" "}
+                      {version === selectedVersion && (
+                        <Check className="ml-auto" />
+                      )}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+          <form>
+            <SidebarGroup className="py-0">
+              <SidebarGroupContent className="relative">
+                <Label htmlFor="search" className="sr-only">
+                  Search
+                </Label>
+                <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+                />
+                <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </form>
+        </SidebarHeader>
+        <SidebarContent className="gap-0">
+          {/* We create a collapsible SidebarGroup for each parent. */}
+          {data.navMain.map((item) => (
+            <Collapsible
+              key={item.title}
+              title={item.title}
+              defaultOpen
+              className="group/collapsible"
+            >
+              <SidebarGroup>
+                <SidebarGroupLabel
+                  asChild
+                  className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                >
+                  <CollapsibleTrigger>
+                    {item.title}{" "}
+                    <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  </CollapsibleTrigger>
+                </SidebarGroupLabel>
+                <CollapsibleContent>
+                  <SidebarGroupContent>
+                    <SidebarMenu>
+                      {item.items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                          <SidebarMenuButton asChild isActive={item.isActive}>
+                            <a href={item.url}>{item.title}</a>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </CollapsibleContent>
+              </SidebarGroup>
+            </Collapsible>
+          ))}
+        </SidebarContent>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-03.tsx b/apps/www/registry/default/internal/sidebar-03.tsx
new file mode 100644
index 00000000000..24ac41876b9
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-03.tsx
@@ -0,0 +1,270 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Label } from "@/registry/default/ui/label"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with nested navigation."
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Component() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild>
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  <div className="flex flex-col gap-0.5 leading-none">
+                    <span className="font-semibold">Documentation</span>
+                    <span className="">v1.0.0</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url} className="font-medium">
+                      {item.title}
+                    </a>
+                  </SidebarMenuButton>
+                  {item.items?.length ? (
+                    <SidebarMenuSub>
+                      {item.items.map((item) => (
+                        <SidebarMenuSubItem key={item.title}>
+                          <SidebarMenuSubButton
+                            asChild
+                            isActive={item.isActive}
+                          >
+                            <a href={item.url}>{item.title}</a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  ) : null}
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+          <div className="flex items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-04.tsx b/apps/www/registry/default/internal/sidebar-04.tsx
new file mode 100644
index 00000000000..e9a86dbd786
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-04.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A floating sidebar with submenus."
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Component() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "19rem",
+        } as React.CSSProperties
+      }
+    >
+      <Sidebar variant="floating">
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild>
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  <div className="flex flex-col gap-0.5 leading-none">
+                    <span className="font-semibold">Documentation</span>
+                    <span className="">v1.0.0</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarMenu className="gap-2">
+              {data.navMain.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url} className="font-medium">
+                      {item.title}
+                    </a>
+                  </SidebarMenuButton>
+                  {item.items?.length ? (
+                    <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
+                      {item.items.map((item) => (
+                        <SidebarMenuSubItem key={item.title}>
+                          <SidebarMenuSubButton
+                            asChild
+                            isActive={item.isActive}
+                          >
+                            <a href={item.url}>{item.title}</a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  ) : null}
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-05.tsx b/apps/www/registry/default/internal/sidebar-05.tsx
new file mode 100644
index 00000000000..660d989c624
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-05.tsx
@@ -0,0 +1,288 @@
+import { GalleryVerticalEnd, Minus, Plus, Search } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import { Label } from "@/registry/default/ui/label"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with collapsible submenus."
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Component() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild>
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  <div className="flex flex-col gap-0.5 leading-none">
+                    <span className="font-semibold">Documentation</span>
+                    <span className="">v1.0.0</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+          <form>
+            <SidebarGroup className="py-0">
+              <SidebarGroupContent className="relative">
+                <Label htmlFor="search" className="sr-only">
+                  Search
+                </Label>
+                <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+                />
+                <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </form>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarMenu>
+              {data.navMain.map((item, index) => (
+                <Collapsible
+                  key={item.title}
+                  defaultOpen={index === 1}
+                  className="group/collapsible"
+                >
+                  <SidebarMenuItem>
+                    <CollapsibleTrigger asChild>
+                      <SidebarMenuButton>
+                        {item.title}{" "}
+                        <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                        <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                      </SidebarMenuButton>
+                    </CollapsibleTrigger>
+                    {item.items?.length ? (
+                      <CollapsibleContent>
+                        <SidebarMenuSub>
+                          {item.items.map((item) => (
+                            <SidebarMenuSubItem key={item.title}>
+                              <SidebarMenuSubButton
+                                asChild
+                                isActive={item.isActive}
+                              >
+                                <a href={item.url}>{item.title}</a>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    ) : null}
+                  </SidebarMenuItem>
+                </Collapsible>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-06.tsx b/apps/www/registry/default/internal/sidebar-06.tsx
new file mode 100644
index 00000000000..6f25e819d68
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-06.tsx
@@ -0,0 +1,287 @@
+"use client"
+
+import { GalleryVerticalEnd, MoreHorizontal } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with submenus as dropdowns."
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild>
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  <div className="flex flex-col gap-0.5 leading-none">
+                    <span className="font-semibold">Documentation</span>
+                    <span className="">v1.0.0</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <DropdownMenu key={item.title}>
+                  <SidebarMenuItem>
+                    <DropdownMenuTrigger asChild>
+                      <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                        {item.title} <MoreHorizontal className="ml-auto" />
+                      </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    {item.items?.length ? (
+                      <DropdownMenuContent
+                        side="bottom"
+                        align="end"
+                        className="min-w-56 rounded-lg"
+                      >
+                        {item.items.map((item) => (
+                          <DropdownMenuItem asChild key={item.title}>
+                            <a href={item.url}>{item.title}</a>
+                          </DropdownMenuItem>
+                        ))}
+                      </DropdownMenuContent>
+                    ) : null}
+                  </SidebarMenuItem>
+                </DropdownMenu>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <div className="p-1">
+            <Card className="shadow-none">
+              <form>
+                <CardHeader className="p-4 pb-0">
+                  <CardTitle className="text-sm">
+                    Subscribe to our newsletter
+                  </CardTitle>
+                  <CardDescription>
+                    Opt-in to receive updates and news about the sidebar.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="grid gap-2.5 p-4">
+                  <SidebarInput type="email" placeholder="Email" />
+                  <Button
+                    className="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none"
+                    size="sm"
+                  >
+                    Subscribe
+                  </Button>
+                </CardContent>
+              </form>
+            </Card>
+          </div>
+        </SidebarFooter>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-07.tsx b/apps/www/registry/default/internal/sidebar-07.tsx
new file mode 100644
index 00000000000..10e86e98be9
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-07.tsx
@@ -0,0 +1,486 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  BadgeCheck,
+  Bell,
+  BookOpen,
+  Bot,
+  ChevronRight,
+  ChevronsUpDown,
+  Command,
+  CreditCard,
+  Folder,
+  Forward,
+  Frame,
+  GalleryVerticalEnd,
+  LogOut,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Plus,
+  Settings2,
+  Sparkles,
+  SquareTerminal,
+  Trash2,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar that collapses to icons."
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: GalleryVerticalEnd,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export default function Page() {
+  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarProvider>
+      <Sidebar collapsible="icon">
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                    size="lg"
+                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                    <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                      <activeTeam.logo className="size-4" />
+                    </div>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">
+                        {activeTeam.name}
+                      </span>
+                      <span className="truncate text-xs">
+                        {activeTeam.plan}
+                      </span>
+                    </div>
+                    <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  align="start"
+                  side="bottom"
+                  sideOffset={4}
+                >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                    Teams
+                  </DropdownMenuLabel>
+                  {data.teams.map((team, index) => (
+                    <DropdownMenuItem
+                      key={team.name}
+                      onClick={() => setActiveTeam(team)}
+                      className="gap-2 p-2"
+                    >
+                      <div className="flex size-6 items-center justify-center rounded-sm border">
+                        <team.logo className="size-4 shrink-0" />
+                      </div>
+                      {team.name}
+                      <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                    <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                      <Plus className="size-4" />
+                    </div>
+                    <div className="font-medium text-muted-foreground">
+                      Add team
+                    </div>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Platform</SidebarGroupLabel>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+                  className="group/collapsible"
+                >
+                  <SidebarMenuItem>
+                    <CollapsibleTrigger asChild>
+                      <SidebarMenuButton tooltip={item.title}>
+                        {item.icon && <item.icon />}
+                        <span>{item.title}</span>
+                        <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                      </SidebarMenuButton>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <SidebarMenuSub>
+                        {item.items?.map((subItem) => (
+                          <SidebarMenuSubItem key={subItem.title}>
+                            <SidebarMenuSubButton asChild>
+                              <a href={subItem.url}>
+                                <span>{subItem.title}</span>
+                              </a>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        ))}
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  </SidebarMenuItem>
+                </Collapsible>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+          <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarMenu>
+              {data.projects.map((item) => (
+                <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.name}</span>
+                    </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <SidebarMenuAction showOnHover>
+                        <MoreHorizontal />
+                        <span className="sr-only">More</span>
+                      </SidebarMenuAction>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      className="w-48 rounded-lg"
+                      side="bottom"
+                      align="end"
+                    >
+                      <DropdownMenuItem>
+                        <Folder className="text-muted-foreground" />
+                        <span>View Project</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <Forward className="text-muted-foreground" />
+                        <span>Share Project</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>
+                        <Trash2 className="text-muted-foreground" />
+                        <span>Delete Project</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </SidebarMenuItem>
+              ))}
+              <SidebarMenuItem>
+                <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal className="text-sidebar-foreground/70" />
+                  <span>More</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                    size="lg"
+                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                    <Avatar className="h-8 w-8 rounded-lg">
+                      <AvatarImage
+                        src={data.user.avatar}
+                        alt={data.user.name}
+                      />
+                      <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                    </Avatar>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">
+                        {data.user.name}
+                      </span>
+                      <span className="truncate text-xs">
+                        {data.user.email}
+                      </span>
+                    </div>
+                    <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side="bottom"
+                  align="end"
+                  sideOffset={4}
+                >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                      <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage
+                          src={data.user.avatar}
+                          alt={data.user.name}
+                        />
+                        <AvatarFallback className="rounded-lg">
+                          CN
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                          {data.user.name}
+                        </span>
+                        <span className="truncate text-xs">
+                          {data.user.email}
+                        </span>
+                      </div>
+                    </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                      <Sparkles />
+                      Upgrade to Pro
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                      <BadgeCheck />
+                      Account
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <CreditCard />
+                      Billing
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <Bell />
+                      Notifications
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <LogOut />
+                    Log out
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-08.tsx b/apps/www/registry/default/internal/sidebar-08.tsx
new file mode 100644
index 00000000000..165ed862dde
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-08.tsx
@@ -0,0 +1,452 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  BookOpen,
+  Bot,
+  ChevronRight,
+  ChevronsUpDown,
+  Command,
+  CreditCard,
+  Folder,
+  Frame,
+  LifeBuoy,
+  LogOut,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Send,
+  Settings2,
+  Share,
+  Sparkles,
+  SquareTerminal,
+  Trash2,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with secondary navigation."
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <Sidebar variant="inset">
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild>
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <Command className="size-4" />
+                  </div>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">Acme Inc</span>
+                    <span className="truncate text-xs">Enterprise</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Platform</SidebarGroupLabel>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+                >
+                  <SidebarMenuItem>
+                    <SidebarMenuButton asChild tooltip={item.title}>
+                      <a href={item.url}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    {item.items?.length ? (
+                      <>
+                        <CollapsibleTrigger asChild>
+                          <SidebarMenuAction className="data-[state=open]:rotate-90">
+                            <ChevronRight />
+                            <span className="sr-only">Toggle</span>
+                          </SidebarMenuAction>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent>
+                          <SidebarMenuSub>
+                            {item.items?.map((subItem) => (
+                              <SidebarMenuSubItem key={subItem.title}>
+                                <SidebarMenuSubButton asChild>
+                                  <a href={subItem.url}>
+                                    <span>{subItem.title}</span>
+                                  </a>
+                                </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                            ))}
+                          </SidebarMenuSub>
+                        </CollapsibleContent>
+                      </>
+                    ) : null}
+                  </SidebarMenuItem>
+                </Collapsible>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+          <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarMenu>
+              {data.projects.map((item) => (
+                <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.name}</span>
+                    </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <SidebarMenuAction showOnHover>
+                        <MoreHorizontal />
+                        <span className="sr-only">More</span>
+                      </SidebarMenuAction>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      className="w-48"
+                      side="bottom"
+                      align="end"
+                    >
+                      <DropdownMenuItem>
+                        <Folder className="text-muted-foreground" />
+                        <span>View Project</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <Share className="text-muted-foreground" />
+                        <span>Share Project</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>
+                        <Trash2 className="text-muted-foreground" />
+                        <span>Delete Project</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </SidebarMenuItem>
+              ))}
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <MoreHorizontal />
+                  <span>More</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroup>
+          <SidebarGroup className="mt-auto">
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {data.navSecondary.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild size="sm">
+                      <a href={item.url}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                    size="lg"
+                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                    <Avatar className="h-8 w-8 rounded-lg">
+                      <AvatarImage
+                        src={data.user.avatar}
+                        alt={data.user.name}
+                      />
+                      <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                    </Avatar>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">
+                        {data.user.name}
+                      </span>
+                      <span className="truncate text-xs">
+                        {data.user.email}
+                      </span>
+                    </div>
+                    <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side="bottom"
+                  align="end"
+                  sideOffset={4}
+                >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                      <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage
+                          src={data.user.avatar}
+                          alt={data.user.name}
+                        />
+                        <AvatarFallback className="rounded-lg">
+                          CN
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                          {data.user.name}
+                        </span>
+                        <span className="truncate text-xs">
+                          {data.user.email}
+                        </span>
+                      </div>
+                    </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                      <Sparkles />
+                      Upgrade to Pro
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                      <BadgeCheck />
+                      Account
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <CreditCard />
+                      Billing
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <Bell />
+                      Notifications
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <LogOut />
+                    Log out
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-09.tsx b/apps/www/registry/default/internal/sidebar-09.tsx
new file mode 100644
index 00000000000..c2a26b0ca59
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-09.tsx
@@ -0,0 +1,426 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArchiveX,
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  Command,
+  CreditCard,
+  File,
+  Inbox,
+  LogOut,
+  Send,
+  Sparkles,
+  Trash2,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Label } from "@/registry/default/ui/label"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+import { Switch } from "@/registry/default/ui/switch"
+
+// This is sample data
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      isActive: true,
+    },
+    {
+      title: "Drafts",
+      url: "#",
+      icon: File,
+      isActive: false,
+    },
+    {
+      title: "Sent",
+      url: "#",
+      icon: Send,
+      isActive: false,
+    },
+    {
+      title: "Junk",
+      url: "#",
+      icon: ArchiveX,
+      isActive: false,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+      isActive: false,
+    },
+  ],
+  mails: [
+    {
+      name: "William Smith",
+      email: "williamsmith@example.com",
+      subject: "Meeting Tomorrow",
+      date: "09:34 AM",
+      teaser:
+        "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.",
+    },
+    {
+      name: "Alice Smith",
+      email: "alicesmith@example.com",
+      subject: "Re: Project Update",
+      date: "Yesterday",
+      teaser:
+        "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.",
+    },
+    {
+      name: "Bob Johnson",
+      email: "bobjohnson@example.com",
+      subject: "Weekend Plans",
+      date: "2 days ago",
+      teaser:
+        "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?",
+    },
+    {
+      name: "Emily Davis",
+      email: "emilydavis@example.com",
+      subject: "Re: Question about Budget",
+      date: "2 days ago",
+      teaser:
+        "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?",
+    },
+    {
+      name: "Michael Wilson",
+      email: "michaelwilson@example.com",
+      subject: "Important Announcement",
+      date: "1 week ago",
+      teaser:
+        "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.",
+    },
+    {
+      name: "Sarah Brown",
+      email: "sarahbrown@example.com",
+      subject: "Re: Feedback on Proposal",
+      date: "1 week ago",
+      teaser:
+        "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?",
+    },
+    {
+      name: "David Lee",
+      email: "davidlee@example.com",
+      subject: "New Project Idea",
+      date: "1 week ago",
+      teaser:
+        "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?",
+    },
+    {
+      name: "Olivia Wilson",
+      email: "oliviawilson@example.com",
+      subject: "Vacation Plans",
+      date: "1 week ago",
+      teaser:
+        "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.",
+    },
+    {
+      name: "James Martin",
+      email: "jamesmartin@example.com",
+      subject: "Re: Conference Registration",
+      date: "1 week ago",
+      teaser:
+        "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.",
+    },
+    {
+      name: "Sophia White",
+      email: "sophiawhite@example.com",
+      subject: "Team Dinner",
+      date: "1 week ago",
+      teaser:
+        "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.",
+    },
+  ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "Collapsible nested sidebars."
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "350px",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Inbox</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  // Note: I'm using state to show active item.
+  // IRL you should use the url/router.
+  const [activeItem, setActiveItem] = React.useState(data.navMain[0])
+  const [mails, setMails] = React.useState(data.mails)
+  const { setOpen } = useSidebar()
+
+  return (
+    <Sidebar
+      collapsible="icon"
+      className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
+      {...props}
+    >
+      {/* This is the first sidebar */}
+      {/* We disable collapsible and adjust width to icon. */}
+      {/* This will make the sidebar appear as icons. */}
+      <Sidebar
+        collapsible="none"
+        className="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
+      >
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <Command className="size-4" />
+                  </div>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">Acme Inc</span>
+                    <span className="truncate text-xs">Enterprise</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent className="px-1.5 md:px-0">
+              <SidebarMenu>
+                {data.navMain.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton
+                      tooltip={{
+                        children: item.title,
+                        hidden: false,
+                      }}
+                      onClick={() => {
+                        setActiveItem(item)
+                        const mail = data.mails.sort(() => Math.random() - 0.5)
+                        setMails(
+                          mail.slice(
+                            0,
+                            Math.max(5, Math.floor(Math.random() * 10) + 1)
+                          )
+                        )
+                        setOpen(true)
+                      }}
+                      isActive={activeItem?.title === item.title}
+                      className="px-2.5 md:px-2"
+                    >
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <NavUser user={data.user} />
+        </SidebarFooter>
+      </Sidebar>
+
+      {/* This is the second sidebar */}
+      {/* We disable collapsible and let it fill remaining space */}
+      <Sidebar collapsible="none" className="hidden flex-1 md:flex">
+        <SidebarHeader className="gap-3.5 border-b p-4">
+          <div className="flex w-full items-center justify-between">
+            <div className="text-base font-medium text-foreground">
+              {activeItem?.title}
+            </div>
+            <Label className="flex items-center gap-2 text-sm">
+              <span>Unreads</span>
+              <Switch className="shadow-none" />
+            </Label>
+          </div>
+          <SidebarInput placeholder="Type to search..." />
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup className="px-0">
+            <SidebarGroupContent>
+              {mails.map((mail) => (
+                <a
+                  href="#"
+                  key={mail.email}
+                  className="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                >
+                  <div className="flex w-full items-center gap-2">
+                    <span>{mail.name}</span>{" "}
+                    <span className="ml-auto text-xs">{mail.date}</span>
+                  </div>
+                  <span className="font-medium">{mail.subject}</span>
+                  <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
+                    {mail.teaser}
+                  </span>
+                </a>
+              ))}
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </Sidebar>
+  )
+}
+
+function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-10.tsx b/apps/www/registry/default/internal/sidebar-10.tsx
new file mode 100644
index 00000000000..496be0affb8
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-10.tsx
@@ -0,0 +1,747 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpRight,
+  AudioWaveform,
+  Bell,
+  Blocks,
+  Calendar,
+  ChevronDown,
+  ChevronRight,
+  Command,
+  Copy,
+  CornerUpLeft,
+  CornerUpRight,
+  FileText,
+  GalleryVerticalEnd,
+  Home,
+  Inbox,
+  LineChart,
+  Link,
+  MessageCircleQuestion,
+  MoreHorizontal,
+  Plus,
+  Search,
+  Settings2,
+  Sparkles,
+  Star,
+  StarOff,
+  Trash,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/default/ui/breadcrumb"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar in a popover."
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: Command,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Search",
+      url: "#",
+      icon: Search,
+    },
+    {
+      title: "Ask AI",
+      url: "#",
+      icon: Sparkles,
+    },
+    {
+      title: "Home",
+      url: "#",
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      badge: "10",
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Calendar",
+      url: "#",
+      icon: Calendar,
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+    },
+    {
+      title: "Templates",
+      url: "#",
+      icon: Blocks,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+    },
+    {
+      title: "Help",
+      url: "#",
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: "Project Management & Task Tracking",
+      url: "#",
+      emoji: "📊",
+    },
+    {
+      name: "Family Recipe Collection & Meal Planning",
+      url: "#",
+      emoji: "🍳",
+    },
+    {
+      name: "Fitness Tracker & Workout Routines",
+      url: "#",
+      emoji: "💪",
+    },
+    {
+      name: "Book Notes & Reading List",
+      url: "#",
+      emoji: "📚",
+    },
+    {
+      name: "Sustainable Gardening Tips & Plant Care",
+      url: "#",
+      emoji: "🌱",
+    },
+    {
+      name: "Language Learning Progress & Resources",
+      url: "#",
+      emoji: "🗣️",
+    },
+    {
+      name: "Home Renovation Ideas & Budget Tracker",
+      url: "#",
+      emoji: "🏠",
+    },
+    {
+      name: "Personal Finance & Investment Portfolio",
+      url: "#",
+      emoji: "💰",
+    },
+    {
+      name: "Movie & TV Show Watchlist with Reviews",
+      url: "#",
+      emoji: "🎬",
+    },
+    {
+      name: "Daily Habit Tracker & Goal Setting",
+      url: "#",
+      emoji: "✅",
+    },
+  ],
+  workspaces: [
+    {
+      name: "Personal Life Management",
+      emoji: "🏠",
+      pages: [
+        {
+          name: "Daily Journal & Reflection",
+          url: "#",
+          emoji: "📔",
+        },
+        {
+          name: "Health & Wellness Tracker",
+          url: "#",
+          emoji: "🍏",
+        },
+        {
+          name: "Personal Growth & Learning Goals",
+          url: "#",
+          emoji: "🌟",
+        },
+      ],
+    },
+    {
+      name: "Professional Development",
+      emoji: "💼",
+      pages: [
+        {
+          name: "Career Objectives & Milestones",
+          url: "#",
+          emoji: "🎯",
+        },
+        {
+          name: "Skill Acquisition & Training Log",
+          url: "#",
+          emoji: "🧠",
+        },
+        {
+          name: "Networking Contacts & Events",
+          url: "#",
+          emoji: "🤝",
+        },
+      ],
+    },
+    {
+      name: "Creative Projects",
+      emoji: "🎨",
+      pages: [
+        {
+          name: "Writing Ideas & Story Outlines",
+          url: "#",
+          emoji: "✍️",
+        },
+        {
+          name: "Art & Design Portfolio",
+          url: "#",
+          emoji: "🖼️",
+        },
+        {
+          name: "Music Composition & Practice Log",
+          url: "#",
+          emoji: "🎵",
+        },
+      ],
+    },
+    {
+      name: "Home Management",
+      emoji: "🏡",
+      pages: [
+        {
+          name: "Household Budget & Expense Tracking",
+          url: "#",
+          emoji: "💰",
+        },
+        {
+          name: "Home Maintenance Schedule & Tasks",
+          url: "#",
+          emoji: "🔧",
+        },
+        {
+          name: "Family Calendar & Event Planning",
+          url: "#",
+          emoji: "📅",
+        },
+      ],
+    },
+    {
+      name: "Travel & Adventure",
+      emoji: "🧳",
+      pages: [
+        {
+          name: "Trip Planning & Itineraries",
+          url: "#",
+          emoji: "🗺️",
+        },
+        {
+          name: "Travel Bucket List & Inspiration",
+          url: "#",
+          emoji: "🌎",
+        },
+        {
+          name: "Travel Journal & Photo Gallery",
+          url: "#",
+          emoji: "📸",
+        },
+      ],
+    },
+  ],
+  actions: [
+    [
+      {
+        label: "Customize Page",
+        icon: Settings2,
+      },
+      {
+        label: "Turn into wiki",
+        icon: FileText,
+      },
+    ],
+    [
+      {
+        label: "Copy Link",
+        icon: Link,
+      },
+      {
+        label: "Duplicate",
+        icon: Copy,
+      },
+      {
+        label: "Move to",
+        icon: CornerUpRight,
+      },
+      {
+        label: "Move to Trash",
+        icon: Trash2,
+      },
+    ],
+    [
+      {
+        label: "Undo",
+        icon: CornerUpLeft,
+      },
+      {
+        label: "View analytics",
+        icon: LineChart,
+      },
+      {
+        label: "Version History",
+        icon: GalleryVerticalEnd,
+      },
+      {
+        label: "Show delete pages",
+        icon: Trash,
+      },
+      {
+        label: "Notifications",
+        icon: Bell,
+      },
+    ],
+    [
+      {
+        label: "Import",
+        icon: ArrowUp,
+      },
+      {
+        label: "Export",
+        icon: ArrowDown,
+      },
+    ],
+  ],
+}
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-14 shrink-0 items-center gap-2">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+          <div className="ml-auto px-3">
+            <NavActions actions={data.actions} />
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar className="border-r-0" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+        <NavMain items={data.navMain} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavFavorites favorites={data.favorites} />
+        <NavWorkspaces workspaces={data.workspaces} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function NavActions({
+  actions,
+}: {
+  actions: {
+    label: string
+    icon: LucideIcon
+  }[][]
+}) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsOpen(true)
+  }, [])
+
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      <div className="hidden font-medium text-muted-foreground md:inline-block">
+        Edit Oct 08
+      </div>
+      <Button variant="ghost" size="icon" className="h-7 w-7">
+        <Star />
+      </Button>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 data-[state=open]:bg-accent"
+          >
+            <MoreHorizontal />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-56 overflow-hidden rounded-lg p-0"
+          align="end"
+        >
+          <Sidebar collapsible="none" className="bg-transparent">
+            <SidebarContent>
+              {actions.map((group, index) => (
+                <SidebarGroup key={index} className="border-b last:border-none">
+                  <SidebarGroupContent className="gap-0">
+                    <SidebarMenu>
+                      {group.map((item, index) => (
+                        <SidebarMenuItem key={index}>
+                          <SidebarMenuButton>
+                            <item.icon /> <span>{item.label}</span>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              ))}
+            </SidebarContent>
+          </Sidebar>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+function NavFavorites({
+  favorites,
+}: {
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+      <SidebarMenu>
+        {favorites.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url} title={item.name}>
+                <span>{item.emoji}</span>
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-56 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <StarOff className="text-muted-foreground" />
+                  <span>Remove from Favorites</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link className="text-muted-foreground" />
+                  <span>Copy Link</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArrowUpRight className="text-muted-foreground" />
+                  <span>Open in New Tab</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
+
+function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton asChild isActive={item.isActive}>
+            <a href={item.url}>
+              <item.icon />
+              <span>{item.title}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+
+function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: React.ReactNode
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function NavWorkspaces({
+  workspaces,
+}: {
+  workspaces: {
+    name: string
+    emoji: React.ReactNode
+    pages: {
+      name: string
+      emoji: React.ReactNode
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {workspaces.map((workspace) => (
+            <Collapsible key={workspace.name}>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <span>{workspace.emoji}</span>
+                    <span>{workspace.name}</span>
+                  </a>
+                </SidebarMenuButton>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuAction
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                    showOnHover
+                  >
+                    <ChevronRight />
+                  </SidebarMenuAction>
+                </CollapsibleTrigger>
+                <SidebarMenuAction showOnHover>
+                  <Plus />
+                </SidebarMenuAction>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {workspace.pages.map((page) => (
+                      <SidebarMenuSubItem key={page.name}>
+                        <SidebarMenuSubButton asChild>
+                          <a href="#">
+                            <span>{page.emoji}</span>
+                            <span>{page.name}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ))}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="text-sidebar-foreground/70">
+              <MoreHorizontal />
+              <span>More</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className="w-fit px-1.5">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-3" />
+              </div>
+              <span className="truncate font-semibold">{activeTeam.name}</span>
+              <ChevronDown className="opacity-50" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-64 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-11.tsx b/apps/www/registry/default/internal/sidebar-11.tsx
new file mode 100644
index 00000000000..5aced73b9e2
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-11.tsx
@@ -0,0 +1,194 @@
+import * as React from "react"
+import { ChevronRight, File, Folder } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  changes: [
+    {
+      file: "README.md",
+      state: "M",
+    },
+    {
+      file: "api/hello/route.ts",
+      state: "U",
+    },
+    {
+      file: "app/layout.tsx",
+      state: "M",
+    },
+  ],
+  tree: [
+    [
+      "app",
+      [
+        "api",
+        ["hello", ["route.ts"]],
+        "page.tsx",
+        "layout.tsx",
+        ["blog", ["page.tsx"]],
+      ],
+    ],
+    [
+      "components",
+      ["ui", "button.tsx", "card.tsx"],
+      "header.tsx",
+      "footer.tsx",
+    ],
+    ["lib", ["util.ts"]],
+    ["public", "favicon.ico", "vercel.svg"],
+    ".eslintrc.json",
+    ".gitignore",
+    "next.config.js",
+    "tailwind.config.js",
+    "package.json",
+    "README.md",
+  ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a collapsible file tree."
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">components</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">ui</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>button.tsx</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Changes</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.changes.map((item, index) => (
+                <SidebarMenuItem key={index}>
+                  <SidebarMenuButton>
+                    <File />
+                    {item.file}
+                  </SidebarMenuButton>
+                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Files</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.tree.map((item, index) => (
+                <Tree key={index} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function Tree({ item }: { item: string | any[] }) {
+  const [name, ...items] = Array.isArray(item) ? item : [item]
+
+  if (!items.length) {
+    return (
+      <SidebarMenuButton
+        isActive={name === "button.tsx"}
+        className="data-[active=true]:bg-transparent"
+      >
+        <File />
+        {name}
+      </SidebarMenuButton>
+    )
+  }
+
+  return (
+    <SidebarMenuItem>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen={name === "components" || name === "ui"}
+      >
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton>
+            <ChevronRight className="transition-transform" />
+            <Folder />
+            {name}
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {items.map((subItem, index) => (
+              <Tree key={index} item={subItem} />
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarMenuItem>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-12.tsx b/apps/www/registry/default/internal/sidebar-12.tsx
new file mode 100644
index 00000000000..f5694f9bc23
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-12.tsx
@@ -0,0 +1,288 @@
+"use client"
+
+import * as React from "react"
+import {
+  BadgeCheck,
+  Bell,
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Plus,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/default/ui/breadcrumb"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  calendars: [
+    {
+      name: "My Calendars",
+      items: ["Personal", "Work", "Family"],
+    },
+    {
+      name: "Favorites",
+      items: ["Holidays", "Birthdays"],
+    },
+    {
+      name: "Other",
+      items: ["Travel", "Reminders", "Deadlines"],
+    },
+  ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a calendar."
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbPage>October 2024</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+            {Array.from({ length: 20 }).map((_, i) => (
+              <div key={i} className="aspect-square rounded-xl bg-muted/50" />
+            ))}
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
+        <NavUser user={data.user} />
+      </SidebarHeader>
+      <SidebarContent>
+        <DatePicker />
+        <SidebarSeparator className="mx-0" />
+        <Calendars calendars={data.calendars} />
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              <Plus />
+              <span>New Calendar</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function Calendars({
+  calendars,
+}: {
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}) {
+  return (
+    <>
+      {calendars.map((calendar, index) => (
+        <React.Fragment key={calendar.name}>
+          <SidebarGroup key={calendar.name} className="py-0">
+            <Collapsible
+              defaultOpen={index === 0}
+              className="group/collapsible"
+            >
+              <SidebarGroupLabel
+                asChild
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {calendar.name}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {calendar.items.map((item, index) => (
+                      <SidebarMenuItem key={item}>
+                        <SidebarMenuButton>
+                          <div
+                            data-active={index < 2}
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                          >
+                            <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                          </div>
+                          {item}
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </SidebarGroup>
+          <SidebarSeparator className="mx-0" />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
+
+function DatePicker() {
+  return (
+    <SidebarGroup className="px-0">
+      <SidebarGroupContent>
+        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-13.tsx b/apps/www/registry/default/internal/sidebar-13.tsx
new file mode 100644
index 00000000000..950cbcad558
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-13.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import {
+  Bell,
+  Check,
+  Globe,
+  Home,
+  Keyboard,
+  Link,
+  Lock,
+  Menu,
+  MessageCircle,
+  Paintbrush,
+  Settings,
+  Video,
+} from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/default/ui/dialog"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar in a dialog."
+
+const data = {
+  nav: [
+    { name: "Notifications", icon: Bell },
+    { name: "Navigation", icon: Menu },
+    { name: "Home", icon: Home },
+    { name: "Appearance", icon: Paintbrush },
+    { name: "Messages & media", icon: MessageCircle },
+    { name: "Language & region", icon: Globe },
+    { name: "Accessibility", icon: Keyboard },
+    { name: "Mark as read", icon: Check },
+    { name: "Audio & video", icon: Video },
+    { name: "Connected accounts", icon: Link },
+    { name: "Privacy & visibility", icon: Lock },
+    { name: "Advanced", icon: Settings },
+  ],
+}
+
+export default function Page() {
+  return (
+    <div className="flex h-svh items-center justify-center">
+      <SettingsDialog />
+    </div>
+  )
+}
+
+function SettingsDialog() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+        <DialogTitle className="sr-only">Settings</DialogTitle>
+        <DialogDescription className="sr-only">
+          Customize your settings here.
+        </DialogDescription>
+        <SidebarProvider className="items-start">
+          <Sidebar collapsible="none" className="hidden md:flex">
+            <SidebarContent>
+              <SidebarGroup>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {data.nav.map((item) => (
+                      <SidebarMenuItem key={item.name}>
+                        <SidebarMenuButton
+                          asChild
+                          isActive={item.name === "Messages & media"}
+                        >
+                          <a href="#">
+                            <item.icon />
+                            <span>{item.name}</span>
+                          </a>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            </SidebarContent>
+          </Sidebar>
+          <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+              <div className="flex items-center gap-2 px-4">
+                <Breadcrumb>
+                  <BreadcrumbList>
+                    <BreadcrumbItem className="hidden md:block">
+                      <BreadcrumbLink href="#">Settings</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator className="hidden md:block" />
+                    <BreadcrumbItem>
+                      <BreadcrumbPage>Messages & media</BreadcrumbPage>
+                    </BreadcrumbItem>
+                  </BreadcrumbList>
+                </Breadcrumb>
+              </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+              {Array.from({ length: 10 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="aspect-video max-w-3xl rounded-xl bg-muted/50"
+                />
+              ))}
+            </div>
+          </main>
+        </SidebarProvider>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-14.tsx b/apps/www/registry/default/internal/sidebar-14.tsx
new file mode 100644
index 00000000000..41346b6ae84
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-14.tsx
@@ -0,0 +1,246 @@
+import * as React from "react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar on the right."
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+      <AppSidebar side="right" />
+    </SidebarProvider>
+  )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url} className="font-medium">
+                      {item.title}
+                    </a>
+                  </SidebarMenuButton>
+                  {item.items?.length ? (
+                    <SidebarMenuSub>
+                      {item.items.map((item) => (
+                        <SidebarMenuSubItem key={item.title}>
+                          <SidebarMenuSubButton
+                            asChild
+                            isActive={item.isActive}
+                          >
+                            <a href={item.url}>{item.title}</a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  ) : null}
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-15.tsx b/apps/www/registry/default/internal/sidebar-15.tsx
new file mode 100644
index 00000000000..3119d0cb396
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-15.tsx
@@ -0,0 +1,822 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArrowUpRight,
+  AudioWaveform,
+  BadgeCheck,
+  Bell,
+  Blocks,
+  CalendarIcon,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronsUpDown,
+  Command,
+  CreditCard,
+  Home,
+  Inbox,
+  Link,
+  LogOut,
+  MessageCircleQuestion,
+  MoreHorizontal,
+  Plus,
+  Search,
+  Settings2,
+  Sparkles,
+  StarOff,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/default/ui/breadcrumb"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A left and right sidebar."
+
+// This is sample data.
+const sidebarLeftData = {
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: Command,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Search",
+      url: "#",
+      icon: Search,
+    },
+    {
+      title: "Ask AI",
+      url: "#",
+      icon: Sparkles,
+    },
+    {
+      title: "Home",
+      url: "#",
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      badge: "10",
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Calendar",
+      url: "#",
+      icon: CalendarIcon,
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+    },
+    {
+      title: "Templates",
+      url: "#",
+      icon: Blocks,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+    },
+    {
+      title: "Help",
+      url: "#",
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: "Project Management & Task Tracking",
+      url: "#",
+      emoji: "📊",
+    },
+    {
+      name: "Family Recipe Collection & Meal Planning",
+      url: "#",
+      emoji: "🍳",
+    },
+    {
+      name: "Fitness Tracker & Workout Routines",
+      url: "#",
+      emoji: "💪",
+    },
+    {
+      name: "Book Notes & Reading List",
+      url: "#",
+      emoji: "📚",
+    },
+    {
+      name: "Sustainable Gardening Tips & Plant Care",
+      url: "#",
+      emoji: "🌱",
+    },
+    {
+      name: "Language Learning Progress & Resources",
+      url: "#",
+      emoji: "🗣️",
+    },
+    {
+      name: "Home Renovation Ideas & Budget Tracker",
+      url: "#",
+      emoji: "🏠",
+    },
+    {
+      name: "Personal Finance & Investment Portfolio",
+      url: "#",
+      emoji: "💰",
+    },
+    {
+      name: "Movie & TV Show Watchlist with Reviews",
+      url: "#",
+      emoji: "🎬",
+    },
+    {
+      name: "Daily Habit Tracker & Goal Setting",
+      url: "#",
+      emoji: "✅",
+    },
+  ],
+  workspaces: [
+    {
+      name: "Personal Life Management",
+      emoji: "🏠",
+      pages: [
+        {
+          name: "Daily Journal & Reflection",
+          url: "#",
+          emoji: "📔",
+        },
+        {
+          name: "Health & Wellness Tracker",
+          url: "#",
+          emoji: "🍏",
+        },
+        {
+          name: "Personal Growth & Learning Goals",
+          url: "#",
+          emoji: "🌟",
+        },
+      ],
+    },
+    {
+      name: "Professional Development",
+      emoji: "💼",
+      pages: [
+        {
+          name: "Career Objectives & Milestones",
+          url: "#",
+          emoji: "🎯",
+        },
+        {
+          name: "Skill Acquisition & Training Log",
+          url: "#",
+          emoji: "🧠",
+        },
+        {
+          name: "Networking Contacts & Events",
+          url: "#",
+          emoji: "🤝",
+        },
+      ],
+    },
+    {
+      name: "Creative Projects",
+      emoji: "🎨",
+      pages: [
+        {
+          name: "Writing Ideas & Story Outlines",
+          url: "#",
+          emoji: "✍️",
+        },
+        {
+          name: "Art & Design Portfolio",
+          url: "#",
+          emoji: "🖼️",
+        },
+        {
+          name: "Music Composition & Practice Log",
+          url: "#",
+          emoji: "🎵",
+        },
+      ],
+    },
+    {
+      name: "Home Management",
+      emoji: "🏡",
+      pages: [
+        {
+          name: "Household Budget & Expense Tracking",
+          url: "#",
+          emoji: "💰",
+        },
+        {
+          name: "Home Maintenance Schedule & Tasks",
+          url: "#",
+          emoji: "🔧",
+        },
+        {
+          name: "Family Calendar & Event Planning",
+          url: "#",
+          emoji: "📅",
+        },
+      ],
+    },
+    {
+      name: "Travel & Adventure",
+      emoji: "🧳",
+      pages: [
+        {
+          name: "Trip Planning & Itineraries",
+          url: "#",
+          emoji: "🗺️",
+        },
+        {
+          name: "Travel Bucket List & Inspiration",
+          url: "#",
+          emoji: "🌎",
+        },
+        {
+          name: "Travel Journal & Photo Gallery",
+          url: "#",
+          emoji: "📸",
+        },
+      ],
+    },
+  ],
+}
+
+// This is sample data.
+const sidebarRightData = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  calendars: [
+    {
+      name: "My Calendars",
+      items: ["Personal", "Work", "Family"],
+    },
+    {
+      name: "Favorites",
+      items: ["Holidays", "Birthdays"],
+    },
+    {
+      name: "Other",
+      items: ["Travel", "Reminders", "Deadlines"],
+    },
+  ],
+}
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarLeft />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+      <SidebarRight />
+    </SidebarProvider>
+  )
+}
+
+function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar className="border-r-0" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={sidebarLeftData.teams} />
+        <NavMain items={sidebarLeftData.navMain} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavFavorites favorites={sidebarLeftData.favorites} />
+        <NavWorkspaces workspaces={sidebarLeftData.workspaces} />
+        <NavSecondary
+          items={sidebarLeftData.navSecondary}
+          className="mt-auto"
+        />
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar
+      collapsible="none"
+      className="sticky top-0 hidden h-svh border-l lg:flex"
+      {...props}
+    >
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
+        <NavUser user={sidebarRightData.user} />
+      </SidebarHeader>
+      <SidebarContent>
+        <DatePicker />
+        <SidebarSeparator className="mx-0" />
+        <Calendars calendars={sidebarRightData.calendars} />
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              <Plus />
+              <span>New Calendar</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
+
+function Calendars({
+  calendars,
+}: {
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}) {
+  return (
+    <>
+      {calendars.map((calendar, index) => (
+        <React.Fragment key={calendar.name}>
+          <SidebarGroup key={calendar.name} className="py-0">
+            <Collapsible
+              defaultOpen={index === 0}
+              className="group/collapsible"
+            >
+              <SidebarGroupLabel
+                asChild
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {calendar.name}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {calendar.items.map((item, index) => (
+                      <SidebarMenuItem key={item}>
+                        <SidebarMenuButton>
+                          <div
+                            data-active={index < 2}
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                          >
+                            <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                          </div>
+                          {item}
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </SidebarGroup>
+          <SidebarSeparator className="mx-0" />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
+
+function DatePicker() {
+  return (
+    <SidebarGroup className="px-0">
+      <SidebarGroupContent>
+        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function NavFavorites({
+  favorites,
+}: {
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+      <SidebarMenu>
+        {favorites.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url} title={item.name}>
+                <span>{item.emoji}</span>
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-56 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <StarOff className="text-muted-foreground" />
+                  <span>Remove from Favorites</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link className="text-muted-foreground" />
+                  <span>Copy Link</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArrowUpRight className="text-muted-foreground" />
+                  <span>Open in New Tab</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
+
+function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton asChild isActive={item.isActive}>
+            <a href={item.url}>
+              <item.icon />
+              <span>{item.title}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+
+function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: React.ReactNode
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
+
+function NavWorkspaces({
+  workspaces,
+}: {
+  workspaces: {
+    name: string
+    emoji: React.ReactNode
+    pages: {
+      name: string
+      emoji: React.ReactNode
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {workspaces.map((workspace) => (
+            <Collapsible key={workspace.name}>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <span>{workspace.emoji}</span>
+                    <span>{workspace.name}</span>
+                  </a>
+                </SidebarMenuButton>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuAction
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                    showOnHover
+                  >
+                    <ChevronRight />
+                  </SidebarMenuAction>
+                </CollapsibleTrigger>
+                <SidebarMenuAction showOnHover>
+                  <Plus />
+                </SidebarMenuAction>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {workspace.pages.map((page) => (
+                      <SidebarMenuSubItem key={page.name}>
+                        <SidebarMenuSubButton asChild>
+                          <a href="#">
+                            <span>{page.emoji}</span>
+                            <span>{page.name}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ))}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="text-sidebar-foreground/70">
+              <MoreHorizontal />
+              <span>More</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className="w-fit px-1.5">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-3" />
+              </div>
+              <span className="truncate font-semibold">{activeTeam.name}</span>
+              <ChevronDown className="opacity-50" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-64 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-controlled.tsx b/apps/www/registry/default/internal/sidebar-controlled.tsx
new file mode 100644
index 00000000000..22b1e8124a8
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-controlled.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PieChart,
+  Send,
+} from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: Frame,
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChart,
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: Map,
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoy,
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: Send,
+  },
+]
+
+export default function AppSidebar() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <SidebarProvider open={open} onOpenChange={setOpen}>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton asChild>
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex items-center h-12 px-4 justify-between">
+          <Button
+            onClick={() => setOpen((open) => !open)}
+            size="sm"
+            variant="ghost"
+          >
+            {open ? <PanelLeftClose /> : <PanelLeftOpen />}
+            <span>{open ? "Close" : "Open"} Sidebar</span>
+          </Button>
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-demo.tsx b/apps/www/registry/default/internal/sidebar-demo.tsx
new file mode 100644
index 00000000000..75b173dfe45
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-demo.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+// Menu items.
+const items = [
+  {
+    title: "Home",
+    url: "#",
+    icon: Home,
+  },
+  {
+    title: "Inbox",
+    url: "#",
+    icon: Inbox,
+  },
+  {
+    title: "Calendar",
+    url: "#",
+    icon: Calendar,
+  },
+  {
+    title: "Search",
+    url: "#",
+    icon: Search,
+  },
+  {
+    title: "Settings",
+    url: "#",
+    icon: Settings,
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Application</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild>
+                      <a href={item.url}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex items-center justify-between px-4 h-12">
+          <SidebarTrigger />
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-footer.tsx b/apps/www/registry/default/internal/sidebar-footer.tsx
new file mode 100644
index 00000000000..c0aae54ef38
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-footer.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { ChevronDown, ChevronUp, User2 } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader />
+        <SidebarContent />
+        <SidebarFooter>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                    Username
+                    <ChevronUp className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  side="top"
+                  className="w-[--radix-popper-anchor-width]"
+                >
+                  <DropdownMenuItem>
+                    <span>Account</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Billing</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Sign out</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex items-center justify-between px-4 h-12">
+          <SidebarTrigger />
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-group-action.tsx b/apps/www/registry/default/internal/sidebar-group-action.tsx
new file mode 100644
index 00000000000..eb68c907a6f
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-group-action.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import {
+  ChevronDown,
+  Frame,
+  LifeBuoy,
+  Map,
+  PieChart,
+  Plus,
+  Send,
+} from "lucide-react"
+import { Toaster, toast } from "sonner"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Toaster
+        position="bottom-left"
+        toastOptions={{
+          className: "ml-[160px]",
+        }}
+      />
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupAction
+              title="Add Project"
+              onClick={() => toast("You clicked the group action!")}
+            >
+              <Plus /> <span className="sr-only">Add Project</span>
+            </SidebarGroupAction>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <a href="#">
+                      <Frame />
+                      <span>Design Engineering</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <a href="#">
+                      <PieChart />
+                      <span>Sales & Marketing</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <a href="#">
+                      <Map />
+                      <span>Travel</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-group-collapsible.tsx b/apps/www/registry/default/internal/sidebar-group-collapsible.tsx
new file mode 100644
index 00000000000..eb47f53f4d6
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-group-collapsible.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import { ChevronDown, LifeBuoy, Send } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <Collapsible defaultOpen className="group/collapsible">
+            <SidebarGroup>
+              <SidebarGroupLabel
+                asChild
+                className="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  Help
+                  <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton>
+                        <LifeBuoy />
+                        Support
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton>
+                        <Send />
+                        Feedback
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-group.tsx b/apps/www/registry/default/internal/sidebar-group.tsx
new file mode 100644
index 00000000000..65d1d41626a
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-group.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { LifeBuoy, Send } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Help</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <LifeBuoy />
+                    Support
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <Send />
+                    Feedback
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-header.tsx b/apps/www/registry/default/internal/sidebar-header.tsx
new file mode 100644
index 00000000000..cb1accc46e1
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-header.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { ChevronDown } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                    Select Workspace
+                    <ChevronDown className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-[--radix-popper-anchor-width]">
+                  <DropdownMenuItem>
+                    <span>Acme Inc</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Acme Corp.</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex items-center justify-between px-4 h-12">
+          <SidebarTrigger />
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-menu-action.tsx b/apps/www/registry/default/internal/sidebar-menu-action.tsx
new file mode 100644
index 00000000000..4887129c79c
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-menu-action.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Send,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: Frame,
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChart,
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: Map,
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoy,
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: Send,
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project, index) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton
+                      asChild
+                      className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                    >
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction>
+                          <MoreHorizontal />
+                          <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent side="right" align="start">
+                        <DropdownMenuItem>
+                          <span>Edit Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <span>Delete Project</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-menu-badge.tsx b/apps/www/registry/default/internal/sidebar-menu-badge.tsx
new file mode 100644
index 00000000000..835fdcc5c41
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-menu-badge.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: Frame,
+    badge: "24",
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChart,
+    badge: "12",
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: Map,
+    badge: "3",
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoy,
+    badge: "21",
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: Send,
+    badge: "8",
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton
+                      asChild
+                      className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                    >
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-menu-collapsible.tsx b/apps/www/registry/default/internal/sidebar-menu-collapsible.tsx
new file mode 100644
index 00000000000..a2745d08cef
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-menu-collapsible.tsx
@@ -0,0 +1,197 @@
+"use client"
+
+import { ChevronRight } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+const items = [
+  {
+    title: "Getting Started",
+    url: "#",
+    items: [
+      {
+        title: "Installation",
+        url: "#",
+      },
+      {
+        title: "Project Structure",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Building Your Application",
+    url: "#",
+    items: [
+      {
+        title: "Routing",
+        url: "#",
+      },
+      {
+        title: "Data Fetching",
+        url: "#",
+        isActive: true,
+      },
+      {
+        title: "Rendering",
+        url: "#",
+      },
+      {
+        title: "Caching",
+        url: "#",
+      },
+      {
+        title: "Styling",
+        url: "#",
+      },
+      {
+        title: "Optimizing",
+        url: "#",
+      },
+      {
+        title: "Configuring",
+        url: "#",
+      },
+      {
+        title: "Testing",
+        url: "#",
+      },
+      {
+        title: "Authentication",
+        url: "#",
+      },
+      {
+        title: "Deploying",
+        url: "#",
+      },
+      {
+        title: "Upgrading",
+        url: "#",
+      },
+      {
+        title: "Examples",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "API Reference",
+    url: "#",
+    items: [
+      {
+        title: "Components",
+        url: "#",
+      },
+      {
+        title: "File Conventions",
+        url: "#",
+      },
+      {
+        title: "Functions",
+        url: "#",
+      },
+      {
+        title: "next.config.js Options",
+        url: "#",
+      },
+      {
+        title: "CLI",
+        url: "#",
+      },
+      {
+        title: "Edge Runtime",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Architecture",
+    url: "#",
+    items: [
+      {
+        title: "Accessibility",
+        url: "#",
+      },
+      {
+        title: "Fast Refresh",
+        url: "#",
+      },
+      {
+        title: "Next.js Compiler",
+        url: "#",
+      },
+      {
+        title: "Supported Browsers",
+        url: "#",
+      },
+      {
+        title: "Turbopack",
+        url: "#",
+      },
+    ],
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {items.map((item, index) => (
+                  <Collapsible
+                    key={index}
+                    className="group/collapsible"
+                    defaultOpen={index === 0}
+                  >
+                    <SidebarMenuItem>
+                      <CollapsibleTrigger asChild>
+                        <SidebarMenuButton>
+                          <span>{item.title}</span>
+                          <ChevronRight className="transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent>
+                        <SidebarMenuSub>
+                          {item.items.map((subItem, subIndex) => (
+                            <SidebarMenuSubItem key={subIndex}>
+                              <SidebarMenuSubButton asChild>
+                                <a href={subItem.url}>
+                                  <span>{subItem.title}</span>
+                                </a>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </Collapsible>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-menu-sub.tsx b/apps/www/registry/default/internal/sidebar-menu-sub.tsx
new file mode 100644
index 00000000000..437326bb0a6
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-menu-sub.tsx
@@ -0,0 +1,180 @@
+"use client"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+const items = [
+  {
+    title: "Getting Started",
+    url: "#",
+    items: [
+      {
+        title: "Installation",
+        url: "#",
+      },
+      {
+        title: "Project Structure",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Building Your Application",
+    url: "#",
+    items: [
+      {
+        title: "Routing",
+        url: "#",
+      },
+      {
+        title: "Data Fetching",
+        url: "#",
+        isActive: true,
+      },
+      {
+        title: "Rendering",
+        url: "#",
+      },
+      {
+        title: "Caching",
+        url: "#",
+      },
+      {
+        title: "Styling",
+        url: "#",
+      },
+      {
+        title: "Optimizing",
+        url: "#",
+      },
+      {
+        title: "Configuring",
+        url: "#",
+      },
+      {
+        title: "Testing",
+        url: "#",
+      },
+      {
+        title: "Authentication",
+        url: "#",
+      },
+      {
+        title: "Deploying",
+        url: "#",
+      },
+      {
+        title: "Upgrading",
+        url: "#",
+      },
+      {
+        title: "Examples",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "API Reference",
+    url: "#",
+    items: [
+      {
+        title: "Components",
+        url: "#",
+      },
+      {
+        title: "File Conventions",
+        url: "#",
+      },
+      {
+        title: "Functions",
+        url: "#",
+      },
+      {
+        title: "next.config.js Options",
+        url: "#",
+      },
+      {
+        title: "CLI",
+        url: "#",
+      },
+      {
+        title: "Edge Runtime",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Architecture",
+    url: "#",
+    items: [
+      {
+        title: "Accessibility",
+        url: "#",
+      },
+      {
+        title: "Fast Refresh",
+        url: "#",
+      },
+      {
+        title: "Next.js Compiler",
+        url: "#",
+      },
+      {
+        title: "Supported Browsers",
+        url: "#",
+      },
+      {
+        title: "Turbopack",
+        url: "#",
+      },
+    ],
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {items.map((item, index) => (
+                  <SidebarMenuItem key={index}>
+                    <SidebarMenuButton asChild>
+                      <a href={item.url}>
+                        <span>{item.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <SidebarMenuSub>
+                      {item.items.map((subItem, subIndex) => (
+                        <SidebarMenuSubItem key={subIndex}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-menu.tsx b/apps/www/registry/default/internal/sidebar-menu.tsx
new file mode 100644
index 00000000000..db3e83a8a0a
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-menu.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: Frame,
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChart,
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: Map,
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoy,
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: Send,
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton asChild>
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sidebar-rsc.tsx b/apps/www/registry/default/internal/sidebar-rsc.tsx
new file mode 100644
index 00000000000..8912b2e18b0
--- /dev/null
+++ b/apps/www/registry/default/internal/sidebar-rsc.tsx
@@ -0,0 +1,104 @@
+import * as React from "react"
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarProvider,
+} from "@/registry/default/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: Frame,
+    badge: "24",
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChart,
+    badge: "12",
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: Map,
+    badge: "3",
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoy,
+    badge: "21",
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: Send,
+    badge: "8",
+  },
+]
+
+// Dummy fetch function
+async function fetchProjects() {
+  await new Promise((resolve) => setTimeout(resolve, 3000))
+  return projects
+}
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <React.Suspense fallback={<NavProjectsSkeleton />}>
+                <NavProjects />
+              </React.Suspense>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
+
+function NavProjectsSkeleton() {
+  return (
+    <SidebarMenu>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <SidebarMenuItem key={index}>
+          <SidebarMenuSkeleton showIcon />
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+
+async function NavProjects() {
+  const projects = await fetchProjects()
+
+  return (
+    <SidebarMenu>
+      {projects.map((project) => (
+        <SidebarMenuItem key={project.name}>
+          <SidebarMenuButton asChild>
+            <a href={project.url}>
+              <project.icon />
+              <span>{project.name}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/accordion-demo.tsx b/apps/www/registry/default/internal/sink/components/accordion-demo.tsx
new file mode 100644
index 00000000000..867862b20f2
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/accordion-demo.tsx
@@ -0,0 +1,32 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/registry/default/ui/accordion"
+
+export function AccordionDemo() {
+  return (
+    <Accordion type="single" collapsible className="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other
+          components&apos; aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/alert-demo.tsx b/apps/www/registry/default/internal/sink/components/alert-demo.tsx
new file mode 100644
index 00000000000..044f1412876
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/alert-demo.tsx
@@ -0,0 +1,19 @@
+import { Terminal } from "lucide-react"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/default/ui/alert"
+
+export function AlertDemo() {
+  return (
+    <Alert>
+      <Terminal className="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the cli.
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/alert-dialog-demo.tsx b/apps/www/registry/default/internal/sink/components/alert-dialog-demo.tsx
new file mode 100644
index 00000000000..2db8a610174
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/default/ui/alert-dialog"
+import { Button } from "@/registry/default/ui/button"
+
+export function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Show Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/app-sidebar.tsx b/apps/www/registry/default/internal/sink/components/app-sidebar.tsx
new file mode 100644
index 00000000000..0d18496fb2e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  GalleryVerticalEnd,
+  Map,
+  PieChart,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { NavMain } from "@/registry/default/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "@/registry/default/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "@/registry/default/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "@/registry/default/blocks/sidebar-07/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/default/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: GalleryVerticalEnd,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/aspect-ratio-demo.tsx b/apps/www/registry/default/internal/sink/components/aspect-ratio-demo.tsx
new file mode 100644
index 00000000000..0a2df058db4
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image"
+
+import { AspectRatio } from "@/registry/default/ui/aspect-ratio"
+
+export function AspectRatioDemo() {
+  return (
+    <AspectRatio ratio={16 / 9} className="bg-muted">
+      <Image
+        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+        alt="Photo by Drew Beamer"
+        fill
+        className="h-full w-full rounded-md object-cover"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/avatar-demo.tsx b/apps/www/registry/default/internal/sink/components/avatar-demo.tsx
new file mode 100644
index 00000000000..30798f50066
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/avatar-demo.tsx
@@ -0,0 +1,14 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+
+export function AvatarDemo() {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/badge-demo.tsx b/apps/www/registry/default/internal/sink/components/badge-demo.tsx
new file mode 100644
index 00000000000..9aca06ab9f2
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/badge-demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/default/ui/badge"
+
+export function BadgeDemo() {
+  return <Badge>Badge</Badge>
+}
diff --git a/apps/www/registry/default/internal/sink/components/badge-destructive.tsx b/apps/www/registry/default/internal/sink/components/badge-destructive.tsx
new file mode 100644
index 00000000000..db39c372b84
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/default/ui/badge"
+
+export function BadgeDestructive() {
+  return <Badge variant="destructive">Destructive</Badge>
+}
diff --git a/apps/www/registry/default/internal/sink/components/badge-outline.tsx b/apps/www/registry/default/internal/sink/components/badge-outline.tsx
new file mode 100644
index 00000000000..66fb2741b41
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/default/ui/badge"
+
+export function BadgeOutline() {
+  return <Badge variant="outline">Outline</Badge>
+}
diff --git a/apps/www/registry/default/internal/sink/components/badge-secondary.tsx b/apps/www/registry/default/internal/sink/components/badge-secondary.tsx
new file mode 100644
index 00000000000..f61b2126869
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/default/ui/badge"
+
+export function BadgeSecondary() {
+  return <Badge variant="secondary">Secondary</Badge>
+}
diff --git a/apps/www/registry/default/internal/sink/components/breadcrumb-demo.tsx b/apps/www/registry/default/internal/sink/components/breadcrumb-demo.tsx
new file mode 100644
index 00000000000..9c685cc9ee9
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/breadcrumb-demo.tsx
@@ -0,0 +1,49 @@
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+
+export function BreadcrumbDemo() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1">
+              <BreadcrumbEllipsis className="h-4 w-4" />
+              <span className="sr-only">Toggle menu</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-demo.tsx b/apps/www/registry/default/internal/sink/components/button-demo.tsx
new file mode 100644
index 00000000000..907691acf81
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-demo.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonDemo() {
+  return <Button>Button</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-destructive.tsx b/apps/www/registry/default/internal/sink/components/button-destructive.tsx
new file mode 100644
index 00000000000..946a21de4b2
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonDestructive() {
+  return <Button variant="destructive">Destructive</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-ghost.tsx b/apps/www/registry/default/internal/sink/components/button-ghost.tsx
new file mode 100644
index 00000000000..8b48327615d
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonGhost() {
+  return <Button variant="ghost">Ghost</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-link.tsx b/apps/www/registry/default/internal/sink/components/button-link.tsx
new file mode 100644
index 00000000000..279ace31bce
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-link.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonLink() {
+  return <Button variant="link">Link</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-loading.tsx b/apps/www/registry/default/internal/sink/components/button-loading.tsx
new file mode 100644
index 00000000000..64421e6eb90
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonLoading() {
+  return (
+    <Button disabled>
+      <Loader2 className="animate-spin" />
+      Please wait
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-outline.tsx b/apps/www/registry/default/internal/sink/components/button-outline.tsx
new file mode 100644
index 00000000000..2644ca8a78a
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonOutline() {
+  return <Button variant="outline">Outline</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-secondary.tsx b/apps/www/registry/default/internal/sink/components/button-secondary.tsx
new file mode 100644
index 00000000000..e16b2a50a9d
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonSecondary() {
+  return <Button variant="secondary">Secondary</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-with-icon.tsx b/apps/www/registry/default/internal/sink/components/button-with-icon.tsx
new file mode 100644
index 00000000000..9150b66fbc6
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { MailOpen } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonWithIcon() {
+  return (
+    <Button>
+      <MailOpen /> Login with Email
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/calendar-demo.tsx b/apps/www/registry/default/internal/sink/components/calendar-demo.tsx
new file mode 100644
index 00000000000..3b50ccb0a32
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/calendar-demo.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+
+export function CalendarDemo() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-md border shadow"
+    />
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/card-demo.tsx b/apps/www/registry/default/internal/sink/components/card-demo.tsx
new file mode 100644
index 00000000000..0786b28785b
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellRing, Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { Switch } from "@/registry/default/ui/switch"
+
+const notifications = [
+  {
+    title: "Your call has been confirmed.",
+    description: "1 hour ago",
+  },
+  {
+    title: "You have a new message!",
+    description: "1 hour ago",
+  },
+  {
+    title: "Your subscription is expiring soon!",
+    description: "2 hours ago",
+  },
+]
+
+type CardProps = React.ComponentProps<typeof Card>
+
+export function CardDemo({ className, ...props }: CardProps) {
+  return (
+    <Card className={cn("w-[380px]", className)} {...props}>
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>You have 3 unread messages.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className=" flex items-center space-x-4 rounded-md border p-4">
+          <BellRing />
+          <div className="flex-1 space-y-1">
+            <p className="text-sm font-medium leading-none">
+              Push Notifications
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Send notifications to device.
+            </p>
+          </div>
+          <Switch />
+        </div>
+        <div>
+          {notifications.map((notification, index) => (
+            <div
+              key={index}
+              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+            >
+              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+              <div className="space-y-1">
+                <p className="text-sm font-medium leading-none">
+                  {notification.title}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {notification.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">
+          <Check /> Mark all as read
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/carousel-demo.tsx b/apps/www/registry/default/internal/sink/components/carousel-demo.tsx
new file mode 100644
index 00000000000..ac45e594422
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/carousel-demo.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/default/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/default/ui/carousel"
+
+export function CarouselDemo() {
+  return (
+    <Carousel className="w-full max-w-xs">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/checkbox-demo.tsx b/apps/www/registry/default/internal/sink/components/checkbox-demo.tsx
new file mode 100644
index 00000000000..e56f44d02a3
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/checkbox-demo.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { Checkbox } from "@/registry/default/ui/checkbox"
+
+export function CheckboxDemo() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <label
+        htmlFor="terms"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/collapsible-demo.tsx b/apps/www/registry/default/internal/sink/components/collapsible-demo.tsx
new file mode 100644
index 00000000000..564dc9f9c39
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown } from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+
+export function CollapsibleDemo() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="w-[350px] space-y-2"
+    >
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">
+          @peduarte starred 3 repositories
+        </h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <ChevronsUpDown className="h-4 w-4" />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+        @radix-ui/primitives
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+          @radix-ui/colors
+        </div>
+        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+          @stitches/react
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/combobox-demo.tsx b/apps/www/registry/default/internal/sink/components/combobox-demo.tsx
new file mode 100644
index 00000000000..1478aa4ae83
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/combobox-demo.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/default/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+const frameworks = [
+  {
+    value: "next.js",
+    label: "Next.js",
+  },
+  {
+    value: "sveltekit",
+    label: "SvelteKit",
+  },
+  {
+    value: "nuxt.js",
+    label: "Nuxt.js",
+  },
+  {
+    value: "remix",
+    label: "Remix",
+  },
+  {
+    value: "astro",
+    label: "Astro",
+  },
+]
+
+export function ComboboxDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
+          <ChevronsUpDown className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." className="h-9" />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  {framework.label}
+                  <Check
+                    className={cn(
+                      "ml-auto",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/command-demo.tsx b/apps/www/registry/default/internal/sink/components/command-demo.tsx
new file mode 100644
index 00000000000..0e1dfd0d7a5
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/command-demo.tsx
@@ -0,0 +1,62 @@
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/registry/default/ui/command"
+
+export function CommandDemo() {
+  return (
+    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <Calendar />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <Smile />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem disabled>
+            <Calculator />
+            <span>Calculator</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <User />
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <CreditCard />
+            <span>Billing</span>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Settings />
+            <span>Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/component-wrapper.tsx b/apps/www/registry/default/internal/sink/components/component-wrapper.tsx
new file mode 100644
index 00000000000..61fe17029ad
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/component-wrapper.tsx
@@ -0,0 +1,22 @@
+import { cn } from "@/registry/default/lib/utils"
+
+export function ComponentWrapper({
+  className,
+  name,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> & { name: string }) {
+  return (
+    <div
+      className={cn("flex w-full flex-col rounded-lg border", className)}
+      {...props}
+    >
+      <div className="border-b px-4 py-3">
+        <div className="text-sm font-medium">{name}</div>
+      </div>
+      <div className="flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full">
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/context-menu-demo.tsx b/apps/www/registry/default/internal/sink/components/context-menu-demo.tsx
new file mode 100644
index 00000000000..e6c1677d173
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/context-menu-demo.tsx
@@ -0,0 +1,67 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/registry/default/ui/context-menu"
+
+export function ContextMenuDemo() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-48">
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value="pedro">
+          <ContextMenuLabel inset>People</ContextMenuLabel>
+          <ContextMenuSeparator />
+          <ContextMenuRadioItem value="pedro">
+            Pedro Duarte
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/date-picker-demo.tsx b/apps/www/registry/default/internal/sink/components/date-picker-demo.tsx
new file mode 100644
index 00000000000..fa6ec01049d
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[240px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/dialog-demo.tsx b/apps/www/registry/default/internal/sink/components/dialog-demo.tsx
new file mode 100644
index 00000000000..9ffd95110d7
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/dialog-demo.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/registry/default/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/default/ui/dialog"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/drawer-demo.tsx b/apps/www/registry/default/internal/sink/components/drawer-demo.tsx
new file mode 100644
index 00000000000..878f27088de
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/drawer-demo.tsx
@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/default/ui/drawer"
+
+const data = [
+  {
+    goal: 400,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 239,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 349,
+  },
+]
+
+export function DrawerDemo() {
+  const [goal, setGoal] = React.useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Move Goal</DrawerTitle>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 pb-0">
+            <div className="flex items-center justify-center space-x-2">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(-10)}
+                disabled={goal <= 200}
+              >
+                <Minus />
+                <span className="sr-only">Decrease</span>
+              </Button>
+              <div className="flex-1 text-center">
+                <div className="text-7xl font-bold tracking-tighter">
+                  {goal}
+                </div>
+                <div className="text-[0.70rem] uppercase text-muted-foreground">
+                  Calories/day
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(10)}
+                disabled={goal >= 400}
+              >
+                <Plus />
+                <span className="sr-only">Increase</span>
+              </Button>
+            </div>
+            <div className="mt-3 h-[120px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={data}>
+                  <Bar
+                    dataKey="goal"
+                    style={
+                      {
+                        fill: "hsl(var(--foreground))",
+                        opacity: 0.9,
+                      } as React.CSSProperties
+                    }
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/dropdown-menu-demo.tsx b/apps/www/registry/default/internal/sink/components/dropdown-menu-demo.tsx
new file mode 100644
index 00000000000..fb7a359c7f3
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/dropdown-menu-demo.tsx
@@ -0,0 +1,75 @@
+import { Button } from "@/registry/default/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+
+export function DropdownMenuDemo() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Billing
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Settings
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Keyboard shortcuts
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Team</DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>Email</DropdownMenuItem>
+                <DropdownMenuItem>Message</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>More...</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            New Team
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>GitHub</DropdownMenuItem>
+        <DropdownMenuItem>Support</DropdownMenuItem>
+        <DropdownMenuItem disabled>API</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          Log out
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/hover-card-demo.tsx b/apps/www/registry/default/internal/sink/components/hover-card-demo.tsx
new file mode 100644
index 00000000000..39fc40a6d5e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/hover-card-demo.tsx
@@ -0,0 +1,43 @@
+import { CalendarIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import { Button } from "@/registry/default/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/default/ui/hover-card"
+
+export function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="link">@nextjs</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/vercel.png" />
+            <AvatarFallback>VC</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@nextjs</h4>
+            <p className="text-sm">
+              The React Framework – created and maintained by @vercel.
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
+              <span className="text-xs text-muted-foreground">
+                Joined December 2021
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/input-demo.tsx b/apps/www/registry/default/internal/sink/components/input-demo.tsx
new file mode 100644
index 00000000000..ee5a1edcaf6
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/registry/default/ui/input"
+
+export function InputDemo() {
+  return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/www/registry/default/internal/sink/components/input-otp-demo.tsx b/apps/www/registry/default/internal/sink/components/input-otp-demo.tsx
new file mode 100644
index 00000000000..4c80e7ca2d3
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/input-otp-demo.tsx
@@ -0,0 +1,24 @@
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/registry/default/ui/input-otp"
+
+export function InputOTPDemo() {
+  return (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/label-demo.tsx b/apps/www/registry/default/internal/sink/components/label-demo.tsx
new file mode 100644
index 00000000000..c607e5e463d
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/label-demo.tsx
@@ -0,0 +1,13 @@
+import { Checkbox } from "@/registry/default/ui/checkbox"
+import { Label } from "@/registry/default/ui/label"
+
+export function LabelDemo() {
+  return (
+    <div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="terms" />
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/menubar-demo.tsx b/apps/www/registry/default/internal/sink/components/menubar-demo.tsx
new file mode 100644
index 00000000000..77f71ab6c37
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/menubar-demo.tsx
@@ -0,0 +1,107 @@
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/registry/default/ui/menubar"
+
+export function MenubarDemo() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/nav-main.tsx b/apps/www/registry/default/internal/sink/components/nav-main.tsx
new file mode 100644
index 00000000000..0856dbceb07
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/nav-main.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/default/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible
+            key={item.title}
+            asChild
+            defaultOpen={item.isActive}
+            className="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton tooltip={item.title}>
+                  {item.icon && <item.icon />}
+                  <span>{item.title}</span>
+                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  {item.items?.map((subItem) => (
+                    <SidebarMenuSubItem key={subItem.title}>
+                      <SidebarMenuSubButton asChild>
+                        <a href={subItem.url}>
+                          <span>{subItem.title}</span>
+                        </a>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/nav-projects.tsx b/apps/www/registry/default/internal/sink/components/nav-projects.tsx
new file mode 100644
index 00000000000..859912e1237
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  Forward,
+  MoreHorizontal,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Forward className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal className="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/nav-user.tsx b/apps/www/registry/default/internal/sink/components/nav-user.tsx
new file mode 100644
index 00000000000..e22c32af62e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/navigation-menu-demo.tsx b/apps/www/registry/default/internal/sink/components/navigation-menu-demo.tsx
new file mode 100644
index 00000000000..8f8b06f7b4f
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/navigation-menu-demo.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+
+import { cn } from "@/lib/utils"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/registry/default/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+export function NavigationMenuDemo() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+              <li className="row-span-3">
+                <NavigationMenuLink asChild>
+                  <a
+                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                    href="/"
+                  >
+                    <div className="mb-2 mt-4 text-lg font-medium">
+                      shadcn/ui
+                    </div>
+                    <p className="text-sm leading-tight text-muted-foreground">
+                      Beautifully designed components built with Radix UI and
+                      Tailwind CSS.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+              <ListItem href="/docs" title="Introduction">
+                Re-usable components built using Radix UI and Tailwind CSS.
+              </ListItem>
+              <ListItem href="/docs/installation" title="Installation">
+                How to install dependencies and structure your app.
+              </ListItem>
+              <ListItem href="/docs/primitives/typography" title="Typography">
+                Styles for headings, paragraphs, lists...etc
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+              {components.map((component) => (
+                <ListItem
+                  key={component.title}
+                  title={component.title}
+                  href={component.href}
+                >
+                  {component.description}
+                </ListItem>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <Link href="/docs" legacyBehavior passHref>
+            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+              Documentation
+            </NavigationMenuLink>
+          </Link>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+
+const ListItem = React.forwardRef<
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <a
+          ref={ref}
+          className={cn(
+            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+            className
+          )}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  )
+})
+ListItem.displayName = "ListItem"
diff --git a/apps/www/registry/default/internal/sink/components/pagination-demo.tsx b/apps/www/registry/default/internal/sink/components/pagination-demo.tsx
new file mode 100644
index 00000000000..abafb455ea1
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/pagination-demo.tsx
@@ -0,0 +1,38 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/registry/default/ui/pagination"
+
+export function PaginationDemo() {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/popover-demo.tsx b/apps/www/registry/default/internal/sink/components/popover-demo.tsx
new file mode 100644
index 00000000000..5cd5bd61884
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/popover-demo.tsx
@@ -0,0 +1,62 @@
+import { Button } from "@/registry/default/ui/button"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export function PopoverDemo() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxWidth">Max. width</Label>
+              <Input
+                id="maxWidth"
+                defaultValue="300px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxHeight">Max. height</Label>
+              <Input
+                id="maxHeight"
+                defaultValue="none"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/progress-demo.tsx b/apps/www/registry/default/internal/sink/components/progress-demo.tsx
new file mode 100644
index 00000000000..20b909e6e7e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/progress-demo.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import * as React from "react"
+
+import { Progress } from "@/registry/default/ui/progress"
+
+export function ProgressDemo() {
+  const [progress, setProgress] = React.useState(13)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return <Progress value={progress} className="w-[60%]" />
+}
diff --git a/apps/www/registry/default/internal/sink/components/radio-group-demo.tsx b/apps/www/registry/default/internal/sink/components/radio-group-demo.tsx
new file mode 100644
index 00000000000..627616640e1
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/radio-group-demo.tsx
@@ -0,0 +1,21 @@
+import { Label } from "@/registry/default/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/registry/default/ui/radio-group"
+
+export function RadioGroupDemo() {
+  return (
+    <RadioGroup defaultValue="comfortable">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="default" id="r1" />
+        <Label htmlFor="r1">Default</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="comfortable" id="r2" />
+        <Label htmlFor="r2">Comfortable</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="compact" id="r3" />
+        <Label htmlFor="r3">Compact</Label>
+      </div>
+    </RadioGroup>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/resizable-handle.tsx b/apps/www/registry/default/internal/sink/components/resizable-handle.tsx
new file mode 100644
index 00000000000..e754ca4e440
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/resizable-handle.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/default/ui/resizable"
+
+export function ResizableHandleDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/scroll-area-demo.tsx b/apps/www/registry/default/internal/sink/components/scroll-area-demo.tsx
new file mode 100644
index 00000000000..714f6e84ff4
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/scroll-area-demo.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { ScrollArea } from "@/registry/default/ui/scroll-area"
+import { Separator } from "@/registry/default/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+export function ScrollAreaDemo() {
+  return (
+    <ScrollArea className="h-72 w-48 rounded-md border">
+      <div className="p-4">
+        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+        {tags.map((tag) => (
+          <React.Fragment key={tag}>
+            <div className="text-sm">{tag}</div>
+            <Separator className="my-2" />
+          </React.Fragment>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/select-demo.tsx b/apps/www/registry/default/internal/sink/components/select-demo.tsx
new file mode 100644
index 00000000000..5481d23e4a3
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/select-demo.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+export function SelectDemo() {
+  return (
+    <Select>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes">Grapes</SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/separator-demo.tsx b/apps/www/registry/default/internal/sink/components/separator-demo.tsx
new file mode 100644
index 00000000000..1b54c316912
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/separator-demo.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "@/registry/default/ui/separator"
+
+export function SeparatorDemo() {
+  return (
+    <div>
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+        <p className="text-sm text-muted-foreground">
+          An open-source UI component library.
+        </p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-sm">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/sheet-demo.tsx b/apps/www/registry/default/internal/sink/components/sheet-demo.tsx
new file mode 100644
index 00000000000..fd5623f301e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/sheet-demo.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/registry/default/ui/button"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/default/ui/sheet"
+
+export function SheetDemo() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you're done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button type="submit">Save changes</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/skeleton-demo.tsx b/apps/www/registry/default/internal/sink/components/skeleton-demo.tsx
new file mode 100644
index 00000000000..a641f768b23
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/skeleton-demo.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/registry/default/ui/skeleton"
+
+export function SkeletonDemo() {
+  return (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/slider-demo.tsx b/apps/www/registry/default/internal/sink/components/slider-demo.tsx
new file mode 100644
index 00000000000..c762916dbb7
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/slider-demo.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils"
+import { Slider } from "@/registry/default/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export function SliderDemo({ className, ...props }: SliderProps) {
+  return (
+    <Slider
+      defaultValue={[50]}
+      max={100}
+      step={1}
+      className={cn("w-[60%]", className)}
+      {...props}
+    />
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/sonner-demo.tsx b/apps/www/registry/default/internal/sink/components/sonner-demo.tsx
new file mode 100644
index 00000000000..39327d5e5b9
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/sonner-demo.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { toast } from "sonner"
+
+import { Button } from "@/registry/default/ui/button"
+
+export function SonnerDemo() {
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast("Event has been created", {
+          description: "Sunday, December 03, 2023 at 9:00 AM",
+          action: {
+            label: "Undo",
+            onClick: () => console.log("Undo"),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/switch-demo.tsx b/apps/www/registry/default/internal/sink/components/switch-demo.tsx
new file mode 100644
index 00000000000..aec79cf1a32
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/switch-demo.tsx
@@ -0,0 +1,11 @@
+import { Label } from "@/registry/default/ui/label"
+import { Switch } from "@/registry/default/ui/switch"
+
+export function SwitchDemo() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch id="airplane-mode" />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/table-demo.tsx b/apps/www/registry/default/internal/sink/components/table-demo.tsx
new file mode 100644
index 00000000000..2a5d9b9a0b6
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/table-demo.tsx
@@ -0,0 +1,87 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/default/ui/table"
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
+
+export function TableDemo() {
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/tabs-demo.tsx b/apps/www/registry/default/internal/sink/components/tabs-demo.tsx
new file mode 100644
index 00000000000..19e60226bde
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/tabs-demo.tsx
@@ -0,0 +1,74 @@
+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"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/default/ui/tabs"
+
+export function TabsDemo() {
+  return (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <Card>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>
+              Make changes to your account here. Click save when you're done.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="username">Username</Label>
+              <Input id="username" defaultValue="@peduarte" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button>Save changes</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+      <TabsContent value="password">
+        <Card>
+          <CardHeader>
+            <CardTitle>Password</CardTitle>
+            <CardDescription>
+              Change your password here. After saving, you'll be logged out.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="current">Current password</Label>
+              <Input id="current" type="password" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="new">New password</Label>
+              <Input id="new" type="password" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button>Save password</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/team-switcher.tsx b/apps/www/registry/default/internal/sink/components/team-switcher.tsx
new file mode 100644
index 00000000000..febc08a7730
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/team-switcher.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">
+                  {activeTeam.name}
+                </span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/textarea-demo.tsx b/apps/www/registry/default/internal/sink/components/textarea-demo.tsx
new file mode 100644
index 00000000000..d154d0cc8c0
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/textarea-demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/registry/default/ui/textarea"
+
+export function TextareaDemo() {
+  return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/www/registry/default/internal/sink/components/toast-demo.tsx b/apps/www/registry/default/internal/sink/components/toast-demo.tsx
new file mode 100644
index 00000000000..158ead0c7be
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/toast-demo.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { useToast } from "@/registry/default/hooks/use-toast"
+import { Button } from "@/registry/default/ui/button"
+import { ToastAction } from "@/registry/default/ui/toast"
+
+export function ToastDemo() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          title: "Scheduled: Catch up ",
+          description: "Friday, February 10, 2023 at 5:57 PM",
+          action: (
+            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
+          ),
+        })
+      }}
+    >
+      Add to calendar
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/toggle-demo.tsx b/apps/www/registry/default/internal/sink/components/toggle-demo.tsx
new file mode 100644
index 00000000000..9b6cb5021d3
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from "lucide-react"
+
+import { Toggle } from "@/registry/default/ui/toggle"
+
+export function ToggleDemo() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/toggle-disabled.tsx b/apps/www/registry/default/internal/sink/components/toggle-disabled.tsx
new file mode 100644
index 00000000000..61a37137e60
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from "lucide-react"
+
+import { Toggle } from "@/registry/default/ui/toggle"
+
+export function ToggleDisabled() {
+  return (
+    <Toggle aria-label="Toggle italic" disabled>
+      <Underline className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/toggle-group-demo.tsx b/apps/www/registry/default/internal/sink/components/toggle-group-demo.tsx
new file mode 100644
index 00000000000..49782c8ac05
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/toggle-group-demo.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/default/ui/toggle-group"
+
+export function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/toggle-outline.tsx b/apps/www/registry/default/internal/sink/components/toggle-outline.tsx
new file mode 100644
index 00000000000..28aaa0aaef9
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/toggle-outline.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/default/ui/toggle"
+
+export function ToggleOutline() {
+  return (
+    <Toggle variant="outline" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/toggle-with-text.tsx b/apps/www/registry/default/internal/sink/components/toggle-with-text.tsx
new file mode 100644
index 00000000000..0728ed6023e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/default/ui/toggle"
+
+export function ToggleWithText() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Italic />
+      Italic
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/tooltip-demo.tsx b/apps/www/registry/default/internal/sink/components/tooltip-demo.tsx
new file mode 100644
index 00000000000..5fa681f878a
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/tooltip-demo.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/registry/default/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip"
+
+export function TooltipDemo() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Hover</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Add to library</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/page.tsx b/apps/www/registry/default/internal/sink/page.tsx
new file mode 100644
index 00000000000..86609b0e8ff
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/page.tsx
@@ -0,0 +1,273 @@
+import { AccordionDemo } from "@/registry/default/internal/sink/components/accordion-demo"
+import { AlertDemo } from "@/registry/default/internal/sink/components/alert-demo"
+import { AlertDialogDemo } from "@/registry/default/internal/sink/components/alert-dialog-demo"
+import { AppSidebar } from "@/registry/default/internal/sink/components/app-sidebar"
+import { AspectRatioDemo } from "@/registry/default/internal/sink/components/aspect-ratio-demo"
+import { AvatarDemo } from "@/registry/default/internal/sink/components/avatar-demo"
+import { BadgeDemo } from "@/registry/default/internal/sink/components/badge-demo"
+import { BadgeDestructive } from "@/registry/default/internal/sink/components/badge-destructive"
+import { BadgeOutline } from "@/registry/default/internal/sink/components/badge-outline"
+import { BadgeSecondary } from "@/registry/default/internal/sink/components/badge-secondary"
+import { BreadcrumbDemo } from "@/registry/default/internal/sink/components/breadcrumb-demo"
+import { ButtonDemo } from "@/registry/default/internal/sink/components/button-demo"
+import { ButtonDestructive } from "@/registry/default/internal/sink/components/button-destructive"
+import { ButtonGhost } from "@/registry/default/internal/sink/components/button-ghost"
+import { ButtonLink } from "@/registry/default/internal/sink/components/button-link"
+import { ButtonLoading } from "@/registry/default/internal/sink/components/button-loading"
+import { ButtonOutline } from "@/registry/default/internal/sink/components/button-outline"
+import { ButtonSecondary } from "@/registry/default/internal/sink/components/button-secondary"
+import { ButtonWithIcon } from "@/registry/default/internal/sink/components/button-with-icon"
+import { CalendarDemo } from "@/registry/default/internal/sink/components/calendar-demo"
+import { CardDemo } from "@/registry/default/internal/sink/components/card-demo"
+import { CarouselDemo } from "@/registry/default/internal/sink/components/carousel-demo"
+import { CheckboxDemo } from "@/registry/default/internal/sink/components/checkbox-demo"
+import { CollapsibleDemo } from "@/registry/default/internal/sink/components/collapsible-demo"
+import { ComboboxDemo } from "@/registry/default/internal/sink/components/combobox-demo"
+import { CommandDemo } from "@/registry/default/internal/sink/components/command-demo"
+import { ComponentWrapper } from "@/registry/default/internal/sink/components/component-wrapper"
+import { ContextMenuDemo } from "@/registry/default/internal/sink/components/context-menu-demo"
+import { DatePickerDemo } from "@/registry/default/internal/sink/components/date-picker-demo"
+import { DialogDemo } from "@/registry/default/internal/sink/components/dialog-demo"
+import { DrawerDemo } from "@/registry/default/internal/sink/components/drawer-demo"
+import { DropdownMenuDemo } from "@/registry/default/internal/sink/components/dropdown-menu-demo"
+import { HoverCardDemo } from "@/registry/default/internal/sink/components/hover-card-demo"
+import { InputDemo } from "@/registry/default/internal/sink/components/input-demo"
+import { InputOTPDemo } from "@/registry/default/internal/sink/components/input-otp-demo"
+import { LabelDemo } from "@/registry/default/internal/sink/components/label-demo"
+import { MenubarDemo } from "@/registry/default/internal/sink/components/menubar-demo"
+import { NavigationMenuDemo } from "@/registry/default/internal/sink/components/navigation-menu-demo"
+import { PaginationDemo } from "@/registry/default/internal/sink/components/pagination-demo"
+import { PopoverDemo } from "@/registry/default/internal/sink/components/popover-demo"
+import { ProgressDemo } from "@/registry/default/internal/sink/components/progress-demo"
+import { RadioGroupDemo } from "@/registry/default/internal/sink/components/radio-group-demo"
+import { ResizableHandleDemo } from "@/registry/default/internal/sink/components/resizable-handle"
+import { ScrollAreaDemo } from "@/registry/default/internal/sink/components/scroll-area-demo"
+import { SelectDemo } from "@/registry/default/internal/sink/components/select-demo"
+import { SeparatorDemo } from "@/registry/default/internal/sink/components/separator-demo"
+import { SheetDemo } from "@/registry/default/internal/sink/components/sheet-demo"
+import { SkeletonDemo } from "@/registry/default/internal/sink/components/skeleton-demo"
+import { SliderDemo } from "@/registry/default/internal/sink/components/slider-demo"
+import { SonnerDemo } from "@/registry/default/internal/sink/components/sonner-demo"
+import { SwitchDemo } from "@/registry/default/internal/sink/components/switch-demo"
+import { TableDemo } from "@/registry/default/internal/sink/components/table-demo"
+import { TabsDemo } from "@/registry/default/internal/sink/components/tabs-demo"
+import { TextareaDemo } from "@/registry/default/internal/sink/components/textarea-demo"
+import { ToastDemo } from "@/registry/default/internal/sink/components/toast-demo"
+import { ToggleDemo } from "@/registry/default/internal/sink/components/toggle-demo"
+import { ToggleDisabled } from "@/registry/default/internal/sink/components/toggle-disabled"
+import { ToggleGroupDemo } from "@/registry/default/internal/sink/components/toggle-group-demo"
+import { ToggleOutline } from "@/registry/default/internal/sink/components/toggle-outline"
+import { ToggleWithText } from "@/registry/default/internal/sink/components/toggle-with-text"
+import { TooltipDemo } from "@/registry/default/internal/sink/components/tooltip-demo"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function SinkPage() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <ComponentWrapper name="Accordion">
+              <AccordionDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Alert">
+              <AlertDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="AlertDialog">
+              <AlertDialogDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="AspectRatio">
+              <AspectRatioDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Avatar">
+              <AvatarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Badge">
+              <BadgeDemo />
+              <BadgeDestructive />
+              <BadgeOutline />
+              <BadgeSecondary />
+            </ComponentWrapper>
+            <ComponentWrapper name="Breadcrumb">
+              <BreadcrumbDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Button">
+              <div className="flex items-center gap-2">
+                <ButtonDemo />
+                <ButtonDestructive />
+                <ButtonGhost />
+                <ButtonLink />
+              </div>
+              <div className="flex items-center gap-2">
+                <ButtonLoading />
+                <ButtonOutline />
+                <ButtonSecondary />
+              </div>
+              <div className="flex items-center gap-2">
+                <ButtonWithIcon />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper name="Calendar">
+              <CalendarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Card">
+              <CardDemo className="w-full" />
+            </ComponentWrapper>
+            <ComponentWrapper
+              name="Carousel"
+              className="[&_.max-w-xs]:max-w-[70%]"
+            >
+              <CarouselDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Checkbox">
+              <CheckboxDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Collapsible">
+              <CollapsibleDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Combobox">
+              <ComboboxDemo />
+            </ComponentWrapper>
+            <ComponentWrapper
+              name="Command"
+              className="[&_[cmdk-root]]:md:min-w-max"
+            >
+              <CommandDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="ContextMenu">
+              <ContextMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="DatePicker">
+              <DatePickerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Dialog">
+              <DialogDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Drawer">
+              <DrawerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="DropdownMenu">
+              <DropdownMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="HoverCard">
+              <HoverCardDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Input">
+              <InputDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="InputOTP">
+              <InputOTPDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Label">
+              <LabelDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Menubar">
+              <MenubarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="NavigationMenu" className="col-span-2">
+              <NavigationMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Pagination">
+              <PaginationDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Popover">
+              <PopoverDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Progress">
+              <ProgressDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="RadioGroup">
+              <RadioGroupDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Resizable" className="col-span-2">
+              <ResizableHandleDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="ScrollArea">
+              <ScrollAreaDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Select">
+              <SelectDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Separator">
+              <SeparatorDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Sheet">
+              <SheetDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Skeleton">
+              <SkeletonDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Slider">
+              <SliderDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Sonner">
+              <SonnerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Switch">
+              <SwitchDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Table" className="col-span-2">
+              <TableDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Tabs">
+              <TabsDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Textarea">
+              <TextareaDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Toast">
+              <ToastDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Toggle">
+              <div className="flex items-center gap-2">
+                <ToggleDemo />
+                <ToggleDisabled />
+                <ToggleOutline />
+                <ToggleWithText />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper name="ToggleGroup">
+              <ToggleGroupDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Tooltip">
+              <TooltipDemo />
+            </ComponentWrapper>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/default/ui/breadcrumb.tsx b/apps/www/registry/default/ui/breadcrumb.tsx
index 71a5c325cdc..60e6c96f72f 100644
--- a/apps/www/registry/default/ui/breadcrumb.tsx
+++ b/apps/www/registry/default/ui/breadcrumb.tsx
@@ -80,7 +80,7 @@ const BreadcrumbSeparator = ({
   <li
     role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
     {...props}
   >
     {children ?? <ChevronRight />}
diff --git a/apps/www/registry/default/ui/button.tsx b/apps/www/registry/default/ui/button.tsx
index 0ba4277355f..36496a28727 100644
--- a/apps/www/registry/default/ui/button.tsx
+++ b/apps/www/registry/default/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/apps/www/registry/default/ui/calendar.tsx b/apps/www/registry/default/ui/calendar.tsx
index e04fe19511f..a4fa7f03d9b 100644
--- a/apps/www/registry/default/ui/calendar.tsx
+++ b/apps/www/registry/default/ui/calendar.tsx
@@ -1,66 +1,213 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/default/ui/button"
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+import { Button, buttonVariants } from "@/registry/new-york/ui/button"
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
   ...props
-}: CalendarProps) {
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "bg-popover absolute inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
+        ),
         day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
       }}
       {...props}
     />
   )
 }
-Calendar.displayName = "Calendar"
 
-export { Calendar }
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/apps/www/registry/default/ui/card.tsx b/apps/www/registry/default/ui/card.tsx
index afa13ecfa3b..f62edea578d 100644
--- a/apps/www/registry/default/ui/card.tsx
+++ b/apps/www/registry/default/ui/card.tsx
@@ -30,10 +30,10 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
     ref={ref}
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
@@ -45,10 +45,10 @@ const CardTitle = React.forwardRef<
 CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
diff --git a/apps/www/registry/default/ui/chart.tsx b/apps/www/registry/default/ui/chart.tsx
index 8620baa3b32..f7b762f5575 100644
--- a/apps/www/registry/default/ui/chart.tsx
+++ b/apps/www/registry/default/ui/chart.tsx
@@ -69,7 +69,7 @@ ChartContainer.displayName = "Chart"
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
+    ([, config]) => config.theme || config.color
   )
 
   if (!colorConfig.length) {
@@ -139,7 +139,7 @@ const ChartTooltipContent = React.forwardRef<
       }
 
       const [item] = payload
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`
       const itemConfig = getPayloadConfigFromPayload(config, item, key)
       const value =
         !labelKey && typeof label === "string"
@@ -185,70 +185,72 @@ const ChartTooltipContent = React.forwardRef<
       >
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
+          {payload
+            .filter((item) => item.type !== "none")
+            .map((item, index) => {
+              const key = `${nameKey || item.name || item.dataKey || "value"}`
+              const itemConfig = getPayloadConfigFromPayload(config, item, key)
+              const indicatorColor = color || item.payload.fill || item.color
+
+              return (
+                <div
+                  key={item.dataKey}
+                  className={cn(
+                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                    indicator === "dot" && "items-center"
+                  )}
+                >
+                  {formatter && item?.value !== undefined && item.name ? (
+                    formatter(item.value, item.name, item, index, item.payload)
+                  ) : (
+                    <>
+                      {itemConfig?.icon ? (
+                        <itemConfig.icon />
+                      ) : (
+                        !hideIndicator && (
+                          <div
+                            className={cn(
+                              "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                              {
+                                "h-2.5 w-2.5": indicator === "dot",
+                                "w-1": indicator === "line",
+                                "w-0 border-[1.5px] border-dashed bg-transparent":
+                                  indicator === "dashed",
+                                "my-0.5": nestLabel && indicator === "dashed",
+                              }
+                            )}
+                            style={
+                              {
+                                "--color-bg": indicatorColor,
+                                "--color-border": indicatorColor,
+                              } as React.CSSProperties
                             }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
+                          />
+                        )
                       )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
+                      <div
+                        className={cn(
+                          "flex flex-1 justify-between leading-none",
+                          nestLabel ? "items-end" : "items-center"
+                        )}
+                      >
+                        <div className="grid gap-1.5">
+                          {nestLabel ? tooltipLabel : null}
+                          <span className="text-muted-foreground">
+                            {itemConfig?.label || item.name}
+                          </span>
+                        </div>
+                        {item.value && (
+                          <span className="font-mono font-medium tabular-nums text-foreground">
+                            {item.value.toLocaleString()}
+                          </span>
+                        )}
                       </div>
-                      {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
+                    </>
+                  )}
+                </div>
+              )
+            })}
         </div>
       </div>
     )
@@ -285,31 +287,33 @@ const ChartLegendContent = React.forwardRef<
           className
         )}
       >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item) => {
+            const key = `${nameKey || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+            return (
+              <div
+                key={item.value}
+                className={cn(
+                  "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+                )}
+              >
+                {itemConfig?.icon && !hideIcon ? (
+                  <itemConfig.icon />
+                ) : (
+                  <div
+                    className="h-2 w-2 shrink-0 rounded-[2px]"
+                    style={{
+                      backgroundColor: item.color,
+                    }}
+                  />
+                )}
+                {itemConfig?.label}
+              </div>
+            )
+          })}
       </div>
     )
   }
diff --git a/apps/www/registry/default/ui/command.tsx b/apps/www/registry/default/ui/command.tsx
index 81549949632..4603919587a 100644
--- a/apps/www/registry/default/ui/command.tsx
+++ b/apps/www/registry/default/ui/command.tsx
@@ -23,9 +23,7 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
@@ -117,7 +115,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}
diff --git a/apps/www/registry/default/ui/context-menu.tsx b/apps/www/registry/default/ui/context-menu.tsx
index 93ef37ba98d..054e69894e6 100644
--- a/apps/www/registry/default/ui/context-menu.tsx
+++ b/apps/www/registry/default/ui/context-menu.tsx
@@ -46,7 +46,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
       className
     )}
     {...props}
@@ -62,7 +62,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
         className
       )}
       {...props}
diff --git a/apps/www/registry/default/ui/dialog.tsx b/apps/www/registry/default/ui/dialog.tsx
index 01ff19c7e45..f38593bdcc2 100644
--- a/apps/www/registry/default/ui/dialog.tsx
+++ b/apps/www/registry/default/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
diff --git a/apps/www/registry/default/ui/dropdown-menu.tsx b/apps/www/registry/default/ui/dropdown-menu.tsx
index f69a0d64caf..f753477768d 100644
--- a/apps/www/registry/default/ui/dropdown-menu.tsx
+++ b/apps/www/registry/default/ui/dropdown-menu.tsx
@@ -27,14 +27,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
       className
     )}
     {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
       )}
       {...props}
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
diff --git a/apps/www/registry/default/ui/form.tsx b/apps/www/registry/default/ui/form.tsx
index e96e373ced9..20bb1bb2b33 100644
--- a/apps/www/registry/default/ui/form.tsx
+++ b/apps/www/registry/default/ui/form.tsx
@@ -5,11 +5,11 @@ import * as LabelPrimitive from "@radix-ui/react-label"
 import { Slot } from "@radix-ui/react-slot"
 import {
   Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
   FormProvider,
   useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
 } from "react-hook-form"
 
 import { cn } from "@/lib/utils"
@@ -147,7 +147,7 @@ const FormMessage = React.forwardRef<
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+  const body = error ? String(error?.message ?? "") : children
 
   if (!body) {
     return null
diff --git a/apps/www/registry/default/ui/hover-card.tsx b/apps/www/registry/default/ui/hover-card.tsx
index e54d91cf81f..74efa6bee70 100644
--- a/apps/www/registry/default/ui/hover-card.tsx
+++ b/apps/www/registry/default/ui/hover-card.tsx
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
       className
     )}
     {...props}
diff --git a/apps/www/registry/default/ui/input.tsx b/apps/www/registry/default/ui/input.tsx
index a921025cebb..68551b9276b 100644
--- a/apps/www/registry/default/ui/input.tsx
+++ b/apps/www/registry/default/ui/input.tsx
@@ -2,16 +2,13 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm 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",
+          "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",
           className
         )}
         ref={ref}
diff --git a/apps/www/registry/default/ui/menubar.tsx b/apps/www/registry/default/ui/menubar.tsx
index 5586fa9b21f..7b3a71b182d 100644
--- a/apps/www/registry/default/ui/menubar.tsx
+++ b/apps/www/registry/default/ui/menubar.tsx
@@ -6,15 +6,35 @@ import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-const MenubarMenu = MenubarPrimitive.Menu
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu {...props} />
+}
 
-const MenubarGroup = MenubarPrimitive.Group
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group {...props} />
+}
 
-const MenubarPortal = MenubarPrimitive.Portal
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal {...props} />
+}
 
-const MenubarSub = MenubarPrimitive.Sub
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup {...props} />
+}
 
-const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
 
 const Menubar = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Root>,
@@ -74,7 +94,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
       className
     )}
     {...props}
@@ -97,7 +117,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
           className
         )}
         {...props}
diff --git a/apps/www/registry/default/ui/navigation-menu.tsx b/apps/www/registry/default/ui/navigation-menu.tsx
index 1419f56695b..411f5192214 100644
--- a/apps/www/registry/default/ui/navigation-menu.tsx
+++ b/apps/www/registry/default/ui/navigation-menu.tsx
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
 )
 
 const NavigationMenuTrigger = React.forwardRef<
diff --git a/apps/www/registry/default/ui/popover.tsx b/apps/www/registry/default/ui/popover.tsx
index a0ec48beee4..483dc695685 100644
--- a/apps/www/registry/default/ui/popover.tsx
+++ b/apps/www/registry/default/ui/popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
         className
       )}
       {...props}
diff --git a/apps/www/registry/default/ui/select.tsx b/apps/www/registry/default/ui/select.tsx
index cbe5a36b695..a45647c222f 100644
--- a/apps/www/registry/default/ui/select.tsx
+++ b/apps/www/registry/default/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
diff --git a/apps/www/registry/default/ui/sidebar.tsx b/apps/www/registry/default/ui/sidebar.tsx
new file mode 100644
index 00000000000..32958177bf8
--- /dev/null
+++ b/apps/www/registry/default/ui/sidebar.tsx
@@ -0,0 +1,773 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import { useIsMobile } from "@/registry/default/hooks/use-mobile"
+import { cn } from "@/registry/default/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Input } from "@/registry/default/ui/input"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/registry/default/ui/sheet"
+import { Skeleton } from "@/registry/default/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContextProps>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <SheetHeader className="sr-only">
+              <SheetTitle>Sidebar</SheetTitle>
+              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            </SheetHeader>
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden text-sidebar-foreground md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/apps/www/registry/default/ui/textarea.tsx b/apps/www/registry/default/ui/textarea.tsx
index 9f9a6dc5619..4d858bb6b02 100644
--- a/apps/www/registry/default/ui/textarea.tsx
+++ b/apps/www/registry/default/ui/textarea.tsx
@@ -2,23 +2,21 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-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-sm 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",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
+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}
+    />
+  )
+})
 Textarea.displayName = "Textarea"
 
 export { Textarea }
diff --git a/apps/www/registry/default/ui/toggle.tsx b/apps/www/registry/default/ui/toggle.tsx
index b6f2e7d320d..c19bea37315 100644
--- a/apps/www/registry/default/ui/toggle.tsx
+++ b/apps/www/registry/default/ui/toggle.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
   {
     variants: {
       variant: {
@@ -16,9 +16,9 @@ const toggleVariants = cva(
           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11",
       },
     },
     defaultVariants: {
diff --git a/apps/www/registry/default/ui/tooltip.tsx b/apps/www/registry/default/ui/tooltip.tsx
index 30fc44d90f3..e1ae87b9db8 100644
--- a/apps/www/registry/default/ui/tooltip.tsx
+++ b/apps/www/registry/default/ui/tooltip.tsx
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
       className
     )}
     {...props}
diff --git a/apps/www/registry/default/v0/sidebar-16.tsx b/apps/www/registry/default/v0/sidebar-16.tsx
new file mode 100644
index 00000000000..8cebc340960
--- /dev/null
+++ b/apps/www/registry/default/v0/sidebar-16.tsx
@@ -0,0 +1,648 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import {
+  BadgeCheck,
+  Bell,
+  BookOpen,
+  Bot,
+  ChevronRight,
+  ChevronsUpDown,
+  Command,
+  CreditCard,
+  Folder,
+  Frame,
+  LifeBuoy,
+  LogOut,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Send,
+  Settings2,
+  Share,
+  Sparkles,
+  SquareTerminal,
+  Trash2,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Icons } from "@/components/icons"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/registry/default/ui/navigation-menu"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/default/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with site header navigation."
+
+const HEADER_HEIGHT = "4rem"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+export default function Page() {
+  const [open, setOpen] = React.useState(true)
+  const { isMobile } = useSidebar()
+
+  return (
+    <div
+      style={
+        {
+          "--header-height": HEADER_HEIGHT,
+        } as React.CSSProperties
+      }
+    >
+      <header className="sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20">
+        <div className="flex items-center gap-2 w-full">
+          <Button
+            className="hidden md:flex"
+            variant="ghost"
+            size="icon"
+            onClick={() => setOpen(!open)}
+          >
+            <Sidebar />
+          </Button>
+
+          <div className="mx-auto flex items-center gap-2">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <Command className="size-4" />
+            </div>
+            <Separator orientation="vertical" className="ml-4 h-4" />
+            <NavigationMenu>
+              <NavigationMenuList>
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger className="bg-sidebar">
+                    Getting started
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                      <li className="row-span-3">
+                        <NavigationMenuLink asChild>
+                          <a
+                            className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                            href="/"
+                          >
+                            <Icons.logo className="h-6 w-6" />
+                            <div className="mb-2 mt-4 text-lg font-medium">
+                              shadcn/ui
+                            </div>
+                            <p className="text-sm leading-tight text-muted-foreground">
+                              Beautifully designed components built with Radix
+                              UI and Tailwind CSS.
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+
+                      <li>
+                        <NavigationMenuLink asChild>
+                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                            <div className="text-sm font-medium leading-none">
+                              Introduction
+                            </div>
+                            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                              Re-usable components built using Radix UI and
+                              Tailwind CSS.
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+
+                      <li>
+                        <NavigationMenuLink asChild>
+                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                            <div className="text-sm font-medium leading-none">
+                              Installation
+                            </div>
+                            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                              How to install dependencies and structure your
+                              app.
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+
+                      <li>
+                        <NavigationMenuLink asChild>
+                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                            <div className="text-sm font-medium leading-none">
+                              Typography
+                            </div>
+                            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                              Styles for headings, paragraphs, lists...etc
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger className="bg-sidebar">
+                    Components
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                      {components.map((component) => (
+                        <li>
+                          <NavigationMenuLink key={component.title} asChild>
+                            <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                              <div className="text-sm font-medium leading-none">
+                                {component.title}
+                              </div>
+                              <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                {component.description}
+                              </p>
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                      ))}
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                  <Link href="/docs" legacyBehavior passHref>
+                    <NavigationMenuLink
+                      className={cn(navigationMenuTriggerStyle(), "bg-sidebar")}
+                    >
+                      Documentation
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+              </NavigationMenuList>
+            </NavigationMenu>
+          </div>
+        </div>
+      </header>
+      <SidebarProvider open={open} onOpenChange={setOpen}>
+        <Sidebar
+          className="top-[--header-height] pb-[--header-height]"
+          variant="inset"
+        >
+          <SidebarHeader>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton size="lg" asChild>
+                  <a href="#">
+                    <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                      <Command className="size-4" />
+                    </div>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">Acme Inc</span>
+                      <span className="truncate text-xs">Enterprise</span>
+                    </div>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Platform</SidebarGroupLabel>
+              <SidebarMenu>
+                {data.navMain.map((item) => (
+                  <Collapsible
+                    key={item.title}
+                    asChild
+                    defaultOpen={item.isActive}
+                  >
+                    <SidebarMenuItem>
+                      <SidebarMenuButton asChild tooltip={item.title}>
+                        <a href={item.url}>
+                          <item.icon />
+                          <span>{item.title}</span>
+                        </a>
+                      </SidebarMenuButton>
+                      {item.items?.length ? (
+                        <>
+                          <CollapsibleTrigger asChild>
+                            <SidebarMenuAction className="data-[state=open]:rotate-90">
+                              <ChevronRight />
+                              <span className="sr-only">Toggle</span>
+                            </SidebarMenuAction>
+                          </CollapsibleTrigger>
+                          <CollapsibleContent>
+                            <SidebarMenuSub>
+                              {item.items?.map((subItem) => (
+                                <SidebarMenuSubItem key={subItem.title}>
+                                  <SidebarMenuSubButton asChild>
+                                    <a href={subItem.url}>
+                                      <span>{subItem.title}</span>
+                                    </a>
+                                  </SidebarMenuSubButton>
+                                </SidebarMenuSubItem>
+                              ))}
+                            </SidebarMenuSub>
+                          </CollapsibleContent>
+                        </>
+                      ) : null}
+                    </SidebarMenuItem>
+                  </Collapsible>
+                ))}
+              </SidebarMenu>
+            </SidebarGroup>
+            <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+              <SidebarGroupLabel>Projects</SidebarGroupLabel>
+              <SidebarMenu>
+                {data.projects.map((item) => (
+                  <SidebarMenuItem key={item.name}>
+                    <SidebarMenuButton asChild>
+                      <a href={item.url}>
+                        <item.icon />
+                        <span>{item.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                          <MoreHorizontal />
+                          <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        className="w-48"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                      >
+                        <DropdownMenuItem>
+                          <Folder className="text-muted-foreground" />
+                          <span>View Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Share className="text-muted-foreground" />
+                          <span>Share Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                          <Trash2 className="text-muted-foreground" />
+                          <span>Delete Project</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </SidebarMenuItem>
+                ))}
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <MoreHorizontal />
+                    <span>More</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroup>
+            <SidebarGroup className="mt-auto">
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {data.navSecondary.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton asChild size="sm">
+                        <a href={item.url}>
+                          <item.icon />
+                          <span>{item.title}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarFooter>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <SidebarMenuButton
+                      size="lg"
+                      className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                    >
+                      <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage
+                          src={data.user.avatar}
+                          alt={data.user.name}
+                        />
+                        <AvatarFallback className="rounded-lg">
+                          CN
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                          {data.user.name}
+                        </span>
+                        <span className="truncate text-xs">
+                          {data.user.email}
+                        </span>
+                      </div>
+                      <ChevronsUpDown className="ml-auto size-4" />
+                    </SidebarMenuButton>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                    side={isMobile ? "bottom" : "right"}
+                    align="end"
+                    sideOffset={4}
+                  >
+                    <DropdownMenuLabel className="p-0 font-normal">
+                      <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                          <AvatarImage
+                            src={data.user.avatar}
+                            alt={data.user.name}
+                          />
+                          <AvatarFallback className="rounded-lg">
+                            CN
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                          <span className="truncate font-semibold">
+                            {data.user.name}
+                          </span>
+                          <span className="truncate text-xs">
+                            {data.user.email}
+                          </span>
+                        </div>
+                      </div>
+                    </DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                      <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                      <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>
+                      <LogOut />
+                      Log out
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarFooter>
+        </Sidebar>
+
+        <SidebarInset>
+          <header className=" flex shrink-0 items-center gap-2 border-b py-2">
+            <div className="flex items-center gap-2 px-4 py-2">
+              <div className="flex md:hidden items-center gap-2">
+                <SidebarTrigger />
+                <Separator orientation="vertical" className="mr-2 h-4" />
+              </div>
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink href="#">
+                      Building Your Application
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+          </header>
+          <div className="flex flex-1 flex-col gap-4 p-4">
+            <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+              <div className="aspect-video rounded-xl bg-muted/50" />
+              <div className="aspect-video rounded-xl bg-muted/50" />
+              <div className="aspect-video rounded-xl bg-muted/50" />
+            </div>
+            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  )
+}
diff --git a/apps/www/registry/index.ts b/apps/www/registry/index.ts
index 4d5fbf0d811..2195ca4f876 100644
--- a/apps/www/registry/index.ts
+++ b/apps/www/registry/index.ts
@@ -1,18 +1,62 @@
+import { type Registry } from "shadcn/schema"
+import { z } from "zod"
+
 import { blocks } from "@/registry/registry-blocks"
 import { charts } from "@/registry/registry-charts"
 import { examples } from "@/registry/registry-examples"
 import { hooks } from "@/registry/registry-hooks"
+import { internal } from "@/registry/registry-internal"
 import { lib } from "@/registry/registry-lib"
 import { themes } from "@/registry/registry-themes"
 import { ui } from "@/registry/registry-ui"
-import { Registry } from "@/registry/schema"
 
-export const registry: Registry = [
-  ...ui,
-  ...examples,
-  ...blocks,
-  ...charts,
-  ...lib,
-  ...hooks,
-  ...themes,
-]
+export const registry = {
+  name: "shadcn/ui",
+  homepage: "https://ui.shadcn.com",
+  items: [
+    {
+      name: "index",
+      type: "registry:style",
+      dependencies: [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react",
+      ],
+      registryDependencies: ["utils"],
+      tailwind: {
+        config: {
+          plugins: ['require("tailwindcss-animate")'],
+        },
+      },
+      cssVars: {},
+      files: [],
+    },
+    {
+      name: "style",
+      type: "registry:style",
+      dependencies: [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react",
+      ],
+      registryDependencies: ["utils"],
+      tailwind: {
+        config: {
+          plugins: ['require("tailwindcss-animate")'],
+        },
+      },
+      cssVars: {},
+      files: [],
+    },
+    ...ui,
+    ...blocks,
+    ...charts,
+    ...lib,
+    ...hooks,
+    ...themes,
+
+    // Internal use only.
+    ...internal,
+    ...examples,
+  ],
+} satisfies Registry
diff --git a/apps/www/registry/new-york/block/authentication-01.tsx b/apps/www/registry/new-york/block/authentication-01.tsx
deleted file mode 100644
index 84e1e4575bf..00000000000
--- a/apps/www/registry/new-york/block/authentication-01.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/authentication-02.tsx b/apps/www/registry/new-york/block/authentication-02.tsx
deleted file mode 100644
index bb1517bee41..00000000000
--- a/apps/www/registry/new-york/block/authentication-02.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/authentication-03.tsx b/apps/www/registry/new-york/block/authentication-03.tsx
deleted file mode 100644
index 727f9ed3c87..00000000000
--- a/apps/www/registry/new-york/block/authentication-03.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/authentication-04.tsx b/apps/www/registry/new-york/block/authentication-04.tsx
deleted file mode 100644
index cee34f6c650..00000000000
--- a/apps/www/registry/new-york/block/authentication-04.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/chart-area-interactive.tsx b/apps/www/registry/new-york/block/chart-area-interactive.tsx
deleted file mode 100644
index 1cd672af11c..00000000000
--- a/apps/www/registry/new-york/block/chart-area-interactive.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/ui/chart"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-
-export const description = "An interactive area chart"
-
-const chartData = [
-  { date: "2024-04-01", desktop: 222, mobile: 150 },
-  { date: "2024-04-02", desktop: 97, mobile: 180 },
-  { date: "2024-04-03", desktop: 167, mobile: 120 },
-  { date: "2024-04-04", desktop: 242, mobile: 260 },
-  { date: "2024-04-05", desktop: 373, mobile: 290 },
-  { date: "2024-04-06", desktop: 301, mobile: 340 },
-  { date: "2024-04-07", desktop: 245, mobile: 180 },
-  { date: "2024-04-08", desktop: 409, mobile: 320 },
-  { date: "2024-04-09", desktop: 59, mobile: 110 },
-  { date: "2024-04-10", desktop: 261, mobile: 190 },
-  { date: "2024-04-11", desktop: 327, mobile: 350 },
-  { date: "2024-04-12", desktop: 292, mobile: 210 },
-  { date: "2024-04-13", desktop: 342, mobile: 380 },
-  { date: "2024-04-14", desktop: 137, mobile: 220 },
-  { date: "2024-04-15", desktop: 120, mobile: 170 },
-  { date: "2024-04-16", desktop: 138, mobile: 190 },
-  { date: "2024-04-17", desktop: 446, mobile: 360 },
-  { date: "2024-04-18", desktop: 364, mobile: 410 },
-  { date: "2024-04-19", desktop: 243, mobile: 180 },
-  { date: "2024-04-20", desktop: 89, mobile: 150 },
-  { date: "2024-04-21", desktop: 137, mobile: 200 },
-  { date: "2024-04-22", desktop: 224, mobile: 170 },
-  { date: "2024-04-23", desktop: 138, mobile: 230 },
-  { date: "2024-04-24", desktop: 387, mobile: 290 },
-  { date: "2024-04-25", desktop: 215, mobile: 250 },
-  { date: "2024-04-26", desktop: 75, mobile: 130 },
-  { date: "2024-04-27", desktop: 383, mobile: 420 },
-  { date: "2024-04-28", desktop: 122, mobile: 180 },
-  { date: "2024-04-29", desktop: 315, mobile: 240 },
-  { date: "2024-04-30", desktop: 454, mobile: 380 },
-  { date: "2024-05-01", desktop: 165, mobile: 220 },
-  { date: "2024-05-02", desktop: 293, mobile: 310 },
-  { date: "2024-05-03", desktop: 247, mobile: 190 },
-  { date: "2024-05-04", desktop: 385, mobile: 420 },
-  { date: "2024-05-05", desktop: 481, mobile: 390 },
-  { date: "2024-05-06", desktop: 498, mobile: 520 },
-  { date: "2024-05-07", desktop: 388, mobile: 300 },
-  { date: "2024-05-08", desktop: 149, mobile: 210 },
-  { date: "2024-05-09", desktop: 227, mobile: 180 },
-  { date: "2024-05-10", desktop: 293, mobile: 330 },
-  { date: "2024-05-11", desktop: 335, mobile: 270 },
-  { date: "2024-05-12", desktop: 197, mobile: 240 },
-  { date: "2024-05-13", desktop: 197, mobile: 160 },
-  { date: "2024-05-14", desktop: 448, mobile: 490 },
-  { date: "2024-05-15", desktop: 473, mobile: 380 },
-  { date: "2024-05-16", desktop: 338, mobile: 400 },
-  { date: "2024-05-17", desktop: 499, mobile: 420 },
-  { date: "2024-05-18", desktop: 315, mobile: 350 },
-  { date: "2024-05-19", desktop: 235, mobile: 180 },
-  { date: "2024-05-20", desktop: 177, mobile: 230 },
-  { date: "2024-05-21", desktop: 82, mobile: 140 },
-  { date: "2024-05-22", desktop: 81, mobile: 120 },
-  { date: "2024-05-23", desktop: 252, mobile: 290 },
-  { date: "2024-05-24", desktop: 294, mobile: 220 },
-  { date: "2024-05-25", desktop: 201, mobile: 250 },
-  { date: "2024-05-26", desktop: 213, mobile: 170 },
-  { date: "2024-05-27", desktop: 420, mobile: 460 },
-  { date: "2024-05-28", desktop: 233, mobile: 190 },
-  { date: "2024-05-29", desktop: 78, mobile: 130 },
-  { date: "2024-05-30", desktop: 340, mobile: 280 },
-  { date: "2024-05-31", desktop: 178, mobile: 230 },
-  { date: "2024-06-01", desktop: 178, mobile: 200 },
-  { date: "2024-06-02", desktop: 470, mobile: 410 },
-  { date: "2024-06-03", desktop: 103, mobile: 160 },
-  { date: "2024-06-04", desktop: 439, mobile: 380 },
-  { date: "2024-06-05", desktop: 88, mobile: 140 },
-  { date: "2024-06-06", desktop: 294, mobile: 250 },
-  { date: "2024-06-07", desktop: 323, mobile: 370 },
-  { date: "2024-06-08", desktop: 385, mobile: 320 },
-  { date: "2024-06-09", desktop: 438, mobile: 480 },
-  { date: "2024-06-10", desktop: 155, mobile: 200 },
-  { date: "2024-06-11", desktop: 92, mobile: 150 },
-  { date: "2024-06-12", desktop: 492, mobile: 420 },
-  { date: "2024-06-13", desktop: 81, mobile: 130 },
-  { date: "2024-06-14", desktop: 426, mobile: 380 },
-  { date: "2024-06-15", desktop: 307, mobile: 350 },
-  { date: "2024-06-16", desktop: 371, mobile: 310 },
-  { date: "2024-06-17", desktop: 475, mobile: 520 },
-  { date: "2024-06-18", desktop: 107, mobile: 170 },
-  { date: "2024-06-19", desktop: 341, mobile: 290 },
-  { date: "2024-06-20", desktop: 408, mobile: 450 },
-  { date: "2024-06-21", desktop: 169, mobile: 210 },
-  { date: "2024-06-22", desktop: 317, mobile: 270 },
-  { date: "2024-06-23", desktop: 480, mobile: 530 },
-  { date: "2024-06-24", desktop: 132, mobile: 180 },
-  { date: "2024-06-25", desktop: 141, mobile: 190 },
-  { date: "2024-06-26", desktop: 434, mobile: 380 },
-  { date: "2024-06-27", desktop: 448, mobile: 490 },
-  { date: "2024-06-28", desktop: 149, mobile: 200 },
-  { date: "2024-06-29", desktop: 103, mobile: 160 },
-  { date: "2024-06-30", desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  desktop: {
-    label: "Desktop",
-    color: "hsl(var(--chart-1))",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  const [timeRange, setTimeRange] = React.useState("90d")
-
-  const filteredData = chartData.filter((item) => {
-    const date = new Date(item.date)
-    const now = new Date()
-    let daysToSubtract = 90
-    if (timeRange === "30d") {
-      daysToSubtract = 30
-    } else if (timeRange === "7d") {
-      daysToSubtract = 7
-    }
-    now.setDate(now.getDate() - daysToSubtract)
-    return date >= now
-  })
-
-  return (
-    <Card>
-      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
-        <div className="grid flex-1 gap-1 text-center sm:text-left">
-          <CardTitle>Area Chart - Interactive</CardTitle>
-          <CardDescription>
-            Showing total visitors for the last 3 months
-          </CardDescription>
-        </div>
-        <Select value={timeRange} onValueChange={setTimeRange}>
-          <SelectTrigger
-            className="w-[160px] rounded-lg sm:ml-auto"
-            aria-label="Select a value"
-          >
-            <SelectValue placeholder="Last 3 months" />
-          </SelectTrigger>
-          <SelectContent className="rounded-xl">
-            <SelectItem value="90d" className="rounded-lg">
-              Last 3 months
-            </SelectItem>
-            <SelectItem value="30d" className="rounded-lg">
-              Last 30 days
-            </SelectItem>
-            <SelectItem value="7d" className="rounded-lg">
-              Last 7 days
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </CardHeader>
-      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
-        <ChartContainer
-          config={chartConfig}
-          className="aspect-auto h-[250px] w-full"
-        >
-          <AreaChart data={filteredData}>
-            <defs>
-              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-            </defs>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              minTickGap={32}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                return date.toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                })
-              }}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={
-                <ChartTooltipContent
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }}
-                  indicator="dot"
-                />
-              }
-            />
-            <Area
-              dataKey="mobile"
-              type="natural"
-              fill="url(#fillMobile)"
-              stroke="var(--color-mobile)"
-              stackId="a"
-            />
-            <Area
-              dataKey="desktop"
-              type="natural"
-              fill="url(#fillDesktop)"
-              stroke="var(--color-desktop)"
-              stackId="a"
-            />
-            <ChartLegend content={<ChartLegendContent />} />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/chart-tooltip-default.tsx b/apps/www/registry/new-york/block/chart-tooltip-default.tsx
deleted file mode 100644
index 93fe696fa43..00000000000
--- a/apps/www/registry/new-york/block/chart-tooltip-default.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/ui/chart"
-
-export const description = "A stacked bar chart with a legend"
-
-const chartData = [
-  { date: "2024-07-15", running: 450, swimming: 300 },
-  { date: "2024-07-16", running: 380, swimming: 420 },
-  { date: "2024-07-17", running: 520, swimming: 120 },
-  { date: "2024-07-18", running: 140, swimming: 550 },
-  { date: "2024-07-19", running: 600, swimming: 350 },
-  { date: "2024-07-20", running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-  running: {
-    label: "Running",
-    color: "hsl(var(--chart-1))",
-  },
-  swimming: {
-    label: "Swimming",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Tooltip - Default</CardTitle>
-        <CardDescription>
-          Default tooltip with ChartTooltipContent.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <BarChart accessibilityLayer data={chartData}>
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <Bar
-              dataKey="running"
-              stackId="a"
-              fill="var(--color-running)"
-              radius={[0, 0, 4, 4]}
-            />
-            <Bar
-              dataKey="swimming"
-              stackId="a"
-              fill="var(--color-swimming)"
-              radius={[4, 4, 0, 0]}
-            />
-            <ChartTooltip
-              content={<ChartTooltipContent />}
-              cursor={false}
-              defaultIndex={1}
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/chart-tooltip-indicator-line.tsx b/apps/www/registry/new-york/block/chart-tooltip-indicator-line.tsx
deleted file mode 100644
index 431dbf6719d..00000000000
--- a/apps/www/registry/new-york/block/chart-tooltip-indicator-line.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/ui/chart"
-
-export const description = "A stacked bar chart with a legend"
-
-const chartData = [
-  { date: "2024-07-15", running: 450, swimming: 300 },
-  { date: "2024-07-16", running: 380, swimming: 420 },
-  { date: "2024-07-17", running: 520, swimming: 120 },
-  { date: "2024-07-18", running: 140, swimming: 550 },
-  { date: "2024-07-19", running: 600, swimming: 350 },
-  { date: "2024-07-20", running: 480, swimming: 400 },
-]
-
-const chartConfig = {
-  running: {
-    label: "Running",
-    color: "hsl(var(--chart-1))",
-  },
-  swimming: {
-    label: "Swimming",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Tooltip - Line Indicator</CardTitle>
-        <CardDescription>Tooltip with line indicator.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <BarChart accessibilityLayer data={chartData}>
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <Bar
-              dataKey="running"
-              stackId="a"
-              fill="var(--color-running)"
-              radius={[0, 0, 4, 4]}
-            />
-            <Bar
-              dataKey="swimming"
-              stackId="a"
-              fill="var(--color-swimming)"
-              radius={[4, 4, 0, 0]}
-            />
-            <ChartTooltip
-              content={<ChartTooltipContent indicator="line" />}
-              cursor={false}
-              defaultIndex={1}
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-0.tsx b/apps/www/registry/new-york/block/charts-01-chunk-0.tsx
deleted file mode 100644
index 38d65597661..00000000000
--- a/apps/www/registry/new-york/block/charts-01-chunk-0.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client"
-
-import { Bar, BarChart, Label, Rectangle, ReferenceLine, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york//ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york//ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
-      <CardHeader className="space-y-0 pb-2">
-        <CardDescription>Today</CardDescription>
-        <CardTitle className="text-4xl tabular-nums">
-          12,584{" "}
-          <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-            steps
-          </span>
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer
-          config={{
-            steps: {
-              label: "Steps",
-              color: "hsl(var(--chart-1))",
-            },
-          }}
-        >
-          <BarChart
-            accessibilityLayer
-            margin={{
-              left: -4,
-              right: -4,
-            }}
-            data={[
-              {
-                date: "2024-01-01",
-                steps: 2000,
-              },
-              {
-                date: "2024-01-02",
-                steps: 2100,
-              },
-              {
-                date: "2024-01-03",
-                steps: 2200,
-              },
-              {
-                date: "2024-01-04",
-                steps: 1300,
-              },
-              {
-                date: "2024-01-05",
-                steps: 1400,
-              },
-              {
-                date: "2024-01-06",
-                steps: 2500,
-              },
-              {
-                date: "2024-01-07",
-                steps: 1600,
-              },
-            ]}
-          >
-            <Bar
-              dataKey="steps"
-              fill="var(--color-steps)"
-              radius={5}
-              fillOpacity={0.6}
-              activeBar={<Rectangle fillOpacity={0.8} />}
-            />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={4}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <ChartTooltip
-              defaultIndex={2}
-              content={
-                <ChartTooltipContent
-                  hideIndicator
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      day: "numeric",
-                      month: "long",
-                      year: "numeric",
-                    })
-                  }}
-                />
-              }
-              cursor={false}
-            />
-            <ReferenceLine
-              y={1200}
-              stroke="hsl(var(--muted-foreground))"
-              strokeDasharray="3 3"
-              strokeWidth={1}
-            >
-              <Label
-                position="insideBottomLeft"
-                value="Average Steps"
-                offset={10}
-                fill="hsl(var(--foreground))"
-              />
-              <Label
-                position="insideTopLeft"
-                value="12,343"
-                className="text-lg"
-                fill="hsl(var(--foreground))"
-                offset={10}
-                startOffset={100}
-              />
-            </ReferenceLine>
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col items-start gap-1">
-        <CardDescription>
-          Over the past 7 days, you have walked{" "}
-          <span className="font-medium text-foreground">53,305</span> steps.
-        </CardDescription>
-        <CardDescription>
-          You need <span className="font-medium text-foreground">12,584</span>{" "}
-          more steps to reach your goal.
-        </CardDescription>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-1.tsx b/apps/www/registry/new-york/block/charts-01-chunk-1.tsx
deleted file mode 100644
index 8a2cd35b735..00000000000
--- a/apps/www/registry/new-york/block/charts-01-chunk-1.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-"use client"
-
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york//ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york//ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
-      <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
-        <div>
-          <CardDescription>Resting HR</CardDescription>
-          <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-            62
-            <span className="text-sm font-normal tracking-normal text-muted-foreground">
-              bpm
-            </span>
-          </CardTitle>
-        </div>
-        <div>
-          <CardDescription>Variability</CardDescription>
-          <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-            35
-            <span className="text-sm font-normal tracking-normal text-muted-foreground">
-              ms
-            </span>
-          </CardTitle>
-        </div>
-      </CardHeader>
-      <CardContent className="flex flex-1 items-center">
-        <ChartContainer
-          config={{
-            resting: {
-              label: "Resting",
-              color: "hsl(var(--chart-1))",
-            },
-          }}
-          className="w-full"
-        >
-          <LineChart
-            accessibilityLayer
-            margin={{
-              left: 14,
-              right: 14,
-              top: 10,
-            }}
-            data={[
-              {
-                date: "2024-01-01",
-                resting: 62,
-              },
-              {
-                date: "2024-01-02",
-                resting: 72,
-              },
-              {
-                date: "2024-01-03",
-                resting: 35,
-              },
-              {
-                date: "2024-01-04",
-                resting: 62,
-              },
-              {
-                date: "2024-01-05",
-                resting: 52,
-              },
-              {
-                date: "2024-01-06",
-                resting: 62,
-              },
-              {
-                date: "2024-01-07",
-                resting: 70,
-              },
-            ]}
-          >
-            <CartesianGrid
-              strokeDasharray="4 4"
-              vertical={false}
-              stroke="hsl(var(--muted-foreground))"
-              strokeOpacity={0.5}
-            />
-            <YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  weekday: "short",
-                })
-              }}
-            />
-            <Line
-              dataKey="resting"
-              type="natural"
-              fill="var(--color-resting)"
-              stroke="var(--color-resting)"
-              strokeWidth={2}
-              dot={false}
-              activeDot={{
-                fill: "var(--color-resting)",
-                stroke: "var(--color-resting)",
-                r: 4,
-              }}
-            />
-            <ChartTooltip
-              content={
-                <ChartTooltipContent
-                  indicator="line"
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      day: "numeric",
-                      month: "long",
-                      year: "numeric",
-                    })
-                  }}
-                />
-              }
-              cursor={false}
-            />
-          </LineChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-2.tsx b/apps/www/registry/new-york/block/charts-01-chunk-2.tsx
deleted file mode 100644
index e3043609a5a..00000000000
--- a/apps/www/registry/new-york/block/charts-01-chunk-2.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client"
-
-import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york//ui/card"
-import { ChartContainer } from "@/registry/new-york//ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-2">
-      <CardHeader>
-        <CardTitle>Progress</CardTitle>
-        <CardDescription>
-          You're average more steps a day this year than last year.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="grid auto-rows-min gap-2">
-          <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-            12,453
-            <span className="text-sm font-normal text-muted-foreground">
-              steps/day
-            </span>
-          </div>
-          <ChartContainer
-            config={{
-              steps: {
-                label: "Steps",
-                color: "hsl(var(--chart-1))",
-              },
-            }}
-            className="aspect-auto h-[32px] w-full"
-          >
-            <BarChart
-              accessibilityLayer
-              layout="vertical"
-              margin={{
-                left: 0,
-                top: 0,
-                right: 0,
-                bottom: 0,
-              }}
-              data={[
-                {
-                  date: "2024",
-                  steps: 12435,
-                },
-              ]}
-            >
-              <Bar
-                dataKey="steps"
-                fill="var(--color-steps)"
-                radius={4}
-                barSize={32}
-              >
-                <LabelList
-                  position="insideLeft"
-                  dataKey="date"
-                  offset={8}
-                  fontSize={12}
-                  fill="white"
-                />
-              </Bar>
-              <YAxis dataKey="date" type="category" tickCount={1} hide />
-              <XAxis dataKey="steps" type="number" hide />
-            </BarChart>
-          </ChartContainer>
-        </div>
-        <div className="grid auto-rows-min gap-2">
-          <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-            10,103
-            <span className="text-sm font-normal text-muted-foreground">
-              steps/day
-            </span>
-          </div>
-          <ChartContainer
-            config={{
-              steps: {
-                label: "Steps",
-                color: "hsl(var(--muted))",
-              },
-            }}
-            className="aspect-auto h-[32px] w-full"
-          >
-            <BarChart
-              accessibilityLayer
-              layout="vertical"
-              margin={{
-                left: 0,
-                top: 0,
-                right: 0,
-                bottom: 0,
-              }}
-              data={[
-                {
-                  date: "2023",
-                  steps: 10103,
-                },
-              ]}
-            >
-              <Bar
-                dataKey="steps"
-                fill="var(--color-steps)"
-                radius={4}
-                barSize={32}
-              >
-                <LabelList
-                  position="insideLeft"
-                  dataKey="date"
-                  offset={8}
-                  fontSize={12}
-                  fill="hsl(var(--muted-foreground))"
-                />
-              </Bar>
-              <YAxis dataKey="date" type="category" tickCount={1} hide />
-              <XAxis dataKey="steps" type="number" hide />
-            </BarChart>
-          </ChartContainer>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-3.tsx b/apps/www/registry/new-york/block/charts-01-chunk-3.tsx
deleted file mode 100644
index 0e520f38388..00000000000
--- a/apps/www/registry/new-york/block/charts-01-chunk-3.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client"
-
-import { Bar, BarChart, Rectangle, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york//ui/card"
-import { ChartContainer } from "@/registry/new-york//ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-3">
-      <CardHeader className="p-4 pb-0">
-        <CardTitle>Walking Distance</CardTitle>
-        <CardDescription>
-          Over the last 7 days, your distance walked and run was 12.5 miles per
-          day.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
-        <div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
-          12.5
-          <span className="text-sm font-normal text-muted-foreground">
-            miles/day
-          </span>
-        </div>
-        <ChartContainer
-          config={{
-            steps: {
-              label: "Steps",
-              color: "hsl(var(--chart-1))",
-            },
-          }}
-          className="ml-auto w-[72px]"
-        >
-          <BarChart
-            accessibilityLayer
-            margin={{
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-            }}
-            data={[
-              {
-                date: "2024-01-01",
-                steps: 2000,
-              },
-              {
-                date: "2024-01-02",
-                steps: 2100,
-              },
-              {
-                date: "2024-01-03",
-                steps: 2200,
-              },
-              {
-                date: "2024-01-04",
-                steps: 1300,
-              },
-              {
-                date: "2024-01-05",
-                steps: 1400,
-              },
-              {
-                date: "2024-01-06",
-                steps: 2500,
-              },
-              {
-                date: "2024-01-07",
-                steps: 1600,
-              },
-            ]}
-          >
-            <Bar
-              dataKey="steps"
-              fill="var(--color-steps)"
-              radius={2}
-              fillOpacity={0.2}
-              activeIndex={6}
-              activeBar={<Rectangle fillOpacity={0.8} />}
-            />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={4}
-              hide
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-4.tsx b/apps/www/registry/new-york/block/charts-01-chunk-4.tsx
deleted file mode 100644
index 958ddd39189..00000000000
--- a/apps/www/registry/new-york/block/charts-01-chunk-4.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client"
-
-import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts"
-
-import { Card, CardContent, CardFooter } from "@/registry/new-york//ui/card"
-import { ChartContainer } from "@/registry/new-york//ui/chart"
-import { Separator } from "@/registry/new-york//ui/separator"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-4">
-      <CardContent className="flex gap-4 p-4 pb-2">
-        <ChartContainer
-          config={{
-            move: {
-              label: "Move",
-              color: "hsl(var(--chart-1))",
-            },
-            stand: {
-              label: "Stand",
-              color: "hsl(var(--chart-2))",
-            },
-            exercise: {
-              label: "Exercise",
-              color: "hsl(var(--chart-3))",
-            },
-          }}
-          className="h-[140px] w-full"
-        >
-          <BarChart
-            margin={{
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 10,
-            }}
-            data={[
-              {
-                activity: "stand",
-                value: (8 / 12) * 100,
-                label: "8/12 hr",
-                fill: "var(--color-stand)",
-              },
-              {
-                activity: "exercise",
-                value: (46 / 60) * 100,
-                label: "46/60 min",
-                fill: "var(--color-exercise)",
-              },
-              {
-                activity: "move",
-                value: (245 / 360) * 100,
-                label: "245/360 kcal",
-                fill: "var(--color-move)",
-              },
-            ]}
-            layout="vertical"
-            barSize={32}
-            barGap={2}
-          >
-            <XAxis type="number" dataKey="value" hide />
-            <YAxis
-              dataKey="activity"
-              type="category"
-              tickLine={false}
-              tickMargin={4}
-              axisLine={false}
-              className="capitalize"
-            />
-            <Bar dataKey="value" radius={5}>
-              <LabelList
-                position="insideLeft"
-                dataKey="label"
-                fill="white"
-                offset={8}
-                fontSize={12}
-              />
-            </Bar>
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex flex-row border-t p-4">
-        <div className="flex w-full items-center gap-2">
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-xs text-muted-foreground">Move</div>
-            <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-              562
-              <span className="text-sm font-normal text-muted-foreground">
-                kcal
-              </span>
-            </div>
-          </div>
-          <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-xs text-muted-foreground">Exercise</div>
-            <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-              73
-              <span className="text-sm font-normal text-muted-foreground">
-                min
-              </span>
-            </div>
-          </div>
-          <Separator orientation="vertical" className="mx-2 h-10 w-px" />
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-xs text-muted-foreground">Stand</div>
-            <div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
-              14
-              <span className="text-sm font-normal text-muted-foreground">
-                hr
-              </span>
-            </div>
-          </div>
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-5.tsx b/apps/www/registry/new-york/block/charts-01-chunk-5.tsx
deleted file mode 100644
index 54d3bada2f4..00000000000
--- a/apps/www/registry/new-york/block/charts-01-chunk-5.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client"
-
-import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts"
-
-import { Card, CardContent } from "@/registry/new-york//ui/card"
-import { ChartContainer } from "@/registry/new-york//ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-5">
-      <CardContent className="flex gap-4 p-4">
-        <div className="grid items-center gap-2">
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-sm text-muted-foreground">Move</div>
-            <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-              562/600
-              <span className="text-sm font-normal text-muted-foreground">
-                kcal
-              </span>
-            </div>
-          </div>
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-sm text-muted-foreground">Exercise</div>
-            <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-              73/120
-              <span className="text-sm font-normal text-muted-foreground">
-                min
-              </span>
-            </div>
-          </div>
-          <div className="grid flex-1 auto-rows-min gap-0.5">
-            <div className="text-sm text-muted-foreground">Stand</div>
-            <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
-              8/12
-              <span className="text-sm font-normal text-muted-foreground">
-                hr
-              </span>
-            </div>
-          </div>
-        </div>
-        <ChartContainer
-          config={{
-            move: {
-              label: "Move",
-              color: "hsl(var(--chart-1))",
-            },
-            exercise: {
-              label: "Exercise",
-              color: "hsl(var(--chart-2))",
-            },
-            stand: {
-              label: "Stand",
-              color: "hsl(var(--chart-3))",
-            },
-          }}
-          className="mx-auto aspect-square w-full max-w-[80%]"
-        >
-          <RadialBarChart
-            margin={{
-              left: -10,
-              right: -10,
-              top: -10,
-              bottom: -10,
-            }}
-            data={[
-              {
-                activity: "stand",
-                value: (8 / 12) * 100,
-                fill: "var(--color-stand)",
-              },
-              {
-                activity: "exercise",
-                value: (46 / 60) * 100,
-                fill: "var(--color-exercise)",
-              },
-              {
-                activity: "move",
-                value: (245 / 360) * 100,
-                fill: "var(--color-move)",
-              },
-            ]}
-            innerRadius="20%"
-            barSize={24}
-            startAngle={90}
-            endAngle={450}
-          >
-            <PolarAngleAxis
-              type="number"
-              domain={[0, 100]}
-              dataKey="value"
-              tick={false}
-            />
-            <RadialBar dataKey="value" background cornerRadius={5} />
-          </RadialBarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-6.tsx b/apps/www/registry/new-york/block/charts-01-chunk-6.tsx
deleted file mode 100644
index 8d88a3dcc21..00000000000
--- a/apps/www/registry/new-york/block/charts-01-chunk-6.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client"
-
-import { Bar, BarChart, Rectangle, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york//ui/card"
-import { ChartContainer } from "@/registry/new-york//ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-6">
-      <CardHeader className="p-4 pb-0">
-        <CardTitle>Active Energy</CardTitle>
-        <CardDescription>
-          You're burning an average of 754 calories per day. Good job!
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
-        <div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
-          1,254
-          <span className="text-sm font-normal text-muted-foreground">
-            kcal/day
-          </span>
-        </div>
-        <ChartContainer
-          config={{
-            calories: {
-              label: "Calories",
-              color: "hsl(var(--chart-1))",
-            },
-          }}
-          className="ml-auto w-[64px]"
-        >
-          <BarChart
-            accessibilityLayer
-            margin={{
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-            }}
-            data={[
-              {
-                date: "2024-01-01",
-                calories: 354,
-              },
-              {
-                date: "2024-01-02",
-                calories: 514,
-              },
-              {
-                date: "2024-01-03",
-                calories: 345,
-              },
-              {
-                date: "2024-01-04",
-                calories: 734,
-              },
-              {
-                date: "2024-01-05",
-                calories: 645,
-              },
-              {
-                date: "2024-01-06",
-                calories: 456,
-              },
-              {
-                date: "2024-01-07",
-                calories: 345,
-              },
-            ]}
-          >
-            <Bar
-              dataKey="calories"
-              fill="var(--color-calories)"
-              radius={2}
-              fillOpacity={0.2}
-              activeIndex={6}
-              activeBar={<Rectangle fillOpacity={0.8} />}
-            />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={4}
-              hide
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-7.tsx b/apps/www/registry/new-york/block/charts-01-chunk-7.tsx
deleted file mode 100644
index cd6a922eb48..00000000000
--- a/apps/www/registry/new-york/block/charts-01-chunk-7.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-"use client"
-
-import { Area, AreaChart, XAxis, YAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york//ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york//ui/chart"
-
-export default function Component() {
-  return (
-    <Card className="max-w-xs" x-chunk="charts-01-chunk-7">
-      <CardHeader className="space-y-0 pb-0">
-        <CardDescription>Time in Bed</CardDescription>
-        <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
-          8
-          <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-            hr
-          </span>
-          35
-          <span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
-            min
-          </span>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="p-0">
-        <ChartContainer
-          config={{
-            time: {
-              label: "Time",
-              color: "hsl(var(--chart-2))",
-            },
-          }}
-        >
-          <AreaChart
-            accessibilityLayer
-            data={[
-              {
-                date: "2024-01-01",
-                time: 8.5,
-              },
-              {
-                date: "2024-01-02",
-                time: 7.2,
-              },
-              {
-                date: "2024-01-03",
-                time: 8.1,
-              },
-              {
-                date: "2024-01-04",
-                time: 6.2,
-              },
-              {
-                date: "2024-01-05",
-                time: 5.2,
-              },
-              {
-                date: "2024-01-06",
-                time: 8.1,
-              },
-              {
-                date: "2024-01-07",
-                time: 7.0,
-              },
-            ]}
-            margin={{
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-            }}
-          >
-            <XAxis dataKey="date" hide />
-            <YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
-            <defs>
-              <linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-time)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-time)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-            </defs>
-            <Area
-              dataKey="time"
-              type="natural"
-              fill="url(#fillTime)"
-              fillOpacity={0.4}
-              stroke="var(--color-time)"
-            />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel />}
-              formatter={(value) => (
-                <div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
-                  Time in bed
-                  <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
-                    {value}
-                    <span className="font-normal text-muted-foreground">
-                      hr
-                    </span>
-                  </div>
-                </div>
-              )}
-            />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx
deleted file mode 100644
index cbb1464e379..00000000000
--- a/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client"
-
-import { DollarSign } from "lucide-react"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-01-chunk-0">
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
-        <DollarSign className="h-4 w-4 text-muted-foreground" />
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">$45,231.89</div>
-        <p className="text-xs text-muted-foreground">+20.1% from last month</p>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx
deleted file mode 100644
index 0e090f523ce..00000000000
--- a/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client"
-
-import { Users } from "lucide-react"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-01-chunk-1">
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
-        <Users className="h-4 w-4 text-muted-foreground" />
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">+2350</div>
-        <p className="text-xs text-muted-foreground">+180.1% from last month</p>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx
deleted file mode 100644
index ac121ea09cb..00000000000
--- a/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client"
-
-import { CreditCard } from "lucide-react"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-01-chunk-2">
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Sales</CardTitle>
-        <CreditCard className="h-4 w-4 text-muted-foreground" />
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">+12,234</div>
-        <p className="text-xs text-muted-foreground">+19% from last month</p>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx
deleted file mode 100644
index 3dab661eef5..00000000000
--- a/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client"
-
-import { Activity } from "lucide-react"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-01-chunk-3">
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-        <Activity className="h-4 w-4 text-muted-foreground" />
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">+573</div>
-        <p className="text-xs text-muted-foreground">+201 since last hour</p>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx
deleted file mode 100644
index f24999e4b12..00000000000
--- a/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { ArrowUpRight } from "lucide-react"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-
-export default function Component() {
-  return (
-    <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
-      <CardHeader className="flex flex-row items-center">
-        <div className="grid gap-2">
-          <CardTitle>Transactions</CardTitle>
-          <CardDescription>
-            Recent transactions from your store.
-          </CardDescription>
-        </div>
-        <Button asChild size="sm" className="ml-auto gap-1">
-          <Link href="#">
-            View All
-            <ArrowUpRight className="h-4 w-4" />
-          </Link>
-        </Button>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Customer</TableHead>
-              <TableHead className="hidden xl:table-column">Type</TableHead>
-              <TableHead className="hidden xl:table-column">Status</TableHead>
-              <TableHead className="hidden xl:table-column">Date</TableHead>
-              <TableHead className="text-right">Amount</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Liam Johnson</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  liam@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden xl:table-column">Sale</TableCell>
-              <TableCell className="hidden xl:table-column">
-                <Badge className="text-xs" variant="outline">
-                  Approved
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                2023-06-23
-              </TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Olivia Smith</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  olivia@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden xl:table-column">Refund</TableCell>
-              <TableCell className="hidden xl:table-column">
-                <Badge className="text-xs" variant="outline">
-                  Declined
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                2023-06-24
-              </TableCell>
-              <TableCell className="text-right">$150.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Noah Williams</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  noah@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden xl:table-column">
-                Subscription
-              </TableCell>
-              <TableCell className="hidden xl:table-column">
-                <Badge className="text-xs" variant="outline">
-                  Approved
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                2023-06-25
-              </TableCell>
-              <TableCell className="text-right">$350.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Emma Brown</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  emma@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden xl:table-column">Sale</TableCell>
-              <TableCell className="hidden xl:table-column">
-                <Badge className="text-xs" variant="outline">
-                  Approved
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                2023-06-26
-              </TableCell>
-              <TableCell className="text-right">$450.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Liam Johnson</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  liam@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden xl:table-column">Sale</TableCell>
-              <TableCell className="hidden xl:table-column">
-                <Badge className="text-xs" variant="outline">
-                  Approved
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell lg:hidden xl:table-column">
-                2023-06-27
-              </TableCell>
-              <TableCell className="text-right">$550.00</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx
deleted file mode 100644
index a9d904348fa..00000000000
--- a/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-"use client"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-01-chunk-5">
-      <CardHeader>
-        <CardTitle>Recent Sales</CardTitle>
-      </CardHeader>
-      <CardContent className="grid gap-8">
-        <div className="flex items-center gap-4">
-          <Avatar className="hidden h-9 w-9 sm:flex">
-            <AvatarImage src="/avatars/01.png" alt="Avatar" />
-            <AvatarFallback>OM</AvatarFallback>
-          </Avatar>
-          <div className="grid gap-1">
-            <p className="text-sm font-medium leading-none">Olivia Martin</p>
-            <p className="text-sm text-muted-foreground">
-              olivia.martin@email.com
-            </p>
-          </div>
-          <div className="ml-auto font-medium">+$1,999.00</div>
-        </div>
-        <div className="flex items-center gap-4">
-          <Avatar className="hidden h-9 w-9 sm:flex">
-            <AvatarImage src="/avatars/02.png" alt="Avatar" />
-            <AvatarFallback>JL</AvatarFallback>
-          </Avatar>
-          <div className="grid gap-1">
-            <p className="text-sm font-medium leading-none">Jackson Lee</p>
-            <p className="text-sm text-muted-foreground">
-              jackson.lee@email.com
-            </p>
-          </div>
-          <div className="ml-auto font-medium">+$39.00</div>
-        </div>
-        <div className="flex items-center gap-4">
-          <Avatar className="hidden h-9 w-9 sm:flex">
-            <AvatarImage src="/avatars/03.png" alt="Avatar" />
-            <AvatarFallback>IN</AvatarFallback>
-          </Avatar>
-          <div className="grid gap-1">
-            <p className="text-sm font-medium leading-none">Isabella Nguyen</p>
-            <p className="text-sm text-muted-foreground">
-              isabella.nguyen@email.com
-            </p>
-          </div>
-          <div className="ml-auto font-medium">+$299.00</div>
-        </div>
-        <div className="flex items-center gap-4">
-          <Avatar className="hidden h-9 w-9 sm:flex">
-            <AvatarImage src="/avatars/04.png" alt="Avatar" />
-            <AvatarFallback>WK</AvatarFallback>
-          </Avatar>
-          <div className="grid gap-1">
-            <p className="text-sm font-medium leading-none">William Kim</p>
-            <p className="text-sm text-muted-foreground">will@email.com</p>
-          </div>
-          <div className="ml-auto font-medium">+$99.00</div>
-        </div>
-        <div className="flex items-center gap-4">
-          <Avatar className="hidden h-9 w-9 sm:flex">
-            <AvatarImage src="/avatars/05.png" alt="Avatar" />
-            <AvatarFallback>SD</AvatarFallback>
-          </Avatar>
-          <div className="grid gap-1">
-            <p className="text-sm font-medium leading-none">Sofia Davis</p>
-            <p className="text-sm text-muted-foreground">
-              sofia.davis@email.com
-            </p>
-          </div>
-          <div className="ml-auto font-medium">+$39.00</div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx
deleted file mode 100644
index 86cb08dda79..00000000000
--- a/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-02-chunk-0">
-      <CardHeader className="p-2 pt-0 md:p-4">
-        <CardTitle>Upgrade to Pro</CardTitle>
-        <CardDescription>
-          Unlock all features and get unlimited access to our support team.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
-        <Button size="sm" className="w-full">
-          Upgrade
-        </Button>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx
deleted file mode 100644
index 0fd5cd0b94d..00000000000
--- a/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/new-york/ui/button"
-
-export default function Component() {
-  return (
-    <div
-      className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-      x-chunk="dashboard-02-chunk-1"
-    >
-      <div className="flex flex-col items-center gap-1 text-center">
-        <h3 className="text-2xl font-bold tracking-tight">
-          You have no products
-        </h3>
-        <p className="text-sm text-muted-foreground">
-          You can start selling as soon as you add a product.
-        </p>
-        <Button className="mt-4">Add Product</Button>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx
deleted file mode 100644
index 735ffc053be..00000000000
--- a/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client"
-
-import { Bird, Rabbit, Turtle } from "lucide-react"
-
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-import { Textarea } from "@/registry/new-york/ui/textarea"
-
-export default function Component() {
-  return (
-    <div
-      className="relative hidden flex-col items-start gap-8 md:flex"
-      x-chunk="dashboard-03-chunk-0"
-    >
-      <form className="grid w-full items-start gap-6">
-        <fieldset className="grid gap-6 rounded-lg border p-4">
-          <legend className="-ml-1 px-1 text-sm font-medium">Settings</legend>
-          <div className="grid gap-3">
-            <Label htmlFor="model">Model</Label>
-            <Select>
-              <SelectTrigger
-                id="model"
-                className="items-start [&_[data-description]]:hidden"
-              >
-                <SelectValue placeholder="Select a model" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="genesis">
-                  <div className="flex items-start gap-3 text-muted-foreground">
-                    <Rabbit className="size-5" />
-                    <div className="grid gap-0.5">
-                      <p>
-                        Neural{" "}
-                        <span className="font-medium text-foreground">
-                          Genesis
-                        </span>
-                      </p>
-                      <p className="text-xs" data-description>
-                        Our fastest model for general use cases.
-                      </p>
-                    </div>
-                  </div>
-                </SelectItem>
-                <SelectItem value="explorer">
-                  <div className="flex items-start gap-3 text-muted-foreground">
-                    <Bird className="size-5" />
-                    <div className="grid gap-0.5">
-                      <p>
-                        Neural{" "}
-                        <span className="font-medium text-foreground">
-                          Explorer
-                        </span>
-                      </p>
-                      <p className="text-xs" data-description>
-                        Performance and speed for efficiency.
-                      </p>
-                    </div>
-                  </div>
-                </SelectItem>
-                <SelectItem value="quantum">
-                  <div className="flex items-start gap-3 text-muted-foreground">
-                    <Turtle className="size-5" />
-                    <div className="grid gap-0.5">
-                      <p>
-                        Neural{" "}
-                        <span className="font-medium text-foreground">
-                          Quantum
-                        </span>
-                      </p>
-                      <p className="text-xs" data-description>
-                        The most powerful model for complex computations.
-                      </p>
-                    </div>
-                  </div>
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="grid gap-3">
-            <Label htmlFor="temperature">Temperature</Label>
-            <Input id="temperature" type="number" placeholder="0.4" />
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div className="grid gap-3">
-              <Label htmlFor="top-p">Top P</Label>
-              <Input id="top-p" type="number" placeholder="0.7" />
-            </div>
-            <div className="grid gap-3">
-              <Label htmlFor="top-k">Top K</Label>
-              <Input id="top-k" type="number" placeholder="0.0" />
-            </div>
-          </div>
-        </fieldset>
-        <fieldset className="grid gap-6 rounded-lg border p-4">
-          <legend className="-ml-1 px-1 text-sm font-medium">Messages</legend>
-          <div className="grid gap-3">
-            <Label htmlFor="role">Role</Label>
-            <Select defaultValue="system">
-              <SelectTrigger>
-                <SelectValue placeholder="Select a role" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="system">System</SelectItem>
-                <SelectItem value="user">User</SelectItem>
-                <SelectItem value="assistant">Assistant</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="grid gap-3">
-            <Label htmlFor="content">Content</Label>
-            <Textarea
-              id="content"
-              placeholder="You are a..."
-              className="min-h-[9.5rem]"
-            />
-          </div>
-        </fieldset>
-      </form>
-    </div>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx
deleted file mode 100644
index 709b45c689b..00000000000
--- a/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client"
-
-import { CornerDownLeft, Mic, Paperclip } from "lucide-react"
-
-import { Button } from "@/registry/new-york/ui/button"
-import { Label } from "@/registry/new-york/ui/label"
-import { Textarea } from "@/registry/new-york/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/ui/tooltip"
-
-export default function Component() {
-  return (
-    <form
-      className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
-      x-chunk="dashboard-03-chunk-1"
-    >
-      <Label htmlFor="message" className="sr-only">
-        Message
-      </Label>
-      <Textarea
-        id="message"
-        placeholder="Type your message here..."
-        className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
-      />
-      <div className="flex items-center p-3 pt-0">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <Paperclip className="size-4" />
-              <span className="sr-only">Attach file</span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="top">Attach File</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <Mic className="size-4" />
-              <span className="sr-only">Use Microphone</span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="top">Use Microphone</TooltipContent>
-        </Tooltip>
-        <Button type="submit" size="sm" className="ml-auto gap-1.5">
-          Send Message
-          <CornerDownLeft className="size-3.5" />
-        </Button>
-      </div>
-    </form>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx
deleted file mode 100644
index 406f27e0896..00000000000
--- a/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client"
-
-import Link from "next/link"
-
-export default function Component() {
-  return (
-    <nav
-      className="grid gap-4 text-sm text-muted-foreground"
-      x-chunk="dashboard-04-chunk-0"
-    >
-      <Link href="#" className="font-semibold text-primary">
-        General
-      </Link>
-      <Link href="#">Security</Link>
-      <Link href="#">Integrations</Link>
-      <Link href="#">Support</Link>
-      <Link href="#">Organizations</Link>
-      <Link href="#">Advanced</Link>
-    </nav>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx
deleted file mode 100644
index 289544ec759..00000000000
--- a/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client"
-
-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"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-04-chunk-1">
-      <CardHeader>
-        <CardTitle>Store Name</CardTitle>
-        <CardDescription>
-          Used to identify your store in the marketplace.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <Input placeholder="Store Name" />
-        </form>
-      </CardContent>
-      <CardFooter className="border-t px-6 py-4">
-        <Button>Save</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx
deleted file mode 100644
index a3f20b79be4..00000000000
--- a/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Checkbox } from "@/registry/new-york/ui/checkbox"
-import { Input } from "@/registry/new-york/ui/input"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-04-chunk-2">
-      <CardHeader>
-        <CardTitle>Plugins Directory</CardTitle>
-        <CardDescription>
-          The directory within your project, in which your plugins are located.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form className="flex flex-col gap-4">
-          <Input placeholder="Project Name" defaultValue="/content/plugins" />
-          <div className="flex items-center space-x-2">
-            <Checkbox id="include" defaultChecked />
-            <label
-              htmlFor="include"
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              Allow administrators to change the directory.
-            </label>
-          </div>
-        </form>
-      </CardContent>
-      <CardFooter className="border-t px-6 py-4">
-        <Button>Save</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx
deleted file mode 100644
index 79f02a115cc..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-
-export default function Component() {
-  return (
-    <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
-      <CardHeader className="pb-3">
-        <CardTitle>Your Orders</CardTitle>
-        <CardDescription className="text-balance max-w-lg leading-relaxed">
-          Introducing Our Dynamic Orders Dashboard for Seamless Management and
-          Insightful Analysis.
-        </CardDescription>
-      </CardHeader>
-      <CardFooter>
-        <Button>Create New Order</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx
deleted file mode 100644
index bd780f90c92..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Progress } from "@/registry/new-york/ui/progress"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-05-chunk-1">
-      <CardHeader className="pb-2">
-        <CardDescription>This Week</CardDescription>
-        <CardTitle className="text-4xl">$1,329</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="text-xs text-muted-foreground">+25% from last week</div>
-      </CardContent>
-      <CardFooter>
-        <Progress value={25} aria-label="25% increase" />
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx
deleted file mode 100644
index 3ea1caea2f8..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Progress } from "@/registry/new-york/ui/progress"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-05-chunk-2">
-      <CardHeader className="pb-2">
-        <CardDescription>This Month</CardDescription>
-        <CardTitle className="text-4xl">$5,329</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="text-xs text-muted-foreground">
-          +10% from last month
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Progress value={12} aria-label="12% increase" />
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx
deleted file mode 100644
index 626b1bf3d33..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-"use client"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-05-chunk-3">
-      <CardHeader className="px-7">
-        <CardTitle>Orders</CardTitle>
-        <CardDescription>Recent orders from your store.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Customer</TableHead>
-              <TableHead className="hidden sm:table-cell">Type</TableHead>
-              <TableHead className="hidden sm:table-cell">Status</TableHead>
-              <TableHead className="hidden md:table-cell">Date</TableHead>
-              <TableHead className="text-right">Amount</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow className="bg-accent">
-              <TableCell>
-                <div className="font-medium">Liam Johnson</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  liam@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Sale</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="secondary">
-                  Fulfilled
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Olivia Smith</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  olivia@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Refund</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="outline">
-                  Declined
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
-              <TableCell className="text-right">$150.00</TableCell>
-            </TableRow>
-            {/* <TableRow>
-                          <TableCell>
-                            <div className="font-medium">Liam Johnson</div>
-                            <div className="hidden text-sm text-muted-foreground md:inline">
-                              liam@example.com
-                            </div>
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            Sale
-                          </TableCell>
-                          <TableCell className="hidden sm:table-cell">
-                            <Badge className="text-xs" variant="secondary">
-                              Fulfilled
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="hidden md:table-cell">
-                            2023-06-23
-                          </TableCell>
-                          <TableCell className="text-right">$250.00</TableCell>
-                        </TableRow> */}
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Noah Williams</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  noah@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">
-                Subscription
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="secondary">
-                  Fulfilled
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-25</TableCell>
-              <TableCell className="text-right">$350.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Emma Brown</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  emma@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Sale</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="secondary">
-                  Fulfilled
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
-              <TableCell className="text-right">$450.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Liam Johnson</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  liam@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Sale</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="secondary">
-                  Fulfilled
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Olivia Smith</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  olivia@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Refund</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="outline">
-                  Declined
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
-              <TableCell className="text-right">$150.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <div className="font-medium">Emma Brown</div>
-                <div className="hidden text-sm text-muted-foreground md:inline">
-                  emma@example.com
-                </div>
-              </TableCell>
-              <TableCell className="hidden sm:table-cell">Sale</TableCell>
-              <TableCell className="hidden sm:table-cell">
-                <Badge className="text-xs" variant="secondary">
-                  Fulfilled
-                </Badge>
-              </TableCell>
-              <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
-              <TableCell className="text-right">$450.00</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx
deleted file mode 100644
index 5fa654e8f62..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-"use client"
-
-import {
-  ChevronLeft,
-  ChevronRight,
-  Copy,
-  CreditCard,
-  MoreVertical,
-  Truck,
-} from "lucide-react"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-} from "@/registry/new-york/ui/pagination"
-import { Separator } from "@/registry/new-york/ui/separator"
-
-export default function Component() {
-  return (
-    <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
-      <CardHeader className="flex flex-row items-start bg-muted/50">
-        <div className="grid gap-0.5">
-          <CardTitle className="group flex items-center gap-2 text-lg">
-            Order Oe31b70H
-            <Button
-              size="icon"
-              variant="outline"
-              className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
-            >
-              <Copy className="h-3 w-3" />
-              <span className="sr-only">Copy Order ID</span>
-            </Button>
-          </CardTitle>
-          <CardDescription>Date: November 23, 2023</CardDescription>
-        </div>
-        <div className="ml-auto flex items-center gap-1">
-          <Button size="sm" variant="outline" className="h-8 gap-1">
-            <Truck className="h-3.5 w-3.5" />
-            <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-              Track Order
-            </span>
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="icon" variant="outline" className="h-8 w-8">
-                <MoreVertical className="h-3.5 w-3.5" />
-                <span className="sr-only">More</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem>Edit</DropdownMenuItem>
-              <DropdownMenuItem>Export</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Trash</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </CardHeader>
-      <CardContent className="p-6 text-sm">
-        <div className="grid gap-3">
-          <div className="font-semibold">Order Details</div>
-          <ul className="grid gap-3">
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">
-                Glimmer Lamps x <span>2</span>
-              </span>
-              <span>$250.00</span>
-            </li>
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">
-                Aqua Filters x <span>1</span>
-              </span>
-              <span>$49.00</span>
-            </li>
-          </ul>
-          <Separator className="my-2" />
-          <ul className="grid gap-3">
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">Subtotal</span>
-              <span>$299.00</span>
-            </li>
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">Shipping</span>
-              <span>$5.00</span>
-            </li>
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">Tax</span>
-              <span>$25.00</span>
-            </li>
-            <li className="flex items-center justify-between font-semibold">
-              <span className="text-muted-foreground">Total</span>
-              <span>$329.00</span>
-            </li>
-          </ul>
-        </div>
-        <Separator className="my-4" />
-        <div className="grid grid-cols-2 gap-4">
-          <div className="grid gap-3">
-            <div className="font-semibold">Shipping Information</div>
-            <address className="grid gap-0.5 not-italic text-muted-foreground">
-              <span>Liam Johnson</span>
-              <span>1234 Main St.</span>
-              <span>Anytown, CA 12345</span>
-            </address>
-          </div>
-          <div className="grid auto-rows-max gap-3">
-            <div className="font-semibold">Billing Information</div>
-            <div className="text-muted-foreground">
-              Same as shipping address
-            </div>
-          </div>
-        </div>
-        <Separator className="my-4" />
-        <div className="grid gap-3">
-          <div className="font-semibold">Customer Information</div>
-          <dl className="grid gap-3">
-            <div className="flex items-center justify-between">
-              <dt className="text-muted-foreground">Customer</dt>
-              <dd>Liam Johnson</dd>
-            </div>
-            <div className="flex items-center justify-between">
-              <dt className="text-muted-foreground">Email</dt>
-              <dd>
-                <a href="mailto:">liam@acme.com</a>
-              </dd>
-            </div>
-            <div className="flex items-center justify-between">
-              <dt className="text-muted-foreground">Phone</dt>
-              <dd>
-                <a href="tel:">+1 234 567 890</a>
-              </dd>
-            </div>
-          </dl>
-        </div>
-        <Separator className="my-4" />
-        <div className="grid gap-3">
-          <div className="font-semibold">Payment Information</div>
-          <dl className="grid gap-3">
-            <div className="flex items-center justify-between">
-              <dt className="flex items-center gap-1 text-muted-foreground">
-                <CreditCard className="h-4 w-4" />
-                Visa
-              </dt>
-              <dd>**** **** **** 4532</dd>
-            </div>
-          </dl>
-        </div>
-      </CardContent>
-      <CardFooter className="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
-        <div className="text-xs text-muted-foreground">
-          Updated <time dateTime="2023-11-23">November 23, 2023</time>
-        </div>
-        <Pagination className="ml-auto mr-0 w-auto">
-          <PaginationContent>
-            <PaginationItem>
-              <Button size="icon" variant="outline" className="h-6 w-6">
-                <ChevronLeft className="h-3.5 w-3.5" />
-                <span className="sr-only">Previous Order</span>
-              </Button>
-            </PaginationItem>
-            <PaginationItem>
-              <Button size="icon" variant="outline" className="h-6 w-6">
-                <ChevronRight className="h-3.5 w-3.5" />
-                <span className="sr-only">Next Order</span>
-              </Button>
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-5.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-5.tsx
deleted file mode 100644
index e49b61e39f2..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-5.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import {
-  ChevronLeft,
-  ChevronRight,
-  Copy,
-  CreditCard,
-  MoreVertical,
-  Truck,
-} from "lucide-react"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-} from "@/registry/new-york/ui/pagination"
-import { Separator } from "@/registry/new-york/ui/separator"
-
-export default function Component() {
-  return (
-    <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-5">
-      <CardHeader className="flex flex-row items-start bg-muted/50">
-        <div className="grid gap-0.5">
-          <CardTitle className="group flex items-center gap-2 text-lg">
-            Order Oe31b70H
-            <Button
-              size="icon"
-              variant="outline"
-              className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
-            >
-              <Copy className="h-3 w-3" />
-              <span className="sr-only">Copy Order ID</span>
-            </Button>
-          </CardTitle>
-          <CardDescription>Date: November 23, 2023</CardDescription>
-        </div>
-        <div className="ml-auto flex items-center gap-1">
-          <Button size="sm" variant="outline" className="h-8 gap-1">
-            <Truck className="h-3.5 w-3.5" />
-            <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-              Track Order
-            </span>
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="icon" variant="outline" className="h-8 w-8">
-                <MoreVertical className="h-3.5 w-3.5" />
-                <span className="sr-only">More</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem>Edit</DropdownMenuItem>
-              <DropdownMenuItem>Export</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Trash</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </CardHeader>
-      <CardContent className="p-6 text-sm">
-        <div className="grid gap-3">
-          <div className="font-semibold">Order Details</div>
-          <ul className="grid gap-3">
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">
-                Glimmer Lamps x <span>2</span>
-              </span>
-              <span>$250.00</span>
-            </li>
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">
-                Aqua Filters x <span>1</span>
-              </span>
-              <span>$49.00</span>
-            </li>
-          </ul>
-          <Separator className="my-2" />
-          <ul className="grid gap-3">
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">Subtotal</span>
-              <span>$299.00</span>
-            </li>
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">Shipping</span>
-              <span>$5.00</span>
-            </li>
-            <li className="flex items-center justify-between">
-              <span className="text-muted-foreground">Tax</span>
-              <span>$25.00</span>
-            </li>
-            <li className="flex items-center justify-between font-semibold">
-              <span className="text-muted-foreground">Total</span>
-              <span>$329.00</span>
-            </li>
-          </ul>
-        </div>
-        <Separator className="my-4" />
-        <div className="grid grid-cols-2 gap-4">
-          <div className="grid gap-3">
-            <div className="font-semibold">Shipping Information</div>
-            <address className="grid gap-0.5 not-italic text-muted-foreground">
-              <span>Liam Johnson</span>
-              <span>1234 Main St.</span>
-              <span>Anytown, CA 12345</span>
-            </address>
-          </div>
-          <div className="grid auto-rows-max gap-3">
-            <div className="font-semibold">Billing Information</div>
-            <div className="text-muted-foreground">
-              Same as shipping address
-            </div>
-          </div>
-        </div>
-        <Separator className="my-4" />
-        <div className="grid gap-3">
-          <div className="font-semibold">Customer Information</div>
-          <dl className="grid gap-3">
-            <div className="flex items-center justify-between">
-              <dt className="text-muted-foreground">Customer</dt>
-              <dd>Liam Johnson</dd>
-            </div>
-            <div className="flex items-center justify-between">
-              <dt className="text-muted-foreground">Email</dt>
-              <dd>
-                <a href="mailto:">liam@acme.com</a>
-              </dd>
-            </div>
-            <div className="flex items-center justify-between">
-              <dt className="text-muted-foreground">Phone</dt>
-              <dd>
-                <a href="tel:">+1 234 567 890</a>
-              </dd>
-            </div>
-          </dl>
-        </div>
-        <Separator className="my-4" />
-        <div className="grid gap-3">
-          <div className="font-semibold">Payment Information</div>
-          <dl className="grid gap-3">
-            <div className="flex items-center justify-between">
-              <dt className="flex items-center gap-1 text-muted-foreground">
-                <CreditCard className="h-4 w-4" />
-                Visa
-              </dt>
-              <dd>**** **** **** 4532</dd>
-            </div>
-          </dl>
-        </div>
-      </CardContent>
-      <CardFooter className="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
-        <div className="text-xs text-muted-foreground">
-          Updated <time dateTime="2023-11-23">November 23, 2023</time>
-        </div>
-        <Pagination className="ml-auto mr-0 w-auto">
-          <PaginationContent>
-            <PaginationItem>
-              <Button size="icon" variant="outline" className="h-6 w-6">
-                <ChevronLeft className="h-3.5 w-3.5" />
-                <span className="sr-only">Previous Order</span>
-              </Button>
-            </PaginationItem>
-            <PaginationItem>
-              <Button size="icon" variant="outline" className="h-6 w-6">
-                <ChevronRight className="h-3.5 w-3.5" />
-                <span className="sr-only">Next Order</span>
-              </Button>
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx
deleted file mode 100644
index 1604e4bf728..00000000000
--- a/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-"use client"
-
-import Image from "next/image"
-import { MoreHorizontal } from "lucide-react"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-06-chunk-0">
-      <CardHeader>
-        <CardTitle>Products</CardTitle>
-        <CardDescription>
-          Manage your products and view their sales performance.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="hidden w-[100px] sm:table-cell">
-                <span className="sr-only">Image</span>
-              </TableHead>
-              <TableHead>Name</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Price</TableHead>
-              <TableHead className="hidden md:table-cell">
-                Total Sales
-              </TableHead>
-              <TableHead className="hidden md:table-cell">Created at</TableHead>
-              <TableHead>
-                <span className="sr-only">Actions</span>
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                Laser Lemonade Machine
-              </TableCell>
-              <TableCell>
-                <Badge variant="outline">Draft</Badge>
-              </TableCell>
-              <TableCell>$499.99</TableCell>
-              <TableCell className="hidden md:table-cell">25</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-07-12 10:42 AM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                Hypernova Headphones
-              </TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell>$129.99</TableCell>
-              <TableCell className="hidden md:table-cell">100</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-10-18 03:21 PM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">AeroGlow Desk Lamp</TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell>$39.99</TableCell>
-              <TableCell className="hidden md:table-cell">50</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-11-29 08:15 AM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                TechTonic Energy Drink
-              </TableCell>
-              <TableCell>
-                <Badge variant="secondary">Draft</Badge>
-              </TableCell>
-              <TableCell>$2.99</TableCell>
-              <TableCell className="hidden md:table-cell">0</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-12-25 11:59 PM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                Gamer Gear Pro Controller
-              </TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell>$59.99</TableCell>
-              <TableCell className="hidden md:table-cell">75</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2024-01-01 12:00 AM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">Luminous VR Headset</TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell>$199.99</TableCell>
-              <TableCell className="hidden md:table-cell">30</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2024-02-14 02:14 PM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-      <CardFooter>
-        <div className="text-xs text-muted-foreground">
-          Showing <strong>1-10</strong> of <strong>32</strong> products
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-06-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-06-chunk-1.tsx
deleted file mode 100644
index 202910bc94a..00000000000
--- a/apps/www/registry/new-york/block/dashboard-06-chunk-1.tsx
+++ /dev/null
@@ -1,287 +0,0 @@
-import Image from "next/image"
-import { MoreHorizontal } from "lucide-react"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-06-chunk-1">
-      <CardHeader>
-        <CardTitle>Products</CardTitle>
-        <CardDescription>
-          Manage your products and view their sales performance.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="hidden w-[100px] sm:table-cell">
-                <span className="sr-only">Image</span>
-              </TableHead>
-              <TableHead>Name</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Price</TableHead>
-              <TableHead className="hidden md:table-cell">
-                Total Sales
-              </TableHead>
-              <TableHead className="hidden md:table-cell">Created at</TableHead>
-              <TableHead>
-                <span className="sr-only">Actions</span>
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                Laser Lemonade Machine
-              </TableCell>
-              <TableCell>
-                <Badge variant="outline">Draft</Badge>
-              </TableCell>
-              <TableCell>$499.99</TableCell>
-              <TableCell className="hidden md:table-cell">25</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-07-12 10:42 AM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                Hypernova Headphones
-              </TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell>$129.99</TableCell>
-              <TableCell className="hidden md:table-cell">100</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-10-18 03:21 PM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">AeroGlow Desk Lamp</TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell>$39.99</TableCell>
-              <TableCell className="hidden md:table-cell">50</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-11-29 08:15 AM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                TechTonic Energy Drink
-              </TableCell>
-              <TableCell>
-                <Badge variant="secondary">Draft</Badge>
-              </TableCell>
-              <TableCell>$2.99</TableCell>
-              <TableCell className="hidden md:table-cell">0</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2023-12-25 11:59 PM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">
-                Gamer Gear Pro Controller
-              </TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell>$59.99</TableCell>
-              <TableCell className="hidden md:table-cell">75</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2024-01-01 12:00 AM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="hidden sm:table-cell">
-                <Image
-                  alt="Product image"
-                  className="aspect-square rounded-md object-cover"
-                  height="64"
-                  src="/placeholder.svg"
-                  width="64"
-                />
-              </TableCell>
-              <TableCell className="font-medium">Luminous VR Headset</TableCell>
-              <TableCell>
-                <Badge variant="outline">Active</Badge>
-              </TableCell>
-              <TableCell>$199.99</TableCell>
-              <TableCell className="hidden md:table-cell">30</TableCell>
-              <TableCell className="hidden md:table-cell">
-                2024-02-14 02:14 PM
-              </TableCell>
-              <TableCell>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button aria-haspopup="true" size="icon" variant="ghost">
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                    <DropdownMenuItem>Delete</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-      <CardFooter>
-        <div className="text-xs text-muted-foreground">
-          Showing <strong>1-10</strong> of <strong>32</strong> products
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx
deleted file mode 100644
index f97e3902c5a..00000000000
--- a/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client"
-
-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"
-import { Textarea } from "@/registry/new-york/ui/textarea"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-07-chunk-0">
-      <CardHeader>
-        <CardTitle>Product Details</CardTitle>
-        <CardDescription>
-          Lipsum dolor sit amet, consectetur adipiscing elit
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-6">
-          <div className="grid gap-3">
-            <Label htmlFor="name">Name</Label>
-            <Input
-              id="name"
-              type="text"
-              className="w-full"
-              defaultValue="Gamer Gear Pro Controller"
-            />
-          </div>
-          <div className="grid gap-3">
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
-              className="min-h-32"
-            />
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx
deleted file mode 100644
index 1e6535fe946..00000000000
--- a/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client"
-
-import { PlusCircle } from "lucide-react"
-
-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"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-07-chunk-1">
-      <CardHeader>
-        <CardTitle>Stock</CardTitle>
-        <CardDescription>
-          Lipsum dolor sit amet, consectetur adipiscing elit
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[100px]">SKU</TableHead>
-              <TableHead>Stock</TableHead>
-              <TableHead>Price</TableHead>
-              <TableHead className="w-[100px]">Size</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell className="font-semibold">GGPC-001</TableCell>
-              <TableCell>
-                <Label htmlFor="stock-1" className="sr-only">
-                  Stock
-                </Label>
-                <Input id="stock-1" type="number" defaultValue="100" />
-              </TableCell>
-              <TableCell>
-                <Label htmlFor="price-1" className="sr-only">
-                  Price
-                </Label>
-                <Input id="price-1" type="number" defaultValue="99.99" />
-              </TableCell>
-              <TableCell>
-                <ToggleGroup type="single" defaultValue="s" variant="outline">
-                  <ToggleGroupItem value="s">S</ToggleGroupItem>
-                  <ToggleGroupItem value="m">M</ToggleGroupItem>
-                  <ToggleGroupItem value="l">L</ToggleGroupItem>
-                </ToggleGroup>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="font-semibold">GGPC-002</TableCell>
-              <TableCell>
-                <Label htmlFor="stock-2" className="sr-only">
-                  Stock
-                </Label>
-                <Input id="stock-2" type="number" defaultValue="143" />
-              </TableCell>
-              <TableCell>
-                <Label htmlFor="price-2" className="sr-only">
-                  Price
-                </Label>
-                <Input id="price-2" type="number" defaultValue="99.99" />
-              </TableCell>
-              <TableCell>
-                <ToggleGroup type="single" defaultValue="m" variant="outline">
-                  <ToggleGroupItem value="s">S</ToggleGroupItem>
-                  <ToggleGroupItem value="m">M</ToggleGroupItem>
-                  <ToggleGroupItem value="l">L</ToggleGroupItem>
-                </ToggleGroup>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="font-semibold">GGPC-003</TableCell>
-              <TableCell>
-                <Label htmlFor="stock-3" className="sr-only">
-                  Stock
-                </Label>
-                <Input id="stock-3" type="number" defaultValue="32" />
-              </TableCell>
-              <TableCell>
-                <Label htmlFor="price-3" className="sr-only">
-                  Stock
-                </Label>
-                <Input id="price-3" type="number" defaultValue="99.99" />
-              </TableCell>
-              <TableCell>
-                <ToggleGroup type="single" defaultValue="s" variant="outline">
-                  <ToggleGroupItem value="s">S</ToggleGroupItem>
-                  <ToggleGroupItem value="m">M</ToggleGroupItem>
-                  <ToggleGroupItem value="l">L</ToggleGroupItem>
-                </ToggleGroup>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-      <CardFooter className="justify-center border-t p-4">
-        <Button size="sm" variant="ghost" className="gap-1">
-          <PlusCircle className="h-3.5 w-3.5" />
-          Add Variant
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx
deleted file mode 100644
index c391a2c2bee..00000000000
--- a/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-07-chunk-2">
-      <CardHeader>
-        <CardTitle>Product Category</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-6 sm:grid-cols-3">
-          <div className="grid gap-3">
-            <Label htmlFor="category">Category</Label>
-            <Select>
-              <SelectTrigger id="category" aria-label="Select category">
-                <SelectValue placeholder="Select category" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="clothing">Clothing</SelectItem>
-                <SelectItem value="electronics">Electronics</SelectItem>
-                <SelectItem value="accessories">Accessories</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="grid gap-3">
-            <Label htmlFor="subcategory">Subcategory (optional)</Label>
-            <Select>
-              <SelectTrigger id="subcategory" aria-label="Select subcategory">
-                <SelectValue placeholder="Select subcategory" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="t-shirts">T-Shirts</SelectItem>
-                <SelectItem value="hoodies">Hoodies</SelectItem>
-                <SelectItem value="sweatshirts">Sweatshirts</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx
deleted file mode 100644
index 7b4a53495fb..00000000000
--- a/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-07-chunk-3">
-      <CardHeader>
-        <CardTitle>Product Status</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-6">
-          <div className="grid gap-3">
-            <Label htmlFor="status">Status</Label>
-            <Select>
-              <SelectTrigger id="status" aria-label="Select status">
-                <SelectValue placeholder="Select status" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="draft">Draft</SelectItem>
-                <SelectItem value="published">Active</SelectItem>
-                <SelectItem value="archived">Archived</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx
deleted file mode 100644
index 06c58d33037..00000000000
--- a/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client"
-
-import Image from "next/image"
-import { Upload } from "lucide-react"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-
-export default function Component() {
-  return (
-    <Card className="overflow-hidden" x-chunk="dashboard-07-chunk-4">
-      <CardHeader>
-        <CardTitle>Product Images</CardTitle>
-        <CardDescription>
-          Lipsum dolor sit amet, consectetur adipiscing elit
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-2">
-          <Image
-            alt="Product image"
-            className="aspect-square w-full rounded-md object-cover"
-            height="300"
-            src="/placeholder.svg"
-            width="300"
-          />
-          <div className="grid grid-cols-3 gap-2">
-            <button>
-              <Image
-                alt="Product image"
-                className="aspect-square w-full rounded-md object-cover"
-                height="84"
-                src="/placeholder.svg"
-                width="84"
-              />
-            </button>
-            <button>
-              <Image
-                alt="Product image"
-                className="aspect-square w-full rounded-md object-cover"
-                height="84"
-                src="/placeholder.svg"
-                width="84"
-              />
-            </button>
-            <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
-              <Upload className="h-4 w-4 text-muted-foreground" />
-              <span className="sr-only">Upload</span>
-            </button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx
deleted file mode 100644
index a2279c13bd5..00000000000
--- a/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-
-export default function Component() {
-  return (
-    <Card x-chunk="dashboard-07-chunk-5">
-      <CardHeader>
-        <CardTitle>Archive Product</CardTitle>
-        <CardDescription>
-          Lipsum dolor sit amet, consectetur adipiscing elit.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div></div>
-        <Button size="sm" variant="secondary">
-          Archive Product
-        </Button>
-      </CardContent>
-    </Card>
-  )
-}
diff --git 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
deleted file mode 100644
index 4820320f865..00000000000
--- a/apps/www/registry/new-york/block/login-01/components/login-form.tsx
+++ /dev/null
@@ -1,59 +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 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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/login-01/page.tsx b/apps/www/registry/new-york/block/login-01/page.tsx
deleted file mode 100644
index 005ae4a9b60..00000000000
--- a/apps/www/registry/new-york/block/login-01/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { LoginForm } from "@/registry/new-york/block/login-01/components/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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/sidebar-01/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-01/components/app-sidebar.tsx
deleted file mode 100644
index 961b7b2b4eb..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/components/app-sidebar.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-"use client"
-
-import {
-  Atom,
-  Bird,
-  BookOpen,
-  Bot,
-  Code2,
-  Eclipse,
-  Frame,
-  History,
-  LifeBuoy,
-  Map,
-  PieChart,
-  Rabbit,
-  Send,
-  Settings2,
-  SquareTerminal,
-  Star,
-  Turtle,
-} from "lucide-react"
-
-import { NavMain } from "@/registry/new-york/block/sidebar-01/components/nav-main"
-import { NavProjects } from "@/registry/new-york/block/sidebar-01/components/nav-projects"
-import { NavSecondary } from "@/registry/new-york/block/sidebar-01/components/nav-secondary"
-import { NavUser } from "@/registry/new-york/block/sidebar-01/components/nav-user"
-import { StorageCard } from "@/registry/new-york/block/sidebar-01/components/storage-card"
-import { TeamSwitcher } from "@/registry/new-york/block/sidebar-01/components/team-switcher"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarItem,
-  SidebarLabel,
-} from "@/registry/new-york/block/sidebar-01/ui/sidebar"
-
-export const iframeHeight = "870px"
-
-export const containerClassName = "w-full h-full"
-
-const data = {
-  teams: [
-    {
-      name: "Acme Inc",
-      logo: Atom,
-      plan: "Enterprise",
-    },
-    {
-      name: "Acme Corp.",
-      logo: Eclipse,
-      plan: "Startup",
-    },
-    {
-      name: "Evil Corp.",
-      logo: Rabbit,
-      plan: "Free",
-    },
-  ],
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.jpg",
-  },
-  navMain: [
-    {
-      title: "Playground",
-      url: "#",
-      icon: SquareTerminal,
-      isActive: true,
-      items: [
-        {
-          title: "History",
-          url: "#",
-          icon: History,
-          description: "View your recent prompts",
-        },
-        {
-          title: "Starred",
-          url: "#",
-          icon: Star,
-          description: "Browse your starred prompts",
-        },
-        {
-          title: "Settings",
-          url: "#",
-          icon: Settings2,
-          description: "Configure your playground",
-        },
-      ],
-    },
-    {
-      title: "Models",
-      url: "#",
-      icon: Bot,
-      items: [
-        {
-          title: "Genesis",
-          url: "#",
-          icon: Rabbit,
-          description: "Our fastest model for general use cases.",
-        },
-        {
-          title: "Explorer",
-          url: "#",
-          icon: Bird,
-          description: "Performance and speed for efficiency.",
-        },
-        {
-          title: "Quantum",
-          url: "#",
-          icon: Turtle,
-          description: "The most powerful model for complex computations.",
-        },
-      ],
-    },
-    {
-      title: "Documentation",
-      url: "#",
-      icon: BookOpen,
-      items: [
-        {
-          title: "Introduction",
-          url: "#",
-        },
-        {
-          title: "Get Started",
-          url: "#",
-        },
-        {
-          title: "Tutorials",
-          url: "#",
-        },
-        {
-          title: "Changelog",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "API",
-      url: "#",
-      icon: Code2,
-      items: [
-        {
-          title: "Chat",
-          url: "#",
-        },
-        {
-          title: "Completion",
-          url: "#",
-        },
-        {
-          title: "Images",
-          url: "#",
-        },
-        {
-          title: "Video",
-          url: "#",
-        },
-        {
-          title: "Speech",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Settings",
-      url: "#",
-      icon: Settings2,
-      items: [
-        {
-          title: "General",
-          url: "#",
-        },
-        {
-          title: "Team",
-          url: "#",
-        },
-        {
-          title: "Billing",
-          url: "#",
-        },
-        {
-          title: "Limits",
-          url: "#",
-        },
-      ],
-    },
-  ],
-
-  navSecondary: [
-    {
-      title: "Support",
-      url: "#",
-      icon: LifeBuoy,
-    },
-    {
-      title: "Feedback",
-      url: "#",
-      icon: Send,
-    },
-  ],
-  projects: [
-    {
-      name: "Design Engineering",
-      url: "#",
-      icon: Frame,
-    },
-    {
-      name: "Sales & Marketing",
-      url: "#",
-      icon: PieChart,
-    },
-    {
-      name: "Travel",
-      url: "#",
-      icon: Map,
-    },
-  ],
-  searchResults: [
-    {
-      title: "Routing Fundamentals",
-      teaser:
-        "The skeleton of every application is routing. This page will introduce you to the fundamental concepts of routing for the web and how to handle routing in Next.js.",
-      url: "#",
-    },
-    {
-      title: "Layouts and Templates",
-      teaser:
-        "The special files layout.js and template.js allow you to create UI that is shared between routes. This page will guide you through how and when to use these special files.",
-      url: "#",
-    },
-    {
-      title: "Data Fetching, Caching, and Revalidating",
-      teaser:
-        "Data fetching is a core part of any application. This page goes through how you can fetch, cache, and revalidate data in React and Next.js.",
-      url: "#",
-    },
-    {
-      title: "Server and Client Composition Patterns",
-      teaser:
-        "When building React applications, you will need to consider what parts of your application should be rendered on the server or the client. ",
-      url: "#",
-    },
-    {
-      title: "Server Actions and Mutations",
-      teaser:
-        "Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.",
-      url: "#",
-    },
-  ],
-}
-
-export function AppSidebar() {
-  return (
-    <Sidebar>
-      <SidebarHeader>
-        <TeamSwitcher teams={data.teams} />
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarItem>
-          <SidebarLabel>Platform</SidebarLabel>
-          <NavMain items={data.navMain} searchResults={data.searchResults} />
-        </SidebarItem>
-        <SidebarItem>
-          <SidebarLabel>Projects</SidebarLabel>
-          <NavProjects projects={data.projects} />
-        </SidebarItem>
-        <SidebarItem className="mt-auto">
-          <SidebarLabel>Help</SidebarLabel>
-          <NavSecondary items={data.navSecondary} />
-        </SidebarItem>
-        <SidebarItem>
-          <StorageCard />
-        </SidebarItem>
-      </SidebarContent>
-      <SidebarFooter>
-        <NavUser user={data.user} />
-      </SidebarFooter>
-    </Sidebar>
-  )
-}
diff --git a/apps/www/registry/new-york/block/sidebar-01/components/nav-main.tsx b/apps/www/registry/new-york/block/sidebar-01/components/nav-main.tsx
deleted file mode 100644
index dad2e4d7b88..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/components/nav-main.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { ChevronRight, Search, type LucideIcon } from "lucide-react"
-
-import { useIsMobile } from "@/registry/new-york/hooks/use-mobile"
-import { cn } from "@/registry/new-york/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerTrigger,
-} from "@/registry/new-york/ui/drawer"
-import { Input } from "@/registry/new-york/ui/input"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-import { Separator } from "@/registry/new-york/ui/separator"
-
-export function NavMain({
-  className,
-  items,
-  searchResults,
-}: {
-  items: {
-    title: string
-    url: string
-    icon: LucideIcon
-    isActive?: boolean
-    items?: {
-      title: string
-      url: string
-    }[]
-  }[]
-  searchResults: React.ComponentProps<typeof SidebarSearch>["results"]
-} & React.ComponentProps<"ul">) {
-  return (
-    <ul className={cn("grid gap-0.5", className)}>
-      <li>
-        <SidebarSearch results={searchResults} />
-      </li>
-      {items.map((item) => (
-        <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
-          <li>
-            <div className="relative flex items-center">
-              <Link
-                href={item.url}
-                className="min-w-8 flex h-8 flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-              >
-                <item.icon className="h-4 w-4 shrink-0" />
-                <div className="flex flex-1 overflow-hidden">
-                  <div className="line-clamp-1 pr-6">{item.title}</div>
-                </div>
-              </Link>
-              <CollapsibleTrigger asChild>
-                <Button
-                  variant="ghost"
-                  className="absolute right-1 h-6 w-6 rounded-md p-0 ring-ring transition-all focus-visible:ring-2 data-[state=open]:rotate-90"
-                >
-                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                  <span className="sr-only">Toggle</span>
-                </Button>
-              </CollapsibleTrigger>
-            </div>
-            <CollapsibleContent className="px-4 py-0.5">
-              <ul className="grid border-l px-2">
-                {item.items?.map((subItem) => (
-                  <li key={subItem.title}>
-                    <Link
-                      href={subItem.url}
-                      className="min-w-8 flex h-8 items-center gap-2 overflow-hidden rounded-md px-2 text-sm font-medium text-muted-foreground ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-                    >
-                      <div className="line-clamp-1">{subItem.title}</div>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </CollapsibleContent>
-          </li>
-        </Collapsible>
-      ))}
-    </ul>
-  )
-}
-
-function SidebarSearch({
-  results,
-}: {
-  results: {
-    title: string
-    teaser: string
-    url: string
-  }[]
-}) {
-  const isMobile = useIsMobile()
-
-  if (isMobile) {
-    return (
-      <Drawer>
-        <DrawerTrigger className="min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground">
-          <Search className="h-4 w-4 shrink-0" />
-          <div className="flex flex-1 overflow-hidden">
-            <div className="line-clamp-1 pr-6">Search</div>
-          </div>
-        </DrawerTrigger>
-        <DrawerContent>
-          <form>
-            <div className="border-b p-2.5">
-              <Input
-                type="search"
-                placeholder="Search..."
-                className="h-8 rounded-sm shadow-none focus-visible:ring-0"
-              />
-            </div>
-          </form>
-          <div className="grid gap-1 p-1.5 text-sm">
-            {results.map((result) => (
-              <Link
-                href={result.url}
-                key={result.title}
-                className="rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-              >
-                <div className="font-medium">{result.title}</div>
-                <div className="line-clamp-2 text-muted-foreground">
-                  {result.teaser}
-                </div>
-              </Link>
-            ))}
-            <Separator className="my-1.5" />
-            <Link
-              href="#"
-              className="rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2"
-            >
-              See all results
-            </Link>
-          </div>
-        </DrawerContent>
-      </Drawer>
-    )
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger className="min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground">
-        <Search className="h-4 w-4 shrink-0" />
-        <div className="flex flex-1 overflow-hidden">
-          <div className="line-clamp-1 pr-6">Search</div>
-        </div>
-      </PopoverTrigger>
-      <PopoverContent
-        side="right"
-        align="start"
-        sideOffset={4}
-        className="w-96 p-0"
-      >
-        <form>
-          <div className="border-b p-2.5">
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="h-8 rounded-sm shadow-none focus-visible:ring-0"
-            />
-          </div>
-        </form>
-        <div className="grid gap-1 p-1.5 text-sm">
-          {results.map((result) => (
-            <Link
-              href={result.url}
-              key={result.title}
-              className="rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-            >
-              <div className="font-medium">{result.title}</div>
-              <div className="line-clamp-2 text-muted-foreground">
-                {result.teaser}
-              </div>
-            </Link>
-          ))}
-          <Separator className="my-1.5" />
-          <Link
-            href="#"
-            className="rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2"
-          >
-            See all results
-          </Link>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/www/registry/new-york/block/sidebar-01/components/nav-projects.tsx b/apps/www/registry/new-york/block/sidebar-01/components/nav-projects.tsx
deleted file mode 100644
index 4ddd8a937af..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/components/nav-projects.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import Link from "next/link"
-import { MoreHorizontal, PlusSquare, type LucideIcon } from "lucide-react"
-
-import { cn } from "@/registry/new-york/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-
-export function NavProjects({
-  projects,
-  className,
-}: {
-  projects: {
-    name: string
-    url: string
-    icon: LucideIcon
-  }[]
-} & React.ComponentProps<"ul">) {
-  return (
-    <ul className={cn("grid gap-0.5", className)}>
-      {projects.map((item) => (
-        <li
-          key={item.name}
-          className="has-[[data-state=open]]:bg-accent has-[[data-state=open]]:text-accent-foreground group relative rounded-md hover:bg-accent hover:text-accent-foreground"
-        >
-          <Link
-            href={item.url}
-            className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-          >
-            <item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
-            <div className="line-clamp-1 grow overflow-hidden pr-6 font-medium">
-              {item.name}
-            </div>
-          </Link>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                className="peer absolute right-1 top-0.5 h-6 w-6 shrink-0 rounded-md bg-accent p-0 text-accent-foreground opacity-0 ring-ring transition-all focus-visible:ring-2 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100"
-              >
-                <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
-                <span className="sr-only">Toggle</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent side="right" align="start" sideOffset={20}>
-              <DropdownMenuItem>Share</DropdownMenuItem>
-              <DropdownMenuItem>Rename</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Archive</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </li>
-      ))}
-      <li>
-        <button className="flex h-7 w-full items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-left text-xs ring-ring transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2">
-          <PlusSquare className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
-          <div className="line-clamp-1 overflow-hidden font-medium text-muted-foreground">
-            Add Project
-          </div>
-        </button>
-      </li>
-    </ul>
-  )
-}
diff --git a/apps/www/registry/new-york/block/sidebar-01/components/nav-secondary.tsx b/apps/www/registry/new-york/block/sidebar-01/components/nav-secondary.tsx
deleted file mode 100644
index bdf9a84a967..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/components/nav-secondary.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { type LucideIcon } from "lucide-react"
-
-import { cn } from "@/registry/new-york/lib/utils"
-
-export function NavSecondary({
-  className,
-  items,
-}: {
-  items: {
-    title: string
-    url: string
-    icon: LucideIcon
-    items?: {
-      title: string
-      url: string
-    }[]
-  }[]
-} & React.ComponentProps<"ul">) {
-  if (!items?.length) {
-    return null
-  }
-
-  return (
-    <ul className={cn("grid gap-0.5", className)}>
-      {items.map((item) => (
-        <li key={item.title}>
-          <Link
-            href={item.url}
-            className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2"
-          >
-            <item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
-            <div className="line-clamp-1 grow overflow-hidden pr-6 font-medium text-muted-foreground">
-              {item.title}
-            </div>
-          </Link>
-        </li>
-      ))}
-    </ul>
-  )
-}
diff --git a/apps/www/registry/new-york/block/sidebar-01/components/nav-user.tsx b/apps/www/registry/new-york/block/sidebar-01/components/nav-user.tsx
deleted file mode 100644
index a321aa0194d..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/components/nav-user.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import {
-  BadgeCheck,
-  Bell,
-  ChevronsUpDown,
-  CreditCard,
-  LogOut,
-} from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-
-export function NavUser({
-  user,
-}: {
-  user: {
-    name: string
-    email: string
-    avatar: string
-  }
-}) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger className="w-full rounded-md outline-none ring-ring hover:bg-accent focus-visible:ring-2 data-[state=open]:bg-accent">
-        <div className="flex items-center gap-2 px-2 py-1.5 text-left text-sm transition-all">
-          <Avatar className="h-7 w-7 rounded-md border">
-            <AvatarImage
-              src={user.avatar}
-              alt={user.name}
-              className="animate-in fade-in-50 zoom-in-90"
-            />
-            <AvatarFallback className="rounded-md">CN</AvatarFallback>
-          </Avatar>
-          <div className="grid flex-1 leading-none">
-            <div className="font-medium">{user.name}</div>
-            <div className="overflow-hidden text-xs text-muted-foreground">
-              <div className="line-clamp-1">{user.email}</div>
-            </div>
-          </div>
-          <ChevronsUpDown className="ml-auto mr-0.5 h-4 w-4 text-muted-foreground/50" />
-        </div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-56"
-        align="end"
-        side="right"
-        sideOffset={4}
-      >
-        <DropdownMenuLabel className="p-0 font-normal">
-          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm transition-all">
-            <Avatar className="h-7 w-7 rounded-md">
-              <AvatarImage src={user.avatar} alt={user.name} />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
-            <div className="grid flex-1">
-              <div className="font-medium">{user.name}</div>
-              <div className="overflow-hidden text-xs text-muted-foreground">
-                <div className="line-clamp-1">{user.email}</div>
-              </div>
-            </div>
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem className="gap-2">
-            <BadgeCheck className="h-4 w-4 text-muted-foreground" />
-            Account
-          </DropdownMenuItem>
-          <DropdownMenuItem className="gap-2">
-            <CreditCard className="h-4 w-4 text-muted-foreground" />
-            Billing
-          </DropdownMenuItem>
-          <DropdownMenuItem className="gap-2">
-            <Bell className="h-4 w-4 text-muted-foreground" />
-            Notifications
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem className="gap-2">
-          <LogOut className="h-4 w-4 text-muted-foreground" />
-          Log out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/apps/www/registry/new-york/block/sidebar-01/components/storage-card.tsx b/apps/www/registry/new-york/block/sidebar-01/components/storage-card.tsx
deleted file mode 100644
index c4672ab6060..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/components/storage-card.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Database } from "lucide-react"
-
-import { Card, CardContent } from "@/registry/new-york/ui/card"
-import { Progress } from "@/registry/new-york/ui/progress"
-
-export function StorageCard() {
-  return (
-    <Card className="rounded-md text-xs shadow-sm">
-      <CardContent className="flex items-start gap-2.5 p-2.5">
-        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-accent text-accent-foreground">
-          <Database className="h-5 w-5 text-muted-foreground" />
-        </div>
-        <div className="grid flex-1 gap-1">
-          <p className="font-medium">Running out of space?</p>
-          <p className="text-muted-foreground">79.2 GB / 100 GB used</p>
-          <Progress
-            value={79.2}
-            className="mt-1"
-            aria-label="79.2 GB / 100 GB used"
-          />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/sidebar-01/components/team-switcher.tsx b/apps/www/registry/new-york/block/sidebar-01/components/team-switcher.tsx
deleted file mode 100644
index 0298377c752..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/components/team-switcher.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronsUpDown, Plus } from "lucide-react"
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-
-export function TeamSwitcher({
-  teams,
-}: {
-  teams: {
-    name: string
-    logo: React.ElementType
-    plan: string
-  }[]
-}) {
-  const [activeTeam, setActiveTeam] = React.useState(teams[0])
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger className="w-full rounded-md ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 data-[state=open]:bg-accent">
-        <div className="flex items-center gap-1.5 overflow-hidden px-2 py-1.5 text-left text-sm transition-all">
-          <div className="flex h-5 w-5 items-center justify-center rounded-sm bg-primary text-primary-foreground">
-            <activeTeam.logo className="h-3.5 w-3.5 shrink-0" />
-          </div>
-          <div className="line-clamp-1 flex-1 pr-2 font-medium">
-            {activeTeam.name}
-          </div>
-          <ChevronsUpDown className="ml-auto h-4 w-4 text-muted-foreground/50" />
-        </div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-64"
-        align="start"
-        side="right"
-        sideOffset={4}
-      >
-        <DropdownMenuLabel className="text-xs text-muted-foreground">
-          Teams
-        </DropdownMenuLabel>
-        {teams.map((team, index) => (
-          <DropdownMenuItem
-            key={team.name}
-            onClick={() => setActiveTeam(team)}
-            className="items-start gap-2 px-1.5"
-          >
-            <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground">
-              <team.logo className="h-5 w-5 shrink-0" />
-            </div>
-            <div className="grid flex-1 leading-tight">
-              <div className="line-clamp-1 font-medium">{team.name}</div>
-              <div className="overflow-hidden text-xs text-muted-foreground">
-                <div className="line-clamp-1">{team.plan}</div>
-              </div>
-            </div>
-            <DropdownMenuShortcut className="self-center">
-              ⌘{index + 1}
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-        ))}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem className="gap-2 px-1.5">
-          <div className="flex h-8 w-8 items-center justify-center rounded-md border bg-background">
-            <Plus className="h-5 w-5" />
-          </div>
-          <div className="font-medium text-muted-foreground">Add workspace</div>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/apps/www/registry/new-york/block/sidebar-01/hooks/use-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-01/hooks/use-sidebar.tsx
deleted file mode 100644
index 61208293d61..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/hooks/use-sidebar.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-export function useSidebar() {
-  const [state, setState] = React.useState<"closed" | "open">("open")
-
-  return {
-    open: state === "open",
-    onOpenChange: (open: boolean) => setState(open ? "open" : "closed"),
-  }
-}
diff --git a/apps/www/registry/new-york/block/sidebar-01/page.tsx b/apps/www/registry/new-york/block/sidebar-01/page.tsx
deleted file mode 100644
index 3e39cd9948b..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar"
-import {
-  SidebarLayout,
-  SidebarTrigger,
-} from "@/registry/new-york/block/sidebar-01/ui/sidebar"
-
-export const iframeHeight = "870px"
-
-export const containerClassName = "w-full h-full"
-
-export default async function Page() {
-  const { cookies } = await import("next/headers")
-  return (
-    <SidebarLayout
-      defaultOpen={cookies().get("sidebar:state")?.value === "true"}
-    >
-      <AppSidebar />
-      <main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
-        <div className="h-full rounded-md border-2 border-dashed p-2">
-          <SidebarTrigger />
-        </div>
-      </main>
-    </SidebarLayout>
-  )
-}
diff --git a/apps/www/registry/new-york/block/sidebar-01/ui/sidebar.tsx b/apps/www/registry/new-york/block/sidebar-01/ui/sidebar.tsx
deleted file mode 100644
index 37ef332e2a7..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/ui/sidebar.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { PanelLeft } from "lucide-react"
-
-import { useIsMobile } from "@/registry/new-york/hooks/use-mobile"
-import { cn } from "@/registry/new-york/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
-import { Sheet, SheetContent } from "@/registry/new-york/ui/sheet"
-
-export const SIDEBAR_STATE_COOKIE = "sidebar:state"
-
-type SidebarContext = {
-  state: "open" | "closed"
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}
-
-const SidebarContext = React.createContext<SidebarContext>({
-  state: "open",
-  open: true,
-  onOpenChange: () => {},
-})
-
-function useSidebar() {
-  return React.useContext(SidebarContext)
-}
-
-const SidebarLayout = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean
-  }
->(({ defaultOpen, className, ...props }, ref) => {
-  const [open, setOpen] = React.useState(defaultOpen ?? true)
-
-  const onOpenChange = React.useCallback((open: boolean) => {
-    setOpen(open)
-    document.cookie = `${SIDEBAR_STATE_COOKIE}=${open}; path=/; max-age=${
-      60 * 60 * 24 * 7
-    }`
-  }, [])
-
-  const state = open ? "open" : "closed"
-
-  return (
-    <SidebarContext.Provider value={{ state, open, onOpenChange }}>
-      <div
-        ref={ref}
-        data-sidebar={state}
-        style={
-          {
-            "--sidebar-width": "16rem",
-          } as React.CSSProperties
-        }
-        className={cn(
-          "flex min-h-screen bg-accent/50 pl-0 transition-all duration-300 ease-in-out data-[sidebar=closed]:pl-0 sm:pl-[--sidebar-width]",
-          className
-        )}
-        {...props}
-      />
-    </SidebarContext.Provider>
-  )
-})
-SidebarLayout.displayName = "SidebarLayout"
-
-const SidebarTrigger = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
-  const { open, onOpenChange } = useSidebar()
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      className={cn("h-8 w-8", className)}
-      onClick={() => onOpenChange(!open)}
-      {...props}
-    >
-      <PanelLeft className="h-4 w-4" />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-})
-SidebarTrigger.displayName = "SidebarTrigger"
-
-const Sidebar = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, children }, ref) => {
-    const isMobile = useIsMobile()
-    const { open, onOpenChange } = useSidebar()
-
-    const sidebar = (
-      <div
-        ref={ref}
-        className={cn("flex h-full flex-col border-r bg-background", className)}
-      >
-        {children}
-      </div>
-    )
-
-    if (isMobile) {
-      return (
-        <Sheet open={open} onOpenChange={onOpenChange}>
-          <SheetContent
-            className="w-[260px] p-0 md:w-[--sidebar-width] [&>button]:hidden"
-            side="left"
-          >
-            {sidebar}
-          </SheetContent>
-        </Sheet>
-      )
-    }
-
-    return (
-      <aside className="fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]">
-        {sidebar}
-      </aside>
-    )
-  }
-)
-Sidebar.displayName = "Sidebar"
-
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn("flex items-center border-b px-2.5 py-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarHeader.displayName = "SidebarHeader"
-
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn("flex items-center border-t px-2.5 py-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarFooter.displayName = "SidebarFooter"
-
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn("flex flex-1 flex-col gap-5 overflow-auto py-4", className)}
-      {...props}
-    />
-  )
-})
-SidebarContent.displayName = "SidebarContent"
-
-const SidebarItem = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div ref={ref} className={cn("grid gap-2 px-2.5", className)} {...props} />
-  )
-})
-SidebarItem.displayName = "SidebarItem"
-
-const SidebarLabel = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "px-1.5 text-xs font-medium text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarLabel.displayName = "SidebarLabel"
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarItem,
-  SidebarLabel,
-  SidebarLayout,
-  SidebarTrigger,
-  useSidebar,
-}
diff --git a/apps/www/registry/new-york/blocks/calendar-01.tsx b/apps/www/registry/new-york/blocks/calendar-01.tsx
new file mode 100644
index 00000000000..6ec892f2670
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-01.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar01() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-02.tsx b/apps/www/registry/new-york/blocks/calendar-02.tsx
new file mode 100644
index 00000000000..ec4099fc806
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-02.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar02() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      numberOfMonths={2}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-03.tsx b/apps/www/registry/new-york/blocks/calendar-03.tsx
new file mode 100644
index 00000000000..fa06eb391f9
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-03.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar03() {
+  const [dates, setDates] = React.useState<Date[]>([
+    new Date(2025, 5, 12),
+    new Date(2025, 6, 24),
+  ])
+
+  return (
+    <Calendar
+      mode="multiple"
+      numberOfMonths={2}
+      defaultMonth={dates[0]}
+      required
+      selected={dates}
+      onSelect={setDates}
+      max={5}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-04.tsx b/apps/www/registry/new-york/blocks/calendar-04.tsx
new file mode 100644
index 00000000000..d3f823baf8d
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-04.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar04() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 9),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-05.tsx b/apps/www/registry/new-york/blocks/calendar-05.tsx
new file mode 100644
index 00000000000..ec01627f237
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-05.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar05() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 6, 15),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-06.tsx b/apps/www/registry/new-york/blocks/calendar-06.tsx
new file mode 100644
index 00000000000..9d8cc09c9db
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-06.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar06() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 26),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={1}
+        min={5}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        A minimum of 5 days is required
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-07.tsx b/apps/www/registry/new-york/blocks/calendar-07.tsx
new file mode 100644
index 00000000000..26651effb9d
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-07.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar07() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 18),
+    to: new Date(2025, 6, 7),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        min={2}
+        max={20}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        Your stay must be between 2 and 20 nights
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-08.tsx b/apps/www/registry/new-york/blocks/calendar-08.tsx
new file mode 100644
index 00000000000..094f975b2da
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-08.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar08() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={{
+        before: new Date(2025, 5, 12),
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-09.tsx b/apps/www/registry/new-york/blocks/calendar-09.tsx
new file mode 100644
index 00000000000..f46cb5b13e1
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-09.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar09() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+      disabled={{ dayOfWeek: [0, 6] }}
+      className="rounded-lg border shadow-sm"
+      excludeDisabled
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-10.tsx b/apps/www/registry/new-york/blocks/calendar-10.tsx
new file mode 100644
index 00000000000..05e48d53007
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-10.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+
+export default function Calendar10() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Card>
+      <CardHeader className="relative">
+        <CardTitle>Appointment</CardTitle>
+        <CardDescription>Find a date</CardDescription>
+        <Button
+          size="sm"
+          variant="outline"
+          className="absolute right-4 top-4"
+          onClick={() => {
+            setMonth(new Date())
+            setDate(new Date())
+          }}
+        >
+          Today
+        </Button>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="single"
+          month={month}
+          onMonthChange={setMonth}
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-11.tsx b/apps/www/registry/new-york/blocks/calendar-11.tsx
new file mode 100644
index 00000000000..10a58ba3cde
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-11.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar11() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 17),
+    to: new Date(2025, 5, 20),
+  })
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <Calendar
+        mode="range"
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        startMonth={new Date(2025, 5, 1)}
+        endMonth={new Date(2025, 6, 31)}
+        disableNavigation
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="text-muted-foreground text-center text-xs">
+        We are open in June and July only.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-12.tsx b/apps/www/registry/new-york/blocks/calendar-12.tsx
new file mode 100644
index 00000000000..89e8b422e10
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-12.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+import { enUS, es } from "react-day-picker/locale"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+const localizedStrings = {
+  en: {
+    title: "Book an appointment",
+    description: "Select the dates for your appointment",
+  },
+  es: {
+    title: "Reserva una cita",
+    description: "Selecciona las fechas para tu cita",
+  },
+} as const
+
+export default function Calendar12() {
+  const [locale, setLocale] =
+    React.useState<keyof typeof localizedStrings>("es")
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 8, 9),
+    to: new Date(2025, 8, 17),
+  })
+
+  return (
+    <Card>
+      <CardHeader className="relative border-b">
+        <CardTitle>{localizedStrings[locale].title}</CardTitle>
+        <CardDescription>
+          {localizedStrings[locale].description}
+        </CardDescription>
+        <Select
+          value={locale}
+          onValueChange={(value) =>
+            setLocale(value as keyof typeof localizedStrings)
+          }
+        >
+          <SelectTrigger className="absolute right-4 top-4 w-[100px]">
+            <SelectValue placeholder="Language" />
+          </SelectTrigger>
+          <SelectContent align="end">
+            <SelectItem value="es">Español</SelectItem>
+            <SelectItem value="en">English</SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <Calendar
+          mode="range"
+          selected={dateRange}
+          onSelect={setDateRange}
+          defaultMonth={dateRange?.from}
+          numberOfMonths={2}
+          locale={locale === "es" ? es : enUS}
+          className="bg-transparent p-0"
+          buttonVariant="outline"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-13.tsx b/apps/www/registry/new-york/blocks/calendar-13.tsx
new file mode 100644
index 00000000000..fbe5c58f773
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-13.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export default function Calendar13() {
+  const [dropdown, setDropdown] =
+    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
+      "dropdown"
+    )
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        mode="single"
+        defaultMonth={date}
+        selected={date}
+        onSelect={setDate}
+        captionLayout={dropdown}
+        className="rounded-lg border shadow-sm"
+      />
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="dropdown" className="px-1">
+          Dropdown
+        </Label>
+        <Select
+          value={dropdown}
+          onValueChange={(value) =>
+            setDropdown(
+              value as React.ComponentProps<typeof Calendar>["captionLayout"]
+            )
+          }
+        >
+          <SelectTrigger id="dropdown" className="bg-background w-full">
+            <SelectValue placeholder="Dropdown" />
+          </SelectTrigger>
+          <SelectContent align="center">
+            <SelectItem value="dropdown">Month and Year</SelectItem>
+            <SelectItem value="dropdown-months">Month Only</SelectItem>
+            <SelectItem value="dropdown-years">Year Only</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-14.tsx b/apps/www/registry/new-york/blocks/calendar-14.tsx
new file mode 100644
index 00000000000..41be778b9fa
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-14.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar14() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const bookedDates = Array.from(
+    { length: 12 },
+    (_, i) => new Date(2025, 5, 15 + i)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={bookedDates}
+      modifiers={{
+        booked: bookedDates,
+      }}
+      modifiersClassNames={{
+        booked: "[&>button]:line-through opacity-100",
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-15.tsx b/apps/www/registry/new-york/blocks/calendar-15.tsx
new file mode 100644
index 00000000000..8031bd2cedd
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-15.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar15() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border shadow-sm"
+      showWeekNumber
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-16.tsx b/apps/www/registry/new-york/blocks/calendar-16.tsx
new file mode 100644
index 00000000000..638ec8ff21d
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-16.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Clock2Icon } from "lucide-react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar16() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col gap-6 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-from">Start Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-from"
+              type="time"
+              step="1"
+              defaultValue="10:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <Label htmlFor="time-to">End Time</Label>
+          <div className="relative flex w-full items-center gap-2">
+            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+            <Input
+              id="time-to"
+              type="time"
+              step="1"
+              defaultValue="12:30:00"
+              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+            />
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-17.tsx b/apps/www/registry/new-york/blocks/calendar-17.tsx
new file mode 100644
index 00000000000..5ac8cbc4f0e
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-17.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar17() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0 [--cell-size:2.8rem]"
+        />
+      </CardContent>
+      <CardFooter className="*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4">
+        <div className="flex-1">
+          <Label htmlFor="time-from" className="sr-only">
+            Start Time
+          </Label>
+          <Input
+            id="time-from"
+            type="time"
+            step="1"
+            defaultValue="10:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <span>-</span>
+        <div className="flex-1">
+          <Label htmlFor="time-to" className="sr-only">
+            End Time
+          </Label>
+          <Input
+            id="time-to"
+            type="time"
+            step="1"
+            defaultValue="12:30:00"
+            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-18.tsx b/apps/www/registry/new-york/blocks/calendar-18.tsx
new file mode 100644
index 00000000000..d647923405f
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-18.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar18() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      buttonVariant="ghost"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-19.tsx b/apps/www/registry/new-york/blocks/calendar-19.tsx
new file mode 100644
index 00000000000..54a62dd7e95
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-19.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { addDays } from "date-fns"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+export default function Calendar19() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="max-w-[300px] py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          defaultMonth={date}
+          className="bg-transparent p-0 [--cell-size:2.375rem]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t px-4 pb-0 pt-4">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-20.tsx b/apps/www/registry/new-york/blocks/calendar-20.tsx
new file mode 100644
index 00000000000..2a2bb3f5eb6
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-20.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+export default function Calendar20() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00")
+  const timeSlots = Array.from({ length: 37 }, (_, i) => {
+    const totalMinutes = i * 15
+    const hour = Math.floor(totalMinutes / 60) + 9
+    const minute = totalMinutes % 60
+    return `${hour.toString().padStart(2, "0")}:${minute
+      .toString()
+      .padStart(2, "0")}`
+  })
+
+  const bookedDates = Array.from(
+    { length: 3 },
+    (_, i) => new Date(2025, 5, 17 + i)
+  )
+
+  return (
+    <Card className="gap-0 p-0">
+      <CardContent className="relative p-0 md:pr-48">
+        <div className="p-6">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            defaultMonth={date}
+            disabled={bookedDates}
+            showOutsideDays={false}
+            modifiers={{
+              booked: bookedDates,
+            }}
+            modifiersClassNames={{
+              booked: "[&>button]:line-through opacity-100",
+            }}
+            className="bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]"
+            formatters={{
+              formatWeekdayName: (date) => {
+                return date.toLocaleString("en-US", { weekday: "short" })
+              },
+            }}
+          />
+        </div>
+        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0">
+          <div className="grid gap-2">
+            {timeSlots.map((time) => (
+              <Button
+                key={time}
+                variant={selectedTime === time ? "default" : "outline"}
+                onClick={() => setSelectedTime(time)}
+                className="w-full shadow-none"
+              >
+                {time}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-4 border-t !py-5 px-6 md:flex-row">
+        <div className="text-sm">
+          {date && selectedTime ? (
+            <>
+              Your meeting is booked for{" "}
+              <span className="font-medium">
+                {" "}
+                {date?.toLocaleDateString("en-US", {
+                  weekday: "long",
+                  day: "numeric",
+                  month: "long",
+                })}{" "}
+              </span>
+              at <span className="font-medium">{selectedTime}</span>.
+            </>
+          ) : (
+            <>Select a date and time for your meeting.</>
+          )}
+        </div>
+        <Button
+          disabled={!date || !selectedTime}
+          className="w-full md:ml-auto md:w-auto"
+          variant="outline"
+        >
+          Continue
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-21.tsx b/apps/www/registry/new-york/blocks/calendar-21.tsx
new file mode 100644
index 00000000000..9016b91b8ca
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-21.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { DateRange } from "react-day-picker"
+
+import { Calendar, CalendarDayButton } from "@/registry/new-york/ui/calendar"
+
+export default function Calendar21() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 12),
+    to: new Date(2025, 5, 17),
+  })
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={range?.from}
+      selected={range}
+      onSelect={setRange}
+      numberOfMonths={1}
+      captionLayout="dropdown"
+      className="rounded-lg border shadow-sm [--cell-size:2.75rem] md:[--cell-size:3rem]"
+      formatters={{
+        formatMonthDropdown: (date) => {
+          return date.toLocaleString("default", { month: "long" })
+        },
+      }}
+      components={{
+        DayButton: ({ children, modifiers, day, ...props }) => {
+          const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
+
+          return (
+            <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+              {children}
+              {!modifiers.outside && <span>{isWeekend ? "$220" : "$100"}</span>}
+            </CalendarDayButton>
+          )
+        },
+      }}
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-22.tsx b/apps/www/registry/new-york/blocks/calendar-22.tsx
new file mode 100644
index 00000000000..fbba5c925ac
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-22.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar22() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-23.tsx b/apps/www/registry/new-york/blocks/calendar-23.tsx
new file mode 100644
index 00000000000..2702cd90fd6
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-23.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar23() {
+  const [range, setRange] = React.useState<DateRange | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-24.tsx b/apps/www/registry/new-york/blocks/calendar-24.tsx
new file mode 100644
index 00000000000..02640d5936f
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-24.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar24() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-32 justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="time" className="px-1">
+          Time
+        </Label>
+        <Input
+          type="time"
+          id="time"
+          step="1"
+          defaultValue="10:30:00"
+          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-25.tsx b/apps/www/registry/new-york/blocks/calendar-25.tsx
new file mode 100644
index 00000000000..5ed864df3e7
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-25.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar25() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date" className="px-1">
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-full justify-between font-normal"
+            >
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={(date) => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-26.tsx b/apps/www/registry/new-york/blocks/calendar-26.tsx
new file mode 100644
index 00000000000..166cd464982
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-26.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar26() {
+  const [openFrom, setOpenFrom] = React.useState(false)
+  const [openTo, setOpenTo] = React.useState(false)
+  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [dateTo, setDateTo] = React.useState<Date | undefined>(
+    new Date("2025-06-03")
+  )
+
+  return (
+    <div className="flex w-full max-w-64 min-w-0 flex-col gap-6">
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-from" className="px-1">
+            Check-in
+          </Label>
+          <Popover open={openFrom} onOpenChange={setOpenFrom}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-from"
+                className="w-full justify-between font-normal"
+              >
+                {dateFrom
+                  ? dateFrom.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateFrom}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateFrom(date)
+                  setOpenFrom(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-from" className="invisible px-1">
+            From
+          </Label>
+          <Input
+            type="time"
+            id="time-from"
+            step="1"
+            defaultValue="10:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col gap-3">
+          <Label htmlFor="date-to" className="px-1">
+            Check-out
+          </Label>
+          <Popover open={openTo} onOpenChange={setOpenTo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-to"
+                className="w-full justify-between font-normal"
+              >
+                {dateTo
+                  ? dateTo.toLocaleDateString("en-US", {
+                      day: "2-digit",
+                      month: "short",
+                      year: "numeric",
+                    })
+                  : "Select date"}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto overflow-hidden p-0"
+              align="start"
+            >
+              <Calendar
+                mode="single"
+                selected={dateTo}
+                captionLayout="dropdown"
+                onSelect={(date) => {
+                  setDateTo(date)
+                  setOpenTo(false)
+                }}
+                disabled={dateFrom && { before: dateFrom }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Label htmlFor="time-to" className="invisible px-1">
+            To
+          </Label>
+          <Input
+            type="time"
+            id="time-to"
+            step="1"
+            defaultValue="12:30:00"
+            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-27.tsx b/apps/www/registry/new-york/blocks/calendar-27.tsx
new file mode 100644
index 00000000000..89c65876e2c
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-27.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+const chartData = [
+  { date: "2025-06-01", visitors: 178 },
+  { date: "2025-06-02", visitors: 470 },
+  { date: "2025-06-03", visitors: 103 },
+  { date: "2025-06-04", visitors: 439 },
+  { date: "2025-06-05", visitors: 88 },
+  { date: "2025-06-06", visitors: 294 },
+  { date: "2025-06-07", visitors: 323 },
+  { date: "2025-06-08", visitors: 385 },
+  { date: "2025-06-09", visitors: 438 },
+  { date: "2025-06-10", visitors: 155 },
+  { date: "2025-06-11", visitors: 92 },
+  { date: "2025-06-12", visitors: 492 },
+  { date: "2025-06-13", visitors: 81 },
+  { date: "2025-06-14", visitors: 426 },
+  { date: "2025-06-15", visitors: 307 },
+  { date: "2025-06-16", visitors: 371 },
+  { date: "2025-06-17", visitors: 475 },
+  { date: "2025-06-18", visitors: 107 },
+  { date: "2025-06-19", visitors: 341 },
+  { date: "2025-06-20", visitors: 408 },
+  { date: "2025-06-21", visitors: 169 },
+  { date: "2025-06-22", visitors: 317 },
+  { date: "2025-06-23", visitors: 480 },
+  { date: "2025-06-24", visitors: 132 },
+  { date: "2025-06-25", visitors: 141 },
+  { date: "2025-06-26", visitors: 434 },
+  { date: "2025-06-27", visitors: 448 },
+  { date: "2025-06-28", visitors: 149 },
+  { date: "2025-06-29", visitors: 103 },
+  { date: "2025-06-30", visitors: 446 },
+]
+
+const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--primary))",
+  },
+} satisfies ChartConfig
+
+export default function Calendar27() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 5),
+    to: new Date(2025, 5, 20),
+  })
+  const filteredData = React.useMemo(() => {
+    if (!range?.from && !range?.to) {
+      return chartData
+    }
+
+    return chartData.filter((item) => {
+      const date = new Date(item.date)
+      return date >= range.from! && date <= range.to!
+    })
+  }, [range])
+
+  return (
+    <Card className="@container/card w-full max-w-xl">
+      <CardHeader className="@md/card:grid relative flex flex-col border-b">
+        <CardTitle>Web Analytics</CardTitle>
+        <CardDescription>
+          Showing total visitors for this month.
+        </CardDescription>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="absolute right-4 top-4">
+              <CalendarIcon />
+              {range?.from && range?.to
+                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+                : "June 2025"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              className="w-full"
+              mode="range"
+              defaultMonth={range?.from}
+              selected={range}
+              onSelect={setRange}
+              disableNavigation
+              startMonth={range?.from}
+              fixedWeeks
+              showOutsideDays
+              disabled={{
+                after: new Date(2025, 5, 31),
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+      <CardContent className="px-4">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={filteredData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={20}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="visitors"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey="visitors" fill={`var(--color-visitors)`} radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="border-t pt-6">
+        <div className="text-sm">
+          You had{" "}
+          <span className="font-semibold">{total.toLocaleString()}</span>{" "}
+          visitors for the month of June.
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-28.tsx b/apps/www/registry/new-york/blocks/calendar-28.tsx
new file mode 100644
index 00000000000..40b63bc2e76
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-28.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+function isValidDate(date: Date | undefined) {
+  if (!date) {
+    return false
+  }
+  return !isNaN(date.getTime())
+}
+
+export default function Calendar28() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date("2025-06-01")
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+  const [value, setValue] = React.useState(formatDate(date))
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Subscription Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="June 01, 2025"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            const date = new Date(e.target.value)
+            setValue(e.target.value)
+            if (isValidDate(date)) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto overflow-hidden p-0"
+            align="end"
+            alignOffset={-8}
+            sideOffset={10}
+          >
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-29.tsx b/apps/www/registry/new-york/blocks/calendar-29.tsx
new file mode 100644
index 00000000000..a08ffa1b1db
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-29.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { parseDate } from "chrono-node"
+import { CalendarIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return ""
+  }
+
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+export default function Calendar29() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("In 2 days")
+  const [date, setDate] = React.useState<Date | undefined>(
+    parseDate(value) || undefined
+  )
+  const [month, setMonth] = React.useState<Date | undefined>(date)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Schedule Date
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="Tomorrow or next week"
+          className="bg-background pr-10"
+          onChange={(e) => {
+            setValue(e.target.value)
+            const date = parseDate(e.target.value)
+            if (date) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            >
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={(date) => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="text-muted-foreground px-1 text-sm">
+        Your post will be published on{" "}
+        <span className="font-medium">{formatDate(date)}</span>.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-30.tsx b/apps/www/registry/new-york/blocks/calendar-30.tsx
new file mode 100644
index 00000000000..05b5a9ae9f9
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-30.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { ChevronDownIcon } from "lucide-react"
+import { type DateRange } from "react-day-picker"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function Calendar30() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 5, 4),
+    to: new Date(2025, 5, 10),
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="dates" className="px-1">
+        Select your stay
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="dates"
+            className="w-56 justify-between font-normal"
+          >
+            {range?.from && range?.to
+              ? formatDateRange(range.from, range.to, {
+                  includeTime: false,
+                })
+              : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            captionLayout="dropdown"
+            onSelect={(range) => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-31.tsx b/apps/www/registry/new-york/blocks/calendar-31.tsx
new file mode 100644
index 00000000000..c4d3844f9e2
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-31.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { formatDateRange } from "little-date"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/registry/new-york/ui/card"
+
+const events = [
+  {
+    title: "Team Sync Meeting",
+    from: "2025-06-12T09:00:00",
+    to: "2025-06-12T10:00:00",
+  },
+  {
+    title: "Design Review",
+    from: "2025-06-12T11:30:00",
+    to: "2025-06-12T12:30:00",
+  },
+  {
+    title: "Client Presentation",
+    from: "2025-06-12T14:00:00",
+    to: "2025-06-12T15:00:00",
+  },
+]
+
+export default function Calendar31() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+
+  return (
+    <Card className="w-fit py-4">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="bg-transparent p-0"
+          required
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4">
+        <div className="flex w-full items-center justify-between px-1">
+          <div className="text-sm font-medium">
+            {date?.toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+            })}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            title="Add Event"
+          >
+            <PlusIcon />
+            <span className="sr-only">Add Event</span>
+          </Button>
+        </div>
+        <div className="flex w-full flex-col gap-2">
+          {events.map((event) => (
+            <div
+              key={event.title}
+              className="bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full"
+            >
+              <div className="font-medium">{event.title}</div>
+              <div className="text-muted-foreground text-xs">
+                {formatDateRange(new Date(event.from), new Date(event.to))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/calendar-32.tsx b/apps/www/registry/new-york/blocks/calendar-32.tsx
new file mode 100644
index 00000000000..21c8f5e160c
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/calendar-32.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { CalendarPlusIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function Calendar32() {
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<Date | undefined>(undefined)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : "Select date"}
+            <CalendarPlusIcon />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="w-auto overflow-hidden p-0">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Select date</DrawerTitle>
+            <DrawerDescription>Set your date of birth</DrawerDescription>
+          </DrawerHeader>
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date)
+              setOpen(false)
+            }}
+            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
+          />
+        </DrawerContent>
+      </Drawer>
+      <div className="text-muted-foreground px-1 text-sm">
+        This example works best on mobile.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/dashboard-01/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/dashboard-01/components/app-sidebar.tsx
new file mode 100644
index 00000000000..dfe2cad6796
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/dashboard-01/components/app-sidebar.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArrowUpCircleIcon,
+  BarChartIcon,
+  CameraIcon,
+  ClipboardListIcon,
+  DatabaseIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileTextIcon,
+  FolderIcon,
+  HelpCircleIcon,
+  LayoutDashboardIcon,
+  ListIcon,
+  SearchIcon,
+  SettingsIcon,
+  UsersIcon,
+} from "lucide-react"
+
+import { NavDocuments } from "@/registry/new-york/blocks/dashboard-01/components/nav-documents"
+import { NavMain } from "@/registry/new-york/blocks/dashboard-01/components/nav-main"
+import { NavSecondary } from "@/registry/new-york/blocks/dashboard-01/components/nav-secondary"
+import { NavUser } from "@/registry/new-york/blocks/dashboard-01/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Dashboard",
+      url: "#",
+      icon: LayoutDashboardIcon,
+    },
+    {
+      title: "Lifecycle",
+      url: "#",
+      icon: ListIcon,
+    },
+    {
+      title: "Analytics",
+      url: "#",
+      icon: BarChartIcon,
+    },
+    {
+      title: "Projects",
+      url: "#",
+      icon: FolderIcon,
+    },
+    {
+      title: "Team",
+      url: "#",
+      icon: UsersIcon,
+    },
+  ],
+  navClouds: [
+    {
+      title: "Capture",
+      icon: CameraIcon,
+      isActive: true,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Proposal",
+      icon: FileTextIcon,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Prompts",
+      icon: FileCodeIcon,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Settings",
+      url: "#",
+      icon: SettingsIcon,
+    },
+    {
+      title: "Get Help",
+      url: "#",
+      icon: HelpCircleIcon,
+    },
+    {
+      title: "Search",
+      url: "#",
+      icon: SearchIcon,
+    },
+  ],
+  documents: [
+    {
+      name: "Data Library",
+      url: "#",
+      icon: DatabaseIcon,
+    },
+    {
+      name: "Reports",
+      url: "#",
+      icon: ClipboardListIcon,
+    },
+    {
+      name: "Word Assistant",
+      url: "#",
+      icon: FileIcon,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="offcanvas" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              className="data-[slot=sidebar-menu-button]:!p-1.5"
+            >
+              <a href="#">
+                <ArrowUpCircleIcon className="h-5 w-5" />
+                <span className="text-base font-semibold">Acme Inc.</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavDocuments items={data.documents} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/dashboard-01/components/chart-area-interactive.tsx b/apps/www/registry/new-york/blocks/dashboard-01/components/chart-area-interactive.tsx
new file mode 100644
index 00000000000..ae148f4dfbe
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/dashboard-01/components/chart-area-interactive.tsx
@@ -0,0 +1,295 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import { useIsMobile } from "@/registry/new-york/hooks/use-mobile"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaInteractive() {
+  const isMobile = useIsMobile()
+  const [timeRange, setTimeRange] = React.useState("30d")
+
+  React.useEffect(() => {
+    if (isMobile) {
+      setTimeRange("7d")
+    }
+  }, [isMobile])
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card className="@container/card">
+      <CardHeader className="relative">
+        <CardTitle>Total Visitors</CardTitle>
+        <CardDescription>
+          <span className="@[540px]/card:block hidden">
+            Total for the last 3 months
+          </span>
+          <span className="@[540px]/card:hidden">Last 3 months</span>
+        </CardDescription>
+        <div className="absolute right-4 top-4">
+          <ToggleGroup
+            type="single"
+            value={timeRange}
+            onValueChange={setTimeRange}
+            variant="outline"
+            className="@[767px]/card:flex hidden"
+          >
+            <ToggleGroupItem value="90d" className="h-8 px-2.5">
+              Last 3 months
+            </ToggleGroupItem>
+            <ToggleGroupItem value="30d" className="h-8 px-2.5">
+              Last 30 days
+            </ToggleGroupItem>
+            <ToggleGroupItem value="7d" className="h-8 px-2.5">
+              Last 7 days
+            </ToggleGroupItem>
+          </ToggleGroup>
+          <Select value={timeRange} onValueChange={setTimeRange}>
+            <SelectTrigger
+              className="@[767px]/card:hidden flex w-40"
+              aria-label="Select a value"
+            >
+              <SelectValue placeholder="Last 3 months" />
+            </SelectTrigger>
+            <SelectContent className="rounded-xl">
+              <SelectItem value="90d" className="rounded-lg">
+                Last 3 months
+              </SelectItem>
+              <SelectItem value="30d" className="rounded-lg">
+                Last 30 days
+              </SelectItem>
+              <SelectItem value="7d" className="rounded-lg">
+                Last 7 days
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={1.0}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/dashboard-01/components/data-table.tsx b/apps/www/registry/new-york/blocks/dashboard-01/components/data-table.tsx
new file mode 100644
index 00000000000..b35db2c9209
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/dashboard-01/components/data-table.tsx
@@ -0,0 +1,823 @@
+"use client"
+
+import * as React from "react"
+import {
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type UniqueIdentifier,
+} from "@dnd-kit/core"
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  Row,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  CheckCircle2Icon,
+  CheckCircleIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  ColumnsIcon,
+  GripVerticalIcon,
+  LoaderIcon,
+  MoreVerticalIcon,
+  PlusIcon,
+  TrendingUpIcon,
+} from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { useIsMobile } from "@/registry/new-york/hooks/use-mobile"
+import { Badge } from "@/registry/new-york/ui/badge"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/new-york/ui/sheet"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/ui/table"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york/ui/tabs"
+
+export const schema = z.object({
+  id: z.number(),
+  header: z.string(),
+  type: z.string(),
+  status: z.string(),
+  target: z.string(),
+  limit: z.string(),
+  reviewer: z.string(),
+})
+
+// Create a separate component for the drag handle
+function DragHandle({ id }: { id: number }) {
+  const { attributes, listeners } = useSortable({
+    id,
+  })
+
+  return (
+    <Button
+      {...attributes}
+      {...listeners}
+      variant="ghost"
+      size="icon"
+      className="size-7 text-muted-foreground hover:bg-transparent"
+    >
+      <GripVerticalIcon className="size-3 text-muted-foreground" />
+      <span className="sr-only">Drag to reorder</span>
+    </Button>
+  )
+}
+
+const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: "drag",
+    header: () => null,
+    cell: ({ row }) => <DragHandle id={row.original.id} />,
+  },
+  {
+    id: "select",
+    header: ({ table }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "header",
+    header: "Header",
+    cell: ({ row }) => {
+      return <TableCellViewer item={row.original} />
+    },
+    enableHiding: false,
+  },
+  {
+    accessorKey: "type",
+    header: "Section Type",
+    cell: ({ row }) => (
+      <div className="w-32">
+        <Badge variant="outline" className="px-1.5 text-muted-foreground">
+          {row.original.type}
+        </Badge>
+      </div>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <Badge
+        variant="outline"
+        className="flex gap-1 px-1.5 text-muted-foreground [&_svg]:size-3"
+      >
+        {row.original.status === "Done" ? (
+          <CheckCircle2Icon className="text-green-500 dark:text-green-400" />
+        ) : (
+          <LoaderIcon />
+        )}
+        {row.original.status}
+      </Badge>
+    ),
+  },
+  {
+    accessorKey: "target",
+    header: () => <div className="w-full text-right">Target</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: "Done",
+            error: "Error",
+          })
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-target`} className="sr-only">
+          Target
+        </Label>
+        <Input
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background"
+          defaultValue={row.original.target}
+          id={`${row.original.id}-target`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: "limit",
+    header: () => <div className="w-full text-right">Limit</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: "Done",
+            error: "Error",
+          })
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-limit`} className="sr-only">
+          Limit
+        </Label>
+        <Input
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background"
+          defaultValue={row.original.limit}
+          id={`${row.original.id}-limit`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: "reviewer",
+    header: "Reviewer",
+    cell: ({ row }) => {
+      const isAssigned = row.original.reviewer !== "Assign reviewer"
+
+      if (isAssigned) {
+        return row.original.reviewer
+      }
+
+      return (
+        <>
+          <Label htmlFor={`${row.original.id}-reviewer`} className="sr-only">
+            Reviewer
+          </Label>
+          <Select>
+            <SelectTrigger
+              className="h-8 w-40"
+              id={`${row.original.id}-reviewer`}
+            >
+              <SelectValue placeholder="Assign reviewer" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+              <SelectItem value="Jamik Tashpulatov">
+                Jamik Tashpulatov
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </>
+      )
+    },
+  },
+  {
+    id: "actions",
+    cell: () => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
+            size="icon"
+          >
+            <MoreVerticalIcon />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-32">
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+          <DropdownMenuItem>Make a copy</DropdownMenuItem>
+          <DropdownMenuItem>Favorite</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+  },
+]
+
+function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id: row.original.id,
+  })
+
+  return (
+    <TableRow
+      data-state={row.getIsSelected() && "selected"}
+      data-dragging={isDragging}
+      ref={setNodeRef}
+      className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition: transition,
+      }}
+    >
+      {row.getVisibleCells().map((cell) => (
+        <TableCell key={cell.id}>
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}
+
+export function DataTable({
+  data: initialData,
+}: {
+  data: z.infer<typeof schema>[]
+}) {
+  const [data, setData] = React.useState(() => initialData)
+  const [rowSelection, setRowSelection] = React.useState({})
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+  const sortableId = React.useId()
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  const dataIds = React.useMemo<UniqueIdentifier[]>(
+    () => data?.map(({ id }) => id) || [],
+    [data]
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination,
+    },
+    getRowId: (row) => row.id.toString(),
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  })
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (active && over && active.id !== over.id) {
+      setData((data) => {
+        const oldIndex = dataIds.indexOf(active.id)
+        const newIndex = dataIds.indexOf(over.id)
+        return arrayMove(data, oldIndex, newIndex)
+      })
+    }
+  }
+
+  return (
+    <Tabs
+      defaultValue="outline"
+      className="flex w-full flex-col justify-start gap-6"
+    >
+      <div className="flex items-center justify-between px-4 lg:px-6">
+        <Label htmlFor="view-selector" className="sr-only">
+          View
+        </Label>
+        <Select defaultValue="outline">
+          <SelectTrigger
+            className="@4xl/main:hidden flex w-fit"
+            id="view-selector"
+          >
+            <SelectValue placeholder="Select a view" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="outline">Outline</SelectItem>
+            <SelectItem value="past-performance">Past Performance</SelectItem>
+            <SelectItem value="key-personnel">Key Personnel</SelectItem>
+            <SelectItem value="focus-documents">Focus Documents</SelectItem>
+          </SelectContent>
+        </Select>
+        <TabsList className="@4xl/main:flex hidden">
+          <TabsTrigger value="outline">Outline</TabsTrigger>
+          <TabsTrigger value="past-performance" className="gap-1">
+            Past Performance{" "}
+            <Badge
+              variant="secondary"
+              className="flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30"
+            >
+              3
+            </Badge>
+          </TabsTrigger>
+          <TabsTrigger value="key-personnel" className="gap-1">
+            Key Personnel{" "}
+            <Badge
+              variant="secondary"
+              className="flex h-5 w-5 items-center justify-center rounded-full bg-muted-foreground/30"
+            >
+              2
+            </Badge>
+          </TabsTrigger>
+          <TabsTrigger value="focus-documents">Focus Documents</TabsTrigger>
+        </TabsList>
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm">
+                <ColumnsIcon />
+                <span className="hidden lg:inline">Customize Columns</span>
+                <span className="lg:hidden">Columns</span>
+                <ChevronDownIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              {table
+                .getAllColumns()
+                .filter(
+                  (column) =>
+                    typeof column.accessorFn !== "undefined" &&
+                    column.getCanHide()
+                )
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) =>
+                        column.toggleVisibility(!!value)
+                      }
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Button variant="outline" size="sm">
+            <PlusIcon />
+            <span className="hidden lg:inline">Add Section</span>
+          </Button>
+        </div>
+      </div>
+      <TabsContent
+        value="outline"
+        className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
+      >
+        <div className="overflow-hidden rounded-lg border">
+          <DndContext
+            collisionDetection={closestCenter}
+            modifiers={[restrictToVerticalAxis]}
+            onDragEnd={handleDragEnd}
+            sensors={sensors}
+            id={sortableId}
+          >
+            <Table>
+              <TableHeader className="sticky top-0 z-10 bg-muted">
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} colSpan={header.colSpan}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      )
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody className="**:data-[slot=table-cell]:first:w-8">
+                {table.getRowModel().rows?.length ? (
+                  <SortableContext
+                    items={dataIds}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {table.getRowModel().rows.map((row) => (
+                      <DraggableRow key={row.id} row={row} />
+                    ))}
+                  </SortableContext>
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      No results.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </DndContext>
+        </div>
+        <div className="flex items-center justify-between px-4">
+          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+          <div className="flex w-full items-center gap-8 lg:w-fit">
+            <div className="hidden items-center gap-2 lg:flex">
+              <Label htmlFor="rows-per-page" className="text-sm font-medium">
+                Rows per page
+              </Label>
+              <Select
+                value={`${table.getState().pagination.pageSize}`}
+                onValueChange={(value) => {
+                  table.setPageSize(Number(value))
+                }}
+              >
+                <SelectTrigger className="w-20" id="rows-per-page">
+                  <SelectValue
+                    placeholder={table.getState().pagination.pageSize}
+                  />
+                </SelectTrigger>
+                <SelectContent side="top">
+                  {[10, 20, 30, 40, 50].map((pageSize) => (
+                    <SelectItem key={pageSize} value={`${pageSize}`}>
+                      {pageSize}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex w-fit items-center justify-center text-sm font-medium">
+              Page {table.getState().pagination.pageIndex + 1} of{" "}
+              {table.getPageCount()}
+            </div>
+            <div className="ml-auto flex items-center gap-2 lg:ml-0">
+              <Button
+                variant="outline"
+                className="hidden h-8 w-8 p-0 lg:flex"
+                onClick={() => table.setPageIndex(0)}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to first page</span>
+                <ChevronsLeftIcon />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8"
+                size="icon"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to previous page</span>
+                <ChevronLeftIcon />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8"
+                size="icon"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to next page</span>
+                <ChevronRightIcon />
+              </Button>
+              <Button
+                variant="outline"
+                className="hidden size-8 lg:flex"
+                size="icon"
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to last page</span>
+                <ChevronsRightIcon />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </TabsContent>
+      <TabsContent
+        value="past-performance"
+        className="flex flex-col px-4 lg:px-6"
+      >
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+      <TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+      <TabsContent
+        value="focus-documents"
+        className="flex flex-col px-4 lg:px-6"
+      >
+        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+      </TabsContent>
+    </Tabs>
+  )
+}
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--primary)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig
+
+function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
+  const isMobile = useIsMobile()
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="link" className="w-fit px-0 text-left text-foreground">
+          {item.header}
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="flex flex-col">
+        <SheetHeader className="gap-1">
+          <SheetTitle>{item.header}</SheetTitle>
+          <SheetDescription>
+            Showing total visitors for the last 6 months
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex flex-1 flex-col gap-4 overflow-y-auto py-4 text-sm">
+          {!isMobile && (
+            <>
+              <ChartContainer config={chartConfig}>
+                <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                    left: 0,
+                    right: 10,
+                  }}
+                >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                    dataKey="month"
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                    tickFormatter={(value) => value.slice(0, 3)}
+                    hide
+                  />
+                  <ChartTooltip
+                    cursor={false}
+                    content={<ChartTooltipContent indicator="dot" />}
+                  />
+                  <Area
+                    dataKey="mobile"
+                    type="natural"
+                    fill="var(--color-mobile)"
+                    fillOpacity={0.6}
+                    stroke="var(--color-mobile)"
+                    stackId="a"
+                  />
+                  <Area
+                    dataKey="desktop"
+                    type="natural"
+                    fill="var(--color-desktop)"
+                    fillOpacity={0.4}
+                    stroke="var(--color-desktop)"
+                    stackId="a"
+                  />
+                </AreaChart>
+              </ChartContainer>
+              <Separator />
+              <div className="grid gap-2">
+                <div className="flex gap-2 font-medium leading-none">
+                  Trending up by 5.2% this month{" "}
+                  <TrendingUpIcon className="size-4" />
+                </div>
+                <div className="text-muted-foreground">
+                  Showing total visitors for the last 6 months. This is just
+                  some random text to test the layout. It spans multiple lines
+                  and should wrap around.
+                </div>
+              </div>
+              <Separator />
+            </>
+          )}
+          <form className="flex flex-col gap-4">
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="header">Header</Label>
+              <Input id="header" defaultValue={item.header} />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="type">Type</Label>
+                <Select defaultValue={item.type}>
+                  <SelectTrigger id="type" className="w-full">
+                    <SelectValue placeholder="Select a type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Table of Contents">
+                      Table of Contents
+                    </SelectItem>
+                    <SelectItem value="Executive Summary">
+                      Executive Summary
+                    </SelectItem>
+                    <SelectItem value="Technical Approach">
+                      Technical Approach
+                    </SelectItem>
+                    <SelectItem value="Design">Design</SelectItem>
+                    <SelectItem value="Capabilities">Capabilities</SelectItem>
+                    <SelectItem value="Focus Documents">
+                      Focus Documents
+                    </SelectItem>
+                    <SelectItem value="Narrative">Narrative</SelectItem>
+                    <SelectItem value="Cover Page">Cover Page</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="status">Status</Label>
+                <Select defaultValue={item.status}>
+                  <SelectTrigger id="status" className="w-full">
+                    <SelectValue placeholder="Select a status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Done">Done</SelectItem>
+                    <SelectItem value="In Progress">In Progress</SelectItem>
+                    <SelectItem value="Not Started">Not Started</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="target">Target</Label>
+                <Input id="target" defaultValue={item.target} />
+              </div>
+              <div className="flex flex-col gap-3">
+                <Label htmlFor="limit">Limit</Label>
+                <Input id="limit" defaultValue={item.limit} />
+              </div>
+            </div>
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="reviewer">Reviewer</Label>
+              <Select defaultValue={item.reviewer}>
+                <SelectTrigger id="reviewer" className="w-full">
+                  <SelectValue placeholder="Select a reviewer" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+                  <SelectItem value="Jamik Tashpulatov">
+                    Jamik Tashpulatov
+                  </SelectItem>
+                  <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </form>
+        </div>
+        <SheetFooter className="mt-auto flex gap-2 sm:flex-col sm:space-x-0">
+          <Button className="w-full">Submit</Button>
+          <SheetClose asChild>
+            <Button variant="outline" className="w-full">
+              Done
+            </Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/dashboard-01/components/nav-documents.tsx b/apps/www/registry/new-york/blocks/dashboard-01/components/nav-documents.tsx
new file mode 100644
index 00000000000..bcfad7ea2fd
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/dashboard-01/components/nav-documents.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import {
+  FolderIcon,
+  MoreHorizontalIcon,
+  ShareIcon,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavDocuments({
+  items,
+}: {
+  items: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Documents</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction
+                  showOnHover
+                  className="rounded-sm data-[state=open]:bg-accent"
+                >
+                  <MoreHorizontalIcon />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-24 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <FolderIcon />
+                  <span>Open</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ShareIcon />
+                  <span>Share</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontalIcon className="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/dashboard-01/components/nav-main.tsx b/apps/www/registry/new-york/blocks/dashboard-01/components/nav-main.tsx
new file mode 100644
index 00000000000..eeaf24184bf
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/dashboard-01/components/nav-main.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import { MailIcon, PlusCircleIcon, type LucideIcon } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupContent className="flex flex-col gap-2">
+        <SidebarMenu>
+          <SidebarMenuItem className="flex items-center gap-2">
+            <SidebarMenuButton
+              tooltip="Quick Create"
+              className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
+            >
+              <PlusCircleIcon />
+              <span>Quick Create</span>
+            </SidebarMenuButton>
+            <Button
+              size="icon"
+              className="h-9 w-9 shrink-0 group-data-[collapsible=icon]:opacity-0"
+              variant="outline"
+            >
+              <MailIcon />
+              <span className="sr-only">Inbox</span>
+            </Button>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton tooltip={item.title}>
+                {item.icon && <item.icon />}
+                <span>{item.title}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/dashboard-01/components/nav-secondary.tsx b/apps/www/registry/new-york/blocks/dashboard-01/components/nav-secondary.tsx
new file mode 100644
index 00000000000..151138c9b9f
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/dashboard-01/components/nav-secondary.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/dashboard-01/components/nav-user.tsx b/apps/www/registry/new-york/blocks/dashboard-01/components/nav-user.tsx
new file mode 100644
index 00000000000..b75da563313
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/dashboard-01/components/nav-user.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import {
+  BellIcon,
+  CreditCardIcon,
+  LogOutIcon,
+  MoreVerticalIcon,
+  UserCircleIcon,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg grayscale">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
+              </div>
+              <MoreVerticalIcon className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <UserCircleIcon />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCardIcon />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <BellIcon />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOutIcon />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/dashboard-01/components/section-cards.tsx b/apps/www/registry/new-york/blocks/dashboard-01/components/section-cards.tsx
new file mode 100644
index 00000000000..e2d5943088f
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/dashboard-01/components/section-cards.tsx
@@ -0,0 +1,101 @@
+import { TrendingDownIcon, TrendingUpIcon } from "lucide-react"
+
+import { Badge } from "@/registry/new-york/ui/badge"
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+
+export function SectionCards() {
+  return (
+    <div className="*:data-[slot=card]:shadow-xs @xl/main:grid-cols-2 @5xl/main:grid-cols-4 grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card lg:px-6">
+      <Card className="@container/card">
+        <CardHeader className="relative">
+          <CardDescription>Total Revenue</CardDescription>
+          <CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
+            $1,250.00
+          </CardTitle>
+          <div className="absolute right-4 top-4">
+            <Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
+              <TrendingUpIcon className="size-3" />
+              +12.5%
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Trending up this month <TrendingUpIcon className="size-4" />
+          </div>
+          <div className="text-muted-foreground">
+            Visitors for the last 6 months
+          </div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader className="relative">
+          <CardDescription>New Customers</CardDescription>
+          <CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
+            1,234
+          </CardTitle>
+          <div className="absolute right-4 top-4">
+            <Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
+              <TrendingDownIcon className="size-3" />
+              -20%
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Down 20% this period <TrendingDownIcon className="size-4" />
+          </div>
+          <div className="text-muted-foreground">
+            Acquisition needs attention
+          </div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader className="relative">
+          <CardDescription>Active Accounts</CardDescription>
+          <CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
+            45,678
+          </CardTitle>
+          <div className="absolute right-4 top-4">
+            <Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
+              <TrendingUpIcon className="size-3" />
+              +12.5%
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Strong user retention <TrendingUpIcon className="size-4" />
+          </div>
+          <div className="text-muted-foreground">Engagement exceed targets</div>
+        </CardFooter>
+      </Card>
+      <Card className="@container/card">
+        <CardHeader className="relative">
+          <CardDescription>Growth Rate</CardDescription>
+          <CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
+            4.5%
+          </CardTitle>
+          <div className="absolute right-4 top-4">
+            <Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
+              <TrendingUpIcon className="size-3" />
+              +4.5%
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardFooter className="flex-col items-start gap-1 text-sm">
+          <div className="line-clamp-1 flex gap-2 font-medium">
+            Steady performance <TrendingUpIcon className="size-4" />
+          </div>
+          <div className="text-muted-foreground">Meets growth projections</div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/dashboard-01/components/site-header.tsx b/apps/www/registry/new-york/blocks/dashboard-01/components/site-header.tsx
new file mode 100644
index 00000000000..83c3755eab7
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/dashboard-01/components/site-header.tsx
@@ -0,0 +1,17 @@
+import { Separator } from "@/registry/new-york/ui/separator"
+import { SidebarTrigger } from "@/registry/new-york/ui/sidebar"
+
+export function SiteHeader() {
+  return (
+    <header className="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <SidebarTrigger className="-ml-1" />
+        <Separator
+          orientation="vertical"
+          className="mx-2 data-[orientation=vertical]:h-4"
+        />
+        <h1 className="text-base font-medium">Documents</h1>
+      </div>
+    </header>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/dashboard-01/data.json b/apps/www/registry/new-york/blocks/dashboard-01/data.json
new file mode 100644
index 00000000000..ec0873641b7
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/dashboard-01/data.json
@@ -0,0 +1,614 @@
+[
+  {
+    "id": 1,
+    "header": "Cover page",
+    "type": "Cover page",
+    "status": "In Process",
+    "target": "18",
+    "limit": "5",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 2,
+    "header": "Table of contents",
+    "type": "Table of contents",
+    "status": "Done",
+    "target": "29",
+    "limit": "24",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 3,
+    "header": "Executive summary",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "10",
+    "limit": "13",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 4,
+    "header": "Technical approach",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "27",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 5,
+    "header": "Design",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "2",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 6,
+    "header": "Capabilities",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "20",
+    "limit": "8",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 7,
+    "header": "Integration with existing systems",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "19",
+    "limit": "21",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 8,
+    "header": "Innovation and Advantages",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "25",
+    "limit": "26",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 9,
+    "header": "Overview of EMR's Innovative Solutions",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "7",
+    "limit": "23",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 10,
+    "header": "Advanced Algorithms and Machine Learning",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "30",
+    "limit": "28",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 11,
+    "header": "Adaptive Communication Protocols",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "9",
+    "limit": "31",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 12,
+    "header": "Advantages Over Current Technologies",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "12",
+    "limit": "0",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 13,
+    "header": "Past Performance",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "33",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 14,
+    "header": "Customer Feedback and Satisfaction Levels",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "34",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 15,
+    "header": "Implementation Challenges and Solutions",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "3",
+    "limit": "35",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 16,
+    "header": "Security Measures and Data Protection Policies",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "6",
+    "limit": "36",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 17,
+    "header": "Scalability and Future Proofing",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "4",
+    "limit": "37",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 18,
+    "header": "Cost-Benefit Analysis",
+    "type": "Plain language",
+    "status": "Done",
+    "target": "14",
+    "limit": "38",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 19,
+    "header": "User Training and Onboarding Experience",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "17",
+    "limit": "39",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 20,
+    "header": "Future Development Roadmap",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "11",
+    "limit": "40",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 21,
+    "header": "System Architecture Overview",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "24",
+    "limit": "18",
+    "reviewer": "Maya Johnson"
+  },
+  {
+    "id": 22,
+    "header": "Risk Management Plan",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "22",
+    "reviewer": "Carlos Rodriguez"
+  },
+  {
+    "id": 23,
+    "header": "Compliance Documentation",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "31",
+    "limit": "27",
+    "reviewer": "Sarah Chen"
+  },
+  {
+    "id": 24,
+    "header": "API Documentation",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "8",
+    "limit": "12",
+    "reviewer": "Raj Patel"
+  },
+  {
+    "id": 25,
+    "header": "User Interface Mockups",
+    "type": "Visual",
+    "status": "In Process",
+    "target": "19",
+    "limit": "25",
+    "reviewer": "Leila Ahmadi"
+  },
+  {
+    "id": 26,
+    "header": "Database Schema",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "22",
+    "limit": "20",
+    "reviewer": "Thomas Wilson"
+  },
+  {
+    "id": 27,
+    "header": "Testing Methodology",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "17",
+    "limit": "14",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 28,
+    "header": "Deployment Strategy",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "26",
+    "limit": "30",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 29,
+    "header": "Budget Breakdown",
+    "type": "Financial",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 30,
+    "header": "Market Analysis",
+    "type": "Research",
+    "status": "Done",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Sophia Martinez"
+  },
+  {
+    "id": 31,
+    "header": "Competitor Comparison",
+    "type": "Research",
+    "status": "In Process",
+    "target": "21",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 32,
+    "header": "Maintenance Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "23",
+    "reviewer": "Alex Thompson"
+  },
+  {
+    "id": 33,
+    "header": "User Personas",
+    "type": "Research",
+    "status": "In Process",
+    "target": "27",
+    "limit": "24",
+    "reviewer": "Nina Patel"
+  },
+  {
+    "id": 34,
+    "header": "Accessibility Compliance",
+    "type": "Legal",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 35,
+    "header": "Performance Metrics",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "David Kim"
+  },
+  {
+    "id": 36,
+    "header": "Disaster Recovery Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 37,
+    "header": "Third-party Integrations",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 38,
+    "header": "User Feedback Summary",
+    "type": "Research",
+    "status": "Done",
+    "target": "20",
+    "limit": "15",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 39,
+    "header": "Localization Strategy",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "12",
+    "limit": "19",
+    "reviewer": "Maria Garcia"
+  },
+  {
+    "id": 40,
+    "header": "Mobile Compatibility",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "James Wilson"
+  },
+  {
+    "id": 41,
+    "header": "Data Migration Plan",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 42,
+    "header": "Quality Assurance Protocols",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Priya Singh"
+  },
+  {
+    "id": 43,
+    "header": "Stakeholder Analysis",
+    "type": "Research",
+    "status": "In Process",
+    "target": "11",
+    "limit": "14",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 44,
+    "header": "Environmental Impact Assessment",
+    "type": "Research",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 45,
+    "header": "Intellectual Property Rights",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "17",
+    "limit": "20",
+    "reviewer": "Sarah Johnson"
+  },
+  {
+    "id": 46,
+    "header": "Customer Support Framework",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 47,
+    "header": "Version Control Strategy",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 48,
+    "header": "Continuous Integration Pipeline",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Michael Chen"
+  },
+  {
+    "id": 49,
+    "header": "Regulatory Compliance",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 50,
+    "header": "User Authentication System",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 51,
+    "header": "Data Analytics Framework",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 52,
+    "header": "Cloud Infrastructure",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 53,
+    "header": "Network Security Measures",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Lisa Wong"
+  },
+  {
+    "id": 54,
+    "header": "Project Timeline",
+    "type": "Planning",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 55,
+    "header": "Resource Allocation",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 56,
+    "header": "Team Structure and Roles",
+    "type": "Planning",
+    "status": "Done",
+    "target": "20",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 57,
+    "header": "Communication Protocols",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 58,
+    "header": "Success Metrics",
+    "type": "Planning",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 59,
+    "header": "Internationalization Support",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 60,
+    "header": "Backup and Recovery Procedures",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 61,
+    "header": "Monitoring and Alerting System",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Daniel Park"
+  },
+  {
+    "id": 62,
+    "header": "Code Review Guidelines",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "12",
+    "limit": "15",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 63,
+    "header": "Documentation Standards",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 64,
+    "header": "Release Management Process",
+    "type": "Planning",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 65,
+    "header": "Feature Prioritization Matrix",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Emma Davis"
+  },
+  {
+    "id": 66,
+    "header": "Technical Debt Assessment",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 67,
+    "header": "Capacity Planning",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 68,
+    "header": "Service Level Agreements",
+    "type": "Legal",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Assign reviewer"
+  }
+]
diff --git a/apps/www/registry/new-york/blocks/dashboard-01/page.tsx b/apps/www/registry/new-york/blocks/dashboard-01/page.tsx
new file mode 100644
index 00000000000..e5602a4af14
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/dashboard-01/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "@/registry/new-york/blocks/dashboard-01/components/app-sidebar"
+import { ChartAreaInteractive } from "@/registry/new-york/blocks/dashboard-01/components/chart-area-interactive"
+import { DataTable } from "@/registry/new-york/blocks/dashboard-01/components/data-table"
+import { SectionCards } from "@/registry/new-york/blocks/dashboard-01/components/section-cards"
+import { SiteHeader } from "@/registry/new-york/blocks/dashboard-01/components/site-header"
+import { SidebarInset, SidebarProvider } from "@/registry/new-york/ui/sidebar"
+
+import data from "./data.json"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+              <SectionCards />
+              <div className="px-4 lg:px-6">
+                <ChartAreaInteractive />
+              </div>
+              <DataTable data={data} />
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/login-01/components/login-form.tsx b/apps/www/registry/new-york/blocks/login-01/components/login-form.tsx
new file mode 100644
index 00000000000..31049d8e312
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-01/components/login-form.tsx
@@ -0,0 +1,68 @@
+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>
+          <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>
+            <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>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/login-01/page.tsx b/apps/www/registry/new-york/blocks/login-01/page.tsx
new file mode 100644
index 00000000000..20fe9846ce2
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-01/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/blocks/login-01/components/login-form"
+
+export default function Page() {
+  return (
+    <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>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/login-02/components/login-form.tsx b/apps/www/registry/new-york/blocks/login-02/components/login-form.tsx
new file mode 100644
index 00000000000..c59053c6bc5
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/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>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/login-02/page.tsx b/apps/www/registry/new-york/blocks/login-02/page.tsx
new file mode 100644
index 00000000000..7353a4d4fa1
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-02/page.tsx
@@ -0,0 +1,32 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/blocks/login-02/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/login-03/components/login-form.tsx b/apps/www/registry/new-york/blocks/login-03/components/login-form.tsx
new file mode 100644
index 00000000000..7e455256676
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/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>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/login-03/page.tsx b/apps/www/registry/new-york/blocks/login-03/page.tsx
new file mode 100644
index 00000000000..a4ced5031b3
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-03/page.tsx
@@ -0,0 +1,19 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/blocks/login-03/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/login-04/components/login-form.tsx b/apps/www/registry/new-york/blocks/login-04/components/login-form.tsx
new file mode 100644
index 00000000000..b8dc648b4a3
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/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>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/login-04/page.tsx b/apps/www/registry/new-york/blocks/login-04/page.tsx
new file mode 100644
index 00000000000..e2188012ae6
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-04/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/blocks/login-04/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/login-05/components/login-form.tsx b/apps/www/registry/new-york/blocks/login-05/components/login-form.tsx
new file mode 100644
index 00000000000..6abebecb060
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/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>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/login-05/page.tsx b/apps/www/registry/new-york/blocks/login-05/page.tsx
new file mode 100644
index 00000000000..3d03c04805d
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-05/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/blocks/login-05/components/login-form"
+
+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>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-01/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-01/components/app-sidebar.tsx
new file mode 100644
index 00000000000..da441b28602
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-01/components/app-sidebar.tsx
@@ -0,0 +1,182 @@
+import * as React from "react"
+
+import { SearchForm } from "@/registry/new-york/blocks/sidebar-01/components/search-form"
+import { VersionSwitcher } from "@/registry/new-york/blocks/sidebar-01/components/version-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <VersionSwitcher
+          versions={data.versions}
+          defaultVersion={data.versions[0]}
+        />
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent>
+        {/* We create a SidebarGroup for each parent. */}
+        {data.navMain.map((item) => (
+          <SidebarGroup key={item.title}>
+            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {item.items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild isActive={item.isActive}>
+                      <a href={item.url}>{item.title}</a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-01/components/search-form.tsx b/apps/www/registry/new-york/blocks/sidebar-01/components/search-form.tsx
new file mode 100644
index 00000000000..d89c7a3a842
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-01/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from "@/registry/new-york/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <SidebarInput
+            id="search"
+            placeholder="Search the docs..."
+            className="pl-8"
+          />
+          <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-01/components/version-switcher.tsx b/apps/www/registry/new-york/blocks/sidebar-01/components/version-switcher.tsx
new file mode 100644
index 00000000000..7e523109200
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-01/components/version-switcher.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function VersionSwitcher({
+  versions,
+  defaultVersion,
+}: {
+  versions: string[]
+  defaultVersion: string
+}) {
+  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd className="size-4" />
+              </div>
+              <div className="flex flex-col gap-0.5 leading-none">
+                <span className="font-semibold">Documentation</span>
+                <span className="">v{selectedVersion}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width]"
+            align="start"
+          >
+            {versions.map((version) => (
+              <DropdownMenuItem
+                key={version}
+                onSelect={() => setSelectedVersion(version)}
+              >
+                v{version}{" "}
+                {version === selectedVersion && <Check className="ml-auto" />}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-01/page.tsx b/apps/www/registry/new-york/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000000..a13e7b06fe3
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-01/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-01/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-02/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-02/components/app-sidebar.tsx
new file mode 100644
index 00000000000..c94c59a7510
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-02/components/app-sidebar.tsx
@@ -0,0 +1,215 @@
+import * as React from "react"
+import { ChevronRight } from "lucide-react"
+
+import { SearchForm } from "@/registry/new-york/blocks/sidebar-02/components/search-form"
+import { VersionSwitcher } from "@/registry/new-york/blocks/sidebar-02/components/version-switcher"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <VersionSwitcher
+          versions={data.versions}
+          defaultVersion={data.versions[0]}
+        />
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="gap-0">
+        {/* We create a collapsible SidebarGroup for each parent. */}
+        {data.navMain.map((item) => (
+          <Collapsible
+            key={item.title}
+            title={item.title}
+            defaultOpen
+            className="group/collapsible"
+          >
+            <SidebarGroup>
+              <SidebarGroupLabel
+                asChild
+                className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {item.title}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {item.items.map((item) => (
+                      <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton asChild isActive={item.isActive}>
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        ))}
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-02/components/search-form.tsx b/apps/www/registry/new-york/blocks/sidebar-02/components/search-form.tsx
new file mode 100644
index 00000000000..d89c7a3a842
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-02/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from "@/registry/new-york/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <SidebarInput
+            id="search"
+            placeholder="Search the docs..."
+            className="pl-8"
+          />
+          <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-02/components/version-switcher.tsx b/apps/www/registry/new-york/blocks/sidebar-02/components/version-switcher.tsx
new file mode 100644
index 00000000000..7e523109200
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-02/components/version-switcher.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function VersionSwitcher({
+  versions,
+  defaultVersion,
+}: {
+  versions: string[]
+  defaultVersion: string
+}) {
+  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd className="size-4" />
+              </div>
+              <div className="flex flex-col gap-0.5 leading-none">
+                <span className="font-semibold">Documentation</span>
+                <span className="">v{selectedVersion}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width]"
+            align="start"
+          >
+            {versions.map((version) => (
+              <DropdownMenuItem
+                key={version}
+                onSelect={() => setSelectedVersion(version)}
+              >
+                v{version}{" "}
+                {version === selectedVersion && <Check className="ml-auto" />}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-02/page.tsx b/apps/www/registry/new-york/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000000..140cf70f884
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-02/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-02/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-03/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-03/components/app-sidebar.tsx
new file mode 100644
index 00000000000..804f7682157
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-03/components/app-sidebar.tsx
@@ -0,0 +1,208 @@
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu>
+            {data.navMain.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild>
+                  <a href={item.url} className="font-medium">
+                    {item.title}
+                  </a>
+                </SidebarMenuButton>
+                {item.items?.length ? (
+                  <SidebarMenuSub>
+                    {item.items.map((item) => (
+                      <SidebarMenuSubItem key={item.title}>
+                        <SidebarMenuSubButton asChild isActive={item.isActive}>
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                ) : null}
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-03/page.tsx b/apps/www/registry/new-york/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000000..768d4775bb1
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-03/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-03/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+          <div className="flex items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-04/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-04/components/app-sidebar.tsx
new file mode 100644
index 00000000000..f2dc8498b6d
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-04/components/app-sidebar.tsx
@@ -0,0 +1,206 @@
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar variant="floating" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu className="gap-2">
+            {data.navMain.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild>
+                  <a href={item.url} className="font-medium">
+                    {item.title}
+                  </a>
+                </SidebarMenuButton>
+                {item.items?.length ? (
+                  <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
+                    {item.items.map((item) => (
+                      <SidebarMenuSubItem key={item.title}>
+                        <SidebarMenuSubButton asChild isActive={item.isActive}>
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                ) : null}
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-04/page.tsx b/apps/www/registry/new-york/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000000..fd5d6c8f00d
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-04/page.tsx
@@ -0,0 +1,56 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-04/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "19rem",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-05/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-05/components/app-sidebar.tsx
new file mode 100644
index 00000000000..1485b8f93b6
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-05/components/app-sidebar.tsx
@@ -0,0 +1,228 @@
+import * as React from "react"
+import { GalleryVerticalEnd, Minus, Plus } from "lucide-react"
+
+import { SearchForm } from "@/registry/new-york/blocks/sidebar-05/components/search-form"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu>
+            {data.navMain.map((item, index) => (
+              <Collapsible
+                key={item.title}
+                defaultOpen={index === 1}
+                className="group/collapsible"
+              >
+                <SidebarMenuItem>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuButton>
+                      {item.title}{" "}
+                      <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                      <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  {item.items?.length ? (
+                    <CollapsibleContent>
+                      <SidebarMenuSub>
+                        {item.items.map((item) => (
+                          <SidebarMenuSubItem key={item.title}>
+                            <SidebarMenuSubButton
+                              asChild
+                              isActive={item.isActive}
+                            >
+                              <a href={item.url}>{item.title}</a>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        ))}
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  ) : null}
+                </SidebarMenuItem>
+              </Collapsible>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-05/components/search-form.tsx b/apps/www/registry/new-york/blocks/sidebar-05/components/search-form.tsx
new file mode 100644
index 00000000000..d89c7a3a842
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-05/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from "@/registry/new-york/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <SidebarInput
+            id="search"
+            placeholder="Search the docs..."
+            className="pl-8"
+          />
+          <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-05/page.tsx b/apps/www/registry/new-york/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000000..9d630900db1
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-05/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-05/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-06/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-06/components/app-sidebar.tsx
new file mode 100644
index 00000000000..d25459dbd14
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-06/components/app-sidebar.tsx
@@ -0,0 +1,179 @@
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { NavMain } from "@/registry/new-york/blocks/sidebar-06/components/nav-main"
+import { SidebarOptInForm } from "@/registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <GalleryVerticalEnd className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">Documentation</span>
+                  <span className="">v1.0.0</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+      </SidebarContent>
+      <SidebarFooter>
+        <div className="p-1">
+          <SidebarOptInForm />
+        </div>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-06/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-06/components/nav-main.tsx
new file mode 100644
index 00000000000..92031be909c
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-06/components/nav-main.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { MoreHorizontal, type LucideIcon } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup>
+      <SidebarMenu>
+        {items.map((item) => (
+          <DropdownMenu key={item.title}>
+            <SidebarMenuItem>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  {item.title} <MoreHorizontal className="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              {item.items?.length ? (
+                <DropdownMenuContent
+                  side={isMobile ? "bottom" : "right"}
+                  align={isMobile ? "end" : "start"}
+                  className="min-w-56 rounded-lg"
+                >
+                  {item.items.map((item) => (
+                    <DropdownMenuItem asChild key={item.title}>
+                      <a href={item.url}>{item.title}</a>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              ) : null}
+            </SidebarMenuItem>
+          </DropdownMenu>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/www/registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
new file mode 100644
index 00000000000..a9fbaed9c07
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { SidebarInput } from "@/registry/new-york/ui/sidebar"
+
+export function SidebarOptInForm() {
+  return (
+    <Card className="shadow-none">
+      <form>
+        <CardHeader className="p-4 pb-0">
+          <CardTitle className="text-sm">Subscribe to our newsletter</CardTitle>
+          <CardDescription>
+            Opt-in to receive updates and news about the sidebar.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-2.5 p-4">
+          <SidebarInput type="email" placeholder="Email" />
+          <Button
+            className="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none"
+            size="sm"
+          >
+            Subscribe
+          </Button>
+        </CardContent>
+      </form>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-06/page.tsx b/apps/www/registry/new-york/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000000..ac30ac9fe1c
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-06/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-06/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-07/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-07/components/app-sidebar.tsx
new file mode 100644
index 00000000000..22a0d991185
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-07/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  GalleryVerticalEnd,
+  Map,
+  PieChart,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { NavMain } from "@/registry/new-york/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "@/registry/new-york/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "@/registry/new-york/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "@/registry/new-york/blocks/sidebar-07/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: GalleryVerticalEnd,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-07/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-07/components/nav-main.tsx
new file mode 100644
index 00000000000..cb11e74d085
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-07/components/nav-main.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible
+            key={item.title}
+            asChild
+            defaultOpen={item.isActive}
+            className="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton tooltip={item.title}>
+                  {item.icon && <item.icon />}
+                  <span>{item.title}</span>
+                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  {item.items?.map((subItem) => (
+                    <SidebarMenuSubItem key={subItem.title}>
+                      <SidebarMenuSubButton asChild>
+                        <a href={subItem.url}>
+                          <span>{subItem.title}</span>
+                        </a>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-07/components/nav-projects.tsx b/apps/www/registry/new-york/blocks/sidebar-07/components/nav-projects.tsx
new file mode 100644
index 00000000000..052042ea959
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-07/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  Forward,
+  MoreHorizontal,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Forward className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal className="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-07/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-07/components/nav-user.tsx
new file mode 100644
index 00000000000..a12cf07ff8f
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-07/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-07/components/team-switcher.tsx b/apps/www/registry/new-york/blocks/sidebar-07/components/team-switcher.tsx
new file mode 100644
index 00000000000..a64108e7f5e
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-07/components/team-switcher.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">
+                  {activeTeam.name}
+                </span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-07/page.tsx b/apps/www/registry/new-york/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000000..8f9ab72554b
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-07/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-07/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-08/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-08/components/app-sidebar.tsx
new file mode 100644
index 00000000000..688a0da8c86
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-08/components/app-sidebar.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import {
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  LifeBuoy,
+  Map,
+  PieChart,
+  Send,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { NavMain } from "@/registry/new-york/blocks/sidebar-08/components/nav-main"
+import { NavProjects } from "@/registry/new-york/blocks/sidebar-08/components/nav-projects"
+import { NavSecondary } from "@/registry/new-york/blocks/sidebar-08/components/nav-secondary"
+import { NavUser } from "@/registry/new-york/blocks/sidebar-08/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar variant="inset" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <Command className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">Acme Inc</span>
+                  <span className="truncate text-xs">Enterprise</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-08/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-main.tsx
new file mode 100644
index 00000000000..34737f61628
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-main.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild tooltip={item.title}>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.items?.length ? (
+                <>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuAction className="data-[state=open]:rotate-90">
+                      <ChevronRight />
+                      <span className="sr-only">Toggle</span>
+                    </SidebarMenuAction>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.items?.map((subItem) => (
+                        <SidebarMenuSubItem key={subItem.title}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </>
+              ) : null}
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-08/components/nav-projects.tsx b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-projects.tsx
new file mode 100644
index 00000000000..3cd543cbbf0
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  MoreHorizontal,
+  Share,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Share className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-08/components/nav-secondary.tsx b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-secondary.tsx
new file mode 100644
index 00000000000..a7d5a4f405a
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-secondary.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild size="sm">
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-08/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-user.tsx
new file mode 100644
index 00000000000..a12cf07ff8f
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-08/page.tsx b/apps/www/registry/new-york/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000000..6df3df5d465
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-08/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-08/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-09/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-09/components/app-sidebar.tsx
new file mode 100644
index 00000000000..6569cabbbba
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-09/components/app-sidebar.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { ArchiveX, Command, File, Inbox, Send, Trash2 } from "lucide-react"
+
+import { NavUser } from "@/registry/new-york/blocks/sidebar-09/components/nav-user"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+import { Switch } from "@/registry/new-york/ui/switch"
+
+// This is sample data
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      isActive: true,
+    },
+    {
+      title: "Drafts",
+      url: "#",
+      icon: File,
+      isActive: false,
+    },
+    {
+      title: "Sent",
+      url: "#",
+      icon: Send,
+      isActive: false,
+    },
+    {
+      title: "Junk",
+      url: "#",
+      icon: ArchiveX,
+      isActive: false,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+      isActive: false,
+    },
+  ],
+  mails: [
+    {
+      name: "William Smith",
+      email: "williamsmith@example.com",
+      subject: "Meeting Tomorrow",
+      date: "09:34 AM",
+      teaser:
+        "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.",
+    },
+    {
+      name: "Alice Smith",
+      email: "alicesmith@example.com",
+      subject: "Re: Project Update",
+      date: "Yesterday",
+      teaser:
+        "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.",
+    },
+    {
+      name: "Bob Johnson",
+      email: "bobjohnson@example.com",
+      subject: "Weekend Plans",
+      date: "2 days ago",
+      teaser:
+        "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?",
+    },
+    {
+      name: "Emily Davis",
+      email: "emilydavis@example.com",
+      subject: "Re: Question about Budget",
+      date: "2 days ago",
+      teaser:
+        "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?",
+    },
+    {
+      name: "Michael Wilson",
+      email: "michaelwilson@example.com",
+      subject: "Important Announcement",
+      date: "1 week ago",
+      teaser:
+        "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.",
+    },
+    {
+      name: "Sarah Brown",
+      email: "sarahbrown@example.com",
+      subject: "Re: Feedback on Proposal",
+      date: "1 week ago",
+      teaser:
+        "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?",
+    },
+    {
+      name: "David Lee",
+      email: "davidlee@example.com",
+      subject: "New Project Idea",
+      date: "1 week ago",
+      teaser:
+        "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?",
+    },
+    {
+      name: "Olivia Wilson",
+      email: "oliviawilson@example.com",
+      subject: "Vacation Plans",
+      date: "1 week ago",
+      teaser:
+        "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.",
+    },
+    {
+      name: "James Martin",
+      email: "jamesmartin@example.com",
+      subject: "Re: Conference Registration",
+      date: "1 week ago",
+      teaser:
+        "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.",
+    },
+    {
+      name: "Sophia White",
+      email: "sophiawhite@example.com",
+      subject: "Team Dinner",
+      date: "1 week ago",
+      teaser:
+        "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.",
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  // Note: I'm using state to show active item.
+  // IRL you should use the url/router.
+  const [activeItem, setActiveItem] = React.useState(data.navMain[0])
+  const [mails, setMails] = React.useState(data.mails)
+  const { setOpen } = useSidebar()
+
+  return (
+    <Sidebar
+      collapsible="icon"
+      className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
+      {...props}
+    >
+      {/* This is the first sidebar */}
+      {/* We disable collapsible and adjust width to icon. */}
+      {/* This will make the sidebar appear as icons. */}
+      <Sidebar
+        collapsible="none"
+        className="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
+      >
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <Command className="size-4" />
+                  </div>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">Acme Inc</span>
+                    <span className="truncate text-xs">Enterprise</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent className="px-1.5 md:px-0">
+              <SidebarMenu>
+                {data.navMain.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton
+                      tooltip={{
+                        children: item.title,
+                        hidden: false,
+                      }}
+                      onClick={() => {
+                        setActiveItem(item)
+                        const mail = data.mails.sort(() => Math.random() - 0.5)
+                        setMails(
+                          mail.slice(
+                            0,
+                            Math.max(5, Math.floor(Math.random() * 10) + 1)
+                          )
+                        )
+                        setOpen(true)
+                      }}
+                      isActive={activeItem?.title === item.title}
+                      className="px-2.5 md:px-2"
+                    >
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <NavUser user={data.user} />
+        </SidebarFooter>
+      </Sidebar>
+
+      {/* This is the second sidebar */}
+      {/* We disable collapsible and let it fill remaining space */}
+      <Sidebar collapsible="none" className="hidden flex-1 md:flex">
+        <SidebarHeader className="gap-3.5 border-b p-4">
+          <div className="flex w-full items-center justify-between">
+            <div className="text-base font-medium text-foreground">
+              {activeItem?.title}
+            </div>
+            <Label className="flex items-center gap-2 text-sm">
+              <span>Unreads</span>
+              <Switch className="shadow-none" />
+            </Label>
+          </div>
+          <SidebarInput placeholder="Type to search..." />
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup className="px-0">
+            <SidebarGroupContent>
+              {mails.map((mail) => (
+                <a
+                  href="#"
+                  key={mail.email}
+                  className="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                >
+                  <div className="flex w-full items-center gap-2">
+                    <span>{mail.name}</span>{" "}
+                    <span className="ml-auto text-xs">{mail.date}</span>
+                  </div>
+                  <span className="font-medium">{mail.subject}</span>
+                  <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
+                    {mail.teaser}
+                  </span>
+                </a>
+              ))}
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-09/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-09/components/nav-user.tsx
new file mode 100644
index 00000000000..52e540522f7
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-09/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-09/page.tsx b/apps/www/registry/new-york/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000000..8c5b59468d8
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-09/page.tsx
@@ -0,0 +1,54 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-09/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "350px",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Inbox</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-10/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/app-sidebar.tsx
new file mode 100644
index 00000000000..fd86edfa9a1
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-10/components/app-sidebar.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  Blocks,
+  Calendar,
+  Command,
+  Home,
+  Inbox,
+  MessageCircleQuestion,
+  Search,
+  Settings2,
+  Sparkles,
+  Trash2,
+} from "lucide-react"
+
+import { NavFavorites } from "@/registry/new-york/blocks/sidebar-10/components/nav-favorites"
+import { NavMain } from "@/registry/new-york/blocks/sidebar-10/components/nav-main"
+import { NavSecondary } from "@/registry/new-york/blocks/sidebar-10/components/nav-secondary"
+import { NavWorkspaces } from "@/registry/new-york/blocks/sidebar-10/components/nav-workspaces"
+import { TeamSwitcher } from "@/registry/new-york/blocks/sidebar-10/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: Command,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Search",
+      url: "#",
+      icon: Search,
+    },
+    {
+      title: "Ask AI",
+      url: "#",
+      icon: Sparkles,
+    },
+    {
+      title: "Home",
+      url: "#",
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      badge: "10",
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Calendar",
+      url: "#",
+      icon: Calendar,
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+    },
+    {
+      title: "Templates",
+      url: "#",
+      icon: Blocks,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+    },
+    {
+      title: "Help",
+      url: "#",
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: "Project Management & Task Tracking",
+      url: "#",
+      emoji: "📊",
+    },
+    {
+      name: "Family Recipe Collection & Meal Planning",
+      url: "#",
+      emoji: "🍳",
+    },
+    {
+      name: "Fitness Tracker & Workout Routines",
+      url: "#",
+      emoji: "💪",
+    },
+    {
+      name: "Book Notes & Reading List",
+      url: "#",
+      emoji: "📚",
+    },
+    {
+      name: "Sustainable Gardening Tips & Plant Care",
+      url: "#",
+      emoji: "🌱",
+    },
+    {
+      name: "Language Learning Progress & Resources",
+      url: "#",
+      emoji: "🗣️",
+    },
+    {
+      name: "Home Renovation Ideas & Budget Tracker",
+      url: "#",
+      emoji: "🏠",
+    },
+    {
+      name: "Personal Finance & Investment Portfolio",
+      url: "#",
+      emoji: "💰",
+    },
+    {
+      name: "Movie & TV Show Watchlist with Reviews",
+      url: "#",
+      emoji: "🎬",
+    },
+    {
+      name: "Daily Habit Tracker & Goal Setting",
+      url: "#",
+      emoji: "✅",
+    },
+  ],
+  workspaces: [
+    {
+      name: "Personal Life Management",
+      emoji: "🏠",
+      pages: [
+        {
+          name: "Daily Journal & Reflection",
+          url: "#",
+          emoji: "📔",
+        },
+        {
+          name: "Health & Wellness Tracker",
+          url: "#",
+          emoji: "🍏",
+        },
+        {
+          name: "Personal Growth & Learning Goals",
+          url: "#",
+          emoji: "🌟",
+        },
+      ],
+    },
+    {
+      name: "Professional Development",
+      emoji: "💼",
+      pages: [
+        {
+          name: "Career Objectives & Milestones",
+          url: "#",
+          emoji: "🎯",
+        },
+        {
+          name: "Skill Acquisition & Training Log",
+          url: "#",
+          emoji: "🧠",
+        },
+        {
+          name: "Networking Contacts & Events",
+          url: "#",
+          emoji: "🤝",
+        },
+      ],
+    },
+    {
+      name: "Creative Projects",
+      emoji: "🎨",
+      pages: [
+        {
+          name: "Writing Ideas & Story Outlines",
+          url: "#",
+          emoji: "✍️",
+        },
+        {
+          name: "Art & Design Portfolio",
+          url: "#",
+          emoji: "🖼️",
+        },
+        {
+          name: "Music Composition & Practice Log",
+          url: "#",
+          emoji: "🎵",
+        },
+      ],
+    },
+    {
+      name: "Home Management",
+      emoji: "🏡",
+      pages: [
+        {
+          name: "Household Budget & Expense Tracking",
+          url: "#",
+          emoji: "💰",
+        },
+        {
+          name: "Home Maintenance Schedule & Tasks",
+          url: "#",
+          emoji: "🔧",
+        },
+        {
+          name: "Family Calendar & Event Planning",
+          url: "#",
+          emoji: "📅",
+        },
+      ],
+    },
+    {
+      name: "Travel & Adventure",
+      emoji: "🧳",
+      pages: [
+        {
+          name: "Trip Planning & Itineraries",
+          url: "#",
+          emoji: "🗺️",
+        },
+        {
+          name: "Travel Bucket List & Inspiration",
+          url: "#",
+          emoji: "🌎",
+        },
+        {
+          name: "Travel Journal & Photo Gallery",
+          url: "#",
+          emoji: "📸",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar className="border-r-0" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+        <NavMain items={data.navMain} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavFavorites favorites={data.favorites} />
+        <NavWorkspaces workspaces={data.workspaces} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-10/components/nav-actions.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-actions.tsx
new file mode 100644
index 00000000000..6234aa22551
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-actions.tsx
@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArrowDown,
+  ArrowUp,
+  Bell,
+  Copy,
+  CornerUpLeft,
+  CornerUpRight,
+  FileText,
+  GalleryVerticalEnd,
+  LineChart,
+  Link,
+  MoreHorizontal,
+  Settings2,
+  Star,
+  Trash,
+  Trash2,
+} from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+const data = [
+  [
+    {
+      label: "Customize Page",
+      icon: Settings2,
+    },
+    {
+      label: "Turn into wiki",
+      icon: FileText,
+    },
+  ],
+  [
+    {
+      label: "Copy Link",
+      icon: Link,
+    },
+    {
+      label: "Duplicate",
+      icon: Copy,
+    },
+    {
+      label: "Move to",
+      icon: CornerUpRight,
+    },
+    {
+      label: "Move to Trash",
+      icon: Trash2,
+    },
+  ],
+  [
+    {
+      label: "Undo",
+      icon: CornerUpLeft,
+    },
+    {
+      label: "View analytics",
+      icon: LineChart,
+    },
+    {
+      label: "Version History",
+      icon: GalleryVerticalEnd,
+    },
+    {
+      label: "Show delete pages",
+      icon: Trash,
+    },
+    {
+      label: "Notifications",
+      icon: Bell,
+    },
+  ],
+  [
+    {
+      label: "Import",
+      icon: ArrowUp,
+    },
+    {
+      label: "Export",
+      icon: ArrowDown,
+    },
+  ],
+]
+
+export function NavActions() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsOpen(true)
+  }, [])
+
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      <div className="hidden font-medium text-muted-foreground md:inline-block">
+        Edit Oct 08
+      </div>
+      <Button variant="ghost" size="icon" className="h-7 w-7">
+        <Star />
+      </Button>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 data-[state=open]:bg-accent"
+          >
+            <MoreHorizontal />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-56 overflow-hidden rounded-lg p-0"
+          align="end"
+        >
+          <Sidebar collapsible="none" className="bg-transparent">
+            <SidebarContent>
+              {data.map((group, index) => (
+                <SidebarGroup key={index} className="border-b last:border-none">
+                  <SidebarGroupContent className="gap-0">
+                    <SidebarMenu>
+                      {group.map((item, index) => (
+                        <SidebarMenuItem key={index}>
+                          <SidebarMenuButton>
+                            <item.icon /> <span>{item.label}</span>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              ))}
+            </SidebarContent>
+          </Sidebar>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-10/components/nav-favorites.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-favorites.tsx
new file mode 100644
index 00000000000..673649069bf
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-favorites.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import {
+  ArrowUpRight,
+  Link,
+  MoreHorizontal,
+  StarOff,
+  Trash2,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavFavorites({
+  favorites,
+}: {
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+      <SidebarMenu>
+        {favorites.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url} title={item.name}>
+                <span>{item.emoji}</span>
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-56 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <StarOff className="text-muted-foreground" />
+                  <span>Remove from Favorites</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link className="text-muted-foreground" />
+                  <span>Copy Link</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArrowUpRight className="text-muted-foreground" />
+                  <span>Open in New Tab</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-10/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-main.tsx
new file mode 100644
index 00000000000..c79844d391c
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-main.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton asChild isActive={item.isActive}>
+            <a href={item.url}>
+              <item.icon />
+              <span>{item.title}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-10/components/nav-secondary.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-secondary.tsx
new file mode 100644
index 00000000000..e72e1afd6b5
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-secondary.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: React.ReactNode
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-10/components/nav-workspaces.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-workspaces.tsx
new file mode 100644
index 00000000000..d92a40c5c20
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-workspaces.tsx
@@ -0,0 +1,85 @@
+import { ChevronRight, MoreHorizontal, Plus } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavWorkspaces({
+  workspaces,
+}: {
+  workspaces: {
+    name: string
+    emoji: React.ReactNode
+    pages: {
+      name: string
+      emoji: React.ReactNode
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {workspaces.map((workspace) => (
+            <Collapsible key={workspace.name}>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <span>{workspace.emoji}</span>
+                    <span>{workspace.name}</span>
+                  </a>
+                </SidebarMenuButton>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuAction
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                    showOnHover
+                  >
+                    <ChevronRight />
+                  </SidebarMenuAction>
+                </CollapsibleTrigger>
+                <SidebarMenuAction showOnHover>
+                  <Plus />
+                </SidebarMenuAction>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {workspace.pages.map((page) => (
+                      <SidebarMenuSubItem key={page.name}>
+                        <SidebarMenuSubButton asChild>
+                          <a href="#">
+                            <span>{page.emoji}</span>
+                            <span>{page.name}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ))}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="text-sidebar-foreground/70">
+              <MoreHorizontal />
+              <span>More</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-10/components/team-switcher.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/team-switcher.tsx
new file mode 100644
index 00000000000..43843f0e402
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-10/components/team-switcher.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className="w-fit px-1.5">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-3" />
+              </div>
+              <span className="truncate font-semibold">{activeTeam.name}</span>
+              <ChevronDown className="opacity-50" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-64 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-10/page.tsx b/apps/www/registry/new-york/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000000..d12f80239a5
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-10/page.tsx
@@ -0,0 +1,46 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-10/components/app-sidebar"
+import { NavActions } from "@/registry/new-york/blocks/sidebar-10/components/nav-actions"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-14 shrink-0 items-center gap-2">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+          <div className="ml-auto px-3">
+            <NavActions />
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-11/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-11/components/app-sidebar.tsx
new file mode 100644
index 00000000000..0e19233a564
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-11/components/app-sidebar.tsx
@@ -0,0 +1,141 @@
+import * as React from "react"
+import { ChevronRight, File, Folder } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  changes: [
+    {
+      file: "README.md",
+      state: "M",
+    },
+    {
+      file: "api/hello/route.ts",
+      state: "U",
+    },
+    {
+      file: "app/layout.tsx",
+      state: "M",
+    },
+  ],
+  tree: [
+    [
+      "app",
+      [
+        "api",
+        ["hello", ["route.ts"]],
+        "page.tsx",
+        "layout.tsx",
+        ["blog", ["page.tsx"]],
+      ],
+    ],
+    [
+      "components",
+      ["ui", "button.tsx", "card.tsx"],
+      "header.tsx",
+      "footer.tsx",
+    ],
+    ["lib", ["util.ts"]],
+    ["public", "favicon.ico", "vercel.svg"],
+    ".eslintrc.json",
+    ".gitignore",
+    "next.config.js",
+    "tailwind.config.js",
+    "package.json",
+    "README.md",
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Changes</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.changes.map((item, index) => (
+                <SidebarMenuItem key={index}>
+                  <SidebarMenuButton>
+                    <File />
+                    {item.file}
+                  </SidebarMenuButton>
+                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Files</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.tree.map((item, index) => (
+                <Tree key={index} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function Tree({ item }: { item: string | any[] }) {
+  const [name, ...items] = Array.isArray(item) ? item : [item]
+
+  if (!items.length) {
+    return (
+      <SidebarMenuButton
+        isActive={name === "button.tsx"}
+        className="data-[active=true]:bg-transparent"
+      >
+        <File />
+        {name}
+      </SidebarMenuButton>
+    )
+  }
+
+  return (
+    <SidebarMenuItem>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen={name === "components" || name === "ui"}
+      >
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton>
+            <ChevronRight className="transition-transform" />
+            <Folder />
+            {name}
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {items.map((subItem, index) => (
+              <Tree key={index} item={subItem} />
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarMenuItem>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-11/page.tsx b/apps/www/registry/new-york/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000000..939d72c6825
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-11/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-11/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">components</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">ui</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>button.tsx</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-12/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-12/components/app-sidebar.tsx
new file mode 100644
index 00000000000..a03b139923c
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-12/components/app-sidebar.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+
+import { Calendars } from "@/registry/new-york/blocks/sidebar-12/components/calendars"
+import { DatePicker } from "@/registry/new-york/blocks/sidebar-12/components/date-picker"
+import { NavUser } from "@/registry/new-york/blocks/sidebar-12/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  calendars: [
+    {
+      name: "My Calendars",
+      items: ["Personal", "Work", "Family"],
+    },
+    {
+      name: "Favorites",
+      items: ["Holidays", "Birthdays"],
+    },
+    {
+      name: "Other",
+      items: ["Travel", "Reminders", "Deadlines"],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
+        <NavUser user={data.user} />
+      </SidebarHeader>
+      <SidebarContent>
+        <DatePicker />
+        <SidebarSeparator className="mx-0" />
+        <Calendars calendars={data.calendars} />
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              <Plus />
+              <span>New Calendar</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-12/components/calendars.tsx b/apps/www/registry/new-york/blocks/sidebar-12/components/calendars.tsx
new file mode 100644
index 00000000000..dd0aa7d2068
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-12/components/calendars.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Check, ChevronRight } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from "@/registry/new-york/ui/sidebar"
+
+export function Calendars({
+  calendars,
+}: {
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}) {
+  return (
+    <>
+      {calendars.map((calendar, index) => (
+        <React.Fragment key={calendar.name}>
+          <SidebarGroup key={calendar.name} className="py-0">
+            <Collapsible
+              defaultOpen={index === 0}
+              className="group/collapsible"
+            >
+              <SidebarGroupLabel
+                asChild
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {calendar.name}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {calendar.items.map((item, index) => (
+                      <SidebarMenuItem key={item}>
+                        <SidebarMenuButton>
+                          <div
+                            data-active={index < 2}
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                          >
+                            <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                          </div>
+                          {item}
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </SidebarGroup>
+          <SidebarSeparator className="mx-0" />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-12/components/date-picker.tsx b/apps/www/registry/new-york/blocks/sidebar-12/components/date-picker.tsx
new file mode 100644
index 00000000000..4db1f78829e
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-12/components/date-picker.tsx
@@ -0,0 +1,15 @@
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from "@/registry/new-york/ui/sidebar"
+
+export function DatePicker() {
+  return (
+    <SidebarGroup className="px-0">
+      <SidebarGroupContent>
+        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-12/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-12/components/nav-user.tsx
new file mode 100644
index 00000000000..a69086501d8
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-12/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-12/page.tsx b/apps/www/registry/new-york/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000000..ccf68cbe1fa
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-12/page.tsx
@@ -0,0 +1,41 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-12/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbPage>October 2024</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+            {Array.from({ length: 20 }).map((_, i) => (
+              <div key={i} className="aspect-square rounded-xl bg-muted/50" />
+            ))}
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-13/components/settings-dialog.tsx b/apps/www/registry/new-york/blocks/sidebar-13/components/settings-dialog.tsx
new file mode 100644
index 00000000000..1a810770477
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-13/components/settings-dialog.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import {
+  Bell,
+  Check,
+  Globe,
+  Home,
+  Keyboard,
+  Link,
+  Lock,
+  Menu,
+  MessageCircle,
+  Paintbrush,
+  Settings,
+  Video,
+} from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york/ui/dialog"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+const data = {
+  nav: [
+    { name: "Notifications", icon: Bell },
+    { name: "Navigation", icon: Menu },
+    { name: "Home", icon: Home },
+    { name: "Appearance", icon: Paintbrush },
+    { name: "Messages & media", icon: MessageCircle },
+    { name: "Language & region", icon: Globe },
+    { name: "Accessibility", icon: Keyboard },
+    { name: "Mark as read", icon: Check },
+    { name: "Audio & video", icon: Video },
+    { name: "Connected accounts", icon: Link },
+    { name: "Privacy & visibility", icon: Lock },
+    { name: "Advanced", icon: Settings },
+  ],
+}
+
+export function SettingsDialog() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+        <DialogTitle className="sr-only">Settings</DialogTitle>
+        <DialogDescription className="sr-only">
+          Customize your settings here.
+        </DialogDescription>
+        <SidebarProvider className="items-start">
+          <Sidebar collapsible="none" className="hidden md:flex">
+            <SidebarContent>
+              <SidebarGroup>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {data.nav.map((item) => (
+                      <SidebarMenuItem key={item.name}>
+                        <SidebarMenuButton
+                          asChild
+                          isActive={item.name === "Messages & media"}
+                        >
+                          <a href="#">
+                            <item.icon />
+                            <span>{item.name}</span>
+                          </a>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            </SidebarContent>
+          </Sidebar>
+          <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+              <div className="flex items-center gap-2 px-4">
+                <Breadcrumb>
+                  <BreadcrumbList>
+                    <BreadcrumbItem className="hidden md:block">
+                      <BreadcrumbLink href="#">Settings</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator className="hidden md:block" />
+                    <BreadcrumbItem>
+                      <BreadcrumbPage>Messages & media</BreadcrumbPage>
+                    </BreadcrumbItem>
+                  </BreadcrumbList>
+                </Breadcrumb>
+              </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+              {Array.from({ length: 10 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="aspect-video max-w-3xl rounded-xl bg-muted/50"
+                />
+              ))}
+            </div>
+          </main>
+        </SidebarProvider>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-13/page.tsx b/apps/www/registry/new-york/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000000..a323b1c5d17
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-13/page.tsx
@@ -0,0 +1,9 @@
+import { SettingsDialog } from "@/registry/new-york/blocks/sidebar-13/components/settings-dialog"
+
+export default function Page() {
+  return (
+    <div className="flex h-svh items-center justify-center">
+      <SettingsDialog />
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-14/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-14/components/app-sidebar.tsx
new file mode 100644
index 00000000000..f939fc54329
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-14/components/app-sidebar.tsx
@@ -0,0 +1,197 @@
+import * as React from "react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url} className="font-medium">
+                      {item.title}
+                    </a>
+                  </SidebarMenuButton>
+                  {item.items?.length ? (
+                    <SidebarMenuSub>
+                      {item.items.map((item) => (
+                        <SidebarMenuSubItem key={item.title}>
+                          <SidebarMenuSubButton
+                            asChild
+                            isActive={item.isActive}
+                          >
+                            <a href={item.url}>{item.title}</a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  ) : null}
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-14/page.tsx b/apps/www/registry/new-york/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000000..7d6c0b37c78
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-14/page.tsx
@@ -0,0 +1,48 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-14/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+      <AppSidebar side="right" />
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/components/calendars.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/calendars.tsx
new file mode 100644
index 00000000000..dd0aa7d2068
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/calendars.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Check, ChevronRight } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from "@/registry/new-york/ui/sidebar"
+
+export function Calendars({
+  calendars,
+}: {
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}) {
+  return (
+    <>
+      {calendars.map((calendar, index) => (
+        <React.Fragment key={calendar.name}>
+          <SidebarGroup key={calendar.name} className="py-0">
+            <Collapsible
+              defaultOpen={index === 0}
+              className="group/collapsible"
+            >
+              <SidebarGroupLabel
+                asChild
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {calendar.name}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {calendar.items.map((item, index) => (
+                      <SidebarMenuItem key={item}>
+                        <SidebarMenuButton>
+                          <div
+                            data-active={index < 2}
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                          >
+                            <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                          </div>
+                          {item}
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </SidebarGroup>
+          <SidebarSeparator className="mx-0" />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/components/date-picker.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/date-picker.tsx
new file mode 100644
index 00000000000..4db1f78829e
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/date-picker.tsx
@@ -0,0 +1,15 @@
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from "@/registry/new-york/ui/sidebar"
+
+export function DatePicker() {
+  return (
+    <SidebarGroup className="px-0">
+      <SidebarGroupContent>
+        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/components/nav-favorites.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-favorites.tsx
new file mode 100644
index 00000000000..673649069bf
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-favorites.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import {
+  ArrowUpRight,
+  Link,
+  MoreHorizontal,
+  StarOff,
+  Trash2,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavFavorites({
+  favorites,
+}: {
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+      <SidebarMenu>
+        {favorites.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url} title={item.name}>
+                <span>{item.emoji}</span>
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-56 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <StarOff className="text-muted-foreground" />
+                  <span>Remove from Favorites</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link className="text-muted-foreground" />
+                  <span>Copy Link</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArrowUpRight className="text-muted-foreground" />
+                  <span>Open in New Tab</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-main.tsx
new file mode 100644
index 00000000000..c79844d391c
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-main.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton asChild isActive={item.isActive}>
+            <a href={item.url}>
+              <item.icon />
+              <span>{item.title}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/components/nav-secondary.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-secondary.tsx
new file mode 100644
index 00000000000..e72e1afd6b5
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-secondary.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: React.ReactNode
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-user.tsx
new file mode 100644
index 00000000000..a69086501d8
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/components/nav-workspaces.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-workspaces.tsx
new file mode 100644
index 00000000000..d92a40c5c20
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-workspaces.tsx
@@ -0,0 +1,85 @@
+import { ChevronRight, MoreHorizontal, Plus } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavWorkspaces({
+  workspaces,
+}: {
+  workspaces: {
+    name: string
+    emoji: React.ReactNode
+    pages: {
+      name: string
+      emoji: React.ReactNode
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {workspaces.map((workspace) => (
+            <Collapsible key={workspace.name}>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <span>{workspace.emoji}</span>
+                    <span>{workspace.name}</span>
+                  </a>
+                </SidebarMenuButton>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuAction
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                    showOnHover
+                  >
+                    <ChevronRight />
+                  </SidebarMenuAction>
+                </CollapsibleTrigger>
+                <SidebarMenuAction showOnHover>
+                  <Plus />
+                </SidebarMenuAction>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {workspace.pages.map((page) => (
+                      <SidebarMenuSubItem key={page.name}>
+                        <SidebarMenuSubButton asChild>
+                          <a href="#">
+                            <span>{page.emoji}</span>
+                            <span>{page.name}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ))}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="text-sidebar-foreground/70">
+              <MoreHorizontal />
+              <span>More</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/components/sidebar-left.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/sidebar-left.tsx
new file mode 100644
index 00000000000..5bd22348001
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/sidebar-left.tsx
@@ -0,0 +1,278 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  Blocks,
+  Calendar,
+  Command,
+  Home,
+  Inbox,
+  MessageCircleQuestion,
+  Search,
+  Settings2,
+  Sparkles,
+  Trash2,
+} from "lucide-react"
+
+import { NavFavorites } from "@/registry/new-york/blocks/sidebar-15/components/nav-favorites"
+import { NavMain } from "@/registry/new-york/blocks/sidebar-15/components/nav-main"
+import { NavSecondary } from "@/registry/new-york/blocks/sidebar-15/components/nav-secondary"
+import { NavWorkspaces } from "@/registry/new-york/blocks/sidebar-15/components/nav-workspaces"
+import { TeamSwitcher } from "@/registry/new-york/blocks/sidebar-15/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: Command,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Search",
+      url: "#",
+      icon: Search,
+    },
+    {
+      title: "Ask AI",
+      url: "#",
+      icon: Sparkles,
+    },
+    {
+      title: "Home",
+      url: "#",
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      badge: "10",
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Calendar",
+      url: "#",
+      icon: Calendar,
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+    },
+    {
+      title: "Templates",
+      url: "#",
+      icon: Blocks,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+    },
+    {
+      title: "Help",
+      url: "#",
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: "Project Management & Task Tracking",
+      url: "#",
+      emoji: "📊",
+    },
+    {
+      name: "Family Recipe Collection & Meal Planning",
+      url: "#",
+      emoji: "🍳",
+    },
+    {
+      name: "Fitness Tracker & Workout Routines",
+      url: "#",
+      emoji: "💪",
+    },
+    {
+      name: "Book Notes & Reading List",
+      url: "#",
+      emoji: "📚",
+    },
+    {
+      name: "Sustainable Gardening Tips & Plant Care",
+      url: "#",
+      emoji: "🌱",
+    },
+    {
+      name: "Language Learning Progress & Resources",
+      url: "#",
+      emoji: "🗣️",
+    },
+    {
+      name: "Home Renovation Ideas & Budget Tracker",
+      url: "#",
+      emoji: "🏠",
+    },
+    {
+      name: "Personal Finance & Investment Portfolio",
+      url: "#",
+      emoji: "💰",
+    },
+    {
+      name: "Movie & TV Show Watchlist with Reviews",
+      url: "#",
+      emoji: "🎬",
+    },
+    {
+      name: "Daily Habit Tracker & Goal Setting",
+      url: "#",
+      emoji: "✅",
+    },
+  ],
+  workspaces: [
+    {
+      name: "Personal Life Management",
+      emoji: "🏠",
+      pages: [
+        {
+          name: "Daily Journal & Reflection",
+          url: "#",
+          emoji: "📔",
+        },
+        {
+          name: "Health & Wellness Tracker",
+          url: "#",
+          emoji: "🍏",
+        },
+        {
+          name: "Personal Growth & Learning Goals",
+          url: "#",
+          emoji: "🌟",
+        },
+      ],
+    },
+    {
+      name: "Professional Development",
+      emoji: "💼",
+      pages: [
+        {
+          name: "Career Objectives & Milestones",
+          url: "#",
+          emoji: "🎯",
+        },
+        {
+          name: "Skill Acquisition & Training Log",
+          url: "#",
+          emoji: "🧠",
+        },
+        {
+          name: "Networking Contacts & Events",
+          url: "#",
+          emoji: "🤝",
+        },
+      ],
+    },
+    {
+      name: "Creative Projects",
+      emoji: "🎨",
+      pages: [
+        {
+          name: "Writing Ideas & Story Outlines",
+          url: "#",
+          emoji: "✍️",
+        },
+        {
+          name: "Art & Design Portfolio",
+          url: "#",
+          emoji: "🖼️",
+        },
+        {
+          name: "Music Composition & Practice Log",
+          url: "#",
+          emoji: "🎵",
+        },
+      ],
+    },
+    {
+      name: "Home Management",
+      emoji: "🏡",
+      pages: [
+        {
+          name: "Household Budget & Expense Tracking",
+          url: "#",
+          emoji: "💰",
+        },
+        {
+          name: "Home Maintenance Schedule & Tasks",
+          url: "#",
+          emoji: "🔧",
+        },
+        {
+          name: "Family Calendar & Event Planning",
+          url: "#",
+          emoji: "📅",
+        },
+      ],
+    },
+    {
+      name: "Travel & Adventure",
+      emoji: "🧳",
+      pages: [
+        {
+          name: "Trip Planning & Itineraries",
+          url: "#",
+          emoji: "🗺️",
+        },
+        {
+          name: "Travel Bucket List & Inspiration",
+          url: "#",
+          emoji: "🌎",
+        },
+        {
+          name: "Travel Journal & Photo Gallery",
+          url: "#",
+          emoji: "📸",
+        },
+      ],
+    },
+  ],
+}
+
+export function SidebarLeft({
+  ...props
+}: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar className="border-r-0" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+        <NavMain items={data.navMain} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavFavorites favorites={data.favorites} />
+        <NavWorkspaces workspaces={data.workspaces} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/components/sidebar-right.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/sidebar-right.tsx
new file mode 100644
index 00000000000..1e9cfaeea81
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/sidebar-right.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+
+import { Calendars } from "@/registry/new-york/blocks/sidebar-15/components/calendars"
+import { DatePicker } from "@/registry/new-york/blocks/sidebar-15/components/date-picker"
+import { NavUser } from "@/registry/new-york/blocks/sidebar-15/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  calendars: [
+    {
+      name: "My Calendars",
+      items: ["Personal", "Work", "Family"],
+    },
+    {
+      name: "Favorites",
+      items: ["Holidays", "Birthdays"],
+    },
+    {
+      name: "Other",
+      items: ["Travel", "Reminders", "Deadlines"],
+    },
+  ],
+}
+
+export function SidebarRight({
+  ...props
+}: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar
+      collapsible="none"
+      className="sticky hidden lg:flex top-0 h-svh border-l"
+      {...props}
+    >
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
+        <NavUser user={data.user} />
+      </SidebarHeader>
+      <SidebarContent>
+        <DatePicker />
+        <SidebarSeparator className="mx-0" />
+        <Calendars calendars={data.calendars} />
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              <Plus />
+              <span>New Calendar</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/components/team-switcher.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/team-switcher.tsx
new file mode 100644
index 00000000000..43843f0e402
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/team-switcher.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className="w-fit px-1.5">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-3" />
+              </div>
+              <span className="truncate font-semibold">{activeTeam.name}</span>
+              <ChevronDown className="opacity-50" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-64 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/page.tsx b/apps/www/registry/new-york/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000000..acfcc0a4c17
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/page.tsx
@@ -0,0 +1,44 @@
+import { SidebarLeft } from "@/registry/new-york/blocks/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "@/registry/new-york/blocks/sidebar-15/components/sidebar-right"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarLeft />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+      <SidebarRight />
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/app-sidebar.tsx
new file mode 100644
index 00000000000..c3b122038d1
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-16/components/app-sidebar.tsx
@@ -0,0 +1,188 @@
+"use client"
+
+import * as React from "react"
+import {
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  LifeBuoy,
+  Map,
+  PieChart,
+  Send,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { NavMain } from "@/registry/new-york/blocks/sidebar-16/components/nav-main"
+import { NavProjects } from "@/registry/new-york/blocks/sidebar-16/components/nav-projects"
+import { NavSecondary } from "@/registry/new-york/blocks/sidebar-16/components/nav-secondary"
+import { NavUser } from "@/registry/new-york/blocks/sidebar-16/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar
+      className="top-[--header-height] !h-[calc(100svh-var(--header-height))]"
+      {...props}
+    >
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="#">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <Command className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">Acme Inc</span>
+                  <span className="truncate text-xs">Enterprise</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-main.tsx
new file mode 100644
index 00000000000..34737f61628
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-main.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild tooltip={item.title}>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.items?.length ? (
+                <>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuAction className="data-[state=open]:rotate-90">
+                      <ChevronRight />
+                      <span className="sr-only">Toggle</span>
+                    </SidebarMenuAction>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.items?.map((subItem) => (
+                        <SidebarMenuSubItem key={subItem.title}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </>
+              ) : null}
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/nav-projects.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-projects.tsx
new file mode 100644
index 00000000000..3cd543cbbf0
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  MoreHorizontal,
+  Share,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Share className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/nav-secondary.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-secondary.tsx
new file mode 100644
index 00000000000..a7d5a4f405a
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-secondary.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild size="sm">
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-user.tsx
new file mode 100644
index 00000000000..a12cf07ff8f
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/search-form.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/search-form.tsx
new file mode 100644
index 00000000000..aedcc6434ae
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-16/components/search-form.tsx
@@ -0,0 +1,22 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/registry/new-york/ui/label"
+import { SidebarInput } from "@/registry/new-york/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <div className="relative">
+        <Label htmlFor="search" className="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Type to search..."
+          className="h-8 pl-7"
+        />
+        <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+      </div>
+    </form>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/site-header.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/site-header.tsx
new file mode 100644
index 00000000000..fe273454a54
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-16/components/site-header.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { SidebarIcon } from "lucide-react"
+
+import { SearchForm } from "@/registry/new-york/blocks/sidebar-16/components/search-form"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Button } from "@/registry/new-york/ui/button"
+import { Separator } from "@/registry/new-york/ui/separator"
+import { useSidebar } from "@/registry/new-york/ui/sidebar"
+
+export function SiteHeader() {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <header className="flex sticky top-0 z-50 w-full items-center border-b bg-background">
+      <div className="flex h-[--header-height] w-full items-center gap-2 px-4">
+        <Button
+          className="h-8 w-8"
+          variant="ghost"
+          size="icon"
+          onClick={toggleSidebar}
+        >
+          <SidebarIcon />
+        </Button>
+        <Separator orientation="vertical" className="mr-2 h-4" />
+        <Breadcrumb className="hidden sm:block">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <SearchForm className="w-full sm:ml-auto sm:w-auto" />
+      </div>
+    </header>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/sidebar-16/page.tsx b/apps/www/registry/new-york/blocks/sidebar-16/page.tsx
new file mode 100644
index 00000000000..85d4f3b69b5
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-16/page.tsx
@@ -0,0 +1,30 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-16/components/app-sidebar"
+import { SiteHeader } from "@/registry/new-york/blocks/sidebar-16/components/site-header"
+import { SidebarInset, SidebarProvider } from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a header and a search form."
+
+export default function Page() {
+  return (
+    <div className="[--header-height:calc(theme(spacing.14))]">
+      <SidebarProvider className="flex flex-col">
+        <SiteHeader />
+        <div className="flex flex-1">
+          <AppSidebar />
+          <SidebarInset>
+            <div className="flex flex-1 flex-col gap-4 p-4">
+              <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+              </div>
+              <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+            </div>
+          </SidebarInset>
+        </div>
+      </SidebarProvider>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-area-axes.tsx b/apps/www/registry/new-york/charts/chart-area-axes.tsx
new file mode 100644
index 00000000000..8efb8a382d6
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-axes.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "An area chart with axes"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Axes</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: -20,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickCount={3}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-area-default.tsx b/apps/www/registry/new-york/charts/chart-area-default.tsx
new file mode 100644
index 00000000000..95e9ca5a734
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-default.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A simple area chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-area-gradient.tsx b/apps/www/registry/new-york/charts/chart-area-gradient.tsx
new file mode 100644
index 00000000000..de6eada5135
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-gradient.tsx
@@ -0,0 +1,130 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "An area chart with gradient fill"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Gradient</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-area-icons.tsx b/apps/www/registry/new-york/charts/chart-area-icons.tsx
new file mode 100644
index 00000000000..5d136dfd07b
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-icons.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingDown, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "An area chart with icons"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+    icon: TrendingDown,
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+    icon: TrendingUp,
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Icons</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-area-interactive.tsx b/apps/www/registry/new-york/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000000..cd8e7e6b288
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export const description = "An interactive area chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const [timeRange, setTimeRange] = React.useState("90d")
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date)
+    const referenceDate = new Date("2024-06-30")
+    let daysToSubtract = 90
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
+  })
+
+  return (
+    <Card>
+      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
+        <div className="grid flex-1 gap-1 text-center sm:text-left">
+          <CardTitle>Area Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <Select value={timeRange} onValueChange={setTimeRange}>
+          <SelectTrigger
+            className="w-[160px] rounded-lg sm:ml-auto"
+            aria-label="Select a value"
+          >
+            <SelectValue placeholder="Last 3 months" />
+          </SelectTrigger>
+          <SelectContent className="rounded-xl">
+            <SelectItem value="90d" className="rounded-lg">
+              Last 3 months
+            </SelectItem>
+            <SelectItem value="30d" className="rounded-lg">
+              Last 30 days
+            </SelectItem>
+            <SelectItem value="7d" className="rounded-lg">
+              Last 7 days
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-area-legend.tsx b/apps/www/registry/new-york/charts/chart-area-legend.tsx
new file mode 100644
index 00000000000..13ba0ba54a3
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-legend.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "An area chart with a legend"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Legend</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-area-linear.tsx b/apps/www/registry/new-york/charts/chart-area-linear.tsx
new file mode 100644
index 00000000000..2b88f333fdb
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-linear.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A linear area chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Linear</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dot" hideLabel />}
+            />
+            <Area
+              dataKey="desktop"
+              type="linear"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-area-stacked-expand.tsx b/apps/www/registry/new-york/charts/chart-area-stacked-expand.tsx
new file mode 100644
index 00000000000..f7662c0f711
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-stacked-expand.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked area chart with expand stacking"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80, other: 45 },
+  { month: "February", desktop: 305, mobile: 200, other: 100 },
+  { month: "March", desktop: 237, mobile: 120, other: 150 },
+  { month: "April", desktop: 73, mobile: 190, other: 50 },
+  { month: "May", desktop: 209, mobile: 130, other: 100 },
+  { month: "June", desktop: 214, mobile: 140, other: 160 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-3))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Stacked Expanded</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+              top: 12,
+            }}
+            stackOffset="expand"
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="other"
+              type="natural"
+              fill="var(--color-other)"
+              fillOpacity={0.1}
+              stroke="var(--color-other)"
+              stackId="a"
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-area-stacked.tsx b/apps/www/registry/new-york/charts/chart-area-stacked.tsx
new file mode 100644
index 00000000000..d0c1b6eee85
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-stacked.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked area chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Stacked</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dot" />}
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="var(--color-mobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-area-step.tsx b/apps/www/registry/new-york/charts/chart-area-step.tsx
new file mode 100644
index 00000000000..be43a89d3c7
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-step.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { Activity, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A step area chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+    icon: Activity,
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Step</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Area
+              dataKey="desktop"
+              type="step"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-bar-active.tsx b/apps/www/registry/new-york/charts/chart-bar-active.tsx
new file mode 100644
index 00000000000..b913609d92f
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-active.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A bar chart with an active bar"
+
+const chartData = [
+  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Active</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="browser"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) =>
+                chartConfig[value as keyof typeof chartConfig]?.label
+              }
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar
+              dataKey="visitors"
+              strokeWidth={2}
+              radius={8}
+              activeIndex={2}
+              activeBar={({ ...props }) => {
+                return (
+                  <Rectangle
+                    {...props}
+                    fillOpacity={0.8}
+                    stroke={props.payload.fill}
+                    strokeDasharray={4}
+                    strokeDashoffset={4}
+                  />
+                )
+              }}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-bar-default.tsx b/apps/www/registry/new-york/charts/chart-bar-default.tsx
new file mode 100644
index 00000000000..5aec111e67e
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-default.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A bar chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-bar-horizontal.tsx b/apps/www/registry/new-york/charts/chart-bar-horizontal.tsx
new file mode 100644
index 00000000000..b8b10145177
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-horizontal.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A horizontal bar chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Horizontal</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            margin={{
+              left: -20,
+            }}
+          >
+            <XAxis type="number" dataKey="desktop" hide />
+            <YAxis
+              dataKey="month"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={5} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-bar-interactive.tsx b/apps/www/registry/new-york/charts/chart-bar-interactive.tsx
new file mode 100644
index 00000000000..f988ef5e11c
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-interactive.tsx
@@ -0,0 +1,221 @@
+"use client"
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "An interactive bar chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  views: {
+    label: "Page Views",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const [activeChart, setActiveChart] =
+    React.useState<keyof typeof chartConfig>("desktop")
+
+  const total = React.useMemo(
+    () => ({
+      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+    }),
+    []
+  )
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+          <CardTitle>Bar Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <div className="flex">
+          {["desktop", "mobile"].map((key) => {
+            const chart = key as keyof typeof chartConfig
+            return (
+              <button
+                key={chart}
+                data-active={activeChart === chart}
+                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                onClick={() => setActiveChart(chart)}
+              >
+                <span className="text-xs text-muted-foreground">
+                  {chartConfig[chart].label}
+                </span>
+                <span className="text-lg font-bold leading-none sm:text-3xl">
+                  {total[key as keyof typeof total].toLocaleString()}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-bar-label-custom.tsx b/apps/www/registry/new-york/charts/chart-bar-label-custom.tsx
new file mode 100644
index 00000000000..bba630a9005
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-label-custom.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A bar chart with a custom label"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+  label: {
+    color: "hsl(var(--background))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Custom Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            margin={{
+              right: 16,
+            }}
+          >
+            <CartesianGrid horizontal={false} />
+            <YAxis
+              dataKey="month"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+              hide
+            />
+            <XAxis dataKey="desktop" type="number" hide />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Bar
+              dataKey="desktop"
+              layout="vertical"
+              fill="var(--color-desktop)"
+              radius={4}
+            >
+              <LabelList
+                dataKey="month"
+                position="insideLeft"
+                offset={8}
+                className="fill-[--color-label]"
+                fontSize={12}
+              />
+              <LabelList
+                dataKey="desktop"
+                position="right"
+                offset={8}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-bar-label.tsx b/apps/www/registry/new-york/charts/chart-bar-label.tsx
new file mode 100644
index 00000000000..1a06e05e002
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-label.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A bar chart with a label"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 20,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
+              <LabelList
+                position="top"
+                offset={12}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-bar-mixed.tsx b/apps/www/registry/new-york/charts/chart-bar-mixed.tsx
new file mode 100644
index 00000000000..f8398778335
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-mixed.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A mixed bar chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Mixed</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            margin={{
+              left: 0,
+            }}
+          >
+            <YAxis
+              dataKey="browser"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) =>
+                chartConfig[value as keyof typeof chartConfig]?.label
+              }
+            />
+            <XAxis dataKey="visitors" type="number" hide />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="visitors" layout="vertical" radius={5} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-bar-multiple.tsx b/apps/www/registry/new-york/charts/chart-bar-multiple.tsx
new file mode 100644
index 00000000000..b570638ce62
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-multiple.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A multiple bar chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dashed" />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-bar-negative.tsx b/apps/www/registry/new-york/charts/chart-bar-negative.tsx
new file mode 100644
index 00000000000..c735fc6fffd
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-negative.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A bar chart with negative values"
+
+const chartData = [
+  { month: "January", visitors: 186 },
+  { month: "February", visitors: 205 },
+  { month: "March", visitors: -207 },
+  { month: "April", visitors: 173 },
+  { month: "May", visitors: -209 },
+  { month: "June", visitors: 214 },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Negative</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel hideIndicator />}
+            />
+            <Bar dataKey="visitors">
+              <LabelList position="top" dataKey="month" fillOpacity={1} />
+              {chartData.map((item) => (
+                <Cell
+                  key={item.month}
+                  fill={
+                    item.visitors > 0
+                      ? "hsl(var(--chart-1))"
+                      : "hsl(var(--chart-2))"
+                  }
+                />
+              ))}
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-bar-stacked.tsx b/apps/www/registry/new-york/charts/chart-bar-stacked.tsx
new file mode 100644
index 00000000000..ddfa81e47ed
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-stacked.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="desktop"
+              stackId="a"
+              fill="var(--color-desktop)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="mobile"
+              stackId="a"
+              fill="var(--color-mobile)"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-line-default.tsx b/apps/www/registry/new-york/charts/chart-line-default.tsx
new file mode 100644
index 00000000000..ccc36bc5b6c
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-default.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A line chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-line-dots-colors.tsx b/apps/www/registry/new-york/charts/chart-line-dots-colors.tsx
new file mode 100644
index 00000000000..5176281cc2c
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-dots-colors.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Dot, Line, LineChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A line chart with dots and colors"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--chart-2))",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Dots Colors</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 24,
+              left: 24,
+              right: 24,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  indicator="line"
+                  nameKey="visitors"
+                  hideLabel
+                />
+              }
+            />
+            <Line
+              dataKey="visitors"
+              type="natural"
+              stroke="var(--color-visitors)"
+              strokeWidth={2}
+              dot={({ payload, ...props }) => {
+                return (
+                  <Dot
+                    key={payload.browser}
+                    r={5}
+                    cx={props.cx}
+                    cy={props.cy}
+                    fill={payload.fill}
+                    stroke={payload.fill}
+                  />
+                )
+              }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-line-dots-custom.tsx b/apps/www/registry/new-york/charts/chart-line-dots-custom.tsx
new file mode 100644
index 00000000000..9b7e86ca364
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-dots-custom.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { GitCommitVertical, TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A line chart with custom dots"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Custom Dots</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={({ cx, cy, payload }) => {
+                const r = 24
+                return (
+                  <GitCommitVertical
+                    key={payload.month}
+                    x={cx - r / 2}
+                    y={cy - r / 2}
+                    width={r}
+                    height={r}
+                    fill="hsl(var(--background))"
+                    stroke="var(--color-desktop)"
+                  />
+                )
+              }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-line-dots.tsx b/apps/www/registry/new-york/charts/chart-line-dots.tsx
new file mode 100644
index 00000000000..54fb10ed802
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-dots.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A line chart with dots"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Dots</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={{
+                fill: "var(--color-desktop)",
+              }}
+              activeDot={{
+                r: 6,
+              }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-line-interactive.tsx b/apps/www/registry/new-york/charts/chart-line-interactive.tsx
new file mode 100644
index 00000000000..4432eb89c29
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-interactive.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "An interactive line chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+  views: {
+    label: "Page Views",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const [activeChart, setActiveChart] =
+    React.useState<keyof typeof chartConfig>("desktop")
+
+  const total = React.useMemo(
+    () => ({
+      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+    }),
+    []
+  )
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+          <CardTitle>Line Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <div className="flex">
+          {["desktop", "mobile"].map((key) => {
+            const chart = key as keyof typeof chartConfig
+            return (
+              <button
+                key={chart}
+                data-active={activeChart === chart}
+                className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                onClick={() => setActiveChart(chart)}
+              >
+                <span className="text-xs text-muted-foreground">
+                  {chartConfig[chart].label}
+                </span>
+                <span className="text-lg font-bold leading-none sm:text-3xl">
+                  {total[key as keyof typeof total].toLocaleString()}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Line
+              dataKey={activeChart}
+              type="monotone"
+              stroke={`var(--color-${activeChart})`}
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-line-label-custom.tsx b/apps/www/registry/new-york/charts/chart-line-label-custom.tsx
new file mode 100644
index 00000000000..f7972946fce
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-label-custom.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A line chart with a custom label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "hsl(var(--chart-2))",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Custom Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 24,
+              left: 24,
+              right: 24,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  indicator="line"
+                  nameKey="visitors"
+                  hideLabel
+                />
+              }
+            />
+            <Line
+              dataKey="visitors"
+              type="natural"
+              stroke="var(--color-visitors)"
+              strokeWidth={2}
+              dot={{
+                fill: "var(--color-visitors)",
+              }}
+              activeDot={{
+                r: 6,
+              }}
+            >
+              <LabelList
+                position="top"
+                offset={12}
+                className="fill-foreground"
+                fontSize={12}
+                dataKey="browser"
+                formatter={(value: keyof typeof chartConfig) =>
+                  chartConfig[value]?.label
+                }
+              />
+            </Line>
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-line-label.tsx b/apps/www/registry/new-york/charts/chart-line-label.tsx
new file mode 100644
index 00000000000..c6b832d6a6b
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-label.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A line chart with a label"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 20,
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Line
+              dataKey="desktop"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={{
+                fill: "var(--color-desktop)",
+              }}
+              activeDot={{
+                r: 6,
+              }}
+            >
+              <LabelList
+                position="top"
+                offset={12}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Line>
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-line-linear.tsx b/apps/www/registry/new-york/charts/chart-line-linear.tsx
new file mode 100644
index 00000000000..7225a5f79c0
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-linear.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A linear line chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Linear</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="linear"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-line-multiple.tsx b/apps/www/registry/new-york/charts/chart-line-multiple.tsx
new file mode 100644
index 00000000000..f972819f5b5
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-multiple.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A multiple line chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Line
+              dataKey="desktop"
+              type="monotone"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="mobile"
+              type="monotone"
+              stroke="var(--color-mobile)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-line-step.tsx b/apps/www/registry/new-york/charts/chart-line-step.tsx
new file mode 100644
index 00000000000..45310518672
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-step.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A line chart with step"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Line Chart - Step</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="desktop"
+              type="step"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-pie-donut-active.tsx b/apps/www/registry/new-york/charts/chart-pie-donut-active.tsx
new file mode 100644
index 00000000000..7d7a82eca8e
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-donut-active.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A donut chart with an active sector"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Donut Active</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+              strokeWidth={5}
+              activeIndex={0}
+              activeShape={({
+                outerRadius = 0,
+                ...props
+              }: PieSectorDataItem) => (
+                <Sector {...props} outerRadius={outerRadius + 10} />
+              )}
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-pie-donut-text.tsx b/apps/www/registry/new-york/charts/chart-pie-donut-text.tsx
new file mode 100644
index 00000000000..1fb6bc74d10
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-donut-text.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A donut chart with text"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 190, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const totalVisitors = React.useMemo(() => {
+    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+  }, [])
+
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Donut with Text</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-pie-donut.tsx b/apps/www/registry/new-york/charts/chart-pie-donut.tsx
new file mode 100644
index 00000000000..42965dac6a8
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-donut.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A donut chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Donut</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-pie-interactive.tsx b/apps/www/registry/new-york/charts/chart-pie-interactive.tsx
new file mode 100644
index 00000000000..8da797d079b
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-interactive.tsx
@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export const description = "An interactive pie chart"
+
+const desktopData = [
+  { month: "january", desktop: 186, fill: "var(--color-january)" },
+  { month: "february", desktop: 305, fill: "var(--color-february)" },
+  { month: "march", desktop: 237, fill: "var(--color-march)" },
+  { month: "april", desktop: 173, fill: "var(--color-april)" },
+  { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+  },
+  mobile: {
+    label: "Mobile",
+  },
+  january: {
+    label: "January",
+    color: "hsl(var(--chart-1))",
+  },
+  february: {
+    label: "February",
+    color: "hsl(var(--chart-2))",
+  },
+  march: {
+    label: "March",
+    color: "hsl(var(--chart-3))",
+  },
+  april: {
+    label: "April",
+    color: "hsl(var(--chart-4))",
+  },
+  may: {
+    label: "May",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const id = "pie-interactive"
+  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
+
+  const activeIndex = React.useMemo(
+    () => desktopData.findIndex((item) => item.month === activeMonth),
+    [activeMonth]
+  )
+  const months = React.useMemo(() => desktopData.map((item) => item.month), [])
+
+  return (
+    <Card data-chart={id} className="flex flex-col">
+      <ChartStyle id={id} config={chartConfig} />
+      <CardHeader className="flex-row items-start space-y-0 pb-0">
+        <div className="grid gap-1">
+          <CardTitle>Pie Chart - Interactive</CardTitle>
+          <CardDescription>January - June 2024</CardDescription>
+        </div>
+        <Select value={activeMonth} onValueChange={setActiveMonth}>
+          <SelectTrigger
+            className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
+            aria-label="Select a value"
+          >
+            <SelectValue placeholder="Select month" />
+          </SelectTrigger>
+          <SelectContent align="end" className="rounded-xl">
+            {months.map((key) => {
+              const config = chartConfig[key as keyof typeof chartConfig]
+
+              if (!config) {
+                return null
+              }
+
+              return (
+                <SelectItem
+                  key={key}
+                  value={key}
+                  className="rounded-lg [&_span]:flex"
+                >
+                  <div className="flex items-center gap-2 text-xs">
+                    <span
+                      className="flex h-3 w-3 shrink-0 rounded-sm"
+                      style={{
+                        backgroundColor: `var(--color-${key})`,
+                      }}
+                    />
+                    {config?.label}
+                  </div>
+                </SelectItem>
+              )
+            })}
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent className="flex flex-1 justify-center pb-0">
+        <ChartContainer
+          id={id}
+          config={chartConfig}
+          className="mx-auto aspect-square w-full max-w-[300px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={desktopData}
+              dataKey="desktop"
+              nameKey="month"
+              innerRadius={60}
+              strokeWidth={5}
+              activeIndex={activeIndex}
+              activeShape={({
+                outerRadius = 0,
+                ...props
+              }: PieSectorDataItem) => (
+                <g>
+                  <Sector {...props} outerRadius={outerRadius + 10} />
+                  <Sector
+                    {...props}
+                    outerRadius={outerRadius + 25}
+                    innerRadius={outerRadius + 12}
+                  />
+                </g>
+              )}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {desktopData[activeIndex].desktop.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-pie-label-custom.tsx b/apps/www/registry/new-york/charts/chart-pie-label-custom.tsx
new file mode 100644
index 00000000000..ff956ebf9dc
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-label-custom.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A pie chart with a custom label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Custom Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] px-0"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              labelLine={false}
+              label={({ payload, ...props }) => {
+                return (
+                  <text
+                    cx={props.cx}
+                    cy={props.cy}
+                    x={props.x}
+                    y={props.y}
+                    textAnchor={props.textAnchor}
+                    dominantBaseline={props.dominantBaseline}
+                    fill="hsla(var(--foreground))"
+                  >
+                    {payload.visitors}
+                  </text>
+                )
+              }}
+              nameKey="browser"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-pie-label-list.tsx b/apps/www/registry/new-york/charts/chart-pie-label-list.tsx
new file mode 100644
index 00000000000..0bc77dfde07
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-label-list.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A pie chart with a label list"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Label List</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
+            />
+            <Pie data={chartData} dataKey="visitors">
+              <LabelList
+                dataKey="browser"
+                className="fill-background"
+                stroke="none"
+                fontSize={12}
+                formatter={(value: keyof typeof chartConfig) =>
+                  chartConfig[value]?.label
+                }
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-pie-label.tsx b/apps/www/registry/new-york/charts/chart-pie-label.tsx
new file mode 100644
index 00000000000..e4a13c93975
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-label.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A pie chart with a label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
+        >
+          <PieChart>
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <Pie data={chartData} dataKey="visitors" label nameKey="browser" />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-pie-legend.tsx b/apps/www/registry/new-york/charts/chart-pie-legend.tsx
new file mode 100644
index 00000000000..d75f89eacf1
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-legend.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A pie chart with a legend"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Legend</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[300px]"
+        >
+          <PieChart>
+            <Pie data={chartData} dataKey="visitors" />
+            <ChartLegend
+              content={<ChartLegendContent nameKey="browser" />}
+              className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-pie-separator-none.tsx b/apps/www/registry/new-york/charts/chart-pie-separator-none.tsx
new file mode 100644
index 00000000000..cf191f16154
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-separator-none.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A pie chart with no separator"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Separator None</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              stroke="0"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-pie-simple.tsx b/apps/www/registry/new-york/charts/chart-pie-simple.tsx
new file mode 100644
index 00000000000..c529f52bb17
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-simple.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A simple pie chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie data={chartData} dataKey="visitors" nameKey="browser" />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-pie-stacked.tsx b/apps/www/registry/new-york/charts/chart-pie-stacked.tsx
new file mode 100644
index 00000000000..b4be18a47d7
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-stacked.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import * as React from "react"
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A pie chart with stacked sections"
+
+const desktopData = [
+  { month: "january", desktop: 186, fill: "var(--color-january)" },
+  { month: "february", desktop: 305, fill: "var(--color-february)" },
+  { month: "march", desktop: 237, fill: "var(--color-march)" },
+  { month: "april", desktop: 173, fill: "var(--color-april)" },
+  { month: "may", desktop: 209, fill: "var(--color-may)" },
+]
+
+const mobileData = [
+  { month: "january", mobile: 80, fill: "var(--color-january)" },
+  { month: "february", mobile: 200, fill: "var(--color-february)" },
+  { month: "march", mobile: 120, fill: "var(--color-march)" },
+  { month: "april", mobile: 190, fill: "var(--color-april)" },
+  { month: "may", mobile: 130, fill: "var(--color-may)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+  },
+  mobile: {
+    label: "Mobile",
+  },
+  january: {
+    label: "January",
+    color: "hsl(var(--chart-1))",
+  },
+  february: {
+    label: "February",
+    color: "hsl(var(--chart-2))",
+  },
+  march: {
+    label: "March",
+    color: "hsl(var(--chart-3))",
+  },
+  april: {
+    label: "April",
+    color: "hsl(var(--chart-4))",
+  },
+  may: {
+    label: "May",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Stacked</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  labelKey="visitors"
+                  nameKey="month"
+                  indicator="line"
+                  labelFormatter={(_, payload) => {
+                    return chartConfig[
+                      payload?.[0].dataKey as keyof typeof chartConfig
+                    ].label
+                  }}
+                />
+              }
+            />
+            <Pie data={desktopData} dataKey="desktop" outerRadius={60} />
+            <Pie
+              data={mobileData}
+              dataKey="mobile"
+              innerRadius={70}
+              outerRadius={90}
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-default.tsx b/apps/www/registry/new-york/charts/chart-radar-default.tsx
new file mode 100644
index 00000000000..7d258514cd5
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-default.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-dots.tsx b/apps/www/registry/new-york/charts/chart-radar-dots.tsx
new file mode 100644
index 00000000000..385734eae79
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-dots.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with dots"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center">
+        <CardTitle>Radar Chart - Dots</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-grid-circle-fill.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-circle-fill.tsx
new file mode 100644
index 00000000000..f3c62bbe861
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-grid-circle-fill.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 285 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 203 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <PolarGrid
+              className="fill-[--color-desktop] opacity-20"
+              gridType="circle"
+            />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.5}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-grid-circle-no-lines.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-circle-no-lines.tsx
new file mode 100644
index 00000000000..5164314998f
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-grid-circle-no-lines.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with a grid and circle fill"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 203 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid gridType="circle" radialLines={false} />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-grid-circle.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-circle.tsx
new file mode 100644
index 00000000000..0cfb63f0e1e
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-grid-circle.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with a grid and circle"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Circle</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid gridType="circle" />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-grid-custom.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-custom.tsx
new file mode 100644
index 00000000000..c48dfcd641e
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-grid-custom.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with a custom grid"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Custom</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-grid-fill.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-fill.tsx
new file mode 100644
index 00000000000..69e2a9e06fa
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-grid-fill.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with a grid filled"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 285 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 203 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 264 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid Filled</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarGrid className="fill-[--color-desktop] opacity-20" />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.5}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-grid-none.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-none.tsx
new file mode 100644
index 00000000000..bdd774945a5
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-grid-none.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with no grid"
+
+const chartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Grid None</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              dot={{
+                r: 4,
+                fillOpacity: 1,
+              }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-icons.tsx b/apps/www/registry/new-york/charts/chart-radar-icons.tsx
new file mode 100644
index 00000000000..d6e5b9ad9b3
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-icons.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with icons"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+    icon: ArrowDownFromLine,
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+    icon: ArrowUpFromLine,
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Icons</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart
+            data={chartData}
+            margin={{
+              top: -40,
+              bottom: -10,
+            }}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+            <ChartLegend className="mt-8" content={<ChartLegendContent />} />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 pt-4 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-label-custom.tsx b/apps/www/registry/new-york/charts/chart-radar-label-custom.tsx
new file mode 100644
index 00000000000..7d693b2edaa
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-label-custom.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with a custom label"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Custom Label</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart
+            data={chartData}
+            margin={{
+              top: 10,
+              right: 10,
+              bottom: 10,
+              left: 10,
+            }}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis
+              dataKey="month"
+              tick={({ x, y, textAnchor, value, index, ...props }) => {
+                const data = chartData[index]
+
+                return (
+                  <text
+                    x={x}
+                    y={index === 0 ? y - 10 : y}
+                    textAnchor={textAnchor}
+                    fontSize={13}
+                    fontWeight={500}
+                    {...props}
+                  >
+                    <tspan>{data.desktop}</tspan>
+                    <tspan className="fill-muted-foreground">/</tspan>
+                    <tspan>{data.mobile}</tspan>
+                    <tspan
+                      x={x}
+                      dy={"1rem"}
+                      fontSize={12}
+                      className="fill-muted-foreground"
+                    >
+                      {data.month}
+                    </tspan>
+                  </text>
+                )
+              }}
+            />
+
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-legend.tsx b/apps/www/registry/new-york/charts/chart-radar-legend.tsx
new file mode 100644
index 00000000000..4000465449d
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-legend.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with a legend"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Legend</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart
+            data={chartData}
+            margin={{
+              top: -40,
+              bottom: -10,
+            }}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+            <ChartLegend className="mt-8" content={<ChartLegendContent />} />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 pt-4 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-lines-only.tsx b/apps/www/registry/new-york/charts/chart-radar-lines-only.tsx
new file mode 100644
index 00000000000..abaf967363d
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-lines-only.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with lines only"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 160 },
+  { month: "February", desktop: 185, mobile: 170 },
+  { month: "March", desktop: 207, mobile: 180 },
+  { month: "April", desktop: 173, mobile: 160 },
+  { month: "May", desktop: 160, mobile: 190 },
+  { month: "June", desktop: 174, mobile: 204 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Lines Only</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid radialLines={false} />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0}
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+            />
+            <Radar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              fillOpacity={0}
+              stroke="var(--color-mobile)"
+              strokeWidth={2}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-multiple.tsx b/apps/www/registry/new-york/charts/chart-radar-multiple.tsx
new file mode 100644
index 00000000000..d8786f8b4ac
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-multiple.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with multiple data"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Multiple</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radar-radius.tsx b/apps/www/registry/new-york/charts/chart-radar-radius.tsx
new file mode 100644
index 00000000000..aa82f8f0243
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-radius.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radar chart with a radius axis"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Radius Axis</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent indicator="line" labelKey="month" />
+              }
+            />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+            <PolarRadiusAxis
+              angle={60}
+              stroke="hsla(var(--foreground))"
+              orientation="middle"
+              axisLine={false}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radial-grid.tsx b/apps/www/registry/new-york/charts/chart-radial-grid.tsx
new file mode 100644
index 00000000000..69a1a3a603a
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-grid.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radial chart with a grid"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Grid</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel nameKey="browser" />}
+            />
+            <PolarGrid gridType="circle" />
+            <RadialBar dataKey="visitors" />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radial-label.tsx b/apps/www/registry/new-york/charts/chart-radial-label.tsx
new file mode 100644
index 00000000000..25c1bc41bf6
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-label.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radial chart with a label"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Label</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            startAngle={-90}
+            endAngle={380}
+            innerRadius={30}
+            outerRadius={110}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel nameKey="browser" />}
+            />
+            <RadialBar dataKey="visitors" background>
+              <LabelList
+                position="insideStart"
+                dataKey="browser"
+                className="fill-white capitalize mix-blend-luminosity"
+                fontSize={11}
+              />
+            </RadialBar>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radial-shape.tsx b/apps/www/registry/new-york/charts/chart-radial-shape.tsx
new file mode 100644
index 00000000000..592e225c4a7
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-shape.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart"
+
+export const description = "A radial chart with a custom shape"
+
+const chartData = [
+  { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Shape</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            endAngle={100}
+            innerRadius={80}
+            outerRadius={140}
+          >
+            <PolarGrid
+              gridType="circle"
+              radialLines={false}
+              stroke="none"
+              className="first:fill-muted last:fill-background"
+              polarRadius={[86, 74]}
+            />
+            <RadialBar dataKey="visitors" background />
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-4xl font-bold"
+                        >
+                          {chartData[0].visitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radial-simple.tsx b/apps/www/registry/new-york/charts/chart-radial-simple.tsx
new file mode 100644
index 00000000000..4033acb3234
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-simple.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radial chart"
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel nameKey="browser" />}
+            />
+            <RadialBar dataKey="visitors" background />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radial-stacked.tsx b/apps/www/registry/new-york/charts/chart-radial-stacked.tsx
new file mode 100644
index 00000000000..38d35670e5f
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-stacked.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A radial chart with stacked sections"
+
+const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  const totalVisitors = chartData[0].desktop + chartData[0].mobile
+
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Stacked</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-1 items-center pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square w-full max-w-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            endAngle={180}
+            innerRadius={80}
+            outerRadius={130}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) - 16}
+                          className="fill-foreground text-2xl font-bold"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 4}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+            <RadialBar
+              dataKey="desktop"
+              stackId="a"
+              cornerRadius={5}
+              fill="var(--color-desktop)"
+              className="stroke-transparent stroke-2"
+            />
+            <RadialBar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              stackId="a"
+              cornerRadius={5}
+              className="stroke-transparent stroke-2"
+            />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-radial-text.tsx b/apps/www/registry/new-york/charts/chart-radial-text.tsx
new file mode 100644
index 00000000000..b88623e6e27
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-text.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart"
+
+export const description = "A radial chart with text"
+
+const chartData = [
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+]
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Radial Chart - Text</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart
+            data={chartData}
+            startAngle={0}
+            endAngle={250}
+            innerRadius={80}
+            outerRadius={110}
+          >
+            <PolarGrid
+              gridType="circle"
+              radialLines={false}
+              stroke="none"
+              className="first:fill-muted last:fill-background"
+              polarRadius={[86, 74]}
+            />
+            <RadialBar dataKey="visitors" background cornerRadius={10} />
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-4xl font-bold"
+                        >
+                          {chartData[0].visitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-tooltip-advanced.tsx b/apps/www/registry/new-york/charts/chart-tooltip-advanced.tsx
new file mode 100644
index 00000000000..bbc9f115dd6
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-advanced.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Advanced</CardTitle>
+        <CardDescription>
+          Tooltip with custom formatter and total.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  hideLabel
+                  className="w-[180px]"
+                  formatter={(value, name, item, index) => (
+                    <>
+                      <div
+                        className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
+                        style={
+                          {
+                            "--color-bg": `var(--color-${name})`,
+                          } as React.CSSProperties
+                        }
+                      />
+                      {chartConfig[name as keyof typeof chartConfig]?.label ||
+                        name}
+                      <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                        {value}
+                        <span className="font-normal text-muted-foreground">
+                          kcal
+                        </span>
+                      </div>
+                      {/* Add this after the last item */}
+                      {index === 1 && (
+                        <div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
+                          Total
+                          <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                            {item.payload.running + item.payload.swimming}
+                            <span className="font-normal text-muted-foreground">
+                              kcal
+                            </span>
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  )}
+                />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-tooltip-default.tsx b/apps/www/registry/new-york/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..759b4555bea
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Default</CardTitle>
+        <CardDescription>
+          Default tooltip with ChartTooltipContent.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-tooltip-formatter.tsx b/apps/www/registry/new-york/charts/chart-tooltip-formatter.tsx
new file mode 100644
index 00000000000..e67f266f270
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-formatter.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Formatter</CardTitle>
+        <CardDescription>Tooltip with custom formatter .</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  hideLabel
+                  formatter={(value, name) => (
+                    <div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
+                      {chartConfig[name as keyof typeof chartConfig]?.label ||
+                        name}
+                      <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                        {value}
+                        <span className="font-normal text-muted-foreground">
+                          kcal
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-tooltip-icons.tsx b/apps/www/registry/new-york/charts/chart-tooltip-icons.tsx
new file mode 100644
index 00000000000..f2bf0719230
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-icons.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Footprints, Waves } from "lucide-react"
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+    icon: Footprints,
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+    icon: Waves,
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Icons</CardTitle>
+        <CardDescription>Tooltip with icons.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent hideLabel />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-tooltip-indicator-line.tsx b/apps/www/registry/new-york/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..19c3f858894
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-indicator-line.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+export const iframeHeight = "600px"
+export const containerClassName =
+  "[&>div]:w-full [&>div]:max-w-md flex items-center justify-center min-h-svh"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Line Indicator</CardTitle>
+        <CardDescription>Tooltip with line indicator.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="line" />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-tooltip-indicator-none.tsx b/apps/www/registry/new-york/charts/chart-tooltip-indicator-none.tsx
new file mode 100644
index 00000000000..29c898a861c
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-indicator-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - No Indicator</CardTitle>
+        <CardDescription>Tooltip with no indicator.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent hideIndicator />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-tooltip-label-custom.tsx b/apps/www/registry/new-york/charts/chart-tooltip-label-custom.tsx
new file mode 100644
index 00000000000..f632510879e
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-label-custom.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  activities: {
+    label: "Activities",
+  },
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Custom label</CardTitle>
+        <CardDescription>
+          Tooltip with custom label from chartConfig.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent labelKey="activities" indicator="line" />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-tooltip-label-formatter.tsx b/apps/www/registry/new-york/charts/chart-tooltip-label-formatter.tsx
new file mode 100644
index 00000000000..220a445b0c1
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-label-formatter.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - Label Formatter</CardTitle>
+        <CardDescription>Tooltip with label formatter.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      day: "numeric",
+                      month: "long",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/charts/chart-tooltip-label-none.tsx b/apps/www/registry/new-york/charts/chart-tooltip-label-none.tsx
new file mode 100644
index 00000000000..a655168dff2
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-label-none.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+export const description = "A stacked bar chart with a legend"
+
+const chartData = [
+  { date: "2024-07-15", running: 450, swimming: 300 },
+  { date: "2024-07-16", running: 380, swimming: 420 },
+  { date: "2024-07-17", running: 520, swimming: 120 },
+  { date: "2024-07-18", running: 140, swimming: 550 },
+  { date: "2024-07-19", running: 600, swimming: 350 },
+  { date: "2024-07-20", running: 480, swimming: 400 },
+]
+
+const chartConfig = {
+  running: {
+    label: "Running",
+    color: "hsl(var(--chart-1))",
+  },
+  swimming: {
+    label: "Swimming",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tooltip - No Label</CardTitle>
+        <CardDescription>Tooltip with no label.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            <Bar
+              dataKey="running"
+              stackId="a"
+              fill="var(--color-running)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="swimming"
+              stackId="a"
+              fill="var(--color-swimming)"
+              radius={[4, 4, 0, 0]}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent hideIndicator hideLabel />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/example/alert-demo.tsx b/apps/www/registry/new-york/example/alert-demo.tsx
deleted file mode 100644
index 78ae6282006..00000000000
--- a/apps/www/registry/new-york/example/alert-demo.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { RocketIcon } from "@radix-ui/react-icons"
-
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/registry/new-york/ui/alert"
-
-export default function AlertDemo() {
-  return (
-    <Alert>
-      <RocketIcon className="h-4 w-4" />
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>
-        You can add components to your app using the cli.
-      </AlertDescription>
-    </Alert>
-  )
-}
diff --git a/apps/www/registry/new-york/example/alert-destructive.tsx b/apps/www/registry/new-york/example/alert-destructive.tsx
deleted file mode 100644
index f09ba842e74..00000000000
--- a/apps/www/registry/new-york/example/alert-destructive.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ExclamationTriangleIcon } from "@radix-ui/react-icons"
-
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/registry/new-york/ui/alert"
-
-export default function AlertDestructive() {
-  return (
-    <Alert variant="destructive">
-      <ExclamationTriangleIcon className="h-4 w-4" />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>
-        Your session has expired. Please log in again.
-      </AlertDescription>
-    </Alert>
-  )
-}
diff --git a/apps/www/registry/new-york/example/breadcrumb-dropdown.tsx b/apps/www/registry/new-york/example/breadcrumb-dropdown.tsx
deleted file mode 100644
index e1114e8370c..00000000000
--- a/apps/www/registry/new-york/example/breadcrumb-dropdown.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ChevronDownIcon, SlashIcon } from "@radix-ui/react-icons"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-
-export default function BreadcrumbWithDropdown() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <SlashIcon />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger className="flex items-center gap-1">
-              Components
-              <ChevronDownIcon />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem>Documentation</DropdownMenuItem>
-              <DropdownMenuItem>Themes</DropdownMenuItem>
-              <DropdownMenuItem>GitHub</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <SlashIcon />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}
diff --git a/apps/www/registry/new-york/example/breadcrumb-separator.tsx b/apps/www/registry/new-york/example/breadcrumb-separator.tsx
deleted file mode 100644
index 0e5fcb3dcc6..00000000000
--- a/apps/www/registry/new-york/example/breadcrumb-separator.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { SlashIcon } from "@radix-ui/react-icons"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-
-export default function BreadcrumbWithCustomSeparator() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <SlashIcon />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <SlashIcon />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}
diff --git a/apps/www/registry/new-york/example/button-icon.tsx b/apps/www/registry/new-york/example/button-icon.tsx
deleted file mode 100644
index 1478a4830f3..00000000000
--- a/apps/www/registry/new-york/example/button-icon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ChevronRightIcon } from "@radix-ui/react-icons"
-
-import { Button } from "@/registry/new-york/ui/button"
-
-export default function ButtonIcon() {
-  return (
-    <Button variant="outline" size="icon">
-      <ChevronRightIcon className="h-4 w-4" />
-    </Button>
-  )
-}
diff --git a/apps/www/registry/new-york/example/button-loading.tsx b/apps/www/registry/new-york/example/button-loading.tsx
deleted file mode 100644
index df0ca032d49..00000000000
--- a/apps/www/registry/new-york/example/button-loading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ReloadIcon } from "@radix-ui/react-icons"
-
-import { Button } from "@/registry/new-york/ui/button"
-
-export default function ButtonLoading() {
-  return (
-    <Button disabled>
-      <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
-      Please wait
-    </Button>
-  )
-}
diff --git a/apps/www/registry/new-york/example/button-with-icon.tsx b/apps/www/registry/new-york/example/button-with-icon.tsx
deleted file mode 100644
index df78483b5f5..00000000000
--- a/apps/www/registry/new-york/example/button-with-icon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { EnvelopeOpenIcon } from "@radix-ui/react-icons"
-
-import { Button } from "@/registry/new-york/ui/button"
-
-export default function ButtonWithIcon() {
-  return (
-    <Button>
-      <EnvelopeOpenIcon className="mr-2 h-4 w-4" /> Login with Email
-    </Button>
-  )
-}
diff --git a/apps/www/registry/new-york/example/calendar-form.tsx b/apps/www/registry/new-york/example/calendar-form.tsx
deleted file mode 100644
index 0e71d498ad2..00000000000
--- a/apps/www/registry/new-york/example/calendar-form.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { CalendarIcon } from "@radix-ui/react-icons"
-import { format } from "date-fns"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { cn } from "@/lib/utils"
-import { toast } from "@/registry/new-york/hooks/use-toast"
-import { Button } from "@/registry/new-york/ui/button"
-import { Calendar } from "@/registry/new-york/ui/calendar"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/new-york/ui/form"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-
-const FormSchema = z.object({
-  dob: z.date({
-    required_error: "A date of birth is required.",
-  }),
-})
-
-export default function CalendarForm() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="dob"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Date of birth</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant={"outline"}
-                      className={cn(
-                        "w-[240px] pl-3 text-left font-normal",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value ? (
-                        format(field.value, "PPP")
-                      ) : (
-                        <span>Pick a date</span>
-                      )}
-                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="start">
-                  <Calendar
-                    mode="single"
-                    selected={field.value}
-                    onSelect={field.onChange}
-                    disabled={(date) =>
-                      date > new Date() || date < new Date("1900-01-01")
-                    }
-                    initialFocus
-                  />
-                </PopoverContent>
-              </Popover>
-              <FormDescription>
-                Your date of birth is used to calculate your age.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
diff --git a/apps/www/registry/new-york/example/card-demo.tsx b/apps/www/registry/new-york/example/card-demo.tsx
deleted file mode 100644
index 1c3f8b17371..00000000000
--- a/apps/www/registry/new-york/example/card-demo.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { BellIcon, CheckIcon } from "@radix-ui/react-icons"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Switch } from "@/registry/new-york/ui/switch"
-
-const notifications = [
-  {
-    title: "Your call has been confirmed.",
-    description: "1 hour ago",
-  },
-  {
-    title: "You have a new message!",
-    description: "1 hour ago",
-  },
-  {
-    title: "Your subscription is expiring soon!",
-    description: "2 hours ago",
-  },
-]
-
-type CardProps = React.ComponentProps<typeof Card>
-
-export default function CardDemo({ className, ...props }: CardProps) {
-  return (
-    <Card className={cn("w-[380px]", className)} {...props}>
-      <CardHeader>
-        <CardTitle>Notifications</CardTitle>
-        <CardDescription>You have 3 unread messages.</CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className=" flex items-center space-x-4 rounded-md border p-4">
-          <BellIcon />
-          <div className="flex-1 space-y-1">
-            <p className="text-sm font-medium leading-none">
-              Push Notifications
-            </p>
-            <p className="text-sm text-muted-foreground">
-              Send notifications to device.
-            </p>
-          </div>
-          <Switch />
-        </div>
-        <div>
-          {notifications.map((notification, index) => (
-            <div
-              key={index}
-              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
-            >
-              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
-              <div className="space-y-1">
-                <p className="text-sm font-medium leading-none">
-                  {notification.title}
-                </p>
-                <p className="text-sm text-muted-foreground">
-                  {notification.description}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">
-          <CheckIcon className="mr-2 h-4 w-4" /> Mark all as read
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/example/cards/activity-goal.tsx b/apps/www/registry/new-york/example/cards/activity-goal.tsx
deleted file mode 100644
index 80edf156417..00000000000
--- a/apps/www/registry/new-york/example/cards/activity-goal.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { MinusIcon, PlusIcon } from "@radix-ui/react-icons"
-import { useTheme } from "next-themes"
-import { Bar, BarChart, ResponsiveContainer } from "recharts"
-
-import { useConfig } from "@/hooks/use-config"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { baseColors } from "@/registry/registry-base-colors"
-
-const data = [
-  {
-    goal: 400,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 239,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 349,
-  },
-]
-
-export function CardsActivityGoal() {
-  const { theme: mode } = useTheme()
-  const [config] = useConfig()
-
-  const baseColor = baseColors.find(
-    (baseColor) => baseColor.name === config.theme
-  )
-  const [goal, setGoal] = React.useState(350)
-
-  function onClick(adjustment: number) {
-    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
-  }
-
-  return (
-    <Card>
-      <CardHeader className="pb-4">
-        <CardTitle>Move Goal</CardTitle>
-        <CardDescription>Set your daily activity goal.</CardDescription>
-      </CardHeader>
-      <CardContent className="pb-2">
-        <div className="flex items-center justify-center space-x-2">
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8 shrink-0 rounded-full"
-            onClick={() => onClick(-10)}
-            disabled={goal <= 200}
-          >
-            <MinusIcon className="h-4 w-4" />
-            <span className="sr-only">Decrease</span>
-          </Button>
-          <div className="flex-1 text-center">
-            <div className="text-5xl font-bold tracking-tighter">{goal}</div>
-            <div className="text-[0.70rem] uppercase text-muted-foreground">
-              Calories/day
-            </div>
-          </div>
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8 shrink-0 rounded-full"
-            onClick={() => onClick(10)}
-            disabled={goal >= 400}
-          >
-            <PlusIcon className="h-4 w-4" />
-            <span className="sr-only">Increase</span>
-          </Button>
-        </div>
-        <div className="my-3 h-[60px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={data}>
-              <Bar
-                dataKey="goal"
-                style={
-                  {
-                    fill: "var(--theme-primary)",
-                    opacity: 0.2,
-                    "--theme-primary": `hsl(${
-                      baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                        .primary
-                    })`,
-                  } as React.CSSProperties
-                }
-              />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Set Goal</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/example/cards/chat.tsx b/apps/www/registry/new-york/example/cards/chat.tsx
deleted file mode 100644
index ccb8f596ae3..00000000000
--- a/apps/www/registry/new-york/example/cards/chat.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import * as React from "react"
-import { CheckIcon, PaperPlaneIcon, PlusIcon } from "@radix-ui/react-icons"
-
-import { cn } from "@/lib/utils"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/registry/new-york/ui/card"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/new-york/ui/command"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/registry/new-york/ui/dialog"
-import { Input } from "@/registry/new-york/ui/input"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/registry/new-york/ui/tooltip"
-
-const users = [
-  {
-    name: "Olivia Martin",
-    email: "m@example.com",
-    avatar: "/avatars/01.png",
-  },
-  {
-    name: "Isabella Nguyen",
-    email: "isabella.nguyen@email.com",
-    avatar: "/avatars/03.png",
-  },
-  {
-    name: "Emma Wilson",
-    email: "emma@example.com",
-    avatar: "/avatars/05.png",
-  },
-  {
-    name: "Jackson Lee",
-    email: "lee@example.com",
-    avatar: "/avatars/02.png",
-  },
-  {
-    name: "William Kim",
-    email: "will@email.com",
-    avatar: "/avatars/04.png",
-  },
-] as const
-
-type User = (typeof users)[number]
-
-export function CardsChat() {
-  const [open, setOpen] = React.useState(false)
-  const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
-
-  const [messages, setMessages] = React.useState([
-    {
-      role: "agent",
-      content: "Hi, how can I help you today?",
-    },
-    {
-      role: "user",
-      content: "Hey, I'm having trouble with my account.",
-    },
-    {
-      role: "agent",
-      content: "What seems to be the problem?",
-    },
-    {
-      role: "user",
-      content: "I can't log in.",
-    },
-  ])
-  const [input, setInput] = React.useState("")
-  const inputLength = input.trim().length
-
-  return (
-    <>
-      <Card>
-        <CardHeader className="flex flex-row items-center">
-          <div className="flex items-center space-x-4">
-            <Avatar>
-              <AvatarImage src="/avatars/01.png" alt="Image" />
-              <AvatarFallback>OM</AvatarFallback>
-            </Avatar>
-            <div>
-              <p className="text-sm font-medium leading-none">Sofia Davis</p>
-              <p className="text-sm text-muted-foreground">m@example.com</p>
-            </div>
-          </div>
-          <TooltipProvider delayDuration={0}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  size="icon"
-                  variant="outline"
-                  className="ml-auto rounded-full"
-                  onClick={() => setOpen(true)}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                  <span className="sr-only">New message</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent sideOffset={10}>New message</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            {messages.map((message, index) => (
-              <div
-                key={index}
-                className={cn(
-                  "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
-                  message.role === "user"
-                    ? "ml-auto bg-primary text-primary-foreground"
-                    : "bg-muted"
-                )}
-              >
-                {message.content}
-              </div>
-            ))}
-          </div>
-        </CardContent>
-        <CardFooter>
-          <form
-            onSubmit={(event) => {
-              event.preventDefault()
-              if (inputLength === 0) return
-              setMessages([
-                ...messages,
-                {
-                  role: "user",
-                  content: input,
-                },
-              ])
-              setInput("")
-            }}
-            className="flex w-full items-center space-x-2"
-          >
-            <Input
-              id="message"
-              placeholder="Type your message..."
-              className="flex-1"
-              autoComplete="off"
-              value={input}
-              onChange={(event) => setInput(event.target.value)}
-            />
-            <Button type="submit" size="icon" disabled={inputLength === 0}>
-              <PaperPlaneIcon className="h-4 w-4" />
-              <span className="sr-only">Send</span>
-            </Button>
-          </form>
-        </CardFooter>
-      </Card>
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="gap-0 p-0 outline-none">
-          <DialogHeader className="px-4 pb-4 pt-5">
-            <DialogTitle>New message</DialogTitle>
-            <DialogDescription>
-              Invite a user to this thread. This will create a new group
-              message.
-            </DialogDescription>
-          </DialogHeader>
-          <Command className="overflow-hidden rounded-t-none border-t bg-transparent">
-            <CommandInput placeholder="Search user..." />
-            <CommandList>
-              <CommandEmpty>No users found.</CommandEmpty>
-              <CommandGroup className="p-2">
-                {users.map((user) => (
-                  <CommandItem
-                    key={user.email}
-                    className="flex items-center px-2"
-                    onSelect={() => {
-                      if (selectedUsers.includes(user)) {
-                        return setSelectedUsers(
-                          selectedUsers.filter(
-                            (selectedUser) => selectedUser !== user
-                          )
-                        )
-                      }
-
-                      return setSelectedUsers(
-                        [...users].filter((u) =>
-                          [...selectedUsers, user].includes(u)
-                        )
-                      )
-                    }}
-                  >
-                    <Avatar>
-                      <AvatarImage src={user.avatar} alt="Image" />
-                      <AvatarFallback>{user.name[0]}</AvatarFallback>
-                    </Avatar>
-                    <div className="ml-2">
-                      <p className="text-sm font-medium leading-none">
-                        {user.name}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        {user.email}
-                      </p>
-                    </div>
-                    {selectedUsers.includes(user) ? (
-                      <CheckIcon className="ml-auto flex h-5 w-5 text-primary" />
-                    ) : null}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-          <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
-            {selectedUsers.length > 0 ? (
-              <div className="flex -space-x-2 overflow-hidden">
-                {selectedUsers.map((user) => (
-                  <Avatar
-                    key={user.email}
-                    className="inline-block border-2 border-background"
-                  >
-                    <AvatarImage src={user.avatar} />
-                    <AvatarFallback>{user.name[0]}</AvatarFallback>
-                  </Avatar>
-                ))}
-              </div>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                Select users to add to this thread.
-              </p>
-            )}
-            <Button
-              disabled={selectedUsers.length < 2}
-              onClick={() => {
-                setOpen(false)
-              }}
-            >
-              Continue
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
diff --git a/apps/www/registry/new-york/example/cards/create-account.tsx b/apps/www/registry/new-york/example/cards/create-account.tsx
deleted file mode 100644
index 1a3394eba31..00000000000
--- a/apps/www/registry/new-york/example/cards/create-account.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client"
-
-import { Icons } from "@/components/icons"
-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 function CardsCreateAccount() {
-  return (
-    <Card>
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl">Create an account</CardTitle>
-        <CardDescription>
-          Enter your email below to create your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="grid grid-cols-2 gap-6">
-          <Button variant="outline">
-            <Icons.gitHub className="mr-2 h-4 w-4" />
-            GitHub
-          </Button>
-          <Button variant="outline">
-            <Icons.google className="mr-2 h-4 w-4" />
-            Google
-          </Button>
-        </div>
-        <div className="relative">
-          <div className="absolute inset-0 flex items-center">
-            <span className="w-full border-t" />
-          </div>
-          <div className="relative flex justify-center text-xs uppercase">
-            <span className="bg-card px-2 text-muted-foreground">
-              Or continue with
-            </span>
-          </div>
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="m@example.com" />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" />
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Create account</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/example/cards/data-table.tsx b/apps/www/registry/new-york/example/cards/data-table.tsx
deleted file mode 100644
index 46606ce769f..00000000000
--- a/apps/www/registry/new-york/example/cards/data-table.tsx
+++ /dev/null
@@ -1,335 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  CaretSortIcon,
-  ChevronDownIcon,
-  DotsHorizontalIcon,
-} from "@radix-ui/react-icons"
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Checkbox } from "@/registry/new-york/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-
-const data: Payment[] = [
-  {
-    id: "m5gr84i9",
-    amount: 316,
-    status: "success",
-    email: "ken99@yahoo.com",
-  },
-  {
-    id: "3u1reuv4",
-    amount: 242,
-    status: "success",
-    email: "Abe45@gmail.com",
-  },
-  {
-    id: "derv1ws0",
-    amount: 837,
-    status: "processing",
-    email: "Monserrat44@gmail.com",
-  },
-  {
-    id: "5kma53ae",
-    amount: 874,
-    status: "success",
-    email: "Silas22@gmail.com",
-  },
-  {
-    id: "bhqecj4p",
-    amount: 721,
-    status: "failed",
-    email: "carmella@hotmail.com",
-  },
-]
-
-export type Payment = {
-  id: string
-  amount: number
-  status: "pending" | "processing" | "success" | "failed"
-  email: string
-}
-
-export const columns: ColumnDef<Payment>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => (
-      <div className="capitalize">{row.getValue("status")}</div>
-    ),
-  },
-  {
-    accessorKey: "email",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Email
-          <CaretSortIcon className="ml-2 h-4 w-4" />
-        </Button>
-      )
-    },
-    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue("amount"))
-
-      // Format the amount as a dollar amount
-      const formatted = new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-      }).format(amount)
-
-      return <div className="text-right font-medium">{formatted}</div>
-    },
-  },
-  {
-    id: "actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      const payment = row.original
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <DotsHorizontalIcon className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(payment.id)}
-            >
-              Copy payment ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>View customer</DropdownMenuItem>
-            <DropdownMenuItem>View payment details</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )
-    },
-  },
-]
-
-export function CardsDataTable() {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  })
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Payments</CardTitle>
-        <CardDescription>Manage your payments.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="mb-4 flex items-center gap-4">
-          <Input
-            placeholder="Filter emails..."
-            value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
-            onChange={(event) =>
-              table.getColumn("email")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm"
-          />
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="ml-auto">
-                Columns <ChevronDownIcon className="ml-2 h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {table
-                .getAllColumns()
-                .filter((column) => column.getCanHide())
-                .map((column) => {
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={column.id}
-                      className="capitalize"
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) =>
-                        column.toggleVisibility(!!value)
-                      }
-                    >
-                      {column.id}
-                    </DropdownMenuCheckboxItem>
-                  )
-                })}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead
-                        key={header.id}
-                        className="[&:has([role=checkbox])]:pl-3"
-                      >
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                      </TableHead>
-                    )
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell
-                        key={cell.id}
-                        className="[&:has([role=checkbox])]:pl-3"
-                      >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
-                    No results.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-        <div className="flex items-center justify-end space-x-2 pt-4">
-          <div className="flex-1 text-sm text-muted-foreground">
-            {table.getFilteredSelectedRowModel().rows.length} of{" "}
-            {table.getFilteredRowModel().rows.length} row(s) selected.
-          </div>
-          <div className="space-x-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => table.previousPage()}
-              disabled={!table.getCanPreviousPage()}
-            >
-              Previous
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => table.nextPage()}
-              disabled={!table.getCanNextPage()}
-            >
-              Next
-            </Button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/example/cards/index.tsx b/apps/www/registry/new-york/example/cards/index.tsx
deleted file mode 100644
index 856358529cd..00000000000
--- a/apps/www/registry/new-york/example/cards/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { CardsActivityGoal } from "@/registry/new-york/example/cards/activity-goal"
-import { CardsCalendar } from "@/registry/new-york/example/cards/calendar"
-import { CardsChat } from "@/registry/new-york/example/cards/chat"
-import { CardsCookieSettings } from "@/registry/new-york/example/cards/cookie-settings"
-import { CardsCreateAccount } from "@/registry/new-york/example/cards/create-account"
-import { CardsDataTable } from "@/registry/new-york/example/cards/data-table"
-import { CardsMetric } from "@/registry/new-york/example/cards/metric"
-import { CardsPaymentMethod } from "@/registry/new-york/example/cards/payment-method"
-import { CardsReportIssue } from "@/registry/new-york/example/cards/report-issue"
-import { CardsShare } from "@/registry/new-york/example/cards/share"
-import { CardsStats } from "@/registry/new-york/example/cards/stats"
-import { CardsTeamMembers } from "@/registry/new-york/example/cards/team-members"
-
-export default function CardsDemo() {
-  return (
-    <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
-      <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
-        <CardsStats />
-        <div className="grid gap-1 sm:grid-cols-[260px_1fr] md:hidden">
-          <CardsCalendar />
-          <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-            <CardsActivityGoal />
-          </div>
-          <div className="pt-3 sm:col-span-2 xl:pt-4">
-            <CardsMetric />
-          </div>
-        </div>
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-          <div className="space-y-4 xl:space-y-4">
-            <CardsTeamMembers />
-            <CardsCookieSettings />
-            <CardsPaymentMethod />
-          </div>
-          <div className="space-y-4 xl:space-y-4">
-            <CardsChat />
-            <CardsCreateAccount />
-            <div className="hidden xl:block">
-              <CardsReportIssue />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
-        <div className="hidden gap-1 sm:grid-cols-[260px_1fr] md:grid">
-          <CardsCalendar />
-          <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
-            <CardsActivityGoal />
-          </div>
-          <div className="pt-3 sm:col-span-2 xl:pt-3">
-            <CardsMetric />
-          </div>
-        </div>
-        <div className="hidden md:block">
-          <CardsDataTable />
-        </div>
-        <CardsShare />
-        <div className="xl:hidden">
-          <CardsReportIssue />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/new-york/example/cards/metric.tsx b/apps/www/registry/new-york/example/cards/metric.tsx
deleted file mode 100644
index 8b788c2f78f..00000000000
--- a/apps/www/registry/new-york/example/cards/metric.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { useTheme } from "next-themes"
-import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts"
-
-import { useConfig } from "@/hooks/use-config"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { baseColors } from "@/registry/registry-base-colors"
-
-const data = [
-  {
-    average: 400,
-    today: 240,
-  },
-  {
-    average: 300,
-    today: 139,
-  },
-  {
-    average: 200,
-    today: 980,
-  },
-  {
-    average: 278,
-    today: 390,
-  },
-  {
-    average: 189,
-    today: 480,
-  },
-  {
-    average: 239,
-    today: 380,
-  },
-  {
-    average: 349,
-    today: 430,
-  },
-]
-
-export function CardsMetric() {
-  const { theme: mode } = useTheme()
-  const [config] = useConfig()
-
-  const baseColor = baseColors.find(
-    (baseColor) => baseColor.name === config.theme
-  )
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Exercise Minutes</CardTitle>
-        <CardDescription>
-          Your exercise minutes are ahead of where you normally are.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-4">
-        <div className="h-[200px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <LineChart
-              data={data}
-              margin={{
-                top: 5,
-                right: 10,
-                left: 10,
-                bottom: 0,
-              }}
-            >
-              <Tooltip
-                content={({ active, payload }) => {
-                  if (active && payload && payload.length) {
-                    return (
-                      <div className="rounded-lg border bg-background p-2 shadow-sm">
-                        <div className="grid grid-cols-2 gap-2">
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Average
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {payload[0].value}
-                            </span>
-                          </div>
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Today
-                            </span>
-                            <span className="font-bold">
-                              {payload[1].value}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    )
-                  }
-
-                  return null
-                }}
-              />
-              <Line
-                type="monotone"
-                strokeWidth={2}
-                dataKey="average"
-                activeDot={{
-                  r: 6,
-                  style: { fill: "var(--theme-primary)", opacity: 0.25 },
-                }}
-                style={
-                  {
-                    stroke: "var(--theme-primary)",
-                    opacity: 0.25,
-                    "--theme-primary": `hsl(${
-                      baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                        .primary
-                    })`,
-                  } as React.CSSProperties
-                }
-              />
-              <Line
-                type="monotone"
-                dataKey="today"
-                strokeWidth={2}
-                activeDot={{
-                  r: 8,
-                  style: { fill: "var(--theme-primary)" },
-                }}
-                style={
-                  {
-                    stroke: "var(--theme-primary)",
-                    "--theme-primary": `hsl(${
-                      baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                        .primary
-                    })`,
-                  } as React.CSSProperties
-                }
-              />
-            </LineChart>
-          </ResponsiveContainer>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/example/cards/report-issue.tsx b/apps/www/registry/new-york/example/cards/report-issue.tsx
deleted file mode 100644
index f33d5ef7951..00000000000
--- a/apps/www/registry/new-york/example/cards/report-issue.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-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"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-import { Textarea } from "@/registry/new-york/ui/textarea"
-
-export function CardsReportIssue() {
-  const id = React.useId()
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Report an issue</CardTitle>
-        <CardDescription>
-          What area are you having problems with?
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-6">
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="grid gap-2">
-            <Label htmlFor={`area-${id}`}>Area</Label>
-            <Select defaultValue="billing">
-              <SelectTrigger id={`area-${id}`} aria-label="Area">
-                <SelectValue placeholder="Select" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="team">Team</SelectItem>
-                <SelectItem value="billing">Billing</SelectItem>
-                <SelectItem value="account">Account</SelectItem>
-                <SelectItem value="deployments">Deployments</SelectItem>
-                <SelectItem value="support">Support</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor={`security-level-${id}`}>Security Level</Label>
-            <Select defaultValue="2">
-              <SelectTrigger
-                id={`security-level-${id}`}
-                className="line-clamp-1 w-full truncate"
-                aria-label="Security Level"
-              >
-                <SelectValue placeholder="Select level" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="1">Severity 1 (Highest)</SelectItem>
-                <SelectItem value="2">Severity 2</SelectItem>
-                <SelectItem value="3">Severity 3</SelectItem>
-                <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor={`subject-${id}`}>Subject</Label>
-          <Input id={`subject-${id}`} placeholder="I need help with..." />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor={`description-${id}`}>Description</Label>
-          <Textarea
-            id={`description-${id}`}
-            placeholder="Please include all information relevant to your issue."
-          />
-        </div>
-      </CardContent>
-      <CardFooter className="justify-between space-x-2">
-        <Button variant="ghost">Cancel</Button>
-        <Button>Submit</Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/example/cards/share.tsx b/apps/www/registry/new-york/example/cards/share.tsx
deleted file mode 100644
index 98870d8c3a2..00000000000
--- a/apps/www/registry/new-york/example/cards/share.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-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"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-import { Separator } from "@/registry/new-york/ui/separator"
-
-export function CardsShare() {
-  return (
-    <Card>
-      <CardHeader className="pb-3">
-        <CardTitle>Share this document</CardTitle>
-        <CardDescription>
-          Anyone with the link can view this document.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="flex space-x-2">
-          <Label htmlFor="link" className="sr-only">
-            Link
-          </Label>
-          <Input
-            id="link"
-            value="http://example.com/link/to/document"
-            readOnly
-          />
-          <Button className="shrink-0">Copy Link</Button>
-        </div>
-        <Separator className="my-4" />
-        <div className="space-y-4">
-          <h4 className="text-sm font-medium">People with access</h4>
-          <div className="grid gap-6">
-            <div className="flex items-center justify-between space-x-4">
-              <div className="flex items-center space-x-4">
-                <Avatar>
-                  <AvatarImage src="/avatars/03.png" alt="Image" />
-                  <AvatarFallback>OM</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-sm font-medium leading-none">
-                    Olivia Martin
-                  </p>
-                  <p className="text-sm text-muted-foreground">m@example.com</p>
-                </div>
-              </div>
-              <Select defaultValue="edit">
-                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                  <SelectValue placeholder="Select" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="edit">Can edit</SelectItem>
-                  <SelectItem value="view">Can view</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-              <div className="flex items-center space-x-4">
-                <Avatar>
-                  <AvatarImage src="/avatars/05.png" alt="Image" />
-                  <AvatarFallback>IN</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-sm font-medium leading-none">
-                    Isabella Nguyen
-                  </p>
-                  <p className="text-sm text-muted-foreground">b@example.com</p>
-                </div>
-              </div>
-              <Select defaultValue="view">
-                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                  <SelectValue placeholder="Select" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="edit">Can edit</SelectItem>
-                  <SelectItem value="view">Can view</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center justify-between space-x-4">
-              <div className="flex items-center space-x-4">
-                <Avatar>
-                  <AvatarImage src="/avatars/01.png" alt="Image" />
-                  <AvatarFallback>SD</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-sm font-medium leading-none">
-                    Sofia Davis
-                  </p>
-                  <p className="text-sm text-muted-foreground">p@example.com</p>
-                </div>
-              </div>
-              <Select defaultValue="view">
-                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
-                  <SelectValue placeholder="Select" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="edit">Can edit</SelectItem>
-                  <SelectItem value="view">Can view</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/example/cards/stats.tsx b/apps/www/registry/new-york/example/cards/stats.tsx
deleted file mode 100644
index 450d06d1aae..00000000000
--- a/apps/www/registry/new-york/example/cards/stats.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { useTheme } from "next-themes"
-import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts"
-
-import { useConfig } from "@/hooks/use-config"
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { baseColors } from "@/registry/registry-base-colors"
-
-const data = [
-  {
-    revenue: 10400,
-    subscription: 240,
-  },
-  {
-    revenue: 14405,
-    subscription: 300,
-  },
-  {
-    revenue: 9400,
-    subscription: 200,
-  },
-  {
-    revenue: 8200,
-    subscription: 278,
-  },
-  {
-    revenue: 7000,
-    subscription: 189,
-  },
-  {
-    revenue: 9600,
-    subscription: 239,
-  },
-  {
-    revenue: 11244,
-    subscription: 278,
-  },
-  {
-    revenue: 26475,
-    subscription: 189,
-  },
-]
-
-export function CardsStats() {
-  const { theme: mode } = useTheme()
-  const [config] = useConfig()
-
-  const baseColor = baseColors.find(
-    (baseColor) => baseColor.name === config.theme
-  )
-
-  return (
-    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-normal">Total Revenue</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold">$15,231.89</div>
-          <p className="text-xs text-muted-foreground">
-            +20.1% from last month
-          </p>
-          <div className="h-[80px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <LineChart
-                data={data}
-                margin={{
-                  top: 5,
-                  right: 10,
-                  left: 10,
-                  bottom: 0,
-                }}
-              >
-                <Line
-                  type="monotone"
-                  strokeWidth={2}
-                  dataKey="revenue"
-                  activeDot={{
-                    r: 6,
-                    style: { fill: "var(--theme-primary)", opacity: 0.25 },
-                  }}
-                  style={
-                    {
-                      stroke: "var(--theme-primary)",
-                      "--theme-primary": `hsl(${
-                        baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                          .primary
-                      })`,
-                    } as React.CSSProperties
-                  }
-                />
-              </LineChart>
-            </ResponsiveContainer>
-          </div>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-normal">Subscriptions</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold">+2350</div>
-          <p className="text-xs text-muted-foreground">
-            +180.1% from last month
-          </p>
-          <div className="mt-4 h-[80px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={data}>
-                <Bar
-                  dataKey="subscription"
-                  style={
-                    {
-                      fill: "var(--theme-primary)",
-                      opacity: 1,
-                      "--theme-primary": `hsl(${
-                        baseColor?.cssVars[mode === "dark" ? "dark" : "light"]
-                          .primary
-                      })`,
-                    } as React.CSSProperties
-                  }
-                />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/apps/www/registry/new-york/example/cards/team-members.tsx b/apps/www/registry/new-york/example/cards/team-members.tsx
deleted file mode 100644
index d754034fe8e..00000000000
--- a/apps/www/registry/new-york/example/cards/team-members.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-"use client"
-
-import { ChevronDownIcon } from "@radix-ui/react-icons"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/new-york/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-
-export function CardsTeamMembers() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Team Members</CardTitle>
-        <CardDescription>
-          Invite your team members to collaborate.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-6">
-        <div className="flex items-center justify-between space-x-4">
-          <div className="flex items-center space-x-4">
-            <Avatar className="h-8 w-8">
-              <AvatarImage src="/avatars/01.png" alt="Image" />
-              <AvatarFallback>OM</AvatarFallback>
-            </Avatar>
-            <div>
-              <p className="text-sm font-medium leading-none">Sofia Davis</p>
-              <p className="text-sm text-muted-foreground">m@example.com</p>
-            </div>
-          </div>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="outline" size="sm" className="ml-auto">
-                Owner{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0" align="end">
-              <Command>
-                <CommandInput placeholder="Select new role..." />
-                <CommandList>
-                  <CommandEmpty>No roles found.</CommandEmpty>
-                  <CommandGroup>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Viewer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view and comment.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Developer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and edit.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Billing</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and manage billing.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Owner</p>
-                      <p className="text-sm text-muted-foreground">
-                        Admin-level access to all resources.
-                      </p>
-                    </CommandItem>
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-        </div>
-        <div className="flex items-center justify-between space-x-4">
-          <div className="flex items-center space-x-4">
-            <Avatar className="h-8 w-8">
-              <AvatarImage src="/avatars/02.png" alt="Image" />
-              <AvatarFallback>JL</AvatarFallback>
-            </Avatar>
-            <div>
-              <p className="text-sm font-medium leading-none">Jackson Lee</p>
-              <p className="text-sm text-muted-foreground">p@example.com</p>
-            </div>
-          </div>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="outline" size="sm" className="ml-auto">
-                Member{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0" align="end">
-              <Command>
-                <CommandInput placeholder="Select new role..." />
-                <CommandList>
-                  <CommandEmpty>No roles found.</CommandEmpty>
-                  <CommandGroup className="p-1.5">
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Viewer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view and comment.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Developer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and edit.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Billing</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and manage billing.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Owner</p>
-                      <p className="text-sm text-muted-foreground">
-                        Admin-level access to all resources.
-                      </p>
-                    </CommandItem>
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-        </div>
-        <div className="flex items-center justify-between space-x-4">
-          <div className="flex items-center space-x-4">
-            <Avatar className="h-8 w-8">
-              <AvatarImage src="/avatars/03.png" alt="Image" />
-              <AvatarFallback>IN</AvatarFallback>
-            </Avatar>
-            <div>
-              <p className="text-sm font-medium leading-none">
-                Isabella Nguyen
-              </p>
-              <p className="text-sm text-muted-foreground">i@example.com</p>
-            </div>
-          </div>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="outline" size="sm" className="ml-auto">
-                Member{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0" align="end">
-              <Command>
-                <CommandInput placeholder="Select new role..." />
-                <CommandList>
-                  <CommandEmpty>No roles found.</CommandEmpty>
-                  <CommandGroup className="p-1.5">
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Viewer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view and comment.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Developer</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and edit.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Billing</p>
-                      <p className="text-sm text-muted-foreground">
-                        Can view, comment and manage billing.
-                      </p>
-                    </CommandItem>
-                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
-                      <p>Owner</p>
-                      <p className="text-sm text-muted-foreground">
-                        Admin-level access to all resources.
-                      </p>
-                    </CommandItem>
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/example/collapsible-demo.tsx b/apps/www/registry/new-york/example/collapsible-demo.tsx
deleted file mode 100644
index b1210ea41c8..00000000000
--- a/apps/www/registry/new-york/example/collapsible-demo.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CaretSortIcon } from "@radix-ui/react-icons"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-
-export default function CollapsibleDemo() {
-  const [isOpen, setIsOpen] = React.useState(false)
-
-  return (
-    <Collapsible
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      className="w-[350px] space-y-2"
-    >
-      <div className="flex items-center justify-between space-x-4 px-4">
-        <h4 className="text-sm font-semibold">
-          @peduarte starred 3 repositories
-        </h4>
-        <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="sm">
-            <CaretSortIcon className="h-4 w-4" />
-            <span className="sr-only">Toggle</span>
-          </Button>
-        </CollapsibleTrigger>
-      </div>
-      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-        @radix-ui/primitives
-      </div>
-      <CollapsibleContent className="space-y-2">
-        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-          @radix-ui/colors
-        </div>
-        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-          @stitches/react
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  )
-}
diff --git a/apps/www/registry/new-york/example/combobox-demo.tsx b/apps/www/registry/new-york/example/combobox-demo.tsx
deleted file mode 100644
index 86ca85984c8..00000000000
--- a/apps/www/registry/new-york/example/combobox-demo.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/new-york/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-
-const frameworks = [
-  {
-    value: "next.js",
-    label: "Next.js",
-  },
-  {
-    value: "sveltekit",
-    label: "SvelteKit",
-  },
-  {
-    value: "nuxt.js",
-    label: "Nuxt.js",
-  },
-  {
-    value: "remix",
-    label: "Remix",
-  },
-  {
-    value: "astro",
-    label: "Astro",
-  },
-]
-
-export default function ComboboxDemo() {
-  const [open, setOpen] = React.useState(false)
-  const [value, setValue] = React.useState("")
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-[200px] justify-between"
-        >
-          {value
-            ? frameworks.find((framework) => framework.value === value)?.label
-            : "Select framework..."}
-          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandInput placeholder="Search framework..." className="h-9" />
-          <CommandList>
-            <CommandEmpty>No framework found.</CommandEmpty>
-            <CommandGroup>
-              {frameworks.map((framework) => (
-                <CommandItem
-                  key={framework.value}
-                  value={framework.value}
-                  onSelect={(currentValue) => {
-                    setValue(currentValue === value ? "" : currentValue)
-                    setOpen(false)
-                  }}
-                >
-                  {framework.label}
-                  <CheckIcon
-                    className={cn(
-                      "ml-auto h-4 w-4",
-                      value === framework.value ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/www/registry/new-york/example/combobox-dropdown-menu.tsx b/apps/www/registry/new-york/example/combobox-dropdown-menu.tsx
deleted file mode 100644
index c27d219e92b..00000000000
--- a/apps/www/registry/new-york/example/combobox-dropdown-menu.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { DotsHorizontalIcon } from "@radix-ui/react-icons"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/new-york/ui/command"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-
-const labels = [
-  "feature",
-  "bug",
-  "enhancement",
-  "documentation",
-  "design",
-  "question",
-  "maintenance",
-]
-
-export default function ComboboxDropdownMenu() {
-  const [label, setLabel] = React.useState("feature")
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
-      <p className="text-sm font-medium leading-none">
-        <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
-          {label}
-        </span>
-        <span className="text-muted-foreground">Create a new project</span>
-      </p>
-      <DropdownMenu open={open} onOpenChange={setOpen}>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm">
-            <DotsHorizontalIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-[200px]">
-          <DropdownMenuLabel>Actions</DropdownMenuLabel>
-          <DropdownMenuGroup>
-            <DropdownMenuItem>Assign to...</DropdownMenuItem>
-            <DropdownMenuItem>Set due date...</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>
-              <DropdownMenuSubContent className="p-0">
-                <Command>
-                  <CommandInput
-                    placeholder="Filter label..."
-                    autoFocus={true}
-                    className="h-9"
-                  />
-                  <CommandList>
-                    <CommandEmpty>No label found.</CommandEmpty>
-                    <CommandGroup>
-                      {labels.map((label) => (
-                        <CommandItem
-                          key={label}
-                          value={label}
-                          onSelect={(value) => {
-                            setLabel(value)
-                            setOpen(false)
-                          }}
-                        >
-                          {label}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem className="text-red-600">
-              Delete
-              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  )
-}
diff --git a/apps/www/registry/new-york/example/combobox-form.tsx b/apps/www/registry/new-york/example/combobox-form.tsx
deleted file mode 100644
index 2508c0c9b61..00000000000
--- a/apps/www/registry/new-york/example/combobox-form.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { cn } from "@/lib/utils"
-import { toast } from "@/registry/new-york/hooks/use-toast"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/new-york/ui/command"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/new-york/ui/form"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-
-const languages = [
-  { label: "English", value: "en" },
-  { label: "French", value: "fr" },
-  { label: "German", value: "de" },
-  { label: "Spanish", value: "es" },
-  { label: "Portuguese", value: "pt" },
-  { label: "Russian", value: "ru" },
-  { label: "Japanese", value: "ja" },
-  { label: "Korean", value: "ko" },
-  { label: "Chinese", value: "zh" },
-] as const
-
-const FormSchema = z.object({
-  language: z.string({
-    required_error: "Please select a language.",
-  }),
-})
-
-export default function ComboboxForm() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-        <FormField
-          control={form.control}
-          name="language"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Language</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        "w-[200px] justify-between",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value
-                        ? languages.find(
-                            (language) => language.value === field.value
-                          )?.label
-                        : "Select language"}
-                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0">
-                  <Command>
-                    <CommandInput
-                      placeholder="Search framework..."
-                      className="h-9"
-                    />
-                    <CommandList>
-                      <CommandEmpty>No framework found.</CommandEmpty>
-                      <CommandGroup>
-                        {languages.map((language) => (
-                          <CommandItem
-                            value={language.label}
-                            key={language.value}
-                            onSelect={() => {
-                              form.setValue("language", language.value)
-                            }}
-                          >
-                            {language.label}
-                            <CheckIcon
-                              className={cn(
-                                "ml-auto h-4 w-4",
-                                language.value === field.value
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            />
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-              <FormDescription>
-                This is the language that will be used in the dashboard.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
diff --git a/apps/www/registry/new-york/example/command-demo.tsx b/apps/www/registry/new-york/example/command-demo.tsx
deleted file mode 100644
index baec81c5006..00000000000
--- a/apps/www/registry/new-york/example/command-demo.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
-  CalendarIcon,
-  EnvelopeClosedIcon,
-  FaceIcon,
-  GearIcon,
-  PersonIcon,
-  RocketIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "@/registry/new-york/ui/command"
-
-export default function CommandDemo() {
-  return (
-    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
-      <CommandInput placeholder="Type a command or search..." />
-      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
-        <CommandGroup heading="Suggestions">
-          <CommandItem>
-            <CalendarIcon className="mr-2 h-4 w-4" />
-            <span>Calendar</span>
-          </CommandItem>
-          <CommandItem>
-            <FaceIcon className="mr-2 h-4 w-4" />
-            <span>Search Emoji</span>
-          </CommandItem>
-          <CommandItem disabled>
-            <RocketIcon className="mr-2 h-4 w-4" />
-            <span>Launch</span>
-          </CommandItem>
-        </CommandGroup>
-        <CommandSeparator />
-        <CommandGroup heading="Settings">
-          <CommandItem>
-            <PersonIcon className="mr-2 h-4 w-4" />
-            <span>Profile</span>
-            <CommandShortcut>⌘P</CommandShortcut>
-          </CommandItem>
-          <CommandItem>
-            <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
-            <span>Mail</span>
-            <CommandShortcut>⌘B</CommandShortcut>
-          </CommandItem>
-          <CommandItem>
-            <GearIcon className="mr-2 h-4 w-4" />
-            <span>Settings</span>
-            <CommandShortcut>⌘S</CommandShortcut>
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  )
-}
diff --git a/apps/www/registry/new-york/example/command-dialog.tsx b/apps/www/registry/new-york/example/command-dialog.tsx
deleted file mode 100644
index a40ff3cb9c7..00000000000
--- a/apps/www/registry/new-york/example/command-dialog.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  CalendarIcon,
-  EnvelopeClosedIcon,
-  FaceIcon,
-  GearIcon,
-  PersonIcon,
-  RocketIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "@/registry/new-york/ui/command"
-
-export default function CommandDialogDemo() {
-  const [open, setOpen] = React.useState(false)
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => document.removeEventListener("keydown", down)
-  }, [])
-
-  return (
-    <>
-      <p className="text-sm text-muted-foreground">
-        Press{" "}
-        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-          <span className="text-xs">⌘</span>J
-        </kbd>
-      </p>
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem>
-              <CalendarIcon className="mr-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandItem>
-            <CommandItem>
-              <FaceIcon className="mr-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandItem>
-            <CommandItem>
-              <RocketIcon className="mr-2 h-4 w-4" />
-              <span>Launch</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading="Settings">
-            <CommandItem>
-              <PersonIcon className="mr-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandShortcut>⌘P</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
-              <span>Mail</span>
-              <CommandShortcut>⌘B</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <GearIcon className="mr-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandShortcut>⌘S</CommandShortcut>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
-    </>
-  )
-}
diff --git a/apps/www/registry/new-york/example/data-table-demo.tsx b/apps/www/registry/new-york/example/data-table-demo.tsx
deleted file mode 100644
index ddb26e881c5..00000000000
--- a/apps/www/registry/new-york/example/data-table-demo.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  CaretSortIcon,
-  ChevronDownIcon,
-  DotsHorizontalIcon,
-} from "@radix-ui/react-icons"
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-
-import { Button } from "@/registry/new-york/ui/button"
-import { Checkbox } from "@/registry/new-york/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-
-const data: Payment[] = [
-  {
-    id: "m5gr84i9",
-    amount: 316,
-    status: "success",
-    email: "ken99@yahoo.com",
-  },
-  {
-    id: "3u1reuv4",
-    amount: 242,
-    status: "success",
-    email: "Abe45@gmail.com",
-  },
-  {
-    id: "derv1ws0",
-    amount: 837,
-    status: "processing",
-    email: "Monserrat44@gmail.com",
-  },
-  {
-    id: "5kma53ae",
-    amount: 874,
-    status: "success",
-    email: "Silas22@gmail.com",
-  },
-  {
-    id: "bhqecj4p",
-    amount: 721,
-    status: "failed",
-    email: "carmella@hotmail.com",
-  },
-]
-
-export type Payment = {
-  id: string
-  amount: number
-  status: "pending" | "processing" | "success" | "failed"
-  email: string
-}
-
-export const columns: ColumnDef<Payment>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => (
-      <div className="capitalize">{row.getValue("status")}</div>
-    ),
-  },
-  {
-    accessorKey: "email",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Email
-          <CaretSortIcon className="ml-2 h-4 w-4" />
-        </Button>
-      )
-    },
-    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue("amount"))
-
-      // Format the amount as a dollar amount
-      const formatted = new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-      }).format(amount)
-
-      return <div className="text-right font-medium">{formatted}</div>
-    },
-  },
-  {
-    id: "actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      const payment = row.original
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <DotsHorizontalIcon className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(payment.id)}
-            >
-              Copy payment ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>View customer</DropdownMenuItem>
-            <DropdownMenuItem>View payment details</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )
-    },
-  },
-]
-
-export default function DataTableDemo() {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  })
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4">
-        <Input
-          placeholder="Filter emails..."
-          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
-          onChange={(event) =>
-            table.getColumn("email")?.setFilterValue(event.target.value)
-          }
-          className="max-w-sm"
-        />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="ml-auto">
-              Columns <ChevronDownIcon className="ml-2 h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {table
-              .getAllColumns()
-              .filter((column) => column.getCanHide())
-              .map((column) => {
-                return (
-                  <DropdownMenuCheckboxItem
-                    key={column.id}
-                    className="capitalize"
-                    checked={column.getIsVisible()}
-                    onCheckedChange={(value) =>
-                      column.toggleVisibility(!!value)
-                    }
-                  >
-                    {column.id}
-                  </DropdownMenuCheckboxItem>
-                )
-              })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() && "selected"}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <div className="flex items-center justify-end space-x-2 py-4">
-        <div className="flex-1 text-sm text-muted-foreground">
-          {table.getFilteredSelectedRowModel().rows.length} of{" "}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
-        </div>
-        <div className="space-x-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            Previous
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            Next
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/new-york/example/date-picker-demo.tsx b/apps/www/registry/new-york/example/date-picker-demo.tsx
deleted file mode 100644
index 50fcc5ba104..00000000000
--- a/apps/www/registry/new-york/example/date-picker-demo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CalendarIcon } from "@radix-ui/react-icons"
-import { format } from "date-fns"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
-import { Calendar } from "@/registry/new-york/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-
-export default function DatePickerDemo() {
-  const [date, setDate] = React.useState<Date>()
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          className={cn(
-            "w-[240px] justify-start text-left font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          {date ? format(date, "PPP") : <span>Pick a date</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          initialFocus
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/www/registry/new-york/example/date-picker-form.tsx b/apps/www/registry/new-york/example/date-picker-form.tsx
deleted file mode 100644
index 31e45a7eea8..00000000000
--- a/apps/www/registry/new-york/example/date-picker-form.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { CalendarIcon } from "@radix-ui/react-icons"
-import { format } from "date-fns"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { cn } from "@/lib/utils"
-import { toast } from "@/registry/new-york/hooks/use-toast"
-import { Button } from "@/registry/new-york/ui/button"
-import { Calendar } from "@/registry/new-york/ui/calendar"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/new-york/ui/form"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-
-const FormSchema = z.object({
-  dob: z.date({
-    required_error: "A date of birth is required.",
-  }),
-})
-
-export default function DatePickerForm() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="dob"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Date of birth</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant={"outline"}
-                      className={cn(
-                        "w-[240px] pl-3 text-left font-normal",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value ? (
-                        format(field.value, "PPP")
-                      ) : (
-                        <span>Pick a date</span>
-                      )}
-                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="start">
-                  <Calendar
-                    mode="single"
-                    selected={field.value}
-                    onSelect={field.onChange}
-                    disabled={(date) =>
-                      date > new Date() || date < new Date("1900-01-01")
-                    }
-                    initialFocus
-                  />
-                </PopoverContent>
-              </Popover>
-              <FormDescription>
-                Your date of birth is used to calculate your age.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
diff --git a/apps/www/registry/new-york/example/date-picker-with-presets.tsx b/apps/www/registry/new-york/example/date-picker-with-presets.tsx
deleted file mode 100644
index 6c7078301e2..00000000000
--- a/apps/www/registry/new-york/example/date-picker-with-presets.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CalendarIcon } from "@radix-ui/react-icons"
-import { addDays, format } from "date-fns"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
-import { Calendar } from "@/registry/new-york/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-
-export default function DatePickerWithPresets() {
-  const [date, setDate] = React.useState<Date>()
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          className={cn(
-            "w-[240px] justify-start text-left font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          {date ? format(date, "PPP") : <span>Pick a date</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        align="start"
-        className="flex w-auto flex-col space-y-2 p-2"
-      >
-        <Select
-          onValueChange={(value) =>
-            setDate(addDays(new Date(), parseInt(value)))
-          }
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="Select" />
-          </SelectTrigger>
-          <SelectContent position="popper">
-            <SelectItem value="0">Today</SelectItem>
-            <SelectItem value="1">Tomorrow</SelectItem>
-            <SelectItem value="3">In 3 days</SelectItem>
-            <SelectItem value="7">In a week</SelectItem>
-          </SelectContent>
-        </Select>
-        <div className="rounded-md border">
-          <Calendar mode="single" selected={date} onSelect={setDate} />
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/www/registry/new-york/example/date-picker-with-range.tsx b/apps/www/registry/new-york/example/date-picker-with-range.tsx
deleted file mode 100644
index 2d987288472..00000000000
--- a/apps/www/registry/new-york/example/date-picker-with-range.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CalendarIcon } from "@radix-ui/react-icons"
-import { addDays, format } from "date-fns"
-import { DateRange } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
-import { Calendar } from "@/registry/new-york/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-
-export default function DatePickerWithRange({
-  className,
-}: React.HTMLAttributes<HTMLDivElement>) {
-  const [date, setDate] = React.useState<DateRange | undefined>({
-    from: new Date(2022, 0, 20),
-    to: addDays(new Date(2022, 0, 20), 20),
-  })
-
-  return (
-    <div className={cn("grid gap-2", className)}>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            id="date"
-            variant={"outline"}
-            className={cn(
-              "w-[300px] justify-start text-left font-normal",
-              !date && "text-muted-foreground"
-            )}
-          >
-            <CalendarIcon className="mr-2 h-4 w-4" />
-            {date?.from ? (
-              date.to ? (
-                <>
-                  {format(date.from, "LLL dd, y")} -{" "}
-                  {format(date.to, "LLL dd, y")}
-                </>
-              ) : (
-                format(date.from, "LLL dd, y")
-              )
-            ) : (
-              <span>Pick a date</span>
-            )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
-          <Calendar
-            initialFocus
-            mode="range"
-            defaultMonth={date?.from}
-            selected={date}
-            onSelect={setDate}
-            numberOfMonths={2}
-          />
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
diff --git a/apps/www/registry/new-york/example/dialog-close-button.tsx b/apps/www/registry/new-york/example/dialog-close-button.tsx
deleted file mode 100644
index 5724000f994..00000000000
--- a/apps/www/registry/new-york/example/dialog-close-button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { CopyIcon } from "@radix-ui/react-icons"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/new-york/ui/dialog"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-
-export default function DialogCloseButton() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Share</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Share link</DialogTitle>
-          <DialogDescription>
-            Anyone who has this link will be able to view this.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex items-center space-x-2">
-          <div className="grid flex-1 gap-2">
-            <Label htmlFor="link" className="sr-only">
-              Link
-            </Label>
-            <Input
-              id="link"
-              defaultValue="https://ui.shadcn.com/docs/installation"
-              readOnly
-            />
-          </div>
-          <Button type="submit" size="sm" className="px-3">
-            <span className="sr-only">Copy</span>
-            <CopyIcon className="h-4 w-4" />
-          </Button>
-        </div>
-        <DialogFooter className="sm:justify-start">
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/www/registry/new-york/example/drawer-demo.tsx b/apps/www/registry/new-york/example/drawer-demo.tsx
deleted file mode 100644
index 14a0c003847..00000000000
--- a/apps/www/registry/new-york/example/drawer-demo.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from "react"
-import { MinusIcon, PlusIcon } from "@radix-ui/react-icons"
-import { Bar, BarChart, ResponsiveContainer } from "recharts"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/new-york/ui/drawer"
-
-const data = [
-  {
-    goal: 400,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 239,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 349,
-  },
-]
-
-export default function DrawerDemo() {
-  const [goal, setGoal] = React.useState(350)
-
-  function onClick(adjustment: number) {
-    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
-  }
-
-  return (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button variant="outline">Open Drawer</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <div className="mx-auto w-full max-w-sm">
-          <DrawerHeader>
-            <DrawerTitle>Move Goal</DrawerTitle>
-            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-          </DrawerHeader>
-          <div className="p-4 pb-0">
-            <div className="flex items-center justify-center space-x-2">
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-8 w-8 shrink-0 rounded-full"
-                onClick={() => onClick(-10)}
-                disabled={goal <= 200}
-              >
-                <MinusIcon className="h-4 w-4" />
-                <span className="sr-only">Decrease</span>
-              </Button>
-              <div className="flex-1 text-center">
-                <div className="text-7xl font-bold tracking-tighter">
-                  {goal}
-                </div>
-                <div className="text-[0.70rem] uppercase text-muted-foreground">
-                  Calories/day
-                </div>
-              </div>
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-8 w-8 shrink-0 rounded-full"
-                onClick={() => onClick(10)}
-                disabled={goal >= 400}
-              >
-                <PlusIcon className="h-4 w-4" />
-                <span className="sr-only">Increase</span>
-              </Button>
-            </div>
-            <div className="mt-3 h-[120px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={data}>
-                  <Bar
-                    dataKey="goal"
-                    style={
-                      {
-                        fill: "hsl(var(--foreground))",
-                        opacity: 0.9,
-                      } as React.CSSProperties
-                    }
-                  />
-                </BarChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-          <DrawerFooter>
-            <Button>Submit</Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  )
-}
diff --git a/apps/www/registry/new-york/example/hover-card-demo.tsx b/apps/www/registry/new-york/example/hover-card-demo.tsx
deleted file mode 100644
index 16e0750ee7f..00000000000
--- a/apps/www/registry/new-york/example/hover-card-demo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { CalendarIcon } from "@radix-ui/react-icons"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/registry/new-york/ui/hover-card"
-
-export default function HoverCardDemo() {
-  return (
-    <HoverCard>
-      <HoverCardTrigger asChild>
-        <Button variant="link">@nextjs</Button>
-      </HoverCardTrigger>
-      <HoverCardContent className="w-80">
-        <div className="flex justify-between space-x-4">
-          <Avatar>
-            <AvatarImage src="https://github.com/vercel.png" />
-            <AvatarFallback>VC</AvatarFallback>
-          </Avatar>
-          <div className="space-y-1">
-            <h4 className="text-sm font-semibold">@nextjs</h4>
-            <p className="text-sm">
-              The React Framework – created and maintained by @vercel.
-            </p>
-            <div className="flex items-center pt-2">
-              <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
-              <span className="text-xs text-muted-foreground">
-                Joined December 2021
-              </span>
-            </div>
-          </div>
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  )
-}
diff --git a/apps/www/registry/new-york/example/mode-toggle.tsx b/apps/www/registry/new-york/example/mode-toggle.tsx
deleted file mode 100644
index 506a906a91b..00000000000
--- a/apps/www/registry/new-york/example/mode-toggle.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
-import { useTheme } from "next-themes"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-
-export default function ModeToggle() {
-  const { setTheme } = useTheme()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/apps/www/registry/new-york/example/resizable-handle.tsx b/apps/www/registry/new-york/example/resizable-handle.tsx
deleted file mode 100644
index 823909de32e..00000000000
--- a/apps/www/registry/new-york/example/resizable-handle.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/registry/new-york/ui/resizable"
-
-export default function ResizableDemo() {
-  return (
-    <ResizablePanelGroup
-      direction="horizontal"
-      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
-    >
-      <ResizablePanel defaultSize={25}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Sidebar</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={75}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Content</span>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/sonner-demo.tsx b/apps/www/registry/new-york/example/sonner-demo.tsx
deleted file mode 100644
index f1ff10d7053..00000000000
--- a/apps/www/registry/new-york/example/sonner-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { toast } from "sonner"
-
-import { Button } from "@/registry/new-york/ui/button"
-
-export default function SonnerDemo() {
-  return (
-    <Button
-      variant="outline"
-      onClick={() =>
-        toast("Event has been created", {
-          description: "Sunday, December 03, 2023 at 9:00 AM",
-          action: {
-            label: "Undo",
-            onClick: () => console.log("Undo"),
-          },
-        })
-      }
-    >
-      Show Toast
-    </Button>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-demo.tsx b/apps/www/registry/new-york/example/toggle-demo.tsx
deleted file mode 100644
index 99a329cf5bc..00000000000
--- a/apps/www/registry/new-york/example/toggle-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontBoldIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleDemo() {
-  return (
-    <Toggle aria-label="Toggle italic">
-      <FontBoldIcon className="h-4 w-4" />
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-disabled.tsx b/apps/www/registry/new-york/example/toggle-disabled.tsx
deleted file mode 100644
index 71db7757d3d..00000000000
--- a/apps/www/registry/new-york/example/toggle-disabled.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { UnderlineIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleDisabled() {
-  return (
-    <Toggle aria-label="Toggle italic" disabled>
-      <UnderlineIcon className="h-4 w-4" />
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-demo.tsx b/apps/www/registry/new-york/example/toggle-group-demo.tsx
deleted file mode 100644
index addc94e1e43..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="multiple">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-disabled.tsx b/apps/www/registry/new-york/example/toggle-group-disabled.tsx
deleted file mode 100644
index c640c184ac0..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-disabled.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="multiple" disabled>
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-lg.tsx b/apps/www/registry/new-york/example/toggle-group-lg.tsx
deleted file mode 100644
index 5dbd23ee36a..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-lg.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="multiple" size="lg">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-outline.tsx b/apps/www/registry/new-york/example/toggle-group-outline.tsx
deleted file mode 100644
index 58400d490ae..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-outline.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="multiple" variant="outline">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-single.tsx b/apps/www/registry/new-york/example/toggle-group-single.tsx
deleted file mode 100644
index cf2c3faf6eb..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-single.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="single">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-sm.tsx b/apps/www/registry/new-york/example/toggle-group-sm.tsx
deleted file mode 100644
index 76b451d94d8..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-sm.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="single" size="sm">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-lg.tsx b/apps/www/registry/new-york/example/toggle-lg.tsx
deleted file mode 100644
index b1c82354ed0..00000000000
--- a/apps/www/registry/new-york/example/toggle-lg.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontItalicIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleLg() {
-  return (
-    <Toggle size="lg" aria-label="Toggle italic">
-      <FontItalicIcon className="h-4 w-4" />
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-outline.tsx b/apps/www/registry/new-york/example/toggle-outline.tsx
deleted file mode 100644
index 21a57eec119..00000000000
--- a/apps/www/registry/new-york/example/toggle-outline.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontItalicIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleOutline() {
-  return (
-    <Toggle variant="outline" aria-label="Toggle italic">
-      <FontItalicIcon className="h-4 w-4" />
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-sm.tsx b/apps/www/registry/new-york/example/toggle-sm.tsx
deleted file mode 100644
index 78861438557..00000000000
--- a/apps/www/registry/new-york/example/toggle-sm.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontItalicIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleSm() {
-  return (
-    <Toggle size="sm" aria-label="Toggle italic">
-      <FontItalicIcon className="h-4 w-4" />
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-with-text.tsx b/apps/www/registry/new-york/example/toggle-with-text.tsx
deleted file mode 100644
index adc93bdd391..00000000000
--- a/apps/www/registry/new-york/example/toggle-with-text.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FontItalicIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleWithText() {
-  return (
-    <Toggle aria-label="Toggle italic">
-      <FontItalicIcon className="mr-2 h-4 w-4" />
-      Italic
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/accordion-demo.tsx b/apps/www/registry/new-york/examples/accordion-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/accordion-demo.tsx
rename to apps/www/registry/new-york/examples/accordion-demo.tsx
diff --git a/apps/www/registry/new-york/examples/alert-demo.tsx b/apps/www/registry/new-york/examples/alert-demo.tsx
new file mode 100644
index 00000000000..e345ee6609c
--- /dev/null
+++ b/apps/www/registry/new-york/examples/alert-demo.tsx
@@ -0,0 +1,19 @@
+import { Terminal } from "lucide-react"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york/ui/alert"
+
+export default function AlertDemo() {
+  return (
+    <Alert>
+      <Terminal className="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the cli.
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/alert-destructive.tsx b/apps/www/registry/new-york/examples/alert-destructive.tsx
new file mode 100644
index 00000000000..cb92ddaf6cd
--- /dev/null
+++ b/apps/www/registry/new-york/examples/alert-destructive.tsx
@@ -0,0 +1,19 @@
+import { AlertCircle } from "lucide-react"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york/ui/alert"
+
+export default function AlertDestructive() {
+  return (
+    <Alert variant="destructive">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/apps/www/registry/new-york/example/alert-dialog-demo.tsx b/apps/www/registry/new-york/examples/alert-dialog-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/alert-dialog-demo.tsx
rename to apps/www/registry/new-york/examples/alert-dialog-demo.tsx
diff --git a/apps/www/registry/new-york/example/aspect-ratio-demo.tsx b/apps/www/registry/new-york/examples/aspect-ratio-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/aspect-ratio-demo.tsx
rename to apps/www/registry/new-york/examples/aspect-ratio-demo.tsx
diff --git a/apps/www/registry/new-york/example/avatar-demo.tsx b/apps/www/registry/new-york/examples/avatar-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/avatar-demo.tsx
rename to apps/www/registry/new-york/examples/avatar-demo.tsx
diff --git a/apps/www/registry/new-york/example/badge-demo.tsx b/apps/www/registry/new-york/examples/badge-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/badge-demo.tsx
rename to apps/www/registry/new-york/examples/badge-demo.tsx
diff --git a/apps/www/registry/new-york/example/badge-destructive.tsx b/apps/www/registry/new-york/examples/badge-destructive.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/badge-destructive.tsx
rename to apps/www/registry/new-york/examples/badge-destructive.tsx
diff --git a/apps/www/registry/new-york/example/badge-outline.tsx b/apps/www/registry/new-york/examples/badge-outline.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/badge-outline.tsx
rename to apps/www/registry/new-york/examples/badge-outline.tsx
diff --git a/apps/www/registry/new-york/example/badge-secondary.tsx b/apps/www/registry/new-york/examples/badge-secondary.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/badge-secondary.tsx
rename to apps/www/registry/new-york/examples/badge-secondary.tsx
diff --git a/apps/www/registry/new-york/example/breadcrumb-demo.tsx b/apps/www/registry/new-york/examples/breadcrumb-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/breadcrumb-demo.tsx
rename to apps/www/registry/new-york/examples/breadcrumb-demo.tsx
diff --git a/apps/www/registry/new-york/examples/breadcrumb-dropdown.tsx b/apps/www/registry/new-york/examples/breadcrumb-dropdown.tsx
new file mode 100644
index 00000000000..4bb35a16652
--- /dev/null
+++ b/apps/www/registry/new-york/examples/breadcrumb-dropdown.tsx
@@ -0,0 +1,50 @@
+import { ChevronDown, Slash } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+export default function BreadcrumbWithDropdown() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <Slash />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1">
+              Components
+              <ChevronDown />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <Slash />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/www/registry/new-york/example/breadcrumb-ellipsis.tsx b/apps/www/registry/new-york/examples/breadcrumb-ellipsis.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/breadcrumb-ellipsis.tsx
rename to apps/www/registry/new-york/examples/breadcrumb-ellipsis.tsx
diff --git a/apps/www/registry/new-york/example/breadcrumb-link.tsx b/apps/www/registry/new-york/examples/breadcrumb-link.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/breadcrumb-link.tsx
rename to apps/www/registry/new-york/examples/breadcrumb-link.tsx
diff --git a/apps/www/registry/new-york/example/breadcrumb-responsive.tsx b/apps/www/registry/new-york/examples/breadcrumb-responsive.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/breadcrumb-responsive.tsx
rename to apps/www/registry/new-york/examples/breadcrumb-responsive.tsx
diff --git a/apps/www/registry/new-york/examples/breadcrumb-separator.tsx b/apps/www/registry/new-york/examples/breadcrumb-separator.tsx
new file mode 100644
index 00000000000..9833dd7c4d7
--- /dev/null
+++ b/apps/www/registry/new-york/examples/breadcrumb-separator.tsx
@@ -0,0 +1,34 @@
+import { Slash } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+
+export default function BreadcrumbWithCustomSeparator() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <Slash />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <Slash />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/www/registry/new-york/example/button-as-child.tsx b/apps/www/registry/new-york/examples/button-as-child.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-as-child.tsx
rename to apps/www/registry/new-york/examples/button-as-child.tsx
diff --git a/apps/www/registry/new-york/example/button-demo.tsx b/apps/www/registry/new-york/examples/button-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-demo.tsx
rename to apps/www/registry/new-york/examples/button-demo.tsx
diff --git a/apps/www/registry/new-york/example/button-destructive.tsx b/apps/www/registry/new-york/examples/button-destructive.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-destructive.tsx
rename to apps/www/registry/new-york/examples/button-destructive.tsx
diff --git a/apps/www/registry/new-york/example/button-ghost.tsx b/apps/www/registry/new-york/examples/button-ghost.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-ghost.tsx
rename to apps/www/registry/new-york/examples/button-ghost.tsx
diff --git a/apps/www/registry/new-york/examples/button-icon.tsx b/apps/www/registry/new-york/examples/button-icon.tsx
new file mode 100644
index 00000000000..8cc643cfafc
--- /dev/null
+++ b/apps/www/registry/new-york/examples/button-icon.tsx
@@ -0,0 +1,11 @@
+import { ChevronRight } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonIcon() {
+  return (
+    <Button variant="outline" size="icon">
+      <ChevronRight />
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/example/button-link.tsx b/apps/www/registry/new-york/examples/button-link.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-link.tsx
rename to apps/www/registry/new-york/examples/button-link.tsx
diff --git a/apps/www/registry/new-york/examples/button-loading.tsx b/apps/www/registry/new-york/examples/button-loading.tsx
new file mode 100644
index 00000000000..fcb51a3b6a5
--- /dev/null
+++ b/apps/www/registry/new-york/examples/button-loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonLoading() {
+  return (
+    <Button disabled>
+      <Loader2 className="animate-spin" />
+      Please wait
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/example/button-outline.tsx b/apps/www/registry/new-york/examples/button-outline.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-outline.tsx
rename to apps/www/registry/new-york/examples/button-outline.tsx
diff --git a/apps/www/registry/new-york/example/button-secondary.tsx b/apps/www/registry/new-york/examples/button-secondary.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-secondary.tsx
rename to apps/www/registry/new-york/examples/button-secondary.tsx
diff --git a/apps/www/registry/new-york/examples/button-with-icon.tsx b/apps/www/registry/new-york/examples/button-with-icon.tsx
new file mode 100644
index 00000000000..a2964f7057e
--- /dev/null
+++ b/apps/www/registry/new-york/examples/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { MailOpen } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonWithIcon() {
+  return (
+    <Button>
+      <MailOpen /> Login with Email
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/example/calendar-demo.tsx b/apps/www/registry/new-york/examples/calendar-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/calendar-demo.tsx
rename to apps/www/registry/new-york/examples/calendar-demo.tsx
diff --git a/apps/www/registry/new-york/examples/calendar-form.tsx b/apps/www/registry/new-york/examples/calendar-form.tsx
new file mode 100644
index 00000000000..03a86465d0f
--- /dev/null
+++ b/apps/www/registry/new-york/examples/calendar-form.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { toast } from "@/registry/new-york/hooks/use-toast"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+const FormSchema = z.object({
+  dob: z.date({
+    required_error: "A date of birth is required.",
+  }),
+})
+
+export default function CalendarForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="dob"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Date of birth</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant={"outline"}
+                      className={cn(
+                        "w-[240px] pl-3 text-left font-normal",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value ? (
+                        format(field.value, "PPP")
+                      ) : (
+                        <span>Pick a date</span>
+                      )}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    disabled={(date) =>
+                      date > new Date() || date < new Date("1900-01-01")
+                    }
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                Your date of birth is used to calculate your age.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/card-demo.tsx b/apps/www/registry/new-york/examples/card-demo.tsx
new file mode 100644
index 00000000000..3878ab475f5
--- /dev/null
+++ b/apps/www/registry/new-york/examples/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellRing, Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Switch } from "@/registry/new-york/ui/switch"
+
+const notifications = [
+  {
+    title: "Your call has been confirmed.",
+    description: "1 hour ago",
+  },
+  {
+    title: "You have a new message!",
+    description: "1 hour ago",
+  },
+  {
+    title: "Your subscription is expiring soon!",
+    description: "2 hours ago",
+  },
+]
+
+type CardProps = React.ComponentProps<typeof Card>
+
+export default function CardDemo({ className, ...props }: CardProps) {
+  return (
+    <Card className={cn("w-[380px]", className)} {...props}>
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>You have 3 unread messages.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className=" flex items-center space-x-4 rounded-md border p-4">
+          <BellRing />
+          <div className="flex-1 space-y-1">
+            <p className="text-sm font-medium leading-none">
+              Push Notifications
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Send notifications to device.
+            </p>
+          </div>
+          <Switch />
+        </div>
+        <div>
+          {notifications.map((notification, index) => (
+            <div
+              key={index}
+              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+            >
+              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+              <div className="space-y-1">
+                <p className="text-sm font-medium leading-none">
+                  {notification.title}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {notification.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">
+          <Check /> Mark all as read
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/example/card-with-form.tsx b/apps/www/registry/new-york/examples/card-with-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/card-with-form.tsx
rename to apps/www/registry/new-york/examples/card-with-form.tsx
diff --git a/apps/www/registry/new-york/example/carousel-api.tsx b/apps/www/registry/new-york/examples/carousel-api.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-api.tsx
rename to apps/www/registry/new-york/examples/carousel-api.tsx
diff --git a/apps/www/registry/new-york/example/carousel-demo.tsx b/apps/www/registry/new-york/examples/carousel-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-demo.tsx
rename to apps/www/registry/new-york/examples/carousel-demo.tsx
diff --git a/apps/www/registry/new-york/example/carousel-orientation.tsx b/apps/www/registry/new-york/examples/carousel-orientation.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-orientation.tsx
rename to apps/www/registry/new-york/examples/carousel-orientation.tsx
diff --git a/apps/www/registry/new-york/example/carousel-plugin.tsx b/apps/www/registry/new-york/examples/carousel-plugin.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-plugin.tsx
rename to apps/www/registry/new-york/examples/carousel-plugin.tsx
diff --git a/apps/www/registry/new-york/example/carousel-size.tsx b/apps/www/registry/new-york/examples/carousel-size.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-size.tsx
rename to apps/www/registry/new-york/examples/carousel-size.tsx
diff --git a/apps/www/registry/new-york/example/carousel-spacing.tsx b/apps/www/registry/new-york/examples/carousel-spacing.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-spacing.tsx
rename to apps/www/registry/new-york/examples/carousel-spacing.tsx
diff --git a/apps/www/registry/new-york/example/chart-bar-demo-axis.tsx b/apps/www/registry/new-york/examples/chart-bar-demo-axis.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-bar-demo-axis.tsx
rename to apps/www/registry/new-york/examples/chart-bar-demo-axis.tsx
diff --git a/apps/www/registry/new-york/example/chart-bar-demo-grid.tsx b/apps/www/registry/new-york/examples/chart-bar-demo-grid.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-bar-demo-grid.tsx
rename to apps/www/registry/new-york/examples/chart-bar-demo-grid.tsx
diff --git a/apps/www/registry/new-york/example/chart-bar-demo-legend.tsx b/apps/www/registry/new-york/examples/chart-bar-demo-legend.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-bar-demo-legend.tsx
rename to apps/www/registry/new-york/examples/chart-bar-demo-legend.tsx
diff --git a/apps/www/registry/new-york/example/chart-bar-demo-tooltip.tsx b/apps/www/registry/new-york/examples/chart-bar-demo-tooltip.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-bar-demo-tooltip.tsx
rename to apps/www/registry/new-york/examples/chart-bar-demo-tooltip.tsx
diff --git a/apps/www/registry/new-york/example/chart-bar-demo.tsx b/apps/www/registry/new-york/examples/chart-bar-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-bar-demo.tsx
rename to apps/www/registry/new-york/examples/chart-bar-demo.tsx
diff --git a/apps/www/registry/new-york/example/chart-tooltip-demo.tsx b/apps/www/registry/new-york/examples/chart-tooltip-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-tooltip-demo.tsx
rename to apps/www/registry/new-york/examples/chart-tooltip-demo.tsx
diff --git a/apps/www/registry/new-york/example/checkbox-demo.tsx b/apps/www/registry/new-york/examples/checkbox-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/checkbox-demo.tsx
rename to apps/www/registry/new-york/examples/checkbox-demo.tsx
diff --git a/apps/www/registry/new-york/example/checkbox-disabled.tsx b/apps/www/registry/new-york/examples/checkbox-disabled.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/checkbox-disabled.tsx
rename to apps/www/registry/new-york/examples/checkbox-disabled.tsx
diff --git a/apps/www/registry/new-york/example/checkbox-form-multiple.tsx b/apps/www/registry/new-york/examples/checkbox-form-multiple.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/checkbox-form-multiple.tsx
rename to apps/www/registry/new-york/examples/checkbox-form-multiple.tsx
diff --git a/apps/www/registry/new-york/example/checkbox-form-single.tsx b/apps/www/registry/new-york/examples/checkbox-form-single.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/checkbox-form-single.tsx
rename to apps/www/registry/new-york/examples/checkbox-form-single.tsx
diff --git a/apps/www/registry/new-york/example/checkbox-with-text.tsx b/apps/www/registry/new-york/examples/checkbox-with-text.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/checkbox-with-text.tsx
rename to apps/www/registry/new-york/examples/checkbox-with-text.tsx
diff --git a/apps/www/registry/new-york/examples/collapsible-demo.tsx b/apps/www/registry/new-york/examples/collapsible-demo.tsx
new file mode 100644
index 00000000000..98e8bcc5bab
--- /dev/null
+++ b/apps/www/registry/new-york/examples/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+
+export default function CollapsibleDemo() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="w-[350px] space-y-2"
+    >
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">
+          @peduarte starred 3 repositories
+        </h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <ChevronsUpDown className="h-4 w-4" />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+        @radix-ui/primitives
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+          @radix-ui/colors
+        </div>
+        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+          @stitches/react
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/combobox-demo.tsx b/apps/www/registry/new-york/examples/combobox-demo.tsx
new file mode 100644
index 00000000000..08a3048752e
--- /dev/null
+++ b/apps/www/registry/new-york/examples/combobox-demo.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+const frameworks = [
+  {
+    value: "next.js",
+    label: "Next.js",
+  },
+  {
+    value: "sveltekit",
+    label: "SvelteKit",
+  },
+  {
+    value: "nuxt.js",
+    label: "Nuxt.js",
+  },
+  {
+    value: "remix",
+    label: "Remix",
+  },
+  {
+    value: "astro",
+    label: "Astro",
+  },
+]
+
+export default function ComboboxDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
+          <ChevronsUpDown className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." className="h-9" />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  {framework.label}
+                  <Check
+                    className={cn(
+                      "ml-auto",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/combobox-dropdown-menu.tsx b/apps/www/registry/new-york/examples/combobox-dropdown-menu.tsx
new file mode 100644
index 00000000000..653d3736ece
--- /dev/null
+++ b/apps/www/registry/new-york/examples/combobox-dropdown-menu.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from "react"
+import { MoreHorizontal } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+const labels = [
+  "feature",
+  "bug",
+  "enhancement",
+  "documentation",
+  "design",
+  "question",
+  "maintenance",
+]
+
+export default function ComboboxDropdownMenu() {
+  const [label, setLabel] = React.useState("feature")
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+      <p className="text-sm font-medium leading-none">
+        <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+          {label}
+        </span>
+        <span className="text-muted-foreground">Create a new project</span>
+      </p>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <MoreHorizontal />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[200px]">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuGroup>
+            <DropdownMenuItem>Assign to...</DropdownMenuItem>
+            <DropdownMenuItem>Set due date...</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="p-0">
+                <Command>
+                  <CommandInput
+                    placeholder="Filter label..."
+                    autoFocus={true}
+                    className="h-9"
+                  />
+                  <CommandList>
+                    <CommandEmpty>No label found.</CommandEmpty>
+                    <CommandGroup>
+                      {labels.map((label) => (
+                        <CommandItem
+                          key={label}
+                          value={label}
+                          onSelect={(value) => {
+                            setLabel(value)
+                            setOpen(false)
+                          }}
+                        >
+                          {label}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="text-red-600">
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/combobox-form.tsx b/apps/www/registry/new-york/examples/combobox-form.tsx
new file mode 100644
index 00000000000..c8fae2cd99d
--- /dev/null
+++ b/apps/www/registry/new-york/examples/combobox-form.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { toast } from "@/registry/new-york/hooks/use-toast"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+const languages = [
+  { label: "English", value: "en" },
+  { label: "French", value: "fr" },
+  { label: "German", value: "de" },
+  { label: "Spanish", value: "es" },
+  { label: "Portuguese", value: "pt" },
+  { label: "Russian", value: "ru" },
+  { label: "Japanese", value: "ja" },
+  { label: "Korean", value: "ko" },
+  { label: "Chinese", value: "zh" },
+] as const
+
+const FormSchema = z.object({
+  language: z.string({
+    required_error: "Please select a language.",
+  }),
+})
+
+export default function ComboboxForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="language"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Language</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "w-[200px] justify-between",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value
+                        ? languages.find(
+                            (language) => language.value === field.value
+                          )?.label
+                        : "Select language"}
+                      <ChevronsUpDown className="opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-[200px] p-0">
+                  <Command>
+                    <CommandInput
+                      placeholder="Search framework..."
+                      className="h-9"
+                    />
+                    <CommandList>
+                      <CommandEmpty>No framework found.</CommandEmpty>
+                      <CommandGroup>
+                        {languages.map((language) => (
+                          <CommandItem
+                            value={language.label}
+                            key={language.value}
+                            onSelect={() => {
+                              form.setValue("language", language.value)
+                            }}
+                          >
+                            {language.label}
+                            <Check
+                              className={cn(
+                                "ml-auto",
+                                language.value === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                This is the language that will be used in the dashboard.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/registry/new-york/example/combobox-popover.tsx b/apps/www/registry/new-york/examples/combobox-popover.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/combobox-popover.tsx
rename to apps/www/registry/new-york/examples/combobox-popover.tsx
diff --git a/apps/www/registry/new-york/example/combobox-responsive.tsx b/apps/www/registry/new-york/examples/combobox-responsive.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/combobox-responsive.tsx
rename to apps/www/registry/new-york/examples/combobox-responsive.tsx
diff --git a/apps/www/registry/new-york/examples/command-demo.tsx b/apps/www/registry/new-york/examples/command-demo.tsx
new file mode 100644
index 00000000000..07076a42bfb
--- /dev/null
+++ b/apps/www/registry/new-york/examples/command-demo.tsx
@@ -0,0 +1,62 @@
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/registry/new-york/ui/command"
+
+export default function CommandDemo() {
+  return (
+    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <Calendar />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <Smile />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem disabled>
+            <Calculator />
+            <span>Calculator</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <User />
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <CreditCard />
+            <span>Billing</span>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Settings />
+            <span>Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/command-dialog.tsx b/apps/www/registry/new-york/examples/command-dialog.tsx
new file mode 100644
index 00000000000..65058d45023
--- /dev/null
+++ b/apps/www/registry/new-york/examples/command-dialog.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react"
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/registry/new-york/ui/command"
+
+export default function CommandDialogDemo() {
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  return (
+    <>
+      <p className="text-sm text-muted-foreground">
+        Press{" "}
+        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+          <span className="text-xs">⌘</span>J
+        </kbd>
+      </p>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
+              <Calendar />
+              <span>Calendar</span>
+            </CommandItem>
+            <CommandItem>
+              <Smile />
+              <span>Search Emoji</span>
+            </CommandItem>
+            <CommandItem>
+              <Calculator />
+              <span>Calculator</span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem>
+              <User />
+              <span>Profile</span>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <CreditCard />
+              <span>Billing</span>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <Settings />
+              <span>Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}
diff --git a/apps/www/registry/new-york/example/context-menu-demo.tsx b/apps/www/registry/new-york/examples/context-menu-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/context-menu-demo.tsx
rename to apps/www/registry/new-york/examples/context-menu-demo.tsx
diff --git a/apps/www/registry/new-york/examples/data-table-demo.tsx b/apps/www/registry/new-york/examples/data-table-demo.tsx
new file mode 100644
index 00000000000..a9d6aec25dc
--- /dev/null
+++ b/apps/www/registry/new-york/examples/data-table-demo.tsx
@@ -0,0 +1,312 @@
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Input } from "@/registry/new-york/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/ui/table"
+
+const data: Payment[] = [
+  {
+    id: "m5gr84i9",
+    amount: 316,
+    status: "success",
+    email: "ken99@example.com",
+  },
+  {
+    id: "3u1reuv4",
+    amount: 242,
+    status: "success",
+    email: "Abe45@example.com",
+  },
+  {
+    id: "derv1ws0",
+    amount: 837,
+    status: "processing",
+    email: "Monserrat44@example.com",
+  },
+  {
+    id: "5kma53ae",
+    amount: 874,
+    status: "success",
+    email: "Silas22@example.com",
+  },
+  {
+    id: "bhqecj4p",
+    amount: 721,
+    status: "failed",
+    email: "carmella@example.com",
+  },
+]
+
+export type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <div className="capitalize">{row.getValue("status")}</div>
+    ),
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <ArrowUpDown />
+        </Button>
+      )
+    },
+    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
+  },
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"))
+
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount)
+
+      return <div className="text-right font-medium">{formatted}</div>
+    },
+  },
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(payment.id)}
+            >
+              Copy payment ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>View customer</DropdownMenuItem>
+            <DropdownMenuItem>View payment details</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]
+
+export default function DataTableDemo() {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center py-4">
+        <Input
+          placeholder="Filter emails..."
+          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Columns <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                )
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="overflow-hidden rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <div className="flex-1 text-sm text-muted-foreground">
+          {table.getFilteredSelectedRowModel().rows.length} of{" "}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </div>
+        <div className="space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/date-picker-demo.tsx b/apps/www/registry/new-york/examples/date-picker-demo.tsx
new file mode 100644
index 00000000000..670e819bb15
--- /dev/null
+++ b/apps/www/registry/new-york/examples/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[240px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/date-picker-form.tsx b/apps/www/registry/new-york/examples/date-picker-form.tsx
new file mode 100644
index 00000000000..bbd91f28586
--- /dev/null
+++ b/apps/www/registry/new-york/examples/date-picker-form.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { toast } from "@/registry/new-york/hooks/use-toast"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+const FormSchema = z.object({
+  dob: z.date({
+    required_error: "A date of birth is required.",
+  }),
+})
+
+export default function DatePickerForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="dob"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Date of birth</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant={"outline"}
+                      className={cn(
+                        "w-[240px] pl-3 text-left font-normal",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value ? (
+                        format(field.value, "PPP")
+                      ) : (
+                        <span>Pick a date</span>
+                      )}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    disabled={(date) =>
+                      date > new Date() || date < new Date("1900-01-01")
+                    }
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                Your date of birth is used to calculate your age.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/date-picker-with-presets.tsx b/apps/www/registry/new-york/examples/date-picker-with-presets.tsx
new file mode 100644
index 00000000000..2c01b0a3650
--- /dev/null
+++ b/apps/www/registry/new-york/examples/date-picker-with-presets.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export default function DatePickerWithPresets() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[240px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="flex w-auto flex-col space-y-2 p-2"
+      >
+        <Select
+          onValueChange={(value) =>
+            setDate(addDays(new Date(), parseInt(value)))
+          }
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent position="popper">
+            <SelectItem value="0">Today</SelectItem>
+            <SelectItem value="1">Tomorrow</SelectItem>
+            <SelectItem value="3">In 3 days</SelectItem>
+            <SelectItem value="7">In a week</SelectItem>
+          </SelectContent>
+        </Select>
+        <div className="rounded-md border">
+          <Calendar mode="single" selected={date} onSelect={setDate} />
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/date-picker-with-range.tsx b/apps/www/registry/new-york/examples/date-picker-with-range.tsx
new file mode 100644
index 00000000000..bf25e4970bb
--- /dev/null
+++ b/apps/www/registry/new-york/examples/date-picker-with-range.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function DatePickerWithRange({
+  className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2022, 0, 20),
+    to: addDays(new Date(2022, 0, 20), 20),
+  })
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn(
+              "w-[300px] justify-start text-left font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "LLL dd, y")} -{" "}
+                  {format(date.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(date.from, "LLL dd, y")
+              )
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/dialog-close-button.tsx b/apps/www/registry/new-york/examples/dialog-close-button.tsx
new file mode 100644
index 00000000000..c28c418ae68
--- /dev/null
+++ b/apps/www/registry/new-york/examples/dialog-close-button.tsx
@@ -0,0 +1,56 @@
+import { Copy } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function DialogCloseButton() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Share</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share link</DialogTitle>
+          <DialogDescription>
+            Anyone who has this link will be able to view this.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center space-x-2">
+          <div className="grid flex-1 gap-2">
+            <Label htmlFor="link" className="sr-only">
+              Link
+            </Label>
+            <Input
+              id="link"
+              defaultValue="https://ui.shadcn.com/docs/installation"
+              readOnly
+            />
+          </div>
+          <Button type="submit" size="sm" className="px-3">
+            <span className="sr-only">Copy</span>
+            <Copy />
+          </Button>
+        </div>
+        <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/registry/new-york/example/dialog-demo.tsx b/apps/www/registry/new-york/examples/dialog-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/dialog-demo.tsx
rename to apps/www/registry/new-york/examples/dialog-demo.tsx
diff --git a/apps/www/registry/new-york/examples/drawer-demo.tsx b/apps/www/registry/new-york/examples/drawer-demo.tsx
new file mode 100644
index 00000000000..809b636ca01
--- /dev/null
+++ b/apps/www/registry/new-york/examples/drawer-demo.tsx
@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
+
+const data = [
+  {
+    goal: 400,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 239,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 349,
+  },
+]
+
+export default function DrawerDemo() {
+  const [goal, setGoal] = React.useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Move Goal</DrawerTitle>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 pb-0">
+            <div className="flex items-center justify-center space-x-2">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(-10)}
+                disabled={goal <= 200}
+              >
+                <Minus />
+                <span className="sr-only">Decrease</span>
+              </Button>
+              <div className="flex-1 text-center">
+                <div className="text-7xl font-bold tracking-tighter">
+                  {goal}
+                </div>
+                <div className="text-[0.70rem] uppercase text-muted-foreground">
+                  Calories/day
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(10)}
+                disabled={goal >= 400}
+              >
+                <Plus />
+                <span className="sr-only">Increase</span>
+              </Button>
+            </div>
+            <div className="mt-3 h-[120px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={data}>
+                  <Bar
+                    dataKey="goal"
+                    style={
+                      {
+                        fill: "hsl(var(--foreground))",
+                        opacity: 0.9,
+                      } as React.CSSProperties
+                    }
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/www/registry/new-york/example/drawer-dialog.tsx b/apps/www/registry/new-york/examples/drawer-dialog.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/drawer-dialog.tsx
rename to apps/www/registry/new-york/examples/drawer-dialog.tsx
diff --git a/apps/www/registry/new-york/example/dropdown-menu-checkboxes.tsx b/apps/www/registry/new-york/examples/dropdown-menu-checkboxes.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/dropdown-menu-checkboxes.tsx
rename to apps/www/registry/new-york/examples/dropdown-menu-checkboxes.tsx
diff --git a/apps/www/registry/new-york/example/dropdown-menu-demo.tsx b/apps/www/registry/new-york/examples/dropdown-menu-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/dropdown-menu-demo.tsx
rename to apps/www/registry/new-york/examples/dropdown-menu-demo.tsx
diff --git a/apps/www/registry/new-york/example/dropdown-menu-radio-group.tsx b/apps/www/registry/new-york/examples/dropdown-menu-radio-group.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/dropdown-menu-radio-group.tsx
rename to apps/www/registry/new-york/examples/dropdown-menu-radio-group.tsx
diff --git a/apps/www/registry/new-york/examples/hover-card-demo.tsx b/apps/www/registry/new-york/examples/hover-card-demo.tsx
new file mode 100644
index 00000000000..1a370a8e090
--- /dev/null
+++ b/apps/www/registry/new-york/examples/hover-card-demo.tsx
@@ -0,0 +1,43 @@
+import { CalendarIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york/ui/hover-card"
+
+export default function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="link">@nextjs</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/vercel.png" />
+            <AvatarFallback>VC</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@nextjs</h4>
+            <p className="text-sm">
+              The React Framework – created and maintained by @vercel.
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
+              <span className="text-xs text-muted-foreground">
+                Joined December 2021
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
diff --git a/apps/www/registry/new-york/example/input-demo.tsx b/apps/www/registry/new-york/examples/input-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-demo.tsx
rename to apps/www/registry/new-york/examples/input-demo.tsx
diff --git a/apps/www/registry/new-york/example/input-disabled.tsx b/apps/www/registry/new-york/examples/input-disabled.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-disabled.tsx
rename to apps/www/registry/new-york/examples/input-disabled.tsx
diff --git a/apps/www/registry/new-york/example/input-file.tsx b/apps/www/registry/new-york/examples/input-file.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-file.tsx
rename to apps/www/registry/new-york/examples/input-file.tsx
diff --git a/apps/www/registry/new-york/example/input-form.tsx b/apps/www/registry/new-york/examples/input-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-form.tsx
rename to apps/www/registry/new-york/examples/input-form.tsx
diff --git a/apps/www/registry/new-york/example/input-otp-controlled.tsx b/apps/www/registry/new-york/examples/input-otp-controlled.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-otp-controlled.tsx
rename to apps/www/registry/new-york/examples/input-otp-controlled.tsx
diff --git a/apps/www/registry/new-york/example/input-otp-demo.tsx b/apps/www/registry/new-york/examples/input-otp-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-otp-demo.tsx
rename to apps/www/registry/new-york/examples/input-otp-demo.tsx
diff --git a/apps/www/registry/new-york/example/input-otp-form.tsx b/apps/www/registry/new-york/examples/input-otp-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-otp-form.tsx
rename to apps/www/registry/new-york/examples/input-otp-form.tsx
diff --git a/apps/www/registry/new-york/example/input-otp-pattern.tsx b/apps/www/registry/new-york/examples/input-otp-pattern.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-otp-pattern.tsx
rename to apps/www/registry/new-york/examples/input-otp-pattern.tsx
diff --git a/apps/www/registry/new-york/example/input-otp-separator.tsx b/apps/www/registry/new-york/examples/input-otp-separator.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-otp-separator.tsx
rename to apps/www/registry/new-york/examples/input-otp-separator.tsx
diff --git a/apps/www/registry/new-york/example/input-with-button.tsx b/apps/www/registry/new-york/examples/input-with-button.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-with-button.tsx
rename to apps/www/registry/new-york/examples/input-with-button.tsx
diff --git a/apps/www/registry/new-york/example/input-with-label.tsx b/apps/www/registry/new-york/examples/input-with-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-with-label.tsx
rename to apps/www/registry/new-york/examples/input-with-label.tsx
diff --git a/apps/www/registry/new-york/example/input-with-text.tsx b/apps/www/registry/new-york/examples/input-with-text.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-with-text.tsx
rename to apps/www/registry/new-york/examples/input-with-text.tsx
diff --git a/apps/www/registry/new-york/example/label-demo.tsx b/apps/www/registry/new-york/examples/label-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/label-demo.tsx
rename to apps/www/registry/new-york/examples/label-demo.tsx
diff --git a/apps/www/registry/new-york/example/menubar-demo.tsx b/apps/www/registry/new-york/examples/menubar-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/menubar-demo.tsx
rename to apps/www/registry/new-york/examples/menubar-demo.tsx
diff --git a/apps/www/registry/new-york/examples/mode-toggle.tsx b/apps/www/registry/new-york/examples/mode-toggle.tsx
new file mode 100644
index 00000000000..b4a498d6637
--- /dev/null
+++ b/apps/www/registry/new-york/examples/mode-toggle.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+export default function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/example/navigation-menu-demo.tsx b/apps/www/registry/new-york/examples/navigation-menu-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/navigation-menu-demo.tsx
rename to apps/www/registry/new-york/examples/navigation-menu-demo.tsx
diff --git a/apps/www/registry/new-york/example/pagination-demo.tsx b/apps/www/registry/new-york/examples/pagination-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/pagination-demo.tsx
rename to apps/www/registry/new-york/examples/pagination-demo.tsx
diff --git a/apps/www/registry/new-york/example/popover-demo.tsx b/apps/www/registry/new-york/examples/popover-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/popover-demo.tsx
rename to apps/www/registry/new-york/examples/popover-demo.tsx
diff --git a/apps/www/registry/new-york/example/progress-demo.tsx b/apps/www/registry/new-york/examples/progress-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/progress-demo.tsx
rename to apps/www/registry/new-york/examples/progress-demo.tsx
diff --git a/apps/www/registry/new-york/example/radio-group-demo.tsx b/apps/www/registry/new-york/examples/radio-group-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/radio-group-demo.tsx
rename to apps/www/registry/new-york/examples/radio-group-demo.tsx
diff --git a/apps/www/registry/new-york/example/radio-group-form.tsx b/apps/www/registry/new-york/examples/radio-group-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/radio-group-form.tsx
rename to apps/www/registry/new-york/examples/radio-group-form.tsx
diff --git a/apps/www/registry/new-york/example/resizable-demo-with-handle.tsx b/apps/www/registry/new-york/examples/resizable-demo-with-handle.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/resizable-demo-with-handle.tsx
rename to apps/www/registry/new-york/examples/resizable-demo-with-handle.tsx
diff --git a/apps/www/registry/new-york/example/resizable-demo.tsx b/apps/www/registry/new-york/examples/resizable-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/resizable-demo.tsx
rename to apps/www/registry/new-york/examples/resizable-demo.tsx
diff --git a/apps/www/registry/new-york/examples/resizable-handle.tsx b/apps/www/registry/new-york/examples/resizable-handle.tsx
new file mode 100644
index 00000000000..9ffc95365ba
--- /dev/null
+++ b/apps/www/registry/new-york/examples/resizable-handle.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york/ui/resizable"
+
+export default function ResizableHandleDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/example/resizable-vertical.tsx b/apps/www/registry/new-york/examples/resizable-vertical.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/resizable-vertical.tsx
rename to apps/www/registry/new-york/examples/resizable-vertical.tsx
diff --git a/apps/www/registry/new-york/example/scroll-area-demo.tsx b/apps/www/registry/new-york/examples/scroll-area-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/scroll-area-demo.tsx
rename to apps/www/registry/new-york/examples/scroll-area-demo.tsx
diff --git a/apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx b/apps/www/registry/new-york/examples/scroll-area-horizontal-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx
rename to apps/www/registry/new-york/examples/scroll-area-horizontal-demo.tsx
diff --git a/apps/www/registry/new-york/example/select-demo.tsx b/apps/www/registry/new-york/examples/select-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/select-demo.tsx
rename to apps/www/registry/new-york/examples/select-demo.tsx
diff --git a/apps/www/registry/new-york/example/select-form.tsx b/apps/www/registry/new-york/examples/select-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/select-form.tsx
rename to apps/www/registry/new-york/examples/select-form.tsx
diff --git a/apps/www/registry/new-york/example/select-scrollable.tsx b/apps/www/registry/new-york/examples/select-scrollable.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/select-scrollable.tsx
rename to apps/www/registry/new-york/examples/select-scrollable.tsx
diff --git a/apps/www/registry/new-york/example/separator-demo.tsx b/apps/www/registry/new-york/examples/separator-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/separator-demo.tsx
rename to apps/www/registry/new-york/examples/separator-demo.tsx
diff --git a/apps/www/registry/new-york/example/sheet-demo.tsx b/apps/www/registry/new-york/examples/sheet-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/sheet-demo.tsx
rename to apps/www/registry/new-york/examples/sheet-demo.tsx
diff --git a/apps/www/registry/new-york/example/sheet-side.tsx b/apps/www/registry/new-york/examples/sheet-side.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/sheet-side.tsx
rename to apps/www/registry/new-york/examples/sheet-side.tsx
diff --git a/apps/www/registry/new-york/example/skeleton-card.tsx b/apps/www/registry/new-york/examples/skeleton-card.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/skeleton-card.tsx
rename to apps/www/registry/new-york/examples/skeleton-card.tsx
diff --git a/apps/www/registry/new-york/example/skeleton-demo.tsx b/apps/www/registry/new-york/examples/skeleton-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/skeleton-demo.tsx
rename to apps/www/registry/new-york/examples/skeleton-demo.tsx
diff --git a/apps/www/registry/new-york/example/slider-demo.tsx b/apps/www/registry/new-york/examples/slider-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/slider-demo.tsx
rename to apps/www/registry/new-york/examples/slider-demo.tsx
diff --git a/apps/www/registry/new-york/examples/sonner-demo.tsx b/apps/www/registry/new-york/examples/sonner-demo.tsx
new file mode 100644
index 00000000000..c657fda7c1a
--- /dev/null
+++ b/apps/www/registry/new-york/examples/sonner-demo.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { toast } from "sonner"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function SonnerDemo() {
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast("Event has been created", {
+          description: "Sunday, December 03, 2023 at 9:00 AM",
+          action: {
+            label: "Undo",
+            onClick: () => console.log("Undo"),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/example/switch-demo.tsx b/apps/www/registry/new-york/examples/switch-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/switch-demo.tsx
rename to apps/www/registry/new-york/examples/switch-demo.tsx
diff --git a/apps/www/registry/new-york/example/switch-form.tsx b/apps/www/registry/new-york/examples/switch-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/switch-form.tsx
rename to apps/www/registry/new-york/examples/switch-form.tsx
diff --git a/apps/www/registry/new-york/example/table-demo.tsx b/apps/www/registry/new-york/examples/table-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/table-demo.tsx
rename to apps/www/registry/new-york/examples/table-demo.tsx
diff --git a/apps/www/registry/new-york/example/tabs-demo.tsx b/apps/www/registry/new-york/examples/tabs-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/tabs-demo.tsx
rename to apps/www/registry/new-york/examples/tabs-demo.tsx
diff --git a/apps/www/registry/new-york/example/textarea-demo.tsx b/apps/www/registry/new-york/examples/textarea-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-demo.tsx
rename to apps/www/registry/new-york/examples/textarea-demo.tsx
diff --git a/apps/www/registry/new-york/example/textarea-disabled.tsx b/apps/www/registry/new-york/examples/textarea-disabled.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-disabled.tsx
rename to apps/www/registry/new-york/examples/textarea-disabled.tsx
diff --git a/apps/www/registry/new-york/example/textarea-form.tsx b/apps/www/registry/new-york/examples/textarea-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-form.tsx
rename to apps/www/registry/new-york/examples/textarea-form.tsx
diff --git a/apps/www/registry/new-york/example/textarea-with-button.tsx b/apps/www/registry/new-york/examples/textarea-with-button.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-with-button.tsx
rename to apps/www/registry/new-york/examples/textarea-with-button.tsx
diff --git a/apps/www/registry/new-york/example/textarea-with-label.tsx b/apps/www/registry/new-york/examples/textarea-with-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-with-label.tsx
rename to apps/www/registry/new-york/examples/textarea-with-label.tsx
diff --git a/apps/www/registry/new-york/example/textarea-with-text.tsx b/apps/www/registry/new-york/examples/textarea-with-text.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-with-text.tsx
rename to apps/www/registry/new-york/examples/textarea-with-text.tsx
diff --git a/apps/www/registry/new-york/example/toast-demo.tsx b/apps/www/registry/new-york/examples/toast-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/toast-demo.tsx
rename to apps/www/registry/new-york/examples/toast-demo.tsx
diff --git a/apps/www/registry/new-york/example/toast-destructive.tsx b/apps/www/registry/new-york/examples/toast-destructive.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/toast-destructive.tsx
rename to apps/www/registry/new-york/examples/toast-destructive.tsx
diff --git a/apps/www/registry/new-york/example/toast-simple.tsx b/apps/www/registry/new-york/examples/toast-simple.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/toast-simple.tsx
rename to apps/www/registry/new-york/examples/toast-simple.tsx
diff --git a/apps/www/registry/new-york/example/toast-with-action.tsx b/apps/www/registry/new-york/examples/toast-with-action.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/toast-with-action.tsx
rename to apps/www/registry/new-york/examples/toast-with-action.tsx
diff --git a/apps/www/registry/new-york/example/toast-with-title.tsx b/apps/www/registry/new-york/examples/toast-with-title.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/toast-with-title.tsx
rename to apps/www/registry/new-york/examples/toast-with-title.tsx
diff --git a/apps/www/registry/new-york/examples/toggle-demo.tsx b/apps/www/registry/new-york/examples/toggle-demo.tsx
new file mode 100644
index 00000000000..d157f88553e
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleDemo() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-disabled.tsx b/apps/www/registry/new-york/examples/toggle-disabled.tsx
new file mode 100644
index 00000000000..f174b1b2ca3
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleDisabled() {
+  return (
+    <Toggle aria-label="Toggle italic" disabled>
+      <Underline className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-group-demo.tsx b/apps/www/registry/new-york/examples/toggle-group-demo.tsx
new file mode 100644
index 00000000000..b3ecd262188
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-demo.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-group-disabled.tsx b/apps/www/registry/new-york/examples/toggle-group-disabled.tsx
new file mode 100644
index 00000000000..7116d792003
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-disabled.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" disabled>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-group-lg.tsx b/apps/www/registry/new-york/examples/toggle-group-lg.tsx
new file mode 100644
index 00000000000..5fc6b585873
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-lg.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" size="lg">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-group-outline.tsx b/apps/www/registry/new-york/examples/toggle-group-outline.tsx
new file mode 100644
index 00000000000..c4b42acb888
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-outline.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" variant="outline">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-group-single.tsx b/apps/www/registry/new-york/examples/toggle-group-single.tsx
new file mode 100644
index 00000000000..ca317159eab
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-single.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="single">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-group-sm.tsx b/apps/www/registry/new-york/examples/toggle-group-sm.tsx
new file mode 100644
index 00000000000..6efe37d759a
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-sm.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="single" size="sm">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-lg.tsx b/apps/www/registry/new-york/examples/toggle-lg.tsx
new file mode 100644
index 00000000000..ded4b53b6e7
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-lg.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleLg() {
+  return (
+    <Toggle size="lg" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-outline.tsx b/apps/www/registry/new-york/examples/toggle-outline.tsx
new file mode 100644
index 00000000000..642d7388de0
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-outline.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleOutline() {
+  return (
+    <Toggle variant="outline" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-sm.tsx b/apps/www/registry/new-york/examples/toggle-sm.tsx
new file mode 100644
index 00000000000..ddcec64aa88
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-sm.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleSm() {
+  return (
+    <Toggle size="sm" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-with-text.tsx b/apps/www/registry/new-york/examples/toggle-with-text.tsx
new file mode 100644
index 00000000000..09de28f5989
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleWithText() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Italic />
+      Italic
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/example/tooltip-demo.tsx b/apps/www/registry/new-york/examples/tooltip-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/tooltip-demo.tsx
rename to apps/www/registry/new-york/examples/tooltip-demo.tsx
diff --git a/apps/www/registry/new-york/example/typography-blockquote.tsx b/apps/www/registry/new-york/examples/typography-blockquote.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-blockquote.tsx
rename to apps/www/registry/new-york/examples/typography-blockquote.tsx
diff --git a/apps/www/registry/new-york/example/typography-demo.tsx b/apps/www/registry/new-york/examples/typography-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-demo.tsx
rename to apps/www/registry/new-york/examples/typography-demo.tsx
diff --git a/apps/www/registry/new-york/example/typography-h1.tsx b/apps/www/registry/new-york/examples/typography-h1.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-h1.tsx
rename to apps/www/registry/new-york/examples/typography-h1.tsx
diff --git a/apps/www/registry/new-york/examples/typography-h2.tsx b/apps/www/registry/new-york/examples/typography-h2.tsx
new file mode 100644
index 00000000000..ea794416542
--- /dev/null
+++ b/apps/www/registry/new-york/examples/typography-h2.tsx
@@ -0,0 +1,7 @@
+export default function TypographyH2() {
+  return (
+    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
+      The People of the Kingdom
+    </h2>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/typography-h3.tsx b/apps/www/registry/new-york/examples/typography-h3.tsx
new file mode 100644
index 00000000000..4e8a1859cf5
--- /dev/null
+++ b/apps/www/registry/new-york/examples/typography-h3.tsx
@@ -0,0 +1,7 @@
+export default function TypographyH3() {
+  return (
+    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+      The Joke Tax
+    </h3>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/typography-h4.tsx b/apps/www/registry/new-york/examples/typography-h4.tsx
new file mode 100644
index 00000000000..583516625ea
--- /dev/null
+++ b/apps/www/registry/new-york/examples/typography-h4.tsx
@@ -0,0 +1,7 @@
+export default function TypographyH4() {
+  return (
+    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
+      People stopped telling jokes
+    </h4>
+  )
+}
diff --git a/apps/www/registry/new-york/example/typography-inline-code.tsx b/apps/www/registry/new-york/examples/typography-inline-code.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-inline-code.tsx
rename to apps/www/registry/new-york/examples/typography-inline-code.tsx
diff --git a/apps/www/registry/new-york/examples/typography-large.tsx b/apps/www/registry/new-york/examples/typography-large.tsx
new file mode 100644
index 00000000000..944f4478d38
--- /dev/null
+++ b/apps/www/registry/new-york/examples/typography-large.tsx
@@ -0,0 +1,3 @@
+export default function TypographyLarge() {
+  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
+}
diff --git a/apps/www/registry/new-york/example/typography-lead.tsx b/apps/www/registry/new-york/examples/typography-lead.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-lead.tsx
rename to apps/www/registry/new-york/examples/typography-lead.tsx
diff --git a/apps/www/registry/new-york/examples/typography-list.tsx b/apps/www/registry/new-york/examples/typography-list.tsx
new file mode 100644
index 00000000000..a814f661f0b
--- /dev/null
+++ b/apps/www/registry/new-york/examples/typography-list.tsx
@@ -0,0 +1,9 @@
+export default function TypographyList() {
+  return (
+    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+      <li>1st level of puns: 5 gold coins</li>
+      <li>2nd level of jokes: 10 gold coins</li>
+      <li>3rd level of one-liners : 20 gold coins</li>
+    </ul>
+  )
+}
diff --git a/apps/www/registry/new-york/example/typography-muted.tsx b/apps/www/registry/new-york/examples/typography-muted.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-muted.tsx
rename to apps/www/registry/new-york/examples/typography-muted.tsx
diff --git a/apps/www/registry/new-york/examples/typography-p.tsx b/apps/www/registry/new-york/examples/typography-p.tsx
new file mode 100644
index 00000000000..88fd4795485
--- /dev/null
+++ b/apps/www/registry/new-york/examples/typography-p.tsx
@@ -0,0 +1,8 @@
+export default function TypographyP() {
+  return (
+    <p className="leading-7 [&:not(:first-child)]:mt-6">
+      The king, seeing how much happier his subjects were, realized the error of
+      his ways and repealed the joke tax.
+    </p>
+  )
+}
diff --git a/apps/www/registry/new-york/example/typography-small.tsx b/apps/www/registry/new-york/examples/typography-small.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-small.tsx
rename to apps/www/registry/new-york/examples/typography-small.tsx
diff --git a/apps/www/registry/new-york/example/typography-table.tsx b/apps/www/registry/new-york/examples/typography-table.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-table.tsx
rename to apps/www/registry/new-york/examples/typography-table.tsx
diff --git a/apps/www/registry/new-york/hooks/use-mobile.tsx b/apps/www/registry/new-york/hooks/use-mobile.tsx
index f2589b47133..2b0fe1dfef3 100644
--- a/apps/www/registry/new-york/hooks/use-mobile.tsx
+++ b/apps/www/registry/new-york/hooks/use-mobile.tsx
@@ -15,5 +15,5 @@ export function useIsMobile() {
     return () => mql.removeEventListener("change", onChange)
   }, [])
 
-  return isMobile
+  return !!isMobile
 }
diff --git a/apps/www/registry/new-york/block/charts-01.tsx b/apps/www/registry/new-york/internal/charts-01.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/charts-01.tsx
rename to apps/www/registry/new-york/internal/charts-01.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-01.tsx b/apps/www/registry/new-york/internal/dashboard-01.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-01.tsx
rename to apps/www/registry/new-york/internal/dashboard-01.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-02.tsx b/apps/www/registry/new-york/internal/dashboard-02.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-02.tsx
rename to apps/www/registry/new-york/internal/dashboard-02.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-03.tsx b/apps/www/registry/new-york/internal/dashboard-03.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-03.tsx
rename to apps/www/registry/new-york/internal/dashboard-03.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-04.tsx b/apps/www/registry/new-york/internal/dashboard-04.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-04.tsx
rename to apps/www/registry/new-york/internal/dashboard-04.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-05.tsx b/apps/www/registry/new-york/internal/dashboard-05.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-05.tsx
rename to apps/www/registry/new-york/internal/dashboard-05.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-06.tsx b/apps/www/registry/new-york/internal/dashboard-06.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-06.tsx
rename to apps/www/registry/new-york/internal/dashboard-06.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-07.tsx b/apps/www/registry/new-york/internal/dashboard-07.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-07.tsx
rename to apps/www/registry/new-york/internal/dashboard-07.tsx
diff --git a/apps/www/registry/new-york/internal/login-01.tsx b/apps/www/registry/new-york/internal/login-01.tsx
new file mode 100644
index 00000000000..6e1e92cbca9
--- /dev/null
+++ b/apps/www/registry/new-york/internal/login-01.tsx
@@ -0,0 +1,68 @@
+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 simple login form."
+
+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">
+      <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>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-01.tsx b/apps/www/registry/new-york/internal/sidebar-01.tsx
new file mode 100644
index 00000000000..b897d949617
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-01.tsx
@@ -0,0 +1,285 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Label } from "@/registry/new-york/ui/label"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description =
+  "A simple sidebar with navigation grouped by section."
+
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Component() {
+  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])
+
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                    size="lg"
+                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                    <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                      <GalleryVerticalEnd className="size-4" />
+                    </div>
+                    <div className="flex flex-col gap-0.5 leading-none">
+                      <span className="font-semibold">Documentation</span>
+                      <span className="">v{selectedVersion}</span>
+                    </div>
+                    <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width]"
+                  align="start"
+                >
+                  {data.versions.map((version) => (
+                    <DropdownMenuItem
+                      key={version}
+                      onSelect={() => setSelectedVersion(version)}
+                    >
+                      v{version}{" "}
+                      {version === selectedVersion && (
+                        <Check className="ml-auto" />
+                      )}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+          <form>
+            <SidebarGroup className="py-0">
+              <SidebarGroupContent className="relative">
+                <Label htmlFor="search" className="sr-only">
+                  Search
+                </Label>
+                <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+                />
+                <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </form>
+        </SidebarHeader>
+        <SidebarContent>
+          {/* We create a SidebarGroup for each parent. */}
+          {data.navMain.map((item) => (
+            <SidebarGroup key={item.title}>
+              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {item.items.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton asChild isActive={item.isActive}>
+                        <a href={item.url}>{item.title}</a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </SidebarContent>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-02.tsx b/apps/www/registry/new-york/internal/sidebar-02.tsx
new file mode 100644
index 00000000000..f35ed2871a7
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-02.tsx
@@ -0,0 +1,323 @@
+"use client"
+
+import * as React from "react"
+import {
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  GalleryVerticalEnd,
+  Search,
+} from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Label } from "@/registry/new-york/ui/label"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with collapsible sections."
+
+// This is sample data.
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Component() {
+  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])
+
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                    size="lg"
+                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                    <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                      <GalleryVerticalEnd className="size-4" />
+                    </div>
+                    <div className="flex flex-col gap-0.5 leading-none">
+                      <span className="font-semibold">Documentation</span>
+                      <span className="">v{selectedVersion}</span>
+                    </div>
+                    <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width]"
+                  align="start"
+                >
+                  {data.versions.map((version) => (
+                    <DropdownMenuItem
+                      key={version}
+                      onSelect={() => setSelectedVersion(version)}
+                    >
+                      v{version}{" "}
+                      {version === selectedVersion && (
+                        <Check className="ml-auto" />
+                      )}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+          <form>
+            <SidebarGroup className="py-0">
+              <SidebarGroupContent className="relative">
+                <Label htmlFor="search" className="sr-only">
+                  Search
+                </Label>
+                <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+                />
+                <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </form>
+        </SidebarHeader>
+        <SidebarContent className="gap-0">
+          {/* We create a collapsible SidebarGroup for each parent. */}
+          {data.navMain.map((item) => (
+            <Collapsible
+              key={item.title}
+              title={item.title}
+              defaultOpen
+              className="group/collapsible"
+            >
+              <SidebarGroup>
+                <SidebarGroupLabel
+                  asChild
+                  className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                >
+                  <CollapsibleTrigger>
+                    {item.title}{" "}
+                    <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  </CollapsibleTrigger>
+                </SidebarGroupLabel>
+                <CollapsibleContent>
+                  <SidebarGroupContent>
+                    <SidebarMenu>
+                      {item.items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                          <SidebarMenuButton asChild isActive={item.isActive}>
+                            <a href={item.url}>{item.title}</a>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </CollapsibleContent>
+              </SidebarGroup>
+            </Collapsible>
+          ))}
+        </SidebarContent>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-03.tsx b/apps/www/registry/new-york/internal/sidebar-03.tsx
new file mode 100644
index 00000000000..a1d267cb663
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-03.tsx
@@ -0,0 +1,270 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Label } from "@/registry/new-york/ui/label"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with nested navigation."
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Component() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild>
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  <div className="flex flex-col gap-0.5 leading-none">
+                    <span className="font-semibold">Documentation</span>
+                    <span className="">v1.0.0</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url} className="font-medium">
+                      {item.title}
+                    </a>
+                  </SidebarMenuButton>
+                  {item.items?.length ? (
+                    <SidebarMenuSub>
+                      {item.items.map((item) => (
+                        <SidebarMenuSubItem key={item.title}>
+                          <SidebarMenuSubButton
+                            asChild
+                            isActive={item.isActive}
+                          >
+                            <a href={item.url}>{item.title}</a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  ) : null}
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+          <div className="flex items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-04.tsx b/apps/www/registry/new-york/internal/sidebar-04.tsx
new file mode 100644
index 00000000000..703149bb7fb
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-04.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A floating sidebar with submenus."
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Component() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "19rem",
+        } as React.CSSProperties
+      }
+    >
+      <Sidebar variant="floating">
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild>
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  <div className="flex flex-col gap-0.5 leading-none">
+                    <span className="font-semibold">Documentation</span>
+                    <span className="">v1.0.0</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarMenu className="gap-2">
+              {data.navMain.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url} className="font-medium">
+                      {item.title}
+                    </a>
+                  </SidebarMenuButton>
+                  {item.items?.length ? (
+                    <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
+                      {item.items.map((item) => (
+                        <SidebarMenuSubItem key={item.title}>
+                          <SidebarMenuSubButton
+                            asChild
+                            isActive={item.isActive}
+                          >
+                            <a href={item.url}>{item.title}</a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  ) : null}
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-05.tsx b/apps/www/registry/new-york/internal/sidebar-05.tsx
new file mode 100644
index 00000000000..cc8b153e3d6
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-05.tsx
@@ -0,0 +1,288 @@
+import { GalleryVerticalEnd, Minus, Plus, Search } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import { Label } from "@/registry/new-york/ui/label"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with collapsible submenus."
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Component() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild>
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  <div className="flex flex-col gap-0.5 leading-none">
+                    <span className="font-semibold">Documentation</span>
+                    <span className="">v1.0.0</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+          <form>
+            <SidebarGroup className="py-0">
+              <SidebarGroupContent className="relative">
+                <Label htmlFor="search" className="sr-only">
+                  Search
+                </Label>
+                <SidebarInput
+                  id="search"
+                  placeholder="Search the docs..."
+                  className="pl-8"
+                />
+                <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </form>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarMenu>
+              {data.navMain.map((item, index) => (
+                <Collapsible
+                  key={item.title}
+                  defaultOpen={index === 1}
+                  className="group/collapsible"
+                >
+                  <SidebarMenuItem>
+                    <CollapsibleTrigger asChild>
+                      <SidebarMenuButton>
+                        {item.title}{" "}
+                        <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
+                        <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                      </SidebarMenuButton>
+                    </CollapsibleTrigger>
+                    {item.items?.length ? (
+                      <CollapsibleContent>
+                        <SidebarMenuSub>
+                          {item.items.map((item) => (
+                            <SidebarMenuSubItem key={item.title}>
+                              <SidebarMenuSubButton
+                                asChild
+                                isActive={item.isActive}
+                              >
+                                <a href={item.url}>{item.title}</a>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    ) : null}
+                  </SidebarMenuItem>
+                </Collapsible>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-06.tsx b/apps/www/registry/new-york/internal/sidebar-06.tsx
new file mode 100644
index 00000000000..2231314d4bf
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-06.tsx
@@ -0,0 +1,287 @@
+"use client"
+
+import { GalleryVerticalEnd, MoreHorizontal } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with submenus as dropdowns."
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild>
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <GalleryVerticalEnd className="size-4" />
+                  </div>
+                  <div className="flex flex-col gap-0.5 leading-none">
+                    <span className="font-semibold">Documentation</span>
+                    <span className="">v1.0.0</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <DropdownMenu key={item.title}>
+                  <SidebarMenuItem>
+                    <DropdownMenuTrigger asChild>
+                      <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                        {item.title} <MoreHorizontal className="ml-auto" />
+                      </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    {item.items?.length ? (
+                      <DropdownMenuContent
+                        side="bottom"
+                        align="end"
+                        className="min-w-56 rounded-lg"
+                      >
+                        {item.items.map((item) => (
+                          <DropdownMenuItem asChild key={item.title}>
+                            <a href={item.url}>{item.title}</a>
+                          </DropdownMenuItem>
+                        ))}
+                      </DropdownMenuContent>
+                    ) : null}
+                  </SidebarMenuItem>
+                </DropdownMenu>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <div className="p-1">
+            <Card className="shadow-none">
+              <form>
+                <CardHeader className="p-4 pb-0">
+                  <CardTitle className="text-sm">
+                    Subscribe to our newsletter
+                  </CardTitle>
+                  <CardDescription>
+                    Opt-in to receive updates and news about the sidebar.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="grid gap-2.5 p-4">
+                  <SidebarInput type="email" placeholder="Email" />
+                  <Button
+                    className="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none"
+                    size="sm"
+                  >
+                    Subscribe
+                  </Button>
+                </CardContent>
+              </form>
+            </Card>
+          </div>
+        </SidebarFooter>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-07.tsx b/apps/www/registry/new-york/internal/sidebar-07.tsx
new file mode 100644
index 00000000000..55825e34b91
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-07.tsx
@@ -0,0 +1,486 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  BadgeCheck,
+  Bell,
+  BookOpen,
+  Bot,
+  ChevronRight,
+  ChevronsUpDown,
+  Command,
+  CreditCard,
+  Folder,
+  Forward,
+  Frame,
+  GalleryVerticalEnd,
+  LogOut,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Plus,
+  Settings2,
+  Sparkles,
+  SquareTerminal,
+  Trash2,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar that collapses to icons."
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: GalleryVerticalEnd,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export default function Page() {
+  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarProvider>
+      <Sidebar collapsible="icon">
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                    size="lg"
+                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                    <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                      <activeTeam.logo className="size-4" />
+                    </div>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">
+                        {activeTeam.name}
+                      </span>
+                      <span className="truncate text-xs">
+                        {activeTeam.plan}
+                      </span>
+                    </div>
+                    <ChevronsUpDown className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  align="start"
+                  side="bottom"
+                  sideOffset={4}
+                >
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                    Teams
+                  </DropdownMenuLabel>
+                  {data.teams.map((team, index) => (
+                    <DropdownMenuItem
+                      key={team.name}
+                      onClick={() => setActiveTeam(team)}
+                      className="gap-2 p-2"
+                    >
+                      <div className="flex size-6 items-center justify-center rounded-sm border">
+                        <team.logo className="size-4 shrink-0" />
+                      </div>
+                      {team.name}
+                      <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="gap-2 p-2">
+                    <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                      <Plus className="size-4" />
+                    </div>
+                    <div className="font-medium text-muted-foreground">
+                      Add team
+                    </div>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Platform</SidebarGroupLabel>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+                  className="group/collapsible"
+                >
+                  <SidebarMenuItem>
+                    <CollapsibleTrigger asChild>
+                      <SidebarMenuButton tooltip={item.title}>
+                        {item.icon && <item.icon />}
+                        <span>{item.title}</span>
+                        <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                      </SidebarMenuButton>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <SidebarMenuSub>
+                        {item.items?.map((subItem) => (
+                          <SidebarMenuSubItem key={subItem.title}>
+                            <SidebarMenuSubButton asChild>
+                              <a href={subItem.url}>
+                                <span>{subItem.title}</span>
+                              </a>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        ))}
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  </SidebarMenuItem>
+                </Collapsible>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+          <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarMenu>
+              {data.projects.map((item) => (
+                <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.name}</span>
+                    </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <SidebarMenuAction showOnHover>
+                        <MoreHorizontal />
+                        <span className="sr-only">More</span>
+                      </SidebarMenuAction>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      className="w-48 rounded-lg"
+                      side="bottom"
+                      align="end"
+                    >
+                      <DropdownMenuItem>
+                        <Folder className="text-muted-foreground" />
+                        <span>View Project</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <Forward className="text-muted-foreground" />
+                        <span>Share Project</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>
+                        <Trash2 className="text-muted-foreground" />
+                        <span>Delete Project</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </SidebarMenuItem>
+              ))}
+              <SidebarMenuItem>
+                <SidebarMenuButton className="text-sidebar-foreground/70">
+                  <MoreHorizontal className="text-sidebar-foreground/70" />
+                  <span>More</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                    size="lg"
+                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                    <Avatar className="h-8 w-8 rounded-lg">
+                      <AvatarImage
+                        src={data.user.avatar}
+                        alt={data.user.name}
+                      />
+                      <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                    </Avatar>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">
+                        {data.user.name}
+                      </span>
+                      <span className="truncate text-xs">
+                        {data.user.email}
+                      </span>
+                    </div>
+                    <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side="bottom"
+                  align="end"
+                  sideOffset={4}
+                >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                      <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage
+                          src={data.user.avatar}
+                          alt={data.user.name}
+                        />
+                        <AvatarFallback className="rounded-lg">
+                          CN
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                          {data.user.name}
+                        </span>
+                        <span className="truncate text-xs">
+                          {data.user.email}
+                        </span>
+                      </div>
+                    </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                      <Sparkles />
+                      Upgrade to Pro
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                      <BadgeCheck />
+                      Account
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <CreditCard />
+                      Billing
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <Bell />
+                      Notifications
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <LogOut />
+                    Log out
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-08.tsx b/apps/www/registry/new-york/internal/sidebar-08.tsx
new file mode 100644
index 00000000000..bf4262e66ad
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-08.tsx
@@ -0,0 +1,452 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  BookOpen,
+  Bot,
+  ChevronRight,
+  ChevronsUpDown,
+  Command,
+  CreditCard,
+  Folder,
+  Frame,
+  LifeBuoy,
+  LogOut,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Send,
+  Settings2,
+  Share,
+  Sparkles,
+  SquareTerminal,
+  Trash2,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with secondary navigation."
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <Sidebar variant="inset">
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild>
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <Command className="size-4" />
+                  </div>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">Acme Inc</span>
+                    <span className="truncate text-xs">Enterprise</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Platform</SidebarGroupLabel>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={item.isActive}
+                >
+                  <SidebarMenuItem>
+                    <SidebarMenuButton asChild tooltip={item.title}>
+                      <a href={item.url}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    {item.items?.length ? (
+                      <>
+                        <CollapsibleTrigger asChild>
+                          <SidebarMenuAction className="data-[state=open]:rotate-90">
+                            <ChevronRight />
+                            <span className="sr-only">Toggle</span>
+                          </SidebarMenuAction>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent>
+                          <SidebarMenuSub>
+                            {item.items?.map((subItem) => (
+                              <SidebarMenuSubItem key={subItem.title}>
+                                <SidebarMenuSubButton asChild>
+                                  <a href={subItem.url}>
+                                    <span>{subItem.title}</span>
+                                  </a>
+                                </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                            ))}
+                          </SidebarMenuSub>
+                        </CollapsibleContent>
+                      </>
+                    ) : null}
+                  </SidebarMenuItem>
+                </Collapsible>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+          <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarMenu>
+              {data.projects.map((item) => (
+                <SidebarMenuItem key={item.name}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.name}</span>
+                    </a>
+                  </SidebarMenuButton>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <SidebarMenuAction showOnHover>
+                        <MoreHorizontal />
+                        <span className="sr-only">More</span>
+                      </SidebarMenuAction>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      className="w-48"
+                      side="bottom"
+                      align="end"
+                    >
+                      <DropdownMenuItem>
+                        <Folder className="text-muted-foreground" />
+                        <span>View Project</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <Share className="text-muted-foreground" />
+                        <span>Share Project</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>
+                        <Trash2 className="text-muted-foreground" />
+                        <span>Delete Project</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </SidebarMenuItem>
+              ))}
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <MoreHorizontal />
+                  <span>More</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroup>
+          <SidebarGroup className="mt-auto">
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {data.navSecondary.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild size="sm">
+                      <a href={item.url}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                    size="lg"
+                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                    <Avatar className="h-8 w-8 rounded-lg">
+                      <AvatarImage
+                        src={data.user.avatar}
+                        alt={data.user.name}
+                      />
+                      <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                    </Avatar>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">
+                        {data.user.name}
+                      </span>
+                      <span className="truncate text-xs">
+                        {data.user.email}
+                      </span>
+                    </div>
+                    <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side="bottom"
+                  align="end"
+                  sideOffset={4}
+                >
+                  <DropdownMenuLabel className="p-0 font-normal">
+                    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                      <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage
+                          src={data.user.avatar}
+                          alt={data.user.name}
+                        />
+                        <AvatarFallback className="rounded-lg">
+                          CN
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                          {data.user.name}
+                        </span>
+                        <span className="truncate text-xs">
+                          {data.user.email}
+                        </span>
+                      </div>
+                    </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                      <Sparkles />
+                      Upgrade to Pro
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                      <BadgeCheck />
+                      Account
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <CreditCard />
+                      Billing
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <Bell />
+                      Notifications
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <LogOut />
+                    Log out
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-09.tsx b/apps/www/registry/new-york/internal/sidebar-09.tsx
new file mode 100644
index 00000000000..ae94ebbb1a3
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-09.tsx
@@ -0,0 +1,426 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArchiveX,
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  Command,
+  CreditCard,
+  File,
+  Inbox,
+  LogOut,
+  Send,
+  Sparkles,
+  Trash2,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Label } from "@/registry/new-york/ui/label"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+import { Switch } from "@/registry/new-york/ui/switch"
+
+// This is sample data
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      isActive: true,
+    },
+    {
+      title: "Drafts",
+      url: "#",
+      icon: File,
+      isActive: false,
+    },
+    {
+      title: "Sent",
+      url: "#",
+      icon: Send,
+      isActive: false,
+    },
+    {
+      title: "Junk",
+      url: "#",
+      icon: ArchiveX,
+      isActive: false,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+      isActive: false,
+    },
+  ],
+  mails: [
+    {
+      name: "William Smith",
+      email: "williamsmith@example.com",
+      subject: "Meeting Tomorrow",
+      date: "09:34 AM",
+      teaser:
+        "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.",
+    },
+    {
+      name: "Alice Smith",
+      email: "alicesmith@example.com",
+      subject: "Re: Project Update",
+      date: "Yesterday",
+      teaser:
+        "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.",
+    },
+    {
+      name: "Bob Johnson",
+      email: "bobjohnson@example.com",
+      subject: "Weekend Plans",
+      date: "2 days ago",
+      teaser:
+        "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?",
+    },
+    {
+      name: "Emily Davis",
+      email: "emilydavis@example.com",
+      subject: "Re: Question about Budget",
+      date: "2 days ago",
+      teaser:
+        "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?",
+    },
+    {
+      name: "Michael Wilson",
+      email: "michaelwilson@example.com",
+      subject: "Important Announcement",
+      date: "1 week ago",
+      teaser:
+        "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.",
+    },
+    {
+      name: "Sarah Brown",
+      email: "sarahbrown@example.com",
+      subject: "Re: Feedback on Proposal",
+      date: "1 week ago",
+      teaser:
+        "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?",
+    },
+    {
+      name: "David Lee",
+      email: "davidlee@example.com",
+      subject: "New Project Idea",
+      date: "1 week ago",
+      teaser:
+        "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?",
+    },
+    {
+      name: "Olivia Wilson",
+      email: "oliviawilson@example.com",
+      subject: "Vacation Plans",
+      date: "1 week ago",
+      teaser:
+        "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.",
+    },
+    {
+      name: "James Martin",
+      email: "jamesmartin@example.com",
+      subject: "Re: Conference Registration",
+      date: "1 week ago",
+      teaser:
+        "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.",
+    },
+    {
+      name: "Sophia White",
+      email: "sophiawhite@example.com",
+      subject: "Team Dinner",
+      date: "1 week ago",
+      teaser:
+        "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.",
+    },
+  ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "Collapsible nested sidebars."
+
+export default function Page() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "350px",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Inbox</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  // Note: I'm using state to show active item.
+  // IRL you should use the url/router.
+  const [activeItem, setActiveItem] = React.useState(data.navMain[0])
+  const [mails, setMails] = React.useState(data.mails)
+  const { setOpen } = useSidebar()
+
+  return (
+    <Sidebar
+      collapsible="icon"
+      className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
+      {...props}
+    >
+      {/* This is the first sidebar */}
+      {/* We disable collapsible and adjust width to icon. */}
+      {/* This will make the sidebar appear as icons. */}
+      <Sidebar
+        collapsible="none"
+        className="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
+      >
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <Command className="size-4" />
+                  </div>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">Acme Inc</span>
+                    <span className="truncate text-xs">Enterprise</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent className="px-1.5 md:px-0">
+              <SidebarMenu>
+                {data.navMain.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton
+                      tooltip={{
+                        children: item.title,
+                        hidden: false,
+                      }}
+                      onClick={() => {
+                        setActiveItem(item)
+                        const mail = data.mails.sort(() => Math.random() - 0.5)
+                        setMails(
+                          mail.slice(
+                            0,
+                            Math.max(5, Math.floor(Math.random() * 10) + 1)
+                          )
+                        )
+                        setOpen(true)
+                      }}
+                      isActive={activeItem?.title === item.title}
+                      className="px-2.5 md:px-2"
+                    >
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <NavUser user={data.user} />
+        </SidebarFooter>
+      </Sidebar>
+
+      {/* This is the second sidebar */}
+      {/* We disable collapsible and let it fill remaining space */}
+      <Sidebar collapsible="none" className="hidden flex-1 md:flex">
+        <SidebarHeader className="gap-3.5 border-b p-4">
+          <div className="flex w-full items-center justify-between">
+            <div className="text-base font-medium text-foreground">
+              {activeItem?.title}
+            </div>
+            <Label className="flex items-center gap-2 text-sm">
+              <span>Unreads</span>
+              <Switch className="shadow-none" />
+            </Label>
+          </div>
+          <SidebarInput placeholder="Type to search..." />
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup className="px-0">
+            <SidebarGroupContent>
+              {mails.map((mail) => (
+                <a
+                  href="#"
+                  key={mail.email}
+                  className="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                >
+                  <div className="flex w-full items-center gap-2">
+                    <span>{mail.name}</span>{" "}
+                    <span className="ml-auto text-xs">{mail.date}</span>
+                  </div>
+                  <span className="font-medium">{mail.subject}</span>
+                  <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
+                    {mail.teaser}
+                  </span>
+                </a>
+              ))}
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </Sidebar>
+  )
+}
+
+function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-10.tsx b/apps/www/registry/new-york/internal/sidebar-10.tsx
new file mode 100644
index 00000000000..1c90e9284d0
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-10.tsx
@@ -0,0 +1,747 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpRight,
+  AudioWaveform,
+  Bell,
+  Blocks,
+  Calendar,
+  ChevronDown,
+  ChevronRight,
+  Command,
+  Copy,
+  CornerUpLeft,
+  CornerUpRight,
+  FileText,
+  GalleryVerticalEnd,
+  Home,
+  Inbox,
+  LineChart,
+  Link,
+  MessageCircleQuestion,
+  MoreHorizontal,
+  Plus,
+  Search,
+  Settings2,
+  Sparkles,
+  Star,
+  StarOff,
+  Trash,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar in a popover."
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: Command,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Search",
+      url: "#",
+      icon: Search,
+    },
+    {
+      title: "Ask AI",
+      url: "#",
+      icon: Sparkles,
+    },
+    {
+      title: "Home",
+      url: "#",
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      badge: "10",
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Calendar",
+      url: "#",
+      icon: Calendar,
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+    },
+    {
+      title: "Templates",
+      url: "#",
+      icon: Blocks,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+    },
+    {
+      title: "Help",
+      url: "#",
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: "Project Management & Task Tracking",
+      url: "#",
+      emoji: "📊",
+    },
+    {
+      name: "Family Recipe Collection & Meal Planning",
+      url: "#",
+      emoji: "🍳",
+    },
+    {
+      name: "Fitness Tracker & Workout Routines",
+      url: "#",
+      emoji: "💪",
+    },
+    {
+      name: "Book Notes & Reading List",
+      url: "#",
+      emoji: "📚",
+    },
+    {
+      name: "Sustainable Gardening Tips & Plant Care",
+      url: "#",
+      emoji: "🌱",
+    },
+    {
+      name: "Language Learning Progress & Resources",
+      url: "#",
+      emoji: "🗣️",
+    },
+    {
+      name: "Home Renovation Ideas & Budget Tracker",
+      url: "#",
+      emoji: "🏠",
+    },
+    {
+      name: "Personal Finance & Investment Portfolio",
+      url: "#",
+      emoji: "💰",
+    },
+    {
+      name: "Movie & TV Show Watchlist with Reviews",
+      url: "#",
+      emoji: "🎬",
+    },
+    {
+      name: "Daily Habit Tracker & Goal Setting",
+      url: "#",
+      emoji: "✅",
+    },
+  ],
+  workspaces: [
+    {
+      name: "Personal Life Management",
+      emoji: "🏠",
+      pages: [
+        {
+          name: "Daily Journal & Reflection",
+          url: "#",
+          emoji: "📔",
+        },
+        {
+          name: "Health & Wellness Tracker",
+          url: "#",
+          emoji: "🍏",
+        },
+        {
+          name: "Personal Growth & Learning Goals",
+          url: "#",
+          emoji: "🌟",
+        },
+      ],
+    },
+    {
+      name: "Professional Development",
+      emoji: "💼",
+      pages: [
+        {
+          name: "Career Objectives & Milestones",
+          url: "#",
+          emoji: "🎯",
+        },
+        {
+          name: "Skill Acquisition & Training Log",
+          url: "#",
+          emoji: "🧠",
+        },
+        {
+          name: "Networking Contacts & Events",
+          url: "#",
+          emoji: "🤝",
+        },
+      ],
+    },
+    {
+      name: "Creative Projects",
+      emoji: "🎨",
+      pages: [
+        {
+          name: "Writing Ideas & Story Outlines",
+          url: "#",
+          emoji: "✍️",
+        },
+        {
+          name: "Art & Design Portfolio",
+          url: "#",
+          emoji: "🖼️",
+        },
+        {
+          name: "Music Composition & Practice Log",
+          url: "#",
+          emoji: "🎵",
+        },
+      ],
+    },
+    {
+      name: "Home Management",
+      emoji: "🏡",
+      pages: [
+        {
+          name: "Household Budget & Expense Tracking",
+          url: "#",
+          emoji: "💰",
+        },
+        {
+          name: "Home Maintenance Schedule & Tasks",
+          url: "#",
+          emoji: "🔧",
+        },
+        {
+          name: "Family Calendar & Event Planning",
+          url: "#",
+          emoji: "📅",
+        },
+      ],
+    },
+    {
+      name: "Travel & Adventure",
+      emoji: "🧳",
+      pages: [
+        {
+          name: "Trip Planning & Itineraries",
+          url: "#",
+          emoji: "🗺️",
+        },
+        {
+          name: "Travel Bucket List & Inspiration",
+          url: "#",
+          emoji: "🌎",
+        },
+        {
+          name: "Travel Journal & Photo Gallery",
+          url: "#",
+          emoji: "📸",
+        },
+      ],
+    },
+  ],
+  actions: [
+    [
+      {
+        label: "Customize Page",
+        icon: Settings2,
+      },
+      {
+        label: "Turn into wiki",
+        icon: FileText,
+      },
+    ],
+    [
+      {
+        label: "Copy Link",
+        icon: Link,
+      },
+      {
+        label: "Duplicate",
+        icon: Copy,
+      },
+      {
+        label: "Move to",
+        icon: CornerUpRight,
+      },
+      {
+        label: "Move to Trash",
+        icon: Trash2,
+      },
+    ],
+    [
+      {
+        label: "Undo",
+        icon: CornerUpLeft,
+      },
+      {
+        label: "View analytics",
+        icon: LineChart,
+      },
+      {
+        label: "Version History",
+        icon: GalleryVerticalEnd,
+      },
+      {
+        label: "Show delete pages",
+        icon: Trash,
+      },
+      {
+        label: "Notifications",
+        icon: Bell,
+      },
+    ],
+    [
+      {
+        label: "Import",
+        icon: ArrowUp,
+      },
+      {
+        label: "Export",
+        icon: ArrowDown,
+      },
+    ],
+  ],
+}
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-14 shrink-0 items-center gap-2">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+          <div className="ml-auto px-3">
+            <NavActions actions={data.actions} />
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 px-4 py-10">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar className="border-r-0" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+        <NavMain items={data.navMain} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavFavorites favorites={data.favorites} />
+        <NavWorkspaces workspaces={data.workspaces} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function NavActions({
+  actions,
+}: {
+  actions: {
+    label: string
+    icon: LucideIcon
+  }[][]
+}) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsOpen(true)
+  }, [])
+
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      <div className="hidden font-medium text-muted-foreground md:inline-block">
+        Edit Oct 08
+      </div>
+      <Button variant="ghost" size="icon" className="h-7 w-7">
+        <Star />
+      </Button>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 data-[state=open]:bg-accent"
+          >
+            <MoreHorizontal />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-56 overflow-hidden rounded-lg p-0"
+          align="end"
+        >
+          <Sidebar collapsible="none" className="bg-transparent">
+            <SidebarContent>
+              {actions.map((group, index) => (
+                <SidebarGroup key={index} className="border-b last:border-none">
+                  <SidebarGroupContent className="gap-0">
+                    <SidebarMenu>
+                      {group.map((item, index) => (
+                        <SidebarMenuItem key={index}>
+                          <SidebarMenuButton>
+                            <item.icon /> <span>{item.label}</span>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              ))}
+            </SidebarContent>
+          </Sidebar>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+function NavFavorites({
+  favorites,
+}: {
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+      <SidebarMenu>
+        {favorites.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url} title={item.name}>
+                <span>{item.emoji}</span>
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-56 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <StarOff className="text-muted-foreground" />
+                  <span>Remove from Favorites</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link className="text-muted-foreground" />
+                  <span>Copy Link</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArrowUpRight className="text-muted-foreground" />
+                  <span>Open in New Tab</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
+
+function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton asChild isActive={item.isActive}>
+            <a href={item.url}>
+              <item.icon />
+              <span>{item.title}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+
+function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: React.ReactNode
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function NavWorkspaces({
+  workspaces,
+}: {
+  workspaces: {
+    name: string
+    emoji: React.ReactNode
+    pages: {
+      name: string
+      emoji: React.ReactNode
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {workspaces.map((workspace) => (
+            <Collapsible key={workspace.name}>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <span>{workspace.emoji}</span>
+                    <span>{workspace.name}</span>
+                  </a>
+                </SidebarMenuButton>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuAction
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                    showOnHover
+                  >
+                    <ChevronRight />
+                  </SidebarMenuAction>
+                </CollapsibleTrigger>
+                <SidebarMenuAction showOnHover>
+                  <Plus />
+                </SidebarMenuAction>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {workspace.pages.map((page) => (
+                      <SidebarMenuSubItem key={page.name}>
+                        <SidebarMenuSubButton asChild>
+                          <a href="#">
+                            <span>{page.emoji}</span>
+                            <span>{page.name}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ))}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="text-sidebar-foreground/70">
+              <MoreHorizontal />
+              <span>More</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className="w-fit px-1.5">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-3" />
+              </div>
+              <span className="truncate font-semibold">{activeTeam.name}</span>
+              <ChevronDown className="opacity-50" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-64 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-11.tsx b/apps/www/registry/new-york/internal/sidebar-11.tsx
new file mode 100644
index 00000000000..957a21d4f4e
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-11.tsx
@@ -0,0 +1,194 @@
+import * as React from "react"
+import { ChevronRight, File, Folder } from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  changes: [
+    {
+      file: "README.md",
+      state: "M",
+    },
+    {
+      file: "api/hello/route.ts",
+      state: "U",
+    },
+    {
+      file: "app/layout.tsx",
+      state: "M",
+    },
+  ],
+  tree: [
+    [
+      "app",
+      [
+        "api",
+        ["hello", ["route.ts"]],
+        "page.tsx",
+        "layout.tsx",
+        ["blog", ["page.tsx"]],
+      ],
+    ],
+    [
+      "components",
+      ["ui", "button.tsx", "card.tsx"],
+      "header.tsx",
+      "footer.tsx",
+    ],
+    ["lib", ["util.ts"]],
+    ["public", "favicon.ico", "vercel.svg"],
+    ".eslintrc.json",
+    ".gitignore",
+    "next.config.js",
+    "tailwind.config.js",
+    "package.json",
+    "README.md",
+  ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a collapsible file tree."
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">components</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">ui</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>button.tsx</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Changes</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.changes.map((item, index) => (
+                <SidebarMenuItem key={index}>
+                  <SidebarMenuButton>
+                    <File />
+                    {item.file}
+                  </SidebarMenuButton>
+                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Files</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.tree.map((item, index) => (
+                <Tree key={index} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function Tree({ item }: { item: string | any[] }) {
+  const [name, ...items] = Array.isArray(item) ? item : [item]
+
+  if (!items.length) {
+    return (
+      <SidebarMenuButton
+        isActive={name === "button.tsx"}
+        className="data-[active=true]:bg-transparent"
+      >
+        <File />
+        {name}
+      </SidebarMenuButton>
+    )
+  }
+
+  return (
+    <SidebarMenuItem>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen={name === "components" || name === "ui"}
+      >
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton>
+            <ChevronRight className="transition-transform" />
+            <Folder />
+            {name}
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {items.map((subItem, index) => (
+              <Tree key={index} item={subItem} />
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarMenuItem>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-12.tsx b/apps/www/registry/new-york/internal/sidebar-12.tsx
new file mode 100644
index 00000000000..870893fe079
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-12.tsx
@@ -0,0 +1,288 @@
+"use client"
+
+import * as React from "react"
+import {
+  BadgeCheck,
+  Bell,
+  Check,
+  ChevronRight,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Plus,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  calendars: [
+    {
+      name: "My Calendars",
+      items: ["Personal", "Work", "Family"],
+    },
+    {
+      name: "Favorites",
+      items: ["Holidays", "Birthdays"],
+    },
+    {
+      name: "Other",
+      items: ["Travel", "Reminders", "Deadlines"],
+    },
+  ],
+}
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar with a calendar."
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbPage>October 2024</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-5">
+            {Array.from({ length: 20 }).map((_, i) => (
+              <div key={i} className="aspect-square rounded-xl bg-muted/50" />
+            ))}
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
+        <NavUser user={data.user} />
+      </SidebarHeader>
+      <SidebarContent>
+        <DatePicker />
+        <SidebarSeparator className="mx-0" />
+        <Calendars calendars={data.calendars} />
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              <Plus />
+              <span>New Calendar</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function Calendars({
+  calendars,
+}: {
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}) {
+  return (
+    <>
+      {calendars.map((calendar, index) => (
+        <React.Fragment key={calendar.name}>
+          <SidebarGroup key={calendar.name} className="py-0">
+            <Collapsible
+              defaultOpen={index === 0}
+              className="group/collapsible"
+            >
+              <SidebarGroupLabel
+                asChild
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {calendar.name}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {calendar.items.map((item, index) => (
+                      <SidebarMenuItem key={item}>
+                        <SidebarMenuButton>
+                          <div
+                            data-active={index < 2}
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                          >
+                            <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                          </div>
+                          {item}
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </SidebarGroup>
+          <SidebarSeparator className="mx-0" />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
+
+function DatePicker() {
+  return (
+    <SidebarGroup className="px-0">
+      <SidebarGroupContent>
+        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-13.tsx b/apps/www/registry/new-york/internal/sidebar-13.tsx
new file mode 100644
index 00000000000..7ca98ede758
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-13.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import {
+  Bell,
+  Check,
+  Globe,
+  Home,
+  Keyboard,
+  Link,
+  Lock,
+  Menu,
+  MessageCircle,
+  Paintbrush,
+  Settings,
+  Video,
+} from "lucide-react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york/ui/dialog"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar in a dialog."
+
+const data = {
+  nav: [
+    { name: "Notifications", icon: Bell },
+    { name: "Navigation", icon: Menu },
+    { name: "Home", icon: Home },
+    { name: "Appearance", icon: Paintbrush },
+    { name: "Messages & media", icon: MessageCircle },
+    { name: "Language & region", icon: Globe },
+    { name: "Accessibility", icon: Keyboard },
+    { name: "Mark as read", icon: Check },
+    { name: "Audio & video", icon: Video },
+    { name: "Connected accounts", icon: Link },
+    { name: "Privacy & visibility", icon: Lock },
+    { name: "Advanced", icon: Settings },
+  ],
+}
+
+export default function Page() {
+  return (
+    <div className="flex h-svh items-center justify-center">
+      <SettingsDialog />
+    </div>
+  )
+}
+
+function SettingsDialog() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+        <DialogTitle className="sr-only">Settings</DialogTitle>
+        <DialogDescription className="sr-only">
+          Customize your settings here.
+        </DialogDescription>
+        <SidebarProvider className="items-start">
+          <Sidebar collapsible="none" className="hidden md:flex">
+            <SidebarContent>
+              <SidebarGroup>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {data.nav.map((item) => (
+                      <SidebarMenuItem key={item.name}>
+                        <SidebarMenuButton
+                          asChild
+                          isActive={item.name === "Messages & media"}
+                        >
+                          <a href="#">
+                            <item.icon />
+                            <span>{item.name}</span>
+                          </a>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            </SidebarContent>
+          </Sidebar>
+          <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
+            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+              <div className="flex items-center gap-2 px-4">
+                <Breadcrumb>
+                  <BreadcrumbList>
+                    <BreadcrumbItem className="hidden md:block">
+                      <BreadcrumbLink href="#">Settings</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator className="hidden md:block" />
+                    <BreadcrumbItem>
+                      <BreadcrumbPage>Messages & media</BreadcrumbPage>
+                    </BreadcrumbItem>
+                  </BreadcrumbList>
+                </Breadcrumb>
+              </div>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+              {Array.from({ length: 10 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="aspect-video max-w-3xl rounded-xl bg-muted/50"
+                />
+              ))}
+            </div>
+          </main>
+        </SidebarProvider>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-14.tsx b/apps/www/registry/new-york/internal/sidebar-14.tsx
new file mode 100644
index 00000000000..2d41a5575b7
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-14.tsx
@@ -0,0 +1,246 @@
+import * as React from "react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A sidebar on the right."
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <SidebarTrigger className="-mr-1 ml-auto rotate-180" />
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+      <AppSidebar side="right" />
+    </SidebarProvider>
+  )
+}
+
+function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {data.navMain.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url} className="font-medium">
+                      {item.title}
+                    </a>
+                  </SidebarMenuButton>
+                  {item.items?.length ? (
+                    <SidebarMenuSub>
+                      {item.items.map((item) => (
+                        <SidebarMenuSubItem key={item.title}>
+                          <SidebarMenuSubButton
+                            asChild
+                            isActive={item.isActive}
+                          >
+                            <a href={item.url}>{item.title}</a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  ) : null}
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-15.tsx b/apps/www/registry/new-york/internal/sidebar-15.tsx
new file mode 100644
index 00000000000..acef1406f4e
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-15.tsx
@@ -0,0 +1,822 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArrowUpRight,
+  AudioWaveform,
+  BadgeCheck,
+  Bell,
+  Blocks,
+  CalendarIcon,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronsUpDown,
+  Command,
+  CreditCard,
+  Home,
+  Inbox,
+  Link,
+  LogOut,
+  MessageCircleQuestion,
+  MoreHorizontal,
+  Plus,
+  Search,
+  Settings2,
+  Sparkles,
+  StarOff,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "A left and right sidebar."
+
+// This is sample data.
+const sidebarLeftData = {
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: Command,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Search",
+      url: "#",
+      icon: Search,
+    },
+    {
+      title: "Ask AI",
+      url: "#",
+      icon: Sparkles,
+    },
+    {
+      title: "Home",
+      url: "#",
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: "Inbox",
+      url: "#",
+      icon: Inbox,
+      badge: "10",
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Calendar",
+      url: "#",
+      icon: CalendarIcon,
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+    },
+    {
+      title: "Templates",
+      url: "#",
+      icon: Blocks,
+    },
+    {
+      title: "Trash",
+      url: "#",
+      icon: Trash2,
+    },
+    {
+      title: "Help",
+      url: "#",
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: "Project Management & Task Tracking",
+      url: "#",
+      emoji: "📊",
+    },
+    {
+      name: "Family Recipe Collection & Meal Planning",
+      url: "#",
+      emoji: "🍳",
+    },
+    {
+      name: "Fitness Tracker & Workout Routines",
+      url: "#",
+      emoji: "💪",
+    },
+    {
+      name: "Book Notes & Reading List",
+      url: "#",
+      emoji: "📚",
+    },
+    {
+      name: "Sustainable Gardening Tips & Plant Care",
+      url: "#",
+      emoji: "🌱",
+    },
+    {
+      name: "Language Learning Progress & Resources",
+      url: "#",
+      emoji: "🗣️",
+    },
+    {
+      name: "Home Renovation Ideas & Budget Tracker",
+      url: "#",
+      emoji: "🏠",
+    },
+    {
+      name: "Personal Finance & Investment Portfolio",
+      url: "#",
+      emoji: "💰",
+    },
+    {
+      name: "Movie & TV Show Watchlist with Reviews",
+      url: "#",
+      emoji: "🎬",
+    },
+    {
+      name: "Daily Habit Tracker & Goal Setting",
+      url: "#",
+      emoji: "✅",
+    },
+  ],
+  workspaces: [
+    {
+      name: "Personal Life Management",
+      emoji: "🏠",
+      pages: [
+        {
+          name: "Daily Journal & Reflection",
+          url: "#",
+          emoji: "📔",
+        },
+        {
+          name: "Health & Wellness Tracker",
+          url: "#",
+          emoji: "🍏",
+        },
+        {
+          name: "Personal Growth & Learning Goals",
+          url: "#",
+          emoji: "🌟",
+        },
+      ],
+    },
+    {
+      name: "Professional Development",
+      emoji: "💼",
+      pages: [
+        {
+          name: "Career Objectives & Milestones",
+          url: "#",
+          emoji: "🎯",
+        },
+        {
+          name: "Skill Acquisition & Training Log",
+          url: "#",
+          emoji: "🧠",
+        },
+        {
+          name: "Networking Contacts & Events",
+          url: "#",
+          emoji: "🤝",
+        },
+      ],
+    },
+    {
+      name: "Creative Projects",
+      emoji: "🎨",
+      pages: [
+        {
+          name: "Writing Ideas & Story Outlines",
+          url: "#",
+          emoji: "✍️",
+        },
+        {
+          name: "Art & Design Portfolio",
+          url: "#",
+          emoji: "🖼️",
+        },
+        {
+          name: "Music Composition & Practice Log",
+          url: "#",
+          emoji: "🎵",
+        },
+      ],
+    },
+    {
+      name: "Home Management",
+      emoji: "🏡",
+      pages: [
+        {
+          name: "Household Budget & Expense Tracking",
+          url: "#",
+          emoji: "💰",
+        },
+        {
+          name: "Home Maintenance Schedule & Tasks",
+          url: "#",
+          emoji: "🔧",
+        },
+        {
+          name: "Family Calendar & Event Planning",
+          url: "#",
+          emoji: "📅",
+        },
+      ],
+    },
+    {
+      name: "Travel & Adventure",
+      emoji: "🧳",
+      pages: [
+        {
+          name: "Trip Planning & Itineraries",
+          url: "#",
+          emoji: "🗺️",
+        },
+        {
+          name: "Travel Bucket List & Inspiration",
+          url: "#",
+          emoji: "🌎",
+        },
+        {
+          name: "Travel Journal & Photo Gallery",
+          url: "#",
+          emoji: "📸",
+        },
+      ],
+    },
+  ],
+}
+
+// This is sample data.
+const sidebarRightData = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  calendars: [
+    {
+      name: "My Calendars",
+      items: ["Personal", "Work", "Family"],
+    },
+    {
+      name: "Favorites",
+      items: ["Holidays", "Birthdays"],
+    },
+    {
+      name: "Other",
+      items: ["Travel", "Reminders", "Deadlines"],
+    },
+  ],
+}
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <SidebarLeft />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    Project Management & Task Tracking
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+        </div>
+      </SidebarInset>
+      <SidebarRight />
+    </SidebarProvider>
+  )
+}
+
+function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar className="border-r-0" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={sidebarLeftData.teams} />
+        <NavMain items={sidebarLeftData.navMain} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavFavorites favorites={sidebarLeftData.favorites} />
+        <NavWorkspaces workspaces={sidebarLeftData.workspaces} />
+        <NavSecondary
+          items={sidebarLeftData.navSecondary}
+          className="mt-auto"
+        />
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar
+      collapsible="none"
+      className="sticky top-0 hidden h-svh border-l lg:flex"
+      {...props}
+    >
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
+        <NavUser user={sidebarRightData.user} />
+      </SidebarHeader>
+      <SidebarContent>
+        <DatePicker />
+        <SidebarSeparator className="mx-0" />
+        <Calendars calendars={sidebarRightData.calendars} />
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              <Plus />
+              <span>New Calendar</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
+
+function Calendars({
+  calendars,
+}: {
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}) {
+  return (
+    <>
+      {calendars.map((calendar, index) => (
+        <React.Fragment key={calendar.name}>
+          <SidebarGroup key={calendar.name} className="py-0">
+            <Collapsible
+              defaultOpen={index === 0}
+              className="group/collapsible"
+            >
+              <SidebarGroupLabel
+                asChild
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {calendar.name}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {calendar.items.map((item, index) => (
+                      <SidebarMenuItem key={item}>
+                        <SidebarMenuButton>
+                          <div
+                            data-active={index < 2}
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                          >
+                            <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                          </div>
+                          {item}
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </SidebarGroup>
+          <SidebarSeparator className="mx-0" />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
+
+function DatePicker() {
+  return (
+    <SidebarGroup className="px-0">
+      <SidebarGroupContent>
+        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function NavFavorites({
+  favorites,
+}: {
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+      <SidebarMenu>
+        {favorites.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url} title={item.name}>
+                <span>{item.emoji}</span>
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-56 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <StarOff className="text-muted-foreground" />
+                  <span>Remove from Favorites</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link className="text-muted-foreground" />
+                  <span>Copy Link</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArrowUpRight className="text-muted-foreground" />
+                  <span>Open in New Tab</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
+
+function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton asChild isActive={item.isActive}>
+            <a href={item.url}>
+              <item.icon />
+              <span>{item.title}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+
+function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: React.ReactNode
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
+
+function NavWorkspaces({
+  workspaces,
+}: {
+  workspaces: {
+    name: string
+    emoji: React.ReactNode
+    pages: {
+      name: string
+      emoji: React.ReactNode
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {workspaces.map((workspace) => (
+            <Collapsible key={workspace.name}>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <span>{workspace.emoji}</span>
+                    <span>{workspace.name}</span>
+                  </a>
+                </SidebarMenuButton>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuAction
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                    showOnHover
+                  >
+                    <ChevronRight />
+                  </SidebarMenuAction>
+                </CollapsibleTrigger>
+                <SidebarMenuAction showOnHover>
+                  <Plus />
+                </SidebarMenuAction>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {workspace.pages.map((page) => (
+                      <SidebarMenuSubItem key={page.name}>
+                        <SidebarMenuSubButton asChild>
+                          <a href="#">
+                            <span>{page.emoji}</span>
+                            <span>{page.name}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ))}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="text-sidebar-foreground/70">
+              <MoreHorizontal />
+              <span>More</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className="w-fit px-1.5">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-3" />
+              </div>
+              <span className="truncate font-semibold">{activeTeam.name}</span>
+              <ChevronDown className="opacity-50" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-64 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-16.tsx b/apps/www/registry/new-york/internal/sidebar-16.tsx
new file mode 100644
index 00000000000..e8e312e879f
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-16.tsx
@@ -0,0 +1,648 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import {
+  BadgeCheck,
+  Bell,
+  BookOpen,
+  Bot,
+  ChevronRight,
+  ChevronsUpDown,
+  Command,
+  CreditCard,
+  Folder,
+  Frame,
+  LifeBuoy,
+  LogOut,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Send,
+  Settings2,
+  Share,
+  Sparkles,
+  SquareTerminal,
+  Trash2,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Icons } from "@/components/icons"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/registry/new-york/ui/navigation-menu"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with site header navigation."
+
+const HEADER_HEIGHT = "4rem"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+export default function Page() {
+  const [open, setOpen] = React.useState(true)
+  const { isMobile } = useSidebar()
+
+  return (
+    <div
+      style={
+        {
+          "--header-height": HEADER_HEIGHT,
+        } as React.CSSProperties
+      }
+    >
+      <header className="sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20">
+        <div className="flex items-center gap-2 w-full">
+          <Button
+            className="hidden md:flex"
+            variant="ghost"
+            size="icon"
+            onClick={() => setOpen(!open)}
+          >
+            <Sidebar />
+          </Button>
+
+          <div className="mx-auto flex items-center gap-2">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <Command className="size-4" />
+            </div>
+            <Separator orientation="vertical" className="ml-4 h-4" />
+            <NavigationMenu>
+              <NavigationMenuList>
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger className="bg-sidebar">
+                    Getting started
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                      <li className="row-span-3">
+                        <NavigationMenuLink asChild>
+                          <a
+                            className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                            href="/"
+                          >
+                            <Icons.logo className="h-6 w-6" />
+                            <div className="mb-2 mt-4 text-lg font-medium">
+                              shadcn/ui
+                            </div>
+                            <p className="text-sm leading-tight text-muted-foreground">
+                              Beautifully designed components built with Radix
+                              UI and Tailwind CSS.
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+
+                      <li>
+                        <NavigationMenuLink asChild>
+                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                            <div className="text-sm font-medium leading-none">
+                              Introduction
+                            </div>
+                            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                              Re-usable components built using Radix UI and
+                              Tailwind CSS.
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+
+                      <li>
+                        <NavigationMenuLink asChild>
+                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                            <div className="text-sm font-medium leading-none">
+                              Installation
+                            </div>
+                            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                              How to install dependencies and structure your
+                              app.
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+
+                      <li>
+                        <NavigationMenuLink asChild>
+                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                            <div className="text-sm font-medium leading-none">
+                              Typography
+                            </div>
+                            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                              Styles for headings, paragraphs, lists...etc
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger className="bg-sidebar">
+                    Components
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                      {components.map((component) => (
+                        <li>
+                          <NavigationMenuLink key={component.title} asChild>
+                            <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                              <div className="text-sm font-medium leading-none">
+                                {component.title}
+                              </div>
+                              <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                {component.description}
+                              </p>
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                      ))}
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                  <Link href="/docs" legacyBehavior passHref>
+                    <NavigationMenuLink
+                      className={cn(navigationMenuTriggerStyle(), "bg-sidebar")}
+                    >
+                      Documentation
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+              </NavigationMenuList>
+            </NavigationMenu>
+          </div>
+        </div>
+      </header>
+      <SidebarProvider open={open} onOpenChange={setOpen}>
+        <Sidebar
+          className="top-[--header-height] pb-[--header-height]"
+          variant="inset"
+        >
+          <SidebarHeader>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton size="lg" asChild>
+                  <a href="#">
+                    <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                      <Command className="size-4" />
+                    </div>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">Acme Inc</span>
+                      <span className="truncate text-xs">Enterprise</span>
+                    </div>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Platform</SidebarGroupLabel>
+              <SidebarMenu>
+                {data.navMain.map((item) => (
+                  <Collapsible
+                    key={item.title}
+                    asChild
+                    defaultOpen={item.isActive}
+                  >
+                    <SidebarMenuItem>
+                      <SidebarMenuButton asChild tooltip={item.title}>
+                        <a href={item.url}>
+                          <item.icon />
+                          <span>{item.title}</span>
+                        </a>
+                      </SidebarMenuButton>
+                      {item.items?.length ? (
+                        <>
+                          <CollapsibleTrigger asChild>
+                            <SidebarMenuAction className="data-[state=open]:rotate-90">
+                              <ChevronRight />
+                              <span className="sr-only">Toggle</span>
+                            </SidebarMenuAction>
+                          </CollapsibleTrigger>
+                          <CollapsibleContent>
+                            <SidebarMenuSub>
+                              {item.items?.map((subItem) => (
+                                <SidebarMenuSubItem key={subItem.title}>
+                                  <SidebarMenuSubButton asChild>
+                                    <a href={subItem.url}>
+                                      <span>{subItem.title}</span>
+                                    </a>
+                                  </SidebarMenuSubButton>
+                                </SidebarMenuSubItem>
+                              ))}
+                            </SidebarMenuSub>
+                          </CollapsibleContent>
+                        </>
+                      ) : null}
+                    </SidebarMenuItem>
+                  </Collapsible>
+                ))}
+              </SidebarMenu>
+            </SidebarGroup>
+            <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+              <SidebarGroupLabel>Projects</SidebarGroupLabel>
+              <SidebarMenu>
+                {data.projects.map((item) => (
+                  <SidebarMenuItem key={item.name}>
+                    <SidebarMenuButton asChild>
+                      <a href={item.url}>
+                        <item.icon />
+                        <span>{item.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                          <MoreHorizontal />
+                          <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        className="w-48"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                      >
+                        <DropdownMenuItem>
+                          <Folder className="text-muted-foreground" />
+                          <span>View Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Share className="text-muted-foreground" />
+                          <span>Share Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                          <Trash2 className="text-muted-foreground" />
+                          <span>Delete Project</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </SidebarMenuItem>
+                ))}
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <MoreHorizontal />
+                    <span>More</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroup>
+            <SidebarGroup className="mt-auto">
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {data.navSecondary.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton asChild size="sm">
+                        <a href={item.url}>
+                          <item.icon />
+                          <span>{item.title}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarFooter>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <SidebarMenuButton
+                      size="lg"
+                      className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                    >
+                      <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage
+                          src={data.user.avatar}
+                          alt={data.user.name}
+                        />
+                        <AvatarFallback className="rounded-lg">
+                          CN
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                          {data.user.name}
+                        </span>
+                        <span className="truncate text-xs">
+                          {data.user.email}
+                        </span>
+                      </div>
+                      <ChevronsUpDown className="ml-auto size-4" />
+                    </SidebarMenuButton>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                    side={isMobile ? "bottom" : "right"}
+                    align="end"
+                    sideOffset={4}
+                  >
+                    <DropdownMenuLabel className="p-0 font-normal">
+                      <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                          <AvatarImage
+                            src={data.user.avatar}
+                            alt={data.user.name}
+                          />
+                          <AvatarFallback className="rounded-lg">
+                            CN
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                          <span className="truncate font-semibold">
+                            {data.user.name}
+                          </span>
+                          <span className="truncate text-xs">
+                            {data.user.email}
+                          </span>
+                        </div>
+                      </div>
+                    </DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                      <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                      <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>
+                      <LogOut />
+                      Log out
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarFooter>
+        </Sidebar>
+
+        <SidebarInset>
+          <header className=" flex shrink-0 items-center gap-2 border-b py-2">
+            <div className="flex items-center gap-2 px-4 py-2">
+              <div className="flex md:hidden items-center gap-2">
+                <SidebarTrigger />
+                <Separator orientation="vertical" className="mr-2 h-4" />
+              </div>
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink href="#">
+                      Building Your Application
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+          </header>
+          <div className="flex flex-1 flex-col gap-4 p-4">
+            <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+              <div className="aspect-video rounded-xl bg-muted/50" />
+              <div className="aspect-video rounded-xl bg-muted/50" />
+              <div className="aspect-video rounded-xl bg-muted/50" />
+            </div>
+            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-controlled.tsx b/apps/www/registry/new-york/internal/sidebar-controlled.tsx
new file mode 100644
index 00000000000..741e269582a
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-controlled.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PieChart,
+  Send,
+} from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: Frame,
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChart,
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: Map,
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoy,
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: Send,
+  },
+]
+
+export default function AppSidebar() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <SidebarProvider open={open} onOpenChange={setOpen}>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton asChild>
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex items-center h-12 px-4 justify-between">
+          <Button
+            onClick={() => setOpen((open) => !open)}
+            size="sm"
+            variant="ghost"
+          >
+            {open ? <PanelLeftClose /> : <PanelLeftOpen />}
+            <span>{open ? "Close" : "Open"} Sidebar</span>
+          </Button>
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-demo.tsx b/apps/www/registry/new-york/internal/sidebar-demo.tsx
new file mode 100644
index 00000000000..c28bb4f68a5
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-demo.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+// Menu items.
+const items = [
+  {
+    title: "Home",
+    url: "#",
+    icon: Home,
+  },
+  {
+    title: "Inbox",
+    url: "#",
+    icon: Inbox,
+  },
+  {
+    title: "Calendar",
+    url: "#",
+    icon: Calendar,
+  },
+  {
+    title: "Search",
+    url: "#",
+    icon: Search,
+  },
+  {
+    title: "Settings",
+    url: "#",
+    icon: Settings,
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Application</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {items.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild>
+                      <a href={item.url}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex items-center justify-between px-4 h-12">
+          <SidebarTrigger />
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-footer.tsx b/apps/www/registry/new-york/internal/sidebar-footer.tsx
new file mode 100644
index 00000000000..831581140d7
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-footer.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { ChevronDown, ChevronUp, User2 } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader />
+        <SidebarContent />
+        <SidebarFooter>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                    Username
+                    <ChevronUp className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  side="top"
+                  className="w-[--radix-popper-anchor-width]"
+                >
+                  <DropdownMenuItem>
+                    <span>Account</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Billing</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Sign out</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex items-center justify-between px-4 h-12">
+          <SidebarTrigger />
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-group-action.tsx b/apps/www/registry/new-york/internal/sidebar-group-action.tsx
new file mode 100644
index 00000000000..f1fb434f9a2
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-group-action.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import {
+  ChevronDown,
+  Frame,
+  LifeBuoy,
+  Map,
+  PieChart,
+  Plus,
+  Send,
+} from "lucide-react"
+import { Toaster, toast } from "sonner"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Toaster
+        position="bottom-left"
+        toastOptions={{
+          className: "ml-[160px]",
+        }}
+      />
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupAction
+              title="Add Project"
+              onClick={() => toast("You clicked the group action!")}
+            >
+              <Plus /> <span className="sr-only">Add Project</span>
+            </SidebarGroupAction>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <a href="#">
+                      <Frame />
+                      <span>Design Engineering</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <a href="#">
+                      <PieChart />
+                      <span>Sales & Marketing</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <a href="#">
+                      <Map />
+                      <span>Travel</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-group-collapsible.tsx b/apps/www/registry/new-york/internal/sidebar-group-collapsible.tsx
new file mode 100644
index 00000000000..5752845afe9
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-group-collapsible.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import { ChevronDown, LifeBuoy, Send } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <Collapsible defaultOpen className="group/collapsible">
+            <SidebarGroup>
+              <SidebarGroupLabel
+                asChild
+                className="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  Help
+                  <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton>
+                        <LifeBuoy />
+                        Support
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton>
+                        <Send />
+                        Feedback
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-group.tsx b/apps/www/registry/new-york/internal/sidebar-group.tsx
new file mode 100644
index 00000000000..de2e87dbdd7
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-group.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { LifeBuoy, Send } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Help</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <LifeBuoy />
+                    Support
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <Send />
+                    Feedback
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-header.tsx b/apps/www/registry/new-york/internal/sidebar-header.tsx
new file mode 100644
index 00000000000..5b496d2883b
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-header.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { ChevronDown } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                    Select Workspace
+                    <ChevronDown className="ml-auto" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-[--radix-popper-anchor-width]">
+                  <DropdownMenuItem>
+                    <span>Acme Inc</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <span>Acme Corp.</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex items-center justify-between px-4 h-12">
+          <SidebarTrigger />
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-menu-action.tsx b/apps/www/registry/new-york/internal/sidebar-menu-action.tsx
new file mode 100644
index 00000000000..408c6bdb16f
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-menu-action.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Send,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: Frame,
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChart,
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: Map,
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoy,
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: Send,
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project, index) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton
+                      asChild
+                      className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                    >
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction>
+                          <MoreHorizontal />
+                          <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent side="right" align="start">
+                        <DropdownMenuItem>
+                          <span>Edit Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <span>Delete Project</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-menu-badge.tsx b/apps/www/registry/new-york/internal/sidebar-menu-badge.tsx
new file mode 100644
index 00000000000..9fc60134490
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-menu-badge.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: Frame,
+    badge: "24",
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChart,
+    badge: "12",
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: Map,
+    badge: "3",
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoy,
+    badge: "21",
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: Send,
+    badge: "8",
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton
+                      asChild
+                      className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                    >
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-menu-collapsible.tsx b/apps/www/registry/new-york/internal/sidebar-menu-collapsible.tsx
new file mode 100644
index 00000000000..6bf5a1db8f7
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-menu-collapsible.tsx
@@ -0,0 +1,197 @@
+"use client"
+
+import { ChevronRight } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+const items = [
+  {
+    title: "Getting Started",
+    url: "#",
+    items: [
+      {
+        title: "Installation",
+        url: "#",
+      },
+      {
+        title: "Project Structure",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Building Your Application",
+    url: "#",
+    items: [
+      {
+        title: "Routing",
+        url: "#",
+      },
+      {
+        title: "Data Fetching",
+        url: "#",
+        isActive: true,
+      },
+      {
+        title: "Rendering",
+        url: "#",
+      },
+      {
+        title: "Caching",
+        url: "#",
+      },
+      {
+        title: "Styling",
+        url: "#",
+      },
+      {
+        title: "Optimizing",
+        url: "#",
+      },
+      {
+        title: "Configuring",
+        url: "#",
+      },
+      {
+        title: "Testing",
+        url: "#",
+      },
+      {
+        title: "Authentication",
+        url: "#",
+      },
+      {
+        title: "Deploying",
+        url: "#",
+      },
+      {
+        title: "Upgrading",
+        url: "#",
+      },
+      {
+        title: "Examples",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "API Reference",
+    url: "#",
+    items: [
+      {
+        title: "Components",
+        url: "#",
+      },
+      {
+        title: "File Conventions",
+        url: "#",
+      },
+      {
+        title: "Functions",
+        url: "#",
+      },
+      {
+        title: "next.config.js Options",
+        url: "#",
+      },
+      {
+        title: "CLI",
+        url: "#",
+      },
+      {
+        title: "Edge Runtime",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Architecture",
+    url: "#",
+    items: [
+      {
+        title: "Accessibility",
+        url: "#",
+      },
+      {
+        title: "Fast Refresh",
+        url: "#",
+      },
+      {
+        title: "Next.js Compiler",
+        url: "#",
+      },
+      {
+        title: "Supported Browsers",
+        url: "#",
+      },
+      {
+        title: "Turbopack",
+        url: "#",
+      },
+    ],
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {items.map((item, index) => (
+                  <Collapsible
+                    key={index}
+                    className="group/collapsible"
+                    defaultOpen={index === 0}
+                  >
+                    <SidebarMenuItem>
+                      <CollapsibleTrigger asChild>
+                        <SidebarMenuButton>
+                          <span>{item.title}</span>
+                          <ChevronRight className="transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent>
+                        <SidebarMenuSub>
+                          {item.items.map((subItem, subIndex) => (
+                            <SidebarMenuSubItem key={subIndex}>
+                              <SidebarMenuSubButton asChild>
+                                <a href={subItem.url}>
+                                  <span>{subItem.title}</span>
+                                </a>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </Collapsible>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-menu-sub.tsx b/apps/www/registry/new-york/internal/sidebar-menu-sub.tsx
new file mode 100644
index 00000000000..1947f65de8a
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-menu-sub.tsx
@@ -0,0 +1,180 @@
+"use client"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+const items = [
+  {
+    title: "Getting Started",
+    url: "#",
+    items: [
+      {
+        title: "Installation",
+        url: "#",
+      },
+      {
+        title: "Project Structure",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Building Your Application",
+    url: "#",
+    items: [
+      {
+        title: "Routing",
+        url: "#",
+      },
+      {
+        title: "Data Fetching",
+        url: "#",
+        isActive: true,
+      },
+      {
+        title: "Rendering",
+        url: "#",
+      },
+      {
+        title: "Caching",
+        url: "#",
+      },
+      {
+        title: "Styling",
+        url: "#",
+      },
+      {
+        title: "Optimizing",
+        url: "#",
+      },
+      {
+        title: "Configuring",
+        url: "#",
+      },
+      {
+        title: "Testing",
+        url: "#",
+      },
+      {
+        title: "Authentication",
+        url: "#",
+      },
+      {
+        title: "Deploying",
+        url: "#",
+      },
+      {
+        title: "Upgrading",
+        url: "#",
+      },
+      {
+        title: "Examples",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "API Reference",
+    url: "#",
+    items: [
+      {
+        title: "Components",
+        url: "#",
+      },
+      {
+        title: "File Conventions",
+        url: "#",
+      },
+      {
+        title: "Functions",
+        url: "#",
+      },
+      {
+        title: "next.config.js Options",
+        url: "#",
+      },
+      {
+        title: "CLI",
+        url: "#",
+      },
+      {
+        title: "Edge Runtime",
+        url: "#",
+      },
+    ],
+  },
+  {
+    title: "Architecture",
+    url: "#",
+    items: [
+      {
+        title: "Accessibility",
+        url: "#",
+      },
+      {
+        title: "Fast Refresh",
+        url: "#",
+      },
+      {
+        title: "Next.js Compiler",
+        url: "#",
+      },
+      {
+        title: "Supported Browsers",
+        url: "#",
+      },
+      {
+        title: "Turbopack",
+        url: "#",
+      },
+    ],
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {items.map((item, index) => (
+                  <SidebarMenuItem key={index}>
+                    <SidebarMenuButton asChild>
+                      <a href={item.url}>
+                        <span>{item.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <SidebarMenuSub>
+                      {item.items.map((subItem, subIndex) => (
+                        <SidebarMenuSubItem key={subIndex}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-menu.tsx b/apps/www/registry/new-york/internal/sidebar-menu.tsx
new file mode 100644
index 00000000000..9b5e3eaca8a
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-menu.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: Frame,
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChart,
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: Map,
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoy,
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: Send,
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {projects.map((project) => (
+                  <SidebarMenuItem key={project.name}>
+                    <SidebarMenuButton asChild>
+                      <a href={project.url}>
+                        <project.icon />
+                        <span>{project.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sidebar-rsc.tsx b/apps/www/registry/new-york/internal/sidebar-rsc.tsx
new file mode 100644
index 00000000000..61a62375916
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sidebar-rsc.tsx
@@ -0,0 +1,104 @@
+import * as React from "react"
+import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+
+const projects = [
+  {
+    name: "Design Engineering",
+    url: "#",
+    icon: Frame,
+    badge: "24",
+  },
+  {
+    name: "Sales & Marketing",
+    url: "#",
+    icon: PieChart,
+    badge: "12",
+  },
+  {
+    name: "Travel",
+    url: "#",
+    icon: Map,
+    badge: "3",
+  },
+  {
+    name: "Support",
+    url: "#",
+    icon: LifeBuoy,
+    badge: "21",
+  },
+  {
+    name: "Feedback",
+    url: "#",
+    icon: Send,
+    badge: "8",
+  },
+]
+
+// Dummy fetch function
+async function fetchProjects() {
+  await new Promise((resolve) => setTimeout(resolve, 3000))
+  return projects
+}
+
+export default function AppSidebar() {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <React.Suspense fallback={<NavProjectsSkeleton />}>
+                <NavProjects />
+              </React.Suspense>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
+
+function NavProjectsSkeleton() {
+  return (
+    <SidebarMenu>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <SidebarMenuItem key={index}>
+          <SidebarMenuSkeleton showIcon />
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
+
+async function NavProjects() {
+  const projects = await fetchProjects()
+
+  return (
+    <SidebarMenu>
+      {projects.map((project) => (
+        <SidebarMenuItem key={project.name}>
+          <SidebarMenuButton asChild>
+            <a href={project.url}>
+              <project.icon />
+              <span>{project.name}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/accordion-demo.tsx b/apps/www/registry/new-york/internal/sink/components/accordion-demo.tsx
new file mode 100644
index 00000000000..ee4d39240ad
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/accordion-demo.tsx
@@ -0,0 +1,32 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/registry/new-york/ui/accordion"
+
+export function AccordionDemo() {
+  return (
+    <Accordion type="single" collapsible className="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other
+          components&apos; aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/alert-demo.tsx b/apps/www/registry/new-york/internal/sink/components/alert-demo.tsx
new file mode 100644
index 00000000000..5da416b8d4d
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/alert-demo.tsx
@@ -0,0 +1,19 @@
+import { Terminal } from "lucide-react"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york/ui/alert"
+
+export function AlertDemo() {
+  return (
+    <Alert>
+      <Terminal className="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the cli.
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/alert-dialog-demo.tsx b/apps/www/registry/new-york/internal/sink/components/alert-dialog-demo.tsx
new file mode 100644
index 00000000000..2c10477dfac
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/new-york/ui/alert-dialog"
+import { Button } from "@/registry/new-york/ui/button"
+
+export function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Show Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/app-sidebar.tsx b/apps/www/registry/new-york/internal/sink/components/app-sidebar.tsx
new file mode 100644
index 00000000000..22a0d991185
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import * as React from "react"
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  GalleryVerticalEnd,
+  Map,
+  PieChart,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react"
+
+import { NavMain } from "@/registry/new-york/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "@/registry/new-york/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "@/registry/new-york/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "@/registry/new-york/blocks/sidebar-07/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: GalleryVerticalEnd,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/aspect-ratio-demo.tsx b/apps/www/registry/new-york/internal/sink/components/aspect-ratio-demo.tsx
new file mode 100644
index 00000000000..1000a46b58e
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image"
+
+import { AspectRatio } from "@/registry/new-york/ui/aspect-ratio"
+
+export function AspectRatioDemo() {
+  return (
+    <AspectRatio ratio={16 / 9} className="bg-muted">
+      <Image
+        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+        alt="Photo by Drew Beamer"
+        fill
+        className="h-full w-full rounded-md object-cover"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/avatar-demo.tsx b/apps/www/registry/new-york/internal/sink/components/avatar-demo.tsx
new file mode 100644
index 00000000000..da64aa028c6
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/avatar-demo.tsx
@@ -0,0 +1,14 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+
+export function AvatarDemo() {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/badge-demo.tsx b/apps/www/registry/new-york/internal/sink/components/badge-demo.tsx
new file mode 100644
index 00000000000..f5c027a4b73
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/badge-demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export function BadgeDemo() {
+  return <Badge>Badge</Badge>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/badge-destructive.tsx b/apps/www/registry/new-york/internal/sink/components/badge-destructive.tsx
new file mode 100644
index 00000000000..e2a5b18058e
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export function BadgeDestructive() {
+  return <Badge variant="destructive">Destructive</Badge>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/badge-outline.tsx b/apps/www/registry/new-york/internal/sink/components/badge-outline.tsx
new file mode 100644
index 00000000000..19e3e90cfbe
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export function BadgeOutline() {
+  return <Badge variant="outline">Outline</Badge>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/badge-secondary.tsx b/apps/www/registry/new-york/internal/sink/components/badge-secondary.tsx
new file mode 100644
index 00000000000..0fb04a8070c
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export function BadgeSecondary() {
+  return <Badge variant="secondary">Secondary</Badge>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/breadcrumb-demo.tsx b/apps/www/registry/new-york/internal/sink/components/breadcrumb-demo.tsx
new file mode 100644
index 00000000000..bca7d548668
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/breadcrumb-demo.tsx
@@ -0,0 +1,49 @@
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+export function BreadcrumbDemo() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1">
+              <BreadcrumbEllipsis className="h-4 w-4" />
+              <span className="sr-only">Toggle menu</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-demo.tsx b/apps/www/registry/new-york/internal/sink/components/button-demo.tsx
new file mode 100644
index 00000000000..67ed990acb8
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-demo.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonDemo() {
+  return <Button>Button</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-destructive.tsx b/apps/www/registry/new-york/internal/sink/components/button-destructive.tsx
new file mode 100644
index 00000000000..81227165f98
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonDestructive() {
+  return <Button variant="destructive">Destructive</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-ghost.tsx b/apps/www/registry/new-york/internal/sink/components/button-ghost.tsx
new file mode 100644
index 00000000000..3c8302cf5a9
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonGhost() {
+  return <Button variant="ghost">Ghost</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-icon.tsx b/apps/www/registry/new-york/internal/sink/components/button-icon.tsx
new file mode 100644
index 00000000000..b422c44dab3
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-icon.tsx
@@ -0,0 +1,11 @@
+import { ChevronRight } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonIcon() {
+  return (
+    <Button variant="outline" size="icon">
+      <ChevronRight />
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-link.tsx b/apps/www/registry/new-york/internal/sink/components/button-link.tsx
new file mode 100644
index 00000000000..952c84b76ca
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-link.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonLink() {
+  return <Button variant="link">Link</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-loading.tsx b/apps/www/registry/new-york/internal/sink/components/button-loading.tsx
new file mode 100644
index 00000000000..7f19ced2e6b
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonLoading() {
+  return (
+    <Button disabled>
+      <Loader2 className="animate-spin" />
+      Please wait
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-outline.tsx b/apps/www/registry/new-york/internal/sink/components/button-outline.tsx
new file mode 100644
index 00000000000..a1aebff0bdb
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonOutline() {
+  return <Button variant="outline">Outline</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-secondary.tsx b/apps/www/registry/new-york/internal/sink/components/button-secondary.tsx
new file mode 100644
index 00000000000..1a514803210
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonSecondary() {
+  return <Button variant="secondary">Secondary</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-with-icon.tsx b/apps/www/registry/new-york/internal/sink/components/button-with-icon.tsx
new file mode 100644
index 00000000000..cdf017a79dd
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { MailOpen } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonWithIcon() {
+  return (
+    <Button>
+      <MailOpen /> Login with Email
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/calendar-demo.tsx b/apps/www/registry/new-york/internal/sink/components/calendar-demo.tsx
new file mode 100644
index 00000000000..a356229a2d1
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/calendar-demo.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export function CalendarDemo() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-md border shadow"
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/card-demo.tsx b/apps/www/registry/new-york/internal/sink/components/card-demo.tsx
new file mode 100644
index 00000000000..07710358862
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellRing, Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Switch } from "@/registry/new-york/ui/switch"
+
+const notifications = [
+  {
+    title: "Your call has been confirmed.",
+    description: "1 hour ago",
+  },
+  {
+    title: "You have a new message!",
+    description: "1 hour ago",
+  },
+  {
+    title: "Your subscription is expiring soon!",
+    description: "2 hours ago",
+  },
+]
+
+type CardProps = React.ComponentProps<typeof Card>
+
+export function CardDemo({ className, ...props }: CardProps) {
+  return (
+    <Card className={cn("w-[380px]", className)} {...props}>
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>You have 3 unread messages.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className=" flex items-center space-x-4 rounded-md border p-4">
+          <BellRing />
+          <div className="flex-1 space-y-1">
+            <p className="text-sm font-medium leading-none">
+              Push Notifications
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Send notifications to device.
+            </p>
+          </div>
+          <Switch />
+        </div>
+        <div>
+          {notifications.map((notification, index) => (
+            <div
+              key={index}
+              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+            >
+              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+              <div className="space-y-1">
+                <p className="text-sm font-medium leading-none">
+                  {notification.title}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {notification.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">
+          <Check /> Mark all as read
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/carousel-demo.tsx b/apps/www/registry/new-york/internal/sink/components/carousel-demo.tsx
new file mode 100644
index 00000000000..8ae483e8806
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/carousel-demo.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york/ui/carousel"
+
+export function CarouselDemo() {
+  return (
+    <Carousel className="w-full max-w-xs">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/checkbox-demo.tsx b/apps/www/registry/new-york/internal/sink/components/checkbox-demo.tsx
new file mode 100644
index 00000000000..dec12f85b1f
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/checkbox-demo.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+
+export function CheckboxDemo() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <label
+        htmlFor="terms"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/collapsible-demo.tsx b/apps/www/registry/new-york/internal/sink/components/collapsible-demo.tsx
new file mode 100644
index 00000000000..120573e4b87
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+
+export function CollapsibleDemo() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="w-[350px] space-y-2"
+    >
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">
+          @peduarte starred 3 repositories
+        </h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <ChevronsUpDown className="h-4 w-4" />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+        @radix-ui/primitives
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+          @radix-ui/colors
+        </div>
+        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+          @stitches/react
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/combobox-demo.tsx b/apps/www/registry/new-york/internal/sink/components/combobox-demo.tsx
new file mode 100644
index 00000000000..75f3c5b0e19
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/combobox-demo.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+const frameworks = [
+  {
+    value: "next.js",
+    label: "Next.js",
+  },
+  {
+    value: "sveltekit",
+    label: "SvelteKit",
+  },
+  {
+    value: "nuxt.js",
+    label: "Nuxt.js",
+  },
+  {
+    value: "remix",
+    label: "Remix",
+  },
+  {
+    value: "astro",
+    label: "Astro",
+  },
+]
+
+export function ComboboxDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
+          <ChevronsUpDown className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." className="h-9" />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  {framework.label}
+                  <Check
+                    className={cn(
+                      "ml-auto",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/command-demo.tsx b/apps/www/registry/new-york/internal/sink/components/command-demo.tsx
new file mode 100644
index 00000000000..bc3e54f1d9d
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/command-demo.tsx
@@ -0,0 +1,62 @@
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/registry/new-york/ui/command"
+
+export function CommandDemo() {
+  return (
+    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <Calendar />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <Smile />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem disabled>
+            <Calculator />
+            <span>Calculator</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <User />
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <CreditCard />
+            <span>Billing</span>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Settings />
+            <span>Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/component-wrapper.tsx b/apps/www/registry/new-york/internal/sink/components/component-wrapper.tsx
new file mode 100644
index 00000000000..961a729cac1
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/component-wrapper.tsx
@@ -0,0 +1,22 @@
+import { cn } from "@/registry/new-york/lib/utils"
+
+export function ComponentWrapper({
+  className,
+  name,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> & { name: string }) {
+  return (
+    <div
+      className={cn("flex w-full flex-col rounded-lg border", className)}
+      {...props}
+    >
+      <div className="border-b px-4 py-3">
+        <div className="text-sm font-medium">{name}</div>
+      </div>
+      <div className="flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full">
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/context-menu-demo.tsx b/apps/www/registry/new-york/internal/sink/components/context-menu-demo.tsx
new file mode 100644
index 00000000000..284afef7656
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/context-menu-demo.tsx
@@ -0,0 +1,67 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/registry/new-york/ui/context-menu"
+
+export function ContextMenuDemo() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-48">
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value="pedro">
+          <ContextMenuLabel inset>People</ContextMenuLabel>
+          <ContextMenuSeparator />
+          <ContextMenuRadioItem value="pedro">
+            Pedro Duarte
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/date-picker-demo.tsx b/apps/www/registry/new-york/internal/sink/components/date-picker-demo.tsx
new file mode 100644
index 00000000000..d78cd0b1b7e
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[240px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/dialog-demo.tsx b/apps/www/registry/new-york/internal/sink/components/dialog-demo.tsx
new file mode 100644
index 00000000000..53b17a8c2a4
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/dialog-demo.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/drawer-demo.tsx b/apps/www/registry/new-york/internal/sink/components/drawer-demo.tsx
new file mode 100644
index 00000000000..5145f119e08
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/drawer-demo.tsx
@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
+
+const data = [
+  {
+    goal: 400,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 239,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 349,
+  },
+]
+
+export function DrawerDemo() {
+  const [goal, setGoal] = React.useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Move Goal</DrawerTitle>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 pb-0">
+            <div className="flex items-center justify-center space-x-2">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(-10)}
+                disabled={goal <= 200}
+              >
+                <Minus />
+                <span className="sr-only">Decrease</span>
+              </Button>
+              <div className="flex-1 text-center">
+                <div className="text-7xl font-bold tracking-tighter">
+                  {goal}
+                </div>
+                <div className="text-[0.70rem] uppercase text-muted-foreground">
+                  Calories/day
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(10)}
+                disabled={goal >= 400}
+              >
+                <Plus />
+                <span className="sr-only">Increase</span>
+              </Button>
+            </div>
+            <div className="mt-3 h-[120px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={data}>
+                  <Bar
+                    dataKey="goal"
+                    style={
+                      {
+                        fill: "hsl(var(--foreground))",
+                        opacity: 0.9,
+                      } as React.CSSProperties
+                    }
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/dropdown-menu-demo.tsx b/apps/www/registry/new-york/internal/sink/components/dropdown-menu-demo.tsx
new file mode 100644
index 00000000000..24ec1dc8a73
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/dropdown-menu-demo.tsx
@@ -0,0 +1,75 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+export function DropdownMenuDemo() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Billing
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Settings
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Keyboard shortcuts
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Team</DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>Email</DropdownMenuItem>
+                <DropdownMenuItem>Message</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>More...</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            New Team
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>GitHub</DropdownMenuItem>
+        <DropdownMenuItem>Support</DropdownMenuItem>
+        <DropdownMenuItem disabled>API</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          Log out
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/hover-card-demo.tsx b/apps/www/registry/new-york/internal/sink/components/hover-card-demo.tsx
new file mode 100644
index 00000000000..dc17bad7fa0
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/hover-card-demo.tsx
@@ -0,0 +1,43 @@
+import { CalendarIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york/ui/hover-card"
+
+export function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="link">@nextjs</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/vercel.png" />
+            <AvatarFallback>VC</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@nextjs</h4>
+            <p className="text-sm">
+              The React Framework – created and maintained by @vercel.
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
+              <span className="text-xs text-muted-foreground">
+                Joined December 2021
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/input-demo.tsx b/apps/www/registry/new-york/internal/sink/components/input-demo.tsx
new file mode 100644
index 00000000000..98c05adf85b
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/registry/new-york/ui/input"
+
+export function InputDemo() {
+  return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/input-otp-demo.tsx b/apps/www/registry/new-york/internal/sink/components/input-otp-demo.tsx
new file mode 100644
index 00000000000..ba052e5b1e3
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/input-otp-demo.tsx
@@ -0,0 +1,24 @@
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/registry/new-york/ui/input-otp"
+
+export function InputOTPDemo() {
+  return (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/label-demo.tsx b/apps/www/registry/new-york/internal/sink/components/label-demo.tsx
new file mode 100644
index 00000000000..109078eceaa
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/label-demo.tsx
@@ -0,0 +1,13 @@
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function LabelDemo() {
+  return (
+    <div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="terms" />
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/menubar-demo.tsx b/apps/www/registry/new-york/internal/sink/components/menubar-demo.tsx
new file mode 100644
index 00000000000..71f6a874b9b
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/menubar-demo.tsx
@@ -0,0 +1,107 @@
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/registry/new-york/ui/menubar"
+
+export function MenubarDemo() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/nav-main.tsx b/apps/www/registry/new-york/internal/sink/components/nav-main.tsx
new file mode 100644
index 00000000000..cb11e74d085
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/nav-main.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible
+            key={item.title}
+            asChild
+            defaultOpen={item.isActive}
+            className="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton tooltip={item.title}>
+                  {item.icon && <item.icon />}
+                  <span>{item.title}</span>
+                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  {item.items?.map((subItem) => (
+                    <SidebarMenuSubItem key={subItem.title}>
+                      <SidebarMenuSubButton asChild>
+                        <a href={subItem.url}>
+                          <span>{subItem.title}</span>
+                        </a>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/nav-projects.tsx b/apps/www/registry/new-york/internal/sink/components/nav-projects.tsx
new file mode 100644
index 00000000000..052042ea959
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  Forward,
+  MoreHorizontal,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Forward className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal className="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/nav-user.tsx b/apps/www/registry/new-york/internal/sink/components/nav-user.tsx
new file mode 100644
index 00000000000..a12cf07ff8f
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/navigation-menu-demo.tsx b/apps/www/registry/new-york/internal/sink/components/navigation-menu-demo.tsx
new file mode 100644
index 00000000000..df81a338793
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/navigation-menu-demo.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+
+import { cn } from "@/lib/utils"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/registry/new-york/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+export function NavigationMenuDemo() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+              <li className="row-span-3">
+                <NavigationMenuLink asChild>
+                  <a
+                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                    href="/"
+                  >
+                    <div className="mb-2 mt-4 text-lg font-medium">
+                      shadcn/ui
+                    </div>
+                    <p className="text-sm leading-tight text-muted-foreground">
+                      Beautifully designed components built with Radix UI and
+                      Tailwind CSS.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+              <ListItem href="/docs" title="Introduction">
+                Re-usable components built using Radix UI and Tailwind CSS.
+              </ListItem>
+              <ListItem href="/docs/installation" title="Installation">
+                How to install dependencies and structure your app.
+              </ListItem>
+              <ListItem href="/docs/primitives/typography" title="Typography">
+                Styles for headings, paragraphs, lists...etc
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+              {components.map((component) => (
+                <ListItem
+                  key={component.title}
+                  title={component.title}
+                  href={component.href}
+                >
+                  {component.description}
+                </ListItem>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <Link href="/docs" legacyBehavior passHref>
+            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+              Documentation
+            </NavigationMenuLink>
+          </Link>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+
+const ListItem = React.forwardRef<
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <a
+          ref={ref}
+          className={cn(
+            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+            className
+          )}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  )
+})
+ListItem.displayName = "ListItem"
diff --git a/apps/www/registry/new-york/internal/sink/components/pagination-demo.tsx b/apps/www/registry/new-york/internal/sink/components/pagination-demo.tsx
new file mode 100644
index 00000000000..d4cdae4c548
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/pagination-demo.tsx
@@ -0,0 +1,38 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/registry/new-york/ui/pagination"
+
+export function PaginationDemo() {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/popover-demo.tsx b/apps/www/registry/new-york/internal/sink/components/popover-demo.tsx
new file mode 100644
index 00000000000..f82374288ee
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/popover-demo.tsx
@@ -0,0 +1,62 @@
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export function PopoverDemo() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxWidth">Max. width</Label>
+              <Input
+                id="maxWidth"
+                defaultValue="300px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxHeight">Max. height</Label>
+              <Input
+                id="maxHeight"
+                defaultValue="none"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/progress-demo.tsx b/apps/www/registry/new-york/internal/sink/components/progress-demo.tsx
new file mode 100644
index 00000000000..c4473cc526e
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/progress-demo.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import * as React from "react"
+
+import { Progress } from "@/registry/new-york/ui/progress"
+
+export function ProgressDemo() {
+  const [progress, setProgress] = React.useState(13)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return <Progress value={progress} className="w-[60%]" />
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/radio-group-demo.tsx b/apps/www/registry/new-york/internal/sink/components/radio-group-demo.tsx
new file mode 100644
index 00000000000..ce8452254ee
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/radio-group-demo.tsx
@@ -0,0 +1,21 @@
+import { Label } from "@/registry/new-york/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/registry/new-york/ui/radio-group"
+
+export function RadioGroupDemo() {
+  return (
+    <RadioGroup defaultValue="comfortable">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="default" id="r1" />
+        <Label htmlFor="r1">Default</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="comfortable" id="r2" />
+        <Label htmlFor="r2">Comfortable</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="compact" id="r3" />
+        <Label htmlFor="r3">Compact</Label>
+      </div>
+    </RadioGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/resizable-handle.tsx b/apps/www/registry/new-york/internal/sink/components/resizable-handle.tsx
new file mode 100644
index 00000000000..c4f33cad435
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/resizable-handle.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york/ui/resizable"
+
+export function ResizableHandleDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/scroll-area-demo.tsx b/apps/www/registry/new-york/internal/sink/components/scroll-area-demo.tsx
new file mode 100644
index 00000000000..13a7fc9d33c
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/scroll-area-demo.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
+import { Separator } from "@/registry/new-york/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+export function ScrollAreaDemo() {
+  return (
+    <ScrollArea className="h-72 w-48 rounded-md border">
+      <div className="p-4">
+        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+        {tags.map((tag) => (
+          <React.Fragment key={tag}>
+            <div className="text-sm">{tag}</div>
+            <Separator className="my-2" />
+          </React.Fragment>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/select-demo.tsx b/apps/www/registry/new-york/internal/sink/components/select-demo.tsx
new file mode 100644
index 00000000000..1ac20525aaa
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/select-demo.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export function SelectDemo() {
+  return (
+    <Select>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes">Grapes</SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/separator-demo.tsx b/apps/www/registry/new-york/internal/sink/components/separator-demo.tsx
new file mode 100644
index 00000000000..b8aa9c4e997
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/separator-demo.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "@/registry/new-york/ui/separator"
+
+export function SeparatorDemo() {
+  return (
+    <div>
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+        <p className="text-sm text-muted-foreground">
+          An open-source UI component library.
+        </p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-sm">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/sheet-demo.tsx b/apps/www/registry/new-york/internal/sink/components/sheet-demo.tsx
new file mode 100644
index 00000000000..a162e20c985
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/sheet-demo.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/new-york/ui/sheet"
+
+export function SheetDemo() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you're done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button type="submit">Save changes</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/skeleton-demo.tsx b/apps/www/registry/new-york/internal/sink/components/skeleton-demo.tsx
new file mode 100644
index 00000000000..1ce2da3e332
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/skeleton-demo.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/registry/new-york/ui/skeleton"
+
+export function SkeletonDemo() {
+  return (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/slider-demo.tsx b/apps/www/registry/new-york/internal/sink/components/slider-demo.tsx
new file mode 100644
index 00000000000..b25b00deb02
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/slider-demo.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils"
+import { Slider } from "@/registry/new-york/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export function SliderDemo({ className, ...props }: SliderProps) {
+  return (
+    <Slider
+      defaultValue={[50]}
+      max={100}
+      step={1}
+      className={cn("w-[60%]", className)}
+      {...props}
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/sonner-demo.tsx b/apps/www/registry/new-york/internal/sink/components/sonner-demo.tsx
new file mode 100644
index 00000000000..b9e6d9f343c
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/sonner-demo.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { toast } from "sonner"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export function SonnerDemo() {
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast("Event has been created", {
+          description: "Sunday, December 03, 2023 at 9:00 AM",
+          action: {
+            label: "Undo",
+            onClick: () => console.log("Undo"),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/switch-demo.tsx b/apps/www/registry/new-york/internal/sink/components/switch-demo.tsx
new file mode 100644
index 00000000000..d2692d83838
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/switch-demo.tsx
@@ -0,0 +1,11 @@
+import { Label } from "@/registry/new-york/ui/label"
+import { Switch } from "@/registry/new-york/ui/switch"
+
+export function SwitchDemo() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch id="airplane-mode" />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/table-demo.tsx b/apps/www/registry/new-york/internal/sink/components/table-demo.tsx
new file mode 100644
index 00000000000..9cd648ef40c
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/table-demo.tsx
@@ -0,0 +1,87 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/ui/table"
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
+
+export function TableDemo() {
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/tabs-demo.tsx b/apps/www/registry/new-york/internal/sink/components/tabs-demo.tsx
new file mode 100644
index 00000000000..b3d4a2b22f2
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/tabs-demo.tsx
@@ -0,0 +1,74 @@
+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"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york/ui/tabs"
+
+export function TabsDemo() {
+  return (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <Card>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>
+              Make changes to your account here. Click save when you're done.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="username">Username</Label>
+              <Input id="username" defaultValue="@peduarte" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button>Save changes</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+      <TabsContent value="password">
+        <Card>
+          <CardHeader>
+            <CardTitle>Password</CardTitle>
+            <CardDescription>
+              Change your password here. After saving, you'll be logged out.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="current">Current password</Label>
+              <Input id="current" type="password" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="new">New password</Label>
+              <Input id="new" type="password" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button>Save password</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/team-switcher.tsx b/apps/www/registry/new-york/internal/sink/components/team-switcher.tsx
new file mode 100644
index 00000000000..a64108e7f5e
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/team-switcher.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">
+                  {activeTeam.name}
+                </span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/textarea-demo.tsx b/apps/www/registry/new-york/internal/sink/components/textarea-demo.tsx
new file mode 100644
index 00000000000..f641e597287
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/textarea-demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/registry/new-york/ui/textarea"
+
+export function TextareaDemo() {
+  return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/toast-demo.tsx b/apps/www/registry/new-york/internal/sink/components/toast-demo.tsx
new file mode 100644
index 00000000000..f58dc375819
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toast-demo.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { useToast } from "@/registry/new-york/hooks/use-toast"
+import { Button } from "@/registry/new-york/ui/button"
+import { ToastAction } from "@/registry/new-york/ui/toast"
+
+export function ToastDemo() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          title: "Scheduled: Catch up ",
+          description: "Friday, February 10, 2023 at 5:57 PM",
+          action: (
+            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
+          ),
+        })
+      }}
+    >
+      Add to calendar
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/toggle-demo.tsx b/apps/www/registry/new-york/internal/sink/components/toggle-demo.tsx
new file mode 100644
index 00000000000..3d2ae617707
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export function ToggleDemo() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/toggle-disabled.tsx b/apps/www/registry/new-york/internal/sink/components/toggle-disabled.tsx
new file mode 100644
index 00000000000..871b7d1b98b
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export function ToggleDisabled() {
+  return (
+    <Toggle aria-label="Toggle italic" disabled>
+      <Underline className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/toggle-group-demo.tsx b/apps/www/registry/new-york/internal/sink/components/toggle-group-demo.tsx
new file mode 100644
index 00000000000..40b6008c1e8
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toggle-group-demo.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/toggle-outline.tsx b/apps/www/registry/new-york/internal/sink/components/toggle-outline.tsx
new file mode 100644
index 00000000000..4ec135febe6
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toggle-outline.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export function ToggleOutline() {
+  return (
+    <Toggle variant="outline" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/toggle-with-text.tsx b/apps/www/registry/new-york/internal/sink/components/toggle-with-text.tsx
new file mode 100644
index 00000000000..41672023dea
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export function ToggleWithText() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Italic />
+      Italic
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/tooltip-demo.tsx b/apps/www/registry/new-york/internal/sink/components/tooltip-demo.tsx
new file mode 100644
index 00000000000..502a459a1de
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/tooltip-demo.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/new-york/ui/tooltip"
+
+export function TooltipDemo() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Hover</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Add to library</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/page.tsx b/apps/www/registry/new-york/internal/sink/page.tsx
new file mode 100644
index 00000000000..9513f6ce57a
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/page.tsx
@@ -0,0 +1,273 @@
+import { AccordionDemo } from "@/registry/new-york/internal/sink/components/accordion-demo"
+import { AlertDemo } from "@/registry/new-york/internal/sink/components/alert-demo"
+import { AlertDialogDemo } from "@/registry/new-york/internal/sink/components/alert-dialog-demo"
+import { AppSidebar } from "@/registry/new-york/internal/sink/components/app-sidebar"
+import { AspectRatioDemo } from "@/registry/new-york/internal/sink/components/aspect-ratio-demo"
+import { AvatarDemo } from "@/registry/new-york/internal/sink/components/avatar-demo"
+import { BadgeDemo } from "@/registry/new-york/internal/sink/components/badge-demo"
+import { BadgeDestructive } from "@/registry/new-york/internal/sink/components/badge-destructive"
+import { BadgeOutline } from "@/registry/new-york/internal/sink/components/badge-outline"
+import { BadgeSecondary } from "@/registry/new-york/internal/sink/components/badge-secondary"
+import { BreadcrumbDemo } from "@/registry/new-york/internal/sink/components/breadcrumb-demo"
+import { ButtonDemo } from "@/registry/new-york/internal/sink/components/button-demo"
+import { ButtonDestructive } from "@/registry/new-york/internal/sink/components/button-destructive"
+import { ButtonGhost } from "@/registry/new-york/internal/sink/components/button-ghost"
+import { ButtonLink } from "@/registry/new-york/internal/sink/components/button-link"
+import { ButtonLoading } from "@/registry/new-york/internal/sink/components/button-loading"
+import { ButtonOutline } from "@/registry/new-york/internal/sink/components/button-outline"
+import { ButtonSecondary } from "@/registry/new-york/internal/sink/components/button-secondary"
+import { ButtonWithIcon } from "@/registry/new-york/internal/sink/components/button-with-icon"
+import { CalendarDemo } from "@/registry/new-york/internal/sink/components/calendar-demo"
+import { CardDemo } from "@/registry/new-york/internal/sink/components/card-demo"
+import { CarouselDemo } from "@/registry/new-york/internal/sink/components/carousel-demo"
+import { CheckboxDemo } from "@/registry/new-york/internal/sink/components/checkbox-demo"
+import { CollapsibleDemo } from "@/registry/new-york/internal/sink/components/collapsible-demo"
+import { ComboboxDemo } from "@/registry/new-york/internal/sink/components/combobox-demo"
+import { CommandDemo } from "@/registry/new-york/internal/sink/components/command-demo"
+import { ComponentWrapper } from "@/registry/new-york/internal/sink/components/component-wrapper"
+import { ContextMenuDemo } from "@/registry/new-york/internal/sink/components/context-menu-demo"
+import { DatePickerDemo } from "@/registry/new-york/internal/sink/components/date-picker-demo"
+import { DialogDemo } from "@/registry/new-york/internal/sink/components/dialog-demo"
+import { DrawerDemo } from "@/registry/new-york/internal/sink/components/drawer-demo"
+import { DropdownMenuDemo } from "@/registry/new-york/internal/sink/components/dropdown-menu-demo"
+import { HoverCardDemo } from "@/registry/new-york/internal/sink/components/hover-card-demo"
+import { InputDemo } from "@/registry/new-york/internal/sink/components/input-demo"
+import { InputOTPDemo } from "@/registry/new-york/internal/sink/components/input-otp-demo"
+import { LabelDemo } from "@/registry/new-york/internal/sink/components/label-demo"
+import { MenubarDemo } from "@/registry/new-york/internal/sink/components/menubar-demo"
+import { NavigationMenuDemo } from "@/registry/new-york/internal/sink/components/navigation-menu-demo"
+import { PaginationDemo } from "@/registry/new-york/internal/sink/components/pagination-demo"
+import { PopoverDemo } from "@/registry/new-york/internal/sink/components/popover-demo"
+import { ProgressDemo } from "@/registry/new-york/internal/sink/components/progress-demo"
+import { RadioGroupDemo } from "@/registry/new-york/internal/sink/components/radio-group-demo"
+import { ResizableHandleDemo } from "@/registry/new-york/internal/sink/components/resizable-handle"
+import { ScrollAreaDemo } from "@/registry/new-york/internal/sink/components/scroll-area-demo"
+import { SelectDemo } from "@/registry/new-york/internal/sink/components/select-demo"
+import { SeparatorDemo } from "@/registry/new-york/internal/sink/components/separator-demo"
+import { SheetDemo } from "@/registry/new-york/internal/sink/components/sheet-demo"
+import { SkeletonDemo } from "@/registry/new-york/internal/sink/components/skeleton-demo"
+import { SliderDemo } from "@/registry/new-york/internal/sink/components/slider-demo"
+import { SonnerDemo } from "@/registry/new-york/internal/sink/components/sonner-demo"
+import { SwitchDemo } from "@/registry/new-york/internal/sink/components/switch-demo"
+import { TableDemo } from "@/registry/new-york/internal/sink/components/table-demo"
+import { TabsDemo } from "@/registry/new-york/internal/sink/components/tabs-demo"
+import { TextareaDemo } from "@/registry/new-york/internal/sink/components/textarea-demo"
+import { ToastDemo } from "@/registry/new-york/internal/sink/components/toast-demo"
+import { ToggleDemo } from "@/registry/new-york/internal/sink/components/toggle-demo"
+import { ToggleDisabled } from "@/registry/new-york/internal/sink/components/toggle-disabled"
+import { ToggleGroupDemo } from "@/registry/new-york/internal/sink/components/toggle-group-demo"
+import { ToggleOutline } from "@/registry/new-york/internal/sink/components/toggle-outline"
+import { ToggleWithText } from "@/registry/new-york/internal/sink/components/toggle-with-text"
+import { TooltipDemo } from "@/registry/new-york/internal/sink/components/tooltip-demo"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function SinkPage() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <ComponentWrapper name="Accordion">
+              <AccordionDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Alert">
+              <AlertDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="AlertDialog">
+              <AlertDialogDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="AspectRatio">
+              <AspectRatioDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Avatar">
+              <AvatarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Badge">
+              <BadgeDemo />
+              <BadgeDestructive />
+              <BadgeOutline />
+              <BadgeSecondary />
+            </ComponentWrapper>
+            <ComponentWrapper name="Breadcrumb">
+              <BreadcrumbDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Button">
+              <div className="flex items-center gap-2">
+                <ButtonDemo />
+                <ButtonDestructive />
+                <ButtonGhost />
+                <ButtonLink />
+              </div>
+              <div className="flex items-center gap-2">
+                <ButtonLoading />
+                <ButtonOutline />
+                <ButtonSecondary />
+              </div>
+              <div className="flex items-center gap-2">
+                <ButtonWithIcon />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper name="Calendar">
+              <CalendarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Card">
+              <CardDemo className="w-full" />
+            </ComponentWrapper>
+            <ComponentWrapper
+              name="Carousel"
+              className="[&_.max-w-xs]:max-w-[70%]"
+            >
+              <CarouselDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Checkbox">
+              <CheckboxDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Collapsible">
+              <CollapsibleDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Combobox">
+              <ComboboxDemo />
+            </ComponentWrapper>
+            <ComponentWrapper
+              name="Command"
+              className="[&_[cmdk-root]]:md:min-w-max"
+            >
+              <CommandDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="ContextMenu">
+              <ContextMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="DatePicker">
+              <DatePickerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Dialog">
+              <DialogDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Drawer">
+              <DrawerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="DropdownMenu">
+              <DropdownMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="HoverCard">
+              <HoverCardDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Input">
+              <InputDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="InputOTP">
+              <InputOTPDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Label">
+              <LabelDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Menubar">
+              <MenubarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="NavigationMenu" className="col-span-2">
+              <NavigationMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Pagination">
+              <PaginationDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Popover">
+              <PopoverDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Progress">
+              <ProgressDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="RadioGroup">
+              <RadioGroupDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Resizable" className="col-span-2">
+              <ResizableHandleDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="ScrollArea">
+              <ScrollAreaDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Select">
+              <SelectDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Separator">
+              <SeparatorDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Sheet">
+              <SheetDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Skeleton">
+              <SkeletonDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Slider">
+              <SliderDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Sonner">
+              <SonnerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Switch">
+              <SwitchDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Table" className="col-span-2">
+              <TableDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Tabs">
+              <TabsDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Textarea">
+              <TextareaDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Toast">
+              <ToastDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Toggle">
+              <div className="flex items-center gap-2">
+                <ToggleDemo />
+                <ToggleDisabled />
+                <ToggleOutline />
+                <ToggleWithText />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper name="ToggleGroup">
+              <ToggleGroupDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Tooltip">
+              <TooltipDemo />
+            </ComponentWrapper>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/apps/www/registry/new-york/ui/accordion.tsx b/apps/www/registry/new-york/ui/accordion.tsx
index 8dcf9b6fa52..2f55a32f4d3 100644
--- a/apps/www/registry/new-york/ui/accordion.tsx
+++ b/apps/www/registry/new-york/ui/accordion.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { ChevronDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -28,13 +28,13 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
diff --git a/apps/www/registry/new-york/ui/breadcrumb.tsx b/apps/www/registry/new-york/ui/breadcrumb.tsx
index 26560efcc48..60e6c96f72f 100644
--- a/apps/www/registry/new-york/ui/breadcrumb.tsx
+++ b/apps/www/registry/new-york/ui/breadcrumb.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
-import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
 import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -80,10 +80,10 @@ const BreadcrumbSeparator = ({
   <li
     role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
     {...props}
   >
-    {children ?? <ChevronRightIcon />}
+    {children ?? <ChevronRight />}
   </li>
 )
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
@@ -98,7 +98,7 @@ const BreadcrumbEllipsis = ({
     className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-    <DotsHorizontalIcon className="h-4 w-4" />
+    <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
 )
diff --git a/apps/www/registry/new-york/ui/button.tsx b/apps/www/registry/new-york/ui/button.tsx
index 0270f644a89..65d4fcd9ca7 100644
--- a/apps/www/registry/new-york/ui/button.tsx
+++ b/apps/www/registry/new-york/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx
index 85571a1ca01..a4fa7f03d9b 100644
--- a/apps/www/registry/new-york/ui/calendar.tsx
+++ b/apps/www/registry/new-york/ui/calendar.tsx
@@ -1,72 +1,213 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
-import { DayPicker } from "react-day-picker"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/new-york/ui/button"
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+import { Button, buttonVariants } from "@/registry/new-york/ui/button"
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
   ...props
-}: CalendarProps) {
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "bg-popover absolute inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
         ),
         day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
       }}
       {...props}
     />
   )
 }
-Calendar.displayName = "Calendar"
 
-export { Calendar }
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/apps/www/registry/new-york/ui/card.tsx b/apps/www/registry/new-york/ui/card.tsx
index 77e9fb789bf..cabfbfc59d9 100644
--- a/apps/www/registry/new-york/ui/card.tsx
+++ b/apps/www/registry/new-york/ui/card.tsx
@@ -30,10 +30,10 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
     ref={ref}
     className={cn("font-semibold leading-none tracking-tight", className)}
     {...props}
@@ -42,10 +42,10 @@ const CardTitle = React.forwardRef<
 CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
diff --git a/apps/www/registry/new-york/ui/carousel.tsx b/apps/www/registry/new-york/ui/carousel.tsx
index 494acd23b7d..7b006fd659d 100644
--- a/apps/www/registry/new-york/ui/carousel.tsx
+++ b/apps/www/registry/new-york/ui/carousel.tsx
@@ -1,10 +1,10 @@
 "use client"
 
 import * as React from "react"
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
@@ -216,7 +216,7 @@ const CarouselPrevious = React.forwardRef<
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeftIcon className="h-4 w-4" />
+      <ArrowLeft className="h-4 w-4" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -245,7 +245,7 @@ const CarouselNext = React.forwardRef<
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRightIcon className="h-4 w-4" />
+      <ArrowRight className="h-4 w-4" />
       <span className="sr-only">Next slide</span>
     </Button>
   )
diff --git a/apps/www/registry/new-york/ui/chart.tsx b/apps/www/registry/new-york/ui/chart.tsx
index 0510f5bea54..f7b762f5575 100644
--- a/apps/www/registry/new-york/ui/chart.tsx
+++ b/apps/www/registry/new-york/ui/chart.tsx
@@ -2,11 +2,6 @@
 
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
-import {
-  NameType,
-  Payload,
-  ValueType,
-} from "recharts/types/component/DefaultTooltipContent"
 
 import { cn } from "@/lib/utils"
 
@@ -74,7 +69,7 @@ ChartContainer.displayName = "Chart"
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
+    ([, config]) => config.theme || config.color
   )
 
   if (!colorConfig.length) {
@@ -144,7 +139,7 @@ const ChartTooltipContent = React.forwardRef<
       }
 
       const [item] = payload
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`
       const itemConfig = getPayloadConfigFromPayload(config, item, key)
       const value =
         !labelKey && typeof label === "string"
@@ -190,70 +185,72 @@ const ChartTooltipContent = React.forwardRef<
       >
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
+          {payload
+            .filter((item) => item.type !== "none")
+            .map((item, index) => {
+              const key = `${nameKey || item.name || item.dataKey || "value"}`
+              const itemConfig = getPayloadConfigFromPayload(config, item, key)
+              const indicatorColor = color || item.payload.fill || item.color
+
+              return (
+                <div
+                  key={item.dataKey}
+                  className={cn(
+                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                    indicator === "dot" && "items-center"
+                  )}
+                >
+                  {formatter && item?.value !== undefined && item.name ? (
+                    formatter(item.value, item.name, item, index, item.payload)
+                  ) : (
+                    <>
+                      {itemConfig?.icon ? (
+                        <itemConfig.icon />
+                      ) : (
+                        !hideIndicator && (
+                          <div
+                            className={cn(
+                              "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                              {
+                                "h-2.5 w-2.5": indicator === "dot",
+                                "w-1": indicator === "line",
+                                "w-0 border-[1.5px] border-dashed bg-transparent":
+                                  indicator === "dashed",
+                                "my-0.5": nestLabel && indicator === "dashed",
+                              }
+                            )}
+                            style={
+                              {
+                                "--color-bg": indicatorColor,
+                                "--color-border": indicatorColor,
+                              } as React.CSSProperties
                             }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
+                          />
+                        )
                       )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
+                      <div
+                        className={cn(
+                          "flex flex-1 justify-between leading-none",
+                          nestLabel ? "items-end" : "items-center"
+                        )}
+                      >
+                        <div className="grid gap-1.5">
+                          {nestLabel ? tooltipLabel : null}
+                          <span className="text-muted-foreground">
+                            {itemConfig?.label || item.name}
+                          </span>
+                        </div>
+                        {item.value && (
+                          <span className="font-mono font-medium tabular-nums text-foreground">
+                            {item.value.toLocaleString()}
+                          </span>
+                        )}
                       </div>
-                      {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
+                    </>
+                  )}
+                </div>
+              )
+            })}
         </div>
       </div>
     )
@@ -290,31 +287,33 @@ const ChartLegendContent = React.forwardRef<
           className
         )}
       >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item) => {
+            const key = `${nameKey || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+            return (
+              <div
+                key={item.value}
+                className={cn(
+                  "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+                )}
+              >
+                {itemConfig?.icon && !hideIcon ? (
+                  <itemConfig.icon />
+                ) : (
+                  <div
+                    className="h-2 w-2 shrink-0 rounded-[2px]"
+                    style={{
+                      backgroundColor: item.color,
+                    }}
+                  />
+                )}
+                {itemConfig?.label}
+              </div>
+            )
+          })}
       </div>
     )
   }
diff --git a/apps/www/registry/new-york/ui/checkbox.tsx b/apps/www/registry/new-york/ui/checkbox.tsx
index 7d2b3c3bdfc..c6fdd071b5d 100644
--- a/apps/www/registry/new-york/ui/checkbox.tsx
+++ b/apps/www/registry/new-york/ui/checkbox.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "@radix-ui/react-icons"
+import { Check } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <CheckIcon className="h-4 w-4" />
+      <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
diff --git a/apps/www/registry/new-york/ui/command.tsx b/apps/www/registry/new-york/ui/command.tsx
index e9de195b0ab..b08184b8359 100644
--- a/apps/www/registry/new-york/ui/command.tsx
+++ b/apps/www/registry/new-york/ui/command.tsx
@@ -2,8 +2,8 @@
 
 import * as React from "react"
 import { type DialogProps } from "@radix-ui/react-dialog"
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
 import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Dialog, DialogContent } from "@/registry/new-york/ui/dialog"
@@ -23,9 +23,7 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
@@ -42,7 +40,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
@@ -117,7 +115,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}
diff --git a/apps/www/registry/new-york/ui/context-menu.tsx b/apps/www/registry/new-york/ui/context-menu.tsx
index 654810acec0..1306dd2673e 100644
--- a/apps/www/registry/new-york/ui/context-menu.tsx
+++ b/apps/www/registry/new-york/ui/context-menu.tsx
@@ -2,11 +2,7 @@
 
 import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -38,7 +34,7 @@ const ContextMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto h-4 w-4" />
   </ContextMenuPrimitive.SubTrigger>
 ))
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
@@ -50,7 +46,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
       className
     )}
     {...props}
@@ -66,7 +62,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
         className
       )}
       {...props}
@@ -108,7 +104,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -131,7 +127,7 @@ const ContextMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <Circle className="h-4 w-4 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/apps/www/registry/new-york/ui/dialog.tsx b/apps/www/registry/new-york/ui/dialog.tsx
index 95b0d38ac04..1647513eced 100644
--- a/apps/www/registry/new-york/ui/dialog.tsx
+++ b/apps/www/registry/new-york/ui/dialog.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <Cross2Icon className="h-4 w-4" />
+        <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/apps/www/registry/new-york/ui/dropdown-menu.tsx b/apps/www/registry/new-york/ui/dropdown-menu.tsx
index 242b07a63dd..5a20503b547 100644
--- a/apps/www/registry/new-york/ui/dropdown-menu.tsx
+++ b/apps/www/registry/new-york/ui/dropdown-menu.tsx
@@ -2,11 +2,7 @@
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -31,14 +27,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -51,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
       className
     )}
     {...props}
@@ -69,8 +65,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
       )}
       {...props}
@@ -88,7 +84,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -112,7 +108,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -135,7 +131,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <Circle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/apps/www/registry/new-york/ui/form.tsx b/apps/www/registry/new-york/ui/form.tsx
index 3bdefe4129c..ff34718797a 100644
--- a/apps/www/registry/new-york/ui/form.tsx
+++ b/apps/www/registry/new-york/ui/form.tsx
@@ -5,11 +5,11 @@ import * as LabelPrimitive from "@radix-ui/react-label"
 import { Slot } from "@radix-ui/react-slot"
 import {
   Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
   FormProvider,
   useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
 } from "react-hook-form"
 
 import { cn } from "@/lib/utils"
@@ -147,7 +147,7 @@ const FormMessage = React.forwardRef<
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+  const body = error ? String(error?.message ?? "") : children
 
   if (!body) {
     return null
diff --git a/apps/www/registry/new-york/ui/hover-card.tsx b/apps/www/registry/new-york/ui/hover-card.tsx
index e54d91cf81f..74efa6bee70 100644
--- a/apps/www/registry/new-york/ui/hover-card.tsx
+++ b/apps/www/registry/new-york/ui/hover-card.tsx
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
       className
     )}
     {...props}
diff --git a/apps/www/registry/new-york/ui/input-otp.tsx b/apps/www/registry/new-york/ui/input-otp.tsx
index 84d07209056..eb2a1baea86 100644
--- a/apps/www/registry/new-york/ui/input-otp.tsx
+++ b/apps/www/registry/new-york/ui/input-otp.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { DashIcon } from "@radix-ui/react-icons"
 import { OTPInput, OTPInputContext } from "input-otp"
+import { Minus } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -63,7 +63,7 @@ const InputOTPSeparator = React.forwardRef<
   React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
-    <DashIcon />
+    <Minus />
   </div>
 ))
 InputOTPSeparator.displayName = "InputOTPSeparator"
diff --git a/apps/www/registry/new-york/ui/input.tsx b/apps/www/registry/new-york/ui/input.tsx
index 5af26b2c1a9..69b64fb2455 100644
--- a/apps/www/registry/new-york/ui/input.tsx
+++ b/apps/www/registry/new-york/ui/input.tsx
@@ -2,16 +2,13 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm 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",
+          "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",
           className
         )}
         ref={ref}
diff --git a/apps/www/registry/new-york/ui/menubar.tsx b/apps/www/registry/new-york/ui/menubar.tsx
index 010145cd02e..e364e469238 100644
--- a/apps/www/registry/new-york/ui/menubar.tsx
+++ b/apps/www/registry/new-york/ui/menubar.tsx
@@ -1,24 +1,40 @@
 "use client"
 
 import * as React from "react"
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-const MenubarMenu = MenubarPrimitive.Menu
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu {...props} />
+}
 
-const MenubarGroup = MenubarPrimitive.Group
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group {...props} />
+}
 
-const MenubarPortal = MenubarPrimitive.Portal
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal {...props} />
+}
 
-const MenubarSub = MenubarPrimitive.Sub
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup {...props} />
+}
 
-const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
 
 const Menubar = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Root>,
@@ -66,7 +82,7 @@ const MenubarSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto h-4 w-4" />
   </MenubarPrimitive.SubTrigger>
 ))
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
@@ -78,7 +94,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
       className
     )}
     {...props}
@@ -101,7 +117,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
           className
         )}
         {...props}
@@ -144,7 +160,7 @@ const MenubarCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
@@ -166,7 +182,7 @@ const MenubarRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <Circle className="h-4 w-4 fill-current" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/apps/www/registry/new-york/ui/navigation-menu.tsx b/apps/www/registry/new-york/ui/navigation-menu.tsx
index 5841fb39856..056354bf824 100644
--- a/apps/www/registry/new-york/ui/navigation-menu.tsx
+++ b/apps/www/registry/new-york/ui/navigation-menu.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
 )
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -54,7 +54,7 @@ const NavigationMenuTrigger = React.forwardRef<
     {...props}
   >
     {children}{" "}
-    <ChevronDownIcon
+    <ChevronDown
       className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
diff --git a/apps/www/registry/new-york/ui/pagination.tsx b/apps/www/registry/new-york/ui/pagination.tsx
index d64bde8fb07..4a547173c96 100644
--- a/apps/www/registry/new-york/ui/pagination.tsx
+++ b/apps/www/registry/new-york/ui/pagination.tsx
@@ -1,9 +1,5 @@
 import * as React from "react"
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DotsHorizontalIcon,
-} from "@radix-ui/react-icons"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { ButtonProps, buttonVariants } from "@/registry/new-york/ui/button"
@@ -73,7 +69,7 @@ const PaginationPrevious = ({
     className={cn("gap-1 pl-2.5", className)}
     {...props}
   >
-    <ChevronLeftIcon className="h-4 w-4" />
+    <ChevronLeft className="h-4 w-4" />
     <span>Previous</span>
   </PaginationLink>
 )
@@ -90,7 +86,7 @@ const PaginationNext = ({
     {...props}
   >
     <span>Next</span>
-    <ChevronRightIcon className="h-4 w-4" />
+    <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 )
 PaginationNext.displayName = "PaginationNext"
@@ -104,7 +100,7 @@ const PaginationEllipsis = ({
     className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-    <DotsHorizontalIcon className="h-4 w-4" />
+    <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>
 )
diff --git a/apps/www/registry/new-york/ui/popover.tsx b/apps/www/registry/new-york/ui/popover.tsx
index 29c7bd2a443..70a28f6610b 100644
--- a/apps/www/registry/new-york/ui/popover.tsx
+++ b/apps/www/registry/new-york/ui/popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
         className
       )}
       {...props}
diff --git a/apps/www/registry/new-york/ui/radio-group.tsx b/apps/www/registry/new-york/ui/radio-group.tsx
index cf016735c0a..0bdf6853fcc 100644
--- a/apps/www/registry/new-york/ui/radio-group.tsx
+++ b/apps/www/registry/new-york/ui/radio-group.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { CheckIcon } from "@radix-ui/react-icons"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -34,7 +34,7 @@ const RadioGroupItem = React.forwardRef<
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="h-3.5 w-3.5 fill-primary" />
+        <Circle className="h-3.5 w-3.5 fill-primary" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
diff --git a/apps/www/registry/new-york/ui/resizable.tsx b/apps/www/registry/new-york/ui/resizable.tsx
index 5942eb05e60..f4bc5586b67 100644
--- a/apps/www/registry/new-york/ui/resizable.tsx
+++ b/apps/www/registry/new-york/ui/resizable.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+import { GripVertical } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from "@/lib/utils"
@@ -36,7 +36,7 @@ const ResizableHandle = ({
   >
     {withHandle && (
       <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+        <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>
diff --git a/apps/www/registry/new-york/ui/select.tsx b/apps/www/registry/new-york/ui/select.tsx
index ac2a8f2b9c7..6e637f7dc67 100644
--- a/apps/www/registry/new-york/ui/select.tsx
+++ b/apps/www/registry/new-york/ui/select.tsx
@@ -1,13 +1,8 @@
 "use client"
 
 import * as React from "react"
-import {
-  CaretSortIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "@radix-ui/react-icons"
 import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -24,14 +19,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
+      <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -49,7 +44,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUpIcon />
+    <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
@@ -66,7 +61,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDownIcon />
+    <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName =
@@ -80,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -130,7 +125,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
diff --git a/apps/www/registry/new-york/ui/sheet.tsx b/apps/www/registry/new-york/ui/sheet.tsx
index 417e7e10a73..272cb721eb4 100644
--- a/apps/www/registry/new-york/ui/sheet.tsx
+++ b/apps/www/registry/new-york/ui/sheet.tsx
@@ -2,8 +2,8 @@
 
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
 import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <Cross2Icon className="h-4 w-4" />
+        <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
       {children}
diff --git a/apps/www/registry/new-york/ui/sidebar.tsx b/apps/www/registry/new-york/ui/sidebar.tsx
new file mode 100644
index 00000000000..1e67d1caad5
--- /dev/null
+++ b/apps/www/registry/new-york/ui/sidebar.tsx
@@ -0,0 +1,773 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import { useIsMobile } from "@/registry/new-york/hooks/use-mobile"
+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 { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/registry/new-york/ui/sheet"
+import { Skeleton } from "@/registry/new-york/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/new-york/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContextProps>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <SheetHeader className="sr-only">
+              <SheetTitle>Sidebar</SheetTitle>
+              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            </SheetHeader>
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden text-sidebar-foreground md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/apps/www/registry/new-york/ui/textarea.tsx b/apps/www/registry/new-york/ui/textarea.tsx
index d1258e47a43..e56b0affd7e 100644
--- a/apps/www/registry/new-york/ui/textarea.tsx
+++ b/apps/www/registry/new-york/ui/textarea.tsx
@@ -2,23 +2,21 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-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-sm 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",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
+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}
+    />
+  )
+})
 Textarea.displayName = "Textarea"
 
 export { Textarea }
diff --git a/apps/www/registry/new-york/ui/toast.tsx b/apps/www/registry/new-york/ui/toast.tsx
index cc4e0ab2f00..40ac9ddb7d5 100644
--- a/apps/www/registry/new-york/ui/toast.tsx
+++ b/apps/www/registry/new-york/ui/toast.tsx
@@ -1,9 +1,9 @@
 "use client"
 
 import * as React from "react"
-import { Cross2Icon } from "@radix-ui/react-icons"
 import * as ToastPrimitives from "@radix-ui/react-toast"
 import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -83,7 +83,7 @@ const ToastClose = React.forwardRef<
     toast-close=""
     {...props}
   >
-    <Cross2Icon className="h-4 w-4" />
+    <X className="h-4 w-4" />
   </ToastPrimitives.Close>
 ))
 ToastClose.displayName = ToastPrimitives.Close.displayName
diff --git a/apps/www/registry/new-york/ui/toggle.tsx b/apps/www/registry/new-york/ui/toggle.tsx
index c50c2733f48..db35d78be41 100644
--- a/apps/www/registry/new-york/ui/toggle.tsx
+++ b/apps/www/registry/new-york/ui/toggle.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -16,9 +16,9 @@ const toggleVariants = cva(
           "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-9 px-3",
-        sm: "h-8 px-2",
-        lg: "h-10 px-3",
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
       },
     },
     defaultVariants: {
diff --git a/apps/www/registry/new-york/ui/tooltip.tsx b/apps/www/registry/new-york/ui/tooltip.tsx
index 9e748210342..28e19183f4d 100644
--- a/apps/www/registry/new-york/ui/tooltip.tsx
+++ b/apps/www/registry/new-york/ui/tooltip.tsx
@@ -15,15 +15,17 @@ const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
diff --git a/apps/www/registry/new-york/v0/sidebar-16.tsx b/apps/www/registry/new-york/v0/sidebar-16.tsx
new file mode 100644
index 00000000000..e8e312e879f
--- /dev/null
+++ b/apps/www/registry/new-york/v0/sidebar-16.tsx
@@ -0,0 +1,648 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import {
+  BadgeCheck,
+  Bell,
+  BookOpen,
+  Bot,
+  ChevronRight,
+  ChevronsUpDown,
+  Command,
+  CreditCard,
+  Folder,
+  Frame,
+  LifeBuoy,
+  LogOut,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Send,
+  Settings2,
+  Share,
+  Sparkles,
+  SquareTerminal,
+  Trash2,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Icons } from "@/components/icons"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/registry/new-york/ui/navigation-menu"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+
+export const iframeHeight = "800px"
+
+export const description = "An inset sidebar with site header navigation."
+
+const HEADER_HEIGHT = "4rem"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: LifeBuoy,
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+}
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+export default function Page() {
+  const [open, setOpen] = React.useState(true)
+  const { isMobile } = useSidebar()
+
+  return (
+    <div
+      style={
+        {
+          "--header-height": HEADER_HEIGHT,
+        } as React.CSSProperties
+      }
+    >
+      <header className="sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20">
+        <div className="flex items-center gap-2 w-full">
+          <Button
+            className="hidden md:flex"
+            variant="ghost"
+            size="icon"
+            onClick={() => setOpen(!open)}
+          >
+            <Sidebar />
+          </Button>
+
+          <div className="mx-auto flex items-center gap-2">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <Command className="size-4" />
+            </div>
+            <Separator orientation="vertical" className="ml-4 h-4" />
+            <NavigationMenu>
+              <NavigationMenuList>
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger className="bg-sidebar">
+                    Getting started
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                      <li className="row-span-3">
+                        <NavigationMenuLink asChild>
+                          <a
+                            className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                            href="/"
+                          >
+                            <Icons.logo className="h-6 w-6" />
+                            <div className="mb-2 mt-4 text-lg font-medium">
+                              shadcn/ui
+                            </div>
+                            <p className="text-sm leading-tight text-muted-foreground">
+                              Beautifully designed components built with Radix
+                              UI and Tailwind CSS.
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+
+                      <li>
+                        <NavigationMenuLink asChild>
+                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                            <div className="text-sm font-medium leading-none">
+                              Introduction
+                            </div>
+                            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                              Re-usable components built using Radix UI and
+                              Tailwind CSS.
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+
+                      <li>
+                        <NavigationMenuLink asChild>
+                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                            <div className="text-sm font-medium leading-none">
+                              Installation
+                            </div>
+                            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                              How to install dependencies and structure your
+                              app.
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+
+                      <li>
+                        <NavigationMenuLink asChild>
+                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                            <div className="text-sm font-medium leading-none">
+                              Typography
+                            </div>
+                            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                              Styles for headings, paragraphs, lists...etc
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger className="bg-sidebar">
+                    Components
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                      {components.map((component) => (
+                        <li>
+                          <NavigationMenuLink key={component.title} asChild>
+                            <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                              <div className="text-sm font-medium leading-none">
+                                {component.title}
+                              </div>
+                              <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                {component.description}
+                              </p>
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                      ))}
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                  <Link href="/docs" legacyBehavior passHref>
+                    <NavigationMenuLink
+                      className={cn(navigationMenuTriggerStyle(), "bg-sidebar")}
+                    >
+                      Documentation
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+              </NavigationMenuList>
+            </NavigationMenu>
+          </div>
+        </div>
+      </header>
+      <SidebarProvider open={open} onOpenChange={setOpen}>
+        <Sidebar
+          className="top-[--header-height] pb-[--header-height]"
+          variant="inset"
+        >
+          <SidebarHeader>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton size="lg" asChild>
+                  <a href="#">
+                    <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                      <Command className="size-4" />
+                    </div>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">Acme Inc</span>
+                      <span className="truncate text-xs">Enterprise</span>
+                    </div>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Platform</SidebarGroupLabel>
+              <SidebarMenu>
+                {data.navMain.map((item) => (
+                  <Collapsible
+                    key={item.title}
+                    asChild
+                    defaultOpen={item.isActive}
+                  >
+                    <SidebarMenuItem>
+                      <SidebarMenuButton asChild tooltip={item.title}>
+                        <a href={item.url}>
+                          <item.icon />
+                          <span>{item.title}</span>
+                        </a>
+                      </SidebarMenuButton>
+                      {item.items?.length ? (
+                        <>
+                          <CollapsibleTrigger asChild>
+                            <SidebarMenuAction className="data-[state=open]:rotate-90">
+                              <ChevronRight />
+                              <span className="sr-only">Toggle</span>
+                            </SidebarMenuAction>
+                          </CollapsibleTrigger>
+                          <CollapsibleContent>
+                            <SidebarMenuSub>
+                              {item.items?.map((subItem) => (
+                                <SidebarMenuSubItem key={subItem.title}>
+                                  <SidebarMenuSubButton asChild>
+                                    <a href={subItem.url}>
+                                      <span>{subItem.title}</span>
+                                    </a>
+                                  </SidebarMenuSubButton>
+                                </SidebarMenuSubItem>
+                              ))}
+                            </SidebarMenuSub>
+                          </CollapsibleContent>
+                        </>
+                      ) : null}
+                    </SidebarMenuItem>
+                  </Collapsible>
+                ))}
+              </SidebarMenu>
+            </SidebarGroup>
+            <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+              <SidebarGroupLabel>Projects</SidebarGroupLabel>
+              <SidebarMenu>
+                {data.projects.map((item) => (
+                  <SidebarMenuItem key={item.name}>
+                    <SidebarMenuButton asChild>
+                      <a href={item.url}>
+                        <item.icon />
+                        <span>{item.name}</span>
+                      </a>
+                    </SidebarMenuButton>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <SidebarMenuAction showOnHover>
+                          <MoreHorizontal />
+                          <span className="sr-only">More</span>
+                        </SidebarMenuAction>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        className="w-48"
+                        side={isMobile ? "bottom" : "right"}
+                        align={isMobile ? "end" : "start"}
+                      >
+                        <DropdownMenuItem>
+                          <Folder className="text-muted-foreground" />
+                          <span>View Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Share className="text-muted-foreground" />
+                          <span>Share Project</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                          <Trash2 className="text-muted-foreground" />
+                          <span>Delete Project</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </SidebarMenuItem>
+                ))}
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <MoreHorizontal />
+                    <span>More</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroup>
+            <SidebarGroup className="mt-auto">
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {data.navSecondary.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton asChild size="sm">
+                        <a href={item.url}>
+                          <item.icon />
+                          <span>{item.title}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarFooter>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <SidebarMenuButton
+                      size="lg"
+                      className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                    >
+                      <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarImage
+                          src={data.user.avatar}
+                          alt={data.user.name}
+                        />
+                        <AvatarFallback className="rounded-lg">
+                          CN
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="grid flex-1 text-left text-sm leading-tight">
+                        <span className="truncate font-semibold">
+                          {data.user.name}
+                        </span>
+                        <span className="truncate text-xs">
+                          {data.user.email}
+                        </span>
+                      </div>
+                      <ChevronsUpDown className="ml-auto size-4" />
+                    </SidebarMenuButton>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                    side={isMobile ? "bottom" : "right"}
+                    align="end"
+                    sideOffset={4}
+                  >
+                    <DropdownMenuLabel className="p-0 font-normal">
+                      <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                        <Avatar className="h-8 w-8 rounded-lg">
+                          <AvatarImage
+                            src={data.user.avatar}
+                            alt={data.user.name}
+                          />
+                          <AvatarFallback className="rounded-lg">
+                            CN
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                          <span className="truncate font-semibold">
+                            {data.user.name}
+                          </span>
+                          <span className="truncate text-xs">
+                            {data.user.email}
+                          </span>
+                        </div>
+                      </div>
+                    </DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                      <DropdownMenuItem>
+                        <Sparkles />
+                        Upgrade to Pro
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                      <DropdownMenuItem>
+                        <BadgeCheck />
+                        Account
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <CreditCard />
+                        Billing
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <Bell />
+                        Notifications
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>
+                      <LogOut />
+                      Log out
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarFooter>
+        </Sidebar>
+
+        <SidebarInset>
+          <header className=" flex shrink-0 items-center gap-2 border-b py-2">
+            <div className="flex items-center gap-2 px-4 py-2">
+              <div className="flex md:hidden items-center gap-2">
+                <SidebarTrigger />
+                <Separator orientation="vertical" className="mr-2 h-4" />
+              </div>
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink href="#">
+                      Building Your Application
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+          </header>
+          <div className="flex flex-1 flex-col gap-4 p-4">
+            <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+              <div className="aspect-video rounded-xl bg-muted/50" />
+              <div className="aspect-video rounded-xl bg-muted/50" />
+              <div className="aspect-video rounded-xl bg-muted/50" />
+            </div>
+            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  )
+}
diff --git a/apps/www/registry/registry-base-colors.ts b/apps/www/registry/registry-base-colors.ts
index a63f399de30..badbf61fa06 100644
--- a/apps/www/registry/registry-base-colors.ts
+++ b/apps/www/registry/registry-base-colors.ts
@@ -754,3 +754,898 @@ export const baseColors = [
 ] as const
 
 export type BaseColor = (typeof baseColors)[number]
+
+export const baseColorsV4 = {
+  stone: {
+    light: {
+      background: "oklch(1 0 0)", // --color-white
+      foreground: "oklch(0.147 0.004 49.25)", // --color-stone-950
+      card: "oklch(1 0 0)", // --color-white
+      "card-foreground": "oklch(0.147 0.004 49.25)", // --color-stone-950
+      popover: "oklch(1 0 0)", // --color-white
+      "popover-foreground": "oklch(0.147 0.004 49.25)", // --color-stone-950
+      primary: "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "primary-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      secondary: "oklch(0.97 0.001 106.424)", // --color-stone-100
+      "secondary-foreground": "oklch(0.216 0.006 56.043)", // --color-stone-900
+      muted: "oklch(0.97 0.001 106.424)", // --color-stone-100
+      "muted-foreground": "oklch(0.553 0.013 58.071)", // --color-stone-500
+      accent: "oklch(0.97 0.001 106.424)", // --color-stone-100
+      "accent-foreground": "oklch(0.216 0.006 56.043)", // --color-stone-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.923 0.003 48.717)", // --color-stone-200
+      input: "oklch(0.923 0.003 48.717)", // --color-stone-200
+      ring: "oklch(0.709 0.01 56.259)", // --color-stone-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.985 0.001 106.423)", // --color-stone-50
+      "sidebar-foreground": "oklch(0.147 0.004 49.25)", // --color-stone-950
+      "sidebar-primary": "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      "sidebar-accent": "oklch(0.97 0.001 106.424)", // --color-stone-100
+      "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "sidebar-border": "oklch(0.923 0.003 48.717)", // --color-stone-200
+      "sidebar-ring": "oklch(0.709 0.01 56.259)", // --color-stone-400
+    },
+    dark: {
+      background: "oklch(0.147 0.004 49.25)", // --color-stone-950
+      foreground: "oklch(0.985 0.001 106.423)", // --color-stone-50
+      card: "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "card-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      popover: "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "popover-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      primary: "oklch(0.923 0.003 48.717)", // --color-stone-200
+      "primary-foreground": "oklch(0.216 0.006 56.043)", // --color-stone-900
+      secondary: "oklch(0.268 0.007 34.298)", // --color-stone-800
+      "secondary-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      muted: "oklch(0.268 0.007 34.298)", // --color-stone-800
+      "muted-foreground": "oklch(0.709 0.01 56.259)", // --color-stone-400
+      accent: "oklch(0.268 0.007 34.298)", // --color-stone-800
+      "accent-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-500
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.553 0.013 58.071)", // --color-stone-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.216 0.006 56.043)", // --color-stone-900
+      "sidebar-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      "sidebar-accent": "oklch(0.268 0.007 34.298)", // --color-stone-800
+      "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)", // --color-stone-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.553 0.013 58.071)", // --color-stone-500
+    },
+  },
+  zinc: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      card: "oklch(1 0 0)", // --color-zinc-50
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      popover: "oklch(1 0 0)", // --color-zinc-50
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      primary: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      ring: "oklch(0.705 0.015 286.067)", // --color-zinc-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      "sidebar-primary": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      "sidebar-ring": "oklch(0.705 0.015 286.067)", // --color-zinc-400
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      primary: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      "primary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.552 0.016 285.938)", // --color-zinc-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.552 0.016 285.938)", // --color-zinc-500
+    },
+  },
+  neutral: {
+    light: {
+      background: "oklch(1 0 0)", // --color-neutral-50
+      foreground: "oklch(0.145 0 0)", // --color-neutral-950
+      card: "oklch(1 0 0)", // --color-neutral-50
+      "card-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      popover: "oklch(1 0 0)", // --color-neutral-50
+      "popover-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      primary: "oklch(0.205 0 0)", // --color-neutral-900
+      "primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      secondary: "oklch(0.97 0 0)", // --color-neutral-100
+      "secondary-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      muted: "oklch(0.97 0 0)", // --color-neutral-100
+      "muted-foreground": "oklch(0.556 0 0)", // --color-neutral-500
+      accent: "oklch(0.97 0 0)", // --color-neutral-100
+      "accent-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.922 0 0)", // --color-neutral-200
+      input: "oklch(0.922 0 0)", // --color-neutral-200
+      ring: "oklch(0.708 0 0)", // --color-neutral-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-foreground": "oklch(0.145 0 0)", // --color-neutral-950
+      "sidebar-primary": "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-accent": "oklch(0.97 0 0)", // --color-neutral-100
+      "sidebar-accent-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-border": "oklch(0.922 0 0)", // --color-neutral-200
+      "sidebar-ring": "oklch(0.708 0 0)", // --color-neutral-400
+    },
+    dark: {
+      background: "oklch(0.145 0 0)", // --color-neutral-950
+      foreground: "oklch(0.985 0 0)", // --color-neutral-50
+      card: "oklch(0.205 0 0)", // --color-neutral-900
+      "card-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      popover: "oklch(0.205 0 0)", // --color-neutral-900
+      "popover-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      primary: "oklch(0.922 0 0)", // --color-neutral-200
+      "primary-foreground": "oklch(0.205 0 0)", // --color-neutral-900
+      secondary: "oklch(0.269 0 0)", // --color-neutral-800
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      muted: "oklch(0.269 0 0)", // --color-neutral-800
+      "muted-foreground": "oklch(0.708 0 0)", // --color-neutral-400
+      accent: "oklch(0.269 0 0)", // --color-neutral-800
+      "accent-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.556 0 0)", // --color-neutral-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.205 0 0)", // --color-neutral-900
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-accent": "oklch(0.269 0 0)", // --color-neutral-800
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-neutral-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.556 0 0)", // --color-neutral-500
+    },
+  },
+  gray: {
+    light: {
+      background: "oklch(1 0 0)", // --color-white (closest to gray-50)
+      foreground: "oklch(0.13 0.028 261.692)", // --color-gray-950
+      card: "oklch(1 0 0)", // --color-white (closest to gray-50)
+      "card-foreground": "oklch(0.13 0.028 261.692)", // --color-gray-950
+      popover: "oklch(1 0 0)", // --color-white (closest to gray-50)
+      "popover-foreground": "oklch(0.13 0.028 261.692)", // --color-gray-950
+      primary: "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "primary-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      secondary: "oklch(0.967 0.003 264.542)", // --color-gray-100
+      "secondary-foreground": "oklch(0.21 0.034 264.665)", // --color-gray-900
+      muted: "oklch(0.967 0.003 264.542)", // --color-gray-100
+      "muted-foreground": "oklch(0.551 0.027 264.364)", // --color-gray-500
+      accent: "oklch(0.967 0.003 264.542)", // --color-gray-100
+      "accent-foreground": "oklch(0.21 0.034 264.665)", // --color-gray-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.928 0.006 264.531)", // --color-gray-200
+      input: "oklch(0.928 0.006 264.531)", // --color-gray-200
+      ring: "oklch(0.707 0.022 261.325)", // --color-gray-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.985 0.002 247.839)", // --color-gray-50
+      "sidebar-foreground": "oklch(0.13 0.028 261.692)", // --color-gray-950
+      "sidebar-primary": "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      "sidebar-accent": "oklch(0.967 0.003 264.542)", // --color-gray-100
+      "sidebar-accent-foreground": "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "sidebar-border": "oklch(0.928 0.006 264.531)", // --color-gray-200
+      "sidebar-ring": "oklch(0.707 0.022 261.325)", // --color-gray-400
+    },
+    dark: {
+      background: "oklch(0.13 0.028 261.692)", // --color-gray-950
+      foreground: "oklch(0.985 0.002 247.839)", // --color-gray-50
+      card: "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "card-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      popover: "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "popover-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      primary: "oklch(0.928 0.006 264.531)", // --color-gray-200
+      "primary-foreground": "oklch(0.21 0.034 264.665)", // --color-gray-900
+      secondary: "oklch(0.278 0.033 256.848)", // --color-gray-800
+      "secondary-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      muted: "oklch(0.278 0.033 256.848)", // --color-gray-800
+      "muted-foreground": "oklch(0.707 0.022 261.325)", // --color-gray-400
+      accent: "oklch(0.278 0.033 256.848)", // --color-gray-800
+      "accent-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.551 0.027 264.364)", // --color-gray-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.21 0.034 264.665)", // --color-gray-900
+      "sidebar-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      "sidebar-accent": "oklch(0.278 0.033 256.848)", // --color-gray-800
+      "sidebar-accent-foreground": "oklch(0.985 0.002 247.839)", // --color-gray-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.551 0.027 264.364)", // --color-gray-500
+    },
+  },
+  slate: {
+    light: {
+      background: "oklch(1 0 0)", // --color-white (closest to slate-50)
+      foreground: "oklch(0.129 0.042 264.695)", // --color-slate-950
+      card: "oklch(1 0 0)", // --color-white (closest to slate-50)
+      "card-foreground": "oklch(0.129 0.042 264.695)", // --color-slate-950
+      popover: "oklch(1 0 0)", // --color-white (closest to slate-50)
+      "popover-foreground": "oklch(0.129 0.042 264.695)", // --color-slate-950
+      primary: "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "primary-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      secondary: "oklch(0.968 0.007 247.896)", // --color-slate-100
+      "secondary-foreground": "oklch(0.208 0.042 265.755)", // --color-slate-900
+      muted: "oklch(0.968 0.007 247.896)", // --color-slate-100
+      "muted-foreground": "oklch(0.554 0.046 257.417)", // --color-slate-500
+      accent: "oklch(0.968 0.007 247.896)", // --color-slate-100
+      "accent-foreground": "oklch(0.208 0.042 265.755)", // --color-slate-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.929 0.013 255.508)", // --color-slate-200
+      input: "oklch(0.929 0.013 255.508)", // --color-slate-200
+      ring: "oklch(0.704 0.04 256.788)", // --color-slate-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      radius: "0.625rem",
+      sidebar: "oklch(0.984 0.003 247.858)", // --color-slate-50
+      "sidebar-foreground": "oklch(0.129 0.042 264.695)", // --color-slate-950
+      "sidebar-primary": "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      "sidebar-accent": "oklch(0.968 0.007 247.896)", // --color-slate-100
+      "sidebar-accent-foreground": "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "sidebar-border": "oklch(0.929 0.013 255.508)", // --color-slate-200
+      "sidebar-ring": "oklch(0.704 0.04 256.788)", // --color-slate-400
+    },
+    dark: {
+      background: "oklch(0.129 0.042 264.695)", // --color-slate-950
+      foreground: "oklch(0.984 0.003 247.858)", // --color-slate-50
+      card: "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "card-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      popover: "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "popover-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      primary: "oklch(0.929 0.013 255.508)", // --color-slate-200
+      "primary-foreground": "oklch(0.208 0.042 265.755)", // --color-slate-900
+      secondary: "oklch(0.279 0.041 260.031)", // --color-slate-800
+      "secondary-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      muted: "oklch(0.279 0.041 260.031)", // --color-slate-800
+      "muted-foreground": "oklch(0.704 0.04 256.788)", // --color-slate-400
+      accent: "oklch(0.279 0.041 260.031)", // --color-slate-800
+      "accent-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.551 0.027 264.364)", // --color-slate-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.208 0.042 265.755)", // --color-slate-900
+      "sidebar-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      "sidebar-accent": "oklch(0.279 0.041 260.031)", // --color-slate-800
+      "sidebar-accent-foreground": "oklch(0.984 0.003 247.858)", // --color-slate-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.551 0.027 264.364)", // --color-slate-500
+    },
+  },
+} as const
+
+export const baseColorsOKLCH = {
+  zinc: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      card: "oklch(1 0 0)", // --color-zinc-50
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      popover: "oklch(1 0 0)", // --color-zinc-50
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      primary: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      ring: "oklch(0.705 0.015 286.067)", // --color-zinc-400
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      "sidebar-primary": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      "sidebar-ring": "oklch(0.705 0.015 286.067)", // --color-zinc-400
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      primary: "oklch(0.92 0.004 286.32)", // --color-zinc-200
+      "primary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
+      border: "oklch(1 0 0 / 10%)", // --color-white
+      input: "oklch(1 0 0 / 15%)", // --color-white
+      ring: "oklch(0.552 0.016 285.938)", // --color-zinc-500
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
+      "sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
+      "sidebar-ring": "oklch(0.552 0.016 285.938)", // --color-zinc-500
+    },
+  },
+  red: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "sidebar-primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+      "sidebar-primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
+    },
+  },
+  rose: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "sidebar-primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+      "sidebar-primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
+    },
+  },
+  orange: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
+      "primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
+      "sidebar-primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
+      "primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
+      "sidebar-primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
+    },
+  },
+  green: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
+      "primary-foreground": "oklch(0.982 0.018 155.826)", // --color-green-50 (approx HSL 355.7 100% 97.3%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
+      "sidebar-primary-foreground": "oklch(0.982 0.018 155.826)", // --color-green-50 (approx HSL 355.7 100% 97.3%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.696 0.17 162.48)", // --color-emerald-500 (approx HSL 142.1 70.6% 45.3%)
+      "primary-foreground": "oklch(0.393 0.095 152.535)", // --color-green-900 (approx HSL 144.9 80.4% 10%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.527 0.154 150.069)", // --color-green-700 (approx HSL 142.4 71.8% 29.2%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (approx HSL 142.1 70.6% 45.3%)
+      "sidebar-primary-foreground": "oklch(0.393 0.095 152.535)", // --color-green-900 (approx HSL 144.9 80.4% 10%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.527 0.154 150.069)", // --color-green-700 (approx HSL 142.4 71.8% 29.2%)
+    },
+  },
+  blue: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
+      "primary-foreground": "oklch(0.97 0.014 254.604)", // --color-blue-50 (approx HSL 210 40% 98%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
+      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)", // --color-blue-50 (approx HSL 210 40% 98%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.546 0.245 262.881)", // --color-blue-600 (approx HSL 217.2 91.2% 59.8%)
+      "primary-foreground": "oklch(0.379 0.146 265.522)", // --color-blue-900 (approx HSL 222.2 47.4% 11.2%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.488 0.243 264.376)", // --color-blue-700 (approx HSL 224.3 76.3% 48%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.546 0.245 262.881)", // --color-blue-600 (approx HSL 217.2 91.2% 59.8%)
+      "sidebar-primary-foreground": "oklch(0.379 0.146 265.522)", // --color-blue-900 (approx HSL 222.2 47.4% 11.2%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.488 0.243 264.376)", // --color-blue-700 (approx HSL 224.3 76.3% 48%)
+    },
+  },
+  yellow: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+      "primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+      "sidebar-primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+      "primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.554 0.135 66.442)", // --color-yellow-700 (approx HSL 35.5 91.7% 32.9%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
+      "sidebar-primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.554 0.135 66.442)", // --color-yellow-700 (approx HSL 35.5 91.7% 32.9%)
+    },
+  },
+  violet: {
+    light: {
+      background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
+      "popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      primary: "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
+      "primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
+      secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
+      accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
+      border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      ring: "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
+      "chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
+      "chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
+      "chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
+      "chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
+      "chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      "sidebar-primary": "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
+      "sidebar-primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
+      "sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
+      "sidebar-ring": "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
+    },
+    dark: {
+      background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
+      foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      primary: "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
+      "primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
+      secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
+      accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
+      border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
+      ring: "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
+      "chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
+      "chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
+      "chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
+      "chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
+      "chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
+      sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
+      "sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-primary": "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
+      "sidebar-primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
+      "sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
+      "sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
+      "sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
+      "sidebar-ring": "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
+    },
+  },
+}
diff --git a/apps/www/registry/registry-blocks.ts b/apps/www/registry/registry-blocks.ts
index 782b9313a76..bf171310be0 100644
--- a/apps/www/registry/registry-blocks.ts
+++ b/apps/www/registry/registry-blocks.ts
@@ -1,231 +1,1315 @@
-import { Registry } from "@/registry/schema"
+import { type Registry } from "shadcn/schema"
 
-export const blocks: Registry = [
+export const blocks: Registry["items"] = [
   {
-    name: "sidebar-01",
-    description:
-      "A collapsible sidebar with workspace switcher, main navigation, secondary navigation, project navigation, and user navigation.",
+    name: "dashboard-01",
     type: "registry:block",
+    description: "A dashboard with sidebar, charts and data table.",
+    dependencies: [
+      "@dnd-kit/core",
+      "@dnd-kit/modifiers",
+      "@dnd-kit/sortable",
+      "@dnd-kit/utilities",
+      "@tanstack/react-table",
+      "zod",
+    ],
     registryDependencies: [
-      "avatar",
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "label",
+      "chart",
+      "card",
+      "select",
+      "tabs",
+      "table",
+      "toggle-group",
+      "badge",
       "button",
-      "collapsible",
+      "checkbox",
       "dropdown-menu",
       "drawer",
-      "separator",
       "input",
-      "popover",
+      "avatar",
       "sheet",
-      "progress",
-      "card",
-      "use-mobile",
+      "sonner",
     ],
     files: [
       {
-        path: "block/sidebar-01/page.tsx",
+        path: "blocks/dashboard-01/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-01/components/app-sidebar.tsx",
+        path: "blocks/dashboard-01/data.json",
+        type: "registry:file",
+        target: "app/dashboard/data.json",
+      },
+      {
+        path: "blocks/dashboard-01/components/app-sidebar.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-01/components/nav-main.tsx",
+        path: "blocks/dashboard-01/components/chart-area-interactive.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-01/components/nav-projects.tsx",
+        path: "blocks/dashboard-01/components/data-table.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-01/components/nav-secondary.tsx",
+        path: "blocks/dashboard-01/components/nav-documents.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-01/components/nav-user.tsx",
+        path: "blocks/dashboard-01/components/nav-main.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-01/components/storage-card.tsx",
+        path: "blocks/dashboard-01/components/nav-secondary.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-01/components/team-switcher.tsx",
+        path: "blocks/dashboard-01/components/nav-user.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-01/hooks/use-sidebar.tsx",
-        type: "registry:hook",
+        path: "blocks/dashboard-01/components/section-cards.tsx",
+        type: "registry:component",
       },
       {
-        path: "block/sidebar-01/ui/sidebar.tsx",
-        type: "registry:ui",
+        path: "blocks/dashboard-01/components/site-header.tsx",
+        type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Dashboard",
+    categories: ["dashboard"],
   },
   {
-    name: "login-01",
+    name: "sidebar-01",
     type: "registry:block",
-    registryDependencies: ["button", "card", "input", "label"],
+    description: "A simple sidebar with navigation grouped by section.",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "label",
+      "dropdown-menu",
+    ],
     files: [
       {
-        path: "block/login-01/page.tsx",
-        target: "app/login/page.tsx",
+        path: "blocks/sidebar-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-01/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-01/components/search-form.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-01/components/version-switcher.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-02",
+    description: "A sidebar with collapsible sections.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "label",
+      "dropdown-menu",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-02/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-02/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-02/components/search-form.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-02/components/version-switcher.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-03",
+    description: "A sidebar with submenus.",
+    type: "registry:block",
+    registryDependencies: ["sidebar", "breadcrumb"],
+    files: [
+      {
+        path: "blocks/sidebar-03/page.tsx",
         type: "registry:page",
+        target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/login-01/components/login-form.tsx",
+        path: "blocks/sidebar-03/components/app-sidebar.tsx",
         type: "registry:component",
       },
     ],
-    category: "Authentication",
-    subcategory: "Login",
+    categories: ["sidebar", "dashboard"],
   },
   {
-    name: "charts-01",
+    name: "sidebar-04",
+    description: "A floating sidebar with submenus.",
     type: "registry:block",
-    registryDependencies: ["chart"],
-    files: ["block/charts-01.tsx"],
-    category: "Application",
-    subcategory: "Charts",
+    registryDependencies: ["sidebar", "breadcrumb", "separator"],
+    files: [
+      {
+        path: "blocks/sidebar-04/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-04/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
   },
   {
-    name: "dashboard-05",
+    name: "sidebar-05",
+    description: "A sidebar with collapsible submenus.",
     type: "registry:block",
     registryDependencies: [
-      "badge",
+      "sidebar",
       "breadcrumb",
-      "button",
-      "card",
-      "dropdown-menu",
-      "input",
-      "pagination",
-      "progress",
       "separator",
-      "sheet",
-      "table",
-      "tabs",
-      "tooltip",
+      "label",
+      "collapsible",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-05/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-05/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-05/components/search-form.tsx",
+        type: "registry:component",
+      },
     ],
-    files: ["block/dashboard-05.tsx"],
-    category: "Application",
-    subcategory: "Dashboard",
+    categories: ["sidebar", "dashboard"],
   },
   {
-    name: "dashboard-06",
+    name: "sidebar-06",
+    description: "A sidebar with submenus as dropdowns.",
     type: "registry:block",
     registryDependencies: [
-      "badge",
+      "sidebar",
       "breadcrumb",
-      "button",
+      "separator",
       "card",
       "dropdown-menu",
-      "input",
-      "sheet",
-      "table",
-      "tabs",
-      "tooltip",
     ],
-    files: ["block/dashboard-06.tsx"],
-    category: "Application",
-    subcategory: "Dashboard",
+    files: [
+      {
+        path: "blocks/sidebar-06/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-06/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-06/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
   },
   {
-    name: "dashboard-07",
+    name: "sidebar-07",
     type: "registry:block",
+    description: "A sidebar that collapses to icons.",
     registryDependencies: [
-      "badge",
+      "sidebar",
       "breadcrumb",
-      "button",
-      "card",
-      "dropdown-menu",
-      "input",
-      "pagination",
-      "progress",
       "separator",
-      "sheet",
-      "table",
-      "tabs",
-      "tooltip",
+      "collapsible",
+      "dropdown-menu",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-07/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-07/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-07/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-07/components/nav-projects.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-07/components/nav-user.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-07/components/team-switcher.tsx",
+        type: "registry:component",
+      },
     ],
-    files: ["block/dashboard-07.tsx"],
-    category: "Application",
-    subcategory: "Dashboard",
+    categories: ["sidebar", "dashboard"],
   },
   {
-    name: "dashboard-04",
+    name: "sidebar-08",
+    description: "An inset sidebar with secondary navigation.",
     type: "registry:block",
-    registryDependencies: ["button", "card", "dropdown-menu", "input"],
-    files: ["block/dashboard-04.tsx"],
-    category: "Application",
-    subcategory: "Dashboard",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "dropdown-menu",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-08/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-08/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-08/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-08/components/nav-projects.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-08/components/nav-secondary.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-08/components/nav-user.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
   },
   {
-    name: "dashboard-03",
+    name: "sidebar-09",
+    description: "Collapsible nested sidebars.",
     type: "registry:block",
     registryDependencies: [
-      "badge",
-      "button",
-      "drawer",
-      "input",
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "dropdown-menu",
+      "avatar",
+      "switch",
       "label",
-      "select",
-      "textarea",
-      "tooltip",
     ],
-    files: ["block/dashboard-03.tsx"],
-    category: "Application",
-    subcategory: "Dashboard",
+    files: [
+      {
+        path: "blocks/sidebar-09/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-09/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-09/components/nav-user.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
   },
   {
-    name: "dashboard-02",
+    name: "sidebar-10",
+    description: "A sidebar in a popover.",
     type: "registry:block",
-    registryDependencies: ["badge", "button", "card", "dropdown-menu", "input"],
-    files: ["block/dashboard-02.tsx"],
-    category: "Application",
-    subcategory: "Dashboard",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "popover",
+      "collapsible",
+      "dropdown-menu",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-10/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-10/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/nav-actions.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/nav-favorites.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/nav-secondary.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/nav-workspaces.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-10/components/team-switcher.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
   },
   {
-    name: "dashboard-01",
+    name: "sidebar-11",
+    description: "A sidebar with a collapsible file tree.",
     type: "registry:block",
-    registryDependencies: ["button", "dropdown-menu", "input", "sheet"],
-    files: ["block/dashboard-01.tsx"],
-    category: "Application",
-    subcategory: "Dashboard",
+    registryDependencies: ["sidebar", "breadcrumb", "separator", "collapsible"],
+    files: [
+      {
+        path: "blocks/sidebar-11/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-11/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
   },
   {
-    name: "authentication-01",
+    name: "sidebar-12",
+    description: "A sidebar with a calendar.",
     type: "registry:block",
-    registryDependencies: ["button", "card", "input", "label"],
-    files: ["block/authentication-01.tsx"],
-    category: "Authentication",
-    subcategory: "Login",
-  },
-  {
-    name: "authentication-02",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "calendar",
+      "dropdown-menu",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-12/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-12/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-12/components/calendars.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-12/components/date-picker.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-12/components/nav-user.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-13",
+    description: "A sidebar in a dialog.",
+    type: "registry:block",
+    registryDependencies: ["sidebar", "breadcrumb", "button", "dialog"],
+    files: [
+      {
+        path: "blocks/sidebar-13/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-13/components/settings-dialog.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-14",
+    description: "A sidebar on the right.",
+    type: "registry:block",
+    registryDependencies: ["sidebar", "breadcrumb"],
+    files: [
+      {
+        path: "blocks/sidebar-14/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-14/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-15",
+    description: "A left and right sidebar.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "popover",
+      "collapsible",
+      "dropdown-menu",
+      "calendar",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-15/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-15/components/calendars.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/date-picker.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/nav-favorites.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/nav-secondary.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/nav-user.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/nav-workspaces.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/sidebar-left.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/sidebar-right.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-15/components/team-switcher.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "sidebar-16",
+    description: "A sidebar with a sticky site header.",
+    type: "registry:block",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "dropdown-menu",
+      "avatar",
+      "button",
+      "label",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-16/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx",
+      },
+      {
+        path: "blocks/sidebar-16/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/nav-projects.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/nav-secondary.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/nav-user.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/search-form.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-16/components/site-header.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["sidebar", "dashboard"],
+  },
+  {
+    name: "login-01",
+    description: "A simple login form.",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/login-01/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-01/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
+  },
+  {
+    name: "login-02",
+    description: "A two column login page with a cover image.",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/login-02/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-02/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
+  },
+  {
+    name: "login-03",
+    description: "A login page with a muted background color.",
     type: "registry:block",
     registryDependencies: ["button", "card", "input", "label"],
-    files: ["block/authentication-02.tsx"],
-    category: "Authentication",
-    subcategory: "Login",
+    files: [
+      {
+        path: "blocks/login-03/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-03/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
   },
   {
-    name: "authentication-03",
+    name: "login-04",
+    description: "A login page with form and image.",
     type: "registry:block",
     registryDependencies: ["button", "card", "input", "label"],
-    files: ["block/authentication-03.tsx"],
-    category: "Authentication",
-    subcategory: "Login",
+    files: [
+      {
+        path: "blocks/login-04/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-04/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
   },
   {
-    name: "authentication-04",
+    name: "login-05",
+    description: "A simple email-only login page.",
     type: "registry:block",
     registryDependencies: ["button", "card", "input", "label"],
-    files: ["block/authentication-04.tsx"],
-    category: "Authentication",
-    subcategory: "Login",
+    files: [
+      {
+        path: "blocks/login-05/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-05/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
+  },
+  {
+    name: "calendar-01",
+    description: "A simple calendar.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-01.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-02",
+    description: "Multiple months with single selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-02.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-03",
+    description: "Multiple months with multiple selection.",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-03.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-04",
+    description: "Single month with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-04.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-4 py-12 items-start md:py-20 justify-center min-w-0 xl:pt-28",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-05",
+    description: "Multiple months with range selection",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-05.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-06",
+    description: "Range selection with minimum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-06.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-07",
+    description: "Range selection with minimum and maximum days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-07.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-08",
+    description: "Calendar with disabled days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-08.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-09",
+    description: "Calendar with disabled weekends",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-09.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-10",
+    description: "Today button",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-10.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-11",
+    description: "Start and end of month",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-11.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-12",
+    description: "Localized calendar",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "select"],
+    files: [
+      {
+        path: "blocks/calendar-12.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-13",
+    description: "With Month and Year Dropdown",
+    type: "registry:block",
+    registryDependencies: ["calendar", "label", "select"],
+    files: [
+      {
+        path: "blocks/calendar-13.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-14",
+    description: "With Booked/Unavailable Days",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-14.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-15",
+    description: "With Week Numbers",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-15.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-16",
+    description: "With time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-16.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-17",
+    description: "With time picker inline",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-17.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-18",
+    description: "Variable size",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-18.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-19",
+    description: "With presets",
+    type: "registry:block",
+    dependencies: ["date-fns"],
+    registryDependencies: ["calendar", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-19.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-20",
+    description: "With time presets",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-20.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-21",
+    description: "Custom days and formatters",
+    type: "registry:block",
+    registryDependencies: ["calendar"],
+    files: [
+      {
+        path: "blocks/calendar-21.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-22",
+    description: "Date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-22.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-23",
+    description: "Date range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-23.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-24",
+    description: "Date and Time picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-24.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-25",
+    description: "Date and Time range picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "label"],
+    files: [
+      {
+        path: "blocks/calendar-25.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-26",
+    description: "Date range picker with time",
+    type: "registry:block",
+    registryDependencies: ["calendar", "popover", "button", "input", "label"],
+    files: [
+      {
+        path: "blocks/calendar-26.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-27",
+    description: "Chart filter",
+    type: "registry:block",
+    registryDependencies: ["calendar", "chart", "card", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-27.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-28",
+    description: "Input with date picker",
+    type: "registry:block",
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-28.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-29",
+    description: "Natural language date picker",
+    type: "registry:block",
+    dependencies: ["chrono-node"],
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-29.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-30",
+    description: "With little-date",
+    type: "registry:block",
+    registryDependencies: ["calendar", "input", "label", "popover", "button"],
+    files: [
+      {
+        path: "blocks/calendar-30.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-31",
+    description: "With event slots",
+    type: "registry:block",
+    registryDependencies: ["calendar", "card", "button"],
+    files: [
+      {
+        path: "blocks/calendar-31.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "700px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0",
+      mobile: "component",
+    },
+  },
+  {
+    name: "calendar-32",
+    description: "Date picker in a drawer",
+    type: "registry:block",
+    registryDependencies: ["calendar", "button", "drawer"],
+    files: [
+      {
+        path: "blocks/calendar-32.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendar", "date"],
+    meta: {
+      iframeHeight: "600px",
+      container:
+        "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
+      mobile: "component",
+    },
   },
 ]
diff --git a/apps/www/registry/registry-categories.ts b/apps/www/registry/registry-categories.ts
new file mode 100644
index 00000000000..5df55bae3a5
--- /dev/null
+++ b/apps/www/registry/registry-categories.ts
@@ -0,0 +1,72 @@
+export const registryCategories = [
+  {
+    name: "Sidebar",
+    slug: "sidebar",
+    hidden: false,
+  },
+  {
+    name: "Dashboard",
+    slug: "dashboard",
+    hidden: true,
+  },
+  {
+    name: "Authentication",
+    slug: "authentication",
+    hidden: false,
+  },
+  {
+    name: "Login",
+    slug: "login",
+    hidden: false,
+  },
+  {
+    name: "Calendar",
+    slug: "calendar",
+    hidden: false,
+  },
+  {
+    name: "Date",
+    slug: "date",
+    hidden: true,
+  },
+  {
+    name: "Charts",
+    slug: "charts",
+    hidden: true,
+  },
+  {
+    name: "Area Charts",
+    slug: "charts-area",
+    hidden: true,
+  },
+  {
+    name: "Bar Charts",
+    slug: "charts-bar",
+    hidden: true,
+  },
+  {
+    name: "Line Charts",
+    slug: "charts-line",
+    hidden: true,
+  },
+  {
+    name: "Pie Charts",
+    slug: "charts-pie",
+    hidden: true,
+  },
+  {
+    name: "Radar Charts",
+    slug: "charts-radar",
+    hidden: true,
+  },
+  {
+    name: "Radial Charts",
+    slug: "charts-radial",
+    hidden: true,
+  },
+  {
+    name: "Charts Tooltip",
+    slug: "charts-tooltip",
+    hidden: true,
+  },
+]
diff --git a/apps/www/registry/registry-charts.ts b/apps/www/registry/registry-charts.ts
index 4efc08dcc5a..deeda2cba61 100644
--- a/apps/www/registry/registry-charts.ts
+++ b/apps/www/registry/registry-charts.ts
@@ -1,38 +1,54 @@
-import { Registry } from "@/registry/schema"
+import { type Registry } from "shadcn/schema"
 
-export const charts: Registry = [
+export const charts: Registry["items"] = [
   // Area Charts
   {
     name: "chart-area-axes",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-axes.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-axes.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-default",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-default.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-gradient",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-gradient.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-gradient.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-icons",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-icons.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-icons.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-interactive",
@@ -40,52 +56,71 @@ export const charts: Registry = [
     registryDependencies: ["card", "chart", "select"],
     files: [
       {
-        path: "block/chart-area-interactive.tsx",
+        path: "charts/chart-area-interactive.tsx",
         type: "registry:component",
       },
     ],
-    category: "Charts",
-    subcategory: "Area",
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-legend",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-legend.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-legend.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-linear",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-linear.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-linear.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-stacked-expand",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-stacked-expand.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-stacked-expand.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-stacked",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-stacked.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-step",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-step.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-step.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
 
   // Bar Charts
@@ -93,81 +128,121 @@ export const charts: Registry = [
     name: "chart-bar-active",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-active.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-active.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-default",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-default.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-horizontal",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-horizontal.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-horizontal.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-interactive",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-interactive.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-interactive.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-label-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-label-custom.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-label",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-label.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-mixed",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-mixed.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-mixed.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-multiple",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-multiple.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-multiple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-negative",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-negative.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-negative.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-stacked",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-stacked.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
 
   // Line Charts
@@ -175,81 +250,121 @@ export const charts: Registry = [
     name: "chart-line-default",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-default.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-dots-colors",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-dots-colors.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-dots-colors.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-dots-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-dots-custom.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-dots-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-dots",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-dots.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-dots.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-interactive",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-interactive.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-interactive.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-label-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-label-custom.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-label",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-label.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-linear",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-linear.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-linear.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-multiple",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-multiple.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-multiple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-step",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-step.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-step.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
 
   // Pie Charts
@@ -257,89 +372,133 @@ export const charts: Registry = [
     name: "chart-pie-donut-active",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-donut-active.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-donut-active.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-donut-text",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-donut-text.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-donut-text.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-donut",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-donut.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-donut.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-interactive",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-interactive.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-interactive.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-label-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-label-custom.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-label-list",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-label-list.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-label-list.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-label",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-label.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-legend",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-legend.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-legend.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-separator-none",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-separator-none.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-separator-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-simple",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-simple.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-simple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-stacked",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-stacked.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
 
   // Radar Charts
@@ -347,113 +506,169 @@ export const charts: Registry = [
     name: "chart-radar-default",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-default.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-dots",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-dots.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-dots.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-circle-fill",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-circle-fill.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-circle-fill.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-circle-no-lines",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-circle-no-lines.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-circle-no-lines.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-circle",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-circle.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-circle.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-custom.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-fill",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-fill.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-fill.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-none",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-none.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-icons",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-icons.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-icons.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-label-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-label-custom.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-legend",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-legend.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-legend.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-lines-only",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-lines-only.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-lines-only.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-multiple",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-multiple.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-multiple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-radius",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-radius.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-radius.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
 
   // Radial Charts
@@ -461,120 +676,180 @@ export const charts: Registry = [
     name: "chart-radial-grid",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-grid.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-grid.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-radial-label",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-label.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-radial-shape",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-shape.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-shape.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-radial-simple",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-simple.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-simple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-radial-stacked",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-stacked.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-radial-text",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-text.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-text.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-tooltip-default",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-default.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-indicator-line",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-indicator-line.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-indicator-line.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-indicator-none",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-indicator-none.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-indicator-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-label-none",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-label-none.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-label-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-label-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-label-custom.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-label-formatter",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-label-formatter.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-label-formatter.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-formatter",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-formatter.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-formatter.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-icons",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-icons.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-icons.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-advanced",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-advanced.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-advanced.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
 ]
diff --git a/apps/www/registry/registry-colors.ts b/apps/www/registry/registry-colors.ts
index 314130e8ed9..ecb6cc9cde0 100644
--- a/apps/www/registry/registry-colors.ts
+++ b/apps/www/registry/registry-colors.ts
@@ -6,11 +6,13 @@ export const colors = {
     hex: "#000000",
     rgb: "rgb(0,0,0)",
     hsl: "hsl(0,0%,0%)",
+    oklch: "oklch(0.00,0.00,0)",
   },
   white: {
     hex: "#ffffff",
     rgb: "rgb(255,255,255)",
     hsl: "hsl(0,0%,100%)",
+    oklch: "oklch(1.00,0.00,0)",
   },
   slate: [
     {
@@ -18,66 +20,77 @@ export const colors = {
       hex: "#f8fafc",
       rgb: "rgb(248,250,252)",
       hsl: "hsl(210,40%,98%)",
+      oklch: "oklch(0.98,0.00,248)",
     },
     {
       scale: 100,
       hex: "#f1f5f9",
       rgb: "rgb(241,245,249)",
       hsl: "hsl(210,40%,96.1%)",
+      oklch: "oklch(0.97,0.01,248)",
     },
     {
       scale: 200,
       hex: "#e2e8f0",
       rgb: "rgb(226,232,240)",
       hsl: "hsl(214.3,31.8%,91.4%)",
+      oklch: "oklch(0.93,0.01,256)",
     },
     {
       scale: 300,
       hex: "#cbd5e1",
       rgb: "rgb(203,213,225)",
       hsl: "hsl(212.7,26.8%,83.9%)",
+      oklch: "oklch(0.87,0.02,253)",
     },
     {
       scale: 400,
       hex: "#94a3b8",
       rgb: "rgb(148,163,184)",
       hsl: "hsl(215,20.2%,65.1%)",
+      oklch: "oklch(0.71,0.04,257)",
     },
     {
       scale: 500,
       hex: "#64748b",
       rgb: "rgb(100,116,139)",
       hsl: "hsl(215.4,16.3%,46.9%)",
+      oklch: "oklch(0.55,0.04,257)",
     },
     {
       scale: 600,
       hex: "#475569",
       rgb: "rgb(71,85,105)",
       hsl: "hsl(215.3,19.3%,34.5%)",
+      oklch: "oklch(0.45,0.04,257)",
     },
     {
       scale: 700,
       hex: "#334155",
       rgb: "rgb(51,65,85)",
       hsl: "hsl(215.3,25%,26.7%)",
+      oklch: "oklch(0.37,0.04,257)",
     },
     {
       scale: 800,
       hex: "#1e293b",
       rgb: "rgb(30,41,59)",
       hsl: "hsl(217.2,32.6%,17.5%)",
+      oklch: "oklch(0.28,0.04,260)",
     },
     {
       scale: 900,
       hex: "#0f172a",
       rgb: "rgb(15,23,42)",
       hsl: "hsl(222.2,47.4%,11.2%)",
+      oklch: "oklch(0.21,0.04,266)",
     },
     {
       scale: 950,
       hex: "#020617",
       rgb: "rgb(2,6,23)",
       hsl: "hsl(222.2,84%,4.9%)",
+      oklch: "oklch(0.13,0.04,265)",
     },
   ],
   gray: [
@@ -86,66 +99,77 @@ export const colors = {
       hex: "#f9fafb",
       rgb: "rgb(249,250,251)",
       hsl: "hsl(210,20%,98%)",
+      oklch: "oklch(0.98,0.00,248)",
     },
     {
       scale: 100,
       hex: "#f3f4f6",
       rgb: "rgb(243,244,246)",
       hsl: "hsl(220,14.3%,95.9%)",
+      oklch: "oklch(0.97,0.00,265)",
     },
     {
       scale: 200,
       hex: "#e5e7eb",
       rgb: "rgb(229,231,235)",
       hsl: "hsl(220,13%,91%)",
+      oklch: "oklch(0.93,0.01,265)",
     },
     {
       scale: 300,
       hex: "#d1d5db",
       rgb: "rgb(209,213,219)",
       hsl: "hsl(216,12.2%,83.9%)",
+      oklch: "oklch(0.87,0.01,258)",
     },
     {
       scale: 400,
       hex: "#9ca3af",
       rgb: "rgb(156,163,175)",
       hsl: "hsl(217.9,10.6%,64.9%)",
+      oklch: "oklch(0.71,0.02,261)",
     },
     {
       scale: 500,
       hex: "#6b7280",
       rgb: "rgb(107,114,128)",
       hsl: "hsl(220,8.9%,46.1%)",
+      oklch: "oklch(0.55,0.02,264)",
     },
     {
       scale: 600,
       hex: "#4b5563",
       rgb: "rgb(75,85,99)",
       hsl: "hsl(215,13.8%,34.1%)",
+      oklch: "oklch(0.45,0.03,257)",
     },
     {
       scale: 700,
       hex: "#374151",
       rgb: "rgb(55,65,81)",
       hsl: "hsl(216.9,19.1%,26.7%)",
+      oklch: "oklch(0.37,0.03,260)",
     },
     {
       scale: 800,
       hex: "#1f2937",
       rgb: "rgb(31,41,55)",
       hsl: "hsl(215,27.9%,16.9%)",
+      oklch: "oklch(0.28,0.03,257)",
     },
     {
       scale: 900,
       hex: "#111827",
       rgb: "rgb(17,24,39)",
       hsl: "hsl(220.9,39.3%,11%)",
+      oklch: "oklch(0.21,0.03,265)",
     },
     {
       scale: 950,
       hex: "#030712",
       rgb: "rgb(3,7,18)",
       hsl: "hsl(224,71.4%,4.1%)",
+      oklch: "oklch(0.13,0.03,262)",
     },
   ],
   zinc: [
@@ -154,66 +178,77 @@ export const colors = {
       hex: "#fafafa",
       rgb: "rgb(250,250,250)",
       hsl: "hsl(0,0%,98%)",
+      oklch: "oklch(0.99,0.00,0)",
     },
     {
       scale: 100,
       hex: "#f4f4f5",
       rgb: "rgb(244,244,245)",
       hsl: "hsl(240,4.8%,95.9%)",
+      oklch: "oklch(0.97,0.00,286)",
     },
     {
       scale: 200,
       hex: "#e4e4e7",
       rgb: "rgb(228,228,231)",
       hsl: "hsl(240,5.9%,90%)",
+      oklch: "oklch(0.92,0.00,286)",
     },
     {
       scale: 300,
       hex: "#d4d4d8",
       rgb: "rgb(212,212,216)",
       hsl: "hsl(240,4.9%,83.9%)",
+      oklch: "oklch(0.87,0.01,286)",
     },
     {
       scale: 400,
       hex: "#a1a1aa",
       rgb: "rgb(161,161,170)",
       hsl: "hsl(240,5%,64.9%)",
+      oklch: "oklch(0.71,0.01,286)",
     },
     {
       scale: 500,
       hex: "#71717a",
       rgb: "rgb(113,113,122)",
       hsl: "hsl(240,3.8%,46.1%)",
+      oklch: "oklch(0.55,0.01,286)",
     },
     {
       scale: 600,
       hex: "#52525b",
       rgb: "rgb(82,82,91)",
       hsl: "hsl(240,5.2%,33.9%)",
+      oklch: "oklch(0.44,0.01,286)",
     },
     {
       scale: 700,
       hex: "#3f3f46",
       rgb: "rgb(63,63,70)",
       hsl: "hsl(240,5.3%,26.1%)",
+      oklch: "oklch(0.37,0.01,286)",
     },
     {
       scale: 800,
       hex: "#27272a",
       rgb: "rgb(39,39,42)",
       hsl: "hsl(240,3.7%,15.9%)",
+      oklch: "oklch(0.27,0.01,286)",
     },
     {
       scale: 900,
       hex: "#18181b",
       rgb: "rgb(24,24,27)",
       hsl: "hsl(240,5.9%,10%)",
+      oklch: "oklch(0.21,0.01,286)",
     },
     {
       scale: 950,
       hex: "#09090b",
       rgb: "rgb(9,9,11)",
       hsl: "hsl(240,10%,3.9%)",
+      oklch: "oklch(0.14,0.00,286)",
     },
   ],
   neutral: [
@@ -222,66 +257,77 @@ export const colors = {
       hex: "#fafafa",
       rgb: "rgb(250,250,250)",
       hsl: "hsl(0,0%,98%)",
+      oklch: "oklch(0.99,0.00,0)",
     },
     {
       scale: 100,
       hex: "#f5f5f5",
       rgb: "rgb(245,245,245)",
       hsl: "hsl(0,0%,96.1%)",
+      oklch: "oklch(0.97,0.00,0)",
     },
     {
       scale: 200,
       hex: "#e5e5e5",
       rgb: "rgb(229,229,229)",
       hsl: "hsl(0,0%,89.8%)",
+      oklch: "oklch(0.92,0.00,0)",
     },
     {
       scale: 300,
       hex: "#d4d4d4",
       rgb: "rgb(212,212,212)",
       hsl: "hsl(0,0%,83.1%)",
+      oklch: "oklch(0.87,0.00,0)",
     },
     {
       scale: 400,
       hex: "#a3a3a3",
       rgb: "rgb(163,163,163)",
       hsl: "hsl(0,0%,63.9%)",
+      oklch: "oklch(0.72,0.00,0)",
     },
     {
       scale: 500,
       hex: "#737373",
       rgb: "rgb(115,115,115)",
       hsl: "hsl(0,0%,45.1%)",
+      oklch: "oklch(0.56,0.00,0)",
     },
     {
       scale: 600,
       hex: "#525252",
       rgb: "rgb(82,82,82)",
       hsl: "hsl(0,0%,32.2%)",
+      oklch: "oklch(0.44,0.00,0)",
     },
     {
       scale: 700,
       hex: "#404040",
       rgb: "rgb(64,64,64)",
       hsl: "hsl(0,0%,25.1%)",
+      oklch: "oklch(0.37,0.00,0)",
     },
     {
       scale: 800,
       hex: "#262626",
       rgb: "rgb(38,38,38)",
       hsl: "hsl(0,0%,14.9%)",
+      oklch: "oklch(0.27,0.00,0)",
     },
     {
       scale: 900,
       hex: "#171717",
       rgb: "rgb(23,23,23)",
       hsl: "hsl(0,0%,9%)",
+      oklch: "oklch(0.20,0.00,0)",
     },
     {
       scale: 950,
       hex: "#0a0a0a",
       rgb: "rgb(10,10,10)",
       hsl: "hsl(0,0%,3.9%)",
+      oklch: "oklch(0.14,0.00,0)",
     },
   ],
   stone: [
@@ -290,66 +336,77 @@ export const colors = {
       hex: "#fafaf9",
       rgb: "rgb(250,250,249)",
       hsl: "hsl(60,9.1%,97.8%)",
+      oklch: "oklch(0.98,0.00,106)",
     },
     {
       scale: 100,
       hex: "#f5f5f4",
       rgb: "rgb(245,245,244)",
       hsl: "hsl(60,4.8%,95.9%)",
+      oklch: "oklch(0.97,0.00,106)",
     },
     {
       scale: 200,
       hex: "#e7e5e4",
       rgb: "rgb(231,229,228)",
       hsl: "hsl(20,5.9%,90%)",
+      oklch: "oklch(0.92,0.00,49)",
     },
     {
       scale: 300,
       hex: "#d6d3d1",
       rgb: "rgb(214,211,209)",
       hsl: "hsl(24,5.7%,82.9%)",
+      oklch: "oklch(0.87,0.00,56)",
     },
     {
       scale: 400,
       hex: "#a8a29e",
       rgb: "rgb(168,162,158)",
       hsl: "hsl(24,5.4%,63.9%)",
+      oklch: "oklch(0.72,0.01,56)",
     },
     {
       scale: 500,
       hex: "#78716c",
       rgb: "rgb(120,113,108)",
       hsl: "hsl(25,5.3%,44.7%)",
+      oklch: "oklch(0.55,0.01,58)",
     },
     {
       scale: 600,
       hex: "#57534e",
       rgb: "rgb(87,83,78)",
       hsl: "hsl(33.3,5.5%,32.4%)",
+      oklch: "oklch(0.44,0.01,74)",
     },
     {
       scale: 700,
       hex: "#44403c",
       rgb: "rgb(68,64,60)",
       hsl: "hsl(30,6.3%,25.1%)",
+      oklch: "oklch(0.37,0.01,68)",
     },
     {
       scale: 800,
       hex: "#292524",
       rgb: "rgb(41,37,36)",
       hsl: "hsl(12,6.5%,15.1%)",
+      oklch: "oklch(0.27,0.01,34)",
     },
     {
       scale: 900,
       hex: "#1c1917",
       rgb: "rgb(28,25,23)",
       hsl: "hsl(24,9.8%,10%)",
+      oklch: "oklch(0.22,0.01,56)",
     },
     {
       scale: 950,
       hex: "#0c0a09",
       rgb: "rgb(12,10,9)",
       hsl: "hsl(20,14.3%,4.1%)",
+      oklch: "oklch(0.15,0.00,49)",
     },
   ],
   red: [
@@ -358,66 +415,77 @@ export const colors = {
       hex: "#fef2f2",
       rgb: "rgb(254,242,242)",
       hsl: "hsl(0,85.7%,97.3%)",
+      oklch: "oklch(0.97,0.01,17)",
     },
     {
       scale: 100,
       hex: "#fee2e2",
       rgb: "rgb(254,226,226)",
       hsl: "hsl(0,93.3%,94.1%)",
+      oklch: "oklch(0.94,0.03,18)",
     },
     {
       scale: 200,
       hex: "#fecaca",
       rgb: "rgb(254,202,202)",
       hsl: "hsl(0,96.3%,89.4%)",
+      oklch: "oklch(0.88,0.06,18)",
     },
     {
       scale: 300,
       hex: "#fca5a5",
       rgb: "rgb(252,165,165)",
       hsl: "hsl(0,93.5%,81.8%)",
+      oklch: "oklch(0.81,0.10,20)",
     },
     {
       scale: 400,
       hex: "#f87171",
       rgb: "rgb(248,113,113)",
       hsl: "hsl(0,90.6%,70.8%)",
+      oklch: "oklch(0.71,0.17,22)",
     },
     {
       scale: 500,
       hex: "#ef4444",
       rgb: "rgb(239,68,68)",
       hsl: "hsl(0,84.2%,60.2%)",
+      oklch: "oklch(0.64,0.21,25)",
     },
     {
       scale: 600,
       hex: "#dc2626",
       rgb: "rgb(220,38,38)",
       hsl: "hsl(0,72.2%,50.6%)",
+      oklch: "oklch(0.58,0.22,27)",
     },
     {
       scale: 700,
       hex: "#b91c1c",
       rgb: "rgb(185,28,28)",
       hsl: "hsl(0,73.7%,41.8%)",
+      oklch: "oklch(0.51,0.19,28)",
     },
     {
       scale: 800,
       hex: "#991b1b",
       rgb: "rgb(153,27,27)",
       hsl: "hsl(0,70%,35.3%)",
+      oklch: "oklch(0.44,0.16,27)",
     },
     {
       scale: 900,
       hex: "#7f1d1d",
       rgb: "rgb(127,29,29)",
       hsl: "hsl(0,62.8%,30.6%)",
+      oklch: "oklch(0.40,0.13,26)",
     },
     {
       scale: 950,
       hex: "#450a0a",
       rgb: "rgb(69,10,10)",
       hsl: "hsl(0,74.7%,15.5%)",
+      oklch: "oklch(0.26,0.09,26)",
     },
   ],
   orange: [
@@ -426,66 +494,77 @@ export const colors = {
       hex: "#fff7ed",
       rgb: "rgb(255,247,237)",
       hsl: "hsl(33.3,100%,96.5%)",
+      oklch: "oklch(0.98,0.02,74)",
     },
     {
       scale: 100,
       hex: "#ffedd5",
       rgb: "rgb(255,237,213)",
       hsl: "hsl(34.3,100%,91.8%)",
+      oklch: "oklch(0.95,0.04,75)",
     },
     {
       scale: 200,
       hex: "#fed7aa",
       rgb: "rgb(254,215,170)",
       hsl: "hsl(32.1,97.7%,83.1%)",
+      oklch: "oklch(0.90,0.07,71)",
     },
     {
       scale: 300,
       hex: "#fdba74",
       rgb: "rgb(253,186,116)",
       hsl: "hsl(30.7,97.2%,72.4%)",
+      oklch: "oklch(0.84,0.12,66)",
     },
     {
       scale: 400,
       hex: "#fb923c",
       rgb: "rgb(251,146,60)",
       hsl: "hsl(27,96%,61%)",
+      oklch: "oklch(0.76,0.16,56)",
     },
     {
       scale: 500,
       hex: "#f97316",
       rgb: "rgb(249,115,22)",
       hsl: "hsl(24.6,95%,53.1%)",
+      oklch: "oklch(0.70,0.19,48)",
     },
     {
       scale: 600,
       hex: "#ea580c",
       rgb: "rgb(234,88,12)",
       hsl: "hsl(20.5,90.2%,48.2%)",
+      oklch: "oklch(0.65,0.19,41)",
     },
     {
       scale: 700,
       hex: "#c2410c",
       rgb: "rgb(194,65,12)",
       hsl: "hsl(17.5,88.3%,40.4%)",
+      oklch: "oklch(0.55,0.17,38)",
     },
     {
       scale: 800,
       hex: "#9a3412",
       rgb: "rgb(154,52,18)",
       hsl: "hsl(15,79.1%,33.7%)",
+      oklch: "oklch(0.47,0.14,37)",
     },
     {
       scale: 900,
       hex: "#7c2d12",
       rgb: "rgb(124,45,18)",
       hsl: "hsl(15.3,74.6%,27.8%)",
+      oklch: "oklch(0.41,0.12,38)",
     },
     {
       scale: 950,
       hex: "#431407",
       rgb: "rgb(67,20,7)",
       hsl: "hsl(13,81.1%,14.5%)",
+      oklch: "oklch(0.27,0.08,36)",
     },
   ],
   amber: [
@@ -494,66 +573,77 @@ export const colors = {
       hex: "#fffbeb",
       rgb: "rgb(255,251,235)",
       hsl: "hsl(48,100%,96.1%)",
+      oklch: "oklch(0.99,0.02,95)",
     },
     {
       scale: 100,
       hex: "#fef3c7",
       rgb: "rgb(254,243,199)",
       hsl: "hsl(48,96.5%,88.8%)",
+      oklch: "oklch(0.96,0.06,96)",
     },
     {
       scale: 200,
       hex: "#fde68a",
       rgb: "rgb(253,230,138)",
       hsl: "hsl(48,96.6%,76.7%)",
+      oklch: "oklch(0.92,0.12,96)",
     },
     {
       scale: 300,
       hex: "#fcd34d",
       rgb: "rgb(252,211,77)",
       hsl: "hsl(45.9,96.7%,64.5%)",
+      oklch: "oklch(0.88,0.15,92)",
     },
     {
       scale: 400,
       hex: "#fbbf24",
       rgb: "rgb(251,191,36)",
       hsl: "hsl(43.3,96.4%,56.3%)",
+      oklch: "oklch(0.84,0.16,84)",
     },
     {
       scale: 500,
       hex: "#f59e0b",
       rgb: "rgb(245,158,11)",
       hsl: "hsl(37.7,92.1%,50.2%)",
+      oklch: "oklch(0.77,0.16,70)",
     },
     {
       scale: 600,
       hex: "#d97706",
       rgb: "rgb(217,119,6)",
       hsl: "hsl(32.1,94.6%,43.7%)",
+      oklch: "oklch(0.67,0.16,58)",
     },
     {
       scale: 700,
       hex: "#b45309",
       rgb: "rgb(180,83,9)",
       hsl: "hsl(26,90.5%,37.1%)",
+      oklch: "oklch(0.56,0.15,49)",
     },
     {
       scale: 800,
       hex: "#92400e",
       rgb: "rgb(146,64,14)",
       hsl: "hsl(22.7,82.5%,31.4%)",
+      oklch: "oklch(0.47,0.12,46)",
     },
     {
       scale: 900,
       hex: "#78350f",
       rgb: "rgb(120,53,15)",
       hsl: "hsl(21.7,77.8%,26.5%)",
+      oklch: "oklch(0.41,0.11,46)",
     },
     {
       scale: 950,
       hex: "#451a03",
       rgb: "rgb(69,26,3)",
       hsl: "hsl(20.9,91.7%,14.1%)",
+      oklch: "oklch(0.28,0.07,46)",
     },
   ],
   yellow: [
@@ -562,66 +652,77 @@ export const colors = {
       hex: "#fefce8",
       rgb: "rgb(254,252,232)",
       hsl: "hsl(54.5,91.7%,95.3%)",
+      oklch: "oklch(0.99,0.03,102)",
     },
     {
       scale: 100,
       hex: "#fef9c3",
       rgb: "rgb(254,249,195)",
       hsl: "hsl(54.9,96.7%,88%)",
+      oklch: "oklch(0.97,0.07,103)",
     },
     {
       scale: 200,
       hex: "#fef08a",
       rgb: "rgb(254,240,138)",
       hsl: "hsl(52.8,98.3%,76.9%)",
+      oklch: "oklch(0.95,0.12,102)",
     },
     {
       scale: 300,
       hex: "#fde047",
       rgb: "rgb(253,224,71)",
       hsl: "hsl(50.4,97.8%,63.5%)",
+      oklch: "oklch(0.91,0.17,98)",
     },
     {
       scale: 400,
       hex: "#facc15",
       rgb: "rgb(250,204,21)",
       hsl: "hsl(47.9,95.8%,53.1%)",
+      oklch: "oklch(0.86,0.17,92)",
     },
     {
       scale: 500,
       hex: "#eab308",
       rgb: "rgb(234,179,8)",
       hsl: "hsl(45.4,93.4%,47.5%)",
+      oklch: "oklch(0.80,0.16,86)",
     },
     {
       scale: 600,
       hex: "#ca8a04",
       rgb: "rgb(202,138,4)",
       hsl: "hsl(40.6,96.1%,40.4%)",
+      oklch: "oklch(0.68,0.14,76)",
     },
     {
       scale: 700,
       hex: "#a16207",
       rgb: "rgb(161,98,7)",
       hsl: "hsl(35.5,91.7%,32.9%)",
+      oklch: "oklch(0.55,0.12,66)",
     },
     {
       scale: 800,
       hex: "#854d0e",
       rgb: "rgb(133,77,14)",
       hsl: "hsl(31.8,81%,28.8%)",
+      oklch: "oklch(0.48,0.10,62)",
     },
     {
       scale: 900,
       hex: "#713f12",
       rgb: "rgb(113,63,18)",
       hsl: "hsl(28.4,72.5%,25.7%)",
+      oklch: "oklch(0.42,0.09,58)",
     },
     {
       scale: 950,
       hex: "#422006",
       rgb: "rgb(66,32,6)",
       hsl: "hsl(26,83.3%,14.1%)",
+      oklch: "oklch(0.29,0.06,54)",
     },
   ],
   lime: [
@@ -630,66 +731,77 @@ export const colors = {
       hex: "#f7fee7",
       rgb: "rgb(247,254,231)",
       hsl: "hsl(78.3,92%,95.1%)",
+      oklch: "oklch(0.99,0.03,121)",
     },
     {
       scale: 100,
       hex: "#ecfccb",
       rgb: "rgb(236,252,203)",
       hsl: "hsl(79.6,89.1%,89.2%)",
+      oklch: "oklch(0.97,0.07,122)",
     },
     {
       scale: 200,
       hex: "#d9f99d",
       rgb: "rgb(217,249,157)",
       hsl: "hsl(80.9,88.5%,79.6%)",
+      oklch: "oklch(0.94,0.12,124)",
     },
     {
       scale: 300,
       hex: "#bef264",
       rgb: "rgb(190,242,100)",
       hsl: "hsl(82,84.5%,67.1%)",
+      oklch: "oklch(0.90,0.18,127)",
     },
     {
       scale: 400,
       hex: "#a3e635",
       rgb: "rgb(163,230,53)",
       hsl: "hsl(82.7,78%,55.5%)",
+      oklch: "oklch(0.85,0.21,129)",
     },
     {
       scale: 500,
       hex: "#84cc16",
       rgb: "rgb(132,204,22)",
       hsl: "hsl(83.7,80.5%,44.3%)",
+      oklch: "oklch(0.77,0.20,131)",
     },
     {
       scale: 600,
       hex: "#65a30d",
       rgb: "rgb(101,163,13)",
       hsl: "hsl(84.8,85.2%,34.5%)",
+      oklch: "oklch(0.65,0.18,132)",
     },
     {
       scale: 700,
       hex: "#4d7c0f",
       rgb: "rgb(77,124,15)",
       hsl: "hsl(85.9,78.4%,27.3%)",
+      oklch: "oklch(0.53,0.14,132)",
     },
     {
       scale: 800,
       hex: "#3f6212",
       rgb: "rgb(63,98,18)",
       hsl: "hsl(86.3,69%,22.7%)",
+      oklch: "oklch(0.45,0.11,131)",
     },
     {
       scale: 900,
       hex: "#365314",
       rgb: "rgb(54,83,20)",
       hsl: "hsl(87.6,61.2%,20.2%)",
+      oklch: "oklch(0.41,0.10,131)",
     },
     {
       scale: 950,
       hex: "#1a2e05",
       rgb: "rgb(26,46,5)",
       hsl: "hsl(89.3,80.4%,10%)",
+      oklch: "oklch(0.27,0.07,132)",
     },
   ],
   green: [
@@ -698,66 +810,77 @@ export const colors = {
       hex: "#f0fdf4",
       rgb: "rgb(240,253,244)",
       hsl: "hsl(138.5,76.5%,96.7%)",
+      oklch: "oklch(0.98,0.02,156)",
     },
     {
       scale: 100,
       hex: "#dcfce7",
       rgb: "rgb(220,252,231)",
       hsl: "hsl(140.6,84.2%,92.5%)",
+      oklch: "oklch(0.96,0.04,157)",
     },
     {
       scale: 200,
       hex: "#bbf7d0",
       rgb: "rgb(187,247,208)",
       hsl: "hsl(141,78.9%,85.1%)",
+      oklch: "oklch(0.93,0.08,156)",
     },
     {
       scale: 300,
       hex: "#86efac",
       rgb: "rgb(134,239,172)",
       hsl: "hsl(141.7,76.6%,73.1%)",
+      oklch: "oklch(0.87,0.14,154)",
     },
     {
       scale: 400,
       hex: "#4ade80",
       rgb: "rgb(74,222,128)",
       hsl: "hsl(141.9,69.2%,58%)",
+      oklch: "oklch(0.80,0.18,152)",
     },
     {
       scale: 500,
       hex: "#22c55e",
       rgb: "rgb(34,197,94)",
       hsl: "hsl(142.1,70.6%,45.3%)",
+      oklch: "oklch(0.72,0.19,150)",
     },
     {
       scale: 600,
       hex: "#16a34a",
       rgb: "rgb(22,163,74)",
       hsl: "hsl(142.1,76.2%,36.3%)",
+      oklch: "oklch(0.63,0.17,149)",
     },
     {
       scale: 700,
       hex: "#15803d",
       rgb: "rgb(21,128,61)",
       hsl: "hsl(142.4,71.8%,29.2%)",
+      oklch: "oklch(0.53,0.14,150)",
     },
     {
       scale: 800,
       hex: "#166534",
       rgb: "rgb(22,101,52)",
       hsl: "hsl(142.8,64.2%,24.1%)",
+      oklch: "oklch(0.45,0.11,151)",
     },
     {
       scale: 900,
       hex: "#14532d",
       rgb: "rgb(20,83,45)",
       hsl: "hsl(143.8,61.2%,20.2%)",
+      oklch: "oklch(0.39,0.09,153)",
     },
     {
       scale: 950,
       hex: "#052e16",
       rgb: "rgb(5,46,22)",
       hsl: "hsl(144.9,80.4%,10%)",
+      oklch: "oklch(0.27,0.06,153)",
     },
   ],
   emerald: [
@@ -766,66 +889,77 @@ export const colors = {
       hex: "#ecfdf5",
       rgb: "rgb(236,253,245)",
       hsl: "hsl(151.8,81%,95.9%)",
+      oklch: "oklch(0.98,0.02,166)",
     },
     {
       scale: 100,
       hex: "#d1fae5",
       rgb: "rgb(209,250,229)",
       hsl: "hsl(149.3,80.4%,90%)",
+      oklch: "oklch(0.95,0.05,163)",
     },
     {
       scale: 200,
       hex: "#a7f3d0",
       rgb: "rgb(167,243,208)",
       hsl: "hsl(152.4,76%,80.4%)",
+      oklch: "oklch(0.90,0.09,164)",
     },
     {
       scale: 300,
       hex: "#6ee7b7",
       rgb: "rgb(110,231,183)",
       hsl: "hsl(156.2,71.6%,66.9%)",
+      oklch: "oklch(0.85,0.13,165)",
     },
     {
       scale: 400,
       hex: "#34d399",
       rgb: "rgb(52,211,153)",
       hsl: "hsl(158.1,64.4%,51.6%)",
+      oklch: "oklch(0.77,0.15,163)",
     },
     {
       scale: 500,
       hex: "#10b981",
       rgb: "rgb(16,185,129)",
       hsl: "hsl(160.1,84.1%,39.4%)",
+      oklch: "oklch(0.70,0.15,162)",
     },
     {
       scale: 600,
       hex: "#059669",
       rgb: "rgb(5,150,105)",
       hsl: "hsl(161.4,93.5%,30.4%)",
+      oklch: "oklch(0.60,0.13,163)",
     },
     {
       scale: 700,
       hex: "#047857",
       rgb: "rgb(4,120,87)",
       hsl: "hsl(162.9,93.5%,24.3%)",
+      oklch: "oklch(0.51,0.10,166)",
     },
     {
       scale: 800,
       hex: "#065f46",
       rgb: "rgb(6,95,70)",
       hsl: "hsl(163.1,88.1%,19.8%)",
+      oklch: "oklch(0.43,0.09,167)",
     },
     {
       scale: 900,
       hex: "#064e3b",
       rgb: "rgb(6,78,59)",
       hsl: "hsl(164.2,85.7%,16.5%)",
+      oklch: "oklch(0.38,0.07,169)",
     },
     {
       scale: 950,
       hex: "#022c22",
       rgb: "rgb(2,44,34)",
       hsl: "hsl(165.7,91.3%,9%)",
+      oklch: "oklch(0.26,0.05,173)",
     },
   ],
   teal: [
@@ -834,66 +968,77 @@ export const colors = {
       hex: "#f0fdfa",
       rgb: "rgb(240,253,250)",
       hsl: "hsl(166.2,76.5%,96.7%)",
+      oklch: "oklch(0.98,0.01,181)",
     },
     {
       scale: 100,
       hex: "#ccfbf1",
       rgb: "rgb(204,251,241)",
       hsl: "hsl(167.2,85.5%,89.2%)",
+      oklch: "oklch(0.95,0.05,181)",
     },
     {
       scale: 200,
       hex: "#99f6e4",
       rgb: "rgb(153,246,228)",
       hsl: "hsl(168.4,83.8%,78.2%)",
+      oklch: "oklch(0.91,0.09,180)",
     },
     {
       scale: 300,
       hex: "#5eead4",
       rgb: "rgb(94,234,212)",
       hsl: "hsl(170.6,76.9%,64.3%)",
+      oklch: "oklch(0.85,0.13,181)",
     },
     {
       scale: 400,
       hex: "#2dd4bf",
       rgb: "rgb(45,212,191)",
       hsl: "hsl(172.5,66%,50.4%)",
+      oklch: "oklch(0.78,0.13,182)",
     },
     {
       scale: 500,
       hex: "#14b8a6",
       rgb: "rgb(20,184,166)",
       hsl: "hsl(173.4,80.4%,40%)",
+      oklch: "oklch(0.70,0.12,183)",
     },
     {
       scale: 600,
       hex: "#0d9488",
       rgb: "rgb(13,148,136)",
       hsl: "hsl(174.7,83.9%,31.6%)",
+      oklch: "oklch(0.60,0.10,185)",
     },
     {
       scale: 700,
       hex: "#0f766e",
       rgb: "rgb(15,118,110)",
       hsl: "hsl(175.3,77.4%,26.1%)",
+      oklch: "oklch(0.51,0.09,186)",
     },
     {
       scale: 800,
       hex: "#115e59",
       rgb: "rgb(17,94,89)",
       hsl: "hsl(176.1,69.4%,21.8%)",
+      oklch: "oklch(0.44,0.07,188)",
     },
     {
       scale: 900,
       hex: "#134e4a",
       rgb: "rgb(19,78,74)",
       hsl: "hsl(175.9,60.8%,19%)",
+      oklch: "oklch(0.39,0.06,188)",
     },
     {
       scale: 950,
       hex: "#042f2e",
       rgb: "rgb(4,47,46)",
       hsl: "hsl(178.6,84.3%,10%)",
+      oklch: "oklch(0.28,0.04,193)",
     },
   ],
   cyan: [
@@ -902,66 +1047,77 @@ export const colors = {
       hex: "#ecfeff",
       rgb: "rgb(236,254,255)",
       hsl: "hsl(183.2,100%,96.3%)",
+      oklch: "oklch(0.98,0.02,201)",
     },
     {
       scale: 100,
       hex: "#cffafe",
       rgb: "rgb(207,250,254)",
       hsl: "hsl(185.1,95.9%,90.4%)",
+      oklch: "oklch(0.96,0.04,203)",
     },
     {
       scale: 200,
       hex: "#a5f3fc",
       rgb: "rgb(165,243,252)",
       hsl: "hsl(186.2,93.5%,81.8%)",
+      oklch: "oklch(0.92,0.08,205)",
     },
     {
       scale: 300,
       hex: "#67e8f9",
       rgb: "rgb(103,232,249)",
       hsl: "hsl(187,92.4%,69%)",
+      oklch: "oklch(0.87,0.12,207)",
     },
     {
       scale: 400,
       hex: "#22d3ee",
       rgb: "rgb(34,211,238)",
       hsl: "hsl(187.9,85.7%,53.3%)",
+      oklch: "oklch(0.80,0.13,212)",
     },
     {
       scale: 500,
       hex: "#06b6d4",
       rgb: "rgb(6,182,212)",
       hsl: "hsl(188.7,94.5%,42.7%)",
+      oklch: "oklch(0.71,0.13,215)",
     },
     {
       scale: 600,
       hex: "#0891b2",
       rgb: "rgb(8,145,178)",
       hsl: "hsl(191.6,91.4%,36.5%)",
+      oklch: "oklch(0.61,0.11,222)",
     },
     {
       scale: 700,
       hex: "#0e7490",
       rgb: "rgb(14,116,144)",
       hsl: "hsl(192.9,82.3%,31%)",
+      oklch: "oklch(0.52,0.09,223)",
     },
     {
       scale: 800,
       hex: "#155e75",
       rgb: "rgb(21,94,117)",
       hsl: "hsl(194.4,69.6%,27.1%)",
+      oklch: "oklch(0.45,0.08,224)",
     },
     {
       scale: 900,
       hex: "#164e63",
       rgb: "rgb(22,78,99)",
       hsl: "hsl(196.4,63.6%,23.7%)",
+      oklch: "oklch(0.40,0.07,227)",
     },
     {
       scale: 950,
       hex: "#083344",
       rgb: "rgb(8,51,68)",
       hsl: "hsl(197,78.9%,14.9%)",
+      oklch: "oklch(0.30,0.05,230)",
     },
   ],
   sky: [
@@ -970,66 +1126,77 @@ export const colors = {
       hex: "#f0f9ff",
       rgb: "rgb(240,249,255)",
       hsl: "hsl(204,100%,97.1%)",
+      oklch: "oklch(0.98,0.01,237)",
     },
     {
       scale: 100,
       hex: "#e0f2fe",
       rgb: "rgb(224,242,254)",
       hsl: "hsl(204,93.8%,93.7%)",
+      oklch: "oklch(0.95,0.03,237)",
     },
     {
       scale: 200,
       hex: "#bae6fd",
       rgb: "rgb(186,230,253)",
       hsl: "hsl(200.6,94.4%,86.1%)",
+      oklch: "oklch(0.90,0.06,231)",
     },
     {
       scale: 300,
       hex: "#7dd3fc",
       rgb: "rgb(125,211,252)",
       hsl: "hsl(199.4,95.5%,73.9%)",
+      oklch: "oklch(0.83,0.10,230)",
     },
     {
       scale: 400,
       hex: "#38bdf8",
       rgb: "rgb(56,189,248)",
       hsl: "hsl(198.4,93.2%,59.6%)",
+      oklch: "oklch(0.75,0.14,233)",
     },
     {
       scale: 500,
       hex: "#0ea5e9",
       rgb: "rgb(14,165,233)",
       hsl: "hsl(198.6,88.7%,48.4%)",
+      oklch: "oklch(0.68,0.15,237)",
     },
     {
       scale: 600,
       hex: "#0284c7",
       rgb: "rgb(2,132,199)",
       hsl: "hsl(200.4,98%,39.4%)",
+      oklch: "oklch(0.59,0.14,242)",
     },
     {
       scale: 700,
       hex: "#0369a1",
       rgb: "rgb(3,105,161)",
       hsl: "hsl(201.3,96.3%,32.2%)",
+      oklch: "oklch(0.50,0.12,243)",
     },
     {
       scale: 800,
       hex: "#075985",
       rgb: "rgb(7,89,133)",
       hsl: "hsl(201,90%,27.5%)",
+      oklch: "oklch(0.44,0.10,241)",
     },
     {
       scale: 900,
       hex: "#0c4a6e",
       rgb: "rgb(12,74,110)",
       hsl: "hsl(202,80.3%,23.9%)",
+      oklch: "oklch(0.39,0.08,241)",
     },
     {
       scale: 950,
       hex: "#082f49",
       rgb: "rgb(8,47,73)",
       hsl: "hsl(204,80.2%,15.9%)",
+      oklch: "oklch(0.29,0.06,243)",
     },
   ],
   blue: [
@@ -1038,66 +1205,77 @@ export const colors = {
       hex: "#eff6ff",
       rgb: "rgb(239,246,255)",
       hsl: "hsl(213.8,100%,96.9%)",
+      oklch: "oklch(0.97,0.01,255)",
     },
     {
       scale: 100,
       hex: "#dbeafe",
       rgb: "rgb(219,234,254)",
       hsl: "hsl(214.3,94.6%,92.7%)",
+      oklch: "oklch(0.93,0.03,256)",
     },
     {
       scale: 200,
       hex: "#bfdbfe",
       rgb: "rgb(191,219,254)",
       hsl: "hsl(213.3,96.9%,87.3%)",
+      oklch: "oklch(0.88,0.06,254)",
     },
     {
       scale: 300,
       hex: "#93c5fd",
       rgb: "rgb(147,197,253)",
       hsl: "hsl(211.7,96.4%,78.4%)",
+      oklch: "oklch(0.81,0.10,252)",
     },
     {
       scale: 400,
       hex: "#60a5fa",
       rgb: "rgb(96,165,250)",
       hsl: "hsl(213.1,93.9%,67.8%)",
+      oklch: "oklch(0.71,0.14,255)",
     },
     {
       scale: 500,
       hex: "#3b82f6",
       rgb: "rgb(59,130,246)",
       hsl: "hsl(217.2,91.2%,59.8%)",
+      oklch: "oklch(0.62,0.19,260)",
     },
     {
       scale: 600,
       hex: "#2563eb",
       rgb: "rgb(37,99,235)",
       hsl: "hsl(221.2,83.2%,53.3%)",
+      oklch: "oklch(0.55,0.22,263)",
     },
     {
       scale: 700,
       hex: "#1d4ed8",
       rgb: "rgb(29,78,216)",
       hsl: "hsl(224.3,76.3%,48%)",
+      oklch: "oklch(0.49,0.22,264)",
     },
     {
       scale: 800,
       hex: "#1e40af",
       rgb: "rgb(30,64,175)",
       hsl: "hsl(225.9,70.7%,40.2%)",
+      oklch: "oklch(0.42,0.18,266)",
     },
     {
       scale: 900,
       hex: "#1e3a8a",
       rgb: "rgb(30,58,138)",
       hsl: "hsl(224.4,64.3%,32.9%)",
+      oklch: "oklch(0.38,0.14,266)",
     },
     {
       scale: 950,
       hex: "#172554",
       rgb: "rgb(23,37,84)",
       hsl: "hsl(226.2,57%,21%)",
+      oklch: "oklch(0.28,0.09,268)",
     },
   ],
   indigo: [
@@ -1106,66 +1284,77 @@ export const colors = {
       hex: "#eef2ff",
       rgb: "rgb(238,242,255)",
       hsl: "hsl(225.9,100%,96.7%)",
+      oklch: "oklch(0.96,0.02,272)",
     },
     {
       scale: 100,
       hex: "#e0e7ff",
       rgb: "rgb(224,231,255)",
       hsl: "hsl(226.5,100%,93.9%)",
+      oklch: "oklch(0.93,0.03,273)",
     },
     {
       scale: 200,
       hex: "#c7d2fe",
       rgb: "rgb(199,210,254)",
       hsl: "hsl(228,96.5%,88.8%)",
+      oklch: "oklch(0.87,0.06,274)",
     },
     {
       scale: 300,
       hex: "#a5b4fc",
       rgb: "rgb(165,180,252)",
       hsl: "hsl(229.7,93.5%,81.8%)",
+      oklch: "oklch(0.79,0.10,275)",
     },
     {
       scale: 400,
       hex: "#818cf8",
       rgb: "rgb(129,140,248)",
       hsl: "hsl(234.5,89.5%,73.9%)",
+      oklch: "oklch(0.68,0.16,277)",
     },
     {
       scale: 500,
       hex: "#6366f1",
       rgb: "rgb(99,102,241)",
       hsl: "hsl(238.7,83.5%,66.7%)",
+      oklch: "oklch(0.59,0.20,277)",
     },
     {
       scale: 600,
       hex: "#4f46e5",
       rgb: "rgb(79,70,229)",
       hsl: "hsl(243.4,75.4%,58.6%)",
+      oklch: "oklch(0.51,0.23,277)",
     },
     {
       scale: 700,
       hex: "#4338ca",
       rgb: "rgb(67,56,202)",
       hsl: "hsl(244.5,57.9%,50.6%)",
+      oklch: "oklch(0.46,0.21,277)",
     },
     {
       scale: 800,
       hex: "#3730a3",
       rgb: "rgb(55,48,163)",
       hsl: "hsl(243.7,54.5%,41.4%)",
+      oklch: "oklch(0.40,0.18,277)",
     },
     {
       scale: 900,
       hex: "#312e81",
       rgb: "rgb(49,46,129)",
       hsl: "hsl(242.2,47.4%,34.3%)",
+      oklch: "oklch(0.36,0.14,279)",
     },
     {
       scale: 950,
       hex: "#1e1b4b",
       rgb: "rgb(30,27,75)",
       hsl: "hsl(243.8,47.1%,20%)",
+      oklch: "oklch(0.26,0.09,281)",
     },
   ],
   violet: [
@@ -1174,66 +1363,77 @@ export const colors = {
       hex: "#f5f3ff",
       rgb: "rgb(245,243,255)",
       hsl: "hsl(250,100%,97.6%)",
+      oklch: "oklch(0.97,0.02,294)",
     },
     {
       scale: 100,
       hex: "#ede9fe",
       rgb: "rgb(237,233,254)",
       hsl: "hsl(251.4,91.3%,95.5%)",
+      oklch: "oklch(0.94,0.03,295)",
     },
     {
       scale: 200,
       hex: "#ddd6fe",
       rgb: "rgb(221,214,254)",
       hsl: "hsl(250.5,95.2%,91.8%)",
+      oklch: "oklch(0.89,0.05,293)",
     },
     {
       scale: 300,
       hex: "#c4b5fd",
       rgb: "rgb(196,181,253)",
       hsl: "hsl(252.5,94.7%,85.1%)",
+      oklch: "oklch(0.81,0.10,294)",
     },
     {
       scale: 400,
       hex: "#a78bfa",
       rgb: "rgb(167,139,250)",
       hsl: "hsl(255.1,91.7%,76.3%)",
+      oklch: "oklch(0.71,0.16,294)",
     },
     {
       scale: 500,
       hex: "#8b5cf6",
       rgb: "rgb(139,92,246)",
       hsl: "hsl(258.3,89.5%,66.3%)",
+      oklch: "oklch(0.61,0.22,293)",
     },
     {
       scale: 600,
       hex: "#7c3aed",
       rgb: "rgb(124,58,237)",
       hsl: "hsl(262.1,83.3%,57.8%)",
+      oklch: "oklch(0.54,0.25,293)",
     },
     {
       scale: 700,
       hex: "#6d28d9",
       rgb: "rgb(109,40,217)",
       hsl: "hsl(263.4,70%,50.4%)",
+      oklch: "oklch(0.49,0.24,293)",
     },
     {
       scale: 800,
       hex: "#5b21b6",
       rgb: "rgb(91,33,182)",
       hsl: "hsl(263.4,69.3%,42.2%)",
+      oklch: "oklch(0.43,0.21,293)",
     },
     {
       scale: 900,
       hex: "#4c1d95",
       rgb: "rgb(76,29,149)",
       hsl: "hsl(263.5,67.4%,34.9%)",
+      oklch: "oklch(0.38,0.18,294)",
     },
     {
       scale: 950,
       hex: "#1e1b4b",
       rgb: "rgb(46,16,101)",
       hsl: "hsl(261.2,72.6%,22.9%)",
+      oklch: "oklch(0.28,0.14,291)",
     },
   ],
   purple: [
@@ -1242,66 +1442,77 @@ export const colors = {
       hex: "#faf5ff",
       rgb: "rgb(250,245,255)",
       hsl: "hsl(270,100%,98%)",
+      oklch: "oklch(0.98,0.01,308)",
     },
     {
       scale: 100,
       hex: "#f3e8ff",
       rgb: "rgb(243,232,255)",
       hsl: "hsl(268.7,100%,95.5%)",
+      oklch: "oklch(0.95,0.03,307)",
     },
     {
       scale: 200,
       hex: "#e9d5ff",
       rgb: "rgb(233,213,255)",
       hsl: "hsl(268.6,100%,91.8%)",
+      oklch: "oklch(0.90,0.06,307)",
     },
     {
       scale: 300,
       hex: "#d8b4fe",
       rgb: "rgb(216,180,254)",
       hsl: "hsl(269.2,97.4%,85.1%)",
+      oklch: "oklch(0.83,0.11,306)",
     },
     {
       scale: 400,
       hex: "#c084fc",
       rgb: "rgb(192,132,252)",
       hsl: "hsl(270,95.2%,75.3%)",
+      oklch: "oklch(0.72,0.18,306)",
     },
     {
       scale: 500,
       hex: "#a855f7",
       rgb: "rgb(168,85,247)",
       hsl: "hsl(270.7,91%,65.1%)",
+      oklch: "oklch(0.63,0.23,304)",
     },
     {
       scale: 600,
       hex: "#9333ea",
       rgb: "rgb(147,51,234)",
       hsl: "hsl(271.5,81.3%,55.9%)",
+      oklch: "oklch(0.56,0.25,302)",
     },
     {
       scale: 700,
       hex: "#7e22ce",
       rgb: "rgb(126,34,206)",
       hsl: "hsl(272.1,71.7%,47.1%)",
+      oklch: "oklch(0.50,0.24,302)",
     },
     {
       scale: 800,
       hex: "#6b21a8",
       rgb: "rgb(107,33,168)",
       hsl: "hsl(272.9,67.2%,39.4%)",
+      oklch: "oklch(0.44,0.20,304)",
     },
     {
       scale: 900,
       hex: "#581c87",
       rgb: "rgb(88,28,135)",
       hsl: "hsl(273.6,65.6%,32%)",
+      oklch: "oklch(0.38,0.17,305)",
     },
     {
       scale: 950,
       hex: "#3b0764",
       rgb: "rgb(59,7,100)",
       hsl: "hsl(273.5,86.9%,21%)",
+      oklch: "oklch(0.29,0.14,303)",
     },
   ],
   fuchsia: [
@@ -1310,66 +1521,77 @@ export const colors = {
       hex: "#fdf4ff",
       rgb: "rgb(253,244,255)",
       hsl: "hsl(289.1,100%,97.8%)",
+      oklch: "oklch(0.98,0.02,320)",
     },
     {
       scale: 100,
       hex: "#fae8ff",
       rgb: "rgb(250,232,255)",
       hsl: "hsl(287,100%,95.5%)",
+      oklch: "oklch(0.95,0.04,319)",
     },
     {
       scale: 200,
       hex: "#f5d0fe",
       rgb: "rgb(245,208,254)",
       hsl: "hsl(288.3,95.8%,90.6%)",
+      oklch: "oklch(0.90,0.07,320)",
     },
     {
       scale: 300,
       hex: "#f0abfc",
       rgb: "rgb(240,171,252)",
       hsl: "hsl(291.1,93.1%,82.9%)",
+      oklch: "oklch(0.83,0.13,321)",
     },
     {
       scale: 400,
       hex: "#e879f9",
       rgb: "rgb(232,121,249)",
       hsl: "hsl(292,91.4%,72.5%)",
+      oklch: "oklch(0.75,0.21,322)",
     },
     {
       scale: 500,
       hex: "#d946ef",
       rgb: "rgb(217,70,239)",
       hsl: "hsl(292.2,84.1%,60.6%)",
+      oklch: "oklch(0.67,0.26,322)",
     },
     {
       scale: 600,
       hex: "#c026d3",
       rgb: "rgb(192,38,211)",
       hsl: "hsl(293.4,69.5%,48.8%)",
+      oklch: "oklch(0.59,0.26,323)",
     },
     {
       scale: 700,
       hex: "#a21caf",
       rgb: "rgb(162,28,175)",
       hsl: "hsl(294.7,72.4%,39.8%)",
+      oklch: "oklch(0.52,0.23,324)",
     },
     {
       scale: 800,
       hex: "#86198f",
       rgb: "rgb(134,25,143)",
       hsl: "hsl(295.4,70.2%,32.9%)",
+      oklch: "oklch(0.45,0.19,325)",
     },
     {
       scale: 900,
       hex: "#701a75",
       rgb: "rgb(112,26,117)",
       hsl: "hsl(296.7,63.6%,28%)",
+      oklch: "oklch(0.40,0.16,326)",
     },
     {
       scale: 950,
       hex: "#4a044e",
       rgb: "rgb(74,4,78)",
       hsl: "hsl(296.8,90.2%,16.1%)",
+      oklch: "oklch(0.29,0.13,326)",
     },
   ],
   pink: [
@@ -1378,66 +1600,77 @@ export const colors = {
       hex: "#fdf2f8",
       rgb: "rgb(253,242,248)",
       hsl: "hsl(327.3,73.3%,97.1%)",
+      oklch: "oklch(0.97,0.01,343)",
     },
     {
       scale: 100,
       hex: "#fce7f3",
       rgb: "rgb(252,231,243)",
       hsl: "hsl(325.7,77.8%,94.7%)",
+      oklch: "oklch(0.95,0.03,342)",
     },
     {
       scale: 200,
       hex: "#fbcfe8",
       rgb: "rgb(251,207,232)",
       hsl: "hsl(325.9,84.6%,89.8%)",
+      oklch: "oklch(0.90,0.06,343)",
     },
     {
       scale: 300,
       hex: "#f9a8d4",
       rgb: "rgb(249,168,212)",
       hsl: "hsl(327.4,87.1%,81.8%)",
+      oklch: "oklch(0.82,0.11,346)",
     },
     {
       scale: 400,
       hex: "#f472b6",
       rgb: "rgb(244,114,182)",
       hsl: "hsl(328.6,85.5%,70.2%)",
+      oklch: "oklch(0.73,0.18,350)",
     },
     {
       scale: 500,
       hex: "#ec4899",
       rgb: "rgb(236,72,153)",
       hsl: "hsl(330.4,81.2%,60.4%)",
+      oklch: "oklch(0.66,0.21,354)",
     },
     {
       scale: 600,
       hex: "#db2777",
       rgb: "rgb(219,39,119)",
       hsl: "hsl(333.3,71.4%,50.6%)",
+      oklch: "oklch(0.59,0.22,1)",
     },
     {
       scale: 700,
       hex: "#be185d",
       rgb: "rgb(190,24,93)",
       hsl: "hsl(335.1,77.6%,42%)",
+      oklch: "oklch(0.52,0.20,4)",
     },
     {
       scale: 800,
       hex: "#9d174d",
       rgb: "rgb(157,23,77)",
       hsl: "hsl(335.8,74.4%,35.3%)",
+      oklch: "oklch(0.46,0.17,4)",
     },
     {
       scale: 900,
       hex: "#831843",
       rgb: "rgb(131,24,67)",
       hsl: "hsl(335.9,69%,30.4%)",
+      oklch: "oklch(0.41,0.14,2)",
     },
     {
       scale: 950,
       hex: "#500724",
       rgb: "rgb(80,7,36)",
       hsl: "hsl(336.2,83.9%,17.1%)",
+      oklch: "oklch(0.28,0.10,4)",
     },
   ],
   rose: [
@@ -1446,66 +1679,77 @@ export const colors = {
       hex: "#fff1f2",
       rgb: "rgb(255,241,242)",
       hsl: "hsl(355.7,100%,97.3%)",
+      oklch: "oklch(0.97,0.02,12)",
     },
     {
       scale: 100,
       hex: "#ffe4e6",
       rgb: "rgb(255,228,230)",
       hsl: "hsl(355.6,100%,94.7%)",
+      oklch: "oklch(0.94,0.03,13)",
     },
     {
       scale: 200,
       hex: "#fecdd3",
       rgb: "rgb(254,205,211)",
       hsl: "hsl(352.7,96.1%,90%)",
+      oklch: "oklch(0.89,0.06,10)",
     },
     {
       scale: 300,
       hex: "#fda4af",
       rgb: "rgb(253,164,175)",
       hsl: "hsl(352.6,95.7%,81.8%)",
+      oklch: "oklch(0.81,0.11,12)",
     },
     {
       scale: 400,
       hex: "#fb7185",
       rgb: "rgb(251,113,133)",
       hsl: "hsl(351.3,94.5%,71.4%)",
+      oklch: "oklch(0.72,0.17,13)",
     },
     {
       scale: 500,
       hex: "#f43f5e",
       rgb: "rgb(244,63,94)",
       hsl: "hsl(349.7,89.2%,60.2%)",
+      oklch: "oklch(0.65,0.22,16)",
     },
     {
       scale: 600,
       hex: "#e11d48",
       rgb: "rgb(225,29,72)",
       hsl: "hsl(346.8,77.2%,49.8%)",
+      oklch: "oklch(0.59,0.22,18)",
     },
     {
       scale: 700,
       hex: "#be123c",
       rgb: "rgb(190,18,60)",
       hsl: "hsl(345.3,82.7%,40.8%)",
+      oklch: "oklch(0.51,0.20,17)",
     },
     {
       scale: 800,
       hex: "#9f1239",
       rgb: "rgb(159,18,57)",
       hsl: "hsl(343.4,79.7%,34.7%)",
+      oklch: "oklch(0.45,0.17,14)",
     },
     {
       scale: 900,
       hex: "#881337",
       rgb: "rgb(136,19,55)",
       hsl: "hsl(341.5,75.5%,30.4%)",
+      oklch: "oklch(0.41,0.15,10)",
     },
     {
       scale: 950,
       hex: "#4c0519",
       rgb: "rgb(76,5,25)",
       hsl: "hsl(343.1,87.7%,15.9%)",
+      oklch: "oklch(0.27,0.10,12)",
     },
   ],
 }
diff --git a/apps/www/registry/registry-examples.ts b/apps/www/registry/registry-examples.ts
index 4fe1f370f91..d06105cec12 100644
--- a/apps/www/registry/registry-examples.ts
+++ b/apps/www/registry/registry-examples.ts
@@ -1,875 +1,1615 @@
-import { Registry } from "@/registry/schema"
+import { type Registry } from "shadcn/schema"
 
-export const examples: Registry = [
+export const examples: Registry["items"] = [
   {
     name: "accordion-demo",
     type: "registry:example",
     registryDependencies: ["accordion"],
-    files: ["example/accordion-demo.tsx"],
+    files: [
+      {
+        path: "examples/accordion-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "alert-demo",
     type: "registry:example",
     registryDependencies: ["alert"],
-    files: ["example/alert-demo.tsx"],
+    files: [
+      {
+        path: "examples/alert-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "alert-destructive",
     type: "registry:example",
     registryDependencies: ["alert"],
-    files: ["example/alert-destructive.tsx"],
+    files: [
+      {
+        path: "examples/alert-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "alert-dialog-demo",
     type: "registry:example",
     registryDependencies: ["alert-dialog", "button"],
-    files: ["example/alert-dialog-demo.tsx"],
+    files: [
+      {
+        path: "examples/alert-dialog-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "aspect-ratio-demo",
     type: "registry:example",
     registryDependencies: ["aspect-ratio"],
-    files: ["example/aspect-ratio-demo.tsx"],
+    files: [
+      {
+        path: "examples/aspect-ratio-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "avatar-demo",
     type: "registry:example",
     registryDependencies: ["avatar"],
-    files: ["example/avatar-demo.tsx"],
+    files: [
+      {
+        path: "examples/avatar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "badge-demo",
     type: "registry:example",
     registryDependencies: ["badge"],
-    files: ["example/badge-demo.tsx"],
+    files: [
+      {
+        path: "examples/badge-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "badge-destructive",
     type: "registry:example",
     registryDependencies: ["badge"],
-    files: ["example/badge-destructive.tsx"],
+    files: [
+      {
+        path: "examples/badge-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "badge-outline",
     type: "registry:example",
     registryDependencies: ["badge"],
-    files: ["example/badge-outline.tsx"],
+    files: [
+      {
+        path: "examples/badge-outline.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "badge-secondary",
     type: "registry:example",
     registryDependencies: ["badge"],
-    files: ["example/badge-secondary.tsx"],
+    files: [
+      {
+        path: "examples/badge-secondary.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-demo",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-demo.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-separator",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-separator.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-separator.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-dropdown",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-dropdown.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-dropdown.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-ellipsis",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-ellipsis.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-ellipsis.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-link",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-link.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-link.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-responsive",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-responsive.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-responsive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-demo",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-demo.tsx"],
+    files: [
+      {
+        path: "examples/button-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-secondary",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-secondary.tsx"],
+    files: [
+      {
+        path: "examples/button-secondary.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-destructive",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-destructive.tsx"],
+    files: [
+      {
+        path: "examples/button-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-outline",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-outline.tsx"],
+    files: [
+      {
+        path: "examples/button-outline.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-ghost",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-ghost.tsx"],
+    files: [
+      {
+        path: "examples/button-ghost.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-link",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-link.tsx"],
+    files: [
+      {
+        path: "examples/button-link.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-with-icon",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-with-icon.tsx"],
+    files: [
+      {
+        path: "examples/button-with-icon.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-loading",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-loading.tsx"],
+    files: [
+      {
+        path: "examples/button-loading.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-icon",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-icon.tsx"],
+    files: [
+      {
+        path: "examples/button-icon.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-as-child",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-as-child.tsx"],
+    files: [
+      {
+        path: "examples/button-as-child.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "calendar-demo",
     type: "registry:example",
     registryDependencies: ["calendar"],
-    files: ["example/calendar-demo.tsx"],
+    files: [
+      {
+        path: "examples/calendar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "calendar-form",
     type: "registry:example",
     registryDependencies: ["calendar", "form", "popover"],
-    files: ["example/calendar-form.tsx"],
+    files: [
+      {
+        path: "examples/calendar-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "card-demo",
     type: "registry:example",
     registryDependencies: ["card", "button", "switch"],
-    files: ["example/card-demo.tsx"],
+    files: [
+      {
+        path: "examples/card-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "card-with-form",
     type: "registry:example",
     registryDependencies: ["button", "card", "input", "label", "select"],
-    files: ["example/card-with-form.tsx"],
+    files: [
+      {
+        path: "examples/card-with-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-demo",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-demo.tsx"],
+    files: [
+      {
+        path: "examples/carousel-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-size",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-size.tsx"],
+    files: [
+      {
+        path: "examples/carousel-size.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-spacing",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-spacing.tsx"],
+    files: [
+      {
+        path: "examples/carousel-spacing.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-orientation",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-orientation.tsx"],
+    files: [
+      {
+        path: "examples/carousel-orientation.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-api",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-api.tsx"],
+    files: [
+      {
+        path: "examples/carousel-api.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-plugin",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-plugin.tsx"],
+    files: [
+      {
+        path: "examples/carousel-plugin.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "checkbox-demo",
     type: "registry:example",
     registryDependencies: ["checkbox"],
-    files: ["example/checkbox-demo.tsx"],
+    files: [
+      {
+        path: "examples/checkbox-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "checkbox-disabled",
     type: "registry:example",
     registryDependencies: ["checkbox"],
-    files: ["example/checkbox-disabled.tsx"],
+    files: [
+      {
+        path: "examples/checkbox-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "checkbox-form-multiple",
     type: "registry:example",
     registryDependencies: ["checkbox", "form"],
-    files: ["example/checkbox-form-multiple.tsx"],
+    files: [
+      {
+        path: "examples/checkbox-form-multiple.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "checkbox-form-single",
     type: "registry:example",
     registryDependencies: ["checkbox", "form"],
-    files: ["example/checkbox-form-single.tsx"],
+    files: [
+      {
+        path: "examples/checkbox-form-single.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "checkbox-with-text",
     type: "registry:example",
     registryDependencies: ["checkbox"],
-    files: ["example/checkbox-with-text.tsx"],
+    files: [
+      {
+        path: "examples/checkbox-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "collapsible-demo",
     type: "registry:example",
     registryDependencies: ["collapsible"],
-    files: ["example/collapsible-demo.tsx"],
+    files: [
+      {
+        path: "examples/collapsible-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "combobox-demo",
     type: "registry:example",
     registryDependencies: ["command"],
-    files: ["example/combobox-demo.tsx"],
+    files: [
+      {
+        path: "examples/combobox-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "combobox-dropdown-menu",
     type: "registry:example",
     registryDependencies: ["command", "dropdown-menu", "button"],
-    files: ["example/combobox-dropdown-menu.tsx"],
+    files: [
+      {
+        path: "examples/combobox-dropdown-menu.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "combobox-form",
     type: "registry:example",
     registryDependencies: ["command", "form"],
-    files: ["example/combobox-form.tsx"],
+    files: [
+      {
+        path: "examples/combobox-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "combobox-popover",
     type: "registry:example",
     registryDependencies: ["combobox", "popover"],
-    files: ["example/combobox-popover.tsx"],
+    files: [
+      {
+        path: "examples/combobox-popover.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "combobox-responsive",
     type: "registry:example",
     registryDependencies: ["combobox", "popover", "drawer"],
-    files: ["example/combobox-responsive.tsx"],
+    files: [
+      {
+        path: "examples/combobox-responsive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "command-demo",
     type: "registry:example",
     registryDependencies: ["command"],
-    files: ["example/command-demo.tsx"],
+    files: [
+      {
+        path: "examples/command-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "command-dialog",
     type: "registry:example",
     registryDependencies: ["command", "dialog"],
-    files: ["example/command-dialog.tsx"],
+    files: [
+      {
+        path: "examples/command-dialog.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "context-menu-demo",
     type: "registry:example",
     registryDependencies: ["context-menu"],
-    files: ["example/context-menu-demo.tsx"],
+    files: [
+      {
+        path: "examples/context-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "data-table-demo",
     type: "registry:example",
     registryDependencies: ["data-table"],
-    files: ["example/data-table-demo.tsx"],
+    files: [
+      {
+        path: "examples/data-table-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "date-picker-demo",
     type: "registry:example",
     registryDependencies: ["button", "calendar", "popover"],
-    files: ["example/date-picker-demo.tsx"],
+    files: [
+      {
+        path: "examples/date-picker-demo.tsx",
+        type: "registry:example",
+      },
+    ],
     dependencies: ["date-fns"],
   },
   {
     name: "date-picker-form",
     type: "registry:example",
     registryDependencies: ["button", "calendar", "form", "popover"],
-    files: ["example/date-picker-form.tsx"],
+    files: [
+      {
+        path: "examples/date-picker-form.tsx",
+        type: "registry:example",
+      },
+    ],
     dependencies: ["date-fns"],
   },
   {
     name: "date-picker-with-presets",
     type: "registry:example",
     registryDependencies: ["button", "calendar", "popover", "select"],
-    files: ["example/date-picker-with-presets.tsx"],
+    files: [
+      {
+        path: "examples/date-picker-with-presets.tsx",
+        type: "registry:example",
+      },
+    ],
     dependencies: ["date-fns"],
   },
   {
     name: "date-picker-with-range",
     type: "registry:example",
     registryDependencies: ["button", "calendar", "popover"],
-    files: ["example/date-picker-with-range.tsx"],
+    files: [
+      {
+        path: "examples/date-picker-with-range.tsx",
+        type: "registry:example",
+      },
+    ],
     dependencies: ["date-fns"],
   },
   {
     name: "dialog-demo",
     type: "registry:example",
     registryDependencies: ["dialog"],
-    files: ["example/dialog-demo.tsx"],
+    files: [
+      {
+        path: "examples/dialog-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "dialog-close-button",
     type: "registry:example",
     registryDependencies: ["dialog", "button"],
-    files: ["example/dialog-close-button.tsx"],
+    files: [
+      {
+        path: "examples/dialog-close-button.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "drawer-demo",
     type: "registry:example",
     registryDependencies: ["drawer"],
-    files: ["example/drawer-demo.tsx"],
+    files: [
+      {
+        path: "examples/drawer-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "drawer-dialog",
     type: "registry:example",
     registryDependencies: ["drawer", "dialog"],
-    files: ["example/drawer-dialog.tsx"],
+    files: [
+      {
+        path: "examples/drawer-dialog.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "dropdown-menu-demo",
     type: "registry:example",
     registryDependencies: ["dropdown-menu"],
-    files: ["example/dropdown-menu-demo.tsx"],
+    files: [
+      {
+        path: "examples/dropdown-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "dropdown-menu-checkboxes",
     type: "registry:example",
     registryDependencies: ["dropdown-menu", "checkbox"],
-    files: ["example/dropdown-menu-checkboxes.tsx"],
+    files: [
+      {
+        path: "examples/dropdown-menu-checkboxes.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "dropdown-menu-radio-group",
     type: "registry:example",
     registryDependencies: ["dropdown-menu", "radio-group"],
-    files: ["example/dropdown-menu-radio-group.tsx"],
+    files: [
+      {
+        path: "examples/dropdown-menu-radio-group.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "hover-card-demo",
     type: "registry:example",
     registryDependencies: ["hover-card"],
-    files: ["example/hover-card-demo.tsx"],
+    files: [
+      {
+        path: "examples/hover-card-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-demo",
     type: "registry:example",
     registryDependencies: ["input"],
-    files: ["example/input-demo.tsx"],
+    files: [
+      {
+        path: "examples/input-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-disabled",
     type: "registry:example",
     registryDependencies: ["input"],
-    files: ["example/input-disabled.tsx"],
+    files: [
+      {
+        path: "examples/input-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-file",
     type: "registry:example",
     registryDependencies: ["input"],
-    files: ["example/input-file.tsx"],
+    files: [
+      {
+        path: "examples/input-file.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-form",
     type: "registry:example",
     registryDependencies: ["input", "button", "form"],
-    files: ["example/input-form.tsx"],
+    files: [
+      {
+        path: "examples/input-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-with-button",
     type: "registry:example",
     registryDependencies: ["input", "button"],
-    files: ["example/input-with-button.tsx"],
+    files: [
+      {
+        path: "examples/input-with-button.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-with-label",
     type: "registry:example",
     registryDependencies: ["input", "button", "label"],
-    files: ["example/input-with-label.tsx"],
+    files: [
+      {
+        path: "examples/input-with-label.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-with-text",
     type: "registry:example",
     registryDependencies: ["input", "button", "label"],
-    files: ["example/input-with-text.tsx"],
+    files: [
+      {
+        path: "examples/input-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-otp-demo",
     type: "registry:example",
     registryDependencies: ["input-otp"],
-    files: ["example/input-otp-demo.tsx"],
+    files: [
+      {
+        path: "examples/input-otp-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-otp-pattern",
     type: "registry:example",
     registryDependencies: ["input-otp"],
-    files: ["example/input-otp-pattern.tsx"],
+    files: [
+      {
+        path: "examples/input-otp-pattern.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-otp-separator",
     type: "registry:example",
     registryDependencies: ["input-otp"],
-    files: ["example/input-otp-separator.tsx"],
+    files: [
+      {
+        path: "examples/input-otp-separator.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-otp-controlled",
     type: "registry:example",
     registryDependencies: ["input-otp"],
-    files: ["example/input-otp-controlled.tsx"],
+    files: [
+      {
+        path: "examples/input-otp-controlled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-otp-form",
     type: "registry:example",
     registryDependencies: ["input-otp", "form"],
-    files: ["example/input-otp-form.tsx"],
+    files: [
+      {
+        path: "examples/input-otp-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "label-demo",
     type: "registry:example",
     registryDependencies: ["label"],
-    files: ["example/label-demo.tsx"],
+    files: [
+      {
+        path: "examples/label-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "menubar-demo",
     type: "registry:example",
     registryDependencies: ["menubar"],
-    files: ["example/menubar-demo.tsx"],
+    files: [
+      {
+        path: "examples/menubar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "navigation-menu-demo",
     type: "registry:example",
     registryDependencies: ["navigation-menu"],
-    files: ["example/navigation-menu-demo.tsx"],
+    files: [
+      {
+        path: "examples/navigation-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "pagination-demo",
     type: "registry:example",
     registryDependencies: ["pagination"],
-    files: ["example/pagination-demo.tsx"],
+    files: [
+      {
+        path: "examples/pagination-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "popover-demo",
     type: "registry:example",
     registryDependencies: ["popover"],
-    files: ["example/popover-demo.tsx"],
+    files: [
+      {
+        path: "examples/popover-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "progress-demo",
     type: "registry:example",
     registryDependencies: ["progress"],
-    files: ["example/progress-demo.tsx"],
+    files: [
+      {
+        path: "examples/progress-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "radio-group-demo",
     type: "registry:example",
     registryDependencies: ["radio-group"],
-    files: ["example/radio-group-demo.tsx"],
+    files: [
+      {
+        path: "examples/radio-group-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "radio-group-form",
     type: "registry:example",
     registryDependencies: ["radio-group", "form"],
-    files: ["example/radio-group-form.tsx"],
+    files: [
+      {
+        path: "examples/radio-group-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "resizable-demo",
     type: "registry:example",
     registryDependencies: ["resizable"],
-    files: ["example/resizable-demo.tsx"],
+    files: [
+      {
+        path: "examples/resizable-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "resizable-demo-with-handle",
     type: "registry:example",
     registryDependencies: ["resizable"],
-    files: ["example/resizable-demo-with-handle.tsx"],
+    files: [
+      {
+        path: "examples/resizable-demo-with-handle.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "resizable-vertical",
     type: "registry:example",
     registryDependencies: ["resizable"],
-    files: ["example/resizable-vertical.tsx"],
+    files: [
+      {
+        path: "examples/resizable-vertical.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "resizable-handle",
     type: "registry:example",
     registryDependencies: ["resizable"],
-    files: ["example/resizable-handle.tsx"],
+    files: [
+      {
+        path: "examples/resizable-handle.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "scroll-area-demo",
     type: "registry:example",
     registryDependencies: ["scroll-area"],
-    files: ["example/scroll-area-demo.tsx"],
+    files: [
+      {
+        path: "examples/scroll-area-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "scroll-area-horizontal-demo",
     type: "registry:example",
     registryDependencies: ["scroll-area"],
-    files: ["example/scroll-area-horizontal-demo.tsx"],
+    files: [
+      {
+        path: "examples/scroll-area-horizontal-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "select-demo",
     type: "registry:example",
     registryDependencies: ["select"],
-    files: ["example/select-demo.tsx"],
+    files: [
+      {
+        path: "examples/select-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "select-scrollable",
     type: "registry:example",
     registryDependencies: ["select"],
-    files: ["example/select-scrollable.tsx"],
+    files: [
+      {
+        path: "examples/select-scrollable.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "select-form",
     type: "registry:example",
     registryDependencies: ["select"],
-    files: ["example/select-form.tsx"],
+    files: [
+      {
+        path: "examples/select-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "separator-demo",
     type: "registry:example",
     registryDependencies: ["separator"],
-    files: ["example/separator-demo.tsx"],
+    files: [
+      {
+        path: "examples/separator-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "sheet-demo",
     type: "registry:example",
     registryDependencies: ["sheet"],
-    files: ["example/sheet-demo.tsx"],
+    files: [
+      {
+        path: "examples/sheet-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "sheet-side",
     type: "registry:example",
     registryDependencies: ["sheet"],
-    files: ["example/sheet-side.tsx"],
+    files: [
+      {
+        path: "examples/sheet-side.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "skeleton-demo",
     type: "registry:example",
     registryDependencies: ["skeleton"],
-    files: ["example/skeleton-demo.tsx"],
+    files: [
+      {
+        path: "examples/skeleton-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "skeleton-card",
     type: "registry:example",
     registryDependencies: ["skeleton"],
-    files: ["example/skeleton-card.tsx"],
+    files: [
+      {
+        path: "examples/skeleton-card.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "slider-demo",
     type: "registry:example",
     registryDependencies: ["slider"],
-    files: ["example/slider-demo.tsx"],
+    files: [
+      {
+        path: "examples/slider-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "sonner-demo",
     type: "registry:example",
     registryDependencies: ["sonner"],
-    files: ["example/sonner-demo.tsx"],
+    files: [
+      {
+        path: "examples/sonner-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "switch-demo",
     type: "registry:example",
     registryDependencies: ["switch"],
-    files: ["example/switch-demo.tsx"],
+    files: [
+      {
+        path: "examples/switch-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "switch-form",
     type: "registry:example",
     registryDependencies: ["switch", "form"],
-    files: ["example/switch-form.tsx"],
+    files: [
+      {
+        path: "examples/switch-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "table-demo",
     type: "registry:example",
     registryDependencies: ["table"],
-    files: ["example/table-demo.tsx"],
+    files: [
+      {
+        path: "examples/table-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "tabs-demo",
     type: "registry:example",
     registryDependencies: ["tabs"],
-    files: ["example/tabs-demo.tsx"],
+    files: [
+      {
+        path: "examples/tabs-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-demo",
     type: "registry:example",
     registryDependencies: ["textarea"],
-    files: ["example/textarea-demo.tsx"],
+    files: [
+      {
+        path: "examples/textarea-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-disabled",
     type: "registry:example",
     registryDependencies: ["textarea"],
-    files: ["example/textarea-disabled.tsx"],
+    files: [
+      {
+        path: "examples/textarea-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-form",
     type: "registry:example",
     registryDependencies: ["textarea", "form"],
-    files: ["example/textarea-form.tsx"],
+    files: [
+      {
+        path: "examples/textarea-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-with-button",
     type: "registry:example",
     registryDependencies: ["textarea", "button"],
-    files: ["example/textarea-with-button.tsx"],
+    files: [
+      {
+        path: "examples/textarea-with-button.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-with-label",
     type: "registry:example",
     registryDependencies: ["textarea", "label"],
-    files: ["example/textarea-with-label.tsx"],
+    files: [
+      {
+        path: "examples/textarea-with-label.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-with-text",
     type: "registry:example",
     registryDependencies: ["textarea", "label"],
-    files: ["example/textarea-with-text.tsx"],
+    files: [
+      {
+        path: "examples/textarea-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toast-demo",
     type: "registry:example",
     registryDependencies: ["toast"],
-    files: ["example/toast-demo.tsx"],
+    files: [
+      {
+        path: "examples/toast-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toast-destructive",
     type: "registry:example",
     registryDependencies: ["toast"],
-    files: ["example/toast-destructive.tsx"],
+    files: [
+      {
+        path: "examples/toast-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toast-simple",
     type: "registry:example",
     registryDependencies: ["toast"],
-    files: ["example/toast-simple.tsx"],
+    files: [
+      {
+        path: "examples/toast-simple.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toast-with-action",
     type: "registry:example",
     registryDependencies: ["toast"],
-    files: ["example/toast-with-action.tsx"],
+    files: [
+      {
+        path: "examples/toast-with-action.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toast-with-title",
     type: "registry:example",
     registryDependencies: ["toast"],
-    files: ["example/toast-with-title.tsx"],
+    files: [
+      {
+        path: "examples/toast-with-title.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-demo",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-demo.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-disabled",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-disabled.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-lg",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-lg.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-lg.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-outline",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-outline.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-outline.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-sm",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-sm.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-sm.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-single",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-single.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-single.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-demo",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-demo.tsx"],
+    files: [
+      {
+        path: "examples/toggle-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-disabled",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-disabled.tsx"],
+    files: [
+      {
+        path: "examples/toggle-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-lg",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-lg.tsx"],
+    files: [
+      {
+        path: "examples/toggle-lg.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-outline",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-outline.tsx"],
+    files: [
+      {
+        path: "examples/toggle-outline.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-sm",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-sm.tsx"],
+    files: [
+      {
+        path: "examples/toggle-sm.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-with-text",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-with-text.tsx"],
+    files: [
+      {
+        path: "examples/toggle-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "tooltip-demo",
     type: "registry:example",
     registryDependencies: ["tooltip"],
-    files: ["example/tooltip-demo.tsx"],
+    files: [
+      {
+        path: "examples/tooltip-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-blockquote",
     type: "registry:example",
-    files: ["example/typography-blockquote.tsx"],
+    files: [
+      {
+        path: "examples/typography-blockquote.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-demo",
     type: "registry:example",
-    files: ["example/typography-demo.tsx"],
+    files: [
+      {
+        path: "examples/typography-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-h1",
     type: "registry:example",
-    files: ["example/typography-h1.tsx"],
+    files: [
+      {
+        path: "examples/typography-h1.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-h2",
     type: "registry:example",
-    files: ["example/typography-h2.tsx"],
+    files: [
+      {
+        path: "examples/typography-h2.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-h3",
     type: "registry:example",
-    files: ["example/typography-h3.tsx"],
+    files: [
+      {
+        path: "examples/typography-h3.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-h4",
     type: "registry:example",
-    files: ["example/typography-h4.tsx"],
+    files: [
+      {
+        path: "examples/typography-h4.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-inline-code",
     type: "registry:example",
-    files: ["example/typography-inline-code.tsx"],
+    files: [
+      {
+        path: "examples/typography-inline-code.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-large",
     type: "registry:example",
-    files: ["example/typography-large.tsx"],
+    files: [
+      {
+        path: "examples/typography-large.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-lead",
     type: "registry:example",
-    files: ["example/typography-lead.tsx"],
+    files: [
+      {
+        path: "examples/typography-lead.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-list",
     type: "registry:example",
-    files: ["example/typography-list.tsx"],
+    files: [
+      {
+        path: "examples/typography-list.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-muted",
     type: "registry:example",
-    files: ["example/typography-muted.tsx"],
+    files: [
+      {
+        path: "examples/typography-muted.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-p",
     type: "registry:example",
-    files: ["example/typography-p.tsx"],
+    files: [
+      {
+        path: "examples/typography-p.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-small",
     type: "registry:example",
-    files: ["example/typography-small.tsx"],
+    files: [
+      {
+        path: "examples/typography-small.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-table",
     type: "registry:example",
-    files: ["example/typography-table.tsx"],
+    files: [
+      {
+        path: "examples/typography-table.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "mode-toggle",
     type: "registry:example",
-    files: ["example/mode-toggle.tsx"],
+    files: [
+      {
+        path: "examples/mode-toggle.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "chart-bar-demo",
     type: "registry:example",
-    files: ["example/chart-bar-demo.tsx"],
+    files: [
+      {
+        path: "examples/chart-bar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "chart-bar-demo-grid",
     type: "registry:example",
-    files: ["example/chart-bar-demo-grid.tsx"],
+    files: [
+      {
+        path: "examples/chart-bar-demo-grid.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "chart-bar-demo-axis",
     type: "registry:example",
-    files: ["example/chart-bar-demo-axis.tsx"],
+    files: [
+      {
+        path: "examples/chart-bar-demo-axis.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "chart-bar-demo-tooltip",
     type: "registry:example",
-    files: ["example/chart-bar-demo-tooltip.tsx"],
+    files: [
+      {
+        path: "examples/chart-bar-demo-tooltip.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "chart-bar-demo-legend",
     type: "registry:example",
-    files: ["example/chart-bar-demo-legend.tsx"],
+    files: [
+      {
+        path: "examples/chart-bar-demo-legend.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "chart-tooltip-demo",
     type: "registry:example",
-    files: ["example/chart-tooltip-demo.tsx"],
+    files: [
+      {
+        path: "examples/chart-tooltip-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
 ]
diff --git a/apps/www/registry/registry-hooks.ts b/apps/www/registry/registry-hooks.ts
index 04a0b0a92a6..117620e51fd 100644
--- a/apps/www/registry/registry-hooks.ts
+++ b/apps/www/registry/registry-hooks.ts
@@ -1,6 +1,6 @@
-import { Registry } from "@/registry/schema"
+import { type Registry } from "shadcn/schema"
 
-export const hooks: Registry = [
+export const hooks: Registry["items"] = [
   {
     name: "use-mobile",
     type: "registry:hook",
diff --git a/apps/www/registry/registry-icons.ts b/apps/www/registry/registry-icons.ts
new file mode 100644
index 00000000000..d70d235d09d
--- /dev/null
+++ b/apps/www/registry/registry-icons.ts
@@ -0,0 +1,166 @@
+export const iconLibraries = {
+  lucide: {
+    name: "lucide-react",
+    package: "lucide-react",
+    import: "lucide-react",
+  },
+  radix: {
+    name: "@radix-ui/react-icons",
+    package: "@radix-ui/react-icons",
+    import: "@radix-ui/react-icons",
+  },
+} as const
+
+export const icons: Record<
+  string,
+  Record<keyof typeof iconLibraries, string>
+> = {
+  AlertCircle: {
+    lucide: "AlertCircle",
+    radix: "ExclamationTriangleIcon",
+  },
+  ArrowLeft: {
+    lucide: "ArrowLeft",
+    radix: "ArrowLeftIcon",
+  },
+  ArrowRight: {
+    lucide: "ArrowRight",
+    radix: "ArrowRightIcon",
+  },
+  ArrowUpDown: {
+    lucide: "ArrowUpDown",
+    radix: "CaretSortIcon",
+  },
+  BellRing: {
+    lucide: "BellRing",
+    radix: "BellIcon",
+  },
+  Bold: {
+    lucide: "Bold",
+    radix: "FontBoldIcon",
+  },
+  Calculator: {
+    lucide: "Calculator",
+    radix: "ComponentPlaceholderIcon",
+  },
+  Calendar: {
+    lucide: "Calendar",
+    radix: "CalendarIcon",
+  },
+  Check: {
+    lucide: "Check",
+    radix: "CheckIcon",
+  },
+  ChevronDown: {
+    lucide: "ChevronDown",
+    radix: "ChevronDownIcon",
+  },
+  ChevronLeft: {
+    lucide: "ChevronLeft",
+    radix: "ChevronLeftIcon",
+  },
+  ChevronRight: {
+    lucide: "ChevronRight",
+    radix: "ChevronRightIcon",
+  },
+  ChevronUp: {
+    lucide: "ChevronUp",
+    radix: "ChevronUpIcon",
+  },
+  ChevronsUpDown: {
+    lucide: "ChevronsUpDown",
+    radix: "CaretSortIcon",
+  },
+  Circle: {
+    lucide: "Circle",
+    radix: "DotFilledIcon",
+  },
+  Copy: {
+    lucide: "Copy",
+    radix: "CopyIcon",
+  },
+  CreditCard: {
+    lucide: "CreditCard",
+    radix: "ComponentPlaceholderIcon",
+  },
+  GripVertical: {
+    lucide: "GripVertical",
+    radix: "DragHandleDots2Icon",
+  },
+  Italic: {
+    lucide: "Italic",
+    radix: "FontItalicIcon",
+  },
+  Loader2: {
+    lucide: "Loader2",
+    radix: "ReloadIcon",
+  },
+  Mail: {
+    lucide: "Mail",
+    radix: "EnvelopeClosedIcon",
+  },
+  MailOpen: {
+    lucide: "MailOpen",
+    radix: "EnvelopeOpenIcon",
+  },
+  Minus: {
+    lucide: "Minus",
+    radix: "MinusIcon",
+  },
+  Moon: {
+    lucide: "Moon",
+    radix: "MoonIcon",
+  },
+  MoreHorizontal: {
+    lucide: "MoreHorizontal",
+    radix: "DotsHorizontalIcon",
+  },
+  PanelLeft: {
+    lucide: "PanelLeft",
+    radix: "ViewVerticalIcon",
+  },
+  Plus: {
+    lucide: "Plus",
+    radix: "PlusIcon",
+  },
+  Search: {
+    lucide: "Search",
+    radix: "MagnifyingGlassIcon",
+  },
+  Send: {
+    lucide: "Send",
+    radix: "PaperPlaneIcon",
+  },
+  Settings: {
+    lucide: "Settings",
+    radix: "GearIcon",
+  },
+  Slash: {
+    lucide: "Slash",
+    radix: "SlashIcon",
+  },
+  Smile: {
+    lucide: "Smile",
+    radix: "FaceIcon",
+  },
+  Sun: {
+    lucide: "Sun",
+    radix: "SunIcon",
+  },
+  Terminal: {
+    lucide: "Terminal",
+    radix: "RocketIcon",
+  },
+  Underline: {
+    lucide: "Underline",
+    radix: "UnderlineIcon",
+  },
+  User: {
+    lucide: "User",
+    radix: "PersonIcon",
+  },
+  X: {
+    lucide: "X",
+    radix: "Cross2Icon",
+  },
+} as const
diff --git a/apps/www/registry/registry-internal.ts b/apps/www/registry/registry-internal.ts
new file mode 100644
index 00000000000..f3ff82b9383
--- /dev/null
+++ b/apps/www/registry/registry-internal.ts
@@ -0,0 +1,701 @@
+import { type Registry } from "shadcn/schema"
+
+export const internal: Registry["items"] = [
+  {
+    name: "sink",
+    type: "registry:internal",
+    registryDependencies: [
+      // registry:ui
+      "accordion",
+      "alert",
+      "alert-dialog",
+      "aspect-ratio",
+      "avatar",
+      "badge",
+      "breadcrumb",
+      "button",
+      "calendar",
+      "card",
+      "carousel",
+      "chart",
+      "checkbox",
+      "collapsible",
+      "command",
+      "context-menu",
+      "dialog",
+      "drawer",
+      "dropdown-menu",
+      // "form",
+      "hover-card",
+      "input",
+      "input-otp",
+      "label",
+      "menubar",
+      "navigation-menu",
+      "pagination",
+      "popover",
+      "progress",
+      "radio-group",
+      "resizable",
+      "scroll-area",
+      "select",
+      "separator",
+      "sheet",
+      "sidebar",
+      "skeleton",
+      "slider",
+      "sonner",
+      "switch",
+      "table",
+      "tabs",
+      "textarea",
+      "toast",
+      "toggle",
+      "toggle-group",
+      "tooltip",
+    ],
+    files: [
+      {
+        path: "internal/sink/page.tsx",
+        type: "registry:page",
+        target: "app/sink/page.tsx",
+      },
+      {
+        path: "internal/sink/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/component-wrapper.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/nav-main.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/nav-projects.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/nav-user.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/team-switcher.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/accordion-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/alert-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/alert-dialog-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/aspect-ratio-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/avatar-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/badge-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/breadcrumb-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/button-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/calendar-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/card-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/carousel-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/checkbox-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/collapsible-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/combobox-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/command-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/context-menu-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/date-picker-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/dialog-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/drawer-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/dropdown-menu-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/hover-card-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/input-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/input-otp-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/label-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/menubar-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/navigation-menu-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/pagination-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/popover-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/progress-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/radio-group-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/resizable-handle.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/scroll-area-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/select-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/separator-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/sheet-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/skeleton-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/slider-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/sonner-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/switch-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/table-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/tabs-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/textarea-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/toast-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/toggle-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/toggle-group-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/tooltip-demo.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/badge-destructive.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/badge-outline.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/badge-secondary.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/button-destructive.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/button-ghost.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/button-link.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/button-loading.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/button-outline.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/button-secondary.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/button-with-icon.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/toggle-disabled.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/toggle-outline.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "internal/sink/components/toggle-with-text.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-demo",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-demo.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-header",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-header.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-footer",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-footer.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-group",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-group.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-group-collapsible",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-group-collapsible.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-group-action",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-group-action.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-menu",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-menu.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-menu-action",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-menu-action.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-menu-sub",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-menu-sub.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-menu-collapsible",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-menu-collapsible.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-menu-badge",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-menu-badge.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-rsc",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-rsc.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "sidebar-controlled",
+    type: "registry:internal",
+    files: [
+      {
+        path: "internal/sidebar-controlled.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-01",
+    type: "registry:internal",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "label",
+      "dropdown-menu",
+    ],
+    files: [
+      {
+        path: "internal/sidebar-01.tsx",
+        type: "registry:component",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-02",
+    type: "registry:internal",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "label",
+      "dropdown-menu",
+    ],
+    files: [
+      {
+        path: "internal/sidebar-02.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-03",
+    type: "registry:internal",
+    registryDependencies: ["sidebar", "breadcrumb"],
+    files: [
+      {
+        path: "internal/sidebar-03.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-04",
+    type: "registry:internal",
+    registryDependencies: ["sidebar", "breadcrumb", "separator"],
+    files: [
+      {
+        path: "internal/sidebar-04.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-05",
+    type: "registry:internal",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "label",
+      "collapsible",
+    ],
+    files: [
+      {
+        path: "internal/sidebar-05.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-06",
+    type: "registry:internal",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "card",
+      "dropdown-menu",
+    ],
+    files: [
+      {
+        path: "internal/sidebar-06.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-07",
+    type: "registry:internal",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "dropdown-menu",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "internal/sidebar-07.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-08",
+    type: "registry:internal",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "dropdown-menu",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "internal/sidebar-08.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-09",
+    type: "registry:internal",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "dropdown-menu",
+      "avatar",
+      "switch",
+    ],
+    files: [
+      {
+        path: "internal/sidebar-09.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-10",
+    type: "registry:internal",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "popover",
+      "collapsible",
+      "dropdown-menu",
+    ],
+    files: [
+      {
+        path: "internal/sidebar-10.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-11",
+    type: "registry:internal",
+    registryDependencies: ["sidebar", "breadcrumb", "separator", "collapsible"],
+    files: [
+      {
+        path: "internal/sidebar-11.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-12",
+    type: "registry:internal",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "collapsible",
+      "calendar",
+      "dropdown-menu",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "internal/sidebar-12.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-13",
+    type: "registry:internal",
+    registryDependencies: ["sidebar", "breadcrumb", "button", "dialog"],
+    files: [
+      {
+        path: "internal/sidebar-13.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-14",
+    type: "registry:internal",
+    registryDependencies: ["sidebar", "breadcrumb"],
+    files: [
+      {
+        path: "internal/sidebar-14.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-sidebar-15",
+    type: "registry:internal",
+    registryDependencies: [
+      "sidebar",
+      "breadcrumb",
+      "separator",
+      "popover",
+      "collapsible",
+      "dropdown-menu",
+      "calendar",
+      "avatar",
+    ],
+    files: [
+      {
+        path: "internal/sidebar-15.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+  {
+    name: "v0-login-01",
+    type: "registry:internal",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "internal/login-01.tsx",
+        type: "registry:internal",
+      },
+    ],
+  },
+]
diff --git a/apps/www/registry/registry-lib.ts b/apps/www/registry/registry-lib.ts
index 85c5b55a714..fd94cdea665 100644
--- a/apps/www/registry/registry-lib.ts
+++ b/apps/www/registry/registry-lib.ts
@@ -1,6 +1,6 @@
-import { Registry } from "@/registry/schema"
+import { type Registry } from "shadcn/schema"
 
-export const lib: Registry = [
+export const lib: Registry["items"] = [
   {
     name: "utils",
     type: "registry:lib",
diff --git a/apps/www/registry/registry-themes.ts b/apps/www/registry/registry-themes.ts
index 7247ac67367..afe51ddbbfc 100644
--- a/apps/www/registry/registry-themes.ts
+++ b/apps/www/registry/registry-themes.ts
@@ -1,6 +1,6 @@
-import { Registry } from "./schema"
+import { type Registry } from "shadcn/schema"
 
-export const themes: Registry = [
+export const themes: Registry["items"] = [
   {
     name: "theme-daylight",
     type: "registry:theme",
diff --git a/apps/www/registry/registry-ui.ts b/apps/www/registry/registry-ui.ts
index a94fc97d079..63e3f19551f 100644
--- a/apps/www/registry/registry-ui.ts
+++ b/apps/www/registry/registry-ui.ts
@@ -1,11 +1,16 @@
-import { Registry } from "@/registry/schema"
+import { type Registry } from "shadcn/schema"
 
-export const ui: Registry = [
+export const ui: Registry["items"] = [
   {
     name: "accordion",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-accordion"],
-    files: ["ui/accordion.tsx"],
+    files: [
+      {
+        path: "ui/accordion.tsx",
+        type: "registry:ui",
+      },
+    ],
     tailwind: {
       config: {
         theme: {
@@ -32,112 +37,203 @@ export const ui: Registry = [
   {
     name: "alert",
     type: "registry:ui",
-    files: ["ui/alert.tsx"],
+    files: [
+      {
+        path: "ui/alert.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "alert-dialog",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-alert-dialog"],
     registryDependencies: ["button"],
-    files: ["ui/alert-dialog.tsx"],
+    files: [
+      {
+        path: "ui/alert-dialog.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "aspect-ratio",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-aspect-ratio"],
-    files: ["ui/aspect-ratio.tsx"],
+    files: [
+      {
+        path: "ui/aspect-ratio.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "avatar",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-avatar"],
-    files: ["ui/avatar.tsx"],
+    files: [
+      {
+        path: "ui/avatar.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "badge",
     type: "registry:ui",
-    files: ["ui/badge.tsx"],
+    dependencies: ["@radix-ui/react-slot"],
+    files: [
+      {
+        path: "ui/badge.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "breadcrumb",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-slot"],
-    files: ["ui/breadcrumb.tsx"],
+    files: [
+      {
+        path: "ui/breadcrumb.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "button",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-slot"],
-    files: ["ui/button.tsx"],
+    files: [
+      {
+        path: "ui/button.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "calendar",
     type: "registry:ui",
-    dependencies: ["react-day-picker@8.10.1", "date-fns"],
+    dependencies: ["react-day-picker@latest", "date-fns"],
     registryDependencies: ["button"],
-    files: ["ui/calendar.tsx"],
+    files: [
+      {
+        path: "ui/calendar.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "card",
     type: "registry:ui",
-    files: ["ui/card.tsx"],
+    files: [
+      {
+        path: "ui/card.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "carousel",
     type: "registry:ui",
-    files: ["ui/carousel.tsx"],
+    files: [
+      {
+        path: "ui/carousel.tsx",
+        type: "registry:ui",
+      },
+    ],
     registryDependencies: ["button"],
     dependencies: ["embla-carousel-react"],
   },
   {
     name: "chart",
     type: "registry:ui",
-    files: ["ui/chart.tsx"],
+    files: [
+      {
+        path: "ui/chart.tsx",
+        type: "registry:ui",
+      },
+    ],
     registryDependencies: ["card"],
-    dependencies: ["recharts", "lucide-react"],
+    dependencies: ["recharts@2.15.4", "lucide-react"],
   },
   {
     name: "checkbox",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-checkbox"],
-    files: ["ui/checkbox.tsx"],
+    files: [
+      {
+        path: "ui/checkbox.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "collapsible",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-collapsible"],
-    files: ["ui/collapsible.tsx"],
+    files: [
+      {
+        path: "ui/collapsible.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "command",
     type: "registry:ui",
-    dependencies: ["cmdk@1.0.0"],
+    dependencies: ["cmdk"],
     registryDependencies: ["dialog"],
-    files: ["ui/command.tsx"],
+    files: [
+      {
+        path: "ui/command.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "context-menu",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-context-menu"],
-    files: ["ui/context-menu.tsx"],
+    files: [
+      {
+        path: "ui/context-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "dialog",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-dialog"],
-    files: ["ui/dialog.tsx"],
+    files: [
+      {
+        path: "ui/dialog.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "drawer",
     type: "registry:ui",
     dependencies: ["vaul", "@radix-ui/react-dialog"],
-    files: ["ui/drawer.tsx"],
+    files: [
+      {
+        path: "ui/drawer.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "dropdown-menu",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-dropdown-menu"],
-    files: ["ui/dropdown-menu.tsx"],
+    files: [
+      {
+        path: "ui/dropdown-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "form",
@@ -150,135 +246,316 @@ export const ui: Registry = [
       "react-hook-form",
     ],
     registryDependencies: ["button", "label"],
-    files: ["ui/form.tsx"],
+    files: [
+      {
+        path: "ui/form.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "hover-card",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-hover-card"],
-    files: ["ui/hover-card.tsx"],
+    files: [
+      {
+        path: "ui/hover-card.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "input",
     type: "registry:ui",
-    files: ["ui/input.tsx"],
+    files: [
+      {
+        path: "ui/input.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "input-otp",
     type: "registry:ui",
     dependencies: ["input-otp"],
-    files: ["ui/input-otp.tsx"],
+    files: [
+      {
+        path: "ui/input-otp.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "label",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-label"],
-    files: ["ui/label.tsx"],
+    files: [
+      {
+        path: "ui/label.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "menubar",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-menubar"],
-    files: ["ui/menubar.tsx"],
+    files: [
+      {
+        path: "ui/menubar.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "navigation-menu",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-navigation-menu"],
-    files: ["ui/navigation-menu.tsx"],
+    files: [
+      {
+        path: "ui/navigation-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "pagination",
     type: "registry:ui",
     registryDependencies: ["button"],
-    files: ["ui/pagination.tsx"],
+    files: [
+      {
+        path: "ui/pagination.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "popover",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-popover"],
-    files: ["ui/popover.tsx"],
+    files: [
+      {
+        path: "ui/popover.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "progress",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-progress"],
-    files: ["ui/progress.tsx"],
+    files: [
+      {
+        path: "ui/progress.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "radio-group",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-radio-group"],
-    files: ["ui/radio-group.tsx"],
+    files: [
+      {
+        path: "ui/radio-group.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "resizable",
     type: "registry:ui",
     dependencies: ["react-resizable-panels"],
-    files: ["ui/resizable.tsx"],
+    files: [
+      {
+        path: "ui/resizable.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "scroll-area",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-scroll-area"],
-    files: ["ui/scroll-area.tsx"],
+    files: [
+      {
+        path: "ui/scroll-area.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "select",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-select"],
-    files: ["ui/select.tsx"],
+    files: [
+      {
+        path: "ui/select.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "separator",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-separator"],
-    files: ["ui/separator.tsx"],
+    files: [
+      {
+        path: "ui/separator.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "sheet",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-dialog"],
-    files: ["ui/sheet.tsx"],
+    files: [
+      {
+        path: "ui/sheet.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "sidebar",
+    type: "registry:ui",
+    dependencies: [
+      "@radix-ui/react-slot",
+      "class-variance-authority",
+      "lucide-react",
+    ],
+    registryDependencies: [
+      "button",
+      "separator",
+      "sheet",
+      "tooltip",
+      "input",
+      "use-mobile",
+      "skeleton",
+    ],
+    files: [
+      {
+        path: "ui/sidebar.tsx",
+        type: "registry:ui",
+      },
+    ],
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            colors: {
+              sidebar: {
+                DEFAULT: "hsl(var(--sidebar-background))",
+                foreground: "hsl(var(--sidebar-foreground))",
+                primary: "hsl(var(--sidebar-primary))",
+                "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                accent: "hsl(var(--sidebar-accent))",
+                "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                border: "hsl(var(--sidebar-border))",
+                ring: "hsl(var(--sidebar-ring))",
+              },
+            },
+          },
+        },
+      },
+    },
+    cssVars: {
+      light: {
+        "sidebar-background": "0 0% 98%",
+        "sidebar-foreground": "240 5.3% 26.1%",
+        "sidebar-primary": "240 5.9% 10%",
+        "sidebar-primary-foreground": "0 0% 98%",
+        "sidebar-accent": "240 4.8% 95.9%",
+        "sidebar-accent-foreground": "240 5.9% 10%",
+        "sidebar-border": "220 13% 91%",
+        "sidebar-ring": "217.2 91.2% 59.8%",
+      },
+      dark: {
+        "sidebar-background": "240 5.9% 10%",
+        "sidebar-foreground": "240 4.8% 95.9%",
+        "sidebar-primary": "224.3 76.3% 48%",
+        "sidebar-primary-foreground": "0 0% 100%",
+        "sidebar-accent": "240 3.7% 15.9%",
+        "sidebar-accent-foreground": "240 4.8% 95.9%",
+        "sidebar-border": "240 3.7% 15.9%",
+        "sidebar-ring": "217.2 91.2% 59.8%",
+      },
+    },
   },
   {
     name: "skeleton",
     type: "registry:ui",
-    files: ["ui/skeleton.tsx"],
+    files: [
+      {
+        path: "ui/skeleton.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "slider",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-slider"],
-    files: ["ui/slider.tsx"],
+    files: [
+      {
+        path: "ui/slider.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "sonner",
     type: "registry:ui",
     dependencies: ["sonner", "next-themes"],
-    files: ["ui/sonner.tsx"],
+    files: [
+      {
+        path: "ui/sonner.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "switch",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-switch"],
-    files: ["ui/switch.tsx"],
+    files: [
+      {
+        path: "ui/switch.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "table",
     type: "registry:ui",
-    files: ["ui/table.tsx"],
+    files: [
+      {
+        path: "ui/table.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "tabs",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-tabs"],
-    files: ["ui/tabs.tsx"],
+    files: [
+      {
+        path: "ui/tabs.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "textarea",
     type: "registry:ui",
-    files: ["ui/textarea.tsx"],
+    files: [
+      {
+        path: "ui/textarea.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "toast",
@@ -303,19 +580,34 @@ export const ui: Registry = [
     name: "toggle",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-toggle"],
-    files: ["ui/toggle.tsx"],
+    files: [
+      {
+        path: "ui/toggle.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "toggle-group",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-toggle-group"],
     registryDependencies: ["toggle"],
-    files: ["ui/toggle-group.tsx"],
+    files: [
+      {
+        path: "ui/toggle-group.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "tooltip",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-tooltip"],
-    files: ["ui/tooltip.tsx"],
+    files: [
+      {
+        path: "ui/tooltip.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
 ]
diff --git a/apps/www/registry/schema.ts b/apps/www/registry/schema.ts
deleted file mode 100644
index ebd45304351..00000000000
--- a/apps/www/registry/schema.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { z } from "zod"
-
-export const blockChunkSchema = z.object({
-  name: z.string(),
-  description: z.string(),
-  component: z.any(),
-  file: z.string(),
-  code: z.string().optional(),
-  container: z
-    .object({
-      className: z.string().nullish(),
-    })
-    .optional(),
-})
-
-export const registryItemTypeSchema = z.enum([
-  "registry:style",
-  "registry:lib",
-  "registry:example",
-  "registry:block",
-  "registry:component",
-  "registry:ui",
-  "registry:hook",
-  "registry:theme",
-  "registry:page",
-])
-
-export const registryItemFileSchema = z.union([
-  z.string(),
-  z.object({
-    path: z.string(),
-    content: z.string().optional(),
-    type: registryItemTypeSchema,
-    target: z.string().optional(),
-  }),
-])
-
-export const registryItemTailwindSchema = z.object({
-  config: z.object({
-    content: z.array(z.string()).optional(),
-    theme: z.record(z.string(), z.any()).optional(),
-    plugins: z.array(z.string()).optional(),
-  }),
-})
-
-export const registryItemCssVarsSchema = z.object({
-  light: z.record(z.string(), z.string()).optional(),
-  dark: z.record(z.string(), z.string()).optional(),
-})
-
-export const registryEntrySchema = z.object({
-  name: z.string(),
-  type: registryItemTypeSchema,
-  description: z.string().optional(),
-  dependencies: z.array(z.string()).optional(),
-  devDependencies: z.array(z.string()).optional(),
-  registryDependencies: z.array(z.string()).optional(),
-  files: z.array(registryItemFileSchema).optional(),
-  tailwind: registryItemTailwindSchema.optional(),
-  cssVars: registryItemCssVarsSchema.optional(),
-  source: z.string().optional(),
-  category: z.string().optional(),
-  subcategory: z.string().optional(),
-  chunks: z.array(blockChunkSchema).optional(),
-  docs: z.string().optional(),
-})
-
-export const registrySchema = z.array(registryEntrySchema)
-
-export type RegistryEntry = z.infer<typeof registryEntrySchema>
-
-export type Registry = z.infer<typeof registrySchema>
-
-export const blockSchema = registryEntrySchema.extend({
-  type: z.literal("registry:block"),
-  style: z.enum(["default", "new-york"]),
-  component: z.any(),
-  container: z
-    .object({
-      height: z.string().nullish(),
-      className: z.string().nullish(),
-    })
-    .optional(),
-  code: z.string(),
-  highlightedCode: z.string(),
-})
-
-export type Block = z.infer<typeof blockSchema>
-
-export type BlockChunk = z.infer<typeof blockChunkSchema>
diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts
index e12bb23d282..ec2e33f695c 100644
--- a/apps/www/scripts/build-registry.mts
+++ b/apps/www/scripts/build-registry.mts
@@ -1,24 +1,25 @@
-// @sts-nocheck
-import { existsSync, promises as fs, readFileSync } from "fs"
+import { exec } from "child_process"
+import { existsSync, promises as fs } 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 {
+  Registry,
+  registryItemSchema,
+  registryItemTypeSchema,
+  registrySchema,
+} from "shadcn/schema"
+import { Project, ScriptKind } from "ts-morph"
 import { z } from "zod"
 
 import { registry } from "../registry"
-import { baseColors } from "../registry/registry-base-colors"
+import { baseColors, baseColorsV4 } from "../registry/registry-base-colors"
+import { registryCategories } from "../registry/registry-categories"
 import { colorMapping, colors } from "../registry/registry-colors"
+import { iconLibraries, icons } from "../registry/registry-icons"
 import { styles } from "../registry/registry-styles"
-import {
-  Registry,
-  RegistryEntry,
-  registryEntrySchema,
-  registryItemTypeSchema,
-  registrySchema,
-} from "../registry/schema"
+import { fixImport } from "./fix-import.mts"
 
 const REGISTRY_PATH = path.join(process.cwd(), "public/r")
 
@@ -28,6 +29,9 @@ const REGISTRY_INDEX_WHITELIST: z.infer<typeof registryItemTypeSchema>[] = [
   "registry:hook",
   "registry:theme",
   "registry:block",
+  "registry:example",
+  "registry:internal",
+  "registry:style",
 ]
 
 const project = new Project({
@@ -39,6 +43,61 @@ async function createTempSourceFile(filename: string) {
   return path.join(dir, filename)
 }
 
+// ----------------------------------------------------------------------------
+// Sync styles
+// ----------------------------------------------------------------------------
+async function syncStyles() {
+  const sourceStyle = "new-york"
+  const targetStyle = "default"
+
+  const syncDirectories = ["blocks", "hooks", "internal", "lib", "charts"]
+
+  // Clean up sync directories.
+  for (const dir of syncDirectories) {
+    rimraf.sync(path.join("registry", targetStyle, dir))
+  }
+
+  for (const item of registry.items) {
+    if (
+      !REGISTRY_INDEX_WHITELIST.includes(item.type) &&
+      item.type !== "registry:ui"
+    ) {
+      continue
+    }
+
+    const resolveFiles = item.files?.map(
+      (file) =>
+        `registry/${sourceStyle}/${typeof file === "string" ? file : file.path}`
+    )
+    if (!resolveFiles) {
+      continue
+    }
+
+    // Copy files to target style if they don't exist.
+    for (const file of resolveFiles) {
+      const sourcePath = path.join(process.cwd(), file)
+      const targetPath = path.join(
+        process.cwd(),
+        file.replace(sourceStyle, targetStyle)
+      )
+
+      if (!existsSync(targetPath)) {
+        // Create directory if it doesn't exist.
+        await fs.mkdir(path.dirname(targetPath), { recursive: true })
+        await fs.copyFile(sourcePath, targetPath)
+
+        // Replace all @/registry/new-york/ with @/registry/default/.
+        const content = await fs.readFile(targetPath, "utf8")
+        const fixedContent = content.replace(
+          new RegExp(`@/registry/${sourceStyle}/`, "g"),
+          `@/registry/${targetStyle}/`
+        )
+        await fs.writeFile(targetPath, fixedContent, "utf8")
+      }
+    }
+  }
+}
+
 // ----------------------------------------------------------------------------
 // Build __registry__/index.tsx.
 // ----------------------------------------------------------------------------
@@ -55,7 +114,7 @@ export const Index: Record<string, any> = {
     index += `  "${style.name}": {`
 
     // Build style index.
-    for (const item of registry) {
+    for (const item of registry.items) {
       const resolveFiles = item.files?.map(
         (file) =>
           `registry/${style.name}/${
@@ -66,14 +125,32 @@ export const Index: Record<string, any> = {
         continue
       }
 
+      // Validate categories.
+      if (item.categories) {
+        const invalidCategories = item.categories.filter(
+          (category) => !registryCategories.some((c) => c.slug === category)
+        )
+
+        if (invalidCategories.length > 0) {
+          console.error(
+            `${item.name} has invalid categories: ${invalidCategories}`
+          )
+          process.exit(1)
+        }
+      }
+
       const type = item.type.split(":")[1]
       let sourceFilename = ""
 
-      let chunks: any = []
       if (item.type === "registry:block") {
         const file = resolveFiles[0]
         const filename = path.basename(file)
-        const raw = await fs.readFile(file, "utf8")
+        let raw: string
+        try {
+          raw = await fs.readFile(file, "utf8")
+        } catch (error) {
+          continue
+        }
         const tempFile = await createTempSourceFile(filename)
         const sourceFile = project.createSourceFile(tempFile, raw, {
           scriptKind: ScriptKind.TSX,
@@ -107,129 +184,7 @@ export const Index: Record<string, any> = {
           }
         })
 
-        // Find all opening tags with x-chunk attribute.
-        const components = sourceFile
-          .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
-          .filter((node) => {
-            return node.getAttribute("x-chunk") !== undefined
-          })
-
-        chunks = await Promise.all(
-          components.map(async (component, index) => {
-            const chunkName = `${item.name}-chunk-${index}`
-
-            // Get the value of x-chunk attribute.
-            const attr = component
-              .getAttributeOrThrow("x-chunk")
-              .asKindOrThrow(SyntaxKind.JsxAttribute)
-
-            const description = attr
-              .getInitializerOrThrow()
-              .asKindOrThrow(SyntaxKind.StringLiteral)
-              .getLiteralValue()
-
-            // Delete the x-chunk attribute.
-            attr.remove()
-
-            // Add a new attribute to the component.
-            component.addAttribute({
-              name: "x-chunk",
-              initializer: `"${chunkName}"`,
-            })
-
-            // Get the value of x-chunk-container attribute.
-            const containerAttr = component
-              .getAttribute("x-chunk-container")
-              ?.asKindOrThrow(SyntaxKind.JsxAttribute)
-
-            const containerClassName = containerAttr
-              ?.getInitializer()
-              ?.asKindOrThrow(SyntaxKind.StringLiteral)
-              .getLiteralValue()
-
-            containerAttr?.remove()
-
-            const parentJsxElement = component.getParentIfKindOrThrow(
-              SyntaxKind.JsxElement
-            )
-
-            // Find all opening tags on component.
-            const children = parentJsxElement
-              .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
-              .map((node) => {
-                return node.getTagNameNode().getText()
-              })
-              .concat(
-                parentJsxElement
-                  .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
-                  .map((node) => {
-                    return node.getTagNameNode().getText()
-                  })
-              )
-
-            const componentImports = new Map<
-              string,
-              string | string[] | Set<string>
-            >()
-            children.forEach((child) => {
-              const importLine = imports.get(child)
-              if (importLine) {
-                const imports = componentImports.get(importLine.module) || []
-
-                const newImports = importLine.isDefault
-                  ? importLine.text
-                  : new Set([...imports, child])
-
-                componentImports.set(
-                  importLine.module,
-                  importLine?.isDefault ? newImports : Array.from(newImports)
-                )
-              }
-            })
-
-            const componnetImportLines = Array.from(
-              componentImports.keys()
-            ).map((key) => {
-              const values = componentImports.get(key)
-              const specifier = Array.isArray(values)
-                ? `{${values.join(",")}}`
-                : values
-
-              return `import ${specifier} from "${key}"`
-            })
-
-            const code = `
-            'use client'
-
-            ${componnetImportLines.join("\n")}
-
-            export default function Component() {
-              return (${parentJsxElement.getText()})
-            }`
-
-            const targetFile = file.replace(item.name, `${chunkName}`)
-            const targetFilePath = path.join(
-              cwd(),
-              `registry/${style.name}/${type}/${chunkName}.tsx`
-            )
-
-            // Write component file.
-            rimraf.sync(targetFilePath)
-            await fs.writeFile(targetFilePath, code, "utf8")
-
-            return {
-              name: chunkName,
-              description,
-              component: `React.lazy(() => import("@/registry/${style.name}/${type}/${chunkName}")),`,
-              file: targetFile,
-              container: {
-                className: containerClassName,
-              },
-            }
-          })
-        )
-
-        // // Write the source file for blocks only.
+        // Write the source file for blocks only.
         sourceFilename = `__registry__/${style.name}/${type}/${item.name}.tsx`
 
         if (item.files) {
@@ -268,24 +223,26 @@ export const Index: Record<string, any> = {
       index += `
     "${item.name}": {
       name: "${item.name}",
+      description: "${item.description ?? ""}",
       type: "${item.type}",
       registryDependencies: ${JSON.stringify(item.registryDependencies)},
-      files: [${resolveFiles.map((file) => `"${file}"`)}],
+      files: [${item.files?.map((file) => {
+        const filePath = `registry/${style.name}/${
+          typeof file === "string" ? file : file.path
+        }`
+        const resolvedFilePath = path.resolve(filePath)
+        return typeof file === "string"
+          ? `"${resolvedFilePath}"`
+          : `{
+        path: "${filePath}",
+        type: "${file.type}",
+        target: "${file.target ?? ""}"
+      }`
+      })}],
+      categories: ${JSON.stringify(item.categories)},
       component: React.lazy(() => import("${componentPath}")),
       source: "${sourceFilename}",
-      category: "${item.category}",
-      subcategory: "${item.subcategory}",
-      chunks: [${chunks.map(
-        (chunk) => `{
-        name: "${chunk.name}",
-        description: "${chunk.description ?? "No description"}",
-        component: ${chunk.component}
-        file: "${chunk.file}",
-        container: {
-          className: "${chunk.container.className}"
-        }
-      }`
-      )}]
+      meta: ${JSON.stringify(item.meta)},
     },`
     }
 
@@ -298,9 +255,9 @@ export const Index: Record<string, any> = {
 `
 
   // ----------------------------------------------------------------------------
-  // Build registry/index.json.
+  // Build registry/index.json (central index for all styles).
   // ----------------------------------------------------------------------------
-  const items = registry
+  const items = registry.items
     .filter((item) => ["registry:ui"].includes(item.type))
     .map((item) => {
       return {
@@ -343,7 +300,10 @@ async function buildStyles(registry: Registry) {
       await fs.mkdir(targetPath, { recursive: true })
     }
 
-    for (const item of registry) {
+    // Build registry.json for this style
+    const styleRegistryItems = []
+
+    for (const item of registry.items) {
       if (!REGISTRY_INDEX_WHITELIST.includes(item.type)) {
         continue
       }
@@ -362,10 +322,20 @@ async function buildStyles(registry: Registry) {
                   }
                 : _file
 
-            const content = await fs.readFile(
-              path.join(process.cwd(), "registry", style.name, file.path),
-              "utf8"
-            )
+            let content: string
+            try {
+              content = await fs.readFile(
+                path.join(process.cwd(), "registry", style.name, file.path),
+                "utf8"
+              )
+
+              // Only fix imports for v0- blocks.
+              if (item.name.startsWith("v0-")) {
+                content = fixImport(content)
+              }
+            } catch (error) {
+              return
+            }
 
             const tempFile = await createTempSourceFile(file.path)
             const sourceFile = project.createSourceFile(tempFile, content, {
@@ -376,27 +346,47 @@ async function buildStyles(registry: Registry) {
             sourceFile.getVariableDeclaration("containerClassName")?.remove()
             sourceFile.getVariableDeclaration("description")?.remove()
 
+            let target = file.target || ""
+
+            if ((!target || target === "") && item.name.startsWith("v0-")) {
+              const fileName = file.path.split("/").pop()
+              if (
+                file.type === "registry:block" ||
+                file.type === "registry:component" ||
+                file.type === "registry:example"
+              ) {
+                target = `components/${fileName}`
+              }
+
+              if (file.type === "registry:ui") {
+                target = `components/ui/${fileName}`
+              }
+
+              if (file.type === "registry:hook") {
+                target = `hooks/${fileName}`
+              }
+
+              if (file.type === "registry:lib") {
+                target = `lib/${fileName}`
+              }
+            }
+
             return {
               path: file.path,
               type: file.type,
               content: sourceFile.getText(),
-              target: file.target,
+              target,
             }
           })
         )
       }
 
-      const payload = registryEntrySchema
-        .omit({
-          source: true,
-          category: true,
-          subcategory: true,
-          chunks: true,
-        })
-        .safeParse({
-          ...item,
-          files,
-        })
+      const payload = registryItemSchema.safeParse({
+        $schema: "https://ui.shadcn.com/schema/registry-item.json",
+        author: "shadcn (https://ui.shadcn.com)",
+        ...item,
+        files,
+      })
 
       if (payload.success) {
         await fs.writeFile(
@@ -404,8 +394,47 @@ async function buildStyles(registry: Registry) {
           JSON.stringify(payload.data, null, 2),
           "utf8"
         )
+
+        // Add item to style registry with fixed paths (without content)
+        styleRegistryItems.push({
+          ...item,
+          files: files
+            ?.map((file: any) => {
+              if (!file) return null
+              // Exclude content from registry.json
+              const { content, ...fileWithoutContent } = file
+              return {
+                ...fileWithoutContent,
+                path: `registry/${style.name}/${file.path}`,
+              }
+            })
+            .filter(Boolean),
+        })
       }
     }
+
+    // Build registry.json for this style following registrySchema format
+    const styleRegistry = {
+      name: registry.name,
+      homepage: registry.homepage,
+      items: styleRegistryItems,
+    }
+
+    // Validate against registrySchema
+    const validatedRegistry = registrySchema.safeParse(styleRegistry)
+    if (validatedRegistry.success) {
+      const styleRegistryJson = JSON.stringify(validatedRegistry.data, null, 2)
+      await fs.writeFile(
+        path.join(targetPath, "registry.json"),
+        styleRegistryJson,
+        "utf8"
+      )
+    } else {
+      console.error(
+        `Failed to validate registry for style ${style.name}:`,
+        validatedRegistry.error
+      )
+    }
   }
 
   // ----------------------------------------------------------------------------
@@ -426,21 +455,14 @@ async function buildStylesIndex() {
   for (const style of styles) {
     const targetPath = path.join(REGISTRY_PATH, "styles", style.name)
 
-    const dependencies = [
-      "tailwindcss-animate",
-      "class-variance-authority",
-      "lucide-react",
-    ]
-
-    // TODO: Remove this when we migrate to lucide-react.
-    if (style.name === "new-york") {
-      dependencies.push("@radix-ui/react-icons")
-    }
-
-    const payload: RegistryEntry = {
+    const payload: z.infer<typeof registryItemSchema> = {
       name: style.name,
       type: "registry:style",
-      dependencies,
+      dependencies: [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react",
+      ],
       registryDependencies: ["utils"],
       tailwind: {
         config: {
@@ -617,6 +639,9 @@ async function buildThemes() {
       }
     }
 
+    // Add v4 css vars.
+    base["cssVarsV4"] = baseColorsV4[baseColor as keyof typeof baseColorsV4]
+
     // Build css vars.
     base["inlineColorsTemplate"] = template(BASE_STYLES)({})
     base["cssVarsTemplate"] = template(BASE_STYLES_WITH_VARIABLES)({
@@ -760,7 +785,85 @@ async function buildThemes() {
   }
 }
 
+// ----------------------------------------------------------------------------
+// Build registry/icons/index.json.
+// ----------------------------------------------------------------------------
+async function buildIcons() {
+  const iconsTargetPath = path.join(REGISTRY_PATH, "icons")
+  rimraf.sync(iconsTargetPath)
+  if (!existsSync(iconsTargetPath)) {
+    await fs.mkdir(iconsTargetPath, { recursive: true })
+  }
+
+  const iconsData = icons
+
+  await fs.writeFile(
+    path.join(iconsTargetPath, "index.json"),
+    JSON.stringify(iconsData, null, 2),
+    "utf8"
+  )
+}
+
+// ----------------------------------------------------------------------------
+// Build __registry__/icons.tsx.
+// ----------------------------------------------------------------------------
+async function buildRegistryIcons() {
+  let index = `// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import * as React from "react"
+
+export const Icons = {
+`
+
+  for (const [icon, libraries] of Object.entries(icons)) {
+    index += `  "${icon}": {`
+    for (const [library, componentName] of Object.entries(libraries)) {
+      const packageName = iconLibraries[library].package
+      if (packageName) {
+        index += `
+  ${library}: React.lazy(() => import("${packageName}").then(mod => ({
+    default: mod.${componentName}
+  }))),`
+      }
+    }
+    index += `
+},`
+  }
+
+  index += `
+}
+`
+
+  // Write style index.
+  rimraf.sync(path.join(process.cwd(), "__registry__/icons.tsx"))
+  await fs.writeFile(
+    path.join(process.cwd(), "__registry__/icons.tsx"),
+    index,
+    "utf8"
+  )
+}
+
+async function syncRegistry() {
+  // Copy the public/r directory to v4/public/r without triggering v4's build
+  const wwwPublicR = path.resolve(process.cwd(), "public/r")
+  const v4PublicR = path.resolve(process.cwd(), "../v4/public/r")
+
+  // Ensure the source directory exists
+  if (!existsSync(wwwPublicR)) {
+    await fs.mkdir(wwwPublicR, { recursive: true })
+  }
+
+  // Clean and recreate the v4/public/r directory
+  rimraf.sync(v4PublicR)
+  await fs.mkdir(v4PublicR, { recursive: true })
+
+  // Copy files from www to v4
+  await fs.cp(wwwPublicR, v4PublicR, { recursive: true })
+}
+
 try {
+  console.log("💽 Building registry...")
   const result = registrySchema.safeParse(registry)
 
   if (!result.success) {
@@ -768,12 +871,20 @@ try {
     process.exit(1)
   }
 
+  await syncStyles()
   await buildRegistry(result.data)
   await buildStyles(result.data)
-  await buildStylesIndex()
+  // await buildStylesIndex()
   await buildThemes()
 
+  await buildRegistryIcons()
+  await buildIcons()
+
+  console.log("🔄 Syncing registry...")
+  await syncRegistry()
+
   console.log("✅ Done!")
+  process.exit(0)
 } catch (error) {
   console.error(error)
   process.exit(1)
diff --git a/apps/www/scripts/capture-registry.mts b/apps/www/scripts/capture-registry.mts
new file mode 100644
index 00000000000..12c6f0f615b
--- /dev/null
+++ b/apps/www/scripts/capture-registry.mts
@@ -0,0 +1,100 @@
+import { existsSync, promises as fs } from "fs"
+import path from "path"
+import puppeteer from "puppeteer"
+
+import { getAllBlockIds } from "../lib/blocks"
+
+const REGISTRY_PATH = path.join(process.cwd(), "public/r")
+
+// ----------------------------------------------------------------------------
+// Capture screenshots.
+// ----------------------------------------------------------------------------
+async function captureScreenshots() {
+  const blockIds = await getAllBlockIds()
+  const blocks = blockIds.filter((block) => {
+    // Check if screenshots already exist
+    const lightPath = path.join(
+      REGISTRY_PATH,
+      `styles/new-york/${block}-light.png`
+    )
+    const darkPath = path.join(
+      REGISTRY_PATH,
+      `styles/new-york/${block}-dark.png`
+    )
+    return !existsSync(lightPath) || !existsSync(darkPath)
+  })
+
+  if (blocks.length === 0) {
+    console.log("✨ All screenshots exist, nothing to capture")
+    return
+  }
+
+  const browser = await puppeteer.launch({
+    defaultViewport: {
+      width: 1440,
+      height: 900,
+      deviceScaleFactor: 2,
+    },
+  })
+
+  for (const block of blocks) {
+    const pageUrl = `http://localhost:3333/view/styles/new-york/${block}`
+
+    const page = await browser.newPage()
+    await page.goto(pageUrl, {
+      waitUntil: "networkidle2",
+    })
+
+    console.log(`- Capturing ${block}...`)
+
+    for (const theme of ["light", "dark"]) {
+      const screenshotPath = path.join(
+        REGISTRY_PATH,
+        `styles/new-york/${block}${theme === "dark" ? "-dark" : "-light"}.png`
+      )
+
+      if (existsSync(screenshotPath)) {
+        continue
+      }
+
+      // Set theme and reload page
+      await page.evaluate((currentTheme) => {
+        localStorage.setItem("theme", currentTheme)
+      }, theme)
+
+      await page.reload({ waitUntil: "networkidle2" })
+
+      // Wait for animations to complete
+      if (block.startsWith("chart") || block.startsWith("dashboard")) {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+      }
+
+      // Hide Tailwind indicator
+      await page.evaluate(() => {
+        const indicator = document.querySelector("[data-tailwind-indicator]")
+        if (indicator) {
+          indicator.remove()
+        }
+      })
+
+      await page.screenshot({
+        path: screenshotPath,
+      })
+    }
+
+    await page.close()
+  }
+
+  await browser.close()
+}
+
+try {
+  console.log("🔍 Capturing screenshots...")
+
+  await captureScreenshots()
+
+  console.log("✅ Done!")
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}
diff --git a/apps/www/scripts/fix-import.mts b/apps/www/scripts/fix-import.mts
new file mode 100644
index 00000000000..0cd89079beb
--- /dev/null
+++ b/apps/www/scripts/fix-import.mts
@@ -0,0 +1,24 @@
+export function fixImport(content: string) {
+  const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
+
+  const replacement = (
+    match: string,
+    path: string,
+    type: string,
+    component: string
+  ) => {
+    if (type.endsWith("components")) {
+      return `@/components/${component}`
+    } else if (type.endsWith("ui")) {
+      return `@/components/ui/${component}`
+    } else if (type.endsWith("hooks")) {
+      return `@/hooks/${component}`
+    } else if (type.endsWith("lib")) {
+      return `@/lib/${component}`
+    }
+
+    return match
+  }
+
+  return content.replace(regex, replacement)
+}
diff --git a/apps/www/styles/globals.css b/apps/www/styles/globals.css
index 992c48d69d5..d7d2c141be7 100644
--- a/apps/www/styles/globals.css
+++ b/apps/www/styles/globals.css
@@ -24,12 +24,19 @@
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
     --radius: 0.5rem;
-
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 240 5% 64.9%;
   }
 
   .dark {
@@ -52,12 +59,19 @@
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
-
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 240 4.9% 83.9%;
   }
 }
 
@@ -69,11 +83,33 @@
     @apply scroll-smooth;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground overscroll-none;
     /* font-feature-settings: "rlig" 1, "calt" 1; */
     font-synthesis-weight: none;
     text-rendering: optimizeLegibility;
   }
+
+  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+    [data-wrapper] {
+      @apply min-[1800px]:border-t;
+    }
+  }
+
+  /* Custom scrollbar styling. Thanks @pranathiperii. */
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border));
+    border-radius: 5px;
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border)) transparent;
+  }
 }
 
 @layer utilities {
@@ -82,8 +118,8 @@
   }
 
   .step:before {
-    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
-    @apply ml-[-50px] mt-[-4px];
+    @apply md:absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 mr-2 border-background;
+    @apply md:ml-[-50px] md:mt-[-4px];
     content: counter(step);
   }
 
@@ -95,10 +131,26 @@
     content: "";
     @apply absolute -inset-4 shadow-xl rounded-xl border;
   }
-}
 
-@media (max-width: 640px) {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .border-grid {
+    @apply border-border/50 dark:border-border border-dashed;
+  }
+
+  .container-wrapper {
+    @apply max-w-[1400px] min-[1800px]:max-w-screen-2xl min-[1400px]:border-x border-border/70 dark:border-border mx-auto w-full border-dashed;
+  }
+
   .container {
-    @apply px-4;
+    @apply px-4 xl:px-6 mx-auto max-w-screen-2xl;
   }
 }
diff --git a/apps/www/tsconfig.json b/apps/www/tsconfig.json
index d9aab8d4ac9..809c8d4ca08 100644
--- a/apps/www/tsconfig.json
+++ b/apps/www/tsconfig.json
@@ -12,6 +12,7 @@
     "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
@@ -31,7 +32,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    ".contentlayer/generated"
+    ".contentlayer/generated",
+    "./scripts/**/*.ts"
   ],
-  "exclude": ["node_modules", "./scripts/build-registry.mts", "__registry__"]
+  "exclude": ["node_modules", "__registry__"]
 }
diff --git a/apps/www/tsconfig.scripts.json b/apps/www/tsconfig.scripts.json
index 7d81d8fcb5f..ca5cd5ff7e6 100644
--- a/apps/www/tsconfig.scripts.json
+++ b/apps/www/tsconfig.scripts.json
@@ -2,12 +2,13 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "target": "es6",
+    "target": "ES2017",
     "module": "ESNext",
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "isolatedModules": false
+    "isolatedModules": false,
+    "allowImportingTsExtensions": true
   },
-  "include": [".contentlayer/generated", "scripts/**/*.ts"],
+  "include": ["scripts/**/*.{ts,mts}"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/cli/.gitignore b/deprecated/cli/.gitignore
similarity index 100%
rename from packages/cli/.gitignore
rename to deprecated/cli/.gitignore
diff --git a/packages/cli/.prettierignore b/deprecated/cli/.prettierignore
similarity index 100%
rename from packages/cli/.prettierignore
rename to deprecated/cli/.prettierignore
diff --git a/packages/cli/CHANGELOG.md b/deprecated/cli/CHANGELOG.md
similarity index 93%
rename from packages/cli/CHANGELOG.md
rename to deprecated/cli/CHANGELOG.md
index 3041805541f..f5aa0404540 100644
--- a/packages/cli/CHANGELOG.md
+++ b/deprecated/cli/CHANGELOG.md
@@ -1,4 +1,20 @@
-# @shadcn/ui
+# shadcn-ui
+
+## 0.9.5
+
+`shadcn-ui` is deprecated. Use the `shadcn` CLI instead.
+
+## 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
+
+- [#5602](https://github.com/shadcn-ui/ui/pull/5602) [`2c2fe97`](https://github.com/shadcn-ui/ui/commit/2c2fe97eb96b2c5c7d03d1ae2756a851c3790030) Thanks [@shadcn](https://github.com/shadcn)! - move new-york icons to lucide-react
 
 ## 0.9.2
 
diff --git a/deprecated/cli/README.md b/deprecated/cli/README.md
new file mode 100644
index 00000000000..58eebf3daaf
--- /dev/null
+++ b/deprecated/cli/README.md
@@ -0,0 +1,14 @@
+# shadcn-ui
+
+> [!WARNING]
+> The shadcn-ui CLI is going to be deprecated soon. See [shadcn](https://ui.shadcn.com/docs/cli) for more information.
+
+Bug fixes and new features should be added to the `.packages/shadcn` instead.
+
+## Documentation
+
+Visit https://ui.shadcn.com/docs/cli to view the documentation.
+
+## License
+
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
diff --git a/deprecated/cli/package.json b/deprecated/cli/package.json
new file mode 100644
index 00000000000..dd1fd6097d5
--- /dev/null
+++ b/deprecated/cli/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "shadcn-ui",
+  "version": "0.9.5",
+  "description": "Add components to your apps.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "shadcn",
+    "url": "https://twitter.com/shadcn"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shadcn/ui.git",
+    "directory": "packages/cli"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "components",
+    "ui",
+    "tailwind",
+    "shadcn"
+  ],
+  "type": "module",
+  "exports": "./dist/index.js",
+  "bin": "./dist/index.js",
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "start:dev": "cross-env COMPONENTS_REGISTRY_URL=http://localhost:3003 node dist/index.js",
+    "start": "node dist/index.js",
+    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
+    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "chalk": "^5.4.1"
+  },
+  "devDependencies": {
+    "tsup": "^6.6.3"
+  }
+}
diff --git a/deprecated/cli/src/index.ts b/deprecated/cli/src/index.ts
new file mode 100644
index 00000000000..db28649e033
--- /dev/null
+++ b/deprecated/cli/src/index.ts
@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+import chalk from "chalk"
+
+function getInvoker() {
+  const args = process.argv.slice(2)
+  const env = process.env
+  const npmExecPath = env.npm_execpath || ""
+  const packageName = "shadcn@latest"
+
+  if (npmExecPath.includes("pnpm")) {
+    return `pnpm dlx ${packageName}${args.length ? ` ${args.join(" ")}` : ""}`
+  } else if (npmExecPath.includes("yarn")) {
+    return `yarn dlx ${packageName}${args.length ? ` ${args.join(" ")}` : ""}`
+  } else if (npmExecPath.includes("bun")) {
+    return `bunx ${packageName}${args.length ? ` ${args.join(" ")}` : ""}`
+  } else {
+    return `npx ${packageName}${args.length ? ` ${args.join(" ")}` : ""}`
+  }
+}
+
+const main = async () => {
+  console.log(
+    chalk.yellow(
+      "The 'shadcn-ui' package is deprecated. Please use the 'shadcn' package instead:"
+    )
+  )
+  console.log("")
+  console.log(chalk.green(`  ${getInvoker()}`))
+  console.log("")
+  console.log(
+    chalk.yellow("For more information, visit: https://ui.shadcn.com/docs/cli")
+  )
+  console.log("")
+}
+
+main().catch((error) => {
+  console.error(chalk.red("Error:"), error.message)
+  process.exit(1)
+})
diff --git a/packages/cli/tsconfig.json b/deprecated/cli/tsconfig.json
similarity index 100%
rename from packages/cli/tsconfig.json
rename to deprecated/cli/tsconfig.json
diff --git a/packages/cli/tsup.config.ts b/deprecated/cli/tsup.config.ts
similarity index 88%
rename from packages/cli/tsup.config.ts
rename to deprecated/cli/tsup.config.ts
index 5e496be82c2..25261533f6c 100644
--- a/packages/cli/tsup.config.ts
+++ b/deprecated/cli/tsup.config.ts
@@ -4,7 +4,7 @@ export default defineConfig({
   clean: true,
   dts: true,
   entry: ["src/index.ts"],
-  format: ["esm"],
+  format: ["esm", "cjs"],
   sourcemap: true,
   minify: true,
   target: "esnext",
diff --git a/package.json b/package.json
index 2e426be233b..413ed53df0a 100644
--- a/package.json
+++ b/package.json
@@ -10,29 +10,35 @@
   },
   "workspaces": [
     "apps/*",
-    "packages/*",
-    "templates/*"
+    "packages/*"
   ],
   "scripts": {
     "build": "turbo run build",
     "build:cli": "turbo --filter=shadcn build",
-    "build:registry": "pnpm --filter=www build:registry && pnpm format:write -- --loglevel silent",
-    "registry:build": "pnpm --filter=www build:registry && pnpm format:write -- --loglevel silent",
-    "dev": "turbo run dev --parallel",
+    "build:registry": "pnpm --filter=www,v4 build:registry && pnpm --filter=www,v4 lint:fix && pnpm format:write -- --loglevel silent",
+    "registry:build": "pnpm --filter=v4 registry:build && pnpm lint:fix && pnpm format:write -- --loglevel silent",
+    "registry:capture": "pnpm --filter=www registry:capture",
+    "dev": "turbo run dev --filter=!www --parallel",
+    "shadcn-ui:dev": "turbo --filter=shadcn-ui dev",
+    "shadcn-ui": "pnpm --filter=shadcn-ui start:dev",
+    "shadcn-ui:test": "pnpm --filter=shadcn-ui test",
     "cli:dev": "turbo --filter=shadcn-ui dev",
     "cli:start": "pnpm --filter=shadcn-ui start:dev",
     "cli:build": "pnpm --filter=shadcn-ui build",
     "shadcn:dev": "turbo --filter=shadcn dev",
     "shadcn": "pnpm --filter=shadcn start:dev",
+    "shadcn:prod": "pnpm --filter=shadcn start:prod",
     "shadcn:build": "pnpm --filter=shadcn build",
     "shadcn:test": "pnpm --filter=shadcn test",
     "docs:build": "pnpm --filter=www build:docs",
     "www:dev": "pnpm --filter=www dev",
     "www:build": "pnpm --filter=www build",
+    "v4:dev": "pnpm --filter=v4 dev",
+    "v4:build": "pnpm --filter=v4 build",
     "lint": "turbo run lint",
     "lint:fix": "turbo run lint:fix",
     "preview": "turbo run preview",
-    "typecheck": "turbo run typecheck",
+    "typecheck": "turbo run typecheck --filter=!www",
     "format:write": "turbo run format:write",
     "format:check": "turbo run format:check",
     "sync:templates": "./scripts/sync-templates.sh \"templates/*\"",
@@ -40,7 +46,9 @@
     "release": "changeset version",
     "pub:beta": "cd packages/shadcn && pnpm pub:beta",
     "pub:release": "cd packages/shadcn && pnpm pub:release",
-    "test": "turbo run test --force"
+    "test:dev": "turbo run test --filter=!shadcn-ui --force",
+    "test": "start-server-and-test v4:dev http://localhost:4000 test:dev",
+    "validate:registries": "pnpm --filter=v4 validate:registries"
   },
   "packageManager": "pnpm@9.0.6",
   "dependencies": {
@@ -61,21 +69,25 @@
     "eslint-config-turbo": "^1.9.9",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-tailwindcss": "3.13.1",
+    "motion": "^12.12.1",
     "postcss": "^8.4.24",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
-    "tailwindcss": "3.3.7",
+    "puppeteer": "^23.6.0",
+    "tailwindcss": "3.4.6",
     "tailwindcss-animate": "^1.0.5",
     "tsx": "^4.1.4",
     "turbo": "^1.9.9",
-    "vite": "^5.4.1",
+    "vite": "^5.4.15",
     "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^2.0.5"
+    "vitest": "^2.1.9"
   },
   "devDependencies": {
+    "@types/hast": "^3.0.4",
     "@types/node": "^20.11.27",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.22",
+    "start-server-and-test": "^2.0.12",
     "typescript": "^5.5.3"
   }
 }
diff --git a/packages/cli/README.md b/packages/cli/README.md
deleted file mode 100644
index 816337065e7..00000000000
--- a/packages/cli/README.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# shadcn-ui
-
-A CLI for adding components to your project.
-
-> [!WARNING]
-> The shadcn-ui CLI is going to be deprecated soon. Bug fixes and new features should be added to the `.packages/shadcn` instead.
-
-## Usage
-
-Use the `init` command to initialize dependencies for a new project.
-
-The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.
-
-```bash
-npx shadcn-ui init
-```
-
-## add
-
-Use the `add` command to add components to your project.
-
-The `add` command adds a component to your project and installs all required dependencies.
-
-```bash
-npx shadcn-ui add [component]
-```
-
-### Example
-
-```bash
-npx shadcn-ui add alert-dialog
-```
-
-You can also run the command without any arguments to view a list of all available components:
-
-```bash
-npx shadcn-ui add
-```
-
-## Documentation
-
-Visit https://ui.shadcn.com/docs/cli to view the documentation.
-
-## License
-
-Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
diff --git a/packages/cli/package.json b/packages/cli/package.json
deleted file mode 100644
index 8bb0123578c..00000000000
--- a/packages/cli/package.json
+++ /dev/null
@@ -1,79 +0,0 @@
-{
-  "name": "shadcn-ui",
-  "version": "0.9.2",
-  "description": "Add components to your apps.",
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "author": {
-    "name": "shadcn",
-    "url": "https://twitter.com/shadcn"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/shadcn/ui.git",
-    "directory": "packages/cli"
-  },
-  "files": [
-    "dist"
-  ],
-  "keywords": [
-    "components",
-    "ui",
-    "tailwind",
-    "radix-ui",
-    "shadcn"
-  ],
-  "type": "module",
-  "exports": "./dist/index.js",
-  "bin": "./dist/index.js",
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "typecheck": "tsc --noEmit",
-    "clean": "rimraf dist && rimraf components",
-    "start:dev": "cross-env COMPONENTS_REGISTRY_URL=http://localhost:3003 node dist/index.js",
-    "start": "node dist/index.js",
-    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
-    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
-    "release": "changeset version",
-    "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",
-    "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
-    "pub:release": "pnpm build && pnpm publish --access public",
-    "test": "vitest run"
-  },
-  "dependencies": {
-    "@antfu/ni": "^0.21.4",
-    "@babel/core": "^7.22.1",
-    "@babel/parser": "^7.22.6",
-    "@babel/plugin-transform-typescript": "^7.22.5",
-    "chalk": "5.2.0",
-    "commander": "^10.0.0",
-    "cosmiconfig": "^8.1.3",
-    "diff": "^5.1.0",
-    "execa": "^7.0.0",
-    "fast-glob": "^3.3.2",
-    "fs-extra": "^11.1.0",
-    "https-proxy-agent": "^6.2.0",
-    "lodash.template": "^4.5.0",
-    "node-fetch": "^3.3.0",
-    "ora": "^6.1.2",
-    "prompts": "^2.4.2",
-    "recast": "^0.23.2",
-    "ts-morph": "^18.0.0",
-    "tsconfig-paths": "^4.2.0",
-    "zod": "^3.20.2"
-  },
-  "devDependencies": {
-    "@types/babel__core": "^7.20.1",
-    "@types/diff": "^5.0.3",
-    "@types/fs-extra": "^11.0.1",
-    "@types/lodash.template": "^4.5.1",
-    "@types/prompts": "^2.4.2",
-    "rimraf": "^4.1.3",
-    "tsup": "^6.6.3",
-    "type-fest": "^3.8.0",
-    "typescript": "^4.9.3"
-  }
-}
diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
deleted file mode 100644
index abf509f49ff..00000000000
--- a/packages/cli/src/commands/add.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-import { existsSync, promises as fs } from "fs"
-import path from "path"
-import { DEPRECATED_MESSAGE } from "@/src/deprecated"
-import { getConfig } from "@/src/utils/get-config"
-import { getPackageManager } from "@/src/utils/get-package-manager"
-import { handleError } from "@/src/utils/handle-error"
-import { logger } from "@/src/utils/logger"
-import {
-  fetchTree,
-  getItemTargetPath,
-  getRegistryBaseColor,
-  getRegistryIndex,
-  resolveTree,
-} from "@/src/utils/registry"
-import { transform } from "@/src/utils/transformers"
-import chalk from "chalk"
-import { Command } from "commander"
-import { execa } from "execa"
-import ora from "ora"
-import prompts from "prompts"
-import { z } from "zod"
-
-const addOptionsSchema = z.object({
-  components: z.array(z.string()).optional(),
-  yes: z.boolean(),
-  overwrite: z.boolean(),
-  cwd: z.string(),
-  all: z.boolean(),
-  path: z.string().optional(),
-})
-
-export const add = new Command()
-  .name("add")
-  .description("add a component to your project")
-  .argument("[components...]", "the components to add")
-  .option("-y, --yes", "skip confirmation prompt.", true)
-  .option("-o, --overwrite", "overwrite existing files.", false)
-  .option(
-    "-c, --cwd <cwd>",
-    "the working directory. defaults to the current directory.",
-    process.cwd()
-  )
-  .option("-a, --all", "add all available components", false)
-  .option("-p, --path <path>", "the path to add the component to.")
-  .action(async (components, opts) => {
-    try {
-      console.log(DEPRECATED_MESSAGE)
-
-      const options = addOptionsSchema.parse({
-        components,
-        ...opts,
-      })
-
-      const cwd = path.resolve(options.cwd)
-
-      if (!existsSync(cwd)) {
-        logger.error(`The path ${cwd} does not exist. Please try again.`)
-        process.exit(1)
-      }
-
-      const config = await getConfig(cwd)
-      if (!config) {
-        logger.warn(
-          `Configuration is missing. Please run ${chalk.green(
-            `init`
-          )} to create a components.json file.`
-        )
-        process.exit(1)
-      }
-
-      const registryIndex = await getRegistryIndex()
-
-      let selectedComponents = options.all
-        ? registryIndex.map((entry) => entry.name)
-        : options.components
-      if (!options.components?.length && !options.all) {
-        const { components } = await prompts({
-          type: "multiselect",
-          name: "components",
-          message: "Which components would you like to add?",
-          hint: "Space to select. A to toggle all. Enter to submit.",
-          instructions: false,
-          choices: registryIndex.map((entry) => ({
-            title: entry.name,
-            value: entry.name,
-            selected: options.all
-              ? true
-              : options.components?.includes(entry.name),
-          })),
-        })
-        selectedComponents = components
-      }
-
-      if (!selectedComponents?.length) {
-        logger.warn("No components selected. Exiting.")
-        process.exit(0)
-      }
-
-      const tree = await resolveTree(registryIndex, selectedComponents)
-      const payload = await fetchTree(config.style, tree)
-      const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)
-
-      if (!payload.length) {
-        logger.warn("Selected components not found. Exiting.")
-        process.exit(0)
-      }
-
-      if (!options.yes) {
-        const { proceed } = await prompts({
-          type: "confirm",
-          name: "proceed",
-          message: `Ready to install components and dependencies. Proceed?`,
-          initial: true,
-        })
-
-        if (!proceed) {
-          process.exit(0)
-        }
-      }
-
-      const spinner = ora(`Installing components...`).start()
-      for (const item of payload) {
-        spinner.text = `Installing ${item.name}...`
-        const targetDir = await getItemTargetPath(
-          config,
-          item,
-          options.path ? path.resolve(cwd, options.path) : undefined
-        )
-
-        if (!targetDir) {
-          continue
-        }
-
-        if (!existsSync(targetDir)) {
-          await fs.mkdir(targetDir, { recursive: true })
-        }
-
-        const existingComponent = item.files.filter((file) =>
-          existsSync(path.resolve(targetDir, file.name))
-        )
-
-        if (existingComponent.length && !options.overwrite) {
-          if (selectedComponents.includes(item.name)) {
-            spinner.stop()
-            const { overwrite } = await prompts({
-              type: "confirm",
-              name: "overwrite",
-              message: `Component ${item.name} already exists. Would you like to overwrite?`,
-              initial: false,
-            })
-
-            if (!overwrite) {
-              logger.info(
-                `Skipped ${item.name}. To overwrite, run with the ${chalk.green(
-                  "--overwrite"
-                )} flag.`
-              )
-              continue
-            }
-
-            spinner.start(`Installing ${item.name}...`)
-          } else {
-            continue
-          }
-        }
-
-        for (const file of item.files) {
-          let filePath = path.resolve(targetDir, file.name)
-
-          // Run transformers.
-          const content = await transform({
-            filename: file.name,
-            raw: file.content,
-            config,
-            baseColor,
-          })
-
-          if (!config.tsx) {
-            filePath = filePath.replace(/\.tsx$/, ".jsx")
-            filePath = filePath.replace(/\.ts$/, ".js")
-          }
-
-          await fs.writeFile(filePath, content)
-        }
-
-        const packageManager = await getPackageManager(cwd)
-
-        // Install dependencies.
-        if (item.dependencies?.length) {
-          await execa(
-            packageManager,
-            [
-              packageManager === "npm" ? "install" : "add",
-              ...item.dependencies,
-            ],
-            {
-              cwd,
-            }
-          )
-        }
-
-        // Install devDependencies.
-        if (item.devDependencies?.length) {
-          await execa(
-            packageManager,
-            [
-              packageManager === "npm" ? "install" : "add",
-              "-D",
-              ...item.devDependencies,
-            ],
-            {
-              cwd,
-            }
-          )
-        }
-      }
-      spinner.succeed(`Done.`)
-    } catch (error) {
-      handleError(error)
-    }
-  })
diff --git a/packages/cli/src/commands/diff.ts b/packages/cli/src/commands/diff.ts
deleted file mode 100644
index 43a19f65bd5..00000000000
--- a/packages/cli/src/commands/diff.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-import { existsSync, promises as fs } from "fs"
-import path from "path"
-import { Config, getConfig } from "@/src/utils/get-config"
-import { handleError } from "@/src/utils/handle-error"
-import { logger } from "@/src/utils/logger"
-import {
-  fetchTree,
-  getItemTargetPath,
-  getRegistryBaseColor,
-  getRegistryIndex,
-} from "@/src/utils/registry"
-import { registryIndexSchema } from "@/src/utils/registry/schema"
-import { transform } from "@/src/utils/transformers"
-import chalk from "chalk"
-import { Command } from "commander"
-import { diffLines, type Change } from "diff"
-import { z } from "zod"
-
-const updateOptionsSchema = z.object({
-  component: z.string().optional(),
-  yes: z.boolean(),
-  cwd: z.string(),
-  path: z.string().optional(),
-})
-
-export const diff = new Command()
-  .name("diff")
-  .description("check for updates against the registry")
-  .argument("[component]", "the component name")
-  .option("-y, --yes", "skip confirmation prompt.", false)
-  .option(
-    "-c, --cwd <cwd>",
-    "the working directory. defaults to the current directory.",
-    process.cwd()
-  )
-  .action(async (name, opts) => {
-    try {
-      const options = updateOptionsSchema.parse({
-        component: name,
-        ...opts,
-      })
-
-      const cwd = path.resolve(options.cwd)
-
-      if (!existsSync(cwd)) {
-        logger.error(`The path ${cwd} does not exist. Please try again.`)
-        process.exit(1)
-      }
-
-      const config = await getConfig(cwd)
-      if (!config) {
-        logger.warn(
-          `Configuration is missing. Please run ${chalk.green(
-            `init`
-          )} to create a components.json file.`
-        )
-        process.exit(1)
-      }
-
-      const registryIndex = await getRegistryIndex()
-
-      if (!options.component) {
-        const targetDir = config.resolvedPaths.components
-
-        // Find all components that exist in the project.
-        const projectComponents = registryIndex.filter((item) => {
-          for (const file of item.files) {
-            const filePath = path.resolve(targetDir, file)
-            if (existsSync(filePath)) {
-              return true
-            }
-          }
-
-          return false
-        })
-
-        // Check for updates.
-        const componentsWithUpdates = []
-        for (const component of projectComponents) {
-          const changes = await diffComponent(component, config)
-          if (changes.length) {
-            componentsWithUpdates.push({
-              name: component.name,
-              changes,
-            })
-          }
-        }
-
-        if (!componentsWithUpdates.length) {
-          logger.info("No updates found.")
-          process.exit(0)
-        }
-
-        logger.info("The following components have updates available:")
-        for (const component of componentsWithUpdates) {
-          logger.info(`- ${component.name}`)
-          for (const change of component.changes) {
-            logger.info(`  - ${change.filePath}`)
-          }
-        }
-        logger.break()
-        logger.info(
-          `Run ${chalk.green(`diff <component>`)} to see the changes.`
-        )
-        process.exit(0)
-      }
-
-      // Show diff for a single component.
-      const component = registryIndex.find(
-        (item) => item.name === options.component
-      )
-
-      if (!component) {
-        logger.error(
-          `The component ${chalk.green(options.component)} does not exist.`
-        )
-        process.exit(1)
-      }
-
-      const changes = await diffComponent(component, config)
-
-      if (!changes.length) {
-        logger.info(`No updates found for ${options.component}.`)
-        process.exit(0)
-      }
-
-      for (const change of changes) {
-        logger.info(`- ${change.filePath}`)
-        await printDiff(change.patch)
-        logger.info("")
-      }
-    } catch (error) {
-      handleError(error)
-    }
-  })
-
-async function diffComponent(
-  component: z.infer<typeof registryIndexSchema>[number],
-  config: Config
-) {
-  const payload = await fetchTree(config.style, [component])
-  const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)
-
-  const changes = []
-
-  for (const item of payload) {
-    const targetDir = await getItemTargetPath(config, item)
-
-    if (!targetDir) {
-      continue
-    }
-
-    for (const file of item.files) {
-      const filePath = path.resolve(targetDir, file.name)
-
-      if (!existsSync(filePath)) {
-        continue
-      }
-
-      const fileContent = await fs.readFile(filePath, "utf8")
-
-      const registryContent = await transform({
-        filename: file.name,
-        raw: file.content,
-        config,
-        baseColor,
-      })
-
-      const patch = diffLines(registryContent as string, fileContent)
-      if (patch.length > 1) {
-        changes.push({
-          file: file.name,
-          filePath,
-          patch,
-        })
-      }
-    }
-  }
-
-  return changes
-}
-
-async function printDiff(diff: Change[]) {
-  diff.forEach((part) => {
-    if (part) {
-      if (part.added) {
-        return process.stdout.write(chalk.green(part.value))
-      }
-      if (part.removed) {
-        return process.stdout.write(chalk.red(part.value))
-      }
-
-      return process.stdout.write(part.value)
-    }
-  })
-}
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
deleted file mode 100644
index 4ba66f47c26..00000000000
--- a/packages/cli/src/commands/init.ts
+++ /dev/null
@@ -1,402 +0,0 @@
-import { existsSync, promises as fs } from "fs"
-import path from "path"
-import { DEPRECATED_MESSAGE } from "@/src/deprecated"
-import {
-  DEFAULT_COMPONENTS,
-  DEFAULT_TAILWIND_CONFIG,
-  DEFAULT_TAILWIND_CSS,
-  DEFAULT_UTILS,
-  getConfig,
-  rawConfigSchema,
-  resolveConfigPaths,
-  type Config,
-} from "@/src/utils/get-config"
-import { getPackageManager } from "@/src/utils/get-package-manager"
-import { getProjectConfig, preFlight } from "@/src/utils/get-project-info"
-import { handleError } from "@/src/utils/handle-error"
-import { logger } from "@/src/utils/logger"
-import {
-  getRegistryBaseColor,
-  getRegistryBaseColors,
-  getRegistryStyles,
-} from "@/src/utils/registry"
-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 ora from "ora"
-import prompts from "prompts"
-import { z } from "zod"
-
-import { applyPrefixesCss } from "../utils/transformers/transform-tw-prefix"
-
-const PROJECT_DEPENDENCIES = [
-  "tailwindcss-animate",
-  "class-variance-authority",
-  "clsx",
-  "tailwind-merge",
-]
-
-const initOptionsSchema = z.object({
-  cwd: z.string(),
-  yes: z.boolean(),
-  defaults: z.boolean(),
-})
-
-export const init = new Command()
-  .name("init")
-  .description("initialize your project and install dependencies")
-  .option("-y, --yes", "skip confirmation prompt.", false)
-  .option("-d, --defaults,", "use default configuration.", false)
-  .option(
-    "-c, --cwd <cwd>",
-    "the working directory. defaults to the current directory.",
-    process.cwd()
-  )
-  .action(async (opts) => {
-    try {
-      console.log(DEPRECATED_MESSAGE)
-
-      const options = initOptionsSchema.parse(opts)
-      const cwd = path.resolve(options.cwd)
-
-      // Ensure target directory exists.
-      if (!existsSync(cwd)) {
-        logger.error(`The path ${cwd} does not exist. Please try again.`)
-        process.exit(1)
-      }
-
-      preFlight(cwd)
-
-      const projectConfig = await getProjectConfig(cwd)
-      if (projectConfig) {
-        const config = await promptForMinimalConfig(
-          cwd,
-          projectConfig,
-          opts.defaults
-        )
-        await runInit(cwd, config)
-      } else {
-        // Read config.
-        const existingConfig = await getConfig(cwd)
-        const config = await promptForConfig(cwd, existingConfig, options.yes)
-        await runInit(cwd, config)
-      }
-
-      logger.info("")
-      logger.info(
-        `${chalk.green(
-          "Success!"
-        )} Project initialization completed. You may now add components.`
-      )
-      logger.info("")
-    } catch (error) {
-      handleError(error)
-    }
-  })
-
-export async function promptForConfig(
-  cwd: string,
-  defaultConfig: Config | null = null,
-  skip = false
-) {
-  const highlight = (text: string) => chalk.cyan(text)
-
-  const styles = await getRegistryStyles()
-  const baseColors = await getRegistryBaseColors()
-
-  const options = await prompts([
-    {
-      type: "toggle",
-      name: "typescript",
-      message: `Would you like to use ${highlight(
-        "TypeScript"
-      )} (recommended)?`,
-      initial: defaultConfig?.tsx ?? true,
-      active: "yes",
-      inactive: "no",
-    },
-    {
-      type: "select",
-      name: "style",
-      message: `Which ${highlight("style")} would you like to use?`,
-      choices: styles.map((style) => ({
-        title: style.label,
-        value: style.name,
-      })),
-    },
-    {
-      type: "select",
-      name: "tailwindBaseColor",
-      message: `Which color would you like to use as ${highlight(
-        "base color"
-      )}?`,
-      choices: baseColors.map((color) => ({
-        title: color.label,
-        value: color.name,
-      })),
-    },
-    {
-      type: "text",
-      name: "tailwindCss",
-      message: `Where is your ${highlight("global CSS")} file?`,
-      initial: defaultConfig?.tailwind.css ?? DEFAULT_TAILWIND_CSS,
-    },
-    {
-      type: "toggle",
-      name: "tailwindCssVariables",
-      message: `Would you like to use ${highlight(
-        "CSS variables"
-      )} for colors?`,
-      initial: defaultConfig?.tailwind.cssVariables ?? true,
-      active: "yes",
-      inactive: "no",
-    },
-    {
-      type: "text",
-      name: "tailwindPrefix",
-      message: `Are you using a custom ${highlight(
-        "tailwind prefix eg. tw-"
-      )}? (Leave blank if not)`,
-      initial: "",
-    },
-    {
-      type: "text",
-      name: "tailwindConfig",
-      message: `Where is your ${highlight("tailwind.config.js")} located?`,
-      initial: defaultConfig?.tailwind.config ?? DEFAULT_TAILWIND_CONFIG,
-    },
-    {
-      type: "text",
-      name: "components",
-      message: `Configure the import alias for ${highlight("components")}:`,
-      initial: defaultConfig?.aliases["components"] ?? DEFAULT_COMPONENTS,
-    },
-    {
-      type: "text",
-      name: "utils",
-      message: `Configure the import alias for ${highlight("utils")}:`,
-      initial: defaultConfig?.aliases["utils"] ?? DEFAULT_UTILS,
-    },
-    {
-      type: "toggle",
-      name: "rsc",
-      message: `Are you using ${highlight("React Server Components")}?`,
-      initial: defaultConfig?.rsc ?? true,
-      active: "yes",
-      inactive: "no",
-    },
-  ])
-
-  const config = rawConfigSchema.parse({
-    $schema: "https://ui.shadcn.com/schema.json",
-    style: options.style,
-    tailwind: {
-      config: options.tailwindConfig,
-      css: options.tailwindCss,
-      baseColor: options.tailwindBaseColor,
-      cssVariables: options.tailwindCssVariables,
-      prefix: options.tailwindPrefix,
-    },
-    rsc: options.rsc,
-    tsx: options.typescript,
-    aliases: {
-      utils: options.utils,
-      components: options.components,
-    },
-  })
-
-  if (!skip) {
-    const { proceed } = await prompts({
-      type: "confirm",
-      name: "proceed",
-      message: `Write configuration to ${highlight(
-        "components.json"
-      )}. Proceed?`,
-      initial: true,
-    })
-
-    if (!proceed) {
-      process.exit(0)
-    }
-  }
-
-  // Write to file.
-  logger.info("")
-  const spinner = ora(`Writing components.json...`).start()
-  const targetPath = path.resolve(cwd, "components.json")
-  await fs.writeFile(targetPath, JSON.stringify(config, null, 2), "utf8")
-  spinner.succeed()
-
-  return await resolveConfigPaths(cwd, config)
-}
-
-export async function promptForMinimalConfig(
-  cwd: string,
-  defaultConfig: Config,
-  defaults = false
-) {
-  const highlight = (text: string) => chalk.cyan(text)
-  let style = defaultConfig.style
-  let baseColor = defaultConfig.tailwind.baseColor
-  let cssVariables = defaultConfig.tailwind.cssVariables
-
-  if (!defaults) {
-    const styles = await getRegistryStyles()
-    const baseColors = await getRegistryBaseColors()
-
-    const options = await prompts([
-      {
-        type: "select",
-        name: "style",
-        message: `Which ${highlight("style")} would you like to use?`,
-        choices: styles.map((style) => ({
-          title: style.label,
-          value: style.name,
-        })),
-      },
-      {
-        type: "select",
-        name: "tailwindBaseColor",
-        message: `Which color would you like to use as ${highlight(
-          "base color"
-        )}?`,
-        choices: baseColors.map((color) => ({
-          title: color.label,
-          value: color.name,
-        })),
-      },
-      {
-        type: "toggle",
-        name: "tailwindCssVariables",
-        message: `Would you like to use ${highlight(
-          "CSS variables"
-        )} for colors?`,
-        initial: defaultConfig?.tailwind.cssVariables,
-        active: "yes",
-        inactive: "no",
-      },
-    ])
-
-    style = options.style
-    baseColor = options.tailwindBaseColor
-    cssVariables = options.tailwindCssVariables
-  }
-
-  const config = rawConfigSchema.parse({
-    $schema: defaultConfig?.$schema,
-    style,
-    tailwind: {
-      ...defaultConfig?.tailwind,
-      baseColor,
-      cssVariables,
-    },
-    rsc: defaultConfig?.rsc,
-    tsx: defaultConfig?.tsx,
-    aliases: defaultConfig?.aliases,
-  })
-
-  // Write to file.
-  logger.info("")
-  const spinner = ora(`Writing components.json...`).start()
-  const targetPath = path.resolve(cwd, "components.json")
-  await fs.writeFile(targetPath, JSON.stringify(config, null, 2), "utf8")
-  spinner.succeed()
-
-  return await resolveConfigPaths(cwd, config)
-}
-
-export async function runInit(cwd: string, config: Config) {
-  const spinner = ora(`Initializing project...`)?.start()
-
-  // Ensure all resolved paths directories exist.
-  for (const [key, resolvedPath] of Object.entries(config.resolvedPaths)) {
-    // Determine if the path is a file or directory.
-    // TODO: is there a better way to do this?
-    let dirname = path.extname(resolvedPath)
-      ? path.dirname(resolvedPath)
-      : resolvedPath
-
-    // If the utils alias is set to something like "@/lib/utils",
-    // assume this is a file and remove the "utils" file name.
-    // TODO: In future releases we should add support for individual utils.
-    if (key === "utils" && resolvedPath.endsWith("/utils")) {
-      // Remove /utils at the end.
-      dirname = dirname.replace(/\/utils$/, "")
-    }
-
-    if (!existsSync(dirname)) {
-      await fs.mkdir(dirname, { recursive: true })
-    }
-  }
-
-  const extension = config.tsx ? "ts" : "js"
-
-  const tailwindConfigExtension = path.extname(
-    config.resolvedPaths.tailwindConfig
-  )
-
-  let tailwindConfigTemplate: string
-  if (tailwindConfigExtension === ".ts") {
-    tailwindConfigTemplate = config.tailwind.cssVariables
-      ? templates.TAILWIND_CONFIG_TS_WITH_VARIABLES
-      : templates.TAILWIND_CONFIG_TS
-  } else {
-    tailwindConfigTemplate = config.tailwind.cssVariables
-      ? templates.TAILWIND_CONFIG_WITH_VARIABLES
-      : templates.TAILWIND_CONFIG
-  }
-
-  // Write tailwind config.
-  await fs.writeFile(
-    config.resolvedPaths.tailwindConfig,
-    template(tailwindConfigTemplate)({
-      extension,
-      prefix: config.tailwind.prefix,
-    }),
-    "utf8"
-  )
-
-  // Write css file.
-  const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)
-  if (baseColor) {
-    await fs.writeFile(
-      config.resolvedPaths.tailwindCss,
-      config.tailwind.cssVariables
-        ? config.tailwind.prefix
-          ? applyPrefixesCss(baseColor.cssVarsTemplate, config.tailwind.prefix)
-          : baseColor.cssVarsTemplate
-        : baseColor.inlineColorsTemplate,
-      "utf8"
-    )
-  }
-
-  // Write cn file.
-  await fs.writeFile(
-    `${config.resolvedPaths.utils}.${extension}`,
-    extension === "ts" ? templates.UTILS : templates.UTILS_JS,
-    "utf8"
-  )
-
-  spinner?.succeed()
-
-  // Install dependencies.
-  const dependenciesSpinner = ora(`Installing dependencies...`)?.start()
-  const packageManager = await getPackageManager(cwd)
-
-  // TODO: add support for other icon libraries.
-  const deps = [
-    ...PROJECT_DEPENDENCIES,
-    config.style === "new-york" ? "@radix-ui/react-icons" : "lucide-react",
-  ]
-
-  await execa(
-    packageManager,
-    [packageManager === "npm" ? "install" : "add", ...deps],
-    {
-      cwd,
-    }
-  )
-  dependenciesSpinner?.succeed()
-}
diff --git a/packages/cli/src/deprecated.ts b/packages/cli/src/deprecated.ts
deleted file mode 100644
index e143fb3e07f..00000000000
--- a/packages/cli/src/deprecated.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import chalk from "chalk"
-
-export const DEPRECATED_MESSAGE = chalk.yellow(
-  `\nNote: The shadcn-ui CLI is going to be deprecated soon. Please use ${chalk.bold(
-    "npx shadcn"
-  )} instead.\n`
-)
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
deleted file mode 100644
index 5a3e938d8cf..00000000000
--- a/packages/cli/src/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-#!/usr/bin/env node
-import { add } from "@/src/commands/add"
-import { diff } from "@/src/commands/diff"
-import { init } from "@/src/commands/init"
-import { Command } from "commander"
-
-import { DEPRECATED_MESSAGE } from "./deprecated"
-import { getPackageInfo } from "./utils/get-package-info"
-
-process.on("SIGINT", () => process.exit(0))
-process.on("SIGTERM", () => process.exit(0))
-
-async function main() {
-  const packageInfo = await getPackageInfo()
-
-  const program = new Command()
-    .name("shadcn-ui")
-    .description("add components and dependencies to your project")
-    .addHelpText("after", DEPRECATED_MESSAGE)
-    .version(
-      packageInfo.version || "1.0.0",
-      "-v, --version",
-      "display the version number"
-    )
-
-  program.addCommand(init).addCommand(add).addCommand(diff)
-
-  program.parse()
-}
-
-main()
diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts
deleted file mode 100644
index d8e4dc0faca..00000000000
--- a/packages/cli/src/utils/get-config.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import path from "path"
-import { resolveImport } from "@/src/utils/resolve-import"
-import { cosmiconfig } from "cosmiconfig"
-import { loadConfig } from "tsconfig-paths"
-import { z } from "zod"
-
-export const DEFAULT_STYLE = "default"
-export const DEFAULT_COMPONENTS = "@/components"
-export const DEFAULT_UTILS = "@/lib/utils"
-export const DEFAULT_TAILWIND_CSS = "app/globals.css"
-export const DEFAULT_TAILWIND_CONFIG = "tailwind.config.js"
-export const DEFAULT_TAILWIND_BASE_COLOR = "slate"
-
-// TODO: Figure out if we want to support all cosmiconfig formats.
-// A simple components.json file would be nice.
-const explorer = cosmiconfig("components", {
-  searchPlaces: ["components.json"],
-})
-
-export const rawConfigSchema = z
-  .object({
-    $schema: z.string().optional(),
-    style: z.string(),
-    rsc: z.coerce.boolean().default(false),
-    tsx: z.coerce.boolean().default(true),
-    tailwind: z.object({
-      config: z.string(),
-      css: z.string(),
-      baseColor: z.string(),
-      cssVariables: z.boolean().default(true),
-      prefix: z.string().default("").optional(),
-    }),
-    aliases: z.object({
-      components: z.string(),
-      utils: z.string(),
-      ui: z.string().optional(),
-    }),
-  })
-  .strict()
-
-export type RawConfig = z.infer<typeof rawConfigSchema>
-
-export const configSchema = rawConfigSchema.extend({
-  resolvedPaths: z.object({
-    tailwindConfig: z.string(),
-    tailwindCss: z.string(),
-    utils: z.string(),
-    components: z.string(),
-    ui: z.string(),
-  }),
-})
-
-export type Config = z.infer<typeof configSchema>
-
-export async function getConfig(cwd: string) {
-  const config = await getRawConfig(cwd)
-
-  if (!config) {
-    return null
-  }
-
-  return await resolveConfigPaths(cwd, config)
-}
-
-export async function resolveConfigPaths(cwd: string, config: RawConfig) {
-  // Read tsconfig.json.
-  const tsConfig = await loadConfig(cwd)
-
-  if (tsConfig.resultType === "failed") {
-    throw new Error(
-      `Failed to load ${config.tsx ? "tsconfig" : "jsconfig"}.json. ${
-        tsConfig.message ?? ""
-      }`.trim()
-    )
-  }
-
-  return configSchema.parse({
-    ...config,
-    resolvedPaths: {
-      tailwindConfig: path.resolve(cwd, config.tailwind.config),
-      tailwindCss: path.resolve(cwd, config.tailwind.css),
-      utils: await resolveImport(config.aliases["utils"], tsConfig),
-      components: await resolveImport(config.aliases["components"], tsConfig),
-      ui: config.aliases["ui"]
-        ? await resolveImport(config.aliases["ui"], tsConfig)
-        : await resolveImport(config.aliases["components"], tsConfig),
-    },
-  })
-}
-
-export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
-  try {
-    const configResult = await explorer.search(cwd)
-
-    if (!configResult) {
-      return null
-    }
-
-    return rawConfigSchema.parse(configResult.config)
-  } catch (error) {
-    throw new Error(`Invalid configuration found in ${cwd}/components.json.`)
-  }
-}
diff --git a/packages/cli/src/utils/get-package-info.ts b/packages/cli/src/utils/get-package-info.ts
deleted file mode 100644
index c7f4961927e..00000000000
--- a/packages/cli/src/utils/get-package-info.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import path from "path"
-import fs from "fs-extra"
-import { type PackageJson } from "type-fest"
-
-export function getPackageInfo() {
-  const packageJsonPath = path.join("package.json")
-
-  return fs.readJSONSync(packageJsonPath) as PackageJson
-}
diff --git a/packages/cli/src/utils/get-package-manager.ts b/packages/cli/src/utils/get-package-manager.ts
deleted file mode 100644
index 91efb416eed..00000000000
--- a/packages/cli/src/utils/get-package-manager.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { detect } from "@antfu/ni"
-
-export async function getPackageManager(
-  targetDir: string
-): Promise<"yarn" | "pnpm" | "bun" | "npm"> {
-  const packageManager = await detect({ programmatic: true, cwd: targetDir })
-
-  if (packageManager === "yarn@berry") return "yarn"
-  if (packageManager === "pnpm@6") return "pnpm"
-  if (packageManager === "bun") return "bun"
-
-  return packageManager ?? "npm"
-}
diff --git a/packages/cli/src/utils/get-project-info.ts b/packages/cli/src/utils/get-project-info.ts
deleted file mode 100644
index 23fd3d14636..00000000000
--- a/packages/cli/src/utils/get-project-info.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import { existsSync } from "fs"
-import path from "path"
-import {
-  Config,
-  RawConfig,
-  getConfig,
-  resolveConfigPaths,
-} from "@/src/utils/get-config"
-import fg from "fast-glob"
-import fs, { pathExists } from "fs-extra"
-import { loadConfig } from "tsconfig-paths"
-
-// TODO: Add support for more frameworks.
-// We'll start with Next.js for now.
-const PROJECT_TYPES = [
-  "next-app",
-  "next-app-src",
-  "next-pages",
-  "next-pages-src",
-] as const
-
-type ProjectType = (typeof PROJECT_TYPES)[number]
-
-const PROJECT_SHARED_IGNORE = [
-  "**/node_modules/**",
-  ".next",
-  "public",
-  "dist",
-  "build",
-]
-
-export async function getProjectInfo() {
-  const info = {
-    tsconfig: null,
-    srcDir: false,
-    appDir: false,
-    srcComponentsUiDir: false,
-    componentsUiDir: false,
-  }
-
-  try {
-    const tsconfig = await getTsConfig()
-
-    return {
-      tsconfig,
-      srcDir: existsSync(path.resolve("./src")),
-      appDir:
-        existsSync(path.resolve("./app")) ||
-        existsSync(path.resolve("./src/app")),
-      srcComponentsUiDir: existsSync(path.resolve("./src/components/ui")),
-      componentsUiDir: existsSync(path.resolve("./components/ui")),
-    }
-  } catch (error) {
-    return info
-  }
-}
-
-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")
-    }
-
-    return tsconfig
-  } catch (error) {
-    return null
-  }
-}
-
-export async function getProjectConfig(cwd: string): Promise<Config | null> {
-  // Check for existing component config.
-  const existingConfig = await getConfig(cwd)
-  if (existingConfig) {
-    return existingConfig
-  }
-
-  const projectType = await getProjectType(cwd)
-  const tailwindCssFile = await getTailwindCssFile(cwd)
-  const tsConfigAliasPrefix = await getTsConfigAliasPrefix(cwd)
-
-  if (!projectType || !tailwindCssFile || !tsConfigAliasPrefix) {
-    return null
-  }
-
-  const isTsx = await isTypeScriptProject(cwd)
-
-  const config: RawConfig = {
-    $schema: "https://ui.shadcn.com/schema.json",
-    rsc: ["next-app", "next-app-src"].includes(projectType),
-    tsx: isTsx,
-    style: "new-york",
-    tailwind: {
-      config: isTsx ? "tailwind.config.ts" : "tailwind.config.js",
-      baseColor: "zinc",
-      css: tailwindCssFile,
-      cssVariables: true,
-      prefix: "",
-    },
-    aliases: {
-      utils: `${tsConfigAliasPrefix}/lib/utils`,
-      components: `${tsConfigAliasPrefix}/components`,
-    },
-  }
-
-  return await resolveConfigPaths(cwd, config)
-}
-
-export async function getProjectType(cwd: string): Promise<ProjectType | null> {
-  const files = await fg.glob("**/*", {
-    cwd,
-    deep: 3,
-    ignore: PROJECT_SHARED_IGNORE,
-  })
-
-  const isNextProject = files.find((file) => file.startsWith("next.config."))
-  if (!isNextProject) {
-    return null
-  }
-
-  const isUsingSrcDir = await fs.pathExists(path.resolve(cwd, "src"))
-  const isUsingAppDir = await fs.pathExists(
-    path.resolve(cwd, `${isUsingSrcDir ? "src/" : ""}app`)
-  )
-
-  if (isUsingAppDir) {
-    return isUsingSrcDir ? "next-app-src" : "next-app"
-  }
-
-  return isUsingSrcDir ? "next-pages-src" : "next-pages"
-}
-
-export async function getTailwindCssFile(cwd: string) {
-  const files = await fg.glob(["**/*.css", "**/*.scss"], {
-    cwd,
-    deep: 3,
-    ignore: PROJECT_SHARED_IGNORE,
-  })
-
-  if (!files.length) {
-    return null
-  }
-
-  for (const file of files) {
-    const contents = await fs.readFile(path.resolve(cwd, file), "utf8")
-    // Assume that if the file contains `@tailwind base` it's the main css file.
-    if (contents.includes("@tailwind base")) {
-      return file
-    }
-  }
-
-  return null
-}
-
-export async function getTsConfigAliasPrefix(cwd: string) {
-  const tsConfig = await loadConfig(cwd)
-
-  if (tsConfig?.resultType === "failed" || !tsConfig?.paths) {
-    return null
-  }
-
-  // This assume that the first alias is the prefix.
-  for (const [alias, paths] of Object.entries(tsConfig.paths)) {
-    if (paths.includes("./*") || paths.includes("./src/*")) {
-      return alias.at(0)
-    }
-  }
-
-  return null
-}
-
-export async function isTypeScriptProject(cwd: string) {
-  // Check if cwd has a tsconfig.json file.
-  return pathExists(path.resolve(cwd, "tsconfig.json"))
-}
-
-export async function preFlight(cwd: string) {
-  // We need Tailwind CSS to be configured.
-  const tailwindConfig = await fg.glob("tailwind.config.*", {
-    cwd,
-    deep: 3,
-    ignore: PROJECT_SHARED_IGNORE,
-  })
-
-  if (!tailwindConfig.length) {
-    throw new Error(
-      "Tailwind CSS is not installed. Visit https://tailwindcss.com/docs/installation to get started."
-    )
-  }
-
-  return true
-}
diff --git a/packages/cli/src/utils/handle-error.ts b/packages/cli/src/utils/handle-error.ts
deleted file mode 100644
index 3e3666362fb..00000000000
--- a/packages/cli/src/utils/handle-error.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { logger } from "@/src/utils/logger"
-
-export function handleError(error: unknown) {
-  if (typeof error === "string") {
-    logger.error(error)
-    process.exit(1)
-  }
-
-  if (error instanceof Error) {
-    logger.error(error.message)
-    process.exit(1)
-  }
-
-  logger.error("Something went wrong. Please try again.")
-  process.exit(1)
-}
diff --git a/packages/cli/src/utils/logger.ts b/packages/cli/src/utils/logger.ts
deleted file mode 100644
index a18b7b5db80..00000000000
--- a/packages/cli/src/utils/logger.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import chalk from "chalk"
-
-export const logger = {
-  error(...args: unknown[]) {
-    console.log(chalk.red(...args))
-  },
-  warn(...args: unknown[]) {
-    console.log(chalk.yellow(...args))
-  },
-  info(...args: unknown[]) {
-    console.log(chalk.cyan(...args))
-  },
-  success(...args: unknown[]) {
-    console.log(chalk.green(...args))
-  },
-  break() {
-    console.log("")
-  },
-}
diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts
deleted file mode 100644
index 29395e2b5c2..00000000000
--- a/packages/cli/src/utils/registry/index.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import path from "path"
-import { Config } from "@/src/utils/get-config"
-import {
-  registryBaseColorSchema,
-  registryIndexSchema,
-  registryItemWithContentSchema,
-  registryWithContentSchema,
-  stylesSchema,
-} from "@/src/utils/registry/schema"
-import { HttpsProxyAgent } from "https-proxy-agent"
-import fetch from "node-fetch"
-import { z } from "zod"
-
-const baseUrl = process.env.COMPONENTS_REGISTRY_URL ?? "https://ui.shadcn.com"
-const agent = process.env.https_proxy
-  ? new HttpsProxyAgent(process.env.https_proxy)
-  : undefined
-
-export async function getRegistryIndex() {
-  try {
-    const [result] = await fetchRegistry(["index.json"])
-
-    return registryIndexSchema.parse(result)
-  } catch (error) {
-    throw new Error(`Failed to fetch components from registry.`)
-  }
-}
-
-export async function getRegistryStyles() {
-  try {
-    const [result] = await fetchRegistry(["styles/index.json"])
-
-    return stylesSchema.parse(result)
-  } catch (error) {
-    throw new Error(`Failed to fetch styles from registry.`)
-  }
-}
-
-export async function getRegistryBaseColors() {
-  return [
-    {
-      name: "slate",
-      label: "Slate",
-    },
-    {
-      name: "gray",
-      label: "Gray",
-    },
-    {
-      name: "zinc",
-      label: "Zinc",
-    },
-    {
-      name: "neutral",
-      label: "Neutral",
-    },
-    {
-      name: "stone",
-      label: "Stone",
-    },
-  ]
-}
-
-export async function getRegistryBaseColor(baseColor: string) {
-  try {
-    const [result] = await fetchRegistry([`colors/${baseColor}.json`])
-
-    return registryBaseColorSchema.parse(result)
-  } catch (error) {
-    throw new Error(`Failed to fetch base color from registry.`)
-  }
-}
-
-export async function resolveTree(
-  index: z.infer<typeof registryIndexSchema>,
-  names: string[]
-) {
-  const tree: z.infer<typeof registryIndexSchema> = []
-
-  for (const name of names) {
-    const entry = index.find((entry) => entry.name === name)
-
-    if (!entry) {
-      continue
-    }
-
-    tree.push(entry)
-
-    if (entry.registryDependencies) {
-      const dependencies = await resolveTree(index, entry.registryDependencies)
-      tree.push(...dependencies)
-    }
-  }
-
-  return tree.filter(
-    (component, index, self) =>
-      self.findIndex((c) => c.name === component.name) === index
-  )
-}
-
-export async function fetchTree(
-  style: string,
-  tree: z.infer<typeof registryIndexSchema>
-) {
-  try {
-    const paths = tree.map((item) => `styles/${style}/${item.name}.json`)
-    const result = await fetchRegistry(paths)
-
-    return registryWithContentSchema.parse(result)
-  } catch (error) {
-    throw new Error(`Failed to fetch tree from registry.`)
-  }
-}
-
-export async function getItemTargetPath(
-  config: Config,
-  item: Pick<z.infer<typeof registryItemWithContentSchema>, "type">,
-  override?: string
-) {
-  if (override) {
-    return override
-  }
-
-  if (item.type === "components:ui" && config.aliases.ui) {
-    return config.resolvedPaths.ui
-  }
-
-  const [parent, type] = item.type.split(":")
-  if (!(parent in config.resolvedPaths)) {
-    return null
-  }
-
-  return path.join(
-    config.resolvedPaths[parent as keyof typeof config.resolvedPaths],
-    type
-  )
-}
-
-async function fetchRegistry(paths: string[]) {
-  try {
-    const results = await Promise.all(
-      paths.map(async (path) => {
-        const response = await fetch(`${baseUrl}/registry/${path}`, {
-          agent,
-        })
-        return await response.json()
-      })
-    )
-
-    return results
-  } catch (error) {
-    console.log(error)
-    throw new Error(`Failed to fetch registry from ${baseUrl}.`)
-  }
-}
diff --git a/packages/cli/src/utils/registry/schema.ts b/packages/cli/src/utils/registry/schema.ts
deleted file mode 100644
index b227590e11d..00000000000
--- a/packages/cli/src/utils/registry/schema.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { z } from "zod"
-
-// TODO: Extract this to a shared package.
-export const registryItemSchema = z.object({
-  name: z.string(),
-  dependencies: z.array(z.string()).optional(),
-  devDependencies: z.array(z.string()).optional(),
-  registryDependencies: z.array(z.string()).optional(),
-  files: z.array(z.string()),
-  type: z.enum(["components:ui", "components:component", "components:example"]),
-})
-
-export const registryIndexSchema = z.array(registryItemSchema)
-
-export const registryItemWithContentSchema = registryItemSchema.extend({
-  files: z.array(
-    z.object({
-      name: z.string(),
-      content: z.string(),
-    })
-  ),
-})
-
-export const registryWithContentSchema = z.array(registryItemWithContentSchema)
-
-export const stylesSchema = z.array(
-  z.object({
-    name: z.string(),
-    label: z.string(),
-  })
-)
-
-export const registryBaseColorSchema = z.object({
-  inlineColors: z.object({
-    light: z.record(z.string(), z.string()),
-    dark: z.record(z.string(), z.string()),
-  }),
-  cssVars: z.object({
-    light: z.record(z.string(), z.string()),
-    dark: z.record(z.string(), z.string()),
-  }),
-  inlineColorsTemplate: z.string(),
-  cssVarsTemplate: z.string(),
-})
diff --git a/packages/cli/src/utils/resolve-import.ts b/packages/cli/src/utils/resolve-import.ts
deleted file mode 100644
index 0f029844b8f..00000000000
--- a/packages/cli/src/utils/resolve-import.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createMatchPath, type ConfigLoaderSuccessResult } from "tsconfig-paths"
-
-export async function resolveImport(
-  importPath: string,
-  config: Pick<ConfigLoaderSuccessResult, "absoluteBaseUrl" | "paths">
-) {
-  return createMatchPath(config.absoluteBaseUrl, config.paths)(
-    importPath,
-    undefined,
-    () => true,
-    [".ts", ".tsx"]
-  )
-}
diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts
deleted file mode 100644
index f602416b4d3..00000000000
--- a/packages/cli/src/utils/templates.ts
+++ /dev/null
@@ -1,253 +0,0 @@
-export const UTILS = `import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-`
-
-export const UTILS_JS = `import { clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs) {
-  return twMerge(clsx(inputs))
-}
-`
-
-export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ["class"],
-  content: [
-    './pages/**/*.{<%- extension %>,<%- extension %>x}',
-    './components/**/*.{<%- extension %>,<%- extension %>x}',
-    './app/**/*.{<%- extension %>,<%- extension %>x}',
-    './src/**/*.{<%- extension %>,<%- extension %>x}',
-  ],
-  prefix: "<%- prefix %>",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      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")],
-}`
-
-export const TAILWIND_CONFIG_WITH_VARIABLES = `/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ["class"],
-  content: [
-    './pages/**/*.{<%- extension %>,<%- extension %>x}',
-    './components/**/*.{<%- extension %>,<%- extension %>x}',
-    './app/**/*.{<%- extension %>,<%- extension %>x}',
-    './src/**/*.{<%- extension %>,<%- extension %>x}',
-  ],
-  prefix: "<%- prefix %>",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      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")],
-}`
-
-export const TAILWIND_CONFIG_TS = `import type { Config } from "tailwindcss"
-
-const config = {
-  darkMode: ["class"],
-  content: [
-    './pages/**/*.{<%- extension %>,<%- extension %>x}',
-    './components/**/*.{<%- extension %>,<%- extension %>x}',
-    './app/**/*.{<%- extension %>,<%- extension %>x}',
-    './src/**/*.{<%- extension %>,<%- extension %>x}',
-  ],
-  prefix: "<%- prefix %>",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      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")],
-} satisfies Config
-
-export default config`
-
-export const TAILWIND_CONFIG_TS_WITH_VARIABLES = `import type { Config } from "tailwindcss"
-
-const config = {
-  darkMode: ["class"],
-  content: [
-    './pages/**/*.{<%- extension %>,<%- extension %>x}',
-    './components/**/*.{<%- extension %>,<%- extension %>x}',
-    './app/**/*.{<%- extension %>,<%- extension %>x}',
-    './src/**/*.{<%- extension %>,<%- extension %>x}',
-	],
-  prefix: "<%- prefix %>",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      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")],
-} satisfies Config
-
-export default config`
diff --git a/packages/cli/src/utils/transformers/index.ts b/packages/cli/src/utils/transformers/index.ts
deleted file mode 100644
index 88cdb3f3a45..00000000000
--- a/packages/cli/src/utils/transformers/index.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { promises as fs } from "fs"
-import { tmpdir } from "os"
-import path from "path"
-import { Config } from "@/src/utils/get-config"
-import { registryBaseColorSchema } from "@/src/utils/registry/schema"
-import { transformCssVars } from "@/src/utils/transformers/transform-css-vars"
-import { transformImport } from "@/src/utils/transformers/transform-import"
-import { transformJsx } from "@/src/utils/transformers/transform-jsx"
-import { transformRsc } from "@/src/utils/transformers/transform-rsc"
-import { Project, ScriptKind, type SourceFile } from "ts-morph"
-import { z } from "zod"
-
-import { transformTwPrefixes } from "./transform-tw-prefix"
-
-export type TransformOpts = {
-  filename: string
-  raw: string
-  config: Config
-  baseColor?: z.infer<typeof registryBaseColorSchema>
-}
-
-export type Transformer<Output = SourceFile> = (
-  opts: TransformOpts & {
-    sourceFile: SourceFile
-  }
-) => Promise<Output>
-
-const transformers: Transformer[] = [
-  transformImport,
-  transformRsc,
-  transformCssVars,
-  transformTwPrefixes,
-]
-
-const project = new Project({
-  compilerOptions: {},
-})
-
-async function createTempSourceFile(filename: string) {
-  const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-"))
-  return path.join(dir, filename)
-}
-
-export async function transform(opts: TransformOpts) {
-  const tempFile = await createTempSourceFile(opts.filename)
-  const sourceFile = project.createSourceFile(tempFile, opts.raw, {
-    scriptKind: ScriptKind.TSX,
-  })
-
-  for (const transformer of transformers) {
-    transformer({ sourceFile, ...opts })
-  }
-
-  return await transformJsx({
-    sourceFile,
-    ...opts,
-  })
-}
diff --git a/packages/cli/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts
deleted file mode 100644
index 95cf973d1da..00000000000
--- a/packages/cli/src/utils/transformers/transform-css-vars.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import { registryBaseColorSchema } from "@/src/utils/registry/schema"
-import { Transformer } from "@/src/utils/transformers"
-import { ScriptKind, SyntaxKind } from "ts-morph"
-import { z } from "zod"
-
-export const transformCssVars: Transformer = async ({
-  sourceFile,
-  config,
-  baseColor,
-}) => {
-  // No transform if using css variables.
-  if (config.tailwind?.cssVariables || !baseColor?.inlineColors) {
-    return sourceFile
-  }
-
-  // Find jsx attributes with the name className.
-  // const openingElements = sourceFile.getDescendantsOfKind(SyntaxKind.JsxElement)
-  // console.log(openingElements)
-  // const jsxAttributes = sourceFile
-  //   .getDescendantsOfKind(SyntaxKind.JsxAttribute)
-  //   .filter((node) => node.getName() === "className")
-
-  // for (const jsxAttribute of jsxAttributes) {
-  //   const value = jsxAttribute.getInitializer()?.getText()
-  //   if (value) {
-  //     const valueWithColorMapping = applyColorMapping(
-  //       value.replace(/"/g, ""),
-  //       baseColor.inlineColors
-  //     )
-  //     jsxAttribute.setInitializer(`"${valueWithColorMapping}"`)
-  //   }
-  // }
-  sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => {
-    const value = node.getText()
-    if (value) {
-      const valueWithColorMapping = applyColorMapping(
-        value.replace(/"/g, ""),
-        baseColor.inlineColors
-      )
-      node.replaceWithText(`"${valueWithColorMapping.trim()}"`)
-    }
-  })
-
-  return sourceFile
-}
-
-// export default function transformer(file: FileInfo, api: API) {
-//   const j = api.jscodeshift.withParser("tsx")
-
-//   // Replace bg-background with "bg-white dark:bg-slate-950"
-//   const $j = j(file.source)
-//   return $j
-//     .find(j.JSXAttribute, {
-//       name: {
-//         name: "className",
-//       },
-//     })
-//     .forEach((path) => {
-//       const { node } = path
-//       if (node?.value?.type) {
-//         if (node.value.type === "StringLiteral") {
-//           node.value.value = applyColorMapping(node.value.value)
-//           console.log(node.value.value)
-//         }
-
-//         if (
-//           node.value.type === "JSXExpressionContainer" &&
-//           node.value.expression.type === "CallExpression"
-//         ) {
-//           const callee = node.value.expression.callee
-//           if (callee.type === "Identifier" && callee.name === "cn") {
-//             node.value.expression.arguments.forEach((arg) => {
-//               if (arg.type === "StringLiteral") {
-//                 arg.value = applyColorMapping(arg.value)
-//               }
-
-//               if (
-//                 arg.type === "LogicalExpression" &&
-//                 arg.right.type === "StringLiteral"
-//               ) {
-//                 arg.right.value = applyColorMapping(arg.right.value)
-//               }
-//             })
-//           }
-//         }
-//       }
-//     })
-//     .toSource()
-// }
-
-// // export function splitClassName(input: string): (string | null)[] {
-// //   const parts = input.split(":")
-// //   const classNames = parts.map((part) => {
-// //     const match = part.match(/^\[?(.+)\]$/)
-// //     if (match) {
-// //       return match[1]
-// //     } else {
-// //       return null
-// //     }
-// //   })
-
-// //   return classNames
-// // }
-
-// Splits a className into variant-name-alpha.
-// eg. hover:bg-primary-100 -> [hover, bg-primary, 100]
-export function splitClassName(className: string): (string | null)[] {
-  if (!className.includes("/") && !className.includes(":")) {
-    return [null, className, null]
-  }
-
-  const parts: (string | null)[] = []
-  // First we split to find the alpha.
-  let [rest, alpha] = className.split("/")
-
-  // Check if rest has a colon.
-  if (!rest.includes(":")) {
-    return [null, rest, alpha]
-  }
-
-  // Next we split the rest by the colon.
-  const split = rest.split(":")
-
-  // We take the last item from the split as the name.
-  const name = split.pop()
-
-  // We glue back the rest of the split.
-  const variant = split.join(":")
-
-  // Finally we push the variant, name and alpha.
-  parts.push(variant ?? null, name ?? null, alpha ?? null)
-
-  return parts
-}
-
-const PREFIXES = ["bg-", "text-", "border-", "ring-offset-", "ring-"]
-
-export function applyColorMapping(
-  input: string,
-  mapping: z.infer<typeof registryBaseColorSchema>["inlineColors"]
-) {
-  // Handle border classes.
-  if (input.includes(" border ")) {
-    input = input.replace(" border ", " border border-border ")
-  }
-
-  // Build color mappings.
-  const classNames = input.split(" ")
-  const lightMode = new Set<string>()
-  const darkMode = new Set<string>()
-  for (let className of classNames) {
-    const [variant, value, modifier] = splitClassName(className)
-    const prefix = PREFIXES.find((prefix) => value?.startsWith(prefix))
-    if (!prefix) {
-      if (!lightMode.has(className)) {
-        lightMode.add(className)
-      }
-      continue
-    }
-
-    const needle = value?.replace(prefix, "")
-    if (needle && needle in mapping.light) {
-      lightMode.add(
-        [variant, `${prefix}${mapping.light[needle]}`]
-          .filter(Boolean)
-          .join(":") + (modifier ? `/${modifier}` : "")
-      )
-
-      darkMode.add(
-        ["dark", variant, `${prefix}${mapping.dark[needle]}`]
-          .filter(Boolean)
-          .join(":") + (modifier ? `/${modifier}` : "")
-      )
-      continue
-    }
-
-    if (!lightMode.has(className)) {
-      lightMode.add(className)
-    }
-  }
-
-  return [...Array.from(lightMode), ...Array.from(darkMode)].join(" ").trim()
-}
diff --git a/packages/cli/src/utils/transformers/transform-import.ts b/packages/cli/src/utils/transformers/transform-import.ts
deleted file mode 100644
index 0b912001ea1..00000000000
--- a/packages/cli/src/utils/transformers/transform-import.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Transformer } from "@/src/utils/transformers"
-
-export const transformImport: Transformer = async ({ sourceFile, config }) => {
-  const importDeclarations = sourceFile.getImportDeclarations()
-
-  for (const importDeclaration of importDeclarations) {
-    const moduleSpecifier = importDeclaration.getModuleSpecifierValue()
-
-    // Replace @/registry/[style] with the components alias.
-    if (moduleSpecifier.startsWith("@/registry/")) {
-      if (config.aliases.ui) {
-        importDeclaration.setModuleSpecifier(
-          moduleSpecifier.replace(/^@\/registry\/[^/]+\/ui/, config.aliases.ui)
-        )
-      } else {
-        importDeclaration.setModuleSpecifier(
-          moduleSpecifier.replace(
-            /^@\/registry\/[^/]+/,
-            config.aliases.components
-          )
-        )
-      }
-    }
-
-    // Replace `import { cn } from "@/lib/utils"`
-    if (moduleSpecifier == "@/lib/utils") {
-      const namedImports = importDeclaration.getNamedImports()
-      const cnImport = namedImports.find((i) => i.getName() === "cn")
-      if (cnImport) {
-        importDeclaration.setModuleSpecifier(
-          moduleSpecifier.replace(/^@\/lib\/utils/, config.aliases.utils)
-        )
-      }
-    }
-  }
-
-  return sourceFile
-}
diff --git a/packages/cli/src/utils/transformers/transform-jsx.ts b/packages/cli/src/utils/transformers/transform-jsx.ts
deleted file mode 100644
index 81f6bb597de..00000000000
--- a/packages/cli/src/utils/transformers/transform-jsx.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { type Transformer } from "@/src/utils/transformers"
-import { transformFromAstSync } from "@babel/core"
-import { ParserOptions, parse } from "@babel/parser"
-// @ts-ignore
-import transformTypescript from "@babel/plugin-transform-typescript"
-import * as recast from "recast"
-
-// TODO.
-// I'm using recast for the AST here.
-// Figure out if ts-morph AST is compatible with Babel.
-
-// This is a copy of the babel options from recast/parser.
-// The goal here is to tolerate as much syntax as possible.
-// We want to be able to parse any valid tsx code.
-// See https://github.com/benjamn/recast/blob/master/parsers/_babel_options.ts.
-const PARSE_OPTIONS: ParserOptions = {
-  sourceType: "module",
-  allowImportExportEverywhere: true,
-  allowReturnOutsideFunction: true,
-  startLine: 1,
-  tokens: true,
-  plugins: [
-    "asyncGenerators",
-    "bigInt",
-    "classPrivateMethods",
-    "classPrivateProperties",
-    "classProperties",
-    "classStaticBlock",
-    "decimal",
-    "decorators-legacy",
-    "doExpressions",
-    "dynamicImport",
-    "exportDefaultFrom",
-    "exportNamespaceFrom",
-    "functionBind",
-    "functionSent",
-    "importAssertions",
-    "importMeta",
-    "nullishCoalescingOperator",
-    "numericSeparator",
-    "objectRestSpread",
-    "optionalCatchBinding",
-    "optionalChaining",
-    [
-      "pipelineOperator",
-      {
-        proposal: "minimal",
-      },
-    ],
-    [
-      "recordAndTuple",
-      {
-        syntaxType: "hash",
-      },
-    ],
-    "throwExpressions",
-    "topLevelAwait",
-    "v8intrinsic",
-    "typescript",
-    "jsx",
-  ],
-}
-
-export const transformJsx: Transformer<String> = async ({
-  sourceFile,
-  config,
-}) => {
-  const output = sourceFile.getFullText()
-
-  if (config.tsx) {
-    return output
-  }
-
-  const ast = recast.parse(output, {
-    parser: {
-      parse: (code: string) => {
-        return parse(code, PARSE_OPTIONS)
-      },
-    },
-  })
-
-  const result = transformFromAstSync(ast, output, {
-    cloneInputAst: false,
-    code: false,
-    ast: true,
-    plugins: [transformTypescript],
-    configFile: false,
-  })
-
-  if (!result || !result.ast) {
-    throw new Error("Failed to transform JSX")
-  }
-
-  return recast.print(result.ast).code
-}
diff --git a/packages/cli/src/utils/transformers/transform-rsc.ts b/packages/cli/src/utils/transformers/transform-rsc.ts
deleted file mode 100644
index b7d24a0709e..00000000000
--- a/packages/cli/src/utils/transformers/transform-rsc.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Transformer } from "@/src/utils/transformers"
-import { SyntaxKind } from "ts-morph"
-
-export const transformRsc: Transformer = async ({ sourceFile, config }) => {
-  if (config.rsc) {
-    return sourceFile
-  }
-
-  // Remove "use client" from the top of the file.
-  const first = sourceFile.getFirstChildByKind(SyntaxKind.ExpressionStatement)
-  if (first?.getText() === `"use client"`) {
-    first.remove()
-  }
-
-  return sourceFile
-}
diff --git a/packages/cli/src/utils/transformers/transform-tw-prefix.ts b/packages/cli/src/utils/transformers/transform-tw-prefix.ts
deleted file mode 100644
index 1fed9a883fe..00000000000
--- a/packages/cli/src/utils/transformers/transform-tw-prefix.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import { Transformer } from "@/src/utils/transformers"
-import { SyntaxKind } from "ts-morph"
-
-import { splitClassName } from "./transform-css-vars"
-
-export const transformTwPrefixes: Transformer = async ({
-  sourceFile,
-  config,
-}) => {
-  if (!config.tailwind?.prefix) {
-    return sourceFile
-  }
-
-  // Find the cva function calls.
-  sourceFile
-    .getDescendantsOfKind(SyntaxKind.CallExpression)
-    .filter((node) => node.getExpression().getText() === "cva")
-    .forEach((node) => {
-      // cva(base, ...)
-      if (node.getArguments()[0]?.isKind(SyntaxKind.StringLiteral)) {
-        const defaultClassNames = node.getArguments()[0]
-        if (defaultClassNames) {
-          defaultClassNames.replaceWithText(
-            `"${applyPrefix(
-              defaultClassNames.getText()?.replace(/"/g, ""),
-              config.tailwind.prefix
-            )}"`
-          )
-        }
-      }
-
-      // cva(..., { variants: { ... } })
-      if (node.getArguments()[1]?.isKind(SyntaxKind.ObjectLiteralExpression)) {
-        node
-          .getArguments()[1]
-          ?.getDescendantsOfKind(SyntaxKind.PropertyAssignment)
-          .find((node) => node.getName() === "variants")
-          ?.getDescendantsOfKind(SyntaxKind.PropertyAssignment)
-          .forEach((node) => {
-            node
-              .getDescendantsOfKind(SyntaxKind.PropertyAssignment)
-              .forEach((node) => {
-                const classNames = node.getInitializerIfKind(
-                  SyntaxKind.StringLiteral
-                )
-                if (classNames) {
-                  classNames?.replaceWithText(
-                    `"${applyPrefix(
-                      classNames.getText()?.replace(/"/g, ""),
-                      config.tailwind.prefix
-                    )}"`
-                  )
-                }
-              })
-          })
-      }
-    })
-
-  // Find all jsx attributes with the name className.
-  sourceFile.getDescendantsOfKind(SyntaxKind.JsxAttribute).forEach((node) => {
-    if (node.getName() === "className") {
-      // className="..."
-      if (node.getInitializer()?.isKind(SyntaxKind.StringLiteral)) {
-        const value = node.getInitializer()
-        if (value) {
-          value.replaceWithText(
-            `"${applyPrefix(
-              value.getText()?.replace(/"/g, ""),
-              config.tailwind.prefix
-            )}"`
-          )
-        }
-      }
-
-      // className={...}
-      if (node.getInitializer()?.isKind(SyntaxKind.JsxExpression)) {
-        // Check if it's a call to cn().
-        const callExpression = node
-          .getInitializer()
-          ?.getDescendantsOfKind(SyntaxKind.CallExpression)
-          .find((node) => node.getExpression().getText() === "cn")
-        if (callExpression) {
-          // Loop through the arguments.
-          callExpression.getArguments().forEach((node) => {
-            if (
-              node.isKind(SyntaxKind.ConditionalExpression) ||
-              node.isKind(SyntaxKind.BinaryExpression)
-            ) {
-              node
-                .getChildrenOfKind(SyntaxKind.StringLiteral)
-                .forEach((node) => {
-                  node.replaceWithText(
-                    `"${applyPrefix(
-                      node.getText()?.replace(/"/g, ""),
-                      config.tailwind.prefix
-                    )}"`
-                  )
-                })
-            }
-
-            if (node.isKind(SyntaxKind.StringLiteral)) {
-              node.replaceWithText(
-                `"${applyPrefix(
-                  node.getText()?.replace(/"/g, ""),
-                  config.tailwind.prefix
-                )}"`
-              )
-            }
-          })
-        }
-      }
-    }
-
-    // classNames={...}
-    if (node.getName() === "classNames") {
-      if (node.getInitializer()?.isKind(SyntaxKind.JsxExpression)) {
-        node
-          .getDescendantsOfKind(SyntaxKind.PropertyAssignment)
-          .forEach((node) => {
-            if (node.getInitializer()?.isKind(SyntaxKind.CallExpression)) {
-              const callExpression = node.getInitializerIfKind(
-                SyntaxKind.CallExpression
-              )
-              if (callExpression) {
-                // Loop through the arguments.
-                callExpression.getArguments().forEach((arg) => {
-                  if (arg.isKind(SyntaxKind.ConditionalExpression)) {
-                    arg
-                      .getChildrenOfKind(SyntaxKind.StringLiteral)
-                      .forEach((node) => {
-                        node.replaceWithText(
-                          `"${applyPrefix(
-                            node.getText()?.replace(/"/g, ""),
-                            config.tailwind.prefix
-                          )}"`
-                        )
-                      })
-                  }
-
-                  if (arg.isKind(SyntaxKind.StringLiteral)) {
-                    arg.replaceWithText(
-                      `"${applyPrefix(
-                        arg.getText()?.replace(/"/g, ""),
-                        config.tailwind.prefix
-                      )}"`
-                    )
-                  }
-                })
-              }
-            }
-
-            if (node.getInitializer()?.isKind(SyntaxKind.StringLiteral)) {
-              if (node.getName() !== "variant") {
-                const classNames = node.getInitializer()
-                if (classNames) {
-                  classNames.replaceWithText(
-                    `"${applyPrefix(
-                      classNames.getText()?.replace(/"/g, ""),
-                      config.tailwind.prefix
-                    )}"`
-                  )
-                }
-              }
-            }
-          })
-      }
-    }
-  })
-
-  return sourceFile
-}
-
-export function applyPrefix(input: string, prefix: string = "") {
-  const classNames = input.split(" ")
-  const prefixed: string[] = []
-  for (let className of classNames) {
-    const [variant, value, modifier] = splitClassName(className)
-    if (variant) {
-      modifier
-        ? prefixed.push(`${variant}:${prefix}${value}/${modifier}`)
-        : prefixed.push(`${variant}:${prefix}${value}`)
-    } else {
-      modifier
-        ? prefixed.push(`${prefix}${value}/${modifier}`)
-        : prefixed.push(`${prefix}${value}`)
-    }
-  }
-  return prefixed.join(" ")
-}
-
-export function applyPrefixesCss(css: string, prefix: string) {
-  const lines = css.split("\n")
-  for (let line of lines) {
-    if (line.includes("@apply")) {
-      const originalTWCls = line.replace("@apply", "").trim()
-      const prefixedTwCls = applyPrefix(originalTWCls, prefix)
-      css = css.replace(originalTWCls, prefixedTwCls)
-    }
-  }
-  return css
-}
diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts
deleted file mode 100644
index 8135e8a480f..00000000000
--- a/packages/cli/test/commands/init.test.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-import fs from "fs"
-import path from "path"
-import { execa } from "execa"
-import { afterEach, expect, test, vi } from "vitest"
-
-import { runInit } from "../../src/commands/init"
-import { getConfig } from "../../src/utils/get-config"
-import * as getPackageManger from "../../src/utils/get-package-manager"
-import * as registry from "../../src/utils/registry"
-
-vi.mock("execa")
-vi.mock("fs/promises", () => ({
-  writeFile: vi.fn(),
-  mkdir: vi.fn(),
-}))
-vi.mock("ora")
-
-test("init config-full", async () => {
-  vi.spyOn(getPackageManger, "getPackageManager").mockResolvedValue("pnpm")
-  vi.spyOn(registry, "getRegistryBaseColor").mockResolvedValue({
-    inlineColors: {},
-    cssVars: {},
-    inlineColorsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-    cssVarsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  })
-  const mockMkdir = vi.spyOn(fs.promises, "mkdir").mockResolvedValue(undefined)
-  const mockWriteFile = vi.spyOn(fs.promises, "writeFile").mockResolvedValue()
-
-  const targetDir = path.resolve(__dirname, "../fixtures/config-full")
-  const config = await getConfig(targetDir)
-
-  await runInit(targetDir, config)
-
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/src\/app$/),
-    expect.anything()
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/src\/lib$/),
-    expect.anything()
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/src\/components$/),
-    expect.anything()
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/tailwind.config.ts$/),
-    expect.stringContaining(`import type { Config } from "tailwindcss"`),
-    "utf8"
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/src\/app\/globals.css$/),
-    expect.stringContaining(`@tailwind base`),
-    "utf8"
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/src\/lib\/utils.ts$/),
-    expect.stringContaining(`import { type ClassValue, clsx } from "clsx"`),
-    "utf8"
-  )
-  expect(execa).toHaveBeenCalledWith(
-    "pnpm",
-    [
-      "add",
-      "tailwindcss-animate",
-      "class-variance-authority",
-      "clsx",
-      "tailwind-merge",
-      "@radix-ui/react-icons",
-    ],
-    {
-      cwd: targetDir,
-    }
-  )
-
-  mockMkdir.mockRestore()
-  mockWriteFile.mockRestore()
-})
-
-test("init config-partial", async () => {
-  vi.spyOn(getPackageManger, "getPackageManager").mockResolvedValue("npm")
-  vi.spyOn(registry, "getRegistryBaseColor").mockResolvedValue({
-    inlineColors: {},
-    cssVars: {},
-    inlineColorsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-    cssVarsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  })
-  const mockMkdir = vi.spyOn(fs.promises, "mkdir").mockResolvedValue(undefined)
-  const mockWriteFile = vi.spyOn(fs.promises, "writeFile").mockResolvedValue()
-
-  const targetDir = path.resolve(__dirname, "../fixtures/config-partial")
-  const config = await getConfig(targetDir)
-
-  await runInit(targetDir, config)
-
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/src\/assets\/css$/),
-    expect.anything()
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/lib$/),
-    expect.anything()
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/components$/),
-    expect.anything()
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/tailwind.config.ts$/),
-    expect.stringContaining(`import type { Config } from "tailwindcss"`),
-    "utf8"
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/src\/assets\/css\/tailwind.css$/),
-    expect.stringContaining(`@tailwind base`),
-    "utf8"
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/utils.ts$/),
-    expect.stringContaining(`import { type ClassValue, clsx } from "clsx"`),
-    "utf8"
-  )
-  expect(execa).toHaveBeenCalledWith(
-    "npm",
-    [
-      "install",
-      "tailwindcss-animate",
-      "class-variance-authority",
-      "clsx",
-      "tailwind-merge",
-      "lucide-react",
-    ],
-    {
-      cwd: targetDir,
-    }
-  )
-
-  mockMkdir.mockRestore()
-  mockWriteFile.mockRestore()
-})
-
-afterEach(() => {
-  vi.resetAllMocks()
-})
diff --git a/packages/cli/test/fixtures/colors/neutral.json b/packages/cli/test/fixtures/colors/neutral.json
deleted file mode 100644
index c2488562ac6..00000000000
--- a/packages/cli/test/fixtures/colors/neutral.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "neutral-950",
-      "muted": "neutral-100",
-      "muted-foreground": "neutral-500",
-      "popover": "white",
-      "popover-foreground": "neutral-950",
-      "border": "neutral-200",
-      "input": "neutral-200",
-      "card": "white",
-      "card-foreground": "neutral-950",
-      "primary": "neutral-900",
-      "primary-foreground": "neutral-50",
-      "secondary": "neutral-100",
-      "secondary-foreground": "neutral-900",
-      "accent": "neutral-100",
-      "accent-foreground": "neutral-900",
-      "destructive": "red-500",
-      "destructive-foreground": "neutral-50",
-      "ring": "neutral-400"
-    },
-    "dark": {
-      "background": "neutral-950",
-      "foreground": "neutral-50",
-      "muted": "neutral-800",
-      "muted-foreground": "neutral-400",
-      "popover": "neutral-950",
-      "popover-foreground": "neutral-50",
-      "border": "neutral-800",
-      "input": "neutral-800",
-      "card": "neutral-950",
-      "card-foreground": "neutral-50",
-      "primary": "neutral-50",
-      "primary-foreground": "neutral-900",
-      "secondary": "neutral-800",
-      "secondary-foreground": "neutral-50",
-      "accent": "neutral-800",
-      "accent-foreground": "neutral-50",
-      "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "neutral-800"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "0 0% 3.9%",
-      "muted": "0 0% 96.1%",
-      "muted-foreground": "0 0% 45.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "0 0% 3.9%",
-      "border": "0 0% 89.8%",
-      "input": "0 0% 89.8%",
-      "card": "0 0% 100%",
-      "card-foreground": "0 0% 3.9%",
-      "primary": "0 0% 9%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "0 0% 96.1%",
-      "secondary-foreground": "0 0% 9%",
-      "accent": "0 0% 96.1%",
-      "accent-foreground": "0 0% 9%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "ring": "0 0% 63.9%"
-    },
-    "dark": {
-      "background": "0 0% 3.9%",
-      "foreground": "0 0% 98%",
-      "muted": "0 0% 14.9%",
-      "muted-foreground": "0 0% 63.9%",
-      "popover": "0 0% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "border": "0 0% 14.9%",
-      "input": "0 0% 14.9%",
-      "card": "0 0% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "0 0% 9%",
-      "secondary": "0 0% 14.9%",
-      "secondary-foreground": "0 0% 98%",
-      "accent": "0 0% 14.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "0 0% 14.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n \n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n \n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n \n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n \n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 0 0% 63.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n \n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n \n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 0 0% 14.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
diff --git a/packages/cli/test/fixtures/colors/slate.json b/packages/cli/test/fixtures/colors/slate.json
deleted file mode 100644
index 46469cb783a..00000000000
--- a/packages/cli/test/fixtures/colors/slate.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "slate-950",
-      "muted": "slate-100",
-      "muted-foreground": "slate-500",
-      "popover": "white",
-      "popover-foreground": "slate-950",
-      "border": "slate-200",
-      "input": "slate-200",
-      "card": "white",
-      "card-foreground": "slate-950",
-      "primary": "slate-900",
-      "primary-foreground": "slate-50",
-      "secondary": "slate-100",
-      "secondary-foreground": "slate-900",
-      "accent": "slate-100",
-      "accent-foreground": "slate-900",
-      "destructive": "red-500",
-      "destructive-foreground": "slate-50",
-      "ring": "slate-400"
-    },
-    "dark": {
-      "background": "slate-950",
-      "foreground": "slate-50",
-      "muted": "slate-800",
-      "muted-foreground": "slate-400",
-      "popover": "slate-950",
-      "popover-foreground": "slate-50",
-      "border": "slate-800",
-      "input": "slate-800",
-      "card": "slate-950",
-      "card-foreground": "slate-50",
-      "primary": "slate-50",
-      "primary-foreground": "slate-900",
-      "secondary": "slate-800",
-      "secondary-foreground": "slate-50",
-      "accent": "slate-800",
-      "accent-foreground": "slate-50",
-      "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "slate-800"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "222.2 84% 4.9%",
-      "muted": "210 40% 96.1%",
-      "muted-foreground": "215.4 16.3% 46.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "222.2 84% 4.9%",
-      "border": "214.3 31.8% 91.4%",
-      "input": "214.3 31.8% 91.4%",
-      "card": "0 0% 100%",
-      "card-foreground": "222.2 84% 4.9%",
-      "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 84.2% 60.2%",
-      "destructive-foreground": "210 40% 98%",
-      "ring": "215 20.2% 65.1%"
-    },
-    "dark": {
-      "background": "222.2 84% 4.9%",
-      "foreground": "210 40% 98%",
-      "muted": "217.2 32.6% 17.5%",
-      "muted-foreground": "215 20.2% 65.1%",
-      "popover": "222.2 84% 4.9%",
-      "popover-foreground": "210 40% 98%",
-      "border": "217.2 32.6% 17.5%",
-      "input": "217.2 32.6% 17.5%",
-      "card": "222.2 84% 4.9%",
-      "card-foreground": "210 40% 98%",
-      "primary": "210 40% 98%",
-      "primary-foreground": "222.2 47.4% 11.2%",
-      "secondary": "217.2 32.6% 17.5%",
-      "secondary-foreground": "210 40% 98%",
-      "accent": "217.2 32.6% 17.5%",
-      "accent-foreground": "210 40% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "217.2 32.6% 17.5%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n \n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n \n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n \n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n \n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n \n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n \n    --ring: 215 20.2% 65.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n \n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n \n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n \n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n \n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n \n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n \n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n \n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 217.2 32.6% 17.5%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
diff --git a/packages/cli/test/fixtures/colors/stone.json b/packages/cli/test/fixtures/colors/stone.json
deleted file mode 100644
index 05e92bb5cc3..00000000000
--- a/packages/cli/test/fixtures/colors/stone.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "stone-950",
-      "muted": "stone-100",
-      "muted-foreground": "stone-500",
-      "popover": "white",
-      "popover-foreground": "stone-950",
-      "border": "stone-200",
-      "input": "stone-200",
-      "card": "white",
-      "card-foreground": "stone-950",
-      "primary": "stone-900",
-      "primary-foreground": "stone-50",
-      "secondary": "stone-100",
-      "secondary-foreground": "stone-900",
-      "accent": "stone-100",
-      "accent-foreground": "stone-900",
-      "destructive": "red-500",
-      "destructive-foreground": "stone-50",
-      "ring": "stone-400"
-    },
-    "dark": {
-      "background": "stone-950",
-      "foreground": "stone-50",
-      "muted": "stone-800",
-      "muted-foreground": "stone-400",
-      "popover": "stone-950",
-      "popover-foreground": "stone-50",
-      "border": "stone-800",
-      "input": "stone-800",
-      "card": "stone-950",
-      "card-foreground": "stone-50",
-      "primary": "stone-50",
-      "primary-foreground": "stone-900",
-      "secondary": "stone-800",
-      "secondary-foreground": "stone-50",
-      "accent": "stone-800",
-      "accent-foreground": "stone-50",
-      "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "stone-800"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "20 14.3% 4.1%",
-      "muted": "60 4.8% 95.9%",
-      "muted-foreground": "25 5.3% 44.7%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "20 14.3% 4.1%",
-      "border": "20 5.9% 90%",
-      "input": "20 5.9% 90%",
-      "card": "0 0% 100%",
-      "card-foreground": "20 14.3% 4.1%",
-      "primary": "24 9.8% 10%",
-      "primary-foreground": "60 9.1% 97.8%",
-      "secondary": "60 4.8% 95.9%",
-      "secondary-foreground": "24 9.8% 10%",
-      "accent": "60 4.8% 95.9%",
-      "accent-foreground": "24 9.8% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "ring": "24 5.4% 63.9%"
-    },
-    "dark": {
-      "background": "20 14.3% 4.1%",
-      "foreground": "60 9.1% 97.8%",
-      "muted": "12 6.5% 15.1%",
-      "muted-foreground": "24 5.4% 63.9%",
-      "popover": "20 14.3% 4.1%",
-      "popover-foreground": "60 9.1% 97.8%",
-      "border": "12 6.5% 15.1%",
-      "input": "12 6.5% 15.1%",
-      "card": "20 14.3% 4.1%",
-      "card-foreground": "60 9.1% 97.8%",
-      "primary": "60 9.1% 97.8%",
-      "primary-foreground": "24 9.8% 10%",
-      "secondary": "12 6.5% 15.1%",
-      "secondary-foreground": "60 9.1% 97.8%",
-      "accent": "12 6.5% 15.1%",
-      "accent-foreground": "60 9.1% 97.8%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "12 6.5% 15.1%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n \n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n \n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n \n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n \n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n \n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --ring: 24 5.4% 63.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n \n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n \n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n \n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n \n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n \n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n \n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n \n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 12 6.5% 15.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
diff --git a/packages/cli/test/fixtures/colors/zinc.json b/packages/cli/test/fixtures/colors/zinc.json
deleted file mode 100644
index c26bf0e86fc..00000000000
--- a/packages/cli/test/fixtures/colors/zinc.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "zinc-950",
-      "muted": "zinc-100",
-      "muted-foreground": "zinc-500",
-      "popover": "white",
-      "popover-foreground": "zinc-950",
-      "border": "zinc-200",
-      "input": "zinc-200",
-      "card": "white",
-      "card-foreground": "zinc-950",
-      "primary": "zinc-900",
-      "primary-foreground": "zinc-50",
-      "secondary": "zinc-100",
-      "secondary-foreground": "zinc-900",
-      "accent": "zinc-100",
-      "accent-foreground": "zinc-900",
-      "destructive": "red-500",
-      "destructive-foreground": "zinc-50",
-      "ring": "zinc-400"
-    },
-    "dark": {
-      "background": "zinc-950",
-      "foreground": "zinc-50",
-      "muted": "zinc-800",
-      "muted-foreground": "zinc-400",
-      "popover": "zinc-950",
-      "popover-foreground": "zinc-50",
-      "border": "zinc-800",
-      "input": "zinc-800",
-      "card": "zinc-950",
-      "card-foreground": "zinc-50",
-      "primary": "zinc-50",
-      "primary-foreground": "zinc-900",
-      "secondary": "zinc-800",
-      "secondary-foreground": "zinc-50",
-      "accent": "zinc-800",
-      "accent-foreground": "zinc-50",
-      "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "zinc-800"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "240 10% 3.9%",
-      "muted": "240 4.8% 95.9%",
-      "muted-foreground": "240 3.8% 46.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "240 10% 3.9%",
-      "border": "240 5.9% 90%",
-      "input": "240 5.9% 90%",
-      "card": "0 0% 100%",
-      "card-foreground": "240 10% 3.9%",
-      "primary": "240 5.9% 10%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "240 4.8% 95.9%",
-      "secondary-foreground": "240 5.9% 10%",
-      "accent": "240 4.8% 95.9%",
-      "accent-foreground": "240 5.9% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "ring": "240 5% 64.9%"
-    },
-    "dark": {
-      "background": "240 10% 3.9%",
-      "foreground": "0 0% 98%",
-      "muted": "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      "popover": "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "border": "240 3.7% 15.9%",
-      "input": "240 3.7% 15.9%",
-      "card": "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "240 5.9% 10%",
-      "secondary": "240 3.7% 15.9%",
-      "secondary-foreground": "0 0% 98%",
-      "accent": "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "240 3.7% 15.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n \n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n \n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n \n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n \n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 240 5% 64.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n \n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n \n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 240 3.7% 15.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
diff --git a/packages/cli/test/fixtures/config-full/components.json b/packages/cli/test/fixtures/config-full/components.json
deleted file mode 100644
index 675abb22e9e..00000000000
--- a/packages/cli/test/fixtures/config-full/components.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "style": "new-york",
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/app/globals.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": "tw-"
-  },
-  "rsc": false,
-  "aliases": {
-    "utils": "~/lib/utils",
-    "components": "~/components"
-  }
-}
diff --git a/packages/cli/test/fixtures/config-full/package.json b/packages/cli/test/fixtures/config-full/package.json
deleted file mode 100644
index 833dc70ae26..00000000000
--- a/packages/cli/test/fixtures/config-full/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-full",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "shadcn",
-  "license": "MIT"
-}
diff --git a/packages/cli/test/fixtures/config-full/tsconfig.json b/packages/cli/test/fixtures/config-full/tsconfig.json
deleted file mode 100644
index 03ebb748aef..00000000000
--- a/packages/cli/test/fixtures/config-full/tsconfig.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "checkJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "noUncheckedIndexedAccess": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./src/*"]
-    }
-  },
-  "include": [
-    ".eslintrc.cjs",
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.cjs",
-    "**/*.mjs"
-  ],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/cli/test/fixtures/config-invalid/components.json b/packages/cli/test/fixtures/config-invalid/components.json
deleted file mode 100644
index 3cbc313f777..00000000000
--- a/packages/cli/test/fixtures/config-invalid/components.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "cn": "./components",
-  "ui": "./ui",
-  "does-not-exist": "./does-not-exist"
-}
diff --git a/packages/cli/test/fixtures/config-invalid/package.json b/packages/cli/test/fixtures/config-invalid/package.json
deleted file mode 100644
index 79b27998cb5..00000000000
--- a/packages/cli/test/fixtures/config-invalid/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-invalid",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "shadcn",
-  "license": "MIT"
-}
diff --git a/packages/cli/test/fixtures/config-jsx/components.json b/packages/cli/test/fixtures/config-jsx/components.json
deleted file mode 100644
index 92b1f5e029b..00000000000
--- a/packages/cli/test/fixtures/config-jsx/components.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "style": "default",
-  "tsx": false,
-  "tailwind": {
-    "config": "./tailwind.config.js",
-    "css": "./src/assets/css/tailwind.css",
-    "baseColor": "neutral",
-    "cssVariables": false
-  },
-  "aliases": {
-    "utils": "@/lib/utils",
-    "components": "@/components"
-  }
-}
diff --git a/packages/cli/test/fixtures/config-jsx/jsconfig.json b/packages/cli/test/fixtures/config-jsx/jsconfig.json
deleted file mode 100644
index 2a2e4b3bf8b..00000000000
--- a/packages/cli/test/fixtures/config-jsx/jsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"]
-    }
-  }
-}
diff --git a/packages/cli/test/fixtures/config-jsx/package.json b/packages/cli/test/fixtures/config-jsx/package.json
deleted file mode 100644
index b239ba4a65d..00000000000
--- a/packages/cli/test/fixtures/config-jsx/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-partial",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "shadcn",
-  "license": "MIT"
-}
diff --git a/packages/cli/test/fixtures/config-none/package.json b/packages/cli/test/fixtures/config-none/package.json
deleted file mode 100644
index 74c6960a37f..00000000000
--- a/packages/cli/test/fixtures/config-none/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-none",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "shadcn",
-  "license": "MIT"
-}
diff --git a/packages/cli/test/fixtures/config-partial/components.json b/packages/cli/test/fixtures/config-partial/components.json
deleted file mode 100644
index b0602580220..00000000000
--- a/packages/cli/test/fixtures/config-partial/components.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "style": "default",
-  "tailwind": {
-    "config": "./tailwind.config.ts",
-    "css": "./src/assets/css/tailwind.css",
-    "baseColor": "neutral",
-    "cssVariables": false
-  },
-  "aliases": {
-    "utils": "@/lib/utils",
-    "components": "@/components"
-  }
-}
diff --git a/packages/cli/test/fixtures/config-partial/package.json b/packages/cli/test/fixtures/config-partial/package.json
deleted file mode 100644
index b239ba4a65d..00000000000
--- a/packages/cli/test/fixtures/config-partial/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-partial",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "shadcn",
-  "license": "MIT"
-}
diff --git a/packages/cli/test/fixtures/config-partial/tsconfig.json b/packages/cli/test/fixtures/config-partial/tsconfig.json
deleted file mode 100644
index 7f519f45a75..00000000000
--- a/packages/cli/test/fixtures/config-partial/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./*"]
-    }
-  }
-}
diff --git a/packages/cli/test/fixtures/config-ui/components.json b/packages/cli/test/fixtures/config-ui/components.json
deleted file mode 100644
index 0feb828e35e..00000000000
--- a/packages/cli/test/fixtures/config-ui/components.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "style": "new-york",
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/app/globals.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": "tw-"
-  },
-  "rsc": false,
-  "aliases": {
-    "utils": "~/lib/utils",
-    "components": "~/components",
-    "ui": "~/ui"
-  }
-}
diff --git a/packages/cli/test/fixtures/config-ui/package.json b/packages/cli/test/fixtures/config-ui/package.json
deleted file mode 100644
index 673ee87c956..00000000000
--- a/packages/cli/test/fixtures/config-ui/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-config-ui",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "shadcn",
-  "license": "MIT"
-}
diff --git a/packages/cli/test/fixtures/config-ui/tsconfig.json b/packages/cli/test/fixtures/config-ui/tsconfig.json
deleted file mode 100644
index 03ebb748aef..00000000000
--- a/packages/cli/test/fixtures/config-ui/tsconfig.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "checkJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "noUncheckedIndexedAccess": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./src/*"]
-    }
-  },
-  "include": [
-    ".eslintrc.cjs",
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.cjs",
-    "**/*.mjs"
-  ],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/cli/test/fixtures/next-app-js/app/layout.js b/packages/cli/test/fixtures/next-app-js/app/layout.js
deleted file mode 100644
index 821f7122830..00000000000
--- a/packages/cli/test/fixtures/next-app-js/app/layout.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Inter } from 'next/font/google'
-import './globals.css'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
-}
diff --git a/packages/cli/test/fixtures/next-app-js/app/page.js b/packages/cli/test/fixtures/next-app-js/app/page.js
deleted file mode 100644
index 9c88d595e4f..00000000000
--- a/packages/cli/test/fixtures/next-app-js/app/page.js
+++ /dev/null
@@ -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.js</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 hover:dark:bg-opacity-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 starter templates for Next.js.
-          </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>
-  )
-}
diff --git a/packages/cli/test/fixtures/next-app-js/jsconfig.json b/packages/cli/test/fixtures/next-app-js/jsconfig.json
deleted file mode 100644
index 2a2e4b3bf8b..00000000000
--- a/packages/cli/test/fixtures/next-app-js/jsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"]
-    }
-  }
-}
diff --git a/packages/cli/test/fixtures/next-app-js/package.json b/packages/cli/test/fixtures/next-app-js/package.json
deleted file mode 100644
index 6000b7e5ca5..00000000000
--- a/packages/cli/test/fixtures/next-app-js/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "app-js",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.4"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.0.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.4"
-  }
-}
diff --git a/packages/cli/test/fixtures/next-app-js/tailwind.config.js b/packages/cli/test/fixtures/next-app-js/tailwind.config.js
deleted file mode 100644
index 8c4d1b21f11..00000000000
--- a/packages/cli/test/fixtures/next-app-js/tailwind.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  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: [],
-}
diff --git a/packages/cli/test/fixtures/next-app-src/package.json b/packages/cli/test/fixtures/next-app-src/package.json
deleted file mode 100644
index dfc8520182b..00000000000
--- a/packages/cli/test/fixtures/next-app-src/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "test-cli-next-app-src",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  }
-}
diff --git a/packages/cli/test/fixtures/next-app-src/pnpm-lock.yaml b/packages/cli/test/fixtures/next-app-src/pnpm-lock.yaml
deleted file mode 100644
index a8ca0205dce..00000000000
--- a/packages/cli/test/fixtures/next-app-src/pnpm-lock.yaml
+++ /dev/null
@@ -1,2620 +0,0 @@
-lockfileVersion: '6.0'
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
-dependencies:
-  '@types/node':
-    specifier: 20.6.2
-    version: 20.6.2
-  '@types/react':
-    specifier: 18.2.22
-    version: 18.2.22
-  '@types/react-dom':
-    specifier: 18.2.7
-    version: 18.2.7
-  autoprefixer:
-    specifier: 10.4.15
-    version: 10.4.15(postcss@8.4.30)
-  eslint:
-    specifier: 8.49.0
-    version: 8.49.0
-  eslint-config-next:
-    specifier: 13.4.19
-    version: 13.4.19(eslint@8.49.0)(typescript@5.2.2)
-  next:
-    specifier: 13.4.19
-    version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
-  postcss:
-    specifier: 8.4.30
-    version: 8.4.30
-  react:
-    specifier: 18.2.0
-    version: 18.2.0
-  react-dom:
-    specifier: 18.2.0
-    version: 18.2.0(react@18.2.0)
-  tailwindcss:
-    specifier: 3.3.3
-    version: 3.3.3
-  typescript:
-    specifier: 5.2.2
-    version: 5.2.2
-
-packages:
-
-  /@aashutoshrathi/word-wrap@1.2.6:
-    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /@alloc/quick-lru@5.2.0:
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /@babel/runtime@7.22.15:
-    resolution: {integrity: sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.14.0
-    dev: false
-
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.49.0):
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-    dependencies:
-      eslint: 8.49.0
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /@eslint-community/regexpp@4.8.1:
-    resolution: {integrity: sha512-PWiOzLIUAjN/w5K17PoF4n6sKBw0gqLHPhywmYHP4t1VFQQVYeb1yWsJwnMVEMl3tUHME7X/SJPZLmtG7XBDxQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-    dev: false
-
-  /@eslint/eslintrc@2.1.2:
-    resolution: {integrity: sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 9.6.1
-      globals: 13.21.0
-      ignore: 5.2.4
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@eslint/js@8.49.0:
-    resolution: {integrity: sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: false
-
-  /@humanwhocodes/config-array@0.11.11:
-    resolution: {integrity: sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==}
-    engines: {node: '>=10.10.0'}
-    dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@humanwhocodes/module-importer@1.0.1:
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
-    dev: false
-
-  /@humanwhocodes/object-schema@1.2.1:
-    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
-    dev: false
-
-  /@jridgewell/gen-mapping@0.3.3:
-    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.19
-    dev: false
-
-  /@jridgewell/resolve-uri@3.1.1:
-    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/set-array@1.1.2:
-    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/sourcemap-codec@1.4.15:
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: false
-
-  /@jridgewell/trace-mapping@0.3.19:
-    resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: false
-
-  /@next/env@13.4.19:
-    resolution: {integrity: sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==}
-    dev: false
-
-  /@next/eslint-plugin-next@13.4.19:
-    resolution: {integrity: sha512-N/O+zGb6wZQdwu6atMZHbR7T9Np5SUFUjZqCbj0sXm+MwQO35M8TazVB4otm87GkXYs2l6OPwARd3/PUWhZBVQ==}
-    dependencies:
-      glob: 7.1.7
-    dev: false
-
-  /@next/swc-darwin-arm64@13.4.19:
-    resolution: {integrity: sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-darwin-x64@13.4.19:
-    resolution: {integrity: sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-gnu@13.4.19:
-    resolution: {integrity: sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-musl@13.4.19:
-    resolution: {integrity: sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-gnu@13.4.19:
-    resolution: {integrity: sha512-htwOEagMa/CXNykFFeAHHvMJeqZfNQEoQvHfsA4wgg5QqGNqD5soeCer4oGlCol6NGUxknrQO6VEustcv+Md+g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-musl@13.4.19:
-    resolution: {integrity: sha512-4Gj4vvtbK1JH8ApWTT214b3GwUh9EKKQjY41hH/t+u55Knxi/0wesMzwQRhppK6Ddalhu0TEttbiJ+wRcoEj5Q==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-arm64-msvc@13.4.19:
-    resolution: {integrity: sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-ia32-msvc@13.4.19:
-    resolution: {integrity: sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-x64-msvc@13.4.19:
-    resolution: {integrity: sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@nodelib/fs.scandir@2.1.5:
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-    dev: false
-
-  /@nodelib/fs.stat@2.0.5:
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-    dev: false
-
-  /@nodelib/fs.walk@1.2.8:
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.15.0
-    dev: false
-
-  /@rushstack/eslint-patch@1.4.0:
-    resolution: {integrity: sha512-cEjvTPU32OM9lUFegJagO0mRnIn+rbqrG89vV8/xLnLFX0DoR0r1oy5IlTga71Q7uT3Qus7qm7wgeiMT/+Irlg==}
-    dev: false
-
-  /@swc/helpers@0.5.1:
-    resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==}
-    dependencies:
-      tslib: 2.6.2
-    dev: false
-
-  /@types/json5@0.0.29:
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
-    dev: false
-
-  /@types/node@20.6.2:
-    resolution: {integrity: sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==}
-    dev: false
-
-  /@types/prop-types@15.7.6:
-    resolution: {integrity: sha512-RK/kBbYOQQHLYj9Z95eh7S6t7gq4Ojt/NT8HTk8bWVhA5DaF+5SMnxHKkP4gPNN3wAZkKP+VjAf0ebtYzf+fxg==}
-    dev: false
-
-  /@types/react-dom@18.2.7:
-    resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
-    dependencies:
-      '@types/react': 18.2.22
-    dev: false
-
-  /@types/react@18.2.22:
-    resolution: {integrity: sha512-60fLTOLqzarLED2O3UQImc/lsNRgG0jE/a1mPW9KjMemY0LMITWEsbS4VvZ4p6rorEHd5YKxxmMKSDK505GHpA==}
-    dependencies:
-      '@types/prop-types': 15.7.6
-      '@types/scheduler': 0.16.3
-      csstype: 3.1.2
-    dev: false
-
-  /@types/scheduler@0.16.3:
-    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
-    dev: false
-
-  /@typescript-eslint/parser@6.7.2(eslint@8.49.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-KA3E4ox0ws+SPyxQf9iSI25R6b4Ne78ORhNHeVKrPQnoYsb9UhieoiRoJgrzgEeKGOXhcY1i8YtOeCHHTDa6Fw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.7.2
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/typescript-estree': 6.7.2(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.7.2
-      debug: 4.3.4
-      eslint: 8.49.0
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@typescript-eslint/scope-manager@6.7.2:
-    resolution: {integrity: sha512-bgi6plgyZjEqapr7u2mhxGR6E8WCzKNUFWNh6fkpVe9+yzRZeYtDTbsIBzKbcxI+r1qVWt6VIoMSNZ4r2A+6Yw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/visitor-keys': 6.7.2
-    dev: false
-
-  /@typescript-eslint/types@6.7.2:
-    resolution: {integrity: sha512-flJYwMYgnUNDAN9/GAI3l8+wTmvTYdv64fcH8aoJK76Y+1FCZ08RtI5zDerM/FYT5DMkAc+19E4aLmd5KqdFyg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dev: false
-
-  /@typescript-eslint/typescript-estree@6.7.2(typescript@5.2.2):
-    resolution: {integrity: sha512-kiJKVMLkoSciGyFU0TOY0fRxnp9qq1AzVOHNeN1+B9erKFCJ4Z8WdjAkKQPP+b1pWStGFqezMLltxO+308dJTQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/visitor-keys': 6.7.2
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@typescript-eslint/visitor-keys@6.7.2:
-    resolution: {integrity: sha512-uVw9VIMFBUTz8rIeaUT3fFe8xIUx8r4ywAdlQv1ifH+6acn/XF8Y6rwJ7XNmkNMDrTW+7+vxFFPIF40nJCVsMQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /acorn-jsx@5.3.2(acorn@8.10.0):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.10.0
-    dev: false
-
-  /acorn@8.10.0:
-    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: false
-
-  /ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-    dev: false
-
-  /ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-    dependencies:
-      color-convert: 2.0.1
-    dev: false
-
-  /any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: false
-
-  /anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-    dev: false
-
-  /arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: false
-
-  /argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: false
-
-  /aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
-
-  /array-buffer-byte-length@1.0.0:
-    resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
-    dependencies:
-      call-bind: 1.0.2
-      is-array-buffer: 3.0.2
-    dev: false
-
-  /array-includes@3.1.7:
-    resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      is-string: 1.0.7
-    dev: false
-
-  /array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /array.prototype.findlastindex@1.2.3:
-    resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /array.prototype.flat@1.3.2:
-    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-    dev: false
-
-  /array.prototype.flatmap@1.3.2:
-    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-    dev: false
-
-  /array.prototype.tosorted@1.1.2:
-    resolution: {integrity: sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /arraybuffer.prototype.slice@1.0.2:
-    resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      is-array-buffer: 3.0.2
-      is-shared-array-buffer: 1.0.2
-    dev: false
-
-  /ast-types-flow@0.0.7:
-    resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
-    dev: false
-
-  /asynciterator.prototype@1.0.0:
-    resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /autoprefixer@10.4.15(postcss@8.4.30):
-    resolution: {integrity: sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      browserslist: 4.21.10
-      caniuse-lite: 1.0.30001538
-      fraction.js: 4.3.6
-      normalize-range: 0.1.2
-      picocolors: 1.0.0
-      postcss: 8.4.30
-      postcss-value-parser: 4.2.0
-    dev: false
-
-  /available-typed-arrays@1.0.5:
-    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /axe-core@4.8.1:
-    resolution: {integrity: sha512-9l850jDDPnKq48nbad8SiEelCv4OrUWrKab/cPj0GScVg6cb6NbCCt/Ulk26QEq5jP9NnGr04Bit1BHyV6r5CQ==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /axobject-query@3.2.1:
-    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
-
-  /balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: false
-
-  /binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-    dev: false
-
-  /braces@3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
-    engines: {node: '>=8'}
-    dependencies:
-      fill-range: 7.0.1
-    dev: false
-
-  /browserslist@4.21.10:
-    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001538
-      electron-to-chromium: 1.4.523
-      node-releases: 2.0.13
-      update-browserslist-db: 1.0.11(browserslist@4.21.10)
-    dev: false
-
-  /busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
-    dependencies:
-      streamsearch: 1.1.0
-    dev: false
-
-  /call-bind@1.0.2:
-    resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
-    dependencies:
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /caniuse-lite@1.0.30001538:
-    resolution: {integrity: sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==}
-    dev: false
-
-  /chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-    dev: false
-
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
-    engines: {node: '>= 8.10.0'}
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.2
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: false
-
-  /client-only@0.0.1:
-    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
-
-  /color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-    dependencies:
-      color-name: 1.1.4
-    dev: false
-
-  /color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: false
-
-  /commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: false
-
-  /cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
-    engines: {node: '>= 8'}
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-    dev: false
-
-  /cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: false
-
-  /csstype@3.1.2:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: false
-
-  /damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-    dev: false
-
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-    dev: false
-
-  /debug@4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.2
-    dev: false
-
-  /deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-    dev: false
-
-  /define-data-property@1.1.0:
-    resolution: {integrity: sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      gopd: 1.0.1
-      has-property-descriptors: 1.0.0
-    dev: false
-
-  /define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.0
-      has-property-descriptors: 1.0.0
-      object-keys: 1.1.1
-    dev: false
-
-  /dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: false
-
-  /dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
-    dependencies:
-      path-type: 4.0.0
-    dev: false
-
-  /dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: false
-
-  /doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: false
-
-  /doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: false
-
-  /electron-to-chromium@1.4.523:
-    resolution: {integrity: sha512-9AreocSUWnzNtvLcbpng6N+GkXnCcBR80IQkxRC9Dfdyg4gaWNUPBujAHUpKkiUkoSoR9UlhA4zD/IgBklmhzg==}
-    dev: false
-
-  /emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: false
-
-  /enhanced-resolve@5.15.0:
-    resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.2.1
-    dev: false
-
-  /es-abstract@1.22.2:
-    resolution: {integrity: sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      arraybuffer.prototype.slice: 1.0.2
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      es-set-tostringtag: 2.0.1
-      es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.6
-      get-intrinsic: 1.2.1
-      get-symbol-description: 1.0.0
-      globalthis: 1.0.3
-      gopd: 1.0.1
-      has: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      is-array-buffer: 3.0.2
-      is-callable: 1.2.7
-      is-negative-zero: 2.0.2
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.2
-      is-string: 1.0.7
-      is-typed-array: 1.1.12
-      is-weakref: 1.0.2
-      object-inspect: 1.12.3
-      object-keys: 1.1.1
-      object.assign: 4.1.4
-      regexp.prototype.flags: 1.5.1
-      safe-array-concat: 1.0.1
-      safe-regex-test: 1.0.0
-      string.prototype.trim: 1.2.8
-      string.prototype.trimend: 1.0.7
-      string.prototype.trimstart: 1.0.7
-      typed-array-buffer: 1.0.0
-      typed-array-byte-length: 1.0.0
-      typed-array-byte-offset: 1.0.0
-      typed-array-length: 1.0.4
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.11
-    dev: false
-
-  /es-iterator-helpers@1.0.15:
-    resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==}
-    dependencies:
-      asynciterator.prototype: 1.0.0
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-set-tostringtag: 2.0.1
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
-      globalthis: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      iterator.prototype: 1.1.2
-      safe-array-concat: 1.0.1
-    dev: false
-
-  /es-set-tostringtag@2.0.1:
-    resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /es-shim-unscopables@1.0.0:
-    resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==}
-    dependencies:
-      has: 1.0.3
-    dev: false
-
-  /es-to-primitive@1.2.1:
-    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
-    dev: false
-
-  /escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /eslint-config-next@13.4.19(eslint@8.49.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-WE8367sqMnjhWHvR5OivmfwENRQ1ixfNE9hZwQqNCsd+iM3KnuMc1V8Pt6ytgjxjf23D+xbesADv9x3xaKfT3g==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@next/eslint-plugin-next': 13.4.19
-      '@rushstack/eslint-patch': 1.4.0
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      eslint-plugin-jsx-a11y: 6.7.1(eslint@8.49.0)
-      eslint-plugin-react: 7.33.2(eslint@8.49.0)
-      eslint-plugin-react-hooks: 4.6.0(eslint@8.49.0)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.13.0
-      resolve: 1.22.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-import-resolver-typescript@3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0):
-    resolution: {integrity: sha512-QTHR9ddNnn35RTxlaEnx2gCxqFlF2SEN0SE2d17SqwyM7YOSI2GHWRYp5BiRkObTUNYPupC/3Fq2a0PpT+EKpg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-    dependencies:
-      debug: 4.3.4
-      enhanced-resolve: 5.15.0
-      eslint: 8.49.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      fast-glob: 3.3.1
-      get-tsconfig: 4.7.0
-      is-core-module: 2.13.0
-      is-glob: 4.0.3
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0):
-    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      debug: 3.2.7
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0)
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0):
-    resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      array-includes: 3.1.7
-      array.prototype.findlastindex: 1.2.3
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      has: 1.0.3
-      is-core-module: 2.13.0
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.7
-      object.groupby: 1.0.1
-      object.values: 1.1.7
-      semver: 6.3.1
-      tsconfig-paths: 3.14.2
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-plugin-jsx-a11y@6.7.1(eslint@8.49.0):
-    resolution: {integrity: sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      '@babel/runtime': 7.22.15
-      aria-query: 5.3.0
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      ast-types-flow: 0.0.7
-      axe-core: 4.8.1
-      axobject-query: 3.2.1
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 8.49.0
-      has: 1.0.3
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.5
-      minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-      semver: 6.3.1
-    dev: false
-
-  /eslint-plugin-react-hooks@4.6.0(eslint@8.49.0):
-    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-    dependencies:
-      eslint: 8.49.0
-    dev: false
-
-  /eslint-plugin-react@7.33.2(eslint@8.49.0):
-    resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      array.prototype.tosorted: 1.1.2
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.0.15
-      eslint: 8.49.0
-      estraverse: 5.3.0
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-      object.hasown: 1.1.3
-      object.values: 1.1.7
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.4
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.10
-    dev: false
-
-  /eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: false
-
-  /eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: false
-
-  /eslint@8.49.0:
-    resolution: {integrity: sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.49.0)
-      '@eslint-community/regexpp': 4.8.1
-      '@eslint/eslintrc': 2.1.2
-      '@eslint/js': 8.49.0
-      '@humanwhocodes/config-array': 0.11.11
-      '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      doctrine: 3.0.0
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.5.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      globals: 13.21.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.10.0
-      acorn-jsx: 5.3.2(acorn@8.10.0)
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
-    engines: {node: '>=0.10'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: false
-
-  /esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: false
-
-  /estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
-    dev: false
-
-  /esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-    dev: false
-
-  /fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-    dev: false
-
-  /fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-    dev: false
-
-  /fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-    dev: false
-
-  /fastq@1.15.0:
-    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
-    dependencies:
-      reusify: 1.0.4
-    dev: false
-
-  /file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
-    dependencies:
-      flat-cache: 3.1.0
-    dev: false
-
-  /fill-range@7.0.1:
-    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
-    engines: {node: '>=8'}
-    dependencies:
-      to-regex-range: 5.0.1
-    dev: false
-
-  /find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-    dev: false
-
-  /flat-cache@3.1.0:
-    resolution: {integrity: sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      flatted: 3.2.9
-      keyv: 4.5.3
-      rimraf: 3.0.2
-    dev: false
-
-  /flatted@3.2.9:
-    resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
-    dev: false
-
-  /for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
-    dependencies:
-      is-callable: 1.2.7
-    dev: false
-
-  /fraction.js@4.3.6:
-    resolution: {integrity: sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==}
-    dev: false
-
-  /fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: false
-
-  /fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /function-bind@1.1.1:
-    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: false
-
-  /function.prototype.name@1.1.6:
-    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      functions-have-names: 1.2.3
-    dev: false
-
-  /functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-    dev: false
-
-  /get-intrinsic@1.2.1:
-    resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
-    dependencies:
-      function-bind: 1.1.1
-      has: 1.0.3
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-    dev: false
-
-  /get-symbol-description@1.0.0:
-    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /get-tsconfig@4.7.0:
-    resolution: {integrity: sha512-pmjiZ7xtB8URYm74PlGJozDNyhvsVLUcpBa8DZBG3bWHwaHa9bPiRpiSfovw+fjhwONSCWKRyk+JQHEGZmMrzw==}
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-    dev: false
-
-  /glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: false
-
-  /glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: false
-
-  /glob-to-regexp@0.4.1:
-    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-    dev: false
-
-  /glob@7.1.6:
-    resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /glob@7.1.7:
-    resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /globals@13.21.0:
-    resolution: {integrity: sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==}
-    engines: {node: '>=8'}
-    dependencies:
-      type-fest: 0.20.2
-    dev: false
-
-  /globalthis@1.0.3:
-    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-properties: 1.2.1
-    dev: false
-
-  /globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.1
-      ignore: 5.2.4
-      merge2: 1.4.1
-      slash: 3.0.0
-    dev: false
-
-  /gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-    dev: false
-
-  /graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-    dev: false
-
-  /has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
-    dev: false
-
-  /has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /has-property-descriptors@1.0.0:
-    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /has-proto@1.0.1:
-    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /has-symbols@1.0.3:
-    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /has-tostringtag@1.0.0:
-    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /has@1.0.3:
-    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
-    engines: {node: '>= 0.4.0'}
-    dependencies:
-      function-bind: 1.1.1
-    dev: false
-
-  /ignore@5.2.4:
-    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
-    engines: {node: '>= 4'}
-    dev: false
-
-  /import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-    dev: false
-
-  /imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
-    dev: false
-
-  /inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-    dev: false
-
-  /inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: false
-
-  /internal-slot@1.0.5:
-    resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      side-channel: 1.0.4
-    dev: false
-
-  /is-array-buffer@3.0.2:
-    resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /is-async-function@2.0.0:
-    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
-    dependencies:
-      has-bigints: 1.0.2
-    dev: false
-
-  /is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-    dependencies:
-      binary-extensions: 2.2.0
-    dev: false
-
-  /is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /is-core-module@2.13.0:
-    resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
-    dependencies:
-      has: 1.0.3
-    dev: false
-
-  /is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /is-finalizationregistry@1.0.2:
-    resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-generator-function@1.0.10:
-    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-extglob: 2.1.1
-    dev: false
-
-  /is-map@2.0.2:
-    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
-    dev: false
-
-  /is-negative-zero@2.0.2:
-    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-    dev: false
-
-  /is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /is-regex@1.1.4:
-    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-set@2.0.2:
-    resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
-    dev: false
-
-  /is-shared-array-buffer@1.0.2:
-    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /is-typed-array@1.1.12:
-    resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      which-typed-array: 1.1.11
-    dev: false
-
-  /is-weakmap@2.0.1:
-    resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
-    dev: false
-
-  /is-weakref@1.0.2:
-    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-weakset@2.0.2:
-    resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-    dev: false
-
-  /isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: false
-
-  /iterator.prototype@1.1.2:
-    resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
-    dependencies:
-      define-properties: 1.2.1
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      reflect.getprototypeof: 1.0.4
-      set-function-name: 2.0.1
-    dev: false
-
-  /jiti@1.20.0:
-    resolution: {integrity: sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==}
-    hasBin: true
-    dev: false
-
-  /js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: false
-
-  /js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
-    dependencies:
-      argparse: 2.0.1
-    dev: false
-
-  /json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-    dev: false
-
-  /json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-    dev: false
-
-  /json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-    dev: false
-
-  /json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
-    dependencies:
-      minimist: 1.2.8
-    dev: false
-
-  /jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      array-includes: 3.1.7
-      array.prototype.flat: 1.3.2
-      object.assign: 4.1.4
-      object.values: 1.1.7
-    dev: false
-
-  /keyv@4.5.3:
-    resolution: {integrity: sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==}
-    dependencies:
-      json-buffer: 3.0.1
-    dev: false
-
-  /language-subtag-registry@0.3.22:
-    resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
-    dev: false
-
-  /language-tags@1.0.5:
-    resolution: {integrity: sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==}
-    dependencies:
-      language-subtag-registry: 0.3.22
-    dev: false
-
-  /levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: false
-
-  /lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: false
-
-  /locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
-    dependencies:
-      p-locate: 5.0.0
-    dev: false
-
-  /lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: false
-
-  /loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-    dependencies:
-      js-tokens: 4.0.0
-    dev: false
-
-  /lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
-    dependencies:
-      yallist: 4.0.0
-    dev: false
-
-  /merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-    dev: false
-
-  /micromatch@4.0.5:
-    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
-    engines: {node: '>=8.6'}
-    dependencies:
-      braces: 3.0.2
-      picomatch: 2.3.1
-    dev: false
-
-  /minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-    dependencies:
-      brace-expansion: 1.1.11
-    dev: false
-
-  /minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: false
-
-  /ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: false
-
-  /ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-    dev: false
-
-  /mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-    dev: false
-
-  /nanoid@3.3.6:
-    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-    dev: false
-
-  /natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-    dev: false
-
-  /next@13.4.19(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==}
-    engines: {node: '>=16.8.0'}
-    hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      sass:
-        optional: true
-    dependencies:
-      '@next/env': 13.4.19
-      '@swc/helpers': 0.5.1
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001538
-      postcss: 8.4.14
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(react@18.2.0)
-      watchpack: 2.4.0
-      zod: 3.21.4
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 13.4.19
-      '@next/swc-darwin-x64': 13.4.19
-      '@next/swc-linux-arm64-gnu': 13.4.19
-      '@next/swc-linux-arm64-musl': 13.4.19
-      '@next/swc-linux-x64-gnu': 13.4.19
-      '@next/swc-linux-x64-musl': 13.4.19
-      '@next/swc-win32-arm64-msvc': 13.4.19
-      '@next/swc-win32-ia32-msvc': 13.4.19
-      '@next/swc-win32-x64-msvc': 13.4.19
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-    dev: false
-
-  /node-releases@2.0.13:
-    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
-    dev: false
-
-  /normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /object-inspect@1.12.3:
-    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
-    dev: false
-
-  /object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /object.assign@4.1.4:
-    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      has-symbols: 1.0.3
-      object-keys: 1.1.1
-    dev: false
-
-  /object.entries@1.1.7:
-    resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.fromentries@2.0.7:
-    resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.groupby@1.0.1:
-    resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /object.hasown@1.1.3:
-    resolution: {integrity: sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==}
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.values@1.1.7:
-    resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-    dependencies:
-      wrappy: 1.0.2
-    dev: false
-
-  /optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: false
-
-  /p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      yocto-queue: 0.1.0
-    dev: false
-
-  /p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
-    dependencies:
-      p-limit: 3.1.0
-    dev: false
-
-  /parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
-    dependencies:
-      callsites: 3.1.0
-    dev: false
-
-  /path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: false
-
-  /path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /picocolors@1.0.0:
-    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: false
-
-  /picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
-    dev: false
-
-  /pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /postcss-import@15.1.0(postcss@8.4.30):
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-    dependencies:
-      postcss: 8.4.30
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.6
-    dev: false
-
-  /postcss-js@4.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.30
-    dev: false
-
-  /postcss-load-config@4.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 2.1.0
-      postcss: 8.4.30
-      yaml: 2.3.2
-    dev: false
-
-  /postcss-nested@6.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-    dependencies:
-      postcss: 8.4.30
-      postcss-selector-parser: 6.0.13
-    dev: false
-
-  /postcss-selector-parser@6.0.13:
-    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-    dev: false
-
-  /postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: false
-
-  /postcss@8.4.14:
-    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
-  /postcss@8.4.30:
-    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
-  /prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-    dev: false
-
-  /prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-    dev: false
-
-  /punycode@2.3.0:
-    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: false
-
-  /react-dom@18.2.0(react@18.2.0):
-    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
-    peerDependencies:
-      react: ^18.2.0
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.2.0
-      scheduler: 0.23.0
-    dev: false
-
-  /react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-    dev: false
-
-  /react@18.2.0:
-    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
-  /read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-    dependencies:
-      pify: 2.3.0
-    dev: false
-
-  /readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-    dependencies:
-      picomatch: 2.3.1
-    dev: false
-
-  /reflect.getprototypeof@1.0.4:
-    resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      globalthis: 1.0.3
-      which-builtin-type: 1.1.3
-    dev: false
-
-  /regenerator-runtime@0.14.0:
-    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
-    dev: false
-
-  /regexp.prototype.flags@1.5.1:
-    resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      set-function-name: 2.0.1
-    dev: false
-
-  /resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-    dev: false
-
-  /resolve@1.22.6:
-    resolution: {integrity: sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==}
-    hasBin: true
-    dependencies:
-      is-core-module: 2.13.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: false
-
-  /resolve@2.0.0-next.4:
-    resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
-    hasBin: true
-    dependencies:
-      is-core-module: 2.13.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: false
-
-  /reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: false
-
-  /rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    hasBin: true
-    dependencies:
-      glob: 7.2.3
-    dev: false
-
-  /run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-    dependencies:
-      queue-microtask: 1.2.3
-    dev: false
-
-  /safe-array-concat@1.0.1:
-    resolution: {integrity: sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==}
-    engines: {node: '>=0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      isarray: 2.0.5
-    dev: false
-
-  /safe-regex-test@1.0.0:
-    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-regex: 1.1.4
-    dev: false
-
-  /scheduler@0.23.0:
-    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
-  /semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-    dev: false
-
-  /semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      lru-cache: 6.0.0
-    dev: false
-
-  /set-function-name@2.0.1:
-    resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.0
-      functions-have-names: 1.2.3
-      has-property-descriptors: 1.0.0
-    dev: false
-
-  /shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-    dependencies:
-      shebang-regex: 3.0.0
-    dev: false
-
-  /shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /side-channel@1.0.4:
-    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      object-inspect: 1.12.3
-    dev: false
-
-  /slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
-    dev: false
-
-  /string.prototype.matchall@4.0.10:
-    resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      regexp.prototype.flags: 1.5.1
-      set-function-name: 2.0.1
-      side-channel: 1.0.4
-    dev: false
-
-  /string.prototype.trim@1.2.8:
-    resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /string.prototype.trimend@1.0.7:
-    resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /string.prototype.trimstart@1.0.7:
-    resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
-    dependencies:
-      ansi-regex: 5.0.1
-    dev: false
-
-  /strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /styled-jsx@5.1.1(react@18.2.0):
-    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
-    engines: {node: '>= 12.0.0'}
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
-    dependencies:
-      client-only: 0.0.1
-      react: 18.2.0
-    dev: false
-
-  /sucrase@3.34.0:
-    resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==}
-    engines: {node: '>=8'}
-    hasBin: true
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
-      commander: 4.1.1
-      glob: 7.1.6
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
-    dev: false
-
-  /supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
-    dependencies:
-      has-flag: 4.0.0
-    dev: false
-
-  /supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /tailwindcss@3.3.3:
-    resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.5.3
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.1
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.20.0
-      lilconfig: 2.1.0
-      micromatch: 4.0.5
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.30
-      postcss-import: 15.1.0(postcss@8.4.30)
-      postcss-js: 4.0.1(postcss@8.4.30)
-      postcss-load-config: 4.0.1(postcss@8.4.30)
-      postcss-nested: 6.0.1(postcss@8.4.30)
-      postcss-selector-parser: 6.0.13
-      resolve: 1.22.6
-      sucrase: 3.34.0
-    transitivePeerDependencies:
-      - ts-node
-    dev: false
-
-  /tapable@2.2.1:
-    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-    dev: false
-
-  /thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-    dependencies:
-      thenify: 3.3.1
-    dev: false
-
-  /thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-    dependencies:
-      any-promise: 1.3.0
-    dev: false
-
-  /to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
-    dependencies:
-      is-number: 7.0.0
-    dev: false
-
-  /ts-api-utils@1.0.3(typescript@5.2.2):
-    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
-    engines: {node: '>=16.13.0'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-    dependencies:
-      typescript: 5.2.2
-    dev: false
-
-  /ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: false
-
-  /tsconfig-paths@3.14.2:
-    resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
-    dependencies:
-      '@types/json5': 0.0.29
-      json5: 1.0.2
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-    dev: false
-
-  /tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: false
-
-  /type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-    dev: false
-
-  /type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /typed-array-buffer@1.0.0:
-    resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-byte-length@1.0.0:
-    resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-byte-offset@1.0.0:
-    resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-length@1.0.4:
-    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
-    dependencies:
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typescript@5.2.2:
-    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-    dev: false
-
-  /unbox-primitive@1.0.2:
-    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
-    dependencies:
-      call-bind: 1.0.2
-      has-bigints: 1.0.2
-      has-symbols: 1.0.3
-      which-boxed-primitive: 1.0.2
-    dev: false
-
-  /update-browserslist-db@1.0.11(browserslist@4.21.10):
-    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: 4.21.10
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: false
-
-  /uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-    dependencies:
-      punycode: 2.3.0
-    dev: false
-
-  /util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: false
-
-  /watchpack@2.4.0:
-    resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-    dev: false
-
-  /which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
-    dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
-    dev: false
-
-  /which-builtin-type@1.1.3:
-    resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      function.prototype.name: 1.1.6
-      has-tostringtag: 1.0.0
-      is-async-function: 2.0.0
-      is-date-object: 1.0.5
-      is-finalizationregistry: 1.0.2
-      is-generator-function: 1.0.10
-      is-regex: 1.1.4
-      is-weakref: 1.0.2
-      isarray: 2.0.5
-      which-boxed-primitive: 1.0.2
-      which-collection: 1.0.1
-      which-typed-array: 1.1.11
-    dev: false
-
-  /which-collection@1.0.1:
-    resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
-    dependencies:
-      is-map: 2.0.2
-      is-set: 2.0.2
-      is-weakmap: 2.0.1
-      is-weakset: 2.0.2
-    dev: false
-
-  /which-typed-array@1.1.11:
-    resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-    dependencies:
-      isexe: 2.0.0
-    dev: false
-
-  /wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: false
-
-  /yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-    dev: false
-
-  /yaml@2.3.2:
-    resolution: {integrity: sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==}
-    engines: {node: '>= 14'}
-    dev: false
-
-  /yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /zod@3.21.4:
-    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
-    dev: false
diff --git a/packages/cli/test/fixtures/next-app-src/postcss.config.js b/packages/cli/test/fixtures/next-app-src/postcss.config.js
deleted file mode 100644
index 33ad091d26d..00000000000
--- a/packages/cli/test/fixtures/next-app-src/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/packages/cli/test/fixtures/next-app-src/src/app/favicon.ico b/packages/cli/test/fixtures/next-app-src/src/app/favicon.ico
deleted file mode 100644
index 4570eb8d926..00000000000
Binary files a/packages/cli/test/fixtures/next-app-src/src/app/favicon.ico and /dev/null differ
diff --git a/packages/cli/test/fixtures/next-app-src/src/app/layout.tsx b/packages/cli/test/fixtures/next-app-src/src/app/layout.tsx
deleted file mode 100644
index 0aed1de6f21..00000000000
--- a/packages/cli/test/fixtures/next-app-src/src/app/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import "./styles.css"
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  )
-}
diff --git a/packages/cli/test/fixtures/next-app-src/src/app/page.tsx b/packages/cli/test/fixtures/next-app-src/src/app/page.tsx
deleted file mode 100644
index e38c626e160..00000000000
--- a/packages/cli/test/fixtures/next-app-src/src/app/page.tsx
+++ /dev/null
@@ -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">src/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>
-  )
-}
diff --git a/packages/cli/test/fixtures/next-app-src/src/app/styles.css b/packages/cli/test/fixtures/next-app-src/src/app/styles.css
deleted file mode 100644
index fd81e885836..00000000000
--- a/packages/cli/test/fixtures/next-app-src/src/app/styles.css
+++ /dev/null
@@ -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));
-}
diff --git a/packages/cli/test/fixtures/next-app-src/tailwind.config.ts b/packages/cli/test/fixtures/next-app-src/tailwind.config.ts
deleted file mode 100644
index 1137927fb9c..00000000000
--- a/packages/cli/test/fixtures/next-app-src/tailwind.config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-nocheck
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/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
diff --git a/packages/cli/test/fixtures/next-app-src/tsconfig.json b/packages/cli/test/fixtures/next-app-src/tsconfig.json
deleted file mode 100644
index 7b5489b5aa2..00000000000
--- a/packages/cli/test/fixtures/next-app-src/tsconfig.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "#/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/cli/test/fixtures/next-app/app/globals.css b/packages/cli/test/fixtures/next-app/app/globals.css
deleted file mode 100644
index fd81e885836..00000000000
--- a/packages/cli/test/fixtures/next-app/app/globals.css
+++ /dev/null
@@ -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));
-}
diff --git a/packages/cli/test/fixtures/next-app/app/other.css b/packages/cli/test/fixtures/next-app/app/other.css
deleted file mode 100644
index aa1634c2550..00000000000
--- a/packages/cli/test/fixtures/next-app/app/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/cli/test/fixtures/next-app/next-env.d.ts b/packages/cli/test/fixtures/next-app/next-env.d.ts
deleted file mode 100644
index 4f11a03dc6c..00000000000
--- a/packages/cli/test/fixtures/next-app/next-env.d.ts
+++ /dev/null
@@ -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.
diff --git a/packages/cli/test/fixtures/next-app/pnpm-lock.yaml b/packages/cli/test/fixtures/next-app/pnpm-lock.yaml
deleted file mode 100644
index a8ca0205dce..00000000000
--- a/packages/cli/test/fixtures/next-app/pnpm-lock.yaml
+++ /dev/null
@@ -1,2620 +0,0 @@
-lockfileVersion: '6.0'
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
-dependencies:
-  '@types/node':
-    specifier: 20.6.2
-    version: 20.6.2
-  '@types/react':
-    specifier: 18.2.22
-    version: 18.2.22
-  '@types/react-dom':
-    specifier: 18.2.7
-    version: 18.2.7
-  autoprefixer:
-    specifier: 10.4.15
-    version: 10.4.15(postcss@8.4.30)
-  eslint:
-    specifier: 8.49.0
-    version: 8.49.0
-  eslint-config-next:
-    specifier: 13.4.19
-    version: 13.4.19(eslint@8.49.0)(typescript@5.2.2)
-  next:
-    specifier: 13.4.19
-    version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
-  postcss:
-    specifier: 8.4.30
-    version: 8.4.30
-  react:
-    specifier: 18.2.0
-    version: 18.2.0
-  react-dom:
-    specifier: 18.2.0
-    version: 18.2.0(react@18.2.0)
-  tailwindcss:
-    specifier: 3.3.3
-    version: 3.3.3
-  typescript:
-    specifier: 5.2.2
-    version: 5.2.2
-
-packages:
-
-  /@aashutoshrathi/word-wrap@1.2.6:
-    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /@alloc/quick-lru@5.2.0:
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /@babel/runtime@7.22.15:
-    resolution: {integrity: sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.14.0
-    dev: false
-
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.49.0):
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-    dependencies:
-      eslint: 8.49.0
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /@eslint-community/regexpp@4.8.1:
-    resolution: {integrity: sha512-PWiOzLIUAjN/w5K17PoF4n6sKBw0gqLHPhywmYHP4t1VFQQVYeb1yWsJwnMVEMl3tUHME7X/SJPZLmtG7XBDxQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-    dev: false
-
-  /@eslint/eslintrc@2.1.2:
-    resolution: {integrity: sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 9.6.1
-      globals: 13.21.0
-      ignore: 5.2.4
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@eslint/js@8.49.0:
-    resolution: {integrity: sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: false
-
-  /@humanwhocodes/config-array@0.11.11:
-    resolution: {integrity: sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==}
-    engines: {node: '>=10.10.0'}
-    dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@humanwhocodes/module-importer@1.0.1:
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
-    dev: false
-
-  /@humanwhocodes/object-schema@1.2.1:
-    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
-    dev: false
-
-  /@jridgewell/gen-mapping@0.3.3:
-    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.19
-    dev: false
-
-  /@jridgewell/resolve-uri@3.1.1:
-    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/set-array@1.1.2:
-    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/sourcemap-codec@1.4.15:
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: false
-
-  /@jridgewell/trace-mapping@0.3.19:
-    resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: false
-
-  /@next/env@13.4.19:
-    resolution: {integrity: sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==}
-    dev: false
-
-  /@next/eslint-plugin-next@13.4.19:
-    resolution: {integrity: sha512-N/O+zGb6wZQdwu6atMZHbR7T9Np5SUFUjZqCbj0sXm+MwQO35M8TazVB4otm87GkXYs2l6OPwARd3/PUWhZBVQ==}
-    dependencies:
-      glob: 7.1.7
-    dev: false
-
-  /@next/swc-darwin-arm64@13.4.19:
-    resolution: {integrity: sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-darwin-x64@13.4.19:
-    resolution: {integrity: sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-gnu@13.4.19:
-    resolution: {integrity: sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-musl@13.4.19:
-    resolution: {integrity: sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-gnu@13.4.19:
-    resolution: {integrity: sha512-htwOEagMa/CXNykFFeAHHvMJeqZfNQEoQvHfsA4wgg5QqGNqD5soeCer4oGlCol6NGUxknrQO6VEustcv+Md+g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-musl@13.4.19:
-    resolution: {integrity: sha512-4Gj4vvtbK1JH8ApWTT214b3GwUh9EKKQjY41hH/t+u55Knxi/0wesMzwQRhppK6Ddalhu0TEttbiJ+wRcoEj5Q==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-arm64-msvc@13.4.19:
-    resolution: {integrity: sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-ia32-msvc@13.4.19:
-    resolution: {integrity: sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-x64-msvc@13.4.19:
-    resolution: {integrity: sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@nodelib/fs.scandir@2.1.5:
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-    dev: false
-
-  /@nodelib/fs.stat@2.0.5:
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-    dev: false
-
-  /@nodelib/fs.walk@1.2.8:
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.15.0
-    dev: false
-
-  /@rushstack/eslint-patch@1.4.0:
-    resolution: {integrity: sha512-cEjvTPU32OM9lUFegJagO0mRnIn+rbqrG89vV8/xLnLFX0DoR0r1oy5IlTga71Q7uT3Qus7qm7wgeiMT/+Irlg==}
-    dev: false
-
-  /@swc/helpers@0.5.1:
-    resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==}
-    dependencies:
-      tslib: 2.6.2
-    dev: false
-
-  /@types/json5@0.0.29:
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
-    dev: false
-
-  /@types/node@20.6.2:
-    resolution: {integrity: sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==}
-    dev: false
-
-  /@types/prop-types@15.7.6:
-    resolution: {integrity: sha512-RK/kBbYOQQHLYj9Z95eh7S6t7gq4Ojt/NT8HTk8bWVhA5DaF+5SMnxHKkP4gPNN3wAZkKP+VjAf0ebtYzf+fxg==}
-    dev: false
-
-  /@types/react-dom@18.2.7:
-    resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
-    dependencies:
-      '@types/react': 18.2.22
-    dev: false
-
-  /@types/react@18.2.22:
-    resolution: {integrity: sha512-60fLTOLqzarLED2O3UQImc/lsNRgG0jE/a1mPW9KjMemY0LMITWEsbS4VvZ4p6rorEHd5YKxxmMKSDK505GHpA==}
-    dependencies:
-      '@types/prop-types': 15.7.6
-      '@types/scheduler': 0.16.3
-      csstype: 3.1.2
-    dev: false
-
-  /@types/scheduler@0.16.3:
-    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
-    dev: false
-
-  /@typescript-eslint/parser@6.7.2(eslint@8.49.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-KA3E4ox0ws+SPyxQf9iSI25R6b4Ne78ORhNHeVKrPQnoYsb9UhieoiRoJgrzgEeKGOXhcY1i8YtOeCHHTDa6Fw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.7.2
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/typescript-estree': 6.7.2(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.7.2
-      debug: 4.3.4
-      eslint: 8.49.0
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@typescript-eslint/scope-manager@6.7.2:
-    resolution: {integrity: sha512-bgi6plgyZjEqapr7u2mhxGR6E8WCzKNUFWNh6fkpVe9+yzRZeYtDTbsIBzKbcxI+r1qVWt6VIoMSNZ4r2A+6Yw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/visitor-keys': 6.7.2
-    dev: false
-
-  /@typescript-eslint/types@6.7.2:
-    resolution: {integrity: sha512-flJYwMYgnUNDAN9/GAI3l8+wTmvTYdv64fcH8aoJK76Y+1FCZ08RtI5zDerM/FYT5DMkAc+19E4aLmd5KqdFyg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dev: false
-
-  /@typescript-eslint/typescript-estree@6.7.2(typescript@5.2.2):
-    resolution: {integrity: sha512-kiJKVMLkoSciGyFU0TOY0fRxnp9qq1AzVOHNeN1+B9erKFCJ4Z8WdjAkKQPP+b1pWStGFqezMLltxO+308dJTQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/visitor-keys': 6.7.2
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@typescript-eslint/visitor-keys@6.7.2:
-    resolution: {integrity: sha512-uVw9VIMFBUTz8rIeaUT3fFe8xIUx8r4ywAdlQv1ifH+6acn/XF8Y6rwJ7XNmkNMDrTW+7+vxFFPIF40nJCVsMQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /acorn-jsx@5.3.2(acorn@8.10.0):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.10.0
-    dev: false
-
-  /acorn@8.10.0:
-    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: false
-
-  /ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-    dev: false
-
-  /ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-    dependencies:
-      color-convert: 2.0.1
-    dev: false
-
-  /any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: false
-
-  /anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-    dev: false
-
-  /arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: false
-
-  /argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: false
-
-  /aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
-
-  /array-buffer-byte-length@1.0.0:
-    resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
-    dependencies:
-      call-bind: 1.0.2
-      is-array-buffer: 3.0.2
-    dev: false
-
-  /array-includes@3.1.7:
-    resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      is-string: 1.0.7
-    dev: false
-
-  /array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /array.prototype.findlastindex@1.2.3:
-    resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /array.prototype.flat@1.3.2:
-    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-    dev: false
-
-  /array.prototype.flatmap@1.3.2:
-    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-    dev: false
-
-  /array.prototype.tosorted@1.1.2:
-    resolution: {integrity: sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /arraybuffer.prototype.slice@1.0.2:
-    resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      is-array-buffer: 3.0.2
-      is-shared-array-buffer: 1.0.2
-    dev: false
-
-  /ast-types-flow@0.0.7:
-    resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
-    dev: false
-
-  /asynciterator.prototype@1.0.0:
-    resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /autoprefixer@10.4.15(postcss@8.4.30):
-    resolution: {integrity: sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      browserslist: 4.21.10
-      caniuse-lite: 1.0.30001538
-      fraction.js: 4.3.6
-      normalize-range: 0.1.2
-      picocolors: 1.0.0
-      postcss: 8.4.30
-      postcss-value-parser: 4.2.0
-    dev: false
-
-  /available-typed-arrays@1.0.5:
-    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /axe-core@4.8.1:
-    resolution: {integrity: sha512-9l850jDDPnKq48nbad8SiEelCv4OrUWrKab/cPj0GScVg6cb6NbCCt/Ulk26QEq5jP9NnGr04Bit1BHyV6r5CQ==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /axobject-query@3.2.1:
-    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
-
-  /balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: false
-
-  /binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-    dev: false
-
-  /braces@3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
-    engines: {node: '>=8'}
-    dependencies:
-      fill-range: 7.0.1
-    dev: false
-
-  /browserslist@4.21.10:
-    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001538
-      electron-to-chromium: 1.4.523
-      node-releases: 2.0.13
-      update-browserslist-db: 1.0.11(browserslist@4.21.10)
-    dev: false
-
-  /busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
-    dependencies:
-      streamsearch: 1.1.0
-    dev: false
-
-  /call-bind@1.0.2:
-    resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
-    dependencies:
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /caniuse-lite@1.0.30001538:
-    resolution: {integrity: sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==}
-    dev: false
-
-  /chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-    dev: false
-
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
-    engines: {node: '>= 8.10.0'}
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.2
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: false
-
-  /client-only@0.0.1:
-    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
-
-  /color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-    dependencies:
-      color-name: 1.1.4
-    dev: false
-
-  /color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: false
-
-  /commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: false
-
-  /cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
-    engines: {node: '>= 8'}
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-    dev: false
-
-  /cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: false
-
-  /csstype@3.1.2:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: false
-
-  /damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-    dev: false
-
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-    dev: false
-
-  /debug@4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.2
-    dev: false
-
-  /deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-    dev: false
-
-  /define-data-property@1.1.0:
-    resolution: {integrity: sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      gopd: 1.0.1
-      has-property-descriptors: 1.0.0
-    dev: false
-
-  /define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.0
-      has-property-descriptors: 1.0.0
-      object-keys: 1.1.1
-    dev: false
-
-  /dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: false
-
-  /dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
-    dependencies:
-      path-type: 4.0.0
-    dev: false
-
-  /dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: false
-
-  /doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: false
-
-  /doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: false
-
-  /electron-to-chromium@1.4.523:
-    resolution: {integrity: sha512-9AreocSUWnzNtvLcbpng6N+GkXnCcBR80IQkxRC9Dfdyg4gaWNUPBujAHUpKkiUkoSoR9UlhA4zD/IgBklmhzg==}
-    dev: false
-
-  /emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: false
-
-  /enhanced-resolve@5.15.0:
-    resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.2.1
-    dev: false
-
-  /es-abstract@1.22.2:
-    resolution: {integrity: sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      arraybuffer.prototype.slice: 1.0.2
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      es-set-tostringtag: 2.0.1
-      es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.6
-      get-intrinsic: 1.2.1
-      get-symbol-description: 1.0.0
-      globalthis: 1.0.3
-      gopd: 1.0.1
-      has: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      is-array-buffer: 3.0.2
-      is-callable: 1.2.7
-      is-negative-zero: 2.0.2
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.2
-      is-string: 1.0.7
-      is-typed-array: 1.1.12
-      is-weakref: 1.0.2
-      object-inspect: 1.12.3
-      object-keys: 1.1.1
-      object.assign: 4.1.4
-      regexp.prototype.flags: 1.5.1
-      safe-array-concat: 1.0.1
-      safe-regex-test: 1.0.0
-      string.prototype.trim: 1.2.8
-      string.prototype.trimend: 1.0.7
-      string.prototype.trimstart: 1.0.7
-      typed-array-buffer: 1.0.0
-      typed-array-byte-length: 1.0.0
-      typed-array-byte-offset: 1.0.0
-      typed-array-length: 1.0.4
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.11
-    dev: false
-
-  /es-iterator-helpers@1.0.15:
-    resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==}
-    dependencies:
-      asynciterator.prototype: 1.0.0
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-set-tostringtag: 2.0.1
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
-      globalthis: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      iterator.prototype: 1.1.2
-      safe-array-concat: 1.0.1
-    dev: false
-
-  /es-set-tostringtag@2.0.1:
-    resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /es-shim-unscopables@1.0.0:
-    resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==}
-    dependencies:
-      has: 1.0.3
-    dev: false
-
-  /es-to-primitive@1.2.1:
-    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
-    dev: false
-
-  /escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /eslint-config-next@13.4.19(eslint@8.49.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-WE8367sqMnjhWHvR5OivmfwENRQ1ixfNE9hZwQqNCsd+iM3KnuMc1V8Pt6ytgjxjf23D+xbesADv9x3xaKfT3g==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@next/eslint-plugin-next': 13.4.19
-      '@rushstack/eslint-patch': 1.4.0
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      eslint-plugin-jsx-a11y: 6.7.1(eslint@8.49.0)
-      eslint-plugin-react: 7.33.2(eslint@8.49.0)
-      eslint-plugin-react-hooks: 4.6.0(eslint@8.49.0)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.13.0
-      resolve: 1.22.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-import-resolver-typescript@3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0):
-    resolution: {integrity: sha512-QTHR9ddNnn35RTxlaEnx2gCxqFlF2SEN0SE2d17SqwyM7YOSI2GHWRYp5BiRkObTUNYPupC/3Fq2a0PpT+EKpg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-    dependencies:
-      debug: 4.3.4
-      enhanced-resolve: 5.15.0
-      eslint: 8.49.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      fast-glob: 3.3.1
-      get-tsconfig: 4.7.0
-      is-core-module: 2.13.0
-      is-glob: 4.0.3
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0):
-    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      debug: 3.2.7
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0)
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0):
-    resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      array-includes: 3.1.7
-      array.prototype.findlastindex: 1.2.3
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      has: 1.0.3
-      is-core-module: 2.13.0
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.7
-      object.groupby: 1.0.1
-      object.values: 1.1.7
-      semver: 6.3.1
-      tsconfig-paths: 3.14.2
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-plugin-jsx-a11y@6.7.1(eslint@8.49.0):
-    resolution: {integrity: sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      '@babel/runtime': 7.22.15
-      aria-query: 5.3.0
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      ast-types-flow: 0.0.7
-      axe-core: 4.8.1
-      axobject-query: 3.2.1
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 8.49.0
-      has: 1.0.3
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.5
-      minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-      semver: 6.3.1
-    dev: false
-
-  /eslint-plugin-react-hooks@4.6.0(eslint@8.49.0):
-    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-    dependencies:
-      eslint: 8.49.0
-    dev: false
-
-  /eslint-plugin-react@7.33.2(eslint@8.49.0):
-    resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      array.prototype.tosorted: 1.1.2
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.0.15
-      eslint: 8.49.0
-      estraverse: 5.3.0
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-      object.hasown: 1.1.3
-      object.values: 1.1.7
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.4
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.10
-    dev: false
-
-  /eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: false
-
-  /eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: false
-
-  /eslint@8.49.0:
-    resolution: {integrity: sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.49.0)
-      '@eslint-community/regexpp': 4.8.1
-      '@eslint/eslintrc': 2.1.2
-      '@eslint/js': 8.49.0
-      '@humanwhocodes/config-array': 0.11.11
-      '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      doctrine: 3.0.0
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.5.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      globals: 13.21.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.10.0
-      acorn-jsx: 5.3.2(acorn@8.10.0)
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
-    engines: {node: '>=0.10'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: false
-
-  /esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: false
-
-  /estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
-    dev: false
-
-  /esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-    dev: false
-
-  /fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-    dev: false
-
-  /fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-    dev: false
-
-  /fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-    dev: false
-
-  /fastq@1.15.0:
-    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
-    dependencies:
-      reusify: 1.0.4
-    dev: false
-
-  /file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
-    dependencies:
-      flat-cache: 3.1.0
-    dev: false
-
-  /fill-range@7.0.1:
-    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
-    engines: {node: '>=8'}
-    dependencies:
-      to-regex-range: 5.0.1
-    dev: false
-
-  /find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-    dev: false
-
-  /flat-cache@3.1.0:
-    resolution: {integrity: sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      flatted: 3.2.9
-      keyv: 4.5.3
-      rimraf: 3.0.2
-    dev: false
-
-  /flatted@3.2.9:
-    resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
-    dev: false
-
-  /for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
-    dependencies:
-      is-callable: 1.2.7
-    dev: false
-
-  /fraction.js@4.3.6:
-    resolution: {integrity: sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==}
-    dev: false
-
-  /fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: false
-
-  /fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /function-bind@1.1.1:
-    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: false
-
-  /function.prototype.name@1.1.6:
-    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      functions-have-names: 1.2.3
-    dev: false
-
-  /functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-    dev: false
-
-  /get-intrinsic@1.2.1:
-    resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
-    dependencies:
-      function-bind: 1.1.1
-      has: 1.0.3
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-    dev: false
-
-  /get-symbol-description@1.0.0:
-    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /get-tsconfig@4.7.0:
-    resolution: {integrity: sha512-pmjiZ7xtB8URYm74PlGJozDNyhvsVLUcpBa8DZBG3bWHwaHa9bPiRpiSfovw+fjhwONSCWKRyk+JQHEGZmMrzw==}
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-    dev: false
-
-  /glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: false
-
-  /glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: false
-
-  /glob-to-regexp@0.4.1:
-    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-    dev: false
-
-  /glob@7.1.6:
-    resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /glob@7.1.7:
-    resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /globals@13.21.0:
-    resolution: {integrity: sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==}
-    engines: {node: '>=8'}
-    dependencies:
-      type-fest: 0.20.2
-    dev: false
-
-  /globalthis@1.0.3:
-    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-properties: 1.2.1
-    dev: false
-
-  /globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.1
-      ignore: 5.2.4
-      merge2: 1.4.1
-      slash: 3.0.0
-    dev: false
-
-  /gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-    dev: false
-
-  /graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-    dev: false
-
-  /has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
-    dev: false
-
-  /has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /has-property-descriptors@1.0.0:
-    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /has-proto@1.0.1:
-    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /has-symbols@1.0.3:
-    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /has-tostringtag@1.0.0:
-    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /has@1.0.3:
-    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
-    engines: {node: '>= 0.4.0'}
-    dependencies:
-      function-bind: 1.1.1
-    dev: false
-
-  /ignore@5.2.4:
-    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
-    engines: {node: '>= 4'}
-    dev: false
-
-  /import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-    dev: false
-
-  /imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
-    dev: false
-
-  /inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-    dev: false
-
-  /inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: false
-
-  /internal-slot@1.0.5:
-    resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      side-channel: 1.0.4
-    dev: false
-
-  /is-array-buffer@3.0.2:
-    resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /is-async-function@2.0.0:
-    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
-    dependencies:
-      has-bigints: 1.0.2
-    dev: false
-
-  /is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-    dependencies:
-      binary-extensions: 2.2.0
-    dev: false
-
-  /is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /is-core-module@2.13.0:
-    resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
-    dependencies:
-      has: 1.0.3
-    dev: false
-
-  /is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /is-finalizationregistry@1.0.2:
-    resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-generator-function@1.0.10:
-    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-extglob: 2.1.1
-    dev: false
-
-  /is-map@2.0.2:
-    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
-    dev: false
-
-  /is-negative-zero@2.0.2:
-    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-    dev: false
-
-  /is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /is-regex@1.1.4:
-    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-set@2.0.2:
-    resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
-    dev: false
-
-  /is-shared-array-buffer@1.0.2:
-    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /is-typed-array@1.1.12:
-    resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      which-typed-array: 1.1.11
-    dev: false
-
-  /is-weakmap@2.0.1:
-    resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
-    dev: false
-
-  /is-weakref@1.0.2:
-    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-weakset@2.0.2:
-    resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-    dev: false
-
-  /isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: false
-
-  /iterator.prototype@1.1.2:
-    resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
-    dependencies:
-      define-properties: 1.2.1
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      reflect.getprototypeof: 1.0.4
-      set-function-name: 2.0.1
-    dev: false
-
-  /jiti@1.20.0:
-    resolution: {integrity: sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==}
-    hasBin: true
-    dev: false
-
-  /js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: false
-
-  /js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
-    dependencies:
-      argparse: 2.0.1
-    dev: false
-
-  /json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-    dev: false
-
-  /json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-    dev: false
-
-  /json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-    dev: false
-
-  /json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
-    dependencies:
-      minimist: 1.2.8
-    dev: false
-
-  /jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      array-includes: 3.1.7
-      array.prototype.flat: 1.3.2
-      object.assign: 4.1.4
-      object.values: 1.1.7
-    dev: false
-
-  /keyv@4.5.3:
-    resolution: {integrity: sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==}
-    dependencies:
-      json-buffer: 3.0.1
-    dev: false
-
-  /language-subtag-registry@0.3.22:
-    resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
-    dev: false
-
-  /language-tags@1.0.5:
-    resolution: {integrity: sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==}
-    dependencies:
-      language-subtag-registry: 0.3.22
-    dev: false
-
-  /levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: false
-
-  /lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: false
-
-  /locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
-    dependencies:
-      p-locate: 5.0.0
-    dev: false
-
-  /lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: false
-
-  /loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-    dependencies:
-      js-tokens: 4.0.0
-    dev: false
-
-  /lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
-    dependencies:
-      yallist: 4.0.0
-    dev: false
-
-  /merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-    dev: false
-
-  /micromatch@4.0.5:
-    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
-    engines: {node: '>=8.6'}
-    dependencies:
-      braces: 3.0.2
-      picomatch: 2.3.1
-    dev: false
-
-  /minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-    dependencies:
-      brace-expansion: 1.1.11
-    dev: false
-
-  /minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: false
-
-  /ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: false
-
-  /ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-    dev: false
-
-  /mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-    dev: false
-
-  /nanoid@3.3.6:
-    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-    dev: false
-
-  /natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-    dev: false
-
-  /next@13.4.19(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==}
-    engines: {node: '>=16.8.0'}
-    hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      sass:
-        optional: true
-    dependencies:
-      '@next/env': 13.4.19
-      '@swc/helpers': 0.5.1
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001538
-      postcss: 8.4.14
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(react@18.2.0)
-      watchpack: 2.4.0
-      zod: 3.21.4
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 13.4.19
-      '@next/swc-darwin-x64': 13.4.19
-      '@next/swc-linux-arm64-gnu': 13.4.19
-      '@next/swc-linux-arm64-musl': 13.4.19
-      '@next/swc-linux-x64-gnu': 13.4.19
-      '@next/swc-linux-x64-musl': 13.4.19
-      '@next/swc-win32-arm64-msvc': 13.4.19
-      '@next/swc-win32-ia32-msvc': 13.4.19
-      '@next/swc-win32-x64-msvc': 13.4.19
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-    dev: false
-
-  /node-releases@2.0.13:
-    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
-    dev: false
-
-  /normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /object-inspect@1.12.3:
-    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
-    dev: false
-
-  /object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /object.assign@4.1.4:
-    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      has-symbols: 1.0.3
-      object-keys: 1.1.1
-    dev: false
-
-  /object.entries@1.1.7:
-    resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.fromentries@2.0.7:
-    resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.groupby@1.0.1:
-    resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /object.hasown@1.1.3:
-    resolution: {integrity: sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==}
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.values@1.1.7:
-    resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-    dependencies:
-      wrappy: 1.0.2
-    dev: false
-
-  /optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: false
-
-  /p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      yocto-queue: 0.1.0
-    dev: false
-
-  /p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
-    dependencies:
-      p-limit: 3.1.0
-    dev: false
-
-  /parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
-    dependencies:
-      callsites: 3.1.0
-    dev: false
-
-  /path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: false
-
-  /path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /picocolors@1.0.0:
-    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: false
-
-  /picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
-    dev: false
-
-  /pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /postcss-import@15.1.0(postcss@8.4.30):
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-    dependencies:
-      postcss: 8.4.30
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.6
-    dev: false
-
-  /postcss-js@4.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.30
-    dev: false
-
-  /postcss-load-config@4.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 2.1.0
-      postcss: 8.4.30
-      yaml: 2.3.2
-    dev: false
-
-  /postcss-nested@6.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-    dependencies:
-      postcss: 8.4.30
-      postcss-selector-parser: 6.0.13
-    dev: false
-
-  /postcss-selector-parser@6.0.13:
-    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-    dev: false
-
-  /postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: false
-
-  /postcss@8.4.14:
-    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
-  /postcss@8.4.30:
-    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
-  /prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-    dev: false
-
-  /prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-    dev: false
-
-  /punycode@2.3.0:
-    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: false
-
-  /react-dom@18.2.0(react@18.2.0):
-    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
-    peerDependencies:
-      react: ^18.2.0
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.2.0
-      scheduler: 0.23.0
-    dev: false
-
-  /react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-    dev: false
-
-  /react@18.2.0:
-    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
-  /read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-    dependencies:
-      pify: 2.3.0
-    dev: false
-
-  /readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-    dependencies:
-      picomatch: 2.3.1
-    dev: false
-
-  /reflect.getprototypeof@1.0.4:
-    resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      globalthis: 1.0.3
-      which-builtin-type: 1.1.3
-    dev: false
-
-  /regenerator-runtime@0.14.0:
-    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
-    dev: false
-
-  /regexp.prototype.flags@1.5.1:
-    resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      set-function-name: 2.0.1
-    dev: false
-
-  /resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-    dev: false
-
-  /resolve@1.22.6:
-    resolution: {integrity: sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==}
-    hasBin: true
-    dependencies:
-      is-core-module: 2.13.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: false
-
-  /resolve@2.0.0-next.4:
-    resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
-    hasBin: true
-    dependencies:
-      is-core-module: 2.13.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: false
-
-  /reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: false
-
-  /rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    hasBin: true
-    dependencies:
-      glob: 7.2.3
-    dev: false
-
-  /run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-    dependencies:
-      queue-microtask: 1.2.3
-    dev: false
-
-  /safe-array-concat@1.0.1:
-    resolution: {integrity: sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==}
-    engines: {node: '>=0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      isarray: 2.0.5
-    dev: false
-
-  /safe-regex-test@1.0.0:
-    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-regex: 1.1.4
-    dev: false
-
-  /scheduler@0.23.0:
-    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
-  /semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-    dev: false
-
-  /semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      lru-cache: 6.0.0
-    dev: false
-
-  /set-function-name@2.0.1:
-    resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.0
-      functions-have-names: 1.2.3
-      has-property-descriptors: 1.0.0
-    dev: false
-
-  /shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-    dependencies:
-      shebang-regex: 3.0.0
-    dev: false
-
-  /shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /side-channel@1.0.4:
-    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      object-inspect: 1.12.3
-    dev: false
-
-  /slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
-    dev: false
-
-  /string.prototype.matchall@4.0.10:
-    resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      regexp.prototype.flags: 1.5.1
-      set-function-name: 2.0.1
-      side-channel: 1.0.4
-    dev: false
-
-  /string.prototype.trim@1.2.8:
-    resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /string.prototype.trimend@1.0.7:
-    resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /string.prototype.trimstart@1.0.7:
-    resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
-    dependencies:
-      ansi-regex: 5.0.1
-    dev: false
-
-  /strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /styled-jsx@5.1.1(react@18.2.0):
-    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
-    engines: {node: '>= 12.0.0'}
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
-    dependencies:
-      client-only: 0.0.1
-      react: 18.2.0
-    dev: false
-
-  /sucrase@3.34.0:
-    resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==}
-    engines: {node: '>=8'}
-    hasBin: true
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
-      commander: 4.1.1
-      glob: 7.1.6
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
-    dev: false
-
-  /supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
-    dependencies:
-      has-flag: 4.0.0
-    dev: false
-
-  /supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /tailwindcss@3.3.3:
-    resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.5.3
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.1
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.20.0
-      lilconfig: 2.1.0
-      micromatch: 4.0.5
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.30
-      postcss-import: 15.1.0(postcss@8.4.30)
-      postcss-js: 4.0.1(postcss@8.4.30)
-      postcss-load-config: 4.0.1(postcss@8.4.30)
-      postcss-nested: 6.0.1(postcss@8.4.30)
-      postcss-selector-parser: 6.0.13
-      resolve: 1.22.6
-      sucrase: 3.34.0
-    transitivePeerDependencies:
-      - ts-node
-    dev: false
-
-  /tapable@2.2.1:
-    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-    dev: false
-
-  /thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-    dependencies:
-      thenify: 3.3.1
-    dev: false
-
-  /thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-    dependencies:
-      any-promise: 1.3.0
-    dev: false
-
-  /to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
-    dependencies:
-      is-number: 7.0.0
-    dev: false
-
-  /ts-api-utils@1.0.3(typescript@5.2.2):
-    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
-    engines: {node: '>=16.13.0'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-    dependencies:
-      typescript: 5.2.2
-    dev: false
-
-  /ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: false
-
-  /tsconfig-paths@3.14.2:
-    resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
-    dependencies:
-      '@types/json5': 0.0.29
-      json5: 1.0.2
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-    dev: false
-
-  /tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: false
-
-  /type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-    dev: false
-
-  /type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /typed-array-buffer@1.0.0:
-    resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-byte-length@1.0.0:
-    resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-byte-offset@1.0.0:
-    resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-length@1.0.4:
-    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
-    dependencies:
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typescript@5.2.2:
-    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-    dev: false
-
-  /unbox-primitive@1.0.2:
-    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
-    dependencies:
-      call-bind: 1.0.2
-      has-bigints: 1.0.2
-      has-symbols: 1.0.3
-      which-boxed-primitive: 1.0.2
-    dev: false
-
-  /update-browserslist-db@1.0.11(browserslist@4.21.10):
-    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: 4.21.10
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: false
-
-  /uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-    dependencies:
-      punycode: 2.3.0
-    dev: false
-
-  /util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: false
-
-  /watchpack@2.4.0:
-    resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-    dev: false
-
-  /which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
-    dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
-    dev: false
-
-  /which-builtin-type@1.1.3:
-    resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      function.prototype.name: 1.1.6
-      has-tostringtag: 1.0.0
-      is-async-function: 2.0.0
-      is-date-object: 1.0.5
-      is-finalizationregistry: 1.0.2
-      is-generator-function: 1.0.10
-      is-regex: 1.1.4
-      is-weakref: 1.0.2
-      isarray: 2.0.5
-      which-boxed-primitive: 1.0.2
-      which-collection: 1.0.1
-      which-typed-array: 1.1.11
-    dev: false
-
-  /which-collection@1.0.1:
-    resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
-    dependencies:
-      is-map: 2.0.2
-      is-set: 2.0.2
-      is-weakmap: 2.0.1
-      is-weakset: 2.0.2
-    dev: false
-
-  /which-typed-array@1.1.11:
-    resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-    dependencies:
-      isexe: 2.0.0
-    dev: false
-
-  /wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: false
-
-  /yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-    dev: false
-
-  /yaml@2.3.2:
-    resolution: {integrity: sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==}
-    engines: {node: '>= 14'}
-    dev: false
-
-  /yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /zod@3.21.4:
-    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
-    dev: false
diff --git a/packages/cli/test/fixtures/next-app/postcss.config.js b/packages/cli/test/fixtures/next-app/postcss.config.js
deleted file mode 100644
index 33ad091d26d..00000000000
--- a/packages/cli/test/fixtures/next-app/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/next-env.d.ts b/packages/cli/test/fixtures/next-pages-src/next-env.d.ts
deleted file mode 100644
index 4f11a03dc6c..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/next-env.d.ts
+++ /dev/null
@@ -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.
diff --git a/packages/cli/test/fixtures/next-pages-src/next.config.js b/packages/cli/test/fixtures/next-pages-src/next.config.js
deleted file mode 100644
index a843cbee09a..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/next.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
-
-module.exports = nextConfig
diff --git a/packages/cli/test/fixtures/next-pages-src/other.css b/packages/cli/test/fixtures/next-pages-src/other.css
deleted file mode 100644
index aa1634c2550..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/package.json b/packages/cli/test/fixtures/next-pages-src/package.json
deleted file mode 100644
index d5be9c4b809..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "test-pages-src",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  }
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/pnpm-lock.yaml b/packages/cli/test/fixtures/next-pages-src/pnpm-lock.yaml
deleted file mode 100644
index a8ca0205dce..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/pnpm-lock.yaml
+++ /dev/null
@@ -1,2620 +0,0 @@
-lockfileVersion: '6.0'
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
-dependencies:
-  '@types/node':
-    specifier: 20.6.2
-    version: 20.6.2
-  '@types/react':
-    specifier: 18.2.22
-    version: 18.2.22
-  '@types/react-dom':
-    specifier: 18.2.7
-    version: 18.2.7
-  autoprefixer:
-    specifier: 10.4.15
-    version: 10.4.15(postcss@8.4.30)
-  eslint:
-    specifier: 8.49.0
-    version: 8.49.0
-  eslint-config-next:
-    specifier: 13.4.19
-    version: 13.4.19(eslint@8.49.0)(typescript@5.2.2)
-  next:
-    specifier: 13.4.19
-    version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
-  postcss:
-    specifier: 8.4.30
-    version: 8.4.30
-  react:
-    specifier: 18.2.0
-    version: 18.2.0
-  react-dom:
-    specifier: 18.2.0
-    version: 18.2.0(react@18.2.0)
-  tailwindcss:
-    specifier: 3.3.3
-    version: 3.3.3
-  typescript:
-    specifier: 5.2.2
-    version: 5.2.2
-
-packages:
-
-  /@aashutoshrathi/word-wrap@1.2.6:
-    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /@alloc/quick-lru@5.2.0:
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /@babel/runtime@7.22.15:
-    resolution: {integrity: sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.14.0
-    dev: false
-
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.49.0):
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-    dependencies:
-      eslint: 8.49.0
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /@eslint-community/regexpp@4.8.1:
-    resolution: {integrity: sha512-PWiOzLIUAjN/w5K17PoF4n6sKBw0gqLHPhywmYHP4t1VFQQVYeb1yWsJwnMVEMl3tUHME7X/SJPZLmtG7XBDxQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-    dev: false
-
-  /@eslint/eslintrc@2.1.2:
-    resolution: {integrity: sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 9.6.1
-      globals: 13.21.0
-      ignore: 5.2.4
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@eslint/js@8.49.0:
-    resolution: {integrity: sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: false
-
-  /@humanwhocodes/config-array@0.11.11:
-    resolution: {integrity: sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==}
-    engines: {node: '>=10.10.0'}
-    dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@humanwhocodes/module-importer@1.0.1:
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
-    dev: false
-
-  /@humanwhocodes/object-schema@1.2.1:
-    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
-    dev: false
-
-  /@jridgewell/gen-mapping@0.3.3:
-    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.19
-    dev: false
-
-  /@jridgewell/resolve-uri@3.1.1:
-    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/set-array@1.1.2:
-    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/sourcemap-codec@1.4.15:
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: false
-
-  /@jridgewell/trace-mapping@0.3.19:
-    resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: false
-
-  /@next/env@13.4.19:
-    resolution: {integrity: sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==}
-    dev: false
-
-  /@next/eslint-plugin-next@13.4.19:
-    resolution: {integrity: sha512-N/O+zGb6wZQdwu6atMZHbR7T9Np5SUFUjZqCbj0sXm+MwQO35M8TazVB4otm87GkXYs2l6OPwARd3/PUWhZBVQ==}
-    dependencies:
-      glob: 7.1.7
-    dev: false
-
-  /@next/swc-darwin-arm64@13.4.19:
-    resolution: {integrity: sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-darwin-x64@13.4.19:
-    resolution: {integrity: sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-gnu@13.4.19:
-    resolution: {integrity: sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-musl@13.4.19:
-    resolution: {integrity: sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-gnu@13.4.19:
-    resolution: {integrity: sha512-htwOEagMa/CXNykFFeAHHvMJeqZfNQEoQvHfsA4wgg5QqGNqD5soeCer4oGlCol6NGUxknrQO6VEustcv+Md+g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-musl@13.4.19:
-    resolution: {integrity: sha512-4Gj4vvtbK1JH8ApWTT214b3GwUh9EKKQjY41hH/t+u55Knxi/0wesMzwQRhppK6Ddalhu0TEttbiJ+wRcoEj5Q==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-arm64-msvc@13.4.19:
-    resolution: {integrity: sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-ia32-msvc@13.4.19:
-    resolution: {integrity: sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-x64-msvc@13.4.19:
-    resolution: {integrity: sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@nodelib/fs.scandir@2.1.5:
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-    dev: false
-
-  /@nodelib/fs.stat@2.0.5:
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-    dev: false
-
-  /@nodelib/fs.walk@1.2.8:
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.15.0
-    dev: false
-
-  /@rushstack/eslint-patch@1.4.0:
-    resolution: {integrity: sha512-cEjvTPU32OM9lUFegJagO0mRnIn+rbqrG89vV8/xLnLFX0DoR0r1oy5IlTga71Q7uT3Qus7qm7wgeiMT/+Irlg==}
-    dev: false
-
-  /@swc/helpers@0.5.1:
-    resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==}
-    dependencies:
-      tslib: 2.6.2
-    dev: false
-
-  /@types/json5@0.0.29:
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
-    dev: false
-
-  /@types/node@20.6.2:
-    resolution: {integrity: sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==}
-    dev: false
-
-  /@types/prop-types@15.7.6:
-    resolution: {integrity: sha512-RK/kBbYOQQHLYj9Z95eh7S6t7gq4Ojt/NT8HTk8bWVhA5DaF+5SMnxHKkP4gPNN3wAZkKP+VjAf0ebtYzf+fxg==}
-    dev: false
-
-  /@types/react-dom@18.2.7:
-    resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
-    dependencies:
-      '@types/react': 18.2.22
-    dev: false
-
-  /@types/react@18.2.22:
-    resolution: {integrity: sha512-60fLTOLqzarLED2O3UQImc/lsNRgG0jE/a1mPW9KjMemY0LMITWEsbS4VvZ4p6rorEHd5YKxxmMKSDK505GHpA==}
-    dependencies:
-      '@types/prop-types': 15.7.6
-      '@types/scheduler': 0.16.3
-      csstype: 3.1.2
-    dev: false
-
-  /@types/scheduler@0.16.3:
-    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
-    dev: false
-
-  /@typescript-eslint/parser@6.7.2(eslint@8.49.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-KA3E4ox0ws+SPyxQf9iSI25R6b4Ne78ORhNHeVKrPQnoYsb9UhieoiRoJgrzgEeKGOXhcY1i8YtOeCHHTDa6Fw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.7.2
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/typescript-estree': 6.7.2(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.7.2
-      debug: 4.3.4
-      eslint: 8.49.0
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@typescript-eslint/scope-manager@6.7.2:
-    resolution: {integrity: sha512-bgi6plgyZjEqapr7u2mhxGR6E8WCzKNUFWNh6fkpVe9+yzRZeYtDTbsIBzKbcxI+r1qVWt6VIoMSNZ4r2A+6Yw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/visitor-keys': 6.7.2
-    dev: false
-
-  /@typescript-eslint/types@6.7.2:
-    resolution: {integrity: sha512-flJYwMYgnUNDAN9/GAI3l8+wTmvTYdv64fcH8aoJK76Y+1FCZ08RtI5zDerM/FYT5DMkAc+19E4aLmd5KqdFyg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dev: false
-
-  /@typescript-eslint/typescript-estree@6.7.2(typescript@5.2.2):
-    resolution: {integrity: sha512-kiJKVMLkoSciGyFU0TOY0fRxnp9qq1AzVOHNeN1+B9erKFCJ4Z8WdjAkKQPP+b1pWStGFqezMLltxO+308dJTQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/visitor-keys': 6.7.2
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@typescript-eslint/visitor-keys@6.7.2:
-    resolution: {integrity: sha512-uVw9VIMFBUTz8rIeaUT3fFe8xIUx8r4ywAdlQv1ifH+6acn/XF8Y6rwJ7XNmkNMDrTW+7+vxFFPIF40nJCVsMQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /acorn-jsx@5.3.2(acorn@8.10.0):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.10.0
-    dev: false
-
-  /acorn@8.10.0:
-    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: false
-
-  /ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-    dev: false
-
-  /ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-    dependencies:
-      color-convert: 2.0.1
-    dev: false
-
-  /any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: false
-
-  /anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-    dev: false
-
-  /arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: false
-
-  /argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: false
-
-  /aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
-
-  /array-buffer-byte-length@1.0.0:
-    resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
-    dependencies:
-      call-bind: 1.0.2
-      is-array-buffer: 3.0.2
-    dev: false
-
-  /array-includes@3.1.7:
-    resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      is-string: 1.0.7
-    dev: false
-
-  /array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /array.prototype.findlastindex@1.2.3:
-    resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /array.prototype.flat@1.3.2:
-    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-    dev: false
-
-  /array.prototype.flatmap@1.3.2:
-    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-    dev: false
-
-  /array.prototype.tosorted@1.1.2:
-    resolution: {integrity: sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /arraybuffer.prototype.slice@1.0.2:
-    resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      is-array-buffer: 3.0.2
-      is-shared-array-buffer: 1.0.2
-    dev: false
-
-  /ast-types-flow@0.0.7:
-    resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
-    dev: false
-
-  /asynciterator.prototype@1.0.0:
-    resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /autoprefixer@10.4.15(postcss@8.4.30):
-    resolution: {integrity: sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      browserslist: 4.21.10
-      caniuse-lite: 1.0.30001538
-      fraction.js: 4.3.6
-      normalize-range: 0.1.2
-      picocolors: 1.0.0
-      postcss: 8.4.30
-      postcss-value-parser: 4.2.0
-    dev: false
-
-  /available-typed-arrays@1.0.5:
-    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /axe-core@4.8.1:
-    resolution: {integrity: sha512-9l850jDDPnKq48nbad8SiEelCv4OrUWrKab/cPj0GScVg6cb6NbCCt/Ulk26QEq5jP9NnGr04Bit1BHyV6r5CQ==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /axobject-query@3.2.1:
-    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
-
-  /balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: false
-
-  /binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-    dev: false
-
-  /braces@3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
-    engines: {node: '>=8'}
-    dependencies:
-      fill-range: 7.0.1
-    dev: false
-
-  /browserslist@4.21.10:
-    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001538
-      electron-to-chromium: 1.4.523
-      node-releases: 2.0.13
-      update-browserslist-db: 1.0.11(browserslist@4.21.10)
-    dev: false
-
-  /busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
-    dependencies:
-      streamsearch: 1.1.0
-    dev: false
-
-  /call-bind@1.0.2:
-    resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
-    dependencies:
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /caniuse-lite@1.0.30001538:
-    resolution: {integrity: sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==}
-    dev: false
-
-  /chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-    dev: false
-
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
-    engines: {node: '>= 8.10.0'}
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.2
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: false
-
-  /client-only@0.0.1:
-    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
-
-  /color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-    dependencies:
-      color-name: 1.1.4
-    dev: false
-
-  /color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: false
-
-  /commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: false
-
-  /cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
-    engines: {node: '>= 8'}
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-    dev: false
-
-  /cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: false
-
-  /csstype@3.1.2:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: false
-
-  /damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-    dev: false
-
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-    dev: false
-
-  /debug@4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.2
-    dev: false
-
-  /deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-    dev: false
-
-  /define-data-property@1.1.0:
-    resolution: {integrity: sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      gopd: 1.0.1
-      has-property-descriptors: 1.0.0
-    dev: false
-
-  /define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.0
-      has-property-descriptors: 1.0.0
-      object-keys: 1.1.1
-    dev: false
-
-  /dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: false
-
-  /dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
-    dependencies:
-      path-type: 4.0.0
-    dev: false
-
-  /dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: false
-
-  /doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: false
-
-  /doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: false
-
-  /electron-to-chromium@1.4.523:
-    resolution: {integrity: sha512-9AreocSUWnzNtvLcbpng6N+GkXnCcBR80IQkxRC9Dfdyg4gaWNUPBujAHUpKkiUkoSoR9UlhA4zD/IgBklmhzg==}
-    dev: false
-
-  /emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: false
-
-  /enhanced-resolve@5.15.0:
-    resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.2.1
-    dev: false
-
-  /es-abstract@1.22.2:
-    resolution: {integrity: sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      arraybuffer.prototype.slice: 1.0.2
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      es-set-tostringtag: 2.0.1
-      es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.6
-      get-intrinsic: 1.2.1
-      get-symbol-description: 1.0.0
-      globalthis: 1.0.3
-      gopd: 1.0.1
-      has: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      is-array-buffer: 3.0.2
-      is-callable: 1.2.7
-      is-negative-zero: 2.0.2
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.2
-      is-string: 1.0.7
-      is-typed-array: 1.1.12
-      is-weakref: 1.0.2
-      object-inspect: 1.12.3
-      object-keys: 1.1.1
-      object.assign: 4.1.4
-      regexp.prototype.flags: 1.5.1
-      safe-array-concat: 1.0.1
-      safe-regex-test: 1.0.0
-      string.prototype.trim: 1.2.8
-      string.prototype.trimend: 1.0.7
-      string.prototype.trimstart: 1.0.7
-      typed-array-buffer: 1.0.0
-      typed-array-byte-length: 1.0.0
-      typed-array-byte-offset: 1.0.0
-      typed-array-length: 1.0.4
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.11
-    dev: false
-
-  /es-iterator-helpers@1.0.15:
-    resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==}
-    dependencies:
-      asynciterator.prototype: 1.0.0
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-set-tostringtag: 2.0.1
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
-      globalthis: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      iterator.prototype: 1.1.2
-      safe-array-concat: 1.0.1
-    dev: false
-
-  /es-set-tostringtag@2.0.1:
-    resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /es-shim-unscopables@1.0.0:
-    resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==}
-    dependencies:
-      has: 1.0.3
-    dev: false
-
-  /es-to-primitive@1.2.1:
-    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
-    dev: false
-
-  /escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /eslint-config-next@13.4.19(eslint@8.49.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-WE8367sqMnjhWHvR5OivmfwENRQ1ixfNE9hZwQqNCsd+iM3KnuMc1V8Pt6ytgjxjf23D+xbesADv9x3xaKfT3g==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@next/eslint-plugin-next': 13.4.19
-      '@rushstack/eslint-patch': 1.4.0
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      eslint-plugin-jsx-a11y: 6.7.1(eslint@8.49.0)
-      eslint-plugin-react: 7.33.2(eslint@8.49.0)
-      eslint-plugin-react-hooks: 4.6.0(eslint@8.49.0)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.13.0
-      resolve: 1.22.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-import-resolver-typescript@3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0):
-    resolution: {integrity: sha512-QTHR9ddNnn35RTxlaEnx2gCxqFlF2SEN0SE2d17SqwyM7YOSI2GHWRYp5BiRkObTUNYPupC/3Fq2a0PpT+EKpg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-    dependencies:
-      debug: 4.3.4
-      enhanced-resolve: 5.15.0
-      eslint: 8.49.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      fast-glob: 3.3.1
-      get-tsconfig: 4.7.0
-      is-core-module: 2.13.0
-      is-glob: 4.0.3
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0):
-    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      debug: 3.2.7
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0)
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0):
-    resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      array-includes: 3.1.7
-      array.prototype.findlastindex: 1.2.3
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      has: 1.0.3
-      is-core-module: 2.13.0
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.7
-      object.groupby: 1.0.1
-      object.values: 1.1.7
-      semver: 6.3.1
-      tsconfig-paths: 3.14.2
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-plugin-jsx-a11y@6.7.1(eslint@8.49.0):
-    resolution: {integrity: sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      '@babel/runtime': 7.22.15
-      aria-query: 5.3.0
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      ast-types-flow: 0.0.7
-      axe-core: 4.8.1
-      axobject-query: 3.2.1
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 8.49.0
-      has: 1.0.3
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.5
-      minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-      semver: 6.3.1
-    dev: false
-
-  /eslint-plugin-react-hooks@4.6.0(eslint@8.49.0):
-    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-    dependencies:
-      eslint: 8.49.0
-    dev: false
-
-  /eslint-plugin-react@7.33.2(eslint@8.49.0):
-    resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      array.prototype.tosorted: 1.1.2
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.0.15
-      eslint: 8.49.0
-      estraverse: 5.3.0
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-      object.hasown: 1.1.3
-      object.values: 1.1.7
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.4
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.10
-    dev: false
-
-  /eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: false
-
-  /eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: false
-
-  /eslint@8.49.0:
-    resolution: {integrity: sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.49.0)
-      '@eslint-community/regexpp': 4.8.1
-      '@eslint/eslintrc': 2.1.2
-      '@eslint/js': 8.49.0
-      '@humanwhocodes/config-array': 0.11.11
-      '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      doctrine: 3.0.0
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.5.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      globals: 13.21.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.10.0
-      acorn-jsx: 5.3.2(acorn@8.10.0)
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
-    engines: {node: '>=0.10'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: false
-
-  /esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: false
-
-  /estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
-    dev: false
-
-  /esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-    dev: false
-
-  /fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-    dev: false
-
-  /fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-    dev: false
-
-  /fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-    dev: false
-
-  /fastq@1.15.0:
-    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
-    dependencies:
-      reusify: 1.0.4
-    dev: false
-
-  /file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
-    dependencies:
-      flat-cache: 3.1.0
-    dev: false
-
-  /fill-range@7.0.1:
-    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
-    engines: {node: '>=8'}
-    dependencies:
-      to-regex-range: 5.0.1
-    dev: false
-
-  /find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-    dev: false
-
-  /flat-cache@3.1.0:
-    resolution: {integrity: sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      flatted: 3.2.9
-      keyv: 4.5.3
-      rimraf: 3.0.2
-    dev: false
-
-  /flatted@3.2.9:
-    resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
-    dev: false
-
-  /for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
-    dependencies:
-      is-callable: 1.2.7
-    dev: false
-
-  /fraction.js@4.3.6:
-    resolution: {integrity: sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==}
-    dev: false
-
-  /fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: false
-
-  /fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /function-bind@1.1.1:
-    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: false
-
-  /function.prototype.name@1.1.6:
-    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      functions-have-names: 1.2.3
-    dev: false
-
-  /functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-    dev: false
-
-  /get-intrinsic@1.2.1:
-    resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
-    dependencies:
-      function-bind: 1.1.1
-      has: 1.0.3
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-    dev: false
-
-  /get-symbol-description@1.0.0:
-    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /get-tsconfig@4.7.0:
-    resolution: {integrity: sha512-pmjiZ7xtB8URYm74PlGJozDNyhvsVLUcpBa8DZBG3bWHwaHa9bPiRpiSfovw+fjhwONSCWKRyk+JQHEGZmMrzw==}
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-    dev: false
-
-  /glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: false
-
-  /glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: false
-
-  /glob-to-regexp@0.4.1:
-    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-    dev: false
-
-  /glob@7.1.6:
-    resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /glob@7.1.7:
-    resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /globals@13.21.0:
-    resolution: {integrity: sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==}
-    engines: {node: '>=8'}
-    dependencies:
-      type-fest: 0.20.2
-    dev: false
-
-  /globalthis@1.0.3:
-    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-properties: 1.2.1
-    dev: false
-
-  /globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.1
-      ignore: 5.2.4
-      merge2: 1.4.1
-      slash: 3.0.0
-    dev: false
-
-  /gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-    dev: false
-
-  /graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-    dev: false
-
-  /has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
-    dev: false
-
-  /has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /has-property-descriptors@1.0.0:
-    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /has-proto@1.0.1:
-    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /has-symbols@1.0.3:
-    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /has-tostringtag@1.0.0:
-    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /has@1.0.3:
-    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
-    engines: {node: '>= 0.4.0'}
-    dependencies:
-      function-bind: 1.1.1
-    dev: false
-
-  /ignore@5.2.4:
-    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
-    engines: {node: '>= 4'}
-    dev: false
-
-  /import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-    dev: false
-
-  /imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
-    dev: false
-
-  /inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-    dev: false
-
-  /inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: false
-
-  /internal-slot@1.0.5:
-    resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      side-channel: 1.0.4
-    dev: false
-
-  /is-array-buffer@3.0.2:
-    resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /is-async-function@2.0.0:
-    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
-    dependencies:
-      has-bigints: 1.0.2
-    dev: false
-
-  /is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-    dependencies:
-      binary-extensions: 2.2.0
-    dev: false
-
-  /is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /is-core-module@2.13.0:
-    resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
-    dependencies:
-      has: 1.0.3
-    dev: false
-
-  /is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /is-finalizationregistry@1.0.2:
-    resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-generator-function@1.0.10:
-    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-extglob: 2.1.1
-    dev: false
-
-  /is-map@2.0.2:
-    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
-    dev: false
-
-  /is-negative-zero@2.0.2:
-    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-    dev: false
-
-  /is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /is-regex@1.1.4:
-    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-set@2.0.2:
-    resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
-    dev: false
-
-  /is-shared-array-buffer@1.0.2:
-    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /is-typed-array@1.1.12:
-    resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      which-typed-array: 1.1.11
-    dev: false
-
-  /is-weakmap@2.0.1:
-    resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
-    dev: false
-
-  /is-weakref@1.0.2:
-    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-weakset@2.0.2:
-    resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-    dev: false
-
-  /isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: false
-
-  /iterator.prototype@1.1.2:
-    resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
-    dependencies:
-      define-properties: 1.2.1
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      reflect.getprototypeof: 1.0.4
-      set-function-name: 2.0.1
-    dev: false
-
-  /jiti@1.20.0:
-    resolution: {integrity: sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==}
-    hasBin: true
-    dev: false
-
-  /js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: false
-
-  /js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
-    dependencies:
-      argparse: 2.0.1
-    dev: false
-
-  /json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-    dev: false
-
-  /json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-    dev: false
-
-  /json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-    dev: false
-
-  /json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
-    dependencies:
-      minimist: 1.2.8
-    dev: false
-
-  /jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      array-includes: 3.1.7
-      array.prototype.flat: 1.3.2
-      object.assign: 4.1.4
-      object.values: 1.1.7
-    dev: false
-
-  /keyv@4.5.3:
-    resolution: {integrity: sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==}
-    dependencies:
-      json-buffer: 3.0.1
-    dev: false
-
-  /language-subtag-registry@0.3.22:
-    resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
-    dev: false
-
-  /language-tags@1.0.5:
-    resolution: {integrity: sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==}
-    dependencies:
-      language-subtag-registry: 0.3.22
-    dev: false
-
-  /levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: false
-
-  /lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: false
-
-  /locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
-    dependencies:
-      p-locate: 5.0.0
-    dev: false
-
-  /lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: false
-
-  /loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-    dependencies:
-      js-tokens: 4.0.0
-    dev: false
-
-  /lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
-    dependencies:
-      yallist: 4.0.0
-    dev: false
-
-  /merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-    dev: false
-
-  /micromatch@4.0.5:
-    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
-    engines: {node: '>=8.6'}
-    dependencies:
-      braces: 3.0.2
-      picomatch: 2.3.1
-    dev: false
-
-  /minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-    dependencies:
-      brace-expansion: 1.1.11
-    dev: false
-
-  /minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: false
-
-  /ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: false
-
-  /ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-    dev: false
-
-  /mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-    dev: false
-
-  /nanoid@3.3.6:
-    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-    dev: false
-
-  /natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-    dev: false
-
-  /next@13.4.19(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==}
-    engines: {node: '>=16.8.0'}
-    hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      sass:
-        optional: true
-    dependencies:
-      '@next/env': 13.4.19
-      '@swc/helpers': 0.5.1
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001538
-      postcss: 8.4.14
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(react@18.2.0)
-      watchpack: 2.4.0
-      zod: 3.21.4
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 13.4.19
-      '@next/swc-darwin-x64': 13.4.19
-      '@next/swc-linux-arm64-gnu': 13.4.19
-      '@next/swc-linux-arm64-musl': 13.4.19
-      '@next/swc-linux-x64-gnu': 13.4.19
-      '@next/swc-linux-x64-musl': 13.4.19
-      '@next/swc-win32-arm64-msvc': 13.4.19
-      '@next/swc-win32-ia32-msvc': 13.4.19
-      '@next/swc-win32-x64-msvc': 13.4.19
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-    dev: false
-
-  /node-releases@2.0.13:
-    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
-    dev: false
-
-  /normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /object-inspect@1.12.3:
-    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
-    dev: false
-
-  /object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /object.assign@4.1.4:
-    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      has-symbols: 1.0.3
-      object-keys: 1.1.1
-    dev: false
-
-  /object.entries@1.1.7:
-    resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.fromentries@2.0.7:
-    resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.groupby@1.0.1:
-    resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /object.hasown@1.1.3:
-    resolution: {integrity: sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==}
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.values@1.1.7:
-    resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-    dependencies:
-      wrappy: 1.0.2
-    dev: false
-
-  /optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: false
-
-  /p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      yocto-queue: 0.1.0
-    dev: false
-
-  /p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
-    dependencies:
-      p-limit: 3.1.0
-    dev: false
-
-  /parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
-    dependencies:
-      callsites: 3.1.0
-    dev: false
-
-  /path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: false
-
-  /path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /picocolors@1.0.0:
-    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: false
-
-  /picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
-    dev: false
-
-  /pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /postcss-import@15.1.0(postcss@8.4.30):
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-    dependencies:
-      postcss: 8.4.30
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.6
-    dev: false
-
-  /postcss-js@4.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.30
-    dev: false
-
-  /postcss-load-config@4.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 2.1.0
-      postcss: 8.4.30
-      yaml: 2.3.2
-    dev: false
-
-  /postcss-nested@6.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-    dependencies:
-      postcss: 8.4.30
-      postcss-selector-parser: 6.0.13
-    dev: false
-
-  /postcss-selector-parser@6.0.13:
-    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-    dev: false
-
-  /postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: false
-
-  /postcss@8.4.14:
-    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
-  /postcss@8.4.30:
-    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
-  /prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-    dev: false
-
-  /prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-    dev: false
-
-  /punycode@2.3.0:
-    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: false
-
-  /react-dom@18.2.0(react@18.2.0):
-    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
-    peerDependencies:
-      react: ^18.2.0
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.2.0
-      scheduler: 0.23.0
-    dev: false
-
-  /react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-    dev: false
-
-  /react@18.2.0:
-    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
-  /read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-    dependencies:
-      pify: 2.3.0
-    dev: false
-
-  /readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-    dependencies:
-      picomatch: 2.3.1
-    dev: false
-
-  /reflect.getprototypeof@1.0.4:
-    resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      globalthis: 1.0.3
-      which-builtin-type: 1.1.3
-    dev: false
-
-  /regenerator-runtime@0.14.0:
-    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
-    dev: false
-
-  /regexp.prototype.flags@1.5.1:
-    resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      set-function-name: 2.0.1
-    dev: false
-
-  /resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-    dev: false
-
-  /resolve@1.22.6:
-    resolution: {integrity: sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==}
-    hasBin: true
-    dependencies:
-      is-core-module: 2.13.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: false
-
-  /resolve@2.0.0-next.4:
-    resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
-    hasBin: true
-    dependencies:
-      is-core-module: 2.13.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: false
-
-  /reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: false
-
-  /rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    hasBin: true
-    dependencies:
-      glob: 7.2.3
-    dev: false
-
-  /run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-    dependencies:
-      queue-microtask: 1.2.3
-    dev: false
-
-  /safe-array-concat@1.0.1:
-    resolution: {integrity: sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==}
-    engines: {node: '>=0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      isarray: 2.0.5
-    dev: false
-
-  /safe-regex-test@1.0.0:
-    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-regex: 1.1.4
-    dev: false
-
-  /scheduler@0.23.0:
-    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
-  /semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-    dev: false
-
-  /semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      lru-cache: 6.0.0
-    dev: false
-
-  /set-function-name@2.0.1:
-    resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.0
-      functions-have-names: 1.2.3
-      has-property-descriptors: 1.0.0
-    dev: false
-
-  /shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-    dependencies:
-      shebang-regex: 3.0.0
-    dev: false
-
-  /shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /side-channel@1.0.4:
-    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      object-inspect: 1.12.3
-    dev: false
-
-  /slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
-    dev: false
-
-  /string.prototype.matchall@4.0.10:
-    resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      regexp.prototype.flags: 1.5.1
-      set-function-name: 2.0.1
-      side-channel: 1.0.4
-    dev: false
-
-  /string.prototype.trim@1.2.8:
-    resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /string.prototype.trimend@1.0.7:
-    resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /string.prototype.trimstart@1.0.7:
-    resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
-    dependencies:
-      ansi-regex: 5.0.1
-    dev: false
-
-  /strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /styled-jsx@5.1.1(react@18.2.0):
-    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
-    engines: {node: '>= 12.0.0'}
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
-    dependencies:
-      client-only: 0.0.1
-      react: 18.2.0
-    dev: false
-
-  /sucrase@3.34.0:
-    resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==}
-    engines: {node: '>=8'}
-    hasBin: true
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
-      commander: 4.1.1
-      glob: 7.1.6
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
-    dev: false
-
-  /supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
-    dependencies:
-      has-flag: 4.0.0
-    dev: false
-
-  /supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /tailwindcss@3.3.3:
-    resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.5.3
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.1
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.20.0
-      lilconfig: 2.1.0
-      micromatch: 4.0.5
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.30
-      postcss-import: 15.1.0(postcss@8.4.30)
-      postcss-js: 4.0.1(postcss@8.4.30)
-      postcss-load-config: 4.0.1(postcss@8.4.30)
-      postcss-nested: 6.0.1(postcss@8.4.30)
-      postcss-selector-parser: 6.0.13
-      resolve: 1.22.6
-      sucrase: 3.34.0
-    transitivePeerDependencies:
-      - ts-node
-    dev: false
-
-  /tapable@2.2.1:
-    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-    dev: false
-
-  /thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-    dependencies:
-      thenify: 3.3.1
-    dev: false
-
-  /thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-    dependencies:
-      any-promise: 1.3.0
-    dev: false
-
-  /to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
-    dependencies:
-      is-number: 7.0.0
-    dev: false
-
-  /ts-api-utils@1.0.3(typescript@5.2.2):
-    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
-    engines: {node: '>=16.13.0'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-    dependencies:
-      typescript: 5.2.2
-    dev: false
-
-  /ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: false
-
-  /tsconfig-paths@3.14.2:
-    resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
-    dependencies:
-      '@types/json5': 0.0.29
-      json5: 1.0.2
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-    dev: false
-
-  /tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: false
-
-  /type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-    dev: false
-
-  /type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /typed-array-buffer@1.0.0:
-    resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-byte-length@1.0.0:
-    resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-byte-offset@1.0.0:
-    resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-length@1.0.4:
-    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
-    dependencies:
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typescript@5.2.2:
-    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-    dev: false
-
-  /unbox-primitive@1.0.2:
-    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
-    dependencies:
-      call-bind: 1.0.2
-      has-bigints: 1.0.2
-      has-symbols: 1.0.3
-      which-boxed-primitive: 1.0.2
-    dev: false
-
-  /update-browserslist-db@1.0.11(browserslist@4.21.10):
-    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: 4.21.10
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: false
-
-  /uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-    dependencies:
-      punycode: 2.3.0
-    dev: false
-
-  /util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: false
-
-  /watchpack@2.4.0:
-    resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-    dev: false
-
-  /which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
-    dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
-    dev: false
-
-  /which-builtin-type@1.1.3:
-    resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      function.prototype.name: 1.1.6
-      has-tostringtag: 1.0.0
-      is-async-function: 2.0.0
-      is-date-object: 1.0.5
-      is-finalizationregistry: 1.0.2
-      is-generator-function: 1.0.10
-      is-regex: 1.1.4
-      is-weakref: 1.0.2
-      isarray: 2.0.5
-      which-boxed-primitive: 1.0.2
-      which-collection: 1.0.1
-      which-typed-array: 1.1.11
-    dev: false
-
-  /which-collection@1.0.1:
-    resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
-    dependencies:
-      is-map: 2.0.2
-      is-set: 2.0.2
-      is-weakmap: 2.0.1
-      is-weakset: 2.0.2
-    dev: false
-
-  /which-typed-array@1.1.11:
-    resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-    dependencies:
-      isexe: 2.0.0
-    dev: false
-
-  /wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: false
-
-  /yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-    dev: false
-
-  /yaml@2.3.2:
-    resolution: {integrity: sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==}
-    engines: {node: '>= 14'}
-    dev: false
-
-  /yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /zod@3.21.4:
-    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
-    dev: false
diff --git a/packages/cli/test/fixtures/next-pages-src/postcss.config.js b/packages/cli/test/fixtures/next-pages-src/postcss.config.js
deleted file mode 100644
index 33ad091d26d..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/src/other.css b/packages/cli/test/fixtures/next-pages-src/src/other.css
deleted file mode 100644
index aa1634c2550..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/src/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/src/pages/_app.tsx b/packages/cli/test/fixtures/next-pages-src/src/pages/_app.tsx
deleted file mode 100644
index 021681f4dd1..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/src/pages/_app.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/src/pages/_document.tsx b/packages/cli/test/fixtures/next-pages-src/src/pages/_document.tsx
deleted file mode 100644
index 54e8bf3e2a2..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/src/pages/_document.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  )
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/src/pages/api/hello.ts b/packages/cli/test/fixtures/next-pages-src/src/pages/api/hello.ts
deleted file mode 100644
index f8bcc7e5cae..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/src/pages/api/hello.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/src/pages/index.tsx b/packages/cli/test/fixtures/next-pages-src/src/pages/index.tsx
deleted file mode 100644
index be88f73914e..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/src/pages/index.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export default function Home() {
-  return (
-    <main
-      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
-    >
-      <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">src/pages/index.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=default-template-tw&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/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
-        <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=default-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`}>
-            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=default-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=default-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`}>
-            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`}>
-            Discover and deploy boilerplate example Next.js&nbsp;projects.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-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`}>
-            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>
-  )
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/src/pages/other.css b/packages/cli/test/fixtures/next-pages-src/src/pages/other.css
deleted file mode 100644
index aa1634c2550..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/src/pages/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/src/styles/globals.css b/packages/cli/test/fixtures/next-pages-src/src/styles/globals.css
deleted file mode 100644
index fd81e885836..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/src/styles/globals.css
+++ /dev/null
@@ -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));
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/src/styles/other.css b/packages/cli/test/fixtures/next-pages-src/src/styles/other.css
deleted file mode 100644
index aa1634c2550..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/src/styles/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/cli/test/fixtures/next-pages-src/tailwind.config.ts b/packages/cli/test/fixtures/next-pages-src/tailwind.config.ts
deleted file mode 100644
index 1137927fb9c..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/tailwind.config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-nocheck
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/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
diff --git a/packages/cli/test/fixtures/next-pages-src/tsconfig.json b/packages/cli/test/fixtures/next-pages-src/tsconfig.json
deleted file mode 100644
index 3ca6a9a50cb..00000000000
--- a/packages/cli/test/fixtures/next-pages-src/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/cli/test/fixtures/next-pages/next.config.js b/packages/cli/test/fixtures/next-pages/next.config.js
deleted file mode 100644
index a843cbee09a..00000000000
--- a/packages/cli/test/fixtures/next-pages/next.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
-
-module.exports = nextConfig
diff --git a/packages/cli/test/fixtures/next-pages/package.json b/packages/cli/test/fixtures/next-pages/package.json
deleted file mode 100644
index 7603dc91c45..00000000000
--- a/packages/cli/test/fixtures/next-pages/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "test-cli-pages",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  }
-}
diff --git a/packages/cli/test/fixtures/next-pages/pages/_app.tsx b/packages/cli/test/fixtures/next-pages/pages/_app.tsx
deleted file mode 100644
index 6de02d15bec..00000000000
--- a/packages/cli/test/fixtures/next-pages/pages/_app.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import '~/styles/globals.css'
-import type { AppProps } from 'next/app'
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
-}
diff --git a/packages/cli/test/fixtures/next-pages/pages/_document.tsx b/packages/cli/test/fixtures/next-pages/pages/_document.tsx
deleted file mode 100644
index 54e8bf3e2a2..00000000000
--- a/packages/cli/test/fixtures/next-pages/pages/_document.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  )
-}
diff --git a/packages/cli/test/fixtures/next-pages/pages/api/hello.ts b/packages/cli/test/fixtures/next-pages/pages/api/hello.ts
deleted file mode 100644
index f8bcc7e5cae..00000000000
--- a/packages/cli/test/fixtures/next-pages/pages/api/hello.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}
diff --git a/packages/cli/test/fixtures/next-pages/pages/index.tsx b/packages/cli/test/fixtures/next-pages/pages/index.tsx
deleted file mode 100644
index 000a751384c..00000000000
--- a/packages/cli/test/fixtures/next-pages/pages/index.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export default function Home() {
-  return (
-    <main
-      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
-    >
-      <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">pages/index.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=default-template-tw&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/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
-        <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=default-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`}>
-            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=default-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=default-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`}>
-            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`}>
-            Discover and deploy boilerplate example Next.js&nbsp;projects.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-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`}>
-            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>
-  )
-}
diff --git a/packages/cli/test/fixtures/next-pages/pages/other.css b/packages/cli/test/fixtures/next-pages/pages/other.css
deleted file mode 100644
index aa1634c2550..00000000000
--- a/packages/cli/test/fixtures/next-pages/pages/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/cli/test/fixtures/next-pages/pnpm-lock.yaml b/packages/cli/test/fixtures/next-pages/pnpm-lock.yaml
deleted file mode 100644
index a8ca0205dce..00000000000
--- a/packages/cli/test/fixtures/next-pages/pnpm-lock.yaml
+++ /dev/null
@@ -1,2620 +0,0 @@
-lockfileVersion: '6.0'
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
-dependencies:
-  '@types/node':
-    specifier: 20.6.2
-    version: 20.6.2
-  '@types/react':
-    specifier: 18.2.22
-    version: 18.2.22
-  '@types/react-dom':
-    specifier: 18.2.7
-    version: 18.2.7
-  autoprefixer:
-    specifier: 10.4.15
-    version: 10.4.15(postcss@8.4.30)
-  eslint:
-    specifier: 8.49.0
-    version: 8.49.0
-  eslint-config-next:
-    specifier: 13.4.19
-    version: 13.4.19(eslint@8.49.0)(typescript@5.2.2)
-  next:
-    specifier: 13.4.19
-    version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
-  postcss:
-    specifier: 8.4.30
-    version: 8.4.30
-  react:
-    specifier: 18.2.0
-    version: 18.2.0
-  react-dom:
-    specifier: 18.2.0
-    version: 18.2.0(react@18.2.0)
-  tailwindcss:
-    specifier: 3.3.3
-    version: 3.3.3
-  typescript:
-    specifier: 5.2.2
-    version: 5.2.2
-
-packages:
-
-  /@aashutoshrathi/word-wrap@1.2.6:
-    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /@alloc/quick-lru@5.2.0:
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /@babel/runtime@7.22.15:
-    resolution: {integrity: sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.14.0
-    dev: false
-
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.49.0):
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-    dependencies:
-      eslint: 8.49.0
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /@eslint-community/regexpp@4.8.1:
-    resolution: {integrity: sha512-PWiOzLIUAjN/w5K17PoF4n6sKBw0gqLHPhywmYHP4t1VFQQVYeb1yWsJwnMVEMl3tUHME7X/SJPZLmtG7XBDxQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-    dev: false
-
-  /@eslint/eslintrc@2.1.2:
-    resolution: {integrity: sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 9.6.1
-      globals: 13.21.0
-      ignore: 5.2.4
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@eslint/js@8.49.0:
-    resolution: {integrity: sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: false
-
-  /@humanwhocodes/config-array@0.11.11:
-    resolution: {integrity: sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==}
-    engines: {node: '>=10.10.0'}
-    dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@humanwhocodes/module-importer@1.0.1:
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
-    dev: false
-
-  /@humanwhocodes/object-schema@1.2.1:
-    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
-    dev: false
-
-  /@jridgewell/gen-mapping@0.3.3:
-    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.19
-    dev: false
-
-  /@jridgewell/resolve-uri@3.1.1:
-    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/set-array@1.1.2:
-    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/sourcemap-codec@1.4.15:
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: false
-
-  /@jridgewell/trace-mapping@0.3.19:
-    resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: false
-
-  /@next/env@13.4.19:
-    resolution: {integrity: sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==}
-    dev: false
-
-  /@next/eslint-plugin-next@13.4.19:
-    resolution: {integrity: sha512-N/O+zGb6wZQdwu6atMZHbR7T9Np5SUFUjZqCbj0sXm+MwQO35M8TazVB4otm87GkXYs2l6OPwARd3/PUWhZBVQ==}
-    dependencies:
-      glob: 7.1.7
-    dev: false
-
-  /@next/swc-darwin-arm64@13.4.19:
-    resolution: {integrity: sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-darwin-x64@13.4.19:
-    resolution: {integrity: sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-gnu@13.4.19:
-    resolution: {integrity: sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-musl@13.4.19:
-    resolution: {integrity: sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-gnu@13.4.19:
-    resolution: {integrity: sha512-htwOEagMa/CXNykFFeAHHvMJeqZfNQEoQvHfsA4wgg5QqGNqD5soeCer4oGlCol6NGUxknrQO6VEustcv+Md+g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-musl@13.4.19:
-    resolution: {integrity: sha512-4Gj4vvtbK1JH8ApWTT214b3GwUh9EKKQjY41hH/t+u55Knxi/0wesMzwQRhppK6Ddalhu0TEttbiJ+wRcoEj5Q==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-arm64-msvc@13.4.19:
-    resolution: {integrity: sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-ia32-msvc@13.4.19:
-    resolution: {integrity: sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-x64-msvc@13.4.19:
-    resolution: {integrity: sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@nodelib/fs.scandir@2.1.5:
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-    dev: false
-
-  /@nodelib/fs.stat@2.0.5:
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-    dev: false
-
-  /@nodelib/fs.walk@1.2.8:
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.15.0
-    dev: false
-
-  /@rushstack/eslint-patch@1.4.0:
-    resolution: {integrity: sha512-cEjvTPU32OM9lUFegJagO0mRnIn+rbqrG89vV8/xLnLFX0DoR0r1oy5IlTga71Q7uT3Qus7qm7wgeiMT/+Irlg==}
-    dev: false
-
-  /@swc/helpers@0.5.1:
-    resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==}
-    dependencies:
-      tslib: 2.6.2
-    dev: false
-
-  /@types/json5@0.0.29:
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
-    dev: false
-
-  /@types/node@20.6.2:
-    resolution: {integrity: sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==}
-    dev: false
-
-  /@types/prop-types@15.7.6:
-    resolution: {integrity: sha512-RK/kBbYOQQHLYj9Z95eh7S6t7gq4Ojt/NT8HTk8bWVhA5DaF+5SMnxHKkP4gPNN3wAZkKP+VjAf0ebtYzf+fxg==}
-    dev: false
-
-  /@types/react-dom@18.2.7:
-    resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
-    dependencies:
-      '@types/react': 18.2.22
-    dev: false
-
-  /@types/react@18.2.22:
-    resolution: {integrity: sha512-60fLTOLqzarLED2O3UQImc/lsNRgG0jE/a1mPW9KjMemY0LMITWEsbS4VvZ4p6rorEHd5YKxxmMKSDK505GHpA==}
-    dependencies:
-      '@types/prop-types': 15.7.6
-      '@types/scheduler': 0.16.3
-      csstype: 3.1.2
-    dev: false
-
-  /@types/scheduler@0.16.3:
-    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
-    dev: false
-
-  /@typescript-eslint/parser@6.7.2(eslint@8.49.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-KA3E4ox0ws+SPyxQf9iSI25R6b4Ne78ORhNHeVKrPQnoYsb9UhieoiRoJgrzgEeKGOXhcY1i8YtOeCHHTDa6Fw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.7.2
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/typescript-estree': 6.7.2(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.7.2
-      debug: 4.3.4
-      eslint: 8.49.0
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@typescript-eslint/scope-manager@6.7.2:
-    resolution: {integrity: sha512-bgi6plgyZjEqapr7u2mhxGR6E8WCzKNUFWNh6fkpVe9+yzRZeYtDTbsIBzKbcxI+r1qVWt6VIoMSNZ4r2A+6Yw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/visitor-keys': 6.7.2
-    dev: false
-
-  /@typescript-eslint/types@6.7.2:
-    resolution: {integrity: sha512-flJYwMYgnUNDAN9/GAI3l8+wTmvTYdv64fcH8aoJK76Y+1FCZ08RtI5zDerM/FYT5DMkAc+19E4aLmd5KqdFyg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dev: false
-
-  /@typescript-eslint/typescript-estree@6.7.2(typescript@5.2.2):
-    resolution: {integrity: sha512-kiJKVMLkoSciGyFU0TOY0fRxnp9qq1AzVOHNeN1+B9erKFCJ4Z8WdjAkKQPP+b1pWStGFqezMLltxO+308dJTQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      '@typescript-eslint/visitor-keys': 6.7.2
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@typescript-eslint/visitor-keys@6.7.2:
-    resolution: {integrity: sha512-uVw9VIMFBUTz8rIeaUT3fFe8xIUx8r4ywAdlQv1ifH+6acn/XF8Y6rwJ7XNmkNMDrTW+7+vxFFPIF40nJCVsMQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.7.2
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /acorn-jsx@5.3.2(acorn@8.10.0):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.10.0
-    dev: false
-
-  /acorn@8.10.0:
-    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: false
-
-  /ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-    dev: false
-
-  /ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-    dependencies:
-      color-convert: 2.0.1
-    dev: false
-
-  /any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: false
-
-  /anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-    dev: false
-
-  /arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: false
-
-  /argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: false
-
-  /aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
-
-  /array-buffer-byte-length@1.0.0:
-    resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
-    dependencies:
-      call-bind: 1.0.2
-      is-array-buffer: 3.0.2
-    dev: false
-
-  /array-includes@3.1.7:
-    resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      is-string: 1.0.7
-    dev: false
-
-  /array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /array.prototype.findlastindex@1.2.3:
-    resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /array.prototype.flat@1.3.2:
-    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-    dev: false
-
-  /array.prototype.flatmap@1.3.2:
-    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-    dev: false
-
-  /array.prototype.tosorted@1.1.2:
-    resolution: {integrity: sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /arraybuffer.prototype.slice@1.0.2:
-    resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      is-array-buffer: 3.0.2
-      is-shared-array-buffer: 1.0.2
-    dev: false
-
-  /ast-types-flow@0.0.7:
-    resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
-    dev: false
-
-  /asynciterator.prototype@1.0.0:
-    resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /autoprefixer@10.4.15(postcss@8.4.30):
-    resolution: {integrity: sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      browserslist: 4.21.10
-      caniuse-lite: 1.0.30001538
-      fraction.js: 4.3.6
-      normalize-range: 0.1.2
-      picocolors: 1.0.0
-      postcss: 8.4.30
-      postcss-value-parser: 4.2.0
-    dev: false
-
-  /available-typed-arrays@1.0.5:
-    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /axe-core@4.8.1:
-    resolution: {integrity: sha512-9l850jDDPnKq48nbad8SiEelCv4OrUWrKab/cPj0GScVg6cb6NbCCt/Ulk26QEq5jP9NnGr04Bit1BHyV6r5CQ==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /axobject-query@3.2.1:
-    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
-
-  /balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: false
-
-  /binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-    dev: false
-
-  /braces@3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
-    engines: {node: '>=8'}
-    dependencies:
-      fill-range: 7.0.1
-    dev: false
-
-  /browserslist@4.21.10:
-    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001538
-      electron-to-chromium: 1.4.523
-      node-releases: 2.0.13
-      update-browserslist-db: 1.0.11(browserslist@4.21.10)
-    dev: false
-
-  /busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
-    dependencies:
-      streamsearch: 1.1.0
-    dev: false
-
-  /call-bind@1.0.2:
-    resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
-    dependencies:
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /caniuse-lite@1.0.30001538:
-    resolution: {integrity: sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==}
-    dev: false
-
-  /chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-    dev: false
-
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
-    engines: {node: '>= 8.10.0'}
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.2
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: false
-
-  /client-only@0.0.1:
-    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
-
-  /color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-    dependencies:
-      color-name: 1.1.4
-    dev: false
-
-  /color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: false
-
-  /commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: false
-
-  /cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
-    engines: {node: '>= 8'}
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-    dev: false
-
-  /cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: false
-
-  /csstype@3.1.2:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: false
-
-  /damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-    dev: false
-
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-    dev: false
-
-  /debug@4.3.4:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.2
-    dev: false
-
-  /deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-    dev: false
-
-  /define-data-property@1.1.0:
-    resolution: {integrity: sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      gopd: 1.0.1
-      has-property-descriptors: 1.0.0
-    dev: false
-
-  /define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.0
-      has-property-descriptors: 1.0.0
-      object-keys: 1.1.1
-    dev: false
-
-  /dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: false
-
-  /dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
-    dependencies:
-      path-type: 4.0.0
-    dev: false
-
-  /dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: false
-
-  /doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: false
-
-  /doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: false
-
-  /electron-to-chromium@1.4.523:
-    resolution: {integrity: sha512-9AreocSUWnzNtvLcbpng6N+GkXnCcBR80IQkxRC9Dfdyg4gaWNUPBujAHUpKkiUkoSoR9UlhA4zD/IgBklmhzg==}
-    dev: false
-
-  /emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: false
-
-  /enhanced-resolve@5.15.0:
-    resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.2.1
-    dev: false
-
-  /es-abstract@1.22.2:
-    resolution: {integrity: sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      arraybuffer.prototype.slice: 1.0.2
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      es-set-tostringtag: 2.0.1
-      es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.6
-      get-intrinsic: 1.2.1
-      get-symbol-description: 1.0.0
-      globalthis: 1.0.3
-      gopd: 1.0.1
-      has: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      is-array-buffer: 3.0.2
-      is-callable: 1.2.7
-      is-negative-zero: 2.0.2
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.2
-      is-string: 1.0.7
-      is-typed-array: 1.1.12
-      is-weakref: 1.0.2
-      object-inspect: 1.12.3
-      object-keys: 1.1.1
-      object.assign: 4.1.4
-      regexp.prototype.flags: 1.5.1
-      safe-array-concat: 1.0.1
-      safe-regex-test: 1.0.0
-      string.prototype.trim: 1.2.8
-      string.prototype.trimend: 1.0.7
-      string.prototype.trimstart: 1.0.7
-      typed-array-buffer: 1.0.0
-      typed-array-byte-length: 1.0.0
-      typed-array-byte-offset: 1.0.0
-      typed-array-length: 1.0.4
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.11
-    dev: false
-
-  /es-iterator-helpers@1.0.15:
-    resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==}
-    dependencies:
-      asynciterator.prototype: 1.0.0
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-set-tostringtag: 2.0.1
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
-      globalthis: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      iterator.prototype: 1.1.2
-      safe-array-concat: 1.0.1
-    dev: false
-
-  /es-set-tostringtag@2.0.1:
-    resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /es-shim-unscopables@1.0.0:
-    resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==}
-    dependencies:
-      has: 1.0.3
-    dev: false
-
-  /es-to-primitive@1.2.1:
-    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
-    dev: false
-
-  /escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /eslint-config-next@13.4.19(eslint@8.49.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-WE8367sqMnjhWHvR5OivmfwENRQ1ixfNE9hZwQqNCsd+iM3KnuMc1V8Pt6ytgjxjf23D+xbesADv9x3xaKfT3g==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@next/eslint-plugin-next': 13.4.19
-      '@rushstack/eslint-patch': 1.4.0
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      eslint-plugin-jsx-a11y: 6.7.1(eslint@8.49.0)
-      eslint-plugin-react: 7.33.2(eslint@8.49.0)
-      eslint-plugin-react-hooks: 4.6.0(eslint@8.49.0)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.13.0
-      resolve: 1.22.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-import-resolver-typescript@3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0):
-    resolution: {integrity: sha512-QTHR9ddNnn35RTxlaEnx2gCxqFlF2SEN0SE2d17SqwyM7YOSI2GHWRYp5BiRkObTUNYPupC/3Fq2a0PpT+EKpg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-    dependencies:
-      debug: 4.3.4
-      enhanced-resolve: 5.15.0
-      eslint: 8.49.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      fast-glob: 3.3.1
-      get-tsconfig: 4.7.0
-      is-core-module: 2.13.0
-      is-glob: 4.0.3
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0):
-    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      debug: 3.2.7
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.49.0)
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0):
-    resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.7.2(eslint@8.49.0)(typescript@5.2.2)
-      array-includes: 3.1.7
-      array.prototype.findlastindex: 1.2.3
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.49.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.2)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)
-      has: 1.0.3
-      is-core-module: 2.13.0
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.7
-      object.groupby: 1.0.1
-      object.values: 1.1.7
-      semver: 6.3.1
-      tsconfig-paths: 3.14.2
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-plugin-jsx-a11y@6.7.1(eslint@8.49.0):
-    resolution: {integrity: sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      '@babel/runtime': 7.22.15
-      aria-query: 5.3.0
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      ast-types-flow: 0.0.7
-      axe-core: 4.8.1
-      axobject-query: 3.2.1
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 8.49.0
-      has: 1.0.3
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.5
-      minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-      semver: 6.3.1
-    dev: false
-
-  /eslint-plugin-react-hooks@4.6.0(eslint@8.49.0):
-    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-    dependencies:
-      eslint: 8.49.0
-    dev: false
-
-  /eslint-plugin-react@7.33.2(eslint@8.49.0):
-    resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      array.prototype.tosorted: 1.1.2
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.0.15
-      eslint: 8.49.0
-      estraverse: 5.3.0
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-      object.hasown: 1.1.3
-      object.values: 1.1.7
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.4
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.10
-    dev: false
-
-  /eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: false
-
-  /eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: false
-
-  /eslint@8.49.0:
-    resolution: {integrity: sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.49.0)
-      '@eslint-community/regexpp': 4.8.1
-      '@eslint/eslintrc': 2.1.2
-      '@eslint/js': 8.49.0
-      '@humanwhocodes/config-array': 0.11.11
-      '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      doctrine: 3.0.0
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.5.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      globals: 13.21.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.10.0
-      acorn-jsx: 5.3.2(acorn@8.10.0)
-      eslint-visitor-keys: 3.4.3
-    dev: false
-
-  /esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
-    engines: {node: '>=0.10'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: false
-
-  /esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: false
-
-  /estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
-    dev: false
-
-  /esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-    dev: false
-
-  /fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-    dev: false
-
-  /fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-    dev: false
-
-  /fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-    dev: false
-
-  /fastq@1.15.0:
-    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
-    dependencies:
-      reusify: 1.0.4
-    dev: false
-
-  /file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
-    dependencies:
-      flat-cache: 3.1.0
-    dev: false
-
-  /fill-range@7.0.1:
-    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
-    engines: {node: '>=8'}
-    dependencies:
-      to-regex-range: 5.0.1
-    dev: false
-
-  /find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-    dev: false
-
-  /flat-cache@3.1.0:
-    resolution: {integrity: sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      flatted: 3.2.9
-      keyv: 4.5.3
-      rimraf: 3.0.2
-    dev: false
-
-  /flatted@3.2.9:
-    resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
-    dev: false
-
-  /for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
-    dependencies:
-      is-callable: 1.2.7
-    dev: false
-
-  /fraction.js@4.3.6:
-    resolution: {integrity: sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==}
-    dev: false
-
-  /fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: false
-
-  /fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /function-bind@1.1.1:
-    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: false
-
-  /function.prototype.name@1.1.6:
-    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      functions-have-names: 1.2.3
-    dev: false
-
-  /functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-    dev: false
-
-  /get-intrinsic@1.2.1:
-    resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
-    dependencies:
-      function-bind: 1.1.1
-      has: 1.0.3
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-    dev: false
-
-  /get-symbol-description@1.0.0:
-    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /get-tsconfig@4.7.0:
-    resolution: {integrity: sha512-pmjiZ7xtB8URYm74PlGJozDNyhvsVLUcpBa8DZBG3bWHwaHa9bPiRpiSfovw+fjhwONSCWKRyk+JQHEGZmMrzw==}
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-    dev: false
-
-  /glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: false
-
-  /glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: false
-
-  /glob-to-regexp@0.4.1:
-    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-    dev: false
-
-  /glob@7.1.6:
-    resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /glob@7.1.7:
-    resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
-  /globals@13.21.0:
-    resolution: {integrity: sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==}
-    engines: {node: '>=8'}
-    dependencies:
-      type-fest: 0.20.2
-    dev: false
-
-  /globalthis@1.0.3:
-    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-properties: 1.2.1
-    dev: false
-
-  /globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.1
-      ignore: 5.2.4
-      merge2: 1.4.1
-      slash: 3.0.0
-    dev: false
-
-  /gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-    dev: false
-
-  /graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-    dev: false
-
-  /has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
-    dev: false
-
-  /has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /has-property-descriptors@1.0.0:
-    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
-    dependencies:
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /has-proto@1.0.1:
-    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /has-symbols@1.0.3:
-    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /has-tostringtag@1.0.0:
-    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /has@1.0.3:
-    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
-    engines: {node: '>= 0.4.0'}
-    dependencies:
-      function-bind: 1.1.1
-    dev: false
-
-  /ignore@5.2.4:
-    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
-    engines: {node: '>= 4'}
-    dev: false
-
-  /import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-    dev: false
-
-  /imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
-    dev: false
-
-  /inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-    dev: false
-
-  /inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: false
-
-  /internal-slot@1.0.5:
-    resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      side-channel: 1.0.4
-    dev: false
-
-  /is-array-buffer@3.0.2:
-    resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /is-async-function@2.0.0:
-    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
-    dependencies:
-      has-bigints: 1.0.2
-    dev: false
-
-  /is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-    dependencies:
-      binary-extensions: 2.2.0
-    dev: false
-
-  /is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /is-core-module@2.13.0:
-    resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
-    dependencies:
-      has: 1.0.3
-    dev: false
-
-  /is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /is-finalizationregistry@1.0.2:
-    resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-generator-function@1.0.10:
-    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-extglob: 2.1.1
-    dev: false
-
-  /is-map@2.0.2:
-    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
-    dev: false
-
-  /is-negative-zero@2.0.2:
-    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-    dev: false
-
-  /is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /is-regex@1.1.4:
-    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-set@2.0.2:
-    resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
-    dev: false
-
-  /is-shared-array-buffer@1.0.2:
-    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: false
-
-  /is-typed-array@1.1.12:
-    resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      which-typed-array: 1.1.11
-    dev: false
-
-  /is-weakmap@2.0.1:
-    resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
-    dev: false
-
-  /is-weakref@1.0.2:
-    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: false
-
-  /is-weakset@2.0.2:
-    resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-    dev: false
-
-  /isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: false
-
-  /iterator.prototype@1.1.2:
-    resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
-    dependencies:
-      define-properties: 1.2.1
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      reflect.getprototypeof: 1.0.4
-      set-function-name: 2.0.1
-    dev: false
-
-  /jiti@1.20.0:
-    resolution: {integrity: sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==}
-    hasBin: true
-    dev: false
-
-  /js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: false
-
-  /js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
-    dependencies:
-      argparse: 2.0.1
-    dev: false
-
-  /json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-    dev: false
-
-  /json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-    dev: false
-
-  /json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-    dev: false
-
-  /json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
-    dependencies:
-      minimist: 1.2.8
-    dev: false
-
-  /jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      array-includes: 3.1.7
-      array.prototype.flat: 1.3.2
-      object.assign: 4.1.4
-      object.values: 1.1.7
-    dev: false
-
-  /keyv@4.5.3:
-    resolution: {integrity: sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==}
-    dependencies:
-      json-buffer: 3.0.1
-    dev: false
-
-  /language-subtag-registry@0.3.22:
-    resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
-    dev: false
-
-  /language-tags@1.0.5:
-    resolution: {integrity: sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==}
-    dependencies:
-      language-subtag-registry: 0.3.22
-    dev: false
-
-  /levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: false
-
-  /lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: false
-
-  /locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
-    dependencies:
-      p-locate: 5.0.0
-    dev: false
-
-  /lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: false
-
-  /loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-    dependencies:
-      js-tokens: 4.0.0
-    dev: false
-
-  /lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
-    dependencies:
-      yallist: 4.0.0
-    dev: false
-
-  /merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-    dev: false
-
-  /micromatch@4.0.5:
-    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
-    engines: {node: '>=8.6'}
-    dependencies:
-      braces: 3.0.2
-      picomatch: 2.3.1
-    dev: false
-
-  /minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-    dependencies:
-      brace-expansion: 1.1.11
-    dev: false
-
-  /minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: false
-
-  /ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: false
-
-  /ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-    dev: false
-
-  /mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-    dev: false
-
-  /nanoid@3.3.6:
-    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-    dev: false
-
-  /natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-    dev: false
-
-  /next@13.4.19(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==}
-    engines: {node: '>=16.8.0'}
-    hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      sass:
-        optional: true
-    dependencies:
-      '@next/env': 13.4.19
-      '@swc/helpers': 0.5.1
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001538
-      postcss: 8.4.14
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(react@18.2.0)
-      watchpack: 2.4.0
-      zod: 3.21.4
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 13.4.19
-      '@next/swc-darwin-x64': 13.4.19
-      '@next/swc-linux-arm64-gnu': 13.4.19
-      '@next/swc-linux-arm64-musl': 13.4.19
-      '@next/swc-linux-x64-gnu': 13.4.19
-      '@next/swc-linux-x64-musl': 13.4.19
-      '@next/swc-win32-arm64-msvc': 13.4.19
-      '@next/swc-win32-ia32-msvc': 13.4.19
-      '@next/swc-win32-x64-msvc': 13.4.19
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-    dev: false
-
-  /node-releases@2.0.13:
-    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
-    dev: false
-
-  /normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /object-inspect@1.12.3:
-    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
-    dev: false
-
-  /object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /object.assign@4.1.4:
-    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      has-symbols: 1.0.3
-      object-keys: 1.1.1
-    dev: false
-
-  /object.entries@1.1.7:
-    resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.fromentries@2.0.7:
-    resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.groupby@1.0.1:
-    resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-    dev: false
-
-  /object.hasown@1.1.3:
-    resolution: {integrity: sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==}
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /object.values@1.1.7:
-    resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-    dependencies:
-      wrappy: 1.0.2
-    dev: false
-
-  /optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-    dev: false
-
-  /p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      yocto-queue: 0.1.0
-    dev: false
-
-  /p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
-    dependencies:
-      p-limit: 3.1.0
-    dev: false
-
-  /parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
-    dependencies:
-      callsites: 3.1.0
-    dev: false
-
-  /path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: false
-
-  /path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /picocolors@1.0.0:
-    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: false
-
-  /picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
-    dev: false
-
-  /pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /postcss-import@15.1.0(postcss@8.4.30):
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-    dependencies:
-      postcss: 8.4.30
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.6
-    dev: false
-
-  /postcss-js@4.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.30
-    dev: false
-
-  /postcss-load-config@4.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 2.1.0
-      postcss: 8.4.30
-      yaml: 2.3.2
-    dev: false
-
-  /postcss-nested@6.0.1(postcss@8.4.30):
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-    dependencies:
-      postcss: 8.4.30
-      postcss-selector-parser: 6.0.13
-    dev: false
-
-  /postcss-selector-parser@6.0.13:
-    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-    dev: false
-
-  /postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: false
-
-  /postcss@8.4.14:
-    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
-  /postcss@8.4.30:
-    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
-  /prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-    dev: false
-
-  /prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-    dev: false
-
-  /punycode@2.3.0:
-    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: false
-
-  /react-dom@18.2.0(react@18.2.0):
-    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
-    peerDependencies:
-      react: ^18.2.0
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.2.0
-      scheduler: 0.23.0
-    dev: false
-
-  /react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-    dev: false
-
-  /react@18.2.0:
-    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
-  /read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-    dependencies:
-      pify: 2.3.0
-    dev: false
-
-  /readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-    dependencies:
-      picomatch: 2.3.1
-    dev: false
-
-  /reflect.getprototypeof@1.0.4:
-    resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      globalthis: 1.0.3
-      which-builtin-type: 1.1.3
-    dev: false
-
-  /regenerator-runtime@0.14.0:
-    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
-    dev: false
-
-  /regexp.prototype.flags@1.5.1:
-    resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      set-function-name: 2.0.1
-    dev: false
-
-  /resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-    dev: false
-
-  /resolve@1.22.6:
-    resolution: {integrity: sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==}
-    hasBin: true
-    dependencies:
-      is-core-module: 2.13.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: false
-
-  /resolve@2.0.0-next.4:
-    resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
-    hasBin: true
-    dependencies:
-      is-core-module: 2.13.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: false
-
-  /reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: false
-
-  /rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    hasBin: true
-    dependencies:
-      glob: 7.2.3
-    dev: false
-
-  /run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-    dependencies:
-      queue-microtask: 1.2.3
-    dev: false
-
-  /safe-array-concat@1.0.1:
-    resolution: {integrity: sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==}
-    engines: {node: '>=0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      isarray: 2.0.5
-    dev: false
-
-  /safe-regex-test@1.0.0:
-    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-regex: 1.1.4
-    dev: false
-
-  /scheduler@0.23.0:
-    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
-  /semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-    dev: false
-
-  /semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      lru-cache: 6.0.0
-    dev: false
-
-  /set-function-name@2.0.1:
-    resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.0
-      functions-have-names: 1.2.3
-      has-property-descriptors: 1.0.0
-    dev: false
-
-  /shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-    dependencies:
-      shebang-regex: 3.0.0
-    dev: false
-
-  /shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /side-channel@1.0.4:
-    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      object-inspect: 1.12.3
-    dev: false
-
-  /slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
-    dev: false
-
-  /string.prototype.matchall@4.0.10:
-    resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      regexp.prototype.flags: 1.5.1
-      set-function-name: 2.0.1
-      side-channel: 1.0.4
-    dev: false
-
-  /string.prototype.trim@1.2.8:
-    resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /string.prototype.trimend@1.0.7:
-    resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /string.prototype.trimstart@1.0.7:
-    resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
-      es-abstract: 1.22.2
-    dev: false
-
-  /strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
-    dependencies:
-      ansi-regex: 5.0.1
-    dev: false
-
-  /strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /styled-jsx@5.1.1(react@18.2.0):
-    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
-    engines: {node: '>= 12.0.0'}
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
-    dependencies:
-      client-only: 0.0.1
-      react: 18.2.0
-    dev: false
-
-  /sucrase@3.34.0:
-    resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==}
-    engines: {node: '>=8'}
-    hasBin: true
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
-      commander: 4.1.1
-      glob: 7.1.6
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
-    dev: false
-
-  /supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
-    dependencies:
-      has-flag: 4.0.0
-    dev: false
-
-  /supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
-    dev: false
-
-  /tailwindcss@3.3.3:
-    resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.5.3
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.1
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.20.0
-      lilconfig: 2.1.0
-      micromatch: 4.0.5
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.30
-      postcss-import: 15.1.0(postcss@8.4.30)
-      postcss-js: 4.0.1(postcss@8.4.30)
-      postcss-load-config: 4.0.1(postcss@8.4.30)
-      postcss-nested: 6.0.1(postcss@8.4.30)
-      postcss-selector-parser: 6.0.13
-      resolve: 1.22.6
-      sucrase: 3.34.0
-    transitivePeerDependencies:
-      - ts-node
-    dev: false
-
-  /tapable@2.2.1:
-    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-    dev: false
-
-  /thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-    dependencies:
-      thenify: 3.3.1
-    dev: false
-
-  /thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-    dependencies:
-      any-promise: 1.3.0
-    dev: false
-
-  /to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
-    dependencies:
-      is-number: 7.0.0
-    dev: false
-
-  /ts-api-utils@1.0.3(typescript@5.2.2):
-    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
-    engines: {node: '>=16.13.0'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-    dependencies:
-      typescript: 5.2.2
-    dev: false
-
-  /ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: false
-
-  /tsconfig-paths@3.14.2:
-    resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
-    dependencies:
-      '@types/json5': 0.0.29
-      json5: 1.0.2
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-    dev: false
-
-  /tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: false
-
-  /type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.2.1
-    dev: false
-
-  /type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /typed-array-buffer@1.0.0:
-    resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-byte-length@1.0.0:
-    resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-byte-offset@1.0.0:
-    resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typed-array-length@1.0.4:
-    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
-    dependencies:
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      is-typed-array: 1.1.12
-    dev: false
-
-  /typescript@5.2.2:
-    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-    dev: false
-
-  /unbox-primitive@1.0.2:
-    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
-    dependencies:
-      call-bind: 1.0.2
-      has-bigints: 1.0.2
-      has-symbols: 1.0.3
-      which-boxed-primitive: 1.0.2
-    dev: false
-
-  /update-browserslist-db@1.0.11(browserslist@4.21.10):
-    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: 4.21.10
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: false
-
-  /uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-    dependencies:
-      punycode: 2.3.0
-    dev: false
-
-  /util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: false
-
-  /watchpack@2.4.0:
-    resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-    dev: false
-
-  /which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
-    dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
-    dev: false
-
-  /which-builtin-type@1.1.3:
-    resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      function.prototype.name: 1.1.6
-      has-tostringtag: 1.0.0
-      is-async-function: 2.0.0
-      is-date-object: 1.0.5
-      is-finalizationregistry: 1.0.2
-      is-generator-function: 1.0.10
-      is-regex: 1.1.4
-      is-weakref: 1.0.2
-      isarray: 2.0.5
-      which-boxed-primitive: 1.0.2
-      which-collection: 1.0.1
-      which-typed-array: 1.1.11
-    dev: false
-
-  /which-collection@1.0.1:
-    resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
-    dependencies:
-      is-map: 2.0.2
-      is-set: 2.0.2
-      is-weakmap: 2.0.1
-      is-weakset: 2.0.2
-    dev: false
-
-  /which-typed-array@1.1.11:
-    resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.0
-    dev: false
-
-  /which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-    dependencies:
-      isexe: 2.0.0
-    dev: false
-
-  /wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: false
-
-  /yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-    dev: false
-
-  /yaml@2.3.2:
-    resolution: {integrity: sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==}
-    engines: {node: '>= 14'}
-    dev: false
-
-  /yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /zod@3.21.4:
-    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
-    dev: false
diff --git a/packages/cli/test/fixtures/next-pages/postcss.config.js b/packages/cli/test/fixtures/next-pages/postcss.config.js
deleted file mode 100644
index 33ad091d26d..00000000000
--- a/packages/cli/test/fixtures/next-pages/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/packages/cli/test/fixtures/next-pages/styles/globals.css b/packages/cli/test/fixtures/next-pages/styles/globals.css
deleted file mode 100644
index fd81e885836..00000000000
--- a/packages/cli/test/fixtures/next-pages/styles/globals.css
+++ /dev/null
@@ -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));
-}
diff --git a/packages/cli/test/fixtures/next-pages/styles/other.css b/packages/cli/test/fixtures/next-pages/styles/other.css
deleted file mode 100644
index aa1634c2550..00000000000
--- a/packages/cli/test/fixtures/next-pages/styles/other.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background-color: red;
-}
diff --git a/packages/cli/test/fixtures/next-pages/tailwind.config.ts b/packages/cli/test/fixtures/next-pages/tailwind.config.ts
deleted file mode 100644
index 571ebb0f90a..00000000000
--- a/packages/cli/test/fixtures/next-pages/tailwind.config.ts
+++ /dev/null
@@ -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
diff --git a/packages/cli/test/fixtures/next-pages/tsconfig.json b/packages/cli/test/fixtures/next-pages/tsconfig.json
deleted file mode 100644
index 676ffbabc93..00000000000
--- a/packages/cli/test/fixtures/next-pages/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "paths": {
-      "~/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/cli/test/fixtures/next-src/.gitignore b/packages/cli/test/fixtures/next-src/.gitignore
deleted file mode 100644
index 8f322f0d8f4..00000000000
--- a/packages/cli/test/fixtures/next-src/.gitignore
+++ /dev/null
@@ -1,35 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/packages/cli/test/fixtures/next-src/next.config.js b/packages/cli/test/fixtures/next-src/next.config.js
deleted file mode 100644
index 767719fc4fb..00000000000
--- a/packages/cli/test/fixtures/next-src/next.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig
diff --git a/packages/cli/test/fixtures/next-src/package.json b/packages/cli/test/fixtures/next-src/package.json
deleted file mode 100644
index 38e67b55ac1..00000000000
--- a/packages/cli/test/fixtures/next-src/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "text-cli-next-src",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  }
-}
diff --git a/packages/cli/test/fixtures/next-src/src/app/globals.css b/packages/cli/test/fixtures/next-src/src/app/globals.css
deleted file mode 100644
index fd81e885836..00000000000
--- a/packages/cli/test/fixtures/next-src/src/app/globals.css
+++ /dev/null
@@ -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));
-}
diff --git a/packages/cli/test/fixtures/next-src/tailwind.config.js b/packages/cli/test/fixtures/next-src/tailwind.config.js
deleted file mode 100644
index d53b2eaa03b..00000000000
--- a/packages/cli/test/fixtures/next-src/tailwind.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/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: [],
-}
diff --git a/packages/cli/test/fixtures/next-src/tsconfig.json b/packages/cli/test/fixtures/next-src/tsconfig.json
deleted file mode 100644
index 0c7555fa765..00000000000
--- a/packages/cli/test/fixtures/next-src/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/cli/test/fixtures/next/.gitignore b/packages/cli/test/fixtures/next/.gitignore
deleted file mode 100644
index 8f322f0d8f4..00000000000
--- a/packages/cli/test/fixtures/next/.gitignore
+++ /dev/null
@@ -1,35 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/packages/cli/test/fixtures/next/app/globals.css b/packages/cli/test/fixtures/next/app/globals.css
deleted file mode 100644
index fd81e885836..00000000000
--- a/packages/cli/test/fixtures/next/app/globals.css
+++ /dev/null
@@ -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));
-}
diff --git a/packages/cli/test/fixtures/next/next.config.js b/packages/cli/test/fixtures/next/next.config.js
deleted file mode 100644
index 767719fc4fb..00000000000
--- a/packages/cli/test/fixtures/next/next.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig
diff --git a/packages/cli/test/fixtures/next/package.json b/packages/cli/test/fixtures/next/package.json
deleted file mode 100644
index 16f8a2dd147..00000000000
--- a/packages/cli/test/fixtures/next/package.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "name": "test-cli-next",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@types/node": "20.2.5",
-    "@types/react": "18.2.7",
-    "@types/react-dom": "18.2.4",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.41.0",
-    "eslint-config-next": "13.4.4",
-    "next": "13.4.4",
-    "postcss": "8.4.23",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.0.4"
-  }
-}
diff --git a/packages/cli/test/fixtures/next/pnpm-lock.yaml b/packages/cli/test/fixtures/next/pnpm-lock.yaml
deleted file mode 100644
index 7becc6659a7..00000000000
--- a/packages/cli/test/fixtures/next/pnpm-lock.yaml
+++ /dev/null
@@ -1 +0,0 @@
-lockfileVersion: "6.0"
diff --git a/packages/cli/test/fixtures/next/tailwind.config.js b/packages/cli/test/fixtures/next/tailwind.config.js
deleted file mode 100644
index 6e84f58f070..00000000000
--- a/packages/cli/test/fixtures/next/tailwind.config.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ["class"],
-  content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      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")],
-}
diff --git a/packages/cli/test/fixtures/next/tsconfig.json b/packages/cli/test/fixtures/next/tsconfig.json
deleted file mode 100644
index e06a4454ab0..00000000000
--- a/packages/cli/test/fixtures/next/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/cli/test/fixtures/project-npm/package.json b/packages/cli/test/fixtures/project-npm/package.json
deleted file mode 100644
index 68c468acc9f..00000000000
--- a/packages/cli/test/fixtures/project-npm/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-project-npm",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "shadcn",
-  "license": "MIT"
-}
diff --git a/packages/cli/test/fixtures/project-pnpm/package.json b/packages/cli/test/fixtures/project-pnpm/package.json
deleted file mode 100644
index af855da3bd8..00000000000
--- a/packages/cli/test/fixtures/project-pnpm/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-project-pnpm",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "shadcn",
-  "license": "MIT"
-}
diff --git a/packages/cli/test/fixtures/project-pnpm/pnpm-lock.yaml b/packages/cli/test/fixtures/project-pnpm/pnpm-lock.yaml
deleted file mode 100644
index 7a06cc7962b..00000000000
--- a/packages/cli/test/fixtures/project-pnpm/pnpm-lock.yaml
+++ /dev/null
@@ -1 +0,0 @@
-lockfileVersion: '6.0'
diff --git a/packages/cli/test/fixtures/project-src/components.json b/packages/cli/test/fixtures/project-src/components.json
deleted file mode 100644
index 1f7b81e636a..00000000000
--- a/packages/cli/test/fixtures/project-src/components.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "components": "src/components",
-  "ui": "src/ui",
-  "styles": "src/styles/main.css",
-  "utils": "src/lib/cn.ts",
-  "tailwindConfig": "tailwind.config.ts"
-}
diff --git a/packages/cli/test/fixtures/project-src/package-lock.json b/packages/cli/test/fixtures/project-src/package-lock.json
deleted file mode 100644
index 98ef11bd0f4..00000000000
--- a/packages/cli/test/fixtures/project-src/package-lock.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "name": "test-cli-project-src",
-  "version": "1.0.0",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "npm-project",
-      "version": "1.0.0",
-      "license": "MIT"
-    }
-  }
-}
diff --git a/packages/cli/test/fixtures/project-src/package.json b/packages/cli/test/fixtures/project-src/package.json
deleted file mode 100644
index a536a6f0bec..00000000000
--- a/packages/cli/test/fixtures/project-src/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "project-src",
-  "version": "0.1.0",
-  "private": true
-}
diff --git a/packages/cli/test/fixtures/project-yarn/package.json b/packages/cli/test/fixtures/project-yarn/package.json
deleted file mode 100644
index ed044dce6b7..00000000000
--- a/packages/cli/test/fixtures/project-yarn/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "test-cli-project-yarn",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "shadcn",
-  "license": "MIT"
-}
diff --git a/packages/cli/test/fixtures/project-yarn/yarn.lock b/packages/cli/test/fixtures/project-yarn/yarn.lock
deleted file mode 100644
index fb57ccd13af..00000000000
--- a/packages/cli/test/fixtures/project-yarn/yarn.lock
+++ /dev/null
@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
diff --git a/packages/cli/test/fixtures/project/components.json b/packages/cli/test/fixtures/project/components.json
deleted file mode 100644
index 054e09acd4b..00000000000
--- a/packages/cli/test/fixtures/project/components.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "tailwindConfig": "./tailwind.config.ts",
-  "importPaths": {
-    "styles": "~/styles/globals.css",
-    "utils:cn": "~/lib/cn.ts",
-    "components:ui": "~/components/ui"
-  }
-}
diff --git a/packages/cli/test/fixtures/project/package.json b/packages/cli/test/fixtures/project/package.json
deleted file mode 100644
index 30a6a9225b8..00000000000
--- a/packages/cli/test/fixtures/project/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "test-cli-project",
-  "version": "0.1.0",
-  "private": true
-}
diff --git a/packages/cli/test/fixtures/project/pnpm-lock.yaml b/packages/cli/test/fixtures/project/pnpm-lock.yaml
deleted file mode 100644
index 7becc6659a7..00000000000
--- a/packages/cli/test/fixtures/project/pnpm-lock.yaml
+++ /dev/null
@@ -1 +0,0 @@
-lockfileVersion: "6.0"
diff --git a/packages/cli/test/fixtures/t3-app/.eslintrc.cjs b/packages/cli/test/fixtures/t3-app/.eslintrc.cjs
deleted file mode 100644
index 8b7a0e8f9cd..00000000000
--- a/packages/cli/test/fixtures/t3-app/.eslintrc.cjs
+++ /dev/null
@@ -1,35 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require("path");
-
-/** @type {import("eslint").Linter.Config} */
-const config = {
-  overrides: [
-    {
-      extends: [
-        "plugin:@typescript-eslint/recommended-requiring-type-checking",
-      ],
-      files: ["*.ts", "*.tsx"],
-      parserOptions: {
-        project: path.join(__dirname, "tsconfig.json"),
-      },
-    },
-  ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: path.join(__dirname, "tsconfig.json"),
-  },
-  plugins: ["@typescript-eslint"],
-  extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
-  rules: {
-    "@typescript-eslint/consistent-type-imports": [
-      "warn",
-      {
-        prefer: "type-imports",
-        fixStyle: "inline-type-imports",
-      },
-    ],
-    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
-  },
-};
-
-module.exports = config;
diff --git a/packages/cli/test/fixtures/t3-app/.gitignore b/packages/cli/test/fixtures/t3-app/.gitignore
deleted file mode 100644
index 2971a0bd649..00000000000
--- a/packages/cli/test/fixtures/t3-app/.gitignore
+++ /dev/null
@@ -1,42 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# database
-/prisma/db.sqlite
-/prisma/db.sqlite-journal
-
-# next.js
-/.next/
-/out/
-next-env.d.ts
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
-.env
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
diff --git a/packages/cli/test/fixtures/t3-app/next.config.mjs b/packages/cli/test/fixtures/t3-app/next.config.mjs
deleted file mode 100644
index d921057fcfd..00000000000
--- a/packages/cli/test/fixtures/t3-app/next.config.mjs
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
- * for Docker builds.
- */
-await import("./src/env.mjs");
-
-/** @type {import("next").NextConfig} */
-const config = {
-  reactStrictMode: true,
-
-  /**
-   * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config
-   * out.
-   *
-   * @see https://github.com/vercel/next.js/issues/41980
-   */
-  i18n: {
-    locales: ["en"],
-    defaultLocale: "en",
-  },
-};
-export default config;
diff --git a/packages/cli/test/fixtures/t3-app/package.json b/packages/cli/test/fixtures/t3-app/package.json
deleted file mode 100644
index f5031b13c2e..00000000000
--- a/packages/cli/test/fixtures/t3-app/package.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "test-cli-t3-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "build": "next build",
-    "dev": "next dev",
-    "lint": "next lint",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@t3-oss/env-nextjs": "^0.3.1",
-    "next": "^13.4.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "zod": "^3.21.4"
-  },
-  "devDependencies": {
-    "@types/eslint": "^8.37.0",
-    "@types/node": "^18.16.0",
-    "@types/prettier": "^2.7.2",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.40.0",
-    "eslint-config-next": "^13.4.2",
-    "postcss": "^8.4.21",
-    "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.2.8",
-    "tailwindcss": "3.3.7",
-    "typescript": "^5.0.4"
-  },
-  "ct3aMetadata": {
-    "initVersion": "7.13.1"
-  }
-}
diff --git a/packages/cli/test/fixtures/t3-app/src/env.mjs b/packages/cli/test/fixtures/t3-app/src/env.mjs
deleted file mode 100644
index c82c36d8da7..00000000000
--- a/packages/cli/test/fixtures/t3-app/src/env.mjs
+++ /dev/null
@@ -1,35 +0,0 @@
-import { createEnv } from "@t3-oss/env-nextjs";
-import { z } from "zod";
-
-export const env = createEnv({
-  /**
-   * Specify your server-side environment variables schema here. This way you can ensure the app
-   * isn't built with invalid env vars.
-   */
-  server: {
-    NODE_ENV: z.enum(["development", "test", "production"]),
-  },
-
-  /**
-   * Specify your client-side environment variables schema here. This way you can ensure the app
-   * isn't built with invalid env vars. To expose them to the client, prefix them with
-   * `NEXT_PUBLIC_`.
-   */
-  client: {
-    // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
-  },
-
-  /**
-   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
-   * middlewares) or client-side so we need to destruct manually.
-   */
-  runtimeEnv: {
-    NODE_ENV: process.env.NODE_ENV,
-    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
-  },
-  /**
-   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
-   * This is especially useful for Docker builds.
-   */
-  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
-});
diff --git a/packages/cli/test/fixtures/t3-app/src/pages/_app.tsx b/packages/cli/test/fixtures/t3-app/src/pages/_app.tsx
deleted file mode 100644
index 5d4858ed44f..00000000000
--- a/packages/cli/test/fixtures/t3-app/src/pages/_app.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { type AppType } from "next/dist/shared/lib/utils";
-import "~/styles/globals.css";
-
-const MyApp: AppType = ({ Component, pageProps }) => {
-  return <Component {...pageProps} />;
-};
-
-export default MyApp;
diff --git a/packages/cli/test/fixtures/t3-app/src/pages/index.tsx b/packages/cli/test/fixtures/t3-app/src/pages/index.tsx
deleted file mode 100644
index 5513c424458..00000000000
--- a/packages/cli/test/fixtures/t3-app/src/pages/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { type NextPage } from "next";
-import Head from "next/head";
-import Link from "next/link";
-
-const Home: NextPage = () => {
-  return (
-    <>
-      <Head>
-        <title>Create T3 App</title>
-        <meta name="description" content="Generated by create-t3-app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
-        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
-          <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
-            Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
-          </h1>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
-            <Link
-              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
-              href="https://create.t3.gg/en/usage/first-steps"
-              target="_blank"
-            >
-              <h3 className="text-2xl font-bold">First Steps →</h3>
-              <div className="text-lg">
-                Just the basics - Everything you need to know to set up your
-                database and authentication.
-              </div>
-            </Link>
-            <Link
-              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
-              href="https://create.t3.gg/en/introduction"
-              target="_blank"
-            >
-              <h3 className="text-2xl font-bold">Documentation →</h3>
-              <div className="text-lg">
-                Learn more about Create T3 App, the libraries it uses, and how
-                to deploy it.
-              </div>
-            </Link>
-          </div>
-        </div>
-      </main>
-    </>
-  );
-};
-
-export default Home;
diff --git a/packages/cli/test/fixtures/t3-app/src/styles/globals.css b/packages/cli/test/fixtures/t3-app/src/styles/globals.css
deleted file mode 100644
index b5c61c95671..00000000000
--- a/packages/cli/test/fixtures/t3-app/src/styles/globals.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/packages/cli/test/fixtures/t3-app/tailwind.config.ts b/packages/cli/test/fixtures/t3-app/tailwind.config.ts
deleted file mode 100644
index d4d3fa2959e..00000000000
--- a/packages/cli/test/fixtures/t3-app/tailwind.config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type Config } from "tailwindcss";
-
-export default {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config;
diff --git a/packages/cli/test/fixtures/t3-app/tsconfig.json b/packages/cli/test/fixtures/t3-app/tsconfig.json
deleted file mode 100644
index 03ebb748aef..00000000000
--- a/packages/cli/test/fixtures/t3-app/tsconfig.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "checkJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "noUncheckedIndexedAccess": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./src/*"]
-    }
-  },
-  "include": [
-    ".eslintrc.cjs",
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.cjs",
-    "**/*.mjs"
-  ],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/cli/test/fixtures/with-base-url/tsconfig.json b/packages/cli/test/fixtures/with-base-url/tsconfig.json
deleted file mode 100644
index 7f519f45a75..00000000000
--- a/packages/cli/test/fixtures/with-base-url/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./*"]
-    }
-  }
-}
diff --git a/packages/cli/test/fixtures/without-base-url/tsconfig.json b/packages/cli/test/fixtures/without-base-url/tsconfig.json
deleted file mode 100644
index b43c5102b14..00000000000
--- a/packages/cli/test/fixtures/without-base-url/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "compilerOptions": {
-    "paths": {
-      "~/components/*": ["./components/*"],
-      "~/lib/*": ["./lib/*"]
-    }
-  }
-}
diff --git a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
deleted file mode 100644
index 198eb1a1e8a..00000000000
--- a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
+++ /dev/null
@@ -1,33 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transform css vars 1`] = `
-"import * as React from "react"
-export function Foo() {
-	return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-}"
-    "
-`;
-
-exports[`transform css vars 2`] = `
-"import * as React from "react"
-export function Foo() {
-	return <div className="bg-white hover:bg-stone-100 text-stone-50 sm:focus:text-stone-900 dark:bg-stone-950 dark:hover:bg-stone-800 dark:text-stone-900 dark:sm:focus:text-stone-50">foo</div>
-}""
-    "
-`;
-
-exports[`transform css vars 3`] = `
-"import * as React from "react"
-export function Foo() {
-	return <div className={cn("bg-white hover:bg-stone-100 dark:bg-stone-950 dark:hover:bg-stone-800", true && "text-stone-50 sm:focus:text-stone-900 dark:text-stone-900 dark:sm:focus:text-stone-50")}>foo</div>
-}""
-    "
-`;
-
-exports[`transform css vars 4`] = `
-"import * as React from "react"
-export function Foo() {
-	return <div className={cn("bg-white border border-stone-200 dark:bg-stone-950 dark:border-stone-800")}>foo</div>
-}""
-    "
-`;
diff --git a/packages/cli/test/utils/__snapshots__/transform-import.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-import.test.ts.snap
deleted file mode 100644
index 360c9d28859..00000000000
--- a/packages/cli/test/utils/__snapshots__/transform-import.test.ts.snap
+++ /dev/null
@@ -1,60 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transform import 1`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "@/components/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "@/components/box"
-
-    import { cn } from "@/lib/utils"
-    "
-`;
-
-exports[`transform import 2`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/src/components/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/src/components/box"
-
-    import { cn, foo, bar } from "~/lib"
-    import { bar } from "@/lib/utils/bar"
-    "
-`;
-
-exports[`transform import 3`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/src/components/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "~/src/components/box"
-
-    import { cn } from "~/src/utils"
-    import { bar } from "@/lib/utils/bar"
-    "
-`;
-
-exports[`transform import 4`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/src/components/button"
-    import { Label} from "ui/label"
-    import { Box } from "@/registry/new-york/box"
-
-    import { cn } from "~/src/utils"
-    import { bar } from "@/lib/utils/bar"
-    "
-`;
-
-exports[`transform import 5`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "~/src/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "@/registry/new-york/box"
-
-    import { cn } from "~/src/utils"
-    import { bar } from "@/lib/utils/bar"
-    "
-`;
diff --git a/packages/cli/test/utils/__snapshots__/transform-rsc.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-rsc.test.ts.snap
deleted file mode 100644
index 14884aac33f..00000000000
--- a/packages/cli/test/utils/__snapshots__/transform-rsc.test.ts.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transform rsc 1`] = `
-"import * as React from "react"
-import { Foo } from "bar"
-    "
-`;
-
-exports[`transform rsc 2`] = `
-""use client"
-
-      import * as React from "react"
-import { Foo } from "bar"
-    "
-`;
-
-exports[`transform rsc 3`] = `
-"      import * as React from "react"
-import { Foo } from "bar"
-    "
-`;
-
-exports[`transform rsc 4`] = `
-""use foo"
-
-      import * as React from "react"
-import { Foo } from "bar"
-
-"use client"
-    "
-`;
diff --git a/packages/cli/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap
deleted file mode 100644
index f2f2db4c61b..00000000000
--- a/packages/cli/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap
+++ /dev/null
@@ -1,118 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transform tailwind prefix 1`] = `
-"import * as React from "react"
-            export function Foo() {
-                return (
-                    <div
-                        className="tw-bg-background hover:tw-bg-muted tw-text-primary-foreground sm:focus:tw-text-accent-foreground">foo</div>
-                );
-            }
-        "
-`;
-
-exports[`transform tailwind prefix 2`] = `
-"import * as React from "react"
-export function Foo() {
-	return (
-        <div
-            className="tw-bg-white hover:tw-bg-stone-100 tw-text-stone-50 sm:focus:tw-text-stone-900 dark:tw-bg-stone-950 dark:hover:tw-bg-stone-800 dark:tw-text-stone-900 dark:sm:focus:tw-text-stone-50">foo</div>
-    );
-}
-    "
-`;
-
-exports[`transform tailwind prefix 3`] = `
-"import * as React from "react"
-export function Foo() {
-	return (
-        <div
-            className={cn(
-                "tw-bg-white hover:tw-bg-stone-100 dark:tw-bg-stone-950 dark:hover:tw-bg-stone-800",
-                true && "tw-text-stone-50 sm:focus:tw-text-stone-900 dark:tw-text-stone-900 dark:sm:focus:tw-text-stone-50"
-            )}>foo</div>
-    );
-}
-    "
-`;
-
-exports[`transform tailwind prefix 4`] = `
-"@tailwind base;
-@tailwind components;
-@tailwind utilities;
- 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
- 
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
- 
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
- 
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 210 20% 98%;
- 
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
- 
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
- 
-    --ring: 217.9 10.6% 64.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
- 
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
- 
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
- 
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
- 
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
- 
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
- 
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
- 
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
- 
-    --ring: 215 27.9% 16.9%;
-  }
-}
- 
-@layer base {
-  * {
-    @apply tw-border-border;
-  }
-  body {
-    @apply tw-bg-background tw-text-foreground;
-  }
-}"
-`;
diff --git a/packages/cli/test/utils/apply-color-mapping.test.ts b/packages/cli/test/utils/apply-color-mapping.test.ts
deleted file mode 100644
index 8da6765c772..00000000000
--- a/packages/cli/test/utils/apply-color-mapping.test.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { describe, expect, test } from "vitest"
-
-import {
-  applyColorMapping,
-  splitClassName,
-} from "../../src/utils/transformers/transform-css-vars"
-import baseColor from "../fixtures/colors/slate.json"
-
-describe("split className", () => {
-  test.each([
-    {
-      input: "bg-popover",
-      output: [null, "bg-popover", null],
-    },
-    {
-      input: "bg-popover/50",
-      output: [null, "bg-popover", "50"],
-    },
-    {
-      input: "hover:bg-popover/50",
-      output: ["hover", "bg-popover", "50"],
-    },
-    {
-      input: "hover:bg-popover",
-      output: ["hover", "bg-popover", null],
-    },
-    {
-      input: "[&_[cmdk-group-heading]]:px-2",
-      output: ["[&_[cmdk-group-heading]]", "px-2", null],
-    },
-    {
-      input: "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
-      output: ["[&_[cmdk-group]:not([hidden])_~[cmdk-group]]", "pt-0", null],
-    },
-    {
-      input: "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:bg-red-200",
-      output: [
-        "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]",
-        "bg-red-200",
-        null,
-      ],
-    },
-    {
-      input: "sm:focus:text-accent-foreground/30",
-      output: ["sm:focus", "text-accent-foreground", "30"],
-    },
-  ])(`splitClassName($input) -> $output`, ({ input, output }) => {
-    expect(splitClassName(input)).toStrictEqual(output)
-  })
-})
-
-describe("apply color mapping", async () => {
-  test.each([
-    {
-      input: "bg-background text-foreground",
-      output: "bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
-    },
-    {
-      input: "rounded-lg border bg-card text-card-foreground shadow-sm",
-      output:
-        "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
-    },
-    {
-      input:
-        "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
-      output:
-        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
-    },
-    {
-      input:
-        "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      output:
-        "flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800",
-    },
-    {
-      input:
-        "absolute right-4 top-4 bg-primary rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
-      output:
-        "absolute right-4 top-4 bg-slate-900 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:bg-slate-50 dark:ring-offset-slate-950 dark:focus:ring-slate-800 dark:data-[state=open]:bg-slate-800",
-    },
-  ])(`applyColorMapping($input) -> $output`, ({ input, output }) => {
-    expect(applyColorMapping(input, baseColor.inlineColors)).toBe(output)
-  })
-})
diff --git a/packages/cli/test/utils/apply-prefix.test.ts b/packages/cli/test/utils/apply-prefix.test.ts
deleted file mode 100644
index 9afed4c4ed0..00000000000
--- a/packages/cli/test/utils/apply-prefix.test.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { describe, expect, test } from "vitest"
-
-import { applyPrefix } from "../../src/utils/transformers/transform-tw-prefix"
-
-describe("apply tailwind prefix", () => {
-  test.each([
-    {
-      input: "bg-slate-800 text-gray-500",
-      output: "tw-bg-slate-800 tw-text-gray-500",
-    },
-    {
-      input: "hover:dark:bg-background dark:text-foreground",
-      output: "hover:dark:tw-bg-background dark:tw-text-foreground",
-    },
-    {
-      input:
-        "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
-      output:
-        "tw-rounded-lg tw-border tw-border-slate-200 tw-bg-white tw-text-slate-950 tw-shadow-sm dark:tw-border-slate-800 dark:tw-bg-slate-950 dark:tw-text-slate-50",
-    },
-    {
-      input:
-        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900",
-      output:
-        "tw-text-red-500 tw-border-red-500/50 dark:tw-border-red-500 [&>svg]:tw-text-red-500 tw-text-red-500 dark:tw-text-red-900 dark:tw-border-red-900/50 dark:dark:tw-border-red-900 dark:[&>svg]:tw-text-red-900 dark:tw-text-red-900",
-    },
-    {
-      input:
-        "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      output:
-        "tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-rounded-full tw-bg-muted",
-    },
-    {
-      input:
-        "absolute right-4 top-4 bg-primary rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
-      output:
-        "tw-absolute tw-right-4 tw-top-4 tw-bg-primary tw-rounded-sm tw-opacity-70 tw-ring-offset-background tw-transition-opacity hover:tw-opacity-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-ring focus:tw-ring-offset-2 disabled:tw-pointer-events-none data-[state=open]:tw-bg-secondary",
-    },
-  ])(`applyTwPrefix($input) -> $output`, ({ input, output }) => {
-    expect(applyPrefix(input, "tw-")).toBe(output)
-  })
-})
diff --git a/packages/cli/test/utils/get-config.test.ts b/packages/cli/test/utils/get-config.test.ts
deleted file mode 100644
index 6229d475f2e..00000000000
--- a/packages/cli/test/utils/get-config.test.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import path from "path"
-import { expect, test } from "vitest"
-
-import { getConfig, getRawConfig } from "../../src/utils/get-config"
-
-test("get raw config", async () => {
-  expect(
-    await getRawConfig(path.resolve(__dirname, "../fixtures/config-none"))
-  ).toEqual(null)
-
-  expect(
-    await getRawConfig(path.resolve(__dirname, "../fixtures/config-partial"))
-  ).toEqual({
-    style: "default",
-    tailwind: {
-      config: "./tailwind.config.ts",
-      css: "./src/assets/css/tailwind.css",
-      baseColor: "neutral",
-      cssVariables: false,
-    },
-    rsc: false,
-    tsx: true,
-    aliases: {
-      components: "@/components",
-      utils: "@/lib/utils",
-    },
-  })
-
-  expect(
-    getRawConfig(path.resolve(__dirname, "../fixtures/config-invalid"))
-  ).rejects.toThrowError()
-})
-
-test("get config", async () => {
-  expect(
-    await getConfig(path.resolve(__dirname, "../fixtures/config-none"))
-  ).toEqual(null)
-
-  expect(
-    getConfig(path.resolve(__dirname, "../fixtures/config-invalid"))
-  ).rejects.toThrowError()
-
-  expect(
-    await getConfig(path.resolve(__dirname, "../fixtures/config-partial"))
-  ).toEqual({
-    style: "default",
-    tailwind: {
-      config: "./tailwind.config.ts",
-      css: "./src/assets/css/tailwind.css",
-      baseColor: "neutral",
-      cssVariables: false,
-    },
-    rsc: false,
-    tsx: true,
-    aliases: {
-      components: "@/components",
-      utils: "@/lib/utils",
-    },
-    resolvedPaths: {
-      tailwindConfig: path.resolve(
-        __dirname,
-        "../fixtures/config-partial",
-        "tailwind.config.ts"
-      ),
-      tailwindCss: path.resolve(
-        __dirname,
-        "../fixtures/config-partial",
-        "./src/assets/css/tailwind.css"
-      ),
-      components: path.resolve(
-        __dirname,
-        "../fixtures/config-partial",
-        "./components"
-      ),
-      utils: path.resolve(
-        __dirname,
-        "../fixtures/config-partial",
-        "./lib/utils"
-      ),
-      ui: path.resolve(__dirname, "../fixtures/config-partial", "./components"),
-    },
-  })
-
-  expect(
-    await getConfig(path.resolve(__dirname, "../fixtures/config-full"))
-  ).toEqual({
-    style: "new-york",
-    rsc: false,
-    tsx: true,
-    tailwind: {
-      config: "tailwind.config.ts",
-      baseColor: "zinc",
-      css: "src/app/globals.css",
-      cssVariables: true,
-      prefix: "tw-",
-    },
-    aliases: {
-      components: "~/components",
-      utils: "~/lib/utils",
-    },
-    resolvedPaths: {
-      tailwindConfig: path.resolve(
-        __dirname,
-        "../fixtures/config-full",
-        "tailwind.config.ts"
-      ),
-      tailwindCss: path.resolve(
-        __dirname,
-        "../fixtures/config-full",
-        "./src/app/globals.css"
-      ),
-      components: path.resolve(
-        __dirname,
-        "../fixtures/config-full",
-        "./src/components"
-      ),
-      ui: path.resolve(
-        __dirname,
-        "../fixtures/config-full",
-        "./src/components"
-      ),
-      utils: path.resolve(
-        __dirname,
-        "../fixtures/config-full",
-        "./src/lib/utils"
-      ),
-    },
-  })
-
-  expect(
-    await getConfig(path.resolve(__dirname, "../fixtures/config-jsx"))
-  ).toEqual({
-    style: "default",
-    tailwind: {
-      config: "./tailwind.config.js",
-      css: "./src/assets/css/tailwind.css",
-      baseColor: "neutral",
-      cssVariables: false,
-    },
-    rsc: false,
-    tsx: false,
-    aliases: {
-      components: "@/components",
-      utils: "@/lib/utils",
-    },
-    resolvedPaths: {
-      tailwindConfig: path.resolve(
-        __dirname,
-        "../fixtures/config-jsx",
-        "tailwind.config.js"
-      ),
-      tailwindCss: path.resolve(
-        __dirname,
-        "../fixtures/config-jsx",
-        "./src/assets/css/tailwind.css"
-      ),
-      components: path.resolve(
-        __dirname,
-        "../fixtures/config-jsx",
-        "./components"
-      ),
-      ui: path.resolve(__dirname, "../fixtures/config-jsx", "./components"),
-      utils: path.resolve(__dirname, "../fixtures/config-jsx", "./lib/utils"),
-    },
-  })
-})
diff --git a/packages/cli/test/utils/get-item-target-path.test.ts b/packages/cli/test/utils/get-item-target-path.test.ts
deleted file mode 100644
index 5fe0ecf437f..00000000000
--- a/packages/cli/test/utils/get-item-target-path.test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import path from "path"
-import { expect, test } from "vitest"
-
-import { getConfig } from "../../src/utils/get-config"
-import { getItemTargetPath } from "../../src/utils/registry"
-
-test("get item target path", async () => {
-  // Full config.
-  let appDir = path.resolve(__dirname, "../fixtures/config-full")
-  expect(
-    await getItemTargetPath(await getConfig(appDir), {
-      type: "components:ui",
-    })
-  ).toEqual(path.resolve(appDir, "./src/components/ui"))
-
-  // Partial config.
-  appDir = path.resolve(__dirname, "../fixtures/config-partial")
-  expect(
-    await getItemTargetPath(await getConfig(appDir), {
-      type: "components:ui",
-    })
-  ).toEqual(path.resolve(appDir, "./components/ui"))
-
-  // JSX.
-  appDir = path.resolve(__dirname, "../fixtures/config-jsx")
-  expect(
-    await getItemTargetPath(await getConfig(appDir), {
-      type: "components:ui",
-    })
-  ).toEqual(path.resolve(appDir, "./components/ui"))
-
-  // Custom paths.
-  appDir = path.resolve(__dirname, "../fixtures/config-ui")
-  expect(
-    await getItemTargetPath(await getConfig(appDir), {
-      type: "components:ui",
-    })
-  ).toEqual(path.resolve(appDir, "./src/ui"))
-})
diff --git a/packages/cli/test/utils/get-package-manager.test.ts b/packages/cli/test/utils/get-package-manager.test.ts
deleted file mode 100644
index 3858f68384d..00000000000
--- a/packages/cli/test/utils/get-package-manager.test.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import path from "path"
-import { expect, test } from "vitest"
-
-import { getPackageManager } from "../../src/utils/get-package-manager"
-
-test("get package manager", async () => {
-  expect(
-    await getPackageManager(path.resolve(__dirname, "../fixtures/project-yarn"))
-  ).toBe("yarn")
-
-  expect(
-    await getPackageManager(path.resolve(__dirname, "../fixtures/project-npm"))
-  ).toBe("npm")
-
-  expect(
-    await getPackageManager(path.resolve(__dirname, "../fixtures/project-pnpm"))
-  ).toBe("pnpm")
-
-  expect(
-    await getPackageManager(path.resolve(__dirname, "../fixtures/project-bun"))
-  ).toBe("bun")
-
-  expect(
-    await getPackageManager(path.resolve(__dirname, "../fixtures/next"))
-  ).toBe("pnpm")
-})
diff --git a/packages/cli/test/utils/get-project-type.test.ts b/packages/cli/test/utils/get-project-type.test.ts
deleted file mode 100644
index 2bcff88f77d..00000000000
--- a/packages/cli/test/utils/get-project-type.test.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import path from "path"
-import { describe, expect, test } from "vitest"
-
-import { getProjectType } from "../../src/utils/get-project-info"
-
-describe("get project type", async () => {
-  test.each([
-    {
-      name: "next-app",
-      type: "next-app",
-    },
-    {
-      name: "next-app-src",
-      type: "next-app-src",
-    },
-    {
-      name: "next-pages",
-      type: "next-pages",
-    },
-    {
-      name: "next-pages-src",
-      type: "next-pages-src",
-    },
-    {
-      name: "project",
-      type: null,
-    },
-    {
-      name: "t3-app",
-      type: "next-pages-src",
-    },
-  ])(`getProjectType($name) -> $type`, async ({ name, type }) => {
-    expect(
-      await getProjectType(path.resolve(__dirname, `../fixtures/${name}`))
-    ).toBe(type)
-  })
-})
diff --git a/packages/cli/test/utils/get-tailwind-css-file.test.ts b/packages/cli/test/utils/get-tailwind-css-file.test.ts
deleted file mode 100644
index 135531cca24..00000000000
--- a/packages/cli/test/utils/get-tailwind-css-file.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import path from "path"
-import { describe, expect, test } from "vitest"
-
-import { getTailwindCssFile } from "../../src/utils/get-project-info"
-
-describe("get tailwind css file", async () => {
-  test.each([
-    {
-      name: "next-app",
-      file: "app/globals.css",
-    },
-    {
-      name: "next-app-src",
-      file: "src/app/styles.css",
-    },
-    {
-      name: "next-pages",
-      file: "styles/globals.css",
-    },
-    {
-      name: "next-pages-src",
-      file: "src/styles/globals.css",
-    },
-    {
-      name: "t3-app",
-      file: "src/styles/globals.css",
-    },
-  ])(`getTailwindCssFile($name) -> $file`, async ({ name, file }) => {
-    expect(
-      await getTailwindCssFile(path.resolve(__dirname, `../fixtures/${name}`))
-    ).toBe(file)
-  })
-})
diff --git a/packages/cli/test/utils/get-ts-config-alias-prefix.test.ts b/packages/cli/test/utils/get-ts-config-alias-prefix.test.ts
deleted file mode 100644
index 040112fc0a4..00000000000
--- a/packages/cli/test/utils/get-ts-config-alias-prefix.test.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import path from "path"
-import { describe, expect, test } from "vitest"
-
-import { getTsConfigAliasPrefix } from "../../src/utils/get-project-info"
-
-describe("get ts config alias prefix", async () => {
-  test.each([
-    {
-      name: "next-app",
-      prefix: "@",
-    },
-    {
-      name: "next-app-src",
-      prefix: "#",
-    },
-    {
-      name: "next-pages",
-      prefix: "~",
-    },
-    {
-      name: "next-pages-src",
-      prefix: "@",
-    },
-    {
-      name: "t3-app",
-      prefix: "~",
-    },
-  ])(`getTsConfigAliasPrefix($name) -> $prefix`, async ({ name, prefix }) => {
-    expect(
-      await getTsConfigAliasPrefix(
-        path.resolve(__dirname, `../fixtures/${name}`)
-      )
-    ).toBe(prefix)
-  })
-})
diff --git a/packages/cli/test/utils/is-typescript-project.test.ts b/packages/cli/test/utils/is-typescript-project.test.ts
deleted file mode 100644
index 5fe7226dc20..00000000000
--- a/packages/cli/test/utils/is-typescript-project.test.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import path from "path"
-import { describe, expect, test } from "vitest"
-
-import { isTypeScriptProject } from "../../src/utils/get-project-info"
-
-describe("is TypeScript project", async () => {
-  test.each([
-    {
-      name: "next-app",
-      result: true,
-    },
-    {
-      name: "next-app-src",
-      result: true,
-    },
-    {
-      name: "next-pages",
-      result: true,
-    },
-    {
-      name: "next-pages-src",
-      result: true,
-    },
-    {
-      name: "t3-app",
-      result: true,
-    },
-    {
-      name: "next-app-js",
-      result: false,
-    },
-  ])(`isTypeScriptProject($name) -> $result`, async ({ name, result }) => {
-    expect(
-      await isTypeScriptProject(path.resolve(__dirname, `../fixtures/${name}`))
-    ).toBe(result)
-  })
-})
diff --git a/packages/cli/test/utils/registry.test.ts b/packages/cli/test/utils/registry.test.ts
deleted file mode 100644
index 64a17bd9066..00000000000
--- a/packages/cli/test/utils/registry.test.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { expect, test } from "vitest"
-
-import { resolveTree } from "../../src/utils/registry"
-
-test("resolve tree", async () => {
-  const index = [
-    {
-      name: "button",
-      dependencies: ["@radix-ui/react-slot"],
-      type: "components:ui",
-      files: ["button.tsx"],
-    },
-    {
-      name: "dialog",
-      dependencies: ["@radix-ui/react-dialog"],
-      registryDependencies: ["button"],
-      type: "components:ui",
-      files: ["dialog.tsx"],
-    },
-    {
-      name: "input",
-      registryDependencies: ["button"],
-      type: "components:ui",
-      files: ["input.tsx"],
-    },
-    {
-      name: "alert-dialog",
-      dependencies: ["@radix-ui/react-alert-dialog"],
-      registryDependencies: ["button", "dialog"],
-      type: "components:ui",
-      files: ["alert-dialog.tsx"],
-    },
-    {
-      name: "example-card",
-      type: "components:component",
-      files: ["example-card.tsx"],
-      registryDependencies: ["button", "dialog", "input"],
-    },
-  ]
-
-  expect(
-    (await resolveTree(index, ["button"])).map((entry) => entry.name).sort()
-  ).toEqual(["button"])
-
-  expect(
-    (await resolveTree(index, ["dialog"])).map((entry) => entry.name).sort()
-  ).toEqual(["button", "dialog"])
-
-  expect(
-    (await resolveTree(index, ["alert-dialog", "dialog"]))
-      .map((entry) => entry.name)
-      .sort()
-  ).toEqual(["alert-dialog", "button", "dialog"])
-
-  expect(
-    (await resolveTree(index, ["example-card"]))
-      .map((entry) => entry.name)
-      .sort()
-  ).toEqual(["button", "dialog", "example-card", "input"])
-
-  expect(
-    (await resolveTree(index, ["foo"])).map((entry) => entry.name).sort()
-  ).toEqual([])
-
-  expect(
-    (await resolveTree(index, ["button", "foo"]))
-      .map((entry) => entry.name)
-      .sort()
-  ).toEqual(["button"])
-})
diff --git a/packages/cli/test/utils/resolve-import.test.ts b/packages/cli/test/utils/resolve-import.test.ts
deleted file mode 100644
index dce1dc9e964..00000000000
--- a/packages/cli/test/utils/resolve-import.test.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import path from "path"
-import { loadConfig, type ConfigLoaderSuccessResult } from "tsconfig-paths"
-import { expect, test } from "vitest"
-
-import { resolveImport } from "../../src/utils/resolve-import"
-
-test("resolve import", async () => {
-  expect(
-    await resolveImport("@/foo/bar", {
-      absoluteBaseUrl: "/Users/shadcn/Projects/foobar",
-      paths: {
-        "@/*": ["./src/*"],
-        "~/components/*": ["./src/components/*"],
-        "~/lib": ["./src/lib"],
-      },
-    })
-  ).toEqual("/Users/shadcn/Projects/foobar/src/foo/bar")
-
-  expect(
-    await resolveImport("~/components/foo/bar/baz", {
-      absoluteBaseUrl: "/Users/shadcn/Projects/foobar",
-      paths: {
-        "@/*": ["./src/*"],
-        "~/components/*": ["./src/components/*"],
-        "~/lib": ["./src/lib"],
-      },
-    })
-  ).toEqual("/Users/shadcn/Projects/foobar/src/components/foo/bar/baz")
-
-  expect(
-    await resolveImport("components/foo/bar", {
-      absoluteBaseUrl: "/Users/shadcn/Projects/foobar",
-      paths: {
-        "components/*": ["./src/app/components/*"],
-        "ui/*": ["./src/ui/primities/*"],
-        lib: ["./lib"],
-      },
-    })
-  ).toEqual("/Users/shadcn/Projects/foobar/src/app/components/foo/bar")
-
-  expect(
-    await resolveImport("lib/utils", {
-      absoluteBaseUrl: "/Users/shadcn/Projects/foobar",
-      paths: {
-        "components/*": ["./src/app/components/*"],
-        "ui/*": ["./src/ui/primities/*"],
-        lib: ["./lib"],
-      },
-    })
-  ).toEqual("/Users/shadcn/Projects/foobar/lib/utils")
-})
-
-test("resolve import with base url", async () => {
-  const cwd = path.resolve(__dirname, "../fixtures/with-base-url")
-  const config = (await loadConfig(cwd)) as ConfigLoaderSuccessResult
-
-  expect(await resolveImport("@/components/ui", config)).toEqual(
-    path.resolve(cwd, "components/ui")
-  )
-  expect(await resolveImport("@/lib/utils", config)).toEqual(
-    path.resolve(cwd, "lib/utils")
-  )
-  expect(await resolveImport("foo/bar", config)).toEqual(
-    path.resolve(cwd, "foo/bar")
-  )
-})
-
-test("resolve import without base url", async () => {
-  const cwd = path.resolve(__dirname, "../fixtures/without-base-url")
-  const config = (await loadConfig(cwd)) as ConfigLoaderSuccessResult
-
-  expect(await resolveImport("~/components/ui", config)).toEqual(
-    path.resolve(cwd, "components/ui")
-  )
-  expect(await resolveImport("~/lib/utils", config)).toEqual(
-    path.resolve(cwd, "lib/utils")
-  )
-  expect(await resolveImport("foo/bar", config)).toEqual(
-    path.resolve(cwd, "foo/bar")
-  )
-})
diff --git a/packages/cli/test/utils/transform-css-vars.test.ts b/packages/cli/test/utils/transform-css-vars.test.ts
deleted file mode 100644
index 586f1cee2bc..00000000000
--- a/packages/cli/test/utils/transform-css-vars.test.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { expect, test } from "vitest"
-
-import { transform } from "../../src/utils/transformers"
-import stone from "../fixtures/colors/stone.json"
-
-test("transform css vars", async () => {
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-}"
-    `,
-      config: {
-        tsx: true,
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: true,
-        },
-        aliases: {
-          components: "@/components",
-          utils: "@/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-}"
-    `,
-      config: {
-        tsx: true,
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: false,
-        },
-        aliases: {
-          components: "@/components",
-          utils: "@/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className={cn("bg-background hover:bg-muted", true && "text-primary-foreground sm:focus:text-accent-foreground")}>foo</div>
-}"
-    `,
-      config: {
-        tsx: true,
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: false,
-        },
-        aliases: {
-          components: "@/components",
-          utils: "@/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className={cn("bg-background border border-input")}>foo</div>
-}"
-    `,
-      config: {
-        tsx: true,
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: false,
-        },
-        aliases: {
-          components: "@/components",
-          utils: "@/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-})
diff --git a/packages/cli/test/utils/transform-import.test.ts b/packages/cli/test/utils/transform-import.test.ts
deleted file mode 100644
index a7ad3e8306b..00000000000
--- a/packages/cli/test/utils/transform-import.test.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { expect, test } from "vitest"
-
-import { transform } from "../../src/utils/transformers"
-
-test("transform import", async () => {
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "@/registry/new-york/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "@/registry/new-york/box"
-
-    import { cn } from "@/lib/utils"
-    `,
-      config: {
-        tsx: true,
-        tailwind: {
-          baseColor: "neutral",
-          cssVariables: true,
-        },
-        aliases: {
-          components: "@/components",
-          utils: "@/lib/utils",
-        },
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "@/registry/new-york/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "@/registry/new-york/box"
-
-    import { cn, foo, bar } from "@/lib/utils"
-    import { bar } from "@/lib/utils/bar"
-    `,
-      config: {
-        tsx: true,
-        aliases: {
-          components: "~/src/components",
-          utils: "~/lib",
-        },
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "@/registry/new-york/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "@/registry/new-york/box"
-
-    import { cn } from "@/lib/utils"
-    import { bar } from "@/lib/utils/bar"
-    `,
-      config: {
-        tsx: true,
-        aliases: {
-          components: "~/src/components",
-          utils: "~/src/utils",
-        },
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "@/registry/new-york/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "@/registry/new-york/box"
-
-    import { cn } from "@/lib/utils"
-    import { bar } from "@/lib/utils/bar"
-    `,
-      config: {
-        tsx: true,
-        aliases: {
-          components: "~/src/components",
-          utils: "~/src/utils",
-          ui: "~/src/components",
-        },
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    import { Button } from "@/registry/new-york/ui/button"
-    import { Label} from "ui/label"
-    import { Box } from "@/registry/new-york/box"
-
-    import { cn } from "@/lib/utils"
-    import { bar } from "@/lib/utils/bar"
-    `,
-      config: {
-        tsx: true,
-        aliases: {
-          components: "~/src/components",
-          utils: "~/src/utils",
-          ui: "~/src/ui",
-        },
-      },
-    })
-  ).toMatchSnapshot()
-})
diff --git a/packages/cli/test/utils/transform-rsc.test.ts b/packages/cli/test/utils/transform-rsc.test.ts
deleted file mode 100644
index 73e0105d75d..00000000000
--- a/packages/cli/test/utils/transform-rsc.test.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { expect, test } from "vitest"
-
-import { transform } from "../../src/utils/transformers"
-
-test("transform rsc", async () => {
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-import { Foo } from "bar"
-    `,
-      config: {
-        tsx: true,
-        rsc: true,
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `"use client"
-
-      import * as React from "react"
-import { Foo } from "bar"
-    `,
-      config: {
-        tsx: true,
-        rsc: true,
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `"use client"
-
-      import * as React from "react"
-import { Foo } from "bar"
-    `,
-      config: {
-        tsx: true,
-        rsc: false,
-      },
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `"use foo"
-
-      import * as React from "react"
-import { Foo } from "bar"
-
-"use client"
-    `,
-      config: {
-        tsx: true,
-        rsc: false,
-      },
-    })
-  ).toMatchSnapshot()
-})
diff --git a/packages/cli/test/utils/transform-tw-prefix.test.ts b/packages/cli/test/utils/transform-tw-prefix.test.ts
deleted file mode 100644
index 5ba1efdc773..00000000000
--- a/packages/cli/test/utils/transform-tw-prefix.test.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { expect, test } from "vitest"
-
-import { transform } from "../../src/utils/transformers"
-import { applyPrefixesCss } from "../../src/utils/transformers/transform-tw-prefix"
-import stone from "../fixtures/colors/stone.json"
-
-test("transform tailwind prefix", async () => {
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-            export function Foo() {
-                return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-            }
-        `,
-      config: {
-        tailwind: {
-          baseColor: "stone",
-          prefix: "tw-",
-        },
-        aliases: {
-          components: "@/components",
-          utils: "@/lib/utils",
-        },
-      },
-      baseColor: "stone",
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-}
-    `,
-      config: {
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: false,
-          prefix: "tw-",
-        },
-        aliases: {
-          components: "@/components",
-          utils: "@/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    await transform({
-      filename: "test.ts",
-      raw: `import * as React from "react"
-export function Foo() {
-	return <div className={cn("bg-background hover:bg-muted", true && "text-primary-foreground sm:focus:text-accent-foreground")}>foo</div>
-}
-    `,
-      config: {
-        tailwind: {
-          baseColor: "stone",
-          cssVariables: false,
-          prefix: "tw-",
-        },
-        aliases: {
-          components: "@/components",
-          utils: "@/lib/utils",
-        },
-      },
-      baseColor: stone,
-    })
-  ).toMatchSnapshot()
-
-  expect(
-    applyPrefixesCss(
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 217.9 10.6% 64.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 215 27.9% 16.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}",
-      "tw-"
-    )
-  ).toMatchSnapshot()
-})
diff --git a/packages/shadcn/.gitignore b/packages/shadcn/.gitignore
index dac6408c692..49dc6ef6feb 100644
--- a/packages/shadcn/.gitignore
+++ b/packages/shadcn/.gitignore
@@ -1,3 +1,3 @@
 components
 dist
-.turbo
\ No newline at end of file
+.turbo
diff --git a/packages/shadcn/CHANGELOG.md b/packages/shadcn/CHANGELOG.md
index e3b93c16b54..d7b0eaaf99a 100644
--- a/packages/shadcn/CHANGELOG.md
+++ b/packages/shadcn/CHANGELOG.md
@@ -1,5 +1,325 @@
 # @shadcn/ui
 
+## 3.3.1
+
+### Patch Changes
+
+- [`75dde2e64679081dad63ecd20f3fd9e3b68fa0ce`](https://github.com/shadcn-ui/ui/commit/75dde2e64679081dad63ecd20f3fd9e3b68fa0ce) Thanks [@shadcn](https://github.com/shadcn)! - fix deps in cts projects
+
+## 3.3.0
+
+### Minor Changes
+
+- [#8216](https://github.com/shadcn-ui/ui/pull/8216) [`fc6d909ba23ac1ba09cf32087f0524aca398b5aa`](https://github.com/shadcn-ui/ui/commit/fc6d909ba23ac1ba09cf32087f0524aca398b5aa) Thanks [@shadcn](https://github.com/shadcn)! - add getRegistriesIndex
+
+### Patch Changes
+
+- [#8186](https://github.com/shadcn-ui/ui/pull/8186) [`cdf58be7e1ed25bf1dd19a1c60612c5e89b82a60`](https://github.com/shadcn-ui/ui/commit/cdf58be7e1ed25bf1dd19a1c60612c5e89b82a60) Thanks [@imskyleen](https://github.com/imskyleen)! - fix transformCssVars function with prefix
+
+- [#8036](https://github.com/shadcn-ui/ui/pull/8036) [`fae1a81addb22429c103d5d08813e1c80779d5fb`](https://github.com/shadcn-ui/ui/commit/fae1a81addb22429c103d5d08813e1c80779d5fb) Thanks [@fuma-nama](https://github.com/fuma-nama)! - fix async imports not being transformed when installing components
+
+## 3.2.1
+
+### Patch Changes
+
+- [#8147](https://github.com/shadcn-ui/ui/pull/8147) [`e5402f9a20f070e92e7384c1ae08e6bfb79cd7a9`](https://github.com/shadcn-ui/ui/commit/e5402f9a20f070e92e7384c1ae08e6bfb79cd7a9) Thanks [@shadcn](https://github.com/shadcn)! - fix recursive namespacing
+
+## 3.2.0
+
+### Minor Changes
+
+- [#8128](https://github.com/shadcn-ui/ui/pull/8128) [`9c5eb0d20f0b75b28dccee219bf74fc9cd2019c6`](https://github.com/shadcn-ui/ui/commit/9c5eb0d20f0b75b28dccee219bf74fc9cd2019c6) Thanks [@shadcn](https://github.com/shadcn)! - add support for registries index
+
+## 3.1.0
+
+### Minor Changes
+
+- [#8110](https://github.com/shadcn-ui/ui/pull/8110) [`64f8baf9aa7562d4d2170863c29c6ae723f31df3`](https://github.com/shadcn-ui/ui/commit/64f8baf9aa7562d4d2170863c29c6ae723f31df3) Thanks [@shadcn](https://github.com/shadcn)! - allow no files items
+
+- [#8109](https://github.com/shadcn-ui/ui/pull/8109) [`e84c819977046f555daa9a8af5736ad7725fb4da`](https://github.com/shadcn-ui/ui/commit/e84c819977046f555daa9a8af5736ad7725fb4da) Thanks [@shadcn](https://github.com/shadcn)! - update handling of import and apply at rules
+
+## 3.0.0
+
+### Major Changes
+
+- [#8004](https://github.com/shadcn-ui/ui/pull/8004) [`a941287411e4cf4eca29779a8220d59bfca2a25c`](https://github.com/shadcn-ui/ui/commit/a941287411e4cf4eca29779a8220d59bfca2a25c) Thanks [@shadcn](https://github.com/shadcn)! - bump all dependencies
+
+- [#8012](https://github.com/shadcn-ui/ui/pull/8012) [`296feb28a220627958f3a558dcb2384875c2d7a1`](https://github.com/shadcn-ui/ui/commit/296feb28a220627958f3a558dcb2384875c2d7a1) Thanks [@shadcn](https://github.com/shadcn)! - add new mcp server and command
+
+- [#7994](https://github.com/shadcn-ui/ui/pull/7994) [`4f5333ea7ae8a2197fb84472addaa9fd66d984ef`](https://github.com/shadcn-ui/ui/commit/4f5333ea7ae8a2197fb84472addaa9fd66d984ef) Thanks [@shadcn](https://github.com/shadcn)! - add view and search commands
+
+- [#7983](https://github.com/shadcn-ui/ui/pull/7983) [`a426fea9410ade04c26bb4edfa5da813ecaddc17`](https://github.com/shadcn-ui/ui/commit/a426fea9410ade04c26bb4edfa5da813ecaddc17) Thanks [@shadcn](https://github.com/shadcn)! - update getRegistry, getRegistryItems and resolveRegistryItems apis
+
+- [#7990](https://github.com/shadcn-ui/ui/pull/7990) [`b3639227d0737538e98923ab335b6dd03f2c993f`](https://github.com/shadcn-ui/ui/commit/b3639227d0737538e98923ab335b6dd03f2c993f) Thanks [@shadcn](https://github.com/shadcn)! - deprecate fetchRegistry and resolveRegistryTree
+
+- [#7972](https://github.com/shadcn-ui/ui/pull/7972) [`6e870c399350adf17554c35cdf732421ac8a6ab2`](https://github.com/shadcn-ui/ui/commit/6e870c399350adf17554c35cdf732421ac8a6ab2) Thanks [@shadcn](https://github.com/shadcn)! - copy registry.json on build
+
+- [#7989](https://github.com/shadcn-ui/ui/pull/7989) [`a4a36007578a6847c0b1f02c1b46350de6ebe2cc`](https://github.com/shadcn-ui/ui/commit/a4a36007578a6847c0b1f02c1b46350de6ebe2cc) Thanks [@shadcn](https://github.com/shadcn)! - move schema to shadcn/schema
+
+- [#8001](https://github.com/shadcn-ui/ui/pull/8001) [`fed7e3bfdc2696b8bc1fb8e65134e96330347aa0`](https://github.com/shadcn-ui/ui/commit/fed7e3bfdc2696b8bc1fb8e65134e96330347aa0) Thanks [@shadcn](https://github.com/shadcn)! - update signatures for getRegistry, getRegistryItems, resolveRegistryItems and searchRegistries
+
+- [#7992](https://github.com/shadcn-ui/ui/pull/7992) [`7d71b02fb1c69b649fd143d0eeab1ddc7995f5ca`](https://github.com/shadcn-ui/ui/commit/7d71b02fb1c69b649fd143d0eeab1ddc7995f5ca) Thanks [@shadcn](https://github.com/shadcn)! - add getRegistry
+
+- [#7948](https://github.com/shadcn-ui/ui/pull/7948) [`2c164b0f221fac0367a0eda3ce8502b38b25ce3e`](https://github.com/shadcn-ui/ui/commit/2c164b0f221fac0367a0eda3ce8502b38b25ce3e) Thanks [@shadcn](https://github.com/shadcn)! - update registry dependencies resolution algorithm
+
+- [#8086](https://github.com/shadcn-ui/ui/pull/8086) [`17422714f65a36a9fc81eeb227366a2e44171be9`](https://github.com/shadcn-ui/ui/commit/17422714f65a36a9fc81eeb227366a2e44171be9) Thanks [@shadcn](https://github.com/shadcn)! - add mcp init command
+
+- [#7940](https://github.com/shadcn-ui/ui/pull/7940) [`578f83cbefe1b3d70b8179a58c70c5729fd1982f`](https://github.com/shadcn-ui/ui/commit/578f83cbefe1b3d70b8179a58c70c5729fd1982f) Thanks [@shadcn](https://github.com/shadcn)! - add support for namespaced registries
+
+### Minor Changes
+
+- [#7955](https://github.com/shadcn-ui/ui/pull/7955) [`a80ab374830fa414bf3672fefc66b03ea4b8da78`](https://github.com/shadcn-ui/ui/commit/a80ab374830fa414bf3672fefc66b03ea4b8da78) Thanks [@shadcn](https://github.com/shadcn)! - update file handling for monorepo
+
+### Patch Changes
+
+- [#8081](https://github.com/shadcn-ui/ui/pull/8081) [`fc27ba269217ade8ae3a87724259874da799cd03`](https://github.com/shadcn-ui/ui/commit/fc27ba269217ade8ae3a87724259874da799cd03) Thanks [@shadcn](https://github.com/shadcn)! - fix --defaults option
+
+- [#7962](https://github.com/shadcn-ui/ui/pull/7962) [`fc8927a1f9d7d1be3338e3d984de20355af61083`](https://github.com/shadcn-ui/ui/commit/fc8927a1f9d7d1be3338e3d984de20355af61083) Thanks [@shadcn](https://github.com/shadcn)! - fix monorepo init on nix system
+
+## 2.10.0
+
+### Minor Changes
+
+- [#7902](https://github.com/shadcn-ui/ui/pull/7902) [`e6778dee87de1a183843f233b3f27fbfb1a700ec`](https://github.com/shadcn-ui/ui/commit/e6778dee87de1a183843f233b3f27fbfb1a700ec) Thanks [@shadcn](https://github.com/shadcn)! - add support for envVars in schema
+
+- [#7896](https://github.com/shadcn-ui/ui/pull/7896) [`97a8de1c1b2ae590cc9dbe17970a882990c35a59`](https://github.com/shadcn-ui/ui/commit/97a8de1c1b2ae590cc9dbe17970a882990c35a59) Thanks [@shadcn](https://github.com/shadcn)! - add support for env vars in registry
+
+### Patch Changes
+
+- [#7908](https://github.com/shadcn-ui/ui/pull/7908) [`d891132f2a0121e12c92839e19f5d90252f9a640`](https://github.com/shadcn-ui/ui/commit/d891132f2a0121e12c92839e19f5d90252f9a640) Thanks [@shadcn](https://github.com/shadcn)! - remove init tests
+
+## 2.9.3
+
+### Patch Changes
+
+- [#7837](https://github.com/shadcn-ui/ui/pull/7837) [`20e913d8e1df1acddc7bd4b8328088a25869ba7c`](https://github.com/shadcn-ui/ui/commit/20e913d8e1df1acddc7bd4b8328088a25869ba7c) Thanks [@shadcn](https://github.com/shadcn)! - fix handling of themes
+
+## 2.9.2
+
+### Patch Changes
+
+- [#7833](https://github.com/shadcn-ui/ui/pull/7833) [`d9cdc3f7ae69e571de7dc116effc381ad76685c3`](https://github.com/shadcn-ui/ui/commit/d9cdc3f7ae69e571de7dc116effc381ad76685c3) Thanks [@shadcn](https://github.com/shadcn)! - Revert "fix: handling of shouldOverwriteCssVars"
+
+## 2.9.1
+
+### Patch Changes
+
+- [#7829](https://github.com/shadcn-ui/ui/pull/7829) [`ed5237c231f3b70107131bd7ba517e73b8c9014d`](https://github.com/shadcn-ui/ui/commit/ed5237c231f3b70107131bd7ba517e73b8c9014d) Thanks [@shadcn](https://github.com/shadcn)! - fix handling of shouldOverwriteCssVars
+
+## 2.9.0
+
+### Minor Changes
+
+- [#7782](https://github.com/shadcn-ui/ui/pull/7782) [`06d03d64f437b543bf5fa07ccbc559f285538ffd`](https://github.com/shadcn-ui/ui/commit/06d03d64f437b543bf5fa07ccbc559f285538ffd) Thanks [@shadcn](https://github.com/shadcn)! - add universal registry items support
+
+### Patch Changes
+
+- [#7795](https://github.com/shadcn-ui/ui/pull/7795) [`6c341c16aeaf5ade177a4a1ba4fb9afcd33d5fee`](https://github.com/shadcn-ui/ui/commit/6c341c16aeaf5ade177a4a1ba4fb9afcd33d5fee) Thanks [@shadcn](https://github.com/shadcn)! - fix safe target handling
+
+- [#7757](https://github.com/shadcn-ui/ui/pull/7757) [`db93787712fe51346bf87dbae8b4cf4e38ed8c27`](https://github.com/shadcn-ui/ui/commit/db93787712fe51346bf87dbae8b4cf4e38ed8c27) Thanks [@shadcn](https://github.com/shadcn)! - implement registry path validation
+
+## 2.8.0
+
+### Minor Changes
+
+- [#7720](https://github.com/shadcn-ui/ui/pull/7720) [`d544a7f7a519cd5b171d9ee7cb2fd1a226659ece`](https://github.com/shadcn-ui/ui/commit/d544a7f7a519cd5b171d9ee7cb2fd1a226659ece) Thanks [@shadcn](https://github.com/shadcn)! - refactor registry dependencies resolution
+
+- [#7717](https://github.com/shadcn-ui/ui/pull/7717) [`48fe0d709fd2b244314f95f56e7afb38b117ed8a`](https://github.com/shadcn-ui/ui/commit/48fe0d709fd2b244314f95f56e7afb38b117ed8a) Thanks [@shadcn](https://github.com/shadcn)! - add support for local registry item
+
+- [#6330](https://github.com/shadcn-ui/ui/pull/6330) [`ed244ea0b5abf7db50ac5fcf26e2993133fe94f7`](https://github.com/shadcn-ui/ui/commit/ed244ea0b5abf7db50ac5fcf26e2993133fe94f7) Thanks [@KitsuneDev](https://github.com/KitsuneDev)! - add support for vinxi based framework
+
+## 2.7.0
+
+### Minor Changes
+
+- [#7540](https://github.com/shadcn-ui/ui/pull/7540) [`cb19ab84646fc017c15fadc81fc47b695560a04c`](https://github.com/shadcn-ui/ui/commit/cb19ab84646fc017c15fadc81fc47b695560a04c) Thanks [@mrzachnugent](https://github.com/mrzachnugent)! - add support for expo
+
+- [#7640](https://github.com/shadcn-ui/ui/pull/7640) [`7c3d34cdc91681815f8897709917ec9fbcd69245`](https://github.com/shadcn-ui/ui/commit/7c3d34cdc91681815f8897709917ec9fbcd69245) Thanks [@shadcn](https://github.com/shadcn)! - add support for @plugin in css
+
+### Patch Changes
+
+- [#7609](https://github.com/shadcn-ui/ui/pull/7609) [`5b8ee41511fb5ff468d9218f97b8545e145d773c`](https://github.com/shadcn-ui/ui/commit/5b8ee41511fb5ff468d9218f97b8545e145d773c) Thanks [@xabierlameiro](https://github.com/xabierlameiro)! - fix typo in function name unnsetSpreadElements
+
+## 2.6.4
+
+### Patch Changes
+
+- [#7601](https://github.com/shadcn-ui/ui/pull/7601) [`c86c27a2ffb8d186770afa42bfb62ab46e3db975`](https://github.com/shadcn-ui/ui/commit/c86c27a2ffb8d186770afa42bfb62ab46e3db975) Thanks [@schiller-manuel](https://github.com/schiller-manuel)! - fix tanstack start detection
+
+## 2.6.3
+
+### Patch Changes
+
+- [#7594](https://github.com/shadcn-ui/ui/pull/7594) [`431af4f7ff294af032c0687b8b655ed6db2e690f`](https://github.com/shadcn-ui/ui/commit/431af4f7ff294af032c0687b8b655ed6db2e690f) Thanks [@shadcn](https://github.com/shadcn)! - fix: semicolon in code style
+
+## 2.6.2
+
+### Patch Changes
+
+- [#7586](https://github.com/shadcn-ui/ui/pull/7586) [`c5d90c718a186dd6fd90e022c56089eb569a1c10`](https://github.com/shadcn-ui/ui/commit/c5d90c718a186dd6fd90e022c56089eb569a1c10) Thanks [@shadcn](https://github.com/shadcn)! - add migrate-radix
+
+- [#7590](https://github.com/shadcn-ui/ui/pull/7590) [`92cfb9a30e976697ab8770f00393bd5325f9a16a`](https://github.com/shadcn-ui/ui/commit/92cfb9a30e976697ab8770f00393bd5325f9a16a) Thanks [@shadcn](https://github.com/shadcn)! - fix flacky tests
+
+## 2.6.1
+
+### Patch Changes
+
+- [#7573](https://github.com/shadcn-ui/ui/pull/7573) [`3119f94d47426dae860001a4cfb4ef23396dd41d`](https://github.com/shadcn-ui/ui/commit/3119f94d47426dae860001a4cfb4ef23396dd41d) Thanks [@shadcn](https://github.com/shadcn)! - update npm flag
+
+## 2.6.0
+
+### Minor Changes
+
+- [#7497](https://github.com/shadcn-ui/ui/pull/7497) [`df91b528871e258d548e4ea318b0376ac78676e0`](https://github.com/shadcn-ui/ui/commit/df91b528871e258d548e4ea318b0376ac78676e0) Thanks [@shadcn](https://github.com/shadcn)! - add registry:build command
+
+### Patch Changes
+
+- [#6885](https://github.com/shadcn-ui/ui/pull/6885) [`2773f9e2e29cf67e521632d15d1ba302a82e39e9`](https://github.com/shadcn-ui/ui/commit/2773f9e2e29cf67e521632d15d1ba302a82e39e9) Thanks [@Joshua-hypt](https://github.com/Joshua-hypt)! - resolved prefixing issue for Tailwind CSS v4 compatibility
+
+## 2.5.0
+
+### Minor Changes
+
+- [#7220](https://github.com/shadcn-ui/ui/pull/7220) [`d0306774fe0ecc1eae9ef1e918bf7862e866a9e8`](https://github.com/shadcn-ui/ui/commit/d0306774fe0ecc1eae9ef1e918bf7862e866a9e8) Thanks [@shadcn](https://github.com/shadcn)! - resolve imports from anywhere
+
+### Patch Changes
+
+- [#6985](https://github.com/shadcn-ui/ui/pull/6985) [`f1e5cc4666ced2166a859660d769ccee16cde46e`](https://github.com/shadcn-ui/ui/commit/f1e5cc4666ced2166a859660d769ccee16cde46e) Thanks [@nrjdalal](https://github.com/nrjdalal)! - move tw-animate-css to devDependencies
+
+- [#6899](https://github.com/shadcn-ui/ui/pull/6899) [`6f702f5fbf2b82a388e7da6ea08bcc84c2ec19c6`](https://github.com/shadcn-ui/ui/commit/6f702f5fbf2b82a388e7da6ea08bcc84c2ec19c6) Thanks [@justjavac](https://github.com/justjavac)! - add deno support
+
+## 2.4.1
+
+### Patch Changes
+
+- [#7196](https://github.com/shadcn-ui/ui/pull/7196) [`617483fe9c26d607665fcaf79ee26e35d9825d7c`](https://github.com/shadcn-ui/ui/commit/617483fe9c26d607665fcaf79ee26e35d9825d7c) Thanks [@shadcn](https://github.com/shadcn)! - do not throw if empty dir
+
+## 2.4.0
+
+### Minor Changes
+
+- [#6507](https://github.com/shadcn-ui/ui/pull/6507) [`5234c46722750f964d69c92ccbef2c4d260c211d`](https://github.com/shadcn-ui/ui/commit/5234c46722750f964d69c92ccbef2c4d260c211d) Thanks [@shadcn](https://github.com/shadcn)! - add support for TanStack Start
+
+- [#6487](https://github.com/shadcn-ui/ui/pull/6487) [`5ef2bc5f455dfc394116267788c0514b696e13b0`](https://github.com/shadcn-ui/ui/commit/5ef2bc5f455dfc394116267788c0514b696e13b0) Thanks [@shadcn](https://github.com/shadcn)! - add theme vars support
+
+- [#6478](https://github.com/shadcn-ui/ui/pull/6478) [`8f6a64f176defdb1f9c493598d952fb4e9844cd0`](https://github.com/shadcn-ui/ui/commit/8f6a64f176defdb1f9c493598d952fb4e9844cd0) Thanks [@shadcn](https://github.com/shadcn)! - add tailwind version detection
+
+- [#6864](https://github.com/shadcn-ui/ui/pull/6864) [`19665adeeddc4ddb34e91fca219753d15bd46480`](https://github.com/shadcn-ui/ui/commit/19665adeeddc4ddb34e91fca219753d15bd46480) Thanks [@shadcn](https://github.com/shadcn)! - add --base-color flag
+
+- [#6490](https://github.com/shadcn-ui/ui/pull/6490) [`9a14c1d0925d3df2c8f57a3381d212cc3e54f4a6`](https://github.com/shadcn-ui/ui/commit/9a14c1d0925d3df2c8f57a3381d212cc3e54f4a6) Thanks [@shadcn](https://github.com/shadcn)! - add support for tailwind v4
+
+- [#6707](https://github.com/shadcn-ui/ui/pull/6707) [`3db8a07b3f132d396d7fb2e50da96156efcb4138`](https://github.com/shadcn-ui/ui/commit/3db8a07b3f132d396d7fb2e50da96156efcb4138) Thanks [@shadcn](https://github.com/shadcn)! - default to css vars. add --no-css-variables
+
+- [#6968](https://github.com/shadcn-ui/ui/pull/6968) [`205bfc637e093717908ebd2c591b215672950558`](https://github.com/shadcn-ui/ui/commit/205bfc637e093717908ebd2c591b215672950558) Thanks [@shadcn](https://github.com/shadcn)! - replace tailwindcss-animate with tw-animate-css
+
+- [#6574](https://github.com/shadcn-ui/ui/pull/6574) [`1e357cb20d6024b2bc9766fb15f61cb989eb7024`](https://github.com/shadcn-ui/ui/commit/1e357cb20d6024b2bc9766fb15f61cb989eb7024) Thanks [@shadcn](https://github.com/shadcn)! - default for new-york for v4
+
+- [#6515](https://github.com/shadcn-ui/ui/pull/6515) [`d1eb24e23a973646d78cf101fa1e0a22861ac9fd`](https://github.com/shadcn-ui/ui/commit/d1eb24e23a973646d78cf101fa1e0a22861ac9fd) Thanks [@shadcn](https://github.com/shadcn)! - fix handling of sidebar colors
+
+- [#6693](https://github.com/shadcn-ui/ui/pull/6693) [`3740373f99e39943514a45f5808ecb5f17faf700`](https://github.com/shadcn-ui/ui/commit/3740373f99e39943514a45f5808ecb5f17faf700) Thanks [@shadcn](https://github.com/shadcn)! - add oklch base color
+
+- [#6571](https://github.com/shadcn-ui/ui/pull/6571) [`c74a094f14a6e338124709547932dbb20c8d1324`](https://github.com/shadcn-ui/ui/commit/c74a094f14a6e338124709547932dbb20c8d1324) Thanks [@shadcn](https://github.com/shadcn)! - hotswap style for v4
+
+- [#6576](https://github.com/shadcn-ui/ui/pull/6576) [`9f4d65fc8fe72f632706fafd4036f63fd9317780`](https://github.com/shadcn-ui/ui/commit/9f4d65fc8fe72f632706fafd4036f63fd9317780) Thanks [@shadcn](https://github.com/shadcn)! - add warning for deprecated components
+
+- [#6811](https://github.com/shadcn-ui/ui/pull/6811) [`bc7df68620f242ce6aa640839c80ddc8afc7e091`](https://github.com/shadcn-ui/ui/commit/bc7df68620f242ce6aa640839c80ddc8afc7e091) Thanks [@shadcn](https://github.com/shadcn)! - add support for route install for react-router and laravel
+
+- [#7016](https://github.com/shadcn-ui/ui/pull/7016) [`b3b2fe2755e0ec1271c41a2a61b1a6933af42bc6`](https://github.com/shadcn-ui/ui/commit/b3b2fe2755e0ec1271c41a2a61b1a6933af42bc6) Thanks [@shadcn](https://github.com/shadcn)! - add theme prop to registry-item schema
+
+### Patch Changes
+
+- [#6724](https://github.com/shadcn-ui/ui/pull/6724) [`a3fe5074c1375cbd92e1ccdaab38d6808bfec696`](https://github.com/shadcn-ui/ui/commit/a3fe5074c1375cbd92e1ccdaab38d6808bfec696) Thanks [@Kaikaikaifang](https://github.com/Kaikaikaifang)! - support for version detection in monorepo
+
+- [#6414](https://github.com/shadcn-ui/ui/pull/6414) [`202131cd7bf8829b962ae4027545afbdfe79e688`](https://github.com/shadcn-ui/ui/commit/202131cd7bf8829b962ae4027545afbdfe79e688) Thanks [@palmithor](https://github.com/palmithor)! - upgrade @antfu/ni
+
+- [#6965](https://github.com/shadcn-ui/ui/pull/6965) [`69fc8e23cc0631aac6b708ba0481509f1125d3d7`](https://github.com/shadcn-ui/ui/commit/69fc8e23cc0631aac6b708ba0481509f1125d3d7) Thanks [@jherr](https://github.com/jherr)! - allow silent mode with npm
+
+- [#6814](https://github.com/shadcn-ui/ui/pull/6814) [`8539dd6eec948e7a6218c7ca3372d2b1f349d7c0`](https://github.com/shadcn-ui/ui/commit/8539dd6eec948e7a6218c7ca3372d2b1f349d7c0) Thanks [@shadcn](https://github.com/shadcn)! - do not add ring for v3
+
+- [#6732](https://github.com/shadcn-ui/ui/pull/6732) [`839afa714f61e2c0f83e9417354ea6ba8246c177`](https://github.com/shadcn-ui/ui/commit/839afa714f61e2c0f83e9417354ea6ba8246c177) Thanks [@shadcn](https://github.com/shadcn)! - cache registry calls
+
+- [#6863](https://github.com/shadcn-ui/ui/pull/6863) [`c16c58d0f9e672edddd554269fdd0eb0d412cb9d`](https://github.com/shadcn-ui/ui/commit/c16c58d0f9e672edddd554269fdd0eb0d412cb9d) Thanks [@shadcn](https://github.com/shadcn)! - add --template flag
+
+- [#6721](https://github.com/shadcn-ui/ui/pull/6721) [`a5122f9029c91963f493e7348ef7681dad4834e5`](https://github.com/shadcn-ui/ui/commit/a5122f9029c91963f493e7348ef7681dad4834e5) Thanks [@shadcn](https://github.com/shadcn)! - do not overwrite user defined vars
+
+- [#6530](https://github.com/shadcn-ui/ui/pull/6530) [`d6159023ed0817adf14b4398874b1f5f05a73b02`](https://github.com/shadcn-ui/ui/commit/d6159023ed0817adf14b4398874b1f5f05a73b02) Thanks [@zwarunek](https://github.com/zwarunek)! - fix cn import bug in monorepo
+
+- [#6617](https://github.com/shadcn-ui/ui/pull/6617) [`bd8533bd265de7765831d398f4db687483a0e53a`](https://github.com/shadcn-ui/ui/commit/bd8533bd265de7765831d398f4db687483a0e53a) Thanks [@shadcn](https://github.com/shadcn)! - filter out deprecated from --all
+
+- [#6733](https://github.com/shadcn-ui/ui/pull/6733) [`779517a1d46f567c8e3fa8fcdea4c75c65ad4eb4`](https://github.com/shadcn-ui/ui/commit/779517a1d46f567c8e3fa8fcdea4c75c65ad4eb4) Thanks [@shadcn](https://github.com/shadcn)! - check for empty css vars
+
+- [#6967](https://github.com/shadcn-ui/ui/pull/6967) [`9eae13639c10f0219872b5fd28f523a4c25f40df`](https://github.com/shadcn-ui/ui/commit/9eae13639c10f0219872b5fd28f523a4c25f40df) Thanks [@shadcn](https://github.com/shadcn)! - only show deprecated for new projects
+
+- [#6590](https://github.com/shadcn-ui/ui/pull/6590) [`16d4d38f564c75d4187977275f04d5999ee9e2f4`](https://github.com/shadcn-ui/ui/commit/16d4d38f564c75d4187977275f04d5999ee9e2f4) Thanks [@prateekkumarweb](https://github.com/prateekkumarweb)! - fix tanstack check
+
+## 2.2.0
+
+### Minor Changes
+
+- [#6475](https://github.com/shadcn-ui/ui/pull/6475) [`699195b`](https://github.com/shadcn-ui/ui/commit/699195ba77ba41d3da356dd82775ae6db9af3d96) Thanks [@shadcn](https://github.com/shadcn)! - remove unused lodash.template
+
+- [#6350](https://github.com/shadcn-ui/ui/pull/6350) [`cb742e9`](https://github.com/shadcn-ui/ui/commit/cb742e98252fe8aa5cad3377d06e1d8a884953db)) Thanks [@shadcn](https://github.com/shadcn)! - new build command
+
+- [#6369](https://github.com/shadcn-ui/ui/pull/6369) [`f07c7ad`](https://github.com/shadcn-ui/ui/commit/f07c7ad5d0d2c2159f2c81a31ae6cbbe9a6ede30) Thanks [@shadcn](https://github.com/shadcn)! - handle nested file path
+
+- [#6339](https://github.com/shadcn-ui/ui/pull/6339) [`254198b`](https://github.com/shadcn-ui/ui/commit/254198b4bf38ca18361dbcf4373536c55ea8ef11) Thanks [@shadcn](https://github.com/shadcn)! - add schema
+
+- [#6377](https://github.com/shadcn-ui/ui/pull/6377) [`5f7957a`](https://github.com/shadcn-ui/ui/commit/5f7957ab51c3d929f322937147269ef3bdfeb472) Thanks [@shadcn](https://github.com/shadcn)! - new registry:file type
+
+## 2.1.8
+
+### Patch Changes
+
+- [#6093](https://github.com/shadcn-ui/ui/pull/6093) [`c8fda09`](https://github.com/shadcn-ui/ui/commit/c8fda09a63f793e9e2e5a86d8f8faad5af9d1ab4) Thanks [@shadcn](https://github.com/shadcn)! - detect and use next version
+
+## 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
+
+- [#5602](https://github.com/shadcn-ui/ui/pull/5602) [`2c2fe97`](https://github.com/shadcn-ui/ui/commit/2c2fe97eb96b2c5c7d03d1ae2756a851c3790030) Thanks [@shadcn](https://github.com/shadcn)! - move new-york icons to lucide-react
+
+## 2.1.5
+
+### Patch Changes
+
+- [#5707](https://github.com/shadcn-ui/ui/pull/5707) [`cdfecd1`](https://github.com/shadcn-ui/ui/commit/cdfecd1d97af2b4d9de330927edd9fd2eef1234e) Thanks [@shadcn](https://github.com/shadcn)! - temporarily bring back npm flag
+
+## 2.1.4
+
+### Patch Changes
+
+- [#5686](https://github.com/shadcn-ui/ui/pull/5686) [`4ff64ba`](https://github.com/shadcn-ui/ui/commit/4ff64ba818d15a094547f845ea294c2e1ab208d4) Thanks [@shadcn](https://github.com/shadcn)! - remove flag for npm
+
+## 2.1.3
+
+### Patch Changes
+
+- [#5621](https://github.com/shadcn-ui/ui/pull/5621) [`64739f8`](https://github.com/shadcn-ui/ui/commit/64739f83991205333867000d7813e82b0d98f871) Thanks [@shadcn](https://github.com/shadcn)! - add flag prompt for npm
+
+## 2.1.2
+
+### Patch Changes
+
+- [#5299](https://github.com/shadcn-ui/ui/pull/5299) [`986c00e`](https://github.com/shadcn-ui/ui/commit/986c00ee0e661bf2391b305c2b24800be63e681e) Thanks [@fourcels](https://github.com/fourcels)! - fix package manager fallback
+
+## 2.1.1
+
+### Patch Changes
+
+- [#5525](https://github.com/shadcn-ui/ui/pull/5525) [`f02b412`](https://github.com/shadcn-ui/ui/commit/f02b412478a2e4e1b20d87f4a253e9305331d066) Thanks [@shadcn](https://github.com/shadcn)! - temporarily pin create-next-app
+
+- [#5518](https://github.com/shadcn-ui/ui/pull/5518) [`bf5a79c`](https://github.com/shadcn-ui/ui/commit/bf5a79c4d427cf499c6196c2eea3df04d9410977) Thanks [@bcorbold](https://github.com/bcorbold)! - fix transofmrRsc for handling use client
+
 ## 2.1.0
 
 ### Minor Changes
diff --git a/packages/shadcn/package.json b/packages/shadcn/package.json
index e7dcce7e541..974964df0f9 100644
--- a/packages/shadcn/package.json
+++ b/packages/shadcn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "shadcn",
-  "version": "2.1.0",
+  "version": "3.3.1",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"
@@ -26,14 +26,32 @@
     "shadcn"
   ],
   "type": "module",
-  "exports": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./registry": {
+      "types": "./dist/registry/index.d.ts",
+      "default": "./dist/registry/index.js"
+    },
+    "./schema": {
+      "types": "./dist/schema/index.d.ts",
+      "default": "./dist/schema/index.js"
+    },
+    "./mcp": {
+      "types": "./dist/mcp/index.d.ts",
+      "default": "./dist/mcp/index.js"
+    }
+  },
   "bin": "./dist/index.js",
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf dist && rimraf components",
-    "start:dev": "cross-env REGISTRY_URL=http://localhost:3333/r node dist/index.js",
+    "start:dev": "cross-env REGISTRY_URL=http://localhost:4000/r node dist/index.js",
+    "start:prod": "cross-env REGISTRY_URL=https://ui.shadcn.com/r node dist/index.js",
     "start": "node dist/index.js",
     "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
@@ -42,43 +60,49 @@
     "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
     "pub:release": "pnpm build && pnpm publish --access public",
     "test": "vitest run",
-    "test:dev": "REGISTRY_URL=http://localhost:3333/r vitest run"
+    "test:dev": "REGISTRY_URL=http://localhost:4000/r vitest run",
+    "mcp:inspect": "pnpm dlx @modelcontextprotocol/inspector node dist/index.js mcp"
   },
   "dependencies": {
-    "@antfu/ni": "^0.21.4",
-    "@babel/core": "^7.22.1",
-    "@babel/parser": "^7.22.6",
-    "@babel/plugin-transform-typescript": "^7.22.5",
-    "commander": "^10.0.0",
-    "cosmiconfig": "^8.1.3",
+    "@antfu/ni": "^25.0.0",
+    "@babel/core": "^7.28.0",
+    "@babel/parser": "^7.28.0",
+    "@babel/plugin-transform-typescript": "^7.28.0",
+    "@babel/preset-typescript": "^7.27.1",
+    "@dotenvx/dotenvx": "^1.48.4",
+    "@modelcontextprotocol/sdk": "^1.17.2",
+    "browserslist": "^4.26.2",
+    "commander": "^14.0.0",
+    "cosmiconfig": "^9.0.0",
+    "dedent": "^1.6.0",
     "deepmerge": "^4.3.1",
-    "diff": "^5.1.0",
-    "execa": "^7.0.0",
-    "fast-glob": "^3.3.2",
-    "fs-extra": "^11.1.0",
-    "https-proxy-agent": "^6.2.0",
+    "diff": "^8.0.2",
+    "execa": "^9.6.0",
+    "fast-glob": "^3.3.3",
+    "fs-extra": "^11.3.1",
+    "fuzzysort": "^3.1.0",
+    "https-proxy-agent": "^7.0.6",
     "kleur": "^4.1.5",
-    "lodash.template": "^4.5.0",
-    "node-fetch": "^3.3.0",
-    "ora": "^6.1.2",
-    "postcss": "^8.4.24",
+    "msw": "^2.10.4",
+    "node-fetch": "^3.3.2",
+    "ora": "^8.2.0",
+    "postcss": "^8.5.6",
     "prompts": "^2.4.2",
-    "recast": "^0.23.2",
+    "recast": "^0.23.11",
     "stringify-object": "^5.0.0",
-    "ts-morph": "^18.0.0",
+    "ts-morph": "^26.0.0",
     "tsconfig-paths": "^4.2.0",
-    "zod": "^3.20.2"
+    "zod": "^3.24.1",
+    "zod-to-json-schema": "^3.24.6"
   },
   "devDependencies": {
-    "@types/babel__core": "^7.20.1",
-    "@types/diff": "^5.0.3",
-    "@types/fs-extra": "^11.0.1",
-    "@types/lodash.template": "^4.5.1",
-    "@types/prompts": "^2.4.2",
+    "@types/babel__core": "^7.20.5",
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9",
     "@types/stringify-object": "^4.0.5",
     "rimraf": "^6.0.1",
-    "tsup": "^6.6.3",
-    "type-fest": "^3.8.0",
-    "typescript": "^4.9.3"
+    "tsup": "^8.5.0",
+    "type-fest": "^4.41.0",
+    "typescript": "^5.9.2"
   }
 }
diff --git a/packages/shadcn/src/commands/add.ts b/packages/shadcn/src/commands/add.ts
index e59e4e8e296..27a8c58d07d 100644
--- a/packages/shadcn/src/commands/add.ts
+++ b/packages/shadcn/src/commands/add.ts
@@ -1,13 +1,20 @@
 import path from "path"
 import { runInit } from "@/src/commands/init"
 import { preFlightAdd } from "@/src/preflights/preflight-add"
+import { getRegistryItems, getShadcnRegistryIndex } from "@/src/registry/api"
+import { DEPRECATED_COMPONENTS } from "@/src/registry/constants"
+import { clearRegistryContext } from "@/src/registry/context"
+import { isUniversalRegistryItem } from "@/src/registry/utils"
 import { addComponents } from "@/src/utils/add-components"
 import { createProject } from "@/src/utils/create-project"
+import { loadEnvFiles } from "@/src/utils/env-loader"
 import * as ERRORS from "@/src/utils/errors"
+import { createConfig, getConfig } from "@/src/utils/get-config"
+import { getProjectInfo } from "@/src/utils/get-project-info"
 import { handleError } from "@/src/utils/handle-error"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
-import { getRegistryIndex } from "@/src/utils/registry"
+import { ensureRegistriesInConfig } from "@/src/utils/registries"
 import { updateAppIndex } from "@/src/utils/update-app-index"
 import { Command } from "commander"
 import prompts from "prompts"
@@ -22,15 +29,13 @@ export const addOptionsSchema = z.object({
   path: z.string().optional(),
   silent: z.boolean(),
   srcDir: z.boolean().optional(),
+  cssVariables: z.boolean(),
 })
 
 export const add = new Command()
   .name("add")
   .description("add a component to your project")
-  .argument(
-    "[components...]",
-    "the components to add or a url to the component."
-  )
+  .argument("[components...]", "names, url or local path to component")
   .option("-y, --yes", "skip confirmation prompt.", false)
   .option("-o, --overwrite", "overwrite existing files.", false)
   .option(
@@ -46,6 +51,12 @@ export const add = new Command()
     "use the src directory when creating a new project.",
     false
   )
+  .option(
+    "--no-src-dir",
+    "do not use the src directory when creating a new project."
+  )
+  .option("--css-variables", "use css variables for theming.", true)
+  .option("--no-css-variables", "do not use css variables for theming.")
   .action(async (components, opts) => {
     try {
       const options = addOptionsSchema.parse({
@@ -54,25 +65,61 @@ export const add = new Command()
         ...opts,
       })
 
-      // Confirm if user is installing themes.
-      // For now, we assume a theme is prefixed with "theme-".
-      const isTheme = options.components?.some((component) =>
-        component.includes("theme-")
-      )
-      if (!options.yes && isTheme) {
-        logger.break()
-        const { confirm } = await prompts({
-          type: "confirm",
-          name: "confirm",
-          message: highlighter.warn(
-            "You are about to install a new theme. \nExisting CSS variables will be overwritten. Continue?"
-          ),
+      await loadEnvFiles(options.cwd)
+
+      let initialConfig = await getConfig(options.cwd)
+      if (!initialConfig) {
+        initialConfig = createConfig({
+          style: "new-york",
+          resolvedPaths: {
+            cwd: options.cwd,
+          },
         })
-        if (!confirm) {
-          logger.break()
-          logger.log("Theme installation cancelled.")
+      }
+
+      let hasNewRegistries = false
+      if (components.length > 0) {
+        const { config: updatedConfig, newRegistries } =
+          await ensureRegistriesInConfig(components, initialConfig, {
+            silent: options.silent,
+            writeFile: false,
+          })
+        initialConfig = updatedConfig
+        hasNewRegistries = newRegistries.length > 0
+      }
+
+      if (components.length > 0) {
+        const [registryItem] = await getRegistryItems([components[0]], {
+          config: initialConfig,
+        })
+        const itemType = registryItem?.type
+
+        if (isUniversalRegistryItem(registryItem)) {
+          await addComponents(components, initialConfig, options)
+          return
+        }
+
+        if (
+          !options.yes &&
+          (itemType === "registry:style" || itemType === "registry:theme")
+        ) {
           logger.break()
-          process.exit(1)
+          const { confirm } = await prompts({
+            type: "confirm",
+            name: "confirm",
+            message: highlighter.warn(
+              `You are about to install a new ${itemType.replace(
+                "registry:",
+                ""
+              )}. \nExisting CSS variables and components will be overwritten. Continue?`
+            ),
+          })
+          if (!confirm) {
+            logger.break()
+            logger.log(`Installation cancelled.`)
+            logger.break()
+            process.exit(1)
+          }
         }
       }
 
@@ -80,9 +127,26 @@ export const add = new Command()
         options.components = await promptForRegistryComponents(options)
       }
 
+      const projectInfo = await getProjectInfo(options.cwd)
+      if (projectInfo?.tailwindVersion === "v4") {
+        const deprecatedComponents = DEPRECATED_COMPONENTS.filter((component) =>
+          options.components?.includes(component.name)
+        )
+
+        if (deprecatedComponents?.length) {
+          logger.break()
+          deprecatedComponents.forEach((component) => {
+            logger.warn(highlighter.warn(component.message))
+          })
+          logger.break()
+          process.exit(1)
+        }
+      }
+
       let { errors, config } = await preFlightAdd(options)
 
       // No components.json file. Prompt the user to run init.
+      let initHasRun = false
       if (errors[ERRORS.MISSING_CONFIG]) {
         const { proceed } = await prompts({
           type: "confirm",
@@ -104,18 +168,24 @@ export const add = new Command()
           force: true,
           defaults: false,
           skipPreflight: false,
-          silent: true,
+          silent: options.silent || !hasNewRegistries,
           isNewProject: false,
           srcDir: options.srcDir,
+          cssVariables: options.cssVariables,
+          baseStyle: true,
+          components: options.components,
         })
+        initHasRun = true
       }
 
       let shouldUpdateAppIndex = false
+
       if (errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
-        const { projectPath } = await createProject({
+        const { projectPath, template } = await createProject({
           cwd: options.cwd,
           force: options.overwrite,
           srcDir: options.srcDir,
+          components: options.components,
         })
         if (!projectPath) {
           logger.break()
@@ -123,20 +193,29 @@ export const add = new Command()
         }
         options.cwd = projectPath
 
-        config = await runInit({
-          cwd: options.cwd,
-          yes: true,
-          force: true,
-          defaults: false,
-          skipPreflight: true,
-          silent: true,
-          isNewProject: true,
-          srcDir: options.srcDir,
-        })
+        if (template === "next-monorepo") {
+          options.cwd = path.resolve(options.cwd, "apps/web")
+          config = await getConfig(options.cwd)
+        } else {
+          config = await runInit({
+            cwd: options.cwd,
+            yes: true,
+            force: true,
+            defaults: false,
+            skipPreflight: true,
+            silent: !hasNewRegistries && options.silent,
+            isNewProject: true,
+            srcDir: options.srcDir,
+            cssVariables: options.cssVariables,
+            baseStyle: true,
+            components: options.components,
+          })
+          initHasRun = true
 
-        shouldUpdateAppIndex =
-          options.components?.length === 1 &&
-          !!options.components[0].match(/\/chat\/b\//)
+          shouldUpdateAppIndex =
+            options.components?.length === 1 &&
+            !!options.components[0].match(/\/chat\/b\//)
+        }
       }
 
       if (!config) {
@@ -145,7 +224,18 @@ export const add = new Command()
         )
       }
 
-      await addComponents(options.components, config, options)
+      const { config: updatedConfig } = await ensureRegistriesInConfig(
+        options.components,
+        config,
+        {
+          silent: options.silent || hasNewRegistries,
+        }
+      )
+      config = updatedConfig
+
+      if (!initHasRun) {
+        await addComponents(options.components, config, options)
+      }
 
       // If we're adding a single component and it's from the v0 registry,
       // let's update the app/page.tsx file to import the component.
@@ -155,13 +245,15 @@ export const add = new Command()
     } catch (error) {
       logger.break()
       handleError(error)
+    } finally {
+      clearRegistryContext()
     }
   })
 
 async function promptForRegistryComponents(
   options: z.infer<typeof addOptionsSchema>
 ) {
-  const registryIndex = await getRegistryIndex()
+  const registryIndex = await getShadcnRegistryIndex()
   if (!registryIndex) {
     logger.break()
     handleError(new Error("Failed to fetch registry index."))
@@ -169,7 +261,11 @@ async function promptForRegistryComponents(
   }
 
   if (options.all) {
-    return registryIndex.map((entry) => entry.name)
+    return registryIndex
+      .map((entry) => entry.name)
+      .filter(
+        (component) => !DEPRECATED_COMPONENTS.some((c) => c.name === component)
+      )
   }
 
   if (options.components?.length) {
@@ -183,7 +279,13 @@ async function promptForRegistryComponents(
     hint: "Space to select. A to toggle all. Enter to submit.",
     instructions: false,
     choices: registryIndex
-      .filter((entry) => entry.type === "registry:ui")
+      .filter(
+        (entry) =>
+          entry.type === "registry:ui" &&
+          !DEPRECATED_COMPONENTS.some(
+            (component) => component.name === entry.name
+          )
+      )
       .map((entry) => ({
         title: entry.name,
         value: entry.name,
diff --git a/packages/shadcn/src/commands/build.ts b/packages/shadcn/src/commands/build.ts
new file mode 100644
index 00000000000..b6992ef331c
--- /dev/null
+++ b/packages/shadcn/src/commands/build.ts
@@ -0,0 +1,99 @@
+import * as fs from "fs/promises"
+import * as path from "path"
+import { preFlightBuild } from "@/src/preflights/preflight-build"
+import { registryItemSchema, registrySchema } from "@/src/schema"
+import { handleError } from "@/src/utils/handle-error"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+import { spinner } from "@/src/utils/spinner"
+import { Command } from "commander"
+import { z } from "zod"
+
+export const buildOptionsSchema = z.object({
+  cwd: z.string(),
+  registryFile: z.string(),
+  outputDir: z.string(),
+})
+
+export const build = new Command()
+  .name("build")
+  .description("build components for a shadcn registry")
+  .argument("[registry]", "path to registry.json file", "./registry.json")
+  .option(
+    "-o, --output <path>",
+    "destination directory for json files",
+    "./public/r"
+  )
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .action(async (registry: string, opts) => {
+    try {
+      const options = buildOptionsSchema.parse({
+        cwd: path.resolve(opts.cwd),
+        registryFile: registry,
+        outputDir: opts.output,
+      })
+
+      const { resolvePaths } = await preFlightBuild(options)
+      const content = await fs.readFile(resolvePaths.registryFile, "utf-8")
+
+      const result = registrySchema.safeParse(JSON.parse(content))
+
+      if (!result.success) {
+        logger.error(
+          `Invalid registry file found at ${highlighter.info(
+            resolvePaths.registryFile
+          )}.`
+        )
+        process.exit(1)
+      }
+
+      const buildSpinner = spinner("Building registry...")
+      for (const registryItem of result.data.items) {
+        buildSpinner.start(`Building ${registryItem.name}...`)
+
+        // Add the schema to the registry item.
+        registryItem["$schema"] =
+          "https://ui.shadcn.com/schema/registry-item.json"
+
+        // Loop through each file in the files array.
+        for (const file of registryItem.files ?? []) {
+          file["content"] = await fs.readFile(
+            path.resolve(resolvePaths.cwd, file.path),
+            "utf-8"
+          )
+        }
+
+        // Validate the registry item.
+        const result = registryItemSchema.safeParse(registryItem)
+        if (!result.success) {
+          logger.error(
+            `Invalid registry item found for ${highlighter.info(
+              registryItem.name
+            )}.`
+          )
+          continue
+        }
+
+        // Write the registry item to the output directory.
+        await fs.writeFile(
+          path.resolve(resolvePaths.outputDir, `${result.data.name}.json`),
+          JSON.stringify(result.data, null, 2)
+        )
+      }
+
+      // Copy registry.json to the output directory.
+      await fs.copyFile(
+        resolvePaths.registryFile,
+        path.resolve(resolvePaths.outputDir, "registry.json")
+      )
+
+      buildSpinner.succeed("Building registry.")
+    } catch (error) {
+      logger.break()
+      handleError(error)
+    }
+  })
diff --git a/packages/shadcn/src/commands/diff.ts b/packages/shadcn/src/commands/diff.ts
index 188bd7aa31b..3e1dfa57389 100644
--- a/packages/shadcn/src/commands/diff.ts
+++ b/packages/shadcn/src/commands/diff.ts
@@ -1,16 +1,16 @@
 import { existsSync, promises as fs } from "fs"
 import path from "path"
-import { Config, getConfig } from "@/src/utils/get-config"
-import { handleError } from "@/src/utils/handle-error"
-import { highlighter } from "@/src/utils/highlighter"
-import { logger } from "@/src/utils/logger"
 import {
   fetchTree,
   getItemTargetPath,
   getRegistryBaseColor,
-  getRegistryIndex,
-} from "@/src/utils/registry"
-import { registryIndexSchema } from "@/src/utils/registry/schema"
+  getShadcnRegistryIndex,
+} from "@/src/registry/api"
+import { registryIndexSchema } from "@/src/schema"
+import { Config, getConfig } from "@/src/utils/get-config"
+import { handleError } from "@/src/utils/handle-error"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
 import { transform } from "@/src/utils/transformers"
 import { Command } from "commander"
 import { diffLines, type Change } from "diff"
@@ -57,7 +57,7 @@ export const diff = new Command()
         process.exit(1)
       }
 
-      const registryIndex = await getRegistryIndex()
+      const registryIndex = await getShadcnRegistryIndex()
 
       if (!registryIndex) {
         handleError(new Error("Failed to fetch registry index."))
diff --git a/packages/shadcn/src/commands/info.ts b/packages/shadcn/src/commands/info.ts
new file mode 100644
index 00000000000..2ff0f08b903
--- /dev/null
+++ b/packages/shadcn/src/commands/info.ts
@@ -0,0 +1,25 @@
+import { getConfig } from "@/src/utils/get-config"
+import { getProjectInfo } from "@/src/utils/get-project-info"
+import { handleError } from "@/src/utils/handle-error"
+import { logger } from "@/src/utils/logger"
+import { Command } from "commander"
+
+export const info = new Command()
+  .name("info")
+  .description("get information about your project")
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .action(async (opts) => {
+    try {
+      logger.info("> project info")
+      console.log(await getProjectInfo(opts.cwd))
+      logger.break()
+      logger.info("> components.json")
+      console.log(await getConfig(opts.cwd))
+    } catch (error) {
+      handleError(error)
+    }
+  })
diff --git a/packages/shadcn/src/commands/init.ts b/packages/shadcn/src/commands/init.ts
index 74dc410f11f..eed354146b2 100644
--- a/packages/shadcn/src/commands/init.ts
+++ b/packages/shadcn/src/commands/init.ts
@@ -1,30 +1,64 @@
 import { promises as fs } from "fs"
 import path from "path"
 import { preFlightInit } from "@/src/preflights/preflight-init"
+import {
+  getRegistryBaseColors,
+  getRegistryItems,
+  getRegistryStyles,
+} from "@/src/registry/api"
+import { buildUrlAndHeadersForRegistryItem } from "@/src/registry/builder"
+import { configWithDefaults } from "@/src/registry/config"
+import { BASE_COLORS, BUILTIN_REGISTRIES } from "@/src/registry/constants"
+import { clearRegistryContext } from "@/src/registry/context"
+import { rawConfigSchema } from "@/src/schema"
 import { addComponents } from "@/src/utils/add-components"
-import { createProject } from "@/src/utils/create-project"
+import { TEMPLATES, createProject } from "@/src/utils/create-project"
+import { loadEnvFiles } from "@/src/utils/env-loader"
 import * as ERRORS from "@/src/utils/errors"
+import {
+  FILE_BACKUP_SUFFIX,
+  createFileBackup,
+  deleteFileBackup,
+  restoreFileBackup,
+} from "@/src/utils/file-helper"
 import {
   DEFAULT_COMPONENTS,
   DEFAULT_TAILWIND_CONFIG,
   DEFAULT_TAILWIND_CSS,
   DEFAULT_UTILS,
   getConfig,
-  rawConfigSchema,
   resolveConfigPaths,
   type Config,
 } from "@/src/utils/get-config"
-import { getProjectConfig, getProjectInfo } from "@/src/utils/get-project-info"
+import {
+  getProjectConfig,
+  getProjectInfo,
+  getProjectTailwindVersionFromConfig,
+} from "@/src/utils/get-project-info"
 import { handleError } from "@/src/utils/handle-error"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
-import { getRegistryBaseColors, getRegistryStyles } from "@/src/utils/registry"
+import { ensureRegistriesInConfig } from "@/src/utils/registries"
 import { spinner } from "@/src/utils/spinner"
 import { updateTailwindContent } from "@/src/utils/updaters/update-tailwind-content"
 import { Command } from "commander"
+import deepmerge from "deepmerge"
+import fsExtra from "fs-extra"
 import prompts from "prompts"
 import { z } from "zod"
 
+process.on("exit", (code) => {
+  const filePath = path.resolve(process.cwd(), "components.json")
+
+  // Delete backup if successful.
+  if (code === 0) {
+    return deleteFileBackup(filePath)
+  }
+
+  // Restore backup if error.
+  return restoreFileBackup(filePath)
+})
+
 export const initOptionsSchema = z.object({
   cwd: z.string(),
   components: z.array(z.string()).optional(),
@@ -34,14 +68,53 @@ export const initOptionsSchema = z.object({
   silent: z.boolean(),
   isNewProject: z.boolean(),
   srcDir: z.boolean().optional(),
+  cssVariables: z.boolean(),
+  template: z
+    .string()
+    .optional()
+    .refine(
+      (val) => {
+        if (val) {
+          return TEMPLATES[val as keyof typeof TEMPLATES]
+        }
+        return true
+      },
+      {
+        message: "Invalid template. Please use 'next' or 'next-monorepo'.",
+      }
+    ),
+  baseColor: z
+    .string()
+    .optional()
+    .refine(
+      (val) => {
+        if (val) {
+          return BASE_COLORS.find((color) => color.name === val)
+        }
+
+        return true
+      },
+      {
+        message: `Invalid base color. Please use '${BASE_COLORS.map(
+          (color) => color.name
+        ).join("', '")}'`,
+      }
+    ),
+  baseStyle: z.boolean(),
 })
 
 export const init = new Command()
   .name("init")
   .description("initialize your project and install dependencies")
-  .argument(
-    "[components...]",
-    "the components to add or a url to the component."
+  .argument("[components...]", "names, url or local path to component")
+  .option(
+    "-t, --template <template>",
+    "the template to use. (next, next-monorepo)"
+  )
+  .option(
+    "-b, --base-color <base-color>",
+    "the base color to use. (neutral, gray, zinc, stone, slate)",
+    undefined
   )
   .option("-y, --yes", "skip confirmation prompt.", true)
   .option("-d, --defaults,", "use default configuration.", false)
@@ -57,8 +130,21 @@ export const init = new Command()
     "use the src directory when creating a new project.",
     false
   )
+  .option(
+    "--no-src-dir",
+    "do not use the src directory when creating a new project."
+  )
+  .option("--css-variables", "use css variables for theming.", true)
+  .option("--no-css-variables", "do not use css variables for theming.")
+  .option("--no-base-style", "do not install the base shadcn style.")
   .action(async (components, opts) => {
     try {
+      // Apply defaults when --defaults flag is set.
+      if (opts.defaults) {
+        opts.template = opts.template || "next"
+        opts.baseColor = opts.baseColor || "neutral"
+      }
+
       const options = initOptionsSchema.parse({
         cwd: path.resolve(opts.cwd),
         isNewProject: false,
@@ -66,6 +152,63 @@ export const init = new Command()
         ...opts,
       })
 
+      await loadEnvFiles(options.cwd)
+
+      // We need to check if we're initializing with a new style.
+      // This will allow us to determine if we need to install the base style.
+      // And if we should prompt the user for a base color.
+      if (components.length > 0) {
+        // We don't know the full config at this point.
+        // So we'll use a shadow config to fetch the first item.
+        let shadowConfig = configWithDefaults({})
+
+        // Check if there's a components.json file.
+        // If so, we'll merge with our shadow config.
+        const componentsJsonPath = path.resolve(options.cwd, "components.json")
+        if (fsExtra.existsSync(componentsJsonPath)) {
+          const existingConfig = await fsExtra.readJson(componentsJsonPath)
+          const config = rawConfigSchema.partial().parse(existingConfig)
+          shadowConfig = configWithDefaults(config)
+
+          // Since components.json might not be valid at this point.
+          // Temporarily rename components.json to allow preflight to run.
+          // We'll rename it back after preflight.
+          createFileBackup(componentsJsonPath)
+        }
+
+        // Ensure all registries used in components are configured.
+        const { config: updatedConfig } = await ensureRegistriesInConfig(
+          components,
+          shadowConfig,
+          {
+            silent: true,
+          }
+        )
+        shadowConfig = updatedConfig
+
+        // This forces a shadowConfig validation early in the process.
+        buildUrlAndHeadersForRegistryItem(components[0], shadowConfig)
+
+        const [item] = await getRegistryItems([components[0]], {
+          config: shadowConfig,
+        })
+        if (item?.type === "registry:style") {
+          // Set a default base color so we're not prompted.
+          // The style will extend or override it.
+          options.baseColor = "neutral"
+
+          // If the style extends none, we don't want to install the base style.
+          options.baseStyle =
+            item.extends === "none" ? false : options.baseStyle
+        }
+      }
+
+      // If --no-base-style, we don't want to prompt for a base color either.
+      // The style will extend or override it.
+      if (!options.baseStyle) {
+        options.baseColor = "neutral"
+      }
+
       await runInit(options)
 
       logger.log(
@@ -73,10 +216,15 @@ export const init = new Command()
           "Success!"
         )} Project initialization completed.\nYou may now add components.`
       )
+
+      // We need when runninng with custom cwd.
+      deleteFileBackup(path.resolve(options.cwd, "components.json"))
       logger.break()
     } catch (error) {
       logger.break()
       handleError(error)
+    } finally {
+      clearRegistryContext()
     }
   })
 
@@ -86,23 +234,31 @@ export async function runInit(
   }
 ) {
   let projectInfo
+  let newProjectTemplate
   if (!options.skipPreflight) {
     const preflight = await preFlightInit(options)
     if (preflight.errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
-      const { projectPath } = await createProject(options)
+      const { projectPath, template } = await createProject(options)
       if (!projectPath) {
         process.exit(1)
       }
       options.cwd = projectPath
       options.isNewProject = true
+      newProjectTemplate = template
     }
     projectInfo = preflight.projectInfo
   } else {
     projectInfo = await getProjectInfo(options.cwd)
   }
 
+  if (newProjectTemplate === "next-monorepo") {
+    options.cwd = path.resolve(options.cwd, "apps/web")
+    return await getConfig(options.cwd)
+  }
+
   const projectConfig = await getProjectConfig(options.cwd, projectInfo)
-  const config = projectConfig
+
+  let config = projectConfig
     ? await promptForMinimalConfig(projectConfig, options)
     : await promptForConfig(await getConfig(options.cwd))
 
@@ -121,19 +277,63 @@ export async function runInit(
     }
   }
 
-  // Write components.json.
+  // Prepare the list of components to be added.
+  const components = [
+    // "index" is the default shadcn style.
+    // Why index? Because when style is true, we read style from components.json and fetch that.
+    // i.e new-york from components.json then fetch /styles/new-york/index.
+    // TODO: Fix this so that we can extend any style i.e --style=new-york.
+    ...(options.baseStyle ? ["index"] : []),
+    ...(options.components ?? []),
+  ]
+
+  // Ensure registries are configured for the components we're about to add.
+  const fullConfigForRegistry = await resolveConfigPaths(options.cwd, config)
+  const { config: configWithRegistries } = await ensureRegistriesInConfig(
+    components,
+    fullConfigForRegistry,
+    {
+      silent: true,
+    }
+  )
+
+  // Update config with any new registries found.
+  if (configWithRegistries.registries) {
+    config.registries = configWithRegistries.registries
+  }
+
   const componentSpinner = spinner(`Writing components.json.`).start()
   const targetPath = path.resolve(options.cwd, "components.json")
-  await fs.writeFile(targetPath, JSON.stringify(config, null, 2), "utf8")
+  const backupPath = `${targetPath}${FILE_BACKUP_SUFFIX}`
+
+  // Merge with backup config if it exists and not using --force
+  if (!options.force && fsExtra.existsSync(backupPath)) {
+    const existingConfig = await fsExtra.readJson(backupPath)
+
+    // Move registries at the end of the config.
+    const { registries, ...merged } = deepmerge(existingConfig, config)
+    config = { ...merged, registries }
+  }
+
+  // Make sure to filter out built-in registries.
+  // TODO: fix this in ensureRegistriesInConfig.
+  config.registries = Object.fromEntries(
+    Object.entries(config.registries || {}).filter(
+      ([key]) => !Object.keys(BUILTIN_REGISTRIES).includes(key)
+    )
+  )
+
+  // Write components.json.
+  await fs.writeFile(targetPath, `${JSON.stringify(config, null, 2)}\n`, "utf8")
   componentSpinner.succeed()
 
   // Add components.
   const fullConfig = await resolveConfigPaths(options.cwd, config)
-  const components = ["index", ...(options.components || [])]
   await addComponents(components, fullConfig, {
     // Init will always overwrite files.
     overwrite: true,
     silent: options.silent,
+    baseStyle: options.baseStyle,
     isNewProject:
       options.isNewProject || projectInfo?.framework.name === "next-app",
   })
@@ -274,28 +474,30 @@ async function promptForMinimalConfig(
   opts: z.infer<typeof initOptionsSchema>
 ) {
   let style = defaultConfig.style
-  let baseColor = defaultConfig.tailwind.baseColor
+  let baseColor = opts.baseColor
   let cssVariables = defaultConfig.tailwind.cssVariables
 
   if (!opts.defaults) {
-    const [styles, baseColors] = await Promise.all([
+    const [styles, baseColors, tailwindVersion] = await Promise.all([
       getRegistryStyles(),
       getRegistryBaseColors(),
+      getProjectTailwindVersionFromConfig(defaultConfig),
     ])
 
     const options = await prompts([
       {
-        type: "select",
+        type: tailwindVersion === "v4" ? null : "select",
         name: "style",
         message: `Which ${highlighter.info("style")} would you like to use?`,
         choices: styles.map((style) => ({
-          title: style.label,
+          title:
+            style.name === "new-york" ? "New York (Recommended)" : style.label,
           value: style.name,
         })),
-        initial: styles.findIndex((s) => s.name === style),
+        initial: 0,
       },
       {
-        type: "select",
+        type: opts.baseColor ? null : "select",
         name: "tailwindBaseColor",
         message: `Which color would you like to use as the ${highlighter.info(
           "base color"
@@ -305,21 +507,11 @@ async function promptForMinimalConfig(
           value: color.name,
         })),
       },
-      {
-        type: "toggle",
-        name: "tailwindCssVariables",
-        message: `Would you like to use ${highlighter.info(
-          "CSS variables"
-        )} for theming?`,
-        initial: defaultConfig?.tailwind.cssVariables,
-        active: "yes",
-        inactive: "no",
-      },
     ])
 
-    style = options.style
-    baseColor = options.tailwindBaseColor
-    cssVariables = options.tailwindCssVariables
+    style = options.style ?? "new-york"
+    baseColor = options.tailwindBaseColor ?? baseColor
+    cssVariables = opts.cssVariables
   }
 
   return rawConfigSchema.parse({
@@ -332,6 +524,7 @@ async function promptForMinimalConfig(
     },
     rsc: defaultConfig?.rsc,
     tsx: defaultConfig?.tsx,
+    iconLibrary: defaultConfig?.iconLibrary,
     aliases: defaultConfig?.aliases,
   })
 }
diff --git a/packages/shadcn/src/commands/mcp.ts b/packages/shadcn/src/commands/mcp.ts
new file mode 100644
index 00000000000..230794fc56a
--- /dev/null
+++ b/packages/shadcn/src/commands/mcp.ts
@@ -0,0 +1,198 @@
+import { promises as fs } from "fs"
+import path from "path"
+import { server } from "@/src/mcp"
+import { loadEnvFiles } from "@/src/utils/env-loader"
+import { getConfig } from "@/src/utils/get-config"
+import { getPackageManager } from "@/src/utils/get-package-manager"
+import { handleError } from "@/src/utils/handle-error"
+import { logger } from "@/src/utils/logger"
+import { spinner } from "@/src/utils/spinner"
+import { updateDependencies } from "@/src/utils/updaters/update-dependencies"
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
+import { Command } from "commander"
+import deepmerge from "deepmerge"
+import { execa } from "execa"
+import fsExtra from "fs-extra"
+import prompts from "prompts"
+import z from "zod"
+
+const SHADCN_MCP_VERSION = "latest"
+
+const CLIENTS = [
+  {
+    name: "claude",
+    label: "Claude Code",
+    configPath: ".mcp.json",
+    config: {
+      mcpServers: {
+        shadcn: {
+          command: "npx",
+          args: [`shadcn@${SHADCN_MCP_VERSION}`, "mcp"],
+        },
+      },
+    },
+  },
+  {
+    name: "cursor",
+    label: "Cursor",
+    configPath: ".cursor/mcp.json",
+    config: {
+      mcpServers: {
+        shadcn: {
+          command: "npx",
+          args: [`shadcn@${SHADCN_MCP_VERSION}`, "mcp"],
+        },
+      },
+    },
+  },
+  {
+    name: "vscode",
+    label: "VS Code",
+    configPath: ".vscode/mcp.json",
+    config: {
+      servers: {
+        shadcn: {
+          command: "npx",
+          args: [`shadcn@${SHADCN_MCP_VERSION}`, "mcp"],
+        },
+      },
+    },
+  },
+] as const
+
+const DEPENDENCIES = [`shadcn@${SHADCN_MCP_VERSION}`]
+
+export const mcp = new Command()
+  .name("mcp")
+  .description("MCP server and configuration commands")
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .action(async (options) => {
+    try {
+      await loadEnvFiles(options.cwd)
+      const transport = new StdioServerTransport()
+      await server.connect(transport)
+    } catch (error) {
+      logger.break()
+      handleError(error)
+    }
+  })
+
+const mcpInitOptionsSchema = z.object({
+  client: z.enum(["claude", "cursor", "vscode"]),
+  cwd: z.string(),
+})
+
+mcp
+  .command("init")
+  .description("Initialize MCP configuration for your client")
+  .option(
+    "--client <client>",
+    `MCP client (${CLIENTS.map((c) => c.name).join(", ")})`
+  )
+  .action(async (opts, command) => {
+    try {
+      // Get the cwd from parent command.
+      const parentOpts = command.parent?.opts() || {}
+      const cwd = parentOpts.cwd || process.cwd()
+
+      let client = opts.client
+
+      if (!client) {
+        const response = await prompts({
+          type: "select",
+          name: "client",
+          message: "Which MCP client are you using?",
+          choices: CLIENTS.map((c) => ({
+            title: c.label,
+            value: c.name,
+          })),
+        })
+
+        if (!response.client) {
+          logger.break()
+          process.exit(1)
+        }
+
+        client = response.client
+      }
+
+      const options = mcpInitOptionsSchema.parse({
+        client,
+        cwd,
+      })
+
+      const configSpinner = spinner("Configuring MCP server...").start()
+      const configPath = await runMcpInit(options)
+      configSpinner.succeed("Configuring MCP server.")
+
+      const config = await getConfig(options.cwd)
+      if (config) {
+        await updateDependencies([], DEPENDENCIES, config, {
+          silent: false,
+        })
+      } else {
+        const packageManager = await getPackageManager(options.cwd)
+        const installCommand = packageManager === "npm" ? "install" : "add"
+        const devFlag = packageManager === "npm" ? "--save-dev" : "-D"
+
+        const installSpinner = spinner("Installing dependencies...").start()
+        await execa(
+          packageManager,
+          [installCommand, devFlag, ...DEPENDENCIES],
+          {
+            cwd: options.cwd,
+          }
+        )
+        installSpinner.succeed("Installing dependencies.")
+      }
+
+      logger.break()
+      logger.success(`Configuration saved to ${configPath}.`)
+      logger.break()
+    } catch (error) {
+      handleError(error)
+    }
+  })
+
+const overwriteMerge = (_: any[], sourceArray: any[]) => sourceArray
+
+async function runMcpInit(options: z.infer<typeof mcpInitOptionsSchema>) {
+  const { client, cwd } = options
+
+  const clientInfo = CLIENTS.find((c) => c.name === client)
+  if (!clientInfo) {
+    throw new Error(
+      `Unknown client: ${client}. Available clients: ${CLIENTS.map(
+        (c) => c.name
+      ).join(", ")}`
+    )
+  }
+
+  const configPath = path.join(cwd, clientInfo.configPath)
+
+  let existingConfig = {}
+  try {
+    const content = await fs.readFile(configPath, "utf-8")
+    existingConfig = JSON.parse(content)
+  } catch {}
+
+  const mergedConfig = deepmerge(
+    existingConfig,
+    clientInfo.config as Record<string, unknown>,
+    { arrayMerge: overwriteMerge }
+  )
+
+  const dir = path.dirname(configPath)
+  await fsExtra.ensureDir(dir)
+  await fs.writeFile(
+    configPath,
+    JSON.stringify(mergedConfig, null, 2) + "\n",
+    "utf-8"
+  )
+
+  return clientInfo.configPath
+}
diff --git a/packages/shadcn/src/commands/migrate.ts b/packages/shadcn/src/commands/migrate.ts
new file mode 100644
index 00000000000..02c93d7e0c5
--- /dev/null
+++ b/packages/shadcn/src/commands/migrate.ts
@@ -0,0 +1,101 @@
+import path from "path"
+import { migrateIcons } from "@/src/migrations/migrate-icons"
+import { migrateRadix } from "@/src/migrations/migrate-radix"
+import { preFlightMigrate } from "@/src/preflights/preflight-migrate"
+import * as ERRORS from "@/src/utils/errors"
+import { handleError } from "@/src/utils/handle-error"
+import { logger } from "@/src/utils/logger"
+import { Command } from "commander"
+import { z } from "zod"
+
+export const migrations = [
+  {
+    name: "icons",
+    description: "migrate your ui components to a different icon library.",
+  },
+  {
+    name: "radix",
+    description: "migrate to radix-ui.",
+  },
+] as const
+
+export const migrateOptionsSchema = z.object({
+  cwd: z.string(),
+  list: z.boolean(),
+  yes: z.boolean(),
+  migration: z
+    .string()
+    .refine(
+      (value) =>
+        value && migrations.some((migration) => migration.name === value),
+      {
+        message:
+          "You must specify a valid migration. Run `shadcn migrate --list` to see available migrations.",
+      }
+    )
+    .optional(),
+})
+
+export const migrate = new Command()
+  .name("migrate")
+  .description("run a migration.")
+  .argument("[migration]", "the migration to run.")
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .option("-l, --list", "list all migrations.", false)
+  .option("-y, --yes", "skip confirmation prompt.", false)
+  .action(async (migration, opts) => {
+    try {
+      const options = migrateOptionsSchema.parse({
+        cwd: path.resolve(opts.cwd),
+        migration,
+        list: opts.list,
+        yes: opts.yes,
+      })
+
+      if (options.list || !options.migration) {
+        logger.info("Available migrations:")
+        for (const migration of migrations) {
+          logger.info(`- ${migration.name}: ${migration.description}`)
+        }
+        return
+      }
+
+      if (!options.migration) {
+        throw new Error(
+          "You must specify a migration. Run `shadcn migrate --list` to see available migrations."
+        )
+      }
+
+      let { errors, config } = await preFlightMigrate(options)
+
+      if (
+        errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] ||
+        errors[ERRORS.MISSING_CONFIG]
+      ) {
+        throw new Error(
+          "No `components.json` file found. Ensure you are at the root of your project."
+        )
+      }
+
+      if (!config) {
+        throw new Error(
+          "Something went wrong reading your `components.json` file. Please ensure you have a valid `components.json` file."
+        )
+      }
+
+      if (options.migration === "icons") {
+        await migrateIcons(config)
+      }
+
+      if (options.migration === "radix") {
+        await migrateRadix(config, { yes: options.yes })
+      }
+    } catch (error) {
+      logger.break()
+      handleError(error)
+    }
+  })
diff --git a/packages/shadcn/src/commands/registry/build.ts b/packages/shadcn/src/commands/registry/build.ts
new file mode 100644
index 00000000000..bfd62578fdc
--- /dev/null
+++ b/packages/shadcn/src/commands/registry/build.ts
@@ -0,0 +1,219 @@
+import * as fs from "fs/promises"
+import * as path from "path"
+import { preFlightRegistryBuild } from "@/src/preflights/preflight-registry"
+import { recursivelyResolveFileImports } from "@/src/registry/utils"
+import { configSchema, registryItemSchema, registrySchema } from "@/src/schema"
+import * as ERRORS from "@/src/utils/errors"
+import { ProjectInfo, getProjectInfo } from "@/src/utils/get-project-info"
+import { handleError } from "@/src/utils/handle-error"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+import { spinner } from "@/src/utils/spinner"
+import { Command } from "commander"
+import { z } from "zod"
+
+export const buildOptionsSchema = z.object({
+  cwd: z.string(),
+  registryFile: z.string(),
+  outputDir: z.string(),
+  verbose: z.boolean().optional().default(false),
+})
+
+export const build = new Command()
+  .name("registry:build")
+  .description("builds the registry [EXPERIMENTAL]")
+  .argument("[registry]", "path to registry.json file", "./registry.json")
+  .option(
+    "-o, --output <path>",
+    "destination directory for json files",
+    "./public/r"
+  )
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .option("-v, --verbose", "verbose output")
+  .action(async (registry: string, opts) => {
+    await buildRegistry({
+      cwd: path.resolve(opts.cwd),
+      registryFile: registry,
+      outputDir: opts.output,
+      verbose: opts.verbose,
+    })
+  })
+
+async function buildRegistry(opts: z.infer<typeof buildOptionsSchema>) {
+  try {
+    const options = buildOptionsSchema.parse(opts)
+
+    const [{ errors, resolvePaths, config }, projectInfo] = await Promise.all([
+      preFlightRegistryBuild(options),
+      getProjectInfo(options.cwd),
+    ])
+
+    if (errors[ERRORS.MISSING_CONFIG] || !config || !projectInfo) {
+      logger.error(
+        `A ${highlighter.info(
+          "components.json"
+        )} file is required to build the registry. Run ${highlighter.info(
+          "shadcn init"
+        )} to create one.`
+      )
+      logger.break()
+      process.exit(1)
+    }
+
+    if (errors[ERRORS.BUILD_MISSING_REGISTRY_FILE] || !resolvePaths) {
+      logger.error(
+        `We could not find a registry file at ${highlighter.info(
+          path.resolve(options.cwd, options.registryFile)
+        )}.`
+      )
+      logger.break()
+      process.exit(1)
+    }
+
+    const content = await fs.readFile(resolvePaths.registryFile, "utf-8")
+    const result = registrySchema.safeParse(JSON.parse(content))
+
+    if (!result.success) {
+      logger.error(
+        `Invalid registry file found at ${highlighter.info(
+          resolvePaths.registryFile
+        )}.`
+      )
+      logger.break()
+      process.exit(1)
+    }
+
+    const buildSpinner = spinner("Building registry...")
+
+    // Recursively resolve the registry items.
+    const resolvedRegistry = await resolveRegistryItems(
+      result.data,
+      config,
+      projectInfo
+    )
+
+    // Loop through the registry items and remove duplicates files i.e same path.
+    for (const registryItem of resolvedRegistry.items) {
+      // Deduplicate files
+      registryItem.files = registryItem.files?.filter(
+        (file, index, self) =>
+          index === self.findIndex((t) => t.path === file.path)
+      )
+
+      // Deduplicate dependencies
+      if (registryItem.dependencies) {
+        registryItem.dependencies = registryItem.dependencies.filter(
+          (dep, index, self) => index === self.findIndex((d) => d === dep)
+        )
+      }
+    }
+
+    for (const registryItem of resolvedRegistry.items) {
+      if (!registryItem.files) {
+        continue
+      }
+
+      buildSpinner.start(`Building ${registryItem.name}...`)
+
+      // Add the schema to the registry item.
+      registryItem["$schema"] =
+        "https://ui.shadcn.com/schema/registry-item.json"
+
+      for (const file of registryItem.files) {
+        const absPath = path.resolve(resolvePaths.cwd, file.path)
+        try {
+          const stat = await fs.stat(absPath)
+          if (!stat.isFile()) {
+            continue
+          }
+          file["content"] = await fs.readFile(absPath, "utf-8")
+        } catch (err) {
+          console.error("Error reading file in registry build:", absPath, err)
+          continue
+        }
+      }
+
+      const result = registryItemSchema.safeParse(registryItem)
+      if (!result.success) {
+        logger.error(
+          `Invalid registry item found for ${highlighter.info(
+            registryItem.name
+          )}.`
+        )
+        continue
+      }
+
+      // Write the registry item to the output directory.
+      await fs.writeFile(
+        path.resolve(resolvePaths.outputDir, `${result.data.name}.json`),
+        JSON.stringify(result.data, null, 2)
+      )
+    }
+
+    // Copy registry.json to the output directory.
+    await fs.copyFile(
+      resolvePaths.registryFile,
+      path.resolve(resolvePaths.outputDir, "registry.json")
+    )
+
+    buildSpinner.succeed("Building registry.")
+
+    if (options.verbose) {
+      spinner(
+        `The registry has ${highlighter.info(
+          resolvedRegistry.items.length.toString()
+        )} items:`
+      ).succeed()
+      for (const item of resolvedRegistry.items) {
+        logger.log(`  - ${item.name} (${highlighter.info(item.type)})`)
+        for (const file of item.files ?? []) {
+          logger.log(`    - ${file.path}`)
+        }
+      }
+    }
+  } catch (error) {
+    logger.break()
+    handleError(error)
+  }
+}
+
+// This reads the registry and recursively resolves the file imports.
+async function resolveRegistryItems(
+  registry: z.infer<typeof registrySchema>,
+  config: z.infer<typeof configSchema>,
+  projectInfo: ProjectInfo
+): Promise<z.infer<typeof registrySchema>> {
+  for (const item of registry.items) {
+    if (!item.files?.length) {
+      continue
+    }
+
+    // Process all files in the array instead of just the first one
+    for (const file of item.files) {
+      const results = await recursivelyResolveFileImports(
+        file.path,
+        config,
+        projectInfo
+      )
+
+      // Remove file from results.files
+      results.files = results.files?.filter((f) => f.path !== file.path)
+
+      if (results.files) {
+        item.files.push(...results.files)
+      }
+
+      if (results.dependencies) {
+        item.dependencies = item.dependencies
+          ? item.dependencies.concat(results.dependencies)
+          : results.dependencies
+      }
+    }
+  }
+
+  return registry
+}
diff --git a/packages/shadcn/src/commands/registry/mcp.ts b/packages/shadcn/src/commands/registry/mcp.ts
new file mode 100644
index 00000000000..9e46c296fb9
--- /dev/null
+++ b/packages/shadcn/src/commands/registry/mcp.ts
@@ -0,0 +1,22 @@
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+import { Command } from "commander"
+
+export const mcp = new Command()
+  .name("registry:mcp")
+  .description("starts the registry MCP server [DEPRECATED]")
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .action(async () => {
+    logger.warn(
+      `The ${highlighter.info(
+        "shadcn registry:mcp"
+      )} command is deprecated. Use the ${highlighter.info(
+        "shadcn mcp"
+      )} command instead.`
+    )
+    logger.break()
+  })
diff --git a/packages/shadcn/src/commands/search.ts b/packages/shadcn/src/commands/search.ts
new file mode 100644
index 00000000000..92e1b08cdab
--- /dev/null
+++ b/packages/shadcn/src/commands/search.ts
@@ -0,0 +1,119 @@
+import path from "path"
+import { configWithDefaults } from "@/src/registry/config"
+import { clearRegistryContext } from "@/src/registry/context"
+import { searchRegistries } from "@/src/registry/search"
+import { validateRegistryConfigForItems } from "@/src/registry/validator"
+import { rawConfigSchema } from "@/src/schema"
+import { loadEnvFiles } from "@/src/utils/env-loader"
+import { createConfig, getConfig } from "@/src/utils/get-config"
+import { handleError } from "@/src/utils/handle-error"
+import { ensureRegistriesInConfig } from "@/src/utils/registries"
+import { Command } from "commander"
+import fsExtra from "fs-extra"
+import { z } from "zod"
+
+const searchOptionsSchema = z.object({
+  cwd: z.string(),
+  query: z.string().optional(),
+  limit: z.number().optional(),
+  offset: z.number().optional(),
+})
+
+// TODO: We're duplicating logic for shadowConfig here.
+// Revisit and properly abstract this.
+
+export const search = new Command()
+  .name("search")
+  .alias("list")
+  .description("search items from registries")
+  .argument(
+    "<registries...>",
+    "the registry names or urls to search items from. Names must be prefixed with @."
+  )
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .option("-q, --query <query>", "query string")
+  .option(
+    "-l, --limit <number>",
+    "maximum number of items to display per registry",
+    "100"
+  )
+  .option("-o, --offset <number>", "number of items to skip", "0")
+  .action(async (registries: string[], opts) => {
+    try {
+      const options = searchOptionsSchema.parse({
+        cwd: path.resolve(opts.cwd),
+        query: opts.query,
+        limit: opts.limit ? parseInt(opts.limit, 10) : undefined,
+        offset: opts.offset ? parseInt(opts.offset, 10) : undefined,
+      })
+
+      await loadEnvFiles(options.cwd)
+
+      // Start with a shadow config to support partial components.json.
+      // Use createConfig to get proper default paths
+      const defaultConfig = createConfig({
+        style: "new-york",
+        resolvedPaths: {
+          cwd: options.cwd,
+        },
+      })
+      let shadowConfig = configWithDefaults(defaultConfig)
+
+      // Check if there's a components.json file (partial or complete).
+      const componentsJsonPath = path.resolve(options.cwd, "components.json")
+      if (fsExtra.existsSync(componentsJsonPath)) {
+        const existingConfig = await fsExtra.readJson(componentsJsonPath)
+        const partialConfig = rawConfigSchema.partial().parse(existingConfig)
+        shadowConfig = configWithDefaults({
+          ...defaultConfig,
+          ...partialConfig,
+        })
+      }
+
+      // Try to get the full config, but fall back to shadow config if it fails.
+      let config = shadowConfig
+      try {
+        const fullConfig = await getConfig(options.cwd)
+        if (fullConfig) {
+          config = configWithDefaults(fullConfig)
+        }
+      } catch {
+        // Use shadow config if getConfig fails (partial components.json).
+      }
+
+      const { config: updatedConfig, newRegistries } =
+        await ensureRegistriesInConfig(
+          registries.map((registry) => `${registry}/registry`),
+          config,
+          {
+            silent: true,
+            writeFile: false,
+          }
+        )
+      if (newRegistries.length > 0) {
+        config.registries = updatedConfig.registries
+      }
+
+      // Validate registries early for better error messages.
+      validateRegistryConfigForItems(registries, config)
+
+      // Use searchRegistries for both search and non-search cases
+      const results = await searchRegistries(registries as `@${string}`[], {
+        query: options.query,
+        limit: options.limit,
+        offset: options.offset,
+        config,
+      })
+
+      console.log(JSON.stringify(results, null, 2))
+      process.exit(0)
+    } catch (error) {
+      handleError(error)
+    } finally {
+      clearRegistryContext()
+    }
+  })
diff --git a/packages/shadcn/src/commands/view.ts b/packages/shadcn/src/commands/view.ts
new file mode 100644
index 00000000000..e6166e1baa0
--- /dev/null
+++ b/packages/shadcn/src/commands/view.ts
@@ -0,0 +1,78 @@
+import path from "path"
+import { getRegistryItems } from "@/src/registry/api"
+import { configWithDefaults } from "@/src/registry/config"
+import { clearRegistryContext } from "@/src/registry/context"
+import { validateRegistryConfigForItems } from "@/src/registry/validator"
+import { rawConfigSchema } from "@/src/schema"
+import { loadEnvFiles } from "@/src/utils/env-loader"
+import { getConfig } from "@/src/utils/get-config"
+import { handleError } from "@/src/utils/handle-error"
+import { ensureRegistriesInConfig } from "@/src/utils/registries"
+import { Command } from "commander"
+import fsExtra from "fs-extra"
+import { z } from "zod"
+
+const viewOptionsSchema = z.object({
+  cwd: z.string(),
+})
+
+export const view = new Command()
+  .name("view")
+  .description("view items from the registry")
+  .argument("<items...>", "the item names or URLs to view")
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .action(async (items: string[], opts) => {
+    try {
+      const options = viewOptionsSchema.parse({
+        cwd: path.resolve(opts.cwd),
+      })
+
+      await loadEnvFiles(options.cwd)
+
+      // Start with a shadow config to support partial components.json.
+      let shadowConfig = configWithDefaults({})
+
+      // Check if there's a components.json file (partial or complete).
+      const componentsJsonPath = path.resolve(options.cwd, "components.json")
+      if (fsExtra.existsSync(componentsJsonPath)) {
+        const existingConfig = await fsExtra.readJson(componentsJsonPath)
+        const partialConfig = rawConfigSchema.partial().parse(existingConfig)
+        shadowConfig = configWithDefaults(partialConfig)
+      }
+
+      // Try to get the full config, but fall back to shadow config if it fails.
+      let config = shadowConfig
+      try {
+        const fullConfig = await getConfig(options.cwd)
+        if (fullConfig) {
+          config = configWithDefaults(fullConfig)
+        }
+      } catch {
+        // Use shadow config if getConfig fails (partial components.json).
+      }
+
+      const { config: updatedConfig, newRegistries } =
+        await ensureRegistriesInConfig(items, config, {
+          silent: true,
+          writeFile: false,
+        })
+      if (newRegistries.length > 0) {
+        config.registries = updatedConfig.registries
+      }
+
+      // Validate registries early for better error messages.
+      validateRegistryConfigForItems(items, config)
+
+      const payload = await getRegistryItems(items, { config })
+      console.log(JSON.stringify(payload, null, 2))
+      process.exit(0)
+    } catch (error) {
+      handleError(error)
+    } finally {
+      clearRegistryContext()
+    }
+  })
diff --git a/packages/shadcn/src/index.ts b/packages/shadcn/src/index.ts
index c324a642768..d64c3d02f80 100644
--- a/packages/shadcn/src/index.ts
+++ b/packages/shadcn/src/index.ts
@@ -1,7 +1,15 @@
 #!/usr/bin/env node
 import { add } from "@/src/commands/add"
+import { build } from "@/src/commands/build"
 import { diff } from "@/src/commands/diff"
+import { info } from "@/src/commands/info"
 import { init } from "@/src/commands/init"
+import { mcp } from "@/src/commands/mcp"
+import { migrate } from "@/src/commands/migrate"
+import { build as registryBuild } from "@/src/commands/registry/build"
+import { mcp as registryMcp } from "@/src/commands/registry/mcp"
+import { search } from "@/src/commands/search"
+import { view } from "@/src/commands/view"
 import { Command } from "commander"
 
 import packageJson from "../package.json"
@@ -12,16 +20,29 @@ process.on("SIGTERM", () => process.exit(0))
 async function main() {
   const program = new Command()
     .name("shadcn")
-    .description("add components and dependencies to your project")
+    .description("add items from registries to your project")
     .version(
       packageJson.version || "1.0.0",
       "-v, --version",
       "display the version number"
     )
 
-  program.addCommand(init).addCommand(add).addCommand(diff)
+  program
+    .addCommand(init)
+    .addCommand(add)
+    .addCommand(diff)
+    .addCommand(view)
+    .addCommand(search)
+    .addCommand(migrate)
+    .addCommand(info)
+    .addCommand(build)
+    .addCommand(mcp)
+  // Registry commands
+  program.addCommand(registryBuild).addCommand(registryMcp)
 
   program.parse()
 }
 
 main()
+
+export * from "./registry/api"
diff --git a/packages/shadcn/src/mcp/index.ts b/packages/shadcn/src/mcp/index.ts
new file mode 100644
index 00000000000..23c4d3c05a0
--- /dev/null
+++ b/packages/shadcn/src/mcp/index.ts
@@ -0,0 +1,463 @@
+import { getRegistryItems, searchRegistries } from "@/src/registry"
+import { RegistryError } from "@/src/registry/errors"
+import { Server } from "@modelcontextprotocol/sdk/server/index.js"
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema,
+} from "@modelcontextprotocol/sdk/types.js"
+import dedent from "dedent"
+import { z } from "zod"
+import { zodToJsonSchema } from "zod-to-json-schema"
+
+import {
+  formatItemExamples,
+  formatRegistryItems,
+  formatSearchResultsWithPagination,
+  getMcpConfig,
+  npxShadcn,
+} from "./utils"
+
+export const server = new Server(
+  {
+    name: "shadcn",
+    version: "1.0.0",
+  },
+  {
+    capabilities: {
+      resources: {},
+      tools: {},
+    },
+  }
+)
+
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+  return {
+    tools: [
+      {
+        name: "get_project_registries",
+        description:
+          "Get configured registry names from components.json - Returns error if no components.json exists (use init_project to create one)",
+        inputSchema: zodToJsonSchema(z.object({})),
+      },
+      {
+        name: "list_items_in_registries",
+        description:
+          "List items from registries (requires components.json - use init_project if missing)",
+        inputSchema: zodToJsonSchema(
+          z.object({
+            registries: z
+              .array(z.string())
+              .describe(
+                "Array of registry names to search (e.g., ['@shadcn', '@acme'])"
+              ),
+            limit: z
+              .number()
+              .optional()
+              .describe("Maximum number of items to return"),
+            offset: z
+              .number()
+              .optional()
+              .describe("Number of items to skip for pagination"),
+          })
+        ),
+      },
+      {
+        name: "search_items_in_registries",
+        description:
+          "Search for components in registries using fuzzy matching (requires components.json). After finding an item, use get_item_examples_from_registries to see usage examples.",
+        inputSchema: zodToJsonSchema(
+          z.object({
+            registries: z
+              .array(z.string())
+              .describe(
+                "Array of registry names to search (e.g., ['@shadcn', '@acme'])"
+              ),
+            query: z
+              .string()
+              .describe(
+                "Search query string for fuzzy matching against item names and descriptions"
+              ),
+            limit: z
+              .number()
+              .optional()
+              .describe("Maximum number of items to return"),
+            offset: z
+              .number()
+              .optional()
+              .describe("Number of items to skip for pagination"),
+          })
+        ),
+      },
+      {
+        name: "view_items_in_registries",
+        description:
+          "View detailed information about specific registry items including the name, description, type and files content. For usage examples, use get_item_examples_from_registries instead.",
+        inputSchema: zodToJsonSchema(
+          z.object({
+            items: z
+              .array(z.string())
+              .describe(
+                "Array of item names with registry prefix (e.g., ['@shadcn/button', '@shadcn/card'])"
+              ),
+          })
+        ),
+      },
+      {
+        name: "get_item_examples_from_registries",
+        description:
+          "Find usage examples and demos with their complete code. Search for patterns like 'accordion-demo', 'button example', 'card-demo', etc. Returns full implementation code with dependencies.",
+        inputSchema: zodToJsonSchema(
+          z.object({
+            registries: z
+              .array(z.string())
+              .describe(
+                "Array of registry names to search (e.g., ['@shadcn', '@acme'])"
+              ),
+            query: z
+              .string()
+              .describe(
+                "Search query for examples (e.g., 'accordion-demo', 'button demo', 'card example', 'tooltip-demo', 'example-booking-form', 'example-hero'). Common patterns: '{item-name}-demo', '{item-name} example', 'example {item-name}'"
+              ),
+          })
+        ),
+      },
+      {
+        name: "get_add_command_for_items",
+        description:
+          "Get the shadcn CLI add command for specific items in a registry. This is useful for adding one or more components to your project.",
+        inputSchema: zodToJsonSchema(
+          z.object({
+            items: z
+              .array(z.string())
+              .describe(
+                "Array of items to get the add command for prefixed with the registry name (e.g., ['@shadcn/button', '@shadcn/card'])"
+              ),
+          })
+        ),
+      },
+      {
+        name: "get_audit_checklist",
+        description:
+          "After creating new components or generating new code files, use this tool for a quick checklist to verify that everything is working as expected. Make sure to run the tool after all required steps have been completed.",
+        inputSchema: zodToJsonSchema(z.object({})),
+      },
+    ],
+  }
+})
+
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  try {
+    if (!request.params.arguments) {
+      throw new Error("No tool arguments provided.")
+    }
+
+    switch (request.params.name) {
+      case "get_project_registries": {
+        const config = await getMcpConfig(process.cwd())
+
+        if (!config?.registries) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: dedent`No components.json found or no registries configured.
+
+                To fix this:
+                1. Use the \`init\` command to create a components.json file
+                2. Or manually create components.json with a registries section`,
+              },
+            ],
+          }
+        }
+
+        return {
+          content: [
+            {
+              type: "text",
+              text: dedent`The following registries are configured in the current project:
+
+                ${Object.keys(config.registries)
+                  .map((registry) => `- ${registry}`)
+                  .join("\n")}
+
+                You can view the items in a registry by running:
+                \`${await npxShadcn("view @name-of-registry")}\`
+
+                For example: \`${await npxShadcn(
+                  "view @shadcn"
+                )}\` or \`${await npxShadcn(
+                "view @shadcn @acme"
+              )}\` to view multiple registries.
+                `,
+            },
+          ],
+        }
+      }
+
+      case "search_items_in_registries": {
+        const inputSchema = z.object({
+          registries: z.array(z.string()),
+          query: z.string(),
+          limit: z.number().optional(),
+          offset: z.number().optional(),
+        })
+
+        const args = inputSchema.parse(request.params.arguments)
+        const results = await searchRegistries(args.registries, {
+          query: args.query,
+          limit: args.limit,
+          offset: args.offset,
+          config: await getMcpConfig(process.cwd()),
+          useCache: false,
+        })
+
+        if (results.items.length === 0) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: dedent`No items found matching "${
+                  args.query
+                }" in registries ${args.registries.join(
+                  ", "
+                )}, Try searching with a different query or registry.`,
+              },
+            ],
+          }
+        }
+
+        return {
+          content: [
+            {
+              type: "text",
+              text: formatSearchResultsWithPagination(results, {
+                query: args.query,
+                registries: args.registries,
+              }),
+            },
+          ],
+        }
+      }
+
+      case "list_items_in_registries": {
+        const inputSchema = z.object({
+          registries: z.array(z.string()),
+          limit: z.number().optional(),
+          offset: z.number().optional(),
+          cwd: z.string().optional(),
+        })
+
+        const args = inputSchema.parse(request.params.arguments)
+        const results = await searchRegistries(args.registries, {
+          limit: args.limit,
+          offset: args.offset,
+          config: await getMcpConfig(process.cwd()),
+          useCache: false,
+        })
+
+        if (results.items.length === 0) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: dedent`No items found in registries ${args.registries.join(
+                  ", "
+                )}.`,
+              },
+            ],
+          }
+        }
+
+        return {
+          content: [
+            {
+              type: "text",
+              text: formatSearchResultsWithPagination(results, {
+                registries: args.registries,
+              }),
+            },
+          ],
+        }
+      }
+
+      case "view_items_in_registries": {
+        const inputSchema = z.object({
+          items: z.array(z.string()),
+        })
+
+        const args = inputSchema.parse(request.params.arguments)
+        const registryItems = await getRegistryItems(args.items, {
+          config: await getMcpConfig(process.cwd()),
+          useCache: false,
+        })
+
+        if (registryItems?.length === 0) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: dedent`No items found for: ${args.items.join(", ")}
+
+                Make sure the item names are correct and include the registry prefix (e.g., @shadcn/button).`,
+              },
+            ],
+          }
+        }
+
+        const formattedItems = formatRegistryItems(registryItems)
+
+        return {
+          content: [
+            {
+              type: "text",
+              text: dedent`Item Details:
+
+              ${formattedItems.join("\n\n---\n\n")}`,
+            },
+          ],
+        }
+      }
+
+      case "get_item_examples_from_registries": {
+        const inputSchema = z.object({
+          query: z.string(),
+          registries: z.array(z.string()),
+        })
+
+        const args = inputSchema.parse(request.params.arguments)
+        const config = await getMcpConfig()
+
+        const results = await searchRegistries(args.registries, {
+          query: args.query,
+          config,
+          useCache: false,
+        })
+
+        if (results.items.length === 0) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: dedent`No examples found for query "${args.query}".
+
+                Try searching with patterns like:
+                - "accordion-demo" for accordion examples
+                - "button demo" or "button example"
+                - Component name followed by "-demo" or "example"
+
+                You can also:
+                1. Use search_items_in_registries to find all items matching your query
+                2. View the main component with view_items_in_registries for inline usage documentation`,
+              },
+            ],
+          }
+        }
+
+        const itemNames = results.items.map((item) => item.addCommandArgument)
+        const fullItems = await getRegistryItems(itemNames, {
+          config,
+          useCache: false,
+        })
+
+        return {
+          content: [
+            {
+              type: "text",
+              text: formatItemExamples(fullItems, args.query),
+            },
+          ],
+        }
+      }
+
+      case "get_add_command_for_items": {
+        const args = z
+          .object({
+            items: z.array(z.string()),
+          })
+          .parse(request.params.arguments)
+
+        return {
+          content: [
+            {
+              type: "text",
+              text: await npxShadcn(`add ${args.items.join(" ")}`),
+            },
+          ],
+        }
+      }
+
+      case "get_audit_checklist": {
+        return {
+          content: [
+            {
+              type: "text",
+              text: dedent`## Component Audit Checklist
+
+              After adding or generating components, check the following common issues:
+
+              - [ ] Ensure imports are correct i.e named vs default imports
+              - [ ] If using next/image, ensure images.remotePatterns next.config.js is configured correctly.
+              - [ ] Ensure all dependencies are installed.
+              - [ ] Check for linting errors or warnings
+              - [ ] Check for TypeScript errors
+              - [ ] Use the Playwright MCP if available.
+              `,
+            },
+          ],
+        }
+      }
+
+      default:
+        throw new Error(`Tool ${request.params.name} not found`)
+    }
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: dedent`Invalid input parameters:
+              ${error.errors
+                .map((e) => `- ${e.path.join(".")}: ${e.message}`)
+                .join("\n")}
+              `,
+          },
+        ],
+        isError: true,
+      }
+    }
+
+    if (error instanceof RegistryError) {
+      let errorMessage = error.message
+
+      if (error.suggestion) {
+        errorMessage += `\n\n💡 ${error.suggestion}`
+      }
+
+      if (error.context) {
+        errorMessage += `\n\nContext: ${JSON.stringify(error.context, null, 2)}`
+      }
+
+      return {
+        content: [
+          {
+            type: "text",
+            text: dedent`Error (${error.code}): ${errorMessage}`,
+          },
+        ],
+        isError: true,
+      }
+    }
+
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    return {
+      content: [
+        {
+          type: "text",
+          text: dedent`Error: ${errorMessage}`,
+        },
+      ],
+      isError: true,
+    }
+  }
+})
diff --git a/packages/shadcn/src/mcp/utils.ts b/packages/shadcn/src/mcp/utils.ts
new file mode 100644
index 00000000000..5877420533c
--- /dev/null
+++ b/packages/shadcn/src/mcp/utils.ts
@@ -0,0 +1,132 @@
+import { getRegistriesConfig } from "@/src/registry/api"
+import { registryItemSchema, searchResultsSchema } from "@/src/schema"
+import { getPackageRunner } from "@/src/utils/get-package-manager"
+import { z } from "zod"
+
+const SHADCN_CLI_COMMAND = "shadcn@latest"
+
+export async function npxShadcn(command: string) {
+  const packageRunner = await getPackageRunner(process.cwd())
+  return `${packageRunner} ${SHADCN_CLI_COMMAND} ${command}`
+}
+
+export async function getMcpConfig(cwd = process.cwd()) {
+  const config = await getRegistriesConfig(cwd, {
+    useCache: false,
+  })
+
+  return {
+    registries: config.registries,
+  }
+}
+
+export function formatSearchResultsWithPagination(
+  results: z.infer<typeof searchResultsSchema>,
+  options?: {
+    query?: string
+    registries?: string[]
+  }
+) {
+  const { query, registries } = options || {}
+
+  const formattedItems = results.items.map((item) => {
+    const parts: string[] = [`- ${item.name}`]
+
+    if (item.type) {
+      parts.push(`(${item.type})`)
+    }
+
+    if (item.description) {
+      parts.push(`- ${item.description}`)
+    }
+
+    if (item.registry) {
+      parts.push(`[${item.registry}]`)
+    }
+
+    parts.push(
+      `\n  Add command: \`${npxShadcn(`add ${item.addCommandArgument}`)}\``
+    )
+
+    return parts.join(" ")
+  })
+
+  let header = `Found ${results.pagination.total} items`
+  if (query) {
+    header += ` matching "${query}"`
+  }
+  if (registries && registries.length > 0) {
+    header += ` in registries ${registries.join(", ")}`
+  }
+  header += ":"
+
+  const showingRange = `Showing items ${
+    results.pagination.offset + 1
+  }-${Math.min(
+    results.pagination.offset + results.pagination.limit,
+    results.pagination.total
+  )} of ${results.pagination.total}:`
+
+  let output = `${header}\n\n${showingRange}\n\n${formattedItems.join("\n\n")}`
+
+  if (results.pagination.hasMore) {
+    output += `\n\nMore items available. Use offset: ${
+      results.pagination.offset + results.pagination.limit
+    } to see the next page.`
+  }
+
+  return output
+}
+
+export function formatRegistryItems(
+  items: z.infer<typeof registryItemSchema>[]
+) {
+  return items.map((item) => {
+    const parts: string[] = [
+      `## ${item.name}`,
+      item.description ? `\n${item.description}\n` : "",
+      item.type ? `**Type:** ${item.type}` : "",
+      item.files && item.files.length > 0
+        ? `**Files:** ${item.files.length} file(s)`
+        : "",
+      item.dependencies && item.dependencies.length > 0
+        ? `**Dependencies:** ${item.dependencies.join(", ")}`
+        : "",
+      item.devDependencies && item.devDependencies.length > 0
+        ? `**Dev Dependencies:** ${item.devDependencies.join(", ")}`
+        : "",
+    ]
+    return parts.filter(Boolean).join("\n")
+  })
+}
+
+export function formatItemExamples(
+  items: z.infer<typeof registryItemSchema>[],
+  query: string
+) {
+  const sections = items.map((item) => {
+    const parts: string[] = [
+      `## Example: ${item.name}`,
+      item.description ? `\n${item.description}\n` : "",
+    ]
+
+    if (item.files?.length) {
+      item.files.forEach((file) => {
+        if (file.content) {
+          parts.push(`### Code (${file.path}):\n`)
+          parts.push("```tsx")
+          parts.push(file.content)
+          parts.push("```")
+        }
+      })
+    }
+
+    return parts.filter(Boolean).join("\n")
+  })
+
+  const header = `# Usage Examples\n\nFound ${items.length} example${
+    items.length > 1 ? "s" : ""
+  } matching "${query}":\n`
+
+  return header + sections.join("\n\n---\n\n")
+}
diff --git a/packages/shadcn/src/migrations/migrate-icons.test.ts b/packages/shadcn/src/migrations/migrate-icons.test.ts
new file mode 100644
index 00000000000..3cd52f35489
--- /dev/null
+++ b/packages/shadcn/src/migrations/migrate-icons.test.ts
@@ -0,0 +1,158 @@
+import { describe, expect, it } from "vitest"
+
+import { migrateIconsFile } from "./migrate-icons"
+
+describe("migrateIconsFile", () => {
+  it("should replace radix icons with lucide icons", async () => {
+    const input = `
+      import { CheckIcon, CloseIcon } from "@radix-ui/react-icons"
+      import { Something } from "other-package"
+
+      export function Component() {
+        return (
+          <div>
+            <CheckIcon className="w-4 h-4" />
+            <CloseIcon />
+          </div>
+        )
+      }`
+
+    expect(
+      await migrateIconsFile(input, "radix", "lucide", {
+        Check: {
+          lucide: "Check",
+          radix: "CheckIcon",
+        },
+        X: {
+          lucide: "X",
+          radix: "CloseIcon",
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      "import { Something } from "other-package"
+      import { Check, X } from "lucide-react";
+
+            export function Component() {
+              return (
+                <div>
+                  <Check className="w-4 h-4" />
+                  <X />
+                </div>
+              )
+            }"
+    `)
+  })
+
+  it("should return null if no radix icons are found", async () => {
+    const input = `
+      import { Something } from "other-package"
+
+      export function Component() {
+        return <div>No icons here</div>
+      }`
+
+    expect(await migrateIconsFile(input, "lucide", "radix", {}))
+      .toMatchInlineSnapshot(`
+      "import { Something } from "other-package"
+
+            export function Component() {
+              return <div>No icons here</div>
+            }"
+    `)
+  })
+
+  it("should handle mixed icon imports from different packages", async () => {
+    const input = `
+      import { CheckIcon } from "@radix-ui/react-icons"
+      import { AlertCircle } from "lucide-react"
+      import { Something } from "other-package"
+      import { Cross2Icon } from "@radix-ui/react-icons"
+
+      export function Component() {
+        return (
+          <div>
+            <CheckIcon className="w-4 h-4" />
+            <AlertCircle />
+            <Cross2Icon />
+          </div>
+        )
+      }`
+
+    expect(
+      await migrateIconsFile(input, "radix", "lucide", {
+        Check: {
+          lucide: "Check",
+          radix: "CheckIcon",
+        },
+        X: {
+          lucide: "X",
+          radix: "Cross2Icon",
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      "import { AlertCircle } from "lucide-react"
+            import { Something } from "other-package"
+      import { Check, X } from "lucide-react";
+
+            export function Component() {
+              return (
+                <div>
+                  <Check className="w-4 h-4" />
+                  <AlertCircle />
+                  <X />
+                </div>
+              )
+            }"
+    `)
+  })
+
+  it("should preserve all props and children on icons", async () => {
+    const input = `
+      import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons"
+
+      export function Component() {
+        return (
+          <div>
+            <CheckIcon
+              className="w-4 h-4"
+              onClick={handleClick}
+              data-testid="check-icon"
+            >
+              <span>Child content</span>
+            </CheckIcon>
+            <Cross2Icon style={{ color: 'red' }} aria-label="Close" />
+          </div>
+        )
+      }`
+
+    expect(
+      await migrateIconsFile(input, "radix", "lucide", {
+        Check: {
+          lucide: "Check",
+          radix: "CheckIcon",
+        },
+        X: {
+          lucide: "X",
+          radix: "Cross2Icon",
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      "import { Check, X } from "lucide-react";
+
+                  export function Component() {
+              return (
+                <div>
+                  <CheckIcon
+                    className="w-4 h-4"
+                    onClick={handleClick}
+                    data-testid="check-icon"
+                  >
+                    <span>Child content</span>
+                  </CheckIcon>
+                  <X style={{ color: 'red' }} aria-label="Close" />
+                </div>
+              )
+            }"
+    `)
+  })
+})
diff --git a/packages/shadcn/src/migrations/migrate-icons.ts b/packages/shadcn/src/migrations/migrate-icons.ts
new file mode 100644
index 00000000000..3e1762c2b06
--- /dev/null
+++ b/packages/shadcn/src/migrations/migrate-icons.ts
@@ -0,0 +1,201 @@
+import { randomBytes } from "crypto"
+import { promises as fs } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import { getRegistryIcons } from "@/src/registry/api"
+import { iconsSchema } from "@/src/schema"
+import { Config } from "@/src/utils/get-config"
+import { highlighter } from "@/src/utils/highlighter"
+import { ICON_LIBRARIES } from "@/src/utils/icon-libraries"
+import { logger } from "@/src/utils/logger"
+import { spinner } from "@/src/utils/spinner"
+import { updateDependencies } from "@/src/utils/updaters/update-dependencies"
+import fg from "fast-glob"
+import prompts from "prompts"
+import { Project, ScriptKind, SyntaxKind } from "ts-morph"
+import { z } from "zod"
+
+export async function migrateIcons(config: Config) {
+  if (!config.resolvedPaths.ui) {
+    throw new Error(
+      "We could not find a valid `ui` path in your `components.json` file. Please ensure you have a valid `ui` path in your `components.json` file."
+    )
+  }
+
+  const uiPath = config.resolvedPaths.ui
+  const [files, registryIcons] = await Promise.all([
+    fg("**/*.{js,ts,jsx,tsx}", {
+      cwd: uiPath,
+    }),
+    getRegistryIcons(),
+  ])
+
+  if (Object.keys(registryIcons).length === 0) {
+    throw new Error("Something went wrong fetching the registry icons.")
+  }
+
+  const libraryChoices = Object.entries(ICON_LIBRARIES).map(
+    ([name, iconLibrary]) => ({
+      title: iconLibrary.name,
+      value: name,
+    })
+  )
+
+  const migrateOptions = await prompts([
+    {
+      type: "select",
+      name: "sourceLibrary",
+      message: `Which icon library would you like to ${highlighter.info(
+        "migrate from"
+      )}?`,
+      choices: libraryChoices,
+    },
+    {
+      type: "select",
+      name: "targetLibrary",
+      message: `Which icon library would you like to ${highlighter.info(
+        "migrate to"
+      )}?`,
+      choices: libraryChoices,
+    },
+  ])
+
+  if (migrateOptions.sourceLibrary === migrateOptions.targetLibrary) {
+    throw new Error(
+      "You cannot migrate to the same icon library. Please choose a different icon library."
+    )
+  }
+
+  if (
+    !(
+      migrateOptions.sourceLibrary in ICON_LIBRARIES &&
+      migrateOptions.targetLibrary in ICON_LIBRARIES
+    )
+  ) {
+    throw new Error("Invalid icon library. Please choose a valid icon library.")
+  }
+
+  const sourceLibrary =
+    ICON_LIBRARIES[migrateOptions.sourceLibrary as keyof typeof ICON_LIBRARIES]
+  const targetLibrary =
+    ICON_LIBRARIES[migrateOptions.targetLibrary as keyof typeof ICON_LIBRARIES]
+  const { confirm } = await prompts({
+    type: "confirm",
+    name: "confirm",
+    initial: true,
+    message: `We will migrate ${highlighter.info(
+      files.length
+    )} files in ${highlighter.info(
+      `./${path.relative(config.resolvedPaths.cwd, uiPath)}`
+    )} from ${highlighter.info(sourceLibrary.name)} to ${highlighter.info(
+      targetLibrary.name
+    )}. Continue?`,
+  })
+
+  if (!confirm) {
+    logger.info("Migration cancelled.")
+    process.exit(0)
+  }
+
+  if (targetLibrary.package) {
+    await updateDependencies([targetLibrary.package], [], config, {
+      silent: false,
+    })
+  }
+
+  const migrationSpinner = spinner(`Migrating icons...`)?.start()
+
+  await Promise.all(
+    files.map(async (file) => {
+      migrationSpinner.text = `Migrating ${file}...`
+
+      const filePath = path.join(uiPath, file)
+      const fileContent = await fs.readFile(filePath, "utf-8")
+
+      const content = await migrateIconsFile(
+        fileContent,
+        migrateOptions.sourceLibrary,
+        migrateOptions.targetLibrary,
+        registryIcons
+      )
+
+      await fs.writeFile(filePath, content)
+    })
+  )
+
+  migrationSpinner.succeed("Migration complete.")
+}
+
+export async function migrateIconsFile(
+  content: string,
+  sourceLibrary: keyof typeof ICON_LIBRARIES,
+  targetLibrary: keyof typeof ICON_LIBRARIES,
+  iconsMapping: z.infer<typeof iconsSchema>
+) {
+  const sourceLibraryImport = ICON_LIBRARIES[sourceLibrary]?.import
+  const targetLibraryImport = ICON_LIBRARIES[targetLibrary]?.import
+
+  const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-"))
+  const project = new Project({
+    compilerOptions: {},
+  })
+
+  const tempFile = path.join(
+    dir,
+    `shadcn-icons-${randomBytes(4).toString("hex")}.tsx`
+  )
+  const sourceFile = project.createSourceFile(tempFile, content, {
+    scriptKind: ScriptKind.TSX,
+  })
+
+  // Find all sourceLibrary imports.
+  let targetedIcons: string[] = []
+  for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) {
+    if (
+      importDeclaration.getModuleSpecifier()?.getText() !==
+      `"${sourceLibraryImport}"`
+    ) {
+      continue
+    }
+
+    for (const specifier of importDeclaration.getNamedImports() ?? []) {
+      const iconName = specifier.getName()
+
+      // TODO: this is O(n^2) but okay for now.
+      const targetedIcon = Object.values(iconsMapping).find(
+        (icon) => icon[sourceLibrary] === iconName
+      )?.[targetLibrary]
+
+      if (!targetedIcon || targetedIcons.includes(targetedIcon)) {
+        continue
+      }
+
+      targetedIcons.push(targetedIcon)
+
+      // Remove the named import.
+      specifier.remove()
+
+      // Replace with the targeted icon.
+      sourceFile
+        .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
+        .filter((node) => node.getTagNameNode()?.getText() === iconName)
+        .forEach((node) => node.getTagNameNode()?.replaceWithText(targetedIcon))
+    }
+
+    // If the named import is empty, remove the import declaration.
+    if (importDeclaration.getNamedImports()?.length === 0) {
+      importDeclaration.remove()
+    }
+  }
+
+  if (targetedIcons.length > 0) {
+    sourceFile.addImportDeclaration({
+      moduleSpecifier: targetLibraryImport,
+      namedImports: targetedIcons.map((icon) => ({
+        name: icon,
+      })),
+    })
+  }
+
+  return await sourceFile.getText()
+}
diff --git a/packages/shadcn/src/migrations/migrate-radix.test.ts b/packages/shadcn/src/migrations/migrate-radix.test.ts
new file mode 100644
index 00000000000..7a842a74e4e
--- /dev/null
+++ b/packages/shadcn/src/migrations/migrate-radix.test.ts
@@ -0,0 +1,1136 @@
+import { promises as fs } from "fs"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { migrateRadix, migrateRadixFile } from "./migrate-radix"
+
+// Mock dependencies
+vi.mock("fs", () => ({
+  promises: {
+    readFile: vi.fn(),
+    writeFile: vi.fn(),
+    mkdtemp: vi.fn(),
+  },
+}))
+
+vi.mock("fast-glob", () => ({
+  default: vi.fn(),
+}))
+
+vi.mock("prompts", () => ({
+  default: vi.fn(),
+}))
+
+vi.mock("@/src/utils/spinner", () => ({
+  spinner: vi.fn(() => ({
+    start: vi.fn().mockReturnThis(),
+    succeed: vi.fn(),
+    fail: vi.fn(),
+    text: "",
+  })),
+}))
+
+vi.mock("@/src/utils/logger", () => ({
+  logger: {
+    info: vi.fn(),
+    warn: vi.fn(),
+    break: vi.fn(),
+  },
+}))
+
+vi.mock("@/src/utils/get-package-manager", () => ({
+  getPackageManager: vi.fn(),
+}))
+
+vi.mock("@/src/utils/get-package-info", () => ({
+  getPackageInfo: vi.fn(),
+}))
+
+vi.mock("@/src/utils/updaters/update-dependencies", () => ({
+  updateDependencies: vi.fn(),
+}))
+
+const mockFs = fs as any
+const mockConfig = {
+  style: "default",
+  rsc: false,
+  tsx: true,
+  tailwind: {
+    css: "app/globals.css",
+    baseColor: "slate",
+    cssVariables: true,
+  },
+  aliases: {
+    components: "@/components",
+    utils: "@/lib/utils",
+  },
+  resolvedPaths: {
+    cwd: "/test-project",
+    ui: "/test-project/components",
+    tailwindConfig: "/test-project/tailwind.config.js",
+    tailwindCss: "/test-project/app/globals.css",
+    utils: "/test-project/lib/utils",
+    components: "/test-project/components",
+    lib: "/test-project/lib",
+    hooks: "/test-project/hooks",
+  },
+}
+
+beforeEach(() => {
+  // Mock mkdtemp to return a valid temp directory path
+  mockFs.mkdtemp.mockResolvedValue("/tmp/shadcn-test")
+})
+
+describe("migrateRadixFile", () => {
+  it("should migrate namespace imports", async () => {
+    const input = `import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectPrimitive.Root`
+
+    const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from "radix-ui"
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectPrimitive.Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should migrate named imports", async () => {
+    const input = `import { Root, Trigger } from "@radix-ui/react-dialog"
+import { Content } from "@radix-ui/react-select"
+
+export const DialogRoot = Root
+export const DialogTrigger = Trigger
+export const SelectContent = Content`
+
+    const expected = `import { Root, Trigger, Content } from "radix-ui"
+
+export const DialogRoot = Root
+export const DialogTrigger = Trigger
+export const SelectContent = Content`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should handle mixed import types", async () => {
+    const input = `import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Root as SelectRoot } from "@radix-ui/react-select"
+import { useState } from "react"
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectRoot`
+
+    const expected = `import { Dialog as DialogPrimitive, Root as SelectRoot } from "radix-ui"
+
+import { useState } from "react"
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectRoot`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should not modify non-Radix imports", async () => {
+    const input = `import React from "react"
+import { clsx } from "clsx"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+
+export const Dialog = DialogPrimitive.Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content).toContain('import React from "react"')
+    expect(result.content).toContain('import { clsx } from "clsx"')
+    expect(result.content).toContain(
+      'import { Dialog as DialogPrimitive } from "radix-ui"'
+    )
+    expect(result.content).not.toContain("@radix-ui/react-dialog")
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-dialog"])
+  })
+
+  it("should handle files with no Radix imports", async () => {
+    const input = `import React from "react"
+import { clsx } from "clsx"
+
+export const Component = () => <div>Hello</div>`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(input.trim())
+    expect(result.replacedPackages).toEqual([])
+  })
+
+  it("should preserve import position in file", async () => {
+    const input = `"use client"
+
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { useState } from "react"
+
+export const Dialog = DialogPrimitive.Root`
+
+    const expected = `"use client"
+
+import { Dialog as DialogPrimitive } from "radix-ui"
+import { useState } from "react"
+
+export const Dialog = DialogPrimitive.Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-dialog"])
+  })
+
+  it("should handle multiple Radix imports without node removal errors", async () => {
+    const input = `"use client"
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { useState } from "react"
+
+export const DropdownMenu = DropdownMenuPrimitive.Root
+export const Dialog = DialogPrimitive.Root`
+
+    const expected = `"use client"
+
+import { DropdownMenu as DropdownMenuPrimitive, Dialog as DialogPrimitive } from "radix-ui"
+
+import { useState } from "react"
+
+export const DropdownMenu = DropdownMenuPrimitive.Root
+export const Dialog = DialogPrimitive.Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dropdown-menu",
+      "@radix-ui/react-dialog",
+    ])
+  })
+
+  it("should preserve single quotes if used in original imports", async () => {
+    const input = `import * as DialogPrimitive from '@radix-ui/react-dialog'
+import * as SelectPrimitive from '@radix-ui/react-select'
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectPrimitive.Root`
+
+    const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from 'radix-ui'
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectPrimitive.Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should preserve mixed quote styles from first import", async () => {
+    const input = `import * as DialogPrimitive from '@radix-ui/react-dialog'
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectPrimitive.Root`
+
+    const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from 'radix-ui'
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectPrimitive.Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should handle type-only imports", async () => {
+    const input = `import type { ComponentProps } from "@radix-ui/react-dialog"
+import { type SelectProps, Root } from "@radix-ui/react-select"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+
+export type MyDialogProps = ComponentProps
+export type MySelectProps = SelectProps
+export const Dialog = DialogPrimitive.Root`
+
+    const expected = `import { type ComponentProps, type SelectProps, Root, Dialog as DialogPrimitive } from "radix-ui"
+
+export type MyDialogProps = ComponentProps
+export type MySelectProps = SelectProps
+export const Dialog = DialogPrimitive.Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should handle mixed type and value imports", async () => {
+    const input = `import type { DialogProps } from "@radix-ui/react-dialog"
+import { Root, Trigger } from "@radix-ui/react-dialog"
+
+export type Props = DialogProps
+export const DialogRoot = Root`
+
+    const expected = `import { type DialogProps, Root, Trigger } from "radix-ui"
+
+export type Props = DialogProps
+export const DialogRoot = Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-dialog"])
+  })
+
+  it("should handle type-only namespace imports", async () => {
+    const input = `import type * as DialogTypes from "@radix-ui/react-dialog"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+
+export type Props = DialogTypes.ComponentProps
+export const Dialog = DialogPrimitive.Root`
+
+    const expected = `import { type Dialog as DialogTypes, Dialog as DialogPrimitive } from "radix-ui"
+
+export type Props = DialogTypes.ComponentProps
+export const Dialog = DialogPrimitive.Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-dialog"])
+  })
+
+  it("should not migrate @radix-ui/react-icons imports", async () => {
+    const input = `import { ChevronDownIcon, Cross2Icon } from "@radix-ui/react-icons"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Root } from "@radix-ui/react-select"
+
+export const Dialog = DialogPrimitive.Root
+export const ChevronDown = ChevronDownIcon`
+
+    const expected = `import { ChevronDownIcon, Cross2Icon } from "@radix-ui/react-icons"
+import { Dialog as DialogPrimitive, Root } from "radix-ui"
+
+export const Dialog = DialogPrimitive.Root
+export const ChevronDown = ChevronDownIcon`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should not migrate type imports from @radix-ui/react-icons", async () => {
+    const input = `import type { IconProps } from "@radix-ui/react-icons/dist/types"
+import type { ComponentProps } from "@radix-ui/react-dialog"
+import { Root } from "@radix-ui/react-dialog"
+
+export type MyIconProps = IconProps
+export type MyDialogProps = ComponentProps`
+
+    const expected = `import type { IconProps } from "@radix-ui/react-icons/dist/types"
+import { type ComponentProps, Root } from "radix-ui"
+
+export type MyIconProps = IconProps
+export type MyDialogProps = ComponentProps`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-dialog"])
+  })
+
+  it("should handle mixed imports with icons and other radix packages", async () => {
+    const input = `import * as Icons from "@radix-ui/react-icons"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import type { IconProps } from "@radix-ui/react-icons/dist/types"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Root } from "@radix-ui/react-select"
+
+export const Dialog = DialogPrimitive.Root
+export const Icon = ChevronDownIcon
+export type Props = IconProps`
+
+    const expected = `import * as Icons from "@radix-ui/react-icons"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import type { IconProps } from "@radix-ui/react-icons/dist/types"
+import { Dialog as DialogPrimitive, Root } from "radix-ui"
+
+export const Dialog = DialogPrimitive.Root
+export const Icon = ChevronDownIcon
+export type Props = IconProps`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should handle multi-line imports", async () => {
+    const input = `import {
+  Root,
+  Trigger,
+  Content
+} from "@radix-ui/react-dialog"
+import {
+  Value,
+  Item
+} from "@radix-ui/react-select"
+
+export const DialogRoot = Root
+export const SelectValue = Value`
+
+    const expected = `import { Root, Trigger, Content, Value, Item } from "radix-ui"
+
+export const DialogRoot = Root
+export const SelectValue = Value`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should handle multi-line imports with mixed formatting", async () => {
+    const input = `import {
+  Root as DialogRoot,
+  Trigger,
+  Content,
+} from "@radix-ui/react-dialog"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+export const Dialog = DialogRoot
+export const Select = SelectPrimitive.Root`
+
+    const expected = `import { Root as DialogRoot, Trigger, Content, Select as SelectPrimitive } from "radix-ui"
+
+export const Dialog = DialogRoot
+export const Select = SelectPrimitive.Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should handle multi-line type imports", async () => {
+    const input = `import type {
+  ComponentProps,
+  DialogProps
+} from "@radix-ui/react-dialog"
+import {
+  type SelectProps,
+  Root
+} from "@radix-ui/react-select"
+
+export type Props = DialogProps`
+
+    const expected = `import { type ComponentProps, type DialogProps, type SelectProps, Root } from "radix-ui"
+
+export type Props = DialogProps`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should handle complex multi-line imports with comments and extra whitespace", async () => {
+    const input = `import {
+  Root,   // Main component
+  Trigger,
+
+  Content,   // Content component
+} from "@radix-ui/react-dialog"
+
+export const DialogRoot = Root`
+
+    const expected = `import { Root, Trigger, Content } from "radix-ui"
+
+export const DialogRoot = Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-dialog"])
+  })
+
+  it("should handle multi-line imports with block comments", async () => {
+    const input = `import {
+  Root, /* main dialog component */
+  Trigger,
+  Content /* dialog content */,
+} from "@radix-ui/react-dialog"
+
+export const DialogRoot = Root`
+
+    const expected = `import { Root, Trigger, Content } from "radix-ui"
+
+export const DialogRoot = Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-dialog"])
+  })
+
+  it("should handle real-world shadcn/ui patterns from registry files", async () => {
+    // This test captures all the actual import patterns found in the shadcn/ui registry
+    const input = `import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { Slot } from "@radix-ui/react-slot"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+export const Accordion = AccordionPrimitive.Root
+export const AlertDialog = AlertDialogPrimitive.Root
+export const Button = Slot`
+
+    const expected = `import { Accordion as AccordionPrimitive, AlertDialog as AlertDialogPrimitive, AspectRatio as AspectRatioPrimitive, Avatar as AvatarPrimitive, Slot as SlotPrimitive, Checkbox as CheckboxPrimitive, Collapsible as CollapsiblePrimitive, ContextMenu as ContextMenuPrimitive, Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, HoverCard as HoverCardPrimitive, Label as LabelPrimitive, Menubar as MenubarPrimitive, NavigationMenu as NavigationMenuPrimitive, Popover as PopoverPrimitive, Progress as ProgressPrimitive, RadioGroup as RadioGroupPrimitive, ScrollArea as ScrollAreaPrimitive, Select as SelectPrimitive, Separator as SeparatorPrimitive, Slider as SliderPrimitive, Switch as SwitchPrimitive, Tabs as TabsPrimitive, Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive, Tooltip as TooltipPrimitive } from "radix-ui"
+
+export const Accordion = AccordionPrimitive.Root
+export const AlertDialog = AlertDialogPrimitive.Root
+export const Button = SlotPrimitive.Slot`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-accordion",
+      "@radix-ui/react-alert-dialog",
+      "@radix-ui/react-aspect-ratio",
+      "@radix-ui/react-avatar",
+      "@radix-ui/react-slot",
+      "@radix-ui/react-checkbox",
+      "@radix-ui/react-collapsible",
+      "@radix-ui/react-context-menu",
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-dropdown-menu",
+      "@radix-ui/react-hover-card",
+      "@radix-ui/react-label",
+      "@radix-ui/react-menubar",
+      "@radix-ui/react-navigation-menu",
+      "@radix-ui/react-popover",
+      "@radix-ui/react-progress",
+      "@radix-ui/react-radio-group",
+      "@radix-ui/react-scroll-area",
+      "@radix-ui/react-select",
+      "@radix-ui/react-separator",
+      "@radix-ui/react-slider",
+      "@radix-ui/react-switch",
+      "@radix-ui/react-tabs",
+      "@radix-ui/react-toggle",
+      "@radix-ui/react-toggle-group",
+      "@radix-ui/react-tooltip",
+    ])
+  })
+
+  it("should handle the special sheet.tsx pattern from registry", async () => {
+    // In shadcn/ui, sheet.tsx imports from react-dialog instead of a dedicated sheet package
+    const input = `import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cn } from "@/lib/utils"
+
+export const Sheet = SheetPrimitive.Root
+export const SheetTrigger = SheetPrimitive.Trigger`
+
+    const expected = `import { Dialog as SheetPrimitive } from "radix-ui"
+import { cn } from "@/lib/utils"
+
+export const Sheet = SheetPrimitive.Root
+export const SheetTrigger = SheetPrimitive.Trigger`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-dialog"])
+  })
+
+  it("should handle form.tsx mixed pattern from registry", async () => {
+    // form.tsx uses both namespace and named imports
+    const input = `import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+
+export const FormLabel = LabelPrimitive.Root
+export const FormControl = Slot`
+
+    const expected = `import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui"
+
+export const FormLabel = LabelPrimitive.Root
+export const FormControl = SlotPrimitive.Slot`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-label",
+      "@radix-ui/react-slot",
+    ])
+  })
+
+  it("should handle all 26 packages used in shadcn/ui registry", async () => {
+    // Test that we correctly handle all packages found in the registry analysis
+    const allPackages = [
+      "@radix-ui/react-accordion",
+      "@radix-ui/react-alert-dialog",
+      "@radix-ui/react-aspect-ratio",
+      "@radix-ui/react-avatar",
+      "@radix-ui/react-checkbox",
+      "@radix-ui/react-collapsible",
+      "@radix-ui/react-context-menu",
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-dropdown-menu",
+      "@radix-ui/react-hover-card",
+      "@radix-ui/react-label",
+      "@radix-ui/react-menubar",
+      "@radix-ui/react-navigation-menu",
+      "@radix-ui/react-popover",
+      "@radix-ui/react-progress",
+      "@radix-ui/react-radio-group",
+      "@radix-ui/react-scroll-area",
+      "@radix-ui/react-select",
+      "@radix-ui/react-separator",
+      "@radix-ui/react-slider",
+      "@radix-ui/react-slot",
+      "@radix-ui/react-switch",
+      "@radix-ui/react-tabs",
+      "@radix-ui/react-toggle",
+      "@radix-ui/react-toggle-group",
+      "@radix-ui/react-tooltip",
+    ]
+
+    // Create import statements for all packages
+    const imports = allPackages
+      .map((pkg) => {
+        const componentName = pkg
+          .replace("@radix-ui/react-", "")
+          .split("-")
+          .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+          .join("")
+
+        if (pkg === "@radix-ui/react-slot") {
+          return `import { Slot } from "${pkg}"`
+        }
+        return `import * as ${componentName}Primitive from "${pkg}"`
+      })
+      .join("\n")
+
+    const result = await migrateRadixFile(imports)
+
+    // Should contain all 26 packages in replacedPackages
+    expect(result.replacedPackages).toHaveLength(26)
+    expect(result.replacedPackages.sort()).toEqual(allPackages.sort())
+
+    // Should be a single unified import from radix-ui
+    expect(result.content).toContain('from "radix-ui"')
+    expect(result.content.startsWith("import {")).toBe(true)
+    expect(result.content).toContain("Slot as SlotPrimitive") // Slot should be aliased as SlotPrimitive
+    expect(result.content).toContain("Accordion as AccordionPrimitive") // Namespace should be aliased
+
+    // Should have transformed all imports into a single statement
+    const importLines = result.content
+      .split("\n")
+      .filter((line) => line.includes("import"))
+    expect(importLines).toHaveLength(1)
+  })
+
+  it("should transform Slot usage in ternary expressions", async () => {
+    const input = `import { Slot } from "@radix-ui/react-slot"
+
+const Button = ({ asChild, children }) => {
+  const Comp = asChild ? Slot : "button"
+  const Element = asChild ? Slot : "div"
+  return <Comp>{children}</Comp>
+}`
+
+    const expected = `import { Slot as SlotPrimitive } from "radix-ui"
+
+const Button = ({ asChild, children }) => {
+  const Comp = asChild ? SlotPrimitive.Slot : "button"
+  const Element = asChild ? SlotPrimitive.Slot : "div"
+  return <Comp>{children}</Comp>
+}`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-slot"])
+  })
+
+  it("should handle Slot usage with different spacing patterns", async () => {
+    const input = `import { Slot } from "@radix-ui/react-slot"
+
+const Button = ({ asChild }) => {
+  const Comp1 = asChild ? Slot : "button"
+  const Comp2 = asChild?Slot:"button"
+  const Comp3 = asChild  ?  Slot  :  "button"
+  return null
+}`
+
+    const expected = `import { Slot as SlotPrimitive } from "radix-ui"
+
+const Button = ({ asChild }) => {
+  const Comp1 = asChild ? SlotPrimitive.Slot : "button"
+  const Comp2 = asChild?SlotPrimitive.Slot:"button"
+  const Comp3 = asChild  ?  SlotPrimitive.Slot  :  "button"
+  return null
+}`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-slot"])
+  })
+
+  it("should handle custom Slot aliases differently", async () => {
+    const input = `import { Slot as SlotComponent } from "@radix-ui/react-slot"
+
+const Button = ({ asChild }) => {
+  const Comp = asChild ? Slot : "button"
+  const Element = asChild ? SlotComponent : "div"
+  return null
+}`
+
+    const expected = `import { Slot as SlotComponent } from "radix-ui"
+
+const Button = ({ asChild }) => {
+  const Comp = asChild ? Slot : "button"
+  const Element = asChild ? SlotComponent : "div"
+  return null
+}`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-slot"])
+  })
+
+  it("should transform all Slot references but preserve string literals", async () => {
+    const input = `import { Slot } from "@radix-ui/react-slot"
+
+const Button = ({ asChild }) => {
+  const SlotName = "Slot"
+  const someSlot = slot
+  const Comp = asChild ? Slot : "button"
+  return <Slot />
+}`
+
+    const expected = `import { Slot as SlotPrimitive } from "radix-ui"
+
+const Button = ({ asChild }) => {
+  const SlotName = "Slot"
+  const someSlot = slot
+  const Comp = asChild ? SlotPrimitive.Slot : "button"
+  return <SlotPrimitive.Slot />
+}`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-slot"])
+  })
+
+  it("should transform React.ComponentProps<typeof Slot>", async () => {
+    const input = `import { Slot } from "@radix-ui/react-slot"
+import React from "react"
+
+type ButtonProps = React.ComponentProps<typeof Slot> & {
+  variant?: string
+}
+
+const Button = ({ asChild, ...props }: ButtonProps) => {
+  const Comp = asChild ? Slot : "button"
+  return <Comp {...props} />
+}`
+
+    const expected = `import { Slot as SlotPrimitive } from "radix-ui"
+import React from "react"
+
+type ButtonProps = React.ComponentProps<typeof SlotPrimitive.Slot> & {
+  variant?: string
+}
+
+const Button = ({ asChild, ...props }: ButtonProps) => {
+  const Comp = asChild ? SlotPrimitive.Slot : "button"
+  return <Comp {...props} />
+}`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-slot"])
+  })
+
+  it("should transform ComponentProps<typeof Slot> without React prefix", async () => {
+    const input = `import { Slot } from "@radix-ui/react-slot"
+import { ComponentProps } from "react"
+
+type ButtonProps = ComponentProps<typeof Slot> & {
+  variant?: string
+}
+
+const Button = ({ asChild, ...props }: ButtonProps) => {
+  const Comp = asChild ? Slot : "button"
+  return <Comp {...props} />
+}`
+
+    const expected = `import { Slot as SlotPrimitive } from "radix-ui"
+import { ComponentProps } from "react"
+
+type ButtonProps = ComponentProps<typeof SlotPrimitive.Slot> & {
+  variant?: string
+}
+
+const Button = ({ asChild, ...props }: ButtonProps) => {
+  const Comp = asChild ? SlotPrimitive.Slot : "button"
+  return <Comp {...props} />
+}`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual(["@radix-ui/react-slot"])
+  })
+
+  it("should not add double semicolons when import already ends with semicolon", async () => {
+    const input = `import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectPrimitive.Root`
+
+    const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from "radix-ui";
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectPrimitive.Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+
+  it("should not add semicolon when original imports don't have semicolons", async () => {
+    const input = `import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectPrimitive.Root`
+
+    const expected = `import { Dialog as DialogPrimitive, Select as SelectPrimitive } from "radix-ui"
+
+export const Dialog = DialogPrimitive.Root
+export const Select = SelectPrimitive.Root`
+
+    const result = await migrateRadixFile(input)
+    expect(result.content.trim()).toBe(expected.trim())
+    expect(result.replacedPackages).toEqual([
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+    ])
+  })
+})
+
+describe("migrateRadix - package.json updates", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("should update package.json with Radix dependencies", async () => {
+    const mockPackageJson = {
+      name: "test-project",
+      dependencies: {
+        react: "^18.0.0",
+        "@radix-ui/react-dialog": "^1.0.0",
+        "@radix-ui/react-select": "^1.0.0",
+        "other-package": "^1.0.0",
+      },
+      devDependencies: {
+        "@radix-ui/react-toast": "^1.0.0",
+      },
+    }
+
+    const expectedPackageJson = {
+      name: "test-project",
+      dependencies: {
+        react: "^18.0.0",
+        "other-package": "^1.0.0",
+        "radix-ui": "latest",
+      },
+      devDependencies: {
+        "@radix-ui/react-toast": "^1.0.0",
+      },
+    }
+
+    // Mock package info
+    const { getPackageInfo } = await import("@/src/utils/get-package-info")
+    vi.mocked(getPackageInfo).mockReturnValue(mockPackageJson)
+
+    // Mock file system
+    mockFs.writeFile.mockResolvedValue(undefined)
+
+    // Mock fast-glob to return files with Radix imports
+    const fg = await import("fast-glob")
+    vi.mocked(fg.default).mockResolvedValue(["dialog.tsx", "select.tsx"])
+
+    // Mock file reads to return content with Radix imports
+    mockFs.readFile
+      .mockResolvedValueOnce(
+        'import * as DialogPrimitive from "@radix-ui/react-dialog"'
+      )
+      .mockResolvedValueOnce(
+        'import * as SelectPrimitive from "@radix-ui/react-select"'
+      )
+
+    // Mock prompts to confirm migration
+    const prompts = await import("prompts")
+    vi.mocked(prompts.default).mockResolvedValue({ confirm: true })
+
+    // Mock package manager detection
+    const { getPackageManager } = await import(
+      "@/src/utils/get-package-manager"
+    )
+    vi.mocked(getPackageManager).mockResolvedValue("npm")
+
+    await migrateRadix(mockConfig)
+
+    expect(mockFs.writeFile).toHaveBeenCalledWith(
+      "/test-project/package.json",
+      JSON.stringify(expectedPackageJson, null, 2) + "\n"
+    )
+  })
+
+  it("should handle package.json with no Radix dependencies", async () => {
+    const mockPackageJson = {
+      name: "test-project",
+      dependencies: {
+        react: "^18.0.0",
+        "other-package": "^1.0.0",
+      },
+    }
+
+    const { getPackageInfo } = await import("@/src/utils/get-package-info")
+    vi.mocked(getPackageInfo).mockReturnValue(mockPackageJson)
+
+    const { updateDependencies } = await import(
+      "@/src/utils/updaters/update-dependencies"
+    )
+
+    const fg = await import("fast-glob")
+    vi.mocked(fg.default).mockResolvedValue(["component.tsx"])
+
+    // Mock file read to return content with no Radix imports
+    mockFs.readFile.mockResolvedValue('import React from "react"')
+
+    const prompts = await import("prompts")
+    vi.mocked(prompts.default).mockResolvedValue({ confirm: true })
+
+    await migrateRadix(mockConfig as any)
+
+    // Should not write the file if no Radix packages found
+    expect(mockFs.writeFile).not.toHaveBeenCalledWith(
+      "/test-project/package.json",
+      expect.any(String)
+    )
+
+    // Should not attempt to install dependencies
+    expect(updateDependencies).not.toHaveBeenCalled()
+  })
+
+  it("should handle missing package.json gracefully", async () => {
+    const { getPackageInfo } = await import("@/src/utils/get-package-info")
+    vi.mocked(getPackageInfo).mockReturnValue(null)
+
+    const fg = await import("fast-glob")
+    vi.mocked(fg.default).mockResolvedValue(["component.tsx"])
+
+    // Mock file read
+    mockFs.readFile.mockResolvedValue('import React from "react"')
+
+    const prompts = await import("prompts")
+    vi.mocked(prompts.default).mockResolvedValue({ confirm: true })
+
+    // Should not throw
+    await expect(migrateRadix(mockConfig)).resolves.not.toThrow()
+  })
+
+  it("should automatically install radix-ui dependency", async () => {
+    const mockPackageJson = {
+      name: "test-project",
+      dependencies: {
+        "@radix-ui/react-dialog": "^1.0.0",
+      },
+    }
+
+    const { getPackageInfo } = await import("@/src/utils/get-package-info")
+    vi.mocked(getPackageInfo).mockReturnValue(mockPackageJson)
+
+    const { updateDependencies } = await import(
+      "@/src/utils/updaters/update-dependencies"
+    )
+
+    mockFs.writeFile.mockResolvedValue(undefined)
+
+    const fg = await import("fast-glob")
+    vi.mocked(fg.default).mockResolvedValue(["dialog.tsx"])
+
+    // Mock file read to return content with Radix imports
+    mockFs.readFile.mockResolvedValue(
+      'import * as DialogPrimitive from "@radix-ui/react-dialog"'
+    )
+
+    const prompts = await import("prompts")
+    vi.mocked(prompts.default).mockResolvedValue({ confirm: true })
+
+    await migrateRadix(mockConfig)
+
+    expect(updateDependencies).toHaveBeenCalledWith(
+      ["radix-ui"],
+      [],
+      mockConfig,
+      { silent: false }
+    )
+  })
+
+  it("should only remove packages that were found in source files", async () => {
+    const mockPackageJson = {
+      name: "test-project",
+      dependencies: {
+        react: "^18.0.0",
+        "@radix-ui/react-dialog": "^1.0.0",
+        "@radix-ui/react-select": "^1.0.0",
+        "@radix-ui/react-toast": "^1.0.0", // This one is NOT in source files
+        "other-package": "^1.0.0",
+      },
+    }
+
+    const expectedPackageJson = {
+      name: "test-project",
+      dependencies: {
+        react: "^18.0.0",
+        "@radix-ui/react-toast": "^1.0.0", // Should remain since not found in source
+        "other-package": "^1.0.0",
+        "radix-ui": "latest",
+      },
+    }
+
+    const { getPackageInfo } = await import("@/src/utils/get-package-info")
+    vi.mocked(getPackageInfo).mockReturnValue(mockPackageJson)
+
+    const { getPackageManager } = await import(
+      "@/src/utils/get-package-manager"
+    )
+    vi.mocked(getPackageManager).mockResolvedValue("npm")
+
+    mockFs.writeFile.mockResolvedValue(undefined)
+
+    // Mock fast-glob to return files with only dialog and select imports
+    const fg = await import("fast-glob")
+    vi.mocked(fg.default).mockResolvedValue(["dialog.tsx"])
+
+    // Mock file read to return content with only dialog and select
+    mockFs.readFile.mockResolvedValue(`
+      import * as DialogPrimitive from "@radix-ui/react-dialog"
+      import * as SelectPrimitive from "@radix-ui/react-select"
+      export const Dialog = DialogPrimitive.Root
+    `)
+
+    const prompts = await import("prompts")
+    vi.mocked(prompts.default).mockResolvedValue({ confirm: true })
+
+    await migrateRadix(mockConfig)
+
+    expect(mockFs.writeFile).toHaveBeenCalledWith(
+      "/test-project/package.json",
+      JSON.stringify(expectedPackageJson, null, 2) + "\n"
+    )
+  })
+
+  it("should not remove @radix-ui/react-icons from package.json", async () => {
+    const mockPackageJson = {
+      name: "test-project",
+      dependencies: {
+        react: "^18.0.0",
+        "@radix-ui/react-dialog": "^1.0.0",
+        "@radix-ui/react-icons": "^1.3.0", // Should NOT be removed
+        "other-package": "^1.0.0",
+      },
+    }
+
+    const expectedPackageJson = {
+      name: "test-project",
+      dependencies: {
+        react: "^18.0.0",
+        "@radix-ui/react-icons": "^1.3.0", // Should remain
+        "other-package": "^1.0.0",
+        "radix-ui": "latest",
+      },
+    }
+
+    const { getPackageInfo } = await import("@/src/utils/get-package-info")
+    vi.mocked(getPackageInfo).mockReturnValue(mockPackageJson)
+
+    const { getPackageManager } = await import(
+      "@/src/utils/get-package-manager"
+    )
+    vi.mocked(getPackageManager).mockResolvedValue("npm")
+
+    mockFs.writeFile.mockResolvedValue(undefined)
+
+    const fg = await import("fast-glob")
+    vi.mocked(fg.default).mockResolvedValue(["dialog.tsx"])
+
+    // Mock file read to return content with dialog imports but NOT icons
+    mockFs.readFile.mockResolvedValue(
+      'import * as DialogPrimitive from "@radix-ui/react-dialog"'
+    )
+
+    const prompts = await import("prompts")
+    vi.mocked(prompts.default).mockResolvedValue({ confirm: true })
+
+    await migrateRadix(mockConfig)
+
+    expect(mockFs.writeFile).toHaveBeenCalledWith(
+      "/test-project/package.json",
+      JSON.stringify(expectedPackageJson, null, 2) + "\n"
+    )
+  })
+})
diff --git a/packages/shadcn/src/migrations/migrate-radix.ts b/packages/shadcn/src/migrations/migrate-radix.ts
new file mode 100644
index 00000000000..6edff951d1b
--- /dev/null
+++ b/packages/shadcn/src/migrations/migrate-radix.ts
@@ -0,0 +1,400 @@
+import { promises as fs } from "fs"
+import path from "path"
+import { Config } from "@/src/utils/get-config"
+import { getPackageInfo } from "@/src/utils/get-package-info"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+import { spinner } from "@/src/utils/spinner"
+import { updateDependencies } from "@/src/utils/updaters/update-dependencies"
+import fg from "fast-glob"
+import prompts from "prompts"
+
+function toPascalCase(str: string): string {
+  return str
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("")
+}
+
+function processNamedImports(
+  namedImports: string,
+  isTypeOnly: boolean,
+  imports: Array<{ name: string; alias?: string; isType?: boolean }>,
+  packageName: string
+) {
+  // Clean up multi-line imports.
+  // Remove comments and whitespace.
+  const cleanedImports = namedImports
+    .replace(/\/\/.*$/gm, "")
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/\s+/g, " ")
+    .trim()
+
+  const namedImportList = cleanedImports
+    .split(",")
+    .map((importItem) => importItem.trim())
+    .filter(Boolean)
+
+  for (const importItem of namedImportList) {
+    const inlineTypeMatch = importItem.match(/^type\s+(\w+)(?:\s+as\s+(\w+))?$/)
+    const aliasMatch = importItem.match(/^(\w+)\s+as\s+(\w+)$/)
+
+    if (inlineTypeMatch) {
+      // Inline type: "type DialogProps" or "type DialogProps as Props"
+      const importName = inlineTypeMatch[1]
+      const importAlias = inlineTypeMatch[2]
+
+      if (packageName === "slot" && importName === "Slot" && !importAlias) {
+        imports.push({
+          name: "Slot",
+          alias: "SlotPrimitive",
+          isType: true,
+        })
+      } else {
+        imports.push({
+          name: importName,
+          alias: importAlias,
+          isType: true,
+        })
+      }
+    } else if (aliasMatch) {
+      // Regular import with alias: "Root as DialogRoot"
+      const importName = aliasMatch[1]
+      const importAlias = aliasMatch[2]
+
+      if (
+        packageName === "slot" &&
+        importName === "Slot" &&
+        importAlias === "Slot"
+      ) {
+        imports.push({
+          name: "Slot",
+          alias: "SlotPrimitive",
+          isType: isTypeOnly,
+        })
+      } else {
+        imports.push({
+          name: importName,
+          alias: importAlias,
+          isType: isTypeOnly,
+        })
+      }
+    } else {
+      // Simple import: "Root"
+      // Special handling for Slot: always alias it as SlotPrimitive
+      if (packageName === "slot" && importItem === "Slot") {
+        imports.push({
+          name: "Slot",
+          alias: "SlotPrimitive",
+          isType: isTypeOnly,
+        })
+      } else {
+        imports.push({
+          name: importItem,
+          isType: isTypeOnly,
+        })
+      }
+    }
+  }
+}
+
+export async function migrateRadix(
+  config: Config,
+  options: { yes?: boolean } = {}
+) {
+  if (!config.resolvedPaths.ui) {
+    throw new Error(
+      "We could not find a valid `ui` path in your `components.json` file. Please ensure you have a valid `ui` path in your `components.json` file."
+    )
+  }
+
+  const uiPath = config.resolvedPaths.ui
+  const files = await fg("**/*.{js,ts,jsx,tsx}", {
+    cwd: uiPath,
+  })
+
+  if (!options.yes) {
+    const { confirm } = await prompts({
+      type: "confirm",
+      name: "confirm",
+      initial: true,
+      message: `We will migrate ${highlighter.info(
+        files.length
+      )} files in ${highlighter.info(
+        `./${path.relative(config.resolvedPaths.cwd, uiPath)}`
+      )} to ${highlighter.info("radix-ui")}. Continue?`,
+    })
+
+    if (!confirm) {
+      logger.info("Migration cancelled.")
+      process.exit(0)
+    }
+  }
+
+  const migrationSpinner = spinner(`Migrating imports...`)?.start()
+  const foundPackages = new Set<string>()
+
+  await Promise.all(
+    files.map(async (file) => {
+      migrationSpinner.text = `Migrating ${file}...`
+
+      const filePath = path.join(uiPath, file)
+      const fileContent = await fs.readFile(filePath, "utf-8")
+
+      const { content, replacedPackages } = await migrateRadixFile(fileContent)
+
+      // Track which packages we found
+      replacedPackages.forEach((pkg) => foundPackages.add(pkg))
+
+      await fs.writeFile(filePath, content)
+    })
+  )
+
+  migrationSpinner.succeed("Migrating imports.")
+
+  // Update package.json dependencies
+  const packageSpinner = spinner(`Updating package.json...`)?.start()
+
+  try {
+    const packageJson = getPackageInfo(config.resolvedPaths.cwd, false)
+
+    if (!packageJson) {
+      packageSpinner.fail("Could not read package.json")
+      logger.warn(
+        "Could not update package.json. You may need to manually replace @radix-ui/react-* packages with radix-ui"
+      )
+      return
+    }
+
+    const foundPackagesArray = Array.from(foundPackages)
+
+    // Remove packages from both dependencies and devDependencies if found in source files
+    const dependencyTypes = ["dependencies", "devDependencies"] as const
+    for (const depType of dependencyTypes) {
+      if (packageJson[depType]) {
+        for (const pkg of foundPackagesArray) {
+          if (packageJson[depType]![pkg]) {
+            delete packageJson[depType]![pkg]
+          }
+        }
+      }
+    }
+
+    // Add radix-ui if we found any Radix packages.
+    if (foundPackagesArray.length > 0) {
+      if (!packageJson.dependencies) {
+        packageJson.dependencies = {}
+      }
+      packageJson.dependencies["radix-ui"] = "latest"
+
+      const packageJsonPath = path.join(
+        config.resolvedPaths.cwd,
+        "package.json"
+      )
+      await fs.writeFile(
+        packageJsonPath,
+        JSON.stringify(packageJson, null, 2) + "\n"
+      )
+
+      packageSpinner.succeed(`Updated package.json.`)
+
+      // Install radix-ui dependency.
+      await updateDependencies(["radix-ui"], [], config, { silent: false })
+    } else {
+      packageSpinner.succeed("No packages found in source files.")
+    }
+  } catch (error) {
+    packageSpinner.fail("Failed to update package.json")
+    logger.warn(
+      "You may need to manually replace @radix-ui/react-* packages with radix-ui"
+    )
+  }
+}
+
+export async function migrateRadixFile(
+  content: string
+): Promise<{ content: string; replacedPackages: string[] }> {
+  // Enhanced regex to handle type-only imports, but exclude react-icons
+  // Also capture optional semicolon at the end
+  const radixImportPattern =
+    /import\s+(?:(type)\s+)?(?:\*\s+as\s+(\w+)|{([^}]+)})\s+from\s+(["'])@radix-ui\/react-([^"']+)\4(;?)/g
+
+  const imports: Array<{ name: string; alias?: string; isType?: boolean }> = []
+  const linesToRemove: string[] = []
+  const replacedPackages: string[] = []
+  let quoteStyle = '"' // Default to double quotes
+  let hasSemicolon = false // Track if any import had a semicolon
+
+  let result = content
+  let match
+
+  // Find all Radix imports
+  while ((match = radixImportPattern.exec(content)) !== null) {
+    const [
+      fullMatch,
+      typeKeyword,
+      namespaceAlias,
+      namedImports,
+      quote,
+      packageName,
+      semicolon,
+    ] = match
+
+    // Skip react-icons package and any sub-paths (like react-icons/dist/types)
+    if (packageName === "icons" || packageName.startsWith("icons/")) {
+      continue
+    }
+
+    linesToRemove.push(fullMatch)
+
+    // Use the quote style and semicolon style from the first import
+    if (linesToRemove.length === 1) {
+      quoteStyle = quote
+      hasSemicolon = semicolon === ";"
+    }
+
+    // Track which package we're replacing
+    replacedPackages.push(`@radix-ui/react-${packageName}`)
+
+    const isTypeOnly = Boolean(typeKeyword)
+
+    if (namespaceAlias) {
+      // Handle namespace imports: import * as DialogPrimitive from "@radix-ui/react-dialog"
+      const componentName = toPascalCase(packageName)
+      imports.push({
+        name: componentName,
+        alias: namespaceAlias,
+        isType: isTypeOnly,
+      })
+    } else if (namedImports) {
+      // Handle named imports: import { Root, Trigger } from "@radix-ui/react-dialog"
+      // or import type { DialogProps } from "@radix-ui/react-dialog"
+      // or import { type DialogProps, Root } from "@radix-ui/react-dialog"
+
+      processNamedImports(namedImports, isTypeOnly, imports, packageName)
+    }
+  }
+
+  if (imports.length === 0) {
+    return {
+      content,
+      replacedPackages: [],
+    }
+  }
+
+  // Remove duplicates.
+  // Considering name, alias, and type status.
+  const uniqueImports = imports.filter(
+    (importName, index, self) =>
+      index ===
+      self.findIndex(
+        (i) =>
+          i.name === importName.name &&
+          i.alias === importName.alias &&
+          i.isType === importName.isType
+      )
+  )
+
+  // Create the unified import with preserved quote style and type annotations
+  const importList = uniqueImports
+    .map((imp) => {
+      const typePrefix = imp.isType ? "type " : ""
+      return imp.alias
+        ? `${typePrefix}${imp.name} as ${imp.alias}`
+        : `${typePrefix}${imp.name}`
+    })
+    .join(", ")
+
+  const unifiedImport = `import { ${importList} } from ${quoteStyle}radix-ui${quoteStyle}${
+    hasSemicolon ? ";" : ""
+  }`
+
+  // Replace first import with unified import, remove the rest
+  result = linesToRemove.reduce((acc, line, index) => {
+    return acc.replace(line, index === 0 ? unifiedImport : "")
+  }, result)
+
+  // Clean up extra blank lines
+  result = result.replace(/\n\s*\n\s*\n/g, "\n\n")
+
+  // Handle special case for Slot usage transformation
+  // Now that we import { Slot as SlotPrimitive }, we need to:
+  // 1. Transform: const Comp = asChild ? Slot : [ANYTHING] -> const Comp = asChild ? SlotPrimitive.Slot : [ANYTHING]
+  // 2. Transform: React.ComponentProps<typeof Slot> -> React.ComponentProps<typeof SlotPrimitive.Slot>
+  const hasSlotImport = uniqueImports.some(
+    (imp) => imp.name === "Slot" && imp.alias === "SlotPrimitive"
+  )
+
+  if (hasSlotImport) {
+    // Find all lines that are NOT import lines to avoid transforming the import statement itself
+    const lines = result.split("\n")
+    const transformedLines = lines.map((line) => {
+      // Skip import lines
+      if (line.trim().startsWith("import ")) {
+        return line
+      }
+
+      let transformedLine = line
+
+      // Handle all Slot references in one comprehensive pass
+      // Use placeholders to avoid double replacements
+
+      // First, mark specific patterns with placeholders
+      transformedLine = transformedLine.replace(
+        /\b(asChild\s*\?\s*)Slot(\s*:)/g,
+        "$1__SLOT_PLACEHOLDER__$2"
+      )
+
+      transformedLine = transformedLine.replace(
+        /\bReact\.ComponentProps<typeof\s+Slot>/g,
+        "React.ComponentProps<typeof __SLOT_PLACEHOLDER__>"
+      )
+
+      transformedLine = transformedLine.replace(
+        /\bComponentProps<typeof\s+Slot>/g,
+        "ComponentProps<typeof __SLOT_PLACEHOLDER__>"
+      )
+
+      transformedLine = transformedLine.replace(
+        /(<\/?)Slot(\s*\/?>)/g,
+        "$1__SLOT_PLACEHOLDER__$2"
+      )
+
+      // Handle any other standalone Slot usage
+      transformedLine = transformedLine.replace(
+        /\bSlot\b/g,
+        (match, offset, string) => {
+          // Don't transform if it's inside quotes
+          const beforeMatch = string.substring(0, offset)
+          const openQuotes = (beforeMatch.match(/"/g) || []).length
+          const openSingleQuotes = (beforeMatch.match(/'/g) || []).length
+
+          // If we're inside quotes, don't transform
+          if (openQuotes % 2 !== 0 || openSingleQuotes % 2 !== 0) {
+            return match
+          }
+
+          return "__SLOT_PLACEHOLDER__"
+        }
+      )
+
+      // Finally, replace all placeholders with SlotPrimitive.Slot
+      transformedLine = transformedLine.replace(
+        /__SLOT_PLACEHOLDER__/g,
+        "SlotPrimitive.Slot"
+      )
+
+      return transformedLine
+    })
+
+    result = transformedLines.join("\n")
+  }
+
+  // Remove duplicate packages
+  const uniqueReplacedPackages = Array.from(new Set(replacedPackages))
+
+  return {
+    content: result,
+    replacedPackages: uniqueReplacedPackages,
+  }
+}
diff --git a/packages/shadcn/src/preflights/preflight-build.ts b/packages/shadcn/src/preflights/preflight-build.ts
new file mode 100644
index 00000000000..7bc59fb1943
--- /dev/null
+++ b/packages/shadcn/src/preflights/preflight-build.ts
@@ -0,0 +1,46 @@
+import path from "path"
+import { buildOptionsSchema } from "@/src/commands/build"
+import * as ERRORS from "@/src/utils/errors"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+import fs from "fs-extra"
+import { z } from "zod"
+
+export async function preFlightBuild(
+  options: z.infer<typeof buildOptionsSchema>
+) {
+  const errors: Record<string, boolean> = {}
+
+  const resolvePaths = {
+    cwd: options.cwd,
+    registryFile: path.resolve(options.cwd, options.registryFile),
+    outputDir: path.resolve(options.cwd, options.outputDir),
+  }
+
+  // Ensure registry file exists.
+  if (!fs.existsSync(resolvePaths.registryFile)) {
+    errors[ERRORS.BUILD_MISSING_REGISTRY_FILE] = true
+  }
+
+  // Create output directory if it doesn't exist.
+  await fs.mkdir(resolvePaths.outputDir, { recursive: true })
+
+  if (Object.keys(errors).length > 0) {
+    if (errors[ERRORS.BUILD_MISSING_REGISTRY_FILE]) {
+      logger.break()
+      logger.error(
+        `The path ${highlighter.info(
+          resolvePaths.registryFile
+        )} does not exist.`
+      )
+    }
+
+    logger.break()
+    process.exit(1)
+  }
+
+  return {
+    errors,
+    resolvePaths,
+  }
+}
diff --git a/packages/shadcn/src/preflights/preflight-init.ts b/packages/shadcn/src/preflights/preflight-init.ts
index a0742c03afc..11a51f00545 100644
--- a/packages/shadcn/src/preflights/preflight-init.ts
+++ b/packages/shadcn/src/preflights/preflight-init.ts
@@ -78,10 +78,30 @@ export async function preFlightInit(
     )}.`
   )
 
-  const tailwindSpinner = spinner(`Validating Tailwind CSS.`, {
+  let tailwindSpinnerMessage = "Validating Tailwind CSS."
+
+  if (projectInfo.tailwindVersion === "v4") {
+    tailwindSpinnerMessage = `Validating Tailwind CSS config. Found ${highlighter.info(
+      "v4"
+    )}.`
+  }
+
+  const tailwindSpinner = spinner(tailwindSpinnerMessage, {
     silent: options.silent,
   }).start()
-  if (!projectInfo?.tailwindConfigFile || !projectInfo?.tailwindCssFile) {
+  if (
+    projectInfo.tailwindVersion === "v3" &&
+    (!projectInfo?.tailwindConfigFile || !projectInfo?.tailwindCssFile)
+  ) {
+    errors[ERRORS.TAILWIND_NOT_CONFIGURED] = true
+    tailwindSpinner?.fail()
+  } else if (
+    projectInfo.tailwindVersion === "v4" &&
+    !projectInfo?.tailwindCssFile
+  ) {
+    errors[ERRORS.TAILWIND_NOT_CONFIGURED] = true
+    tailwindSpinner?.fail()
+  } else if (!projectInfo.tailwindVersion) {
     errors[ERRORS.TAILWIND_NOT_CONFIGURED] = true
     tailwindSpinner?.fail()
   } else {
diff --git a/packages/shadcn/src/preflights/preflight-migrate.ts b/packages/shadcn/src/preflights/preflight-migrate.ts
new file mode 100644
index 00000000000..8c5f647155c
--- /dev/null
+++ b/packages/shadcn/src/preflights/preflight-migrate.ts
@@ -0,0 +1,64 @@
+import path from "path"
+import { addOptionsSchema } from "@/src/commands/add"
+import { migrateOptionsSchema } from "@/src/commands/migrate"
+import * as ERRORS from "@/src/utils/errors"
+import { getConfig } from "@/src/utils/get-config"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+import fs from "fs-extra"
+import { z } from "zod"
+
+export async function preFlightMigrate(
+  options: z.infer<typeof migrateOptionsSchema>
+) {
+  const errors: Record<string, boolean> = {}
+
+  // Ensure target directory exists.
+  // Check for empty project. We assume if no package.json exists, the project is empty.
+  if (
+    !fs.existsSync(options.cwd) ||
+    !fs.existsSync(path.resolve(options.cwd, "package.json"))
+  ) {
+    errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true
+    return {
+      errors,
+      config: null,
+    }
+  }
+
+  // Check for existing components.json file.
+  if (!fs.existsSync(path.resolve(options.cwd, "components.json"))) {
+    errors[ERRORS.MISSING_CONFIG] = true
+    return {
+      errors,
+      config: null,
+    }
+  }
+
+  try {
+    const config = await getConfig(options.cwd)
+
+    return {
+      errors,
+      config: config!,
+    }
+  } catch (error) {
+    logger.break()
+    logger.error(
+      `An invalid ${highlighter.info(
+        "components.json"
+      )} file was found at ${highlighter.info(
+        options.cwd
+      )}.\nBefore you can run a migration, you must create a valid ${highlighter.info(
+        "components.json"
+      )} file by running the ${highlighter.info("init")} command.`
+    )
+    logger.error(
+      `Learn more at ${highlighter.info(
+        "https://ui.shadcn.com/docs/components-json"
+      )}.`
+    )
+    logger.break()
+    process.exit(1)
+  }
+}
diff --git a/packages/shadcn/src/preflights/preflight-registry.ts b/packages/shadcn/src/preflights/preflight-registry.ts
new file mode 100644
index 00000000000..721910a198d
--- /dev/null
+++ b/packages/shadcn/src/preflights/preflight-registry.ts
@@ -0,0 +1,66 @@
+import path from "path"
+import { buildOptionsSchema } from "@/src/commands/build"
+import * as ERRORS from "@/src/utils/errors"
+import { getConfig } from "@/src/utils/get-config"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+import fs from "fs-extra"
+import { z } from "zod"
+
+export async function preFlightRegistryBuild(
+  options: z.infer<typeof buildOptionsSchema>
+) {
+  const errors: Record<string, boolean> = {}
+
+  const resolvePaths = {
+    cwd: options.cwd,
+    registryFile: path.resolve(options.cwd, options.registryFile),
+    outputDir: path.resolve(options.cwd, options.outputDir),
+  }
+
+  // Ensure registry file exists.
+  if (!fs.existsSync(resolvePaths.registryFile)) {
+    errors[ERRORS.BUILD_MISSING_REGISTRY_FILE] = true
+    return {
+      errors,
+      resolvePaths: null,
+      config: null,
+    }
+  }
+
+  // Check for existing components.json file.
+  if (!fs.existsSync(path.resolve(options.cwd, "components.json"))) {
+    errors[ERRORS.MISSING_CONFIG] = true
+    return {
+      errors,
+      resolvePaths: null,
+      config: null,
+    }
+  }
+
+  // Create output directory if it doesn't exist.
+  await fs.mkdir(resolvePaths.outputDir, { recursive: true })
+
+  try {
+    const config = await getConfig(options.cwd)
+
+    return {
+      errors,
+      config: config!,
+      resolvePaths,
+    }
+  } catch (error) {
+    logger.break()
+    logger.error(
+      `An invalid ${highlighter.info(
+        "components.json"
+      )} file was found at ${highlighter.info(
+        options.cwd
+      )}.\nBefore you can build the registry, you must create a valid ${highlighter.info(
+        "components.json"
+      )} file by running the ${highlighter.info("init")} command.`
+    )
+    logger.break()
+    process.exit(1)
+  }
+}
diff --git a/packages/shadcn/src/registry/api.test.ts b/packages/shadcn/src/registry/api.test.ts
new file mode 100644
index 00000000000..446ae9e55ac
--- /dev/null
+++ b/packages/shadcn/src/registry/api.test.ts
@@ -0,0 +1,1737 @@
+import { promises as fs } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import { BUILTIN_REGISTRIES, REGISTRY_URL } from "@/src/registry/constants"
+import {
+  ConfigParseError,
+  RegistryErrorCode,
+  RegistryFetchError,
+  RegistryForbiddenError,
+  RegistryInvalidNamespaceError,
+  RegistryLocalFileError,
+  RegistryNotConfiguredError,
+  RegistryNotFoundError,
+  RegistryParseError,
+  RegistryUnauthorizedError,
+} from "@/src/registry/errors"
+import { HttpResponse, http } from "msw"
+import { setupServer } from "msw/node"
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest"
+import { z } from "zod"
+
+import {
+  getRegistriesConfig,
+  getRegistriesIndex,
+  getRegistry,
+  getRegistryItems,
+} from "./api"
+import { RegistriesIndexParseError } from "./errors"
+
+vi.mock("@/src/utils/handle-error", () => ({
+  handleError: vi.fn(),
+}))
+
+vi.mock("@/src/utils/logger", () => ({
+  logger: {
+    error: vi.fn(),
+    break: vi.fn(),
+    log: vi.fn(),
+  },
+}))
+
+const server = setupServer(
+  http.get(`${REGISTRY_URL}/index.json`, () => {
+    return HttpResponse.json([
+      {
+        name: "button",
+        type: "registry:ui",
+      },
+      {
+        name: "card",
+        type: "registry:ui",
+      },
+    ])
+  }),
+  http.get(`${REGISTRY_URL}/styles/new-york/button.json`, () => {
+    return HttpResponse.json({
+      name: "button",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-slot"],
+      files: [
+        {
+          path: "registry/new-york/ui/button.tsx",
+          content: "// button component content",
+          type: "registry:ui",
+        },
+      ],
+    })
+  }),
+
+  http.get(`${REGISTRY_URL}/styles/new-york-v4/button.json`, () => {
+    return HttpResponse.json({
+      name: "button",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-slot"],
+      files: [
+        {
+          path: "registry/new-york/ui/button.tsx",
+          content: "// button component content v4",
+          type: "registry:ui",
+        },
+      ],
+    })
+  }),
+  http.get(`${REGISTRY_URL}/styles/new-york/card.json`, () => {
+    return HttpResponse.json({
+      name: "card",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-slot"],
+      files: [
+        {
+          path: "registry/new-york/ui/card.tsx",
+          content: "// card component content",
+          type: "registry:ui",
+        },
+      ],
+    })
+  }),
+  http.get(`${REGISTRY_URL}/registries.json`, () => {
+    return HttpResponse.json({
+      "@shadcn": "https://ui.shadcn.com/r/styles/{style}/{name}.json",
+      "@example": "https://example.com/registry/styles/{style}/{name}.json",
+      "@test": "https://test.com/registry/{name}.json",
+    })
+  })
+)
+
+beforeAll(() => server.listen())
+afterEach(() => {
+  server.resetHandlers()
+})
+afterAll(() => server.close())
+
+describe("getRegistryItem", () => {
+  it("should read and parse a valid local JSON file", async () => {
+    // Create a temporary file
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const tempFile = path.join(tempDir, "test-component.json")
+
+    const componentData = {
+      name: "test-component",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-dialog"],
+      files: [
+        {
+          path: "ui/test-component.tsx",
+          content: "// test component content",
+          type: "registry:ui",
+        },
+      ],
+    }
+
+    await fs.writeFile(tempFile, JSON.stringify(componentData, null, 2))
+
+    try {
+      const [result] = await getRegistryItems([tempFile])
+
+      expect(result).toMatchObject({
+        name: "test-component",
+        type: "registry:ui",
+        dependencies: ["@radix-ui/react-dialog"],
+        files: [
+          {
+            path: "ui/test-component.tsx",
+            content: "// test component content",
+            type: "registry:ui",
+          },
+        ],
+      })
+    } finally {
+      // Clean up
+      await fs.unlink(tempFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should handle relative paths", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const tempFile = path.join(tempDir, "relative-component.json")
+
+    const componentData = {
+      name: "relative-component",
+      type: "registry:ui",
+      files: [],
+    }
+
+    await fs.writeFile(tempFile, JSON.stringify(componentData))
+
+    try {
+      // Change to temp directory to test relative path
+      const originalCwd = process.cwd()
+      process.chdir(tempDir)
+
+      const [result] = await getRegistryItems(["./relative-component.json"])
+
+      expect(result).toMatchObject({
+        name: "relative-component",
+        type: "registry:ui",
+      })
+
+      process.chdir(originalCwd)
+    } finally {
+      // Clean up
+      await fs.unlink(tempFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should handle tilde (~) home directory paths", async () => {
+    const os = await import("os")
+    const homeDir = os.homedir()
+    const tempFile = path.join(homeDir, "shadcn-test-tilde.json")
+
+    const componentData = {
+      name: "tilde-component",
+      type: "registry:ui",
+      files: [],
+    }
+
+    await fs.writeFile(tempFile, JSON.stringify(componentData))
+
+    try {
+      // Test with tilde path
+      const tildeePath = "~/shadcn-test-tilde.json"
+      const [result] = await getRegistryItems([tildeePath])
+
+      expect(result).toMatchObject({
+        name: "tilde-component",
+        type: "registry:ui",
+      })
+    } finally {
+      // Clean up
+      await fs.unlink(tempFile)
+    }
+  })
+
+  it("should throw error for non-existent files", async () => {
+    await expect(getRegistryItems(["/non/existent/file.json"])).rejects.toThrow(
+      RegistryLocalFileError
+    )
+  })
+
+  it("should throw error for invalid JSON", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const tempFile = path.join(tempDir, "invalid.json")
+
+    await fs.writeFile(tempFile, "{ invalid json }")
+
+    try {
+      await expect(getRegistryItems([tempFile])).rejects.toThrow()
+    } finally {
+      // Clean up
+      await fs.unlink(tempFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should throw error for JSON that doesn't match registry schema", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const tempFile = path.join(tempDir, "invalid-schema.json")
+
+    const invalidData = {
+      notAValidRegistryItem: true,
+      missing: "required fields",
+    }
+
+    await fs.writeFile(tempFile, JSON.stringify(invalidData))
+
+    try {
+      await expect(getRegistryItems([tempFile])).rejects.toThrow(
+        RegistryParseError
+      )
+    } finally {
+      // Clean up
+      await fs.unlink(tempFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should still handle URLs and component names", async () => {
+    // Test that existing functionality still works
+    const [result] = await getRegistryItems(["button"])
+    expect(result).toMatchObject({
+      name: "button",
+      type: "registry:ui",
+    })
+  })
+
+  it("should fetch items from direct URLs", async () => {
+    const itemUrl = "https://example.com/custom-button.json"
+
+    server.use(
+      http.get(itemUrl, () => {
+        return HttpResponse.json({
+          name: "custom-button",
+          type: "registry:ui",
+          files: [
+            {
+              path: "ui/custom-button.tsx",
+              content: "// custom button content",
+              type: "registry:ui",
+            },
+          ],
+        })
+      })
+    )
+
+    const [result] = await getRegistryItems([itemUrl])
+    expect(result).toMatchObject({
+      name: "custom-button",
+      type: "registry:ui",
+      files: [
+        {
+          path: "ui/custom-button.tsx",
+          content: "// custom button content",
+          type: "registry:ui",
+        },
+      ],
+    })
+  })
+
+  it("should handle mixed inputs (URLs, local files, and registry names)", async () => {
+    const itemUrl = "https://example.com/url-item.json"
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const localFile = path.join(tempDir, "local-item.json")
+
+    // Setup URL mock
+    server.use(
+      http.get(itemUrl, () => {
+        return HttpResponse.json({
+          name: "url-item",
+          type: "registry:ui",
+          files: [],
+        })
+      })
+    )
+
+    // Setup local file
+    await fs.writeFile(
+      localFile,
+      JSON.stringify({
+        name: "local-item",
+        type: "registry:ui",
+        files: [],
+      })
+    )
+
+    try {
+      // Fetch mixed: URL, local file, and registry name
+      const results = await getRegistryItems([itemUrl, localFile, "button"])
+
+      expect(results).toHaveLength(3)
+      expect(results[0].name).toBe("url-item")
+      expect(results[1].name).toBe("local-item")
+      expect(results[2].name).toBe("button")
+    } finally {
+      await fs.unlink(localFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should handle local files with URL dependencies", async () => {
+    // Mock a URL endpoint for dependency
+    const dependencyUrl = "https://example.com/dependency.json"
+    server.use(
+      http.get(dependencyUrl, () => {
+        return HttpResponse.json({
+          name: "url-dependency",
+          type: "registry:ui",
+          files: [
+            {
+              path: "ui/url-dependency.tsx",
+              content: "// url dependency content",
+              type: "registry:ui",
+            },
+          ],
+        })
+      })
+    )
+
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const tempFile = path.join(tempDir, "component-with-url-deps.json")
+
+    const componentData = {
+      name: "component-with-url-deps",
+      type: "registry:ui",
+      registryDependencies: [dependencyUrl, "button"], // Mix of URL and registry name
+      files: [
+        {
+          path: "ui/component-with-url-deps.tsx",
+          content: "// component with url deps content",
+          type: "registry:ui",
+        },
+      ],
+    }
+
+    await fs.writeFile(tempFile, JSON.stringify(componentData, null, 2))
+
+    try {
+      const [result] = await getRegistryItems([tempFile])
+
+      expect(result).toMatchObject({
+        name: "component-with-url-deps",
+        type: "registry:ui",
+        registryDependencies: [dependencyUrl, "button"],
+      })
+    } finally {
+      // Clean up
+      await fs.unlink(tempFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should include error code in RegistryNotFoundError", async () => {
+    server.use(
+      http.get(`${REGISTRY_URL}/styles/new-york-v4/non-existent.json`, () => {
+        return HttpResponse.json({ error: "Not found" }, { status: 404 })
+      })
+    )
+
+    try {
+      await getRegistryItems(["non-existent"])
+    } catch (error) {
+      expect(error).toBeInstanceOf(RegistryNotFoundError)
+      if (error instanceof RegistryNotFoundError) {
+        expect(error.code).toBe(RegistryErrorCode.NOT_FOUND)
+        expect(error.statusCode).toBe(404)
+        expect(error.suggestion).toContain("Check if the item name is correct")
+        expect(error.url).toContain("non-existent.json")
+      }
+    }
+  })
+
+  it("should include error code in RegistryUnauthorizedError", async () => {
+    server.use(
+      http.get(`${REGISTRY_URL}/styles/new-york-v4/protected.json`, () => {
+        return HttpResponse.json({ error: "Unauthorized" }, { status: 401 })
+      })
+    )
+
+    try {
+      await getRegistryItems(["protected"])
+    } catch (error) {
+      expect(error).toBeInstanceOf(RegistryUnauthorizedError)
+      if (error instanceof RegistryUnauthorizedError) {
+        expect(error.code).toBe(RegistryErrorCode.UNAUTHORIZED)
+        expect(error.statusCode).toBe(401)
+        expect(error.suggestion).toContain(
+          "Check your authentication credentials"
+        )
+        expect(error.url).toContain("protected.json")
+      }
+    }
+  })
+
+  it("should include error code in RegistryForbiddenError", async () => {
+    server.use(
+      http.get(`${REGISTRY_URL}/styles/new-york-v4/forbidden.json`, () => {
+        return HttpResponse.json({ error: "Forbidden" }, { status: 403 })
+      })
+    )
+
+    try {
+      await getRegistryItems(["forbidden"])
+    } catch (error) {
+      expect(error).toBeInstanceOf(RegistryForbiddenError)
+      if (error instanceof RegistryForbiddenError) {
+        expect(error.code).toBe(RegistryErrorCode.FORBIDDEN)
+        expect(error.statusCode).toBe(403)
+        expect(error.suggestion).toContain(
+          "Check your authentication credentials"
+        )
+        expect(error.url).toContain("forbidden.json")
+      }
+    }
+  })
+
+  it("should include error code in RegistryFetchError for 500 errors", async () => {
+    server.use(
+      http.get(`${REGISTRY_URL}/styles/new-york-v4/server-error.json`, () => {
+        return HttpResponse.json(
+          { error: "Internal Server Error" },
+          { status: 500 }
+        )
+      })
+    )
+
+    try {
+      await getRegistryItems(["server-error"])
+    } catch (error) {
+      expect(error).toBeInstanceOf(RegistryFetchError)
+      if (error instanceof RegistryFetchError) {
+        expect(error.code).toBe(RegistryErrorCode.FETCH_ERROR)
+        expect(error.statusCode).toBe(500)
+        expect(error.suggestion).toContain(
+          "The registry server encountered an error"
+        )
+        expect(error.url).toContain("server-error.json")
+      }
+    }
+  })
+
+  it("should extract Zod validation issues in RegistryParseError", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const tempFile = path.join(tempDir, "invalid-schema.json")
+
+    const invalidData = {
+      name: "test",
+      // Missing required "type" field
+      // Invalid "files" field (should be array)
+      files: "not-an-array",
+    }
+
+    await fs.writeFile(tempFile, JSON.stringify(invalidData))
+
+    try {
+      await getRegistryItems([tempFile])
+    } catch (error) {
+      expect(error).toBeInstanceOf(RegistryParseError)
+      if (error instanceof RegistryParseError) {
+        expect(error.code).toBe(RegistryErrorCode.PARSE_ERROR)
+        expect(error.message).toContain("Failed to parse registry item")
+        expect(error.message).toContain(tempFile)
+        // The message should include Zod validation issues
+        expect(error.suggestion).toContain(
+          "may be corrupted or have an invalid format"
+        )
+        expect(error.context?.item).toBe(tempFile)
+      }
+    } finally {
+      await fs.unlink(tempFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should include context in RegistryLocalFileError", async () => {
+    const nonExistentFile = "/path/to/non/existent/file.json"
+
+    try {
+      await getRegistryItems([nonExistentFile])
+    } catch (error) {
+      expect(error).toBeInstanceOf(RegistryLocalFileError)
+      if (error instanceof RegistryLocalFileError) {
+        expect(error.code).toBe(RegistryErrorCode.LOCAL_FILE_ERROR)
+        expect(error.filePath).toBe(nonExistentFile)
+        expect(error.suggestion).toContain("Check if the file exists")
+        expect(error.context?.filePath).toBe(nonExistentFile)
+      }
+    }
+  })
+
+  it("should serialize error to JSON correctly", async () => {
+    server.use(
+      http.get(`${REGISTRY_URL}/styles/new-york-v4/test-json.json`, () => {
+        return HttpResponse.json({ error: "Not found" }, { status: 404 })
+      })
+    )
+
+    try {
+      await getRegistryItems(["test-json"])
+    } catch (error) {
+      if (error instanceof RegistryNotFoundError) {
+        const json = error.toJSON()
+        expect(json).toHaveProperty("name", "RegistryNotFoundError")
+        expect(json).toHaveProperty("message")
+        expect(json).toHaveProperty("code", RegistryErrorCode.NOT_FOUND)
+        expect(json).toHaveProperty("statusCode", 404)
+        expect(json).toHaveProperty("context")
+        expect(json).toHaveProperty("suggestion")
+        expect(json).toHaveProperty("timestamp")
+        expect(json).toHaveProperty("stack")
+      }
+    }
+  })
+
+  it("should include timestamp in errors", async () => {
+    server.use(
+      http.get(`${REGISTRY_URL}/styles/new-york-v4/timestamp-test.json`, () => {
+        return HttpResponse.json({ error: "Not found" }, { status: 404 })
+      })
+    )
+
+    try {
+      await getRegistryItems(["timestamp-test"])
+    } catch (error) {
+      if (error instanceof RegistryNotFoundError) {
+        expect(error.timestamp).toBeInstanceOf(Date)
+        expect(error.timestamp.getTime()).toBeLessThanOrEqual(Date.now())
+      }
+    }
+  })
+
+  it("should handle multiple validation errors in RegistryParseError", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const tempFile = path.join(tempDir, "multiple-errors.json")
+
+    const invalidData = {
+      // Missing name and type
+      files: 123, // Should be array
+      dependencies: "not-an-array", // Should be array
+    }
+
+    await fs.writeFile(tempFile, JSON.stringify(invalidData))
+
+    try {
+      await getRegistryItems([tempFile])
+    } catch (error) {
+      expect(error).toBeInstanceOf(RegistryParseError)
+      if (error instanceof RegistryParseError) {
+        // The error message should contain multiple validation issues
+        expect(error.message).toContain("Failed to parse registry item")
+        // Check that context contains validation issues
+        if (error.context && "validationIssues" in error.context) {
+          const issues = error.context.validationIssues as Array<{
+            path: string
+            message: string
+          }>
+          expect(Array.isArray(issues)).toBe(true)
+        }
+      }
+    } finally {
+      await fs.unlink(tempFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should include response body in RegistryFetchError", async () => {
+    const errorResponse = {
+      error: "Bad Request",
+      details: "Invalid parameters",
+    }
+    server.use(
+      http.get(`${REGISTRY_URL}/styles/new-york-v4/bad-request.json`, () => {
+        return HttpResponse.json(errorResponse, { status: 400 })
+      })
+    )
+
+    try {
+      await getRegistryItems(["bad-request"])
+    } catch (error) {
+      expect(error).toBeInstanceOf(RegistryFetchError)
+      if (error instanceof RegistryFetchError) {
+        expect(error.code).toBe(RegistryErrorCode.FETCH_ERROR)
+        expect(error.statusCode).toBe(400)
+        expect(error.suggestion).toContain("client error")
+        // Response body should be available as context
+        expect(error.responseBody).toBeDefined()
+      }
+    }
+  })
+})
+
+describe("getRegistry", () => {
+  it("should fetch registry catalog", async () => {
+    const registryData = {
+      name: "@acme/registry",
+      homepage: "https://acme.com",
+      items: [
+        { name: "button", type: "registry:ui" },
+        { name: "card", type: "registry:ui" },
+      ],
+    }
+
+    server.use(
+      http.get("https://acme.com/registry.json", () => {
+        return HttpResponse.json(registryData)
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@acme": {
+          url: "https://acme.com/{name}.json",
+        },
+      },
+    } as any
+
+    const result = await getRegistry("@acme", { config: mockConfig })
+
+    expect(result).toMatchObject({
+      name: "@acme/registry",
+      homepage: "https://acme.com",
+      items: [
+        { name: "button", type: "registry:ui" },
+        { name: "card", type: "registry:ui" },
+      ],
+    })
+  })
+
+  it("should auto-append /registry to registry name", async () => {
+    const registryData = {
+      name: "@acme/registry",
+      homepage: "https://acme.com",
+      items: [],
+    }
+
+    server.use(
+      http.get("https://acme.com/registry.json", () => {
+        return HttpResponse.json(registryData)
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@acme": {
+          url: "https://acme.com/{name}.json",
+        },
+      },
+    } as any
+
+    // Test both with and without /registry suffix
+    const result1 = await getRegistry("@acme", { config: mockConfig })
+    expect(result1.name).toBe("@acme/registry")
+
+    const result2 = await getRegistry("@acme/registry", { config: mockConfig })
+    expect(result2.name).toBe("@acme/registry")
+  })
+
+  it("should handle registry with auth headers", async () => {
+    const registryData = {
+      name: "@private/registry",
+      homepage: "https://private.com",
+      items: [{ name: "secure-component", type: "registry:ui" }],
+    }
+
+    let receivedHeaders: Record<string, string> = {}
+    server.use(
+      http.get("https://private.com/registry.json", ({ request }) => {
+        // Convert headers to a plain object
+        request.headers.forEach((value, key) => {
+          receivedHeaders[key] = value
+        })
+        return HttpResponse.json(registryData)
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@private": {
+          url: "https://private.com/{name}.json",
+          headers: {
+            Authorization: "Bearer test-token",
+          },
+        },
+      },
+    } as any
+
+    const result = await getRegistry("@private", { config: mockConfig })
+
+    expect(result).toMatchObject({
+      name: "@private/registry",
+      homepage: "https://private.com",
+      items: [{ name: "secure-component", type: "registry:ui" }],
+    })
+
+    expect(receivedHeaders.authorization).toBe("Bearer test-token")
+  })
+
+  it("should throw RegistryNotConfiguredError when registry is not configured", async () => {
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {},
+    } as any
+
+    await expect(
+      getRegistry("@unknown", { config: mockConfig })
+    ).rejects.toThrow(RegistryNotConfiguredError)
+  })
+
+  it("should throw RegistryParseError on invalid registry data", async () => {
+    server.use(
+      http.get("https://invalid.com/registry.json", () => {
+        return HttpResponse.json({
+          // Invalid registry data - missing required fields
+          invalid: "data",
+        })
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@invalid": {
+          url: "https://invalid.com/{name}.json",
+        },
+      },
+    } as any
+
+    await expect(
+      getRegistry("@invalid", { config: mockConfig })
+    ).rejects.toThrow(RegistryParseError)
+  })
+
+  it("should throw RegistryFetchError on network error", async () => {
+    server.use(
+      http.get("https://error.com/registry.json", () => {
+        return HttpResponse.json({ error: "Server Error" }, { status: 500 })
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@error": {
+          url: "https://error.com/{name}.json",
+        },
+      },
+    } as any
+
+    await expect(getRegistry("@error", { config: mockConfig })).rejects.toThrow(
+      RegistryFetchError
+    )
+  })
+
+  it("should throw RegistryNotConfiguredError when registry is not in config", async () => {
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+    } as any
+
+    await expect(
+      getRegistry("@nonexistent", { config: mockConfig })
+    ).rejects.toThrow(RegistryNotConfiguredError)
+  })
+
+  it("should handle registry with no items gracefully", async () => {
+    const registryData = {
+      name: "@empty/registry",
+      homepage: "https://empty.com",
+      items: [],
+    }
+
+    server.use(
+      http.get("https://empty.com/registry.json", () => {
+        return HttpResponse.json(registryData)
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@empty": {
+          url: "https://empty.com/{name}.json",
+        },
+      },
+    } as any
+
+    const result = await getRegistry("@empty", { config: mockConfig })
+    expect(result).toMatchObject(registryData)
+    expect(result.items).toHaveLength(0)
+  })
+
+  it("should handle 404 error from registry endpoint", async () => {
+    server.use(
+      http.get("https://notfound.com/registry.json", () => {
+        return HttpResponse.json({ error: "Not Found" }, { status: 404 })
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@notfound": {
+          url: "https://notfound.com/{name}.json",
+        },
+      },
+    } as any
+
+    await expect(
+      getRegistry("@notfound", { config: mockConfig })
+    ).rejects.toThrow(RegistryNotFoundError)
+  })
+
+  it("should handle 401 error from registry endpoint", async () => {
+    server.use(
+      http.get("https://unauthorized.com/registry.json", () => {
+        return HttpResponse.json({ error: "Unauthorized" }, { status: 401 })
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@unauthorized": {
+          url: "https://unauthorized.com/{name}.json",
+        },
+      },
+    } as any
+
+    await expect(
+      getRegistry("@unauthorized", { config: mockConfig })
+    ).rejects.toThrow(RegistryUnauthorizedError)
+  })
+
+  it("should handle 403 error from registry endpoint", async () => {
+    server.use(
+      http.get("https://forbidden.com/registry.json", () => {
+        return HttpResponse.json({ error: "Forbidden" }, { status: 403 })
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@forbidden": {
+          url: "https://forbidden.com/{name}.json",
+        },
+      },
+    } as any
+
+    await expect(
+      getRegistry("@forbidden", { config: mockConfig })
+    ).rejects.toThrow(RegistryForbiddenError)
+  })
+
+  it("should set headers in context when provided", async () => {
+    const registryData = {
+      name: "@headers-test/registry",
+      homepage: "https://headers.com",
+      items: [],
+    }
+
+    let receivedHeaders: Record<string, string> = {}
+    server.use(
+      http.get("https://headers.com/registry.json", ({ request }) => {
+        request.headers.forEach((value, key) => {
+          receivedHeaders[key] = value
+        })
+        return HttpResponse.json(registryData)
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@headers-test": {
+          url: "https://headers.com/{name}.json",
+          headers: {
+            "X-Custom-Header": "test-value",
+            Authorization: "Bearer test-token",
+          },
+        },
+      },
+    } as any
+
+    await getRegistry("@headers-test", { config: mockConfig })
+
+    expect(receivedHeaders["x-custom-header"]).toBe("test-value")
+    expect(receivedHeaders.authorization).toBe("Bearer test-token")
+  })
+
+  it("should not set headers in context when none provided", async () => {
+    const registryData = {
+      name: "@no-headers/registry",
+      homepage: "https://noheaders.com",
+      items: [],
+    }
+
+    server.use(
+      http.get("https://noheaders.com/registry.json", () => {
+        return HttpResponse.json(registryData)
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@no-headers": {
+          url: "https://noheaders.com/{name}.json",
+        },
+      },
+    } as any
+
+    const result = await getRegistry("@no-headers", { config: mockConfig })
+    expect(result).toMatchObject(registryData)
+  })
+
+  it("should handle registry items with slashes", async () => {
+    const registryData = {
+      name: "@acme/registry",
+      homepage: "https://acme.com",
+      items: [],
+    }
+
+    server.use(
+      http.get("https://acme.com/sub/registry.json", () => {
+        return HttpResponse.json(registryData)
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@acme": {
+          url: "https://acme.com/{name}.json",
+        },
+      },
+    } as any
+
+    const result = await getRegistry("@acme/sub", { config: mockConfig })
+    expect(result).toMatchObject(registryData)
+  })
+
+  it("should use configWithDefaults to fill missing config values", async () => {
+    const registryData = {
+      name: "@defaults/registry",
+      homepage: "https://defaults.com",
+      items: [],
+    }
+
+    server.use(
+      http.get("https://defaults.com/registry.json", () => {
+        return HttpResponse.json(registryData)
+      })
+    )
+
+    const minimalConfig = {
+      registries: {
+        "@defaults": {
+          url: "https://defaults.com/{name}.json",
+        },
+      },
+    } as any
+
+    const result = await getRegistry("@defaults", { config: minimalConfig })
+    expect(result).toMatchObject(registryData)
+  })
+
+  it("should handle malformed JSON response", async () => {
+    server.use(
+      http.get("https://malformed.com/registry.json", () => {
+        return new Response("{ malformed json }", {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        })
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@malformed": {
+          url: "https://malformed.com/{name}.json",
+        },
+      },
+    } as any
+
+    await expect(
+      getRegistry("@malformed", { config: mockConfig })
+    ).rejects.toThrow()
+  })
+
+  it("should throw RegistryParseError with proper context", async () => {
+    const invalidData = {
+      homepage: "https://invalid.com",
+      items: "not-an-array",
+    }
+
+    server.use(
+      http.get("https://parsetest.com/registry.json", () => {
+        return HttpResponse.json(invalidData)
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@parsetest": {
+          url: "https://parsetest.com/{name}.json",
+        },
+      },
+    } as any
+
+    try {
+      await getRegistry("@parsetest/registry", { config: mockConfig })
+      expect.fail("Should have thrown RegistryParseError")
+    } catch (error) {
+      expect(error).toBeInstanceOf(RegistryParseError)
+      if (error instanceof RegistryParseError) {
+        expect(error.message).toContain("Failed to parse registry")
+        expect(error.message).toContain("@parsetest/registry")
+        expect(error.context?.item).toBe("@parsetest/registry")
+        expect(error.parseError).toBeDefined()
+        if (error.parseError instanceof z.ZodError) {
+          expect(error.parseError.errors.length).toBeGreaterThan(0)
+        }
+      }
+    }
+  })
+
+  it("should throw RegistryInvalidNamespaceError for registry name without @ prefix", async () => {
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {},
+    } as any
+
+    await expect(
+      getRegistry("invalid-name", { config: mockConfig })
+    ).rejects.toThrow(RegistryInvalidNamespaceError)
+  })
+
+  it("should accept valid registry names with hyphens and underscores", async () => {
+    const registryData = {
+      name: "@test-123_abc/registry",
+      homepage: "https://test.com",
+      items: [],
+    }
+
+    server.use(
+      http.get("https://test.com/registry.json", () => {
+        return HttpResponse.json(registryData)
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@test-123_abc": {
+          url: "https://test.com/{name}.json",
+        },
+      },
+    } as any
+
+    const result = await getRegistry("@test-123_abc", { config: mockConfig })
+    expect(result).toMatchObject(registryData)
+  })
+
+  // Tests for URL support
+  it("should fetch registry from a direct URL", async () => {
+    const registryUrl = "https://example.com/custom-registry.json"
+
+    server.use(
+      http.get(registryUrl, () => {
+        return HttpResponse.json({
+          name: "custom-registry",
+          homepage: "https://example.com",
+          items: [
+            { name: "button", type: "registry:ui" },
+            { name: "card", type: "registry:ui" },
+          ],
+        })
+      })
+    )
+
+    const result = await getRegistry(registryUrl)
+    expect(result).toMatchObject({
+      name: "custom-registry",
+      homepage: "https://example.com",
+      items: [
+        { name: "button", type: "registry:ui" },
+        { name: "card", type: "registry:ui" },
+      ],
+    })
+  })
+
+  it("should handle malformed URL gracefully", async () => {
+    const badUrl = "not-a-valid-url"
+
+    // Should throw RegistryInvalidNamespaceError for non-@ and non-URL strings
+    await expect(getRegistry(badUrl)).rejects.toThrow(
+      RegistryInvalidNamespaceError
+    )
+  })
+
+  it("should distinguish between URL and registry name", async () => {
+    // Test that it correctly identifies and handles a URL vs registry name
+    const registryName = "@shadcn"
+    const registryUrl = "https://ui.shadcn.com/registry.json"
+
+    // Mock for URL
+    server.use(
+      http.get(registryUrl, () => {
+        return HttpResponse.json({
+          name: "shadcn-from-url",
+          homepage: "https://ui.shadcn.com",
+          items: [],
+        })
+      })
+    )
+
+    const mockConfig = {
+      style: "new-york",
+      tailwind: { baseColor: "neutral", cssVariables: true },
+      registries: {
+        "@shadcn": {
+          url: "https://ui.shadcn.com/{name}.json",
+        },
+      },
+    } as any
+
+    // Fetch by URL should bypass registry config
+    const urlResult = await getRegistry(registryUrl)
+    expect(urlResult.name).toBe("shadcn-from-url")
+
+    // Fetch by registry name should use config
+    const nameResult = await getRegistry(registryName, { config: mockConfig })
+    expect(nameResult).toBeDefined()
+  })
+})
+
+describe("getRegistriesConfig", () => {
+  it("should return built-in registries when no components.json exists", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+
+    try {
+      const result = await getRegistriesConfig(tempDir)
+
+      expect(result).toEqual({
+        registries: BUILTIN_REGISTRIES,
+      })
+    } finally {
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should parse valid components.json with registries", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const configFile = path.join(tempDir, "components.json")
+
+    const config = {
+      style: "new-york",
+      tailwind: {
+        config: "./tailwind.config.ts",
+        css: "./src/app/globals.css",
+        baseColor: "neutral",
+        cssVariables: true,
+      },
+      registries: {
+        "@acme": "https://acme.com/{name}.json",
+        "@private": {
+          url: "https://private.com/{name}.json",
+          headers: {
+            Authorization: "Bearer token",
+          },
+        },
+      },
+    }
+
+    await fs.writeFile(configFile, JSON.stringify(config, null, 2))
+
+    try {
+      const result = await getRegistriesConfig(tempDir)
+
+      // The result includes both custom and built-in registries
+      expect(result.registries).toMatchObject({
+        "@acme": "https://acme.com/{name}.json",
+        "@private": {
+          url: "https://private.com/{name}.json",
+          headers: {
+            Authorization: "Bearer token",
+          },
+        },
+        "@shadcn": expect.any(String),
+      })
+    } finally {
+      await fs.unlink(configFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should throw ConfigParseError for invalid components.json", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const configFile = path.join(tempDir, "components.json")
+
+    const invalidConfig = {
+      style: "new-york",
+      registries: {
+        "@invalid": {
+          // Missing required 'url' field
+          headers: {
+            Authorization: "Bearer token",
+          },
+        },
+      },
+    }
+
+    await fs.writeFile(configFile, JSON.stringify(invalidConfig, null, 2))
+
+    try {
+      await getRegistriesConfig(tempDir)
+      expect.fail("Should have thrown ConfigParseError")
+    } catch (error) {
+      expect(error).toBeInstanceOf(ConfigParseError)
+      if (error instanceof ConfigParseError) {
+        expect(error.cwd).toBe(tempDir)
+        expect(error.message).toContain("Invalid components.json")
+      }
+    } finally {
+      await fs.unlink(configFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should handle components.json with no registries field", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const configFile = path.join(tempDir, "components.json")
+
+    const config = {
+      style: "new-york",
+      tailwind: {
+        config: "./tailwind.config.ts",
+        css: "./src/app/globals.css",
+        baseColor: "neutral",
+        cssVariables: true,
+      },
+      // No registries field
+    }
+
+    await fs.writeFile(configFile, JSON.stringify(config, null, 2))
+
+    try {
+      const result = await getRegistriesConfig(tempDir)
+
+      // When no registries are defined, built-in registries are still included
+      expect(result.registries).toEqual(BUILTIN_REGISTRIES)
+    } finally {
+      await fs.unlink(configFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should handle malformed JSON file", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const configFile = path.join(tempDir, "components.json")
+
+    await fs.writeFile(configFile, "{ invalid json }")
+
+    try {
+      // Malformed JSON should throw an error from cosmiconfig
+      await getRegistriesConfig(tempDir)
+      expect.fail("Should have thrown an error")
+    } catch (error) {
+      // cosmiconfig throws a JSONError for malformed JSON
+      expect((error as Error).message).toContain("JSON Error")
+    } finally {
+      await fs.unlink(configFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should include error details in ConfigParseError", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const configFile = path.join(tempDir, "components.json")
+
+    const invalidConfig = {
+      style: "new-york",
+      registries: {
+        "@invalid": {
+          url: 123, // Should be string
+        },
+      },
+    }
+
+    await fs.writeFile(configFile, JSON.stringify(invalidConfig, null, 2))
+
+    try {
+      await getRegistriesConfig(tempDir)
+      expect.fail("Should have thrown ConfigParseError")
+    } catch (error) {
+      expect(error).toBeInstanceOf(ConfigParseError)
+      if (error instanceof ConfigParseError) {
+        expect(error.cwd).toBe(tempDir)
+        expect(error.message).toContain("Invalid components.json")
+        expect(error.message).toContain(tempDir)
+        expect(error.code).toBe(RegistryErrorCode.INVALID_CONFIG)
+        expect(error.suggestion).toContain("Check your components.json")
+      }
+    } finally {
+      await fs.unlink(configFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  it("should handle complex registry configurations", async () => {
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const configFile = path.join(tempDir, "components.json")
+
+    const config = {
+      style: "new-york",
+      registries: {
+        "@shadcn": "https://ui.shadcn.com/r/styles/{style}/{name}.json",
+        "@acme": "https://acme.com/registry/{name}.json",
+        "@private": {
+          url: "https://private.registry.com/{name}.json",
+          headers: {
+            Authorization: "Bearer ${REGISTRY_TOKEN}",
+            "X-Custom-Header": "value",
+          },
+        },
+        "@local": "file:///local/registry/{name}.json",
+      },
+    }
+
+    await fs.writeFile(configFile, JSON.stringify(config, null, 2))
+
+    try {
+      const result = await getRegistriesConfig(tempDir)
+
+      expect(result.registries).toBeDefined()
+      expect(result.registries?.["@shadcn"]).toBe(
+        "https://ui.shadcn.com/r/styles/{style}/{name}.json"
+      )
+      expect(result.registries?.["@acme"]).toBe(
+        "https://acme.com/registry/{name}.json"
+      )
+      expect(result.registries?.["@private"]).toEqual({
+        url: "https://private.registry.com/{name}.json",
+        headers: {
+          Authorization: "Bearer ${REGISTRY_TOKEN}",
+          "X-Custom-Header": "value",
+        },
+      })
+      expect(result.registries?.["@local"]).toBe(
+        "file:///local/registry/{name}.json"
+      )
+    } finally {
+      await fs.unlink(configFile)
+      await fs.rmdir(tempDir)
+    }
+  })
+
+  describe("caching behavior", () => {
+    it("should use cache by default", async () => {
+      const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+      const configFile = path.join(tempDir, "components.json")
+
+      const initialConfig = {
+        style: "new-york",
+        registries: {
+          "@cached": "https://cached.com/{name}.json",
+        },
+      }
+
+      await fs.writeFile(configFile, JSON.stringify(initialConfig, null, 2))
+
+      try {
+        // First call - should read from file
+        const result1 = await getRegistriesConfig(tempDir)
+        expect(result1.registries?.["@cached"]).toBe(
+          "https://cached.com/{name}.json"
+        )
+
+        // Modify the file
+        const updatedConfig = {
+          style: "new-york",
+          registries: {
+            "@cached": "https://updated.com/{name}.json",
+          },
+        }
+        await fs.writeFile(configFile, JSON.stringify(updatedConfig, null, 2))
+
+        // Second call - should still return cached result (default behavior)
+        const result2 = await getRegistriesConfig(tempDir)
+        expect(result2.registries?.["@cached"]).toBe(
+          "https://cached.com/{name}.json"
+        )
+      } finally {
+        await fs.unlink(configFile)
+        await fs.rmdir(tempDir)
+      }
+    })
+
+    it("should use cache when explicitly enabled", async () => {
+      const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+      const configFile = path.join(tempDir, "components.json")
+
+      const initialConfig = {
+        style: "new-york",
+        registries: {
+          "@test": "https://test.com/{name}.json",
+        },
+      }
+
+      await fs.writeFile(configFile, JSON.stringify(initialConfig, null, 2))
+
+      try {
+        // First call with cache enabled
+        const result1 = await getRegistriesConfig(tempDir, { useCache: true })
+        expect(result1.registries?.["@test"]).toBe(
+          "https://test.com/{name}.json"
+        )
+
+        // Modify the file
+        const updatedConfig = {
+          style: "new-york",
+          registries: {
+            "@test": "https://modified.com/{name}.json",
+          },
+        }
+        await fs.writeFile(configFile, JSON.stringify(updatedConfig, null, 2))
+
+        // Second call with cache enabled - should return cached result
+        const result2 = await getRegistriesConfig(tempDir, { useCache: true })
+        expect(result2.registries?.["@test"]).toBe(
+          "https://test.com/{name}.json"
+        )
+      } finally {
+        await fs.unlink(configFile)
+        await fs.rmdir(tempDir)
+      }
+    })
+
+    it("should bypass cache when useCache is false", async () => {
+      const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+      const configFile = path.join(tempDir, "components.json")
+
+      const initialConfig = {
+        style: "new-york",
+        registries: {
+          "@nocache": "https://nocache.com/{name}.json",
+        },
+      }
+
+      await fs.writeFile(configFile, JSON.stringify(initialConfig, null, 2))
+
+      try {
+        // First call - should read from file
+        const result1 = await getRegistriesConfig(tempDir, { useCache: false })
+        expect(result1.registries?.["@nocache"]).toBe(
+          "https://nocache.com/{name}.json"
+        )
+
+        // Modify the file
+        const updatedConfig = {
+          style: "new-york",
+          registries: {
+            "@nocache": "https://fresh.com/{name}.json",
+          },
+        }
+        await fs.writeFile(configFile, JSON.stringify(updatedConfig, null, 2))
+
+        // Second call with cache disabled - should read fresh data
+        const result2 = await getRegistriesConfig(tempDir, { useCache: false })
+        expect(result2.registries?.["@nocache"]).toBe(
+          "https://fresh.com/{name}.json"
+        )
+      } finally {
+        await fs.unlink(configFile)
+        await fs.rmdir(tempDir)
+      }
+    })
+
+    it("should clear cache for subsequent calls when useCache is false", async () => {
+      const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+      const configFile = path.join(tempDir, "components.json")
+
+      const config1 = {
+        style: "new-york",
+        registries: {
+          "@step1": "https://step1.com/{name}.json",
+        },
+      }
+
+      await fs.writeFile(configFile, JSON.stringify(config1, null, 2))
+
+      try {
+        // First call with cache enabled
+        const result1 = await getRegistriesConfig(tempDir, { useCache: true })
+        expect(result1.registries?.["@step1"]).toBe(
+          "https://step1.com/{name}.json"
+        )
+
+        // Update config
+        const config2 = {
+          style: "new-york",
+          registries: {
+            "@step2": "https://step2.com/{name}.json",
+          },
+        }
+        await fs.writeFile(configFile, JSON.stringify(config2, null, 2))
+
+        // Call with cache disabled - should clear cache and read fresh
+        const result2 = await getRegistriesConfig(tempDir, { useCache: false })
+        expect(result2.registries?.["@step2"]).toBe(
+          "https://step2.com/{name}.json"
+        )
+        expect(result2.registries?.["@step1"]).toBeUndefined()
+
+        // Update config again
+        const config3 = {
+          style: "new-york",
+          registries: {
+            "@step3": "https://step3.com/{name}.json",
+          },
+        }
+        await fs.writeFile(configFile, JSON.stringify(config3, null, 2))
+
+        // Call with cache disabled again to ensure we get fresh data
+        const result3 = await getRegistriesConfig(tempDir, { useCache: false })
+        expect(result3.registries?.["@step3"]).toBe(
+          "https://step3.com/{name}.json"
+        )
+        expect(result3.registries?.["@step2"]).toBeUndefined()
+
+        // Now a call with cache enabled should cache the current state
+        const result4 = await getRegistriesConfig(tempDir, { useCache: true })
+        expect(result4.registries?.["@step3"]).toBe(
+          "https://step3.com/{name}.json"
+        )
+      } finally {
+        await fs.unlink(configFile)
+        await fs.rmdir(tempDir)
+      }
+    })
+
+    it("should handle missing config with cache options", async () => {
+      const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+
+      try {
+        // With cache enabled (default)
+        const result1 = await getRegistriesConfig(tempDir)
+        expect(result1.registries).toEqual(BUILTIN_REGISTRIES)
+
+        // With cache explicitly enabled
+        const result2 = await getRegistriesConfig(tempDir, { useCache: true })
+        expect(result2.registries).toEqual(BUILTIN_REGISTRIES)
+
+        // With cache disabled
+        const result3 = await getRegistriesConfig(tempDir, { useCache: false })
+        expect(result3.registries).toEqual(BUILTIN_REGISTRIES)
+      } finally {
+        await fs.rmdir(tempDir)
+      }
+    })
+
+    it("should handle invalid config with cache options", async () => {
+      const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+      const configFile = path.join(tempDir, "components.json")
+
+      const invalidConfig = {
+        style: "new-york",
+        registries: {
+          "@invalid": {
+            // Missing required 'url' field
+            headers: {
+              Authorization: "Bearer token",
+            },
+          },
+        },
+      }
+
+      await fs.writeFile(configFile, JSON.stringify(invalidConfig, null, 2))
+
+      try {
+        // Should throw regardless of cache setting
+        await expect(
+          getRegistriesConfig(tempDir, { useCache: true })
+        ).rejects.toThrow(ConfigParseError)
+
+        await expect(
+          getRegistriesConfig(tempDir, { useCache: false })
+        ).rejects.toThrow(ConfigParseError)
+      } finally {
+        await fs.unlink(configFile)
+        await fs.rmdir(tempDir)
+      }
+    })
+  })
+
+  describe("getRegistriesIndex", () => {
+    it("should fetch and parse the registries index successfully", async () => {
+      const result = await getRegistriesIndex()
+
+      expect(result).toEqual({
+        "@shadcn": "https://ui.shadcn.com/r/styles/{style}/{name}.json",
+        "@example": "https://example.com/registry/styles/{style}/{name}.json",
+        "@test": "https://test.com/registry/{name}.json",
+      })
+    })
+
+    it("should respect cache options", async () => {
+      // Test with cache disabled
+      const result1 = await getRegistriesIndex({ useCache: false })
+      expect(result1).toBeDefined()
+
+      // Test with cache enabled
+      const result2 = await getRegistriesIndex({ useCache: true })
+      expect(result2).toBeDefined()
+
+      // Results should be the same
+      expect(result1).toEqual(result2)
+    })
+
+    it("should use default cache behavior when no options provided", async () => {
+      const result = await getRegistriesIndex()
+      expect(result).toBeDefined()
+      expect(typeof result).toBe("object")
+    })
+
+    it("should handle network errors properly", async () => {
+      server.use(
+        http.get(`${REGISTRY_URL}/registries.json`, () => {
+          return new HttpResponse(null, { status: 500 })
+        })
+      )
+
+      await expect(getRegistriesIndex({ useCache: false })).rejects.toThrow()
+
+      try {
+        await getRegistriesIndex({ useCache: false })
+      } catch (error) {
+        expect(error).not.toBeInstanceOf(RegistriesIndexParseError)
+      }
+    })
+
+    it("should handle invalid JSON response", async () => {
+      server.use(
+        http.get(`${REGISTRY_URL}/registries.json`, () => {
+          return HttpResponse.json({
+            "invalid-namespace": "some-url",
+          })
+        })
+      )
+
+      await expect(getRegistriesIndex({ useCache: false })).rejects.toThrow(
+        RegistriesIndexParseError
+      )
+    })
+
+    it("should handle network timeout", async () => {
+      server.use(
+        http.get(`${REGISTRY_URL}/registries.json`, () => {
+          return HttpResponse.error()
+        })
+      )
+
+      await expect(getRegistriesIndex({ useCache: false })).rejects.toThrow()
+    })
+  })
+})
diff --git a/packages/shadcn/src/registry/api.ts b/packages/shadcn/src/registry/api.ts
new file mode 100644
index 00000000000..f66d37c845b
--- /dev/null
+++ b/packages/shadcn/src/registry/api.ts
@@ -0,0 +1,301 @@
+import path from "path"
+import { buildUrlAndHeadersForRegistryItem } from "@/src/registry/builder"
+import { configWithDefaults } from "@/src/registry/config"
+import {
+  BASE_COLORS,
+  BUILTIN_REGISTRIES,
+  REGISTRY_URL,
+} from "@/src/registry/constants"
+import {
+  clearRegistryContext,
+  setRegistryHeaders,
+} from "@/src/registry/context"
+import {
+  ConfigParseError,
+  RegistriesIndexParseError,
+  RegistryInvalidNamespaceError,
+  RegistryNotFoundError,
+  RegistryParseError,
+} from "@/src/registry/errors"
+import { fetchRegistry } from "@/src/registry/fetcher"
+import {
+  fetchRegistryItems,
+  resolveRegistryTree,
+} from "@/src/registry/resolver"
+import { isUrl } from "@/src/registry/utils"
+import {
+  iconsSchema,
+  registriesIndexSchema,
+  registryBaseColorSchema,
+  registryConfigSchema,
+  registryIndexSchema,
+  registryItemSchema,
+  registrySchema,
+  stylesSchema,
+} from "@/src/schema"
+import { Config, explorer } from "@/src/utils/get-config"
+import { handleError } from "@/src/utils/handle-error"
+import { logger } from "@/src/utils/logger"
+import { z } from "zod"
+
+export async function getRegistry(
+  name: string,
+  options?: {
+    config?: Partial<Config>
+    useCache?: boolean
+  }
+) {
+  const { config, useCache } = options || {}
+
+  if (isUrl(name)) {
+    const [result] = await fetchRegistry([name], { useCache })
+    try {
+      return registrySchema.parse(result)
+    } catch (error) {
+      throw new RegistryParseError(name, error)
+    }
+  }
+
+  if (!name.startsWith("@")) {
+    throw new RegistryInvalidNamespaceError(name)
+  }
+
+  let registryName = name
+  if (!registryName.endsWith("/registry")) {
+    registryName = `${registryName}/registry`
+  }
+
+  const urlAndHeaders = buildUrlAndHeadersForRegistryItem(
+    registryName as `@${string}`,
+    configWithDefaults(config)
+  )
+
+  if (!urlAndHeaders?.url) {
+    throw new RegistryNotFoundError(registryName)
+  }
+
+  if (urlAndHeaders.headers && Object.keys(urlAndHeaders.headers).length > 0) {
+    setRegistryHeaders({
+      [urlAndHeaders.url]: urlAndHeaders.headers,
+    })
+  }
+
+  const [result] = await fetchRegistry([urlAndHeaders.url], { useCache })
+
+  try {
+    return registrySchema.parse(result)
+  } catch (error) {
+    throw new RegistryParseError(registryName, error)
+  }
+}
+
+export async function getRegistryItems(
+  items: string[],
+  options?: {
+    config?: Partial<Config>
+    useCache?: boolean
+  }
+) {
+  const { config, useCache = false } = options || {}
+
+  clearRegistryContext()
+
+  return fetchRegistryItems(items, configWithDefaults(config), { useCache })
+}
+
+export async function resolveRegistryItems(
+  items: string[],
+  options?: {
+    config?: Partial<Config>
+    useCache?: boolean
+  }
+) {
+  const { config, useCache = false } = options || {}
+
+  clearRegistryContext()
+  return resolveRegistryTree(items, configWithDefaults(config), { useCache })
+}
+
+export async function getRegistriesConfig(
+  cwd: string,
+  options?: { useCache?: boolean }
+) {
+  const { useCache = true } = options || {}
+
+  // Clear cache if requested
+  if (!useCache) {
+    explorer.clearCaches()
+  }
+
+  const configResult = await explorer.search(cwd)
+
+  if (!configResult) {
+    // Do not throw an error if the config is missing.
+    // We still have access to the built-in registries.
+    return {
+      registries: BUILTIN_REGISTRIES,
+    }
+  }
+
+  // Parse just the registries field from the config
+  const registriesConfig = z
+    .object({
+      registries: registryConfigSchema.optional(),
+    })
+    .safeParse(configResult.config)
+
+  if (!registriesConfig.success) {
+    throw new ConfigParseError(cwd, registriesConfig.error)
+  }
+
+  // Merge built-in registries with user registries
+  return {
+    registries: {
+      ...BUILTIN_REGISTRIES,
+      ...(registriesConfig.data.registries || {}),
+    },
+  }
+}
+
+export async function getShadcnRegistryIndex() {
+  try {
+    const [result] = await fetchRegistry(["index.json"])
+
+    return registryIndexSchema.parse(result)
+  } catch (error) {
+    logger.error("\n")
+    handleError(error)
+  }
+}
+
+export async function getRegistryStyles() {
+  try {
+    const [result] = await fetchRegistry(["styles/index.json"])
+
+    return stylesSchema.parse(result)
+  } catch (error) {
+    logger.error("\n")
+    handleError(error)
+    return []
+  }
+}
+
+export async function getRegistryIcons() {
+  try {
+    const [result] = await fetchRegistry(["icons/index.json"])
+    return iconsSchema.parse(result)
+  } catch (error) {
+    handleError(error)
+    return {}
+  }
+}
+
+export async function getRegistryBaseColors() {
+  return BASE_COLORS
+}
+
+export async function getRegistryBaseColor(baseColor: string) {
+  try {
+    const [result] = await fetchRegistry([`colors/${baseColor}.json`])
+
+    return registryBaseColorSchema.parse(result)
+  } catch (error) {
+    handleError(error)
+  }
+}
+
+/**
+ * @deprecated This function is deprecated and will be removed in a future version.
+ */
+export async function resolveTree(
+  index: z.infer<typeof registryIndexSchema>,
+  names: string[]
+) {
+  const tree: z.infer<typeof registryIndexSchema> = []
+
+  for (const name of names) {
+    const entry = index.find((entry) => entry.name === name)
+
+    if (!entry) {
+      continue
+    }
+
+    tree.push(entry)
+
+    if (entry.registryDependencies) {
+      const dependencies = await resolveTree(index, entry.registryDependencies)
+      tree.push(...dependencies)
+    }
+  }
+
+  return tree.filter(
+    (component, index, self) =>
+      self.findIndex((c) => c.name === component.name) === index
+  )
+}
+
+/**
+ * @deprecated This function is deprecated and will be removed in a future version.
+ */
+export async function fetchTree(
+  style: string,
+  tree: z.infer<typeof registryIndexSchema>
+) {
+  try {
+    const paths = tree.map((item) => `styles/${style}/${item.name}.json`)
+    const results = await fetchRegistry(paths)
+    return results.map((result) => registryItemSchema.parse(result))
+  } catch (error) {
+    handleError(error)
+    return []
+  }
+}
+
+/**
+ * @deprecated This function is deprecated and will be removed in a future version.
+ */
+export async function getItemTargetPath(
+  config: Config,
+  item: Pick<z.infer<typeof registryItemSchema>, "type">,
+  override?: string
+) {
+  if (override) {
+    return override
+  }
+
+  if (item.type === "registry:ui") {
+    return config.resolvedPaths.ui ?? config.resolvedPaths.components
+  }
+
+  const [parent, type] = item.type?.split(":") ?? []
+  if (!(parent in config.resolvedPaths)) {
+    return null
+  }
+
+  return path.join(
+    config.resolvedPaths[parent as keyof typeof config.resolvedPaths],
+    type
+  )
+}
+
+export async function getRegistriesIndex(options?: { useCache?: boolean }) {
+  options = {
+    useCache: true,
+    ...options,
+  }
+
+  const url = `${REGISTRY_URL}/registries.json`
+  const [data] = await fetchRegistry([url], {
+    useCache: options.useCache,
+  })
+
+  try {
+    return registriesIndexSchema.parse(data)
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      throw new RegistriesIndexParseError(error)
+    }
+
+    throw error
+  }
+}
diff --git a/packages/shadcn/src/registry/builder.test.ts b/packages/shadcn/src/registry/builder.test.ts
new file mode 100644
index 00000000000..b2b71a8e9b4
--- /dev/null
+++ b/packages/shadcn/src/registry/builder.test.ts
@@ -0,0 +1,476 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
+
+import { REGISTRY_URL } from "@/src/registry/constants"
+import { afterEach, beforeEach, describe, expect, it } from "vitest"
+
+import {
+  buildHeadersFromRegistryConfig,
+  buildUrlAndHeadersForRegistryItem,
+  buildUrlFromRegistryConfig,
+  resolveRegistryUrl,
+} from "./builder"
+
+describe("buildUrlFromRegistryConfig", () => {
+  beforeEach(() => {
+    process.env.TEST_TOKEN = "abc123"
+    process.env.API_VERSION = "v2"
+    process.env.API_KEY = "key456"
+  })
+
+  afterEach(() => {
+    delete process.env.TEST_TOKEN
+    delete process.env.API_VERSION
+    delete process.env.API_KEY
+  })
+
+  it("should build URL from string config", () => {
+    const url = buildUrlFromRegistryConfig(
+      "chat-component",
+      "https://v0.dev/chat/b/{name}/json"
+    )
+    expect(url).toBe("https://v0.dev/chat/b/chat-component/json")
+  })
+
+  it("should replace style placeholder in URL", () => {
+    const url = buildUrlFromRegistryConfig(
+      "button",
+      "https://ui.shadcn.com/r/styles/{style}/{name}.json",
+      { style: "new-york" } as any
+    )
+    expect(url).toBe("https://ui.shadcn.com/r/styles/new-york/button.json")
+  })
+
+  it("should handle both name and style placeholders", () => {
+    const url = buildUrlFromRegistryConfig(
+      "accordion",
+      "https://example.com/{style}/components/{name}",
+      { style: "default" } as any
+    )
+    expect(url).toBe("https://example.com/default/components/accordion")
+  })
+
+  it("should build URL with env vars", () => {
+    const url = buildUrlFromRegistryConfig(
+      "button",
+      "https://api.com/{name}?token=${TEST_TOKEN}"
+    )
+    expect(url).toBe("https://api.com/button?token=abc123")
+  })
+
+  it("should build URL with params", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      params: {
+        version: "${API_VERSION}",
+        format: "json",
+      },
+    }
+
+    const url = buildUrlFromRegistryConfig("table", config)
+    expect(url).toBe("https://api.com/table?version=v2&format=json")
+  })
+
+  it("should skip empty param values", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      params: {
+        token: "${MISSING_VAR}",
+        format: "json",
+      },
+    }
+
+    const url = buildUrlFromRegistryConfig("table", config)
+    expect(url).toBe("https://api.com/table?format=json")
+  })
+
+  it("should handle existing query params", () => {
+    const config = {
+      url: "https://api.com/{name}?existing=true",
+      params: {
+        new: "param",
+      },
+    }
+
+    const url = buildUrlFromRegistryConfig("table", config)
+    expect(url).toBe("https://api.com/table?existing=true&new=param")
+  })
+
+  it("should handle URL with no params", () => {
+    const config = {
+      url: "https://api.com/{name}",
+    }
+
+    const url = buildUrlFromRegistryConfig("table", config)
+    expect(url).toBe("https://api.com/table")
+  })
+
+  it("should handle multiple env vars in params", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      params: {
+        token: "${TEST_TOKEN}",
+        version: "${API_VERSION}",
+        key: "${API_KEY}",
+      },
+    }
+
+    const url = buildUrlFromRegistryConfig("table", config)
+    expect(url).toBe("https://api.com/table?token=abc123&version=v2&key=key456")
+  })
+
+  it("should handle all empty env vars in params", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      params: {
+        token: "${MISSING_VAR1}",
+        key: "${MISSING_VAR2}",
+      },
+    }
+
+    const url = buildUrlFromRegistryConfig("table", config)
+    expect(url).toBe("https://api.com/table")
+  })
+
+  it("should handle mixed static and env var params", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      params: {
+        static: "value",
+        env: "${TEST_TOKEN}",
+        empty: "${MISSING_VAR}",
+      },
+    }
+
+    const url = buildUrlFromRegistryConfig("table", config)
+    expect(url).toBe("https://api.com/table?static=value&env=abc123")
+  })
+
+  it("should handle special characters in params", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      params: {
+        "user-id": "123",
+        "api-key": "${TEST_TOKEN}",
+        "content-type": "application/json",
+      },
+    }
+
+    const url = buildUrlFromRegistryConfig("table", config)
+    expect(url).toBe(
+      "https://api.com/table?user-id=123&api-key=abc123&content-type=application%2Fjson"
+    )
+  })
+
+  it("should handle URL with multiple existing query params", () => {
+    const config = {
+      url: "https://api.com/{name}?param1=value1&param2=value2",
+      params: {
+        newParam: "newValue",
+        envParam: "${TEST_TOKEN}",
+      },
+    }
+
+    const url = buildUrlFromRegistryConfig("table", config)
+    expect(url).toBe(
+      "https://api.com/table?param1=value1&param2=value2&newParam=newValue&envParam=abc123"
+    )
+  })
+})
+
+describe("buildHeadersFromRegistryConfig", () => {
+  beforeEach(() => {
+    process.env.AUTH_TOKEN = "secret123"
+    process.env.CLIENT_ID = "client456"
+    process.env.API_KEY = "key789"
+  })
+
+  afterEach(() => {
+    delete process.env.AUTH_TOKEN
+    delete process.env.CLIENT_ID
+    delete process.env.API_KEY
+  })
+
+  it("should return empty object for string config", () => {
+    expect(buildHeadersFromRegistryConfig("https://api.com/{name}")).toEqual({})
+  })
+
+  it("should return empty object for config without headers", () => {
+    expect(
+      buildHeadersFromRegistryConfig({ url: "https://api.com/{name}" })
+    ).toEqual({})
+  })
+
+  it("should expand headers with env vars", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      headers: {
+        Authorization: "Bearer ${AUTH_TOKEN}",
+        "X-Client-Id": "${CLIENT_ID}",
+      },
+    }
+
+    expect(buildHeadersFromRegistryConfig(config)).toEqual({
+      Authorization: "Bearer secret123",
+      "X-Client-Id": "client456",
+    })
+  })
+
+  it("should skip headers with empty values", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      headers: {
+        Authorization: "Bearer ${MISSING_VAR}",
+        "X-Client-Id": "${CLIENT_ID}",
+      },
+    }
+
+    expect(buildHeadersFromRegistryConfig(config)).toEqual({
+      "X-Client-Id": "client456",
+    })
+  })
+
+  it("should handle headers with mixed static and env var content", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      headers: {
+        Authorization: "Bearer ${AUTH_TOKEN}",
+        "Content-Type": "application/json",
+        "X-Custom": "prefix-${CLIENT_ID}-suffix",
+      },
+    }
+
+    expect(buildHeadersFromRegistryConfig(config)).toEqual({
+      Authorization: "Bearer secret123",
+      "Content-Type": "application/json",
+      "X-Custom": "prefix-client456-suffix",
+    })
+  })
+
+  it("should skip headers with only env vars that are empty", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      headers: {
+        "X-Missing": "${MISSING_VAR1}",
+        "X-Also-Missing": "${MISSING_VAR2}",
+        "X-Present": "${CLIENT_ID}",
+      },
+    }
+
+    expect(buildHeadersFromRegistryConfig(config)).toEqual({
+      "X-Present": "client456",
+    })
+  })
+
+  it("should handle headers with whitespace-only values", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      headers: {
+        "X-Empty": "   ",
+        "X-Whitespace": "  ${MISSING_VAR}  ",
+        "X-Valid": "  ${CLIENT_ID}  ",
+      },
+    }
+
+    expect(buildHeadersFromRegistryConfig(config)).toEqual({
+      "X-Valid": "  client456  ",
+    })
+  })
+
+  it("should handle complex env var patterns", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      headers: {
+        "X-Complex": "Bearer ${AUTH_TOKEN} with ${CLIENT_ID} and ${API_KEY}",
+        "X-Simple": "${CLIENT_ID}",
+        "X-Mixed": "static-${AUTH_TOKEN}-${MISSING_VAR}-${API_KEY}",
+      },
+    }
+
+    expect(buildHeadersFromRegistryConfig(config)).toEqual({
+      "X-Complex": "Bearer secret123 with client456 and key789",
+      "X-Simple": "client456",
+      "X-Mixed": "static-secret123--key789",
+    })
+  })
+
+  it("should handle headers with only static content", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "User-Agent": "shadcn-ui/1.0.0",
+      },
+    }
+
+    expect(buildHeadersFromRegistryConfig(config)).toEqual({
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "User-Agent": "shadcn-ui/1.0.0",
+    })
+  })
+
+  it("should handle headers with template-like content but no env vars", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      headers: {
+        "X-Template": "This is a template ${but not an env var}",
+        "X-Regular": "Regular header value",
+      },
+    }
+
+    expect(buildHeadersFromRegistryConfig(config)).toEqual({
+      "X-Template": "This is a template ${but not an env var}",
+      "X-Regular": "Regular header value",
+    })
+  })
+
+  it("should handle case where env var expansion doesn't change the value", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      headers: {
+        "X-No-Change": "static value",
+        "X-With-Env": "prefix-${CLIENT_ID}-suffix",
+      },
+    }
+
+    expect(buildHeadersFromRegistryConfig(config)).toEqual({
+      "X-No-Change": "static value",
+      "X-With-Env": "prefix-client456-suffix",
+    })
+  })
+})
+
+describe("buildUrlAndHeadersForRegistryItem", () => {
+  it("should return null for non-registry items", () => {
+    const input = "button"
+    const config = {} as any
+    expect(buildUrlAndHeadersForRegistryItem(input, config)).toBeNull()
+  })
+
+  it("should throw error for unknown registry", () => {
+    expect(() => {
+      buildUrlAndHeadersForRegistryItem("@unknown/button", {} as any)
+    }).toThrow('Unknown registry "@unknown"')
+  })
+
+  it("should resolve registry items with string config", () => {
+    const config = {
+      registries: {
+        "@v0": "https://v0.dev/chat/b/{name}/json",
+      },
+    } as any
+
+    const result1 = buildUrlAndHeadersForRegistryItem("@v0/button", config)
+    expect(result1).toEqual({
+      url: "https://v0.dev/chat/b/button/json",
+      headers: {},
+    })
+
+    const result2 = buildUrlAndHeadersForRegistryItem("@v0/data-table", config)
+    expect(result2).toEqual({
+      url: "https://v0.dev/chat/b/data-table/json",
+      headers: {},
+    })
+  })
+
+  it("should resolve registry items with object config", () => {
+    const config = {
+      registries: {
+        "@test": {
+          url: "https://api.com/{name}.json",
+          headers: {
+            Authorization: "Bearer token123",
+          },
+        },
+      },
+    } as any
+
+    const result = buildUrlAndHeadersForRegistryItem("@test/button", config)
+    expect(result).toEqual({
+      url: "https://api.com/button.json",
+      headers: {
+        Authorization: "Bearer token123",
+      },
+    })
+  })
+
+  it("should handle environment variables in config", () => {
+    process.env.TEST_TOKEN = "abc123"
+    process.env.API_URL = "https://api.com"
+
+    const config = {
+      registries: {
+        "@env": {
+          url: "${API_URL}/{name}.json",
+          headers: {
+            Authorization: "Bearer ${TEST_TOKEN}",
+          },
+        },
+      },
+    } as any
+
+    const result = buildUrlAndHeadersForRegistryItem("@env/button", config)
+    expect(result).toEqual({
+      url: "https://api.com/button.json",
+      headers: {
+        Authorization: "Bearer abc123",
+      },
+    })
+
+    delete process.env.TEST_TOKEN
+    delete process.env.API_URL
+  })
+
+  it("should handle complex item paths", () => {
+    const config = {
+      registries: {
+        "@acme": "https://api.com/{name}.json",
+      },
+    } as any
+
+    const result = buildUrlAndHeadersForRegistryItem("@acme/ui/button", config)
+    expect(result).toEqual({
+      url: "https://api.com/ui/button.json",
+      headers: {},
+    })
+  })
+
+  it("should handle URLs and local files", () => {
+    const config = { registries: {} } as any
+
+    // URLs should return null (not registry items)
+    expect(
+      buildUrlAndHeadersForRegistryItem("https://example.com/button", config)
+    ).toBeNull()
+
+    // Local files should return null (not registry items)
+    expect(
+      buildUrlAndHeadersForRegistryItem("./local/button", config)
+    ).toBeNull()
+  })
+})
+
+describe("resolveRegistryUrl", () => {
+  it("should return the URL as-is for valid URLs", () => {
+    const url = "https://example.com/component.json"
+    expect(resolveRegistryUrl(url)).toBe(url)
+  })
+
+  it("should append /json to v0 registry URLs", () => {
+    const v0Url = "https://v0.dev/chat/b/abc123"
+    expect(resolveRegistryUrl(v0Url)).toBe("https://v0.dev/chat/b/abc123/json")
+  })
+
+  it("should not append /json if already present", () => {
+    const v0Url = "https://v0.dev/chat/b/abc123/json"
+    expect(resolveRegistryUrl(v0Url)).toBe(v0Url)
+  })
+
+  it("should prepend REGISTRY_URL for non-URLs", () => {
+    expect(resolveRegistryUrl("test.json")).toBe(`${REGISTRY_URL}/test.json`)
+    expect(resolveRegistryUrl("styles/default/button.json")).toBe(
+      `${REGISTRY_URL}/styles/default/button.json`
+    )
+  })
+})
diff --git a/packages/shadcn/src/registry/builder.ts b/packages/shadcn/src/registry/builder.ts
new file mode 100644
index 00000000000..3597c3eea36
--- /dev/null
+++ b/packages/shadcn/src/registry/builder.ts
@@ -0,0 +1,153 @@
+import { REGISTRY_URL } from "@/src/registry/constants"
+import { expandEnvVars } from "@/src/registry/env"
+import { RegistryNotConfiguredError } from "@/src/registry/errors"
+import { parseRegistryAndItemFromString } from "@/src/registry/parser"
+import { isUrl } from "@/src/registry/utils"
+import { validateRegistryConfig } from "@/src/registry/validator"
+import { registryConfigItemSchema } from "@/src/schema"
+import { Config } from "@/src/utils/get-config"
+import { z } from "zod"
+
+const NAME_PLACEHOLDER = "{name}"
+const STYLE_PLACEHOLDER = "{style}"
+const ENV_VAR_PATTERN = /\${(\w+)}/g
+const QUERY_PARAM_SEPARATOR = "?"
+const QUERY_PARAM_DELIMITER = "&"
+
+export function buildUrlAndHeadersForRegistryItem(
+  name: string,
+  config?: Config
+) {
+  const { registry, item } = parseRegistryAndItemFromString(name)
+
+  if (!registry) {
+    return null
+  }
+
+  const registries = config?.registries || {}
+  const registryConfig = registries[registry]
+  if (!registryConfig) {
+    throw new RegistryNotConfiguredError(registry)
+  }
+
+  // TODO: I don't like this here.
+  // But this will do for now.
+  validateRegistryConfig(registry, registryConfig)
+
+  return {
+    url: buildUrlFromRegistryConfig(item, registryConfig, config),
+    headers: buildHeadersFromRegistryConfig(registryConfig),
+  }
+}
+
+export function buildUrlFromRegistryConfig(
+  item: string,
+  registryConfig: z.infer<typeof registryConfigItemSchema>,
+  config?: Config
+) {
+  if (typeof registryConfig === "string") {
+    let url = registryConfig.replace(NAME_PLACEHOLDER, item)
+    if (config?.style && url.includes(STYLE_PLACEHOLDER)) {
+      url = url.replace(STYLE_PLACEHOLDER, config.style)
+    }
+    return expandEnvVars(url)
+  }
+
+  let baseUrl = registryConfig.url.replace(NAME_PLACEHOLDER, item)
+  if (config?.style && baseUrl.includes(STYLE_PLACEHOLDER)) {
+    baseUrl = baseUrl.replace(STYLE_PLACEHOLDER, config.style)
+  }
+  baseUrl = expandEnvVars(baseUrl)
+
+  if (!registryConfig.params) {
+    return baseUrl
+  }
+
+  return appendQueryParams(baseUrl, registryConfig.params)
+}
+
+export function buildHeadersFromRegistryConfig(
+  config: z.infer<typeof registryConfigItemSchema>
+) {
+  if (typeof config === "string" || !config.headers) {
+    return {}
+  }
+
+  const headers: Record<string, string> = {}
+
+  for (const [key, value] of Object.entries(config.headers)) {
+    const expandedValue = expandEnvVars(value)
+
+    if (shouldIncludeHeader(value, expandedValue)) {
+      headers[key] = expandedValue
+    }
+  }
+
+  return headers
+}
+
+function appendQueryParams(baseUrl: string, params: Record<string, string>) {
+  const urlParams = new URLSearchParams()
+
+  for (const [key, value] of Object.entries(params)) {
+    const expandedValue = expandEnvVars(value)
+    if (expandedValue) {
+      urlParams.append(key, expandedValue)
+    }
+  }
+
+  const queryString = urlParams.toString()
+  if (!queryString) {
+    return baseUrl
+  }
+
+  const separator = baseUrl.includes(QUERY_PARAM_SEPARATOR)
+    ? QUERY_PARAM_DELIMITER
+    : QUERY_PARAM_SEPARATOR
+
+  return `${baseUrl}${separator}${queryString}`
+}
+
+function shouldIncludeHeader(originalValue: string, expandedValue: string) {
+  const trimmedExpanded = expandedValue.trim()
+
+  if (!trimmedExpanded) {
+    return false
+  }
+
+  // If the original value contains valid env vars, only include if expansion changed the value.
+  if (originalValue.includes("${")) {
+    // Check if there are actual env vars in the string
+    const envVars = originalValue.match(ENV_VAR_PATTERN)
+    if (envVars) {
+      const templateWithoutVars = originalValue
+        .replace(ENV_VAR_PATTERN, "")
+        .trim()
+      return trimmedExpanded !== templateWithoutVars
+    }
+  }
+
+  return true
+}
+
+/**
+ * Resolves a registry URL from a path or URL string.
+ * Handles special cases like v0 registry URLs that need /json suffix.
+ *
+ * @param pathOrUrl - Either a relative path or a full URL
+ * @returns The resolved registry URL
+ */
+export function resolveRegistryUrl(pathOrUrl: string) {
+  if (isUrl(pathOrUrl)) {
+    // If the url contains /chat/b/, we assume it's the v0 registry.
+    // We need to add the /json suffix if it's missing.
+    const url = new URL(pathOrUrl)
+    if (url.pathname.match(/\/chat\/b\//) && !url.pathname.endsWith("/json")) {
+      url.pathname = `${url.pathname}/json`
+    }
+
+    return url.toString()
+  }
+
+  return `${REGISTRY_URL}/${pathOrUrl}`
+}
diff --git a/packages/shadcn/src/registry/config.test.ts b/packages/shadcn/src/registry/config.test.ts
new file mode 100644
index 00000000000..175cda7af5f
--- /dev/null
+++ b/packages/shadcn/src/registry/config.test.ts
@@ -0,0 +1,221 @@
+import { BUILTIN_REGISTRIES, FALLBACK_STYLE } from "@/src/registry/constants"
+import { createConfig } from "@/src/utils/get-config"
+import { describe, expect, it } from "vitest"
+
+import { configWithDefaults } from "./config"
+
+describe("configWithDefaults", () => {
+  it("should merge built-in registries with user registries", () => {
+    const userConfig = createConfig({
+      registries: {
+        "@custom": "http://example.com/{name}",
+      },
+    })
+
+    const result = configWithDefaults(userConfig)
+
+    expect(result.registries).toEqual({
+      ...BUILTIN_REGISTRIES,
+      "@custom": "http://example.com/{name}",
+    })
+  })
+
+  it("should preserve user registries when merging", () => {
+    const userConfig = createConfig({
+      registries: {
+        "@one": "http://one.com/{name}",
+        "@two": {
+          url: "http://two.com/{name}",
+          headers: {
+            Authorization: "Bearer token",
+          },
+        },
+      },
+    })
+
+    const result = configWithDefaults(userConfig)
+
+    expect(result.registries?.["@one"]).toBe("http://one.com/{name}")
+    expect(result.registries?.["@two"]).toEqual({
+      url: "http://two.com/{name}",
+      headers: {
+        Authorization: "Bearer token",
+      },
+    })
+    expect(result.registries?.["@shadcn"]).toBe(BUILTIN_REGISTRIES["@shadcn"])
+  })
+
+  it("should use FALLBACK_STYLE when style is new-york and tailwind.config is empty", () => {
+    const config = createConfig({
+      style: "new-york",
+      tailwind: {
+        config: "",
+        css: "app/globals.css",
+        baseColor: "slate",
+        cssVariables: true,
+      },
+    })
+
+    const result = configWithDefaults(config)
+
+    expect(result.style).toBe(FALLBACK_STYLE)
+  })
+
+  it("should keep new-york style when tailwind.config is not empty", () => {
+    const config = createConfig({
+      style: "new-york",
+      tailwind: {
+        config: "tailwind.config.js",
+        css: "app/globals.css",
+        baseColor: "slate",
+        cssVariables: true,
+      },
+    })
+
+    const result = configWithDefaults(config)
+
+    expect(result.style).toBe("new-york")
+  })
+
+  it("should preserve non-new-york styles regardless of tailwind config", () => {
+    const config1 = createConfig({
+      style: "default",
+      tailwind: {
+        config: "",
+        css: "app/globals.css",
+        baseColor: "slate",
+        cssVariables: true,
+      },
+    })
+
+    const result1 = configWithDefaults(config1)
+    expect(result1.style).toBe("default")
+
+    const config2 = createConfig({
+      style: "miami",
+      tailwind: {
+        config: "tailwind.config.js",
+        css: "app/globals.css",
+        baseColor: "slate",
+        cssVariables: true,
+      },
+    })
+
+    const result2 = configWithDefaults(config2)
+    expect(result2.style).toBe("miami")
+  })
+
+  it("should use FALLBACK_STYLE when no style is provided", () => {
+    const config = createConfig({
+      style: undefined,
+    })
+
+    const result = configWithDefaults(config)
+
+    expect(result.style).toBe(FALLBACK_STYLE)
+  })
+
+  it("should deeply merge nested config properties", () => {
+    const config = createConfig({
+      tailwind: {
+        css: "custom/path/globals.css",
+        prefix: "tw-",
+        baseColor: "zinc",
+        cssVariables: false,
+      },
+      aliases: {
+        components: "@/custom-components",
+        utils: "@/custom-utils",
+      },
+    })
+
+    const result = configWithDefaults(config)
+
+    expect(result.tailwind.css).toBe("custom/path/globals.css")
+    expect(result.tailwind.prefix).toBe("tw-")
+    expect(result.tailwind.baseColor).toBe("zinc")
+    expect(result.tailwind.cssVariables).toBe(false)
+    expect(result.aliases.components).toBe("@/custom-components")
+    expect(result.aliases.utils).toBe("@/custom-utils")
+  })
+
+  it("should preserve all user config properties", () => {
+    const config = createConfig({
+      style: "default",
+      tsx: false,
+      rsc: false,
+      tailwind: {
+        config: "custom.config.js",
+        css: "styles/main.css",
+        baseColor: "gray",
+        cssVariables: true,
+        prefix: "app-",
+      },
+      resolvedPaths: {
+        cwd: "/custom/project",
+        tailwindConfig: "/custom/project/tailwind.config.js",
+        tailwindCss: "/custom/project/styles/main.css",
+        utils: "/custom/project/lib/utils",
+        components: "/custom/project/components",
+        ui: "/custom/project/components/ui",
+        lib: "/custom/project/lib",
+        hooks: "/custom/project/hooks",
+      },
+      aliases: {
+        components: "@/components",
+        utils: "@/lib/utils",
+        ui: "@/components/ui",
+        lib: "@/lib",
+        hooks: "@/hooks",
+      },
+    })
+
+    const result = configWithDefaults(config)
+
+    expect(result.tsx).toBe(false)
+    expect(result.rsc).toBe(false)
+    expect(result.tailwind.config).toBe("custom.config.js")
+    expect(result.tailwind.css).toBe("styles/main.css")
+    expect(result.tailwind.baseColor).toBe("gray")
+    expect(result.tailwind.prefix).toBe("app-")
+    expect(result.resolvedPaths.cwd).toBe("/custom/project")
+    expect(result.resolvedPaths.components).toBe("/custom/project/components")
+  })
+
+  it("should handle empty registries object", () => {
+    const config = createConfig({
+      registries: {},
+    })
+
+    const result = configWithDefaults(config)
+
+    expect(result.registries).toEqual(BUILTIN_REGISTRIES)
+  })
+
+  it("should override built-in registries if user provides same key", () => {
+    const config = createConfig({
+      registries: {
+        "@shadcn": "http://custom-shadcn.com/{name}",
+      },
+    })
+
+    const result = configWithDefaults(config)
+
+    // User's @shadcn should override the built-in one
+    expect(result.registries?.["@shadcn"]).toBe(
+      "http://custom-shadcn.com/{name}"
+    )
+  })
+
+  it("should validate the final config with configSchema", () => {
+    const config = createConfig({
+      style: "default",
+      registries: {
+        "@test": "http://test.com/{name}",
+      },
+    })
+
+    // This should not throw since configSchema.parse is called internally
+    expect(() => configWithDefaults(config)).not.toThrow()
+  })
+})
diff --git a/packages/shadcn/src/registry/config.ts b/packages/shadcn/src/registry/config.ts
new file mode 100644
index 00000000000..9c3e22b1191
--- /dev/null
+++ b/packages/shadcn/src/registry/config.ts
@@ -0,0 +1,37 @@
+import { BUILTIN_REGISTRIES, FALLBACK_STYLE } from "@/src/registry/constants"
+import { configSchema } from "@/src/schema"
+import { Config, createConfig } from "@/src/utils/get-config"
+import deepmerge from "deepmerge"
+
+function resolveStyleFromConfig(config: Partial<Config> | Config) {
+  if (!config.style) {
+    return FALLBACK_STYLE
+  }
+
+  // Check if we should use new-york-v4 for Tailwind v4.
+  // We assume that if tailwind.config is empty, we're using Tailwind v4.
+  if (config.style === "new-york" && config.tailwind?.config === "") {
+    return FALLBACK_STYLE
+  }
+
+  return config.style
+}
+
+export function configWithDefaults(config?: Partial<Config> | Config) {
+  const baseConfig = createConfig({
+    style: FALLBACK_STYLE,
+    registries: BUILTIN_REGISTRIES,
+  })
+
+  if (!config) {
+    return baseConfig
+  }
+
+  return configSchema.parse(
+    deepmerge(baseConfig, {
+      ...config,
+      style: resolveStyleFromConfig(config),
+      registries: { ...BUILTIN_REGISTRIES, ...config.registries },
+    })
+  )
+}
diff --git a/packages/shadcn/src/registry/constants.ts b/packages/shadcn/src/registry/constants.ts
new file mode 100644
index 00000000000..a11e90bd4f3
--- /dev/null
+++ b/packages/shadcn/src/registry/constants.ts
@@ -0,0 +1,174 @@
+import { registryConfigSchema } from "@/src/schema"
+import { z } from "zod"
+
+export const REGISTRY_URL =
+  process.env.REGISTRY_URL ?? "https://ui.shadcn.com/r"
+
+export const FALLBACK_STYLE = "new-york-v4"
+
+export const BASE_COLORS = [
+  {
+    name: "neutral",
+    label: "Neutral",
+  },
+  {
+    name: "gray",
+    label: "Gray",
+  },
+  {
+    name: "zinc",
+    label: "Zinc",
+  },
+  {
+    name: "stone",
+    label: "Stone",
+  },
+  {
+    name: "slate",
+    label: "Slate",
+  },
+] as const
+
+// Built-in registries that are always available and cannot be overridden
+export const BUILTIN_REGISTRIES: z.infer<typeof registryConfigSchema> = {
+  "@shadcn": `${REGISTRY_URL}/styles/{style}/{name}.json`,
+}
+
+export const BUILTIN_MODULES = new Set([
+  [
+    // Node.js built-in modules
+    // From https://github.com/sindresorhus/builtin-modules.
+    "node:assert",
+    "assert",
+    "node:assert/strict",
+    "assert/strict",
+    "node:async_hooks",
+    "async_hooks",
+    "node:buffer",
+    "buffer",
+    "node:child_process",
+    "child_process",
+    "node:cluster",
+    "cluster",
+    "node:console",
+    "console",
+    "node:constants",
+    "constants",
+    "node:crypto",
+    "crypto",
+    "node:dgram",
+    "dgram",
+    "node:diagnostics_channel",
+    "diagnostics_channel",
+    "node:dns",
+    "dns",
+    "node:dns/promises",
+    "dns/promises",
+    "node:domain",
+    "domain",
+    "node:events",
+    "events",
+    "node:fs",
+    "fs",
+    "node:fs/promises",
+    "fs/promises",
+    "node:http",
+    "http",
+    "node:http2",
+    "http2",
+    "node:https",
+    "https",
+    "node:inspector",
+    "inspector",
+    "node:inspector/promises",
+    "inspector/promises",
+    "node:module",
+    "module",
+    "node:net",
+    "net",
+    "node:os",
+    "os",
+    "node:path",
+    "path",
+    "node:path/posix",
+    "path/posix",
+    "node:path/win32",
+    "path/win32",
+    "node:perf_hooks",
+    "perf_hooks",
+    "node:process",
+    "process",
+    "node:querystring",
+    "querystring",
+    "node:quic",
+    "node:readline",
+    "readline",
+    "node:readline/promises",
+    "readline/promises",
+    "node:repl",
+    "repl",
+    "node:sea",
+    "node:sqlite",
+    "node:stream",
+    "stream",
+    "node:stream/consumers",
+    "stream/consumers",
+    "node:stream/promises",
+    "stream/promises",
+    "node:stream/web",
+    "stream/web",
+    "node:string_decoder",
+    "string_decoder",
+    "node:test",
+    "node:test/reporters",
+    "node:timers",
+    "timers",
+    "node:timers/promises",
+    "timers/promises",
+    "node:tls",
+    "tls",
+    "node:trace_events",
+    "trace_events",
+    "node:tty",
+    "tty",
+    "node:url",
+    "url",
+    "node:util",
+    "util",
+    "node:util/types",
+    "util/types",
+    "node:v8",
+    "v8",
+    "node:vm",
+    "vm",
+    "node:wasi",
+    "wasi",
+    "node:worker_threads",
+    "worker_threads",
+    "node:zlib",
+    "zlib",
+
+    // Bun built-in modules.
+    "bun",
+    "bun:test",
+    "bun:sqlite",
+    "bun:ffi",
+    "bun:jsc",
+    "bun:internal",
+  ],
+])
+
+export const DEPRECATED_COMPONENTS = [
+  {
+    name: "toast",
+    deprecatedBy: "sonner",
+    message:
+      "The toast component is deprecated. Use the sonner component instead.",
+  },
+  {
+    name: "toaster",
+    deprecatedBy: "sonner",
+    message:
+      "The toaster component is deprecated. Use the sonner component instead.",
+  },
+]
diff --git a/packages/shadcn/src/registry/context.ts b/packages/shadcn/src/registry/context.ts
new file mode 100644
index 00000000000..9de7d3e4172
--- /dev/null
+++ b/packages/shadcn/src/registry/context.ts
@@ -0,0 +1,24 @@
+interface RegistryContext {
+  headers: Record<string, Record<string, string>>
+}
+
+let context: RegistryContext = {
+  headers: {},
+}
+
+export function setRegistryHeaders(
+  headers: Record<string, Record<string, string>>
+) {
+  // Merge new headers with existing ones to preserve headers for nested dependencies
+  context.headers = { ...context.headers, ...headers }
+}
+
+export function getRegistryHeadersFromContext(
+  url: string
+): Record<string, string> {
+  return context.headers[url] || {}
+}
+
+export function clearRegistryContext() {
+  context.headers = {}
+}
diff --git a/packages/shadcn/src/registry/env.test.ts b/packages/shadcn/src/registry/env.test.ts
new file mode 100644
index 00000000000..8712b89ad7c
--- /dev/null
+++ b/packages/shadcn/src/registry/env.test.ts
@@ -0,0 +1,46 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
+import { afterEach, beforeEach, describe, expect, it } from "vitest"
+
+import { expandEnvVars, extractEnvVars } from "./env"
+
+describe("expandEnvVars", () => {
+  beforeEach(() => {
+    process.env.TEST_TOKEN = "abc123"
+    process.env.API_KEY = "secret"
+  })
+
+  afterEach(() => {
+    delete process.env.TEST_TOKEN
+    delete process.env.API_KEY
+  })
+
+  it("should expand environment variables", () => {
+    expect(expandEnvVars("Bearer ${TEST_TOKEN}")).toBe("Bearer abc123")
+    expect(expandEnvVars("key=${API_KEY}&token=${TEST_TOKEN}")).toBe(
+      "key=secret&token=abc123"
+    )
+  })
+
+  it("should replace missing env vars with empty string", () => {
+    expect(expandEnvVars("Bearer ${MISSING_VAR}")).toBe("Bearer ")
+    expect(expandEnvVars("${VAR1}:${VAR2}")).toBe(":")
+  })
+
+  it("should handle strings without env vars", () => {
+    expect(expandEnvVars("no variables here")).toBe("no variables here")
+    expect(expandEnvVars("https://example.com")).toBe("https://example.com")
+  })
+})
+
+describe("extractEnvVars", () => {
+  it("should extract environment variable names", () => {
+    expect(extractEnvVars("Bearer ${TOKEN}")).toEqual(["TOKEN"])
+    expect(extractEnvVars("${VAR1} and ${VAR2}")).toEqual(["VAR1", "VAR2"])
+    expect(extractEnvVars("${SAME} and ${SAME}")).toEqual(["SAME", "SAME"])
+  })
+
+  it("should return empty array for no variables", () => {
+    expect(extractEnvVars("no variables")).toEqual([])
+    expect(extractEnvVars("")).toEqual([])
+  })
+})
diff --git a/packages/shadcn/src/registry/env.ts b/packages/shadcn/src/registry/env.ts
new file mode 100644
index 00000000000..463ade8a5e6
--- /dev/null
+++ b/packages/shadcn/src/registry/env.ts
@@ -0,0 +1,15 @@
+export function expandEnvVars(value: string) {
+  return value.replace(/\${(\w+)}/g, (_match, key) => process.env[key] || "")
+}
+
+export function extractEnvVars(value: string) {
+  const vars: string[] = []
+  const regex = /\${(\w+)}/g
+  let match: RegExpExecArray | null
+
+  while ((match = regex.exec(value)) !== null) {
+    vars.push(match[1])
+  }
+
+  return vars
+}
diff --git a/packages/shadcn/src/registry/errors.ts b/packages/shadcn/src/registry/errors.ts
new file mode 100644
index 00000000000..67e21c9a32d
--- /dev/null
+++ b/packages/shadcn/src/registry/errors.ts
@@ -0,0 +1,325 @@
+import { z } from "zod"
+
+// Error codes for programmatic error handling
+export const RegistryErrorCode = {
+  // Network errors
+  NETWORK_ERROR: "NETWORK_ERROR",
+  NOT_FOUND: "NOT_FOUND",
+  UNAUTHORIZED: "UNAUTHORIZED",
+  FORBIDDEN: "FORBIDDEN",
+  FETCH_ERROR: "FETCH_ERROR",
+
+  // Configuration errors
+  NOT_CONFIGURED: "NOT_CONFIGURED",
+  INVALID_CONFIG: "INVALID_CONFIG",
+  MISSING_ENV_VARS: "MISSING_ENV_VARS",
+
+  // File system errors
+  LOCAL_FILE_ERROR: "LOCAL_FILE_ERROR",
+
+  // Parsing errors
+  PARSE_ERROR: "PARSE_ERROR",
+  VALIDATION_ERROR: "VALIDATION_ERROR",
+
+  // Generic errors
+  UNKNOWN_ERROR: "UNKNOWN_ERROR",
+} as const
+
+export type RegistryErrorCode =
+  (typeof RegistryErrorCode)[keyof typeof RegistryErrorCode]
+
+export class RegistryError extends Error {
+  public readonly code: RegistryErrorCode
+  public readonly statusCode?: number
+  public readonly context?: Record<string, unknown>
+  public readonly suggestion?: string
+  public readonly timestamp: Date
+  public readonly cause?: unknown
+
+  constructor(
+    message: string,
+    options: {
+      code?: RegistryErrorCode
+      statusCode?: number
+      cause?: unknown
+      context?: Record<string, unknown>
+      suggestion?: string
+    } = {}
+  ) {
+    super(message)
+    this.name = "RegistryError"
+    this.code = options.code || RegistryErrorCode.UNKNOWN_ERROR
+    this.statusCode = options.statusCode
+    this.cause = options.cause
+    this.context = options.context
+    this.suggestion = options.suggestion
+    this.timestamp = new Date()
+
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, this.constructor)
+    }
+  }
+
+  toJSON() {
+    return {
+      name: this.name,
+      message: this.message,
+      code: this.code,
+      statusCode: this.statusCode,
+      context: this.context,
+      suggestion: this.suggestion,
+      timestamp: this.timestamp,
+      stack: this.stack,
+    }
+  }
+}
+
+export class RegistryNotFoundError extends RegistryError {
+  constructor(public readonly url: string, cause?: unknown) {
+    const message = `The item at ${url} was not found. It may not exist at the registry.`
+
+    super(message, {
+      code: RegistryErrorCode.NOT_FOUND,
+      statusCode: 404,
+      cause,
+      context: { url },
+      suggestion:
+        "Check if the item name is correct and the registry URL is accessible.",
+    })
+    this.name = "RegistryNotFoundError"
+  }
+}
+
+export class RegistryUnauthorizedError extends RegistryError {
+  constructor(public readonly url: string, cause?: unknown) {
+    const message = `You are not authorized to access the item at ${url}. If this is a remote registry, you may need to authenticate.`
+
+    super(message, {
+      code: RegistryErrorCode.UNAUTHORIZED,
+      statusCode: 401,
+      cause,
+      context: { url },
+      suggestion:
+        "Check your authentication credentials and environment variables.",
+    })
+    this.name = "RegistryUnauthorizedError"
+  }
+}
+
+export class RegistryForbiddenError extends RegistryError {
+  constructor(public readonly url: string, cause?: unknown) {
+    const message = `You are not authorized to access the item at ${url}. If this is a remote registry, you may need to authenticate.`
+
+    super(message, {
+      code: RegistryErrorCode.FORBIDDEN,
+      statusCode: 403,
+      cause,
+      context: { url },
+      suggestion:
+        "Check your authentication credentials and environment variables.",
+    })
+    this.name = "RegistryForbiddenError"
+  }
+}
+
+export class RegistryFetchError extends RegistryError {
+  constructor(
+    public readonly url: string,
+    statusCode?: number,
+    public readonly responseBody?: string,
+    cause?: unknown
+  ) {
+    // Use the error detail from the server if available
+    const baseMessage = statusCode
+      ? `Failed to fetch from registry (${statusCode}): ${url}`
+      : `Failed to fetch from registry: ${url}`
+
+    const message =
+      typeof cause === "string" && cause
+        ? `${baseMessage} - ${cause}`
+        : baseMessage
+
+    let suggestion = "Check your network connection and try again."
+    if (statusCode === 404) {
+      suggestion =
+        "The requested resource was not found. Check the URL or item name."
+    } else if (statusCode === 500) {
+      suggestion = "The registry server encountered an error. Try again later."
+    } else if (statusCode && statusCode >= 400 && statusCode < 500) {
+      suggestion = "There was a client error. Check your request parameters."
+    }
+
+    super(message, {
+      code: RegistryErrorCode.FETCH_ERROR,
+      statusCode,
+      cause,
+      context: { url, responseBody },
+      suggestion,
+    })
+    this.name = "RegistryFetchError"
+  }
+}
+
+export class RegistryNotConfiguredError extends RegistryError {
+  constructor(public readonly registryName: string | null) {
+    const message = registryName
+      ? `Unknown registry "${registryName}". Make sure it is defined in components.json as follows:
+{
+  "registries": {
+    "${registryName}": "[URL_TO_REGISTRY]"
+  }
+}`
+      : `Unknown registry. Make sure it is defined in components.json under "registries".`
+
+    super(message, {
+      code: RegistryErrorCode.NOT_CONFIGURED,
+      context: { registryName },
+      suggestion:
+        "Add the registry configuration to your components.json file. Consult the registry documentation for the correct format.",
+    })
+    this.name = "RegistryNotConfiguredError"
+  }
+}
+
+export class RegistryLocalFileError extends RegistryError {
+  constructor(public readonly filePath: string, cause?: unknown) {
+    super(`Failed to read local registry file: ${filePath}`, {
+      code: RegistryErrorCode.LOCAL_FILE_ERROR,
+      cause,
+      context: { filePath },
+      suggestion: "Check if the file exists and you have read permissions.",
+    })
+    this.name = "RegistryLocalFileError"
+  }
+}
+
+export class RegistryParseError extends RegistryError {
+  public readonly parseError: unknown
+
+  constructor(public readonly item: string, parseError: unknown) {
+    let message = `Failed to parse registry item: ${item}`
+
+    if (parseError instanceof z.ZodError) {
+      message = `Failed to parse registry item: ${item}\n${parseError.errors
+        .map((e) => `  - ${e.path.join(".")}: ${e.message}`)
+        .join("\n")}`
+    }
+
+    super(message, {
+      code: RegistryErrorCode.PARSE_ERROR,
+      cause: parseError,
+      context: { item },
+      suggestion:
+        "The registry item may be corrupted or have an invalid format. Please make sure it returns a valid JSON object. See https://ui.shadcn.com/schema/registry-item.json.",
+    })
+
+    this.parseError = parseError
+    this.name = "RegistryParseError"
+  }
+}
+
+export class RegistryMissingEnvironmentVariablesError extends RegistryError {
+  constructor(
+    public readonly registryName: string,
+    public readonly missingVars: string[]
+  ) {
+    const message =
+      `Registry "${registryName}" requires the following environment variables:\n\n` +
+      missingVars.map((v) => `  • ${v}`).join("\n")
+
+    super(message, {
+      code: RegistryErrorCode.MISSING_ENV_VARS,
+      context: { registryName, missingVars },
+      suggestion:
+        "Set the required environment variables to your .env or .env.local file.",
+    })
+    this.name = "RegistryMissingEnvironmentVariablesError"
+  }
+}
+
+export class RegistryInvalidNamespaceError extends RegistryError {
+  constructor(public readonly name: string) {
+    const message = `Invalid registry namespace: "${name}". Registry names must start with @ (e.g., @shadcn, @v0).`
+
+    super(message, {
+      code: RegistryErrorCode.VALIDATION_ERROR,
+      context: { name },
+      suggestion:
+        "Use a valid registry name starting with @ or provide a direct URL to the registry.",
+    })
+    this.name = "RegistryInvalidNamespaceError"
+  }
+}
+
+export class ConfigMissingError extends RegistryError {
+  constructor(public readonly cwd: string) {
+    const message = `No components.json found in ${cwd} or parent directories.`
+
+    super(message, {
+      code: RegistryErrorCode.NOT_CONFIGURED,
+      context: { cwd },
+      suggestion:
+        "Run 'npx shadcn@latest init' to create a components.json file, or check that you're in the correct directory.",
+    })
+    this.name = "ConfigMissingError"
+  }
+}
+
+export class ConfigParseError extends RegistryError {
+  constructor(public readonly cwd: string, parseError: unknown) {
+    let message = `Invalid components.json configuration in ${cwd}.`
+
+    if (parseError instanceof z.ZodError) {
+      message = `Invalid components.json configuration in ${cwd}:\n${parseError.errors
+        .map((e) => `  - ${e.path.join(".")}: ${e.message}`)
+        .join("\n")}`
+    }
+
+    super(message, {
+      code: RegistryErrorCode.INVALID_CONFIG,
+      cause: parseError,
+      context: { cwd },
+      suggestion:
+        "Check your components.json file for syntax errors or invalid configuration. Run 'npx shadcn@latest init' to regenerate a valid configuration.",
+    })
+    this.name = "ConfigParseError"
+  }
+}
+
+export class RegistriesIndexParseError extends RegistryError {
+  public readonly parseError: unknown
+
+  constructor(parseError: unknown) {
+    let message = "Failed to parse registries index"
+
+    if (parseError instanceof z.ZodError) {
+      const invalidNamespaces = parseError.errors
+        .filter((e) => e.path.length > 0)
+        .map((e) => `"${e.path[0]}"`)
+        .filter((v, i, arr) => arr.indexOf(v) === i) // remove duplicates
+
+      if (invalidNamespaces.length > 0) {
+        message = `Failed to parse registries index. Invalid registry namespace(s): ${invalidNamespaces.join(
+          ", "
+        )}\n${parseError.errors
+          .map((e) => `  - ${e.path.join(".")}: ${e.message}`)
+          .join("\n")}`
+      } else {
+        message = `Failed to parse registries index:\n${parseError.errors
+          .map((e) => `  - ${e.path.join(".")}: ${e.message}`)
+          .join("\n")}`
+      }
+    }
+
+    super(message, {
+      code: RegistryErrorCode.PARSE_ERROR,
+      cause: parseError,
+      context: { parseError },
+      suggestion:
+        "The registries index may be corrupted or have invalid registry namespace format. Registry names must start with @ (e.g., @shadcn, @example).",
+    })
+
+    this.parseError = parseError
+    this.name = "RegistriesIndexParseError"
+  }
+}
diff --git a/packages/shadcn/src/registry/fetcher.test.ts b/packages/shadcn/src/registry/fetcher.test.ts
new file mode 100644
index 00000000000..7061e53e1aa
--- /dev/null
+++ b/packages/shadcn/src/registry/fetcher.test.ts
@@ -0,0 +1,222 @@
+import { REGISTRY_URL } from "@/src/registry/constants"
+import {
+  RegistryFetchError,
+  RegistryForbiddenError,
+  RegistryNotFoundError,
+  RegistryUnauthorizedError,
+} from "@/src/registry/errors"
+import { HttpResponse, http } from "msw"
+import { setupServer } from "msw/node"
+import { afterAll, afterEach, beforeAll, describe, expect, it } from "vitest"
+
+import { clearRegistryCache, fetchRegistry } from "./fetcher"
+
+const server = setupServer(
+  http.get(`${REGISTRY_URL}/test.json`, () => {
+    return HttpResponse.json({
+      name: "test",
+      type: "registry:ui",
+    })
+  }),
+  http.get(`${REGISTRY_URL}/error.json`, () => {
+    return HttpResponse.error()
+  }),
+  http.get(`${REGISTRY_URL}/not-found.json`, () => {
+    return new HttpResponse(null, { status: 404 })
+  }),
+  http.get(`${REGISTRY_URL}/unauthorized.json`, () => {
+    return new HttpResponse(null, { status: 401 })
+  }),
+  http.get(`${REGISTRY_URL}/forbidden.json`, () => {
+    return new HttpResponse(null, { status: 403 })
+  }),
+  http.get("https://external.com/component.json", () => {
+    return HttpResponse.json({
+      name: "external",
+      type: "registry:ui",
+    })
+  })
+)
+
+beforeAll(() => server.listen())
+afterEach(() => {
+  server.resetHandlers()
+  clearRegistryCache()
+})
+afterAll(() => server.close())
+
+describe("fetchRegistry", () => {
+  it("should fetch a single registry item", async () => {
+    const result = await fetchRegistry(["test.json"])
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({
+      name: "test",
+      type: "registry:ui",
+    })
+  })
+
+  it("should fetch multiple registry items in parallel", async () => {
+    const result = await fetchRegistry(["test.json", "test.json"])
+    expect(result).toHaveLength(2)
+    expect(result[0]).toMatchObject({ name: "test" })
+    expect(result[1]).toMatchObject({ name: "test" })
+  })
+
+  it("should fetch from external URLs", async () => {
+    const result = await fetchRegistry(["https://external.com/component.json"])
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({
+      name: "external",
+      type: "registry:ui",
+    })
+  })
+
+  it("should use cache when enabled", async () => {
+    // First fetch - should hit the server
+    const result1 = await fetchRegistry(["test.json"], { useCache: true })
+    expect(result1[0]).toMatchObject({ name: "test" })
+
+    // Second fetch - should use cache
+    const result2 = await fetchRegistry(["test.json"], { useCache: true })
+    expect(result2[0]).toMatchObject({ name: "test" })
+  })
+
+  it("should not use cache when disabled", async () => {
+    // Mock the server to return different responses
+    let callCount = 0
+    server.use(
+      http.get(`${REGISTRY_URL}/cache-test.json`, () => {
+        callCount++
+        return HttpResponse.json({
+          name: `test-${callCount}`,
+          type: "registry:ui",
+        })
+      })
+    )
+
+    const result1 = await fetchRegistry(["cache-test.json"], {
+      useCache: false,
+    })
+    expect(result1[0]).toMatchObject({ name: "test-1" })
+
+    const result2 = await fetchRegistry(["cache-test.json"], {
+      useCache: false,
+    })
+    expect(result2[0]).toMatchObject({ name: "test-2" })
+  })
+
+  it("should handle 404 errors", async () => {
+    await expect(fetchRegistry(["not-found.json"])).rejects.toThrow(
+      RegistryNotFoundError
+    )
+  })
+
+  it("should handle 401 errors", async () => {
+    await expect(fetchRegistry(["unauthorized.json"])).rejects.toThrow(
+      RegistryUnauthorizedError
+    )
+  })
+
+  it("should handle 403 errors", async () => {
+    await expect(fetchRegistry(["forbidden.json"])).rejects.toThrow(
+      RegistryForbiddenError
+    )
+  })
+
+  it("should handle network errors", async () => {
+    await expect(fetchRegistry(["error.json"])).rejects.toThrow()
+  })
+
+  it("should fetch registry data", async () => {
+    const paths = ["styles/new-york/button.json"]
+    const result = await fetchRegistry(paths)
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({
+      name: "button",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-slot"],
+    })
+  })
+
+  it("should use cache for subsequent requests", async () => {
+    const paths = ["styles/new-york/button.json"]
+    let fetchCount = 0
+
+    // Clear any existing cache before test
+    clearRegistryCache()
+
+    // Define the handler with counter before making requests
+    server.use(
+      http.get(`${REGISTRY_URL}/styles/new-york/button.json`, async () => {
+        // Add a small delay to simulate network latency
+        await new Promise((resolve) => setTimeout(resolve, 10))
+        fetchCount++
+        return HttpResponse.json({
+          name: "button",
+          type: "registry:ui",
+          dependencies: ["@radix-ui/react-slot"],
+          files: [
+            {
+              path: "registry/new-york/ui/button.tsx",
+              content: "// button component content",
+              type: "registry:ui",
+            },
+          ],
+        })
+      })
+    )
+
+    // First request
+    const result1 = await fetchRegistry(paths)
+    expect(fetchCount).toBe(1)
+    expect(result1).toHaveLength(1)
+    expect(result1[0]).toMatchObject({ name: "button" })
+
+    // Second request - should use cache
+    const result2 = await fetchRegistry(paths)
+    expect(fetchCount).toBe(1) // Should still be 1
+    expect(result2).toHaveLength(1)
+    expect(result2[0]).toMatchObject({ name: "button" })
+
+    // Third request - double check cache
+    const result3 = await fetchRegistry(paths)
+    expect(fetchCount).toBe(1) // Should still be 1
+    expect(result3).toHaveLength(1)
+    expect(result3[0]).toMatchObject({ name: "button" })
+  })
+
+  it("should handle multiple paths", async () => {
+    const paths = ["styles/new-york/button.json", "styles/new-york/card.json"]
+    const result = await fetchRegistry(paths)
+
+    expect(result).toHaveLength(2)
+    expect(result[0]).toMatchObject({ name: "button" })
+    expect(result[1]).toMatchObject({ name: "card" })
+  })
+})
+
+describe("clearRegistryCache", () => {
+  it("should clear the cache", async () => {
+    // First fetch - should hit the server
+    const result1 = await fetchRegistry(["test.json"], { useCache: true })
+    expect(result1[0]).toMatchObject({ name: "test" })
+
+    // Clear cache
+    clearRegistryCache()
+
+    // Mock the server to return different response
+    server.use(
+      http.get(`${REGISTRY_URL}/test.json`, () => {
+        return HttpResponse.json({
+          name: "test-after-clear",
+          type: "registry:ui",
+        })
+      })
+    )
+
+    // Third fetch - should hit the server again after cache clear
+    const result3 = await fetchRegistry(["test.json"], { useCache: true })
+    expect(result3[0]).toMatchObject({ name: "test-after-clear" })
+  })
+})
diff --git a/packages/shadcn/src/registry/fetcher.ts b/packages/shadcn/src/registry/fetcher.ts
new file mode 100644
index 00000000000..0e87aa50c70
--- /dev/null
+++ b/packages/shadcn/src/registry/fetcher.ts
@@ -0,0 +1,156 @@
+import { promises as fs } from "fs"
+import { homedir } from "os"
+import path from "path"
+import { resolveRegistryUrl } from "@/src/registry/builder"
+import { getRegistryHeadersFromContext } from "@/src/registry/context"
+import {
+  RegistryFetchError,
+  RegistryForbiddenError,
+  RegistryLocalFileError,
+  RegistryNotFoundError,
+  RegistryParseError,
+  RegistryUnauthorizedError,
+} from "@/src/registry/errors"
+import { registryItemSchema } from "@/src/schema"
+import { HttpsProxyAgent } from "https-proxy-agent"
+import fetch from "node-fetch"
+import { z } from "zod"
+
+const agent = process.env.https_proxy
+  ? new HttpsProxyAgent(process.env.https_proxy)
+  : undefined
+
+const registryCache = new Map<string, Promise<any>>()
+
+export function clearRegistryCache() {
+  registryCache.clear()
+}
+
+export async function fetchRegistry(
+  paths: string[],
+  options: { useCache?: boolean } = {}
+) {
+  options = {
+    useCache: true,
+    ...options,
+  }
+
+  try {
+    const results = await Promise.all(
+      paths.map(async (path) => {
+        const url = resolveRegistryUrl(path)
+
+        // Check cache first if caching is enabled
+        if (options.useCache && registryCache.has(url)) {
+          return registryCache.get(url)
+        }
+
+        // Store the promise in the cache before awaiting if caching is enabled.
+        const fetchPromise = (async () => {
+          // Get headers from context for this URL.
+          const headers = getRegistryHeadersFromContext(url)
+
+          const response = await fetch(url, {
+            agent,
+            headers: {
+              ...headers,
+            },
+          })
+
+          if (!response.ok) {
+            let messageFromServer = undefined
+
+            if (
+              response.headers.get("content-type")?.includes("application/json")
+            ) {
+              const json = await response.json()
+              const parsed = z
+                .object({
+                  // RFC 7807.
+                  detail: z.string().optional(),
+                  title: z.string().optional(),
+                  // Standard error response.
+                  message: z.string().optional(),
+                  error: z.string().optional(),
+                })
+                .safeParse(json)
+
+              if (parsed.success) {
+                // Prefer RFC 7807 detail field, then message field.
+                messageFromServer = parsed.data.detail || parsed.data.message
+
+                if (parsed.data.error) {
+                  messageFromServer = `[${parsed.data.error}] ${messageFromServer}`
+                }
+              }
+            }
+
+            if (response.status === 401) {
+              throw new RegistryUnauthorizedError(url, messageFromServer)
+            }
+
+            if (response.status === 404) {
+              throw new RegistryNotFoundError(url, messageFromServer)
+            }
+
+            if (response.status === 403) {
+              throw new RegistryForbiddenError(url, messageFromServer)
+            }
+
+            throw new RegistryFetchError(
+              url,
+              response.status,
+              messageFromServer
+            )
+          }
+
+          return response.json()
+        })()
+
+        if (options.useCache) {
+          registryCache.set(url, fetchPromise)
+        }
+        return fetchPromise
+      })
+    )
+
+    return results
+  } catch (error) {
+    throw error
+  }
+}
+
+export async function fetchRegistryLocal(filePath: string) {
+  try {
+    // Handle tilde expansion for home directory
+    let expandedPath = filePath
+    if (filePath.startsWith("~/")) {
+      expandedPath = path.join(homedir(), filePath.slice(2))
+    }
+
+    const resolvedPath = path.resolve(expandedPath)
+    const content = await fs.readFile(resolvedPath, "utf8")
+    const parsed = JSON.parse(content)
+
+    try {
+      return registryItemSchema.parse(parsed)
+    } catch (error) {
+      throw new RegistryParseError(filePath, error)
+    }
+  } catch (error) {
+    // Check if this is a file not found error
+    if (
+      error instanceof Error &&
+      (error.message.includes("ENOENT") ||
+        error.message.includes("no such file"))
+    ) {
+      throw new RegistryLocalFileError(filePath, error)
+    }
+    // Re-throw parse errors as-is
+    if (error instanceof RegistryParseError) {
+      throw error
+    }
+    // For other errors (like JSON parse errors), throw as local file error
+    throw new RegistryLocalFileError(filePath, error)
+  }
+}
diff --git a/packages/shadcn/src/registry/index.ts b/packages/shadcn/src/registry/index.ts
new file mode 100644
index 00000000000..8ea1eb48b56
--- /dev/null
+++ b/packages/shadcn/src/registry/index.ts
@@ -0,0 +1,22 @@
+export {
+  getRegistryItems,
+  resolveRegistryItems,
+  getRegistry,
+  getRegistriesIndex,
+} from "./api"
+
+export { searchRegistries } from "./search"
+
+export {
+  RegistryError,
+  RegistryNotFoundError,
+  RegistryUnauthorizedError,
+  RegistryForbiddenError,
+  RegistryFetchError,
+  RegistryNotConfiguredError,
+  RegistryLocalFileError,
+  RegistryParseError,
+  RegistriesIndexParseError,
+  RegistryMissingEnvironmentVariablesError,
+  RegistryInvalidNamespaceError,
+} from "./errors"
diff --git a/packages/shadcn/src/registry/namespaces.test.ts b/packages/shadcn/src/registry/namespaces.test.ts
new file mode 100644
index 00000000000..18d539b689d
--- /dev/null
+++ b/packages/shadcn/src/registry/namespaces.test.ts
@@ -0,0 +1,469 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { Config } from "../utils/get-config"
+import { BUILTIN_REGISTRIES } from "./constants"
+import { RegistryNotConfiguredError } from "./errors"
+import { resolveRegistryNamespaces } from "./namespaces"
+import * as resolver from "./resolver"
+
+// Mock the resolver module.
+vi.mock("./resolver", () => ({
+  fetchRegistryItems: vi.fn(),
+}))
+
+// Test utility function to check namespace configuration.
+function checkNamespaceConfiguration(
+  namespaces: string[],
+  config: Config
+): { configured: string[]; missing: string[] } {
+  const configured: string[] = []
+  const missing: string[] = []
+
+  for (const namespace of namespaces) {
+    if (BUILTIN_REGISTRIES[namespace] || config.registries?.[namespace]) {
+      configured.push(namespace)
+    } else {
+      missing.push(namespace)
+    }
+  }
+
+  return { configured, missing }
+}
+
+describe("resolveRegistryNamespaces", () => {
+  const mockConfig: Config = {
+    style: "default",
+    tailwind: {
+      config: "tailwind.config.js",
+      css: "app/globals.css",
+      baseColor: "slate",
+      cssVariables: true,
+    },
+    rsc: true,
+    tsx: true,
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks",
+    },
+    resolvedPaths: {
+      cwd: "/test",
+      tailwindConfig: "/test/tailwind.config.js",
+      tailwindCss: "/test/app/globals.css",
+      utils: "/test/lib/utils",
+      components: "/test/components",
+      ui: "/test/components/ui",
+      lib: "/test/lib",
+      hooks: "/test/hooks",
+    },
+    registries: {
+      ...BUILTIN_REGISTRIES,
+      "@foo": "https://foo.com/registry/{name}",
+      "@bar": "https://bar.com/registry/{name}",
+    },
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("should discover namespaces from direct components", async () => {
+    const mockFetchRegistryItems = vi.mocked(resolver.fetchRegistryItems)
+    mockFetchRegistryItems.mockResolvedValue([
+      { name: "button", type: "registry:ui", files: [], dependencies: [] },
+    ])
+
+    const namespaces = await resolveRegistryNamespaces(
+      ["@foo/button", "@bar/card"],
+      mockConfig
+    )
+
+    expect(namespaces).toEqual(["@foo", "@bar"])
+  })
+
+  it("should skip built-in registries", async () => {
+    const mockFetchRegistryItems = vi.mocked(resolver.fetchRegistryItems)
+    mockFetchRegistryItems.mockResolvedValue([
+      { name: "button", type: "registry:ui", files: [], dependencies: [] },
+    ])
+
+    const namespaces = await resolveRegistryNamespaces(
+      ["@shadcn/button", "@foo/card"],
+      mockConfig
+    )
+
+    expect(namespaces).toEqual(["@foo"])
+  })
+
+  it("should discover namespaces from registry dependencies", async () => {
+    const mockFetchRegistryItems = vi.mocked(resolver.fetchRegistryItems)
+    mockFetchRegistryItems
+      .mockResolvedValueOnce([
+        {
+          name: "dialog",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+          registryDependencies: ["@bar/button", "@baz/modal"],
+        },
+      ])
+      .mockResolvedValueOnce([
+        { name: "button", type: "registry:ui", files: [], dependencies: [] },
+      ])
+      .mockResolvedValueOnce([
+        { name: "modal", type: "registry:ui", files: [], dependencies: [] },
+      ])
+
+    const namespaces = await resolveRegistryNamespaces(
+      ["@foo/dialog"],
+      mockConfig
+    )
+
+    expect(namespaces).toContain("@foo")
+    expect(namespaces).toContain("@bar")
+    expect(namespaces).toContain("@baz")
+  })
+
+  it("should handle circular dependencies", async () => {
+    const mockFetchRegistryItems = vi.mocked(resolver.fetchRegistryItems)
+    mockFetchRegistryItems
+      .mockResolvedValueOnce([
+        {
+          name: "comp-a",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+          registryDependencies: ["@bar/comp-b"],
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          name: "comp-b",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+          registryDependencies: ["@foo/comp-a"],
+        },
+      ])
+
+    const namespaces = await resolveRegistryNamespaces(
+      ["@foo/comp-a"],
+      mockConfig
+    )
+
+    expect(namespaces).toEqual(["@foo", "@bar"])
+    // Should only fetch each component once despite circular reference.
+    expect(mockFetchRegistryItems).toHaveBeenCalledTimes(2)
+  })
+
+  it("should handle RegistryNotConfiguredError gracefully", async () => {
+    const mockFetchRegistryItems = vi.mocked(resolver.fetchRegistryItems)
+    mockFetchRegistryItems.mockRejectedValue(
+      new RegistryNotConfiguredError("@unknown")
+    )
+
+    const namespaces = await resolveRegistryNamespaces(
+      ["@unknown/button"],
+      mockConfig
+    )
+
+    expect(namespaces).toEqual(["@unknown"])
+  })
+
+  it("should continue processing on other errors", async () => {
+    const mockFetchRegistryItems = vi.mocked(resolver.fetchRegistryItems)
+    mockFetchRegistryItems
+      .mockRejectedValueOnce(new Error("Network error"))
+      .mockResolvedValueOnce([
+        { name: "card", type: "registry:ui", files: [], dependencies: [] },
+      ])
+
+    const namespaces = await resolveRegistryNamespaces(
+      ["@foo/button", "@bar/card"],
+      mockConfig
+    )
+
+    // Should still discover both @foo and @bar.
+    // @foo from the initial parse, @bar from successful fetch.
+    expect(namespaces).toContain("@foo")
+    expect(namespaces).toContain("@bar")
+    expect(namespaces).toHaveLength(2)
+  })
+
+  it("should handle deeply nested dependencies", async () => {
+    const mockFetchRegistryItems = vi.mocked(resolver.fetchRegistryItems)
+    mockFetchRegistryItems
+      .mockResolvedValueOnce([
+        {
+          name: "level-1",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+          registryDependencies: ["@level2/component"],
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          name: "component",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+          registryDependencies: ["@level3/deep"],
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          name: "deep",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+        },
+      ])
+
+    const namespaces = await resolveRegistryNamespaces(
+      ["@level1/level-1"],
+      mockConfig
+    )
+
+    expect(namespaces).toEqual(["@level1", "@level2", "@level3"])
+  })
+
+  it("should return unique namespaces", async () => {
+    const mockFetchRegistryItems = vi.mocked(resolver.fetchRegistryItems)
+    mockFetchRegistryItems
+      .mockResolvedValueOnce([
+        {
+          name: "comp-a",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+          registryDependencies: ["@foo/shared", "@bar/shared"],
+        },
+      ])
+      .mockResolvedValueOnce([
+        { name: "shared", type: "registry:ui", files: [], dependencies: [] },
+      ])
+      .mockResolvedValueOnce([
+        { name: "shared", type: "registry:ui", files: [], dependencies: [] },
+      ])
+
+    const namespaces = await resolveRegistryNamespaces(
+      ["@foo/comp-a", "@foo/comp-b", "@bar/comp-c"],
+      mockConfig
+    )
+
+    // Should not have duplicate @foo.
+    expect(namespaces).toEqual(["@foo", "@bar"])
+  })
+
+  it("should handle components without namespace", async () => {
+    const mockFetchRegistryItems = vi.mocked(resolver.fetchRegistryItems)
+    mockFetchRegistryItems.mockResolvedValue([
+      { name: "button", type: "registry:ui", files: [], dependencies: [] },
+    ])
+
+    const namespaces = await resolveRegistryNamespaces(
+      ["button", "@foo/card"],
+      mockConfig
+    )
+
+    expect(namespaces).toEqual(["@foo"])
+  })
+
+  it("should handle empty input", async () => {
+    const namespaces = await resolveRegistryNamespaces([], mockConfig)
+
+    expect(namespaces).toEqual([])
+    expect(resolver.fetchRegistryItems).not.toHaveBeenCalled()
+  })
+
+  it("should discover namespaces from components without namespaces but with registryDependencies", async () => {
+    const mockFetchRegistryItems = vi.mocked(resolver.fetchRegistryItems)
+    mockFetchRegistryItems
+      .mockResolvedValueOnce([
+        {
+          name: "my-component",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+          registryDependencies: ["@foo/dep1", "@bar/dep2"],
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          name: "dep1",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          name: "dep2",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+        },
+      ])
+
+    const namespaces = await resolveRegistryNamespaces(
+      ["button"], // Component without namespace
+      mockConfig
+    )
+
+    // Should discover namespaces from registryDependencies even though "button" has no namespace.
+    expect(namespaces).toEqual(["@foo", "@bar"])
+  })
+
+  it("should discover namespaces from URL components with registryDependencies", async () => {
+    const mockFetchRegistryItems = vi.mocked(resolver.fetchRegistryItems)
+    mockFetchRegistryItems
+      .mockResolvedValueOnce([
+        {
+          name: "to-8bitcn",
+          type: "registry:item",
+          files: [],
+          dependencies: [],
+          registryDependencies: ["@8bitcn/button"],
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          name: "branch",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          name: "button",
+          type: "registry:ui",
+          files: [],
+          dependencies: [],
+        },
+      ])
+
+    const namespaces = await resolveRegistryNamespaces(
+      ["https://api.npoint.io/2e006917dca7f7367495", "@ai-elements/branch"],
+      mockConfig
+    )
+
+    expect(namespaces).toContain("@8bitcn")
+    expect(namespaces).toContain("@ai-elements")
+
+    // Verify fetchRegistryItems was called with the correct arguments.
+    expect(mockFetchRegistryItems).toHaveBeenCalledWith(
+      ["https://api.npoint.io/2e006917dca7f7367495"],
+      mockConfig,
+      { useCache: true }
+    )
+    expect(mockFetchRegistryItems).toHaveBeenCalledWith(
+      ["@ai-elements/branch"],
+      mockConfig,
+      { useCache: true }
+    )
+    expect(mockFetchRegistryItems).toHaveBeenCalledWith(
+      ["@8bitcn/button"],
+      mockConfig,
+      { useCache: true }
+    )
+  })
+})
+
+describe("checkNamespaceConfiguration", () => {
+  const mockConfig: Config = {
+    style: "default",
+    tailwind: {
+      config: "tailwind.config.js",
+      css: "app/globals.css",
+      baseColor: "slate",
+      cssVariables: true,
+    },
+    rsc: true,
+    tsx: true,
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks",
+    },
+    resolvedPaths: {
+      cwd: "/test",
+      tailwindConfig: "/test/tailwind.config.js",
+      tailwindCss: "/test/app/globals.css",
+      utils: "/test/lib/utils",
+      components: "/test/components",
+      ui: "/test/components/ui",
+      lib: "/test/lib",
+      hooks: "/test/hooks",
+    },
+    registries: {
+      ...BUILTIN_REGISTRIES,
+      "@foo": "https://foo.com/registry/{name}",
+      "@bar": "https://bar.com/registry/{name}",
+    },
+  }
+
+  it("should identify configured namespaces", () => {
+    const result = checkNamespaceConfiguration(["@foo", "@bar"], mockConfig)
+
+    expect(result.configured).toEqual(["@foo", "@bar"])
+    expect(result.missing).toEqual([])
+  })
+
+  it("should identify missing namespaces", () => {
+    const result = checkNamespaceConfiguration(
+      ["@foo", "@unknown", "@missing"],
+      mockConfig
+    )
+
+    expect(result.configured).toEqual(["@foo"])
+    expect(result.missing).toEqual(["@unknown", "@missing"])
+  })
+
+  it("should handle built-in registries as configured", () => {
+    const result = checkNamespaceConfiguration(["@shadcn", "@foo"], mockConfig)
+
+    expect(result.configured).toEqual(["@shadcn", "@foo"])
+    expect(result.missing).toEqual([])
+  })
+
+  it("should handle empty input", () => {
+    const result = checkNamespaceConfiguration([], mockConfig)
+
+    expect(result.configured).toEqual([])
+    expect(result.missing).toEqual([])
+  })
+
+  it("should handle config without registries", () => {
+    const configWithoutRegistries: Config = {
+      ...mockConfig,
+      registries: undefined,
+    }
+
+    const result = checkNamespaceConfiguration(
+      ["@foo", "@bar"],
+      configWithoutRegistries
+    )
+
+    expect(result.configured).toEqual([])
+    expect(result.missing).toEqual(["@foo", "@bar"])
+  })
+
+  it("should handle mixed configured and missing namespaces", () => {
+    const result = checkNamespaceConfiguration(
+      ["@shadcn", "@foo", "@unknown", "@bar", "@missing"],
+      mockConfig
+    )
+
+    expect(result.configured).toContain("@shadcn")
+    expect(result.configured).toContain("@foo")
+    expect(result.configured).toContain("@bar")
+    expect(result.missing).toContain("@unknown")
+    expect(result.missing).toContain("@missing")
+  })
+})
diff --git a/packages/shadcn/src/registry/namespaces.ts b/packages/shadcn/src/registry/namespaces.ts
new file mode 100644
index 00000000000..8ea13185463
--- /dev/null
+++ b/packages/shadcn/src/registry/namespaces.ts
@@ -0,0 +1,63 @@
+import { BUILTIN_REGISTRIES } from "@/src/registry/constants"
+import { RegistryNotConfiguredError } from "@/src/registry/errors"
+import { parseRegistryAndItemFromString } from "@/src/registry/parser"
+import { fetchRegistryItems } from "@/src/registry/resolver"
+import { Config } from "@/src/utils/get-config"
+
+// Recursively discovers all registry namespaces including nested ones.
+export async function resolveRegistryNamespaces(
+  components: string[],
+  config: Config
+) {
+  const discoveredNamespaces = new Set<string>()
+  const visitedItems = new Set<string>()
+  const itemsToProcess = [...components]
+
+  while (itemsToProcess.length > 0) {
+    const currentItem = itemsToProcess.shift()!
+
+    if (visitedItems.has(currentItem)) {
+      continue
+    }
+    visitedItems.add(currentItem)
+
+    const { registry } = parseRegistryAndItemFromString(currentItem)
+    if (registry && !BUILTIN_REGISTRIES[registry]) {
+      discoveredNamespaces.add(registry)
+    }
+
+    try {
+      const [item] = await fetchRegistryItems([currentItem], config, {
+        useCache: true,
+      })
+
+      if (item?.registryDependencies) {
+        for (const dep of item.registryDependencies) {
+          const { registry: depRegistry } = parseRegistryAndItemFromString(dep)
+          if (depRegistry && !BUILTIN_REGISTRIES[depRegistry]) {
+            discoveredNamespaces.add(depRegistry)
+          }
+
+          if (!visitedItems.has(dep)) {
+            itemsToProcess.push(dep)
+          }
+        }
+      }
+    } catch (error) {
+      // If a registry is not configured, we still track it.
+      if (error instanceof RegistryNotConfiguredError) {
+        const { registry } = parseRegistryAndItemFromString(currentItem)
+        if (registry && !BUILTIN_REGISTRIES[registry]) {
+          discoveredNamespaces.add(registry)
+        }
+        continue
+      }
+
+      // For other errors (network, parsing, etc.), we skip this item
+      // but continue processing others to discover as many namespaces as possible.
+      continue
+    }
+  }
+
+  return Array.from(discoveredNamespaces)
+}
diff --git a/packages/shadcn/src/registry/parser.test.ts b/packages/shadcn/src/registry/parser.test.ts
new file mode 100644
index 00000000000..c40e80a4768
--- /dev/null
+++ b/packages/shadcn/src/registry/parser.test.ts
@@ -0,0 +1,252 @@
+import { describe, expect, it } from "vitest"
+
+import { parseRegistryAndItemFromString } from "./parser"
+
+describe("parseRegistryAndItemFromString", () => {
+  describe("valid registry items", () => {
+    it.each([
+      ["@v0/button", { registry: "@v0", item: "button" }],
+      ["@acme/data-table", { registry: "@acme", item: "data-table" }],
+      [
+        "@company/nested/component",
+        { registry: "@company", item: "nested/component" },
+      ],
+      ["@test/simple", { registry: "@test", item: "simple" }],
+      ["@my-registry/item", { registry: "@my-registry", item: "item" }],
+      ["@my_registry/item", { registry: "@my_registry", item: "item" }],
+      ["@123registry/item", { registry: "@123registry", item: "item" }],
+      ["@registry123/item", { registry: "@registry123", item: "item" }],
+      ["@r/item", { registry: "@r", item: "item" }],
+      [
+        "@very-long-registry-name/item",
+        { registry: "@very-long-registry-name", item: "item" },
+      ],
+    ])("should parse registry item: %s", (input, expected) => {
+      expect(parseRegistryAndItemFromString(input)).toEqual(expected)
+    })
+  })
+
+  describe("non-registry items", () => {
+    it.each([
+      ["button", { registry: null, item: "button" }],
+      ["components/button", { registry: null, item: "components/button" }],
+      ["v0/button", { registry: null, item: "v0/button" }],
+      ["@button", { registry: null, item: "@button" }],
+      ["button@", { registry: null, item: "button@" }],
+      ["@", { registry: null, item: "@" }],
+      ["@/button", { registry: null, item: "@/button" }],
+      ["@-registry/item", { registry: null, item: "@-registry/item" }],
+      ["@registry-/item", { registry: null, item: "@registry-/item" }],
+      ["@-registry-/item", { registry: null, item: "@-registry-/item" }],
+    ])(
+      "should return null registry for non-registry item: %s",
+      (input, expected) => {
+        expect(parseRegistryAndItemFromString(input)).toEqual(expected)
+      }
+    )
+  })
+
+  describe("URLs and external paths", () => {
+    it.each([
+      [
+        "https://example.com/button",
+        { registry: null, item: "https://example.com/button" },
+      ],
+      [
+        "http://localhost:3000/component",
+        { registry: null, item: "http://localhost:3000/component" },
+      ],
+      [
+        "file:///path/to/component",
+        { registry: null, item: "file:///path/to/component" },
+      ],
+      [
+        "ftp://example.com/file",
+        { registry: null, item: "ftp://example.com/file" },
+      ],
+      [
+        "//cdn.example.com/component",
+        { registry: null, item: "//cdn.example.com/component" },
+      ],
+    ])("should handle URLs: %s", (input, expected) => {
+      expect(parseRegistryAndItemFromString(input)).toEqual(expected)
+    })
+  })
+
+  describe("complex item paths", () => {
+    it.each([
+      ["@acme/ui/button", { registry: "@acme", item: "ui/button" }],
+      [
+        "@company/components/forms/input",
+        { registry: "@company", item: "components/forms/input" },
+      ],
+      [
+        "@test/nested/deep/path/component",
+        { registry: "@test", item: "nested/deep/path/component" },
+      ],
+      [
+        "@registry/path/with/multiple/slashes",
+        { registry: "@registry", item: "path/with/multiple/slashes" },
+      ],
+    ])("should handle complex item paths: %s", (input, expected) => {
+      expect(parseRegistryAndItemFromString(input)).toEqual(expected)
+    })
+  })
+
+  describe("edge cases and special characters", () => {
+    it.each([
+      ["", { registry: null, item: "" }],
+      ["@", { registry: null, item: "@" }],
+      ["@@", { registry: null, item: "@@" }],
+      ["@@@", { registry: null, item: "@@@" }],
+      ["@/", { registry: null, item: "@/" }],
+      ["@//", { registry: null, item: "@//" }],
+      ["@/item", { registry: null, item: "@/item" }],
+      ["@registry/", { registry: null, item: "@registry/" }],
+      ["@registry//", { registry: "@registry", item: "/" }],
+      ["@registry///", { registry: "@registry", item: "//" }],
+    ])("should handle edge cases: %s", (input, expected) => {
+      expect(parseRegistryAndItemFromString(input)).toEqual(expected)
+    })
+  })
+
+  describe("registry names with special characters", () => {
+    it.each([
+      ["@my-registry/item", { registry: "@my-registry", item: "item" }],
+      ["@my_registry/item", { registry: "@my_registry", item: "item" }],
+      [
+        "@my-registry-name/item",
+        { registry: "@my-registry-name", item: "item" },
+      ],
+      [
+        "@my_registry_name/item",
+        { registry: "@my_registry_name", item: "item" },
+      ],
+      [
+        "@my-registry_name/item",
+        { registry: "@my-registry_name", item: "item" },
+      ],
+      [
+        "@my_registry-name/item",
+        { registry: "@my_registry-name", item: "item" },
+      ],
+      ["@123-registry/item", { registry: "@123-registry", item: "item" }],
+      ["@registry-123/item", { registry: "@registry-123", item: "item" }],
+      ["@123_registry/item", { registry: "@123_registry", item: "item" }],
+      ["@registry_123/item", { registry: "@registry_123", item: "item" }],
+    ])(
+      "should handle registry names with special characters: %s",
+      (input, expected) => {
+        expect(parseRegistryAndItemFromString(input)).toEqual(expected)
+      }
+    )
+  })
+
+  describe("invalid registry patterns", () => {
+    it.each([
+      ["@-registry/item", { registry: null, item: "@-registry/item" }],
+      ["@registry-/item", { registry: null, item: "@registry-/item" }],
+      ["@-registry-/item", { registry: null, item: "@-registry-/item" }],
+      ["@-item", { registry: null, item: "@-item" }],
+      ["@item-", { registry: null, item: "@item-" }],
+      ["@-item-", { registry: null, item: "@-item-" }],
+      ["@_registry/item", { registry: null, item: "@_registry/item" }],
+      ["@registry_/item", { registry: null, item: "@registry_/item" }],
+      ["@_registry_/item", { registry: null, item: "@_registry_/item" }],
+      ["@_item", { registry: null, item: "@_item" }],
+      ["@item_", { registry: null, item: "@item_" }],
+      ["@_item_", { registry: null, item: "@_item_" }],
+    ])("should reject invalid registry patterns: %s", (input, expected) => {
+      expect(parseRegistryAndItemFromString(input)).toEqual(expected)
+    })
+  })
+
+  describe("whitespace and formatting", () => {
+    it.each([
+      [" @v0/button", { registry: null, item: " @v0/button" }],
+      ["@v0/button ", { registry: "@v0", item: "button " }],
+      [" @v0/button ", { registry: null, item: " @v0/button " }],
+      ["\t@v0/button", { registry: null, item: "\t@v0/button" }],
+      ["@v0/button\t", { registry: "@v0", item: "button\t" }],
+      ["\n@v0/button", { registry: null, item: "\n@v0/button" }],
+      ["@v0/button\n", { registry: null, item: "@v0/button\n" }],
+    ])("should handle whitespace: %s", (input, expected) => {
+      expect(parseRegistryAndItemFromString(input)).toEqual(expected)
+    })
+  })
+
+  describe("case sensitivity", () => {
+    it.each([
+      ["@V0/button", { registry: "@V0", item: "button" }],
+      ["@v0/BUTTON", { registry: "@v0", item: "BUTTON" }],
+      ["@V0/BUTTON", { registry: "@V0", item: "BUTTON" }],
+      ["@MyRegistry/item", { registry: "@MyRegistry", item: "item" }],
+      ["@MYREGISTRY/item", { registry: "@MYREGISTRY", item: "item" }],
+      ["@myregistry/ITEM", { registry: "@myregistry", item: "ITEM" }],
+    ])("should be case sensitive: %s", (input, expected) => {
+      expect(parseRegistryAndItemFromString(input)).toEqual(expected)
+    })
+  })
+
+  describe("numbers and mixed content", () => {
+    it.each([
+      ["@123/item", { registry: "@123", item: "item" }],
+      ["@registry123/item", { registry: "@registry123", item: "item" }],
+      ["@123registry/item", { registry: "@123registry", item: "item" }],
+      ["@r123/item", { registry: "@r123", item: "item" }],
+      ["@123r/item", { registry: "@123r", item: "item" }],
+      ["@item123/item", { registry: "@item123", item: "item" }],
+      ["@123-item/item", { registry: "@123-item", item: "item" }],
+      ["@item-123/item", { registry: "@item-123", item: "item" }],
+      ["@123_item/item", { registry: "@123_item", item: "item" }],
+      ["@item_123/item", { registry: "@item_123", item: "item" }],
+    ])("should handle numbers and mixed content: %s", (input, expected) => {
+      expect(parseRegistryAndItemFromString(input)).toEqual(expected)
+    })
+  })
+
+  describe("single character cases", () => {
+    it.each([
+      ["@a/b", { registry: "@a", item: "b" }],
+      ["@a/", { registry: null, item: "@a/" }],
+      ["@a//", { registry: "@a", item: "/" }],
+      ["@1/b", { registry: "@1", item: "b" }],
+      ["@1/", { registry: null, item: "@1/" }],
+      ["@1//", { registry: "@1", item: "/" }],
+    ])(
+      "should handle single character registry names: %s",
+      (input, expected) => {
+        expect(parseRegistryAndItemFromString(input)).toEqual(expected)
+      }
+    )
+  })
+
+  describe("very long inputs", () => {
+    it("should handle very long registry names", () => {
+      const longRegistry = "@" + "a".repeat(100)
+      const result = parseRegistryAndItemFromString(longRegistry + "/item")
+      expect(result).toEqual({
+        registry: longRegistry,
+        item: "item",
+      })
+    })
+
+    it("should handle very long item paths", () => {
+      const longItem = "a".repeat(100)
+      const result = parseRegistryAndItemFromString("@registry/" + longItem)
+      expect(result).toEqual({
+        registry: "@registry",
+        item: longItem,
+      })
+    })
+
+    it("should handle very long non-registry paths", () => {
+      const longPath = "a".repeat(100)
+      const result = parseRegistryAndItemFromString(longPath)
+      expect(result).toEqual({
+        registry: null,
+        item: longPath,
+      })
+    })
+  })
+})
diff --git a/packages/shadcn/src/registry/parser.ts b/packages/shadcn/src/registry/parser.ts
new file mode 100644
index 00000000000..2f0042bda16
--- /dev/null
+++ b/packages/shadcn/src/registry/parser.ts
@@ -0,0 +1,24 @@
+// Valid registry name pattern: @namespace where namespace is alphanumeric with hyphens/underscores
+const REGISTRY_PATTERN = /^(@[a-zA-Z0-9](?:[a-zA-Z0-9-_]*[a-zA-Z0-9])?)\/(.+)$/
+
+export function parseRegistryAndItemFromString(name: string) {
+  if (!name.startsWith("@")) {
+    return {
+      registry: null,
+      item: name,
+    }
+  }
+
+  const match = name.match(REGISTRY_PATTERN)
+  if (match) {
+    return {
+      registry: match[1],
+      item: match[2],
+    }
+  }
+
+  return {
+    registry: null,
+    item: name,
+  }
+}
diff --git a/packages/shadcn/src/registry/resolver.test.ts b/packages/shadcn/src/registry/resolver.test.ts
new file mode 100644
index 00000000000..c59de6b50dd
--- /dev/null
+++ b/packages/shadcn/src/registry/resolver.test.ts
@@ -0,0 +1,2386 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
+import { promises as fs } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import { HttpResponse, http } from "msw"
+import { setupServer } from "msw/node"
+import {
+  afterAll,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  test,
+  vi,
+} from "vitest"
+
+import { createRegistryServer } from "../../../tests/src/utils/registry"
+import { setRegistryHeaders } from "./context"
+import {
+  resolveRegistryItemsFromRegistries,
+  resolveRegistryTree,
+} from "./resolver"
+
+vi.mock("./context", () => ({
+  setRegistryHeaders: vi.fn(),
+  clearRegistryContext: vi.fn(),
+  getRegistryHeadersFromContext: vi.fn(() => ({})),
+}))
+
+vi.mock("@/src/utils/handle-error", () => ({
+  handleError: vi.fn((error) => {
+    console.error("Test error:", error)
+  }),
+}))
+
+vi.mock("@/src/utils/logger", () => ({
+  logger: {
+    error: vi.fn(),
+    break: vi.fn(),
+    log: vi.fn(),
+  },
+}))
+
+// Note: Individual tests will create their own MSW servers using createRegistryServer
+
+describe("resolveRegistryItemsFromRegistries", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("should return empty array for empty input", () => {
+    const result = resolveRegistryItemsFromRegistries([], {
+      registries: {},
+    } as any)
+    expect(result).toEqual([])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({})
+  })
+
+  it("should return empty array for empty input with no registries", () => {
+    const result = resolveRegistryItemsFromRegistries([], {
+      registries: {},
+    } as any)
+    expect(result).toEqual([])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({})
+  })
+
+  it("should return non-registry items unchanged", () => {
+    const items = ["button", "card", "dialog"]
+    const config = { registries: {} } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual(items)
+    expect(setRegistryHeaders).toHaveBeenCalledWith({})
+  })
+
+  it("should resolve registry items with string config", () => {
+    const items = ["@v0/button", "@v0/card"]
+    const config = {
+      registries: {
+        "@v0": "https://v0.dev/chat/b/{name}/json",
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual([
+      "https://v0.dev/chat/b/button/json",
+      "https://v0.dev/chat/b/card/json",
+    ])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({})
+  })
+
+  it("should resolve registry items with object config and headers", () => {
+    const items = ["@private/button", "@private/card"]
+    const config = {
+      registries: {
+        "@private": {
+          url: "https://api.com/{name}.json",
+          headers: {
+            Authorization: "Bearer token123",
+          },
+        },
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual([
+      "https://api.com/button.json",
+      "https://api.com/card.json",
+    ])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({
+      "https://api.com/button.json": {
+        Authorization: "Bearer token123",
+      },
+      "https://api.com/card.json": {
+        Authorization: "Bearer token123",
+      },
+    })
+  })
+
+  it("should handle mixed registry and non-registry items", () => {
+    const items = ["button", "@v0/card", "dialog", "@private/table"]
+    const config = {
+      registries: {
+        "@v0": "https://v0.dev/chat/b/{name}/json",
+        "@private": {
+          url: "https://api.com/{name}.json",
+          headers: {
+            "X-API-Key": "secret123",
+          },
+        },
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual([
+      "button",
+      "https://v0.dev/chat/b/card/json",
+      "dialog",
+      "https://api.com/table.json",
+    ])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({
+      "https://api.com/table.json": {
+        "X-API-Key": "secret123",
+      },
+    })
+  })
+
+  it("should handle environment variables in config", () => {
+    process.env.API_TOKEN = "abc123"
+    process.env.API_URL = "https://api.com"
+
+    const items = ["@env/button"]
+    const config = {
+      registries: {
+        "@env": {
+          url: "${API_URL}/{name}.json",
+          headers: {
+            Authorization: "Bearer ${API_TOKEN}",
+          },
+        },
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual(["https://api.com/button.json"])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({
+      "https://api.com/button.json": {
+        Authorization: "Bearer abc123",
+      },
+    })
+
+    delete process.env.API_TOKEN
+    delete process.env.API_URL
+  })
+
+  it("should handle complex item paths", () => {
+    const items = ["@acme/ui/button", "@acme/components/card"]
+    const config = {
+      registries: {
+        "@acme": "https://api.com/{name}.json",
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual([
+      "https://api.com/ui/button.json",
+      "https://api.com/components/card.json",
+    ])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({})
+  })
+
+  it("should handle URLs and local files unchanged", () => {
+    const items = [
+      "https://example.com/button.json",
+      "./local/component.json",
+      "@v0/card",
+    ]
+    const config = {
+      registries: {
+        "@v0": "https://v0.dev/chat/b/{name}/json",
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual([
+      "https://example.com/button.json",
+      "./local/component.json",
+      "https://v0.dev/chat/b/card/json",
+    ])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({})
+  })
+
+  it("should throw error for unknown registry", () => {
+    const items = ["@unknown/button"]
+    const config = { registries: {} } as any
+
+    expect(() => {
+      resolveRegistryItemsFromRegistries(items, config)
+    }).toThrow('Unknown registry "@unknown"')
+  })
+
+  it("should handle multiple unknown registries", () => {
+    const items = ["@unknown1/button", "@unknown2/card"]
+    const config = { registries: {} } as any
+
+    expect(() => {
+      resolveRegistryItemsFromRegistries(items, config)
+    }).toThrow('Unknown registry "@unknown1"')
+  })
+
+  it("should handle empty headers correctly", () => {
+    const items = ["@empty/button"]
+    const config = {
+      registries: {
+        "@empty": {
+          url: "https://api.com/{name}.json",
+          headers: {},
+        },
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual(["https://api.com/button.json"])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({})
+  })
+
+  it("should handle headers with environment variables that expand to empty", () => {
+    process.env.EMPTY_TOKEN = "some-value"
+
+    const items = ["@empty/button"]
+    const config = {
+      registries: {
+        "@empty": {
+          url: "https://api.com/{name}.json",
+          headers: {
+            Authorization: "Bearer ${EMPTY_TOKEN}",
+          },
+        },
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual(["https://api.com/button.json"])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({
+      "https://api.com/button.json": {
+        Authorization: "Bearer some-value",
+      },
+    })
+
+    delete process.env.EMPTY_TOKEN
+  })
+
+  it("should handle headers with mixed static and environment variables", () => {
+    process.env.API_TOKEN = "secret123"
+
+    const items = ["@mixed/button"]
+    const config = {
+      registries: {
+        "@mixed": {
+          url: "https://api.com/{name}.json",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: "Bearer ${API_TOKEN}",
+            "X-Custom": "static-value",
+          },
+        },
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual(["https://api.com/button.json"])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({
+      "https://api.com/button.json": {
+        "Content-Type": "application/json",
+        Authorization: "Bearer secret123",
+        "X-Custom": "static-value",
+      },
+    })
+
+    delete process.env.API_TOKEN
+  })
+
+  it("should handle query parameters in URL config", () => {
+    const items = ["@params/button"]
+    const config = {
+      registries: {
+        "@params": {
+          url: "https://api.com/{name}.json",
+          params: {
+            version: "1.0",
+            format: "json",
+          },
+        },
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual([
+      "https://api.com/button.json?version=1.0&format=json",
+    ])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({})
+  })
+
+  it("should handle query parameters with environment variables", () => {
+    process.env.API_VERSION = "2.0"
+
+    const items = ["@params/button"]
+    const config = {
+      registries: {
+        "@params": {
+          url: "https://api.com/{name}.json",
+          params: {
+            version: "${API_VERSION}",
+            format: "json",
+          },
+        },
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual([
+      "https://api.com/button.json?version=2.0&format=json",
+    ])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({})
+
+    delete process.env.API_VERSION
+  })
+
+  it("should handle existing query parameters in URL", () => {
+    const items = ["@existing/button"]
+    const config = {
+      registries: {
+        "@existing": {
+          url: "https://api.com/{name}.json?existing=true",
+          params: {
+            version: "1.0",
+          },
+        },
+      },
+    } as any
+
+    const result = resolveRegistryItemsFromRegistries(items, config)
+
+    expect(result).toEqual([
+      "https://api.com/button.json?existing=true&version=1.0",
+    ])
+    expect(setRegistryHeaders).toHaveBeenCalledWith({})
+  })
+})
+
+describe("resolveRegistryItems with URL dependencies", () => {
+  it("should resolve URL dependencies from local files", async () => {
+    const dependencyUrl = "https://example.com/dependency.json"
+
+    // Create a mock server for the URL dependency
+    const mockServer = setupServer(
+      http.get(dependencyUrl, () => {
+        return HttpResponse.json({
+          name: "url-dependency",
+          type: "registry:ui",
+          files: [
+            {
+              path: "ui/url-dependency.tsx",
+              content: "// url dependency content",
+              type: "registry:ui",
+            },
+          ],
+        })
+      })
+    )
+
+    mockServer.listen({ onUnhandledRequest: "bypass" })
+
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const tempFile = path.join(tempDir, "component-with-url-deps.json")
+
+    const componentData = {
+      name: "component-with-url-deps",
+      type: "registry:ui",
+      registryDependencies: [dependencyUrl], // URL dependency
+      files: [
+        {
+          path: "ui/component-with-url-deps.tsx",
+          content: "// component with url deps content",
+          type: "registry:ui",
+        },
+      ],
+    }
+
+    await fs.writeFile(tempFile, JSON.stringify(componentData, null, 2))
+
+    try {
+      const mockConfig = {
+        style: "new-york",
+        tailwind: { baseColor: "neutral", cssVariables: true },
+        resolvedPaths: {
+          cwd: process.cwd(),
+          tailwindConfig: "./tailwind.config.js",
+          tailwindCss: "./globals.css",
+          utils: "./lib/utils",
+          components: "./components",
+          lib: "./lib",
+          hooks: "./hooks",
+          ui: "./components/ui",
+        },
+      } as any
+
+      const result = await resolveRegistryTree([tempFile], mockConfig)
+
+      expect(result).toBeDefined()
+      expect(result?.files).toBeDefined()
+      // Should contain files from both the main component and its URL dependency
+      const filePaths = result?.files?.map((f: any) => f.path) ?? []
+      expect(filePaths).toContain("ui/component-with-url-deps.tsx")
+      expect(filePaths).toContain("ui/url-dependency.tsx")
+    } finally {
+      // Clean up
+      await fs.unlink(tempFile)
+      await fs.rmdir(tempDir)
+      mockServer.close()
+    }
+  })
+
+  it("should resolve namespace syntax in registryDependencies", async () => {
+    // Mock a namespace registry endpoint
+    const namespaceUrl = "https://custom-registry.com/custom-component.json"
+
+    const mockServer = setupServer(
+      http.get(namespaceUrl, () => {
+        return HttpResponse.json({
+          name: "custom-component",
+          type: "registry:ui",
+          files: [
+            {
+              path: "ui/custom-component.tsx",
+              content: "// custom component content",
+              type: "registry:ui",
+            },
+          ],
+        })
+      })
+    )
+
+    mockServer.listen({ onUnhandledRequest: "bypass" })
+
+    const tempDir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-test-"))
+    const tempFile = path.join(tempDir, "component-with-namespace-deps.json")
+
+    const componentData = {
+      name: "component-with-namespace-deps",
+      type: "registry:ui",
+      registryDependencies: ["@custom/custom-component"], // Namespace dependency
+      files: [
+        {
+          path: "ui/component-with-namespace-deps.tsx",
+          content: "// component with namespace deps content",
+          type: "registry:ui",
+        },
+      ],
+    }
+
+    await fs.writeFile(tempFile, JSON.stringify(componentData, null, 2))
+
+    try {
+      const mockConfig = {
+        style: "new-york",
+        tailwind: { baseColor: "neutral", cssVariables: true },
+        resolvedPaths: {
+          cwd: process.cwd(),
+          tailwindConfig: "./tailwind.config.js",
+          tailwindCss: "./globals.css",
+          utils: "./lib/utils",
+          components: "./components",
+          lib: "./lib",
+          hooks: "./hooks",
+          ui: "./components/ui",
+        },
+        registries: {
+          "@custom": {
+            url: "https://custom-registry.com/{name}.json",
+          },
+        },
+      } as any
+
+      const result = await resolveRegistryTree([tempFile], mockConfig)
+
+      expect(result).toBeDefined()
+      expect(result?.files).toBeDefined()
+
+      expect(result?.files?.length).toBe(2)
+      expect(
+        result?.files?.some((f) => f.path === "ui/custom-component.tsx")
+      ).toBe(true)
+      expect(
+        result?.files?.some(
+          (f) => f.path === "ui/component-with-namespace-deps.tsx"
+        )
+      ).toBe(true)
+    } finally {
+      // Clean up
+      await fs.unlink(tempFile)
+      await fs.rmdir(tempDir)
+      mockServer.close()
+    }
+  })
+})
+
+describe("resolveRegistryTree - dependency ordering", () => {
+  let customRegistry: Awaited<ReturnType<typeof createRegistryServer>>
+
+  beforeAll(async () => {
+    // Create a custom registry server for testing dependency ordering
+    customRegistry = await createRegistryServer(
+      [
+        {
+          name: "base-component",
+          type: "registry:ui",
+          files: [
+            {
+              path: "components/ui/base.tsx",
+              content: "export const Base = () => <div>Base Component</div>",
+              type: "registry:ui",
+            },
+          ],
+          cssVars: {
+            light: { base: "#111111" },
+          },
+        },
+        {
+          name: "extended-component",
+          type: "registry:ui",
+          registryDependencies: ["http://localhost:4447/r/base-component.json"],
+          files: [
+            {
+              path: "components/ui/extended.tsx",
+              content:
+                "export const Extended = () => <div>Extended Component</div>",
+              type: "registry:ui",
+            },
+          ],
+          cssVars: {
+            light: { extended: "#222222" },
+          },
+        },
+        {
+          name: "deep-component",
+          type: "registry:ui",
+          registryDependencies: [
+            "http://localhost:4447/r/extended-component.json",
+          ],
+          files: [
+            {
+              path: "components/ui/deep.tsx",
+              content: "export const Deep = () => <div>Deep Component</div>",
+              type: "registry:ui",
+            },
+          ],
+        },
+        // Circular dependency test
+        {
+          name: "circular-a",
+          type: "registry:ui",
+          registryDependencies: ["http://localhost:4447/r/circular-b.json"],
+          files: [
+            {
+              path: "components/ui/circular-a.tsx",
+              content: "export const CircularA = () => <div>A</div>",
+              type: "registry:ui",
+            },
+          ],
+        },
+        {
+          name: "circular-b",
+          type: "registry:ui",
+          registryDependencies: ["http://localhost:4447/r/circular-a.json"],
+          files: [
+            {
+              path: "components/ui/circular-b.tsx",
+              content: "export const CircularB = () => <div>B</div>",
+              type: "registry:ui",
+            },
+          ],
+        },
+      ],
+      { port: 4447 }
+    )
+
+    await customRegistry.start()
+  })
+
+  afterAll(async () => {
+    await customRegistry.stop()
+  })
+
+  test("should order dependencies before items that depend on them", async () => {
+    const result = await resolveRegistryTree(
+      ["http://localhost:4447/r/extended-component.json"],
+      {
+        style: "default",
+        rsc: false,
+        tsx: false,
+        aliases: {
+          components: "./components",
+          utils: "./lib/utils",
+          ui: "./components/ui",
+        },
+        tailwind: {
+          baseColor: "neutral",
+          css: "globals.css",
+          cssVariables: false,
+        },
+        resolvedPaths: {
+          cwd: process.cwd(),
+          tailwindConfig: "./tailwind.config.js",
+          tailwindCss: "./globals.css",
+          utils: "./lib/utils",
+          components: "./components",
+          lib: "./lib",
+          hooks: "./hooks",
+          ui: "./components/ui",
+        },
+      }
+    )
+
+    expect(result).toBeTruthy()
+    expect(result?.files).toHaveLength(2)
+
+    // Base component should come first.
+    expect(result?.files?.[0]).toMatchObject({
+      path: "components/ui/base.tsx",
+      content: expect.stringContaining("Base Component"),
+    })
+
+    // Extended component should come second.
+    expect(result?.files?.[1]).toMatchObject({
+      path: "components/ui/extended.tsx",
+      content: expect.stringContaining("Extended Component"),
+    })
+
+    expect(result?.cssVars?.light).toMatchObject({
+      base: "#111111",
+      extended: "#222222",
+    })
+  })
+
+  test("should handle complex dependency chains", async () => {
+    const result = await resolveRegistryTree(
+      ["http://localhost:4447/r/deep-component.json"],
+      {
+        style: "new-york",
+        rsc: false,
+        tsx: false,
+        aliases: {
+          components: "./components",
+          utils: "./lib/utils",
+          ui: "./components/ui",
+        },
+        tailwind: {
+          baseColor: "neutral",
+          css: "globals.css",
+          cssVariables: false,
+        },
+        resolvedPaths: {
+          cwd: process.cwd(),
+          tailwindConfig: "./tailwind.config.js",
+          tailwindCss: "./globals.css",
+          utils: "./lib/utils",
+          components: "./components",
+          lib: "./lib",
+          hooks: "./hooks",
+          ui: "./components/ui",
+        },
+      }
+    )
+
+    expect(result).toBeTruthy()
+    expect(result?.files).toHaveLength(3)
+
+    // Order should be: base -> extended -> deep.
+    expect(result?.files?.[0].content).toContain("Base Component")
+    expect(result?.files?.[1].content).toContain("Extended Component")
+    expect(result?.files?.[2].content).toContain("Deep Component")
+  })
+
+  test("should handle circular dependencies gracefully", async () => {
+    const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+
+    const result = await resolveRegistryTree(
+      [
+        "http://localhost:4447/r/circular-a.json",
+        "http://localhost:4447/r/circular-b.json",
+      ],
+      {
+        style: "new-york",
+        rsc: false,
+        tsx: false,
+        aliases: {
+          components: "./components",
+          utils: "./lib/utils",
+          ui: "./components/ui",
+        },
+        tailwind: {
+          baseColor: "neutral",
+          css: "globals.css",
+          cssVariables: false,
+        },
+        resolvedPaths: {
+          cwd: process.cwd(),
+          tailwindConfig: "./tailwind.config.js",
+          tailwindCss: "./globals.css",
+          utils: "./lib/utils",
+          components: "./components",
+          lib: "./lib",
+          hooks: "./hooks",
+          ui: "./components/ui",
+        },
+      }
+    )
+
+    expect(result).toBeTruthy()
+
+    // With circular dependencies, we might get duplicates in the files array
+    // but we should have at least one of each circular item
+    const hasCircularA = result?.files?.some(
+      (f) => f.path === "components/ui/circular-a.tsx"
+    )
+    const hasCircularB = result?.files?.some(
+      (f) => f.path === "components/ui/circular-b.tsx"
+    )
+    expect(hasCircularA).toBe(true)
+    expect(hasCircularB).toBe(true)
+
+    // Should have logged a warning about circular dependency
+    expect(consoleSpy).toHaveBeenCalledWith(
+      "Circular dependency detected in registry items"
+    )
+
+    consoleSpy.mockRestore()
+  })
+
+  test("should handle exact duplicate URLs by including only once", async () => {
+    const result = await resolveRegistryTree(
+      [
+        "http://localhost:4447/r/base-component.json",
+        "http://localhost:4447/r/base-component.json",
+      ],
+      {
+        style: "new-york",
+        rsc: false,
+        tsx: false,
+        aliases: {
+          components: "./components",
+          utils: "./lib/utils",
+          ui: "./components/ui",
+        },
+        tailwind: {
+          baseColor: "neutral",
+          css: "globals.css",
+          cssVariables: false,
+        },
+        resolvedPaths: {
+          cwd: process.cwd(),
+          tailwindConfig: "./tailwind.config.js",
+          tailwindCss: "./globals.css",
+          utils: "./lib/utils",
+          components: "./components",
+          lib: "./lib",
+          hooks: "./hooks",
+          ui: "./components/ui",
+        },
+      }
+    )
+
+    expect(result?.files).toHaveLength(1)
+    expect(result?.files?.[0].path).toBe("components/ui/base.tsx")
+  })
+
+  test("should handle items with same name from different registries", async () => {
+    const secondRegistry = await createRegistryServer(
+      [
+        {
+          name: "base-component",
+          type: "registry:ui",
+          files: [
+            {
+              path: "components/ui/base-alt.tsx",
+              content:
+                "export const BaseAlt = () => <div>Alternative Base Component</div>",
+              type: "registry:ui",
+            },
+          ],
+          cssVars: {
+            light: { altBase: "#999999" },
+          },
+        },
+      ],
+      { port: 4448 }
+    )
+
+    await secondRegistry.start()
+
+    const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+
+    const result = await resolveRegistryTree(
+      [
+        "http://localhost:4447/r/base-component.json",
+        "http://localhost:4448/r/base-component.json",
+      ],
+      {
+        style: "default",
+        rsc: false,
+        tsx: false,
+        aliases: {
+          components: "./components",
+          utils: "./lib/utils",
+          ui: "./components/ui",
+        },
+        tailwind: {
+          baseColor: "neutral",
+          css: "globals.css",
+          cssVariables: false,
+        },
+        resolvedPaths: {
+          cwd: process.cwd(),
+          tailwindConfig: "./tailwind.config.js",
+          tailwindCss: "./globals.css",
+          utils: "./lib/utils",
+          components: "./components",
+          lib: "./lib",
+          hooks: "./hooks",
+          ui: "./components/ui",
+        },
+      }
+    )
+
+    expect(result?.files).toHaveLength(2)
+
+    const filePaths = result?.files?.map((f) => f.path).sort()
+    expect(filePaths).toEqual([
+      "components/ui/base-alt.tsx",
+      "components/ui/base.tsx",
+    ])
+
+    expect(result?.cssVars?.light).toHaveProperty("base", "#111111")
+    expect(result?.cssVars?.light).toHaveProperty("altBase", "#999999")
+
+    consoleSpy.mockRestore()
+    await secondRegistry.stop()
+  })
+
+  test("should correctly resolve dependencies when multiple items have same dependency name", async () => {
+    const result = await resolveRegistryTree(
+      ["http://localhost:4447/r/extended-component.json"],
+      {
+        style: "new-york",
+        rsc: false,
+        tsx: false,
+        aliases: {
+          components: "./components",
+          utils: "./lib/utils",
+          ui: "./components/ui",
+        },
+        tailwind: {
+          baseColor: "neutral",
+          css: "globals.css",
+          cssVariables: false,
+        },
+        resolvedPaths: {
+          cwd: process.cwd(),
+          tailwindConfig: "./tailwind.config.js",
+          tailwindCss: "./globals.css",
+          utils: "./lib/utils",
+          components: "./components",
+          lib: "./lib",
+          hooks: "./hooks",
+          ui: "./components/ui",
+        },
+      }
+    )
+
+    expect(result?.files).toHaveLength(2)
+    expect(result?.files?.[0].path).toBe("components/ui/base.tsx")
+    expect(result?.files?.[1].path).toBe("components/ui/extended.tsx")
+  })
+})
+
+describe("resolveRegistryTree - potential target conflicts", async () => {
+  const exampleRegistry = await createRegistryServer(
+    [
+      {
+        name: "button-variant-a",
+        type: "registry:ui",
+        files: [
+          {
+            path: "ui/button.tsx",
+            content: "export const Button = () => <button>Variant A</button>",
+            type: "registry:ui",
+          },
+          {
+            path: "ui/button.styles.css",
+            content: ".button-a { color: red; }",
+            type: "registry:ui",
+          },
+        ],
+      },
+      {
+        name: "button-variant-b",
+        type: "registry:ui",
+        files: [
+          {
+            path: "ui/button.tsx",
+            content: "export const Button = () => <button>Variant B</button>",
+            type: "registry:ui",
+          },
+          {
+            path: "components/button/index.tsx",
+            content: "export { Button } from './button'",
+            type: "registry:ui",
+          },
+        ],
+      },
+      {
+        name: "component-with-explicit-target",
+        type: "registry:ui",
+        files: [
+          {
+            path: "custom/component.tsx",
+            content: "export const Component = () => <div>Custom</div>",
+            type: "registry:ui",
+            target: "components/ui/button.tsx",
+          },
+        ],
+      },
+      {
+        name: "lib-and-ui-conflict",
+        type: "registry:ui",
+        registryDependencies: ["http://localhost:4449/r/lib-utils.json"],
+        files: [
+          {
+            path: "ui/utils.ts",
+            content: "export const uiUtils = () => {}",
+            type: "registry:ui",
+          },
+        ],
+      },
+      {
+        name: "lib-utils",
+        type: "registry:lib",
+        files: [
+          {
+            path: "lib/utils.ts",
+            content: "export const libUtils = () => {}",
+            type: "registry:lib",
+          },
+          {
+            path: "utils.ts",
+            content: "export const utils = () => {}",
+            type: "registry:lib",
+          },
+        ],
+      },
+    ],
+    { port: 4449 }
+  )
+
+  const sharedConfig = {
+    style: "default",
+    rsc: false,
+    tsx: false,
+    aliases: {
+      components: "./components",
+      utils: "./lib/utils",
+      ui: "./components/ui",
+    },
+    tailwind: {
+      config: "./tailwind.config.js",
+      baseColor: "neutral",
+      css: "globals.css",
+      cssVariables: false,
+    },
+    resolvedPaths: {
+      cwd: process.cwd(),
+      tailwindConfig: "./tailwind.config.js",
+      tailwindCss: "./globals.css",
+      utils: "./lib/utils",
+      components: "./components",
+      lib: "./lib",
+      hooks: "./hooks",
+      ui: "./components/ui",
+    },
+  }
+
+  beforeAll(async () => {
+    await exampleRegistry.start()
+  })
+
+  afterAll(async () => {
+    await exampleRegistry.stop()
+  })
+
+  test("should deduplicate files with same resolved target (last wins) and preserve order", async () => {
+    expect(
+      await resolveRegistryTree(
+        [
+          "http://localhost:4449/r/button-variant-a.json",
+          "http://localhost:4449/r/button-variant-b.json",
+        ],
+        sharedConfig
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "css": {},
+        "cssVars": {},
+        "dependencies": [],
+        "devDependencies": [],
+        "docs": "",
+        "files": [
+          {
+            "content": "export const Button = () => <button>Variant B</button>",
+            "path": "ui/button.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": ".button-a { color: red; }",
+            "path": "ui/button.styles.css",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export { Button } from './button'",
+            "path": "components/button/index.tsx",
+            "type": "registry:ui",
+          },
+        ],
+        "tailwind": {},
+      }
+    `)
+
+    expect(
+      await resolveRegistryTree(
+        [
+          "http://localhost:4449/r/button-variant-b.json",
+          "http://localhost:4449/r/button-variant-a.json",
+        ],
+        sharedConfig
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "css": {},
+        "cssVars": {},
+        "dependencies": [],
+        "devDependencies": [],
+        "docs": "",
+        "files": [
+          {
+            "content": "export const Button = () => <button>Variant A</button>",
+            "path": "ui/button.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export { Button } from './button'",
+            "path": "components/button/index.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": ".button-a { color: red; }",
+            "path": "ui/button.styles.css",
+            "type": "registry:ui",
+          },
+        ],
+        "tailwind": {},
+      }
+    `)
+  })
+
+  test("should handle explicit target overrides", async () => {
+    expect(
+      await resolveRegistryTree(
+        [
+          "http://localhost:4449/r/button-variant-a.json",
+          "http://localhost:4449/r/component-with-explicit-target.json",
+        ],
+        sharedConfig
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "css": {},
+        "cssVars": {},
+        "dependencies": [],
+        "devDependencies": [],
+        "docs": "",
+        "files": [
+          {
+            "content": "export const Button = () => <button>Variant A</button>",
+            "path": "ui/button.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": ".button-a { color: red; }",
+            "path": "ui/button.styles.css",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export const Component = () => <div>Custom</div>",
+            "path": "custom/component.tsx",
+            "target": "components/ui/button.tsx",
+            "type": "registry:ui",
+          },
+        ],
+        "tailwind": {},
+      }
+    `)
+  })
+
+  test("should preserve files with different types even if paths are similar", async () => {
+    expect(
+      await resolveRegistryTree(
+        ["http://localhost:4449/r/lib-and-ui-conflict.json"],
+        sharedConfig
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "css": {},
+        "cssVars": {},
+        "dependencies": [],
+        "devDependencies": [],
+        "docs": "",
+        "files": [
+          {
+            "content": "export const utils = () => {}",
+            "path": "utils.ts",
+            "type": "registry:lib",
+          },
+          {
+            "content": "export const uiUtils = () => {}",
+            "path": "ui/utils.ts",
+            "type": "registry:ui",
+          },
+        ],
+        "tailwind": {},
+      }
+    `)
+  })
+
+  test("should handle complex nested paths and deduplicate correctly", async () => {
+    // Create a custom registry with nested paths.
+    const nestedRegistry = await createRegistryServer(
+      [
+        {
+          name: "nested-a",
+          type: "registry:ui",
+          files: [
+            {
+              path: "ui/forms/input.tsx",
+              content: "export const Input = () => <input />",
+              type: "registry:ui",
+            },
+            {
+              path: "ui/forms/button.tsx",
+              content:
+                "export const FormButton = () => <button>Submit A</button>",
+              type: "registry:ui",
+            },
+          ],
+        },
+        {
+          name: "nested-b",
+          type: "registry:ui",
+          files: [
+            {
+              path: "ui/forms/button.tsx",
+              content:
+                "export const FormButton = () => <button>Submit B</button>",
+              type: "registry:ui",
+            },
+            {
+              path: "ui/forms/select.tsx",
+              content: "export const Select = () => <select />",
+              type: "registry:ui",
+            },
+          ],
+        },
+      ],
+      { port: 4450 }
+    )
+
+    await nestedRegistry.start()
+
+    expect(
+      await resolveRegistryTree(
+        [
+          "http://localhost:4450/r/nested-a.json",
+          "http://localhost:4450/r/nested-b.json",
+        ],
+        sharedConfig
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "css": {},
+        "cssVars": {},
+        "dependencies": [],
+        "devDependencies": [],
+        "docs": "",
+        "files": [
+          {
+            "content": "export const Input = () => <input />",
+            "path": "ui/forms/input.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export const FormButton = () => <button>Submit B</button>",
+            "path": "ui/forms/button.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export const Select = () => <select />",
+            "path": "ui/forms/select.tsx",
+            "type": "registry:ui",
+          },
+        ],
+        "tailwind": {},
+      }
+    `)
+
+    await nestedRegistry.stop()
+  })
+
+  test("should deduplicate files with same resolved path", async () => {
+    const multiUtilsRegistry = await createRegistryServer(
+      [
+        {
+          name: "utils-set-a",
+          type: "registry:ui",
+          files: [
+            {
+              path: "ui/utils.tsx",
+              content: "export const utilsA = 'A'",
+              type: "registry:ui",
+            },
+            {
+              path: "ui/helpers/utils.tsx",
+              content: "export const helpersUtilsA = 'A'",
+              type: "registry:ui",
+            },
+          ],
+        },
+        {
+          name: "utils-set-b",
+          type: "registry:ui",
+          files: [
+            {
+              path: "ui/utils.tsx",
+              content: "export const utilsB = 'B'",
+              type: "registry:ui",
+            },
+            {
+              path: "ui/helpers/utils.tsx",
+              content: "export const helpersUtilsB = 'B'",
+              type: "registry:ui",
+            },
+          ],
+        },
+      ],
+      { port: 4451 }
+    )
+
+    await multiUtilsRegistry.start()
+
+    expect(
+      await resolveRegistryTree(
+        [
+          "http://localhost:4451/r/utils-set-a.json",
+          "http://localhost:4451/r/utils-set-b.json",
+        ],
+        sharedConfig
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "css": {},
+        "cssVars": {},
+        "dependencies": [],
+        "devDependencies": [],
+        "docs": "",
+        "files": [
+          {
+            "content": "export const utilsB = 'B'",
+            "path": "ui/utils.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export const helpersUtilsB = 'B'",
+            "path": "ui/helpers/utils.tsx",
+            "type": "registry:ui",
+          },
+        ],
+        "tailwind": {},
+      }
+    `)
+
+    await multiUtilsRegistry.stop()
+  })
+
+  test("should handle registry dependencies with file conflicts", async () => {
+    const dependencyRegistry = await createRegistryServer(
+      [
+        {
+          name: "base-button",
+          type: "registry:ui",
+          files: [
+            {
+              path: "ui/button.tsx",
+              content: "export const BaseButton = () => <button>Base</button>",
+              type: "registry:ui",
+            },
+          ],
+        },
+        {
+          name: "extended-button",
+          type: "registry:ui",
+          registryDependencies: ["http://localhost:4452/r/base-button.json"],
+          files: [
+            {
+              path: "ui/button.tsx",
+              content:
+                "export const ExtendedButton = () => <button>Extended</button>",
+              type: "registry:ui",
+            },
+          ],
+        },
+      ],
+      { port: 4452 }
+    )
+
+    await dependencyRegistry.start()
+
+    expect(
+      await resolveRegistryTree(
+        ["http://localhost:4452/r/extended-button.json"],
+        sharedConfig
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "css": {},
+        "cssVars": {},
+        "dependencies": [],
+        "devDependencies": [],
+        "docs": "",
+        "files": [
+          {
+            "content": "export const ExtendedButton = () => <button>Extended</button>",
+            "path": "ui/button.tsx",
+            "type": "registry:ui",
+          },
+        ],
+        "tailwind": {},
+      }
+    `)
+
+    await dependencyRegistry.stop()
+  })
+})
+
+describe("resolveRegistryTree - cross-registry dependencies", async () => {
+  const firstRegistry = await createRegistryServer(
+    [
+      {
+        name: "login-01",
+        type: "registry:ui",
+        files: [
+          {
+            path: "ui/login-01.tsx",
+            content: "export const Login01 = () => <div>Login 01</div>",
+            type: "registry:ui",
+          },
+        ],
+      },
+      {
+        name: "login-02",
+        type: "registry:ui",
+        files: [
+          {
+            path: "ui/login-02.tsx",
+            content: "export const Login02 = () => <div>Login 02</div>",
+            type: "registry:ui",
+          },
+        ],
+      },
+    ],
+    { port: 4453 }
+  )
+
+  const secondRegistry = await createRegistryServer(
+    [
+      {
+        name: "block-01",
+        type: "registry:block",
+        files: [
+          {
+            path: "blocks/block-01.tsx",
+            content: "export const Block01 = () => <div>Block 01</div>",
+            type: "registry:block",
+          },
+        ],
+      },
+      {
+        name: "block-02",
+        type: "registry:block",
+        registryDependencies: ["@one/login-02"],
+        files: [
+          {
+            path: "blocks/block-02.tsx",
+            content:
+              "export const Block02 = () => <div>Block 02 with Login</div>",
+            type: "registry:block",
+          },
+        ],
+      },
+    ],
+    { port: 4454 }
+  )
+
+  const thirdRegistry = await createRegistryServer(
+    [
+      {
+        name: "login-01",
+        type: "registry:component",
+        files: [
+          {
+            path: "components/login-form.tsx",
+            content:
+              "export const LoginForm = () => <form>Login Form 01</form>",
+            type: "registry:component",
+          },
+        ],
+      },
+      {
+        name: "login-02",
+        type: "registry:component",
+        files: [
+          {
+            path: "components/login-form.tsx",
+            content:
+              "export const LoginForm = () => <form>Login Form 02</form>",
+            type: "registry:component",
+          },
+        ],
+      },
+    ],
+    { port: 4455 }
+  )
+
+  const fourthRegistry = await createRegistryServer(
+    [
+      {
+        name: "app-01",
+        type: "registry:item",
+        registryDependencies: ["@three/login-02"],
+      },
+    ],
+    { port: 4456 }
+  )
+
+  beforeAll(async () => {
+    await firstRegistry.start()
+    await secondRegistry.start()
+    await thirdRegistry.start()
+    await fourthRegistry.start()
+  })
+
+  afterAll(async () => {
+    await firstRegistry.stop()
+    await secondRegistry.stop()
+    await thirdRegistry.stop()
+    await fourthRegistry.stop()
+  })
+
+  test("should resolve cross-registry dependencies correctly", async () => {
+    const config = {
+      style: "default",
+      rsc: false,
+      tsx: false,
+      aliases: {
+        components: "./components",
+        utils: "./lib/utils",
+        ui: "./components/ui",
+      },
+      tailwind: {
+        baseColor: "neutral",
+        css: "./globals.css",
+        cssVariables: false,
+      },
+      registries: {
+        "@one": {
+          url: "http://localhost:4453/r/{name}.json",
+        },
+        "@two": {
+          url: "http://localhost:4454/r/{name}.json",
+        },
+      },
+      resolvedPaths: {
+        cwd: process.cwd(),
+        tailwindConfig: "./tailwind.config.js",
+        tailwindCss: "./globals.css",
+        utils: "./lib/utils",
+        components: "./components",
+        lib: "./lib",
+        hooks: "./hooks",
+        ui: "./components/ui",
+      },
+    }
+
+    const result = await resolveRegistryTree(
+      ["@one/login-01", "@two/block-02"],
+      config
+    )
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "css": {},
+        "cssVars": {},
+        "dependencies": [],
+        "devDependencies": [],
+        "docs": "",
+        "files": [
+          {
+            "content": "export const Login01 = () => <div>Login 01</div>",
+            "path": "ui/login-01.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export const Login02 = () => <div>Login 02</div>",
+            "path": "ui/login-02.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export const Block02 = () => <div>Block 02 with Login</div>",
+            "path": "blocks/block-02.tsx",
+            "type": "registry:block",
+          },
+        ],
+        "tailwind": {},
+      }
+    `)
+  })
+
+  test("should deduplicate shared dependencies across registry items", async () => {
+    const config = {
+      style: "default",
+      rsc: false,
+      tsx: false,
+      aliases: {
+        components: "./components",
+        utils: "./lib/utils",
+        ui: "./components/ui",
+      },
+      tailwind: {
+        baseColor: "neutral",
+        css: "globals.css",
+        cssVariables: false,
+      },
+      registries: {
+        "@three": "http://localhost:4455/r/{name}.json",
+        "@four": "http://localhost:4456/r/{name}.json",
+      },
+      resolvedPaths: {
+        cwd: process.cwd(),
+        tailwindConfig: "./tailwind.config.js",
+        tailwindCss: "./globals.css",
+        utils: "./lib/utils",
+        components: "./components",
+        lib: "./lib",
+        hooks: "./hooks",
+        ui: "./components/ui",
+      },
+    }
+
+    const result = await resolveRegistryTree(
+      ["@three/login-01", "@four/app-01"],
+      config
+    )
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "css": {},
+        "cssVars": {},
+        "dependencies": [],
+        "devDependencies": [],
+        "docs": "",
+        "files": [
+          {
+            "content": "export const LoginForm = () => <form>Login Form 02</form>",
+            "path": "components/login-form.tsx",
+            "type": "registry:component",
+          },
+        ],
+        "tailwind": {},
+      }
+    `)
+  })
+})
+
+describe("resolveRegistryTree - comprehensive cross-registry tests", async () => {
+  // Create registries with all possible fields
+  const uiRegistry = await createRegistryServer(
+    [
+      {
+        name: "theme-provider",
+        type: "registry:ui",
+        dependencies: ["next-themes"],
+        devDependencies: ["@types/node"],
+        files: [
+          {
+            path: "ui/theme-provider.tsx",
+            content: "export const ThemeProvider = () => <div>Theme</div>",
+            type: "registry:ui",
+          },
+        ],
+        tailwind: {
+          config: {
+            theme: {
+              extend: {
+                colors: {
+                  border: "hsl(var(--border))",
+                  input: "hsl(var(--input))",
+                },
+              },
+            },
+            plugins: ["require('tailwindcss-animate')"],
+          },
+        },
+        cssVars: {
+          theme: {
+            "--card": "240 5% 6%",
+            "--card-foreground": "60 5% 90%",
+          },
+          light: {
+            "--background": "0 0% 100%",
+            "--foreground": "240 10% 3.9%",
+          },
+          dark: {
+            "--background": "240 10% 3.9%",
+            "--foreground": "0 0% 98%",
+          },
+        },
+        css: {
+          ".theme-custom": {
+            "background-color": "var(--background)",
+            color: "var(--foreground)",
+          },
+        },
+        docs: "## Theme Provider\n\nA component for managing application themes.",
+      },
+      {
+        name: "dialog",
+        type: "registry:ui",
+        dependencies: ["@radix-ui/react-dialog"],
+        registryDependencies: ["@ui/theme-provider"],
+        files: [
+          {
+            path: "ui/dialog.tsx",
+            content: "export const Dialog = () => <dialog>Dialog</dialog>",
+            type: "registry:ui",
+          },
+        ],
+        cssVars: {
+          light: {
+            "--dialog-background": "0 0% 100%",
+          },
+          dark: {
+            "--dialog-background": "240 10% 3.9%",
+          },
+        },
+        docs: "## Dialog\n\nA modal dialog component.",
+      },
+    ],
+    { port: 4457 }
+  )
+
+  const blockRegistry = await createRegistryServer(
+    [
+      {
+        name: "dashboard-01",
+        type: "registry:block",
+        dependencies: ["recharts", "lucide-react"],
+        devDependencies: ["@types/recharts"],
+        registryDependencies: ["@ui/dialog", "@lib/chart-utils"],
+        files: [
+          {
+            path: "blocks/dashboard-01.tsx",
+            content: "export const Dashboard = () => <div>Dashboard</div>",
+            type: "registry:block",
+          },
+          {
+            path: "blocks/dashboard-01.css",
+            content: ".dashboard { padding: 1rem; }",
+            type: "registry:block",
+          },
+        ],
+        tailwind: {
+          config: {
+            theme: {
+              extend: {
+                borderRadius: {
+                  xl: "1rem",
+                },
+              },
+            },
+          },
+        },
+        css: {
+          ".dashboard-grid": {
+            display: "grid",
+            "grid-template-columns": "repeat(auto-fit, minmax(250px, 1fr))",
+          },
+        },
+        envVars: {
+          NEXT_PUBLIC_API_URL: "https://api.example.com",
+          NEXT_PUBLIC_APP_NAME: "Dashboard App",
+        },
+        docs: "## Dashboard Block\n\nA complete dashboard layout.",
+      },
+    ],
+    { port: 4458 }
+  )
+
+  const libRegistry = await createRegistryServer(
+    [
+      {
+        name: "chart-utils",
+        type: "registry:lib",
+        dependencies: ["date-fns", "clsx"],
+        files: [
+          {
+            path: "lib/chart-utils.ts",
+            content: "export const formatChartData = (data) => data",
+            type: "registry:lib",
+          },
+        ],
+        docs: "## Chart Utilities\n\nUtility functions for chart data processing.",
+      },
+      {
+        name: "api-client",
+        type: "registry:lib",
+        dependencies: ["axios"],
+        devDependencies: ["@types/axios"],
+        registryDependencies: ["@lib/chart-utils"],
+        files: [
+          {
+            path: "lib/api-client.ts",
+            content: "export const apiClient = axios.create()",
+            type: "registry:lib",
+          },
+        ],
+        envVars: {
+          API_KEY: "your-api-key",
+          API_SECRET: "your-api-secret",
+        },
+      },
+    ],
+    { port: 4459 }
+  )
+
+  beforeAll(async () => {
+    await uiRegistry.start()
+    await blockRegistry.start()
+    await libRegistry.start()
+  })
+
+  afterAll(async () => {
+    await uiRegistry.stop()
+    await blockRegistry.stop()
+    await libRegistry.stop()
+  })
+
+  test("should merge all properties from cross-registry dependencies", async () => {
+    const config = {
+      style: "default",
+      rsc: false,
+      tsx: false,
+      aliases: {
+        components: "./components",
+        utils: "./lib/utils",
+        ui: "./components/ui",
+      },
+      tailwind: {
+        baseColor: "neutral",
+        css: "globals.css",
+        cssVariables: false,
+      },
+      registries: {
+        "@ui": "http://localhost:4457/r/{name}.json",
+        "@block": "http://localhost:4458/r/{name}.json",
+        "@lib": "http://localhost:4459/r/{name}.json",
+      },
+      resolvedPaths: {
+        cwd: process.cwd(),
+        tailwindConfig: "./tailwind.config.js",
+        tailwindCss: "./globals.css",
+        utils: "./lib/utils",
+        components: "./components",
+        lib: "./lib",
+        hooks: "./hooks",
+        ui: "./components/ui",
+      },
+    }
+
+    const result = await resolveRegistryTree(["@block/dashboard-01"], config)
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "css": {
+          ".dashboard-grid": {
+            "display": "grid",
+            "grid-template-columns": "repeat(auto-fit, minmax(250px, 1fr))",
+          },
+          ".theme-custom": {
+            "background-color": "var(--background)",
+            "color": "var(--foreground)",
+          },
+        },
+        "cssVars": {
+          "dark": {
+            "--background": "240 10% 3.9%",
+            "--dialog-background": "240 10% 3.9%",
+            "--foreground": "0 0% 98%",
+          },
+          "light": {
+            "--background": "0 0% 100%",
+            "--dialog-background": "0 0% 100%",
+            "--foreground": "240 10% 3.9%",
+          },
+          "theme": {
+            "--card": "240 5% 6%",
+            "--card-foreground": "60 5% 90%",
+          },
+        },
+        "dependencies": [
+          "next-themes",
+          "date-fns",
+          "clsx",
+          "@radix-ui/react-dialog",
+          "recharts",
+          "lucide-react",
+        ],
+        "devDependencies": [
+          "@types/node",
+          "@types/recharts",
+        ],
+        "docs": "## Theme Provider
+
+      A component for managing application themes.
+      ## Chart Utilities
+
+      Utility functions for chart data processing.
+      ## Dialog
+
+      A modal dialog component.
+      ## Dashboard Block
+
+      A complete dashboard layout.
+      ",
+        "envVars": {
+          "NEXT_PUBLIC_API_URL": "https://api.example.com",
+          "NEXT_PUBLIC_APP_NAME": "Dashboard App",
+        },
+        "files": [
+          {
+            "content": "export const ThemeProvider = () => <div>Theme</div>",
+            "path": "ui/theme-provider.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export const formatChartData = (data) => data",
+            "path": "lib/chart-utils.ts",
+            "type": "registry:lib",
+          },
+          {
+            "content": "export const Dialog = () => <dialog>Dialog</dialog>",
+            "path": "ui/dialog.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export const Dashboard = () => <div>Dashboard</div>",
+            "path": "blocks/dashboard-01.tsx",
+            "type": "registry:block",
+          },
+          {
+            "content": ".dashboard { padding: 1rem; }",
+            "path": "blocks/dashboard-01.css",
+            "type": "registry:block",
+          },
+        ],
+        "tailwind": {
+          "config": {
+            "plugins": [
+              "require('tailwindcss-animate')",
+            ],
+            "theme": {
+              "extend": {
+                "borderRadius": {
+                  "xl": "1rem",
+                },
+                "colors": {
+                  "border": "hsl(var(--border))",
+                  "input": "hsl(var(--input))",
+                },
+              },
+            },
+          },
+        },
+      }
+    `)
+  })
+
+  test("should handle multiple cross-registry items with overlapping dependencies", async () => {
+    const config = {
+      style: "default",
+      rsc: false,
+      tsx: false,
+      aliases: {
+        components: "./components",
+        utils: "./lib/utils",
+        ui: "./components/ui",
+      },
+      tailwind: {
+        baseColor: "neutral",
+        css: "globals.css",
+        cssVariables: false,
+      },
+      registries: {
+        "@ui": "http://localhost:4457/r/{name}.json",
+        "@lib": "http://localhost:4459/r/{name}.json",
+      },
+      resolvedPaths: {
+        cwd: process.cwd(),
+        tailwindConfig: "./tailwind.config.js",
+        tailwindCss: "./globals.css",
+        utils: "./lib/utils",
+        components: "./components",
+        lib: "./lib",
+        hooks: "./hooks",
+        ui: "./components/ui",
+      },
+    }
+
+    const result = await resolveRegistryTree(
+      ["@ui/dialog", "@lib/api-client"],
+      config
+    )
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "css": {
+          ".theme-custom": {
+            "background-color": "var(--background)",
+            "color": "var(--foreground)",
+          },
+        },
+        "cssVars": {
+          "dark": {
+            "--background": "240 10% 3.9%",
+            "--dialog-background": "240 10% 3.9%",
+            "--foreground": "0 0% 98%",
+          },
+          "light": {
+            "--background": "0 0% 100%",
+            "--dialog-background": "0 0% 100%",
+            "--foreground": "240 10% 3.9%",
+          },
+          "theme": {
+            "--card": "240 5% 6%",
+            "--card-foreground": "60 5% 90%",
+          },
+        },
+        "dependencies": [
+          "next-themes",
+          "date-fns",
+          "clsx",
+          "@radix-ui/react-dialog",
+          "axios",
+        ],
+        "devDependencies": [
+          "@types/node",
+          "@types/axios",
+        ],
+        "docs": "## Theme Provider
+
+      A component for managing application themes.
+      ## Chart Utilities
+
+      Utility functions for chart data processing.
+      ## Dialog
+
+      A modal dialog component.
+      ",
+        "envVars": {
+          "API_KEY": "your-api-key",
+          "API_SECRET": "your-api-secret",
+        },
+        "files": [
+          {
+            "content": "export const ThemeProvider = () => <div>Theme</div>",
+            "path": "ui/theme-provider.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export const formatChartData = (data) => data",
+            "path": "lib/chart-utils.ts",
+            "type": "registry:lib",
+          },
+          {
+            "content": "export const Dialog = () => <dialog>Dialog</dialog>",
+            "path": "ui/dialog.tsx",
+            "type": "registry:ui",
+          },
+          {
+            "content": "export const apiClient = axios.create()",
+            "path": "lib/api-client.ts",
+            "type": "registry:lib",
+          },
+        ],
+        "tailwind": {
+          "config": {
+            "plugins": [
+              "require('tailwindcss-animate')",
+            ],
+            "theme": {
+              "extend": {
+                "colors": {
+                  "border": "hsl(var(--border))",
+                  "input": "hsl(var(--input))",
+                },
+              },
+            },
+          },
+        },
+      }
+    `)
+  })
+
+  test("should properly deduplicate shared registry dependencies", async () => {
+    const config = {
+      style: "default",
+      rsc: false,
+      tsx: false,
+      aliases: {
+        components: "./components",
+        utils: "./lib/utils",
+        ui: "./components/ui",
+      },
+      tailwind: {
+        baseColor: "neutral",
+        css: "globals.css",
+        cssVariables: false,
+      },
+      registries: {
+        "@ui": "http://localhost:4457/r/{name}.json",
+        "@lib": "http://localhost:4459/r/{name}.json",
+      },
+      resolvedPaths: {
+        cwd: process.cwd(),
+        tailwindConfig: "./tailwind.config.js",
+        tailwindCss: "./globals.css",
+        utils: "./lib/utils",
+        components: "./components",
+        lib: "./lib",
+        hooks: "./hooks",
+        ui: "./components/ui",
+      },
+    }
+
+    const result = await resolveRegistryTree(
+      ["@ui/dialog", "@lib/api-client"],
+      config
+    )
+
+    // Verify that chart-utils appears only once in the files.
+    const chartUtilsFiles = result?.files?.filter(
+      (f) => f.path === "lib/chart-utils.ts"
+    )
+    expect(chartUtilsFiles).toHaveLength(1)
+
+    // Verify that theme-provider appears only once.
+    const themeProviderFiles = result?.files?.filter(
+      (f) => f.path === "ui/theme-provider.tsx"
+    )
+    expect(themeProviderFiles).toHaveLength(1)
+
+    // Verify dependencies are merged without duplicates.
+    expect(result?.dependencies).toEqual([
+      "next-themes",
+      "date-fns",
+      "clsx",
+      "@radix-ui/react-dialog",
+      "axios",
+    ])
+  })
+})
+
+describe("resolveRegistryTree - last wins behavior", async () => {
+  // Create registries with overlapping properties to test last-wins
+  const overrideRegistry = await createRegistryServer(
+    [
+      {
+        name: "base-component",
+        type: "registry:ui",
+        files: [
+          {
+            path: "ui/component.tsx",
+            content: "export const Component = () => <div>Base</div>",
+            type: "registry:ui",
+          },
+        ],
+        cssVars: {
+          light: {
+            "--background": "#ffffff",
+            "--foreground": "#000000",
+          },
+          dark: {
+            "--background": "#000000",
+            "--foreground": "#ffffff",
+          },
+        },
+        css: {
+          ".component": {
+            padding: "1rem",
+            margin: "0.5rem",
+          },
+        },
+        dependencies: ["react", "clsx"],
+        envVars: {
+          API_URL: "https://base.example.com",
+          APP_NAME: "Base App",
+        },
+        docs: "Base component documentation",
+      },
+      {
+        name: "override-component",
+        type: "registry:ui",
+        registryDependencies: ["@override/base-component"],
+        files: [
+          {
+            path: "ui/component.tsx",
+            content: "export const Component = () => <div>Override</div>",
+            type: "registry:ui",
+          },
+        ],
+        cssVars: {
+          light: {
+            "--background": "#f0f0f0", // Override base
+            "--primary": "#0066cc", // Add new
+          },
+          dark: {
+            "--background": "#1a1a1a", // Override base
+          },
+        },
+        css: {
+          ".component": {
+            padding: "2rem", // Override base
+            border: "1px solid", // Add new
+          },
+        },
+        dependencies: ["react-dom"], // Additional dependency
+        envVars: {
+          API_URL: "https://override.example.com", // Override base
+          DEBUG: "true", // Add new
+        },
+        docs: "Override component documentation",
+      },
+      {
+        name: "final-component",
+        type: "registry:ui",
+        registryDependencies: ["@override/override-component"],
+        files: [
+          {
+            path: "ui/component.tsx",
+            content: "export const Component = () => <div>Final</div>",
+            type: "registry:ui",
+          },
+        ],
+        cssVars: {
+          light: {
+            "--background": "#e0e0e0", // Override again
+          },
+        },
+        css: {
+          ".component": {
+            margin: "1rem", // Override base margin
+          },
+        },
+        envVars: {
+          APP_NAME: "Final App", // Override base
+        },
+        docs: "Final component documentation",
+      },
+    ],
+    { port: 4460 }
+  )
+
+  beforeAll(async () => {
+    await overrideRegistry.start()
+  })
+
+  afterAll(async () => {
+    await overrideRegistry.stop()
+  })
+
+  test("should apply last-wins for overlapping CSS properties", async () => {
+    const config = {
+      style: "default",
+      rsc: false,
+      tsx: false,
+      aliases: {
+        components: "./components",
+        utils: "./lib/utils",
+        ui: "./components/ui",
+      },
+      tailwind: {
+        baseColor: "neutral",
+        css: "globals.css",
+        cssVariables: false,
+      },
+      registries: {
+        "@override": "http://localhost:4460/r/{name}.json",
+      },
+      resolvedPaths: {
+        cwd: process.cwd(),
+        tailwindConfig: "./tailwind.config.js",
+        tailwindCss: "./globals.css",
+        utils: "./lib/utils",
+        components: "./components",
+        lib: "./lib",
+        hooks: "./hooks",
+        ui: "./components/ui",
+      },
+    }
+
+    const result = await resolveRegistryTree(
+      ["@override/final-component"],
+      config
+    )
+
+    // Check files - should only have the final version
+    expect(result?.files).toHaveLength(1)
+    expect(result?.files?.[0]).toMatchObject({
+      path: "ui/component.tsx",
+      content: "export const Component = () => <div>Final</div>",
+    })
+
+    // Check CSS - properties should be merged with later values overriding
+    expect(result?.css).toMatchInlineSnapshot(`
+      {
+        ".component": {
+          "border": "1px solid",
+          "margin": "1rem",
+          "padding": "2rem",
+        },
+      }
+    `)
+
+    // Check cssVars - later values should override earlier ones
+    expect(result?.cssVars).toMatchInlineSnapshot(`
+      {
+        "dark": {
+          "--background": "#1a1a1a",
+          "--foreground": "#ffffff",
+        },
+        "light": {
+          "--background": "#e0e0e0",
+          "--foreground": "#000000",
+          "--primary": "#0066cc",
+        },
+      }
+    `)
+
+    // Check envVars - later values should override
+    expect(result?.envVars).toMatchInlineSnapshot(`
+      {
+        "API_URL": "https://override.example.com",
+        "APP_NAME": "Final App",
+        "DEBUG": "true",
+      }
+    `)
+
+    // Check dependencies - all should be included
+    expect(result?.dependencies).toEqual(["react", "clsx", "react-dom"])
+
+    // Check docs - all should be concatenated
+    expect(result?.docs).toMatchInlineSnapshot(`
+      "Base component documentation
+      Override component documentation
+      Final component documentation
+      "
+    `)
+  })
+
+  test("should handle multiple items where last wins", async () => {
+    const config = {
+      style: "default",
+      rsc: false,
+      tsx: false,
+      aliases: {
+        components: "./components",
+        utils: "./lib/utils",
+        ui: "./components/ui",
+      },
+      tailwind: {
+        baseColor: "neutral",
+        css: "globals.css",
+        cssVariables: false,
+      },
+      registries: {
+        "@override": "http://localhost:4460/r/{name}.json",
+      },
+      resolvedPaths: {
+        cwd: process.cwd(),
+        tailwindConfig: "./tailwind.config.js",
+        tailwindCss: "./globals.css",
+        utils: "./lib/utils",
+        components: "./components",
+        lib: "./lib",
+        hooks: "./hooks",
+        ui: "./components/ui",
+      },
+    }
+
+    // Request multiple items that have the same file path
+    const result = await resolveRegistryTree(
+      ["@override/base-component", "@override/override-component"],
+      config
+    )
+
+    // Files should deduplicate with last one winning
+    expect(result?.files).toHaveLength(1)
+    expect(result?.files?.[0]).toMatchObject({
+      path: "ui/component.tsx",
+      content: "export const Component = () => <div>Override</div>", // Override wins
+    })
+
+    // CSS should merge with override winning for same properties
+    expect(result?.css?.[".component"]).toMatchObject({
+      padding: "2rem", // Override wins
+      margin: "0.5rem", // From base (not overridden)
+      border: "1px solid", // From override (new property)
+    })
+
+    // cssVars should merge with override winning
+    expect(result?.cssVars?.light).toMatchObject({
+      "--background": "#f0f0f0", // Override wins
+      "--foreground": "#000000", // From base (not overridden)
+      "--primary": "#0066cc", // From override (new property)
+    })
+  })
+})
diff --git a/packages/shadcn/src/registry/resolver.ts b/packages/shadcn/src/registry/resolver.ts
new file mode 100644
index 00000000000..4f8ada6c9d3
--- /dev/null
+++ b/packages/shadcn/src/registry/resolver.ts
@@ -0,0 +1,715 @@
+import { createHash } from "crypto"
+import path from "path"
+import {
+  getRegistryBaseColor,
+  getShadcnRegistryIndex,
+} from "@/src/registry/api"
+import {
+  buildUrlAndHeadersForRegistryItem,
+  resolveRegistryUrl,
+} from "@/src/registry/builder"
+import { setRegistryHeaders } from "@/src/registry/context"
+import {
+  RegistryNotConfiguredError,
+  RegistryParseError,
+} from "@/src/registry/errors"
+import { fetchRegistry, fetchRegistryLocal } from "@/src/registry/fetcher"
+import { parseRegistryAndItemFromString } from "@/src/registry/parser"
+import {
+  deduplicateFilesByTarget,
+  isLocalFile,
+  isUrl,
+} from "@/src/registry/utils"
+import {
+  registryItemSchema,
+  registryResolvedItemsTreeSchema,
+} from "@/src/schema"
+import { Config, getTargetStyleFromConfig } from "@/src/utils/get-config"
+import { getProjectTailwindVersionFromConfig } from "@/src/utils/get-project-info"
+import { handleError } from "@/src/utils/handle-error"
+import { buildTailwindThemeColorsFromCssVars } from "@/src/utils/updaters/update-tailwind-config"
+import deepmerge from "deepmerge"
+import { z } from "zod"
+
+export function resolveRegistryItemsFromRegistries(
+  items: string[],
+  config: Config
+) {
+  const registryHeaders: Record<string, Record<string, string>> = {}
+  const resolvedItems = [...items]
+
+  if (!config?.registries) {
+    setRegistryHeaders({})
+    return resolvedItems
+  }
+
+  for (let i = 0; i < resolvedItems.length; i++) {
+    const resolved = buildUrlAndHeadersForRegistryItem(resolvedItems[i], config)
+
+    if (resolved) {
+      resolvedItems[i] = resolved.url
+
+      if (Object.keys(resolved.headers).length > 0) {
+        registryHeaders[resolved.url] = resolved.headers
+      }
+    }
+  }
+
+  setRegistryHeaders(registryHeaders)
+
+  return resolvedItems
+}
+
+// Internal function that fetches registry items without clearing context.
+// This is used for recursive dependency resolution.
+export async function fetchRegistryItems(
+  items: string[],
+  config: Config,
+  options: { useCache?: boolean } = {}
+) {
+  const results = await Promise.all(
+    items.map(async (item) => {
+      if (isLocalFile(item)) {
+        return fetchRegistryLocal(item)
+      }
+
+      if (isUrl(item)) {
+        const [result] = await fetchRegistry([item], options)
+        try {
+          return registryItemSchema.parse(result)
+        } catch (error) {
+          throw new RegistryParseError(item, error)
+        }
+      }
+
+      if (item.startsWith("@") && config?.registries) {
+        const paths = resolveRegistryItemsFromRegistries([item], config)
+        const [result] = await fetchRegistry(paths, options)
+        try {
+          return registryItemSchema.parse(result)
+        } catch (error) {
+          throw new RegistryParseError(item, error)
+        }
+      }
+
+      const path = `styles/${config?.style ?? "new-york-v4"}/${item}.json`
+      const [result] = await fetchRegistry([path], options)
+      try {
+        return registryItemSchema.parse(result)
+      } catch (error) {
+        throw new RegistryParseError(item, error)
+      }
+    })
+  )
+
+  return results
+}
+
+// Helper schema for items with source tracking
+const registryItemWithSourceSchema = registryItemSchema.extend({
+  _source: z.string().optional(),
+})
+
+// Resolves a list of registry items with all their dependencies and returns
+// a complete installation bundle with merged configuration.
+export async function resolveRegistryTree(
+  names: z.infer<typeof registryItemSchema>["name"][],
+  config: Config,
+  options: { useCache?: boolean } = {}
+) {
+  options = {
+    useCache: true,
+    ...options,
+  }
+
+  let payload: z.infer<typeof registryItemWithSourceSchema>[] = []
+  let allDependencyItems: z.infer<typeof registryItemWithSourceSchema>[] = []
+  let allDependencyRegistryNames: string[] = []
+
+  const uniqueNames = Array.from(new Set(names))
+
+  const results = await fetchRegistryItems(uniqueNames, config, options)
+
+  const resultMap = new Map<string, z.infer<typeof registryItemSchema>>()
+  for (let i = 0; i < results.length; i++) {
+    if (results[i]) {
+      resultMap.set(uniqueNames[i], results[i])
+    }
+  }
+
+  for (const [sourceName, item] of Array.from(resultMap.entries())) {
+    // Add source tracking
+    const itemWithSource: z.infer<typeof registryItemWithSourceSchema> = {
+      ...item,
+      _source: sourceName,
+    }
+    payload.push(itemWithSource)
+
+    if (item.registryDependencies) {
+      // Resolve namespace syntax and set headers for dependencies
+      let resolvedDependencies = item.registryDependencies
+
+      // Check for namespaced dependencies when no registries are configured
+      if (!config?.registries) {
+        const namespacedDeps = item.registryDependencies.filter((dep: string) =>
+          dep.startsWith("@")
+        )
+        if (namespacedDeps.length > 0) {
+          const { registry } = parseRegistryAndItemFromString(namespacedDeps[0])
+          throw new RegistryNotConfiguredError(registry)
+        }
+      } else {
+        resolvedDependencies = resolveRegistryItemsFromRegistries(
+          item.registryDependencies,
+          config
+        )
+      }
+
+      const { items, registryNames } = await resolveDependenciesRecursively(
+        resolvedDependencies,
+        config,
+        options,
+        new Set(uniqueNames)
+      )
+      allDependencyItems.push(...items)
+      allDependencyRegistryNames.push(...registryNames)
+    }
+  }
+
+  payload.push(...allDependencyItems)
+
+  // Handle any remaining registry names that need index resolution
+  if (allDependencyRegistryNames.length > 0) {
+    // Remove duplicates from registry names
+    const uniqueRegistryNames = Array.from(new Set(allDependencyRegistryNames))
+
+    // Separate namespaced and non-namespaced items
+    const nonNamespacedItems = uniqueRegistryNames.filter(
+      (name) => !name.startsWith("@")
+    )
+    const namespacedDepItems = uniqueRegistryNames.filter((name) =>
+      name.startsWith("@")
+    )
+
+    // Handle namespaced dependency items
+    if (namespacedDepItems.length > 0) {
+      // This will now throw specific errors on failure
+      const depResults = await fetchRegistryItems(
+        namespacedDepItems,
+        config,
+        options
+      )
+
+      for (let i = 0; i < depResults.length; i++) {
+        const item = depResults[i]
+        const itemWithSource: z.infer<typeof registryItemWithSourceSchema> = {
+          ...item,
+          _source: namespacedDepItems[i],
+        }
+        payload.push(itemWithSource)
+      }
+    }
+
+    // For non-namespaced items, we need the index and style resolution
+    if (nonNamespacedItems.length > 0) {
+      const index = await getShadcnRegistryIndex()
+      if (!index && payload.length === 0) {
+        return null
+      }
+
+      if (index) {
+        // If we're resolving the index, we want it to go first
+        if (nonNamespacedItems.includes("index")) {
+          nonNamespacedItems.unshift("index")
+        }
+
+        // Resolve non-namespaced items through the existing flow
+        // Get URLs for all registry items including their dependencies
+        const registryUrls: string[] = []
+        for (const name of nonNamespacedItems) {
+          const itemDependencies = await resolveRegistryDependencies(
+            name,
+            config,
+            options
+          )
+          registryUrls.push(...itemDependencies)
+        }
+
+        // Deduplicate URLs
+        const uniqueUrls = Array.from(new Set(registryUrls))
+        let result = await fetchRegistry(uniqueUrls, options)
+        const registryPayload = z.array(registryItemSchema).parse(result)
+        payload.push(...registryPayload)
+      }
+    }
+  }
+
+  if (!payload.length) {
+    return null
+  }
+
+  // No deduplication - we want to support multiple items with the same name from different sources
+
+  // If we're resolving the index, we want to fetch
+  // the theme item if a base color is provided.
+  // We do this for index only.
+  // Other components will ship with their theme tokens.
+  if (
+    uniqueNames.includes("index") ||
+    allDependencyRegistryNames.includes("index")
+  ) {
+    if (config.tailwind.baseColor) {
+      const theme = await registryGetTheme(config.tailwind.baseColor, config)
+      if (theme) {
+        payload.unshift(theme)
+      }
+    }
+  }
+
+  // Build source map for topological sort
+  const sourceMap = new Map<z.infer<typeof registryItemSchema>, string>()
+  payload.forEach((item) => {
+    // Use the _source property if it was added, otherwise use the name
+    const source = item._source || item.name
+    sourceMap.set(item, source)
+  })
+
+  // Apply topological sort to ensure dependencies come before dependents
+  payload = topologicalSortRegistryItems(payload, sourceMap)
+
+  // Sort the payload so that registry:theme items come first,
+  // while maintaining the relative order of all items.
+  payload.sort((a, b) => {
+    if (a.type === "registry:theme" && b.type !== "registry:theme") {
+      return -1
+    }
+    if (a.type !== "registry:theme" && b.type === "registry:theme") {
+      return 1
+    }
+    return 0
+  })
+
+  let tailwind = {}
+  payload.forEach((item) => {
+    tailwind = deepmerge(tailwind, item.tailwind ?? {})
+  })
+
+  let cssVars = {}
+  payload.forEach((item) => {
+    cssVars = deepmerge(cssVars, item.cssVars ?? {})
+  })
+
+  let css = {}
+  payload.forEach((item) => {
+    css = deepmerge(css, item.css ?? {})
+  })
+
+  let docs = ""
+  payload.forEach((item) => {
+    if (item.docs) {
+      docs += `${item.docs}\n`
+    }
+  })
+
+  let envVars = {}
+  payload.forEach((item) => {
+    envVars = deepmerge(envVars, item.envVars ?? {})
+  })
+
+  // Deduplicate files based on resolved target paths.
+  const deduplicatedFiles = await deduplicateFilesByTarget(
+    payload.map((item) => item.files ?? []),
+    config
+  )
+
+  const parsed = registryResolvedItemsTreeSchema.parse({
+    dependencies: deepmerge.all(payload.map((item) => item.dependencies ?? [])),
+    devDependencies: deepmerge.all(
+      payload.map((item) => item.devDependencies ?? [])
+    ),
+    files: deduplicatedFiles,
+    tailwind,
+    cssVars,
+    css,
+    docs,
+  })
+
+  if (Object.keys(envVars).length > 0) {
+    parsed.envVars = envVars
+  }
+
+  return parsed
+}
+
+async function resolveDependenciesRecursively(
+  dependencies: string[],
+  config: Config,
+  options: { useCache?: boolean } = {},
+  visited: Set<string> = new Set()
+) {
+  const items: z.infer<typeof registryItemSchema>[] = []
+  const registryNames: string[] = []
+
+  for (const dep of dependencies) {
+    if (visited.has(dep)) {
+      continue
+    }
+    visited.add(dep)
+
+    // Handle URLs and local files directly.
+    if (isUrl(dep) || isLocalFile(dep)) {
+      const [item] = await fetchRegistryItems([dep], config, options)
+      if (item) {
+        items.push(item)
+        if (item.registryDependencies) {
+          // Resolve namespaced dependencies to set proper headers.
+          const resolvedDeps = config?.registries
+            ? resolveRegistryItemsFromRegistries(
+                item.registryDependencies,
+                config
+              )
+            : item.registryDependencies
+
+          const nested = await resolveDependenciesRecursively(
+            resolvedDeps,
+            config,
+            options,
+            visited
+          )
+          items.push(...nested.items)
+          registryNames.push(...nested.registryNames)
+        }
+      }
+    }
+    // Handle namespaced items (e.g., @one/foo, @two/bar).
+    else if (dep.startsWith("@") && config?.registries) {
+      // Check if the registry exists.
+      const { registry } = parseRegistryAndItemFromString(dep)
+      if (registry && !(registry in config.registries)) {
+        throw new RegistryNotConfiguredError(registry)
+      }
+
+      // Let getRegistryItem handle the namespaced item with config
+      // This ensures proper authentication headers are used
+      const [item] = await fetchRegistryItems([dep], config, options)
+      if (item) {
+        items.push(item)
+        if (item.registryDependencies) {
+          // Resolve namespaced dependencies to set proper headers.
+          const resolvedDeps = config?.registries
+            ? resolveRegistryItemsFromRegistries(
+                item.registryDependencies,
+                config
+              )
+            : item.registryDependencies
+
+          const nested = await resolveDependenciesRecursively(
+            resolvedDeps,
+            config,
+            options,
+            visited
+          )
+          items.push(...nested.items)
+          registryNames.push(...nested.registryNames)
+        }
+      }
+    }
+    // Handle regular component names.
+    else {
+      registryNames.push(dep)
+
+      if (config) {
+        try {
+          const [item] = await fetchRegistryItems([dep], config, options)
+          if (item && item.registryDependencies) {
+            // Resolve namespaced dependencies to set proper headers.
+            const resolvedDeps = config?.registries
+              ? resolveRegistryItemsFromRegistries(
+                  item.registryDependencies,
+                  config
+                )
+              : item.registryDependencies
+
+            const nested = await resolveDependenciesRecursively(
+              resolvedDeps,
+              config,
+              options,
+              visited
+            )
+            items.push(...nested.items)
+            registryNames.push(...nested.registryNames)
+          }
+        } catch (error) {
+          // If we can't fetch the registry item, that's okay - we'll still
+          // include the name.
+        }
+      }
+    }
+  }
+
+  return { items, registryNames }
+}
+
+async function resolveRegistryDependencies(
+  url: string,
+  config: Config,
+  options: { useCache?: boolean } = {}
+) {
+  if (isUrl(url)) {
+    return [url]
+  }
+
+  const { registryNames } = await resolveDependenciesRecursively(
+    [url],
+    config,
+    options,
+    new Set()
+  )
+
+  const style = config.resolvedPaths?.cwd
+    ? await getTargetStyleFromConfig(config.resolvedPaths.cwd, config.style)
+    : config.style
+
+  const urls = registryNames.map((name) =>
+    resolveRegistryUrl(isUrl(name) ? name : `styles/${style}/${name}.json`)
+  )
+
+  return Array.from(new Set(urls))
+}
+
+async function registryGetTheme(name: string, config: Config) {
+  const [baseColor, tailwindVersion] = await Promise.all([
+    getRegistryBaseColor(name),
+    getProjectTailwindVersionFromConfig(config),
+  ])
+  if (!baseColor) {
+    return null
+  }
+
+  // TODO: Move this to the registry i.e registry:theme.
+  const theme = {
+    name,
+    type: "registry:theme",
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            borderRadius: {
+              lg: "var(--radius)",
+              md: "calc(var(--radius) - 2px)",
+              sm: "calc(var(--radius) - 4px)",
+            },
+            colors: {},
+          },
+        },
+      },
+    },
+    cssVars: {
+      theme: {},
+      light: {
+        radius: "0.5rem",
+      },
+      dark: {},
+    },
+  } satisfies z.infer<typeof registryItemSchema>
+
+  if (config.tailwind.cssVariables) {
+    theme.tailwind.config.theme.extend.colors = {
+      ...theme.tailwind.config.theme.extend.colors,
+      ...buildTailwindThemeColorsFromCssVars(baseColor.cssVars.dark ?? {}),
+    }
+    theme.cssVars = {
+      theme: {
+        ...baseColor.cssVars.theme,
+        ...theme.cssVars.theme,
+      },
+      light: {
+        ...baseColor.cssVars.light,
+        ...theme.cssVars.light,
+      },
+      dark: {
+        ...baseColor.cssVars.dark,
+        ...theme.cssVars.dark,
+      },
+    }
+
+    if (tailwindVersion === "v4" && baseColor.cssVarsV4) {
+      theme.cssVars = {
+        theme: {
+          ...baseColor.cssVarsV4.theme,
+          ...theme.cssVars.theme,
+        },
+        light: {
+          radius: "0.625rem",
+          ...baseColor.cssVarsV4.light,
+        },
+        dark: {
+          ...baseColor.cssVarsV4.dark,
+        },
+      }
+    }
+  }
+
+  return theme
+}
+
+function computeItemHash(
+  item: Pick<z.infer<typeof registryItemSchema>, "name">,
+  source?: string
+) {
+  const identifier = source || item.name
+
+  const hash = createHash("sha256")
+    .update(identifier)
+    .digest("hex")
+    .substring(0, 8)
+
+  return `${item.name}::${hash}`
+}
+
+function extractItemIdentifierFromDependency(dependency: string) {
+  if (isUrl(dependency)) {
+    const url = new URL(dependency)
+    const pathname = url.pathname
+    const match = pathname.match(/\/([^/]+)\.json$/)
+    const name = match ? match[1] : path.basename(pathname, ".json")
+
+    return {
+      name,
+      hash: computeItemHash({ name }, dependency),
+    }
+  }
+
+  if (isLocalFile(dependency)) {
+    const match = dependency.match(/\/([^/]+)\.json$/)
+    const name = match ? match[1] : path.basename(dependency, ".json")
+
+    return {
+      name,
+      hash: computeItemHash({ name }, dependency),
+    }
+  }
+
+  const { item } = parseRegistryAndItemFromString(dependency)
+  return {
+    name: item,
+    hash: computeItemHash({ name: item }, dependency),
+  }
+}
+
+function topologicalSortRegistryItems(
+  items: z.infer<typeof registryItemSchema>[],
+  sourceMap: Map<z.infer<typeof registryItemSchema>, string>
+) {
+  const itemMap = new Map<string, z.infer<typeof registryItemSchema>>()
+  const hashToItem = new Map<string, z.infer<typeof registryItemSchema>>()
+  const inDegree = new Map<string, number>()
+  const adjacencyList = new Map<string, string[]>()
+
+  items.forEach((item) => {
+    const source = sourceMap.get(item) || item.name
+    const hash = computeItemHash(item, source)
+
+    itemMap.set(hash, item)
+    hashToItem.set(hash, item)
+    inDegree.set(hash, 0)
+    adjacencyList.set(hash, [])
+  })
+
+  // Build a map of dependency to possible items.
+  const depToHashes = new Map<string, string[]>()
+  items.forEach((item) => {
+    const source = sourceMap.get(item) || item.name
+    const hash = computeItemHash(item, source)
+
+    if (!depToHashes.has(item.name)) {
+      depToHashes.set(item.name, [])
+    }
+    depToHashes.get(item.name)!.push(hash)
+
+    if (source !== item.name) {
+      if (!depToHashes.has(source)) {
+        depToHashes.set(source, [])
+      }
+      depToHashes.get(source)!.push(hash)
+    }
+  })
+
+  items.forEach((item) => {
+    const itemSource = sourceMap.get(item) || item.name
+    const itemHash = computeItemHash(item, itemSource)
+
+    if (item.registryDependencies) {
+      item.registryDependencies.forEach((dep) => {
+        let depHash: string | undefined
+
+        const exactMatches = depToHashes.get(dep) || []
+        if (exactMatches.length === 1) {
+          depHash = exactMatches[0]
+        } else if (exactMatches.length > 1) {
+          // Multiple matches - try to disambiguate.
+          // For now, just use the first one and warn.
+          depHash = exactMatches[0]
+        } else {
+          const { name } = extractItemIdentifierFromDependency(dep)
+          const nameMatches = depToHashes.get(name) || []
+          if (nameMatches.length > 0) {
+            depHash = nameMatches[0]
+          }
+        }
+
+        if (depHash && itemMap.has(depHash)) {
+          adjacencyList.get(depHash)!.push(itemHash)
+          inDegree.set(itemHash, inDegree.get(itemHash)! + 1)
+        }
+      })
+    }
+  })
+
+  // Implements Kahn's algorithm.
+  const queue: string[] = []
+  const sorted: z.infer<typeof registryItemSchema>[] = []
+
+  inDegree.forEach((degree, hash) => {
+    if (degree === 0) {
+      queue.push(hash)
+    }
+  })
+
+  while (queue.length > 0) {
+    const currentHash = queue.shift()!
+    const item = itemMap.get(currentHash)!
+    sorted.push(item)
+
+    adjacencyList.get(currentHash)!.forEach((dependentHash) => {
+      const newDegree = inDegree.get(dependentHash)! - 1
+      inDegree.set(dependentHash, newDegree)
+
+      if (newDegree === 0) {
+        queue.push(dependentHash)
+      }
+    })
+  }
+
+  if (sorted.length !== items.length) {
+    console.warn("Circular dependency detected in registry items")
+    // Return all items even if there are circular dependencies
+    // Items not in sorted are part of circular dependencies
+    const sortedHashes = new Set(
+      sorted.map((item) => {
+        const source = sourceMap.get(item) || item.name
+        return computeItemHash(item, source)
+      })
+    )
+
+    items.forEach((item) => {
+      const source = sourceMap.get(item) || item.name
+      const hash = computeItemHash(item, source)
+      if (!sortedHashes.has(hash)) {
+        sorted.push(item)
+      }
+    })
+  }
+
+  return sorted
+}
diff --git a/packages/shadcn/src/registry/schema.test.ts b/packages/shadcn/src/registry/schema.test.ts
new file mode 100644
index 00000000000..e7fa2c9b4ad
--- /dev/null
+++ b/packages/shadcn/src/registry/schema.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest"
+
+import { registryConfigSchema } from "./schema"
+
+describe("registryConfigSchema", () => {
+  it("should accept valid registry names starting with @", () => {
+    const validConfig = {
+      "@v0": "https://v0.dev/{name}.json",
+      "@acme": {
+        url: "https://acme.com/{name}.json",
+        headers: {
+          Authorization: "Bearer token",
+        },
+      },
+    }
+
+    const result = registryConfigSchema.safeParse(validConfig)
+    expect(result.success).toBe(true)
+  })
+
+  it("should reject registry names not starting with @", () => {
+    const invalidConfig = {
+      v0: "https://v0.dev/{name}.json",
+      acme: "https://acme.com/{name}.json",
+    }
+
+    const result = registryConfigSchema.safeParse(invalidConfig)
+    expect(result.success).toBe(false)
+    if (!result.success) {
+      expect(result.error.errors[0].message).toContain(
+        "Registry names must start with @"
+      )
+    }
+  })
+
+  it("should reject URLs without {name} placeholder", () => {
+    const invalidConfig = {
+      "@v0": "https://v0.dev/component.json",
+    }
+
+    const result = registryConfigSchema.safeParse(invalidConfig)
+    expect(result.success).toBe(false)
+    if (!result.success) {
+      expect(result.error.errors[0].message).toContain(
+        "Registry URL must include {name} placeholder"
+      )
+    }
+  })
+})
diff --git a/packages/shadcn/src/registry/schema.ts b/packages/shadcn/src/registry/schema.ts
new file mode 100644
index 00000000000..01fafada9cc
--- /dev/null
+++ b/packages/shadcn/src/registry/schema.ts
@@ -0,0 +1,216 @@
+import { z } from "zod"
+
+// Note: if you edit the schema here, you must also edit the schema in the
+// apps/www/public/schema/registry-item.json file.
+
+export const registryItemTypeSchema = z.enum([
+  "registry:lib",
+  "registry:block",
+  "registry:component",
+  "registry:ui",
+  "registry:hook",
+  "registry:page",
+  "registry:file",
+  "registry:theme",
+  "registry:style",
+  "registry:item",
+
+  // Internal use only
+  "registry:example",
+  "registry:internal",
+])
+
+export const registryItemFileSchema = z.discriminatedUnion("type", [
+  // Target is required for registry:file and registry:page
+  z.object({
+    path: z.string(),
+    content: z.string().optional(),
+    type: z.enum(["registry:file", "registry:page"]),
+    target: z.string(),
+  }),
+  z.object({
+    path: z.string(),
+    content: z.string().optional(),
+    type: registryItemTypeSchema.exclude(["registry:file", "registry:page"]),
+    target: z.string().optional(),
+  }),
+])
+
+export const registryItemTailwindSchema = z.object({
+  config: z
+    .object({
+      content: z.array(z.string()).optional(),
+      theme: z.record(z.string(), z.any()).optional(),
+      plugins: z.array(z.string()).optional(),
+    })
+    .optional(),
+})
+
+export const registryItemCssVarsSchema = z.object({
+  theme: z.record(z.string(), z.string()).optional(),
+  light: z.record(z.string(), z.string()).optional(),
+  dark: z.record(z.string(), z.string()).optional(),
+})
+
+// Recursive type for CSS properties that supports empty objects at any level.
+const cssValueSchema: z.ZodType<any> = z.lazy(() =>
+  z.union([z.string(), z.record(z.string(), cssValueSchema)])
+)
+
+export const registryItemCssSchema = z.record(z.string(), cssValueSchema)
+
+export const registryItemEnvVarsSchema = z.record(z.string(), z.string())
+
+export const registryItemSchema = z.object({
+  $schema: z.string().optional(),
+  extends: z.string().optional(),
+  name: z.string(),
+  type: registryItemTypeSchema,
+  title: z.string().optional(),
+  author: z.string().min(2).optional(),
+  description: z.string().optional(),
+  dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
+  registryDependencies: z.array(z.string()).optional(),
+  files: z.array(registryItemFileSchema).optional(),
+  tailwind: registryItemTailwindSchema.optional(),
+  cssVars: registryItemCssVarsSchema.optional(),
+  css: registryItemCssSchema.optional(),
+  envVars: registryItemEnvVarsSchema.optional(),
+  meta: z.record(z.string(), z.any()).optional(),
+  docs: z.string().optional(),
+  categories: z.array(z.string()).optional(),
+})
+
+export type RegistryItem = z.infer<typeof registryItemSchema>
+
+export const registrySchema = z.object({
+  name: z.string(),
+  homepage: z.string(),
+  items: z.array(registryItemSchema),
+})
+
+export type Registry = z.infer<typeof registrySchema>
+
+export const registryIndexSchema = z.array(registryItemSchema)
+
+export const stylesSchema = z.array(
+  z.object({
+    name: z.string(),
+    label: z.string(),
+  })
+)
+
+export const iconsSchema = z.record(
+  z.string(),
+  z.record(z.string(), z.string())
+)
+
+export const registryBaseColorSchema = z.object({
+  inlineColors: z.object({
+    light: z.record(z.string(), z.string()),
+    dark: z.record(z.string(), z.string()),
+  }),
+  cssVars: registryItemCssVarsSchema,
+  cssVarsV4: registryItemCssVarsSchema.optional(),
+  inlineColorsTemplate: z.string(),
+  cssVarsTemplate: z.string(),
+})
+
+export const registryResolvedItemsTreeSchema = registryItemSchema.pick({
+  dependencies: true,
+  devDependencies: true,
+  files: true,
+  tailwind: true,
+  cssVars: true,
+  css: true,
+  envVars: true,
+  docs: true,
+})
+
+export const registryConfigItemSchema = z.union([
+  // Simple string format: "https://example.com/{name}.json"
+  z.string().refine((s) => s.includes("{name}"), {
+    message: "Registry URL must include {name} placeholder",
+  }),
+  // Advanced object format with auth options
+  z.object({
+    url: z.string().refine((s) => s.includes("{name}"), {
+      message: "Registry URL must include {name} placeholder",
+    }),
+    params: z.record(z.string(), z.string()).optional(),
+    headers: z.record(z.string(), z.string()).optional(),
+  }),
+])
+
+export const registryConfigSchema = z.record(
+  z.string().refine((key) => key.startsWith("@"), {
+    message: "Registry names must start with @ (e.g., @v0, @acme)",
+  }),
+  registryConfigItemSchema
+)
+
+export const rawConfigSchema = z
+  .object({
+    $schema: z.string().optional(),
+    style: z.string(),
+    rsc: z.coerce.boolean().default(false),
+    tsx: z.coerce.boolean().default(true),
+    tailwind: z.object({
+      config: z.string().optional(),
+      css: z.string(),
+      baseColor: z.string(),
+      cssVariables: z.boolean().default(true),
+      prefix: z.string().default("").optional(),
+    }),
+    iconLibrary: z.string().optional(),
+    aliases: z.object({
+      components: z.string(),
+      utils: z.string(),
+      ui: z.string().optional(),
+      lib: z.string().optional(),
+      hooks: z.string().optional(),
+    }),
+    registries: registryConfigSchema.optional(),
+  })
+  .strict()
+
+export const configSchema = rawConfigSchema.extend({
+  resolvedPaths: z.object({
+    cwd: z.string(),
+    tailwindConfig: z.string(),
+    tailwindCss: z.string(),
+    utils: z.string(),
+    components: z.string(),
+    lib: z.string(),
+    hooks: z.string(),
+    ui: z.string(),
+  }),
+})
+
+// TODO: type the key.
+// Okay for now since I don't want a breaking change.
+export const workspaceConfigSchema = z.record(configSchema)
+
+export const searchResultItemSchema = z.object({
+  name: z.string(),
+  type: z.string().optional(),
+  description: z.string().optional(),
+  registry: z.string(),
+  addCommandArgument: z.string(),
+})
+
+export const searchResultsSchema = z.object({
+  pagination: z.object({
+    total: z.number(),
+    offset: z.number(),
+    limit: z.number(),
+    hasMore: z.boolean(),
+  }),
+  items: z.array(searchResultItemSchema),
+})
+
+export const registriesIndexSchema = z.record(
+  z.string().regex(/^@[a-zA-Z0-9][a-zA-Z0-9-_]*$/),
+  z.string()
+)
diff --git a/packages/shadcn/src/registry/search.test.ts b/packages/shadcn/src/registry/search.test.ts
new file mode 100644
index 00000000000..e9a49bd46a2
--- /dev/null
+++ b/packages/shadcn/src/registry/search.test.ts
@@ -0,0 +1,655 @@
+import { describe, expect, it, vi } from "vitest"
+
+import { getRegistry } from "./api"
+import { buildRegistryItemNameFromRegistry, searchRegistries } from "./search"
+
+describe("searchRegistries", () => {
+  it("should fetch and return registries in flat format", async () => {
+    // Mock getRegistry
+    vi.mock("./api", () => ({
+      getRegistry: vi.fn(),
+    }))
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async (name: string) => {
+      if (name === "@shadcn" || name === "@shadcn/registry") {
+        return {
+          name: "shadcn/ui",
+          homepage: "https://ui.shadcn.com",
+          items: [
+            {
+              name: "button",
+              type: "registry:ui",
+              description: "A button component",
+            },
+            {
+              name: "card",
+              type: "registry:ui",
+              description: "A card component",
+            },
+          ],
+        }
+      }
+      if (name === "@custom" || name === "@custom/registry") {
+        return {
+          name: "custom/components",
+          homepage: "https://custom.com",
+          items: [
+            {
+              name: "header",
+              type: "registry:component",
+              description: "A header component",
+            },
+          ],
+        }
+      }
+      throw new Error(`Unknown registry: ${name}`)
+    })
+
+    const results = await searchRegistries(["@shadcn", "@custom"])
+
+    expect(results).toEqual({
+      items: [
+        {
+          name: "button",
+          type: "registry:ui",
+          description: "A button component",
+          registry: "@shadcn",
+          addCommandArgument: "@shadcn/button",
+        },
+        {
+          name: "card",
+          type: "registry:ui",
+          description: "A card component",
+          registry: "@shadcn",
+          addCommandArgument: "@shadcn/card",
+        },
+        {
+          name: "header",
+          type: "registry:component",
+          description: "A header component",
+          registry: "@custom",
+          addCommandArgument: "@custom/header",
+        },
+      ],
+      pagination: {
+        total: 3,
+        offset: 0,
+        limit: 3,
+        hasMore: false,
+      },
+    })
+
+    mockGetRegistry.mockRestore()
+  })
+
+  it("should apply search filter when query is provided", async () => {
+    vi.mock("./api", () => ({
+      getRegistry: vi.fn(),
+    }))
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async (name: string) => {
+      if (name === "@shadcn" || name === "@shadcn/registry") {
+        return {
+          name: "shadcn/ui",
+          homepage: "https://ui.shadcn.com",
+          items: [
+            {
+              name: "button",
+              type: "registry:ui",
+              description: "A button component",
+            },
+            {
+              name: "card",
+              type: "registry:ui",
+              description: "A card component",
+            },
+            {
+              name: "dialog",
+              type: "registry:ui",
+              description: "A dialog component",
+            },
+          ],
+        }
+      }
+      throw new Error(`Unknown registry: ${name}`)
+    })
+
+    const results = await searchRegistries(["@shadcn"], { query: "button" })
+
+    expect(results.items).toHaveLength(1)
+    expect(results.items[0].name).toBe("button")
+    expect(results.items[0].registry).toBe("@shadcn")
+    expect(results.items[0].addCommandArgument).toBe("@shadcn/button")
+    expect(results.pagination).toEqual({
+      total: 1,
+      offset: 0,
+      limit: 1,
+      hasMore: false,
+    })
+
+    mockGetRegistry.mockRestore()
+  })
+
+  it("should fail fast on registry error", async () => {
+    vi.mock("./api", () => ({
+      getRegistry: vi.fn(),
+    }))
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async (name: string) => {
+      throw new Error(`Registry not found: ${name}`)
+    })
+
+    await expect(searchRegistries(["@unknown"])).rejects.toThrow(
+      "Registry not found"
+    )
+
+    mockGetRegistry.mockRestore()
+  })
+
+  it("should return empty items when search has no matches", async () => {
+    vi.mock("./api", () => ({
+      getRegistry: vi.fn(),
+    }))
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async () => ({
+      name: "test/registry",
+      homepage: "https://test.com",
+      items: [{ name: "button", type: "registry:ui", description: "A button" }],
+    }))
+
+    const results = await searchRegistries(["@test"], { query: "nonexistent" })
+
+    expect(results.items).toHaveLength(0)
+    expect(results.pagination).toEqual({
+      total: 0,
+      offset: 0,
+      limit: 0,
+      hasMore: false,
+    })
+
+    mockGetRegistry.mockRestore()
+  })
+
+  it("should handle fuzzy search", async () => {
+    vi.mock("./api", () => ({
+      getRegistry: vi.fn(),
+    }))
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async () => ({
+      name: "test/registry",
+      homepage: "https://test.com",
+      items: [
+        {
+          name: "button",
+          type: "registry:ui",
+          description: "A button component",
+        },
+        {
+          name: "dialog",
+          type: "registry:ui",
+          description: "A dialog overlay",
+        },
+      ],
+    }))
+
+    const results = await searchRegistries(["@test"], { query: "butto" })
+
+    expect(results.items).toHaveLength(1)
+    expect(results.items[0].name).toBe("button")
+    expect(results.pagination).toEqual({
+      total: 1,
+      offset: 0,
+      limit: 1,
+      hasMore: false,
+    })
+
+    mockGetRegistry.mockRestore()
+  })
+
+  it("should search in descriptions", async () => {
+    vi.mock("./api", () => ({
+      getRegistry: vi.fn(),
+    }))
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async () => ({
+      name: "test/registry",
+      homepage: "https://test.com",
+      items: [
+        {
+          name: "button",
+          type: "registry:ui",
+          description: "A clickable element",
+        },
+        { name: "dialog", type: "registry:ui", description: "A modal overlay" },
+      ],
+    }))
+
+    const results = await searchRegistries(["@test"], { query: "modal" })
+
+    expect(results.items).toHaveLength(1)
+    expect(results.items[0].name).toBe("dialog")
+    expect(results.pagination).toEqual({
+      total: 1,
+      offset: 0,
+      limit: 1,
+      hasMore: false,
+    })
+
+    mockGetRegistry.mockRestore()
+  })
+
+  it("should respect limit option", async () => {
+    vi.mock("./api", () => ({
+      getRegistry: vi.fn(),
+    }))
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async () => ({
+      name: "test/registry",
+      homepage: "https://test.com",
+      items: [
+        { name: "alert", type: "registry:ui", description: "Alert component" },
+        {
+          name: "avatar",
+          type: "registry:ui",
+          description: "Avatar component",
+        },
+        {
+          name: "accordion",
+          type: "registry:ui",
+          description: "Accordion component",
+        },
+        {
+          name: "aspect-ratio",
+          type: "registry:ui",
+          description: "Aspect ratio component",
+        },
+      ],
+    }))
+
+    const results = await searchRegistries(["@test"], { query: "a", limit: 2 })
+
+    expect(results.items.length).toBeLessThanOrEqual(2)
+    expect(results.pagination.limit).toBe(2)
+    expect(results.pagination.offset).toBe(0)
+
+    mockGetRegistry.mockRestore()
+  })
+
+  it("should handle offset and limit for pagination", async () => {
+    vi.mock("./api", () => ({
+      getRegistry: vi.fn(),
+    }))
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async () => ({
+      name: "test/registry",
+      homepage: "https://test.com",
+      items: [
+        { name: "item1", type: "registry:ui", description: "Item 1" },
+        { name: "item2", type: "registry:ui", description: "Item 2" },
+        { name: "item3", type: "registry:ui", description: "Item 3" },
+        { name: "item4", type: "registry:ui", description: "Item 4" },
+        { name: "item5", type: "registry:ui", description: "Item 5" },
+      ],
+    }))
+
+    const results = await searchRegistries(["@test"], { offset: 2, limit: 2 })
+
+    expect(results.items).toHaveLength(2)
+    expect(results.items[0].name).toBe("item3")
+    expect(results.items[1].name).toBe("item4")
+    expect(results.pagination).toEqual({
+      total: 5,
+      offset: 2,
+      limit: 2,
+      hasMore: true,
+    })
+
+    mockGetRegistry.mockRestore()
+  })
+
+  it("should set hasMore to false when no more items", async () => {
+    vi.mock("./api", () => ({
+      getRegistry: vi.fn(),
+    }))
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async () => ({
+      name: "test/registry",
+      homepage: "https://test.com",
+      items: [
+        { name: "item1", type: "registry:ui", description: "Item 1" },
+        { name: "item2", type: "registry:ui", description: "Item 2" },
+        { name: "item3", type: "registry:ui", description: "Item 3" },
+      ],
+    }))
+
+    const results = await searchRegistries(["@test"], { offset: 2, limit: 2 })
+
+    expect(results.items).toHaveLength(1)
+    expect(results.items[0].name).toBe("item3")
+    expect(results.pagination.hasMore).toBe(false)
+
+    mockGetRegistry.mockRestore()
+  })
+
+  it("should handle pagination across multiple registries", async () => {
+    vi.mock("./api", () => ({
+      getRegistry: vi.fn(),
+    }))
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async (name: string) => {
+      if (name === "@one") {
+        return {
+          name: "one",
+          homepage: "https://one.com",
+          items: [
+            { name: "item1", type: "registry:ui", description: "Item 1" },
+            { name: "item2", type: "registry:ui", description: "Item 2" },
+            { name: "item3", type: "registry:ui", description: "Item 3" },
+          ],
+        }
+      }
+      if (name === "@two") {
+        return {
+          name: "two",
+          homepage: "https://two.com",
+          items: [
+            { name: "item4", type: "registry:ui", description: "Item 4" },
+            { name: "item5", type: "registry:ui", description: "Item 5" },
+          ],
+        }
+      }
+      throw new Error("Unknown registry")
+    })
+
+    const results = await searchRegistries(["@one", "@two"], {
+      offset: 1,
+      limit: 3,
+    })
+
+    expect(results.items).toHaveLength(3)
+    expect(results.items[0].name).toBe("item2")
+    expect(results.items[0].registry).toBe("@one")
+    expect(results.items[1].name).toBe("item3")
+    expect(results.items[1].registry).toBe("@one")
+    expect(results.items[2].name).toBe("item4")
+    expect(results.items[2].registry).toBe("@two")
+    expect(results.pagination).toEqual({
+      total: 5,
+      offset: 1,
+      limit: 3,
+      hasMore: true,
+    })
+
+    mockGetRegistry.mockRestore()
+  })
+
+  // Tests for URL support
+  it("should search registries from direct URLs", async () => {
+    const registryUrl1 = "https://example.com/registry1.json"
+    const registryUrl2 = "https://example.com/registry2.json"
+
+    // Mock getRegistry to handle URLs
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async (nameOrUrl: string) => {
+      if (nameOrUrl === registryUrl1) {
+        return {
+          name: "registry1",
+          homepage: "https://example.com/registry1",
+          items: [
+            {
+              name: "component1",
+              type: "registry:ui",
+              description: "First component",
+            },
+            {
+              name: "component2",
+              type: "registry:ui",
+              description: "Second component",
+            },
+          ],
+        }
+      }
+      if (nameOrUrl === registryUrl2) {
+        return {
+          name: "registry2",
+          homepage: "https://example.com/registry2",
+          items: [
+            {
+              name: "component3",
+              type: "registry:ui",
+              description: "Third component",
+            },
+          ],
+        }
+      }
+      throw new Error(`Unknown URL: ${nameOrUrl}`)
+    })
+
+    const results = await searchRegistries([registryUrl1, registryUrl2])
+
+    expect(results.items).toHaveLength(3)
+    expect(results.items[0]).toMatchObject({
+      name: "component1",
+      registry: registryUrl1,
+    })
+    expect(results.items[1]).toMatchObject({
+      name: "component2",
+      registry: registryUrl1,
+    })
+    expect(results.items[2]).toMatchObject({
+      name: "component3",
+      registry: registryUrl2,
+    })
+
+    mockGetRegistry.mockRestore()
+  })
+
+  it("should handle mixed registry names and URLs", async () => {
+    const registryName = "@shadcn"
+    const registryUrl = "https://custom.com/registry.json"
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async (nameOrUrl: string) => {
+      if (nameOrUrl === "@shadcn" || nameOrUrl === "@shadcn/registry") {
+        return {
+          name: "shadcn/ui",
+          homepage: "https://ui.shadcn.com",
+          items: [
+            {
+              name: "button",
+              type: "registry:ui",
+              description: "A button component",
+            },
+          ],
+        }
+      }
+      if (nameOrUrl === registryUrl) {
+        return {
+          name: "custom",
+          homepage: "https://custom.com",
+          items: [
+            {
+              name: "custom-component",
+              type: "registry:ui",
+              description: "A custom component",
+            },
+          ],
+        }
+      }
+      throw new Error(`Unknown registry: ${nameOrUrl}`)
+    })
+
+    const results = await searchRegistries([registryName, registryUrl], {
+      query: "button",
+    })
+
+    // Should find the button from @shadcn
+    expect(results.items).toHaveLength(1)
+    expect(results.items[0]).toMatchObject({
+      name: "button",
+      registry: registryName,
+    })
+
+    mockGetRegistry.mockRestore()
+  })
+
+  it("should handle URL fetch errors gracefully", async () => {
+    const badUrl = "https://nonexistent.com/registry.json"
+
+    const mockGetRegistry = vi.mocked(getRegistry)
+
+    mockGetRegistry.mockImplementation(async (nameOrUrl: string) => {
+      if (nameOrUrl === badUrl) {
+        throw new Error("Failed to fetch registry")
+      }
+      throw new Error(`Unknown registry: ${nameOrUrl}`)
+    })
+
+    await expect(searchRegistries([badUrl])).rejects.toThrow(
+      "Failed to fetch registry"
+    )
+
+    mockGetRegistry.mockRestore()
+  })
+})
+
+describe("buildRegistryItemNameFromRegistry", () => {
+  const testCases = [
+    // Namespace registries
+    {
+      name: "namespace registry",
+      itemName: "button",
+      registry: "@shadcn",
+      expected: "@shadcn/button",
+    },
+    {
+      name: "namespace registry with org",
+      itemName: "card",
+      registry: "@myorg",
+      expected: "@myorg/card",
+    },
+
+    // URL with registry in path
+    {
+      name: "URL with registry.json",
+      itemName: "button",
+      registry: "http://example.com/r/registry.json",
+      expected: "http://example.com/r/button.json",
+    },
+    {
+      name: "URL with multiple registry in path - replaces last",
+      itemName: "button",
+      registry: "http://example.com/registry/foo/registry",
+      expected: "http://example.com/registry/foo/button",
+    },
+    {
+      name: "URL with registry in nested path",
+      itemName: "dialog",
+      registry: "http://example.com/components/registry/index.json",
+      expected: "http://example.com/components/dialog/index.json",
+    },
+
+    // URL with registry in query params
+    {
+      name: "URL with registry in query param",
+      itemName: "modal",
+      registry: "http://registry.foo.com?item=registry",
+      expected: "http://registry.foo.com?item=modal",
+    },
+    {
+      name: "URL with registry in query param (multiple params)",
+      itemName: "tabs",
+      registry: "http://api.example.com/fetch?name=registry&type=component",
+      expected: "http://api.example.com/fetch?name=tabs&type=component",
+    },
+    {
+      name: "URL with registry in both path and query",
+      itemName: "button",
+      registry: "http://example.com/registry?name=registry",
+      expected: "http://example.com/button?name=button",
+    },
+
+    // Edge cases - should NOT replace in domain/subdomain
+    {
+      name: "URL with registry in subdomain - should NOT replace",
+      itemName: "button",
+      registry: "http://registry.example.com/api",
+      expected: "http://registry.example.com/api",
+    },
+    {
+      name: "URL with registry in domain - should NOT replace",
+      itemName: "button",
+      registry: "http://myregistry.com/api",
+      expected: "http://myregistry.com/api",
+    },
+
+    // URLs without registry
+    {
+      name: "URL without registry word",
+      itemName: "button",
+      registry: "http://example.com/components/all",
+      expected: "http://example.com/components/all",
+    },
+    {
+      name: "URL with only query params, no registry",
+      itemName: "button",
+      registry: "http://example.com?type=ui",
+      expected: "http://example.com?type=ui",
+    },
+
+    // HTTPS and ports
+    {
+      name: "HTTPS URL with registry",
+      itemName: "sidebar",
+      registry: "https://secure.example.com/components/registry",
+      expected: "https://secure.example.com/components/sidebar",
+    },
+    {
+      name: "URL with port and registry",
+      itemName: "header",
+      registry: "http://localhost:3000/api/registry",
+      expected: "http://localhost:3000/api/header",
+    },
+
+    // Complex cases
+    {
+      name: "URL with hash and registry",
+      itemName: "footer",
+      registry: "http://example.com/registry#latest",
+      expected: "http://example.com/footer#latest",
+    },
+    {
+      name: "URL with encoded characters",
+      itemName: "button",
+      registry: "http://example.com/registry%20component",
+      expected: "http://example.com/button%20component",
+    },
+  ]
+
+  it.each(testCases)("$name", ({ itemName, registry, expected }) => {
+    const result = buildRegistryItemNameFromRegistry(itemName, registry)
+    expect(result).toBe(expected)
+  })
+})
diff --git a/packages/shadcn/src/registry/search.ts b/packages/shadcn/src/registry/search.ts
new file mode 100644
index 00000000000..0d9cb5b753d
--- /dev/null
+++ b/packages/shadcn/src/registry/search.ts
@@ -0,0 +1,174 @@
+import { searchResultItemSchema, searchResultsSchema } from "@/src/schema"
+import { Config } from "@/src/utils/get-config"
+import fuzzysort from "fuzzysort"
+import { z } from "zod"
+
+import { getRegistry } from "./api"
+
+export async function searchRegistries(
+  registries: string[],
+  options?: {
+    query?: string
+    limit?: number
+    offset?: number
+    config?: Partial<Config>
+    useCache?: boolean
+  }
+) {
+  const { query, limit, offset, config, useCache } = options || {}
+
+  let allItems: z.infer<typeof searchResultItemSchema>[] = []
+
+  for (const registry of registries) {
+    const registryData = await getRegistry(registry, { config, useCache })
+
+    const itemsWithRegistry = (registryData.items || []).map((item) => ({
+      name: item.name,
+      type: item.type,
+      description: item.description,
+      registry: registry,
+      addCommandArgument: buildRegistryItemNameFromRegistry(
+        item.name,
+        registry
+      ),
+    }))
+
+    allItems = allItems.concat(itemsWithRegistry)
+  }
+
+  if (query) {
+    allItems = searchItems(allItems, {
+      query,
+      limit: allItems.length,
+      keys: ["name", "description"],
+    }) as z.infer<typeof searchResultItemSchema>[]
+  }
+
+  const paginationOffset = offset || 0
+  const paginationLimit = limit || allItems.length
+  const totalItems = allItems.length
+
+  const result: z.infer<typeof searchResultsSchema> = {
+    pagination: {
+      total: totalItems,
+      offset: paginationOffset,
+      limit: paginationLimit,
+      hasMore: paginationOffset + paginationLimit < totalItems,
+    },
+    items: allItems.slice(paginationOffset, paginationOffset + paginationLimit),
+  }
+
+  return searchResultsSchema.parse(result)
+}
+
+const searchableItemSchema = z
+  .object({
+    name: z.string(),
+    type: z.string().optional(),
+    description: z.string().optional(),
+    registry: z.string().optional(),
+    addCommandArgument: z.string().optional(),
+  })
+  .passthrough()
+
+type SearchableItem = z.infer<typeof searchableItemSchema>
+
+function searchItems<
+  T extends {
+    name: string
+    type?: string
+    description?: string
+    addCommandArgument?: string
+    [key: string]: any
+  } = SearchableItem
+>(
+  items: T[],
+  options: {
+    query: string
+  } & Pick<Parameters<typeof fuzzysort.go>[2], "keys" | "threshold" | "limit">
+) {
+  options = {
+    limit: 100,
+    threshold: -10000,
+    ...options,
+  }
+
+  const searchResults = fuzzysort.go(options.query, items, {
+    keys: options.keys,
+    threshold: options.threshold,
+    limit: options.limit,
+  })
+
+  const results = searchResults.map((result) => result.obj)
+
+  return z.array(searchableItemSchema).parse(results)
+}
+
+function isUrl(string: string): boolean {
+  try {
+    new URL(string)
+    return true
+  } catch {
+    return false
+  }
+}
+
+// Builds the registry item name for the add command.
+// For namespaced registries, returns "registry/item".
+// For URL registries, replaces "registry" with the item name in the URL.
+export function buildRegistryItemNameFromRegistry(
+  name: string,
+  registry: string
+) {
+  // If registry is not a URL, return namespace format.
+  if (!isUrl(registry)) {
+    return `${registry}/${name}`
+  }
+
+  // Find where the host part ends in the original string.
+  const protocolEnd = registry.indexOf("://") + 3
+  const hostEnd = registry.indexOf("/", protocolEnd)
+
+  if (hostEnd === -1) {
+    // No path, check for query params.
+    const queryStart = registry.indexOf("?", protocolEnd)
+    if (queryStart !== -1) {
+      // Has query params but no path.
+      const beforeQuery = registry.substring(0, queryStart)
+      const queryAndAfter = registry.substring(queryStart)
+      // Replace "registry" with itemName in query params only.
+      const updatedQuery = queryAndAfter.replace(/\bregistry\b/g, name)
+      return beforeQuery + updatedQuery
+    }
+    // No path or query, return as is.
+    return registry
+  }
+
+  // Split at host boundary.
+  const hostPart = registry.substring(0, hostEnd)
+  const pathAndQuery = registry.substring(hostEnd)
+
+  // Find all occurrences of "registry" in path and query.
+  // Replace only the last occurrence in the path segment.
+  const pathEnd =
+    pathAndQuery.indexOf("?") !== -1
+      ? pathAndQuery.indexOf("?")
+      : pathAndQuery.length
+  const pathOnly = pathAndQuery.substring(0, pathEnd)
+  const queryAndAfter = pathAndQuery.substring(pathEnd)
+
+  // Replace the last occurrence of "registry" in the path.
+  const lastIndex = pathOnly.lastIndexOf("registry")
+  let updatedPath = pathOnly
+  if (lastIndex !== -1) {
+    updatedPath =
+      pathOnly.substring(0, lastIndex) +
+      name +
+      pathOnly.substring(lastIndex + "registry".length)
+  }
+
+  // Replace all occurrences of "registry" in query params.
+  const updatedQuery = queryAndAfter.replace(/\bregistry\b/g, name)
+
+  return hostPart + updatedPath + updatedQuery
+}
diff --git a/packages/shadcn/src/registry/utils.test.ts b/packages/shadcn/src/registry/utils.test.ts
new file mode 100644
index 00000000000..e94198b1c95
--- /dev/null
+++ b/packages/shadcn/src/registry/utils.test.ts
@@ -0,0 +1,624 @@
+import { describe, expect, it, test, vi } from "vitest"
+import { z } from "zod"
+
+import { Config } from "../utils/get-config"
+import { registryItemFileSchema } from "./schema"
+import {
+  canDeduplicateFiles,
+  deduplicateFilesByTarget,
+  getDependencyFromModuleSpecifier,
+  isLocalFile,
+  isUniversalRegistryItem,
+  isUrl,
+} from "./utils"
+
+describe("getDependencyFromModuleSpecifier", () => {
+  it("should return the first part of a non-scoped package with path", () => {
+    expect(getDependencyFromModuleSpecifier("foo/bar")).toBe("foo")
+    expect(getDependencyFromModuleSpecifier("lodash/get")).toBe("lodash")
+  })
+
+  it("should return the full package name for scoped packages", () => {
+    expect(getDependencyFromModuleSpecifier("@types/react")).toBe(
+      "@types/react"
+    )
+    expect(getDependencyFromModuleSpecifier("@radix-ui/react-dialog")).toBe(
+      "@radix-ui/react-dialog"
+    )
+  })
+
+  it.each([
+    // Core packages
+    "react",
+    "react/jsx-runtime",
+    "react/dom",
+    "react/experimental",
+    "react-dom",
+    "react-dom/client",
+    "react-dom/server",
+    "react-dom/test-utils",
+    "next",
+    "next/link",
+    "next/image",
+    "next/navigation",
+  ])("should return null for core package %s", (moduleSpecifier) => {
+    expect(getDependencyFromModuleSpecifier(moduleSpecifier)).toBe(null)
+  })
+
+  it.each([
+    // Node.js modules
+    "node:fs",
+    "node:path",
+    "node:http",
+    "node:stream",
+    // JSR modules
+    "jsr:@std/fs",
+    "jsr:@std/path",
+    "jsr:@std/http",
+    // NPM modules
+    "npm:lodash",
+    "npm:@types/react",
+    "npm:express",
+  ])("should return null for prefixed module %s", (moduleSpecifier) => {
+    expect(getDependencyFromModuleSpecifier(moduleSpecifier)).toBe(null)
+  })
+
+  it.each([
+    ["", ""],
+    [" ", " "],
+    ["/", ""],
+  ])("should handle empty or invalid input %s", (input, expected) => {
+    expect(getDependencyFromModuleSpecifier(input)).toBe(expected)
+  })
+
+  it.each([
+    ["foo/bar/baz", "foo"],
+    ["lodash/get/set", "lodash"],
+  ])("should handle package %s with multiple slashes", (input, expected) => {
+    expect(getDependencyFromModuleSpecifier(input)).toBe(expected)
+  })
+
+  it("should handle edge cases for scoped packages", () => {
+    expect(getDependencyFromModuleSpecifier("@types/react/dom")).toBe(
+      "@types/react"
+    )
+  })
+})
+
+describe("isUrl", () => {
+  it("should return true for valid URLs", () => {
+    expect(isUrl("https://example.com")).toBe(true)
+    expect(isUrl("http://example.com")).toBe(true)
+    expect(isUrl("https://example.com/path")).toBe(true)
+    expect(isUrl("https://subdomain.example.com")).toBe(true)
+    expect(isUrl("https://ui.shadcn.com/r/styles/new-york/button.json")).toBe(
+      true
+    )
+  })
+
+  it("should return false for non-URLs", () => {
+    expect(isUrl("./local-file.json")).toBe(false)
+    expect(isUrl("../relative/path.json")).toBe(false)
+    expect(isUrl("/absolute/path.json")).toBe(false)
+    expect(isUrl("component-name")).toBe(false)
+    expect(isUrl("")).toBe(false)
+    expect(isUrl("just-text")).toBe(false)
+  })
+})
+
+describe("isLocalFile", () => {
+  it("should return true for local JSON files", () => {
+    expect(isLocalFile("./component.json")).toBe(true)
+    expect(isLocalFile("../shared/button.json")).toBe(true)
+    expect(isLocalFile("/absolute/path/card.json")).toBe(true)
+    expect(isLocalFile("local-component.json")).toBe(true)
+    expect(isLocalFile("nested/directory/dialog.json")).toBe(true)
+    expect(isLocalFile("~/Desktop/component.json")).toBe(true)
+    expect(isLocalFile("~/Documents/shared/button.json")).toBe(true)
+  })
+
+  it("should return false for URLs ending with .json", () => {
+    expect(isLocalFile("https://example.com/component.json")).toBe(false)
+    expect(isLocalFile("http://registry.com/button.json")).toBe(false)
+    expect(
+      isLocalFile("https://ui.shadcn.com/r/styles/new-york/button.json")
+    ).toBe(false)
+  })
+
+  it("should return false for non-JSON files", () => {
+    expect(isLocalFile("./component.tsx")).toBe(false)
+    expect(isLocalFile("../shared/button.ts")).toBe(false)
+    expect(isLocalFile("/absolute/path/card.js")).toBe(false)
+    expect(isLocalFile("local-component.css")).toBe(false)
+    expect(isLocalFile("component-name")).toBe(false)
+    expect(isLocalFile("")).toBe(false)
+  })
+
+  it("should return false for directory paths", () => {
+    expect(isLocalFile("./components/")).toBe(false)
+    expect(isLocalFile("../shared")).toBe(false)
+    expect(isLocalFile("/absolute/path")).toBe(false)
+  })
+})
+
+describe("isUniversalRegistryItem", () => {
+  it("should return true when all files have targets with registry:file type", () => {
+    const registryItem = {
+      files: [
+        {
+          path: "file1.ts",
+          target: "src/file1.ts",
+          type: "registry:file" as const,
+        },
+        {
+          path: "file2.ts",
+          target: "src/utils/file2.ts",
+          type: "registry:file" as const,
+        },
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(true)
+  })
+
+  it("should return true for any registry item type if all files are registry:file with targets", () => {
+    const registryItem = {
+      type: "registry:ui" as const,
+      files: [
+        {
+          path: "cursor-rules.txt",
+          target: "~/.cursor/rules/react.txt",
+          type: "registry:file" as const,
+        },
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(true)
+  })
+
+  it("should return false when some files lack targets", () => {
+    const registryItem = {
+      files: [
+        {
+          path: "file1.ts",
+          target: "src/file1.ts",
+          type: "registry:file" as const,
+        },
+        { path: "file2.ts", target: "", type: "registry:file" as const },
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(false)
+  })
+
+  it("should return false when files have non-registry:file type", () => {
+    const registryItem = {
+      files: [
+        {
+          path: "file1.ts",
+          target: "src/file1.ts",
+          type: "registry:file" as const,
+        },
+        {
+          path: "file2.ts",
+          target: "src/lib/file2.ts",
+          type: "registry:lib" as const, // Not registry:file
+        },
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(false)
+  })
+
+  it("should return false when no files have targets", () => {
+    const registryItem = {
+      files: [
+        { path: "file1.ts", target: "", type: "registry:file" as const },
+        { path: "file2.ts", target: "", type: "registry:file" as const },
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(false)
+  })
+
+  it("should return false when files array is empty", () => {
+    const registryItem = {
+      files: [],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(false)
+  })
+
+  it("should return false when files is undefined", () => {
+    const registryItem = {}
+    expect(isUniversalRegistryItem(registryItem)).toBe(false)
+  })
+
+  it("should return false when registryItem is null", () => {
+    expect(isUniversalRegistryItem(null)).toBe(false)
+  })
+
+  it("should return false when registryItem is undefined", () => {
+    expect(isUniversalRegistryItem(undefined)).toBe(false)
+  })
+
+  it("should return false when target is null", () => {
+    const registryItem = {
+      files: [
+        {
+          path: "file1.ts",
+          target: null as any,
+          type: "registry:file" as const,
+        },
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(false)
+  })
+
+  it("should return false when target is undefined", () => {
+    const registryItem = {
+      files: [
+        {
+          path: "file1.ts",
+          type: "registry:file" as const,
+          target: undefined as any,
+        },
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(false)
+  })
+
+  it("should return false when files have registry:component type even with targets", () => {
+    const registryItem = {
+      files: [
+        {
+          path: "component.tsx",
+          target: "components/ui/component.tsx",
+          type: "registry:component" as const,
+        },
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(false)
+  })
+
+  it("should return false when files have registry:hook type even with targets", () => {
+    const registryItem = {
+      files: [
+        {
+          path: "use-hook.ts",
+          target: "hooks/use-hook.ts",
+          type: "registry:hook" as const,
+        },
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(false)
+  })
+
+  it("should return false when files have registry:lib type even with targets", () => {
+    const registryItem = {
+      files: [
+        {
+          path: "utils.ts",
+          target: "lib/utils.ts",
+          type: "registry:lib" as const,
+        },
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(false)
+  })
+
+  it("should return true when all targets are non-empty strings for registry:file", () => {
+    const registryItem = {
+      files: [
+        { path: "file1.ts", target: " ", type: "registry:file" as const }, // whitespace is truthy
+        { path: "file2.ts", target: "0", type: "registry:file" as const }, // "0" is truthy
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(true)
+  })
+
+  it("should handle real-world example with path traversal attempts for registry:file", () => {
+    const registryItem = {
+      files: [
+        {
+          path: "malicious.ts",
+          target: "../../../etc/passwd",
+          type: "registry:file" as const,
+        },
+        {
+          path: "normal.ts",
+          target: "src/normal.ts",
+          type: "registry:file" as const,
+        },
+      ],
+    }
+    // The function should still return true - path validation is handled elsewhere
+    expect(isUniversalRegistryItem(registryItem)).toBe(true)
+  })
+
+  it("should return false when files have non-registry:file type in a UI registry item", () => {
+    const registryItem = {
+      type: "registry:ui" as const,
+      files: [
+        {
+          path: "button.tsx",
+          target: "src/components/ui/button.tsx",
+          type: "registry:ui" as const, // Not registry:file
+        },
+      ],
+    }
+    expect(isUniversalRegistryItem(registryItem)).toBe(false)
+  })
+})
+
+vi.mock("../utils/get-project-info", () => ({
+  getProjectInfo: vi.fn().mockResolvedValue({
+    isSrcDir: false,
+    framework: { name: "next-app" },
+  }),
+}))
+
+vi.mock("../utils/updaters/update-files", () => ({
+  findCommonRoot: vi.fn().mockImplementation(() => ""),
+  resolveFilePath: vi.fn().mockImplementation((file) => {
+    const typeMap: Record<string, string> = {
+      "registry:ui": "components/ui",
+      "registry:lib": "lib",
+      "registry:hook": "hooks",
+    }
+    const baseDir = typeMap[file.type] || "components"
+
+    if (file.target) {
+      return file.target
+    }
+
+    const filename = file.path.split("/").pop()
+    return `${baseDir}/${filename}`
+  }),
+}))
+
+describe("deduplicateFilesByTarget", () => {
+  const createMockConfig = (overrides = {}): Config =>
+    ({
+      style: "default",
+      tailwind: { baseColor: "neutral" },
+      resolvedPaths: {
+        cwd: "/test/project",
+        tailwindConfig: "/test/project/tailwind.config.js",
+        tailwindCss: "/test/project/globals.css",
+        utils: "/test/project/lib/utils",
+        components: "/test/project/components",
+        lib: "/test/project/lib",
+        hooks: "/test/project/hooks",
+        ui: "/test/project/components/ui",
+      },
+      ...overrides,
+    } as Config)
+
+  test("should deduplicate files with same resolved path", async () => {
+    const config = createMockConfig()
+    const filesArrays = [
+      z.array(registryItemFileSchema).parse([
+        {
+          path: "ui/button.tsx",
+          content: "Button A",
+          type: "registry:ui",
+        },
+      ]),
+      z.array(registryItemFileSchema).parse([
+        {
+          path: "ui/button.tsx",
+          content: "Button B",
+          type: "registry:ui",
+        },
+      ]),
+    ]
+
+    const result = await deduplicateFilesByTarget(filesArrays, config)
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchInlineSnapshot(`
+      {
+        "content": "Button B",
+        "path": "ui/button.tsx",
+        "type": "registry:ui",
+      }
+    `)
+  })
+
+  test("should preserve files with different resolved paths", async () => {
+    const config = createMockConfig()
+    const filesArrays = [
+      z.array(registryItemFileSchema).parse([
+        {
+          path: "ui/button.tsx",
+          content: "Button",
+          type: "registry:ui",
+        },
+        {
+          path: "lib/utils.ts",
+          content: "Utils",
+          type: "registry:lib",
+        },
+      ]),
+    ]
+
+    const result = await deduplicateFilesByTarget(filesArrays, config)
+
+    expect(result).toHaveLength(2)
+    expect(result).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ path: "ui/button.tsx" }),
+        expect.objectContaining({ path: "lib/utils.ts" }),
+      ])
+    )
+  })
+
+  test("should handle explicit targets", async () => {
+    const config = createMockConfig()
+    const filesArrays = [
+      z.array(registryItemFileSchema).parse([
+        {
+          path: "custom/component.tsx",
+          content: "Component A",
+          type: "registry:ui",
+        },
+      ]),
+      z.array(registryItemFileSchema).parse([
+        {
+          path: "different/path.tsx",
+          content: "Component B",
+          type: "registry:ui",
+          target: "components/ui/button.tsx",
+        },
+      ]),
+    ]
+
+    const result = await deduplicateFilesByTarget(filesArrays, config)
+    expect(result).toHaveLength(2)
+  })
+
+  test("should handle undefined file arrays", async () => {
+    const config = createMockConfig()
+    const filesArrays = [
+      undefined,
+      z.array(registryItemFileSchema).parse([
+        {
+          path: "ui/button.tsx",
+          content: "Button",
+          type: "registry:ui",
+        },
+      ]),
+      undefined,
+    ]
+
+    const result = await deduplicateFilesByTarget(filesArrays, config)
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ path: "ui/button.tsx" })
+  })
+
+  test("should fallback to concatenation when config is incomplete", async () => {
+    const incompleteConfig = {
+      style: "default",
+      resolvedPaths: {
+        cwd: "/test/project",
+      },
+    } as Config
+
+    const filesArrays = [
+      z.array(registryItemFileSchema).parse([
+        {
+          path: "ui/button.tsx",
+          content: "Button A",
+          type: "registry:ui",
+        },
+      ]),
+      z.array(registryItemFileSchema).parse([
+        {
+          path: "ui/button.tsx",
+          content: "Button B",
+          type: "registry:ui",
+        },
+      ]),
+    ]
+
+    const result = await deduplicateFilesByTarget(filesArrays, incompleteConfig)
+
+    expect(result).toHaveLength(2)
+    expect(result[0]).toMatchObject({ content: "Button A" })
+    expect(result[1]).toMatchObject({ content: "Button B" })
+  })
+
+  test("should maintain last-wins behavior for conflicting files", async () => {
+    const config = createMockConfig()
+    const filesArrays = [
+      z.array(registryItemFileSchema).parse([
+        {
+          path: "ui/button.tsx",
+          content: "First",
+          type: "registry:ui",
+        },
+      ]),
+      z.array(registryItemFileSchema).parse([
+        {
+          path: "ui/button.tsx",
+          content: "Second",
+          type: "registry:ui",
+        },
+      ]),
+      z.array(registryItemFileSchema).parse([
+        {
+          path: "ui/button.tsx",
+          content: "Third",
+          type: "registry:ui",
+        },
+      ]),
+    ]
+
+    const result = await deduplicateFilesByTarget(filesArrays, config)
+
+    expect(result).toHaveLength(1)
+    expect(result[0].content).toBe("Third")
+  })
+})
+
+describe("canDeduplicateFiles", () => {
+  test("should return true when all required paths are present", () => {
+    const config = {
+      resolvedPaths: {
+        cwd: "/test/project",
+        ui: "/test/project/components/ui",
+        lib: "/test/project/lib",
+        components: "/test/project/components",
+        hooks: "/test/project/hooks",
+      },
+    } as Config
+
+    expect(canDeduplicateFiles(config)).toBe(true)
+  })
+
+  test("should return true when cwd and at least one component path is present", () => {
+    const config = {
+      resolvedPaths: {
+        cwd: "/test/project",
+        ui: "/test/project/components/ui",
+      },
+    } as Config
+
+    expect(canDeduplicateFiles(config)).toBe(true)
+  })
+
+  test("should return false when cwd is missing", () => {
+    const config = {
+      resolvedPaths: {
+        ui: "/test/project/components/ui",
+      },
+    } as Config
+
+    expect(canDeduplicateFiles(config)).toBe(false)
+  })
+
+  test("should return false when no component paths are present", () => {
+    const config = {
+      resolvedPaths: {
+        cwd: "/test/project",
+      },
+    } as Config
+
+    expect(canDeduplicateFiles(config)).toBe(false)
+  })
+
+  test("should return false when config is undefined", () => {
+    expect(canDeduplicateFiles(undefined as any)).toBe(false)
+  })
+})
+
+describe("isUrl", () => {
+  it("should return true for valid URLs", () => {
+    expect(isUrl("https://example.com")).toBe(true)
+    expect(isUrl("http://localhost:3000")).toBe(true)
+    expect(isUrl("https://example.com/path/to/file.json")).toBe(true)
+  })
+
+  it("should return false for non-URLs", () => {
+    expect(isUrl("not-a-url")).toBe(false)
+    expect(isUrl("/path/to/file")).toBe(false)
+    expect(isUrl("./relative/path")).toBe(false)
+    expect(isUrl("~/home/path")).toBe(false)
+  })
+})
diff --git a/packages/shadcn/src/registry/utils.ts b/packages/shadcn/src/registry/utils.ts
new file mode 100644
index 00000000000..84fd4cdc62c
--- /dev/null
+++ b/packages/shadcn/src/registry/utils.ts
@@ -0,0 +1,339 @@
+import * as fs from "fs/promises"
+import { tmpdir } from "os"
+import * as path from "path"
+import {
+  configSchema,
+  registryItemFileSchema,
+  registryItemSchema,
+} from "@/src/schema"
+import { Config } from "@/src/utils/get-config"
+import { ProjectInfo, getProjectInfo } from "@/src/utils/get-project-info"
+import { resolveImport } from "@/src/utils/resolve-import"
+import {
+  findCommonRoot,
+  resolveFilePath,
+} from "@/src/utils/updaters/update-files"
+import { Project, ScriptKind } from "ts-morph"
+import { loadConfig } from "tsconfig-paths"
+import { z } from "zod"
+
+const FILE_EXTENSIONS_FOR_LOOKUP = [".tsx", ".ts", ".jsx", ".js", ".css"]
+const FILE_PATH_SKIP_LIST = ["lib/utils.ts"]
+const DEPENDENCY_SKIP_LIST = [
+  /^(react|react-dom|next)(\/.*)?$/, // Matches react, react-dom, next and their submodules
+  /^(node|jsr|npm):.*$/, // Matches node:, jsr:, and npm: prefixed modules
+]
+
+const project = new Project({
+  compilerOptions: {},
+})
+
+// This returns the dependency from the module specifier.
+// Here dependency means an npm package.
+export function getDependencyFromModuleSpecifier(
+  moduleSpecifier: string
+): string | null {
+  // Skip if the dependency matches any pattern in the skip list
+  if (DEPENDENCY_SKIP_LIST.some((pattern) => pattern.test(moduleSpecifier))) {
+    return null
+  }
+
+  // If the module specifier does not start with `@` and has a /, add the dependency first part only.
+  // E.g. `foo/bar` -> `foo`
+  if (!moduleSpecifier.startsWith("@") && moduleSpecifier.includes("/")) {
+    moduleSpecifier = moduleSpecifier.split("/")[0]
+  }
+
+  // For scoped packages, we want to keep the first two parts
+  // E.g. `@types/react/dom` -> `@types/react`
+  if (moduleSpecifier.startsWith("@")) {
+    const parts = moduleSpecifier.split("/")
+    if (parts.length > 2) {
+      moduleSpecifier = parts.slice(0, 2).join("/")
+    }
+  }
+
+  return moduleSpecifier
+}
+
+export async function recursivelyResolveFileImports(
+  filePath: string,
+  config: z.infer<typeof configSchema>,
+  projectInfo: ProjectInfo,
+  processedFiles: Set<string> = new Set()
+): Promise<Pick<z.infer<typeof registryItemSchema>, "files" | "dependencies">> {
+  const resolvedFilePath = path.resolve(config.resolvedPaths.cwd, filePath)
+  const relativeRegistryFilePath = path.relative(
+    config.resolvedPaths.cwd,
+    resolvedFilePath
+  )
+
+  // Skip if the file is in the skip list
+  if (FILE_PATH_SKIP_LIST.includes(relativeRegistryFilePath)) {
+    return { dependencies: [], files: [] }
+  }
+
+  // Skip if the file extension is not one of the supported extensions
+  const fileExtension = path.extname(filePath)
+  if (!FILE_EXTENSIONS_FOR_LOOKUP.includes(fileExtension)) {
+    return { dependencies: [], files: [] }
+  }
+
+  // Prevent infinite loop: skip if already processed
+  if (processedFiles.has(relativeRegistryFilePath)) {
+    return { dependencies: [], files: [] }
+  }
+  processedFiles.add(relativeRegistryFilePath)
+
+  const stat = await fs.stat(resolvedFilePath)
+  if (!stat.isFile()) {
+    // Optionally log or handle this case
+    return { dependencies: [], files: [] }
+  }
+
+  const content = await fs.readFile(resolvedFilePath, "utf-8")
+  const tempFile = await createTempSourceFile(path.basename(resolvedFilePath))
+  const sourceFile = project.createSourceFile(tempFile, content, {
+    scriptKind: ScriptKind.TSX,
+  })
+  const tsConfig = await loadConfig(config.resolvedPaths.cwd)
+  if (tsConfig.resultType === "failed") {
+    return { dependencies: [], files: [] }
+  }
+
+  const files: z.infer<typeof registryItemSchema>["files"] = []
+  const dependencies = new Set<string>()
+
+  // Add the original file first
+  const fileType = determineFileType(filePath)
+  const originalFile = {
+    path: relativeRegistryFilePath,
+    type: fileType,
+    target: "",
+  }
+  files.push(originalFile)
+
+  // 1. Find all import statements in the file.
+  const importStatements = sourceFile.getImportDeclarations()
+  for (const importStatement of importStatements) {
+    const moduleSpecifier = importStatement.getModuleSpecifierValue()
+
+    const isRelativeImport = moduleSpecifier.startsWith(".")
+    const isAliasImport = moduleSpecifier.startsWith(
+      `${projectInfo.aliasPrefix}/`
+    )
+
+    // If not a local import, add to the dependencies array.
+    if (!isAliasImport && !isRelativeImport) {
+      const dependency = getDependencyFromModuleSpecifier(moduleSpecifier)
+      if (dependency) {
+        dependencies.add(dependency)
+      }
+      continue
+    }
+
+    let probableImportFilePath = await resolveImport(moduleSpecifier, tsConfig)
+
+    if (isRelativeImport) {
+      probableImportFilePath = path.resolve(
+        path.dirname(resolvedFilePath),
+        moduleSpecifier
+      )
+    }
+
+    if (!probableImportFilePath) {
+      continue
+    }
+
+    // Check if the probable import path has a file extension.
+    // Try each extension until we find a file that exists.
+    const hasExtension = path.extname(probableImportFilePath)
+    if (!hasExtension) {
+      for (const ext of FILE_EXTENSIONS_FOR_LOOKUP) {
+        const pathWithExt: string = `${probableImportFilePath}${ext}`
+        try {
+          await fs.access(pathWithExt)
+          probableImportFilePath = pathWithExt
+          break
+        } catch {
+          continue
+        }
+      }
+    }
+
+    const nestedRelativeRegistryFilePath = path.relative(
+      config.resolvedPaths.cwd,
+      probableImportFilePath
+    )
+
+    // Skip if we've already processed this file or if it's in the skip list
+    if (
+      processedFiles.has(nestedRelativeRegistryFilePath) ||
+      FILE_PATH_SKIP_LIST.includes(nestedRelativeRegistryFilePath)
+    ) {
+      continue
+    }
+
+    const fileType = determineFileType(moduleSpecifier)
+    const file = {
+      path: nestedRelativeRegistryFilePath,
+      type: fileType,
+      target: "",
+    }
+
+    // TODO (shadcn): fix this.
+    if (fileType === "registry:page" || fileType === "registry:file") {
+      file.target = moduleSpecifier
+    }
+
+    files.push(file)
+
+    // Recursively process the imported file, passing the shared processedFiles set
+    const nestedResults = await recursivelyResolveFileImports(
+      nestedRelativeRegistryFilePath,
+      config,
+      projectInfo,
+      processedFiles
+    )
+
+    if (nestedResults.files) {
+      // Only add files that haven't been processed yet
+      for (const file of nestedResults.files) {
+        if (!processedFiles.has(file.path)) {
+          processedFiles.add(file.path)
+          files.push(file)
+        }
+      }
+    }
+
+    if (nestedResults.dependencies) {
+      nestedResults.dependencies.forEach((dep) => dependencies.add(dep))
+    }
+  }
+
+  // Deduplicate files by path
+  const uniqueFiles = Array.from(
+    new Map(files.map((file) => [file.path, file])).values()
+  )
+
+  return {
+    dependencies: Array.from(dependencies),
+    files: uniqueFiles,
+  }
+}
+
+async function createTempSourceFile(filename: string) {
+  const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-"))
+  return path.join(dir, filename)
+}
+
+// This is a bit tricky to accurately determine.
+// For now we'll use the module specifier to determine the type.
+function determineFileType(
+  moduleSpecifier: string
+): z.infer<typeof registryItemSchema>["type"] {
+  if (moduleSpecifier.includes("/ui/")) {
+    return "registry:ui"
+  }
+
+  if (moduleSpecifier.includes("/lib/")) {
+    return "registry:lib"
+  }
+
+  if (moduleSpecifier.includes("/hooks/")) {
+    return "registry:hook"
+  }
+
+  if (moduleSpecifier.includes("/components/")) {
+    return "registry:component"
+  }
+
+  return "registry:component"
+}
+
+// Additional utility functions for local file support
+export function isUrl(path: string) {
+  try {
+    new URL(path)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+export function isLocalFile(path: string) {
+  return path.endsWith(".json") && !isUrl(path)
+}
+
+/**
+ * Check if a registry item is universal (framework-agnostic).
+ * A universal registry item must have all files with:
+ * 1. Explicit targets
+ * 2. Type "registry:file"
+ * It can be installed without framework detection or components.json.
+ */
+export function isUniversalRegistryItem(
+  registryItem:
+    | Pick<z.infer<typeof registryItemSchema>, "files">
+    | null
+    | undefined
+): boolean {
+  return (
+    !!registryItem?.files?.length &&
+    registryItem.files.every(
+      (file) =>
+        !!file.target &&
+        (file.type === "registry:file" || file.type === "registry:item")
+    )
+  )
+}
+
+// Deduplicates files based on their resolved target paths.
+// When multiple files resolve to the same target path, the last one wins.
+export async function deduplicateFilesByTarget(
+  filesArrays: Array<z.infer<typeof registryItemFileSchema>[] | undefined>,
+  config: Config
+) {
+  // Fallback to simple concatenation when we don't have complete config.
+  if (!canDeduplicateFiles(config)) {
+    return z
+      .array(registryItemFileSchema)
+      .parse(filesArrays.flat().filter(Boolean))
+  }
+
+  // Get project info for file resolution.
+  const projectInfo = await getProjectInfo(config.resolvedPaths.cwd)
+  const targetMap = new Map<string, z.infer<typeof registryItemFileSchema>>()
+  const allFiles = z
+    .array(registryItemFileSchema)
+    .parse(filesArrays.flat().filter(Boolean))
+
+  allFiles.forEach((file) => {
+    const resolvedPath = resolveFilePath(file, config, {
+      isSrcDir: projectInfo?.isSrcDir,
+      framework: projectInfo?.framework.name,
+      commonRoot: findCommonRoot(
+        allFiles.map((f) => f.path),
+        file.path
+      ),
+    })
+
+    if (resolvedPath) {
+      // Last one wins - overwrites previous entry.
+      targetMap.set(resolvedPath, file)
+    }
+  })
+
+  return Array.from(targetMap.values())
+}
+
+// Checks if the config has the minimum required paths for file deduplication.
+export function canDeduplicateFiles(config: Config) {
+  return !!(
+    config?.resolvedPaths?.cwd &&
+    (config?.resolvedPaths?.ui ||
+      config?.resolvedPaths?.lib ||
+      config?.resolvedPaths?.components ||
+      config?.resolvedPaths?.hooks)
+  )
+}
diff --git a/packages/shadcn/src/registry/validator.test.ts b/packages/shadcn/src/registry/validator.test.ts
new file mode 100644
index 00000000000..58905149b24
--- /dev/null
+++ b/packages/shadcn/src/registry/validator.test.ts
@@ -0,0 +1,111 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
+import { afterEach, beforeEach, describe, expect, it } from "vitest"
+
+import {
+  extractEnvVarsFromRegistryConfig,
+  validateRegistryConfig,
+} from "./validator"
+
+describe("extractEnvVarsFromRegistryConfig", () => {
+  it("should extract vars from string config", () => {
+    expect(
+      extractEnvVarsFromRegistryConfig("https://api.com?token=${TOKEN}")
+    ).toEqual(["TOKEN"])
+  })
+
+  it("should extract vars from object config", () => {
+    const config = {
+      url: "https://api.com/{name}?key=${API_KEY}",
+      params: {
+        version: "1.0",
+        token: "${TOKEN}",
+      },
+      headers: {
+        Authorization: "Bearer ${AUTH_TOKEN}",
+        "X-Api-Key": "${API_KEY}",
+      },
+    }
+
+    expect(extractEnvVarsFromRegistryConfig(config).sort()).toEqual([
+      "API_KEY",
+      "AUTH_TOKEN",
+      "TOKEN",
+    ])
+  })
+
+  it("should handle config without params or headers", () => {
+    const config = {
+      url: "https://api.com/{name}",
+    }
+
+    expect(extractEnvVarsFromRegistryConfig(config)).toEqual([])
+  })
+})
+
+describe("validateRegistryConfig", () => {
+  beforeEach(() => {
+    process.env.TOKEN = "value"
+  })
+
+  afterEach(() => {
+    delete process.env.TOKEN
+  })
+
+  describe("built-in registries", () => {
+    it("should not throw for @shadcn since it's now a built-in registry", () => {
+      expect(() => {
+        validateRegistryConfig("@shadcn", {
+          url: "https://example.com/{name}",
+        })
+      }).not.toThrow()
+    })
+
+    it("should not throw for non-built-in registry names", () => {
+      expect(() => {
+        validateRegistryConfig("@mycompany", {
+          url: "https://example.com/{name}",
+        })
+      }).not.toThrow()
+    })
+
+    it("should not throw for similar but different registry names", () => {
+      expect(() => {
+        validateRegistryConfig("@shadcn-ui", {
+          url: "https://example.com/{name}",
+        })
+      }).not.toThrow()
+
+      expect(() => {
+        validateRegistryConfig("@myshadcn", {
+          url: "https://example.com/{name}",
+        })
+      }).not.toThrow()
+    })
+  })
+
+  it("should pass when all env vars are set", () => {
+    expect(() => {
+      validateRegistryConfig("@test", "https://api.com?token=${TOKEN}")
+    }).not.toThrow()
+  })
+
+  it("should throw when env vars are missing", () => {
+    expect(() => {
+      validateRegistryConfig("@test", "https://api.com?token=${MISSING}")
+    }).toThrow(/Registry "@test" requires the following environment variables/)
+  })
+
+  it("should list all missing variables", () => {
+    const config = {
+      url: "https://api.com/{name}",
+      headers: {
+        Auth: "${TOKEN1}",
+        Key: "${TOKEN2}",
+      },
+    }
+
+    expect(() => {
+      validateRegistryConfig("@test", config)
+    }).toThrow(/TOKEN1[\s\S]*TOKEN2/)
+  })
+})
diff --git a/packages/shadcn/src/registry/validator.ts b/packages/shadcn/src/registry/validator.ts
new file mode 100644
index 00000000000..aa73a57c1fa
--- /dev/null
+++ b/packages/shadcn/src/registry/validator.ts
@@ -0,0 +1,58 @@
+import { buildUrlAndHeadersForRegistryItem } from "@/src/registry/builder"
+import { configWithDefaults } from "@/src/registry/config"
+import { clearRegistryContext } from "@/src/registry/context"
+import { extractEnvVars } from "@/src/registry/env"
+import { RegistryMissingEnvironmentVariablesError } from "@/src/registry/errors"
+import { registryConfigItemSchema } from "@/src/schema"
+import { Config } from "@/src/utils/get-config"
+import { z } from "zod"
+
+export function extractEnvVarsFromRegistryConfig(
+  config: z.infer<typeof registryConfigItemSchema>
+): string[] {
+  const vars = new Set<string>()
+
+  if (typeof config === "string") {
+    extractEnvVars(config).forEach((v) => vars.add(v))
+  } else {
+    extractEnvVars(config.url).forEach((v) => vars.add(v))
+
+    if (config.params) {
+      Object.values(config.params).forEach((value) => {
+        extractEnvVars(value).forEach((v) => vars.add(v))
+      })
+    }
+
+    if (config.headers) {
+      Object.values(config.headers).forEach((value) => {
+        extractEnvVars(value).forEach((v) => vars.add(v))
+      })
+    }
+  }
+
+  return Array.from(vars)
+}
+
+export function validateRegistryConfig(
+  registryName: string,
+  config: z.infer<typeof registryConfigItemSchema>
+): void {
+  const requiredVars = extractEnvVarsFromRegistryConfig(config)
+  const missing = requiredVars.filter((v) => !process.env[v])
+
+  if (missing.length > 0) {
+    throw new RegistryMissingEnvironmentVariablesError(registryName, missing)
+  }
+}
+
+export function validateRegistryConfigForItems(
+  items: string[],
+  config?: Config
+): void {
+  for (const item of items) {
+    buildUrlAndHeadersForRegistryItem(item, configWithDefaults(config))
+  }
+
+  // Clear the registry context after validation.
+  clearRegistryContext()
+}
diff --git a/packages/shadcn/src/schema/index.ts b/packages/shadcn/src/schema/index.ts
new file mode 100644
index 00000000000..4e2f42a34e7
--- /dev/null
+++ b/packages/shadcn/src/schema/index.ts
@@ -0,0 +1 @@
+export * from "../registry/schema"
diff --git a/packages/shadcn/src/utils/add-components.ts b/packages/shadcn/src/utils/add-components.ts
index ee5342ee944..4378b5895c7 100644
--- a/packages/shadcn/src/utils/add-components.ts
+++ b/packages/shadcn/src/utils/add-components.ts
@@ -1,12 +1,31 @@
-import { type Config } from "@/src/utils/get-config"
+import path from "path"
+import { getRegistryItems } from "@/src/registry/api"
+import { configWithDefaults } from "@/src/registry/config"
+import { resolveRegistryTree } from "@/src/registry/resolver"
+import {
+  configSchema,
+  registryItemFileSchema,
+  registryItemSchema,
+  workspaceConfigSchema,
+} from "@/src/schema"
+import {
+  findCommonRoot,
+  findPackageRoot,
+  getWorkspaceConfig,
+  type Config,
+} from "@/src/utils/get-config"
+import { getProjectTailwindVersionFromConfig } from "@/src/utils/get-project-info"
 import { handleError } from "@/src/utils/handle-error"
+import { isSafeTarget } from "@/src/utils/is-safe-target"
 import { logger } from "@/src/utils/logger"
-import { registryResolveItemsTree } from "@/src/utils/registry"
 import { spinner } from "@/src/utils/spinner"
+import { updateCss } from "@/src/utils/updaters/update-css"
 import { updateCssVars } from "@/src/utils/updaters/update-css-vars"
 import { updateDependencies } from "@/src/utils/updaters/update-dependencies"
+import { updateEnvVars } from "@/src/utils/updaters/update-env-vars"
 import { updateFiles } from "@/src/utils/updaters/update-files"
 import { updateTailwindConfig } from "@/src/utils/updaters/update-tailwind-config"
+import { z } from "zod"
 
 export async function addComponents(
   components: string[],
@@ -15,34 +34,94 @@ export async function addComponents(
     overwrite?: boolean
     silent?: boolean
     isNewProject?: boolean
+    baseStyle?: boolean
+    registryHeaders?: Record<string, Record<string, string>>
   }
 ) {
   options = {
     overwrite: false,
     silent: false,
     isNewProject: false,
+    baseStyle: true,
     ...options,
   }
 
+  const workspaceConfig = await getWorkspaceConfig(config)
+  if (
+    workspaceConfig &&
+    workspaceConfig.ui &&
+    workspaceConfig.ui.resolvedPaths.cwd !== config.resolvedPaths.cwd
+  ) {
+    return await addWorkspaceComponents(components, config, workspaceConfig, {
+      ...options,
+      isRemote:
+        components?.length === 1 && !!components[0].match(/\/chat\/b\//),
+    })
+  }
+
+  return await addProjectComponents(components, config, options)
+}
+
+async function addProjectComponents(
+  components: string[],
+  config: z.infer<typeof configSchema>,
+  options: {
+    overwrite?: boolean
+    silent?: boolean
+    isNewProject?: boolean
+    baseStyle?: boolean
+  }
+) {
+  if (!options.baseStyle && !components.length) {
+    return
+  }
+
   const registrySpinner = spinner(`Checking registry.`, {
     silent: options.silent,
   })?.start()
-  const tree = await registryResolveItemsTree(components, config)
+  const tree = await resolveRegistryTree(components, configWithDefaults(config))
+
   if (!tree) {
     registrySpinner?.fail()
     return handleError(new Error("Failed to fetch components from registry."))
   }
+
+  try {
+    validateFilesTarget(tree.files ?? [], config.resolvedPaths.cwd)
+  } catch (error) {
+    registrySpinner?.fail()
+    return handleError(error)
+  }
+
   registrySpinner?.succeed()
 
+  const tailwindVersion = await getProjectTailwindVersionFromConfig(config)
+
   await updateTailwindConfig(tree.tailwind?.config, config, {
     silent: options.silent,
+    tailwindVersion,
   })
+
+  const overwriteCssVars = await shouldOverwriteCssVars(components, config)
   await updateCssVars(tree.cssVars, config, {
     cleanupDefaultNextStyles: options.isNewProject,
     silent: options.silent,
+    tailwindVersion,
+    tailwindConfig: tree.tailwind?.config,
+    overwriteCssVars,
+    initIndex: options.baseStyle,
+  })
+
+  // Add CSS updater
+  await updateCss(tree.css, config, {
+    silent: options.silent,
   })
 
-  await updateDependencies(tree.dependencies, config, {
+  await updateEnvVars(tree.envVars, config, {
+    silent: options.silent,
+  })
+
+  await updateDependencies(tree.dependencies, tree.devDependencies, config, {
     silent: options.silent,
   })
   await updateFiles(tree.files, config, {
@@ -54,3 +133,254 @@ export async function addComponents(
     logger.info(tree.docs)
   }
 }
+
+async function addWorkspaceComponents(
+  components: string[],
+  config: z.infer<typeof configSchema>,
+  workspaceConfig: z.infer<typeof workspaceConfigSchema>,
+  options: {
+    overwrite?: boolean
+    silent?: boolean
+    isNewProject?: boolean
+    isRemote?: boolean
+    baseStyle?: boolean
+  }
+) {
+  if (!options.baseStyle && !components.length) {
+    return
+  }
+
+  const registrySpinner = spinner(`Checking registry.`, {
+    silent: options.silent,
+  })?.start()
+  const tree = await resolveRegistryTree(components, configWithDefaults(config))
+
+  if (!tree) {
+    registrySpinner?.fail()
+    return handleError(new Error("Failed to fetch components from registry."))
+  }
+
+  try {
+    validateFilesTarget(tree.files ?? [], config.resolvedPaths.cwd)
+  } catch (error) {
+    registrySpinner?.fail()
+    return handleError(error)
+  }
+
+  registrySpinner?.succeed()
+
+  const filesCreated: string[] = []
+  const filesUpdated: string[] = []
+  const filesSkipped: string[] = []
+
+  const rootSpinner = spinner(`Installing components.`)?.start()
+
+  // Process global updates (tailwind, css vars, dependencies) first for the main target.
+  // These should typically go to the UI package in a workspace.
+  const mainTargetConfig = workspaceConfig.ui
+  const tailwindVersion = await getProjectTailwindVersionFromConfig(
+    mainTargetConfig
+  )
+  const workspaceRoot = findCommonRoot(
+    config.resolvedPaths.cwd,
+    mainTargetConfig.resolvedPaths.ui
+  )
+
+  // 1. Update tailwind config.
+  if (tree.tailwind?.config) {
+    await updateTailwindConfig(tree.tailwind?.config, mainTargetConfig, {
+      silent: true,
+      tailwindVersion,
+    })
+    filesUpdated.push(
+      path.relative(
+        workspaceRoot,
+        mainTargetConfig.resolvedPaths.tailwindConfig
+      )
+    )
+  }
+
+  // 2. Update css vars.
+  if (tree.cssVars) {
+    const overwriteCssVars = await shouldOverwriteCssVars(components, config)
+    await updateCssVars(tree.cssVars, mainTargetConfig, {
+      silent: true,
+      tailwindVersion,
+      tailwindConfig: tree.tailwind?.config,
+      overwriteCssVars,
+    })
+    filesUpdated.push(
+      path.relative(workspaceRoot, mainTargetConfig.resolvedPaths.tailwindCss)
+    )
+  }
+
+  // 3. Update CSS
+  if (tree.css) {
+    await updateCss(tree.css, mainTargetConfig, {
+      silent: true,
+    })
+    filesUpdated.push(
+      path.relative(workspaceRoot, mainTargetConfig.resolvedPaths.tailwindCss)
+    )
+  }
+
+  // 4. Update environment variables
+  if (tree.envVars) {
+    await updateEnvVars(tree.envVars, mainTargetConfig, {
+      silent: true,
+    })
+  }
+
+  // 5. Update dependencies.
+  await updateDependencies(
+    tree.dependencies,
+    tree.devDependencies,
+    mainTargetConfig,
+    {
+      silent: true,
+    }
+  )
+
+  // 6. Group files by their type to determine target config and update files.
+  const filesByType = new Map<string, typeof tree.files>()
+
+  for (const file of tree.files ?? []) {
+    const type = file.type || "registry:ui"
+    if (!filesByType.has(type)) {
+      filesByType.set(type, [])
+    }
+    filesByType.get(type)!.push(file)
+  }
+
+  // Process each type of component with its appropriate target config.
+  for (const type of Array.from(filesByType.keys())) {
+    const typeFiles = filesByType.get(type)!
+
+    let targetConfig = type === "registry:ui" ? workspaceConfig.ui : config
+
+    const typeWorkspaceRoot = findCommonRoot(
+      config.resolvedPaths.cwd,
+      targetConfig.resolvedPaths.ui || targetConfig.resolvedPaths.cwd
+    )
+    const packageRoot =
+      (await findPackageRoot(
+        typeWorkspaceRoot,
+        targetConfig.resolvedPaths.cwd
+      )) ?? targetConfig.resolvedPaths.cwd
+
+    // Update files for this type.
+    const files = await updateFiles(typeFiles, targetConfig, {
+      overwrite: options.overwrite,
+      silent: true,
+      rootSpinner,
+      isRemote: options.isRemote,
+      isWorkspace: true,
+    })
+
+    filesCreated.push(
+      ...files.filesCreated.map((file) =>
+        path.relative(typeWorkspaceRoot, path.join(packageRoot, file))
+      )
+    )
+    filesUpdated.push(
+      ...files.filesUpdated.map((file) =>
+        path.relative(typeWorkspaceRoot, path.join(packageRoot, file))
+      )
+    )
+    filesSkipped.push(
+      ...files.filesSkipped.map((file) =>
+        path.relative(typeWorkspaceRoot, path.join(packageRoot, file))
+      )
+    )
+  }
+
+  rootSpinner?.succeed()
+
+  // Sort files.
+  filesCreated.sort()
+  filesUpdated.sort()
+  filesSkipped.sort()
+
+  const hasUpdatedFiles = filesCreated.length || filesUpdated.length
+  if (!hasUpdatedFiles && !filesSkipped.length) {
+    spinner(`No files updated.`, {
+      silent: options.silent,
+    })?.info()
+  }
+
+  if (filesCreated.length) {
+    spinner(
+      `Created ${filesCreated.length} ${
+        filesCreated.length === 1 ? "file" : "files"
+      }:`,
+      {
+        silent: options.silent,
+      }
+    )?.succeed()
+    for (const file of filesCreated) {
+      logger.log(`  - ${file}`)
+    }
+  }
+
+  if (filesUpdated.length) {
+    spinner(
+      `Updated ${filesUpdated.length} ${
+        filesUpdated.length === 1 ? "file" : "files"
+      }:`,
+      {
+        silent: options.silent,
+      }
+    )?.info()
+    for (const file of filesUpdated) {
+      logger.log(`  - ${file}`)
+    }
+  }
+
+  if (filesSkipped.length) {
+    spinner(
+      `Skipped ${filesSkipped.length} ${
+        filesUpdated.length === 1 ? "file" : "files"
+      }: (use --overwrite to overwrite)`,
+      {
+        silent: options.silent,
+      }
+    )?.info()
+    for (const file of filesSkipped) {
+      logger.log(`  - ${file}`)
+    }
+  }
+
+  if (tree.docs) {
+    logger.info(tree.docs)
+  }
+}
+
+async function shouldOverwriteCssVars(
+  components: z.infer<typeof registryItemSchema>["name"][],
+  config: z.infer<typeof configSchema>
+) {
+  const result = await getRegistryItems(components, { config })
+  const payload = z.array(registryItemSchema).parse(result)
+
+  return payload.some(
+    (component) =>
+      component.type === "registry:theme" || component.type === "registry:style"
+  )
+}
+
+function validateFilesTarget(
+  files: z.infer<typeof registryItemFileSchema>[],
+  cwd: string
+) {
+  for (const file of files) {
+    if (!file?.target) {
+      continue
+    }
+
+    if (!isSafeTarget(file.target, cwd)) {
+      throw new Error(
+        `We found an unsafe file path "${file.target} in the registry item. Installation aborted.`
+      )
+    }
+  }
+}
diff --git a/packages/shadcn/src/utils/compare.test.ts b/packages/shadcn/src/utils/compare.test.ts
new file mode 100644
index 00000000000..ac5d6227a2a
--- /dev/null
+++ b/packages/shadcn/src/utils/compare.test.ts
@@ -0,0 +1,260 @@
+import { describe, expect, it } from "vitest"
+
+import { isContentSame } from "./compare"
+
+describe("isContentSame", () => {
+  describe("basic comparisons", () => {
+    it("should return true for identical content", () => {
+      const content = `const foo = "bar"`
+      expect(isContentSame(content, content)).toBe(true)
+    })
+
+    it("should return true for content with different line endings", () => {
+      const content1 = `line1\nline2\nline3`
+      const content2 = `line1\r\nline2\r\nline3`
+      expect(isContentSame(content1, content2)).toBe(true)
+    })
+
+    it("should return true for content with different whitespace at ends", () => {
+      const content1 = `  const foo = "bar"  `
+      const content2 = `const foo = "bar"`
+      expect(isContentSame(content1, content2)).toBe(true)
+    })
+
+    it("should return false for different content", () => {
+      const content1 = `const foo = "bar"`
+      const content2 = `const foo = "baz"`
+      expect(isContentSame(content1, content2)).toBe(false)
+    })
+  })
+
+  describe("import comparisons with ignoreImports enabled", () => {
+    it("should return true for different aliased imports to same module", () => {
+      const content1 = `import { Button } from "@/components/ui/button"`
+      const content2 = `import { Button } from "~/ui/button"`
+      expect(isContentSame(content1, content2, { ignoreImports: true })).toBe(
+        true
+      )
+    })
+
+    it("should return true for different paths to same final module", () => {
+      const content1 = `import { cn } from "@/lib/utils"`
+      const content2 = `import { cn } from "~/utils"`
+      expect(isContentSame(content1, content2, { ignoreImports: true })).toBe(
+        true
+      )
+    })
+
+    it("should preserve relative imports and require exact match", () => {
+      const content1 = `import { Button } from "./button"`
+      const content2 = `import { Button } from "../button"`
+      expect(isContentSame(content1, content2, { ignoreImports: true })).toBe(
+        false
+      )
+    })
+
+    it("should handle multiple imports with different aliases", () => {
+      const content1 = `
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { Card } from "@/components/ui/card"
+
+export function Component() {
+  return <div />
+}
+`
+      const content2 = `
+import { Button } from "~/ui/button"
+import { cn } from "~/utils"
+import { Card } from "#/components/card"
+
+export function Component() {
+  return <div />
+}
+`
+      expect(isContentSame(content1, content2, { ignoreImports: true })).toBe(
+        true
+      )
+    })
+
+    it("should handle type imports", () => {
+      const content1 = `import type { Config } from "@/types/config"`
+      const content2 = `import type { Config } from "~/config"`
+      expect(isContentSame(content1, content2, { ignoreImports: true })).toBe(
+        true
+      )
+    })
+
+    it("should handle namespace imports", () => {
+      const content1 = `import * as React from "react"`
+      const content2 = `import * as React from "react"`
+      expect(isContentSame(content1, content2)).toBe(true)
+    })
+
+    it("should handle mixed default and named imports", () => {
+      const content1 = `import React, { useState } from "react"`
+      const content2 = `import React, { useState } from "react"`
+      expect(isContentSame(content1, content2)).toBe(true)
+    })
+
+    it("should return false if non-import content differs", () => {
+      const content1 = `
+import { Button } from "@/components/ui/button"
+export const foo = "bar"
+`
+      const content2 = `
+import { Button } from "~/ui/button"
+export const foo = "baz"
+`
+      expect(isContentSame(content1, content2, { ignoreImports: true })).toBe(
+        false
+      )
+    })
+
+    it("should handle imports with renamed exports", () => {
+      const content1 = `import { Button as Btn } from "@/components/ui/button"`
+      const content2 = `import { Button as Btn } from "~/ui/button"`
+      expect(isContentSame(content1, content2, { ignoreImports: true })).toBe(
+        true
+      )
+    })
+
+    it("should handle multiline imports", () => {
+      const content1 = `import {
+  Button,
+  ButtonProps,
+  ButtonVariants
+} from "@/components/ui/button"`
+      const content2 = `import {
+  Button,
+  ButtonProps,
+  ButtonVariants
+} from "~/ui/button"`
+      expect(isContentSame(content1, content2, { ignoreImports: true })).toBe(
+        true
+      )
+    })
+  })
+
+  describe("import comparisons with ignoreImports disabled (default)", () => {
+    it("should return false for different aliased imports", () => {
+      const content1 = `import { Button } from "@/components/ui/button"`
+      const content2 = `import { Button } from "~/ui/button"`
+      expect(isContentSame(content1, content2, { ignoreImports: false })).toBe(
+        false
+      )
+    })
+
+    it("should return false for different aliased imports by default", () => {
+      const content1 = `import { Button } from "@/components/ui/button"`
+      const content2 = `import { Button } from "~/ui/button"`
+      expect(isContentSame(content1, content2)).toBe(false)
+    })
+
+    it("should return true only for exact matches", () => {
+      const content1 = `import { Button } from "@/components/ui/button"`
+      const content2 = `import { Button } from "@/components/ui/button"`
+      expect(isContentSame(content1, content2, { ignoreImports: false })).toBe(
+        true
+      )
+    })
+
+    it("should still normalize line endings and whitespace", () => {
+      const content1 = `import { Button } from "@/components/ui/button"\r\n`
+      const content2 = `import { Button } from "@/components/ui/button"\n`
+      expect(isContentSame(content1, content2, { ignoreImports: false })).toBe(
+        true
+      )
+    })
+  })
+
+  describe("complex real-world scenarios", () => {
+    it("should handle React component with different import aliases", () => {
+      const component1 = `
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+
+export function ProfileCard({ className }: { className?: string }) {
+  return (
+    <Card className={cn("w-full", className)}>
+      <CardHeader>Profile</CardHeader>
+      <CardContent>
+        <Button>Click me</Button>
+      </CardContent>
+    </Card>
+  )
+}
+`
+      const component2 = `
+import * as React from "react"
+import { cn } from "~/utils"
+import { Button } from "~/ui/button"
+import { Card, CardContent, CardHeader } from "#/components/card"
+
+export function ProfileCard({ className }: { className?: string }) {
+  return (
+    <Card className={cn("w-full", className)}>
+      <CardHeader>Profile</CardHeader>
+      <CardContent>
+        <Button>Click me</Button>
+      </CardContent>
+    </Card>
+  )
+}
+`
+      expect(
+        isContentSame(component1, component2, { ignoreImports: true })
+      ).toBe(true)
+    })
+
+    it("should detect actual code differences", () => {
+      const component1 = `
+import { Button } from "@/components/ui/button"
+
+export function Component() {
+  return <Button variant="default">Click</Button>
+}
+`
+      const component2 = `
+import { Button } from "~/ui/button"
+
+export function Component() {
+  return <Button variant="outline">Click</Button>
+}
+`
+      expect(
+        isContentSame(component1, component2, { ignoreImports: true })
+      ).toBe(false)
+    })
+
+    it("should handle files with no imports", () => {
+      const content1 = `
+export function add(a: number, b: number) {
+  return a + b
+}
+`
+      const content2 = `
+export function add(a: number, b: number) {
+  return a + b
+}
+`
+      expect(isContentSame(content1, content2)).toBe(true)
+    })
+
+    it("should handle CSS imports", () => {
+      const content1 = `
+import styles from "@/styles/component.module.css"
+import "./global.css"
+`
+      const content2 = `
+import styles from "~/styles/component.module.css"
+import "./global.css"
+`
+      expect(isContentSame(content1, content2, { ignoreImports: true })).toBe(
+        true
+      )
+    })
+  })
+})
diff --git a/packages/shadcn/src/utils/compare.ts b/packages/shadcn/src/utils/compare.ts
new file mode 100644
index 00000000000..5bacd59364b
--- /dev/null
+++ b/packages/shadcn/src/utils/compare.ts
@@ -0,0 +1,61 @@
+export function isContentSame(
+  existingContent: string,
+  newContent: string,
+  options: {
+    ignoreImports?: boolean
+  } = {}
+) {
+  const { ignoreImports = false } = options
+
+  // Normalize line endings and whitespace.
+  const normalizedExisting = existingContent.replace(/\r\n/g, "\n").trim()
+  const normalizedNew = newContent.replace(/\r\n/g, "\n").trim()
+
+  // First, try exact match after normalization.
+  if (normalizedExisting === normalizedNew) {
+    return true
+  }
+
+  // If not ignoring imports or exact match failed, return false
+  if (!ignoreImports) {
+    return false
+  }
+
+  // Compare with import statements normalized.
+  // This regex matches various import patterns including:
+  // - import defaultExport from "module"
+  // - import * as name from "module"
+  // - import { export1, export2 } from "module"
+  // - import { export1 as alias1 } from "module"
+  // - import defaultExport, { export1 } from "module"
+  // - import type { Type } from "module"
+  // - This Regex written by Claude Code.
+  const importRegex =
+    /^(import\s+(?:type\s+)?(?:\*\s+as\s+\w+|\{[^}]*\}|\w+)?(?:\s*,\s*(?:\{[^}]*\}|\w+))?\s+from\s+["'])([^"']+)(["'])/gm
+
+  // Function to normalize import paths - remove alias differences.
+  const normalizeImports = (content: string) => {
+    return content.replace(
+      importRegex,
+      (_match, prefix, importPath, suffix) => {
+        // Keep relative imports as-is.
+        if (importPath.startsWith(".")) {
+          return `${prefix}${importPath}${suffix}`
+        }
+
+        // For aliased imports, normalize to a common format.
+        // Extract the last meaningful part of the path.
+        const parts = importPath.split("/")
+        const lastPart = parts[parts.length - 1]
+
+        // Normalize to a consistent format.
+        return `${prefix}@normalized/${lastPart}${suffix}`
+      }
+    )
+  }
+
+  const existingNormalized = normalizeImports(normalizedExisting)
+  const newNormalized = normalizeImports(normalizedNew)
+
+  return existingNormalized === newNormalized
+}
diff --git a/packages/shadcn/src/utils/create-project.test.ts b/packages/shadcn/src/utils/create-project.test.ts
new file mode 100644
index 00000000000..e09078a082a
--- /dev/null
+++ b/packages/shadcn/src/utils/create-project.test.ts
@@ -0,0 +1,198 @@
+import { fetchRegistry } from "@/src/registry/fetcher"
+import { spinner } from "@/src/utils/spinner"
+import { execa } from "execa"
+import fs from "fs-extra"
+import prompts from "prompts"
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+  type MockInstance,
+} from "vitest"
+
+import { TEMPLATES, createProject } from "./create-project"
+
+// Mock dependencies
+vi.mock("fs-extra")
+vi.mock("execa")
+vi.mock("prompts")
+vi.mock("@/src/registry/fetcher")
+vi.mock("@/src/utils/get-package-manager", () => ({
+  getPackageManager: vi.fn().mockResolvedValue("npm"),
+}))
+vi.mock("@/src/utils/spinner")
+vi.mock("@/src/utils/logger", () => ({
+  logger: {
+    break: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+  },
+}))
+
+describe("createProject", () => {
+  let mockExit: MockInstance
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Reset all fs mocks
+    vi.mocked(fs.access).mockResolvedValue(undefined)
+    vi.mocked(fs.existsSync).mockReturnValue(false)
+    vi.mocked(fs.ensureDir).mockResolvedValue(undefined)
+    vi.mocked(fs.writeFile).mockResolvedValue(undefined)
+    vi.mocked(fs.move).mockResolvedValue(undefined)
+    vi.mocked(fs.remove).mockResolvedValue(undefined)
+
+    // Mock execa to resolve immediately without actual execution
+    vi.mocked(execa).mockResolvedValue({
+      stdout: "",
+      stderr: "",
+      exitCode: 0,
+      signal: undefined,
+      signalDescription: undefined,
+      command: "",
+      escapedCommand: "",
+      failed: false,
+      timedOut: false,
+      isCanceled: false,
+      killed: false,
+    } as any)
+
+    // Mock fetch for monorepo template
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      arrayBuffer: () => Promise.resolve(new ArrayBuffer(0)),
+    } as any)
+
+    // Reset prompts mock
+    vi.mocked(prompts).mockResolvedValue({ type: "next", name: "my-app" })
+
+    // Reset registry mock
+    vi.mocked(fetchRegistry).mockResolvedValue([])
+
+    // Mock spinner function
+    const mockSpinner = {
+      start: vi.fn().mockReturnThis(),
+      succeed: vi.fn().mockReturnThis(),
+      fail: vi.fn().mockReturnThis(),
+      stop: vi.fn().mockReturnThis(),
+      text: "",
+      prefixText: "",
+      suffixText: "",
+      color: "cyan" as const,
+      indent: 0,
+      spinner: "dots" as const,
+      isSpinning: false,
+      interval: 100,
+      stream: process.stderr,
+      clear: vi.fn(),
+      render: vi.fn(),
+      frame: vi.fn(),
+      stopAndPersist: vi.fn(),
+      warn: vi.fn(),
+      info: vi.fn(),
+    }
+    vi.mocked(spinner).mockReturnValue(mockSpinner as any)
+  })
+
+  afterEach(() => {
+    vi.resetAllMocks()
+    mockExit?.mockRestore()
+    delete (global as any).fetch
+  })
+
+  it("should create a Next.js project with default options", async () => {
+    vi.mocked(prompts).mockResolvedValue({ type: "next", name: "my-app" })
+
+    const result = await createProject({
+      cwd: "/test",
+      force: false,
+      srcDir: false,
+    })
+
+    expect(result).toEqual({
+      projectPath: "/test/my-app",
+      projectName: "my-app",
+      template: TEMPLATES.next,
+    })
+
+    expect(execa).toHaveBeenCalledWith(
+      "npx",
+      expect.arrayContaining(["create-next-app@latest", "/test/my-app"]),
+      expect.any(Object)
+    )
+  })
+
+  it("should create a monorepo project when selected", async () => {
+    vi.mocked(prompts).mockResolvedValue({
+      type: "next-monorepo",
+      name: "my-monorepo",
+    })
+
+    const result = await createProject({
+      cwd: "/test",
+      force: false,
+      srcDir: false,
+    })
+
+    expect(result).toEqual({
+      projectPath: "/test/my-monorepo",
+      projectName: "my-monorepo",
+      template: TEMPLATES["next-monorepo"],
+    })
+  })
+
+  it("should handle remote components and force next template", async () => {
+    vi.mocked(fetchRegistry).mockResolvedValue([
+      {
+        meta: { nextVersion: "13.0.0" },
+      },
+    ])
+
+    const result = await createProject({
+      cwd: "/test",
+      force: true,
+      components: ["/chat/b/some-component"],
+    })
+
+    expect(result.template).toBe(TEMPLATES.next)
+  })
+
+  it("should throw error if project path already exists", async () => {
+    // Mock fs.existsSync to return true only for the specific package.json path
+    vi.mocked(fs.existsSync).mockImplementation((path: any) => {
+      return path.toString().includes("existing-app/package.json")
+    })
+    vi.mocked(prompts).mockResolvedValue({ type: "next", name: "existing-app" })
+
+    mockExit = vi
+      .spyOn(process, "exit")
+      .mockImplementation(() => undefined as never)
+
+    await createProject({
+      cwd: "/test",
+      force: false,
+    })
+
+    expect(mockExit).toHaveBeenCalledWith(1)
+  })
+
+  it("should throw error if path is not writable", async () => {
+    vi.mocked(fs.access).mockRejectedValue(new Error("Permission denied"))
+    vi.mocked(prompts).mockResolvedValue({ type: "next", name: "my-app" })
+
+    mockExit = vi
+      .spyOn(process, "exit")
+      .mockImplementation(() => undefined as never)
+
+    await createProject({
+      cwd: "/test",
+      force: false,
+    })
+
+    expect(mockExit).toHaveBeenCalledWith(1)
+  })
+})
diff --git a/packages/shadcn/src/utils/create-project.ts b/packages/shadcn/src/utils/create-project.ts
index ae7b597c48a..b9a792eb6a1 100644
--- a/packages/shadcn/src/utils/create-project.ts
+++ b/packages/shadcn/src/utils/create-project.ts
@@ -1,6 +1,9 @@
+import os from "os"
 import path from "path"
 import { initOptionsSchema } from "@/src/commands/init"
+import { fetchRegistry } from "@/src/registry/fetcher"
 import { getPackageManager } from "@/src/utils/get-package-manager"
+import { handleError } from "@/src/utils/handle-error"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
 import { spinner } from "@/src/utils/spinner"
@@ -9,47 +12,93 @@ import fs from "fs-extra"
 import prompts from "prompts"
 import { z } from "zod"
 
+const MONOREPO_TEMPLATE_URL =
+  "https://codeload.github.com/shadcn-ui/ui/tar.gz/main"
+
+export const TEMPLATES = {
+  next: "next",
+  "next-monorepo": "next-monorepo",
+} as const
+
 export async function createProject(
-  options: Pick<z.infer<typeof initOptionsSchema>, "cwd" | "force" | "srcDir">
+  options: Pick<
+    z.infer<typeof initOptionsSchema>,
+    "cwd" | "force" | "srcDir" | "components" | "template"
+  >
 ) {
   options = {
     srcDir: false,
     ...options,
   }
 
-  if (!options.force) {
-    const { proceed } = await prompts({
-      type: "confirm",
-      name: "proceed",
-      message: `The path ${highlighter.info(
-        options.cwd
-      )} does not contain a package.json file. Would you like to start a new ${highlighter.info(
-        "Next.js"
-      )} project?`,
-      initial: true,
-    })
+  let template: keyof typeof TEMPLATES =
+    options.template && TEMPLATES[options.template as keyof typeof TEMPLATES]
+      ? (options.template as keyof typeof TEMPLATES)
+      : "next"
+  let projectName: string =
+    template === TEMPLATES.next ? "my-app" : "my-monorepo"
+  let nextVersion = "latest"
 
-    if (!proceed) {
-      return {
-        projectPath: null,
-        projectName: null,
-      }
+  const isRemoteComponent =
+    options.components?.length === 1 &&
+    !!options.components[0].match(/\/chat\/b\//)
+
+  if (options.components && isRemoteComponent) {
+    try {
+      const [result] = await fetchRegistry(options.components)
+      const { meta } = z
+        .object({
+          meta: z.object({
+            nextVersion: z.string(),
+          }),
+        })
+        .parse(result)
+      nextVersion = meta.nextVersion
+
+      // Force template to next for remote components.
+      template = TEMPLATES.next
+    } catch (error) {
+      logger.break()
+      handleError(error)
     }
   }
 
-  const packageManager = await getPackageManager(options.cwd)
+  if (!options.force) {
+    const { type, name } = await prompts([
+      {
+        type: options.template || isRemoteComponent ? null : "select",
+        name: "type",
+        message: `The path ${highlighter.info(
+          options.cwd
+        )} does not contain a package.json file.\n  Would you like to start a new project?`,
+        choices: [
+          { title: "Next.js", value: "next" },
+          { title: "Next.js (Monorepo)", value: "next-monorepo" },
+        ],
+        initial: 0,
+      },
+      {
+        type: "text",
+        name: "name",
+        message: "What is your project named?",
+        initial: projectName,
+        format: (value: string) => value.trim(),
+        validate: (value: string) =>
+          value.length > 128
+            ? `Name should be less than 128 characters.`
+            : true,
+      },
+    ])
 
-  const { name } = await prompts({
-    type: "text",
-    name: "name",
-    message: `What is your project named?`,
-    initial: "my-app",
-    format: (value: string) => value.trim(),
-    validate: (value: string) =>
-      value.length > 128 ? `Name should be less than 128 characters.` : true,
+    template = type ?? template
+    projectName = name
+  }
+
+  const packageManager = await getPackageManager(options.cwd, {
+    withFallback: true,
   })
 
-  const projectPath = `${options.cwd}/${name}`
+  const projectPath = `${options.cwd}/${projectName}`
 
   // Check if path is writable.
   try {
@@ -66,16 +115,47 @@ export async function createProject(
     process.exit(1)
   }
 
-  if (fs.existsSync(path.resolve(options.cwd, name, "package.json"))) {
+  if (fs.existsSync(path.resolve(options.cwd, projectName, "package.json"))) {
     logger.break()
     logger.error(
-      `A project with the name ${highlighter.info(name)} already exists.`
+      `A project with the name ${highlighter.info(projectName)} already exists.`
     )
     logger.error(`Please choose a different name and try again.`)
     logger.break()
     process.exit(1)
   }
 
+  if (template === TEMPLATES.next) {
+    await createNextProject(projectPath, {
+      version: nextVersion,
+      cwd: options.cwd,
+      packageManager,
+      srcDir: !!options.srcDir,
+    })
+  }
+
+  if (template === TEMPLATES["next-monorepo"]) {
+    await createMonorepoProject(projectPath, {
+      packageManager,
+    })
+  }
+
+  return {
+    projectPath,
+    projectName,
+    template,
+  }
+}
+
+async function createNextProject(
+  projectPath: string,
+  options: {
+    version: string
+    cwd: string
+    packageManager: string
+    srcDir: boolean
+  }
+) {
   const createSpinner = spinner(
     `Creating a new Next.js project. This may take a few minutes.`
   ).start()
@@ -88,13 +168,21 @@ export async function createProject(
     "--app",
     options.srcDir ? "--src-dir" : "--no-src-dir",
     "--no-import-alias",
-    `--use-${packageManager}`,
+    `--use-${options.packageManager}`,
   ]
 
+  if (
+    options.version.startsWith("15") ||
+    options.version.startsWith("latest") ||
+    options.version.startsWith("canary")
+  ) {
+    args.push("--turbopack")
+  }
+
   try {
     await execa(
       "npx",
-      ["create-next-app@latest", projectPath, "--silent", ...args],
+      [`create-next-app@${options.version}`, projectPath, "--silent", ...args],
       {
         cwd: options.cwd,
       }
@@ -108,9 +196,60 @@ export async function createProject(
   }
 
   createSpinner?.succeed("Creating a new Next.js project.")
+}
 
-  return {
-    projectPath,
-    projectName: name,
+async function createMonorepoProject(
+  projectPath: string,
+  options: {
+    packageManager: string
+  }
+) {
+  const createSpinner = spinner(
+    `Creating a new Next.js monorepo. This may take a few minutes.`
+  ).start()
+
+  try {
+    // Get the template.
+    const templatePath = path.join(os.tmpdir(), `shadcn-template-${Date.now()}`)
+    await fs.ensureDir(templatePath)
+    const response = await fetch(MONOREPO_TEMPLATE_URL)
+    if (!response.ok) {
+      throw new Error(`Failed to download template: ${response.statusText}`)
+    }
+
+    // Write the tar file
+    const tarPath = path.resolve(templatePath, "template.tar.gz")
+    await fs.writeFile(tarPath, Buffer.from(await response.arrayBuffer()))
+    await execa("tar", [
+      "-xzf",
+      tarPath,
+      "-C",
+      templatePath,
+      "--strip-components=2",
+      "ui-main/templates/monorepo-next",
+    ])
+    const extractedPath = path.resolve(templatePath, "monorepo-next")
+    await fs.move(extractedPath, projectPath)
+    await fs.remove(templatePath)
+
+    // Run install.
+    await execa(options.packageManager, ["install"], {
+      cwd: projectPath,
+    })
+
+    // Try git init.
+    const cwd = process.cwd()
+    await execa("git", ["--version"], { cwd: projectPath })
+    await execa("git", ["init"], { cwd: projectPath })
+    await execa("git", ["add", "-A"], { cwd: projectPath })
+    await execa("git", ["commit", "-m", "Initial commit"], {
+      cwd: projectPath,
+    })
+    // await execa("cd", [cwd])
+
+    createSpinner?.succeed("Creating a new Next.js monorepo.")
+  } catch (error) {
+    createSpinner?.fail("Something went wrong creating a new Next.js monorepo.")
+    handleError(error)
   }
 }
diff --git a/packages/shadcn/src/utils/env-helpers.test.ts b/packages/shadcn/src/utils/env-helpers.test.ts
new file mode 100644
index 00000000000..59025d26976
--- /dev/null
+++ b/packages/shadcn/src/utils/env-helpers.test.ts
@@ -0,0 +1,369 @@
+import { existsSync } from "fs"
+import { beforeEach, describe, expect, test, vi } from "vitest"
+
+import {
+  findExistingEnvFile,
+  getNewEnvKeys,
+  isEnvFile,
+  mergeEnvContent,
+  parseEnvContent,
+} from "./env-helpers"
+
+// Mock fs module
+vi.mock("fs", () => ({
+  existsSync: vi.fn(),
+}))
+
+describe("isEnvFile", () => {
+  test("should identify .env files", () => {
+    expect(isEnvFile("/path/to/.env")).toBe(true)
+    expect(isEnvFile(".env")).toBe(true)
+    expect(isEnvFile("/path/to/.env.local")).toBe(true)
+    expect(isEnvFile(".env.local")).toBe(true)
+    expect(isEnvFile(".env.example")).toBe(true)
+    expect(isEnvFile(".env.development.local")).toBe(true)
+    expect(isEnvFile(".env.production.local")).toBe(true)
+    expect(isEnvFile(".env.test.local")).toBe(true)
+  })
+
+  test("should not identify non-.env files", () => {
+    expect(isEnvFile("/path/to/file.txt")).toBe(false)
+    expect(isEnvFile("environment.ts")).toBe(false)
+    expect(isEnvFile("/path/to/.environment")).toBe(false)
+    expect(isEnvFile("env.config")).toBe(false)
+  })
+})
+
+describe("parseEnvContent", () => {
+  test("should parse basic key-value pairs", () => {
+    const content = `KEY1=value1
+KEY2=value2`
+    expect(parseEnvContent(content)).toEqual({
+      KEY1: "value1",
+      KEY2: "value2",
+    })
+  })
+
+  test("should handle comments and empty lines", () => {
+    const content = `# This is a comment
+KEY1=value1
+
+# Another comment
+KEY2=value2
+`
+    expect(parseEnvContent(content)).toEqual({
+      KEY1: "value1",
+      KEY2: "value2",
+    })
+  })
+
+  test("should handle quoted values", () => {
+    const content = `KEY1="value with spaces"
+KEY2='single quotes'`
+    expect(parseEnvContent(content)).toEqual({
+      KEY1: "value with spaces",
+      KEY2: "single quotes",
+    })
+  })
+
+  test("should handle values with equals signs", () => {
+    const content = `DATABASE_URL=postgresql://user:pass@host:5432/db?ssl=true`
+    expect(parseEnvContent(content)).toEqual({
+      DATABASE_URL: "postgresql://user:pass@host:5432/db?ssl=true",
+    })
+  })
+
+  test("should handle empty values", () => {
+    const content = `EMPTY_KEY=
+KEY_WITH_VALUE=value`
+    expect(parseEnvContent(content)).toEqual({
+      EMPTY_KEY: "",
+      KEY_WITH_VALUE: "value",
+    })
+  })
+
+  test("should skip malformed lines", () => {
+    const content = `VALID_KEY=value
+this is not a valid line
+ANOTHER_KEY=another_value`
+    expect(parseEnvContent(content)).toEqual({
+      VALID_KEY: "value",
+      ANOTHER_KEY: "another_value",
+    })
+  })
+
+  test("should handle multi-line values (current limitation: breaks them)", () => {
+    // This test documents that multi-line values are NOT properly supported
+    const content = `SINGLE_LINE="This is fine"
+MULTI_LINE="This is line 1
+This is line 2
+This is line 3"
+NEXT_KEY=value`
+
+    const result = parseEnvContent(content)
+
+    // Current behavior: only gets first line of multi-line value
+    expect(result.SINGLE_LINE).toBe("This is fine")
+    expect(result.MULTI_LINE).toBe("This is line 1")
+    // The other lines are lost/treated as malformed
+    expect(result["This is line 2"]).toBeUndefined()
+    expect(result.NEXT_KEY).toBe("value")
+  })
+
+  test("should handle escaped newlines in values", () => {
+    const content = `KEY_WITH_ESCAPED_NEWLINE="Line 1\\nLine 2\\nLine 3"
+REGULAR_KEY=regular_value`
+
+    const result = parseEnvContent(content)
+
+    // Escaped newlines are preserved as literal \n
+    expect(result.KEY_WITH_ESCAPED_NEWLINE).toBe("Line 1\\nLine 2\\nLine 3")
+    expect(result.REGULAR_KEY).toBe("regular_value")
+  })
+
+  test("should handle values with unmatched quotes", () => {
+    const content = `GOOD_KEY="proper quotes"
+BAD_KEY="unmatched quote
+NEXT_KEY=value`
+
+    const result = parseEnvContent(content)
+
+    expect(result.GOOD_KEY).toBe("proper quotes")
+    // Current behavior: strips the opening quote even if unmatched
+    expect(result.BAD_KEY).toBe("unmatched quote")
+    expect(result.NEXT_KEY).toBe("value")
+  })
+
+  test("should handle backtick quotes (not supported)", () => {
+    const content = 'KEY1=`backtick value`\nKEY2="double quotes"'
+
+    const result = parseEnvContent(content)
+
+    // Backticks are not treated as quotes
+    expect(result.KEY1).toBe("`backtick value`")
+    expect(result.KEY2).toBe("double quotes")
+  })
+})
+
+describe("mergeEnvContent", () => {
+  test("should append only new keys", () => {
+    const existing = `KEY1=value1`
+    const newContent = `KEY2=value2`
+    const result = mergeEnvContent(existing, newContent)
+    expect(result).toBe(`KEY1=value1
+
+KEY2=value2
+`)
+  })
+
+  test("should preserve existing values and NOT overwrite them", () => {
+    const existing = `KEY1=existing_value
+KEY2=value2`
+    const newContent = `KEY1=new_value_should_be_ignored
+KEY3=value3`
+    const result = mergeEnvContent(existing, newContent)
+    expect(result).toBe(`KEY1=existing_value
+KEY2=value2
+
+KEY3=value3
+`)
+
+    expect(result).toContain("KEY1=existing_value")
+    expect(result).not.toContain("KEY1=new_value_should_be_ignored")
+  })
+
+  test("should handle empty existing content", () => {
+    const existing = ""
+    const newContent = "KEY1=value1"
+    const result = mergeEnvContent(existing, newContent)
+    expect(result).toBe(`KEY1=value1
+`)
+  })
+
+  test("should not add any content if all keys already exist", () => {
+    const existing = `KEY1=value1
+KEY2=value2`
+    const newContent = `KEY1=ignored
+KEY2=ignored`
+    const result = mergeEnvContent(existing, newContent)
+
+    expect(result).toBe(`KEY1=value1
+KEY2=value2
+`)
+  })
+
+  test("should return unchanged content when all keys exist and formatting is correct", () => {
+    const existing = `KEY1=value1
+KEY2=value2
+`
+    const newContent = `KEY1=ignored
+KEY2=ignored`
+    const result = mergeEnvContent(existing, newContent)
+
+    expect(result).toBe(existing)
+  })
+
+  test("should handle existing content with comments", () => {
+    const existing = `# Production configuration
+KEY1=value1
+# API Keys
+KEY2=value2`
+    const newContent = `KEY3=value3
+KEY1=should_be_ignored`
+    const result = mergeEnvContent(existing, newContent)
+
+    expect(result).toBe(`# Production configuration
+KEY1=value1
+# API Keys
+KEY2=value2
+
+KEY3=value3
+`)
+  })
+
+  test("should maintain proper formatting", () => {
+    const existing = `KEY1=value1
+KEY2=value2
+`
+    const newContent = `KEY3=value3`
+    const result = mergeEnvContent(existing, newContent)
+
+    expect(result).toBe(`KEY1=value1
+KEY2=value2
+
+KEY3=value3
+`)
+  })
+
+  test("should handle multiple new keys", () => {
+    const existing = `KEY1=value1`
+    const newContent = `KEY2=value2
+KEY3=value3
+KEY4=value4`
+    const result = mergeEnvContent(existing, newContent)
+
+    expect(result).toBe(`KEY1=value1
+
+KEY2=value2
+KEY3=value3
+KEY4=value4
+`)
+  })
+
+  test("should handle multi-line values in merge (current limitation)", () => {
+    const existing = `EXISTING_KEY=existing_value`
+    const newContent = `MULTI_LINE_KEY="Line 1
+Line 2
+Line 3"
+SIMPLE_KEY=simple`
+
+    const result = mergeEnvContent(existing, newContent)
+
+    // Current behavior: only the first line is added
+    expect(result).toBe(`EXISTING_KEY=existing_value
+
+MULTI_LINE_KEY=Line 1
+SIMPLE_KEY=simple
+`)
+
+    // The multi-line value is broken
+    expect(result).not.toContain("Line 2")
+    expect(result).not.toContain("Line 3")
+  })
+})
+
+describe("getNewEnvKeys", () => {
+  test("should identify new keys", () => {
+    const existing = `KEY1=value1
+KEY2=value2`
+    const newContent = `KEY1=ignored
+KEY3=value3
+KEY4=value4`
+
+    const result = getNewEnvKeys(existing, newContent)
+    expect(result).toEqual(["KEY3", "KEY4"])
+  })
+
+  test("should return empty array when all keys exist", () => {
+    const existing = `KEY1=value1
+KEY2=value2`
+    const newContent = `KEY1=different
+KEY2=different`
+
+    const result = getNewEnvKeys(existing, newContent)
+    expect(result).toEqual([])
+  })
+
+  test("should handle empty existing content", () => {
+    const existing = ""
+    const newContent = `KEY1=value1
+KEY2=value2`
+
+    const result = getNewEnvKeys(existing, newContent)
+    expect(result).toEqual(["KEY1", "KEY2"])
+  })
+})
+
+describe("findExistingEnvFile", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test("should return .env.local if it exists", () => {
+    vi.mocked(existsSync).mockImplementation((path) => {
+      const pathStr = typeof path === "string" ? path : path.toString()
+      return pathStr.endsWith(".env.local")
+    })
+
+    const result = findExistingEnvFile("/test/dir")
+    expect(result).toBe("/test/dir/.env.local")
+    expect(existsSync).toHaveBeenCalledWith("/test/dir/.env.local")
+    expect(existsSync).toHaveBeenCalledTimes(1)
+  })
+
+  test("should return .env if .env.local doesn't exist", () => {
+    vi.mocked(existsSync).mockImplementation((path) => {
+      const pathStr = typeof path === "string" ? path : path.toString()
+      return pathStr.endsWith(".env")
+    })
+
+    const result = findExistingEnvFile("/test/dir")
+    expect(result).toBe("/test/dir/.env")
+    expect(existsSync).toHaveBeenCalledWith("/test/dir/.env.local")
+    expect(existsSync).toHaveBeenCalledWith("/test/dir/.env")
+    expect(existsSync).toHaveBeenCalledTimes(2)
+  })
+
+  test("should return .env.development.local if earlier variants don't exist", () => {
+    vi.mocked(existsSync).mockImplementation((path) => {
+      const pathStr = typeof path === "string" ? path : path.toString()
+      return pathStr.endsWith(".env.development.local")
+    })
+
+    const result = findExistingEnvFile("/test/dir")
+    expect(result).toBe("/test/dir/.env.development.local")
+    expect(existsSync).toHaveBeenCalledWith("/test/dir/.env.local")
+    expect(existsSync).toHaveBeenCalledWith("/test/dir/.env")
+    expect(existsSync).toHaveBeenCalledWith("/test/dir/.env.development.local")
+    expect(existsSync).toHaveBeenCalledTimes(3)
+  })
+
+  test("should return null if no env files exist", () => {
+    vi.mocked(existsSync).mockReturnValue(false)
+
+    const result = findExistingEnvFile("/test/dir")
+    expect(result).toBeNull()
+    expect(existsSync).toHaveBeenCalledTimes(4)
+  })
+
+  test("should check all variants in correct order", () => {
+    vi.mocked(existsSync).mockReturnValue(false)
+
+    findExistingEnvFile("/test/dir")
+
+    expect(existsSync).toHaveBeenCalledWith("/test/dir/.env.local")
+    expect(existsSync).toHaveBeenCalledWith("/test/dir/.env")
+    expect(existsSync).toHaveBeenCalledWith("/test/dir/.env.development.local")
+    expect(existsSync).toHaveBeenCalledWith("/test/dir/.env.development")
+  })
+})
diff --git a/packages/shadcn/src/utils/env-helpers.ts b/packages/shadcn/src/utils/env-helpers.ts
new file mode 100644
index 00000000000..25836145d1b
--- /dev/null
+++ b/packages/shadcn/src/utils/env-helpers.ts
@@ -0,0 +1,113 @@
+import { existsSync } from "fs"
+import path from "path"
+
+export function isEnvFile(filePath: string) {
+  const fileName = path.basename(filePath)
+  return /^\.env(\.|$)/.test(fileName)
+}
+
+/**
+ * Finds a file variant in the project.
+ * TODO: abstract this to a more generic function.
+ */
+export function findExistingEnvFile(targetDir: string) {
+  const variants = [
+    ".env.local",
+    ".env",
+    ".env.development.local",
+    ".env.development",
+  ]
+
+  for (const variant of variants) {
+    const filePath = path.join(targetDir, variant)
+    if (existsSync(filePath)) {
+      return filePath
+    }
+  }
+
+  return null
+}
+
+/**
+ * Parse .env content into key-value pairs.
+ */
+export function parseEnvContent(content: string) {
+  const lines = content.split("\n")
+  const env: Record<string, string> = {}
+
+  for (const line of lines) {
+    const trimmed = line.trim()
+
+    if (!trimmed || trimmed.startsWith("#")) {
+      continue
+    }
+
+    // Find the first = and split there
+    const equalIndex = trimmed.indexOf("=")
+    if (equalIndex === -1) {
+      continue
+    }
+
+    const key = trimmed.substring(0, equalIndex).trim()
+    const value = trimmed.substring(equalIndex + 1).trim()
+
+    if (key) {
+      env[key] = value.replace(/^["']|["']$/g, "")
+    }
+  }
+
+  return env
+}
+
+/**
+ * Get the list of new keys that would be added when merging env content.
+ */
+export function getNewEnvKeys(existingContent: string, newContent: string) {
+  const existingEnv = parseEnvContent(existingContent)
+  const newEnv = parseEnvContent(newContent)
+
+  const newKeys = []
+  for (const key of Object.keys(newEnv)) {
+    if (!(key in existingEnv)) {
+      newKeys.push(key)
+    }
+  }
+
+  return newKeys
+}
+
+/**
+ * Merge env content by appending ONLY new keys that don't exist in the existing content.
+ * Existing keys are preserved with their original values.
+ */
+export function mergeEnvContent(existingContent: string, newContent: string) {
+  const existingEnv = parseEnvContent(existingContent)
+  const newEnv = parseEnvContent(newContent)
+
+  let result = existingContent.trimEnd()
+  if (result && !result.endsWith("\n")) {
+    result += "\n"
+  }
+
+  const newKeys: string[] = []
+  for (const [key, value] of Object.entries(newEnv)) {
+    if (!(key in existingEnv)) {
+      newKeys.push(`${key}=${value}`)
+    }
+  }
+
+  if (newKeys.length > 0) {
+    if (result) {
+      result += "\n"
+    }
+    result += newKeys.join("\n")
+    return result + "\n"
+  }
+
+  // Ensure existing content ends with newline.
+  if (result && !result.endsWith("\n")) {
+    return result + "\n"
+  }
+
+  return result
+}
diff --git a/packages/shadcn/src/utils/env-loader.ts b/packages/shadcn/src/utils/env-loader.ts
new file mode 100644
index 00000000000..daa61d5445c
--- /dev/null
+++ b/packages/shadcn/src/utils/env-loader.ts
@@ -0,0 +1,28 @@
+import { existsSync } from "fs"
+import { join } from "path"
+import { logger } from "@/src/utils/logger"
+
+export async function loadEnvFiles(cwd: string = process.cwd()): Promise<void> {
+  try {
+    const { config } = await import("@dotenvx/dotenvx")
+    const envFiles = [
+      ".env.local",
+      ".env.development.local",
+      ".env.development",
+      ".env",
+    ]
+
+    for (const envFile of envFiles) {
+      const envPath = join(cwd, envFile)
+      if (existsSync(envPath)) {
+        config({
+          path: envPath,
+          overload: false,
+          quiet: true,
+        })
+      }
+    }
+  } catch (error) {
+    logger.warn("Failed to load env files:", error)
+  }
+}
diff --git a/packages/shadcn/src/utils/errors.ts b/packages/shadcn/src/utils/errors.ts
index c1ff21b3773..8fe1f730c6d 100644
--- a/packages/shadcn/src/utils/errors.ts
+++ b/packages/shadcn/src/utils/errors.ts
@@ -10,3 +10,4 @@ export const COMPONENT_URL_UNAUTHORIZED = "9"
 export const COMPONENT_URL_FORBIDDEN = "10"
 export const COMPONENT_URL_BAD_REQUEST = "11"
 export const COMPONENT_URL_INTERNAL_SERVER_ERROR = "12"
+export const BUILD_MISSING_REGISTRY_FILE = "13"
diff --git a/packages/shadcn/src/utils/file-helper.ts b/packages/shadcn/src/utils/file-helper.ts
new file mode 100644
index 00000000000..cebd807f7df
--- /dev/null
+++ b/packages/shadcn/src/utils/file-helper.ts
@@ -0,0 +1,52 @@
+import fsExtra from "fs-extra"
+
+export const FILE_BACKUP_SUFFIX = ".bak"
+
+export function createFileBackup(filePath: string): string | null {
+  if (!fsExtra.existsSync(filePath)) {
+    return null
+  }
+
+  const backupPath = `${filePath}${FILE_BACKUP_SUFFIX}`
+  try {
+    fsExtra.renameSync(filePath, backupPath)
+    return backupPath
+  } catch (error) {
+    console.error(`Failed to create backup of ${filePath}: ${error}`)
+    return null
+  }
+}
+
+export function restoreFileBackup(filePath: string): boolean {
+  const backupPath = `${filePath}${FILE_BACKUP_SUFFIX}`
+
+  if (!fsExtra.existsSync(backupPath)) {
+    return false
+  }
+
+  try {
+    fsExtra.renameSync(backupPath, filePath)
+    return true
+  } catch (error) {
+    console.error(
+      `Warning: Could not restore backup file ${backupPath}: ${error}`
+    )
+    return false
+  }
+}
+
+export function deleteFileBackup(filePath: string): boolean {
+  const backupPath = `${filePath}${FILE_BACKUP_SUFFIX}`
+
+  if (!fsExtra.existsSync(backupPath)) {
+    return false
+  }
+
+  try {
+    fsExtra.unlinkSync(backupPath)
+    return true
+  } catch (error) {
+    // Best effort - don't log as this is just cleanup
+    return false
+  }
+}
diff --git a/packages/shadcn/src/utils/frameworks.ts b/packages/shadcn/src/utils/frameworks.ts
index 7ef82c99286..e9680e9277b 100644
--- a/packages/shadcn/src/utils/frameworks.ts
+++ b/packages/shadcn/src/utils/frameworks.ts
@@ -23,6 +23,15 @@ export const FRAMEWORKS = {
       tailwind: "https://tailwindcss.com/docs/guides/remix",
     },
   },
+  "react-router": {
+    name: "react-router",
+    label: "React Router",
+    links: {
+      installation: "https://ui.shadcn.com/docs/installation/react-router",
+      tailwind:
+        "https://tailwindcss.com/docs/installation/framework-guides/react-router",
+    },
+  },
   vite: {
     name: "vite",
     label: "Vite",
@@ -47,6 +56,14 @@ export const FRAMEWORKS = {
       tailwind: "https://tailwindcss.com/docs/guides/laravel",
     },
   },
+  "tanstack-start": {
+    name: "tanstack-start",
+    label: "TanStack Start",
+    links: {
+      installation: "https://ui.shadcn.com/docs/installation/tanstack",
+      tailwind: "https://tailwindcss.com/docs/installation/using-postcss",
+    },
+  },
   gatsby: {
     name: "gatsby",
     label: "Gatsby",
@@ -55,6 +72,14 @@ export const FRAMEWORKS = {
       tailwind: "https://tailwindcss.com/docs/guides/gatsby",
     },
   },
+  expo: {
+    name: "expo",
+    label: "Expo",
+    links: {
+      installation: "https://ui.shadcn.com/docs/installation/expo",
+      tailwind: "https://www.nativewind.dev/docs/getting-started/installation",
+    },
+  },
   manual: {
     name: "manual",
     label: "Manual",
diff --git a/packages/shadcn/src/utils/get-config.ts b/packages/shadcn/src/utils/get-config.ts
index fafb395015f..e69529e6a85 100644
--- a/packages/shadcn/src/utils/get-config.ts
+++ b/packages/shadcn/src/utils/get-config.ts
@@ -1,7 +1,15 @@
 import path from "path"
+import { BUILTIN_REGISTRIES } from "@/src/registry/constants"
+import {
+  configSchema,
+  rawConfigSchema,
+  workspaceConfigSchema,
+} from "@/src/schema"
+import { getProjectInfo } from "@/src/utils/get-project-info"
 import { highlighter } from "@/src/utils/highlighter"
 import { resolveImport } from "@/src/utils/resolve-import"
 import { cosmiconfig } from "cosmiconfig"
+import fg from "fast-glob"
 import { loadConfig } from "tsconfig-paths"
 import { z } from "zod"
 
@@ -14,48 +22,10 @@ export const DEFAULT_TAILWIND_BASE_COLOR = "slate"
 
 // TODO: Figure out if we want to support all cosmiconfig formats.
 // A simple components.json file would be nice.
-const explorer = cosmiconfig("components", {
+export const explorer = cosmiconfig("components", {
   searchPlaces: ["components.json"],
 })
 
-export const rawConfigSchema = z
-  .object({
-    $schema: z.string().optional(),
-    style: z.string(),
-    rsc: z.coerce.boolean().default(false),
-    tsx: z.coerce.boolean().default(true),
-    tailwind: z.object({
-      config: z.string(),
-      css: z.string(),
-      baseColor: z.string(),
-      cssVariables: z.boolean().default(true),
-      prefix: z.string().default("").optional(),
-    }),
-    aliases: z.object({
-      components: z.string(),
-      utils: z.string(),
-      ui: z.string().optional(),
-      lib: z.string().optional(),
-      hooks: z.string().optional(),
-    }),
-  })
-  .strict()
-
-export type RawConfig = z.infer<typeof rawConfigSchema>
-
-export const configSchema = rawConfigSchema.extend({
-  resolvedPaths: z.object({
-    cwd: z.string(),
-    tailwindConfig: z.string(),
-    tailwindCss: z.string(),
-    utils: z.string(),
-    components: z.string(),
-    lib: z.string(),
-    hooks: z.string(),
-    ui: z.string(),
-  }),
-})
-
 export type Config = z.infer<typeof configSchema>
 
 export async function getConfig(cwd: string) {
@@ -65,10 +35,24 @@ export async function getConfig(cwd: string) {
     return null
   }
 
+  // Set default icon library if not provided.
+  if (!config.iconLibrary) {
+    config.iconLibrary = config.style === "new-york" ? "radix" : "lucide"
+  }
+
   return await resolveConfigPaths(cwd, config)
 }
 
-export async function resolveConfigPaths(cwd: string, config: RawConfig) {
+export async function resolveConfigPaths(
+  cwd: string,
+  config: z.infer<typeof rawConfigSchema>
+) {
+  // Merge built-in registries with user registries
+  config.registries = {
+    ...BUILTIN_REGISTRIES,
+    ...(config.registries || {}),
+  }
+
   // Read tsconfig.json.
   const tsConfig = await loadConfig(cwd)
 
@@ -84,7 +68,9 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
     ...config,
     resolvedPaths: {
       cwd,
-      tailwindConfig: path.resolve(cwd, config.tailwind.config),
+      tailwindConfig: config.tailwind.config
+        ? path.resolve(cwd, config.tailwind.config)
+        : "",
       tailwindCss: path.resolve(cwd, config.tailwind.css),
       utils: await resolveImport(config.aliases["utils"], tsConfig),
       components: await resolveImport(config.aliases["components"], tsConfig),
@@ -115,7 +101,9 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
   })
 }
 
-export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
+export async function getRawConfig(
+  cwd: string
+): Promise<z.infer<typeof rawConfigSchema> | null> {
   try {
     const configResult = await explorer.search(cwd)
 
@@ -123,11 +111,175 @@ export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
       return null
     }
 
-    return rawConfigSchema.parse(configResult.config)
+    const config = rawConfigSchema.parse(configResult.config)
+
+    // Check if user is trying to override built-in registries
+    if (config.registries) {
+      for (const registryName of Object.keys(config.registries)) {
+        if (registryName in BUILTIN_REGISTRIES) {
+          throw new Error(
+            `"${registryName}" is a built-in registry and cannot be overridden.`
+          )
+        }
+      }
+    }
+
+    return config
   } catch (error) {
     const componentPath = `${cwd}/components.json`
+    if (error instanceof Error && error.message.includes("reserved registry")) {
+      throw error
+    }
     throw new Error(
       `Invalid configuration found in ${highlighter.info(componentPath)}.`
     )
   }
 }
+
+// Note: we can check for -workspace.yaml or "workspace" in package.json.
+// Since cwd is not necessarily the root of the project.
+// We'll instead check if ui aliases resolve to a different root.
+export async function getWorkspaceConfig(config: Config) {
+  let resolvedAliases: any = {}
+
+  for (const key of Object.keys(config.aliases)) {
+    if (!isAliasKey(key, config)) {
+      continue
+    }
+
+    const resolvedPath = config.resolvedPaths[key]
+    const packageRoot = await findPackageRoot(
+      config.resolvedPaths.cwd,
+      resolvedPath
+    )
+
+    if (!packageRoot) {
+      resolvedAliases[key] = config
+      continue
+    }
+
+    resolvedAliases[key] = await getConfig(packageRoot)
+  }
+
+  const result = workspaceConfigSchema.safeParse(resolvedAliases)
+  if (!result.success) {
+    return null
+  }
+
+  return result.data
+}
+
+export async function findPackageRoot(cwd: string, resolvedPath: string) {
+  const commonRoot = findCommonRoot(cwd, resolvedPath)
+  const relativePath = path.relative(commonRoot, resolvedPath)
+
+  const packageRoots = await fg.glob("**/package.json", {
+    cwd: commonRoot,
+    deep: 3,
+    ignore: ["**/node_modules/**", "**/dist/**", "**/build/**", "**/public/**"],
+  })
+
+  const matchingPackageRoot = packageRoots
+    .map((pkgPath) => path.dirname(pkgPath))
+    .find((pkgDir) => relativePath.startsWith(pkgDir))
+
+  return matchingPackageRoot ? path.join(commonRoot, matchingPackageRoot) : null
+}
+
+function isAliasKey(
+  key: string,
+  config: Config
+): key is keyof Config["aliases"] {
+  return Object.keys(config.resolvedPaths)
+    .filter((key) => key !== "utils")
+    .includes(key)
+}
+
+export function findCommonRoot(cwd: string, resolvedPath: string) {
+  const parts1 = cwd.split(path.sep)
+  const parts2 = resolvedPath.split(path.sep)
+  const commonParts = []
+
+  for (let i = 0; i < Math.min(parts1.length, parts2.length); i++) {
+    if (parts1[i] !== parts2[i]) {
+      break
+    }
+    commonParts.push(parts1[i])
+  }
+
+  return commonParts.join(path.sep)
+}
+
+// TODO: Cache this call.
+export async function getTargetStyleFromConfig(cwd: string, fallback: string) {
+  const projectInfo = await getProjectInfo(cwd)
+  return projectInfo?.tailwindVersion === "v4" ? "new-york-v4" : fallback
+}
+
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
+}
+
+/**
+ * Creates a config object with sensible defaults.
+ * Useful for universal registry items that bypass framework detection.
+ *
+ * @param partial - Partial config values to override defaults
+ * @returns A complete Config object
+ */
+export function createConfig(partial?: DeepPartial<Config>): Config {
+  const defaultConfig: Config = {
+    resolvedPaths: {
+      cwd: process.cwd(),
+      tailwindConfig: "",
+      tailwindCss: "",
+      utils: "",
+      components: "",
+      ui: "",
+      lib: "",
+      hooks: "",
+    },
+    style: "",
+    tailwind: {
+      config: "",
+      css: "",
+      baseColor: "",
+      cssVariables: false,
+    },
+    rsc: false,
+    tsx: true,
+    aliases: {
+      components: "",
+      utils: "",
+    },
+    registries: {
+      ...BUILTIN_REGISTRIES,
+    },
+  }
+
+  // Deep merge the partial config with defaults
+  if (partial) {
+    return {
+      ...defaultConfig,
+      ...partial,
+      resolvedPaths: {
+        ...defaultConfig.resolvedPaths,
+        ...(partial.resolvedPaths || {}),
+      },
+      tailwind: {
+        ...defaultConfig.tailwind,
+        ...(partial.tailwind || {}),
+      },
+      aliases: {
+        ...defaultConfig.aliases,
+        ...(partial.aliases || {}),
+      },
+      registries: {
+        ...defaultConfig.registries,
+        ...(partial.registries || {}),
+      },
+    }
+  }
+
+  return defaultConfig
+}
diff --git a/packages/shadcn/src/utils/get-package-manager.ts b/packages/shadcn/src/utils/get-package-manager.ts
index db9632b8265..63b155ad0b5 100644
--- a/packages/shadcn/src/utils/get-package-manager.ts
+++ b/packages/shadcn/src/utils/get-package-manager.ts
@@ -5,13 +5,13 @@ export async function getPackageManager(
   { withFallback }: { withFallback?: boolean } = {
     withFallback: false,
   }
-): Promise<"yarn" | "pnpm" | "bun" | "npm"> {
+): Promise<"yarn" | "pnpm" | "bun" | "npm" | "deno"> {
   const packageManager = await detect({ programmatic: true, cwd: targetDir })
 
   if (packageManager === "yarn@berry") return "yarn"
   if (packageManager === "pnpm@6") return "pnpm"
   if (packageManager === "bun") return "bun"
-
+  if (packageManager === "deno") return "deno"
   if (!withFallback) {
     return packageManager ?? "npm"
   }
diff --git a/packages/shadcn/src/utils/get-project-info.ts b/packages/shadcn/src/utils/get-project-info.ts
index cd1f47ce8fa..8bca68172d5 100644
--- a/packages/shadcn/src/utils/get-project-info.ts
+++ b/packages/shadcn/src/utils/get-project-info.ts
@@ -1,23 +1,23 @@
 import path from "path"
+import { rawConfigSchema } from "@/src/schema"
 import { FRAMEWORKS, Framework } from "@/src/utils/frameworks"
-import {
-  Config,
-  RawConfig,
-  getConfig,
-  resolveConfigPaths,
-} from "@/src/utils/get-config"
+import { Config, getConfig, resolveConfigPaths } from "@/src/utils/get-config"
 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 = {
+export type TailwindVersion = "v3" | "v4" | null
+
+export type ProjectInfo = {
   framework: Framework
   isSrcDir: boolean
   isRSC: boolean
   isTsx: boolean
   tailwindConfigFile: string | null
   tailwindCssFile: string | null
+  tailwindVersion: TailwindVersion
   aliasPrefix: string | null
 }
 
@@ -29,6 +29,12 @@ 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,
@@ -36,18 +42,23 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
     isTsx,
     tailwindConfigFile,
     tailwindCssFile,
+    tailwindVersion,
     aliasPrefix,
     packageJson,
   ] = await Promise.all([
-    fg.glob("**/{next,vite,astro}.config.*|gatsby-config.*|composer.json", {
-      cwd,
-      deep: 3,
-      ignore: PROJECT_SHARED_IGNORE,
-    }),
+    fg.glob(
+      "**/{next,vite,astro,app}.config.*|gatsby-config.*|composer.json|react-router.config.*",
+      {
+        cwd,
+        deep: 3,
+        ignore: PROJECT_SHARED_IGNORE,
+      }
+    ),
     fs.pathExists(path.resolve(cwd, "src")),
     isTypeScriptProject(cwd),
     getTailwindConfigFile(cwd),
     getTailwindCssFile(cwd),
+    getTailwindVersion(cwd),
     getTsConfigAliasPrefix(cwd),
     getPackageInfo(cwd, false),
   ])
@@ -63,6 +74,7 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
     isTsx,
     tailwindConfigFile,
     tailwindCssFile,
+    tailwindVersion,
     aliasPrefix,
   }
 
@@ -103,6 +115,25 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
     return type
   }
 
+  // TanStack Start.
+  if (
+    [
+      ...Object.keys(packageJson?.dependencies ?? {}),
+      ...Object.keys(packageJson?.devDependencies ?? {}),
+    ].find((dep) => dep.startsWith("@tanstack/react-start"))
+  ) {
+    type.framework = FRAMEWORKS["tanstack-start"]
+    return type
+  }
+
+  // React Router.
+  if (
+    configFiles.find((file) => file.startsWith("react-router.config."))?.length
+  ) {
+    type.framework = FRAMEWORKS["react-router"]
+    return type
+  }
+
   // Vite.
   // Some Remix templates also have a vite.config.* file.
   // We'll assume that it got caught by the Remix check above.
@@ -111,24 +142,85 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
     return type
   }
 
+  // Vinxi-based (such as @tanstack/start and @solidjs/solid-start)
+  // They are vite-based, and the same configurations used for Vite should work flawlessly
+  const appConfig = configFiles.find((file) => file.startsWith("app.config"))
+  if (appConfig?.length) {
+    const appConfigContents = await fs.readFile(
+      path.resolve(cwd, appConfig),
+      "utf8"
+    )
+    if (appConfigContents.includes("defineConfig")) {
+      type.framework = FRAMEWORKS["vite"]
+      return type
+    }
+  }
+
+  // Expo.
+  if (packageJson?.dependencies?.expo) {
+    type.framework = FRAMEWORKS["expo"]
+    return type
+  }
+
   return type
 }
 
+export async function getTailwindVersion(
+  cwd: string
+): Promise<ProjectInfo["tailwindVersion"]> {
+  const [packageInfo, config] = await Promise.all([
+    getPackageInfo(cwd, false),
+    getConfig(cwd),
+  ])
+
+  // If the config file is empty, we can assume that it's a v4 project.
+  if (config?.tailwind?.config === "") {
+    return "v4"
+  }
+
+  if (
+    !packageInfo?.dependencies?.tailwindcss &&
+    !packageInfo?.devDependencies?.tailwindcss
+  ) {
+    return null
+  }
+
+  if (
+    /^(?:\^|~)?3(?:\.\d+)*(?:-.*)?$/.test(
+      packageInfo?.dependencies?.tailwindcss ||
+        packageInfo?.devDependencies?.tailwindcss ||
+        ""
+    )
+  ) {
+    return "v3"
+  }
+
+  return "v4"
+}
+
 export async function getTailwindCssFile(cwd: string) {
-  const files = await fg.glob(["**/*.css", "**/*.scss"], {
-    cwd,
-    deep: 5,
-    ignore: PROJECT_SHARED_IGNORE,
-  })
+  const [files, tailwindVersion] = await Promise.all([
+    fg.glob(["**/*.css", "**/*.scss"], {
+      cwd,
+      deep: 5,
+      ignore: PROJECT_SHARED_IGNORE,
+    }),
+    getTailwindVersion(cwd),
+  ])
 
   if (!files.length) {
     return null
   }
 
+  const needle =
+    tailwindVersion === "v4" ? `@import "tailwindcss"` : "@tailwind base"
   for (const file of files) {
     const contents = await fs.readFile(path.resolve(cwd, file), "utf8")
-    // Assume that if the file contains `@tailwind base` it's the main css file.
-    if (contents.includes("@tailwind base")) {
+    if (
+      contents.includes(`@import "tailwindcss"`) ||
+      contents.includes(`@import 'tailwindcss'`) ||
+      contents.includes(`@tailwind base`)
+    ) {
       return file
     }
   }
@@ -153,7 +245,10 @@ export async function getTailwindConfigFile(cwd: string) {
 export async function getTsConfigAliasPrefix(cwd: string) {
   const tsConfig = await loadConfig(cwd)
 
-  if (tsConfig?.resultType === "failed" || !tsConfig?.paths) {
+  if (
+    tsConfig?.resultType === "failed" ||
+    !Object.entries(tsConfig?.paths).length
+  ) {
     return null
   }
 
@@ -165,11 +260,12 @@ export async function getTsConfigAliasPrefix(cwd: string) {
       paths.includes("./app/*") ||
       paths.includes("./resources/js/*") // Laravel.
     ) {
-      return alias.at(0) ?? null
+      return alias.replace(/\/\*$/, "") ?? null
     }
   }
 
-  return null
+  // Use the first alias as the prefix.
+  return Object.keys(tsConfig?.paths)?.[0].replace(/\/\*$/, "") ?? null
 }
 
 export async function isTypeScriptProject(cwd: string) {
@@ -182,19 +278,30 @@ export async function isTypeScriptProject(cwd: string) {
   return files.length > 0
 }
 
-export async function getTsConfig() {
-  try {
-    const tsconfigPath = path.join("tsconfig.json")
-    const tsconfig = await fs.readJSON(tsconfigPath)
+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
+    }
+
+    // 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 (!tsconfig) {
-      throw new Error("tsconfig.json is missing")
+    if (result.error) {
+      continue
     }
 
-    return tsconfig
-  } catch (error) {
-    return null
+    return result.data
   }
+
+  return null
 }
 
 export async function getProjectConfig(
@@ -215,24 +322,25 @@ export async function getProjectConfig(
 
   if (
     !projectInfo ||
-    !projectInfo.tailwindConfigFile ||
-    !projectInfo.tailwindCssFile
+    !projectInfo.tailwindCssFile ||
+    (projectInfo.tailwindVersion === "v3" && !projectInfo.tailwindConfigFile)
   ) {
     return null
   }
 
-  const config: RawConfig = {
+  const config: z.infer<typeof rawConfigSchema> = {
     $schema: "https://ui.shadcn.com/schema.json",
     rsc: projectInfo.isRSC,
     tsx: projectInfo.isTsx,
     style: "new-york",
     tailwind: {
-      config: projectInfo.tailwindConfigFile,
+      config: projectInfo.tailwindConfigFile ?? "",
       baseColor: "zinc",
       css: projectInfo.tailwindCssFile,
       cssVariables: true,
       prefix: "",
     },
+    iconLibrary: "lucide",
     aliases: {
       components: `${projectInfo.aliasPrefix}/components`,
       ui: `${projectInfo.aliasPrefix}/components/ui`,
@@ -244,3 +352,19 @@ export async function getProjectConfig(
 
   return await resolveConfigPaths(cwd, config)
 }
+
+export async function getProjectTailwindVersionFromConfig(config: {
+  resolvedPaths: Pick<Config["resolvedPaths"], "cwd">
+}): Promise<TailwindVersion> {
+  if (!config.resolvedPaths?.cwd) {
+    return "v3"
+  }
+
+  const projectInfo = await getProjectInfo(config.resolvedPaths.cwd)
+
+  if (!projectInfo?.tailwindVersion) {
+    return null
+  }
+
+  return projectInfo.tailwindVersion
+}
diff --git a/packages/shadcn/src/utils/handle-error.ts b/packages/shadcn/src/utils/handle-error.ts
index 30244ec076c..6936032c650 100644
--- a/packages/shadcn/src/utils/handle-error.ts
+++ b/packages/shadcn/src/utils/handle-error.ts
@@ -1,8 +1,10 @@
+import { RegistryError } from "@/src/registry/errors"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
 import { z } from "zod"
 
 export function handleError(error: unknown) {
+  logger.break()
   logger.error(
     `Something went wrong. Please check the error below for more details.`
   )
@@ -14,6 +16,25 @@ export function handleError(error: unknown) {
     process.exit(1)
   }
 
+  if (error instanceof RegistryError) {
+    if (error.message) {
+      logger.error(error.cause ? "Error:" : "Message:")
+      logger.error(error.message)
+    }
+
+    if (error.cause) {
+      logger.error("\nMessage:")
+      logger.error(error.cause)
+    }
+
+    if (error.suggestion) {
+      logger.error("\nSuggestion:")
+      logger.error(error.suggestion)
+    }
+    logger.break()
+    process.exit(1)
+  }
+
   if (error instanceof z.ZodError) {
     logger.error("Validation failed:")
     for (const [key, value] of Object.entries(error.flatten().fieldErrors)) {
diff --git a/packages/shadcn/src/utils/icon-libraries.ts b/packages/shadcn/src/utils/icon-libraries.ts
new file mode 100644
index 00000000000..d0c30fcbd00
--- /dev/null
+++ b/packages/shadcn/src/utils/icon-libraries.ts
@@ -0,0 +1,12 @@
+export const ICON_LIBRARIES = {
+  lucide: {
+    name: "lucide-react",
+    package: "lucide-react",
+    import: "lucide-react",
+  },
+  radix: {
+    name: "@radix-ui/react-icons",
+    package: "@radix-ui/react-icons",
+    import: "@radix-ui/react-icons",
+  },
+}
diff --git a/packages/shadcn/src/utils/is-safe-target.test.ts b/packages/shadcn/src/utils/is-safe-target.test.ts
new file mode 100644
index 00000000000..c76d921cca5
--- /dev/null
+++ b/packages/shadcn/src/utils/is-safe-target.test.ts
@@ -0,0 +1,156 @@
+import { describe, expect, test } from "vitest"
+
+import { isSafeTarget } from "./is-safe-target"
+
+describe("isSafeTarget", () => {
+  const cwd = "/foo/bar"
+
+  describe("should reject path traversal attempts", () => {
+    test.each([
+      {
+        description: "basic path traversal with ../",
+        target: "../../etc/passwd",
+      },
+      {
+        description: "nested path traversal",
+        target: "ui/../../../etc/hosts",
+      },
+      {
+        description: "path traversal with ~/../",
+        target: "~/../../../.ssh/authorized_keys",
+      },
+      {
+        description: "absolute paths outside project",
+        target: "/etc/passwd",
+      },
+      {
+        description: "paths that resolve outside project root",
+        target: "foo/bar/../../../../etc/passwd",
+      },
+      {
+        description: "URL-encoded path traversal",
+        target: "%2e%2e%2f%2e%2e%2fetc%2fpasswd",
+      },
+      {
+        description: "double URL-encoded sequences",
+        target: "%252e%252e%252fetc%252fpasswd",
+      },
+      {
+        description: "mixed encoded/plain traversal",
+        target: "..%2f..%2fetc%2fpasswd",
+      },
+      {
+        description: "null byte injection",
+        target: "valid/path\0../../etc/passwd",
+      },
+      {
+        description: "Windows-style path traversal",
+        target: "..\\..\\Windows\\System32\\config",
+      },
+      {
+        description: "Windows absolute paths",
+        target: "C:\\Windows\\System32\\drivers\\etc\\hosts",
+      },
+      {
+        description: "mixed separator traversal",
+        target: "foo\\..\\../etc/passwd",
+      },
+      {
+        description: "current directory reference attacks",
+        target: "foo/./././../../../etc/passwd",
+      },
+      {
+        description: "control characters in paths",
+        target: "foo/\x01\x02/../../etc/passwd",
+      },
+      {
+        description: "Unicode normalization attacks",
+        target: "foo/../\u2025/etc/passwd",
+      },
+      {
+        description:
+          "path traversal with square brackets outside [...] pattern",
+        target: "foo/[bar]/../../etc/passwd",
+      },
+    ])("$description", ({ target }) => {
+      expect(isSafeTarget(target, cwd)).toBe(false)
+    })
+  })
+
+  describe("should accept safe paths", () => {
+    test.each([
+      {
+        description: "simple relative path",
+        target: "ui/button.tsx",
+      },
+      {
+        description: "nested relative path",
+        target: "components/ui/button.tsx",
+      },
+      {
+        description: "home directory expansion",
+        target: "~/foo.json",
+      },
+      {
+        description: "nested home directory path",
+        target: "~/components/button.tsx",
+      },
+      {
+        description: "dot in filename",
+        target: "components/.env.local",
+      },
+      {
+        description: "path with spaces",
+        target: "my components/button.tsx",
+      },
+      {
+        description: "path with special characters",
+        target: "components/@ui/button.tsx",
+      },
+      {
+        description: "framework routing with square brackets",
+        target: "pages/[id].tsx",
+      },
+      {
+        description: "catch-all routes with [...param]",
+        target: "server/api/auth/[...].ts",
+      },
+      {
+        description: "optional catch-all routes",
+        target: "pages/[[...slug]].tsx",
+      },
+      {
+        description: "dollar sign routes",
+        target: "routes/$userId.tsx",
+      },
+      {
+        description: "complex routing patterns",
+        target: "app/[locale]/[...segments]/page.tsx",
+      },
+    ])("$description", ({ target }) => {
+      expect(isSafeTarget(target, cwd)).toBe(true)
+    })
+  })
+
+  describe("edge cases", () => {
+    test("should handle empty string", () => {
+      expect(isSafeTarget("", cwd)).toBe(true)
+    })
+
+    test("should handle single dot", () => {
+      expect(isSafeTarget(".", cwd)).toBe(true)
+    })
+
+    test("should reject malformed URL encoding", () => {
+      expect(isSafeTarget("%zz%ff%2e%2e%2f", cwd)).toBe(false)
+    })
+
+    test("should handle paths at project root", () => {
+      expect(isSafeTarget("/foo/bar/test.txt", cwd)).toBe(true)
+    })
+
+    test("should reject paths just outside project root", () => {
+      expect(isSafeTarget("/foo/test.txt", cwd)).toBe(false)
+    })
+  })
+})
diff --git a/packages/shadcn/src/utils/is-safe-target.ts b/packages/shadcn/src/utils/is-safe-target.ts
new file mode 100644
index 00000000000..baab35992c9
--- /dev/null
+++ b/packages/shadcn/src/utils/is-safe-target.ts
@@ -0,0 +1,98 @@
+import path from "path"
+
+export function isSafeTarget(targetPath: string, cwd: string): boolean {
+  // Check for null bytes which can be used to bypass validations.
+  if (targetPath.includes("\0")) {
+    return false
+  }
+
+  // Decode URL-encoded sequences to catch encoded traversal attempts.
+  let decodedPath: string
+  try {
+    // Decode multiple times to catch double-encoded sequences.
+    decodedPath = targetPath
+    let prevPath = ""
+    while (decodedPath !== prevPath && decodedPath.includes("%")) {
+      prevPath = decodedPath
+      decodedPath = decodeURIComponent(decodedPath)
+    }
+  } catch {
+    // If decoding fails, treat as unsafe.
+    return false
+  }
+
+  // Normalize both paths to handle different path separators.
+  // Convert Windows backslashes to forward slashes for consistent handling.
+  const normalizedTarget = path.normalize(decodedPath.replace(/\\/g, "/"))
+  const normalizedRoot = path.normalize(cwd)
+
+  // Check for explicit path traversal sequences in both encoded and decoded forms.
+  // Allow [...] pattern which is common in framework routing (e.g., [...slug])
+  const hasPathTraversal = (path: string) => {
+    // Remove [...] patterns before checking for ..
+    const withoutBrackets = path.replace(/\[\.\.\..*?\]/g, "")
+    return withoutBrackets.includes("..")
+  }
+
+  if (
+    hasPathTraversal(normalizedTarget) ||
+    hasPathTraversal(decodedPath) ||
+    hasPathTraversal(targetPath)
+  ) {
+    return false
+  }
+
+  // Check for current directory references that might be used in traversal.
+  // First, remove [...] patterns to avoid false positives
+  const cleanPath = (path: string) => path.replace(/\[\.\.\..*?\]/g, "")
+  const cleanTarget = cleanPath(targetPath)
+  const cleanDecoded = cleanPath(decodedPath)
+
+  const suspiciousPatterns = [
+    /\.\.[\/\\]/, // ../ or ..\
+    /[\/\\]\.\./, // /.. or \..
+    /\.\./, // .. anywhere
+    /\.\.%/, // URL encoded traversal
+    /\x00/, // null byte
+    /[\x01-\x1f]/, // control characters
+  ]
+
+  if (
+    suspiciousPatterns.some(
+      (pattern) => pattern.test(cleanTarget) || pattern.test(cleanDecoded)
+    )
+  ) {
+    return false
+  }
+
+  // Allow ~/ at the start (home directory expansion within project) but reject ~/../ patterns.
+  if (
+    (targetPath.includes("~") || decodedPath.includes("~")) &&
+    (targetPath.includes("../") || decodedPath.includes("../"))
+  ) {
+    return false
+  }
+
+  // Check for Windows drive letters (even on non-Windows systems for safety).
+  const driveLetterRegex = /^[a-zA-Z]:[\/\\]/
+  if (driveLetterRegex.test(decodedPath)) {
+    // On Windows, check if it starts with the project root.
+    if (process.platform === "win32") {
+      return decodedPath.toLowerCase().startsWith(cwd.toLowerCase())
+    }
+    // On non-Windows systems, reject all Windows absolute paths.
+    return false
+  }
+
+  // If it's an absolute path, ensure it's within the project root.
+  if (path.isAbsolute(normalizedTarget)) {
+    return normalizedTarget.startsWith(normalizedRoot + path.sep)
+  }
+
+  // For relative paths, resolve and check if within project bounds.
+  const resolvedPath = path.resolve(normalizedRoot, normalizedTarget)
+  return (
+    resolvedPath.startsWith(normalizedRoot + path.sep) ||
+    resolvedPath === normalizedRoot
+  )
+}
diff --git a/packages/shadcn/src/utils/registries.ts b/packages/shadcn/src/utils/registries.ts
new file mode 100644
index 00000000000..f0471eaa9e6
--- /dev/null
+++ b/packages/shadcn/src/utils/registries.ts
@@ -0,0 +1,101 @@
+import path from "path"
+import { getRegistriesIndex } from "@/src/registry/api"
+import { BUILTIN_REGISTRIES } from "@/src/registry/constants"
+import { resolveRegistryNamespaces } from "@/src/registry/namespaces"
+import { rawConfigSchema } from "@/src/registry/schema"
+import { Config } from "@/src/utils/get-config"
+import { spinner } from "@/src/utils/spinner"
+import fs from "fs-extra"
+
+export async function ensureRegistriesInConfig(
+  components: string[],
+  config: Config,
+  options: {
+    silent?: boolean
+    writeFile?: boolean
+  } = {}
+) {
+  options = {
+    silent: false,
+    writeFile: true,
+    ...options,
+  }
+
+  // Use resolveRegistryNamespaces to discover all namespaces including dependencies.
+  const registryNames = await resolveRegistryNamespaces(components, config)
+
+  const missingRegistries = registryNames.filter(
+    (registry) =>
+      !config.registries?.[registry] &&
+      !Object.keys(BUILTIN_REGISTRIES).includes(registry)
+  )
+
+  if (missingRegistries.length === 0) {
+    return {
+      config,
+      newRegistries: [],
+    }
+  }
+
+  // We'll fail silently if we can't fetch the registry index.
+  // The error handling by caller will guide user to add the missing registries.
+  const registryIndex = await getRegistriesIndex({
+    useCache: process.env.NODE_ENV !== "development",
+  })
+
+  if (!registryIndex) {
+    return {
+      config,
+      newRegistries: [],
+    }
+  }
+
+  const foundRegistries: Record<string, string> = {}
+  for (const registry of missingRegistries) {
+    if (registryIndex[registry]) {
+      foundRegistries[registry] = registryIndex[registry]
+    }
+  }
+
+  if (Object.keys(foundRegistries).length === 0) {
+    return {
+      config,
+      newRegistries: [],
+    }
+  }
+
+  // Filter out built-in registries from existing config before merging
+  const existingRegistries = Object.fromEntries(
+    Object.entries(config.registries || {}).filter(
+      ([key]) => !Object.keys(BUILTIN_REGISTRIES).includes(key)
+    )
+  )
+
+  const newConfigWithRegistries = {
+    ...config,
+    registries: {
+      ...existingRegistries,
+      ...foundRegistries,
+    },
+  }
+
+  if (options.writeFile) {
+    const { resolvedPaths, ...configWithoutResolvedPaths } =
+      newConfigWithRegistries
+    const configSpinner = spinner("Updating components.json.", {
+      silent: options.silent,
+    }).start()
+    const updatedConfig = rawConfigSchema.parse(configWithoutResolvedPaths)
+    await fs.writeFile(
+      path.resolve(config.resolvedPaths.cwd, "components.json"),
+      JSON.stringify(updatedConfig, null, 2) + "\n",
+      "utf-8"
+    )
+    configSpinner.succeed()
+  }
+
+  return {
+    config: newConfigWithRegistries,
+    newRegistries: Object.keys(foundRegistries),
+  }
+}
diff --git a/packages/shadcn/src/utils/registry/index.ts b/packages/shadcn/src/utils/registry/index.ts
deleted file mode 100644
index 429ce4c4add..00000000000
--- a/packages/shadcn/src/utils/registry/index.ts
+++ /dev/null
@@ -1,452 +0,0 @@
-import path from "path"
-import { Config } from "@/src/utils/get-config"
-import { handleError } from "@/src/utils/handle-error"
-import { highlighter } from "@/src/utils/highlighter"
-import { logger } from "@/src/utils/logger"
-import {
-  registryBaseColorSchema,
-  registryIndexSchema,
-  registryItemFileSchema,
-  registryItemSchema,
-  registryResolvedItemsTreeSchema,
-  stylesSchema,
-} from "@/src/utils/registry/schema"
-import { buildTailwindThemeColorsFromCssVars } from "@/src/utils/updaters/update-tailwind-config"
-import deepmerge from "deepmerge"
-import { HttpsProxyAgent } from "https-proxy-agent"
-import fetch from "node-fetch"
-import { z } from "zod"
-
-const REGISTRY_URL = process.env.REGISTRY_URL ?? "https://ui.shadcn.com/r"
-
-const agent = process.env.https_proxy
-  ? new HttpsProxyAgent(process.env.https_proxy)
-  : undefined
-
-export async function getRegistryIndex() {
-  try {
-    const [result] = await fetchRegistry(["index.json"])
-
-    return registryIndexSchema.parse(result)
-  } catch (error) {
-    logger.error("\n")
-    handleError(error)
-  }
-}
-
-export async function getRegistryStyles() {
-  try {
-    const [result] = await fetchRegistry(["styles/index.json"])
-
-    return stylesSchema.parse(result)
-  } catch (error) {
-    logger.error("\n")
-    handleError(error)
-    return []
-  }
-}
-
-export async function getRegistryItem(name: string, style: string) {
-  try {
-    const [result] = await fetchRegistry([
-      isUrl(name) ? name : `styles/${style}/${name}.json`,
-    ])
-
-    return registryItemSchema.parse(result)
-  } catch (error) {
-    logger.break()
-    handleError(error)
-    return null
-  }
-}
-
-export async function getRegistryBaseColors() {
-  return [
-    {
-      name: "neutral",
-      label: "Neutral",
-    },
-    {
-      name: "gray",
-      label: "Gray",
-    },
-    {
-      name: "zinc",
-      label: "Zinc",
-    },
-    {
-      name: "stone",
-      label: "Stone",
-    },
-    {
-      name: "slate",
-      label: "Slate",
-    },
-  ]
-}
-
-export async function getRegistryBaseColor(baseColor: string) {
-  try {
-    const [result] = await fetchRegistry([`colors/${baseColor}.json`])
-
-    return registryBaseColorSchema.parse(result)
-  } catch (error) {
-    handleError(error)
-  }
-}
-
-export async function resolveTree(
-  index: z.infer<typeof registryIndexSchema>,
-  names: string[]
-) {
-  const tree: z.infer<typeof registryIndexSchema> = []
-
-  for (const name of names) {
-    const entry = index.find((entry) => entry.name === name)
-
-    if (!entry) {
-      continue
-    }
-
-    tree.push(entry)
-
-    if (entry.registryDependencies) {
-      const dependencies = await resolveTree(index, entry.registryDependencies)
-      tree.push(...dependencies)
-    }
-  }
-
-  return tree.filter(
-    (component, index, self) =>
-      self.findIndex((c) => c.name === component.name) === index
-  )
-}
-
-export async function fetchTree(
-  style: string,
-  tree: z.infer<typeof registryIndexSchema>
-) {
-  try {
-    const paths = tree.map((item) => `styles/${style}/${item.name}.json`)
-    const result = await fetchRegistry(paths)
-    return registryIndexSchema.parse(result)
-  } catch (error) {
-    handleError(error)
-  }
-}
-
-export async function getItemTargetPath(
-  config: Config,
-  item: Pick<z.infer<typeof registryItemSchema>, "type">,
-  override?: string
-) {
-  if (override) {
-    return override
-  }
-
-  if (item.type === "registry:ui") {
-    return config.resolvedPaths.ui ?? config.resolvedPaths.components
-  }
-
-  const [parent, type] = item.type?.split(":") ?? []
-  if (!(parent in config.resolvedPaths)) {
-    return null
-  }
-
-  return path.join(
-    config.resolvedPaths[parent as keyof typeof config.resolvedPaths],
-    type
-  )
-}
-
-async function fetchRegistry(paths: string[]) {
-  try {
-    const results = await Promise.all(
-      paths.map(async (path) => {
-        const url = getRegistryUrl(path)
-        const response = await fetch(url, { agent })
-
-        if (!response.ok) {
-          const errorMessages: { [key: number]: string } = {
-            400: "Bad request",
-            401: "Unauthorized",
-            403: "Forbidden",
-            404: "Not found",
-            500: "Internal server error",
-          }
-
-          if (response.status === 401) {
-            throw new Error(
-              `You are not authorized to access the component at ${highlighter.info(
-                url
-              )}.\nIf this is a remote registry, you may need to authenticate.`
-            )
-          }
-
-          if (response.status === 404) {
-            throw new Error(
-              `The component at ${highlighter.info(
-                url
-              )} was not found.\nIt may not exist at the registry. Please make sure it is a valid component.`
-            )
-          }
-
-          if (response.status === 403) {
-            throw new Error(
-              `You do not have access to the component at ${highlighter.info(
-                url
-              )}.\nIf this is a remote registry, you may need to authenticate or a token.`
-            )
-          }
-
-          const result = await response.json()
-          const message =
-            result && typeof result === "object" && "error" in result
-              ? result.error
-              : response.statusText || errorMessages[response.status]
-          throw new Error(
-            `Failed to fetch from ${highlighter.info(url)}.\n${message}`
-          )
-        }
-
-        return response.json()
-      })
-    )
-
-    return results
-  } catch (error) {
-    logger.error("\n")
-    handleError(error)
-    return []
-  }
-}
-
-export function getRegistryItemFileTargetPath(
-  file: z.infer<typeof registryItemFileSchema>,
-  config: Config,
-  override?: string
-) {
-  if (override) {
-    return override
-  }
-
-  if (file.type === "registry:ui") {
-    return config.resolvedPaths.ui
-  }
-
-  if (file.type === "registry:lib") {
-    return config.resolvedPaths.lib
-  }
-
-  if (file.type === "registry:block" || file.type === "registry:component") {
-    return config.resolvedPaths.components
-  }
-
-  if (file.type === "registry:hook") {
-    return config.resolvedPaths.hooks
-  }
-
-  // TODO: we put this in components for now.
-  // We should move this to pages as per framework.
-  if (file.type === "registry:page") {
-    return config.resolvedPaths.components
-  }
-
-  return config.resolvedPaths.components
-}
-
-export async function registryResolveItemsTree(
-  names: z.infer<typeof registryItemSchema>["name"][],
-  config: Config
-) {
-  try {
-    const index = await getRegistryIndex()
-    if (!index) {
-      return null
-    }
-
-    // If we're resolving the index, we want it to go first.
-    if (names.includes("index")) {
-      names.unshift("index")
-    }
-
-    let registryDependencies: string[] = []
-    for (const name of names) {
-      const itemRegistryDependencies = await resolveRegistryDependencies(
-        name,
-        config
-      )
-      registryDependencies.push(...itemRegistryDependencies)
-    }
-
-    const uniqueRegistryDependencies = Array.from(new Set(registryDependencies))
-    let result = await fetchRegistry(uniqueRegistryDependencies)
-    const payload = z.array(registryItemSchema).parse(result)
-
-    if (!payload) {
-      return null
-    }
-
-    // If we're resolving the index, we want to fetch
-    // the theme item if a base color is provided.
-    // We do this for index only.
-    // Other components will ship with their theme tokens.
-    if (names.includes("index")) {
-      if (config.tailwind.baseColor) {
-        const theme = await registryGetTheme(config.tailwind.baseColor, config)
-        if (theme) {
-          payload.unshift(theme)
-        }
-      }
-    }
-
-    let tailwind = {}
-    payload.forEach((item) => {
-      tailwind = deepmerge(tailwind, item.tailwind ?? {})
-    })
-
-    let cssVars = {}
-    payload.forEach((item) => {
-      cssVars = deepmerge(cssVars, item.cssVars ?? {})
-    })
-
-    let docs = ""
-    payload.forEach((item) => {
-      if (item.docs) {
-        docs += `${item.docs}\n`
-      }
-    })
-
-    return registryResolvedItemsTreeSchema.parse({
-      dependencies: deepmerge.all(
-        payload.map((item) => item.dependencies ?? [])
-      ),
-      devDependencies: deepmerge.all(
-        payload.map((item) => item.devDependencies ?? [])
-      ),
-      files: deepmerge.all(payload.map((item) => item.files ?? [])),
-      tailwind,
-      cssVars,
-      docs,
-    })
-  } catch (error) {
-    handleError(error)
-    return null
-  }
-}
-
-async function resolveRegistryDependencies(
-  url: string,
-  config: Config
-): Promise<string[]> {
-  const visited = new Set<string>()
-  const payload: string[] = []
-
-  async function resolveDependencies(itemUrl: string) {
-    const url = getRegistryUrl(
-      isUrl(itemUrl) ? itemUrl : `styles/${config.style}/${itemUrl}.json`
-    )
-
-    if (visited.has(url)) {
-      return
-    }
-
-    visited.add(url)
-
-    try {
-      const [result] = await fetchRegistry([url])
-      const item = registryItemSchema.parse(result)
-      payload.push(url)
-
-      if (item.registryDependencies) {
-        for (const dependency of item.registryDependencies) {
-          await resolveDependencies(dependency)
-        }
-      }
-    } catch (error) {
-      console.error(
-        `Error fetching or parsing registry item at ${itemUrl}:`,
-        error
-      )
-    }
-  }
-
-  await resolveDependencies(url)
-  return Array.from(new Set(payload))
-}
-
-export async function registryGetTheme(name: string, config: Config) {
-  const baseColor = await getRegistryBaseColor(name)
-  if (!baseColor) {
-    return null
-  }
-
-  // TODO: Move this to the registry i.e registry:theme.
-  const theme = {
-    name,
-    type: "registry:theme",
-    tailwind: {
-      config: {
-        theme: {
-          extend: {
-            borderRadius: {
-              lg: "var(--radius)",
-              md: "calc(var(--radius) - 2px)",
-              sm: "calc(var(--radius) - 4px)",
-            },
-            colors: {},
-          },
-        },
-      },
-    },
-    cssVars: {
-      light: {
-        radius: "0.5rem",
-      },
-      dark: {},
-    },
-  } satisfies z.infer<typeof registryItemSchema>
-
-  if (config.tailwind.cssVariables) {
-    theme.tailwind.config.theme.extend.colors = {
-      ...theme.tailwind.config.theme.extend.colors,
-      ...buildTailwindThemeColorsFromCssVars(baseColor.cssVars.dark),
-    }
-    theme.cssVars = {
-      light: {
-        ...baseColor.cssVars.light,
-        ...theme.cssVars.light,
-      },
-      dark: {
-        ...baseColor.cssVars.dark,
-        ...theme.cssVars.dark,
-      },
-    }
-  }
-
-  return theme
-}
-
-function getRegistryUrl(path: string) {
-  if (isUrl(path)) {
-    // If the url contains /chat/b/, we assume it's the v0 registry.
-    // We need to add the /json suffix if it's missing.
-    const url = new URL(path)
-    if (url.pathname.match(/\/chat\/b\//) && !url.pathname.endsWith("/json")) {
-      url.pathname = `${url.pathname}/json`
-    }
-
-    return url.toString()
-  }
-
-  return `${REGISTRY_URL}/${path}`
-}
-
-function isUrl(path: string) {
-  try {
-    new URL(path)
-    return true
-  } catch (error) {
-    return false
-  }
-}
diff --git a/packages/shadcn/src/utils/registry/schema.ts b/packages/shadcn/src/utils/registry/schema.ts
deleted file mode 100644
index 8f76d324b24..00000000000
--- a/packages/shadcn/src/utils/registry/schema.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { z } from "zod"
-
-// TODO: Extract this to a shared package.
-export const registryItemTypeSchema = z.enum([
-  "registry:style",
-  "registry:lib",
-  "registry:example",
-  "registry:block",
-  "registry:component",
-  "registry:ui",
-  "registry:hook",
-  "registry:theme",
-  "registry:page",
-])
-
-export const registryItemFileSchema = z.object({
-  path: z.string(),
-  content: z.string().optional(),
-  type: registryItemTypeSchema,
-  target: z.string().optional(),
-})
-
-export const registryItemTailwindSchema = z.object({
-  config: z
-    .object({
-      content: z.array(z.string()).optional(),
-      theme: z.record(z.string(), z.any()).optional(),
-      plugins: z.array(z.string()).optional(),
-    })
-    .optional(),
-})
-
-export const registryItemCssVarsSchema = z.object({
-  light: z.record(z.string(), z.string()).optional(),
-  dark: z.record(z.string(), z.string()).optional(),
-})
-
-export const registryItemSchema = z.object({
-  name: z.string(),
-  type: registryItemTypeSchema,
-  description: z.string().optional(),
-  dependencies: z.array(z.string()).optional(),
-  devDependencies: z.array(z.string()).optional(),
-  registryDependencies: z.array(z.string()).optional(),
-  files: z.array(registryItemFileSchema).optional(),
-  tailwind: registryItemTailwindSchema.optional(),
-  cssVars: registryItemCssVarsSchema.optional(),
-  meta: z.record(z.string(), z.any()).optional(),
-  docs: z.string().optional(),
-})
-
-export type RegistryItem = z.infer<typeof registryItemSchema>
-
-export const registryIndexSchema = z.array(
-  registryItemSchema.extend({
-    files: z.array(z.union([z.string(), registryItemFileSchema])).optional(),
-  })
-)
-
-export const stylesSchema = z.array(
-  z.object({
-    name: z.string(),
-    label: z.string(),
-  })
-)
-
-export const registryBaseColorSchema = z.object({
-  inlineColors: z.object({
-    light: z.record(z.string(), z.string()),
-    dark: z.record(z.string(), z.string()),
-  }),
-  cssVars: z.object({
-    light: z.record(z.string(), z.string()),
-    dark: z.record(z.string(), z.string()),
-  }),
-  inlineColorsTemplate: z.string(),
-  cssVarsTemplate: z.string(),
-})
-
-export const registryResolvedItemsTreeSchema = registryItemSchema.pick({
-  dependencies: true,
-  devDependencies: true,
-  files: true,
-  tailwind: true,
-  cssVars: true,
-  docs: true,
-})
diff --git a/packages/shadcn/src/utils/resolve-import.ts b/packages/shadcn/src/utils/resolve-import.ts
index 0f029844b8f..d8da91a3790 100644
--- a/packages/shadcn/src/utils/resolve-import.ts
+++ b/packages/shadcn/src/utils/resolve-import.ts
@@ -8,6 +8,6 @@ export async function resolveImport(
     importPath,
     undefined,
     () => true,
-    [".ts", ".tsx"]
+    [".ts", ".tsx", ".jsx", ".js", ".css"]
   )
 }
diff --git a/packages/shadcn/src/utils/transformers/index.ts b/packages/shadcn/src/utils/transformers/index.ts
index d8b447997ae..6d302ae3978 100644
--- a/packages/shadcn/src/utils/transformers/index.ts
+++ b/packages/shadcn/src/utils/transformers/index.ts
@@ -1,9 +1,10 @@
 import { promises as fs } from "fs"
 import { tmpdir } from "os"
 import path from "path"
+import { registryBaseColorSchema } from "@/src/schema"
 import { Config } from "@/src/utils/get-config"
-import { registryBaseColorSchema } from "@/src/utils/registry/schema"
 import { transformCssVars } from "@/src/utils/transformers/transform-css-vars"
+import { transformIcons } from "@/src/utils/transformers/transform-icons"
 import { transformImport } from "@/src/utils/transformers/transform-import"
 import { transformJsx } from "@/src/utils/transformers/transform-jsx"
 import { transformRsc } from "@/src/utils/transformers/transform-rsc"
@@ -18,6 +19,7 @@ export type TransformOpts = {
   config: Config
   baseColor?: z.infer<typeof registryBaseColorSchema>
   transformJsx?: boolean
+  isRemote?: boolean
 }
 
 export type Transformer<Output = SourceFile> = (
@@ -42,6 +44,7 @@ export async function transform(
     transformRsc,
     transformCssVars,
     transformTwPrefixes,
+    transformIcons,
   ]
 ) {
   const tempFile = await createTempSourceFile(opts.filename)
@@ -50,7 +53,7 @@ export async function transform(
   })
 
   for (const transformer of transformers) {
-    transformer({ sourceFile, ...opts })
+    await transformer({ sourceFile, ...opts })
   }
 
   if (opts.transformJsx) {
diff --git a/packages/shadcn/src/utils/transformers/transform-css-vars.ts b/packages/shadcn/src/utils/transformers/transform-css-vars.ts
index 95cf973d1da..0959f85a265 100644
--- a/packages/shadcn/src/utils/transformers/transform-css-vars.ts
+++ b/packages/shadcn/src/utils/transformers/transform-css-vars.ts
@@ -1,4 +1,4 @@
-import { registryBaseColorSchema } from "@/src/utils/registry/schema"
+import { registryBaseColorSchema } from "@/src/schema"
 import { Transformer } from "@/src/utils/transformers"
 import { ScriptKind, SyntaxKind } from "ts-morph"
 import { z } from "zod"
@@ -31,13 +31,10 @@ export const transformCssVars: Transformer = async ({
   //   }
   // }
   sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => {
-    const value = node.getText()
-    if (value) {
-      const valueWithColorMapping = applyColorMapping(
-        value.replace(/"/g, ""),
-        baseColor.inlineColors
-      )
-      node.replaceWithText(`"${valueWithColorMapping.trim()}"`)
+    const raw = node.getLiteralText()
+    const mapped = applyColorMapping(raw, baseColor.inlineColors).trim()
+    if (mapped !== raw) {
+      node.setLiteralValue(mapped)
     }
   })
 
diff --git a/packages/shadcn/src/utils/transformers/transform-icons.test.ts b/packages/shadcn/src/utils/transformers/transform-icons.test.ts
new file mode 100644
index 00000000000..a3b3872089c
--- /dev/null
+++ b/packages/shadcn/src/utils/transformers/transform-icons.test.ts
@@ -0,0 +1,140 @@
+import { type Config } from "@/src/utils/get-config"
+import { transformIcons } from "@/src/utils/transformers/transform-icons"
+import { describe, expect, test, vi } from "vitest"
+
+import { transform } from "../transformers"
+
+const testConfig: Config = {
+  style: "new-york",
+  tsx: true,
+  rsc: true,
+  tailwind: {
+    baseColor: "neutral",
+    cssVariables: true,
+    config: "tailwind.config.ts",
+    css: "tailwind.css",
+  },
+  aliases: {
+    components: "@/components",
+    utils: "@/lib/utils",
+  },
+  resolvedPaths: {
+    cwd: "/",
+    components: "/components",
+    utils: "/lib/utils",
+    ui: "/ui",
+    lib: "/lib",
+    hooks: "/hooks",
+    tailwindConfig: "tailwind.config.ts",
+    tailwindCss: "tailwind.css",
+  },
+}
+
+vi.mock("@/src/registry/api", () => ({
+  getRegistryIcons: () => ({
+    Check: {
+      lucide: "Check",
+      radix: "CheckIcon",
+    },
+    ChevronDown: {
+      lucide: "ChevronDown",
+      radix: "ChevronDownIcon",
+    },
+    ChevronLeft: {
+      lucide: "ChevronLeft",
+      radix: "ChevronLeftIcon",
+    },
+  }),
+}))
+
+describe("transformIcons", () => {
+  test("transforms radix icons", async () => {
+    expect(
+      await transform(
+        {
+          filename: "test.ts",
+          raw: `import * as React from "react"
+import { Check } from "lucide-react"
+
+export function Component() {
+return <div><Check /></div>
+}
+  `,
+          config: {
+            ...testConfig,
+            iconLibrary: "radix",
+          },
+        },
+        [transformIcons]
+      )
+    ).toMatchInlineSnapshot(`
+      "import * as React from "react"
+      import { CheckIcon } from "@radix-ui/react-icons"
+
+      export function Component() {
+      return <div><CheckIcon /></div>
+      }
+        "
+    `)
+  })
+
+  test("does not transform lucide icons", async () => {
+    expect(
+      await transform(
+        {
+          filename: "test.ts",
+          raw: `import * as React from "react"
+import { Check } from "lucide-react"
+
+export function Component() {
+  return <div><Check /></div>
+}
+    `,
+          config: {
+            ...testConfig,
+            iconLibrary: "lucide",
+          },
+        },
+        [transformIcons]
+      )
+    ).toMatchInlineSnapshot(`
+    "import * as React from "react"
+    import { Check } from "lucide-react"
+
+    export function Component() {
+      return <div><Check /></div>
+    }
+        "
+    `)
+  })
+
+  test("preserves semicolon", async () => {
+    expect(
+      await transform(
+        {
+          filename: "test.ts",
+          raw: `import * as React from "react";
+import { ChevronDown } from "lucide-react";
+
+export function Component() {
+  return <div><ChevronDown /></div>
+}
+    `,
+          config: {
+            ...testConfig,
+            iconLibrary: "radix",
+          },
+        },
+        [transformIcons]
+      )
+    ).toMatchInlineSnapshot(`
+      "import * as React from "react";
+      import { ChevronDownIcon } from "@radix-ui/react-icons";
+
+      export function Component() {
+        return <div><ChevronDownIcon /></div>
+      }
+          "
+    `)
+  })
+})
diff --git a/packages/shadcn/src/utils/transformers/transform-icons.ts b/packages/shadcn/src/utils/transformers/transform-icons.ts
new file mode 100644
index 00000000000..ebc2e481849
--- /dev/null
+++ b/packages/shadcn/src/utils/transformers/transform-icons.ts
@@ -0,0 +1,82 @@
+import { getRegistryIcons } from "@/src/registry/api"
+import { ICON_LIBRARIES } from "@/src/utils/icon-libraries"
+import { Transformer } from "@/src/utils/transformers"
+import { SourceFile, SyntaxKind } from "ts-morph"
+
+// Lucide is the default icon library in the registry.
+const SOURCE_LIBRARY = "lucide"
+
+export const transformIcons: Transformer = async ({ sourceFile, config }) => {
+  // No transform if we cannot read the icon library.
+  if (!config.iconLibrary || !(config.iconLibrary in ICON_LIBRARIES)) {
+    return sourceFile
+  }
+
+  const registryIcons = await getRegistryIcons()
+  const sourceLibrary = SOURCE_LIBRARY
+  const targetLibrary = config.iconLibrary
+
+  if (sourceLibrary === targetLibrary) {
+    return sourceFile
+  }
+
+  let targetedIcons: string[] = []
+  for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) {
+    if (
+      importDeclaration.getModuleSpecifier()?.getText() !==
+      `"${ICON_LIBRARIES[SOURCE_LIBRARY].import}"`
+    ) {
+      continue
+    }
+
+    for (const specifier of importDeclaration.getNamedImports() ?? []) {
+      const iconName = specifier.getName()
+
+      const targetedIcon = registryIcons[iconName]?.[targetLibrary]
+
+      if (!targetedIcon || targetedIcons.includes(targetedIcon)) {
+        continue
+      }
+
+      targetedIcons.push(targetedIcon)
+
+      // Remove the named import.
+      specifier.remove()
+
+      // Replace with the targeted icon.
+      sourceFile
+        .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
+        .filter((node) => node.getTagNameNode()?.getText() === iconName)
+        .forEach((node) => node.getTagNameNode()?.replaceWithText(targetedIcon))
+    }
+
+    // If the named import is empty, remove the import declaration.
+    if (importDeclaration.getNamedImports()?.length === 0) {
+      importDeclaration.remove()
+    }
+  }
+
+  if (targetedIcons.length > 0) {
+    const iconImportDeclaration = sourceFile.addImportDeclaration({
+      moduleSpecifier:
+        ICON_LIBRARIES[targetLibrary as keyof typeof ICON_LIBRARIES]?.import,
+      namedImports: targetedIcons.map((icon) => ({
+        name: icon,
+      })),
+    })
+
+    if (!_useSemicolon(sourceFile)) {
+      iconImportDeclaration.replaceWithText(
+        iconImportDeclaration.getText().replace(";", "")
+      )
+    }
+  }
+
+  return sourceFile
+}
+
+function _useSemicolon(sourceFile: SourceFile) {
+  return (
+    sourceFile.getImportDeclarations()?.[0]?.getText().endsWith(";") ?? false
+  )
+}
diff --git a/packages/shadcn/src/utils/transformers/transform-import.ts b/packages/shadcn/src/utils/transformers/transform-import.ts
index cb0c700bec7..707b91f36b3 100644
--- a/packages/shadcn/src/utils/transformers/transform-import.ts
+++ b/packages/shadcn/src/utils/transformers/transform-import.ts
@@ -1,42 +1,68 @@
 import { Config } from "@/src/utils/get-config"
 import { Transformer } from "@/src/utils/transformers"
+import { SyntaxKind } from "ts-morph"
 
-export const transformImport: Transformer = async ({ sourceFile, config }) => {
-  const importDeclarations = sourceFile.getImportDeclarations()
+export const transformImport: Transformer = async ({
+  sourceFile,
+  config,
+  isRemote,
+}) => {
+  const workspaceAlias = config.aliases?.utils?.split("/")[0]?.slice(1)
+  const utilsImport = `@${workspaceAlias}/lib/utils`
 
-  for (const importDeclaration of importDeclarations) {
-    const moduleSpecifier = updateImportAliases(
-      importDeclaration.getModuleSpecifierValue(),
-      config
-    )
+  if (![".tsx", ".ts", ".jsx", ".js"].includes(sourceFile.getExtension())) {
+    return sourceFile
+  }
 
-    importDeclaration.setModuleSpecifier(moduleSpecifier)
+  for (const specifier of sourceFile.getImportStringLiterals()) {
+    const updated = updateImportAliases(
+      specifier.getLiteralValue(),
+      config,
+      isRemote
+    )
+    specifier.setLiteralValue(updated)
 
     // Replace `import { cn } from "@/lib/utils"`
-    if (moduleSpecifier == "@/lib/utils") {
-      const namedImports = importDeclaration.getNamedImports()
-      const cnImport = namedImports.find((i) => i.getName() === "cn")
-      if (cnImport) {
-        importDeclaration.setModuleSpecifier(
-          moduleSpecifier.replace(/^@\/lib\/utils/, config.aliases.utils)
-        )
-      }
+    if (utilsImport === updated || updated === "@/lib/utils") {
+      const importDeclaration = specifier.getFirstAncestorByKind(
+        SyntaxKind.ImportDeclaration
+      )
+      const isCnImport = importDeclaration
+        ?.getNamedImports()
+        .some((namedImport) => namedImport.getName() === "cn")
+
+      if (!isCnImport) continue
+
+      specifier.setLiteralValue(
+        utilsImport === updated
+          ? updated.replace(utilsImport, config.aliases.utils)
+          : config.aliases.utils
+      )
     }
   }
 
   return sourceFile
 }
 
-function updateImportAliases(moduleSpecifier: string, config: Config) {
+function updateImportAliases(
+  moduleSpecifier: string,
+  config: Config,
+  isRemote: boolean = false
+) {
   // Not a local import.
-  if (!moduleSpecifier.startsWith("@/")) {
+  if (!moduleSpecifier.startsWith("@/") && !isRemote) {
     return moduleSpecifier
   }
 
+  // This treats the remote as coming from a faux registry.
+  if (isRemote && moduleSpecifier.startsWith("@/")) {
+    moduleSpecifier = moduleSpecifier.replace(/^@\//, `@/registry/new-york/`)
+  }
+
   // Not a registry import.
   if (!moduleSpecifier.startsWith("@/registry/")) {
-    // We fix the alias an return.
-    const alias = config.aliases.components.charAt(0)
+    // We fix the alias and return.
+    const alias = config.aliases.components.split("/")[0]
     return moduleSpecifier.replace(/^@\//, `${alias}/`)
   }
 
diff --git a/packages/shadcn/src/utils/transformers/transform-rsc.ts b/packages/shadcn/src/utils/transformers/transform-rsc.ts
index b7d24a0709e..1090093aba0 100644
--- a/packages/shadcn/src/utils/transformers/transform-rsc.ts
+++ b/packages/shadcn/src/utils/transformers/transform-rsc.ts
@@ -1,6 +1,8 @@
 import { Transformer } from "@/src/utils/transformers"
 import { SyntaxKind } from "ts-morph"
 
+const directiveRegex = /^["']use client["']$/g
+
 export const transformRsc: Transformer = async ({ sourceFile, config }) => {
   if (config.rsc) {
     return sourceFile
@@ -8,7 +10,7 @@ export const transformRsc: Transformer = async ({ sourceFile, config }) => {
 
   // Remove "use client" from the top of the file.
   const first = sourceFile.getFirstChildByKind(SyntaxKind.ExpressionStatement)
-  if (first?.getText() === `"use client"`) {
+  if (first && directiveRegex.test(first.getText())) {
     first.remove()
   }
 
diff --git a/packages/shadcn/src/utils/transformers/transform-tw-prefix.ts b/packages/shadcn/src/utils/transformers/transform-tw-prefix.ts
index 22559abf2b1..897ddae4562 100644
--- a/packages/shadcn/src/utils/transformers/transform-tw-prefix.ts
+++ b/packages/shadcn/src/utils/transformers/transform-tw-prefix.ts
@@ -1,6 +1,10 @@
 import { Transformer } from "@/src/utils/transformers"
 import { SyntaxKind } from "ts-morph"
 
+import {
+  TailwindVersion,
+  getProjectTailwindVersionFromConfig,
+} from "../get-project-info"
 import { splitClassName } from "./transform-css-vars"
 
 export const transformTwPrefixes: Transformer = async ({
@@ -10,6 +14,7 @@ export const transformTwPrefixes: Transformer = async ({
   if (!config.tailwind?.prefix) {
     return sourceFile
   }
+  const tailwindVersion = await getProjectTailwindVersionFromConfig(config)
 
   // Find the cva function calls.
   sourceFile
@@ -23,7 +28,8 @@ export const transformTwPrefixes: Transformer = async ({
           defaultClassNames.replaceWithText(
             `"${applyPrefix(
               defaultClassNames.getText()?.replace(/"|'/g, ""),
-              config.tailwind.prefix
+              config.tailwind.prefix,
+              tailwindVersion
             )}"`
           )
         }
@@ -47,7 +53,8 @@ export const transformTwPrefixes: Transformer = async ({
                   classNames?.replaceWithText(
                     `"${applyPrefix(
                       classNames.getText()?.replace(/"|'/g, ""),
-                      config.tailwind.prefix
+                      config.tailwind.prefix,
+                      tailwindVersion
                     )}"`
                   )
                 }
@@ -58,7 +65,7 @@ export const transformTwPrefixes: Transformer = async ({
 
   // Find all jsx attributes with the name className.
   sourceFile.getDescendantsOfKind(SyntaxKind.JsxAttribute).forEach((node) => {
-    if (node.getName() === "className") {
+    if (node.getNameNode().getText() === "className") {
       // className="..."
       if (node.getInitializer()?.isKind(SyntaxKind.StringLiteral)) {
         const value = node.getInitializer()
@@ -66,7 +73,8 @@ export const transformTwPrefixes: Transformer = async ({
           value.replaceWithText(
             `"${applyPrefix(
               value.getText()?.replace(/"|'/g, ""),
-              config.tailwind.prefix
+              config.tailwind.prefix,
+              tailwindVersion
             )}"`
           )
         }
@@ -92,7 +100,8 @@ export const transformTwPrefixes: Transformer = async ({
                   node.replaceWithText(
                     `"${applyPrefix(
                       node.getText()?.replace(/"|'/g, ""),
-                      config.tailwind.prefix
+                      config.tailwind.prefix,
+                      tailwindVersion
                     )}"`
                   )
                 })
@@ -102,7 +111,8 @@ export const transformTwPrefixes: Transformer = async ({
               node.replaceWithText(
                 `"${applyPrefix(
                   node.getText()?.replace(/"|'/g, ""),
-                  config.tailwind.prefix
+                  config.tailwind.prefix,
+                  tailwindVersion
                 )}"`
               )
             }
@@ -112,7 +122,7 @@ export const transformTwPrefixes: Transformer = async ({
     }
 
     // classNames={...}
-    if (node.getName() === "classNames") {
+    if (node.getNameNode().getText() === "classNames") {
       if (node.getInitializer()?.isKind(SyntaxKind.JsxExpression)) {
         node
           .getDescendantsOfKind(SyntaxKind.PropertyAssignment)
@@ -131,7 +141,8 @@ export const transformTwPrefixes: Transformer = async ({
                         node.replaceWithText(
                           `"${applyPrefix(
                             node.getText()?.replace(/"|'/g, ""),
-                            config.tailwind.prefix
+                            config.tailwind.prefix,
+                            tailwindVersion
                           )}"`
                         )
                       })
@@ -141,7 +152,8 @@ export const transformTwPrefixes: Transformer = async ({
                     arg.replaceWithText(
                       `"${applyPrefix(
                         arg.getText()?.replace(/"|'/g, ""),
-                        config.tailwind.prefix
+                        config.tailwind.prefix,
+                        tailwindVersion
                       )}"`
                     )
                   }
@@ -150,13 +162,14 @@ export const transformTwPrefixes: Transformer = async ({
             }
 
             if (node.getInitializer()?.isKind(SyntaxKind.StringLiteral)) {
-              if (node.getName() !== "variant") {
+              if (node.getNameNode().getText() !== "variant") {
                 const classNames = node.getInitializer()
                 if (classNames) {
                   classNames.replaceWithText(
                     `"${applyPrefix(
                       classNames.getText()?.replace(/"|'/g, ""),
-                      config.tailwind.prefix
+                      config.tailwind.prefix,
+                      tailwindVersion
                     )}"`
                   )
                 }
@@ -170,30 +183,49 @@ export const transformTwPrefixes: Transformer = async ({
   return sourceFile
 }
 
-export function applyPrefix(input: string, prefix: string = "") {
-  const classNames = input.split(" ")
-  const prefixed: string[] = []
-  for (let className of classNames) {
-    const [variant, value, modifier] = splitClassName(className)
-    if (variant) {
-      modifier
-        ? prefixed.push(`${variant}:${prefix}${value}/${modifier}`)
-        : prefixed.push(`${variant}:${prefix}${value}`)
-    } else {
-      modifier
-        ? prefixed.push(`${prefix}${value}/${modifier}`)
-        : prefixed.push(`${prefix}${value}`)
-    }
+export function applyPrefix(
+  input: string,
+  prefix: string = "",
+  tailwindVersion: TailwindVersion
+) {
+  if (tailwindVersion === "v3") {
+    return input
+      .split(" ")
+      .map((className) => {
+        const [variant, value, modifier] = splitClassName(className)
+        if (variant) {
+          return modifier
+            ? `${variant}:${prefix}${value}/${modifier}`
+            : `${variant}:${prefix}${value}`
+        } else {
+          return modifier
+            ? `${prefix}${value}/${modifier}`
+            : `${prefix}${value}`
+        }
+      })
+      .join(" ")
   }
-  return prefixed.join(" ")
+
+  return input
+    .split(" ")
+    .map((className) =>
+      className.indexOf(`${prefix}:`) === 0
+        ? className
+        : `${prefix}:${className.trim()}`
+    )
+    .join(" ")
 }
 
-export function applyPrefixesCss(css: string, prefix: string) {
+export function applyPrefixesCss(
+  css: string,
+  prefix: string,
+  tailwindVersion: TailwindVersion
+) {
   const lines = css.split("\n")
   for (let line of lines) {
     if (line.includes("@apply")) {
       const originalTWCls = line.replace("@apply", "").trim()
-      const prefixedTwCls = applyPrefix(originalTWCls, prefix)
+      const prefixedTwCls = applyPrefix(originalTWCls, prefix, tailwindVersion)
       css = css.replace(originalTWCls, prefixedTwCls)
     }
   }
diff --git a/packages/shadcn/src/utils/update-app-index.ts b/packages/shadcn/src/utils/update-app-index.ts
index c1adfdc0a9f..6c5c04bb4cd 100644
--- a/packages/shadcn/src/utils/update-app-index.ts
+++ b/packages/shadcn/src/utils/update-app-index.ts
@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
+import { getRegistryItems } from "@/src/registry/api"
 import { Config } from "@/src/utils/get-config"
-import { getRegistryItem } from "@/src/utils/registry"
 
 export async function updateAppIndex(component: string, config: Config) {
   const indexPath = path.join(config.resolvedPaths.cwd, "app/page.tsx")
@@ -10,7 +10,7 @@ export async function updateAppIndex(component: string, config: Config) {
     return
   }
 
-  const registryItem = await getRegistryItem(component, config.style)
+  const [registryItem] = await getRegistryItems([component], { config })
   if (
     !registryItem?.meta?.importSpecifier ||
     !registryItem?.meta?.moduleSpecifier
diff --git a/packages/shadcn/src/utils/updaters/update-css-vars.ts b/packages/shadcn/src/utils/updaters/update-css-vars.ts
index e4272b67c1b..9b9a55ccbc2 100644
--- a/packages/shadcn/src/utils/updaters/update-css-vars.ts
+++ b/packages/shadcn/src/utils/updaters/update-css-vars.ts
@@ -1,8 +1,13 @@
 import { promises as fs } from "fs"
 import path from "path"
+import {
+  registryItemCssVarsSchema,
+  registryItemTailwindSchema,
+} from "@/src/schema"
 import { Config } from "@/src/utils/get-config"
+import { getPackageInfo } from "@/src/utils/get-package-info"
+import { TailwindVersion } from "@/src/utils/get-project-info"
 import { highlighter } from "@/src/utils/highlighter"
-import { registryItemCssVarsSchema } from "@/src/utils/registry/schema"
 import { spinner } from "@/src/utils/spinner"
 import postcss from "postcss"
 import AtRule from "postcss/lib/at-rule"
@@ -15,20 +20,23 @@ export async function updateCssVars(
   config: Config,
   options: {
     cleanupDefaultNextStyles?: boolean
+    overwriteCssVars?: boolean
+    initIndex?: boolean
     silent?: boolean
+    tailwindVersion?: TailwindVersion
+    tailwindConfig?: z.infer<typeof registryItemTailwindSchema>["config"]
   }
 ) {
-  if (
-    !cssVars ||
-    !Object.keys(cssVars).length ||
-    !config.resolvedPaths.tailwindCss
-  ) {
+  if (!config.resolvedPaths.tailwindCss || !Object.keys(cssVars ?? {}).length) {
     return
   }
 
   options = {
     cleanupDefaultNextStyles: false,
     silent: false,
+    tailwindVersion: "v3",
+    overwriteCssVars: false,
+    initIndex: true,
     ...options,
   }
   const cssFilepath = config.resolvedPaths.tailwindCss
@@ -37,14 +45,18 @@ export async function updateCssVars(
     cssFilepath
   )
   const cssVarsSpinner = spinner(
-    `Updating ${highlighter.info(cssFilepathRelative)}`,
+    `Updating CSS variables in ${highlighter.info(cssFilepathRelative)}`,
     {
       silent: options.silent,
     }
   ).start()
   const raw = await fs.readFile(cssFilepath, "utf8")
-  let output = await transformCssVars(raw, cssVars, config, {
+  let output = await transformCssVars(raw, cssVars ?? {}, config, {
     cleanupDefaultNextStyles: options.cleanupDefaultNextStyles,
+    tailwindVersion: options.tailwindVersion,
+    tailwindConfig: options.tailwindConfig,
+    overwriteCssVars: options.overwriteCssVars,
+    initIndex: options.initIndex,
   })
   await fs.writeFile(cssFilepath, output, "utf8")
   cssVarsSpinner.succeed()
@@ -56,36 +68,105 @@ export async function transformCssVars(
   config: Config,
   options: {
     cleanupDefaultNextStyles?: boolean
+    tailwindVersion?: TailwindVersion
+    tailwindConfig?: z.infer<typeof registryItemTailwindSchema>["config"]
+    overwriteCssVars?: boolean
+    initIndex?: boolean
+  } = {
+    cleanupDefaultNextStyles: false,
+    tailwindVersion: "v3",
+    tailwindConfig: undefined,
+    overwriteCssVars: false,
+    initIndex: true,
   }
 ) {
   options = {
     cleanupDefaultNextStyles: false,
+    tailwindVersion: "v3",
+    tailwindConfig: undefined,
+    overwriteCssVars: false,
+    initIndex: true,
     ...options,
   }
 
-  const plugins = [updateCssVarsPlugin(cssVars)]
+  let plugins = [updateCssVarsPlugin(cssVars)]
+
   if (options.cleanupDefaultNextStyles) {
     plugins.push(cleanupDefaultNextStylesPlugin())
   }
 
-  // Only add the base layer plugin if we're using css variables.
-  if (config.tailwind.cssVariables) {
-    plugins.push(updateBaseLayerPlugin())
+  if (options.tailwindVersion === "v4") {
+    plugins = []
+
+    // Only add tw-animate-css if project does not have tailwindcss-animate
+    if (config.resolvedPaths?.cwd) {
+      const packageInfo = getPackageInfo(config.resolvedPaths.cwd)
+      if (
+        !packageInfo?.dependencies?.["tailwindcss-animate"] &&
+        !packageInfo?.devDependencies?.["tailwindcss-animate"] &&
+        options.initIndex
+      ) {
+        plugins.push(addCustomImport({ params: "tw-animate-css" }))
+      }
+    }
+
+    plugins.push(addCustomVariant({ params: "dark (&:is(.dark *))" }))
+
+    if (options.cleanupDefaultNextStyles) {
+      plugins.push(cleanupDefaultNextStylesPlugin())
+    }
+
+    plugins.push(
+      updateCssVarsPluginV4(cssVars, {
+        overwriteCssVars: options.overwriteCssVars,
+      })
+    )
+    plugins.push(updateThemePlugin(cssVars))
+
+    if (options.tailwindConfig) {
+      plugins.push(updateTailwindConfigPlugin(options.tailwindConfig))
+      plugins.push(updateTailwindConfigAnimationPlugin(options.tailwindConfig))
+      plugins.push(updateTailwindConfigKeyframesPlugin(options.tailwindConfig))
+    }
+  }
+
+  if (config.tailwind.cssVariables && options.initIndex) {
+    plugins.push(
+      updateBaseLayerPlugin({ tailwindVersion: options.tailwindVersion })
+    )
   }
 
   const result = await postcss(plugins).process(input, {
     from: undefined,
   })
 
-  return result.css
+  let output = result.css
+
+  output = output.replace(/\/\* ---break--- \*\//g, "")
+
+  if (options.tailwindVersion === "v4") {
+    output = output.replace(/(\n\s*\n)+/g, "\n\n")
+  }
+
+  return output
 }
 
-function updateBaseLayerPlugin() {
+function updateBaseLayerPlugin({
+  tailwindVersion,
+}: {
+  tailwindVersion?: TailwindVersion
+}) {
   return {
     postcssPlugin: "update-base-layer",
     Once(root: Root) {
       const requiredRules = [
-        { selector: "*", apply: "border-border" },
+        {
+          selector: "*",
+          apply:
+            tailwindVersion === "v4"
+              ? "border-border outline-ring/50"
+              : "border-border",
+        },
         { selector: "body", apply: "bg-background text-foreground" },
       ]
 
@@ -116,6 +197,7 @@ function updateBaseLayerPlugin() {
           raws: { semicolon: true, between: " ", before: "\n" },
         })
         root.append(baseLayer)
+        root.insertBefore(baseLayer, postcss.comment({ text: "---break---" }))
       }
 
       requiredRules.forEach(({ selector, apply }) => {
@@ -169,6 +251,7 @@ function updateCssVarsPlugin(
           },
         })
         root.append(baseLayer)
+        root.insertBefore(baseLayer, postcss.comment({ text: "---break---" }))
       }
 
       if (baseLayer !== undefined) {
@@ -237,6 +320,16 @@ function cleanupDefaultNextStylesPlugin() {
           })
           ?.remove()
 
+        // Remove font-family: Arial, Helvetica, sans-serif;
+        bodyRule.nodes
+          .find(
+            (node): node is postcss.Declaration =>
+              node.type === "decl" &&
+              node.prop === "font-family" &&
+              node.value === "Arial, Helvetica, sans-serif"
+          )
+          ?.remove()
+
         // If the body rule is empty, remove it.
         if (bodyRule.nodes.length === 0) {
           bodyRule.remove()
@@ -296,3 +389,514 @@ function addOrUpdateVars(
     existingDecl ? existingDecl.replaceWith(newDecl) : ruleNode?.append(newDecl)
   })
 }
+
+function updateCssVarsPluginV4(
+  cssVars: z.infer<typeof registryItemCssVarsSchema>,
+  options: {
+    overwriteCssVars?: boolean
+  }
+) {
+  return {
+    postcssPlugin: "update-css-vars-v4",
+    Once(root: Root) {
+      Object.entries(cssVars).forEach(([key, vars]) => {
+        let selector = key === "light" ? ":root" : `.${key}`
+
+        if (key === "theme") {
+          selector = "@theme"
+          const themeNode = upsertThemeNode(root)
+          Object.entries(vars).forEach(([key, value]) => {
+            const prop = `--${key.replace(/^--/, "")}`
+            const newDecl = postcss.decl({
+              prop,
+              value,
+              raws: { semicolon: true },
+            })
+
+            const existingDecl = themeNode?.nodes?.find(
+              (node): node is postcss.Declaration =>
+                node.type === "decl" && node.prop === prop
+            )
+
+            // Only overwrite if overwriteCssVars is true
+            // i.e for registry:theme and registry:style
+            // We do not want new components to overwrite existing vars.
+            // Keep user defined vars.
+            if (options.overwriteCssVars) {
+              if (existingDecl) {
+                existingDecl.replaceWith(newDecl)
+              } else {
+                themeNode?.append(newDecl)
+              }
+            } else {
+              if (!existingDecl) {
+                themeNode?.append(newDecl)
+              }
+            }
+          })
+          return
+        }
+
+        let ruleNode = root.nodes?.find(
+          (node): node is Rule =>
+            node.type === "rule" && node.selector === selector
+        )
+
+        if (!ruleNode && Object.keys(vars).length > 0) {
+          ruleNode = postcss.rule({
+            selector,
+            nodes: [],
+            raws: { semicolon: true, between: " ", before: "\n" },
+          })
+          root.append(ruleNode)
+          root.insertBefore(ruleNode, postcss.comment({ text: "---break---" }))
+        }
+
+        Object.entries(vars).forEach(([key, value]) => {
+          let prop = `--${key.replace(/^--/, "")}`
+
+          // Special case for sidebar-background.
+          if (prop === "--sidebar-background") {
+            prop = "--sidebar"
+          }
+
+          if (isLocalHSLValue(value)) {
+            value = `hsl(${value})`
+          }
+
+          const newDecl = postcss.decl({
+            prop,
+            value,
+            raws: { semicolon: true },
+          })
+          const existingDecl = ruleNode?.nodes.find(
+            (node): node is postcss.Declaration =>
+              node.type === "decl" && node.prop === prop
+          )
+
+          // Only overwrite if overwriteCssVars is true
+          // i.e for registry:theme and registry:style
+          // We do not want new components to overwrite existing vars.
+          // Keep user defined vars.
+          if (options.overwriteCssVars) {
+            if (existingDecl) {
+              existingDecl.replaceWith(newDecl)
+            } else {
+              ruleNode?.append(newDecl)
+            }
+          } else {
+            if (!existingDecl) {
+              ruleNode?.append(newDecl)
+            }
+          }
+        })
+      })
+    },
+  }
+}
+
+function updateThemePlugin(cssVars: z.infer<typeof registryItemCssVarsSchema>) {
+  return {
+    postcssPlugin: "update-theme",
+    Once(root: Root) {
+      // Find unique color names from light and dark.
+      const variables = Array.from(
+        new Set(
+          Object.keys(cssVars).flatMap((key) =>
+            Object.keys(cssVars[key as keyof typeof cssVars] || {})
+          )
+        )
+      )
+
+      if (!variables.length) {
+        return
+      }
+
+      const themeNode = upsertThemeNode(root)
+
+      const themeVarNodes = themeNode.nodes?.filter(
+        (node): node is postcss.Declaration =>
+          node.type === "decl" && node.prop.startsWith("--")
+      )
+
+      for (const variable of variables) {
+        const value = Object.values(cssVars).find((vars) => vars[variable])?.[
+          variable
+        ]
+
+        if (!value) {
+          continue
+        }
+
+        if (variable === "radius") {
+          const radiusVariables = {
+            sm: "calc(var(--radius) - 4px)",
+            md: "calc(var(--radius) - 2px)",
+            lg: "var(--radius)",
+            xl: "calc(var(--radius) + 4px)",
+          }
+          for (const [key, value] of Object.entries(radiusVariables)) {
+            const cssVarNode = postcss.decl({
+              prop: `--radius-${key}`,
+              value,
+              raws: { semicolon: true },
+            })
+            if (
+              themeNode?.nodes?.find(
+                (node): node is postcss.Declaration =>
+                  node.type === "decl" && node.prop === cssVarNode.prop
+              )
+            ) {
+              continue
+            }
+            themeNode?.append(cssVarNode)
+          }
+          continue
+        }
+
+        let prop =
+          isLocalHSLValue(value) || isColorValue(value)
+            ? `--color-${variable.replace(/^--/, "")}`
+            : `--${variable.replace(/^--/, "")}`
+        if (prop === "--color-sidebar-background") {
+          prop = "--color-sidebar"
+        }
+
+        let propValue = `var(--${variable})`
+        if (prop === "--color-sidebar") {
+          propValue = "var(--sidebar)"
+        }
+
+        const cssVarNode = postcss.decl({
+          prop,
+          value: propValue,
+          raws: { semicolon: true },
+        })
+        const existingDecl = themeNode?.nodes?.find(
+          (node): node is postcss.Declaration =>
+            node.type === "decl" && node.prop === cssVarNode.prop
+        )
+        if (!existingDecl) {
+          if (themeVarNodes?.length) {
+            themeNode?.insertAfter(
+              themeVarNodes[themeVarNodes.length - 1],
+              cssVarNode
+            )
+          } else {
+            themeNode?.append(cssVarNode)
+          }
+        }
+      }
+    },
+  }
+}
+
+function upsertThemeNode(root: Root): AtRule {
+  let themeNode = root.nodes.find(
+    (node): node is AtRule =>
+      node.type === "atrule" &&
+      node.name === "theme" &&
+      node.params === "inline"
+  )
+
+  if (!themeNode) {
+    themeNode = postcss.atRule({
+      name: "theme",
+      params: "inline",
+      nodes: [],
+      raws: { semicolon: true, between: " ", before: "\n" },
+    })
+    root.append(themeNode)
+    root.insertBefore(themeNode, postcss.comment({ text: "---break---" }))
+  }
+
+  return themeNode
+}
+
+function addCustomVariant({ params }: { params: string }) {
+  return {
+    postcssPlugin: "add-custom-variant",
+    Once(root: Root) {
+      const customVariant = root.nodes.find(
+        (node): node is AtRule =>
+          node.type === "atrule" && node.name === "custom-variant"
+      )
+
+      if (!customVariant) {
+        // Find all import nodes
+        const importNodes = root.nodes.filter(
+          (node): node is AtRule =>
+            node.type === "atrule" && node.name === "import"
+        )
+
+        const variantNode = postcss.atRule({
+          name: "custom-variant",
+          params,
+          raws: { semicolon: true, before: "\n" },
+        })
+
+        if (importNodes.length > 0) {
+          // Insert after the last import
+          const lastImport = importNodes[importNodes.length - 1]
+          root.insertAfter(lastImport, variantNode)
+        } else {
+          // If no imports, insert after the first node
+          root.insertAfter(root.nodes[0], variantNode)
+        }
+
+        root.insertBefore(variantNode, postcss.comment({ text: "---break---" }))
+      }
+    },
+  }
+}
+
+function addCustomImport({ params }: { params: string }) {
+  return {
+    postcssPlugin: "add-custom-import",
+    Once(root: Root) {
+      const importNodes = root.nodes.filter(
+        (node): node is AtRule =>
+          node.type === "atrule" && node.name === "import"
+      )
+
+      // Find custom variant node (to ensure we insert before it)
+      const customVariantNode = root.nodes.find(
+        (node): node is AtRule =>
+          node.type === "atrule" && node.name === "custom-variant"
+      )
+
+      // Check if our specific import already exists
+      const hasImport = importNodes.some(
+        (node) => node.params.replace(/["']/g, "") === params
+      )
+
+      if (!hasImport) {
+        const importNode = postcss.atRule({
+          name: "import",
+          params: `"${params}"`,
+          raws: { semicolon: true, before: "\n" },
+        })
+
+        if (importNodes.length > 0) {
+          // If there are existing imports, add after the last import
+          const lastImport = importNodes[importNodes.length - 1]
+          root.insertAfter(lastImport, importNode)
+        } else if (customVariantNode) {
+          // If no imports but has custom-variant, insert before it
+          root.insertBefore(customVariantNode, importNode)
+          root.insertBefore(
+            customVariantNode,
+            postcss.comment({ text: "---break---" })
+          )
+        } else {
+          // If no imports and no custom-variant, insert at the start
+          root.prepend(importNode)
+          root.insertAfter(importNode, postcss.comment({ text: "---break---" }))
+        }
+      }
+    },
+  }
+}
+
+function updateTailwindConfigPlugin(
+  tailwindConfig: z.infer<typeof registryItemTailwindSchema>["config"]
+) {
+  return {
+    postcssPlugin: "update-tailwind-config",
+    Once(root: Root) {
+      if (!tailwindConfig?.plugins) {
+        return
+      }
+
+      const quoteType = getQuoteType(root)
+      const quote = quoteType === "single" ? "'" : '"'
+
+      const pluginNodes = root.nodes.filter(
+        (node): node is AtRule =>
+          node.type === "atrule" && node.name === "plugin"
+      )
+
+      const lastPluginNode =
+        pluginNodes[pluginNodes.length - 1] || root.nodes[0]
+
+      for (const plugin of tailwindConfig.plugins) {
+        const pluginName = plugin.replace(/^require\(["']|["']\)$/g, "")
+
+        // Check if the plugin is already present.
+        if (
+          pluginNodes.some((node) => {
+            return node.params.replace(/["']/g, "") === pluginName
+          })
+        ) {
+          continue
+        }
+
+        const pluginNode = postcss.atRule({
+          name: "plugin",
+          params: `${quote}${pluginName}${quote}`,
+          raws: { semicolon: true, before: "\n" },
+        })
+        root.insertAfter(lastPluginNode, pluginNode)
+        root.insertBefore(pluginNode, postcss.comment({ text: "---break---" }))
+      }
+    },
+  }
+}
+
+function updateTailwindConfigKeyframesPlugin(
+  tailwindConfig: z.infer<typeof registryItemTailwindSchema>["config"]
+) {
+  return {
+    postcssPlugin: "update-tailwind-config-keyframes",
+    Once(root: Root) {
+      if (!tailwindConfig?.theme?.extend?.keyframes) {
+        return
+      }
+
+      const themeNode = upsertThemeNode(root)
+      const existingKeyFrameNodes = themeNode.nodes?.filter(
+        (node): node is AtRule =>
+          node.type === "atrule" && node.name === "keyframes"
+      )
+
+      const keyframeValueSchema = z.record(
+        z.string(),
+        z.record(z.string(), z.string())
+      )
+
+      for (const [keyframeName, keyframeValue] of Object.entries(
+        tailwindConfig.theme.extend.keyframes
+      )) {
+        if (typeof keyframeName !== "string") {
+          continue
+        }
+
+        const parsedKeyframeValue = keyframeValueSchema.safeParse(keyframeValue)
+
+        if (!parsedKeyframeValue.success) {
+          continue
+        }
+
+        if (
+          existingKeyFrameNodes?.find(
+            (node): node is postcss.AtRule =>
+              node.type === "atrule" &&
+              node.name === "keyframes" &&
+              node.params === keyframeName
+          )
+        ) {
+          continue
+        }
+
+        const keyframeNode = postcss.atRule({
+          name: "keyframes",
+          params: keyframeName,
+          nodes: [],
+          raws: { semicolon: true, between: " ", before: "\n  " },
+        })
+
+        for (const [key, values] of Object.entries(parsedKeyframeValue.data)) {
+          const rule = postcss.rule({
+            selector: key,
+            nodes: Object.entries(values).map(([key, value]) =>
+              postcss.decl({
+                prop: key,
+                value,
+                raws: { semicolon: true, before: "\n      ", between: ": " },
+              })
+            ),
+            raws: { semicolon: true, between: " ", before: "\n    " },
+          })
+          keyframeNode.append(rule)
+        }
+
+        themeNode.append(keyframeNode)
+        themeNode.insertBefore(
+          keyframeNode,
+          postcss.comment({ text: "---break---" })
+        )
+      }
+    },
+  }
+}
+
+function updateTailwindConfigAnimationPlugin(
+  tailwindConfig: z.infer<typeof registryItemTailwindSchema>["config"]
+) {
+  return {
+    postcssPlugin: "update-tailwind-config-animation",
+    Once(root: Root) {
+      if (!tailwindConfig?.theme?.extend?.animation) {
+        return
+      }
+
+      const themeNode = upsertThemeNode(root)
+      const existingAnimationNodes = themeNode.nodes?.filter(
+        (node): node is postcss.Declaration =>
+          node.type === "decl" && node.prop.startsWith("--animate-")
+      )
+
+      const parsedAnimationValue = z
+        .record(z.string(), z.string())
+        .safeParse(tailwindConfig.theme.extend.animation)
+      if (!parsedAnimationValue.success) {
+        return
+      }
+
+      for (const [key, value] of Object.entries(parsedAnimationValue.data)) {
+        const prop = `--animate-${key}`
+        if (
+          existingAnimationNodes?.find(
+            (node): node is postcss.Declaration => node.prop === prop
+          )
+        ) {
+          continue
+        }
+
+        const animationNode = postcss.decl({
+          prop,
+          value,
+          raws: { semicolon: true, between: ": ", before: "\n  " },
+        })
+        themeNode.append(animationNode)
+      }
+    },
+  }
+}
+
+function getQuoteType(root: Root): "single" | "double" {
+  const firstNode = root.nodes[0]
+  const raw = firstNode.toString()
+
+  if (raw.includes("'")) {
+    return "single"
+  }
+  return "double"
+}
+
+export function isLocalHSLValue(value: string) {
+  if (
+    value.startsWith("hsl") ||
+    value.startsWith("rgb") ||
+    value.startsWith("#") ||
+    value.startsWith("oklch")
+  ) {
+    return false
+  }
+
+  const chunks = value.split(" ")
+
+  return (
+    chunks.length === 3 &&
+    chunks.slice(1, 3).every((chunk) => chunk.includes("%"))
+  )
+}
+
+export function isColorValue(value: string) {
+  return (
+    value.startsWith("hsl") ||
+    value.startsWith("rgb") ||
+    value.startsWith("#") ||
+    value.startsWith("oklch")
+  )
+}
diff --git a/packages/shadcn/src/utils/updaters/update-css.ts b/packages/shadcn/src/utils/updaters/update-css.ts
new file mode 100644
index 00000000000..a85b4066b87
--- /dev/null
+++ b/packages/shadcn/src/utils/updaters/update-css.ts
@@ -0,0 +1,503 @@
+import { promises as fs } from "fs"
+import path from "path"
+import { registryItemCssSchema } from "@/src/schema"
+import { Config } from "@/src/utils/get-config"
+import { highlighter } from "@/src/utils/highlighter"
+import { spinner } from "@/src/utils/spinner"
+import postcss from "postcss"
+import AtRule from "postcss/lib/at-rule"
+import Declaration from "postcss/lib/declaration"
+import Root from "postcss/lib/root"
+import Rule from "postcss/lib/rule"
+import { z } from "zod"
+
+export async function updateCss(
+  css: z.infer<typeof registryItemCssSchema> | undefined,
+  config: Config,
+  options: {
+    silent?: boolean
+  }
+) {
+  if (
+    !config.resolvedPaths.tailwindCss ||
+    !css ||
+    Object.keys(css).length === 0
+  ) {
+    return
+  }
+
+  options = {
+    silent: false,
+    ...options,
+  }
+
+  const cssFilepath = config.resolvedPaths.tailwindCss
+  const cssFilepathRelative = path.relative(
+    config.resolvedPaths.cwd,
+    cssFilepath
+  )
+  const cssSpinner = spinner(
+    `Updating ${highlighter.info(cssFilepathRelative)}`,
+    {
+      silent: options.silent,
+    }
+  ).start()
+
+  const raw = await fs.readFile(cssFilepath, "utf8")
+  let output = await transformCss(raw, css)
+  await fs.writeFile(cssFilepath, output, "utf8")
+  cssSpinner.succeed()
+}
+
+export async function transformCss(
+  input: string,
+  css: z.infer<typeof registryItemCssSchema>
+) {
+  const plugins = [updateCssPlugin(css)]
+
+  const result = await postcss(plugins).process(input, {
+    from: undefined,
+  })
+
+  let output = result.css
+
+  // PostCSS doesn't add semicolons to at-rules without bodies when they're the last node.
+  // We need to manually ensure they have semicolons.
+  const root = result.root
+  if (root.nodes && root.nodes.length > 0) {
+    const lastNode = root.nodes[root.nodes.length - 1]
+    if (
+      lastNode.type === "atrule" &&
+      !lastNode.nodes &&
+      !output.trimEnd().endsWith(";")
+    ) {
+      output = output.trimEnd() + ";"
+    }
+  }
+
+  output = output.replace(/\/\* ---break--- \*\//g, "")
+  output = output.replace(/(\n\s*\n)+/g, "\n\n")
+  output = output.trimEnd()
+
+  return output
+}
+
+function updateCssPlugin(css: z.infer<typeof registryItemCssSchema>) {
+  return {
+    postcssPlugin: "update-css",
+    Once(root: Root) {
+      for (const [selector, properties] of Object.entries(css)) {
+        if (selector.startsWith("@")) {
+          // Handle at-rules (@layer, @utility, etc.)
+          const atRuleMatch = selector.match(/@([a-zA-Z-]+)\s*(.*)/)
+          if (!atRuleMatch) continue
+
+          const [, name, params] = atRuleMatch
+
+          // Special handling for imports - place them at the top.
+          if (name === "import") {
+            // Check if this import already exists.
+            const existingImport = root.nodes?.find(
+              (node): node is AtRule =>
+                node.type === "atrule" &&
+                node.name === "import" &&
+                node.params === params
+            )
+
+            if (!existingImport) {
+              const importRule = postcss.atRule({
+                name: "import",
+                params,
+                raws: { semicolon: true },
+              })
+
+              // Find the last import to insert after, or insert at beginning.
+              const importNodes = root.nodes?.filter(
+                (node): node is AtRule =>
+                  node.type === "atrule" && node.name === "import"
+              )
+
+              if (importNodes && importNodes.length > 0) {
+                // Insert after the last existing import.
+                const lastImport = importNodes[importNodes.length - 1]
+                importRule.raws.before = "\n"
+                root.insertAfter(lastImport, importRule)
+              } else {
+                // No imports exist, insert at the very beginning.
+                // Check if the file is empty.
+                if (!root.nodes || root.nodes.length === 0) {
+                  importRule.raws.before = ""
+                } else {
+                  importRule.raws.before = ""
+                }
+                root.prepend(importRule)
+              }
+            }
+          }
+          // Special handling for plugins - place them after imports.
+          else if (name === "plugin") {
+            // Ensure plugin name is quoted if not already.
+            let quotedParams = params
+            if (params && !params.startsWith('"') && !params.startsWith("'")) {
+              quotedParams = `"${params}"`
+            }
+
+            // Normalize params for comparison (remove quotes).
+            const normalizeParams = (p: string) => {
+              if (p.startsWith('"') && p.endsWith('"')) {
+                return p.slice(1, -1)
+              }
+              if (p.startsWith("'") && p.endsWith("'")) {
+                return p.slice(1, -1)
+              }
+              return p
+            }
+
+            // Find existing plugin with same normalized params.
+            const existingPlugin = root.nodes?.find((node): node is AtRule => {
+              if (node.type !== "atrule" || node.name !== "plugin") {
+                return false
+              }
+              return normalizeParams(node.params) === normalizeParams(params)
+            })
+
+            if (!existingPlugin) {
+              const pluginRule = postcss.atRule({
+                name: "plugin",
+                params: quotedParams,
+                raws: { semicolon: true, before: "\n" },
+              })
+
+              // Find the last import or plugin node to insert after
+              const importNodes = root.nodes?.filter(
+                (node): node is AtRule =>
+                  node.type === "atrule" && node.name === "import"
+              )
+
+              const pluginNodes = root.nodes?.filter(
+                (node): node is AtRule =>
+                  node.type === "atrule" && node.name === "plugin"
+              )
+
+              if (pluginNodes && pluginNodes.length > 0) {
+                // Insert after the last existing plugin
+                const lastPlugin = pluginNodes[pluginNodes.length - 1]
+                root.insertAfter(lastPlugin, pluginRule)
+              } else if (importNodes && importNodes.length > 0) {
+                // Insert after the last import if no plugins exist
+                const lastImport = importNodes[importNodes.length - 1]
+                root.insertAfter(lastImport, pluginRule)
+                // Add a break comment before the first plugin to create spacing
+                root.insertBefore(
+                  pluginRule,
+                  postcss.comment({ text: "---break---" })
+                )
+                // Add a break comment after the plugin for spacing from other content
+                root.insertAfter(
+                  pluginRule,
+                  postcss.comment({ text: "---break---" })
+                )
+              } else {
+                // If no imports or plugins, insert at the beginning
+                root.prepend(pluginRule)
+                // Add a break comment before the first plugin for spacing
+                root.insertBefore(
+                  pluginRule,
+                  postcss.comment({ text: "---break---" })
+                )
+                // Add a break comment after the plugin for spacing from other content
+                root.insertAfter(
+                  pluginRule,
+                  postcss.comment({ text: "---break---" })
+                )
+              }
+            }
+          }
+          // Check if this is any at-rule with no body (empty object).
+          else if (
+            typeof properties === "object" &&
+            Object.keys(properties).length === 0
+          ) {
+            // Handle any at-rule with no body (e.g., @apply, @tailwind, etc.).
+            const atRule = root.nodes?.find(
+              (node): node is AtRule =>
+                node.type === "atrule" &&
+                node.name === name &&
+                node.params === params
+            ) as AtRule | undefined
+
+            if (!atRule) {
+              const newAtRule = postcss.atRule({
+                name,
+                params,
+                raws: { semicolon: true },
+              })
+
+              root.append(newAtRule)
+              root.insertBefore(
+                newAtRule,
+                postcss.comment({ text: "---break---" })
+              )
+            }
+          }
+          // Special handling for keyframes - place them under @theme inline.
+          else if (name === "keyframes") {
+            let themeInline = root.nodes?.find(
+              (node): node is AtRule =>
+                node.type === "atrule" &&
+                node.name === "theme" &&
+                node.params === "inline"
+            ) as AtRule | undefined
+
+            if (!themeInline) {
+              themeInline = postcss.atRule({
+                name: "theme",
+                params: "inline",
+                raws: { semicolon: true, between: " ", before: "\n" },
+              })
+              root.append(themeInline)
+              root.insertBefore(
+                themeInline,
+                postcss.comment({ text: "---break---" })
+              )
+            }
+
+            const keyframesRule = postcss.atRule({
+              name: "keyframes",
+              params,
+              raws: { semicolon: true, between: " ", before: "\n  " },
+            })
+
+            themeInline.append(keyframesRule)
+
+            if (typeof properties === "object") {
+              for (const [step, stepProps] of Object.entries(properties)) {
+                processRule(keyframesRule, step, stepProps)
+              }
+            }
+          }
+          // Special handling for utility classes to preserve property values
+          else if (name === "utility") {
+            const utilityAtRule = root.nodes?.find(
+              (node): node is AtRule =>
+                node.type === "atrule" &&
+                node.name === name &&
+                node.params === params
+            ) as AtRule | undefined
+
+            if (!utilityAtRule) {
+              const atRule = postcss.atRule({
+                name,
+                params,
+                raws: { semicolon: true, between: " ", before: "\n" },
+              })
+
+              root.append(atRule)
+              root.insertBefore(
+                atRule,
+                postcss.comment({ text: "---break---" })
+              )
+
+              // Add declarations with their values preserved
+              if (typeof properties === "object") {
+                for (const [prop, value] of Object.entries(properties)) {
+                  if (typeof value === "string") {
+                    const decl = postcss.decl({
+                      prop,
+                      value: value,
+                      raws: { semicolon: true, before: "\n    " },
+                    })
+                    atRule.append(decl)
+                  } else if (typeof value === "object") {
+                    processRule(atRule, prop, value)
+                  }
+                }
+              }
+            } else {
+              // Update existing utility class
+              if (typeof properties === "object") {
+                for (const [prop, value] of Object.entries(properties)) {
+                  if (typeof value === "string") {
+                    const existingDecl = utilityAtRule.nodes?.find(
+                      (node): node is Declaration =>
+                        node.type === "decl" && node.prop === prop
+                    )
+
+                    const decl = postcss.decl({
+                      prop,
+                      value: value,
+                      raws: { semicolon: true, before: "\n    " },
+                    })
+
+                    existingDecl
+                      ? existingDecl.replaceWith(decl)
+                      : utilityAtRule.append(decl)
+                  } else if (typeof value === "object") {
+                    processRule(utilityAtRule, prop, value)
+                  }
+                }
+              }
+            }
+          } else {
+            // Handle other at-rules normally
+            processAtRule(root, name, params, properties)
+          }
+        } else {
+          // Handle regular CSS rules
+          processRule(root, selector, properties)
+        }
+      }
+    },
+  }
+}
+
+function processAtRule(
+  root: Root | AtRule,
+  name: string,
+  params: string,
+  properties: any
+) {
+  // Find or create the at-rule
+  let atRule = root.nodes?.find(
+    (node): node is AtRule =>
+      node.type === "atrule" && node.name === name && node.params === params
+  ) as AtRule | undefined
+
+  if (!atRule) {
+    atRule = postcss.atRule({
+      name,
+      params,
+      raws: { semicolon: true, between: " ", before: "\n" },
+    })
+    root.append(atRule)
+    root.insertBefore(atRule, postcss.comment({ text: "---break---" }))
+  }
+
+  // Process children of this at-rule
+  if (typeof properties === "object") {
+    for (const [childSelector, childProps] of Object.entries(properties)) {
+      if (childSelector.startsWith("@")) {
+        // Nested at-rule
+        const nestedMatch = childSelector.match(/@([a-zA-Z-]+)\s*(.*)/)
+        if (nestedMatch) {
+          const [, nestedName, nestedParams] = nestedMatch
+          processAtRule(atRule, nestedName, nestedParams, childProps)
+        }
+      } else {
+        // CSS rule within at-rule
+        processRule(atRule, childSelector, childProps)
+      }
+    }
+  } else if (typeof properties === "string") {
+    // Direct string content for the at-rule
+    try {
+      // Parse the CSS string with PostCSS
+      const parsed = postcss.parse(`.temp{${properties}}`)
+      const tempRule = parsed.first as Rule
+
+      if (tempRule && tempRule.nodes) {
+        // Create a rule for the at-rule if needed
+        const rule = postcss.rule({
+          selector: "temp",
+          raws: { semicolon: true, between: " ", before: "\n  " },
+        })
+
+        // Copy all declarations from the temp rule to our actual rule
+        tempRule.nodes.forEach((node) => {
+          if (node.type === "decl") {
+            const clone = node.clone()
+            clone.raws.before = "\n    "
+            rule.append(clone)
+          }
+        })
+
+        // Only add the rule if it has declarations
+        if (rule.nodes?.length) {
+          atRule.append(rule)
+        }
+      }
+    } catch (error) {
+      console.error("Error parsing at-rule content:", properties, error)
+      throw error
+    }
+  }
+}
+
+function processRule(parent: Root | AtRule, selector: string, properties: any) {
+  let rule = parent.nodes?.find(
+    (node): node is Rule => node.type === "rule" && node.selector === selector
+  ) as Rule | undefined
+
+  if (!rule) {
+    rule = postcss.rule({
+      selector,
+      raws: { semicolon: true, between: " ", before: "\n  " },
+    })
+    parent.append(rule)
+  }
+
+  if (typeof properties === "object") {
+    for (const [prop, value] of Object.entries(properties)) {
+      // Check if this is any at-rule with empty object (no body).
+      if (
+        prop.startsWith("@") &&
+        typeof value === "object" &&
+        value !== null &&
+        Object.keys(value).length === 0
+      ) {
+        // Parse the at-rule.
+        const atRuleMatch = prop.match(/@([a-zA-Z-]+)\s*(.*)/)
+        if (atRuleMatch) {
+          const [, atRuleName, atRuleParams] = atRuleMatch
+          const atRule = postcss.atRule({
+            name: atRuleName,
+            params: atRuleParams,
+            raws: { semicolon: true, before: "\n    " },
+          })
+          rule.append(atRule)
+        }
+      } else if (typeof value === "string") {
+        const decl = postcss.decl({
+          prop,
+          value: value,
+          raws: { semicolon: true, before: "\n    " },
+        })
+
+        // Replace existing property or add new one.
+        const existingDecl = rule.nodes?.find(
+          (node): node is Declaration =>
+            node.type === "decl" && node.prop === prop
+        )
+
+        existingDecl ? existingDecl.replaceWith(decl) : rule.append(decl)
+      } else if (typeof value === "object") {
+        // Nested selector (including & selectors).
+        const nestedSelector = prop.startsWith("&")
+          ? selector.replace(/^([^:]+)/, `$1${prop.substring(1)}`)
+          : prop // Use the original selector for other nested elements.
+        processRule(parent, nestedSelector, value)
+      }
+    }
+  } else if (typeof properties === "string") {
+    // Direct string content for the rule
+    try {
+      // Parse the CSS string with PostCSS
+      const parsed = postcss.parse(`.temp{${properties}}`)
+      const tempRule = parsed.first as Rule
+
+      if (tempRule && tempRule.nodes) {
+        // Copy all declarations from the temp rule to our actual rule
+        tempRule.nodes.forEach((node) => {
+          if (node.type === "decl") {
+            const clone = node.clone()
+            clone.raws.before = "\n    "
+            rule?.append(clone)
+          }
+        })
+      }
+    } catch (error) {
+      console.error("Error parsing rule content:", selector, properties, error)
+      throw error
+    }
+  }
+}
diff --git a/packages/shadcn/src/utils/updaters/update-dependencies.ts b/packages/shadcn/src/utils/updaters/update-dependencies.ts
index 263365f0ba7..a73fd72fed7 100644
--- a/packages/shadcn/src/utils/updaters/update-dependencies.ts
+++ b/packages/shadcn/src/utils/updaters/update-dependencies.ts
@@ -1,18 +1,24 @@
+import { RegistryItem } from "@/src/schema"
 import { Config } from "@/src/utils/get-config"
+import { getPackageInfo } from "@/src/utils/get-package-info"
 import { getPackageManager } from "@/src/utils/get-package-manager"
-import { RegistryItem } from "@/src/utils/registry/schema"
+import { logger } from "@/src/utils/logger"
 import { spinner } from "@/src/utils/spinner"
 import { execa } from "execa"
+import prompts from "prompts"
 
 export async function updateDependencies(
   dependencies: RegistryItem["dependencies"],
+  devDependencies: RegistryItem["devDependencies"],
   config: Config,
   options: {
     silent?: boolean
   }
 ) {
   dependencies = Array.from(new Set(dependencies))
-  if (!dependencies?.length) {
+  devDependencies = Array.from(new Set(devDependencies))
+
+  if (!dependencies?.length && !devDependencies?.length) {
     return
   }
 
@@ -24,13 +30,165 @@ export async function updateDependencies(
   const dependenciesSpinner = spinner(`Installing dependencies.`, {
     silent: options.silent,
   })?.start()
-  const packageManager = await getPackageManager(config.resolvedPaths.cwd)
-  await execa(
-    packageManager,
-    [packageManager === "npm" ? "install" : "add", ...dependencies],
-    {
-      cwd: config.resolvedPaths.cwd,
+  const packageManager = await getUpdateDependenciesPackageManager(config)
+
+  // Offer to use --force or --legacy-peer-deps if using React 19 with npm.
+  let flag = ""
+  if (shouldPromptForNpmFlag(config) && packageManager === "npm") {
+    if (options.silent) {
+      flag = "force"
+    } else {
+      dependenciesSpinner.stopAndPersist()
+      logger.warn(
+        "\nIt looks like you are using React 19. \nSome packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).\n"
+      )
+      const confirmation = await prompts([
+        {
+          type: "select",
+          name: "flag",
+          message: "How would you like to proceed?",
+          choices: [
+            { title: "Use --force", value: "force" },
+            { title: "Use --legacy-peer-deps", value: "legacy-peer-deps" },
+          ],
+        },
+      ])
+
+      if (confirmation) {
+        flag = confirmation.flag
+      }
     }
+  }
+
+  dependenciesSpinner?.start()
+
+  await installWithPackageManager(
+    packageManager,
+    dependencies,
+    devDependencies,
+    config.resolvedPaths.cwd,
+    flag
   )
+
   dependenciesSpinner?.succeed()
 }
+
+function shouldPromptForNpmFlag(config: Config) {
+  const packageInfo = getPackageInfo(config.resolvedPaths.cwd, false)
+
+  if (!packageInfo?.dependencies?.react) {
+    return false
+  }
+
+  const hasReact19 = /^(?:\^|~)?19(?:\.\d+)*(?:-.*)?$/.test(
+    packageInfo.dependencies.react
+  )
+  const hasReactDayPicker8 =
+    packageInfo.dependencies["react-day-picker"]?.startsWith("8")
+
+  return hasReact19 && hasReactDayPicker8
+}
+
+async function getUpdateDependenciesPackageManager(config: Config) {
+  const expoVersion = getPackageInfo(config.resolvedPaths.cwd, false)
+    ?.dependencies?.expo
+
+  if (expoVersion) {
+    // Ensures package versions match the React Native version.
+    // https://docs.expo.dev/more/expo-cli/#install
+    return "expo"
+  }
+
+  return getPackageManager(config.resolvedPaths.cwd)
+}
+
+async function installWithPackageManager(
+  packageManager: Awaited<
+    ReturnType<typeof getUpdateDependenciesPackageManager>
+  >,
+  dependencies: string[],
+  devDependencies: string[],
+  cwd: string,
+  flag?: string
+) {
+  if (packageManager === "npm") {
+    return installWithNpm(dependencies, devDependencies, cwd, flag)
+  }
+
+  if (packageManager === "deno") {
+    return installWithDeno(dependencies, devDependencies, cwd)
+  }
+
+  if (packageManager === "expo") {
+    return installWithExpo(dependencies, devDependencies, cwd)
+  }
+
+  if (dependencies?.length) {
+    await execa(packageManager, ["add", ...dependencies], {
+      cwd,
+    })
+  }
+
+  if (devDependencies?.length) {
+    await execa(packageManager, ["add", "-D", ...devDependencies], { cwd })
+  }
+}
+
+async function installWithNpm(
+  dependencies: string[],
+  devDependencies: string[],
+  cwd: string,
+  flag?: string
+) {
+  if (dependencies.length) {
+    await execa(
+      "npm",
+      ["install", ...(flag ? [`--${flag}`] : []), ...dependencies],
+      { cwd }
+    )
+  }
+
+  if (devDependencies.length) {
+    await execa(
+      "npm",
+      ["install", ...(flag ? [`--${flag}`] : []), "-D", ...devDependencies],
+      { cwd }
+    )
+  }
+}
+
+async function installWithDeno(
+  dependencies: string[],
+  devDependencies: string[],
+  cwd: string
+) {
+  if (dependencies?.length) {
+    await execa("deno", ["add", ...dependencies.map((dep) => `npm:${dep}`)], {
+      cwd,
+    })
+  }
+
+  if (devDependencies?.length) {
+    await execa(
+      "deno",
+      ["add", "-D", ...devDependencies.map((dep) => `npm:${dep}`)],
+      { cwd }
+    )
+  }
+}
+
+async function installWithExpo(
+  dependencies: string[],
+  devDependencies: string[],
+  cwd: string
+) {
+  if (dependencies.length) {
+    await execa("npx", ["expo", "install", ...dependencies], { cwd })
+  }
+
+  if (devDependencies.length) {
+    await execa("npx", ["expo", "install", "-- -D", ...devDependencies], {
+      cwd,
+    })
+  }
+}
diff --git a/packages/shadcn/src/utils/updaters/update-env-vars.test.ts b/packages/shadcn/src/utils/updaters/update-env-vars.test.ts
new file mode 100644
index 00000000000..ff761a16c31
--- /dev/null
+++ b/packages/shadcn/src/utils/updaters/update-env-vars.test.ts
@@ -0,0 +1,183 @@
+import { existsSync, promises as fs } from "fs"
+import type { Config } from "@/src/utils/get-config"
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest"
+
+import { updateEnvVars } from "./update-env-vars"
+
+vi.mock("fs", () => ({
+  existsSync: vi.fn(),
+  promises: {
+    readFile: vi.fn(),
+    writeFile: vi.fn(),
+  },
+}))
+
+vi.mock("@/src/utils/logger", () => ({
+  logger: {
+    info: vi.fn(),
+    log: vi.fn(),
+    success: vi.fn(),
+    break: vi.fn(),
+  },
+}))
+
+vi.mock("@/src/utils/spinner", () => ({
+  spinner: vi.fn(() => ({
+    start: vi.fn().mockReturnThis(),
+    stop: vi.fn(),
+    succeed: vi.fn(),
+  })),
+}))
+
+const mockConfig: Config = {
+  style: "default",
+  rsc: false,
+  tailwind: {
+    config: "tailwind.config.js",
+    css: "app/globals.css",
+    baseColor: "slate",
+    prefix: "",
+    cssVariables: false,
+  },
+  tsx: true,
+  aliases: {
+    components: "@/components",
+    ui: "@/components/ui",
+    lib: "@/lib",
+    hooks: "@/hooks",
+    utils: "@/utils",
+  },
+  resolvedPaths: {
+    cwd: "/test/project",
+    tailwindConfig: "/test/project/tailwind.config.js",
+    tailwindCss: "/test/project/app/globals.css",
+    components: "/test/project/components",
+    ui: "/test/project/components/ui",
+    lib: "/test/project/lib",
+    hooks: "/test/project/hooks",
+    utils: "/test/project/utils",
+  },
+}
+
+describe("updateEnvVars", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.resetAllMocks()
+  })
+
+  test("should create new .env.local file when none exists", async () => {
+    vi.mocked(existsSync).mockReturnValue(false)
+
+    const envVars = {
+      API_KEY: "test-key",
+      API_URL: "https://api.example.com",
+    }
+
+    const result = await updateEnvVars(envVars, mockConfig, { silent: true })
+
+    expect(vi.mocked(fs.writeFile)).toHaveBeenCalledWith(
+      "/test/project/.env.local",
+      "API_KEY=test-key\nAPI_URL=https://api.example.com\n",
+      "utf-8"
+    )
+    expect(result).toEqual({
+      envVarsAdded: ["API_KEY", "API_URL"],
+      envFileUpdated: null,
+      envFileCreated: ".env.local",
+    })
+  })
+
+  test("should update existing .env.local file with new variables", async () => {
+    vi.mocked(existsSync).mockReturnValue(true)
+    vi.mocked(fs.readFile).mockResolvedValue("EXISTING_KEY=existing-value\n")
+
+    const envVars = {
+      NEW_KEY: "new-value",
+      ANOTHER_KEY: "another-value",
+    }
+
+    const result = await updateEnvVars(envVars, mockConfig, { silent: true })
+
+    expect(vi.mocked(fs.writeFile)).toHaveBeenCalledWith(
+      "/test/project/.env.local",
+      "EXISTING_KEY=existing-value\n\nNEW_KEY=new-value\nANOTHER_KEY=another-value\n",
+      "utf-8"
+    )
+    expect(result).toEqual({
+      envVarsAdded: ["NEW_KEY", "ANOTHER_KEY"],
+      envFileUpdated: ".env.local",
+      envFileCreated: null,
+    })
+  })
+
+  test("should skip when all variables already exist", async () => {
+    vi.mocked(existsSync).mockReturnValue(true)
+    vi.mocked(fs.readFile).mockResolvedValue(
+      "API_KEY=existing-key\nAPI_URL=existing-url\n"
+    )
+
+    const envVars = {
+      API_KEY: "new-key",
+      API_URL: "new-url",
+    }
+
+    const result = await updateEnvVars(envVars, mockConfig, { silent: true })
+
+    expect(vi.mocked(fs.writeFile)).not.toHaveBeenCalled()
+    expect(result).toEqual({
+      envVarsAdded: [],
+      envFileUpdated: null,
+      envFileCreated: null,
+    })
+  })
+
+  test("should find and use .env.local when .env doesn't exist", async () => {
+    vi.mocked(existsSync).mockImplementation((path) => {
+      const pathStr = typeof path === "string" ? path : path.toString()
+      return pathStr.endsWith(".env.local")
+    })
+    vi.mocked(fs.readFile).mockResolvedValue("EXISTING_VAR=value\n")
+
+    const envVars = {
+      NEW_VAR: "new-value",
+    }
+
+    const result = await updateEnvVars(envVars, mockConfig, { silent: true })
+
+    expect(vi.mocked(fs.writeFile)).toHaveBeenCalledWith(
+      "/test/project/.env.local",
+      "EXISTING_VAR=value\n\nNEW_VAR=new-value\n",
+      "utf-8"
+    )
+    expect(result).toEqual({
+      envVarsAdded: ["NEW_VAR"],
+      envFileUpdated: ".env.local",
+      envFileCreated: null,
+    })
+  })
+
+  test("should return early when no env vars provided", async () => {
+    const result = await updateEnvVars(undefined, mockConfig, { silent: true })
+
+    expect(vi.mocked(fs.writeFile)).not.toHaveBeenCalled()
+    expect(result).toEqual({
+      envVarsAdded: [],
+      envFileUpdated: null,
+      envFileCreated: null,
+    })
+  })
+
+  test("should return early when empty env vars object provided", async () => {
+    const result = await updateEnvVars({}, mockConfig, { silent: true })
+
+    expect(vi.mocked(fs.writeFile)).not.toHaveBeenCalled()
+    expect(result).toEqual({
+      envVarsAdded: [],
+      envFileUpdated: null,
+      envFileCreated: null,
+    })
+  })
+})
diff --git a/packages/shadcn/src/utils/updaters/update-env-vars.ts b/packages/shadcn/src/utils/updaters/update-env-vars.ts
new file mode 100644
index 00000000000..6b597b8404b
--- /dev/null
+++ b/packages/shadcn/src/utils/updaters/update-env-vars.ts
@@ -0,0 +1,108 @@
+import { existsSync, promises as fs } from "fs"
+import path from "path"
+import { registryItemEnvVarsSchema } from "@/src/schema"
+import {
+  findExistingEnvFile,
+  getNewEnvKeys,
+  mergeEnvContent,
+} from "@/src/utils/env-helpers"
+import { Config } from "@/src/utils/get-config"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+import { spinner } from "@/src/utils/spinner"
+import { z } from "zod"
+
+export async function updateEnvVars(
+  envVars: z.infer<typeof registryItemEnvVarsSchema> | undefined,
+  config: Config,
+  options: {
+    silent?: boolean
+  }
+) {
+  if (!envVars || Object.keys(envVars).length === 0) {
+    return {
+      envVarsAdded: [],
+      envFileUpdated: null,
+      envFileCreated: null,
+    }
+  }
+
+  options = {
+    silent: false,
+    ...options,
+  }
+
+  const envSpinner = spinner(`Adding environment variables.`, {
+    silent: options.silent,
+  })?.start()
+
+  const projectRoot = config.resolvedPaths.cwd
+
+  // Find existing env file or use .env.local as default.
+  let envFilePath = path.join(projectRoot, ".env.local")
+  const existingEnvFile = findExistingEnvFile(projectRoot)
+
+  if (existingEnvFile) {
+    envFilePath = existingEnvFile
+  }
+
+  const envFileExists = existsSync(envFilePath)
+  const envFileName = path.basename(envFilePath)
+
+  // Convert envVars object to env file format
+  const newEnvContent = Object.entries(envVars)
+    .map(([key, value]) => `${key}=${value}`)
+    .join("\n")
+
+  let envVarsAdded: string[] = []
+  let envFileUpdated: string | null = null
+  let envFileCreated: string | null = null
+
+  if (envFileExists) {
+    const existingContent = await fs.readFile(envFilePath, "utf-8")
+    const mergedContent = mergeEnvContent(existingContent, newEnvContent)
+    envVarsAdded = getNewEnvKeys(existingContent, newEnvContent)
+
+    if (envVarsAdded.length > 0) {
+      await fs.writeFile(envFilePath, mergedContent, "utf-8")
+      envFileUpdated = path.relative(projectRoot, envFilePath)
+
+      envSpinner?.succeed(
+        `Added the following variables to ${highlighter.info(envFileName)}:`
+      )
+
+      if (!options.silent) {
+        for (const key of envVarsAdded) {
+          logger.log(`  ${highlighter.success("+")} ${key}`)
+        }
+      }
+    } else {
+      envSpinner?.stop()
+    }
+  } else {
+    // Create new env file
+    await fs.writeFile(envFilePath, newEnvContent + "\n", "utf-8")
+    envFileCreated = path.relative(projectRoot, envFilePath)
+    envVarsAdded = Object.keys(envVars)
+
+    envSpinner?.succeed(
+      `Added the following variables to ${highlighter.info(envFileName)}:`
+    )
+
+    if (!options.silent) {
+      for (const key of envVarsAdded) {
+        logger.log(`  ${highlighter.success("+")} ${key}`)
+      }
+    }
+  }
+
+  if (!options.silent && envVarsAdded.length > 0) {
+    logger.break()
+  }
+
+  return {
+    envVarsAdded,
+    envFileUpdated,
+    envFileCreated,
+  }
+}
diff --git a/packages/shadcn/src/utils/updaters/update-files.ts b/packages/shadcn/src/utils/updaters/update-files.ts
index 3a06110e562..18cf05d5000 100644
--- a/packages/shadcn/src/utils/updaters/update-files.ts
+++ b/packages/shadcn/src/utils/updaters/update-files.ts
@@ -1,34 +1,32 @@
 import { existsSync, promises as fs } from "fs"
+import { tmpdir } from "os"
 import path, { basename } from "path"
+import { getRegistryBaseColor } from "@/src/registry/api"
+import { RegistryItem, registryItemFileSchema } from "@/src/schema"
+import { isContentSame } from "@/src/utils/compare"
+import {
+  findExistingEnvFile,
+  getNewEnvKeys,
+  isEnvFile,
+  mergeEnvContent,
+  parseEnvContent,
+} from "@/src/utils/env-helpers"
 import { Config } from "@/src/utils/get-config"
-import { getProjectInfo } from "@/src/utils/get-project-info"
+import { ProjectInfo, getProjectInfo } from "@/src/utils/get-project-info"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
-import {
-  getRegistryBaseColor,
-  getRegistryItemFileTargetPath,
-} from "@/src/utils/registry"
-import { RegistryItem } from "@/src/utils/registry/schema"
+import { resolveImport } from "@/src/utils/resolve-import"
 import { spinner } from "@/src/utils/spinner"
 import { transform } from "@/src/utils/transformers"
 import { transformCssVars } from "@/src/utils/transformers/transform-css-vars"
+import { transformIcons } from "@/src/utils/transformers/transform-icons"
 import { transformImport } from "@/src/utils/transformers/transform-import"
 import { transformRsc } from "@/src/utils/transformers/transform-rsc"
 import { transformTwPrefixes } from "@/src/utils/transformers/transform-tw-prefix"
 import prompts from "prompts"
-
-export function resolveTargetDir(
-  projectInfo: Awaited<ReturnType<typeof getProjectInfo>>,
-  config: Config,
-  target: string
-) {
-  if (target.startsWith("~/")) {
-    return path.join(config.resolvedPaths.cwd, target.replace("~/", ""))
-  }
-  return projectInfo?.isSrcDir
-    ? path.join(config.resolvedPaths.cwd, "src", target)
-    : path.join(config.resolvedPaths.cwd, target)
-}
+import { Project, ScriptKind } from "ts-morph"
+import { loadConfig } from "tsconfig-paths"
+import { z } from "zod"
 
 export async function updateFiles(
   files: RegistryItem["files"],
@@ -37,15 +35,24 @@ export async function updateFiles(
     overwrite?: boolean
     force?: boolean
     silent?: boolean
+    rootSpinner?: ReturnType<typeof spinner>
+    isRemote?: boolean
+    isWorkspace?: boolean
   }
 ) {
   if (!files?.length) {
-    return
+    return {
+      filesCreated: [],
+      filesUpdated: [],
+      filesSkipped: [],
+    }
   }
   options = {
     overwrite: false,
     force: false,
     silent: false,
+    isRemote: false,
+    isWorkspace: false,
     ...options,
   }
   const filesCreatedSpinner = spinner(`Updating files.`, {
@@ -54,36 +61,98 @@ export async function updateFiles(
 
   const [projectInfo, baseColor] = await Promise.all([
     getProjectInfo(config.resolvedPaths.cwd),
-    getRegistryBaseColor(config.tailwind.baseColor),
+    config.tailwind.baseColor
+      ? getRegistryBaseColor(config.tailwind.baseColor)
+      : Promise.resolve(undefined),
   ])
 
-  const filesCreated = []
-  const filesUpdated = []
-  const filesSkipped = []
+  let filesCreated: string[] = []
+  let filesUpdated: string[] = []
+  let filesSkipped: string[] = []
+  let envVarsAdded: string[] = []
+  let envFile: string | null = null
 
   for (const file of files) {
     if (!file.content) {
       continue
     }
 
-    let targetDir = getRegistryItemFileTargetPath(file, config)
-    const fileName = basename(file.path)
-    let filePath = path.join(targetDir, fileName)
+    let filePath = resolveFilePath(file, config, {
+      isSrcDir: projectInfo?.isSrcDir,
+      framework: projectInfo?.framework.name,
+      commonRoot: findCommonRoot(
+        files.map((f) => f.path),
+        file.path
+      ),
+    })
 
-    if (file.target) {
-      filePath = resolveTargetDir(projectInfo, config, file.target)
-      targetDir = path.dirname(filePath)
+    if (!filePath) {
+      continue
     }
 
+    const fileName = basename(file.path)
+    const targetDir = path.dirname(filePath)
+
     if (!config.tsx) {
       filePath = filePath.replace(/\.tsx?$/, (match) =>
         match === ".tsx" ? ".jsx" : ".js"
       )
     }
 
+    if (isEnvFile(filePath) && !existsSync(filePath)) {
+      const alternativeEnvFile = findExistingEnvFile(targetDir)
+      if (alternativeEnvFile) {
+        filePath = alternativeEnvFile
+      }
+    }
+
     const existingFile = existsSync(filePath)
-    if (existingFile && !options.overwrite) {
+
+    // Run our transformers.
+    // Skip transformers for .env files to preserve exact content
+    const content = isEnvFile(filePath)
+      ? file.content
+      : await transform(
+          {
+            filename: file.path,
+            raw: file.content,
+            config,
+            baseColor,
+            transformJsx: !config.tsx,
+            isRemote: options.isRemote,
+          },
+          [
+            transformImport,
+            transformRsc,
+            transformCssVars,
+            transformTwPrefixes,
+            transformIcons,
+          ]
+        )
+
+    // Skip the file if it already exists and the content is the same.
+    // Exception: Don't skip .env files as we merge content instead of replacing
+    if (existingFile && !isEnvFile(filePath)) {
+      const existingFileContent = await fs.readFile(filePath, "utf-8")
+
+      if (
+        isContentSame(existingFileContent, content, {
+          // Ignore import differences for workspace components.
+          // TODO: figure out if we always want this.
+          ignoreImports: options.isWorkspace,
+        })
+      ) {
+        filesSkipped.push(path.relative(config.resolvedPaths.cwd, filePath))
+        continue
+      }
+    }
+
+    // Skip overwrite prompt for .env files - we'll handle them specially
+    if (existingFile && !options.overwrite && !isEnvFile(filePath)) {
       filesCreatedSpinner.stop()
+      if (options.rootSpinner) {
+        options.rootSpinner.stop()
+      }
       const { overwrite } = await prompts({
         type: "confirm",
         name: "overwrite",
@@ -95,9 +164,15 @@ export async function updateFiles(
 
       if (!overwrite) {
         filesSkipped.push(path.relative(config.resolvedPaths.cwd, filePath))
+        if (options.rootSpinner) {
+          options.rootSpinner.start()
+        }
         continue
       }
       filesCreatedSpinner?.start()
+      if (options.rootSpinner) {
+        options.rootSpinner.start()
+      }
     }
 
     // Create the target directory if it doesn't exist.
@@ -105,29 +180,57 @@ export async function updateFiles(
       await fs.mkdir(targetDir, { recursive: true })
     }
 
-    // Run our transformers.
-    const content = await transform(
-      {
-        filename: file.path,
-        raw: file.content,
-        config,
-        baseColor,
-        transformJsx: !config.tsx,
-      },
-      [transformImport, transformRsc, transformCssVars, transformTwPrefixes]
-    )
+    // Special handling for .env files - append only new keys
+    if (isEnvFile(filePath) && existingFile) {
+      const existingFileContent = await fs.readFile(filePath, "utf-8")
+      const mergedContent = mergeEnvContent(existingFileContent, content)
+      envVarsAdded = getNewEnvKeys(existingFileContent, content)
+      envFile = path.relative(config.resolvedPaths.cwd, filePath)
+
+      if (!envVarsAdded.length) {
+        filesSkipped.push(path.relative(config.resolvedPaths.cwd, filePath))
+        continue
+      }
+
+      await fs.writeFile(filePath, mergedContent, "utf-8")
+      filesUpdated.push(path.relative(config.resolvedPaths.cwd, filePath))
+      continue
+    }
 
     await fs.writeFile(filePath, content, "utf-8")
-    existingFile
-      ? filesUpdated.push(path.relative(config.resolvedPaths.cwd, filePath))
-      : filesCreated.push(path.relative(config.resolvedPaths.cwd, filePath))
+
+    // Handle file creation logging
+    if (!existingFile) {
+      filesCreated.push(path.relative(config.resolvedPaths.cwd, filePath))
+
+      if (isEnvFile(filePath)) {
+        envVarsAdded = Object.keys(parseEnvContent(content))
+        envFile = path.relative(config.resolvedPaths.cwd, filePath)
+      }
+    } else {
+      filesUpdated.push(path.relative(config.resolvedPaths.cwd, filePath))
+    }
   }
 
+  const allFiles = [...filesCreated, ...filesUpdated, ...filesSkipped]
+  const updatedFiles = await resolveImports(allFiles, config)
+
+  // Let's update filesUpdated with the updated files.
+  filesUpdated.push(...updatedFiles)
+
+  // If a file is in filesCreated and filesUpdated, we should remove it from filesUpdated.
+  filesUpdated = filesUpdated.filter((file) => !filesCreated.includes(file))
+
   const hasUpdatedFiles = filesCreated.length || filesUpdated.length
   if (!hasUpdatedFiles && !filesSkipped.length) {
     filesCreatedSpinner?.info("No files updated.")
   }
 
+  // Remove duplicates.
+  filesCreated = Array.from(new Set(filesCreated))
+  filesUpdated = Array.from(new Set(filesUpdated))
+  filesSkipped = Array.from(new Set(filesSkipped))
+
   if (filesCreated.length) {
     filesCreatedSpinner?.succeed(
       `Created ${filesCreated.length} ${
@@ -163,7 +266,7 @@ export async function updateFiles(
     spinner(
       `Skipped ${filesSkipped.length} ${
         filesUpdated.length === 1 ? "file" : "files"
-      }:`,
+      }: (files might be identical, use --overwrite to overwrite)`,
       {
         silent: options.silent,
       }
@@ -175,7 +278,405 @@ export async function updateFiles(
     }
   }
 
+  if (envVarsAdded.length && envFile) {
+    spinner(
+      `Added the following variables to ${highlighter.info(envFile)}:`
+    )?.info()
+    if (!options.silent) {
+      for (const key of envVarsAdded) {
+        logger.log(`  ${highlighter.success("+")} ${key}`)
+      }
+    }
+  }
+
   if (!options.silent) {
     logger.break()
   }
+
+  return {
+    filesCreated,
+    filesUpdated,
+    filesSkipped,
+  }
+}
+
+export function resolveFilePath(
+  file: z.infer<typeof registryItemFileSchema>,
+  config: Config,
+  options: {
+    isSrcDir?: boolean
+    commonRoot?: string
+    framework?: ProjectInfo["framework"]["name"]
+  }
+) {
+  if (file.target) {
+    if (file.target.startsWith("~/")) {
+      return path.join(config.resolvedPaths.cwd, file.target.replace("~/", ""))
+    }
+
+    let target = file.target
+
+    if (file.type === "registry:page") {
+      target = resolvePageTarget(target, options.framework)
+      if (!target) {
+        return ""
+      }
+    }
+
+    return options.isSrcDir
+      ? path.join(config.resolvedPaths.cwd, "src", target.replace("src/", ""))
+      : path.join(config.resolvedPaths.cwd, target.replace("src/", ""))
+  }
+
+  const targetDir = resolveFileTargetDirectory(file, config)
+
+  const relativePath = resolveNestedFilePath(file.path, targetDir)
+  return path.join(targetDir, relativePath)
+}
+
+function resolveFileTargetDirectory(
+  file: z.infer<typeof registryItemFileSchema>,
+  config: Config
+) {
+  if (file.type === "registry:ui") {
+    return config.resolvedPaths.ui
+  }
+
+  if (file.type === "registry:lib") {
+    return config.resolvedPaths.lib
+  }
+
+  if (file.type === "registry:block" || file.type === "registry:component") {
+    return config.resolvedPaths.components
+  }
+
+  if (file.type === "registry:hook") {
+    return config.resolvedPaths.hooks
+  }
+
+  return config.resolvedPaths.components
+}
+
+export function findCommonRoot(paths: string[], needle: string): string {
+  // Remove leading slashes for consistent handling
+  const normalizedPaths = paths.map((p) => p.replace(/^\//, ""))
+  const normalizedNeedle = needle.replace(/^\//, "")
+
+  // Get the directory path of the needle by removing the file name
+  const needleDir = normalizedNeedle.split("/").slice(0, -1).join("/")
+
+  // If needle is at root level, return empty string
+  if (!needleDir) {
+    return ""
+  }
+
+  // Split the needle directory into segments
+  const needleSegments = needleDir.split("/")
+
+  // Start from the full path and work backwards
+  for (let i = needleSegments.length; i > 0; i--) {
+    const testPath = needleSegments.slice(0, i).join("/")
+    // Check if this is a common root by verifying if any other paths start with it
+    const hasRelatedPaths = normalizedPaths.some(
+      (path) => path !== normalizedNeedle && path.startsWith(testPath + "/")
+    )
+    if (hasRelatedPaths) {
+      return "/" + testPath // Add leading slash back for the result
+    }
+  }
+
+  // If no common root found with other files, return the parent directory of the needle
+  return "/" + needleDir // Add leading slash back for the result
+}
+
+export function resolveNestedFilePath(
+  filePath: string,
+  targetDir: string
+): string {
+  // Normalize paths by removing leading/trailing slashes
+  const normalizedFilePath = filePath.replace(/^\/|\/$/g, "")
+  const normalizedTargetDir = targetDir.replace(/^\/|\/$/g, "")
+
+  // Split paths into segments
+  const fileSegments = normalizedFilePath.split("/")
+  const targetSegments = normalizedTargetDir.split("/")
+
+  // Find the last matching segment from targetDir in filePath
+  const lastTargetSegment = targetSegments[targetSegments.length - 1]
+  const commonDirIndex = fileSegments.findIndex(
+    (segment) => segment === lastTargetSegment
+  )
+
+  if (commonDirIndex === -1) {
+    // Return just the filename if no common directory is found
+    return fileSegments[fileSegments.length - 1]
+  }
+
+  // Return everything after the common directory
+  return fileSegments.slice(commonDirIndex + 1).join("/")
+}
+
+export function resolvePageTarget(
+  target: string,
+  framework?: ProjectInfo["framework"]["name"]
+) {
+  if (!framework) {
+    return ""
+  }
+
+  if (framework === "next-app") {
+    return target
+  }
+
+  if (framework === "next-pages") {
+    let result = target.replace(/^app\//, "pages/")
+    result = result.replace(/\/page(\.[jt]sx?)$/, "$1")
+
+    return result
+  }
+
+  if (framework === "react-router") {
+    let result = target.replace(/^app\//, "app/routes/")
+    result = result.replace(/\/page(\.[jt]sx?)$/, "$1")
+
+    return result
+  }
+
+  if (framework === "laravel") {
+    let result = target.replace(/^app\//, "resources/js/pages/")
+    result = result.replace(/\/page(\.[jt]sx?)$/, "$1")
+
+    return result
+  }
+
+  return ""
+}
+
+async function resolveImports(filePaths: string[], config: Config) {
+  const project = new Project({
+    compilerOptions: {},
+  })
+  const projectInfo = await getProjectInfo(config.resolvedPaths.cwd)
+  const tsConfig = loadConfig(config.resolvedPaths.cwd)
+  const updatedFiles = []
+
+  if (!projectInfo || tsConfig.resultType === "failed") {
+    return []
+  }
+
+  for (const filepath of filePaths) {
+    const resolvedPath = path.resolve(config.resolvedPaths.cwd, filepath)
+
+    // Check if the file exists.
+    if (!existsSync(resolvedPath)) {
+      continue
+    }
+
+    const content = await fs.readFile(resolvedPath, "utf-8")
+
+    const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-"))
+    const sourceFile = project.createSourceFile(
+      path.join(dir, basename(resolvedPath)),
+      content,
+      {
+        scriptKind: ScriptKind.TSX,
+      }
+    )
+
+    // Skip if the file extension is not one of the supported extensions.
+    if (![".tsx", ".ts", ".jsx", ".js"].includes(sourceFile.getExtension())) {
+      continue
+    }
+
+    const importDeclarations = sourceFile.getImportDeclarations()
+    for (const importDeclaration of importDeclarations) {
+      const moduleSpecifier = importDeclaration.getModuleSpecifierValue()
+
+      // Filter out non-local imports.
+      if (
+        projectInfo?.aliasPrefix &&
+        !moduleSpecifier.startsWith(`${projectInfo.aliasPrefix}/`)
+      ) {
+        continue
+      }
+
+      // Find the probable import file path.
+      // This is where we expect to find the file on disk.
+      const probableImportFilePath = await resolveImport(
+        moduleSpecifier,
+        tsConfig
+      )
+
+      if (!probableImportFilePath) {
+        continue
+      }
+
+      // Find the actual import file path.
+      // This is the path where the file has been installed.
+      const resolvedImportFilePath = resolveModuleByProbablePath(
+        probableImportFilePath,
+        filePaths,
+        config
+      )
+
+      if (!resolvedImportFilePath) {
+        continue
+      }
+
+      // Convert the resolved import file path to an aliased import.
+      const newImport = toAliasedImport(
+        resolvedImportFilePath,
+        config,
+        projectInfo
+      )
+
+      if (!newImport || newImport === moduleSpecifier) {
+        continue
+      }
+
+      importDeclaration.setModuleSpecifier(newImport)
+
+      // Write the updated content to the file.
+      await fs.writeFile(resolvedPath, sourceFile.getFullText(), "utf-8")
+
+      // Track the updated file.
+      updatedFiles.push(filepath)
+    }
+  }
+
+  return updatedFiles
+}
+
+/**
+ * Given an absolute "probable" import path (no ext),
+ * plus an array of absolute file paths you already know about,
+ * return 0–N matches (best match first), and also check disk for any missing ones.
+ */
+export function resolveModuleByProbablePath(
+  probableImportFilePath: string,
+  files: string[],
+  config: Config,
+  extensions: string[] = [".tsx", ".ts", ".js", ".jsx", ".css"]
+) {
+  const cwd = path.normalize(config.resolvedPaths.cwd)
+
+  // 1) Build a set of POSIX-normalized, project-relative files
+  const relativeFiles = files.map((f) => f.split(path.sep).join(path.posix.sep))
+  const fileSet = new Set(relativeFiles)
+
+  // 2) Strip any existing extension off the absolute base path
+  const extInPath = path.extname(probableImportFilePath)
+  const hasExt = extInPath !== ""
+  const absBase = hasExt
+    ? probableImportFilePath.slice(0, -extInPath.length)
+    : probableImportFilePath
+
+  // 3) Compute the project-relative "base" directory for strong matching
+  const relBaseRaw = path.relative(cwd, absBase)
+  const relBase = relBaseRaw.split(path.sep).join(path.posix.sep)
+
+  // 4) Decide which extensions to try
+  const tryExts = hasExt ? [extInPath] : extensions
+
+  // 5) Collect candidates
+  const candidates = new Set<string>()
+
+  // 5a) Fast‑path: [base + ext] and [base/index + ext]
+  for (const e of tryExts) {
+    const absCand = absBase + e
+    const relCand = path.posix.normalize(path.relative(cwd, absCand))
+    if (fileSet.has(relCand) || existsSync(absCand)) {
+      candidates.add(relCand)
+    }
+
+    const absIdx = path.join(absBase, `index${e}`)
+    const relIdx = path.posix.normalize(path.relative(cwd, absIdx))
+    if (fileSet.has(relIdx) || existsSync(absIdx)) {
+      candidates.add(relIdx)
+    }
+  }
+
+  // 5b) Fallback: scan known files by basename
+  const name = path.basename(absBase)
+  for (const f of relativeFiles) {
+    if (tryExts.some((e) => f.endsWith(`/${name}${e}`))) {
+      candidates.add(f)
+    }
+  }
+
+  // 6) If no matches, bail
+  if (candidates.size === 0) return null
+
+  // 7) Sort by (1) extension priority, then (2) "strong" base match
+  const sorted = Array.from(candidates).sort((a, b) => {
+    // a) extension order
+    const aExt = path.posix.extname(a)
+    const bExt = path.posix.extname(b)
+    const ord = tryExts.indexOf(aExt) - tryExts.indexOf(bExt)
+    if (ord !== 0) return ord
+    // b) strong match if path starts with relBase
+    const aStrong = relBase && a.startsWith(relBase) ? -1 : 1
+    const bStrong = relBase && b.startsWith(relBase) ? -1 : 1
+    return aStrong - bStrong
+  })
+
+  // 8) Return the first (best) candidate
+  return sorted[0]
+}
+
+export function toAliasedImport(
+  filePath: string,
+  config: Config,
+  projectInfo: ProjectInfo
+): string | null {
+  const abs = path.normalize(path.join(config.resolvedPaths.cwd, filePath))
+
+  // 1️⃣ Find the longest matching alias root in resolvedPaths
+  //    e.g. key="ui", root="/…/components/ui" beats key="components"
+  const matches = Object.entries(config.resolvedPaths)
+    .filter(
+      ([, root]) => root && abs.startsWith(path.normalize(root + path.sep))
+    )
+    .sort((a, b) => b[1].length - a[1].length)
+
+  if (matches.length === 0) {
+    return null
+  }
+  const [aliasKey, rootDir] = matches[0]
+
+  // 2️⃣ Compute the path UNDER that root
+  let rel = path.relative(rootDir, abs)
+  // force POSIX-style separators
+  rel = rel.split(path.sep).join("/") // e.g. "button/index.tsx"
+
+  // 3️⃣ Strip code-file extensions, keep others (css, json, etc.)
+  const ext = path.posix.extname(rel)
+  const codeExts = [".ts", ".tsx", ".js", ".jsx"]
+  const keepExt = codeExts.includes(ext) ? "" : ext
+  let noExt = rel.slice(0, rel.length - ext.length)
+
+  // 4️⃣ Collapse "/index" to its directory
+  if (noExt.endsWith("/index")) {
+    noExt = noExt.slice(0, -"/index".length)
+  }
+
+  // 5️⃣ Build the aliased path
+  //    config.aliases[aliasKey] is e.g. "@/components/ui"
+  const aliasBase =
+    aliasKey === "cwd"
+      ? projectInfo.aliasPrefix
+      : config.aliases[aliasKey as keyof typeof config.aliases]
+  if (!aliasBase) {
+    return null
+  }
+  // if noExt is empty (i.e. file was exactly at the root), we import the root
+  let suffix = noExt === "" ? "" : `/${noExt}`
+
+  // Rremove /src from suffix.
+  // Alias will handle this.
+  suffix = suffix.replace("/src", "")
+
+  // 6️⃣ Prepend the prefix from projectInfo (e.g. "@") if needed
+  //    but usually config.aliases already include it.
+  return `${aliasBase}${suffix}${keepExt}`
 }
diff --git a/packages/shadcn/src/utils/updaters/update-tailwind-config.ts b/packages/shadcn/src/utils/updaters/update-tailwind-config.ts
index f344d03643e..05fa4c174c6 100644
--- a/packages/shadcn/src/utils/updaters/update-tailwind-config.ts
+++ b/packages/shadcn/src/utils/updaters/update-tailwind-config.ts
@@ -1,14 +1,19 @@
 import { promises as fs } from "fs"
 import { tmpdir } from "os"
 import path from "path"
+import {
+  registryItemCssVarsSchema,
+  registryItemTailwindSchema,
+} from "@/src/schema"
 import { Config } from "@/src/utils/get-config"
+import { TailwindVersion } from "@/src/utils/get-project-info"
 import { highlighter } from "@/src/utils/highlighter"
-import { registryItemTailwindSchema } from "@/src/utils/registry/schema"
 import { spinner } from "@/src/utils/spinner"
 import deepmerge from "deepmerge"
 import objectToString from "stringify-object"
 import { type Config as TailwindConfig } from "tailwindcss"
 import {
+  ArrayLiteralExpression,
   ObjectLiteralExpression,
   Project,
   PropertyAssignment,
@@ -31,6 +36,7 @@ export async function updateTailwindConfig(
   config: Config,
   options: {
     silent?: boolean
+    tailwindVersion?: TailwindVersion
   }
 ) {
   if (!tailwindConfig) {
@@ -39,9 +45,15 @@ export async function updateTailwindConfig(
 
   options = {
     silent: false,
+    tailwindVersion: "v3",
     ...options,
   }
 
+  // No tailwind config in v4.
+  if (options.tailwindVersion === "v4") {
+    return
+  }
+
   const tailwindFileRelativePath = path.relative(
     config.resolvedPaths.cwd,
     config.resolvedPaths.tailwindConfig
@@ -194,8 +206,11 @@ async function addTailwindConfigTheme(
   if (themeInitializer?.isKind(SyntaxKind.ObjectLiteralExpression)) {
     const themeObjectString = themeInitializer.getText()
     const themeObject = await parseObjectLiteral(themeObjectString)
-    const result = deepmerge(themeObject, theme)
+    const result = deepmerge(themeObject, theme, {
+      arrayMerge: (dst, src) => src,
+    })
     const resultString = objectToString(result)
+      .replace(/\'\.\.\.(.*)\'/g, "...$1") // Remove quote around spread element
       .replace(/\'\"/g, "'") // Replace `\" with "
       .replace(/\"\'/g, "'") // Replace `\" with "
       .replace(/\'\[/g, "[") // Replace `[ with [
@@ -287,7 +302,8 @@ export function nestSpreadProperties(obj: ObjectLiteralExpression) {
 
       // Replace spread with a property assignment
       obj.insertPropertyAssignment(i, {
-        name: `___${spreadText.replace(/^\.\.\./, "")}`,
+        // Need to escape the name with " so that deepmerge doesn't mishandle the key
+        name: `"___${spreadText.replace(/^\.\.\./, "")}"`,
         initializer: `"...${spreadText.replace(/^\.\.\./, "")}"`,
       })
 
@@ -305,11 +321,41 @@ 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()
 
@@ -319,14 +365,49 @@ export function unnestSpreadProperties(obj: ObjectLiteralExpression) {
       const propAssignment = prop as PropertyAssignment
       const initializer = propAssignment.getInitializer()
 
-      if (initializer?.isKind(SyntaxKind.StringLiteral)) {
-        const value = initializer.getLiteralValue()
+      if (initializer && initializer.isKind(SyntaxKind.StringLiteral)) {
+        const value = initializer
+          .asKindOrThrow(SyntaxKind.StringLiteral)
+          .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)
+      ) {
+        unsetSpreadElements(
+          initializer.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
+        )
+      }
+    }
+  }
+}
+
+export function unsetSpreadElements(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
+      unsetSpreadElements(
+        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"))
       }
     }
   }
@@ -363,6 +444,12 @@ 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())
       }
@@ -371,12 +458,34 @@ 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.kind) {
+  switch (node.getKind()) {
     case SyntaxKind.StringLiteral:
-      return node.text
+      return node.getText()
     case SyntaxKind.NumericLiteral:
-      return Number(node.text)
+      return Number(node.getText())
     case SyntaxKind.TrueKeyword:
       return true
     case SyntaxKind.FalseKeyword:
@@ -384,14 +493,16 @@ function parseValue(node: any): any {
     case SyntaxKind.NullKeyword:
       return null
     case SyntaxKind.ArrayLiteralExpression:
-      return node.elements.map(parseValue)
+      return node.getElements().map(parseValue)
+    case SyntaxKind.ObjectLiteralExpression:
+      return parseObjectLiteralExpression(node)
     default:
       return node.getText()
   }
 }
 
 export function buildTailwindThemeColorsFromCssVars(
-  cssVars: Record<string, string>
+  cssVars: z.infer<typeof registryItemCssVarsSchema>
 ) {
   const result: Record<string, any> = {}
 
diff --git a/packages/shadcn/test/commands/init.test.ts b/packages/shadcn/test/commands/init.test.ts
deleted file mode 100644
index ee99fd7bbf9..00000000000
--- a/packages/shadcn/test/commands/init.test.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import fs from "fs"
-import path from "path"
-import { execa } from "execa"
-import { afterEach, expect, test, vi } from "vitest"
-
-import { runInit } from "../../src/commands/init"
-import { getConfig } from "../../src/utils/get-config"
-import * as getPackageManger from "../../src/utils/get-package-manager"
-import * as registry from "../../src/utils/registry"
-
-vi.mock("execa")
-vi.mock("fs/promises", () => ({
-  writeFile: vi.fn(),
-  mkdir: vi.fn(),
-}))
-vi.mock("ora")
-
-test.skip("init config-full", async () => {
-  vi.spyOn(getPackageManger, "getPackageManager").mockResolvedValue("pnpm")
-  vi.spyOn(registry, "getRegistryBaseColor").mockResolvedValue({
-    inlineColors: {},
-    cssVars: {},
-    inlineColorsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-    cssVarsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  })
-  vi.spyOn(registry, "getRegistryItem").mockResolvedValue({
-    name: "new-york",
-    dependencies: [
-      "tailwindcss-animate",
-      "class-variance-authority",
-      "clsx",
-      "tailwind-merge",
-      "lucide-react",
-      "@radix-ui/react-icons",
-    ],
-    registryDependencies: [],
-    tailwind: {
-      config: {
-        theme: {
-          extend: {
-            borderRadius: {
-              lg: "var(--radius)",
-              md: "calc(var(--radius) - 2px)",
-              sm: "calc(var(--radius) - 4px)",
-            },
-          },
-        },
-        plugins: ['require("tailwindcss-animate")'],
-      },
-    },
-    files: [],
-    cssVariables: {
-      light: {
-        "--radius": "0.5rem",
-      },
-    },
-  })
-  const mockMkdir = vi.spyOn(fs.promises, "mkdir").mockResolvedValue(undefined)
-  const mockWriteFile = vi.spyOn(fs.promises, "writeFile").mockResolvedValue()
-
-  const targetDir = path.resolve(__dirname, "../fixtures/config-full")
-  const config = await getConfig(targetDir)
-
-  await runInit(config)
-
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/src\/lib$/),
-    expect.anything()
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/src\/components$/),
-    expect.anything()
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/src\/app\/globals.css$/),
-    expect.stringContaining(`@tailwind base`),
-    "utf8"
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/src\/lib\/utils.ts$/),
-    expect.stringContaining(`import { type ClassValue, clsx } from "clsx"`),
-    "utf8"
-  )
-  expect(execa).toHaveBeenCalledWith(
-    "pnpm",
-    [
-      "add",
-      "tailwindcss-animate",
-      "class-variance-authority",
-      "clsx",
-      "tailwind-merge",
-      "lucide-react",
-      "@radix-ui/react-icons",
-    ],
-    {
-      cwd: targetDir,
-    }
-  )
-
-  mockMkdir.mockRestore()
-  mockWriteFile.mockRestore()
-})
-
-test.skip("init config-partial", async () => {
-  vi.spyOn(getPackageManger, "getPackageManager").mockResolvedValue("npm")
-  vi.spyOn(registry, "getRegistryBaseColor").mockResolvedValue({
-    inlineColors: {},
-    cssVars: {},
-    inlineColorsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-    cssVarsTemplate:
-      "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  })
-  vi.spyOn(registry, "getRegistryItem").mockResolvedValue({
-    name: "new-york",
-    dependencies: [
-      "tailwindcss-animate",
-      "class-variance-authority",
-      "clsx",
-      "tailwind-merge",
-      "lucide-react",
-    ],
-    registryDependencies: [],
-    tailwind: {
-      config: {
-        theme: {
-          extend: {
-            borderRadius: {
-              lg: "var(--radius)",
-              md: "calc(var(--radius) - 2px)",
-              sm: "calc(var(--radius) - 4px)",
-            },
-          },
-        },
-        plugins: ['require("tailwindcss-animate")'],
-      },
-    },
-    files: [],
-    cssVariables: {
-      light: {
-        "--radius": "0.5rem",
-      },
-    },
-  })
-  const mockMkdir = vi.spyOn(fs.promises, "mkdir").mockResolvedValue(undefined)
-  const mockWriteFile = vi.spyOn(fs.promises, "writeFile").mockResolvedValue()
-
-  const targetDir = path.resolve(__dirname, "../fixtures/config-partial")
-  const config = await getConfig(targetDir)
-
-  await runInit(config)
-
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/src\/assets\/css$/),
-    expect.anything()
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/lib$/),
-    expect.anything()
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/components$/),
-    expect.anything()
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/utils.ts$/),
-    expect.stringContaining(`import { type ClassValue, clsx } from "clsx"`),
-    "utf8"
-  )
-  expect(execa).toHaveBeenCalledWith(
-    "npm",
-    [
-      "install",
-      "tailwindcss-animate",
-      "class-variance-authority",
-      "clsx",
-      "tailwind-merge",
-      "lucide-react",
-    ],
-    {
-      cwd: targetDir,
-    }
-  )
-
-  mockMkdir.mockRestore()
-  mockWriteFile.mockRestore()
-})
-
-afterEach(() => {
-  vi.resetAllMocks()
-})
diff --git a/packages/shadcn/test/fixtures/config-full/components.json b/packages/shadcn/test/fixtures/config-full/components.json
index b27c6981578..b7e6404d072 100644
--- a/packages/shadcn/test/fixtures/config-full/components.json
+++ b/packages/shadcn/test/fixtures/config-full/components.json
@@ -14,5 +14,6 @@
     "lib": "~/lib",
     "hooks": "~/lib/hooks",
     "ui": "~/ui"
-  }
+  },
+  "iconLibrary": "lucide"
 }
diff --git a/packages/shadcn/test/fixtures/config-jsx/components.json b/packages/shadcn/test/fixtures/config-jsx/components.json
index 92b1f5e029b..e805bc288dd 100644
--- a/packages/shadcn/test/fixtures/config-jsx/components.json
+++ b/packages/shadcn/test/fixtures/config-jsx/components.json
@@ -10,5 +10,6 @@
   "aliases": {
     "utils": "@/lib/utils",
     "components": "@/components"
-  }
+  },
+  "iconLibrary": "radix"
 }
diff --git a/packages/cli/test/fixtures/next-app-js/app/favicon.ico b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico
similarity index 100%
rename from packages/cli/test/fixtures/next-app-js/app/favicon.ico
rename to packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico
diff --git a/packages/cli/test/fixtures/next-app-js/app/globals.css b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/globals.css
similarity index 100%
rename from packages/cli/test/fixtures/next-app-js/app/globals.css
rename to packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/globals.css
diff --git a/packages/cli/test/fixtures/next-app/app/layout.tsx b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx
similarity index 100%
rename from packages/cli/test/fixtures/next-app/app/layout.tsx
rename to packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx
diff --git a/packages/cli/test/fixtures/next-app-src/other.css b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/other.css
similarity index 100%
rename from packages/cli/test/fixtures/next-app-src/other.css
rename to packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/other.css
diff --git a/packages/cli/test/fixtures/next-app/app/page.tsx b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx
similarity index 100%
rename from packages/cli/test/fixtures/next-app/app/page.tsx
rename to packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx
diff --git a/packages/cli/test/fixtures/next-app-src/next-env.d.ts b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts
similarity index 100%
rename from packages/cli/test/fixtures/next-app-src/next-env.d.ts
rename to packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts
diff --git a/packages/cli/test/fixtures/next-app-js/next.config.js b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next.config.ts
similarity index 100%
rename from packages/cli/test/fixtures/next-app-js/next.config.js
rename to packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next.config.ts
diff --git a/packages/cli/test/fixtures/next-app/package.json b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/package.json
similarity index 100%
rename from packages/cli/test/fixtures/next-app/package.json
rename to packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/package.json
diff --git a/packages/cli/test/fixtures/next-app-js/postcss.config.js b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js
similarity index 100%
rename from packages/cli/test/fixtures/next-app-js/postcss.config.js
rename to packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js
diff --git a/packages/cli/test/fixtures/next-app/tailwind.config.ts b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts
similarity index 100%
rename from packages/cli/test/fixtures/next-app/tailwind.config.ts
rename to packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts
diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json
new file mode 100644
index 00000000000..0751e3ea82b
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@custom-alias/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-src/package.json b/packages/shadcn/test/fixtures/frameworks/next-app-src/package.json
new file mode 100644
index 00000000000..dfa6942e1aa
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-src/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "next-app-src",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "tailwindcss": "3.1.2"
+  }
+}
diff --git a/packages/shadcn/test/fixtures/frameworks/next-app/package.json b/packages/shadcn/test/fixtures/frameworks/next-app/package.json
index d43fb081b9a..a800f2b7c49 100644
--- a/packages/shadcn/test/fixtures/frameworks/next-app/package.json
+++ b/packages/shadcn/test/fixtures/frameworks/next-app/package.json
@@ -7,5 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
+  },
+  "dependencies": {
+    "tailwindcss": "^3.0.0"
   }
 }
diff --git a/packages/shadcn/test/fixtures/frameworks/next-pages-src/package.json b/packages/shadcn/test/fixtures/frameworks/next-pages-src/package.json
index d5be9c4b809..5a9c0f0c6b0 100644
--- a/packages/shadcn/test/fixtures/frameworks/next-pages-src/package.json
+++ b/packages/shadcn/test/fixtures/frameworks/next-pages-src/package.json
@@ -7,5 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
+  },
+  "dependencies": {
+    "tailwindcss": "^4.0.0"
   }
 }
diff --git a/packages/shadcn/test/fixtures/frameworks/next-pages-src/src/styles/globals.css b/packages/shadcn/test/fixtures/frameworks/next-pages-src/src/styles/globals.css
index fd81e885836..f1d8c73cdcf 100644
--- a/packages/shadcn/test/fixtures/frameworks/next-pages-src/src/styles/globals.css
+++ b/packages/shadcn/test/fixtures/frameworks/next-pages-src/src/styles/globals.css
@@ -1,27 +1 @@
-@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));
-}
+@import "tailwindcss";
diff --git a/packages/shadcn/test/fixtures/frameworks/next-pages/package.json b/packages/shadcn/test/fixtures/frameworks/next-pages/package.json
index 7603dc91c45..6ab0fabb1f0 100644
--- a/packages/shadcn/test/fixtures/frameworks/next-pages/package.json
+++ b/packages/shadcn/test/fixtures/frameworks/next-pages/package.json
@@ -7,5 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
+  },
+  "devDependencies": {
+    "tailwindcss": "4.1.2"
   }
 }
diff --git a/packages/shadcn/test/fixtures/frameworks/next-pages/styles/globals.css b/packages/shadcn/test/fixtures/frameworks/next-pages/styles/globals.css
index fd81e885836..d4b5078586e 100644
--- a/packages/shadcn/test/fixtures/frameworks/next-pages/styles/globals.css
+++ b/packages/shadcn/test/fixtures/frameworks/next-pages/styles/globals.css
@@ -1,27 +1 @@
-@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));
-}
+@import 'tailwindcss';
diff --git a/packages/cli/test/fixtures/project-bun/bun.lockb b/packages/shadcn/test/fixtures/project-bun-lock/bun.lock
similarity index 100%
rename from packages/cli/test/fixtures/project-bun/bun.lockb
rename to packages/shadcn/test/fixtures/project-bun-lock/bun.lock
diff --git a/packages/cli/test/fixtures/project-bun/package.json b/packages/shadcn/test/fixtures/project-bun-lock/package.json
similarity index 100%
rename from packages/cli/test/fixtures/project-bun/package.json
rename to packages/shadcn/test/fixtures/project-bun-lock/package.json
diff --git a/packages/shadcn/test/fixtures/project-deno/deno.json b/packages/shadcn/test/fixtures/project-deno/deno.json
new file mode 100644
index 00000000000..9e26dfeeb6e
--- /dev/null
+++ b/packages/shadcn/test/fixtures/project-deno/deno.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/packages/shadcn/test/fixtures/project-deno/deno.lock b/packages/shadcn/test/fixtures/project-deno/deno.lock
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/cli/test/fixtures/project-npm/package-lock.json b/packages/shadcn/test/fixtures/project-npm-react19/package-lock.json
similarity index 100%
rename from packages/cli/test/fixtures/project-npm/package-lock.json
rename to packages/shadcn/test/fixtures/project-npm-react19/package-lock.json
diff --git a/packages/shadcn/test/fixtures/project-npm-react19/package.json b/packages/shadcn/test/fixtures/project-npm-react19/package.json
new file mode 100644
index 00000000000..4032e8cfe05
--- /dev/null
+++ b/packages/shadcn/test/fixtures/project-npm-react19/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "test-cli-project-npm",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "shadcn",
+  "license": "MIT",
+  "dependencies": {
+    "react": "19.0.0",
+    "react-day-picker": "8.0.0"
+  }
+}
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/.eslintrc.cjs b/packages/shadcn/test/fixtures/vite-with-tailwind/.eslintrc.cjs
new file mode 100644
index 00000000000..d6c95379530
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/.gitignore b/packages/shadcn/test/fixtures/vite-with-tailwind/.gitignore
new file mode 100644
index 00000000000..00ba9dc286c
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+!src/components
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/README.md b/packages/shadcn/test/fixtures/vite-with-tailwind/README.md
new file mode 100644
index 00000000000..0d6babeddbd
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/README.md
@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/components.json b/packages/shadcn/test/fixtures/vite-with-tailwind/components.json
new file mode 100644
index 00000000000..73afbdbccb6
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/index.html b/packages/shadcn/test/fixtures/vite-with-tailwind/index.html
new file mode 100644
index 00000000000..e4b78eae123
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/package.json b/packages/shadcn/test/fixtures/vite-with-tailwind/package.json
new file mode 100644
index 00000000000..91231fe410c
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "vite-with-tailwind",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@tailwindcss/vite": "^4.0.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.475.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss": "^4.0.7",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.4",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "@vitejs/plugin-react": "^4.1.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0-beta.11"
+  }
+}
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/pnpm-lock.yaml b/packages/shadcn/test/fixtures/vite-with-tailwind/pnpm-lock.yaml
new file mode 100644
index 00000000000..449b6abb7e8
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/pnpm-lock.yaml
@@ -0,0 +1,3186 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@radix-ui/react-checkbox':
+        specifier: ^1.1.4
+        version: 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-label':
+        specifier: ^2.1.2
+        version: 2.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-radio-group':
+        specifier: ^1.2.3
+        version: 1.2.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-select':
+        specifier: ^2.1.6
+        version: 2.1.6(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react@18.3.18)(react@18.3.1)
+      '@tailwindcss/vite':
+        specifier: ^4.0.7
+        version: 4.0.7(vite@5.4.14(@types/node@22.13.4)(lightningcss@1.29.1))
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.475.0
+        version: 0.475.0(react@18.3.1)
+      react:
+        specifier: ^18.2.0
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.3.1(react@18.3.1)
+      tailwind-merge:
+        specifier: ^3.0.1
+        version: 3.0.1
+      tailwindcss:
+        specifier: ^4.0.7
+        version: 4.0.7
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@4.0.7)
+    devDependencies:
+      '@types/node':
+        specifier: ^22.13.4
+        version: 22.13.4
+      '@types/react':
+        specifier: ^18.2.28
+        version: 18.3.18
+      '@types/react-dom':
+        specifier: ^18.2.13
+        version: 18.3.5(@types/react@18.3.18)
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^6.7.5
+        version: 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/parser':
+        specifier: ^6.7.5
+        version: 6.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@vitejs/plugin-react':
+        specifier: ^4.1.0
+        version: 4.3.4(vite@5.4.14(@types/node@22.13.4)(lightningcss@1.29.1))
+      eslint:
+        specifier: ^8.51.0
+        version: 8.57.1
+      eslint-plugin-react-hooks:
+        specifier: ^4.6.0
+        version: 4.6.2(eslint@8.57.1)
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.3
+        version: 0.4.19(eslint@8.57.1)
+      typescript:
+        specifier: ^5.2.2
+        version: 5.7.3
+      vite:
+        specifier: ^5.0.0-beta.11
+        version: 5.4.14(@types/node@22.13.4)(lightningcss@1.29.1)
+
+packages:
+
+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.26.8':
+    resolution: {integrity: sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.26.9':
+    resolution: {integrity: sha512-lWBYIrF7qK5+GjY5Uy+/hEgp8OJWOD/rpy74GplYRhEauvbHDeFB8t5hPOZxCZ0Oxf4Cc36tK51/l3ymJysrKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.26.9':
+    resolution: {integrity: sha512-kEWdzjOAUMW4hAyrzJ0ZaTOu9OmpyDIQicIh0zg0EEcEkYXZb2TjtBhnHi2ViX7PKwZqF4xwqfAm299/QMP3lg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.26.5':
+    resolution: {integrity: sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.25.9':
+    resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.26.0':
+    resolution: {integrity: sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-plugin-utils@7.26.5':
+    resolution: {integrity: sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.25.9':
+    resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.26.9':
+    resolution: {integrity: sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.26.9':
+    resolution: {integrity: sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-transform-react-jsx-self@7.25.9':
+    resolution: {integrity: sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.25.9':
+    resolution: {integrity: sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/template@7.26.9':
+    resolution: {integrity: sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.26.9':
+    resolution: {integrity: sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.26.9':
+    resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==}
+    engines: {node: '>=6.9.0'}
+
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.21.5':
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.21.5':
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.21.5':
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.21.5':
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.21.5':
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.21.5':
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.21.5':
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.21.5':
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.21.5':
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.21.5':
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.21.5':
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.21.5':
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.21.5':
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.21.5':
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.21.5':
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/sunos-x64@0.21.5':
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.21.5':
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.21.5':
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.4.1':
+    resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/eslintrc@2.1.4':
+    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  '@eslint/js@8.57.1':
+    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  '@floating-ui/core@1.6.9':
+    resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
+
+  '@floating-ui/dom@1.6.13':
+    resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==}
+
+  '@floating-ui/react-dom@2.1.2':
+    resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.9':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+
+  '@humanwhocodes/config-array@0.13.0':
+    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
+    engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/object-schema@2.0.3':
+    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
+    deprecated: Use @eslint/object-schema instead
+
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@radix-ui/number@1.1.0':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
+
+  '@radix-ui/primitive@1.1.1':
+    resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
+
+  '@radix-ui/react-arrow@1.1.2':
+    resolution: {integrity: sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.1.4':
+    resolution: {integrity: sha512-wP0CPAHq+P5I4INKe3hJrIa1WoNqqrejzW+zoU0rOvo1b9gDEJJFl2rYfO1PYJUQCc2H1WZxIJmyv9BS8i5fLw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.2':
+    resolution: {integrity: sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.1':
+    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.5':
+    resolution: {integrity: sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.1':
+    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.2':
+    resolution: {integrity: sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.0':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.2':
+    resolution: {integrity: sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.2':
+    resolution: {integrity: sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.4':
+    resolution: {integrity: sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.2':
+    resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.0.2':
+    resolution: {integrity: sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.2.3':
+    resolution: {integrity: sha512-xtCsqt8Rp09FK50ItqEqTJ7Sxanz8EM8dnkVIhJrc/wkMMomSmXHvYbhv3E7Zx4oXh98aaLt9W679SUYXg4IDA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.2':
+    resolution: {integrity: sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.1.6':
+    resolution: {integrity: sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.1.2':
+    resolution: {integrity: sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.0':
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.1.0':
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.0':
+    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.0':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.0':
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.0':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.0':
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.1.2':
+    resolution: {integrity: sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.0':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+
+  '@rollup/rollup-android-arm-eabi@4.34.8':
+    resolution: {integrity: sha512-q217OSE8DTp8AFHuNHXo0Y86e1wtlfVrXiAlwkIvGRQv9zbc6mE3sjIVfwI8sYUyNxwOg0j/Vm1RKM04JcWLJw==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.34.8':
+    resolution: {integrity: sha512-Gigjz7mNWaOL9wCggvoK3jEIUUbGul656opstjaUSGC3eT0BM7PofdAJaBfPFWWkXNVAXbaQtC99OCg4sJv70Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.34.8':
+    resolution: {integrity: sha512-02rVdZ5tgdUNRxIUrFdcMBZQoaPMrxtwSb+/hOfBdqkatYHR3lZ2A2EGyHq2sGOd0Owk80oV3snlDASC24He3Q==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.34.8':
+    resolution: {integrity: sha512-qIP/elwR/tq/dYRx3lgwK31jkZvMiD6qUtOycLhTzCvrjbZ3LjQnEM9rNhSGpbLXVJYQ3rq39A6Re0h9tU2ynw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.34.8':
+    resolution: {integrity: sha512-IQNVXL9iY6NniYbTaOKdrlVP3XIqazBgJOVkddzJlqnCpRi/yAeSOa8PLcECFSQochzqApIOE1GHNu3pCz+BDA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.34.8':
+    resolution: {integrity: sha512-TYXcHghgnCqYFiE3FT5QwXtOZqDj5GmaFNTNt3jNC+vh22dc/ukG2cG+pi75QO4kACohZzidsq7yKTKwq/Jq7Q==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.8':
+    resolution: {integrity: sha512-A4iphFGNkWRd+5m3VIGuqHnG3MVnqKe7Al57u9mwgbyZ2/xF9Jio72MaY7xxh+Y87VAHmGQr73qoKL9HPbXj1g==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.34.8':
+    resolution: {integrity: sha512-S0lqKLfTm5u+QTxlFiAnb2J/2dgQqRy/XvziPtDd1rKZFXHTyYLoVL58M/XFwDI01AQCDIevGLbQrMAtdyanpA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.34.8':
+    resolution: {integrity: sha512-jpz9YOuPiSkL4G4pqKrus0pn9aYwpImGkosRKwNi+sJSkz+WU3anZe6hi73StLOQdfXYXC7hUfsQlTnjMd3s1A==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.34.8':
+    resolution: {integrity: sha512-KdSfaROOUJXgTVxJNAZ3KwkRc5nggDk+06P6lgi1HLv1hskgvxHUKZ4xtwHkVYJ1Rep4GNo+uEfycCRRxht7+Q==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.8':
+    resolution: {integrity: sha512-NyF4gcxwkMFRjgXBM6g2lkT58OWztZvw5KkV2K0qqSnUEqCVcqdh2jN4gQrTn/YUpAcNKyFHfoOZEer9nwo6uQ==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.8':
+    resolution: {integrity: sha512-LMJc999GkhGvktHU85zNTDImZVUCJ1z/MbAJTnviiWmmjyckP5aQsHtcujMjpNdMZPT2rQEDBlJfubhs3jsMfw==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.34.8':
+    resolution: {integrity: sha512-xAQCAHPj8nJq1PI3z8CIZzXuXCstquz7cIOL73HHdXiRcKk8Ywwqtx2wrIy23EcTn4aZ2fLJNBB8d0tQENPCmw==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.34.8':
+    resolution: {integrity: sha512-DdePVk1NDEuc3fOe3dPPTb+rjMtuFw89gw6gVWxQFAuEqqSdDKnrwzZHrUYdac7A7dXl9Q2Vflxpme15gUWQFA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.34.8':
+    resolution: {integrity: sha512-8y7ED8gjxITUltTUEJLQdgpbPh1sUQ0kMTmufRF/Ns5tI9TNMNlhWtmPKKHCU0SilX+3MJkZ0zERYYGIVBYHIA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.34.8':
+    resolution: {integrity: sha512-SCXcP0ZpGFIe7Ge+McxY5zKxiEI5ra+GT3QRxL0pMMtxPfpyLAKleZODi1zdRHkz5/BhueUrYtYVgubqe9JBNQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-win32-arm64-msvc@4.34.8':
+    resolution: {integrity: sha512-YHYsgzZgFJzTRbth4h7Or0m5O74Yda+hLin0irAIobkLQFRQd1qWmnoVfwmKm9TXIZVAD0nZ+GEb2ICicLyCnQ==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.34.8':
+    resolution: {integrity: sha512-r3NRQrXkHr4uWy5TOjTpTYojR9XmF0j/RYgKCef+Ag46FWUTltm5ziticv8LdNsDMehjJ543x/+TJAek/xBA2w==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.34.8':
+    resolution: {integrity: sha512-U0FaE5O1BCpZSeE6gBl3c5ObhePQSfk9vDRToMmTkbhCOgW4jqvtS5LGyQ76L1fH8sM0keRp4uDTsbjiUyjk0g==}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/node@4.0.7':
+    resolution: {integrity: sha512-dkFXufkbRB2mu3FPsW5xLAUWJyexpJA+/VtQj18k3SUiJVLdpgzBd1v1gRRcIpEJj7K5KpxBKfOXlZxT3ZZRuA==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.7':
+    resolution: {integrity: sha512-5iQXXcAeOHBZy8ASfHFm1k0O/9wR2E3tKh6+P+ilZZbQiMgu+qrnfpBWYPc3FPuQdWiWb73069WT5D+CAfx/tg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.7':
+    resolution: {integrity: sha512-7yGZtEc5IgVYylqK/2B0yVqoofk4UAbkn1ygNpIJZyrOhbymsfr8uUFCueTu2fUxmAYIfMZ8waWo2dLg/NgLgg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.7':
+    resolution: {integrity: sha512-tPQDV20fBjb26yWbPqT1ZSoDChomMCiXTKn4jupMSoMCFyU7+OJvIY1ryjqBuY622dEBJ8LnCDDWsnj1lX9nNQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.7':
+    resolution: {integrity: sha512-sZqJpTyTZiknU9LLHuByg5GKTW+u3FqM7q7myequAXxKOpAFiOfXpY710FuMY+gjzSapyRbDXJlsTQtCyiTo5w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.7':
+    resolution: {integrity: sha512-PBgvULgeSswjd8cbZ91gdIcIDMdc3TUHV5XemEpxlqt9M8KoydJzkuB/Dt910jYdofOIaTWRL6adG9nJICvU4A==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.7':
+    resolution: {integrity: sha512-By/a2yeh+e9b+C67F88ndSwVJl2A3tcUDb29FbedDi+DZ4Mr07Oqw9Y1DrDrtHIDhIZ3bmmiL1dkH2YxrtV+zw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.7':
+    resolution: {integrity: sha512-WHYs3cpPEJb/ccyT20NOzopYQkl7JKncNBUbb77YFlwlXMVJLLV3nrXQKhr7DmZxz2ZXqjyUwsj2rdzd9stYdw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.7':
+    resolution: {integrity: sha512-7bP1UyuX9kFxbOwkeIJhBZNevKYPXB6xZI37v09fqi6rqRJR8elybwjMUHm54GVP+UTtJ14ueB1K54Dy1tIO6w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.7':
+    resolution: {integrity: sha512-gBQIV8nL/LuhARNGeroqzXymMzzW5wQzqlteVqOVoqwEfpHOP3GMird5pGFbnpY+NP0fOlsZGrxxOPQ4W/84bQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.7':
+    resolution: {integrity: sha512-aH530NFfx0kpQpvYMfWoeG03zGnRCMVlQG8do/5XeahYydz+6SIBxA1tl/cyITSJyWZHyVt6GVNkXeAD30v0Xg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.7':
+    resolution: {integrity: sha512-8Cva6bbJN7ZJx320k7vxGGdU0ewmpfS5A4PudyzUuofdi8MgeINuiiWiPQ0VZCda/GX88K6qp+6UpDZNVr8HMQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.7':
+    resolution: {integrity: sha512-yr6w5YMgjy+B+zkJiJtIYGXW+HNYOPfRPtSs+aqLnKwdEzNrGv4ZuJh9hYJ3mcA+HMq/K1rtFV+KsEr65S558g==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/vite@4.0.7':
+    resolution: {integrity: sha512-GYx5sxArfIMtdZCsxfya3S/efMmf4RvfqdiLUozkhmSFBNUFnYVodatpoO/en4/BsOIGvq/RB6HwcTLn9prFnQ==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.6.8':
+    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.20.6':
+    resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
+
+  '@types/estree@1.0.6':
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/node@22.13.4':
+    resolution: {integrity: sha512-ywP2X0DYtX3y08eFVx5fNIw7/uIv8hYUKgXoK8oayJlLnKcRfEYCxWMVE1XagUdVtCJlZT1AU4LXEABW+L1Peg==}
+
+  '@types/prop-types@15.7.14':
+    resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
+
+  '@types/react-dom@18.3.5':
+    resolution: {integrity: sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==}
+    peerDependencies:
+      '@types/react': ^18.0.0
+
+  '@types/react@18.3.18':
+    resolution: {integrity: sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==}
+
+  '@types/semver@7.5.8':
+    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
+
+  '@typescript-eslint/eslint-plugin@6.21.0':
+    resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/parser@6.21.0':
+    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/scope-manager@6.21.0':
+    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+
+  '@typescript-eslint/type-utils@6.21.0':
+    resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/types@6.21.0':
+    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+
+  '@typescript-eslint/typescript-estree@6.21.0':
+    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/utils@6.21.0':
+    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+
+  '@typescript-eslint/visitor-keys@6.21.0':
+    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+
+  '@vitejs/plugin-react@4.3.4':
+    resolution: {integrity: sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  brace-expansion@1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+
+  brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.24.4:
+    resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  caniuse-lite@1.0.30001700:
+    resolution: {integrity: sha512-2S6XIXwaE7K7erT8dY+kLQcpa5ms63XlRkMkReXjle+kf6c5g38vyMl+Z5y8dSxOFDhcFe+nxnn261PLxBSQsQ==}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+
+  electron-to-chromium@1.5.102:
+    resolution: {integrity: sha512-eHhqaja8tE/FNpIiBrvBjFV/SSKpyWHLvxuR9dPTdo+3V9ppdLmFB7ZZQ98qNovcngPLYIz0oOBF9P0FfZef5Q==}
+
+  enhanced-resolve@5.18.1:
+    resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
+    engines: {node: '>=10.13.0'}
+
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  eslint-plugin-react-hooks@4.6.2:
+    resolution: {integrity: sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+
+  eslint-plugin-react-refresh@0.4.19:
+    resolution: {integrity: sha512-eyy8pcr/YxSYjBoqIFSrlbn9i/xvxUFa8CjzAYo9cFjgGXqq1hyjihcpZvxRLalpaWmueWR81xn7vuKmAFijDQ==}
+    peerDependencies:
+      eslint: '>=8.40'
+
+  eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint@8.57.1:
+    resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+    hasBin: true
+
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fastq@1.19.0:
+    resolution: {integrity: sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==}
+
+  file-entry-cache@6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
+  globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-darwin-arm64@1.29.1:
+    resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.29.1:
+    resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.1:
+    resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.29.1:
+    resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.1:
+    resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
+    engines: {node: '>= 12.0.0'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lucide-react@0.475.0:
+    resolution: {integrity: sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@9.0.3:
+    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  postcss@8.5.3:
+    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
+  react-refresh@0.14.2:
+    resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
+    engines: {node: '>=0.10.0'}
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.6.3:
+    resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  reusify@1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  rollup@4.34.8:
+    resolution: {integrity: sha512-489gTVMzAYdiZHFVA/ig/iYFllCcWFHMvUHI1rpFmkoUtRlQxqh6/yiNqnYibjMZ2b/+FUQwldG+aLsEt6bglQ==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.1:
+    resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  tailwind-merge@3.0.1:
+    resolution: {integrity: sha512-AvzE8FmSoXC7nC+oU5GlQJbip2UO7tmOhOfQyOmPhrStOGXHU08j8mZEHZ4BmCqY5dWTCo4ClWkNyRNx1wpT0g==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
+  tailwindcss@4.0.7:
+    resolution: {integrity: sha512-yH5bPPyapavo7L+547h3c4jcBXcrKwybQRjwdEIVAd9iXRvy/3T1CC6XSQEgZtRySjKfqvo3Cc0ZF1DTheuIdA==}
+
+  tapable@2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
+
+  text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  ts-api-utils@1.4.3:
+    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+
+  typescript@5.7.3:
+    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@6.20.0:
+    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
+
+  update-browserslist-db@1.1.2:
+    resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  vite@5.4.14:
+    resolution: {integrity: sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+snapshots:
+
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@babel/code-frame@7.26.2':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.26.8': {}
+
+  '@babel/core@7.26.9':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.9
+      '@babel/helper-compilation-targets': 7.26.5
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9)
+      '@babel/helpers': 7.26.9
+      '@babel/parser': 7.26.9
+      '@babel/template': 7.26.9
+      '@babel/traverse': 7.26.9
+      '@babel/types': 7.26.9
+      convert-source-map: 2.0.0
+      debug: 4.4.0
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.26.9':
+    dependencies:
+      '@babel/parser': 7.26.9
+      '@babel/types': 7.26.9
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.26.5':
+    dependencies:
+      '@babel/compat-data': 7.26.8
+      '@babel/helper-validator-option': 7.25.9
+      browserslist: 4.24.4
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-module-imports@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.26.9
+      '@babel/types': 7.26.9
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.9)':
+    dependencies:
+      '@babel/core': 7.26.9
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/traverse': 7.26.9
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.26.5': {}
+
+  '@babel/helper-string-parser@7.25.9': {}
+
+  '@babel/helper-validator-identifier@7.25.9': {}
+
+  '@babel/helper-validator-option@7.25.9': {}
+
+  '@babel/helpers@7.26.9':
+    dependencies:
+      '@babel/template': 7.26.9
+      '@babel/types': 7.26.9
+
+  '@babel/parser@7.26.9':
+    dependencies:
+      '@babel/types': 7.26.9
+
+  '@babel/plugin-transform-react-jsx-self@7.25.9(@babel/core@7.26.9)':
+    dependencies:
+      '@babel/core': 7.26.9
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-transform-react-jsx-source@7.25.9(@babel/core@7.26.9)':
+    dependencies:
+      '@babel/core': 7.26.9
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/template@7.26.9':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.9
+      '@babel/types': 7.26.9
+
+  '@babel/traverse@7.26.9':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.9
+      '@babel/parser': 7.26.9
+      '@babel/template': 7.26.9
+      '@babel/types': 7.26.9
+      debug: 4.4.0
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.26.9':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm@0.21.5':
+    optional: true
+
+  '@esbuild/android-x64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-s390x@0.21.5':
+    optional: true
+
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.4.1(eslint@8.57.1)':
+    dependencies:
+      eslint: 8.57.1
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/eslintrc@2.1.4':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.0
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@8.57.1': {}
+
+  '@floating-ui/core@1.6.9':
+    dependencies:
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/dom@1.6.13':
+    dependencies:
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.6.13
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@floating-ui/utils@0.2.9': {}
+
+  '@humanwhocodes/config-array@0.13.0':
+    dependencies:
+      '@humanwhocodes/object-schema': 2.0.3
+      debug: 4.4.0
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/object-schema@2.0.3': {}
+
+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.0
+
+  '@radix-ui/number@1.1.0': {}
+
+  '@radix-ui/primitive@1.1.1': {}
+
+  '@radix-ui/react-arrow@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-checkbox@1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-collection@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.2(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-compose-refs@1.1.1(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-context@1.1.1(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-direction@1.1.0(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-dismissable-layer@1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-focus-guards@1.1.1(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-focus-scope@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-id@1.1.0(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-label@2.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-popper@1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/rect': 1.1.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-portal@1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-presence@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-primitive@2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.2(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-radio-group@1.2.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-roving-focus@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-select@2.1.6(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.5(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.2(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.18)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-slot@1.1.2(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-use-previous@1.1.0(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-use-rect@1.1.0(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.0
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-use-size@1.1.0(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  '@radix-ui/react-visually-hidden@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/rect@1.1.0': {}
+
+  '@rollup/rollup-android-arm-eabi@4.34.8':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.34.8':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.34.8':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.34.8':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.34.8':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.34.8':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.8':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.34.8':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.34.8':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.34.8':
+    optional: true
+
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.8':
+    optional: true
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.8':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.34.8':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.34.8':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.34.8':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.34.8':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.34.8':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.34.8':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.34.8':
+    optional: true
+
+  '@tailwindcss/node@4.0.7':
+    dependencies:
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      tailwindcss: 4.0.7
+
+  '@tailwindcss/oxide-android-arm64@4.0.7':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.7':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.7':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.7':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.7':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.7':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.7':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.7':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.7':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.7':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.7':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.7':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.7
+      '@tailwindcss/oxide-darwin-arm64': 4.0.7
+      '@tailwindcss/oxide-darwin-x64': 4.0.7
+      '@tailwindcss/oxide-freebsd-x64': 4.0.7
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.7
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.7
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.7
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.7
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.7
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.7
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.7
+
+  '@tailwindcss/vite@4.0.7(vite@5.4.14(@types/node@22.13.4)(lightningcss@1.29.1))':
+    dependencies:
+      '@tailwindcss/node': 4.0.7
+      '@tailwindcss/oxide': 4.0.7
+      lightningcss: 1.29.1
+      tailwindcss: 4.0.7
+      vite: 5.4.14(@types/node@22.13.4)(lightningcss@1.29.1)
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.26.9
+      '@babel/types': 7.26.9
+      '@types/babel__generator': 7.6.8
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.20.6
+
+  '@types/babel__generator@7.6.8':
+    dependencies:
+      '@babel/types': 7.26.9
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.26.9
+      '@babel/types': 7.26.9
+
+  '@types/babel__traverse@7.20.6':
+    dependencies:
+      '@babel/types': 7.26.9
+
+  '@types/estree@1.0.6': {}
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/node@22.13.4':
+    dependencies:
+      undici-types: 6.20.0
+
+  '@types/prop-types@15.7.14': {}
+
+  '@types/react-dom@18.3.5(@types/react@18.3.18)':
+    dependencies:
+      '@types/react': 18.3.18
+
+  '@types/react@18.3.18':
+    dependencies:
+      '@types/prop-types': 15.7.14
+      csstype: 3.1.3
+
+  '@types/semver@7.5.8': {}
+
+  '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)(typescript@5.7.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.0
+      eslint: 8.57.1
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      natural-compare: 1.4.0
+      semver: 7.7.1
+      ts-api-utils: 1.4.3(typescript@5.7.3)
+    optionalDependencies:
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.3)
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.0
+      eslint: 8.57.1
+    optionalDependencies:
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@6.21.0':
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+
+  '@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(typescript@5.7.3)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.7.3)
+      debug: 4.4.0
+      eslint: 8.57.1
+      ts-api-utils: 1.4.3(typescript@5.7.3)
+    optionalDependencies:
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@6.21.0': {}
+
+  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.7.3)':
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.0
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.7.1
+      ts-api-utils: 1.4.3(typescript@5.7.3)
+    optionalDependencies:
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.7.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.3)
+      eslint: 8.57.1
+      semver: 7.7.1
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@typescript-eslint/visitor-keys@6.21.0':
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      eslint-visitor-keys: 3.4.3
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@vitejs/plugin-react@4.3.4(vite@5.4.14(@types/node@22.13.4)(lightningcss@1.29.1))':
+    dependencies:
+      '@babel/core': 7.26.9
+      '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.9)
+      '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.9)
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.14.2
+      vite: 5.4.14(@types/node@22.13.4)(lightningcss@1.29.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  acorn-jsx@5.3.2(acorn@8.14.0):
+    dependencies:
+      acorn: 8.14.0
+
+  acorn@8.14.0: {}
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  argparse@2.0.1: {}
+
+  aria-hidden@1.2.4:
+    dependencies:
+      tslib: 2.8.1
+
+  array-union@2.1.0: {}
+
+  balanced-match@1.0.2: {}
+
+  brace-expansion@1.1.11:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.1:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.24.4:
+    dependencies:
+      caniuse-lite: 1.0.30001700
+      electron-to-chromium: 1.5.102
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.2(browserslist@4.24.4)
+
+  callsites@3.1.0: {}
+
+  caniuse-lite@1.0.30001700: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  clsx@2.1.1: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  concat-map@0.0.1: {}
+
+  convert-source-map@2.0.0: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  csstype@3.1.3: {}
+
+  debug@4.4.0:
+    dependencies:
+      ms: 2.1.3
+
+  deep-is@0.1.4: {}
+
+  detect-libc@1.0.3: {}
+
+  detect-node-es@1.1.0: {}
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  doctrine@3.0.0:
+    dependencies:
+      esutils: 2.0.3
+
+  electron-to-chromium@1.5.102: {}
+
+  enhanced-resolve@5.18.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+
+  esbuild@0.21.5:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  eslint-plugin-react-hooks@4.6.2(eslint@8.57.1):
+    dependencies:
+      eslint: 8.57.1
+
+  eslint-plugin-react-refresh@0.4.19(eslint@8.57.1):
+    dependencies:
+      eslint: 8.57.1
+
+  eslint-scope@7.2.2:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint@8.57.1:
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/eslintrc': 2.1.4
+      '@eslint/js': 8.57.1
+      '@humanwhocodes/config-array': 0.13.0
+      '@humanwhocodes/module-importer': 1.0.1
+      '@nodelib/fs.walk': 1.2.8
+      '@ungap/structured-clone': 1.3.0
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.0
+      doctrine: 3.0.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      globals: 13.24.0
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      is-path-inside: 3.0.3
+      js-yaml: 4.1.0
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+      strip-ansi: 6.0.1
+      text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@9.6.1:
+    dependencies:
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      eslint-visitor-keys: 3.4.3
+
+  esquery@1.6.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  esutils@2.0.3: {}
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fastq@1.19.0:
+    dependencies:
+      reusify: 1.0.4
+
+  file-entry-cache@6.0.1:
+    dependencies:
+      flat-cache: 3.2.0
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@3.2.0:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+      rimraf: 3.0.2
+
+  flatted@3.3.3: {}
+
+  fs.realpath@1.0.0: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  gensync@1.0.0-beta.2: {}
+
+  get-nonce@1.0.1: {}
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  globals@11.12.0: {}
+
+  globals@13.24.0:
+    dependencies:
+      type-fest: 0.20.2
+
+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  graceful-fs@4.2.11: {}
+
+  graphemer@1.4.0: {}
+
+  has-flag@4.0.0: {}
+
+  ignore@5.3.2: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.4: {}
+
+  is-extglob@2.1.1: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-number@7.0.0: {}
+
+  is-path-inside@3.0.3: {}
+
+  isexe@2.0.0: {}
+
+  jiti@2.4.2: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.0:
+    dependencies:
+      argparse: 2.0.1
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json5@2.2.3: {}
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lightningcss-darwin-arm64@1.29.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.29.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.29.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    optional: true
+
+  lightningcss@1.29.1:
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.1
+      lightningcss-darwin-x64: 1.29.1
+      lightningcss-freebsd-x64: 1.29.1
+      lightningcss-linux-arm-gnueabihf: 1.29.1
+      lightningcss-linux-arm64-gnu: 1.29.1
+      lightningcss-linux-arm64-musl: 1.29.1
+      lightningcss-linux-x64-gnu: 1.29.1
+      lightningcss-linux-x64-musl: 1.29.1
+      lightningcss-win32-arm64-msvc: 1.29.1
+      lightningcss-win32-x64-msvc: 1.29.1
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash.merge@4.6.2: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lucide-react@0.475.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.11
+
+  minimatch@9.0.3:
+    dependencies:
+      brace-expansion: 2.0.1
+
+  ms@2.1.3: {}
+
+  nanoid@3.3.8: {}
+
+  natural-compare@1.4.0: {}
+
+  node-releases@2.0.19: {}
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  path-exists@4.0.0: {}
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-type@4.0.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  postcss@8.5.3:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  punycode@2.3.1: {}
+
+  queue-microtask@1.2.3: {}
+
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
+  react-refresh@0.14.2: {}
+
+  react-remove-scroll-bar@2.3.8(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/react@18.3.18)(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  react-remove-scroll@2.6.3(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/react@18.3.18)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.3.18)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.3.18)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.3.18)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  react-style-singleton@2.2.3(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
+  resolve-from@4.0.0: {}
+
+  reusify@1.0.4: {}
+
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+
+  rollup@4.34.8:
+    dependencies:
+      '@types/estree': 1.0.6
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.34.8
+      '@rollup/rollup-android-arm64': 4.34.8
+      '@rollup/rollup-darwin-arm64': 4.34.8
+      '@rollup/rollup-darwin-x64': 4.34.8
+      '@rollup/rollup-freebsd-arm64': 4.34.8
+      '@rollup/rollup-freebsd-x64': 4.34.8
+      '@rollup/rollup-linux-arm-gnueabihf': 4.34.8
+      '@rollup/rollup-linux-arm-musleabihf': 4.34.8
+      '@rollup/rollup-linux-arm64-gnu': 4.34.8
+      '@rollup/rollup-linux-arm64-musl': 4.34.8
+      '@rollup/rollup-linux-loongarch64-gnu': 4.34.8
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.34.8
+      '@rollup/rollup-linux-riscv64-gnu': 4.34.8
+      '@rollup/rollup-linux-s390x-gnu': 4.34.8
+      '@rollup/rollup-linux-x64-gnu': 4.34.8
+      '@rollup/rollup-linux-x64-musl': 4.34.8
+      '@rollup/rollup-win32-arm64-msvc': 4.34.8
+      '@rollup/rollup-win32-ia32-msvc': 4.34.8
+      '@rollup/rollup-win32-x64-msvc': 4.34.8
+      fsevents: 2.3.3
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+
+  semver@6.3.1: {}
+
+  semver@7.7.1: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  slash@3.0.0: {}
+
+  source-map-js@1.2.1: {}
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-json-comments@3.1.1: {}
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  tailwind-merge@3.0.1: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@4.0.7):
+    dependencies:
+      tailwindcss: 4.0.7
+
+  tailwindcss@4.0.7: {}
+
+  tapable@2.2.1: {}
+
+  text-table@0.2.0: {}
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  ts-api-utils@1.4.3(typescript@5.7.3):
+    dependencies:
+      typescript: 5.7.3
+
+  tslib@2.8.1: {}
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@0.20.2: {}
+
+  typescript@5.7.3: {}
+
+  undici-types@6.20.0: {}
+
+  update-browserslist-db@1.1.2(browserslist@4.24.4):
+    dependencies:
+      browserslist: 4.24.4
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  use-callback-ref@1.3.3(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  use-sidecar@1.1.3(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  vite@5.4.14(@types/node@22.13.4)(lightningcss@1.29.1):
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.5.3
+      rollup: 4.34.8
+    optionalDependencies:
+      '@types/node': 22.13.4
+      fsevents: 2.3.3
+      lightningcss: 1.29.1
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  word-wrap@1.2.5: {}
+
+  wrappy@1.0.2: {}
+
+  yallist@3.1.1: {}
+
+  yocto-queue@0.1.0: {}
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/public/vite.svg b/packages/shadcn/test/fixtures/vite-with-tailwind/public/vite.svg
new file mode 100644
index 00000000000..e7b8dfb1b2a
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/src/App.css b/packages/shadcn/test/fixtures/vite-with-tailwind/src/App.css
new file mode 100644
index 00000000000..b9d355df2a5
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/src/App.tsx b/packages/shadcn/test/fixtures/vite-with-tailwind/src/App.tsx
new file mode 100644
index 00000000000..8a708c9d6c1
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/src/App.tsx
@@ -0,0 +1,3 @@
+export default function App() {
+  return <div>Hello World</div>
+}
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/src/assets/react.svg b/packages/shadcn/test/fixtures/vite-with-tailwind/src/assets/react.svg
new file mode 100644
index 00000000000..6c87de9bb33
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/src/components/ui/button.tsx b/packages/shadcn/test/fixtures/vite-with-tailwind/src/components/ui/button.tsx
new file mode 100644
index 00000000000..56027112f37
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/src/components/ui/button.tsx
@@ -0,0 +1,3 @@
+export function Button() {
+  return <button>Click me</button>
+}
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/src/index.css b/packages/shadcn/test/fixtures/vite-with-tailwind/src/index.css
new file mode 100644
index 00000000000..1f613d093b0
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/src/index.css
@@ -0,0 +1,124 @@
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.87 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.87 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/src/lib/utils.ts b/packages/shadcn/test/fixtures/vite-with-tailwind/src/lib/utils.ts
new file mode 100644
index 00000000000..bd0c391ddd1
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/src/main.tsx b/packages/shadcn/test/fixtures/vite-with-tailwind/src/main.tsx
new file mode 100644
index 00000000000..3d7150da80e
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/src/vite-env.d.ts b/packages/shadcn/test/fixtures/vite-with-tailwind/src/vite-env.d.ts
new file mode 100644
index 00000000000..11f02fe2a00
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/tsconfig.json b/packages/shadcn/test/fixtures/vite-with-tailwind/tsconfig.json
new file mode 100644
index 00000000000..4a83aa7044c
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/tsconfig.node.json b/packages/shadcn/test/fixtures/vite-with-tailwind/tsconfig.node.json
new file mode 100644
index 00000000000..c27e738d9f2
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/tsconfig.node.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/shadcn/test/fixtures/vite-with-tailwind/vite.config.ts b/packages/shadcn/test/fixtures/vite-with-tailwind/vite.config.ts
new file mode 100644
index 00000000000..d1245a89683
--- /dev/null
+++ b/packages/shadcn/test/fixtures/vite-with-tailwind/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from "vite"
+import tailwindcss from "@tailwindcss/vite"
+import path from "path"
+
+export default defineConfig({
+  plugins: [tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})
diff --git a/packages/shadcn/test/utils/__snapshots__/transform-css-vars.test.ts.snap b/packages/shadcn/test/utils/__snapshots__/transform-css-vars.test.ts.snap
index 198eb1a1e8a..4169352a130 100644
--- a/packages/shadcn/test/utils/__snapshots__/transform-css-vars.test.ts.snap
+++ b/packages/shadcn/test/utils/__snapshots__/transform-css-vars.test.ts.snap
@@ -12,7 +12,7 @@ exports[`transform css vars 2`] = `
 "import * as React from "react"
 export function Foo() {
 	return <div className="bg-white hover:bg-stone-100 text-stone-50 sm:focus:text-stone-900 dark:bg-stone-950 dark:hover:bg-stone-800 dark:text-stone-900 dark:sm:focus:text-stone-50">foo</div>
-}""
+}"
     "
 `;
 
@@ -20,7 +20,7 @@ exports[`transform css vars 3`] = `
 "import * as React from "react"
 export function Foo() {
 	return <div className={cn("bg-white hover:bg-stone-100 dark:bg-stone-950 dark:hover:bg-stone-800", true && "text-stone-50 sm:focus:text-stone-900 dark:text-stone-900 dark:sm:focus:text-stone-50")}>foo</div>
-}""
+}"
     "
 `;
 
@@ -28,6 +28,6 @@ exports[`transform css vars 4`] = `
 "import * as React from "react"
 export function Foo() {
 	return <div className={cn("bg-white border border-stone-200 dark:bg-stone-950 dark:border-stone-800")}>foo</div>
-}""
+}"
     "
 `;
diff --git a/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap b/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap
index 6e1c2d033c6..17a69e46722 100644
--- a/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap
+++ b/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap
@@ -1,5 +1,57 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`transform async/dynamic imports 1`] = `
+"import * as React from "react"
+import { Button } from "@/components/ui/button"
+
+async function loadComponent() {
+  const { cn } = await import("@/lib/utils")
+  const module = await import("@/components/ui/card")
+  return module
+}
+
+function lazyLoad() {
+  return import("@/components/ui/dialog").then(module => module)
+}
+    "
+`;
+
+exports[`transform async/dynamic imports 2`] = `
+"import { Button } from "~/components/ui/button"
+
+async function loadUtils() {
+  const utils = await import("~/lib/utils")
+  const { cn } = await import("~/lib/utils")
+  return { utils, cn }
+}
+
+const dialogPromise = import("~/components/ui/dialog")
+const cardModule = import("~/components/ui/card")
+    "
+`;
+
+exports[`transform dynamic imports with cn utility 1`] = `
+"async function loadCn() {
+  const { cn } = await import("@/lib/utils")
+  return cn
+}
+
+async function loadMultiple() {
+  const utils1 = await import("@/lib/utils")
+  const { cn, twMerge } = await import("@/lib/utils")
+  const other = await import("@/lib/other")
+}
+    "
+`;
+
+exports[`transform dynamic imports with cn utility 2`] = `
+"async function loadWorkspaceCn() {
+  const { cn } = await import("@workspace/lib/utils")
+  return cn
+}
+    "
+`;
+
 exports[`transform import 1`] = `
 "import * as React from "react"
 import { Foo } from "bar"
@@ -58,3 +110,47 @@ import { Foo } from "bar"
     import { bar } from "~/lib/utils/bar"
     "
 `;
+
+exports[`transform import 6`] = `
+"import * as React from "react"
+import { Foo } from "bar"
+    import { Button } from "@custom-alias/components/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@custom-alias/components/box"
+
+    import { cn } from "@custom-alias/lib/utils"
+    "
+`;
+
+exports[`transform import for monorepo 1`] = `
+"import * as React from "react"
+import { Foo } from "bar"
+    import { Button } from "@workspace/ui/components/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@workspace/ui/components/box"
+
+    import { cn } from "@workspace/ui/lib/utils"
+    "
+`;
+
+exports[`transform import for monorepo 2`] = `
+"import * as React from "react"
+import { Foo } from "bar"
+    import { Button } from "@repo/ui/components/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@repo/ui/components/box"
+
+    import { cn } from "@repo/ui/lib/utils"
+    "
+`;
+
+exports[`transform re-exports with dynamic imports 1`] = `
+"export { cn } from "@/lib/utils"
+export { Button } from "@/components/ui/button"
+
+async function load() {
+  const module = await import("@/components/ui/card")
+  return module
+}
+    "
+`;
diff --git a/packages/shadcn/test/utils/__snapshots__/transform-rsc.test.ts.snap b/packages/shadcn/test/utils/__snapshots__/transform-rsc.test.ts.snap
index c0d1e446bd3..9f378a737df 100644
--- a/packages/shadcn/test/utils/__snapshots__/transform-rsc.test.ts.snap
+++ b/packages/shadcn/test/utils/__snapshots__/transform-rsc.test.ts.snap
@@ -29,3 +29,27 @@ import { Foo } from "bar"
 "use client"
     "
 `;
+
+exports[`transform rsc 5`] = `
+"'use client'
+
+      import * as React from 'react'
+import { Foo } from 'bar'
+    "
+`;
+
+exports[`transform rsc 6`] = `
+"import * as React from 'react'
+import { Foo } from 'bar'
+    "
+`;
+
+exports[`transform rsc 7`] = `
+"'use foo'
+
+      import * as React from 'react'
+import { Foo } from 'bar'
+
+'use client'
+    "
+`;
diff --git a/packages/shadcn/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap b/packages/shadcn/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap
index 5019ddb6d73..2812b938767 100644
--- a/packages/shadcn/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap
+++ b/packages/shadcn/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`transform tailwind prefix 1`] = `
 "import * as React from "react"
             export function Foo() {
-                return <div className="tw-bg-background hover:tw-bg-muted tw-text-primary-foreground sm:focus:tw-text-accent-foreground">foo</div>
+                return <div className="tw:bg-background hover:tw:bg-muted tw:text-primary-foreground sm:focus:tw:text-accent-foreground">foo</div>
             }
         "
 `;
@@ -11,7 +11,7 @@ exports[`transform tailwind prefix 1`] = `
 exports[`transform tailwind prefix 2`] = `
 "import * as React from "react"
 export function Foo() {
-	return <div className="tw-bg-white hover:tw-bg-stone-100 tw-text-stone-50 sm:focus:tw-text-stone-900 dark:tw-bg-stone-950 dark:hover:tw-bg-stone-800 dark:tw-text-stone-900 dark:sm:focus:tw-text-stone-50">foo</div>
+	return <div className="tw:bg-white hover:tw:bg-stone-100 tw:text-stone-50 sm:focus:tw:text-stone-900 dark:tw:bg-stone-950 dark:hover:tw:bg-stone-800 dark:tw:text-stone-900 dark:sm:focus:tw:text-stone-50">foo</div>
 }
     "
 `;
@@ -19,7 +19,7 @@ export function Foo() {
 exports[`transform tailwind prefix 3`] = `
 "import * as React from "react"
 export function Foo() {
-	return <div className={cn("tw-bg-white hover:tw-bg-stone-100 dark:tw-bg-stone-950 dark:hover:tw-bg-stone-800", true && "tw-text-stone-50 sm:focus:tw-text-stone-900 dark:tw-text-stone-900 dark:sm:focus:tw-text-stone-50")}>foo</div>
+	return <div className={cn("tw:bg-white hover:tw:bg-stone-100 dark:tw:bg-stone-950 dark:hover:tw:bg-stone-800", true && "tw:text-stone-50 sm:focus:tw:text-stone-900 dark:tw:text-stone-900 dark:sm:focus:tw:text-stone-50")}>foo</div>
 }
     "
 `;
@@ -27,7 +27,7 @@ export function Foo() {
 exports[`transform tailwind prefix 4`] = `
 "import * as React from "react"
 export function Foo() {
-	return <div className={cn("tw-bg-background hover:tw-bg-muted", true && "tw-text-primary-foreground sm:focus:tw-text-accent-foreground")}>foo</div>
+	return <div className={cn("tw:bg-white hover:tw:bg-stone-100 dark:tw:bg-stone-950 dark:hover:tw:bg-stone-800", true && "tw:text-stone-50 sm:focus:tw:text-stone-900 dark:tw:text-stone-900 dark:sm:focus:tw:text-stone-50")}>foo</div>
 }
     "
 `;
@@ -105,10 +105,10 @@ exports[`transform tailwind prefix 5`] = `
  
 @layer base {
   * {
-    @apply tw-border-border;
+    @apply tw::border-border;
   }
   body {
-    @apply tw-bg-background tw-text-foreground;
+    @apply tw::bg-background tw::text-foreground;
   }
 }"
 `;
diff --git a/packages/shadcn/test/utils/apply-prefix.test.ts b/packages/shadcn/test/utils/apply-prefix.test.ts
index 9afed4c4ed0..9ae669e72bc 100644
--- a/packages/shadcn/test/utils/apply-prefix.test.ts
+++ b/packages/shadcn/test/utils/apply-prefix.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from "vitest"
 
 import { applyPrefix } from "../../src/utils/transformers/transform-tw-prefix"
 
-describe("apply tailwind prefix", () => {
+describe("apply tailwind prefix v3", () => {
   test.each([
     {
       input: "bg-slate-800 text-gray-500",
@@ -37,6 +37,45 @@ describe("apply tailwind prefix", () => {
         "tw-absolute tw-right-4 tw-top-4 tw-bg-primary tw-rounded-sm tw-opacity-70 tw-ring-offset-background tw-transition-opacity hover:tw-opacity-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-ring focus:tw-ring-offset-2 disabled:tw-pointer-events-none data-[state=open]:tw-bg-secondary",
     },
   ])(`applyTwPrefix($input) -> $output`, ({ input, output }) => {
-    expect(applyPrefix(input, "tw-")).toBe(output)
+    expect(applyPrefix(input, "tw-", "v3")).toBe(output)
+  })
+})
+
+describe("apply tailwind prefix v4", () => {
+  test.each([
+    {
+      input: "bg-slate-800 text-gray-500",
+      output: "tw:bg-slate-800 tw:text-gray-500",
+    },
+    {
+      input: "hover:dark:bg-background dark:text-foreground",
+      output: "tw:hover:dark:bg-background tw:dark:text-foreground",
+    },
+    {
+      input:
+        "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      output:
+        "tw:rounded-lg tw:border tw:border-slate-200 tw:bg-white tw:text-slate-950 tw:shadow-sm tw:dark:border-slate-800 tw:dark:bg-slate-950 tw:dark:text-slate-50",
+    },
+    {
+      input:
+        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900",
+      output:
+        "tw:text-red-500 tw:border-red-500/50 tw:dark:border-red-500 tw:[&>svg]:text-red-500 tw:text-red-500 tw:dark:text-red-900 tw:dark:border-red-900/50 tw:dark:dark:border-red-900 tw:dark:[&>svg]:text-red-900 tw:dark:text-red-900",
+    },
+    {
+      input:
+        "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      output:
+        "tw:flex tw:h-full tw:w-full tw:items-center tw:justify-center tw:rounded-full tw:bg-muted",
+    },
+    {
+      input:
+        "absolute right-4 top-4 bg-primary rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
+      output:
+        "tw:absolute tw:right-4 tw:top-4 tw:bg-primary tw:rounded-sm tw:opacity-70 tw:ring-offset-background tw:transition-opacity tw:hover:opacity-100 tw:focus:outline-none tw:focus:ring-2 tw:focus:ring-ring tw:focus:ring-offset-2 tw:disabled:pointer-events-none tw:data-[state=open]:bg-secondary",
+    },
+  ])(`applyTwPrefix($input) -> $output`, ({ input, output }) => {
+    expect(applyPrefix(input, "tw", "v4")).toBe(output)
   })
 })
diff --git a/packages/shadcn/test/utils/get-config.test.ts b/packages/shadcn/test/utils/get-config.test.ts
index c55473db698..65d3eaa4eaf 100644
--- a/packages/shadcn/test/utils/get-config.test.ts
+++ b/packages/shadcn/test/utils/get-config.test.ts
@@ -1,7 +1,11 @@
 import path from "path"
-import { expect, test } from "vitest"
+import { describe, expect, test } from "vitest"
 
-import { getConfig, getRawConfig } from "../../src/utils/get-config"
+import {
+  createConfig,
+  getConfig,
+  getRawConfig,
+} from "../../src/utils/get-config"
 
 test("get raw config", async () => {
   expect(
@@ -26,7 +30,7 @@ test("get raw config", async () => {
     },
   })
 
-  expect(
+  await expect(
     getRawConfig(path.resolve(__dirname, "../fixtures/config-invalid"))
   ).rejects.toThrowError()
 })
@@ -36,7 +40,7 @@ test("get config", async () => {
     await getConfig(path.resolve(__dirname, "../fixtures/config-none"))
   ).toEqual(null)
 
-  expect(
+  await expect(
     getConfig(path.resolve(__dirname, "../fixtures/config-invalid"))
   ).rejects.toThrowError()
 
@@ -86,6 +90,10 @@ test("get config", async () => {
       hooks: path.resolve(__dirname, "../fixtures/config-partial", "./hooks"),
       lib: path.resolve(__dirname, "../fixtures/config-partial", "./lib"),
     },
+    iconLibrary: "lucide",
+    registries: {
+      "@shadcn": "https://ui.shadcn.com/r/styles/{style}/{name}.json",
+    },
   })
 
   expect(
@@ -108,6 +116,7 @@ test("get config", async () => {
       hooks: "~/lib/hooks",
       ui: "~/ui",
     },
+    iconLibrary: "lucide",
     resolvedPaths: {
       cwd: path.resolve(__dirname, "../fixtures/config-full"),
       tailwindConfig: path.resolve(
@@ -138,6 +147,9 @@ test("get config", async () => {
         "./src/lib/utils"
       ),
     },
+    registries: {
+      "@shadcn": "https://ui.shadcn.com/r/styles/{style}/{name}.json",
+    },
   })
 
   expect(
@@ -156,6 +168,7 @@ test("get config", async () => {
       components: "@/components",
       utils: "@/lib/utils",
     },
+    iconLibrary: "radix",
     resolvedPaths: {
       cwd: path.resolve(__dirname, "../fixtures/config-jsx"),
       tailwindConfig: path.resolve(
@@ -178,5 +191,134 @@ test("get config", async () => {
       hooks: path.resolve(__dirname, "../fixtures/config-jsx", "./hooks"),
       lib: path.resolve(__dirname, "../fixtures/config-jsx", "./lib"),
     },
+    registries: {
+      "@shadcn": "https://ui.shadcn.com/r/styles/{style}/{name}.json",
+    },
+  })
+})
+
+describe("createConfig", () => {
+  test("creates default config when called without arguments", () => {
+    const config = createConfig()
+
+    expect(config).toMatchObject({
+      resolvedPaths: {
+        cwd: expect.any(String),
+        tailwindConfig: "",
+        tailwindCss: "",
+        utils: "",
+        components: "",
+        ui: "",
+        lib: "",
+        hooks: "",
+      },
+      style: "",
+      tailwind: {
+        config: "",
+        css: "",
+        baseColor: "",
+        cssVariables: false,
+      },
+      rsc: false,
+      tsx: true,
+      aliases: {
+        components: "",
+        utils: "",
+      },
+    })
+  })
+
+  test("overrides cwd in resolvedPaths", () => {
+    const customCwd = "/custom/path"
+    const config = createConfig({
+      resolvedPaths: {
+        cwd: customCwd,
+      },
+    })
+
+    expect(config.resolvedPaths.cwd).toBe(customCwd)
+    expect(config.resolvedPaths.components).toBe("")
+    expect(config.resolvedPaths.utils).toBe("")
+  })
+
+  test("overrides style", () => {
+    const config = createConfig({
+      style: "new-york",
+    })
+
+    expect(config.style).toBe("new-york")
+  })
+
+  test("overrides tailwind settings", () => {
+    const config = createConfig({
+      tailwind: {
+        baseColor: "slate",
+        cssVariables: true,
+      },
+    })
+
+    expect(config.tailwind.baseColor).toBe("slate")
+    expect(config.tailwind.cssVariables).toBe(true)
+    expect(config.tailwind.config).toBe("")
+    expect(config.tailwind.css).toBe("")
+  })
+
+  test("overrides boolean flags", () => {
+    const config = createConfig({
+      rsc: true,
+      tsx: false,
+    })
+
+    expect(config.rsc).toBe(true)
+    expect(config.tsx).toBe(false)
+  })
+
+  test("overrides aliases", () => {
+    const config = createConfig({
+      aliases: {
+        components: "@/components",
+        utils: "@/lib/utils",
+      },
+    })
+
+    expect(config.aliases.components).toBe("@/components")
+    expect(config.aliases.utils).toBe("@/lib/utils")
+  })
+
+  test("handles complex partial overrides", () => {
+    const config = createConfig({
+      style: "default",
+      resolvedPaths: {
+        cwd: "/my/project",
+        components: "/my/project/src/components",
+      },
+      tailwind: {
+        baseColor: "zinc",
+        prefix: "tw-",
+      },
+      aliases: {
+        ui: "@/components/ui",
+      },
+    })
+
+    expect(config.style).toBe("default")
+    expect(config.resolvedPaths.cwd).toBe("/my/project")
+    expect(config.resolvedPaths.components).toBe("/my/project/src/components")
+    expect(config.resolvedPaths.utils).toBe("")
+    expect(config.tailwind.baseColor).toBe("zinc")
+    expect(config.tailwind.prefix).toBe("tw-")
+    expect(config.tailwind.css).toBe("")
+    expect(config.aliases.ui).toBe("@/components/ui")
+    expect(config.aliases.components).toBe("")
+  })
+
+  test("returns new object instances", () => {
+    const config1 = createConfig()
+    const config2 = createConfig()
+
+    expect(config1).not.toBe(config2)
+    expect(config1.resolvedPaths).not.toBe(config2.resolvedPaths)
+    expect(config1.tailwind).not.toBe(config2.tailwind)
+    expect(config1.aliases).not.toBe(config2.aliases)
   })
 })
diff --git a/packages/shadcn/test/utils/get-item-target-path.test.ts b/packages/shadcn/test/utils/get-item-target-path.test.ts
index d3bca210802..c9f44e81c7b 100644
--- a/packages/shadcn/test/utils/get-item-target-path.test.ts
+++ b/packages/shadcn/test/utils/get-item-target-path.test.ts
@@ -1,8 +1,8 @@
 import path from "path"
 import { expect, test } from "vitest"
 
+import { getItemTargetPath } from "../../src/registry/api"
 import { getConfig } from "../../src/utils/get-config"
-import { getItemTargetPath } from "../../src/utils/registry"
 
 test("get item target path", async () => {
   // Full config.
diff --git a/packages/shadcn/test/utils/get-package-manager.test.ts b/packages/shadcn/test/utils/get-package-manager.test.ts
index 3858f68384d..c373b804af1 100644
--- a/packages/shadcn/test/utils/get-package-manager.test.ts
+++ b/packages/shadcn/test/utils/get-package-manager.test.ts
@@ -20,6 +20,12 @@ test("get package manager", async () => {
     await getPackageManager(path.resolve(__dirname, "../fixtures/project-bun"))
   ).toBe("bun")
 
+  expect(
+    await getPackageManager(
+      path.resolve(__dirname, "../fixtures/project-bun-lock")
+    )
+  ).toBe("bun")
+
   expect(
     await getPackageManager(path.resolve(__dirname, "../fixtures/next"))
   ).toBe("pnpm")
diff --git a/packages/shadcn/test/utils/get-project-info.test.ts b/packages/shadcn/test/utils/get-project-info.test.ts
index 06288881ce9..cd9708cd54a 100644
--- a/packages/shadcn/test/utils/get-project-info.test.ts
+++ b/packages/shadcn/test/utils/get-project-info.test.ts
@@ -15,6 +15,7 @@ describe("get project info", async () => {
         isTsx: true,
         tailwindConfigFile: "tailwind.config.ts",
         tailwindCssFile: "app/globals.css",
+        tailwindVersion: "v3",
         aliasPrefix: "@",
       },
     },
@@ -27,6 +28,7 @@ describe("get project info", async () => {
         isTsx: true,
         tailwindConfigFile: "tailwind.config.ts",
         tailwindCssFile: "src/app/styles.css",
+        tailwindVersion: "v3",
         aliasPrefix: "#",
       },
     },
@@ -39,6 +41,7 @@ describe("get project info", async () => {
         isTsx: true,
         tailwindConfigFile: "tailwind.config.ts",
         tailwindCssFile: "styles/globals.css",
+        tailwindVersion: "v4",
         aliasPrefix: "~",
       },
     },
@@ -51,6 +54,7 @@ describe("get project info", async () => {
         isTsx: true,
         tailwindConfigFile: "tailwind.config.ts",
         tailwindCssFile: "src/styles/globals.css",
+        tailwindVersion: "v4",
         aliasPrefix: "@",
       },
     },
@@ -63,6 +67,7 @@ describe("get project info", async () => {
         isTsx: true,
         tailwindConfigFile: "tailwind.config.ts",
         tailwindCssFile: "src/styles/globals.css",
+        tailwindVersion: "v3",
         aliasPrefix: "~",
       },
     },
@@ -75,6 +80,7 @@ describe("get project info", async () => {
         isTsx: true,
         tailwindConfigFile: "tailwind.config.ts",
         tailwindCssFile: "src/styles/globals.css",
+        tailwindVersion: "v3",
         aliasPrefix: "~",
       },
     },
@@ -87,6 +93,7 @@ describe("get project info", async () => {
         isTsx: true,
         tailwindConfigFile: "tailwind.config.ts",
         tailwindCssFile: "app/tailwind.css",
+        tailwindVersion: "v3",
         aliasPrefix: "~",
       },
     },
@@ -99,6 +106,7 @@ describe("get project info", async () => {
         isTsx: true,
         tailwindConfigFile: "tailwind.config.ts",
         tailwindCssFile: "app/tailwind.css",
+        tailwindVersion: "v3",
         aliasPrefix: "~",
       },
     },
@@ -111,6 +119,7 @@ describe("get project info", async () => {
         isTsx: true,
         tailwindConfigFile: "tailwind.config.js",
         tailwindCssFile: "src/index.css",
+        tailwindVersion: "v3",
         aliasPrefix: null,
       },
     },
diff --git a/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts b/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts
index af0828a5309..17acb7a5c7f 100644
--- a/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts
+++ b/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts
@@ -25,6 +25,10 @@ describe("get ts config alias prefix", async () => {
       name: "t3-app",
       prefix: "~",
     },
+    {
+      name: "next-app-custom-alias",
+      prefix: "@custom-alias",
+    },
   ])(`getTsConfigAliasPrefix($name) -> $prefix`, async ({ name, prefix }) => {
     expect(
       await getTsConfigAliasPrefix(
diff --git a/packages/shadcn/test/utils/registry.test.ts b/packages/shadcn/test/utils/registry.test.ts
index 64a17bd9066..42215163642 100644
--- a/packages/shadcn/test/utils/registry.test.ts
+++ b/packages/shadcn/test/utils/registry.test.ts
@@ -1,42 +1,44 @@
 import { expect, test } from "vitest"
+import { z } from "zod"
 
-import { resolveTree } from "../../src/utils/registry"
+import { resolveTree } from "../../src/registry/api"
+import { registryItemSchema } from "../../src/registry/schema"
 
 test("resolve tree", async () => {
   const index = [
     {
       name: "button",
       dependencies: ["@radix-ui/react-slot"],
-      type: "components:ui",
-      files: ["button.tsx"],
+      type: "registry:ui",
+      files: [{ type: "registry:ui", path: "button.tsx" }],
     },
     {
       name: "dialog",
       dependencies: ["@radix-ui/react-dialog"],
       registryDependencies: ["button"],
-      type: "components:ui",
-      files: ["dialog.tsx"],
+      type: "registry:ui",
+      files: [{ type: "registry:ui", path: "dialog.tsx" }],
     },
     {
       name: "input",
       registryDependencies: ["button"],
-      type: "components:ui",
-      files: ["input.tsx"],
+      type: "registry:ui",
+      files: [{ type: "registry:ui", path: "input.tsx" }],
     },
     {
       name: "alert-dialog",
       dependencies: ["@radix-ui/react-alert-dialog"],
       registryDependencies: ["button", "dialog"],
-      type: "components:ui",
-      files: ["alert-dialog.tsx"],
+      type: "registry:ui",
+      files: [{ type: "registry:ui", path: "alert-dialog.tsx" }],
     },
     {
       name: "example-card",
-      type: "components:component",
-      files: ["example-card.tsx"],
+      type: "registry:component",
+      files: [{ type: "registry:component", path: "example-card.tsx" }],
       registryDependencies: ["button", "dialog", "input"],
     },
-  ]
+  ] satisfies z.infer<typeof registryItemSchema>[]
 
   expect(
     (await resolveTree(index, ["button"])).map((entry) => entry.name).sort()
diff --git a/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap b/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
deleted file mode 100644
index 02feee5efe3..00000000000
--- a/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
+++ /dev/null
@@ -1,559 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`registryResolveItemTree > should resolve index 1`] = `
-{
-  "cssVars": {
-    "dark": {},
-    "light": {
-      "radius": "0.5rem",
-    },
-  },
-  "dependencies": [
-    "tailwindcss-animate",
-    "class-variance-authority",
-    "lucide-react",
-    "clsx",
-    "tailwind-merge",
-    "@radix-ui/react-label",
-  ],
-  "devDependencies": [],
-  "docs": "",
-  "files": [
-    {
-      "content": "import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-",
-      "path": "lib/utils.ts",
-      "type": "registry:lib",
-    },
-    {
-      "content": ""use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
-",
-      "path": "ui/label.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-  ],
-  "tailwind": {
-    "config": {
-      "plugins": [
-        "require("tailwindcss-animate")",
-      ],
-      "theme": {
-        "extend": {
-          "borderRadius": {
-            "lg": "var(--radius)",
-            "md": "calc(var(--radius) - 2px)",
-            "sm": "calc(var(--radius) - 4px)",
-          },
-          "colors": {},
-        },
-      },
-    },
-  },
-}
-`;
-
-exports[`registryResolveItemTree > should resolve items tree 1`] = `
-{
-  "cssVars": {},
-  "dependencies": [
-    "@radix-ui/react-slot",
-  ],
-  "devDependencies": [],
-  "docs": "",
-  "files": [
-    {
-      "content": "import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
-",
-      "path": "ui/button.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-  ],
-  "tailwind": {},
-}
-`;
-
-exports[`registryResolveItemTree > should resolve multiple items tree 1`] = `
-{
-  "cssVars": {},
-  "dependencies": [
-    "@radix-ui/react-slot",
-    "cmdk@1.0.0",
-    "@radix-ui/react-dialog",
-  ],
-  "devDependencies": [],
-  "docs": "",
-  "files": [
-    {
-      "content": "import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
-",
-      "path": "ui/button.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-    {
-      "content": "import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm 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",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }
-",
-      "path": "ui/input.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-    {
-      "content": ""use client"
-
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/registry/default/ui/dialog"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}
-",
-      "path": "ui/command.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-    {
-      "content": ""use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}
-",
-      "path": "ui/dialog.tsx",
-      "target": "",
-      "type": "registry:ui",
-    },
-  ],
-  "tailwind": {},
-}
-`;
diff --git a/packages/shadcn/test/utils/schema/registry-resolve-items-tree.test.ts b/packages/shadcn/test/utils/schema/registry-resolve-items-tree.test.ts
deleted file mode 100644
index cec6660e3f5..00000000000
--- a/packages/shadcn/test/utils/schema/registry-resolve-items-tree.test.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { describe, expect, test } from "vitest"
-
-import { registryResolveItemsTree } from "../../../src/utils/registry"
-
-describe("registryResolveItemTree", () => {
-  test("should resolve items tree", async () => {
-    expect(
-      await registryResolveItemsTree(["button"], {
-        style: "new-york",
-        tailwind: {
-          baseColor: "stone",
-        },
-      })
-    ).toMatchSnapshot()
-  })
-
-  test("should resolve multiple items tree", async () => {
-    expect(
-      await registryResolveItemsTree(["button", "input", "command"], {
-        style: "default",
-        tailwind: {
-          baseColor: "zinc",
-        },
-      })
-    ).toMatchSnapshot()
-  })
-
-  test("should resolve index", async () => {
-    expect(
-      await registryResolveItemsTree(["index", "label"], {
-        style: "default",
-        tailwind: {
-          baseColor: "zinc",
-        },
-      })
-    ).toMatchSnapshot()
-  })
-})
diff --git a/packages/shadcn/test/utils/transform-import.test.ts b/packages/shadcn/test/utils/transform-import.test.ts
index a7ad3e8306b..481857f49b5 100644
--- a/packages/shadcn/test/utils/transform-import.test.ts
+++ b/packages/shadcn/test/utils/transform-import.test.ts
@@ -117,4 +117,200 @@ import { Foo } from "bar"
       },
     })
   ).toMatchSnapshot()
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `import * as React from "react"
+import { Foo } from "bar"
+    import { Button } from "@/components/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@/registry/new-york/box"
+
+    import { cn } from "@/lib/utils"
+    `,
+      config: {
+        tsx: true,
+        tailwind: {
+          baseColor: "neutral",
+          cssVariables: true,
+        },
+        aliases: {
+          components: "@custom-alias/components",
+          utils: "@custom-alias/lib/utils",
+        },
+      },
+    })
+  ).toMatchSnapshot()
+})
+
+test("transform import for monorepo", async () => {
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `import * as React from "react"
+import { Foo } from "bar"
+    import { Button } from "@/registry/new-york/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@/registry/new-york/box"
+
+    import { cn } from "@/lib/utils"
+    `,
+      config: {
+        tsx: true,
+        tailwind: {
+          baseColor: "neutral",
+          cssVariables: true,
+        },
+        aliases: {
+          components: "@workspace/ui/components",
+          utils: "@workspace/ui/lib/utils",
+        },
+      },
+    })
+  ).toMatchSnapshot()
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `import * as React from "react"
+import { Foo } from "bar"
+    import { Button } from "@/registry/new-york/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@/registry/new-york/box"
+
+    import { cn } from "@/lib/utils"
+    `,
+      config: {
+        tsx: true,
+        tailwind: {
+          baseColor: "neutral",
+          cssVariables: true,
+        },
+        aliases: {
+          components: "@repo/ui/components",
+          utils: "@repo/ui/lib/utils",
+        },
+      },
+    })
+  ).toMatchSnapshot()
+})
+
+test("transform async/dynamic imports", async () => {
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `import * as React from "react"
+import { Button } from "@/registry/new-york/ui/button"
+
+async function loadComponent() {
+  const { cn } = await import("@/lib/utils")
+  const module = await import("@/registry/new-york/ui/card")
+  return module
+}
+
+function lazyLoad() {
+  return import("@/registry/new-york/ui/dialog").then(module => module)
+}
+    `,
+      config: {
+        tsx: true,
+        aliases: {
+          components: "@/components",
+          utils: "@/lib/utils",
+        },
+      },
+    })
+  ).toMatchSnapshot()
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `import { Button } from "@/registry/new-york/ui/button"
+
+async function loadUtils() {
+  const utils = await import("@/lib/utils")
+  const { cn } = await import("@/lib/utils")
+  return { utils, cn }
+}
+
+const dialogPromise = import("@/registry/new-york/ui/dialog")
+const cardModule = import("@/registry/new-york/ui/card")
+    `,
+      config: {
+        tsx: true,
+        aliases: {
+          components: "~/components",
+          utils: "~/lib/utils",
+        },
+      },
+    })
+  ).toMatchSnapshot()
+})
+
+test("transform dynamic imports with cn utility", async () => {
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `async function loadCn() {
+  const { cn } = await import("@/lib/utils")
+  return cn
+}
+
+async function loadMultiple() {
+  const utils1 = await import("@/lib/utils")
+  const { cn, twMerge } = await import("@/lib/utils")
+  const other = await import("@/lib/other")
+}
+    `,
+      config: {
+        tsx: true,
+        aliases: {
+          components: "@/components",
+          utils: "@/lib/utils",
+        },
+      },
+    })
+  ).toMatchSnapshot()
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `async function loadWorkspaceCn() {
+  const { cn } = await import("@/lib/utils")
+  return cn
+}
+    `,
+      config: {
+        tsx: true,
+        aliases: {
+          components: "@workspace/ui/components",
+          utils: "@workspace/ui/lib/utils",
+        },
+      },
+    })
+  ).toMatchSnapshot()
+})
+
+test("transform re-exports with dynamic imports", async () => {
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `export { cn } from "@/lib/utils"
+export { Button } from "@/registry/new-york/ui/button"
+
+async function load() {
+  const module = await import("@/registry/new-york/ui/card")
+  return module
+}
+    `,
+      config: {
+        tsx: true,
+        aliases: {
+          components: "@/components",
+          utils: "@/lib/utils",
+        },
+      },
+    })
+  ).toMatchSnapshot()
 })
diff --git a/packages/shadcn/test/utils/transform-rsc.test.ts b/packages/shadcn/test/utils/transform-rsc.test.ts
index 73e0105d75d..79b0d0b4ad3 100644
--- a/packages/shadcn/test/utils/transform-rsc.test.ts
+++ b/packages/shadcn/test/utils/transform-rsc.test.ts
@@ -62,4 +62,52 @@ import { Foo } from "bar"
       },
     })
   ).toMatchSnapshot()
+
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `'use client'
+
+      import * as React from 'react'
+import { Foo } from 'bar'
+    `,
+      config: {
+        tsx: true,
+        rsc: true,
+      },
+    })
+  ).toMatchSnapshot()
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `'use client'
+
+      import * as React from 'react'
+import { Foo } from 'bar'
+    `,
+      config: {
+        tsx: true,
+        rsc: false,
+      },
+    })
+  ).toMatchSnapshot()
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `'use foo'
+
+      import * as React from 'react'
+import { Foo } from 'bar'
+
+'use client'
+    `,
+      config: {
+        tsx: true,
+        rsc: false,
+      },
+    })
+  ).toMatchSnapshot()
 })
diff --git a/packages/shadcn/test/utils/transform-tw-prefix.test.ts b/packages/shadcn/test/utils/transform-tw-prefix.test.ts
index 21529f3cbf1..31fc37c8e0d 100644
--- a/packages/shadcn/test/utils/transform-tw-prefix.test.ts
+++ b/packages/shadcn/test/utils/transform-tw-prefix.test.ts
@@ -16,7 +16,7 @@ test("transform tailwind prefix", async () => {
       config: {
         tailwind: {
           baseColor: "stone",
-          prefix: "tw-",
+          prefix: "tw:",
         },
         aliases: {
           components: "@/components",
@@ -39,7 +39,7 @@ export function Foo() {
         tailwind: {
           baseColor: "stone",
           cssVariables: false,
-          prefix: "tw-",
+          prefix: "tw:",
         },
         aliases: {
           components: "@/components",
@@ -62,7 +62,7 @@ export function Foo() {
         tailwind: {
           baseColor: "stone",
           cssVariables: false,
-          prefix: "tw-",
+          prefix: "tw:",
         },
         aliases: {
           components: "@/components",
@@ -85,7 +85,7 @@ export function Foo() {
         tailwind: {
           baseColor: "stone",
           cssVariables: false,
-          prefix: "tw-",
+          prefix: "tw:",
         },
         aliases: {
           components: "@/components",
@@ -99,7 +99,8 @@ export function Foo() {
   expect(
     applyPrefixesCss(
       "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 217.9 10.6% 64.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 215 27.9% 16.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}",
-      "tw-"
+      "tw:",
+      "v4"
     )
   ).toMatchSnapshot()
 })
diff --git a/packages/shadcn/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap b/packages/shadcn/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap
index 9bcb300ea52..ec6f1646826 100644
--- a/packages/shadcn/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap
+++ b/packages/shadcn/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap
@@ -324,8 +324,14 @@ const config: Config = {
   theme: {
   	extend: {
   		fontFamily: {
-  			sans: ["var(--font-geist-sans)", ...fontFamily.sans],
-  			mono: ["var(--font-mono)", ...fontFamily.mono],
+  			sans: [
+  				'var(--font-geist-sans)',
+                    ...fontFamily.sans
+                ],
+  			mono: [
+  				'var(--font-mono)',
+                    ...fontFamily.mono
+                ],
   			heading: [
   				'var(--font-geist-sans)'
   			]
@@ -369,6 +375,75 @@ export default config
   "
 `;
 
+exports[`transformTailwindConfig -> theme > should handle objects nested in arrays 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		fontSize: {
+  			xs: [
+  				'0.75rem',
+  				{
+  					lineHeight: '1rem'
+  				}
+  			],
+  			sm: [
+  				'0.875rem',
+  				{
+  					lineHeight: '1.25rem'
+  				}
+  			],
+  			xl: [
+  				'clamp(1.5rem, 1.04vi + 1.17rem, 2rem)',
+  				{
+  					lineHeight: '1.2',
+  					letterSpacing: '-0.02em',
+  					fontWeight: '600'
+  				}
+  			]
+  		}
+  	}
+  },
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> theme > should keep arrays when formatted on multilines 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		fontFamily: {
+  			sans: [
+  				'Figtree',
+                    ...defaultTheme.fontFamily.sans
+                ],
+  			mono: [
+  				'Foo'
+  			]
+  		}
+  	}
+  },
+}
+export default config
+  "
+`;
+
 exports[`transformTailwindConfig -> theme > should keep quotes in strings 1`] = `
 "import type { Config } from 'tailwindcss'
 
@@ -382,7 +457,10 @@ const config: Config = {
   theme: {
   	extend: {
   		fontFamily: {
-  			sans: ['Figtree', ...defaultTheme.fontFamily.sans]
+  			sans: [
+  				'Figtree',
+                    ...defaultTheme.fontFamily.sans
+                ]
   		},
   		colors: {
                 ...defaultColors,
@@ -448,6 +526,12 @@ const config: Config = {
   ],
   theme: {
   	extend: {
+  		fontFamily: {
+  			sans: [
+  				'ui-sans-serif',
+  				'sans-serif'
+  			]
+  		},
   		colors: {
   			background: 'hsl(var(--background))',
   			foreground: 'hsl(var(--foreground))',
@@ -466,3 +550,23 @@ const config: Config = {
 export default config
   "
 `;
+
+exports[`transformTailwindConfig -> theme > should preserve boolean values 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    container: {
+      center: true
+    }
+  },
+}
+export default config
+  "
+`;
diff --git a/packages/shadcn/test/utils/updaters/update-css-vars.test.ts b/packages/shadcn/test/utils/updaters/update-css-vars.test.ts
index 5ab0f6743c6..b5508a7db1f 100644
--- a/packages/shadcn/test/utils/updaters/update-css-vars.test.ts
+++ b/packages/shadcn/test/utils/updaters/update-css-vars.test.ts
@@ -1,6 +1,9 @@
 import { describe, expect, test } from "vitest"
 
-import { transformCssVars } from "../../../src/utils/updaters/update-css-vars"
+import {
+  isLocalHSLValue,
+  transformCssVars,
+} from "../../../src/utils/updaters/update-css-vars"
 
 describe("transformCssVars", () => {
   test("should add light and dark css vars if not present", async () => {
@@ -30,6 +33,7 @@ describe("transformCssVars", () => {
       "@tailwind base;
       @tailwind components;
       @tailwind utilities;
+
       @layer base {
         :root {
           --background: white;
@@ -40,6 +44,7 @@ describe("transformCssVars", () => {
           --foreground: white
         }
       }
+
       @layer base {
         * {
           @apply border-border;
@@ -101,6 +106,8 @@ describe("transformCssVars", () => {
         }
       }
 
+
+
       @layer base {
         * {
           @apply border-border;
@@ -173,3 +180,1174 @@ describe("transformCssVars", () => {
     `)
   })
 })
+
+describe("transformCssVarsV4", () => {
+  test("should transform css vars for v4", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        `,
+        {
+          light: {
+            background: "0 0% 100%",
+            foreground: "240 10% 3.9%",
+          },
+          dark: {
+            background: "240 10% 3.9%",
+            foreground: "0 0% 98%",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      :root {
+        --background: hsl(0 0% 100%);
+        --foreground: hsl(240 10% 3.9%);
+      }
+
+      .dark {
+        --background: hsl(240 10% 3.9%);
+        --foreground: hsl(0 0% 98%);
+      }
+
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
+  test("should update light and dark css vars if present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        :root {
+          --background: hsl(210 40% 98%);
+        }
+
+        .dark {
+          --background: hsl(222.2 84% 4.9%);
+        }
+        `,
+        {
+          light: {
+            background: "215 20.2% 65.1%",
+            foreground: "222.2 84% 4.9%",
+            primary: "215 20.2% 65.1%",
+          },
+          dark: {
+            foreground: "60 9.1% 97.8%",
+            primary: "oklch(0.72 0.11 178)",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+              :root {
+                --background: hsl(210 40% 98%);
+                --foreground: hsl(222.2 84% 4.9%);
+                --primary: hsl(215 20.2% 65.1%);
+              }
+
+              .dark {
+                --background: hsl(222.2 84% 4.9%);
+                --foreground: hsl(60 9.1% 97.8%);
+                --primary: oklch(0.72 0.11 178);
+              }
+
+              @theme inline {
+                --color-background: var(--background);
+                --color-foreground: var(--foreground);
+                --color-primary: var(--primary);
+      }
+
+              @layer base {
+        * {
+          @apply border-border outline-ring/50;
+                }
+        body {
+          @apply bg-background text-foreground;
+                }
+      }
+              "
+    `)
+  })
+
+  test("should update theme vars if present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        :root {
+          --background: hsl(210 40% 98%);
+        }
+
+        .dark {
+          --background: hsl(222.2 84% 4.9%);
+        }
+
+        @theme inline {
+          --color-background: var(--background);
+        }
+        `,
+        {
+          theme: {
+            "font-poppins": "Poppins, sans-serif",
+            "breakpoint-3xl": "120rem",
+            "shadow-2xs": "0px 1px 2px 0px rgba(0, 0, 0, 0.05)",
+            "animate-bounce": "bounce 1s infinite",
+          },
+          light: {
+            background: "215 20.2% 65.1%",
+            foreground: "222.2 84% 4.9%",
+            primary: "215 20.2% 65.1%",
+          },
+          dark: {
+            foreground: "60 9.1% 97.8%",
+            primary: "222.2 84% 4.9%",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+              :root {
+                --background: hsl(210 40% 98%);
+                --foreground: hsl(222.2 84% 4.9%);
+                --primary: hsl(215 20.2% 65.1%);
+              }
+
+              .dark {
+                --background: hsl(222.2 84% 4.9%);
+                --foreground: hsl(60 9.1% 97.8%);
+                --primary: hsl(222.2 84% 4.9%);
+              }
+
+              @theme inline {
+                --color-background: var(--background);
+                --font-poppins: Poppins, sans-serif;
+                --breakpoint-3xl: 120rem;
+                --shadow-2xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+                --animate-bounce: bounce 1s infinite;
+                --color-primary: var(--primary);
+                --color-foreground: var(--foreground);
+              }
+
+              @layer base {
+        * {
+          @apply border-border outline-ring/50;
+                }
+        body {
+          @apply bg-background text-foreground;
+                }
+      }
+              "
+    `)
+  })
+
+  test("should NOT override theme vars if overwriteCssVars is false", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        :root {
+          --background: hsl(210 40% 98%);
+        }
+
+        .dark {
+          --background: hsl(222.2 84% 4.9%);
+        }
+
+        @theme inline {
+          --color-background: var(--background);
+          --font-sans: Inter, sans-serif;
+        }
+        `,
+        {
+          theme: {
+            "font-sans": "Poppins, sans-serif",
+            "breakpoint-3xl": "120rem",
+          },
+          light: {
+            background: "215 20.2% 65.1%",
+            foreground: "222.2 84% 4.9%",
+            primary: "215 20.2% 65.1%",
+          },
+          dark: {
+            foreground: "60 9.1% 97.8%",
+            primary: "222.2 84% 4.9%",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+              :root {
+                --background: hsl(210 40% 98%);
+                --foreground: hsl(222.2 84% 4.9%);
+                --primary: hsl(215 20.2% 65.1%);
+              }
+
+              .dark {
+                --background: hsl(222.2 84% 4.9%);
+                --foreground: hsl(60 9.1% 97.8%);
+                --primary: hsl(222.2 84% 4.9%);
+              }
+
+              @theme inline {
+                --color-background: var(--background);
+                --font-sans: Inter, sans-serif;
+                --breakpoint-3xl: 120rem;
+                --color-primary: var(--primary);
+                --color-foreground: var(--foreground);
+              }
+
+              @layer base {
+        * {
+          @apply border-border outline-ring/50;
+                }
+        body {
+          @apply bg-background text-foreground;
+                }
+      }
+              "
+    `)
+  })
+
+  test("should override theme vars if overwriteCssVars is true", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        :root {
+          --background: hsl(210 40% 98%);
+        }
+
+        .dark {
+          --background: hsl(222.2 84% 4.9%);
+        }
+
+        @theme inline {
+          --color-background: var(--background);
+          --font-sans: Inter, sans-serif;
+        }
+        `,
+        {
+          theme: {
+            "font-sans": "Poppins, sans-serif",
+            "breakpoint-3xl": "120rem",
+          },
+          light: {
+            background: "215 20.2% 65.1%",
+            foreground: "222.2 84% 4.9%",
+            primary: "215 20.2% 65.1%",
+          },
+          dark: {
+            foreground: "60 9.1% 97.8%",
+            primary: "222.2 84% 4.9%",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4", overwriteCssVars: true }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+              :root {
+                --background: hsl(215 20.2% 65.1%);
+                --foreground: hsl(222.2 84% 4.9%);
+                --primary: hsl(215 20.2% 65.1%);
+              }
+
+              .dark {
+                --background: hsl(222.2 84% 4.9%);
+                --foreground: hsl(60 9.1% 97.8%);
+                --primary: hsl(222.2 84% 4.9%);
+              }
+
+              @theme inline {
+                --color-background: var(--background);
+                --font-sans: Poppins, sans-serif;
+                --breakpoint-3xl: 120rem;
+                --color-primary: var(--primary);
+                --color-foreground: var(--foreground);
+              }
+
+              @layer base {
+        * {
+          @apply border-border outline-ring/50;
+                }
+        body {
+          @apply bg-background text-foreground;
+                }
+      }
+              "
+    `)
+  })
+
+  test("should only add hsl and color vars if color", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        :root {
+          --background: hsl(210 40% 98%);
+        }
+
+        .dark {
+          --background: hsl(222.2 84% 4.9%);
+        }
+
+        @theme inline {
+          --color-background: var(--background);
+        }
+        `,
+        {
+          light: {
+            background: "215 20.2% 65.1%",
+            foreground: "222.2 84% 4.9%",
+            primary: "215 20.2% 65.1%",
+            foo: "0.5rem",
+          },
+          dark: {
+            foreground: "60 9.1% 97.8%",
+            primary: "222.2 84% 4.9%",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+              :root {
+                --background: hsl(210 40% 98%);
+                --foreground: hsl(222.2 84% 4.9%);
+                --primary: hsl(215 20.2% 65.1%);
+                --foo: 0.5rem;
+              }
+
+              .dark {
+                --background: hsl(222.2 84% 4.9%);
+                --foreground: hsl(60 9.1% 97.8%);
+                --primary: hsl(222.2 84% 4.9%);
+              }
+
+              @theme inline {
+                --color-background: var(--background);
+                --foo: var(--foo);
+                --color-primary: var(--primary);
+                --color-foreground: var(--foreground);
+              }
+
+              @layer base {
+        * {
+          @apply border-border outline-ring/50;
+                }
+        body {
+          @apply bg-background text-foreground;
+                }
+      }
+              "
+    `)
+  })
+
+  test("should not add base layer if it is already present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        :root {
+          --background: hsl(210 40% 98%);
+        }
+
+        .dark {
+          --background: hsl(222.2 84% 4.9%);
+        }
+
+        @theme inline {
+          --color-background: var(--background);
+        }
+
+        @layer base {
+          * {
+            @apply border-border;
+          }
+          body {
+            @apply bg-background text-foreground;
+          }
+        }
+        `,
+        {
+          light: {
+            background: "215 20.2% 65.1%",
+            foreground: "222.2 84% 4.9%",
+            primary: "215 20.2% 65.1%",
+          },
+          dark: {
+            foreground: "60 9.1% 97.8%",
+            primary: "222.2 84% 4.9%",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+              :root {
+                --background: hsl(210 40% 98%);
+                --foreground: hsl(222.2 84% 4.9%);
+                --primary: hsl(215 20.2% 65.1%);
+              }
+
+              .dark {
+                --background: hsl(222.2 84% 4.9%);
+                --foreground: hsl(60 9.1% 97.8%);
+                --primary: hsl(222.2 84% 4.9%);
+              }
+
+              @theme inline {
+                --color-background: var(--background);
+                --color-primary: var(--primary);
+                --color-foreground: var(--foreground);
+              }
+
+              @layer base {
+                * {
+                  @apply border-border;
+                }
+                body {
+                  @apply bg-background text-foreground;
+                }
+              }
+
+              @layer base {
+        * {
+          @apply border-border outline-ring/50;
+                }
+        body {
+          @apply bg-background text-foreground;
+                }
+      }
+              "
+    `)
+  })
+
+  test("it should add the dark @custom-variant if not present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        `,
+        {
+          light: {
+            background: "0 0% 100%",
+            foreground: "240 10% 3.9%",
+          },
+          dark: {
+            background: "240 10% 3.9%",
+            foreground: "0 0% 98%",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      :root {
+        --background: hsl(0 0% 100%);
+        --foreground: hsl(240 10% 3.9%);
+      }
+
+      .dark {
+        --background: hsl(240 10% 3.9%);
+        --foreground: hsl(0 0% 98%);
+      }
+
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
+  test("it should only add hsl() if not already present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        `,
+        {
+          light: {
+            background: "0 0% 100%",
+            foreground: "hsl(240 10% 3.9%)",
+          },
+          dark: {
+            background: "hsl(240 10% 3.9%)",
+            foreground: "0 0% 98%",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      :root {
+        --background: hsl(0 0% 100%);
+        --foreground: hsl(240 10% 3.9%);
+      }
+
+      .dark {
+        --background: hsl(240 10% 3.9%);
+        --foreground: hsl(0 0% 98%);
+      }
+
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
+  test("it should only add hsl() for rgb and hex values", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        `,
+        {
+          light: {
+            background: "rgb(255, 255, 255)",
+            foreground: "hsl(240 10% 3.9%)",
+          },
+          dark: {
+            background: "hsl(240 10% 3.9%)",
+            foreground: "#000fff",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      :root {
+        --background: rgb(255, 255, 255);
+        --foreground: hsl(240 10% 3.9%);
+      }
+
+      .dark {
+        --background: hsl(240 10% 3.9%);
+        --foreground: #000fff;
+      }
+
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
+  test("should add --radius-* if radius present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        `,
+        {
+          light: {
+            radius: "0.125rem",
+          },
+          dark: {
+            radius: "0.5rem",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      :root {
+        --radius: 0.125rem;
+      }
+
+      .dark {
+        --radius: 0.5rem;
+      }
+
+      @theme inline {
+        --radius-sm: calc(var(--radius) - 4px);
+        --radius-md: calc(var(--radius) - 2px);
+        --radius-lg: var(--radius);
+        --radius-xl: calc(var(--radius) + 4px);
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
+  test("should NOT add --radius-* if already present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+      @custom-variant dark (&:is(.dark *));
+      :root {
+        --radius: 0.125rem;
+      }
+      @theme inline {
+        --radius-sm: calc(var(--radius) - 4px);
+        --radius-md: calc(var(--radius) - 2px);
+        --radius-lg: var(--radius);
+        --radius-xl: calc(var(--radius) + 4px);
+      }
+        `,
+        {
+          light: {
+            radius: "0.125rem",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+            @custom-variant dark (&:is(.dark *));
+            :root {
+              --radius: 0.125rem;
+            }
+            @theme inline {
+              --radius-sm: calc(var(--radius) - 4px);
+              --radius-md: calc(var(--radius) - 2px);
+              --radius-lg: var(--radius);
+              --radius-xl: calc(var(--radius) + 4px);
+            }
+
+            @layer base {
+        * {
+          @apply border-border outline-ring/50;
+              }
+        body {
+          @apply bg-background text-foreground;
+              }
+      }
+              "
+    `)
+  })
+
+  test("should use --sidebar for --sidebar-background", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        `,
+        {
+          light: {
+            "sidebar-background": "hsl(0 0% 98%)",
+          },
+          dark: {
+            "sidebar-background": "hsl(0 0% 10%)",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      :root {
+        --sidebar: hsl(0 0% 98%);
+      }
+
+      .dark {
+        --sidebar: hsl(0 0% 10%);
+      }
+
+      @theme inline {
+        --color-sidebar: var(--sidebar);
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
+  test("should add plugin if not present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        `,
+        {},
+        { tailwind: { cssVariables: true } },
+        {
+          tailwindVersion: "v4",
+          tailwindConfig: { plugins: ['require("tailwindcss-animate")'] },
+        }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @plugin "tailwindcss-animate";
+
+      @custom-variant dark (&:is(.dark *));
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
+  test("should NOT add plugin if already present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        @plugin "tailwindcss-animate";
+        `,
+        {},
+        { tailwind: { cssVariables: true } },
+        {
+          tailwindVersion: "v4",
+          tailwindConfig: {
+            plugins: [
+              'require("tailwindcss-animate")',
+              'require("@tailwindcss/typography")',
+            ],
+          },
+        }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+              @plugin "tailwindcss-animate";
+
+              @plugin "@tailwindcss/typography";
+
+              @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
+  test("should preserve quotes", async () => {
+    expect(
+      await transformCssVars(
+        `@import 'tailwindcss';
+        `,
+        {},
+        { tailwind: { cssVariables: true } },
+        {
+          tailwindVersion: "v4",
+          tailwindConfig: {
+            plugins: [
+              'require("tailwindcss-animate")',
+              'require("@tailwindcss/typography")',
+            ],
+          },
+        }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import 'tailwindcss';
+
+      @plugin '@tailwindcss/typography';
+
+      @plugin 'tailwindcss-animate';
+
+      @custom-variant dark (&:is(.dark *));
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
+  test("should add @keyframes if not present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        `,
+        {},
+        { tailwind: { cssVariables: true } },
+        {
+          tailwindVersion: "v4",
+          tailwindConfig: {
+            theme: {
+              extend: {
+                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" },
+                  },
+                },
+              },
+            },
+          },
+        }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      @theme inline {
+
+        @keyframes accordion-down {
+          from {
+            height: 0;
+          }
+          to {
+            height: var(--radix-accordion-content-height);
+          }
+        }
+
+        @keyframes accordion-up {
+          from {
+            height: var(--radix-accordion-content-height);
+          }
+          to {
+            height: 0;
+          }
+        }
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
+  test("should NOT add @keyframes if already present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+
+        @theme inline {
+          @keyframes accordion-down {
+          from {
+            height: 0;
+          }
+          to {
+            height: var(--radix-accordion-content-height);
+          }
+        }
+        }
+        `,
+        {},
+        { tailwind: { cssVariables: true } },
+        {
+          tailwindVersion: "v4",
+          tailwindConfig: {
+            theme: {
+              extend: {
+                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" },
+                  },
+                },
+              },
+            },
+          },
+        }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+              @theme inline {
+                @keyframes accordion-down {
+                from {
+                  height: 0;
+                }
+                to {
+                  height: var(--radix-accordion-content-height);
+                }
+              }
+
+        @keyframes accordion-up {
+          from {
+            height: var(--radix-accordion-content-height);
+                          }
+          to {
+            height: 0;
+                          }
+                }
+              }
+
+              @layer base {
+        * {
+          @apply border-border outline-ring/50;
+                }
+        body {
+          @apply bg-background text-foreground;
+                }
+      }
+              "
+    `)
+  })
+
+  test("should add --animate if not present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        `,
+        {},
+        { tailwind: { cssVariables: true } },
+        {
+          tailwindVersion: "v4",
+          tailwindConfig: {
+            theme: {
+              extend: {
+                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",
+                },
+              },
+            },
+          },
+        }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      @theme inline {
+        --animate-accordion-down: accordion-down 0.2s ease-out;
+        --animate-accordion-up: accordion-up 0.2s ease-out;
+
+        @keyframes accordion-down {
+          from {
+            height: 0;
+          }
+          to {
+            height: var(--radix-accordion-content-height);
+          }
+        }
+
+        @keyframes accordion-up {
+          from {
+            height: var(--radix-accordion-content-height);
+          }
+          to {
+            height: 0;
+          }
+        }
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
+  test("should NOT add --animate if already present", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        @theme inline {
+          --animate-accordion-up: accordion-up 0.3s ease-out;
+        }
+        `,
+        {},
+        { tailwind: { cssVariables: true } },
+        {
+          tailwindVersion: "v4",
+          tailwindConfig: {
+            theme: {
+              extend: {
+                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",
+                },
+              },
+            },
+          },
+        }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+              @theme inline {
+                --animate-accordion-up: accordion-up 0.3s ease-out;
+        --animate-accordion-down: accordion-down 0.2s ease-out;
+
+        @keyframes accordion-down {
+          from {
+            height: 0;
+                          }
+          to {
+            height: var(--radix-accordion-content-height);
+                          }
+                }
+
+        @keyframes accordion-up {
+          from {
+            height: var(--radix-accordion-content-height);
+                          }
+          to {
+            height: 0;
+                          }
+                }
+              }
+
+              @layer base {
+        * {
+          @apply border-border outline-ring/50;
+                }
+        body {
+          @apply bg-background text-foreground;
+                }
+      }
+              "
+    `)
+  })
+})
+
+describe("isLocalHSLValue", () => {
+  test.each([
+    ["210 40% 98%", true],
+    ["rgb(210 40% 98%)", false],
+    ["oklch(210 40% 98%)", false],
+    ["10 42 98%", false],
+    ["hsl(210 40% 98% / 0.5)", false],
+  ])("%s -> %s", (value, expected) => {
+    expect(isLocalHSLValue(value)).toBe(expected)
+  })
+})
diff --git a/packages/shadcn/test/utils/updaters/update-css.test.ts b/packages/shadcn/test/utils/updaters/update-css.test.ts
new file mode 100644
index 00000000000..b5dd5f25d07
--- /dev/null
+++ b/packages/shadcn/test/utils/updaters/update-css.test.ts
@@ -0,0 +1,855 @@
+import { describe, expect, test } from "vitest"
+
+import { transformCss } from "../../../src/utils/updaters/update-css"
+
+describe("transformCss", () => {
+  test("should add utility classes", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      "@utility content-auto": {
+        "content-visibility": "auto",
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @utility content-auto {
+          content-visibility: auto;
+      }"
+    `)
+  })
+
+  test("should add utility classes with pseudo-selectors", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      "@utility scrollbar-hidden": {
+        "&::-webkit-scrollbar": {
+          display: "none",
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @utility scrollbar-hidden {
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }"
+    `)
+  })
+
+  test("should add parameterized utility classes", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      "@utility tab-*": {
+        "tab-size": "--value([integer])",
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @utility tab-* {
+          tab-size: --value([integer]);
+      }"
+    `)
+  })
+
+  test("should add component styles", async () => {
+    const input = `@tailwind base;
+@tailwind components;
+@tailwind utilities;`
+
+    const result = await transformCss(input, {
+      "@layer components": {
+        ".card": {
+          "background-color": "var(--color-white)",
+          "border-radius": "var(--rounded-lg)",
+          padding: "var(--spacing-6)",
+          "box-shadow": "var(--shadow-xl)",
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer components {
+        .card {
+          background-color: var(--color-white);
+          border-radius: var(--rounded-lg);
+          padding: var(--spacing-6);
+          box-shadow: var(--shadow-xl);
+        }
+      }"
+    `)
+  })
+
+  test("should add base styles", async () => {
+    const input = `@tailwind base;
+@tailwind components;
+@tailwind utilities;`
+
+    const result = await transformCss(input, {
+      "@layer base": {
+        h1: {
+          "font-size": "var(--text-2xl)",
+        },
+        h2: {
+          "font-size": "var(--text-xl)",
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer base {
+        h1 {
+          font-size: var(--text-2xl);
+        }
+        h2 {
+          font-size: var(--text-xl);
+        }
+      }"
+    `)
+  })
+
+  test("should update existing rules", async () => {
+    const input = `@import "tailwindcss";
+
+@layer components {
+  .card {
+    background-color: white;
+    padding: 1rem;
+  }
+}`
+
+    const result = await transformCss(input, {
+      "@layer components": {
+        ".card": {
+          "background-color": "var(--color-white)",
+          "border-radius": "var(--rounded-lg)",
+          "box-shadow": "var(--shadow-xl)",
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @layer components {
+        .card {
+          background-color: var(--color-white);
+          padding: 1rem;
+          border-radius: var(--rounded-lg);
+          box-shadow: var(--shadow-xl);
+        }
+      }"
+    `)
+  })
+
+  test("should add multiple rules and types", async () => {
+    const input = `@tailwind base;
+@tailwind components;
+@tailwind utilities;`
+
+    const result = await transformCss(input, {
+      "@utility content-auto": {
+        "content-visibility": "auto",
+      },
+      "@layer components": {
+        ".card": {
+          "background-color": "var(--color-white)",
+          "border-radius": "var(--rounded-lg)",
+        },
+      },
+      "@layer base": {
+        h1: {
+          "font-size": "var(--text-2xl)",
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @utility content-auto {
+          content-visibility: auto;
+      }
+
+      @layer components {
+        .card {
+          background-color: var(--color-white);
+          border-radius: var(--rounded-lg);
+          }
+      }
+
+      @layer base {
+        h1 {
+          font-size: var(--text-2xl);
+          }
+      }"
+    `)
+  })
+
+  test("should handle nested selectors with &", async () => {
+    const input = `@tailwind base;
+@tailwind components;
+@tailwind utilities;`
+
+    const result = await transformCss(input, {
+      "@layer components": {
+        ".button": {
+          "background-color": "var(--color-primary)",
+          "&:hover": {
+            "background-color": "var(--color-primary-dark)",
+          },
+          "&:active": {
+            "background-color": "var(--color-primary-darker)",
+          },
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer components {
+        .button {
+          background-color: var(--color-primary);
+        }
+        .button:hover {
+          background-color: var(--color-primary-dark);
+        }
+        .button:active {
+          background-color: var(--color-primary-darker);
+        }
+      }"
+    `)
+  })
+
+  test("should handle direct string content", async () => {
+    const input = `@tailwind base;
+@tailwind components;
+@tailwind utilities;`
+
+    const result = await transformCss(input, {
+      "@layer base": {
+        body: "font-family: var(--font-sans); line-height: 1.5;",
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer base {
+        body {
+          font-family: var(--font-sans);
+          line-height: 1.5;
+        }
+      }"
+    `)
+  })
+
+  test("should handle nested at-rules", async () => {
+    const input = `@tailwind base;
+@tailwind components;
+@tailwind utilities;`
+
+    const result = await transformCss(input, {
+      "@layer components": {
+        "@media (min-width: 768px)": {
+          ".card": {
+            padding: "2rem",
+          },
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer components {
+
+      @media (min-width: 768px) {
+        .card {
+          padding: 2rem;
+      }
+      }
+      }"
+    `)
+  })
+
+  test("should place keyframes under @theme inline directive", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      "@keyframes spin": {
+        "0%": {
+          transform: "rotate(0deg)",
+        },
+        "100%": {
+          transform: "rotate(360deg)",
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @theme inline {
+        @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+          }
+        100% {
+          transform: rotate(360deg);
+          }
+        }
+      }"
+    `)
+  })
+
+  test("should add plugin directive", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      '@plugin "foo"': {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @plugin \"foo\";"
+    `)
+  })
+
+  test("should group plugins together after imports", async () => {
+    const input = `@import "tailwindcss";
+
+@layer base {
+  body {
+    font-family: sans-serif;
+  }
+}
+
+@utility content-auto {
+  content-visibility: auto;
+}`
+
+    const result = await transformCss(input, {
+      '@plugin "foo"': {},
+      '@plugin "bar"': {},
+      "@layer components": {
+        ".card": {
+          padding: "1rem",
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @plugin \"foo\";
+      @plugin \"bar\";
+
+      @layer base {
+        body {
+          font-family: sans-serif;
+        }
+      }
+
+      @utility content-auto {
+        content-visibility: auto;
+      }
+
+      @layer components {
+        .card {
+          padding: 1rem;
+        }
+      }"
+    `)
+  })
+
+  test("should not add duplicate plugins", async () => {
+    const input = `@import "tailwindcss";
+
+@plugin "foo";
+
+@layer base {
+  body {
+    font-family: sans-serif;
+  }
+}`
+
+    const result = await transformCss(input, {
+      '@plugin "foo"': {},
+      '@plugin "bar"': {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @plugin \"foo\";
+
+      @plugin \"bar\";
+
+      @layer base {
+        body {
+          font-family: sans-serif;
+        }
+      }"
+    `)
+  })
+
+  test("should add plugin when no imports exist", async () => {
+    const input = `@layer base {
+  body {
+    font-family: sans-serif;
+  }
+}`
+
+    const result = await transformCss(input, {
+      '@plugin "foo"': {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "
+      @plugin \"foo\";
+
+      @layer base {
+        body {
+          font-family: sans-serif;
+        }
+      }"
+    `)
+  })
+
+  test("should handle plugins with quoted parameters", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      '@plugin "@tailwindcss/typography"': {},
+      '@plugin "./custom-plugin.js"': {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @plugin \"@tailwindcss/typography\";
+      @plugin \"./custom-plugin.js\";"
+    `)
+  })
+
+  test("should handle plugins with complex parameters", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      '@plugin "tailwindcss/plugin"': {},
+      '@plugin "@headlessui/tailwindcss"': {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @plugin \"tailwindcss/plugin\";
+      @plugin \"@headlessui/tailwindcss\";"
+    `)
+  })
+
+  test("should handle multiple imports with plugins", async () => {
+    const input = `@import "tailwindcss";
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");`
+
+    const result = await transformCss(input, {
+      '@plugin "foo"': {},
+      '@plugin "bar"': {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
+
+      @plugin \"foo\";
+      @plugin \"bar\";"
+    `)
+  })
+
+  test("should add plugins to empty file", async () => {
+    const input = ``
+
+    const result = await transformCss(input, {
+      '@plugin "foo"': {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "
+      @plugin \"foo\""
+    `)
+  })
+
+  test("should maintain plugin order with existing plugins", async () => {
+    const input = `@import "tailwindcss";
+
+@plugin "existing-plugin";
+@plugin "another-existing";`
+
+    const result = await transformCss(input, {
+      '@plugin "new-plugin"': {},
+      '@plugin "final-plugin"': {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @plugin \"existing-plugin\";
+      @plugin \"another-existing\";
+      @plugin \"new-plugin\";
+      @plugin \"final-plugin\";"
+    `)
+  })
+
+  test("should automatically add quotes to unquoted plugin names", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      "@plugin foo-bar": {},
+      "@plugin baz": {},
+      "@plugin @tailwindcss/typography": {},
+      "@plugin ./custom-plugin.js": {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @plugin "foo-bar";
+      @plugin "baz";
+      @plugin "@tailwindcss/typography";
+      @plugin "./custom-plugin.js";"
+    `)
+  })
+
+  test("should detect duplicate plugins regardless of quotes", async () => {
+    const input = `@import "tailwindcss";
+
+@plugin foo;
+@plugin "bar";`
+
+    const result = await transformCss(input, {
+      "@plugin foo": {}, // Should detect this as duplicate
+      "@plugin bar": {}, // Should detect this as duplicate
+      "@plugin baz": {}, // Should add this one
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @plugin foo;
+      @plugin "bar";
+      @plugin "baz";"
+    `)
+  })
+
+  test("should not double-quote already quoted plugin names", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      '@plugin "already-quoted"': {},
+      "@plugin 'single-quoted'": {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @plugin "already-quoted";
+      @plugin 'single-quoted';"
+    `)
+  })
+
+  test("should add @import statements", async () => {
+    const input = ``
+
+    const result = await transformCss(input, {
+      '@import "tailwindcss"': {},
+      '@import "./styles/base.css"': {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import \"tailwindcss\";
+      @import \"./styles/base.css\";"
+    `)
+  })
+
+  test("should add @import with url() syntax", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      '@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap")':
+        {},
+      "@import url('./local-styles.css')": {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
+      @import url('./local-styles.css');"
+    `)
+  })
+
+  test("should not duplicate existing @import statements", async () => {
+    const input = `@import "tailwindcss";
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
+@import "./styles/base.css";`
+
+    const result = await transformCss(input, {
+      '@import "tailwindcss"': {}, // Should not duplicate
+      '@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap")':
+        {}, // Should not duplicate
+      '@import "./styles/base.css"': {}, // Should not duplicate
+      '@import "./styles/new.css"': {}, // Should add this one
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
+      @import "./styles/base.css";
+      @import "./styles/new.css";"
+    `)
+  })
+
+  test("should handle @import with media queries", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      '@import "print-styles.css" print': {},
+      '@import url("mobile.css") screen and (max-width: 768px)': {},
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+      @import "print-styles.css" print;
+      @import url("mobile.css") screen and (max-width: 768px);"
+    `)
+  })
+
+  test("should place imports before plugins and other content", async () => {
+    const input = `@layer base {
+  body {
+    font-family: sans-serif;
+  }
+}`
+
+    const result = await transformCss(input, {
+      '@import "tailwindcss"': {},
+      '@plugin "foo"': {},
+      "@layer components": {
+        ".card": {
+          padding: "1rem",
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @plugin "foo";
+
+      @layer base {
+        body {
+          font-family: sans-serif;
+        }
+      }
+
+      @layer components {
+        .card {
+          padding: 1rem;
+        }
+      }"
+    `)
+  })
+
+  test("should handle @apply within rules", async () => {
+    const input = `@import "tailwindcss";`
+
+    const result = await transformCss(input, {
+      "@layer base": {
+        "*": {
+          "@apply border-border outline-ring/70": {},
+        },
+        h1: {
+          "@apply text-2xl font-bold": {},
+          color: "red",
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/70;
+        }
+        h1 {
+          @apply text-2xl font-bold;
+          color: red;
+        }
+      }"
+    `)
+  })
+
+  test("should handle at-rules with empty body", async () => {
+    const input = ``
+
+    const result = await transformCss(input, {
+      "@tailwind base": {},
+      "@tailwind components": {},
+      "@tailwind utilities": {},
+      "@layer components": {
+        ".btn": {
+          "@apply px-4 py-2 rounded": {},
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "
+      @tailwind base;
+
+      @tailwind components;
+
+      @tailwind utilities;
+
+      @layer components {
+        .btn {
+          @apply px-4 py-2 rounded;
+        }
+      }"
+    `)
+  })
+
+  test("should handle empty CSS rules", async () => {
+    const input = ``
+
+    const result = await transformCss(input, {
+      ".empty-rule": {},
+      ".rule-with-content": {
+        padding: "1rem",
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "
+        .empty-rule {}
+        .rule-with-content {
+          padding: 1rem;
+      }"
+    `)
+  })
+
+  test("should handle comprehensive CSS with plugins", async () => {
+    const input = `@import "tailwindcss";
+@import url("fonts.css");
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+}
+
+@utility content-auto {
+  content-visibility: auto;
+}
+
+@keyframes fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}`
+
+    const result = await transformCss(input, {
+      '@plugin "@tailwindcss/typography"': {},
+      '@plugin "./custom"': {},
+      "@layer components": {
+        ".btn": {
+          padding: "0.5rem 1rem",
+          "&:hover": {
+            "background-color": "blue",
+          },
+        },
+      },
+      "@utility animate-fast": {
+        "animation-duration": "0.1s",
+      },
+      "@keyframes spin-fast": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+      @import url("fonts.css");
+
+      @plugin \"@tailwindcss/typography\";
+      @plugin \"./custom\";
+
+      @layer base {
+        * {
+          box-sizing: border-box;
+        }
+      }
+
+      @utility content-auto {
+        content-visibility: auto;
+      }
+
+      @keyframes fade {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+
+      @layer components {
+        .btn {
+          padding: 0.5rem 1rem;
+        }
+        .btn:hover {
+          background-color: blue;
+        }
+      }
+
+      @utility animate-fast {
+          animation-duration: 0.1s;
+      }
+
+      @theme inline {
+        @keyframes spin-fast {
+        0% {
+          transform: rotate(0deg);
+          }
+        100% {
+          transform: rotate(360deg);
+          }
+        }
+      }"
+    `)
+  })
+})
diff --git a/packages/shadcn/test/utils/updaters/update-dependencies.test.ts b/packages/shadcn/test/utils/updaters/update-dependencies.test.ts
new file mode 100644
index 00000000000..f13b576a6be
--- /dev/null
+++ b/packages/shadcn/test/utils/updaters/update-dependencies.test.ts
@@ -0,0 +1,157 @@
+import path from "path"
+import { execa } from "execa"
+import prompts from "prompts"
+import { afterEach, describe, expect, test, vi } from "vitest"
+
+import { updateDependencies } from "../../../src/utils/updaters/update-dependencies"
+
+vi.mock("execa")
+vi.mock("prompts")
+
+describe("updateDependencies", () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  test.each([
+    {
+      description:
+        "npm without react-day-picker v8 includes no additional flags",
+      options: { silent: true },
+      dependencies: ["first", "second", "third"],
+      devDependencies: ["fourth"],
+      config: {
+        resolvedPaths: {
+          cwd: path.resolve(__dirname, "../../fixtures/project-npm"),
+        },
+      },
+      expectedPackageManager: "npm",
+      expectedArgs: ["install", "first", "second", "third"],
+      expectedDevArgs: ["install", "-D", "fourth"],
+    },
+    {
+      description:
+        "npm with react-day-picker v8 applies force prompt when silent",
+      options: { silent: true },
+      dependencies: ["first", "second", "third"],
+      devDependencies: ["fourth"],
+      config: {
+        resolvedPaths: {
+          cwd: path.resolve(__dirname, "../../fixtures/project-npm-react19"),
+        },
+      },
+      expectedPackageManager: "npm",
+      expectedArgs: ["install", "--force", "first", "second", "third"],
+      expectedDevArgs: ["install", "--force", "-D", "fourth"],
+    },
+    {
+      description:
+        "npm with react-day-picker v8 prompts for flag when not silent",
+      flagPrompt: "legacy-peer-deps",
+      dependencies: ["first", "second", "third"],
+      devDependencies: ["fourth"],
+      config: {
+        resolvedPaths: {
+          cwd: path.resolve(__dirname, "../../fixtures/project-npm-react19"),
+        },
+      },
+      expectedPackageManager: "npm",
+      expectedArgs: [
+        "install",
+        "--legacy-peer-deps",
+        "first",
+        "second",
+        "third",
+      ],
+      expectedDevArgs: ["install", "--legacy-peer-deps", "-D", "fourth"],
+    },
+    {
+      description: "deno uses npm: package prefix",
+      dependencies: ["first", "second", "third"],
+      devDependencies: ["fourth"],
+      config: {
+        resolvedPaths: {
+          cwd: path.resolve(__dirname, "../../fixtures/project-deno"),
+        },
+      },
+      expectedPackageManager: "deno",
+      expectedArgs: ["add", "npm:first", "npm:second", "npm:third"],
+      expectedDevArgs: ["add", "-D", "npm:fourth"],
+    },
+    {
+      description: "bun uses bun",
+      dependencies: ["first", "second", "third"],
+      devDependencies: ["fourth"],
+      config: {
+        resolvedPaths: {
+          cwd: path.resolve(__dirname, "../../fixtures/project-bun"),
+        },
+      },
+      expectedPackageManager: "bun",
+      expectedArgs: ["add", "first", "second", "third"],
+      expectedDevArgs: ["add", "-D", "fourth"],
+    },
+    {
+      description: "pnpm uses pnpm",
+      dependencies: ["first", "second", "third"],
+      devDependencies: ["fourth"],
+      config: {
+        resolvedPaths: {
+          cwd: path.resolve(__dirname, "../../fixtures/project-pnpm"),
+        },
+      },
+      expectedPackageManager: "pnpm",
+      expectedArgs: ["add", "first", "second", "third"],
+      expectedDevArgs: ["add", "-D", "fourth"],
+    },
+    {
+      description: "deduplicates input dependencies",
+      options: { silent: true },
+      dependencies: ["first", "first"],
+      devDependencies: ["second", "second"],
+      config: {
+        resolvedPaths: {
+          cwd: path.resolve(__dirname, "../../fixtures/project-npm"),
+        },
+      },
+      expectedPackageManager: "npm",
+      expectedArgs: ["install", "first"],
+      expectedDevArgs: ["install", "-D", "second"],
+    },
+  ])(
+    "$description",
+    async ({
+      options,
+      flagPrompt,
+      config,
+      dependencies,
+      devDependencies,
+      expectedPackageManager,
+      expectedArgs,
+      expectedDevArgs,
+    }) => {
+      vi.mocked(prompts).mockResolvedValue({ flag: flagPrompt })
+
+      await updateDependencies(
+        dependencies,
+        devDependencies,
+        config,
+        options ?? {}
+      )
+
+      if (flagPrompt) {
+        expect(prompts).toHaveBeenCalled()
+      }
+
+      expect(execa).toHaveBeenCalledWith(expectedPackageManager, expectedArgs, {
+        cwd: config?.resolvedPaths.cwd,
+      })
+
+      expect(execa).toHaveBeenCalledWith(
+        expectedPackageManager,
+        expectedDevArgs,
+        { cwd: config?.resolvedPaths.cwd }
+      )
+    }
+  )
+})
diff --git a/packages/shadcn/test/utils/updaters/update-files.test.ts b/packages/shadcn/test/utils/updaters/update-files.test.ts
index 4d12fcb841e..2975c68f423 100644
--- a/packages/shadcn/test/utils/updaters/update-files.test.ts
+++ b/packages/shadcn/test/utils/updaters/update-files.test.ts
@@ -1,65 +1,1500 @@
-import { describe, expect, test } from "vitest"
+import { existsSync, promises as fs } from "fs"
+import path from "path"
+import { afterAll, afterEach, describe, expect, test, vi } from "vitest"
 
-import { resolveTargetDir } from "../../../src/utils/updaters/update-files"
+import { getConfig } from "../../../src/utils/get-config"
+import {
+  findCommonRoot,
+  resolveFilePath,
+  resolveModuleByProbablePath,
+  resolveNestedFilePath,
+  toAliasedImport,
+  updateFiles,
+} from "../../../src/utils/updaters/update-files"
 
-describe("resolveTargetDir", () => {
-  test("should handle a home target without a src directory", () => {
-    const targetDir = resolveTargetDir(
-      {
+vi.mock("fs/promises", async () => {
+  const actual = (await vi.importActual(
+    "fs/promises"
+  )) as typeof import("fs/promises")
+
+  return {
+    ...actual,
+    writeFile: vi.fn().mockResolvedValue(undefined),
+    readFile: vi.fn().mockImplementation(actual.readFile),
+    mkdir: vi.fn().mockResolvedValue(undefined),
+  }
+})
+
+vi.mock("fs", async () => {
+  const actual = (await vi.importActual("fs")) as typeof import("fs")
+  return {
+    ...actual,
+    existsSync: vi.fn().mockImplementation(actual.existsSync),
+    promises: {
+      ...actual.promises,
+      writeFile: vi.fn().mockResolvedValue(undefined),
+    },
+  }
+})
+
+vi.mock("prompts")
+
+afterEach(async () => {
+  vi.clearAllMocks()
+  // Restore the actual implementation of existsSync after clearing mocks
+  const actual = (await vi.importActual("fs")) as typeof import("fs")
+  vi.mocked(existsSync).mockImplementation(actual.existsSync)
+})
+
+afterAll(() => {
+  vi.resetAllMocks()
+})
+
+describe("resolveFilePath", () => {
+  test.each([
+    {
+      description: "should use target when provided",
+      file: {
+        path: "hello-world/ui/button.tsx",
+        type: "registry:ui",
+        target: "ui/button.tsx",
+      },
+      resolvedPath: "/foo/bar/ui/button.tsx",
+      projectInfo: {
         isSrcDir: false,
       },
-      {
-        resolvedPaths: {
-          cwd: "/foo/bar",
+    },
+    {
+      description: "should use nested target when provided",
+      file: {
+        path: "hello-world/components/example-card.tsx",
+        type: "registry:component",
+        target: "components/cards/example-card.tsx",
+      },
+      resolvedPath: "/foo/bar/components/cards/example-card.tsx",
+      projectInfo: {
+        isSrcDir: false,
+      },
+    },
+    {
+      description: "should use home target (~) when provided",
+      file: {
+        path: "hello-world/foo.json",
+        type: "registry:lib",
+        target: "~/foo.json",
+      },
+      resolvedPath: "/foo/bar/foo.json",
+      projectInfo: {
+        isSrcDir: false,
+      },
+    },
+  ])("$description", ({ file, resolvedPath, projectInfo }) => {
+    expect(
+      resolveFilePath(
+        file,
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/components/ui",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
         },
+        projectInfo
+      )
+    ).toBe(resolvedPath)
+  })
+
+  test.each([
+    {
+      description: "should use src directory when provided",
+      file: {
+        path: "hello-world/ui/button.tsx",
+        type: "registry:ui",
+        target: "design-system/ui/button.tsx",
+      },
+      resolvedPath: "/foo/bar/src/design-system/ui/button.tsx",
+      projectInfo: {
+        isSrcDir: true,
+      },
+    },
+    {
+      description: "should NOT use src directory for root files",
+      file: {
+        path: "hello-world/.env",
+        type: "registry:file",
+        target: "~/.env",
       },
-      "~/.env"
+      resolvedPath: "/foo/bar/.env",
+      projectInfo: {
+        isSrcDir: true,
+      },
+    },
+    {
+      description: "should use src directory when isSrcDir is true",
+      file: {
+        path: "hello-world/lib/foo.ts",
+        type: "registry:lib",
+        target: "lib/foo.ts",
+      },
+      resolvedPath: "/foo/bar/src/lib/foo.ts",
+      projectInfo: {
+        isSrcDir: true,
+      },
+    },
+    {
+      description: "should strip src directory when isSrcDir is false",
+      file: {
+        path: "hello-world/path/to/bar/baz.ts",
+        type: "registry:lib",
+        target: "src/path/to/bar/baz.ts",
+      },
+      resolvedPath: "/foo/bar/path/to/bar/baz.ts",
+      projectInfo: {
+        isSrcDir: false,
+      },
+    },
+  ])("$description", ({ file, resolvedPath, projectInfo }) => {
+    expect(
+      resolveFilePath(
+        file,
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/src/components",
+            ui: "/foo/bar/src/primitives",
+            lib: "/foo/bar/src/lib",
+            hooks: "/foo/bar/src/hooks",
+          },
+        },
+        projectInfo
+      )
+    ).toBe(resolvedPath)
+  })
+
+  test("should resolve registry:ui file types", () => {
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/ui/button.tsx",
+          type: "registry:ui",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/components/ui",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+        }
+      )
+    ).toBe("/foo/bar/components/ui/button.tsx")
+
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/ui/button.tsx",
+          type: "registry:ui",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/src/components",
+            ui: "/foo/bar/src/primitives",
+            lib: "/foo/bar/src/lib",
+            hooks: "/foo/bar/src/hooks",
+          },
+        },
+        {
+          isSrcDir: true,
+        }
+      )
+    ).toBe("/foo/bar/src/primitives/button.tsx")
+  })
+
+  test("should resolve registry:component and registry:block file types", () => {
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/components/example-card.tsx",
+          type: "registry:component",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/components/ui",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+        }
+      )
+    ).toBe("/foo/bar/components/example-card.tsx")
+
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/components/example-card.tsx",
+          type: "registry:block",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/components/ui",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+        }
+      )
+    ).toBe("/foo/bar/components/example-card.tsx")
+
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/components/example-card.tsx",
+          type: "registry:component",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/src/components",
+            ui: "/foo/bar/src/primitives",
+            lib: "/foo/bar/src/lib",
+            hooks: "/foo/bar/src/hooks",
+          },
+        },
+        {
+          isSrcDir: true,
+        }
+      )
+    ).toBe("/foo/bar/src/components/example-card.tsx")
+
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/components/example-card.tsx",
+          type: "registry:block",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/src/components",
+            ui: "/foo/bar/src/primitives",
+            lib: "/foo/bar/src/lib",
+            hooks: "/foo/bar/src/hooks",
+          },
+        },
+        {
+          isSrcDir: true,
+        }
+      )
+    ).toBe("/foo/bar/src/components/example-card.tsx")
+  })
+
+  test("should resolve registry:lib file types", () => {
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/lib/foo.ts",
+          type: "registry:lib",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/components/ui",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+        }
+      )
+    ).toBe("/foo/bar/lib/foo.ts")
+
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/lib/foo.ts",
+          type: "registry:lib",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/src/components",
+            ui: "/foo/bar/src/primitives",
+            lib: "/foo/bar/src/lib",
+            hooks: "/foo/bar/src/hooks",
+          },
+        },
+        {
+          isSrcDir: true,
+        }
+      )
+    ).toBe("/foo/bar/src/lib/foo.ts")
+  })
+
+  test("should resolve registry:hook file types", () => {
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/hooks/use-foo.ts",
+          type: "registry:hook",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/components/ui",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+        }
+      )
+    ).toBe("/foo/bar/hooks/use-foo.ts")
+
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/hooks/use-foo.ts",
+          type: "registry:hook",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/src/components",
+            ui: "/foo/bar/src/primitives",
+            lib: "/foo/bar/src/lib",
+            hooks: "/foo/bar/src/hooks",
+          },
+        },
+        {
+          isSrcDir: true,
+        }
+      )
+    ).toBe("/foo/bar/src/hooks/use-foo.ts")
+  })
+
+  test("should resolve registry:file file types", () => {
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/.env",
+          type: "registry:file",
+          target: "~/baz/.env",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+          },
+        },
+        {
+          isSrcDir: false,
+        }
+      )
+    ).toBe("/foo/bar/baz/.env")
+  })
+
+  test("should resolve nested files", () => {
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/components/path/to/example-card.tsx",
+          type: "registry:component",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/components/ui",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+        }
+      )
+    ).toBe("/foo/bar/components/path/to/example-card.tsx")
+
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/design-system/primitives/button.tsx",
+          type: "registry:ui",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/components/ui",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+        }
+      )
+    ).toBe("/foo/bar/components/ui/button.tsx")
+  })
+})
+
+describe("resolveFilePath with framework", () => {
+  test("should not resolve for unknown or unsupported framework", () => {
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/app/login/page.tsx",
+          type: "registry:page",
+          target: "app/login/page.tsx",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/components/ui",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+        }
+      )
+    ).toBe("")
+
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/app/login/page.tsx",
+          type: "registry:page",
+          target: "app/login/page.tsx",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/components/ui",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+          framework: "vite",
+        }
+      )
+    ).toBe("")
+  })
+
+  test("should resolve for next-app", () => {
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/app/login/page.tsx",
+          type: "registry:page",
+          target: "app/login/page.tsx",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/components/ui",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+          framework: "next-app",
+        }
+      )
+    ).toBe("/foo/bar/app/login/page.tsx")
+  })
+
+  test("should resolve for next-pages", () => {
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/app/login/page.tsx",
+          type: "registry:page",
+          target: "app/login/page.tsx",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/src/components",
+            ui: "/foo/bar/src/primitives",
+            lib: "/foo/bar/src/lib",
+            hooks: "/foo/bar/src/hooks",
+          },
+        },
+        {
+          isSrcDir: true,
+          framework: "next-pages",
+        }
+      )
+    ).toBe("/foo/bar/src/pages/login.tsx")
+
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/app/blog/[slug]/page.tsx",
+          type: "registry:page",
+          target: "app/blog/[slug]/page.tsx",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/components",
+            ui: "/foo/bar/primitives",
+            lib: "/foo/bar/lib",
+            hooks: "/foo/bar/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+          framework: "next-pages",
+        }
+      )
+    ).toBe("/foo/bar/pages/blog/[slug].tsx")
+  })
+
+  test("should resolve for react-router", () => {
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/app/login/page.tsx",
+          type: "registry:page",
+          target: "app/login/page.tsx",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/app/components",
+            ui: "/foo/bar/app/components/ui",
+            lib: "/foo/bar/app/lib",
+            hooks: "/foo/bar/app/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+          framework: "react-router",
+        }
+      )
+    ).toBe("/foo/bar/app/routes/login.tsx")
+  })
+
+  test("should resolve for laravel", () => {
+    expect(
+      resolveFilePath(
+        {
+          path: "hello-world/app/login/page.tsx",
+          type: "registry:page",
+          target: "app/login/page.tsx",
+        },
+        {
+          resolvedPaths: {
+            cwd: "/foo/bar",
+            components: "/foo/bar/resources/js/components",
+            ui: "/foo/bar/resources/js/components/ui",
+            lib: "/foo/bar/resources/js/lib",
+            hooks: "/foo/bar/resources/js/hooks",
+          },
+        },
+        {
+          isSrcDir: false,
+          framework: "laravel",
+        }
+      )
+    ).toBe("/foo/bar/resources/js/pages/login.tsx")
+  })
+})
+
+describe("findCommonRoot", () => {
+  test.each([
+    {
+      description: "should find the common root of sibling files",
+      paths: ["/foo/bar/baz/qux", "/foo/bar/baz/quux"],
+      needle: "/foo/bar/baz/qux",
+      expected: "/foo/bar/baz",
+    },
+    {
+      description: "should find common root with nested structures",
+      paths: [
+        "/app/components/header/nav.tsx",
+        "/app/components/header/logo.tsx",
+        "/app/components/header/menu/item.tsx",
+      ],
+      needle: "/app/components/header/nav.tsx",
+      expected: "/app/components/header",
+    },
+    {
+      description: "should handle single file in paths",
+      paths: ["/foo/bar/baz/single.tsx"],
+      needle: "/foo/bar/baz/single.tsx",
+      expected: "/foo/bar/baz",
+    },
+    {
+      description: "should handle root level files",
+      paths: ["root.tsx", "config.ts", "package.json"],
+      needle: "root.tsx",
+      expected: "",
+    },
+    {
+      description: "should handle unrelated paths",
+      paths: ["/foo/bar/baz", "/completely/different/path"],
+      needle: "/foo/bar/baz",
+      expected: "/foo/bar",
+    },
+  ])("$description", ({ paths, needle, expected }) => {
+    expect(findCommonRoot(paths, needle)).toBe(expected)
+  })
+})
+
+describe("resolveNestedFilePath", () => {
+  test.each([
+    {
+      description: "should resolve path after common components directory",
+      filePath: "hello-world/components/path/to/example-card.tsx",
+      targetDir: "/foo/bar/components",
+      expected: "path/to/example-card.tsx",
+    },
+    {
+      description: "should handle different directory depths",
+      filePath: "/foo-bar/components/ui/button.tsx",
+      targetDir: "/src/ui",
+      expected: "button.tsx",
+    },
+    {
+      description: "should handle nested component paths",
+      filePath: "blocks/sidebar/components/nav/item.tsx",
+      targetDir: "/app/components",
+      expected: "nav/item.tsx",
+    },
+    {
+      description: "should return the file path if no common directory",
+      filePath: "something/else/file.tsx",
+      targetDir: "/foo/bar/components",
+      expected: "file.tsx",
+    },
+    {
+      description: "should handle paths with multiple common directories",
+      filePath: "ui/shared/components/utils/button.tsx",
+      targetDir: "/src/components/utils",
+      expected: "button.tsx",
+    },
+  ])("$description", ({ filePath, targetDir, expected }) => {
+    expect(resolveNestedFilePath(filePath, targetDir)).toBe(expected)
+  })
+})
+
+describe("updateFiles", () => {
+  test("should create missing files", async () => {
+    const config = await getConfig(
+      path.resolve(__dirname, "../../fixtures/vite-with-tailwind")
     )
-    expect(targetDir).toBe("/foo/bar/.env")
+    expect(
+      await updateFiles(
+        [
+          {
+            path: "src/components/hello-world.tsx",
+            type: "registry:component",
+            content: `export function HelloWorld() {
+  return <div>Hello World</div>
+}`,
+          },
+        ],
+        config,
+        {
+          overwrite: false,
+          silent: true,
+        }
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "filesCreated": [
+          "src/components/hello-world.tsx",
+        ],
+        "filesSkipped": [],
+        "filesUpdated": [],
+      }
+    `)
   })
 
-  test("should handle a home target even with a src directory", () => {
-    const targetDir = resolveTargetDir(
+  test("should skip existing files if same content", async () => {
+    const config = await getConfig(
+      path.resolve(__dirname, "../../fixtures/vite-with-tailwind")
+    )
+    expect(
+      await updateFiles(
+        [
+          {
+            path: "src/components/hello-world.tsx",
+            type: "registry:component",
+            content: `export function HelloWorld() {
+return <div>Hello World</div>
+}`,
+          },
+          {
+            path: "registry/default/ui/button.tsx",
+            type: "registry:ui",
+            content: `export function Button() {
+  return <button>Click me</button>
+}`,
+          },
+        ],
+        config,
+        {
+          overwrite: false,
+          silent: true,
+        }
+      )
+    ).toMatchInlineSnapshot(`
       {
-        isSrcDir: true,
-      },
+        "filesCreated": [
+          "src/components/hello-world.tsx",
+        ],
+        "filesSkipped": [
+          "src/components/ui/button.tsx",
+        ],
+        "filesUpdated": [],
+      }
+    `)
+  })
+
+  test("should update file if different content", async () => {
+    const config = await getConfig(
+      path.resolve(__dirname, "../../fixtures/vite-with-tailwind")
+    )
+    expect(
+      await updateFiles(
+        [
+          {
+            path: "src/components/hello-world.tsx",
+            type: "registry:component",
+            content: `export function HelloWorld() {
+return <div>Hello World</div>
+}`,
+          },
+          {
+            path: "registry/default/ui/button.tsx",
+            type: "registry:ui",
+            content: `export function Button() {
+  return <button>Click this button</button>
+}`,
+          },
+        ],
+        config,
+        {
+          overwrite: true,
+          silent: true,
+        }
+      )
+    ).toMatchInlineSnapshot(`
       {
-        resolvedPaths: {
-          cwd: "/foo/bar",
+        "filesCreated": [
+          "src/components/hello-world.tsx",
+        ],
+        "filesSkipped": [],
+        "filesUpdated": [
+          "src/components/ui/button.tsx",
+        ],
+      }
+    `)
+  })
+
+  test("should mark .env file as created when it doesn't exist", async () => {
+    const config = await getConfig(
+      path.resolve(__dirname, "../../fixtures/vite-with-tailwind")
+    )
+
+    const result = await updateFiles(
+      [
+        {
+          path: ".env",
+          type: "registry:file",
+          target: "~/.env",
+          content: `NEW_API_KEY=new_api_key_value
+ANOTHER_NEW_KEY=another_value`,
         },
+      ],
+      config,
+      {
+        overwrite: true,
+        silent: true,
+      }
+    )
+
+    expect(result.filesCreated).toContain(".env")
+    expect(result.filesUpdated).not.toContain(".env")
+  })
+
+  test("should mark .env file as updated when merging content", async () => {
+    const tempDir = path.join(
+      path.resolve(__dirname, "../../fixtures"),
+      "temp-env-test"
+    )
+    const fsActual = (await vi.importActual(
+      "fs/promises"
+    )) as typeof import("fs/promises")
+    const writeFileMock = fs.writeFile as any
+
+    try {
+      await fsActual.mkdir(tempDir, { recursive: true })
+      await fsActual.writeFile(
+        path.join(tempDir, "components.json"),
+        JSON.stringify({
+          $schema: "https://ui.shadcn.com/schema.json",
+          style: "default",
+          tailwind: {
+            config: "tailwind.config.js",
+            css: "src/index.css",
+            baseColor: "slate",
+          },
+          aliases: {
+            components: "@/components",
+            utils: "@/lib/utils",
+          },
+        }),
+        "utf-8"
+      )
+
+      const config = await getConfig(tempDir)
+      const envPath = path.join(config?.resolvedPaths.cwd!, ".env")
+
+      await fsActual.writeFile(
+        envPath,
+        `EXISTING_KEY=existing_value
+DATABASE_URL=postgres://localhost:5432/mydb`,
+        "utf-8"
+      )
+
+      const result = await updateFiles(
+        [
+          {
+            path: ".env",
+            type: "registry:file",
+            target: "~/.env",
+            content: `DATABASE_URL=should_not_override
+NEW_API_KEY=new_api_key_value
+ANOTHER_NEW_KEY=another_value`,
+          },
+        ],
+        config,
+        {
+          overwrite: true,
+          silent: true,
+        }
+      )
+
+      expect(result.filesUpdated).toContain(".env")
+      expect(result.filesCreated).not.toContain(".env")
+
+      // Verify writeFile was called with the correct merged content.
+      expect(writeFileMock).toHaveBeenCalledWith(
+        envPath,
+        `EXISTING_KEY=existing_value
+DATABASE_URL=postgres://localhost:5432/mydb
+
+NEW_API_KEY=new_api_key_value
+ANOTHER_NEW_KEY=another_value
+`,
+        "utf-8"
+      )
+    } finally {
+      await fsActual.rm(tempDir, { recursive: true }).catch(() => {})
+    }
+  })
+
+  test("should use .env.local when .env doesn't exist", async () => {
+    const tempDir = path.join(
+      path.resolve(__dirname, "../../fixtures"),
+      "temp-env-alternative-test"
+    )
+    const fsActual = (await vi.importActual(
+      "fs/promises"
+    )) as typeof import("fs/promises")
+
+    const writeFileMock = fs.writeFile as any
+
+    try {
+      await fsActual.mkdir(tempDir, { recursive: true })
+
+      await fsActual.writeFile(
+        path.join(tempDir, "components.json"),
+        JSON.stringify({
+          $schema: "https://ui.shadcn.com/schema.json",
+          style: "default",
+          tailwind: {
+            config: "tailwind.config.js",
+            css: "src/index.css",
+            baseColor: "slate",
+          },
+          aliases: {
+            components: "@/components",
+            utils: "@/lib/utils",
+          },
+        }),
+        "utf-8"
+      )
+
+      const config = await getConfig(tempDir)
+      if (!config) {
+        throw new Error("Failed to get config")
+      }
+      const envLocalPath = path.join(config.resolvedPaths.cwd, ".env.local")
+
+      // Create .env.local instead of .env
+      await fsActual.writeFile(
+        envLocalPath,
+        `EXISTING_KEY=existing_value
+DATABASE_URL=postgres://localhost:5432/mydb`,
+        "utf-8"
+      )
+
+      const result = await updateFiles(
+        [
+          {
+            path: ".env",
+            type: "registry:file",
+            target: "~/.env",
+            content: `DATABASE_URL=should_not_override
+NEW_API_KEY=new_api_key_value`,
+          },
+        ],
+        config,
+        {
+          overwrite: true,
+          silent: true,
+        }
+      )
+
+      expect(result.filesUpdated).toContain(".env.local")
+      expect(result.filesCreated).not.toContain(".env")
+      expect(result.filesCreated).not.toContain(".env.local")
+
+      expect(writeFileMock).toHaveBeenCalledWith(
+        envLocalPath,
+        `EXISTING_KEY=existing_value
+DATABASE_URL=postgres://localhost:5432/mydb
+
+NEW_API_KEY=new_api_key_value
+`,
+        "utf-8"
+      )
+    } finally {
+      await fsActual.rm(tempDir, { recursive: true }).catch(() => {})
+    }
+  })
+
+  test("should use existing .env when target is .env.local but doesn't exist", async () => {
+    const tempDir = path.join(
+      path.resolve(__dirname, "../../fixtures"),
+      "temp-env-target-local-test"
+    )
+    const fsActual = (await vi.importActual(
+      "fs/promises"
+    )) as typeof import("fs/promises")
+
+    const writeFileMock = fs.writeFile as any
+
+    try {
+      await fsActual.mkdir(tempDir, { recursive: true })
+
+      await fsActual.writeFile(
+        path.join(tempDir, "components.json"),
+        JSON.stringify({
+          $schema: "https://ui.shadcn.com/schema.json",
+          style: "default",
+          tailwind: {
+            config: "tailwind.config.js",
+            css: "src/index.css",
+            baseColor: "slate",
+          },
+          aliases: {
+            components: "@/components",
+            utils: "@/lib/utils",
+          },
+        }),
+        "utf-8"
+      )
+
+      const config = await getConfig(tempDir)
+      if (!config) {
+        throw new Error("Failed to get config")
+      }
+      const envPath = path.join(config.resolvedPaths.cwd, ".env")
+
+      // Create .env file (not .env.local)
+      await fsActual.writeFile(envPath, `EXISTING_KEY=existing_value`, "utf-8")
+
+      const result = await updateFiles(
+        [
+          {
+            path: ".env.local",
+            type: "registry:file",
+            target: "~/.env.local",
+            content: `NEW_KEY=new_value`,
+          },
+        ],
+        config,
+        {
+          overwrite: true,
+          silent: true,
+        }
+      )
+
+      // Should update .env instead of creating .env.local
+      expect(result.filesUpdated).toContain(".env")
+      expect(result.filesCreated).not.toContain(".env.local")
+
+      expect(writeFileMock).toHaveBeenCalledWith(
+        envPath,
+        `EXISTING_KEY=existing_value
+
+NEW_KEY=new_value
+`,
+        "utf-8"
+      )
+    } finally {
+      await fsActual.rm(tempDir, { recursive: true }).catch(() => {})
+    }
+  })
+
+  test("should create .env when no env variants exist", async () => {
+    const tempDir = path.join(
+      path.resolve(__dirname, "../../fixtures"),
+      "temp-env-create-test"
+    )
+    const fsActual = (await vi.importActual(
+      "fs/promises"
+    )) as typeof import("fs/promises")
+
+    const writeFileMock = fs.writeFile as any
+
+    try {
+      await fsActual.mkdir(tempDir, { recursive: true })
+
+      await fsActual.writeFile(
+        path.join(tempDir, "components.json"),
+        JSON.stringify({
+          $schema: "https://ui.shadcn.com/schema.json",
+          style: "default",
+          tailwind: {
+            config: "tailwind.config.js",
+            css: "src/index.css",
+            baseColor: "slate",
+          },
+          aliases: {
+            components: "@/components",
+            utils: "@/lib/utils",
+          },
+        }),
+        "utf-8"
+      )
+
+      const config = await getConfig(tempDir)
+      if (!config) {
+        throw new Error("Failed to get config")
+      }
+      const envPath = path.join(config.resolvedPaths.cwd, ".env")
+
+      // Ensure no env files exist
+      const envVariants = [
+        ".env",
+        ".env.local",
+        ".env.development.local",
+        ".env.development",
+      ]
+      for (const variant of envVariants) {
+        const variantPath = path.join(config.resolvedPaths.cwd, variant)
+        await fsActual.unlink(variantPath).catch(() => {})
+      }
+
+      const result = await updateFiles(
+        [
+          {
+            path: ".env",
+            type: "registry:file",
+            target: "~/.env",
+            content: `NEW_API_KEY=new_api_key_value
+DATABASE_URL=postgres://localhost:5432/mydb`,
+          },
+        ],
+        config,
+        {
+          overwrite: true,
+          silent: true,
+        }
+      )
+
+      expect(result.filesCreated).toContain(".env")
+      expect(result.filesUpdated).not.toContain(".env")
+      expect(result.filesUpdated).not.toContain(".env.local")
+
+      expect(writeFileMock).toHaveBeenCalledWith(
+        envPath,
+        `NEW_API_KEY=new_api_key_value
+DATABASE_URL=postgres://localhost:5432/mydb`,
+        "utf-8"
+      )
+    } finally {
+      await fsActual.rm(tempDir, { recursive: true }).catch(() => {})
+    }
+  })
+})
+
+describe("resolveModuleByProbablePath", () => {
+  test("should resolve exact file match in provided files list", () => {
+    const files = [
+      "components/button.tsx",
+      "components/card.tsx",
+      "lib/utils.ts",
+    ]
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
       },
-      "~/.env"
+    }
+    expect(
+      resolveModuleByProbablePath("/foo/bar/components/button", files, config)
+    ).toBe("components/button.tsx")
+  })
+
+  test("should resolve index file", () => {
+    const files = ["components/button/index.tsx", "components/card.tsx"]
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+      },
+    }
+    expect(
+      resolveModuleByProbablePath("/foo/bar/components/button", files, config)
+    ).toBe("components/button/index.tsx")
+  })
+
+  test("should try different extensions", () => {
+    const files = ["components/button.jsx", "components/card.tsx"]
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+      },
+    }
+    expect(
+      resolveModuleByProbablePath("/foo/bar/components/button", files, config)
+    ).toBe("components/button.jsx")
+  })
+
+  test("should fallback to basename matching", () => {
+    const files = ["components/ui/button.tsx", "components/card.tsx"]
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+      },
+    }
+    expect(
+      resolveModuleByProbablePath("/foo/bar/components/button", files, config)
+    ).toBe("components/ui/button.tsx")
+  })
+
+  test("should return null when file not found", () => {
+    const files = ["components/card.tsx", "lib/utils.ts"]
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+      },
+    }
+    expect(
+      resolveModuleByProbablePath("/foo/bar/components/button", files, config)
+    ).toBeNull()
+  })
+
+  test("should sort by extension priority", () => {
+    const files = [
+      "components/button.jsx",
+      "components/button.tsx",
+      "components/button.js",
+    ]
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+      },
+    }
+    expect(
+      resolveModuleByProbablePath("/foo/bar/components/button", files, config, [
+        ".tsx",
+        ".jsx",
+        ".js",
+      ])
+    ).toBe("components/button.tsx")
+  })
+
+  test("should preserve extension if specified in path", () => {
+    const files = ["components/button.tsx", "components/button.css"]
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+      },
+    }
+    expect(
+      resolveModuleByProbablePath(
+        "/foo/bar/components/button.css",
+        files,
+        config
+      )
+    ).toBe("components/button.css")
+  })
+})
+
+describe("toAliasedImport", () => {
+  test("should convert components path to aliased import", () => {
+    const filePath = "components/button.tsx"
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+        components: "/foo/bar/components",
+        ui: "/foo/bar/components/ui",
+        lib: "/foo/bar/lib",
+      },
+      aliases: {
+        components: "@/components",
+        ui: "@/components/ui",
+        lib: "@/lib",
+      },
+    }
+    const projectInfo = {
+      aliasPrefix: "@",
+    }
+    expect(toAliasedImport(filePath, config, projectInfo)).toBe(
+      "@/components/button"
     )
-    expect(targetDir).toBe("/foo/bar/.env")
   })
 
-  test("should handle a simple target", () => {
-    const targetDir = resolveTargetDir(
-      {
-        isSrcDir: false,
+  test("should convert ui path to aliased import", () => {
+    const filePath = "components/ui/button.tsx"
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+        components: "/foo/bar/components",
+        ui: "/foo/bar/components/ui",
+        lib: "/foo/bar/lib",
       },
-      {
-        resolvedPaths: {
-          cwd: "/foo/bar",
-        },
+      aliases: {
+        components: "@/components",
+        ui: "@/components/ui",
+        lib: "@/lib",
       },
-      "./components/ui/button.tsx"
+    }
+    const projectInfo = {
+      aliasPrefix: "@",
+    }
+    expect(toAliasedImport(filePath, config, projectInfo)).toBe(
+      "@/components/ui/button"
     )
-    expect(targetDir).toBe("/foo/bar/components/ui/button.tsx")
   })
 
-  test("should handle a simple target with src directory", () => {
-    const targetDir = resolveTargetDir(
-      {
-        isSrcDir: true,
+  test("should collapse index files", () => {
+    const filePath = "components/ui/button/index.tsx"
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+        components: "/foo/bar/components",
+        ui: "/foo/bar/components/ui",
+        lib: "/foo/bar/lib",
       },
-      {
-        resolvedPaths: {
-          cwd: "/foo/bar",
-        },
+      aliases: {
+        components: "@/components",
+        ui: "@/components/ui",
+        lib: "@/lib",
+      },
+    }
+    const projectInfo = {
+      aliasPrefix: "@",
+    }
+    expect(toAliasedImport(filePath, config, projectInfo)).toBe(
+      "@/components/ui/button"
+    )
+  })
+
+  test("should return null when no matching alias found", () => {
+    const filePath = "src/pages/index.tsx"
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+        components: "/foo/bar/components",
+        ui: "/foo/bar/components/ui",
+        lib: "/foo/bar/lib",
+      },
+      aliases: {
+        components: "@/components",
+        ui: "@/components/ui",
+        lib: "@/lib",
+      },
+    }
+    const projectInfo = {
+      aliasPrefix: "@",
+    }
+    expect(toAliasedImport(filePath, config, projectInfo)).toBe("@/pages")
+  })
+
+  test("should handle nested directories", () => {
+    const filePath = "components/forms/inputs/text-input.tsx"
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+        components: "/foo/bar/components",
+        ui: "/foo/bar/components/ui",
+        lib: "/foo/bar/lib",
+      },
+      aliases: {
+        components: "@/components",
+        ui: "@/components/ui",
+        lib: "@/lib",
+      },
+    }
+    const projectInfo = {
+      aliasPrefix: "@",
+    }
+    expect(toAliasedImport(filePath, config, projectInfo)).toBe(
+      "@/components/forms/inputs/text-input"
+    )
+  })
+
+  test("should keep non-code file extensions", () => {
+    const filePath = "components/styles/theme.css"
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+        components: "/foo/bar/components",
+        ui: "/foo/bar/components/ui",
+        lib: "/foo/bar/lib",
+      },
+      aliases: {
+        components: "@/components",
+        ui: "@/components/ui",
+        lib: "@/lib",
+      },
+    }
+    const projectInfo = {
+      aliasPrefix: "@",
+    }
+    expect(toAliasedImport(filePath, config, projectInfo)).toBe(
+      "@/components/styles/theme.css"
+    )
+  })
+
+  test("should prefer longer matching paths", () => {
+    const filePath = "components/ui/button.tsx"
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+        components: "/foo/bar/components",
+        ui: "/foo/bar/components/ui",
+      },
+      aliases: {
+        components: "@/components",
+        ui: "@/ui",
+      },
+    }
+    const projectInfo = {
+      aliasPrefix: "@",
+    }
+    expect(toAliasedImport(filePath, config, projectInfo)).toBe("@/ui/button")
+  })
+
+  test("should support tilde (~) alias prefix", () => {
+    const filePath = "components/button.tsx"
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+        components: "/foo/bar/components",
+      },
+      aliases: {
+        components: "~components",
+      },
+    }
+    const projectInfo = {
+      aliasPrefix: "~",
+    }
+    expect(toAliasedImport(filePath, config, projectInfo)).toBe(
+      "~components/button"
+    )
+  })
+
+  test("should support @shadcn alias prefix", () => {
+    const filePath = "components/ui/button.tsx"
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+        components: "/foo/bar/components",
+        ui: "/foo/bar/components/ui",
       },
-      "./components/ui/button.tsx"
+      aliases: {
+        components: "@shadcn/components",
+        ui: "@shadcn/ui",
+      },
+    }
+    const projectInfo = {
+      aliasPrefix: "@shadcn",
+    }
+    expect(toAliasedImport(filePath, config, projectInfo)).toBe(
+      "@shadcn/ui/button"
     )
-    expect(targetDir).toBe("/foo/bar/src/components/ui/button.tsx")
+  })
+
+  test("should support ~cn alias prefix", () => {
+    const filePath = "lib/utils/index.tsx"
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+        lib: "/foo/bar/lib",
+      },
+      aliases: {
+        lib: "~cn/lib",
+      },
+    }
+    const projectInfo = {
+      aliasPrefix: "~cn",
+    }
+    expect(toAliasedImport(filePath, config, projectInfo)).toBe("~cn/lib/utils")
+  })
+
+  test("should use project alias prefix when aliasKey is cwd", () => {
+    const filePath = "src/pages/home.tsx"
+    const config = {
+      resolvedPaths: {
+        cwd: "/foo/bar",
+        components: "/foo/bar/components",
+        ui: "/foo/bar/components/ui",
+        lib: "/foo/bar/lib",
+      },
+      aliases: {
+        components: "@/components",
+        ui: "@/components/ui",
+        lib: "@/lib",
+      },
+    }
+    const projectInfo = {
+      aliasPrefix: "@",
+    }
+    expect(toAliasedImport(filePath, config, projectInfo)).toBe("@/pages/home")
   })
 })
diff --git a/packages/shadcn/test/utils/updaters/update-tailwind-config.test.ts b/packages/shadcn/test/utils/updaters/update-tailwind-config.test.ts
index c7e4350c79c..0ba625069ea 100644
--- a/packages/shadcn/test/utils/updaters/update-tailwind-config.test.ts
+++ b/packages/shadcn/test/utils/updaters/update-tailwind-config.test.ts
@@ -2,10 +2,10 @@ import { Project, SyntaxKind } from "ts-morph"
 import { beforeEach, describe, expect, test } from "vitest"
 
 import {
-  buildTailwindThemeColorsFromCssVars,
+  buildTailwindThemeColorsFromCssVars, nestSpreadElements,
   nestSpreadProperties,
   transformTailwindConfig,
-  unnestSpreadProperties,
+  unnestSpreadProperties, unsetSpreadElements,
 } from "../../../src/utils/updaters/update-tailwind-config"
 
 const SHARED_CONFIG = {
@@ -522,6 +522,12 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: [
+          "ui-sans-serif",
+          "sans-serif",
+        ],
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
@@ -809,6 +815,123 @@ export default config
       )
     ).toMatchSnapshot()
   })
+
+  test("should keep arrays when formatted on multilines", async () => {
+    expect(
+      await transformTailwindConfig(
+        `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: {
+      fontFamily: {
+        sans: [
+          'Figtree',
+          ...defaultTheme.fontFamily.sans
+        ],
+      },
+    },
+  },
+}
+export default config
+  `,
+        {
+          theme: {
+            extend: {
+              fontFamily: {
+                mono: ['Foo']
+              }
+            },
+          },
+        },
+        {
+          config: SHARED_CONFIG,
+        }
+      )
+    ).toMatchSnapshot()
+  })
+
+  test("should handle objects nested in arrays", async () => {
+    expect(
+      await transformTailwindConfig(
+        `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: {
+      fontSize: {
+        xs: ['0.75rem', { lineHeight: '1rem' }],
+        sm: [
+          '0.875rem',
+          {
+            lineHeight: '1.25rem',
+          },
+        ],
+      },
+    },
+  },
+}
+export default config
+  `,
+        {
+          theme: {
+            extend: {
+              fontSize: {
+                xl: [
+                  'clamp(1.5rem, 1.04vi + 1.17rem, 2rem)',
+                  {
+                    lineHeight: '1.2',
+                    letterSpacing: '-0.02em',
+                    fontWeight: '600',
+                  },
+                ],
+              }
+            },
+          },
+        },
+        {
+          config: SHARED_CONFIG,
+        }
+      )
+    ).toMatchSnapshot()
+  })
+
+  test("should preserve boolean values", async () => {
+    expect(
+      await transformTailwindConfig(
+        `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: {
+    container: {
+      center: true
+    }
+  },
+}
+export default config
+  `,
+        {},
+        {
+          config: SHARED_CONFIG,
+        }
+      )
+    ).toMatchSnapshot()
+  })
 })
 
 describe("nestSpreadProperties", () => {
@@ -837,36 +960,137 @@ describe("nestSpreadProperties", () => {
   test("should nest spread properties", () => {
     testTransformation(
       `{ theme: { ...foo, bar: { ...baz, one: "two" }, other: { a: "b", ...c } } }`,
-      `{ theme: { ___foo: "...foo", bar: { ___baz: "...baz", one: "two" }, other: { a: "b", ___c: "...c" } } }`
+      `{ theme: { "___foo": "...foo", bar: { "___baz": "...baz", one: "two" }, other: { a: "b", "___c": "...c" } } }`
     )
   })
 
   test("should handle mixed property assignments", () => {
     testTransformation(
       `{ ...foo, a: 1, b() {}, ...bar, c: { ...baz } }`,
-      `{ ___foo: "...foo", a: 1, b() {}, ___bar: "...bar", c: { ___baz: "...baz" } }`
+      `{ "___foo": "...foo", a: 1, b() {}, "___bar": "...bar", c: { "___baz": "...baz" } }`
     )
   })
 
   test("should handle objects with only spread properties", () => {
     testTransformation(
       `{ ...foo, ...bar, ...baz }`,
-      `{ ___foo: "...foo", ___bar: "...bar", ___baz: "...baz" }`
+      `{ "___foo": "...foo", "___bar": "...bar", "___baz": "...baz" }`
     )
   })
 
   test("should handle property name conflicts", () => {
-    testTransformation(`{ foo: 1, ...foo }`, `{ foo: 1, ___foo: "...foo" }`)
+    testTransformation(`{ foo: 1, ...foo }`, `{ foo: 1, "___foo": "...foo" }`)
   })
 
   test("should handle shorthand property names", () => {
-    testTransformation(`{ a, ...foo, b }`, `{ a, ___foo: "...foo", b }`)
+    testTransformation(`{ a, ...foo, b }`, `{ a, "___foo": "...foo", b }`)
   })
 
   test("should handle computed property names", () => {
     testTransformation(
       `{ ["computed"]: 1, ...foo }`,
-      `{ ["computed"]: 1, ___foo: "...foo" }`
+      `{ ["computed"]: 1, "___foo": "...foo" }`
+    )
+  })
+
+  test("should handle spreads in arrays", () => {
+    testTransformation(
+      `{ foo: [{ ...bar }] }`,
+      `{ foo: [{ "___bar": "...bar" }] }`
+    )
+  })
+
+  test("should handle deep nesting in arrays", () => {
+    testTransformation(
+      `{ foo: [{ baz: { ...other.baz }, ...bar }] }`,
+      `{ foo: [{ baz: { "___other.baz": "...other.baz" }, "___bar": "...bar" }] }`
+    )
+  })
+})
+
+describe("nestSpreadElements", () => {
+  let project: Project
+
+  beforeEach(() => {
+    project = new Project({ useInMemoryFileSystem: true })
+  })
+
+  function testTransformation(input: string, expected: string) {
+    const sourceFile = project.createSourceFile(
+      "test.ts",
+      `const config = ${input};`
+    )
+    const configObject = sourceFile.getFirstDescendantByKind(
+      SyntaxKind.ArrayLiteralExpression
+    )
+    if (!configObject) throw new Error("Config object not found")
+
+    nestSpreadElements(configObject)
+
+    const result = configObject.getText()
+    expect(result.replace(/\s+/g, "")).toBe(expected.replace(/\s+/g, ""))
+  }
+
+  test("should spread elements", () => {
+    testTransformation(
+      `[...bar]`,
+      `["...bar"]`
+    )
+  })
+
+  test("should handle mixed element types", () => {
+    testTransformation(
+      `['foo', 2, true, ...bar, "baz"]`,
+      `['foo', 2, true, "...bar", "baz"]`
+    )
+  })
+
+  test("should handle arrays with only spread elements", () => {
+    testTransformation(
+      `[...foo, ...foo.bar, ...baz]`,
+      `["...foo", "...foo.bar", "...baz"]`
+    )
+  })
+
+  test("should handle nested arrays with spreads", () => {
+    testTransformation(
+      `[...foo, [...bar]]`,
+      `["...foo", ["...bar"]]`
+    )
+  })
+
+  test("should handle nested arrays within objects", () => {
+    testTransformation(
+      `[{ foo: [...foo] }]`,
+      `[{ foo: ["...foo"] }]`
+    )
+  })
+
+  test("should handle deeply nested arrays within spread objects", () => {
+    testTransformation(
+      `[{ foo: [...foo, { bar: ['bar', ...bar ]}] }]`,
+      `[{ foo: ["...foo", { bar: ['bar', "...bar" ]}] }]`
+    )
+  })
+
+  test("should handle optional paths in spread", () => {
+    testTransformation(
+      `[{ foo: [...foo?.bar] }]`,
+      `[{ foo: ["...foo?.bar"] }]`
+    )
+  })
+
+  test('should handle computed property paths within spread', () => {
+    testTransformation(
+      `[{ foo: [...foo["bar"]] }]`,
+      `[{ foo: ["...foo["bar"]"] }]`
+    )
+  })
+
+  test('should handle indexed paths in spread', () => {
+    testTransformation(
+      `[{ foo: [...foo[0]] }]`,
+      `[{ foo: ["...foo[0]"] }]`
     )
   })
 })
@@ -925,10 +1149,119 @@ describe("unnestSpreadProperties", () => {
 
   test("should handle computed property names", () => {
     testTransformation(
-      `{ ["computed"]: 1, ___foo: "...foo" }`,
+      `{ ["computed"]: 1, "___foo": "...foo" }`,
       `{ ["computed"]: 1, ...foo }`
     )
   })
+
+  test("should handle spread objects within arrays", () => {
+    testTransformation(
+      `{ ["computed"]: 1, foo: [{ "___foo": "...foo" }] }`,
+      `{ ["computed"]: 1, foo: [{...foo}] }`
+    )
+  })
+
+  test("should handle deeply nested spread objects within an array", () => {
+    testTransformation(
+      `{ ["computed"]: 1, foo: [{ "___foo": "...foo", bar: { baz: 'baz', "___foo.bar": "...foo.bar" } }] }`,
+      `{ ["computed"]: 1, foo: [{...foo, bar: { baz: 'baz', ...foo.bar } }] }`
+    )
+  })
+})
+
+describe("unnestSpreadElements", () => {
+  let project: Project
+
+  beforeEach(() => {
+    project = new Project({ useInMemoryFileSystem: true })
+  })
+
+  function testTransformation(input: string, expected: string) {
+    const sourceFile = project.createSourceFile(
+      "test.ts",
+      `const config = ${input};`
+    )
+    const configObject = sourceFile.getFirstDescendantByKind(
+      SyntaxKind.ArrayLiteralExpression
+    )
+    if (!configObject) throw new Error("Config object not found")
+
+    unsetSpreadElements(configObject)
+
+    const result = configObject.getText()
+    expect(result.replace(/\s+/g, "")).toBe(expected.replace(/\s+/g, ""))
+  }
+
+  test("should spread elements", () => {
+    testTransformation(
+      `["...bar"]`,
+      `[...bar]`,
+    )
+  })
+
+  test("should handle mixed element types", () => {
+    testTransformation(
+      `['foo', 2, true, "...bar", "baz"]`,
+      `['foo', 2, true, ...bar, "baz"]`,
+    )
+  })
+
+  test("should handle arrays with only spread elements", () => {
+    testTransformation(
+      `["...foo", "...foo.bar", "...baz"]`,
+      `[...foo, ...foo.bar, ...baz]`,
+    )
+  })
+
+  test("should handle nested arrays with spreads", () => {
+    testTransformation(
+      `["...foo", ["...bar"]]`,
+      `[...foo, [...bar]]`,
+    )
+  })
+
+  test("should handle nested arrays within objects", () => {
+    testTransformation(
+      `[{ foo: ["...foo"] }]`,
+      `[{ foo: [...foo] }]`,
+    )
+  })
+
+  test("should handle deeply nested arrays within spread objects", () => {
+    testTransformation(
+      `[{ foo: ["...foo", { bar: ['bar', "...bar" ]}] }]`,
+      `[{ foo: [...foo, { bar: ['bar', ...bar ]}] }]`,
+    )
+  })
+
+  test("should handle optional paths in spread", () => {
+    testTransformation(
+      `[{ foo: ["...foo?.bar"] }]`,
+      `[{ foo: [...foo?.bar] }]`,
+
+    )
+  })
+
+  test("should handle computed property paths (') within spread", () => {
+    testTransformation(
+      `[{ foo: ["...foo['bar']"] }]`,
+      `[{ foo: [...foo['bar']] }]`,
+    )
+  })
+
+  test('should handle computed property paths (") within spread', () => {
+    testTransformation(
+      `[{ foo: ['...foo["bar"]'] }]`,
+      `[{ foo: [...foo["bar"]] }]`,
+    )
+  })
+
+  test('should handle indexed paths in spread', () => {
+    testTransformation(
+      `[{ foo: ["...foo[0]"] }]`,
+      `[{ foo: [...foo[0]] }]`,
+    )
+  })
 })
 
 describe("buildTailwindThemeColorsFromCssVars", () => {
diff --git a/packages/shadcn/tsup.config.ts b/packages/shadcn/tsup.config.ts
index 5e496be82c2..2d57dd6759b 100644
--- a/packages/shadcn/tsup.config.ts
+++ b/packages/shadcn/tsup.config.ts
@@ -3,10 +3,16 @@ import { defineConfig } from "tsup"
 export default defineConfig({
   clean: true,
   dts: true,
-  entry: ["src/index.ts"],
+  entry: [
+    "src/index.ts",
+    "src/registry/index.ts",
+    "src/schema/index.ts",
+    "src/mcp/index.ts",
+  ],
   format: ["esm"],
   sourcemap: true,
   minify: true,
   target: "esnext",
   outDir: "dist",
+  treeshake: true,
 })
diff --git a/packages/shadcn/vitest.config.ts b/packages/shadcn/vitest.config.ts
new file mode 100644
index 00000000000..7f5852e3f17
--- /dev/null
+++ b/packages/shadcn/vitest.config.ts
@@ -0,0 +1,19 @@
+import tsconfigPaths from "vite-tsconfig-paths"
+import { configDefaults, defineConfig } from "vitest/config"
+
+export default defineConfig({
+  test: {
+    exclude: [
+      ...configDefaults.exclude,
+      "**/node_modules/**",
+      "**/fixtures/**",
+      "**/templates/**",
+    ],
+    testTimeout: 8000,
+  },
+  plugins: [
+    tsconfigPaths({
+      ignoreConfigErrors: true,
+    }),
+  ],
+})
diff --git a/packages/tests/.eslintignore b/packages/tests/.eslintignore
new file mode 100644
index 00000000000..293ff109296
--- /dev/null
+++ b/packages/tests/.eslintignore
@@ -0,0 +1,2 @@
+fixtures/
+temp/
\ No newline at end of file
diff --git a/packages/tests/.gitignore b/packages/tests/.gitignore
new file mode 100644
index 00000000000..d853ae73f34
--- /dev/null
+++ b/packages/tests/.gitignore
@@ -0,0 +1,3 @@
+temp/
+*.log
+.cache/
\ No newline at end of file
diff --git a/packages/tests/README.md b/packages/tests/README.md
new file mode 100644
index 00000000000..3d11972b5c0
--- /dev/null
+++ b/packages/tests/README.md
@@ -0,0 +1,34 @@
+# Tests
+
+This package contains integration tests that verify the shadcn CLI works correctly with a local registry. The tests run actual CLI commands against test fixtures to ensure files are created and updated properly.
+
+## Running Tests
+
+Run the following command from the root of the workspace:
+
+```bash
+pnpm tests:test
+```
+
+## Writing Tests
+
+```typescript
+import {
+  createFixtureTestDirectory,
+  fileExists,
+  npxShadcn,
+} from "../utils/helpers"
+
+describe("my test suite", () => {
+  it("should do something", async () => {
+    // Create a test directory from a fixture
+    const testDir = await createFixtureTestDirectory("next-app")
+
+    // Run CLI command
+    await npxShadcn(testDir, ["init", "--base-color=neutral"])
+
+    // Make assertions
+    expect(await fileExists(path.join(testDir, "components.json"))).toBe(true)
+  })
+})
+```
diff --git a/packages/cli/test/fixtures/next-app/app/favicon.ico b/packages/tests/fixtures/next-app-init/app/favicon.ico
similarity index 100%
rename from packages/cli/test/fixtures/next-app/app/favicon.ico
rename to packages/tests/fixtures/next-app-init/app/favicon.ico
diff --git a/packages/tests/fixtures/next-app-init/app/globals.css b/packages/tests/fixtures/next-app-init/app/globals.css
new file mode 100644
index 00000000000..f4c1e9b51d3
--- /dev/null
+++ b/packages/tests/fixtures/next-app-init/app/globals.css
@@ -0,0 +1,120 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/packages/tests/fixtures/next-app-init/app/layout.tsx b/packages/tests/fixtures/next-app-init/app/layout.tsx
new file mode 100644
index 00000000000..ef077d2d948
--- /dev/null
+++ b/packages/tests/fixtures/next-app-init/app/layout.tsx
@@ -0,0 +1,22 @@
+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>
+  )
+}
diff --git a/packages/cli/test/fixtures/next-app-src/src/app/other.css b/packages/tests/fixtures/next-app-init/app/other.css
similarity index 100%
rename from packages/cli/test/fixtures/next-app-src/src/app/other.css
rename to packages/tests/fixtures/next-app-init/app/other.css
diff --git a/packages/tests/fixtures/next-app-init/app/page.tsx b/packages/tests/fixtures/next-app-init/app/page.tsx
new file mode 100644
index 00000000000..08930a9d3ca
--- /dev/null
+++ b/packages/tests/fixtures/next-app-init/app/page.tsx
@@ -0,0 +1,113 @@
+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>
+  )
+}
diff --git a/packages/tests/fixtures/next-app-init/components.json b/packages/tests/fixtures/next-app-init/components.json
new file mode 100644
index 00000000000..335484f9424
--- /dev/null
+++ b/packages/tests/fixtures/next-app-init/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/packages/tests/fixtures/next-app-init/lib/utils.ts b/packages/tests/fixtures/next-app-init/lib/utils.ts
new file mode 100644
index 00000000000..bd0c391ddd1
--- /dev/null
+++ b/packages/tests/fixtures/next-app-init/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/packages/cli/test/fixtures/next-app-src/next.config.js b/packages/tests/fixtures/next-app-init/next.config.ts
similarity index 100%
rename from packages/cli/test/fixtures/next-app-src/next.config.js
rename to packages/tests/fixtures/next-app-init/next.config.ts
diff --git a/packages/tests/fixtures/next-app-init/package-lock.json b/packages/tests/fixtures/next-app-init/package-lock.json
new file mode 100644
index 00000000000..532dcfde539
--- /dev/null
+++ b/packages/tests/fixtures/next-app-init/package-lock.json
@@ -0,0 +1,6204 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "my-app",
+      "version": "0.1.0",
+      "dependencies": {
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.527.0",
+        "next": "15.4.4",
+        "react": "19.1.0",
+        "react-dom": "19.1.0",
+        "tailwind-merge": "^3.3.1"
+      },
+      "devDependencies": {
+        "@eslint/eslintrc": "^3",
+        "@tailwindcss/postcss": "^4",
+        "@types/node": "^20",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "eslint": "^9",
+        "eslint-config-next": "15.4.4",
+        "tailwindcss": "^4",
+        "tw-animate-css": "^1.3.6",
+        "typescript": "^5"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.5.tgz",
+      "integrity": "sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.0.4",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.5.tgz",
+      "integrity": "sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.4.tgz",
+      "integrity": "sha512-PJR+bOmMOPH8AtcTGAyYNiuJ3/Fcoj2XN/gBEWzDIKh254XO+mM9XoXHk5GNEhodxeMznbg7BlRojVbKN+gC6g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
+      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
+      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.6",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz",
+      "integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
+      "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.32.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.32.0.tgz",
+      "integrity": "sha512-BBpRFZK3eX6uMLKz8WxFOBIFFcGFJ/g8XuwjTHCqHROSIsopI+ddn/d5Cfh36+7+e5edVS8dbSHnBNhrLEX0zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.4.tgz",
+      "integrity": "sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.15.1",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.3.tgz",
+      "integrity": "sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.3.tgz",
+      "integrity": "sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.0.tgz",
+      "integrity": "sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.0.tgz",
+      "integrity": "sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.0.tgz",
+      "integrity": "sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.0.tgz",
+      "integrity": "sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.0.tgz",
+      "integrity": "sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.0.tgz",
+      "integrity": "sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.0.tgz",
+      "integrity": "sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.0.tgz",
+      "integrity": "sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.0.tgz",
+      "integrity": "sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.3.tgz",
+      "integrity": "sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.3.tgz",
+      "integrity": "sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.3.tgz",
+      "integrity": "sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.3.tgz",
+      "integrity": "sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.3.tgz",
+      "integrity": "sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.3.tgz",
+      "integrity": "sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.3.tgz",
+      "integrity": "sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.3.tgz",
+      "integrity": "sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.4.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.3.tgz",
+      "integrity": "sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.3.tgz",
+      "integrity": "sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.3.tgz",
+      "integrity": "sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
+      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
+      "integrity": "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.29",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
+      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.4.4.tgz",
+      "integrity": "sha512-SJKOOkULKENyHSYXE5+KiFU6itcIb6wSBjgM92meK0HVKpo94dNOLZVdLLuS7/BxImROkGoPsjR4EnuDucqiiA==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.4.4.tgz",
+      "integrity": "sha512-1FDsyN//ai3Jd97SEd7scw5h1yLdzDACGOPRofr2GD3sEFsBylEEoL0MHSerd4n2dq9Zm/mFMqi4+NRMOreOKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "3.3.1"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.4.4.tgz",
+      "integrity": "sha512-eVG55dnGwfUuG+TtnUCt+mEJ+8TGgul6nHEvdb8HEH7dmJIFYOCApAaFrIrxwtEq2Cdf+0m5sG1Np8cNpw9EAw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.4.4.tgz",
+      "integrity": "sha512-zqG+/8apsu49CltEj4NAmCGZvHcZbOOOsNoTVeIXphYWIbE4l6A/vuQHyqll0flU2o3dmYCXsBW5FmbrGDgljQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.4.4.tgz",
+      "integrity": "sha512-LRD4l2lq4R+2QCHBQVC0wjxxkLlALGJCwigaJ5FSRSqnje+MRKHljQNZgDCaKUZQzO/TXxlmUdkZP/X3KNGZaw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.4.4.tgz",
+      "integrity": "sha512-LsGUCTvuZ0690fFWerA4lnQvjkYg9gHo12A3wiPUR4kCxbx/d+SlwmonuTH2SWZI+RVGA9VL3N0S03WTYv6bYg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.4.4.tgz",
+      "integrity": "sha512-aOy5yNRpLL3wNiJVkFYl6w22hdREERNjvegE6vvtix8LHRdsTHhWTpgvcYdCK7AIDCQW5ATmzr9XkPHvSoAnvg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.4.4.tgz",
+      "integrity": "sha512-FL7OAn4UkR8hKQRGBmlHiHinzOb07tsfARdGh7v0Z0jEJ3sz8/7L5bR23ble9E6DZMabSStqlATHlSxv1fuzAg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.4.4.tgz",
+      "integrity": "sha512-eEdNW/TXwjYhOulQh0pffTMMItWVwKCQpbziSBmgBNFZIIRn2GTXrhrewevs8wP8KXWYMx8Z+mNU0X+AfvtrRg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.4.4.tgz",
+      "integrity": "sha512-SE5pYNbn/xZKMy1RE3pAs+4xD32OI4rY6mzJa4XUkp/ItZY+OMjIgilskmErt8ls/fVJ+Ihopi2QIeW6O3TrMw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
+      "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
+      "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.17",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.11"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
+      "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-x64": "4.1.11",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.11",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.11",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.11",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
+      "integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
+      "integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
+      "integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
+      "integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
+      "integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
+      "integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
+      "integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
+      "integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
+      "integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
+      "integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@emnapi/wasi-threads": "^1.0.2",
+        "@napi-rs/wasm-runtime": "^0.2.11",
+        "@tybys/wasm-util": "^0.9.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
+      "integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
+      "integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.11.tgz",
+      "integrity": "sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.11",
+        "@tailwindcss/oxide": "4.1.11",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.11"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.0.tgz",
+      "integrity": "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.9.tgz",
+      "integrity": "sha512-cuVNgarYWZqxRJDQHEB58GEONhOK79QVR/qYx4S7kcUObQvUwvFnYxJuuHUKm2aieN9X3yZB4LZsuYNU1Qphsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.1.9",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
+      "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.1.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz",
+      "integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.38.0.tgz",
+      "integrity": "sha512-CPoznzpuAnIOl4nhj4tRr4gIPj5AfKgkiJmGQDaq+fQnRJTYlcBjbX3wbciGmpoPf8DREufuPRe1tNMZnGdanA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.38.0",
+        "@typescript-eslint/type-utils": "8.38.0",
+        "@typescript-eslint/utils": "8.38.0",
+        "@typescript-eslint/visitor-keys": "8.38.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.38.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.38.0.tgz",
+      "integrity": "sha512-Zhy8HCvBUEfBECzIl1PKqF4p11+d0aUJS1GeUiuqK9WmOug8YCmC4h4bjyBvMyAMI9sbRczmrYL5lKg/YMbrcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.38.0",
+        "@typescript-eslint/types": "8.38.0",
+        "@typescript-eslint/typescript-estree": "8.38.0",
+        "@typescript-eslint/visitor-keys": "8.38.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.38.0.tgz",
+      "integrity": "sha512-dbK7Jvqcb8c9QfH01YB6pORpqX1mn5gDZc9n63Ak/+jD67oWXn3Gs0M6vddAN+eDXBCS5EmNWzbSxsn9SzFWWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.38.0",
+        "@typescript-eslint/types": "^8.38.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.38.0.tgz",
+      "integrity": "sha512-WJw3AVlFFcdT9Ri1xs/lg8LwDqgekWXWhH3iAF+1ZM+QPd7oxQ6jvtW/JPwzAScxitILUIFs0/AnQ/UWHzbATQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.38.0",
+        "@typescript-eslint/visitor-keys": "8.38.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.38.0.tgz",
+      "integrity": "sha512-Lum9RtSE3EroKk/bYns+sPOodqb2Fv50XOl/gMviMKNvanETUuUcC9ObRbzrJ4VSd2JalPqgSAavwrPiPvnAiQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.38.0.tgz",
+      "integrity": "sha512-c7jAvGEZVf0ao2z+nnz8BUaHZD09Agbh+DY7qvBQqLiz8uJzRgVPj5YvOh8I8uEiH8oIUGIfHzMwUcGVco/SJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.38.0",
+        "@typescript-eslint/typescript-estree": "8.38.0",
+        "@typescript-eslint/utils": "8.38.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.38.0.tgz",
+      "integrity": "sha512-wzkUfX3plUqij4YwWaJyqhiPE5UCRVlFpKn1oCRn2O1bJ592XxWJj8ROQ3JD5MYXLORW84063z3tZTb/cs4Tyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.38.0.tgz",
+      "integrity": "sha512-fooELKcAKzxux6fA6pxOflpNS0jc+nOQEEOipXFNjSlBS6fqrJOVY/whSn70SScHrcJ2LDsxWrneFoWYSVfqhQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.38.0",
+        "@typescript-eslint/tsconfig-utils": "8.38.0",
+        "@typescript-eslint/types": "8.38.0",
+        "@typescript-eslint/visitor-keys": "8.38.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.38.0.tgz",
+      "integrity": "sha512-hHcMA86Hgt+ijJlrD8fX0j1j8w4C92zue/8LOPAFioIno+W0+L7KqE8QZKCcPGc/92Vs9x36w/4MPTJhqXdyvg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.38.0",
+        "@typescript-eslint/types": "8.38.0",
+        "@typescript-eslint/typescript-estree": "8.38.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.38.0.tgz",
+      "integrity": "sha512-pWrTcoFNWuwHlA9CvlfSsGWs14JxfN1TH25zM5L7o0pRLhsoZkDnTsXfQRJBEWJoV5DL0jf+Z+sxiud+K0mq1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.38.0",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+      "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+      "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
+      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001731",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001731.tgz",
+      "integrity": "sha512-lDdp2/wrOmTRWuoB5DpfNkC0rJDU8DqRa6nYL6HK6sytw70QMopt/NIc/9SM7ylItlBWfACXk0tEn37UWM/+mg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.2",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
+      "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
+      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.6",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.32.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.32.0.tgz",
+      "integrity": "sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.0",
+        "@eslint/config-helpers": "^0.3.0",
+        "@eslint/core": "^0.15.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.32.0",
+        "@eslint/plugin-kit": "^0.3.4",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.4.4.tgz",
+      "integrity": "sha512-sK/lWLUVF5om18O5w76Jt3F8uzu/LP5mVa6TprCMWkjWHUmByq80iHGHcdH7k1dLiJlj+DRIWf98d5piwRsSuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "15.4.4",
+        "@rushstack/eslint-patch": "^1.10.3",
+        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.0",
+        "eslint-plugin-react-hooks": "^5.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0 || ^9.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
+      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
+      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.527.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.527.0.tgz",
+      "integrity": "sha512-tyqW8gfeeDfpBjZpQ2vv1S6n9OzvkrDcs6pyLJLvB3eyHoz8BNkkR7WbYePlq6ZbNmFA911YJlbTtWkEdvXGgA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
+      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.2.tgz",
+      "integrity": "sha512-tWVJxJHmBWLy69PvO96TZMZDrzmw5KeiZBz3RHmiM2XZ9grBJ2WgMAFVVg25nqp3ZjTFUs2Ftw1JhscL3Teliw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/next": {
+      "version": "15.4.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.4.4.tgz",
+      "integrity": "sha512-kNcubvJjOL9yUOfwtZF3HfDhuhp+kVD+FM2A6Tyua1eI/xfmY4r/8ZS913MMz+oWKDlbps/dQOWdDricuIkXLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.4.4",
+        "@swc/helpers": "0.5.15",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.4.4",
+        "@next/swc-darwin-x64": "15.4.4",
+        "@next/swc-linux-arm64-gnu": "15.4.4",
+        "@next/swc-linux-arm64-musl": "15.4.4",
+        "@next/swc-linux-x64-gnu": "15.4.4",
+        "@next/swc-linux-x64-musl": "15.4.4",
+        "@next/swc-win32-arm64-msvc": "15.4.4",
+        "@next/swc-win32-x64-msvc": "15.4.4",
+        "sharp": "^0.34.3"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "devOptional": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.3.tgz",
+      "integrity": "sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.4",
+        "semver": "^7.7.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.3",
+        "@img/sharp-darwin-x64": "0.34.3",
+        "@img/sharp-libvips-darwin-arm64": "1.2.0",
+        "@img/sharp-libvips-darwin-x64": "1.2.0",
+        "@img/sharp-libvips-linux-arm": "1.2.0",
+        "@img/sharp-libvips-linux-arm64": "1.2.0",
+        "@img/sharp-libvips-linux-ppc64": "1.2.0",
+        "@img/sharp-libvips-linux-s390x": "1.2.0",
+        "@img/sharp-libvips-linux-x64": "1.2.0",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.0",
+        "@img/sharp-linux-arm": "0.34.3",
+        "@img/sharp-linux-arm64": "0.34.3",
+        "@img/sharp-linux-ppc64": "0.34.3",
+        "@img/sharp-linux-s390x": "0.34.3",
+        "@img/sharp-linux-x64": "0.34.3",
+        "@img/sharp-linuxmusl-arm64": "0.34.3",
+        "@img/sharp-linuxmusl-x64": "0.34.3",
+        "@img/sharp-wasm32": "0.34.3",
+        "@img/sharp-win32-arm64": "0.34.3",
+        "@img/sharp-win32-ia32": "0.34.3",
+        "@img/sharp-win32-x64": "0.34.3"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
+      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
+      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tar": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
+      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/tw-animate-css": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.6.tgz",
+      "integrity": "sha512-9dy0R9UsYEGmgf26L8UcHiLmSFTHa9+D7+dAt/G/sF5dCnPePZbfgDYinc7/UzAM7g/baVrmS6m9yEpU46d+LA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unrs-resolver": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
+      "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.11.1",
+        "@unrs/resolver-binding-android-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-x64": "1.11.1",
+        "@unrs/resolver-binding-freebsd-x64": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-musl": "1.11.1",
+        "@unrs/resolver-binding-wasm32-wasi": "1.11.1",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/packages/tests/fixtures/next-app-init/package.json b/packages/tests/fixtures/next-app-init/package.json
new file mode 100644
index 00000000000..6da9f4c8cc5
--- /dev/null
+++ b/packages/tests/fixtures/next-app-init/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.527.0",
+    "next": "15.4.4",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.4.4",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.6",
+    "typescript": "^5"
+  }
+}
diff --git a/packages/tests/fixtures/next-app-init/postcss.config.mjs b/packages/tests/fixtures/next-app-init/postcss.config.mjs
new file mode 100644
index 00000000000..c7bcb4b1ee1
--- /dev/null
+++ b/packages/tests/fixtures/next-app-init/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
diff --git a/packages/cli/test/fixtures/next-app/tsconfig.json b/packages/tests/fixtures/next-app-init/tsconfig.json
similarity index 100%
rename from packages/cli/test/fixtures/next-app/tsconfig.json
rename to packages/tests/fixtures/next-app-init/tsconfig.json
diff --git a/templates/next-template/public/favicon.ico b/packages/tests/fixtures/next-app/app/favicon.ico
similarity index 100%
rename from templates/next-template/public/favicon.ico
rename to packages/tests/fixtures/next-app/app/favicon.ico
diff --git a/packages/tests/fixtures/next-app/app/globals.css b/packages/tests/fixtures/next-app/app/globals.css
new file mode 100644
index 00000000000..f1d8c73cdcf
--- /dev/null
+++ b/packages/tests/fixtures/next-app/app/globals.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/packages/tests/fixtures/next-app/app/layout.tsx b/packages/tests/fixtures/next-app/app/layout.tsx
new file mode 100644
index 00000000000..ef077d2d948
--- /dev/null
+++ b/packages/tests/fixtures/next-app/app/layout.tsx
@@ -0,0 +1,22 @@
+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>
+  )
+}
diff --git a/packages/cli/test/fixtures/next-app-src/src/other.css b/packages/tests/fixtures/next-app/app/other.css
similarity index 100%
rename from packages/cli/test/fixtures/next-app-src/src/other.css
rename to packages/tests/fixtures/next-app/app/other.css
diff --git a/packages/tests/fixtures/next-app/app/page.tsx b/packages/tests/fixtures/next-app/app/page.tsx
new file mode 100644
index 00000000000..08930a9d3ca
--- /dev/null
+++ b/packages/tests/fixtures/next-app/app/page.tsx
@@ -0,0 +1,113 @@
+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>
+  )
+}
diff --git a/packages/cli/test/fixtures/next-app/next.config.js b/packages/tests/fixtures/next-app/next.config.ts
similarity index 100%
rename from packages/cli/test/fixtures/next-app/next.config.js
rename to packages/tests/fixtures/next-app/next.config.ts
diff --git a/packages/tests/fixtures/next-app/package.json b/packages/tests/fixtures/next-app/package.json
new file mode 100644
index 00000000000..6da9f4c8cc5
--- /dev/null
+++ b/packages/tests/fixtures/next-app/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.527.0",
+    "next": "15.4.4",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.4.4",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.6",
+    "typescript": "^5"
+  }
+}
diff --git a/packages/tests/fixtures/next-app/postcss.config.mjs b/packages/tests/fixtures/next-app/postcss.config.mjs
new file mode 100644
index 00000000000..c7bcb4b1ee1
--- /dev/null
+++ b/packages/tests/fixtures/next-app/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
diff --git a/packages/tests/fixtures/next-app/tsconfig.json b/packages/tests/fixtures/next-app/tsconfig.json
new file mode 100644
index 00000000000..c7146963787
--- /dev/null
+++ b/packages/tests/fixtures/next-app/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/tests/fixtures/no-framework/.gitkeep b/packages/tests/fixtures/no-framework/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/tests/fixtures/registry/example-component.json b/packages/tests/fixtures/registry/example-component.json
new file mode 100644
index 00000000000..03faa634029
--- /dev/null
+++ b/packages/tests/fixtures/registry/example-component.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "example-component",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "example/hello-world.tsx",
+      "type": "registry:component",
+      "content": "console.log('Hello, world!')"
+    }
+  ]
+}
diff --git a/packages/tests/fixtures/registry/example-env-vars.json b/packages/tests/fixtures/registry/example-env-vars.json
new file mode 100644
index 00000000000..f640152393a
--- /dev/null
+++ b/packages/tests/fixtures/registry/example-env-vars.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "example-env-vars",
+  "type": "registry:item",
+  "envVars": {
+    "APP_URL": "https://example.com",
+    "EMPTY_VAR": "",
+    "MULTILINE_VAR": "\"line1\nline2\nline3\""
+  }
+}
diff --git a/packages/tests/fixtures/registry/example-item-to-root.json b/packages/tests/fixtures/registry/example-item-to-root.json
new file mode 100644
index 00000000000..f8b8cb0919b
--- /dev/null
+++ b/packages/tests/fixtures/registry/example-item-to-root.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "example-item-to-root",
+  "type": "registry:item",
+  "files": [
+    {
+      "path": "example/config.json",
+      "type": "registry:item",
+      "content": "{\"foo\": \"bar\"}",
+      "target": "~/config.json"
+    }
+  ]
+}
diff --git a/packages/tests/fixtures/registry/example-item.json b/packages/tests/fixtures/registry/example-item.json
new file mode 100644
index 00000000000..34142272c13
--- /dev/null
+++ b/packages/tests/fixtures/registry/example-item.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "example-item",
+  "type": "registry:item",
+  "files": [
+    {
+      "path": "example/foo.txt",
+      "type": "registry:item",
+      "content": "Foo Bar",
+      "target": "path/to/foo.txt"
+    }
+  ]
+}
diff --git a/packages/tests/fixtures/registry/example-style.json b/packages/tests/fixtures/registry/example-style.json
new file mode 100644
index 00000000000..bf41b465879
--- /dev/null
+++ b/packages/tests/fixtures/registry/example-style.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "example-style",
+  "type": "registry:style",
+  "dependencies": ["@tabler/icons-react"],
+  "cssVars": {
+    "theme": {
+      "font-sans": "Inter, sans-serif"
+    },
+    "light": {
+      "brand": "oklch(20 14.3% 4.1%)",
+      "brand-foreground": "oklch(24 1.3% 10%)"
+    },
+    "dark": {
+      "brand": "oklch(24 1.3% 10%)"
+    }
+  }
+}
diff --git a/packages/tests/fixtures/vite-app/eslint.config.js b/packages/tests/fixtures/vite-app/eslint.config.js
new file mode 100644
index 00000000000..d94e7deb72c
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
diff --git a/packages/tests/fixtures/vite-app/index.html b/packages/tests/fixtures/vite-app/index.html
new file mode 100644
index 00000000000..e4b78eae123
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/tests/fixtures/vite-app/package.json b/packages/tests/fixtures/vite-app/package.json
new file mode 100644
index 00000000000..40808559853
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "vite-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.11",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.525.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@types/node": "^24.1.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "tw-animate-css": "^1.3.5",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.4"
+  }
+}
diff --git a/packages/tests/fixtures/vite-app/src/App.css b/packages/tests/fixtures/vite-app/src/App.css
new file mode 100644
index 00000000000..b9d355df2a5
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/packages/tests/fixtures/vite-app/src/App.tsx b/packages/tests/fixtures/vite-app/src/App.tsx
new file mode 100644
index 00000000000..ff7a823d21d
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/src/App.tsx
@@ -0,0 +1,36 @@
+import { useState } from "react"
+
+import reactLogo from "./assets/react.svg"
+import viteLogo from "/vite.svg"
+import "./App.css"
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default App
diff --git a/packages/tests/fixtures/vite-app/src/index.css b/packages/tests/fixtures/vite-app/src/index.css
new file mode 100644
index 00000000000..f1d8c73cdcf
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/src/index.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/packages/tests/fixtures/vite-app/src/main.tsx b/packages/tests/fixtures/vite-app/src/main.tsx
new file mode 100644
index 00000000000..50d7a89b9c7
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/src/main.tsx
@@ -0,0 +1,11 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+
+import "./index.css"
+import App from "./App.tsx"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
diff --git a/packages/tests/fixtures/vite-app/src/vite-env.d.ts b/packages/tests/fixtures/vite-app/src/vite-env.d.ts
new file mode 100644
index 00000000000..11f02fe2a00
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/tests/fixtures/vite-app/tsconfig.app.json b/packages/tests/fixtures/vite-app/tsconfig.app.json
new file mode 100644
index 00000000000..c905193c7f2
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/tsconfig.app.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "#custom/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/packages/tests/fixtures/vite-app/tsconfig.json b/packages/tests/fixtures/vite-app/tsconfig.json
new file mode 100644
index 00000000000..433eaa2fe81
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "#custom/*": ["./src/*"]
+    }
+  }
+}
diff --git a/packages/tests/fixtures/vite-app/tsconfig.node.json b/packages/tests/fixtures/vite-app/tsconfig.node.json
new file mode 100644
index 00000000000..f85a39906e5
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/tests/fixtures/vite-app/vite.config.ts b/packages/tests/fixtures/vite-app/vite.config.ts
new file mode 100644
index 00000000000..f7449c10a71
--- /dev/null
+++ b/packages/tests/fixtures/vite-app/vite.config.ts
@@ -0,0 +1,14 @@
+import path from "path"
+import tailwindcss from "@tailwindcss/vite"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "#custom": path.resolve(__dirname, "./src"),
+    },
+  },
+})
diff --git a/packages/tests/package.json b/packages/tests/package.json
new file mode 100644
index 00000000000..49b18894edd
--- /dev/null
+++ b/packages/tests/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "tests",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Integration tests for shadcn CLI",
+  "type": "module",
+  "scripts": {
+    "test": "vitest run",
+    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
+    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "shadcn": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.1",
+    "@types/node": "^20.11.27",
+    "execa": "^7.0.0",
+    "fs-extra": "^11.1.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.5.3",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^2.1.9"
+  }
+}
diff --git a/packages/tests/src/tests/add.test.ts b/packages/tests/src/tests/add.test.ts
new file mode 100644
index 00000000000..40a99e68850
--- /dev/null
+++ b/packages/tests/src/tests/add.test.ts
@@ -0,0 +1,299 @@
+import path from "path"
+import fs from "fs-extra"
+import { describe, expect, it } from "vitest"
+
+import {
+  createFixtureTestDirectory,
+  cssHasProperties,
+  getRegistryUrl,
+  npxShadcn,
+} from "../utils/helpers"
+
+// Note: The tests here intentionally do not use a mocked registry.
+// We test this against the real registry.
+
+describe("shadcn add", () => {
+  it("should add item to project", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["add", "button"])
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add multiple items to project", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["add", "button", "card"])
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/card.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add item from url", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    const registryUrl = getRegistryUrl()
+    const url = `${registryUrl}/styles/new-york-v4/login-01.json`
+    await npxShadcn(fixturePath, ["add", url])
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "app/login/page.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/card.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/input.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/label.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add component from local file", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, [
+      "add",
+      "../../fixtures/registry/example-component.json",
+    ])
+
+    const helloWorldContent = await fs.readFile(
+      path.join(fixturePath, "components/hello-world.tsx"),
+      "utf-8"
+    )
+    expect(helloWorldContent).toBe("console.log('Hello, world!')")
+  })
+
+  it("should add registry:page to the correct path", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["add", "login-03"])
+    expect(
+      await fs.pathExists(path.join(fixturePath, "app/login/page.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add item with registryDependencies", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["add", "alert-dialog"])
+    expect(
+      await fs.pathExists(
+        path.join(fixturePath, "components/ui/alert-dialog.tsx")
+      )
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add item with npm dependencies", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, [
+      "add",
+      "../../fixtures/registry/example-style.json",
+      "--yes",
+    ])
+    const packageJson = await fs.readJson(
+      path.join(fixturePath, "package.json")
+    )
+    expect(packageJson.dependencies["@tabler/icons-react"]).toBeDefined()
+  })
+
+  it("should install cssVars", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, [
+      "add",
+      "../../fixtures/registry/example-style.json",
+      "--yes",
+    ])
+
+    const globalCssContent = await fs.readFile(
+      path.join(fixturePath, "app/globals.css"),
+      "utf-8"
+    )
+
+    expect(
+      cssHasProperties(globalCssContent, [
+        {
+          selector: "@theme inline",
+          properties: {
+            "--font-sans": "Inter, sans-serif",
+            "--color-brand": "var(--brand)",
+            "--color-brand-foreground": "var(--brand-foreground)",
+          },
+        },
+        {
+          selector: ":root",
+          properties: {
+            "--brand": "oklch(20 14.3% 4.1%)",
+            "--brand-foreground": "oklch(24 1.3% 10%)",
+          },
+        },
+        {
+          selector: ".dark",
+          properties: {
+            "--brand": "oklch(24 1.3% 10%)",
+          },
+        },
+      ])
+    ).toBe(true)
+  })
+
+  it("should add item with target", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, [
+      "add",
+      "../../fixtures/registry/example-item.json",
+    ])
+    expect(await fs.pathExists(path.join(fixturePath, "path/to/foo.txt"))).toBe(
+      true
+    )
+    expect(
+      await fs.readFile(path.join(fixturePath, "path/to/foo.txt"), "utf-8")
+    ).toBe("Foo Bar")
+  })
+
+  it("should add item with target to src", async () => {
+    const fixturePath = await createFixtureTestDirectory("vite-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, [
+      "add",
+      "../../fixtures/registry/example-item.json",
+    ])
+    expect(
+      await fs.pathExists(path.join(fixturePath, "src/path/to/foo.txt"))
+    ).toBe(true)
+    expect(
+      await fs.readFile(path.join(fixturePath, "src/path/to/foo.txt"), "utf-8")
+    ).toBe("Foo Bar")
+  })
+
+  it("should add item with target to root", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, [
+      "add",
+      "../../fixtures/registry/example-item-to-root.json",
+    ])
+    expect(await fs.pathExists(path.join(fixturePath, "config.json"))).toBe(
+      true
+    )
+    expect(await fs.readJson(path.join(fixturePath, "config.json"))).toEqual({
+      foo: "bar",
+    })
+  })
+
+  it("should add item with target to root when src", async () => {
+    const fixturePath = await createFixtureTestDirectory("vite-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, [
+      "add",
+      "../../fixtures/registry/example-item-to-root.json",
+    ])
+    expect(await fs.pathExists(path.join(fixturePath, "config.json"))).toBe(
+      true
+    )
+    expect(await fs.readJson(path.join(fixturePath, "config.json"))).toEqual({
+      foo: "bar",
+    })
+  })
+
+  it("should add item with envVars", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, [
+      "add",
+      "../../fixtures/registry/example-env-vars.json",
+    ])
+    expect(await fs.pathExists(path.join(fixturePath, ".env.local"))).toBe(true)
+    expect(await fs.readFile(path.join(fixturePath, ".env.local"), "utf-8"))
+      .toMatchInlineSnapshot(`
+      "APP_URL=https://example.com
+      EMPTY_VAR=
+      MULTILINE_VAR="line1
+      line2
+      line3"
+      "
+    `)
+  })
+
+  it("should add NOT update existing envVars", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+
+    await fs.writeFile(
+      path.join(fixturePath, ".env.local"),
+      "APP_URL=https://foo.com"
+    )
+
+    await npxShadcn(fixturePath, [
+      "add",
+      "../../fixtures/registry/example-env-vars.json",
+    ])
+
+    expect(await fs.pathExists(path.join(fixturePath, ".env.local"))).toBe(true)
+    expect(await fs.readFile(path.join(fixturePath, ".env.local"), "utf-8"))
+      .toMatchInlineSnapshot(`
+      "APP_URL=https://foo.com
+
+      EMPTY_VAR=
+      MULTILINE_VAR=line1
+      "
+    `)
+  })
+
+  it("should use existing .env if it exists", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+
+    await fs.writeFile(
+      path.join(fixturePath, ".env"),
+      "APP_URL=https://foo.com"
+    )
+
+    await npxShadcn(fixturePath, [
+      "add",
+      "../../fixtures/registry/example-env-vars.json",
+    ])
+
+    expect(await fs.pathExists(path.join(fixturePath, ".env.local"))).toBe(
+      false
+    )
+    expect(await fs.readFile(path.join(fixturePath, ".env"), "utf-8"))
+      .toMatchInlineSnapshot(`
+      "APP_URL=https://foo.com
+
+      EMPTY_VAR=
+      MULTILINE_VAR=line1
+      "
+    `)
+  })
+
+  it("should add registry:item with no framework", async () => {
+    const fixturePath = await createFixtureTestDirectory("no-framework")
+    await npxShadcn(fixturePath, [
+      "add",
+      "../../fixtures/registry/example-item.json",
+    ])
+
+    expect(await fs.pathExists(path.join(fixturePath, "path/to/foo.txt"))).toBe(
+      true
+    )
+    expect(
+      await fs.readFile(path.join(fixturePath, "path/to/foo.txt"), "utf-8")
+    ).toBe("Foo Bar")
+  })
+})
diff --git a/packages/tests/src/tests/init.test.ts b/packages/tests/src/tests/init.test.ts
new file mode 100644
index 00000000000..b6107201266
--- /dev/null
+++ b/packages/tests/src/tests/init.test.ts
@@ -0,0 +1,553 @@
+import path from "path"
+import fs from "fs-extra"
+import { describe, expect, it } from "vitest"
+
+import {
+  createFixtureTestDirectory,
+  cssHasProperties,
+  npxShadcn,
+} from "../utils/helpers"
+import { createRegistryServer } from "../utils/registry"
+
+describe("shadcn init - next-app", () => {
+  it("should init with default configuration", async () => {
+    // Sleep for 1 second to avoid race condition with the registry server.
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+
+    const componentsJsonPath = path.join(fixturePath, "components.json")
+    expect(await fs.pathExists(componentsJsonPath)).toBe(true)
+
+    const componentsJson = await fs.readJson(componentsJsonPath)
+    expect(componentsJson).toMatchObject({
+      style: "new-york",
+      rsc: true,
+      tsx: true,
+      tailwind: {
+        config: "",
+        css: "app/globals.css",
+        baseColor: "neutral",
+        cssVariables: true,
+      },
+      aliases: {
+        components: "@/components",
+        utils: "@/lib/utils",
+        ui: "@/components/ui",
+        lib: "@/lib",
+        hooks: "@/hooks",
+      },
+    })
+
+    expect(await fs.pathExists(path.join(fixturePath, "lib/utils.ts"))).toBe(
+      true
+    )
+
+    const cssPath = path.join(fixturePath, "app/globals.css")
+    const cssContent = await fs.readFile(cssPath, "utf-8")
+    expect(cssContent).toContain("@layer base")
+    expect(cssContent).toContain(":root")
+    expect(cssContent).toContain(".dark")
+    expect(cssContent).toContain("tw-animate-css")
+    expect(cssContent).toContain("--background")
+    expect(cssContent).toContain("--foreground")
+  })
+
+  it("should init with custom base color", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=zinc"])
+
+    const componentsJson = await fs.readJson(
+      path.join(fixturePath, "components.json")
+    )
+    expect(componentsJson.style).toBe("new-york")
+    expect(componentsJson.tailwind.baseColor).toBe("zinc")
+  })
+
+  it("should init without CSS variables", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, [
+      "init",
+      "--base-color=stone",
+      "--no-css-variables",
+    ])
+
+    const componentsJson = await fs.readJson(
+      path.join(fixturePath, "components.json")
+    )
+    expect(componentsJson.tailwind.cssVariables).toBe(false)
+
+    const cssPath = path.join(fixturePath, "app/globals.css")
+    const cssContent = await fs.readFile(cssPath, "utf-8")
+    expect(cssContent).not.toContain("--background")
+    expect(cssContent).not.toContain("--foreground")
+  })
+
+  it("should init with components", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral", "button"])
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+  })
+})
+
+describe("shadcn init - vite-app", () => {
+  it("should init with custom alias and src", async () => {
+    const fixturePath = await createFixtureTestDirectory("vite-app")
+    await npxShadcn(fixturePath, ["init", "--base-color=gray", "alert-dialog"])
+
+    const componentsJson = await fs.readJson(
+      path.join(fixturePath, "components.json")
+    )
+    expect(componentsJson.style).toBe("new-york")
+    expect(componentsJson.tailwind.baseColor).toBe("gray")
+    expect(componentsJson.aliases).toMatchObject({
+      components: "#custom/components",
+      utils: "#custom/lib/utils",
+      ui: "#custom/components/ui",
+      lib: "#custom/lib",
+      hooks: "#custom/hooks",
+    })
+
+    expect(
+      await fs.pathExists(
+        path.join(fixturePath, "src/components/ui/alert-dialog.tsx")
+      )
+    ).toBe(true)
+
+    expect(
+      await fs.pathExists(
+        path.join(fixturePath, "src/components/ui/button.tsx")
+      )
+    ).toBe(true)
+
+    const alertDialogContent = await fs.readFile(
+      path.join(fixturePath, "src/components/ui/alert-dialog.tsx"),
+      "utf-8"
+    )
+    expect(alertDialogContent).toContain(
+      'import { buttonVariants } from "#custom/components/ui/button"'
+    )
+    expect(alertDialogContent).toContain(
+      'import { cn } from "#custom/lib/utils"'
+    )
+  })
+})
+
+describe("shadcn init - custom style", async () => {
+  const customRegistry = await createRegistryServer(
+    [
+      {
+        name: "style",
+        type: "registry:style",
+        files: [
+          {
+            path: "path/to/foo.ts",
+            content: "const foo = 'bar'",
+            type: "registry:lib",
+          },
+        ],
+        cssVars: {
+          theme: {
+            "font-sans": "DM Sans, sans-serif",
+          },
+          light: {
+            primary: "#dc2626",
+            "foo-var": "3rem",
+          },
+          dark: {
+            "custom-brand": "#fef3c7",
+            "foo-var": "1rem",
+          },
+        },
+      },
+      {
+        name: "style-extended",
+        type: "registry:style",
+        registryDependencies: ["http://localhost:4445/r/style.json"],
+        files: [
+          {
+            path: "path/to/foo.ts",
+            content: "const foo = 'baz-qux'",
+            type: "registry:lib",
+          },
+        ],
+        cssVars: {
+          theme: {
+            "font-sans": "Geist Sans, sans-serif",
+            "font-mono": "Geist Mono, monospace",
+          },
+          light: {
+            primary: "#059669",
+            secondary: "#06b6d4",
+          },
+          dark: {
+            "foo-var": "2rem",
+          },
+        },
+      },
+      {
+        name: "style-extend-none",
+        type: "registry:style",
+        extends: "none",
+        registryDependencies: ["http://localhost:4445/r/style.json"],
+        files: [
+          {
+            path: "path/to/foo.ts",
+            content: "const foo = 'baz-qux'",
+            type: "registry:lib",
+          },
+        ],
+        cssVars: {
+          theme: {
+            "font-sans": "Geist Sans, sans-serif",
+            "font-mono": "Geist Mono, monospace",
+          },
+          light: {
+            primary: "#059669",
+            secondary: "#06b6d4",
+          },
+          dark: {
+            "foo-var": "2rem",
+          },
+        },
+      },
+    ],
+    {
+      port: 4445,
+    }
+  )
+
+  beforeAll(async () => {
+    await customRegistry.start()
+  })
+
+  afterAll(async () => {
+    await customRegistry.stop()
+  })
+
+  it("should init with style that extends shadcn", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "http://localhost:4445/r/style.json"])
+
+    const componentsJson = await fs.readJson(
+      path.join(fixturePath, "components.json")
+    )
+    expect(componentsJson.style).toBe("new-york")
+    expect(componentsJson.tailwind.baseColor).toBe("neutral")
+
+    // Install utils from shadcn.
+    expect(await fs.pathExists(path.join(fixturePath, "lib/utils.ts"))).toBe(
+      true
+    )
+
+    // Then add foo.ts from the custom registry.
+    expect(
+      await fs.readFile(path.join(fixturePath, "lib/foo.ts"), "utf-8")
+    ).toBe("const foo = 'bar'")
+
+    const globalCssContent = await fs.readFile(
+      path.join(fixturePath, "app/globals.css"),
+      "utf-8"
+    )
+    expect(globalCssContent).toContain("@layer base")
+    expect(globalCssContent).toContain(":root")
+    expect(globalCssContent).toContain(".dark")
+    expect(globalCssContent).toContain("tw-animate-css")
+    expect(
+      cssHasProperties(globalCssContent, [
+        {
+          selector: "@theme inline",
+          properties: {
+            "--font-sans": "DM Sans, sans-serif",
+            "--color-custom-brand": "var(--custom-brand)",
+            "--foo-var": "var(--foo-var)",
+          },
+        },
+        {
+          selector: ":root",
+          properties: {
+            "--background": "oklch(1 0 0)",
+            "--foreground": "oklch(0.145 0 0)",
+            "--primary": "#dc2626",
+            "--foo-var": "3rem",
+          },
+        },
+        {
+          selector: ".dark",
+          properties: {
+            "--background": "oklch(0.145 0 0)",
+            "--foreground": "oklch(0.985 0 0)",
+            "--primary": "oklch(0.922 0 0)",
+            "--custom-brand": "#fef3c7",
+            "--foo-var": "1rem",
+          },
+        },
+      ])
+    ).toBe(true)
+  })
+
+  it("should init with style that extends another style", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, [
+      "init",
+      "http://localhost:4445/r/style-extended.json",
+    ])
+
+    const componentsJson = await fs.readJson(
+      path.join(fixturePath, "components.json")
+    )
+    expect(componentsJson.style).toBe("new-york")
+    expect(componentsJson.tailwind.baseColor).toBe("neutral")
+
+    // Install utils from shadcn.
+    expect(await fs.pathExists(path.join(fixturePath, "lib/utils.ts"))).toBe(
+      true
+    )
+
+    // Then add foo.ts from the custom registry with overriden payload.
+    expect(
+      await fs.readFile(path.join(fixturePath, "lib/foo.ts"), "utf-8")
+    ).toBe("const foo = 'baz-qux'")
+
+    const globalCssContent = await fs.readFile(
+      path.join(fixturePath, "app/globals.css"),
+      "utf-8"
+    )
+
+    expect(globalCssContent).toContain("@layer base")
+    expect(globalCssContent).toContain(":root")
+    expect(globalCssContent).toContain(".dark")
+    expect(globalCssContent).toContain("tw-animate-css")
+
+    expect(
+      cssHasProperties(globalCssContent, [
+        {
+          selector: "@theme inline",
+          properties: {
+            "--font-sans": "Geist Sans, sans-serif",
+            "--font-mono": "Geist Mono, monospace",
+            "--color-custom-brand": "var(--custom-brand)",
+            "--foo-var": "var(--foo-var)",
+          },
+        },
+        {
+          selector: ":root",
+          properties: {
+            "--background": "oklch(1 0 0)",
+            "--foreground": "oklch(0.145 0 0)",
+            "--primary": "#059669",
+            "--secondary": "#06b6d4",
+            "--foo-var": "3rem",
+          },
+        },
+        {
+          selector: ".dark",
+          properties: {
+            "--background": "oklch(0.145 0 0)",
+            "--foreground": "oklch(0.985 0 0)",
+            "--primary": "oklch(0.922 0 0)",
+            "--custom-brand": "#fef3c7",
+            "--foo-var": "2rem",
+          },
+        },
+      ])
+    ).toBe(true)
+  })
+
+  it("should init with --no-base-style", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--no-base-style"])
+
+    // We still expect components.json to be created.
+    // With some defaults.
+    const componentsJson = await fs.readJson(
+      path.join(fixturePath, "components.json")
+    )
+    expect(componentsJson.style).toBe("new-york")
+    expect(componentsJson.tailwind.baseColor).toBe("neutral")
+
+    // No utils should be installed.
+    expect(await fs.pathExists(path.join(fixturePath, "lib/utils.ts"))).toBe(
+      false
+    )
+
+    // The css file should only have tailwind imports.
+    expect(
+      await fs.readFile(path.join(fixturePath, "app/globals.css"), "utf-8")
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+      "
+    `)
+  })
+
+  it("should init with custom style and --no-base-style", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, [
+      "init",
+      "http://localhost:4445/r/style-extended.json",
+      "--no-base-style",
+    ])
+
+    // We still expect components.json to be created.
+    // With some defaults.
+    const componentsJson = await fs.readJson(
+      path.join(fixturePath, "components.json")
+    )
+    expect(componentsJson.style).toBe("new-york")
+    expect(componentsJson.tailwind.baseColor).toBe("neutral")
+
+    // No utils should be installed.
+    expect(await fs.pathExists(path.join(fixturePath, "lib/utils.ts"))).toBe(
+      false
+    )
+
+    // But we should have the foo.ts from the custom style.
+    expect(
+      await fs.readFile(path.join(fixturePath, "lib/foo.ts"), "utf-8")
+    ).toBe("const foo = 'baz-qux'")
+
+    expect(
+      await fs.readFile(path.join(fixturePath, "app/globals.css"), "utf-8")
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      @theme inline {
+          --font-sans: Geist Sans, sans-serif;
+          --font-mono: Geist Mono, monospace;
+          --color-custom-brand: var(--custom-brand);
+          --color-secondary: var(--secondary);
+          --foo-var: var(--foo-var);
+          --color-primary: var(--primary);
+      }
+
+      :root {
+          --primary: #059669;
+          --foo-var: 3rem;
+          --secondary: #06b6d4;
+      }
+
+      .dark {
+          --custom-brand: #fef3c7;
+          --foo-var: 2rem;
+      }
+      "
+    `)
+  })
+
+  it("should init with custom style extended none", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, [
+      "init",
+      "http://localhost:4445/r/style-extend-none.json",
+    ])
+
+    // We still expect components.json to be created.
+    // With some defaults.
+    const componentsJson = await fs.readJson(
+      path.join(fixturePath, "components.json")
+    )
+    expect(componentsJson.style).toBe("new-york")
+    expect(componentsJson.tailwind.baseColor).toBe("neutral")
+
+    // No utils should be installed.
+    expect(await fs.pathExists(path.join(fixturePath, "lib/utils.ts"))).toBe(
+      false
+    )
+
+    // But we should have the foo.ts from the custom style.
+    expect(
+      await fs.readFile(path.join(fixturePath, "lib/foo.ts"), "utf-8")
+    ).toBe("const foo = 'baz-qux'")
+
+    expect(
+      await fs.readFile(path.join(fixturePath, "app/globals.css"), "utf-8")
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      @theme inline {
+          --font-sans: Geist Sans, sans-serif;
+          --font-mono: Geist Mono, monospace;
+          --color-custom-brand: var(--custom-brand);
+          --color-secondary: var(--secondary);
+          --foo-var: var(--foo-var);
+          --color-primary: var(--primary);
+      }
+
+      :root {
+          --primary: #059669;
+          --foo-var: 3rem;
+          --secondary: #06b6d4;
+      }
+
+      .dark {
+          --custom-brand: #fef3c7;
+          --foo-var: 2rem;
+      }
+      "
+    `)
+  })
+})
+
+describe("shadcn init - existing components.json", () => {
+  it("should override existing components.json when using --force", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+
+    // Run init with default configuration.
+    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+
+    // Override style in components.json.
+    const componentsJsonPath = path.join(fixturePath, "components.json")
+    const config = await fs.readJson(componentsJsonPath)
+    config.style = "custom-style"
+    await fs.writeJson(componentsJsonPath, config)
+
+    // Reinit with --force and different base color.
+    await npxShadcn(fixturePath, ["init", "--force", "--base-color=zinc"])
+
+    const newConfig = await fs.readJson(componentsJsonPath)
+    expect(newConfig.style).toBe("new-york")
+    expect(newConfig.tailwind.baseColor).toBe("zinc")
+    expect(await fs.pathExists(componentsJsonPath + ".bak")).toBe(false)
+  })
+
+  it("should restore backup components.json on error", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+
+    const existingConfig = {
+      $schema: "https://ui.shadcn.com/schema.json",
+      style: "default",
+      tailwind: {
+        css: "app/globals.css",
+        baseColor: "zinc",
+        cssVariables: false,
+      },
+      rsc: true,
+      tsx: true,
+      aliases: {
+        components: "@/components",
+        utils: "@/lib/utils",
+      },
+    }
+    const componentsJsonPath = path.join(fixturePath, "components.json")
+    await fs.writeJson(componentsJsonPath, existingConfig)
+
+    // Run init with an invalid component - this should fail and restore
+    await npxShadcn(fixturePath, [
+      "init",
+      "invalid-component-that-does-not-exist",
+    ])
+
+    expect(await fs.pathExists(componentsJsonPath)).toBe(true)
+    const newConfig = await fs.readJson(componentsJsonPath)
+    expect(newConfig).toMatchObject(existingConfig)
+    expect(await fs.pathExists(componentsJsonPath + ".bak")).toBe(false)
+  })
+})
diff --git a/packages/tests/src/tests/registries.test.ts b/packages/tests/src/tests/registries.test.ts
new file mode 100644
index 00000000000..adbd74d9a48
--- /dev/null
+++ b/packages/tests/src/tests/registries.test.ts
@@ -0,0 +1,1332 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
+import path from "path"
+import fs from "fs-extra"
+import { afterAll, beforeAll, describe, expect, it } from "vitest"
+
+import {
+  createFixtureTestDirectory,
+  cssHasProperties,
+  npxShadcn,
+} from "../utils/helpers"
+import { configureRegistries, createRegistryServer } from "../utils/registry"
+
+const registryShadcn = await createRegistryServer(
+  [
+    {
+      name: "utils",
+      type: "registry:component",
+      files: [
+        {
+          path: "registry/new-york-v4/lib/utils.ts",
+          content:
+            'import { clsx, type ClassValue } from "clsx"\nimport { twMerge } from "tailwind-merge"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n',
+          type: "registry:lib",
+        },
+      ],
+    },
+    {
+      name: "alert-dialog",
+      type: "registry:ui",
+      files: [
+        {
+          path: "components/ui/alert-dialog.tsx",
+          content:
+            "export function AlertDialog() {\n  return <div>AlertDialog Component from Registry Shadcn</div>\n}",
+          type: "registry:ui",
+        },
+        {
+          path: "components/ui/button.tsx",
+          content:
+            "export function Button() {\n  return <div>Button Component from Registry Shadcn</div>\n}",
+          type: "registry:ui",
+        },
+      ],
+    },
+    {
+      name: "button",
+      type: "registry:ui",
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          content:
+            "export function Button() {\n  return <div>Button Component from Registry Shadcn</div>\n}",
+          type: "registry:ui",
+        },
+      ],
+    },
+    {
+      name: "example-button",
+      type: "registry:component",
+      registryDependencies: ["@shadcn/button"],
+      files: [
+        {
+          path: "components/example-button.tsx",
+          content:
+            "export function ExampleButton() {\n  return <div>Example Button Component from Registry Shadcn</div>\n}",
+          type: "registry:component",
+        },
+      ],
+    },
+    {
+      name: "no-framework-item",
+      type: "registry:item",
+      files: [
+        {
+          path: "path/to/foo.txt",
+          content: "Foo Bar",
+          type: "registry:item",
+          target: "path/to/foo.txt",
+        },
+      ],
+    },
+  ],
+  {
+    port: 4040,
+    path: "/r",
+  }
+)
+
+const registryOne = await createRegistryServer(
+  [
+    {
+      name: "style",
+      type: "registry:style",
+      cssVars: {
+        theme: {
+          "font-sans": "Inter, sans-serif",
+        },
+        light: {
+          brand: "oklch(20 14.3% 4.1%)",
+          "brand-foreground": "oklch(24 1.3% 10%)",
+        },
+        dark: {
+          brand: "oklch(24 1.3% 10%)",
+        },
+      },
+      css: {
+        button: {
+          cursor: "pointer",
+        },
+      },
+    },
+    {
+      name: "foo",
+      type: "registry:component",
+      files: [
+        {
+          path: "components/foo.tsx",
+          content:
+            "export function Foo() {\n  return <div>Foo Component from Registry 1</div>\n}",
+          type: "registry:component",
+        },
+      ],
+    },
+    {
+      name: "bar",
+      type: "registry:component",
+      files: [
+        {
+          path: "components/bar.tsx",
+          content:
+            "export function Bar() {\n  return <div>Bar Component from Registry 1</div>\n}",
+          type: "registry:component",
+        },
+      ],
+    },
+    {
+      name: "baz",
+      type: "registry:component",
+      registryDependencies: ["@one/bar"],
+      files: [
+        {
+          path: "components/baz.tsx",
+          content:
+            "export function Baz() {\n  return <div>Baz Component from Registry 2</div>\n}",
+          type: "registry:component",
+        },
+      ],
+    },
+    {
+      name: "qux",
+      type: "registry:component",
+      registryDependencies: ["@one/baz"],
+      files: [
+        {
+          path: "components/qux.tsx",
+          content:
+            "export function Qux() {\n  return <div>Qux Component from Registry 2</div>\n}",
+          type: "registry:component",
+        },
+      ],
+    },
+    {
+      name: "quux",
+      type: "registry:page",
+      registryDependencies: ["@two/two"],
+      files: [
+        {
+          path: "path/to/app/quux/page.tsx",
+          content:
+            "export function Quux() {\n  return <div>Quux Component from Registry 2</div>\n}",
+          type: "registry:page",
+          target: "app/quux/page.tsx",
+        },
+      ],
+    },
+    {
+      name: "foo-theme",
+      type: "registry:theme",
+      cssVars: {
+        light: {
+          background: "white",
+          foreground: "black",
+        },
+        dark: {
+          background: "black",
+          foreground: "white",
+        },
+      },
+    },
+  ],
+  {
+    port: 4444,
+    path: "/r",
+  }
+)
+
+const registryTwo = await createRegistryServer(
+  [
+    {
+      name: "style",
+      type: "registry:style",
+      cssVars: {
+        theme: {
+          "font-serif": "Garamond, serif",
+        },
+        light: {
+          neutral: "oklch(10 14.3% 4.1%)",
+          "neutral-foreground": "oklch(24 3% 10%)",
+        },
+        dark: {
+          neutral: "oklch(24 1.3% 10%)",
+        },
+      },
+      css: {
+        button: {
+          cursor: "pointer",
+        },
+      },
+    },
+    {
+      name: "one",
+      type: "registry:file",
+      files: [
+        {
+          path: "path/to/one.txt",
+          content: "one",
+          type: "registry:file",
+          target: "example/one.txt",
+        },
+      ],
+    },
+    {
+      name: "two",
+      type: "registry:ui",
+      registryDependencies: ["button", "@one/qux"],
+      files: [
+        {
+          path: "components/ui/two.tsx",
+          content:
+            "export function Two() {\n  return <div>Two Component from Registry 2</div>\n}",
+          type: "registry:ui",
+        },
+        {
+          path: "components/example.tsx",
+          content:
+            "export function Example() {\n  return <div>Example Component from Registry 2</div>\n}",
+          type: "registry:component",
+        },
+      ],
+    },
+    {
+      name: "theme",
+      type: "registry:theme",
+      cssVars: {
+        light: {
+          background: "red",
+          foreground: "blue",
+          primary: "green",
+        },
+        dark: {
+          foreground: "red",
+        },
+      },
+    },
+  ],
+  {
+    port: 5555,
+    path: "/registry",
+  }
+)
+
+beforeAll(async () => {
+  // This sets the shadcn registry to our mock registry.
+  process.env.REGISTRY_URL = "http://localhost:4040/r"
+  await registryShadcn.start()
+  await registryOne.start()
+  await registryTwo.start()
+})
+
+afterAll(async () => {
+  await registryShadcn.stop()
+  await registryOne.stop()
+  await registryTwo.stop()
+})
+
+describe("registries", () => {
+  it("should add from registry using url", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await npxShadcn(fixturePath, ["add", "http://localhost:4444/r/foo"])
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/foo.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add multiple items from registry using urls", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await npxShadcn(fixturePath, [
+      "add",
+      "http://localhost:4444/r/foo",
+      "http://localhost:4444/r/bar",
+    ])
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/foo.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/bar.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add multiple items from multiple registries using urls", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await npxShadcn(fixturePath, [
+      "add",
+      "http://localhost:4444/r/foo",
+      "http://localhost:5555/registry/one",
+    ])
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/foo.tsx"))
+    ).toBe(true)
+    expect(await fs.pathExists(path.join(fixturePath, "example/one.txt"))).toBe(
+      true
+    )
+  })
+
+  it("should add item using name and from registry url", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await npxShadcn(fixturePath, [
+      "add",
+      "alert-dialog",
+      "http://localhost:4444/r/foo",
+    ])
+
+    expect(
+      await fs.pathExists(
+        path.join(fixturePath, "components/ui/alert-dialog.tsx")
+      )
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/foo.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add item from name, local path and registry url", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    await npxShadcn(fixturePath, [
+      "add",
+      "alert-dialog",
+      "../../fixtures/registry/example-item.json",
+      "http://localhost:4444/r/foo",
+    ])
+
+    expect(await fs.pathExists(path.join(fixturePath, "path/to/foo.txt"))).toBe(
+      true
+    )
+    expect(
+      await fs.pathExists(
+        path.join(fixturePath, "components/ui/alert-dialog.tsx")
+      )
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/foo.tsx"))
+    ).toBe(true)
+  })
+
+  it("should show only built-in registries when not configured", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["info"])
+    // Should show registries since @shadcn is built-in
+    expect(output.stdout).toContain("registries:")
+    expect(output.stdout).toContain("@shadcn")
+    // Should not show user-defined registries
+    expect(output.stdout).not.toContain("@one")
+    expect(output.stdout).not.toContain("@two")
+  })
+
+  it("should show an error when adding from a non-existent registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, [
+      "add",
+      "@non-existent/component",
+    ])
+    expect(output.stdout).toContain('Unknown registry "@non-existent"')
+    expect(output.stdout).toContain(
+      '"registries": {\n' +
+        '    "@non-existent": "[URL_TO_REGISTRY]"\n' +
+        "  }\n"
+    )
+  })
+
+  it("should show registries when configured", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["info"])
+    // Should contain both built-in and user registries
+    expect(output.stdout).toContain("registries:")
+    expect(output.stdout).toContain("@shadcn")
+    expect(output.stdout).toContain("@one")
+    expect(output.stdout).toContain("http://localhost:4444/r/{name}")
+  })
+
+  it("should show multiple registries when configured", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+      "@two": {
+        url: "http://localhost:5555/registry/{name}",
+        headers: {
+          Authorization: "Bearer ${BEARER_TOKEN}",
+        },
+      },
+    })
+
+    const output = await npxShadcn(fixturePath, ["info"])
+    // Should contain built-in and both user registries
+    expect(output.stdout).toContain("registries:")
+    expect(output.stdout).toContain("@shadcn")
+    expect(output.stdout).toContain("@one")
+    expect(output.stdout).toContain("@two")
+    expect(output.stdout).toContain("http://localhost:4444/r/{name}")
+    expect(output.stdout).toContain("http://localhost:5555/registry/{name}")
+  })
+
+  it("should show an error when adding from a non-existent registry with configured registries", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["add", "@acme/component"])
+    expect(output.stdout).toContain('Unknown registry "@acme"')
+    expect(output.stdout).toContain(
+      '"registries": {\n' + '    "@acme": "[URL_TO_REGISTRY]"\n' + "  }\n"
+    )
+  })
+
+  it("should add item using namespaced registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["add", "@one/foo"])
+
+    if (!(await fs.pathExists(path.join(fixturePath, "components/foo.tsx")))) {
+      console.log("Test failed. Command output:", output.stdout)
+      console.log("Command stderr:", output.stderr)
+    }
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/foo.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add multiple items using namespaced registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+    })
+
+    await npxShadcn(fixturePath, ["add", "@one/foo", "@one/bar"])
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/foo.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/bar.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add registry dependencies when adding from namespaced registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+    })
+
+    await npxShadcn(fixturePath, ["add", "@one/baz"])
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/baz.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/bar.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add nested registry dependencies when adding from namespaced registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+    })
+
+    await npxShadcn(fixturePath, ["add", "@one/qux"])
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/qux.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/baz.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/bar.tsx"))
+    ).toBe(true)
+  })
+
+  it("should show an error when adding url with namespaced dependency", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, [
+      "add",
+      "http://localhost:4444/r/baz",
+    ])
+
+    expect(output.stdout).toContain('Unknown registry "@one"')
+  })
+
+  it("should show an error when adding url with unconfigured registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, [
+      "add",
+      "http://localhost:5555/registry/two",
+    ])
+
+    expect(output.stdout).toContain('Unknown registry "@one"')
+  })
+
+  it("should show an error when adding namespaced with unconfigured registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    await configureRegistries(fixturePath, {
+      "@two": "http://localhost:5555/registry/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["add", "@two/two"])
+    expect(output.stdout).toContain('Unknown registry "@one"')
+  })
+
+  it("should show an error when adding multiple namespaced items with unconfigured registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    await configureRegistries(fixturePath, {
+      "@two": "http://localhost:5555/registry/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, [
+      "add",
+      "@two/one",
+      "@foobar/foo",
+    ])
+
+    expect(output.stdout).toContain('Unknown registry "@foobar"')
+  })
+
+  it("should show an error when authentication is not configured", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@two": "http://localhost:5555/registry/bearer/{name}",
+    })
+    const output = await npxShadcn(fixturePath, ["add", "@two/one"])
+    expect(output.stdout).toContain("Unauthorized")
+  })
+
+  it("should add item when authentication is configured", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@two": {
+        url: "http://localhost:5555/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer EXAMPLE_BEARER_TOKEN",
+        },
+      },
+    })
+
+    await npxShadcn(fixturePath, ["add", "@two/one"])
+
+    expect(await fs.pathExists(path.join(fixturePath, "example/one.txt"))).toBe(
+      true
+    )
+  })
+
+  it("should show an error for nested unauthorized dependencies", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+      "@two": "http://localhost:5555/registry/bearer/{name}",
+    })
+    const output = await npxShadcn(fixturePath, ["add", "@one/quux"])
+    expect(output.stdout).toContain("Unauthorized")
+  })
+
+  it("should add item when authentication is configured and nested dependencies are authorized", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+      "@two": {
+        url: "http://localhost:5555/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer EXAMPLE_BEARER_TOKEN",
+        },
+      },
+    })
+    await npxShadcn(fixturePath, ["add", "@one/quux"])
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "app/quux/page.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/two.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/example.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/qux.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/bar.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/baz.tsx"))
+    ).toBe(true)
+  })
+
+  it("should error when adding item with api key authentication and no api key is provided", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@two": "http://localhost:5555/registry/api-key/{name}",
+    })
+    const output = await npxShadcn(fixturePath, ["add", "@two/one"])
+    expect(output.stdout).toContain("Unauthorized")
+  })
+
+  it("should add item with api key authentication", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@two": {
+        url: "http://localhost:5555/registry/api-key/{name}",
+        headers: {
+          "x-api-key": "EXAMPLE_API_KEY",
+        },
+      },
+    })
+    await npxShadcn(fixturePath, ["add", "@two/one"])
+    expect(await fs.pathExists(path.join(fixturePath, "example/one.txt"))).toBe(
+      true
+    )
+  })
+
+  it("should error when adding item with client secret authentication and no client secret is provided", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@two": {
+        url: "http://localhost:5555/registry/client-secret/{name}",
+      },
+    })
+    const output = await npxShadcn(fixturePath, ["add", "@two/one"])
+    expect(output.stdout).toContain("Unauthorized")
+  })
+
+  it("should add item with client secret authentication", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@two": {
+        url: "http://localhost:5555/registry/client-secret/{name}",
+        headers: {
+          "x-client-secret": "EXAMPLE_CLIENT_SECRET",
+          "x-client-id": "EXAMPLE_CLIENT_ID",
+        },
+      },
+    })
+    await npxShadcn(fixturePath, ["add", "@two/one"])
+    expect(await fs.pathExists(path.join(fixturePath, "example/one.txt"))).toBe(
+      true
+    )
+  })
+
+  it("should expand env vars in registries config", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "${NEXT_PUBLIC_REGISTRY_URL}/r/{name}",
+    })
+
+    process.env.NEXT_PUBLIC_REGISTRY_URL = "http://localhost:4444/r"
+    await npxShadcn(fixturePath, ["add", "@one/foo"])
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/foo.tsx"))
+    ).toBe(true)
+  })
+
+  it("should expand env vars in registries config with multiple registries", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "${NEXT_PUBLIC_REGISTRY_URL}/r/{name}",
+      "@two": {
+        url: "http://localhost:5555/registry/params/{name}?token=${REGISTRY_TOKEN}",
+        headers: {
+          "x-client-secret": "EXAMPLE_CLIENT_SECRET",
+          "x-client-id": "EXAMPLE_CLIENT_ID",
+        },
+      },
+      "@three": {
+        url: "http://localhost:4444/r/api-key/{name}",
+        headers: {
+          "x-api-key": "${REGISTRY_API_KEY}",
+        },
+      },
+    })
+
+    process.env.NEXT_PUBLIC_REGISTRY_URL = "http://localhost:4444/r"
+    process.env.REGISTRY_TOKEN = "EXAMPLE_REGISTRY_TOKEN"
+    process.env.REGISTRY_API_KEY = "EXAMPLE_API_KEY"
+    await npxShadcn(fixturePath, ["add", "@one/foo", "@three/baz", "@two/two"])
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/foo.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/baz.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/bar.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/two.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/example.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/qux.tsx"))
+    ).toBe(true)
+  })
+
+  describe("fetchFromRegistry improvements", () => {
+    it("should handle registry resolution transparently", async () => {
+      const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+      await configureRegistries(fixturePath, {
+        "@one": "http://localhost:4444/r/{name}",
+        "@two": {
+          url: "http://localhost:5555/registry/{name}",
+          headers: {
+            Authorization: "Bearer EXAMPLE_BEARER_TOKEN",
+          },
+        },
+      })
+
+      // Test that components can be added without pre-resolution
+      await npxShadcn(fixturePath, ["add", "@one/foo", "@two/two"])
+
+      // Verify all files were created including dependencies
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/foo.tsx"))
+      ).toBe(true)
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/ui/two.tsx"))
+      ).toBe(true)
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/example.tsx"))
+      ).toBe(true)
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+      ).toBe(true)
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/qux.tsx"))
+      ).toBe(true)
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/baz.tsx"))
+      ).toBe(true)
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/bar.tsx"))
+      ).toBe(true)
+    })
+
+    it("should maintain type safety with mixed registries", async () => {
+      const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+      await configureRegistries(fixturePath, {
+        "@one": "http://localhost:4444/r/{name}",
+      })
+
+      // Mix of namespaced and non-namespaced components
+      await npxShadcn(fixturePath, ["add", "@one/foo", "button"])
+
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/foo.tsx"))
+      ).toBe(true)
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+      ).toBe(true)
+    })
+
+    it("should handle circular dependencies gracefully", async () => {
+      const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+      // Create a mock server with circular dependencies
+      const circularServer = await createRegistryServer(
+        [
+          {
+            name: "comp-a",
+            type: "registry:component",
+            registryDependencies: ["@circular/comp-b"],
+            files: [
+              {
+                path: "components/comp-a.tsx",
+                content:
+                  "export function CompA() { return <div>Component A</div> }",
+                type: "registry:component",
+              },
+            ],
+          },
+          {
+            name: "comp-b",
+            type: "registry:component",
+            registryDependencies: ["@circular/comp-a"],
+            files: [
+              {
+                path: "components/comp-b.tsx",
+                content:
+                  "export function CompB() { return <div>Component B</div> }",
+                type: "registry:component",
+              },
+            ],
+          },
+        ],
+        {
+          port: 9999,
+          path: "/circular",
+        }
+      )
+
+      await circularServer.start()
+
+      await configureRegistries(fixturePath, {
+        "@circular": "http://localhost:9999/circular/{name}",
+      })
+
+      // Should handle circular dependency without infinite loop
+      await npxShadcn(fixturePath, ["add", "@circular/comp-a"])
+
+      // Both components should be added once
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/comp-a.tsx"))
+      ).toBe(true)
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/comp-b.tsx"))
+      ).toBe(true)
+
+      await circularServer.stop()
+    })
+
+    it("should preserve header context across dependency resolution", async () => {
+      const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+      // Create a server that validates headers for all requests
+      const authServer = await createRegistryServer(
+        [
+          {
+            name: "parent",
+            type: "registry:component",
+            registryDependencies: ["@auth/child1", "@auth/child2"],
+            files: [
+              {
+                path: "components/parent.tsx",
+                content:
+                  "export function Parent() { return <div>Parent</div> }",
+                type: "registry:component",
+              },
+            ],
+          },
+          {
+            name: "child1",
+            type: "registry:component",
+            files: [
+              {
+                path: "components/child1.tsx",
+                content:
+                  "export function Child1() { return <div>Child 1</div> }",
+                type: "registry:component",
+              },
+            ],
+          },
+          {
+            name: "child2",
+            type: "registry:component",
+            files: [
+              {
+                path: "components/child2.tsx",
+                content:
+                  "export function Child2() { return <div>Child 2</div> }",
+                type: "registry:component",
+              },
+            ],
+          },
+        ],
+        {
+          port: 10000,
+          path: "/auth-test",
+        }
+      )
+
+      await authServer.start()
+
+      await configureRegistries(fixturePath, {
+        "@auth": {
+          url: "http://localhost:10000/auth-test/bearer/{name}",
+          headers: {
+            Authorization: "Bearer EXAMPLE_BEARER_TOKEN",
+          },
+        },
+      })
+
+      // Add parent which should trigger requests for dependencies
+      await npxShadcn(fixturePath, ["add", "@auth/parent"])
+
+      // All components should be added
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/parent.tsx"))
+      ).toBe(true)
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/child1.tsx"))
+      ).toBe(true)
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/child2.tsx"))
+      ).toBe(true)
+
+      await authServer.stop()
+    })
+  })
+
+  describe("built-in registries", () => {
+    it("should error when trying to override @shadcn in config", async () => {
+      const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+      // Read the existing components.json
+      const configPath = path.join(fixturePath, "components.json")
+      const config = await fs.readJson(configPath)
+
+      // Add @shadcn as a registry
+      config.registries = {
+        "@shadcn": "https://my-custom-registry.com/{name}",
+      }
+
+      // Write the updated config
+      await fs.writeJson(configPath, config, { spaces: 2 })
+
+      // Try to run a command that loads the config
+      const output = await npxShadcn(fixturePath, ["info"])
+
+      // Check either stdout or stderr for the error message
+      const combinedOutput = output.stdout + output.stderr
+
+      // The error should be about built-in registry or invalid configuration
+      expect(combinedOutput.toLowerCase()).toMatch(
+        /built-in registry|invalid configuration/
+      )
+    })
+
+    it("should work with @shadcn namespace without configuration", async () => {
+      const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+      // Don't configure any registries - @shadcn should be built-in
+      const output = await npxShadcn(fixturePath, ["add", "@shadcn/button"])
+
+      if (
+        !(await fs.pathExists(
+          path.join(fixturePath, "components/ui/button.tsx")
+        ))
+      ) {
+        console.log("Test failed. Command output:", output.stdout)
+        console.log("Command stderr:", output.stderr)
+      }
+
+      // Should add button component just like regular "button" command
+      expect(
+        await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+      ).toBe(true)
+    })
+
+    it("should allow similar but different registry names", async () => {
+      const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+      await configureRegistries(fixturePath, {
+        "@shadcn-ui": "http://localhost:4444/r/{name}",
+        "@myshadcn": "http://localhost:4444/r/{name}",
+        "@shadcntest": "http://localhost:4444/r/{name}",
+      })
+
+      // Try to run a command that loads the config
+      const output = await npxShadcn(fixturePath, ["info"])
+
+      // Should not error - check that registries are shown
+      expect(output.stdout).toContain("@shadcn-ui")
+      expect(output.stdout).toContain("@myshadcn")
+      expect(output.stdout).toContain("@shadcntest")
+      expect(output.stdout).not.toContain("built-in registry")
+    })
+  })
+
+  it("should add registry:item with no framework", async () => {
+    const fixturePath = await createFixtureTestDirectory("no-framework")
+    await npxShadcn(fixturePath, ["add", "no-framework-item"])
+
+    expect(await fs.pathExists(path.join(fixturePath, "path/to/foo.txt"))).toBe(
+      true
+    )
+    expect(
+      await fs.readFile(path.join(fixturePath, "path/to/foo.txt"), "utf-8")
+    ).toBe("Foo Bar")
+  })
+
+  it("should add registry:theme", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, [
+      "add",
+      "@one/foo-theme",
+      "--yes",
+    ])
+
+    expect(output.stderr).toContain("Updating CSS variables in app/globals.css")
+
+    const globalCssContent = await fs.readFile(
+      path.join(fixturePath, "app/globals.css"),
+      "utf-8"
+    )
+
+    expect(
+      cssHasProperties(globalCssContent, [
+        {
+          selector: ":root",
+          properties: {
+            "--background": "white",
+            "--foreground": "black",
+          },
+        },
+        {
+          selector: ".dark",
+          properties: {
+            "--background": "black",
+            "--foreground": "white",
+          },
+        },
+      ])
+    ).toBe(true)
+  })
+
+  it("should merge registry:theme with existing theme", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+      "@two": {
+        url: "http://localhost:5555/registry/{name}",
+        headers: {
+          Authorization: "Bearer ${BEARER_TOKEN}",
+        },
+      },
+    })
+
+    process.env.BEARER_TOKEN = "1234567890"
+
+    await npxShadcn(fixturePath, [
+      "add",
+      "@one/foo-theme",
+      "@two/theme",
+      "--yes",
+    ])
+    expect(
+      cssHasProperties(
+        await fs.readFile(path.join(fixturePath, "app/globals.css"), "utf-8"),
+        [
+          {
+            selector: ":root",
+            properties: {
+              "--background": "red",
+              "--foreground": "blue",
+              "--primary": "green",
+            },
+          },
+          {
+            selector: ".dark",
+            properties: {
+              "--background": "black",
+              "--foreground": "red",
+            },
+          },
+        ]
+      )
+    ).toBe(true)
+
+    await npxShadcn(fixturePath, [
+      "add",
+      "@two/theme",
+      "@one/foo-theme",
+      "--yes",
+    ])
+    expect(
+      cssHasProperties(
+        await fs.readFile(path.join(fixturePath, "app/globals.css"), "utf-8"),
+        [
+          {
+            selector: ":root",
+            properties: {
+              "--background": "white",
+              "--foreground": "black",
+              "--primary": "green",
+            },
+          },
+          {
+            selector: ".dark",
+            properties: {
+              "--background": "black",
+              "--foreground": "white",
+            },
+          },
+        ]
+      )
+    ).toBe(true)
+  })
+
+  it("should add named item from shadcn registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await npxShadcn(fixturePath, ["add", "button"])
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+  })
+
+  it("should add namespaced items from the shadcn registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await npxShadcn(fixturePath, [
+      "add",
+      "@shadcn/example-button",
+      "@shadcn/no-framework-item",
+    ])
+    expect(
+      await fs.pathExists(
+        path.join(fixturePath, "components/example-button.tsx")
+      )
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+    expect(await fs.pathExists(path.join(fixturePath, "path/to/foo.txt"))).toBe(
+      true
+    )
+    expect(
+      await fs.readFile(path.join(fixturePath, "path/to/foo.txt"), "utf-8")
+    ).toBe("Foo Bar")
+  })
+
+  it("should add namespaced items from shadcn registry with no-framework", async () => {
+    const fixturePath = await createFixtureTestDirectory("no-framework")
+    await npxShadcn(fixturePath, ["add", "@shadcn/no-framework-item"])
+    expect(await fs.pathExists(path.join(fixturePath, "path/to/foo.txt"))).toBe(
+      true
+    )
+    expect(
+      await fs.readFile(path.join(fixturePath, "path/to/foo.txt"), "utf-8")
+    ).toBe("Foo Bar")
+  })
+})
+
+describe("registries:init", () => {
+  beforeEach(async () => {
+    process.env.REGISTRY_URL = "http://localhost:4000/r"
+  })
+
+  it("should error when init with unconfigured registries", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    const output = await npxShadcn(fixturePath, ["init", "@two/style"])
+    expect(output.stdout).toContain('Unknown registry "@two"')
+  })
+
+  it("should init from registry:style", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:4444/r/{name}",
+    })
+
+    await npxShadcn(fixturePath, ["init", "@one/style"])
+
+    const componentsJson = await fs.readJson(
+      path.join(fixturePath, "components.json")
+    )
+    expect(componentsJson.style).toBe("new-york")
+    expect(componentsJson.tailwind.baseColor).toBe("neutral")
+    expect(componentsJson.registries).toMatchInlineSnapshot(`
+      {
+        "@one": "http://localhost:4444/r/{name}",
+      }
+    `)
+
+    // Install utils from shadcn.
+    expect(await fs.pathExists(path.join(fixturePath, "lib/utils.ts"))).toBe(
+      true
+    )
+
+    const globalCssContent = await fs.readFile(
+      path.join(fixturePath, "app/globals.css"),
+      "utf-8"
+    )
+
+    expect(
+      cssHasProperties(globalCssContent, [
+        {
+          selector: "@theme inline",
+          properties: {
+            "--font-sans": "Inter, sans-serif",
+            "--color-brand": "var(--brand)",
+            "--color-brand-foreground": "var(--brand-foreground)",
+          },
+        },
+        {
+          selector: ":root",
+          properties: {
+            "--background": "oklch(1 0 0)",
+            "--foreground": "oklch(0.145 0 0)",
+            "--brand": "oklch(20 14.3% 4.1%)",
+            "--brand-foreground": "oklch(24 1.3% 10%)",
+          },
+        },
+        {
+          selector: ".dark",
+          properties: {
+            "--background": "oklch(0.145 0 0)",
+            "--foreground": "oklch(0.985 0 0)",
+            "--brand": "oklch(24 1.3% 10%)",
+          },
+        },
+      ])
+    ).toBe(true)
+  })
+
+  it("should init from registry:style with auth", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+
+    await configureRegistries(fixturePath, {
+      "@two": {
+        url: "http://localhost:5555/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer ${BEARER_TOKEN}",
+        },
+      },
+    })
+
+    process.env.BEARER_TOKEN = "EXAMPLE_BEARER_TOKEN"
+
+    await npxShadcn(fixturePath, ["init", "@two/style"])
+
+    const componentsJson = await fs.readJson(
+      path.join(fixturePath, "components.json")
+    )
+    expect(componentsJson.style).toBe("new-york")
+    expect(componentsJson.tailwind.baseColor).toBe("neutral")
+    expect(componentsJson.registries).toMatchInlineSnapshot(`
+      {
+        "@two": {
+          "headers": {
+            "Authorization": "Bearer \${BEARER_TOKEN}",
+          },
+          "url": "http://localhost:5555/registry/bearer/{name}",
+        },
+      }
+    `)
+
+    // Install utils from shadcn.
+    expect(await fs.pathExists(path.join(fixturePath, "lib/utils.ts"))).toBe(
+      true
+    )
+
+    const globalCssContent = await fs.readFile(
+      path.join(fixturePath, "app/globals.css"),
+      "utf-8"
+    )
+    expect(
+      cssHasProperties(globalCssContent, [
+        {
+          selector: "@theme inline",
+          properties: {
+            "--font-serif": "Garamond, serif",
+            "--color-neutral": "var(--neutral)",
+            "--color-neutral-foreground": "var(--neutral-foreground)",
+          },
+        },
+        {
+          selector: ":root",
+          properties: {
+            "--background": "oklch(1 0 0)",
+            "--foreground": "oklch(0.145 0 0)",
+            "--neutral": "oklch(10 14.3% 4.1%)",
+            "--neutral-foreground": "oklch(24 3% 10%)",
+          },
+        },
+        {
+          selector: ".dark",
+          properties: {
+            "--background": "oklch(0.145 0 0)",
+            "--foreground": "oklch(0.985 0 0)",
+            "--neutral": "oklch(24 1.3% 10%)",
+          },
+        },
+      ])
+    ).toBe(true)
+  })
+})
diff --git a/packages/tests/src/tests/search.test.ts b/packages/tests/src/tests/search.test.ts
new file mode 100644
index 00000000000..fe0c6a2a93f
--- /dev/null
+++ b/packages/tests/src/tests/search.test.ts
@@ -0,0 +1,1011 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest"
+
+import { createFixtureTestDirectory, npxShadcn } from "../utils/helpers"
+import { configureRegistries, createRegistryServer } from "../utils/registry"
+
+const registryShadcn = await createRegistryServer(
+  [
+    {
+      name: "button",
+      type: "registry:ui",
+      description: "A button component",
+      dependencies: ["@radix-ui/react-slot"],
+      devDependencies: ["@types/react"],
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          content:
+            "export function Button() {\n  return <button>Click me</button>\n}",
+          type: "registry:ui",
+        },
+      ],
+    },
+    {
+      name: "card",
+      type: "registry:ui",
+      description: "A card component",
+      files: [
+        {
+          path: "components/ui/card.tsx",
+          content:
+            "export function Card() {\n  return <div>Card Component</div>\n}",
+          type: "registry:ui",
+        },
+      ],
+    },
+    {
+      name: "alert-dialog",
+      type: "registry:ui",
+      registryDependencies: ["button"],
+      files: [
+        {
+          path: "components/ui/alert-dialog.tsx",
+          content:
+            "export function AlertDialog() {\n  return <div>AlertDialog Component</div>\n}",
+          type: "registry:ui",
+        },
+      ],
+    },
+  ],
+  {
+    port: 9180,
+    path: "/r",
+  }
+)
+
+const registryOne = await createRegistryServer(
+  [
+    {
+      name: "foo",
+      type: "registry:component",
+      description: "Foo component from registry one",
+      dependencies: ["clsx", "tailwind-merge"],
+      files: [
+        {
+          path: "components/foo.tsx",
+          content:
+            "export function Foo() {\n  return <div>Foo Component from Registry 1</div>\n}",
+          type: "registry:component",
+        },
+      ],
+      tailwind: {
+        config: {
+          theme: {
+            extend: {
+              colors: {
+                foo: "#ff0000",
+              },
+            },
+          },
+        },
+      },
+      cssVars: {
+        light: {
+          "foo-color": "#ff0000",
+        },
+        dark: {
+          "foo-color": "#00ff00",
+        },
+      },
+    },
+    {
+      name: "bar",
+      type: "registry:component",
+      registryDependencies: ["@one/foo"],
+      files: [
+        {
+          path: "components/bar.tsx",
+          content:
+            "export function Bar() {\n  return <div>Bar Component from Registry 1</div>\n}",
+          type: "registry:component",
+        },
+      ],
+    },
+  ],
+  {
+    port: 9181,
+    path: "/r",
+  }
+)
+
+// Create a registry with many items for pagination testing
+const registryLarge = await createRegistryServer(
+  Array.from({ length: 20 }, (_, i) => ({
+    name: `component-${i + 1}`,
+    type: "registry:ui",
+    description: `Component number ${i + 1}`,
+    files: [
+      {
+        path: `components/ui/component-${i + 1}.tsx`,
+        content: `export function Component${i + 1}() { return <div>Component ${
+          i + 1
+        }</div> }`,
+        type: "registry:ui",
+      },
+    ],
+  })),
+  {
+    port: 9184,
+    path: "/large",
+  }
+)
+
+const registryTwo = await createRegistryServer(
+  [
+    {
+      name: "item",
+      type: "registry:ui",
+      description: "Item component from registry two",
+      files: [
+        {
+          path: "components/ui/item.tsx",
+          content:
+            "export function Item() {\n  return <div>Item Component from Registry 2</div>\n}",
+          type: "registry:ui",
+        },
+      ],
+    },
+    {
+      name: "secure-item",
+      type: "registry:component",
+      description: "Secure item requiring authentication",
+      registryDependencies: ["@one/foo"],
+      files: [
+        {
+          path: "components/secure-item.tsx",
+          content:
+            "export function SecureItem() {\n  return <div>Secure Item</div>\n}",
+          type: "registry:component",
+        },
+      ],
+    },
+  ],
+  {
+    port: 9182,
+    path: "/registry",
+  }
+)
+
+beforeAll(async () => {
+  await registryShadcn.start()
+  await registryOne.start()
+  await registryTwo.start()
+  await registryLarge.start()
+})
+
+afterAll(async () => {
+  await registryShadcn.stop()
+  await registryOne.stop()
+  await registryTwo.stop()
+  await registryLarge.stop()
+})
+
+describe("shadcn search", () => {
+  it("should search items from shadcn registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+    })
+    const output = await npxShadcn(fixturePath, ["search", "@shadcn"])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveProperty("items")
+    expect(parsed.items).toEqual(
+      expect.arrayContaining([
+        {
+          name: "button",
+          type: "registry:ui",
+          description: "A button component",
+          registry: "@shadcn",
+          addCommandArgument: "@shadcn/button",
+        },
+        {
+          name: "card",
+          type: "registry:ui",
+          description: "A card component",
+          registry: "@shadcn",
+          addCommandArgument: "@shadcn/card",
+        },
+        {
+          name: "alert-dialog",
+          type: "registry:ui",
+          description: undefined,
+          registry: "@shadcn",
+          addCommandArgument: "@shadcn/alert-dialog",
+        },
+      ])
+    )
+  })
+
+  it("should list items from multiple registries", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+      "@one": "http://localhost:9181/r/{name}",
+      "@two": "http://localhost:9182/registry/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "@one",
+      "@two",
+    ])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveProperty("items")
+    expect(parsed.items).toEqual(expect.any(Array))
+
+    // Check that items from all three registries are present
+    const registries = parsed.items.map((item: any) => item.registry)
+    expect(registries).toContain("@shadcn")
+    expect(registries).toContain("@one")
+    expect(registries).toContain("@two")
+  })
+
+  it("should list from configured registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9181/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["search", "@one"])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveProperty("items")
+    expect(parsed.items).toEqual(
+      expect.arrayContaining([
+        {
+          name: "foo",
+          type: "registry:component",
+          description: "Foo component from registry one",
+          registry: "@one",
+          addCommandArgument: "@one/foo",
+        },
+        {
+          name: "bar",
+          type: "registry:component",
+          registry: "@one",
+          addCommandArgument: "@one/bar",
+        },
+      ])
+    )
+  })
+
+  it("should handle non-existent registry gracefully", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["search", "@unknown"])
+
+    expect(output.stdout).toContain('Unknown registry "@unknown"')
+  })
+
+  it("should handle authentication for secured registries", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@two": {
+        url: "http://localhost:9182/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer EXAMPLE_BEARER_TOKEN",
+        },
+      },
+    })
+
+    const output = await npxShadcn(fixturePath, ["search", "@two"])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveProperty("items")
+    expect(parsed.items).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          name: "item",
+          type: "registry:ui",
+          description: "Item component from registry two",
+          registry: "@two",
+        }),
+        expect.objectContaining({
+          name: "secure-item",
+          type: "registry:component",
+          description: "Secure item requiring authentication",
+          registry: "@two",
+        }),
+      ])
+    )
+  })
+
+  it("should fail when listing secured registry without authentication", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@two": "http://localhost:9182/registry/bearer/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["search", "@two"])
+    expect(output.stdout).toContain("Unauthorized")
+  })
+
+  it("should handle authentication with environment variables", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@two": {
+        url: "http://localhost:9182/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer ${BEARER_TOKEN}",
+        },
+      },
+    })
+
+    const originalBearerToken = process.env.BEARER_TOKEN
+    try {
+      process.env.BEARER_TOKEN = "EXAMPLE_BEARER_TOKEN"
+
+      const output = await npxShadcn(fixturePath, ["search", "@two"])
+
+      const parsed = JSON.parse(output.stdout)
+      expect(parsed).toHaveProperty("items")
+      expect(parsed.items).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            name: "item",
+            registry: "@two",
+          }),
+        ])
+      )
+    } finally {
+      if (originalBearerToken !== undefined) {
+        process.env.BEARER_TOKEN = originalBearerToken
+      } else {
+        delete process.env.BEARER_TOKEN
+      }
+    }
+  })
+
+  it("should handle missing environment variables for authenticated registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@auth": {
+        url: "http://localhost:9182/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer ${MISSING_ENV_VAR}",
+        },
+      },
+    })
+
+    const output = await npxShadcn(fixturePath, ["search", "@auth"])
+
+    expect(output.stdout).toContain("MISSING_ENV_VAR")
+  })
+
+  it("should work with @shadcn namespace", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+    })
+    const output = await npxShadcn(fixturePath, ["search", "@shadcn"])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveProperty("items")
+    expect(parsed.items).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          name: "button",
+          registry: "@shadcn",
+        }),
+        expect.objectContaining({
+          name: "card",
+          registry: "@shadcn",
+        }),
+      ])
+    )
+  })
+
+  it("should handle namespace with special characters", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["search", "@test-123"])
+
+    expect(output.stdout).toContain('Unknown registry "@test-123"')
+  })
+
+  it("should handle empty registry name", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["search", "@"])
+
+    expect(output.stdout).toContain("The item at @/registry was not found.")
+  })
+
+  it("should handle namespace without @ prefix", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["search", "one"])
+
+    // Without @ prefix, it should show an error
+    expect(output.stdout).toContain('Invalid registry namespace: "one".')
+  })
+
+  it("should list from components.json with registries config only (shadow config)", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9181/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["search", "@one"])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveProperty("items")
+    expect(parsed.items.length).toBeGreaterThan(0)
+
+    // Verify items are from @one registry
+    expect(parsed.items).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          registry: "@one",
+        }),
+      ])
+    )
+  })
+
+  it("should error when listing from non-existent registry with configured registries", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+
+    // Configure @one registry, but try to list from @two
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9181/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["search", "@two"])
+
+    expect(output.stdout).toContain('Unknown registry "@two"')
+  })
+
+  it("should handle validation errors", async () => {
+    // Create a server that returns invalid schema
+    const badServer = await createRegistryServer(
+      [
+        {
+          name: "invalid-schema",
+          type: "invalid-type", // Invalid type
+          files: [
+            {
+              path: "components/bad.tsx",
+              content: "export function Bad() { return null }",
+              // Missing required 'type' field
+            },
+          ],
+        } as any,
+      ],
+      {
+        port: 9183,
+        path: "/bad",
+      }
+    )
+
+    await badServer.start()
+
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@bad": "http://localhost:9183/bad/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["search", "@bad"])
+
+    // Should handle validation error
+    expect(output.stdout.toLowerCase()).toContain("failed to parse")
+
+    await badServer.stop()
+  })
+
+  it("should handle network timeouts gracefully", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@timeout": "http://localhost:9999/timeout/{name}", // Non-existent server
+    })
+
+    const output = await npxShadcn(fixturePath, ["search", "@timeout"])
+
+    // Check for connection error in the output
+    expect(output.stdout.toLowerCase()).toContain("failed, reason:")
+  })
+
+  it("should list multiple registries with mixed success and failure", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9181/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, [
+      "search",
+      "@one",
+      "@non-existent",
+    ])
+
+    // Should fail fast on first error
+    expect(output.stdout).toContain('Unknown registry "@non-existent"')
+  })
+
+  it("should handle partial components.json without other required fields", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+
+    // Create a partial components.json with only registries
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9181/r/{name}",
+      "@two": "http://localhost:9182/registry/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["search", "@one", "@two"])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveProperty("items")
+    expect(parsed.items).toEqual(expect.any(Array))
+
+    // Check that items from both registries are present
+    const registries = parsed.items.map((item: any) => item.registry)
+    expect(registries).toContain("@one")
+    expect(registries).toContain("@two")
+  })
+
+  it("should handle dependencies that require authentication", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    // Configure both registries - @two requires auth, @one doesn't
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9181/r/{name}",
+      "@two": {
+        url: "http://localhost:9182/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer EXAMPLE_BEARER_TOKEN",
+        },
+      },
+    })
+
+    // List from both registries
+    const output = await npxShadcn(fixturePath, ["search", "@one", "@two"])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveProperty("items")
+    expect(parsed.items).toEqual(expect.any(Array))
+
+    // Check that items from both registries are present
+    expect(parsed.items).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          name: "foo",
+          registry: "@one",
+        }),
+        expect.objectContaining({
+          name: "item",
+          registry: "@two",
+        }),
+      ])
+    )
+  })
+
+  it("should handle search with pagination", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+    })
+
+    // Search for "button" with pagination
+    const output = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--query",
+      "button",
+      "--limit",
+      "1",
+      "--offset",
+      "0",
+    ])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed.items).toHaveLength(1)
+    expect(parsed.items[0].name).toBe("button")
+    expect(parsed.pagination).toEqual({
+      total: 1,
+      offset: 0,
+      limit: 1,
+      hasMore: false,
+    })
+  })
+
+  it("should handle empty search results with pagination", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--query",
+      "nonexistent",
+      "--limit",
+      "10",
+      "--offset",
+      "5",
+    ])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed.items).toHaveLength(0)
+    expect(parsed.pagination).toEqual({
+      total: 0,
+      offset: 5,
+      limit: 10,
+      hasMore: false,
+    })
+  })
+
+  it("should handle typos in search (fuzzy matching)", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+    })
+
+    // Test various typos that should still match "button"
+    const typos = [
+      "buton", // missing 't'
+      "buttn", // missing 'o'
+      "buttno", // 'no' instead of 'on'
+      "btton", // missing 'u'
+      "dialg", // typo in 'dialog'
+      "alrt", // typo in 'alert'
+    ]
+
+    // Test button typos
+    for (const typo of typos.slice(0, 4)) {
+      const output = await npxShadcn(fixturePath, [
+        "search",
+        "@shadcn",
+        "--query",
+        typo,
+      ])
+      const parsed = JSON.parse(output.stdout)
+      expect(
+        parsed.items.some((item: any) => item.name === "button"),
+        `Typo '${typo}' should match 'button'`
+      ).toBe(true)
+    }
+
+    // Test dialog typo
+    const dialogOutput = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--query",
+      "dialg",
+    ])
+    const dialogParsed = JSON.parse(dialogOutput.stdout)
+    expect(
+      dialogParsed.items.some((item: any) => item.name === "alert-dialog"),
+      "Typo 'dialg' should match 'alert-dialog'"
+    ).toBe(true)
+
+    // Test alert typo
+    const alertOutput = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--query",
+      "alrt",
+    ])
+    const alertParsed = JSON.parse(alertOutput.stdout)
+    expect(
+      alertParsed.items.some((item: any) => item.name === "alert-dialog"),
+      "Typo 'alrt' should match 'alert-dialog'"
+    ).toBe(true)
+  })
+
+  it("should handle partial word matching", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+    })
+
+    // Test partial matches
+    const partialQueries = [
+      { query: "btn", expected: "button" },
+      { query: "crd", expected: "card" },
+      { query: "alert", expected: "alert-dialog" },
+      { query: "dial", expected: "alert-dialog" },
+    ]
+
+    for (const { query, expected } of partialQueries) {
+      const output = await npxShadcn(fixturePath, [
+        "search",
+        "@shadcn",
+        "--query",
+        query,
+      ])
+      const parsed = JSON.parse(output.stdout)
+      expect(
+        parsed.items.some((item: any) => item.name === expected),
+        `Partial '${query}' should match '${expected}'`
+      ).toBe(true)
+    }
+  })
+
+  it("should handle case-insensitive search", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+    })
+
+    // Search with different cases
+    const output1 = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--query",
+      "BUTTON",
+    ])
+    const output2 = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--query",
+      "button",
+    ])
+    const output3 = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--query",
+      "BuTtOn",
+    ])
+
+    const parsed1 = JSON.parse(output1.stdout)
+    const parsed2 = JSON.parse(output2.stdout)
+    const parsed3 = JSON.parse(output3.stdout)
+
+    // All should find the button component
+    expect(parsed1.items).toHaveLength(1)
+    expect(parsed2.items).toHaveLength(1)
+    expect(parsed3.items).toHaveLength(1)
+    expect(parsed1.items[0].name).toBe("button")
+  })
+
+  it("should handle special characters in search", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+    })
+
+    // Test searching for components with hyphens
+    const output1 = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--query",
+      "alert-dialog",
+    ])
+    const parsed1 = JSON.parse(output1.stdout)
+    expect(
+      parsed1.items.some((item: any) => item.name === "alert-dialog")
+    ).toBe(true)
+
+    // Test searching with just the hyphen part
+    const output2 = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--query",
+      "-dialog",
+    ])
+    const parsed2 = JSON.parse(output2.stdout)
+    expect(
+      parsed2.items.some((item: any) => item.name === "alert-dialog")
+    ).toBe(true)
+
+    // Test with spaces (should still work)
+    const output3 = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--query",
+      "alert dialog",
+    ])
+    const parsed3 = JSON.parse(output3.stdout)
+    expect(
+      parsed3.items.some((item: any) => item.name === "alert-dialog")
+    ).toBe(true)
+  })
+
+  it("should rank exact matches higher than fuzzy matches", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9181/r/{name}",
+    })
+
+    // Search for "bar" which should match "bar" exactly
+    const output = await npxShadcn(fixturePath, [
+      "search",
+      "@one",
+      "--query",
+      "bar",
+    ])
+    const parsed = JSON.parse(output.stdout)
+
+    // If we have results, "bar" should be first (exact match)
+    if (parsed.items.length > 0) {
+      expect(parsed.items[0].name).toBe("bar")
+    }
+  })
+
+  it("should work with 'search' command alias", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+    })
+
+    // Use 'search' instead of 'list'
+    const output = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--query",
+      "button",
+    ])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed.items).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          name: "button",
+          registry: "@shadcn",
+        }),
+      ])
+    )
+  })
+
+  it("should handle limit edge cases", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+    })
+
+    // Test with limit 0 - should return all items
+    const output1 = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--limit",
+      "0",
+    ])
+    const parsed1 = JSON.parse(output1.stdout)
+    expect(parsed1.items.length).toBeGreaterThan(0)
+
+    // Test with very large limit
+    const output2 = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "--limit",
+      "9999",
+    ])
+    const parsed2 = JSON.parse(output2.stdout)
+    expect(parsed2.items.length).toBeLessThanOrEqual(9999)
+    expect(parsed2.pagination.hasMore).toBe(false)
+  })
+
+  it("should handle pagination across registries with search", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9180/r/{name}",
+      "@one": "http://localhost:9181/r/{name}",
+    })
+
+    // Search across multiple registries with pagination
+    const output = await npxShadcn(fixturePath, [
+      "search",
+      "@shadcn",
+      "@one",
+      "--query",
+      "o", // Should match "button", "foo", etc.
+      "--limit",
+      "2",
+      "--offset",
+      "1",
+    ])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed.items).toHaveLength(2)
+    expect(parsed.pagination.limit).toBe(2)
+    expect(parsed.pagination.offset).toBe(1)
+  })
+
+  it("should handle large dataset pagination properly", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@large": "http://localhost:9184/large/{name}",
+    })
+
+    // First page
+    const output1 = await npxShadcn(fixturePath, [
+      "search",
+      "@large",
+      "--limit",
+      "5",
+      "--offset",
+      "0",
+    ])
+    const parsed1 = JSON.parse(output1.stdout)
+    expect(parsed1.items).toHaveLength(5)
+    expect(parsed1.items[0].name).toBe("component-1")
+    expect(parsed1.items[4].name).toBe("component-5")
+    expect(parsed1.pagination).toEqual({
+      total: 20,
+      offset: 0,
+      limit: 5,
+      hasMore: true,
+    })
+
+    // Middle page
+    const output2 = await npxShadcn(fixturePath, [
+      "search",
+      "@large",
+      "--limit",
+      "5",
+      "--offset",
+      "10",
+    ])
+    const parsed2 = JSON.parse(output2.stdout)
+    expect(parsed2.items).toHaveLength(5)
+    expect(parsed2.items[0].name).toBe("component-11")
+    expect(parsed2.items[4].name).toBe("component-15")
+    expect(parsed2.pagination.hasMore).toBe(true)
+
+    // Last page (partial)
+    const output3 = await npxShadcn(fixturePath, [
+      "search",
+      "@large",
+      "--limit",
+      "5",
+      "--offset",
+      "18",
+    ])
+    const parsed3 = JSON.parse(output3.stdout)
+    expect(parsed3.items).toHaveLength(2) // Only 2 items left
+    expect(parsed3.items[0].name).toBe("component-19")
+    expect(parsed3.items[1].name).toBe("component-20")
+    expect(parsed3.pagination.hasMore).toBe(false)
+  })
+
+  it("should list with only name, type, description, registry, and addCommandArgument fields", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9181/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["search", "@one"])
+    const parsed = JSON.parse(output.stdout)
+
+    // Check that we only get name, type, description, registry, and addCommand fields
+    expect(parsed.items).toContainEqual({
+      name: "foo",
+      type: "registry:component",
+      description: "Foo component from registry one",
+      registry: "@one",
+      addCommandArgument: "@one/foo",
+    })
+
+    // Verify that other fields are not included
+    const fooItem = parsed.items.find((item: any) => item.name === "foo")
+    expect(fooItem).toBeDefined()
+    expect(fooItem.dependencies).toBeUndefined()
+    expect(fooItem.files).toBeUndefined()
+    expect(fooItem.tailwind).toBeUndefined()
+    expect(fooItem.cssVars).toBeUndefined()
+  })
+
+  it("should handle different registry URL patterns for addCommand", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9181/r/{name}",
+      "@two": "http://localhost:9182/registry/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["search", "@one", "@two"])
+    const parsed = JSON.parse(output.stdout)
+
+    // Check @one registry items have correct addCommand
+    const fooItem = parsed.items.find(
+      (item: any) => item.name === "foo" && item.registry === "@one"
+    )
+    expect(fooItem.addCommandArgument).toBe("@one/foo")
+
+    // Check @two registry items have correct addCommand
+    const itemItem = parsed.items.find(
+      (item: any) => item.name === "item" && item.registry === "@two"
+    )
+    expect(itemItem.addCommandArgument).toBe("@two/item")
+  })
+})
diff --git a/packages/tests/src/tests/view.test.ts b/packages/tests/src/tests/view.test.ts
new file mode 100644
index 00000000000..53638f14fd5
--- /dev/null
+++ b/packages/tests/src/tests/view.test.ts
@@ -0,0 +1,835 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest"
+
+import { createFixtureTestDirectory, npxShadcn } from "../utils/helpers"
+import { configureRegistries, createRegistryServer } from "../utils/registry"
+
+const registryShadcn = await createRegistryServer(
+  [
+    {
+      name: "button",
+      type: "registry:ui",
+      description: "A button component",
+      dependencies: ["@radix-ui/react-slot"],
+      devDependencies: ["@types/react"],
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          content:
+            "export function Button() {\n  return <button>Click me</button>\n}",
+          type: "registry:ui",
+        },
+      ],
+    },
+    {
+      name: "card",
+      type: "registry:ui",
+      description: "A card component",
+      files: [
+        {
+          path: "components/ui/card.tsx",
+          content:
+            "export function Card() {\n  return <div>Card Component</div>\n}",
+          type: "registry:ui",
+        },
+      ],
+    },
+    {
+      name: "alert-dialog",
+      type: "registry:ui",
+      registryDependencies: ["button"],
+      files: [
+        {
+          path: "components/ui/alert-dialog.tsx",
+          content:
+            "export function AlertDialog() {\n  return <div>AlertDialog Component</div>\n}",
+          type: "registry:ui",
+        },
+      ],
+    },
+  ],
+  {
+    port: 9080,
+    path: "/r",
+  }
+)
+
+const registryOne = await createRegistryServer(
+  [
+    {
+      name: "foo",
+      type: "registry:component",
+      description: "Foo component from registry one",
+      dependencies: ["clsx", "tailwind-merge"],
+      files: [
+        {
+          path: "components/foo.tsx",
+          content:
+            "export function Foo() {\n  return <div>Foo Component from Registry 1</div>\n}",
+          type: "registry:component",
+        },
+      ],
+      tailwind: {
+        config: {
+          theme: {
+            extend: {
+              colors: {
+                foo: "#ff0000",
+              },
+            },
+          },
+        },
+      },
+      cssVars: {
+        light: {
+          "foo-color": "#ff0000",
+        },
+        dark: {
+          "foo-color": "#00ff00",
+        },
+      },
+    },
+    {
+      name: "bar",
+      type: "registry:component",
+      registryDependencies: ["@one/foo"],
+      files: [
+        {
+          path: "components/bar.tsx",
+          content:
+            "export function Bar() {\n  return <div>Bar Component from Registry 1</div>\n}",
+          type: "registry:component",
+        },
+      ],
+    },
+    {
+      name: "complex",
+      type: "registry:component",
+      registryDependencies: ["@two/item", "@one/foo"],
+      files: [
+        {
+          path: "components/complex.tsx",
+          content:
+            "export function Complex() {\n  return <div>Complex Component</div>\n}",
+          type: "registry:component",
+        },
+      ],
+    },
+  ],
+  {
+    port: 9081,
+    path: "/r",
+  }
+)
+
+const registryTwo = await createRegistryServer(
+  [
+    {
+      name: "item",
+      type: "registry:ui",
+      description: "Item component from registry two",
+      files: [
+        {
+          path: "components/ui/item.tsx",
+          content:
+            "export function Item() {\n  return <div>Item Component from Registry 2</div>\n}",
+          type: "registry:ui",
+        },
+      ],
+    },
+    {
+      name: "secure-item",
+      type: "registry:component",
+      description: "Secure item requiring authentication",
+      registryDependencies: ["@one/foo"],
+      files: [
+        {
+          path: "components/secure-item.tsx",
+          content:
+            "export function SecureItem() {\n  return <div>Secure Item</div>\n}",
+          type: "registry:component",
+        },
+      ],
+    },
+  ],
+  {
+    port: 9082,
+    path: "/registry",
+  }
+)
+
+beforeAll(async () => {
+  await registryShadcn.start()
+  await registryOne.start()
+  await registryTwo.start()
+})
+
+afterAll(async () => {
+  await registryShadcn.stop()
+  await registryOne.stop()
+  await registryTwo.stop()
+})
+
+describe("shadcn view", () => {
+  it("should view a single component from shadcn registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@shadcn": "http://localhost:9080/r/{name}",
+    })
+    const output = await npxShadcn(fixturePath, ["view", "button"])
+
+    const parsed = JSON.parse(output.stdout)
+
+    expect(parsed[0]).toMatchObject({
+      name: "button",
+      type: "registry:ui",
+      dependencies: ["@radix-ui/react-slot"],
+      files: expect.arrayContaining([
+        expect.objectContaining({
+          path: "registry/new-york-v4/ui/button.tsx",
+          type: "registry:ui",
+        }),
+      ]),
+    })
+  })
+
+  it("should view multiple components from shadcn registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["view", "button", "card"])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveLength(2)
+    expect(parsed.map((p: any) => p.name)).toEqual(["button", "card"])
+  })
+
+  it("should view component with registry dependencies", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["view", "alert-dialog"])
+
+    expect(JSON.parse(output.stdout)).toMatchObject([
+      {
+        name: "alert-dialog",
+        type: "registry:ui",
+        dependencies: ["@radix-ui/react-alert-dialog"],
+        registryDependencies: ["button"],
+        files: expect.arrayContaining([
+          expect.objectContaining({
+            path: "registry/new-york-v4/ui/alert-dialog.tsx",
+            type: "registry:ui",
+          }),
+        ]),
+      },
+    ])
+  })
+
+  it("should view component from URL without needing config", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "http://localhost:9081/r/foo.json",
+    ])
+
+    expect(JSON.parse(output.stdout)).toMatchInlineSnapshot(`
+      [
+        {
+          "cssVars": {
+            "dark": {
+              "foo-color": "#00ff00",
+            },
+            "light": {
+              "foo-color": "#ff0000",
+            },
+          },
+          "dependencies": [
+            "clsx",
+            "tailwind-merge",
+          ],
+          "description": "Foo component from registry one",
+          "files": [
+            {
+              "content": "export function Foo() {
+        return <div>Foo Component from Registry 1</div>
+      }",
+              "path": "components/foo.tsx",
+              "type": "registry:component",
+            },
+          ],
+          "name": "foo",
+          "tailwind": {
+            "config": {
+              "theme": {
+                "extend": {
+                  "colors": {
+                    "foo": "#ff0000",
+                  },
+                },
+              },
+            },
+          },
+          "type": "registry:component",
+        },
+      ]
+    `)
+  })
+
+  it("should view multiple URLs without needing config", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "http://localhost:9081/r/foo.json",
+      "http://localhost:9082/registry/item.json",
+    ])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveLength(2)
+    expect(parsed.map((p: any) => p.name)).toEqual(["foo", "item"])
+  })
+
+  it("should view component from configured registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["view", "@one/foo"])
+
+    expect(JSON.parse(output.stdout)).toMatchObject([
+      {
+        name: "foo",
+        type: "registry:component",
+        description: "Foo component from registry one",
+        dependencies: ["clsx", "tailwind-merge"],
+        tailwind: {
+          config: {
+            theme: {
+              extend: {
+                colors: {
+                  foo: "#ff0000",
+                },
+              },
+            },
+          },
+        },
+      },
+    ])
+  })
+
+  it("should view multiple components from different registries", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+      "@two": "http://localhost:9082/registry/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "@one/foo",
+      "@two/item",
+      "button",
+    ])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveLength(3)
+    expect(parsed.map((p: any) => p.name)).toEqual(["foo", "item", "button"])
+  })
+
+  it("should view component with nested registry dependencies", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["view", "@one/bar"])
+
+    expect(JSON.parse(output.stdout)).toMatchObject([
+      {
+        name: "bar",
+        type: "registry:component",
+        registryDependencies: ["@one/foo"],
+        files: expect.arrayContaining([
+          expect.objectContaining({
+            path: "components/bar.tsx",
+            type: "registry:component",
+          }),
+        ]),
+      },
+    ])
+  })
+
+  it("should view component with cross-registry dependencies", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+      "@two": "http://localhost:9082/registry/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["view", "@one/complex"])
+
+    expect(JSON.parse(output.stdout)).toMatchObject([
+      {
+        name: "complex",
+        type: "registry:component",
+        registryDependencies: expect.arrayContaining(["@two/item", "@one/foo"]),
+        files: expect.arrayContaining([
+          expect.objectContaining({
+            path: "components/complex.tsx",
+            type: "registry:component",
+          }),
+        ]),
+      },
+    ])
+  })
+
+  it("should handle authentication for secured registries", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@two": {
+        url: "http://localhost:9082/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer EXAMPLE_BEARER_TOKEN",
+        },
+      },
+    })
+
+    const output = await npxShadcn(fixturePath, ["view", "@two/secure-item"])
+
+    expect(JSON.parse(output.stdout)).toMatchObject([
+      {
+        name: "secure-item",
+        type: "registry:component",
+        description: "Secure item requiring authentication",
+        registryDependencies: ["@one/foo"],
+        files: expect.arrayContaining([
+          expect.objectContaining({
+            path: "components/secure-item.tsx",
+          }),
+        ]),
+      },
+    ])
+  })
+
+  it("should fail when viewing secured item without authentication", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@two": "http://localhost:9082/registry/bearer/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["view", "@two/secure-item"])
+    expect(output.stdout).toContain("Unauthorized")
+  })
+
+  it("should handle authentication with environment variables", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+      "@two": {
+        url: "http://localhost:9082/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer ${BEARER_TOKEN}",
+        },
+      },
+    })
+
+    process.env.BEARER_TOKEN = "EXAMPLE_BEARER_TOKEN"
+
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "@two/secure-item",
+      "@one/foo",
+    ])
+
+    expect(JSON.parse(output.stdout)).toMatchObject([
+      {
+        name: "secure-item",
+        type: "registry:component",
+        registryDependencies: ["@one/foo"],
+      },
+      {
+        name: "foo",
+        type: "registry:component",
+        dependencies: ["clsx", "tailwind-merge"],
+      },
+    ])
+
+    delete process.env.BEARER_TOKEN
+  })
+
+  it("should mix URLs and named components", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "http://localhost:9082/registry/item.json",
+      "@one/foo",
+      "button",
+    ])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveLength(3)
+    expect(parsed.map((p: any) => p.name)).toEqual(["item", "foo", "button"])
+  })
+
+  it("should handle non-existent component gracefully", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["view", "non-existent"])
+
+    expect(output.stdout).toContain("not found")
+  })
+
+  it("should handle non-existent registry gracefully", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["view", "@unknown/component"])
+
+    expect(output.stdout).toContain('Unknown registry "@unknown"')
+  })
+
+  it("should work with @shadcn namespace", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "@shadcn/button",
+      "@shadcn/card",
+    ])
+
+    const parsed = JSON.parse(output.stdout)
+    expect(parsed).toHaveLength(2)
+    expect(parsed.map((p: any) => p.name)).toEqual(["button", "card"])
+  })
+
+  it("should handle 404 for non-existent URL", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "http://localhost:9081/r/does-not-exist.json",
+    ])
+
+    expect(output.stdout).toContain("not found")
+  })
+
+  it("should handle multiple errors in batch", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "non-existent",
+      "@one/does-not-exist",
+    ])
+
+    // Should fail on first error - non-existent component
+    expect(output.stdout.toLowerCase()).toContain("not found")
+  })
+
+  it("should handle invalid URL format", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    const output = await npxShadcn(fixturePath, ["view", "not-a-valid-url"])
+
+    // With defaults in place, it will try to fetch as a component and fail
+    expect(output.stdout.toLowerCase()).toContain("not found")
+  })
+
+  it("should handle network timeouts gracefully", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "http://localhost:9999/timeout.json", // Non-existent server
+    ])
+
+    // Check for connection error in the output
+    expect(output.stdout.toLowerCase()).toContain("failed, reason:")
+  })
+
+  it("should handle mixed success and failure", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "button",
+      "non-existent-component",
+    ])
+
+    // Should fail fast on first error
+    expect(output.stdout).not.toContain('"name": "button"')
+    expect(output.stdout).toContain("not found")
+  })
+
+  it("should handle missing environment variables for authenticated registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    await configureRegistries(fixturePath, {
+      "@auth": {
+        url: "http://localhost:9082/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer ${MISSING_ENV_VAR}",
+        },
+      },
+    })
+
+    const output = await npxShadcn(fixturePath, ["view", "@auth/secure-item"])
+
+    expect(output.stdout).toContain("MISSING_ENV_VAR")
+  })
+
+  it("should handle validation errors", async () => {
+    // Create a server that returns invalid schema
+    const badServer = await createRegistryServer(
+      [
+        {
+          name: "invalid-schema",
+          type: "invalid-type", // Invalid type
+          files: [
+            {
+              path: "components/bad.tsx",
+              content: "export function Bad() { return null }",
+              // Missing required 'type' field
+            },
+          ],
+        } as any,
+      ],
+      {
+        port: 9083,
+        path: "/bad",
+      }
+    )
+
+    await badServer.start()
+
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "http://localhost:9083/bad/invalid-schema.json",
+    ])
+
+    // Should handle validation error
+    expect(output.stdout.toLowerCase()).toContain("failed to parse")
+
+    await badServer.stop()
+  })
+
+  it("should handle dependencies that require authentication", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    // Configure both registries - @two requires auth, @one doesn't
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+      "@two": {
+        url: "http://localhost:9082/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer EXAMPLE_BEARER_TOKEN",
+        },
+      },
+    })
+
+    // complex depends on @two/item which requires auth
+    const output = await npxShadcn(fixturePath, ["view", "@one/complex"])
+
+    // Should just show the component metadata, not fail on auth
+    expect(JSON.parse(output.stdout)).toMatchObject([
+      {
+        name: "complex",
+        type: "registry:component",
+        registryDependencies: expect.arrayContaining(["@two/item", "@one/foo"]),
+        files: expect.arrayContaining([
+          expect.objectContaining({
+            path: "components/complex.tsx",
+            type: "registry:component",
+          }),
+        ]),
+      },
+    ])
+  })
+
+  it("should fail when viewing component with unauthenticated dependencies", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    // Configure registries - @two requires auth but no token provided
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+      "@two": "http://localhost:9082/registry/bearer/{name}",
+    })
+
+    // Try to view complex which depends on @two/item (requires auth)
+    // Note: This should succeed for view command as it just shows metadata
+    const output = await npxShadcn(fixturePath, ["view", "@one/complex"])
+
+    expect(JSON.parse(output.stdout)).toMatchObject([
+      {
+        name: "complex",
+        type: "registry:component",
+        registryDependencies: expect.arrayContaining(["@two/item"]),
+      },
+    ])
+  })
+
+  it("should view authenticated dependencies when directly requested", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    // Configure with proper auth
+    await configureRegistries(fixturePath, {
+      "@two": {
+        url: "http://localhost:9082/registry/bearer/{name}",
+        headers: {
+          Authorization: "Bearer EXAMPLE_BEARER_TOKEN",
+        },
+      },
+    })
+
+    // Directly view the authenticated item
+    const output = await npxShadcn(fixturePath, ["view", "@two/item"])
+
+    expect(JSON.parse(output.stdout)).toMatchObject([
+      {
+        name: "item",
+        type: "registry:ui",
+        description: "Item component from registry two",
+        files: expect.arrayContaining([
+          expect.objectContaining({
+            path: "components/ui/item.tsx",
+            type: "registry:ui",
+          }),
+        ]),
+      },
+    ])
+  })
+
+  it("should view component with all metadata fields", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["view", "@one/foo"])
+    const parsed = JSON.parse(output.stdout)
+
+    expect(parsed[0]).toMatchObject({
+      name: "foo",
+      type: "registry:component",
+      description: "Foo component from registry one",
+      dependencies: ["clsx", "tailwind-merge"],
+      files: expect.arrayContaining([
+        expect.objectContaining({
+          path: "components/foo.tsx",
+          type: "registry:component",
+        }),
+      ]),
+      tailwind: expect.objectContaining({
+        config: expect.objectContaining({
+          theme: expect.objectContaining({
+            extend: expect.objectContaining({
+              colors: expect.objectContaining({
+                foo: "#ff0000",
+              }),
+            }),
+          }),
+        }),
+      }),
+      cssVars: expect.objectContaining({
+        light: expect.objectContaining({
+          "foo-color": "#ff0000",
+        }),
+        dark: expect.objectContaining({
+          "foo-color": "#00ff00",
+        }),
+      }),
+    })
+  })
+
+  it("should handle namespace with special characters", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["view", "@test-123/component"])
+
+    expect(output.stdout).toContain('Unknown registry "@test-123"')
+  })
+
+  it("should handle empty component name in namespace", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["view", "@shadcn/"])
+
+    expect(output.stdout).toContain("not found")
+  })
+
+  it("should handle namespace without @ prefix", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["view", "one/foo"])
+
+    // Without @ prefix, it's treated as a regular component name
+    expect(output.stdout).toContain("not found")
+  })
+
+  it("should handle double namespace", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["view", "@@test/component"])
+
+    expect(output.stdout).toContain("not found")
+  })
+
+  it("should two error for unknown registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, ["view", "@test/component"])
+
+    expect(output.stdout).toContain('Unknown registry "@test"')
+  })
+
+  it("should two error for unknown registry not in first position", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "@shadcn/component",
+      "@does-not-exist/component",
+    ])
+
+    expect(output.stdout).toContain('Unknown registry "@does-not-exist"')
+  })
+
+  it("should handle namespace with multiple slashes", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app-init")
+    const output = await npxShadcn(fixturePath, [
+      "view",
+      "@test/path/to/component",
+    ])
+
+    expect(output.stdout).toContain('Unknown registry "@test"')
+  })
+
+  it("should view from components.json with registries config only", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["view", "@one/foo"])
+
+    expect(output.stdout).toContain("Foo component from registry one")
+  })
+
+  it("should error when viewing from non-existent registry with configured registries", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+
+    // Configure @one registry, but try to view from @two
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+    })
+
+    const output = await npxShadcn(fixturePath, ["view", "@two/item"])
+
+    expect(output.stdout).toContain('Unknown registry "@two"')
+  })
+
+  it("should error when viewing non-existent item from configured registry", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+
+    // Configure @one registry
+    await configureRegistries(fixturePath, {
+      "@one": "http://localhost:9081/r/{name}",
+    })
+
+    // Try to view an item that doesn't exist in @one registry
+    const output = await npxShadcn(fixturePath, ["view", "@one/does-not-exist"])
+
+    expect(output.stdout).toContain("not found")
+  })
+})
diff --git a/packages/tests/src/utils/helpers.ts b/packages/tests/src/utils/helpers.ts
new file mode 100644
index 00000000000..28ba9891f93
--- /dev/null
+++ b/packages/tests/src/utils/helpers.ts
@@ -0,0 +1,106 @@
+import { randomUUID } from "crypto"
+import path from "path"
+import { fileURLToPath } from "url"
+import { execa } from "execa"
+import fs from "fs-extra"
+
+import { TEMP_DIR } from "./setup"
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const FIXTURES_DIR = path.join(__dirname, "../../fixtures")
+const SHADCN_CLI_PATH = path.join(__dirname, "../../../shadcn/dist/index.js")
+
+export function getRegistryUrl() {
+  return process.env.REGISTRY_URL || "http://localhost:4000/r"
+}
+
+export async function createFixtureTestDirectory(fixtureName: string) {
+  const fixturePath = path.join(FIXTURES_DIR, fixtureName)
+
+  const uniqueId = `${process.pid}-${randomUUID().substring(0, 8)}`
+  let testDir = path.join(TEMP_DIR, `test-${uniqueId}-${fixtureName}`)
+
+  await fs.ensureDir(testDir)
+  await fs.copy(fixturePath, testDir)
+
+  return testDir
+}
+
+export async function runCommand(
+  cwd: string,
+  args: string[],
+  options?: {
+    env?: Record<string, string>
+    input?: string
+  }
+) {
+  try {
+    const childProcess = execa("node", [SHADCN_CLI_PATH, ...args], {
+      cwd,
+      env: {
+        ...process.env,
+        FORCE_COLOR: "0",
+        CI: "true",
+        ...options?.env,
+      },
+      input: options?.input,
+      reject: false,
+      timeout: 30000,
+    })
+
+    const result = await childProcess
+
+    return {
+      stdout: result.stdout || "",
+      stderr: result.stderr || "",
+      exitCode: result.exitCode ?? 0,
+    }
+  } catch (error: any) {
+    return {
+      stdout: error.stdout || "",
+      stderr: error.stderr || error.message || "",
+      exitCode: error.exitCode ?? 1,
+    }
+  }
+}
+
+export async function npxShadcn(
+  cwd: string,
+  args: string[],
+  {
+    debug = false,
+  }: {
+    debug?: boolean
+  } = {}
+) {
+  const result = await runCommand(cwd, args, {
+    env: {
+      REGISTRY_URL: getRegistryUrl(),
+    },
+  })
+
+  if (debug) {
+    console.log(result)
+  }
+
+  return result
+}
+
+export function cssHasProperties(
+  cssContent: string,
+  checks: Array<{
+    selector: string
+    properties: Record<string, string>
+  }>
+) {
+  return checks.every(({ selector, properties }) => {
+    const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+    const regex = new RegExp(`${escapedSelector}\\s*{([^}]+)}`, "s")
+    const match = cssContent.match(regex)
+    const block = match ? match[1] : ""
+
+    return Object.entries(properties).every(([property, value]) =>
+      block.includes(`${property}: ${value};`)
+    )
+  })
+}
diff --git a/packages/tests/src/utils/registry.ts b/packages/tests/src/utils/registry.ts
new file mode 100644
index 00000000000..7f2f5d890f7
--- /dev/null
+++ b/packages/tests/src/utils/registry.ts
@@ -0,0 +1,257 @@
+import { createServer } from "http"
+import path from "path"
+import fs from "fs-extra"
+
+export async function createRegistryServer(
+  items: Array<{ name: string; type: string } & Record<string, unknown>>,
+  {
+    port = 4444,
+    path = "/r",
+  }: {
+    port?: number
+    path?: string
+  }
+) {
+  const server = createServer((request, response) => {
+    const urlRaw = request.url?.split("?")[0]
+
+    // Handle registries.json endpoint (don't strip .json for this one)
+    if (urlRaw?.endsWith("/registries.json")) {
+      response.writeHead(200, { "Content-Type": "application/json" })
+      // Return empty registry index for tests - we want to test manual configuration.
+      response.end(JSON.stringify({}))
+      return
+    }
+
+    // For other endpoints, strip .json extension
+    const urlWithoutQuery = urlRaw?.replace(/\.json$/, "")
+
+    if (urlWithoutQuery?.includes("icons/index")) {
+      response.writeHead(200, { "Content-Type": "application/json" })
+      response.end(
+        JSON.stringify({
+          AlertCircle: {
+            lucide: "AlertCircle",
+            radix: "ExclamationTriangleIcon",
+          },
+          ArrowLeft: {
+            lucide: "ArrowLeft",
+            radix: "ArrowLeftIcon",
+          },
+        })
+      )
+      return
+    }
+
+    if (urlWithoutQuery?.includes("colors/neutral")) {
+      response.writeHead(200, { "Content-Type": "application/json" })
+      response.end(
+        JSON.stringify({
+          inlineColors: {
+            light: {
+              background: "white",
+              foreground: "neutral-950",
+            },
+            dark: {
+              background: "neutral-950",
+              foreground: "neutral-50",
+            },
+          },
+          cssVars: {
+            light: {
+              background: "0 0% 100%",
+              foreground: "0 0% 3.9%",
+            },
+            dark: {
+              background: "0 0% 3.9%",
+              foreground: "0 0% 98%",
+            },
+          },
+          cssVarsV4: {
+            light: {
+              background: "oklch(1 0 0)",
+              foreground: "oklch(0.145 0 0)",
+            },
+            dark: {
+              background: "oklch(0.145 0 0)",
+              foreground: "oklch(0.985 0 0)",
+            },
+          },
+          inlineColorsTemplate:
+            "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+          cssVarsTemplate:
+            "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer ",
+        })
+      )
+      return
+    }
+
+    if (urlWithoutQuery?.includes("styles/index")) {
+      response.writeHead(200, { "Content-Type": "application/json" })
+      response.end(
+        JSON.stringify([
+          {
+            name: "new-york",
+            label: "New York",
+          },
+          {
+            name: "default",
+            label: "Default",
+          },
+        ])
+      )
+      return
+    }
+
+    if (urlWithoutQuery?.includes("index")) {
+      response.writeHead(200, { "Content-Type": "application/json" })
+      response.end(
+        JSON.stringify([
+          {
+            name: "alert-dialog",
+            type: "registry:ui",
+            files: [
+              {
+                path: "components/ui/alert-dialog.tsx",
+                type: "registry:ui",
+                content:
+                  "export function AlertDialog() { return <div>AlertDialog Component from Registry Shadcn</div> }",
+              },
+            ],
+          },
+          {
+            name: "button",
+            type: "registry:ui",
+            files: [
+              {
+                path: "components/ui/button.tsx",
+                type: "registry:ui",
+                content:
+                  "export function Button() { return <div>Button Component from Registry Shadcn</div> }",
+              },
+            ],
+          },
+        ])
+      )
+      return
+    }
+
+    // Check if this is a registry.json request
+    if (urlWithoutQuery?.endsWith("/registry")) {
+      // Check if this requires bearer authentication
+      if (request.url?.includes("/bearer/")) {
+        // Validate bearer token
+        const token = request.headers.authorization?.split(" ")[1]
+        if (token !== "EXAMPLE_BEARER_TOKEN") {
+          response.writeHead(401, { "Content-Type": "application/json" })
+          response.end(JSON.stringify({ error: "Unauthorized" }))
+          return
+        }
+      }
+
+      response.writeHead(200, { "Content-Type": "application/json" })
+      response.end(
+        JSON.stringify({
+          name: "Test Registry",
+          homepage: "https://example.com",
+          items: items,
+        })
+      )
+      return
+    }
+
+    const match = urlWithoutQuery?.match(
+      new RegExp(`^${path}/(?:.*/)?([^/]+)$`)
+    )
+    const itemName = match?.[1]
+    const item = itemName
+      ? items.find((item) => item.name === itemName)
+      : undefined
+
+    if (!item) {
+      response.writeHead(404, { "Content-Type": "application/json" })
+      response.end(JSON.stringify({ error: "Item not found" }))
+      return
+    }
+
+    if (request.url?.includes("/bearer/")) {
+      // Validate bearer token
+      const token = request.headers.authorization?.split(" ")[1]
+      if (token !== "EXAMPLE_BEARER_TOKEN") {
+        response.writeHead(401, { "Content-Type": "application/json" })
+        response.end(JSON.stringify({ error: "Unauthorized" }))
+        return
+      }
+    }
+
+    if (request.url?.includes("/api-key/")) {
+      // Validate api key
+      const apiKey = request.headers["x-api-key"]
+      if (apiKey !== "EXAMPLE_API_KEY") {
+        response.writeHead(401, { "Content-Type": "application/json" })
+        response.end(JSON.stringify({ error: "Unauthorized" }))
+        return
+      }
+    }
+
+    if (request.url?.includes("/client-secret/")) {
+      // Validate client secret
+      const clientSecret = request.headers["x-client-secret"]
+      const clientId = request.headers["x-client-id"]
+      if (
+        clientSecret !== "EXAMPLE_CLIENT_SECRET" ||
+        clientId !== "EXAMPLE_CLIENT_ID"
+      ) {
+        response.writeHead(401, { "Content-Type": "application/json" })
+        response.end(JSON.stringify({ error: "Unauthorized" }))
+        return
+      }
+    }
+
+    if (request.url?.includes("/params/")) {
+      const token = request.url.split("?")[1]?.split("=")[1]
+      if (token !== "EXAMPLE_REGISTRY_TOKEN") {
+        response.writeHead(401, { "Content-Type": "application/json" })
+        response.end(JSON.stringify({ error: "Unauthorized" }))
+        return
+      }
+    }
+
+    response.writeHead(200, { "Content-Type": "application/json" })
+    response.end(JSON.stringify(item))
+  })
+
+  return {
+    start: async () => {
+      await new Promise<void>((resolve) => {
+        server.listen(port, () => {
+          resolve()
+        })
+      })
+    },
+    stop: async () => {
+      await new Promise<void>((resolve) => {
+        server.close(() => {
+          resolve()
+        })
+      })
+    },
+  }
+}
+
+export async function configureRegistries(
+  fixturePath: string,
+  payload: Record<string, any>
+) {
+  if (!fs.pathExistsSync(path.join(fixturePath, "components.json"))) {
+    await fs.writeJSON(path.join(fixturePath, "components.json"), {
+      registries: payload,
+    })
+  }
+
+  const componentsJson = await fs.readJSON(
+    path.join(fixturePath, "components.json")
+  )
+  componentsJson.registries = payload
+  await fs.writeJSON(path.join(fixturePath, "components.json"), componentsJson)
+}
diff --git a/packages/tests/src/utils/setup.ts b/packages/tests/src/utils/setup.ts
new file mode 100644
index 00000000000..98b3acf24c8
--- /dev/null
+++ b/packages/tests/src/utils/setup.ts
@@ -0,0 +1,17 @@
+import path from "path"
+import fs from "fs-extra"
+import { rimraf } from "rimraf"
+
+export const TEMP_DIR = path.join(__dirname, "../../temp")
+
+export default async function setup() {
+  await fs.ensureDir(TEMP_DIR)
+
+  return async () => {
+    try {
+      await rimraf(TEMP_DIR)
+    } catch (error) {
+      console.error("Failed to clean up temp directory:", error)
+    }
+  }
+}
diff --git a/packages/tests/tsconfig.json b/packages/tests/tsconfig.json
new file mode 100644
index 00000000000..62fa1c876bf
--- /dev/null
+++ b/packages/tests/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": ["vitest/globals", "node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "temp", "fixtures"]
+}
\ No newline at end of file
diff --git a/packages/tests/vitest.config.ts b/packages/tests/vitest.config.ts
new file mode 100644
index 00000000000..3959b4b40cb
--- /dev/null
+++ b/packages/tests/vitest.config.ts
@@ -0,0 +1,19 @@
+import tsconfigPaths from "vite-tsconfig-paths"
+import { defineConfig } from "vitest/config"
+
+export default defineConfig({
+  test: {
+    testTimeout: 120000,
+    hookTimeout: 120000,
+    globals: true,
+    environment: "node",
+    globalSetup: ["./src/utils/setup.ts"],
+    maxConcurrency: 4,
+    isolate: false,
+  },
+  plugins: [
+    tsconfigPaths({
+      ignoreConfigErrors: true,
+    }),
+  ],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d47adebaf4..a8c41d03e07 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,19 +10,19 @@ importers:
     dependencies:
       '@babel/core':
         specifier: ^7.22.1
-        version: 7.22.1
+        version: 7.28.0
       '@changesets/changelog-github':
         specifier: ^0.4.8
         version: 0.4.8
       '@changesets/cli':
         specifier: ^2.26.1
-        version: 2.26.1
+        version: 2.29.5
       '@commitlint/cli':
         specifier: ^17.6.3
-        version: 17.6.3
+        version: 17.8.1
       '@commitlint/config-conventional':
         specifier: ^17.6.3
-        version: 17.6.3
+        version: 17.8.1
       '@ianvs/prettier-plugin-sort-imports':
         specifier: ^3.7.2
         version: 3.7.2(prettier@2.8.8)
@@ -31,200 +31,516 @@ importers:
         version: 0.20.0
       '@typescript-eslint/parser':
         specifier: ^5.59.7
-        version: 5.61.0(eslint@8.44.0)(typescript@5.5.3)
+        version: 5.62.0(eslint@8.57.1)(typescript@5.9.2)
       autoprefixer:
         specifier: ^10.4.14
-        version: 10.4.14(postcss@8.4.24)
+        version: 10.4.21(postcss@8.5.6)
       concurrently:
         specifier: ^8.0.1
-        version: 8.0.1
+        version: 8.2.2
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
       eslint:
         specifier: ^8.41.0
-        version: 8.44.0
+        version: 8.57.1
       eslint-config-next:
         specifier: 13.3.0
-        version: 13.3.0(eslint@8.44.0)(typescript@5.5.3)
+        version: 13.3.0(eslint@8.57.1)(typescript@5.9.2)
       eslint-config-prettier:
         specifier: ^8.8.0
-        version: 8.8.0(eslint@8.44.0)
+        version: 8.10.2(eslint@8.57.1)
       eslint-config-turbo:
         specifier: ^1.9.9
-        version: 1.9.9(eslint@8.44.0)
+        version: 1.13.4(eslint@8.57.1)
       eslint-plugin-react:
         specifier: ^7.32.2
-        version: 7.32.2(eslint@8.44.0)
+        version: 7.37.5(eslint@8.57.1)
       eslint-plugin-tailwindcss:
         specifier: 3.13.1
-        version: 3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)))
+        version: 3.13.1(tailwindcss@3.4.6(ts-node@10.9.2(@types/node@20.19.10)(typescript@5.9.2)))
+      motion:
+        specifier: ^12.12.1
+        version: 12.23.12(@emotion/is-prop-valid@1.3.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       postcss:
         specifier: ^8.4.24
-        version: 8.4.24
+        version: 8.5.6
       prettier:
         specifier: ^2.8.8
         version: 2.8.8
       pretty-quick:
         specifier: ^3.1.3
-        version: 3.1.3(prettier@2.8.8)
+        version: 3.3.1(prettier@2.8.8)
+      puppeteer:
+        specifier: ^23.6.0
+        version: 23.11.1(typescript@5.9.2)
       tailwindcss:
-        specifier: 3.3.7
-        version: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
+        specifier: 3.4.6
+        version: 3.4.6(ts-node@10.9.2(@types/node@20.19.10)(typescript@5.9.2))
       tailwindcss-animate:
         specifier: ^1.0.5
-        version: 1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)))
+        version: 1.0.7(tailwindcss@3.4.6(ts-node@10.9.2(@types/node@20.19.10)(typescript@5.9.2)))
       tsx:
         specifier: ^4.1.4
-        version: 4.1.4
+        version: 4.20.3
       turbo:
         specifier: ^1.9.9
-        version: 1.9.9
+        version: 1.13.4
       vite:
-        specifier: ^5.4.1
-        version: 5.4.2(@types/node@20.11.27)
+        specifier: ^5.4.15
+        version: 5.4.19(@types/node@20.19.10)(lightningcss@1.30.1)
       vite-tsconfig-paths:
         specifier: ^4.2.0
-        version: 4.2.0(typescript@5.5.3)(vite@5.4.2(@types/node@20.11.27))
+        version: 4.3.2(typescript@5.9.2)(vite@5.4.19(@types/node@20.19.10)(lightningcss@1.30.1))
       vitest:
-        specifier: ^2.0.5
-        version: 2.0.5(@types/node@20.11.27)
+        specifier: ^2.1.9
+        version: 2.1.9(@types/node@20.19.10)(lightningcss@1.30.1)(msw@2.10.4(@types/node@20.19.10)(typescript@5.9.2))
     devDependencies:
+      '@types/hast':
+        specifier: ^3.0.4
+        version: 3.0.4
       '@types/node':
         specifier: ^20.11.27
-        version: 20.11.27
+        version: 20.19.10
       '@types/react':
         specifier: ^18.2.65
-        version: 18.2.67
+        version: 18.3.23
       '@types/react-dom':
         specifier: ^18.2.22
-        version: 18.2.22
+        version: 18.3.7(@types/react@18.3.23)
+      start-server-and-test:
+        specifier: ^2.0.12
+        version: 2.0.13
       typescript:
         specifier: ^5.5.3
-        version: 5.5.3
+        version: 5.9.2
+
+  apps/v4:
+    dependencies:
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@dnd-kit/modifiers':
+        specifier: ^9.0.0
+        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.1.0)
+      '@faker-js/faker':
+        specifier: ^8.2.0
+        version: 8.4.1
+      '@hookform/resolvers':
+        specifier: ^3.10.0
+        version: 3.10.0(react-hook-form@7.62.0(react@19.1.0))
+      '@radix-ui/react-accessible-icon':
+        specifier: ^1.1.1
+        version: 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-accordion':
+        specifier: ^1.2.2
+        version: 1.2.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-alert-dialog':
+        specifier: ^1.1.5
+        version: 1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-aspect-ratio':
+        specifier: ^1.1.1
+        version: 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.2
+        version: 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.1.3
+        version: 1.3.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.2
+        version: 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-context-menu':
+        specifier: ^2.2.5
+        version: 2.2.15(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.5
+        version: 1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.5
+        version: 2.1.15(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-hover-card':
+        specifier: ^1.1.5
+        version: 1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-icons':
+        specifier: ^1.3.2
+        version: 1.3.2(react@19.1.0)
+      '@radix-ui/react-label':
+        specifier: ^2.1.1
+        version: 2.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-menubar':
+        specifier: ^1.1.5
+        version: 1.1.15(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-navigation-menu':
+        specifier: ^1.2.4
+        version: 1.2.13(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.5
+        version: 1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal':
+        specifier: ^1.1.3
+        version: 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-progress':
+        specifier: ^1.1.1
+        version: 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-radio-group':
+        specifier: ^1.2.2
+        version: 1.3.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.3
+        version: 1.2.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-select':
+        specifier: ^2.1.5
+        version: 2.2.5(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.1
+        version: 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slider':
+        specifier: ^1.2.2
+        version: 1.3.5(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot':
+        specifier: ^1.1.1
+        version: 1.2.3(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-switch':
+        specifier: ^1.1.2
+        version: 1.2.5(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.2
+        version: 1.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toast':
+        specifier: ^1.2.5
+        version: 1.2.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle':
+        specifier: ^1.1.1
+        version: 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle-group':
+        specifier: ^1.1.1
+        version: 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.1.7
+        version: 1.2.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@tabler/icons-react':
+        specifier: ^3.31.0
+        version: 3.34.1(react@19.1.0)
+      '@tailwindcss/postcss':
+        specifier: ^4.1.11
+        version: 4.1.11
+      '@tanstack/react-table':
+        specifier: ^8.9.1
+        version: 8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@vercel/analytics':
+        specifier: ^1.4.1
+        version: 1.5.0(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)
+      change-case:
+        specifier: ^5.4.4
+        version: 5.4.4
+      chrono-node:
+        specifier: ^2.8.2
+        version: 2.8.4
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
+      embla-carousel-autoplay:
+        specifier: 8.5.2
+        version: 8.5.2(embla-carousel@8.5.2)
+      embla-carousel-react:
+        specifier: 8.5.2
+        version: 8.5.2(react@19.1.0)
+      fumadocs-core:
+        specifier: 15.3.1
+        version: 15.3.1(@types/react@19.1.2)(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      fumadocs-docgen:
+        specifier: 2.0.0
+        version: 2.0.0
+      fumadocs-mdx:
+        specifier: 11.6.3
+        version: 11.6.3(acorn@8.15.0)(fumadocs-core@15.3.1(@types/react@19.1.2)(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))
+      fumadocs-ui:
+        specifier: 15.3.1
+        version: 15.3.1(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.11)
+      input-otp:
+        specifier: ^1.4.2
+        version: 1.4.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      jotai:
+        specifier: ^2.1.0
+        version: 2.13.1(@babel/core@7.28.0)(@babel/template@7.27.2)(@types/react@19.1.2)(react@19.1.0)
+      little-date:
+        specifier: ^1.0.0
+        version: 1.0.0
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
+      lucide-react:
+        specifier: 0.474.0
+        version: 0.474.0(react@19.1.0)
+      motion:
+        specifier: ^12.12.1
+        version: 12.23.12(@emotion/is-prop-valid@1.3.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      next:
+        specifier: 15.3.1
+        version: 15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      next-themes:
+        specifier: 0.4.6
+        version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      postcss:
+        specifier: ^8.5.1
+        version: 8.5.6
+      react:
+        specifier: 19.1.0
+        version: 19.1.0
+      react-day-picker:
+        specifier: ^9.7.0
+        version: 9.8.1(react@19.1.0)
+      react-dom:
+        specifier: 19.1.0
+        version: 19.1.0(react@19.1.0)
+      react-hook-form:
+        specifier: ^7.54.2
+        version: 7.62.0(react@19.1.0)
+      react-resizable-panels:
+        specifier: ^2.1.7
+        version: 2.1.9(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      recharts:
+        specifier: 2.15.1
+        version: 2.15.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      rehype-pretty-code:
+        specifier: ^0.14.1
+        version: 0.14.1(shiki@1.29.2)
+      rimraf:
+        specifier: ^6.0.1
+        version: 6.0.1
+      shadcn:
+        specifier: 3.3.1
+        version: link:../../packages/shadcn
+      shiki:
+        specifier: ^1.10.1
+        version: 1.29.2
+      sonner:
+        specifier: ^2.0.0
+        version: 2.0.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      tailwind-merge:
+        specifier: ^3.0.1
+        version: 3.3.1
+      ts-morph:
+        specifier: 18.0.0
+        version: 18.0.0
+      vaul:
+        specifier: 1.1.2
+        version: 1.1.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      zod:
+        specifier: ^3.24.1
+        version: 3.25.76
+    devDependencies:
+      '@eslint/eslintrc':
+        specifier: ^3
+        version: 3.3.1
+      '@ianvs/prettier-plugin-sort-imports':
+        specifier: ^4.4.1
+        version: 4.6.1(prettier@3.6.2)
+      '@types/lodash':
+        specifier: ^4.17.7
+        version: 4.17.20
+      '@types/mdx':
+        specifier: ^2.0.13
+        version: 2.0.13
+      '@types/node':
+        specifier: ^20
+        version: 20.19.10
+      '@types/react':
+        specifier: 19.1.2
+        version: 19.1.2
+      '@types/react-dom':
+        specifier: 19.1.2
+        version: 19.1.2(@types/react@19.1.2)
+      '@typescript-eslint/parser':
+        specifier: ^8.31.0
+        version: 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint:
+        specifier: ^9
+        version: 9.33.0(jiti@2.5.1)
+      eslint-config-next:
+        specifier: 15.3.1
+        version: 15.3.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      prettier:
+        specifier: ^3.4.2
+        version: 3.6.2
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.11
+        version: 0.6.14(@ianvs/prettier-plugin-sort-imports@4.6.1(prettier@3.6.2))(prettier@3.6.2)
+      tailwindcss:
+        specifier: ^4.1.11
+        version: 4.1.11
+      tw-animate-css:
+        specifier: ^1.2.4
+        version: 1.3.6
+      typescript:
+        specifier: ^5
+        version: 5.9.2
+      unist-builder:
+        specifier: 3.0.0
+        version: 3.0.0
+      unist-util-visit:
+        specifier: ^4.1.2
+        version: 4.1.2
 
   apps/www:
     dependencies:
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/modifiers':
+        specifier: ^9.0.0
+        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@18.3.1)
+      '@emotion/is-prop-valid':
+        specifier: ^1.3.1
+        version: 1.3.1
       '@faker-js/faker':
         specifier: ^8.2.0
-        version: 8.2.0
+        version: 8.4.1
       '@hookform/resolvers':
         specifier: ^3.1.0
-        version: 3.1.0(react-hook-form@7.44.2(react@18.2.0))
+        version: 3.10.0(react-hook-form@7.62.0(react@18.3.1))
       '@radix-ui/react-accessible-icon':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-accordion':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.2.11(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-alert-dialog':
         specifier: ^1.0.4
-        version: 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-aspect-ratio':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-avatar':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-checkbox':
         specifier: ^1.0.4
-        version: 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.3.2(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-collapsible':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-context-menu':
         specifier: ^2.1.4
-        version: 2.1.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 2.2.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dialog':
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.5
-        version: 2.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-hover-card':
         specifier: ^1.0.6
-        version: 1.0.6(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-icons':
         specifier: ^1.3.0
-        version: 1.3.0(react@18.2.0)
+        version: 1.3.2(react@18.3.1)
       '@radix-ui/react-label':
         specifier: ^2.0.2
-        version: 2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 2.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-menubar':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-navigation-menu':
         specifier: ^1.1.3
-        version: 1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.2.13(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-popover':
         specifier: ^1.0.6
-        version: 1.0.6(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-portal':
         specifier: ^1.0.4
-        version: 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-progress':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-radio-group':
         specifier: ^1.1.3
-        version: 1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.3.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-scroll-area':
-        specifier: ^1.0.4
-        version: 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.2.3
+        version: 1.2.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-select':
         specifier: ^2.0.0
-        version: 2.0.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 2.2.5(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-separator':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slider':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.3.5(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.0.2
-        version: 1.0.2(@types/react@18.2.67)(react@18.2.0)
+        version: 1.2.3(@types/react@18.3.23)(react@18.3.1)
       '@radix-ui/react-switch':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.2.5(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tabs':
         specifier: ^1.0.4
-        version: 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toast':
         specifier: ^1.1.4
-        version: 1.1.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.2.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toggle':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toggle-group':
         specifier: ^1.0.4
-        version: 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
         specifier: ^1.0.6
-        version: 1.0.6(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tailwindcss/container-queries':
+        specifier: ^0.1.1
+        version: 0.1.1(tailwindcss@3.4.6(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.9.2)))
       '@tanstack/react-table':
         specifier: ^8.9.1
-        version: 8.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@vercel/analytics':
         specifier: ^1.2.2
-        version: 1.2.2(next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
+        version: 1.5.0(next@14.3.0-canary.43(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@vercel/og':
         specifier: ^0.0.21
         version: 0.0.21
       change-case:
         specifier: ^5.4.4
         version: 5.4.4
+      chrono-node:
+        specifier: ^2.8.2
+        version: 2.8.4
       class-variance-authority:
         specifier: ^0.7.0
-        version: 0.7.0
+        version: 0.7.1
       clsx:
         specifier: ^1.2.1
         version: 1.2.1
       cmdk:
         specifier: ^1.0.0
-        version: 1.0.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       contentlayer2:
         specifier: ^0.4.6
-        version: 0.4.6(esbuild@0.17.19)(markdown-wasm@1.2.0)
+        version: 0.4.6(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
       date-fns:
         specifier: ^2.30.0
         version: 2.30.0
@@ -233,110 +549,116 @@ importers:
         version: 8.0.0-rc15(embla-carousel@8.0.0-rc15)
       embla-carousel-react:
         specifier: 8.0.0-rc15
-        version: 8.0.0-rc15(react@18.2.0)
+        version: 8.0.0-rc15(react@18.3.1)
       framer-motion:
         specifier: ^11.0.24
-        version: 11.0.24(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 11.18.2(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       geist:
         specifier: ^1.2.2
-        version: 1.2.2(next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
+        version: 1.4.2(next@14.3.0-canary.43(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       input-otp:
         specifier: ^1.2.2
-        version: 1.2.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       jotai:
         specifier: ^2.1.0
-        version: 2.1.0(react@18.2.0)
-      lodash.template:
-        specifier: ^4.5.0
-        version: 4.5.0
+        version: 2.13.1(@babel/core@7.28.0)(@babel/template@7.27.2)(@types/react@18.3.23)(react@18.3.1)
+      little-date:
+        specifier: ^1.0.0
+        version: 1.0.0
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       lucide-react:
-        specifier: 0.359.0
-        version: 0.359.0(react@18.2.0)
+        specifier: 0.477.0
+        version: 0.477.0(react@18.3.1)
       markdown-wasm:
         specifier: ^1.2.0
         version: 1.2.0
       next:
         specifier: 14.3.0-canary.43
-        version: 14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 14.3.0-canary.43(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-contentlayer2:
         specifier: ^0.4.6
-        version: 0.4.6(contentlayer2@0.4.6(esbuild@0.17.19)(markdown-wasm@1.2.0))(esbuild@0.17.19)(markdown-wasm@1.2.0)(next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 0.4.6(acorn@8.15.0)(contentlayer2@0.4.6(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0))(esbuild@0.25.8)(markdown-wasm@1.2.0)(next@14.3.0-canary.43(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-themes:
-        specifier: ^0.2.1
-        version: 0.2.1(next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^0.4.3
+        version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
         specifier: ^18.2.0
-        version: 18.2.0
+        version: 18.3.1
       react-day-picker:
-        specifier: ^8.7.1
-        version: 8.7.1(date-fns@2.30.0)(react@18.2.0)
+        specifier: ^9.7.0
+        version: 9.8.1(react@18.3.1)
       react-dom:
         specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
+        version: 18.3.1(react@18.3.1)
       react-hook-form:
         specifier: ^7.44.2
-        version: 7.44.2(react@18.2.0)
+        version: 7.62.0(react@18.3.1)
       react-resizable-panels:
         specifier: ^2.0.22
-        version: 2.0.22(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-wrap-balancer:
         specifier: ^0.4.1
-        version: 0.4.1(react@18.2.0)
+        version: 0.4.1(react@18.3.1)
       recharts:
         specifier: 2.12.7
-        version: 2.12.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      shadcn:
+        specifier: 3.3.1
+        version: link:../../packages/shadcn
       sharp:
-        specifier: ^0.31.3
-        version: 0.31.3
+        specifier: ^0.32.6
+        version: 0.32.6
       sonner:
         specifier: ^1.2.3
-        version: 1.2.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       swr:
         specifier: 2.2.6-beta.3
-        version: 2.2.6-beta.3(react@18.2.0)
+        version: 2.2.6-beta.3(react@18.3.1)
       tailwind-merge:
         specifier: ^1.12.0
-        version: 1.13.2
+        version: 1.14.0
       ts-morph:
         specifier: ^22.0.0
         version: 22.0.0
       vaul:
-        specifier: 0.9.0
-        version: 0.9.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       zod:
         specifier: ^3.21.4
-        version: 3.21.4
+        version: 3.25.76
     devDependencies:
       '@shikijs/compat':
         specifier: ^1.1.7
-        version: 1.1.7
-      '@types/lodash.template':
-        specifier: ^4.5.1
-        version: 4.5.1
+        version: 1.29.2
+      '@types/lodash':
+        specifier: ^4.17.7
+        version: 4.17.20
       '@types/node':
         specifier: ^17.0.45
         version: 17.0.45
       '@types/react':
         specifier: ^18.2.65
-        version: 18.2.67
+        version: 18.3.23
       '@types/react-color':
         specifier: ^3.0.6
-        version: 3.0.6
+        version: 3.0.13(@types/react@18.3.23)
       '@types/react-dom':
         specifier: ^18.2.22
-        version: 18.2.22
+        version: 18.3.7(@types/react@18.3.23)
       esbuild:
-        specifier: ^0.17.19
-        version: 0.17.19
+        specifier: ^0.25.0
+        version: 0.25.8
       eslint:
         specifier: ^8.41.0
-        version: 8.44.0
+        version: 8.57.1
       mdast-util-toc:
         specifier: ^6.1.1
         version: 6.1.1
       postcss:
         specifier: ^8.4.24
-        version: 8.4.24
+        version: 8.5.6
       rehype:
         specifier: ^12.0.1
         version: 12.0.1
@@ -345,7 +667,7 @@ importers:
         version: 6.1.1
       rehype-pretty-code:
         specifier: ^0.6.0
-        version: 0.6.0(shiki@1.10.3)
+        version: 0.6.0(shiki@1.29.2)
       rehype-slug:
         specifier: ^5.1.0
         version: 5.1.0
@@ -356,20 +678,20 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
       remark-gfm:
-        specifier: ^4.0.0
-        version: 4.0.0
+        specifier: ^4.0.1
+        version: 4.0.1
       rimraf:
         specifier: ^4.1.3
-        version: 4.1.3
+        version: 4.4.1
       shiki:
         specifier: ^1.10.1
-        version: 1.10.3
+        version: 1.29.2
       tailwindcss:
-        specifier: 3.3.7
-        version: 3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
+        specifier: 3.4.6
+        version: 3.4.6(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.9.2))
       typescript:
         specifier: ^5.5.3
-        version: 5.5.3
+        version: 5.9.2
       unist-builder:
         specifier: 3.0.0
         version: 3.0.0
@@ -377,184 +699,108 @@ importers:
         specifier: ^4.1.2
         version: 4.1.2
 
-  packages/cli:
-    dependencies:
-      '@antfu/ni':
-        specifier: ^0.21.4
-        version: 0.21.4
-      '@babel/core':
-        specifier: ^7.22.1
-        version: 7.22.1
-      '@babel/parser':
-        specifier: ^7.22.6
-        version: 7.22.6
-      '@babel/plugin-transform-typescript':
-        specifier: ^7.22.5
-        version: 7.22.5(@babel/core@7.22.1)
-      chalk:
-        specifier: 5.2.0
-        version: 5.2.0
-      commander:
-        specifier: ^10.0.0
-        version: 10.0.0
-      cosmiconfig:
-        specifier: ^8.1.3
-        version: 8.1.3
-      diff:
-        specifier: ^5.1.0
-        version: 5.1.0
-      execa:
-        specifier: ^7.0.0
-        version: 7.0.0
-      fast-glob:
-        specifier: ^3.3.2
-        version: 3.3.2
-      fs-extra:
-        specifier: ^11.1.0
-        version: 11.1.0
-      https-proxy-agent:
-        specifier: ^6.2.0
-        version: 6.2.0
-      lodash.template:
-        specifier: ^4.5.0
-        version: 4.5.0
-      node-fetch:
-        specifier: ^3.3.0
-        version: 3.3.0
-      ora:
-        specifier: ^6.1.2
-        version: 6.1.2
-      prompts:
-        specifier: ^2.4.2
-        version: 2.4.2
-      recast:
-        specifier: ^0.23.2
-        version: 0.23.2
-      ts-morph:
-        specifier: ^18.0.0
-        version: 18.0.0
-      tsconfig-paths:
-        specifier: ^4.2.0
-        version: 4.2.0
-      zod:
-        specifier: ^3.20.2
-        version: 3.21.4
-    devDependencies:
-      '@types/babel__core':
-        specifier: ^7.20.1
-        version: 7.20.1
-      '@types/diff':
-        specifier: ^5.0.3
-        version: 5.0.3
-      '@types/fs-extra':
-        specifier: ^11.0.1
-        version: 11.0.1
-      '@types/lodash.template':
-        specifier: ^4.5.1
-        version: 4.5.1
-      '@types/prompts':
-        specifier: ^2.4.2
-        version: 2.4.2
-      rimraf:
-        specifier: ^4.1.3
-        version: 4.1.3
-      tsup:
-        specifier: ^6.6.3
-        version: 6.6.3(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))(typescript@4.9.5)
-      type-fest:
-        specifier: ^3.8.0
-        version: 3.8.0
-      typescript:
-        specifier: ^4.9.3
-        version: 4.9.5
-
   packages/shadcn:
     dependencies:
       '@antfu/ni':
-        specifier: ^0.21.4
-        version: 0.21.4
+        specifier: ^25.0.0
+        version: 25.0.0
       '@babel/core':
-        specifier: ^7.22.1
-        version: 7.24.6
+        specifier: ^7.28.0
+        version: 7.28.0
       '@babel/parser':
-        specifier: ^7.22.6
-        version: 7.24.6
+        specifier: ^7.28.0
+        version: 7.28.0
       '@babel/plugin-transform-typescript':
-        specifier: ^7.22.5
-        version: 7.22.5(@babel/core@7.24.6)
+        specifier: ^7.28.0
+        version: 7.28.0(@babel/core@7.28.0)
+      '@babel/preset-typescript':
+        specifier: ^7.27.1
+        version: 7.27.1(@babel/core@7.28.0)
+      '@dotenvx/dotenvx':
+        specifier: ^1.48.4
+        version: 1.48.4
+      '@modelcontextprotocol/sdk':
+        specifier: ^1.17.2
+        version: 1.17.2
+      browserslist:
+        specifier: ^4.26.2
+        version: 4.26.2
       commander:
-        specifier: ^10.0.0
-        version: 10.0.0
+        specifier: ^14.0.0
+        version: 14.0.0
       cosmiconfig:
-        specifier: ^8.1.3
-        version: 8.3.6(typescript@4.9.5)
+        specifier: ^9.0.0
+        version: 9.0.0(typescript@5.9.2)
+      dedent:
+        specifier: ^1.6.0
+        version: 1.6.0
       deepmerge:
         specifier: ^4.3.1
         version: 4.3.1
       diff:
-        specifier: ^5.1.0
-        version: 5.2.0
+        specifier: ^8.0.2
+        version: 8.0.2
       execa:
-        specifier: ^7.0.0
-        version: 7.0.0
+        specifier: ^9.6.0
+        version: 9.6.0
       fast-glob:
-        specifier: ^3.3.2
-        version: 3.3.2
+        specifier: ^3.3.3
+        version: 3.3.3
       fs-extra:
-        specifier: ^11.1.0
-        version: 11.2.0
+        specifier: ^11.3.1
+        version: 11.3.1
+      fuzzysort:
+        specifier: ^3.1.0
+        version: 3.1.0
       https-proxy-agent:
-        specifier: ^6.2.0
-        version: 6.2.0
+        specifier: ^7.0.6
+        version: 7.0.6
       kleur:
         specifier: ^4.1.5
         version: 4.1.5
-      lodash.template:
-        specifier: ^4.5.0
-        version: 4.5.0
+      msw:
+        specifier: ^2.10.4
+        version: 2.10.4(@types/node@20.19.10)(typescript@5.9.2)
       node-fetch:
-        specifier: ^3.3.0
-        version: 3.3.0
+        specifier: ^3.3.2
+        version: 3.3.2
       ora:
-        specifier: ^6.1.2
-        version: 6.1.2
+        specifier: ^8.2.0
+        version: 8.2.0
       postcss:
-        specifier: ^8.4.24
-        version: 8.4.41
+        specifier: ^8.5.6
+        version: 8.5.6
       prompts:
         specifier: ^2.4.2
         version: 2.4.2
       recast:
-        specifier: ^0.23.2
-        version: 0.23.2
+        specifier: ^0.23.11
+        version: 0.23.11
       stringify-object:
         specifier: ^5.0.0
         version: 5.0.0
       ts-morph:
-        specifier: ^18.0.0
-        version: 18.0.0
+        specifier: ^26.0.0
+        version: 26.0.0
       tsconfig-paths:
         specifier: ^4.2.0
         version: 4.2.0
       zod:
-        specifier: ^3.20.2
-        version: 3.23.8
+        specifier: ^3.24.1
+        version: 3.25.76
+      zod-to-json-schema:
+        specifier: ^3.24.6
+        version: 3.24.6(zod@3.25.76)
     devDependencies:
       '@types/babel__core':
-        specifier: ^7.20.1
-        version: 7.20.1
-      '@types/diff':
-        specifier: ^5.0.3
-        version: 5.0.3
+        specifier: ^7.20.5
+        version: 7.20.5
       '@types/fs-extra':
-        specifier: ^11.0.1
-        version: 11.0.1
-      '@types/lodash.template':
-        specifier: ^4.5.1
-        version: 4.5.1
+        specifier: ^11.0.4
+        version: 11.0.4
       '@types/prompts':
-        specifier: ^2.4.2
-        version: 2.4.2
+        specifier: ^2.4.9
+        version: 2.4.9
       '@types/stringify-object':
         specifier: ^4.0.5
         version: 4.0.5
@@ -562,96 +808,45 @@ importers:
         specifier: ^6.0.1
         version: 6.0.1
       tsup:
-        specifier: ^6.6.3
-        version: 6.6.3(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))(typescript@4.9.5)
+        specifier: ^8.5.0
+        version: 8.5.0(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
       type-fest:
-        specifier: ^3.8.0
-        version: 3.8.0
+        specifier: ^4.41.0
+        version: 4.41.0
       typescript:
-        specifier: ^4.9.3
-        version: 4.9.5
+        specifier: ^5.9.2
+        version: 5.9.2
 
-  templates/next-template:
+  packages/tests:
     dependencies:
-      '@radix-ui/react-slot':
-        specifier: ^1.0.2
-        version: 1.0.2(@types/react@18.2.67)(react@18.2.0)
-      class-variance-authority:
-        specifier: ^0.7.0
-        version: 0.7.0
-      clsx:
-        specifier: ^1.2.1
-        version: 1.2.1
-      lucide-react:
-        specifier: 0.288.0
-        version: 0.288.0(react@18.2.0)
-      next:
-        specifier: 14.1.3
-        version: 14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      next-themes:
-        specifier: ^0.2.1
-        version: 0.2.1(next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react:
-        specifier: ^18.2.0
-        version: 18.2.0
-      react-dom:
-        specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
-      sharp:
-        specifier: ^0.31.3
-        version: 0.31.3
-      tailwind-merge:
-        specifier: ^1.13.2
-        version: 1.13.2
-      tailwindcss-animate:
-        specifier: ^1.0.6
-        version: 1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)))
+      shadcn:
+        specifier: workspace:*
+        version: link:../shadcn
     devDependencies:
-      '@ianvs/prettier-plugin-sort-imports':
-        specifier: ^3.7.2
-        version: 3.7.2(prettier@2.8.8)
+      '@types/fs-extra':
+        specifier: ^11.0.1
+        version: 11.0.4
       '@types/node':
-        specifier: ^17.0.45
-        version: 17.0.45
-      '@types/react':
-        specifier: ^18.2.67
-        version: 18.2.67
-      '@types/react-dom':
-        specifier: ^18.2.22
-        version: 18.2.22
-      '@typescript-eslint/parser':
-        specifier: ^5.61.0
-        version: 5.61.0(eslint@8.44.0)(typescript@5.5.3)
-      autoprefixer:
-        specifier: ^10.4.14
-        version: 10.4.14(postcss@8.4.24)
-      eslint:
-        specifier: ^8.44.0
-        version: 8.44.0
-      eslint-config-next:
-        specifier: 13.0.0
-        version: 13.0.0(eslint@8.44.0)(typescript@5.5.3)
-      eslint-config-prettier:
-        specifier: ^8.8.0
-        version: 8.8.0(eslint@8.44.0)
-      eslint-plugin-react:
-        specifier: ^7.32.2
-        version: 7.32.2(eslint@8.44.0)
-      eslint-plugin-tailwindcss:
-        specifier: 3.13.1
-        version: 3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)))
-      postcss:
-        specifier: ^8.4.24
-        version: 8.4.24
-      prettier:
-        specifier: ^2.8.8
-        version: 2.8.8
-      tailwindcss:
-        specifier: 3.3.7
-        version: 3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
+        specifier: ^20.11.27
+        version: 20.19.10
+      execa:
+        specifier: ^7.0.0
+        version: 7.2.0
+      fs-extra:
+        specifier: ^11.1.0
+        version: 11.3.1
+      rimraf:
+        specifier: ^6.0.1
+        version: 6.0.1
       typescript:
         specifier: ^5.5.3
-        version: 5.5.3
+        version: 5.9.2
+      vite-tsconfig-paths:
+        specifier: ^4.2.0
+        version: 4.3.2(typescript@5.9.2)(vite@5.4.19(@types/node@20.19.10)(lightningcss@1.30.1))
+      vitest:
+        specifier: ^2.1.9
+        version: 2.1.9(@types/node@20.19.10)(lightningcss@1.30.1)(msw@2.10.4(@types/node@20.19.10)(typescript@5.9.2))
 
 packages:
 
@@ -663,202 +858,203 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@antfu/ni@0.21.4':
-    resolution: {integrity: sha512-O0Uv9LbLDSoEg26fnMDdDRiPwFJnQSoD4WnrflDwKCJm8Cx/0mV4cGxwBLXan5mGIrpK4Dd7vizf4rQm0QCEAA==}
+  '@antfu/ni@25.0.0':
+    resolution: {integrity: sha512-9q/yCljni37pkMr4sPrI3G4jqdIk074+iukc5aFJl7kmDCCsiJrbZ6zKxnES1Gwg+i9RcDZwvktl23puGslmvA==}
     hasBin: true
 
-  '@babel/code-frame@7.24.6':
-    resolution: {integrity: sha512-ZJhac6FkEd1yhG2AHOmfcXG4ceoLltoCVJjN5XsWN9BifBQr+cHJbWi0h68HZuSORq+3WtJ2z0hwF2NG1b5kcA==}
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.24.6':
-    resolution: {integrity: sha512-aC2DGhBq5eEdyXWqrDInSqQjO0k8xtPRf5YylULqx8MCd6jBtzqfta/3ETMRpuKIc5hyswfO80ObyA1MvkCcUQ==}
+  '@babel/compat-data@7.28.0':
+    resolution: {integrity: sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.22.1':
-    resolution: {integrity: sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==}
+  '@babel/core@7.28.0':
+    resolution: {integrity: sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.24.6':
-    resolution: {integrity: sha512-qAHSfAdVyFmIvl0VHELib8xar7ONuSHrE2hLnsaWkYNTI68dmi1x8GYDhJjMI/e7XWal9QBlZkwbOnkcw7Z8gQ==}
+  '@babel/generator@7.28.0':
+    resolution: {integrity: sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.24.6':
-    resolution: {integrity: sha512-S7m4eNa6YAPJRHmKsLHIDJhNAGNKoWNiWefz1MBbpnt8g9lvMDl1hir4P9bo/57bQEmuwEhnRU/AMWsD0G/Fbg==}
+  '@babel/helper-annotate-as-pure@7.27.3':
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-annotate-as-pure@7.24.6':
-    resolution: {integrity: sha512-DitEzDfOMnd13kZnDqns1ccmftwJTS9DMkyn9pYTxulS7bZxUxpMly3Nf23QQ6NwA4UB8lAqjbqWtyvElEMAkg==}
+  '@babel/helper-compilation-targets@7.27.2':
+    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.24.6':
-    resolution: {integrity: sha512-VZQ57UsDGlX/5fFA7GkVPplZhHsVc+vuErWgdOiysI9Ksnw0Pbbd6pnPiR/mmJyKHgyIW0c7KT32gmhiF+cirg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-create-class-features-plugin@7.24.6':
-    resolution: {integrity: sha512-djsosdPJVZE6Vsw3kk7IPRWethP94WHGOhQTc67SNXE0ZzMhHgALw8iGmYS0TD1bbMM0VDROy43od7/hN6WYcA==}
+  '@babel/helper-create-class-features-plugin@7.27.1':
+    resolution: {integrity: sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-environment-visitor@7.24.6':
-    resolution: {integrity: sha512-Y50Cg3k0LKLMjxdPjIl40SdJgMB85iXn27Vk/qbHZCFx/o5XO3PSnpi675h1KEmmDb6OFArfd5SCQEQ5Q4H88g==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-function-name@7.24.6':
-    resolution: {integrity: sha512-xpeLqeeRkbxhnYimfr2PC+iA0Q7ljX/d1eZ9/inYbmfG2jpl8Lu3DyXvpOAnrS5kxkfOWJjioIMQsaMBXFI05w==}
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-hoist-variables@7.24.6':
-    resolution: {integrity: sha512-SF/EMrC3OD7dSta1bLJIlrsVxwtd0UpjRJqLno6125epQMJ/kyFmpTT4pbvPbdQHzCHg+biQ7Syo8lnDtbR+uA==}
+  '@babel/helper-member-expression-to-functions@7.27.1':
+    resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-member-expression-to-functions@7.24.6':
-    resolution: {integrity: sha512-OTsCufZTxDUsv2/eDXanw/mUZHWOxSbEmC3pP8cgjcy5rgeVPWWMStnv274DV60JtHxTk0adT0QrCzC4M9NWGg==}
+  '@babel/helper-module-imports@7.27.1':
+    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.24.6':
-    resolution: {integrity: sha512-a26dmxFJBF62rRO9mmpgrfTLsAuyHk4e1hKTUkD/fcMfynt8gvEKwQPQDVxWhca8dHoDck+55DFt42zV0QMw5g==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-transforms@7.24.6':
-    resolution: {integrity: sha512-Y/YMPm83mV2HJTbX1Qh2sjgjqcacvOlhbzdCCsSlblOKjSYmQqEbO6rUniWQyRo9ncyfjT8hnUjlG06RXDEmcA==}
+  '@babel/helper-module-transforms@7.27.3':
+    resolution: {integrity: sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-optimise-call-expression@7.24.6':
-    resolution: {integrity: sha512-3SFDJRbx7KuPRl8XDUr8O7GAEB8iGyWPjLKJh/ywP/Iy9WOmEfMrsWbaZpvBu2HSYn4KQygIsz0O7m8y10ncMA==}
+  '@babel/helper-optimise-call-expression@7.27.1':
+    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-plugin-utils@7.24.6':
-    resolution: {integrity: sha512-MZG/JcWfxybKwsA9N9PmtF2lOSFSEMVCpIRrbxccZFLJPrJciJdG/UhSh5W96GEteJI2ARqm5UAHxISwRDLSNg==}
+  '@babel/helper-plugin-utils@7.27.1':
+    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-replace-supers@7.24.6':
-    resolution: {integrity: sha512-mRhfPwDqDpba8o1F8ESxsEkJMQkUF8ZIWrAc0FtWhxnjfextxMWxr22RtFizxxSYLjVHDeMgVsRq8BBZR2ikJQ==}
+  '@babel/helper-replace-supers@7.27.1':
+    resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-simple-access@7.24.6':
-    resolution: {integrity: sha512-nZzcMMD4ZhmB35MOOzQuiGO5RzL6tJbsT37Zx8M5L/i9KSrukGXWTjLe1knIbb/RmxoJE9GON9soq0c0VEMM5g==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-skip-transparent-expression-wrappers@7.24.6':
-    resolution: {integrity: sha512-jhbbkK3IUKc4T43WadP96a27oYti9gEf1LdyGSP2rHGH77kwLwfhO7TgwnWvxxQVmke0ImmCSS47vcuxEMGD3Q==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-split-export-declaration@7.24.6':
-    resolution: {integrity: sha512-CvLSkwXGWnYlF9+J3iZUvwgAxKiYzK3BWuo+mLzD/MDGOZDj7Gq8+hqaOkMxmJwmlv0iu86uH5fdADd9Hxkymw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-string-parser@7.24.6':
-    resolution: {integrity: sha512-WdJjwMEkmBicq5T9fm/cHND3+UlFa2Yj8ALLgmoSQAJZysYbBjw+azChSGPN4DSPLXOcooGRvDwZWMcF/mLO2Q==}
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.24.6':
-    resolution: {integrity: sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==}
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.24.6':
-    resolution: {integrity: sha512-Jktc8KkF3zIkePb48QO+IapbXlSapOW9S+ogZZkcO6bABgYAxtZcjZ/O005111YLf+j4M84uEgwYoidDkXbCkQ==}
+  '@babel/helper-validator-identifier@7.27.1':
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.24.6':
-    resolution: {integrity: sha512-V2PI+NqnyFu1i0GyTd/O/cTpxzQCYioSkUIRmgo7gFEHKKCg5w46+r/A6WeUR1+P3TeQ49dspGPNd/E3n9AnnA==}
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.24.6':
-    resolution: {integrity: sha512-2YnuOp4HAk2BsBrJJvYCbItHx0zWscI1C3zgWkz+wDyD9I7GIVrfnLyrR4Y1VR+7p+chAEcrgRQYZAGIKMV7vQ==}
+  '@babel/helpers@7.28.2':
+    resolution: {integrity: sha512-/V9771t+EgXz62aCcyofnQhGM8DQACbRhvzKFsXKC9QM+5MadF8ZmIm0crDMaz3+o0h0zXfJnd4EhbYbxsrcFw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.22.6':
-    resolution: {integrity: sha512-EIQu22vNkceq3LbjAq7knDf/UmtI2qbcNI8GRBlijez6TpQLvSodJPYfydQmNA5buwkxxxa/PVI44jjYZ+/cLw==}
+  '@babel/parser@7.28.0':
+    resolution: {integrity: sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/parser@7.24.6':
-    resolution: {integrity: sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/plugin-syntax-typescript@7.24.6':
-    resolution: {integrity: sha512-TzCtxGgVTEJWWwcYwQhCIQ6WaKlo80/B+Onsk4RRCcYqpYGFcG9etPW94VToGte5AAcxRrhjPUFvUS3Y2qKi4A==}
+  '@babel/plugin-syntax-jsx@7.27.1':
+    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typescript@7.22.5':
-    resolution: {integrity: sha512-SMubA9S7Cb5sGSFFUlqxyClTA9zWJ8qGQrppNUm05LtFuN1ELRFNndkix4zUJrC9F+YivWwa1dHMSyo0e0N9dA==}
+  '@babel/plugin-syntax-typescript@7.27.1':
+    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/runtime@7.24.6':
-    resolution: {integrity: sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==}
+  '@babel/plugin-transform-modules-commonjs@7.27.1':
+    resolution: {integrity: sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==}
     engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
 
-  '@babel/template@7.24.6':
-    resolution: {integrity: sha512-3vgazJlLwNXi9jhrR1ef8qiB65L1RK90+lEQwv4OxveHnqC3BfmnHdgySwRLzf6akhlOYenT+b7AfWq+a//AHw==}
+  '@babel/plugin-transform-typescript@7.28.0':
+    resolution: {integrity: sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==}
     engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
 
-  '@babel/traverse@7.24.6':
-    resolution: {integrity: sha512-OsNjaJwT9Zn8ozxcfoBc+RaHdj3gFmCmYoQLUII1o6ZrUwku0BMg80FoOTPx+Gi6XhcQxAYE4xyjPTo4SxEQqw==}
+  '@babel/preset-typescript@7.27.1':
+    resolution: {integrity: sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==}
     engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.24.6':
-    resolution: {integrity: sha512-WaMsgi6Q8zMgMth93GvWPXkhAIEobfsIkLTacoVZoK1J0CevIPGYY2Vo5YvJGqyHqXM6P4ppOYGsIRU8MM9pFQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.28.2':
+    resolution: {integrity: sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.27.2':
+    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.28.0':
+    resolution: {integrity: sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.28.2':
+    resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
     engines: {node: '>=6.9.0'}
 
-  '@changesets/apply-release-plan@6.1.4':
-    resolution: {integrity: sha512-FMpKF1fRlJyCZVYHr3CbinpZZ+6MwvOtWUuO8uo+svcATEoc1zRDcj23pAurJ2TZ/uVz1wFHH6K3NlACy0PLew==}
+  '@bundled-es-modules/cookie@2.0.1':
+    resolution: {integrity: sha512-8o+5fRPLNbjbdGRRmJj3h6Hh1AQJf2dk3qQ/5ZFb+PXkRNiSoMGGUKlsgLfrxneb72axVJyIYji64E2+nNfYyw==}
+
+  '@bundled-es-modules/statuses@1.0.1':
+    resolution: {integrity: sha512-yn7BklA5acgcBr+7w064fGV+SGIFySjCKpqjcWgBAIfrAkY+4GQTJJHQMeT3V/sgz23VTEVV8TtOmkvJAhFVfg==}
+
+  '@bundled-es-modules/tough-cookie@0.1.6':
+    resolution: {integrity: sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==}
+
+  '@changesets/apply-release-plan@7.0.12':
+    resolution: {integrity: sha512-EaET7As5CeuhTzvXTQCRZeBUcisoYPDDcXvgTE/2jmmypKp0RC7LxKj/yzqeh/1qFTZI7oDGFcL1PHRuQuketQ==}
 
-  '@changesets/assemble-release-plan@5.2.4':
-    resolution: {integrity: sha512-xJkWX+1/CUaOUWTguXEbCDTyWJFECEhmdtbkjhn5GVBGxdP/JwaHBIU9sW3FR6gD07UwZ7ovpiPclQZs+j+mvg==}
+  '@changesets/assemble-release-plan@6.0.9':
+    resolution: {integrity: sha512-tPgeeqCHIwNo8sypKlS3gOPmsS3wP0zHt67JDuL20P4QcXiw/O4Hl7oXiuLnP9yg+rXLQ2sScdV1Kkzde61iSQ==}
 
-  '@changesets/changelog-git@0.1.14':
-    resolution: {integrity: sha512-+vRfnKtXVWsDDxGctOfzJsPhaCdXRYoe+KyWYoq5X/GqoISREiat0l3L8B0a453B2B4dfHGcZaGyowHbp9BSaA==}
+  '@changesets/changelog-git@0.2.1':
+    resolution: {integrity: sha512-x/xEleCFLH28c3bQeQIyeZf8lFXyDFVn1SgcBiR2Tw/r4IAWlk1fzxCEZ6NxQAjF2Nwtczoen3OA2qR+UawQ8Q==}
 
   '@changesets/changelog-github@0.4.8':
     resolution: {integrity: sha512-jR1DHibkMAb5v/8ym77E4AMNWZKB5NPzw5a5Wtqm1JepAuIF+hrKp2u04NKM14oBZhHglkCfrla9uq8ORnK/dw==}
 
-  '@changesets/cli@2.26.1':
-    resolution: {integrity: sha512-XnTa+b51vt057fyAudvDKGB0Sh72xutQZNAdXkCqPBKO2zvs2yYZx5hFZj1u9cbtpwM6Sxtcr02/FQJfZOzemQ==}
+  '@changesets/cli@2.29.5':
+    resolution: {integrity: sha512-0j0cPq3fgxt2dPdFsg4XvO+6L66RC0pZybT9F4dG5TBrLA3jA/1pNkdTXH9IBBVHkgsKrNKenI3n1mPyPlIydg==}
     hasBin: true
 
-  '@changesets/config@2.3.1':
-    resolution: {integrity: sha512-PQXaJl82CfIXddUOppj4zWu+987GCw2M+eQcOepxN5s+kvnsZOwjEJO3DH9eVy+OP6Pg/KFEWdsECFEYTtbg6w==}
+  '@changesets/config@3.1.1':
+    resolution: {integrity: sha512-bd+3Ap2TKXxljCggI0mKPfzCQKeV/TU4yO2h2C6vAihIo8tzseAn2e7klSuiyYYXvgu53zMN1OeYMIQkaQoWnA==}
 
-  '@changesets/errors@0.1.4':
-    resolution: {integrity: sha512-HAcqPF7snsUJ/QzkWoKfRfXushHTu+K5KZLJWPb34s4eCZShIf8BFO3fwq6KU8+G7L5KdtN2BzQAXOSXEyiY9Q==}
+  '@changesets/errors@0.2.0':
+    resolution: {integrity: sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==}
 
-  '@changesets/get-dependents-graph@1.3.6':
-    resolution: {integrity: sha512-Q/sLgBANmkvUm09GgRsAvEtY3p1/5OCzgBE5vX3vgb5CvW0j7CEljocx5oPXeQSNph6FXulJlXV3Re/v3K3P3Q==}
+  '@changesets/get-dependents-graph@2.1.3':
+    resolution: {integrity: sha512-gphr+v0mv2I3Oxt19VdWRRUxq3sseyUpX9DaHpTUmLj92Y10AGy+XOtV+kbM6L/fDcpx7/ISDFK6T8A/P3lOdQ==}
 
   '@changesets/get-github-info@0.5.2':
     resolution: {integrity: sha512-JppheLu7S114aEs157fOZDjFqUDpm7eHdq5E8SSR0gUBTEK0cNSHsrSR5a66xs0z3RWuo46QvA3vawp8BxDHvg==}
 
-  '@changesets/get-release-plan@3.0.17':
-    resolution: {integrity: sha512-6IwKTubNEgoOZwDontYc2x2cWXfr6IKxP3IhKeK+WjyD6y3M4Gl/jdQvBw+m/5zWILSOCAaGLu2ZF6Q+WiPniw==}
+  '@changesets/get-release-plan@4.0.13':
+    resolution: {integrity: sha512-DWG1pus72FcNeXkM12tx+xtExyH/c9I1z+2aXlObH3i9YA7+WZEVaiHzHl03thpvAgWTRaH64MpfHxozfF7Dvg==}
 
-  '@changesets/get-version-range-type@0.3.2':
-    resolution: {integrity: sha512-SVqwYs5pULYjYT4op21F2pVbcrca4qA/bAA3FmFXKMN7Y+HcO8sbZUTx3TAy2VXulP2FACd1aC7f2nTuqSPbqg==}
+  '@changesets/get-version-range-type@0.4.0':
+    resolution: {integrity: sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==}
 
-  '@changesets/git@2.0.0':
-    resolution: {integrity: sha512-enUVEWbiqUTxqSnmesyJGWfzd51PY4H7mH9yUw0hPVpZBJ6tQZFMU3F3mT/t9OJ/GjyiM4770i+sehAn6ymx6A==}
+  '@changesets/git@3.0.4':
+    resolution: {integrity: sha512-BXANzRFkX+XcC1q/d27NKvlJ1yf7PSAgi8JG6dt8EfbHFHi4neau7mufcSca5zRhwOL8j9s6EqsxmT+s+/E6Sw==}
 
-  '@changesets/logger@0.0.5':
-    resolution: {integrity: sha512-gJyZHomu8nASHpaANzc6bkQMO9gU/ib20lqew1rVx753FOxffnCrJlGIeQVxNWCqM+o6OOleCo/ivL8UAO5iFw==}
+  '@changesets/logger@0.1.1':
+    resolution: {integrity: sha512-OQtR36ZlnuTxKqoW4Sv6x5YIhOmClRd5pWsjZsddYxpWs517R0HkyiefQPIytCVh4ZcC5x9XaG8KTdd5iRQUfg==}
 
-  '@changesets/parse@0.3.16':
-    resolution: {integrity: sha512-127JKNd167ayAuBjUggZBkmDS5fIKsthnr9jr6bdnuUljroiERW7FBTDNnNVyJ4l69PzR57pk6mXQdtJyBCJKg==}
+  '@changesets/parse@0.4.1':
+    resolution: {integrity: sha512-iwksMs5Bf/wUItfcg+OXrEpravm5rEd9Bf4oyIPL4kVTmJQ7PNDSd6MDYkpSJR1pn7tz/k8Zf2DhTCqX08Ou+Q==}
 
-  '@changesets/pre@1.0.14':
-    resolution: {integrity: sha512-dTsHmxQWEQekHYHbg+M1mDVYFvegDh9j/kySNuDKdylwfMEevTeDouR7IfHNyVodxZXu17sXoJuf2D0vi55FHQ==}
+  '@changesets/pre@2.0.2':
+    resolution: {integrity: sha512-HaL/gEyFVvkf9KFg6484wR9s0qjAXlZ8qWPDkTyKF6+zqjBe/I2mygg3MbpZ++hdi0ToqNUF8cjj7fBy0dg8Ug==}
 
-  '@changesets/read@0.5.9':
-    resolution: {integrity: sha512-T8BJ6JS6j1gfO1HFq50kU3qawYxa4NTbI/ASNVVCBTsKquy2HYwM9r7ZnzkiMe8IEObAJtUVGSrePCOxAK2haQ==}
+  '@changesets/read@0.6.5':
+    resolution: {integrity: sha512-UPzNGhsSjHD3Veb0xO/MwvasGe8eMyNrR/sT9gR8Q3DhOQZirgKhhXv/8hVsI0QpPjR004Z9iFxoJU6in3uGMg==}
+
+  '@changesets/should-skip-package@0.1.2':
+    resolution: {integrity: sha512-qAK/WrqWLNCP22UDdBTMPH5f41elVDlsNyat180A33dWxuUDyNpg6fPi/FyTZwRriVjg0L8gnjJn2F9XAoF0qw==}
 
   '@changesets/types@4.1.0':
     resolution: {integrity: sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==}
@@ -866,16 +1062,19 @@ packages:
   '@changesets/types@5.2.1':
     resolution: {integrity: sha512-myLfHbVOqaq9UtUKqR/nZA/OY7xFjQMdfgfqeZIBK4d0hA6pgxArvdv8M+6NUzzBsjWLOtvApv8YHr4qM+Kpfg==}
 
-  '@changesets/write@0.2.3':
-    resolution: {integrity: sha512-Dbamr7AIMvslKnNYsLFafaVORx4H0pvCA2MHqgtNCySMe1blImEyAEOzDmcgKAkgz4+uwoLz7demIrX+JBr/Xw==}
+  '@changesets/types@6.1.0':
+    resolution: {integrity: sha512-rKQcJ+o1nKNgeoYRHKOS07tAMNd3YSN0uHaJOZYjBAgxfV7TUE7JE+z4BzZdQwb5hKaYbayKN5KrYV7ODb2rAA==}
+
+  '@changesets/write@0.4.0':
+    resolution: {integrity: sha512-CdTLvIOPiCNuH71pyDu3rA+Q0n65cmAbXnwWH84rKGiFumFzkmHNT8KHTMEchcxN+Kl8I54xGUhJ7l3E7X396Q==}
 
-  '@commitlint/cli@17.6.3':
-    resolution: {integrity: sha512-ItSz2fd4F+CujgIbQOfNNerDF1eFlsBGEfp9QcCb1kxTYMuKTYZzA6Nu1YRRrIaaWwe2E7awUGpIMrPoZkOG3A==}
+  '@commitlint/cli@17.8.1':
+    resolution: {integrity: sha512-ay+WbzQesE0Rv4EQKfNbSMiJJ12KdKTDzIt0tcK4k11FdsWmtwP0Kp1NWMOUswfIWo6Eb7p7Ln721Nx9FLNBjg==}
     engines: {node: '>=v14'}
     hasBin: true
 
-  '@commitlint/config-conventional@17.6.3':
-    resolution: {integrity: sha512-bLyHEjjRWqlLQWIgYFHmUPbEFMOOLXeF3QbUinDIJev/u9e769tkoTH9YPknEywiuIrAgZaVo+OfzAIsJP0fsw==}
+  '@commitlint/config-conventional@17.8.1':
+    resolution: {integrity: sha512-NxCOHx1kgneig3VLauWJcDWS40DVjg7nKOpBEEK9E5fjJpQqLCilcnKkIIjdBH98kEO1q3NpE5NSrZ2kl/QGJg==}
     engines: {node: '>=v14'}
 
   '@commitlint/config-validator@17.8.1':
@@ -973,6 +1172,47 @@ packages:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
+  '@date-fns/tz@1.3.1':
+    resolution: {integrity: sha512-LnBOyuj+piItX/D5BWBSckBsuZyOt7Jg2obGNiObq7qjl1A2/8F+i4RS8/MmkSdnw6hOe6afrJLCWrUWZw5Mlw==}
+
+  '@dnd-kit/accessibility@3.1.1':
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.3.1':
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@dnd-kit/modifiers@9.0.0':
+    resolution: {integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/sortable@10.0.0':
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dotenvx/dotenvx@1.48.4':
+    resolution: {integrity: sha512-GpJWpGVI5JGhNzFlWOjCD3KMiN3xU1US4oLKQ7SiiGru4LvR7sUf3pDMpfjtlgzHStL5ydq4ekfZcRxWpHaJkA==}
+    hasBin: true
+
+  '@ecies/ciphers@0.2.4':
+    resolution: {integrity: sha512-t+iX+Wf5nRKyNzk8dviW3Ikb/280+aEJAnw9YXvCp2tYGPSkMki+NRY+8aNLmVFv3eNtMdvViPNOPxS8SZNP+w==}
+    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
+    peerDependencies:
+      '@noble/ciphers': ^1.0.0
+
   '@effect-ts/core@0.60.5':
     resolution: {integrity: sha512-qi1WrtJA90XLMnj2hnUszW9Sx4dXP03ZJtCc5DiUBIOhF4Vw7plfb65/bdBySPoC9s7zy995TdUX1XBSxUkl5w==}
 
@@ -996,8 +1236,20 @@ packages:
   '@effect-ts/system@0.57.5':
     resolution: {integrity: sha512-/crHGujo0xnuHIYNc1VgP0HGJGFSoSqq88JFXe6FmFyXPpWt8Xu39LyLg7rchsxfXFeEdA9CrIZvLV5eswXV5g==}
 
-  '@emnapi/runtime@1.2.0':
-    resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==}
+  '@emnapi/core@1.4.5':
+    resolution: {integrity: sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q==}
+
+  '@emnapi/runtime@1.4.5':
+    resolution: {integrity: sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==}
+
+  '@emnapi/wasi-threads@1.0.4':
+    resolution: {integrity: sha512-PJR+bOmMOPH8AtcTGAyYNiuJ3/Fcoj2XN/gBEWzDIKh254XO+mM9XoXHk5GNEhodxeMznbg7BlRojVbKN+gC6g==}
+
+  '@emotion/is-prop-valid@1.3.1':
+    resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==}
+
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
 
   '@esbuild-plugins/node-resolve@0.2.2':
     resolution: {integrity: sha512-+t5FdX3ATQlb53UFDBRb4nqjYBz492bIrnVWvpQHpzZlu9BQL5HasMZhqc409ygUwOWCXZhrWr6NyZ6T6Y+cxw==}
@@ -1010,17 +1262,11 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.17.19':
-    resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-
-  '@esbuild/android-arm64@0.18.20':
-    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
+  '@esbuild/aix-ppc64@0.25.8':
+    resolution: {integrity: sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
 
   '@esbuild/android-arm64@0.21.5':
     resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
@@ -1028,16 +1274,10 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.17.19':
-    resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-
-  '@esbuild/android-arm@0.18.20':
-    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
-    engines: {node: '>=12'}
-    cpu: [arm]
+  '@esbuild/android-arm64@0.25.8':
+    resolution: {integrity: sha512-OD3p7LYzWpLhZEyATcTSJ67qB5D+20vbtr6vHlHWSQYhKtzUYrETuWThmzFpZtFsBIxRvhO07+UgVA9m0i/O1w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
     os: [android]
 
   '@esbuild/android-arm@0.21.5':
@@ -1046,16 +1286,10 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.17.19':
-    resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-
-  '@esbuild/android-x64@0.18.20':
-    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
+  '@esbuild/android-arm@0.25.8':
+    resolution: {integrity: sha512-RONsAvGCz5oWyePVnLdZY/HHwA++nxYWIX1atInlaW6SEkwq6XkP3+cb825EUcRs5Vss/lGh/2YxAb5xqc07Uw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
     os: [android]
 
   '@esbuild/android-x64@0.21.5':
@@ -1064,17 +1298,11 @@ packages:
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.17.19':
-    resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@esbuild/darwin-arm64@0.18.20':
-    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
+  '@esbuild/android-x64@0.25.8':
+    resolution: {integrity: sha512-yJAVPklM5+4+9dTeKwHOaA+LQkmrKFX96BM0A/2zQrbS6ENCmxc4OVoBs5dPkCCak2roAD+jKCdnmOqKszPkjA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
 
   '@esbuild/darwin-arm64@0.21.5':
     resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
@@ -1082,16 +1310,10 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.17.19':
-    resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@esbuild/darwin-x64@0.18.20':
-    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
+  '@esbuild/darwin-arm64@0.25.8':
+    resolution: {integrity: sha512-Jw0mxgIaYX6R8ODrdkLLPwBqHTtYHJSmzzd+QeytSugzQ0Vg4c5rDky5VgkoowbZQahCbsv1rT1KW72MPIkevw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
     os: [darwin]
 
   '@esbuild/darwin-x64@0.21.5':
@@ -1100,17 +1322,11 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.17.19':
-    resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@esbuild/freebsd-arm64@0.18.20':
-    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
+  '@esbuild/darwin-x64@0.25.8':
+    resolution: {integrity: sha512-Vh2gLxxHnuoQ+GjPNvDSDRpoBCUzY4Pu0kBqMBDlK4fuWbKgGtmDIeEC081xi26PPjn+1tct+Bh8FjyLlw1Zlg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
 
   '@esbuild/freebsd-arm64@0.21.5':
     resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
@@ -1118,16 +1334,10 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.17.19':
-    resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@esbuild/freebsd-x64@0.18.20':
-    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
+  '@esbuild/freebsd-arm64@0.25.8':
+    resolution: {integrity: sha512-YPJ7hDQ9DnNe5vxOm6jaie9QsTwcKedPvizTVlqWG9GBSq+BuyWEDazlGaDTC5NGU4QJd666V0yqCBL2oWKPfA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
     os: [freebsd]
 
   '@esbuild/freebsd-x64@0.21.5':
@@ -1136,17 +1346,11 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.17.19':
-    resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@esbuild/linux-arm64@0.18.20':
-    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
+  '@esbuild/freebsd-x64@0.25.8':
+    resolution: {integrity: sha512-MmaEXxQRdXNFsRN/KcIimLnSJrk2r5H8v+WVafRWz5xdSVmWLoITZQXcgehI2ZE6gioE6HirAEToM/RvFBeuhw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
 
   '@esbuild/linux-arm64@0.21.5':
     resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
@@ -1154,16 +1358,10 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.17.19':
-    resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-
-  '@esbuild/linux-arm@0.18.20':
-    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
+  '@esbuild/linux-arm64@0.25.8':
+    resolution: {integrity: sha512-WIgg00ARWv/uYLU7lsuDK00d/hHSfES5BzdWAdAig1ioV5kaFNrtK8EqGcUBJhYqotlUByUKz5Qo6u8tt7iD/w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
     os: [linux]
 
   '@esbuild/linux-arm@0.21.5':
@@ -1172,16 +1370,10 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.17.19':
-    resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-
-  '@esbuild/linux-ia32@0.18.20':
-    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
+  '@esbuild/linux-arm@0.25.8':
+    resolution: {integrity: sha512-FuzEP9BixzZohl1kLf76KEVOsxtIBFwCaLupVuk4eFVnOZfU+Wsn+x5Ryam7nILV2pkq2TqQM9EZPsOBuMC+kg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
     os: [linux]
 
   '@esbuild/linux-ia32@0.21.5':
@@ -1190,16 +1382,10 @@ packages:
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.17.19':
-    resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-
-  '@esbuild/linux-loong64@0.18.20':
-    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
+  '@esbuild/linux-ia32@0.25.8':
+    resolution: {integrity: sha512-A1D9YzRX1i+1AJZuFFUMP1E9fMaYY+GnSQil9Tlw05utlE86EKTUA7RjwHDkEitmLYiFsRd9HwKBPEftNdBfjg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
     os: [linux]
 
   '@esbuild/linux-loong64@0.21.5':
@@ -1208,16 +1394,10 @@ packages:
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.17.19':
-    resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-
-  '@esbuild/linux-mips64el@0.18.20':
-    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
+  '@esbuild/linux-loong64@0.25.8':
+    resolution: {integrity: sha512-O7k1J/dwHkY1RMVvglFHl1HzutGEFFZ3kNiDMSOyUrB7WcoHGf96Sh+64nTRT26l3GMbCW01Ekh/ThKM5iI7hQ==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
     os: [linux]
 
   '@esbuild/linux-mips64el@0.21.5':
@@ -1226,16 +1406,10 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.17.19':
-    resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@esbuild/linux-ppc64@0.18.20':
-    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
+  '@esbuild/linux-mips64el@0.25.8':
+    resolution: {integrity: sha512-uv+dqfRazte3BzfMp8PAQXmdGHQt2oC/y2ovwpTteqrMx2lwaksiFZ/bdkXJC19ttTvNXBuWH53zy/aTj1FgGw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
     os: [linux]
 
   '@esbuild/linux-ppc64@0.21.5':
@@ -1244,16 +1418,10 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.17.19':
-    resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@esbuild/linux-riscv64@0.18.20':
-    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
+  '@esbuild/linux-ppc64@0.25.8':
+    resolution: {integrity: sha512-GyG0KcMi1GBavP5JgAkkstMGyMholMDybAf8wF5A70CALlDM2p/f7YFE7H92eDeH/VBtFJA5MT4nRPDGg4JuzQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
     os: [linux]
 
   '@esbuild/linux-riscv64@0.21.5':
@@ -1262,16 +1430,10 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.17.19':
-    resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-
-  '@esbuild/linux-s390x@0.18.20':
-    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
+  '@esbuild/linux-riscv64@0.25.8':
+    resolution: {integrity: sha512-rAqDYFv3yzMrq7GIcen3XP7TUEG/4LK86LUPMIz6RT8A6pRIDn0sDcvjudVZBiiTcZCY9y2SgYX2lgK3AF+1eg==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
     os: [linux]
 
   '@esbuild/linux-s390x@0.21.5':
@@ -1280,16 +1442,10 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.17.19':
-    resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-
-  '@esbuild/linux-x64@0.18.20':
-    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
-    engines: {node: '>=12'}
-    cpu: [x64]
+  '@esbuild/linux-s390x@0.25.8':
+    resolution: {integrity: sha512-Xutvh6VjlbcHpsIIbwY8GVRbwoviWT19tFhgdA7DlenLGC/mbc3lBoVb7jxj9Z+eyGqvcnSyIltYUrkKzWqSvg==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
     os: [linux]
 
   '@esbuild/linux-x64@0.21.5':
@@ -1298,16 +1454,16 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-x64@0.17.19':
-    resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-x64@0.25.8':
+    resolution: {integrity: sha512-ASFQhgY4ElXh3nDcOMTkQero4b1lgubskNlhIfJrsH5OKZXDpUAKBlNS0Kx81jwOBp+HCeZqmoJuihTv57/jvQ==}
+    engines: {node: '>=18'}
     cpu: [x64]
-    os: [netbsd]
+    os: [linux]
 
-  '@esbuild/netbsd-x64@0.18.20':
-    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
-    engines: {node: '>=12'}
-    cpu: [x64]
+  '@esbuild/netbsd-arm64@0.25.8':
+    resolution: {integrity: sha512-d1KfruIeohqAi6SA+gENMuObDbEjn22olAR7egqnkCD9DGBG0wsEARotkLgXDu6c4ncgWTZJtN5vcgxzWRMzcw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
     os: [netbsd]
 
   '@esbuild/netbsd-x64@0.21.5':
@@ -1316,16 +1472,16 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-x64@0.17.19':
-    resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
-    engines: {node: '>=12'}
+  '@esbuild/netbsd-x64@0.25.8':
+    resolution: {integrity: sha512-nVDCkrvx2ua+XQNyfrujIG38+YGyuy2Ru9kKVNyh5jAys6n+l44tTtToqHjino2My8VAY6Lw9H7RI73XFi66Cg==}
+    engines: {node: '>=18'}
     cpu: [x64]
-    os: [openbsd]
+    os: [netbsd]
 
-  '@esbuild/openbsd-x64@0.18.20':
-    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
+  '@esbuild/openbsd-arm64@0.25.8':
+    resolution: {integrity: sha512-j8HgrDuSJFAujkivSMSfPQSAa5Fxbvk4rgNAS5i3K+r8s1X0p1uOO2Hl2xNsGFppOeHOLAVgYwDVlmxhq5h+SQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
     os: [openbsd]
 
   '@esbuild/openbsd-x64@0.21.5':
@@ -1334,17 +1490,17 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/sunos-x64@0.17.19':
-    resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
-    engines: {node: '>=12'}
+  '@esbuild/openbsd-x64@0.25.8':
+    resolution: {integrity: sha512-1h8MUAwa0VhNCDp6Af0HToI2TJFAn1uqT9Al6DJVzdIBAd21m/G0Yfc77KDM3uF3T/YaOgQq3qTJHPbTOInaIQ==}
+    engines: {node: '>=18'}
     cpu: [x64]
-    os: [sunos]
+    os: [openbsd]
 
-  '@esbuild/sunos-x64@0.18.20':
-    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
+  '@esbuild/openharmony-arm64@0.25.8':
+    resolution: {integrity: sha512-r2nVa5SIK9tSWd0kJd9HCffnDHKchTGikb//9c7HX+r+wHYCpQrSgxhlY6KWV1nFo1l4KFbsMlHk+L6fekLsUg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
 
   '@esbuild/sunos-x64@0.21.5':
     resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
@@ -1352,17 +1508,11 @@ packages:
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.17.19':
-    resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@esbuild/win32-arm64@0.18.20':
-    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
+  '@esbuild/sunos-x64@0.25.8':
+    resolution: {integrity: sha512-zUlaP2S12YhQ2UzUfcCuMDHQFJyKABkAjvO5YSndMiIkMimPmxA+BYSBikWgsRpvyxuRnow4nS5NPnf9fpv41w==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
 
   '@esbuild/win32-arm64@0.21.5':
     resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
@@ -1370,16 +1520,10 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.17.19':
-    resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@esbuild/win32-ia32@0.18.20':
-    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
+  '@esbuild/win32-arm64@0.25.8':
+    resolution: {integrity: sha512-YEGFFWESlPva8hGL+zvj2z/SaK+pH0SwOM0Nc/d+rVnW7GSTFlLBGzZkuSU9kFIGIo8q9X3ucpZhu8PDN5A2sQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
     os: [win32]
 
   '@esbuild/win32-ia32@0.21.5':
@@ -1388,80 +1532,125 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.17.19':
-    resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
+  '@esbuild/win32-ia32@0.25.8':
+    resolution: {integrity: sha512-hiGgGC6KZ5LZz58OL/+qVVoZiuZlUYlYHNAmczOm7bs2oE1XriPFi5ZHHrS8ACpV5EjySrnoCKmcbQMN+ojnHg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.18.20':
-    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.21.5':
-    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-x64@0.25.8':
+    resolution: {integrity: sha512-cn3Yr7+OaaZq1c+2pe+8yxC8E144SReCQjN6/2ynubzYjvyqZjTXfQJpAcQpsdJq3My7XADANiYGHoFC69pLQw==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.4.0':
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+  '@eslint-community/eslint-utils@4.7.0':
+    resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.10.1':
-    resolution: {integrity: sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==}
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
+  '@eslint/config-array@0.21.0':
+    resolution: {integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.3.1':
+    resolution: {integrity: sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.15.2':
+    resolution: {integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/eslintrc@2.1.4':
     resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@eslint/js@8.44.0':
-    resolution: {integrity: sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==}
+  '@eslint/eslintrc@3.3.1':
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@8.57.1':
+    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@faker-js/faker@8.2.0':
-    resolution: {integrity: sha512-VacmzZqVxdWdf9y64lDOMZNDMM/FQdtM9IsaOPKOm2suYwEatb8VkdHqOzXcDnZbk7YDE2BmsJmy/2Hmkn563g==}
+  '@eslint/js@9.33.0':
+    resolution: {integrity: sha512-5K1/mKhWaMfreBGJTwval43JJmkip0RmM+3+IuqupeSKNC/Th2Kc7ucaq5ovTSra/OOKB9c58CGSz3QMVbWt0A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.6':
+    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.3.5':
+    resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@faker-js/faker@8.4.1':
+    resolution: {integrity: sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'}
 
   '@fal-works/esbuild-plugin-global-externals@2.1.2':
     resolution: {integrity: sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==}
 
-  '@floating-ui/core@1.6.2':
-    resolution: {integrity: sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==}
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
 
-  '@floating-ui/dom@1.6.5':
-    resolution: {integrity: sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==}
+  '@floating-ui/dom@1.7.3':
+    resolution: {integrity: sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==}
 
-  '@floating-ui/react-dom@2.1.0':
-    resolution: {integrity: sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==}
+  '@floating-ui/react-dom@2.1.5':
+    resolution: {integrity: sha512-HDO/1/1oH9fjj4eLgegrlH3dklZpHtUYYFiVwMUwfGvk9jWDRWqkklA2/NFScknrcNSspbV868WjXORvreDX+Q==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  '@floating-ui/utils@0.2.2':
-    resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==}
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@formatjs/intl-localematcher@0.6.1':
+    resolution: {integrity: sha512-ePEgLgVCqi2BBFnTMWPfIghu6FkbZnnBVhO2sSxvLfrdFw7wCHAHiDoM2h4NRgjbaY7+B7HgOLZGkK187pZTZg==}
 
-  '@grpc/grpc-js@1.10.8':
-    resolution: {integrity: sha512-vYVqYzHicDqyKB+NQhAc54I1QWCBLCrYG6unqOIcBTHx+7x8C9lcoLj3KVJXs2VB4lUbpWY+Kk9NipcbXYWmvg==}
+  '@grpc/grpc-js@1.13.4':
+    resolution: {integrity: sha512-GsFaMXCkMqkKIvwCQjCrwH+GHbPKBjhwo/8ZuUkWHqbI73Kky9I+pQltrlT0+MWpedCoosda53lgjYfyEPgxBg==}
     engines: {node: '>=12.10.0'}
 
-  '@grpc/proto-loader@0.7.13':
-    resolution: {integrity: sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==}
+  '@grpc/proto-loader@0.7.15':
+    resolution: {integrity: sha512-tMXdRCfYVixjuFK+Hk0Q1s38gV9zDiDJfWL3h1rv4Qc39oILCu1TRTDt7+fGUI8K4G1Fj125Hx/ru3azECWTyQ==}
     engines: {node: '>=6'}
     hasBin: true
 
-  '@hookform/resolvers@3.1.0':
-    resolution: {integrity: sha512-z0A8K+Nxq+f83Whm/ajlwE6VtQlp/yPHZnXw7XWVPIGm1Vx0QV8KThU3BpbBRfAZ7/dYqCKKBNnQh85BkmBKkA==}
+  '@hapi/hoek@9.3.0':
+    resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==}
+
+  '@hapi/topo@5.1.0':
+    resolution: {integrity: sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==}
+
+  '@hookform/resolvers@3.10.0':
+    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
     peerDependencies:
       react-hook-form: ^7.0.0
 
-  '@humanwhocodes/config-array@0.11.14':
-    resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.6':
+    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/config-array@0.13.0':
+    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
     engines: {node: '>=10.10.0'}
     deprecated: Use @eslint/config-array instead
 
@@ -1473,6 +1662,14 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
+  '@humanwhocodes/retry@0.3.1':
+    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
+    engines: {node: '>=18.18'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
   '@ianvs/prettier-plugin-sort-imports@3.7.2':
     resolution: {integrity: sha512-bVckKToJM8XV2wTOG1VpeXrSmfAG49esVrikbxeFbY51RJdNke9AdMANJtGuACB59uo+pGlz0wBdWFrRzWyO1A==}
     peerDependencies:
@@ -1482,140 +1679,310 @@ packages:
       '@vue/compiler-sfc':
         optional: true
 
-  '@img/sharp-darwin-arm64@0.33.4':
-    resolution: {integrity: sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==}
-    engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@ianvs/prettier-plugin-sort-imports@4.6.1':
+    resolution: {integrity: sha512-Q0gujs/g6tw1uOGd1bTVLGDzAwb/UwrCehhPCQevTCYDkho8+eQSOhA0zcy9AM0XnXM1ChBWsZeE4P7Nym0pyw==}
+    peerDependencies:
+      '@prettier/plugin-oxc': ^0.0.4
+      '@vue/compiler-sfc': 2.7.x || 3.x
+      content-tag: ^4.0.0
+      prettier: 2 || 3 || ^4.0.0-0
+      prettier-plugin-ember-template-tag: ^2.1.0
+    peerDependenciesMeta:
+      '@prettier/plugin-oxc':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      content-tag:
+        optional: true
+      prettier-plugin-ember-template-tag:
+        optional: true
+
+  '@img/sharp-darwin-arm64@0.33.5':
+    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-darwin-x64@0.33.4':
-    resolution: {integrity: sha512-0l7yRObwtTi82Z6ebVI2PnHT8EB2NxBgpK2MiKJZJ7cz32R4lxd001ecMhzzsZig3Yv9oclvqqdV93jo9hy+Dw==}
-    engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-darwin-arm64@0.34.3':
+    resolution: {integrity: sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.33.5':
+    resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.3':
+    resolution: {integrity: sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-arm64@1.0.2':
-    resolution: {integrity: sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==}
-    engines: {macos: '>=11', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.0':
+    resolution: {integrity: sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==}
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-x64@1.0.2':
-    resolution: {integrity: sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==}
-    engines: {macos: '>=10.13', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.0':
+    resolution: {integrity: sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-linux-arm64@1.0.2':
-    resolution: {integrity: sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==}
-    engines: {glibc: '>=2.26', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-libvips-linux-arm@1.0.2':
-    resolution: {integrity: sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==}
-    engines: {glibc: '>=2.28', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linux-arm64@1.2.0':
+    resolution: {integrity: sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.2.0':
+    resolution: {integrity: sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==}
     cpu: [arm]
     os: [linux]
 
-  '@img/sharp-libvips-linux-s390x@1.0.2':
-    resolution: {integrity: sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==}
-    engines: {glibc: '>=2.28', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linux-ppc64@1.2.0':
+    resolution: {integrity: sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
     cpu: [s390x]
     os: [linux]
 
-  '@img/sharp-libvips-linux-x64@1.0.2':
-    resolution: {integrity: sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==}
-    engines: {glibc: '>=2.26', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
-    cpu: [x64]
+  '@img/sharp-libvips-linux-s390x@1.2.0':
+    resolution: {integrity: sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==}
+    cpu: [s390x]
     os: [linux]
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.0.2':
-    resolution: {integrity: sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==}
-    engines: {musl: '>=1.2.2', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
-    cpu: [arm64]
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
+    cpu: [x64]
     os: [linux]
 
-  '@img/sharp-libvips-linuxmusl-x64@1.0.2':
-    resolution: {integrity: sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==}
-    engines: {musl: '>=1.2.2', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linux-x64@1.2.0':
+    resolution: {integrity: sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==}
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-linux-arm64@0.33.4':
-    resolution: {integrity: sha512-2800clwVg1ZQtxwSoTlHvtm9ObgAax7V6MTAB/hDT945Tfyy3hVkmiHpeLPCKYqYR1Gcmv1uDZ3a4OFwkdBL7Q==}
-    engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-linux-arm@0.33.4':
-    resolution: {integrity: sha512-RUgBD1c0+gCYZGCCe6mMdTiOFS0Zc/XrN0fYd6hISIKcDUbAW5NtSQW9g/powkrXYm6Vzwd6y+fqmExDuCdHNQ==}
-    engines: {glibc: '>=2.28', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
-    cpu: [arm]
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
+    resolution: {integrity: sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==}
+    cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-linux-s390x@0.33.4':
-    resolution: {integrity: sha512-h3RAL3siQoyzSoH36tUeS0PDmb5wINKGYzcLB5C6DIiAn2F3udeFAum+gj8IbA/82+8RGCTn7XW8WTFnqag4tQ==}
-    engines: {glibc: '>=2.31', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
-    cpu: [s390x]
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
+    cpu: [x64]
     os: [linux]
 
-  '@img/sharp-linux-x64@0.33.4':
-    resolution: {integrity: sha512-GoR++s0XW9DGVi8SUGQ/U4AeIzLdNjHka6jidVwapQ/JebGVQIpi52OdyxCNVRE++n1FCLzjDovJNozif7w/Aw==}
-    engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-libvips-linuxmusl-x64@1.2.0':
+    resolution: {integrity: sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==}
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-linuxmusl-arm64@0.33.4':
-    resolution: {integrity: sha512-nhr1yC3BlVrKDTl6cO12gTpXMl4ITBUZieehFvMntlCXFzH2bvKG76tBL2Y/OqhupZt81pR7R+Q5YhJxW0rGgQ==}
-    engines: {musl: '>=1.2.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-linux-arm64@0.33.5':
+    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-linuxmusl-x64@0.33.4':
-    resolution: {integrity: sha512-uCPTku0zwqDmZEOi4ILyGdmW76tH7dm8kKlOIV1XC5cLyJ71ENAAqarOHQh0RLfpIpbV5KOpXzdU6XkJtS0daw==}
-    engines: {musl: '>=1.2.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
-    cpu: [x64]
+  '@img/sharp-linux-arm64@0.34.3':
+    resolution: {integrity: sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-wasm32@0.33.4':
-    resolution: {integrity: sha512-Bmmauh4sXUsUqkleQahpdNXKvo+wa1V9KhT2pDA4VJGKwnKMJXiSTGphn0gnJrlooda0QxCtXc6RX1XAU6hMnQ==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
-    cpu: [wasm32]
+  '@img/sharp-linux-arm@0.33.5':
+    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.34.3':
+    resolution: {integrity: sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-ppc64@0.34.3':
+    resolution: {integrity: sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.33.5':
+    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.34.3':
+    resolution: {integrity: sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.33.5':
+    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.34.3':
+    resolution: {integrity: sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.34.3':
+    resolution: {integrity: sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.34.3':
+    resolution: {integrity: sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
 
-  '@img/sharp-win32-ia32@0.33.4':
-    resolution: {integrity: sha512-99SJ91XzUhYHbx7uhK3+9Lf7+LjwMGQZMDlO/E/YVJ7Nc3lyDFZPGhjwiYdctoH2BOzW9+TnfqcaMKt0jHLdqw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-wasm32@0.33.5':
+    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-wasm32@0.34.3':
+    resolution: {integrity: sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.3':
+    resolution: {integrity: sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.33.5':
+    resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.3':
+    resolution: {integrity: sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ia32]
     os: [win32]
 
-  '@img/sharp-win32-x64@0.33.4':
-    resolution: {integrity: sha512-3QLocdTRVIrFNye5YocZl+KKpYKP+fksi1QhmOArgx7GyhIbQp/WrJRu176jm8IxromS7RIkzMiMINVdBtC8Aw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
+  '@img/sharp-win32-x64@0.33.5':
+    resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.3':
+    resolution: {integrity: sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [win32]
 
+  '@inquirer/confirm@5.1.14':
+    resolution: {integrity: sha512-5yR4IBfe0kXe59r1YCTG8WXkUbl7Z35HK87Sw+WUyGD8wNUx7JvY7laahzeytyE1oLn74bQnL7hstctQxisQ8Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@10.1.15':
+    resolution: {integrity: sha512-8xrp836RZvKkpNbVvgWUlxjT4CraKk2q+I3Ksy+seI2zkcE+y6wNs1BVhgcv8VyImFecUhdQrYLdW32pAjwBdA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@1.0.13':
+    resolution: {integrity: sha512-lGPVU3yO9ZNqA7vTYz26jny41lE7yoQansmqdMLBEfqaGsmdg7V3W9mK9Pvb5IL4EVZ9GnSDGMO/cJXud5dMaw==}
+    engines: {node: '>=18'}
+
+  '@inquirer/type@3.0.8':
+    resolution: {integrity: sha512-lg9Whz8onIHRthWaN1Q9EGLa/0LFJjyM8mEUbL1eTi6yMGvBf8gvyDLtxSXztQsxMvhxxNpJYrwa1YHdq+w4Jw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@isaacs/balanced-match@4.0.1':
+    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/brace-expansion@5.0.0':
+    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
+    engines: {node: 20 || >=22}
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
-    engines: {node: '>=6.0.0'}
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
+  '@jridgewell/gen-mapping@0.3.12':
+    resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
 
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/set-array@1.2.1':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/sourcemap-codec@1.4.15':
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+  '@jridgewell/sourcemap-codec@1.5.4':
+    resolution: {integrity: sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==}
 
-  '@jridgewell/trace-mapping@0.3.25':
-    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+  '@jridgewell/trace-mapping@0.3.29':
+    resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
 
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
@@ -1633,14 +2000,32 @@ packages:
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/json-pack@1.0.4':
-    resolution: {integrity: sha512-aOcSN4MeAtFROysrbqG137b7gaDDSmVrl5mpo6sT/w+kcXpWnzhMjmY/Fh/sDx26NBxyIE7MB1seqLeCAzy9Sg==}
+  '@jsonjoy.com/buffers@1.0.0':
+    resolution: {integrity: sha512-NDigYR3PHqCnQLXYyoLbnEdzMMvzeiCWo1KOut7Q0CoIqg9tUAPKJ1iq/2nFhc5kZtexzutNY0LFjdwWL3Dw3Q==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/codegen@1.0.0':
+    resolution: {integrity: sha512-E8Oy+08cmCf0EK/NMxpaJZmOxPqM+6iSe2S4nlSBrPZOORoDJILxtbSUEDKQyTamm/BVAhIGllOBNU79/dwf0g==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/json-pack@1.10.0':
+    resolution: {integrity: sha512-PMOU9Sh0baiLZEDewwR/YAHJBV2D8pPIzcFQSU7HQl/k/HNCDyVfO1OvkyDwBGp4dPtvZc7Hl9FFYWwTP1CbZw==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/json-pointer@1.0.1':
+    resolution: {integrity: sha512-tJpwQfuBuxqZlyoJOSZcqf7OUmiYQ6MiPNmOv4KbZdXE/DdvBSSAwhos0zIlJU/AXxC8XpuO8p08bh2fIl+RKA==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/util@1.2.0':
-    resolution: {integrity: sha512-4B8B+3vFsY4eo33DMKyJPlQ3sBMpPFUZK2dr3O3rXrOGKKbYG44J0XSFkDo1VOQiri5HFEhIeVvItjR2xcazmg==}
+  '@jsonjoy.com/util@1.9.0':
+    resolution: {integrity: sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
@@ -1653,46 +2038,51 @@ packages:
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
-  '@manypkg/find-root@2.2.1':
-    resolution: {integrity: sha512-34NlypD5mmTY65cFAK7QPgY5Tzt0qXR4ZRXdg97xAlkiLuwXUPBEXy5Hsqzd+7S2acsLxUz6Cs50rlDZQr4xUA==}
+  '@manypkg/find-root@2.2.3':
+    resolution: {integrity: sha512-jtEZKczWTueJYHjGpxU3KJQ08Gsrf4r6Q2GjmPp/RGk5leeYAA1eyDADSAF+KVCsQ6EwZd/FMcOFCoMhtqdCtQ==}
     engines: {node: '>=14.18.0'}
 
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
-  '@manypkg/get-packages@2.2.1':
-    resolution: {integrity: sha512-TrJd86paBkKEx6InhObcUhuoJNcATlbO6+s1dQdLd4+Y1SLDKJUAMhU46kTZ1SOFbegTuhDbIF3j+Jy564BERA==}
+  '@manypkg/get-packages@2.2.2':
+    resolution: {integrity: sha512-3+Zd8kLZmsyJFmWTBtY0MAuCErI7yKB2cjMBlujvSVKZ2R/BMXi0kjCXu2dtRlSq/ML86t1FkumT0yreQ3n8OQ==}
     engines: {node: '>=14.18.0'}
 
-  '@manypkg/tools@1.1.0':
-    resolution: {integrity: sha512-SkAyKAByB9l93Slyg8AUHGuM2kjvWioUTCckT/03J09jYnfEzMO/wSXmEhnKGYs6qx9De8TH4yJCl0Y9lRgnyQ==}
+  '@manypkg/tools@1.1.2':
+    resolution: {integrity: sha512-3lBouSuF7CqlseLB+FKES0K4FQ02JrbEoRtJhxnsyB1s5v4AP03gsoohN8jp7DcOImhaR9scYdztq3/sLfk/qQ==}
     engines: {node: '>=14.18.0'}
 
-  '@mdx-js/esbuild@3.0.1':
-    resolution: {integrity: sha512-+KZbCKcRjFtRD6qzD+c70Vq/VPVt5LHFsOshNcsdcONkaLTCSjmM7/uj71i3BcP+170f+P4DwVEMtqR/k0t5aw==}
+  '@mdx-js/esbuild@3.1.0':
+    resolution: {integrity: sha512-Jk42xUb1SEJxh6n2GBAtJjQISFIZccjz8XVEsHVhrlvZJAJziIxR9KyaFF6nTeTB/jCAFQGDgO7+oMRH/ApRsg==}
     peerDependencies:
       esbuild: '>=0.14.0'
 
-  '@mdx-js/mdx@3.0.1':
-    resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==}
+  '@mdx-js/mdx@3.1.0':
+    resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==}
+
+  '@modelcontextprotocol/sdk@1.17.2':
+    resolution: {integrity: sha512-EFLRNXR/ixpXQWu6/3Cu30ndDFIFNaqUXcTqsGebujeMan9FzhAaFFswLRiFj61rgygDRr8WO1N+UijjgRxX9g==}
+    engines: {node: '>=18'}
+
+  '@mswjs/interceptors@0.39.5':
+    resolution: {integrity: sha512-B9nHSJYtsv79uo7QdkZ/b/WoKm20IkVSmTc/WCKarmDtFwM0dRx2ouEniqwNkzCSLn3fydzKmnMzjtfdOWt3VQ==}
+    engines: {node: '>=18'}
 
-  '@next/env@14.1.3':
-    resolution: {integrity: sha512-VhgXTvrgeBRxNPjyfBsDIMvgsKDxjlpw4IAUsHCX8Gjl1vtHUYRT3+xfQ/wwvLPDd/6kqfLqk9Pt4+7gysuCKQ==}
+  '@napi-rs/wasm-runtime@0.2.12':
+    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
   '@next/env@14.3.0-canary.43':
     resolution: {integrity: sha512-SOxSQQX1uW5uYJGoH2hXT0rtP0WRpffAgd5P/zd7dNjXc/3jNMOgHWe6jhzBIz+VmHKqyT5oLT14XsYqOeR2VQ==}
 
-  '@next/eslint-plugin-next@13.0.0':
-    resolution: {integrity: sha512-z+gnX4Zizatqatc6f4CQrcC9oN8Us3Vrq/OLyc98h7K/eWctrnV91zFZodmJHUjx0cITY8uYM7LXD7IdYkg3kg==}
+  '@next/env@15.3.1':
+    resolution: {integrity: sha512-cwK27QdzrMblHSn9DZRV+DQscHXRuJv6MydlJRpFSqJWZrTYMLzKDeyueJNN9MGd8NNiUKzDQADAf+dMLXX7YQ==}
 
   '@next/eslint-plugin-next@13.3.0':
     resolution: {integrity: sha512-wuGN5qSEjSgcq9fVkH0Y/qIPFjnZtW3ZPwfjJOn7l/rrf6y8J24h/lo61kwqunTyzZJm/ETGfGVU9PUs8cnzEA==}
 
-  '@next/swc-darwin-arm64@14.1.3':
-    resolution: {integrity: sha512-LALu0yIBPRiG9ANrD5ncB3pjpO0Gli9ZLhxdOu6ZUNf3x1r3ea1rd9Q+4xxUkGrUXLqKVK9/lDkpYIJaCJ6AHQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
+  '@next/eslint-plugin-next@15.3.1':
+    resolution: {integrity: sha512-oEs4dsfM6iyER3jTzMm4kDSbrQJq8wZw5fmT6fg2V3SMo+kgG+cShzLfEV20senZzv8VF+puNLheiGPlBGsv2A==}
 
   '@next/swc-darwin-arm64@14.3.0-canary.43':
     resolution: {integrity: sha512-RWS1ynwh76JAxxcmOdwr+yQUKnjeB4YNx0lCK9DTU3wB5B9H8dDZENjf/Gax8fAD530+gnL86iZItH+70EXgUw==}
@@ -1700,10 +2090,10 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@14.1.3':
-    resolution: {integrity: sha512-E/9WQeXxkqw2dfcn5UcjApFgUq73jqNKaE5bysDm58hEUdUGedVrnRhblhJM7HbCZNhtVl0j+6TXsK0PuzXTCg==}
+  '@next/swc-darwin-arm64@15.3.1':
+    resolution: {integrity: sha512-hjDw4f4/nla+6wysBL07z52Gs55Gttp5Bsk5/8AncQLJoisvTBP0pRIBK/B16/KqQyH+uN4Ww8KkcAqJODYH3w==}
     engines: {node: '>= 10'}
-    cpu: [x64]
+    cpu: [arm64]
     os: [darwin]
 
   '@next/swc-darwin-x64@14.3.0-canary.43':
@@ -1712,11 +2102,11 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@14.1.3':
-    resolution: {integrity: sha512-USArX9B+3rZSXYLFvgy0NVWQgqh6LHWDmMt38O4lmiJNQcwazeI6xRvSsliDLKt+78KChVacNiwvOMbl6g6BBw==}
+  '@next/swc-darwin-x64@15.3.1':
+    resolution: {integrity: sha512-q+aw+cJ2ooVYdCEqZVk+T4Ni10jF6Fo5DfpEV51OupMaV5XL6pf3GCzrk6kSSZBsMKZtVC1Zm/xaNBFpA6bJ2g==}
     engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
+    cpu: [x64]
+    os: [darwin]
 
   '@next/swc-linux-arm64-gnu@14.3.0-canary.43':
     resolution: {integrity: sha512-Sv8l5CnlQjvHTQ8tBnC29LHq5ouoRfSjll0IjvITQrJUjtOrPPqpwaxdwmzkZ3GGM4yLD7hXGnEHPMVk3erxOA==}
@@ -1724,8 +2114,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@14.1.3':
-    resolution: {integrity: sha512-esk1RkRBLSIEp1qaQXv1+s6ZdYzuVCnDAZySpa62iFTMGTisCyNQmqyCTL9P+cLJ4N9FKCI3ojtSfsyPHJDQNw==}
+  '@next/swc-linux-arm64-gnu@15.3.1':
+    resolution: {integrity: sha512-wBQ+jGUI3N0QZyWmmvRHjXjTWFy8o+zPFLSOyAyGFI94oJi+kK/LIZFJXeykvgXUk1NLDAEFDZw/NVINhdk9FQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -1736,10 +2126,10 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@14.1.3':
-    resolution: {integrity: sha512-8uOgRlYEYiKo0L8YGeS+3TudHVDWDjPVDUcST+z+dUzgBbTEwSSIaSgF/vkcC1T/iwl4QX9iuUyUdQEl0Kxalg==}
+  '@next/swc-linux-arm64-musl@15.3.1':
+    resolution: {integrity: sha512-IIxXEXRti/AulO9lWRHiCpUUR8AR/ZYLPALgiIg/9ENzMzLn3l0NSxVdva7R/VDcuSEBo0eGVCe3evSIHNz0Hg==}
     engines: {node: '>= 10'}
-    cpu: [x64]
+    cpu: [arm64]
     os: [linux]
 
   '@next/swc-linux-x64-gnu@14.3.0-canary.43':
@@ -1748,8 +2138,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@14.1.3':
-    resolution: {integrity: sha512-DX2zqz05ziElLoxskgHasaJBREC5Y9TJcbR2LYqu4r7naff25B4iXkfXWfcp69uD75/0URmmoSgT8JclJtrBoQ==}
+  '@next/swc-linux-x64-gnu@15.3.1':
+    resolution: {integrity: sha512-bfI4AMhySJbyXQIKH5rmLJ5/BP7bPwuxauTvVEiJ/ADoddaA9fgyNNCcsbu9SlqfHDoZmfI6g2EjzLwbsVTr5A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -1760,11 +2150,11 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@14.1.3':
-    resolution: {integrity: sha512-HjssFsCdsD4GHstXSQxsi2l70F/5FsRTRQp8xNgmQs15SxUfUJRvSI9qKny/jLkY3gLgiCR3+6A7wzzK0DBlfA==}
+  '@next/swc-linux-x64-musl@15.3.1':
+    resolution: {integrity: sha512-FeAbR7FYMWR+Z+M5iSGytVryKHiAsc0x3Nc3J+FD5NVbD5Mqz7fTSy8CYliXinn7T26nDMbpExRUI/4ekTvoiA==}
     engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
+    cpu: [x64]
+    os: [linux]
 
   '@next/swc-win32-arm64-msvc@14.3.0-canary.43':
     resolution: {integrity: sha512-KPRF9mFDAdUUB9r0qd/4wGwZqwxgJxrFf2Xe7FSwSwUL9ome1FynGOqRqg5onqiOUjXftW5BNxnN/Drz/0F0/Q==}
@@ -1772,10 +2162,10 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-ia32-msvc@14.1.3':
-    resolution: {integrity: sha512-DRuxD5axfDM1/Ue4VahwSxl1O5rn61hX8/sF0HY8y0iCbpqdxw3rB3QasdHn/LJ6Wb2y5DoWzXcz3L1Cr+Thrw==}
+  '@next/swc-win32-arm64-msvc@15.3.1':
+    resolution: {integrity: sha512-yP7FueWjphQEPpJQ2oKmshk/ppOt+0/bB8JC8svPUZNy0Pi3KbPx2Llkzv1p8CoQa+D2wknINlJpHf3vtChVBw==}
     engines: {node: '>= 10'}
-    cpu: [ia32]
+    cpu: [arm64]
     os: [win32]
 
   '@next/swc-win32-ia32-msvc@14.3.0-canary.43':
@@ -1784,18 +2174,30 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@14.1.3':
-    resolution: {integrity: sha512-uC2DaDoWH7h1P/aJ4Fok3Xiw6P0Lo4ez7NbowW2VGNXw/Xv6tOuLUcxhBYZxsSUJtpeknCi8/fvnSpyCFp4Rcg==}
+  '@next/swc-win32-x64-msvc@14.3.0-canary.43':
+    resolution: {integrity: sha512-m/SWNFC6usuGsfZztkJWpUd/myK3UHr6lhqwsaV5bMw+1itNnPIj37RbFpL/N0tWQRYahWIqep8EkZOdtKVjqQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@14.3.0-canary.43':
-    resolution: {integrity: sha512-m/SWNFC6usuGsfZztkJWpUd/myK3UHr6lhqwsaV5bMw+1itNnPIj37RbFpL/N0tWQRYahWIqep8EkZOdtKVjqQ==}
+  '@next/swc-win32-x64-msvc@15.3.1':
+    resolution: {integrity: sha512-3PMvF2zRJAifcRNni9uMk/gulWfWS+qVI/pagd+4yLF5bcXPZPPH2xlYRYOsUjmCJOXSTAC2PjRzbhsRzR2fDQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
+  '@noble/ciphers@1.3.0':
+    resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/curves@1.9.6':
+    resolution: {integrity: sha512-GIKz/j99FRthB8icyJQA51E8Uk5hXmdyThjgQXRKiv9h0zeRlzSCLIzFw6K1LotZ3XuB7yzlf76qk7uBmTdFqA==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/hashes@1.8.0':
+    resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
+    engines: {node: ^14.21.3 || >=16}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1808,19 +2210,32 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@nolyfill/is-core-module@1.0.39':
+    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
+    engines: {node: '>=12.4.0'}
+
+  '@open-draft/deferred-promise@2.2.0':
+    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
+
+  '@open-draft/logger@0.3.0':
+    resolution: {integrity: sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==}
+
+  '@open-draft/until@2.1.0':
+    resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
+
   '@opentelemetry/api-logs@0.51.1':
     resolution: {integrity: sha512-E3skn949Pk1z2XtXu/lxf6QAZpawuTM/IUEXcAzpiUkTd73Hmvw26FiN3cJuTmkpM5hZzHwkomVdtrh/n/zzwA==}
     engines: {node: '>=14'}
 
-  '@opentelemetry/api@1.8.0':
-    resolution: {integrity: sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==}
+  '@opentelemetry/api@1.9.0':
+    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/context-async-hooks@1.24.1':
-    resolution: {integrity: sha512-R5r6DO4kgEOVBxFXhXjwospLQkv+sYxwCfjvoZBe7Zm6KKXAV9kDSJhi/D1BweowdZmO+sdbENLs374gER8hpQ==}
+  '@opentelemetry/context-async-hooks@1.30.1':
+    resolution: {integrity: sha512-s5vvxXPVdjqS3kTLKMeBMvop9hbWkwzBpu+mUO2M7sZtlkyDJGwFe33wRKnbaYDo8ExRVBIIdwIGrqpxHuKttA==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.9.0'
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
   '@opentelemetry/core@1.24.1':
     resolution: {integrity: sha512-wMSGfsdmibI88K9wB498zXY04yThPexo8jvwNNlm542HZB7XrrMRBbAyKJqG8qDRJwIBdBrPMi4V9ZPW/sqrcg==}
@@ -1828,6 +2243,12 @@ packages:
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.9.0'
 
+  '@opentelemetry/core@1.30.1':
+    resolution: {integrity: sha512-OOCM2C/QIURhJMuKaekP3TRBxBKxG/TWWA0TL2J6nXUtDnuCtccy49LUJF8xPFXMX+0LMcxFpCo8M9cGY1W6rQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
+
   '@opentelemetry/exporter-trace-otlp-grpc@0.51.1':
     resolution: {integrity: sha512-P9+Hkszih95ITvldGZ+kXvj9HpD1QfS+PwooyHK72GYA+Bgm+yUSAsDkUkDms8+s9HW6poxURv3LcjaMuBBpVQ==}
     engines: {node: '>=14'}
@@ -1852,17 +2273,17 @@ packages:
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.9.0'
 
-  '@opentelemetry/propagator-b3@1.24.1':
-    resolution: {integrity: sha512-nda97ZwhpZKyUJTXqQuKzNhPMUgMLunbbGWn8kroBwegn+nh6OhtyGkrVQsQLNdVKJl0KeB5z0ZgeWszrYhwFw==}
+  '@opentelemetry/propagator-b3@1.30.1':
+    resolution: {integrity: sha512-oATwWWDIJzybAZ4pO76ATN5N6FFbOA1otibAVlS8v90B4S1wClnhRUk7K+2CHAwN1JKYuj4jh/lpCEG5BAqFuQ==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.9.0'
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/propagator-jaeger@1.24.1':
-    resolution: {integrity: sha512-7bRBJn3FG1l195A1m+xXRHvgzAOBsfmRi9uZ5Da18oTh7BLmNDiA8+kpk51FpTsU1PCikPVpRDNPhKVB6lyzZg==}
+  '@opentelemetry/propagator-jaeger@1.30.1':
+    resolution: {integrity: sha512-Pj/BfnYEKIOImirH76M4hDaBSx6HyZ2CXUqk+Kj02m6BB80c/yo4BdWkn/1gDFfU+YPY+bPR2U0DKBfdxCKwmg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.9.0'
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
   '@opentelemetry/resources@1.24.1':
     resolution: {integrity: sha512-cyv0MwAaPF7O86x5hk3NNgenMObeejZFLJJDVuSeSMIsknlsj3oOZzRv3qSzlwYomXsICfBeFFlxwHQte5mGXQ==}
@@ -1870,6 +2291,12 @@ packages:
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.9.0'
 
+  '@opentelemetry/resources@1.30.1':
+    resolution: {integrity: sha512-5UxZqiAgLYGFjS4s9qm5mBVo433u+dSPUFWVWXmLAD4wB65oMCoXaJP1KJa9DIYYMeHu3z4BZcStG3LC593cWA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
+
   '@opentelemetry/sdk-logs@0.51.1':
     resolution: {integrity: sha512-ULQQtl82b673PpZc5/0EtH4V+BrwVOgKJZEB7tYZnGTG3I98tQVk89S9/JSixomDr++F4ih+LSJTCqIKBz+MQQ==}
     engines: {node: '>=14'}
@@ -1889,16 +2316,74 @@ packages:
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.9.0'
 
-  '@opentelemetry/sdk-trace-node@1.24.1':
-    resolution: {integrity: sha512-/FZX8uWaGIAwsDhqI8VvQ+qWtfMNlXjaFYGc+vmxgdRFppCSSIRwrPyIhJO1qx61okyYhoyxVEZAfoiNxrfJCg==}
+  '@opentelemetry/sdk-trace-base@1.30.1':
+    resolution: {integrity: sha512-jVPgBbH1gCy2Lb7X0AVQ8XAfgg0pJ4nvl8/IiQA6nxOsPvS+0zMJaFSs2ltXe0J6C8dqjcnpyqINDJmU30+uOg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.9.0'
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
+
+  '@opentelemetry/sdk-trace-node@1.30.1':
+    resolution: {integrity: sha512-cBjYOINt1JxXdpw1e5MlHmFRc5fgj4GW/86vsKFxJCJ8AL4PdVtYH41gWwl4qd4uQjqEL1oJVrXkSy5cnduAnQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
   '@opentelemetry/semantic-conventions@1.24.1':
     resolution: {integrity: sha512-VkliWlS4/+GHLLW7J/rVBA00uXus1SWvwFvcUDxDwmFxYfg/2VI6ekwdXS28cjI8Qz2ky2BzG8OUHo+WeYIWqw==}
     engines: {node: '>=14'}
 
+  '@opentelemetry/semantic-conventions@1.28.0':
+    resolution: {integrity: sha512-lp4qAiMTD4sNWW4DbKLBkfiMZ4jbAboJIGOQr5DvciMRI494OapieI9qiODpOt0XBr1LjIDy1xAGAnVs5supTA==}
+    engines: {node: '>=14'}
+
+  '@opentelemetry/semantic-conventions@1.36.0':
+    resolution: {integrity: sha512-TtxJSRD8Ohxp6bKkhrm27JRHAxPczQA7idtcTOMYI+wQRRrfgqxHv1cFbCApcSnNjtXkmzFozn6jQtFrOmbjPQ==}
+    engines: {node: '>=14'}
+
+  '@orama/orama@3.1.11':
+    resolution: {integrity: sha512-Szki0cgFiXE5F9RLx2lUyEtJllnuCSQ4B8RLDwIjXkVit6qZjoDAxH+xhJs29MjKLDz0tbPLdKFa6QrQ/qoGGA==}
+    engines: {node: '>= 20.0.0'}
+
+  '@oxc-transform/binding-darwin-arm64@0.53.0':
+    resolution: {integrity: sha512-QG1djnqQ+EywamRwFMRYogmbF4aL+Fmw/tDKuZ4cpWpOBPaxgTNryfYS1WwCARlZLmLzDEZr0YkYSQ7Rmjyf1Q==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-transform/binding-darwin-x64@0.53.0':
+    resolution: {integrity: sha512-rc6wBTnmeK/ZiENI7QvZBmrgFArAkO8cBpiKrYuov3+DqSbOLotoaYqXxxdjoiJ/EhPl9MBd9146uM99OKQYIA==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-transform/binding-linux-arm64-gnu@0.53.0':
+    resolution: {integrity: sha512-BgY+h7bQsGP6lsQe4s7stz6SpbfijhiZGx/lPoTYn9wkLonqBVk2bGkPkyZvzd3Sr8aw2taOE6ycb146scyniQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-arm64-musl@0.53.0':
+    resolution: {integrity: sha512-4AnomoFIEqS442s9KJbZRqo+dR9sM0es9YY9eFh+53btN9aKHW+u08Yvesb4k9nmwB5qDZbfqP8H+SsHyixFlg==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-x64-gnu@0.53.0':
+    resolution: {integrity: sha512-iWFm/ZNEYF5IKN3/gcYaMJUI1yc5iJ2vQ9fVxYAFT6GglnBqXXxqwazlL5QkiAwDOzVwDUctAIZWgxse1vTm2A==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-x64-musl@0.53.0':
+    resolution: {integrity: sha512-fM9tdlBPY55T1s+qdg6NwDLaygXkvxKLfIqojw/pM+pErfnTJXa3MYWIDWEXHv3RcEypjaEMMo3BIe7E2jBDdg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-transform/binding-win32-arm64-msvc@0.53.0':
+    resolution: {integrity: sha512-Afh37KNowRgdDtV6EL4IxWBv/l5/XLctXADOCAvYNUsiUwQ2vNKiNwx+k8QzMZW59G5JEIN8yroMd/qnQSpdJw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-transform/binding-win32-x64-msvc@0.53.0':
+    resolution: {integrity: sha512-aYUx/uFCIdQJVOqEpV3AjOSBlZKLSFtws4B/iJpyJ6pKiLBQsH/sR4Y4oKm2rkaqAky+0ekP6gbjIgrJkCZR0Q==}
+    cpu: [x64]
+    os: [win32]
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1933,143 +2418,136 @@ packages:
   '@protobufjs/utf8@1.1.0':
     resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
 
-  '@radix-ui/number@1.0.1':
-    resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
+  '@puppeteer/browsers@2.6.1':
+    resolution: {integrity: sha512-aBSREisdsGH890S2rQqK82qmQYU3uFpSH8wcZWHgHzl3LfzsxAKbLNiAG9mO8v1Y0UICBeClICxPJvyr0rcuxg==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  '@radix-ui/primitive@1.0.1':
-    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
 
-  '@radix-ui/primitive@1.1.0':
-    resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
+  '@radix-ui/primitive@1.1.2':
+    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
 
-  '@radix-ui/react-accessible-icon@1.0.3':
-    resolution: {integrity: sha512-duVGKeWPSUILr/MdlPxV+GeULTc2rS1aihGdQ3N2qCUPMgxYLxvAsHJM3mCVLF8d5eK+ympmB22mb1F3a5biNw==}
+  '@radix-ui/react-accessible-icon@1.1.7':
+    resolution: {integrity: sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-accordion@1.1.2':
-    resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==}
+  '@radix-ui/react-accordion@1.2.11':
+    resolution: {integrity: sha512-l3W5D54emV2ues7jjeG1xcyN7S3jnK3zE2zHqgn0CmMsy9lNJwmgcrmaxS+7ipw15FAivzKNzH3d5EcGoFKw0A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-alert-dialog@1.0.4':
-    resolution: {integrity: sha512-jbfBCRlKYlhbitueOAv7z74PXYeIQmWpKwm3jllsdkw7fGWNkxqP3v0nY9WmOzcPqpQuoorNtvViBgL46n5gVg==}
+  '@radix-ui/react-alert-dialog@1.1.14':
+    resolution: {integrity: sha512-IOZfZ3nPvN6lXpJTBCunFQPRSvK8MDgSc1FB85xnIpUKOw9en0dJj8JmCAxV7BiZdtYlUpmrQjoTFkVYtdoWzQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-arrow@1.0.3':
-    resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-aspect-ratio@1.0.3':
-    resolution: {integrity: sha512-fXR5kbMan9oQqMuacfzlGG/SQMcmMlZ4wrvpckv8SgUulD0MMpspxJrxg/Gp/ISV3JfV1AeSWTYK9GvxA4ySwA==}
+  '@radix-ui/react-aspect-ratio@1.1.7':
+    resolution: {integrity: sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-avatar@1.0.3':
-    resolution: {integrity: sha512-9ToF7YNex3Ste45LrAeTlKtONI9yVRt/zOS158iilIkW5K/Apeyb/TUQlcEFTEFvWr8Kzdi2ZYrm1/suiXPajQ==}
+  '@radix-ui/react-avatar@1.1.10':
+    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-checkbox@1.0.4':
-    resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
+  '@radix-ui/react-checkbox@1.3.2':
+    resolution: {integrity: sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-collapsible@1.0.3':
-    resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
+  '@radix-ui/react-collapsible@1.1.11':
+    resolution: {integrity: sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-collection@1.0.3':
-    resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-compose-refs@1.0.1':
-    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-compose-refs@1.1.0':
-    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -2077,30 +2555,21 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-context-menu@2.1.4':
-    resolution: {integrity: sha512-HVHLUtZOBiR2Fh5l07qQ9y0IgX4dGZF0S9Gwdk4CVA+DL9afSphvFNa4nRiw6RNgb6quwLV4dLPF/gFDvNaOcQ==}
+  '@radix-ui/react-context-menu@2.2.15':
+    resolution: {integrity: sha512-UsQUMjcYTsBjTSXw0P3GO0werEQvUY2plgRQuKoCTtkNr45q1DiL51j4m7gxhABzZ0BadoXNsIbg7F3KwiUBbw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-context@1.0.1':
-    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-context@1.1.0':
-    resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -2108,34 +2577,30 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-dialog@1.0.4':
-    resolution: {integrity: sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==}
+  '@radix-ui/react-dialog@1.1.14':
+    resolution: {integrity: sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dialog@1.0.5':
-    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-dialog@1.1.1':
-    resolution: {integrity: sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==}
+  '@radix-ui/react-dismissable-layer@1.1.10':
+    resolution: {integrity: sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2147,43 +2612,30 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-direction@1.0.1':
-    resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-dismissable-layer@1.0.4':
-    resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
+  '@radix-ui/react-dropdown-menu@2.1.15':
+    resolution: {integrity: sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dismissable-layer@1.0.5':
-    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
+  '@radix-ui/react-focus-guards@1.1.2':
+    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-dismissable-layer@1.1.0':
-    resolution: {integrity: sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==}
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2195,30 +2647,26 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dropdown-menu@2.0.5':
-    resolution: {integrity: sha512-xdOrZzOTocqqkCkYo8yRPCib5OkTkqN7lqNCdxwPOdE466DOaNl4N8PkUIlsXthQvW5Wwkd+aEmWpfWlBoDPEw==}
+  '@radix-ui/react-hover-card@1.1.14':
+    resolution: {integrity: sha512-CPYZ24Mhirm+g6D8jArmLzjYu4Eyg3TTUHswR26QgzXBHBe64BO/RHOJKzmF/Dxb4y4f9PKyJdwm/O/AhNkb+Q==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-focus-guards@1.0.1':
-    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
+  '@radix-ui/react-icons@1.3.2':
+    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
 
-  '@radix-ui/react-focus-guards@1.1.0':
-    resolution: {integrity: sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==}
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -2226,34 +2674,34 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-focus-scope@1.0.3':
-    resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
+  '@radix-ui/react-label@2.1.7':
+    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-focus-scope@1.0.4':
-    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
+  '@radix-ui/react-menu@2.1.15':
+    resolution: {integrity: sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-focus-scope@1.1.0':
-    resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==}
+  '@radix-ui/react-menubar@1.1.15':
+    resolution: {integrity: sha512-Z71C7LGD+YDYo3TV81paUs8f3Zbmkvg6VLRQpKYfzioOE6n7fOhA3ApK/V/2Odolxjoc4ENk8AYCjohCNayd5A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2265,161 +2713,164 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-hover-card@1.0.6':
-    resolution: {integrity: sha512-2K3ToJuMk9wjwBOa+jdg2oPma+AmLdcEyTNsG/iC4BDVG3E0/mGCjbY8PEDSLxJcUi+nJi2QII+ec/4kWd88DA==}
+  '@radix-ui/react-navigation-menu@1.2.13':
+    resolution: {integrity: sha512-WG8wWfDiJlSF5hELjwfjSGOXcBR/ZMhBFCGYe8vERpC39CQYZeq1PQ2kaYHdye3V95d06H89KGMsVCIE4LWo3g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-icons@1.3.0':
-    resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
-    peerDependencies:
-      react: ^16.x || ^17.x || ^18.x
-
-  '@radix-ui/react-id@1.0.1':
-    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
+  '@radix-ui/react-popover@1.1.14':
+    resolution: {integrity: sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@radix-ui/react-id@1.1.0':
-    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+  '@radix-ui/react-popper@1.2.7':
+    resolution: {integrity: sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==}
     peerDependencies:
       '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@radix-ui/react-label@2.0.2':
-    resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==}
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-menu@2.0.5':
-    resolution: {integrity: sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==}
+  '@radix-ui/react-presence@1.1.4':
+    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-menubar@1.0.3':
-    resolution: {integrity: sha512-GqjdxzYCjjKhcgEODDP8SrYfbWNh/Hm3lyuFkP5Q5IbX0QfXklLF1o1AqA3oTV2kulUgN/kOZVS92hIIShEgpA==}
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-navigation-menu@1.1.3':
-    resolution: {integrity: sha512-x4Uv0N47ABx3/frJazYXxvMpZeKJe0qmRIgQ2o3lhTqnTVg+CaZfVVO4nQLn3QJcDkTz8icElKffhFng47XIBA==}
+  '@radix-ui/react-progress@1.1.7':
+    resolution: {integrity: sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popover@1.0.6':
-    resolution: {integrity: sha512-cZ4defGpkZ0qTRtlIBzJLSzL6ht7ofhhW4i1+pkemjV1IKXm0wgCRnee154qlV6r9Ttunmh2TNZhMfV2bavUyA==}
+  '@radix-ui/react-radio-group@1.3.7':
+    resolution: {integrity: sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popper@1.1.2':
-    resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==}
+  '@radix-ui/react-roving-focus@1.1.10':
+    resolution: {integrity: sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popper@1.1.3':
-    resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
+  '@radix-ui/react-scroll-area@1.2.9':
+    resolution: {integrity: sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-portal@1.0.3':
-    resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
+  '@radix-ui/react-select@2.2.5':
+    resolution: {integrity: sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-portal@1.0.4':
-    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
+  '@radix-ui/react-separator@1.1.7':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-portal@1.1.1':
-    resolution: {integrity: sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==}
+  '@radix-ui/react-slider@1.3.5':
+    resolution: {integrity: sha512-rkfe2pU2NBAYfGaxa3Mqosi7VZEWX5CxKaanRv0vZd4Zhl9fvQrg0VM93dv3xGLGfrHuoTRF3JXH8nb9g+B3fw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2431,21 +2882,17 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-presence@1.0.1':
-    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-presence@1.1.0':
-    resolution: {integrity: sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==}
+  '@radix-ui/react-switch@1.2.5':
+    resolution: {integrity: sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2457,21 +2904,21 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-primitive@1.0.3':
-    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+  '@radix-ui/react-tabs@1.1.12':
+    resolution: {integrity: sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-primitive@2.0.0':
-    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
+  '@radix-ui/react-toast@1.2.14':
+    resolution: {integrity: sha512-nAP5FBxBJGQ/YfUB+r+O6USFVkWq3gAInkxyEnmvEV5jtSbfDhfa4hwX8CraCnbjMLsE7XSf/K75l9xXY7joWg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2483,204 +2930,47 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-progress@1.0.3':
-    resolution: {integrity: sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==}
+  '@radix-ui/react-toggle-group@1.1.10':
+    resolution: {integrity: sha512-kiU694Km3WFLTC75DdqgM/3Jauf3rD9wxeS9XtyWFKsBUeZA337lC+6uUazT7I1DhanZ5gyD5Stf8uf2dbQxOQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-radio-group@1.1.3':
-    resolution: {integrity: sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==}
+  '@radix-ui/react-toggle@1.1.9':
+    resolution: {integrity: sha512-ZoFkBBz9zv9GWer7wIjvdRxmh2wyc2oKWw6C6CseWd6/yq1DK/l5lJ+wnsmFwJZbBYqr02mrf8A2q/CVCuM3ZA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-roving-focus@1.0.4':
-    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
+  '@radix-ui/react-tooltip@1.2.7':
+    resolution: {integrity: sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-scroll-area@1.0.4':
-    resolution: {integrity: sha512-OIClwBkwPG+FKvC4OMTRaa/3cfD069nkKFFL/TQzRzaO42Ce5ivKU9VMKgT7UU6UIkjcQqKBrDOIzWtPGw6e6w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-select@2.0.0':
-    resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-separator@1.0.3':
-    resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-slider@1.1.2':
-    resolution: {integrity: sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-slot@1.0.2':
-    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-slot@1.1.0':
-    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
-    peerDependencies:
-      '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-switch@1.0.3':
-    resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-tabs@1.0.4':
-    resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toast@1.1.4':
-    resolution: {integrity: sha512-wf+fc8DOywrpRK3jlPlWVe+ELYGHdKDaaARJZNuUTWyWYq7+ANCFLp4rTjZ/mcGkJJQ/vZ949Zis9xxEpfq9OA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle-group@1.0.4':
-    resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle@1.0.3':
-    resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-tooltip@1.0.6':
-    resolution: {integrity: sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-use-callback-ref@1.0.1':
-    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-callback-ref@1.1.0':
-    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -2688,17 +2978,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-controllable-state@1.0.1':
-    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-controllable-state@1.1.0':
-    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -2706,17 +2987,17 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-escape-keydown@1.0.3':
-    resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-escape-keydown@1.1.0':
-    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -2724,17 +3005,17 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-layout-effect@1.0.1':
-    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-layout-effect@1.1.0':
-    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -2742,184 +3023,375 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-previous@1.0.1':
-    resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-rect@1.0.1':
-    resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-size@1.0.1':
-    resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-visually-hidden@1.0.3':
-    resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/rect@1.0.1':
-    resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
   '@resvg/resvg-wasm@2.0.0-alpha.4':
     resolution: {integrity: sha512-pWIG9a/x1ky8gXKRhPH1OPKpHFoMN1ISLbJ+O+gPXQHIAKhNd5I28RlWf7q576hAOQA9JZTlo3p/M2uyLzJmmw==}
     engines: {node: '>= 10'}
 
-  '@rollup/rollup-android-arm-eabi@4.21.0':
-    resolution: {integrity: sha512-WTWD8PfoSAJ+qL87lE7votj3syLavxunWhzCnx3XFxFiI/BA/r3X7MUM8dVrH8rb2r4AiO8jJsr3ZjdaftmnfA==}
+  '@rollup/rollup-android-arm-eabi@4.46.2':
+    resolution: {integrity: sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.21.0':
-    resolution: {integrity: sha512-a1sR2zSK1B4eYkiZu17ZUZhmUQcKjk2/j9Me2IDjk1GHW7LB5Z35LEzj9iJch6gtUfsnvZs1ZNyDW2oZSThrkA==}
+  '@rollup/rollup-android-arm64@4.46.2':
+    resolution: {integrity: sha512-nTeCWY83kN64oQ5MGz3CgtPx8NSOhC5lWtsjTs+8JAJNLcP3QbLCtDDgUKQc/Ro/frpMq4SHUaHN6AMltcEoLQ==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.21.0':
-    resolution: {integrity: sha512-zOnKWLgDld/svhKO5PD9ozmL6roy5OQ5T4ThvdYZLpiOhEGY+dp2NwUmxK0Ld91LrbjrvtNAE0ERBwjqhZTRAA==}
+  '@rollup/rollup-darwin-arm64@4.46.2':
+    resolution: {integrity: sha512-HV7bW2Fb/F5KPdM/9bApunQh68YVDU8sO8BvcW9OngQVN3HHHkw99wFupuUJfGR9pYLLAjcAOA6iO+evsbBaPQ==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.21.0':
-    resolution: {integrity: sha512-7doS8br0xAkg48SKE2QNtMSFPFUlRdw9+votl27MvT46vo44ATBmdZdGysOevNELmZlfd+NEa0UYOA8f01WSrg==}
+  '@rollup/rollup-darwin-x64@4.46.2':
+    resolution: {integrity: sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.21.0':
-    resolution: {integrity: sha512-pWJsfQjNWNGsoCq53KjMtwdJDmh/6NubwQcz52aEwLEuvx08bzcy6tOUuawAOncPnxz/3siRtd8hiQ32G1y8VA==}
+  '@rollup/rollup-freebsd-arm64@4.46.2':
+    resolution: {integrity: sha512-ZyrsG4TIT9xnOlLsSSi9w/X29tCbK1yegE49RYm3tu3wF1L/B6LVMqnEWyDB26d9Ecx9zrmXCiPmIabVuLmNSg==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.46.2':
+    resolution: {integrity: sha512-pCgHFoOECwVCJ5GFq8+gR8SBKnMO+xe5UEqbemxBpCKYQddRQMgomv1104RnLSg7nNvgKy05sLsY51+OVRyiVw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.46.2':
+    resolution: {integrity: sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.21.0':
-    resolution: {integrity: sha512-efRIANsz3UHZrnZXuEvxS9LoCOWMGD1rweciD6uJQIx2myN3a8Im1FafZBzh7zk1RJ6oKcR16dU3UPldaKd83w==}
+  '@rollup/rollup-linux-arm-musleabihf@4.46.2':
+    resolution: {integrity: sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.21.0':
-    resolution: {integrity: sha512-ZrPhydkTVhyeGTW94WJ8pnl1uroqVHM3j3hjdquwAcWnmivjAwOYjTEAuEDeJvGX7xv3Z9GAvrBkEzCgHq9U1w==}
+  '@rollup/rollup-linux-arm64-gnu@4.46.2':
+    resolution: {integrity: sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.21.0':
-    resolution: {integrity: sha512-cfaupqd+UEFeURmqNP2eEvXqgbSox/LHOyN9/d2pSdV8xTrjdg3NgOFJCtc1vQ/jEke1qD0IejbBfxleBPHnPw==}
+  '@rollup/rollup-linux-arm64-musl@4.46.2':
+    resolution: {integrity: sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.21.0':
-    resolution: {integrity: sha512-ZKPan1/RvAhrUylwBXC9t7B2hXdpb/ufeu22pG2psV7RN8roOfGurEghw1ySmX/CmDDHNTDDjY3lo9hRlgtaHg==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.46.2':
+    resolution: {integrity: sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.46.2':
+    resolution: {integrity: sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.21.0':
-    resolution: {integrity: sha512-H1eRaCwd5E8eS8leiS+o/NqMdljkcb1d6r2h4fKSsCXQilLKArq6WS7XBLDu80Yz+nMqHVFDquwcVrQmGr28rg==}
+  '@rollup/rollup-linux-riscv64-gnu@4.46.2':
+    resolution: {integrity: sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.46.2':
+    resolution: {integrity: sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.21.0':
-    resolution: {integrity: sha512-zJ4hA+3b5tu8u7L58CCSI0A9N1vkfwPhWd/puGXwtZlsB5bTkwDNW/+JCU84+3QYmKpLi+XvHdmrlwUwDA6kqw==}
+  '@rollup/rollup-linux-s390x-gnu@4.46.2':
+    resolution: {integrity: sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.21.0':
-    resolution: {integrity: sha512-e2hrvElFIh6kW/UNBQK/kzqMNY5mO+67YtEh9OA65RM5IJXYTWiXjX6fjIiPaqOkBthYF1EqgiZ6OXKcQsM0hg==}
+  '@rollup/rollup-linux-x64-gnu@4.46.2':
+    resolution: {integrity: sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.21.0':
-    resolution: {integrity: sha512-1vvmgDdUSebVGXWX2lIcgRebqfQSff0hMEkLJyakQ9JQUbLDkEaMsPTLOmyccyC6IJ/l3FZuJbmrBw/u0A0uCQ==}
+  '@rollup/rollup-linux-x64-musl@4.46.2':
+    resolution: {integrity: sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.21.0':
-    resolution: {integrity: sha512-s5oFkZ/hFcrlAyBTONFY1TWndfyre1wOMwU+6KCpm/iatybvrRgmZVM+vCFwxmC5ZhdlgfE0N4XorsDpi7/4XQ==}
+  '@rollup/rollup-win32-arm64-msvc@4.46.2':
+    resolution: {integrity: sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.21.0':
-    resolution: {integrity: sha512-G9+TEqRnAA6nbpqyUqgTiopmnfgnMkR3kMukFBDsiyy23LZvUCpiUwjTRx6ezYCjJODXrh52rBR9oXvm+Fp5wg==}
+  '@rollup/rollup-win32-ia32-msvc@4.46.2':
+    resolution: {integrity: sha512-gBgaUDESVzMgWZhcyjfs9QFK16D8K6QZpwAaVNJxYDLHWayOta4ZMjGm/vsAEy3hvlS2GosVFlBlP9/Wb85DqQ==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.21.0':
-    resolution: {integrity: sha512-2jsCDZwtQvRhejHLfZ1JY6w6kEuEtfF9nzYsZxzSlNVKDX+DpsDJ+Rbjkm74nvg2rdx0gwBS+IMdvwJuq3S9pQ==}
+  '@rollup/rollup-win32-x64-msvc@4.46.2':
+    resolution: {integrity: sha512-CvUo2ixeIQGtF6WvuB87XWqPQkoFAFqW+HUo/WzHwuHDvIwZCtjdWXoYCcr06iKGydiqTclC4jU/TNObC/xKZg==}
     cpu: [x64]
     os: [win32]
 
-  '@rushstack/eslint-patch@1.10.3':
-    resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==}
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+
+  '@rushstack/eslint-patch@1.12.0':
+    resolution: {integrity: sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==}
+
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
+
+  '@shikijs/compat@1.29.2':
+    resolution: {integrity: sha512-BrYuaT9l38ozyIXJuxtnM28N9Vyd65nIRP/h2aTOg54u9/IL+GcJchrH7eJ9TDKy9AqkAnFZFVin4Bi0gYtlbQ==}
+
+  '@shikijs/core@1.29.2':
+    resolution: {integrity: sha512-vju0lY9r27jJfOY4Z7+Rt/nIOjzJpZ3y+nYpqtUZInVoXQ/TJZcfGnNOGnKjFdVZb8qexiCuSlZRKcGfhhTTZQ==}
+
+  '@shikijs/core@3.9.2':
+    resolution: {integrity: sha512-3q/mzmw09B2B6PgFNeiaN8pkNOixWS726IHmJEpjDAcneDPMQmUg2cweT9cWXY4XcyQS3i6mOOUgQz9RRUP6HA==}
+
+  '@shikijs/engine-javascript@1.29.2':
+    resolution: {integrity: sha512-iNEZv4IrLYPv64Q6k7EPpOCE/nuvGiKl7zxdq0WFuRPF5PAE9PRo2JGq/d8crLusM59BRemJ4eOqrFrC4wiQ+A==}
+
+  '@shikijs/engine-javascript@3.9.2':
+    resolution: {integrity: sha512-kUTRVKPsB/28H5Ko6qEsyudBiWEDLst+Sfi+hwr59E0GLHV0h8RfgbQU7fdN5Lt9A8R1ulRiZyTvAizkROjwDA==}
+
+  '@shikijs/engine-oniguruma@1.29.2':
+    resolution: {integrity: sha512-7iiOx3SG8+g1MnlzZVDYiaeHe7Ez2Kf2HrJzdmGwkRisT7r4rak0e655AcM/tF9JG/kg5fMNYlLLKglbN7gBqA==}
+
+  '@shikijs/engine-oniguruma@3.9.2':
+    resolution: {integrity: sha512-Vn/w5oyQ6TUgTVDIC/BrpXwIlfK6V6kGWDVVz2eRkF2v13YoENUvaNwxMsQU/t6oCuZKzqp9vqtEtEzKl9VegA==}
+
+  '@shikijs/langs@1.29.2':
+    resolution: {integrity: sha512-FIBA7N3LZ+223U7cJDUYd5shmciFQlYkFXlkKVaHsCPgfVLiO+e12FmQE6Tf9vuyEsFe3dIl8qGWKXgEHL9wmQ==}
 
-  '@shikijs/compat@1.1.7':
-    resolution: {integrity: sha512-yByTP+2Kwtfhc/Bon18RmOFEvt3BIYcH0i4000iWHfoKw/TDEuSoYotKELRCO76mfqqCUdVejzv1+dfxmUr61w==}
+  '@shikijs/langs@3.9.2':
+    resolution: {integrity: sha512-X1Q6wRRQXY7HqAuX3I8WjMscjeGjqXCg/Sve7J2GWFORXkSrXud23UECqTBIdCSNKJioFtmUGJQNKtlMMZMn0w==}
 
-  '@shikijs/core@1.1.7':
-    resolution: {integrity: sha512-gTYLUIuD1UbZp/11qozD3fWpUTuMqPSf3svDMMrL0UmlGU7D9dPw/V1FonwAorCUJBltaaESxq90jrSjQyGixg==}
+  '@shikijs/rehype@3.9.2':
+    resolution: {integrity: sha512-obHyTWAUp5cpgpr4v7T9sjEHkLUMvBHvcpYAtdB1yuWU4/IeJ8boDMpnGUvvnxVpDwARlkvBA4Hr+BISo3zwjg==}
 
-  '@shikijs/core@1.10.3':
-    resolution: {integrity: sha512-D45PMaBaeDHxww+EkcDQtDAtzv00Gcsp72ukBtaLSmqRvh0WgGMq3Al0rl1QQBZfuneO75NXMIzEZGFitThWbg==}
+  '@shikijs/themes@1.29.2':
+    resolution: {integrity: sha512-i9TNZlsq4uoyqSbluIcZkmPL9Bfi3djVxRnofUHwvx/h6SRW3cwgBC5SML7vsDcWyukY0eCzVN980rqP6qNl9g==}
 
-  '@shikijs/transformers@1.1.7':
-    resolution: {integrity: sha512-lXz011ao4+rvweps/9h3CchBfzb1U5OtP5D51Tqc9lQYdLblWMIxQxH6Ybe1GeGINcEVM4goMyPrI0JvlIp4UQ==}
+  '@shikijs/themes@3.9.2':
+    resolution: {integrity: sha512-6z5lBPBMRfLyyEsgf6uJDHPa6NAGVzFJqH4EAZ+03+7sedYir2yJBRu2uPZOKmj43GyhVHWHvyduLDAwJQfDjA==}
+
+  '@shikijs/transformers@1.29.2':
+    resolution: {integrity: sha512-NHQuA+gM7zGuxGWP9/Ub4vpbwrYCrho9nQCLcCPfOe3Yc7LOYwmSuhElI688oiqIXk9dlZwDiyAG9vPBTuPJMA==}
+
+  '@shikijs/transformers@3.9.2':
+    resolution: {integrity: sha512-MW5hT4TyUp6bNAgTExRYLk1NNasVQMTCw1kgbxHcEC0O5cbepPWaB+1k+JzW9r3SP2/R8kiens8/3E6hGKfgsA==}
+
+  '@shikijs/types@1.29.2':
+    resolution: {integrity: sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw==}
+
+  '@shikijs/types@3.9.2':
+    resolution: {integrity: sha512-/M5L0Uc2ljyn2jKvj4Yiah7ow/W+DJSglVafvWAJ/b8AZDeeRAdMu3c2riDzB7N42VD+jSnWxeP9AKtd4TfYVw==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
   '@shuding/opentype.js@1.4.0-beta.0':
     resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==}
     engines: {node: '>= 8.0.0'}
     hasBin: true
 
+  '@sideway/address@4.1.5':
+    resolution: {integrity: sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==}
+
+  '@sideway/formula@3.0.1':
+    resolution: {integrity: sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==}
+
+  '@sideway/pinpoint@2.0.0':
+    resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}
+
   '@sindresorhus/is@0.14.0':
     resolution: {integrity: sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==}
     engines: {node: '>=6'}
 
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
   '@swc/helpers@0.5.11':
     resolution: {integrity: sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==}
 
-  '@swc/helpers@0.5.2':
-    resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
   '@szmarczak/http-timer@1.1.2':
     resolution: {integrity: sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==}
     engines: {node: '>=6'}
 
-  '@tanstack/react-table@8.9.1':
-    resolution: {integrity: sha512-yHs2m6lk5J5RNcu2dNtsDGux66wNXZjEgzxos6MRCX8gL+nqxeW3ZglqP6eANN0bGElPnjvqiUHGQvdACOr3Cw==}
+  '@tabler/icons-react@3.34.1':
+    resolution: {integrity: sha512-Ld6g0NqOO05kyyHsfU8h787PdHBm7cFmOycQSIrGp45XcXYDuOK2Bs0VC4T2FWSKZ6bx5g04imfzazf/nqtk1A==}
+    peerDependencies:
+      react: '>= 16'
+
+  '@tabler/icons@3.34.1':
+    resolution: {integrity: sha512-9gTnUvd7Fd/DmQgr3MKY+oJLa1RfNsQo8c/ir3TJAWghOuZXodbtbVp0QBY2DxWuuvrSZFys0HEbv1CoiI5y6A==}
+
+  '@tailwindcss/container-queries@0.1.1':
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+
+  '@tailwindcss/node@4.1.11':
+    resolution: {integrity: sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.11':
+    resolution: {integrity: sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+    resolution: {integrity: sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
+    resolution: {integrity: sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+    resolution: {integrity: sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+    resolution: {integrity: sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+    resolution: {integrity: sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+    resolution: {integrity: sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+    resolution: {integrity: sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+    resolution: {integrity: sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+    resolution: {integrity: sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+    resolution: {integrity: sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+    resolution: {integrity: sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.11':
+    resolution: {integrity: sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.11':
+    resolution: {integrity: sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==}
+
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
     engines: {node: '>=12'}
     peerDependencies:
-      react: '>=16'
-      react-dom: '>=16'
+      react: '>=16.8'
+      react-dom: '>=16.8'
 
-  '@tanstack/table-core@8.9.1':
-    resolution: {integrity: sha512-2+R83n8vMZND0q3W1lSiF7co9nFbeWbjAErFf27xwbeA9E0wtUu5ZDfgj+TZ6JzdAEQAgfxkk/QNFAKiS8E4MA==}
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
     engines: {node: '>=12'}
 
+  '@tootallnate/quickjs-emscripten@0.23.0':
+    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
+
   '@ts-morph/common@0.19.0':
     resolution: {integrity: sha512-Unz/WHmd4pGax91rdIKWi51wnVUW11QttMEPpBiBgIewnc9UQIX7UDLxr5vRlqeByXCwhkF6VabSsI0raWcyAQ==}
 
   '@ts-morph/common@0.23.0':
     resolution: {integrity: sha512-m7Lllj9n/S6sOkCkRftpM7L24uvmfXQFedlW/4hENcuJH1HHm9u5EgxZb9uVjQSCGrbBWBkOGgcTxNg36r6ywA==}
 
+  '@ts-morph/common@0.27.0':
+    resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
+
   '@tsconfig/node10@1.0.11':
     resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
 
@@ -2932,20 +3404,23 @@ packages:
   '@tsconfig/node16@1.0.4':
     resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
 
-  '@types/acorn@4.0.6':
-    resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
+  '@tybys/wasm-util@0.10.0':
+    resolution: {integrity: sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==}
 
-  '@types/babel__core@7.20.1':
-    resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
-  '@types/babel__generator@7.6.8':
-    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
 
   '@types/babel__template@7.4.4':
     resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
 
-  '@types/babel__traverse@7.20.6':
-    resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/cookie@0.6.0':
+    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
   '@types/d3-array@3.2.1':
     resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
@@ -2959,17 +3434,17 @@ packages:
   '@types/d3-interpolate@3.0.4':
     resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
 
-  '@types/d3-path@3.1.0':
-    resolution: {integrity: sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==}
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
 
-  '@types/d3-scale@4.0.8':
-    resolution: {integrity: sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==}
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
 
-  '@types/d3-shape@3.1.6':
-    resolution: {integrity: sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==}
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
 
-  '@types/d3-time@3.0.3':
-    resolution: {integrity: sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==}
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
 
   '@types/d3-timer@3.0.2':
     resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
@@ -2977,20 +3452,17 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
-  '@types/diff@5.0.3':
-    resolution: {integrity: sha512-amrLbRqTU9bXMCc6uX0sWpxsQzRIo9z6MJPkH1pkez/qOxuqSZVuryJAWoBRq94CeG8JxY+VK4Le9HtjQR5T9A==}
-
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
-  '@types/estree@1.0.5':
-    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
   '@types/extend@3.0.4':
     resolution: {integrity: sha512-ArMouDUTJEz1SQRpFsT2rIw7DeqICFv5aaVzLSIYMYQSLcwcGOfT3VyglQs/p7K3F7fT4zxr0NWxYZIdifD6dA==}
 
-  '@types/fs-extra@11.0.1':
-    resolution: {integrity: sha512-MxObHvNl4A69ofaTRU8DFqvgzzv8s9yRtaPPm5gud9HDNvpB3GPQFvNuTWAI59B9huVGV5jXYJwbCsmBsOGYWA==}
+  '@types/fs-extra@11.0.4':
+    resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
 
   '@types/hast@2.3.10':
     resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
@@ -2998,8 +3470,8 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
-  '@types/is-ci@3.0.4':
-    resolution: {integrity: sha512-AkCYCmwlXeuH89DagDCzvCAyltI2v9lh3U3DqSg/GrBYoReAaWwxfXCqMx9UV5MajLZ4ZFwZzV4cABGIxk2XRw==}
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
@@ -3010,11 +3482,8 @@ packages:
   '@types/keyv@3.1.4':
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
 
-  '@types/lodash.template@4.5.1':
-    resolution: {integrity: sha512-0y71S2dGgmwdkSsyW95JBp8HSZchgKCsjr6F0lsT3eSMtaT3Nn9rcMHU1U4UKu6XjQT3YC6/PNwgFI7k9f+ltw==}
-
-  '@types/lodash@4.17.4':
-    resolution: {integrity: sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==}
+  '@types/lodash@4.17.20':
+    resolution: {integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==}
 
   '@types/mdast@3.0.15':
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
@@ -3025,14 +3494,11 @@ packages:
   '@types/mdx@2.0.13':
     resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
 
-  '@types/minimatch@3.0.5':
-    resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
-
   '@types/minimist@1.2.5':
     resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
 
-  '@types/ms@0.7.34':
-    resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
@@ -3040,11 +3506,8 @@ packages:
   '@types/node@17.0.45':
     resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
 
-  '@types/node@20.11.27':
-    resolution: {integrity: sha512-qyUZfMnCg1KEz57r7pzFtSGt49f6RPkPBis3Vo4PbS7roQEDn22hiHzl/Lo1q4i4hDEgBJmBF/NTNg2XR0HbFg==}
-
-  '@types/node@20.14.0':
-    resolution: {integrity: sha512-5cHBxFGJx6L4s56Bubp4fglrEpmyJypsqI6RgzMfBHWUJQGWAAi8cWcgetEbZXHYXo9C2Fa4EEds/uSyS4cxmA==}
+  '@types/node@20.19.10':
+    resolution: {integrity: sha512-iAFpG6DokED3roLSP0K+ybeDdIX6Bc0Vd3mLW5uDqThPWtNos3E+EqOM11mPQHKzfWHqEBuLjIlsBQQ8CsISmQ==}
 
   '@types/node@20.5.1':
     resolution: {integrity: sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==}
@@ -3055,23 +3518,37 @@ packages:
   '@types/parse5@6.0.3':
     resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
 
-  '@types/prompts@2.4.2':
-    resolution: {integrity: sha512-TwNx7qsjvRIUv/BCx583tqF5IINEVjCNqg9ofKHRlSoUHE62WBHrem4B1HGXcIrG511v29d1kJ9a/t2Esz7MIg==}
+  '@types/prompts@2.4.9':
+    resolution: {integrity: sha512-qTxFi6Buiu8+50/+3DGIWLHM6QuWsEKugJnnP6iv2Mc4ncxE4A/OJkjuVOA+5X0X1S/nq5VJRa8Lu+nwcvbrKA==}
+
+  '@types/prop-types@15.7.15':
+    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
+
+  '@types/react-color@3.0.13':
+    resolution: {integrity: sha512-2c/9FZ4ixC5T3JzN0LP5Cke2Mf0MKOP2Eh0NPDPWmuVH3NjPyhEjqNMQpN1Phr5m74egAy+p2lYNAFrX1z9Yrg==}
+    peerDependencies:
+      '@types/react': '*'
 
-  '@types/prop-types@15.7.12':
-    resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
+  '@types/react-dom@18.3.7':
+    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
+    peerDependencies:
+      '@types/react': ^18.0.0
 
-  '@types/react-color@3.0.6':
-    resolution: {integrity: sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==}
+  '@types/react-dom@19.1.2':
+    resolution: {integrity: sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==}
+    peerDependencies:
+      '@types/react': ^19.0.0
 
-  '@types/react-dom@18.2.22':
-    resolution: {integrity: sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==}
+  '@types/react@18.3.23':
+    resolution: {integrity: sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==}
 
-  '@types/react@18.2.67':
-    resolution: {integrity: sha512-vkIE2vTIMHQ/xL0rgmuoECBCkZFZeHr49HeWSc24AptMbNRo7pwSBvj73rlJJs9fGKj0koS+V7kQB1jHS0uCgw==}
+  '@types/react@19.1.2':
+    resolution: {integrity: sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==}
 
-  '@types/reactcss@1.2.12':
-    resolution: {integrity: sha512-BrXUQ86/wbbFiZv8h/Q1/Q1XOsaHneYmCb/tHe9+M8XBAAUc2EHfdY0DY22ZZjVSaXr5ix7j+zsqO2eGZub8lQ==}
+  '@types/reactcss@1.2.13':
+    resolution: {integrity: sha512-gi3S+aUi6kpkF5vdhUsnkwbiSEIU/BEJyD7kBy2SudWBUuKmJk8AQKE0OVcQQeEy40Azh0lV6uynxlikYIJuwg==}
+    peerDependencies:
+      '@types/react': '*'
 
   '@types/resolve@1.20.6':
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
@@ -3079,26 +3556,40 @@ packages:
   '@types/responselike@1.0.3':
     resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==}
 
-  '@types/scheduler@0.23.0':
-    resolution: {integrity: sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==}
-
   '@types/semver@6.2.7':
     resolution: {integrity: sha512-blctEWbzUFzQx799RZjzzIdBJOXmE37YYEyDtKkx5Dg+V7o/zyyAxLPiI98A2jdTtDgxZleMdfV+7p8WbRJ1OQ==}
 
+  '@types/statuses@2.0.6':
+    resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
+
   '@types/stringify-object@4.0.5':
     resolution: {integrity: sha512-TzX5V+njkbJ8iJ0mrj+Vqveep/1JBH4SSA3J2wYrE1eUrOhdsjTBCb0kao4EquSQ8KgPpqY4zSVP2vCPWKBElg==}
 
-  '@types/unist@2.0.10':
-    resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
+  '@types/tough-cookie@4.0.5':
+    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
+
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
-  '@types/unist@3.0.2':
-    resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@types/yauzl@2.10.3':
+    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
   '@types/yoga-layout@1.9.2':
     resolution: {integrity: sha512-S9q47ByT2pPvD65IvrWp7qppVMpk9WGMbVq9wbWZOHg6tnXSD4vyhao6nOSBwwfDdV2p3Kx9evA9vI+XWTfDvw==}
 
-  '@typescript-eslint/parser@5.61.0':
-    resolution: {integrity: sha512-yGr4Sgyh8uO6fSi9hw3jAFXNBHbCtKKFMdX2IkT3ZqpKmtAq3lHS4ixB/COFuAIJpwl9/AqF7j72ZDWYKmIfvg==}
+  '@typescript-eslint/eslint-plugin@8.39.0':
+    resolution: {integrity: sha512-bhEz6OZeUR+O/6yx9Jk6ohX6H9JSFTaiY0v9/PuKT3oGK0rn0jNplLmyFUGV+a9gfYnVNwGDwS/UkLIuXNb2Rw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.39.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/parser@5.62.0':
+    resolution: {integrity: sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -3107,16 +3598,50 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/scope-manager@5.61.0':
-    resolution: {integrity: sha512-W8VoMjoSg7f7nqAROEmTt6LoBpn81AegP7uKhhW5KzYlehs8VV0ZW0fIDVbcZRcaP3aPSW+JZFua+ysQN+m/Nw==}
+  '@typescript-eslint/parser@8.39.0':
+    resolution: {integrity: sha512-g3WpVQHngx0aLXn6kfIYCZxM6rRJlWzEkVpqEFLT3SgEDsp9cpCbxxgwnE504q4H+ruSDh/VGS6nqZIDynP+vg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.39.0':
+    resolution: {integrity: sha512-CTzJqaSq30V/Z2Og9jogzZt8lJRR5TKlAdXmWgdu4hgcC9Kww5flQ+xFvMxIBWVNdxJO7OifgdOK4PokMIWPew==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@5.62.0':
+    resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@typescript-eslint/types@5.61.0':
-    resolution: {integrity: sha512-ldyueo58KjngXpzloHUog/h9REmHl59G1b3a5Sng1GfBo14BkS3ZbMEb3693gnP1k//97lh7bKsp6/V/0v1veQ==}
+  '@typescript-eslint/scope-manager@8.39.0':
+    resolution: {integrity: sha512-8QOzff9UKxOh6npZQ/4FQu4mjdOCGSdO3p44ww0hk8Vu+IGbg0tB/H1LcTARRDzGCC8pDGbh2rissBuuoPgH8A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.39.0':
+    resolution: {integrity: sha512-Fd3/QjmFV2sKmvv3Mrj8r6N8CryYiCS8Wdb/6/rgOXAWGcFuc+VkQuG28uk/4kVNVZBQuuDHEDUpo/pQ32zsIQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/type-utils@8.39.0':
+    resolution: {integrity: sha512-6B3z0c1DXVT2vYA9+z9axjtc09rqKUPRmijD5m9iv8iQpHBRYRMBcgxSiKTZKm6FwWw1/cI4v6em35OsKCiN5Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@5.62.0':
+    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@typescript-eslint/typescript-estree@5.61.0':
-    resolution: {integrity: sha512-Fud90PxONnnLZ36oR5ClJBLTLfU4pIWBmnvGwTbEa2cXIqj70AEDEmOmpkFComjBZ/037ueKrOdHuYmSFVD7Rw==}
+  '@typescript-eslint/types@8.39.0':
+    resolution: {integrity: sha512-ArDdaOllnCj3yn/lzKn9s0pBQYmmyme/v1HbGIGB0GB/knFI3fWMHloC+oYTJW46tVbYnGKTMDK4ah1sC2v0Kg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@5.62.0':
+    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -3124,84 +3649,230 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/visitor-keys@5.61.0':
-    resolution: {integrity: sha512-50XQ5VdbWrX06mQXhy93WywSFZZGsv3EOjq+lqp6WC2t+j3mb6A9xYVdrRxafvK88vg9k9u+CT4l6D8PEatjKg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  '@ungap/structured-clone@1.2.0':
-    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+  '@typescript-eslint/typescript-estree@8.39.0':
+    resolution: {integrity: sha512-ndWdiflRMvfIgQRpckQQLiB5qAKQ7w++V4LlCHwp62eym1HLB/kw7D9f2e8ytONls/jt89TEasgvb+VwnRprsw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
 
-  '@vercel/analytics@1.2.2':
-    resolution: {integrity: sha512-X0rctVWkQV1e5Y300ehVNqpOfSOufo7ieA5PIdna8yX/U7Vjz0GFsGf4qvAhxV02uQ2CVt7GYcrFfddXXK2Y4A==}
+  '@typescript-eslint/utils@8.39.0':
+    resolution: {integrity: sha512-4GVSvNA0Vx1Ktwvf4sFE+exxJ3QGUorQG1/A5mRfRNZtkBT2xrA/BCO2H0eALx/PnvCS6/vmYwRdDA41EoffkQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      next: '>= 13'
-      react: ^18 || ^19
-    peerDependenciesMeta:
-      next:
-        optional: true
-      react:
-        optional: true
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
-  '@vercel/og@0.0.21':
-    resolution: {integrity: sha512-WgMahG5c8UM7xtn/mT+ljUpDMSDnSlu8AXL52JtTwxb1odrd0GWqZg2N1X38wulPj+sCccNpDdFmmAuw0GLc+Q==}
-    engines: {node: '>=16'}
+  '@typescript-eslint/visitor-keys@5.62.0':
+    resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@vitest/expect@2.0.5':
-    resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
+  '@typescript-eslint/visitor-keys@8.39.0':
+    resolution: {integrity: sha512-ldgiJ+VAhQCfIjeOgu8Kj5nSxds0ktPOSO9p4+0VDH2R2pLvQraaM5Oen2d7NxzMCm+Sn/vJT+mv2H5u6b/3fA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@vitest/pretty-format@2.0.5':
-    resolution: {integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==}
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
-  '@vitest/runner@2.0.5':
-    resolution: {integrity: sha512-TfRfZa6Bkk9ky4tW0z20WKXFEwwvWhRY+84CnSEtq4+3ZvDlJyY32oNTJtM7AW9ihW90tX/1Q78cb6FjoAs+ig==}
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
+    cpu: [arm]
+    os: [android]
 
-  '@vitest/snapshot@2.0.5':
-    resolution: {integrity: sha512-SgCPUeDFLaM0mIUHfaArq8fD2WbaXG/zVXjRupthYfYGzc8ztbFbu6dUNOblBG7XLMR1kEhS/DNnfCZ2IhdDew==}
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
+    cpu: [arm64]
+    os: [android]
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+    cpu: [x64]
+    os: [win32]
+
+  '@vercel/analytics@1.5.0':
+    resolution: {integrity: sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g==}
+    peerDependencies:
+      '@remix-run/react': ^2
+      '@sveltejs/kit': ^1 || ^2
+      next: '>= 13'
+      react: ^18 || ^19 || ^19.0.0-rc
+      svelte: '>= 4'
+      vue: ^3
+      vue-router: ^4
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      '@sveltejs/kit':
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+      vue-router:
+        optional: true
+
+  '@vercel/og@0.0.21':
+    resolution: {integrity: sha512-WgMahG5c8UM7xtn/mT+ljUpDMSDnSlu8AXL52JtTwxb1odrd0GWqZg2N1X38wulPj+sCccNpDdFmmAuw0GLc+Q==}
+    engines: {node: '>=16'}
+
+  '@vitest/expect@2.1.9':
+    resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
+
+  '@vitest/mocker@2.1.9':
+    resolution: {integrity: sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@2.1.9':
+    resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
+
+  '@vitest/runner@2.1.9':
+    resolution: {integrity: sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==}
+
+  '@vitest/snapshot@2.1.9':
+    resolution: {integrity: sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==}
 
-  '@vitest/spy@2.0.5':
-    resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==}
+  '@vitest/spy@2.1.9':
+    resolution: {integrity: sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==}
 
-  '@vitest/utils@2.0.5':
-    resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==}
+  '@vitest/utils@2.1.9':
+    resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==}
 
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
 
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn-walk@8.3.2:
-    resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
     engines: {node: '>=0.4.0'}
 
-  acorn@8.11.3:
-    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  agent-base@7.1.1:
-    resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==}
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
 
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
-  ajv@8.14.0:
-    resolution: {integrity: sha512-oYs1UUtO97ZO2lJ4bwnWeQW8/zvOIQLGKcvPTsWmvc2SYgBb+upuNS5NxoLaMU4h8Ju3Nbj6Cq8mD2LQoqVKFA==}
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
   ansi-colors@4.1.3:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
 
+  ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
-  ansi-regex@6.0.1:
-    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
   ansi-styles@3.2.1:
@@ -3216,6 +3887,10 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
+  ansis@4.1.0:
+    resolution: {integrity: sha512-BGcItUBWSMRgOCe+SVZJ+S7yTRG0eGt9cXAHev72yuGcY23hnLA7Bky5L/xLyPINoSN95geovfBkqoTlNZYa7w==}
+    engines: {node: '>=14'}
+
   any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
@@ -3235,26 +3910,23 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-hidden@1.2.4:
-    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
-  aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-
-  array-buffer-byte-length@1.0.1:
-    resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
 
-  array-differ@3.0.0:
-    resolution: {integrity: sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==}
-    engines: {node: '>=8'}
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
 
   array-ify@1.0.0:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
 
-  array-includes@3.1.8:
-    resolution: {integrity: sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==}
+  array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
     engines: {node: '>= 0.4'}
 
   array-timsort@1.0.3:
@@ -3264,37 +3936,34 @@ packages:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
 
-  array.prototype.findlastindex@1.2.5:
-    resolution: {integrity: sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==}
+  array.prototype.findlast@1.2.5:
+    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
     engines: {node: '>= 0.4'}
 
-  array.prototype.flat@1.3.2:
-    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
+  array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
     engines: {node: '>= 0.4'}
 
-  array.prototype.flatmap@1.3.2:
-    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
     engines: {node: '>= 0.4'}
 
   array.prototype.tosorted@1.1.4:
     resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
     engines: {node: '>= 0.4'}
 
-  arraybuffer.prototype.slice@1.0.3:
-    resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
     engines: {node: '>= 0.4'}
 
   arrify@1.0.1:
     resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
     engines: {node: '>=0.10.0'}
 
-  arrify@2.0.1:
-    resolution: {integrity: sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==}
-    engines: {node: '>=8'}
-
-  assert@2.1.0:
-    resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==}
-
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
@@ -3302,16 +3971,27 @@ packages:
   ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
+  ast-types@0.13.4:
+    resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
+    engines: {node: '>=4'}
+
   ast-types@0.16.1:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
 
-  astring@1.8.6:
-    resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==}
+  astring@1.9.0:
+    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
     hasBin: true
 
-  autoprefixer@10.4.14:
-    resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==}
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  autoprefixer@10.4.21:
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
@@ -3321,12 +4001,19 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  axe-core@4.7.0:
-    resolution: {integrity: sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==}
+  axe-core@4.10.3:
+    resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
     engines: {node: '>=4'}
 
-  axobject-query@3.2.1:
-    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
+  axios@1.11.0:
+    resolution: {integrity: sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==}
+
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
+  b4a@1.6.7:
+    resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}
 
   bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
@@ -3334,9 +4021,47 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  bare-events@2.6.1:
+    resolution: {integrity: sha512-AuTJkq9XmE6Vk0FJVNq5QxETrSA/vKHarWVBG5l/JbdCL1prJemiyJqUS0jrlXO0MftuPq4m3YVYhoNc5+aE/g==}
+
+  bare-fs@4.1.6:
+    resolution: {integrity: sha512-25RsLF33BqooOEFNdMcEhMpJy8EoR88zSMrnOQOaM3USnOK2VmaJ1uaQEwPA6AQjrv1lXChScosN6CzbwbO9OQ==}
+    engines: {bare: '>=1.16.0'}
+    peerDependencies:
+      bare-buffer: '*'
+    peerDependenciesMeta:
+      bare-buffer:
+        optional: true
+
+  bare-os@3.6.1:
+    resolution: {integrity: sha512-uaIjxokhFidJP+bmmvKSgiMzj2sV5GPHaZVAIktcxcpCyBFFWO+YlikVAdhmUo2vYFvFhOXIAlldqV29L8126g==}
+    engines: {bare: '>=1.14.0'}
+
+  bare-path@3.0.0:
+    resolution: {integrity: sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==}
+
+  bare-stream@2.6.5:
+    resolution: {integrity: sha512-jSmxKJNJmHySi6hC42zlZnq00rga4jjxcgNZjY9N5WlOe/iOoGRtdwGsHzQv2RlH2KOYMwGUXhf2zXd32BA9RA==}
+    peerDependencies:
+      bare-buffer: '*'
+      bare-events: '*'
+    peerDependenciesMeta:
+      bare-buffer:
+        optional: true
+      bare-events:
+        optional: true
+
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
+  baseline-browser-mapping@2.8.4:
+    resolution: {integrity: sha512-L+YvJwGAgwJBV1p6ffpSTa2KRc69EeeYGYjRVWKs0GKrK+LON0GC0gV+rKSNtALEDvMDqkvCFq9r1r94/Gjwxw==}
+    hasBin: true
+
+  basic-ftp@5.0.5:
+    resolution: {integrity: sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==}
+    engines: {node: '>=10.0.0'}
+
   better-path-resolve@1.0.0:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
@@ -3348,49 +4073,54 @@ packages:
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
-  bl@5.1.0:
-    resolution: {integrity: sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==}
+  bluebird@3.7.2:
+    resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
+
+  body-parser@2.2.0:
+    resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==}
+    engines: {node: '>=18'}
 
-  brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
-  brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
 
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  breakword@1.0.6:
-    resolution: {integrity: sha512-yjxDAYyK/pBvws9H4xKYpLDpYKEH6CzrBPAuXq3x18I+c/2MkVtT3qAr7Oloi6Dss9qNhPVueAAVU1CSeNDIXw==}
-
-  browserslist@4.23.0:
-    resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
+  browserslist@4.26.2:
+    resolution: {integrity: sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  buffer-crc32@0.2.13:
+    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
   buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
 
-  buffer@6.0.3:
-    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
-
   builtins@1.0.3:
     resolution: {integrity: sha512-uYBjakWipfaO/bXI7E8rq6kpwHRZK5cNYrUv2OzZSI/FvmdMyXJ2tG9dKcjEC5YHmHpUAwsargWIZNWdxb/bnQ==}
 
-  bundle-require@4.2.1:
-    resolution: {integrity: sha512-7Q/6vkyYAwOmQNRw75x+4yRtZCZJXUDmHHlFdkiV0wgv/reNjtJwpu1jPJ0w2kbEpIM0uoKI3S4/f39dU7AjSA==}
+  bundle-require@5.1.0:
+    resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     peerDependencies:
-      esbuild: '>=0.17'
+      esbuild: '>=0.18'
 
   busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
 
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -3399,8 +4129,16 @@ packages:
     resolution: {integrity: sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==}
     engines: {node: '>=8'}
 
-  call-bind@1.0.7:
-    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
     engines: {node: '>= 0.4'}
 
   callsites@3.1.0:
@@ -3425,30 +4163,29 @@ packages:
   camelize@1.0.1:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
 
-  caniuse-lite@1.0.30001627:
-    resolution: {integrity: sha512-4zgNiB8nTyV/tHhwZrFs88ryjls/lHiqFhrxCW4qSTeuRByBVnPYpDInchOIySWknznucaf31Z4KYqjfbrecVw==}
+  caniuse-lite@1.0.30001734:
+    resolution: {integrity: sha512-uhE1Ye5vgqju6OI71HTQqcBCZrvHugk0MjLak7Q+HfoBgoq5Bi+5YnwjP4fjDgrtYr/l8MVRBvzz9dPD4KyK0A==}
+
+  caniuse-lite@1.0.30001743:
+    resolution: {integrity: sha512-e6Ojr7RV14Un7dz6ASD0aZDmQPT/A+eZU+nuTNfjqmRrmkmQlnTNWH0SKmqagx9PeW87UVqapSurtAXifmtdmw==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
-  chai@5.1.1:
-    resolution: {integrity: sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==}
-    engines: {node: '>=12'}
+  chai@5.2.1:
+    resolution: {integrity: sha512-5nFxhUrX0PqtyogoYOA8IPswy5sZFTOsBFl/9bNsmDLgsxYTzSZQJDPppDnZPTQbzSEm0hqGjWPzRemQCYbD6A==}
+    engines: {node: '>=18'}
 
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
 
-  chalk@3.0.0:
-    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
-    engines: {node: '>=8'}
-
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
-  chalk@5.2.0:
-    resolution: {integrity: sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==}
+  chalk@5.5.0:
+    resolution: {integrity: sha512-1tm8DTaJhPBG3bIkVeZt1iZM9GfSX2lzOeDVZH9R9ffRHpmHvxZ/QhgQH/aDTkswQVt+YHdXAdS/In/30OjCbg==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
   change-case@5.4.4:
@@ -3473,28 +4210,53 @@ packages:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
     engines: {node: '>= 16'}
 
+  check-more-types@2.24.0:
+    resolution: {integrity: sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==}
+    engines: {node: '>= 0.8.0'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
   chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
 
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
+  chromium-bidi@0.11.0:
+    resolution: {integrity: sha512-6CJWHkNRoyZyjV9Rwv2lYONZf1Xm0IuDyNq97nwSsxxP3wf5Bwy15K5rOvVKMtJ127jJBmxFUanSAOjgFRxgrA==}
+    peerDependencies:
+      devtools-protocol: '*'
+
+  chrono-node@2.8.4:
+    resolution: {integrity: sha512-F+Rq88qF3H2dwjnFrl3TZrn5v4ZO57XxeQ+AhuL1C685So1hdUV/hT/q8Ja5UbmPYEZfx8VrxFDa72Dgldcxpg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   ci-info@3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
 
-  class-variance-authority@0.7.0:
-    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
-  cli-cursor@4.0.0:
-    resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
 
   cli-spinners@2.9.2:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
 
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -3503,9 +4265,6 @@ packages:
     peerDependencies:
       typanion: '*'
 
-  cliui@6.0.0:
-    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
-
   cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -3513,29 +4272,25 @@ packages:
   clone-response@1.0.3:
     resolution: {integrity: sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==}
 
-  clone@1.0.4:
-    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
-    engines: {node: '>=0.8'}
-
   clsx@1.2.1:
     resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
     engines: {node: '>=6'}
 
-  clsx@2.0.0:
-    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
-  cmdk@1.0.0:
-    resolution: {integrity: sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==}
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
     peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
 
   code-block-writer@12.0.0:
     resolution: {integrity: sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==}
 
-  code-block-writer@13.0.1:
-    resolution: {integrity: sha512-c5or4P6erEA69TxaxTNcHUNcIn+oyxSRTOWV+pSYF+z4epXqNvwvJ70XPGjPNgue83oAFAPBRQYwpAJ/Hpe/Sg==}
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
 
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
@@ -3560,32 +4315,58 @@ packages:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
-  commander@10.0.0:
-    resolution: {integrity: sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==}
-    engines: {node: '>=14'}
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
+  commander@14.0.0:
+    resolution: {integrity: sha512-2uM9rYjPvyq39NwLRqaiLtWHyDC1FvryJDa2ATTVims5YAS4PupsEQsDvP14FqhFr0P49CYDugi59xaxJlTXRA==}
+    engines: {node: '>=20'}
 
   commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
-  comment-json@4.2.3:
-    resolution: {integrity: sha512-SsxdiOf064DWoZLH799Ata6u7iV658A11PlWtZATDlXPpKGJnbJZ5Z24ybixAi+LUUqJ/GKowAejtC5GFUG7Tw==}
+  comment-json@4.2.5:
+    resolution: {integrity: sha512-bKw/r35jR3HGt5PEPm1ljsQQGyCrR8sFGNiN5L+ykDHdpO8Smxkrkla9Yi6NkQyUrb8V54PGhfMs6NrIwtxtdw==}
     engines: {node: '>= 6'}
 
   compare-func@2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
 
+  compute-scroll-into-view@3.1.1:
+    resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  concurrently@8.0.1:
-    resolution: {integrity: sha512-Sh8bGQMEL0TAmAm2meAXMjcASHZa7V0xXQVDBLknCPa9TPtkY9yYs+0cnGGgfdkW0SV1Mlg+hVGfXcoI8d3MJA==}
+  concurrently@8.2.2:
+    resolution: {integrity: sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==}
     engines: {node: ^14.13.0 || >=16.0.0}
     hasBin: true
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  content-disposition@1.0.0:
+    resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
+    engines: {node: '>= 0.6'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
   contentlayer2@0.4.6:
     resolution: {integrity: sha512-EhdabpVsn8u3EkoovGrLB/sIxWUlVJGNiYal9rZn0XJRjIyncGrhz9EJ9gn+z3cRHYUdHCuCMLW/ev6isgKXYw==}
     engines: {node: '>=14.18'}
@@ -3595,24 +4376,33 @@ packages:
     resolution: {integrity: sha512-6qLgrBF4gueoC7AFVHu51nHL9pF9FRjXrH+ceVf7WmAfH3gs+gEYOkvxhjMPjZu57I4AGUGoNTY8V7Hrgf1uqg==}
     engines: {node: '>=14'}
 
-  conventional-changelog-conventionalcommits@5.0.0:
-    resolution: {integrity: sha512-lCDbA+ZqVFQGUj7h9QBKoIpLhl8iihkO0nCTyRNzuXtcd7ubODpYB04IFy31JloiJgG0Uovu8ot8oxRzn7Nwtw==}
-    engines: {node: '>=10'}
+  conventional-changelog-conventionalcommits@6.1.0:
+    resolution: {integrity: sha512-3cS3GEtR78zTfMzk0AizXKKIdN4OvSh7ibNz6/DPbhWWQu7LqE/8+/GqSodV+sywUR2gpJAdP/1JFf4XtN7Zpw==}
+    engines: {node: '>=14'}
 
   conventional-commits-parser@4.0.0:
     resolution: {integrity: sha512-WRv5j1FsVM5FISJkoYMR6tPk07fkKT0UodruX4je86V4owk451yjXAKzKAPOs9l7y59E2viHUS9eQ+dfUA9NSg==}
     engines: {node: '>=14'}
     hasBin: true
 
-  convert-source-map@1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+
   cosmiconfig-typescript-loader@4.4.0:
     resolution: {integrity: sha512-BabizFdC3wBHhbI4kJh0VkQP9GkBfoHPydD0COMce1nJ1kJAB3F2TmJ/I7diULBKtmEWSwEbuN/KDtgnmUUVmw==}
     engines: {node: '>=v14.21.3'}
@@ -3622,10 +4412,6 @@ packages:
       ts-node: '>=10'
       typescript: '>=4'
 
-  cosmiconfig@8.1.3:
-    resolution: {integrity: sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==}
-    engines: {node: '>=14'}
-
   cosmiconfig@8.3.6:
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
@@ -3635,6 +4421,15 @@ packages:
       typescript:
         optional: true
 
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
@@ -3646,8 +4441,8 @@ packages:
   cross-spawn@5.1.0:
     resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
 
-  cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
   css-background-parser@0.1.0:
@@ -3671,19 +4466,6 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  csv-generate@3.4.3:
-    resolution: {integrity: sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==}
-
-  csv-parse@4.16.3:
-    resolution: {integrity: sha512-cO1I/zmz4w2dcKHVvpCr7JVRu8/FymG5OEpmvsZYlccYolPBLoVGKUHgNoc4ZGkFeFlWGEDmMyBM+TTqRdW/wg==}
-
-  csv-stringify@5.6.5:
-    resolution: {integrity: sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==}
-
-  csv@5.5.3:
-    resolution: {integrity: sha512-QTaY0XjjhTQOdguARF0lGKm5/mEq9PD9/VhZZegHDIBq2tQwgNpHc3dneD4mGo2iJs+fTKv5Bp0fZ+BRuY3Z0g==}
-    engines: {node: '>= 0.1.90'}
-
   d3-array@3.2.4:
     resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
     engines: {node: '>=12'}
@@ -3739,25 +4521,38 @@ packages:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
 
-  data-view-buffer@1.0.1:
-    resolution: {integrity: sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==}
+  data-uri-to-buffer@6.0.2:
+    resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
+    engines: {node: '>= 14'}
+
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
 
-  data-view-byte-length@1.0.1:
-    resolution: {integrity: sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==}
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
     engines: {node: '>= 0.4'}
 
-  data-view-byte-offset@1.0.0:
-    resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==}
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
   dataloader@1.4.0:
     resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
 
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
   date-fns@2.30.0:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -3766,8 +4561,8 @@ packages:
       supports-color:
         optional: true
 
-  debug@4.3.5:
-    resolution: {integrity: sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==}
+  debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
@@ -3786,8 +4581,8 @@ packages:
   decimal.js-light@2.5.1:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
 
-  decode-named-character-reference@1.0.2:
-    resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
+  decode-named-character-reference@1.2.0:
+    resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
 
   decompress-response@3.3.0:
     resolution: {integrity: sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==}
@@ -3797,6 +4592,14 @@ packages:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
 
+  dedent@1.6.0:
+    resolution: {integrity: sha512-F1Z+5UCFpmQUzJa11agbyPVMbpgT/qA3/SKyJ1jyBgm7dUcUEa8v9JwDkerSQXfakBwFljIxhOJqGkjUwZ9FSA==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
+
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
@@ -3812,9 +4615,6 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
-  defaults@1.0.4:
-    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
-
   defer-to-connect@1.1.3:
     resolution: {integrity: sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==}
 
@@ -3826,6 +4626,18 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  degenerator@5.0.1:
+    resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
+    engines: {node: '>= 14'}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -3834,8 +4646,8 @@ packages:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
 
-  detect-libc@2.0.3:
-    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
+  detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
   detect-node-es@1.1.0:
@@ -3844,6 +4656,9 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
+  devtools-protocol@0.0.1367902:
+    resolution: {integrity: sha512-XxtPuC3PGakY6PD7dG66/o8KwJ/LkH2/EKe19Dcw58w53dv4/vSQEkn/SzuyhHE2q4zPgCkxQBxus3VV4ql+Pg==}
+
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -3851,14 +4666,14 @@ packages:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
 
-  diff@5.1.0:
-    resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
-    engines: {node: '>=0.3.1'}
-
   diff@5.2.0:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
 
+  diff@8.0.2:
+    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
+    engines: {node: '>=0.3.1'}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -3881,39 +4696,82 @@ packages:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
     engines: {node: '>=8'}
 
+  dotenv@16.0.3:
+    resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
+    engines: {node: '>=12'}
+
+  dotenv@17.2.1:
+    resolution: {integrity: sha512-kQhDYKZecqnM0fCnzI5eIv5L4cAe/iRI+HqMbO/hbRdTAeXDG+M9FjipUxNfbARuEg4iHIbhnhs78BCHNbSxEQ==}
+    engines: {node: '>=12'}
+
   dotenv@8.6.0:
     resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==}
     engines: {node: '>=10'}
 
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
   duplexer3@0.1.5:
     resolution: {integrity: sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==}
 
+  duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  electron-to-chromium@1.4.788:
-    resolution: {integrity: sha512-ubp5+Ev/VV8KuRoWnfP2QF2Bg+O2ZFdb49DiiNbz2VmgkIqrnyYaqIOqj8A6K/3p1xV0QcU5hBQ1+BmB6ot1OA==}
+  eciesjs@0.4.15:
+    resolution: {integrity: sha512-r6kEJXDKecVOCj2nLMuXK/FCPeurW33+3JRpfXVbjLja3XUYFfD9I/JBreH6sUyzcm3G/YQboBjMla6poKeSdA==}
+    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  electron-to-chromium@1.5.218:
+    resolution: {integrity: sha512-uwwdN0TUHs8u6iRgN8vKeWZMRll4gBkz+QMqdS7DDe49uiK68/UX92lFb61oiFPrpYZNeZIqa4bA7O6Aiasnzg==}
 
   embla-carousel-autoplay@8.0.0-rc15:
     resolution: {integrity: sha512-ABTbDJGNb9jzI9OV2vSpbUvxUA0ELmK0SI3yPm8Haj3ghssS+vElfahoDqp7zuFkWBRih6w3B51oMPKdF5J55A==}
     peerDependencies:
       embla-carousel: 8.0.0-rc15
 
+  embla-carousel-autoplay@8.5.2:
+    resolution: {integrity: sha512-27emJ0px3q/c0kCHCjwRrEbYcyYUPfGO3g5IBWF1i7714TTzE6L9P81V6PHLoSMAKJ1aHoT2e7YFOsuFKCbyag==}
+    peerDependencies:
+      embla-carousel: 8.5.2
+
   embla-carousel-react@8.0.0-rc15:
     resolution: {integrity: sha512-PePOkyPMWsUDNJKYRhUmGScYhex9mfpEiYiKT8OgwP/4K60plW0qk8cAXWvS9N61A/3RkUq7uz+hQsmhAtYMcA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.1 || ^18.0.0
 
+  embla-carousel-react@8.5.2:
+    resolution: {integrity: sha512-Tmx+uY3MqseIGdwp0ScyUuxpBgx5jX1f7od4Cm5mDwg/dptEiTKf9xp6tw0lZN2VA9JbnVMl/aikmbc53c6QFA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   embla-carousel-reactive-utils@8.0.0-rc15:
     resolution: {integrity: sha512-17Pr+N2vULFS8Lxzi2jaebwVloiFJLpdJMJLKJKQ26NzEmX8pVtHSu3uuTWc8HPwye5HFugqCPJ2QoWWhKs6Kg==}
     peerDependencies:
       embla-carousel: 8.0.0-rc15
 
+  embla-carousel-reactive-utils@8.5.2:
+    resolution: {integrity: sha512-QC8/hYSK/pEmqEdU1IO5O+XNc/Ptmmq7uCB44vKplgLKhB/l0+yvYx0+Cv0sF6Ena8Srld5vUErZkT+yTahtDg==}
+    peerDependencies:
+      embla-carousel: 8.5.2
+
   embla-carousel@8.0.0-rc15:
     resolution: {integrity: sha512-s7VPexK2h8VEYjEVQFnJAPcRnY5YqJYicFxKVVyWXP3Hk9FFDkT0kqVxMM1PcL187qHOUgmGVHOrfC8xWy3OKQ==}
 
-  emoji-regex@10.3.0:
-    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
+  embla-carousel@8.5.2:
+    resolution: {integrity: sha512-xQ9oVLrun/eCG/7ru3R+I5bJ7shsD8fFwLEY7yPe27/+fDHCNj0OT5EoG5ZbFyOxOcG6yTwW8oTz/dWyFnyGpg==}
+
+  emoji-regex-xs@1.0.0:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
+
+  emoji-regex@10.4.0:
+    resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -3921,74 +4779,90 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
-  end-of-stream@1.4.4:
-    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
+  end-of-stream@1.4.5:
+    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
-  enhanced-resolve@5.16.1:
-    resolution: {integrity: sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==}
+  enhanced-resolve@5.18.3:
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
     engines: {node: '>=10.13.0'}
 
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
 
-  entities@4.5.0:
-    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
 
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
-  es-abstract@1.23.3:
-    resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
+  es-abstract@1.24.0:
+    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
     engines: {node: '>= 0.4'}
 
-  es-define-property@1.0.0:
-    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
 
   es-errors@1.3.0:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-iterator-helpers@1.0.19:
-    resolution: {integrity: sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==}
+  es-iterator-helpers@1.2.1:
+    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
     engines: {node: '>= 0.4'}
 
-  es-object-atoms@1.0.0:
-    resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
 
-  es-set-tostringtag@2.0.3:
-    resolution: {integrity: sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==}
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
-  es-shim-unscopables@1.0.2:
-    resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
 
-  es-to-primitive@1.2.1:
-    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
-  esbuild@0.17.19:
-    resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
-    engines: {node: '>=12'}
-    hasBin: true
+  esast-util-from-estree@2.0.0:
+    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
 
-  esbuild@0.18.20:
-    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
-    engines: {node: '>=12'}
-    hasBin: true
+  esast-util-from-js@2.0.1:
+    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
 
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
     hasBin: true
 
-  escalade@3.1.2:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
+  esbuild@0.25.8:
+    resolution: {integrity: sha512-vVC0USHGtMi8+R4Kz8rt6JhEWLxsv9Rnu/lGYbPR8u47B+DCBksq9JarW0zOO7bs37hyOK1l2/oqtbciutL5+Q==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
   escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -4001,8 +4875,13 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
-  eslint-config-next@13.0.0:
-    resolution: {integrity: sha512-y2nqWS2tycWySdVhb+rhp6CuDmDazGySqkzzQZf3UTyfHyC7og1m5m/AtMFwCo5mtvDqvw1BENin52kV9733lg==}
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
+  eslint-config-next@13.3.0:
+    resolution: {integrity: sha512-6YEwmFBX0VjBd3ODGW9df0Is0FLaRFdMN8eAahQG9CN6LjQ28J8AFr19ngxqMSg7Qv6Uca/3VeeBosJh1bzu0w==}
     peerDependencies:
       eslint: ^7.23.0 || ^8.0.0
       typescript: '>=3.3.1'
@@ -4010,45 +4889,44 @@ packages:
       typescript:
         optional: true
 
-  eslint-config-next@13.3.0:
-    resolution: {integrity: sha512-6YEwmFBX0VjBd3ODGW9df0Is0FLaRFdMN8eAahQG9CN6LjQ28J8AFr19ngxqMSg7Qv6Uca/3VeeBosJh1bzu0w==}
+  eslint-config-next@15.3.1:
+    resolution: {integrity: sha512-GnmyVd9TE/Ihe3RrvcafFhXErErtr2jS0JDeCSp3vWvy86AXwHsRBt0E3MqP/m8ACS1ivcsi5uaqjbhsG18qKw==}
     peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0
+      eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
       typescript: '>=3.3.1'
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  eslint-config-prettier@8.8.0:
-    resolution: {integrity: sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==}
+  eslint-config-prettier@8.10.2:
+    resolution: {integrity: sha512-/IGJ6+Dka158JnP5n5YFMOszjDWrXggGz1LaK/guZq9vZTmniaKlHcsscvkAhn9y4U+BU3JuUdYvtAMcv30y4A==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
 
-  eslint-config-turbo@1.9.9:
-    resolution: {integrity: sha512-OQLvRK9Ej/8HIEAW6e9hPu3nk1nCYWJ76voB4eOIaI2fYeIKC++0/r0zJPMOD8puo5V1DH+Gkd0XioKpL14ncg==}
+  eslint-config-turbo@1.13.4:
+    resolution: {integrity: sha512-+we4eWdZlmlEn7LnhXHCIPX/wtujbHCS7XjQM/TN09BHNEl2fZ8id4rHfdfUKIYTSKyy8U/nNyJ0DNoZj5Q8bw==}
     peerDependencies:
       eslint: '>6.6.0'
 
   eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
 
-  eslint-import-resolver-typescript@2.7.1:
-    resolution: {integrity: sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-
-  eslint-import-resolver-typescript@3.6.1:
-    resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==}
+  eslint-import-resolver-typescript@3.10.1:
+    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
       eslint-plugin-import: '*'
+      eslint-plugin-import-x: '*'
+    peerDependenciesMeta:
+      eslint-plugin-import:
+        optional: true
+      eslint-plugin-import-x:
+        optional: true
 
-  eslint-module-utils@2.8.1:
-    resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==}
+  eslint-module-utils@2.12.1:
+    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
     engines: {node: '>=4'}
     peerDependencies:
       '@typescript-eslint/parser': '*'
@@ -4068,21 +4946,21 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
 
-  eslint-plugin-import@2.29.1:
-    resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
+  eslint-plugin-import@2.32.0:
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
     engines: {node: '>=4'}
     peerDependencies:
       '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
     peerDependenciesMeta:
       '@typescript-eslint/parser':
         optional: true
 
-  eslint-plugin-jsx-a11y@6.8.0:
-    resolution: {integrity: sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==}
+  eslint-plugin-jsx-a11y@6.10.2:
+    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
     engines: {node: '>=4.0'}
     peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
 
   eslint-plugin-react-hooks@4.6.2:
     resolution: {integrity: sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==}
@@ -4090,11 +4968,17 @@ packages:
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
 
-  eslint-plugin-react@7.32.2:
-    resolution: {integrity: sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==}
+  eslint-plugin-react-hooks@5.2.0:
+    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+
+  eslint-plugin-react@7.37.5:
+    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
     engines: {node: '>=4'}
     peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
   eslint-plugin-tailwindcss@3.13.1:
     resolution: {integrity: sha512-2Nlgr9doO6vFAG9w4iGU0sspWXuzypfng10HTF+dFS2NterhweWtgdRvf/f7aaoOUUxVZM8wMIXzazrZ7CxyeA==}
@@ -4102,8 +4986,8 @@ packages:
     peerDependencies:
       tailwindcss: ^3.3.2
 
-  eslint-plugin-turbo@1.9.9:
-    resolution: {integrity: sha512-BgtBMcgNd2YKiHbn1clRiEAmnlpSl19kt9yfIhFEsNIVPg2Gx0O1H++vWXGzMtT19mjHG4Unx0uIMRENKnDYLg==}
+  eslint-plugin-turbo@1.13.4:
+    resolution: {integrity: sha512-82GfMzrewI/DJB92Bbch239GWbGx4j1zvjk1lqb06lxIlMPnVwUHVwPbAnLfyLG3JuhLv9whxGkO/q1CL18JTg==}
     peerDependencies:
       eslint: '>6.6.0'
 
@@ -4111,15 +4995,38 @@ packages:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint@8.44.0:
-    resolution: {integrity: sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==}
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@8.57.1:
+    resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
+  eslint@9.33.0:
+    resolution: {integrity: sha512-TS9bTNIryDzStCpJN93aC5VRSW3uTx9sClUn4B87pwiCaJh220otoI0X8mJKr+VcPtniMdN8GKjlwgWGUv5ZKA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4129,8 +5036,8 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
   esrecurse@4.3.0:
@@ -4150,11 +5057,14 @@ packages:
   estree-util-is-identifier-name@3.0.0:
     resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
 
+  estree-util-scope@1.0.0:
+    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
+
   estree-util-to-js@2.0.0:
     resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
 
-  estree-util-value-to-estree@3.1.2:
-    resolution: {integrity: sha512-S0gW2+XZkmsx00tU2uJ4L9hUT7IFabbml9pHh2WQqFmAbxit++YGZne0sKJbNwkj9Wvg9E4uqWl4nCIFQMmfag==}
+  estree-util-value-to-estree@3.4.0:
+    resolution: {integrity: sha512-Zlp+gxis+gCfK12d3Srl2PdX2ybsEA8ZYy6vQGVQTNNYLEGRQQ56XB64bjemN8kxIKXP1nC9ip4Z+ILy9LGzvQ==}
 
   estree-util-visit@2.0.0:
     resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
@@ -4166,9 +5076,24 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  event-stream@3.3.4:
+    resolution: {integrity: sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==}
+
   eventemitter3@4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
 
+  eventsource-parser@3.0.3:
+    resolution: {integrity: sha512-nVpZkTMM9rF6AQ9gPJpFsNAMt48wIzB5TQgiTLdHiuO8XEDhUgZEhqKlZWXbIzo9VmJ/HvysHqEaVeD5v9TPvA==}
+    engines: {node: '>=20.0.0'}
+
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
+
   execa@4.1.0:
     resolution: {integrity: sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==}
     engines: {node: '>=10'}
@@ -4177,18 +5102,32 @@ packages:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
 
-  execa@7.0.0:
-    resolution: {integrity: sha512-tQbH0pH/8LHTnwTrsKWideqi6rFB/QNUawEwrn+WHyz7PX1Tuz2u7wfTvbaNBdP5JD5LVWxNo8/A8CHNZ3bV6g==}
+  execa@7.2.0:
+    resolution: {integrity: sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==}
     engines: {node: ^14.18.0 || ^16.14.0 || >=18.0.0}
 
-  execa@8.0.1:
-    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
-    engines: {node: '>=16.17'}
+  execa@9.6.0:
+    resolution: {integrity: sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw==}
+    engines: {node: ^18.19.0 || >=20.5.0}
 
   expand-template@2.0.3:
     resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
     engines: {node: '>=6'}
 
+  expect-type@1.2.2:
+    resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==}
+    engines: {node: '>=12.0.0'}
+
+  express-rate-limit@7.5.1:
+    resolution: {integrity: sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
+  express@5.1.0:
+    resolution: {integrity: sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==}
+    engines: {node: '>= 18'}
+
   extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
     engines: {node: '>=0.10.0'}
@@ -4203,15 +5142,27 @@ packages:
     resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
     engines: {node: '>=4'}
 
+  extract-zip@2.0.1:
+    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
+    engines: {node: '>= 10.17.0'}
+    hasBin: true
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-equals@5.0.1:
-    resolution: {integrity: sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==}
+  fast-equals@5.2.2:
+    resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
     engines: {node: '>=6.0.0'}
 
-  fast-glob@3.3.2:
-    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+  fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
+
+  fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
 
   fast-json-stable-stringify@2.1.0:
@@ -4220,12 +5171,26 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  fastq@1.17.1:
-    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+  fast-uri@3.0.6:
+    resolution: {integrity: sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
   fault@2.0.1:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
 
+  fd-slicer@1.1.0:
+    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
+
+  fdir@6.4.6:
+    resolution: {integrity: sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   fetch-blob@3.2.0:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
@@ -4233,14 +5198,26 @@ packages:
   fflate@0.7.4:
     resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==}
 
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
 
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  finalhandler@2.1.0:
+    resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
+    engines: {node: '>= 0.8'}
+
   find-up@4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
@@ -4249,23 +5226,41 @@ packages:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
 
-  find-yarn-workspace-root2@1.2.16:
-    resolution: {integrity: sha512-hr6hb1w8ePMpPVUK39S4RlwJzi+xPLuVuG8XlwXU3KD5Yn3qgBWVfy3AzNlDhWvE1EORCE65/Qm26rFQt3VLVA==}
+  fix-dts-default-cjs-exports@1.0.1:
+    resolution: {integrity: sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg==}
 
   flat-cache@3.2.0:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
 
-  flatted@3.3.1:
-    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
 
-  for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
 
-  foreground-child@3.1.1:
-    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
+  form-data@4.0.4:
+    resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
+    engines: {node: '>= 6'}
+
   format@0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
@@ -4274,15 +5269,19 @@ packages:
     resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
     engines: {node: '>=12.20.0'}
 
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
-  framer-motion@11.0.24:
-    resolution: {integrity: sha512-l2iM8NR53qtcujgAqYvGPJJGModPNWEVUaATRDLfnaLvUoFpImovBm0AHalSSsY8tW6knP8mfJTW4WYGbnAe4w==}
+  framer-motion@11.18.2:
+    resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
-      react: ^18.0.0
-      react-dom: ^18.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@emotion/is-prop-valid':
         optional: true
@@ -4291,15 +5290,32 @@ packages:
       react-dom:
         optional: true
 
+  framer-motion@12.23.12:
+    resolution: {integrity: sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  from@0.1.7:
+    resolution: {integrity: sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==}
+
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
-  fs-extra@11.1.0:
-    resolution: {integrity: sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==}
-    engines: {node: '>=14.14'}
-
-  fs-extra@11.2.0:
-    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
+  fs-extra@11.3.1:
+    resolution: {integrity: sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==}
     engines: {node: '>=14.14'}
 
   fs-extra@7.0.1:
@@ -4318,20 +5334,71 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
+  fumadocs-core@15.3.1:
+    resolution: {integrity: sha512-xMRne357+0PbgKQFkfKMUVX1qq4daiqWlYbBEAh1ZMjcnRaYrKZ07HA8l893s8fwqFYdwvKv8kyPhz/Rk8Agpw==}
+    peerDependencies:
+      '@oramacloud/client': 1.x.x || 2.x.x
+      algoliasearch: 4.24.0
+      next: 14.x.x || 15.x.x
+      react: 18.x.x || 19.x.x
+      react-dom: 18.x.x || 19.x.x
+    peerDependenciesMeta:
+      '@oramacloud/client':
+        optional: true
+      algoliasearch:
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  fumadocs-docgen@2.0.0:
+    resolution: {integrity: sha512-jaM/rsCFEvC8rO6Nf0sYXDHp1xOWPAaz0zJHyFyt/CWFSj/nnBaeVIjN/bFX3ZUb93Nnx0I3s42NzAHYKsZI0w==}
+
+  fumadocs-mdx@11.6.3:
+    resolution: {integrity: sha512-R7ca68TDnPwJGx3YhCzIrcZfqo8Buq9k3piZMFV8ydO6gNJijdJ9iyddHi/D3DABfmMrgEL551EFxRsaDUU27A==}
+    hasBin: true
+    peerDependencies:
+      '@fumadocs/mdx-remote': ^1.2.0
+      fumadocs-core: ^14.0.0 || ^15.0.0
+      next: ^15.3.0
+    peerDependenciesMeta:
+      '@fumadocs/mdx-remote':
+        optional: true
+
+  fumadocs-ui@15.3.1:
+    resolution: {integrity: sha512-0IE7gUHguM0o+Au/QZdxCGRt7s4KbXYFl6rO2U+nfmw43+NH3i9Cw+v/XIuL1qjolFK2uorlKFYxuRVH2ZOuoQ==}
+    peerDependencies:
+      next: 14.x.x || 15.x.x
+      react: 18.x.x || 19.x.x
+      react-dom: 18.x.x || 19.x.x
+      tailwindcss: ^3.4.14 || ^4.0.0
+    peerDependenciesMeta:
+      tailwindcss:
+        optional: true
+
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  function.prototype.name@1.1.6:
-    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
     engines: {node: '>= 0.4'}
 
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
-  geist@1.2.2:
-    resolution: {integrity: sha512-uRDrxhvdnPwWJmh+K5+/5LXSKwvJzaYCl9tDXgiBi4hj7hB4K7+n/WLcvJMFs5btvyn0r9OSwCd1s6CmqAsxEw==}
+  fuzzysort@3.1.0:
+    resolution: {integrity: sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==}
+
+  fzf@0.5.2:
+    resolution: {integrity: sha512-Tt4kuxLXFKHy8KT40zwsUPUkg1CrsgY25FxA2U/j/0WgEDCk3ddc/zLTCCcbSHX9FcKtLuVaDGtGE/STWC+j3Q==}
+
+  geist@1.4.2:
+    resolution: {integrity: sha512-OQUga/KUc8ueijck6EbtT07L4tZ5+TZgjw8PyWfxo16sL5FWk7gNViPNU8hgCFjy6bJi9yuTP+CRpywzaGN8zw==}
     peerDependencies:
-      next: '>=13.2.0 <15'
+      next: '>=13.2.0'
 
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
@@ -4341,11 +5408,12 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
-  get-func-name@2.0.2:
-    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
+  get-east-asian-width@1.3.0:
+    resolution: {integrity: sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==}
+    engines: {node: '>=18'}
 
-  get-intrinsic@1.2.4:
-    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
   get-nonce@1.0.1:
@@ -4356,6 +5424,10 @@ packages:
     resolution: {integrity: sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==}
     engines: {node: '>=14.16'}
 
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
   get-stream@4.1.0:
     resolution: {integrity: sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==}
     engines: {node: '>=6'}
@@ -4368,16 +5440,20 @@ packages:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
 
-  get-stream@8.0.1:
-    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
-    engines: {node: '>=16'}
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
 
-  get-symbol-description@1.0.2:
-    resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
 
-  get-tsconfig@4.7.5:
-    resolution: {integrity: sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==}
+  get-tsconfig@4.10.1:
+    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
+
+  get-uri@6.0.5:
+    resolution: {integrity: sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==}
+    engines: {node: '>= 14'}
 
   git-raw-commits@2.0.11:
     resolution: {integrity: sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A==}
@@ -4398,13 +5474,12 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob@10.4.1:
-    resolution: {integrity: sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==}
-    engines: {node: '>=16 || 14 >=14.18'}
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
 
-  glob@11.0.0:
-    resolution: {integrity: sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==}
+  glob@11.0.3:
+    resolution: {integrity: sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==}
     engines: {node: 20 || >=22}
     hasBin: true
 
@@ -4416,18 +5491,22 @@ packages:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
 
+  glob@9.3.5:
+    resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   global-dirs@0.1.1:
     resolution: {integrity: sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==}
     engines: {node: '>=4'}
 
-  globals@11.12.0:
-    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
-    engines: {node: '>=4'}
-
   globals@13.24.0:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
 
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
   globalthis@1.0.4:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
@@ -4439,8 +5518,9 @@ packages:
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
-  gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
 
   got@9.6.0:
     resolution: {integrity: sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==}
@@ -4449,12 +5529,13 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  grapheme-splitter@1.0.4:
-    resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
-
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  graphql@16.11.0:
+    resolution: {integrity: sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+
   gray-matter@4.0.3:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
@@ -4463,8 +5544,9 @@ packages:
     resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
     engines: {node: '>=6'}
 
-  has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
 
   has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
@@ -4481,12 +5563,12 @@ packages:
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
-  has-proto@1.0.3:
-    resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
     engines: {node: '>= 0.4'}
 
-  has-symbols@1.0.3:
-    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
 
   has-tostringtag@1.0.2:
@@ -4497,18 +5579,21 @@ packages:
     resolution: {integrity: sha512-FwO1BUVWkyHasWDW4S8o0ssQXjvyghLV2rfVhnN36b2bbcj45eGiuzdn9XOvOpjV3TKQD7Gm2BWNXdE9V4KKYg==}
     engines: {node: '>=12'}
 
-  hash-wasm@4.11.0:
-    resolution: {integrity: sha512-HVusNXlVqHe0fzIzdQOGolnFN6mX/fqcrSAOcTBXdvzrXVHwTz11vXeKRmkR5gTuwVpvHZEIyKoePDvuAR+XwQ==}
+  hash-wasm@4.12.0:
+    resolution: {integrity: sha512-+/2B2rYLb48I/evdOIhP+K/DD2ca2fgBjp6O+GBEnCDk2e4rpeXIK8GvIyRPjTezgmWn9gmKwkQjjx6BtqDHVQ==}
 
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
   hast-util-from-parse5@7.1.2:
     resolution: {integrity: sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==}
 
-  hast-util-from-parse5@8.0.1:
-    resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
 
   hast-util-has-property@2.0.1:
     resolution: {integrity: sha512-X2+RwZIMTMKpXUzlotatPzWj8bspCymtXH3cfG3iQKV+wPF53Vgaqxi/eLqGck0wKq1kS9nvoB1wchbCPEL8sg==}
@@ -4528,30 +5613,27 @@ packages:
   hast-util-raw@7.2.3:
     resolution: {integrity: sha512-RujVQfVsOrxzPOPSzZFiwofMArbQke6DJjnFfceiEbFh7S05CbPt0cYN+A5YeD3pso0JQk6O1aHBnx9+Pm2uqg==}
 
-  hast-util-raw@9.0.4:
-    resolution: {integrity: sha512-LHE65TD2YiNsHD3YuXcKPHXPLuYh/gjp12mOfU8jxSrm1f/yJpsb0F/KKljS6U9LJoP0Ux+tCe8iJ2AsPzTdgA==}
-
-  hast-util-to-estree@3.1.0:
-    resolution: {integrity: sha512-lfX5g6hqVh9kjS/B9E2gSkvHH4SZNiQFiqWS0x9fENzEl+8W12RqdRxX6d/Cwxi30tPQs3bIO+aolQJNp1bIyw==}
+  hast-util-to-estree@3.1.3:
+    resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
 
   hast-util-to-html@8.0.4:
     resolution: {integrity: sha512-4tpQTUOr9BMjtYyNlt0P50mH7xj0Ks2xpo8M943Vykljf99HW6EzulIoJP1N3eKOSScEHzyzi9dm7/cn0RfGwA==}
 
-  hast-util-to-html@9.0.1:
-    resolution: {integrity: sha512-hZOofyZANbyWo+9RP75xIDV/gq+OUKx+T46IlwERnKmfpwp81XBFbT9mi26ws+SJchA4RVUQwIBJpqEOBhMzEQ==}
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
 
-  hast-util-to-jsx-runtime@2.3.0:
-    resolution: {integrity: sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==}
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
 
   hast-util-to-parse5@7.1.0:
     resolution: {integrity: sha512-YNRgAJkH2Jky5ySkIqFXTQiaqcAtJyVE+D5lkN6CdtOqrnkLfGYYrEcKuHOJZlp+MwjSwuD3fZuawI+sic/RBw==}
 
-  hast-util-to-parse5@8.0.0:
-    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
-
   hast-util-to-string@2.0.0:
     resolution: {integrity: sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==}
 
+  hast-util-to-string@3.0.1:
+    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
+
   hast-util-whitespace@2.0.1:
     resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
 
@@ -4561,8 +5643,11 @@ packages:
   hastscript@7.2.0:
     resolution: {integrity: sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==}
 
-  hastscript@8.0.0:
-    resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
+  headers-polyfill@4.0.3:
+    resolution: {integrity: sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==}
 
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
@@ -4577,15 +5662,24 @@ packages:
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
-  http-cache-semantics@4.1.1:
-    resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
+  http-cache-semantics@4.2.0:
+    resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
+
+  http-errors@2.0.0:
+    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
+    engines: {node: '>= 0.8'}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
 
-  https-proxy-agent@6.2.0:
-    resolution: {integrity: sha512-4xhCnMpxR9fupa7leh9uJK2P/qjYIeaM9uZ9c1bi1JDSwX2VH9NDk/oKSToNX4gBKa2WT31Mldne7e26ckohLQ==}
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
-  human-id@1.0.2:
-    resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==}
+  human-id@4.1.1:
+    resolution: {integrity: sha512-3gKm/gCSUipeLsRYZbbdA1BD83lBoWUkZ7G9VFrhWPAU76KwYo5KR8V28bpoPm/ygy0x5/GCbpRQdY7VLYCoIg==}
+    hasBin: true
 
   human-signals@1.1.1:
     resolution: {integrity: sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==}
@@ -4599,9 +5693,9 @@ packages:
     resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
     engines: {node: '>=14.18.0'}
 
-  human-signals@5.0.0:
-    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
-    engines: {node: '>=16.17.0'}
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
 
   hyperdyperid@1.2.0:
     resolution: {integrity: sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==}
@@ -4611,19 +5705,32 @@ packages:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
 
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
-  ignore@5.3.1:
-    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
-  imagescript@1.3.0:
-    resolution: {integrity: sha512-lCYzQrWzdnA68K03oMj/BUlBJrVBnslzDOgGFymAp49NmdGEJxGeN7sHh5mCva0nQkq+kkKSuru2zLf1m04+3A==}
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  image-size@2.0.2:
+    resolution: {integrity: sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w==}
+    engines: {node: '>=16.x'}
+    hasBin: true
+
+  imagescript@1.3.1:
+    resolution: {integrity: sha512-ue/zxSyEzj7je8Nlt2vjY9GEa2BbScFSRZJq7OTVDZFp0r57fyuxrlsF8qWgxTP+kP8WklTw4by/ZEYVX5S13w==}
     engines: {node: '>=14.0.0'}
 
-  import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
   imurmurhash@0.1.4:
@@ -4634,8 +5741,8 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
-  inflection@3.0.0:
-    resolution: {integrity: sha512-1zEJU1l19SgJlmwqsEyFTbScw/tkMHFenUo//Y0i+XEP83gDFdMvPizAD/WGcE+l1ku12PcTVHQhO6g5E0UCMw==}
+  inflection@3.0.2:
+    resolution: {integrity: sha512-+Bg3+kg+J6JUWn8J6bzFmOWkTQ6L/NHfDRSYU+EVvuKHDxUDHAXgqixHfVlzuBQaPOTac8hn43aPhMNk6rMe3g==}
     engines: {node: '>=18.0.0'}
 
   inflight@1.0.6:
@@ -4648,29 +5755,30 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
-  inline-style-parser@0.1.1:
-    resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
 
-  inline-style-parser@0.2.3:
-    resolution: {integrity: sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==}
-
-  input-otp@1.2.2:
-    resolution: {integrity: sha512-9x6UurPuc9Tb+ywWFcFrG4ryvScSmfLyj8D35dl/HNpSr9jZNtWiXufU65kaDHD/KYUop7hDFH+caZCUKdYNsg==}
-    deprecated: 'please run: npm install input-otp@latest'
+  input-otp@1.4.2:
+    resolution: {integrity: sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==}
     peerDependencies:
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
-  internal-slot@1.0.7:
-    resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
   internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
 
-  invariant@2.2.4:
-    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+  ip-address@9.0.5:
+    resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
+    engines: {node: '>= 12'}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
 
   is-alphabetical@2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
@@ -4678,12 +5786,8 @@ packages:
   is-alphanumerical@2.0.1:
     resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
 
-  is-arguments@1.1.1:
-    resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
-    engines: {node: '>= 0.4'}
-
-  is-array-buffer@3.0.4:
-    resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
 
   is-arrayish@0.2.1:
@@ -4692,42 +5796,43 @@ packages:
   is-arrayish@0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
 
-  is-async-function@2.0.0:
-    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
     engines: {node: '>= 0.4'}
 
-  is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
 
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
 
-  is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
     engines: {node: '>= 0.4'}
 
   is-buffer@2.0.5:
     resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
     engines: {node: '>=4'}
 
+  is-bun-module@2.0.0:
+    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
+
   is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
 
-  is-ci@3.0.1:
-    resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
-    hasBin: true
-
-  is-core-module@2.13.1:
-    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
 
-  is-data-view@1.0.1:
-    resolution: {integrity: sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==}
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
     engines: {node: '>= 0.4'}
 
-  is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
 
   is-decimal@2.0.1:
@@ -4741,15 +5846,16 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  is-finalizationregistry@1.0.2:
-    resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
 
   is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
-  is-generator-function@1.0.10:
-    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
+  is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
     engines: {node: '>= 0.4'}
 
   is-glob@4.0.3:
@@ -4767,16 +5873,15 @@ packages:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
 
-  is-nan@1.3.2:
-    resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
-    engines: {node: '>= 0.4'}
-
   is-negative-zero@2.0.3:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
 
-  is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
+  is-node-process@1.2.0:
+    resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
+
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
     engines: {node: '>= 0.4'}
 
   is-number@7.0.0:
@@ -4803,11 +5908,11 @@ packages:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
-  is-reference@3.0.2:
-    resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
 
-  is-regex@1.1.4:
-    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
 
   is-regexp@3.1.0:
@@ -4818,8 +5923,8 @@ packages:
     resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
     engines: {node: '>= 0.4'}
 
-  is-shared-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==}
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
     engines: {node: '>= 0.4'}
 
   is-stream@2.0.1:
@@ -4830,39 +5935,48 @@ packages:
     resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
     engines: {node: '>= 0.4'}
 
   is-subdir@1.2.0:
     resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
     engines: {node: '>=4'}
 
-  is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
     engines: {node: '>= 0.4'}
 
   is-text-path@1.0.1:
     resolution: {integrity: sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==}
     engines: {node: '>=0.10.0'}
 
-  is-typed-array@1.1.13:
-    resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
 
   is-unicode-supported@1.3.0:
     resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
     engines: {node: '>=12'}
 
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
   is-weakmap@2.0.2:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
 
-  is-weakref@1.0.2:
-    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
 
-  is-weakset@2.0.3:
-    resolution: {integrity: sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==}
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
     engines: {node: '>= 0.4'}
 
   is-windows@1.0.2:
@@ -4875,33 +5989,53 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  iterator.prototype@1.1.2:
-    resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
+  isexe@3.1.1:
+    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
+    engines: {node: '>=16'}
 
-  jackspeak@3.1.2:
-    resolution: {integrity: sha512-kWmLKn2tRtfYMF/BakihVVRzBKOxz4gJMiL2Rj91WnAB5TPZumSH99R/Yf1qE1u4uRimvCSJfm6hnxohXeEXjQ==}
-    engines: {node: '>=14'}
+  iterator.prototype@1.1.5:
+    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
+    engines: {node: '>= 0.4'}
 
-  jackspeak@4.0.1:
-    resolution: {integrity: sha512-cub8rahkh0Q/bw1+GxP7aeSe29hHHn2V4m29nnDlvCdlgU+3UGxkZp7Z53jLUdpX3jdTO0nJZUDl3xvbWc2Xog==}
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jackspeak@4.1.1:
+    resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==}
     engines: {node: 20 || >=22}
 
   javascript-natural-sort@0.7.1:
     resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
 
-  jiti@1.21.0:
-    resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  jiti@2.5.1:
+    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
     hasBin: true
 
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
-  jotai@2.1.0:
-    resolution: {integrity: sha512-fR82PtHAmEQrc/daMEYGc4EteW96/b6wodtDSCzLvoJA/6y4YG70er4hh2f8CYwYjqwQ0eZUModGfG4DmwkTyQ==}
+  joi@17.13.3:
+    resolution: {integrity: sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==}
+
+  jotai@2.13.1:
+    resolution: {integrity: sha512-cRsw6kFeGC9Z/D3egVKrTXRweycZ4z/k7i2MrfCzPYsL9SIWcPXTyqv258/+Ay8VUEcihNiE/coBLE6Kic6b8A==}
     engines: {node: '>=12.20.0'}
     peerDependencies:
+      '@babel/core': '>=7.0.0'
+      '@babel/template': '>=7.0.0'
+      '@types/react': '>=17.0.0'
       react: '>=17.0.0'
     peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@babel/template':
+        optional: true
+      '@types/react':
+        optional: true
       react:
         optional: true
 
@@ -4920,12 +6054,15 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsbi@4.3.0:
-    resolution: {integrity: sha512-SnZNcinB4RIcnEyZqFPdGPVgrg2AcnykiBy0sHVJQKHYeaLUvi3Exj+iaPpLnFVkDPZIV4U0yvgC9/R4uEAZ9g==}
+  jsbi@4.3.2:
+    resolution: {integrity: sha512-9fqMSQbhJykSeii05nxKl4m6Eqn2P6rOlYiS+C5Dr/HPIU/7yZxu5qzbs40tgaFORiw2Amd0mirjxatXYMkIew==}
 
-  jsesc@2.5.2:
-    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
-    engines: {node: '>=4'}
+  jsbn@1.1.0:
+    resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
     hasBin: true
 
   json-buffer@3.0.0:
@@ -4994,29 +6131,97 @@ packages:
     resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
     engines: {node: '>=0.10'}
 
+  lazy-ass@1.6.0:
+    resolution: {integrity: sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==}
+    engines: {node: '> 0.8'}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
 
-  lilconfig@3.1.1:
-    resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
 
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  little-date@1.0.0:
+    resolution: {integrity: sha512-41T/ktcwPzxC0OJ8E3wmaK0E1DL/QNR3n30kB9Dw6Ni6Eud24It8LZm70jK8lvDd+Mg+961fzKDcF6SQRL25cQ==}
+    engines: {node: '>=10'}
+
   load-tsconfig@0.2.5:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  load-yaml-file@0.2.0:
-    resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
-    engines: {node: '>=6'}
-
   locate-path@5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -5025,17 +6230,16 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
-  lodash._reinterpolate@3.0.0:
-    resolution: {integrity: sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==}
-
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
   lodash.clone@4.5.0:
     resolution: {integrity: sha512-GhrVeweiTD6uTmmn5hV/lzgCQhccwReIVRLHp7LT4SopOjqEZ5BbX8b5WWEtAKasjmy8hR7ZPwsYlxRCku5odg==}
+    deprecated: This package is deprecated. Use structuredClone instead.
 
   lodash.isequal@4.5.0:
     resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
 
   lodash.isfunction@3.0.9:
     resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
@@ -5061,12 +6265,6 @@ packages:
   lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
-  lodash.template@4.5.0:
-    resolution: {integrity: sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==}
-
-  lodash.templatesettings@4.2.0:
-    resolution: {integrity: sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==}
-
   lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
@@ -5076,12 +6274,12 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
-  log-symbols@5.1.0:
-    resolution: {integrity: sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==}
-    engines: {node: '>=12'}
+  log-symbols@6.0.0:
+    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+    engines: {node: '>=18'}
 
-  long@5.2.3:
-    resolution: {integrity: sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==}
+  long@5.3.2:
+    resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
 
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
@@ -5090,8 +6288,8 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
-  loupe@3.1.1:
-    resolution: {integrity: sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==}
+  loupe@3.2.0:
+    resolution: {integrity: sha512-2NCfZcT5VGVNX9mSZIxLRkEAegDGBpuQZBy13desuHeVORmBDyAET4TkJr4SjqQy3A8JDofMN6LpkK8Xcm/dlw==}
 
   lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
@@ -5104,12 +6302,11 @@ packages:
     resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
     engines: {node: '>=8'}
 
-  lru-cache@10.2.2:
-    resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
-    engines: {node: 14 || >=16.14}
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lru-cache@11.0.0:
-    resolution: {integrity: sha512-Qv32eSV1RSCfhY3fpPE2GNZ8jgM9X7rdAfemLWqTUxwiyIC4jJ6Sy0fZ8H+oLWevO6i4/bizg7c8d8i6bxrzbA==}
+  lru-cache@11.1.0:
+    resolution: {integrity: sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==}
     engines: {node: 20 || >=22}
 
   lru-cache@4.1.5:
@@ -5122,18 +6319,22 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
-  lucide-react@0.288.0:
-    resolution: {integrity: sha512-ikhb/9LOkq9orPoLV9lLC4UYyoXQycBhIgH7H59ahOkk0mkcAqkD52m84RXedE/qVqZHW8rEJquInT4xGmsNqw==}
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
+  lucide-react@0.474.0:
+    resolution: {integrity: sha512-CmghgHkh0OJNmxGKWc0qfPJCYHASPMVSyGY8fj3xgk4v84ItqDg64JNKFZn5hC6E0vHi6gxnbCgwhyVB09wQtA==}
     peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  lucide-react@0.359.0:
-    resolution: {integrity: sha512-bxVL+rM/wacjpT0BKShA6r5IIKb6LCRg+ltFG9pnnIwaRX8kK3hq8v5JwMpT7RC6XeqB5cSaaV6GapPWWmtliw==}
+  lucide-react@0.477.0:
+    resolution: {integrity: sha512-yCf7aYxerFZAbd8jHJxjwe1j7jEMPptjnaOqdYeirFnEy85cNR3/L+o0I875CYFYya+eEVzZSbNuRk8BZPDpVw==}
     peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  magic-string@0.30.10:
-    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
   make-error@1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
@@ -5146,33 +6347,40 @@ packages:
     resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
     engines: {node: '>=8'}
 
+  map-stream@0.1.0:
+    resolution: {integrity: sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==}
+
   markdown-extensions@2.0.0:
     resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
     engines: {node: '>=16'}
 
-  markdown-table@3.0.3:
-    resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
   markdown-wasm@1.2.0:
     resolution: {integrity: sha512-S12OTkyXCkOgI1n1rZY9cg4bK/PGu80Emjpvwp8BEjwCxhPV3yddF0U6+QhCitdBsI1tzWcoeahmW7k0Pq81OA==}
 
-  mdast-util-find-and-replace@3.0.1:
-    resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==}
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
   mdast-util-from-markdown@1.3.1:
     resolution: {integrity: sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==}
 
-  mdast-util-from-markdown@2.0.1:
-    resolution: {integrity: sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==}
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
 
   mdast-util-frontmatter@2.0.1:
     resolution: {integrity: sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA==}
 
-  mdast-util-gfm-autolink-literal@2.0.0:
-    resolution: {integrity: sha512-FyzMsduZZHSc3i0Px3PQcBT4WJY/X/RCtEJKuybiC6sjPqLv7h1yqAkmILZtuxMSsUyaLUWNp71+vQH2zqp5cg==}
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
 
-  mdast-util-gfm-footnote@2.0.0:
-    resolution: {integrity: sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==}
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
 
   mdast-util-gfm-strikethrough@2.0.0:
     resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
@@ -5183,14 +6391,14 @@ packages:
   mdast-util-gfm-task-list-item@2.0.0:
     resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
 
-  mdast-util-gfm@3.0.0:
-    resolution: {integrity: sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==}
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
 
-  mdast-util-mdx-expression@2.0.0:
-    resolution: {integrity: sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==}
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
 
-  mdast-util-mdx-jsx@3.1.2:
-    resolution: {integrity: sha512-eKMQDeywY2wlHc97k5eD8VC+9ASMjN8ItEZQNGwJ6E0XWKiW/Z0V5/H8pvoXUf+y+Mj0VIgeRRbujBmFn4FTyA==}
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
 
   mdast-util-mdx@3.0.0:
     resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
@@ -5210,8 +6418,8 @@ packages:
   mdast-util-to-markdown@1.5.0:
     resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==}
 
-  mdast-util-to-markdown@2.1.0:
-    resolution: {integrity: sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==}
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
 
   mdast-util-to-string@3.2.0:
     resolution: {integrity: sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==}
@@ -5222,24 +6430,28 @@ packages:
   mdast-util-toc@6.1.1:
     resolution: {integrity: sha512-Er21728Kow8hehecK2GZtb7Ny3omcoPUVrmObiSUwmoRYVZaXLR751QROEFjR8W/vAQdHMLj49Lz20J55XaNpw==}
 
-  mdx-bundler@10.0.2:
-    resolution: {integrity: sha512-0wF0zoCv+Ms4G+eSlk/jaKYoJHc0oXBaOma3kYlFJiKq9H8h41Dd66ioDBGF4noy80Pf7KTBQlyHfEpTqVml7A==}
+  mdx-bundler@10.1.1:
+    resolution: {integrity: sha512-87FtxC7miUPznwqEaAlJARinHJ6Qin9kDuG2E2BCCNEOszr62kHpqivI/IF/CmwObVSpvApVFFxN1ftM/Gykvw==}
     engines: {node: '>=18', npm: '>=6'}
     peerDependencies:
       esbuild: 0.*
 
-  memfs@4.9.3:
-    resolution: {integrity: sha512-bsYSSnirtYTWi1+OPMFb0M048evMKyUYe0EbtuGQgq6BVQM1g1W8/KIUJCCvjgI/El0j6Q4WsmMiBwLUBSw8LA==}
-    engines: {node: '>= 4.0.0'}
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
 
-  meow@6.1.1:
-    resolution: {integrity: sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg==}
-    engines: {node: '>=8'}
+  memfs@4.36.0:
+    resolution: {integrity: sha512-mfBfzGUdoEw5AZwG8E965ej3BbvW2F9LxEWj4uLxF6BEh1dO2N9eS3AGu9S6vfenuQYrVjsbUOOZK7y3vz4vyQ==}
+    engines: {node: '>= 4.0.0'}
 
   meow@8.1.2:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
 
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -5250,8 +6462,8 @@ packages:
   micromark-core-commonmark@1.1.0:
     resolution: {integrity: sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==}
 
-  micromark-core-commonmark@2.0.1:
-    resolution: {integrity: sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==}
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
   micromark-extension-frontmatter@2.0.0:
     resolution: {integrity: sha512-C4AkuM3dA58cgZha7zVnuVxBhDsbttIMiytjgsM2XbHAB2faRVaHRle40558FBN+DJcrLNCoqG5mlrpdU4cRtg==}
@@ -5265,8 +6477,8 @@ packages:
   micromark-extension-gfm-strikethrough@2.1.0:
     resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
 
-  micromark-extension-gfm-table@2.1.0:
-    resolution: {integrity: sha512-Ub2ncQv+fwD70/l4ou27b4YzfNaCJOvyX4HxXU15m7mpYY+rjuWzsLIPZHJL253Z643RpbcP1oeIJlQ/SKW67g==}
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
 
   micromark-extension-gfm-tagfilter@2.0.0:
     resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
@@ -5277,11 +6489,11 @@ packages:
   micromark-extension-gfm@3.0.0:
     resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
 
-  micromark-extension-mdx-expression@3.0.0:
-    resolution: {integrity: sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==}
+  micromark-extension-mdx-expression@3.0.1:
+    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
 
-  micromark-extension-mdx-jsx@3.0.0:
-    resolution: {integrity: sha512-uvhhss8OGuzR4/N17L1JwvmJIpPhAd8oByMawEKx6NVdBCbesjH4t+vjEp3ZXft9DwvlKSD07fCeI44/N0Vf2w==}
+  micromark-extension-mdx-jsx@3.0.2:
+    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
 
   micromark-extension-mdx-md@2.0.0:
     resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
@@ -5295,133 +6507,149 @@ packages:
   micromark-factory-destination@1.1.0:
     resolution: {integrity: sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==}
 
-  micromark-factory-destination@2.0.0:
-    resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==}
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
 
   micromark-factory-label@1.1.0:
     resolution: {integrity: sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==}
 
-  micromark-factory-label@2.0.0:
-    resolution: {integrity: sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==}
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
 
-  micromark-factory-mdx-expression@2.0.1:
-    resolution: {integrity: sha512-F0ccWIUHRLRrYp5TC9ZYXmZo+p2AM13ggbsW4T0b5CRKP8KHVRB8t4pwtBgTxtjRmwrK0Irwm7vs2JOZabHZfg==}
+  micromark-factory-mdx-expression@2.0.3:
+    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
 
   micromark-factory-space@1.1.0:
     resolution: {integrity: sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==}
 
-  micromark-factory-space@2.0.0:
-    resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==}
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
 
   micromark-factory-title@1.1.0:
     resolution: {integrity: sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==}
 
-  micromark-factory-title@2.0.0:
-    resolution: {integrity: sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==}
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
 
   micromark-factory-whitespace@1.1.0:
     resolution: {integrity: sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==}
 
-  micromark-factory-whitespace@2.0.0:
-    resolution: {integrity: sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==}
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
 
   micromark-util-character@1.2.0:
     resolution: {integrity: sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==}
 
-  micromark-util-character@2.1.0:
-    resolution: {integrity: sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==}
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
 
   micromark-util-chunked@1.1.0:
     resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==}
 
-  micromark-util-chunked@2.0.0:
-    resolution: {integrity: sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==}
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
 
   micromark-util-classify-character@1.1.0:
     resolution: {integrity: sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==}
 
-  micromark-util-classify-character@2.0.0:
-    resolution: {integrity: sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==}
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
 
   micromark-util-combine-extensions@1.1.0:
     resolution: {integrity: sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==}
 
-  micromark-util-combine-extensions@2.0.0:
-    resolution: {integrity: sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==}
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
 
   micromark-util-decode-numeric-character-reference@1.1.0:
     resolution: {integrity: sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==}
 
-  micromark-util-decode-numeric-character-reference@2.0.1:
-    resolution: {integrity: sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==}
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
 
   micromark-util-decode-string@1.1.0:
     resolution: {integrity: sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==}
 
-  micromark-util-decode-string@2.0.0:
-    resolution: {integrity: sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==}
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
 
   micromark-util-encode@1.1.0:
     resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==}
 
-  micromark-util-encode@2.0.0:
-    resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
 
-  micromark-util-events-to-acorn@2.0.2:
-    resolution: {integrity: sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==}
+  micromark-util-events-to-acorn@2.0.3:
+    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
 
   micromark-util-html-tag-name@1.2.0:
     resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
 
-  micromark-util-html-tag-name@2.0.0:
-    resolution: {integrity: sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==}
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
 
   micromark-util-normalize-identifier@1.1.0:
     resolution: {integrity: sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==}
 
-  micromark-util-normalize-identifier@2.0.0:
-    resolution: {integrity: sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==}
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
 
   micromark-util-resolve-all@1.1.0:
     resolution: {integrity: sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==}
 
-  micromark-util-resolve-all@2.0.0:
-    resolution: {integrity: sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==}
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
 
   micromark-util-sanitize-uri@1.2.0:
     resolution: {integrity: sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==}
 
-  micromark-util-sanitize-uri@2.0.0:
-    resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
 
   micromark-util-subtokenize@1.1.0:
     resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==}
 
-  micromark-util-subtokenize@2.0.1:
-    resolution: {integrity: sha512-jZNtiFl/1aY73yS3UGQkutD0UbhTt68qnRpw2Pifmz5wV9h8gOVsN70v+Lq/f1rKaU/W8pxRe8y8Q9FX1AOe1Q==}
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
 
   micromark-util-symbol@1.1.0:
     resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==}
 
-  micromark-util-symbol@2.0.0:
-    resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
 
   micromark-util-types@1.1.0:
     resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==}
 
-  micromark-util-types@2.0.0:
-    resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
 
   micromark@3.2.0:
     resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
 
-  micromark@4.0.0:
-    resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==}
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
 
-  micromatch@4.0.7:
-    resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.1:
+    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
+    engines: {node: '>= 0.6'}
+
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -5430,6 +6658,10 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
   mimic-response@1.0.1:
     resolution: {integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==}
     engines: {node: '>=4'}
@@ -5442,8 +6674,8 @@ packages:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
 
-  minimatch@10.0.1:
-    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
+  minimatch@10.0.3:
+    resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
     engines: {node: 20 || >=22}
 
   minimatch@3.1.2:
@@ -5453,8 +6685,12 @@ packages:
     resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==}
     engines: {node: '>=10'}
 
-  minimatch@9.0.4:
-    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
+  minimatch@8.0.4:
+    resolution: {integrity: sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
   minimist-options@4.1.0:
@@ -5464,13 +6700,20 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  minipass@4.2.8:
+    resolution: {integrity: sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==}
+    engines: {node: '>=8'}
+
   minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  mixme@0.5.10:
-    resolution: {integrity: sha512-5H76ANWinB1H3twpJ6JY8uvAtpmFvHNArpilJAjXRKXSDDLPIMoZArw5SH0q9z+lLs8IrMw7Q2VWpWimFKFT1Q==}
-    engines: {node: '>= 8.0.0'}
+  minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
   mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
@@ -5485,25 +6728,61 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  mlly@1.7.4:
+    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+
+  motion-dom@11.18.1:
+    resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
+
+  motion-dom@12.23.12:
+    resolution: {integrity: sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==}
+
+  motion-utils@11.18.1:
+    resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
+
+  motion-utils@12.23.6:
+    resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
+
+  motion@12.23.12:
+    resolution: {integrity: sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
 
-  ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  multimatch@4.0.0:
-    resolution: {integrity: sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==}
-    engines: {node: '>=8'}
+  msw@2.10.4:
+    resolution: {integrity: sha512-6R1or/qyele7q3RyPwNuvc0IxO8L8/Aim6Sz5ncXEgcWUNxSKE+udriTOWHtpMwmfkLYlacA2y7TIx4cL5lgHA==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      typescript: '>= 4.8.x'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  mute-stream@2.0.0:
+    resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
+    engines: {node: ^18.17.0 || >=20.5.0}
 
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
-  nanoid@3.3.7:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -5512,12 +6791,25 @@ packages:
     engines: {node: ^14 || ^16 || >=18}
     hasBin: true
 
-  napi-build-utils@1.0.2:
-    resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
+  napi-build-utils@2.0.0:
+    resolution: {integrity: sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==}
+
+  napi-postinstall@0.3.3:
+    resolution: {integrity: sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
 
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
+  netmask@2.0.2:
+    resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
+    engines: {node: '>= 0.4.0'}
+
   next-contentlayer2@0.4.6:
     resolution: {integrity: sha512-r1g/zCl3dXFfMlMI87n2+V90Jz7inMrfyRzmMSQdDfCBy3uexnsoM43wPbklza2teyd/pdfUT0I0gw/IE+YA4Q==}
     peerDependencies:
@@ -5526,59 +6818,65 @@ packages:
       react: '*'
       react-dom: '*'
 
-  next-themes@0.2.1:
-    resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
-      next: '*'
-      react: '*'
-      react-dom: '*'
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  next@14.1.3:
-    resolution: {integrity: sha512-oexgMV2MapI0UIWiXKkixF8J8ORxpy64OuJ/J9oVUmIthXOUCcuVEZX+dtpgq7wIfIqtBwQsKEDXejcjTsan9g==}
+  next@14.3.0-canary.43:
+    resolution: {integrity: sha512-d+Finbm5QXDN43SAkpqkinjRAU6o5tlJYsrKiWJqKmJYQ9/zB9WxjTeRuHVV1YJmLMSueO1zft88k+4cogJ/Ig==}
     engines: {node: '>=18.17.0'}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
       react: ^18.2.0
       react-dom: ^18.2.0
       sass: ^1.3.0
     peerDependenciesMeta:
       '@opentelemetry/api':
         optional: true
+      '@playwright/test':
+        optional: true
       sass:
         optional: true
 
-  next@14.3.0-canary.43:
-    resolution: {integrity: sha512-d+Finbm5QXDN43SAkpqkinjRAU6o5tlJYsrKiWJqKmJYQ9/zB9WxjTeRuHVV1YJmLMSueO1zft88k+4cogJ/Ig==}
-    engines: {node: '>=18.17.0'}
+  next@15.3.1:
+    resolution: {integrity: sha512-8+dDV0xNLOgHlyBxP1GwHGVaNXsmp+2NhZEYrXr24GWLHtt27YrBPbPuHvzlhi7kZNYjeJNR93IF5zfFu5UL0g==}
+    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
       '@playwright/test': ^1.41.2
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
       sass: ^1.3.0
     peerDependenciesMeta:
       '@opentelemetry/api':
         optional: true
       '@playwright/test':
         optional: true
+      babel-plugin-react-compiler:
+        optional: true
       sass:
         optional: true
 
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
-  node-abi@3.63.0:
-    resolution: {integrity: sha512-vAszCsOUrUxjGAmdnM/pq7gUgie0IRteCQMX6d4A534fQCR93EJU5qgzBvU6EkFfK27s0T3HEV3BOyJIr7OMYw==}
+  node-abi@3.75.0:
+    resolution: {integrity: sha512-OhYaY5sDsIka7H7AtijtI9jwGYLyl29eQn/W623DiN/MIv5sUqc4g7BIDThX+gb7di9f6xK02nkp8sdfFWZLTg==}
     engines: {node: '>=10'}
 
-  node-addon-api@5.1.0:
-    resolution: {integrity: sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==}
+  node-addon-api@6.1.0:
+    resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
 
   node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
 
   node-fetch@2.7.0:
     resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
@@ -5589,12 +6887,12 @@ packages:
       encoding:
         optional: true
 
-  node-fetch@3.3.0:
-    resolution: {integrity: sha512-BKwRP/O0UvoMKp7GNdwPlObhYGB5DQqwhEDQlNKuoqwVYSxkSZCSbHjnFFmUEtwSKRPU4kNK8PbDYYitwaE3QA==}
+  node-fetch@3.3.2:
+    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  node-releases@2.0.14:
-    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+  node-releases@2.0.21:
+    resolution: {integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==}
 
   normalize-package-data@2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
@@ -5623,6 +6921,14 @@ packages:
     resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
+  npm-to-yarn@3.0.1:
+    resolution: {integrity: sha512-tt6PvKu4WyzPwWUzy/hvPFqn+uwXO0K1ZHka8az3NnrhWJDmSqI8ncWq0fkL0k/lmmi5tAC11FXwXuh0rFbt1A==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -5631,23 +6937,24 @@ packages:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
 
-  object-inspect@1.13.1:
-    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
-
-  object-is@1.1.6:
-    resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==}
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
 
   object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
-  object.assign@4.1.5:
-    resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
+  object-treeify@1.1.33:
+    resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
+    engines: {node: '>= 10'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
-  object.entries@1.1.8:
-    resolution: {integrity: sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==}
+  object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
     engines: {node: '>= 0.4'}
 
   object.fromentries@2.0.8:
@@ -5658,13 +6965,13 @@ packages:
     resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
     engines: {node: '>= 0.4'}
 
-  object.hasown@1.1.4:
-    resolution: {integrity: sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==}
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
-  object.values@1.2.0:
-    resolution: {integrity: sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==}
-    engines: {node: '>= 0.4'}
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
 
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
@@ -5677,17 +6984,30 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
-  oo-ascii-tree@1.99.0:
-    resolution: {integrity: sha512-/BTLvFECySvAwOUeu/iSkhQk+WXH8FPcXOrjbadlnWuNwYtNH5jcEOxyBkL0sT6WvmFFsogRu2zLb2H/nPCJrQ==}
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  oniguruma-parser@0.12.1:
+    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
+
+  oniguruma-to-es@2.3.0:
+    resolution: {integrity: sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==}
+
+  oniguruma-to-es@4.3.3:
+    resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==}
+
+  oo-ascii-tree@1.113.0:
+    resolution: {integrity: sha512-9hGp+3S8qy0MSdBzp5pX2448Iv+w6QyXI6KBVihdt+Sb8nw1MxNu6ErMadTAXmyfCwZzZoEpn9hybTHEQuSJcQ==}
     engines: {node: '>= 14.17.0'}
 
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
-  ora@6.1.2:
-    resolution: {integrity: sha512-EJQ3NiP5Xo94wJXIzAyOtSb0QEIAUu7m8t6UZ9krbz0vAJqr92JpcK/lEXg91q6B9pEGqrykkd2EQplnifDSBw==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  ora@8.2.0:
+    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
+    engines: {node: '>=18'}
 
   os-tmpdir@1.0.2:
     resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
@@ -5696,7 +7016,17 @@ packages:
   outdent@0.5.0:
     resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
 
-  p-cancelable@1.1.0:
+  outvariant@1.4.3:
+    resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
+
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
+  oxc-transform@0.53.0:
+    resolution: {integrity: sha512-ovYJDZfHNLyXlkJBT0HTNHDPHp4JlyG+NePCLrGRT4c1xXOPZ1TWy8xu2shOuLo6n6fiMbpqZha3Ne7C8H7OJA==}
+
+  p-cancelable@1.1.0:
     resolution: {integrity: sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==}
     engines: {node: '>=6'}
 
@@ -5728,37 +7058,59 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
-  package-json-from-dist@1.0.0:
-    resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
+  pac-proxy-agent@7.2.0:
+    resolution: {integrity: sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==}
+    engines: {node: '>= 14'}
+
+  pac-resolver@7.0.1:
+    resolution: {integrity: sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==}
+    engines: {node: '>= 14'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
   package-json@6.5.0:
     resolution: {integrity: sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==}
     engines: {node: '>=8'}
 
+  package-manager-detector@0.2.11:
+    resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
+
+  package-manager-detector@1.3.0:
+    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
-  parse-entities@4.0.1:
-    resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==}
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
 
-  parse-github-url@1.0.2:
-    resolution: {integrity: sha512-kgBf6avCbO3Cn6+RnzRGLkUsv4ZVqv/VfAYkRsyBcgkshNvVBkRn1FEZcW0Jb+npXQWm2vHPnnOqFteZxRRGNw==}
-    engines: {node: '>=0.10.0'}
+  parse-github-url@1.0.3:
+    resolution: {integrity: sha512-tfalY5/4SqGaV/GIGzWyHnFjlpTPTNpENR9Ea2lLldSJ8EWXMsvacWucqY3m3I4YPtas15IxTLQVQ5NSYXPrww==}
+    engines: {node: '>= 0.10'}
     hasBin: true
 
   parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
   parse-numeric-range@1.3.0:
     resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==}
 
   parse5@6.0.1:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
 
-  parse5@7.1.2:
-    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
 
   pascal-case@3.1.2:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
@@ -5793,6 +7145,13 @@ packages:
     resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
     engines: {node: 20 || >=22}
 
+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
+
+  path-to-regexp@8.2.0:
+    resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
+    engines: {node: '>=16'}
+
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -5800,20 +7159,34 @@ packages:
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
-  pathval@2.0.0:
-    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
     engines: {node: '>= 14.16'}
 
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
+  pause-stream@0.0.11:
+    resolution: {integrity: sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==}
 
-  picocolors@1.0.1:
-    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+  pend@1.2.0:
+    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  picomatch@3.0.1:
+    resolution: {integrity: sha512-I3EurrIQMlRc9IaAZnqRR044Phh2DXY+55o7uJ0V+hYZAcQYSuFWsc9q5PvyDHUSCe1Qxn/iBz+78s86zWnGag==}
+    engines: {node: '>=10'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
   pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
@@ -5822,16 +7195,19 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
-  pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
 
-  pkg-dir@4.2.0:
-    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
-    engines: {node: '>=8'}
+  pkce-challenge@5.0.0:
+    resolution: {integrity: sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==}
+    engines: {node: '>=16.20.0'}
 
-  possible-typed-array-names@1.0.0:
-    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
   postcss-import@15.1.0:
@@ -5846,9 +7222,9 @@ packages:
     peerDependencies:
       postcss: ^8.4.21
 
-  postcss-load-config@3.1.4:
-    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
-    engines: {node: '>= 10'}
+  postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
     peerDependencies:
       postcss: '>=8.0.9'
       ts-node: '>=9.0.0'
@@ -5858,56 +7234,54 @@ packages:
       ts-node:
         optional: true
 
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
     peerDependencies:
+      jiti: '>=1.21.0'
       postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
     peerDependenciesMeta:
+      jiti:
+        optional: true
       postcss:
         optional: true
-      ts-node:
+      tsx:
+        optional: true
+      yaml:
         optional: true
 
-  postcss-nested@6.0.1:
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
 
-  postcss-selector-parser@6.1.0:
-    resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
 
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.4.24:
-    resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.4.38:
-    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
-    engines: {node: ^10 || ^12 || >=14}
-
-  postcss@8.4.41:
-    resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  prebuild-install@7.1.2:
-    resolution: {integrity: sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==}
+  prebuild-install@7.1.3:
+    resolution: {integrity: sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==}
     engines: {node: '>=10'}
     hasBin: true
 
-  preferred-pm@3.1.3:
-    resolution: {integrity: sha512-MkXsENfftWSRpzCzImcp4FRsCc3y1opwB73CfCNWyzMqArju2CrlMHlqB7VexKiPEOjGMbttv1r9fSCn5S610w==}
-    engines: {node: '>=10'}
-
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -5916,17 +7290,91 @@ packages:
     resolution: {integrity: sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==}
     engines: {node: '>=4'}
 
+  prettier-plugin-tailwindcss@0.6.14:
+    resolution: {integrity: sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  pretty-quick@3.1.3:
-    resolution: {integrity: sha512-kOCi2FJabvuh1as9enxYmrnBC6tVMoVOenMaBqRfsvBHB0cbpYHjdQEpSglpASDFEXVwplpcGR4CLEaisYAFcA==}
+  prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  pretty-ms@9.2.0:
+    resolution: {integrity: sha512-4yf0QO/sllf/1zbZWYnvWw3NxCQwLXKzIj0G849LSufP15BXKM0rbD2Z3wVnkMfjdn/CB0Dpp444gYAACdsplg==}
+    engines: {node: '>=18'}
+
+  pretty-quick@3.3.1:
+    resolution: {integrity: sha512-3b36UXfYQ+IXXqex6mCca89jC8u0mYLqFAN5eTQKoXO6oCQYcIVYZEB/5AlBHI7JPYygReM2Vv6Vom/Gln7fBg==}
     engines: {node: '>=10.13'}
     hasBin: true
     peerDependencies:
-      prettier: '>=2.0.0'
+      prettier: ^2.0.0
+
+  progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
 
   prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
@@ -5938,27 +7386,61 @@ packages:
   property-information@6.5.0:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
 
-  protobufjs@7.3.0:
-    resolution: {integrity: sha512-YWD03n3shzV9ImZRX3ccbjqLxj7NokGN0V/ESiBV5xWqrommYHYiihuIyavq03pWSGqlyvYUFmfoMKd+1rPA/g==}
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
+  protobufjs@7.5.3:
+    resolution: {integrity: sha512-sildjKwVqOI2kmFDiXQ6aEB0fjYTafpEvIBs8tOR8qI4spuL9OPROLVu2qZqi/xgCfsHIwVqlaF8JBjWFHnKbw==}
     engines: {node: '>=12.0.0'}
 
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
+  proxy-agent@6.5.0:
+    resolution: {integrity: sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==}
+    engines: {node: '>= 14'}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  ps-tree@1.2.0:
+    resolution: {integrity: sha512-0VnamPPYHl4uaU/nSFeZZpR21QAWRz+sRv4iW9+v/GS/J5U5iZB5BNN6J0RMoOvdx2gWM2+ZFMIm58q24e4UYA==}
+    engines: {node: '>= 0.10'}
+    hasBin: true
+
   pseudomap@1.0.2:
     resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
 
-  pump@3.0.0:
-    resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
+  psl@1.15.0:
+    resolution: {integrity: sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==}
+
+  pump@3.0.3:
+    resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
 
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  q@1.5.1:
-    resolution: {integrity: sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==}
-    engines: {node: '>=0.6.0', teleport: '>=0.2.0'}
-    deprecated: |-
-      You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.
+  puppeteer-core@23.11.1:
+    resolution: {integrity: sha512-3HZ2/7hdDKZvZQ7dhhITOUg4/wOrDRjyK2ZBllRB0ZCOi9u0cwq1ACHDjBB+nX+7+kltHjQvBRdeY7+W0T+7Gg==}
+    engines: {node: '>=18'}
+
+  puppeteer@23.11.1:
+    resolution: {integrity: sha512-53uIX3KR5en8l7Vd8n5DUv90Ae9QDQsyIthaUFVzwV6yU750RjqRznEtNMBT20VthqAdemnJN+hxVdmMHKt7Zw==}
+    engines: {node: '>=18'}
+    deprecated: < 24.9.0 is no longer supported
+    hasBin: true
+
+  qs@6.14.0:
+    resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
+    engines: {node: '>=0.6'}
 
-      (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
+  quansync@0.2.10:
+    resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
+
+  querystringify@2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
 
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
@@ -5967,78 +7449,90 @@ packages:
     resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
     engines: {node: '>=8'}
 
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@3.0.0:
+    resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
+    engines: {node: '>= 0.8'}
+
   rc@1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
-  react-day-picker@8.7.1:
-    resolution: {integrity: sha512-Gv426AW8b151CZfh3aP5RUGztLwHB/EyJgWZ5iMgtzbFBkjHfG6Y66CIQFMWGLnYjsQ9DYSJRmJ5S0Pg5HWKjA==}
+  react-day-picker@9.8.1:
+    resolution: {integrity: sha512-kMcLrp3PfN/asVJayVv82IjF3iLOOxuH5TNFWezX6lS/T8iVRFPTETpHl3TUSTH99IDMZLubdNPJr++rQctkEw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
-      date-fns: ^2.28.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^18.3.1
 
-  react-dom@18.2.0:
-    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+  react-dom@19.1.0:
+    resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
     peerDependencies:
-      react: ^18.2.0
+      react: ^19.1.0
 
-  react-hook-form@7.44.2:
-    resolution: {integrity: sha512-IyihmIbCwzDI/iqlecTRa7+4BCnzNx40upSlGvIU7qwENhTf6APatm4bmL9ANtWKPYlD67SIlxfls7GwCUe+Lg==}
-    engines: {node: '>=12.22.0'}
+  react-hook-form@7.62.0:
+    resolution: {integrity: sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==}
+    engines: {node: '>=18.0.0'}
     peerDependencies:
-      react: ^16.8.0 || ^17 || ^18
+      react: ^16.8.0 || ^17 || ^18 || ^19
 
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
-  react-remove-scroll-bar@2.3.6:
-    resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
-    engines: {node: '>=10'}
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  react-medium-image-zoom@5.3.0:
+    resolution: {integrity: sha512-RCIzVlsKqy3BYgGgYbolUfuvx0aSKC7YhX/IJGEp+WJxsqdIVYJHkBdj++FAj6VD7RiWj6VVmdCfa/9vJE9hZg==}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  react-remove-scroll@2.5.5:
-    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  react-remove-scroll@2.5.7:
-    resolution: {integrity: sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==}
+  react-remove-scroll@2.7.1:
+    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  react-resizable-panels@2.0.22:
-    resolution: {integrity: sha512-G8x8o7wjQxCG+iF4x4ngKVBpe0CY+DAZ/SaiDoqBEt0yuKJe9OE/VVYMBMMugQ3GyQ65NnSJt23tujlaZZe75A==}
+  react-resizable-panels@2.1.9:
+    resolution: {integrity: sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ==}
     peerDependencies:
-      react: ^16.14.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
-  react-smooth@4.0.1:
-    resolution: {integrity: sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==}
+  react-smooth@4.0.4:
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  react-style-singleton@2.2.1:
-    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -6054,8 +7548,12 @@ packages:
     peerDependencies:
       react: ^18.0.0
 
-  react@18.2.0:
-    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
+  react@19.1.0:
+    resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
 
   read-cache@1.0.0:
@@ -6081,8 +7579,12 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  recast@0.23.2:
-    resolution: {integrity: sha512-Qv6cPfVZyMOtPszK6PgW70pUgm7gPlFitAPf0Q69rlOA0zLw2XdDcNmPbVGYicFGT9O8I7TZ/0ryJD+6COvIPw==}
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
     engines: {node: '>= 4'}
 
   recharts-scale@0.4.5:
@@ -6095,19 +7597,52 @@ packages:
       react: ^16.0.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
 
+  recharts@2.15.1:
+    resolution: {integrity: sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.1:
+    resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
   redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
-  reflect.getprototypeof@1.0.6:
-    resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
 
-  regenerator-runtime@0.14.1:
-    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+  regex-recursion@5.1.1:
+    resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==}
 
-  regexp.prototype.flags@1.5.2:
-    resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@5.1.1:
+    resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==}
+
+  regex@6.0.1:
+    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
+
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
 
   registry-auth-token@4.2.2:
@@ -6124,17 +7659,29 @@ packages:
   rehype-parse@8.0.5:
     resolution: {integrity: sha512-Ds3RglaY/+clEX2U2mHflt7NlMA72KspZ0JLUJgBBLpRddBcEw3H8uYZQliQriku22NZpYMfjDdSgHcjxue24A==}
 
+  rehype-parse@9.0.1:
+    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
+
+  rehype-pretty-code@0.14.1:
+    resolution: {integrity: sha512-IpG4OL0iYlbx78muVldsK86hdfNoht0z63AP7sekQNW2QOTmjxB7RbTO+rhIYNGRljgHxgVZoPwUl6bIC9SbjA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      shiki: ^1.0.0 || ^2.0.0 || ^3.0.0
+
   rehype-pretty-code@0.6.0:
     resolution: {integrity: sha512-VfntYoWYOBVURXYDdB8p/E1sZTm2W5ry89fJyY94WJAo1jUH/5sVhDC7cX5PPnksMyW9PYMxRLNfjkBpSgJrzQ==}
     engines: {node: ^12.16.0 || >=13.2.0}
     peerDependencies:
       shiki: '*'
 
+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
+
   rehype-slug@5.1.0:
     resolution: {integrity: sha512-Gf91dJoXneiorNEnn+Phx97CO7oRMrpi+6r155tTxzGuLtm+QrI4cTwCa9e1rtePdL4i9tSO58PeSS6HWfgsiw==}
 
-  rehype-stringify@10.0.0:
-    resolution: {integrity: sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==}
+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
 
   rehype-stringify@9.0.4:
     resolution: {integrity: sha512-Uk5xu1YKdqobe5XpSskwPvo1XeHUUucWEQSl8hTrXt5selvca1e8K1EZ37E6YoZ4BT8BCqCdVfQW7OfHfthtVQ==}
@@ -6149,14 +7696,14 @@ packages:
   remark-frontmatter@5.0.0:
     resolution: {integrity: sha512-XTFYvNASMe5iPN0719nPrdItC9aU0ssC4v14mH1BCi1u0n1gAocqcujWUrByftZTbLhRtiKRyjYTSIOcr69UVQ==}
 
-  remark-gfm@4.0.0:
-    resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==}
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
   remark-mdx-frontmatter@4.0.0:
     resolution: {integrity: sha512-PZzAiDGOEfv1Ua7exQ8S5kKxkD8CDaSb4nM+1Mprs6u8dyvQifakh+kCj6NovfGXW+bTvrhjaR3srzjS2qJHKg==}
 
-  remark-mdx@3.0.1:
-    resolution: {integrity: sha512-3Pz3yPQ5Rht2pM5R+0J2MrGoBSrzf+tJG94N+t/ilfdh8YLyyKYtidAYwTveB20BoHAcwIopOUqhcmh2F7hGYA==}
+  remark-mdx@3.1.0:
+    resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==}
 
   remark-parse@10.0.2:
     resolution: {integrity: sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==}
@@ -6164,8 +7711,8 @@ packages:
   remark-parse@11.0.0:
     resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
 
-  remark-rehype@11.1.0:
-    resolution: {integrity: sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==}
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
 
   remark-stringify@10.0.3:
     resolution: {integrity: sha512-koyOzCMYoUHudypbj4XpnAKFbkddRMYZHwghnxd7ue5210WzGw6kOBwauJTRUMq16jsovXx8dYNvSSWP89kZ3A==}
@@ -6176,6 +7723,9 @@ packages:
   remark@14.0.3:
     resolution: {integrity: sha512-bfmJW1dmR2LvaMJuAnE88pZP9DktIFYXazkTfOIKZzi3Knk9lT0roItIA24ydOucI3bV/g/tXBA6hzqq3FV9Ew==}
 
+  remark@15.0.1:
+    resolution: {integrity: sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==}
+
   repeat-string@1.6.1:
     resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
     engines: {node: '>=0.10'}
@@ -6188,8 +7738,8 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
-  require-main-filename@2.0.0:
-    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+  requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
@@ -6206,8 +7756,9 @@ packages:
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
-  resolve@1.22.8:
-    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
     hasBin: true
 
   resolve@2.0.0-next.5:
@@ -6217,12 +7768,12 @@ packages:
   responselike@1.0.2:
     resolution: {integrity: sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ==}
 
-  restore-cursor@4.0.0:
-    resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
 
-  reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
   rimraf@3.0.2:
@@ -6230,10 +7781,9 @@ packages:
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
-  rimraf@4.1.3:
-    resolution: {integrity: sha512-iyzalDLo3l5FZxxaIGUY7xI4Bf90Xt7pCipc1Mr7RsdU7H3538z+M0tlsUDrz0aHeGS9uNqiKHUJyTewwRP91Q==}
+  rimraf@4.4.1:
+    resolution: {integrity: sha512-Gk8NlF062+T9CqNGn6h4tls3k6T1+/nXdOcSZVikNVtlRdYpA7wRJJMoXmuvOnLW844rPjdQ7JgXCYM6PPC/og==}
     engines: {node: '>=14'}
-    deprecated: Please upgrade to 4.3.1 or higher to fix a potentially damaging issue regarding symbolic link following. See https://github.com/isaacs/rimraf/issues/259 for details.
     hasBin: true
 
   rimraf@6.0.1:
@@ -6241,35 +7791,38 @@ packages:
     engines: {node: 20 || >=22}
     hasBin: true
 
-  rollup@3.29.4:
-    resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
-    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
-    hasBin: true
-
-  rollup@4.21.0:
-    resolution: {integrity: sha512-vo+S/lfA2lMS7rZ2Qoubi6I5hwZwzXeUIctILZLbHI+laNtvhhOIon2S1JksA5UEDQ7l3vberd0fxK44lTYjbQ==}
+  rollup@4.46.2:
+    resolution: {integrity: sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
-  rxjs@7.8.1:
-    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
 
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
 
-  safe-array-concat@1.1.2:
-    resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
 
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
-  safe-regex-test@1.0.3:
-    resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
   safer-buffer@2.1.2:
@@ -6282,6 +7835,12 @@ packages:
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
+  scheduler@0.26.0:
+    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
+
+  scroll-into-view-if-needed@3.1.0:
+    resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
+
   section-matter@1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
@@ -6302,16 +7861,18 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.6.2:
-    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
     engines: {node: '>=10'}
     hasBin: true
 
-  server-only@0.0.1:
-    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+  send@1.2.0:
+    resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
+    engines: {node: '>= 18'}
 
-  set-blocking@2.0.0:
-    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+  serve-static@2.2.0:
+    resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
+    engines: {node: '>= 18'}
 
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
@@ -6321,13 +7882,24 @@ packages:
     resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
     engines: {node: '>= 0.4'}
 
-  sharp@0.31.3:
-    resolution: {integrity: sha512-XcR4+FCLBFKw1bdB+GEhnUNXNXvnt0tDo4WsBsraKymuo/IAuPuCBVAL2wIkUw2r/dwFW5Q5+g66Kwl2dgDFVg==}
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  sharp@0.32.6:
+    resolution: {integrity: sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==}
     engines: {node: '>=14.15.0'}
 
-  sharp@0.33.4:
-    resolution: {integrity: sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==}
-    engines: {libvips: '>=8.15.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  sharp@0.33.5:
+    resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  sharp@0.34.3:
+    resolution: {integrity: sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
   shebang-command@1.2.0:
     resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
@@ -6345,17 +7917,30 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shell-quote@1.8.1:
-    resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
+  shell-quote@1.8.3:
+    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+    engines: {node: '>= 0.4'}
+
+  shiki@1.29.2:
+    resolution: {integrity: sha512-njXuliz/cP+67jU2hukkxCNuH1yUi4QfdZZY+sMr5PPrIyXSu5iTb/qYC4BiWWB0vZ+7TbdvYUCeL23zpwCfbg==}
 
-  shiki@1.1.7:
-    resolution: {integrity: sha512-9kUTMjZtcPH3i7vHunA6EraTPpPOITYTdA5uMrvsJRexktqP0s7P3s9HVK80b4pP42FRVe03D7fT3NmJv2yYhw==}
+  shiki@3.9.2:
+    resolution: {integrity: sha512-t6NKl5e/zGTvw/IyftLcumolgOczhuroqwXngDeMqJ3h3EQiTY/7wmfgPlsmloD8oYfqkEDqxiaH37Pjm1zUhQ==}
 
-  shiki@1.10.3:
-    resolution: {integrity: sha512-eneCLncGuvPdTutJuLyUGS8QNPAVFO5Trvld2wgEq1e002mwctAhJKeMGWtWVXOIEzmlcLRqcgPSorR6AVzOmQ==}
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
 
-  side-channel@1.0.6:
-    resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
   siginfo@2.0.0:
@@ -6384,23 +7969,36 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
-  smartwrap@2.0.2:
-    resolution: {integrity: sha512-vCsKNQxb7PnCNd2wY1WClWifAc2lwqsG8OaswpJkVJsvMGcnEntdTCDajZCkk93Ay1U3t/9puJmb525Rg5MZBA==}
-    engines: {node: '>=6'}
-    hasBin: true
+  smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+
+  socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
+    engines: {node: '>= 14'}
+
+  socks@2.8.6:
+    resolution: {integrity: sha512-pe4Y2yzru68lXCb38aAqRf5gvN8YdjP1lok5o0J7BOHljkyCGKVz7H3vpVIXKD27rj2giOJ7DwVyk/GWrPHDWA==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
-  sonner@1.2.3:
-    resolution: {integrity: sha512-LMr155izOFA8hudzuUVQT0H93VqmcF9ODP475YjjC/4INESYWN1/ioC5SYRG20jmDmwuQDR8ugP7y6ELghT6JQ==}
+  sonner@1.7.4:
+    resolution: {integrity: sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==}
     peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  sonner@2.0.7:
+    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
-  sort-keys@5.0.0:
-    resolution: {integrity: sha512-Pdz01AvCAottHTPQGzndktFNdbRA75BgOfeT1hH+AMnJFv8lynkPi42rfeEhpx1saTEI3YNMWxfqu0sFD1G8pw==}
+  sort-keys@5.1.0:
+    resolution: {integrity: sha512-aSbHV0DaBcr7u0PVHXzM6NbZNAtrr9sF6+Qfs9UUVG7Ll3jQ6hHi8F/xqIIcn2rvIVbr0v/2zyjSdwSV47AgLQ==}
     engines: {node: '>=12'}
 
-  source-map-js@1.2.0:
-    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
   source-map-support@0.5.21:
@@ -6410,23 +8008,27 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
-  source-map@0.7.4:
-    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
-    engines: {node: '>= 8'}
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
 
   source-map@0.8.0-beta.0:
     resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
     engines: {node: '>= 8'}
+    deprecated: The work that was done in this beta branch won't be included in future versions
 
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
-  spawn-command@0.0.2-1:
-    resolution: {integrity: sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==}
+  spawn-command@0.0.2:
+    resolution: {integrity: sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==}
 
   spawndamnit@2.0.0:
     resolution: {integrity: sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==}
 
+  spawndamnit@3.0.1:
+    resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
+
   spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
 
@@ -6436,28 +8038,64 @@ packages:
   spdx-expression-parse@3.0.1:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
 
-  spdx-license-ids@3.0.18:
-    resolution: {integrity: sha512-xxRs31BqRYHwiMzudOrpSiHtZ8i/GeionCBDSilhYRj+9gIcI8wCZTlXZKu9vZIVqViP3dcp9qE5G6AlIaD+TQ==}
+  spdx-license-ids@3.0.22:
+    resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
 
   split2@3.2.2:
     resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==}
 
+  split@0.3.3:
+    resolution: {integrity: sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==}
+
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
+  sprintf-js@1.1.3:
+    resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
+
+  stable-hash@0.0.5:
+    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
-  std-env@3.7.0:
-    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
+  start-server-and-test@2.0.13:
+    resolution: {integrity: sha512-G42GCIUjBv/nDoK+QsO+nBdX2Cg3DSAKhSic2DN0GLlK4Q+63TkOeN1cV9PHZKnVOzDKGNVZGCREjpvAIAOdiQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  statuses@2.0.1:
+    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
+    engines: {node: '>= 0.8'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  std-env@3.9.0:
+    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
 
-  stream-transform@2.1.3:
-    resolution: {integrity: sha512-9GHUiM5hMiCi6Y03jD2ARC1ettBXkQBoQAe7nJsPknnI0ow10aXjTnew8QtYQmLjzn974BnmWEAJgCY6ZP1DeQ==}
+  stdin-discarder@0.2.2:
+    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+    engines: {node: '>=18'}
+
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
+  stream-combiner@0.0.4:
+    resolution: {integrity: sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==}
 
   streamsearch@1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
 
+  streamx@2.22.1:
+    resolution: {integrity: sha512-znKXEBxfatz2GBNK02kRnCXjV+AA4kjZIUxeWSr3UGirZMJfTE9uiwKHobnbgxWyL/JWro8tTq+vOqAK1/qbSA==}
+
+  strict-event-emitter@0.5.1:
+    resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -6466,19 +8104,31 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
   string.prototype.codepointat@0.2.1:
     resolution: {integrity: sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==}
 
-  string.prototype.matchall@4.0.11:
-    resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==}
+  string.prototype.includes@2.0.1:
+    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
     engines: {node: '>= 0.4'}
 
-  string.prototype.trim@1.2.9:
-    resolution: {integrity: sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==}
+  string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
     engines: {node: '>= 0.4'}
 
-  string.prototype.trimend@1.0.8:
-    resolution: {integrity: sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==}
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
 
   string.prototype.trimstart@1.0.8:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
@@ -6518,6 +8168,10 @@ packages:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
 
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
   strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
@@ -6534,11 +8188,11 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  style-to-object@0.4.4:
-    resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
+  style-to-js@1.1.17:
+    resolution: {integrity: sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==}
 
-  style-to-object@1.0.6:
-    resolution: {integrity: sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==}
+  style-to-object@1.0.9:
+    resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}
 
   styled-jsx@5.1.1:
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
@@ -6553,6 +8207,19 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -6579,34 +8246,53 @@ packages:
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-0
 
-  tailwind-merge@1.13.2:
-    resolution: {integrity: sha512-R2/nULkdg1VR/EL4RXg4dEohdoxNUJGLMnWIQnPKL+O9Twu7Cn3Rxi4dlXkDzZrEGtR+G+psSXFouWlpTyLhCQ==}
+  tailwind-merge@1.14.0:
+    resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
+
+  tailwind-merge@3.3.1:
+    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
 
-  tailwindcss-animate@1.0.6:
-    resolution: {integrity: sha512-4WigSGMvbl3gCCact62ZvOngA+PRqhAn7si3TQ3/ZuPuQZcIEtVap+ENSXbzWhpojKB8CpvnIsrwBu8/RnHtuw==}
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@3.3.7:
-    resolution: {integrity: sha512-pjgQxDZPvyS/nG3ZYkyCvsbONJl7GdOejfm24iMt2ElYQQw8Jc4p0m8RdMp7mznPD0kUhfzwV3zAwa80qI0zmQ==}
+  tailwindcss@3.4.6:
+    resolution: {integrity: sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  tapable@2.2.1:
-    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+  tailwindcss@4.1.11:
+    resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
+
+  tapable@2.2.2:
+    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
     engines: {node: '>=6'}
 
-  tar-fs@2.1.1:
-    resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
+  tar-fs@2.1.3:
+    resolution: {integrity: sha512-090nwYJDmlhwFwEW3QQl+vaNnxsO2yVsd45eTKRBzSzu+hlb1w2K9inVq5b0ngXuLVqQ4ApvsUHHnu/zQNkWAg==}
+
+  tar-fs@3.1.0:
+    resolution: {integrity: sha512-5Mty5y/sOF1YWj1J6GiBodjlDc05CUR8PKXrsnFAiSG0xA+GHeWLovaZPYUDXkH/1iKRf2+M5+OrRgzC7O9b7w==}
 
   tar-stream@2.2.0:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
     engines: {node: '>=6'}
 
+  tar-stream@3.1.7:
+    resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
+
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+
   term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
     engines: {node: '>=8'}
 
+  text-decoder@1.2.3:
+    resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
+
   text-extensions@1.9.0:
     resolution: {integrity: sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==}
     engines: {node: '>=0.10'}
@@ -6621,8 +8307,8 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
-  thingies@1.21.0:
-    resolution: {integrity: sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==}
+  thingies@2.5.0:
+    resolution: {integrity: sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==}
     engines: {node: '>=10.18'}
     peerDependencies:
       tslib: ^2
@@ -6636,29 +8322,35 @@ packages:
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
-  tinybench@2.8.0:
-    resolution: {integrity: sha512-1/eK7zUnIklz4JUUlL+658n58XO2hHLQfSk1Zf2LKieUjxidN16eKFEoDEfjHc3ohofSSqK3X5yO6VGb6iW8Lw==}
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
-  tinypool@1.0.1:
-    resolution: {integrity: sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==}
+  tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+
+  tinyglobby@0.2.14:
+    resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
     engines: {node: ^18.0.0 || >=20.0.0}
 
   tinyrainbow@1.2.0:
     resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
     engines: {node: '>=14.0.0'}
 
-  tinyspy@3.0.0:
-    resolution: {integrity: sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==}
+  tinyspy@3.0.2:
+    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
 
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
 
-  to-fast-properties@2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
-
   to-gatsby-remark-plugin@0.1.0:
     resolution: {integrity: sha512-blmhJ/gIrytWnWLgPSRCkhCPeki6UBK2daa3k9mGahN7GjwHu8KrS7F70MvwlsG7IE794JLgwAdCbi4hU4faFQ==}
 
@@ -6673,17 +8365,25 @@ packages:
   to-vfile@6.1.0:
     resolution: {integrity: sha512-BxX8EkCxOAZe+D/ToHdDsJcVI4HqQfmw0tCkp31zf3dNP/XWIAjU4CmeuSwsSoOzOTqHPOL0KUzyZqJplkD0Qw==}
 
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
   toml@3.0.0:
     resolution: {integrity: sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==}
 
+  tough-cookie@4.1.4:
+    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
+    engines: {node: '>=6'}
+
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
   tr46@1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
 
-  tree-dump@1.0.2:
-    resolution: {integrity: sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==}
+  tree-dump@1.0.3:
+    resolution: {integrity: sha512-il+Cv80yVHFBwokQSfd4bldvr1Md951DpgAGfmhydt04L+YzHgubm2tQ7zueWDcGENKHq0ZvGFR/hjvNXilHEg==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
@@ -6702,6 +8402,12 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
@@ -6711,6 +8417,9 @@ packages:
   ts-morph@22.0.0:
     resolution: {integrity: sha512-M9MqFGZREyeb5fTl6gNHKZLqBQA0TjA1lea+CR48R8EBTDuWrNqW6ccC5QvjNR4s6wDumD3LTCjOFSp9iwlzaw==}
 
+  ts-morph@26.0.0:
+    resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
+
   ts-node@10.9.2:
     resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
     hasBin: true
@@ -6725,15 +8434,15 @@ packages:
       '@swc/wasm':
         optional: true
 
-  ts-pattern@5.2.0:
-    resolution: {integrity: sha512-aGaSpOlDcns7ZoeG/OMftWyQG1KqPVhgplhJxNCvyIXqWrumM5uIoOSarw/hmmi/T1PnuQ/uD8NaFHvLpHicDg==}
+  ts-pattern@5.8.0:
+    resolution: {integrity: sha512-kIjN2qmWiHnhgr5DAkAafF9fwb0T5OhMVSWrm8XEdTFnX6+wfXwYOFjeF86UZ54vduqiR7BfqScFmXSzSaH8oA==}
 
-  tsconfck@2.1.2:
-    resolution: {integrity: sha512-ghqN1b0puy3MhhviwO2kGF8SeMDNhEbnKxjK7h6+fvY9JAxqvXi8y5NAHSQv687OVboS2uZIByzGd45/YxrRHg==}
-    engines: {node: ^14.13.1 || ^16 || >=18}
+  tsconfck@3.1.6:
+    resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
+    engines: {node: ^18 || >=20}
     hasBin: true
     peerDependencies:
-      typescript: ^4.3.5 || ^5.0.0
+      typescript: ^5.0.0
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -6748,18 +8457,21 @@ packages:
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
-  tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  tsup@6.6.3:
-    resolution: {integrity: sha512-OLx/jFllYlVeZQ7sCHBuRVEQBBa1tFbouoc/gbYakyipjVQdWy/iQOvmExUA/ewap9iQ7tbJf9pW0PgcEFfJcQ==}
-    engines: {node: '>=14.18'}
+  tsup@8.5.0:
+    resolution: {integrity: sha512-VmBp77lWNQq6PfuMqCHD3xWl22vEoWsKajkF8t+yMBawlUS8JzEI+vOVMeuNZIuMML8qXRizFKi9oD5glKQVcQ==}
+    engines: {node: '>=18'}
     hasBin: true
     peerDependencies:
+      '@microsoft/api-extractor': ^7.36.0
       '@swc/core': ^1
       postcss: ^8.4.12
-      typescript: ^4.1.0
+      typescript: '>=4.5.0'
     peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
       '@swc/core':
         optional: true
       postcss:
@@ -6773,53 +8485,51 @@ packages:
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
 
-  tsx@4.1.4:
-    resolution: {integrity: sha512-9X7uBCIyUsvMzIH+o8m+5o/5eL461cChCF+XUtOZsPr1a4pZx2lTQx0Muu5G5VwJWZwAGKBe3sJHLk82BENAVw==}
+  tsx@4.20.3:
+    resolution: {integrity: sha512-qjbnuR9Tr+FJOMBqJCW5ehvIo/buZq7vH7qD7JziU98h6l3qGy0a/yPFjwO+y0/T7GFpNgNAvEcPPVfyT8rrPQ==}
     engines: {node: '>=18.0.0'}
     hasBin: true
 
-  tty-table@4.2.3:
-    resolution: {integrity: sha512-Fs15mu0vGzCrj8fmJNP7Ynxt5J7praPXqFN0leZeZBXJwkMxv9cb2D454k1ltrtUSJbZ4yH4e0CynsHLxmUfFA==}
-    engines: {node: '>=8.0.0'}
-    hasBin: true
-
   tunnel-agent@0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
 
-  turbo-darwin-64@1.9.9:
-    resolution: {integrity: sha512-UDGM9E21eCDzF5t1F4rzrjwWutcup33e7ZjNJcW/mJDPorazZzqXGKEPIy9kXwKhamUUXfC7668r6ZuA1WXF2Q==}
+  turbo-darwin-64@1.13.4:
+    resolution: {integrity: sha512-A0eKd73R7CGnRinTiS7txkMElg+R5rKFp9HV7baDiEL4xTG1FIg/56Vm7A5RVgg8UNgG2qNnrfatJtb+dRmNdw==}
     cpu: [x64]
     os: [darwin]
 
-  turbo-darwin-arm64@1.9.9:
-    resolution: {integrity: sha512-VyfkXzTJpYLTAQ9krq2myyEq7RPObilpS04lgJ4OO1piq76RNmSpX9F/t9JCaY9Pj/4TL7i0d8PM7NGhwEA5Ag==}
+  turbo-darwin-arm64@1.13.4:
+    resolution: {integrity: sha512-eG769Q0NF6/Vyjsr3mKCnkG/eW6dKMBZk6dxWOdrHfrg6QgfkBUk0WUUujzdtVPiUIvsh4l46vQrNVd9EOtbyA==}
     cpu: [arm64]
     os: [darwin]
 
-  turbo-linux-64@1.9.9:
-    resolution: {integrity: sha512-Fu1MY29Odg8dHOqXcpIIGC3T63XLOGgnGfbobXMKdrC7JQDvtJv8TUCYciRsyknZYjyyKK1z6zKuYIiDjf3KeQ==}
+  turbo-linux-64@1.13.4:
+    resolution: {integrity: sha512-Bq0JphDeNw3XEi+Xb/e4xoKhs1DHN7OoLVUbTIQz+gazYjigVZvtwCvgrZI7eW9Xo1eOXM2zw2u1DGLLUfmGkQ==}
     cpu: [x64]
     os: [linux]
 
-  turbo-linux-arm64@1.9.9:
-    resolution: {integrity: sha512-50LI8NafPuJxdnMCBeDdzgyt1cgjQG7FwkyY336v4e95WJPUVjrHdrKH6jYXhOUyrv9+jCJxwX1Yrg02t5yJ1g==}
+  turbo-linux-arm64@1.13.4:
+    resolution: {integrity: sha512-BJcXw1DDiHO/okYbaNdcWN6szjXyHWx9d460v6fCHY65G8CyqGU3y2uUTPK89o8lq/b2C8NK0yZD+Vp0f9VoIg==}
     cpu: [arm64]
     os: [linux]
 
-  turbo-windows-64@1.9.9:
-    resolution: {integrity: sha512-9IsTReoLmQl1IRsy3WExe2j2RKWXQyXujfJ4fXF+jp08KxjVF4/tYP2CIRJx/A7UP/7keBta27bZqzAjsmbSTA==}
+  turbo-windows-64@1.13.4:
+    resolution: {integrity: sha512-OFFhXHOFLN7A78vD/dlVuuSSVEB3s9ZBj18Tm1hk3aW1HTWTuAw0ReN6ZNlVObZUHvGy8d57OAGGxf2bT3etQw==}
     cpu: [x64]
     os: [win32]
 
-  turbo-windows-arm64@1.9.9:
-    resolution: {integrity: sha512-CUu4hpeQo68JjDr0V0ygTQRLbS+/sNfdqEVV+Xz9136vpKn2WMQLAuUBVZV0Sp0S/7i+zGnplskT0fED+W46wQ==}
+  turbo-windows-arm64@1.13.4:
+    resolution: {integrity: sha512-u5A+VOKHswJJmJ8o8rcilBfU5U3Y1TTAfP9wX8bFh8teYF1ghP0EhtMRLjhtp6RPa+XCxHHVA2CiC3gbh5eg5g==}
     cpu: [arm64]
     os: [win32]
 
-  turbo@1.9.9:
-    resolution: {integrity: sha512-+ZS66LOT7ahKHxh6XrIdcmf2Yk9mNpAbPEj4iF2cs0cAeaDU3xLVPZFF0HbSho89Uxwhx7b5HBgPbdcjQTwQkg==}
+  turbo@1.13.4:
+    resolution: {integrity: sha512-1q7+9UJABuBAHrcC4Sxp5lOqYS5mvxRrwa33wpIyM18hlOCpRD/fTJNxZ0vhbMcJmz15o9kkVm743mPn7p6jpQ==}
     hasBin: true
 
+  tw-animate-css@1.3.6:
+    resolution: {integrity: sha512-9dy0R9UsYEGmgf26L8UcHiLmSFTHa9+D7+dAt/G/sF5dCnPePZbfgDYinc7/UzAM7g/baVrmS6m9yEpU46d+LA==}
+
   typanion@3.14.0:
     resolution: {integrity: sha512-ZW/lVMRabETuYCd9O9ZvMhAh8GslSqaUjxmK/JLPCh6l73CvLBiuXswj/+7LdnWOgYsQ130FqLzFz5aGT4I3Ug==}
 
@@ -6827,10 +8537,6 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  type-fest@0.13.1:
-    resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
-    engines: {node: '>=10'}
-
   type-fest@0.18.1:
     resolution: {integrity: sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==}
     engines: {node: '>=10'}
@@ -6839,6 +8545,10 @@ packages:
     resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
     engines: {node: '>=10'}
 
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
   type-fest@0.6.0:
     resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
     engines: {node: '>=8'}
@@ -6851,45 +8561,54 @@ packages:
     resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
     engines: {node: '>=10'}
 
-  type-fest@3.8.0:
-    resolution: {integrity: sha512-FVNSzGQz9Th+/9R6Lvv7WIAkstylfHN2/JYxkyhhmKFYh9At2DST8t6L6Lref9eYO8PXFTfG9Sg1Agg0K3vq3Q==}
-    engines: {node: '>=14.16'}
-
-  type-fest@4.21.0:
-    resolution: {integrity: sha512-ADn2w7hVPcK6w1I0uWnM//y1rLXZhzB9mr0a3OirzclKF1Wp6VzevUmzz/NRAWunOT6E8HrnpGY7xOfc6K57fA==}
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
     engines: {node: '>=16'}
 
-  typed-array-buffer@1.0.2:
-    resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==}
+  type-is@2.0.1:
+    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
+    engines: {node: '>= 0.6'}
+
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
 
-  typed-array-byte-length@1.0.1:
-    resolution: {integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==}
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
     engines: {node: '>= 0.4'}
 
-  typed-array-byte-offset@1.0.2:
-    resolution: {integrity: sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==}
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
     engines: {node: '>= 0.4'}
 
-  typed-array-length@1.0.6:
-    resolution: {integrity: sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==}
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
-  typescript@4.9.5:
-    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
-    engines: {node: '>=4.2.0'}
-    hasBin: true
+  typed-query-selector@2.12.0:
+    resolution: {integrity: sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==}
 
-  typescript@5.5.3:
-    resolution: {integrity: sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==}
+  typescript@5.9.2:
+    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  unbox-primitive@1.0.2:
-    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
+  ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
+  unbzip2-stream@1.4.3:
+    resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==}
 
-  undici-types@5.26.5:
-    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
 
   unified@10.1.2:
     resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
@@ -6915,9 +8634,6 @@ packages:
   unist-util-position@5.0.0:
     resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
 
-  unist-util-remove-position@5.0.0:
-    resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==}
-
   unist-util-stringify-position@2.0.3:
     resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
 
@@ -6943,12 +8659,23 @@ packages:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
 
+  universalify@0.2.0:
+    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
+    engines: {node: '>= 4.0.0'}
+
   universalify@2.0.1:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
-  update-browserslist-db@1.0.16:
-    resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==}
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -6960,37 +8687,37 @@ packages:
     resolution: {integrity: sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==}
     engines: {node: '>=4'}
 
-  use-callback-ref@1.3.2:
-    resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
+  url-parse@1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  use-sidecar@1.1.2:
-    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  use-sync-external-store@1.2.2:
-    resolution: {integrity: sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==}
+  use-sync-external-store@1.5.0:
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  util@0.12.5:
-    resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
-
   uuid@9.0.1:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
     hasBin: true
@@ -7009,17 +8736,27 @@ packages:
   validate-npm-package-name@3.0.0:
     resolution: {integrity: sha512-M6w37eVCMMouJ9V/sdPGnC5H4uDr73/+xdq0FBLO3TFFX1+7wiUY6Es328NN+y43tmY+doUdN9g9J21vqB7iLw==}
 
-  vaul@0.9.0:
-    resolution: {integrity: sha512-bZSySGbAHiTXmZychprnX/dE0EsSige88xtyyL3/MCRbrFotRPQZo7UdydGXZWw+CKbNOw5Ow8gwAo93/nB/Cg==}
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  vaul@1.1.1:
+    resolution: {integrity: sha512-+ejzF6ffQKPcfgS7uOrGn017g39F8SO4yLPXbBhpC7a0H+oPqPna8f1BUfXaz8eU4+pxbQcmjxW+jWBSbxjaFg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0
+
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
     peerDependencies:
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
   vfile-location@4.1.0:
     resolution: {integrity: sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==}
 
-  vfile-location@5.0.2:
-    resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==}
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
   vfile-message@2.0.4:
     resolution: {integrity: sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==}
@@ -7027,8 +8764,8 @@ packages:
   vfile-message@3.1.4:
     resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
 
-  vfile-message@4.0.2:
-    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
   vfile@4.2.1:
     resolution: {integrity: sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==}
@@ -7036,27 +8773,27 @@ packages:
   vfile@5.3.7:
     resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
 
-  vfile@6.0.1:
-    resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
   victory-vendor@36.9.2:
     resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
 
-  vite-node@2.0.5:
-    resolution: {integrity: sha512-LdsW4pxj0Ot69FAoXZ1yTnA9bjGohr2yNBU7QKRxpz8ITSkhuDl6h3zS/tvgz4qrNjeRnvrWeXQ8ZF7Um4W00Q==}
+  vite-node@2.1.9:
+    resolution: {integrity: sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
-  vite-tsconfig-paths@4.2.0:
-    resolution: {integrity: sha512-jGpus0eUy5qbbMVGiTxCL1iB9ZGN6Bd37VGLJU39kTDD6ZfULTTb1bcc5IeTWqWJKiWV5YihCaibeASPiGi8kw==}
+  vite-tsconfig-paths@4.3.2:
+    resolution: {integrity: sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==}
     peerDependencies:
       vite: '*'
     peerDependenciesMeta:
       vite:
         optional: true
 
-  vite@5.4.2:
-    resolution: {integrity: sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==}
+  vite@5.4.19:
+    resolution: {integrity: sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -7086,15 +8823,15 @@ packages:
       terser:
         optional: true
 
-  vitest@2.0.5:
-    resolution: {integrity: sha512-8GUxONfauuIdeSl5f9GTgVEpg5BTOlplET4WEDaeY2QBiN8wSm68vxN/tb5z405OwppfoCavnwXafiaYBC/xOA==}
+  vitest@2.1.9:
+    resolution: {integrity: sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 2.0.5
-      '@vitest/ui': 2.0.5
+      '@vitest/browser': 2.1.9
+      '@vitest/ui': 2.1.9
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -7111,8 +8848,10 @@ packages:
       jsdom:
         optional: true
 
-  wcwidth@1.0.1:
-    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+  wait-on@8.0.4:
+    resolution: {integrity: sha512-8f9LugAGo4PSc0aLbpKVCVtzayd36sSCp4WLpVngkYq6PK87H79zt77/tlCU6eKCLqR46iFvcl0PU5f+DmtkwA==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
 
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
@@ -7133,26 +8872,20 @@ packages:
   whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
 
-  which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
 
-  which-builtin-type@1.1.3:
-    resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==}
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
     engines: {node: '>= 0.4'}
 
   which-collection@1.0.2:
     resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
     engines: {node: '>= 0.4'}
 
-  which-module@2.0.1:
-    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
-
-  which-pm@2.0.0:
-    resolution: {integrity: sha512-Lhs9Pmyph0p5n5Z3mVnN0yWcbQYUAD7rbQUiMsQxOJ3T57k7RFe35SUwWMf7dsbDZks1uOmw4AecB/JMDj3v/w==}
-    engines: {node: '>=8.15'}
-
-  which-typed-array@1.1.15:
-    resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
     engines: {node: '>= 0.4'}
 
   which@1.3.1:
@@ -7164,6 +8897,11 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   why-is-node-running@2.3.0:
     resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
     engines: {node: '>=8'}
@@ -7188,8 +8926,17 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
-  y18n@4.0.3:
-    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+  ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
 
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
@@ -7204,19 +8951,15 @@ packages:
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
-  yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
-    engines: {node: '>= 6'}
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
 
-  yaml@2.4.3:
-    resolution: {integrity: sha512-sntgmxj8o7DE7g/Qi60cqpLBA3HG3STcDA0kO+WfB05jEKhZMbY7umNm2rBpQvsmZ16/lPXCJGW2672dgOUkrg==}
-    engines: {node: '>= 14'}
+  yaml@2.8.1:
+    resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
+    engines: {node: '>= 14.6'}
     hasBin: true
 
-  yargs-parser@18.1.3:
-    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
-    engines: {node: '>=6'}
-
   yargs-parser@20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
@@ -7225,14 +8968,13 @@ packages:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
 
-  yargs@15.4.1:
-    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
-    engines: {node: '>=8'}
-
   yargs@17.7.2:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
 
+  yauzl@2.10.0:
+    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
+
   yn@3.1.1:
     resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
     engines: {node: '>=6'}
@@ -7241,6 +8983,14 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  yoctocolors-cjs@2.1.2:
+    resolution: {integrity: sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==}
+    engines: {node: '>=18'}
+
+  yoctocolors@2.1.1:
+    resolution: {integrity: sha512-GQHQqAopRhwU8Kt1DDM8NjibDXHC8eoh1erhGAJPEyveY9qqVeXvVikNKrDz69sHowPMorbPUrH/mx8c50eiBQ==}
+    engines: {node: '>=18'}
+
   yoga-layout-prebuilt@1.10.0:
     resolution: {integrity: sha512-YnOmtSbv4MTf7RGJMK0FvZ+KD8OEe/J5BNnR0GHhD8J/XcG/Qvxgszm0Un6FTHWW4uHlTgP0IztiXQnGyIR45g==}
     engines: {node: '>=8'}
@@ -7248,12 +8998,17 @@ packages:
   yoga-wasm-web@0.1.2:
     resolution: {integrity: sha512-8SkgawHcA0RUbMrnhxbaQkZDBi8rMed8pQHixkFF9w32zGhAwZ9/cOHWlpYfr6RCx42Yp3siV45/jPEkJxsk6w==}
 
-  zod@3.21.4:
-    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
+  zod-to-json-schema@3.24.6:
+    resolution: {integrity: sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==}
+    peerDependencies:
+      zod: ^3.24.1
 
   zod@3.23.8:
     resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
 
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -7263,262 +9018,224 @@ snapshots:
 
   '@ampproject/remapping@2.3.0':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/gen-mapping': 0.3.12
+      '@jridgewell/trace-mapping': 0.3.29
 
-  '@antfu/ni@0.21.4': {}
+  '@antfu/ni@25.0.0':
+    dependencies:
+      ansis: 4.1.0
+      fzf: 0.5.2
+      package-manager-detector: 1.3.0
+      tinyexec: 1.0.1
 
-  '@babel/code-frame@7.24.6':
+  '@babel/code-frame@7.27.1':
     dependencies:
-      '@babel/highlight': 7.24.6
-      picocolors: 1.0.1
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
 
-  '@babel/compat-data@7.24.6': {}
+  '@babel/compat-data@7.28.0': {}
 
-  '@babel/core@7.22.1':
+  '@babel/core@7.28.0':
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.24.6
-      '@babel/generator': 7.24.6
-      '@babel/helper-compilation-targets': 7.24.6
-      '@babel/helper-module-transforms': 7.24.6(@babel/core@7.22.1)
-      '@babel/helpers': 7.24.6
-      '@babel/parser': 7.22.6
-      '@babel/template': 7.24.6
-      '@babel/traverse': 7.24.6
-      '@babel/types': 7.24.6
-      convert-source-map: 1.9.0
-      debug: 4.3.5
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.0
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
+      '@babel/helpers': 7.28.2
+      '@babel/parser': 7.28.0
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.0
+      '@babel/types': 7.28.2
+      convert-source-map: 2.0.0
+      debug: 4.4.1
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/core@7.24.6':
+  '@babel/generator@7.28.0':
     dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.24.6
-      '@babel/generator': 7.24.6
-      '@babel/helper-compilation-targets': 7.24.6
-      '@babel/helper-module-transforms': 7.24.6(@babel/core@7.24.6)
-      '@babel/helpers': 7.24.6
-      '@babel/parser': 7.24.6
-      '@babel/template': 7.24.6
-      '@babel/traverse': 7.24.6
-      '@babel/types': 7.24.6
-      convert-source-map: 2.0.0
-      debug: 4.3.5
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/generator@7.24.6':
-    dependencies:
-      '@babel/types': 7.24.6
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 2.5.2
+      '@babel/parser': 7.28.0
+      '@babel/types': 7.28.2
+      '@jridgewell/gen-mapping': 0.3.12
+      '@jridgewell/trace-mapping': 0.3.29
+      jsesc: 3.1.0
 
-  '@babel/helper-annotate-as-pure@7.24.6':
+  '@babel/helper-annotate-as-pure@7.27.3':
     dependencies:
-      '@babel/types': 7.24.6
+      '@babel/types': 7.28.2
 
-  '@babel/helper-compilation-targets@7.24.6':
+  '@babel/helper-compilation-targets@7.27.2':
     dependencies:
-      '@babel/compat-data': 7.24.6
-      '@babel/helper-validator-option': 7.24.6
-      browserslist: 4.23.0
+      '@babel/compat-data': 7.28.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.26.2
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.24.6(@babel/core@7.22.1)':
-    dependencies:
-      '@babel/core': 7.22.1
-      '@babel/helper-annotate-as-pure': 7.24.6
-      '@babel/helper-environment-visitor': 7.24.6
-      '@babel/helper-function-name': 7.24.6
-      '@babel/helper-member-expression-to-functions': 7.24.6
-      '@babel/helper-optimise-call-expression': 7.24.6
-      '@babel/helper-replace-supers': 7.24.6(@babel/core@7.22.1)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.6
-      '@babel/helper-split-export-declaration': 7.24.6
-      semver: 6.3.1
-
-  '@babel/helper-create-class-features-plugin@7.24.6(@babel/core@7.24.6)':
-    dependencies:
-      '@babel/core': 7.24.6
-      '@babel/helper-annotate-as-pure': 7.24.6
-      '@babel/helper-environment-visitor': 7.24.6
-      '@babel/helper-function-name': 7.24.6
-      '@babel/helper-member-expression-to-functions': 7.24.6
-      '@babel/helper-optimise-call-expression': 7.24.6
-      '@babel/helper-replace-supers': 7.24.6(@babel/core@7.24.6)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.6
-      '@babel/helper-split-export-declaration': 7.24.6
+  '@babel/helper-create-class-features-plugin@7.27.1(@babel/core@7.28.0)':
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.0)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.28.0
       semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-environment-visitor@7.24.6': {}
+  '@babel/helper-globals@7.28.0': {}
 
-  '@babel/helper-function-name@7.24.6':
+  '@babel/helper-member-expression-to-functions@7.27.1':
     dependencies:
-      '@babel/template': 7.24.6
-      '@babel/types': 7.24.6
+      '@babel/traverse': 7.28.0
+      '@babel/types': 7.28.2
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-hoist-variables@7.24.6':
+  '@babel/helper-module-imports@7.27.1':
     dependencies:
-      '@babel/types': 7.24.6
+      '@babel/traverse': 7.28.0
+      '@babel/types': 7.28.2
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-member-expression-to-functions@7.24.6':
+  '@babel/helper-module-transforms@7.27.3(@babel/core@7.28.0)':
     dependencies:
-      '@babel/types': 7.24.6
+      '@babel/core': 7.28.0
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/traverse': 7.28.0
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-module-imports@7.24.6':
+  '@babel/helper-optimise-call-expression@7.27.1':
     dependencies:
-      '@babel/types': 7.24.6
+      '@babel/types': 7.28.2
 
-  '@babel/helper-module-transforms@7.24.6(@babel/core@7.22.1)':
-    dependencies:
-      '@babel/core': 7.22.1
-      '@babel/helper-environment-visitor': 7.24.6
-      '@babel/helper-module-imports': 7.24.6
-      '@babel/helper-simple-access': 7.24.6
-      '@babel/helper-split-export-declaration': 7.24.6
-      '@babel/helper-validator-identifier': 7.24.6
+  '@babel/helper-plugin-utils@7.27.1': {}
 
-  '@babel/helper-module-transforms@7.24.6(@babel/core@7.24.6)':
+  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.24.6
-      '@babel/helper-environment-visitor': 7.24.6
-      '@babel/helper-module-imports': 7.24.6
-      '@babel/helper-simple-access': 7.24.6
-      '@babel/helper-split-export-declaration': 7.24.6
-      '@babel/helper-validator-identifier': 7.24.6
+      '@babel/core': 7.28.0
+      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.28.0
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-optimise-call-expression@7.24.6':
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
     dependencies:
-      '@babel/types': 7.24.6
-
-  '@babel/helper-plugin-utils@7.24.6': {}
+      '@babel/traverse': 7.28.0
+      '@babel/types': 7.28.2
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-replace-supers@7.24.6(@babel/core@7.22.1)':
-    dependencies:
-      '@babel/core': 7.22.1
-      '@babel/helper-environment-visitor': 7.24.6
-      '@babel/helper-member-expression-to-functions': 7.24.6
-      '@babel/helper-optimise-call-expression': 7.24.6
+  '@babel/helper-string-parser@7.27.1': {}
 
-  '@babel/helper-replace-supers@7.24.6(@babel/core@7.24.6)':
-    dependencies:
-      '@babel/core': 7.24.6
-      '@babel/helper-environment-visitor': 7.24.6
-      '@babel/helper-member-expression-to-functions': 7.24.6
-      '@babel/helper-optimise-call-expression': 7.24.6
+  '@babel/helper-validator-identifier@7.27.1': {}
 
-  '@babel/helper-simple-access@7.24.6':
-    dependencies:
-      '@babel/types': 7.24.6
+  '@babel/helper-validator-option@7.27.1': {}
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.24.6':
+  '@babel/helpers@7.28.2':
     dependencies:
-      '@babel/types': 7.24.6
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.2
 
-  '@babel/helper-split-export-declaration@7.24.6':
+  '@babel/parser@7.28.0':
     dependencies:
-      '@babel/types': 7.24.6
+      '@babel/types': 7.28.2
 
-  '@babel/helper-string-parser@7.24.6': {}
-
-  '@babel/helper-validator-identifier@7.24.6': {}
-
-  '@babel/helper-validator-option@7.24.6': {}
-
-  '@babel/helpers@7.24.6':
+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/template': 7.24.6
-      '@babel/types': 7.24.6
+      '@babel/core': 7.28.0
+      '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/highlight@7.24.6':
+  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/helper-validator-identifier': 7.24.6
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.0.1
+      '@babel/core': 7.28.0
+      '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/parser@7.22.6':
+  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/types': 7.24.6
+      '@babel/core': 7.28.0
+      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/parser@7.24.6':
+  '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.0)':
     dependencies:
-      '@babel/types': 7.24.6
+      '@babel/core': 7.28.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.28.0)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.0)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-syntax-typescript@7.24.6(@babel/core@7.22.1)':
+  '@babel/preset-typescript@7.27.1(@babel/core@7.28.0)':
     dependencies:
-      '@babel/core': 7.22.1
-      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/core': 7.28.0
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-validator-option': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.0)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-syntax-typescript@7.24.6(@babel/core@7.24.6)':
-    dependencies:
-      '@babel/core': 7.24.6
-      '@babel/helper-plugin-utils': 7.24.6
+  '@babel/runtime@7.28.2': {}
 
-  '@babel/plugin-transform-typescript@7.22.5(@babel/core@7.22.1)':
+  '@babel/template@7.27.2':
     dependencies:
-      '@babel/core': 7.22.1
-      '@babel/helper-annotate-as-pure': 7.24.6
-      '@babel/helper-create-class-features-plugin': 7.24.6(@babel/core@7.22.1)
-      '@babel/helper-plugin-utils': 7.24.6
-      '@babel/plugin-syntax-typescript': 7.24.6(@babel/core@7.22.1)
+      '@babel/code-frame': 7.27.1
+      '@babel/parser': 7.28.0
+      '@babel/types': 7.28.2
 
-  '@babel/plugin-transform-typescript@7.22.5(@babel/core@7.24.6)':
+  '@babel/traverse@7.28.0':
     dependencies:
-      '@babel/core': 7.24.6
-      '@babel/helper-annotate-as-pure': 7.24.6
-      '@babel/helper-create-class-features-plugin': 7.24.6(@babel/core@7.24.6)
-      '@babel/helper-plugin-utils': 7.24.6
-      '@babel/plugin-syntax-typescript': 7.24.6(@babel/core@7.24.6)
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.0
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.28.0
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.2
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/runtime@7.24.6':
+  '@babel/types@7.28.2':
     dependencies:
-      regenerator-runtime: 0.14.1
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
 
-  '@babel/template@7.24.6':
+  '@bundled-es-modules/cookie@2.0.1':
     dependencies:
-      '@babel/code-frame': 7.24.6
-      '@babel/parser': 7.24.6
-      '@babel/types': 7.24.6
+      cookie: 0.7.2
 
-  '@babel/traverse@7.24.6':
+  '@bundled-es-modules/statuses@1.0.1':
     dependencies:
-      '@babel/code-frame': 7.24.6
-      '@babel/generator': 7.24.6
-      '@babel/helper-environment-visitor': 7.24.6
-      '@babel/helper-function-name': 7.24.6
-      '@babel/helper-hoist-variables': 7.24.6
-      '@babel/helper-split-export-declaration': 7.24.6
-      '@babel/parser': 7.24.6
-      '@babel/types': 7.24.6
-      debug: 4.3.5
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
+      statuses: 2.0.2
 
-  '@babel/types@7.24.6':
+  '@bundled-es-modules/tough-cookie@0.1.6':
     dependencies:
-      '@babel/helper-string-parser': 7.24.6
-      '@babel/helper-validator-identifier': 7.24.6
-      to-fast-properties: 2.0.0
+      '@types/tough-cookie': 4.0.5
+      tough-cookie: 4.1.4
 
-  '@changesets/apply-release-plan@6.1.4':
+  '@changesets/apply-release-plan@7.0.12':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@changesets/config': 2.3.1
-      '@changesets/get-version-range-type': 0.3.2
-      '@changesets/git': 2.0.0
-      '@changesets/types': 5.2.1
+      '@changesets/config': 3.1.1
+      '@changesets/get-version-range-type': 0.4.0
+      '@changesets/git': 3.0.4
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
       detect-indent: 6.1.0
       fs-extra: 7.0.1
@@ -7526,20 +9243,20 @@ snapshots:
       outdent: 0.5.0
       prettier: 2.8.8
       resolve-from: 5.0.0
-      semver: 7.6.2
+      semver: 7.7.2
 
-  '@changesets/assemble-release-plan@5.2.4':
+  '@changesets/assemble-release-plan@6.0.9':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.6
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
-      semver: 7.6.2
+      semver: 7.7.2
 
-  '@changesets/changelog-git@0.1.14':
+  '@changesets/changelog-git@0.2.1':
     dependencies:
-      '@changesets/types': 5.2.1
+      '@changesets/types': 6.1.0
 
   '@changesets/changelog-github@0.4.8':
     dependencies:
@@ -7549,63 +9266,57 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@changesets/cli@2.26.1':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@changesets/apply-release-plan': 6.1.4
-      '@changesets/assemble-release-plan': 5.2.4
-      '@changesets/changelog-git': 0.1.14
-      '@changesets/config': 2.3.1
-      '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.6
-      '@changesets/get-release-plan': 3.0.17
-      '@changesets/git': 2.0.0
-      '@changesets/logger': 0.0.5
-      '@changesets/pre': 1.0.14
-      '@changesets/read': 0.5.9
-      '@changesets/types': 5.2.1
-      '@changesets/write': 0.2.3
+  '@changesets/cli@2.29.5':
+    dependencies:
+      '@changesets/apply-release-plan': 7.0.12
+      '@changesets/assemble-release-plan': 6.0.9
+      '@changesets/changelog-git': 0.2.1
+      '@changesets/config': 3.1.1
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/get-release-plan': 4.0.13
+      '@changesets/git': 3.0.4
+      '@changesets/logger': 0.1.1
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.5
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@changesets/write': 0.4.0
       '@manypkg/get-packages': 1.1.3
-      '@types/is-ci': 3.0.4
-      '@types/semver': 6.2.7
       ansi-colors: 4.1.3
-      chalk: 2.4.2
+      ci-info: 3.9.0
       enquirer: 2.4.1
       external-editor: 3.1.0
       fs-extra: 7.0.1
-      human-id: 1.0.2
-      is-ci: 3.0.1
-      meow: 6.1.1
-      outdent: 0.5.0
+      mri: 1.2.0
       p-limit: 2.3.0
-      preferred-pm: 3.1.3
+      package-manager-detector: 0.2.11
+      picocolors: 1.1.1
       resolve-from: 5.0.0
-      semver: 5.7.2
-      spawndamnit: 2.0.0
+      semver: 7.7.2
+      spawndamnit: 3.0.1
       term-size: 2.2.1
-      tty-table: 4.2.3
 
-  '@changesets/config@2.3.1':
+  '@changesets/config@3.1.1':
     dependencies:
-      '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.6
-      '@changesets/logger': 0.0.5
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/logger': 0.1.1
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
-      micromatch: 4.0.7
+      micromatch: 4.0.8
 
-  '@changesets/errors@0.1.4':
+  '@changesets/errors@0.2.0':
     dependencies:
       extendable-error: 0.1.7
 
-  '@changesets/get-dependents-graph@1.3.6':
+  '@changesets/get-dependents-graph@2.1.3':
     dependencies:
-      '@changesets/types': 5.2.1
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
-      chalk: 2.4.2
-      fs-extra: 7.0.1
-      semver: 7.6.2
+      picocolors: 1.1.1
+      semver: 7.7.2
 
   '@changesets/get-github-info@0.5.2':
     dependencies:
@@ -7614,69 +9325,70 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@changesets/get-release-plan@3.0.17':
+  '@changesets/get-release-plan@4.0.13':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@changesets/assemble-release-plan': 5.2.4
-      '@changesets/config': 2.3.1
-      '@changesets/pre': 1.0.14
-      '@changesets/read': 0.5.9
-      '@changesets/types': 5.2.1
+      '@changesets/assemble-release-plan': 6.0.9
+      '@changesets/config': 3.1.1
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.5
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
 
-  '@changesets/get-version-range-type@0.3.2': {}
+  '@changesets/get-version-range-type@0.4.0': {}
 
-  '@changesets/git@2.0.0':
+  '@changesets/git@3.0.4':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@changesets/errors': 0.1.4
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
       '@manypkg/get-packages': 1.1.3
       is-subdir: 1.2.0
-      micromatch: 4.0.7
-      spawndamnit: 2.0.0
+      micromatch: 4.0.8
+      spawndamnit: 3.0.1
 
-  '@changesets/logger@0.0.5':
+  '@changesets/logger@0.1.1':
     dependencies:
-      chalk: 2.4.2
+      picocolors: 1.1.1
 
-  '@changesets/parse@0.3.16':
+  '@changesets/parse@0.4.1':
     dependencies:
-      '@changesets/types': 5.2.1
+      '@changesets/types': 6.1.0
       js-yaml: 3.14.1
 
-  '@changesets/pre@1.0.14':
+  '@changesets/pre@2.0.2':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@changesets/errors': 0.1.4
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
 
-  '@changesets/read@0.5.9':
+  '@changesets/read@0.6.5':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@changesets/git': 2.0.0
-      '@changesets/logger': 0.0.5
-      '@changesets/parse': 0.3.16
-      '@changesets/types': 5.2.1
-      chalk: 2.4.2
+      '@changesets/git': 3.0.4
+      '@changesets/logger': 0.1.1
+      '@changesets/parse': 0.4.1
+      '@changesets/types': 6.1.0
       fs-extra: 7.0.1
       p-filter: 2.1.0
+      picocolors: 1.1.1
+
+  '@changesets/should-skip-package@0.1.2':
+    dependencies:
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
 
   '@changesets/types@4.1.0': {}
 
   '@changesets/types@5.2.1': {}
 
-  '@changesets/write@0.2.3':
+  '@changesets/types@6.1.0': {}
+
+  '@changesets/write@0.4.0':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@changesets/types': 5.2.1
+      '@changesets/types': 6.1.0
       fs-extra: 7.0.1
-      human-id: 1.0.2
+      human-id: 4.1.1
       prettier: 2.8.8
 
-  '@commitlint/cli@17.6.3':
+  '@commitlint/cli@17.8.1':
     dependencies:
       '@commitlint/format': 17.8.1
       '@commitlint/lint': 17.8.1
@@ -7692,14 +9404,14 @@ snapshots:
       - '@swc/core'
       - '@swc/wasm'
 
-  '@commitlint/config-conventional@17.6.3':
+  '@commitlint/config-conventional@17.8.1':
     dependencies:
-      conventional-changelog-conventionalcommits: 5.0.0
+      conventional-changelog-conventionalcommits: 6.1.0
 
   '@commitlint/config-validator@17.8.1':
     dependencies:
       '@commitlint/types': 17.8.1
-      ajv: 8.14.0
+      ajv: 8.17.1
 
   '@commitlint/ensure@17.8.1':
     dependencies:
@@ -7737,14 +9449,14 @@ snapshots:
       '@commitlint/types': 17.8.1
       '@types/node': 20.5.1
       chalk: 4.1.2
-      cosmiconfig: 8.3.6(typescript@5.5.3)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.5.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))(typescript@5.5.3)
+      cosmiconfig: 8.3.6(typescript@5.9.2)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.9.2))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.9.2))(typescript@5.9.2)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
-      typescript: 5.5.3
+      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.9.2)
+      typescript: 5.9.2
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -7761,7 +9473,7 @@ snapshots:
     dependencies:
       '@commitlint/top-level': 17.8.1
       '@commitlint/types': 17.8.1
-      fs-extra: 11.2.0
+      fs-extra: 11.3.1
       git-raw-commits: 2.0.11
       minimist: 1.2.8
 
@@ -7769,7 +9481,7 @@ snapshots:
     dependencies:
       '@commitlint/config-validator': 17.8.1
       '@commitlint/types': 17.8.1
-      import-fresh: 3.3.0
+      import-fresh: 3.3.1
       lodash.mergewith: 4.6.2
       resolve-from: 5.0.0
       resolve-global: 1.0.0
@@ -7792,74 +9504,79 @@ snapshots:
     dependencies:
       chalk: 4.1.2
 
-  '@contentlayer2/cli@0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)':
+  '@contentlayer2/cli@0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)':
     dependencies:
-      '@contentlayer2/core': 0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)
+      '@contentlayer2/core': 0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
       '@contentlayer2/utils': 0.4.3
       clipanion: 3.2.1(typanion@3.14.0)
       typanion: 3.14.0
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
 
-  '@contentlayer2/client@0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)':
+  '@contentlayer2/client@0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)':
     dependencies:
-      '@contentlayer2/core': 0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)
+      '@contentlayer2/core': 0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
 
-  '@contentlayer2/core@0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)':
+  '@contentlayer2/core@0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)':
     dependencies:
       '@contentlayer2/utils': 0.4.3
       camel-case: 4.1.2
-      comment-json: 4.2.3
+      comment-json: 4.2.5
       gray-matter: 4.0.3
-      mdx-bundler: 10.0.2(esbuild@0.17.19)
-      rehype-stringify: 10.0.0
+      mdx-bundler: 10.1.1(acorn@8.15.0)(esbuild@0.25.8)
+      rehype-stringify: 10.0.1
       remark-frontmatter: 5.0.0
       remark-parse: 11.0.0
-      remark-rehype: 11.1.0
+      remark-rehype: 11.1.2
       source-map-support: 0.5.21
-      type-fest: 4.21.0
+      type-fest: 4.41.0
       unified: 11.0.5
     optionalDependencies:
-      esbuild: 0.17.19
+      esbuild: 0.25.8
       markdown-wasm: 1.2.0
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - supports-color
 
-  '@contentlayer2/source-files@0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)':
+  '@contentlayer2/source-files@0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)':
     dependencies:
-      '@contentlayer2/core': 0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)
+      '@contentlayer2/core': 0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
       '@contentlayer2/utils': 0.4.3
       chokidar: 3.6.0
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       gray-matter: 4.0.3
-      imagescript: 1.3.0
-      micromatch: 4.0.7
-      ts-pattern: 5.2.0
+      imagescript: 1.3.1
+      micromatch: 4.0.8
+      ts-pattern: 5.8.0
       unified: 11.0.5
-      yaml: 2.4.3
-      zod: 3.23.8
+      yaml: 2.8.1
+      zod: 3.25.76
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
 
-  '@contentlayer2/source-remote-files@0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)':
+  '@contentlayer2/source-remote-files@0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)':
     dependencies:
-      '@contentlayer2/core': 0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)
-      '@contentlayer2/source-files': 0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)
+      '@contentlayer2/core': 0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
+      '@contentlayer2/source-files': 0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
       '@contentlayer2/utils': 0.4.3
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
@@ -7867,330 +9584,444 @@ snapshots:
   '@contentlayer2/utils@0.4.3':
     dependencies:
       '@effect-ts/core': 0.60.5
-      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.24.1(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.24.1(@opentelemetry/api@1.8.0))
-      '@effect-ts/otel-sdk-trace-node': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.24.1(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.24.1(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-node@1.24.1(@opentelemetry/api@1.8.0))
+      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))
+      '@effect-ts/otel-sdk-trace-node': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-node@1.30.1(@opentelemetry/api@1.9.0))
       '@js-temporal/polyfill': 0.4.4
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/exporter-trace-otlp-grpc': 0.51.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-node': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/semantic-conventions': 1.24.1
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/exporter-trace-otlp-grpc': 0.51.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-node': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.36.0
       chokidar: 3.6.0
-      hash-wasm: 4.11.0
-      inflection: 3.0.0
-      memfs: 4.9.3
-      oo-ascii-tree: 1.99.0
-      ts-pattern: 5.2.0
-      type-fest: 4.21.0
+      hash-wasm: 4.12.0
+      inflection: 3.0.2
+      memfs: 4.36.0
+      oo-ascii-tree: 1.113.0
+      ts-pattern: 5.8.0
+      type-fest: 4.41.0
 
   '@cspotcode/source-map-support@0.8.1':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
+  '@date-fns/tz@1.3.1': {}
+
+  '@dnd-kit/accessibility@3.1.1(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+
+  '@dnd-kit/accessibility@3.1.1(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@19.1.0)
+      '@dnd-kit/utilities': 3.2.2(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      tslib: 2.8.1
+
+  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      tslib: 2.8.1
+
+  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@dnd-kit/utilities': 3.2.2(react@19.1.0)
+      react: 19.1.0
+      tslib: 2.8.1
+
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      tslib: 2.8.1
+
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@dnd-kit/utilities': 3.2.2(react@19.1.0)
+      react: 19.1.0
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+      tslib: 2.8.1
+
+  '@dotenvx/dotenvx@1.48.4':
+    dependencies:
+      commander: 11.1.0
+      dotenv: 17.2.1
+      eciesjs: 0.4.15
+      execa: 5.1.1
+      fdir: 6.4.6(picomatch@4.0.3)
+      ignore: 5.3.2
+      object-treeify: 1.1.33
+      picomatch: 4.0.3
+      which: 4.0.0
+
+  '@ecies/ciphers@0.2.4(@noble/ciphers@1.3.0)':
+    dependencies:
+      '@noble/ciphers': 1.3.0
+
   '@effect-ts/core@0.60.5':
     dependencies:
       '@effect-ts/system': 0.57.5
 
-  '@effect-ts/otel-sdk-trace-node@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.24.1(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.24.1(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-node@1.24.1(@opentelemetry/api@1.8.0))':
+  '@effect-ts/otel-sdk-trace-node@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-node@1.30.1(@opentelemetry/api@1.9.0))':
     dependencies:
       '@effect-ts/core': 0.60.5
-      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.24.1(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.24.1(@opentelemetry/api@1.8.0))
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-node': 1.24.1(@opentelemetry/api@1.8.0)
+      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-node': 1.30.1(@opentelemetry/api@1.9.0)
 
-  '@effect-ts/otel@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.24.1(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.24.1(@opentelemetry/api@1.8.0))':
+  '@effect-ts/otel@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))':
     dependencies:
       '@effect-ts/core': 0.60.5
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.24.1(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.30.1(@opentelemetry/api@1.9.0)
 
   '@effect-ts/system@0.57.5': {}
 
-  '@emnapi/runtime@1.2.0':
+  '@emnapi/core@1.4.5':
+    dependencies:
+      '@emnapi/wasi-threads': 1.0.4
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.4.5':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.0.4':
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
     optional: true
 
-  '@esbuild-plugins/node-resolve@0.2.2(esbuild@0.17.19)':
+  '@emotion/is-prop-valid@1.3.1':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+
+  '@emotion/memoize@0.9.0': {}
+
+  '@esbuild-plugins/node-resolve@0.2.2(esbuild@0.25.8)':
     dependencies:
       '@types/resolve': 1.20.6
-      debug: 4.3.5
-      esbuild: 0.17.19
+      debug: 4.4.1
+      esbuild: 0.25.8
       escape-string-regexp: 4.0.0
-      resolve: 1.22.8
+      resolve: 1.22.10
     transitivePeerDependencies:
       - supports-color
 
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
-  '@esbuild/android-arm64@0.17.19':
-    optional: true
-
-  '@esbuild/android-arm64@0.18.20':
+  '@esbuild/aix-ppc64@0.25.8':
     optional: true
 
   '@esbuild/android-arm64@0.21.5':
     optional: true
 
-  '@esbuild/android-arm@0.17.19':
-    optional: true
-
-  '@esbuild/android-arm@0.18.20':
+  '@esbuild/android-arm64@0.25.8':
     optional: true
 
   '@esbuild/android-arm@0.21.5':
     optional: true
 
-  '@esbuild/android-x64@0.17.19':
-    optional: true
-
-  '@esbuild/android-x64@0.18.20':
+  '@esbuild/android-arm@0.25.8':
     optional: true
 
   '@esbuild/android-x64@0.21.5':
     optional: true
 
-  '@esbuild/darwin-arm64@0.17.19':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.18.20':
+  '@esbuild/android-x64@0.25.8':
     optional: true
 
   '@esbuild/darwin-arm64@0.21.5':
     optional: true
 
-  '@esbuild/darwin-x64@0.17.19':
-    optional: true
-
-  '@esbuild/darwin-x64@0.18.20':
+  '@esbuild/darwin-arm64@0.25.8':
     optional: true
 
   '@esbuild/darwin-x64@0.21.5':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.17.19':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.18.20':
+  '@esbuild/darwin-x64@0.25.8':
     optional: true
 
   '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
-  '@esbuild/freebsd-x64@0.17.19':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.18.20':
+  '@esbuild/freebsd-arm64@0.25.8':
     optional: true
 
   '@esbuild/freebsd-x64@0.21.5':
     optional: true
 
-  '@esbuild/linux-arm64@0.17.19':
-    optional: true
-
-  '@esbuild/linux-arm64@0.18.20':
+  '@esbuild/freebsd-x64@0.25.8':
     optional: true
 
   '@esbuild/linux-arm64@0.21.5':
     optional: true
 
-  '@esbuild/linux-arm@0.17.19':
-    optional: true
-
-  '@esbuild/linux-arm@0.18.20':
+  '@esbuild/linux-arm64@0.25.8':
     optional: true
 
   '@esbuild/linux-arm@0.21.5':
     optional: true
 
-  '@esbuild/linux-ia32@0.17.19':
-    optional: true
-
-  '@esbuild/linux-ia32@0.18.20':
+  '@esbuild/linux-arm@0.25.8':
     optional: true
 
   '@esbuild/linux-ia32@0.21.5':
     optional: true
 
-  '@esbuild/linux-loong64@0.17.19':
-    optional: true
-
-  '@esbuild/linux-loong64@0.18.20':
+  '@esbuild/linux-ia32@0.25.8':
     optional: true
 
   '@esbuild/linux-loong64@0.21.5':
     optional: true
 
-  '@esbuild/linux-mips64el@0.17.19':
-    optional: true
-
-  '@esbuild/linux-mips64el@0.18.20':
+  '@esbuild/linux-loong64@0.25.8':
     optional: true
 
   '@esbuild/linux-mips64el@0.21.5':
     optional: true
 
-  '@esbuild/linux-ppc64@0.17.19':
-    optional: true
-
-  '@esbuild/linux-ppc64@0.18.20':
+  '@esbuild/linux-mips64el@0.25.8':
     optional: true
 
   '@esbuild/linux-ppc64@0.21.5':
     optional: true
 
-  '@esbuild/linux-riscv64@0.17.19':
-    optional: true
-
-  '@esbuild/linux-riscv64@0.18.20':
+  '@esbuild/linux-ppc64@0.25.8':
     optional: true
 
   '@esbuild/linux-riscv64@0.21.5':
     optional: true
 
-  '@esbuild/linux-s390x@0.17.19':
-    optional: true
-
-  '@esbuild/linux-s390x@0.18.20':
+  '@esbuild/linux-riscv64@0.25.8':
     optional: true
 
   '@esbuild/linux-s390x@0.21.5':
     optional: true
 
-  '@esbuild/linux-x64@0.17.19':
-    optional: true
-
-  '@esbuild/linux-x64@0.18.20':
+  '@esbuild/linux-s390x@0.25.8':
     optional: true
 
   '@esbuild/linux-x64@0.21.5':
     optional: true
 
-  '@esbuild/netbsd-x64@0.17.19':
+  '@esbuild/linux-x64@0.25.8':
     optional: true
 
-  '@esbuild/netbsd-x64@0.18.20':
+  '@esbuild/netbsd-arm64@0.25.8':
     optional: true
 
   '@esbuild/netbsd-x64@0.21.5':
     optional: true
 
-  '@esbuild/openbsd-x64@0.17.19':
+  '@esbuild/netbsd-x64@0.25.8':
     optional: true
 
-  '@esbuild/openbsd-x64@0.18.20':
+  '@esbuild/openbsd-arm64@0.25.8':
     optional: true
 
   '@esbuild/openbsd-x64@0.21.5':
     optional: true
 
-  '@esbuild/sunos-x64@0.17.19':
+  '@esbuild/openbsd-x64@0.25.8':
     optional: true
 
-  '@esbuild/sunos-x64@0.18.20':
+  '@esbuild/openharmony-arm64@0.25.8':
     optional: true
 
   '@esbuild/sunos-x64@0.21.5':
     optional: true
 
-  '@esbuild/win32-arm64@0.17.19':
-    optional: true
-
-  '@esbuild/win32-arm64@0.18.20':
+  '@esbuild/sunos-x64@0.25.8':
     optional: true
 
   '@esbuild/win32-arm64@0.21.5':
     optional: true
 
-  '@esbuild/win32-ia32@0.17.19':
-    optional: true
-
-  '@esbuild/win32-ia32@0.18.20':
+  '@esbuild/win32-arm64@0.25.8':
     optional: true
 
   '@esbuild/win32-ia32@0.21.5':
     optional: true
 
-  '@esbuild/win32-x64@0.17.19':
+  '@esbuild/win32-ia32@0.25.8':
     optional: true
 
-  '@esbuild/win32-x64@0.18.20':
+  '@esbuild/win32-x64@0.21.5':
     optional: true
 
-  '@esbuild/win32-x64@0.21.5':
+  '@esbuild/win32-x64@0.25.8':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@8.44.0)':
+  '@eslint-community/eslint-utils@4.7.0(eslint@8.57.1)':
+    dependencies:
+      eslint: 8.57.1
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/eslint-utils@4.7.0(eslint@9.33.0(jiti@2.5.1))':
     dependencies:
-      eslint: 8.44.0
+      eslint: 9.33.0(jiti@2.5.1)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.10.1': {}
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/config-array@0.21.0':
+    dependencies:
+      '@eslint/object-schema': 2.1.6
+      debug: 4.4.1
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.3.1': {}
+
+  '@eslint/core@0.15.2':
+    dependencies:
+      '@types/json-schema': 7.0.15
 
   '@eslint/eslintrc@2.1.4':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.5
+      debug: 4.4.1
       espree: 9.6.1
       globals: 13.24.0
-      ignore: 5.3.1
-      import-fresh: 3.3.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/eslintrc@3.3.1':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.1
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
       js-yaml: 4.1.0
       minimatch: 3.1.2
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@8.44.0': {}
+  '@eslint/js@8.57.1': {}
+
+  '@eslint/js@9.33.0': {}
+
+  '@eslint/object-schema@2.1.6': {}
 
-  '@faker-js/faker@8.2.0': {}
+  '@eslint/plugin-kit@0.3.5':
+    dependencies:
+      '@eslint/core': 0.15.2
+      levn: 0.4.1
+
+  '@faker-js/faker@8.4.1': {}
 
   '@fal-works/esbuild-plugin-global-externals@2.1.2': {}
 
-  '@floating-ui/core@1.6.2':
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.3':
     dependencies:
-      '@floating-ui/utils': 0.2.2
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
 
-  '@floating-ui/dom@1.6.5':
+  '@floating-ui/react-dom@2.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@floating-ui/core': 1.6.2
-      '@floating-ui/utils': 0.2.2
+      '@floating-ui/dom': 1.7.3
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  '@floating-ui/react-dom@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@floating-ui/react-dom@2.1.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@floating-ui/dom': 1.6.5
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@floating-ui/dom': 1.7.3
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@floating-ui/utils@0.2.10': {}
 
-  '@floating-ui/utils@0.2.2': {}
+  '@formatjs/intl-localematcher@0.6.1':
+    dependencies:
+      tslib: 2.8.1
 
-  '@grpc/grpc-js@1.10.8':
+  '@grpc/grpc-js@1.13.4':
     dependencies:
-      '@grpc/proto-loader': 0.7.13
+      '@grpc/proto-loader': 0.7.15
       '@js-sdsl/ordered-map': 4.4.2
 
-  '@grpc/proto-loader@0.7.13':
+  '@grpc/proto-loader@0.7.15':
     dependencies:
       lodash.camelcase: 4.3.0
-      long: 5.2.3
-      protobufjs: 7.3.0
+      long: 5.3.2
+      protobufjs: 7.5.3
       yargs: 17.7.2
 
-  '@hookform/resolvers@3.1.0(react-hook-form@7.44.2(react@18.2.0))':
+  '@hapi/hoek@9.3.0': {}
+
+  '@hapi/topo@5.1.0':
     dependencies:
-      react-hook-form: 7.44.2(react@18.2.0)
+      '@hapi/hoek': 9.3.0
 
-  '@humanwhocodes/config-array@0.11.14':
+  '@hookform/resolvers@3.10.0(react-hook-form@7.62.0(react@18.3.1))':
+    dependencies:
+      react-hook-form: 7.62.0(react@18.3.1)
+
+  '@hookform/resolvers@3.10.0(react-hook-form@7.62.0(react@19.1.0))':
+    dependencies:
+      react-hook-form: 7.62.0(react@19.1.0)
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
+
+  '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.5
+      debug: 4.4.1
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -8199,13 +10030,17 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
   '@ianvs/prettier-plugin-sort-imports@3.7.2(prettier@2.8.8)':
     dependencies:
-      '@babel/core': 7.24.6
-      '@babel/generator': 7.24.6
-      '@babel/parser': 7.24.6
-      '@babel/traverse': 7.24.6
-      '@babel/types': 7.24.6
+      '@babel/core': 7.28.0
+      '@babel/generator': 7.28.0
+      '@babel/parser': 7.28.0
+      '@babel/traverse': 7.28.0
+      '@babel/types': 7.28.2
       javascript-natural-sort: 0.7.1
       lodash.clone: 4.5.0
       lodash.isequal: 4.5.0
@@ -8213,146 +10048,294 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@img/sharp-darwin-arm64@0.33.4':
+  '@ianvs/prettier-plugin-sort-imports@4.6.1(prettier@3.6.2)':
+    dependencies:
+      '@babel/generator': 7.28.0
+      '@babel/parser': 7.28.0
+      '@babel/traverse': 7.28.0
+      '@babel/types': 7.28.2
+      prettier: 3.6.2
+      semver: 7.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@img/sharp-darwin-arm64@0.33.5':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.0.2
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
     optional: true
 
-  '@img/sharp-darwin-x64@0.33.4':
+  '@img/sharp-darwin-arm64@0.34.3':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.0.2
+      '@img/sharp-libvips-darwin-arm64': 1.2.0
     optional: true
 
-  '@img/sharp-libvips-darwin-arm64@1.0.2':
+  '@img/sharp-darwin-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.0.4
     optional: true
 
-  '@img/sharp-libvips-darwin-x64@1.0.2':
+  '@img/sharp-darwin-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.0
     optional: true
 
-  '@img/sharp-libvips-linux-arm64@1.0.2':
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
     optional: true
 
-  '@img/sharp-libvips-linux-arm@1.0.2':
+  '@img/sharp-libvips-darwin-arm64@1.2.0':
     optional: true
 
-  '@img/sharp-libvips-linux-s390x@1.0.2':
+  '@img/sharp-libvips-darwin-x64@1.0.4':
     optional: true
 
-  '@img/sharp-libvips-linux-x64@1.0.2':
+  '@img/sharp-libvips-darwin-x64@1.2.0':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.0.2':
+  '@img/sharp-libvips-linux-arm64@1.0.4':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-x64@1.0.2':
+  '@img/sharp-libvips-linux-arm64@1.2.0':
     optional: true
 
-  '@img/sharp-linux-arm64@0.33.4':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.0.2
+  '@img/sharp-libvips-linux-arm@1.0.5':
     optional: true
 
-  '@img/sharp-linux-arm@0.33.4':
+  '@img/sharp-libvips-linux-arm@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.0':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.33.5':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.0.2
+      '@img/sharp-libvips-linux-arm64': 1.0.4
     optional: true
 
-  '@img/sharp-linux-s390x@0.33.4':
+  '@img/sharp-linux-arm64@0.34.3':
     optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.0.2
+      '@img/sharp-libvips-linux-arm64': 1.2.0
     optional: true
 
-  '@img/sharp-linux-x64@0.33.4':
+  '@img/sharp-linux-arm@0.33.5':
     optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.0.2
+      '@img/sharp-libvips-linux-arm': 1.0.5
     optional: true
 
-  '@img/sharp-linuxmusl-arm64@0.33.4':
+  '@img/sharp-linux-arm@0.34.3':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.0.2
+      '@img/sharp-libvips-linux-arm': 1.2.0
     optional: true
 
-  '@img/sharp-linuxmusl-x64@0.33.4':
+  '@img/sharp-linux-ppc64@0.34.3':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.0.2
+      '@img/sharp-libvips-linux-ppc64': 1.2.0
     optional: true
 
-  '@img/sharp-wasm32@0.33.4':
-    dependencies:
-      '@emnapi/runtime': 1.2.0
+  '@img/sharp-linux-s390x@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.0.4
     optional: true
 
-  '@img/sharp-win32-ia32@0.33.4':
+  '@img/sharp-linux-s390x@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.0
     optional: true
 
-  '@img/sharp-win32-x64@0.33.4':
+  '@img/sharp-linux-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.0.4
     optional: true
 
-  '@isaacs/cliui@8.0.2':
-    dependencies:
-      string-width: 5.1.2
-      string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: wrap-ansi@7.0.0
+  '@img/sharp-linux-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.0
+    optional: true
 
-  '@jridgewell/gen-mapping@0.3.5':
-    dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.25
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+    optional: true
 
-  '@jridgewell/resolve-uri@3.1.2': {}
+  '@img/sharp-linuxmusl-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.0
+    optional: true
 
-  '@jridgewell/set-array@1.2.1': {}
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+    optional: true
 
-  '@jridgewell/sourcemap-codec@1.4.15': {}
+  '@img/sharp-linuxmusl-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.0
+    optional: true
 
-  '@jridgewell/trace-mapping@0.3.25':
+  '@img/sharp-wasm32@0.33.5':
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@emnapi/runtime': 1.4.5
+    optional: true
 
-  '@jridgewell/trace-mapping@0.3.9':
+  '@img/sharp-wasm32@0.34.3':
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@emnapi/runtime': 1.4.5
+    optional: true
 
-  '@js-sdsl/ordered-map@4.4.2': {}
+  '@img/sharp-win32-arm64@0.34.3':
+    optional: true
 
-  '@js-temporal/polyfill@0.4.4':
-    dependencies:
-      jsbi: 4.3.0
-      tslib: 2.6.2
+  '@img/sharp-win32-ia32@0.33.5':
+    optional: true
 
-  '@jsonjoy.com/base64@1.1.2(tslib@2.6.2)':
-    dependencies:
-      tslib: 2.6.2
+  '@img/sharp-win32-ia32@0.34.3':
+    optional: true
 
-  '@jsonjoy.com/json-pack@1.0.4(tslib@2.6.2)':
-    dependencies:
-      '@jsonjoy.com/base64': 1.1.2(tslib@2.6.2)
-      '@jsonjoy.com/util': 1.2.0(tslib@2.6.2)
-      hyperdyperid: 1.2.0
-      thingies: 1.21.0(tslib@2.6.2)
-      tslib: 2.6.2
+  '@img/sharp-win32-x64@0.33.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.3':
+    optional: true
 
-  '@jsonjoy.com/util@1.2.0(tslib@2.6.2)':
+  '@inquirer/confirm@5.1.14(@types/node@20.19.10)':
     dependencies:
-      tslib: 2.6.2
+      '@inquirer/core': 10.1.15(@types/node@20.19.10)
+      '@inquirer/type': 3.0.8(@types/node@20.19.10)
+    optionalDependencies:
+      '@types/node': 20.19.10
 
-  '@manypkg/cli@0.20.0':
+  '@inquirer/core@10.1.15(@types/node@20.19.10)':
     dependencies:
-      '@manypkg/get-packages': 2.2.1
-      chalk: 2.4.2
+      '@inquirer/figures': 1.0.13
+      '@inquirer/type': 3.0.8(@types/node@20.19.10)
+      ansi-escapes: 4.3.2
+      cli-width: 4.1.0
+      mute-stream: 2.0.0
+      signal-exit: 4.1.0
+      wrap-ansi: 6.2.0
+      yoctocolors-cjs: 2.1.2
+    optionalDependencies:
+      '@types/node': 20.19.10
+
+  '@inquirer/figures@1.0.13': {}
+
+  '@inquirer/type@3.0.8(@types/node@20.19.10)':
+    optionalDependencies:
+      '@types/node': 20.19.10
+
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.0':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
+  '@jridgewell/gen-mapping@0.3.12':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.4
+      '@jridgewell/trace-mapping': 0.3.29
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.4': {}
+
+  '@jridgewell/trace-mapping@0.3.29':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.4
+
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.4
+
+  '@js-sdsl/ordered-map@4.4.2': {}
+
+  '@js-temporal/polyfill@0.4.4':
+    dependencies:
+      jsbi: 4.3.2
+      tslib: 2.8.1
+
+  '@jsonjoy.com/base64@1.1.2(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/buffers@1.0.0(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/codegen@1.0.0(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/json-pack@1.10.0(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/base64': 1.1.2(tslib@2.8.1)
+      '@jsonjoy.com/buffers': 1.0.0(tslib@2.8.1)
+      '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1)
+      '@jsonjoy.com/json-pointer': 1.0.1(tslib@2.8.1)
+      '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
+      hyperdyperid: 1.2.0
+      thingies: 2.5.0(tslib@2.8.1)
+      tslib: 2.8.1
+
+  '@jsonjoy.com/json-pointer@1.0.1(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
+      tslib: 2.8.1
+
+  '@jsonjoy.com/util@1.9.0(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/buffers': 1.0.0(tslib@2.8.1)
+      '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1)
+      tslib: 2.8.1
+
+  '@manypkg/cli@0.20.0':
+    dependencies:
+      '@manypkg/get-packages': 2.2.2
+      chalk: 2.4.2
       detect-indent: 6.1.0
       find-up: 4.1.0
       fs-extra: 8.1.0
       normalize-path: 3.0.0
       p-limit: 2.3.0
       package-json: 6.5.0
-      parse-github-url: 1.0.2
+      parse-github-url: 1.0.3
       sembear: 0.5.2
       semver: 6.3.1
       spawndamnit: 2.0.0
@@ -8360,142 +10343,181 @@ snapshots:
 
   '@manypkg/find-root@1.1.0':
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.28.2
       '@types/node': 12.20.55
       find-up: 4.1.0
       fs-extra: 8.1.0
 
-  '@manypkg/find-root@2.2.1':
+  '@manypkg/find-root@2.2.3':
     dependencies:
-      '@manypkg/tools': 1.1.0
-      find-up: 4.1.0
-      fs-extra: 8.1.0
+      '@manypkg/tools': 1.1.2
 
   '@manypkg/get-packages@1.1.3':
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.28.2
       '@changesets/types': 4.1.0
       '@manypkg/find-root': 1.1.0
       fs-extra: 8.1.0
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
-  '@manypkg/get-packages@2.2.1':
+  '@manypkg/get-packages@2.2.2':
     dependencies:
-      '@manypkg/find-root': 2.2.1
-      '@manypkg/tools': 1.1.0
+      '@manypkg/find-root': 2.2.3
+      '@manypkg/tools': 1.1.2
 
-  '@manypkg/tools@1.1.0':
+  '@manypkg/tools@1.1.2':
     dependencies:
-      fs-extra: 8.1.0
-      globby: 11.1.0
+      fast-glob: 3.3.3
       jju: 1.4.0
-      read-yaml-file: 1.1.0
+      js-yaml: 4.1.0
 
-  '@mdx-js/esbuild@3.0.1(esbuild@0.17.19)':
+  '@mdx-js/esbuild@3.1.0(acorn@8.15.0)(esbuild@0.25.8)':
     dependencies:
-      '@mdx-js/mdx': 3.0.1
-      '@types/unist': 3.0.2
-      esbuild: 0.17.19
-      vfile: 6.0.1
-      vfile-message: 4.0.2
+      '@mdx-js/mdx': 3.1.0(acorn@8.15.0)
+      '@types/unist': 3.0.3
+      esbuild: 0.25.8
+      source-map: 0.7.6
+      vfile: 6.0.3
+      vfile-message: 4.0.3
     transitivePeerDependencies:
+      - acorn
       - supports-color
 
-  '@mdx-js/mdx@3.0.1':
+  '@mdx-js/mdx@3.1.0(acorn@8.15.0)':
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
       '@types/mdx': 2.0.13
       collapse-white-space: 2.1.0
       devlop: 1.1.0
-      estree-util-build-jsx: 3.0.1
       estree-util-is-identifier-name: 3.0.0
-      estree-util-to-js: 2.0.0
+      estree-util-scope: 1.0.0
       estree-walker: 3.0.3
-      hast-util-to-estree: 3.1.0
-      hast-util-to-jsx-runtime: 2.3.0
+      hast-util-to-jsx-runtime: 2.3.6
       markdown-extensions: 2.0.0
-      periscopic: 3.1.0
-      remark-mdx: 3.0.1
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.1(acorn@8.15.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
+      remark-mdx: 3.1.0
       remark-parse: 11.0.0
-      remark-rehype: 11.1.0
-      source-map: 0.7.4
+      remark-rehype: 11.1.2
+      source-map: 0.7.6
       unified: 11.0.5
       unist-util-position-from-estree: 2.0.0
       unist-util-stringify-position: 4.0.0
       unist-util-visit: 5.0.0
-      vfile: 6.0.1
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - acorn
+      - supports-color
+
+  '@modelcontextprotocol/sdk@1.17.2':
+    dependencies:
+      ajv: 6.12.6
+      content-type: 1.0.5
+      cors: 2.8.5
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.0.3
+      express: 5.1.0
+      express-rate-limit: 7.5.1(express@5.1.0)
+      pkce-challenge: 5.0.0
+      raw-body: 3.0.0
+      zod: 3.25.76
+      zod-to-json-schema: 3.24.6(zod@3.25.76)
     transitivePeerDependencies:
       - supports-color
 
-  '@next/env@14.1.3': {}
+  '@mswjs/interceptors@0.39.5':
+    dependencies:
+      '@open-draft/deferred-promise': 2.2.0
+      '@open-draft/logger': 0.3.0
+      '@open-draft/until': 2.1.0
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      strict-event-emitter: 0.5.1
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    dependencies:
+      '@emnapi/core': 1.4.5
+      '@emnapi/runtime': 1.4.5
+      '@tybys/wasm-util': 0.10.0
+    optional: true
 
   '@next/env@14.3.0-canary.43': {}
 
-  '@next/eslint-plugin-next@13.0.0':
-    dependencies:
-      glob: 7.1.7
+  '@next/env@15.3.1': {}
 
   '@next/eslint-plugin-next@13.3.0':
     dependencies:
       glob: 7.1.7
 
-  '@next/swc-darwin-arm64@14.1.3':
-    optional: true
+  '@next/eslint-plugin-next@15.3.1':
+    dependencies:
+      fast-glob: 3.3.1
 
   '@next/swc-darwin-arm64@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-darwin-x64@14.1.3':
+  '@next/swc-darwin-arm64@15.3.1':
     optional: true
 
   '@next/swc-darwin-x64@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@14.1.3':
+  '@next/swc-darwin-x64@15.3.1':
     optional: true
 
   '@next/swc-linux-arm64-gnu@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-linux-arm64-musl@14.1.3':
+  '@next/swc-linux-arm64-gnu@15.3.1':
     optional: true
 
   '@next/swc-linux-arm64-musl@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-linux-x64-gnu@14.1.3':
+  '@next/swc-linux-arm64-musl@15.3.1':
     optional: true
 
   '@next/swc-linux-x64-gnu@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-linux-x64-musl@14.1.3':
+  '@next/swc-linux-x64-gnu@15.3.1':
     optional: true
 
   '@next/swc-linux-x64-musl@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@14.1.3':
+  '@next/swc-linux-x64-musl@15.3.1':
     optional: true
 
   '@next/swc-win32-arm64-msvc@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-win32-ia32-msvc@14.1.3':
+  '@next/swc-win32-arm64-msvc@15.3.1':
     optional: true
 
   '@next/swc-win32-ia32-msvc@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-win32-x64-msvc@14.1.3':
+  '@next/swc-win32-x64-msvc@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-win32-x64-msvc@14.3.0-canary.43':
+  '@next/swc-win32-x64-msvc@15.3.1':
     optional: true
 
+  '@noble/ciphers@1.3.0': {}
+
+  '@noble/curves@1.9.6':
+    dependencies:
+      '@noble/hashes': 1.8.0
+
+  '@noble/hashes@1.8.0': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -8506,105 +10528,164 @@ snapshots:
   '@nodelib/fs.walk@1.2.8':
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.17.1
+      fastq: 1.19.1
+
+  '@nolyfill/is-core-module@1.0.39': {}
+
+  '@open-draft/deferred-promise@2.2.0': {}
+
+  '@open-draft/logger@0.3.0':
+    dependencies:
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+
+  '@open-draft/until@2.1.0': {}
 
   '@opentelemetry/api-logs@0.51.1':
     dependencies:
-      '@opentelemetry/api': 1.8.0
+      '@opentelemetry/api': 1.9.0
 
-  '@opentelemetry/api@1.8.0': {}
+  '@opentelemetry/api@1.9.0': {}
 
-  '@opentelemetry/context-async-hooks@1.24.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
+      '@opentelemetry/api': 1.9.0
 
-  '@opentelemetry/core@1.24.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/core@1.24.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
+      '@opentelemetry/api': 1.9.0
       '@opentelemetry/semantic-conventions': 1.24.1
 
-  '@opentelemetry/exporter-trace-otlp-grpc@0.51.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/semantic-conventions': 1.28.0
+
+  '@opentelemetry/exporter-trace-otlp-grpc@0.51.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@grpc/grpc-js': 1.10.8
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/otlp-grpc-exporter-base': 0.51.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/otlp-transformer': 0.51.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.24.1(@opentelemetry/api@1.8.0)
+      '@grpc/grpc-js': 1.13.4
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/otlp-grpc-exporter-base': 0.51.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/otlp-transformer': 0.51.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.24.1(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/otlp-exporter-base@0.51.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/otlp-exporter-base@0.51.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/otlp-grpc-exporter-base@0.51.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/otlp-grpc-exporter-base@0.51.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@grpc/grpc-js': 1.10.8
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/otlp-exporter-base': 0.51.1(@opentelemetry/api@1.8.0)
-      protobufjs: 7.3.0
+      '@grpc/grpc-js': 1.13.4
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/otlp-exporter-base': 0.51.1(@opentelemetry/api@1.9.0)
+      protobufjs: 7.5.3
 
-  '@opentelemetry/otlp-transformer@0.51.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/otlp-transformer@0.51.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
+      '@opentelemetry/api': 1.9.0
       '@opentelemetry/api-logs': 0.51.1
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-logs': 0.51.1(@opentelemetry/api-logs@0.51.1)(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-metrics': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.24.1(@opentelemetry/api@1.8.0)
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-logs': 0.51.1(@opentelemetry/api-logs@0.51.1)(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-metrics': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.24.1(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/propagator-b3@1.24.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/propagator-b3@1.30.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/propagator-jaeger@1.24.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/propagator-jaeger@1.30.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/resources@1.24.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/resources@1.24.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
       '@opentelemetry/semantic-conventions': 1.24.1
 
-  '@opentelemetry/sdk-logs@0.51.1(@opentelemetry/api-logs@0.51.1)(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/resources@1.30.1(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.28.0
+
+  '@opentelemetry/sdk-logs@0.51.1(@opentelemetry/api-logs@0.51.1)(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
+      '@opentelemetry/api': 1.9.0
       '@opentelemetry/api-logs': 0.51.1
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.8.0)
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/sdk-metrics@1.24.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/sdk-metrics@1.24.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.9.0)
       lodash.merge: 4.6.2
 
-  '@opentelemetry/sdk-trace-base@1.24.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/sdk-trace-base@1.24.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.9.0)
       '@opentelemetry/semantic-conventions': 1.24.1
 
-  '@opentelemetry/sdk-trace-node@1.24.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/context-async-hooks': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/propagator-b3': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/propagator-jaeger': 1.24.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.24.1(@opentelemetry/api@1.8.0)
-      semver: 7.6.2
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.28.0
+
+  '@opentelemetry/sdk-trace-node@1.30.1(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/context-async-hooks': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/propagator-b3': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/propagator-jaeger': 1.30.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.30.1(@opentelemetry/api@1.9.0)
+      semver: 7.7.2
 
   '@opentelemetry/semantic-conventions@1.24.1': {}
 
+  '@opentelemetry/semantic-conventions@1.28.0': {}
+
+  '@opentelemetry/semantic-conventions@1.36.0': {}
+
+  '@orama/orama@3.1.11': {}
+
+  '@oxc-transform/binding-darwin-arm64@0.53.0':
+    optional: true
+
+  '@oxc-transform/binding-darwin-x64@0.53.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-arm64-gnu@0.53.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-arm64-musl@0.53.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-x64-gnu@0.53.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-x64-musl@0.53.0':
+    optional: true
+
+  '@oxc-transform/binding-win32-arm64-msvc@0.53.0':
+    optional: true
+
+  '@oxc-transform/binding-win32-x64-msvc@0.53.0':
+    optional: true
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -8631,1054 +10712,1701 @@ snapshots:
 
   '@protobufjs/utf8@1.1.0': {}
 
-  '@radix-ui/number@1.0.1':
+  '@puppeteer/browsers@2.6.1':
+    dependencies:
+      debug: 4.4.1
+      extract-zip: 2.0.1
+      progress: 2.0.3
+      proxy-agent: 6.5.0
+      semver: 7.7.2
+      tar-fs: 3.1.0
+      unbzip2-stream: 1.4.3
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - bare-buffer
+      - supports-color
+
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.2': {}
+
+  '@radix-ui/react-accessible-icon@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-accessible-icon@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-accordion@1.2.11(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collapsible': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-accordion@1.2.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collapsible': 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-alert-dialog@1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-alert-dialog@1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-checkbox@1.3.2(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-checkbox@1.3.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-collapsible@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-collapsible@1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.2)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.2
+
+  '@radix-ui/react-context-menu@2.2.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-context-menu@2.2.15(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-context@1.1.2(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.1.2)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.2
+
+  '@radix-ui/react-dialog@1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.3.23)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-dialog@1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.1(@types/react@19.1.2)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-direction@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.2)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.2
+
+  '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-focus-guards@1.1.2(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.2)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.2
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-hover-card@1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-hover-card@1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-icons@1.3.2(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
+  '@radix-ui/react-icons@1.3.2(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+
+  '@radix-ui/react-id@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.1.2)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.2
+
+  '@radix-ui/react-label@2.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-label@2.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-menu@2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.3.23)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-menu@2.1.15(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.1(@types/react@19.1.2)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-menubar@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-menubar@1.1.15(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-navigation-menu@1.2.13(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-navigation-menu@1.2.13(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-popover@1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.3.23)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-popover@1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.1(@types/react@19.1.2)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-popper@1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-popper@1.2.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-presence@1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
-  '@radix-ui/primitive@1.0.1':
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
 
-  '@radix-ui/primitive@1.1.0': {}
+  '@radix-ui/react-progress@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
-  '@radix-ui/react-accessible-icon@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-progress@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-radio-group@1.3.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-radio-group@1.3.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-scroll-area@1.2.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-scroll-area@1.2.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-select@2.2.5(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.3.23)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-select@2.2.5(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.1(@types/react@19.1.2)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
 
-  '@radix-ui/react-accordion@1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
-  '@radix-ui/react-alert-dialog@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-dialog': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-slider@1.3.5(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-slider@1.3.5(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
 
-  '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-slot@1.2.3(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 18.3.23
 
-  '@radix-ui/react-aspect-ratio@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.2
+
+  '@radix-ui/react-switch@1.2.5(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-switch@1.2.5(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-tabs@1.1.12(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-tabs@1.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-toast@1.2.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-toast@1.2.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-toggle-group@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-toggle-group@1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle': 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
 
-  '@radix-ui/react-avatar@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-toggle@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
-  '@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-toggle@1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/react-tooltip@1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-tooltip@1.2.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
 
-  '@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.67)(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.67
-
-  '@radix-ui/react-compose-refs@1.1.0(@types/react@18.2.67)(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.67
-
-  '@radix-ui/react-context-menu@2.1.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-menu': 2.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-context@1.0.1(@types/react@18.2.67)(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.67
-
-  '@radix-ui/react-context@1.1.0(@types/react@18.2.67)(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.67
-
-  '@radix-ui/react-dialog@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      aria-hidden: 1.2.4
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.67)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      aria-hidden: 1.2.4
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.67)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-dialog@1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      aria-hidden: 1.2.4
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.7(@types/react@18.2.67)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-direction@1.0.1(@types/react@18.2.67)(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.67
-
-  '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-dismissable-layer@1.1.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-dropdown-menu@2.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-menu': 2.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 18.3.23
 
-  '@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      react: 18.2.0
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 19.1.2
 
-  '@radix-ui/react-focus-guards@1.1.0(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      react: 18.2.0
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.67
-
-  '@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 18.3.23
 
-  '@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-focus-scope@1.1.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-hover-card@1.0.6(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-icons@1.3.0(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-
-  '@radix-ui/react-id@1.0.1(@types/react@18.2.67)(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.67
-
-  '@radix-ui/react-id@1.1.0(@types/react@18.2.67)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.67
-
-  '@radix-ui/react-label@2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-menu@2.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      aria-hidden: 1.2.4
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.67)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-menubar@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-menu': 2.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-navigation-menu@1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-popover@1.0.6(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      aria-hidden: 1.2.4
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.67)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@floating-ui/react-dom': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/rect': 1.0.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@floating-ui/react-dom': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/rect': 1.0.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-portal@1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-presence@1.1.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-progress@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-radio-group@1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-scroll-area@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/number': 1.0.1
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-select@2.0.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/number': 1.0.1
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      aria-hidden: 1.2.4
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.67)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-slider@1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/number': 1.0.1
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-slot@1.0.2(@types/react@18.2.67)(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.67
-
-  '@radix-ui/react-slot@1.1.0(@types/react@18.2.67)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.67
-
-  '@radix-ui/react-switch@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-tabs@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
-
-  '@radix-ui/react-toast@1.1.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 19.1.2
 
-  '@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-toggle': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 18.3.23
 
-  '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 19.1.2
 
-  '@radix-ui/react-tooltip@1.0.6(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 18.3.23
 
-  '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      react: 18.2.0
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 19.1.2
 
-  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
+      use-sync-external-store: 1.5.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 18.3.23
 
-  '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
+      react: 19.1.0
+      use-sync-external-store: 1.5.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 19.1.2
 
-  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 18.3.23
 
-  '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 19.1.2
 
-  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-previous@1.1.1(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 18.3.23
 
-  '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      react: 18.2.0
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 19.1.2
 
-  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-rect@1.1.1(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      react: 18.2.0
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 18.3.23
 
-  '@radix-ui/react-use-previous@1.0.1(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      react: 18.2.0
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 19.1.2
 
-  '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-size@1.1.1(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/rect': 1.0.1
-      react: 18.2.0
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 18.3.23
 
-  '@radix-ui/react-use-size@1.0.1(@types/react@18.2.67)(react@18.2.0)':
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
-      react: 18.2.0
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 19.1.2
 
-  '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.67
-      '@types/react-dom': 18.2.22
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
-  '@radix-ui/rect@1.0.1':
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
+  '@radix-ui/rect@1.1.1': {}
 
   '@resvg/resvg-wasm@2.0.0-alpha.4': {}
 
-  '@rollup/rollup-android-arm-eabi@4.21.0':
+  '@rollup/rollup-android-arm-eabi@4.46.2':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.46.2':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.46.2':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.21.0':
+  '@rollup/rollup-darwin-x64@4.46.2':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.21.0':
+  '@rollup/rollup-freebsd-arm64@4.46.2':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.21.0':
+  '@rollup/rollup-freebsd-x64@4.46.2':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.21.0':
+  '@rollup/rollup-linux-arm-gnueabihf@4.46.2':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.21.0':
+  '@rollup/rollup-linux-arm-musleabihf@4.46.2':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.21.0':
+  '@rollup/rollup-linux-arm64-gnu@4.46.2':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.21.0':
+  '@rollup/rollup-linux-arm64-musl@4.46.2':
     optional: true
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.21.0':
+  '@rollup/rollup-linux-loongarch64-gnu@4.46.2':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.21.0':
+  '@rollup/rollup-linux-ppc64-gnu@4.46.2':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.21.0':
+  '@rollup/rollup-linux-riscv64-gnu@4.46.2':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.21.0':
+  '@rollup/rollup-linux-riscv64-musl@4.46.2':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.21.0':
+  '@rollup/rollup-linux-s390x-gnu@4.46.2':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.21.0':
+  '@rollup/rollup-linux-x64-gnu@4.46.2':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.21.0':
+  '@rollup/rollup-linux-x64-musl@4.46.2':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.21.0':
+  '@rollup/rollup-win32-arm64-msvc@4.46.2':
     optional: true
 
-  '@rushstack/eslint-patch@1.10.3': {}
+  '@rollup/rollup-win32-ia32-msvc@4.46.2':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.46.2':
+    optional: true
+
+  '@rtsao/scc@1.1.0': {}
+
+  '@rushstack/eslint-patch@1.12.0': {}
+
+  '@sec-ant/readable-stream@0.4.1': {}
+
+  '@shikijs/compat@1.29.2':
+    dependencies:
+      '@shikijs/core': 1.29.2
+      '@shikijs/langs': 1.29.2
+      '@shikijs/themes': 1.29.2
+      '@shikijs/transformers': 1.29.2
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+      shiki: 1.29.2
+
+  '@shikijs/core@1.29.2':
+    dependencies:
+      '@shikijs/engine-javascript': 1.29.2
+      '@shikijs/engine-oniguruma': 1.29.2
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/core@3.9.2':
+    dependencies:
+      '@shikijs/types': 3.9.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@1.29.2':
+    dependencies:
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 2.3.0
+
+  '@shikijs/engine-javascript@3.9.2':
+    dependencies:
+      '@shikijs/types': 3.9.2
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.3
+
+  '@shikijs/engine-oniguruma@1.29.2':
+    dependencies:
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/engine-oniguruma@3.9.2':
+    dependencies:
+      '@shikijs/types': 3.9.2
+      '@shikijs/vscode-textmate': 10.0.2
 
-  '@shikijs/compat@1.1.7':
+  '@shikijs/langs@1.29.2':
     dependencies:
-      '@shikijs/core': 1.1.7
-      '@shikijs/transformers': 1.1.7
-      shiki: 1.1.7
+      '@shikijs/types': 1.29.2
 
-  '@shikijs/core@1.1.7': {}
+  '@shikijs/langs@3.9.2':
+    dependencies:
+      '@shikijs/types': 3.9.2
+
+  '@shikijs/rehype@3.9.2':
+    dependencies:
+      '@shikijs/types': 3.9.2
+      '@types/hast': 3.0.4
+      hast-util-to-string: 3.0.1
+      shiki: 3.9.2
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+
+  '@shikijs/themes@1.29.2':
+    dependencies:
+      '@shikijs/types': 1.29.2
+
+  '@shikijs/themes@3.9.2':
+    dependencies:
+      '@shikijs/types': 3.9.2
+
+  '@shikijs/transformers@1.29.2':
+    dependencies:
+      '@shikijs/core': 1.29.2
+      '@shikijs/types': 1.29.2
+
+  '@shikijs/transformers@3.9.2':
+    dependencies:
+      '@shikijs/core': 3.9.2
+      '@shikijs/types': 3.9.2
+
+  '@shikijs/types@1.29.2':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
 
-  '@shikijs/core@1.10.3':
+  '@shikijs/types@3.9.2':
     dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
-  '@shikijs/transformers@1.1.7':
+  '@shikijs/vscode-textmate@10.0.2': {}
+
+  '@shuding/opentype.js@1.4.0-beta.0':
+    dependencies:
+      fflate: 0.7.4
+      string.prototype.codepointat: 0.2.1
+
+  '@sideway/address@4.1.5':
+    dependencies:
+      '@hapi/hoek': 9.3.0
+
+  '@sideway/formula@3.0.1': {}
+
+  '@sideway/pinpoint@2.0.0': {}
+
+  '@sindresorhus/is@0.14.0': {}
+
+  '@sindresorhus/merge-streams@4.0.0': {}
+
+  '@standard-schema/spec@1.0.0': {}
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.11':
+    dependencies:
+      tslib: 2.8.1
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@szmarczak/http-timer@1.1.2':
+    dependencies:
+      defer-to-connect: 1.1.3
+
+  '@tabler/icons-react@3.34.1(react@19.1.0)':
+    dependencies:
+      '@tabler/icons': 3.34.1
+      react: 19.1.0
+
+  '@tabler/icons@3.34.1': {}
+
+  '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.6(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.9.2)))':
     dependencies:
-      shiki: 1.1.7
+      tailwindcss: 3.4.6(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.9.2))
+
+  '@tailwindcss/node@4.1.11':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      enhanced-resolve: 5.18.3
+      jiti: 2.5.1
+      lightningcss: 1.30.1
+      magic-string: 0.30.17
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.11
+
+  '@tailwindcss/oxide-android-arm64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+    optional: true
 
-  '@shuding/opentype.js@1.4.0-beta.0':
-    dependencies:
-      fflate: 0.7.4
-      string.prototype.codepointat: 0.2.1
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+    optional: true
 
-  '@sindresorhus/is@0.14.0': {}
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+    optional: true
 
-  '@swc/helpers@0.5.11':
+  '@tailwindcss/oxide@4.1.11':
     dependencies:
-      tslib: 2.6.2
-
-  '@swc/helpers@0.5.2':
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-x64': 4.1.11
+      '@tailwindcss/oxide-freebsd-x64': 4.1.11
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.11
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.11
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.11
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.11
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.11
+
+  '@tailwindcss/postcss@4.1.11':
     dependencies:
-      tslib: 2.6.2
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.11
+      '@tailwindcss/oxide': 4.1.11
+      postcss: 8.5.6
+      tailwindcss: 4.1.11
 
-  '@szmarczak/http-timer@1.1.2':
+  '@tanstack/react-table@8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      defer-to-connect: 1.1.3
+      '@tanstack/table-core': 8.21.3
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  '@tanstack/react-table@8.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@tanstack/react-table@8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@tanstack/table-core': 8.9.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@tanstack/table-core': 8.21.3
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@tanstack/table-core@8.21.3': {}
 
-  '@tanstack/table-core@8.9.1': {}
+  '@tootallnate/quickjs-emscripten@0.23.0': {}
 
   '@ts-morph/common@0.19.0':
     dependencies:
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       minimatch: 7.4.6
       mkdirp: 2.1.6
       path-browserify: 1.0.1
 
   '@ts-morph/common@0.23.0':
     dependencies:
-      fast-glob: 3.3.2
-      minimatch: 9.0.4
+      fast-glob: 3.3.3
+      minimatch: 9.0.5
       mkdirp: 3.0.1
       path-browserify: 1.0.1
 
+  '@ts-morph/common@0.27.0':
+    dependencies:
+      fast-glob: 3.3.3
+      minimatch: 10.0.3
+      path-browserify: 1.0.1
+
   '@tsconfig/node10@1.0.11': {}
 
   '@tsconfig/node12@1.0.11': {}
@@ -9687,30 +12415,33 @@ snapshots:
 
   '@tsconfig/node16@1.0.4': {}
 
-  '@types/acorn@4.0.6':
+  '@tybys/wasm-util@0.10.0':
     dependencies:
-      '@types/estree': 1.0.5
+      tslib: 2.8.1
+    optional: true
 
-  '@types/babel__core@7.20.1':
+  '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.22.6
-      '@babel/types': 7.24.6
-      '@types/babel__generator': 7.6.8
+      '@babel/parser': 7.28.0
+      '@babel/types': 7.28.2
+      '@types/babel__generator': 7.27.0
       '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.20.6
+      '@types/babel__traverse': 7.28.0
 
-  '@types/babel__generator@7.6.8':
+  '@types/babel__generator@7.27.0':
     dependencies:
-      '@babel/types': 7.24.6
+      '@babel/types': 7.28.2
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.24.6
-      '@babel/types': 7.24.6
+      '@babel/parser': 7.28.0
+      '@babel/types': 7.28.2
 
-  '@types/babel__traverse@7.20.6':
+  '@types/babel__traverse@7.28.0':
     dependencies:
-      '@babel/types': 7.24.6
+      '@babel/types': 7.28.2
+
+  '@types/cookie@0.6.0': {}
 
   '@types/d3-array@3.2.1': {}
 
@@ -9722,94 +12453,80 @@ snapshots:
     dependencies:
       '@types/d3-color': 3.1.3
 
-  '@types/d3-path@3.1.0': {}
+  '@types/d3-path@3.1.1': {}
 
-  '@types/d3-scale@4.0.8':
+  '@types/d3-scale@4.0.9':
     dependencies:
-      '@types/d3-time': 3.0.3
+      '@types/d3-time': 3.0.4
 
-  '@types/d3-shape@3.1.6':
+  '@types/d3-shape@3.1.7':
     dependencies:
-      '@types/d3-path': 3.1.0
+      '@types/d3-path': 3.1.1
 
-  '@types/d3-time@3.0.3': {}
+  '@types/d3-time@3.0.4': {}
 
   '@types/d3-timer@3.0.2': {}
 
   '@types/debug@4.1.12':
     dependencies:
-      '@types/ms': 0.7.34
-
-  '@types/diff@5.0.3': {}
+      '@types/ms': 2.1.0
 
   '@types/estree-jsx@1.0.5':
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
 
-  '@types/estree@1.0.5': {}
+  '@types/estree@1.0.8': {}
 
   '@types/extend@3.0.4': {}
 
-  '@types/fs-extra@11.0.1':
+  '@types/fs-extra@11.0.4':
     dependencies:
       '@types/jsonfile': 6.1.4
-      '@types/node': 20.14.0
+      '@types/node': 20.19.10
 
   '@types/hast@2.3.10':
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   '@types/hast@3.0.4':
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 3.0.3
 
-  '@types/is-ci@3.0.4':
-    dependencies:
-      ci-info: 3.9.0
+  '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
 
   '@types/jsonfile@6.1.4':
     dependencies:
-      '@types/node': 20.14.0
+      '@types/node': 20.19.10
 
   '@types/keyv@3.1.4':
     dependencies:
-      '@types/node': 20.14.0
-
-  '@types/lodash.template@4.5.1':
-    dependencies:
-      '@types/lodash': 4.17.4
+      '@types/node': 20.19.10
 
-  '@types/lodash@4.17.4': {}
+  '@types/lodash@4.17.20': {}
 
   '@types/mdast@3.0.15':
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   '@types/mdast@4.0.4':
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   '@types/mdx@2.0.13': {}
 
-  '@types/minimatch@3.0.5': {}
-
   '@types/minimist@1.2.5': {}
 
-  '@types/ms@0.7.34': {}
+  '@types/ms@2.1.0': {}
 
   '@types/node@12.20.55': {}
 
   '@types/node@17.0.45': {}
 
-  '@types/node@20.11.27':
-    dependencies:
-      undici-types: 5.26.5
-
-  '@types/node@20.14.0':
+  '@types/node@20.19.10':
     dependencies:
-      undici-types: 5.26.5
+      undici-types: 6.21.0
 
   '@types/node@20.5.1': {}
 
@@ -9817,96 +12534,265 @@ snapshots:
 
   '@types/parse5@6.0.3': {}
 
-  '@types/prompts@2.4.2':
+  '@types/prompts@2.4.9':
     dependencies:
-      '@types/node': 20.14.0
+      '@types/node': 20.19.10
       kleur: 3.0.3
 
-  '@types/prop-types@15.7.12': {}
+  '@types/prop-types@15.7.15': {}
+
+  '@types/react-color@3.0.13(@types/react@18.3.23)':
+    dependencies:
+      '@types/react': 18.3.23
+      '@types/reactcss': 1.2.13(@types/react@18.3.23)
+
+  '@types/react-dom@18.3.7(@types/react@18.3.23)':
+    dependencies:
+      '@types/react': 18.3.23
 
-  '@types/react-color@3.0.6':
+  '@types/react-dom@19.1.2(@types/react@19.1.2)':
     dependencies:
-      '@types/react': 18.2.67
-      '@types/reactcss': 1.2.12
+      '@types/react': 19.1.2
 
-  '@types/react-dom@18.2.22':
+  '@types/react@18.3.23':
     dependencies:
-      '@types/react': 18.2.67
+      '@types/prop-types': 15.7.15
+      csstype: 3.1.3
 
-  '@types/react@18.2.67':
+  '@types/react@19.1.2':
     dependencies:
-      '@types/prop-types': 15.7.12
-      '@types/scheduler': 0.23.0
       csstype: 3.1.3
 
-  '@types/reactcss@1.2.12':
+  '@types/reactcss@1.2.13(@types/react@18.3.23)':
     dependencies:
-      '@types/react': 18.2.67
+      '@types/react': 18.3.23
 
   '@types/resolve@1.20.6': {}
 
   '@types/responselike@1.0.3':
     dependencies:
-      '@types/node': 20.14.0
-
-  '@types/scheduler@0.23.0': {}
+      '@types/node': 20.19.10
 
   '@types/semver@6.2.7': {}
 
+  '@types/statuses@2.0.6': {}
+
   '@types/stringify-object@4.0.5': {}
 
-  '@types/unist@2.0.10': {}
+  '@types/tough-cookie@4.0.5': {}
+
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
 
-  '@types/unist@3.0.2': {}
+  '@types/yauzl@2.10.3':
+    dependencies:
+      '@types/node': 20.19.10
+    optional: true
 
   '@types/yoga-layout@1.9.2': {}
 
-  '@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3)':
+  '@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/scope-manager': 8.39.0
+      '@typescript-eslint/type-utils': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.39.0
+      eslint: 9.33.0(jiti@2.5.1)
+      graphemer: 1.4.0
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/scope-manager': 5.61.0
-      '@typescript-eslint/types': 5.61.0
-      '@typescript-eslint/typescript-estree': 5.61.0(typescript@5.5.3)
-      debug: 4.3.5
-      eslint: 8.44.0
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.9.2)
+      debug: 4.4.1
+      eslint: 8.57.1
     optionalDependencies:
-      typescript: 5.5.3
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.39.0
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.39.0
+      debug: 4.4.1
+      eslint: 9.33.0(jiti@2.5.1)
+      typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@5.61.0':
+  '@typescript-eslint/project-service@8.39.0(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/types': 5.61.0
-      '@typescript-eslint/visitor-keys': 5.61.0
+      '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.39.0
+      debug: 4.4.1
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@5.62.0':
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
+
+  '@typescript-eslint/scope-manager@8.39.0':
+    dependencies:
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/visitor-keys': 8.39.0
+
+  '@typescript-eslint/tsconfig-utils@8.39.0(typescript@5.9.2)':
+    dependencies:
+      typescript: 5.9.2
 
-  '@typescript-eslint/types@5.61.0': {}
+  '@typescript-eslint/type-utils@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      debug: 4.4.1
+      eslint: 9.33.0(jiti@2.5.1)
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@5.62.0': {}
 
-  '@typescript-eslint/typescript-estree@5.61.0(typescript@5.5.3)':
+  '@typescript-eslint/types@8.39.0': {}
+
+  '@typescript-eslint/typescript-estree@5.62.0(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/types': 5.61.0
-      '@typescript-eslint/visitor-keys': 5.61.0
-      debug: 4.3.5
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
+      debug: 4.4.1
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.6.2
-      tsutils: 3.21.0(typescript@5.5.3)
+      semver: 7.7.2
+      tsutils: 3.21.0(typescript@5.9.2)
     optionalDependencies:
-      typescript: 5.5.3
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/typescript-estree@8.39.0(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.39.0(typescript@5.9.2)
+      '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/visitor-keys': 8.39.0
+      debug: 4.4.1
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.2
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.33.0(jiti@2.5.1))
+      '@typescript-eslint/scope-manager': 8.39.0
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
+      eslint: 9.33.0(jiti@2.5.1)
+      typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@5.61.0':
+  '@typescript-eslint/visitor-keys@5.62.0':
     dependencies:
-      '@typescript-eslint/types': 5.61.0
+      '@typescript-eslint/types': 5.62.0
       eslint-visitor-keys: 3.4.3
 
-  '@ungap/structured-clone@1.2.0': {}
+  '@typescript-eslint/visitor-keys@8.39.0':
+    dependencies:
+      '@typescript-eslint/types': 8.39.0
+      eslint-visitor-keys: 4.2.1
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    optional: true
 
-  '@vercel/analytics@1.2.2(next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)':
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     dependencies:
-      server-only: 0.0.1
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    optional: true
+
+  '@vercel/analytics@1.5.0(next@14.3.0-canary.43(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+    optionalDependencies:
+      next: 14.3.0-canary.43(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+
+  '@vercel/analytics@1.5.0(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)':
     optionalDependencies:
-      next: 14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+      next: 15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
 
   '@vercel/og@0.0.21':
     dependencies:
@@ -9914,37 +12800,45 @@ snapshots:
       satori: 0.0.44
       yoga-wasm-web: 0.1.2
 
-  '@vitest/expect@2.0.5':
+  '@vitest/expect@2.1.9':
     dependencies:
-      '@vitest/spy': 2.0.5
-      '@vitest/utils': 2.0.5
-      chai: 5.1.1
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.2.1
       tinyrainbow: 1.2.0
 
-  '@vitest/pretty-format@2.0.5':
+  '@vitest/mocker@2.1.9(msw@2.10.4(@types/node@20.19.10)(typescript@5.9.2))(vite@5.4.19(@types/node@20.19.10)(lightningcss@1.30.1))':
+    dependencies:
+      '@vitest/spy': 2.1.9
+      estree-walker: 3.0.3
+      magic-string: 0.30.17
+    optionalDependencies:
+      msw: 2.10.4(@types/node@20.19.10)(typescript@5.9.2)
+      vite: 5.4.19(@types/node@20.19.10)(lightningcss@1.30.1)
+
+  '@vitest/pretty-format@2.1.9':
     dependencies:
       tinyrainbow: 1.2.0
 
-  '@vitest/runner@2.0.5':
+  '@vitest/runner@2.1.9':
     dependencies:
-      '@vitest/utils': 2.0.5
+      '@vitest/utils': 2.1.9
       pathe: 1.1.2
 
-  '@vitest/snapshot@2.0.5':
+  '@vitest/snapshot@2.1.9':
     dependencies:
-      '@vitest/pretty-format': 2.0.5
-      magic-string: 0.30.10
+      '@vitest/pretty-format': 2.1.9
+      magic-string: 0.30.17
       pathe: 1.1.2
 
-  '@vitest/spy@2.0.5':
+  '@vitest/spy@2.1.9':
     dependencies:
-      tinyspy: 3.0.0
+      tinyspy: 3.0.2
 
-  '@vitest/utils@2.0.5':
+  '@vitest/utils@2.1.9':
     dependencies:
-      '@vitest/pretty-format': 2.0.5
-      estree-walker: 3.0.3
-      loupe: 3.1.1
+      '@vitest/pretty-format': 2.1.9
+      loupe: 3.2.0
       tinyrainbow: 1.2.0
 
   JSONStream@1.3.5:
@@ -9952,19 +12846,22 @@ snapshots:
       jsonparse: 1.3.1
       through: 2.3.8
 
-  acorn-jsx@5.3.2(acorn@8.11.3):
+  accepts@2.0.0:
     dependencies:
-      acorn: 8.11.3
-
-  acorn-walk@8.3.2: {}
+      mime-types: 3.0.1
+      negotiator: 1.0.0
 
-  acorn@8.11.3: {}
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
 
-  agent-base@7.1.1:
+  acorn-walk@8.3.4:
     dependencies:
-      debug: 4.3.5
-    transitivePeerDependencies:
-      - supports-color
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  agent-base@7.1.4: {}
 
   ajv@6.12.6:
     dependencies:
@@ -9973,18 +12870,22 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  ajv@8.14.0:
+  ajv@8.17.1:
     dependencies:
       fast-deep-equal: 3.1.3
+      fast-uri: 3.0.6
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
-      uri-js: 4.4.1
 
   ansi-colors@4.1.3: {}
 
+  ansi-escapes@4.3.2:
+    dependencies:
+      type-fest: 0.21.3
+
   ansi-regex@5.0.1: {}
 
-  ansi-regex@6.0.1: {}
+  ansi-regex@6.1.0: {}
 
   ansi-styles@3.2.1:
     dependencies:
@@ -9996,6 +12897,8 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
+  ansis@4.1.0: {}
+
   any-promise@1.3.0: {}
 
   anymatch@3.1.3:
@@ -10013,126 +12916,168 @@ snapshots:
 
   argparse@2.0.1: {}
 
-  aria-hidden@1.2.4:
+  aria-hidden@1.2.6:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
-  aria-query@5.3.0:
-    dependencies:
-      dequal: 2.0.3
+  aria-query@5.3.2: {}
 
-  array-buffer-byte-length@1.0.1:
+  array-buffer-byte-length@1.0.2:
     dependencies:
-      call-bind: 1.0.7
-      is-array-buffer: 3.0.4
-
-  array-differ@3.0.0: {}
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
 
   array-ify@1.0.0: {}
 
-  array-includes@3.1.8:
+  array-includes@3.1.9:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
-      get-intrinsic: 1.2.4
-      is-string: 1.0.7
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
 
   array-timsort@1.0.3: {}
 
   array-union@2.1.0: {}
 
-  array.prototype.findlastindex@1.2.5:
+  array.prototype.findlast@1.2.5:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.findlastindex@1.2.6:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.24.0
       es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      es-shim-unscopables: 1.0.2
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
 
-  array.prototype.flat@1.3.2:
+  array.prototype.flat@1.3.3:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-shim-unscopables: 1.0.2
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
 
-  array.prototype.flatmap@1.3.2:
+  array.prototype.flatmap@1.3.3:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-shim-unscopables: 1.0.2
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
 
   array.prototype.tosorted@1.1.4:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.24.0
       es-errors: 1.3.0
-      es-shim-unscopables: 1.0.2
+      es-shim-unscopables: 1.1.0
 
-  arraybuffer.prototype.slice@1.0.3:
+  arraybuffer.prototype.slice@1.0.4:
     dependencies:
-      array-buffer-byte-length: 1.0.1
-      call-bind: 1.0.7
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.24.0
       es-errors: 1.3.0
-      get-intrinsic: 1.2.4
-      is-array-buffer: 3.0.4
-      is-shared-array-buffer: 1.0.3
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
 
   arrify@1.0.1: {}
 
-  arrify@2.0.1: {}
-
-  assert@2.1.0:
-    dependencies:
-      call-bind: 1.0.7
-      is-nan: 1.3.2
-      object-is: 1.1.6
-      object.assign: 4.1.5
-      util: 0.12.5
-
   assertion-error@2.0.1: {}
 
   ast-types-flow@0.0.8: {}
 
+  ast-types@0.13.4:
+    dependencies:
+      tslib: 2.8.1
+
   ast-types@0.16.1:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
+
+  astring@1.9.0: {}
 
-  astring@1.8.6: {}
+  async-function@1.0.0: {}
 
-  autoprefixer@10.4.14(postcss@8.4.24):
+  asynckit@0.4.0: {}
+
+  autoprefixer@10.4.21(postcss@8.5.6):
     dependencies:
-      browserslist: 4.23.0
-      caniuse-lite: 1.0.30001627
+      browserslist: 4.26.2
+      caniuse-lite: 1.0.30001734
       fraction.js: 4.3.7
       normalize-range: 0.1.2
-      picocolors: 1.0.1
-      postcss: 8.4.24
+      picocolors: 1.1.1
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
   available-typed-arrays@1.0.7:
     dependencies:
-      possible-typed-array-names: 1.0.0
+      possible-typed-array-names: 1.1.0
 
-  axe-core@4.7.0: {}
+  axe-core@4.10.3: {}
 
-  axobject-query@3.2.1:
+  axios@1.11.0(debug@4.4.1):
     dependencies:
-      dequal: 2.0.3
+      follow-redirects: 1.15.11(debug@4.4.1)
+      form-data: 4.0.4
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
+  axobject-query@4.1.0: {}
+
+  b4a@1.6.7: {}
 
   bail@2.0.2: {}
 
   balanced-match@1.0.2: {}
 
+  bare-events@2.6.1:
+    optional: true
+
+  bare-fs@4.1.6:
+    dependencies:
+      bare-events: 2.6.1
+      bare-path: 3.0.0
+      bare-stream: 2.6.5(bare-events@2.6.1)
+    optional: true
+
+  bare-os@3.6.1:
+    optional: true
+
+  bare-path@3.0.0:
+    dependencies:
+      bare-os: 3.6.1
+    optional: true
+
+  bare-stream@2.6.5(bare-events@2.6.1):
+    dependencies:
+      streamx: 2.22.1
+    optionalDependencies:
+      bare-events: 2.6.1
+    optional: true
+
   base64-js@1.5.1: {}
 
+  baseline-browser-mapping@2.8.4: {}
+
+  basic-ftp@5.0.5: {}
+
   better-path-resolve@1.0.0:
     dependencies:
       is-windows: 1.0.2
@@ -10145,18 +13090,28 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
-  bl@5.1.0:
+  bluebird@3.7.2: {}
+
+  body-parser@2.2.0:
     dependencies:
-      buffer: 6.0.3
-      inherits: 2.0.4
-      readable-stream: 3.6.2
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.1
+      http-errors: 2.0.0
+      iconv-lite: 0.6.3
+      on-finished: 2.4.1
+      qs: 6.14.0
+      raw-body: 3.0.0
+      type-is: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
 
-  brace-expansion@1.1.11:
+  brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
       concat-map: 0.0.1
 
-  brace-expansion@2.0.1:
+  brace-expansion@2.0.2:
     dependencies:
       balanced-match: 1.0.2
 
@@ -10164,16 +13119,15 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  breakword@1.0.6:
+  browserslist@4.26.2:
     dependencies:
-      wcwidth: 1.0.1
+      baseline-browser-mapping: 2.8.4
+      caniuse-lite: 1.0.30001743
+      electron-to-chromium: 1.5.218
+      node-releases: 2.0.21
+      update-browserslist-db: 1.1.3(browserslist@4.26.2)
 
-  browserslist@4.23.0:
-    dependencies:
-      caniuse-lite: 1.0.30001627
-      electron-to-chromium: 1.4.788
-      node-releases: 2.0.14
-      update-browserslist-db: 1.0.16(browserslist@4.23.0)
+  buffer-crc32@0.2.13: {}
 
   buffer-from@1.1.2: {}
 
@@ -10182,48 +13136,54 @@ snapshots:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
-  buffer@6.0.3:
-    dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
-
   builtins@1.0.3: {}
 
-  bundle-require@4.2.1(esbuild@0.17.19):
+  bundle-require@5.1.0(esbuild@0.25.8):
     dependencies:
-      esbuild: 0.17.19
+      esbuild: 0.25.8
       load-tsconfig: 0.2.5
 
   busboy@1.6.0:
     dependencies:
       streamsearch: 1.1.0
 
+  bytes@3.1.2: {}
+
   cac@6.7.14: {}
 
   cacheable-request@6.1.0:
     dependencies:
       clone-response: 1.0.3
       get-stream: 5.2.0
-      http-cache-semantics: 4.1.1
+      http-cache-semantics: 4.2.0
       keyv: 3.1.0
       lowercase-keys: 2.0.0
       normalize-url: 4.5.1
       responselike: 1.0.2
 
-  call-bind@1.0.7:
+  call-bind-apply-helpers@1.0.2:
     dependencies:
-      es-define-property: 1.0.0
       es-errors: 1.3.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.4
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
       set-function-length: 1.2.2
 
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
   callsites@3.1.0: {}
 
   camel-case@4.1.2:
     dependencies:
       pascal-case: 3.1.2
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   camelcase-css@2.0.1: {}
 
@@ -10237,17 +13197,19 @@ snapshots:
 
   camelize@1.0.1: {}
 
-  caniuse-lite@1.0.30001627: {}
+  caniuse-lite@1.0.30001734: {}
+
+  caniuse-lite@1.0.30001743: {}
 
   ccount@2.0.1: {}
 
-  chai@5.1.1:
+  chai@5.2.1:
     dependencies:
       assertion-error: 2.0.1
       check-error: 2.1.1
       deep-eql: 5.0.2
-      loupe: 3.1.1
-      pathval: 2.0.0
+      loupe: 3.2.0
+      pathval: 2.0.1
 
   chalk@2.4.2:
     dependencies:
@@ -10255,17 +13217,12 @@ snapshots:
       escape-string-regexp: 1.0.5
       supports-color: 5.5.0
 
-  chalk@3.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
-  chalk@5.2.0: {}
+  chalk@5.5.0: {}
 
   change-case@5.4.4: {}
 
@@ -10281,6 +13238,8 @@ snapshots:
 
   check-error@2.1.1: {}
 
+  check-more-types@2.24.0: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -10293,32 +13252,44 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
   chownr@1.1.4: {}
 
+  chownr@3.0.0: {}
+
+  chromium-bidi@0.11.0(devtools-protocol@0.0.1367902):
+    dependencies:
+      devtools-protocol: 0.0.1367902
+      mitt: 3.0.1
+      zod: 3.23.8
+
+  chrono-node@2.8.4:
+    dependencies:
+      dayjs: 1.11.13
+
   ci-info@3.9.0: {}
 
-  class-variance-authority@0.7.0:
+  class-variance-authority@0.7.1:
     dependencies:
-      clsx: 2.0.0
+      clsx: 2.1.1
 
-  cli-cursor@4.0.0:
+  cli-cursor@5.0.0:
     dependencies:
-      restore-cursor: 4.0.0
+      restore-cursor: 5.1.0
 
   cli-spinners@2.9.2: {}
 
+  cli-width@4.1.0: {}
+
   client-only@0.0.1: {}
 
   clipanion@3.2.1(typanion@3.14.0):
     dependencies:
       typanion: 3.14.0
 
-  cliui@6.0.0:
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 6.2.0
-
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
@@ -10329,25 +13300,37 @@ snapshots:
     dependencies:
       mimic-response: 1.0.1
 
-  clone@1.0.4: {}
-
   clsx@1.2.1: {}
 
-  clsx@2.0.0: {}
+  clsx@2.1.1: {}
+
+  cmdk@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
 
-  cmdk@1.0.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  cmdk@1.1.1(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
 
   code-block-writer@12.0.0: {}
 
-  code-block-writer@13.0.1: {}
+  code-block-writer@13.0.3: {}
 
   collapse-white-space@2.1.0: {}
 
@@ -10373,13 +13356,19 @@ snapshots:
       color-convert: 2.0.1
       color-string: 1.9.1
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   comma-separated-tokens@2.0.3: {}
 
-  commander@10.0.0: {}
+  commander@11.1.0: {}
+
+  commander@14.0.0: {}
 
   commander@4.1.1: {}
 
-  comment-json@4.2.3:
+  comment-json@4.2.5:
     dependencies:
       array-timsort: 1.0.3
       core-util-is: 1.0.3
@@ -10392,30 +13381,43 @@ snapshots:
       array-ify: 1.0.0
       dot-prop: 5.3.0
 
+  compute-scroll-into-view@3.1.1: {}
+
   concat-map@0.0.1: {}
 
-  concurrently@8.0.1:
+  concurrently@8.2.2:
     dependencies:
       chalk: 4.1.2
       date-fns: 2.30.0
       lodash: 4.17.21
-      rxjs: 7.8.1
-      shell-quote: 1.8.1
-      spawn-command: 0.0.2-1
+      rxjs: 7.8.2
+      shell-quote: 1.8.3
+      spawn-command: 0.0.2
       supports-color: 8.1.1
       tree-kill: 1.2.2
       yargs: 17.7.2
 
-  contentlayer2@0.4.6(esbuild@0.17.19)(markdown-wasm@1.2.0):
+  confbox@0.1.8: {}
+
+  consola@3.4.2: {}
+
+  content-disposition@1.0.0:
     dependencies:
-      '@contentlayer2/cli': 0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)
-      '@contentlayer2/client': 0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)
-      '@contentlayer2/core': 0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)
-      '@contentlayer2/source-files': 0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)
-      '@contentlayer2/source-remote-files': 0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)
+      safe-buffer: 5.2.1
+
+  content-type@1.0.5: {}
+
+  contentlayer2@0.4.6(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0):
+    dependencies:
+      '@contentlayer2/cli': 0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
+      '@contentlayer2/client': 0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
+      '@contentlayer2/core': 0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
+      '@contentlayer2/source-files': 0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
+      '@contentlayer2/source-remote-files': 0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
       '@contentlayer2/utils': 0.4.3
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
@@ -10424,11 +13426,9 @@ snapshots:
     dependencies:
       compare-func: 2.0.0
 
-  conventional-changelog-conventionalcommits@5.0.0:
+  conventional-changelog-conventionalcommits@6.1.0:
     dependencies:
       compare-func: 2.0.0
-      lodash: 4.17.21
-      q: 1.5.1
 
   conventional-commits-parser@4.0.0:
     dependencies:
@@ -10437,49 +13437,49 @@ snapshots:
       meow: 8.1.2
       split2: 3.2.2
 
-  convert-source-map@1.9.0: {}
-
   convert-source-map@2.0.0: {}
 
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.5.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))(typescript@5.5.3):
+  cors@2.8.5:
     dependencies:
-      '@types/node': 20.5.1
-      cosmiconfig: 8.3.6(typescript@5.5.3)
-      ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
-      typescript: 5.5.3
+      object-assign: 4.1.1
+      vary: 1.1.2
 
-  cosmiconfig@8.1.3:
+  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.9.2))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.9.2))(typescript@5.9.2):
     dependencies:
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      parse-json: 5.2.0
-      path-type: 4.0.0
+      '@types/node': 20.5.1
+      cosmiconfig: 8.3.6(typescript@5.9.2)
+      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.9.2)
+      typescript: 5.9.2
 
-  cosmiconfig@8.3.6(typescript@4.9.5):
+  cosmiconfig@8.3.6(typescript@5.9.2):
     dependencies:
-      import-fresh: 3.3.0
+      import-fresh: 3.3.1
       js-yaml: 4.1.0
       parse-json: 5.2.0
       path-type: 4.0.0
     optionalDependencies:
-      typescript: 4.9.5
+      typescript: 5.9.2
 
-  cosmiconfig@8.3.6(typescript@5.5.3):
+  cosmiconfig@9.0.0(typescript@5.9.2):
     dependencies:
-      import-fresh: 3.3.0
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
       js-yaml: 4.1.0
       parse-json: 5.2.0
-      path-type: 4.0.0
     optionalDependencies:
-      typescript: 5.5.3
+      typescript: 5.9.2
 
   create-require@1.1.1: {}
 
   cross-env@7.0.3:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
 
   cross-spawn@5.1.0:
     dependencies:
@@ -10487,7 +13487,7 @@ snapshots:
       shebang-command: 1.2.0
       which: 1.3.1
 
-  cross-spawn@7.0.3:
+  cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
@@ -10509,19 +13509,6 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  csv-generate@3.4.3: {}
-
-  csv-parse@4.16.3: {}
-
-  csv-stringify@5.6.5: {}
-
-  csv@5.5.3:
-    dependencies:
-      csv-generate: 3.4.3
-      csv-parse: 4.16.3
-      csv-stringify: 5.6.5
-      stream-transform: 2.1.3
-
   d3-array@3.2.4:
     dependencies:
       internmap: 2.0.3
@@ -10566,37 +13553,45 @@ snapshots:
 
   data-uri-to-buffer@4.0.1: {}
 
-  data-view-buffer@1.0.1:
+  data-uri-to-buffer@6.0.2: {}
+
+  data-view-buffer@1.0.2:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      is-data-view: 1.0.1
+      is-data-view: 1.0.2
 
-  data-view-byte-length@1.0.1:
+  data-view-byte-length@1.0.2:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      is-data-view: 1.0.1
+      is-data-view: 1.0.2
 
-  data-view-byte-offset@1.0.0:
+  data-view-byte-offset@1.0.1:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      is-data-view: 1.0.1
+      is-data-view: 1.0.2
 
   dataloader@1.4.0: {}
 
+  date-fns-jalali@4.1.0-0: {}
+
   date-fns@2.30.0:
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.28.2
+
+  date-fns@4.1.0: {}
+
+  dayjs@1.11.13: {}
 
   debug@3.2.7:
     dependencies:
       ms: 2.1.3
 
-  debug@4.3.5:
+  debug@4.4.1:
     dependencies:
-      ms: 2.1.2
+      ms: 2.1.3
 
   decamelize-keys@1.1.1:
     dependencies:
@@ -10607,7 +13602,7 @@ snapshots:
 
   decimal.js-light@2.5.1: {}
 
-  decode-named-character-reference@1.0.2:
+  decode-named-character-reference@1.2.0:
     dependencies:
       character-entities: 2.0.2
 
@@ -10619,6 +13614,8 @@ snapshots:
     dependencies:
       mimic-response: 3.1.0
 
+  dedent@1.6.0: {}
+
   deep-eql@5.0.2: {}
 
   deep-extend@0.6.0: {}
@@ -10627,17 +13624,13 @@ snapshots:
 
   deepmerge@4.3.1: {}
 
-  defaults@1.0.4:
-    dependencies:
-      clone: 1.0.4
-
   defer-to-connect@1.1.3: {}
 
   define-data-property@1.1.4:
     dependencies:
-      es-define-property: 1.0.0
+      es-define-property: 1.0.1
       es-errors: 1.3.0
-      gopd: 1.0.1
+      gopd: 1.2.0
 
   define-properties@1.2.1:
     dependencies:
@@ -10645,11 +13638,21 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  degenerator@5.0.1:
+    dependencies:
+      ast-types: 0.13.4
+      escodegen: 2.1.0
+      esprima: 4.0.1
+
+  delayed-stream@1.0.0: {}
+
+  depd@2.0.0: {}
+
   dequal@2.0.3: {}
 
   detect-indent@6.1.0: {}
 
-  detect-libc@2.0.3: {}
+  detect-libc@2.0.4: {}
 
   detect-node-es@1.1.0: {}
 
@@ -10657,14 +13660,16 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  devtools-protocol@0.0.1367902: {}
+
   didyoumean@1.2.2: {}
 
   diff@4.0.2: {}
 
-  diff@5.1.0: {}
-
   diff@5.2.0: {}
 
+  diff@8.0.2: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -10681,204 +13686,222 @@ snapshots:
 
   dom-helpers@5.2.1:
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.28.2
       csstype: 3.1.3
 
   dot-prop@5.3.0:
     dependencies:
       is-obj: 2.0.0
 
+  dotenv@16.0.3: {}
+
+  dotenv@17.2.1: {}
+
   dotenv@8.6.0: {}
 
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
   duplexer3@0.1.5: {}
 
+  duplexer@0.1.2: {}
+
   eastasianwidth@0.2.0: {}
 
-  electron-to-chromium@1.4.788: {}
+  eciesjs@0.4.15:
+    dependencies:
+      '@ecies/ciphers': 0.2.4(@noble/ciphers@1.3.0)
+      '@noble/ciphers': 1.3.0
+      '@noble/curves': 1.9.6
+      '@noble/hashes': 1.8.0
+
+  ee-first@1.1.1: {}
+
+  electron-to-chromium@1.5.218: {}
 
   embla-carousel-autoplay@8.0.0-rc15(embla-carousel@8.0.0-rc15):
     dependencies:
       embla-carousel: 8.0.0-rc15
 
-  embla-carousel-react@8.0.0-rc15(react@18.2.0):
+  embla-carousel-autoplay@8.5.2(embla-carousel@8.5.2):
+    dependencies:
+      embla-carousel: 8.5.2
+
+  embla-carousel-react@8.0.0-rc15(react@18.3.1):
     dependencies:
       embla-carousel: 8.0.0-rc15
       embla-carousel-reactive-utils: 8.0.0-rc15(embla-carousel@8.0.0-rc15)
-      react: 18.2.0
+      react: 18.3.1
+
+  embla-carousel-react@8.5.2(react@19.1.0):
+    dependencies:
+      embla-carousel: 8.5.2
+      embla-carousel-reactive-utils: 8.5.2(embla-carousel@8.5.2)
+      react: 19.1.0
 
   embla-carousel-reactive-utils@8.0.0-rc15(embla-carousel@8.0.0-rc15):
     dependencies:
       embla-carousel: 8.0.0-rc15
 
+  embla-carousel-reactive-utils@8.5.2(embla-carousel@8.5.2):
+    dependencies:
+      embla-carousel: 8.5.2
+
   embla-carousel@8.0.0-rc15: {}
 
-  emoji-regex@10.3.0: {}
+  embla-carousel@8.5.2: {}
+
+  emoji-regex-xs@1.0.0: {}
+
+  emoji-regex@10.4.0: {}
 
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
 
-  end-of-stream@1.4.4:
+  encodeurl@2.0.0: {}
+
+  end-of-stream@1.4.5:
     dependencies:
       once: 1.4.0
 
-  enhanced-resolve@5.16.1:
+  enhanced-resolve@5.18.3:
     dependencies:
       graceful-fs: 4.2.11
-      tapable: 2.2.1
+      tapable: 2.2.2
 
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
       strip-ansi: 6.0.1
 
-  entities@4.5.0: {}
+  entities@6.0.1: {}
+
+  env-paths@2.2.1: {}
 
   error-ex@1.3.2:
     dependencies:
       is-arrayish: 0.2.1
 
-  es-abstract@1.23.3:
+  es-abstract@1.24.0:
     dependencies:
-      array-buffer-byte-length: 1.0.1
-      arraybuffer.prototype.slice: 1.0.3
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
       available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      data-view-buffer: 1.0.1
-      data-view-byte-length: 1.0.1
-      data-view-byte-offset: 1.0.0
-      es-define-property: 1.0.0
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
       es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      es-set-tostringtag: 2.0.3
-      es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.6
-      get-intrinsic: 1.2.4
-      get-symbol-description: 1.0.2
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
       globalthis: 1.0.4
-      gopd: 1.0.1
+      gopd: 1.2.0
       has-property-descriptors: 1.0.2
-      has-proto: 1.0.3
-      has-symbols: 1.0.3
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
       hasown: 2.0.2
-      internal-slot: 1.0.7
-      is-array-buffer: 3.0.4
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
       is-callable: 1.2.7
-      is-data-view: 1.0.1
+      is-data-view: 1.0.2
       is-negative-zero: 2.0.3
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.3
-      is-string: 1.0.7
-      is-typed-array: 1.1.13
-      is-weakref: 1.0.2
-      object-inspect: 1.13.1
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
       object-keys: 1.1.1
-      object.assign: 4.1.5
-      regexp.prototype.flags: 1.5.2
-      safe-array-concat: 1.1.2
-      safe-regex-test: 1.0.3
-      string.prototype.trim: 1.2.9
-      string.prototype.trimend: 1.0.8
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
       string.prototype.trimstart: 1.0.8
-      typed-array-buffer: 1.0.2
-      typed-array-byte-length: 1.0.1
-      typed-array-byte-offset: 1.0.2
-      typed-array-length: 1.0.6
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.15
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.19
 
-  es-define-property@1.0.0:
-    dependencies:
-      get-intrinsic: 1.2.4
+  es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
-  es-iterator-helpers@1.0.19:
+  es-iterator-helpers@1.2.1:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.24.0
       es-errors: 1.3.0
-      es-set-tostringtag: 2.0.3
+      es-set-tostringtag: 2.1.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.4
+      get-intrinsic: 1.3.0
       globalthis: 1.0.4
+      gopd: 1.2.0
       has-property-descriptors: 1.0.2
-      has-proto: 1.0.3
-      has-symbols: 1.0.3
-      internal-slot: 1.0.7
-      iterator.prototype: 1.1.2
-      safe-array-concat: 1.1.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      iterator.prototype: 1.1.5
+      safe-array-concat: 1.1.3
+
+  es-module-lexer@1.7.0: {}
 
-  es-object-atoms@1.0.0:
+  es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
 
-  es-set-tostringtag@2.0.3:
+  es-set-tostringtag@2.1.0:
     dependencies:
-      get-intrinsic: 1.2.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  es-shim-unscopables@1.0.2:
+  es-shim-unscopables@1.1.0:
     dependencies:
       hasown: 2.0.2
 
-  es-to-primitive@1.2.1:
+  es-to-primitive@1.3.0:
     dependencies:
       is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
-
-  esbuild@0.17.19:
-    optionalDependencies:
-      '@esbuild/android-arm': 0.17.19
-      '@esbuild/android-arm64': 0.17.19
-      '@esbuild/android-x64': 0.17.19
-      '@esbuild/darwin-arm64': 0.17.19
-      '@esbuild/darwin-x64': 0.17.19
-      '@esbuild/freebsd-arm64': 0.17.19
-      '@esbuild/freebsd-x64': 0.17.19
-      '@esbuild/linux-arm': 0.17.19
-      '@esbuild/linux-arm64': 0.17.19
-      '@esbuild/linux-ia32': 0.17.19
-      '@esbuild/linux-loong64': 0.17.19
-      '@esbuild/linux-mips64el': 0.17.19
-      '@esbuild/linux-ppc64': 0.17.19
-      '@esbuild/linux-riscv64': 0.17.19
-      '@esbuild/linux-s390x': 0.17.19
-      '@esbuild/linux-x64': 0.17.19
-      '@esbuild/netbsd-x64': 0.17.19
-      '@esbuild/openbsd-x64': 0.17.19
-      '@esbuild/sunos-x64': 0.17.19
-      '@esbuild/win32-arm64': 0.17.19
-      '@esbuild/win32-ia32': 0.17.19
-      '@esbuild/win32-x64': 0.17.19
-
-  esbuild@0.18.20:
-    optionalDependencies:
-      '@esbuild/android-arm': 0.18.20
-      '@esbuild/android-arm64': 0.18.20
-      '@esbuild/android-x64': 0.18.20
-      '@esbuild/darwin-arm64': 0.18.20
-      '@esbuild/darwin-x64': 0.18.20
-      '@esbuild/freebsd-arm64': 0.18.20
-      '@esbuild/freebsd-x64': 0.18.20
-      '@esbuild/linux-arm': 0.18.20
-      '@esbuild/linux-arm64': 0.18.20
-      '@esbuild/linux-ia32': 0.18.20
-      '@esbuild/linux-loong64': 0.18.20
-      '@esbuild/linux-mips64el': 0.18.20
-      '@esbuild/linux-ppc64': 0.18.20
-      '@esbuild/linux-riscv64': 0.18.20
-      '@esbuild/linux-s390x': 0.18.20
-      '@esbuild/linux-x64': 0.18.20
-      '@esbuild/netbsd-x64': 0.18.20
-      '@esbuild/openbsd-x64': 0.18.20
-      '@esbuild/sunos-x64': 0.18.20
-      '@esbuild/win32-arm64': 0.18.20
-      '@esbuild/win32-ia32': 0.18.20
-      '@esbuild/win32-x64': 0.18.20
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
+  esast-util-from-estree@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      unist-util-position-from-estree: 2.0.0
+
+  esast-util-from-js@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      acorn: 8.15.0
+      esast-util-from-estree: 2.0.0
+      vfile-message: 4.0.3
 
   esbuild@0.21.5:
     optionalDependencies:
@@ -10906,7 +13929,38 @@ snapshots:
       '@esbuild/win32-ia32': 0.21.5
       '@esbuild/win32-x64': 0.21.5
 
-  escalade@3.1.2: {}
+  esbuild@0.25.8:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.8
+      '@esbuild/android-arm': 0.25.8
+      '@esbuild/android-arm64': 0.25.8
+      '@esbuild/android-x64': 0.25.8
+      '@esbuild/darwin-arm64': 0.25.8
+      '@esbuild/darwin-x64': 0.25.8
+      '@esbuild/freebsd-arm64': 0.25.8
+      '@esbuild/freebsd-x64': 0.25.8
+      '@esbuild/linux-arm': 0.25.8
+      '@esbuild/linux-arm64': 0.25.8
+      '@esbuild/linux-ia32': 0.25.8
+      '@esbuild/linux-loong64': 0.25.8
+      '@esbuild/linux-mips64el': 0.25.8
+      '@esbuild/linux-ppc64': 0.25.8
+      '@esbuild/linux-riscv64': 0.25.8
+      '@esbuild/linux-s390x': 0.25.8
+      '@esbuild/linux-x64': 0.25.8
+      '@esbuild/netbsd-arm64': 0.25.8
+      '@esbuild/netbsd-x64': 0.25.8
+      '@esbuild/openbsd-arm64': 0.25.8
+      '@esbuild/openbsd-x64': 0.25.8
+      '@esbuild/openharmony-arm64': 0.25.8
+      '@esbuild/sunos-x64': 0.25.8
+      '@esbuild/win32-arm64': 0.25.8
+      '@esbuild/win32-ia32': 0.25.8
+      '@esbuild/win32-x64': 0.25.8
+
+  escalade@3.2.0: {}
+
+  escape-html@1.0.3: {}
 
   escape-string-regexp@1.0.5: {}
 
@@ -10914,249 +13968,315 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-next@13.0.0(eslint@8.44.0)(typescript@5.5.3):
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
+  eslint-config-next@13.3.0(eslint@8.57.1)(typescript@5.9.2):
     dependencies:
-      '@next/eslint-plugin-next': 13.0.0
-      '@rushstack/eslint-patch': 1.10.3
-      '@typescript-eslint/parser': 5.61.0(eslint@8.44.0)(typescript@5.5.3)
-      eslint: 8.44.0
+      '@next/eslint-plugin-next': 13.3.0
+      '@rushstack/eslint-patch': 1.12.0
+      '@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@5.9.2)
+      eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.29.1)(eslint@8.44.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-typescript@2.7.1)(eslint@8.44.0)
-      eslint-plugin-jsx-a11y: 6.8.0(eslint@8.44.0)
-      eslint-plugin-react: 7.32.2(eslint@8.44.0)
-      eslint-plugin-react-hooks: 4.6.2(eslint@8.44.0)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
+      eslint-plugin-react: 7.37.5(eslint@8.57.1)
+      eslint-plugin-react-hooks: 4.6.2(eslint@8.57.1)
     optionalDependencies:
-      typescript: 5.5.3
+      typescript: 5.9.2
     transitivePeerDependencies:
       - eslint-import-resolver-webpack
+      - eslint-plugin-import-x
       - supports-color
 
-  eslint-config-next@13.3.0(eslint@8.44.0)(typescript@5.5.3):
+  eslint-config-next@15.3.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2):
     dependencies:
-      '@next/eslint-plugin-next': 13.3.0
-      '@rushstack/eslint-patch': 1.10.3
-      '@typescript-eslint/parser': 5.61.0(eslint@8.44.0)(typescript@5.5.3)
-      eslint: 8.44.0
+      '@next/eslint-plugin-next': 15.3.1
+      '@rushstack/eslint-patch': 1.12.0
+      '@typescript-eslint/eslint-plugin': 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint: 9.33.0(jiti@2.5.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0)
-      eslint-plugin-jsx-a11y: 6.8.0(eslint@8.44.0)
-      eslint-plugin-react: 7.32.2(eslint@8.44.0)
-      eslint-plugin-react-hooks: 4.6.2(eslint@8.44.0)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.33.0(jiti@2.5.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.33.0(jiti@2.5.1))
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.33.0(jiti@2.5.1))
+      eslint-plugin-react: 7.37.5(eslint@9.33.0(jiti@2.5.1))
+      eslint-plugin-react-hooks: 5.2.0(eslint@9.33.0(jiti@2.5.1))
     optionalDependencies:
-      typescript: 5.5.3
+      typescript: 5.9.2
     transitivePeerDependencies:
       - eslint-import-resolver-webpack
+      - eslint-plugin-import-x
       - supports-color
 
-  eslint-config-prettier@8.8.0(eslint@8.44.0):
+  eslint-config-prettier@8.10.2(eslint@8.57.1):
     dependencies:
-      eslint: 8.44.0
+      eslint: 8.57.1
 
-  eslint-config-turbo@1.9.9(eslint@8.44.0):
+  eslint-config-turbo@1.13.4(eslint@8.57.1):
     dependencies:
-      eslint: 8.44.0
-      eslint-plugin-turbo: 1.9.9(eslint@8.44.0)
+      eslint: 8.57.1
+      eslint-plugin-turbo: 1.13.4(eslint@8.57.1)
 
   eslint-import-resolver-node@0.3.9:
     dependencies:
       debug: 3.2.7
-      is-core-module: 2.13.1
-      resolve: 1.22.8
+      is-core-module: 2.16.1
+      resolve: 1.22.10
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@8.44.0):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1):
     dependencies:
-      debug: 4.3.5
-      eslint: 8.44.0
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-typescript@2.7.1)(eslint@8.44.0)
-      glob: 7.2.3
-      is-glob: 4.0.3
-      resolve: 1.22.8
-      tsconfig-paths: 3.15.0
+      '@nolyfill/is-core-module': 1.0.39
+      debug: 4.4.1
+      eslint: 8.57.1
+      get-tsconfig: 4.10.1
+      is-bun-module: 2.0.0
+      stable-hash: 0.0.5
+      tinyglobby: 0.2.14
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
-      debug: 4.3.5
-      enhanced-resolve: 5.16.1
-      eslint: 8.44.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0))(eslint@8.44.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0)
-      fast-glob: 3.3.2
-      get-tsconfig: 4.7.5
-      is-core-module: 2.13.1
-      is-glob: 4.0.3
+      '@nolyfill/is-core-module': 1.0.39
+      debug: 4.4.1
+      eslint: 9.33.0(jiti@2.5.1)
+      get-tsconfig: 4.10.1
+      is-bun-module: 2.0.0
+      stable-hash: 0.0.5
+      tinyglobby: 0.2.14
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.33.0(jiti@2.5.1))
     transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@8.44.0))(eslint@8.44.0):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 5.61.0(eslint@8.44.0)(typescript@5.5.3)
-      eslint: 8.44.0
+      '@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@5.9.2)
+      eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.29.1)(eslint@8.44.0)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0))(eslint@8.44.0):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 5.61.0(eslint@8.44.0)(typescript@5.5.3)
-      eslint: 8.44.0
+      '@typescript-eslint/parser': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint: 9.33.0(jiti@2.5.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.33.0(jiti@2.5.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-typescript@2.7.1)(eslint@8.44.0):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
     dependencies:
-      array-includes: 3.1.8
-      array.prototype.findlastindex: 1.2.5
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 8.44.0
+      eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@8.44.0))(eslint@8.44.0)
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
       hasown: 2.0.2
-      is-core-module: 2.13.1
+      is-core-module: 2.16.1
       is-glob: 4.0.3
       minimatch: 3.1.2
       object.fromentries: 2.0.8
       object.groupby: 1.0.3
-      object.values: 1.2.0
+      object.values: 1.2.1
       semver: 6.3.1
+      string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 5.61.0(eslint@8.44.0)(typescript@5.5.3)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@5.9.2)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
-      array-includes: 3.1.8
-      array.prototype.findlastindex: 1.2.5
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 8.44.0
+      eslint: 9.33.0(jiti@2.5.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0))(eslint@8.44.0)
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.33.0(jiti@2.5.1))
       hasown: 2.0.2
-      is-core-module: 2.13.1
+      is-core-module: 2.16.1
       is-glob: 4.0.3
       minimatch: 3.1.2
       object.fromentries: 2.0.8
       object.groupby: 1.0.3
-      object.values: 1.2.0
+      object.values: 1.2.1
       semver: 6.3.1
+      string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 5.61.0(eslint@8.44.0)(typescript@5.5.3)
+      '@typescript-eslint/parser': 8.39.0(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jsx-a11y@6.8.0(eslint@8.44.0):
+  eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.1):
+    dependencies:
+      aria-query: 5.3.2
+      array-includes: 3.1.9
+      array.prototype.flatmap: 1.3.3
+      ast-types-flow: 0.0.8
+      axe-core: 4.10.3
+      axobject-query: 4.1.0
+      damerau-levenshtein: 1.0.8
+      emoji-regex: 9.2.2
+      eslint: 8.57.1
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      language-tags: 1.0.9
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      safe-regex-test: 1.1.0
+      string.prototype.includes: 2.0.1
+
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
-      '@babel/runtime': 7.24.6
-      aria-query: 5.3.0
-      array-includes: 3.1.8
-      array.prototype.flatmap: 1.3.2
+      aria-query: 5.3.2
+      array-includes: 3.1.9
+      array.prototype.flatmap: 1.3.3
       ast-types-flow: 0.0.8
-      axe-core: 4.7.0
-      axobject-query: 3.2.1
+      axe-core: 4.10.3
+      axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
-      es-iterator-helpers: 1.0.19
-      eslint: 8.44.0
+      eslint: 9.33.0(jiti@2.5.1)
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
       minimatch: 3.1.2
-      object.entries: 1.1.8
       object.fromentries: 2.0.8
+      safe-regex-test: 1.1.0
+      string.prototype.includes: 2.0.1
+
+  eslint-plugin-react-hooks@4.6.2(eslint@8.57.1):
+    dependencies:
+      eslint: 8.57.1
 
-  eslint-plugin-react-hooks@4.6.2(eslint@8.44.0):
+  eslint-plugin-react-hooks@5.2.0(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
-      eslint: 8.44.0
+      eslint: 9.33.0(jiti@2.5.1)
 
-  eslint-plugin-react@7.32.2(eslint@8.44.0):
+  eslint-plugin-react@7.37.5(eslint@8.57.1):
     dependencies:
-      array-includes: 3.1.8
-      array.prototype.flatmap: 1.3.2
+      array-includes: 3.1.9
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.3
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
-      eslint: 8.44.0
+      es-iterator-helpers: 1.2.1
+      eslint: 8.57.1
       estraverse: 5.3.0
+      hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       minimatch: 3.1.2
-      object.entries: 1.1.8
+      object.entries: 1.1.9
       object.fromentries: 2.0.8
-      object.hasown: 1.1.4
-      object.values: 1.2.0
+      object.values: 1.2.1
       prop-types: 15.8.1
       resolve: 2.0.0-next.5
       semver: 6.3.1
-      string.prototype.matchall: 4.0.11
+      string.prototype.matchall: 4.0.12
+      string.prototype.repeat: 1.0.0
 
-  eslint-plugin-tailwindcss@3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))):
+  eslint-plugin-react@7.37.5(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
-      fast-glob: 3.3.2
-      postcss: 8.4.41
-      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
+      array-includes: 3.1.9
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.3
+      array.prototype.tosorted: 1.1.4
+      doctrine: 2.1.0
+      es-iterator-helpers: 1.2.1
+      eslint: 9.33.0(jiti@2.5.1)
+      estraverse: 5.3.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      minimatch: 3.1.2
+      object.entries: 1.1.9
+      object.fromentries: 2.0.8
+      object.values: 1.2.1
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.5
+      semver: 6.3.1
+      string.prototype.matchall: 4.0.12
+      string.prototype.repeat: 1.0.0
 
-  eslint-plugin-tailwindcss@3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))):
+  eslint-plugin-tailwindcss@3.13.1(tailwindcss@3.4.6(ts-node@10.9.2(@types/node@20.19.10)(typescript@5.9.2))):
     dependencies:
-      fast-glob: 3.3.2
-      postcss: 8.4.41
-      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
+      fast-glob: 3.3.3
+      postcss: 8.5.6
+      tailwindcss: 3.4.6(ts-node@10.9.2(@types/node@20.19.10)(typescript@5.9.2))
 
-  eslint-plugin-turbo@1.9.9(eslint@8.44.0):
+  eslint-plugin-turbo@1.13.4(eslint@8.57.1):
     dependencies:
-      eslint: 8.44.0
+      dotenv: 16.0.3
+      eslint: 8.57.1
 
   eslint-scope@7.2.2:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
   eslint-visitor-keys@3.4.3: {}
 
-  eslint@8.44.0:
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint@8.57.1:
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
-      '@eslint-community/regexpp': 4.10.1
+      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.1)
+      '@eslint-community/regexpp': 4.12.1
       '@eslint/eslintrc': 2.1.4
-      '@eslint/js': 8.44.0
-      '@humanwhocodes/config-array': 0.11.14
+      '@eslint/js': 8.57.1
+      '@humanwhocodes/config-array': 0.13.0
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
+      '@ungap/structured-clone': 1.3.0
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.5
+      cross-spawn: 7.0.6
+      debug: 4.4.1
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 6.0.1
@@ -11164,8 +14284,7 @@ snapshots:
       glob-parent: 6.0.2
       globals: 13.24.0
       graphemer: 1.4.0
-      ignore: 5.3.1
-      import-fresh: 3.3.0
+      ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
@@ -11177,20 +14296,67 @@ snapshots:
       natural-compare: 1.4.0
       optionator: 0.9.4
       strip-ansi: 6.0.1
-      strip-json-comments: 3.1.1
       text-table: 0.2.0
     transitivePeerDependencies:
       - supports-color
 
+  eslint@9.33.0(jiti@2.5.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.33.0(jiti@2.5.1))
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.21.0
+      '@eslint/config-helpers': 0.3.1
+      '@eslint/core': 0.15.2
+      '@eslint/eslintrc': 3.3.1
+      '@eslint/js': 9.33.0
+      '@eslint/plugin-kit': 0.3.5
+      '@humanfs/node': 0.16.6
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.1
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.5.1
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 4.2.1
+
   espree@9.6.1:
     dependencies:
-      acorn: 8.11.3
-      acorn-jsx: 5.3.2(acorn@8.11.3)
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
       eslint-visitor-keys: 3.4.3
 
   esprima@4.0.1: {}
 
-  esquery@1.5.0:
+  esquery@1.6.0:
     dependencies:
       estraverse: 5.3.0
 
@@ -11202,7 +14368,7 @@ snapshots:
 
   estree-util-attach-comments@3.0.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
 
   estree-util-build-jsx@3.0.1:
     dependencies:
@@ -11213,32 +14379,55 @@ snapshots:
 
   estree-util-is-identifier-name@3.0.0: {}
 
+  estree-util-scope@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+
   estree-util-to-js@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      astring: 1.8.6
-      source-map: 0.7.4
+      astring: 1.9.0
+      source-map: 0.7.6
 
-  estree-util-value-to-estree@3.1.2:
+  estree-util-value-to-estree@3.4.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
 
   estree-util-visit@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
 
   esutils@2.0.3: {}
 
+  etag@1.8.1: {}
+
+  event-stream@3.3.4:
+    dependencies:
+      duplexer: 0.1.2
+      from: 0.1.7
+      map-stream: 0.1.0
+      pause-stream: 0.0.11
+      split: 0.3.3
+      stream-combiner: 0.0.4
+      through: 2.3.8
+
   eventemitter3@4.0.7: {}
 
+  eventsource-parser@3.0.3: {}
+
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.0.3
+
   execa@4.1.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 5.2.0
       human-signals: 1.1.1
       is-stream: 2.0.1
@@ -11250,7 +14439,7 @@ snapshots:
 
   execa@5.1.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 2.1.0
       is-stream: 2.0.1
@@ -11260,9 +14449,9 @@ snapshots:
       signal-exit: 3.0.7
       strip-final-newline: 2.0.0
 
-  execa@7.0.0:
+  execa@7.2.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 4.3.1
       is-stream: 3.0.0
@@ -11272,20 +14461,61 @@ snapshots:
       signal-exit: 3.0.7
       strip-final-newline: 3.0.0
 
-  execa@8.0.1:
+  execa@9.6.0:
     dependencies:
-      cross-spawn: 7.0.3
-      get-stream: 8.0.1
-      human-signals: 5.0.0
-      is-stream: 3.0.0
-      merge-stream: 2.0.0
-      npm-run-path: 5.3.0
-      onetime: 6.0.0
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.2.0
       signal-exit: 4.1.0
-      strip-final-newline: 3.0.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.1
 
   expand-template@2.0.3: {}
 
+  expect-type@1.2.2: {}
+
+  express-rate-limit@7.5.1(express@5.1.0):
+    dependencies:
+      express: 5.1.0
+
+  express@5.1.0:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.0
+      content-disposition: 1.0.0
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.1
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.0
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.1
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.14.0
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.0
+      serve-static: 2.2.0
+      statuses: 2.0.2
+      type-is: 2.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   extend-shallow@2.0.1:
     dependencies:
       is-extendable: 0.1.1
@@ -11300,30 +14530,60 @@ snapshots:
       iconv-lite: 0.4.24
       tmp: 0.0.33
 
+  extract-zip@2.0.1:
+    dependencies:
+      debug: 4.4.1
+      get-stream: 5.2.0
+      yauzl: 2.10.0
+    optionalDependencies:
+      '@types/yauzl': 2.10.3
+    transitivePeerDependencies:
+      - supports-color
+
   fast-deep-equal@3.1.3: {}
 
-  fast-equals@5.0.1: {}
+  fast-equals@5.2.2: {}
+
+  fast-fifo@1.3.2: {}
+
+  fast-glob@3.3.1:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
 
-  fast-glob@3.3.2:
+  fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       '@nodelib/fs.walk': 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
-      micromatch: 4.0.7
+      micromatch: 4.0.8
 
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
 
-  fastq@1.17.1:
+  fast-uri@3.0.6: {}
+
+  fastq@1.19.1:
     dependencies:
-      reusify: 1.0.4
+      reusify: 1.1.0
 
   fault@2.0.1:
     dependencies:
       format: 0.2.2
 
+  fd-slicer@1.1.0:
+    dependencies:
+      pend: 1.2.0
+
+  fdir@6.4.6(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
   fetch-blob@3.2.0:
     dependencies:
       node-domexception: 1.0.0
@@ -11331,14 +14591,33 @@ snapshots:
 
   fflate@0.7.4: {}
 
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
 
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
+  finalhandler@2.1.0:
+    dependencies:
+      debug: 4.4.1
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   find-up@4.1.0:
     dependencies:
       locate-path: 5.0.0
@@ -11349,52 +14628,83 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  find-yarn-workspace-root2@1.2.16:
+  fix-dts-default-cjs-exports@1.0.1:
     dependencies:
-      micromatch: 4.0.7
-      pkg-dir: 4.2.0
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      rollup: 4.46.2
 
   flat-cache@3.2.0:
     dependencies:
-      flatted: 3.3.1
+      flatted: 3.3.3
       keyv: 4.5.4
       rimraf: 3.0.2
 
-  flatted@3.3.1: {}
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+
+  flatted@3.3.3: {}
 
-  for-each@0.3.3:
+  follow-redirects@1.15.11(debug@4.4.1):
+    optionalDependencies:
+      debug: 4.4.1
+
+  for-each@0.3.5:
     dependencies:
       is-callable: 1.2.7
 
-  foreground-child@3.1.1:
+  foreground-child@3.3.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  form-data@4.0.4:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
   format@0.2.2: {}
 
   formdata-polyfill@4.0.10:
     dependencies:
       fetch-blob: 3.2.0
 
+  forwarded@0.2.0: {}
+
   fraction.js@4.3.7: {}
 
-  framer-motion@11.0.24(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  framer-motion@11.18.2(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      tslib: 2.6.2
+      motion-dom: 11.18.1
+      motion-utils: 11.18.1
+      tslib: 2.8.1
     optionalDependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
-  fs-constants@1.0.0: {}
+      '@emotion/is-prop-valid': 1.3.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  fs-extra@11.1.0:
+  framer-motion@12.23.12(@emotion/is-prop-valid@1.3.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.1.0
-      universalify: 2.0.1
+      motion-dom: 12.23.12
+      motion-utils: 12.23.6
+      tslib: 2.8.1
+    optionalDependencies:
+      '@emotion/is-prop-valid': 1.3.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  fresh@2.0.0: {}
+
+  from@0.1.7: {}
+
+  fs-constants@1.0.0: {}
 
-  fs-extra@11.2.0:
+  fs-extra@11.3.1:
     dependencies:
       graceful-fs: 4.2.11
       jsonfile: 6.1.0
@@ -11417,61 +14727,175 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
+  fumadocs-core@15.3.1(@types/react@19.1.2)(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@formatjs/intl-localematcher': 0.6.1
+      '@orama/orama': 3.1.11
+      '@shikijs/rehype': 3.9.2
+      '@shikijs/transformers': 3.9.2
+      github-slugger: 2.0.0
+      hast-util-to-estree: 3.1.3
+      hast-util-to-jsx-runtime: 2.3.6
+      image-size: 2.0.2
+      negotiator: 1.0.0
+      react-remove-scroll: 2.7.1(@types/react@19.1.2)(react@19.1.0)
+      remark: 15.0.1
+      remark-gfm: 4.0.1
+      scroll-into-view-if-needed: 3.1.0
+      shiki: 3.9.2
+      unist-util-visit: 5.0.0
+    optionalDependencies:
+      next: 15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+
+  fumadocs-docgen@2.0.0:
+    dependencies:
+      estree-util-to-js: 2.0.0
+      estree-util-value-to-estree: 3.4.0
+      npm-to-yarn: 3.0.1
+      oxc-transform: 0.53.0
+      unist-util-visit: 5.0.0
+      zod: 3.25.76
+
+  fumadocs-mdx@11.6.3(acorn@8.15.0)(fumadocs-core@15.3.1(@types/react@19.1.2)(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)):
+    dependencies:
+      '@mdx-js/mdx': 3.1.0(acorn@8.15.0)
+      '@standard-schema/spec': 1.0.0
+      chokidar: 4.0.3
+      cross-spawn: 7.0.6
+      esbuild: 0.25.8
+      estree-util-value-to-estree: 3.4.0
+      fast-glob: 3.3.3
+      fumadocs-core: 15.3.1(@types/react@19.1.2)(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      gray-matter: 4.0.3
+      js-yaml: 4.1.0
+      lru-cache: 11.1.0
+      next: 15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      picocolors: 1.1.1
+      unist-util-visit: 5.0.0
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - acorn
+      - supports-color
+
+  fumadocs-ui@15.3.1(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.11):
+    dependencies:
+      '@radix-ui/react-accordion': 1.2.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-collapsible': 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-navigation-menu': 1.2.13(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-popover': 1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-scroll-area': 1.2.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-tabs': 1.1.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      class-variance-authority: 0.7.1
+      fumadocs-core: 15.3.1(@types/react@19.1.2)(next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      lodash.merge: 4.6.2
+      next: 15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      next-themes: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      postcss-selector-parser: 7.1.0
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-medium-image-zoom: 5.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react-remove-scroll: 2.7.1(@types/react@19.1.2)(react@19.1.0)
+      tailwind-merge: 3.3.1
+    optionalDependencies:
+      tailwindcss: 4.1.11
+    transitivePeerDependencies:
+      - '@oramacloud/client'
+      - '@types/react'
+      - '@types/react-dom'
+      - algoliasearch
+      - supports-color
+
   function-bind@1.1.2: {}
 
-  function.prototype.name@1.1.6:
+  function.prototype.name@1.1.8:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.3
       functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
 
   functions-have-names@1.2.3: {}
 
-  geist@1.2.2(next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)):
+  fuzzysort@3.1.0: {}
+
+  fzf@0.5.2: {}
+
+  geist@1.4.2(next@14.3.0-canary.43(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
-      next: 14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      next: 14.3.0-canary.43(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
 
-  get-func-name@2.0.2: {}
+  get-east-asian-width@1.3.0: {}
 
-  get-intrinsic@1.2.4:
+  get-intrinsic@1.3.0:
     dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
       es-errors: 1.3.0
+      es-object-atoms: 1.1.1
       function-bind: 1.1.2
-      has-proto: 1.0.3
-      has-symbols: 1.0.3
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
       hasown: 2.0.2
+      math-intrinsics: 1.1.0
 
   get-nonce@1.0.1: {}
 
   get-own-enumerable-keys@1.0.0: {}
 
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
   get-stream@4.1.0:
     dependencies:
-      pump: 3.0.0
+      pump: 3.0.3
 
   get-stream@5.2.0:
     dependencies:
-      pump: 3.0.0
+      pump: 3.0.3
 
   get-stream@6.0.1: {}
 
-  get-stream@8.0.1: {}
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
 
-  get-symbol-description@1.0.2:
+  get-symbol-description@1.1.0:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      get-intrinsic: 1.2.4
+      get-intrinsic: 1.3.0
 
-  get-tsconfig@4.7.5:
+  get-tsconfig@4.10.1:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
+  get-uri@6.0.5:
+    dependencies:
+      basic-ftp: 5.0.5
+      data-uri-to-buffer: 6.0.2
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
+
   git-raw-commits@2.0.11:
     dependencies:
       dargs: 7.0.0
@@ -11492,21 +14916,22 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob@10.4.1:
+  glob@10.4.5:
     dependencies:
-      foreground-child: 3.1.1
-      jackspeak: 3.1.2
-      minimatch: 9.0.4
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
       minipass: 7.1.2
+      package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
 
-  glob@11.0.0:
+  glob@11.0.3:
     dependencies:
-      foreground-child: 3.1.1
-      jackspeak: 4.0.1
-      minimatch: 10.0.1
+      foreground-child: 3.3.1
+      jackspeak: 4.1.1
+      minimatch: 10.0.3
       minipass: 7.1.2
-      package-json-from-dist: 1.0.0
+      package-json-from-dist: 1.0.1
       path-scurry: 2.0.0
 
   glob@7.1.7:
@@ -11527,35 +14952,40 @@ snapshots:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
+  glob@9.3.5:
+    dependencies:
+      fs.realpath: 1.0.0
+      minimatch: 8.0.4
+      minipass: 4.2.8
+      path-scurry: 1.11.1
+
   global-dirs@0.1.1:
     dependencies:
       ini: 1.3.8
 
-  globals@11.12.0: {}
-
   globals@13.24.0:
     dependencies:
       type-fest: 0.20.2
 
+  globals@14.0.0: {}
+
   globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1
-      gopd: 1.0.1
+      gopd: 1.2.0
 
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.2
-      ignore: 5.3.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
       merge2: 1.4.1
       slash: 3.0.0
 
   globrex@0.1.2: {}
 
-  gopd@1.0.1:
-    dependencies:
-      get-intrinsic: 1.2.4
+  gopd@1.2.0: {}
 
   got@9.6.0:
     dependencies:
@@ -11575,10 +15005,10 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
-  grapheme-splitter@1.0.4: {}
-
   graphemer@1.4.0: {}
 
+  graphql@16.11.0: {}
+
   gray-matter@4.0.3:
     dependencies:
       js-yaml: 3.14.1
@@ -11588,7 +15018,7 @@ snapshots:
 
   hard-rejection@2.1.0: {}
 
-  has-bigints@1.0.2: {}
+  has-bigints@1.1.0: {}
 
   has-flag@3.0.0: {}
 
@@ -11598,47 +15028,58 @@ snapshots:
 
   has-property-descriptors@1.0.2:
     dependencies:
-      es-define-property: 1.0.0
+      es-define-property: 1.0.1
 
-  has-proto@1.0.3: {}
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
 
-  has-symbols@1.0.3: {}
+  has-symbols@1.1.0: {}
 
   has-tostringtag@1.0.2:
     dependencies:
-      has-symbols: 1.0.3
+      has-symbols: 1.1.0
 
   hash-obj@4.0.0:
     dependencies:
       is-obj: 3.0.0
-      sort-keys: 5.0.0
+      sort-keys: 5.1.0
       type-fest: 1.4.0
 
-  hash-wasm@4.11.0: {}
+  hash-wasm@4.12.0: {}
 
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.3
+      parse5: 7.3.0
+      vfile: 6.0.3
+      vfile-message: 4.0.3
+
   hast-util-from-parse5@7.1.2:
     dependencies:
       '@types/hast': 2.3.10
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       hastscript: 7.2.0
       property-information: 6.5.0
       vfile: 5.3.7
       vfile-location: 4.1.0
       web-namespaces: 2.0.1
 
-  hast-util-from-parse5@8.0.1:
+  hast-util-from-parse5@8.0.3:
     dependencies:
       '@types/hast': 3.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       devlop: 1.1.0
-      hastscript: 8.0.0
-      property-information: 6.5.0
-      vfile: 6.0.1
-      vfile-location: 5.0.2
+      hastscript: 9.0.1
+      property-information: 7.1.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
       web-namespaces: 2.0.1
 
   hast-util-has-property@2.0.1: {}
@@ -11650,7 +15091,7 @@ snapshots:
   hast-util-is-element@2.1.3:
     dependencies:
       '@types/hast': 2.3.10
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   hast-util-parse-selector@3.1.1:
     dependencies:
@@ -11674,25 +15115,9 @@ snapshots:
       web-namespaces: 2.0.1
       zwitch: 2.0.4
 
-  hast-util-raw@9.0.4:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.2
-      '@ungap/structured-clone': 1.2.0
-      hast-util-from-parse5: 8.0.1
-      hast-util-to-parse5: 8.0.0
-      html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.2.0
-      parse5: 7.1.2
-      unist-util-position: 5.0.0
-      unist-util-visit: 5.0.0
-      vfile: 6.0.1
-      web-namespaces: 2.0.1
-      zwitch: 2.0.4
-
-  hast-util-to-estree@3.1.0:
+  hast-util-to-estree@3.1.3:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
       comma-separated-tokens: 2.0.3
@@ -11700,12 +15125,12 @@ snapshots:
       estree-util-attach-comments: 3.0.0
       estree-util-is-identifier-name: 3.0.0
       hast-util-whitespace: 3.0.0
-      mdast-util-mdx-expression: 2.0.0
-      mdast-util-mdx-jsx: 3.1.2
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
       mdast-util-mdxjs-esm: 2.0.1
-      property-information: 6.5.0
+      property-information: 7.1.0
       space-separated-tokens: 2.0.2
-      style-to-object: 0.4.4
+      style-to-js: 1.1.17
       unist-util-position: 5.0.0
       zwitch: 2.0.4
     transitivePeerDependencies:
@@ -11714,7 +15139,7 @@ snapshots:
   hast-util-to-html@8.0.4:
     dependencies:
       '@types/hast': 2.3.10
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       ccount: 2.0.1
       comma-separated-tokens: 2.0.3
       hast-util-raw: 7.2.3
@@ -11725,38 +15150,37 @@ snapshots:
       stringify-entities: 4.0.4
       zwitch: 2.0.4
 
-  hast-util-to-html@9.0.1:
+  hast-util-to-html@9.0.5:
     dependencies:
       '@types/hast': 3.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       ccount: 2.0.1
       comma-separated-tokens: 2.0.3
-      hast-util-raw: 9.0.4
       hast-util-whitespace: 3.0.0
       html-void-elements: 3.0.0
       mdast-util-to-hast: 13.2.0
-      property-information: 6.5.0
+      property-information: 7.1.0
       space-separated-tokens: 2.0.2
       stringify-entities: 4.0.4
       zwitch: 2.0.4
 
-  hast-util-to-jsx-runtime@2.3.0:
+  hast-util-to-jsx-runtime@2.3.6:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
       '@types/hast': 3.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       comma-separated-tokens: 2.0.3
       devlop: 1.1.0
       estree-util-is-identifier-name: 3.0.0
       hast-util-whitespace: 3.0.0
-      mdast-util-mdx-expression: 2.0.0
-      mdast-util-mdx-jsx: 3.1.2
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
       mdast-util-mdxjs-esm: 2.0.1
-      property-information: 6.5.0
+      property-information: 7.1.0
       space-separated-tokens: 2.0.2
-      style-to-object: 1.0.6
+      style-to-js: 1.1.17
       unist-util-position: 5.0.0
-      vfile-message: 4.0.2
+      vfile-message: 4.0.3
     transitivePeerDependencies:
       - supports-color
 
@@ -11769,20 +15193,14 @@ snapshots:
       web-namespaces: 2.0.1
       zwitch: 2.0.4
 
-  hast-util-to-parse5@8.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      comma-separated-tokens: 2.0.3
-      devlop: 1.1.0
-      property-information: 6.5.0
-      space-separated-tokens: 2.0.2
-      web-namespaces: 2.0.1
-      zwitch: 2.0.4
-
   hast-util-to-string@2.0.0:
     dependencies:
       '@types/hast': 2.3.10
 
+  hast-util-to-string@3.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+
   hast-util-whitespace@2.0.1: {}
 
   hast-util-whitespace@3.0.0:
@@ -11797,14 +15215,16 @@ snapshots:
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
 
-  hastscript@8.0.0:
+  hastscript@9.0.1:
     dependencies:
       '@types/hast': 3.0.4
       comma-separated-tokens: 2.0.3
       hast-util-parse-selector: 4.0.0
-      property-information: 6.5.0
+      property-information: 7.1.0
       space-separated-tokens: 2.0.2
 
+  headers-polyfill@4.0.3: {}
+
   hosted-git-info@2.8.9: {}
 
   hosted-git-info@4.1.0:
@@ -11815,16 +15235,31 @@ snapshots:
 
   html-void-elements@3.0.0: {}
 
-  http-cache-semantics@4.1.1: {}
+  http-cache-semantics@4.2.0: {}
+
+  http-errors@2.0.0:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      toidentifier: 1.0.1
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
 
-  https-proxy-agent@6.2.0:
+  https-proxy-agent@7.0.6:
     dependencies:
-      agent-base: 7.1.1
-      debug: 4.3.5
+      agent-base: 7.1.4
+      debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
 
-  human-id@1.0.2: {}
+  human-id@4.1.1: {}
 
   human-signals@1.1.1: {}
 
@@ -11832,7 +15267,7 @@ snapshots:
 
   human-signals@4.3.1: {}
 
-  human-signals@5.0.0: {}
+  human-signals@8.0.1: {}
 
   hyperdyperid@1.2.0: {}
 
@@ -11840,13 +15275,21 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
   ieee754@1.2.1: {}
 
-  ignore@5.3.1: {}
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  image-size@2.0.2: {}
 
-  imagescript@1.3.0: {}
+  imagescript@1.3.1: {}
 
-  import-fresh@3.3.0:
+  import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
@@ -11855,7 +15298,7 @@ snapshots:
 
   indent-string@4.0.0: {}
 
-  inflection@3.0.0: {}
+  inflection@3.0.2: {}
 
   inflight@1.0.6:
     dependencies:
@@ -11866,26 +15309,32 @@ snapshots:
 
   ini@1.3.8: {}
 
-  inline-style-parser@0.1.1: {}
+  inline-style-parser@0.2.4: {}
 
-  inline-style-parser@0.2.3: {}
+  input-otp@1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  input-otp@1.2.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  input-otp@1.4.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
 
-  internal-slot@1.0.7:
+  internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
-      side-channel: 1.0.6
+      side-channel: 1.1.0
 
   internmap@2.0.3: {}
 
-  invariant@2.2.4:
+  ip-address@9.0.5:
     dependencies:
-      loose-envify: 1.4.0
+      jsbn: 1.1.0
+      sprintf-js: 1.1.3
+
+  ipaddr.js@1.9.1: {}
 
   is-alphabetical@2.0.1: {}
 
@@ -11894,55 +15343,58 @@ snapshots:
       is-alphabetical: 2.0.1
       is-decimal: 2.0.1
 
-  is-arguments@1.1.1:
-    dependencies:
-      call-bind: 1.0.7
-      has-tostringtag: 1.0.2
-
-  is-array-buffer@3.0.4:
+  is-array-buffer@3.0.5:
     dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
 
   is-arrayish@0.2.1: {}
 
   is-arrayish@0.3.2: {}
 
-  is-async-function@2.0.0:
+  is-async-function@2.1.1:
     dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
       has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
 
-  is-bigint@1.0.4:
+  is-bigint@1.1.0:
     dependencies:
-      has-bigints: 1.0.2
+      has-bigints: 1.1.0
 
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
 
-  is-boolean-object@1.1.2:
+  is-boolean-object@1.2.2:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
   is-buffer@2.0.5: {}
 
-  is-callable@1.2.7: {}
-
-  is-ci@3.0.1:
+  is-bun-module@2.0.0:
     dependencies:
-      ci-info: 3.9.0
+      semver: 7.7.2
+
+  is-callable@1.2.7: {}
 
-  is-core-module@2.13.1:
+  is-core-module@2.16.1:
     dependencies:
       hasown: 2.0.2
 
-  is-data-view@1.0.1:
+  is-data-view@1.0.2:
     dependencies:
-      is-typed-array: 1.1.13
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
 
-  is-date-object@1.0.5:
+  is-date-object@1.1.0:
     dependencies:
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
   is-decimal@2.0.1: {}
@@ -11951,15 +15403,18 @@ snapshots:
 
   is-extglob@2.1.1: {}
 
-  is-finalizationregistry@1.0.2:
+  is-finalizationregistry@1.1.1:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
 
   is-fullwidth-code-point@3.0.0: {}
 
-  is-generator-function@1.0.10:
+  is-generator-function@1.1.0:
     dependencies:
+      call-bound: 1.0.4
+      get-proto: 1.0.1
       has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
 
   is-glob@4.0.3:
     dependencies:
@@ -11969,17 +15424,15 @@ snapshots:
 
   is-interactive@2.0.0: {}
 
-  is-map@2.0.3: {}
-
-  is-nan@1.3.2:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-
+  is-map@2.0.3: {}
+
   is-negative-zero@2.0.3: {}
 
-  is-number-object@1.0.7:
+  is-node-process@1.2.0: {}
+
+  is-number-object@1.1.1:
     dependencies:
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
   is-number@7.0.0: {}
@@ -11994,59 +15447,66 @@ snapshots:
 
   is-plain-obj@4.1.0: {}
 
-  is-reference@3.0.2:
-    dependencies:
-      '@types/estree': 1.0.5
+  is-promise@4.0.0: {}
 
-  is-regex@1.1.4:
+  is-regex@1.2.1:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
+      gopd: 1.2.0
       has-tostringtag: 1.0.2
+      hasown: 2.0.2
 
   is-regexp@3.1.0: {}
 
   is-set@2.0.3: {}
 
-  is-shared-array-buffer@1.0.3:
+  is-shared-array-buffer@1.0.4:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
 
   is-stream@2.0.1: {}
 
   is-stream@3.0.0: {}
 
-  is-string@1.0.7:
+  is-stream@4.0.1: {}
+
+  is-string@1.1.1:
     dependencies:
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
   is-subdir@1.2.0:
     dependencies:
       better-path-resolve: 1.0.0
 
-  is-symbol@1.0.4:
+  is-symbol@1.1.1:
     dependencies:
-      has-symbols: 1.0.3
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
 
   is-text-path@1.0.1:
     dependencies:
       text-extensions: 1.9.0
 
-  is-typed-array@1.1.13:
+  is-typed-array@1.1.15:
     dependencies:
-      which-typed-array: 1.1.15
+      which-typed-array: 1.1.19
 
   is-unicode-supported@1.3.0: {}
 
+  is-unicode-supported@2.1.0: {}
+
   is-weakmap@2.0.2: {}
 
-  is-weakref@1.0.2:
+  is-weakref@1.1.1:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
 
-  is-weakset@2.0.3:
+  is-weakset@2.0.4:
     dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
 
   is-windows@1.0.2: {}
 
@@ -12054,35 +15514,56 @@ snapshots:
 
   isexe@2.0.0: {}
 
-  iterator.prototype@1.1.2:
+  isexe@3.1.1: {}
+
+  iterator.prototype@1.1.5:
     dependencies:
-      define-properties: 1.2.1
-      get-intrinsic: 1.2.4
-      has-symbols: 1.0.3
-      reflect.getprototypeof: 1.0.6
+      define-data-property: 1.1.4
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      has-symbols: 1.1.0
       set-function-name: 2.0.2
 
-  jackspeak@3.1.2:
+  jackspeak@3.4.3:
     dependencies:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jackspeak@4.0.1:
+  jackspeak@4.1.1:
     dependencies:
       '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
 
   javascript-natural-sort@0.7.1: {}
 
-  jiti@1.21.0: {}
+  jiti@1.21.7: {}
+
+  jiti@2.5.1: {}
 
   jju@1.4.0: {}
 
-  jotai@2.1.0(react@18.2.0):
+  joi@17.13.3:
+    dependencies:
+      '@hapi/hoek': 9.3.0
+      '@hapi/topo': 5.1.0
+      '@sideway/address': 4.1.5
+      '@sideway/formula': 3.0.1
+      '@sideway/pinpoint': 2.0.0
+
+  jotai@2.13.1(@babel/core@7.28.0)(@babel/template@7.27.2)(@types/react@18.3.23)(react@18.3.1):
+    optionalDependencies:
+      '@babel/core': 7.28.0
+      '@babel/template': 7.27.2
+      '@types/react': 18.3.23
+      react: 18.3.1
+
+  jotai@2.13.1(@babel/core@7.28.0)(@babel/template@7.27.2)(@types/react@19.1.2)(react@19.1.0):
     optionalDependencies:
-      react: 18.2.0
+      '@babel/core': 7.28.0
+      '@babel/template': 7.27.2
+      '@types/react': 19.1.2
+      react: 19.1.0
 
   joycon@3.1.1: {}
 
@@ -12097,9 +15578,11 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsbi@4.3.0: {}
+  jsbi@4.3.2: {}
+
+  jsbn@1.1.0: {}
 
-  jsesc@2.5.2: {}
+  jsesc@3.1.0: {}
 
   json-buffer@3.0.0: {}
 
@@ -12133,10 +15616,10 @@ snapshots:
 
   jsx-ast-utils@3.3.5:
     dependencies:
-      array-includes: 3.1.8
-      array.prototype.flat: 1.3.2
-      object.assign: 4.1.5
-      object.values: 1.2.0
+      array-includes: 3.1.9
+      array.prototype.flat: 1.3.3
+      object.assign: 4.1.7
+      object.values: 1.2.1
 
   keyv@3.1.0:
     dependencies:
@@ -12158,25 +15641,69 @@ snapshots:
     dependencies:
       language-subtag-registry: 0.3.23
 
+  lazy-ass@1.6.0: {}
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+
   lilconfig@2.1.0: {}
 
-  lilconfig@3.1.1: {}
+  lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
 
-  load-tsconfig@0.2.5: {}
-
-  load-yaml-file@0.2.0:
+  little-date@1.0.0:
     dependencies:
-      graceful-fs: 4.2.11
-      js-yaml: 3.14.1
-      pify: 4.0.1
-      strip-bom: 3.0.0
+      date-fns: 2.30.0
+
+  load-tsconfig@0.2.5: {}
 
   locate-path@5.0.0:
     dependencies:
@@ -12186,8 +15713,6 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
-  lodash._reinterpolate@3.0.0: {}
-
   lodash.camelcase@4.3.0: {}
 
   lodash.clone@4.5.0: {}
@@ -12210,27 +15735,18 @@ snapshots:
 
   lodash.startcase@4.4.0: {}
 
-  lodash.template@4.5.0:
-    dependencies:
-      lodash._reinterpolate: 3.0.0
-      lodash.templatesettings: 4.2.0
-
-  lodash.templatesettings@4.2.0:
-    dependencies:
-      lodash._reinterpolate: 3.0.0
-
   lodash.uniq@4.5.0: {}
 
   lodash.upperfirst@4.3.1: {}
 
   lodash@4.17.21: {}
 
-  log-symbols@5.1.0:
+  log-symbols@6.0.0:
     dependencies:
-      chalk: 5.2.0
+      chalk: 5.5.0
       is-unicode-supported: 1.3.0
 
-  long@5.2.3: {}
+  long@5.3.2: {}
 
   longest-streak@3.1.0: {}
 
@@ -12238,21 +15754,19 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
-  loupe@3.1.1:
-    dependencies:
-      get-func-name: 2.0.2
+  loupe@3.2.0: {}
 
   lower-case@2.0.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   lowercase-keys@1.0.1: {}
 
   lowercase-keys@2.0.0: {}
 
-  lru-cache@10.2.2: {}
+  lru-cache@10.4.3: {}
 
-  lru-cache@11.0.0: {}
+  lru-cache@11.1.0: {}
 
   lru-cache@4.1.5:
     dependencies:
@@ -12267,17 +15781,19 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
-  lucide-react@0.288.0(react@18.2.0):
+  lru-cache@7.18.3: {}
+
+  lucide-react@0.474.0(react@19.1.0):
     dependencies:
-      react: 18.2.0
+      react: 19.1.0
 
-  lucide-react@0.359.0(react@18.2.0):
+  lucide-react@0.477.0(react@18.3.1):
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
 
-  magic-string@0.30.10:
+  magic-string@0.30.17:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.4
 
   make-error@1.3.6: {}
 
@@ -12285,13 +15801,17 @@ snapshots:
 
   map-obj@4.3.0: {}
 
+  map-stream@0.1.0: {}
+
   markdown-extensions@2.0.0: {}
 
-  markdown-table@3.0.3: {}
+  markdown-table@3.0.4: {}
 
   markdown-wasm@1.2.0: {}
 
-  mdast-util-find-and-replace@3.0.1:
+  math-intrinsics@1.1.0: {}
+
+  mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
       escape-string-regexp: 5.0.0
@@ -12301,8 +15821,8 @@ snapshots:
   mdast-util-from-markdown@1.3.1:
     dependencies:
       '@types/mdast': 3.0.15
-      '@types/unist': 2.0.10
-      decode-named-character-reference: 1.0.2
+      '@types/unist': 2.0.11
+      decode-named-character-reference: 1.2.0
       mdast-util-to-string: 3.2.0
       micromark: 3.2.0
       micromark-util-decode-numeric-character-reference: 1.1.0
@@ -12315,19 +15835,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-from-markdown@2.0.1:
+  mdast-util-from-markdown@2.0.2:
     dependencies:
       '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
-      decode-named-character-reference: 1.0.2
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.2.0
       devlop: 1.1.0
       mdast-util-to-string: 4.0.0
-      micromark: 4.0.0
-      micromark-util-decode-numeric-character-reference: 2.0.1
-      micromark-util-decode-string: 2.0.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
       unist-util-stringify-position: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -12337,35 +15857,35 @@ snapshots:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
       escape-string-regexp: 5.0.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
       micromark-extension-frontmatter: 2.0.0
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-gfm-autolink-literal@2.0.0:
+  mdast-util-gfm-autolink-literal@2.0.1:
     dependencies:
       '@types/mdast': 4.0.4
       ccount: 2.0.1
       devlop: 1.1.0
-      mdast-util-find-and-replace: 3.0.1
-      micromark-util-character: 2.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
 
-  mdast-util-gfm-footnote@2.0.0:
+  mdast-util-gfm-footnote@2.1.0:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
-      micromark-util-normalize-identifier: 2.0.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
     transitivePeerDependencies:
       - supports-color
 
   mdast-util-gfm-strikethrough@2.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -12373,9 +15893,9 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      markdown-table: 3.0.3
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -12383,59 +15903,58 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-gfm@3.0.0:
+  mdast-util-gfm@3.1.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-gfm-autolink-literal: 2.0.0
-      mdast-util-gfm-footnote: 2.0.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
       mdast-util-gfm-strikethrough: 2.0.0
       mdast-util-gfm-table: 2.0.0
       mdast-util-gfm-task-list-item: 2.0.0
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-mdx-expression@2.0.0:
+  mdast-util-mdx-expression@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-mdx-jsx@3.1.2:
+  mdast-util-mdx-jsx@3.2.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       ccount: 2.0.1
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
-      parse-entities: 4.0.1
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
       stringify-entities: 4.0.4
-      unist-util-remove-position: 5.0.0
       unist-util-stringify-position: 4.0.0
-      vfile-message: 4.0.2
+      vfile-message: 4.0.3
     transitivePeerDependencies:
       - supports-color
 
   mdast-util-mdx@3.0.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-mdx-expression: 2.0.0
-      mdast-util-mdx-jsx: 3.1.2
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
       mdast-util-mdxjs-esm: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -12445,8 +15964,8 @@ snapshots:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -12464,18 +15983,18 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
-      '@ungap/structured-clone': 1.2.0
+      '@ungap/structured-clone': 1.3.0
       devlop: 1.1.0
-      micromark-util-sanitize-uri: 2.0.0
+      micromark-util-sanitize-uri: 2.0.1
       trim-lines: 3.0.1
       unist-util-position: 5.0.0
       unist-util-visit: 5.0.0
-      vfile: 6.0.1
+      vfile: 6.0.3
 
   mdast-util-to-markdown@1.5.0:
     dependencies:
       '@types/mdast': 3.0.15
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       longest-streak: 3.1.0
       mdast-util-phrasing: 3.0.1
       mdast-util-to-string: 3.2.0
@@ -12483,14 +16002,15 @@ snapshots:
       unist-util-visit: 4.1.2
       zwitch: 2.0.4
 
-  mdast-util-to-markdown@2.1.0:
+  mdast-util-to-markdown@2.1.2:
     dependencies:
       '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       longest-streak: 3.1.0
       mdast-util-phrasing: 4.1.0
       mdast-util-to-string: 4.0.0
-      micromark-util-decode-string: 2.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
       unist-util-visit: 5.0.0
       zwitch: 2.0.4
 
@@ -12512,41 +16032,30 @@ snapshots:
       unist-util-is: 5.2.1
       unist-util-visit: 4.1.2
 
-  mdx-bundler@10.0.2(esbuild@0.17.19):
+  mdx-bundler@10.1.1(acorn@8.15.0)(esbuild@0.25.8):
     dependencies:
-      '@babel/runtime': 7.24.6
-      '@esbuild-plugins/node-resolve': 0.2.2(esbuild@0.17.19)
+      '@babel/runtime': 7.28.2
+      '@esbuild-plugins/node-resolve': 0.2.2(esbuild@0.25.8)
       '@fal-works/esbuild-plugin-global-externals': 2.1.2
-      '@mdx-js/esbuild': 3.0.1(esbuild@0.17.19)
-      esbuild: 0.17.19
+      '@mdx-js/esbuild': 3.1.0(acorn@8.15.0)(esbuild@0.25.8)
+      esbuild: 0.25.8
       gray-matter: 4.0.3
       remark-frontmatter: 5.0.0
       remark-mdx-frontmatter: 4.0.0
       uuid: 9.0.1
-      vfile: 6.0.1
+      vfile: 6.0.3
     transitivePeerDependencies:
+      - acorn
       - supports-color
 
-  memfs@4.9.3:
-    dependencies:
-      '@jsonjoy.com/json-pack': 1.0.4(tslib@2.6.2)
-      '@jsonjoy.com/util': 1.2.0(tslib@2.6.2)
-      tree-dump: 1.0.2(tslib@2.6.2)
-      tslib: 2.6.2
+  media-typer@1.1.0: {}
 
-  meow@6.1.1:
+  memfs@4.36.0:
     dependencies:
-      '@types/minimist': 1.2.5
-      camelcase-keys: 6.2.2
-      decamelize-keys: 1.1.1
-      hard-rejection: 2.1.0
-      minimist-options: 4.1.0
-      normalize-package-data: 2.5.0
-      read-pkg-up: 7.0.1
-      redent: 3.0.0
-      trim-newlines: 3.0.1
-      type-fest: 0.13.1
-      yargs-parser: 18.1.3
+      '@jsonjoy.com/json-pack': 1.10.0(tslib@2.8.1)
+      '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
+      tree-dump: 1.0.3(tslib@2.8.1)
+      tslib: 2.8.1
 
   meow@8.1.2:
     dependencies:
@@ -12562,13 +16071,15 @@ snapshots:
       type-fest: 0.18.1
       yargs-parser: 20.2.9
 
+  merge-descriptors@2.0.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
 
   micromark-core-commonmark@1.1.0:
     dependencies:
-      decode-named-character-reference: 1.0.2
+      decode-named-character-reference: 1.2.0
       micromark-factory-destination: 1.1.0
       micromark-factory-label: 1.1.0
       micromark-factory-space: 1.1.0
@@ -12585,140 +16096,140 @@ snapshots:
       micromark-util-types: 1.1.0
       uvu: 0.5.6
 
-  micromark-core-commonmark@2.0.1:
+  micromark-core-commonmark@2.0.3:
     dependencies:
-      decode-named-character-reference: 1.0.2
+      decode-named-character-reference: 1.2.0
       devlop: 1.1.0
-      micromark-factory-destination: 2.0.0
-      micromark-factory-label: 2.0.0
-      micromark-factory-space: 2.0.0
-      micromark-factory-title: 2.0.0
-      micromark-factory-whitespace: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-classify-character: 2.0.0
-      micromark-util-html-tag-name: 2.0.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-resolve-all: 2.0.0
-      micromark-util-subtokenize: 2.0.1
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-extension-frontmatter@2.0.0:
     dependencies:
       fault: 2.0.1
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-extension-gfm-autolink-literal@2.1.0:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-sanitize-uri: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-extension-gfm-footnote@2.1.0:
     dependencies:
       devlop: 1.1.0
-      micromark-core-commonmark: 2.0.1
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-sanitize-uri: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-extension-gfm-strikethrough@2.1.0:
     dependencies:
       devlop: 1.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-classify-character: 2.0.0
-      micromark-util-resolve-all: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  micromark-extension-gfm-table@2.1.0:
+  micromark-extension-gfm-table@2.1.1:
     dependencies:
       devlop: 1.1.0
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-extension-gfm-tagfilter@2.0.0:
     dependencies:
-      micromark-util-types: 2.0.0
+      micromark-util-types: 2.0.2
 
   micromark-extension-gfm-task-list-item@2.1.0:
     dependencies:
       devlop: 1.1.0
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-extension-gfm@3.0.0:
     dependencies:
       micromark-extension-gfm-autolink-literal: 2.1.0
       micromark-extension-gfm-footnote: 2.1.0
       micromark-extension-gfm-strikethrough: 2.1.0
-      micromark-extension-gfm-table: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
       micromark-extension-gfm-tagfilter: 2.0.0
       micromark-extension-gfm-task-list-item: 2.1.0
-      micromark-util-combine-extensions: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
 
-  micromark-extension-mdx-expression@3.0.0:
+  micromark-extension-mdx-expression@3.0.1:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
       devlop: 1.1.0
-      micromark-factory-mdx-expression: 2.0.1
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-events-to-acorn: 2.0.2
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  micromark-extension-mdx-jsx@3.0.0:
+  micromark-extension-mdx-jsx@3.0.2:
     dependencies:
-      '@types/acorn': 4.0.6
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
       devlop: 1.1.0
       estree-util-is-identifier-name: 3.0.0
-      micromark-factory-mdx-expression: 2.0.1
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
-      vfile-message: 4.0.2
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.3
 
   micromark-extension-mdx-md@2.0.0:
     dependencies:
-      micromark-util-types: 2.0.0
+      micromark-util-types: 2.0.2
 
   micromark-extension-mdxjs-esm@3.0.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
       devlop: 1.1.0
-      micromark-core-commonmark: 2.0.1
-      micromark-util-character: 2.1.0
-      micromark-util-events-to-acorn: 2.0.2
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-core-commonmark: 2.0.3
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
       unist-util-position-from-estree: 2.0.0
-      vfile-message: 4.0.2
+      vfile-message: 4.0.3
 
   micromark-extension-mdxjs@3.0.0:
     dependencies:
-      acorn: 8.11.3
-      acorn-jsx: 5.3.2(acorn@8.11.3)
-      micromark-extension-mdx-expression: 3.0.0
-      micromark-extension-mdx-jsx: 3.0.0
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      micromark-extension-mdx-expression: 3.0.1
+      micromark-extension-mdx-jsx: 3.0.2
       micromark-extension-mdx-md: 2.0.0
       micromark-extension-mdxjs-esm: 3.0.0
-      micromark-util-combine-extensions: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-factory-destination@1.1.0:
     dependencies:
@@ -12726,11 +16237,11 @@ snapshots:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-factory-destination@2.0.0:
+  micromark-factory-destination@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-factory-label@1.1.0:
     dependencies:
@@ -12739,33 +16250,34 @@ snapshots:
       micromark-util-types: 1.1.0
       uvu: 0.5.6
 
-  micromark-factory-label@2.0.0:
+  micromark-factory-label@2.0.1:
     dependencies:
       devlop: 1.1.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  micromark-factory-mdx-expression@2.0.1:
+  micromark-factory-mdx-expression@2.0.3:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
       devlop: 1.1.0
-      micromark-util-character: 2.1.0
-      micromark-util-events-to-acorn: 2.0.2
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
       unist-util-position-from-estree: 2.0.0
-      vfile-message: 4.0.2
+      vfile-message: 4.0.3
 
   micromark-factory-space@1.1.0:
     dependencies:
       micromark-util-character: 1.2.0
       micromark-util-types: 1.1.0
 
-  micromark-factory-space@2.0.0:
+  micromark-factory-space@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
 
   micromark-factory-title@1.1.0:
     dependencies:
@@ -12774,12 +16286,12 @@ snapshots:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-factory-title@2.0.0:
+  micromark-factory-title@2.0.1:
     dependencies:
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-factory-whitespace@1.1.0:
     dependencies:
@@ -12788,30 +16300,30 @@ snapshots:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-factory-whitespace@2.0.0:
+  micromark-factory-whitespace@2.0.1:
     dependencies:
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-util-character@1.2.0:
     dependencies:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-util-character@2.1.0:
+  micromark-util-character@2.1.1:
     dependencies:
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-util-chunked@1.1.0:
     dependencies:
       micromark-util-symbol: 1.1.0
 
-  micromark-util-chunked@2.0.0:
+  micromark-util-chunked@2.0.1:
     dependencies:
-      micromark-util-symbol: 2.0.0
+      micromark-util-symbol: 2.0.1
 
   micromark-util-classify-character@1.1.0:
     dependencies:
@@ -12819,78 +16331,77 @@ snapshots:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-util-classify-character@2.0.0:
+  micromark-util-classify-character@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-util-combine-extensions@1.1.0:
     dependencies:
       micromark-util-chunked: 1.1.0
       micromark-util-types: 1.1.0
 
-  micromark-util-combine-extensions@2.0.0:
+  micromark-util-combine-extensions@2.0.1:
     dependencies:
-      micromark-util-chunked: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-util-decode-numeric-character-reference@1.1.0:
     dependencies:
       micromark-util-symbol: 1.1.0
 
-  micromark-util-decode-numeric-character-reference@2.0.1:
+  micromark-util-decode-numeric-character-reference@2.0.2:
     dependencies:
-      micromark-util-symbol: 2.0.0
+      micromark-util-symbol: 2.0.1
 
   micromark-util-decode-string@1.1.0:
     dependencies:
-      decode-named-character-reference: 1.0.2
+      decode-named-character-reference: 1.2.0
       micromark-util-character: 1.2.0
       micromark-util-decode-numeric-character-reference: 1.1.0
       micromark-util-symbol: 1.1.0
 
-  micromark-util-decode-string@2.0.0:
+  micromark-util-decode-string@2.0.1:
     dependencies:
-      decode-named-character-reference: 1.0.2
-      micromark-util-character: 2.1.0
-      micromark-util-decode-numeric-character-reference: 2.0.1
-      micromark-util-symbol: 2.0.0
+      decode-named-character-reference: 1.2.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
 
   micromark-util-encode@1.1.0: {}
 
-  micromark-util-encode@2.0.0: {}
+  micromark-util-encode@2.0.1: {}
 
-  micromark-util-events-to-acorn@2.0.2:
+  micromark-util-events-to-acorn@2.0.3:
     dependencies:
-      '@types/acorn': 4.0.6
-      '@types/estree': 1.0.5
-      '@types/unist': 3.0.2
+      '@types/estree': 1.0.8
+      '@types/unist': 3.0.3
       devlop: 1.1.0
       estree-util-visit: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
-      vfile-message: 4.0.2
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.3
 
   micromark-util-html-tag-name@1.2.0: {}
 
-  micromark-util-html-tag-name@2.0.0: {}
+  micromark-util-html-tag-name@2.0.1: {}
 
   micromark-util-normalize-identifier@1.1.0:
     dependencies:
       micromark-util-symbol: 1.1.0
 
-  micromark-util-normalize-identifier@2.0.0:
+  micromark-util-normalize-identifier@2.0.1:
     dependencies:
-      micromark-util-symbol: 2.0.0
+      micromark-util-symbol: 2.0.1
 
   micromark-util-resolve-all@1.1.0:
     dependencies:
       micromark-util-types: 1.1.0
 
-  micromark-util-resolve-all@2.0.0:
+  micromark-util-resolve-all@2.0.1:
     dependencies:
-      micromark-util-types: 2.0.0
+      micromark-util-types: 2.0.2
 
   micromark-util-sanitize-uri@1.2.0:
     dependencies:
@@ -12898,11 +16409,11 @@ snapshots:
       micromark-util-encode: 1.1.0
       micromark-util-symbol: 1.1.0
 
-  micromark-util-sanitize-uri@2.0.0:
+  micromark-util-sanitize-uri@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-encode: 2.0.0
-      micromark-util-symbol: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
 
   micromark-util-subtokenize@1.1.0:
     dependencies:
@@ -12911,26 +16422,26 @@ snapshots:
       micromark-util-types: 1.1.0
       uvu: 0.5.6
 
-  micromark-util-subtokenize@2.0.1:
+  micromark-util-subtokenize@2.1.0:
     dependencies:
       devlop: 1.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
   micromark-util-symbol@1.1.0: {}
 
-  micromark-util-symbol@2.0.0: {}
+  micromark-util-symbol@2.0.1: {}
 
   micromark-util-types@1.1.0: {}
 
-  micromark-util-types@2.0.0: {}
+  micromark-util-types@2.0.2: {}
 
   micromark@3.2.0:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.5
-      decode-named-character-reference: 1.0.2
+      debug: 4.4.1
+      decode-named-character-reference: 1.2.0
       micromark-core-commonmark: 1.1.0
       micromark-factory-space: 1.1.0
       micromark-util-character: 1.2.0
@@ -12948,58 +16459,76 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  micromark@4.0.0:
+  micromark@4.0.2:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.5
-      decode-named-character-reference: 1.0.2
+      debug: 4.4.1
+      decode-named-character-reference: 1.2.0
       devlop: 1.1.0
-      micromark-core-commonmark: 2.0.1
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-combine-extensions: 2.0.0
-      micromark-util-decode-numeric-character-reference: 2.0.1
-      micromark-util-encode: 2.0.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-resolve-all: 2.0.0
-      micromark-util-sanitize-uri: 2.0.0
-      micromark-util-subtokenize: 2.0.1
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
     transitivePeerDependencies:
       - supports-color
 
-  micromatch@4.0.7:
+  micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime-db@1.52.0: {}
+
+  mime-db@1.54.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime-types@3.0.1:
+    dependencies:
+      mime-db: 1.54.0
+
   mimic-fn@2.1.0: {}
 
   mimic-fn@4.0.0: {}
 
+  mimic-function@5.0.1: {}
+
   mimic-response@1.0.1: {}
 
   mimic-response@3.1.0: {}
 
   min-indent@1.0.1: {}
 
-  minimatch@10.0.1:
+  minimatch@10.0.3:
     dependencies:
-      brace-expansion: 2.0.1
+      '@isaacs/brace-expansion': 5.0.0
 
   minimatch@3.1.2:
     dependencies:
-      brace-expansion: 1.1.11
+      brace-expansion: 1.1.12
 
   minimatch@7.4.6:
     dependencies:
-      brace-expansion: 2.0.1
+      brace-expansion: 2.0.2
+
+  minimatch@8.0.4:
+    dependencies:
+      brace-expansion: 2.0.2
 
-  minimatch@9.0.4:
+  minimatch@9.0.5:
     dependencies:
-      brace-expansion: 2.0.1
+      brace-expansion: 2.0.2
 
   minimist-options@4.1.0:
     dependencies:
@@ -13009,9 +16538,15 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  minipass@4.2.8: {}
+
   minipass@7.1.2: {}
 
-  mixme@0.5.10: {}
+  minizlib@3.0.2:
+    dependencies:
+      minipass: 7.1.2
+
+  mitt@3.0.1: {}
 
   mkdirp-classic@0.5.3: {}
 
@@ -13019,19 +16554,64 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
-  mri@1.2.0: {}
+  mlly@1.7.4:
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.1
 
-  ms@2.1.2: {}
+  motion-dom@11.18.1:
+    dependencies:
+      motion-utils: 11.18.1
 
-  ms@2.1.3: {}
+  motion-dom@12.23.12:
+    dependencies:
+      motion-utils: 12.23.6
+
+  motion-utils@11.18.1: {}
 
-  multimatch@4.0.0:
+  motion-utils@12.23.6: {}
+
+  motion@12.23.12(@emotion/is-prop-valid@1.3.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      '@types/minimatch': 3.0.5
-      array-differ: 3.0.0
-      array-union: 2.1.0
-      arrify: 2.0.1
-      minimatch: 3.1.2
+      framer-motion: 12.23.12(@emotion/is-prop-valid@1.3.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@emotion/is-prop-valid': 1.3.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  mri@1.2.0: {}
+
+  ms@2.1.3: {}
+
+  msw@2.10.4(@types/node@20.19.10)(typescript@5.9.2):
+    dependencies:
+      '@bundled-es-modules/cookie': 2.0.1
+      '@bundled-es-modules/statuses': 1.0.1
+      '@bundled-es-modules/tough-cookie': 0.1.6
+      '@inquirer/confirm': 5.1.14(@types/node@20.19.10)
+      '@mswjs/interceptors': 0.39.5
+      '@open-draft/deferred-promise': 2.2.0
+      '@open-draft/until': 2.1.0
+      '@types/cookie': 0.6.0
+      '@types/statuses': 2.0.6
+      graphql: 16.11.0
+      headers-polyfill: 4.0.3
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      path-to-regexp: 6.3.0
+      picocolors: 1.1.1
+      strict-event-emitter: 0.5.1
+      type-fest: 4.41.0
+      yargs: 17.7.2
+    optionalDependencies:
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - '@types/node'
+
+  mute-stream@2.0.0: {}
 
   mz@2.7.0:
     dependencies:
@@ -13039,77 +16619,56 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
-  nanoid@3.3.7: {}
+  nanoid@3.3.11: {}
 
   nanoid@4.0.2: {}
 
-  napi-build-utils@1.0.2: {}
+  napi-build-utils@2.0.0: {}
+
+  napi-postinstall@0.3.3: {}
 
   natural-compare@1.4.0: {}
 
-  next-contentlayer2@0.4.6(contentlayer2@0.4.6(esbuild@0.17.19)(markdown-wasm@1.2.0))(esbuild@0.17.19)(markdown-wasm@1.2.0)(next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  negotiator@1.0.0: {}
+
+  netmask@2.0.2: {}
+
+  next-contentlayer2@0.4.6(acorn@8.15.0)(contentlayer2@0.4.6(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0))(esbuild@0.25.8)(markdown-wasm@1.2.0)(next@14.3.0-canary.43(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@contentlayer2/core': 0.4.3(esbuild@0.17.19)(markdown-wasm@1.2.0)
+      '@contentlayer2/core': 0.4.3(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
       '@contentlayer2/utils': 0.4.3
-      contentlayer2: 0.4.6(esbuild@0.17.19)(markdown-wasm@1.2.0)
-      next: 14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      contentlayer2: 0.4.6(acorn@8.15.0)(esbuild@0.25.8)(markdown-wasm@1.2.0)
+      next: 14.3.0-canary.43(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
 
-  next-themes@0.2.1(next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
-    dependencies:
-      next: 14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
-  next-themes@0.2.1(next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next-themes@0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      next: 14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next-themes@0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      '@next/env': 14.1.3
-      '@swc/helpers': 0.5.2
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001627
-      graceful-fs: 4.2.11
-      postcss: 8.4.31
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(@babel/core@7.24.6)(react@18.2.0)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 14.1.3
-      '@next/swc-darwin-x64': 14.1.3
-      '@next/swc-linux-arm64-gnu': 14.1.3
-      '@next/swc-linux-arm64-musl': 14.1.3
-      '@next/swc-linux-x64-gnu': 14.1.3
-      '@next/swc-linux-x64-musl': 14.1.3
-      '@next/swc-win32-arm64-msvc': 14.1.3
-      '@next/swc-win32-ia32-msvc': 14.1.3
-      '@next/swc-win32-x64-msvc': 14.1.3
-      '@opentelemetry/api': 1.8.0
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
 
-  next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next@14.3.0-canary.43(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@next/env': 14.3.0-canary.43
       '@swc/helpers': 0.5.11
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001627
+      caniuse-lite: 1.0.30001734
       graceful-fs: 4.2.11
       postcss: 8.4.31
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(@babel/core@7.22.1)(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      styled-jsx: 5.1.1(@babel/core@7.28.0)(react@18.3.1)
     optionalDependencies:
       '@next/swc-darwin-arm64': 14.3.0-canary.43
       '@next/swc-darwin-x64': 14.3.0-canary.43
@@ -13120,8 +16679,34 @@ snapshots:
       '@next/swc-win32-arm64-msvc': 14.3.0-canary.43
       '@next/swc-win32-ia32-msvc': 14.3.0-canary.43
       '@next/swc-win32-x64-msvc': 14.3.0-canary.43
-      '@opentelemetry/api': 1.8.0
-      sharp: 0.33.4
+      '@opentelemetry/api': 1.9.0
+      sharp: 0.33.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  next@15.3.1(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@next/env': 15.3.1
+      '@swc/counter': 0.1.3
+      '@swc/helpers': 0.5.15
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001734
+      postcss: 8.4.31
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      styled-jsx: 5.1.6(@babel/core@7.28.0)(react@19.1.0)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 15.3.1
+      '@next/swc-darwin-x64': 15.3.1
+      '@next/swc-linux-arm64-gnu': 15.3.1
+      '@next/swc-linux-arm64-musl': 15.3.1
+      '@next/swc-linux-x64-gnu': 15.3.1
+      '@next/swc-linux-x64-musl': 15.3.1
+      '@next/swc-win32-arm64-msvc': 15.3.1
+      '@next/swc-win32-x64-msvc': 15.3.1
+      '@opentelemetry/api': 1.9.0
+      sharp: 0.34.3
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -13129,13 +16714,13 @@ snapshots:
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.6.2
+      tslib: 2.8.1
 
-  node-abi@3.63.0:
+  node-abi@3.75.0:
     dependencies:
-      semver: 7.6.2
+      semver: 7.7.2
 
-  node-addon-api@5.1.0: {}
+  node-addon-api@6.1.0: {}
 
   node-domexception@1.0.0: {}
 
@@ -13143,26 +16728,26 @@ snapshots:
     dependencies:
       whatwg-url: 5.0.0
 
-  node-fetch@3.3.0:
+  node-fetch@3.3.2:
     dependencies:
       data-uri-to-buffer: 4.0.1
       fetch-blob: 3.2.0
       formdata-polyfill: 4.0.10
 
-  node-releases@2.0.14: {}
+  node-releases@2.0.21: {}
 
   normalize-package-data@2.5.0:
     dependencies:
       hosted-git-info: 2.8.9
-      resolve: 1.22.8
+      resolve: 1.22.10
       semver: 5.7.2
       validate-npm-package-license: 3.0.4
 
   normalize-package-data@3.0.3:
     dependencies:
       hosted-git-info: 4.1.0
-      is-core-module: 2.13.1
-      semver: 7.6.2
+      is-core-module: 2.16.1
+      semver: 7.7.2
       validate-npm-package-license: 3.0.4
 
   normalize-path@3.0.0: {}
@@ -13179,56 +16764,62 @@ snapshots:
     dependencies:
       path-key: 4.0.0
 
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
+  npm-to-yarn@3.0.1: {}
+
   object-assign@4.1.1: {}
 
   object-hash@3.0.0: {}
 
-  object-inspect@1.13.1: {}
-
-  object-is@1.1.6:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
+  object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
 
-  object.assign@4.1.5:
+  object-treeify@1.1.33: {}
+
+  object.assign@4.1.7:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      has-symbols: 1.0.3
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  object.entries@1.1.8:
+  object.entries@1.1.9:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
 
   object.fromentries@2.0.8:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
 
   object.groupby@1.0.3:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.24.0
 
-  object.hasown@1.1.4:
+  object.values@1.2.1:
     dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
 
-  object.values@1.2.0:
+  on-finished@2.4.1:
     dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-object-atoms: 1.0.0
+      ee-first: 1.1.1
 
   once@1.4.0:
     dependencies:
@@ -13242,7 +16833,25 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
-  oo-ascii-tree@1.99.0: {}
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  oniguruma-parser@0.12.1: {}
+
+  oniguruma-to-es@2.3.0:
+    dependencies:
+      emoji-regex-xs: 1.0.0
+      regex: 5.1.1
+      regex-recursion: 5.1.1
+
+  oniguruma-to-es@4.3.3:
+    dependencies:
+      oniguruma-parser: 0.12.1
+      regex: 6.0.1
+      regex-recursion: 6.0.2
+
+  oo-ascii-tree@1.113.0: {}
 
   optionator@0.9.4:
     dependencies:
@@ -13253,22 +16862,41 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
-  ora@6.1.2:
+  ora@8.2.0:
     dependencies:
-      bl: 5.1.0
-      chalk: 5.2.0
-      cli-cursor: 4.0.0
+      chalk: 5.5.0
+      cli-cursor: 5.0.0
       cli-spinners: 2.9.2
       is-interactive: 2.0.0
-      is-unicode-supported: 1.3.0
-      log-symbols: 5.1.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 6.0.0
+      stdin-discarder: 0.2.2
+      string-width: 7.2.0
       strip-ansi: 7.1.0
-      wcwidth: 1.0.1
 
   os-tmpdir@1.0.2: {}
 
   outdent@0.5.0: {}
 
+  outvariant@1.4.3: {}
+
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
+  oxc-transform@0.53.0:
+    optionalDependencies:
+      '@oxc-transform/binding-darwin-arm64': 0.53.0
+      '@oxc-transform/binding-darwin-x64': 0.53.0
+      '@oxc-transform/binding-linux-arm64-gnu': 0.53.0
+      '@oxc-transform/binding-linux-arm64-musl': 0.53.0
+      '@oxc-transform/binding-linux-x64-gnu': 0.53.0
+      '@oxc-transform/binding-linux-x64-musl': 0.53.0
+      '@oxc-transform/binding-win32-arm64-msvc': 0.53.0
+      '@oxc-transform/binding-win32-x64-msvc': 0.53.0
+
   p-cancelable@1.1.0: {}
 
   p-filter@2.1.0:
@@ -13295,7 +16923,25 @@ snapshots:
 
   p-try@2.2.0: {}
 
-  package-json-from-dist@1.0.0: {}
+  pac-proxy-agent@7.2.0:
+    dependencies:
+      '@tootallnate/quickjs-emscripten': 0.23.0
+      agent-base: 7.1.4
+      debug: 4.4.1
+      get-uri: 6.0.5
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      pac-resolver: 7.0.1
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  pac-resolver@7.0.1:
+    dependencies:
+      degenerator: 5.0.1
+      netmask: 2.0.2
+
+  package-json-from-dist@1.0.1: {}
 
   package-json@6.5.0:
     dependencies:
@@ -13304,42 +16950,51 @@ snapshots:
       registry-url: 5.1.0
       semver: 6.3.1
 
+  package-manager-detector@0.2.11:
+    dependencies:
+      quansync: 0.2.10
+
+  package-manager-detector@1.3.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
 
-  parse-entities@4.0.1:
+  parse-entities@4.0.2:
     dependencies:
-      '@types/unist': 2.0.10
-      character-entities: 2.0.2
+      '@types/unist': 2.0.11
       character-entities-legacy: 3.0.0
       character-reference-invalid: 2.0.1
-      decode-named-character-reference: 1.0.2
+      decode-named-character-reference: 1.2.0
       is-alphanumerical: 2.0.1
       is-decimal: 2.0.1
       is-hexadecimal: 2.0.1
 
-  parse-github-url@1.0.2: {}
+  parse-github-url@1.0.3: {}
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.24.6
+      '@babel/code-frame': 7.27.1
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
+  parse-ms@4.0.0: {}
+
   parse-numeric-range@1.3.0: {}
 
   parse5@6.0.1: {}
 
-  parse5@7.1.2:
+  parse5@7.3.0:
     dependencies:
-      entities: 4.5.0
+      entities: 6.0.1
+
+  parseurl@1.3.3: {}
 
   pascal-case@3.1.2:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   path-browserify@1.0.1: {}
 
@@ -13355,168 +17010,167 @@ snapshots:
 
   path-scurry@1.11.1:
     dependencies:
-      lru-cache: 10.2.2
+      lru-cache: 10.4.3
       minipass: 7.1.2
 
   path-scurry@2.0.0:
     dependencies:
-      lru-cache: 11.0.0
+      lru-cache: 11.1.0
       minipass: 7.1.2
 
+  path-to-regexp@6.3.0: {}
+
+  path-to-regexp@8.2.0: {}
+
   path-type@4.0.0: {}
 
   pathe@1.1.2: {}
 
-  pathval@2.0.0: {}
+  pathe@2.0.3: {}
 
-  periscopic@3.1.0:
+  pathval@2.0.1: {}
+
+  pause-stream@0.0.11:
     dependencies:
-      '@types/estree': 1.0.5
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
+      through: 2.3.8
+
+  pend@1.2.0: {}
 
-  picocolors@1.0.1: {}
+  picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
 
+  picomatch@3.0.1: {}
+
+  picomatch@4.0.3: {}
+
   pify@2.3.0: {}
 
   pify@4.0.1: {}
 
-  pirates@4.0.6: {}
-
-  pkg-dir@4.2.0:
-    dependencies:
-      find-up: 4.1.0
+  pirates@4.0.7: {}
 
-  possible-typed-array-names@1.0.0: {}
+  pkce-challenge@5.0.0: {}
 
-  postcss-import@15.1.0(postcss@8.4.38):
+  pkg-types@1.3.1:
     dependencies:
-      postcss: 8.4.38
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
+      confbox: 0.1.8
+      mlly: 1.7.4
+      pathe: 2.0.3
+
+  possible-typed-array-names@1.1.0: {}
 
-  postcss-import@15.1.0(postcss@8.4.41):
+  postcss-import@15.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.4.41
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.8
+      resolve: 1.22.10
 
-  postcss-js@4.0.1(postcss@8.4.38):
+  postcss-js@4.0.1(postcss@8.5.6):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.38
+      postcss: 8.5.6
 
-  postcss-js@4.0.1(postcss@8.4.41):
+  postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.9.2)):
     dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.41
-
-  postcss-load-config@3.1.4(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5)):
-    dependencies:
-      lilconfig: 2.1.0
-      yaml: 1.10.2
+      lilconfig: 3.1.3
+      yaml: 2.8.1
     optionalDependencies:
-      postcss: 8.4.41
-      ts-node: 10.9.2(@types/node@20.14.0)(typescript@4.9.5)
+      postcss: 8.5.6
+      ts-node: 10.9.2(@types/node@17.0.45)(typescript@5.9.2)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)):
+  postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@20.19.10)(typescript@5.9.2)):
     dependencies:
-      lilconfig: 3.1.1
-      yaml: 2.4.3
+      lilconfig: 3.1.3
+      yaml: 2.8.1
     optionalDependencies:
-      postcss: 8.4.38
-      ts-node: 10.9.2(@types/node@17.0.45)(typescript@5.5.3)
+      postcss: 8.5.6
+      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.9.2)
 
-  postcss-load-config@4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)):
+  postcss-load-config@6.0.1(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3)(yaml@2.8.1):
     dependencies:
-      lilconfig: 3.1.1
-      yaml: 2.4.3
+      lilconfig: 3.1.3
     optionalDependencies:
-      postcss: 8.4.41
-      ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
+      jiti: 2.5.1
+      postcss: 8.5.6
+      tsx: 4.20.3
+      yaml: 2.8.1
 
-  postcss-nested@6.0.1(postcss@8.4.38):
+  postcss-nested@6.2.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.4.38
-      postcss-selector-parser: 6.1.0
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
 
-  postcss-nested@6.0.1(postcss@8.4.41):
+  postcss-selector-parser@6.1.2:
     dependencies:
-      postcss: 8.4.41
-      postcss-selector-parser: 6.1.0
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
 
-  postcss-selector-parser@6.1.0:
+  postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.4.24:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
-
   postcss@8.4.31:
     dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
 
-  postcss@8.4.38:
+  postcss@8.5.6:
     dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
 
-  postcss@8.4.41:
+  prebuild-install@7.1.3:
     dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
-
-  prebuild-install@7.1.2:
-    dependencies:
-      detect-libc: 2.0.3
+      detect-libc: 2.0.4
       expand-template: 2.0.3
       github-from-package: 0.0.0
       minimist: 1.2.8
       mkdirp-classic: 0.5.3
-      napi-build-utils: 1.0.2
-      node-abi: 3.63.0
-      pump: 3.0.0
+      napi-build-utils: 2.0.0
+      node-abi: 3.75.0
+      pump: 3.0.3
       rc: 1.2.8
       simple-get: 4.0.1
-      tar-fs: 2.1.1
+      tar-fs: 2.1.3
       tunnel-agent: 0.6.0
 
-  preferred-pm@3.1.3:
-    dependencies:
-      find-up: 5.0.0
-      find-yarn-workspace-root2: 1.2.16
-      path-exists: 4.0.0
-      which-pm: 2.0.0
-
   prelude-ls@1.2.1: {}
 
   prepend-http@2.0.0: {}
 
+  prettier-plugin-tailwindcss@0.6.14(@ianvs/prettier-plugin-sort-imports@4.6.1(prettier@3.6.2))(prettier@3.6.2):
+    dependencies:
+      prettier: 3.6.2
+    optionalDependencies:
+      '@ianvs/prettier-plugin-sort-imports': 4.6.1(prettier@3.6.2)
+
   prettier@2.8.8: {}
 
-  pretty-quick@3.1.3(prettier@2.8.8):
+  prettier@3.6.2: {}
+
+  pretty-ms@9.2.0:
+    dependencies:
+      parse-ms: 4.0.0
+
+  pretty-quick@3.3.1(prettier@2.8.8):
     dependencies:
-      chalk: 3.0.0
       execa: 4.1.0
       find-up: 4.1.0
-      ignore: 5.3.1
+      ignore: 5.3.2
       mri: 1.2.0
-      multimatch: 4.0.0
+      picocolors: 1.1.1
+      picomatch: 3.0.1
       prettier: 2.8.8
+      tslib: 2.8.1
+
+  progress@2.0.3: {}
 
   prompts@2.4.2:
     dependencies:
@@ -13531,7 +17185,9 @@ snapshots:
 
   property-information@6.5.0: {}
 
-  protobufjs@7.3.0:
+  property-information@7.1.0: {}
+
+  protobufjs@7.5.3:
     dependencies:
       '@protobufjs/aspromise': 1.1.2
       '@protobufjs/base64': 1.1.2
@@ -13543,24 +17199,96 @@ snapshots:
       '@protobufjs/path': 1.1.2
       '@protobufjs/pool': 1.1.0
       '@protobufjs/utf8': 1.1.0
-      '@types/node': 20.14.0
-      long: 5.2.3
+      '@types/node': 20.19.10
+      long: 5.3.2
+
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
+  proxy-agent@6.5.0:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.1
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      lru-cache: 7.18.3
+      pac-proxy-agent: 7.2.0
+      proxy-from-env: 1.1.0
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  proxy-from-env@1.1.0: {}
+
+  ps-tree@1.2.0:
+    dependencies:
+      event-stream: 3.3.4
 
   pseudomap@1.0.2: {}
 
-  pump@3.0.0:
+  psl@1.15.0:
+    dependencies:
+      punycode: 2.3.1
+
+  pump@3.0.3:
     dependencies:
-      end-of-stream: 1.4.4
+      end-of-stream: 1.4.5
       once: 1.4.0
 
   punycode@2.3.1: {}
 
-  q@1.5.1: {}
+  puppeteer-core@23.11.1:
+    dependencies:
+      '@puppeteer/browsers': 2.6.1
+      chromium-bidi: 0.11.0(devtools-protocol@0.0.1367902)
+      debug: 4.4.1
+      devtools-protocol: 0.0.1367902
+      typed-query-selector: 2.12.0
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bare-buffer
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  puppeteer@23.11.1(typescript@5.9.2):
+    dependencies:
+      '@puppeteer/browsers': 2.6.1
+      chromium-bidi: 0.11.0(devtools-protocol@0.0.1367902)
+      cosmiconfig: 9.0.0(typescript@5.9.2)
+      devtools-protocol: 0.0.1367902
+      puppeteer-core: 23.11.1
+      typed-query-selector: 2.12.0
+    transitivePeerDependencies:
+      - bare-buffer
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
+  qs@6.14.0:
+    dependencies:
+      side-channel: 1.1.0
+
+  quansync@0.2.10: {}
+
+  querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
 
   quick-lru@4.0.1: {}
 
+  range-parser@1.2.1: {}
+
+  raw-body@3.0.0:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.0
+      iconv-lite: 0.6.3
+      unpipe: 1.0.0
+
   rc@1.2.8:
     dependencies:
       deep-extend: 0.6.0
@@ -13568,92 +17296,156 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react-day-picker@8.7.1(date-fns@2.30.0)(react@18.2.0):
+  react-day-picker@9.8.1(react@18.3.1):
     dependencies:
-      date-fns: 2.30.0
-      react: 18.2.0
+      '@date-fns/tz': 1.3.1
+      date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
+      react: 18.3.1
+
+  react-day-picker@9.8.1(react@19.1.0):
+    dependencies:
+      '@date-fns/tz': 1.3.1
+      date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
+      react: 19.1.0
 
-  react-dom@18.2.0(react@18.2.0):
+  react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
-      react: 18.2.0
+      react: 18.3.1
       scheduler: 0.23.2
 
-  react-hook-form@7.44.2(react@18.2.0):
+  react-dom@19.1.0(react@19.1.0):
     dependencies:
-      react: 18.2.0
+      react: 19.1.0
+      scheduler: 0.26.0
+
+  react-hook-form@7.62.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
+  react-hook-form@7.62.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
 
   react-is@16.13.1: {}
 
-  react-remove-scroll-bar@2.3.6(@types/react@18.2.67)(react@18.2.0):
+  react-is@18.3.1: {}
+
+  react-medium-image-zoom@5.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  react-remove-scroll-bar@2.3.8(@types/react@18.3.23)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/react@18.3.23)(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  react-remove-scroll-bar@2.3.8(@types/react@19.1.2)(react@19.1.0):
     dependencies:
-      react: 18.2.0
-      react-style-singleton: 2.2.1(@types/react@18.2.67)(react@18.2.0)
-      tslib: 2.6.2
+      react: 19.1.0
+      react-style-singleton: 2.2.3(@types/react@19.1.2)(react@19.1.0)
+      tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 19.1.2
 
-  react-remove-scroll@2.5.5(@types/react@18.2.67)(react@18.2.0):
+  react-remove-scroll@2.7.1(@types/react@18.3.23)(react@18.3.1):
     dependencies:
-      react: 18.2.0
-      react-remove-scroll-bar: 2.3.6(@types/react@18.2.67)(react@18.2.0)
-      react-style-singleton: 2.2.1(@types/react@18.2.67)(react@18.2.0)
-      tslib: 2.6.2
-      use-callback-ref: 1.3.2(@types/react@18.2.67)(react@18.2.0)
-      use-sidecar: 1.1.2(@types/react@18.2.67)(react@18.2.0)
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/react@18.3.23)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.3.23)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.3.23)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.3.23)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 18.3.23
 
-  react-remove-scroll@2.5.7(@types/react@18.2.67)(react@18.2.0):
+  react-remove-scroll@2.7.1(@types/react@19.1.2)(react@19.1.0):
     dependencies:
-      react: 18.2.0
-      react-remove-scroll-bar: 2.3.6(@types/react@18.2.67)(react@18.2.0)
-      react-style-singleton: 2.2.1(@types/react@18.2.67)(react@18.2.0)
-      tslib: 2.6.2
-      use-callback-ref: 1.3.2(@types/react@18.2.67)(react@18.2.0)
-      use-sidecar: 1.1.2(@types/react@18.2.67)(react@18.2.0)
+      react: 19.1.0
+      react-remove-scroll-bar: 2.3.8(@types/react@19.1.2)(react@19.1.0)
+      react-style-singleton: 2.2.3(@types/react@19.1.2)(react@19.1.0)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.1.2)(react@19.1.0)
+      use-sidecar: 1.1.3(@types/react@19.1.2)(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 19.1.2
+
+  react-resizable-panels@2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  react-resizable-panels@2.0.22(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  react-resizable-panels@2.1.9(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
 
-  react-smooth@4.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      fast-equals: 5.0.1
+      fast-equals: 5.2.2
       prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-transition-group: 4.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
+  react-smooth@4.0.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      fast-equals: 5.2.2
+      prop-types: 15.8.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-transition-group: 4.4.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+
+  react-style-singleton@2.2.3(@types/react@18.3.23)(react@18.3.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.23
 
-  react-style-singleton@2.2.1(@types/react@18.2.67)(react@18.2.0):
+  react-style-singleton@2.2.3(@types/react@19.1.2)(react@19.1.0):
     dependencies:
       get-nonce: 1.0.1
-      invariant: 2.2.4
-      react: 18.2.0
-      tslib: 2.6.2
+      react: 19.1.0
+      tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 19.1.2
+
+  react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.28.2
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  react-transition-group@4.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  react-transition-group@4.4.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.28.2
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
 
-  react-wrap-balancer@0.4.1(react@18.2.0):
+  react-wrap-balancer@0.4.1(react@18.3.1):
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
 
-  react@18.2.0:
+  react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
 
+  react@19.1.0: {}
+
   read-cache@1.0.0:
     dependencies:
       pify: 2.3.0
@@ -13688,53 +17480,117 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  recast@0.23.2:
+  readdirp@4.1.2: {}
+
+  recast@0.23.11:
     dependencies:
-      assert: 2.1.0
       ast-types: 0.16.1
       esprima: 4.0.1
       source-map: 0.6.1
-      tslib: 2.6.2
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
 
   recharts-scale@0.4.5:
     dependencies:
       decimal.js-light: 2.5.1
 
-  recharts@2.12.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  recharts@2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 16.13.1
+      react-smooth: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
+  recharts@2.15.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      clsx: 2.0.0
+      clsx: 2.1.1
       eventemitter3: 4.0.7
       lodash: 4.17.21
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-is: 16.13.1
-      react-smooth: 4.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       recharts-scale: 0.4.5
       tiny-invariant: 1.3.3
       victory-vendor: 36.9.2
 
+  recma-build-jsx@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-util-build-jsx: 3.0.1
+      vfile: 6.0.3
+
+  recma-jsx@1.0.1(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      estree-util-to-js: 2.0.0
+      recma-parse: 1.0.0
+      recma-stringify: 1.0.0
+      unified: 11.0.5
+
+  recma-parse@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      esast-util-from-js: 2.0.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  recma-stringify@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-util-to-js: 2.0.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
   redent@3.0.0:
     dependencies:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
-  reflect.getprototypeof@1.0.6:
+  reflect.getprototypeof@1.0.10:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.24.0
       es-errors: 1.3.0
-      get-intrinsic: 1.2.4
-      globalthis: 1.0.4
-      which-builtin-type: 1.1.3
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+
+  regex-recursion@5.1.1:
+    dependencies:
+      regex: 5.1.1
+      regex-utilities: 2.3.0
+
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
 
-  regenerator-runtime@0.14.1: {}
+  regex@5.1.1:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex@6.0.1:
+    dependencies:
+      regex-utilities: 2.3.0
 
-  regexp.prototype.flags@1.5.2:
+  regexp.prototype.flags@1.5.4:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
       es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
       set-function-name: 2.0.2
 
   registry-auth-token@4.2.2:
@@ -13762,12 +17618,36 @@ snapshots:
       parse5: 6.0.1
       unified: 10.1.2
 
-  rehype-pretty-code@0.6.0(shiki@1.10.3):
+  rehype-parse@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-from-html: 2.0.3
+      unified: 11.0.5
+
+  rehype-pretty-code@0.14.1(shiki@1.29.2):
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-string: 3.0.1
+      parse-numeric-range: 1.3.0
+      rehype-parse: 9.0.1
+      shiki: 1.29.2
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+
+  rehype-pretty-code@0.6.0(shiki@1.29.2):
     dependencies:
       hash-obj: 4.0.0
       nanoid: 4.0.2
       parse-numeric-range: 1.3.0
-      shiki: 1.10.3
+      shiki: 1.29.2
+
+  rehype-recma@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/hast': 3.0.4
+      hast-util-to-estree: 3.1.3
+    transitivePeerDependencies:
+      - supports-color
 
   rehype-slug@5.1.0:
     dependencies:
@@ -13779,10 +17659,10 @@ snapshots:
       unified: 10.1.2
       unist-util-visit: 4.1.2
 
-  rehype-stringify@10.0.0:
+  rehype-stringify@10.0.1:
     dependencies:
       '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.1
+      hast-util-to-html: 9.0.5
       unified: 11.0.5
 
   rehype-stringify@9.0.4:
@@ -13813,10 +17693,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  remark-gfm@4.0.0:
+  remark-gfm@4.0.1:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-gfm: 3.0.0
+      mdast-util-gfm: 3.1.0
       micromark-extension-gfm: 3.0.0
       remark-parse: 11.0.0
       remark-stringify: 11.0.0
@@ -13828,12 +17708,12 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       estree-util-is-identifier-name: 3.0.0
-      estree-util-value-to-estree: 3.1.2
+      estree-util-value-to-estree: 3.4.0
       toml: 3.0.0
       unified: 11.0.5
-      yaml: 2.4.3
+      yaml: 2.8.1
 
-  remark-mdx@3.0.1:
+  remark-mdx@3.1.0:
     dependencies:
       mdast-util-mdx: 3.0.0
       micromark-extension-mdxjs: 3.0.0
@@ -13851,19 +17731,19 @@ snapshots:
   remark-parse@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.1
-      micromark-util-types: 2.0.0
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.2
       unified: 11.0.5
     transitivePeerDependencies:
       - supports-color
 
-  remark-rehype@11.1.0:
+  remark-rehype@11.1.2:
     dependencies:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
       mdast-util-to-hast: 13.2.0
       unified: 11.0.5
-      vfile: 6.0.1
+      vfile: 6.0.3
 
   remark-stringify@10.0.3:
     dependencies:
@@ -13874,7 +17754,7 @@ snapshots:
   remark-stringify@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-to-markdown: 2.1.2
       unified: 11.0.5
 
   remark@14.0.3:
@@ -13886,13 +17766,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  remark@15.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
   repeat-string@1.6.1: {}
 
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
 
-  require-main-filename@2.0.0: {}
+  requires-port@1.0.0: {}
 
   resolve-from@4.0.0: {}
 
@@ -13904,15 +17793,15 @@ snapshots:
 
   resolve-pkg-maps@1.0.0: {}
 
-  resolve@1.22.8:
+  resolve@1.22.10:
     dependencies:
-      is-core-module: 2.13.1
+      is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
   resolve@2.0.0-next.5:
     dependencies:
-      is-core-module: 2.13.1
+      is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
@@ -13920,76 +17809,94 @@ snapshots:
     dependencies:
       lowercase-keys: 1.0.1
 
-  restore-cursor@4.0.0:
+  restore-cursor@5.1.0:
     dependencies:
-      onetime: 5.1.2
-      signal-exit: 3.0.7
+      onetime: 7.0.0
+      signal-exit: 4.1.0
 
-  reusify@1.0.4: {}
+  reusify@1.1.0: {}
 
   rimraf@3.0.2:
     dependencies:
       glob: 7.2.3
 
-  rimraf@4.1.3: {}
+  rimraf@4.4.1:
+    dependencies:
+      glob: 9.3.5
 
   rimraf@6.0.1:
     dependencies:
-      glob: 11.0.0
-      package-json-from-dist: 1.0.0
+      glob: 11.0.3
+      package-json-from-dist: 1.0.1
 
-  rollup@3.29.4:
+  rollup@4.46.2:
+    dependencies:
+      '@types/estree': 1.0.8
     optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.46.2
+      '@rollup/rollup-android-arm64': 4.46.2
+      '@rollup/rollup-darwin-arm64': 4.46.2
+      '@rollup/rollup-darwin-x64': 4.46.2
+      '@rollup/rollup-freebsd-arm64': 4.46.2
+      '@rollup/rollup-freebsd-x64': 4.46.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.46.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.46.2
+      '@rollup/rollup-linux-arm64-gnu': 4.46.2
+      '@rollup/rollup-linux-arm64-musl': 4.46.2
+      '@rollup/rollup-linux-loongarch64-gnu': 4.46.2
+      '@rollup/rollup-linux-ppc64-gnu': 4.46.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.46.2
+      '@rollup/rollup-linux-riscv64-musl': 4.46.2
+      '@rollup/rollup-linux-s390x-gnu': 4.46.2
+      '@rollup/rollup-linux-x64-gnu': 4.46.2
+      '@rollup/rollup-linux-x64-musl': 4.46.2
+      '@rollup/rollup-win32-arm64-msvc': 4.46.2
+      '@rollup/rollup-win32-ia32-msvc': 4.46.2
+      '@rollup/rollup-win32-x64-msvc': 4.46.2
       fsevents: 2.3.3
 
-  rollup@4.21.0:
-    dependencies:
-      '@types/estree': 1.0.5
-    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.21.0
-      '@rollup/rollup-android-arm64': 4.21.0
-      '@rollup/rollup-darwin-arm64': 4.21.0
-      '@rollup/rollup-darwin-x64': 4.21.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.21.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.21.0
-      '@rollup/rollup-linux-arm64-gnu': 4.21.0
-      '@rollup/rollup-linux-arm64-musl': 4.21.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.21.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.21.0
-      '@rollup/rollup-linux-s390x-gnu': 4.21.0
-      '@rollup/rollup-linux-x64-gnu': 4.21.0
-      '@rollup/rollup-linux-x64-musl': 4.21.0
-      '@rollup/rollup-win32-arm64-msvc': 4.21.0
-      '@rollup/rollup-win32-ia32-msvc': 4.21.0
-      '@rollup/rollup-win32-x64-msvc': 4.21.0
-      fsevents: 2.3.3
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.1
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.2.0
+    transitivePeerDependencies:
+      - supports-color
 
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
 
-  rxjs@7.8.1:
+  rxjs@7.8.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
 
-  safe-array-concat@1.1.2:
+  safe-array-concat@1.1.3:
     dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
-      has-symbols: 1.0.3
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
       isarray: 2.0.5
 
   safe-buffer@5.2.1: {}
 
-  safe-regex-test@1.0.3:
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+
+  safe-regex-test@1.1.0:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      is-regex: 1.1.4
+      is-regex: 1.2.1
 
   safer-buffer@2.1.2: {}
 
@@ -13999,7 +17906,7 @@ snapshots:
       css-background-parser: 0.1.0
       css-box-shadow: 1.0.0-3
       css-to-react-native: 3.2.0
-      emoji-regex: 10.3.0
+      emoji-regex: 10.4.0
       postcss-value-parser: 4.2.0
       yoga-layout-prebuilt: 1.10.0
 
@@ -14007,6 +17914,12 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  scheduler@0.26.0: {}
+
+  scroll-into-view-if-needed@3.1.0:
+    dependencies:
+      compute-scroll-into-view: 3.1.1
+
   section-matter@1.0.0:
     dependencies:
       extend-shallow: 2.0.1
@@ -14025,19 +17938,40 @@ snapshots:
     dependencies:
       lru-cache: 6.0.0
 
-  semver@7.6.2: {}
+  semver@7.7.2: {}
 
-  server-only@0.0.1: {}
+  send@1.2.0:
+    dependencies:
+      debug: 4.4.1
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      mime-types: 3.0.1
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
 
-  set-blocking@2.0.0: {}
+  serve-static@2.2.0:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.0
+    transitivePeerDependencies:
+      - supports-color
 
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
       es-errors: 1.3.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.4
-      gopd: 1.0.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
       has-property-descriptors: 1.0.2
 
   set-function-name@2.0.2:
@@ -14047,42 +17981,82 @@ snapshots:
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.2
 
-  sharp@0.31.3:
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+
+  setprototypeof@1.2.0: {}
+
+  sharp@0.32.6:
     dependencies:
       color: 4.2.3
-      detect-libc: 2.0.3
-      node-addon-api: 5.1.0
-      prebuild-install: 7.1.2
-      semver: 7.6.2
+      detect-libc: 2.0.4
+      node-addon-api: 6.1.0
+      prebuild-install: 7.1.3
+      semver: 7.7.2
       simple-get: 4.0.1
-      tar-fs: 2.1.1
+      tar-fs: 3.1.0
       tunnel-agent: 0.6.0
+    transitivePeerDependencies:
+      - bare-buffer
+
+  sharp@0.33.5:
+    dependencies:
+      color: 4.2.3
+      detect-libc: 2.0.4
+      semver: 7.7.2
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.33.5
+      '@img/sharp-darwin-x64': 0.33.5
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+      '@img/sharp-libvips-linux-arm': 1.0.5
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+      '@img/sharp-libvips-linux-x64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+      '@img/sharp-linux-arm': 0.33.5
+      '@img/sharp-linux-arm64': 0.33.5
+      '@img/sharp-linux-s390x': 0.33.5
+      '@img/sharp-linux-x64': 0.33.5
+      '@img/sharp-linuxmusl-arm64': 0.33.5
+      '@img/sharp-linuxmusl-x64': 0.33.5
+      '@img/sharp-wasm32': 0.33.5
+      '@img/sharp-win32-ia32': 0.33.5
+      '@img/sharp-win32-x64': 0.33.5
+    optional: true
 
-  sharp@0.33.4:
+  sharp@0.34.3:
     dependencies:
       color: 4.2.3
-      detect-libc: 2.0.3
-      semver: 7.6.2
-    optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.33.4
-      '@img/sharp-darwin-x64': 0.33.4
-      '@img/sharp-libvips-darwin-arm64': 1.0.2
-      '@img/sharp-libvips-darwin-x64': 1.0.2
-      '@img/sharp-libvips-linux-arm': 1.0.2
-      '@img/sharp-libvips-linux-arm64': 1.0.2
-      '@img/sharp-libvips-linux-s390x': 1.0.2
-      '@img/sharp-libvips-linux-x64': 1.0.2
-      '@img/sharp-libvips-linuxmusl-arm64': 1.0.2
-      '@img/sharp-libvips-linuxmusl-x64': 1.0.2
-      '@img/sharp-linux-arm': 0.33.4
-      '@img/sharp-linux-arm64': 0.33.4
-      '@img/sharp-linux-s390x': 0.33.4
-      '@img/sharp-linux-x64': 0.33.4
-      '@img/sharp-linuxmusl-arm64': 0.33.4
-      '@img/sharp-linuxmusl-x64': 0.33.4
-      '@img/sharp-wasm32': 0.33.4
-      '@img/sharp-win32-ia32': 0.33.4
-      '@img/sharp-win32-x64': 0.33.4
+      detect-libc: 2.0.4
+      semver: 7.7.2
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.3
+      '@img/sharp-darwin-x64': 0.34.3
+      '@img/sharp-libvips-darwin-arm64': 1.2.0
+      '@img/sharp-libvips-darwin-x64': 1.2.0
+      '@img/sharp-libvips-linux-arm': 1.2.0
+      '@img/sharp-libvips-linux-arm64': 1.2.0
+      '@img/sharp-libvips-linux-ppc64': 1.2.0
+      '@img/sharp-libvips-linux-s390x': 1.2.0
+      '@img/sharp-libvips-linux-x64': 1.2.0
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.0
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.0
+      '@img/sharp-linux-arm': 0.34.3
+      '@img/sharp-linux-arm64': 0.34.3
+      '@img/sharp-linux-ppc64': 0.34.3
+      '@img/sharp-linux-s390x': 0.34.3
+      '@img/sharp-linux-x64': 0.34.3
+      '@img/sharp-linuxmusl-arm64': 0.34.3
+      '@img/sharp-linuxmusl-x64': 0.34.3
+      '@img/sharp-wasm32': 0.34.3
+      '@img/sharp-win32-arm64': 0.34.3
+      '@img/sharp-win32-ia32': 0.34.3
+      '@img/sharp-win32-x64': 0.34.3
     optional: true
 
   shebang-command@1.2.0:
@@ -14097,23 +18071,57 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shell-quote@1.8.1: {}
+  shell-quote@1.8.3: {}
 
-  shiki@1.1.7:
+  shiki@1.29.2:
     dependencies:
-      '@shikijs/core': 1.1.7
+      '@shikijs/core': 1.29.2
+      '@shikijs/engine-javascript': 1.29.2
+      '@shikijs/engine-oniguruma': 1.29.2
+      '@shikijs/langs': 1.29.2
+      '@shikijs/themes': 1.29.2
+      '@shikijs/types': 1.29.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
 
-  shiki@1.10.3:
+  shiki@3.9.2:
     dependencies:
-      '@shikijs/core': 1.10.3
+      '@shikijs/core': 3.9.2
+      '@shikijs/engine-javascript': 3.9.2
+      '@shikijs/engine-oniguruma': 3.9.2
+      '@shikijs/langs': 3.9.2
+      '@shikijs/themes': 3.9.2
+      '@shikijs/types': 3.9.2
+      '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
-  side-channel@1.0.6:
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      get-intrinsic: 1.2.4
-      object-inspect: 1.13.1
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
 
   siginfo@2.0.0: {}
 
@@ -14137,25 +18145,36 @@ snapshots:
 
   slash@3.0.0: {}
 
-  smartwrap@2.0.2:
+  smart-buffer@4.2.0: {}
+
+  socks-proxy-agent@8.0.5:
     dependencies:
-      array.prototype.flat: 1.3.2
-      breakword: 1.0.6
-      grapheme-splitter: 1.0.4
-      strip-ansi: 6.0.1
-      wcwidth: 1.0.1
-      yargs: 15.4.1
+      agent-base: 7.1.4
+      debug: 4.4.1
+      socks: 2.8.6
+    transitivePeerDependencies:
+      - supports-color
+
+  socks@2.8.6:
+    dependencies:
+      ip-address: 9.0.5
+      smart-buffer: 4.2.0
 
-  sonner@1.2.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  sonner@1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  sort-keys@5.0.0:
+  sonner@2.0.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  sort-keys@5.1.0:
     dependencies:
       is-plain-obj: 4.1.0
 
-  source-map-js@1.2.0: {}
+  source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
     dependencies:
@@ -14164,7 +18183,7 @@ snapshots:
 
   source-map@0.6.1: {}
 
-  source-map@0.7.4: {}
+  source-map@0.7.6: {}
 
   source-map@0.8.0-beta.0:
     dependencies:
@@ -14172,43 +18191,89 @@ snapshots:
 
   space-separated-tokens@2.0.2: {}
 
-  spawn-command@0.0.2-1: {}
+  spawn-command@0.0.2: {}
 
   spawndamnit@2.0.0:
     dependencies:
       cross-spawn: 5.1.0
       signal-exit: 3.0.7
 
+  spawndamnit@3.0.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.18
+      spdx-license-ids: 3.0.22
 
   spdx-exceptions@2.5.0: {}
 
   spdx-expression-parse@3.0.1:
     dependencies:
       spdx-exceptions: 2.5.0
-      spdx-license-ids: 3.0.18
+      spdx-license-ids: 3.0.22
 
-  spdx-license-ids@3.0.18: {}
+  spdx-license-ids@3.0.22: {}
 
   split2@3.2.2:
     dependencies:
       readable-stream: 3.6.2
 
+  split@0.3.3:
+    dependencies:
+      through: 2.3.8
+
   sprintf-js@1.0.3: {}
 
+  sprintf-js@1.1.3: {}
+
+  stable-hash@0.0.5: {}
+
   stackback@0.0.2: {}
 
-  std-env@3.7.0: {}
+  start-server-and-test@2.0.13:
+    dependencies:
+      arg: 5.0.2
+      bluebird: 3.7.2
+      check-more-types: 2.24.0
+      debug: 4.4.1
+      execa: 5.1.1
+      lazy-ass: 1.6.0
+      ps-tree: 1.2.0
+      wait-on: 8.0.4(debug@4.4.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  statuses@2.0.1: {}
+
+  statuses@2.0.2: {}
+
+  std-env@3.9.0: {}
+
+  stdin-discarder@0.2.2: {}
+
+  stop-iteration-iterator@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
 
-  stream-transform@2.1.3:
+  stream-combiner@0.0.4:
     dependencies:
-      mixme: 0.5.10
+      duplexer: 0.1.2
 
   streamsearch@1.1.0: {}
 
+  streamx@2.22.1:
+    dependencies:
+      fast-fifo: 1.3.2
+      text-decoder: 1.2.3
+    optionalDependencies:
+      bare-events: 2.6.1
+
+  strict-event-emitter@0.5.1: {}
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -14221,41 +18286,63 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
 
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.4.0
+      get-east-asian-width: 1.3.0
+      strip-ansi: 7.1.0
+
   string.prototype.codepointat@0.2.1: {}
 
-  string.prototype.matchall@4.0.11:
+  string.prototype.includes@2.0.1:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  string.prototype.matchall@4.0.12:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.24.0
       es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      get-intrinsic: 1.2.4
-      gopd: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.7
-      regexp.prototype.flags: 1.5.2
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      regexp.prototype.flags: 1.5.4
       set-function-name: 2.0.2
-      side-channel: 1.0.6
+      side-channel: 1.1.0
 
-  string.prototype.trim@1.2.9:
+  string.prototype.repeat@1.0.0:
     dependencies:
-      call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
+      es-abstract: 1.24.0
+
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
 
-  string.prototype.trimend@1.0.8:
+  string.prototype.trimend@1.0.9:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
 
   string.prototype.trimstart@1.0.8:
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
 
   string_decoder@1.3.0:
     dependencies:
@@ -14278,7 +18365,7 @@ snapshots:
 
   strip-ansi@7.1.0:
     dependencies:
-      ansi-regex: 6.0.1
+      ansi-regex: 6.1.0
 
   strip-bom-string@1.0.0: {}
 
@@ -14288,6 +18375,8 @@ snapshots:
 
   strip-final-newline@3.0.0: {}
 
+  strip-final-newline@4.0.0: {}
+
   strip-indent@3.0.0:
     dependencies:
       min-indent: 1.0.1
@@ -14300,36 +18389,36 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
-  style-to-object@0.4.4:
+  style-to-js@1.1.17:
     dependencies:
-      inline-style-parser: 0.1.1
+      style-to-object: 1.0.9
 
-  style-to-object@1.0.6:
+  style-to-object@1.0.9:
     dependencies:
-      inline-style-parser: 0.2.3
+      inline-style-parser: 0.2.4
 
-  styled-jsx@5.1.1(@babel/core@7.22.1)(react@18.2.0):
+  styled-jsx@5.1.1(@babel/core@7.28.0)(react@18.3.1):
     dependencies:
       client-only: 0.0.1
-      react: 18.2.0
+      react: 18.3.1
     optionalDependencies:
-      '@babel/core': 7.22.1
+      '@babel/core': 7.28.0
 
-  styled-jsx@5.1.1(@babel/core@7.24.6)(react@18.2.0):
+  styled-jsx@5.1.6(@babel/core@7.28.0)(react@19.1.0):
     dependencies:
       client-only: 0.0.1
-      react: 18.2.0
+      react: 19.1.0
     optionalDependencies:
-      '@babel/core': 7.24.6
+      '@babel/core': 7.28.0
 
   sucrase@3.35.0:
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.12
       commander: 4.1.1
-      glob: 10.4.1
+      glob: 10.4.5
       lines-and-columns: 1.2.4
       mz: 2.7.0
-      pirates: 4.0.6
+      pirates: 4.0.7
       ts-interface-checker: 0.1.13
 
   supports-color@5.5.0:
@@ -14346,94 +18435,123 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  swr@2.2.6-beta.3(react@18.2.0):
+  swr@2.2.6-beta.3(react@18.3.1):
     dependencies:
-      react: 18.2.0
-      use-sync-external-store: 1.2.2(react@18.2.0)
+      react: 18.3.1
+      use-sync-external-store: 1.5.0(react@18.3.1)
 
-  tailwind-merge@1.13.2: {}
+  tailwind-merge@1.14.0: {}
 
-  tailwindcss-animate@1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))):
-    dependencies:
-      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
+  tailwind-merge@3.3.1: {}
 
-  tailwindcss-animate@1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.6(ts-node@10.9.2(@types/node@20.19.10)(typescript@5.9.2))):
     dependencies:
-      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
+      tailwindcss: 3.4.6(ts-node@10.9.2(@types/node@20.19.10)(typescript@5.9.2))
 
-  tailwindcss@3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)):
+  tailwindcss@3.4.6(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.9.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
       chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.0
+      jiti: 1.21.7
       lilconfig: 2.1.0
-      micromatch: 4.0.7
+      micromatch: 4.0.8
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.38
-      postcss-import: 15.1.0(postcss@8.4.38)
-      postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
-      postcss-nested: 6.0.1(postcss@8.4.38)
-      postcss-selector-parser: 6.1.0
-      resolve: 1.22.8
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-import: 15.1.0(postcss@8.5.6)
+      postcss-js: 4.0.1(postcss@8.5.6)
+      postcss-load-config: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.9.2))
+      postcss-nested: 6.2.0(postcss@8.5.6)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.10
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)):
+  tailwindcss@3.4.6(ts-node@10.9.2(@types/node@20.19.10)(typescript@5.9.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
       chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.0
+      jiti: 1.21.7
       lilconfig: 2.1.0
-      micromatch: 4.0.7
+      micromatch: 4.0.8
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.41
-      postcss-import: 15.1.0(postcss@8.4.41)
-      postcss-js: 4.0.1(postcss@8.4.41)
-      postcss-load-config: 4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
-      postcss-nested: 6.0.1(postcss@8.4.41)
-      postcss-selector-parser: 6.1.0
-      resolve: 1.22.8
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-import: 15.1.0(postcss@8.5.6)
+      postcss-js: 4.0.1(postcss@8.5.6)
+      postcss-load-config: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@20.19.10)(typescript@5.9.2))
+      postcss-nested: 6.2.0(postcss@8.5.6)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.10
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tapable@2.2.1: {}
+  tailwindcss@4.1.11: {}
+
+  tapable@2.2.2: {}
 
-  tar-fs@2.1.1:
+  tar-fs@2.1.3:
     dependencies:
       chownr: 1.1.4
       mkdirp-classic: 0.5.3
-      pump: 3.0.0
+      pump: 3.0.3
       tar-stream: 2.2.0
 
+  tar-fs@3.1.0:
+    dependencies:
+      pump: 3.0.3
+      tar-stream: 3.1.7
+    optionalDependencies:
+      bare-fs: 4.1.6
+      bare-path: 3.0.0
+    transitivePeerDependencies:
+      - bare-buffer
+
   tar-stream@2.2.0:
     dependencies:
       bl: 4.1.0
-      end-of-stream: 1.4.4
+      end-of-stream: 1.4.5
       fs-constants: 1.0.0
       inherits: 2.0.4
       readable-stream: 3.6.2
 
+  tar-stream@3.1.7:
+    dependencies:
+      b4a: 1.6.7
+      fast-fifo: 1.3.2
+      streamx: 2.22.1
+
+  tar@7.4.3:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.2
+      mkdirp: 3.0.1
+      yallist: 5.0.0
+
   term-size@2.2.1: {}
 
+  text-decoder@1.2.3:
+    dependencies:
+      b4a: 1.6.7
+
   text-extensions@1.9.0: {}
 
   text-table@0.2.0: {}
@@ -14446,9 +18564,9 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
-  thingies@1.21.0(tslib@2.6.2):
+  thingies@2.5.0(tslib@2.8.1):
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   through2@4.0.2:
     dependencies:
@@ -14458,20 +18576,27 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
-  tinybench@2.8.0: {}
+  tinybench@2.9.0: {}
 
-  tinypool@1.0.1: {}
+  tinyexec@0.3.2: {}
+
+  tinyexec@1.0.1: {}
+
+  tinyglobby@0.2.14:
+    dependencies:
+      fdir: 6.4.6(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  tinypool@1.1.1: {}
 
   tinyrainbow@1.2.0: {}
 
-  tinyspy@3.0.0: {}
+  tinyspy@3.0.2: {}
 
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
 
-  to-fast-properties@2.0.0: {}
-
   to-gatsby-remark-plugin@0.1.0:
     dependencies:
       to-vfile: 6.1.0
@@ -14487,17 +18612,26 @@ snapshots:
       is-buffer: 2.0.5
       vfile: 4.2.1
 
+  toidentifier@1.0.1: {}
+
   toml@3.0.0: {}
 
+  tough-cookie@4.1.4:
+    dependencies:
+      psl: 1.15.0
+      punycode: 2.3.1
+      universalify: 0.2.0
+      url-parse: 1.5.10
+
   tr46@0.0.3: {}
 
   tr46@1.0.1:
     dependencies:
       punycode: 2.3.1
 
-  tree-dump@1.0.2(tslib@2.6.2):
+  tree-dump@1.0.3(tslib@2.8.1):
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   tree-kill@1.2.2: {}
 
@@ -14507,6 +18641,10 @@ snapshots:
 
   trough@2.2.0: {}
 
+  ts-api-utils@2.1.0(typescript@5.9.2):
+    dependencies:
+      typescript: 5.9.2
+
   ts-interface-checker@0.1.13: {}
 
   ts-morph@18.0.0:
@@ -14517,69 +18655,55 @@ snapshots:
   ts-morph@22.0.0:
     dependencies:
       '@ts-morph/common': 0.23.0
-      code-block-writer: 13.0.1
+      code-block-writer: 13.0.3
 
-  ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3):
+  ts-morph@26.0.0:
     dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.11
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 17.0.45
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.5.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optional: true
+      '@ts-morph/common': 0.27.0
+      code-block-writer: 13.0.3
 
-  ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3):
+  ts-node@10.9.2(@types/node@17.0.45)(typescript@5.9.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.11.27
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
+      '@types/node': 17.0.45
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 5.5.3
+      typescript: 5.9.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optional: true
 
-  ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5):
+  ts-node@10.9.2(@types/node@20.5.1)(typescript@5.9.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.14.0
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
+      '@types/node': 20.5.1
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.9.5
+      typescript: 5.9.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-    optional: true
 
-  ts-pattern@5.2.0: {}
+  ts-pattern@5.8.0: {}
 
-  tsconfck@2.1.2(typescript@5.5.3):
+  tsconfck@3.1.6(typescript@5.9.2):
     optionalDependencies:
-      typescript: 5.5.3
+      typescript: 5.9.2
 
   tsconfig-paths@3.15.0:
     dependencies:
@@ -14596,84 +18720,80 @@ snapshots:
 
   tslib@1.14.1: {}
 
-  tslib@2.6.2: {}
+  tslib@2.8.1: {}
 
-  tsup@6.6.3(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))(typescript@4.9.5):
+  tsup@8.5.0(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1):
     dependencies:
-      bundle-require: 4.2.1(esbuild@0.17.19)
+      bundle-require: 5.1.0(esbuild@0.25.8)
       cac: 6.7.14
-      chokidar: 3.6.0
-      debug: 4.3.5
-      esbuild: 0.17.19
-      execa: 5.1.1
-      globby: 11.1.0
+      chokidar: 4.0.3
+      consola: 3.4.2
+      debug: 4.4.1
+      esbuild: 0.25.8
+      fix-dts-default-cjs-exports: 1.0.1
       joycon: 3.1.1
-      postcss-load-config: 3.1.4(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))
+      picocolors: 1.1.1
+      postcss-load-config: 6.0.1(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3)(yaml@2.8.1)
       resolve-from: 5.0.0
-      rollup: 3.29.4
+      rollup: 4.46.2
       source-map: 0.8.0-beta.0
       sucrase: 3.35.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.14
       tree-kill: 1.2.2
     optionalDependencies:
-      postcss: 8.4.41
-      typescript: 4.9.5
+      postcss: 8.5.6
+      typescript: 5.9.2
     transitivePeerDependencies:
+      - jiti
       - supports-color
-      - ts-node
+      - tsx
+      - yaml
 
-  tsutils@3.21.0(typescript@5.5.3):
+  tsutils@3.21.0(typescript@5.9.2):
     dependencies:
       tslib: 1.14.1
-      typescript: 5.5.3
+      typescript: 5.9.2
 
-  tsx@4.1.4:
+  tsx@4.20.3:
     dependencies:
-      esbuild: 0.18.20
-      get-tsconfig: 4.7.5
-      source-map-support: 0.5.21
+      esbuild: 0.25.8
+      get-tsconfig: 4.10.1
     optionalDependencies:
       fsevents: 2.3.3
 
-  tty-table@4.2.3:
-    dependencies:
-      chalk: 4.1.2
-      csv: 5.5.3
-      kleur: 4.1.5
-      smartwrap: 2.0.2
-      strip-ansi: 6.0.1
-      wcwidth: 1.0.1
-      yargs: 17.7.2
-
   tunnel-agent@0.6.0:
     dependencies:
       safe-buffer: 5.2.1
 
-  turbo-darwin-64@1.9.9:
+  turbo-darwin-64@1.13.4:
     optional: true
 
-  turbo-darwin-arm64@1.9.9:
+  turbo-darwin-arm64@1.13.4:
     optional: true
 
-  turbo-linux-64@1.9.9:
+  turbo-linux-64@1.13.4:
     optional: true
 
-  turbo-linux-arm64@1.9.9:
+  turbo-linux-arm64@1.13.4:
     optional: true
 
-  turbo-windows-64@1.9.9:
+  turbo-windows-64@1.13.4:
     optional: true
 
-  turbo-windows-arm64@1.9.9:
+  turbo-windows-arm64@1.13.4:
     optional: true
 
-  turbo@1.9.9:
+  turbo@1.13.4:
     optionalDependencies:
-      turbo-darwin-64: 1.9.9
-      turbo-darwin-arm64: 1.9.9
-      turbo-linux-64: 1.9.9
-      turbo-linux-arm64: 1.9.9
-      turbo-windows-64: 1.9.9
-      turbo-windows-arm64: 1.9.9
+      turbo-darwin-64: 1.13.4
+      turbo-darwin-arm64: 1.13.4
+      turbo-linux-64: 1.13.4
+      turbo-linux-arm64: 1.13.4
+      turbo-windows-64: 1.13.4
+      turbo-windows-arm64: 1.13.4
+
+  tw-animate-css@1.3.6: {}
 
   typanion@3.14.0: {}
 
@@ -14681,70 +18801,84 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  type-fest@0.13.1: {}
-
   type-fest@0.18.1: {}
 
   type-fest@0.20.2: {}
 
+  type-fest@0.21.3: {}
+
   type-fest@0.6.0: {}
 
   type-fest@0.8.1: {}
 
   type-fest@1.4.0: {}
 
-  type-fest@3.8.0: {}
+  type-fest@4.41.0: {}
 
-  type-fest@4.21.0: {}
+  type-is@2.0.1:
+    dependencies:
+      content-type: 1.0.5
+      media-typer: 1.1.0
+      mime-types: 3.0.1
 
-  typed-array-buffer@1.0.2:
+  typed-array-buffer@1.0.3:
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      is-typed-array: 1.1.13
+      is-typed-array: 1.1.15
 
-  typed-array-byte-length@1.0.1:
+  typed-array-byte-length@1.0.3:
     dependencies:
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
 
-  typed-array-byte-offset@1.0.2:
+  typed-array-byte-offset@1.0.4:
     dependencies:
       available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
 
-  typed-array-length@1.0.6:
+  typed-array-length@1.0.7:
     dependencies:
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
-      possible-typed-array-names: 1.0.0
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
+  typed-query-selector@2.12.0: {}
 
-  typescript@4.9.5: {}
+  typescript@5.9.2: {}
 
-  typescript@5.5.3: {}
+  ufo@1.6.1: {}
 
-  unbox-primitive@1.0.2:
+  unbox-primitive@1.1.0:
     dependencies:
-      call-bind: 1.0.7
-      has-bigints: 1.0.2
-      has-symbols: 1.0.3
-      which-boxed-primitive: 1.0.2
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
+  unbzip2-stream@1.4.3:
+    dependencies:
+      buffer: 5.7.1
+      through: 2.3.8
 
-  undici-types@5.26.5: {}
+  undici-types@6.21.0: {}
+
+  unicorn-magic@0.3.0: {}
 
   unified@10.1.2:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       bail: 2.0.2
       extend: 3.0.2
       is-buffer: 2.0.5
@@ -14754,86 +18888,109 @@ snapshots:
 
   unified@11.0.5:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       bail: 2.0.2
       devlop: 1.1.0
       extend: 3.0.2
       is-plain-obj: 4.1.0
       trough: 2.2.0
-      vfile: 6.0.1
+      vfile: 6.0.3
 
   unist-builder@3.0.0:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   unist-util-is@5.2.1:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   unist-util-is@6.0.0:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   unist-util-position-from-estree@2.0.0:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   unist-util-position@4.0.4:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   unist-util-position@5.0.0:
     dependencies:
-      '@types/unist': 3.0.2
-
-  unist-util-remove-position@5.0.0:
-    dependencies:
-      '@types/unist': 3.0.2
-      unist-util-visit: 5.0.0
+      '@types/unist': 3.0.3
 
   unist-util-stringify-position@2.0.3:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   unist-util-stringify-position@3.0.3:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
   unist-util-stringify-position@4.0.0:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   unist-util-visit-parents@5.1.3:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       unist-util-is: 5.2.1
 
   unist-util-visit-parents@6.0.1:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       unist-util-is: 6.0.0
 
   unist-util-visit@4.1.2:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       unist-util-is: 5.2.1
       unist-util-visit-parents: 5.1.3
 
   unist-util-visit@5.0.0:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
   universalify@0.1.2: {}
 
+  universalify@0.2.0: {}
+
   universalify@2.0.1: {}
 
-  update-browserslist-db@1.0.16(browserslist@4.23.0):
+  unpipe@1.0.0: {}
+
+  unrs-resolver@1.11.1:
     dependencies:
-      browserslist: 4.23.0
-      escalade: 3.1.2
-      picocolors: 1.0.1
+      napi-postinstall: 0.3.3
+    optionalDependencies:
+      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
+      '@unrs/resolver-binding-android-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-x64': 1.11.1
+      '@unrs/resolver-binding-freebsd-x64': 1.11.1
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
+      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+
+  update-browserslist-db@1.1.3(browserslist@4.26.2):
+    dependencies:
+      browserslist: 4.26.2
+      escalade: 3.2.0
+      picocolors: 1.1.1
 
   uri-js@4.4.1:
     dependencies:
@@ -14843,34 +19000,50 @@ snapshots:
     dependencies:
       prepend-http: 2.0.0
 
-  use-callback-ref@1.3.2(@types/react@18.2.67)(react@18.2.0):
+  url-parse@1.5.10:
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+
+  use-callback-ref@1.3.3(@types/react@18.3.23)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  use-callback-ref@1.3.3(@types/react@19.1.2)(react@19.1.0):
     dependencies:
-      react: 18.2.0
-      tslib: 2.6.2
+      react: 19.1.0
+      tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 19.1.2
 
-  use-sidecar@1.1.2(@types/react@18.2.67)(react@18.2.0):
+  use-sidecar@1.1.3(@types/react@18.3.23)(react@18.3.1):
     dependencies:
       detect-node-es: 1.1.0
-      react: 18.2.0
-      tslib: 2.6.2
+      react: 18.3.1
+      tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.2.67
+      '@types/react': 18.3.23
 
-  use-sync-external-store@1.2.2(react@18.2.0):
+  use-sidecar@1.1.3(@types/react@19.1.2)(react@19.1.0):
     dependencies:
-      react: 18.2.0
+      detect-node-es: 1.1.0
+      react: 19.1.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.2
 
-  util-deprecate@1.0.2: {}
+  use-sync-external-store@1.5.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
 
-  util@0.12.5:
+  use-sync-external-store@1.5.0(react@19.1.0):
     dependencies:
-      inherits: 2.0.4
-      is-arguments: 1.1.1
-      is-generator-function: 1.0.10
-      is-typed-array: 1.1.13
-      which-typed-array: 1.1.15
+      react: 19.1.0
+
+  util-deprecate@1.0.2: {}
 
   uuid@9.0.1: {}
 
@@ -14892,68 +19065,78 @@ snapshots:
     dependencies:
       builtins: 1.0.3
 
-  vaul@0.9.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  vary@1.1.2: {}
+
+  vaul@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  vaul@1.1.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      '@radix-ui/react-dialog': 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
 
   vfile-location@4.1.0:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       vfile: 5.3.7
 
-  vfile-location@5.0.2:
+  vfile-location@5.0.3:
     dependencies:
-      '@types/unist': 3.0.2
-      vfile: 6.0.1
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
 
   vfile-message@2.0.4:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       unist-util-stringify-position: 2.0.3
 
   vfile-message@3.1.4:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       unist-util-stringify-position: 3.0.3
 
-  vfile-message@4.0.2:
+  vfile-message@4.0.3:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       unist-util-stringify-position: 4.0.0
 
   vfile@4.2.1:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       is-buffer: 2.0.5
       unist-util-stringify-position: 2.0.3
       vfile-message: 2.0.4
 
   vfile@5.3.7:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       is-buffer: 2.0.5
       unist-util-stringify-position: 3.0.3
       vfile-message: 3.1.4
 
-  vfile@6.0.1:
+  vfile@6.0.3:
     dependencies:
-      '@types/unist': 3.0.2
-      unist-util-stringify-position: 4.0.0
-      vfile-message: 4.0.2
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
 
   victory-vendor@36.9.2:
     dependencies:
       '@types/d3-array': 3.2.1
       '@types/d3-ease': 3.0.2
       '@types/d3-interpolate': 3.0.4
-      '@types/d3-scale': 4.0.8
-      '@types/d3-shape': 3.1.6
-      '@types/d3-time': 3.0.3
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
       '@types/d3-timer': 3.0.2
       d3-array: 3.2.4
       d3-ease: 3.0.1
@@ -14963,13 +19146,13 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite-node@2.0.5(@types/node@20.11.27):
+  vite-node@2.1.9(@types/node@20.19.10)(lightningcss@1.30.1):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.5
+      debug: 4.4.1
+      es-module-lexer: 1.7.0
       pathe: 1.1.2
-      tinyrainbow: 1.2.0
-      vite: 5.4.2(@types/node@20.11.27)
+      vite: 5.4.19(@types/node@20.19.10)(lightningcss@1.30.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -14981,52 +19164,55 @@ snapshots:
       - supports-color
       - terser
 
-  vite-tsconfig-paths@4.2.0(typescript@5.5.3)(vite@5.4.2(@types/node@20.11.27)):
+  vite-tsconfig-paths@4.3.2(typescript@5.9.2)(vite@5.4.19(@types/node@20.19.10)(lightningcss@1.30.1)):
     dependencies:
-      debug: 4.3.5
+      debug: 4.4.1
       globrex: 0.1.2
-      tsconfck: 2.1.2(typescript@5.5.3)
+      tsconfck: 3.1.6(typescript@5.9.2)
     optionalDependencies:
-      vite: 5.4.2(@types/node@20.11.27)
+      vite: 5.4.19(@types/node@20.19.10)(lightningcss@1.30.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@5.4.2(@types/node@20.11.27):
+  vite@5.4.19(@types/node@20.19.10)(lightningcss@1.30.1):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.4.41
-      rollup: 4.21.0
+      postcss: 8.5.6
+      rollup: 4.46.2
     optionalDependencies:
-      '@types/node': 20.11.27
+      '@types/node': 20.19.10
       fsevents: 2.3.3
-
-  vitest@2.0.5(@types/node@20.11.27):
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@vitest/expect': 2.0.5
-      '@vitest/pretty-format': 2.0.5
-      '@vitest/runner': 2.0.5
-      '@vitest/snapshot': 2.0.5
-      '@vitest/spy': 2.0.5
-      '@vitest/utils': 2.0.5
-      chai: 5.1.1
-      debug: 4.3.5
-      execa: 8.0.1
-      magic-string: 0.30.10
+      lightningcss: 1.30.1
+
+  vitest@2.1.9(@types/node@20.19.10)(lightningcss@1.30.1)(msw@2.10.4(@types/node@20.19.10)(typescript@5.9.2)):
+    dependencies:
+      '@vitest/expect': 2.1.9
+      '@vitest/mocker': 2.1.9(msw@2.10.4(@types/node@20.19.10)(typescript@5.9.2))(vite@5.4.19(@types/node@20.19.10)(lightningcss@1.30.1))
+      '@vitest/pretty-format': 2.1.9
+      '@vitest/runner': 2.1.9
+      '@vitest/snapshot': 2.1.9
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.2.1
+      debug: 4.4.1
+      expect-type: 1.2.2
+      magic-string: 0.30.17
       pathe: 1.1.2
-      std-env: 3.7.0
-      tinybench: 2.8.0
-      tinypool: 1.0.1
+      std-env: 3.9.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinypool: 1.1.1
       tinyrainbow: 1.2.0
-      vite: 5.4.2(@types/node@20.11.27)
-      vite-node: 2.0.5(@types/node@20.11.27)
+      vite: 5.4.19(@types/node@20.19.10)(lightningcss@1.30.1)
+      vite-node: 2.1.9(@types/node@20.19.10)(lightningcss@1.30.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 20.11.27
+      '@types/node': 20.19.10
     transitivePeerDependencies:
       - less
       - lightningcss
+      - msw
       - sass
       - sass-embedded
       - stylus
@@ -15034,9 +19220,15 @@ snapshots:
       - supports-color
       - terser
 
-  wcwidth@1.0.1:
+  wait-on@8.0.4(debug@4.4.1):
     dependencies:
-      defaults: 1.0.4
+      axios: 1.11.0(debug@4.4.1)
+      joi: 17.13.3
+      lodash: 4.17.21
+      minimist: 1.2.8
+      rxjs: 7.8.2
+    transitivePeerDependencies:
+      - debug
 
   web-namespaces@2.0.1: {}
 
@@ -15057,49 +19249,45 @@ snapshots:
       tr46: 1.0.1
       webidl-conversions: 4.0.2
 
-  which-boxed-primitive@1.0.2:
+  which-boxed-primitive@1.1.1:
     dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
 
-  which-builtin-type@1.1.3:
+  which-builtin-type@1.2.1:
     dependencies:
-      function.prototype.name: 1.1.6
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
       has-tostringtag: 1.0.2
-      is-async-function: 2.0.0
-      is-date-object: 1.0.5
-      is-finalizationregistry: 1.0.2
-      is-generator-function: 1.0.10
-      is-regex: 1.1.4
-      is-weakref: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.0
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
       isarray: 2.0.5
-      which-boxed-primitive: 1.0.2
+      which-boxed-primitive: 1.1.1
       which-collection: 1.0.2
-      which-typed-array: 1.1.15
+      which-typed-array: 1.1.19
 
   which-collection@1.0.2:
     dependencies:
       is-map: 2.0.3
       is-set: 2.0.3
       is-weakmap: 2.0.2
-      is-weakset: 2.0.3
-
-  which-module@2.0.1: {}
-
-  which-pm@2.0.0:
-    dependencies:
-      load-yaml-file: 0.2.0
-      path-exists: 4.0.0
+      is-weakset: 2.0.4
 
-  which-typed-array@1.1.15:
+  which-typed-array@1.1.19:
     dependencies:
       available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
       has-tostringtag: 1.0.2
 
   which@1.3.1:
@@ -15110,6 +19298,10 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.1
+
   why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
@@ -15137,7 +19329,7 @@ snapshots:
 
   wrappy@1.0.2: {}
 
-  y18n@4.0.3: {}
+  ws@8.18.3: {}
 
   y18n@5.0.8: {}
 
@@ -15147,55 +19339,49 @@ snapshots:
 
   yallist@4.0.0: {}
 
-  yaml@1.10.2: {}
-
-  yaml@2.4.3: {}
+  yallist@5.0.0: {}
 
-  yargs-parser@18.1.3:
-    dependencies:
-      camelcase: 5.3.1
-      decamelize: 1.2.0
+  yaml@2.8.1: {}
 
   yargs-parser@20.2.9: {}
 
   yargs-parser@21.1.1: {}
 
-  yargs@15.4.1:
-    dependencies:
-      cliui: 6.0.0
-      decamelize: 1.2.0
-      find-up: 4.1.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      require-main-filename: 2.0.0
-      set-blocking: 2.0.0
-      string-width: 4.2.3
-      which-module: 2.0.1
-      y18n: 4.0.3
-      yargs-parser: 18.1.3
-
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.2
+      escalade: 3.2.0
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
       y18n: 5.0.8
       yargs-parser: 21.1.1
 
+  yauzl@2.10.0:
+    dependencies:
+      buffer-crc32: 0.2.13
+      fd-slicer: 1.1.0
+
   yn@3.1.1: {}
 
   yocto-queue@0.1.0: {}
 
+  yoctocolors-cjs@2.1.2: {}
+
+  yoctocolors@2.1.1: {}
+
   yoga-layout-prebuilt@1.10.0:
     dependencies:
       '@types/yoga-layout': 1.9.2
 
   yoga-wasm-web@0.1.2: {}
 
-  zod@3.21.4: {}
+  zod-to-json-schema@3.24.6(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
 
   zod@3.23.8: {}
 
+  zod@3.25.76: {}
+
   zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 559a69b655e..2e9981834f4 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,7 @@
 packages:
   - "apps/*"
   - "packages/*"
-  - "templates/*"
   - "!**/test/**"
+  - "!**/fixtures/**"
+  - "!**/temp/**"
+  - "!packages/tests/temp/**"
diff --git a/prettier.config.cjs b/prettier.config.cjs
index aca2af710c0..69e23de8f23 100644
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@@ -10,6 +10,8 @@ module.exports = {
     "^(next/(.*)$)|^(next$)",
     "<THIRD_PARTY_MODULES>",
     "",
+    "^@workspace/(.*)$",
+    "",
     "^types$",
     "^@/types/(.*)$",
     "^@/config/(.*)$",
@@ -20,6 +22,7 @@ module.exports = {
     "^@/registry/(.*)$",
     "^@/styles/(.*)$",
     "^@/app/(.*)$",
+    "^@/www/(.*)$",
     "",
     "^[./]",
   ],
diff --git a/registries.json b/registries.json
new file mode 120000
index 00000000000..66d4d5be086
--- /dev/null
+++ b/registries.json
@@ -0,0 +1 @@
+apps/v4/public/r/registries.json
\ No newline at end of file
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 74795a25ede..2947cd26a7f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,14 +5,11 @@ module.exports = {
   darkMode: ["class"],
   content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
   theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
     extend: {
+      fontFamily: {
+        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+        mono: ["var(--font-geist-mono)", ...fontFamily.mono],
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
@@ -47,6 +44,16 @@ module.exports = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
       },
       borderRadius: {
         xl: "calc(var(--radius) + 4px)",
@@ -54,10 +61,6 @@ module.exports = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
-      fontFamily: {
-        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
-        // mono: ["var(--font-mono)", ...fontFamily.mono],
-      },
       keyframes: {
         "accordion-down": {
           from: { height: "0" },
@@ -79,5 +82,8 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/container-queries"),
+  ],
 }
diff --git a/templates/monorepo-next/.eslintrc.js b/templates/monorepo-next/.eslintrc.js
new file mode 100644
index 00000000000..781274d0137
--- /dev/null
+++ b/templates/monorepo-next/.eslintrc.js
@@ -0,0 +1,10 @@
+// This configuration only applies to the package manager root.
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  ignorePatterns: ["apps/**", "packages/**"],
+  extends: ["@workspace/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+}
diff --git a/templates/monorepo-next/.gitignore b/templates/monorepo-next/.gitignore
new file mode 100644
index 00000000000..4133babc264
--- /dev/null
+++ b/templates/monorepo-next/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+
+
+# Debug
+npm-debug.log*
+
+# Misc
+.DS_Store
+*.pem
diff --git a/templates/monorepo-next/.npmrc b/templates/monorepo-next/.npmrc
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/templates/monorepo-next/.vscode/settings.json b/templates/monorepo-next/.vscode/settings.json
new file mode 100644
index 00000000000..61683dde1e0
--- /dev/null
+++ b/templates/monorepo-next/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "tailwindCSS.experimental.configFile": "packages/ui/src/styles/globals.css"
+}
diff --git a/templates/monorepo-next/README.md b/templates/monorepo-next/README.md
new file mode 100644
index 00000000000..226e3c4172c
--- /dev/null
+++ b/templates/monorepo-next/README.md
@@ -0,0 +1,31 @@
+# shadcn/ui monorepo template
+
+This template is for creating a monorepo with shadcn/ui.
+
+## Usage
+
+```bash
+pnpm dlx shadcn@latest init
+```
+
+## Adding components
+
+To add components to your app, run the following command at the root of your `web` app:
+
+```bash
+pnpm dlx shadcn@latest add button -c apps/web
+```
+
+This will place the ui components in the `packages/ui/src/components` directory.
+
+## Tailwind
+
+Your `tailwind.config.ts` and `globals.css` are already set up to use the components from the `ui` package.
+
+## Using components
+
+To use the components in your app, import them from the `ui` package.
+
+```tsx
+import { Button } from "@workspace/ui/components/button"
+```
diff --git a/templates/monorepo-next/apps/web/app/favicon.ico b/templates/monorepo-next/apps/web/app/favicon.ico
new file mode 100644
index 00000000000..718d6fea483
Binary files /dev/null and b/templates/monorepo-next/apps/web/app/favicon.ico differ
diff --git a/templates/monorepo-next/apps/web/app/layout.tsx b/templates/monorepo-next/apps/web/app/layout.tsx
new file mode 100644
index 00000000000..7a807d4e007
--- /dev/null
+++ b/templates/monorepo-next/apps/web/app/layout.tsx
@@ -0,0 +1,30 @@
+import { Geist, Geist_Mono } from "next/font/google"
+
+import "@workspace/ui/globals.css"
+import { Providers } from "@/components/providers"
+
+const fontSans = Geist({
+  subsets: ["latin"],
+  variable: "--font-sans",
+})
+
+const fontMono = Geist_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+})
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased `}
+      >
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
diff --git a/templates/monorepo-next/apps/web/app/page.tsx b/templates/monorepo-next/apps/web/app/page.tsx
new file mode 100644
index 00000000000..e4f893aaee1
--- /dev/null
+++ b/templates/monorepo-next/apps/web/app/page.tsx
@@ -0,0 +1,12 @@
+import { Button } from "@workspace/ui/components/button"
+
+export default function Page() {
+  return (
+    <div className="flex items-center justify-center min-h-svh">
+      <div className="flex flex-col items-center justify-center gap-4">
+        <h1 className="text-2xl font-bold">Hello World</h1>
+        <Button size="sm">Button</Button>
+      </div>
+    </div>
+  )
+}
diff --git a/templates/monorepo-next/apps/web/components.json b/templates/monorepo-next/apps/web/components.json
new file mode 100644
index 00000000000..1fd99d3103a
--- /dev/null
+++ b/templates/monorepo-next/apps/web/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}
diff --git a/templates/monorepo-next/apps/web/components/.gitkeep b/templates/monorepo-next/apps/web/components/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/templates/monorepo-next/apps/web/components/providers.tsx b/templates/monorepo-next/apps/web/components/providers.tsx
new file mode 100644
index 00000000000..25e8677d80c
--- /dev/null
+++ b/templates/monorepo-next/apps/web/components/providers.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      enableColorScheme
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}
diff --git a/templates/monorepo-next/apps/web/eslint.config.js b/templates/monorepo-next/apps/web/eslint.config.js
new file mode 100644
index 00000000000..5062ee3b28c
--- /dev/null
+++ b/templates/monorepo-next/apps/web/eslint.config.js
@@ -0,0 +1,4 @@
+import { nextJsConfig } from "@workspace/eslint-config/next-js"
+
+/** @type {import("eslint").Linter.Config} */
+export default nextJsConfig
diff --git a/templates/monorepo-next/apps/web/hooks/.gitkeep b/templates/monorepo-next/apps/web/hooks/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/templates/monorepo-next/apps/web/lib/.gitkeep b/templates/monorepo-next/apps/web/lib/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/templates/monorepo-next/apps/web/next-env.d.ts b/templates/monorepo-next/apps/web/next-env.d.ts
new file mode 100644
index 00000000000..1b3be0840f3
--- /dev/null
+++ b/templates/monorepo-next/apps/web/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/templates/monorepo-next/apps/web/next.config.mjs b/templates/monorepo-next/apps/web/next.config.mjs
new file mode 100644
index 00000000000..bd167d93a3b
--- /dev/null
+++ b/templates/monorepo-next/apps/web/next.config.mjs
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@workspace/ui"],
+}
+
+export default nextConfig
diff --git a/templates/monorepo-next/apps/web/package.json b/templates/monorepo-next/apps/web/package.json
new file mode 100644
index 00000000000..ba78ea9de86
--- /dev/null
+++ b/templates/monorepo-next/apps/web/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "web",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@workspace/ui": "workspace:*",
+    "lucide-react": "^0.475.0",
+    "next": "^15.4.5",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.9",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@workspace/eslint-config": "workspace:^",
+    "@workspace/typescript-config": "workspace:*",
+    "typescript": "^5.9.2"
+  }
+}
diff --git a/templates/monorepo-next/apps/web/postcss.config.mjs b/templates/monorepo-next/apps/web/postcss.config.mjs
new file mode 100644
index 00000000000..535dec4aedd
--- /dev/null
+++ b/templates/monorepo-next/apps/web/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from "@workspace/ui/postcss.config";
\ No newline at end of file
diff --git a/templates/monorepo-next/apps/web/tsconfig.json b/templates/monorepo-next/apps/web/tsconfig.json
new file mode 100644
index 00000000000..8d6f25eecac
--- /dev/null
+++ b/templates/monorepo-next/apps/web/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "@workspace/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "@workspace/ui/*": ["../../packages/ui/src/*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "next.config.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}
diff --git a/templates/monorepo-next/package.json b/templates/monorepo-next/package.json
new file mode 100644
index 00000000000..00a385492f2
--- /dev/null
+++ b/templates/monorepo-next/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "shadcn-ui-monorepo",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo lint",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+  },
+  "devDependencies": {
+    "@workspace/eslint-config": "workspace:*",
+    "@workspace/typescript-config": "workspace:*",
+    "prettier": "^3.6.2",
+    "turbo": "^2.5.5",
+    "typescript": "5.7.3"
+  },
+  "packageManager": "pnpm@10.4.1",
+  "engines": {
+    "node": ">=20"
+  }
+}
diff --git a/templates/monorepo-next/packages/eslint-config/README.md b/templates/monorepo-next/packages/eslint-config/README.md
new file mode 100644
index 00000000000..4a414ab1c93
--- /dev/null
+++ b/templates/monorepo-next/packages/eslint-config/README.md
@@ -0,0 +1,3 @@
+# `@workspace/eslint-config`
+
+Shared eslint configuration for the workspace.
diff --git a/templates/monorepo-next/packages/eslint-config/base.js b/templates/monorepo-next/packages/eslint-config/base.js
new file mode 100644
index 00000000000..b0f1eaea932
--- /dev/null
+++ b/templates/monorepo-next/packages/eslint-config/base.js
@@ -0,0 +1,32 @@
+import js from "@eslint/js"
+import eslintConfigPrettier from "eslint-config-prettier"
+import onlyWarn from "eslint-plugin-only-warn"
+import turboPlugin from "eslint-plugin-turbo"
+import tseslint from "typescript-eslint"
+
+/**
+ * A shared ESLint configuration for the repository.
+ *
+ * @type {import("eslint").Linter.Config}
+ * */
+export const config = [
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      turbo: turboPlugin,
+    },
+    rules: {
+      "turbo/no-undeclared-env-vars": "warn",
+    },
+  },
+  {
+    plugins: {
+      onlyWarn,
+    },
+  },
+  {
+    ignores: ["dist/**"],
+  },
+]
diff --git a/templates/monorepo-next/packages/eslint-config/next.js b/templates/monorepo-next/packages/eslint-config/next.js
new file mode 100644
index 00000000000..e40fffcd1f1
--- /dev/null
+++ b/templates/monorepo-next/packages/eslint-config/next.js
@@ -0,0 +1,51 @@
+import js from "@eslint/js"
+import pluginNext from "@next/eslint-plugin-next"
+import eslintConfigPrettier from "eslint-config-prettier"
+import pluginReact from "eslint-plugin-react"
+import pluginReactHooks from "eslint-plugin-react-hooks"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+
+import { config as baseConfig } from "./base.js"
+
+/**
+ * A custom ESLint configuration for libraries that use Next.js.
+ *
+ * @type {import("eslint").Linter.Config}
+ * */
+export const nextJsConfig = [
+  ...baseConfig,
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    ...pluginReact.configs.flat.recommended,
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
+      },
+    },
+  },
+  {
+    plugins: {
+      "@next/next": pluginNext,
+    },
+    rules: {
+      ...pluginNext.configs.recommended.rules,
+      ...pluginNext.configs["core-web-vitals"].rules,
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    settings: { react: { version: "detect" } },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      // React scope no longer necessary with new JSX transform.
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+    },
+  },
+]
diff --git a/templates/monorepo-next/packages/eslint-config/package.json b/templates/monorepo-next/packages/eslint-config/package.json
new file mode 100644
index 00000000000..f627cd5b156
--- /dev/null
+++ b/templates/monorepo-next/packages/eslint-config/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@workspace/eslint-config",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "exports": {
+    "./base": "./base.js",
+    "./next-js": "./next.js",
+    "./react-internal": "./react-internal.js"
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "^15.4.5",
+    "@typescript-eslint/eslint-plugin": "^8.39.0",
+    "@typescript-eslint/parser": "^8.39.0",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-turbo": "^2.5.5",
+    "globals": "^15.15.0",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.39.0"
+  }
+}
diff --git a/templates/monorepo-next/packages/eslint-config/react-internal.js b/templates/monorepo-next/packages/eslint-config/react-internal.js
new file mode 100644
index 00000000000..dda3143ea78
--- /dev/null
+++ b/templates/monorepo-next/packages/eslint-config/react-internal.js
@@ -0,0 +1,41 @@
+import js from "@eslint/js"
+import eslintConfigPrettier from "eslint-config-prettier"
+import pluginReact from "eslint-plugin-react"
+import pluginReactHooks from "eslint-plugin-react-hooks"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+
+import { config as baseConfig } from "./base.js"
+
+/**
+ * A custom ESLint configuration for libraries that use React.
+ *
+ * @type {import("eslint").Linter.Config} */
+export const config = [
+  ...baseConfig,
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
+        ...globals.browser,
+      },
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    settings: { react: { version: "detect" } },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      // React scope no longer necessary with new JSX transform.
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+    },
+  },
+]
diff --git a/templates/monorepo-next/packages/typescript-config/README.md b/templates/monorepo-next/packages/typescript-config/README.md
new file mode 100644
index 00000000000..e5f0c936ca2
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/README.md
@@ -0,0 +1,3 @@
+# `@workspace/typescript-config`
+
+Shared typescript configuration for the workspace.
diff --git a/templates/monorepo-next/packages/typescript-config/base.json b/templates/monorepo-next/packages/typescript-config/base.json
new file mode 100644
index 00000000000..0f80cfd67c8
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/base.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "isolatedModules": true,
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "module": "NodeNext",
+    "moduleDetection": "force",
+    "moduleResolution": "NodeNext",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022"
+  }
+}
diff --git a/templates/monorepo-next/packages/typescript-config/nextjs.json b/templates/monorepo-next/packages/typescript-config/nextjs.json
new file mode 100644
index 00000000000..44f4289918f
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/nextjs.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Next.js",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowJs": true,
+    "jsx": "preserve",
+    "noEmit": true
+  }
+}
diff --git a/templates/monorepo-next/packages/typescript-config/package.json b/templates/monorepo-next/packages/typescript-config/package.json
new file mode 100644
index 00000000000..94501168888
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@workspace/typescript-config",
+  "version": "0.0.0",
+  "private": true,
+  "license": "PROPRIETARY",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/templates/monorepo-next/packages/typescript-config/react-library.json b/templates/monorepo-next/packages/typescript-config/react-library.json
new file mode 100644
index 00000000000..a755ffea05e
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/react-library.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+  }
+}
diff --git a/templates/monorepo-next/packages/ui/components.json b/templates/monorepo-next/packages/ui/components.json
new file mode 100644
index 00000000000..764877cc558
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@workspace/ui/components",
+    "utils": "@workspace/ui/lib/utils",
+    "hooks": "@workspace/ui/hooks",
+    "lib": "@workspace/ui/lib",
+    "ui": "@workspace/ui/components"
+  }
+}
diff --git a/templates/monorepo-next/packages/ui/eslint.config.js b/templates/monorepo-next/packages/ui/eslint.config.js
new file mode 100644
index 00000000000..69da3ed0abe
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/eslint.config.js
@@ -0,0 +1,4 @@
+import { config } from "@workspace/eslint-config/react-internal"
+
+/** @type {import("eslint").Linter.Config} */
+export default config
diff --git a/templates/monorepo-next/packages/ui/package.json b/templates/monorepo-next/packages/ui/package.json
new file mode 100644
index 00000000000..944ae93b63b
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@workspace/ui",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.475.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.3.6",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "@turbo/gen": "^2.5.5",
+    "@types/node": "^20.19.9",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@workspace/eslint-config": "workspace:*",
+    "@workspace/typescript-config": "workspace:*",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.9.2"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./postcss.config": "./postcss.config.mjs",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  }
+}
diff --git a/templates/monorepo-next/packages/ui/postcss.config.mjs b/templates/monorepo-next/packages/ui/postcss.config.mjs
new file mode 100644
index 00000000000..4ae682d87fc
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/postcss.config.mjs
@@ -0,0 +1,6 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+    plugins: { "@tailwindcss/postcss": {} },
+};
+
+export default config;
diff --git a/templates/monorepo-next/packages/ui/src/components/.gitkeep b/templates/monorepo-next/packages/ui/src/components/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/templates/monorepo-next/packages/ui/src/components/button.tsx b/templates/monorepo-next/packages/ui/src/components/button.tsx
new file mode 100644
index 00000000000..c77fd72a1ff
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/src/components/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@workspace/ui/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/templates/monorepo-next/packages/ui/src/hooks/.gitkeep b/templates/monorepo-next/packages/ui/src/hooks/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/templates/monorepo-next/packages/ui/src/lib/utils.ts b/templates/monorepo-next/packages/ui/src/lib/utils.ts
new file mode 100644
index 00000000000..bd0c391ddd1
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/templates/monorepo-next/packages/ui/src/styles/globals.css b/templates/monorepo-next/packages/ui/src/styles/globals.css
new file mode 100644
index 00000000000..a5c6ce38a72
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/src/styles/globals.css
@@ -0,0 +1,127 @@
+@import "tailwindcss";
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/templates/monorepo-next/packages/ui/tsconfig.json b/templates/monorepo-next/packages/ui/tsconfig.json
new file mode 100644
index 00000000000..0bedc71daf5
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@workspace/typescript-config/react-library.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@workspace/ui/*": ["./src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/monorepo-next/packages/ui/tsconfig.lint.json b/templates/monorepo-next/packages/ui/tsconfig.lint.json
new file mode 100644
index 00000000000..eda508904dd
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/tsconfig.lint.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@workspace/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/monorepo-next/pnpm-lock.yaml b/templates/monorepo-next/pnpm-lock.yaml
new file mode 100644
index 00000000000..7dc13dc9b8f
--- /dev/null
+++ b/templates/monorepo-next/pnpm-lock.yaml
@@ -0,0 +1,4924 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      '@workspace/eslint-config':
+        specifier: workspace:*
+        version: link:packages/eslint-config
+      '@workspace/typescript-config':
+        specifier: workspace:*
+        version: link:packages/typescript-config
+      prettier:
+        specifier: ^3.6.2
+        version: 3.6.2
+      turbo:
+        specifier: ^2.5.5
+        version: 2.5.5
+      typescript:
+        specifier: 5.7.3
+        version: 5.7.3
+
+  apps/web:
+    dependencies:
+      '@workspace/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
+      lucide-react:
+        specifier: ^0.475.0
+        version: 0.475.0(react@19.1.1)
+      next:
+        specifier: ^15.4.5
+        version: 15.4.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react:
+        specifier: ^19.1.1
+        version: 19.1.1
+      react-dom:
+        specifier: ^19.1.1
+        version: 19.1.1(react@19.1.1)
+    devDependencies:
+      '@types/node':
+        specifier: ^20.19.9
+        version: 20.19.9
+      '@types/react':
+        specifier: ^19.1.9
+        version: 19.1.9
+      '@types/react-dom':
+        specifier: ^19.1.7
+        version: 19.1.7(@types/react@19.1.9)
+      '@workspace/eslint-config':
+        specifier: workspace:^
+        version: link:../../packages/eslint-config
+      '@workspace/typescript-config':
+        specifier: workspace:*
+        version: link:../../packages/typescript-config
+      typescript:
+        specifier: ^5.9.2
+        version: 5.9.2
+
+  packages/eslint-config:
+    devDependencies:
+      '@next/eslint-plugin-next':
+        specifier: ^15.4.5
+        version: 15.4.5
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^8.39.0
+        version: 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/parser':
+        specifier: ^8.39.0
+        version: 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint:
+        specifier: ^9.32.0
+        version: 9.32.0(jiti@2.5.1)
+      eslint-config-prettier:
+        specifier: ^9.1.2
+        version: 9.1.2(eslint@9.32.0(jiti@2.5.1))
+      eslint-plugin-only-warn:
+        specifier: ^1.1.0
+        version: 1.1.0
+      eslint-plugin-react:
+        specifier: ^7.37.5
+        version: 7.37.5(eslint@9.32.0(jiti@2.5.1))
+      eslint-plugin-react-hooks:
+        specifier: ^5.2.0
+        version: 5.2.0(eslint@9.32.0(jiti@2.5.1))
+      eslint-plugin-turbo:
+        specifier: ^2.5.5
+        version: 2.5.5(eslint@9.32.0(jiti@2.5.1))(turbo@2.5.5)
+      globals:
+        specifier: ^15.15.0
+        version: 15.15.0
+      typescript:
+        specifier: ^5.9.2
+        version: 5.9.2
+      typescript-eslint:
+        specifier: ^8.39.0
+        version: 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+
+  packages/typescript-config: {}
+
+  packages/ui:
+    dependencies:
+      '@radix-ui/react-slot':
+        specifier: ^1.2.3
+        version: 1.2.3(@types/react@19.1.9)(react@19.1.1)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.475.0
+        version: 0.475.0(react@19.1.1)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react:
+        specifier: ^19.1.1
+        version: 19.1.1
+      react-dom:
+        specifier: ^19.1.1
+        version: 19.1.1(react@19.1.1)
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.3.1
+      tw-animate-css:
+        specifier: ^1.3.6
+        version: 1.3.6
+      zod:
+        specifier: ^3.25.76
+        version: 3.25.76
+    devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.1.11
+        version: 4.1.11
+      '@turbo/gen':
+        specifier: ^2.5.5
+        version: 2.5.5(@types/node@20.19.9)(typescript@5.9.2)
+      '@types/node':
+        specifier: ^20.19.9
+        version: 20.19.9
+      '@types/react':
+        specifier: ^19.1.9
+        version: 19.1.9
+      '@types/react-dom':
+        specifier: ^19.1.7
+        version: 19.1.7(@types/react@19.1.9)
+      '@workspace/eslint-config':
+        specifier: workspace:*
+        version: link:../eslint-config
+      '@workspace/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      tailwindcss:
+        specifier: ^4.1.11
+        version: 4.1.11
+      typescript:
+        specifier: ^5.9.2
+        version: 5.9.2
+
+packages:
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
+  '@babel/runtime-corejs3@7.28.2':
+    resolution: {integrity: sha512-FVFaVs2/dZgD3Y9ZD+AKNKjyGKzwu0C54laAXWUXgLcVXcCX6YZ6GhK2cp7FogSN2OA0Fu+QT8dP3FUdo9ShSQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@cspotcode/source-map-support@0.8.1':
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+
+  '@emnapi/runtime@1.4.5':
+    resolution: {integrity: sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==}
+
+  '@eslint-community/eslint-utils@4.7.0':
+    resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.21.0':
+    resolution: {integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.3.0':
+    resolution: {integrity: sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.15.1':
+    resolution: {integrity: sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.1':
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.32.0':
+    resolution: {integrity: sha512-BBpRFZK3eX6uMLKz8WxFOBIFFcGFJ/g8XuwjTHCqHROSIsopI+ddn/d5Cfh36+7+e5edVS8dbSHnBNhrLEX0zg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.6':
+    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.3.4':
+    resolution: {integrity: sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.6':
+    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.3.1':
+    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
+    engines: {node: '>=18.18'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@img/sharp-darwin-arm64@0.34.3':
+    resolution: {integrity: sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.3':
+    resolution: {integrity: sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.0':
+    resolution: {integrity: sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.0':
+    resolution: {integrity: sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.2.0':
+    resolution: {integrity: sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.2.0':
+    resolution: {integrity: sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-ppc64@1.2.0':
+    resolution: {integrity: sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.2.0':
+    resolution: {integrity: sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.2.0':
+    resolution: {integrity: sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
+    resolution: {integrity: sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.0':
+    resolution: {integrity: sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.34.3':
+    resolution: {integrity: sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.34.3':
+    resolution: {integrity: sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-ppc64@0.34.3':
+    resolution: {integrity: sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.34.3':
+    resolution: {integrity: sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.34.3':
+    resolution: {integrity: sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.34.3':
+    resolution: {integrity: sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.34.3':
+    resolution: {integrity: sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.34.3':
+    resolution: {integrity: sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.3':
+    resolution: {integrity: sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.3':
+    resolution: {integrity: sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.3':
+    resolution: {integrity: sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
+  '@jridgewell/gen-mapping@0.3.12':
+    resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.4':
+    resolution: {integrity: sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==}
+
+  '@jridgewell/trace-mapping@0.3.29':
+    resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
+
+  '@jridgewell/trace-mapping@0.3.9':
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+
+  '@next/env@15.4.5':
+    resolution: {integrity: sha512-ruM+q2SCOVCepUiERoxOmZY9ZVoecR3gcXNwCYZRvQQWRjhOiPJGmQ2fAiLR6YKWXcSAh7G79KEFxN3rwhs4LQ==}
+
+  '@next/eslint-plugin-next@15.4.5':
+    resolution: {integrity: sha512-YhbrlbEt0m4jJnXHMY/cCUDBAWgd5SaTa5mJjzOt82QwflAFfW/h3+COp2TfVSzhmscIZ5sg2WXt3MLziqCSCw==}
+
+  '@next/swc-darwin-arm64@15.4.5':
+    resolution: {integrity: sha512-84dAN4fkfdC7nX6udDLz9GzQlMUwEMKD7zsseXrl7FTeIItF8vpk1lhLEnsotiiDt+QFu3O1FVWnqwcRD2U3KA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@15.4.5':
+    resolution: {integrity: sha512-CL6mfGsKuFSyQjx36p2ftwMNSb8PQog8y0HO/ONLdQqDql7x3aJb/wB+LA651r4we2pp/Ck+qoRVUeZZEvSurA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@15.4.5':
+    resolution: {integrity: sha512-1hTVd9n6jpM/thnDc5kYHD1OjjWYpUJrJxY4DlEacT7L5SEOXIifIdTye6SQNNn8JDZrcN+n8AWOmeJ8u3KlvQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-arm64-musl@15.4.5':
+    resolution: {integrity: sha512-4W+D/nw3RpIwGrqpFi7greZ0hjrCaioGErI7XHgkcTeWdZd146NNu1s4HnaHonLeNTguKnL2Urqvj28UJj6Gqw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-x64-gnu@15.4.5':
+    resolution: {integrity: sha512-N6Mgdxe/Cn2K1yMHge6pclffkxzbSGOydXVKYOjYqQXZYjLCfN/CuFkaYDeDHY2VBwSHyM2fUjYBiQCIlxIKDA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-linux-x64-musl@15.4.5':
+    resolution: {integrity: sha512-YZ3bNDrS8v5KiqgWE0xZQgtXgCTUacgFtnEgI4ccotAASwSvcMPDLua7BWLuTfucoRv6mPidXkITJLd8IdJplQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-win32-arm64-msvc@15.4.5':
+    resolution: {integrity: sha512-9Wr4t9GkZmMNcTVvSloFtjzbH4vtT4a8+UHqDoVnxA5QyfWe6c5flTH1BIWPGNWSUlofc8dVJAE7j84FQgskvQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@15.4.5':
+    resolution: {integrity: sha512-voWk7XtGvlsP+w8VBz7lqp8Y+dYw/MTI4KeS0gTVtfdhdJ5QwhXLmNrndFOin/MDoCvUaLWMkYKATaCoUkt2/A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@tailwindcss/node@4.1.11':
+    resolution: {integrity: sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.11':
+    resolution: {integrity: sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+    resolution: {integrity: sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
+    resolution: {integrity: sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+    resolution: {integrity: sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+    resolution: {integrity: sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+    resolution: {integrity: sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+    resolution: {integrity: sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+    resolution: {integrity: sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+    resolution: {integrity: sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+    resolution: {integrity: sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+    resolution: {integrity: sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+    resolution: {integrity: sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.11':
+    resolution: {integrity: sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.11':
+    resolution: {integrity: sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==}
+
+  '@tootallnate/quickjs-emscripten@0.23.0':
+    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
+
+  '@tsconfig/node10@1.0.11':
+    resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
+
+  '@tsconfig/node12@1.0.11':
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+
+  '@tsconfig/node14@1.0.3':
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+
+  '@tsconfig/node16@1.0.4':
+    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+
+  '@turbo/gen@2.5.5':
+    resolution: {integrity: sha512-8zay4rVILdeTRLBR3rVVRLmLpvQrektMPXjwK9aze86nVwcLYxrCBYghRs88SOxk2r1qlwgg/e8UNzdkGB2UdA==}
+    hasBin: true
+
+  '@turbo/workspaces@2.5.5':
+    resolution: {integrity: sha512-Gye68+szmOp96xMvmondTRQYcYvevDqUP9JuN9jC6kqzFel7U1pJ/hoPvyD3WGQNxyKsdF+wJ5fvNaYXkzr6tQ==}
+    hasBin: true
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/glob@7.2.0':
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+
+  '@types/inquirer@6.5.0':
+    resolution: {integrity: sha512-rjaYQ9b9y/VFGOpqBEXRavc3jh0a+e6evAbI31tMda8VlPaSy0AZJfXsvmIe3wklc7W6C3zCSfleuMXR7NOyXw==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/minimatch@6.0.0':
+    resolution: {integrity: sha512-zmPitbQ8+6zNutpwgcQuLcsEpn/Cj54Kbn7L5pX0Os5kdWplB7xPgEh/g+SWOB/qmows2gpuCaPyduq8ZZRnxA==}
+    deprecated: This is a stub types definition. minimatch provides its own type definitions, so you do not need this installed.
+
+  '@types/node@20.19.9':
+    resolution: {integrity: sha512-cuVNgarYWZqxRJDQHEB58GEONhOK79QVR/qYx4S7kcUObQvUwvFnYxJuuHUKm2aieN9X3yZB4LZsuYNU1Qphsw==}
+
+  '@types/react-dom@19.1.7':
+    resolution: {integrity: sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==}
+    peerDependencies:
+      '@types/react': ^19.0.0
+
+  '@types/react@19.1.9':
+    resolution: {integrity: sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==}
+
+  '@types/through@0.0.33':
+    resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
+
+  '@types/tinycolor2@1.4.6':
+    resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
+
+  '@typescript-eslint/eslint-plugin@8.39.0':
+    resolution: {integrity: sha512-bhEz6OZeUR+O/6yx9Jk6ohX6H9JSFTaiY0v9/PuKT3oGK0rn0jNplLmyFUGV+a9gfYnVNwGDwS/UkLIuXNb2Rw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.39.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/parser@8.39.0':
+    resolution: {integrity: sha512-g3WpVQHngx0aLXn6kfIYCZxM6rRJlWzEkVpqEFLT3SgEDsp9cpCbxxgwnE504q4H+ruSDh/VGS6nqZIDynP+vg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.39.0':
+    resolution: {integrity: sha512-CTzJqaSq30V/Z2Og9jogzZt8lJRR5TKlAdXmWgdu4hgcC9Kww5flQ+xFvMxIBWVNdxJO7OifgdOK4PokMIWPew==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@8.39.0':
+    resolution: {integrity: sha512-8QOzff9UKxOh6npZQ/4FQu4mjdOCGSdO3p44ww0hk8Vu+IGbg0tB/H1LcTARRDzGCC8pDGbh2rissBuuoPgH8A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.39.0':
+    resolution: {integrity: sha512-Fd3/QjmFV2sKmvv3Mrj8r6N8CryYiCS8Wdb/6/rgOXAWGcFuc+VkQuG28uk/4kVNVZBQuuDHEDUpo/pQ32zsIQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/type-utils@8.39.0':
+    resolution: {integrity: sha512-6B3z0c1DXVT2vYA9+z9axjtc09rqKUPRmijD5m9iv8iQpHBRYRMBcgxSiKTZKm6FwWw1/cI4v6em35OsKCiN5Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@8.39.0':
+    resolution: {integrity: sha512-ArDdaOllnCj3yn/lzKn9s0pBQYmmyme/v1HbGIGB0GB/knFI3fWMHloC+oYTJW46tVbYnGKTMDK4ah1sC2v0Kg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.39.0':
+    resolution: {integrity: sha512-ndWdiflRMvfIgQRpckQQLiB5qAKQ7w++V4LlCHwp62eym1HLB/kw7D9f2e8ytONls/jt89TEasgvb+VwnRprsw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/utils@8.39.0':
+    resolution: {integrity: sha512-4GVSvNA0Vx1Ktwvf4sFE+exxJ3QGUorQG1/A5mRfRNZtkBT2xrA/BCO2H0eALx/PnvCS6/vmYwRdDA41EoffkQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/visitor-keys@8.39.0':
+    resolution: {integrity: sha512-ldgiJ+VAhQCfIjeOgu8Kj5nSxds0ktPOSO9p4+0VDH2R2pLvQraaM5Oen2d7NxzMCm+Sn/vJT+mv2H5u6b/3fA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  aggregate-error@3.1.0:
+    resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
+    engines: {node: '>=8'}
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  arg@4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
+
+  array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
+    engines: {node: '>= 0.4'}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  array.prototype.findlast@1.2.5:
+    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.tosorted@1.1.4:
+    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
+    engines: {node: '>= 0.4'}
+
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+
+  ast-types@0.13.4:
+    resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
+    engines: {node: '>=4'}
+
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  basic-ftp@5.0.5:
+    resolution: {integrity: sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==}
+    engines: {node: '>=10.0.0'}
+
+  bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camel-case@3.0.0:
+    resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
+
+  caniuse-lite@1.0.30001731:
+    resolution: {integrity: sha512-lDdp2/wrOmTRWuoB5DpfNkC0rJDU8DqRa6nYL6HK6sytw70QMopt/NIc/9SM7ylItlBWfACXk0tEn37UWM/+mg==}
+
+  chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+
+  chalk@3.0.0:
+    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
+    engines: {node: '>=8'}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  change-case@3.1.0:
+    resolution: {integrity: sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==}
+
+  chardet@0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  clean-stack@2.2.0:
+    resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
+    engines: {node: '>=6'}
+
+  cli-cursor@3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
+
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
+  cli-width@3.0.0:
+    resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
+    engines: {node: '>= 10'}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  clone@1.0.4:
+    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
+    engines: {node: '>=0.8'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
+  color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  constant-case@2.0.0:
+    resolution: {integrity: sha512-eS0N9WwmjTqrOmR3o83F5vW8Z+9R1HnVz3xmzT2PMFug9ly+Au/fxRWlEBSb6LcZwspSsEn9Xs1uw9YgzAg1EQ==}
+
+  core-js-pure@3.45.0:
+    resolution: {integrity: sha512-OtwjqcDpY2X/eIIg1ol/n0y/X8A9foliaNt1dSK0gV3J2/zw+89FcNG3mPK+N8YWts4ZFUPxnrAzsxs/lf8yDA==}
+
+  create-require@1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  data-uri-to-buffer@6.0.2:
+    resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
+    engines: {node: '>= 14'}
+
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+
+  debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  deep-extend@0.6.0:
+    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
+    engines: {node: '>=4.0.0'}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  defaults@1.0.4:
+    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
+  degenerator@5.0.1:
+    resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
+    engines: {node: '>= 14'}
+
+  del@5.1.0:
+    resolution: {integrity: sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==}
+    engines: {node: '>=8'}
+
+  detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
+    engines: {node: '>=8'}
+
+  diff@4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+
+  dot-case@2.1.1:
+    resolution: {integrity: sha512-HnM6ZlFqcajLsyudHq7LeeLDr2rFAVYtDv/hV5qchQEidSck8j9OPUsXY9KwJv/lHMtYlX4DjRQqwFYa+0r8Ug==}
+
+  dotenv@16.0.3:
+    resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
+    engines: {node: '>=12'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  enhanced-resolve@5.18.2:
+    resolution: {integrity: sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==}
+    engines: {node: '>=10.13.0'}
+
+  es-abstract@1.24.0:
+    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
+    engines: {node: '>= 0.4'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-iterator-helpers@1.2.1:
+    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
+  eslint-config-prettier@9.1.2:
+    resolution: {integrity: sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
+  eslint-plugin-only-warn@1.1.0:
+    resolution: {integrity: sha512-2tktqUAT+Q3hCAU0iSf4xAN1k9zOpjK5WO8104mB0rT/dGhOa09582HN5HlbxNbPRZ0THV7nLGvzugcNOSjzfA==}
+    engines: {node: '>=6'}
+
+  eslint-plugin-react-hooks@5.2.0:
+    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+
+  eslint-plugin-react@7.37.5:
+    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+
+  eslint-plugin-turbo@2.5.5:
+    resolution: {integrity: sha512-IlN65X6W7rgK88u5xl1xC+7FIGKA7eyaca0yxZQ9CBNV6keAaqtjZQLw8ZfXdv7T+MzTLYkYOeOHAv8yCRUx4Q==}
+    peerDependencies:
+      eslint: '>6.6.0'
+      turbo: '>2.0.0'
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.32.0:
+    resolution: {integrity: sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  external-editor@3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  figures@3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
+  fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
+  get-uri@6.0.5:
+    resolution: {integrity: sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==}
+    engines: {node: '>= 14'}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  globby@10.0.2:
+    resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
+    engines: {node: '>=8'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  gradient-string@2.0.2:
+    resolution: {integrity: sha512-rEDCuqUQ4tbD78TpzsMtt5OIf0cBCSDWSJtUDaF6JsAh+k0v9r++NzxNEG87oDZx9ZwGhD8DaezR2L/yrw0Jdw==}
+    engines: {node: '>=10'}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+
+  has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  header-case@1.0.1:
+    resolution: {integrity: sha512-i0q9mkOeSuhXw6bGgiQCCBgY/jlZuV/7dZXyZ9c6LcBrqwvT8eT719E9uxE5LiZftdl+z81Ugbg/VvXV4OJOeQ==}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  inquirer@7.3.3:
+    resolution: {integrity: sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==}
+    engines: {node: '>=8.0.0'}
+
+  inquirer@8.2.6:
+    resolution: {integrity: sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==}
+    engines: {node: '>=12.0.0'}
+
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  ip-address@9.0.5:
+    resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
+    engines: {node: '>= 12'}
+
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
+  is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
+    engines: {node: '>= 0.4'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-interactive@1.0.0:
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
+
+  is-lower-case@1.1.3:
+    resolution: {integrity: sha512-+5A1e/WJpLLXZEDlgz4G//WYSHyQBD32qa4Jd3Lw06qQlv3fJHnp3YIHjTQSGzHMgzmVKz2ZP3rBxTHkPw/lxA==}
+
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-path-cwd@2.2.0:
+    resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
+    engines: {node: '>=6'}
+
+  is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-unicode-supported@0.1.0:
+    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+    engines: {node: '>=10'}
+
+  is-upper-case@1.1.2:
+    resolution: {integrity: sha512-GQYSJMgfeAmVwh9ixyk888l7OIhNAGKtY6QA+IrWlu9MDTCaXmeozOZ2S9Knj7bQwBO/H6J2kb+pbyTUiMNbsw==}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
+  isbinaryfile@4.0.10:
+    resolution: {integrity: sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==}
+    engines: {node: '>= 8.0.0'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  iterator.prototype@1.1.5:
+    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
+    engines: {node: '>= 0.4'}
+
+  jiti@2.5.1:
+    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  jsbn@1.1.0:
+    resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+
+  jsx-ast-utils@3.3.5:
+    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
+    engines: {node: '>=4.0'}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  log-symbols@3.0.0:
+    resolution: {integrity: sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==}
+    engines: {node: '>=8'}
+
+  log-symbols@4.1.0:
+    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+    engines: {node: '>=10'}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  lower-case-first@1.0.2:
+    resolution: {integrity: sha512-UuxaYakO7XeONbKrZf5FEgkantPf5DUqDayzP5VXZrtRPdH86s4kN47I8B3TW10S4QKiE3ziHNf3kRN//okHjA==}
+
+  lower-case@1.1.4:
+    resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
+
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
+  lucide-react@0.475.0:
+    resolution: {integrity: sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
+  make-error@1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+
+  mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mute-stream@0.0.8:
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  netmask@2.0.2:
+    resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
+    engines: {node: '>= 0.4.0'}
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
+  next@15.4.5:
+    resolution: {integrity: sha512-nJ4v+IO9CPmbmcvsPebIoX3Q+S7f6Fu08/dEWu0Ttfa+wVwQRh9epcmsyCPjmL2b8MxC+CkBR97jgDhUUztI3g==}
+    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.51.1
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
+  no-case@2.3.2:
+    resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
+
+  node-plop@0.26.3:
+    resolution: {integrity: sha512-Cov028YhBZ5aB7MdMWJEmwyBig43aGL5WT4vdoB28Oitau1zZAcHUn8Sgfk9HM33TqhtLJ9PlM/O0Mv+QpV/4Q==}
+    engines: {node: '>=8.9.4'}
+
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
+    engines: {node: '>= 0.4'}
+
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  ora@4.1.1:
+    resolution: {integrity: sha512-sjYP8QyVWBpBZWD6Vr1M/KwknSw6kJOz41tvGMlwWeClHBtYKTbHMki1PsLZnxKpXMPbTKv9b3pjQu3REib96A==}
+    engines: {node: '>=8'}
+
+  ora@5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
+    engines: {node: '>=10'}
+
+  os-tmpdir@1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
+
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-map@3.0.0:
+    resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==}
+    engines: {node: '>=8'}
+
+  pac-proxy-agent@7.2.0:
+    resolution: {integrity: sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==}
+    engines: {node: '>= 14'}
+
+  pac-resolver@7.0.1:
+    resolution: {integrity: sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==}
+    engines: {node: '>= 14'}
+
+  param-case@2.1.1:
+    resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  pascal-case@2.0.1:
+    resolution: {integrity: sha512-qjS4s8rBOJa2Xm0jmxXiyh1+OFf6ekCWOvUaRgAQSktzlTbMotS0nmG9gyYAybCWBcuP4fsBeRCKNwGBnMe2OQ==}
+
+  path-case@2.1.1:
+    resolution: {integrity: sha512-Ou0N05MioItesaLr9q8TtHVWmJ6fxWdqKB2RohFmNWVyJ+2zeKIeDNWAN6B/Pe7wpzWChhZX6nONYmOnMeJQ/Q==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  picocolors@1.0.1:
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  proxy-agent@6.5.0:
+    resolution: {integrity: sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==}
+    engines: {node: '>= 14'}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  rc@1.2.8:
+    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
+    hasBin: true
+
+  react-dom@19.1.1:
+    resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
+    peerDependencies:
+      react: ^19.1.1
+
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  react@19.1.1:
+    resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
+    engines: {node: '>=0.10.0'}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
+  registry-auth-token@3.3.2:
+    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
+
+  registry-url@3.1.0:
+    resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==}
+    engines: {node: '>=0.10.0'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  resolve@2.0.0-next.5:
+    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
+    hasBin: true
+
+  restore-cursor@3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  run-async@2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rxjs@6.6.7:
+    resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
+    engines: {npm: '>=2.0.0'}
+
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  scheduler@0.26.0:
+    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.6.2:
+    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  sentence-case@2.1.1:
+    resolution: {integrity: sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ==}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
+  sharp@0.34.3:
+    resolution: {integrity: sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+
+  snake-case@2.1.0:
+    resolution: {integrity: sha512-FMR5YoPFwOLuh4rRz92dywJjyKYZNLpMn1R5ujVpIYkbA9p01fq8RMg0FkO4M+Yobt4MjHeLTJVm5xFFBHSV2Q==}
+
+  socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
+    engines: {node: '>= 14'}
+
+  socks@2.8.6:
+    resolution: {integrity: sha512-pe4Y2yzru68lXCb38aAqRf5gvN8YdjP1lok5o0J7BOHljkyCGKVz7H3vpVIXKD27rj2giOJ7DwVyk/GWrPHDWA==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  sprintf-js@1.1.3:
+    resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
+
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  swap-case@1.1.2:
+    resolution: {integrity: sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==}
+
+  tailwind-merge@3.3.1:
+    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
+
+  tailwindcss@4.1.11:
+    resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
+
+  tapable@2.2.2:
+    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
+    engines: {node: '>=6'}
+
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+
+  through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+
+  tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+
+  tinygradient@1.1.5:
+    resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==}
+
+  title-case@2.1.1:
+    resolution: {integrity: sha512-EkJoZ2O3zdCz3zJsYCsxyq2OC5hrxR9mfdd5I+w8h/tmFfeOxJ+vvkxsKxdmN0WtS9zLdHEgfgVOiMVgv+Po4Q==}
+
+  tmp@0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-node@10.9.2:
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+
+  tslib@1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  turbo-darwin-64@2.5.5:
+    resolution: {integrity: sha512-RYnTz49u4F5tDD2SUwwtlynABNBAfbyT2uU/brJcyh5k6lDLyNfYKdKmqd3K2ls4AaiALWrFKVSBsiVwhdFNzQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  turbo-darwin-arm64@2.5.5:
+    resolution: {integrity: sha512-Tk+ZeSNdBobZiMw9aFypQt0DlLsWSFWu1ymqsAdJLuPoAH05qCfYtRxE1pJuYHcJB5pqI+/HOxtJoQ40726Btw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  turbo-linux-64@2.5.5:
+    resolution: {integrity: sha512-2/XvMGykD7VgsvWesZZYIIVXMlgBcQy+ZAryjugoTcvJv8TZzSU/B1nShcA7IAjZ0q7OsZ45uP2cOb8EgKT30w==}
+    cpu: [x64]
+    os: [linux]
+
+  turbo-linux-arm64@2.5.5:
+    resolution: {integrity: sha512-DW+8CjCjybu0d7TFm9dovTTVg1VRnlkZ1rceO4zqsaLrit3DgHnN4to4uwyuf9s2V/BwS3IYcRy+HG9BL596Iw==}
+    cpu: [arm64]
+    os: [linux]
+
+  turbo-windows-64@2.5.5:
+    resolution: {integrity: sha512-q5p1BOy8ChtSZfULuF1BhFMYIx6bevXu4fJ+TE/hyNfyHJIfjl90Z6jWdqAlyaFLmn99X/uw+7d6T/Y/dr5JwQ==}
+    cpu: [x64]
+    os: [win32]
+
+  turbo-windows-arm64@2.5.5:
+    resolution: {integrity: sha512-AXbF1KmpHUq3PKQwddMGoKMYhHsy5t1YBQO8HZ04HLMR0rWv9adYlQ8kaeQJTko1Ay1anOBFTqaxfVOOsu7+1Q==}
+    cpu: [arm64]
+    os: [win32]
+
+  turbo@2.5.5:
+    resolution: {integrity: sha512-eZ7wI6KjtT1eBqCnh2JPXWNUAxtoxxfi6VdBdZFvil0ychCOTxbm7YLRBi1JSt7U3c+u3CLxpoPxLdvr/Npr3A==}
+    hasBin: true
+
+  tw-animate-css@1.3.6:
+    resolution: {integrity: sha512-9dy0R9UsYEGmgf26L8UcHiLmSFTHa9+D7+dAt/G/sF5dCnPePZbfgDYinc7/UzAM7g/baVrmS6m9yEpU46d+LA==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
+  typescript-eslint@8.39.0:
+    resolution: {integrity: sha512-lH8FvtdtzcHJCkMOKnN73LIn6SLTpoojgJqDAxPm1jCR14eWSGPX8ul/gggBdPMk/d5+u9V854vTYQ8T5jF/1Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  typescript@5.7.3:
+    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  typescript@5.9.2:
+    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  update-check@1.5.4:
+    resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
+
+  upper-case-first@1.1.2:
+    resolution: {integrity: sha512-wINKYvI3Db8dtjikdAqoBbZoP6Q+PZUyfMR7pmwHzjC2quzSkUq5DmPrTtPEqHaz8AGtmsB4TqwapMTM1QAQOQ==}
+
+  upper-case@1.1.3:
+    resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+
+  validate-npm-package-name@5.0.1:
+    resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  wcwidth@1.0.1:
+    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
+  yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+snapshots:
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.12
+      '@jridgewell/trace-mapping': 0.3.29
+
+  '@babel/runtime-corejs3@7.28.2':
+    dependencies:
+      core-js-pure: 3.45.0
+
+  '@cspotcode/source-map-support@0.8.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+
+  '@emnapi/runtime@1.4.5':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@eslint-community/eslint-utils@4.7.0(eslint@9.32.0(jiti@2.5.1))':
+    dependencies:
+      eslint: 9.32.0(jiti@2.5.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/config-array@0.21.0':
+    dependencies:
+      '@eslint/object-schema': 2.1.6
+      debug: 4.4.1
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.3.0': {}
+
+  '@eslint/core@0.15.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.1':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.1
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.32.0': {}
+
+  '@eslint/object-schema@2.1.6': {}
+
+  '@eslint/plugin-kit@0.3.4':
+    dependencies:
+      '@eslint/core': 0.15.1
+      levn: 0.4.1
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@img/sharp-darwin-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.0
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.0
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.0':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.0
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.0
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.0
+    optional: true
+
+  '@img/sharp-wasm32@0.34.3':
+    dependencies:
+      '@emnapi/runtime': 1.4.5
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.3':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.34.3':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.3':
+    optional: true
+
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
+  '@jridgewell/gen-mapping@0.3.12':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.4
+      '@jridgewell/trace-mapping': 0.3.29
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.4': {}
+
+  '@jridgewell/trace-mapping@0.3.29':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.4
+
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.4
+
+  '@next/env@15.4.5': {}
+
+  '@next/eslint-plugin-next@15.4.5':
+    dependencies:
+      fast-glob: 3.3.1
+
+  '@next/swc-darwin-arm64@15.4.5':
+    optional: true
+
+  '@next/swc-darwin-x64@15.4.5':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@15.4.5':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@15.4.5':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@15.4.5':
+    optional: true
+
+  '@next/swc-linux-x64-musl@15.4.5':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@15.4.5':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@15.4.5':
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.9)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.9
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.9)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.9)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.9
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tailwindcss/node@4.1.11':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      enhanced-resolve: 5.18.2
+      jiti: 2.5.1
+      lightningcss: 1.30.1
+      magic-string: 0.30.17
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.11
+
+  '@tailwindcss/oxide-android-arm64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.11':
+    dependencies:
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-x64': 4.1.11
+      '@tailwindcss/oxide-freebsd-x64': 4.1.11
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.11
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.11
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.11
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.11
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.11
+
+  '@tailwindcss/postcss@4.1.11':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.11
+      '@tailwindcss/oxide': 4.1.11
+      postcss: 8.5.6
+      tailwindcss: 4.1.11
+
+  '@tootallnate/quickjs-emscripten@0.23.0': {}
+
+  '@tsconfig/node10@1.0.11': {}
+
+  '@tsconfig/node12@1.0.11': {}
+
+  '@tsconfig/node14@1.0.3': {}
+
+  '@tsconfig/node16@1.0.4': {}
+
+  '@turbo/gen@2.5.5(@types/node@20.19.9)(typescript@5.9.2)':
+    dependencies:
+      '@turbo/workspaces': 2.5.5
+      commander: 10.0.1
+      fs-extra: 10.1.0
+      inquirer: 8.2.6
+      minimatch: 9.0.5
+      node-plop: 0.26.3
+      picocolors: 1.0.1
+      proxy-agent: 6.5.0
+      ts-node: 10.9.2(@types/node@20.19.9)(typescript@5.9.2)
+      update-check: 1.5.4
+      validate-npm-package-name: 5.0.1
+    transitivePeerDependencies:
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/node'
+      - supports-color
+      - typescript
+
+  '@turbo/workspaces@2.5.5':
+    dependencies:
+      commander: 10.0.1
+      execa: 5.1.1
+      fast-glob: 3.3.3
+      fs-extra: 10.1.0
+      gradient-string: 2.0.2
+      inquirer: 8.2.6
+      js-yaml: 4.1.0
+      ora: 4.1.1
+      picocolors: 1.0.1
+      semver: 7.6.2
+      update-check: 1.5.4
+
+  '@types/estree@1.0.8': {}
+
+  '@types/glob@7.2.0':
+    dependencies:
+      '@types/minimatch': 6.0.0
+      '@types/node': 20.19.9
+
+  '@types/inquirer@6.5.0':
+    dependencies:
+      '@types/through': 0.0.33
+      rxjs: 6.6.7
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/minimatch@6.0.0':
+    dependencies:
+      minimatch: 9.0.5
+
+  '@types/node@20.19.9':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/react-dom@19.1.7(@types/react@19.1.9)':
+    dependencies:
+      '@types/react': 19.1.9
+
+  '@types/react@19.1.9':
+    dependencies:
+      csstype: 3.1.3
+
+  '@types/through@0.0.33':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/tinycolor2@1.4.6': {}
+
+  '@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/scope-manager': 8.39.0
+      '@typescript-eslint/type-utils': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.39.0
+      eslint: 9.32.0(jiti@2.5.1)
+      graphemer: 1.4.0
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.39.0
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.39.0
+      debug: 4.4.1
+      eslint: 9.32.0(jiti@2.5.1)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.39.0(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.39.0
+      debug: 4.4.1
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.39.0':
+    dependencies:
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/visitor-keys': 8.39.0
+
+  '@typescript-eslint/tsconfig-utils@8.39.0(typescript@5.9.2)':
+    dependencies:
+      typescript: 5.9.2
+
+  '@typescript-eslint/type-utils@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      debug: 4.4.1
+      eslint: 9.32.0(jiti@2.5.1)
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.39.0': {}
+
+  '@typescript-eslint/typescript-estree@8.39.0(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.39.0(typescript@5.9.2)
+      '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/visitor-keys': 8.39.0
+      debug: 4.4.1
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.2
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.5.1))
+      '@typescript-eslint/scope-manager': 8.39.0
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
+      eslint: 9.32.0(jiti@2.5.1)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.39.0':
+    dependencies:
+      '@typescript-eslint/types': 8.39.0
+      eslint-visitor-keys: 4.2.1
+
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  agent-base@7.1.4: {}
+
+  aggregate-error@3.1.0:
+    dependencies:
+      clean-stack: 2.2.0
+      indent-string: 4.0.0
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ansi-escapes@4.3.2:
+    dependencies:
+      type-fest: 0.21.3
+
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  arg@4.1.3: {}
+
+  argparse@2.0.1: {}
+
+  array-buffer-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
+
+  array-includes@3.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
+
+  array-union@2.1.0: {}
+
+  array.prototype.findlast@1.2.5:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flat@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flatmap@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.tosorted@1.1.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-shim-unscopables: 1.1.0
+
+  arraybuffer.prototype.slice@1.0.4:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
+  ast-types@0.13.4:
+    dependencies:
+      tslib: 2.8.1
+
+  async-function@1.0.0: {}
+
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  balanced-match@1.0.2: {}
+
+  base64-js@1.5.1: {}
+
+  basic-ftp@5.0.5: {}
+
+  bl@4.1.0:
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.2:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  camel-case@3.0.0:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  caniuse-lite@1.0.30001731: {}
+
+  chalk@2.4.2:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
+  chalk@3.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  change-case@3.1.0:
+    dependencies:
+      camel-case: 3.0.0
+      constant-case: 2.0.0
+      dot-case: 2.1.1
+      header-case: 1.0.1
+      is-lower-case: 1.1.3
+      is-upper-case: 1.1.2
+      lower-case: 1.1.4
+      lower-case-first: 1.0.2
+      no-case: 2.3.2
+      param-case: 2.1.1
+      pascal-case: 2.0.1
+      path-case: 2.1.1
+      sentence-case: 2.1.1
+      snake-case: 2.1.0
+      swap-case: 1.1.2
+      title-case: 2.1.1
+      upper-case: 1.1.3
+      upper-case-first: 1.1.2
+
+  chardet@0.7.0: {}
+
+  chownr@3.0.0: {}
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  clean-stack@2.2.0: {}
+
+  cli-cursor@3.1.0:
+    dependencies:
+      restore-cursor: 3.1.0
+
+  cli-spinners@2.9.2: {}
+
+  cli-width@3.0.0: {}
+
+  client-only@0.0.1: {}
+
+  clone@1.0.4: {}
+
+  clsx@2.1.1: {}
+
+  color-convert@1.9.3:
+    dependencies:
+      color-name: 1.1.3
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.3: {}
+
+  color-name@1.1.4: {}
+
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    optional: true
+
+  color@4.2.3:
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+    optional: true
+
+  commander@10.0.1: {}
+
+  concat-map@0.0.1: {}
+
+  constant-case@2.0.0:
+    dependencies:
+      snake-case: 2.1.0
+      upper-case: 1.1.3
+
+  core-js-pure@3.45.0: {}
+
+  create-require@1.1.1: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  csstype@3.1.3: {}
+
+  data-uri-to-buffer@6.0.2: {}
+
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  debug@4.4.1:
+    dependencies:
+      ms: 2.1.3
+
+  deep-extend@0.6.0: {}
+
+  deep-is@0.1.4: {}
+
+  defaults@1.0.4:
+    dependencies:
+      clone: 1.0.4
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
+  degenerator@5.0.1:
+    dependencies:
+      ast-types: 0.13.4
+      escodegen: 2.1.0
+      esprima: 4.0.1
+
+  del@5.1.0:
+    dependencies:
+      globby: 10.0.2
+      graceful-fs: 4.2.11
+      is-glob: 4.0.3
+      is-path-cwd: 2.2.0
+      is-path-inside: 3.0.3
+      p-map: 3.0.0
+      rimraf: 3.0.2
+      slash: 3.0.0
+
+  detect-libc@2.0.4: {}
+
+  diff@4.0.2: {}
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  doctrine@2.1.0:
+    dependencies:
+      esutils: 2.0.3
+
+  dot-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  dotenv@16.0.3: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  emoji-regex@8.0.0: {}
+
+  enhanced-resolve@5.18.2:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.2
+
+  es-abstract@1.24.0:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.19
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-iterator-helpers@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-set-tostringtag: 2.1.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      iterator.prototype: 1.1.5
+      safe-array-concat: 1.1.3
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  es-shim-unscopables@1.1.0:
+    dependencies:
+      hasown: 2.0.2
+
+  es-to-primitive@1.3.0:
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
+  escape-string-regexp@1.0.5: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
+  eslint-config-prettier@9.1.2(eslint@9.32.0(jiti@2.5.1)):
+    dependencies:
+      eslint: 9.32.0(jiti@2.5.1)
+
+  eslint-plugin-only-warn@1.1.0: {}
+
+  eslint-plugin-react-hooks@5.2.0(eslint@9.32.0(jiti@2.5.1)):
+    dependencies:
+      eslint: 9.32.0(jiti@2.5.1)
+
+  eslint-plugin-react@7.37.5(eslint@9.32.0(jiti@2.5.1)):
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.3
+      array.prototype.tosorted: 1.1.4
+      doctrine: 2.1.0
+      es-iterator-helpers: 1.2.1
+      eslint: 9.32.0(jiti@2.5.1)
+      estraverse: 5.3.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      minimatch: 3.1.2
+      object.entries: 1.1.9
+      object.fromentries: 2.0.8
+      object.values: 1.2.1
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.5
+      semver: 6.3.1
+      string.prototype.matchall: 4.0.12
+      string.prototype.repeat: 1.0.0
+
+  eslint-plugin-turbo@2.5.5(eslint@9.32.0(jiti@2.5.1))(turbo@2.5.5):
+    dependencies:
+      dotenv: 16.0.3
+      eslint: 9.32.0(jiti@2.5.1)
+      turbo: 2.5.5
+
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint@9.32.0(jiti@2.5.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.5.1))
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.21.0
+      '@eslint/config-helpers': 0.3.0
+      '@eslint/core': 0.15.1
+      '@eslint/eslintrc': 3.3.1
+      '@eslint/js': 9.32.0
+      '@eslint/plugin-kit': 0.3.4
+      '@humanfs/node': 0.16.6
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.1
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.5.1
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 4.2.1
+
+  esprima@4.0.1: {}
+
+  esquery@1.6.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  esutils@2.0.3: {}
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  external-editor@3.1.0:
+    dependencies:
+      chardet: 0.7.0
+      iconv-lite: 0.4.24
+      tmp: 0.0.33
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.1:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fastq@1.19.1:
+    dependencies:
+      reusify: 1.1.0
+
+  figures@3.2.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+
+  flatted@3.3.3: {}
+
+  for-each@0.3.5:
+    dependencies:
+      is-callable: 1.2.7
+
+  fs-extra@10.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+
+  fs.realpath@1.0.0: {}
+
+  function-bind@1.1.2: {}
+
+  function.prototype.name@1.1.8:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
+
+  functions-have-names@1.2.3: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-stream@6.0.1: {}
+
+  get-symbol-description@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+
+  get-uri@6.0.5:
+    dependencies:
+      basic-ftp: 5.0.5
+      data-uri-to-buffer: 6.0.2
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  globals@14.0.0: {}
+
+  globals@15.15.0: {}
+
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+
+  globby@10.0.2:
+    dependencies:
+      '@types/glob': 7.2.0
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      glob: 7.2.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  gradient-string@2.0.2:
+    dependencies:
+      chalk: 4.1.2
+      tinygradient: 1.1.5
+
+  graphemer@1.4.0: {}
+
+  handlebars@4.7.8:
+    dependencies:
+      minimist: 1.2.8
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.19.3
+
+  has-bigints@1.1.0: {}
+
+  has-flag@3.0.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  header-case@1.0.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
+
+  human-signals@2.1.0: {}
+
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ieee754@1.2.1: {}
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
+  indent-string@4.0.0: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.4: {}
+
+  ini@1.3.8: {}
+
+  inquirer@7.3.3:
+    dependencies:
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-width: 3.0.0
+      external-editor: 3.1.0
+      figures: 3.2.0
+      lodash: 4.17.21
+      mute-stream: 0.0.8
+      run-async: 2.4.1
+      rxjs: 6.6.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      through: 2.3.8
+
+  inquirer@8.2.6:
+    dependencies:
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-width: 3.0.0
+      external-editor: 3.1.0
+      figures: 3.2.0
+      lodash: 4.17.21
+      mute-stream: 0.0.8
+      ora: 5.4.1
+      run-async: 2.4.1
+      rxjs: 7.8.2
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      through: 2.3.8
+      wrap-ansi: 6.2.0
+
+  internal-slot@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+
+  ip-address@9.0.5:
+    dependencies:
+      jsbn: 1.1.0
+      sprintf-js: 1.1.3
+
+  is-array-buffer@3.0.5:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-arrayish@0.3.2:
+    optional: true
+
+  is-async-function@2.1.1:
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-bigint@1.1.0:
+    dependencies:
+      has-bigints: 1.1.0
+
+  is-boolean-object@1.2.2:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-callable@1.2.7: {}
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+
+  is-date-object@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-extglob@2.1.1: {}
+
+  is-finalizationregistry@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-generator-function@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-interactive@1.0.0: {}
+
+  is-lower-case@1.1.3:
+    dependencies:
+      lower-case: 1.1.4
+
+  is-map@2.0.3: {}
+
+  is-negative-zero@2.0.3: {}
+
+  is-number-object@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-number@7.0.0: {}
+
+  is-path-cwd@2.2.0: {}
+
+  is-path-inside@3.0.3: {}
+
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-set@2.0.3: {}
+
+  is-shared-array-buffer@1.0.4:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-stream@2.0.1: {}
+
+  is-string@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-symbol@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.19
+
+  is-unicode-supported@0.1.0: {}
+
+  is-upper-case@1.1.2:
+    dependencies:
+      upper-case: 1.1.3
+
+  is-weakmap@2.0.2: {}
+
+  is-weakref@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-weakset@2.0.4:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  isarray@2.0.5: {}
+
+  isbinaryfile@4.0.10: {}
+
+  isexe@2.0.0: {}
+
+  iterator.prototype@1.1.5:
+    dependencies:
+      define-data-property: 1.1.4
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      has-symbols: 1.1.0
+      set-function-name: 2.0.2
+
+  jiti@2.5.1: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.0:
+    dependencies:
+      argparse: 2.0.1
+
+  jsbn@1.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  jsonfile@6.1.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsx-ast-utils@3.3.5:
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.flat: 1.3.3
+      object.assign: 4.1.7
+      object.values: 1.2.1
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash.get@4.4.2: {}
+
+  lodash.merge@4.6.2: {}
+
+  lodash@4.17.21: {}
+
+  log-symbols@3.0.0:
+    dependencies:
+      chalk: 2.4.2
+
+  log-symbols@4.1.0:
+    dependencies:
+      chalk: 4.1.2
+      is-unicode-supported: 0.1.0
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  lower-case-first@1.0.2:
+    dependencies:
+      lower-case: 1.1.4
+
+  lower-case@1.1.4: {}
+
+  lru-cache@7.18.3: {}
+
+  lucide-react@0.475.0(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+
+  magic-string@0.30.17:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.4
+
+  make-error@1.3.6: {}
+
+  math-intrinsics@1.1.0: {}
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mimic-fn@2.1.0: {}
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimist@1.2.8: {}
+
+  minipass@7.1.2: {}
+
+  minizlib@3.0.2:
+    dependencies:
+      minipass: 7.1.2
+
+  mkdirp@0.5.6:
+    dependencies:
+      minimist: 1.2.8
+
+  mkdirp@3.0.1: {}
+
+  ms@2.1.3: {}
+
+  mute-stream@0.0.8: {}
+
+  nanoid@3.3.11: {}
+
+  natural-compare@1.4.0: {}
+
+  neo-async@2.6.2: {}
+
+  netmask@2.0.2: {}
+
+  next-themes@0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  next@15.4.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      '@next/env': 15.4.5
+      '@swc/helpers': 0.5.15
+      caniuse-lite: 1.0.30001731
+      postcss: 8.4.31
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      styled-jsx: 5.1.6(react@19.1.1)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 15.4.5
+      '@next/swc-darwin-x64': 15.4.5
+      '@next/swc-linux-arm64-gnu': 15.4.5
+      '@next/swc-linux-arm64-musl': 15.4.5
+      '@next/swc-linux-x64-gnu': 15.4.5
+      '@next/swc-linux-x64-musl': 15.4.5
+      '@next/swc-win32-arm64-msvc': 15.4.5
+      '@next/swc-win32-x64-msvc': 15.4.5
+      sharp: 0.34.3
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  no-case@2.3.2:
+    dependencies:
+      lower-case: 1.1.4
+
+  node-plop@0.26.3:
+    dependencies:
+      '@babel/runtime-corejs3': 7.28.2
+      '@types/inquirer': 6.5.0
+      change-case: 3.1.0
+      del: 5.1.0
+      globby: 10.0.2
+      handlebars: 4.7.8
+      inquirer: 7.3.3
+      isbinaryfile: 4.0.10
+      lodash.get: 4.4.2
+      mkdirp: 0.5.6
+      resolve: 1.22.10
+
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
+
+  object-keys@1.1.1: {}
+
+  object.assign@4.1.7:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+
+  object.entries@1.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  object.fromentries@2.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+
+  object.values@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  ora@4.1.1:
+    dependencies:
+      chalk: 3.0.0
+      cli-cursor: 3.1.0
+      cli-spinners: 2.9.2
+      is-interactive: 1.0.0
+      log-symbols: 3.0.0
+      mute-stream: 0.0.8
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+
+  ora@5.4.1:
+    dependencies:
+      bl: 4.1.0
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-spinners: 2.9.2
+      is-interactive: 1.0.0
+      is-unicode-supported: 0.1.0
+      log-symbols: 4.1.0
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+
+  os-tmpdir@1.0.2: {}
+
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  p-map@3.0.0:
+    dependencies:
+      aggregate-error: 3.1.0
+
+  pac-proxy-agent@7.2.0:
+    dependencies:
+      '@tootallnate/quickjs-emscripten': 0.23.0
+      agent-base: 7.1.4
+      debug: 4.4.1
+      get-uri: 6.0.5
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      pac-resolver: 7.0.1
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  pac-resolver@7.0.1:
+    dependencies:
+      degenerator: 5.0.1
+      netmask: 2.0.2
+
+  param-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  pascal-case@2.0.1:
+    dependencies:
+      camel-case: 3.0.0
+      upper-case-first: 1.1.2
+
+  path-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  path-exists@4.0.0: {}
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-parse@1.0.7: {}
+
+  path-type@4.0.0: {}
+
+  picocolors@1.0.1: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  possible-typed-array-names@1.1.0: {}
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  prettier@3.6.2: {}
+
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
+  proxy-agent@6.5.0:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.1
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      lru-cache: 7.18.3
+      pac-proxy-agent: 7.2.0
+      proxy-from-env: 1.1.0
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  proxy-from-env@1.1.0: {}
+
+  punycode@2.3.1: {}
+
+  queue-microtask@1.2.3: {}
+
+  rc@1.2.8:
+    dependencies:
+      deep-extend: 0.6.0
+      ini: 1.3.8
+      minimist: 1.2.8
+      strip-json-comments: 2.0.1
+
+  react-dom@19.1.1(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      scheduler: 0.26.0
+
+  react-is@16.13.1: {}
+
+  react@19.1.1: {}
+
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  reflect.getprototypeof@1.0.10:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+
+  regexp.prototype.flags@1.5.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      set-function-name: 2.0.2
+
+  registry-auth-token@3.3.2:
+    dependencies:
+      rc: 1.2.8
+      safe-buffer: 5.2.1
+
+  registry-url@3.1.0:
+    dependencies:
+      rc: 1.2.8
+
+  resolve-from@4.0.0: {}
+
+  resolve@1.22.10:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  resolve@2.0.0-next.5:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  restore-cursor@3.1.0:
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+
+  reusify@1.1.0: {}
+
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+
+  run-async@2.4.1: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  rxjs@6.6.7:
+    dependencies:
+      tslib: 1.14.1
+
+  rxjs@7.8.2:
+    dependencies:
+      tslib: 2.8.1
+
+  safe-array-concat@1.1.3:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-buffer@5.2.1: {}
+
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
+  safer-buffer@2.1.2: {}
+
+  scheduler@0.26.0: {}
+
+  semver@6.3.1: {}
+
+  semver@7.6.2: {}
+
+  semver@7.7.2: {}
+
+  sentence-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case-first: 1.1.2
+
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
+  set-function-name@2.0.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+
+  sharp@0.34.3:
+    dependencies:
+      color: 4.2.3
+      detect-libc: 2.0.4
+      semver: 7.7.2
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.3
+      '@img/sharp-darwin-x64': 0.34.3
+      '@img/sharp-libvips-darwin-arm64': 1.2.0
+      '@img/sharp-libvips-darwin-x64': 1.2.0
+      '@img/sharp-libvips-linux-arm': 1.2.0
+      '@img/sharp-libvips-linux-arm64': 1.2.0
+      '@img/sharp-libvips-linux-ppc64': 1.2.0
+      '@img/sharp-libvips-linux-s390x': 1.2.0
+      '@img/sharp-libvips-linux-x64': 1.2.0
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.0
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.0
+      '@img/sharp-linux-arm': 0.34.3
+      '@img/sharp-linux-arm64': 0.34.3
+      '@img/sharp-linux-ppc64': 0.34.3
+      '@img/sharp-linux-s390x': 0.34.3
+      '@img/sharp-linux-x64': 0.34.3
+      '@img/sharp-linuxmusl-arm64': 0.34.3
+      '@img/sharp-linuxmusl-x64': 0.34.3
+      '@img/sharp-wasm32': 0.34.3
+      '@img/sharp-win32-arm64': 0.34.3
+      '@img/sharp-win32-ia32': 0.34.3
+      '@img/sharp-win32-x64': 0.34.3
+    optional: true
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  signal-exit@3.0.7: {}
+
+  simple-swizzle@0.2.2:
+    dependencies:
+      is-arrayish: 0.3.2
+    optional: true
+
+  slash@3.0.0: {}
+
+  smart-buffer@4.2.0: {}
+
+  snake-case@2.1.0:
+    dependencies:
+      no-case: 2.3.2
+
+  socks-proxy-agent@8.0.5:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.1
+      socks: 2.8.6
+    transitivePeerDependencies:
+      - supports-color
+
+  socks@2.8.6:
+    dependencies:
+      ip-address: 9.0.5
+      smart-buffer: 4.2.0
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.6.1: {}
+
+  sprintf-js@1.1.3: {}
+
+  stop-iteration-iterator@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string.prototype.matchall@4.0.12:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      regexp.prototype.flags: 1.5.4
+      set-function-name: 2.0.2
+      side-channel: 1.1.0
+
+  string.prototype.repeat@1.0.0:
+    dependencies:
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
+
+  string.prototype.trimend@1.0.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-final-newline@2.0.0: {}
+
+  strip-json-comments@2.0.1: {}
+
+  strip-json-comments@3.1.1: {}
+
+  styled-jsx@5.1.6(react@19.1.1):
+    dependencies:
+      client-only: 0.0.1
+      react: 19.1.1
+
+  supports-color@5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  swap-case@1.1.2:
+    dependencies:
+      lower-case: 1.1.4
+      upper-case: 1.1.3
+
+  tailwind-merge@3.3.1: {}
+
+  tailwindcss@4.1.11: {}
+
+  tapable@2.2.2: {}
+
+  tar@7.4.3:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.2
+      mkdirp: 3.0.1
+      yallist: 5.0.0
+
+  through@2.3.8: {}
+
+  tinycolor2@1.6.0: {}
+
+  tinygradient@1.1.5:
+    dependencies:
+      '@types/tinycolor2': 1.4.6
+      tinycolor2: 1.6.0
+
+  title-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  tmp@0.0.33:
+    dependencies:
+      os-tmpdir: 1.0.2
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  ts-api-utils@2.1.0(typescript@5.9.2):
+    dependencies:
+      typescript: 5.9.2
+
+  ts-node@10.9.2(@types/node@20.19.9)(typescript@5.9.2):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 20.19.9
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.9.2
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+
+  tslib@1.14.1: {}
+
+  tslib@2.8.1: {}
+
+  turbo-darwin-64@2.5.5:
+    optional: true
+
+  turbo-darwin-arm64@2.5.5:
+    optional: true
+
+  turbo-linux-64@2.5.5:
+    optional: true
+
+  turbo-linux-arm64@2.5.5:
+    optional: true
+
+  turbo-windows-64@2.5.5:
+    optional: true
+
+  turbo-windows-arm64@2.5.5:
+    optional: true
+
+  turbo@2.5.5:
+    optionalDependencies:
+      turbo-darwin-64: 2.5.5
+      turbo-darwin-arm64: 2.5.5
+      turbo-linux-64: 2.5.5
+      turbo-linux-arm64: 2.5.5
+      turbo-windows-64: 2.5.5
+      turbo-windows-arm64: 2.5.5
+
+  tw-animate-css@1.3.6: {}
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@0.21.3: {}
+
+  typed-array-buffer@1.0.3:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-length@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-offset@1.0.4:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+
+  typed-array-length@1.0.7:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
+  typescript-eslint@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.39.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint: 9.32.0(jiti@2.5.1)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.7.3: {}
+
+  typescript@5.9.2: {}
+
+  uglify-js@3.19.3:
+    optional: true
+
+  unbox-primitive@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
+  undici-types@6.21.0: {}
+
+  universalify@2.0.1: {}
+
+  update-check@1.5.4:
+    dependencies:
+      registry-auth-token: 3.3.2
+      registry-url: 3.1.0
+
+  upper-case-first@1.1.2:
+    dependencies:
+      upper-case: 1.1.3
+
+  upper-case@1.1.3: {}
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  util-deprecate@1.0.2: {}
+
+  v8-compile-cache-lib@3.0.1: {}
+
+  validate-npm-package-name@5.0.1: {}
+
+  wcwidth@1.0.1:
+    dependencies:
+      defaults: 1.0.4
+
+  which-boxed-primitive@1.1.1:
+    dependencies:
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
+
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
+      has-tostringtag: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.0
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.19
+
+  which-collection@1.0.2:
+    dependencies:
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.4
+
+  which-typed-array@1.1.19:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  word-wrap@1.2.5: {}
+
+  wordwrap@1.0.0: {}
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrappy@1.0.2: {}
+
+  yallist@5.0.0: {}
+
+  yn@3.1.1: {}
+
+  yocto-queue@0.1.0: {}
+
+  zod@3.25.76: {}
diff --git a/templates/monorepo-next/pnpm-workspace.yaml b/templates/monorepo-next/pnpm-workspace.yaml
new file mode 100644
index 00000000000..3ff5faaaf5f
--- /dev/null
+++ b/templates/monorepo-next/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"
diff --git a/templates/monorepo-next/tsconfig.json b/templates/monorepo-next/tsconfig.json
new file mode 100644
index 00000000000..c6a4ad55011
--- /dev/null
+++ b/templates/monorepo-next/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@workspace/typescript-config/base.json"
+}
+
diff --git a/templates/monorepo-next/turbo.json b/templates/monorepo-next/turbo.json
new file mode 100644
index 00000000000..d6a7fe05543
--- /dev/null
+++ b/templates/monorepo-next/turbo.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": [".next/**", "!.next/cache/**"]
+    },
+    "lint": {
+      "dependsOn": ["^lint"]
+    },
+    "check-types": {
+      "dependsOn": ["^check-types"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}
diff --git a/templates/next-template/.editorconfig b/templates/next-template/.editorconfig
deleted file mode 100644
index ae10a5cce3b..00000000000
--- a/templates/next-template/.editorconfig
+++ /dev/null
@@ -1,10 +0,0 @@
-# editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true
diff --git a/templates/next-template/.eslintignore b/templates/next-template/.eslintignore
deleted file mode 100644
index dc0f9d8bfa1..00000000000
--- a/templates/next-template/.eslintignore
+++ /dev/null
@@ -1,5 +0,0 @@
-dist/*
-.cache
-public
-node_modules
-*.esm.js
diff --git a/templates/next-template/.eslintrc.json b/templates/next-template/.eslintrc.json
deleted file mode 100644
index fe113b71615..00000000000
--- a/templates/next-template/.eslintrc.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/eslintrc",
-  "root": true,
-  "extends": [
-    "next/core-web-vitals",
-    "prettier",
-    "plugin:tailwindcss/recommended"
-  ],
-  "plugins": ["tailwindcss"],
-  "rules": {
-    "@next/next/no-html-link-for-pages": "off",
-    "react/jsx-key": "off",
-    "tailwindcss/no-custom-classname": "off"
-  },
-  "settings": {
-    "tailwindcss": {
-      "callees": ["cn"],
-      "config": "tailwind.config.js"
-    },
-    "next": {
-      "rootDir": ["./"]
-    }
-  },
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx"],
-      "parser": "@typescript-eslint/parser"
-    }
-  ]
-}
diff --git a/templates/next-template/.gitignore b/templates/next-template/.gitignore
deleted file mode 100644
index ea0d26b987d..00000000000
--- a/templates/next-template/.gitignore
+++ /dev/null
@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-node_modules
-.pnp
-.pnp.js
-
-# testing
-coverage
-
-# next.js
-.next/
-out/
-build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# turbo
-.turbo
-
-.contentlayer
-.env
\ No newline at end of file
diff --git a/templates/next-template/.prettierignore b/templates/next-template/.prettierignore
deleted file mode 100644
index 2f730936cfe..00000000000
--- a/templates/next-template/.prettierignore
+++ /dev/null
@@ -1,12 +0,0 @@
-cache
-.cache
-package.json
-package-lock.json
-public
-CHANGELOG.md
-.yarn
-dist
-node_modules
-.next
-build
-.contentlayer
\ No newline at end of file
diff --git a/templates/next-template/.vscode/settings.json b/templates/next-template/.vscode/settings.json
deleted file mode 100644
index 99438ebd285..00000000000
--- a/templates/next-template/.vscode/settings.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "typescript.tsdk": "../../node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
-}
diff --git a/templates/next-template/README.md b/templates/next-template/README.md
deleted file mode 100644
index ae8d5896795..00000000000
--- a/templates/next-template/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# next-template
-
-A Next.js 13 template for building apps with Radix UI and Tailwind CSS.
-
-## Usage
-
-```bash
-npx create-next-app -e https://github.com/shadcn/next-template
-```
-
-## Features
-
-- Next.js 13 App Directory
-- Radix UI Primitives
-- Tailwind CSS
-- Icons from [Lucide](https://lucide.dev)
-- Dark mode with `next-themes`
-- Tailwind CSS class sorting, merging and linting.
-
-## License
-
-Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
diff --git a/templates/next-template/app/layout.tsx b/templates/next-template/app/layout.tsx
deleted file mode 100644
index 460dcd99ac7..00000000000
--- a/templates/next-template/app/layout.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import "@/styles/globals.css"
-import { Metadata } from "next"
-
-import { siteConfig } from "@/config/site"
-import { fontSans } from "@/lib/fonts"
-import { cn } from "@/lib/utils"
-import { SiteHeader } from "@/components/site-header"
-import { TailwindIndicator } from "@/components/tailwind-indicator"
-import { ThemeProvider } from "@/components/theme-provider"
-
-export const metadata: Metadata = {
-  title: {
-    default: siteConfig.name,
-    template: `%s - ${siteConfig.name}`,
-  },
-  description: siteConfig.description,
-  themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "white" },
-    { media: "(prefers-color-scheme: dark)", color: "black" },
-  ],
-  icons: {
-    icon: "/favicon.ico",
-    shortcut: "/favicon-16x16.png",
-    apple: "/apple-touch-icon.png",
-  },
-}
-
-interface RootLayoutProps {
-  children: React.ReactNode
-}
-
-export default function RootLayout({ children }: RootLayoutProps) {
-  return (
-    <>
-      <html lang="en" suppressHydrationWarning>
-        <head />
-        <body
-          className={cn(
-            "min-h-screen bg-background font-sans antialiased",
-            fontSans.variable
-          )}
-        >
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <div className="relative flex min-h-screen flex-col">
-              <SiteHeader />
-              <div className="flex-1">{children}</div>
-            </div>
-            <TailwindIndicator />
-          </ThemeProvider>
-        </body>
-      </html>
-    </>
-  )
-}
diff --git a/templates/next-template/app/page.tsx b/templates/next-template/app/page.tsx
deleted file mode 100644
index 01e50de2556..00000000000
--- a/templates/next-template/app/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Link from "next/link"
-
-import { siteConfig } from "@/config/site"
-import { buttonVariants } from "@/components/ui/button"
-
-export default function IndexPage() {
-  return (
-    <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
-      <div className="flex max-w-[980px] flex-col items-start gap-2">
-        <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
-          Beautifully designed components <br className="hidden sm:inline" />
-          built with Radix UI and Tailwind CSS.
-        </h1>
-        <p className="max-w-[700px] text-lg text-muted-foreground">
-          Accessible and customizable components that you can copy and paste
-          into your apps. Free. Open Source. And Next.js 13 Ready.
-        </p>
-      </div>
-      <div className="flex gap-4">
-        <Link
-          href={siteConfig.links.docs}
-          target="_blank"
-          rel="noreferrer"
-          className={buttonVariants()}
-        >
-          Documentation
-        </Link>
-        <Link
-          target="_blank"
-          rel="noreferrer"
-          href={siteConfig.links.github}
-          className={buttonVariants({ variant: "outline" })}
-        >
-          GitHub
-        </Link>
-      </div>
-    </section>
-  )
-}
diff --git a/templates/next-template/components.json b/templates/next-template/components.json
deleted file mode 100644
index 0e1e0366137..00000000000
--- a/templates/next-template/components.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "app/globals.css",
-    "baseColor": "slate",
-    "cssVariables": true
-  },
-  "rsc": false,
-  "aliases": {
-    "utils": "@/lib/utils",
-    "components": "@/components"
-  }
-}
diff --git a/templates/next-template/components/icons.tsx b/templates/next-template/components/icons.tsx
deleted file mode 100644
index 06e3478f13f..00000000000
--- a/templates/next-template/components/icons.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { LucideProps, Moon, SunMedium, type LucideIcon } from "lucide-react"
-
-export type Icon = LucideIcon
-
-export const Icons = {
-  sun: SunMedium,
-  moon: Moon,
-  twitter: (props: LucideProps) => (
-    <svg
-      {...props}
-      height="23"
-      viewBox="0 0 1200 1227"
-      width="23"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
-    </svg>
-  ),
-  logo: (props: LucideProps) => (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
-      <path
-        fill="currentColor"
-        d="M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z"
-      />
-    </svg>
-  ),
-  gitHub: (props: LucideProps) => (
-    <svg viewBox="0 0 438.549 438.549" {...props}>
-      <path
-        fill="currentColor"
-        d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-      ></path>
-    </svg>
-  ),
-}
diff --git a/templates/next-template/components/main-nav.tsx b/templates/next-template/components/main-nav.tsx
deleted file mode 100644
index 64e87a22996..00000000000
--- a/templates/next-template/components/main-nav.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from "react"
-import Link from "next/link"
-
-import { NavItem } from "@/types/nav"
-import { siteConfig } from "@/config/site"
-import { cn } from "@/lib/utils"
-import { Icons } from "@/components/icons"
-
-interface MainNavProps {
-  items?: NavItem[]
-}
-
-export function MainNav({ items }: MainNavProps) {
-  return (
-    <div className="flex gap-6 md:gap-10">
-      <Link href="/" className="flex items-center space-x-2">
-        <Icons.logo className="h-6 w-6" />
-        <span className="inline-block font-bold">{siteConfig.name}</span>
-      </Link>
-      {items?.length ? (
-        <nav className="flex gap-6">
-          {items?.map(
-            (item, index) =>
-              item.href && (
-                <Link
-                  key={index}
-                  href={item.href}
-                  className={cn(
-                    "flex items-center text-sm font-medium text-muted-foreground",
-                    item.disabled && "cursor-not-allowed opacity-80"
-                  )}
-                >
-                  {item.title}
-                </Link>
-              )
-          )}
-        </nav>
-      ) : null}
-    </div>
-  )
-}
diff --git a/templates/next-template/components/site-header.tsx b/templates/next-template/components/site-header.tsx
deleted file mode 100644
index ea45d04e5cc..00000000000
--- a/templates/next-template/components/site-header.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Link from "next/link"
-
-import { siteConfig } from "@/config/site"
-import { buttonVariants } from "@/components/ui/button"
-import { Icons } from "@/components/icons"
-import { MainNav } from "@/components/main-nav"
-import { ThemeToggle } from "@/components/theme-toggle"
-
-export function SiteHeader() {
-  return (
-    <header className="sticky top-0 z-40 w-full border-b bg-background">
-      <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
-        <MainNav items={siteConfig.mainNav} />
-        <div className="flex flex-1 items-center justify-end space-x-4">
-          <nav className="flex items-center space-x-1">
-            <Link
-              href={siteConfig.links.github}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div
-                className={buttonVariants({
-                  size: "icon",
-                  variant: "ghost",
-                })}
-              >
-                <Icons.gitHub className="h-5 w-5" />
-                <span className="sr-only">GitHub</span>
-              </div>
-            </Link>
-            <Link
-              href={siteConfig.links.twitter}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div
-                className={buttonVariants({
-                  size: "icon",
-                  variant: "ghost",
-                })}
-              >
-                <Icons.twitter className="h-4 w-4 fill-current" />
-                <span className="sr-only">Twitter</span>
-              </div>
-            </Link>
-            <ThemeToggle />
-          </nav>
-        </div>
-      </div>
-    </header>
-  )
-}
diff --git a/templates/next-template/components/tailwind-indicator.tsx b/templates/next-template/components/tailwind-indicator.tsx
deleted file mode 100644
index 535e074233d..00000000000
--- a/templates/next-template/components/tailwind-indicator.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export function TailwindIndicator() {
-  if (process.env.NODE_ENV === "production") return null
-
-  return (
-    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
-      <div className="block sm:hidden">xs</div>
-      <div className="hidden sm:block md:hidden">sm</div>
-      <div className="hidden md:block lg:hidden">md</div>
-      <div className="hidden lg:block xl:hidden">lg</div>
-      <div className="hidden xl:block 2xl:hidden">xl</div>
-      <div className="hidden 2xl:block">2xl</div>
-    </div>
-  )
-}
diff --git a/templates/next-template/components/theme-provider.tsx b/templates/next-template/components/theme-provider.tsx
deleted file mode 100644
index 8c90fbc8b46..00000000000
--- a/templates/next-template/components/theme-provider.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { type ThemeProviderProps } from "next-themes/dist/types"
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}
diff --git a/templates/next-template/components/theme-toggle.tsx b/templates/next-template/components/theme-toggle.tsx
deleted file mode 100644
index 01e846c7be6..00000000000
--- a/templates/next-template/components/theme-toggle.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
-
-import { Button } from "@/components/ui/button"
-
-export function ThemeToggle() {
-  const { setTheme, theme } = useTheme()
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-    >
-      <Sun className="h-[1.5rem] w-[1.3rem] dark:hidden" />
-      <Moon className="hidden h-5 w-5 dark:block" />
-      <span className="sr-only">Toggle theme</span>
-    </Button>
-  )
-}
diff --git a/templates/next-template/components/ui/button.tsx b/templates/next-template/components/ui/button.tsx
deleted file mode 100644
index bb9b91a8397..00000000000
--- a/templates/next-template/components/ui/button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline text-primary",
-      },
-      size: {
-        default: "h-10 py-2 px-4",
-        sm: "h-9 px-3 rounded-md",
-        lg: "h-11 px-8 rounded-md",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
diff --git a/templates/next-template/config/site.ts b/templates/next-template/config/site.ts
deleted file mode 100644
index f69d8c95bb9..00000000000
--- a/templates/next-template/config/site.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type SiteConfig = typeof siteConfig
-
-export const siteConfig = {
-  name: "Next.js",
-  description:
-    "Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.",
-  mainNav: [
-    {
-      title: "Home",
-      href: "/",
-    },
-  ],
-  links: {
-    twitter: "https://twitter.com/shadcn",
-    github: "https://github.com/shadcn/ui",
-    docs: "https://ui.shadcn.com",
-  },
-}
diff --git a/templates/next-template/lib/fonts.ts b/templates/next-template/lib/fonts.ts
deleted file mode 100644
index eb51e1181f0..00000000000
--- a/templates/next-template/lib/fonts.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { JetBrains_Mono as FontMono, Inter as FontSans } from "next/font/google"
-
-export const fontSans = FontSans({
-  subsets: ["latin"],
-  variable: "--font-sans",
-})
-
-export const fontMono = FontMono({
-  subsets: ["latin"],
-  variable: "--font-mono",
-})
diff --git a/templates/next-template/next-env.d.ts b/templates/next-template/next-env.d.ts
deleted file mode 100644
index 4f11a03dc6c..00000000000
--- a/templates/next-template/next-env.d.ts
+++ /dev/null
@@ -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.
diff --git a/templates/next-template/next.config.mjs b/templates/next-template/next.config.mjs
deleted file mode 100644
index 94be31c3d55..00000000000
--- a/templates/next-template/next.config.mjs
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
-
-export default nextConfig
diff --git a/templates/next-template/package.json b/templates/next-template/package.json
deleted file mode 100644
index 6407f204a79..00000000000
--- a/templates/next-template/package.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "next-template",
-  "version": "0.0.2",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "lint:fix": "next lint --fix",
-    "preview": "next build && next start",
-    "typecheck": "tsc --noEmit",
-    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
-    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache"
-  },
-  "dependencies": {
-    "@radix-ui/react-slot": "^1.0.2",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^1.2.1",
-    "lucide-react": "0.288.0",
-    "next": "14.1.3",
-    "next-themes": "^0.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sharp": "^0.31.3",
-    "tailwind-merge": "^1.13.2",
-    "tailwindcss-animate": "^1.0.6"
-  },
-  "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
-    "@types/node": "^17.0.45",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/parser": "^5.61.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.44.0",
-    "eslint-config-next": "13.0.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-tailwindcss": "3.13.1",
-    "postcss": "^8.4.24",
-    "prettier": "^2.8.8",
-    "tailwindcss": "3.3.7",
-    "typescript": "^5.5.3"
-  }
-}
diff --git a/templates/next-template/postcss.config.js b/templates/next-template/postcss.config.js
deleted file mode 100644
index 33ad091d26d..00000000000
--- a/templates/next-template/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/templates/next-template/prettier.config.js b/templates/next-template/prettier.config.js
deleted file mode 100644
index 83bb10beaec..00000000000
--- a/templates/next-template/prettier.config.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/** @type {import('prettier').Config} */
-module.exports = {
-  endOfLine: "lf",
-  semi: false,
-  singleQuote: false,
-  tabWidth: 2,
-  trailingComma: "es5",
-  importOrder: [
-    "^(react/(.*)$)|^(react$)",
-    "^(next/(.*)$)|^(next$)",
-    "<THIRD_PARTY_MODULES>",
-    "",
-    "^types$",
-    "^@/types/(.*)$",
-    "^@/config/(.*)$",
-    "^@/lib/(.*)$",
-    "^@/hooks/(.*)$",
-    "^@/components/ui/(.*)$",
-    "^@/components/(.*)$",
-    "^@/styles/(.*)$",
-    "^@/app/(.*)$",
-    "",
-    "^[./]",
-  ],
-  importOrderSeparation: false,
-  importOrderSortSpecifiers: true,
-  importOrderBuiltinModulesToTop: true,
-  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
-  importOrderMergeDuplicateImports: true,
-  importOrderCombineTypeAndValueImports: true,
-  plugins: ["@ianvs/prettier-plugin-sort-imports"],
-}
diff --git a/templates/next-template/public/thirteen.svg b/templates/next-template/public/thirteen.svg
deleted file mode 100644
index 8977c1bd123..00000000000
--- a/templates/next-template/public/thirteen.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/templates/next-template/public/vercel.svg b/templates/next-template/public/vercel.svg
deleted file mode 100644
index d2f84222734..00000000000
--- a/templates/next-template/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/templates/next-template/styles/globals.css b/templates/next-template/styles/globals.css
deleted file mode 100644
index 95d8cab145d..00000000000
--- a/templates/next-template/styles/globals.css
+++ /dev/null
@@ -1,81 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :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;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-}
diff --git a/templates/next-template/tailwind.config.js b/templates/next-template/tailwind.config.js
deleted file mode 100644
index 3ea1db11128..00000000000
--- a/templates/next-template/tailwind.config.js
+++ /dev/null
@@ -1,76 +0,0 @@
-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))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        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")],
-}
diff --git a/templates/next-template/tsconfig.json b/templates/next-template/tsconfig.json
deleted file mode 100644
index 1b03bc259f1..00000000000
--- a/templates/next-template/tsconfig.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "incremental": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./*"]
-    },
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "strictNullChecks": true
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/templates/next-template/types/nav.ts b/templates/next-template/types/nav.ts
deleted file mode 100644
index 0961ce8a04c..00000000000
--- a/templates/next-template/types/nav.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface NavItem {
-  title: string
-  href?: string
-  disabled?: boolean
-  external?: boolean
-}
diff --git a/turbo.json b/turbo.json
index 1f4b5cc5273..6d0f7cd1570 100644
--- a/turbo.json
+++ b/turbo.json
@@ -51,6 +51,10 @@
     "test": {
       "cache": false,
       "outputs": []
+    },
+    "registry:build": {
+      "cache": false,
+      "outputs": []
     }
   }
 }
diff --git a/vitest.config.ts b/vitest.config.ts
index daa29a39312..45994863938 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -7,7 +7,13 @@ export default defineConfig({
       ...configDefaults.exclude,
       "**/node_modules/**",
       "**/fixtures/**",
+      "**/templates/**",
+      "**/packages/tests/**",
     ],
   },
-  plugins: [tsconfigPaths()],
+  plugins: [
+    tsconfigPaths({
+      ignoreConfigErrors: true,
+    }),
+  ],
 })
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
new file mode 100644
index 00000000000..0c002a976f9
--- /dev/null
+++ b/vitest.workspace.ts
@@ -0,0 +1,6 @@
+import { defineWorkspace } from "vitest/config"
+
+export default defineWorkspace([
+  "./vitest.config.ts",
+  "./packages/tests/vitest.config.ts",
+])